/* Scribble Frenzy: Showdown: a page torn from a bright white school notebook. Single paper theme by choice. */
:root{
  --paper:#ffffff; --rule:#c9dcf2; --margin:#f4a7b2;
  --ink:#24263b; --ink-soft:#5a5d75; --pencil:#a3a5b8;
  --hl-yellow:#ffe14d; --hl-pink:#ff9fd0; --hl-teal:#9fe6e1; --marker-red:#e8475f;
  --team-sun:#ffd23f; --team-moon:#dccbff;
  --display:'Permanent Marker','Marker Felt','Comic Sans MS',cursive;
  --body:'Patrick Hand','Comic Sans MS','Segoe Print',cursive;
  --sketch:255px 15px 225px 15px/15px 225px 15px 255px;
  --sketch-2:15px 225px 15px 255px/255px 15px 225px 15px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background-color:var(--paper);color:var(--ink)}
body{font-family:var(--body);font-size:18px;line-height:1.45;
  background-image:linear-gradient(90deg,transparent 0 44px,var(--margin) 44px 46px,transparent 46px),repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:40px}
.wrap{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 16px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,5vw,2.8rem);line-height:1;margin:0;transform:rotate(-1.2deg)}
h1 span{background:linear-gradient(transparent 45%,var(--hl-pink) 45% 88%,transparent 88%);padding:0 6px}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:1.15rem;font-variant-numeric:tabular-nums}
.pill{border:2px solid var(--ink);border-radius:var(--sketch);padding:0 12px;background:var(--paper);white-space:nowrap}
.pill.room{letter-spacing:.12em}
.pill.warn{background:var(--hl-pink)}
.clock{font-family:var(--display);border:2px solid var(--ink);border-radius:var(--sketch-2);padding:0 12px;min-width:4em;text-align:center;background:var(--paper)}
.clock.warn{background:var(--hl-pink)}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.squad{background:#fff;border:2px solid var(--ink);border-radius:var(--sketch);padding:10px 16px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;box-shadow:3px 4px 0 rgba(36,38,59,.1)}
.squad:nth-child(2){border-radius:var(--sketch-2)}
.squad-head{display:flex;align-items:center;gap:10px}
.sn,.rcol h4 span{font-family:var(--display);font-weight:400;background:linear-gradient(transparent 50%,var(--hl) 50% 90%,transparent 90%);padding:0 4px}
.squad-head .sn{font-size:1.3rem}
.mem{display:flex;align-items:center;gap:8px;min-width:0}
.mem.ko .blob{opacity:.35}
.mem.ko .nm{color:var(--ink-soft)}
.mem .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:1.1rem}
.mem .st,.mem .ctl{color:var(--ink-soft);font-size:.95rem;white-space:nowrap}
.mem .earn{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:1.05rem}
.hearts{color:var(--marker-red);font-size:.95rem;letter-spacing:1px}
.hearts .e{color:var(--pencil)}
.empty{color:var(--ink-soft)}
.blob{width:20px;height:20px;border-radius:50% 45% 55% 50%;flex:none;border:2px solid var(--ink)}
.coins{margin-left:auto;font-family:var(--display);font-size:1.6rem;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.coin{width:20px;height:20px;border-radius:50% 46% 52% 48%;background:var(--hl-yellow);border:2px solid var(--ink);position:relative;flex:none}
.coin::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:10px;border-left:2px solid var(--ink)}
.stage{position:relative;border:2px solid var(--ink);border-radius:var(--sketch-2);background:var(--paper);padding:6px;box-shadow:4px 5px 0 rgba(36,38,59,.12)}
canvas{display:block;width:100%;height:auto;border-radius:6px;touch-action:none;max-width:100%;outline:none}
.overlay{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;background:rgba(36,38,59,.28);border-radius:6px;overflow:auto;padding:14px}
.panel{background-color:var(--paper);background-image:linear-gradient(90deg,transparent 0 30px,var(--margin) 30px 32px,transparent 32px),repeating-linear-gradient(180deg,transparent 0 29px,var(--rule) 29px 30px);
  border:2px solid var(--ink);border-radius:var(--sketch);padding:18px 22px 20px 46px;width:min(560px,100%);display:flex;flex-direction:column;gap:12px;margin:auto;transform:rotate(-.4deg);box-shadow:5px 6px 0 rgba(36,38,59,.2)}
