/* =====================================================================
   LIVE BROADCAST — synthesized "Refined Neon HUD" pass (drop-in for live.css)
   Backbone: Direction C (restraint, mobile, keeps clip-path button identity,
   defines the UNDEFINED .btn-ghost) + Direction A's drawn corner brackets &
   richer frame glow + Direction B's auto-hiding [data-count='0'] idle state
   and --depth-bubble / --r-bubble token fidelity.

   Tokens from style.css :root — --bg --bg-2 --panel --panel-2 --line
   --neon-cyan/pink/purple/yellow/green --text --text-dim --text-dim2
   --r-bubble:14px --r-ctl:10px --r-md:10px --r-pill:999px
   --glow-cyan --glow-pink --depth-bubble --font-display --font-mono.
   NOTE: :root defines --neon-yellow (not --neon-amber). Coins use
   var(--neon-yellow); the var(--neon-amber, #ffcf5c) form is kept where the
   original file used it so nothing breaks if it's ever introduced.

   Every z-index (tiles 1 / hearts 8 / gifts 9 / actions 11 / pk-bar 12 /
   unmute 13 / modal 20 / pk-prompt 25), every [hidden] guard, the
   .live-tiles[data-count] grid and .live-video-wrap aspect-ratio:16/9 are
   preserved exactly. No id/class is renamed.
   ===================================================================== */

.live-page {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-mono, 'Share Tech Mono', monospace);
}

/* ---------- Topbar + identity ---------- */
.live-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem clamp(0.8rem, 3vw, 1.4rem);
  /* safe-area aware so the bar clears the notch in standalone/iOS */
  padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 13, 24, 0.9), rgba(7, 7, 13, 0.78));
  backdrop-filter: blur(10px);
  /* lit hairline under the bar — a HUD edge, not a flat border */
  box-shadow: 0 1px 0 rgba(0, 240, 255, 0.1), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.live-shell {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 68px);
}
.live-logo {
  display: inline-flex;
  align-items: baseline;
  min-height: 2.5rem;
  gap: 0.05em;
  text-decoration: none;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  letter-spacing: 0.04em;
}
.live-logo:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  border-radius: var(--r-ctl, 10px);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.65);
}
.live-top-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Viewer + coin counts as quiet bordered HUD chips. */
.live-coins,
.live-viewers {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  background: rgba(7, 7, 13, 0.45);
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}
.live-viewers { color: var(--neon-cyan); }
.live-coins {
  color: var(--neon-yellow, #ffcf5c);
  border-color: rgba(246, 255, 0, 0.3);
}
/* base rule sets inline-flex → re-assert UA [hidden] (both toggle in JS). */
.live-coins[hidden],
.live-viewers[hidden] { display: none; }

/* ● LIVE — confident broadcast indicator: glowing pink glass pill + pulse. */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--neon-pink);
  background: rgba(255, 43, 214, 0.1);
  border: 1px solid var(--neon-pink);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.26rem 0.6rem;
  border-radius: var(--r-pill, 999px);
  text-shadow: 0 0 8px rgba(255, 43, 214, 0.7);
  box-shadow: var(--glow-pink, 0 0 12px rgba(255, 43, 214, 0.4));
  animation: live-pulse 1.6s ease-in-out infinite;
}
.live-badge[hidden] { display: none; }
@keyframes live-pulse { 50% { opacity: 0.55; } }

