/*
  Palette: Moving Intelligence Group brandbook — white / grey / black neutrals, with the
  Echoes-Blue -> MI-Red diagonal gradient as the one signature accent (buttons, progress,
  badges, and a soft wash behind the content so the gradient reads as cheerful rather than
  just corporate). Dark mode is a warm charcoal, not true black — true black plus a red/blue
  brand read as harsh, so it's softened here on purpose. One typeface throughout (Red Hat
  Display, self-hosted below) because that's literally the brand's whole type system: one
  family, five weights, no pairing to invent.
*/
@font-face { font-family:'Red Hat Display'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/RedHatDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family:'Red Hat Display'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/RedHatDisplay-Medium.ttf') format('truetype'); }
@font-face { font-family:'Red Hat Display'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/RedHatDisplay-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Red Hat Display'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/RedHatDisplay-Bold.ttf') format('truetype'); }
@font-face { font-family:'Red Hat Display'; font-weight:900; font-style:normal; font-display:swap; src:url('../fonts/RedHatDisplay-Black.ttf') format('truetype'); }

:root{
  --bg:#FFFFFF;
  --bg-wash-1:#F2F2F2;
  --surface:#FFFFFF;
  --surface-2:#F1F1F1;
  --text:#000000;
  --text-dim:#5B5B5B;
  --border:rgba(0,0,0,.13);
  --brand:#009FE3;
  --brand-2:#0577A6;
  --brand-contrast:#FFFFFF;
  --accent:#FF0000;
  --accent-2:#FF5B5B;
  --accent-deep:#B30000;
  --accent-contrast:#FFFFFF;
  --sky:#4FC3F7;
  --sky-2:#8FD9FA;
  --good:#1FA97C;
  --warn:#E3A008;
  --bad:#FF0000;
  --gradient-brand:linear-gradient(135deg,#009FE3,#FF0000);
  --shadow-card:0 1px 2px rgba(0,0,0,.06), 0 12px 26px -16px rgba(0,0,0,.22);
  --shadow-pop:0 8px 20px -6px rgba(255,0,0,.35);
  --font-display:'Red Hat Display',system-ui,sans-serif;
  --font-body:'Red Hat Display',system-ui,sans-serif;
  --font-util:'Red Hat Display',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#2B2E37; --bg-wash-1:#333744;
    --surface:#363A45; --surface-2:#414553;
    --text:#F8F9FA; --text-dim:#C9CBD2;
    --border:rgba(255,255,255,.18);
    --brand:#3DB8F5; --brand-2:#009FE3; --brand-contrast:#000000;
    --accent:#FF4D4D; --accent-2:#FF8080; --accent-deep:#FF6B6B; --accent-contrast:#000000;
    --sky:#6FD0FA; --sky-2:#9FE0FB;
    --good:#3FD79A; --warn:#F0B429; --bad:#FF5C5C;
    --gradient-brand:linear-gradient(135deg,#3DB8F5,#FF4D4D);
    --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 16px 30px -18px rgba(0,0,0,.7);
    --shadow-pop:0 8px 22px -6px rgba(255,77,77,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#2B2E37; --bg-wash-1:#333744;
  --surface:#363A45; --surface-2:#414553;
  --text:#F8F9FA; --text-dim:#C9CBD2;
  --border:rgba(255,255,255,.18);
  --brand:#3DB8F5; --brand-2:#009FE3; --brand-contrast:#000000;
  --accent:#FF4D4D; --accent-2:#FF8080; --accent-deep:#FF6B6B; --accent-contrast:#000000;
  --sky:#6FD0FA; --sky-2:#9FE0FB;
  --good:#3FD79A; --warn:#F0B429; --bad:#FF5C5C;
  --gradient-brand:linear-gradient(135deg,#3DB8F5,#FF4D4D);
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 16px 30px -18px rgba(0,0,0,.7);
  --shadow-pop:0 8px 22px -6px rgba(255,77,77,.4);
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-wash-1:#F2F2F2;
  --surface:#FFFFFF; --surface-2:#F1F1F1;
  --text:#000000; --text-dim:#5B5B5B;
  --border:rgba(0,0,0,.13);
  --brand:#009FE3; --brand-2:#0577A6; --brand-contrast:#FFFFFF;
  --accent:#FF0000; --accent-2:#FF5B5B; --accent-deep:#B30000; --accent-contrast:#FFFFFF;
  --sky:#4FC3F7; --sky-2:#8FD9FA;
  --good:#1FA97C; --warn:#E3A008; --bad:#FF0000;
  --gradient-brand:linear-gradient(135deg,#009FE3,#FF0000);
  --shadow-card:0 1px 2px rgba(0,0,0,.06), 0 12px 26px -16px rgba(0,0,0,.22);
  --shadow-pop:0 8px 20px -6px rgba(255,0,0,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(900px 500px at 15% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;}
p{margin:0;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}

/* ---- appbar ---- */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);}
.appbar__brand{display:flex;align-items:center;gap:9px;}
.appbar__mark{width:20px;height:20px;background:var(--gradient-brand);clip-path:polygon(15% 0%,85% 50%,15% 100%,35% 50%);}
.appbar__word{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:-.01em;}
.chips{display:flex;gap:8px;}
.chip{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);font-family:var(--font-util);font-weight:700;font-size:13px;}
.chip svg{width:15px;height:15px;}
.chip--streak{color:var(--accent-deep);}
.chip--xp{color:var(--brand-2);}

/* ---- screens / tabbar ---- */
.screens{flex:1;overflow-y:auto;padding:16px 16px 90px;}
.screen{display:none;}
.screen.is-active{display:block;}
.tabbar{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.tab{appearance:none;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:var(--text-dim);font-family:var(--font-util);font-size:11px;font-weight:700;cursor:pointer;}
.tab svg{width:22px;height:22px;}
.tab.is-active{color:var(--brand);}

.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,12px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:88%;text-align:center;}
.toast.is-visible{opacity:1;transform:translate(-50%,0);}

/* ---- shared text/layout bits ---- */
.hero-title{font-size:26px;font-weight:900;margin-bottom:2px;}
.screen-sub{color:var(--text-dim);font-size:13.5px;margin-bottom:16px;}
.section-label{font-family:var(--font-util);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin:22px 0 10px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:var(--shadow-card);}
.empty-note{background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:18px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.6;}
.glyph{font-weight:700;}

/* ---- home: rings ---- */
.rings-row{display:flex;gap:10px;margin-bottom:16px;}
.ring-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-card);}
.ring{--pct:0;width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--brand) calc(var(--pct)*1%), var(--surface-2) 0);position:relative;}
.ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface);}
.ring__label{position:relative;font-family:var(--font-util);font-size:11px;font-weight:800;}
.ring-card__text{font-size:12px;color:var(--text-dim);display:flex;flex-direction:column;line-height:1.5;}
.ring-card__text strong{color:var(--text);font-size:13px;}

