*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Palette canonical: ../_tools/PALETTE.md (warm-cream family) */
:root {
  /* Hinomaru — vermillion + paper white. Test theme 2026-06-02. */
  --bg: #fefcf8;          /* soft warm paper white */
  --bg-2: #f7ede4;        /* subtle warm tint */
  --surface: #ffffff;     /* pure white cards */
  --fg: #1f1816;          /* near-black warm */
  --muted: #8a7367;       /* warm grey */
  --border: #ead8c8;      /* warm cream border */
  --p100: #fce5e0;        /* very pale rose — hover/fills */
  --p200: #f5b6ab;        /* pale pink */
  --p300: #d96152;        /* light vermillion */
  --p400: #bc002d;        /* refined vermillion (shu) — primary */
  --accent: #bc002d;
  --good: #c08a1c;        /* deeper warm gold — distinct from primary red */
  --bad: #6e2424;         /* deep oxblood — clearly different from --p400 */
  --combo: #e07a1c;       /* warm peach — combo */
  --frame-radius: 36px;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
html { background: #f6ece2; overflow: hidden; }

body {
  /* On mobile, lock body to the visual viewport so iOS Safari can't
     scroll the page to bring the input into view (which pushes the
     header off the top and the input behind the keyboard). */
  position: fixed;
  inset: 0;
  /* Hinomaru hint: a barely-there red glow at top centre, like the sun through paper. */
  background:
    radial-gradient(circle at 50% 22%, rgba(188,0,45,0.07) 0px, rgba(188,0,45,0.02) 200px, transparent 360px),
    radial-gradient(ellipse at top, #fff6ef 0%, var(--bg) 60%);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
}

/* Desktop: phone-shaped frame, centered (overrides mobile position:fixed) */
@media (min-width: 600px) {
  html { overflow: auto; }
  body {
    position: relative;
    inset: auto;
    max-width: 420px;
    height: min(90dvh, 880px);
    min-height: 0;
    margin: max(2dvh, 16px) auto;
    border-radius: var(--frame-radius);
    box-shadow: 0 30px 80px rgba(188,0,45,0.14), 0 0 0 1.5px var(--border) inset;
  }
  .screen { border-radius: var(--frame-radius); }
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  transform: translate(var(--sx, 0), var(--sy, 0));
  will-change: transform;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 20px 8px;
  font-variant-numeric: tabular-nums;
}
.timer-wrap {
  flex: 1;
  height: 8px;
  background: var(--p100);
  border-radius: 4px;
  margin-right: 16px;
  overflow: hidden;
}
.timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--good), var(--p400));
  width: 100%;
  transform-origin: left;
  transition: transform 0.1s linear, background 0.3s;
}
.timer-bar.low { background: var(--bad); }
.timer-wrap.bonus { box-shadow: 0 0 0 2px var(--good), 0 0 16px rgba(192,138,28,0.40); }
.timer-wrap.damage {
  box-shadow: 0 0 0 2px var(--bad), 0 0 18px rgba(110,36,36,0.55);
  animation: timer-jolt 0.35s;
}
@keyframes timer-jolt {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}
.combo {
  font-weight: 800;
  font-size: 22px;
  color: var(--combo);
  min-width: 70px;
  text-align: right;
  transition: transform 0.15s, color 0.15s;
}
.combo.pop { transform: scale(1.4); }
.combo .x { font-size: 14px; opacity: 0.8; margin-left: 2px; }

.mute-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: 6px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.mute-btn:hover { color: var(--p400); background: var(--p100); }
.mute-btn:active { transform: scale(0.9); }
.mute-btn .ic-mute { display: none; }
.mute-btn.muted .ic-sound { display: none; }
.mute-btn.muted .ic-mute { display: inline-block; }

/* Main play area */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  position: relative;
  min-height: 0;
}
.kana {
  font-size: clamp(80px, min(42vw, 32dvh), 260px);
  line-height: 1;
  font-weight: 500;
  color: var(--p400);
  text-shadow: 0 8px 30px rgba(138,94,80,0.18);
  transition: transform 0.15s, color 0.2s, font-size 0.2s;
}
.kana.correct { color: var(--good); transform: scale(1.15); }
.kana.wrong { color: var(--bad); animation: nope 0.3s; }
@keyframes nope {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-12px); }
  75% { transform: translateX(12px); }
}
.score {
  margin-top: clamp(8px, 2dvh, 24px);
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.score b { color: var(--fg); font-weight: 700; }

/* Input */
.input-row {
  padding: 0 20px max(clamp(12px, 2dvh, 28px), env(safe-area-inset-bottom));
}
#romaji {
  width: 100%;
  padding: 18px 20px;
  font-size: 24px;
  text-align: center;
  background: var(--surface);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  outline: none;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: lowercase;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
}
#romaji:focus { border-color: var(--p300); background: var(--surface); }
#romaji.wrong { border-color: var(--bad); animation: nope 0.3s; }

