/* =====================================================================
   VAULT LIVE ROOM  —  video surfaces + the corner navigation that gets
   arrows off the game.  2026-09-09.
   =====================================================================

   Two jobs, one file:

   1. THE GAME IS THE SACRED CENTRE. The previous shell put two large
      chevrons at the vertical middle of the screen edges — directly over
      the answer grid on a phone. This file demotes them to small labelled
      affordances in the TOP CORNERS ("< PEOPLE", "WAGERS >") and adds a
      subtle bottom hint for DOWN → LIVE ROOM. UP stays unused and hidden.
      The original .session-chevron classes and ids are untouched so
      client.js's wiring and style.css's existing rules both still apply;
      these rules override position and appearance only, by loading last
      and by pairing both classes for specificity.

   2. LIVE VIDEO NEVER COVERS THE GAME. #perimeterFeeds is anchored to the
      viewport EDGES, is pointer-events:none as a container (only the feeds
      themselves take a tap), and never occupies the middle band where the
      question, answer buttons, LOCK, countdown, commentary and scoring
      live. A feed can therefore never hide, or steal a tap from, anything
      that decides a round.

   Every colour, radius, duration, z-index and touch size below comes from
   vaultTokens.css. Reduced motion is handled at the token level (the
   motion tokens collapse to 1ms), with one extra explicit rule for the
   expand transform, which is a transform rather than a duration.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CORNER NAVIGATION  (replaces the big edge chevrons)
   ------------------------------------------------------------------ */
.session-chevron.shell-corner-nav {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  bottom: auto;
  transform: none;
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 6px 10px;
  font-size: var(--vault-type-micro);
  font-weight: var(--vault-weight-medium);
  letter-spacing: 0.08em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-pill);
  opacity: 0.72;
  z-index: var(--vault-z-chevron);
  transition: opacity var(--vault-motion-fast) var(--vault-ease),
              background-color var(--vault-motion-fast) var(--vault-ease);
}
.session-chevron.shell-corner-nav-left {
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: auto;
  background: rgba(245, 244, 242, 0.10);
  color: var(--vault-text);
  border-radius: var(--vault-radius-pill);
}
.session-chevron.shell-corner-nav-right {
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  left: auto;
  background: rgba(243, 201, 74, 0.18);
  color: var(--vault-gold);
  border-color: var(--vault-gold-ring);
  border-radius: var(--vault-radius-pill);
}
.session-chevron.shell-corner-nav:hover,
.session-chevron.shell-corner-nav:focus-visible { opacity: 1; }
.session-chevron.shell-corner-nav:active { opacity: 1; transform: scale(0.96); }

/* The shell header sits in the same top band; give it room so the two
   corner affordances never land on top of the brand or the room code. */
.shell-header { padding-top: 34px; }

/* ---------------------------------------------------------------------
   2. DOWN → LIVE ROOM hint
   Deliberately small and low-contrast: a hint, never an arrow over the
   game. Sits above the safe-area inset at the bottom centre, which is the
   one strip no game surface uses.
   ------------------------------------------------------------------ */
.live-room-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 12px;
  min-height: 28px;
  background: transparent;
  border: 0;
  color: var(--vault-text-muted);
  font-size: var(--vault-type-micro);
  font-weight: var(--vault-weight-medium);
  letter-spacing: 0.14em;
  opacity: 0.55;
  cursor: pointer;
  z-index: var(--vault-z-chevron);
  transition: opacity var(--vault-motion-fast) var(--vault-ease);
}
.live-room-hint:hover, .live-room-hint:focus-visible { opacity: 1; color: var(--vault-text); }
.live-room-hint-chev { font-size: 14px; line-height: 1; }
.live-room-hint-dot {
  position: absolute;
  top: 2px; right: 4px;
  width: 6px; height: 6px;
  border-radius: var(--vault-radius-pill);
  background: var(--vault-gold);
  box-shadow: 0 0 6px var(--vault-gold-glow);
}

/* ---------------------------------------------------------------------
   3. PERIMETER FEEDS
   The container is a non-interactive frame pinned to the viewport edges.
   Feeds stack down the LEFT and RIGHT margins, never across the middle,
   so the game surface underneath is never covered.
   ------------------------------------------------------------------ */
