/* Mưa Hán Tự v0.6 — claymorphism light theme (DESIGN.md) */
:root {
  /* colour tokens */
  --bg: #FFF8EE;
  --bg-sky-top: #CDEBFF;
  --bg-sky-bottom: #FFF1F7;
  --card: #FFFFFF;
  --ink: #2B2350;
  --ink-soft: #5B5680;
  --primary: #5B4BDB;
  --primary-dark: #4536B8;
  --primary-soft: #E6E1FF;
  --accent: #FF8A3D;
  --accent-soft: #FFE3CF;
  --good: #2FB67C;
  --bad: #E5484D;
  --heart: #FF5E8A;
  --water: #7FD3F7;
  --water-deep: #5CC0EA;
  --water-danger: #FF8C8C;
  --line: #E7DCCB;          /* border ~15% darker than bg */
  --card-line: #E9E4F5;
  --b1: #FFC8DD; --b2: #BDE0FE; --b3: #CDEAC0; --b4: #FFE5A5; --b5: #E2CFFF; --b6: #FFD6BA;
  --f-pinky: #FFD6E7; --f-ring: #FFE8B8; --f-middle: #D7F5D0; --f-lindex: #CDE7FF; --f-rindex: #E5DBFF; --f-thumb: #F0F0F0;
  --locked-key: #D9D4E8;
  --on-primary: #FFFFFF; --on-good: #FFFFFF; --on-bad: #FFFFFF;
  --primary-line: #D2CAFB; --good-dark: #23966A; --accent-dark: #D9661C; --accent-line: #E9772C;
  --heart-dark: #D93A68; --heart-empty: #CDB6C3;
  --dot: #D5CFEA; --tab-bg: #F3ECDF; --track: #F1ECF9; --track-2: #EFE7DA; --selected-bg: #F7F5FF;
  --bad-ink: #B3262B; --bad-soft: #FDECEC; --good-ink: #1D7A52;
  --map-path: #E8DDF9; --locked-line: #BDB5D6; --star-off: #E9E3F3; --star-off-line: #CFC6E4;
  --field-line: #E3EEF8; --scrim: rgba(43,35,80,.3);
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* type */
  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-han: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

  /* spacing / radius / shadow */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-btn: 18px; --r-card: 24px; --r-modal: 28px; --r-chip: 14px;
  --shadow-clay: 0 6px 0 rgba(43,35,80,.12), 0 12px 24px rgba(43,35,80,.10), inset 0 -4px 0 rgba(0,0,0,.06), inset 0 3px 0 rgba(255,255,255,.7);
  --shadow-press: 0 3px 0 rgba(43,35,80,.12), inset 0 -2px 0 rgba(0,0,0,.06), inset 0 3px 0 rgba(255,255,255,.7);

  /* motion */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-tap: 120ms;
  --t-pop: 280ms;
  --t-out: 180ms;

  --kb-h: clamp(220px, 36dvh, 330px);
  --top-h: 52px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
svg.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.han { font-family: var(--font-han); font-weight: 700; }

/* ---------------------------------------------------------------- buttons */
.btn {
  min-height: 52px; min-width: 48px; padding: 0 var(--s5); border-radius: var(--r-btn);
  border: 3px solid var(--card-line); background: var(--card); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  box-shadow: var(--shadow-clay); transition: transform var(--t-tap) ease-out, box-shadow var(--t-tap) ease-out;
}
.btn:active, .btn.pressed { transform: translateY(3px); box-shadow: var(--shadow-press); }
.btn-primary { background: var(--primary); border-color: var(--primary-dark); color: var(--on-primary); }
.btn-good { background: var(--good); border-color: var(--good-dark); color: var(--on-good); }
.btn-soft { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-dark); }
.btn-block { width: 100%; }
.icon-btn {
  width: 48px; height: 48px; border-radius: var(--r-chip); border: 3px solid var(--card-line); background: var(--card);
  display: inline-grid; place-items: center; color: var(--ink); box-shadow: var(--shadow-clay); flex: none;
  transition: transform var(--t-tap) ease-out, box-shadow var(--t-tap) ease-out;
}
.icon-btn:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.icon-btn.on { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-dark); }

/* ---------------------------------------------------------------- screens */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.page { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.appbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 72px; }
.appbar h1, .appbar h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.appbar p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.appbar .grow { flex: 1; min-width: 0; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.screen.enter .page { animation: pop-in var(--t-pop) var(--ease-pop); }

/* ---------------------------------------------------------------- mascot */
.mascot { display: block; overflow: visible; }
.mascot .m-wing-l { transform-origin: 32px 74px; }
.mascot .m-wing-r { transform-origin: 88px 74px; }
.mascot .m-eyes-happy, .mascot .m-eyes-sad, .mascot .m-mouth-o, .mascot .m-tear { display: none; }
.mascot.happy .m-eyes-open { display: none; }
.mascot.happy .m-eyes-happy { display: inline; }
.mascot.oops .m-mouth-o { display: inline; }
.mascot.oops .m-beak { display: none; }
.mascot.sad .m-eyes-open { display: none; }
.mascot.sad .m-eyes-sad, .mascot.sad .m-tear { display: inline; }
.mascot.wave .m-wing-r { animation: wave 0.9s ease-in-out infinite; }
.mascot.jump .m-all { animation: jump 0.7s var(--ease-pop) infinite; transform-origin: 60px 110px; }
.mascot.bob .m-all { animation: bob 2.4s ease-in-out infinite; transform-origin: 60px 110px; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-35deg); } }
@keyframes jump { 0%, 100% { transform: translateY(0) scaleY(1); } 40% { transform: translateY(-14px) scaleY(1.04); } 80% { transform: translateY(0) scaleY(.94); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------------------------------------------------------------- welcome / onboarding */
.welcome { background: linear-gradient(180deg, var(--bg-sky-top), var(--bg-sky-bottom) 70%, var(--bg)); }
.welcome .hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s5) var(--s4) 0; }
.welcome .hero h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.05; margin: var(--s2) 0 0; }
.welcome .hero p { margin: var(--s1) 0 0; color: var(--ink-soft); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s4); padding: var(--s4); scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 calc(100% - 8px); scroll-snap-align: center; background: var(--card); border-radius: var(--r-card);
  border: 3px solid var(--card-line); box-shadow: var(--shadow-clay); padding: var(--s4); text-align: center;
}
.slide svg { width: 100%; height: 120px; }
.slide h3 { font-family: var(--font-display); font-size: 24px; margin: var(--s2) 0 var(--s1); }
.slide p { margin: 0; color: var(--ink-soft); }
.dots { display: flex; justify-content: center; gap: var(--s2); }
.dots button { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.dots button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); transition: transform var(--t-tap); }
.dots button[aria-current="true"]::after { background: var(--primary); transform: scale(1.3); }
.welcome .actions { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4) var(--s5); }

