/* INKLOSURE v5 styles. Carried over from prototype v4 "Sunny Survey" (tokens, cards, hard shadows) with accessibility additions at the end. */
/* ===== INKLOSURE v4 "Sunny Survey": tokens ===== */
:root{
  /* colour (light) */
  --bg:#fff8ee; --bg-clear:rgba(255,248,238,0); --dot:rgba(45,55,72,.07);
  --surface:#ffffff; --surface2:#fff4dc; --surface3:#f1ebdd;
  --edge:#2d3748; --shade:#2d3748;
  --text:#1f2937; --mute:#566175;
  --gold:#f6bd2f; --gold-ink:#2b2002;
  --sky:#bfe3f5; --blush:#ffd3cc; --mint:#c6f0d3; --lav:#e4e0fb; --butter:#ffe9a6;
  --sel-bg:#bfe3f5; --sel-fg:#16212e;
  --marker:#00a99d; --hit:#22c55e; --hit-ink:#157a3b; --miss:#e5484d; --miss-ink:#c1272d;
  --flame:#e8890c; --focus:#2563eb; --scrim:rgba(31,41,55,.55);
  /* chart sheet (canvas draws its own paper; these frame it) */
  --paper:#f3ecd9; --paper2:#f9f5e8; --axis:#1b2430;
  /* type */
  --display:ui-rounded,"SF Pro Rounded","Fredoka","Baloo 2","Nunito","Varela Round","Arial Rounded MT Bold","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --sans:"Nunito","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:28px; --fs-2xl:44px; --fs-3xl:64px;
  /* shape, space, depth */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px; --bw:3px; --off:4px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --sh:var(--off) var(--off) 0 var(--shade);
  --sh-sm:3px 3px 0 var(--shade);
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:.12s; --t:.2s; --t-slow:.4s;
}
:root[data-theme="dark"]{
    --bg:#131a2c; --bg-clear:rgba(19,26,44,0); --dot:rgba(255,255,255,.05);
    --surface:#1e2740; --surface2:#2a3555; --surface3:#34426a;
    --edge:#8c9bc2; --shade:#060912;
    --text:#f4f1e8; --mute:#b0bad1;
    --gold-ink:#241a02;
    --sky:#2f5f9a; --blush:#7a3b43; --mint:#215c43; --lav:#44408a; --butter:#5a4a16;
    --sel-bg:#3b6fb4; --sel-fg:#ffffff;
    --hit-ink:#6fe3a0; --miss-ink:#ff9a9d;
    --flame:#ffb347; --focus:#8cb4ff; --scrim:rgba(0,0,0,.68);
    color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);overscroll-behavior:none}
body{margin:0;color:var(--text);font:var(--fs-base)/1.4 var(--sans);min-height:100vh;min-height:100dvh;overscroll-behavior:none;touch-action:manipulation;
  background-color:var(--bg);-webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(var(--dot) 1.5px,transparent 1.7px);background-size:22px 22px;background-attachment:fixed}
#app{position:relative;max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
#app.wide{max-width:1120px}
#app.wide header{margin-bottom:4px}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
canvas#cv:focus-visible{outline-offset:-3px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block;pointer-events:none}
.hidden{display:none!important}

/* header: one rounded card */
header{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;flex-wrap:nowrap;
  background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh);padding:4px 8px 4px 12px;margin:0 var(--off) var(--s3) 0}
