/* Styles partagés par index.html et annecy.html : interface, HUD, panneau dev, écrans de menu.
   Chaque page ne garde que ses règles propres (mise en page de la scène, écarts locaux). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.ui { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 14px; user-select: none; }
.ui button { background: #e8e8e8; color: #333; border: 0; border-radius: 6px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.ui button:hover { background: #fff; }
.ui select { background: #e8e8e8; color: #333; border: 0; border-radius: 6px; padding: 7px 10px; font-size: 14px; }
.ui label { display: flex; align-items: center; gap: 6px; }
#top-left { left: 14px; top: 12px; }
#top-right { right: 14px; top: 12px; }
#vol { right: 20px; top: 70px; flex-direction: column; }
#vol select { font-size: 12px; padding: 4px 6px; }
#vol input { writing-mode: vertical-lr; direction: rtl; height: 150px; width: 20px; }
#turn { left: 50%; bottom: 14px; transform: translateX(-50%); flex-direction: column; gap: 2px; }
#turn .row { display: flex; align-items: center; gap: 10px; }
#turn input { width: 180px; }
#speedbar { left: calc(50% + 190px); bottom: 14px; flex-direction: column; gap: 3px; width: 150px; }
#speedbar .hint { color: #bbb; font-size: 11px; }
#spdBar { --cmd: 0; position: relative; width: 14px; height: 70px; border-radius: 7px; background: linear-gradient(to top, #f0a070, #d9d9d9 50%, #78d38a); }
#spdBar::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 1px; background: #222; }
#spdBar .knob { position: absolute; left: -3px; width: 20px; height: 8px; border-radius: 4px; background: #fff; border: 1px solid #333; top: calc(50% - 4px - var(--cmd) * 31px); }
#hud .big { font-size: 26px; font-weight: 700; }
#hud .centered { color: var(--green); font-weight: 700; }
#popup { position: absolute; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.65); border-radius: 8px; opacity: 0; transition: opacity .25s; pointer-events: none; text-align: center; }
#popup.show { opacity: 1; }
#dev h3 { margin: 0 0 6px; font-size: 15px; color: var(--accent); }
#dev h4 { margin: 10px 0 4px; font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: .5px; }
#dev label { display: grid; grid-template-columns: 1fr 44px; gap: 2px 6px; align-items: center; margin: 3px 0; }
#dev label span { grid-column: 1 / 3; color: #ddd; }
#dev label input { width: 100%; }
#dev label output { text-align: right; font-variant-numeric: tabular-nums; }
#dev pre { margin: 10px 0 6px; padding: 8px; background: #333; border-radius: 4px; font-size: 11px; line-height: 1.4; white-space: pre; }
#dev .btns { display: flex; gap: 6px; }
#dev .btns button { flex: 1; background: #e8e8e8; color: #333; border: 0; border-radius: 5px; padding: 6px; cursor: pointer; }
.overlay.hidden { display: none; }
.overlay .btn.go { background: var(--green); }
.overlay .btn:hover { filter: brightness(1.08); }
/* Modale Tips : un conseil à la fois */
#tips .tip { width: 100%; max-width: 640px; background: rgba(0,0,0,.35); border-radius: 10px; padding: 14px 18px; box-sizing: border-box; color: #ddd; line-height: 1.5; }
#tips .tip h3 { margin: 0 0 8px; color: var(--accent); font-size: 20px; }
#tips .tip p { margin: 0 0 8px; text-align: left; max-width: none; }
#tips .tip ul { margin: 0 0 8px; padding-left: 20px; }
#tips .tip b { color: var(--accent); }
#tips .tipNav { display: flex; align-items: center; gap: 12px; color: #bbb; font-variant-numeric: tabular-nums; }
#tips .tipNav .btn { min-width: 0; width: auto; padding: 8px 18px; }

/* ---------- Gamification : annonces arcade, cartouche de score, bilan de fin ---------- */
#announce { position: absolute; left: 0; right: 0; bottom: 38%; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.ann { text-align: center; max-width: 94%; line-height: 1.05; font-weight: 900; font-size: min(28px, 6.5vw); letter-spacing: 2px; text-transform: uppercase; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; animation: annIn .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.ann.big { font-size: min(42px, 8.5vw); letter-spacing: 3px; }
.ann.small { font-size: min(15px, 3.8vw); font-weight: 600; letter-spacing: 0; text-transform: none; }
.ann.out { animation: annOut .4s ease-in both; }
@keyframes annIn { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes annOut { to { transform: translateY(-30px) scale(.8); opacity: 0; } }
#scoreBox { left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 2px; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
#scoreBox .sc { font-size: 22px; font-weight: 800; color: #f5c24b; }
#scoreBox .sc small { font-size: 12px; font-weight: 400; color: #ddd; }
#scoreBox .sc em { font-style: normal; font-size: 14px; color: #ff8cf0; margin-left: 8px; }
#scoreBox .push { position: relative; width: 140px; height: 16px; border-radius: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.4); overflow: hidden; font-size: 11px; }
#scoreBox .push span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4aa3ff, #7fd0ff); }
#scoreBox .push b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 1px 2px #000; }
#endStats { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: #ddd; }
#endStats .row { display: flex; justify-content: space-between; gap: 12px; animation: rowIn .3s ease-out both; }
#endStats .row b { color: #fff; text-align: right; }
#endStats .total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.3); font-size: 22px; }
#endStats .total b { color: #f5c24b; font-size: 28px; font-weight: 900; }
#endStats .best { text-align: center; color: #aaa; font-size: 12px; }
/* Classement en ligne dans l'écran de fin */
#board { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #ddd; }
#board.hidden { display: none; }
#board .send { display: flex; gap: 8px; }
#board .send input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; border: 0; border-radius: 8px; background: #e8e8e8; color: #333; }
#board .send .btn { min-width: 0; width: auto; padding: 8px 16px; font-size: 16px; }
#boardMsg { text-align: center; color: #aaa; font-size: 12px; min-height: 1em; }
#boardList { list-style: none; margin: 0; padding: 0; }
#boardList li { display: grid; grid-template-columns: 24px 1fr auto 44px; gap: 8px; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
#boardList li.me { background: rgba(245,194,75,.2); color: #fff; }
#boardList li.empty { display: block; text-align: center; color: #aaa; }
#boardList .rank { color: #aaa; text-align: right; }
#boardList .pts { font-weight: 700; color: #f5c24b; }
#boardList .secs { color: #aaa; text-align: right; font-size: 12px; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }