/* ==================================================================
   The Traitors — Missions
   Palette: slate ink + candle gold + traitor crimson, over vibrant sea
   ================================================================== */
:root{
  --ink:      #0a1119;
  --ink-2:    #101b28;
  --ink-3:    #17263a;
  --gold:     #f2c14e;
  --gold-dim: #b98f2c;
  --crimson:  #d81e40;
  --cyan:     #3fe0ff;
  --mint:     #7dfcd0;
  --paper:    #eef4fb;
  --muted:    #8ba3bd;
  --shadow:   0 18px 50px rgba(3,10,20,.55);
  --display:  'Anton', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* How much of the bottom-left corner the speedo already owns.
     Everything else that wants that corner stacks off this one
     number rather than guessing, which is what they used to do. */
  --bl-foot:  clamp(96px, 13vh, 124px);
}
/* A thumbstick lives in that corner too, and it is 132px of it. */
body.touch{ --bl-foot: calc(6vh + 146px); }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:#06101c; color:var(--paper);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  touch-action:none; user-select:none;
}
canvas#gl{position:fixed; inset:0; width:100%; height:100%; display:block}

kbd{
  font-family:var(--body); font-size:.68em; font-weight:700; letter-spacing:.02em;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-bottom-width:2px; border-radius:5px; padding:.12em .42em; margin:0 .12em;
  color:var(--paper);
}

/* ==================================================================
   THE BACKDROP
   A loch at dusk behind every menu: drawn sky, drawn shore, live
   water. It sits between the canvas and the screens, so the attract
   ocean is the loch in front of the hills rather than the whole
   picture, and each screen's own scrim still lands on top of it.
   ================================================================== */
#menu-bg{
  position:fixed; inset:0; z-index:10; pointer-events:none;
  opacity:0; transition:opacity .7s ease;
  /* Where the rendered ocean's horizon actually falls. The attract
     camera sits 7.5m up looking at a point 2m below itself sixty
     metres out — about two degrees down on a 58° vertical lens, which
     puts the waterline just above the middle of the frame. The lens is
     vertical, so this holds on any window shape. Everything drawn here
     is hung off it. */
  --horizon:47%;
}
/* Only the rooms you stand in before a night. Inside the show the
   real sky is doing this job and a painted one would fight it. */
body[data-screen="play"]   #menu-bg,
body[data-screen="title"]  #menu-bg,
body[data-screen="lobby"]  #menu-bg,
body[data-screen="mparty"] #menu-bg{opacity:1}

/* The sky, and it stops at the waterline: everything below the
   horizon is the rendered ocean showing through. */
.mb-sky{
  position:absolute; left:0; right:0; top:0; height:var(--horizon);
  background:linear-gradient(180deg,
    #05080f 0%, #0a1322 26%, #12283f 54%, #1d4058 78%, #2d5a6e 100%);
}
.mb-stars{
  position:absolute; left:0; right:0; top:0; height:var(--horizon);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 28% 9%,  rgba(255,255,255,.65), transparent),
    radial-gradient(1.6px 1.6px at 41% 26%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 55% 12%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 68% 30%, rgba(255,255,255,.70), transparent),
    radial-gradient(1.2px 1.2px at 79% 16%, rgba(255,255,255,.60), transparent),
    radial-gradient(1.7px 1.7px at 88% 34%, rgba(255,255,255,.80), transparent),
    radial-gradient(1.1px 1.1px at 6% 40%,  rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 34% 44%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.2px 1.2px at 61% 48%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.4px 1.4px at 92% 6%,  rgba(255,255,255,.70), transparent);
  /* they thin out towards the light on the horizon, the way they do */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  animation:mbTwinkle 7s ease-in-out infinite;
}
@keyframes mbTwinkle{0%,100%{opacity:.85}50%{opacity:.5}}

/* Two slow ribbons of light. Not literally an aurora — it is the
   colour the game is already made of, moving. */
.mb-aurora{
  position:absolute; left:-10%; right:-10%; top:0; height:var(--horizon);
  mix-blend-mode:screen; opacity:.5;
  background:
    radial-gradient(ellipse 46% 40% at 22% 18%, rgba(125,252,208,.30) 0%, transparent 70%),
    radial-gradient(ellipse 52% 34% at 74% 10%, rgba(63,224,255,.24) 0%, transparent 72%),
    radial-gradient(ellipse 70% 26% at 50% 46%, rgba(242,193,78,.16) 0%, transparent 76%);
  animation:mbDrift 34s ease-in-out infinite alternate;
}
@keyframes mbDrift{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  100%{transform:translate3d(2%,-1.5%,0) scale(1.07)}
}

.mb-moon{
  position:absolute; left:76%; top:calc(var(--horizon) * .30);
  width:clamp(26px,3.4vw,44px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fffaf0 0%, #f6e6c2 55%, #dcc79a 100%);
  box-shadow:0 0 30px 10px rgba(255,240,205,.22), 0 0 100px 40px rgba(255,235,190,.12);
}

/* The band of light sitting on the water, which is what stops the
   drawn sky and the rendered sea from looking like two pictures. */
.mb-haze{
  position:absolute; left:0; right:0;
  top:calc(var(--horizon) - 13%); height:26%;
  background:linear-gradient(180deg, rgba(120,170,205,0) 0%,
    rgba(132,182,214,.20) 42%, rgba(158,200,224,.30) 52%,
    rgba(120,166,200,.14) 68%, rgba(90,130,170,0) 100%);
  filter:blur(1px);
}

/* Everything below the waterline is the rendered ocean, which is set
   to the same hour as this drawing — so all this does is settle it a
   shade further and lay the moon's path across it. */
.mb-loch{
  position:absolute; left:0; right:0; top:var(--horizon); bottom:0;
  background:
    radial-gradient(ellipse 13% 62% at 76% 0%, rgba(255,240,205,.15) 0%, transparent 72%),
    linear-gradient(180deg, rgba(8,20,36,.52) 0%, rgba(6,16,30,.30) 36%,
                            rgba(5,12,24,.16) 100%);
}

/* The shore. `preserveAspectRatio="none"` is deliberate — a silhouette
   of hills has no correct proportion, and stretching one to the window
   is invisible in a way stretching a tower would not be. */
.mb-hills{
  /* The waterline inside the drawing sits at 300 of 470, so the band is
     hung off that fraction and the shore meets the ocean at `--horizon`
     whatever the window is doing. */
  --band:clamp(210px, 33vh, 430px);
  position:absolute; left:0; right:0; width:100%;
  top:calc(var(--horizon) - var(--band) * 0.638); height:var(--band);
}
.mb-castle{
  position:absolute; left:63%; top:var(--horizon);
  transform:translate(-50%,-100%);
  height:clamp(58px,9.5vh,116px); width:auto;
  filter:drop-shadow(0 0 22px rgba(4,10,20,.7));
}
/* The windows breathe, slightly out of step with each other, because a
   castle with six identical lights in it is a diagram. */
.mb-lit rect{animation:mbCandle 5.5s ease-in-out infinite}
.mb-lit rect:nth-child(2){animation-duration:7.3s; animation-delay:-1.4s}
.mb-lit rect:nth-child(3){animation-duration:6.1s; animation-delay:-3.1s}
.mb-lit rect:nth-child(4){animation-duration:8.2s; animation-delay:-2.2s}
.mb-lit rect:nth-child(5){animation-duration:5.9s; animation-delay:-4.6s}
.mb-lit rect:nth-child(6){animation-duration:7.7s; animation-delay:-0.7s}
.mb-lit rect:nth-child(7){animation-duration:6.6s; animation-delay:-5.3s}
@keyframes mbCandle{0%,100%{opacity:.95}45%{opacity:.55}70%{opacity:.85}}

.mb-vig{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 100% 74% at 50% 46%, rgba(0,0,0,0) 40%, rgba(3,8,16,.62) 100%),
    linear-gradient(180deg, rgba(3,8,16,.45) 0%, rgba(0,0,0,0) 22%);
}

@media (prefers-reduced-motion:reduce){
  .mb-stars, .mb-aurora, .mb-lit rect{animation:none}
}

/* ---------------- overlays ---------------- */
#world-labels{position:fixed; inset:0; pointer-events:none; z-index:30}
.float-label{
  position:absolute; top:0; left:0; white-space:nowrap;
  font-family:var(--display); font-size:clamp(20px,2.6vw,34px); letter-spacing:.04em;
  color:var(--mint); text-shadow:0 3px 0 rgba(4,14,24,.55), 0 0 22px rgba(125,252,208,.5);
  will-change:transform,opacity;
}
.float-label.perfect{color:var(--gold); text-shadow:0 3px 0 rgba(4,14,24,.6), 0 0 30px rgba(242,193,78,.75)}
.float-label.air{color:var(--cyan); text-shadow:0 3px 0 rgba(4,14,24,.6), 0 0 26px rgba(63,224,255,.7)}
.float-label.bad{color:#ff6b83; font-size:clamp(15px,1.7vw,22px)}

#speed-vignette{
  position:fixed; inset:-4%; pointer-events:none; z-index:22; opacity:0;
  transition:opacity .18s linear;
  background:
    radial-gradient(ellipse 62% 52% at 50% 50%, rgba(0,0,0,0) 55%, rgba(6,20,34,.62) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0,0,0,0) 62%, rgba(20,90,140,.28) 100%);
}
#speed-vignette.boost{
  background:
    radial-gradient(ellipse 55% 46% at 50% 50%, rgba(0,0,0,0) 48%, rgba(8,40,70,.66) 100%),
    radial-gradient(ellipse 88% 66% at 50% 50%, rgba(0,0,0,0) 55%, rgba(63,224,255,.30) 100%);
}

#surf-indicator{
  position:fixed; left:50%; top:27%; transform:translateX(-50%) translateY(-10px);
  z-index:24; pointer-events:none; opacity:0; transition:opacity .16s;
}
#surf-indicator span{
  display:inline-block; font-family:var(--display); letter-spacing:.30em;
  font-size:clamp(13px,1.5vw,19px); color:#c8fbff; text-indent:.30em;
  padding:5px 16px 4px; border-radius:999px;
  background:rgba(6,26,42,.60); border:1px solid rgba(63,224,255,.55);
  box-shadow:0 0 26px rgba(63,224,255,.45), inset 0 0 18px rgba(63,224,255,.18);
  text-shadow:0 0 16px rgba(63,224,255,.9);
}
#surf-indicator.on{animation:surfPulse .9s ease-in-out infinite}
@keyframes surfPulse{0%,100%{transform:translateX(-50%) translateY(-10px) scale(1)}50%{transform:translateX(-50%) translateY(-14px) scale(1.06)}}

#screen-flash{position:fixed; inset:0; z-index:23; pointer-events:none; opacity:0;
  mix-blend-mode:screen; transition:opacity .22s ease-out; background:#fff}

#fade{position:fixed; inset:0; z-index:90; pointer-events:none; background:#06101c;
  opacity:0; transition:opacity .3s ease}
#fade.on{opacity:1; pointer-events:all}