.brand{display:flex;align-items:center;color:var(--text)}
.logo{height:34px;width:auto;display:block;flex:none}
.hdr{display:flex;gap:6px;align-items:center;margin-left:auto}
.chip{border:2px solid var(--edge);background:var(--surface2);border-radius:999px;height:34px;padding:0 11px;font:700 13px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;color:var(--text)}
.chip b{font-weight:700;font-size:15px}
.chip .lab{color:var(--mute);font-weight:600}
.chip svg{width:16px;height:16px;fill:var(--flame);stroke:none}
#streakChip{background:var(--butter)}
.chip.live svg{animation:flick 1.1s ease-in-out infinite alternate;transform-origin:50% 90%}
.chip.bump{animation:bump .5s var(--ease)}
@keyframes flick{0%{transform:scale(1) rotate(-3deg)}100%{transform:scale(1.14,1.22) rotate(3deg)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.iconbtn{width:44px;height:44px;border-radius:50%;border:2px solid var(--edge);background:var(--surface2);color:var(--text);cursor:pointer;position:relative;overflow:hidden;display:inline-grid;place-items:center;padding:0;transition:transform var(--t-fast) var(--ease),background var(--t)}
.iconbtn:active{transform:scale(.93)}
.iconbtn svg.i{width:22px;height:22px}
#sndBtn{background:var(--butter)}
#sndBtn .off{display:none}
#sndBtn.muted{background:var(--surface3);color:var(--mute)} #sndBtn.muted .on{display:none} #sndBtn.muted .off{display:block}
#sndBtn.blocked{border-style:dashed}
#sndBtn.nope{opacity:.4}
#helpBtn{background:var(--sky)}
#themeBtn{background:var(--lav)} #themeBtn .sun{display:none} :root[data-theme="dark"] #themeBtn .sun{display:block} :root[data-theme="dark"] #themeBtn .moon{display:none}
@media (max-width:460px){ header .brand{width:26px;overflow:hidden;flex:none} }
@media (max-width:345px){ header .brand{width:22px} }  /* room for the 44px theme toggle: wordmark hides, the loop mark stays */
.sndhint{position:absolute;z-index:8;top:calc(max(10px,env(safe-area-inset-top)) + 62px);right:max(18px,env(safe-area-inset-right));box-shadow:var(--sh-sm);display:flex;align-items:center;gap:8px;max-width:min(300px,calc(100% - 32px));padding:8px 8px 8px 12px;border-radius:var(--r-md);background:var(--butter);border:2px solid var(--edge);color:var(--text);font-size:var(--fs-sm);line-height:1.3;animation:enter .34s var(--ease) both}
.sndhint svg{width:18px;height:18px;flex:none;color:var(--text);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sndhint button{margin-left:2px;background:var(--surface);border:2px solid var(--edge);border-radius:999px;color:var(--text);font-weight:800;cursor:pointer;padding:0 10px;min-height:44px;min-width:44px}

/* play grid */
.play{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);grid-template-areas:"kick" "q" "chart" "hint" "ax" "ctl" "dock";align-content:start}
#app.wide .play{grid-template-columns:minmax(0,1fr) minmax(280px,380px);column-gap:var(--s4);align-items:start;grid-template-rows:auto auto auto auto auto auto 1fr;
  grid-template-areas:"chart kick" "chart q" "chart ax" "chart ctl" "chart dock" "chart hint" "chart ."}
.kickrow{grid-area:kick;display:flex;align-items:center;gap:var(--s2);font:700 var(--fs-xs)/1 var(--display);color:var(--text);min-height:26px;margin-right:var(--off)}
#qKick{flex:none;background:var(--lav);border:2px solid var(--edge);border-radius:999px;padding:5px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pips{display:flex;gap:6px;flex:1;min-width:30px}
.pip{flex:1;height:12px;border-radius:999px;background:var(--surface);border:2px solid var(--edge);transition:background var(--t-fast),transform var(--t-slow) var(--ease)}
.pip.cur{background:var(--gold)} .pip.h{background:var(--hit)} .pip.m{background:var(--miss)}
.pip.pop{animation:bump .5s var(--ease)}
#modeLbl{flex:none;color:var(--mute);font-weight:700;white-space:nowrap}
#modeLbl.test{background:var(--blush);color:var(--text);border:2px solid var(--edge);border-radius:999px;padding:5px 9px;text-transform:uppercase;letter-spacing:.03em;font-size:11px;font-weight:800}
.qcard{grid-area:q;background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh);padding:10px 14px 11px;margin-right:var(--off)}
.qcard h1{font:700 26px/1.12 var(--display);margin:0;letter-spacing:-.005em;overflow-wrap:anywhere;color:var(--text)}
.qcard p{margin:3px 0 0;color:var(--mute);font-size:14px;line-height:1.3;font-weight:600}
#chartWrap{grid-area:chart;position:relative;border:var(--bw) solid var(--edge);border-radius:var(--r-xl);box-shadow:var(--sh);width:calc(100% - var(--off));background:var(--paper);align-self:start;overflow:hidden}
#app.wide #chartWrap{width:calc(100% - var(--off))}
#chartWrap.shake{animation:shake .46s linear}
@keyframes shake{0%,100%{transform:none}12%{transform:translate(-5px,2px)}28%{transform:translate(5px,-3px)}44%{transform:translate(-3px,-2px)}60%{transform:translate(3px,2px)}78%{transform:translate(-1px,1px)}}
canvas#cv{display:block;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}
#loupe{position:absolute;top:8px;width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 3px var(--axis),0 4px 0 3px rgba(31,41,55,.25);pointer-events:none;background:var(--paper2);display:none;touch-action:none}
.hint{grid-area:hint;font-size:var(--fs-sm);color:var(--mute);min-height:20px;line-height:1.35;display:flex;gap:var(--s2);align-items:flex-start;transition:color var(--t-fast);font-weight:600;margin-right:var(--off)}
.hint.say{color:var(--text)}
.hint.say b{color:var(--text);background:var(--butter);border-radius:6px;padding:0 4px}
.hint svg.demo{flex:none;width:34px;height:22px;margin-top:-1px}
.hint svg.demo path{fill:none;stroke:var(--marker);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw 2.6s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:60}55%,100%{stroke-dashoffset:0}}
.axkey{grid-area:ax;display:grid;gap:var(--s1);font-size:12.5px;line-height:1.3;color:var(--mute);margin-right:var(--off)}
.axr{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s2);align-items:start}
.tag{display:inline-block;text-align:center;border-radius:7px;background:var(--sky);color:var(--sel-fg);border:2px solid var(--edge);font:800 11px/16px var(--display);height:22px;width:22px;padding-top:1px}
.axr b{color:var(--text);font-weight:800}
.axr .sc{color:var(--mute);font-family:var(--mono);font-size:11.5px}