/* ---------- Notices ---------- */
.live-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 640px;
  margin: clamp(3rem, 14vh, 7rem) auto 2rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background:
    linear-gradient(145deg, rgba(0, 240, 255, 0.065), transparent 44%),
    linear-gradient(315deg, rgba(255, 43, 214, 0.055), transparent 42%),
    var(--panel, rgba(15, 15, 30, 0.85));
  backdrop-filter: blur(10px);
  box-shadow: var(--depth-bubble), 0 16px 44px rgba(0, 0, 0, 0.28);
  color: var(--text-dim2, #95a6c9);
  text-align: center;
  line-height: 1.6;
}
.live-notice a {
  color: var(--neon-cyan);
  text-decoration: none;
}
.live-notice a:hover { text-decoration: underline; }
.live-notice-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: var(--r-ctl, 10px);
  background: rgba(0, 240, 255, 0.08);
  color: var(--neon-cyan);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.live-notice-action:hover {
  background: rgba(0, 240, 255, 0.14);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.24);
  text-decoration: none;
}
.live-notice.err {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  box-shadow: var(--depth-bubble), var(--glow-pink);
}
.live-notice.warn { border-color: rgba(0, 240, 255, 0.45); }
.live-notice.ok {
  border-color: var(--neon-green, #36f1a3);
  color: var(--neon-green, #36f1a3);
  box-shadow: 0 0 12px rgba(0, 255, 149, 0.25);
}

/* ============================================================
   MODALS (age gate / gift / pk) — frosted glass cards.
   Author display rules beat UA [hidden]{display:none}; each element that
   sets display re-states its own [hidden] guard (age-modal/gallery incident).
   ============================================================ */
.live-modal[hidden],
.live-stage[hidden] { display: none; }
.live-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 8, 0.8);
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.live-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--neon-cyan);
  border-radius: var(--r-bubble, 14px);
  background:
    linear-gradient(145deg, rgba(0, 240, 255, 0.09), transparent 42%),
    linear-gradient(315deg, rgba(255, 43, 214, 0.06), transparent 40%),
    var(--panel-2, rgba(20, 20, 40, 0.96));
  backdrop-filter: blur(16px);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.26), 0 18px 50px rgba(0, 0, 0, 0.55);
}
/* HUD corner brackets on the modal — drawn, no DOM change. */
.live-modal-card::before,
.live-modal-card::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.live-modal-card::before {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--neon-cyan);
  border-left: 2px solid var(--neon-cyan);
}
.live-modal-card::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid var(--neon-pink);
  border-right: 2px solid var(--neon-pink);
}
.live-modal-card h2 {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  color: var(--neon-cyan);
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}
.live-modal-card p { color: var(--text-dim2, #95a6c9); line-height: 1.6; font-size: 0.9rem; }
.live-age-check { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; font-size: 0.9rem; }
.live-age-check a { color: var(--neon-cyan); }
.live-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   SECONDARY BUTTONS — .btn-ghost was UNDEFINED in the codebase (fell back
   to a raw UA button — the cause of the broken-looking secondary actions).
   This is the quiet outlined "everything that isn't THE action" control:
   end live, decline, close, top-up. Sized to pair beside a filled .btn-neon.
   ============================================================ */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl, 10px);
  background: rgba(7, 7, 13, 0.4);
  color: var(--text-dim2, #95a6c9);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.btn-ghost:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.06);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.18);
}
.btn-ghost:focus-visible {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.28);
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
}
.btn-ghost.full { width: 100%; }
/* The two "end" controls read as a calm danger (pink), not a primary. */
#host-end:hover,
#cohost-leave:hover,
#host-end:focus-visible,
#cohost-leave:focus-visible {
  color: var(--neon-pink);
  border-color: var(--neon-pink);
  background: rgba(255, 43, 214, 0.06);
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.2);
}

/* tiny-btn is defined globally in pages.css; reinforce the live copy/send so
   they read as small confident actions, not bare outlines. */
.live-chat-form .tiny-btn,
.live-share .tiny-btn {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  letter-spacing: 0.06em;
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.06);
}
.live-chat-form .tiny-btn { padding: 0.45rem 0.9rem; }
.live-chat-form .tiny-btn:hover,
.live-share .tiny-btn:hover {
  background: var(--neon-cyan);
  color: var(--bg);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

/* ============================================================
   PRIMARY ACTIONS — strong FILLED neon (fixes the "thin outline" read).
   style.css makes .btn-neon.btn-primary a cyan-outline-until-hover button —
   exactly why the screenshot showed thin text. We KEEP the signature
   clip-path skew + Orbitron and just turn the existing ::before fill ON at
   rest (opacity:1) + add a glow + the canonical .social-btn.primary sheen
   sweep, so the brightest object on each surface is always the key action.
   ============================================================ */
.live-page .btn-neon.btn-primary {
  color: var(--bg);
  text-shadow: none;
  box-shadow:
    0 0 18px rgba(0, 240, 255, 0.42),
    inset 0 0 14px rgba(255, 255, 255, 0.1);
}
.live-page .btn-neon.btn-primary::before { opacity: 1; }
/* sheen sweep on hover (mirrors .social-btn.primary::after). */
.live-page .btn-neon.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
}
.live-page .btn-neon.btn-primary:hover {
  color: var(--bg);
  box-shadow:
    0 0 26px rgba(0, 240, 255, 0.6),
    0 0 40px rgba(255, 43, 214, 0.28),
    inset 0 0 14px rgba(255, 255, 255, 0.12);
}
.live-page .btn-neon.btn-primary:hover::after { transform: translateX(130%); }
/* The Pro upsell CTA flips to a pink-led fill so it reads as "Pro/premium". */
.live-upsell .btn-neon.btn-primary { color: var(--bg); }
.live-upsell .btn-neon.btn-primary::before { background: var(--neon-pink); }
.live-upsell .btn-neon.btn-primary:hover {
  box-shadow:
    0 0 26px rgba(255, 43, 214, 0.6),
    inset 0 0 14px rgba(255, 255, 255, 0.12);
}
/* Non-primary live .btn-neon (⚔ PK, accept co-host) keep the cyan outline but
   get a faint resting fill so they don't read as flat text either. */
