.game-hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:16px;z-index:100}.hud-top-left,.hud-top-center,.hud-top-right,.hud-bottom-left,.hud-minimap{position:absolute}.hud-top-left{top:16px;left:16px;display:flex;flex-direction:column;gap:8px}.position-display{display:flex;align-items:baseline;background:#000000b3;padding:8px 16px;border-radius:8px}.position-number{font-size:48px;font-weight:900;color:var(--color-accent);line-height:1}.position-suffix{font-size:18px;font-weight:700;color:var(--color-accent);margin-right:8px}.position-total{font-size:18px;color:var(--color-text-muted)}.lap-display{display:flex;align-items:center;gap:4px;background:#000000b3;padding:8px 16px;border-radius:8px}.lap-label{font-size:12px;color:var(--color-text-muted);margin-right:8px}.lap-current{font-size:24px;font-weight:700;font-family:var(--font-mono)}.lap-separator{color:var(--color-text-muted)}.lap-total{font-size:18px;color:var(--color-text-muted)}.hud-top-center{top:16px;left:50%;transform:translate(-50%);text-align:center}.timer-display{font-size:32px;font-weight:700;font-family:var(--font-mono);background:#000000b3;padding:8px 24px;border-radius:8px}.best-lap{font-size:14px;color:var(--color-success);margin-top:4px}.hud-top-right{top:16px;right:16px}.mini-leaderboard{background:#000000b3;padding:8px;border-radius:8px;min-width:160px}.leaderboard-entry{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px}.leaderboard-entry.local{background:#00d9ff33}.entry-position{font-size:14px;font-weight:700;min-width:20px;color:var(--color-text-muted)}.entry-color{width:8px;height:14px;border-radius:2px}.entry-name{font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.finished-flag{font-size:12px}.hud-bottom-left{bottom:16px;left:16px}.controls-hint{display:flex;flex-direction:column;gap:4px;background:#00000080;padding:8px 12px;border-radius:8px;font-size:12px;color:var(--color-text-muted)}.nitro-gauge{display:flex;align-items:center;gap:8px;background:#000000b3;padding:8px 12px;border-radius:8px;margin-top:8px}.nitro-label{font-size:12px;font-weight:700;color:#00d9ff;min-width:40px}.nitro-bar-container{width:100px;height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.nitro-bar-fill{height:100%;transition:width .1s ease-out;border-radius:6px;box-shadow:0 0 8px currentColor}.hud-minimap{bottom:16px;right:16px}.minimap-container{position:relative;width:150px;height:150px;background:#000000b3;border-radius:8px;border:2px solid var(--color-border);overflow:hidden}#minimap-canvas{width:100%;height:100%}.minimap-dot{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);transition:left .1s,top .1s}.minimap-dot.local{width:8px;height:8px;box-shadow:0 0 4px 2px #00d9ff80}@media (max-width: 600px){.game-hud{padding:8px}.position-number{font-size:32px}.timer-display{font-size:24px;padding:6px 16px}.mini-leaderboard{min-width:120px}.entry-name{max-width:60px}.minimap-container{width:100px;height:100px}.controls-hint{display:none}}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:150}.countdown-value{font-size:150px;font-weight:900;text-shadow:0 0 20px currentColor,0 4px 40px rgba(0,0,0,.5);opacity:0;transform:scale(2);transition:none}.countdown-value.animate{animation:countdownPop 1s ease-out forwards}@keyframes countdownPop{0%{opacity:0;transform:scale(2)}20%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}@media (max-width: 480px){.countdown-value{font-size:100px}}.game-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:140;pointer-events:none}.overlay-text{font-size:80px;font-weight:800;text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 20px currentColor,0 4px 40px rgba(0,0,0,.5);opacity:0;transform:scale(1.5);transition:none}.overlay-text.animate{animation:overlayPop 2s ease-out forwards}@keyframes overlayPop{0%{opacity:0;transform:scale(1.5)}15%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@media (max-width: 480px){.overlay-text{font-size:48px;letter-spacing:2px}}.touch-controls{position:fixed;bottom:0;left:0;right:0;height:200px;display:flex;justify-content:space-between;padding:16px;pointer-events:none;z-index:100}.touch-steering,.touch-pedals{display:flex;gap:16px;pointer-events:auto}.touch-btn{width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.3);background:#00000080;color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;transition:all .1s}.touch-btn:active{background:#ffffff4d;transform:scale(.95)}.steer-left,.steer-right{font-size:32px}.accelerate{background:#10b98180;border-color:#10b981cc}.accelerate:active{background:#10b981cc}.brake{background:#ef444480;border-color:#ef4444cc;font-size:14px}.brake:active{background:#ef4444cc}@media (min-width: 769px){.touch-controls{display:none}}@media (max-width: 480px){.touch-btn{width:70px;height:70px}.touch-controls{height:150px}}.main-menu{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-secondary) 100%)}.menu-background{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(233,69,96,.1) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(0,217,255,.1) 0%,transparent 40%)}.menu-content{display:flex;flex-direction:column;align-items:center;gap:32px;max-width:400px;width:100%}.game-title{font-size:64px;font-weight:900;text-shadow:0 4px 20px rgba(0,0,0,.5)}.title-race{color:var(--color-primary)}.title-io{color:var(--color-accent)}.connection-status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-text-muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--color-error)}.status-dot.connected{background:var(--color-success)}.settings-panel{width:100%;display:flex;flex-direction:column;gap:20px}.settings-panel h2{text-align:center;margin-bottom:8px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:600;color:var(--color-text-muted)}.color-picker{display:flex;gap:8px;flex-wrap:wrap}.color-option{width:40px;height:40px;border-radius:var(--radius-md);border:3px solid transparent;cursor:pointer;transition:all .2s}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 10px #ffffff80}.error-text{color:var(--color-error);font-size:14px;text-align:center}.menu-buttons{display:flex;flex-direction:column;gap:16px;width:100%}.join-code-section{display:flex;gap:8px}.code-input{flex:1;text-transform:uppercase;text-align:center;font-family:var(--font-mono);font-size:18px;letter-spacing:4px}.player-preview{display:flex;align-items:center;gap:12px;padding:16px 24px;background:var(--color-bg-secondary);border-radius:var(--radius-lg)}.preview-car{width:24px;height:40px;border-radius:4px;box-shadow:0 2px 8px #0000004d}.preview-name{font-weight:600;font-size:18px}@media (max-width: 480px){.game-title{font-size:48px}.menu-content{padding:16px}}.lobby{background:var(--color-bg)}.room-list-section,.tracks-section{margin-bottom:32px}.room-list-section h2,.tracks-section h2{margin-bottom:16px;font-size:20px}.empty-state{text-align:center;padding:48px 24px;background:var(--color-bg-secondary);border-radius:var(--radius-lg)}.empty-state p{margin-bottom:8px}.room-list{display:flex;flex-direction:column;gap:12px}.room-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.room-info h3{font-size:16px;margin-bottom:4px}.track-name{font-size:14px;color:var(--color-text-muted);margin-bottom:8px}.room-details{display:flex;gap:16px}.detail{font-size:14px;color:var(--color-text-muted)}.status-badge{font-size:12px;padding:4px 8px;border-radius:var(--radius-sm);font-weight:600;text-transform:uppercase}.status-badge.waiting{background:var(--color-success);color:var(--color-bg)}.status-badge.racing{background:var(--color-primary);color:#fff}.status-badge.results{background:var(--color-accent);color:var(--color-bg)}.track-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.track-card{display:flex;flex-direction:column;gap:12px}.track-preview{height:120px;background:var(--color-bg-tertiary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.track-placeholder{font-size:48px}.track-info h3{font-size:16px;margin-bottom:4px}.difficulty-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:var(--radius-sm);font-weight:600;text-transform:uppercase;margin-top:8px}.difficulty-badge.easy{background:var(--color-success);color:var(--color-bg)}.difficulty-badge.medium{background:var(--color-warning);color:var(--color-bg)}.difficulty-badge.hard{background:var(--color-primary);color:#fff}.difficulty-badge.extreme{background:#9333ea;color:#fff}.track-actions{display:flex;gap:8px;margin-top:auto}.track-actions .btn{flex:1}@media (max-width: 600px){.room-card{flex-direction:column;align-items:stretch}.room-details{flex-wrap:wrap}.track-list{grid-template-columns:1fr}}.waiting-room{background:var(--color-bg)}.room-code-section{display:flex;align-items:center;gap:12px}.waiting-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-bottom:24px}.players-section h2{margin-bottom:16px}.players-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.player-slot{display:flex;align-items:center;gap:12px;padding:12px;background:var(--color-bg-secondary);border-radius:var(--radius-md);border:2px solid transparent;transition:all .2s}.player-slot.ready{border-color:var(--color-success);background:#10b9811a}.player-slot.local{box-shadow:inset 0 0 0 1px var(--color-accent)}.player-slot.empty{opacity:.5}.player-car{width:20px;height:32px;border-radius:4px;background:var(--color-bg-tertiary);flex-shrink:0}.player-car.empty{background:var(--color-border)}.player-info{flex:1;display:flex;flex-direction:column;gap:2px}.player-name{font-weight:600;display:flex;align-items:center;gap:8px}.host-badge{font-size:10px;padding:2px 6px;background:var(--color-accent);color:var(--color-bg);border-radius:var(--radius-sm);font-weight:700}.ready-status{font-size:12px;color:var(--color-text-muted)}.ready-status.ready{color:var(--color-success)}.kick-btn{padding:4px 8px;opacity:0;transition:opacity .2s}.player-slot:hover .kick-btn{opacity:1}.room-info-section{display:flex;flex-direction:column;gap:16px}.track-info,.settings-info{padding:16px}.track-info h3,.settings-info h3{margin-bottom:12px;font-size:14px;text-transform:uppercase;color:var(--color-text-muted)}.track-preview-large{height:120px;background:var(--color-bg-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:12px}.track-emoji{font-size:48px}.track-info h4{font-size:16px;margin-bottom:4px}.setting-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--color-border)}.setting-row:last-child{border-bottom:none}.action-bar{display:flex;gap:16px;justify-content:center;padding-top:24px;border-top:1px solid var(--color-border)}.action-bar .btn{min-width:200px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100}.modal{max-width:400px;width:90%;display:flex;flex-direction:column;gap:16px;text-align:center}.modal h2{margin-bottom:0}.room-code-display{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;background:var(--color-bg-secondary);border-radius:var(--radius-md)}.room-code-display .code{font-family:var(--font-mono);font-size:32px;font-weight:700;letter-spacing:4px;color:var(--color-accent)}.share-link{display:flex;gap:8px}.share-link .input{flex:1;font-size:12px}@media (max-width: 768px){.waiting-layout,.players-grid{grid-template-columns:1fr}.action-bar{flex-direction:column}.action-bar .btn{min-width:auto;width:100%}}.game-screen{padding:0;overflow:hidden}.game-container{position:absolute;top:0;right:0;bottom:0;left:0;background:#1a1a2e}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:200}.pause-menu{min-width:300px;text-align:center}.pause-menu h2{margin-bottom:24px}.pause-options{display:flex;flex-direction:column;gap:12px}.results{background:linear-gradient(180deg,var(--color-bg) 0%,#1a1a3e 100%);display:flex;align-items:center;justify-content:center}.results-content{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:500px;width:100%;padding:24px}.winner-section{text-align:center;margin-bottom:16px}.trophy{font-size:80px;animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.winner-section h1{font-size:36px;margin:16px 0 8px;background:linear-gradient(135deg,var(--color-accent),#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.winner-time{font-size:24px;font-family:var(--font-mono);color:var(--color-text-muted)}.local-result{display:flex;align-items:center;gap:16px;width:100%}.position{font-size:32px;font-weight:900;color:var(--color-primary);min-width:60px}.local-details{flex:1;display:flex;flex-direction:column}.your-name{font-size:18px;font-weight:600}.your-time{font-family:var(--font-mono);color:var(--color-text-muted)}.dnf{color:var(--color-error);font-style:italic}.leaderboard{width:100%}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding-bottom:0}.leaderboard-header h2{font-size:16px;margin:0}.toggle{color:var(--color-text-muted)}.leaderboard-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}.leaderboard-row{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--color-bg-secondary);border-radius:var(--radius-md)}.leaderboard-row.local{background:#00d9ff1a;border:1px solid var(--color-accent)}.rank{min-width:32px;font-weight:700}.row-car{width:12px;height:20px;border-radius:2px}.row-name{flex:1;font-weight:500}.row-time{font-family:var(--font-mono);font-size:14px;color:var(--color-text-muted)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%}.stat-card{text-align:center;padding:16px}.stat-value{display:block;font-size:24px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent);margin-bottom:4px}.stat-label{font-size:12px;color:var(--color-text-muted);text-transform:uppercase}.results-actions{display:flex;gap:16px;width:100%;margin-top:16px}.results-actions .btn{flex:1}@media (max-width: 480px){.winner-section h1{font-size:28px}.trophy{font-size:60px}.results-actions{flex-direction:column}}.track-editor{background:var(--color-bg)}.track-editor .header-actions{display:flex;gap:8px}.editor-layout{flex:1;display:grid;grid-template-columns:200px 1fr 200px;gap:16px;padding:16px;overflow:hidden}.toolbar,.properties-panel{display:flex;flex-direction:column;gap:16px;overflow-y:auto}.toolbar h3,.properties-panel h3{font-size:14px;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px}.tool-list{display:flex;flex-direction:column;gap:4px}.tool-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-bg-secondary);border:none;border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:all .2s;text-align:left}.tool-btn:hover{background:var(--color-bg-tertiary)}.tool-btn.active{background:var(--color-primary);color:#fff}.tool-icon{font-size:18px}.tool-label{font-size:13px}.track-settings,.view-options{display:flex;flex-direction:column;gap:12px}.track-settings .form-group,.view-options .form-group{display:flex;flex-direction:column;gap:4px}.track-settings .form-group label,.view-options .form-group label{font-size:12px;color:var(--color-text-muted)}.track-settings .input,.view-options input[type=range],.layer-options .input{padding:6px 8px;font-size:13px}.layer-options{display:flex;flex-direction:column;gap:8px}.layer-options .form-group{display:flex;flex-direction:column;gap:4px}.layer-options .form-group label{font-size:12px;color:var(--color-text-muted)}.layer-hint{font-size:11px;color:var(--color-text-muted);font-style:italic;margin:0}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;background:var(--color-bg-secondary);border-radius:var(--radius-lg);overflow:auto}.canvas-container canvas{cursor:crosshair;border-radius:var(--radius-md)}.track-list-editor{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}.track-list-item-row{display:flex;gap:4px;align-items:stretch}.track-list-item-row .track-list-item{flex:1}.track-delete-btn,.track-copy-btn{padding:4px 8px;font-size:12px;min-width:32px}.btn-small{padding:4px 8px;font-size:12px}.track-list-item{padding:8px 12px;background:var(--color-bg-secondary);border:none;border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;text-align:left;font-size:13px;transition:all .2s}.track-list-item:hover{background:var(--color-bg-tertiary)}.track-list-item.active{background:var(--color-accent);color:var(--color-bg)}.element-properties{display:flex;flex-direction:column;gap:8px}.element-properties p{font-size:13px;color:var(--color-text-muted)}.btn-error{background:var(--color-error);color:#fff}.btn-error:hover{background:#dc2626}@media (max-width: 900px){.editor-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.toolbar,.properties-panel,.tool-list{flex-direction:row;flex-wrap:wrap}}:root{--color-bg: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-tertiary: #0f3460;--color-primary: #e94560;--color-secondary: #0f3460;--color-accent: #00d9ff;--color-text: #ffffff;--color-text-muted: #a0a0a0;--color-success: #4ade80;--color-warning: #fbbf24;--color-error: #ef4444;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "SF Mono", Monaco, "Lucida Console", monospace;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root,.app{width:100%;height:100%;display:flex;flex-direction:column}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:16px;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:#ff5a7a;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-secondary);color:#fff}.btn-secondary:hover:not(:disabled){background:#1a4a80;transform:translateY(-2px)}.btn-accent{background:var(--color-accent);color:var(--color-bg)}.btn-accent:hover:not(:disabled){background:#33e5ff;transform:translateY(-2px)}.btn-ghost{background:transparent;color:var(--color-text);border:2px solid var(--color-text-muted)}.btn-ghost:hover:not(:disabled){border-color:var(--color-text);background:#ffffff1a}.btn-large{padding:16px 32px;font-size:18px}.btn-small{padding:8px 16px;font-size:14px}.input{padding:12px 16px;font-size:16px;background:var(--color-bg-secondary);border:2px solid var(--color-bg-tertiary);border-radius:var(--radius-md);color:var(--color-text);outline:none;transition:border-color .2s}.input:focus{border-color:var(--color-accent)}.input::placeholder{color:var(--color-text-muted)}.card{background:var(--color-bg-secondary);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md)}.flex{display:flex}.flex-col{flex-direction:column}.flex-center{align-items:center;justify-content:center}.flex-between{align-items:center;justify-content:space-between}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.p-sm{padding:8px}.p-md{padding:16px}.p-lg{padding:24px}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-xs{font-size:12px}.text-sm{font-size:14px}.text-lg{font-size:18px}.text-xl{font-size:24px}.text-2xl{font-size:32px}.text-3xl{font-size:48px}.font-bold{font-weight:700}.font-mono{font-family:var(--font-mono)}.screen{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.screen-content{flex:1;display:flex;flex-direction:column;padding:24px;overflow-y:auto}.header{padding:16px 24px;background:var(--color-bg-secondary);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-bg-tertiary)}.header h1{font-size:24px;font-weight:700}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease}.animate-slide-up{animation:slideUp .4s ease}