/* ---------------- screen system ---------------- */
.screen{
  position:fixed; inset:0; z-index:40; display:none;
  padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
          max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.screen.active{display:flex}
.screen.hud{pointer-events:none; z-index:20}

.panel{
  background:linear-gradient(165deg, rgba(16,27,40,.94), rgba(8,16,26,.96));
  border:1px solid rgba(242,193,78,.22);
  border-radius:18px; box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(1.2);
  padding:clamp(22px,3.2vw,38px);
}

.btn{
  font-family:var(--body); font-weight:800; font-size:14px; letter-spacing:.10em;
  text-transform:uppercase; padding:13px 26px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .2s, background .2s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{
  background:linear-gradient(180deg, var(--gold), var(--gold-dim));
  color:#1a1206; box-shadow:0 8px 22px rgba(242,193,78,.28);
}
.btn.primary:hover{box-shadow:0 10px 30px rgba(242,193,78,.45)}
/* 5% white over a live scene is not a background, it is a tint — and
   whatever was behind it decided whether the label could be read. A
   ghost button now carries its own dark ground. */
.btn.ghost{
  background:rgba(10,20,33,.72); border-color:rgba(255,255,255,.26); color:var(--paper);
  backdrop-filter:blur(6px);
}
.btn.ghost:hover{background:rgba(20,36,56,.86); border-color:rgba(242,193,78,.45)}
/* The lobby's two doors are full-width columns. The front door used to
   be the only other user of this and is now built out of `.pcard`. */
.btn.wide{width:100%}
/* testing doors, marked as such so one never ships looking like a feature */
.btn.dev{background:rgba(63,224,255,.05); border-color:rgba(63,224,255,.28);
  color:#9fe8ff; border-style:dashed}
.btn.dev:hover{background:rgba(63,224,255,.12)}

/* ---------------- title ---------------- */
/* Same problem as the front door, and worse: this one thinned out to
   18% right where the mission cards are. See `.screen.play`. */
.screen.title{
  align-items:stretch; justify-content:center; overflow-y:auto;
  /* A scrim, not a curtain. It only has to make text legible over the
     backdrop, so it is pulled in tight around the middle where the
     words are and let go at the edges where the loch is. */
  background:
    radial-gradient(ellipse 74% 60% at 50% 52%, rgba(4,10,20,.74) 0%,
                                                rgba(4,10,20,.30) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(5,13,24,.62) 0%, rgba(5,13,24,.20) 30%,
                            rgba(5,13,24,.28) 62%, rgba(5,13,24,.76) 100%);
}
.title-inner{
  width:min(900px, 100%); margin:auto; display:flex; flex-direction:column; gap:clamp(14px,2vh,26px);
  padding:clamp(10px,3vh,30px) 0;
}
.brand{text-align:center}
.brand-kicker{
  font-size:12px; letter-spacing:.52em; text-transform:uppercase; color:var(--gold);
  margin-bottom:6px; text-indent:.52em; font-weight:700;
  text-shadow:0 2px 10px rgba(4,12,22,.9);
}
.brand-title{
  font-family:var(--display); margin:0; line-height:.86;
  font-size:clamp(54px, 12vw, 132px); letter-spacing:.02em;
  color:var(--paper); text-shadow:0 6px 0 rgba(4,12,22,.45), 0 22px 60px rgba(0,0,0,.6);
}
.brand-title span{display:block; color:var(--crimson);
  text-shadow:0 6px 0 rgba(4,12,22,.5), 0 0 46px rgba(216,30,64,.55)}
.brand-rule{
  height:2px; width:min(420px,80%); margin:16px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.75;
}

.pot{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:12px 20px; border-radius:12px; align-self:center;
  background:rgba(8,16,26,.55); border:1px solid rgba(242,193,78,.25);
  backdrop-filter:blur(10px);
}
.pot-label{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.pot-value{font-family:var(--display); font-size:clamp(26px,4vw,40px); color:var(--gold);
  text-shadow:0 0 32px rgba(242,193,78,.5)}

.mission-head{text-align:center; margin-top:4px}
.mission-head h2{
  font-family:var(--display); font-size:clamp(20px,2.6vw,28px); letter-spacing:.24em;
  margin:0; color:var(--paper); text-transform:uppercase;
}
.mission-head p{margin:5px 0 0; font-size:13px; color:var(--muted); letter-spacing:.03em}

.mission-list{display:flex; flex-direction:column; gap:12px}
.mission-card-row{display:flex; align-items:stretch; gap:10px}
.mission-card{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left;
  padding:16px 20px; border-radius:14px; cursor:pointer; color:var(--paper);
  font-family:var(--body);
  background:linear-gradient(120deg, rgba(23,38,58,.90), rgba(11,20,32,.90));
  border:1px solid rgba(255,255,255,.10);
  transition:transform .14s ease, border-color .18s, box-shadow .2s, background .2s;
}
.mission-card:hover:not(.locked){
  transform:translateY(-2px); border-color:rgba(242,193,78,.55);
  box-shadow:0 14px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,193,78,.12);
}
.mission-card-row .mission-card{flex:1; min-width:0}

/* The two doors that are not "brief me on it": the mission's own
   shortcut, and a room for it. They stack beside the card rather than
   inside it, because both of them skip the briefing entirely and a
   button that lives inside a button is a button people press by
   accident. */
.mission-side{display:flex; flex-direction:column; gap:8px; width:118px; flex:none}
.mission-side > button{width:100%; flex:1; min-height:52px}
.mission-quick, .mission-invite{
  border-radius:14px; cursor:pointer; font-family:var(--body); font-size:11px;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:transform .14s ease,border-color .18s,box-shadow .2s,background .2s;
}
.mission-quick{
  color:#ffdbe2; border:1px solid rgba(255,84,112,.42);
  background:linear-gradient(160deg,rgba(100,18,42,.86),rgba(28,13,27,.92));
}
.mission-quick:hover{
  transform:translateY(-2px); border-color:#ff8fa3;
  background:linear-gradient(160deg,rgba(135,22,51,.94),rgba(40,13,31,.96));
  box-shadow:0 12px 30px rgba(80,4,28,.5),inset 0 0 22px rgba(255,84,112,.1);
}
.mission-quick:active, .mission-invite:active{transform:translateY(1px) scale(.99)}
.mq-icon{font-family:var(--display); font-size:22px; line-height:1; color:#ff8fa3;
  text-shadow:0 0 18px rgba(255,84,112,.75)}

.mission-invite{
  color:#d9ecff; border:1px solid rgba(63,224,255,.34);
  background:linear-gradient(160deg,rgba(11,52,72,.86),rgba(10,20,32,.92));
}
.mission-invite:hover{
  transform:translateY(-2px); border-color:var(--cyan);
  background:linear-gradient(160deg,rgba(14,72,99,.94),rgba(12,25,40,.96));
  box-shadow:0 12px 30px rgba(3,40,60,.55),inset 0 0 22px rgba(63,224,255,.10);
}
.mi-icon{font-family:var(--display); font-size:21px; line-height:1; color:var(--cyan);
  text-shadow:0 0 18px rgba(63,224,255,.7)}

/* The mission list can spotlight its inline invitation controls when
   needed without creating a second mission-party menu. */
.mission-list.inviting .mission-invite{
  border-color:var(--cyan); animation:invitePulse 2.2s ease-in-out infinite;
}
@keyframes invitePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(63,224,255,0)}
  50%    {box-shadow:0 0 0 4px rgba(63,224,255,.16)}
}
#mission-note.inviting{color:var(--cyan)}
@media (prefers-reduced-motion: reduce){
  .mission-list.inviting .mission-invite{animation:none}
}
.mission-card.locked{opacity:.42; cursor:not-allowed; filter:grayscale(.7)}
.mc-icon{
  font-family:var(--display); font-size:26px; letter-spacing:.02em; color:var(--gold);
  width:58px; height:58px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:rgba(242,193,78,.09); border:1px solid rgba(242,193,78,.28);
}
.mission-card.locked .mc-icon{color:var(--muted); background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.09)}
.mc-body{flex:1; min-width:0}
.mc-title{font-family:var(--display); font-size:23px; letter-spacing:.06em; display:flex;
  align-items:center; gap:10px; text-transform:uppercase}
.mc-lock{font-family:var(--body); font-size:9px; font-weight:800; letter-spacing:.2em;
  padding:3px 7px; border-radius:5px; background:rgba(255,255,255,.10); color:var(--muted)}