.hero-card{width:100%;text-align:left;appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:14px;cursor:pointer;margin-bottom:6px;box-shadow:var(--shadow-card);}
.hero-card .eyebrow{font-family:var(--font-util);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin-bottom:4px;}
.hero-card h4{font-size:16px;margin-bottom:8px;}
.progressbar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.progressbar span{display:block;height:100%;background:var(--gradient-brand);border-radius:99px;}
.hero-card .meta{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;color:var(--text-dim);}

.quest{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.quest:last-child{border-bottom:none;}
.quest__icon{width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--brand);}
.quest__icon svg{width:17px;height:17px;}
.quest.is-done .quest__icon{background:var(--gradient-brand);color:#fff;}
.quest__body{flex:1;min-width:0;}
.quest__title{font-size:13px;margin-bottom:5px;}
.quest__reward{font-family:var(--font-util);font-size:11px;font-weight:800;color:var(--accent-deep);}

.heatmap{display:flex;gap:6px;align-items:flex-end;height:70px;}
.day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.day .bar{width:100%;border-radius:5px 5px 2px 2px;background:var(--surface-2);}
.day.is-today .bar{background:var(--gradient-brand);}
.day .lbl{font-size:10px;color:var(--text-dim);font-weight:700;}
.reminder-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.reminder-row .field{font-size:12.5px;display:flex;align-items:center;gap:8px;}
.reminder-row input[type="time"]{border:1px solid var(--border);border-radius:8px;padding:4px 6px;background:var(--surface);color:var(--text);font-size:12.5px;}
.switch{position:relative;width:40px;height:22px;flex:0 0 auto;}
.switch input{opacity:0;position:absolute;width:100%;height:100%;margin:0;cursor:pointer;}
.switch .track{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;transition:background .2s;}
.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;}
.switch input:checked ~ .track{background:var(--gradient-brand);border-color:transparent;}
.switch input:checked ~ .knob{transform:translateX(18px);}

