:root {
  --u: calc(100vh / 1080);                         /* 1 px at 1080p */
  --strip-w: calc(100vh * 9 / 16);                 /* one phone frame, portrait */
  --strip-cx: 36vw;                                /* centre of the fly strip */
  --strip-x: calc(var(--strip-cx) - var(--strip-w) / 2);
  --ink: #eef0ff;
  --dim: #8d93b5;
  --line: rgba(190, 200, 255, 0.12);
  --card: rgba(15, 17, 30, 0.74);
  --purple: #a78bfa;
  --purple-bg: rgba(139, 92, 246, 0.28);
  --pink: #f0abfc;
  --teal: #2dd4bf;
  --font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #090b13; color: var(--ink); font-family: var(--font); }
#stage { position: fixed; inset: 0; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }

.hud-header {
  position: absolute; left: calc(var(--strip-x) + 22 * var(--u)); top: calc(26 * var(--u));
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.hh-title { font-size: calc(17 * var(--u)); color: #d9ccff; }
.hh-sub { margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--dim); font-weight: 600; }

.hud-card {
  position: absolute; left: calc(var(--strip-x) + 18 * var(--u)); bottom: calc(22 * var(--u));
  width: calc(var(--strip-w) * 0.7);
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u));
  background: var(--card); border: 1px solid var(--line); border-radius: calc(16 * var(--u));
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow .3s, border-color .3s;
}
.hud-card.danger { border-color: rgba(255, 90, 90, 0.55); box-shadow: 0 0 calc(40 * var(--u)) rgba(255, 60, 60, 0.35); }
.cams { display: flex; gap: calc(8 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.cams button, .btns button {
  font: 600 calc(13 * var(--u)) var(--font); color: #c9cde6; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  border-radius: calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u));
}
.cams button.on { background: var(--purple-bg); border-color: rgba(167,139,250,0.75); color: #f1eaff; }
.stats { display: flex; gap: calc(28 * var(--u)); align-items: flex-end; }
.stat .lab { font-size: calc(11 * var(--u)); letter-spacing: 0.16em; color: var(--dim); font-weight: 700; }
.stat .val { margin-top: calc(2 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .v { font-size: calc(38 * var(--u)); font-weight: 700; color: #fff; line-height: 1.05; }
.stat.small .v { font-size: calc(24 * var(--u)); font-weight: 650; }
.stat .of { font-size: calc(16 * var(--u)); color: var(--dim); margin-left: calc(4 * var(--u)); }
.stat.bump .v { animation: bump .35s ease-out; }
@keyframes bump { 0% { color: var(--pink); text-shadow: 0 0 calc(14 * var(--u)) rgba(240,171,252,.8); } 100% { color: #fff; text-shadow: none; } }
.bar { height: calc(4 * var(--u)); background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; margin: calc(12 * var(--u)) 0 calc(10 * var(--u)); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #7c5cff, #f0abfc); transform-origin: left; transform: scaleX(0); }
.phases { display: flex; gap: calc(22 * var(--u)); font-size: calc(11.5 * var(--u)); letter-spacing: 0.15em; font-weight: 700; color: #5c6283; }
.phases .ph.on { color: #fff; }
.desc { margin-top: calc(9 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 650; color: #fff; }
.note { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--dim); min-height: 1em; }
.btns { display: flex; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.btns button { font-size: calc(12 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); }
.foot { margin-top: calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); color: #5f6588; }

.hud-flash {
  position: absolute; left: var(--strip-cx); top: 20vh; transform: translate(-50%, 0) scale(.6);
  font: 900 calc(64 * var(--u) * var(--fs, 1)) var(--font); letter-spacing: 0.02em; color: var(--fc, #fff);
  text-shadow: 0 0 calc(24 * var(--u)) currentColor, 0 calc(4 * var(--u)) 0 rgba(0,0,0,.6);
  opacity: 0; white-space: nowrap; pointer-events: none; text-transform: uppercase;
}
.hud-flash.go { animation: flashpop 1.1s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes flashpop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.08) rotate(1deg); }
  30% { transform: translate(-50%, 0) scale(1) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -20%) scale(1); }
}

#brain {
  position: fixed; right: 1.6vw; top: 2.4vh; bottom: 2.4vh; width: calc(var(--strip-w) * 0.8);
}
#brain.placeholder {
  border: 1px dashed var(--line); border-radius: calc(16 * var(--u)); display: grid; place-items: center;
  color: var(--dim); font-size: calc(14 * var(--u)); background: rgba(15,17,30,.5);
}

/* phone framing guide (key G) */
.guide { position: fixed; top: 0; bottom: 0; width: var(--strip-w); border: 2px dashed rgba(255,255,255,.35); pointer-events: none; display: none; }
.guide span { position: absolute; top: 8px; left: 8px; font-size: 12px; color: rgba(255,255,255,.6); }
body.show-guide .guide { display: block; }
#guideA { left: var(--strip-x); }
#guideB { right: calc(1.6vw - (var(--strip-w) * 0.1)); }

#loading { position: fixed; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 15px; letter-spacing: .1em; }
#fps { position: fixed; left: 8px; top: 8px; font: 12px ui-monospace, monospace; color: #7f8; display: none; }
body.show-fps #fps { display: block; }
body.clean #hud, body.clean #brain { display: none; }

/* calm mode (default): no pop-up labels. Key C toggles. */
body.calm .hud-flash, body.calm .legday-labels { display: none !important; }

/* portrait screens (phones): the fly strip is the whole width, the brain panel slides in from a button */
#brainBtn { display: none; }
@media (max-aspect-ratio: 1/1) {
  :root { --u: calc(min(100vh / 1080, 100vw / 608)); --strip-w: 100vw; --strip-cx: 50vw; }
  .hud-card { width: calc(100vw - 24px); left: 12px; bottom: 12px; }
  .hud-header { left: 16px; top: 16px; }
  #brain { display: none; left: 3vw; right: 3vw; width: auto; top: 3vh; bottom: 3vh; z-index: 5; }
  body.show-brain #brain { display: block; }
  #brainBtn { display: block; position: fixed; right: 12px; top: 12px; z-index: 6; font: 700 14px var(--font);
    color: #f1eaff; background: rgba(139,92,246,.35); border: 1px solid rgba(167,139,250,.8); border-radius: 10px; padding: 9px 14px; }
  .guide { display: none !important; }
}