@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
:root{--bg:#100b20;--panel:#1b1430;--panel2:#251a3d;--pink:#ff4e9b;--cyan:#4ce8e8;--yellow:#ffe66d;--purple:#a88bff;--text:#f6f1ff;--muted:#a99dbb;--line:#3c2c59}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#291642 0,transparent 42%),var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;min-height:100vh}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.09;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#000 3px)}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,76px);border-bottom:1px solid #ffffff12;background:#100b20d9;position:sticky;top:0;z-index:8;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:900;letter-spacing:1px;font-size:17px}.brand-icon{font-size:32px;filter:drop-shadow(0 0 9px #ff4e9b88)}.brand-accent{color:var(--pink)}.brand small{display:block;color:var(--muted);font:8px 'Press Start 2P';letter-spacing:1px;margin-top:5px}.topbar nav{display:flex;gap:8px}.nav{background:none;border:0;color:var(--muted);padding:12px;font:10px 'Press Start 2P';font-size:9px}.nav.active,.nav:hover{color:var(--cyan)}.player-pill{font:9px 'Press Start 2P';color:var(--yellow);display:flex;gap:9px;align-items:center}.online-dot,.blink{color:#67f7a5;text-shadow:0 0 10px #67f7a5}.hero{max-width:1280px;margin:auto;padding:72px 30px 48px;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:490px}.eyebrow{font:9px 'Press Start 2P';color:var(--cyan);letter-spacing:1px;margin-bottom:22px}.hero h1{font:clamp(29px,4.3vw,58px)/1.3 'Press Start 2P';letter-spacing:-3px;margin:0 0 22px;text-shadow:4px 4px 0 #5e2c84}.hero h1 span{color:var(--pink)}.hero-copy>p{color:#c3b7d2;max-width:500px;line-height:1.7;font-size:16px}.hero-actions{display:flex;gap:12px;margin:28px 0 35px;flex-wrap:wrap}.btn{border:1px solid var(--line);padding:14px 19px;font:10px 'Press Start 2P';font-size:9px;transition:.2s}.btn:hover{transform:translateY(-3px);filter:brightness(1.2)}.primary{background:var(--pink);border-color:var(--pink);color:#230b23;box-shadow:4px 4px 0 #8c2860}.ghost{background:#201633;color:var(--cyan)}.hero-stats{display:flex;gap:42px}.hero-stats strong{display:block;font:19px 'Press Start 2P';color:var(--yellow)}.hero-stats small{display:block;font:8px 'Press Start 2P';color:var(--muted);margin-top:10px}.hero-art{height:370px;position:relative;display:flex;align-items:center;justify-content:center}.sun{position:absolute;width:260px;height:260px;border-radius:50%;background:linear-gradient(#ff4e9b,#ffb35c);opacity:.16;filter:blur(3px)}.arcade-cabinet{position:relative;width:225px;height:330px;background:linear-gradient(110deg,#5e327f,#291943 40%,#120c21);border:5px solid #8b61bd;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);padding:22px 22px 0;filter:drop-shadow(0 20px 30px #0008);z-index:1}.cabinet-top{text-align:center;font:9px 'Press Start 2P';color:var(--yellow);margin:4px 0 14px}.cabinet-screen{height:190px;border:8px solid #090611;background:radial-gradient(#30275d,#090817);box-shadow:inset 0 0 24px #a88bff66;text-align:center;position:relative;padding:12px}.screen-stars{color:var(--yellow);font-size:13px}.screen-title{font:22px/1.5 'Press Start 2P';color:var(--cyan);text-shadow:3px 3px #ff4e9b;margin-top:14px}.screen-player{font-size:28px;margin-top:4px}.screen-start{font:7px 'Press Start 2P';color:var(--yellow);margin-top:4px;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.cabinet-controls{height:60px;display:flex;align-items:center;justify-content:center;gap:13px}.stick{width:20px;height:20px;border-radius:50%;background:#171022;border:6px solid #f052a0}.cabinet-controls i{width:17px;height:17px;border-radius:50%;box-shadow:inset -3px -3px #0006}.button-red{background:#ff4e9b}.button-blue{background:#4ce8e8}.button-yellow{background:#ffe66d}.cabinet-base{height:15px;background:#130c20}.pixel-star{position:absolute;color:var(--yellow);font-size:30px;text-shadow:0 0 20px var(--pink)}.star-a{top:40px;left:15%}.star-b{right:13%;top:100px;color:var(--cyan)}.star-c{right:18%;bottom:25px}.ticker{border-block:1px solid var(--line);background:#1b1430;display:flex;justify-content:space-around;gap:20px;padding:16px 10px;color:var(--yellow);font:8px 'Press Start 2P';flex-wrap:wrap}.page{max-width:1280px;margin:auto;padding:62px 30px 80px}.hidden{display:none!important}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-head h2{font:clamp(19px,3vw,30px) 'Press Start 2P';margin:0}.section-head h2 em{font-style:normal;color:var(--pink)}.filters{display:flex;gap:10px}.filters input,.filters select,.room-tools input,.section-head select{background:#1d1530;border:1px solid var(--line);padding:12px 14px;color:var(--text);outline:none}.filters input{width:210px}.filters select,.section-head select{color:var(--cyan)}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.game-card{background:linear-gradient(145deg,#261a3e,#171126);border:1px solid #49335f;position:relative;overflow:hidden;transition:.2s;cursor:pointer;min-height:218px}.game-card:hover{transform:translateY(-5px);border-color:var(--pink);box-shadow:0 12px 35px #0005}.game-art{height:125px;display:flex;align-items:center;justify-content:center;font-size:63px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 80%,var(--glow),transparent 65%),#171027}.game-art:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,#ffffff05 19px 20px)}.game-art span{filter:drop-shadow(0 5px 15px var(--glow));z-index:1}.game-meta{padding:14px}.game-meta h3{font:11px 'Press Start 2P';margin:0 0 10px}.game-meta p{font-size:12px;color:var(--muted);margin:0 0 12px}.game-tags{display:flex;justify-content:space-between;color:var(--cyan);font:8px 'Press Start 2P'}.room-tools{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}.room-tools input{width:200px;text-transform:uppercase}.muted{color:var(--muted);font-size:13px}.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.room-card,.active-room,.scores{background:var(--panel);border:1px solid var(--line);padding:20px}.room-card h3{margin:0 0 10px;font:10px 'Press Start 2P'}.room-card p{color:var(--muted);font-size:13px}.room-card button{margin-top:8px}.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);grid-column:1/-1}.active-room{margin-top:20px}.player-list{display:flex;gap:12px;flex-wrap:wrap;margin:15px 0}.player-chip{background:var(--panel2);padding:12px;border:1px solid var(--line)}.scores{max-width:760px}.score-row{display:grid;grid-template-columns:50px 1fr 100px;padding:14px;border-bottom:1px solid var(--line);font:11px 'Space Mono'}.score-row:first-child{color:var(--yellow)}footer{border-top:1px solid var(--line);padding:25px clamp(18px,5vw,76px);display:flex;justify-content:space-between;color:var(--muted);font:8px 'Press Start 2P';gap:15px;flex-wrap:wrap}footer b{color:var(--pink)}.modal{position:fixed;inset:0;background:#080510e8;z-index:20;display:grid;place-items:center;padding:20px}.modal-card{background:#1b1430;border:2px solid var(--purple);box-shadow:0 0 50px #a88bff33;width:min(900px,100%);max-height:94vh;overflow:auto;padding:25px;position:relative}.close{position:absolute;right:15px;top:10px;background:none;border:0;color:var(--pink);font-size:30px}.modal-card h2{font:14px 'Press Start 2P';color:var(--cyan);margin:0 35px 20px 0}.game-stage{background:#090713;border:1px solid var(--line);padding:12px}.game-stage canvas{display:block;width:100%;max-width:760px;height:auto;aspect-ratio:16/9;background:#080817;margin:auto;touch-action:none}.game-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}.game-instructions{color:var(--muted);font-size:12px;line-height:1.6}.game-score{font:10px 'Press Start 2P';color:var(--yellow)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--cyan);color:#09121a;padding:13px 20px;font:9px 'Press Start 2P';z-index:30;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.room-chat{display:flex;gap:8px;margin-top:14px}.room-chat input{flex:1;background:var(--bg);border:1px solid var(--line);color:white;padding:10px}.mobile-pad{display:flex;justify-content:space-around;margin-top:10px}.mobile-pad button{background:var(--panel2);color:white;border:1px solid var(--line);padding:16px 22px}@media(max-width:900px){.game-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr 1fr}.topbar nav{gap:0}.nav{font-size:7px;padding:8px}}@media(max-width:650px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 16px;gap:10px}.topbar nav{order:3;width:100%;justify-content:space-between}.player-pill{font-size:7px}.hero{grid-template-columns:1fr;padding:48px 20px 25px}.hero-art{height:300px;grid-row:1}.hero h1{font-size:28px}.hero-stats{gap:20px}.page{padding:45px 17px}.section-head{align-items:start;flex-direction:column}.filters{width:100%}.filters input{flex:1;min-width:0}.game-grid{grid-template-columns:repeat(2,1fr);gap:10px}.game-card{min-height:205px}.game-art{height:105px;font-size:48px}.game-meta{padding:10px}.game-meta h3{font-size:9px;line-height:1.6}.room-grid{grid-template-columns:1fr}.ticker{font-size:7px}footer{font-size:7px}.modal-card{padding:18px 12px}.game-controls{align-items:start}.hero-art{grid-row:auto}}

/* Device choice and device-specific game modes */
.device-select{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 0,#35204f 0,transparent 55%),#100b20}.device-select.hidden{display:none}.device-select-inner{width:min(900px,100%);text-align:center}.device-select h1{font:clamp(25px,5vw,48px)/1.45 'Press Start 2P';margin:18px 0;color:var(--text)}.device-select h1 span{color:var(--pink);text-shadow:3px 3px #5e2c84}.device-select p{color:#c3b7d2;font-size:16px;margin:0 auto 30px}.device-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.device-option{min-height:220px;padding:24px 16px;background:linear-gradient(145deg,#261a3e,#171126);border:2px solid #49335f;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:.2s}.device-option:hover,.device-option:focus{border-color:var(--cyan);transform:translateY(-4px);box-shadow:0 12px 35px #0007}.device-emoji{font-size:58px}.device-option strong{font:13px 'Press Start 2P';color:var(--cyan)}.device-option small{font-size:13px;color:var(--muted)}.device-note{font:8px 'Press Start 2P';color:var(--yellow);margin-top:25px}.player-pill #change-device{border:1px solid var(--line);margin-left:8px}.mode-pc .mobile-pad{display:none!important}.mode-phone .mobile-pad{display:flex}.mobile-pad button{touch-action:none;user-select:none;-webkit-user-select:none;min-width:48px;border-radius:10px;font-size:18px}.mode-phone .game-stage canvas{touch-action:manipulation}@media(max-width:650px){.device-options{grid-template-columns:1fr;gap:12px}.device-option{min-height:145px;padding:14px}.device-emoji{font-size:42px}.device-select h1{font-size:22px}.device-select p{font-size:13px}.player-pill #change-device{font-size:7px;padding:6px}}

.mode-phone .mobile-pad [data-special]{display:none}.mode-phone .mobile-pad[data-game="colorclash"] [data-special]{display:inline-flex}.mode-phone .mobile-pad[data-game="colorclash"] [data-key]{display:none}