.live-page .btn-neon:not(.btn-primary) { background: rgba(0, 240, 255, 0.06); }
.live-page .btn-neon:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.live-page .btn-neon:disabled::after { display: none; }

/* ---------- Stage ---------- */
.live-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 1rem;
  max-width: 1240px;
  margin: 1rem auto;
  padding: 0 1rem;
  align-items: start;
}

/* ---------- Video frame: the hero / studio monitor ---------- */
.live-video-wrap {
  position: relative;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: var(--r-bubble, 14px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #0c0c18, #02030a 75%);
  aspect-ratio: 16 / 9;
  /* double-edge neon: pink inner rim + outer cyan glow + soft drop + inner top-light */
  box-shadow:
    0 0 0 1px rgba(255, 43, 214, 0.14),
    0 0 26px rgba(0, 240, 255, 0.2),
    0 14px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(0, 240, 255, 0.12);
}
/* Keep the [data-count] grid contract EXACTLY as the original. */
.live-tiles {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 2px;
  background: transparent;
  z-index: 1;
}
.live-tiles[data-count='2'] { grid-template-columns: 1fr 1fr; }
.live-tiles[data-count='3'],
.live-tiles[data-count='4'] { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
/* Animated idle/empty state — shown before the first tile mounts (count 0).
   Pure CSS via ::after keyed off the real attribute; vanishes automatically
   the moment live.js changes data-count. No JS, no DOM, no z/letterbox bleed. */
.live-tiles[data-count='0']::after {
  content: '● กำลังเชื่อมต่อ…';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.06), transparent 65%);
  animation: live-pulse 1.8s ease-in-out infinite;
}
.live-tile { position: relative; overflow: hidden; background: #000; min-height: 0; }
.live-tile video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
/* A solo tile shouldn't crop (no neighbour to balance against). */
.live-tiles[data-count='1'] .live-tile video { object-fit: contain; }
/* thin neon divider between co-host tiles */
.live-tiles[data-count='2'] .live-tile + .live-tile,
.live-tiles[data-count='3'] .live-tile,
.live-tiles[data-count='4'] .live-tile { box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.16); }

.live-tile-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--neon-cyan);
  background: rgba(7, 7, 13, 0.72);
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 0.14rem 0.5rem;
  border-radius: var(--r-pill, 999px);
  backdrop-filter: blur(3px);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-tile-tag.host {
  color: var(--neon-pink);
  border-color: rgba(255, 43, 214, 0.5);
  box-shadow: var(--glow-pink);
}

/* Optional HUD corner brackets (decorative; see html_notes). Frame is finished
   without them. z-index:2 sits BELOW actions(11)/pk-bar(12)/unmute(13);
   pointer-events:none so they never steal a tap or block an overlay. */
.live-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
}
.live-corner.tl { top: 8px; left: 8px; border-top: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan); }
.live-corner.tr { top: 8px; right: 8px; border-top: 2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan); }
.live-corner.bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--neon-pink); border-left: 2px solid var(--neon-pink); }
.live-corner.br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--neon-pink); border-right: 2px solid var(--neon-pink); }