/* ---------------------------------------------------------------- decks */
.tabs { display: flex; gap: var(--s2); margin: 0 var(--s4) var(--s3); background: var(--tab-bg); border-radius: var(--r-btn); padding: var(--s1); border: 3px solid var(--line); }
.tab { flex: 1; min-height: 48px; border: 0; background: transparent; border-radius: var(--r-chip); font-weight: 800; color: var(--ink-soft); font-family: var(--font-display); font-size: 17px; }
.tab[aria-selected="true"] { background: var(--card); color: var(--primary-dark); box-shadow: var(--shadow-clay); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s4); padding: var(--s2) var(--s4) 140px; }
.deck-card {
  position: relative; display: flex; align-items: center; gap: var(--s4); text-align: left; width: 100%;
  background: var(--card); border: 3px solid var(--card-line); border-radius: var(--r-card); padding: var(--s4);
  box-shadow: var(--shadow-clay); min-height: 104px; transition: transform var(--t-tap) ease-out, box-shadow var(--t-tap);
}
.deck-card:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.deck-card .glyph {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; flex: none;
  font-family: var(--font-han); font-weight: 700; font-size: 34px; color: var(--ink); border: 3px solid rgba(43,35,80,.08);
}
.deck-card .meta { flex: 1; min-width: 0; }
.deck-card .name { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; }
.deck-card .count { color: var(--ink-soft); font-size: 15px; }
.deck-card .prog { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1); font-weight: 800; font-size: 15px; }
.deck-card .prog .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.deck-card .prog .bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.deck-card .star-ic { width: 18px; height: 18px; fill: var(--accent); stroke: var(--accent-dark); stroke-width: 1.5; }
.deck-card[aria-selected="true"] { border-color: var(--primary); background: var(--selected-bg); }
.deck-card .check { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: none; place-items: center; border: 3px solid var(--card); }
.deck-card[aria-selected="true"] .check { display: grid; }
.deck-card .edit { margin-left: auto; }
.deck-card.add { justify-content: center; border-style: dashed; background: transparent; box-shadow: none; color: var(--primary-dark); font-weight: 800; font-family: var(--font-display); font-size: 18px; }
.empty-note { color: var(--ink-soft); text-align: center; padding: var(--s3); grid-column: 1 / -1; }

.select-bar {
  position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: calc(100% - 2 * var(--s4)); max-width: 728px; background: var(--card); border: 3px solid var(--card-line);
  border-radius: var(--r-card); box-shadow: var(--shadow-clay); padding: var(--s3) var(--s3) var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3); animation: pop-in var(--t-pop) var(--ease-pop);
}
.select-bar .info { flex: 1; min-width: 0; }
.select-bar b { display: block; font-family: var(--font-display); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-bar small { color: var(--ink-soft); font-size: 15px; }

/* ---------------------------------------------------------------- editor */
.editor { display: flex; flex-direction: column; gap: var(--s2); padding: 0 var(--s4) var(--s5); }
.editor label { font-weight: 800; font-size: 16px; }
.editor input, .editor textarea {
  width: 100%; border: 3px solid var(--line); background: var(--card); border-radius: var(--r-chip); padding: var(--s3);
  font-size: 16px; color: var(--ink);
}
.editor textarea { min-height: 220px; font-family: var(--font-han), var(--font-body); line-height: 1.6; resize: vertical; }
.editor .help { color: var(--ink-soft); font-size: 15px; }
.editor .errors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.editor .errors li { color: var(--bad-ink); background: var(--bad-soft); border-radius: var(--r-chip); padding: var(--s2) var(--s3); font-size: 15px; display: flex; gap: var(--s2); align-items: center; }
.editor .ok-note { color: var(--good-ink); font-weight: 700; font-size: 15px; }
.editor .row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.editor .row .btn { flex: 1; }

/* ---------------------------------------------------------------- stage map */
.map-wrap { position: relative; padding: var(--s4) 0 140px; }
.map-path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.map-path path { fill: none; stroke: var(--map-path); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 22; }
.map-node { position: relative; height: 132px; }
.node-btn {
  position: absolute; top: 8px; transform: translateX(-50%); width: 76px; height: 76px; border-radius: 50%;
  border: 4px solid var(--primary-dark); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-clay);
  font-family: var(--font-display); font-weight: 800; font-size: 30px; display: grid; place-items: center;
  transition: transform var(--t-tap) ease-out;
  animation: pop-in var(--t-pop) var(--ease-pop) both;
}
.node-btn:active { transform: translateX(-50%) translateY(3px); }
.node-btn.done { background: var(--good); border-color: var(--good-dark); color: var(--on-good); }
.node-btn.locked { background: var(--locked-key); border-color: var(--locked-line); color: var(--ink-soft); }
.node-btn.current::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: .4; } }
.node-label { position: absolute; top: 92px; transform: translateX(-50%); text-align: center; width: 150px; }
.node-label .stars { display: flex; justify-content: center; gap: 2px; }
.node-label .stars svg { width: 20px; height: 20px; }
.node-label .gname { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-label .best { color: var(--ink-soft); font-size: 14px; }
.map-mascot { position: absolute; width: 64px; height: 64px; transform: translate(-50%, 0); pointer-events: none; }
svg.star-s { fill: var(--star-off); stroke: var(--star-off-line); stroke-width: 1.5; }
svg.star-s.on { fill: var(--accent); stroke: var(--accent-dark); }
.map-bottom { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); width: calc(100% - 2 * var(--s4)); max-width: 728px; }