.perimeter-feeds {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* the frame itself is never a tap target */
  z-index: var(--vault-z-rail);
}
.perimeter-feed {
  position: absolute;
  pointer-events: auto;      /* ...but each small face is */
  width: clamp(64px, 17vw, 104px);
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-chip);
  background: var(--vault-surface);
  box-shadow: var(--vault-elev-1);
  cursor: pointer;
  transition: transform var(--vault-motion-base) var(--vault-ease-out),
              box-shadow var(--vault-motion-base) var(--vault-ease),
              border-color var(--vault-motion-fast) var(--vault-ease);
}
/* Slot 0/2 hug the left margin, slot 1/3 the right — top-anchored below
   the corner nav, so nothing sits in the vertical middle band. */
.perimeter-feed[data-slot="0"] { left: 6px;  top: calc(env(safe-area-inset-top, 0px) + 46px); }
.perimeter-feed[data-slot="1"] { right: 6px; top: calc(env(safe-area-inset-top, 0px) + 46px); }
.perimeter-feed[data-slot="2"] { left: 6px;  bottom: calc(env(safe-area-inset-bottom, 0px) + 46px); }
.perimeter-feed[data-slot="3"] { right: 6px; bottom: calc(env(safe-area-inset-bottom, 0px) + 46px); }

.perimeter-feed-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--vault-ground);
}
.perimeter-feed-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 4px;
  font-size: var(--vault-type-micro);
  color: var(--vault-text);
  background: linear-gradient(transparent, rgba(11, 12, 20, 0.85));
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ACTIVE PLAYER: a subtle step forward, not a resize. Nothing else on the
   screen moves when the round's target changes. */
.perimeter-feed.perimeter-active {
  border-color: var(--vault-gold-ring);
  box-shadow: var(--vault-elev-2), 0 0 0 2px var(--vault-gold-glow);
  transform: translateY(var(--vault-lift-answer)) scale(1.06);
}

/* TAP TO EXPAND: comes forward and enlarges in place, then returns cleanly
   to exactly where it was — the same spatial language as profiles, wager
   cards and Deep Dive. */
.perimeter-feed.perimeter-expanded {
  transform: scale(2.6);
  transform-origin: var(--expand-origin, top left);
  box-shadow: var(--vault-elev-3);
  z-index: 2;
}
.perimeter-feed[data-slot="1"].perimeter-expanded,
.perimeter-feed[data-slot="3"].perimeter-expanded { transform-origin: top right; }
.perimeter-feed[data-slot="2"].perimeter-expanded { transform-origin: bottom left; }
.perimeter-feed[data-slot="3"].perimeter-expanded { transform-origin: bottom right; }

/* ---------------------------------------------------------------------
   4. LIVE ROOM panel — slides UP from the bottom (the DOWN axis), the
   same off-canvas mechanic the PEOPLE panel uses horizontally.
   Uses visibility (not display) so the slide is actually visible.
   ------------------------------------------------------------------ */
.live-room-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 82vh;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  gap: var(--vault-space-2);
  padding: var(--vault-space-3);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vault-space-3));
  background: var(--vault-surface);
  border-top: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-card) var(--vault-radius-card) 0 0;
  box-shadow: var(--vault-elev-3);
  transform: translateY(100%);
  visibility: hidden;
  z-index: var(--vault-z-panel);
  transition: transform var(--vault-motion-base) var(--vault-ease-out),
              visibility 0s linear var(--vault-motion-base);
}
.live-room-panel.live-room-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--vault-motion-base) var(--vault-ease-out),
              visibility 0s;
}

.live-room-header { display: flex; align-items: center; gap: var(--vault-space-2); }
.live-room-title {
  font-size: var(--vault-type-small);
  font-weight: var(--vault-weight-heavy);
  letter-spacing: 0.16em;
  color: var(--vault-gold);
}
.live-room-mode {
  font-size: var(--vault-type-micro);
  color: var(--vault-text-muted);
  letter-spacing: 0.06em;
}
.live-room-close-btn {
  margin-left: auto;
  min-width: var(--vault-touch-min);
  min-height: var(--vault-touch-min);
  background: transparent;
  border: 0;
  color: var(--vault-text-muted);
  font-size: var(--vault-type-lead);
  cursor: pointer;
}
.live-room-close-btn:hover { color: var(--vault-text); }

