:root {
  --bg:#0d0e0d;
  --surface:#111311;
  --surface-2:#171917;
  --text:#f3f0ea;
  --muted:#858985;
  --muted-2:#7d827d;
  --line:#d8d5ce;
  --line-old:#777b77;
  --accent:#ff7048;
  --accent-ink:#ff7048;
  --hairline:rgba(255,255,255,.09);
  --shadow:rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg);overscroll-behavior:none}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Helvetica,Arial,sans-serif;color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.45;cursor:default}
.app{height:100vh;height:100dvh;width:100%;max-width:560px;margin:0 auto;position:relative;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.025),transparent 30%),var(--bg);overflow:hidden;color:var(--text)}
.app[data-theme="paper"]{--bg:#f2eee6;--surface:#f8f4ec;--surface-2:#ebe6dc;--text:#171816;--muted:#686a63;--muted-2:#65665f;--line:#363833;--line-old:#6f6b65;--accent-ink:#b7432b;--hairline:rgba(20,20,16,.10);--shadow:rgba(50,45,35,.17);background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.65),transparent 38%),linear-gradient(120deg,rgba(90,70,40,.018),transparent 35%),var(--bg)}
.topbar{padding:calc(env(safe-area-inset-top) + 16px) 20px 6px;min-height:116px;display:grid;grid-template-columns:54px 1fr 54px;align-items:start;z-index:3}
.icon-btn{width:44px;height:44px;border:0;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:10px 8px;cursor:pointer}
.icon-btn span{display:block;width:21px;height:1.5px;background:var(--text);border-radius:1px;opacity:.9}.icon-btn span:last-child{width:13px}
.brand-wrap{text-align:center}.brand-line{display:flex;justify-content:center;align-items:center;gap:8px;min-height:22px}
.brand{font-size:18px;letter-spacing:.34em;margin-left:.34em;font-weight:570;line-height:1.2}.mode-badge{font-size:7px;letter-spacing:.15em;color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent-ink) 42%,transparent);border-radius:99px;padding:4px 6px 3px}
.score-wrap{display:flex;flex-direction:column;align-items:center;margin-top:12px}.score-label{color:var(--muted);font-size:9px;letter-spacing:.22em}.score{font-size:35px;line-height:1.05;font-weight:330;letter-spacing:-.04em;margin-top:2px;font-variant-numeric:tabular-nums}
.best-wrap{justify-self:end;text-align:right;padding-top:5px;display:flex;flex-direction:column;align-items:flex-end}.best-wrap span{color:var(--muted);font-size:8px;letter-spacing:.18em}.best-wrap strong{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px}
.game-shell{position:relative;min-height:0;overflow:hidden}#gameCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.first-hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:9px;letter-spacing:.28em;color:var(--muted);opacity:0;transition:opacity .5s ease;pointer-events:none}.first-hint.visible{opacity:1}
.toast{position:absolute;left:50%;bottom:25px;transform:translate(-50%,8px);padding:8px 12px;border-radius:99px;background:rgba(0,0,0,.64);backdrop-filter:blur(12px);color:#fff;font-size:10px;letter-spacing:.14em;opacity:0;transition:.23s ease;pointer-events:none;white-space:nowrap}.app[data-theme="paper"] .toast{background:rgba(22,22,18,.72)}.toast.visible{opacity:1;transform:translate(-50%,0)}
.replay-skip{position:absolute;right:18px;bottom:18px;min-height:44px;padding:0 14px;border:1px solid var(--hairline);border-radius:99px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);font-size:9px;letter-spacing:.14em;cursor:pointer}
.footer{min-height:calc(env(safe-area-inset-bottom) + 34px);padding:8px 20px calc(env(safe-area-inset-bottom) + 10px);text-align:center;color:var(--muted-2);font-size:8px;letter-spacing:.25em;z-index:2}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(8px);z-index:10}.app[data-theme="paper"] .scrim{background:rgba(43,39,31,.25)}
.modal{position:absolute;z-index:12;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 28px) 34px calc(env(safe-area-inset-bottom) + 30px)}
.modal[hidden],.sheet[hidden],.scrim[hidden],[hidden]{display:none!important}.modal-mark{display:flex;align-items:center;gap:7px;margin-bottom:26px}.modal-mark i{width:7px;height:7px;border:1px solid var(--accent);border-radius:50%;display:block}.modal-mark b{width:42px;height:1px;background:var(--accent);display:block;opacity:.7}
.eyebrow{margin:0;color:var(--accent-ink);font-size:9px;letter-spacing:.28em;text-transform:uppercase}.onboarding h1{font-size:48px;letter-spacing:.35em;margin:14px 0 0 .35em;font-weight:450}.tagline{color:var(--muted);font-size:15px;margin:8px 0 38px}.rules{width:100%;max-width:360px;border-top:1px solid var(--hairline);margin-bottom:30px}.rules div{display:grid;grid-template-columns:42px 1fr;text-align:left;align-items:center;border-bottom:1px solid var(--hairline);min-height:66px}.rules span{color:var(--muted-2);font-size:11px;letter-spacing:.12em}.rules p{margin:0;font-size:14px;line-height:1.35;color:var(--text);font-weight:430}
.primary-btn,.secondary-btn{min-height:54px;border-radius:18px;border:0;cursor:pointer;letter-spacing:.12em;font-size:12px;font-weight:650}.primary-btn{background:var(--accent);color:#130d0a;box-shadow:0 8px 28px rgba(255,112,72,.16)}.secondary-btn{background:transparent;border:1px solid var(--hairline)}.onboarding .primary-btn{width:100%;max-width:360px}.fineprint{margin:16px 0 0;color:var(--muted);font-size:10px;line-height:1.55;letter-spacing:.04em}
.sheet{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:12;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--hairline);border-radius:30px;box-shadow:0 24px 70px var(--shadow);padding:10px 18px 22px;max-height:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);overflow-y:auto;backdrop-filter:blur(24px) saturate(115%);animation:sheetIn .28s cubic-bezier(.2,.85,.25,1)}
@keyframes sheetIn{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}.sheet-handle{width:34px;height:4px;border-radius:3px;background:var(--muted-2);opacity:.55;margin:2px auto 19px}.game-over{text-align:center}.game-over h2{font-size:24px;letter-spacing:.12em;margin:10px 0 18px .12em;font-weight:480}.result-score{display:flex;flex-direction:column;padding:8px 0 21px}.result-score span{font-size:68px;line-height:.9;font-weight:300;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.result-score small{margin-top:11px;color:var(--muted);letter-spacing:.22em;font-size:9px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:18px}.result-grid div{padding:15px 6px;display:flex;flex-direction:column;gap:5px}.result-grid div+div{border-left:1px solid var(--hairline)}.result-grid span{font-size:7.5px;letter-spacing:.11em;color:var(--muted)}.result-grid strong{font-size:15px;font-weight:550}.sheet-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:9px}.sheet-actions.single-primary{grid-template-columns:1fr}.quiet-actions{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:13px;color:var(--muted-2);flex-wrap:wrap}.quiet-actions>span{opacity:.65}.text-btn{border:0;background:transparent;color:var(--muted);min-height:44px;padding:0 9px;cursor:pointer;font-size:9px;letter-spacing:.13em}.text-btn:hover{color:var(--text)}
.sheet-heading{display:flex;justify-content:space-between;align-items:flex-start;margin:0 4px 13px}.sheet-heading h2{margin:5px 0 0;font-size:23px;font-weight:550;letter-spacing:-.02em}.close-btn{border:0;background:var(--surface-2);width:46px;height:46px;border-radius:50%;font-size:22px;font-weight:300;cursor:pointer;color:var(--muted)}
.menu-group-label{margin:10px 4px 6px;color:var(--muted-2);font-size:8px;letter-spacing:.18em}.menu-group-label.spaced{margin-top:18px}.menu-row{width:100%;min-height:55px;padding:0 4px;display:flex;align-items:center;justify-content:space-between;border:0;border-top:1px solid var(--hairline);background:transparent;cursor:pointer;font-size:14px;text-align:left}.menu-row small{color:var(--muted);font-size:11px}.menu-row.danger span{color:var(--accent-ink)}
.stats-hero{display:flex;align-items:baseline;gap:10px;padding:8px 4px 20px}.stats-hero span{font-size:8px;letter-spacing:.16em;color:var(--muted)}.stats-hero strong{font-size:52px;font-weight:300;letter-spacing:-.05em}.stats-hero small{color:var(--muted);font-size:10px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hairline)}.stats-grid div{min-height:72px;padding:15px 4px;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:7px}.stats-grid div:nth-child(odd){padding-right:14px}.stats-grid div:nth-child(even){border-left:1px solid var(--hairline);padding-left:14px}.stats-grid span{color:var(--muted);font-size:7.5px;letter-spacing:.13em}.stats-grid strong{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}.trend-block{margin-top:20px;padding:16px 14px 10px;border-radius:20px;background:var(--surface-2)}.trend-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.trend-heading span{font-size:8px;letter-spacing:.14em;color:var(--muted)}.trend-heading small{font-size:9px;color:var(--muted-2)}#statsCanvas{display:block;width:100%;height:78px}
@media(max-height:650px){.topbar{min-height:102px;padding-top:calc(env(safe-area-inset-top) + 10px)}.onboarding h1{font-size:40px}.tagline{margin-bottom:24px}.rules div{min-height:55px}.sheet{border-radius:25px}.result-score span{font-size:58px}}
@media(min-width:700px){body{display:grid;place-items:center;background:#080908}.app{height:min(940px,96dvh);border:1px solid rgba(255,255,255,.08);border-radius:34px;box-shadow:0 40px 110px rgba(0,0,0,.65)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}

@media(max-width:350px){.quiet-actions{gap:0}.text-btn{padding:0 7px;font-size:8px;letter-spacing:.1em}}

/* v1.5: contextual mode confirmation without persistent gameplay clutter */
.mode-intro{position:absolute;left:50%;top:14px;transform:translate(-50%,0);z-index:4;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:min(84%,320px);padding:12px 16px;border:1px solid var(--hairline);border-radius:18px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 14px 40px var(--shadow);backdrop-filter:blur(18px) saturate(115%);pointer-events:none;text-align:center;animation:modeIntroIn .25s cubic-bezier(.2,.85,.25,1)}
.mode-intro strong{font-size:10px;letter-spacing:.17em;font-weight:650}.mode-intro span{font-size:8px;letter-spacing:.11em;color:var(--muted);line-height:1.35}
@keyframes modeIntroIn{from{opacity:0;transform:translate(-50%,-7px)}to{opacity:1;transform:translate(-50%,0)}}
.mode-prompt{text-align:left}.mode-prompt h2{font-size:24px;line-height:1.15;margin:9px 0 10px;font-weight:560;letter-spacing:-.025em}.prompt-body{margin:0;color:var(--text);font-size:14px;line-height:1.5}.prompt-meta{margin:17px 0 20px;padding:12px 14px;border-radius:16px;background:var(--surface-2);color:var(--muted);font-size:9px;line-height:1.55;letter-spacing:.08em;text-transform:uppercase}.menu-row.current span{font-weight:600}.menu-row.current small{color:var(--accent-ink)}
@media(max-height:590px){.mode-prompt{padding-bottom:16px}.prompt-meta{margin:12px 0 15px}.mode-intro{top:8px;padding:9px 13px}}


/* v1.6: restrained mastery feedback */
.result-insight{margin:-4px 0 16px;padding:11px 13px 12px;border-radius:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px;text-align:center}
.result-insight strong{font-size:10px;letter-spacing:.14em;font-weight:650;color:var(--text)}
.result-insight span{font-size:9px;line-height:1.4;color:var(--muted);letter-spacing:.025em}
.score.record-pulse{animation:recordPulse .52s cubic-bezier(.2,.85,.25,1)}
@keyframes recordPulse{0%{transform:scale(1)}42%{transform:scale(1.16);color:var(--accent-ink)}100%{transform:scale(1)}}
@media(max-height:650px){.result-insight{margin-top:-8px;margin-bottom:12px;padding:9px 11px}.result-insight span{font-size:8.5px}}

.menu-row small{max-width:58%;text-align:right;line-height:1.25}

/* v1.7: support + image export */
.menu{padding-bottom:12px}
.menu-footer-links{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--hairline);margin-top:6px;padding:10px 2px 2px;font-size:11px;line-height:1.25}
.footer-link-btn,.footer-link-anchor{border:0;background:transparent;padding:0;color:var(--muted);font-size:11px;line-height:1.25;text-decoration:none}
.footer-link-btn{text-align:left;cursor:pointer}
.footer-link-anchor{text-align:right;display:inline-flex;gap:4px;align-items:center}
.footer-link-anchor span{color:var(--accent-ink)}
.footer-link-btn:hover,.footer-link-anchor:hover{color:var(--text)}

.support-sheet{padding-bottom:18px}
.support-heading{margin-bottom:16px}
.support-heading h2{margin:6px 0 2px;font-size:24px;font-weight:560;letter-spacing:-.02em}
.support-subtitle{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
.support-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.amount-chip{min-height:44px;border-radius:14px;border:1px solid var(--hairline);background:transparent;color:var(--text);font-size:15px;cursor:pointer}
.amount-chip.active{background:var(--accent);border-color:transparent;color:#130d0a;font-weight:650;box-shadow:0 8px 28px rgba(255,112,72,.16)}
.support-pay-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;width:100%;min-height:56px}
.support-inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.support-secondary-btn{min-height:50px;border-radius:16px;font-size:11px;letter-spacing:.08em}
.support-qr-panel{margin-top:14px;display:none;flex-direction:column;align-items:center;gap:12px}
.support-qr-panel.visible{display:flex}
.support-qr-card{width:min(100%,280px);padding:18px;border-radius:24px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.support-qr-card img{display:block;width:100%;height:auto}
.support-caption{margin:0;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}
.support-note{margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.55;text-align:center}.support-note span{color:var(--accent-ink)}
.app[data-theme="paper"] .support-qr-card{box-shadow:0 10px 24px rgba(44,38,28,.08)}

@media(min-width:700px){
  .support-mobile-actions{display:none}
  .support-qr-panel,.support-qr-panel.visible{display:flex;margin-top:6px}
  .support-sheet{max-width:460px;left:50%;right:auto;transform:translateX(-50%)}
}

@media(max-width:380px){
  .support-amounts{gap:8px}
  .amount-chip{font-size:14px}
  .menu-footer-links,.footer-link-btn,.footer-link-anchor{font-size:10px}
  .quiet-actions{row-gap:0}
  .text-btn{padding:0 7px;font-size:8px;letter-spacing:.11em}
}

/* v1.7.2: support typography consistency */
.support-sheet,
.support-sheet button,
.support-sheet a,
.support-sheet p,
.support-sheet h2,
.support-sheet span {
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Helvetica,Arial,sans-serif;
}

/* v1.8: strategic mastery + Bold bonus */
.result-bonus{margin-top:9px;color:var(--accent-ink);font-style:normal;font-size:9px;font-weight:650;letter-spacing:.16em;text-transform:uppercase}
.mastery-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:18px}
.mastery-strip div{min-height:66px;padding:13px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.mastery-strip div+div{border-left:1px solid var(--hairline)}
.mastery-strip span{color:var(--muted);font-size:7px;letter-spacing:.11em}
.mastery-strip strong{font-size:17px;font-weight:520;font-variant-numeric:tabular-nums}
@media(max-width:350px){.mastery-strip span{font-size:6.5px;letter-spacing:.08em}.mastery-strip strong{font-size:16px}}


/* TRACE 2.0: geometry-triggered fingertip visibility assist. */
.precision-assist{
  position:absolute;
  z-index:7;
  width:92px;
  height:92px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--text) 20%,transparent);
  background:var(--bg);
  box-shadow:0 7px 20px color-mix(in srgb,var(--shadow) 46%,transparent),0 0 0 2px color-mix(in srgb,var(--bg) 88%,transparent);
  pointer-events:none;
  image-rendering:auto;
  opacity:.98;
}
.app[data-theme="paper"] .precision-assist{
  border-color:color-mix(in srgb,var(--text) 18%,transparent);
  box-shadow:0 7px 18px rgba(70,58,40,.12),0 0 0 2px rgba(242,238,230,.9);
}
@media(max-width:350px){.precision-assist{width:86px;height:86px}}