/* Floating bursts */
.burst {
  position: absolute;
  pointer-events: none;
  font-weight: 900;
  font-size: 48px;
  color: var(--combo);
  text-shadow: 0 0 20px rgba(240,138,61,0.5);
  animation: burst 0.7s ease-out forwards;
}
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}

/* Ghost-hint after wrong */
.ghost-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  font-size: clamp(64px, 18vw, 120px);
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--bad);
  text-shadow: 0 0 24px rgba(224,52,92,0.3);
  animation: ghost 1.6s ease-out forwards;
}
@keyframes ghost {
  0%   { transform: translate(-50%, -50%) scale(0.9); opacity: 0; filter: blur(0); }
  20%  { transform: translate(-50%, -60%) scale(1);   opacity: 0.55; filter: blur(0); }
  100% { transform: translate(-50%, -160%) scale(1.1); opacity: 0; filter: blur(8px); }
}

/* Modal screens (start, end, info) */
.screen {
  position: absolute;
  inset: 0;
  background: rgba(254,252,248,0.96);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
  text-align: center;
}
.screen h1 {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 8px;
  color: var(--fg);
}
.screen h1 .dot {
  color: var(--p400);
}
.screen h1.small { font-size: 36px; }
.screen .tag {
  color: var(--muted);
  margin-bottom: 36px;
  font-size: 16px;
  max-width: 340px;
  line-height: 1.6;
}
.screen .tag.tight { margin-bottom: 0; }
.screen .tag + .tag { margin-top: 16px; }
.screen .tag b { color: var(--fg); }
.screen .big {
  font-size: 64px;
  font-weight: 900;
  color: var(--p400);
  margin: 8px 0 4px;
  line-height: 1;
}

