/* AEON — HUD. Owned by Opus 5 (app shell). */
:root{
  --ink:#e8e4dc; --dim:#9a948a; --line:rgba(232,228,220,.16);
  --panel:rgba(12,13,15,.62); --accent:#d8a54a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#07080a;
  font:14px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#view:active{cursor:grabbing}

.boot{position:fixed;inset:0;display:grid;place-items:center;background:#07080a;
  color:var(--dim);letter-spacing:.08em;text-transform:lowercase;z-index:50}
#splash{position:fixed;inset:0;background:#060708;z-index:60;opacity:1;
  transition:opacity .8s ease}
#splash.gone{opacity:0;pointer-events:none}
#splash canvas{position:absolute;inset:0;width:100%;height:100%}
.boot.err{color:#e08b6a;padding:2rem;text-align:center;white-space:pre-wrap;font:12px/1.6 ui-monospace,monospace}

#hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(10px,2vw,22px);overflow:hidden}
#hud>*{pointer-events:auto}

/* ---- readout (CONTRACT §3) ---- */
.aeon-readout{width:min(310px,44vw);background:var(--panel);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px 12px;align-self:flex-start;
  min-height:0;overflow:auto;max-height:calc(100dvh - 13.5rem)}
.ro-date{font:600 11px/1 ui-monospace,monospace;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.ro-name{font-size:19px;font-weight:600;margin:5px 0 12px;line-height:1.15;letter-spacing:-.01em}
.ro-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.ro-k{color:var(--dim);font-size:11.5px;letter-spacing:.03em;align-self:center}
.ro-v{margin:0;text-align:right;font:500 13px/1.5 ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ro-rule{grid-column:1/-1;height:1px;background:var(--line);margin:7px 0}
.ro-bar{position:relative}
.ro-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:linear-gradient(90deg,var(--accent) calc(var(--bar,0)*100%),rgba(232,228,220,.10) 0);border-radius:1px}
.ro-first{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ro-first-k{color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ro-first-v{font-size:12.5px;line-height:1.45;margin-top:3px;color:#f0ece2}
.ro-first.flash .ro-first-v{animation:flash .7s ease-out}
@keyframes flash{from{color:var(--accent)}to{color:#f0ece2}}
.ro-note{margin-top:9px;font:10px/1.4 ui-monospace,monospace;color:var(--dim);opacity:.8}
.ro-note.warn{color:#d9a05b}
.ro-note.ok{color:#7fa87a}

/* ---- slider (CONTRACT §3) ---- */
#bar{width:min(1100px,100%);margin:0 auto;flex-shrink:0}
.aeon-slider{position:relative;padding:26px 12px 6px}
.track{position:relative;height:4px;border-radius:3px;background:rgba(232,228,220,.14);
  cursor:pointer;touch-action:none}
.fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,#6b3a20,#a8703a 45%,#5f86a8 78%,#7fa87a)}
.ticks{position:absolute;inset:-14px 0}
.tick{position:absolute;top:0;width:16px;height:32px;margin-left:-8px;padding:0;border:0;
  background:none;cursor:pointer;display:grid;place-items:center}
.tickmark{width:1.5px;height:9px;background:rgba(232,228,220,.34);border-radius:1px;transition:.12s}
.tick:hover .tickmark{background:var(--ink);height:15px}
.tick.active .tickmark{background:var(--accent);height:17px;width:2px}
.handle{position:absolute;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:var(--ink);border:2px solid #14161a;box-shadow:0 1px 6px rgba(0,0,0,.6);cursor:grab;touch-action:none}
.handle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.aeon-slider.dragging .handle{cursor:grabbing;transform:scale(1.15)}
.aeon-slider.detent .handle{background:var(--accent)}
.floatlabel{position:absolute;top:2px;transform:translateX(-50%);font:600 11px/1 ui-monospace,monospace;
  letter-spacing:.08em;color:var(--ink);white-space:nowrap;pointer-events:none;text-shadow:0 1px 4px #000}
#scale{display:flex;justify-content:space-between;padding:4px 12px 0;
  font:10px/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--dim)}
#scale .hint{opacity:.55}
#fps{position:fixed;right:12px;top:12px;font:10px/1 ui-monospace,monospace;color:var(--dim);opacity:.55;pointer-events:none}

@media (max-width:640px){
  .aeon-readout{width:min(260px,64vw);padding:11px 12px 9px}
  .ro-name{font-size:16px}
  #scale .hint{display:none}
}

/* ---- WebXR entry ---- */
#vrbtn{position:fixed;right:14px;bottom:96px;z-index:20;padding:11px 22px;border-radius:10px;
  border:1px solid rgba(232,228,220,.3);background:rgba(12,13,15,.72);color:var(--ink);
  font:600 13px/1 ui-monospace,monospace;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(10px)}
#vrbtn:hover{border-color:var(--accent);color:var(--accent)}
#vrbtn:disabled{opacity:.5;cursor:wait}
#surveybtn{position:fixed;right:14px;bottom:148px;z-index:20;padding:9px 16px;border-radius:10px;
  border:1px solid rgba(232,228,220,.3);background:rgba(12,13,15,.72);color:var(--ink);
  font:600 12px/1 ui-monospace,monospace;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(10px);
  text-transform:uppercase}
#surveybtn:hover,#surveybtn.on{border-color:var(--accent);color:var(--accent)}
#surveybtn.on{background:rgba(216,165,74,.16)}

/* ---- chronicle ---- */
.ro-chron{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);max-height:170px;overflow:hidden}
.ro-ev{margin-top:6px;line-height:1.3}
.ro-ev-ma{font:600 10px/1 ui-monospace,monospace;color:var(--accent);margin-right:7px}
.ro-ev-t{font-size:12px;font-weight:600;color:#f0ece2}
.ro-ev-d{font-size:11px;line-height:1.35;color:#b9b3a8;margin-top:1px}
.ro-ev.next .ro-ev-t{color:var(--dim);font-weight:500}
.ro-ev.next .ro-ev-ma{color:var(--dim)}
.pips{position:absolute;left:0;right:0;top:10px;height:6px;pointer-events:auto}
.pip{position:absolute;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;
  background:rgba(216,165,74,.55);cursor:help}
.pip.k-catastrophe{background:rgba(224,110,80,.7)}
.pip.k-human{background:rgba(140,190,255,.7)}
.pip.k-atmosphere{background:rgba(150,220,190,.6)}
.pip.k-geology{background:rgba(200,200,200,.45)}

/* ---- day axis: sit well above the era slider so a stray click cannot
   land on it. The track itself does not take clicks — only the sun handle. */
#dayarc{position:relative;width:min(520px,92vw);margin:0 auto 16px;padding:7px 10px 8px;
  pointer-events:auto;background:rgba(12,13,15,.45);border:1px solid var(--line);
  border-radius:10px;backdrop-filter:blur(10px)}
.dayarc-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dayarc-k{color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
#dayarc-clock{font:600 13px/1 ui-monospace,monospace;font-variant-numeric:tabular-nums}
#dayarc-phase{font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;
  padding:2px 7px;border-radius:4px;background:rgba(232,228,220,.10)}
#dayarc-phase.night{background:rgba(40,55,110,.55);color:#c9d4f0}
#dayarc-phase.dawn,#dayarc-phase.dusk{background:rgba(179,84,46,.45);color:#f3d2b0}
#dayarc-phase.day{background:rgba(188,216,238,.22);color:#e8f2fa}
#dayarc-mode{font:11px/1.3 ui-sans-serif,system-ui,sans-serif;color:var(--dim)}
#dayarc.overriding #dayarc-mode{color:var(--accent);font-weight:600}
.dayarc-row{display:flex;align-items:center;gap:12px}
#dayarc-track{position:relative;flex:1;height:18px;border-radius:9px;pointer-events:none;
  background:linear-gradient(90deg,
    #0b1026 0%, #1a2340 14%, #b3542e 24%, #cfa54e 32%, #bcd8ee 46%,
    #cfe6f2 50%, #bcd8ee 54%, #cfa54e 68%, #b3542e 76%, #1a2340 86%, #0b1026 100%);
  border:1px solid rgba(232,228,220,.18)}
#dayarc-sun{position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;
  padding:0;border-radius:50%;background:#ffd98a;border:2px solid #14161a;
  box-shadow:0 0 10px rgba(255,217,138,.85);pointer-events:auto;cursor:grab;
  touch-action:none}
#dayarc-sun:active{cursor:grabbing}
#dayarc.authored #dayarc-sun{background:#d8a54a;box-shadow:0 0 6px rgba(216,165,74,.5)}
#dayarc-reset{flex:none;height:32px;padding:0 12px;border-radius:8px;
  border:1px solid rgba(232,228,220,.28);background:rgba(12,13,15,.7);
  color:var(--ink);font:600 12px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;
  letter-spacing:.02em;white-space:nowrap}
#dayarc-reset:hover{color:var(--accent);border-color:var(--accent)}
#dayarc.authored #dayarc-reset{opacity:.55}

/* ---- now living ---- */
.ro-alive{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.ro-alive-k{color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ro-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ro-chip{font:500 10.5px/1 ui-monospace,monospace;color:#d8d3c8;background:rgba(232,228,220,.08);
  border:1px solid rgba(232,228,220,.14);border-radius:9px;padding:3px 7px}
.ro-chip.sea{border-color:rgba(95,134,168,.5)}
.ro-chip.cover{border-color:rgba(127,168,122,.5)}