/* ==========================================================================
   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; }

/* 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; }

/* 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:44%; transform:translate(-50%,-50%);
  width:min(46%,420px); display:flex; flex-wrap:wrap; gap:3px; justify-content:center; align-content:center;
  z-index:5; min-height:80px;
}
.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; }
.seat--left .seat__melds, .seat--right .seat__melds { flex-direction:column; }
.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; }

/* ---- 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%; display:grid; place-items:center; font-weight:800; font-size:12px; color:#fff; }
.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--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; animation:timer 12s linear forwards; }
@keyframes timer { from{ stroke-dashoffset:0; } to{ stroke-dashoffset:113; } }

/* ---- Local rack (bottom-front, largest; chips float above its right side) ---- */
.rack { position:absolute; left:158px; right:20px; bottom:6px; display:flex; justify-content:center; align-items:flex-end; gap:3px; z-index:7; padding:4px 0; }
.rack-tile { transition:transform .12s ease; }
.rack-tile--drawn { margin-left:10px; transform:translateY(-4px); }
.rack-tile--playable { cursor:pointer; }
.rack-tile--playable:hover { transform:translateY(-10px); filter:brightness(1.04); }
.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 { 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; }
.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; }

/* ---- Responsive: narrow landscape (phones) ---- */
/* The 17-tile rack can't keep full size on a ~800px phone, so scale the whole
   rack uniformly to fit (origin bottom-center keeps it anchored & centered). */
@media (max-width:1000px) { .rack { left:118px; right:10px; gap:2px; } }
@media (max-width:900px)  { .rack { transform: scale(.9);  transform-origin: bottom center; } }
@media (max-width:820px)  { .rack { transform: scale(.82); left:104px; } .seat--bottom-pod { max-width:118px; } .pod--local .pod__name { max-width:76px; } }
@media (max-width:720px)  { .rack { transform: scale(.74); } }

/* ---- 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; }
}