/* ---------------------------------------------------------------- game layout */
.game { background: var(--bg); overflow: hidden; }
.game .page { max-width: 760px; }
.g-top { height: var(--top-h); display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3) 0; }
.g-title { flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-title span { color: var(--ink-soft); font-weight: 700; }
.hud { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3) 0; min-height: 44px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: var(--r-chip);
  background: var(--card); border: 2px solid var(--card-line); font-weight: 800; font-size: 16px; white-space: nowrap;
}
.chip svg { width: 18px; height: 18px; }
.chip.score { font-family: var(--font-display); font-size: 24px; height: 38px; }
.chip.score svg { fill: var(--accent); stroke: var(--accent-dark); stroke-width: 1.5; width: 22px; height: 22px; }
.chip.combo { background: var(--accent); border-color: var(--accent-line); color: var(--ink); }
.chip.combo.zero { background: var(--card); border-color: var(--card-line); color: var(--ink-soft); }
.chip.combo.bump { animation: bump 220ms var(--ease-pop); }
@keyframes bump { 50% { transform: scale(1.18); } }
.lives { margin-left: auto; display: flex; align-items: center; gap: 2px; font-weight: 800; }
.lives .heart { width: 26px; height: 26px; position: relative; }
.lives .heart svg { width: 26px; height: 26px; position: absolute; inset: 0; }
.lives .heart .full { fill: var(--heart); stroke: var(--heart-dark); stroke-width: 1.6; }
.lives .heart .empty { fill: none; stroke: var(--heart-empty); stroke-width: 2; stroke-dasharray: 3 3; }
.lives .heart.lost .full { display: none; }
.lives .heart:not(.lost) .empty { display: none; }
.lives .heart.breaking .full { display: block; animation: break-heart 600ms ease-in forwards; }
@keyframes break-heart { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.3) rotate(-8deg); } 100% { transform: translateY(14px) rotate(25deg) scale(.6); opacity: 0; } }
.lives .num { margin-left: 4px; font-size: 16px; }
.goal { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3) var(--s2); }
.goal .chip { height: 30px; }
.hud .chip { flex: none; }
.hud .chip.wpm { min-width: 0; overflow: hidden; }
#in-of { font-size: 32px; }
.node-label { background: var(--bg); border-radius: var(--r-chip); padding: 2px 6px; }
.modal .actions .btn { padding: 0 var(--s3); font-size: 17px; white-space: nowrap; }
.modal .actions .btn svg.ic { width: 22px; height: 22px; }
.balloon .py .d { background: var(--primary-soft); color: var(--primary-dark); border-radius: 4px; }
.goal .bar { flex: 1; height: 14px; border-radius: 99px; background: var(--track-2); border: 2px solid var(--line); overflow: hidden; }
.goal .bar i { display: block; height: 100%; width: 100%; background: var(--good); transform-origin: left; transform: scaleX(0); transition: transform 300ms ease-out; border-radius: 99px; }
.goal .txt { font-weight: 800; font-size: 16px; min-width: 52px; text-align: right; }

/* play field */
.field {
  position: relative; flex: 1; min-height: 0; margin: 0 var(--s2); border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(180deg, var(--bg-sky-top), var(--bg-sky-bottom));
  border: 3px solid var(--field-line); touch-action: manipulation; isolation: isolate;
}
.field.bump-it { animation: field-bump 180ms ease-out; }
@keyframes field-bump { 50% { transform: scale(1.012); } }
.field .deck-name { position: absolute; left: var(--s3); top: var(--s2); font-weight: 800; font-size: 14px; color: var(--ink-soft); opacity: .85; z-index: 1; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cloud { position: absolute; left: 0; width: 120px; height: 60px; opacity: .9; animation: drift linear infinite; }
.cloud.c1 { top: 8%; animation-duration: 70s; animation-delay: -10s; }
.cloud.c2 { top: 30%; width: 90px; animation-duration: 95s; animation-delay: -60s; opacity: .7; }
.cloud.c3 { top: 52%; width: 140px; animation-duration: 120s; animation-delay: -30s; opacity: .6; }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(800px); } }
.twinkle { position: absolute; width: 12px; height: 12px; animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } }

