/* ==========================================================================
   Game Table — fixed seated-2.5D felt (rendering-approach §2, §5, §10).
   Local rack large along the bottom-front; opponents recede as tile-backs;
   discard pool centered; HUD (pods + winds + timer rings) as a clean overlay.
   ========================================================================== */

.table-screen { flex:1; display:flex; flex-direction:column; min-height:0; }
.table-top { padding:8px 16px 4px; }
.table-top .table-menu { font-size:20px; color:var(--bone-dim); line-height:1; width:26px; }
.table-top .pill-round { font-size:11px; }
.table-top .pill-wall { font-size:11px; margin-left:8px; }
.table-top .pill-magnify { font-size:14px; line-height:1; cursor:grab; touch-action:none; user-select:none; padding:3px 8px; margin-right:6px; }
/* Drag-to-summon magnifier lens (see components/magnifier.js). */
/* Size (width/height) is set inline from magnifier.js so R stays the single source of truth. */
.magnify-lens { position:fixed; border-radius:50%; overflow:hidden;
  border:2.5px solid var(--gold-hi); box-shadow:0 8px 26px rgba(0,0,0,.6); z-index:9999;
  background:#0e2a1f; cursor:grab; touch-action:none; }
.magnify-content { will-change:transform; }

/* 4-side "tile wall" silhouette framing the felt (see table.js wallFrame). Drawn
   as bone tile faces with brown segment lines, at 30% overall opacity. */
.wall-frame { position:absolute; inset:8% 5%; pointer-events:none; z-index:0; opacity:.3; }
.wall-frame__edge { position:absolute; border-radius:4px;
  background:repeating-linear-gradient(var(--wdir,90deg), rgba(120,90,40,.55) 0 2px, rgba(233,223,198,.92) 2px 16px);
  border:1px solid rgba(120,90,40,.5); box-shadow:inset 0 0 6px rgba(0,0,0,.15); }
.wall-frame__edge--top, .wall-frame__edge--bottom { left:7%; right:7%; height:15px; --wdir:90deg; }
.wall-frame__edge--left, .wall-frame__edge--right { top:7%; bottom:7%; width:15px; --wdir:0deg; }
.wall-frame__edge--top { top:0; } .wall-frame__edge--bottom { bottom:0; }
.wall-frame__edge--left { left:0; } .wall-frame__edge--right { right:0; }

/* Filipino dice-start reveal (see components/table.js showDiceReveal). */
.dice-reveal { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(5,20,14,.42); animation:dicefade .22s ease; }
.dice-reveal--out { animation:dicefadeout .26s ease forwards; }
.dice-reveal__card { background:linear-gradient(160deg,#0e3527,#0a271d); border:1.5px solid var(--gold-hi,#e0a42c);
  border-radius:18px; padding:16px 20px; min-width:230px; box-shadow:0 18px 50px rgba(0,0,0,.55); text-align:center; }
.dice-reveal__title { font-weight:800; color:var(--gold-hi,#e0a42c); font-size:14px; letter-spacing:.04em; margin-bottom:10px; }
.dice-reveal__grid { display:flex; flex-direction:column; gap:4px; }
.dice-reveal__row { display:flex; align-items:center; gap:10px; padding:4px 8px; border-radius:9px; color:#e9e2d0; opacity:.72; }
.dice-reveal__row.is-win { background:rgba(224,164,44,.16); opacity:1; color:#fff; font-weight:700; }
.dice-reveal__name { flex:1; text-align:left; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; }
.dice-reveal__pips { font-size:20px; line-height:1; color:#fbe9bf; }
.dice-reveal__sum { width:20px; text-align:right; font-weight:800; font-size:14px; }
.dice-reveal__winner { margin-top:11px; font-size:13px; color:#e9e2d0; }
.dice-reveal__winner b { color:var(--gold-hi,#e0a42c); }
@keyframes dicefade { from{opacity:0} to{opacity:1} }
@keyframes dicefadeout { to{opacity:0} }

/* The felt */
.table {
  position:relative; flex:1; min-height:0; overflow:hidden;
  background:
    radial-gradient(ellipse 66% 58% at 50% 44%, #2FA377 0%, #17825C 30%, #0C3B2C 66%, #0a3122 100%);
}
.table::before { /* table edge shadow ring */
  content:''; position:absolute; left:50%; top:44%; width:70%; height:64%;
  transform:translate(-50%,-50%); border-radius:50%;
  box-shadow: inset 0 0 60px rgba(0,0,0,.35), 0 0 0 2px rgba(224,164,44,.06);
  pointer-events:none;
}
.table::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 120px rgba(0,0,0,.45); pointer-events:none; }

/* Board zoom layer (table.js) — pinch / Ctrl+wheel to zoom & pan the board.
   Fills the felt exactly so the absolutely-positioned seats/pool/rack keep their
   coordinates; transform-origin 0,0 matches the JS pan math. touch-action:none
   lets us own multi-touch (the action bar stays a fixed sibling, unzoomed). */
.table__zoom { position:absolute; inset:0; transform-origin:0 0; transform:translate(0,0); touch-action:none; will-change:transform; }
.table--zoomed { cursor:grab; }
.table--zoomed:active { cursor:grabbing; }

/* Center info (wall + last discard) */
.table__center { position:absolute; left:50%; top:15%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:6; }
.pill-wall { background:rgba(6,32,24,.7); }
.pill-last { background:rgba(224,164,44,.16); border-color:var(--line-gold-2); color:var(--gold-hi); }

/* Discard pool — centered receding grid */
.table__discards {
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:min(54%,480px); max-height:44%; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-wrap:wrap; gap:3px; justify-content:center; align-content:flex-start;
  z-index:5; min-height:80px; scrollbar-width:none;
}
.table__discards::-webkit-scrollbar { display:none; }
.discard-tile { animation:dropIn .22s ease; }
.discard-tile--last { z-index:2; }
@keyframes dropIn { from{ transform:translateY(-8px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- Seats ---- */
.seat { position:absolute; display:flex; align-items:center; gap:8px; z-index:6; }
.seat--top   { top:6px;  left:50%; transform:translateX(-50%); flex-direction:column; gap:5px; }
.seat--left  { left:6px; top:44%; transform:translateY(-50%); flex-direction:column; align-items:flex-start; gap:6px; }
.seat--right { right:6px; top:44%; transform:translateY(-50%); flex-direction:column; align-items:flex-end; gap:6px; }
.seat--bottom-pod { left:8px; bottom:10px; flex-direction:column; align-items:flex-start; gap:6px; z-index:8; max-width:144px; }

/* Opponent back-fans — overlapped into a tight rack (authentic + compact, so
   the seat pods don't get pushed to the screen edge on short phones). */
.seat__backs { display:flex; }
.seat__backs.fan-h { flex-direction:row; }
.seat__backs.fan-v { flex-direction:column; }
.seat__backs.fan-h .tile--back { margin-left:-6px; }
.seat__backs.fan-h .tile--back:first-child { margin-left:0; }
.seat__backs.fan-v .tile--back { margin-top:-8px; }
.seat__backs.fan-v .tile--back:first-child { margin-top:0; }

/* Exposed melds */
.seat__melds { display:flex; flex-wrap:wrap; gap:4px; max-width:180px; }
.meld { display:flex; gap:1px; padding:2px; border-radius:6px; background:rgba(0,0,0,.18); }
.seat__melds--local { position:absolute; left:0; bottom:64px; max-width:280px; }
/* Side seats' melds + collected tiles pinned to a top corner (left→top-left,
   right→top-right) so a growing pile never hangs down the edge into the local
   hand's melds at the bottom. Mirrors mobile's _cornerAside. */
.seat-corner { position:absolute; top:6px; z-index:6; display:flex; flex-direction:column; gap:4px; max-width:24%; pointer-events:none; }
.seat-corner--left  { left:6px; align-items:flex-start; }
.seat-corner--right { right:6px; align-items:flex-end; }
.seat-corner .seat__melds { flex-direction:column; max-width:none; }
/* Top player: backs + melds sit side-by-side (one non-wrapping row) so the
   melds never grow down into the felt centre. */
.seat__handrow { display:flex; align-items:center; gap:10px; }
.seat--top .seat__melds { flex-wrap:nowrap; max-width:none; }

/* Collected bonus tiles (flowers, and — in extended variants — winds/dragons),
   shown as a compact aside strip beside a seat's melds. Wraps + bounded so a
   full 13-tile set never spills across the felt. */
.seat__flowers { display:flex; flex-wrap:wrap; gap:2px; max-width:180px; padding:2px; border-radius:6px; background:rgba(0,0,0,.12); }
.seat--left .seat__flowers, .seat--right .seat__flowers { max-width:120px; }
/* Top seat can amass many bonus tiles under extended flowers; wrap within a
   bounded width (mobile scales its strip via FittedBox) so it never spills. */
.seat--top .seat__flowers { flex-wrap:wrap; max-width:240px; }
.seat__flowers--local { position:absolute; left:0; bottom:112px; max-width:180px; }

/* ---- Pods ---- */
.pod { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px;
  background:rgba(6,28,20,.68); border:1px solid var(--line-gold); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.pod--active { border-color:var(--marigold); box-shadow:0 0 0 1px var(--marigold), 0 0 22px rgba(224,164,44,.35); }
.pod__ring { position:relative; width:34px; height:34px; flex:0 0 auto; }
.pod__ring--lg { width:44px; height:44px; }
.pod__ava { position:absolute; inset:2px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-weight:800; font-size:12px; color:#fff; box-shadow:inset 0 0 0 1px rgba(247,207,105,0.35); }
.pod__ring--lg .pod__ava { font-size:15px; }
.pod__info { line-height:1.15; }
.pod__name { font-weight:700; font-size:12px; color:var(--bone-bright); white-space:nowrap; }
.pod__meta { display:flex; align-items:center; gap:6px; margin-top:2px; }
.pod__wind { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; border-radius:6px; font-size:10px; font-weight:800; color:#06281c; background:var(--grad-gold-sheen); }
.pod__offline { display:inline-block; padding:1px 5px; border-radius:6px; font-size:8.5px; font-weight:800; letter-spacing:.3px; color:#fff; background:rgba(190,58,43,.92); }
.pod--local { padding:7px 12px 7px 7px; background:rgba(6,28,20,.85); max-width:144px; }
.pod--local .pod__name { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96px; }

/* Timer ring */
.timer-ring { position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px); transform:rotate(-90deg); }
.timer-ring__bg { fill:none; stroke:rgba(255,255,255,.12); stroke-width:3; }
.timer-ring__fg { fill:none; stroke:var(--marigold); stroke-width:3; stroke-linecap:round; stroke-dasharray:113; stroke-dashoffset:0;
  /* Deplete over --ring-dur; --ring-elapsed offsets BOTH animations by a negative
     delay so the ring resumes from the true remaining time on every repaint (no
     reset-to-full mid-turn). A second, delayed animation flashes red the final 5s. */
  animation:timer var(--ring-dur,30s) linear forwards, timerflash .5s ease-in-out infinite;
  animation-delay: calc(-1 * var(--ring-elapsed, 0ms)), calc(var(--ring-dur,30s) - 5s - var(--ring-elapsed, 0ms)); }
@keyframes timer { from{ stroke-dashoffset:0; } to{ stroke-dashoffset:113; } }
@keyframes timerflash { 0%,100%{ stroke:#ff3b2f; stroke-width:4.4; } 50%{ stroke:#7e1a10; stroke-width:3; } }

/* ---- Local rack (bottom-front, largest; chips float above its right side) ---- */
/* right uses the safe-area inset so the last tile clears the rounded corner /
   Dynamic Island on notched phones (index.html sets viewport-fit=cover, so the
   layout runs edge-to-edge). fitRack() then shrinks the strip to whatever width
   this leaves, so the hand always fits inside the visible area. */
.rack { position:absolute; left:158px; right:max(20px, env(safe-area-inset-right)); bottom:6px; display:flex; justify-content:center; align-items:flex-end; z-index:7; padding:4px 0; }
.rack__strip { display:flex; align-items:flex-end; gap:3px; touch-action:none; }
.rack__strip .rack-tile--dragging { transform:translateY(-14px) scale(1.06); z-index:10; opacity:.96; box-shadow:0 10px 22px rgba(0,0,0,.42); cursor:grabbing; transition:none; }
.rack-tile { transition:transform .12s ease; }
.rack-tile--drawn { margin-left:10px; }
.rack-tile--playable { cursor:pointer; }
.rack-tile--playable:hover { transform:translateY(-10px); filter:brightness(1.04); }
/* Charleston pick: raised + gold-ringed when chosen; jokers dimmed & un-pickable. */
.rack-tile--picked { transform:translateY(-12px); filter:brightness(1.05); outline:2px solid var(--gold-hi); outline-offset:1px; border-radius:6px; }
.rack-tile--locked { opacity:.4; cursor:not-allowed; }
/* "Puro" (tenpai) badge — floats above the rack when the optional hint is on. */
.puro-badge { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 4px);
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  background:linear-gradient(180deg,#ffd873,#e0a42c); color:#3a2a06; font-weight:800; font-size:13px;
  letter-spacing:.06em; box-shadow:0 4px 14px rgba(224,164,44,.45); white-space:nowrap; z-index:8;
  animation:puropulse 1.6s ease-in-out infinite; }
.puro-badge__n { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:rgba(58,42,6,.22); font-size:11px; font-weight:800; }
@keyframes puropulse { 0%,100%{ box-shadow:0 4px 14px rgba(224,164,44,.4); } 50%{ box-shadow:0 6px 22px rgba(224,164,44,.7); } }
@media (prefers-reduced-motion: reduce) { .puro-badge { animation:none; } }
.charleston-go[disabled] { opacity:.45; pointer-events:none; }
.rack__bunot { align-self:center; margin-left:8px; font-size:9px; font-weight:800; letter-spacing:.6px; color:var(--gold-hi); background:rgba(224,164,44,.14); border:1px solid var(--line-gold-2); padding:3px 7px; border-radius:999px; }

/* ---- Action bar / chips (float above the rack's right, thumb-reachable) ---- */
.actions { position:absolute; right:16px; bottom:82px; display:flex; align-items:center; gap:10px; z-index:9; }
.chip { position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  background:var(--grad-gold); color:#3a2a06; box-shadow:0 10px 24px rgba(224,164,44,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .1s; }
/* The claim-window ring sits just outside the gold chip so it reads against the
   felt (mirrors the mobile claim-chip countdown). */
.chip .timer-ring { inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px); pointer-events:none; }
.chip:hover { transform:translateY(-2px) scale(1.03); }
.chip:active { transform:translateY(1px); }
.chip__lbl { line-height:1; }
.mahjong-btn { padding:16px 26px; font-family:var(--font-display); font-size:20px; font-weight:800; border-radius:16px; animation:mjpulse 1.1s ease-in-out infinite; }
@keyframes mjpulse { 0%,100%{ box-shadow:0 10px 26px rgba(190,58,43,.4), inset 0 1px 0 rgba(255,255,255,.25); } 50%{ box-shadow:0 10px 30px rgba(190,58,43,.7), 0 0 26px rgba(224,164,44,.4), inset 0 1px 0 rgba(255,255,255,.25); } }
.pill-pass { padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--bone); background:rgba(6,32,24,.7); border:1px solid var(--line-gold); }
.pill-pass:hover { background:rgba(255,255,255,.08); }
.turn-hint { font-size:12px; color:var(--bone-dim); padding:8px 14px; border-radius:999px; background:rgba(6,32,24,.55); border:1px solid var(--line-soft); white-space:nowrap; }
.turn-hint--go { color:var(--gold-hi); background:rgba(224,164,44,.14); border-color:var(--line-gold-2); font-weight:600; }
/* Multi-option chow chooser: each candidate run rendered as tiles. */
.chow-opt { display:inline-flex; gap:2px; align-items:center; padding:6px 8px; border-radius:12px; background:rgba(8,26,20,.72); border:1px solid var(--line-gold-2); cursor:pointer; }
.chow-opt:hover { background:rgba(224,164,44,.16); }
.chow-opt__cut { opacity:.5; }

/* ---- Responsive: narrow landscape (phones) ---- */
/* Reclaim horizontal room on smaller screens (narrower left gutter for the
   bottom pod, tighter gaps) so more of the hand fits at full size. The strip is
   then shrunk to the exact available width by fitRack() in table.js — a dynamic
   fit that keeps a full 16–17-tile Filipino hand from clipping or needing a
   side-scroll at ANY window size, so no fixed scale steps are needed here. */
/* left must clear the bottom-left local pod (right edge ≈152px, ≈126px once the
   pod shrinks at ≤820) — fitRack() then scales the strip to whatever width is
   left, so a larger left reservation only shrinks tiles slightly, it can never
   clip. (895f30e dropped the old transform:scale on .rack, which had been
   pulling the rendered left inward past the pod; these values restore that
   clearance without the scale.) */
@media (max-width:1000px) { .rack { left:158px; right:max(10px, env(safe-area-inset-right)); gap:2px; } }
@media (max-width:820px)  { .rack { left:132px; } .seat--bottom-pod { max-width:118px; } .pod--local .pod__name { max-width:76px; } }

/* ---- Responsive: short landscape (phones) ---- */
@media (max-height:470px) {
  .seat--left, .seat--right { top:42%; }
  .seat--top { top:2px; }
  .table__center { top:27%; }        /* drop below the North pod+fan so the wall count is clear */
  .actions { bottom:74px; }
}

/* ---- Online lobby (MP Phase 2) ---- */
.online-screen, .online-lobby { flex:1; display:flex; align-items:center; justify-content:center; }
.mp-room { width:min(560px,94%); padding:22px; }
.mp-room__head { font-family:var(--font-display,'Bricolage Grotesque',sans-serif); font-size:20px; color:var(--bone-bright); font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mp-lock { color:var(--gold-hi); }
.mp-room__hint { font-size:12px; margin:4px 0 14px; }
.mp-code { font-size:38px; font-weight:800; letter-spacing:10px; color:var(--gold-hi); text-align:center; padding:14px; margin-bottom:4px; background:rgba(0,0,0,.25); border:1px solid var(--line-gold-2); border-radius:14px; }
.mp-seats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.mp-seat { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.18); border:1px solid var(--line-gold); min-height:44px; }
.mp-seat--empty { justify-content:center; border-style:dashed; opacity:.6; }
.mp-seat__ava { width:28px; height:28px; display:inline-flex; flex:0 0 auto; }
.mp-seat__ava svg { width:28px; height:28px; }
.mp-seat__name { font-weight:700; color:var(--bone-bright); font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-badge { font-size:9px; font-weight:800; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.1); color:var(--bone-dim); }
.mp-badge--you { background:linear-gradient(180deg,#F7CF69,#E0A42C); color:#3A2A06; }
.mp-badge--bot { background:rgba(190,58,43,.55); color:#fff; }
.mp-room__actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mp-room__actions .btn { flex:1; min-width:110px; }

/* Casual matchmaking ("finding players") */
.mp-room--finding { text-align:center; }
.mp-finding__head { display:flex; align-items:center; justify-content:center; gap:10px; }
.mp-spinner { width:20px; height:20px; flex:0 0 auto; border-radius:50%; border:2.5px solid rgba(224,164,44,.25); border-top-color:var(--gold-hi); animation:mpspin .8s linear infinite; }
@keyframes mpspin { to { transform:rotate(360deg); } }
.mp-finding__count { font-size:30px; font-weight:800; color:var(--gold-hi); margin:8px 0 2px; letter-spacing:2px; }
.mp-room--finding .mp-room__hint { margin:6px 0 0; }
.mp-room--finding .mp-seats { grid-template-columns:1fr 1fr; }
.mp-room--finding .mp-room__actions { justify-content:center; }
.mp-room--finding .mp-room__actions .btn { flex:0 1 200px; }

/* ---------------- Quick-chat (preset messages) ---------------- */
.chat-ctl { position:relative; display:inline-flex; }
.chat-ctl__btn { background:none; border:0; cursor:pointer; font-size:18px; line-height:1; padding:2px 4px; opacity:.85; }
.chat-ctl__btn:hover { opacity:1; }
.chat-ctl__menu { position:absolute; top:135%; right:0; z-index:50; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; min-width:230px;
  background:rgba(6,28,20,.96); border:1px solid var(--line-gold); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.chat-ctl__menu[hidden] { display:none; }
.chat-ctl__item { padding:8px 10px; border-radius:8px; border:1px solid var(--line-soft); background:rgba(255,255,255,.04); color:var(--bone); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; text-align:center; }
.chat-ctl__item:hover { background:linear-gradient(135deg,#F7CF69,#E0A42C); color:#3a2a06; border-color:transparent; }
/* the emote glyph shown before the label in the picker + pod bubble */
.emote-glyph { font-size:1.15em; margin-right:2px; vertical-align:-1px; }

/* Chat bubble over a seat pod */
.pod { position:relative; }
.pod__chat { position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:#FFF6EF; color:#23140a; font-size:12px; font-weight:700; padding:5px 10px; border-radius:12px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.45); z-index:40; pointer-events:none; animation:chatpop .18s ease-out; }
.pod__chat::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#FFF6EF; }
@keyframes chatpop { from { opacity:0; transform:translateX(-50%) translateY(5px) scale(.92); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }

/* ---- Voice chat (private online rooms) ---- */
/* Topbar mic toggle — mirrors .chat-ctl. Off = dim, muted = amber, live = jade. */
.mic-ctl { position:relative; display:inline-flex; }
.mic-ctl__btn { background:none; border:0; cursor:pointer; line-height:1; padding:2px 4px; opacity:.85; color:var(--bone); display:inline-flex; align-items:center; }
.mic-ctl__btn:hover { opacity:1; }
.mic-ctl--off .mic-ctl__btn { opacity:.55; }
.mic-ctl--muted .mic-ctl__btn { color:#e8b04a; opacity:1; }
.mic-ctl--live .mic-ctl__btn { color:#3fd08f; opacity:1; }
.mic-ctl--speaking .mic-ctl__btn { color:#3fd08f; filter:drop-shadow(0 0 6px rgba(63,208,143,.85)); }
/* A speaking pod pulses a jade ring (distinct from the gold active-turn ring). */
.pod--speaking { border-color:#3fd08f; box-shadow:0 0 0 1px #3fd08f, 0 0 20px rgba(63,208,143,.5); animation:podSpeak 1.1s ease-in-out infinite; }
@keyframes podSpeak { 0%,100% { box-shadow:0 0 0 1px #3fd08f, 0 0 12px rgba(63,208,143,.32); } 50% { box-shadow:0 0 0 2px #3fd08f, 0 0 26px rgba(63,208,143,.72); } }
.pod__mic { display:inline-flex; align-items:center; font-size:10px; line-height:1; }
/* Lobby seat: jade speaking dot + a muted badge tint. */
.mp-seat { position:relative; }
.mp-seat__speak { position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%; background:#3fd08f; box-shadow:0 0 8px rgba(63,208,143,.85); animation:podSpeak 1.1s ease-in-out infinite; }
.mp-badge--muted { background:rgba(190,58,43,.22); }
.voice-btn--live { color:#3fd08f !important; border-color:rgba(63,208,143,.5) !important; }
.voice-btn--muted { color:#e8b04a !important; }
.voice-ic { vertical-align:-2px; }
@media (prefers-reduced-motion: reduce) {
  .pod--speaking, .mp-seat__speak { animation:none; }
}