* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d12; color: #e8ecf3; font-family: system-ui, sans-serif; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#panel { position: fixed; left: 12px; top: 12px; bottom: 12px; width: 320px; background: rgba(18, 21, 29, 0.88); border: 1px solid #2a3040; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#panel h1 { margin: 0; font-size: 22px; }
#panel h2 { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #8b95ab; }
#options { overflow-y: auto; flex: 1; padding-right: 4px; }
#tabs { display: flex; gap: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
.tab { flex: 1; padding: 8px 4px; background: #222838; border: 0; border-radius: 8px; font-size: 13px; }
.tab.on { background: #3aa0ff; color: #fff; font-weight: 700; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { padding: 5px 12px; background: #222838; border: 0; border-radius: 99px; font-size: 13px; }
.chip.on { background: #3aa0ff; }
.list { display: flex; flex-direction: column; gap: 6px; }
.choice { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 9px 12px; background: #222838; border: 2px solid transparent; border-radius: 10px; }
.choice small { color: #8b95ab; font-size: 11px; text-align: right; }
.choice.on { border-color: #3aa0ff; background: #1d2c44; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid #3a4258; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px #3aa0ff; }
.custom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 14px; }
.custom input { width: 60px; height: 34px; border: 0; background: none; }
#stats { position: fixed; right: 12px; bottom: 12px; width: 260px; background: rgba(18, 21, 29, 0.88); border: 1px solid #2a3040; border-radius: 14px; padding: 14px; }
#stats h3 { margin: 0; font-size: 16px; }
.kmh { margin: 2px 0 10px; font-size: 26px; font-weight: 800; color: #3aa0ff; }
.stat { display: grid; grid-template-columns: 95px 1fr; align-items: center; font-size: 12px; margin-top: 6px; }
.stat div { height: 8px; background: #222838; border-radius: 4px; overflow: hidden; }
.stat i { display: block; height: 100%; background: linear-gradient(90deg, #3aa0ff, #7cf); }
@media (max-width: 700px) { #panel { width: auto; right: 12px; bottom: 46%; } #stats { left: 12px; width: auto; } }
[hidden] { display: none !important; }
#play { padding: 14px; border: 0; border-radius: 10px; background: #2fb344; color: #fff; font-size: 18px; font-weight: 800; }
#play:hover { background: #3bd055; }
#hud { position: fixed; inset: 0; pointer-events: none; font-weight: 800; text-shadow: 0 2px 6px #000; }
#hud .speed { position: absolute; right: 24px; bottom: 20px; font-size: 44px; }
#hud .mini { position: absolute; right: 20px; bottom: 90px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #fff; background: #0007; box-shadow: 0 2px 10px #000a; }
#hud .speed small { font-size: 16px; }
#hud .top { position: absolute; left: 20px; top: 16px; font-size: 18px; line-height: 1.6; }
#hud .hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; color: #cdd5e5; font-weight: 600; }
#playCoop { padding: 12px; border: 0; border-radius: 10px; background: #1fa65a; color: #fff; font-size: 16px; font-weight: 800; margin-top: 8px; }
#playCoop:hover { background: #2fc472; }
#playOnline { padding: 12px; border: 0; border-radius: 10px; background: #2f7be0; color: #fff; font-size: 16px; font-weight: 800; margin-top: 8px; }
#playOnline:hover { background: #4a92f0; }
.help { margin: 0 0 8px; font-size: 13px; color: #cdd5e5; }
#hud .flash { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 120px 40px #ff1010; }
#hud .hpbar { width: 200px; height: 12px; background: #0008; border-radius: 6px; overflow: hidden; margin-top: 4px; }
#hud .hpbar i { display: block; height: 100%; background: #35d05a; }
#hud .stars { font-size: 30px; color: #555; letter-spacing: 4px; text-shadow: none; }
#hud .stars span.on { color: #ffd21f; text-shadow: 0 0 8px #ff9d00; }
#hud .stars.hot span.on { animation: blink 0.5s infinite alternate; }
@keyframes blink { to { opacity: 0.45; } }
#hud .board { position: absolute; right: 20px; top: 62px; text-align: right; font-size: 16px; line-height: 1.5; }
#hud .overlay { position: absolute; inset: 0; background: #000b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: auto; padding: 24px; text-align: center; }
#hud .overlay h2 { margin: 0; font-size: 30px; }
#hud .overlay p, #hud .overlay li { max-width: 560px; font-size: 16px; font-weight: 600; margin: 4px 0; }
#hud .overlay ul { text-align: left; padding-left: 20px; }
#hud .overlay button { margin-top: 12px; padding: 14px 28px; border: 0; border-radius: 10px; background: #2fb344; color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; }
#hud .ammo { position: absolute; right: 24px; bottom: 80px; font-size: 16px; font-weight: 700; background: rgba(10,14,24,.7); padding: 6px 10px; border-radius: 8px; color: #ffcf6b; }
#hud .ammo.empty { color: #ff6b6b; }
.choice.locked { opacity: 0.45; cursor: not-allowed; }
#hud .hpbar.fuel i { background: #ff9d1f; }

/* Coop local : écran coupé en deux */
#hud .info2, #hud .flash2, #hud .mini2, #hud .divider { display: none; }
#hud.split .info2, #hud.split .flash2, #hud.split .mini2, #hud.split .divider { display: block; }
#hud.split .info2 { position: absolute; left: calc(50% + 20px); top: 16px; font-size: 18px; line-height: 1.6; }
#hud.split .flash { right: 50%; }
#hud.split .flash2 { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; opacity: 0; box-shadow: inset 0 0 120px 40px #ff1010; }
#hud.split .mini { right: calc(50% + 20px); }
#hud.split .mini2 { position: absolute; right: 20px; bottom: 90px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #fff; background: #0007; box-shadow: 0 2px 10px #000a; }
#hud.split .divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; }
#hud.split .board { right: auto; left: 50%; transform: translateX(-50%); text-align: center; top: 8px; }
#hud.split .speed { right: calc(50% + 24px); }
#hud.split .info { width: calc(50% - 40px); }
#hud.split .info2 { width: calc(50% - 40px); }
#hud.split .top { font-size: 14px; line-height: 1.4; }
#hud.split .board { top: auto; bottom: 8px; font-size: 14px; }
#hud.split .overlay { z-index: 5; }
#hud.split .overlay p, #hud.split .overlay li { font-size: 13px; max-width: 80%; }
#hud.split .hint { display: none; }
#hud.split .top { position: static; }
#hud .top .ammo { position: static; display: inline-block; margin-top: 6px; }
#hud .carname { position: absolute; right: 20px; top: 16px; font-size: 22px; background: rgba(10,14,24,.7); padding: 6px 12px; border-radius: 8px; }