.panel.wide{width:min(720px,100%)}
.panel h2{font-family:var(--display);font-weight:400;font-size:1.75rem;line-height:1.1;margin:0}
.panel p{margin:0;color:var(--ink-soft)}
label.lbl{font-size:1rem;color:var(--ink-soft)}
.field{display:flex;flex-direction:column;gap:4px}
input.txt{font:inherit;font-size:1.25rem;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:4px 6px;background:transparent;color:var(--ink);min-width:0;width:100%}
input.txt:focus-visible{outline:none;background:linear-gradient(transparent 60%,var(--hl-yellow) 60%)}
input.code{text-transform:uppercase;letter-spacing:.3em;font-family:var(--display);text-align:center}
.joinrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:1rem;border:1.5px solid var(--ink);border-radius:var(--sketch);background:#fff;padding:0 10px;cursor:pointer}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-soft)}
.or::before,.or::after{content:"";flex:1;border-top:2px dashed var(--pencil)}
.slot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.slot .nm{min-width:6em;font-size:1.1rem}
.slot .grp{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{font:inherit;font-size:1.05rem;border:2px solid transparent;background:transparent;color:var(--ink-soft);padding:0 10px;border-radius:var(--sketch);cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--hl-yellow)}
.seg button[aria-pressed="true"].sun{background:var(--team-sun)}
.seg button[aria-pressed="true"].moon{background:var(--team-moon)}
button:focus-visible{outline:3px dashed var(--marker-red);outline-offset:3px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.go{font-family:var(--display);font-size:1.25rem;border:2px solid var(--ink);cursor:pointer;background:var(--hl-pink);color:var(--ink);border-radius:var(--sketch);padding:6px 22px;box-shadow:3px 3px 0 var(--ink);flex:1}
.go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.go:disabled,.ghost:disabled{opacity:.45;cursor:not-allowed}
.ghost{font:inherit;font-size:1.15rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:var(--sketch-2);padding:4px 18px;cursor:pointer}
.ghost.small{font-size:1rem;padding:2px 12px}
.linkbtn{font:inherit;font-size:1.05rem;background:none;border:0;color:var(--ink);text-decoration:underline wavy var(--marker-red);text-underline-offset:4px;cursor:pointer;padding:2px 0}
.err{color:var(--marker-red);font-size:1.05rem;min-height:1.3em}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:var(--sketch-2);padding:6px 16px}
.codebox b{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1.1;letter-spacing:.18em;background:linear-gradient(transparent 50%,var(--hl-yellow) 50% 90%,transparent 90%)}
.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rcol{background:#fff;border:2px solid var(--ink);border-radius:var(--sketch);padding:6px 12px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.rcol:nth-child(2){border-radius:var(--sketch-2)}
.rcol h4{margin:0;font-size:1.1rem;font-weight:400}
.rp{display:flex;align-items:center;gap:7px;min-width:0}
.rp .blob{width:16px;height:16px}
.rp b{font-weight:400;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rp small{color:var(--ink-soft);font-size:.95rem;margin-left:auto;white-space:nowrap}
.watch,.session{color:var(--ink-soft)}
.hostopts{display:flex;flex-direction:column;gap:8px}
.gamepick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gamepick button{font:inherit;text-align:left;border:2px solid var(--ink);border-radius:var(--sketch);background:#fff;padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;gap:0}
.gamepick button b{font-family:var(--display);font-weight:400;font-size:1.2rem}
.gamepick button span{color:var(--ink-soft);font-size:1rem}
.gamepick button[aria-pressed="true"]{background:var(--hl-yellow);box-shadow:3px 3px 0 var(--ink)}
.res{display:flex;flex-direction:column;gap:4px}
.rrow{display:grid;grid-template-columns:2.8em 20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:2px 4px;border-bottom:2px dashed var(--rule)}
.rrow .pl{font-family:var(--display);font-size:1.1rem}
.rrow .how{font-size:.95rem;color:var(--ink-soft)}
.rrow .plus{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{display:inline-block;font-size:.85rem;border:1.5px solid var(--ink);border-radius:var(--sketch);padding:0 6px;margin-left:6px;vertical-align:1px;line-height:1.3}
.tag.sun{background:var(--team-sun)}.tag.moon{background:var(--team-moon)}
.tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tally div{border:2px solid var(--ink);border-radius:var(--sketch);padding:4px 12px;display:flex;align-items:center;justify-content:space-between;font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.tally .sun{background:var(--team-sun)}.tally .moon{background:var(--team-moon)}
.tally small{font-family:var(--body);font-size:.95rem;display:block}
.wait{color:var(--ink-soft);text-align:center;flex:1;font-size:1.1rem}
.ghostbar{border:2px dashed var(--ink);border-radius:var(--sketch);background:#f4f6fa;padding:8px 14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.ghostbar .act{border:1.5px solid var(--ink);border-radius:var(--sketch);padding:0 10px;background:#fff}
.ghostbar .act.ready{background:var(--hl-yellow)}
.pad{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px 8px;user-select:none;-webkit-user-select:none}
.stick{width:140px;height:140px;border-radius:50% 47% 52% 49%;background:#fff;border:2px solid var(--ink);position:relative;touch-action:none;flex:none}
.knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50% 46% 53% 48%;background:var(--ink)}
.padbtns{display:flex;gap:14px;align-items:center}
.fire{width:104px;height:104px;border-radius:50% 46% 54% 48%;border:2px solid var(--ink);background:var(--hl-pink);color:var(--ink);font-family:var(--display);font-size:1.3rem;box-shadow:4px 4px 0 var(--ink);touch-action:none;flex:none;cursor:pointer}
.fire.help{background:var(--team-moon);width:88px;height:88px;font-size:1.1rem}
.fire.down{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:#fff;border:2px solid var(--ink);border-radius:var(--sketch);padding:10px 14px 12px;min-width:0}
.card:nth-child(2){border-radius:var(--sketch-2)}
.card h3{font-family:var(--display);font-weight:400;font-size:1.2rem;margin:0 0 4px}
.card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px}
.card dt{color:var(--ink-soft)}
.card dd{margin:0}
.card ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:2px}
kbd{font-family:var(--body);font-size:.95rem;border:1.5px solid var(--ink);border-radius:var(--sketch);padding:0 6px;background:var(--paper)}
@media (max-width:760px){.help{grid-template-columns:1fr}body.in-game .help{display:none}}
.tip{margin:0;color:var(--ink-soft);text-align:center}
@media (max-width:560px){.tally,.roster,.gamepick{grid-template-columns:1fr}
  .board{gap:8px}.squad{padding:6px 10px 8px}.squad-head .sn{font-size:1rem}.coins{font-size:1.25rem}.mem .ctl,.mem .st,.mem .earn,.hearts{display:none}.mem .nm{font-size:.95rem}
  .ghostbar{font-size:1rem;padding:6px 10px}.stick{width:120px;height:120px}.fire{width:90px;height:90px}.panel{padding-left:40px}}
@media (prefers-reduced-motion:reduce){.go:active,.fire.down{transform:none}h1,.panel{transform:none}}
/* Phones held sideways during a game: arena fills the screen, controls float over its corners. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body.in-game{padding-top:4px;padding-bottom:4px}
  body.in-game header,body.in-game .board,body.in-game .help,body.in-game .tip{display:none}
  body.in-game .stage{padding:2px;box-shadow:none}
  body.in-game canvas{height:calc(100svh - 14px);width:auto;max-width:100%;margin:0 auto}
  body.in-game .pad{position:fixed;left:0;right:0;bottom:0;padding:8px max(14px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));pointer-events:none}
  body.in-game .pad>*{pointer-events:auto}
  body.in-game .stick{width:110px;height:110px;opacity:.85}
  body.in-game .fire{width:78px;height:78px;font-size:1rem;opacity:.9}
  body.in-game .fire.help{width:68px;height:68px}
  body.in-game .ghostbar{position:fixed;top:max(6px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);font-size:.95rem;padding:4px 10px;max-width:90vw}
}
/* Narrow screens: menus (home, lobby, results) sit in the page flow instead of squeezing into the small arena. */
@media (max-width:700px){
  .stage:has(.overlay:not([hidden])) canvas{display:none}
  .stage:has(.overlay:not([hidden])){padding:0;border:0;box-shadow:none;background:transparent}
  .overlay{position:static;inset:auto;background:none;padding:4px 0}
  .panel{transform:none;width:100%}
}
body:not(.in-game) .pad{display:none}

/* How-to-play card shown during practice, above the arena so the game stays visible. */
.howto{background:#fff;border:2px solid var(--ink);border-radius:var(--sketch);padding:10px 16px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:4px 5px 0 rgba(36,38,59,.12)}
.howhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.howhead h2{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.1;margin:0;background:linear-gradient(transparent 50%,var(--hl-teal) 50% 90%,transparent 90%);padding:0 4px}
.howclock{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.howhead .linkbtn{margin-left:auto}
.howbody{display:flex;flex-direction:column;gap:4px}
.howto .goal{margin:0;font-size:1.15rem}
.steps{margin:0;padding-left:1.4em;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px}
.steps b{font-weight:400;background:linear-gradient(transparent 55%,var(--hl-yellow) 55% 92%,transparent 92%)}
.howfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.readyline{color:var(--ink-soft);flex:1 1 12em}
.howfoot .go{flex:0 0 auto}
.howfoot .go[aria-pressed="true"]{background:var(--hl-teal)}
.howto.min .howbody{display:none}
.howto .respawn{margin:2px 0 0;padding:2px 10px;border:2px dashed var(--ink);border-radius:var(--sketch-2);background:#f4f6fa}
.howto .respawn b{font-weight:400;background:linear-gradient(transparent 55%,var(--hl-teal) 55% 92%,transparent 92%)}
.readylist{display:flex;flex-wrap:wrap;gap:6px}
.rchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);border-radius:var(--sketch);padding:0 10px 0 6px;background:#fff;color:var(--ink-soft);font-size:1rem;white-space:nowrap}
.rchip .blob{width:14px;height:14px;border-width:1.5px}
.rchip.on{background:var(--hl-yellow);color:var(--ink)}
.rchip .mark{font-family:var(--display)}
@media (max-width:760px){.steps{grid-template-columns:1fr}.howhead h2{font-size:1.25rem}.howto{padding:8px 12px 10px}}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body.in-game .howto{position:fixed;top:max(4px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(720px,64vw);max-height:58svh;overflow:auto;z-index:5;font-size:13px;line-height:1.3;padding:4px 10px 6px;gap:3px;background:rgba(255,255,255,.94)}
  body.in-game .howto .howhead h2{font-size:15px;white-space:nowrap}
  body.in-game .howto .goal{font-size:13px}
  body.in-game .howto .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 14px}
  body.in-game .howto .readyline{flex-basis:auto}
  body.in-game .howto .go,body.in-game .howto .ghost,body.in-game .howto .linkbtn{font-size:13px;padding:1px 10px;box-shadow:2px 2px 0 var(--ink)}
  body.in-game .howto .ghost,body.in-game .howto .linkbtn{box-shadow:none}
  body.in-game .howto .howhead,body.in-game .howto .howfoot{flex-wrap:nowrap}
  body.in-game .howto .howclock,body.in-game .howto .readyline{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.in-game .howto .howhead .linkbtn,body.in-game .howto .howfoot button{flex:none;white-space:nowrap}
  body.in-game .howto.min{opacity:.88}
  body.in-game .howto .respawn{padding:1px 8px}
  body.in-game .readylist{gap:4px}
  body.in-game .rchip{font-size:12px;padding:0 6px 0 4px}
  body.in-game .rchip .blob{width:10px;height:10px}
  body.in-game .howto:not([hidden]) ~ .ghostbar{display:none}
}