/* Tap-to-unmute pill (z13). [hidden] guard required — base rule sets display. */
.live-unmute {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  z-index: 13;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--neon-cyan);
  border-radius: var(--r-pill, 999px);
  background: rgba(7, 7, 13, 0.85);
  backdrop-filter: blur(5px);
  color: var(--neon-cyan);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  animation: live-pulse 1.8s ease-in-out infinite;
  transition: background 0.15s, box-shadow 0.15s;
}
.live-unmute[hidden] { display: none; }
.live-unmute:hover { background: rgba(0, 240, 255, 0.14); box-shadow: 0 0 22px rgba(0, 240, 255, 0.55); }

/* Polished bottom meta gradient + glass host chip. */
.live-video-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
  padding: 1.4rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(2, 3, 10, 0.55) 45%, rgba(2, 3, 10, 0.85));
}
.live-host-name {
  color: var(--neon-cyan);
  font-weight: 700;
  padding: 0.12rem 0.55rem;
  border-radius: var(--r-pill, 999px);
  background: rgba(7, 7, 13, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.3);
  backdrop-filter: blur(5px);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
}
.live-title { color: var(--text-dim2, #95a6c9); font-size: 0.85rem; }
.live-pin {
  position: absolute;
  left: 0.75rem;
  right: 4.2rem;
  bottom: 4.2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100% - 5rem);
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(246, 255, 0, 0.45);
  border-radius: var(--r-md, 10px);
  background: rgba(7, 7, 13, 0.78);
  color: var(--text);
  box-shadow: 0 0 14px rgba(246, 255, 0, 0.18);
  backdrop-filter: blur(5px);
  line-height: 1.35;
}
.live-pin[hidden] { display: none; }
.live-pin-label {
  flex: 0 0 auto;
  color: var(--neon-yellow, #ffcf5c);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#live-pin-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim2, #95a6c9);
  font-size: 0.82rem;
}

/* ============================================================
   SIDE PANELS — real frosted HUD surfaces (instrument modules)
   ============================================================ */
.live-side { display: flex; flex-direction: column; gap: 0.9rem; }

/* A host watches comments constantly; the live controls are occasional. Order the
   column so the chat sits ABOVE the live-control panels (host-live / cohost-live),
   while the pre-broadcast setup form stays on top BEFORE going live. Hidden panels
   are display:none so they don't participate — every state (pre-live host / live
   host / co-host / viewer) sorts correctly with zero JS. */
.live-host-setup,
.live-upsell { order: 1; }
.live-chat { order: 2; }
.live-host-live,
#cohost-live { order: 3; }

.live-host-setup,
.live-host-live,
.live-chat {
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background:
    linear-gradient(145deg, rgba(0, 240, 255, 0.05), transparent 34%),
    var(--panel, rgba(15, 15, 30, 0.85));
  backdrop-filter: blur(8px);
  box-shadow: var(--depth-bubble), 0 0 14px rgba(0, 240, 255, 0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.live-host-setup,
.live-host-live { padding: 1rem 1.05rem; }
.live-host-setup:hover,
.live-host-live:hover,
.live-chat:focus-within {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: var(--depth-bubble), var(--glow-cyan);
}

/* Shared HUD section header — Orbitron label + glow + left neon tick-rule
   (echoes .sb-title on /chat). Applied to every panel/feed heading so each
   section announces itself. */
.live-host-setup h3,
.live-upsell h3,
.live-feed-head h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}
.live-host-setup h3::before,
.live-upsell h3::before,
.live-feed-head h2::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 1em;
  border-radius: 2px;
}
.live-host-setup h3 { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.45); }
.live-host-setup h3::before { background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }

/* Upgrade prompt (non-Pro). Pink-keyed. Default block flow → UA [hidden] hides
   it; explicit guard too (age-modal/gallery fix). */
.live-upsell {
  border: 1px solid var(--neon-pink);
  border-radius: var(--r-md, 10px);
  padding: 1.1rem 1.15rem;
  background:
    linear-gradient(150deg, rgba(255, 43, 214, 0.1), transparent 52%),
    var(--panel, rgba(15, 15, 30, 0.85));
  backdrop-filter: blur(8px);
  box-shadow: var(--depth-bubble), 0 0 16px rgba(255, 43, 214, 0.16);
}
.live-upsell[hidden] { display: none; }
.live-upsell h3 { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255, 43, 214, 0.5); }
.live-upsell h3::before { background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); }
.live-upsell p { margin: 0 0 0.9rem; color: var(--text-dim2, #95a6c9); line-height: 1.6; font-size: 0.9rem; }

/* ---------- Form fields ---------- */
.live-field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-dim2, #95a6c9);
}
.live-field input,
.live-field select,
.live-share input,
.live-chat-form input,
.live-report-input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl, 10px);
  background: rgba(7, 7, 13, 0.55);
  color: var(--text);
  caret-color: var(--neon-cyan);
  color-scheme: dark;
  font-family: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.live-field input:focus,