.words, .fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fx { z-index: 4; }
.balloon { position: absolute; left: 0; top: 0; will-change: transform; display: flex; flex-direction: column; align-items: center; }
.balloon .b-inner { display: flex; flex-direction: column; align-items: center; transition: transform 160ms var(--ease-pop); }
.balloon .b-body {
  position: relative; min-width: 64px; height: 64px; padding: 0 12px; border-radius: 50% / 50%;
  display: grid; place-items: center; border: 3px solid rgba(43,35,80,.14);
  box-shadow: inset -6px -8px 0 rgba(0,0,0,.06), inset 6px 6px 0 rgba(255,255,255,.6), 0 4px 0 rgba(43,35,80,.10);
}
.balloon .b-body::after { /* knot */
  content: ""; position: absolute; bottom: -7px; left: 50%; width: 10px; height: 8px; transform: translateX(-50%);
  background: inherit; border-radius: 3px 3px 6px 6px; border: 2px solid rgba(43,35,80,.14);
}
.balloon .hz { font-family: var(--font-han); font-weight: 700; font-size: 38px; line-height: 1; color: var(--ink); white-space: nowrap; letter-spacing: -1px; }
.balloon .hz.long { font-size: 34px; letter-spacing: -3px; }
.balloon .py {
  margin-top: 8px; background: rgba(255,255,255,.92); border-radius: 10px; padding: 0 6px; font-weight: 800; font-size: 16px;
  letter-spacing: .02em; color: var(--ink); white-space: nowrap; line-height: 1.4; border: 2px solid rgba(43,35,80,.08);
}
.balloon .py .d { color: var(--primary); }
.balloon .py .c { position: relative; }
.balloon .py .c::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--accent); animation: caret 0.8s steps(2) infinite; }
.balloon .py .c.blank { display: inline-block; width: 9px; }
@keyframes caret { 50% { opacity: 0; } }
.field.no-pinyin .balloon:not(.locked) .py { visibility: hidden; }
.balloon .heart-badge { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; }
.balloon .heart-badge path { fill: var(--heart); stroke: var(--card); stroke-width: 2; }
.balloon.locked .b-inner { transform: scale(1.15); }
.balloon.locked .b-body { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 18px 6px rgba(91,75,219,.45), inset -6px -8px 0 rgba(0,0,0,.06), inset 6px 6px 0 rgba(255,255,255,.6); }
.balloon.locked { z-index: 3; }
.balloon .wrong-mark { position: absolute; left: -12px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--bad); color: var(--on-bad); display: grid; place-items: center; opacity: 0; }
.balloon .wrong-mark svg { width: 14px; height: 14px; stroke-width: 3.5; }
.balloon.wrong .wrong-mark { animation: fade-mark 600ms ease-out; }
@keyframes fade-mark { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.balloon.wrong .b-body { animation: shake 300ms ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.field.compact .balloon .b-inner { transform: scale(.85); }
.field.compact .balloon.locked .b-inner { transform: scale(.98); }

/* water + mascot */
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; pointer-events: none; }
.water .wave {
  position: absolute; left: -40px; right: -40px; bottom: 0; height: 56px;
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='56'%3E%3Cpath d='M0 14 Q10 5 20 14 T40 14 V56 H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave-mask) repeat-x 0 0 / 40px 56px; mask: var(--wave-mask) repeat-x 0 0 / 40px 56px;
}
.water .w1 { background: var(--water); animation: wave-x 6s linear infinite; }
.water .w2 { background: var(--water-deep); animation: wave-x 9s linear infinite reverse; opacity: .55; bottom: -8px; }
@keyframes wave-x { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.water .danger { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms; }
.water .danger .wave { background: var(--water-danger); animation: wave-x 6s linear infinite; }
.water .danger.blink .wave { animation: wave-x 6s linear infinite, blink 0.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
.danger-flag { position: absolute; right: var(--s3); bottom: 62px; z-index: 3; background: var(--bad); color: var(--on-bad); font-weight: 800; font-size: 14px; border-radius: 99px; padding: 2px 10px; display: none; align-items: center; gap: 4px; }
.danger-flag.on { display: inline-flex; }
.mascot-spot { position: absolute; left: 50%; bottom: 8px; width: 72px; height: 72px; transform: translateX(-50%); z-index: 4; pointer-events: none; }
.mascot-spot .mascot { width: 72px; height: 72px; transition: transform 160ms ease-out; transform-origin: 50% 85%; }

/* fx pieces */
.fx-piece { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.fx-star { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.fx-star path { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; }
.fx-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 4px solid var(--primary); }
.fx-conf { width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 3px; }
.fx-drop { width: 10px; height: 12px; margin: -6px 0 0 -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--water-deep); }
.fx-score { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--accent); -webkit-text-stroke: 1px var(--card); text-shadow: 0 2px 0 var(--card), 0 3px 6px rgba(43,35,80,.25); transform: translate(-50%, -50%); white-space: nowrap; }
.reveal {
  position: absolute; left: 0; top: 0; z-index: 5; background: var(--card); border: 3px solid var(--card-line); border-radius: 18px;
  box-shadow: var(--shadow-clay); padding: 6px 12px; text-align: center; pointer-events: none; max-width: 70%;
}
.reveal b { font-family: var(--font-han); font-size: 26px; }
.reveal .rp { font-weight: 800; color: var(--primary-dark); font-size: 16px; }
.reveal .rm { font-size: 16px; }

.flash { position: absolute; inset: 0; pointer-events: none; z-index: 6; border-radius: inherit; box-shadow: inset 0 0 0 6px rgba(229,72,77,.55), inset 0 0 40px rgba(229,72,77,.35); opacity: 0; }
.flash.go { animation: flash 300ms ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.shake-screen { animation: screen-shake 350ms ease-out; }
@keyframes screen-shake { 0% { transform: translate(0); } 15% { transform: translate(-7px, 3px); } 30% { transform: translate(7px, -3px); } 45% { transform: translate(-5px, 2px); } 60% { transform: translate(4px, -1px); } 80% { transform: translate(-2px, 0); } 100% { transform: translate(0); } }

.banner {
  position: absolute; left: 50%; top: 34%; z-index: 7; transform: translate(-50%, -50%);
  background: var(--card); border: 3px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--shadow-clay);
  padding: var(--s3) var(--s5); text-align: center; animation: pop-in-c var(--t-pop) var(--ease-pop); min-width: 220px;
}
.banner .bn { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--primary-dark); line-height: 1.1; }
.banner .bg { font-size: 20px; font-weight: 800; }
.combo-badge {
  position: absolute; left: 50%; top: 40%; z-index: 7; transform: translate(-50%, -50%); pointer-events: none;
  background: var(--accent); color: var(--ink); border: 4px solid var(--card); border-radius: 28px; box-shadow: var(--shadow-clay);
  padding: var(--s2) var(--s5); text-align: center; opacity: 0;
}
.combo-badge.show { animation: badge 1200ms var(--ease-pop) forwards; }
.combo-badge b { display: block; font-family: var(--font-display); font-size: 44px; line-height: 1; }
.combo-badge span { font-weight: 800; font-size: 18px; }
@keyframes badge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.9); } }
.coach { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 7; background: var(--card); border: 3px solid var(--primary); border-radius: 18px; padding: 6px 16px; font-weight: 800; font-size: 18px; box-shadow: var(--shadow-clay); white-space: nowrap; }
.coach b { color: var(--primary-dark); font-size: 24px; }
.coach::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; background: var(--card); border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary); transform: translateX(-50%) rotate(45deg); }

/* on-screen keyboard */
.kb { height: var(--kb-h); flex: none; padding: var(--s2) 2px calc(var(--s2) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.kb-tools { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--s2); height: 44px; flex: none; }
.kb-tools .linkish { min-height: 44px; border: 0; background: transparent; color: var(--primary-dark); font-weight: 800; font-size: 15px; padding: 0 var(--s2); border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; }
.kb-tools .linkish svg { width: 20px; height: 20px; }
.kb-row { flex: 1; display: flex; gap: 4px; justify-content: center; min-height: 44px; }
.key {
  flex: 1 1 0; max-width: 64px; min-width: 0; border-radius: var(--r-chip); border: 2px solid rgba(43,35,80,.12);
  font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); text-transform: lowercase;
  box-shadow: 0 4px 0 rgba(43,35,80,.16), inset 0 2px 0 rgba(255,255,255,.7); position: relative; padding: 0;
  transition: transform var(--t-tap) ease-out, box-shadow var(--t-tap) ease-out, filter var(--t-tap);
}
.key[data-f="pinky"] { --fc: var(--f-pinky); background: var(--fc); }
.key[data-f="ring"] { --fc: var(--f-ring); background: var(--fc); }
.key[data-f="middle"] { --fc: var(--f-middle); background: var(--fc); }
.key[data-f="lindex"] { --fc: var(--f-lindex); background: var(--fc); }
.key[data-f="rindex"] { --fc: var(--f-rindex); background: var(--fc); }
.key[data-f="thumb"] { --fc: var(--f-thumb); background: var(--fc); }
.key.bump-key::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 14px; height: 3px; border-radius: 2px; background: var(--ink); opacity: .55; transform: translateX(-50%); }
.key.wide { flex: 1.6 1 0; max-width: 96px; display: grid; place-items: center; }
.key.lit { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43,35,80,.16); filter: brightness(1.08) saturate(1.3); }
.key.hint { outline: 4px solid var(--primary); outline-offset: -1px; animation: hint-glow 900ms ease-in-out infinite; z-index: 1; }
@keyframes hint-glow { 0%, 100% { box-shadow: 0 4px 0 rgba(43,35,80,.16), 0 0 0 0 rgba(91,75,219,.55); } 50% { box-shadow: 0 4px 0 rgba(43,35,80,.16), 0 0 0 7px rgba(91,75,219,.18); } }