/* ---- path ---- */
.path-group__title{font-family:var(--font-util);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:20px 0 10px;}
.node-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer;position:relative;}
.node-btn:disabled{opacity:.5;cursor:default;}
.node-dot{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;}
.node-btn.is-done .node-dot{background:var(--gradient-brand);color:#fff;}
.node-dot svg{width:15px;height:15px;}
.node-btn.is-current{border-color:var(--brand);}
.node-title{font-size:14px;font-weight:700;}
.node-sub{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.node-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--font-util);font-size:10.5px;font-weight:800;color:var(--brand-2);background:var(--surface-2);border-radius:99px;padding:3px 8px;}

/* ---- play picker ---- */
.game-card{width:100%;text-align:left;appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow-card);}
.game-card__top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.game-card__icon{width:34px;height:34px;border-radius:9px;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.game-card__icon svg{width:18px;height:18px;}
.game-card h4{font-size:15px;}
.game-card p{font-size:12.5px;color:var(--text-dim);line-height:1.5;}

/* ---- generic game shell ---- */
.game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.btn{appearance:none;border:none;border-radius:10px;padding:11px 16px;font-family:var(--font-util);font-weight:800;font-size:13.5px;cursor:pointer;}
.btn--primary{background:var(--gradient-brand);color:#fff;}
.btn--ghost{background:var(--surface-2);color:var(--text);}
.game-stats{display:flex;gap:12px;font-family:var(--font-util);font-size:12.5px;color:var(--text-dim);}
.game-stats strong{color:var(--text);}

.sprint-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.timer-ring{--pct:100;width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--brand) calc(var(--pct)*1%), var(--surface-2) 0);position:relative;}
.timer-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface);}
.timer-ring__n{position:relative;font-family:var(--font-util);font-weight:800;font-size:16px;}
.prompt-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:var(--shadow-card);}
.prompt-card .tense{font-family:var(--font-util);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--brand);margin-bottom:4px;}
.prompt-card .verb{font-family:var(--font-display);font-size:19px;font-weight:700;}
.options{display:flex;flex-direction:column;gap:9px;}
.opt{appearance:none;text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:12px 14px;font-size:14.5px;font-weight:600;cursor:pointer;}
.opt.is-correct{border-color:var(--good);background:color-mix(in srgb, var(--good) 14%, var(--surface));}
.opt.is-wrong{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, var(--surface));}
.opt:disabled{cursor:default;}

.end-screen{text-align:center;padding:30px 10px;}
.end-screen .big{font-family:var(--font-display);font-size:44px;font-weight:900;margin:14px 0 6px;}
.end-screen .actions{display:flex;gap:10px;margin-top:20px;}
.end-screen .actions .btn{flex:1;}
.story-recap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:16px;text-align:left;}
.fr-label,.en-label{font-family:var(--font-util);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);margin-top:10px;}
.fr-label{margin-top:0;}
.story-recap .en{color:var(--text-dim);font-size:13px;}