.mc-tagline{font-size:13px; color:var(--muted); margin-top:2px}
.mc-meta{display:flex; gap:14px; margin-top:8px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#6f88a3}
.mc-meta span{position:relative}
.mc-meta span+span:before{content:''; position:absolute; left:-8px; top:50%;
  width:3px; height:3px; border-radius:50%; background:#41566d; transform:translateY(-50%)}
.mc-best{text-align:right; flex:none}
.mc-best .lbl{display:block; font-size:9px; letter-spacing:.22em; color:#6f88a3}
.mc-best .val{font-family:var(--display); font-size:20px; color:var(--gold)}

.title-foot{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:6px;
  font-size:11.5px; color:var(--muted); letter-spacing:.06em;
}

/* ---------------- briefing ---------------- */
.screen.brief{align-items:center; justify-content:center; background:rgba(5,12,22,.55)}
.brief-panel{width:min(1000px,100%); max-height:92vh; overflow-y:auto}
.brief-kicker{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold)}
.brief-panel h2{font-family:var(--display); font-size:clamp(34px,5.2vw,52px); margin:6px 0 2px;
  letter-spacing:.03em; text-transform:uppercase}
.brief-tagline{margin:0 0 16px; color:var(--cyan); font-size:14px; font-weight:600}
.brief-desc{margin:0 0 18px; color:#c3d3e4; font-size:14.5px; line-height:1.62}
.brief-tips{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.brief-tips li{
  font-size:13.5px; color:#adc0d4; line-height:1.5; padding-left:16px; position:relative;
}
.brief-tips li:before{content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--gold)}
.brief-tips b{color:var(--paper)}
.brief-actions{display:flex; gap:12px; justify-content:flex-end; align-items:center}
.brief-keys{display:flex; flex-wrap:wrap; gap:14px; margin:0 auto 0 0;
  font-size:11px; color:var(--muted); letter-spacing:.05em}

/* ---------------- HUD ---------------- */
.screen.hud{flex-direction:column; justify-content:space-between}
.hud-label{font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(240,249,255,.9); font-weight:700;
  text-shadow:0 1px 2px rgba(4,16,28,.85), 0 0 12px rgba(4,16,28,.7)}
.hud-top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.hud-bottom{display:flex; justify-content:space-between; align-items:flex-end; gap:20px}

.hud-money{font-family:var(--display); font-size:clamp(30px,4.4vw,50px); line-height:1;
  color:var(--gold); text-shadow:0 3px 0 rgba(4,12,22,.5), 0 0 34px rgba(242,193,78,.42)}
.hud-combo-wrap{display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:4px;
  opacity:0; max-width:190px;
  transform:translateY(-4px); transition:opacity .18s, transform .18s}
.hud-combo-wrap.on{opacity:1; transform:none}
.hud-combo{font-family:var(--display); font-size:22px; color:var(--mint);
  text-shadow:0 0 20px rgba(125,252,208,.6)}
.hud-combo-lbl{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(230,244,255,.75); font-weight:700; text-shadow:0 1px 2px rgba(4,16,28,.8)}

.hud-timer{text-align:center}
.hud-time{font-family:var(--display); font-size:clamp(40px,6.2vw,68px); line-height:1;
  text-shadow:0 3px 0 rgba(4,12,22,.5), 0 0 30px rgba(255,255,255,.22)}
.hud-time.urgent{color:#ff5470; animation:tick .5s steps(2) infinite;
  text-shadow:0 3px 0 rgba(4,12,22,.5), 0 0 34px rgba(255,84,112,.75)}
@keyframes tick{0%{transform:scale(1)}50%{transform:scale(1.07)}}

.hud-rings{text-align:right; min-width:150px}
.hud-rings-val{font-family:var(--display); font-size:clamp(22px,3vw,32px); line-height:1.1;
  text-shadow:0 2px 0 rgba(4,12,22,.5)}
.hud-progress{height:5px; margin-top:7px; border-radius:3px; background:rgba(6,18,30,.55);
  border:1px solid rgba(255,255,255,.12); overflow:hidden}
.hud-progress-fill{height:100%; width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--mint)); transition:width .2s linear;
  box-shadow:0 0 14px rgba(125,252,208,.7)}

.hud-speedo{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  max-width:min(46vw, 300px)}
.hud-speed{font-family:var(--display); font-size:clamp(44px,7vw,80px); line-height:.9;
  text-shadow:0 4px 0 rgba(4,12,22,.5), 0 0 34px rgba(63,224,255,.28)}
.hud-speed-unit{font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(230,244,255,.8); font-weight:700; text-shadow:0 1px 2px rgba(4,16,28,.8)}
.hud-speed-track{width:min(240px,40vw); height:4px; border-radius:2px; flex-basis:100%;
  background:rgba(6,18,30,.55); border:1px solid rgba(255,255,255,.12); overflow:hidden}
.hud-speed-bar{height:100%; width:0%;
  background:linear-gradient(90deg,#4fd1ff,#7dfcd0 60%,#f2c14e); transition:width .08s linear}

.hud-boost{width:min(320px,44vw); text-align:right}
.hud-boost-track{height:12px; border-radius:7px; background:rgba(6,18,30,.6);
  border:1px solid rgba(255,255,255,.16); overflow:hidden; position:relative}
.hud-boost-fill{height:100%; width:100%;
  background:linear-gradient(90deg,#1c8ab5,#3fe0ff 55%,#a9fff0);
  transition:width .1s linear; box-shadow:0 0 18px rgba(63,224,255,.6)}
.hud-boost.active .hud-boost-track{border-color:rgba(63,224,255,.85);
  box-shadow:0 0 26px rgba(63,224,255,.55)}
.hud-boost.active .hud-boost-fill{background:linear-gradient(90deg,#7dfcd0,#fff)}
.hud-boost.empty .hud-boost-track{border-color:rgba(255,84,112,.5)}
.hud-boost-label{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(230,244,255,.8); font-weight:700; margin-top:6px;
  text-shadow:0 1px 2px rgba(4,16,28,.8)}

.center-msg{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  pointer-events:none; opacity:0; transition:opacity .16s;
}
.center-msg.show{opacity:1}
.center-msg .big{
  font-family:var(--display); font-size:clamp(58px,13vw,150px); line-height:.95;
  letter-spacing:.03em; text-shadow:0 8px 0 rgba(4,12,22,.4), 0 0 70px rgba(255,255,255,.35);
}
.center-msg .small{font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-top:12px}
.center-msg.count .big{animation:pop .5s ease-out; color:var(--paper)}
.center-msg.go .big{color:var(--mint); animation:pop .45s ease-out;
  text-shadow:0 8px 0 rgba(4,12,22,.4), 0 0 90px rgba(125,252,208,.75)}
.center-msg.bad .big{color:#ff5470}
@keyframes pop{0%{transform:scale(1.5); opacity:0}45%{opacity:1}100%{transform:scale(1); opacity:1}}

#mute-btn{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  pointer-events:all; background:rgba(8,18,30,.45); border:1px solid rgba(255,255,255,.16);
  color:var(--paper); width:34px; height:34px; border-radius:9px; cursor:pointer;
  display:grid; place-items:center; padding:0;
}
#mute-btn:hover{background:rgba(8,18,30,.85)}
#mute-btn .slash{opacity:0; transition:opacity .15s}
#mute-btn.muted .wave{opacity:0}
#mute-btn.muted .slash{opacity:1}
#mute-btn.muted{color:#ff8fa3}

/* ---------------- touch ---------------- */
#touch-controls{display:none; position:absolute; inset:auto 0 0 0; height:44vh;
  align-items:flex-end; justify-content:space-between; padding:0 6vw 6vh; pointer-events:none}
#touch-controls.visible{display:flex}
.stick-zone{position:relative; width:132px; height:132px; pointer-events:all; touch-action:none}
.stick-ring{position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.22); background:rgba(8,18,30,.28)}
.stick-knob{position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:rgba(242,193,78,.55); border:2px solid rgba(255,255,255,.5)}
.boost-btn{width:104px; height:104px; border-radius:50%; pointer-events:all;
  display:grid; place-items:center; font-weight:800; letter-spacing:.1em; font-size:13px;
  background:rgba(63,224,255,.28); border:2px solid rgba(63,224,255,.7); color:#eaffff}

/* ---------------- pause / results ---------------- */
.screen.pause, .screen.results{align-items:center; justify-content:center;
  background:rgba(4,10,18,.62); backdrop-filter:blur(3px)}
.pause-panel{width:min(380px,100%); text-align:center}
.pause-panel h2{font-family:var(--display); font-size:40px; margin:0 0 22px; letter-spacing:.18em;
  text-transform:uppercase}
.pause-actions{display:flex; flex-direction:column; gap:10px}

.result-panel{width:min(500px,100%); text-align:center; position:relative}
.result-sub{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted)}
.result-title{font-family:var(--display); font-size:clamp(30px,5vw,46px); margin:6px 0 4px;
  letter-spacing:.06em}
.result-title.win{color:var(--gold); text-shadow:0 0 44px rgba(242,193,78,.45)}
.result-title.lose{color:#ff5470}
.result-best{display:none; font-size:10px; letter-spacing:.26em; font-weight:800; color:#0d1420;
  background:var(--mint); padding:4px 10px; border-radius:20px; margin:0 auto 4px; width:max-content}
.result-best.show{display:block; animation:pop .5s ease-out}

.result-rows{margin:20px 0; display:flex; flex-direction:column; gap:9px}
.rr{display:flex; justify-content:space-between; font-size:13.5px; color:#a9bed4}
.rr b{color:var(--paper); font-weight:700}
.rr-sep{height:1px; background:rgba(255,255,255,.12); margin:4px 0}

.result-total, .result-pot{display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; border-top:1px solid rgba(255,255,255,.12)}
.result-total span, .result-pot span{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted)}
.result-total b{font-family:var(--display); font-size:32px; color:var(--mint)}
.result-pot b{font-family:var(--display); font-size:28px; color:var(--gold)}
.result-actions{display:flex; gap:12px; justify-content:center; margin-top:18px}


/* ---------------- pre-race setup ---------------- */
.brief-body{display:grid; grid-template-columns:1.05fr .95fr; gap:26px; margin:0 0 24px;
  align-items:start}
.brief-col{min-width:0}
.brief-setup{display:flex; flex-direction:column; gap:16px;
  background:rgba(6,15,26,.5); border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:16px}
.setup-block{display:flex; flex-direction:column; gap:8px}
.setup-head{font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:800}
.setup-sub{color:var(--muted); letter-spacing:.14em; margin-left:6px; font-weight:600}
.setup-note{font-size:12px; color:var(--muted); line-height:1.5}

.seg{display:flex; gap:4px; padding:3px; border-radius:10px;
  background:rgba(4,12,22,.6); border:1px solid rgba(255,255,255,.1)}
.seg-btn{flex:1; font-family:var(--body); font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 8px; border-radius:7px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--muted);
  transition:background .16s, color .16s}
.seg-btn:hover{color:var(--paper); background:rgba(255,255,255,.06)}
.seg-btn.on{background:linear-gradient(180deg, var(--gold), var(--gold-dim)); color:#1a1206}

.channel-name{font-family:var(--display); font-size:26px; line-height:1.05;
  letter-spacing:.03em; text-transform:uppercase; color:var(--paper)}
.channel-cond{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--cyan)}
.tag-today{font-size:9px; letter-spacing:.2em; font-weight:800; color:#0d1420;
  background:var(--mint); padding:2px 7px; border-radius:20px}
.channel-seed{display:flex; gap:6px; align-items:center}
.channel-seed input{flex:1; min-width:0; font-family:var(--body); font-size:13px; font-weight:600;
  letter-spacing:.08em; color:var(--paper); padding:8px 10px; border-radius:8px;
  background:rgba(4,12,22,.65); border:1px solid rgba(255,255,255,.13)}
.channel-seed input:focus{outline:none; border-color:rgba(242,193,78,.6)}
.channel-tod{display:flex; gap:8px; align-items:center}
.tod-lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  font-weight:800}
.tod-chips{display:flex; gap:6px; flex:1}
.tod-chips .chip{flex:1}
.chip{font-family:var(--body); font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:8px 10px; border-radius:8px; cursor:pointer;
  color:var(--paper); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); transition:background .16s, border-color .16s}
.chip:hover{background:rgba(255,255,255,.13)}
.chip.on{border-color:rgba(242,193,78,.65); color:var(--gold)}

.mod-hand{display:flex; flex-direction:column; gap:6px}
.mod-card{display:flex; gap:10px; align-items:flex-start; text-align:left; cursor:pointer;
  padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09); color:inherit; font-family:var(--body);
  transition:background .16s, border-color .16s, transform .12s}
.mod-card:hover{background:rgba(255,255,255,.085); transform:translateX(2px)}
.mod-card.on{border-color:rgba(242,193,78,.75); background:rgba(242,193,78,.12)}
.mod-icon{flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  font-size:15px; color:var(--gold); background:rgba(242,193,78,.12);
  border:1px solid rgba(242,193,78,.25)}
.mod-card.on .mod-icon{background:var(--gold); color:#1a1206; border-color:transparent}
.mod-body{min-width:0}
.mod-name{display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:800;
  color:var(--paper); letter-spacing:.03em}
.mod-pay{font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--gold)}
.mod-blurb{font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:2px}

.setup-foot{display:flex; flex-direction:column; gap:10px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1)}
.toggle{display:flex; align-items:center; gap:8px; font-size:12px; color:#b8c9dc; cursor:pointer}
.toggle input{width:15px; height:15px; accent-color:var(--gold); cursor:pointer}
.toggle input:disabled{cursor:not-allowed}
.toggle input:disabled + span{color:var(--muted); opacity:.7}
.setup-best{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13px}
.sb-lbl{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  font-weight:700}
.setup-best b{font-family:var(--display); font-size:20px; color:var(--mint)}
.sb-medal{font-style:normal; font-size:9.5px; letter-spacing:.18em; font-weight:800;
  text-transform:uppercase; color:var(--mc,#fff); border:1px solid var(--mc,#fff);
  border-radius:20px; padding:2px 8px}
.btn-mult{margin-left:8px; opacity:.72; font-size:12px}

/* ---------------- HUD: chain timer, ghost split, setup chip ------------- */
.hud-combo-track{flex-basis:100%; height:3px; border-radius:2px; overflow:hidden;
  background:rgba(6,18,30,.6); border:1px solid rgba(255,255,255,.1)}
.hud-combo-bar{height:100%; width:0%; background:var(--mint);
  transition:width .12s linear, background .2s}
.hud-combo-bar.low{background:#ff5470}

.hud-time.trial{font-size:clamp(32px,5vw,54px)}
.hud-ghost{display:none; margin-top:2px; font-family:var(--display); font-size:18px;
  letter-spacing:.04em; color:var(--muted);
  text-shadow:0 2px 0 rgba(4,12,22,.5)}
.hud-ghost.show{display:block}
.hud-ghost.ahead{color:var(--mint); text-shadow:0 2px 0 rgba(4,12,22,.5), 0 0 18px rgba(125,252,208,.5)}
.hud-ghost.behind{color:#ff8fa3; text-shadow:0 2px 0 rgba(4,12,22,.5), 0 0 18px rgba(255,84,112,.45)}

/* The bottom-left corner of the race HUD has three tenants — the
   speedo, the channel strip and (for a Traitor) the task chip — and
   they used to be laid out as though each were the only one. They are
   a stack now, measured from one place: `--bl-foot` is how tall the
   speedo is, and everything else is stacked off it. */
.hud-setup{position:absolute; left:clamp(14px,2.4vw,30px);
  bottom:calc(var(--bl-foot) + 8px);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  max-width:min(44vw, 300px); pointer-events:none}
.hud-setup .hs-name{font-family:var(--display); font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(240,249,255,.92);
  text-shadow:0 1px 2px rgba(4,16,28,.9)}
.hud-setup .hs-tag{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:rgba(230,244,255,.82); background:rgba(6,18,30,.55);
  border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:2px 8px}

/* ==================================================================
   HUD: Shootout
   Everything here is built around the middle of the screen, because
   that is where the whole game happens. The reticle *is* the draw
   meter — it opens with sway and shuts as the bow comes good — and the
   bar under it is only there for the first few runs.
   ================================================================== */
.sh-hud{flex-direction:column; justify-content:space-between}
.sh-top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.sh-bottom{display:flex; justify-content:space-between; align-items:flex-end; gap:20px}

.sh-money{font-family:var(--display); font-size:clamp(28px,4.2vw,48px); line-height:1;
  color:var(--gold); text-shadow:0 3px 0 rgba(4,12,22,.5), 0 0 34px rgba(242,193,78,.42)}
/* what a mistake just cost you, said in the same place the money lives */
.sh-docked{font-family:var(--display); font-size:clamp(17px,2.3vw,26px); line-height:1;
  color:var(--crimson); text-shadow:0 0 16px rgba(229,19,63,.75); margin-top:2px;
  opacity:0; transform:translateY(-6px); transition:opacity .12s, transform .18s;
  letter-spacing:.02em; white-space:nowrap}
.sh-docked.show{opacity:1; transform:none; animation:dockShove .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes dockShove{0%{transform:translateY(-14px) scale(1.35)}100%{transform:none}}
.sh-money.hurt{color:var(--crimson); text-shadow:0 0 22px rgba(229,19,63,.8);
  animation:moneyHurt .5s ease-out}
@keyframes moneyHurt{0%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}100%{transform:none}}

.sh-chain-wrap{display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:4px;
  opacity:0; max-width:190px; transform:translateY(-4px);
  transition:opacity .2s, transform .2s}
.sh-chain-wrap.on{opacity:1; transform:none}
.sh-chain{font-family:var(--display); font-size:22px; color:var(--mint);
  text-shadow:0 2px 0 rgba(4,12,22,.5), 0 0 20px rgba(125,252,208,.5)}
.sh-chain-lbl{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(240,249,255,.75); font-weight:700}
.sh-chain-track{flex-basis:100%; height:3px; border-radius:2px; overflow:hidden;
  background:rgba(6,18,30,.6); border:1px solid rgba(255,255,255,.1)}
.sh-chain-bar{height:100%; width:0%; background:var(--mint); transition:width .1s linear, background .2s}
.sh-chain-bar.low{background:#ff5470}

.sh-round-block{text-align:center; min-width:180px}
.sh-round{font-family:var(--display); font-size:clamp(20px,2.6vw,30px); letter-spacing:.06em;
  color:var(--paper); text-shadow:0 2px 0 rgba(4,12,22,.5)}
.sh-round-name{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:rgba(240,249,255,.8); margin-top:2px; min-height:14px;
  text-shadow:0 1px 2px rgba(4,16,28,.9)}
.sh-round-track{height:4px; margin-top:7px; border-radius:3px; background:rgba(6,18,30,.55);
  border:1px solid rgba(255,255,255,.12); overflow:hidden}
.sh-round-bar{height:100%; width:100%; background:linear-gradient(90deg,var(--cyan),var(--mint));
  transition:width .1s linear}
.sh-round-bar.low{background:#ff5470}
.sh-pace{display:none; margin-top:4px; font-family:var(--display); font-size:17px;
  letter-spacing:.04em; color:var(--muted); text-shadow:0 2px 0 rgba(4,12,22,.5)}
.sh-pace.show{display:block}
.sh-pace.ahead{color:var(--mint); text-shadow:0 2px 0 rgba(4,12,22,.5), 0 0 18px rgba(125,252,208,.5)}
.sh-pace.behind{color:#ff8fa3; text-shadow:0 2px 0 rgba(4,12,22,.5), 0 0 18px rgba(255,84,112,.45)}

.sh-tally{text-align:right; min-width:130px}
.sh-left{font-family:var(--display); font-size:clamp(22px,3vw,32px); line-height:1.1;
  color:var(--paper); text-shadow:0 2px 0 rgba(4,12,22,.5)}
.sh-acc-row{display:flex; gap:8px; justify-content:flex-end; align-items:baseline;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,249,255,.7);
  font-weight:700}
.sh-acc-row b{font-family:var(--display); font-size:15px; letter-spacing:.02em; color:var(--cyan)}
.sh-lives{display:none; gap:5px; justify-content:flex-end; margin-top:7px}
.sh-lives.show{display:flex}
.sh-life{width:11px; height:11px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  background:transparent; transition:background .2s}
.sh-life.on{background:var(--crimson); border-color:rgba(255,120,150,.8);
  box-shadow:0 0 12px rgba(216,30,64,.6)}

/* -------- the reticle --------
   The middle of the screen is where the whole game happens, so the middle
   of the reticle has to survive being held over anything: birch bark, a
   bright sky, a lit lantern. Every part of it is a bright core wearing a
   dark outline — the trick a map pin uses — instead of a pale pixel that
   vanishes the moment the background is pale too. One variable, --ret,
   carries the state colour to the blades, the dot and the glow together,
   so the middle is never a colour you cannot see. */
.sh-reticle{position:absolute; left:50%; top:50%; width:0; height:0; z-index:24;
  pointer-events:none; --ret:#f4fbff; --ret-glow:rgba(180,220,255,.35)}
.sh-reticle i{position:absolute; background:var(--ret); display:block; border-radius:1.5px;
  box-shadow:0 0 0 1px rgba(2,10,18,.92), 0 0 7px rgba(2,10,18,.8), 0 0 12px var(--ret-glow);
  transition:background .1s, box-shadow .1s}
.sh-reticle .r-n,.sh-reticle .r-s{width:2.5px; height:10px; left:-1.25px}
.sh-reticle .r-e,.sh-reticle .r-w{width:10px; height:2.5px; top:-1.25px}
.sh-reticle .r-n{top:calc(-1 * var(--spread) - 10px)}
.sh-reticle .r-s{top:var(--spread)}
.sh-reticle .r-e{left:var(--spread)}
.sh-reticle .r-w{left:calc(-1 * var(--spread) - 10px)}
/* the dot: a solid pip with a hard dark ring round it, big enough to be
   a thing you aim with rather than a smudge you look for */
.sh-reticle .r-dot{width:5px; height:5px; left:-2.5px; top:-2.5px; border-radius:50%;
  background:var(--ret);
  box-shadow:0 0 0 1.8px rgba(2,10,18,.95), 0 0 9px var(--ret), 0 0 16px var(--ret-glow)}
.sh-reticle.nocking{--ret:#9db2c4; --ret-glow:rgba(120,150,180,.25)}
.sh-reticle.drawing{--ret:var(--cyan); --ret-glow:rgba(57,230,255,.6)}
/* full draw: the middle goes gold and breathes, and you can feel the shot
   is ready without taking your eye off the bird */
.sh-reticle.perfect{--ret:var(--gold); --ret-glow:rgba(242,193,78,.9)}
.sh-reticle.perfect .r-dot{width:7px; height:7px; left:-3.5px; top:-3.5px;
  animation:retReady .85s ease-in-out infinite}
@keyframes retReady{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.sh-reticle.focus::after{content:''; position:absolute; left:-46px; top:-46px;
  width:92px; height:92px; border-radius:50%; border:1px solid rgba(240,249,255,.16)}

/* -------- the loose, and the hit --------
   Two answers, both dead centre. The ring leaves with the arrow; the four
   ticks snap out when it lands. The tick is the only thing that tells you
   the arrow arrived before the money floats up out of the wood, so it is
   instant, it is loud, and it is a different shape for a kill, for a hit
   that only annoyed something, for the owl, and for a dove. */
.sh-loose{position:absolute; left:50%; top:50%; width:0; height:0; z-index:25;
  pointer-events:none}
.sh-loose::after{content:''; position:absolute; left:-11px; top:-11px;
  width:22px; height:22px; border-radius:50%; border:2px solid var(--lo,#dff3ff);
  box-shadow:0 0 12px var(--lo,#dff3ff); opacity:0}
.sh-loose.go::after{animation:looseRing .26s cubic-bezier(.2,.8,.35,1) forwards}
.sh-loose.clean{--lo:var(--gold)}
@keyframes looseRing{
  0%{transform:scale(.5); opacity:.95}
  100%{transform:scale(2.3); opacity:0}}

.sh-hitmark{position:absolute; left:50%; top:50%; width:0; height:0; z-index:26;
  pointer-events:none; opacity:0; --hm:#ffffff; --hm-far:24px; --hm-len:12px}
.sh-hitmark.show{opacity:1}
.sh-hitmark i{position:absolute; left:-1.5px; top:calc(-1 * var(--hm-len) / 2);
  width:3px; height:var(--hm-len); border-radius:2px; background:var(--hm);
  box-shadow:0 0 0 1px rgba(2,10,18,.9), 0 0 10px var(--hm); opacity:0}
.sh-hitmark i:nth-child(1){--a:45deg}
.sh-hitmark i:nth-child(2){--a:135deg}
.sh-hitmark i:nth-child(3){--a:225deg}
.sh-hitmark i:nth-child(4){--a:315deg}
.sh-hitmark b{position:absolute; left:-9px; top:-9px; width:18px; height:18px;
  border-radius:50%; border:2px solid var(--hm); box-shadow:0 0 14px var(--hm);
  opacity:0; display:block}
.sh-hitmark.show i{animation:hitTick .32s cubic-bezier(.12,.85,.3,1) forwards}
.sh-hitmark.show b{animation:hitRing .36s cubic-bezier(.2,.8,.35,1) forwards}
@keyframes hitTick{
  0%{transform:rotate(var(--a)) translateY(-6px) scale(.55); opacity:0}
  14%{opacity:1}
  100%{transform:rotate(var(--a)) translateY(calc(-1 * var(--hm-far))) scale(1); opacity:0}}
@keyframes hitRing{
  0%{transform:scale(.4); opacity:.85}
  100%{transform:scale(2.6); opacity:0}}
/* a kill pays gold; a clean kill throws the ticks further */
.sh-hitmark.kill{--hm:var(--gold); --hm-far:28px; --hm-len:14px}
.sh-hitmark.kill.clean{--hm-far:36px; --hm-len:17px}
/* a hit that landed on armour: grey, small, and it does not ring */
.sh-hitmark.dull{--hm:#9aa6b8; --hm-far:16px; --hm-len:9px}
.sh-hitmark.dull b{display:none}
/* the owl giving one up */
.sh-hitmark.boss{--hm:var(--gold); --hm-far:46px; --hm-len:22px}
.sh-hitmark.boss i{width:4px}
/* and the one you should not have taken */
.sh-hitmark.bad{--hm:var(--crimson); --hm-far:30px; --hm-len:15px}
@media (prefers-reduced-motion:reduce){
  .sh-reticle.perfect .r-dot{animation:none}
  .sh-hitmark.show i,.sh-hitmark.show b,.sh-loose.go::after{animation-duration:.01ms}
  .sh-boon{animation:none}
  .sh-boon.low{animation:none; opacity:.7}
}

/* the lock: what the crosshair is over, named. Gold is quarry — it does
   not mean the arrow will find it, nothing aims for you any more — and
   red means a dove is in front of you, so do not loose. */
.sh-reticle .r-lock{left:-19px; top:-19px; width:38px; height:38px; border-radius:50%;
  background:none; border:2px solid var(--gold); opacity:0; box-shadow:0 0 12px rgba(242,193,78,.6);
  transform:scale(1.5); transition:opacity .1s, transform .12s}
.sh-reticle.lock .r-lock{opacity:.95; transform:scale(1)}
.sh-reticle .r-tag{position:absolute; left:50%; top:30px; transform:translateX(-50%);
  font:700 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; opacity:0; transition:opacity .12s;
  text-shadow:0 2px 6px rgba(4,16,28,.9)}
.sh-reticle.lock .r-tag{opacity:.9}
.sh-reticle.lock-bad .r-lock{border-color:var(--crimson); box-shadow:0 0 18px rgba(229,19,63,.85);
  animation:lockPulse .5s ease-in-out infinite}
.sh-reticle.lock-bad .r-tag{color:var(--crimson); opacity:1; font-size:11px}
@keyframes lockPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* -------- draw / breath / quiver -------- */
.sh-draw{width:min(260px,44vw); text-align:center; opacity:.55; transition:opacity .15s}
.sh-draw.on{opacity:1}
.sh-draw.hidden{visibility:hidden}
.sh-draw-track{position:relative; height:7px; border-radius:4px; overflow:hidden;
  background:rgba(6,18,30,.6); border:1px solid rgba(255,255,255,.14)}
.sh-draw-fill{height:100%; width:0%; background:linear-gradient(90deg,#2f7f8f,var(--cyan));
  transition:width .04s linear}
.sh-draw.perfect .sh-draw-fill{background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
.sh-draw.strain .sh-draw-fill{background:linear-gradient(90deg,#8a3b4b,#ff5470)}
/* the clean-loose window, drawn where it actually is on the bar */
.sh-draw-window{position:absolute; right:0; top:0; bottom:0; width:5%;
  background:rgba(242,193,78,.5); box-shadow:0 0 10px rgba(242,193,78,.6)}
.sh-draw-lbl{margin-top:5px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:rgba(240,249,255,.8)}
.sh-draw.perfect .sh-draw-lbl{color:var(--gold)}

.sh-breath{width:min(190px,32vw); opacity:.9}
.sh-breath.off{visibility:hidden}
.sh-breath-track{height:5px; border-radius:3px; overflow:hidden; background:rgba(6,18,30,.6);
  border:1px solid rgba(255,255,255,.13)}
.sh-breath-fill{height:100%; width:100%; background:linear-gradient(90deg,#4a7f9a,#bfe6ff);
  transition:width .1s linear}
.sh-breath.using .sh-breath-fill{background:linear-gradient(90deg,#7dfcd0,#fff)}
.sh-breath-lbl{margin-top:5px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:rgba(240,249,255,.72)}

.sh-quiver{display:none; text-align:right; min-width:80px}
.sh-quiver.show{display:block}
.sh-quiver-val{font-family:var(--display); font-size:clamp(26px,3.4vw,38px); line-height:1;
  color:var(--paper); text-shadow:0 2px 0 rgba(4,12,22,.5)}
.sh-quiver-lbl{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:rgba(240,249,255,.72)}

/* -------- round banner -------- */
.sh-banner{position:absolute; left:50%; top:26%; transform:translate(-50%,-8px) scale(.96);
  text-align:center; opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,1.4,.4,1)}
.sh-banner.show{opacity:1; transform:translate(-50%,0) scale(1)}
.sb-title{font-family:var(--display); font-size:clamp(30px,5vw,58px); letter-spacing:.06em;
  color:var(--paper); text-shadow:0 4px 0 rgba(4,12,22,.55), 0 0 40px rgba(6,20,34,.7)}
.sb-sub{font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:rgba(240,249,255,.86); margin-top:4px; text-shadow:0 2px 6px rgba(4,16,28,.9)}
.sh-banner.boss .sb-title{color:#ff8fa3; text-shadow:0 4px 0 rgba(4,12,22,.55), 0 0 46px rgba(255,84,112,.6)}
.sh-banner.bonus .sb-title{color:var(--gold); text-shadow:0 4px 0 rgba(4,12,22,.55), 0 0 46px rgba(242,193,78,.6)}
.sh-banner.clear .sb-title{color:var(--mint)}
.sh-banner.perfect .sb-title{color:var(--gold); text-shadow:0 4px 0 rgba(4,12,22,.55), 0 0 56px rgba(242,193,78,.8)}
.sh-banner.fail .sb-title{color:#ff5470}

/* -------- the owl -------- */
.sh-boss{position:absolute; left:50%; top:calc(100% - 148px); transform:translateX(-50%);
  width:min(420px,74vw); text-align:center; opacity:0; pointer-events:none;
  transition:opacity .35s ease}
.sh-boss.show{opacity:1}
.sb-name{font-family:var(--display); font-size:19px; letter-spacing:.14em; color:#ff8fa3;
  text-shadow:0 2px 0 rgba(4,12,22,.6), 0 0 26px rgba(255,84,112,.5)}
.sb-phase{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:800;
  color:rgba(240,249,255,.85); margin-top:2px; text-shadow:0 1px 4px rgba(4,16,28,.9)}
.sb-pips{display:flex; gap:5px; justify-content:center; margin-top:7px}
.sb-pip{width:26px; height:7px; border-radius:3px; background:rgba(6,18,30,.6);
  border:1px solid rgba(255,255,255,.22); transition:background .18s, box-shadow .18s}
.sb-pip.on{background:linear-gradient(90deg,#ff5470,#ff8fa3); border-color:transparent;
  box-shadow:0 0 14px rgba(255,84,112,.7)}
.sh-boss.stagger .sb-name{color:var(--gold); text-shadow:0 2px 0 rgba(4,12,22,.6), 0 0 30px rgba(242,193,78,.7)}
.sh-boss.open .sb-phase{color:var(--gold); animation:surfPulse 1s ease-in-out infinite}

.sb-stages{display:flex; gap:6px; justify-content:center; margin-top:8px}
.sb-stage{width:7px; height:7px; transform:rotate(45deg); background:rgba(6,18,30,.6);
  border:1px solid rgba(255,255,255,.28)}
.sb-stage.done{background:rgba(255,84,112,.35); border-color:rgba(255,143,163,.5)}
.sb-stage.now{background:var(--gold); border-color:transparent;
  box-shadow:0 0 14px rgba(242,193,78,.9)}

/* -------- the charms the owl fight lends you -------- */
.sh-boons{position:absolute; left:50%; top:calc(100% - 210px); transform:translateX(-50%);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:min(760px,92vw);
  pointer-events:none; z-index:23}
.sh-boon{--bc:#ffd166; display:flex; align-items:center; gap:7px; padding:5px 10px 5px 8px;
  border-radius:999px; background:rgba(6,18,30,.62); border:1px solid var(--bc);
  box-shadow:0 0 18px -4px var(--bc); backdrop-filter:blur(3px);
  animation:boonIn .28s cubic-bezier(.2,1.4,.4,1) both}
.sh-boon b{font-size:9.5px; letter-spacing:.18em; font-weight:800; color:var(--bc);
  text-transform:uppercase}
.sh-boon .bt{position:relative; width:34px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.16); overflow:hidden}
.sh-boon .bt i{position:absolute; inset:0; right:auto; background:var(--bc); border-radius:2px}
/* the last two seconds, said out loud */
.sh-boon.low{animation:boonLow .5s ease-in-out infinite}
@keyframes boonIn{from{opacity:0; transform:translateY(8px) scale(.9)} to{opacity:1; transform:none}}
@keyframes boonLow{0%,100%{opacity:1} 50%{opacity:.45}}

/* -------- the intercept mark --------
   A ring you have to put the crosshair on, drawn over everything: a mark
   you cannot see through a branch lies to you at the worst moment. */
.sh-lead{position:absolute; left:50%; top:50%; width:0; height:0; z-index:23;
  opacity:0; transition:opacity .12s ease; pointer-events:none}
.sh-lead.show{opacity:.92}
.sh-lead i{position:absolute; display:block; border-radius:50%}
.sh-lead i:first-child{left:-11px; top:-11px; width:22px; height:22px;
  border:1.5px dashed rgba(57,230,255,.9); box-shadow:0 0 12px rgba(57,230,255,.45)}
.sh-lead i:last-child{left:-2px; top:-2px; width:4px; height:4px; background:var(--cyan);
  box-shadow:0 0 8px rgba(57,230,255,.9)}
.sh-lead.far i:first-child{border-color:rgba(242,193,78,.9);
  box-shadow:0 0 12px rgba(242,193,78,.45)}
.sh-lead.far i:last-child{background:var(--gold); box-shadow:0 0 8px rgba(242,193,78,.9)}

/* -------- focus vignette + pointer hint -------- */
.sh-focus{position:fixed; inset:-4%; pointer-events:none; z-index:21; opacity:0;
  transition:opacity .22s ease;
  background:
    radial-gradient(ellipse 42% 38% at 50% 50%, rgba(0,0,0,0) 55%, rgba(4,12,22,.72) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0) 60%, rgba(20,60,90,.3) 100%);
}
/* the run: the edges of the world blur past you */
.sh-rush{position:fixed; inset:-6%; pointer-events:none; z-index:21; opacity:0;
  transition:opacity .18s linear;
  background:
    radial-gradient(ellipse 46% 40% at 50% 50%, rgba(0,0,0,0) 58%, rgba(10,26,18,.6) 100%),
    radial-gradient(ellipse 76% 62% at 50% 50%, rgba(0,0,0,0) 62%, rgba(120,200,140,.16) 100%);
}
.sh-hint{position:absolute; left:50%; top:62%; transform:translateX(-50%); opacity:0;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  color:rgba(240,249,255,.9); background:rgba(6,18,30,.7); padding:8px 16px; border-radius:20px;
  border:1px solid rgba(255,255,255,.18); transition:opacity .25s}
.sh-hint.show{opacity:1}

/* -------- touch: drag anywhere to look, two pads to act -------- */
#touch-shoot{display:none; position:fixed; inset:0; z-index:45; pointer-events:all; touch-action:none}
#touch-shoot.visible{display:block}
#touch-shoot .draw-pad,#touch-shoot .focus-pad{position:absolute; bottom:9vh; border-radius:50%;
  display:grid; place-items:center; font-weight:800; letter-spacing:.1em; font-size:12px;
  pointer-events:all; touch-action:none}
#touch-shoot .draw-pad{right:6vw; width:112px; height:112px; color:#eaffff;
  background:rgba(63,224,255,.26); border:2px solid rgba(63,224,255,.7)}
#touch-shoot .focus-pad{right:6vw; bottom:26vh; width:74px; height:74px; color:#fff;
  background:rgba(240,249,255,.14); border:2px solid rgba(240,249,255,.4)}
#touch-shoot .sprint-pad{right:24vw; bottom:11vh; width:74px; height:74px; color:var(--gold);
  background:rgba(242,193,78,.16); border:2px solid rgba(242,193,78,.55)}
#touch-shoot .move-zone{position:absolute; left:6vw; bottom:9vh; width:124px; height:124px;
  pointer-events:all; touch-action:none}
#touch-shoot .move-ring{position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.22); background:rgba(8,18,30,.26)}
#touch-shoot .move-knob{position:absolute; left:50%; top:50%; width:54px; height:54px;
  margin:-27px 0 0 -27px; border-radius:50%; background:rgba(240,249,255,.4);
  border:2px solid rgba(255,255,255,.5)}
#touch-shoot.walk-only .draw-pad,
#touch-shoot.walk-only .focus-pad,
#touch-shoot.walk-only .sprint-pad{display:none}

/* ---------------- results: which channel, and what it was worth --------- */
.result-course{display:flex; flex-direction:column; gap:3px; align-items:center; margin:2px 0 10px}
.result-course b{font-family:var(--display); font-size:22px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--paper)}
.result-course span{font-size:11.5px; color:var(--muted)}
.result-course .rc-seed{font-size:10px; letter-spacing:.18em; color:rgba(139,163,189,.75)}
.rc-ghost{font-size:11.5px; font-weight:700; margin-top:2px}
.rc-ghost.ahead{color:var(--mint)}
.rc-ghost.behind{color:#ff8fa3}
.result-badges{display:flex; gap:8px; justify-content:center; align-items:center; min-height:22px}
.result-medal{display:none; font-size:10px; letter-spacing:.26em; font-weight:800;
  color:var(--mc,#fff); border:1px solid var(--mc,#fff); border-radius:20px; padding:4px 12px}
.result-medal.show{display:block; animation:pop .5s ease-out}
.result-best{margin:0}

/* ---------------- panels that outgrow the screen ----------------
   The shootout's scoreboard is a long one, and a panel that runs off the
   bottom of a laptop screen with no way to reach the buttons is not a
   scoreboard. Anything in a panel scrolls when it has to. */
.screen.results, .screen.brief{overflow-y:auto; overscroll-behavior:contain}
.result-panel, .brief-panel{
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto; overscroll-behavior:contain;
  touch-action:pan-y; pointer-events:auto;
  scrollbar-width:thin; scrollbar-color:rgba(242,193,78,.5) transparent;
}
.result-panel::-webkit-scrollbar, .brief-panel::-webkit-scrollbar{width:8px}
.result-panel::-webkit-scrollbar-thumb, .brief-panel::-webkit-scrollbar-thumb{
  background:rgba(242,193,78,.45); border-radius:4px}
.result-panel::-webkit-scrollbar-track, .brief-panel::-webkit-scrollbar-track{
  background:transparent}

/* ---------------- boot ---------------- */
#boot{position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:#06101c; transition:opacity .5s ease}
#boot.gone{opacity:0; pointer-events:none}
.boot-inner{display:flex; flex-direction:column; align-items:center; gap:16px;
  color:var(--muted); font-size:12px; letter-spacing:.24em; text-transform:uppercase}
.boot-spin{width:34px; height:34px; border-radius:50%; border:2px solid rgba(242,193,78,.22);
  border-top-color:var(--gold); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-err{color:#ff8fa3; font-size:13px; text-align:center; line-height:1.7; letter-spacing:0}

/* keep the whole list on screen on short/laptop viewports */
@media (max-height:900px){
  .brand-title{font-size:clamp(44px,8.5vw,86px)}
  .brand-rule{margin-top:10px}
  .title-inner{gap:clamp(10px,1.4vh,18px)}
  .mission-card{padding:11px 18px}
  .mission-list{gap:9px}
  .title-inner{padding:4px 0}
  .mc-icon{width:46px; height:46px; font-size:21px}
  .mc-title{font-size:20px}
  .pot{padding:8px 18px}
  .pot-value{font-size:clamp(22px,3vw,32px)}
}
@media (max-height:720px){
  .brand-kicker{display:none}
  .mission-head p{display:none}
  .title-foot{margin-top:0}
}

@media (max-width:900px){
  .brief-body{grid-template-columns:1fr; gap:20px}
  .brief-panel{width:min(620px,100%)}
}
@media (max-width:640px){
  .mission-card{padding:13px 14px; gap:12px}
  .hud-setup{display:none}
  .mod-blurb{display:none}
  .mc-icon{width:46px; height:46px; font-size:23px}
  .mc-meta{display:none}
  .mission-card-row{gap:7px}
  .mission-quick{width:78px; font-size:9px; letter-spacing:.08em}
  .title-foot{display:none}
  .hud-rings{min-width:0}
  .hud-progress{width:110px; margin-left:auto}
  .sh-tally{min-width:0}
  .sh-round-block{min-width:0}
  .sh-round-name{display:none}
  .sh-breath{display:none}
}

/* ==================================================================
   THE SHOW — play screen, cinematics, the table, the fire, the verdict
   ================================================================== */

/* ---------------- the front door ---------------- */

/* ==================================================================
   THE FRONT DOOR
   It was a headline and three stacked buttons: it told you what the
   game was called and nothing at all about what was behind any of
   them, and the two most interesting things in it — a party of three,
   and one mission with a link — looked exactly like the dressing room.

   So it is a call sheet. Four numbered cards in the order you are most
   likely to want them, each one saying what it is, who it needs and
   roughly how long it takes, and the one that is the whole game is the
   one that looks like it.

   The ocean is running live behind all of this and it is bright — a
   daylit sea is close to white where the sun is on it — so the scrim
   is opaque enough to be a surface everywhere anything is written, and
   let go at the edges where the loch is.
   ================================================================== */
.screen.play{
  align-items:center; justify-content:center; overflow-y:auto;
  background:
    /* the candle overhead */
    radial-gradient(ellipse 130% 70% at 50% -6%, rgba(242,193,78,.16) 0%, rgba(0,0,0,0) 58%),
    /* the fire, low and off to one side, which is where the night ends */
    radial-gradient(ellipse 60% 45% at 82% 106%, rgba(216,30,64,.16) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(ellipse 78% 66% at 50% 48%, rgba(4,10,20,.84) 0%,
                                                rgba(4,10,20,.40) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(4,11,21,.78) 0%, rgba(4,11,21,.26) 26%,
                            rgba(4,11,21,.34) 58%, rgba(4,11,21,.88) 100%);
}

/* -------- embers --------
   Ten of them, off the fire the night ends at. Pure decoration and
   completely inert, so nothing here is ever in the way of a press. */
.play-embers{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.play-embers i{
  position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:var(--gold); opacity:0;
  box-shadow:0 0 8px 2px rgba(242,193,78,.55);
  animation:ember 13s linear infinite;
}
.play-embers i:nth-child(1){left:8%;  animation-delay:0s;    animation-duration:14s}
.play-embers i:nth-child(2){left:19%; animation-delay:-3.4s; animation-duration:17s}
.play-embers i:nth-child(3){left:29%; animation-delay:-8.1s; animation-duration:12s}
.play-embers i:nth-child(4){left:41%; animation-delay:-1.7s; animation-duration:16s}
.play-embers i:nth-child(5){left:52%; animation-delay:-6.9s; animation-duration:13s}
.play-embers i:nth-child(6){left:63%; animation-delay:-10.5s;animation-duration:15s}
.play-embers i:nth-child(7){left:72%; animation-delay:-4.2s; animation-duration:18s}
.play-embers i:nth-child(8){left:83%; animation-delay:-12.8s;animation-duration:12s}
.play-embers i:nth-child(9){left:91%; animation-delay:-7.3s; animation-duration:16s}
.play-embers i:nth-child(10){left:96%;animation-delay:-2.6s; animation-duration:14s}
@keyframes ember{
  0%  {transform:translate(0,0) scale(.6);   opacity:0}
  12% {opacity:.85}
  70% {opacity:.5}
  100%{transform:translate(26px,-92vh) scale(1.15); opacity:0}
}

.play-inner{
  position:relative; z-index:1;
  width:min(700px, 100%); display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,3vh,32px); text-align:center; margin:auto;
  padding:clamp(8px,2vh,24px) 0;
}

/* -------- the mark -------- */
.play-mark{display:flex; flex-direction:column; align-items:center; width:100%}
.pm-seal{width:clamp(48px,7vw,64px); height:clamp(48px,7vw,64px); margin-bottom:12px}
.pm-seal svg{width:100%; height:100%; display:block; overflow:visible}
.ps-ring{fill:none; stroke:var(--gold); stroke-width:1.4; opacity:.55}
.ps-ring.thin{stroke-width:.7; opacity:.32; stroke-dasharray:2.5 3.5;
  transform-origin:50% 50%; animation:sealTurn 68s linear infinite}
.ps-keep{fill:var(--paper); opacity:.9}
.ps-blade{fill:var(--crimson)}
.ps-bar{fill:var(--gold); opacity:.85}
@keyframes sealTurn{to{transform:rotate(360deg)}}

/* The rule draws itself in, once, when the door opens. */
.pm-rule{height:2px; width:min(440px,84%); margin:14px auto 0; position:relative;
  background:linear-gradient(90deg, transparent, rgba(242,193,78,.28), transparent)}
.pm-rule i{position:absolute; inset:0; display:block; transform-origin:50% 50%;
  background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.screen.play.active .pm-rule i{animation:ruleIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes ruleIn{from{transform:scaleX(0); opacity:0} to{transform:scaleX(1); opacity:1}}

.play-blurb{
  margin:16px 0 0; color:#c6d6e8; font-size:clamp(12.5px,1.45vw,15px); line-height:1.75;
  max-width:52ch; text-shadow:0 2px 10px rgba(4,12,22,.9);
}
.play-blurb b{color:var(--paper); font-weight:800}

/* -------- the deck --------
   A card is a button. It is laid out as a grid rather than a flex row
   so the numeral, the words and the two right-hand columns line up
   down the whole stack — four cards whose titles start in four
   different places is what a row of flex buttons gives you. */
.play-deck{display:flex; flex-direction:column; gap:10px; width:100%}

.pcard{
  position:relative; overflow:hidden; width:100%; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(12px,2vw,20px);
  padding:clamp(14px,2vw,19px) clamp(16px,2.4vw,22px);
  border-radius:14px; color:var(--paper); font-family:var(--body);
  background:linear-gradient(115deg, rgba(23,38,58,.90), rgba(10,19,31,.92));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 10px 30px rgba(2,8,16,.42);
  transition:transform .16s cubic-bezier(.2,.7,.2,1), border-color .2s,
             box-shadow .22s, background .2s;
}
/* `backwards`, not `both`: a filled-forwards animation keeps owning
   `transform` after it ends, which would quietly kill the hover lift
   on every card. This holds the from-frame through the stagger delay
   and then hands the card back to the ordinary rules. */
.screen.play.active .pcard{animation:cardIn .5s cubic-bezier(.2,.75,.25,1) backwards}
.screen.play.active .pcard:nth-child(1){animation-delay:.04s}
.screen.play.active .pcard:nth-child(2){animation-delay:.10s}
.screen.play.active .pcard:nth-child(3){animation-delay:.16s}
.screen.play.active .pcard:nth-child(4){animation-delay:.22s}
@keyframes cardIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* The sheen. One pseudo-element swept across on hover, which reads as
   candlelight moving over card stock rather than as a web page. */
.pcard:before{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.11), transparent);
  transform:skewX(-18deg); transition:left .55s cubic-bezier(.3,.7,.3,1); pointer-events:none;
}
.pcard:hover:before, .pcard.nav-on:before{left:130%}

.pcard:hover, .pcard.nav-on{
  transform:translateY(-2px);
  border-color:rgba(242,193,78,.55);
  box-shadow:0 16px 40px rgba(2,8,16,.55), inset 0 0 0 1px rgba(242,193,78,.14);
}
.pcard:active{transform:translateY(1px) scale(.995)}

.pc-n{
  font-family:var(--display); font-size:clamp(26px,4vw,36px); line-height:1;
  letter-spacing:.02em; color:transparent;
  -webkit-text-stroke:1.4px rgba(242,193,78,.5);
  transition:color .2s, -webkit-text-stroke-color .2s;
}
.pcard:hover .pc-n, .pcard.nav-on .pc-n{color:rgba(242,193,78,.92)}

.pc-text{min-width:0; display:flex; flex-direction:column; gap:3px}
.pc-main{
  font-family:var(--display); font-size:clamp(19px,3vw,27px); line-height:1;
  letter-spacing:.06em; text-transform:uppercase; color:var(--paper);
}
.pc-sub{font-size:12.5px; font-weight:600; color:#9fb4cc; letter-spacing:.02em;
  overflow-wrap:break-word}

.pc-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#6f88a3;
  padding-right:clamp(2px,1vw,10px); border-right:1px solid rgba(255,255,255,.08);
}
.pc-meta b{font-family:var(--display); font-size:15px; letter-spacing:.06em; color:#b9cde2}
.pc-meta i{font-style:normal; font-size:9.5px; letter-spacing:.14em}

.pc-go{
  font-size:19px; line-height:1; color:rgba(242,193,78,.55);
  transform:translateX(-3px); transition:transform .2s, color .2s;
}
.pcard:hover .pc-go, .pcard.nav-on .pc-go{transform:translateX(2px); color:var(--gold)}

/* -------- the one that is the whole game --------
   A hero card is not a bigger card. It is the same card with the
   crimson down its edge and a slow pulse behind it, so it wins the
   glance without breaking the grid the other three line up on. */
.pcard.hero{
  padding-top:clamp(18px,2.6vw,25px); padding-bottom:clamp(18px,2.6vw,25px);
  background:
    radial-gradient(ellipse 70% 200% at 0% 50%, rgba(216,30,64,.22), rgba(0,0,0,0) 70%),
    linear-gradient(115deg, rgba(34,26,34,.94), rgba(12,17,28,.94));
  border-color:rgba(242,193,78,.42);
  box-shadow:0 14px 40px rgba(2,8,16,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.pcard.hero:after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gold), var(--crimson));
  animation:heroPulse 3.6s ease-in-out infinite;
}
@keyframes heroPulse{0%,100%{opacity:.55} 50%{opacity:1}}
.pcard.hero .pc-n{-webkit-text-stroke-color:rgba(255,140,164,.6)}
.pcard.hero:hover .pc-n, .pcard.hero.nav-on .pc-n{color:#ff9db0}
.pcard.hero .pc-main{font-size:clamp(22px,3.6vw,33px)}
.pcard.hero .pc-sub{color:#cbd9e9}
.pcard.hero:hover, .pcard.hero.nav-on{
  border-color:rgba(255,140,164,.7);
  box-shadow:0 18px 48px rgba(70,4,24,.5), inset 0 0 0 1px rgba(255,140,164,.16);
}
.pcard.hero .pc-go{color:rgba(255,140,164,.7)}
.pcard.hero:hover .pc-go, .pcard.hero.nav-on .pc-go{color:#ff9db0}

/* -------- the foot -------- */
.play-foot{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,18px);
  flex-wrap:wrap; width:100%; padding-top:4px;
}
.play-ver{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#5f778f}
.pot.mini{display:flex; align-items:baseline; gap:7px}
.pot.mini .pot-label{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#a8bfd6}
.pot.mini .pot-value{font-family:var(--display); font-size:19px; color:var(--gold)}

/* Motion here is atmosphere, never information: every one of these is
   safe to simply not happen. */
@media (prefers-reduced-motion: reduce){
  .play-embers{display:none}
  .ps-ring.thin, .pcard.hero:after{animation:none}
  .screen.play.active .pcard, .screen.play.active .pm-rule i{animation:none}
  .pcard:before{display:none}
}

/* ==================================================================
   MISSION PARTY
   The room for one mission. Two columns: the room on the left, which
   is a code, a link and up to three seats, and the run on the right,
   which is the host's to set and everybody else's to watch.
   ================================================================== */
.screen.mparty{
  align-items:stretch; justify-content:center; overflow-y:auto;
  background:
    radial-gradient(ellipse 120% 76% at 50% 4%, rgba(242,193,78,.10) 0%, rgba(0,0,0,0) 56%),
    radial-gradient(ellipse 82% 62% at 50% 52%, rgba(4,10,20,.80) 0%,
                                                rgba(4,10,20,.34) 74%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(5,13,24,.70) 0%, rgba(5,13,24,.24) 30%,
                            rgba(5,13,24,.32) 64%, rgba(5,13,24,.84) 100%);
}
.mp-inner{width:min(980px,100%); margin:auto; display:flex; flex-direction:column;
  gap:clamp(12px,2vh,20px); padding:clamp(8px,2vh,20px) 0}

.mp-head{display:flex; align-items:center; gap:16px; text-align:left}
.mp-icon{
  font-family:var(--display); font-size:26px; color:var(--gold);
  width:60px; height:60px; flex:none; display:grid; place-items:center; border-radius:14px;
  background:rgba(242,193,78,.10); border:1px solid rgba(242,193,78,.30);
  box-shadow:inset 0 0 22px rgba(242,193,78,.10);
}
.mp-head-text{min-width:0}
.mp-head .brand-kicker{margin-bottom:2px; text-indent:0}
.mp-title{font-family:var(--display); font-size:clamp(28px,5vw,44px); line-height:1;
  letter-spacing:.04em; text-transform:uppercase; margin:0; color:var(--paper)}
.mp-tagline{margin:5px 0 0; font-size:13px; color:var(--muted); line-height:1.5}

.mp-cols{display:grid; grid-template-columns:.92fr 1.08fr; gap:14px; align-items:start}
.mp-room, .mp-setup{padding:clamp(16px,2.2vw,22px)}

/* -------- the room -------- */
.mp-room{display:flex; flex-direction:column; gap:12px}
.mp-code-label{font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:800}
.mp-code{
  font-family:var(--display); font-size:clamp(40px,7vw,62px); line-height:1;
  letter-spacing:.26em; text-indent:.26em; color:var(--paper); text-align:center;
  text-shadow:0 0 40px rgba(242,193,78,.28);
}
.mp-link{display:flex; gap:8px}
.mp-link-field{
  flex:1; min-width:0; font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.01em; color:#b9cde2; padding:10px 12px; border-radius:9px;
  background:rgba(4,12,22,.72); border:1px solid rgba(255,255,255,.13);
  text-overflow:ellipsis;
}
.mp-link-field:focus{outline:none; border-color:rgba(242,193,78,.6); color:var(--paper)}
.btn.mp-copy{flex:none; padding:10px 18px; font-size:12px; letter-spacing:.12em}
.mp-link-note{margin:0; font-size:11.5px; line-height:1.55; color:var(--muted)}

.mp-roster{display:flex; flex-direction:column; gap:6px; margin-top:2px}
.mp-seat{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.mp-seat.you{border-color:rgba(242,193,78,.55); background:rgba(242,193,78,.09)}
.mp-seat.empty{opacity:.4; border-style:dashed}
.mp-seat-n{font-family:var(--display); font-size:15px; color:var(--gold); width:16px; flex:none}
.mp-seat-name{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--paper);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mp-seat.empty .mp-seat-name{color:var(--muted); font-weight:400}
.mp-seat-tag{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  font-weight:800}

.mp-status{font-size:12px; color:#a8bfd6; letter-spacing:.03em; text-align:center;
  min-height:16px}
.mp-room-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

/* -------- the run -------- */
.mp-setup{display:flex; flex-direction:column; gap:16px}
.mp-setup-head{font-family:var(--display); font-size:19px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper); display:flex; align-items:baseline; gap:10px}
.mp-setup-head span{font-family:var(--body); font-size:10px; font-weight:800;
  letter-spacing:.2em; color:var(--gold); text-transform:uppercase}
/* A guest is reading, not choosing. Saying so once at the top and
   dimming the controls is kinder than a screen full of dead buttons
   that look exactly like live ones. */
.mp-setup.watching .seg, .mp-setup.watching .mod-hand,
.mp-setup.watching .channel-seed{opacity:.72}
.mp-setup.watching .mp-setup-head span{color:var(--muted)}
.mp-setup.watching .mod-card{cursor:default}
.mp-setup .setup-block{gap:8px}

.mp-skip{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:11px 14px; border-radius:12px; font-family:var(--body); color:var(--paper);
  background:linear-gradient(150deg,rgba(70,14,32,.55),rgba(16,12,24,.72));
  border:1px solid rgba(255,84,112,.32);
  transition:border-color .18s, background .2s, transform .12s;
}
.mp-skip:hover:not(:disabled){transform:translateY(-1px); border-color:rgba(255,143,163,.7)}
.mp-skip:disabled{cursor:default}
.mp-skip.on{border-color:#ff8fa3;
  background:linear-gradient(150deg,rgba(122,20,50,.85),rgba(36,12,28,.9));
  box-shadow:inset 0 0 26px rgba(255,84,112,.14)}
.ms-icon{font-family:var(--display); font-size:21px; line-height:1; flex:none;
  color:#ff8fa3; text-shadow:0 0 16px rgba(255,84,112,.6)}
.ms-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ms-body b{font-size:13.5px; font-weight:800; letter-spacing:.03em}
.ms-body i{font-style:normal; font-size:11.5px; color:#c6a8b4; line-height:1.4}
.ms-state{flex:none; font-size:9.5px; font-weight:800; letter-spacing:.2em; color:var(--muted);
  border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:3px 9px}
.mp-skip.on .ms-state{color:#1a0d13; background:#ff8fa3; border-color:transparent}

.mp-payout{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.1)}
.mp-pay-lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  font-weight:800}
.mp-payout b{font-family:var(--display); font-size:24px; color:var(--gold)}

.mp-msg{min-height:18px; text-align:center; font-size:12.5px; letter-spacing:.03em;
  color:var(--muted); opacity:0; transition:opacity .2s}
.mp-msg.on{opacity:1}
.mp-msg.good{color:var(--mint)}
.mp-msg.bad{color:#ff8fa3}

.mp-foot{display:flex; gap:12px; align-items:center; justify-content:space-between}
.mp-foot .btn.primary{min-width:230px}

@media (max-width: 860px){
  .mp-cols{grid-template-columns:1fr}
  .mp-head{flex-direction:column; text-align:center; gap:10px}
  .mp-head-text{text-align:center}
  .mp-foot{flex-direction:column-reverse}
  .mp-foot .btn{width:100%}
}
.title-foot .btn.ghost{padding:8px 18px; font-size:12px; margin-right:auto}

/* ---------------- the cinematic overlay ----------------
   Not a screen. It sits over everything so that a subtitle and a vote
   panel can be up at the same time. It is always inert, so a click on
   dialogue reaches the canvas and captures first-person look. */

#cine{position:fixed; inset:0; z-index:46; pointer-events:none; opacity:0;
  transition:opacity .5s ease}
#cine.on{opacity:1}

.cine-bar{
  position:absolute; left:0; right:0; height:0; background:#04090f;
  transition:height .8s cubic-bezier(.22,.9,.28,1);
}
.cine-bar.top{top:0}
.cine-bar.bottom{bottom:0}
#cine.bars .cine-bar{height:7.5vh}

.cine-caption{
  position:absolute; left:50%; bottom:calc(11.5vh + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);
  width:min(760px, 88vw); text-align:center;
  opacity:0; transition:opacity .28s ease, transform .28s ease;
}
.cine-caption.on{opacity:1; transform:translateX(-50%) translateY(0)}
.cap-speaker{
  font-family:var(--display); font-size:12.5px; letter-spacing:.30em; text-indent:.30em;
  color:var(--gold); margin-bottom:6px; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.cap-speaker:empty{display:none}
.cap-text{
  font-size:clamp(16px,2.3vw,22px); font-weight:600; line-height:1.5; color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8);
  text-wrap:balance;
}

/* the full-screen card: your role, and the night's twist */
.cine-card{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) scale(.94);
  width:min(560px, 86vw); text-align:center; padding:26px 30px 30px;
  border-radius:16px; opacity:0; pointer-events:none;
  background:linear-gradient(165deg, rgba(12,20,32,.93), rgba(6,12,20,.96));
  border:1px solid rgba(242,193,78,.30);
  box-shadow:0 26px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition:opacity .5s ease, transform .7s cubic-bezier(.18,.9,.25,1);
}
.cine-card.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.cc-kicker{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  margin-bottom:10px;
}
.cc-title{
  font-family:var(--display); font-size:clamp(30px,6vw,54px); letter-spacing:.05em;
  line-height:1; color:var(--gold); text-shadow:0 0 40px rgba(242,193,78,.35);
}
.cc-sub{margin-top:12px; font-size:13.5px; line-height:1.65; color:#cfe0f2}
.cc-sub:empty{display:none}

.cine-card.t-traitor{border-color:rgba(216,30,64,.55)}
.cine-card.t-traitor .cc-title{color:#ff5470; text-shadow:0 0 46px rgba(216,30,64,.6)}
.cine-card.t-faithful{border-color:rgba(125,252,208,.42)}
.cine-card.t-faithful .cc-title{color:var(--mint); text-shadow:0 0 42px rgba(125,252,208,.45)}
.cine-card.t-twist{border-color:rgba(63,224,255,.42)}
.cine-card.t-twist .cc-title{color:var(--cyan); text-shadow:0 0 42px rgba(63,224,255,.45)}

/* ---------------- the round table: your line ---------------- */

.screen.say{align-items:flex-end; justify-content:center; pointer-events:none;
  padding-bottom:calc(19vh + env(safe-area-inset-bottom))}
.say-panel{
  pointer-events:auto; width:min(720px, 94vw);
  display:flex; flex-direction:column; gap:9px;
}
.say-kicker{
  font-family:var(--display); font-size:12px; letter-spacing:.28em; text-indent:.28em;
  color:var(--gold); text-transform:uppercase; text-align:center; margin-bottom:2px;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.say-options{display:flex; flex-direction:column; gap:8px}
.btn.say-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-transform:none; letter-spacing:0; text-align:left; padding:12px 17px;
  background:rgba(10,20,32,.86); border:1px solid rgba(255,255,255,.16);
  color:var(--paper); backdrop-filter:blur(8px);
}
.btn.say-btn:hover, .btn.say-btn.nav-on{
  background:rgba(20,36,54,.94); border-color:rgba(242,193,78,.45);
}
.say-label{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  font-weight:800;
}
.say-text{font-size:14px; font-weight:500; line-height:1.5; color:#dceaf8; font-style:italic}

/* ---------------- the fire: the vote ---------------- */

.screen.vote{align-items:flex-end; justify-content:center; pointer-events:none;
  padding-bottom:calc(20vh + env(safe-area-inset-bottom))}
.vote-panel{
  pointer-events:auto; width:min(680px, 94vw); text-align:center;
  display:flex; flex-direction:column; gap:11px;
}
.vote-kicker{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.vote-title{
  margin:0; font-family:var(--display); font-size:clamp(22px,3.6vw,32px);
  letter-spacing:.04em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.vote-options{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.btn.vote-btn{
  flex:1 1 200px; max-width:300px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:15px 20px; text-transform:none; letter-spacing:0;
  background:rgba(10,20,32,.88); border:1px solid rgba(255,255,255,.18);
  color:var(--paper); backdrop-filter:blur(8px);
}
.vb-label{
  font-family:var(--display); font-size:18px; letter-spacing:.12em; text-transform:uppercase;
}
.vb-sub{font-size:11px; opacity:.7; font-weight:600}
.btn.vote-btn.v-end{border-color:rgba(125,252,208,.42)}
.btn.vote-btn.v-end .vb-label{color:var(--mint)}
.btn.vote-btn.v-banish, .btn.vote-btn.v-name{border-color:rgba(216,30,64,.45)}
.btn.vote-btn.v-banish .vb-label, .btn.vote-btn.v-name .vb-label{color:#ff5470}
.btn.vote-btn:hover:not(:disabled), .btn.vote-btn.nav-on{background:rgba(22,38,56,.95)}
.btn.vote-btn:disabled{opacity:.34; cursor:default}
.btn.vote-btn.chosen{
  opacity:1; border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 10px 30px rgba(242,193,78,.28);
}

.vote-tally{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; min-height:30px}
.vt{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:5px 13px; border-radius:8px; font-size:11.5px; font-weight:700;
  background:rgba(8,16,26,.7); border:1px solid rgba(255,255,255,.10); color:var(--muted);
  transition:all .3s ease;
}
.vt i{font-style:normal; font-size:9px; letter-spacing:.12em; text-transform:uppercase; opacity:.6}
.vt.in{color:var(--paper); border-color:rgba(242,193,78,.45); background:rgba(30,24,10,.7)}
.vt.in i{color:var(--gold); opacity:.9}
.vote-note{font-size:11px; color:var(--muted); letter-spacing:.03em}
.stage-hint{position:fixed; left:50%; top:18px; z-index:31; transform:translate(-50%,-8px);
  padding:8px 14px; border-radius:18px; pointer-events:none; opacity:0;
  color:rgba(240,249,255,.9); background:rgba(6,15,25,.72);
  border:1px solid rgba(255,255,255,.16); font-size:10px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; transition:opacity .2s,transform .2s}
.stage-hint.on{opacity:1; transform:translate(-50%,0)}
.stage-hint i{color:var(--gold); font-style:normal; margin:0 5px}

/* ---------------- the verdict ---------------- */

.screen.verdict{align-items:center; justify-content:center; overflow-y:auto;
  background:rgba(4,9,16,.72)}
.verdict-panel{width:min(560px, 96vw); text-align:center}
.verdict-title{
  margin:0; font-family:var(--display); font-size:clamp(38px,8vw,68px); letter-spacing:.05em;
  line-height:1;
}
.verdict-title.win{color:var(--gold); text-shadow:0 0 46px rgba(242,193,78,.45)}
.verdict-title.lose{color:#ff5470; text-shadow:0 0 46px rgba(216,30,64,.45)}
.verdict-role{
  margin-top:8px; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:800;
}
.verdict-role.faithful{color:var(--mint)}
.verdict-role.traitor{color:#ff5470}
.verdict-line{
  margin:14px 0 20px; font-size:14.5px; line-height:1.65; color:#cfe0f2; text-wrap:balance;
}

.verdict-cast{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:20px}
.vc{
  flex:1 1 130px; max-width:170px; padding:11px 8px; border-radius:11px;
  background:rgba(8,16,26,.8); border:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:3px;
}
.vc-name{font-family:var(--display); font-size:17px; letter-spacing:.04em; color:var(--paper)}
.vc-role{font-size:9.5px; letter-spacing:.18em; font-weight:800}
.vc.faithful{border-color:rgba(125,252,208,.32)}
.vc.faithful .vc-role{color:var(--mint)}
.vc.traitor{border-color:rgba(216,30,64,.42)}
.vc.traitor .vc-role{color:#ff5470}
.vc-fate{font-size:9.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted)}
.vc.out{opacity:.52}
.vc.out .vc-name{text-decoration:line-through; text-decoration-thickness:1px}

.verdict-money{
  border-top:1px solid rgba(255,255,255,.10); padding-top:14px; margin-bottom:20px;
  display:flex; flex-direction:column; gap:7px;
}
.vm-row{display:flex; justify-content:space-between; align-items:baseline; font-size:13px}
.vm-row span{color:var(--muted); letter-spacing:.05em}
.vm-row b{font-family:var(--display); font-size:19px; letter-spacing:.02em}
.vm-row.total{border-top:1px solid rgba(255,255,255,.08); padding-top:8px}
.vm-row.total b{color:var(--gold); font-size:23px}
.verdict-banked.win{color:var(--mint)}
.verdict-banked.lose{color:#ff5470}
.verdict-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ---------------- the focus ring ----------------
   Only while the pad or the keys are driving; a mouse takes it away
   again, so it never shows up as a stray outline for a mouse user. */

.nav-on{
  outline:2px solid var(--gold) !important; outline-offset:3px;
  box-shadow:0 0 0 5px rgba(242,193,78,.16) !important;
}
body.nav-mode .btn:focus{outline:none}
.mission-card.nav-on, .mission-quick.nav-on{outline-offset:2px}

/* ---------------- small screens ---------------- */

@media (max-width: 720px){
  .play-inner{gap:16px}
  .play-foot{gap:12px}
  /* Three columns of card is two too many on a phone: the meta rail
     goes, and the numeral shrinks to a marker rather than a feature. */
  .pcard{grid-template-columns:auto 1fr auto; gap:12px; padding:14px 15px}
  .pc-meta{display:none}
  .pc-n{font-size:22px}
  .mp-cols{gap:10px}
  .cap-text{font-size:15.5px}
  .cine-caption{bottom:calc(13vh + env(safe-area-inset-bottom)); width:92vw}
  .vote-options{flex-direction:column}
  .btn.vote-btn{max-width:none; padding:17px 18px}
  .btn.say-btn{padding:13px 15px}
  .say-text{font-size:13px}
  .screen.say, .screen.vote{padding-bottom:calc(15vh + env(safe-area-inset-bottom))}
  .verdict-cast{gap:6px}
  .vc{flex:1 1 90px; padding:9px 5px}
  .vc-name{font-size:14px}
  /* thumbs need a target, not a link */
  .btn{min-height:46px}
  .chip{min-height:38px}
  .btn.wide{padding-left:14px; padding-right:14px; letter-spacing:.08em}
  .pc-sub{font-size:11.5px}
  .mission-side{width:96px}
  .mission-side > button{min-height:46px; font-size:10px}
}

@media (max-height: 560px) and (orientation: landscape){
  #cine.bars .cine-bar{height:4.5vh}
  .cine-caption{bottom:calc(7vh + env(safe-area-inset-bottom))}
  .cine-card{top:40%; padding:16px 22px 20px}
  .cc-title{font-size:clamp(24px,5vw,36px)}
  .screen.say, .screen.vote{padding-bottom:calc(8vh + env(safe-area-inset-bottom))}
  .play-inner{gap:10px}
  .pcard{padding-top:11px; padding-bottom:11px}
  .pcard.hero{padding-top:13px; padding-bottom:13px}
  .play-blurb, .pm-seal{display:none}
}

/* a pad plugged in gets bigger hit areas even on a desktop, because it
   is being driven from a sofa */
@media (pointer: coarse){
}

/* the pot reads as a chip on the front door, not the banner it is on
   the mission list */
.pot.mini{padding:7px 14px; gap:7px}
.title-foot .btn.ghost{align-self:center}
/* a select carries its own focus ring badly, so it gets the same one */
select.nav-on{outline-offset:2px}

/* ==================================================================
   THE PARTY
   Everything below exists because there are two other people in the
   room. It follows the same conventions as everything above it: gold
   is the host and the UI, mint is good, crimson is bad, cyan is
   information, and nothing that layers over the game is a `.screen`.
   ================================================================== */

/* ---------------- the front door ---------------- */


/* Two buttons side by side is half a phone each, and `CREATE ROOM` in
   a display face that has not finished loading is wider than that. Below
   this they stack and get the whole width, which is also simply the
   better shape for a thumb. */
@media (max-width: 520px){
}

/* ---------------- lobby ---------------- */

/* The lobby's panels carry their own ground, but the brand, the
   status line and the hint under it were sitting directly on the sea. */
.screen.lobby{
  align-items:center; justify-content:center; overflow-y:auto;
  /* Heavier than the front door's: there are panels and a code to read
     here, and the backdrop is only company. */
  background:
    radial-gradient(ellipse 84% 66% at 50% 50%, rgba(4,10,20,.84) 0%,
                                                rgba(4,10,20,.36) 80%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(5,13,24,.74) 0%, rgba(5,13,24,.40) 40%,
                            rgba(5,13,24,.82) 100%);
}
.lobby-inner{
  width:min(760px, 100%); display:flex; flex-direction:column; gap:16px;
  align-items:center; text-align:center; margin:auto;
}
.brand.small .brand-title{font-size:clamp(30px,5vw,52px)}

.lobby-you{
  display:flex; gap:10px; align-items:flex-end; justify-content:center;
  flex-wrap:wrap; width:100%;
}
.field{display:flex; flex-direction:column; gap:6px; text-align:left}
.field>span{
  font-size:10px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.field input{
  font-family:var(--body); font-size:16px; font-weight:700; color:var(--paper);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:11px 14px; min-width:220px; outline:none;
}
.field input:focus{border-color:var(--gold); background:rgba(242,193,78,.08)}
.field input::placeholder{color:rgba(139,163,189,.6); font-weight:500}

.lobby-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; text-align:left;
}
.lobby-panel{padding:20px; display:flex; flex-direction:column; gap:12px}
.lp-head{
  font-family:var(--display); font-size:20px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gold);
}
.lp-note{margin:0; font-size:13px; line-height:1.5; color:var(--muted); flex:1}
.lobby-panel .btn{width:100%}

/* One field, typed. Four spinners were dialable on a gamepad and
   miserable everywhere else — somebody reads you four letters and you
   want to type four letters. The letter-spacing gives it the look of
   four boxes without being four controls. */
.code-entry{display:flex; justify-content:center}
.code-field{
  font-family:var(--display); font-size:clamp(34px,9vw,46px); line-height:1.1;
  text-align:center; letter-spacing:.34em; text-indent:.34em;
  color:var(--gold); background:rgba(242,193,78,.07);
  border:1px solid rgba(242,193,78,.3); border-radius:12px;
  padding:10px 6px; width:100%; max-width:290px; outline:none;
  text-transform:uppercase; caret-color:var(--gold);
}
.code-field::placeholder{color:rgba(242,193,78,.30); letter-spacing:.34em}
.code-field:focus, .code-field.nav-on{
  border-color:var(--gold); background:rgba(242,193,78,.16);
  box-shadow:0 0 0 3px rgba(242,193,78,.25);
}

.lobby-room{width:100%; display:flex; flex-direction:column; gap:14px; padding:22px}
.lr-code-label{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  font-weight:700;
}
.lr-code{
  font-family:var(--display); font-size:clamp(46px,9vw,78px); line-height:1;
  letter-spacing:.18em; color:var(--gold); text-shadow:0 0 34px rgba(242,193,78,.4);
  padding-left:.18em;
}
.lobby-roster{display:flex; flex-direction:column; gap:7px}
.lr-seat{
  display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
  padding:10px 13px; border-radius:10px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.lr-seat.you{border-color:rgba(242,193,78,.42); background:rgba(242,193,78,.09)}
.lr-seat.empty{opacity:.35; border-style:dashed}
.lr-seat-n{
  font-family:var(--display); font-size:15px; color:var(--muted);
  text-align:center;
}
.lr-name{font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis}
.lr-tag{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:800;
}
.lr-status{font-size:13px; color:var(--muted)}
.lr-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.lobby-msg{
  min-height:20px; font-size:13.5px; font-weight:600; color:#bed0e4; opacity:0;
  transition:opacity .2s;
}
.lobby-msg.on{opacity:1}
.lobby-msg.good{color:var(--mint)}
.lobby-msg.bad{color:#ff8095}

.lobby-foot{
  display:flex; gap:14px; align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:4px;
}
.lobby-hint{font-size:11.5px; color:#a2b8ce}
.chip.on{border-color:rgba(125,252,208,.5); color:var(--mint)}

/* ---------------- dressing room ----------------
   The figure is on the canvas behind this, left of centre, so the
   panel lives on the right and the page never covers them up. */

/* Weighted to the right, because the figure is on the left: the
   controls get a surface and the turntable stays in clear water. */
.screen.dressing{
  align-items:center; justify-content:flex-end; overflow-y:auto;
  background:linear-gradient(90deg, rgba(6,16,28,0) 0%, rgba(6,16,28,.10) 42%,
                                    rgba(6,16,28,.78) 74%, rgba(6,16,28,.92) 100%);
}
.dress-inner{
  width:min(420px,100%); display:flex; flex-direction:column; gap:14px; margin:auto 0;
}
.dress-head h2{
  font-family:var(--display); font-size:30px; margin:4px 0 4px;
  letter-spacing:.02em; text-transform:uppercase;
}
.dress-head p{margin:0; font-size:12.5px; color:#b6cade; line-height:1.5}
.dress-panel{display:flex; flex-direction:column; gap:14px; padding:20px}
.dress-rows{display:flex; flex-direction:column; gap:9px}
.dress-row{display:grid; grid-template-columns:66px 1fr auto; gap:10px; align-items:center}
.dr-label{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.dr-select{
  font-family:var(--body); font-size:14px; font-weight:700; color:var(--paper);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-radius:9px; padding:9px 11px; width:100%; cursor:pointer;
  appearance:none; -webkit-appearance:none; outline:none;
}
.dr-select:focus, .dr-select.nav-on{
  border-color:var(--gold); background:rgba(242,193,78,.12);
  box-shadow:0 0 0 3px rgba(242,193,78,.22);
}
.dr-select option{background:var(--ink-2); color:var(--paper)}
.dr-swatch{
  width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.3);
}
.dress-actions{display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap}

/* ---------------- the floor ----------------
   Above the subtitle so it is never hidden behind it, and never a
   `.screen`: it has to be readable over a vote panel and a mission. */

#floor-bar{
  position:fixed; left:50%; top:max(14px, env(safe-area-inset-top)); z-index:47;
  transform:translate(-50%,-14px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px; padding:9px 9px 9px 16px;
  border-radius:999px; background:rgba(8,16,26,.82); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow);
  transition:opacity .25s ease, transform .25s ease;
}
#floor-bar.on{opacity:1; transform:translate(-50%,0)}
#floor-bar.mine{border-color:rgba(242,193,78,.55); background:rgba(30,22,6,.86)}
.fb-who{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:var(--paper); white-space:nowrap;
}
#floor-bar.mine .fb-who{color:var(--gold)}
.fb-clock{font-family:var(--display); font-size:22px; line-height:1; color:var(--gold)}
.fb-track{
  width:88px; height:4px; border-radius:2px; background:rgba(255,255,255,.14);
  overflow:hidden;
}
.fb-fill{
  height:100%; background:var(--gold); transform-origin:left center;
  transform:scaleX(1); transition:transform .12s linear;
}
.fb-mic{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:var(--muted); padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.06);
}
.fb-mic.live{color:#0b1a12; background:var(--mint)}
.fb-done{
  pointer-events:all; font-family:var(--body); font-weight:800; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:7px 13px; border-radius:999px; color:var(--paper);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
}
.fb-done:hover{background:rgba(255,255,255,.16)}
.fb-done.nav-on{border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,193,78,.25)}
.fb-done:disabled{opacity:.5; cursor:default; background:rgba(255,255,255,.06)}
.fb-done:disabled:hover{background:rgba(255,255,255,.06)}

/* The open table: everybody's microphone, nobody's turn. Mint rather
   than gold, because gold on this bar has meant "it is your thirty
   seconds" all night and this is the opposite of that. */
#floor-bar.open{border-color:rgba(125,252,208,.45); background:rgba(8,26,20,.84)}
#floor-bar.open .fb-who{color:var(--mint)}
#floor-bar.open .fb-clock{color:var(--mint)}
#floor-bar.open .fb-fill{background:var(--mint)}

/* ---------------- the board ----------------
   It accuses nobody. That is the design: it prints what happened and
   lets three people argue about what it means. */

#board{
  position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); z-index:44;
  transform:translate(-50%,14px); opacity:0; pointer-events:none;
  width:min(620px, calc(100% - 28px));
  background:rgba(8,16,26,.86); backdrop-filter:blur(12px);
  border:1px solid rgba(242,193,78,.22); border-radius:14px; padding:14px 16px;
  box-shadow:var(--shadow); transition:opacity .3s ease, transform .3s ease;
}
#board.on{opacity:1; transform:translate(-50%,0)}
.bd-head-line{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.bd-head-line b{
  font-family:var(--display); font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold);
}
.bd-head-line span{font-size:10px; color:var(--muted)}
.board-grid{display:flex; flex-direction:column; gap:4px; overflow-x:auto}
.bd-row{
  display:grid; grid-template-columns:minmax(64px,1.3fr) repeat(var(--bd-cols,5), 1fr);
  gap:6px; align-items:center; padding:6px 8px; border-radius:8px; min-width:420px;
}
.bd-row span{
  font-size:12px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums;
}
.bd-row .bd-name{text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bd-head{background:none; padding-bottom:2px}
.bd-head span{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:800;
}
.bd-row:not(.bd-head){background:rgba(255,255,255,.05)}
.bd-row.you{background:rgba(242,193,78,.13); border:1px solid rgba(242,193,78,.3)}
.bd-row.out{opacity:.45; text-decoration:line-through}

.result-board{margin:14px 0 4px}
.rb-head{
  font-size:10px; letter-spacing:.20em; text-transform:uppercase; font-weight:800;
  color:var(--muted); margin-bottom:8px;
}
.result-board .board-grid{gap:4px}

/* ---------------- the field ----------------
   Live standings during a mission, and — not incidentally — the reason
   half the agenda tells are catchable at all. */

#field{
  position:fixed; right:max(14px, env(safe-area-inset-right)); top:22%; z-index:29;
  opacity:0; pointer-events:none; transform:translateX(10px);
  display:flex; flex-direction:column; gap:5px; min-width:170px;
  transition:opacity .3s ease, transform .3s ease;
}
#field.on{opacity:1; transform:translateX(0)}
.fd-row{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:6px 10px; border-radius:8px; background:rgba(8,16,26,.66);
  border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px);
}
.fd-row.you{border-color:rgba(242,193,78,.45); background:rgba(30,22,6,.7)}
.fd-row.dim{opacity:.4}
.fd-name{
  font-size:11px; font-weight:800; letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fd-val{
  font-size:12px; font-weight:800; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.fd-meter{
  grid-column:1 / -1; height:3px; border-radius:2px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.fd-meter i{
  display:block; height:100%; background:var(--cyan); transform-origin:left center;
}

/* ---------------- your task ----------------
   Only ever rendered from `Session.myAgenda()`, which is null for
   everybody who is not a Traitor. */

#agenda-chip{
  position:fixed; left:max(14px, env(safe-area-inset-left));
  bottom:max(90px, calc(env(safe-area-inset-bottom) + 90px)); z-index:29;
  width:min(280px, 62vw); opacity:0; pointer-events:none; transform:translateY(8px);
  padding:11px 14px; border-radius:12px; background:rgba(26,8,14,.82);
  border:1px solid rgba(216,30,64,.45); backdrop-filter:blur(8px);
  box-shadow:0 12px 34px rgba(120,10,30,.3);
  transition:opacity .35s ease, transform .35s ease;
}
#agenda-chip.on{opacity:1; transform:translateY(0)}
/* Over the race HUD the corner is already two deep, so the chip
   stands on top of both rather than in the middle of them. */
body[data-screen="hud"] #agenda-chip{bottom:calc(var(--bl-foot) + 62px)}
.ac-kicker{
  font-size:8px; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
  color:#ff8095; margin-bottom:5px;
}
.ac-text{font-size:12px; font-weight:700; line-height:1.45; color:var(--paper)}
.ac-prog{
  margin-top:6px; font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  font-weight:800; color:var(--gold);
}
/* The cover, said in a colour rather than a sentence: the border warms
   the moment the run itself supports the story, which is the only
   warning a Traitor gets that what they are about to say is true. */
#agenda-chip.covered{border-color:rgba(242,193,78,.55);
  box-shadow:0 12px 34px rgba(120,10,30,.3), 0 0 0 1px rgba(242,193,78,.18)}
#agenda-chip.done{border-color:rgba(126,224,168,.5)}

/* ---------------- narrow and short ---------------- */

@media (max-width:720px){
  .lobby-cols{grid-template-columns:1fr}
  .screen.dressing{justify-content:center; align-items:flex-end}
  .dress-inner{width:100%; margin:0}
  .dress-panel{padding:16px}
  .dress-row{grid-template-columns:60px 1fr auto}
  #field{top:auto; bottom:calc(env(safe-area-inset-bottom) + 96px); min-width:0}
  .fd-row{padding:5px 8px}
  #board{width:calc(100% - 20px)}
  .bd-row{min-width:360px}
  #agenda-chip{width:min(230px,54vw); bottom:calc(env(safe-area-inset-bottom) + 150px)}
  .lr-code{letter-spacing:.12em}
}

@media (max-height:560px) and (orientation:landscape){
  .lobby-inner{gap:10px}
  .brand.small .brand-title{font-size:26px}
  .lr-code{font-size:38px}
  .lobby-panel{padding:14px}
  .dress-panel{padding:14px}
  .dress-rows{gap:6px}
  #floor-bar{padding:6px 6px 6px 12px; gap:9px}
  .fb-clock{font-size:18px}
}

/* Coarse pointers need a bigger target than a mouse does, and a select
   is the one control a thumb genuinely gets right. */
@media (pointer:coarse){
  .code-field{padding:12px 6px; font-size:32px}
  .dr-select{padding:12px}
  .fb-done{padding:9px 15px}
}

@media (prefers-reduced-motion:reduce){
  #floor-bar, #board, #field, #agenda-chip{transition:none}
}

/* The microphone button. Deliberately not `#mute-btn`: game sound and
   your own voice are different things and share no state. */
#mic-btn{
  position:fixed; right:max(14px, env(safe-area-inset-right));
  bottom:max(14px, env(safe-area-inset-bottom)); z-index:48;
  pointer-events:all; background:rgba(8,18,30,.6); border:1px solid rgba(255,255,255,.16);
  color:var(--mint); width:38px; height:38px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; padding:0; backdrop-filter:blur(8px);
}
#mic-btn[hidden]{display:none}
#mic-btn:hover{background:rgba(8,18,30,.9)}
#mic-btn .slash{opacity:0; transition:opacity .15s}
#mic-btn.muted{color:#ff8fa3}
#mic-btn.muted .slash{opacity:1}
@media (pointer:coarse){ #mic-btn{width:46px; height:46px} }