/* overlays & modals */
.overlay {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: var(--s4);
  background: var(--scrim); backdrop-filter: blur(2px);
}
.overlay.closing { animation: fade-out var(--t-out) ease-in forwards; }
.modal {
  width: min(100%, 440px); max-height: calc(100% - 16px); overflow-y: auto; background: var(--card); border-radius: var(--r-modal);
  border: 3px solid var(--card-line); box-shadow: var(--shadow-clay); padding: var(--s5) var(--s4) var(--s4); text-align: center;
  animation: pop-in var(--t-pop) var(--ease-pop);
}
.modal h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.1; margin: var(--s2) 0 var(--s1); }
.modal p { margin: 0 0 var(--s2); color: var(--ink-soft); }
.modal .mascot { width: 96px; height: 96px; margin: -8px auto 0; }
.modal .actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.modal .actions .wide { grid-column: 1 / -1; }
.modal .actions.one { grid-template-columns: 1fr; }
.stage-num { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--primary-dark); }
.stage-of { color: var(--ink-soft); font-weight: 800; }
.samples { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.sample { background: var(--b2); border: 3px solid rgba(43,35,80,.1); border-radius: 50%; min-width: 64px; height: 64px; padding: 0 8px; display: grid; place-items: center; font-family: var(--font-han); font-weight: 700; font-size: 28px; animation: pop-in var(--t-pop) var(--ease-pop) both; }
.facts { display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; }
.fact { background: var(--bg); border-radius: var(--r-chip); padding: var(--s2) var(--s3); font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.fact svg { width: 20px; height: 20px; }
.fact .hf { fill: var(--heart); stroke: none; }
.keys-tip { margin-top: var(--s2); color: var(--ink-soft); font-size: 15px; }
kbd { font-family: var(--font-body); background: var(--primary-soft); color: var(--primary-dark); border-radius: 8px; padding: 0 8px; font-weight: 800; border-bottom: 3px solid var(--primary-line); }
.big-stars { display: flex; justify-content: center; gap: var(--s2); margin: var(--s2) 0; }
.big-stars svg { width: 64px; height: 64px; opacity: 0; }
.big-stars svg.in { animation: star-in 420ms var(--ease-pop) forwards; }
.big-stars svg:nth-child(2) { transform: translateY(-12px); }
@keyframes star-in { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.big-stars svg:nth-child(2).in { animation-name: star-in-mid; }
@keyframes star-in-mid { 0% { opacity: 0; transform: translateY(-12px) scale(.2) rotate(-40deg); } 100% { opacity: 1; transform: translateY(-12px) scale(1) rotate(0); } }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin-top: var(--s2); }
.stat { background: var(--bg); border-radius: var(--r-chip); padding: var(--s2); }
.stat b { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.stat small { color: var(--ink-soft); font-size: 14px; }
.missed-list { list-style: none; margin: var(--s2) 0; padding: 0; text-align: left; }
.missed-list li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 2px dashed var(--card-line); }
.missed-list .mh { font-family: var(--font-han); font-weight: 700; font-size: 32px; grid-row: span 2; }
.missed-list .mp { font-weight: 800; color: var(--primary-dark); }
.pause-tip { color: var(--ink-soft); }

/* bottom sheet */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; background: var(--card); border-radius: var(--r-modal) var(--r-modal) 0 0; border: 3px solid var(--card-line); border-bottom: 0;
  padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-clay); animation: sheet-in var(--t-pop) var(--ease-pop);
  max-height: 86dvh; overflow-y: auto;
}
.sheet.closing { animation: sheet-out var(--t-out) ease-in forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.sheet .grab { width: 48px; height: 5px; border-radius: 3px; background: var(--card-line); margin: 0 auto var(--s3); }
.sheet h2 { margin: 0 0 var(--s3); font-family: var(--font-display); font-size: 24px; }
.sheet-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.sheet-item {
  min-height: 56px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); text-align: left;
  border-radius: var(--r-btn); border: 3px solid var(--card-line); background: var(--bg); font-weight: 800; font-size: 16px; line-height: 1.2;
}
.sheet-item.on { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-dark); }
.sheet-item.danger { color: var(--bad-ink); }
.sheet-item .val { margin-left: auto; font-family: var(--font-display); }
.vol { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--bg); border-radius: var(--r-btn); border: 3px solid var(--card-line); min-height: 56px; }
.vol label { font-weight: 800; }
.vol input { flex: 1; accent-color: var(--primary); height: 32px; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--r-btn); font-weight: 700; max-width: calc(100% - 32px); text-align: center; animation: pop-in var(--t-pop) var(--ease-pop); }

