:root{color-scheme:dark;--bg:#101c30;--muted:#91a1b9;--lime:#d5fd68;--line:#2b3b54}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#243652,transparent 65%),var(--bg);font:14px 'Segoe UI',Arial,sans-serif;color:#f4f7fc}main{max-width:1300px;margin:auto;padding:0 42px}header{display:flex;align-items:center;gap:25px;height:90px;border-bottom:1px solid var(--line)}.brand{color:var(--lime);font-size:35px;text-decoration:none;display:flex;align-items:center;gap:12px}.brand b{font-size:23px;color:white;letter-spacing:-1px}.brand b span{color:var(--lime)}.edition{font-size:9px;letter-spacing:2px;color:#8294b0}header>button{margin-left:auto}button,select,input{font:inherit}button{cursor:pointer;background:#192b43;color:#c6d3e6;border:1px solid #35465f;border-radius:5px;padding:9px 12px;font-size:12px}button:hover{background:#2b405b;color:white}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,#game:focus-visible{outline:3px solid var(--lime);outline-offset:3px}.intro{display:flex;justify-content:space-between;align-items:end;padding:38px 0 30px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--lime)}h1,h2,h3,.team b{font-family:Impact,'Arial Narrow',sans-serif;font-weight:800}h1{font-size:62px;line-height:.98;letter-spacing:.3px;text-transform:uppercase;margin:14px 0 0}h1 em{color:var(--lime);font-style:normal}.intro>p{color:#a9b7cd;font-size:14px;line-height:1.8;margin:0 0 2px}.cabinet{border:1px solid #42536e;border-radius:12px;overflow:hidden;background:#0c1628;box-shadow:0 24px 65px #0005}.scoreboard{display:flex;align-items:center;justify-content:space-between;padding:17px 28px;gap:12px}.team{display:flex;flex-direction:column;gap:6px}.team small{font-size:8px;color:#879ab4;letter-spacing:2px}.team b{font-size:26px;font-style:italic;letter-spacing:.5px}.blue b{color:#65c8ff}.red{text-align:right}.red b{color:#ff8479}.score{display:flex;align-items:center;gap:25px}.score>strong{font:48px Impact,sans-serif}.score>div{display:flex;align-items:center;flex-direction:column;gap:3px}.score small{font-size:8px;letter-spacing:1.5px;color:var(--lime)}.score b{font-size:21px;font-variant-numeric:tabular-nums}.arena{position:relative;aspect-ratio:1100/640;background:#34516a}#game{width:100%;height:100%}#game canvas{display:block!important;width:100%!important;height:100%!important}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#06152b9c;backdrop-filter:blur(4px)}[hidden]{display:none!important}.menu{width:min(460px,94%);max-height:95%;overflow:auto;text-align:center;background:#101d32f5;border:1px solid #516480;border-radius:12px;box-shadow:0 15px 50px #0005;padding:27px}.menu h2{font-size:40px;margin:12px 0;letter-spacing:.5px}.menu>p{font-size:12px;line-height:1.6;color:#aabbd2}.mode{display:flex;gap:8px;margin:20px 0 16px}.mode button{flex:1;font-size:10px;padding:12px 3px}.mode .selected{color:var(--lime);border-color:var(--lime);background:#d5fd6810}label{display:block;text-align:left;font-size:10px;color:#99aac2;margin-bottom:5px}select,input{background:#14263e;color:white;border:1px solid #354861;padding:11px;border-radius:5px;width:100%;margin-bottom:12px;font-size:12px}.primary{width:100%;display:flex;justify-content:space-between;background:var(--lime);border:0;color:#192b24;padding:15px 18px;font-weight:800;font-size:12px;letter-spacing:1px}.primary:hover{background:#e6ffa4;color:#192b24}.join{display:flex;gap:8px;margin-top:12px}.join input{margin:0;text-transform:uppercase;min-width:0}.join button{flex-shrink:0}.menu .note{color:#879ab6;font-size:10px;line-height:1.6;margin:12px 0 0}#message{min-height:16px;margin:10px 0 0;color:#ffb384}.room-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a5b8d2;margin:15px 0}.room-label b{font-size:18px;color:var(--lime);letter-spacing:2px}.room-label button{font-size:9px;padding:7px}#roster{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.slot{border:1px solid #36516d;border-left:3px solid #65c8ff;padding:12px;border-radius:5px;font-size:12px}.slot.red-slot{border-left-color:#ff8479}.slot small{display:block;color:#8199b5;font-size:9px;margin-bottom:5px}#online-start{margin-top:15px}#leave{margin-top:12px}.gamebar{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;gap:10px}.gamebar>span{font-size:9px;letter-spacing:1px;color:#a3b4cd}.gamebar i{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%;margin-right:8px}.gamebar>div{display:flex;gap:8px}.gamebar button{background:transparent;padding:7px 11px;font-size:11px}kbd{display:inline-block;background:#1e3048;border:1px solid #40516a;border-bottom-width:3px;padding:3px 6px;border-radius:4px;font:10px 'Segoe UI',sans-serif;color:#dce8fa;margin:0 3px 0 0}.gamebar kbd{font-size:9px;padding:0 4px;margin-left:6px}.controls{display:grid;grid-template-columns:1fr 1fr .7fr;gap:28px;padding:30px 0}.controls .eyebrow{color:#8297b4}.controls h3{font-size:25px;margin:9px 0 12px;letter-spacing:.5px}.controls p{font-size:11px;line-height:1.9;color:#a3b4cb;margin:6px 0}.divider{padding:0 8px;color:#5a708d}.controls aside{border-left:1px solid var(--line);padding-left:25px}.controls aside p{font-size:12px;margin-top:15px}footer{border-top:1px solid var(--line);padding:20px 0 28px;display:flex;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:1px;color:#7c90ad}footer b{font-weight:400;margin-left:8px}#banner{position:absolute;left:0;right:0;top:19%;pointer-events:none;text-align:center;font:italic 60px Impact,sans-serif;color:white;text-shadow:0 4px #253f59,0 8px 25px #0007}.cabinet:fullscreen{border-radius:0;display:flex;flex-direction:column;justify-content:center}.cabinet:fullscreen .arena{width:min(100vw,calc((100vh - 135px)*1.71875));align-self:center}@media(max-width:800px){main{padding:0 16px}header{height:70px}.edition{display:none}.brand b{font-size:19px}h1{font-size:44px}.intro>p{font-size:11px;max-width:190px}.scoreboard{padding:12px}.team b{font-size:19px}.team small{font-size:7px}.score{gap:13px}.score>strong{font-size:35px}.score b{font-size:17px}.controls{grid-template-columns:1fr 1fr;gap:20px}.controls aside{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:15px 0 0}.menu{padding:16px}.menu h2{font-size:30px;margin:8px 0}.menu .mode{margin:10px 0}.menu select,.menu input{padding:8px}.menu .primary{padding:12px}.menu-note{display:none}#banner{font-size:40px}footer span:last-child{display:none}}@media(max-width:520px){.intro{display:block;padding:25px 0}.intro>p{margin-top:15px;max-width:none}.arena{aspect-ratio:1.1}#game canvas{object-fit:contain}.controls{grid-template-columns:1fr}.controls aside{grid-column:auto}.gamebar>span{max-width:120px;line-height:1.5;font-size:8px}.gamebar button{padding:6px}.team b{font-size:14px}.score small{font-size:7px;letter-spacing:0}.score{gap:9px}.menu .eyebrow{font-size:8px}.menu h2{font-size:26px}.menu>p{font-size:11px}#roster .slot{padding:8px}}

#bindings-dialog{width:min(480px,94vw);max-height:90vh;overflow:auto;background:#101d32;color:#f4f7fc;border:1px solid #516480;border-radius:12px;padding:24px}#bindings-dialog::backdrop{background:#06152bbd;backdrop-filter:blur(4px)}#bindings-dialog h2{font-size:30px;margin:0 0 12px}#bindings-dialog p{font-size:12px;color:#aabbd2;line-height:1.6}.binding-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:8px 0}.binding-row button{min-width:110px}.binding-actions{display:flex;gap:8px;margin-top:18px}.binding-actions .primary{width:auto;margin-left:auto}#bindings-message{min-height:38px;color:#d5fd68!important}
/* Banner and scoreboard motion */
#banner{transform-origin:50% 60%}
#banner.pop{animation:bannerPop .55s cubic-bezier(.2,1.5,.4,1) both}
#banner.goal{color:#fff7d1;letter-spacing:3px;animation:bannerGoal 1.9s cubic-bezier(.2,1,.3,1) both}
#banner.goal.blue{text-shadow:0 0 22px #55d6ff,0 4px #123a6b,0 9px 28px #000a}
#banner.goal.red{text-shadow:0 0 22px #ffa25e,0 4px #7a1f2e,0 9px 28px #000a}
@keyframes bannerPop{0%{transform:scale(2.3) skewX(-8deg);opacity:0;filter:blur(6px)}55%{opacity:1;filter:blur(0)}100%{transform:scale(1) skewX(-8deg);opacity:1}}
@keyframes bannerGoal{0%{transform:scale(.2) rotate(-10deg);opacity:0}16%{transform:scale(1.7) rotate(4deg);opacity:1}28%{transform:scale(1.35) rotate(-2deg)}40%{transform:scale(1.5) rotate(1deg)}82%{transform:scale(1.5);opacity:1}100%{transform:scale(2.1);opacity:0;filter:blur(4px)}}
.score>strong{display:inline-block}
.score>strong.bump{animation:scoreBump .8s cubic-bezier(.2,1.8,.4,1)}
@keyframes scoreBump{0%{transform:scale(1)}30%{transform:scale(1.7);color:var(--lime);text-shadow:0 0 22px var(--lime)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#banner.pop,#banner.goal,.score>strong.bump{animation:none}}

/* 1990 arcade monitor feel */
.retro #game canvas{image-rendering:pixelated}
.retro .arena::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(rgba(0,0,0,.16) 50%,transparent 50%);background-size:100% calc(100% / 320)}
.overlay,#banner{z-index:2}
#banner{color:#ffe14d;-webkit-text-stroke:2px #0b0d16;text-shadow:4px 4px 0 #0b0d16,7px 7px 0 rgba(0,0,0,.35)}
#banner.goal.blue,#banner.goal.red{color:#ffe14d;text-shadow:4px 4px 0 #0b0d16,8px 8px 0 var(--goal-glow),0 0 30px var(--goal-glow)}
#banner.goal.blue{--goal-glow:#2c80d6}#banner.goal.red{--goal-glow:#df3f4e}

/* Printed comic book, circa 1994. */
:root{--bg:#261735;--line:#5d3e77;--lime:#ffdb50;--muted:#c4aed2}
body{background-color:#261735;background-image:radial-gradient(#ad659535 1px,transparent 1px),linear-gradient(135deg,#382450,#1c183b);background-size:8px 8px,100% 100%}
header{border-bottom:3px solid #171020}.brand{filter:drop-shadow(2px 3px 0 #171020)}.edition{color:#ffc6df}h1{color:#fff1cf;text-shadow:4px 4px 0 #171020,7px 7px 0 #ff3a78;-webkit-text-stroke:1px #171020;transform:skew(-4deg)}h1 em{color:#ffdb50}.intro>p{color:#edd7ec}
.cabinet{border:4px solid #171020;border-radius:3px;box-shadow:9px 9px 0 #171020,12px 12px 0 #a73c7f;background:#21172f}.scoreboard{background:radial-gradient(#a06ba933 1px,transparent 1px),#251b3d;background-size:6px 6px;border-bottom:4px solid #171020}.team b{text-shadow:2px 3px 0 #171020}.blue b{color:#8df2ff}.red b{color:#ff648a}.score>strong{color:#fff4d8;text-shadow:3px 3px 0 #171020}.score small{color:#ffdb50}.gamebar{background:#352344;border-top:3px solid #171020}
button,select,input{border:2px solid #171020;border-radius:3px}button{box-shadow:2px 2px 0 #171020}button:hover{background:#574079;color:#fff4d8}.primary{background:#ffdb50;border:2px solid #171020;box-shadow:3px 3px 0 #171020}.primary:hover{background:#ffef91}.mode .selected{color:#ffdb50;border-color:#ffdb50;background:#ffdb5017}
.menu,#bindings-dialog{background:radial-gradient(#633d7e44 1px,transparent 1px),#2b1c3b;background-size:7px 7px;border:3px solid #171020;border-radius:3px;box-shadow:7px 7px 0 #171020}.menu h2,#bindings-dialog h2{color:#fff1cf;text-shadow:3px 3px 0 #171020}.menu .eyebrow{color:#ffdb50}.overlay{background:#22133570;backdrop-filter:blur(2px)}.controls h3{color:#ffdb50;text-shadow:2px 2px 0 #171020}.controls .eyebrow{color:#ffa3cc}.controls p,.controls aside p{color:#d7bddc}kbd{background:#382447;border:2px solid #171020;color:#fff1cf;box-shadow:1px 2px 0 #171020}
#banner{color:#ffdb50;text-shadow:4px 4px 0 #171020,8px 8px 0 #e53682;-webkit-text-stroke:2px #171020}.retro .arena::after{background:radial-gradient(#21153525 .7px,transparent .9px);background-size:5px 5px}.retro #game canvas{image-rendering:auto}footer{border-top:3px solid #171020;color:#bfa4d0}

/* Heavy inks and warm printed-paper captions. */
h1{text-shadow:3px 3px 0 #100f18,5px 5px 0 #9e2448}.menu,#bindings-dialog{background:#292132}.scoreboard{background:#201e30}.intro>p{background:#f3df92;color:#211b27;border:3px solid #100f18;padding:12px 18px;box-shadow:4px 4px 0 #100f18;transform:rotate(-1deg)}.controls .eyebrow{background:#f4df69;color:#15131b;padding:4px 7px;border:2px solid #100f18}.cabinet{box-shadow:8px 8px 0 #100f18;border-color:#100f18}

.poke-debug-info{position:absolute;left:8px;top:8px;z-index:8;max-width:calc(100% - 16px);padding:8px 10px;background:#091421ed;color:#eaf7ff;border:1px solid #45e3ff;border-radius:4px;white-space:pre-line;font:11px/1.45 monospace;pointer-events:none}#toggle-poke-debug[aria-pressed="true"]{color:#45e3ff;border-color:#45e3ff}.gamebar>div{flex-wrap:wrap}