/* controls */
#ctl{grid-area:ctl;margin-right:var(--off)}
.tools{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.seg{display:flex;background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-md);padding:2px;flex:1 1 124px;min-width:124px;gap:3px}
.seg button{flex:1;min-height:44px;border:0;background:transparent;border-radius:10px;font:700 14px var(--display);color:var(--mute);cursor:pointer;position:relative;overflow:hidden;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--t),color var(--t)}
.seg button svg.i{width:18px;height:18px}
.seg button.on{color:var(--sel-fg)}
.seg{position:relative}
.seg::before{content:'';position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 7px)/2);border-radius:10px;background:var(--sel-bg);box-shadow:inset 0 0 0 2px var(--edge);transform:translateX(0);transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
.seg[data-on="box"]::before{transform:translateX(calc(100% + 3px))}
.seg button svg.i{transition:transform .2s}
.seg button.on svg.i{animation:segpop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes segpop{0%{transform:scale(.55) rotate(-18deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.seg::before{transition:none}.seg button.on svg.i{animation:none}}
.btn{min-height:44px;border-radius:var(--r-md);border:var(--bw) solid var(--edge);background:var(--surface);color:var(--text);padding:0 16px;font:700 15px var(--display);cursor:pointer;box-shadow:var(--sh-sm);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t),color var(--t);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shade)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;background:var(--surface3);border-color:var(--mute);color:var(--mute)}
.btn.sq{width:44px;padding:0;flex:none}
.btn.gold{background:var(--gold);color:var(--gold-ink);font-size:16px}
.btn.gold:disabled{background:var(--surface3);color:var(--mute)}
.btn.block{width:100%}
.btn.on{background:var(--sel-bg);color:var(--sel-fg)}
.btn.ok{background:var(--hit);color:#06240f}
.btn svg.i{width:20px;height:20px}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:rip .55s ease-out forwards;pointer-events:none}
.gold .rip{background:rgba(255,255,255,.6)}
@keyframes rip{to{transform:scale(1);opacity:0}}
.ink{margin-top:var(--s3);background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh);padding:10px 12px;margin-right:var(--off)}
#ctl{margin-right:0}
.tools{margin-right:var(--off)}
.inkrow{display:flex;align-items:center;gap:var(--s3)}
.inkicon{flex:none;width:40px;height:40px;border-radius:12px;background:var(--sky);border:2px solid var(--edge);display:grid;place-items:center;color:var(--sel-fg)}
.inkicon svg.i{width:22px;height:22px}
.meter{flex:1;min-width:0}
.meter .lbl{display:flex;justify-content:space-between;font:700 var(--fs-xs) var(--display);color:var(--mute);margin-bottom:5px;gap:var(--s2)}
.meter .lbl b{color:var(--text);font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:14px;border-radius:999px;background:var(--surface3);border:2px solid var(--edge);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .08s linear,background var(--t);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.meter.low .bar{animation:wob .42s ease-in-out infinite}
.meter.low .bar i{background:#ff8a3d}
.meter.full .bar{animation:flash .5s ease-out 2}
.meter.full .bar i{background:var(--miss)}
@keyframes wob{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.6px)}75%{transform:translateX(1.6px)}}
@keyframes flash{50%{background:var(--miss)}}
.pts{text-align:center;min-width:76px;background:var(--butter);border:2px solid var(--edge);border-radius:var(--r-md);padding:3px 8px 4px}
.pts .big{font:700 30px/1.05 var(--display);font-variant-numeric:tabular-nums}
.pts .sm{font:700 11px var(--display);color:var(--mute);white-space:nowrap}
.pts .big.tick{animation:bump .25s var(--ease)}
.spans{margin-top:var(--s2);font:12px/1.4 var(--mono);color:var(--mute)}
.spans b{color:var(--text);font-weight:700}
.empty{color:var(--mute);font-size:var(--fs-sm);line-height:1.35}