/* Stat list (end screen) */
.stat-list {
  width: 100%;
  max-width: 280px;
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stat-row .v { color: var(--fg); font-weight: 700; font-size: 18px; }
.stat-group {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-row.best .l { font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.7; }
.stat-row.best .v { font-size: 16px; color: var(--p400); }

/* Best line (start screen) */
.best-line {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.best-line span { display: inline-flex; gap: 6px; align-items: baseline; }
.best-line b {
  color: var(--p400);
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}

/* Combo × suffix — keeps digit and multiplier in same font */
.combo-x::after {
  content: '×';
  font-size: 0.78em;
  opacity: 0.7;
  margin-left: 2px;
  font-weight: inherit;
}

/* Buttons — softer than the iconic flag red so they're easy on the eye at button scale. */
.btn {
  display: inline-block;
  padding: 18px 40px;
  margin-top: 28px;
  font-size: 18px;
  font-weight: 700;
  background: #9c2540;            /* deep wine — saturated enough to feel kana, gentle enough to look at */
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(60,20,28,0.08), 0 6px 16px rgba(156,37,64,0.10);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.btn:hover {
  background: #b32a4a;
  box-shadow: 0 2px 6px rgba(60,20,28,0.08), 0 8px 20px rgba(156,37,64,0.14);
}
.btn:active { transform: scale(0.96); }
.btn.ghost {
  margin-top: 12px;
  background: transparent;
  color: #7a1c30;                 /* deeper text-red on cream — softer than flag red */
  box-shadow: 0 0 0 1.5px var(--border) inset;
}
.btn.ghost:hover {
  background: var(--p100);
  box-shadow: 0 0 0 1.5px var(--p200) inset;
}
#screen-start .btn,
#screen-end .btn { min-width: 200px; }

/* Ad slot */
.ad-slot {
  width: 100%;
  max-width: 320px;
  min-height: 100px;
  margin: 24px auto 0;
  border-radius: 8px;
  background: var(--bg-2);
}

/* Tip card */
.tip-card {
  width: 100%;
  max-width: 320px;
  margin: 24px auto 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  text-align: center;
}
.tip-card .heart { font-size: 24px; }
.tip-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.tip-link {
  display: inline-block;
  padding: 10px 22px;
  background: var(--p100);
  border: none;
  border-radius: 10px;
  color: var(--p400);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s;
}
.tip-link:hover { background: var(--p200); }

/* Footer / legal */
.footer-legal {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
  z-index: 11;
}
.footer-legal a {
  color: inherit;
  text-decoration: none;
  margin: 0 8px;
  cursor: pointer;
}

/* Tip modal — embeds the Ko-fi widget */
.screen.tip-modal {
  padding: 0;
  background: rgba(254,252,248,0.97);
}
.screen.tip-modal .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--p100);
  color: var(--p400);
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  font-family: inherit;
}
.screen.tip-modal .close:active { transform: scale(0.9); }
.screen.tip-modal iframe {
  width: 100%;
  max-width: 380px;
  height: 100%;
  max-height: 712px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}

/* When the on-screen keyboard is open we (1) cap the body height via
   max-height as a failsafe (iOS Safari sometimes lies about
   visualViewport.height), and (2) shrink children so timer + kana +
   input all fit in the remaining ~50-60% of the viewport. */
body.kbd-open { max-height: 65vh; }
body.kbd-open header { padding: max(8px, env(safe-area-inset-top)) 16px 4px; }
body.kbd-open main { padding: 4px 20px; }
body.kbd-open .kana { font-size: 90px; }
body.kbd-open .score { font-size: 13px; margin-top: 4px; }
body.kbd-open .input-row { padding: 0 16px 8px; }
body.kbd-open .footer-legal { display: none; }
@media (min-width: 600px) {
  body.kbd-open { max-height: none; }
}

/* Mastery screen */
.screen.mastery-screen {
  justify-content: flex-start;
  padding: 40px 16px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.mastery-screen .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--p100);
  color: var(--p400);
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.screen.mastery-screen .close:active { transform: scale(0.9); }
.mastery-summary {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 2px 0 8px;
}
.mastery-legend {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mastery-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mastery-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.mastery-legend .dot.mastered   { background: var(--good); }
.mastery-legend .dot.learning   { background: var(--p400); }
.mastery-legend .dot.struggling { background: var(--bad); }
.mastery-legend .dot.unseen     { background: var(--border); }
.mastery-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mastery-grid-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  width: 100%;
  max-width: 300px;
}
.mastery-section {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 8px 0 0;
}
.mastery-section:first-child { margin-top: 0; }
.mastery-cell {
  aspect-ratio: 1 / 0.85;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.mastery-cell.empty { background: transparent; }
.mastery-cell.unseen { background: var(--bg-2); }
.mastery-cell.struggling { background: rgba(224,52,92,0.14); }
.mastery-cell.learning { background: var(--p100); }
.mastery-cell.mastered { background: rgba(212,160,64,0.18); }
.mc-kana { font-size: clamp(18px, 5.5vw, 24px); line-height: 1; }
.mc-roma { font-size: 9px; color: var(--muted); letter-spacing: 0.2px; }
.mastery-cell.mastered .mc-kana { color: var(--good); }
.mastery-cell.struggling .mc-kana { color: var(--bad); }
.mastery-cell.learning .mc-kana { color: var(--p400); }

/* Pitch lines on the start screen */
.pitch {
  list-style: none;
  padding: 0;
  margin: 14px 0 6px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.2px;
}
.pitch li { display: block; }
.pitch li + li { color: var(--muted); opacity: 0.8; }
.pitch li:last-child { color: var(--p400); font-weight: 600; opacity: 1; }

/* Guide links — surfaced under the start-screen buttons */
.guide-links {
  margin-top: 22px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.guide-links a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--p400);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.guide-links a:hover {
  background: var(--p100);
  border-color: var(--p200);
  color: var(--p400);
}
.guide-links a:active { transform: scale(0.97); }

/* Settings */
.gear {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  z-index: 5;
}
.gear:hover {
  color: var(--p400);
  background: var(--p100);
  border-color: var(--p200);
}
.gear:active { transform: scale(0.9); }

.screen.settings-screen {
  justify-content: flex-start;
  padding: 40px 20px 24px;
}
.screen.settings-screen .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--p100);
  color: var(--p400);
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.settings-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 4px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-list li.sep {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.settings-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.settings-list label:active { background: var(--bg-2); }
.settings-list input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--p200);
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.settings-list input[type="checkbox"]:checked {
  background: var(--p400);
  border-color: var(--p400);
}
.settings-list input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.settings-list .lbl { font-size: 14px; color: var(--fg); }
.settings-list .lbl small { color: var(--muted); margin-left: 4px; font-size: 12px; }

/* Hide initially-hidden screens before JS boots (FOUC guard) */
[hidden] { display: none !important; }

/* Respect motion preferences — gate the timer-jolt, nope, burst, ghost
   keyframes so users who opted out get a still UI. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}