/* Bot-Man: companion mini game for the COS Grok Edition deck. No build. */
:root{--paper:#f6f3ec;--ink:#111;--mute:#6b665e;--line:#e6e4df;--teal:#2bb8a8;--orange:#f0783c;--purple:#8a6ad4;--blob:#0a0a0c;--teal-ink:#0f766b;
  --f-display:"Clash Display","Satoshi",system-ui,sans-serif;--f-body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:var(--paper);color:var(--ink)}
body{font-family:var(--f-body);display:flex;flex-direction:column;align-items:center;min-height:100dvh;height:100dvh;
  padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));gap:8px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.top{width:100%;max-width:980px;display:flex;align-items:center;gap:.4em 1em;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.45em}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1;letter-spacing:-.02em}
.tag{font-family:var(--f-mono);font-size:.8rem;color:var(--mute);letter-spacing:.04em}
.back,.back-link{font-family:var(--f-mono);font-size:.8rem;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}
.top .links{order:3;margin-left:auto;display:flex;gap:1.1em}
.mini-bot{width:26px;height:24px;background:var(--blob);border-radius:54% 46% 50% 50%/56% 52% 48% 44%;position:relative;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 30%,transparent)}
.mini-bot::before,.mini-bot::after{content:"";position:absolute;top:8px;width:4px;height:7px;border-radius:50%;background:var(--teal)}
.mini-bot::before{left:7px}.mini-bot::after{right:7px}
.hud{width:100%;max-width:980px;display:flex;align-items:center;gap:.5em 1.4em;font-family:var(--f-mono);font-size:.82rem;color:var(--mute);flex-wrap:wrap}
.hud b{color:var(--ink);font-weight:500;font-size:1.05rem}
.lives{display:inline-flex;gap:5px;min-width:3em}
.lives i{width:14px;height:13px;background:var(--blob);border-radius:54% 46% 50% 50%/56% 52% 48% 44%;display:inline-block}
.hud-btns{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.hud-btn{font:inherit;color:var(--ink);background:none;border:1.5px solid var(--ink);border-radius:999px;padding:.25em .9em;cursor:pointer;line-height:1.2}
.hud-btn.sq{width:2.1em;height:2.1em;padding:0;display:inline-grid;place-items:center;font-weight:500}
.hud-btn svg{width:1.1em;height:1.1em}
#sndBtn[aria-pressed=false] .on,#sndBtn[aria-pressed=true] .off{display:none}
#sndBtn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.day{font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.stage{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:980px;display:flex;align-items:center;justify-content:center}
canvas{display:block;touch-action:none;border-radius:14px;background:var(--paper)}
.panel{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(92%,420px);background:var(--paper);border:1.5px solid var(--ink);border-radius:20px;
  padding:clamp(16px,3vw,26px);text-align:center;box-shadow:0 14px 40px color-mix(in srgb,var(--teal) 35%,transparent);display:flex;flex-direction:column;gap:.7em;align-items:center}
.panel{max-height:calc(100% - 8px);overflow:auto;width:min(94%,460px)}
.panel .actions .btn{font-size:.96rem;padding:.55em 1.15em}
.panel[hidden]{display:none}
.panel.best .kicker{color:var(--teal-ink);font-weight:500}
.panel.best .kicker::before{background:var(--teal)}
.panel.best h2{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.legend{list-style:none;display:grid;gap:.45em;text-align:left;font-size:.84rem;line-height:1.3;width:100%}
.legend li{display:flex;align-items:center;gap:.6em}
.legend .ic{display:inline-flex;gap:1px;flex:none;min-width:6.4em}
.legend svg{width:1.3em;height:1.3em}
.legend .h0{width:1.6em;height:1.6em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;width:100%}
.stats div{border:1.5px solid var(--line);border-radius:12px;padding:.45em .3em}
.stats dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.stats dd{font-family:var(--f-display);font-weight:600;font-size:1.3rem}
.brag{font-family:var(--f-mono);font-size:.82rem!important;color:var(--teal-ink)}
.demo-tag{position:absolute;top:8px;left:50%;translate:-50% 0;font-family:var(--f-mono);font-size:.78rem;background:var(--blob);color:var(--paper);
  border-radius:999px;padding:.35em 1em;pointer-events:none;white-space:nowrap}
.demo-tag::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--orange);margin-right:.55em;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.demo-tag[hidden]{display:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.g0{color:var(--purple)}.g1{color:var(--mute)}.g2{color:var(--orange)}.g3{color:#2a2a31}.h0{color:var(--teal)}.h1{color:var(--orange)}
.rules{margin:auto;width:min(94vw,760px);max-height:92dvh;overflow:auto;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:20px;
  padding:clamp(16px,3vw,28px);box-shadow:0 14px 40px color-mix(in srgb,var(--teal) 35%,transparent)}
.rules::backdrop{background:color-mix(in srgb,var(--blob) 45%,transparent)}
.rules h2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,3.6vw,1.9rem);line-height:1.05;letter-spacing:-.02em;margin:.35em 0 .5em}
.rules h3{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:.9em 0 .35em}
.rules p,.rules li{font-size:.9rem;line-height:1.4}
.r-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.r-list,.r-icons,.r-ghosts{list-style:none;display:grid;gap:.3em}
.r-icons{grid-template-columns:repeat(5,auto);justify-content:start;gap:.2em .9em}
.r-icons li{display:flex;flex-direction:column;align-items:center;font-size:.76rem;font-family:var(--f-mono)}
.r-icons svg{width:30px;height:30px}
.r-ghosts li,.r-row{display:flex;gap:.6em;align-items:flex-start}
.r-ghosts svg,.r-row svg{width:24px;height:24px;flex:none;margin-top:-2px}
.r-note{color:var(--mute);font-size:.82rem!important;margin-top:.4em}
kbd{font-family:var(--f-mono);font-size:.8em;border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:6px;padding:0 .35em;background:#fff}
#rClose{margin:1.1em auto 0;display:flex}
.kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.6em}
.kicker::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--orange)}
.panel h2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,4.4vw,2.1rem);line-height:1;letter-spacing:-.02em}
.panel p{font-size:.95rem;line-height:1.4}
.actions{display:flex;flex-wrap:wrap;gap:.6em;justify-content:center}
.btn{font-family:var(--f-display);font-weight:600;font-size:1.02rem;border-radius:999px;padding:.65em 1.3em;cursor:pointer;text-decoration:none;
  background:var(--blob);color:var(--paper);border:1.5px solid var(--blob);display:inline-flex;align-items:center;gap:.5em}
