:root {
  --bg: #0b1020;
  --panel: rgba(8, 12, 28, 0.86);
  --fg: #f4f6ff;
  --muted: #b9c2e0;
  --accent: #ffb000;
  --accent-2: #2ec4b6;
  --danger: #e71d36;
  --ok: #80ed99;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 14px;
  background: var(--accent); color: #111; font-weight: 700; }
button.secondary { background: #2b3358; color: var(--fg); }
button.danger { background: var(--danger); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
input, select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid #47507a;
  background: #141a33; color: var(--fg); width: 100%; }
label { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 3px; }
a { color: var(--accent-2); }

/* ---- vue telephone -------------------------------------------------------- */
#stage { position: fixed; inset: 0; overflow: hidden; }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

#hud-top { position: fixed; z-index: 6; top: 0; left: 0; right: 0; padding: 10px 12px; display: flex; gap: 10px;
  align-items: center; background: linear-gradient(rgba(8,12,28,.92), rgba(8,12,28,0)); pointer-events: none; }
#hud-top .chip { background: var(--panel); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  border: 1px solid #3a4470; pointer-events: auto; white-space: nowrap; }
#hud-top .chip.warn { border-color: var(--accent); color: var(--accent); }
#hud-top .chip.err { border-color: var(--danger); color: #ff8a97; }
#hud-top button.chip.toggle { color: var(--fg); font-weight: 700; cursor: pointer; }
#hud-top button.chip.toggle[aria-pressed="true"] { background: var(--accent); color: #111; border-color: var(--accent); }
#hud-top button.chip.gear { font-size: 18px; line-height: 1; padding: 4px 10px; }

#cal { position: fixed; z-index: 8; top: 62px; left: 10px; right: 10px; max-width: 460px; margin: 0 auto; background: var(--panel);
  border: 1px solid #3a4470; border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(6px); }
#cal .cal-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
#cal .cal-title button { padding: 4px 10px; }
#cal .cal-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#cal .cal-label { color: var(--muted); font-size: 13px; }
#cal .chip { background: #141a33; border-radius: 999px; padding: 4px 10px; font-size: 13px; border: 1px solid #3a4470; }
#cal .chip.warn { border-color: var(--accent); color: var(--accent); }
#cal .chip.err { border-color: var(--danger); color: #ff8a97; }
#cal p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; }
#cal .cal-row { display: flex; gap: 8px; flex-wrap: wrap; }
#cal .cal-row button { flex: 1 1 auto; padding: 10px 8px; }
#cal .cal-val { margin-top: 8px; font-weight: 700; color: var(--accent); }

/* ---- carte (vue telephone) ------------------------------------------------ */
#map-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 46vh; z-index: 5; background: #1c2340; overflow: hidden; }
#map-panel #map { position: absolute; inset: 0; }
#map-panel .map-btn { position: absolute; left: 10px; bottom: 10px; z-index: 1000; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; background: var(--panel); color: var(--fg); border: 1px solid #3a4470; font-size: 22px; }
#map-panel .map-btn.on { background: var(--accent-2); color: #111; }
.me-marker { width: 18px; height: 18px; border-radius: 50%; background: #3a86ff; border: 3px solid #fff; box-shadow: 0 0 0 3px #3a86ff66; }
.me-marker .dir { position: absolute; left: 50%; top: -14px; width: 0; height: 0; margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #fff; transform-origin: 50% 23px; }
.obj-pin { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 0 0 2px #0008; transform: rotate(45deg); }
.obj-pin.near { box-shadow: 0 0 0 4px #80ed99; }
.leaflet-container { font: inherit; }
#compass { margin-left: auto; width: 48px; height: 48px; border-radius: 50%; background: var(--panel);
  border: 1px solid #3a4470; display: grid; place-items: center; font-weight: 800; pointer-events: auto; }
#compass span { display: inline-block; transition: transform .15s; }

#hud-bottom { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; max-height: 46vh; overflow: auto;
  background: var(--panel); border-top: 1px solid #3a4470; backdrop-filter: blur(6px);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
#hud-bottom h2 { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 8px; }
#hud-bottom h2 .grow { flex: 1; }
.obj { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid #262e52; }
.obj:last-child { border-bottom: 0; }
.obj .arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; font-weight: 900; border: 2px solid currentColor; }
.obj .arrow span { display: inline-block; transition: transform .2s; }
.obj .name { font-weight: 700; }
.obj .guid { color: var(--muted); font-size: 13px; }
.obj .near { color: var(--ok); }
.obj .beh { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #2b3358; color: var(--fg);
  margin-left: 6px; vertical-align: middle; }
.obj button { padding: 8px 12px; }
.empty { color: var(--muted); padding: 10px 6px; }

#dpad { position: fixed; z-index: 7; right: 10px; bottom: calc(46vh + 12px); display: grid; grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px); gap: 4px; }
#dpad button { padding: 0; background: var(--panel); color: var(--fg); border: 1px solid #3a4470; font-size: 18px; }
#dpad .c { background: var(--accent-2); color: #111; }

#start { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; gap: 14px; z-index: 10; text-align: center; }
#start h1 { margin: 0; font-size: 34px; letter-spacing: .5px; }
#start h1 b { color: var(--accent); }
#start p { max-width: 420px; color: var(--muted); margin: 0; }
#start .opts { text-align: left; width: min(420px, 100%); background: #141a33; border-radius: 12px; padding: 12px 16px; }
#start .opts label { display: flex; gap: 10px; align-items: center; color: var(--fg); font-size: 15px; margin: 8px 0; }
#start .opts input[type=checkbox] { width: 20px; height: 20px; }
#start button.big { font-size: 20px; padding: 14px 34px; }
#start .err { color: #ff8a97; font-weight: 600; }

#toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: var(--ok); color: #111;
  font-weight: 800; padding: 10px 18px; border-radius: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 20; }
#toast.show { opacity: 1; }

/* ---- admin ---------------------------------------------------------------- */
body.admin { display: grid; grid-template-columns: 1fr 360px; grid-template-rows: 100vh; }
body.admin #map { height: 100vh; background: #1c2340; }
#side { overflow: auto; padding: 14px; border-left: 1px solid #3a4470; background: #0f1530; }
#side h1 { margin: 0 0 6px; font-size: 20px; } #side h1 b { color: var(--accent); }
#side h2 { font-size: 14px; color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
#side .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
#side .row button { flex: 1; }
#side .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.list-item { padding: 7px 8px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.list-item:hover, .list-item.sel { background: #1c2547; }
.list-item .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid #fff5; }
.list-item .sub { color: var(--muted); font-size: 12px; }
.list-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint { color: var(--muted); font-size: 13px; }
.leaflet-container { font: inherit; }
.obj-marker { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 0 0 2px #0008; transform: rotate(45deg); }
.obj-marker.collected { opacity: .35; }
.dev-marker { width: 16px; height: 16px; border-radius: 50%; background: #3a86ff; border: 2px solid #fff; box-shadow: 0 0 0 3px #3a86ff55; }
.dev-marker.stale { background: #6b7394; box-shadow: none; }
@media (max-width: 800px) {
  body.admin { grid-template-columns: 1fr; grid-template-rows: 55vh 45vh; }
  #map { height: 55vh; } #side { border-left: 0; border-top: 1px solid #3a4470; }
}