@keyframes pop-in { from { opacity: 0; transform: scale(.85); } }
@keyframes pop-in-c { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 400px) {
  .chip { padding: 0 7px; font-size: 15px; gap: 3px; }
  .chip svg { width: 16px; height: 16px; }
  .chip.score { font-size: 22px; }
  .hud { gap: 5px; padding-left: var(--s2); padding-right: var(--s2); }
  .lives .heart, .lives .heart svg { width: 22px; height: 22px; }
}
@media (max-height: 720px) {
  :root { --kb-h: clamp(200px, 33dvh, 300px); --top-h: 50px; }
  .kb-tools { height: 40px; margin: -2px 0; }
  .hud { min-height: 40px; padding-top: 4px; }
  .goal { padding-top: 4px; padding-bottom: 6px; }
  .modal { padding: var(--s3) var(--s4) var(--s3); }
  .modal .mascot-slot .mascot, #end-mascot .mascot { width: 64px !important; height: 64px !important; }
  .modal h2 { font-size: 26px; margin: var(--s1) 0; }
  .stage-num { font-size: 44px; }
  #in-of { font-size: 24px; }
  .sample { min-width: 48px; height: 48px; font-size: 24px; }
  .samples { margin: var(--s2) 0; }
  .modal .actions { margin-top: var(--s3); gap: var(--s2); }
  .modal .btn { min-height: 48px; }
  .big-stars svg { width: 52px; height: 52px; }
  .stat b { font-size: 20px; }
}
@media (max-width: 370px) {
  .hud .chip.acc svg, .hud .chip.wpm svg { display: none; }
  .lives .num { margin-left: 1px; }
}
.field.compact ~ .x, .compact-hud .chip.wpm { display: none; }
@media (min-width: 768px) {
  .hud { gap: var(--s3); }
  .g-title { font-size: 20px; }
  .modal { padding: var(--s6) var(--s5) var(--s5); }
  .balloon .hz { font-size: 42px; }
  .balloon .b-body { height: 70px; min-width: 70px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
  .twinkle { animation: none; opacity: .5; }
  .shake-screen { animation: none; }
  .field.bump-it { animation: none; }
  .water .w1, .water .w2 { animation: none; }
  .mascot.jump .m-all, .mascot.bob .m-all, .mascot.wave .m-wing-r { animation: none; }
  .node-btn.current::before { animation: none; }
}

/* ================================================================ v0.7 additions (both themes) */
html.theme-fade body, html.theme-fade .screen, html.theme-fade .field, html.theme-fade .modal, html.theme-fade .chip,
html.theme-fade .btn, html.theme-fade .key, html.theme-fade .deck-card, html.theme-fade .sheet {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.glows { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: none; overflow: hidden; }
.glow-spot { position: absolute; width: 220px; height: 220px; border-radius: 50%; opacity: .35; filter: blur(30px); animation: glow-drift 26s ease-in-out infinite alternate; }
.glow-spot.g1 { left: -40px; top: 10%; background: radial-gradient(circle, var(--glow-a), transparent 70%); }
.glow-spot.g2 { right: -60px; top: 45%; background: radial-gradient(circle, var(--glow-b), transparent 70%); animation-duration: 34s; }
.glow-spot.g3 { left: 30%; top: -60px; width: 160px; height: 160px; background: radial-gradient(circle, var(--glow-b), transparent 70%); animation-duration: 40s; }
@keyframes glow-drift { from { transform: translate(0, 0); } to { transform: translate(60px, 40px); } }

/* danger line (P-44): opacity driven by --dz (0..1) set from dangerLevel */
.danger-line { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--dl-gap) + var(--dl-h)); pointer-events: none; z-index: 3; --dz: 0; }
.danger-line .dl-grad { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dl-gap); background: linear-gradient(to top, var(--bad), transparent); opacity: calc(var(--dl-grad-base) + var(--dl-grad-k) * var(--dz)); }
.danger-line .dl-bar { position: absolute; left: 0; right: 0; bottom: var(--dl-gap); height: var(--dl-h); background: var(--bad); box-shadow: var(--danger-glow); opacity: calc(var(--dl-bar-base) + (1 - var(--dl-bar-base)) * var(--dz)); }
.danger-line.pulse .dl-bar, .danger-line.pulse .dl-grad { animation: dl-pulse 0.8s ease-in-out infinite; }
@keyframes dl-pulse { 50% { filter: brightness(1.6); } }
:root { --dl-gap: 40px; --dl-h: 1px; --dl-grad-base: .08; --dl-grad-k: .35; --dl-bar-base: .25; --danger-glow: 0 0 8px 2px rgba(229,72,77,.45); }

.field.hshake { animation: h-shake 200ms linear; }
@keyframes h-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }

/* settings: theme segmented control + toggles */
.seg { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); padding: 6px; border-radius: var(--r-btn); border: 3px solid var(--card-line); background: var(--bg); }
.seg .seg-label { font-weight: 800; padding: 0 var(--s2); flex: none; }
.seg button { flex: 1; min-height: 44px; border-radius: var(--r-chip); border: 0; background: transparent; font-weight: 800; font-size: 16px; color: var(--ink-soft); }
.seg button[aria-checked="true"] { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-press); }
.sheet-item[disabled] { opacity: .45; cursor: not-allowed; }
.theme-suggest { margin: var(--s3) var(--s4) 0; padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--card); border: 3px solid var(--card-line); box-shadow: var(--shadow-clay); text-align: center; }
.theme-suggest p { margin: 0 0 var(--s2); font-weight: 700; color: var(--ink); }
.theme-suggest .row { display: flex; gap: var(--s2); }
.theme-suggest .row .btn { flex: 1; min-height: 48px; font-size: 16px; padding: 0 var(--s2); }

@media (prefers-reduced-motion: reduce) {
  .field.hshake { animation: none; }
  .glow-spot { animation: none; }
  .danger-line.pulse .dl-bar, .danger-line.pulse .dl-grad { animation: none; }
}

