/* Everest '96 — dusk-committed single theme */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #0a1424;
  --bg-1: #101f36;
  --panel: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.10);
  --ink: #e8eef5;
  --ink-2: #a7b8cc;
  --ink-3: #7488a0;
  --distress: #fab219;
  --dead: #4a5563;
}

html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  padding: 14px 20px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  border-bottom: 1px solid var(--line);
}
header h1 { font-size: 19px; font-weight: 650; letter-spacing: 0.2px; }
header .sub { font-size: 12.5px; color: var(--ink-2); }
#legend {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--ink-2);
  align-items: center;
}
#legend .item { display: inline-flex; align-items: center; gap: 6px; }
.chip {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75);
  flex: none;
}
.chip.staff { border-radius: 1px; transform: rotate(45deg) scale(0.92); }
#legend .chip.dead { background: var(--dead); }
#legend .chip.halo { background: transparent; box-shadow: 0 0 0 2px var(--distress); }
#legend .chip.shape { background: #8ba0b8; }

/* ── Main: scene + roster ───────────────────────────────────────────────── */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  min-height: 0;
}
#scenewrap { position: relative; padding: 8px 0 0 8px; min-width: 0; }
#scene { width: 100%; height: auto; max-height: calc(100vh - 235px); display: block; }

/* mountain scene — sky moods (set per event via data-sky on #scene) */
#scene {
  --sky-top: #0a1424; --sky-mid: #16304e; --sky-low: #2a4a6b;
  --stars: 0.7; --far: #22405f; --mnt-dim: 0;
  --peak-ink: #d9e5f2; --sky-ink: #b9cadd; --snow-ink: #3d5064; --snow-op: 0;
  --cloud-col: #c7d2df; --cloud-op: 0; --wind: 0; --plume: 0; --vig: 0;
  --glow: 0; --moon: 0.4;
}
#scene[data-sky="day"] {
  --sky-top: #4d7fae; --sky-mid: #7fa9cf; --sky-low: #b9d2e6;
  --stars: 0; --far: #7d9cbd; --peak-ink: #14304a; --sky-ink: #17334f;
  --cloud-col: #ffffff; --cloud-op: 0.18; --moon: 0;
}
#scene[data-sky="dawn"] {
  --sky-top: #232e55; --sky-mid: #6d5f86; --sky-low: #d99a66;
  --stars: 0.15; --far: #45496e; --peak-ink: #f2ece6; --sky-ink: #f0e9e2;
  --glow: 0.55; --cloud-col: #f2cfae; --cloud-op: 0.12; --moon: 0.1;
}
#scene[data-sky="dusk"] {
  --sky-top: #1c2947; --sky-mid: #45537e; --sky-low: #c07b58;
  --stars: 0.3; --far: #2c3f66; --peak-ink: #eee9e4; --sky-ink: #e8e2dc;
  --glow: 0.42; --cloud-col: #d8bfae; --cloud-op: 0.15; --moon: 0.3;
}
#scene[data-sky="clear-night"] {
  --sky-top: #060d1c; --sky-mid: #10233f; --sky-low: #1d3757;
  --stars: 1; --far: #182f4b; --moon: 0.95;
}
#scene[data-sky="gale"] {
  --sky-top: #3f4a57; --sky-mid: #5d6875; --sky-low: #7e8894;
  --stars: 0; --far: #4d5a68; --mnt-dim: 0.12;
  --peak-ink: #e8edf2; --sky-ink: #e8edf2;
  --cloud-col: #97a2ae; --cloud-op: 0.5; --wind: 0.4; --plume: 0.6;
  --vig: 0.2; --moon: 0;
}
#scene[data-sky="storm"] {
  --sky-top: #10151d; --sky-mid: #202730; --sky-low: #333c46;
  --stars: 0; --far: #171d24; --mnt-dim: 0.42;
  --peak-ink: #9aa7b5; --sky-ink: #9aa7b5; --snow-ink: #9db0c2; --snow-op: 0.95;
  --cloud-col: #454f5b; --cloud-op: 0.72; --wind: 0.68; --plume: 0.8;
  --vig: 0.48; --moon: 0;
}
#scene[data-sky="clearing"] {
  --sky-top: #0b1526; --sky-mid: #1a3050; --sky-low: #2e4a68;
  --stars: 0.45; --far: #1f3854; --mnt-dim: 0.08; --snow-op: 0.25;
  --cloud-col: #93a5ba; --cloud-op: 0.25; --wind: 0.15; --plume: 0.25;
  --vig: 0.12; --moon: 0.55;
}
#sky stop { transition: stop-color 1.4s ease; }
#sky stop:nth-of-type(1) { stop-color: var(--sky-top); }
#sky stop:nth-of-type(2) { stop-color: var(--sky-mid); }
#sky stop:nth-of-type(3) { stop-color: var(--sky-low); }
#stars { opacity: var(--stars); transition: opacity 1.4s ease; }
#farridge { fill: var(--far); transition: fill 1.4s ease; }
#dimmer { opacity: var(--mnt-dim); transition: opacity 1.4s ease; pointer-events: none; }
#alpenglow { opacity: var(--glow); transition: opacity 1.4s ease; pointer-events: none; }
#moon { opacity: var(--moon); transition: opacity 1.4s ease; pointer-events: none; }
#vig { opacity: var(--vig); transition: opacity 1.4s ease; pointer-events: none; }