.live-room-notice {
  padding: var(--vault-space-2);
  border: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-chip);
  background: var(--vault-surface-raised);
  color: var(--vault-text-muted);
  font-size: var(--vault-type-small);
  line-height: var(--vault-leading-body);
}

/* 2 players → large split; 3–4 → adaptive grid. */
.live-room-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: var(--vault-space-2);
  overflow-y: auto;
}
.live-room-grid.live-grid-2 { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.live-room-grid.live-grid-many { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 1fr); }
@media (min-width: 620px) {
  .live-room-grid.live-grid-2 { grid-template-columns: 1fr 1fr; }
}

.live-tile {
  position: relative;
  overflow: hidden;
  min-height: 110px;
  border: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-control);
  background: var(--vault-ground);
  transition: transform var(--vault-motion-base) var(--vault-ease-out),
              border-color var(--vault-motion-fast) var(--vault-ease),
              box-shadow var(--vault-motion-base) var(--vault-ease);
}
.live-tile-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-tile-video.live-tile-mirror { transform: scaleX(-1); }
.live-tile-off {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-text-muted);
  font-size: var(--vault-type-small);
  letter-spacing: 0.04em;
}
.live-tile-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: var(--vault-type-micro);
  color: var(--vault-text);
  background: linear-gradient(transparent, rgba(11, 12, 20, 0.9));
}
.live-tile-name { font-weight: var(--vault-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-tile-conn { margin-left: auto; color: var(--vault-spice-mid); }

.live-tile-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
.live-tile-act {
  padding: 3px 8px;
  min-height: 26px;
  font-size: var(--vault-type-micro);
  color: var(--vault-text);
  background: rgba(11, 12, 20, 0.72);
  border: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-pill);
  cursor: pointer;
}
.live-tile-act:hover { background: var(--vault-surface-raised); }

/* Active player steps forward here too — same emphasis, no resize. */
.live-tile.live-tile-active {
  border-color: var(--vault-gold-ring);
  box-shadow: 0 0 0 2px var(--vault-gold-glow);
  transform: translateY(var(--vault-lift-select));
}
.live-tile.live-tile-pinned { border-color: var(--vault-edge-control); }
.live-tile.live-tile-self { border-style: dashed; }

.live-room-controls { display: flex; gap: var(--vault-space-2); flex-wrap: wrap; }
.live-ctl {
  flex: 1 1 auto;
  min-height: var(--vault-touch-min);
  padding: 0 var(--vault-space-3);
  font-size: var(--vault-type-small);
  font-weight: var(--vault-weight-medium);
  color: var(--vault-text);
  background: var(--vault-surface-raised);
  border: 1px solid var(--vault-edge-control);
  border-radius: var(--vault-radius-control);
  cursor: pointer;
  transition: background-color var(--vault-motion-fast) var(--vault-ease),
              color var(--vault-motion-fast) var(--vault-ease),
              border-color var(--vault-motion-fast) var(--vault-ease);
}
/* SELF on = gold, the same "this is live, everyone can see it" language
   the rest of Vault uses. LOCAL controls are deliberately NOT gold — they
   are a private view preference, not a broadcast state. */
.live-ctl.live-ctl-on { background: var(--vault-gold); color: var(--vault-text-on-gold); border-color: var(--vault-gold); }
.live-ctl-local { flex: 0 0 auto; }
.live-ctl-local.live-ctl-on { background: var(--vault-surface); color: var(--vault-text); border-color: var(--vault-edge-control); }

.live-room-footnote {
  margin: 0;
  font-size: var(--vault-type-micro);
  color: var(--vault-text-muted);
  line-height: var(--vault-leading-body);
}

/* ---------------------------------------------------------------------
   5. REDUCED MOTION
   The duration tokens already collapse to 1ms globally. What still needs
   saying explicitly is the TRANSFORM: an expanded feed must still grow
   (that is the information), it just must not travel to get there, and
   the active-player step-forward becomes a pure border/glow change.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .perimeter-feed, .live-tile, .live-room-panel, .session-chevron.shell-corner-nav { transition: none; }
  .perimeter-feed.perimeter-active { transform: none; }
  .live-tile.live-tile-active { transform: none; }
}