.btn::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--teal)}
.btn.alt{background:var(--paper);color:var(--blob)}
.btn.alt::before{background:var(--orange)}
.btn[hidden]{display:none}
.pad{display:none;grid-template:repeat(3,clamp(44px,7dvh,60px))/repeat(3,clamp(44px,7dvh,60px));gap:6px;flex:none}
.pad button{font-size:18px;color:var(--paper);background:var(--blob);border:0;border-radius:16px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.pad button:active{background:var(--teal-ink)}
.pad .up{grid-area:1/2}.pad .left{grid-area:2/1}.pad .right{grid-area:2/3}.pad .down{grid-area:3/2}
.how{max-width:72ch;font-size:.82rem;line-height:1.45;color:var(--mute);text-align:center;flex:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the challenge: tier meter, medals, unlock toast */
.meter{width:100%;max-width:980px;display:flex;align-items:center;gap:.4em .8em;font-family:var(--f-mono);font-size:.78rem;color:var(--mute);flex-wrap:wrap}
.m-lbl{letter-spacing:.12em;text-transform:uppercase;font-size:.68rem}
.pips{display:inline-flex;gap:3px}
.pips i{font-style:normal;width:1.75em;height:1.6em;display:inline-grid;place-items:center;border:1.5px solid var(--line);border-radius:7px;font-size:.72rem;color:var(--mute);position:relative}
.pips i.on{background:var(--teal);border-color:var(--teal);color:var(--blob)}
.pips i.cur{border-color:var(--ink);color:var(--ink)}
.pips .tb::after,.pips .ts::after,.pips .tg::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 1.5px var(--paper)}
.pips .ts::after{background:var(--purple)}.pips .tg::after{background:var(--teal-ink)}
.m-txt{color:var(--ink);font-weight:500}
.m-best{margin-left:auto;color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:.1em .7em .1em .5em;display:inline-flex;align-items:center;gap:.4em}
.m-best::before{content:"";width:.65em;height:.65em;border-radius:50%;background:var(--orange)}
.m-best[data-t="2"]::before{background:var(--purple)}.m-best[data-t="3"]::before{background:var(--teal)}
.medal{--c:var(--orange);width:22px;height:22px;flex:none;border-radius:50%;background:var(--blob);position:relative;display:inline-block;
  box-shadow:0 0 0 2.5px var(--paper),0 0 0 5px var(--c)}
.medal[data-t="2"]{--c:var(--purple)}.medal[data-t="3"]{--c:var(--teal)}
.medal::before,.medal::after{content:"";position:absolute;top:34%;width:14%;height:30%;border-radius:50%;background:var(--c)}
.medal::before{left:30%}.medal::after{right:30%}
.medal.big{width:58px;height:58px;box-shadow:0 0 0 4px var(--paper),0 0 0 8px var(--c),0 0 26px 8px color-mix(in srgb,var(--c) 45%,transparent);margin:6px 0 2px;animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.legend .tiers{gap:9px;padding-left:4px}
.legend .tiers .medal{width:16px;height:16px;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--c)}
.panel.won{box-shadow:0 14px 50px color-mix(in srgb,var(--teal) 55%,transparent)}
.panel.won .kicker{color:var(--teal-ink);font-weight:500}.panel.won .kicker::before{background:var(--teal)}
.panel.won h2{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.toast{position:absolute;top:10px;left:50%;translate:-50% 0;z-index:3;display:flex;align-items:center;gap:.8em;background:var(--blob);color:var(--paper);border-radius:999px;
  padding:.5em 1.2em .5em .7em;font-family:var(--f-mono);font-size:.8rem;pointer-events:none;white-space:nowrap;box-shadow:0 10px 30px color-mix(in srgb,var(--teal) 45%,transparent);animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.toast b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.toast .medal{box-shadow:0 0 0 2.5px var(--blob),0 0 0 5px var(--c)}
.r-challenge{border-top:1.5px solid var(--line);margin-top:1em;padding-top:.2em}
.r-tiers{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:.4em}
.r-tiers li{display:flex;gap:.7em;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:.7em .8em}
.r-tiers .medal{margin-top:4px}
.r-tiers b{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;margin-bottom:.15em}
@media (pointer:coarse),(max-width:760px){
  .pad{display:grid}
  .how{font-size:.74rem}
}
@media (max-width:760px){
  body{gap:6px}
  .tag{display:none}
  .hud{font-size:.76rem;gap:.4em .9em}
  .legend{font-size:.78rem}
  .panel .kicker{letter-spacing:.08em;font-size:.66rem}
  .r-grid,.r-tiers{grid-template-columns:1fr}
  .meter{font-size:.72rem;gap:.35em .6em}
  .m-lbl{display:none}
  .panel p{font-size:.88rem}
  .how{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-height:520px) and (min-width:761px){.how{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.rush{position:absolute;top:22%;left:50%;translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.3em;background:var(--blob);color:var(--paper);border-radius:18px;padding:.8em 1.4em;text-align:center;width:max-content;max-width:92%;
  box-shadow:0 0 0 3px var(--orange),0 14px 40px color-mix(in srgb,var(--orange) 45%,transparent);pointer-events:none;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.rush b{font-family:var(--f-display);font-weight:600;font-size:clamp(1.8rem,7vw,3rem);letter-spacing:.04em;line-height:1;color:var(--orange)}
.rush span{font-family:var(--f-mono);font-size:.76rem;max-width:34ch}
.day.gr{color:var(--orange);font-weight:500}
.iq{font-family:var(--f-mono);font-size:.78rem!important;color:var(--ink);border:1.5px dashed var(--purple);border-radius:12px;padding:.45em .7em}
.r-tiers i{display:block;font-style:normal;color:var(--teal-ink);margin-top:.3em}
.prizes .actions{display:flex;gap:.6em;flex-wrap:wrap;margin-top:1em}
.prizes .r-tiers{grid-template-columns:1fr}
.btn.sm{font-size:.82rem;padding:.35em .9em;margin-left:.4em;vertical-align:middle}
canvas.ptr{cursor:none}