:root {
  --ink: #f4f1e8;
  --panel: rgba(12, 18, 24, 0.62);
  --accent: #ffb547;
  --warn: #ff5a4e;
  --ok: #7be0a5;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1016; color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
#globe { position: absolute; inset: 0; }
.cesium-viewer-bottom { opacity: .75; }

#hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 8px 10px; background: var(--panel); border-radius: 10px;
  backdrop-filter: blur(4px); pointer-events: none; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); box-sizing: border-box; }
#hud .cell { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
#hud .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
#hud .val { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
#hud .unit { font-size: 10px; opacity: .6; }

#horizon { position: absolute; right: 16px; bottom: 70px; width: 110px; height: 110px; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(255,255,255,.5); background: #7a5230; pointer-events: none; }
#hz-sky { position: absolute; left: -50%; width: 200%; height: 200%; top: -150%; background: #3d8fd6;
  border-bottom: 2px solid #fff; transform-origin: 50% 100%; }
#hz-mark { position: absolute; left: 25%; right: 25%; top: 50%; height: 3px; margin-top: -1px; background: var(--accent); }
#hz-mark::after { content: ""; position: absolute; left: 50%; top: -4px; width: 6px; height: 6px; margin-left: -3px;
  background: var(--accent); border-radius: 50%; }

#where { position: absolute; left: 16px; bottom: 70px; padding: 6px 10px; background: var(--panel);
  border-radius: 8px; font-size: 13px; pointer-events: none; }
#alert { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); padding: 8px 16px;
  border-radius: 8px; font-weight: 700; letter-spacing: .05em; display: none; text-align: center; }
#alert.warn { display: block; background: rgba(255, 90, 78, .85); }
#alert.info { display: block; background: rgba(20, 30, 40, .85); color: var(--ok); }

#spawns { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; }
#spawns button, #help-go { background: var(--panel); color: var(--ink); border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
#spawns button:hover { border-color: var(--accent); }

#help { position: absolute; inset: 0; z-index: 10; margin: auto; width: min(460px, calc(100vw - 32px)); height: fit-content;
  max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  background: rgba(12, 18, 24, .92); border-radius: 12px; padding: 18px 22px; display: none; }
#help.open { display: block; }
#help h1 { margin: 0 0 6px; font-size: 22px; color: var(--accent); }
#help table { border-collapse: collapse; width: 100%; font-size: 14px; }
#help td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
#help td:first-child { white-space: nowrap; color: var(--accent); font-weight: 600; }
#help .small { font-size: 12px; opacity: .7; }
#help-go { margin-top: 8px; background: var(--accent); color: #111; font-weight: 700; text-align: center; width: 100%; }

@media (max-width: 700px) {
  #spawns { top: auto; bottom: 190px; }
  #hud .cell { min-width: 48px; }
  #hud .val { font-size: 17px; }
}

/* ---------- Mobile ---------- */
#touch, #menu-btn, #rotate, #help .tactile { display: none; }
body.mobile #help .keys, body.mobile #help .small:not(#cache-info):not(.credits) { display: none; }
body.mobile #help .tactile { display: table; }
body.mobile #help { padding: 14px 16px; }
body.mobile #help h1 { font-size: 19px; }
body.mobile #help p { font-size: 13px; margin: 4px 0 8px; }
body.mobile #help td { font-size: 13px; }

body.mobile { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.mobile #touch { display: block; }
#joy { position: absolute; left: calc(18px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom));
  width: 136px; height: 136px; border-radius: 50%; background: rgba(12, 18, 24, .35);
  border: 2px solid rgba(255,255,255,.35); touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(255, 181, 71, .85); box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
body.tilt #joy { opacity: .25; pointer-events: none; }
#thr { position: absolute; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom));
  width: 56px; height: 150px; border-radius: 12px; background: rgba(12, 18, 24, .45);
  border: 2px solid rgba(255,255,255,.35); overflow: hidden; touch-action: none; }
#thr-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(255, 181, 71, .75); pointer-events: none; }
#thr span { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; pointer-events: none; }
#tbtns { position: absolute; right: calc(88px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px; }
#tbtns button, #menu-btn, #rotate button { background: rgba(12, 18, 24, .6); color: var(--ink); border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; touch-action: manipulation; }
#tbtns button.on { background: var(--accent); color: #111; }
#t-recal { display: none; }
body.tilt #t-recal { display: block; }

body.mobile #menu-btn { display: block; position: absolute; top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left)); font-size: 18px; padding: 4px 11px; }
body.mobile #spawns { display: none; top: calc(50px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left));
  bottom: auto; z-index: 5; }
body.mobile #spawns.open { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: calc(100vh - 60px - env(safe-area-inset-top)); overflow-y: auto; }
body.mobile #spawns button { padding: 8px 12px; font-size: 14px; }

body.mobile #hud { top: calc(6px + env(safe-area-inset-top)); padding: 4px 8px; gap: 8px; flex-wrap: nowrap;
  max-width: calc(100vw - 120px); }
body.mobile #hud .cell { min-width: 40px; }
body.mobile #hud .val { font-size: 16px; }
body.mobile #hud .lbl { font-size: 8px; }
body.mobile #hud .unit { display: none; }
body.mobile #horizon { width: 64px; height: 64px; right: calc(8px + env(safe-area-inset-right)); bottom: auto;
  top: calc(8px + env(safe-area-inset-top)); }
body.mobile #where { left: 50%; transform: translateX(-50%); bottom: auto; top: calc(56px + env(safe-area-inset-top));
  font-size: 11px; padding: 3px 8px; white-space: nowrap; }
body.mobile #alert { top: calc(84px + env(safe-area-inset-top)); font-size: 13px; max-width: calc(100vw - 32px); }
body.mobile .cesium-viewer-fullscreenContainer { display: none !important; }
body.mobile .cesium-viewer-bottom { transform: scale(.75); transform-origin: left bottom; left: 170px; }

#rotate { position: absolute; inset: 0; z-index: 20; background: rgba(11, 16, 22, .94); flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px; box-sizing: border-box; }
#rotate.show { display: flex; }
#rotate p { font-size: 17px; max-width: 280px; }

/* portrait : le HUD passe sur deux lignes */
@media (orientation: portrait) {
  body.mobile #hud { flex-wrap: wrap; max-width: calc(100vw - 130px); }
  body.mobile #where { top: calc(96px + env(safe-area-inset-top)); }
  body.mobile #alert { top: calc(124px + env(safe-area-inset-top)); }
}

/* boost */
#spawns button.on { border-color: var(--accent); color: var(--accent); }
body.boosting #h-spd { color: #ff7ad9 !important; }
body.boosting #hud { box-shadow: 0 0 0 2px #ff7ad9; }