*{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:800px}.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}.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)}.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}#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-debug{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.75em;color:#888;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.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}#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}