:root { --bg:#000; --fg:#f2f2ea; --mut:#8a8d92; --card:#16171a; --line:#2a2c30; --acc:#e8e8e0; --red:#ff4a4a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Let the document scroll (no height lock on html/body): iOS Safari won't reliably scroll nested boxes. */
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--fg); overflow-x:hidden;
  font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
button { font:inherit; color:inherit; touch-action:manipulation; cursor:pointer; }
[hidden] { display:none !important; }
#app { min-height:100dvh; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 16px); }
#status { width:100%; display:flex; justify-content:space-between; font-size:15px; color:var(--mut); min-height:20px; font-variant-numeric:tabular-nums; }
#watch { width:min(100%, 46dvh); flex:none; filter:drop-shadow(0 6px 18px rgba(255,255,255,.05)); }
.panel { display:none; width:100%; max-width:480px; flex-direction:column; align-items:stretch; gap:10px; flex:1; min-height:0; }
#app[data-state=idle] #menu, #app[data-state=answering] #play, #app[data-state=feedback] #feedback, #app[data-state=summary] #summary { display:flex; }
h1, h2 { margin:0; text-align:center; font-weight:700; letter-spacing:.04em; }
h1 { font-size:24px; } h2 { font-size:22px; }
.muted { color:var(--mut); text-align:center; margin:0; font-size:15px; }
.big { min-height:60px; border-radius:16px; border:1px solid var(--line); background:var(--card); font-size:20px; font-weight:600; }
.big.primary { background:var(--acc); color:#000; border-color:var(--acc); }
.big:disabled { opacity:.35; }
button:active:not(:disabled) { transform:scale(.97); filter:brightness(.8); }
.seg { display:flex; gap:8px; }
.seg button { flex:1; min-height:52px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:20px; }
.seg button[aria-pressed=true] { background:var(--acc); color:#000; }
.toggle { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; font-size:17px; }
.toggle input { width:24px; height:24px; accent-color:#e8e8e0; }
#answer { display:flex; align-items:center; gap:8px; }
.colon { font-size:40px; font-weight:700; }
.field { flex:1; min-height:76px; border-radius:16px; border:2px solid var(--line); background:var(--card); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.field.active { border-color:var(--acc); }
.field .lbl { font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.1em; }
.field .val { font-size:40px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
#fb-time { text-align:center; font-size:44px; font-weight:800; font-variant-numeric:tabular-nums; }
#fb-detail { text-align:center; font-size:17px; line-height:1.5; }
#fb-detail b { font-variant-numeric:tabular-nums; }
#try { text-align:center; min-height:22px; font-size:17px; font-weight:600; color:var(--red); }
#try.shake { animation:shake .35s; }
@keyframes shake { 20%, 60% { transform:translateX(-8px); } 40%, 80% { transform:translateX(8px); } }
.history { list-style:none; margin:0; padding:0; flex:none; font-size:15px; color:var(--mut); font-variant-numeric:tabular-nums; }
.history li { display:flex; justify-content:space-between; padding:8px 4px; border-bottom:1px solid var(--line); }
.history b { color:var(--fg); font-weight:600; }
.history li.cur { background:var(--card); color:var(--fg); border-radius:8px; }
#clear { align-self:center; min-height:44px; background:none; border:0; color:var(--mut); font-size:15px; }
#sum-score { text-align:center; font-size:44px; font-weight:800; font-variant-numeric:tabular-nums; }
#sum-detail { line-height:1.5; }
#quit { position:absolute; top:calc(env(safe-area-inset-top) - 6px); left:50%; transform:translateX(-50%); min-height:44px; min-width:60px; background:none; border:0; color:var(--mut); font-size:15px; }
#backdrop { position:fixed; inset:0; z-index:5; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:10; background:#1b1c20; border-top:1px solid #34363c; border-radius:20px 20px 0 0;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 12px); box-shadow:0 -10px 30px rgba(0,0,0,.6); max-width:520px; margin:0 auto; }
.sheet-head { display:flex; justify-content:space-between; align-items:center; height:36px; color:var(--mut); text-transform:uppercase; letter-spacing:.1em; font-size:13px; }
.sheet-head b { font-size:30px; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:0; }
.grid { display:grid; gap:8px; margin-bottom:8px; }
.grid button { border-radius:12px; border:1px solid #3a3c42; background:#26282d; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.grid button.sel { background:var(--acc); color:#000; }
.hours { grid-template-columns:repeat(4,1fr); } .hours button { min-height:64px; }
.tens { grid-template-columns:repeat(6,1fr); } .tens button { min-height:56px; }
.ones { grid-template-columns:repeat(5,1fr); margin-bottom:0; } .ones button { min-height:56px; }
@media (min-width:700px) { #watch { width:min(100%, 50dvh); } }