@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#173638;--cream:#f7f3e9;--orange:#f16a3a;--mint:#ceeadc}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}main{max-width:1240px;padding:0 38px;margin:auto}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8dcd0}.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:14px;letter-spacing:1.4px;display:flex;align-items:center;gap:10px}.brand-icon{font-size:31px;color:var(--orange)}.arcade{border:1px solid #17363844;border-radius:4px;font-size:9px;padding:4px;letter-spacing:1px}.header-right{display:flex;gap:25px;align-items:center;font-size:10px;letter-spacing:1.3px}button{font:inherit;cursor:pointer}#sound{background:none;border:1px solid #17363833;padding:8px 12px;border-radius:7px;font-size:11px;color:var(--ink)}.intro{display:flex;justify-content:space-between;align-items:center;padding:30px 0 26px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:700}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:94px;line-height:.95;margin:7px 0 0;letter-spacing:-1px}h1 span{color:var(--orange)}h1 i{font-size:48px;vertical-align:top;padding-left:18px;font-style:normal;color:var(--orange)}.intro p{font-size:13px;line-height:1.8;margin:0;padding-right:4px}.intro strong{font-weight:500;color:#718181}.cabinet{border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 7px 0 #17363812}.dashboard{background:var(--ink);color:var(--cream);display:flex;gap:30px;align-items:center;padding:17px 24px}.dashboard small{display:block;font-size:8px;letter-spacing:2px;color:#afc9c1;margin-bottom:5px}.dashboard strong{font-size:13px;letter-spacing:.6px}.level{min-width:200px}.belly{flex:1;max-width:420px}.belly>div:first-child{display:flex;justify-content:space-between}.belly strong{font-size:10px}.meter{height:7px;background:#ffffff20;border-radius:8px;overflow:hidden}#fill{background:#edbd60;height:100%;width:22%;transition:width .2s}.stat{margin-left:auto}#eaten{font-size:21px;line-height:1}#pause{color:#fff;background:#ffffff12;border:1px solid #ffffff25;width:32px;height:32px;border-radius:6px}.arena{position:relative;background:var(--mint);height:430px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.badge{position:absolute;top:22px;left:24px;font-size:9px;letter-spacing:1.4px;color:#47746a;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#ceeaddbb;text-align:center;padding:20px}.overlay.hidden{display:none}.pill{font-size:9px;letter-spacing:1.7px;border:1px solid #17363833;padding:7px 11px;border-radius:30px}h2{font:800 58px/.95 'Barlow Condensed',Impact,sans-serif;margin:18px 0 15px;letter-spacing:-.5px}h2 em{color:var(--orange);font-style:normal}.overlay p{font-size:12px;line-height:1.8;margin:0 0 20px}#start{background:var(--orange);border:2px solid var(--ink);border-radius:7px;padding:14px 24px;box-shadow:0 4px 0 var(--ink);font-size:12px;font-weight:800;letter-spacing:1px;color:var(--ink);min-width:180px}#start:hover{transform:translateY(-2px)}#start span{padding-left:30px;font-size:18px}#hint{font-size:8px;letter-spacing:1.4px;margin-top:18px}.game-footer{display:flex;justify-content:space-between;gap:12px;padding:14px 23px;background:#fffaf0;font-size:10px;align-items:center}.game-footer b{color:var(--orange);font-size:15px;margin-right:8px}.dim{color:#78827a;margin-left:10px}.status{color:#6d8275;font-style:italic}kbd{padding:2px 5px;border:1px solid #ced4c6;border-radius:3px;margin-left:10px}.rules{display:flex;padding:28px 0;gap:40px;justify-content:space-between}.rules>div{display:flex;align-items:center;gap:14px;flex:1}.number{font-family:'Barlow Condensed',Impact,sans-serif;font-size:31px;color:var(--orange)}.rules p{font-size:11px;line-height:1.8;color:#758379;margin:0}.rules b{color:var(--ink);font-size:12px}footer{display:flex;justify-content:space-between;border-top:1px solid #d8dcd0;padding:18px 0 24px;font-size:8px;color:#859188;letter-spacing:1px}button:focus-visible{outline:3px solid #f6bd44;outline-offset:4px}@media(max-width:700px){main{padding:0 14px}header{height:65px}.header-right{font-size:0;gap:0}.intro{padding:25px 0}h1{font-size:70px}.intro p{font-size:10px}.eyebrow{font-size:8px;letter-spacing:1px}h1 i{display:none}.dashboard{padding:12px;gap:12px}.level{min-width:100px}.dashboard strong{font-size:9px}.dashboard small{font-size:7px}.stat{display:none}.arena{height:450px}h2{font-size:47px}.game-footer{padding:12px;font-size:9px}.dim,.status{display:none}.rules{gap:12px;padding:22px 0}.rules>div{align-items:flex-start;gap:7px}.number{font-size:23px}.rules p,.rules b{font-size:9px}footer{font-size:7px;gap:20px}.badge{font-size:8px;left:15px}}

