*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#111;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff}#app{width:100vw;height:100vh;position:relative}#game-canvas{width:100%;height:100%}#game-canvas canvas{display:block}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#000000bf;z-index:10}.panel{background:#1a1a2e;border:2px solid #e94560;border-radius:16px;padding:40px;min-width:420px;max-width:520px;text-align:center}.panel-wide{min-width:640px;max-width:900px}.panel h1{font-size:2.2em;margin-bottom:24px;color:#e94560;text-shadow:0 0 20px rgba(233,69,96,.5)}.panel h2{font-size:1.4em;margin-bottom:16px;color:#eee}.panel input{display:block;width:100%;padding:12px 16px;margin:10px 0;border:2px solid #16213e;border-radius:8px;background:#16213e;color:#fff;font-size:1em;text-align:center;outline:none;transition:border-color .2s}.panel input:focus{border-color:#e94560}.panel input::placeholder{color:#666}.panel button{display:block;width:100%;padding:14px;margin:10px 0;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:1.1em;font-weight:700;cursor:pointer;transition:background .2s,transform .1s}.panel button:hover{background:#c73652;transform:scale(1.02)}.panel button:active{transform:scale(.98)}.panel button:disabled{background:#444;cursor:not-allowed;transform:none}.btn-secondary{background:#16213e!important;border:2px solid #e94560!important}.btn-secondary:hover{background:#1e2a4a!important}.btn-small{width:auto!important;display:inline-block!important;padding:10px 24px!important;font-size:.9em!important;margin-top:16px!important}.divider{display:flex;align-items:center;margin:16px 0;color:#666;font-size:.9em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#333}.divider span{padding:0 12px}.join-row{display:flex;gap:10px}.join-row input{flex:1}.join-row button{width:auto;min-width:90px}#room-list{max-height:180px;overflow-y:auto;margin:8px 0;text-align:left}.room-list-empty{text-align:center;color:#666;font-size:.9em;padding:12px 0}.room-entry{display:flex;align-items:center;padding:10px 14px;margin:5px 0;background:#16213e;border-radius:8px}.room-host{flex:1;font-size:1em}.room-players{color:#aaa;font-size:.85em;margin-right:12px}.room-entry button{width:auto;padding:6px 16px;margin:0;font-size:.85em}.card-row{display:flex;gap:20px;justify-content:center;margin:20px 0}.select-card{flex:1;max-width:300px;background:#16213e;border:3px solid transparent;border-radius:12px;padding:20px;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s}.select-card:hover{border-color:#e94560;transform:translateY(-4px);box-shadow:0 8px 24px #e945604d}.select-card.selected{border-color:#e94560;box-shadow:0 0 20px #e9456066}.card-preview{width:100%;height:120px;border-radius:8px;margin-bottom:12px;background:#0f1a2e;display:flex;align-items:center;justify-content:center;overflow:hidden}.card-preview-candy{background:linear-gradient(135deg,#fac,#f6a,#f48)}.card-preview-bathroom{background:linear-gradient(135deg,#def,#8ac,#68a)}.card-preview-desert{background:linear-gradient(135deg,#e8c878,#d4a052,#b87830)}.card-preview-space{background:linear-gradient(135deg,#0a0a2e,#336,#44a)}.card-preview-haunted{background:linear-gradient(135deg,#1a0a2e,#435,#64a)}.card-preview-ice{background:linear-gradient(135deg,#eef5ff,#ade,#8bd)}.card-row-wrap{flex-wrap:wrap}.map-preview-canvas,.kart-preview-canvas{width:100%;height:100%;display:block}.select-card h3{font-size:1.2em;color:#fff;margin-bottom:6px}.card-desc{font-size:.85em;color:#aaa;margin-bottom:12px}.stat-bars{margin-top:8px}.stat{display:flex;align-items:center;margin:4px 0;gap:8px}.stat-label{font-size:.75em;color:#888;width:55px;text-align:right}.stat-bar{flex:1;height:8px;background:#0a0e1a;border-radius:4px;overflow:hidden}.stat-fill{height:100%;border-radius:4px;transition:width .3s}.lobby-header-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}#lobby-ping{font-size:.85em;font-weight:700;padding:4px 10px;border-radius:6px;background:#0000004d}#player-list{text-align:left;margin:16px 0}.player-entry{display:flex;align-items:center;padding:10px 14px;margin:5px 0;background:#16213e;border-radius:8px}.player-color{width:18px;height:18px;border-radius:50%;margin-right:12px;border:2px solid rgba(255,255,255,.3)}.player-name{flex:1;font-size:1em}.player-ready{color:#4f4;font-weight:700;font-size:.9em}.player-not-ready{color:#f44;font-size:.9em}.player-host{color:#fd4;font-size:.75em;margin-left:8px}#countdown-overlay{background:#00000080}#countdown-number{font-size:10em;font-weight:900;color:#e94560;text-shadow:0 0 60px rgba(233,69,96,.8);animation:pulse .8s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}#hud{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}#hud-position{position:absolute;top:24px;left:32px;font-size:3em;font-weight:900;color:#fd4;text-shadow:3px 3px 6px rgba(0,0,0,.8)}#hud-lap{position:absolute;top:24px;right:32px;font-size:1.5em;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#hud-speed{position:absolute;bottom:32px;right:32px;font-size:2.2em;font-weight:900;text-shadow:3px 3px 6px rgba(0,0,0,.8)}#hud-item{position:absolute;bottom:32px;left:32px;width:64px;height:64px;border:3px solid rgba(255,255,255,.6);border-radius:12px;background:#00000080;display:flex;align-items:center;justify-content:center;font-size:1.8em}#hud-coins{position:absolute;top:90px;left:32px;font-size:1.5em;font-weight:700;color:#fc0;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#hud-wrong-way{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4em;font-weight:900;color:#f22;text-shadow:0 0 30px rgba(255,0,0,.8);animation:wrong-way-pulse .6s ease-in-out infinite}@keyframes wrong-way-pulse{0%,to{opacity:1}50%{opacity:.4}}#hud-slipstream{position:absolute;bottom:100px;left:50%;transform:translate(-50%);font-size:1.3em;font-weight:700;color:#4df;text-shadow:0 0 12px rgba(68,221,255,.6);animation:slipstream-glow .8s ease-in-out infinite}@keyframes slipstream-glow{0%,to{opacity:.7;text-shadow:0 0 12px rgba(68,221,255,.6)}50%{opacity:1;text-shadow:0 0 24px rgba(68,221,255,.9)}}#hud-debug{position:absolute;top:24px;left:50%;transform:translate(-50%);font-size:.9em;font-weight:700;color:#aaa;background:#00000080;padding:4px 12px;border-radius:6px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#hud-fps{position:absolute;top:264px;right:16px;font-size:.85em;font-weight:700;color:#4f4;background:#00000080;padding:4px 10px;border-radius:6px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#leaderboard{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0a0e1eeb;border:2px solid #e94560;border-radius:12px;padding:16px 24px;min-width:320px;z-index:20;pointer-events:none}#leaderboard-title{font-size:1.1em;font-weight:900;color:#e94560;text-align:center;margin-bottom:10px;letter-spacing:2px}.leaderboard-hint{font-size:.65em;color:#666;font-weight:400;letter-spacing:0}#leaderboard-list{display:flex;flex-direction:column;gap:3px}.lb-entry{display:flex;align-items:center;padding:5px 10px;border-radius:6px;background:#16213eb3;font-size:.85em}.lb-entry.lb-local{background:#e9456040;border:1px solid rgba(233,69,96,.5)}.lb-pos{width:32px;font-weight:900;color:#fd4;font-size:1em}.lb-color{width:10px;height:10px;border-radius:50%;margin-right:8px;flex-shrink:0}.lb-name{flex:1;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-tier{font-size:.75em;font-weight:700;margin-left:6px;padding:1px 6px;border-radius:3px}.lb-tier-elite{color:#f44;background:#ff444426}.lb-tier-pro{color:#fa4;background:#ffaa4426}.lb-tier-amateur{color:#4bf;background:#44bbff26}.lb-tier-rookie{color:#888;background:#88888826}#minimap-canvas{position:absolute;top:56px;right:16px;width:200px;height:200px;border-radius:12px;border:2px solid rgba(255,255,255,.15);pointer-events:none}.controls-grid{text-align:left;margin:16px 0 24px}.control-row{display:flex;align-items:center;padding:8px 12px;margin:4px 0;background:#16213e;border-radius:6px}.control-key{min-width:100px;font-weight:700;color:#fd4;font-size:.95em}.control-desc{flex:1;color:#ccc;font-size:.9em}.settings-grid{margin:12px 0 16px}.setting-row{display:flex;align-items:center;padding:8px 12px;margin:4px 0;background:#16213e;border-radius:6px}.setting-label{min-width:100px;font-weight:700;color:#ccc;font-size:.9em;text-align:left}.setting-options{display:flex;gap:6px;flex:1;justify-content:flex-end}.setting-options button{width:auto;padding:5px 14px;margin:0;font-size:.8em;font-weight:700;border-radius:4px;background:#0a0e1a;color:#888;border:1px solid #333;cursor:pointer;transition:all .15s}.setting-options button:hover{background:#1e2a4a;color:#ccc;transform:none}.setting-options button.active{background:#e94560;color:#fff;border-color:#e94560}.volume-control{display:flex;align-items:center;gap:12px;margin:16px 0;padding:12px 16px;background:#16213e;border-radius:8px}.volume-control label{font-size:.95em;font-weight:700;color:#ccc;min-width:56px}.volume-control input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:#0a0e1a;outline:none;border:none;padding:0;margin:0}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#e94560;cursor:pointer;border:2px solid #fff}.volume-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#e94560;cursor:pointer;border:2px solid #fff}#volume-value{font-size:.85em;color:#aaa;min-width:36px;text-align:right}#results-list{text-align:left;margin:20px 0}.result-entry{display:flex;padding:10px 16px;margin:6px 0;background:#16213e;border-radius:8px;align-items:center}.result-entry:first-child{border:2px solid #ffdd44;background:#1e2a4a}.result-pos{width:44px;font-weight:900;font-size:1.2em;color:#fd4}.result-name{flex:1}.result-time{color:#aaa;font-size:.9em}#toast-container{position:fixed;bottom:32px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:#141428eb;border:1px solid #e94560;border-left:4px solid #e94560;color:#fff;padding:10px 20px;border-radius:8px;font-size:.9em;white-space:nowrap;animation:toast-in .25s ease-out,toast-out .4s ease-in forwards;animation-delay:0s,var(--toast-duration, 2.6s)}@keyframes toast-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}@media(pointer:coarse),(max-width:768px){#hud-position{top:12px;left:16px;font-size:2.2em}#hud-lap{top:12px;right:16px;font-size:1.1em}#hud-speed{bottom:110px;right:16px;font-size:1.6em}#hud-item{bottom:110px;left:16px;width:52px;height:52px;font-size:1.4em}#minimap-canvas{top:44px;right:8px;width:130px;height:130px}#hud-coins{top:60px;left:16px;font-size:1.1em}#hud-wrong-way{font-size:2.5em}#hud-slipstream{bottom:130px;font-size:1em}#hud-debug{font-size:.75em}#hud-fps{top:180px;right:8px;font-size:.75em}.panel{min-width:0;max-width:92vw;padding:24px 20px}.panel-wide{min-width:0;max-width:96vw}.panel h1{font-size:1.6em}.card-row{flex-direction:column;align-items:center}.select-card{max-width:100%}}