.live-field select:focus,
.live-chat-form input:focus,
.live-share input:focus {
  border-color: var(--neon-cyan);
  outline: none;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.32);
}
.live-field input::placeholder,
.live-chat-form input::placeholder,
.live-report-input::placeholder {
  color: var(--text-dim, #7a8aab);
  opacity: 0.82;
}
.live-hint { color: var(--text-dim, #7a8aab); font-size: 0.74rem; line-height: 1.5; margin: 0.7rem 0 0; }
.full { width: 100%; }

.live-share {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-dim2, #95a6c9);
}
.live-share span {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--neon-cyan);
}
.live-share input { color: var(--neon-cyan); font-size: 0.82rem; }
/* the copy button sits beside the share input on its own row */
.live-share .tiny-btn { justify-self: start; }
.live-pin-form {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.live-pin-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.live-pin-actions .ghost {
  border-color: var(--line);
  color: var(--text-dim2, #95a6c9);
}
.live-slow-mode {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
}
.live-field select {
  min-height: 40px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--neon-cyan) 50%) right 0.8rem center / 7px 7px no-repeat,
    rgba(7, 7, 13, 0.55);
  padding-right: 2rem;
}

/* ---------- Comments / chat ---------- */
.live-chat { display: flex; flex-direction: column; overflow: hidden; }
.live-chat-log {
  /* Taller on desktop — the right column beside a 16:9 video has room to spare,
     so the host can read many comments at once instead of a cramped 320px slit. */
  height: clamp(340px, 54vh, 600px);
  overflow-y: auto;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.4) transparent;
  /* fade the top edge so scrolled comments dissolve into the header */
  mask-image: linear-gradient(180deg, transparent, #000 14px);
}
.live-chat-log::-webkit-scrollbar { width: 8px; }
.live-chat-log::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.3); border-radius: 999px; }
.live-chat-log:empty {
  justify-content: center;
}
.live-chat-log:empty::before {
  content: 'ยังไม่มีคอมเมนต์ในไลฟ์นี้';
  display: grid;
  place-items: center;
  min-height: 7rem;
  padding: 1rem;
  border: 1px dashed rgba(0, 240, 255, 0.22);
  border-radius: var(--r-md, 10px);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.08), transparent 58%),
    rgba(7, 7, 13, 0.34);
  color: var(--text-dim2, #95a6c9);
  line-height: 1.5;
  text-align: center;
}
.live-cmt {
  font-size: 0.85rem;
  line-height: 1.45;
  word-break: break-word;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  animation: live-cmt-in 0.22s ease-out;
}
@keyframes live-cmt-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.live-cmt b { color: var(--neon-cyan); flex: 0 0 auto; text-shadow: 0 0 5px rgba(0, 240, 255, 0.35); }
.live-cmt span { flex: 1; color: var(--text); }
.live-cmt-mod {
  flex: 0 0 auto;
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
  background: rgba(255, 43, 214, 0.06);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.12rem 0.4rem;
  transition: background 0.15s, box-shadow 0.15s;
}
.live-cmt-mod:hover { background: rgba(255, 43, 214, 0.16); box-shadow: 0 0 8px rgba(255, 43, 214, 0.4); }
.live-cmt-mod.invite { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0, 240, 255, 0.06); }
.live-cmt-mod.invite:hover { background: rgba(0, 240, 255, 0.16); box-shadow: 0 0 8px rgba(0, 240, 255, 0.4); }
.live-cmt-mod.mute { border-color: var(--neon-yellow, #ffcf5c); color: var(--neon-yellow, #ffcf5c); background: rgba(255, 207, 92, 0.06); }
.live-cmt-mod.mute:hover { background: rgba(255, 207, 92, 0.16); box-shadow: 0 0 8px rgba(255, 207, 92, 0.36); }
.live-chat-form {
  display: flex;
  gap: 0.45rem;
  padding: 0.6rem;
  border-top: 1px solid var(--line);
  background: rgba(7, 7, 13, 0.4);
}
.live-report {
  border: none;
  background: transparent;
  color: var(--text-dim, #7a8aab);
  font-size: 0.74rem;
  padding: 0.55rem;
  cursor: pointer;
  border-top: 1px solid var(--line);
  transition: color 0.15s;
}
.live-report:hover { color: var(--neon-pink); }

/* Report modal textarea (reuses .live-modal card + its [hidden] guard). */
.live-report-input {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.9rem;
  line-height: 1.55;
  min-height: 7.5rem;
  resize: vertical;
}
.live-report-input:focus {
  border-color: var(--neon-pink);
  outline: none;
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.3);
  caret-color: var(--neon-pink);
}

/* ============================================================
   HEARTS + GIFTS (ambient overlays — never capture clicks)
   ============================================================ */
.live-hearts,
.live-gifts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 8;
}
.live-gifts { z-index: 9; }
.live-heart {
  position: absolute;
  left: 50%;
  bottom: 8%;
  font-size: 1.6rem;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 8px rgba(255, 43, 214, 0.5));
  animation: live-float-up 2.6s ease-out forwards;
}
.heart-x-1 { left: 14%; }
.heart-x-2 { left: 26%; }
.heart-x-3 { left: 38%; }
.heart-x-4 { left: 50%; }
.heart-x-5 { left: 62%; }
.heart-x-6 { left: 74%; }
.heart-drift-l2 { --drift: -30px; }
.heart-drift-l1 { --drift: -16px; }
.heart-drift-0 { --drift: 0; }
.heart-drift-r1 { --drift: 16px; }
.heart-drift-r2 { --drift: 30px; }
@keyframes live-float-up {
  0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-10%) scale(1); }
  100% { transform: translateY(-260px) translateX(var(--drift, 0)) scale(1.1); opacity: 0; }
}
.live-gift-fly {
  position: absolute;
  left: 50%;
  top: 42%;
  font-size: 4.5rem;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: live-gift-pop 2.4s ease-out forwards;
  filter: drop-shadow(0 0 16px rgba(255, 43, 214, 0.65));
}
@keyframes live-gift-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  70% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(0.9); }
}