#cloudlayer {
  fill: var(--cloud-col);
  opacity: var(--cloud-op);
  transition: opacity 1.4s ease, fill 1.4s ease;
  pointer-events: none;
}
.drift-a { animation: drift 110s linear infinite; }
.drift-b { animation: drift 70s linear infinite; }
#scene[data-sky="gale"] .drift-a { animation-duration: 42s; }
#scene[data-sky="gale"] .drift-b { animation-duration: 26s; }
#scene[data-sky="storm"] .drift-a { animation-duration: 22s; }
#scene[data-sky="storm"] .drift-b { animation-duration: 13s; }
@keyframes drift { to { transform: translateX(-1000px); } }

#plume { opacity: var(--plume); transition: opacity 1.4s ease; pointer-events: none; }
#plume path {
  transform-box: fill-box; transform-origin: 0% 50%;
  animation: plume 3.2s ease-in-out infinite alternate;
}
@keyframes plume { to { transform: translateX(14px) scaleX(1.05); } }

#wind {
  stroke: #e4ecf5; stroke-width: 1.3; stroke-linecap: round;
  opacity: var(--wind); transition: opacity 1.4s ease; pointer-events: none;
}
.gust { animation: gust linear infinite; }
@keyframes gust { to { transform: translateX(1500px); } }