/* dock */
.dock{grid-area:dock;position:sticky;bottom:0;z-index:5;padding:var(--s2) 0 max(6px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,var(--bg-clear),var(--bg) 26%)}
#app.wide .dock{position:static;background:none;padding:0}
.dockrow{display:flex;gap:var(--s2);align-items:center;margin-right:var(--off)}
.nudge{display:flex;gap:6px;flex:none}
.dockrow .gold{flex:1;min-width:84px;padding:0 10px;white-space:nowrap}

/* reveal */
.card{background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh);padding:var(--s4);margin:var(--s3) var(--off) 0 0}
#revealPanel .card{margin-top:var(--s3)}
.revhead{display:flex;justify-content:space-between;align-items:center;gap:6px var(--s3);flex-wrap:wrap}
.revres{font:700 26px/1.1 var(--display)}
.revres.hit{color:var(--hit-ink)} .revres.miss{color:var(--miss-ink)}
.revpts{display:flex;align-items:center;gap:var(--s2);font:700 40px/1 var(--display);font-variant-numeric:tabular-nums}
.revpts small{font:700 12px var(--display);color:var(--mute);margin-left:-4px}
.band{font:400 30px/1 var(--emoji);display:inline-grid;place-items:center;position:relative;min-width:48px;height:48px;border-radius:50%;background:var(--butter);border:2px solid var(--edge)}
.band:empty{background:var(--surface3)}
/* the two top animals are special: a bull glows, a goat wears a crown */
.crowned{position:relative}
.crowned::after{content:"\1F451";position:absolute;left:50%;top:-.5em;font-size:.52em;line-height:1;transform:translateX(-35%) rotate(14deg);pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.glow{filter:drop-shadow(0 0 7px rgba(246,189,47,.95))}
.band.pop.glow,.emojirow span.in.glow{animation:popin .7s var(--ease) forwards,glowpulse 1.6s .7s ease-in-out 2}
@keyframes glowpulse{50%{filter:drop-shadow(0 0 14px rgba(246,189,47,1))}}
.band.pop{animation:popin .7s var(--ease)}
@keyframes popin{0%{transform:scale(0) rotate(-25deg);opacity:0}55%{transform:scale(1.5) rotate(8deg);opacity:1}80%{transform:scale(.9)}100%{transform:scale(1) rotate(0);opacity:1}}
.revsub{color:var(--mute);font-size:var(--fs-sm);margin-top:var(--s1);min-height:18px;font-weight:600}
.revans{font:700 13px var(--display);margin-top:var(--s2);color:var(--text);overflow-wrap:anywhere;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.revans span{color:var(--text);background:var(--butter);border:2px solid var(--edge);border-radius:999px;padding:3px 10px;display:inline-block}
.fact{margin:var(--s3) 0 0;font-size:14.5px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;padding:10px 12px;background:var(--surface2);border-radius:var(--r-md);border:2px dashed var(--edge)}
.fact:empty{display:none}
.fact.on{opacity:1;transform:none}

/* final */
#viewFinal{display:block;max-width:560px;margin:0 auto}
.total{font:700 var(--fs-3xl)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.total small{font:700 20px var(--display);color:var(--mute)}
.total #fTotal{display:inline-block;line-height:1}
.emojirow{display:flex;gap:var(--s2);margin-top:var(--s3);font:400 28px/1 var(--emoji);flex-wrap:wrap}
.emojirow span{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:var(--r-md);background:var(--butter);border:2px solid var(--edge);position:relative;opacity:0;transform:scale(0)}
.emojirow span.in{animation:popin .6s var(--ease) forwards}
.persona{font:700 20px/1.25 var(--display);margin-top:var(--s3)}
.minis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:var(--s3)}
.minis canvas{border-radius:var(--r-sm);border:2px solid var(--edge);width:100%;height:auto;display:block}
.minis div{font:700 11px var(--display);text-align:center;margin-top:3px;color:var(--mute)}
.rows{margin:var(--s3) 0 0;padding:0;list-style:none}
.rows li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:2px dashed var(--surface3);font-size:14px;align-items:start;font-weight:700}
.rows .em{font:400 22px/1 var(--emoji);position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--butter);border:2px solid var(--edge)}
.rows .h,.rows .m{font-family:var(--display);font-weight:700;border-radius:999px;padding:2px 10px;font-size:14px;border:2px solid var(--edge);color:var(--text)}
.rows .h{background:var(--mint)} .rows .m{background:var(--blush)}
.rows small{display:block;color:var(--mute);font-size:12px;margin-top:2px;font-weight:600}
h3{margin:0 0 var(--s2);font:700 var(--fs-md) var(--display)}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:var(--s2)}
.legend li{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);min-width:0;background:var(--surface2);border:2px solid var(--edge);border-radius:var(--r-md);padding:5px 8px 5px 5px}
.legend .em{font:400 24px/1 var(--emoji);flex:none;width:34px;height:34px;display:grid;place-items:center;background:var(--surface);border-radius:50%;border:2px solid var(--edge);position:relative}
.legend li[title]{cursor:help}
.fbrag{color:var(--text);font:700 14px/1.3 var(--display);margin-top:var(--s2);background:var(--butter);border:2px solid var(--edge);border-radius:var(--r-md);padding:6px 10px;display:inline-block}
.legend b{font-family:var(--display);font-weight:700;color:var(--text);font-size:var(--fs-sm);display:block;line-height:1.15}
.legend span.nm{color:var(--mute);font-size:12px;display:block;font-weight:600;line-height:1.2}
.legnote{font-size:12px;color:var(--mute);margin-top:var(--s3)}
pre#share{margin:0;font:15px/1.45 var(--mono),var(--emoji);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface2);border:2px dashed var(--edge);border-radius:var(--r-md);padding:var(--s3);color:var(--text)}
pre#share.flash{animation:sflash .9s ease-out}
@keyframes sflash{0%{box-shadow:0 0 0 4px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
.two{display:flex;gap:var(--s3);margin-top:var(--s3);margin-right:var(--off)}
.card .two{margin-right:0}
.two .btn{flex:1}
.streak{display:flex;gap:var(--s2);color:var(--text);font:700 12px var(--display);margin-top:var(--s3);flex-wrap:wrap;align-items:center}
.streak>span{background:var(--surface2);border:2px solid var(--edge);border-radius:999px;padding:5px 11px}
.streak .fl{display:inline-flex;align-items:center;gap:4px;background:var(--butter)}
.streak svg{width:16px;height:16px;fill:var(--flame);animation:flick 1.1s ease-in-out infinite alternate;transform-origin:50% 90%}
.cd{font:700 var(--fs-xs) var(--display);color:var(--mute);text-align:center;margin-top:var(--s3)}

/* how-to */
#how{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:20;animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}}
#how .sheet{background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-xl);box-shadow:var(--sh);max-width:480px;width:calc(100% - var(--off));margin-right:var(--off);max-height:calc(100% - var(--off));display:flex;flex-direction:column;overflow:hidden;animation:rise .35s var(--ease)}
#how .sbody{overflow:auto;overscroll-behavior:contain;padding:var(--s4) var(--s4) 6px;flex:1 1 auto;min-height:0}
#how .sfoot{flex:none;padding:var(--s3) var(--s4) var(--s4);border-top:2px dashed var(--surface3)}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
#how .biglogo{height:46px;width:auto;display:block;margin:0 0 var(--s3);color:var(--text)}
#how .bigmark path.loop{stroke-dasharray:200;stroke-dashoffset:200;animation:drawlogo 1.3s .15s ease-out forwards}
@keyframes drawlogo{to{stroke-dashoffset:0}}
#how h2{margin:0 0 var(--s2);font:700 var(--fs-lg) var(--display)}
#how ol{margin:var(--s3) 0;padding:0;list-style:none;counter-reset:st}
#how li{margin:var(--s2) 0;font-size:14.5px;font-weight:600;position:relative;padding-left:38px;min-height:28px;counter-increment:st}
#how ol li::before{content:counter(st);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--lav);border:2px solid var(--edge);font:700 13px/24px var(--display);text-align:center}
#how .legend li{padding-left:5px;margin:0;min-height:0;counter-increment:none;position:static;font-weight:400}
#how svg.demo{width:100%;height:auto;display:block;margin-bottom:var(--s2);border-radius:var(--r-md);background:var(--paper);border:2px solid var(--edge)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;font-size:14px;font-weight:700;border-top:2px dashed var(--surface3)}
.sw small{display:block;color:var(--mute);font-size:12px;font-weight:600}
.sw input{width:44px;height:44px;accent-color:var(--hit-ink);flex:none}
@keyframes shrink{0%,25%{transform:scale(1.35)}65%,100%{transform:scale(.62)}}
.demo-blob{transform-origin:150px 62px;animation:shrink 3s ease-in-out infinite alternate}
.enter{animation:enter .34s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(10px)}}

/* ---- phone mode: chart first. Everything else shrinks, floats over the chart, or hides ---- */
.axbtn,.bartxt{display:none}
#app.phone{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
#app.phone header{min-height:44px;padding:2px 6px 2px 8px;margin-bottom:6px;gap:4px}
#app.phone .logo{height:22px}
#app.phone header .brand{width:23px;overflow:hidden;flex:none}
#app.phone .hdr{gap:4px}
#app.phone .chip{height:30px;padding:0 9px}
#app.phone .iconbtn{width:40px;height:40px}
#app.phone .iconbtn svg.i{width:20px;height:20px}
#app.phone #themeBtn{display:none}   /* dark mode lives in the how-to sheet on phones */
#app.phone .play{gap:6px;grid-template-areas:"kick" "q" "chart" "ink" "tools" "dock"}
#app.phone .kickrow{min-height:24px;gap:8px}
#app.phone #qKick{padding:3px 9px}
#app.phone .pip{height:9px}
#app.phone .axbtn{display:inline-flex;align-items:center;gap:4px;flex:none;height:28px;padding:0 9px 0 6px;border-radius:999px;border:2px solid var(--edge);background:var(--sky);color:var(--sel-fg);font:800 12px var(--display);cursor:pointer}
#app.phone .axbtn svg.i{width:15px;height:15px;stroke-width:2.6}
#app.phone .qcard{background:none;border:0;box-shadow:none;padding:0 2px;margin-right:0}
#app.phone .qcard h1{font-size:22px}
#app.phone .qcard p{margin:1px 0 0;font-size:13px;line-height:1.25}
#app.phone #ctl,#app.phone #playPanel{display:contents}
#app.phone #ctl{margin:0}
#app.phone .ink{grid-area:ink;margin:0 var(--off) 0 0;padding:0;border:0;box-shadow:none;background:none}
#app.phone .inkicon,#app.phone .spans,#app.phone .meter .lbl{display:none!important}
#app.phone .inkrow{gap:8px}
#app.phone .bar{position:relative;height:30px;border-width:var(--bw)}
#app.phone .bar i{box-shadow:none}
#app.phone .bartxt{display:block;position:absolute;inset:0;text-align:center;font:800 14px/26px var(--display);color:var(--text);font-variant-numeric:tabular-nums;pointer-events:none}
#app.phone .pts{min-width:66px;padding:1px 8px 2px;border-radius:12px}
#app.phone .pts .big{font-size:22px}
#app.phone .pts .sm{font-size:10px}
#app.phone .tools{grid-area:tools;flex-wrap:nowrap;gap:6px;margin-right:var(--off)}
#app.phone .seg{flex:none;min-width:0;padding:2px}
#app.phone .seg button{font-size:0;gap:0;min-height:40px;width:42px;padding:0}
#app.phone .seg button svg.i{width:21px;height:21px}
#app.phone .tools .btn.sq{width:42px;min-height:42px}
#app.phone #trimBtn{display:none}
#app.phone .tools #lockBtn{flex:1;min-width:84px;min-height:46px;padding:0 10px}
#app.phone #dockPlay{display:none}
#app.phone .dock{grid-area:dock;padding:0;background:none;position:sticky;bottom:0}
#app.phone .dock:has(#dockRev:not(.hidden)){padding:10px 0 2px;background:linear-gradient(to bottom,var(--bg-clear),var(--bg) 30%)}
#app.phone #revealPanel{grid-area:ink}
#app.phone #revealPanel .card{margin-top:0;padding:12px}
/* hint and axis notes float over the chart */
#app.phone .hint{position:absolute;left:8px;right:8px;bottom:50px;z-index:3;margin:0;min-height:0;justify-content:center;text-align:center;pointer-events:none;background:var(--surface);border:2px solid var(--edge);border-radius:12px;padding:5px 9px;font-size:12.5px;animation:hintfade 6s ease forwards}
#app.phone .hint.say{animation:none}
#app.phone .hint:empty{display:none}
#app.phone .hint svg.demo{display:none}
@keyframes hintfade{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
#app.phone .axkey{display:none;position:absolute;left:8px;right:8px;top:8px;z-index:4;margin:0;padding:8px 10px;background:var(--surface);border:var(--bw) solid var(--edge);border-radius:12px;box-shadow:var(--sh-sm);color:var(--text)}
#app.phone .axkey.open{display:grid}
#app.phone .tools #lockBtn{white-space:nowrap}
@media (max-width:340px){ #app.phone .seg button{width:36px} #app.phone .tools .btn.sq{width:38px} #app.phone .tools{gap:4px} #app.phone .tools #lockBtn{min-width:0;padding:0 6px;font-size:15px;gap:4px} }

/* small / short screens */
@media (max-height:600px){.qcard p{font-size:12px;line-height:1.2}}
@media (max-width:400px){:root{--bw:2.5px;--off:3px}}
@media (max-width:430px){.chip .lab{display:none}}
@media (max-width:345px){ header{gap:4px;padding:3px 6px 3px 8px} .logo{height:22px} .hdr{gap:4px} .chip{padding:0 8px;gap:4px} #app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}}
@media (max-width:380px){.qcard h1{font-size:23px} .inkicon{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .demo-blob{animation:none;transform:scale(.8)} .hint svg.demo path{animation:none;stroke-dashoffset:0}
  #how .bigmark path.loop{animation:none;stroke-dashoffset:0}
  .emojirow span{opacity:1;transform:none}
  .glow{animation:none!important}
}

.streak .frz{display:inline-flex;align-items:center;gap:4px}
.streak .frz svg{width:16px;height:16px;fill:none;stroke:currentColor;animation:none}
.streak .frz-note{background:var(--surface2)}