/* Professor Porcupine and Friends: clay look shared by the TV and phone screens. */
:root{--bg:#FDF4E1;--bg2:#F4E4C8;--card:#FFF9EE;--ink:#3A2A1E;--muted:#6B5645;--line:#EAD8B8;
  --coral:#FF6B4A;--shelf:#B84A2E;--sky:#4E8FD9;--leaf:#5DAE5B;--sun:#F2B41E;--grape:#8E6BD8;
  --slab:inset 0 3px 0 rgba(255,255,255,.9),inset 0 -6px 0 rgba(90,60,30,.05),0 7px 0 var(--line),0 18px 30px rgba(40,30,20,.08)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:600 16px/1.45 'Nunito',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
h1,h2,h3,.disp{font-family:'Baloo 2','Nunito',sans-serif;line-height:1.1;margin:0}
.slab{background:var(--card);border-radius:24px;box-shadow:var(--slab)}
.btn{border:0;cursor:pointer;border-radius:999px;padding:14px 26px;font:800 18px 'Baloo 2','Nunito',sans-serif;background:var(--coral);color:var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.16),0 5px 0 var(--shelf),0 12px 20px rgba(40,30,20,.14);transition:transform .1s}
.btn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 1px 0 var(--shelf)}
.btn.soft{background:var(--card);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--line)}
.btn:focus-visible,button:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
.chip{display:inline-block;border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px;background:var(--bg2)}
.token{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#F9EFDC;box-shadow:0 3px 0 var(--line)}
.ghost{filter:grayscale(.6) brightness(1.15);opacity:.7}
.timer{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden}
.timer i{display:block;height:100%;background:var(--coral);border-radius:99px;transition:width .25s linear}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}