/* Projected overlays: HUD, cards, vote bars. Type sizes are vw-based so a
   1920 projector gets ≥ 28px body copy (tokens.css --body-size). */
#hud, #stage { position: absolute; inset: 0; pointer-events: none; }

/* ---- HUD: Ship Velocity, top-left ---- */
.hud-sv {
  position: absolute; left: 2.2vw; top: 2vw;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 1vw; align-items: center;
  padding: .8vw 1.2vw .9vw; border-radius: .9vw;
  background: var(--slate); color: var(--light);
  transition: opacity .5s ease, transform .5s var(--ease-float);
}
.hud-sv[hidden] { display: none; }
.hud-sv::after { /* cel facet: a lighter slab behind, offset up-right */
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: #3a4866; transform: translate(.45vw, -.45vw);
}
.hud-label { font-family: var(--font-display); font-size: clamp(14px, 1.05vw, 26px); letter-spacing: .08em; color: var(--cyan); }
.hud-num { grid-row: 1 / span 2; font-family: var(--font-mono); font-weight: 700; font-size: clamp(26px, 2.6vw, 60px); line-height: 1; color: var(--cyan); min-width: 1.4em; text-align: right; }
.hud-track { position: relative; width: 14vw; height: .75vw; border-radius: 1vw; background: #4b5b7c; overflow: hidden; margin-top: .35vw; }
.hud-fill { position: absolute; inset: 0; width: calc(var(--pct, 0) * 1%); background: var(--cyan); border-radius: inherit; transition: width .9s var(--ease-out); }
.hud-tick { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 2px; background: var(--light); opacity: .5; }
.hud-sv.bump { transform: translateY(-.2vw); }

/* ---- cards ---- */
.card-wrap {
  position: absolute; left: 50%; bottom: 6vh; width: min(78vw, 1500px);
  transform: translate(-50%, 0); display: flex; justify-content: center;
  transition: opacity .42s ease, transform .5s var(--ease-float);
}
.card-wrap.enter { opacity: 0; transform: translate(-50%, 2.5vh); }
.card-wrap.enter-over { opacity: 0; transform: translate(-50%, 18vh) scale(.96); }
.card-wrap.enter.in { opacity: 1; transform: translate(-50%, 0); transition-delay: var(--delay, 0ms); }
.card-wrap.enter-over.in { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .35s ease var(--delay, 0ms), transform .9s var(--ease-over) var(--delay, 0ms); }
.card-wrap.out { opacity: 0; transform: translate(-50%, 3vh) scale(.985); transition: opacity .32s ease, transform .4s var(--ease-float); }

.card {
  position: relative; width: 100%; max-height: 88vh; overflow: hidden;
  padding: 2.2vw 2.8vw 2.4vw; border-radius: 1.6vw;
  background: var(--card); color: var(--light);
}
.card::before { /* the second slab from 09: lighter, offset up-right, hard edge */
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: #9dbfcb; transform: translate(1.1vw, -1.1vw);
}
.eyebrow { font-family: var(--font-display); font-size: clamp(14px, 1.15vw, 28px); letter-spacing: .14em; color: var(--gold-text); text-shadow: 0 .08em 0 rgba(31, 45, 69, .55); }
.card-title, .card-body, .lobby-join { text-shadow: 0 .06em .12em rgba(31, 45, 69, .35); }
.tag { font-family: var(--font-mono); font-size: clamp(14px, 1.05vw, 26px); color: var(--slate); background: var(--light); padding: .2em .7em; border-radius: 2em; min-height: 1.4em; }
.tag:empty { visibility: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1vw; margin-bottom: .6vw; }
.card-title { font-family: var(--font-display); font-weight: 400; font-size: var(--display-size); line-height: 1.05; margin: 0 0 .6vw; color: var(--light); }
.card-body { font-size: var(--body-size); line-height: 1.35; margin: 0 0 1.2vw; color: var(--light); font-weight: 500; max-width: 60ch; }
.card-live { font-family: var(--font-mono); font-size: var(--small-size); color: var(--slate); margin: -.4vw 0 1vw; }

/* options */
.options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3vw; align-items: start; }
.card-decision.two .options { grid-template-columns: repeat(2, 1fr); max-width: 70%; }
.opt {
  position: relative; display: grid; grid-template-columns: 4.2vw 1fr; grid-template-rows: auto auto; column-gap: 1vw; row-gap: .7vw;
  padding: 1vw 1.2vw 1.1vw; border-radius: 1vw; background: #88adba;
  transition: background .4s ease, transform .5s var(--ease-float), opacity .4s ease;
}
.opt-shape { grid-row: 1 / span 2; }
.shape { width: 4.2vw; height: 4.2vw; display: block; fill: none; stroke: var(--shape); stroke-width: 4.5; }
.opt-label { display: block; font-size: var(--body-size); font-weight: 800; line-height: 1.15; }
.opt-desc { display: block; font-size: calc(var(--body-size) * .9); line-height: 1.3; margin-top: .3vw; font-weight: 500; }
.opt .bar { grid-column: 2; position: relative; height: 1vw; border-radius: 1vw; background: #6f8e9a; overflow: hidden; opacity: 0; transition: opacity .4s ease; }
.card-decision.vote .bar, .card-decision.result .bar { opacity: 1; }
.bar-fill { position: absolute; inset: 0; width: calc(var(--pct, 0) * 1%); background: var(--light); border-radius: inherit; transition: width .7s var(--ease-out); }
.bar-pct { position: absolute; right: .6vw; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: calc(var(--small-size) * .9); font-weight: 700; color: var(--slate); line-height: 1; }
.opt-A .bar-fill { background: var(--cyan); } .opt-B .bar-fill { background: var(--coral); } .opt-C .bar-fill { background: var(--gold); }
.opt.active { background: #5f8390; transform: translateY(-.3vw); }
.opt.active::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .25vw var(--light); pointer-events: none; }
.card-decision.result .opt:not(.active) { opacity: .62; }
.card-decision.speech .card-body, .card-decision.speech .card-live { display: none; }
.card-decision.speech .opt-shape .shape { stroke-width: 6; }
.card-decision.held .bar { opacity: 0; }

/* banners: consequence and pulse, a single line that lands low and wide */
.card-banner { width: auto; min-width: 46vw; max-width: 80vw; padding: 1.6vw 2.6vw 1.8vw; text-align: left; }
.banner-text { font-size: var(--body-size); line-height: 1.35; margin: .4vw 0 0; font-weight: 600; }
.card-pulse { background: var(--slate); }
.card-pulse::before { background: #3a4866; }
.card-pulse .eyebrow { color: var(--coral); }

/* title and briefing */
.card[data-card="title"] { width: auto; min-width: 42vw; text-align: center; padding: 3vw 5vw 3.2vw; }
.pixel-mark { width: 7vw; height: 7vw; margin: 0 auto 1.2vw; }
.pixel-mark rect { transform-box: fill-box; transform-origin: center; animation: pix-pop 3.8s var(--ease-float) calc(var(--i) * -.25s) infinite; }
@keyframes pix-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }
.wordmark { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1; letter-spacing: .06em; font-size: clamp(40px, 5.2vw, 130px); color: var(--light); }
.wordmark.big { font-size: clamp(56px, 8.4vw, 200px); }
.tagline { font-family: var(--font-mono); font-size: var(--body-size); margin: .6vw 0 0; color: var(--slate); }
.card[data-card="briefing"] { width: min(46vw, 900px); align-self: flex-start; margin-right: auto; padding: 1.8vw 2.4vw 2vw; }
.card-wrap:has(.card-briefing) { bottom: auto; top: 50%; transform: translate(-50%, -50%); left: 28%; width: auto; }
.card-wrap.enter:has(.card-briefing) { transform: translate(-50%, calc(-50% + 2.5vh)); }
.card-wrap.enter.in:has(.card-briefing) { transform: translate(-50%, -50%); }
.card-wrap.out:has(.card-briefing) { transform: translate(-50%, calc(-50% + 3vh)); }
.briefing-body { font-size: var(--body-size); }
.briefing-body p { font-size: var(--body-size); line-height: 1.35; margin: .7vw 0 0; font-weight: 500;
  opacity: 0; translate: 0 .6vw; animation: brief-in .7s var(--ease-out) calc(.35s + var(--i) * .55s) forwards; }
@keyframes brief-in { to { opacity: 1; translate: 0 0; } }

/* lobby */
.card[data-card="lobby"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3vw; align-items: center; }
.lobby-left { min-width: 0; }
.lobby-join { font-size: var(--body-size); margin: 1.4vw 0 .2vw; font-weight: 600; }
.lobby-url { font-family: var(--font-mono); font-size: clamp(28px, 2.6vw, 60px); margin: 0; color: var(--slate); font-weight: 700; overflow-wrap: anywhere; }
.lobby-count { font-family: var(--font-mono); font-size: var(--body-size); margin: 1vw 0 0; color: var(--light); }
.lobby-qr { box-sizing: border-box; width: min(21vw, 40vh); height: min(21vw, 40vh); background: var(--light); border-radius: 1vw; padding: 1.1vw; flex-shrink: 0; }
.lobby-qr svg { width: 100%; height: 100%; display: block; }
.lobby-qr:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card-wrap, .card-wrap.in, .card-wrap.out, .opt, .bar-fill, .hud-fill, .hud-sv, .opt .bar { transition: none; }
  .pixel-mark rect { animation: none; }
  .briefing-body p { animation: none; opacity: 1; translate: 0 0; }
}

