* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --f1-red: #e10600; --f1-dark: #15151e; --f1-darker: #0a0a0f;
  --f1-gray: #38383f; --f1-light: #f0f0f0; --f1-accent: #00d2be;
  --f1-yellow: #ffd700; --f1-green: #00ff88; --f1-orange: #ff8000;
}
body { font-family: 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background: var(--f1-darker); color: var(--f1-light); overflow: hidden; user-select: none; }
#game-canvas { position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:1; }
.loading { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--f1-darker); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1000; }
.loading-spinner { width:60px; height:60px; border:4px solid var(--f1-gray); border-top-color: var(--f1-red); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { margin-top:20px; font-size:18px; letter-spacing:2px; }
.error-overlay { position:fixed; top:10px; left:50%; transform:translateX(-50%); background: rgba(225,6,0,0.9); color:#fff; padding:10px 20px; border-radius:4px; z-index:999; font-size:13px; max-width:80%; display:none; }
.menu { position: fixed; top:0; left:0; width:100%; height:100%; background: linear-gradient(135deg, rgba(10,10,15,0.95) 0%, rgba(21,21,30,0.92) 100%); display:flex; align-items:center; justify-content:center; z-index:100; overflow-y:auto; }
.auth-card { background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:12px; padding:40px; width:420px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.auth-logo { font-size:42px; font-weight:900; color: var(--f1-red); letter-spacing:-2px; text-align:center; }
.auth-subtitle { text-align:center; color:#888; margin-bottom:24px; font-size:14px; }
.auth-tabs { display:flex; margin-bottom:20px; border-bottom:2px solid var(--f1-gray); }
.auth-tab { flex:1; padding:12px; background:none; border:none; color:#888; font-size:16px; cursor:pointer; transition: all 0.2s; }
.auth-tab.active { color: var(--f1-red); border-bottom:2px solid var(--f1-red); margin-bottom:-2px; }
.auth-form input { width:100%; padding:12px 16px; margin-bottom:12px; background: var(--f1-darker); border:1px solid var(--f1-gray); border-radius:6px; color: var(--f1-light); font-size:14px; }
.auth-form input:focus { outline:none; border-color: var(--f1-red); }
.auth-error { color: var(--f1-red); font-size:13px; margin-bottom:12px; min-height:18px; }
.auth-features { margin-top:20px; padding-top:16px; border-top:1px solid var(--f1-gray); display:flex; flex-wrap:wrap; gap:8px; }
.auth-features span { font-size:11px; color:#666; background: var(--f1-darker); padding:4px 8px; border-radius:4px; }
.btn-primary { width:100%; padding:14px; background: var(--f1-red); color:#fff; border:none; border-radius:6px; font-size:16px; font-weight:700; cursor:pointer; transition: all 0.2s; letter-spacing:1px; }
.btn-primary:hover { background:#ff1a1a; transform: translateY(-1px); }
.btn-primary:disabled { background: var(--f1-gray); cursor: not-allowed; transform: none; }
.btn-ghost { width:100%; padding:12px; background: transparent; color:#888; border:1px solid var(--f1-gray); border-radius:6px; font-size:14px; cursor:pointer; transition: all 0.2s; margin-top:8px; }
.btn-ghost:hover { color: var(--f1-light); border-color: var(--f1-light); }
.btn-small { padding:4px 12px; background: var(--f1-red); color:#fff; border:none; border-radius:4px; font-size:12px; cursor:pointer; }
.btn-small:disabled { background: var(--f1-gray); cursor:not-allowed; }
.btn-full { width:100%; margin-top:8px; }
.main-menu { width:100%; max-width:900px; padding:40px; }
.menu-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.menu-title { font-size:56px; font-weight:900; color: var(--f1-red); letter-spacing:-3px; }
.menu-user { color:#888; font-size:14px; }
.menu-buttons { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.menu-btn { display:flex; flex-direction:column; align-items:flex-start; padding:24px; background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:10px; cursor:pointer; transition: all 0.25s; text-align:left; color: var(--f1-light); }
.menu-btn:hover { border-color: var(--f1-red); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(225,6,0,0.2); }
.menu-btn-icon { font-size:32px; margin-bottom:12px; }
.menu-btn-text { font-size:20px; font-weight:700; margin-bottom:6px; }
.menu-btn-desc { font-size:13px; color:#888; }
.menu-footer { text-align:center; margin-top:40px; color:#555; font-size:12px; }
.setup-screen { width:100%; max-width:1100px; padding:30px; max-height:95vh; overflow-y:auto; }
.setup-screen h2 { font-size:32px; margin-bottom:24px; color: var(--f1-red); border-left:4px solid var(--f1-red); padding-left:16px; }
.setup-grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; margin-bottom:24px; }
.setup-section { background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:8px; padding:20px; }
.setup-section h3 { font-size:16px; margin-bottom:16px; color: var(--f1-accent); text-transform:uppercase; letter-spacing:1px; }
.setup-section label { display:block; margin-bottom:12px; font-size:14px; color:#ccc; }
.setup-section select, .setup-section input { width:100%; padding:8px 12px; background: var(--f1-darker); border:1px solid var(--f1-gray); border-radius:4px; color: var(--f1-light); margin-top:4px; }
.setup-section input[type="checkbox"] { width:auto; margin-right:8px; }
.setup-options { grid-column:3; }
.setup-actions { display:flex; gap:12px; justify-content:flex-end; }
.setup-actions button { width:auto; padding:12px 32px; }
.track-list { max-height:400px; overflow-y:auto; }
.track-list-wide { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:8px; max-height:none; }
.track-item { display:flex; align-items:center; padding:10px 12px; background: var(--f1-darker); border:1px solid transparent; border-radius:6px; cursor:pointer; margin-bottom:6px; transition: all 0.15s; }
.track-item:hover { border-color: var(--f1-gray); }
.track-item.selected { border-color: var(--f1-red); background: rgba(225,6,0,0.1); }
.track-item.canceled { opacity:0.4; cursor:not-allowed; text-decoration:line-through; }
.track-round { width:32px; height:32px; background: var(--f1-gray); border-radius:4px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; margin-right:12px; }
.track-item.selected .track-round { background: var(--f1-red); }
.track-name { font-size:14px; font-weight:600; }
.track-sub { font-size:11px; color:#888; margin-top:2px; }
.track-canceled { margin-left:auto; font-size:10px; color: var(--f1-red); font-weight:700; }
.driver-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap:8px; max-height:400px; overflow-y:auto; }
.driver-item { padding:10px 6px; background: var(--f1-darker); border:1px solid transparent; border-radius:6px; cursor:pointer; text-align:center; transition: all 0.15s; }
.driver-item:hover { border-color: var(--f1-gray); }
.driver-item.selected { border-color: var(--f1-red); background: rgba(225,6,0,0.15); }
.driver-number { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; margin:0 auto 6px; color:#fff; }
.driver-name { font-size:13px; font-weight:700; }
.driver-team { font-size:10px; color:#888; margin-top:2px; }
.team-select { max-height:400px; overflow-y:auto; }
.team-item { display:flex; align-items:center; padding:10px; background: var(--f1-darker); border:1px solid transparent; border-radius:6px; cursor:pointer; margin-bottom:6px; }
.team-item:hover { border-color: var(--f1-gray); }
.team-item.selected { border-color: var(--f1-red); background: rgba(225,6,0,0.1); }
.team-color { width:8px; height:40px; border-radius:4px; margin-right:12px; }
.team-name { font-size:14px; font-weight:700; }
.team-stats { font-size:11px; color:#888; margin-top:2px; }
.hud { position: fixed; top:0; left:0; width:100%; height:100%; z-index:50; pointer-events:none; font-family: 'Segoe UI', sans-serif; }
.hud-top-bar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:20px; padding:10px 20px; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%); }
.hud-session { background: var(--f1-red); padding:4px 16px; font-weight:900; font-size:14px; letter-spacing:2px; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
.hud-lap { font-size:22px; font-weight:900; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.8); }
.hud-time { font-size:18px; font-weight:700; color: var(--f1-accent); font-variant-numeric: tabular-nums; }
.hud-weather { font-size:13px; color:#ccc; background: rgba(0,0,0,0.5); padding:4px 12px; border-radius:4px; }
.hud-tower { position:absolute; top:60px; left:12px; width:200px; }
.tower-row { display:flex; align-items:center; padding:4px 8px; margin-bottom:2px; background: rgba(20,20,30,0.85); border-radius:3px; font-size:12px; border-left:4px solid #666; }
.tower-row.tower-player { background: rgba(225,6,0,0.3); border:1px solid var(--f1-red); }
.tower-pos { width:22px; font-weight:900; font-size:14px; color: var(--f1-yellow); }
.tower-code { flex:1; font-weight:700; margin-left:6px; }
.tower-gap { font-size:11px; color:#aaa; font-variant-numeric: tabular-nums; }
.hud-panel-left { position:absolute; bottom:20px; left:20px; display:flex; flex-direction:column; align-items:flex-start; }
.hud-rpm { width:200px; height:8px; background:#222; border-radius:4px; margin-bottom:6px; overflow:hidden; }
.hud-rpm > div { height:100%; width:0; background:#00ff00; transition: width 0.05s; }
.hud-gear { font-size:48px; font-weight:900; color: var(--f1-red); line-height:1; text-shadow:0 2px 8px rgba(0,0,0,0.8); }
.hud-speed { font-size:64px; font-weight:900; color:#fff; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,0.8); font-variant-numeric: tabular-nums; }
.hud-speed-unit { font-size:14px; color:#888; letter-spacing:2px; margin-top:-4px; }
.hud-panel-right { position:absolute; bottom:20px; right:20px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.hud-tires { background: rgba(0,0,0,0.7); padding:6px 14px; border-radius:4px; font-size:14px; font-weight:700; }
.hud-fuel { background: rgba(0,0,0,0.7); padding:4px 14px; border-radius:4px; font-size:12px; color:#aaa; }
.hud-xmode { background:#333; color:#fff; padding:4px 14px; border-radius:4px; font-size:12px; font-weight:900; letter-spacing:1px; opacity:0.3; transition: all 0.2s; }
.hud-damage { background: rgba(0,0,0,0.7); padding:4px 14px; border-radius:4px; font-size:12px; }
.hud-message { position:absolute; top:30%; left:50%; transform: translateX(-50%); text-align:center; }
.hud-message > div { background: rgba(0,0,0,0.8); color:#fff; padding:8px 24px; margin-bottom:4px; border-radius:4px; font-size:16px; font-weight:700; letter-spacing:1px; border-left:3px solid var(--f1-red); animation: msgIn 0.3s ease; }
@keyframes msgIn { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }
.countdown { font-size:120px !important; font-weight:900 !important; color: var(--f1-red) !important; background: transparent !important; border:none !important; text-shadow: 0 0 40px rgba(225,6,0,0.8) !important; }
#hud-minimap { position:absolute; top:60px; right:12px; border-radius:8px; border:1px solid var(--f1-gray); }
.hud-laptimes { position:absolute; bottom:20px; left:50%; transform: translateX(-50%); display:flex; gap:24px; background: rgba(0,0,0,0.7); padding:8px 20px; border-radius:6px; font-size:13px; }
.hud-laptimes span { font-weight:700; color: var(--f1-accent); font-variant-numeric: tabular-nums; }
.pause { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:200; }
.pause-card { background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:12px; padding:40px; text-align:center; min-width:320px; }
.pause-card h2 { color: var(--f1-red); margin-bottom:24px; font-size:28px; }
.pause-card button { display:block; width:100%; margin-bottom:10px; }
.controls-help { margin-top:20px; padding-top:16px; border-top:1px solid var(--f1-gray); text-align:left; font-size:12px; color:#888; line-height:1.8; }
.results { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:150; overflow-y:auto; }
.results-card { background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:12px; padding:30px; width:90%; max-width:700px; max-height:90vh; overflow-y:auto; }
.results-card h2 { color: var(--f1-red); margin-bottom:20px; text-align:center; font-size:28px; }
.results-player { display:flex; align-items:center; background: rgba(225,6,0,0.15); border:1px solid var(--f1-red); border-radius:8px; padding:16px; margin-bottom:20px; }
.rp-position { font-size:48px; font-weight:900; color: var(--f1-yellow); margin-right:20px; }
.rp-info { flex:1; }
.rp-info > div { margin-bottom:4px; }
.results-table { width:100%; border-collapse: collapse; font-size:13px; }
.results-table th { background: var(--f1-darker); padding:8px; text-align:left; color: var(--f1-accent); font-size:11px; text-transform:uppercase; }
.results-table td { padding:6px 8px; border-bottom:1px solid var(--f1-gray); }
.results-table tr.result-player { background: rgba(225,6,0,0.15); font-weight:700; }
.results-buttons { display:flex; gap:12px; margin-top:20px; }
.results-buttons button { flex:1; }
.career-dashboard { width:100%; max-width:1200px; padding:20px; max-height:95vh; overflow-y:auto; }
.cd-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid var(--f1-red); }
.cd-header h2 { font-size:28px; color:#fff; }
.cd-team { color:#888; font-size:14px; margin-top:4px; }
.cd-stats { display:flex; gap:24px; }
.cd-stats > div { text-align:center; }
.cd-stats span { display:block; font-size:11px; color:#888; text-transform:uppercase; }
.cd-stats strong { font-size:24px; color: var(--f1-accent); }
.cd-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:20px; }
.cd-section { background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:8px; padding:16px; }
.cd-section h3 { font-size:14px; color: var(--f1-accent); margin-bottom:12px; text-transform:uppercase; letter-spacing:1px; }
.cd-next-race { display:flex; align-items:center; gap:16px; padding:12px; background: var(--f1-darker); border-radius:6px; margin-bottom:12px; }
.cd-round { width:48px; height:48px; background: var(--f1-red); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; }
.cd-gp { font-size:16px; font-weight:700; }
.cd-track { font-size:12px; color:#888; margin-top:2px; }
.cd-calendar { max-height:300px; overflow-y:auto; }
.cd-cal-item { display:flex; justify-content:space-between; padding:6px 8px; font-size:12px; border-bottom:1px solid var(--f1-gray); }
.cd-cal-item.done { opacity:0.5; }
.cd-cal-item.current { background: rgba(225,6,0,0.2); border-left:3px solid var(--f1-red); }
.cd-standings { max-height:300px; overflow-y:auto; }
.cd-standing-row { display:flex; padding:5px 8px; font-size:12px; border-bottom:1px solid var(--f1-gray); }
.cd-standing-row.player { background: rgba(225,6,0,0.2); font-weight:700; }
.cd-standing-row span:nth-child(1) { width:24px; }
.cd-standing-row span:nth-child(2) { width:50px; }
.cd-standing-row span:nth-child(3) { flex:1; color:#888; }
.cd-standing-row span:nth-child(4) { font-weight:700; color: var(--f1-yellow); }
.cd-upgrade { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.cd-upgrade > span { width:60px; }
.cd-upgrade-bar { flex:1; height:8px; background: var(--f1-darker); border-radius:4px; overflow:hidden; }
.cd-upgrade-bar > div { height:100%; background: linear-gradient(90deg, var(--f1-red), var(--f1-orange)); }
.cd-contract { display:flex; align-items:center; gap:10px; padding:8px; background: var(--f1-darker); border-radius:4px; margin-bottom:6px; font-size:13px; }
.career-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:16px; margin-bottom:24px; }
.career-item { background: var(--f1-dark); border:1px solid var(--f1-gray); border-radius:8px; padding:20px; cursor:pointer; transition: all 0.2s; }
.career-item:hover { border-color: var(--f1-red); transform: translateY(-2px); }
.career-driver { font-size:20px; font-weight:700; margin-bottom:4px; }
.career-team { color: var(--f1-accent); font-size:14px; margin-bottom:8px; }
.career-progress { font-size:12px; color:#888; }
.career-season { font-size:11px; color:#666; margin-top:4px; }
.career-empty { grid-column: 1/-1; text-align:center; padding:60px; color:#666; font-size:16px; }
.career-login-prompt { text-align:center; padding:60px; }
.career-login-prompt p { margin-bottom:20px; color:#888; }
.career-login-prompt button { width:auto; display:inline-block; margin:0 8px; }
.season-end { text-align:center; padding:40px; }
.champion-display { margin:30px 0; }
.champion-trophy { font-size:80px; }
.champion-name { font-size:36px; font-weight:900; color: var(--f1-yellow); margin:10px 0; }
.champion-title { font-size:18px; color:#888; letter-spacing:4px; }
.season-stats { display:flex; justify-content:center; gap:40px; margin:30px 0; }
.season-stats strong { color: var(--f1-accent); font-size:24px; }
.lb-tabs { display:flex; gap:8px; margin-bottom:16px; }
.lb-tab { padding:8px 24px; background: var(--f1-dark); border:1px solid var(--f1-gray); color:#888; border-radius:6px; cursor:pointer; font-size:14px; }
.lb-tab.active { background: var(--f1-red); border-color: var(--f1-red); color:#fff; }
.lb-track-select { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.lb-track-btn { padding:6px 14px; background: var(--f1-dark); border:1px solid var(--f1-gray); color:#888; border-radius:4px; cursor:pointer; font-size:12px; }
.lb-track-btn.active { background: var(--f1-accent); border-color: var(--f1-accent); color: var(--f1-darker); font-weight:700; }
.lb-content { min-height:200px; }
.lb-table { width:100%; border-collapse: collapse; }
.lb-table th { background: var(--f1-darker); padding:10px; text-align:left; color: var(--f1-accent); font-size:12px; text-transform:uppercase; }
.lb-table td { padding:8px 10px; border-bottom:1px solid var(--f1-gray); font-size:14px; }
.lb-empty { text-align:center; padding:40px; color:#666; }
.controls-list p { margin-bottom:6px; font-size:13px; }
.controls-list strong { color: var(--f1-accent); }
.controls-list em { color:#666; font-size:11px; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background: var(--f1-darker); }
::-webkit-scrollbar-thumb { background: var(--f1-gray); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--f1-red); }