:root{--bg-0: #dceeff;--bg-1: #b8ddf5;--bg-2: #7db7dc;--ink: #122536;--ink-soft: #3f5f74;--surface: #f2f2f2;--surface-soft: #e4e4e4;--line-light: #ffffff;--line-mid: #b7b7b7;--line-dark: #6f6f6f;--accent-blue: #1f56a8;--accent-blue-soft: #dce8ff;--accent-orange: #e67e34;--accent-orange-soft: #ffe7d4;--ok: #1f7a2f;--ok-soft: #d9f0dc;--warn: #a0382a;--warn-soft: #f7ddd8;--error: #ff6b6b;--error-soft: #ffe0e0;--radius-sm: 6px;--radius-md: 10px}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Tahoma,Verdana,Trebuchet MS,sans-serif;color:var(--ink);background:linear-gradient(165deg,var(--bg-0) 0%,var(--bg-1) 45%,var(--bg-2) 100%);overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#b5c8d8;border-radius:5px}.aurora,.ice-grid{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.12;z-index:0}.snowfield{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;opacity:.45;z-index:1}.shell{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px}.aurora,.ice-grid{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.12}.aurora-band{position:absolute;border-radius:50%;filter:blur(100px);animation:drift 14s ease-in-out infinite alternate}.a1{width:700px;height:320px;top:-100px;left:-120px;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%)}.a2{width:640px;height:300px;top:40px;right:-90px;background:radial-gradient(circle,rgba(220,245,255,.42),transparent 70%)}.a3{width:620px;height:260px;bottom:-80px;left:28%;background:radial-gradient(circle,rgba(220,255,238,.38),transparent 70%)}@keyframes drift{0%{transform:translate(0) translateY(0) rotate(-2deg)}to{transform:translate(36px) translateY(22px) rotate(2deg)}}.ice-grid{background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at center,black 20%,transparent 82%);mask-image:radial-gradient(circle at center,black 20%,transparent 82%)}.snowfield{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;opacity:.45}.flake{position:absolute;top:-20px;animation:snowfall linear infinite;-webkit-user-select:none;user-select:none}@keyframes snowfall{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:1}to{transform:translateY(110vh) rotate(360deg);opacity:0}}.panel{position:relative;width:min(620px,100%);background:var(--surface);border:1px solid var(--line-dark);border-radius:var(--radius-md);box-shadow:inset 1px 1px 0 var(--line-light),inset -1px -1px 0 var(--line-mid),0 16px 44px #18385247;overflow:hidden;z-index:2}.shell:has(.game-screen){padding:0;align-items:stretch;justify-items:stretch}.panel:has(.game-screen){width:100%;max-width:100%;height:100vh;border-radius:0;border:none;box-shadow:none}.panel:has(.game-screen):before{display:none}.panel:before{content:"";display:block;height:8px;background:linear-gradient(90deg,#2456a8,#3f7cdb 65%,#8fb5ff);border-bottom:1px solid #2a4f8c}.screen{padding:24px;animation:fadeUp .24s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.screen-menu{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.logo-img{width:116px;height:116px;object-fit:contain;border-radius:var(--radius-sm);border:2px solid var(--line-light);border-right-color:var(--line-dark);border-bottom-color:var(--line-dark);background:#fff}.hero-text{display:grid;gap:6px}.eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}.title{margin:0;line-height:1;font-size:clamp(24px,6vw,36px);color:#133f7f;text-shadow:1px 1px 0 #fff}.title-accent{color:#b5361f}.tagline{margin:0;font-size:12px;color:var(--ink-soft)}.retro-blink{animation:retroBlink 1.2s steps(2,jump-none) infinite}@keyframes retroBlink{0%,49%{opacity:1}50%,to{opacity:.6}}.menu-nav,.lobby-actions{display:grid;gap:8px;width:100%}.menu-nav{max-width:300px}.version-tag{font-size:10px;color:var(--ink-soft);letter-spacing:.05em}.btn,.music-toggle,.mode-btn{background:var(--surface-soft);border:2px solid var(--line-light);border-right-color:var(--line-dark);border-bottom-color:var(--line-dark);border-radius:var(--radius-sm);color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;padding:10px 12px;cursor:pointer;transition:background-color .12s ease}.btn:hover,.music-toggle:hover,.mode-btn:hover{background:#dcdcdc}.btn:active,.music-toggle:active,.mode-btn:active{border-color:var(--line-dark);border-right-color:var(--line-light);border-bottom-color:var(--line-light)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-icon{font-size:14px}.btn-primary{background:var(--accent-orange-soft);color:#7a2d00}.btn-ghost{background:#ebebeb}.btn-ready{background:var(--ok-soft);color:#12561f}.btn-done{background:#edf8ef;color:#1f7a2f}.btn-full{width:100%}.music-toggle.on{background:var(--ok-soft);color:#145f22}.music-toggle.off{background:#efefef;color:var(--ink-soft)}.music-hint{margin:0;font-size:11px;color:#7a2d22}.screen-title{margin:0 0 14px;font-size:22px;color:var(--accent-blue);letter-spacing:.02em}.back-btn{background:none;border:0;color:var(--accent-blue);font-size:12px;font-weight:700;padding:0;margin-bottom:14px;cursor:pointer;text-decoration:underline}.instructions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.instr-card,.settings-placeholder,.lobby-list,.podium{background:#f8f8f8;border:1px solid var(--line-mid);border-radius:var(--radius-sm)}.instr-card{padding:14px;display:grid;gap:6px}.instr-icon{font-size:22px}.key-demo{display:flex;align-items:center;gap:7px}.keycap{min-width:30px;border:1px solid var(--line-mid);border-bottom:2px solid var(--line-dark);border-radius:5px;padding:5px 8px;font-size:14px;font-weight:700;text-align:center;background:#fff;color:var(--ink)}.instr-card strong{font-size:14px}.instr-card p{margin:0;font-size:12px;color:var(--ink-soft);line-height:1.45}.settings-placeholder{padding:24px;text-align:center;color:var(--ink-soft)}.placeholder-icon{font-size:32px}.race-form{display:grid;gap:14px}.field-group{display:grid;gap:6px}.field-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:700}.req{color:var(--warn)}.field-input{width:100%;background:#fff;border:1px solid var(--line-mid);border-radius:var(--radius-sm);padding:10px 12px;color:var(--ink);font:inherit;font-size:14px}.field-input:focus{outline:2px solid rgba(31,86,168,.25);border-color:var(--accent-blue)}.field-input::placeholder{color:#6f8497}.code-input{text-transform:uppercase;letter-spacing:.16em;text-align:center;font-weight:700}.field-hint{font-size:11px;color:var(--ink-soft);text-align:right}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-btn.active{background:var(--accent-blue-soft);color:#1b4686}.error-banner{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--warn-soft);border:1px solid #d69c91;border-radius:var(--radius-sm);color:#7e2b1f;font-size:12px}.summary-line{margin:0 0 10px;font-size:12px;color:var(--ink-soft)}.status-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.conn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.conn-dot.connected{background:var(--ok)}.conn-dot.connecting{background:#c98b18;animation:pulse 1s infinite}.conn-dot.disconnected{background:var(--warn)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.conn-label{font-size:12px;color:var(--ink-soft);text-transform:capitalize}.countdown-badge{margin-left:auto;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#fff0cc;color:#86580c;border:1px solid #dbb26d}.sys-msg{margin:0 0 10px;font-size:12px;color:var(--ink-soft);padding:8px 10px;background:#edf3f8;border-left:3px solid #a9bfce;border-radius:4px}.lobby-list{overflow:hidden;margin-bottom:12px}.lobby-header,.podium-title{display:flex;justify-content:space-between;padding:8px 10px;background:#ebebeb;border-bottom:1px solid var(--line-mid);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#50697e;font-weight:700}.lobby-empty{padding:14px 10px;text-align:center;font-size:12px;color:var(--ink-soft)}.lobby-row,.podium-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border-bottom:1px solid #ddd}.lobby-row:last-child,.podium-row:last-child{border-bottom:0}.lobby-player{display:flex;align-items:center;gap:8px}.bear-icon{font-size:18px}.player-name,.podium-name{font-size:14px;font-weight:700;color:var(--ink)}.host-badge{border:1px solid #96afca;background:#eaf2ff;color:#2a4f84;font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px}.ready-badge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}.ready-badge.ready{background:var(--ok-soft);color:#1f7a2f;border:1px solid #8fc89a}.ready-badge.waiting{background:#f0f0f0;color:#597084;border:1px solid #c9c9c9}@media (max-width: 680px){.screen{padding:18px}.instructions-grid,.lobby-actions,.mode-toggle{grid-template-columns:1fr}.title{font-size:clamp(22px,7vw,32px)}.menu-nav{max-width:100%}}.game-screen{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:#b5d6ed;padding:0!important}.game-hud{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#122536d9;color:#fff;z-index:50;flex-shrink:0}.hud-timer{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.05em}.hud-positions{display:flex;gap:12px}.hud-player{display:flex;align-items:center;gap:4px;font-size:13px;opacity:.8}.hud-player.hud-me{opacity:1;font-weight:700;color:#fbbf24}.hud-pos{font-weight:700;min-width:18px}.hud-name{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-check{color:#4ade80;font-weight:700}.game-arena{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,#c8e2f5,#b5d6ed,#a3cae0)}.game-viewport{position:absolute;top:0;left:0;will-change:transform}.track-tile{position:absolute;top:var(--ty);left:0;width:450px;height:160px;border-left:2px solid rgba(100,140,170,.15);border-right:2px solid rgba(100,140,170,.15)}.tile-even{background:#dcebf873}.tile-odd{background:#d2e4f273}.cell-obstacle{position:absolute;left:var(--cx);top:var(--cy);width:22px;height:22px;margin-left:-11px;margin-top:-11px;object-fit:contain;image-rendering:crisp-edges;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.cell-ice{position:absolute;left:var(--cx);top:var(--cy);width:40px;height:22px;margin-left:-20px;margin-top:-4px;background:#8cd2ff59;border-radius:3px}.finish-line{position:absolute;top:var(--ty);left:0;width:450px;height:36px;background:repeating-linear-gradient(90deg,#1f56a8,#1f56a8 18px,#f0f0f0 18px,#f0f0f0 36px);border:2px solid #1a4a90;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5);z-index:10}.sled{position:absolute;left:0;top:0;width:38px;height:38px;margin-left:-19px;margin-top:-19px;border-radius:50%;background:var(--sled-color, #ccc);border:2px solid rgba(0,0,0,.3);will-change:transform;z-index:20;padding:1px;box-sizing:border-box;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}.sled-label{font-size:10px;font-weight:700;color:#333;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none}.sled-me{border-color:#fbbf24;border-width:3px;z-index:25;box-shadow:0 0 8px #fbbf2499,0 2px 4px #0000004d}.sled-crashed{filter:brightness(.6) saturate(.4);animation:crashShake .12s ease-in-out 3}.sled-recovering{opacity:.7;animation:recoverBlink .4s ease-in-out infinite}.sled-finishing{animation:finishGlow .6s ease-in-out infinite}.sled-boosted{box-shadow:0 0 12px #3b82f6b3,0 0 24px #3b82f64d,0 2px 4px #0000004d}@keyframes crashShake{0%,to{transform:rotate(0)}25%{transform:translate(-3px,2px) rotate(-8deg)}75%{transform:translate(3px,-2px) rotate(8deg)}}@keyframes recoverBlink{0%,to{opacity:.7}50%{opacity:.4}}@keyframes finishGlow{0%,to{box-shadow:0 0 8px #fbbf2466}50%{box-shadow:0 0 16px #fbbf24cc}}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#122536b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.pause-box{background:var(--surface, #f2f2f2);border:2px solid var(--line-dark, #6f6f6f);border-radius:10px;padding:28px 36px;text-align:center;min-width:260px;box-shadow:0 8px 30px #0000004d}.pause-box h3{margin:0 0 8px;font-size:20px;color:var(--ink, #122536)}.pause-msg{margin:0 0 16px;font-size:13px;color:var(--ink-soft, #3f5f74)}.pause-actions{display:flex;flex-direction:column;gap:8px}.pause-actions button{padding:10px 20px;border:2px solid var(--line-light, #ffffff);border-right-color:var(--line-dark, #6f6f6f);border-bottom-color:var(--line-dark, #6f6f6f);border-radius:6px;background:var(--surface-soft, #e4e4e4);font-weight:700;font-size:13px;cursor:pointer}.pause-actions .btn-primary{background:var(--accent-orange-soft, #ffe7d4);color:#7a2d00}.pause-actions .btn-danger{background:var(--warn-soft, #f7ddd8);color:var(--warn, #a0382a)}.pause-actions .btn-secondary{background:#ebebeb;color:var(--ink-soft, #3f5f74)}.finished-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#122536bf;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.finished-box{background:var(--surface, #f2f2f2);border:2px solid var(--accent-blue, #1f56a8);border-radius:12px;padding:32px 40px;text-align:center;max-width:360px;box-shadow:0 12px 40px #0000004d,0 0 30px #1f56a833;animation:slideUp .4s ease}.finished-box h2{margin:0 0 6px;font-size:24px;color:var(--accent-blue, #1f56a8)}.finish-time{margin:0 0 16px;font-size:13px;color:var(--ink-soft, #3f5f74)}.leaderboard{margin-bottom:20px}.lb-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line-mid, #b7b7b7);font-size:14px}.lb-row:last-child{border-bottom:none}.lb-row.lb-me{background:var(--accent-blue-soft, #dce8ff);border-radius:4px}.lb-pos{font-weight:700;width:30px;color:var(--accent-blue, #1f56a8)}.lb-name{flex:1;text-align:left;font-weight:600;color:var(--ink, #122536)}.lb-time{color:var(--ink-soft, #3f5f74);font-variant-numeric:tabular-nums}.enter-race-screen{max-width:380px;margin:0 auto}.enter-race-screen h2{margin:0 0 4px;font-size:20px;color:var(--accent-blue)}.subtitle{margin:0 0 16px;font-size:12px;color:var(--ink-soft)}.enter-form{display:flex;flex-direction:column;gap:12px}.enter-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}.enter-form input{padding:10px 12px;border:1px solid var(--line-mid);border-radius:var(--radius-sm);background:#fff;font-size:14px;font-family:inherit;color:var(--ink)}.enter-form input:focus{outline:2px solid rgba(31,86,168,.25);border-color:var(--accent-blue)}.form-error{margin:0;padding:6px 10px;background:var(--warn-soft);border:1px solid #d69c91;border-radius:4px;color:#7e2b1f;font-size:12px}.connection-warning{margin-top:12px;font-size:12px;color:var(--warn);text-align:center}.btn-back{background:none;border:0;color:var(--accent-blue);font-size:12px;font-weight:700;padding:0;margin-bottom:12px;cursor:pointer;text-decoration:underline}.btn-primary{background:var(--accent-orange-soft);color:#7a2d00;border:2px solid var(--line-light);border-right-color:var(--line-dark);border-bottom-color:var(--line-dark);border-radius:var(--radius-sm);padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}.btn-primary:hover{background:#ffd9b8}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-ready{background:var(--ok-soft)!important;color:#12561f!important}.lobby-screen h2{margin:0 0 4px;font-size:20px;color:var(--accent-blue)}.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.route-card{background:#f8f8f8;border:1px solid var(--line-mid);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:8px}.route-card.full{opacity:.6}.route-header{display:flex;justify-content:space-between;align-items:center}.route-header h3{margin:0;font-size:14px;color:var(--ink)}.route-difficulty{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:4px;background:var(--accent-blue-soft);color:var(--accent-blue)}.route-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.route-count{font-size:12px;font-weight:700;color:var(--ink-soft)}.lobby-players{background:#f8f8f8;border:1px solid var(--line-mid);border-radius:var(--radius-sm);margin:14px 0;overflow:hidden}.lobby-player-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e0e0e0}.lobby-player-row:last-child{border-bottom:none}.player-dot{width:12px;height:12px;border-radius:50%;background:var(--dot-color, #ccc);border:1px solid rgba(0,0,0,.15);flex-shrink:0}.player-name{flex:1;font-size:14px;font-weight:700;color:var(--ink)}.player-status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#f0f0f0;color:#597084;border:1px solid #c9c9c9}.player-status.ready{background:var(--ok-soft);color:#1f7a2f;border-color:#8fc89a}.waiting-msg{margin:0;padding:10px 12px;font-size:12px;color:var(--ink-soft);text-align:center}.lobby-actions{display:flex;justify-content:center;gap:8px}.countdown-overlay{margin-top:16px;text-align:center;padding:16px;background:#1225360f;border-radius:var(--radius-sm)}.countdown-text{font-size:48px;font-weight:900;color:var(--accent-blue);animation:countPulse .8s ease-in-out infinite}.countdown-text.counting{color:var(--ink);font-size:36px}.countdown-text.cooldown{font-size:24px;color:var(--ink-soft);animation:none}.countdown-text.go{font-size:56px;color:var(--ok)}@keyframes countPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-white: #f5f5f5;--color-brown: #8b6639;--color-gray: #a9a9a9;--color-beige: #f5e6d3}html,body,#root{width:100%;height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}