canvas:focus{outline:none}canvas:focus-visible{outline:3px solid #f6bd44;outline-offset:-3px}

/* Keep repeated taps and long presses from selecting arcade text on mobile. */
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Neon pixel arcade, inspired by the glow of classic space shooters. */

:root{--ink:#dcf9ff;--cream:#080916;--orange:#ffca52;--mint:#050614}
body{background:radial-gradient(ellipse at 78% 15%,#251338 0,transparent 55%),#080916;color:#dcf9ff;font-family:'Space Mono',monospace}
header{border-color:#302740}.brand-icon{color:#6fffe9;text-shadow:0 0 16px #4cffe0}.arcade{border-color:#61516f;border-radius:0;color:#ff71df}.header-right{color:#8581a2}#sound{border-color:#655076;border-radius:0;color:#c5b4e4}
.eyebrow{color:#72f5df}h1{font-family:'Press Start 2P',monospace;font-size:58px;line-height:1.25;letter-spacing:-3px;text-shadow:4px 4px 0 #4b2357,0 0 22px #a24bda44}h1 span{color:#ffcd57;text-shadow:4px 4px 0 #7b3550,0 0 28px #ffcc5544}h1 i{font-family:monospace;color:#ff71df;font-size:40px}.intro{padding:32px 0}.intro p{color:#b7abc9;font-size:11px}.intro strong{color:#807696}
.cabinet{border-color:#716080;border-radius:0;box-shadow:0 0 0 5px #1b152e,0 0 45px #b34cea15}.dashboard{background:#171124;color:#e2d5ee;border-bottom:1px solid #514160}.dashboard small{color:#a492b5}.dashboard strong{color:#90fff0}.dashboard .level strong{color:#ffe672}.dashboard .stat strong{color:#ff85d8}.meter{border-radius:0;height:9px;background:#342440}#fill{background:repeating-linear-gradient(90deg,#ffca52 0,#ffca52 9px,#49313e 9px,#49313e 12px);box-shadow:0 0 12px #ffca5266}#pause{border-color:#74527c;border-radius:0;color:#9cffec;background:#2a1d37}
.arena{background:#050614}.arena:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#00000010 0,#00000010 1px,transparent 1px,transparent 4px);opacity:.65}canvas{image-rendering:pixelated}.badge{color:#9784ba;font-size:9px}.overlay{background:#07051394;color:#ecf8ff;text-shadow:0 2px 0 #080510}.pill{border-color:#73537f;border-radius:0;color:#ff8ee4;background:#21152bc9;font-size:9px}
h2{font-family:'Press Start 2P',monospace;font-size:32px;line-height:1.5;letter-spacing:-1px;text-shadow:3px 3px 0 #53305e,0 0 28px #e989ff55}h2 em{color:#ffcf59}.overlay p{color:#bfb3d4;font-size:11px}#start{border-radius:0;border-color:#ffe78c;background:#ffcb57;box-shadow:4px 4px 0 #963979,0 0 25px #ffbd4e35;color:#211429;padding:12px 24px}#hint{color:#b59dc9;letter-spacing:1px}.game-footer{background:#171124;border-top:1px solid #4c385e;color:#cebcdc}.dim{color:#807194}.status{color:#96c4b7;font-size:9px}kbd{border-color:#604974;border-radius:0;color:#c8eae5}.rules b{color:#dbc5e5}.rules p{color:#827491}.number{font-family:'Press Start 2P',monospace;font-size:18px;color:#ff73d9;text-shadow:0 0 14px #ff54c555}.rules{padding:32px 0}footer{border-color:#302740;color:#766888}button:focus-visible{outline-color:#6bffe7}
@media(max-width:700px){h1{font-size:34px;letter-spacing:-2px}.intro p{font-size:8px}.eyebrow{font-size:7px}h2{font-size:22px}.overlay p{font-size:10px}.pill{font-size:7px}.number{font-size:12px}.dashboard strong{font-size:9px}.badge{font-size:7px}.rules{padding:24px 0}}
@media(prefers-reduced-motion:reduce){#fill{transition:none}#start:hover{transform:none}}

#music{background:#251b36;border:1px solid #655076;padding:8px 12px;border-radius:0;font-size:11px;color:#94ffe9;white-space:nowrap}
.header-right{gap:12px}#sound{white-space:nowrap}
.soundtrack{display:flex;gap:28px;align-items:center;margin-top:26px;padding:18px;border:1px solid #443553;background:#100d20}
.music-player{width:356px;flex-shrink:0;min-width:200px;height:200px;background:#050614}
.music-player iframe{display:block;width:100%;height:200px;border:0}
.music-copy h3{font-family:'Press Start 2P',monospace;font-size:16px;line-height:1.6;color:#ffcd57;margin:14px 0}
.music-copy p{font-size:11px;line-height:1.8;color:#ac99be}.music-copy a{font-size:10px;color:#80e7d8}#musicStatus{color:#b9c4d8}
@media(max-width:700px){.header-right{gap:7px}#music,#sound{font-size:9px;padding:8px}.soundtrack{flex-direction:column;align-items:stretch;gap:15px;padding:12px}.music-player{width:100%;max-width:356px;align-self:center}.music-copy h3{font-size:14px}.music-copy .eyebrow{font-size:8px}}

.score-stat{margin-left:0}#runScore{color:#95fff0;font-size:20px}
.live-arcade{border:1px solid #51405f;background:#100d20;margin-top:26px}.arcade-toolbar{padding:14px 18px;border-bottom:1px solid #382b49;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:10px}#connectionStatus{color:#e7b16d}#connectionStatus.connected{color:#80e9bd}#connectionStatus:before{content:'●';margin-right:8px}#newSession{border:1px solid #745b87;color:#cdb9e2;background:#251a35;font-size:10px;padding:9px}#playerInitials{color:#ffdc6b}.arcade-columns{display:grid;grid-template-columns:1fr 1.4fr}.presence,.scores{padding:22px}.presence{border-right:1px solid #382b49}.live-arcade h3{font-family:'Press Start 2P',monospace;font-size:16px;color:#ffcf65;line-height:1.5;margin:14px 0 20px}.live-arcade .eyebrow{font-size:8px}#onlineCount{color:#80ffe6}.online-player{padding:11px 0;border-top:1px solid #2b223a;display:flex;flex-direction:column;gap:6px}.online-player b{color:#92ffea;font-size:13px}.online-player span{color:#b2a0c3;font-size:9px;text-transform:uppercase}#onlinePlayers{max-height:260px;overflow:auto}#onlinePlayers p{font-size:10px;color:#9f8bae;line-height:1.8}.score-scroll{max-height:260px;overflow:auto}.scores table{border-collapse:collapse;width:100%;font-size:11px;text-align:left}.scores th{font-size:8px;color:#a891b9;padding:8px 6px;border-bottom:1px solid #675074}.scores td{padding:10px 6px;border-bottom:1px solid #30243f}.scores td:nth-child(3),.scores th:nth-child(3){text-align:right;color:#ffe380}.scores td:last-child,.scores th:last-child{text-align:right}.your-score{background:#3f2749}.your-score td:nth-child(2){color:#9bffe9}#arcadeNote{font-size:9px;padding:14px 18px;margin:0;border-top:1px solid #382b49;color:#ac9bbb;line-height:1.8}
#initialsDialog{border:2px solid #826292;background:#120d24;color:#e8dbf4;box-shadow:7px 7px 0 #38203e,0 0 60px #b442d030;width:min(440px,calc(100% - 32px));padding:30px;text-align:center;max-height:calc(100vh - 40px);overflow:auto}#initialsDialog::backdrop{background:#030411d9;backdrop-filter:blur(3px)}#initialsDialog h2{font-size:27px;line-height:1.5;margin:18px 0}#initialsDialog p{font-size:11px;line-height:1.9;color:#c6afd8}#initialsDialog label{display:block;margin:22px 0 12px;font-size:9px;color:#a8e8d9}#initialsInput{display:block;box-sizing:border-box;margin:auto;background:#080611;border:2px solid #7cf7dd;color:#ffdf79;font:24px 'Press Start 2P',monospace;letter-spacing:9px;text-align:center;padding:18px 10px;width:206px;border-radius:0}#initialsInput:focus{outline:2px solid #ffcf65;outline-offset:4px}#initialsDialog .initials-note{font-size:9px;color:#9683a8}.join-arcade{display:block;margin:24px auto 12px;background:#ffcd59;border:2px solid #ffeaa1;box-shadow:4px 4px 0 #a44087;color:#24142a;padding:14px;font-size:12px;font-weight:bold}#cancelSession{font-size:10px;background:none;border:0;color:#bca7cf;text-decoration:underline;padding:10px}
@media(max-width:700px){.dashboard .score-stat{display:block}.level{min-width:95px}.dashboard{gap:10px}.dashboard small{letter-spacing:1px}#runScore{font-size:14px}.arcade-columns{grid-template-columns:1fr}.presence{border-right:0;border-bottom:1px solid #382b49}.presence,.scores{padding:18px}.arcade-toolbar{padding:12px;gap:8px;font-size:8px}#newSession{font-size:8px;padding:8px}.live-arcade h3{font-size:13px}#initialsDialog{padding:22px}#initialsDialog h2{font-size:24px}}
