@font-face{font-family:PS2P;src:url(fonts/PressStart2P.ttf) format('truetype');font-display:block}
:root{--bleu:#0055A4;--blanc:#FFFFFF;--rouge:#EF4135;--navy:#0A0E1F}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--navy);color:var(--blanc);font-family:PS2P,monospace;min-height:100%;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(ellipse at 50% 30%,#14204a 0%,var(--navy) 65%);overflow-x:hidden}
.flag{height:8px;background:linear-gradient(90deg,var(--bleu) 0 33.33%,var(--blanc) 33.33% 66.66%,var(--rouge) 66.66%)}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px}
.brand{font-size:16px;letter-spacing:2px}.brand .b{color:var(--blanc);text-shadow:3px 3px 0 var(--bleu)}.brand .w{color:var(--blanc);text-shadow:3px 3px 0 var(--rouge)}
nav{display:flex;gap:10px;align-items:center}
nav button,nav a{font-family:inherit;font-size:9px;color:var(--blanc);background:var(--navy);border:2px solid var(--blanc);padding:8px 10px;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 var(--bleu)}
nav a.x{box-shadow:3px 3px 0 var(--rouge)}
main{display:flex;flex-direction:column;align-items:center;padding:6px 10px 30px}
.cab{width:min(96vw,1000px);background:linear-gradient(180deg,#121a3a,#070a17);border:4px solid #000;border-radius:14px;padding:12px;box-shadow:0 0 0 4px var(--bleu),0 0 0 8px var(--blanc),0 0 0 12px var(--rouge),0 20px 60px rgba(0,0,0,.7)}
.marquee{text-align:center;padding:10px 0 12px;font-size:clamp(9px,1.6vw,15px);letter-spacing:3px}
.marquee span{background:linear-gradient(90deg,var(--bleu) 0 33.3%,var(--blanc) 33.3% 66.6%,var(--rouge) 66.6%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #000)}
.bezel{background:#000;border-radius:22px;padding:14px;box-shadow:inset 0 0 30px rgba(0,85,164,.35)}
.crt{position:relative;aspect-ratio:384/224;width:100%;margin:0 auto;overflow:hidden;border-radius:28px/36px;background:#000;container-type:inline-size}
.crt canvas{width:100%;height:100%;display:block;image-rendering:crisp-edges;image-rendering:pixelated}
#hi{position:absolute;inset:0;display:none;image-rendering:auto}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.glass{position:absolute;inset:0;pointer-events:none;border-radius:28px/36px;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(0,0,0,.55) 100%),linear-gradient(160deg,rgba(255,255,255,.07),transparent 40%);box-shadow:inset 0 0 40px rgba(0,0,0,.8),inset 0 0 8px rgba(0,0,0,.9)}
.how{max-width:860px;margin-top:26px;text-align:center;line-height:2;font-size:10px}
.how h2{font-size:14px;margin-bottom:10px;text-shadow:3px 3px 0 var(--bleu)}
.how b{color:var(--navy);background:var(--blanc);padding:1px 4px}
.how .lore{margin-top:16px;font-size:9px;opacity:.85;line-height:2.1}
#touch{display:none;width:min(96vw,1000px);justify-content:space-between;align-items:flex-end;margin-top:34px;user-select:none;position:relative;gap:4px}
#touch button{font-family:inherit;color:var(--blanc);background:var(--navy);border:3px solid var(--blanc);border-radius:50%;width:clamp(42px,12vw,58px);height:clamp(42px,12vw,58px);font-size:12px;touch-action:none}
#touch button.on{transform:scale(.92);filter:brightness(1.6)}
.pad{position:relative;width:clamp(116px,33vw,150px);height:clamp(116px,33vw,150px);touch-action:none;flex:none}
.pad .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--blanc);background:radial-gradient(circle,#1b2450 0 40%,#0a0e1f 41%)}
.pad .knob{position:absolute;left:50%;top:50%;width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;background:var(--bleu);border:3px solid var(--blanc);pointer-events:none}
.mid{display:flex;flex-direction:column;gap:8px;align-self:flex-start}
#touch .mid button{border-radius:10px;width:clamp(56px,15vw,76px);height:26px;font-size:8px}
.btns{display:flex;flex-direction:column;gap:6px}.btns .row{display:flex;gap:5px}
#touch .btns button{width:clamp(62px,19vw,84px);height:clamp(52px,15vw,66px);border-radius:16px;font-size:9px}
.bp{background:var(--bleu)!important}.bk{background:#fff!important;color:var(--navy)!important}.bs{background:var(--rouge)!important}
.bsu{background:#e8b923!important;color:var(--navy)!important}
@media (hover:none) and (pointer:coarse){#touch{display:flex}.how{display:none}}
@media (max-width:600px){.cab{padding:6px}.bezel{padding:6px}header{padding:8px}.brand{font-size:11px}}
/* v4 leaderboard modal */
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,8,20,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}
.lbp{width:min(460px,100%);max-height:92vh;overflow:auto;background:#0A0E1F;border:3px solid #fff;box-shadow:0 0 0 3px #2b46d6,0 0 0 6px #ef4135;padding:18px 18px 14px;font-family:PS2P,monospace;color:#fff}
.lbp h2{margin:0 0 4px;font-size:16px;color:#ffd23a;text-align:center}
.lbr{margin:0 0 12px;text-align:center;font-size:9px;color:#9fb6ff}
#lbScore{font-size:10px;margin:0 0 10px;line-height:1.5}
.lbp label{display:block;font-size:9px;margin-bottom:6px;color:#c8d4ff}
.lbin{display:flex;gap:6px}
.lbin input{flex:1;min-width:0;font:12px ui-monospace,Menlo,monospace;padding:9px 8px;background:#000;color:#fff;border:2px solid #2b46d6;outline:none}
.lbin input:focus{border-color:#ffd23a}
.lbp button{font-family:PS2P,monospace;font-size:10px;padding:9px 12px;background:#ef4135;color:#fff;border:2px solid #fff;cursor:pointer}
.lbp button:disabled{opacity:.5;cursor:default}
.lbn{font-size:8px;line-height:1.6;color:#9fb6ff;margin:8px 0 0}
#lbMsg{font-size:9px;line-height:1.6;min-height:14px;margin:10px 0 6px}
#lbList{list-style:none;margin:0 0 12px;padding:0;font-size:10px}
#lbList li{display:grid;grid-template-columns:36px 1fr auto 86px;gap:6px;padding:6px 4px;border-bottom:1px solid #1b2450;align-items:center}
#lbList li:nth-child(1){color:#ffd23a}
#lbList li .f{font-size:7px;color:#9fb6ff}
#lbList li .s{text-align:right}
#lbList li.empty{display:block;text-align:center;color:#c8d4ff}
.lbx{display:block;margin:0 auto;background:#2b46d6!important}

/* v6 ARCADE UI — Press Start 2P snapped to whole multiples of 8 device px (vars set by fitScreen), hard pixel bevels, no blur anywhere */
#hud{position:absolute;inset:0;pointer-events:none;font-family:PS2P,monospace;text-transform:uppercase;color:#fff;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-smooth:never;text-rendering:optimizeSpeed;
  --f1:16px;--f2:8px;--f3:8px;--p1:2px;--p2:1px}
#hud [hidden]{display:none!important}
#hintBar{position:absolute;left:0;right:0;bottom:9%;display:flex;flex-direction:column;align-items:center;gap:var(--p1)}
.hrow{display:flex;justify-content:center;max-width:98%}
.pill{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;background:#070a18;color:#fff;line-height:1;white-space:nowrap;
  border:var(--p2) solid #000;box-shadow:0 0 0 var(--p2) #fff,0 0 0 calc(var(--p2)*2) #000,calc(var(--p2)*2) calc(var(--p2)*3) 0 calc(var(--p2)*2) rgba(0,0,0,.55)}
.pill::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--p2)*2);background:linear-gradient(90deg,#0055A4 0 33.34%,#FFFFFF 33.34% 66.67%,#EF4135 66.67%)}
.pill.big{font-size:var(--f1);gap:var(--f1);padding:calc(var(--p1)*4) calc(var(--p1)*5) calc(var(--p1)*3)}
.pill.sm{font-size:var(--f2);gap:calc(var(--f2)*2);padding:calc(var(--p2)*7) calc(var(--p2)*8) calc(var(--p2)*5)}
.pill .it{display:inline-block;white-space:nowrap}
.pill .it kbd:first-child{margin-right:calc(1em/2)}
.pill b{color:#ffd23a;font-weight:400}
.pill.mob{display:block;font-size:var(--f2);white-space:normal;text-align:center;line-height:2;padding:calc(var(--p2)*6) calc(var(--p2)*8) calc(var(--p2)*4);max-width:100%}
/* chunky beveled arcade key caps: 1 font-pixel bevel light top-left, dark bottom-right, hard black outline + drop */
#hud kbd{font:inherit;display:inline-block;min-width:1.5em;text-align:center;line-height:1;padding:calc(1em/4) calc(1em/4) calc(1em/8);margin:0 calc(1em/8);
  background:#c9d0e4;color:#0A0E1F;border:calc(1em/8) solid #000;
  box-shadow:inset calc(1em/8) calc(1em/8) 0 #ffffff,inset calc(-1em/8) calc(-1em/8) 0 #7d86a6,0 calc(1em/8) 0 #000}
#hud kbd.c-p{background:#0055A4;color:#fff;box-shadow:inset calc(1em/8) calc(1em/8) 0 #4f93e0,inset calc(-1em/8) calc(-1em/8) 0 #00305e,0 calc(1em/8) 0 #000}
#hud kbd.c-k{background:#ffffff;color:#0A0E1F;box-shadow:inset calc(1em/8) calc(1em/8) 0 #ffffff,inset calc(-1em/8) calc(-1em/8) 0 #9aa3c0,0 calc(1em/8) 0 #000}
#hud kbd.c-sp{background:#EF4135;color:#fff;box-shadow:inset calc(1em/8) calc(1em/8) 0 #ff8d84,inset calc(-1em/8) calc(-1em/8) 0 #8f1c14,0 calc(1em/8) 0 #000}
#hud kbd.c-su{background:#ffd23a;color:#0A0E1F;box-shadow:inset calc(1em/8) calc(1em/8) 0 #fff0a8,inset calc(-1em/8) calc(-1em/8) 0 #a07800,0 calc(1em/8) 0 #000}
#tutBox{position:absolute;left:50%;top:17%;transform:translateX(-50%);width:min(76%,700px);background:#070a18;border:var(--p2) solid #000;
  box-shadow:0 0 0 calc(var(--p2)*2) #fff,0 0 0 calc(var(--p2)*4) #0055A4,0 0 0 calc(var(--p2)*6) #EF4135,0 0 0 calc(var(--p2)*7) #000;
  padding:calc(var(--f2)*1.5) calc(var(--f2)*2) calc(var(--f2)*1.25);text-align:center;line-height:1.25}
#tutBox .th{display:flex;justify-content:space-between;align-items:center;font-size:var(--f2);color:#9fb6ff}
#tutBox .tt{font-size:var(--f1);color:#ffd23a;margin:calc(var(--f2)*1.25) 0 calc(var(--f2)*1);text-shadow:var(--p1) var(--p1) 0 #EF4135}
#tutBox .ti{font-size:var(--f3);margin:calc(var(--f2)*.75) 0;line-height:1.6}
#tutBox .tx{font-size:var(--f2);margin-top:calc(var(--f2)*.75);line-height:1.9;color:#dfe6ff}
#tutBox .dirs{letter-spacing:.25em}
#tutBox .tbar{height:calc(var(--p2)*4);margin-top:var(--f2);background:#1b2450;border:var(--p2) solid #000}
#tutBox .tbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#0055A4 0 33.34%,#FFFFFF 33.34% 66.67%,#EF4135 66.67%)}
/* v6 mobile: arcade control-panel buttons */
#touch{background:linear-gradient(180deg,#141b3c,#0a0e1f);border:3px solid #000;box-shadow:0 0 0 3px #fff,0 0 0 6px #000,inset 0 3px 0 #2a3670;border-radius:6px;padding:56px 10px 14px;margin-top:22px;align-items:center}
#touch::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#0055A4 0 33.34%,#FFFFFF 33.34% 66.67%,#EF4135 66.67%)}
#touch button{font-family:PS2P,monospace;font-weight:400;letter-spacing:0;color:#fff;-webkit-font-smoothing:none;text-shadow:none;border:3px solid #000!important;border-radius:6px!important;
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 0 rgba(0,0,0,.4),0 6px 0 #000;transition:none;line-height:1}
#touch button.on{transform:translateY(5px);filter:none;box-shadow:inset 3px 3px 0 rgba(0,0,0,.35),inset -2px -2px 0 rgba(255,255,255,.25),0 1px 0 #000}
#touch .btns{gap:12px}#touch .btns .row{gap:10px}
#touch .btns button{width:clamp(84px,27vw,120px);height:clamp(58px,16vw,74px);font-size:var(--mf,10.67px)}
#touch .bp{background:#0055A4!important}#touch .bk{background:#fff!important;color:#0A0E1F!important;box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #9aa3c0,0 6px 0 #000}
#touch .bs{background:#EF4135!important}#touch .bsu{background:#ffd23a!important;color:#0A0E1F!important}
#touch .bk.on{box-shadow:inset 3px 3px 0 #9aa3c0,0 1px 0 #000}
#touch .mid{position:absolute;top:14px;right:10px;flex-direction:row;gap:10px}
#touch .pad{width:clamp(104px,28vw,150px);height:clamp(104px,28vw,150px)}
#touch .mid button{height:34px;width:clamp(64px,17vw,84px);font-size:var(--mfs,8px);background:#c9d0e4;color:#0A0E1F;box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #7d86a6,0 5px 0 #000}
#touch .mid button.on{box-shadow:inset 3px 3px 0 #7d86a6,0 1px 0 #000}
.pad .ring{border:3px solid #000;background:radial-gradient(circle,#0a0e1f 0 30%,#1b2450 31% 62%,#2a3670 63% 66%,#10163a 67%);box-shadow:0 0 0 3px #fff,0 6px 0 3px #000}
.pad .knob{background:radial-gradient(circle at 36% 32%,#ffb3ad 0 12%,#EF4135 13% 58%,#9b1c14 59%);border:3px solid #000;box-shadow:0 4px 0 #000}
.lbw{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:8px;color:#9fb6ff;flex-wrap:wrap}
nav .wbtn{margin-right:2px}
@media (max-width:600px){nav button.wbtn.wbtn{font-size:8px;padding:8px 6px 7px}}
.playnow{display:inline-block;margin:26px auto 8px;font-family:PS2P,monospace;font-size:24px;letter-spacing:2px;color:#fff;text-decoration:none;background:#EF4135;padding:18px 30px 16px;border:4px solid #000;
  box-shadow:inset 4px 4px 0 #ff8d84,inset -4px -4px 0 #8f1c14,0 0 0 4px #fff,0 0 0 8px #0055A4,0 10px 0 8px #000;animation:pblink 1s steps(1,end) infinite}
.playnow:hover{background:#ff5446}.playnow:active{transform:translateY(6px);box-shadow:inset 4px 4px 0 #8f1c14,0 0 0 4px #fff,0 0 0 8px #0055A4,0 4px 0 8px #000}
@keyframes pblink{50%{color:#ffd23a}}
@media (max-width:900px){.rgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.rgrid{grid-template-columns:repeat(2,1fr);gap:12px}.roster h2{font-size:12px}.playnow{font-size:16px;padding:14px 20px 12px}.rlore{font-size:8px}}

@media (max-width:600px){header .brand{font-size:10px}nav{gap:6px}nav button,nav a{padding:7px 6px}}