/* ================================================================ Neon đêm theme (DESIGN §7) */
html[data-theme="neon"] {
  color-scheme: dark;
  --bg: #070A14;
  --bg-grid: rgba(120,140,255,.06);
  --bg-sky-top: #070A14; --bg-sky-bottom: #0A0820;
  --card: #0F1426;
  --card-line: rgba(140,160,255,.18);
  --line: rgba(140,160,255,.16);
  --ink: #EAF0FF;
  --ink-soft: #9AA6C8;
  --primary: #22D3EE;
  --primary-dark: #0EA5C6;
  --primary-soft: rgba(34,211,238,.12);
  --primary-line: rgba(34,211,238,.45);
  --on-primary: #04131A;
  --accent: #C084FC; --accent-soft: rgba(192,132,252,.15); --accent-dark: #9D5CE6; --accent-line: #A970F0;
  --good: #4ADE80; --good-dark: #22A85A; --on-good: #04130A; --good-ink: #4ADE80;
  --bad: #FF3B5C; --on-bad: #1A0208; --bad-ink: #FF8FA3; --bad-soft: rgba(255,59,92,.12);
  --heart: #FF5FA2; --heart-dark: #FF5FA2; --heart-empty: rgba(255,95,162,.35);
  --water: rgba(34,211,238,.16); --water-deep: rgba(34,211,238,.08); --water-danger: rgba(255,59,92,.35);
  --b1: #111833; --b2: #111833; --b3: #111833; --b4: #111833; --b5: #111833; --b6: #111833;
  --pill-bg: #111833; --pill-line: rgba(160,180,255,.35);
  --word-locked: #FF5FA2; --word-locked-glow: 0 0 16px rgba(255,95,162,.6);
  --typed: #22D3EE; --cursor: #FF5FA2;
  --f-pinky: #FF5FA2; --f-ring: #FBBF24; --f-middle: #4ADE80; --f-lindex: #38BDF8; --f-rindex: #A78BFA; --f-thumb: #64748B;
  --key-bg: #141B33; --key-ink: #C7D2FE;
  --locked-key: #1A2140; --locked-line: rgba(140,160,255,.25);
  --dot: rgba(140,160,255,.3); --tab-bg: #0B1020; --track: #18203A; --track-2: #18203A; --selected-bg: #11203A;
  --map-path: rgba(34,211,238,.35); --star-off: #1A2140; --star-off-line: rgba(140,160,255,.3);
  --field-line: rgba(140,160,255,.18); --scrim: rgba(2,4,10,.6);
  --glow-a: rgba(56,189,248,.55); --glow-b: rgba(168,85,247,.5);
  --shadow-clay: 0 0 0 1px rgba(140,160,255,.10), 0 8px 24px rgba(0,0,0,.45);
  --shadow-press: 0 0 0 1px rgba(140,160,255,.10), 0 2px 8px rgba(0,0,0,.45);
  --dl-gap: 56px; --dl-h: 2px; --dl-grad-base: .25; --dl-grad-k: .5; --dl-bar-base: .55;
  --danger-glow: 0 0 24px 6px rgba(255,59,92,.55);
}
html[data-theme="neon"] body { background-color: var(--bg); }
html[data-theme="neon"] .welcome { background: var(--bg); }
html[data-theme="neon"] .screen, html[data-theme="neon"] .field {
  background-color: var(--bg);
  background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
html[data-theme="neon"] .field { border-color: var(--field-line); }
html[data-theme="neon"] .clouds { display: none; }
html[data-theme="neon"] .glows { display: block; }
html[data-theme="neon"] .btn-primary { box-shadow: 0 0 18px rgba(34,211,238,.55); }
html[data-theme="neon"] .btn { border-width: 2px; }
html[data-theme="neon"] .icon-btn { border-width: 2px; }
html[data-theme="neon"] .modal { border-width: 1.5px; }
/* HUD: dark stat cards with glowing monospace numbers */
html[data-theme="neon"] .chip { background: var(--card); border: 1px solid var(--card-line); }
html[data-theme="neon"] .chip span, html[data-theme="neon"] .goal .txt, html[data-theme="neon"] .lives .num,
html[data-theme="neon"] .stat b, html[data-theme="neon"] .stage-num {
  font-family: var(--font-mono); text-shadow: 0 0 8px rgba(34,211,238,.6);
}
html[data-theme="neon"] .chip.score span { color: var(--primary); }
html[data-theme="neon"] .chip.combo { background: var(--card); border-color: var(--accent); color: var(--accent); }
html[data-theme="neon"] .chip.combo span { text-shadow: 0 0 8px rgba(192,132,252,.7); }
html[data-theme="neon"] .chip.combo.zero { border-color: var(--card-line); color: var(--ink-soft); }
html[data-theme="neon"] .goal .bar { border-width: 1px; }
html[data-theme="neon"] .goal .bar i { box-shadow: 0 0 10px rgba(74,222,128,.7); }
/* word pills instead of balloons */
html[data-theme="neon"] .balloon .b-body {
  background: var(--pill-bg) !important; border-radius: 20px; border: 1.5px solid var(--pill-line);
  box-shadow: 0 0 10px rgba(120,140,255,.18); height: 58px; min-width: 60px;
}
html[data-theme="neon"] .balloon .b-body::after { display: none; }
html[data-theme="neon"] .balloon .hz { color: var(--ink); text-shadow: 0 0 10px rgba(160,180,255,.45); }
html[data-theme="neon"] .balloon .py { background: transparent; border: 0; color: var(--ink-soft); }
html[data-theme="neon"] .balloon.heart .b-body { border-color: rgba(255,95,162,.55); border-style: dashed; box-shadow: none; }
html[data-theme="neon"] .balloon .heart-badge path { stroke: var(--bg); }
html[data-theme="neon"] .balloon.locked .b-body { border: 2.5px solid var(--word-locked); box-shadow: var(--word-locked-glow); }
html[data-theme="neon"] .balloon .py .d { background: transparent; color: var(--typed); text-shadow: 0 0 8px rgba(34,211,238,.8); }
html[data-theme="neon"] .balloon .py .c::after { background: var(--cursor); box-shadow: 0 0 6px var(--cursor); }
html[data-theme="neon"] .water .w1, html[data-theme="neon"] .water .w2 { opacity: .6; }
/* mascot with neon outline */
html[data-theme="neon"] .mascot { filter: drop-shadow(0 0 1.5px #EAF0FF) drop-shadow(0 0 6px rgba(34,211,238,.75)); }
/* keyboard: dark keys, finger colour as border */
html[data-theme="neon"] .key { background: var(--key-bg); color: var(--key-ink); border: 2px solid var(--fc); box-shadow: 0 3px 0 rgba(0,0,0,.5); }
html[data-theme="neon"] .key.bump-key::after { background: var(--key-ink); }
html[data-theme="neon"] .key.lit { filter: none; background: color-mix(in srgb, var(--fc) 30%, var(--key-bg)); box-shadow: 0 0 12px var(--fc); }
html[data-theme="neon"] .key.hint { outline-color: var(--primary); box-shadow: 0 0 14px rgba(34,211,238,.7); animation: hint-glow-neon 900ms ease-in-out infinite; }
@keyframes hint-glow-neon { 50% { box-shadow: 0 0 22px rgba(34,211,238,.95); } }
html[data-theme="neon"] .node-btn { box-shadow: 0 0 16px rgba(34,211,238,.45); }
html[data-theme="neon"] .node-btn.locked { box-shadow: none; }
html[data-theme="neon"] .deck-card .glyph { background: var(--pill-bg) !important; border-color: var(--pill-line); color: var(--ink); }
html[data-theme="neon"] .sample { background: var(--pill-bg) !important; border: 1.5px solid var(--pill-line); }
html[data-theme="neon"] .combo-badge { color: var(--on-primary); box-shadow: 0 0 24px rgba(192,132,252,.7); }
html[data-theme="neon"] .banner { box-shadow: 0 0 24px rgba(34,211,238,.35); }
html[data-theme="neon"] .reveal { box-shadow: 0 0 16px rgba(34,211,238,.3); }
html[data-theme="neon"] .fx-score { -webkit-text-stroke: 0; text-shadow: 0 0 10px rgba(192,132,252,.9); }
html[data-theme="neon"] .flash { box-shadow: inset 0 0 0 3px rgba(255,59,92,.8), inset 0 0 40px rgba(255,59,92,.45); }
html[data-theme="neon"] .node-label { background: transparent; text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); }

/* ================================================================ theme picker (P-42c) */
.picker-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s4) var(--s4) 0; }
.picker-hero h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.1; margin: var(--s2) 0 var(--s1); }
.picker-hero p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 420px; }
.theme-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4); max-width: 640px; margin: 0 auto; }
.theme-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); min-height: 44px; cursor: pointer;
  background: var(--card); border: 3px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--shadow-clay);
  transition: transform var(--t-tap) ease-out, border-color var(--t-tap), box-shadow var(--t-tap);
}
.theme-card:active { transform: translateY(3px); }
.theme-card[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), 0 0 22px var(--primary-soft), var(--shadow-clay); }
.theme-card .tc-prev { width: 100%; height: auto; display: block; border-radius: 12px; }
.theme-card .tc-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; margin-top: var(--s1); }
.theme-card .tc-desc { color: var(--ink-soft); font-size: 15px; line-height: 1.35; }
.theme-card .tc-check { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%; display: none; place-items: center; background: var(--primary); color: var(--on-primary); border: 3px solid var(--card); }
.theme-card[aria-checked="true"] .tc-check { display: grid; }
.theme-card .tc-badge { position: absolute; top: -12px; left: 12px; z-index: 1; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 800; line-height: 24px; background: var(--accent); color: var(--ink); }
.picker-actions { padding: var(--s3) var(--s4) var(--s5); max-width: 640px; width: 100%; margin: 0 auto; }
html[data-theme="neon"] .theme-card[aria-checked="true"] { box-shadow: 0 0 0 1px var(--primary), 0 0 24px rgba(34,211,238,.45); }
@media (max-width: 380px) { .theme-card { padding: var(--s2); } .theme-card .tc-name { font-size: 18px; } .theme-card .tc-desc { font-size: 14px; } }
html[data-theme="neon"] .theme-card .tc-badge { color: var(--on-primary); }

