:root {
  --ink: #1F2A24;
  --muted: #5F6B64;
  --faint: #8A948E;
  --line: #E5E7E3;
  --line-strong: #D5D9D3;
  --soft: #F3F4F2;
  --bg: #FFFFFF;
  --green: #17873A;
  --green-edge: #0E6A2B;
  --green-bright: #3DBE5A;
  --green-tint: #EAF8EE;
  --green-sheet: #D7F5DE;
  --red: #D63A3F;
  --red-edge: #A82328;
  --red-tint: #FFE9E9;
  --red-sheet: #FFE1E1;
  --blue: #1C6FD1;
  --blue-edge: #1559A8;
  --blue-tint: #E6F1FF;
  --purple: #7A45E0;
  --purple-edge: #5F32B8;
  --purple-tint: #F1EAFF;
  --orange: #C25A00;
  --orange-edge: #9A4700;
  --orange-tint: #FFF1DE;
  --pink: #D6336C;
  --pink-edge: #A61E4D;
  --pink-tint: #FFE6EF;
  --display: 'Fredoka', 'M PLUS Rounded 1c', system-ui, sans-serif;
  --body: 'M PLUS Rounded 1c', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none; /* no pull-to-refresh: feels like an app */
}
button { font-family: inherit; color: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
h1, h2 { margin: 0; }
[hidden] { display: none !important; }

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
.screen { display: none; min-height: 100vh; min-height: 100dvh; padding: calc(20px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); flex-direction: column; gap: 22px; position: relative; overflow-x: hidden; }
.screen.active { display: flex; }

.muted { color: var(--muted); font-size: 14px; font-weight: 500; }
.center { text-align: center; }

/* ---------- motion ---------- */
.press { transition: transform 90ms ease, background 150ms, border-color 150ms; }
.press:active:not(:disabled) { transform: translateY(3px); }
@keyframes pop { 0% { transform: scale(.3); opacity: 0 } 65% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1) } }
@keyframes rise { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-5px) rotate(2deg) } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@keyframes hop { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(-10px) } }
@keyframes shake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-8px) } 40% { transform: translateX(8px) } 60% { transform: translateX(-5px) } 80% { transform: translateX(5px) } }
@keyframes sheet { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes flicker { 0%, 100% { opacity: .7 } 50% { opacity: 1 } }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-4deg) } 50% { transform: scale(1.12) rotate(4deg) } }
@keyframes fall { 0% { transform: translateY(-40px) rotate(0); opacity: 1 } 100% { transform: translateY(560px) rotate(540deg); opacity: 0 } }
@keyframes glow { 0% { background: var(--green); color: #fff } 100% { background: #DDF5E3; color: var(--green-edge) } }
@keyframes matched { 0% { transform: scale(1) } 40% { transform: scale(1.08) } 100% { transform: scale(1) } }
.pop { animation: pop 280ms cubic-bezier(.3, 1.4, .5, 1) both; }
.rise { animation: rise 300ms ease-out both; }
.shake { animation: shake 360ms ease-in-out; }
.hop { animation: hop 380ms ease-out; }
.flicker { animation: flicker 1.8s ease-in-out infinite; }
.flame { animation: flame 900ms ease-in-out infinite; }

/* ---------- top bars ---------- */
.topbar { display: flex; align-items: center; gap: 10px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--green); display: flex; align-items: center; gap: 8px; }
.brand-pill { font-family: var(--body); font-weight: 800; font-size: 13px; color: var(--green-edge); background: #DDF5E3; border-radius: 8px; padding: 2px 8px; }
.icon-btn { margin-left: auto; width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.icon-btn-plain { flex: none; width: 44px; height: 44px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--faint); cursor: pointer; padding: 0; }
.link-btn { min-height: 44px; padding: 0 4px; background: none; border: none; font-weight: 800; font-size: 14px; color: var(--green); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.muted-link { color: var(--muted); }

/* ---------- lantern + bubble ---------- */
.hello { display: flex; align-items: center; gap: 10px; }
.lantern-slot { flex: none; display: block; width: 84px; height: 84px; }
.lantern-slot svg { width: 100%; height: 100%; overflow: visible; }
.lantern-slot.idle svg { animation: bob 2.6s ease-in-out infinite; transform-origin: 50% 0; }
.bubble { flex: 1; border: 2px solid var(--line); border-radius: 18px; padding: 10px 14px; display: flex; flex-direction: column; }
.bubble strong { font-weight: 800; font-size: 18px; }
/* The move to nihongo.thedev050.com (app.js movingNotice): shown only on the old address, or once just after arriving. */
.moving { border: 2px solid var(--green-bright); background: var(--green-tint); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.moving strong { font-weight: 800; font-size: 18px; color: var(--green-edge); }
.moving span { color: var(--ink); line-height: 1.4; }
.moving .btn { margin-top: 6px; }
.bubble span { font-size: 14px; color: var(--muted); font-weight: 500; }

/* ---------- home ---------- */
.block { display: flex; flex-direction: column; gap: 12px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; }
.block h2 { font-family: var(--display); font-weight: 600; font-size: 22px; }

.levels { display: flex; flex-direction: column; gap: 12px; }
.level { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; cursor: pointer; text-align: left; background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; }
.level[aria-pressed="true"] { background: var(--green-tint); border-color: var(--green); }
.level-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.level-badge { flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--ink); background: var(--soft); border-bottom: 4px solid #E0E3DE; transition: background 150ms; }
.level[aria-pressed="true"] .level-badge { color: #fff; background: var(--green); border-bottom-color: var(--green-edge); }
.level-name { display: flex; flex-direction: column; flex: 1; }
.level-name strong { font-family: var(--display); font-weight: 600; font-size: 20px; }
.check { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: transparent; }
[aria-pressed="true"] > * > .check, [aria-pressed="true"] > .check { border: none; background: var(--green); color: #fff; animation: pop 260ms cubic-bezier(.3, 1.4, .5, 1) both; }
.inside { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.inside-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chiplist { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.level[aria-pressed="true"] .chip { background: #fff; color: var(--green-edge); }

.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 18px; cursor: pointer; text-align: left; min-height: 132px; background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; }
.game[aria-pressed="true"] { background: var(--green-tint); border-color: var(--green); }
.game-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--soft); font-weight: 800; font-size: 24px; }
.game[aria-pressed="true"] .game-icon { color: var(--green); background: #fff; }
.game strong { font-weight: 800; font-size: 15px; }
.game .muted { font-size: 13px; line-height: 1.3; }
.game .check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; }

.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.count { min-height: 52px; border-radius: 16px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 20px; background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; }
.count[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); border-bottom-color: var(--green-edge); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; }
.switch-text { display: flex; flex-direction: column; }
.switch-text strong { font-weight: 800; }
.switch { flex: none; width: 58px; height: 34px; border-radius: 999px; border: none; padding: 4px; cursor: pointer; display: flex; justify-content: flex-start; background: var(--line-strong); transition: background 150ms; }
.switch span { width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: transform 180ms cubic-bezier(.3, 1.4, .5, 1); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"] span { transform: translateX(24px); }

.start-wrap { display: flex; flex-direction: column; gap: 8px; }

/* ---------- buttons ---------- */
.btn { width: 100%; min-height: 56px; border-radius: 18px; border: none; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.btn-primary { background: var(--green); border-bottom: 5px solid var(--green-edge); color: #fff; }
.btn-primary:disabled { background: var(--line); border-bottom-color: var(--line); color: var(--muted); cursor: default; }
.btn-ghost { background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; color: var(--blue); font-size: 17px; min-height: 52px; }
.btn-red { background: var(--red); border-bottom: 5px solid var(--red-edge); color: #fff; }
.bottom-row { display: flex; gap: 10px; margin-top: auto; }
.square-btn { flex: none; width: 58px; min-height: 56px; border-radius: 18px; border: 2px solid var(--line); border-bottom-width: 5px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ---------- review ---------- */
.steps { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.steps span { height: 10px; border-radius: 999px; background: var(--line); transition: background 250ms; }
.steps span.on { background: var(--green-bright); }
.review-card { flex: 1; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 24px; padding: 18px; animation: rise 300ms ease-out both; }
.review-kicker { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.review-card h1 { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.2; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.review-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--soft); animation: rise 300ms ease-out both; }
.review-list .jp { display: flex; flex-direction: column; }
.review-list .jp b { font-weight: 800; font-size: 20px; }
.review-list .jp span, .missed .jp span { font-size: 13px; color: var(--muted); font-weight: 500; }
.review-list .en { font-weight: 700; font-size: 15px; text-align: right; }
.review-list .tag { display: inline-block; padding: 4px 10px; border-radius: 10px; font-weight: 800; animation: pop 260ms cubic-bezier(.3, 1.4, .5, 1) both, glow 700ms ease-out 350ms both; }
.review-list.stack li { flex-direction: column; align-items: flex-start; gap: 4px; }
.review-list.stack .jp b { font-size: 18px; }
.review-list.stack .en { text-align: left; font-weight: 600; color: var(--muted); }

/* today's new word (warm-up page 1) */
.new-word { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--green-tint); border: 2px solid #9FDDB0; border-bottom-width: 5px; animation: pop 320ms cubic-bezier(.3, 1.4, .5, 1) both; }
.new-tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--green); border-radius: 8px; padding: 2px 8px; margin-bottom: 4px; }
.new-word > b { font-weight: 800; font-size: 34px; line-height: 1.2; }
.nw-rom { font-size: 15px; color: var(--muted); font-weight: 500; }
.nw-en { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--green-edge); }
.nw-kanji { font-size: 14px; color: var(--muted); font-weight: 600; }
.nw-kanji b { font-size: 17px; color: var(--ink); }
.nw-src { font-size: 11px; font-weight: 600; color: var(--faint); margin-top: 2px; }

/* this week's concept (warm-up page 2 and the Learnt sheet) */
.concept-intro { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
.concept-sub { font-family: var(--display); font-weight: 600; font-size: 18px; margin-top: 2px; }
.pattern { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--blue-tint); }
.pattern-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.part { padding: 4px 10px; border-radius: 10px; font-weight: 800; font-size: 17px; background: #fff; border: 2px solid var(--blue); color: var(--blue-edge); }
.part.slot { font-size: 14px; font-weight: 700; border-style: dashed; border-color: #8DB5E6; color: var(--muted); }
.part.particle { background: var(--orange-tint); border-color: #FFC37A; color: var(--orange-edge); }
.part.arrow { background: none; border: none; padding: 0 2px; color: var(--muted); }
.pattern-en { font-size: 14px; font-weight: 700; color: var(--blue-edge); }
.concept-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.concept-list li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 14px; background: var(--purple-tint); }
.concept-list b { font-weight: 800; font-size: 19px; }
.concept-list small { font-size: 12px; color: var(--muted); font-weight: 500; }
.concept-list span { font-size: 13px; font-weight: 700; color: var(--purple-edge); }
.verb { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--purple-tint); }
.verb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.verb-head b { font-weight: 800; font-size: 22px; }
.verb-head span { font-size: 14px; font-weight: 700; color: var(--purple-edge); }
.forms { width: 100%; border-collapse: collapse; }
.forms th { text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 8px 6px 0; vertical-align: top; width: 40%; }
.forms td { padding: 6px 0; border-top: 1px solid #E3D8FA; }
.forms tr:first-child td { border-top: none; }
.forms td b { font-weight: 800; font-size: 17px; margin-right: 6px; }
.forms td span { font-size: 13px; color: var(--muted); }
.verb-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--purple-edge); }
.kata-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kata { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 2px; border-radius: 14px; background: var(--pink-tint); border-bottom: 4px solid #F5BFD2; }
.kata b { font-weight: 800; font-size: 30px; line-height: 1; color: var(--pink-edge); }
.kata b.two { font-size: 21px; }
.kata small { font-size: 12px; font-weight: 700; color: var(--muted); }
.concept-note { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--orange-tint); font-size: 14px; font-weight: 600; line-height: 1.45; }
.concept-source { margin: 0; font-size: 12px; font-weight: 600; color: var(--faint); }
.concept-source a { color: var(--muted); }
.sheet-concept { animation: none; }

/* ---------- quiz ---------- */
.quizbar { display: flex; align-items: center; gap: 12px; }
.progress { flex: 1; height: 16px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--green-bright); border-radius: 999px; transition: width 400ms cubic-bezier(.3, 1.3, .5, 1); position: relative; }
.progress span::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.streak { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 700; font-size: 18px; color: #E8590C; min-width: 44px; }
.streak.cold { color: var(--faint); }
.streak.cold .flame { animation: none; filter: grayscale(1); opacity: .5; }
.q-head { display: flex; flex-direction: column; gap: 6px; animation: rise 300ms ease-out both; }
.q-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qc, var(--blue)); }
.q-label i { width: 22px; height: 22px; border-radius: 7px; background: var(--qt, var(--blue-tint)); display: flex; align-items: center; justify-content: center; font-style: normal; }
.q-head h1 { font-family: var(--display); font-weight: 600; font-size: 24px; }
.quiz-area { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.prompt-row { display: flex; align-items: flex-end; gap: 12px; animation: rise 300ms ease-out 60ms both; }
.prompt { flex: 1; border: 2px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prompt b { font-weight: 800; font-size: 34px; line-height: 1.2; overflow-wrap: anywhere; }
.prompt b.latin { font-family: var(--display); font-weight: 600; font-size: 28px; }
.prompt b.long { font-size: 24px; }
.prompt b.latin.long { font-size: 21px; }
.prompt span { font-size: 16px; color: var(--muted); font-weight: 500; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 10px 16px; border-radius: 18px; font-size: 18px; font-weight: 700; cursor: pointer; text-align: left; background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; animation: rise 300ms ease-out both; }
.choice .key { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; border: 2px solid var(--line); color: var(--muted); }
.choice .txt { flex: 1; display: flex; flex-direction: column; }
.choice .txt small { font-size: 13px; font-weight: 500; color: var(--muted); }
.choice[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-edge); }
.choice[aria-pressed="true"] .key { border-color: var(--blue); color: var(--blue-edge); }
.choice.right { background: #E3F7E8; border-color: var(--green); color: var(--green-edge); }
.choice.right .key { border-color: var(--green); color: var(--green-edge); }
.choice.wrong { background: var(--red-tint); border-color: var(--red); color: var(--red-edge); }
.choice.wrong .key { border-color: var(--red); color: var(--red-edge); }
.choice:disabled { cursor: default; }
.choice.dim { opacity: .5; }

.tf-card { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 28px; background: var(--orange-tint); border: 2px solid #FFD9A8; border-bottom-width: 6px; padding: 24px; text-align: center; animation: rise 300ms ease-out both; min-height: 300px; }
.tf-card b { font-weight: 800; font-size: 38px; line-height: 1.2; overflow-wrap: anywhere; }
.tf-card .rom { font-size: 16px; color: var(--muted); font-weight: 500; }
.tf-card .claim { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--orange-edge); }
.tf-card b.long { font-size: 26px; }
.tf-card .claim.long { font-size: 21px; }
.tf-btns { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tf-btns .btn { min-height: 72px; font-size: 22px; text-transform: none; letter-spacing: 0; border-bottom-width: 6px; }
.tf-btns .btn:disabled { opacity: .5; cursor: default; }

.match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.tile { min-height: 64px; border-radius: 18px; padding: 6px 10px; cursor: pointer; font-weight: 800; font-size: 17px; background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; transition: background 120ms, opacity 300ms; overflow-wrap: anywhere; }
.tile.jp { font-size: 21px; }
.tile.sel { background: var(--purple-tint); border-color: var(--purple); color: var(--purple-edge); }
.tile.bad { background: var(--red-tint); border-color: var(--red); color: var(--red-edge); animation: shake 340ms ease-in-out; }
.tile.done { background: #E3F7E8; border-color: #9FDDB0; border-bottom-width: 2px; color: var(--green); opacity: .55; cursor: default; animation: matched 260ms ease-out; }

.check-wrap { margin-top: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; animation: sheet 220ms cubic-bezier(.2, .9, .3, 1.1) both; }
.sheet > * { max-width: 448px; width: 100%; margin: 0 auto; }
.sheet.good { background: var(--green-sheet); color: var(--green-edge); }
.sheet.bad { background: var(--red-sheet); color: var(--red-edge); }
.sheet-row { display: flex; align-items: center; gap: 12px; }
.sheet-badge { flex: none; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #fff; animation: pop 260ms cubic-bezier(.3, 1.4, .5, 1) both; }
.sheet-text { display: flex; flex-direction: column; }
.sheet-text strong { font-family: var(--display); font-weight: 700; font-size: 24px; }
.sheet-text span { font-size: 15px; font-weight: 700; }
.sheet.good .btn { background: var(--green); border-bottom: 5px solid var(--green-edge); color: #fff; }
.sheet.bad .btn { background: var(--red); border-bottom: 5px solid var(--red-edge); color: #fff; }

/* ---------- results ---------- */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: 0; animation: fall 1.6s cubic-bezier(.3, .6, .6, 1) both; }
.results-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 20px; }
.results-head .lantern-slot { width: 120px; height: 120px; }
.results-head .lantern-slot.cheer svg { animation: sway 1.4s ease-in-out infinite; transform-origin: 50% 0; }
.results-head h1 { font-family: var(--display); font-weight: 700; font-size: 32px; color: var(--green); animation-delay: 120ms; }
.results-jp { font-weight: 800; font-size: 20px; animation-delay: 200ms; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { border-radius: 18px; border: 2px solid var(--c); overflow: hidden; display: flex; flex-direction: column; }
.stat span { background: var(--c); color: var(--t); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 4px 0; }
.stat strong { font-family: var(--display); font-weight: 700; font-size: 24px; text-align: center; padding: 10px 0; }
.missed { border: 2px solid var(--line); border-radius: 20px; padding: 14px 16px 4px; animation-delay: 540ms; }
.missed h2 { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.missed ul { list-style: none; margin: 0; padding: 0; }
.missed li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 2px solid var(--soft); }
.missed li:last-child { border-bottom: none; }
.missed .jp { display: flex; flex-direction: column; }
.missed .jp b { font-weight: 800; font-size: 18px; }
.missed .en { font-size: 15px; font-weight: 700; text-align: right; }
.missed.perfect { text-align: center; padding: 18px; font-weight: 700; color: var(--green-edge); background: var(--green-tint); border-color: transparent; }
.results-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- cheat sheets ---------- */
.sheets-title { font-family: var(--display); font-weight: 600; font-size: 24px; }
#screen-sheets { padding-left: 0; padding-right: 0; gap: 16px; }
#screen-sheets .topbar { padding: 0 16px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 15px; white-space: nowrap; background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; }
.chips button[aria-current="true"] { background: var(--blue); color: #fff; border-color: var(--blue); border-bottom-color: var(--blue-edge); }
.sheet-body { padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
.sheet-banner { display: flex; align-items: center; gap: 14px; background: var(--pink-tint); border-radius: 20px; padding: 14px 16px; }
.sheet-banner-char { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--pink); border-bottom: 4px solid var(--pink-edge); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; }
.sheet-banner-text { display: flex; flex-direction: column; }
.sheet-banner-text strong { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--pink-edge); }
.segmented { display: flex; gap: 6px; background: var(--soft); border-radius: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.segmented button { flex: 1 0 auto; min-height: 44px; padding: 0 12px; border-radius: 11px; border: none; background: transparent; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.segmented button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 0 var(--line); font-weight: 800; color: var(--ink); }
.kana-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kana-grid.combo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kana { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 64px; border-radius: 14px; cursor: pointer; border: none; border-bottom: 4px solid rgba(0, 0, 0, .08); }
.kana b { font-weight: 800; font-size: 26px; line-height: 1; }
.kana small { font-size: 12px; font-weight: 700; color: var(--muted); }
.kana[aria-pressed="true"] { background: var(--green) !important; color: #fff; border-bottom-color: var(--green-edge); animation: pop 240ms cubic-bezier(.3, 1.4, .5, 1) both; }
.kana[aria-pressed="true"] small { color: #fff; }
.kana-gap { height: 64px; }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--soft); }
.rows .jp { display: flex; flex-direction: column; min-width: 0; }
.rows .jp b { font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.rows .jp span { font-size: 13px; color: var(--muted); font-weight: 500; }
.rows .en { font-size: 14px; font-weight: 700; text-align: right; max-width: 50%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .confetti { display: none; }
}

#screen-quiz.sheet-open { padding-bottom: 210px; }

/* ---------- streak celebration ---------- */
@keyframes toast { 0% { transform: translate(-50%, -20px) scale(.6); opacity: 0 } 15% { transform: translate(-50%, 0) scale(1.08); opacity: 1 } 25% { transform: translate(-50%, 0) scale(1) } 85% { opacity: 1 } 100% { transform: translate(-50%, -10px); opacity: 0 } }
@keyframes flare { 0% { transform: scale(1) } 30% { transform: scale(1.25) rotate(-6deg); filter: drop-shadow(0 0 12px #FFC94D) } 60% { transform: scale(.95) rotate(4deg) } 100% { transform: scale(1) } }
@keyframes blaze { 0% { transform: scale(1) } 30% { transform: scale(1.6) } 100% { transform: scale(1) } }
.toast { position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; z-index: 20; padding: 10px 18px; border-radius: 999px; background: #FF9F1C; border-bottom: 4px solid #E8590C; color: #4A2600; font-family: var(--display); font-weight: 700; font-size: 18px; white-space: nowrap; pointer-events: none; }
.toast.show { animation: toast 1.6s cubic-bezier(.3, 1.4, .5, 1) both; }
.lantern-slot.flare svg { animation: flare 700ms ease-out; }
.streak.blaze { animation: blaze 500ms cubic-bezier(.3, 1.4, .5, 1); }