#snow { opacity: var(--snow-op); transition: opacity 1.2s ease; pointer-events: none; }
.flake { fill: #e6edf6; animation: fall linear infinite; }
@keyframes fall { to { transform: translate(150px, 700px); } }
@media (prefers-reduced-motion: reduce) {
  #snow, #wind { display: none; }
  .drift-a, .drift-b, #plume path { animation: none; }
}

.wplabel { font-size: 10.5px; letter-spacing: 0.2px; }
.wplabel.snow { fill: var(--snow-ink); transition: fill 1.4s ease; }
.wplabel.sky { fill: var(--sky-ink); transition: fill 1.4s ease; }
.wplabel.valley { fill: #8fa3ba; }
.peak-label { fill: var(--peak-ink); transition: fill 1.4s ease; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; }
.peak-label.minor { font-size: 10.5px; letter-spacing: 1px; }
.region-label { fill: #7d93ab; font-size: 10px; font-style: italic; }
.tick { fill: #43596e; }
.tent { fill: rgba(244, 248, 252, 0.8); stroke: #3d5468; stroke-width: 1.3; stroke-linejoin: round; }
.trail { fill: none; stroke: #56707c; stroke-width: 1.2; stroke-dasharray: 2 5; opacity: 0.7; }
.climb { fill: none; stroke: #5b7089; stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; }

/* people */
.person { cursor: pointer; }
#people.animate .person { transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s; }
.person .dot { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
.team-ac .dot { fill: #2a78d6; }
.team-mm .dot { fill: #e34948; }
.team-tw .dot { fill: #b37700; }
.team-imax .dot { fill: #4a3aa7; }
.person .cross { display: none; stroke: #f3f6fa; stroke-width: 1.7; stroke-linecap: round; }
.person.dead .dot { fill: var(--dead); stroke: #9aa7b5; }
.person.dead .cross { display: block; }
.person .halo { fill: none; stroke: var(--distress); stroke-width: 2; opacity: 0; }
.person.distress .halo { opacity: 1; animation: pulse 1.6s ease-out infinite; }
.person.dead .halo { display: none; }
.person.off { opacity: 0; pointer-events: none; }
.person.hi .dot { stroke: #ffffff; stroke-width: 3; }
@keyframes pulse {
  0%   { r: 8;  stroke-opacity: 0.9; }
  70%  { r: 15; stroke-opacity: 0; }
  100% { r: 15; stroke-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .person { transition: none; }
  .person.distress .halo { animation: none; r: 10; stroke-opacity: 0.9; }
}

/* tooltip */
#tip {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-width: 240px;
  padding: 8px 10px;
  background: rgba(9, 17, 30, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-2);
  pointer-events: none;
  z-index: 5;
}
#tip.on { display: flex; }
#tip strong { color: var(--ink); font-size: 13px; }
#tip .tteam { font-weight: 600; }
#tip .tloc { color: var(--ink); }
#tip .tnote { font-style: italic; }
#tip .tst { color: var(--distress); font-weight: 600; }

/* roster */
#roster {
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 10px 14px 16px;
  font-size: 12.5px;
}
.rteam h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-2);
  margin: 14px 0 6px;
}
.rteam:first-child h3 { margin-top: 2px; }
.rteam .count { color: var(--ink-3); font-weight: 400; }
.prow {
  display: grid;
  grid-template-columns: 10px 1fr;
  grid-template-areas: "chip name" ". loc";
  column-gap: 7px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: default;
}
.prow:hover { background: var(--panel); }
.prow .chip { grid-area: chip; width: 9px; height: 9px; }
.prow .pname { grid-area: name; color: var(--ink); }
.prow .ploc { grid-area: loc; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.prow.dead .pname { color: var(--ink-3); }
.prow.dead .chip { background: var(--dead) !important; }
.prow.offm .chip { opacity: 0.35; }
.prow.distress .ploc { color: var(--distress); }

/* ── Event bar ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 10px 16px 12px; }
#eventbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
#eventbar button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s;
  flex: none;
}
#eventbar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
#eventbar button:disabled { opacity: 0.3; cursor: default; }
#eventinfo { min-height: 86px; }
#emeta { display: flex; gap: 10px; align-items: baseline; }
#edate { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--distress); }
#ewx {
  display: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 1px 9px 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #b9c9dc;
}
#ewx.on { display: inline-block; }
#ewx.wx-storm { color: #f0b3ab; border-color: rgba(240, 179, 171, 0.45); }
#ewx.wx-clearing { color: #a9d8bc; border-color: rgba(169, 216, 188, 0.4); }
#ewx.wx-clear-night { color: #cfe0f5; border-color: rgba(207, 224, 245, 0.4); }
#ecount { font-size: 11px; color: var(--ink-3); }
#etitle { font-size: 16px; font-weight: 650; margin: 2px 0 3px; }
#ebody { font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; }

/* scrubber */
#scrub {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sgroup .sticks { display: flex; gap: 3px; }
.stick {
  width: 9px; height: 16px;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  padding: 0;
}
.stick:hover { background: rgba(255, 255, 255, 0.4); }
.stick.past { background: rgba(250, 178, 25, 0.35); }
.stick.cur { background: var(--distress); }
.slabel { font-size: 10px; color: var(--ink-3); text-align: center; margin-top: 3px; }

#credits {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 10px;
}
#credits a { color: var(--ink-2); }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  main { grid-template-columns: 1fr; }
  #scene { max-height: none; }
  #roster { border-left: none; border-top: 1px solid var(--line); max-height: 300px; }
  #legend { margin-left: 0; }
}