/* ---------- Floating action buttons over the video (z11) ---------- */
.live-actions {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  z-index: 11;
}
.live-actions[hidden] { display: none; }
.live-fab {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line);
  background: rgba(7, 7, 13, 0.7);
  backdrop-filter: blur(5px);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--depth-bubble);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.live-fab[hidden] { display: none; }
.live-fab:active { transform: scale(0.88); }
.live-fab:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}
.live-fab:focus-visible {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
}
.live-fab.heart { border-color: var(--neon-pink); }
.live-fab.heart:hover,
.live-fab.heart:focus-visible {
  border-color: var(--neon-pink);
  background: rgba(255, 43, 214, 0.14);
  box-shadow: 0 0 14px rgba(255, 43, 214, 0.45);
}
.live-fab.heart:focus-visible { outline-color: var(--neon-pink); }

/* ---------- Gift picker ---------- */
.live-gift-balance { color: var(--text-dim2, #95a6c9); font-size: 0.85rem; margin: 0 0 0.7rem; }
.live-gift-balance strong { color: var(--neon-yellow, #ffcf5c); text-shadow: 0 0 6px rgba(255, 207, 92, 0.4); }
.live-gift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.1rem;
}
.live-gift-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: rgba(7, 7, 13, 0.5);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.live-gift-item:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.22);
  transform: translateY(-2px);
}
.live-gift-item .gi-emoji { font-size: 1.85rem; filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.35)); }
.live-gift-item .gi-name { font-size: 0.78rem; color: var(--text-dim2, #95a6c9); }
.live-gift-item .gi-cost { font-size: 0.78rem; color: var(--neon-yellow, #ffcf5c); font-weight: 700; }
.live-gift-msg { color: var(--neon-pink); font-size: 0.82rem; min-height: 1.1em; margin-top: 0.6rem; text-shadow: 0 0 6px rgba(255, 43, 214, 0.35); }
.live-gift-msg a { color: var(--neon-cyan); }

/* ============================================================
   DISCOVERY FEED (bare /live)
   ============================================================ */
.live-feed {
  max-width: 1140px;
  margin: 1.3rem auto;
  padding: 0 1rem;
}
.live-feed[hidden] { display: none; }
.live-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.live-feed-head h2 { color: var(--neon-pink); text-shadow: 0 0 12px rgba(255, 43, 214, 0.45); }
.live-feed-head h2::before { background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); }
.live-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 0.9rem;
}
.live-feed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-bubble, 14px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 43, 214, 0.08), transparent 50%),
    var(--panel, rgba(15, 15, 30, 0.85));
  backdrop-filter: blur(8px);
  box-shadow: var(--depth-bubble);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