/* ================================================================ P-49 bonus word ("sao chổi") + freeze */
:root { --bonus: #FFB000; --bonus-bg: #FFF1C7; --bonus-glow: rgba(255,176,0,.55); --freeze-tint: rgba(186,230,253,.38); --freeze-ink: #0B6E99; }
html[data-theme="neon"] { --bonus: #FBBF24; --bonus-bg: #1A1608; --bonus-glow: rgba(251,191,36,.65); --freeze-tint: rgba(56,189,248,.16); --freeze-ink: #7DD3FC; }
.bonus-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.bonus-word { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; will-change: transform; }
.bonus-word.dir-l { flex-direction: row-reverse; }
.bw-main { display: flex; flex-direction: column; align-items: center; transition: transform 160ms var(--ease-pop); }
.bw-body {
  position: relative; height: 62px; min-width: 66px; padding: 0 14px; display: grid; place-items: center;
  background: var(--bonus-bg); border: 3px solid var(--bonus); border-radius: 50% / 50%;
  box-shadow: 0 0 0 3px var(--card), 0 0 18px 6px var(--bonus-glow);
}
html[data-theme="neon"] .bw-body { border-radius: 20px; border-width: 2px; box-shadow: 0 0 18px var(--bonus-glow), inset 0 0 12px rgba(251,191,36,.15); }
.bw-body .hz { font-family: var(--font-han); font-weight: 700; font-size: 38px; line-height: 1; color: var(--ink); white-space: nowrap; }
.bw-x3 {
  position: absolute; top: -14px; right: -16px; padding: 0 7px; border-radius: 99px; background: var(--bonus); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 22px; border: 2px solid var(--card);
  animation: x3-blink 0.6s steps(2, jump-none) infinite;
}
html[data-theme="neon"] .bw-x3 { color: #1A1608; border-color: var(--bg); box-shadow: 0 0 10px var(--bonus-glow); }
@keyframes x3-blink { 50% { opacity: .35; transform: scale(.9); } }
.bonus-word .py { margin-top: 8px; background: var(--card); border-radius: 10px; padding: 0 6px; font-weight: 800; font-size: 16px; color: var(--ink); white-space: nowrap; border: 2px solid var(--bonus); }
.bonus-word .py .d { color: var(--primary-dark); background: var(--primary-soft); border-radius: 4px; }
html[data-theme="neon"] .bonus-word .py { background: transparent; border: 0; color: var(--ink-soft); }
html[data-theme="neon"] .bonus-word .py .d { color: var(--typed); background: transparent; text-shadow: 0 0 8px rgba(34,211,238,.8); }
.bonus-word .py .c { position: relative; }
.bonus-word .py .c::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); animation: caret 0.8s steps(2) infinite; }
.bonus-word .py .c.blank { display: inline-block; width: 9px; }
.bonus-word.locked .bw-main { transform: scale(1.15); }
.bonus-word.locked .bw-body { border-color: var(--primary); }
html[data-theme="neon"] .bonus-word.locked .bw-body { border-color: var(--word-locked); box-shadow: var(--word-locked-glow), 0 0 18px var(--bonus-glow); }
.bonus-word.wrong .bw-body { animation: shake 300ms ease-in-out; }
.bw-icon { width: 40px; height: 32px; margin-top: 14px; flex: none; }
.bw-icon svg { width: 100%; height: 100%; }
.bonus-word.dir-l .bw-icon svg { transform: scaleX(-1); }
html[data-theme="neon"] .bw-icon svg path { fill: var(--bonus); filter: drop-shadow(0 0 6px var(--bonus-glow)); }
.bw-icon .bw-wing { transform-origin: 18px 16px; animation: flap 0.25s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleY(-0.6); } }
.bw-trail { width: 72px; height: 10px; margin-top: 26px; border-radius: 99px; flex: none; background: linear-gradient(to right, transparent, var(--bonus-glow)); filter: blur(1px); }
.bonus-word.dir-l .bw-trail { background: linear-gradient(to left, transparent, var(--bonus-glow)); }

.freeze { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--freeze-tint); box-shadow: inset 0 0 0 4px rgba(125,211,252,.55), inset 0 0 50px rgba(125,211,252,.35); animation: freeze-in 220ms ease-out; }
@keyframes freeze-in { from { opacity: 0; } }
.flakes { position: absolute; inset: 0; overflow: hidden; }
.flake { position: absolute; top: -24px; width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; opacity: .85; animation: flake-fall linear infinite; filter: drop-shadow(0 0 3px rgba(125,211,252,.9)); }
@keyframes flake-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(520px) rotate(180deg); } }
.freeze-ring { position: absolute; right: 10px; top: 34px; width: 48px; height: 48px; display: grid; place-items: center; }
.freeze-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.freeze-ring .fr-bg { fill: rgba(255,255,255,.6); stroke: rgba(125,211,252,.35); stroke-width: 4; }
html[data-theme="neon"] .freeze-ring .fr-bg { fill: rgba(7,10,20,.7); }
.freeze-ring .fr-fg { fill: none; stroke: var(--freeze-ink); stroke-width: 4; stroke-linecap: round; }
.freeze-ring span { position: relative; font-family: var(--font-mono); font-weight: 800; font-size: 18px; color: var(--freeze-ink); }
.freeze-label { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--freeze-ink); text-shadow: 0 0 8px rgba(125,211,252,.8); }
@media (prefers-reduced-motion: reduce) { .flake { animation: none; top: 30%; } .bw-x3 { animation: none; } .bw-icon .bw-wing { animation: none; } }
@media (max-width: 400px) { .hud .chip.acc svg, .hud .chip.wpm svg { display: none; } }