/* ---- memory ---- */
.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mcard{aspect-ratio:1;position:relative;perspective:600px;cursor:pointer;}
.mcard .face{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-size:12px;font-weight:700;backface-visibility:hidden;transition:transform .35s;border:1px solid var(--border);}
.mcard .face--back{background:var(--gradient-brand);}
.mcard .face--front{background:var(--surface);transform:rotateY(180deg);}
.mcard.is-flipped .face--back,.mcard.is-matched .face--back{transform:rotateY(-180deg);}
.mcard.is-flipped .face--front,.mcard.is-matched .face--front{transform:rotateY(0);}
.mcard.is-matched .face--front{border-color:var(--good);background:color-mix(in srgb, var(--good) 14%, var(--surface));}

/* ---- merge / tuin ---- */
.merge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px;}
.merge-cell{aspect-ratio:1;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;padding:3px;text-align:center;font-size:10.5px;font-weight:700;cursor:pointer;}
.merge-cell:disabled{cursor:default;}
.merge-cell[data-tier="1"]{background:color-mix(in srgb, var(--brand) 14%, var(--surface));border-color:color-mix(in srgb, var(--brand) 40%, var(--border));}
.merge-cell[data-tier="2"]{background:color-mix(in srgb, var(--sky) 22%, var(--surface));border-color:color-mix(in srgb, var(--sky) 45%, var(--border));font-size:11px;}
.merge-cell[data-tier="3"]{background:color-mix(in srgb, var(--accent) 16%, var(--surface));border-color:color-mix(in srgb, var(--accent) 42%, var(--border));font-weight:800;font-size:10.5px;}
.merge-cell.is-selected{box-shadow:0 0 0 2px var(--brand);transform:scale(1.05);}
.merge-actions{display:flex;gap:8px;justify-content:center;}
.merge-actions .btn{flex:1;}
.merge-tabs{display:flex;gap:8px;margin-bottom:14px;}
.merge-tab{flex:1;appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-family:var(--font-util);font-size:12.5px;font-weight:700;border-radius:10px;padding:8px 10px;cursor:pointer;}
.merge-tab.is-active{background:var(--gradient-brand);color:#fff;border-color:transparent;}

.garden-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.garden-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-card);}
.garden-item .glyph{font-family:var(--font-display);font-size:15px;}
.garden-en{font-size:11.5px;color:var(--text-dim);}
.garden-count{align-self:flex-start;margin-top:4px;font-family:var(--font-util);font-size:11px;font-weight:800;color:var(--good);background:color-mix(in srgb, var(--good) 16%, transparent);border-radius:99px;padding:2px 9px;}
.garden-item--special{background:linear-gradient(155deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface));border-color:color-mix(in srgb, var(--brand) 40%, var(--border));}
.garden-level{align-self:flex-start;margin-top:4px;font-family:var(--font-util);font-size:11px;font-weight:800;color:var(--brand-2);background:color-mix(in srgb, var(--brand) 18%, transparent);border-radius:99px;padding:2px 9px;}