/* top hairline accent that lights up on hover — reads as a tuned channel */
.live-feed-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  opacity: 0.5;
  transition: opacity 0.15s;
}
.live-feed-card:hover {
  border-color: var(--neon-cyan);
  box-shadow: var(--depth-bubble), 0 0 20px rgba(0, 240, 255, 0.2);
}
.live-feed-card:hover::before { opacity: 1; }
/* Hover lift only where a real pointer exists (no stuck transform on touch). */
@media (hover: hover) {
  .live-feed-card:hover { transform: translateY(-3px); }
}
.live-feed-card .lf-live {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-pink);
  background: rgba(255, 43, 214, 0.12);
  border: 1px solid var(--neon-pink);
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-pill, 999px);
  text-shadow: 0 0 6px rgba(255, 43, 214, 0.5);
}
.live-feed-card .lf-title { font-weight: 700; line-height: 1.3; font-size: 0.95rem; }
.live-feed-card .lf-host { color: var(--neon-cyan); font-size: 0.82rem; }
.live-feed-card .lf-meta { color: var(--text-dim2, #95a6c9); font-size: 0.78rem; }
.live-feed-empty {
  grid-column: 1 / -1;
  color: var(--text-dim2, #95a6c9);
  text-align: center;
  padding: 2.4rem 1rem;
  border: 1px dashed rgba(0, 240, 255, 0.22);
  border-radius: var(--r-md, 10px);
  background: rgba(7, 7, 13, 0.35);
}
.live-feed-empty[hidden] { display: none; }

/* ============================================================
   PK BATTLE
   ============================================================ */
.pk-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  padding: 0.55rem 0.75rem 0.65rem;
  background: linear-gradient(180deg, rgba(2, 3, 10, 0.9), transparent);
}
.pk-bar[hidden] { display: none; }
.pk-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pk-nick {
  color: var(--neon-cyan);
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-nick.b { color: var(--neon-pink); text-align: right; text-shadow: 0 0 6px rgba(255, 43, 214, 0.45); }
.pk-count {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-weight: 700;
  color: var(--bg);
  background: var(--neon-pink);
  padding: 0.08rem 0.55rem;
  border-radius: var(--r-pill, 999px);
  font-size: 0.8rem;
  box-shadow: var(--glow-pink);
}
/* versus track: cyan fill (A) advancing over a pink track (B), glow at the seam */
.pk-fill {
  position: relative;
  height: 9px;
  margin: 0.4rem 0;
  border-radius: var(--r-pill, 999px);
  overflow: hidden;
  background: var(--neon-pink);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.pk-fill-a {
  display: block;
  height: 100%;
  width: 100%;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
.pk-fill-a::-webkit-progress-bar { background: transparent; }
.pk-fill-a::-webkit-progress-value { background: var(--neon-cyan); transition: width 0.4s ease; }
.pk-fill-a::-moz-progress-bar {
  background: var(--neon-cyan);
  transition: width 0.4s ease;
}
.pk-scores .pk-score { font-weight: 700; font-family: var(--font-mono, monospace); }
.pk-scores .pk-score:first-child { color: var(--neon-cyan); text-shadow: 0 0 5px rgba(0, 240, 255, 0.4); }
.pk-scores .pk-score:last-child { color: var(--neon-pink); text-shadow: 0 0 5px rgba(255, 43, 214, 0.4); }
.pk-vs { color: var(--text-dim2, #95a6c9); }

/* PK / co-host prompts (z25). [hidden] guards required (base sets display:flex). */
.pk-prompt {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: calc(100vw - 1.6rem);
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--neon-pink);
  border-radius: var(--r-bubble, 14px);
  background:
    linear-gradient(145deg, rgba(255, 43, 214, 0.08), transparent 50%),
    var(--panel-2, rgba(10, 10, 18, 0.97));
  backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(255, 43, 214, 0.35), 0 14px 40px rgba(0, 0, 0, 0.55);
}
.pk-prompt[hidden] { display: none; }
.pk-prompt-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* PK opponent picker */
.pk-opp-grid { display: grid; gap: 0.5rem; max-height: 50vh; overflow-y: auto; padding: 0.1rem; }
.pk-opp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: rgba(7, 7, 13, 0.5);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.pk-opp-item:hover {
  border-color: var(--neon-pink);
  background: rgba(255, 43, 214, 0.08);
  box-shadow: 0 0 12px rgba(255, 43, 214, 0.22);
}
.pk-opp-name { color: var(--neon-cyan); font-weight: 700; }
.pk-opp-meta { color: var(--text-dim2, #95a6c9); font-size: 0.8rem; }
.pk-opp-empty {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  min-height: 7.5rem;
  margin: 0.25rem 0 0;
  padding: 1.2rem;
  border: 1px dashed rgba(255, 43, 214, 0.28);
  border-radius: var(--r-md, 10px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 43, 214, 0.1), transparent 58%),
    rgba(7, 7, 13, 0.42);
  color: var(--text-dim2, #95a6c9);
  line-height: 1.55;
  text-align: center;
}
.pk-opp-empty::before {
  content: '⚔';
  color: var(--neon-pink);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 43, 214, 0.5);
}
.pk-opp-empty[hidden] { display: none; }

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .live-badge,
  .live-unmute,
  .live-tiles[data-count='0']::after,
  .live-cmt,
  .live-heart,
  .live-gift-fly {
    animation: none;
  }
  .live-page .btn-neon.btn-primary::after,
  .live-fab,
  .live-gift-item,
  .live-feed-card,
  .live-feed-card::before,
  .pk-fill-a::-webkit-progress-value,
  .pk-fill-a::-moz-progress-bar {
    transition: none;
  }
}

/* ============================================================
   MOBILE — primary surface. Video first, sticky usable composer, comfy taps.
   ============================================================ */
@media (max-width: 860px) {
  .live-stage {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.6rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  /* Video first + full-bleed so it reads as the hero on a phone. */
  .live-video-wrap {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin: 0 -1rem;
    width: auto;
  }
  .live-side { gap: 0.8rem; }
  /* The chat now sits directly UNDER the video (order:2, above the live controls)
     so a host reads comments without scrolling to the page bottom. It's a
     self-contained panel: the log scrolls internally and the composer rides at
     the panel's own bottom (NOT page-sticky — that floated over the controls once
     the panel moved up the column). */
  .live-chat { overflow: hidden; }
  .live-chat-log { height: 44vh; }
  .live-chat-form input { padding: 0.7rem 0.8rem; font-size: 16px; } /* 16px avoids iOS zoom */
  .live-chat-form .tiny-btn { min-height: 44px; padding: 0 1rem; }
  /* Comfortable thumb targets. */
  .live-fab { width: 50px; height: 50px; font-size: 1.4rem; }
  .live-unmute { padding: 0.6rem 1.15rem; font-size: 0.9rem; bottom: 12%; }
  .live-field input,
  .live-field select,
  .live-share input { min-height: 44px; }
  /* Full-width primary actions read as intentional on a phone. */
  .live-page .btn-neon.full,
  .btn-ghost.full { padding: 0.85rem 1rem; }
  .live-feed-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .live-modal-actions { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .live-topbar { padding: 0.6rem 0.8rem; }
  .live-top-right { gap: 0.35rem; }
  .live-logo { font-size: 1.05rem; }
  .live-coins,
  .live-viewers { padding: 0.24rem 0.45rem; font-size: 0.74rem; }
  .live-feed-grid { grid-template-columns: 1fr; }
  .live-corner { width: 14px; height: 14px; }
  .live-tiles[data-count='0']::after { font-size: 0.72rem; letter-spacing: 0.1em; }
  /* keep the bottom toast off the screen edges on a 390px phone */
  .pk-prompt {
    left: 0.6rem;
    right: 0.6rem;
    transform: none;
  }
}