/* operator panel: laptop only, never inside #projected */
#operator {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(34vw, 460px); overflow: auto;
  background: #141a28; color: #e8eef8; font: 15px/1.45 var(--font-body); padding: 14px 16px; z-index: 50;
  box-shadow: -4px 0 18px rgba(0,0,0,.35);
}
#operator[hidden] { display: none; }
#operator section, #operator header, #operator footer { margin-bottom: 10px; }
#operator .op-head { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; }
#operator .op-mode { color: var(--gold); font-size: 12px; }
#operator .op-net { color: var(--coral); font-size: 12px; margin-left: auto; }
#operator .op-beat { font-family: var(--font-mono); font-size: 13px; color: #9fb3d1; display: flex; justify-content: space-between; }
#operator .op-ask { background: var(--gold); color: #1f2d45; padding: 10px 12px; border-radius: 6px; font-weight: 800; }
#operator .op-ask[hidden] { display: none; }
#operator .op-narration { font-size: 16px; }
#operator .op-votes .op-opt { display: inline-block; margin: 4px 8px 0 0; padding: 3px 8px; border-radius: 4px; background: #22304a; }
#operator .op-votes em { color: var(--gold); font-style: normal; }
#operator .op-meters { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 13px; }
#operator .op-keys { font-size: 12px; color: #8fa0bc; }