.merge-bonus-banner{background:color-mix(in srgb, var(--accent) 15%, var(--surface));border:1px solid var(--accent);color:var(--accent-deep);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:700;text-align:center;margin:-4px 0 12px;}
.merge-combo{display:inline-block;margin:-4px 0 12px;padding:5px 12px;border-radius:99px;background:var(--gradient-brand);color:#fff;font-family:var(--font-util);font-size:12.5px;font-weight:800;box-shadow:var(--shadow-pop);}
.merge-pop{position:fixed;transform:translate(-50%,-100%);font-family:var(--font-util);font-weight:800;font-size:14px;color:var(--accent-deep);animation:mergePop .9s ease-out forwards;pointer-events:none;z-index:60;}
@keyframes mergePop{0%{opacity:0;transform:translate(-50%,-90%);}20%{opacity:1;}100%{opacity:0;transform:translate(-50%,-160%);}}

/* ---- story ---- */
.story-progress{display:flex;gap:6px;justify-content:center;margin-bottom:16px;}
.story-progress .dot{width:8px;height:8px;border-radius:50%;background:var(--surface-2);}
.story-progress .dot.is-done{background:var(--good);}
.story-progress .dot.is-current{background:var(--brand);}
.story-sentence{font-family:var(--font-display);font-size:17px;line-height:1.6;text-align:center;margin-bottom:18px;padding:0 6px;}
.story-sentence .blank{display:inline-block;min-width:64px;border-bottom:2px solid var(--brand);color:var(--brand-2);font-weight:700;}
.story-sentence-nl{display:block;margin-top:10px;font-family:var(--font-util);font-size:13px;font-weight:500;color:var(--text-dim);}

/* ---- review ---- */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:var(--shadow-card);}
.stat .lbl{font-size:11px;color:var(--text-dim);font-weight:700;}
.stat .num{font-family:var(--font-display);font-size:22px;font-weight:900;margin-top:3px;}
.due{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.due:last-child{border-bottom:none;}
.due__text{flex:1;min-width:0;}
.due__verb{font-family:var(--font-display);font-size:14px;margin-bottom:5px;}
.due__tense{color:var(--text-dim);font-size:11.5px;font-family:var(--font-util);margin-left:5px;}
.due__tag{display:inline-block;margin-left:6px;font-family:var(--font-util);font-size:9.5px;font-weight:800;color:var(--accent-deep);background:color-mix(in srgb, var(--accent) 16%, transparent);border-radius:99px;padding:1px 7px;}
.due__meter{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.due__meter span{display:block;height:100%;border-radius:99px;}
.due__pct{font-family:var(--font-util);font-size:12px;font-weight:800;color:var(--text-dim);}
.legend{display:flex;gap:14px;justify-content:center;margin-top:18px;font-size:11px;color:var(--text-dim);}
.legend span{display:flex;align-items:center;gap:5px;}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* ---- crossword ---- */
.xw-grid{display:grid;gap:2px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:10px;}
.xw-cell{position:relative;aspect-ratio:1;background:var(--surface);}
.xw-cell--block{background:var(--text);opacity:.08;}
.xw-cell input{width:100%;height:100%;border:none;background:transparent;text-align:center;text-transform:uppercase;font-weight:800;font-size:13px;color:var(--text);padding:0;}
.xw-cell input.is-correct{background:color-mix(in srgb, var(--good) 20%, transparent);}
.xw-cell input.is-wrong{background:color-mix(in srgb, var(--bad) 16%, transparent);}
.xw-num{position:absolute;top:1px;left:2px;font-size:7px;color:var(--text-dim);font-weight:700;}
.xw-clue{font-size:12.5px;margin:4px 0;line-height:1.5;}

/* ---- install banner ---- */
.install-banner{position:relative;background:color-mix(in srgb, var(--brand) 10%, var(--surface));border:1px solid var(--brand);border-radius:12px;padding:14px 34px 14px 14px;margin-bottom:16px;}
.install-banner__title{font-weight:800;font-size:13.5px;margin-bottom:4px;}
.install-banner__steps{font-size:12.5px;color:var(--text-dim);}
.install-banner__close{position:absolute;top:8px;right:8px;appearance:none;border:none;background:none;font-size:18px;line-height:1;color:var(--text-dim);cursor:pointer;padding:4px;}

/* ---- confetti ---- */
.confetti-burst{position:fixed;inset:0;pointer-events:none;z-index:70;}
.confetti-burst span{position:absolute;top:40%;left:50%;width:8px;height:8px;border-radius:2px;animation:confettiFall 1.3s ease-out forwards;animation-delay:var(--delay);transform:translate(-50%,-50%) rotate(0deg);}
@keyframes confettiFall{
  0%{opacity:1;transform:translate(calc(-50% + var(--x) * 20px), -50%) rotate(0deg);}
  100%{opacity:0;transform:translate(calc(-50% + var(--x) * 220px), 380px) rotate(calc(var(--rot) * 1deg));}
}
@media (prefers-reduced-motion: reduce){
  .confetti-burst,.merge-pop{display:none;}
}