/* Play page chrome — match homepage Dark Green + Gold */
body.play {
  --rummy-green: #064e3b;
  --rummy-green-dark: #033528;
  --rummy-green-light: #0a6b50;
  --rummy-green-deep: #0a4a36;
  --rummy-gold: #fbbf24;
  --rummy-gold-light: #fde68a;
  --rummy-gold-soft: #fcd34d;
  --rummy-gold-dark: #d97706;
  --rummy-gold-line: #c9a227;
  --rummy-red: #9f1239;
  --rummy-ivory: #f7f3e8;
  --rummy-ivory-face: #faf6ee;
  --rummy-white: #fff;
  --rummy-table: #0c5a38;
  --rummy-table-dark: #08422a;
  --rummy-wood: #3d2e0a;
  --rummy-pattern: .05;
  --rummy-shadow: 0 6px 14px rgba(0, 0, 0, .34);
  --rummy-shadow-hover: 0 10px 20px rgba(0, 0, 0, .42);
  --rummy-shadow-selected: 0 0 0 2px rgba(251, 191, 36, .42), 0 12px 22px rgba(0, 0, 0, .4);
  --rummy-ease: .18s ease;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --shadow-card: var(--rummy-shadow);
  --shadow-floating: 0 14px 36px rgba(0, 0, 0, .4);
  --shadow-modal: 0 24px 56px rgba(0, 0, 0, .48);
  --border-primary: 1px solid rgba(245, 250, 247, .2);
  --border-secondary: 1px solid rgba(10, 107, 80, .5);
  --border-subtle: 1px solid rgba(245, 250, 247, .1);
  --border-gold: 1.5px solid var(--rummy-gold-line);
  --primary: var(--rummy-green);
  --gold: var(--rummy-gold);
  --gold-2: var(--rummy-gold-soft);
  --gold-3: var(--rummy-gold-dark);
  --dark: #071a14;
  --cream: var(--rummy-ivory);
  --muted: #a7c4b6;
  --card-face: var(--rummy-ivory-face);
  --card-border: rgba(201, 162, 39, .55);
  background:
    radial-gradient(ellipse at 85% -10%, rgba(251, 191, 36, .1), transparent 40%),
    radial-gradient(ellipse at 10% 20%, rgba(6, 78, 59, .5), transparent 42%),
    #071a14;
  color: var(--cream);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body.play .site-header {
  background: linear-gradient(180deg, rgba(6, 78, 59, .97), rgba(3, 53, 40, .96));
  border-bottom: 1px solid rgba(251, 191, 36, .22);
  backdrop-filter: blur(10px);
}

body.play .logo-mark {
  background: none;
  box-shadow: none;
}

body.play .nav a:hover,
body.play .nav a[aria-current="page"] {
  background: rgba(251, 191, 36, .12);
  color: #fcd34d;
  box-shadow: none;
}

body.play .nav-play,
body.play .btn-gold {
  background: linear-gradient(180deg, #fcd34d, #fbbf24 48%, #d97706);
  color: #1a1204;
  border-color: rgba(255, 236, 180, .5);
  box-shadow: 0 8px 20px rgba(251, 191, 36, .28);
  text-shadow: none;
}

body.play .nav-play:hover,
body.play .btn-gold:hover {
  color: #1a1204;
  filter: brightness(1.05);
}

/* PC nav-dl matches homepage chrome (sizes locked in style.css ≥768) */
body.play .nav-dl {
  background: rgba(0, 0, 0, .22);
  color: var(--gold-2, #fcd34d);
  border: 1px solid rgba(251, 191, 36, .55);
  box-shadow: none;
  font-weight: 800;
}

body.play .nav-dl:hover {
  color: var(--gold-2, #fcd34d);
  background: rgba(0, 0, 0, .28);
  filter: brightness(1.06);
}

body.play .btn-ghost {
  border: 2px solid rgba(251, 191, 36, .55);
  color: #fcd34d;
  background: rgba(0, 0, 0, .18);
}

body.play .faq details {
  background: rgba(12, 42, 32, .9);
  border-color: rgba(251, 191, 36, .2);
}

body.play .india-badge {
  color: #1a1204;
  background: linear-gradient(90deg, #fcd34d, #fbbf24 50%, #34d399);
  box-shadow: 0 6px 16px rgba(251, 191, 36, .25);
}

body.play .site-footer {
  background: #04110d;
  border-top: 1px solid rgba(251, 191, 36, .15);
}

.lang-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 28px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .5);
  background: linear-gradient(145deg, #0a6b50, #033528);
  color: #fcd34d;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  font-family: inherit;
}

.lang-toggle .lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 999px;
  color: rgba(252, 211, 77, .5);
  transition: background .15s ease, color .15s ease;
}

.lang-toggle .lang-opt.is-active {
  background: linear-gradient(145deg, #fbbf24, #d97706);
  color: #1a1204;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.lang-toggle .lang-sep {
  width: 1px;
  margin: 4px 1px;
  background: rgba(251, 191, 36, .28);
  align-self: stretch;
}

.lang-toggle:hover .lang-opt:not(.is-active) {
  color: #fde68a;
}

.lang-toggle:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .lang-toggle {
    right: 0;
    height: 28px;
    font-size: .68rem;
  }
  .lang-toggle .lang-opt { min-width: 28px; padding: 0 8px; }
}

@media (min-width: 768px) {
  .lang-toggle {
    top: 16px;
    right: 20px;
  }
}

.battle {
  --ink: #f5faf7;
  --ink-dim: rgba(167, 196, 182, .9);
  --saffron: var(--rummy-gold, #fbbf24);
  --saffron-2: var(--rummy-gold-soft, #fcd34d);
  --maroon: var(--rummy-green-dark, #033528);
  --teak: var(--rummy-green-light, #0a6b50);
  --teak-2: #071a14;
  --felt: #0c5a38;
  --felt-deep: #08422a;
  --peacock: #0e6b5c;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(6, 78, 59, .35), transparent 42%),
    linear-gradient(165deg, #0a3d30 0%, #071a14 48%, #04110d 100%);
  border: var(--border-subtle, 1px solid rgba(245, 250, 247, .1));
  border-radius: var(--radius-24, 24px);
  box-shadow: var(--shadow-floating, 0 14px 36px rgba(0, 0, 0, .4));
  padding: 14px 10px 16px;
  overflow: visible;
  margin: 8px 0 28px;
  position: relative;
  color: var(--ink);
}

.battle::before {
  content: none;
  display: none;
}

.battle > * { position: relative; z-index: 1; }

.battle[hidden] { display: none !important; }

.start-screen {
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 8px 0 16px;
  padding: 18px 16px;
  border-radius: var(--radius-24, 24px);
  border: var(--border-subtle, 1px solid rgba(245, 250, 247, .1));
  background:
    radial-gradient(ellipse at 18% 0%, rgba(6, 78, 59, .35), transparent 42%),
    linear-gradient(165deg, #0a3d30 0%, #071a14 48%, #04110d 100%);
  box-shadow: var(--shadow-floating, 0 14px 36px rgba(0, 0, 0, .4));
  position: relative;
  overflow: hidden;
  color: #f5faf7;
}

.start-screen[hidden] { display: none !important; }

.start-screen::before {
  content: "";
  position: absolute;
  inset: -20% 40% auto -10%;
  height: 55%;
  background: radial-gradient(circle, rgba(251, 191, 36, .18), transparent 70%);
  pointer-events: none;
}

.start-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  text-align: center;
  padding: 8px 4px 4px;
}

.start-kicker {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fcd34d;
}

.start-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.1;
  font-weight: 900;
  color: #f5faf7;
  letter-spacing: -.02em;
  text-shadow: 0 2px 0 rgba(3, 53, 40, .45);
}

.start-lead {
  margin: 0 auto 22px;
  max-width: 34ch;
  color: rgba(167, 196, 182, .95);
  font-size: 1.05rem;
  line-height: 1.45;
}

.start-points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 10px;
}

.start-points li {
  margin: 0;
  padding: 12px 14px 12px 40px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(251, 191, 36, .28);
  color: rgba(245, 250, 247, .95);
  font-size: .95rem;
  font-weight: 600;
  position: relative;
}

.start-points li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(145deg, #fcd34d, #fbbf24);
}

.start-btn {
  min-width: min(100%, 280px);
  min-height: 64px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 14px 28px;
  animation: startPulse 2.2s ease-in-out infinite;
}

@keyframes startPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(251, 191, 36, .4); }
  50% { box-shadow: 0 12px 28px rgba(0, 0, 0, .4), 0 0 0 8px rgba(251, 191, 36, 0); }
}

.seat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.seat.player { margin: 12px 0 0; }

.player-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.seat-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  min-height: 2.1em;
}

.seat-clock #turn-clock {
  color: #fcd34d;
  font-weight: 800;
  font-size: .95rem;
  margin: 0;
}

.seat-clock #turn-clock.low { color: #ff8a8a; }

.seat-clock-sub {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255, 236, 210, .65);
  margin-top: 1px;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid rgba(10, 107, 80, .55);
  overflow: visible;
  padding: 0;
  background: #1a100c;
  position: relative;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.avatar.cpu {
  background: #0d2f24;
  color: #b8f0d4;
}

.avatar.you {
  background: #1a120a;
  color: var(--navy);
}

.seat-meta { flex: 1; min-width: 0; }
.seat-name { font-weight: 800; color: #fff; margin: 0; font-size: 1rem; }
.seat-status {
  margin: 2px 0 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.seat.active .avatar {
  border-color: var(--rummy-gold, #fbbf24);
  box-shadow: 0 0 0 2px var(--rummy-gold, #fbbf24);
}
.seat.active .avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rummy-green-light, #0a6b50);
  border: 2px solid #04110d;
  box-shadow: none;
}
.seat.active .seat-status {
  color: var(--rummy-gold-soft, #fcd34d);
  font-weight: 800;
}

.cpu-hand {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  margin: 6px 0 14px;
  flex-wrap: wrap;
}

.card-back {
  width: 36px;
  height: 52px;
  border-radius: 6px;
  background:
    #0c2a4a url("../images/card-back-india.webp") center / cover no-repeat;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.table-mid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto 14px;
}

.table-mid .pile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
}

.pile-ornament,
.pile-center-gem {
  display: none !important;
}

.pile-ornament img {
  width: 32px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  opacity: .7;
  transform: rotate(-12deg);
  border: 1px solid rgba(251, 191, 36, .45);
}

.pile-ornament.right img {
  transform: rotate(12deg);
}

.pile-center-gem img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: .55;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, .35));
  animation: mandalaSpin 28s linear infinite;
}

@keyframes mandalaSpin {
  to { transform: rotate(360deg); }
}

.pile {
  background: rgba(0, 0, 0, .22);
  border: var(--border-subtle, 1px solid rgba(245, 250, 247, .1));
  border-radius: var(--radius-12, 12px);
  padding: 12px 10px;
  text-align: center;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
  touch-action: none;
}

.pile.draw-ready {
  cursor: grab;
  border-style: solid;
  border-color: rgba(125, 255, 194, .45);
  box-shadow: 0 0 0 1px rgba(61, 214, 140, .25);
}

.pile.draw-ready:hover {
  background: rgba(61, 214, 140, .12);
}

.pile.draw-ready.dragging,
.pile.draw-ready:active {
  cursor: grabbing;
}

.pile-hint {
  margin: 0;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  min-height: 1em;
}

.pile.draw-ready .pile-hint {
  color: #9ef0c4;
}

.hand.drop-ready {
  outline: 2px dashed #7dffc2;
  outline-offset: 4px;
  border-radius: 12px;
  background: rgba(61, 214, 140, .08);
}

.draw-ghost {
  position: fixed;
  z-index: 90;
  width: 54px;
  height: 76px;
  border-radius: 8px;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, #1e3a6e 0 4px, #16305f 4px 8px);
  border: 2px solid var(--gold);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
  color: #fbf8f0;
}

.draw-ghost.red { background: var(--card-face, #fbf8f0); color: var(--card-red, #b0142e); }
.draw-ghost.black { background: var(--card-face, #fbf8f0); color: var(--card-black, #16213e); }
.draw-ghost.joker {
  background: linear-gradient(180deg, #fff8e0, #fbf8f0);
  color: #8a6a10;
}
.draw-ghost.over-hand {
  box-shadow: 0 0 0 3px rgba(125, 255, 194, .8), 0 12px 24px rgba(0, 0, 0, .45);
}

.pile-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rummy-ivory, var(--cream));
  font-weight: 800;
  opacity: .85;
}

.pile-count { color: var(--muted); font-size: .9rem; font-weight: 700; }

.stock-visual {
  width: 54px;
  height: 76px;
  border-radius: var(--radius-8, 8px);
  background:
    #0c2a20 url("../rummy/cards/card-back.svg?v=2") center / cover no-repeat;
  border: 2px solid rgba(251, 191, 36, .85);
  box-shadow: var(--shadow-card, 0 6px 12px rgba(0, 0, 0, .35));
}

.discard-visual {
  width: 54px;
  height: 76px;
  border-radius: 8px;
  background: #fbf8f0;
  border: 2px solid #d9d0bc;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .28);
}

.discard-visual.red { color: #b0142e; }
.discard-visual.black { color: #16213e; }
.discard-visual.joker,
.discard-visual.wild {
  color: #8a6a10;
  background: linear-gradient(180deg, #fff3c4, #fbf8f0);
  border-color: #d4af37;
}
.discard-visual.empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .25);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}

.meld-hint {
  text-align: center;
  color: #9ef0c4;
  font-size: .88rem;
  font-weight: 600;
  margin: 0 0 10px;
  min-height: 1.2em;
}

.pcard.joker,
.pcard.wild {
  border-color: var(--card-joker-border, #d4af37);
  color: var(--card-joker, #8a6a10);
  background: linear-gradient(180deg, #fff8e0, var(--card-face, #fbf8f0));
}
.pcard .joker-tag {
  display: block;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--card-joker, #8a6a10);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}

.turn-banner {
  text-align: center;
  font-weight: 800;
  margin: 0 0 10px;
  padding: 8px 16px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent, rgba(6, 78, 59, .55), transparent),
    rgba(0, 0, 0, .28);
  border: 1px solid rgba(251, 191, 36, .35);
  color: #fcd34d;
  font-size: .95rem;
  letter-spacing: .02em;
}

.turn-banner.cpu { color: #9fe8d8; border-color: rgba(14, 107, 92, .45); }
.turn-banner.win { color: #b8f5c8; background: rgba(12, 90, 56, .28); }
.turn-banner.lose { color: #ffb4b4; background: rgba(6, 78, 59, .45); }

.hud-stat {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: .88rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.hud-stat span { color: var(--gold-2); margin-left: 6px; }

/* LED scoreboard hanging above the felt */
.table-stage {
  position: relative;
  max-width: 1120px;
  margin: 0 auto 8px;
  padding: 8px 4px 4px;
  overflow: visible;
}

.led-scoreboard {
  position: relative;
  z-index: 6;
  width: min(68%, 420px);
  margin: 0 auto 14px;
  transform: perspective(920px) rotateX(10deg);
  transform-origin: center top;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5));
  pointer-events: none;
}

.led-cables {
  display: flex;
  justify-content: space-between;
  width: 62%;
  margin: 0 auto;
  height: 16px;
}

.led-cables span {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #8a8680, #3a3834 70%, #1c1b19);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .12);
}

.led-panel {
  background:
    linear-gradient(180deg, #4a4a4e 0%, #2a2a2e 18%, #141416 55%, #0c0c0e 100%);
  border-radius: 12px;
  padding: 7px 8px 9px;
  border: 1px solid #5a5854;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -2px 4px rgba(0, 0, 0, .55),
    0 10px 22px rgba(0, 0, 0, .4);
}

.led-panel::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 10% 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}

.led-screen.battle-hud {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px 6px;
  margin: 0;
  padding: 10px 8px 9px;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(40, 120, 70, .22), transparent 55%),
    linear-gradient(180deg, #06140c 0%, #020805 100%);
  box-shadow:
    inset 0 0 0 1px rgba(30, 90, 50, .55),
    inset 0 0 28px rgba(0, 255, 120, .07),
    inset 0 8px 16px rgba(0, 0, 0, .55);
}

.led-screen.battle-hud::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, .22) 2px 3px
  );
  pointer-events: none;
  z-index: 2;
  opacity: .85;
}

.led-screen.battle-hud::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(180, 255, 210, .08) 0%,
    transparent 28%,
    transparent 70%,
    rgba(0, 0, 0, .35) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.led-scoreboard .hud-stat {
  position: relative;
  z-index: 1;
  min-height: 0;
  margin: 0;
  padding: 2px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 700;
}

.led-scoreboard .hud-stat span,
.led-scoreboard .led-label,
.led-scoreboard .led-value {
  margin: 0;
  color: inherit;
}

.led-scoreboard .led-label {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1f6b3f;
  text-shadow: 0 0 4px rgba(40, 180, 90, .35);
  line-height: 1.1;
  white-space: nowrap;
}

.led-scoreboard .led-value {
  font-family: "Cascadia Mono", "Consolas", "SF Mono", "Courier New", monospace;
  font-size: clamp(.95rem, 2.6vw, 1.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1.15;
  color: #c41010;
  text-shadow:
    0 0 4px rgba(180, 16, 16, .9),
    0 0 10px rgba(140, 8, 8, .55),
    0 0 18px rgba(90, 0, 0, .4);
  animation: led-flicker 4.8s ease-in-out infinite;
}

.led-scoreboard .hud-stat:nth-child(1) .led-value { animation-delay: 0s; }
.led-scoreboard .hud-stat:nth-child(2) .led-value { animation-delay: .4s; }
.led-scoreboard .hud-stat:nth-child(3) .led-value { animation-delay: .9s; }
.led-scoreboard .hud-stat:nth-child(4) .led-value { animation-delay: 1.3s; }

@keyframes led-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .82; }
  96% { opacity: 1; }
  98% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .led-scoreboard .led-value { animation: none; }
  .deal-fly,
  .pcard.deal-flipping,
  .card-back.deal-pop,
  .discard-visual.deal-flip-open {
    animation: none !important;
    transition: none !important;
  }
}

.hand {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 100px;
  padding: 8px 0 4px;
  align-items: flex-end;
}

.hand-stage {
  position: relative;
  z-index: 6;
  margin: 4px auto 0;
  max-width: 960px;
  padding: 0 8px;
  pointer-events: none;
}

.hand-stage .hand {
  pointer-events: auto;
}

.hand-stage.on-felt {
  z-index: 3;
  width: 100%;
  max-width: none;
  margin: 2px 0 0;
  padding: 6px 4px 4px;
  border-radius: var(--radius-12, 12px);
  background: transparent;
  box-shadow: none;
  border: none;
}

.hand-stage.on-felt .hand {
  min-height: 88px;
  padding: 4px 0 2px;
  gap: 5px;
}

.hand-stage.on-felt .suit-group {
  background: rgba(0, 0, 0, .16);
  border-color: rgba(243, 209, 107, .22);
}

.hand .suit-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  margin: 0;
}

.discard-fly {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.1;
  background: #fbf8f0;
  border: 2px solid #d9d0bc;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .45);
  will-change: transform, opacity;
  transition:
    transform .48s cubic-bezier(.2, .75, .2, 1),
    opacity .48s ease;
}

.discard-fly.red { color: var(--card-red, #b0142e); }
.discard-fly.black { color: var(--card-black, #16213e); }
.discard-fly.joker {
  color: #8a6a10;
  background: linear-gradient(180deg, #fff8e0, #fbf8f0);
  border-color: #d4af37;
}

.suit-group {
  display: flex;
  gap: 3px;
  padding: 2px;
  border-radius: var(--radius-8, 8px);
  background: transparent;
  border: none;
  margin-inline: 6px;
}

.suit-group.jokers {
  border-color: rgba(243, 209, 107, .45);
  background: transparent;
}

.pcard {
  width: 44px;
  height: 66px;
  border-radius: var(--radius-8, 8px);
  background: var(--card-face, #fbf8f0);
  border: 1px solid var(--card-border, #d9d0bc);
  box-shadow: var(--shadow-card, 0 6px 14px rgba(0, 0, 0, .28));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  font-family: inherit;
}

.pcard .suit { font-size: 1.1rem; }
.pcard.red { color: var(--card-red, #b0142e); }
.pcard.black { color: var(--card-black, #16213e); }
.pcard.selected {
  position: relative;
  z-index: 4;
  transform: translateY(-10px);
  border-color: var(--rummy-gold, var(--gold));
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .32));
  outline: 1px solid rgba(251, 191, 36, .55);
  outline-offset: 0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.suit-group.valid-pure,
.suit-group.valid-impure,
.suit-group.valid-set {
  border: none;
  border-bottom: 2px solid var(--rummy-green-light, #0a6b50);
  border-radius: var(--radius-8, 8px);
  background: transparent;
  box-shadow: none;
}

.suit-group.jokers {
  border-color: rgba(251, 191, 36, .4);
  background: transparent;
  box-shadow: none;
}

.pcard.joker,
.pcard.wild {
  border-color: var(--rummy-gold, #fbbf24);
  border-width: 2px;
  color: var(--card-joker, #8a6a10);
  background: linear-gradient(180deg, #fff9e8, var(--card-face, #fbf8f0));
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .28));
  animation: none;
}

.tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
}

.tip-row .meld-hint {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.deadwood-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .4);
  background: rgba(7, 26, 20, .85);
  color: #fcd34d;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pcard.new-draw {
  position: relative;
  z-index: 40;
  border-color: #d4af37;
  transform: translateY(-6px);
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, .5),
    0 8px 16px rgba(0, 0, 0, .35);
  animation: drawIn .4s ease;
}
.pcard.new-draw.selected {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, .55),
    0 10px 18px rgba(0, 0, 0, .35);
}
/* Waiting / AI turn: gray the whole hand once so overlaps don't stack into bright seams */
.hand:has(.pcard:disabled) {
  filter: grayscale(.4) brightness(.78) saturate(.7);
}
.pcard:disabled {
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}
.pcard:disabled.new-draw,
.pcard:disabled.selected,
.pcard:disabled.hint {
  filter: none;
  transform: none;
  box-shadow: none;
  border-color: var(--card-border, #d9d0bc);
}
.pcard.hint {
  z-index: 3;
  border-color: #7eb6ff;
  box-shadow:
    0 0 0 3px rgba(126, 182, 255, .7),
    0 0 16px 4px rgba(80, 150, 255, .4),
    0 10px 18px rgba(0, 0, 0, .35);
}
.pcard.hint.selected {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, .55),
    0 0 16px 4px rgba(80, 150, 255, .35),
    0 10px 18px rgba(0, 0, 0, .35);
}
.pile.hint-ready {
  box-shadow: 0 0 0 3px rgba(126, 182, 255, .75), 0 0 18px rgba(80, 150, 255, .35);
}
.pcard:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 8px;
}

.game-actions .btn {
  min-width: 0;
  flex: 1 1 120px;
  min-height: 52px;
  cursor: pointer;
  font: inherit;
}

#btn-discard.host-wait,
#btn-discard.turn-wait {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #071428;
  border-color: rgba(255, 255, 255, .18);
  background: #12203c;
  font-weight: 900;
}

#btn-discard.host-wait::before,
#btn-discard.turn-wait::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--host-p, 100%);
  background: linear-gradient(
    90deg,
    hsl(var(--host-h, 128), 72%, 46%),
    hsl(calc(var(--host-h, 128) - 28), 82%, 52%)
  );
  z-index: -1;
  pointer-events: none;
}

#btn-discard.host-wait:disabled,
#btn-discard.turn-wait:disabled {
  opacity: 1;
  filter: none;
  cursor: default;
}

.game-actions .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.3);
}

.btn-muted {
  background: var(--navy-3);
  color: var(--cream);
  border: 2px solid rgba(255, 255, 255, .12);
}

.btn-ok {
  background: linear-gradient(180deg, #4ae09a, #2bb36e);
  color: #042016;
  border: 2px solid transparent;
}

.game-msg {
  min-height: 48px;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  text-align: center;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .08);
}

.game-msg.win {
  background: rgba(61, 214, 140, .15);
  border-color: rgba(61, 214, 140, .45);
  color: #9ef0c4;
}

.game-msg.need,
.game-msg.lose {
  background: rgba(243, 209, 107, .12);
  border-color: rgba(212, 175, 55, .4);
  color: var(--gold-2);
}

.game-msg.lose {
  background: rgba(180, 40, 40, .18);
  border-color: rgba(255, 120, 120, .4);
  color: #ffb4b4;
}

.game-msg.info { color: var(--muted); font-weight: 600; }

.game-help-block {
  margin: 16px 0 8px;
}

.game-help {
  margin-top: 14px;
  color: var(--muted);
  font-size: .92rem;
}

.demo-format {
  margin: 20px 0 28px;
  padding: 18px 16px;
  border: 1px solid rgba(212, 175, 55, .22);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(6, 78, 59, .22), rgba(0, 0, 0, .12));
}

.demo-format h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text, #f4efe4);
}

.demo-format-lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

.demo-format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.demo-format-grid article {
  margin: 0;
  padding: 0;
}

.demo-format-grid h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #e8c547;
}

.demo-format-grid h4 {
  margin: 12px 0 6px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text, #f4efe4);
}

.demo-format-grid p,
.demo-format-grid li {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.demo-format-grid ul {
  margin: 0 0 10px;
  padding-left: 1.15rem;
}

.demo-format-grid li {
  margin-bottom: 4px;
}

.demo-format-grid a {
  color: #e8c547;
}

@media (min-width: 768px) {
  .demo-format {
    padding: 22px 22px 20px;
  }

  .demo-format-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

.ai-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  .ai-row { grid-template-columns: 1fr 1fr; gap: 14px; }
}

.ai-block {
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(212, 175, 55, .18);
  border-radius: 14px;
  padding: 8px 8px 4px;
}

.avatar.cpu.alt {
  background: linear-gradient(145deg, #1d3d5c, #102030);
  color: #b8e0ff;
}

.anim-deal {
  animation: dealIn .42s ease both;
}

.anim-draw-in {
  animation: drawIn .35s ease;
}

.anim-draw-out {
  animation: pulseDeck .35s ease;
}

.anim-discard-in {
  animation: discardIn .4s ease;
}

.anim-win-flash {
  animation: winFlash .8s ease;
}

.deal-fly {
  position: fixed;
  z-index: 97;
  pointer-events: none;
  border-radius: 8px;
  background: #0c2a4a url("../images/card-back-india.webp") center / cover no-repeat;
  border: 2px solid #d4af37;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .5);
  will-change: transform, opacity;
  transition:
    transform .32s cubic-bezier(.2, .8, .2, 1),
    opacity .28s ease;
}

.hand.dealing {
  pointer-events: none;
}

.hand.dealing .suit-group {
  background: transparent;
  border: none;
  padding: 0;
}

.pcard.deal-sealed {
  background: #0c2a4a url("../images/card-back-india.webp") center / cover no-repeat !important;
  border-color: #d4af37 !important;
  color: transparent !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
}

.pcard.deal-sealed > * {
  visibility: hidden;
}

.pcard.deal-flipping {
  animation: dealFlipOpen .42s ease forwards;
  transform-style: preserve-3d;
  transition: none;
}

.card-back.deal-pop {
  animation: dealPopIn .34s cubic-bezier(.2, .85, .25, 1) both;
}

.discard-visual.deal-sealed {
  background: #0c2a4a url("../images/card-back-india.webp") center / cover no-repeat !important;
  color: transparent !important;
  border-color: #d4af37 !important;
}

.discard-visual.deal-sealed > * {
  visibility: hidden;
}

.discard-visual.deal-flip-open {
  animation: discardReveal .45s ease both;
}

@keyframes dealIn {
  from { opacity: 0; transform: translateY(18px) scale(.88); }
  to { opacity: 1; transform: none; }
}

@keyframes dealFlipOpen {
  0% { transform: rotateY(0deg); }
  45% { transform: rotateY(90deg) scale(1.04); }
  55% { transform: rotateY(90deg) scale(1.04); }
  100% { transform: rotateY(0deg); }
}

@keyframes dealPopIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes discardReveal {
  from {
    transform: rotateY(90deg) scale(.92);
    opacity: .35;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes drawIn {
  from { transform: translateY(-16px) scale(.92); opacity: .55; }
  to { transform: translateY(-8px) scale(1); opacity: 1; }
}

@keyframes pulseDeck {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.92); }
}

@keyframes discardIn {
  from { transform: scale(.7) rotate(-8deg); opacity: .3; }
  to { transform: none; opacity: 1; }
}

@keyframes winFlash {
  0%, 100% { box-shadow: var(--shadow); }
  40% { box-shadow: 0 0 0 3px rgba(61, 214, 140, .55), 0 16px 40px rgba(0, 0, 0, .4); }
}

.result-kicker { margin: 0 0 4px; font-weight: 900; color: #fcd34d; letter-spacing: .04em; font-size: .82rem; }
.result-lead {
  margin: 0 0 4px;
  color: rgba(245, 250, 247, .92);
  font-size: .95rem;
  line-height: 1.35;
}
.result-sub {
  margin: 0 0 8px;
  color: rgba(167, 196, 182, .9);
  font-size: .88rem;
  line-height: 1.35;
}
.result-dl-hint {
  margin: 0 0 8px;
  text-align: center;
  font-size: .82rem;
  color: rgba(252, 211, 77, .95);
}
.result-dl,
.result-primary { width: 100%; margin: 6px 0 0; min-height: 48px; font-size: 1rem; }
#result-close {
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
}
.result-modal.is-loss .result-kicker { color: #fecaca; }
.result-modal.is-loss .result-card h3 { color: #fecaca; }
.result-modal.is-loss .result-card {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(248, 113, 113, .2), transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .4), transparent 55%),
    url("../images/felt-india-pattern.webp") center / 160px repeat,
    linear-gradient(165deg, #7f1d1d 0%, #450a0a 42%, #04110d 100%);
  border-color: rgba(248, 113, 113, .5);
}

.result-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(4, 17, 13, .78);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.result-modal[hidden] { display: none !important; }

.result-modal.open .result-card {
  animation: modalIn .35s ease;
}

.result-card {
  width: min(100%, 360px);
  max-height: min(88dvh, 640px);
  margin: auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, .22), transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .35), transparent 55%),
    url("../images/felt-india-pattern.webp") center / 160px repeat,
    linear-gradient(165deg, #0c7a58 0%, #064e3b 42%, #04110d 100%);
  border: 2px solid rgba(251, 191, 36, .58);
  border-radius: 16px;
  padding: 14px 14px 16px;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(255, 236, 180, .18),
    inset 0 1px 0 rgba(255, 220, 150, .28);
  text-align: center;
  color: #f5faf7;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  isolation: isolate;
}

.result-card > *:not(.result-decor) {
  position: relative;
  z-index: 1;
}

/* Indian parlor / table ornaments (absolute — no layout height) */
.result-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.result-mandala {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(72%, 220px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .14;
  background: url("../images/felt-mandala.webp") center / contain no-repeat;
  filter: sepia(.35) saturate(1.2);
}
.result-paisley {
  position: absolute;
  width: 48px;
  height: 64px;
  opacity: .32;
  background:
    radial-gradient(ellipse 55% 40% at 50% 28%, rgba(251, 191, 36, .55), transparent 70%),
    radial-gradient(ellipse 40% 55% at 48% 62%, rgba(251, 191, 36, .32), transparent 72%);
  border-radius: 50% 50% 48% 52% / 60% 60% 40% 40%;
  border: 1px solid rgba(251, 191, 36, .28);
}
.result-paisley.pl { left: 6px; top: 18%; transform: rotate(-18deg); }
.result-paisley.pr { right: 6px; top: 20%; transform: scaleX(-1) rotate(-12deg); }
.result-chip-stack {
  position: absolute;
  bottom: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.result-chip-stack .cchip {
  margin-top: -6px;
}
.result-chip-stack .cchip:first-child { margin-top: 0; }
.result-chip-stack.left { left: 8px; }
.result-chip-stack.right { right: 8px; }
.result-mini-fan {
  position: absolute;
  top: 8px;
  left: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 36px;
  transform: translateX(-50%);
  opacity: 0; /* desktop keeps photo art; phones show the fan */
}
.rmini {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  margin-left: -8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fffdf7, #f3ebe0);
  border: 1px solid #d4c4a8;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  font-size: .55rem;
  font-weight: 900;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}
.rmini:first-child { margin-left: 0; }
.rmini.red { color: #b0142e; }
.rmini.black { color: #16213e; }
.rmini:nth-child(1) { transform: rotate(-14deg) translateY(4px); }
.rmini:nth-child(2) { transform: rotate(-5deg) translateY(1px); z-index: 1; }
.rmini:nth-child(3) { transform: rotate(5deg) translateY(1px); z-index: 2; }
.rmini:nth-child(4) { transform: rotate(14deg) translateY(4px); z-index: 3; }
.result-diya {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 18px;
  height: 10px;
  margin-left: -9px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #f59e0b, #92400e);
  opacity: .55;
  box-shadow: 0 0 10px rgba(251, 191, 36, .35);
}
.result-diya::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 6px;
  height: 10px;
  margin-left: -3px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 30%, #fff7ed, #fbbf24 55%, #ea580c);
  animation: diyaFlicker 2.2s ease-in-out infinite;
}
.result-coin-float {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #fbbf24 45%, #b45309);
  border: 1px solid rgba(255, 236, 180, .7);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  animation: casinoFloat 4.6s ease-in-out infinite;
  opacity: .85;
}
.result-coin-float::after {
  content: "₹";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .48rem;
  font-weight: 900;
  color: #7c4a08;
}
.result-coin-float.c1 { left: 12%; top: 10%; animation-delay: 0s; }
.result-coin-float.c2 { right: 11%; top: 28%; width: 14px; height: 14px; animation-delay: .7s; }
.result-coin-float.c3 { left: 16%; bottom: 22%; width: 15px; height: 15px; animation-delay: 1.3s; }

.result-modal.is-loss .result-mandala { opacity: .1; filter: grayscale(.4) sepia(.2); }
.result-modal.is-loss .result-paisley { opacity: .22; }
.result-modal.is-loss .result-diya { opacity: .35; filter: grayscale(.3); }
.result-modal.is-loss .result-coin-float { opacity: .45; }

.result-art {
  display: block;
  width: min(42%, 120px);
  height: auto;
  margin: 0 auto 8px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, .4);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
  object-fit: cover;
  object-position: top center;
  max-height: 88px;
}

.result-card h3 {
  margin: 0 0 6px;
  color: #fcd34d;
  font-size: clamp(1.2rem, 4.5vw, 1.4rem);
}

.result-body {
  color: rgba(167, 196, 182, .95);
  margin: 8px 0 6px;
  text-align: left;
}
.result-body p { margin: 4px 0; }

.result-settle-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fcd34d;
  text-align: center;
}
.result-settle-head .cchip.mini {
  width: 14px;
  height: 14px;
}

.game-actions .discard-slot {
  flex: 1 1 120px;
  min-width: 0;
  position: relative;
}

.game-actions .discard-slot > .btn {
  width: 100%;
}

.host-offer {
  position: fixed;
  z-index: 75;
  width: min(268px, calc(100vw - 24px));
  margin: 0;
  padding: 0;
  background: none;
  inset: auto;
  transform: translate(-50%, calc(-100% - 12px));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .45));
}

.host-offer[hidden] { display: none !important; }

.host-offer.open {
  animation: hostPop .28s ease;
}

@keyframes hostPop {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 18px)) scale(.55);
  }
  to {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 12px)) scale(1);
  }
}

@keyframes hostPopCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.host-offer-card {
  width: 100%;
  text-align: center;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(251, 191, 36, .5);
  background: linear-gradient(180deg, #0a6b50, #033528);
  position: relative;
  color: #f5faf7;
}

.host-offer-card::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #033528;
  border-right: 1px solid rgba(251, 191, 36, .5);
  border-bottom: 1px solid rgba(251, 191, 36, .5);
  transform: rotate(45deg);
}

.host-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fcd34d;
}

.host-body {
  margin: 0 0 12px;
  color: rgba(167, 196, 182, .9);
  line-height: 1.35;
  font-size: .9rem;
}

/* PC-only tip under host offer body; hidden on phones */
.host-tip {
  display: none;
  margin: -6px 0 12px;
  padding: 0;
  color: rgba(252, 211, 77, .88);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}

.host-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.host-actions .btn {
  min-width: 0;
  flex: 1;
  min-height: 48px;
  font-weight: 900;
}

.result-settle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.result-settle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(251, 191, 36, .22);
}

.result-settle-row.is-you {
  border-color: rgba(251, 191, 36, .5);
  background: rgba(6, 78, 59, .45);
}
.result-settle-row.is-gain {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .2);
}
.result-settle-row.is-loss {
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .18);
}

.result-settle-name {
  font-weight: 800;
  color: #f5faf7;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-settle-delta,
.result-settle-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-settle-delta strong,
.result-settle-total strong {
  font-size: 1rem;
  font-weight: 900;
}
.result-settle-row.is-gain .result-settle-delta strong { color: #6ee7b7; }
.result-settle-row.is-loss .result-settle-delta strong { color: #fca5a5; }
.result-settle-total strong { color: #fcd34d; }

.result-settle-arrow {
  color: rgba(252, 211, 77, .55);
  font-weight: 800;
}

.result-coin {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #fbbf24 45%, #b45309);
  border: 1px solid rgba(255, 236, 180, .7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
  position: relative;
}
.result-coin::after {
  content: "₹";
  font-size: .58rem;
  font-weight: 900;
  color: #7c4a08;
  line-height: 1;
}

.result-settle-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0 !important;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: .8rem;
  color: #fde68a;
  background: rgba(251, 191, 36, .1);
  border: 1px dashed rgba(251, 191, 36, .35);
  text-align: center;
}

.result-modal.is-loss .result-settle-row.is-you {
  border-color: rgba(248, 113, 113, .4);
  background: rgba(127, 29, 29, .35);
}

/* Mobile: settlement fits one screen — no scrolling */
@media (max-width: 767px) {
  .result-modal {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px));
    background:
      radial-gradient(ellipse at 50% 20%, rgba(251, 191, 36, .12), transparent 45%),
      rgba(4, 17, 13, .82);
  }
  .result-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px; /* clear space between Download / Keep Training */
    row-gap: 0;
    align-content: start;
    width: min(90vw, 340px);
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 24px);
    height: auto;
    margin: auto;
    /* No top fan strip — keeps headlines clear of decor */
    padding: 14px 16px 14px;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
    border-width: 2px;
    box-shadow:
      0 16px 36px rgba(0, 0, 0, .55),
      inset 0 0 0 1px rgba(255, 236, 180, .2),
      inset 0 0 24px rgba(0, 0, 0, .25);
  }
  .result-decor {
    grid-column: 1 / -1;
    grid-row: 1;
    pointer-events: none;
    z-index: 0;
  }
  .result-art,
  .result-kicker,
  .result-card h3,
  .result-lead,
  .result-sub,
  .result-body {
    grid-column: 1 / -1;
  }
  .result-art {
    display: none;
  }
  /* Fan / chips / coins / paisley / diya all stack onto copy on phones */
  .result-mini-fan,
  .result-chip-stack,
  .result-coin-float,
  .result-paisley,
  .result-diya {
    display: none;
  }
  .result-mandala {
    width: min(68%, 170px);
    opacity: .09;
    top: 54%;
  }
  .result-kicker {
    margin: 2px 0 2px;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .result-card h3 {
    margin: 0 0 2px;
    font-size: 1.12rem;
    line-height: 1.15;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(251, 191, 36, .25);
  }
  .result-lead {
    margin: 0 0 1px;
    font-size: .76rem;
    line-height: 1.25;
  }
  .result-sub {
    margin: 0 0 8px;
    font-size: .7rem;
    line-height: 1.25;
  }
  .result-body {
    margin: 4px 0 6px;
    padding: 0;
  }
  .result-settle-head {
    gap: 4px;
    margin: 0 0 6px !important;
    font-size: .6rem;
    letter-spacing: .04em;
    line-height: 1.25;
    flex-wrap: nowrap;
  }
  /* Head chips sit under the lead line on narrow widths — drop them on phones */
  .result-settle-head .cchip.mini {
    display: none;
  }
  .result-settle-list {
    gap: 4px;
  }
  .result-settle-row {
    gap: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .72rem;
    background:
      linear-gradient(90deg, rgba(251, 191, 36, .08), transparent 40%),
      rgba(0, 0, 0, .32);
    border-color: rgba(251, 191, 36, .28);
  }
  .result-settle-row.is-you {
    background:
      linear-gradient(90deg, rgba(251, 191, 36, .16), transparent 55%),
      rgba(6, 78, 59, .5);
  }
  .result-settle-delta,
  .result-settle-total {
    gap: 4px;
  }
  .result-settle-delta strong,
  .result-settle-total strong {
    font-size: .86rem;
  }
  .result-coin {
    width: 14px;
    height: 14px;
  }
  .result-settle-reset {
    margin: 4px 0 0 !important;
    padding: 4px 6px;
    font-size: .68rem;
    line-height: 1.25;
    gap: 6px;
  }
  .result-dl,
  .result-primary {
    grid-column: 1;
    position: relative;
    z-index: 3;
    pointer-events: auto;
    width: 100%;
    min-height: 40px;
    height: 40px;
    margin: 10px 0 0;
    padding: 0 6px;
    font-size: .7rem;
    line-height: 1.1;
    box-shadow: 0 4px 12px rgba(180, 83, 9, .35);
  }
  #result-close {
    grid-column: 2;
    position: relative;
    z-index: 3;
    pointer-events: auto;
    width: 100%;
    min-height: 40px;
    height: 40px;
    margin: 10px 0 0;
    padding: 0 6px;
    font-size: .7rem;
    line-height: 1.1;
  }
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  /* Desktop settlement: centered dialog; scroll inside card if needed */
  .result-modal {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px 24px;
    background:
      radial-gradient(ellipse at 50% 18%, rgba(251, 191, 36, .14), transparent 48%),
      rgba(4, 17, 13, .88);
  }
  .result-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 0;
    align-content: start;
    width: min(640px, calc(100vw - 48px));
    max-width: 640px;
    max-height: calc(100dvh - 40px);
    height: auto;
    margin: 0;
    padding: 22px 28px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
  }
  .result-art,
  .result-kicker,
  .result-card h3,
  .result-lead,
  .result-sub,
  .result-body,
  .result-dl-hint {
    grid-column: 1 / -1;
  }
  .result-art {
    width: 88px;
    max-height: 66px;
    margin: 0 auto 6px;
    border-radius: 10px;
  }
  .result-kicker {
    margin: 0 0 2px;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .result-card h3 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    line-height: 1.15;
  }
  .result-lead {
    margin: 0 0 2px;
    font-size: .86rem;
    line-height: 1.3;
  }
  .result-sub {
    margin: 0 0 10px;
    font-size: .76rem;
    line-height: 1.3;
    opacity: .9;
  }
  .result-body {
    margin: 0 0 8px;
    overflow: hidden;
  }
  .result-settle-head {
    margin: 0 0 8px !important;
    font-size: .7rem;
  }
  .result-settle-list {
    gap: 6px;
  }
  .result-settle-row {
    padding: 8px 12px;
    font-size: .84rem;
    border-radius: 10px;
  }
  .result-settle-delta strong,
  .result-settle-total strong {
    font-size: .95rem;
  }
  .result-settle-reset {
    margin: 6px 0 0 !important;
    padding: 5px 8px;
    font-size: .72rem;
  }
  .result-dl-hint {
    margin: 0 0 12px;
    font-size: .72rem;
    line-height: 1.3;
  }
  .result-primary,
  .result-dl {
    grid-column: 1;
    width: 100%;
    min-height: 46px;
    height: 46px;
    margin: 0;
    font-size: .86rem;
  }
  #result-close {
    grid-column: 2;
    width: 100%;
    min-height: 46px;
    height: 46px;
    margin: 0;
    font-size: .86rem;
  }
  .result-chip-stack { bottom: 58px; opacity: .65; }
  .result-coin-float.c3 { bottom: 16%; }

  /* Short desktop windows: drop art, tighten spacing */
  @media (max-height: 720px) {
    .result-art { display: none; }
    .result-card {
      padding: 16px 22px 14px;
      max-height: calc(100dvh - 24px);
    }
    .result-card h3 { font-size: 1.28rem; }
    .result-sub { margin-bottom: 6px; }
    .result-settle-row { padding: 6px 10px; }
    .result-primary,
    .result-dl,
    #result-close {
      min-height: 42px;
      height: 42px;
    }
  }
}

@media (min-width: 375px) {
  .pcard { width: 56px; height: 80px; }
  .card-back { width: 40px; height: 56px; }
}

@media (min-width: 768px) {
  .battle { padding: 22px; }
  .pcard { width: 64px; height: 92px; font-size: 1.05rem; }
  .card-back { width: 44px; height: 62px; }
  .stock-visual,
  .discard-visual { width: 64px; height: 90px; }
  .table-mid { max-width: 420px; gap: 18px; }
}

/* ===== Card table layout ===== */
.battle-top {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.battle-title {
  margin: 0;
  text-align: center;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fcd34d;
  text-shadow: 0 1px 0 rgba(3, 53, 40, .5);
}

.felt-table {
  --felt: #0c5a38;
  --felt-2: #08422a;
  --felt-3: #127a4c;
  --rim: 12px;
  --table-radius: 42px;
  position: relative;
  z-index: 2;
  display: block;
  margin: 8px auto 12px;
  max-width: none;
  padding: var(--rim);
  border-radius: var(--table-radius);
  background:
    linear-gradient(145deg, #0a6b50 0%, #064e3b 28%, #033528 62%, #0c5a38 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .55),
    inset 0 2px 0 rgba(255, 220, 150, .22),
    inset 0 -5px 12px rgba(0, 0, 0, .5);
  overflow: visible;
}

.felt-table > .felt-inner {
  display: grid;
}

/* Board arena: AI seats on both sides of an enlarged felt */
.board-arena {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "seat-l felt seat-r";
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 8px 4px 10px;
  overflow: visible;
}

.board-arena .felt-table {
  grid-area: felt;
  margin: 0;
  width: 100%;
  max-width: none;
  min-height: 320px;
  --rim: 14px;
  --table-radius: 48px;
}

.board-arena .side-rail {
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}
.board-arena .side-rail.left { grid-area: seat-l; }
.board-arena .side-rail.right { grid-area: seat-r; }

/* Player turn bar lives inside felt (above hand) */
.felt-inner > .seat-float.bottom {
  position: relative;
  z-index: 5;
  margin: 4px auto 6px;
  justify-self: center;
}

.play-back,
.play-settings,
.play-settings-menu,
.turn-chip {
  display: none;
}

.battle .seat-float.side-left,
.battle .seat-float.side-right {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  max-width: 112px;
  margin: 0 auto;
  padding: 12px 10px 10px;
  border-radius: 22px;
}

.battle .seat-float.side-left .seat-meta,
.battle .seat-float.side-right .seat-meta {
  width: 100%;
}

.battle .seat-float.side-left .seat-name,
.battle .seat-float.side-right .seat-name,
.battle .seat-float.side-left .seat-status,
.battle .seat-float.side-right .seat-status {
  white-space: normal;
}

.battle .seat-float.side-left .hud-stat,
.battle .seat-float.side-right .hud-stat {
  margin: 0;
  justify-content: center;
  width: 100%;
}

.battle .seat-float.side-left .avatar,
.battle .seat-float.side-right .avatar {
  width: 64px;
  height: 64px;
}

.side-mini-hand {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.side-mini-hand .mini-back {
  width: 16px;
  height: 22px;
  margin-left: -6px;
  border-radius: 3px;
  border: 1px solid rgba(251, 191, 36, .45);
  background: #0c2a4a url("../images/card-back-india.webp") center / cover no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.side-mini-hand .mini-back:first-child { margin-left: 0; }

.board-outer-art {
  position: absolute;
  top: 6%;
  bottom: 10%;
  width: 70px;
  pointer-events: none;
  z-index: 1;
}
.board-outer-art.left { left: -8px; }
.board-outer-art.right { right: -8px; }

.board-outer-art .outer-card {
  position: absolute;
  top: 6%;
  width: 46px;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, .45);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  opacity: .72;
}
.board-outer-art.left .outer-card { left: 0; transform: rotate(-16deg); }
.board-outer-art.right .outer-card { right: 0; transform: rotate(16deg); }

.board-outer-art .outer-mandala {
  position: absolute;
  top: 36%;
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: .35;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, .25));
}
.board-outer-art.left .outer-mandala { left: 4px; }
.board-outer-art.right .outer-mandala { right: 4px; }

.board-outer-art .outer-chip-stack {
  position: absolute;
  bottom: 18%;
  display: flex;
  flex-direction: column;
}
.board-outer-art.left .outer-chip-stack { left: 10px; }
.board-outer-art.right .outer-chip-stack { right: 10px; }
.board-outer-art .outer-chip-stack .cchip {
  margin-top: -8px;
}
.board-outer-art .outer-chip-stack .cchip:first-child { margin-top: 0; }

.board-outer-art .outer-coin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #fbbf24 45%, #b45309);
  border: 1px solid rgba(255, 236, 180, .7);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  animation: casinoFloat 4.8s ease-in-out infinite;
}
.board-outer-art .outer-coin::after {
  content: "₹";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .55rem;
  font-weight: 900;
  color: #7c4a08;
}
.board-outer-art .outer-coin.oc1 { top: 26%; }
.board-outer-art .outer-coin.oc2 { bottom: 30%; width: 14px; height: 14px; animation-delay: .8s; }
.board-outer-art.left .outer-coin.oc1 { left: 40px; }
.board-outer-art.left .outer-coin.oc2 { left: 6px; }
.board-outer-art.right .outer-coin.oc1 { right: 40px; }
.board-outer-art.right .outer-coin.oc2 { right: 6px; }

.board-outer-art .outer-diya {
  position: absolute;
  bottom: 4%;
  width: 22px;
  height: 14px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #b45309, #78350f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.board-outer-art .outer-diya::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 8px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 30%, #fde68a, #f59e0b 55%, transparent 70%);
  animation: diyaFlicker 2.2s ease-in-out infinite;
}
.board-outer-art.left .outer-diya { left: 16px; }
.board-outer-art.right .outer-diya { right: 16px; }

.opponent-seats {
  display: none;
}

@media (max-width: 760px) {
  .board-arena {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "seat-l seat-r"
      "felt felt";
    column-gap: 8px;
    row-gap: 8px;
  }
  .board-arena .felt-table {
    min-height: 260px;
    --rim: 10px;
    --table-radius: 36px;
  }
  .battle .seat-float.side-left,
  .battle .seat-float.side-right {
    flex-direction: row;
    max-width: none;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 999px;
  }
  .battle .seat-float.side-left .avatar,
  .battle .seat-float.side-right .avatar {
    width: 44px;
    height: 44px;
  }
  .side-mini-hand { display: none; }
  .board-outer-art { display: none; }
}

.felt-table::before {
  content: "";
  position: absolute;
  inset: calc(var(--rim) - 4px);
  border-radius: calc(var(--table-radius) - 4px);
  border: var(--border-secondary, 1px solid rgba(10, 107, 80, .5));
  box-shadow: inset 0 0 0 1px rgba(3, 53, 40, .35);
  pointer-events: none;
  z-index: 1;
}

.felt-table::after {
  content: none;
  display: none;
}

.felt-inner {
  position: relative;
  z-index: 2;
  padding: 18px 14px 14px;
  border-radius: calc(var(--table-radius) - var(--rim));
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .04), transparent 42%),
    linear-gradient(165deg, #127a4c, #0c5a38 42%, #08422a);
  box-shadow:
    inset 0 0 0 2px rgba(8, 50, 30, .55),
    inset 0 10px 24px rgba(0, 0, 0, .22);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: stretch;
  gap: 10px;
  overflow: hidden;
}

.felt-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.felt-mandala {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(58%, 280px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../images/felt-mandala.webp") center / contain no-repeat;
  opacity: .14;
  filter: sepia(.15) saturate(1.1);
}

.felt-mandala-img {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(48%, 200px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: .18;
  pointer-events: none;
  filter: none;
  animation: none;
}

.felt-corner-img {
  display: none !important;
}

.felt-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  opacity: .34;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 200, 87, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 28%, rgba(240, 161, 42, .4) 0 1.5px, transparent 3px),
    radial-gradient(ellipse 70% 45% at 40% 60%, rgba(255, 200, 87, .28), transparent 70%),
    radial-gradient(ellipse 40% 70% at 65% 55%, rgba(240, 161, 42, .22), transparent 70%),
    conic-gradient(from 210deg at 50% 50%, transparent 0 60%, rgba(255, 200, 87, .2) 60% 72%, transparent 72% 100%);
  border: 1px solid rgba(255, 200, 87, .22);
  border-radius: 50% 40% 55% 45%;
  box-shadow: inset 0 0 12px rgba(255, 200, 87, .12);
}

.felt-corner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 200, 87, .28);
  background: radial-gradient(circle, rgba(255, 200, 87, .2), transparent 65%);
}

.felt-corner.tl { top: 14px; left: 18px; transform: rotate(-18deg); }
.felt-corner.tr { top: 14px; right: 18px; transform: scaleX(-1) rotate(-18deg); }
.felt-corner.bl { bottom: 18px; left: 22px; transform: scaleY(-1) rotate(-12deg); }
.felt-corner.br { bottom: 18px; right: 22px; transform: scale(-1) rotate(-12deg); }

.felt-inner > *:not(.felt-decor) {
  position: relative;
  z-index: 1;
}

.battle .ai-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding-top: 4px;
  align-items: start;
}

.battle .ai-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 4px;
  box-shadow: none;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.battle .cpu-hand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  min-height: 36px;
  margin: 0;
  width: 100%;
  overflow: visible;
}

.battle .card-back {
  width: 26px;
  height: 38px;
  margin-left: -12px;
  flex: 0 0 auto;
  border-width: 1.5px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}

.battle .card-back:first-child {
  margin-left: 0;
}

.battle .table-mid {
  margin: 0 auto;
  max-width: 320px;
  gap: 8px;
  align-self: center;
}

.battle .pile {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px;
  min-height: 0;
  gap: 4px;
  box-shadow: none;
}

.battle .pile .pile-hint {
  display: none;
}

.battle .pile .pile-count {
  font-size: .68rem;
  opacity: .75;
}

.battle .stock-visual,
.battle .discard-visual {
  width: 54px;
  height: 76px;
}

.hand-stage.on-felt {
  z-index: 5;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 6px 10px;
  border-radius: var(--radius-12, 12px);
  background: transparent;
  border: none;
  box-shadow: none;
  align-self: end;
  min-height: 0;
  position: relative;
}

.hand-stage.on-felt .hand {
  min-height: 0;
  padding: 2px 0;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
}

.hand-stage.on-felt .suit-group {
  background: transparent;
  border: none;
  gap: 3px;
  padding: 2px;
  margin-inline: 6px;
}

.hand-stage.on-felt .pcard {
  width: 44px;
  height: 66px;
  font-size: .85rem;
}

.battle .seat-float {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  width: auto;
  max-width: min(100%, 280px);
  border-radius: 999px;
  background:
    linear-gradient(160deg, rgba(6, 78, 59, .94), rgba(4, 17, 13, .96));
  border: var(--border-secondary, 1px solid rgba(10, 107, 80, .5));
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .32));
  backdrop-filter: none;
  pointer-events: auto;
  transform: none;
}

.battle .seat-float.top-left {
  justify-self: start;
}

.battle .seat-float.top-right {
  justify-self: end;
  margin-left: auto;
}

.battle .seat-float.bottom {
  grid-area: auto;
  display: flex;
  justify-self: center;
  margin: 0 auto 8px;
  max-width: min(96%, 420px);
  width: max-content;
}

.battle .seat.player {
  margin: 0;
  max-width: min(96%, 420px);
  width: max-content;
  padding: 8px 12px;
  border-radius: 999px;
  background:
    linear-gradient(160deg, rgba(10, 107, 80, .94), rgba(4, 17, 13, .96));
  border: 2px solid rgba(251, 191, 36, .55);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 220, 160, .14);
}

.battle .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  background: #04110d;
  border-color: rgba(251, 191, 36, .85);
  flex-shrink: 0;
}

.battle .seat-float .seat-meta {
  min-width: 0;
}

.battle .seat-float .seat-name,
.battle .seat-float .seat-status {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle .seat-float .seat-name { font-size: .9rem; }
.battle .seat-float .seat-status { font-size: .75rem; }

.battle .avatar.cpu {
  background: #0d2f24;
  color: #b8f0d4;
}

.battle .avatar.cpu.alt {
  background: #0c2a3d;
  color: #b8dff5;
}

.battle .seat.active .avatar {
  box-shadow: 0 0 0 2px var(--rummy-gold, #fbbf24);
}

.battle .seat.active .seat-status { color: var(--rummy-gold-soft, #fcd34d); }

.battle .seat.active,
.battle .seat-float.active {
  border: var(--border-gold, 2px solid var(--rummy-gold, #fbbf24));
}

.battle .pile.draw-ready {
  border: none;
  box-shadow: none;
}

.battle .pile.draw-ready .stock-visual,
.battle .pile.draw-ready .discard-visual {
  outline: 2px solid var(--rummy-gold, #fbbf24);
  outline-offset: 2px;
}

.battle .pile.draw-ready:hover {
  background: transparent;
}

.battle .stock-visual {
  background:
    #0c2a20 url("../rummy/cards/card-back.svg?v=2") center / cover no-repeat;
}

.battle .turn-banner {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.battle .turn-banner.cpu {
  color: #9fe8d8;
  border-color: rgba(14, 107, 92, .45);
}

.battle .hud-stat {
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 34px;
  font-size: .82rem;
  background: rgba(0, 0, 0, .4);
  border-color: rgba(240, 161, 42, .28);
  color: rgba(255, 236, 210, .88);
}

.battle .led-scoreboard .hud-stat {
  border-radius: 0;
  padding: 2px 2px 4px;
  min-height: 0;
  font-size: inherit;
  background: transparent;
  border: none;
  color: inherit;
}

.player-rail {
  position: relative;
  z-index: 4;
  margin: 10px auto 0;
  max-width: 920px;
  padding: 10px 12px 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10, 61, 48, .85), rgba(7, 26, 20, .96));
  border: 1px solid rgba(251, 191, 36, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, .1),
    0 10px 24px rgba(0, 0, 0, .35);
}

/* Lobby: rail is outside #battle-table — hide until a match starts */
body.play:not(.is-playing) .player-rail {
  display: none !important;
}

.battle .meld-hint,
.player-rail .meld-hint { color: #ffe2a8; }

.battle .game-help {
  margin: 12px 8px 0;
  opacity: .9;
  color: rgba(167, 196, 182, .85);
}

.battle .game-actions .btn-ok,
.player-rail .game-actions .btn-ok {
  background: linear-gradient(180deg, #34d399, #059669);
  border-color: rgba(180, 255, 210, .3);
  color: #fff;
}

.battle .game-actions .btn-gold,
.player-rail .game-actions .btn-gold,
.india-parlor .btn-gold,
.start-screen .btn-gold {
  background: linear-gradient(180deg, #fcd34d, #fbbf24 48%, #d97706);
  border-color: rgba(255, 236, 180, .5);
  color: #1a1204;
  text-shadow: none;
  box-shadow: 0 8px 20px rgba(251, 191, 36, .28);
}

.battle .game-actions .btn-ghost,
.player-rail .game-actions .btn-ghost {
  border-color: rgba(251, 191, 36, .55);
  color: #fcd34d;
  background: rgba(0, 0, 0, .22);
}

.battle .game-actions .btn-muted,
.player-rail .game-actions .btn-muted {
  background: rgba(3, 53, 40, .65);
  border-color: rgba(251, 191, 36, .3);
  color: rgba(245, 250, 247, .88);
}

.battle .game-msg,
.player-rail .game-msg {
  color: rgba(245, 250, 247, .88);
}

.battle .game-msg.win { color: #b8f5c8; }
.battle .game-msg.need,
.battle .game-msg.lose { color: #ffb4a8; }

.battle .seat-name { color: #f5faf7; font-weight: 800; }
.battle .seat-status { color: rgba(167, 196, 182, .9); }
.battle .pile-label { color: #fcd34d; }
.battle .pile-count { color: rgba(167, 196, 182, .8); }

.hand-stage.on-felt .suit-group {
  background: rgba(4, 17, 13, .4);
  border-color: rgba(251, 191, 36, .28);
}

.india-parlor .led-panel {
  background:
    linear-gradient(180deg, #0a6b50 0%, #064e3b 40%, #033528 100%);
  border-color: #fbbf24;
}

.india-parlor .led-screen.battle-hud {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, .12), transparent 55%),
    linear-gradient(180deg, #04110d 0%, #020a08 100%);
  box-shadow:
    inset 0 0 0 1px rgba(251, 191, 36, .22),
    inset 0 0 28px rgba(6, 78, 59, .2),
    inset 0 8px 16px rgba(0, 0, 0, .55);
}

.india-parlor .led-scoreboard .led-label {
  color: #86efac;
  text-shadow: 0 0 4px rgba(52, 211, 153, .35);
}

@media (max-width: 640px) {
  .hand-stage { margin: 0 auto; }
  .hand-stage.on-felt { padding: 4px 2px; }
  .hand { gap: 4px; }
  .hand .suit-group { gap: 3px; padding: 3px; }
  .hand .pcard { margin-left: 0; }
  .led-scoreboard {
    width: min(88%, 340px);
    margin: 0 auto 10px;
    transform: perspective(720px) rotateX(8deg);
  }
  .led-screen.battle-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 8px 6px;
  }
  .led-scoreboard .led-label { font-size: .52rem; letter-spacing: .1em; }
  .led-scoreboard .led-value { font-size: .95rem; }
  .felt-table {
    --rim: 10px;
    --table-radius: 28px;
    margin: 8px 0 10px;
  }
  .felt-inner {
    min-height: 0;
    padding: 14px 8px 10px;
    gap: 8px;
  }
  .battle .card-back {
    width: 22px;
    height: 32px;
    margin-left: -10px;
  }
  .battle .stock-visual,
  .battle .discard-visual {
    width: 42px;
    height: 60px;
  }
  .hand-stage.on-felt .hand {
    gap: 2px;
    flex-wrap: nowrap;
  }
  .hand-stage.on-felt .suit-group {
    gap: 0;
    padding: 2px;
  }
  .hand-stage.on-felt .pcard {
    width: 38px;
    height: 54px;
    font-size: .78rem;
    margin-left: -14px;
  }
  .hand-stage.on-felt .suit-group .pcard:first-child {
    margin-left: 0;
  }
  .battle .seat-float {
    max-width: 100%;
    padding: 6px 8px;
    gap: 6px;
  }
  .battle .seat-float .hud-stat { display: none; }
  .battle .seat-float.bottom {
    max-width: min(96%, 320px);
  }
  .felt-mandala {
    width: min(72%, 200px);
    opacity: .18;
  }
  .felt-corner { width: 40px; height: 40px; opacity: .28; }
  .felt-corner.tl { top: 10px; left: 10px; }
  .felt-corner.tr { top: 10px; right: 10px; }
  .felt-corner.bl { bottom: 12px; left: 12px; }
  .felt-corner.br { bottom: 12px; right: 12px; }
  .battle .ai-row { gap: 6px; }
  .battle .seat-name { font-size: .85rem; }
  .battle .avatar { width: 46px; height: 46px; }
}

@media (min-width: 768px) {
  .felt-table {
    --rim: 14px;
    --table-radius: 48px;
    margin: 10px 0 14px;
  }
  .felt-inner { min-height: 0; padding: 20px 18px 16px; }
  .battle .card-back {
    width: 28px;
    height: 40px;
    margin-left: -12px;
  }
  .battle .table-mid { max-width: 300px; }
  .battle .stock-visual,
  .battle .discard-visual {
    width: 54px;
    height: 76px;
  }
  .hand-stage.on-felt .pcard {
    width: 48px;
    height: 68px;
    font-size: .88rem;
  }
  .led-scoreboard {
    width: min(62%, 400px);
    margin: 0 auto 16px;
  }
}

/* Prevent page-level horizontal scroll when the hand is dense */
body:has(#battle-table:not([hidden])),
body.is-playing {
  padding-bottom: 12px;
  overflow-x: clip;
  max-width: 100%;
}
body:has(#battle-table:not([hidden])) .sticky-dl,
body.is-playing .sticky-dl {
  display: none;
}

/* Center the live table when it fits; fall back to top when content is taller than the viewport */
body.is-playing .game-shell {
  min-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
body.is-playing .game-shell > .wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: auto;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
/* SEO blocks (demo-format / FAQ / related / footer) stay visible while playing.
   Game chrome is controlled by #battle-table [hidden] + start-screen toggle. */
body.is-playing #battle-table {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  overflow-x: clip;
}

.game-shell:has(#battle-table:not([hidden])) .india-badge,
.game-shell:has(#battle-table:not([hidden])) .crumbs,
.game-shell:has(#battle-table:not([hidden])) .lead,
.game-shell:has(#battle-table:not([hidden])) .entity {
  display: none;
}
.game-shell:has(#battle-table:not([hidden])) h1,
.game-shell:has(#battle-table:not([hidden])) .turn-banner,
.game-shell:has(#battle-table:not([hidden])) .led-panel::before,
.game-shell:has(#battle-table:not([hidden])) .led-screen.battle-hud::before {
  display: none;
}
.game-shell:has(#battle-table:not([hidden])) .led-screen.battle-hud {
  padding: 2px 6px;
}
.game-shell:has(#battle-table:not([hidden])) .led-scoreboard .led-value {
  font-size: 1rem;
  line-height: 1.1;
}
.game-shell:has(#battle-table:not([hidden])) .battle-top,
.game-shell:has(#battle-table:not([hidden])) .led-cables {
  display: none;
}
.game-shell:has(#battle-table:not([hidden])) .led-scoreboard {
  width: min(100%, 560px);
  margin: 0 auto 4px;
  transform: none;
  filter: none;
}
.game-shell:has(#battle-table:not([hidden])) .board-arena {
  max-width: 1100px;
  margin: 0 auto 4px;
  column-gap: 8px;
}
.game-shell:has(#battle-table:not([hidden])) .opponent-seats {
  display: none;
}
.game-shell:has(#battle-table:not([hidden])) .felt-table {
  --rim: 12px;
  --table-radius: 44px;
  margin: 0;
  min-height: 0;
  overflow: visible;
}
.game-shell:has(#battle-table:not([hidden])) .felt-inner {
  min-height: 0;
  padding: 12px 16px 18px;
  gap: 8px;
  overflow: visible;
}
.game-shell:has(#battle-table:not([hidden])) .battle .ai-row {
  padding-top: 2px;
}
.game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
  max-width: 340px;
  gap: 12px;
}
.game-shell:has(#battle-table:not([hidden])) .pile {
  min-height: 0;
  padding: 8px 8px 6px;
}
.game-shell:has(#battle-table:not([hidden])) .stock-visual,
.game-shell:has(#battle-table:not([hidden])) .discard-visual {
  width: 58px;
  height: 82px;
}
.game-shell:has(#battle-table:not([hidden])) .pile-label,
.game-shell:has(#battle-table:not([hidden])) .pile-count {
  font-size: .7rem;
}
.game-shell:has(#battle-table:not([hidden])) .pile-hint {
  display: none;
}
.game-shell:has(#battle-table:not([hidden])) .battle .card-back {
  width: 26px;
  height: 38px;
  margin-left: -11px;
}
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
  /* Keep selected cards (translateY -10px) visible, scroll instead of page overflow */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 4px 6px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
  min-height: 64px;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  min-width: 100%;
  padding: 0 2px;
  gap: 3px;
  box-sizing: border-box;
}
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
  gap: 0;
  padding: 2px;
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
}
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
  width: 48px;
  height: 68px;
  font-size: .9rem;
  margin-left: -14px;
  flex: 0 0 auto;
}
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
  font-size: 1.05rem;
}
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group .pcard:first-child {
  margin-left: 0;
}

@media (max-width: 640px) {
  .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    max-width: 230px;
    gap: 6px;
  }
  .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 44px;
    height: 64px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .card-back {
    width: 24px;
    height: 34px;
    margin-left: -11px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    min-height: 0;
    gap: 5px 6px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 28px;
    height: 40px;
    font-size: .58rem;
    margin-left: -5px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: .7rem;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    padding: 3px 4px 4px;
  }
}

@media (min-width: 900px) {
  .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 64px;
    height: 90px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .card-back {
    width: 30px;
    height: 42px;
    margin-left: -12px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    min-height: 80px;
  }
  /* Desktop: grow cards — do not shrink with width */
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 54px;
    height: 76px;
    font-size: .92rem;
    margin-left: -8px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: 1.1rem;
  }
}
.game-shell:has(#battle-table:not([hidden])) .battle .avatar {
  width: 40px;
  height: 40px;
}
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left .avatar,
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right .avatar {
  width: 58px;
  height: 58px;
}
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float {
  padding: 3px 8px;
  gap: 6px;
}
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left,
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right {
  padding: 10px 8px 8px;
  gap: 5px;
  max-width: 132px;
}
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float .seat-name,
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float .seat-status {
  overflow: visible;
  text-overflow: unset;
}
@media (max-width: 760px) {
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right {
    max-width: none;
    width: 100%;
  }
}
.game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom {
  margin: 8px auto 4px;
  padding: 6px 12px;
  max-width: min(100%, 420px);
}
.game-shell:has(#battle-table:not([hidden])) .player-avatar-col {
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
.game-shell:has(#battle-table:not([hidden])) .seat-clock {
  min-height: 0;
}
.game-shell:has(#battle-table:not([hidden])) .seat-clock #turn-clock {
  font-size: .78rem;
}
.game-shell:has(#battle-table:not([hidden])) .seat-clock-sub {
  display: none;
}
.game-shell:has(#battle-table:not([hidden])) .battle .hud-stat {
  min-height: 26px;
  padding: 3px 8px;
  font-size: .72rem;
}
.game-shell:has(#battle-table:not([hidden])) .player-rail {
  margin-top: 0;
  padding: 6px 8px 10px;
}
.game-shell:has(#battle-table:not([hidden])) .meld-hint {
  margin: 0 0 4px;
  font-size: .76rem;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.game-shell:has(#battle-table:not([hidden])) .game-actions {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.game-shell:has(#battle-table:not([hidden])) .game-actions .btn {
  min-height: 40px;
  padding: 8px 10px;
  font-size: .82rem;
  flex: 1 1 auto;
}
.game-shell:has(#battle-table:not([hidden])) .game-msg {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: .76rem;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* —— Mobile live match (phone widths) —— */
@media (max-width: 767px) {
  /* Flex stack: header → table → action rail. No fixed rail / no reserved padding gaps. */
  body.is-playing.play {
    display: flex;
    flex-direction: column;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding: 0 !important;
  }
  body.is-playing.play .site-header {
    flex-shrink: 0;
    padding-top: 2px;
    padding-bottom: 0;
    margin: 0;
    border-bottom: 1px solid rgba(251, 191, 36, .14);
    box-shadow: none;
  }
  body.is-playing.play .site-header > .wrap.header-row {
    padding-top: 6px;
    padding-bottom: 0;
    gap: 2px;
    min-height: 0;
  }
  body.is-playing.play .site-header .logo {
    font-size: .9rem !important;
    gap: 6px;
  }
  body.is-playing.play .site-header .logo-mark {
    width: 28px;
    height: 28px;
    font-size: 12px !important;
  }
  body.is-playing.play .site-header .nav {
    margin: 2px 0 0;
    padding: 2px 0 4px;
  }
  body.is-playing.play .site-header .nav a {
    padding: 4px 2px;
    font-size: .72rem;
    min-height: 30px;
  }
  /* Beat main#main { padding: 28px 0 56px } and flex:1 0 auto */
  body.is-playing.play main#main.game-shell,
  body.is-playing.play .game-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none;
    height: auto;
    justify-content: flex-start;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.is-playing.play .game-shell > .wrap {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body.is-playing.play #battle-table,
  body.is-playing #battle-table,
  .game-shell:has(#battle-table:not([hidden])) #battle-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 2px 4px 2px;
    border-radius: 12px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard {
    flex-shrink: 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .table-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .battle {
    padding: 2px;
    border-radius: 12px;
    margin: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard {
    width: 100%;
    margin: 0 auto 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-screen.battle-hud {
    padding: 2px 2px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px 3px;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard .led-label {
    font-size: .42rem;
    letter-spacing: .04em;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard .led-value {
    font-size: .66rem;
  }
  body.is-playing.play .lang-toggle {
    display: none; /* avoid overlapping the live scoreboard on narrow phones */
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .ai-row {
    display: none; /* side seats already show Priya/Arjun — drop duplicate mini-hands */
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .card-back {
    width: 16px;
    height: 22px;
    margin-left: -8px;
  }
  .game-shell:has(#battle-table:not([hidden])) .board-arena {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(140px, 1fr) auto;
    grid-template-areas:
      "seat-l seat-r"
      "felt felt"
      "you you";
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 6px;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    justify-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  .game-shell:has(#battle-table:not([hidden])) .board-arena .side-rail.left {
    grid-area: seat-l;
    align-self: center;
    justify-self: start;
  }
  .game-shell:has(#battle-table:not([hidden])) .board-arena .side-rail.right {
    grid-area: seat-r;
    align-self: center;
    justify-self: end;
  }
  .game-shell:has(#battle-table:not([hidden])) .board-arena .felt-table {
    grid-area: felt;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 140px;
    max-height: none;
  }
  .game-shell:has(#battle-table:not([hidden])) .board-arena .seat-float.bottom {
    grid-area: you;
    justify-self: center;
    align-self: center;
  }
  .game-shell:has(#battle-table:not([hidden])) .felt-table {
    --rim: 6px;
    --table-radius: 18px;
    width: 100%;
    height: 100%;
    min-height: 160px;
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    padding: 4px 4px 4px;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    justify-content: flex-start;
  }
  .game-shell:has(#battle-table:not([hidden])) .player-rail {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 60;
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* Extra bottom inset so Draw/Take/Discard clear home-indicator / browser chrome */
    padding: 4px 8px max(18px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(4, 24, 16, .98), #041810);
    border-top: 1px solid rgba(251, 191, 36, .4);
    border-radius: 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .4);
  }
  .game-shell:has(#battle-table:not([hidden])) .meld-hint {
    font-size: .58rem;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-msg {
    display: none; /* meld-hint already covers live status on phones */
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    margin: 0;
    padding: 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 32px;
    height: 44px;
  }
  .game-shell:has(#battle-table:not([hidden])) .pile {
    min-width: 58px;
    padding: 3px 5px 4px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    margin: auto 0 0; /* pin hand to bottom of felt — kill dead gap above action rail */
    padding: 2px 0 0;
    min-height: 88px;
    box-sizing: border-box;
    overflow: visible;
    border-top: 1px solid rgba(251, 191, 36, .18);
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand-scroll {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 1px 4px;
    overflow: visible;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    align-content: flex-end;
    gap: 5px 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    flex: 0 0 auto;
    min-width: max-content;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 3px 4px 4px;
    gap: 0;
    overflow: visible;
    box-sizing: border-box;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    flex: 0 0 auto;
    width: 28px;
    height: 40px;
    font-size: .58rem;
    margin-left: -5px;
    overflow: visible;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group .pcard:first-child {
    margin-left: 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: .7rem;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected,
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-4px);
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    max-width: none;
    width: auto;
    box-sizing: border-box;
    border-radius: 999px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right {
    flex-direction: row-reverse;
    text-align: right;
    padding: 4px 4px 4px 8px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left .avatar,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right .avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left .avatar img,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right .avatar img,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float .seat-meta {
    min-width: 0;
    width: 100%;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float .seat-name {
    font-size: .68rem;
    line-height: 1.15;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float .seat-status {
    font-size: .55rem;
    line-height: 1.15;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left .hud-stat,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right .hud-stat,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left .side-mini-hand,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right .side-mini-hand {
    display: none; /* LED already shows card/chip counts */
  }
  /* Player seat sits under felt, centered between side avatars */
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    max-width: min(100%, 260px);
    margin: 0;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom .avatar {
    width: 36px;
    height: 36px;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom .hud-stat {
    display: none; /* chips/hand already on LED */
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom .seat-clock {
    min-width: 28px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom .seat-clock #turn-clock {
    font-size: .72rem;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions > * {
    min-width: 0;
    max-width: 100%;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    margin: 0;
    padding: 0 4px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-width: 1.5px;
    border-style: solid;
    border-radius: 10px;
    box-shadow: none !important;
    transform: none !important;
    filter: none;
    transition: background .15s ease, color .15s ease, opacity .15s ease, border-color .15s ease;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions .discard-slot {
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
    height: 38px;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-take,
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard {
    background: rgba(7, 26, 20, .95);
    border-color: rgba(251, 191, 36, .75);
    color: #fcd34d;
  }
  /* Host offer Yes/No must NOT inherit the compact action-rail btn sizing */
  .game-shell:has(#battle-table:not([hidden])) .game-actions .host-offer .btn {
    width: auto;
    max-width: none;
    flex: 1 1 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 10px;
    font-size: .82rem;
    font-weight: 800;
    overflow: visible;
    text-overflow: clip;
    box-shadow: none !important;
    transform: none !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions .btn:active,
  .game-shell:has(#battle-table:not([hidden])) .game-actions .btn:hover {
    transform: none !important;
    filter: none;
    box-shadow: none !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions .btn:disabled {
    opacity: .5;
    filter: none;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard.host-wait,
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard.turn-wait {
    font-weight: 800;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-hint {
    display: none; /* frees space on phones; tip stays in meld-hint */
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-restart {
    display: none; /* frees fold space; start screen still offers a new match */
  }
  /* Short stable labels — equal cells, no wrap when state/text change */
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-draw {
    font-size: 0 !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-draw::after {
    content: "Draw";
    font-size: .7rem;
    font-weight: 800;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-take {
    font-size: 0 !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-take::after {
    content: "Take";
    font-size: .7rem;
    font-weight: 800;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard {
    font-size: 0 !important;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard::after {
    content: "Discard";
    font-size: .7rem;
    font-weight: 800;
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard[data-i18n="btn.cancel_host"]::after {
    content: "Cancel";
  }
  /* Hindi labels for CSS-masked action buttons (mobile) */
  html[data-lang="hi"] .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-draw::after {
    content: "ड्रॉ";
  }
  html[data-lang="hi"] .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-take::after {
    content: "लें";
  }
  html[data-lang="hi"] .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard::after {
    content: "डिस्कार्ड";
  }
  html[data-lang="hi"] .game-shell:has(#battle-table:not([hidden])) .game-actions #btn-discard[data-i18n="btn.cancel_host"]::after {
    content: "रद्द";
  }
  /* Host / AI-hosting prompt — centered on phones */
  .game-shell:has(#battle-table:not([hidden])) .host-offer {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(280px, calc(100vw - 32px));
    z-index: 90;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .55));
  }
  .game-shell:has(#battle-table:not([hidden])) .host-offer.open {
    animation: hostPopCenter .28s ease;
  }
  .game-shell:has(#battle-table:not([hidden])) .host-offer-card {
    padding: 14px 14px 12px;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .game-shell:has(#battle-table:not([hidden])) .host-offer-card::after {
    display: none; /* no discard-pointer arrow when centered */
  }
  .game-shell:has(#battle-table:not([hidden])) .host-title {
    font-size: 1rem;
    margin: 0 0 6px;
  }
  .game-shell:has(#battle-table:not([hidden])) .host-body {
    font-size: .82rem;
    line-height: 1.4;
    margin: 0 0 12px;
  }
  .game-shell:has(#battle-table:not([hidden])) .host-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle-art,
  .game-shell:has(#battle-table:not([hidden])) .board-outer-art,
  .game-shell:has(#battle-table:not([hidden])) .felt-corner-img,
  .game-shell:has(#battle-table:not([hidden])) .felt-chips,
  .game-shell:has(#battle-table:not([hidden])) .pile-ornament {
    display: none !important;
  }
}

/* Short embedded-browser / laptop viewports: keep actions reachable with less scroll */
@media (max-height: 760px) {
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard {
    margin-bottom: 2px;
  }
  .game-shell:has(#battle-table:not([hidden])) .board-arena {
    margin-bottom: 2px;
  }
  .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    padding: 8px 12px 14px;
    gap: 6px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    margin-bottom: 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.bottom {
    margin: 4px auto 2px;
  }
  .game-shell:has(#battle-table:not([hidden])) .player-rail {
    padding: 4px 8px max(18px, env(safe-area-inset-bottom, 0px));
  }
  .game-shell:has(#battle-table:not([hidden])) .battle-art,
  .game-shell:has(#battle-table:not([hidden])) .board-outer-art {
    display: none;
  }
}

/* Very short panels (Cursor embedded browser, landscape phones): compress felt so actions stay on-screen */
@media (max-width: 767px) and (max-height: 640px) {
  body.is-playing.play .site-header {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-screen.battle-hud {
    padding: 1px 2px;
    gap: 0 2px;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard .led-label {
    font-size: .38rem;
  }
  .game-shell:has(#battle-table:not([hidden])) .led-scoreboard .led-value {
    font-size: .58rem;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right {
    padding: 4px 6px;
    gap: 6px;
  }
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-left .avatar,
  .game-shell:has(#battle-table:not([hidden])) .battle .seat-float.side-right .avatar {
    width: 28px;
    height: 28px;
  }
  .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    padding: 4px 4px 4px;
    gap: 4px;
  }
  .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 26px;
    height: 36px;
  }
  .game-shell:has(#battle-table:not([hidden])) .pile {
    min-width: 52px;
    padding: 2px 4px 3px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    min-height: 0;
    padding: 2px 0 0;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 24px;
    height: 34px;
    font-size: .52rem;
    margin-left: -6px;
  }
  .game-shell:has(#battle-table:not([hidden])) .meld-hint {
    font-size: .55rem;
    margin: 0 0 2px;
    -webkit-line-clamp: 1;
  }
  .game-shell:has(#battle-table:not([hidden])) .player-rail {
    padding: 3px 8px max(16px, env(safe-area-inset-bottom, 0px));
  }
  .game-shell:has(#battle-table:not([hidden])) .game-actions .btn,
  .game-shell:has(#battle-table:not([hidden])) .game-actions .discard-slot {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }
}

/* Taller phones: slightly larger on-felt faces once fold space allows */
@media (max-width: 767px) and (min-height: 720px) {
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    min-height: 112px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 32px;
    height: 46px;
    font-size: .64rem;
    margin-left: -5px;
  }
  .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: .78rem;
  }
}

/* —— Indian casino micro-UI (CSS only) —— */
.cchip {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 248, 220, .85);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .18),
    0 3px 6px rgba(0, 0, 0, .35);
  position: relative;
  flex-shrink: 0;
}
.cchip::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
}
.cchip.mini {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, .15),
    0 2px 4px rgba(0, 0, 0, .3);
}
.cchip.mini::after { inset: 3px; }
.cchip.red { background: radial-gradient(circle at 35% 30%, #f87171, #b91c1c 70%); }
.cchip.blue { background: radial-gradient(circle at 35% 30%, #6ee7b7, #0a6b50 70%); }
.cchip.green { background: radial-gradient(circle at 35% 30%, #34d399, #047857 70%); }
.cchip.gold { background: radial-gradient(circle at 35% 30%, #fde68a, #d97706 70%); }

.casino-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.casino-paisley {
  position: absolute;
  width: 72px;
  height: 96px;
  opacity: .38;
  background:
    radial-gradient(ellipse 55% 40% at 50% 28%, rgba(251, 191, 36, .55), transparent 70%),
    radial-gradient(ellipse 40% 55% at 48% 62%, rgba(251, 191, 36, .35), transparent 72%),
    radial-gradient(circle at 50% 18%, rgba(253, 224, 71, .7) 0 3px, transparent 4px);
  border-radius: 50% 50% 48% 52% / 60% 60% 40% 40%;
  border: 1px solid rgba(251, 191, 36, .28);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, .2));
}
.casino-paisley.pl { left: 10px; top: 18%; transform: rotate(-18deg); }
.casino-paisley.pr { right: 10px; top: 22%; transform: scaleX(-1) rotate(-14deg); }

.casino-coin {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff3c4, #fbbf24 45%, #b45309);
  border: 1px solid rgba(255, 236, 180, .7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: casinoFloat 4.8s ease-in-out infinite;
}
.casino-coin::after {
  content: "₹";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .62rem;
  font-weight: 900;
  color: #7c4a08;
  line-height: 1;
}
.casino-coin.c1 { left: 18%; top: 12%; animation-delay: 0s; }
.casino-coin.c2 { right: 16%; top: 38%; animation-delay: .8s; width: 18px; height: 18px; }
.casino-coin.c3 { left: 14%; bottom: 16%; animation-delay: 1.4s; width: 20px; height: 20px; }

@keyframes casinoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.casino-chip-stack {
  position: absolute;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.casino-chip-stack .cchip {
  margin-top: -14px;
}
.casino-chip-stack .cchip:first-child { margin-top: 0; }
.casino-chip-stack.left { left: 18px; }
.casino-chip-stack.right { right: 18px; }

.casino-lotus {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 48px;
  height: 28px;
  transform: translateX(-50%);
  opacity: .45;
  background:
    radial-gradient(ellipse 40% 70% at 50% 100%, rgba(251, 191, 36, .55), transparent 70%),
    radial-gradient(ellipse 28% 80% at 30% 90%, rgba(253, 224, 71, .4), transparent 70%),
    radial-gradient(ellipse 28% 80% at 70% 90%, rgba(253, 224, 71, .4), transparent 70%),
    radial-gradient(circle at 50% 72%, rgba(251, 191, 36, .7) 0 3px, transparent 4px);
}

.casino-diya {
  position: absolute;
  bottom: 22px;
  width: 14px;
  height: 18px;
  opacity: .55;
}
.casino-diya::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #fbbf24, #b45309);
  box-shadow: 0 0 10px rgba(251, 191, 36, .35);
}
.casino-diya::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 6px;
  height: 10px;
  margin-left: -3px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 30%, #fff7ed, #fbbf24 55%, transparent 75%);
  animation: diyaFlicker 2.2s ease-in-out infinite;
}
.casino-diya.dl { left: 28%; }
.casino-diya.dr { right: 28%; }

@keyframes diyaFlicker {
  0%, 100% { opacity: .85; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.08); }
}

.start-chip-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}

/* —— Start screen image art —— */
.start-art {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.start-art.mandala {
  left: 50%;
  top: 42%;
  width: min(72%, 280px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .2;
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, .25));
  animation: mandalaPulse 7s ease-in-out infinite;
}

.start-art.card-float {
  border-radius: 8px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(251, 191, 36, .4);
}
.start-art.card-float.left {
  left: 6%;
  top: 18%;
  width: 78px;
  height: auto;
  animation: cardFloatL 5s ease-in-out infinite;
}
.start-art.card-float.right {
  right: 6%;
  top: 22%;
  width: 78px;
  height: auto;
  animation: cardFloatR 5.2s ease-in-out infinite;
}
.start-art.card-float.mid-left {
  left: 4%;
  bottom: 22%;
  width: 52px;
  height: auto;
  opacity: .75;
  animation: cardFloatML 5.6s ease-in-out infinite;
}
.start-art.card-float.mid-right {
  right: 4%;
  bottom: 20%;
  width: 52px;
  height: auto;
  opacity: .75;
  animation: cardFloatMR 5.8s ease-in-out infinite;
}

@keyframes cardFloatL {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  50% { transform: rotate(-18deg) translateY(-8px); }
}
@keyframes cardFloatR {
  0%, 100% { transform: rotate(16deg) translateY(0); }
  50% { transform: rotate(16deg) translateY(-7px); }
}
@keyframes cardFloatML {
  0%, 100% { transform: rotate(12deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-6px); }
}
@keyframes cardFloatMR {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50% { transform: rotate(-14deg) translateY(-6px); }
}

.start-art.win-glow {
  right: 8%;
  bottom: 8%;
  width: 120px;
  height: auto;
  opacity: .22;
  border-radius: 14px;
  mask-image: linear-gradient(160deg, #000 30%, transparent 85%);
  -webkit-mask-image: linear-gradient(160deg, #000 30%, transparent 85%);
  filter: saturate(1.1) brightness(1.05);
}

.start-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}

.start-vs-seat {
  margin: 0;
  text-align: center;
}
.start-vs-seat img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(251, 191, 36, .65);
  box-shadow:
    0 0 0 3px rgba(6, 78, 59, .55),
    0 6px 14px rgba(0, 0, 0, .4);
  background: #064e3b;
  display: block;
}
.start-vs-seat.you img {
  width: 58px;
  height: 58px;
  border-color: #fbbf24;
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, .25),
    0 8px 18px rgba(0, 0, 0, .45);
}
.start-vs-seat figcaption {
  margin-top: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fcd34d;
  text-transform: uppercase;
}

.start-vs-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .62rem;
  font-weight: 900;
  color: #1a1205;
  background: linear-gradient(145deg, #fde68a, #d97706);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  flex-shrink: 0;
}

.start-art-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}
.start-art-row img {
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.start-art-row img:nth-child(1),
.start-art-row img:nth-child(3) {
  border: 1px solid rgba(251, 191, 36, .5);
  transform: rotate(-6deg);
}
.start-art-row img:nth-child(3) { transform: rotate(6deg); }
.start-art-row img:nth-child(2) {
  opacity: .85;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, .35));
  border-radius: 50%;
}

/* —— Battle image art —— */
.battle-art {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.battle-art.peacock {
  width: 58px;
  height: auto;
  border-radius: 7px;
  border: 1px solid rgba(251, 191, 36, .55);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .45),
    0 0 16px rgba(251, 191, 36, .2);
  opacity: .78;
}
.battle-art.peacock.left {
  left: 10px;
  top: 14%;
  animation: cardFloatL 5.4s ease-in-out infinite;
}
.battle-art.peacock.right {
  right: 10px;
  top: 16%;
  animation: cardFloatR 5.6s ease-in-out infinite;
}

.battle-art.mandala-side {
  left: 50%;
  top: 8%;
  width: 96px;
  height: auto;
  transform: translateX(-50%);
  opacity: .16;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, .2));
}

.battle-art.ambience {
  right: 4%;
  bottom: 6%;
  width: 110px;
  height: auto;
  opacity: .18;
  border-radius: 12px;
  mask-image: linear-gradient(200deg, #000 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 90%);
}

.start-screen::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  border: 1px solid rgba(251, 191, 36, .14);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(251, 191, 36, .2), transparent 18%, transparent 82%, rgba(251, 191, 36, .2)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(251, 191, 36, .2), transparent 18%, transparent 82%, rgba(251, 191, 36, .2)) bottom / 100% 1px no-repeat;
}

.battle-ornaments {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.battle-paisley {
  position: absolute;
  width: 56px;
  height: 74px;
  opacity: .28;
  background:
    radial-gradient(ellipse 55% 40% at 50% 28%, rgba(251, 191, 36, .5), transparent 70%),
    radial-gradient(ellipse 40% 55% at 48% 62%, rgba(251, 191, 36, .3), transparent 72%);
  border-radius: 50% 50% 48% 52% / 60% 60% 40% 40%;
  border: 1px solid rgba(251, 191, 36, .22);
}
.battle-paisley.bl { left: 8px; bottom: 12%; transform: rotate(12deg); }
.battle-paisley.br { right: 8px; bottom: 14%; transform: scaleX(-1) rotate(10deg); }

.battle-coin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #fbbf24 50%, #b45309);
  border: 1px solid rgba(255, 236, 180, .65);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  animation: casinoFloat 5.2s ease-in-out infinite;
  opacity: .85;
}
.battle-coin.bc1 { left: 8%; top: 18%; animation-delay: .2s; }
.battle-coin.bc2 { right: 7%; top: 28%; animation-delay: 1s; }
.battle-coin.bc3 { left: 6%; bottom: 22%; animation-delay: 1.6s; width: 14px; height: 14px; }

.battle-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 4px;
}

.battle-table-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fcd34d;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(251, 191, 36, .35);
}

.felt-chips {
  position: absolute;
  top: 42%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1;
  opacity: .7;
}
.felt-chips.left { left: 10px; transform: rotate(-12deg); }
.felt-chips.right { right: 10px; transform: rotate(12deg); }
.felt-chips .cchip.mini { margin-left: 0; }

.india-parlor .led-panel::before {
  content: "◆";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  color: #fbbf24;
  font-size: .55rem;
  opacity: .7;
  z-index: 2;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .casino-coin,
  .battle-coin,
  .casino-diya::after,
  .outer-coin,
  .outer-diya::before,
  .start-art.card-float,
  .start-art.mandala,
  .battle-art.peacock,
  .felt-mandala-img,
  .pile-center-gem img {
    animation: none;
  }
}

@media (max-width: 640px) {
  .casino-paisley { width: 48px; height: 64px; opacity: .28; }
  .casino-chip-stack { display: none; }
  .casino-diya { display: none; }
  .casino-coin.c2,
  .casino-coin.c3 { display: none; }
  .battle-paisley { display: none; }
  .felt-chips { opacity: .45; }
  .felt-chips .cchip.mini:nth-child(3) { display: none; }
  .battle-table-tag { font-size: .65rem; padding: 3px 8px; }

  .start-art.card-float.mid-left,
  .start-art.card-float.mid-right,
  .start-art.win-glow { display: none; }
  .start-art.card-float.left,
  .start-art.card-float.right { width: 54px; opacity: .7; }
  .start-art.mandala { width: min(80%, 200px); opacity: .16; }
  .start-vs { gap: 4px; margin-bottom: 12px; }
  .start-vs-seat img { width: 44px; height: 44px; }
  .start-vs-seat.you img { width: 48px; height: 48px; }
  .start-vs-badge { width: 24px; height: 24px; font-size: .55rem; }
  .start-art-row { gap: 10px; }
  .start-art-row img:nth-child(1),
  .start-art-row img:nth-child(3) { width: 36px; height: auto; }
  .start-art-row img:nth-child(2) { width: 42px; height: 42px; }

  .battle-art.peacock { width: 42px; opacity: .4; }
  .battle-art.ambience,
  .battle-art.mandala-side { display: none; }
  .felt-corner-img.bl,
  .felt-corner-img.br { display: none; }
  .felt-corner-img.tl,
  .felt-corner-img.tr { width: 30px; opacity: .35; }
  .pile-ornament { display: none; }
  .pile-center-gem img { width: 36px; height: 36px; }
  .battle .table-mid { max-width: 100%; gap: 6px; }
}

.game-shell:has(#battle-table:not([hidden])) .battle-ornaments .battle-coin {
  opacity: .55;
}
.game-shell:has(#battle-table:not([hidden])) .battle-table-tag {
  display: none;
}

/* ============================================================================
   MOBILE PRO TABLE UI — body.is-playing only
   Less dashboard, more cards / touch UX
   ============================================================================ */
@media (max-width: 767px) {
  /* —— 1. Game header: Back + Rummy + Settings —— */
  body.is-playing.play .site-header {
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(251, 191, 36, .16);
    background: #041810;
  }
  body.is-playing.play .site-header > .wrap.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 0 10px !important;
    margin: 0;
    gap: 8px;
    position: relative;
  }
  body.is-playing.play .site-header .logo,
  body.is-playing.play .site-header .lang-toggle,
  body.is-playing.play .site-header .nav-play,
  body.is-playing.play .site-header .nav-dl,
  body.is-playing.play .site-header .nav-btn,
  body.is-playing.play .site-header .nav-toggle,
  body.is-playing.play .site-header .nav {
    display: none !important;
  }
  body.is-playing.play .play-back {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: #f8e7b0;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: .01em;
    padding: 8px 4px;
    min-height: 44px;
  }
  body.is-playing.play .play-settings {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid rgba(251, 191, 36, .35);
    border-radius: 10px;
    background: rgba(7, 26, 20, .9);
    color: #fcd34d;
    font-size: 1.1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.is-playing.play .play-settings-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    right: 10px;
    z-index: 80;
    min-width: 160px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, .4);
    background: #062218;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  }
  body.is-playing.play .play-settings-menu[hidden] {
    display: none !important;
  }
  body.is-playing.play .play-settings-item {
    appearance: none;
    border: 0;
    background: transparent;
    color: #f4efe4;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
  }
  body.is-playing.play .play-settings-item:active {
    background: rgba(251, 191, 36, .12);
  }

  /* —— 2. Compact top HUD —— */
  body.is-playing .battle-top,
  body.is-playing #turn-banner,
  body.is-playing .led-cables {
    display: none !important;
  }
  body.is-playing .led-scoreboard {
    margin: 0 0 4px !important;
    width: 100%;
  }
  body.is-playing .led-panel {
    border-radius: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  body.is-playing .led-screen.battle-hud {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px !important;
    min-height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, .22);
    background: rgba(4, 24, 16, .72);
  }
  body.is-playing .led-screen.battle-hud .hud-stat {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(2),
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(6) {
    display: flex !important;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
  }
  body.is-playing .led-scoreboard .led-label {
    font-size: .55rem !important;
    letter-spacing: .06em;
    opacity: .75;
  }
  body.is-playing .led-scoreboard .led-value {
    font-size: .78rem !important;
    font-weight: 800;
    animation: none !important;
  }
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1) .led-label {
    display: none; /* show time value only: 04:18 */
  }
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(5) {
    display: none !important; /* deadwood moves to tip badge */
  }

  /* —— 3. Opponent avatars (top row, not cards) —— */
  body.is-playing .board-arena {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "seat-l seat-r"
      "felt felt" !important;
    row-gap: 4px !important;
    column-gap: 8px !important;
    padding: 0 8px !important;
    align-items: start !important;
  }
  body.is-playing .board-arena .side-rail.left {
    justify-self: start !important;
  }
  body.is-playing .board-arena .side-rail.right {
    justify-self: end !important;
  }
  body.is-playing .battle .seat-float.side-left,
  body.is-playing .battle .seat-float.side-right {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    gap: 2px !important;
    max-width: none !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  body.is-playing .battle .seat-float.side-right {
    flex-direction: column !important;
    text-align: center !important;
    padding: 0 !important;
  }
  body.is-playing .battle .seat-float.side-left .avatar,
  body.is-playing .battle .seat-float.side-right .avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  }
  body.is-playing .battle .seat-float.side-left .seat-meta,
  body.is-playing .battle .seat-float.side-right .seat-meta {
    width: auto !important;
  }
  body.is-playing .battle .seat-float.side-left .seat-meta,
  body.is-playing .battle .seat-float.side-right .seat-meta {
    width: auto !important;
  }
  body.is-playing .battle .seat-float .seat-name {
    font-size: .78rem !important; /* ~12.5px */
    font-weight: 700;
    color: #f4efe4;
  }
  body.is-playing .battle .seat-float .seat-status {
    font-size: .66rem !important; /* ~10.5px */
    color: rgba(167, 196, 182, .9);
  }

  /* —— 4. Deck / Discard compact —— */
  body.is-playing .battle .table-mid {
    gap: 28px !important;
    align-items: center !important;
    padding: 2px 0 4px !important;
    margin: 0 !important;
  }
  body.is-playing .pile {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  body.is-playing .pile .pile-label {
    font-size: 0 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(252, 211, 77, .9);
    margin: 0;
  }
  body.is-playing #pile-stock .pile-label::after {
    content: "DRAW";
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
  }
  body.is-playing #pile-discard .pile-label::after {
    content: "DISCARD";
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
  }
  html[data-lang="hi"] body.is-playing #pile-stock .pile-label::after {
    content: "ड्रॉ";
  }
  html[data-lang="hi"] body.is-playing #pile-discard .pile-label::after {
    content: "डिस्कार्ड";
  }
  body.is-playing .pile .pile-count,
  body.is-playing .pile .pile-hint {
    display: none !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 54px !important;
    height: 76px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  }
  body.is-playing .discard-visual.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    color: rgba(167, 196, 182, .7);
    background: rgba(0, 0, 0, .25);
    border: 1px dashed rgba(251, 191, 36, .3);
  }
  body.is-playing .pile-center-gem {
    display: none !important;
  }

  /* —— 5. Felt pattern quieter on hand —— */
  body.is-playing .felt-mandala,
  body.is-playing .felt-mandala-img {
    opacity: .06 !important;
  }
  body.is-playing .hand-stage.on-felt {
    position: relative;
    z-index: 3;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 auto !important;
    min-height: 120px !important;
    margin: 0 !important;
    padding: 6px 2px 4px !important;
    border-top: 0 !important;
    overflow: visible !important;
  }
  body.is-playing .hand-stage.on-felt::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(4, 24, 16, .35);
    pointer-events: none;
    z-index: 0;
  }
  body.is-playing .hand-stage.on-felt .hand-scroll,
  body.is-playing .hand-stage.on-felt .hand {
    position: relative;
    z-index: 1;
  }

  /* —— 6–9. Hand groups + cards —— */
  body.is-playing .hand-stage.on-felt .hand {
    gap: 10px !important;
    align-content: flex-end !important;
    justify-content: center !important;
    padding: 8px 2px 4px !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group {
    gap: 3px !important;
    padding: 4px 5px 6px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, .18) !important;
    border: 1px solid rgba(243, 209, 107, .16) !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group.valid-pure,
  body.is-playing .hand-stage.on-felt .suit-group.valid-impure,
  body.is-playing .hand-stage.on-felt .suit-group.valid-set {
    border-bottom: 2px solid rgba(52, 211, 153, .6) !important;
    background: rgba(16, 185, 129, .07) !important;
  }
  body.is-playing .hand-stage.on-felt .pcard {
    width: 36px !important;
    height: 52px !important;
    margin-left: 0 !important; /* no unclickable overlap */
    border-radius: 8px !important;
    font-size: .72rem !important;
    background: #fbf8f0 !important;
    border: 1.5px solid #d9d0bc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }
  body.is-playing .hand-stage.on-felt .pcard .suit {
    font-size: .85rem !important;
  }
  body.is-playing .hand-stage.on-felt .pcard.selected,
  body.is-playing .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-10px) !important;
    border-color: #d4af37 !important;
    box-shadow:
      0 0 0 2px rgba(212, 175, 55, .5),
      0 10px 18px rgba(0, 0, 0, .4) !important;
    z-index: 6;
  }
  body.is-playing .hand-stage.on-felt .pcard.joker {
    border-color: #d4af37 !important;
    background: linear-gradient(180deg, #fff9e8, #fbf8f0) !important;
  }

  /* —— 10. YOUR TURN compact bar above hand —— */
  body.is-playing .felt-inner > .seat-float.bottom {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin: 2px 0 4px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(251, 191, 36, .35) !important;
    background: rgba(4, 24, 16, .88) !important;
    box-shadow: none !important;
    gap: 0 !important;
  }
  body.is-playing .felt-inner > .seat-float.bottom .player-avatar-col,
  body.is-playing .felt-inner > .seat-float.bottom .seat-meta,
  body.is-playing .felt-inner > .seat-float.bottom .hud-stat {
    display: none !important;
  }
  body.is-playing .felt-inner > .seat-float.bottom .turn-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #f4efe4;
  }
  body.is-playing .turn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, .25);
  }
  body.is-playing .turn-secs {
    margin-left: auto;
    color: #fcd34d;
    font-variant-numeric: tabular-nums;
  }
  body.is-playing .seat-float.bottom:not(.active) .turn-label {
    opacity: .7;
  }
  body.is-playing .seat-float.bottom:not(.active) .turn-dot {
    background: #64748b;
    box-shadow: none;
  }
  body.is-playing .seat-float.bottom.warn-10 {
    border-color: rgba(251, 191, 36, .7) !important;
  }
  body.is-playing .seat-float.bottom.warn-5 {
    border-color: rgba(251, 146, 60, .85) !important;
  }
  body.is-playing .seat-float.bottom.warn-3 {
    border-color: rgba(248, 113, 113, .9) !important;
  }
  body.is-playing .seat-float.bottom.warn-3 .turn-secs {
    color: #fca5a5;
  }

  /* —— 11–13. Tip + Action bar + safe area —— */
  body.is-playing .player-rail {
    padding: 6px 10px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(4, 24, 16, .96), #03140e) !important;
  }
  body.is-playing .tip-row {
    margin: 0 0 6px !important;
    align-items: flex-start;
  }
  body.is-playing .tip-row .meld-hint {
    font-size: .72rem !important; /* ~11.5px */
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ffe2a8 !important;
  }
  body.is-playing .deadwood-badge {
    font-size: .62rem !important;
    padding: 4px 8px !important;
  }
  body.is-playing .game-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
  body.is-playing .game-actions .btn {
    border-radius: 12px !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
  }
  body.is-playing .game-actions #btn-draw {
    background: #0f766e !important;
    border-color: #14b8a6 !important;
    color: #ecfdf5 !important;
  }
  body.is-playing .game-actions #btn-draw:not(:disabled) {
    background: #0d9488 !important;
  }
  body.is-playing .game-actions #btn-take,
  body.is-playing .game-actions #btn-discard {
    background: #062218 !important;
    border-color: rgba(251, 191, 36, .75) !important;
    color: #fcd34d !important;
  }
  body.is-playing .game-actions #btn-discard.discard-ready:not(:disabled) {
    background: #0b3d2e !important;
    border-color: #fbbf24 !important;
    color: #fff7d6 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .35) !important;
  }
  body.is-playing .game-actions #btn-draw::after {
    content: "DRAW" !important;
    font-size: .78rem !important;
  }
  body.is-playing .game-actions #btn-take::after {
    content: "TAKE" !important;
    font-size: .78rem !important;
  }
  body.is-playing .game-actions #btn-discard::after {
    content: "DISCARD" !important;
    font-size: .78rem !important;
  }
  body.is-playing .game-actions #btn-discard[data-i18n="btn.cancel_host"]::after {
    content: "CANCEL";
  }
  html[data-lang="hi"] body.is-playing .game-actions #btn-draw::after {
    content: "ड्रॉ" !important;
  }
  html[data-lang="hi"] body.is-playing .game-actions #btn-take::after {
    content: "लें" !important;
  }
  html[data-lang="hi"] body.is-playing .game-actions #btn-discard::after {
    content: "डिस्कार्ड" !important;
  }
  html[data-lang="hi"] body.is-playing .game-actions #btn-discard[data-i18n="btn.cancel_host"]::after {
    content: "रद्द" !important;
  }

  /* Feel: enlarge hand zone share of table */
  body.is-playing .felt-inner {
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 2px 4px 4px !important;
  }
  body.is-playing .felt-table {
    min-height: 0 !important;
  }
}

/* Narrow phones: keep 13 cards tappable */
@media (max-width: 374px) {
  body.is-playing .hand-stage.on-felt .pcard {
    width: 32px !important;
    height: 46px !important;
    font-size: .64rem !important;
  }
  body.is-playing .hand-stage.on-felt .hand {
    gap: 8px !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 48px !important;
    height: 68px !important;
  }
}

/* Wide phones */
@media (min-width: 400px) and (max-width: 767px) {
  body.is-playing .hand-stage.on-felt .pcard {
    width: 40px !important;
    height: 56px !important;
    font-size: .78rem !important;
  }
}

/* —— Deal animation: prevent mobile horizontal overflow —— */
.hand.dealing .dealing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body.is-dealing,
  body.is-dealing.play,
  body.is-dealing.is-playing.play {
    overflow: hidden !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body.is-dealing .game-shell,
  body.is-dealing .game-shell > .wrap,
  body.is-dealing #battle-table,
  body.is-dealing .table-stage,
  body.is-dealing .board-arena,
  body.is-dealing .felt-table,
  body.is-dealing .felt-inner,
  body.is-dealing .hand-stage.on-felt,
  body.is-dealing .hand-scroll,
  body.is-dealing .hand,
  body.is-dealing .hand.dealing {
    overflow: hidden !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.is-dealing .hand.dealing .dealing-row,
  .hand.dealing .dealing-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 2px 3px !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  body.is-dealing .hand.dealing .dealing-row .pcard,
  .hand.dealing .dealing-row .pcard {
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 40px !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  body.is-dealing .hand-stage.on-felt .suit-group,
  body.is-dealing .hand.dealing .suit-group {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.is-dealing .deal-fly {
    max-width: 40px;
    max-height: 56px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  }
  body.is-dealing .pcard.deal-flipping {
    animation: dealFlipOpenMobile .42s ease forwards;
  }
}

@keyframes dealFlipOpenMobile {
  0% { transform: rotateY(0deg); }
  45% { transform: rotateY(90deg) scale(1.02); }
  55% { transform: rotateY(90deg) scale(1.02); }
  100% { transform: rotateY(0deg); }
}

/* ============================================================================
   MOBILE ROUND 2 — Less container / border / decoration, more card & clarity
   ============================================================================ */
@media (max-width: 767px) {
  /* Soften outer battle chrome — full width, no side margin (avoids 100%+margin overflow) */
  body.is-playing #battle-table.battle,
  body.is-playing.play #battle-table {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 6px 2px !important;
    background:
      linear-gradient(165deg, #0a3d30 0%, #071a14 50%, #04110d 100%) !important;
  }
  body.is-playing.play .game-shell > .wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  body.is-playing .board-arena {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  body.is-playing #battle-table.battle::before,
  body.is-playing #battle-table.battle::after,
  body.is-playing .felt-table::before,
  body.is-playing .felt-table::after {
    display: none !important;
  }
  body.is-playing .felt-table {
    --rim: 0px !important;
    --table-radius: 14px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body.is-playing .felt-inner {
    border-radius: 12px !important;
    padding: 2px 4px 2px !important;
    gap: 2px !important;
    box-shadow: none !important;
    border: 0 !important;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .04), transparent 42%),
      url("../images/felt-india-pattern.webp") center / 200px repeat,
      linear-gradient(165deg, #0c5a38, #08422a 55%, #063522) !important;
  }
  body.is-playing .felt-mandala,
  body.is-playing .felt-mandala-img {
    opacity: .1 !important; /* table pattern ~0.08–0.12 */
  }

  /* Settings: less gold chrome */
  body.is-playing.play .play-settings {
    border-color: rgba(255, 255, 255, .18) !important;
    color: rgba(244, 239, 228, .9) !important;
    background: rgba(4, 24, 16, .55) !important;
  }
  body.is-playing.play .play-settings-menu {
    border-color: rgba(255, 255, 255, .14) !important;
  }
  body.is-playing.play .site-header {
    border-bottom-color: rgba(255, 255, 255, .08) !important;
  }

  /* Stats: soft, no gold card */
  body.is-playing .led-scoreboard {
    margin: 0 0 2px !important;
  }
  body.is-playing .led-screen.battle-hud {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 22px !important;
    padding: 2px 6px !important;
    gap: 8px !important;
  }
  body.is-playing .led-scoreboard .led-label {
    font-size: .58rem !important; /* ~9–10px */
    letter-spacing: .05em;
    opacity: .55 !important;
    color: rgba(167, 196, 182, .85) !important;
  }
  body.is-playing .led-scoreboard .led-value {
    font-size: .82rem !important; /* ~13px */
    font-weight: 700;
    color: rgba(244, 239, 228, .92) !important;
  }
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1) .led-value {
    font-size: .95rem !important; /* timer ~15px */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* Opponents: no card; active gold ring + green status */
  body.is-playing .board-arena {
    row-gap: 2px !important;
    padding: 0 6px !important;
  }
  body.is-playing .battle .seat-float.side-left .avatar,
  body.is-playing .battle .seat-float.side-right .avatar {
    width: 46px !important;
    height: 46px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3) !important;
    border: 1.5px solid rgba(255, 255, 255, .12) !important;
  }
  body.is-playing .battle .seat-float.side-left.active .avatar,
  body.is-playing .battle .seat-float.side-right.active .avatar {
    border-color: #d4af37 !important;
    box-shadow:
      0 0 0 2px rgba(212, 175, 55, .55),
      0 2px 8px rgba(0, 0, 0, .35) !important;
  }
  body.is-playing .battle .seat-float.side-left.active .seat-status,
  body.is-playing .battle .seat-float.side-right.active .seat-status {
    color: #6ee7b7 !important;
  }
  body.is-playing .battle .seat-float.side-left.active .seat-status::before,
  body.is-playing .battle .seat-float.side-right.active .seat-status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #34d399;
    vertical-align: middle;
  }
  body.is-playing .battle .seat-float .seat-name {
    font-size: .75rem !important;
    font-weight: 600;
    color: rgba(244, 239, 228, .88) !important;
  }
  body.is-playing .battle .seat-float .seat-status {
    font-size: .62rem !important;
    color: rgba(167, 196, 182, .75) !important;
  }

  /* Deck / Discard — card-first, no outer gold shell */
  body.is-playing .battle .table-mid {
    gap: 36px !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
  }
  body.is-playing .pile .pile-label,
  body.is-playing #pile-stock .pile-label::after,
  body.is-playing #pile-discard .pile-label::after {
    color: rgba(244, 239, 228, .55) !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
  }
  body.is-playing #pile-stock .pile-label::after,
  body.is-playing #pile-discard .pile-label::after {
    font-size: .58rem !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 56px !important;
    height: 78px !important;
    border-radius: 8px !important;
    border: 1.5px solid rgba(255, 255, 255, .2) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .32) !important;
  }
  body.is-playing .discard-visual:not(.empty) {
    background: #fbf8f0 !important;
  }
  body.is-playing .discard-visual.empty {
    border: 1px dashed rgba(255, 255, 255, .2) !important;
    background: rgba(0, 0, 0, .2) !important;
  }
  body.is-playing .pile.draw-ready .stock-visual,
  body.is-playing .pile.draw-ready .discard-visual {
    border-color: rgba(212, 175, 55, .7) !important;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .35), 0 4px 12px rgba(0, 0, 0, .35) !important;
  }

  /* YOUR TURN — strip, not a card */
  body.is-playing .felt-inner > .seat-float.bottom {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 0 2px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, .28) !important;
    box-shadow: none !important;
  }
  body.is-playing .felt-inner > .seat-float.bottom.active {
    background: rgba(0, 0, 0, .36) !important;
  }
  body.is-playing .felt-inner > .seat-float.bottom .turn-chip {
    font-size: .74rem !important;
    letter-spacing: .06em;
  }
  body.is-playing .seat-float.bottom.warn-10,
  body.is-playing .seat-float.bottom.warn-5,
  body.is-playing .seat-float.bottom.warn-3 {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35) !important;
  }
  body.is-playing .seat-float.bottom.warn-5 {
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .45) !important;
  }
  body.is-playing .seat-float.bottom.warn-3 {
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5) !important;
  }

  /* Hand — visual core, larger cards, less group chrome */
  body.is-playing .hand-stage.on-felt {
    min-height: 132px !important;
    margin: 0 !important;
    padding: 2px 0 2px !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.is-playing .hand-stage.on-felt::before {
    display: none !important; /* kill card-in-card panel */
  }
  body.is-playing .felt-mandala-img {
    opacity: .05 !important; /* hand-area quieter */
  }
  body.is-playing .hand-stage.on-felt .hand {
    gap: 14px !important; /* group spacing 12–16 */
    padding: 6px 2px 2px !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group {
    gap: 3px !important; /* inside group 2–4 */
    padding: 2px 2px 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group.valid-pure,
  body.is-playing .hand-stage.on-felt .suit-group.valid-impure,
  body.is-playing .hand-stage.on-felt .suit-group.valid-set {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(52, 211, 153, .55) !important;
    border-radius: 0 !important;
    padding-bottom: 4px !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group.jokers {
    background: transparent !important;
    border: 0 !important;
  }
  body.is-playing .hand-stage.on-felt .pcard {
    width: 44px !important;
    height: 64px !important;
    font-size: .78rem !important;
    border: 1.5px solid #d5cdb8 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .26) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  }
  body.is-playing .hand-stage.on-felt .pcard .suit {
    font-size: .95rem !important;
  }
  body.is-playing .hand-stage.on-felt .pcard.selected,
  body.is-playing .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-10px) !important;
    border-color: #d4af37 !important;
    box-shadow:
      0 0 0 2px rgba(212, 175, 55, .45),
      0 10px 16px rgba(0, 0, 0, .38) !important;
  }
  body.is-playing .hand-stage.on-felt .pcard.joker {
    border-color: #d4af37 !important;
    border-width: 2px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .32) !important;
  }

  /* Tip + Deadwood — not CTA */
  body.is-playing .player-rail {
    min-height: 68px;
    padding: 6px 10px max(14px, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: none !important;
    background: rgba(3, 16, 12, .96) !important;
  }
  body.is-playing .tip-row {
    margin: 0 0 6px !important;
  }
  body.is-playing .tip-row .meld-hint {
    color: rgba(244, 239, 228, .65) !important;
    font-size: .7rem !important;
    font-weight: 500 !important;
  }
  body.is-playing .deadwood-badge {
    border: 1px solid rgba(255, 255, 255, .15) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(244, 239, 228, .75) !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
  }

  /* Action buttons */
  body.is-playing .game-actions {
    gap: 8px !important;
  }
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
  body.is-playing .game-actions .btn {
    border-radius: 12px !important;
    transition: opacity .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }
  body.is-playing .game-actions #btn-draw {
    background: #0d9488 !important;
    border-color: transparent !important;
    color: #ecfdf5 !important;
  }
  body.is-playing .game-actions #btn-take,
  body.is-playing .game-actions #btn-discard {
    background: #062218 !important;
    border: 1.5px solid rgba(212, 175, 55, .65) !important;
    color: #fcd34d !important;
  }
  body.is-playing .game-actions .btn:disabled {
    opacity: .38 !important;
  }
  body.is-playing .game-actions #btn-discard.discard-ready:not(:disabled) {
    background: #0b3d2e !important;
    border-color: #fbbf24 !important;
    color: #fff8e1 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .25) !important;
  }

  /* Tighter vertical rhythm: deck → turn → hand → action */
  body.is-playing .felt-inner {
    justify-content: flex-start !important;
  }
}

@media (max-width: 374px) {
  body.is-playing .hand-stage.on-felt .pcard {
    width: 40px !important;
    height: 58px !important;
    font-size: .7rem !important;
  }
  body.is-playing .hand-stage.on-felt .hand {
    gap: 10px !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 52px !important;
    height: 72px !important;
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  body.is-playing .hand-stage.on-felt .pcard {
    width: 46px !important;
    height: 66px !important;
    font-size: .82rem !important;
  }
}

/* ============================================================================
   Mobile India-casino micro accents
   Live inside .felt-decor (behind cards) — absolute / pointer-events:none
   Zero layout impact
   ============================================================================ */
.m-casino-diya,
.m-casino-chips,
.m-casino-lotus,
.m-casino-corner {
  display: none;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Keep heavy battle art off; light felt accents only */
  body.is-playing .battle-art {
    display: none !important;
  }

  /* Soft gold corner brackets on the felt edge */
  body.is-playing .m-casino-corner {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: .7;
    border: 1.5px solid rgba(251, 191, 36, .55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  }
  body.is-playing .m-casino-corner.tl {
    top: 5px; left: 5px;
    border-right: 0; border-bottom: 0;
    border-radius: 5px 0 0 0;
  }
  body.is-playing .m-casino-corner.tr {
    top: 5px; right: 5px;
    border-left: 0; border-bottom: 0;
    border-radius: 0 5px 0 0;
  }
  body.is-playing .m-casino-corner.bl {
    bottom: 5px; left: 5px;
    border-right: 0; border-top: 0;
    border-radius: 0 0 0 5px;
  }
  body.is-playing .m-casino-corner.br {
    bottom: 5px; right: 5px;
    border-left: 0; border-top: 0;
    border-radius: 0 0 5px 0;
  }

  /* Mini diya lamps — top felt corners, clear of seats/piles */
  body.is-playing .m-casino-diya {
    display: block;
    position: absolute;
    top: 8px;
    width: 12px;
    height: 9px;
    opacity: .82;
    background: radial-gradient(ellipse at 50% 70%, #b45309, #78350f);
    border-radius: 40% 40% 45% 45%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
  }
  body.is-playing .m-casino-diya::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    width: 6px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 50% 50% 40% 40%;
    background: radial-gradient(circle at 50% 30%, #fef3c7, #f59e0b 55%, transparent 75%);
    opacity: .95;
    animation: diyaFlicker 2.4s ease-in-out infinite;
  }
  body.is-playing .m-casino-diya.left { left: 22px; }
  body.is-playing .m-casino-diya.right { right: 22px; }

  /* Tiny chip stacks beside Draw / Discard */
  body.is-playing .m-casino-chips {
    display: block;
    position: absolute;
    top: 22%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    opacity: .78;
    background: radial-gradient(circle at 35% 30%, #fde68a, #d97706 70%);
    border: 1px dashed rgba(255, 248, 220, .75);
    box-shadow:
      0 5px 0 -1px #b91c1c,
      0 10px 0 -2px #047857,
      0 3px 6px rgba(0, 0, 0, .3);
  }
  body.is-playing .m-casino-chips.left { left: 8px; transform: rotate(-10deg); }
  body.is-playing .m-casino-chips.right {
    right: 8px;
    transform: rotate(10deg);
    background: radial-gradient(circle at 35% 30%, #6ee7b7, #047857 70%);
    box-shadow:
      0 5px 0 -1px #d97706,
      0 10px 0 -2px #1d4ed8,
      0 3px 6px rgba(0, 0, 0, .3);
  }

  /* Soft lotus / mandala watermark under pile zone */
  body.is-playing .m-casino-lotus {
    display: block;
    position: absolute;
    left: 50%;
    top: 24%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    opacity: .18;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, rgba(251, 191, 36, .4) 0 5px, transparent 6px),
      repeating-conic-gradient(from 0deg, rgba(251, 191, 36, .28) 0 12deg, transparent 12deg 45deg);
  }

  /* Revive existing felt chips (was display:none on mobile play) — lighter */
  body.is-playing .felt-chips {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    opacity: .55;
    z-index: 0;
  }
  body.is-playing .felt-chips.left { left: 6px; top: 42%; }
  body.is-playing .felt-chips.right { right: 6px; top: 42%; }
  body.is-playing .felt-chips .cchip.mini {
    width: 10px;
    height: 10px;
    margin-left: 0;
  }
  body.is-playing .felt-chips .cchip.mini:nth-child(3) { display: none; }

  /* CSS paisley corners — soft, not crowding cards */
  body.is-playing .felt-corner {
    display: block;
    width: 28px;
    height: 28px;
    opacity: .22;
  }
  body.is-playing .felt-corner.tl { top: 6px; left: 6px; }
  body.is-playing .felt-corner.tr { top: 6px; right: 6px; }
  body.is-playing .felt-corner.bl,
  body.is-playing .felt-corner.br { display: none; }

  /* Header: thin gold rule + diamond (no height change) */
  body.is-playing.play .site-header {
    position: relative;
    border-bottom: 1px solid rgba(251, 191, 36, .28) !important;
  }
  body.is-playing.play .site-header::after {
    content: "◆";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    font-size: .42rem;
    color: rgba(251, 191, 36, .65);
    line-height: 1;
    z-index: 3;
    pointer-events: none;
  }

  /* Action rail: soft gold hairline + tiny chip marker */
  body.is-playing .player-rail {
    border-top: 1px solid rgba(251, 191, 36, .28) !important;
    position: relative;
  }
  body.is-playing .player-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 9px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fde68a, #d97706 70%);
    border: 1px dashed rgba(255, 248, 220, .8);
    opacity: .75;
    pointer-events: none;
    z-index: 2;
  }

  /* YOUR TURN strip: soft gold eyelash accents */
  body.is-playing .felt-inner > .seat-float.bottom {
    position: relative;
  }
  body.is-playing .felt-inner > .seat-float.bottom.active::before,
  body.is-playing .felt-inner > .seat-float.bottom.active::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .5), transparent);
    pointer-events: none;
  }
  body.is-playing .felt-inner > .seat-float.bottom.active::before {
    left: 8px;
    transform: translateY(-50%);
  }
  body.is-playing .felt-inner > .seat-float.bottom.active::after {
    right: 8px;
    transform: translateY(-50%);
  }

  /* Pile saffron underline — absolute so no layout shift */
  body.is-playing .pile {
    position: relative;
  }
  body.is-playing .pile::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 20px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .45), transparent);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    body.is-playing .m-casino-diya::before {
      animation: none !important;
    }
  }
}

/* ============================================================================
   DESKTOP PLAY UI (≥768) — table-first, not mobile blown-up
   ============================================================================ */
@media (min-width: 768px) {
  /* P0: lock play UI to one viewport — no page scroll (mobile untouched) */
  html:has(body.is-playing.play),
  body.is-playing.play {
    height: 100% !important;
    max-height: 100dvh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }
  body.is-playing.play .site-header {
    flex-shrink: 0;
    min-height: 52px;
    max-height: 56px;
    height: 56px;
  }
  body.is-playing.play .site-header > .wrap.header-row {
    min-height: 52px;
    height: 56px;
  }
  body.is-playing .game-shell,
  body.is-playing.play main#main.game-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  /* Plan B: keep SEO in-flow, but let wrap scroll so #battle-table cannot be flex-crushed. */
  body.is-playing .game-shell > .wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 1440px;
    box-sizing: border-box;
  }

  body.is-playing #battle-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) #battle-table {
    flex: 1 0 auto !important;
    min-height: min(52vh, 520px) !important;
    height: auto !important;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1360px;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* P1: hide duplicate in-felt AI fans + outer art on desktop play */
  body.is-playing .battle .ai-row,
  body.is-playing .board-outer-art {
    display: none !important;
  }

  body.is-playing .led-scoreboard {
    flex: 0 0 auto;
    width: min(100%, 560px);
    margin: 0 auto 4px;
  }
  body.is-playing .led-screen.battle-hud {
    padding: 3px 8px;
    gap: 6px 12px;
    min-height: 0;
  }

  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 2px 8px 0;
    column-gap: 12px;
    align-items: stretch;
    overflow: hidden;
  }

  body.is-playing .felt-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-table {
    min-height: 0 !important;
    height: 100% !important;
    margin-bottom: 0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, .42),
      inset 0 2px 0 rgba(255, 220, 150, .2),
      inset 0 -4px 12px rgba(0, 0, 0, .4);
  }

  body.is-playing .felt-inner,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 14px 8px;
    overflow: hidden;
  }

  /* Center piles — compact desktop */
  body.is-playing .battle .table-mid,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    flex: 0 0 auto;
    max-width: 360px;
    gap: 14px;
    margin: 0 auto;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 58px !important;
    height: 82px !important;
  }

  /* South seat — wider desktop strip */
  body.is-playing .felt-inner > .seat-float.bottom,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner > .seat-float.bottom {
    flex: 0 0 auto;
    max-width: min(100%, 560px);
    width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    padding: 4px 12px;
  }
  body.is-playing .felt-inner > .seat-float.bottom .turn-chip {
    display: inline-flex !important;
  }

  /* Desktop hand — single row, no scroll (mobile untouched) */
  body.is-playing .hand-stage.on-felt,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 12px 8px 10px;
    overflow: visible;
    max-height: none;
    scrollbar-width: none;
  }
  body.is-playing .hand-stage.on-felt .hand-scroll,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand-scroll {
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
  }
  body.is-playing .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow: visible !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    gap: 3px;
    padding: 2px 4px;
    min-width: 0;
    flex: 0 0 auto;
  }
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 48px !important;
    height: 68px !important;
    font-size: .85rem !important;
    margin-left: 0 !important;
    flex: 0 0 auto;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  body.is-playing .hand-stage.on-felt .pcard .suit,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: 1rem !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group .pcard:first-child {
    margin-left: 0 !important;
  }
  body.is-playing .hand-stage.on-felt .pcard:hover {
    transform: translateY(-4px);
  }
  body.is-playing .hand-stage.on-felt .pcard.selected,
  body.is-playing .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-8px);
    border-color: #fbbf24;
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, .45),
      0 8px 16px rgba(0, 0, 0, .35);
  }

  /* Side seats — desktop scale */
  body.is-playing .battle .seat-float.side-left .avatar,
  body.is-playing .battle .seat-float.side-right .avatar {
    width: 48px;
    height: 48px;
  }

  /* Action apron — compact, stays in viewport */
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail,
  body.is-playing .player-rail {
    position: relative;
    z-index: 4;
    flex: 0 0 auto !important;
    width: min(100%, 720px);
    max-width: 720px;
    margin: 4px auto 0;
    padding: 6px 12px 8px;
    border-radius: 14px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0a5c3c 0%, #064230 50%, #032a1e 100%);
    border: 1.5px solid rgba(212, 175, 55, .4);
    box-shadow:
      0 8px 20px rgba(0, 0, 0, .4),
      inset 0 1px 0 rgba(255, 220, 150, .12);
  }
  body.is-playing #player-rail > #player-seat,
  body.is-playing .player-rail > .seat-float.bottom,
  body.is-playing .player-rail > #player-seat {
    min-height: 44px !important;
    max-height: 48px !important;
    margin: 0 0 4px !important;
    padding: 4px 10px !important;
  }
  body.is-playing .player-rail::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .55), transparent);
    pointer-events: none;
  }
  body.is-playing .player-rail .tip-row {
    margin: 0 0 4px;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(251, 191, 36, .2);
  }
  body.is-playing .player-rail .meld-hint {
    font-size: .72rem;
    text-align: left;
    color: rgba(255, 236, 180, .92);
  }
  body.is-playing .player-rail .deadwood-badge {
    border-radius: 8px;
    padding: 2px 8px;
    font-size: .62rem;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(251, 191, 36, .4);
  }
  body.is-playing .player-rail .game-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    margin: 0;
  }
  body.is-playing .player-rail .game-actions .discard-slot {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
  }
  body.is-playing .player-rail .game-actions .discard-slot > .btn {
    width: 110px;
  }
  body.is-playing .player-rail .game-actions .btn {
    flex: 0 0 auto;
    width: 110px;
    min-height: 40px;
    height: 40px;
    padding: 6px 10px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 10px;
    border-width: 1.5px;
    transition: filter .18s ease, transform .18s ease;
  }
  body.is-playing .player-rail .game-actions #btn-draw {
    width: 120px;
  }
  body.is-playing .player-rail .game-actions #btn-hint,
  body.is-playing .player-rail .game-actions #btn-restart {
    width: 92px;
    min-height: 40px;
    height: 40px;
    font-size: .68rem;
  }
  body.is-playing .player-rail .game-actions .btn-ok {
    background: linear-gradient(180deg, #34d399 0%, #059669 100%);
    border-color: rgba(253, 224, 71, .45);
    color: #f8fffb;
  }
  body.is-playing .player-rail .game-actions .btn-ghost {
    background: rgba(0, 0, 0, .28);
    border-color: rgba(251, 191, 36, .55);
    color: #fde68a;
  }
  body.is-playing .player-rail .game-actions .btn-muted {
    background: rgba(0, 0, 0, .22);
    border-color: rgba(251, 191, 36, .3);
    color: rgba(236, 253, 245, .85);
  }
  body.is-playing .player-rail .game-actions .btn-gold {
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    border-color: rgba(255, 248, 220, .5);
    color: #1c1406;
  }
  body.is-playing .player-rail .game-actions .btn:disabled {
    opacity: .4;
  }
  body.is-playing .player-rail .game-actions .btn:not(:disabled):hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  body.is-playing .player-rail .game-actions .btn:not(:disabled):active {
    transform: translateY(1px);
  }
  body.is-playing .player-rail .game-msg {
    display: none;
  }
  /*
    PC host / AI-hosting prompt — sit above the You seat
    (JS sets left/top; keep bubble transform, not viewport center).
  */
  body.is-playing .host-offer,
  body.is-playing .player-rail .host-offer {
    position: fixed !important;
    width: min(300px, calc(100vw - 48px)) !important;
    z-index: 96 !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, calc(-100% - 18px)) !important;
    transform-origin: 50% 100% !important;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .5));
  }
  body.is-playing .host-offer.open,
  body.is-playing .player-rail .host-offer.open {
    animation: hostPop .28s ease !important;
  }
  body.is-playing .host-offer-card {
    padding: 16px 16px 14px;
    border-radius: 16px;
  }
  body.is-playing .host-offer-card::after {
    display: block !important;
    bottom: -7px;
  }
  body.is-playing .host-title {
    font-size: 1.05rem;
  }
  body.is-playing .host-body {
    font-size: .88rem;
    margin-bottom: 8px;
  }
  body.is-playing .host-tip {
    display: block;
    margin: 0 0 14px;
    font-size: .74rem;
    color: rgba(252, 211, 77, .9);
  }
  body.is-playing .host-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  body.is-playing .host-actions .btn {
    min-width: 88px;
    min-height: 42px;
  }
}

/* Wider desktops: slightly larger cards — never force min-height (clips on short viewports) */
@media (min-width: 1280px) {
  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    max-width: 1360px;
    min-height: 0;
  }
  body.is-playing .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    gap: 6px;
  }
  body.is-playing .hand-stage.on-felt .suit-group,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    gap: 2px;
    padding: 2px 3px;
  }
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 50px !important;
    height: 72px !important;
    font-size: .88rem !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 54px !important;
    height: 76px !important;
  }
  body.is-playing .player-rail {
    max-width: 760px;
    width: min(100%, 760px);
  }
}

@media (min-width: 1440px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 52px !important;
    height: 74px !important;
    font-size: .9rem !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 56px !important;
    height: 78px !important;
  }
}

@media (min-width: 1600px) {
  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    max-width: 1440px;
  }
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 54px !important;
    height: 76px !important;
  }
}

/* ============================================================================
   STEP 04–06 — Hierarchy flatten + Card system
   Priority: Hand > Turn > Actions > Player > Status > Deck > Decor > BG
   ============================================================================ */

.board-outer-art,
.battle-art,
.felt-corner,
.pile-ornament,
.pile-center-gem,
.felt-corner-img,
.start-art.card-float,
.start-art.win-glow,
.start-art.mandala {
  display: none !important;
}

@media (min-width: 768px) {
  .casino-decor,
  .m-casino-diya,
  .m-casino-coin,
  .m-casino-chip {
    display: none !important;
  }
}

.start-btn {
  animation: none;
}

body.play .india-badge {
  background: var(--rummy-gold, #fbbf24);
  color: #1a1204;
  box-shadow: none;
}

.hand-stage.on-felt .pcard,
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
  width: 44px;
  height: 66px;
}

.hand-stage.on-felt .hand,
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
  gap: 14px;
}

.hand-stage.on-felt .suit-group,
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group,
.hand .suit-group {
  gap: 3px;
  padding: 2px;
  margin-inline: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.hand-stage.on-felt .pcard.selected,
.game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected,
.pcard.selected {
  transform: translateY(-10px);
  border-color: var(--rummy-gold, #fbbf24);
  outline: 1px solid rgba(251, 191, 36, .5);
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .32));
}

.pcard.hint {
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .28));
  border-color: var(--rummy-gold-soft, #fcd34d);
}

.pcard.new-draw {
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .28));
}

.suit-group.valid-pure,
.suit-group.valid-impure,
.suit-group.valid-set,
.hand-stage.on-felt .suit-group.valid-pure,
.hand-stage.on-felt .suit-group.valid-impure,
.hand-stage.on-felt .suit-group.valid-set {
  border: none !important;
  border-bottom: 2px solid var(--rummy-green-light, #0a6b50) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pcard.joker,
.pcard.wild {
  animation: none !important;
  border: 2px solid var(--rummy-gold, #fbbf24);
  box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .28));
}

@media (min-width: 768px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard,
  .hand-stage.on-felt .pcard {
    width: 48px !important;
    height: 68px !important;
    font-size: .85rem !important;
  }
  body.is-playing .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    gap: 6px !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
  }
  body.is-playing .hand-stage.on-felt,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    border: var(--border-secondary, 1px solid rgba(10, 107, 80, .5));
  }
  body.is-playing .battle .seat-float:not(.active) {
    border: var(--border-secondary, 1px solid rgba(10, 107, 80, .5));
  }

  /*
    PC play: stock + AI/deal backs use deep-blue peacock webp
    (assets/images/card-back-india.webp).
  */
  body.is-playing .card-back,
  body.is-playing .battle .card-back,
  body.is-playing .side-mini-hand .mini-back,
  body.is-playing .pcard.deal-sealed,
  body.is-playing .card-back.deal-pop,
  body.is-playing .deal-fly,
  body.is-playing .discard-visual.deal-sealed,
  body.is-playing .stock-visual,
  body.is-playing .battle .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual {
    background:
      #0c2a4a url("../images/card-back-india.webp?v=2") center / cover no-repeat !important;
    border-color: #d4af37 !important;
  }

  body.is-playing .stock-visual,
  body.is-playing .battle .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual {
    border: 2px solid #d4af37 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4) !important;
  }

  body.is-playing .card-back,
  body.is-playing .battle .card-back {
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4) !important;
  }
}

@media (min-width: 1280px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 50px !important;
    height: 72px !important;
  }
}

@media (min-width: 1600px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 54px !important;
    height: 76px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcard.selected { transition: none; }
}

/* ============================================================================
   STEP 10 — Wire visual assets (pointer-events: none; never cover cards/CTAs)
   ============================================================================ */

body.play .logo-mark.logo-emblem {
  background: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

/* Player status — Current player: gold ring + green dot (small) */
.seat.active .avatar::before,
.battle .seat.active .avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 22px;
  height: 14px;
  transform: translateX(-50%);
  background: url("../rummy/player/crown.svg") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
  opacity: .92;
}
.seat .seat-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #9aa7b2;
  vertical-align: middle;
}
.seat.active .seat-status::before {
  background: var(--rummy-green-light, #0a6b50);
  box-shadow: 0 0 0 2px rgba(10, 107, 80, .25);
}
.seat.is-winner .avatar::before,
.battle .seat.is-winner .avatar::before {
  background: url("../rummy/player/winner-badge.svg") center / contain no-repeat;
  width: 20px;
  height: 20px;
  top: -16px;
}

/* Joker badge — gold star, subtle elevation, no blink */
.pcard.joker::after,
.pcard.wild::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  background: url("../rummy/cards/joker-badge.svg?v=1") center / contain no-repeat;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
  animation: none;
}
.pcard.joker,
.pcard.wild {
  position: relative;
  box-shadow:
    var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .28)),
    0 0 0 1px rgba(251, 191, 36, .35);
}

/* Pure sequence — small green accent (does not steal hand focus) */
.suit-group.valid-pure {
  position: relative;
  border-bottom: 2px solid rgba(52, 211, 153, .55) !important;
}
.suit-group.valid-pure::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  background: url("../rummy/game/pure-sequence.svg?v=1") center / contain no-repeat;
  pointer-events: none;
  opacity: .9;
  z-index: 2;
}

/* Your-turn icon (decorative; text remains primary) */
body.is-playing .turn-icon {
  display: none;
  width: 96px;
  height: 22px;
  opacity: .85;
  pointer-events: none;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  body.is-playing .felt-inner > .seat-float.bottom.active .turn-icon {
    display: block;
  }
  body.is-playing .felt-inner > .seat-float.bottom.active .turn-dot,
  body.is-playing .felt-inner > .seat-float.bottom.active .turn-label {
    display: none;
  }
}

/* Action icons on DRAW / TAKE / DISCARD */
body.is-playing .game-actions #btn-draw,
body.is-playing .game-actions #btn-take,
body.is-playing .game-actions #btn-discard {
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px 18px;
  padding-left: 34px !important;
}
body.is-playing .game-actions #btn-draw {
  background-image: url("../rummy/icons/action-draw.svg");
}
body.is-playing .game-actions #btn-take {
  background-image: url("../rummy/icons/action-take.svg");
}
body.is-playing .game-actions #btn-discard {
  background-image: url("../rummy/icons/action-discard.svg");
}
@media (max-width: 767px) {
  body.is-playing .game-actions #btn-draw,
  body.is-playing .game-actions #btn-take,
  body.is-playing .game-actions #btn-discard {
    background-position: center 6px;
    background-size: 16px 16px;
    padding: 22px 6px 6px !important;
    font-size: .7rem !important;
  }
}

/* Result celebration assets */
.result-decor {
  pointer-events: none !important;
  z-index: 0;
}
.result-card > *:not(.result-decor) {
  position: relative;
  z-index: 1;
}
.result-emblem {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  opacity: .9;
}
.result-trophy {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  opacity: .75;
}
.result-winner-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  opacity: .6;
}
/* Trophy / winner badge — result win only (never on live table) */
.result-modal.is-loss .result-trophy,
.result-modal.is-loss .result-winner-badge,
.result-trophy[hidden],
.result-winner-badge[hidden] {
  display: none !important;
}
.result-modal.is-win .result-trophy,
.result-modal.is-win .result-winner-badge {
  display: block;
}
.result-mandala-img {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(70%, 180px);
  transform: translate(-50%, -50%);
  opacity: .08;
}
.result-celebrate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(251, 191, 36, .08), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(251, 191, 36, .06), transparent 26%);
  opacity: .9;
}
.result-art {
  opacity: .35;
  max-height: 120px;
  object-fit: contain;
  margin: 8px auto 0;
}

/* Hide legacy noisy result CSS ornaments if any remain */
.result-paisley,
.result-chip-stack,
.result-mini-fan,
.result-diya,
.result-coin-float,
.result-mandala {
  display: none !important;
}

body.play .site-footer {
  position: relative;
  overflow: hidden;
}
body.play .site-footer .footer-pattern {
  position: absolute;
  inset: 0;
  background: url("../images/felt-india-pattern.webp") center / 180px repeat;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
body.play .site-footer > .wrap {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   STEP 07–09 — Table / Player / Turn / Action Bar
   ============================================================================ */

/* Felt pattern layer — opacity 0.08–0.12 */
.felt-pattern {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("../images/felt-india-pattern.webp") center / 200px repeat;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}

/* PC-only felt accents — off by default (incl. mobile) */
.felt-pattern-royal,
.felt-pc-glow,
.felt-pc-line,
.felt-pc-paisley,
.felt-pc-peacock,
.felt-pc-chips,
.felt-pc-diya,
.felt-pc-coin {
  display: none;
  pointer-events: none;
}

.felt-mandala-img {
  display: block !important;
  left: 50%;
  top: 46%;
  width: min(46%, 190px);
  opacity: .1 !important;
  transform: translate(-50%, -50%);
  filter: none !important;
  animation: none !important;
  z-index: 0;
}

.felt-corner-orn {
  position: absolute;
  width: 44px;
  height: auto;
  opacity: .1; /* 0.08–0.15 — never compete with cards */
  pointer-events: none;
  z-index: 0;
}
.felt-corner-orn.tl { top: 10px; left: 12px; }
.felt-corner-orn.tr { top: 10px; right: 12px; }
.felt-corner-orn.bl { bottom: 12px; left: 14px; width: 36px; }
.felt-corner-orn.br { bottom: 12px; right: 14px; width: 36px; }
@media (max-width: 767px) {
  .felt-corner-orn { opacity: .08; width: 36px; }
  .felt-corner-orn.bl,
  .felt-corner-orn.br { width: 30px; }
}
@media (min-width: 1024px) {
  .felt-corner-orn { opacity: .14; width: 48px; }
}

.felt-corner,
.felt-corner-img,
.felt-chips,
.felt-mandala,
.m-casino-diya,
.m-casino-chips,
.m-casino-lotus,
.m-casino-corner {
  display: none !important;
}

/* Hand area: opacity 0.04–0.06 wash only */
.hand-stage.on-felt,
body.is-playing .hand-stage.on-felt,
body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
  background: rgba(0, 0, 0, .05) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Deck / Discard — card-first, less chrome */
.battle .pile .pile-label {
  font-size: .65rem;
  opacity: .7;
  color: var(--rummy-ivory, #f5faf7);
}
.battle .stock-visual,
.battle .discard-visual,
body.is-playing .stock-visual,
body.is-playing .discard-visual {
  width: 54px !important;
  height: 76px !important;
  border: 1px solid rgba(245, 250, 247, .18) !important;
  box-shadow: var(--shadow-card, 0 6px 14px rgba(0, 0, 0, .3)) !important;
}

@media (max-width: 767px) {
  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 56px !important;
    height: 78px !important;
  }
}

/* STEP 08 — Avatars */
.battle .avatar,
.seat .avatar {
  width: 46px !important;
  height: 46px !important;
}
.battle .seat-float:not(.active) {
  border: var(--border-secondary, 1px solid rgba(10, 107, 80, .5)) !important;
  box-shadow: var(--shadow-card, 0 8px 16px rgba(0, 0, 0, .28)) !important;
  padding: 6px 10px !important;
}
.battle .seat-float .hud-stat {
  font-size: .7rem;
}

@media (min-width: 768px) {
  .battle .avatar,
  .seat .avatar,
  body.is-playing .battle .seat-float.side-left .avatar,
  body.is-playing .battle .seat-float.side-right .avatar {
    width: 52px !important;
    height: 52px !important;
  }
}

/* Status language */
.seat-status {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem !important;
  font-weight: 800;
}

/* STEP 09 — Your Turn bar 38–42px */
body.is-playing .felt-inner > .seat-float.bottom .turn-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  width: auto;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(4, 17, 13, .72);
  border: 1px solid rgba(251, 191, 36, .35);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--rummy-ivory, #f5faf7);
}
body.is-playing .turn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rummy-green-light, #0a6b50);
  box-shadow: none;
  flex-shrink: 0;
}
body.is-playing .turn-secs {
  margin-left: 4px;
  color: var(--rummy-gold-soft, #fcd34d);
  font-variant-numeric: tabular-nums;
  min-width: 2.2em;
  text-align: right;
}
body.is-playing .seat-float.bottom.warn-10 {
  border-color: rgba(251, 191, 36, .65) !important;
}
body.is-playing .seat-float.bottom.warn-10 .turn-secs {
  color: var(--rummy-gold, #fbbf24);
}
body.is-playing .seat-float.bottom.warn-5 {
  border-color: rgba(217, 119, 6, .85) !important;
}
body.is-playing .seat-float.bottom.warn-5 .turn-secs {
  color: #f59e0b;
}
body.is-playing .seat-float.bottom.warn-3 {
  border-color: rgba(185, 28, 28, .85) !important;
}
body.is-playing .seat-float.bottom.warn-3 .turn-secs,
body.is-playing .seat-float.bottom.warn-3 .turn-label {
  color: #fca5a5;
}
body.is-playing .seat-float.bottom.warn-3 .turn-dot {
  background: #ef4444;
}

/* Action bar — DRAW / TAKE / DISCARD */
@media (max-width: 767px) {
  body.is-playing .player-rail {
    min-height: 68px;
    padding: 8px 10px max(14px, env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(3, 20, 14, .96) !important;
    border-top: 1px solid rgba(245, 250, 247, .08) !important;
  }
  body.is-playing .game-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot,
  body.is-playing .game-actions .discard-slot > .btn {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 52px !important;
    border-radius: 12px !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
  }
  /* DRAW — green filled */
  body.is-playing .game-actions #btn-draw {
    background: var(--rummy-green-light, #0a6b50) !important;
    border: 2px solid var(--rummy-green-light, #0a6b50) !important;
    color: #f5faf7 !important;
  }
  body.is-playing .game-actions #btn-draw:not(:disabled) {
    background: var(--rummy-green, #064e3b) !important;
    border-color: var(--rummy-green-light, #0a6b50) !important;
  }
  /* TAKE — dark green + gold border */
  body.is-playing .game-actions #btn-take {
    background: #04110d !important;
    border: 2px solid var(--rummy-gold, #fbbf24) !important;
    color: var(--rummy-gold-soft, #fcd34d) !important;
  }
  /* DISCARD — muted until card selected */
  body.is-playing .game-actions #btn-discard {
    background: rgba(4, 17, 13, .7) !important;
    border: 2px solid rgba(245, 250, 247, .12) !important;
    color: rgba(245, 250, 247, .45) !important;
    opacity: .55 !important;
  }
  body.is-playing .game-actions #btn-discard.discard-ready:not(:disabled) {
    background: var(--rummy-green-dark, #033528) !important;
    border-color: var(--rummy-gold, #fbbf24) !important;
    color: #fff8e7 !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
}

@media (min-width: 768px) {
  body.is-playing .player-rail,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail {
    border: var(--border-subtle, 1px solid rgba(245, 250, 247, .1)) !important;
    background: linear-gradient(180deg, #0a4a34, #032a1e) !important;
    box-shadow: var(--shadow-card, 0 8px 20px rgba(0, 0, 0, .32)) !important;
    padding-bottom: 8px !important;
  }
  body.is-playing .player-rail::before {
    display: none !important;
  }
  body.is-playing .player-rail .game-actions #btn-draw {
    background: var(--rummy-green-light, #0a6b50) !important;
    border-color: var(--rummy-green-light, #0a6b50) !important;
    color: #f5faf7 !important;
  }
  body.is-playing .player-rail .game-actions #btn-take {
    background: #04110d !important;
    border: 2px solid var(--rummy-gold, #fbbf24) !important;
    color: var(--rummy-gold-soft, #fcd34d) !important;
  }
  body.is-playing .player-rail .game-actions #btn-discard:not(.discard-ready) {
    opacity: .5 !important;
  }
  body.is-playing .player-rail .game-actions #btn-discard.discard-ready:not(:disabled) {
    border-color: var(--rummy-gold, #fbbf24) !important;
    opacity: 1 !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 52px !important;
    height: 74px !important;
  }
}

/* ============================================================================
   PC PLAY — bottom action bar + middle felt fill (mobile untouched)
   ============================================================================ */
@media (min-width: 768px) {
  /* Column shell: header | table (flex) | action bar (pinned bottom) */
  body.is-playing.play {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.is-playing.play .site-header {
    flex: 0 0 auto !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }
  body.is-playing.play .site-header > .wrap.header-row {
    height: 52px !important;
    min-height: 52px !important;
  }

  /* Kill calc(100dvh-56) leftover gap under the rail */
  body.is-playing.play .game-shell,
  body.is-playing.play main#main.game-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Plan B (desktop win cascade): scroll SEO in wrap; protect #battle-table floor. */
  body.is-playing.play .game-shell > .wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.is-playing.play #battle-table,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #battle-table {
    flex: 1 0 auto !important;
    min-height: min(52vh, 520px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .table-stage {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.is-playing.play .led-scoreboard,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .led-scoreboard {
    flex: 0 0 auto !important;
    margin: 0 auto 6px !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .board-arena {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-table {
    min-height: 0 !important;
    height: 100% !important;
    /* Do not clip hand faces at the felt rim */
    overflow: visible !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 14px 12px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    position: relative !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: min(420px, 92%) !important;
    width: 100% !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* No side apron ornaments on deal zone */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .table-mid::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .table-mid::after {
    content: none !important;
    display: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile {
    position: relative !important;
    z-index: 1 !important;
    padding: 4px 6px !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile .pile-count,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile .pile-hint {
    display: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile .pile-label {
    display: block !important;
    font-size: .68rem !important;
    letter-spacing: .08em !important;
    color: #fde68a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
    margin-bottom: 4px !important;
    opacity: 1 !important;
  }

  /* Keep lotus + side card ornaments (no outer tray) */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile-ornament {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile-ornament img {
    width: 36px !important;
    height: auto !important;
    opacity: .85 !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile-center-gem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    width: 44px !important;
    flex: 0 0 auto !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile-center-gem img {
    width: 40px !important;
    height: 40px !important;
    opacity: .95 !important;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, .55)) saturate(1.25) !important;
  }

  /*
    Hand on felt — one row, no scroll.
    overflow-x:auto coerces overflow-y to auto (CSS quirk) → vertical scroll.
  */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 4px 8px !important;
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
    border-top: 1px solid rgba(251, 191, 36, .18);
    background: transparent !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-end !important;
    align-content: flex-end !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 4px 0 2px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 2px 3px !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Scale faces so 13 cards fit one row — no scroll needed */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    width: clamp(34px, 3.4vw, 48px) !important;
    height: clamp(50px, 4.9vw, 68px) !important;
    font-size: clamp(.68rem, 1.05vw, .85rem) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: clamp(.8rem, 1.2vw, 1rem) !important;
  }

  /* —— PC India card décor — no outer apron frame —— */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    padding: 10px 4px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* No side paisley apron on hand tray */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt::after {
    content: none !important;
    display: none !important;
  }

  /* Keep lotus divider above hand (not a frame) */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand-scroll {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 18px !important;
    margin: 0 !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand-scroll::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: min(320px, 70%) !important;
    height: 18px !important;
    transform: translateX(-50%) !important;
    background:
      url("../rummy/ornaments/lotus.svg") center / 22px 22px no-repeat,
      url("../rummy/ornaments/divider.svg") center 14px / min(280px, 90%) 10px no-repeat !important;
    pointer-events: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    position: relative !important;
    border-radius: 12px !important;
    background:
      url("../rummy/ornaments/lotus.svg") right 4px bottom 3px / 14px 14px no-repeat,
      radial-gradient(ellipse at 50% 120%, rgba(251, 191, 36, .2), transparent 55%),
      linear-gradient(180deg, rgba(8, 48, 32, .55), rgba(2, 18, 12, .65)) !important;
    border: 1.5px solid rgba(251, 191, 36, .5) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 248, 220, .1),
      0 4px 10px rgba(0, 0, 0, .25) !important;
    padding: 5px 6px 6px !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-pure,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-impure,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-set {
    border-color: #fbbf24 !important;
    border-bottom: 3px solid #34d399 !important;
    background:
      url("../rummy/ornaments/lotus.svg") right 4px bottom 3px / 16px 16px no-repeat,
      radial-gradient(ellipse at 50% 100%, rgba(16, 185, 129, .28), transparent 58%),
      linear-gradient(180deg, rgba(8, 48, 32, .6), rgba(2, 18, 12, .7)) !important;
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, .35),
      0 6px 14px rgba(0, 0, 0, .3) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.jokers {
    border-color: #fcd34d !important;
    background:
      url("../rummy/ornaments/lotus.svg") right 4px bottom 3px / 16px 16px no-repeat,
      radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, .32), transparent 55%),
      linear-gradient(180deg, rgba(40, 28, 8, .45), rgba(2, 18, 12, .7)) !important;
  }

  /* —— Card faces: Premium Indian ivory (rank/suit first) —— */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    position: relative !important;
    isolation: isolate !important;
    border: 1.5px solid var(--rummy-gold-line, #c9a227) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 42%),
      var(--rummy-ivory-face, #faf6ee) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .55),
      var(--rummy-shadow, 0 6px 14px rgba(0, 0, 0, .34)) !important;
    color: inherit !important;
    transition: transform var(--rummy-ease, .18s ease), box-shadow var(--rummy-ease, .18s ease), border-color var(--rummy-ease, .18s ease) !important;
    overflow: hidden !important;
  }

  /* Ultra-faint mandala (≈5%) — never above rank/suit */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard::before {
    content: "" !important;
    position: absolute !important;
    inset: 12% !important;
    width: auto !important;
    height: auto !important;
    top: 12% !important;
    right: 12% !important;
    left: 12% !important;
    bottom: 12% !important;
    background: url("../rummy/ornaments/mandala.svg") center / contain no-repeat !important;
    opacity: .05 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    filter: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard > * {
    position: relative !important;
    z-index: 1 !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.red {
    color: var(--rummy-red, #9f1239) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.black {
    color: #0f172a !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--rummy-shadow-hover, 0 10px 20px rgba(0, 0, 0, .42)) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.new-draw {
    border-color: var(--rummy-gold, #fbbf24) !important;
    border-width: 2px !important;
    background: var(--rummy-white, #fff) !important;
    transform: translateY(-4px) scale(1.025) !important;
    box-shadow: var(--rummy-shadow-selected) !important;
    filter: none;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.new-draw::before {
    opacity: .06 !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.joker,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.wild {
    border-color: var(--rummy-gold-line, #c9a227) !important;
    border-width: 1.5px !important;
    background:
      url("../rummy/ornaments/lotus.svg") center 62% / 34% no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 40%),
      var(--rummy-ivory-face, #faf6ee) !important;
    color: #7c4a03 !important;
    box-shadow: var(--rummy-shadow) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.joker::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.wild::before {
    background: url("../rummy/ornaments/mandala.svg") center / contain no-repeat !important;
    opacity: .06 !important;
    inset: 10% !important;
    width: auto !important;
    height: auto !important;
    top: 10% !important;
    right: 10% !important;
    left: 10% !important;
    bottom: 10% !important;
    filter: none !important;
  }

  /* —— Card backs: deep-blue peacock webp (stock + AI fans) —— */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .card-back,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .card-back {
    position: relative !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 10px !important;
    background:
      #0c2a4a
      url("../images/card-back-india.webp?v=2") center / cover no-repeat !important;
    box-shadow: var(--rummy-shadow) !important;
    outline: none !important;
  }

  body.is-playing.play .stock-visual,
  body.is-playing.play .discard-visual,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-stock .stock-visual,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-discard .discard-visual {
    position: relative !important;
    width: clamp(48px, 4.6vw, 58px) !important;
    height: clamp(68px, 6.5vw, 82px) !important;
    border-radius: 10px !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual:not(.empty) {
    border: 1.5px solid var(--rummy-gold-line, #c9a227) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 42%),
      var(--rummy-ivory-face, #faf6ee) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .5),
      var(--rummy-shadow) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual.red {
    color: var(--rummy-red, #9f1239) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual.black {
    color: #0f172a !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual.joker,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual.wild {
    background:
      url("../rummy/ornaments/lotus.svg") center 62% / 34% no-repeat,
      var(--rummy-ivory-face, #faf6ee) !important;
    color: #7c4a03 !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .discard-visual.empty {
    background: rgba(4, 24, 16, .28) !important;
    border: 1.5px dashed rgba(251, 191, 36, .35) !important;
    color: rgba(253, 230, 138, .7) !important;
    font-size: .72rem !important;
    box-shadow: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile.draw-ready,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-stock.draw-ready,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-discard.draw-ready {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile.draw-ready .stock-visual,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile.draw-ready .discard-visual {
    outline: none !important;
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, .4),
      var(--rummy-shadow) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile .pile-label {
    color: var(--rummy-gold-light, #fde68a) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile::after,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-stock::after,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-discard::after,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .pile::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-stock::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #pile-discard::before {
    content: none !important;
    display: none !important;
  }

  /* Full-bleed action bar pinned to page bottom */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail,
  body.is-playing.play .player-rail {
    position: relative !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 16px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #0a5c3c 0%, #064230 45%, #032a1e 100%) !important;
    border-top: 1.5px solid rgba(212, 175, 55, .45) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35) !important;
  }

  body.is-playing.play .player-rail::before {
    display: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .tip-row {
    max-width: 960px;
    margin: 0 auto 8px !important;
    padding: 2px 4px !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) #player-seat,
  body.is-playing.play .player-rail > #player-seat {
    max-width: 960px;
    margin: 0 auto 8px !important;
    min-height: 42px !important;
    max-height: 46px !important;
    padding: 2px 4px !important;
  }

  /* PC action bar — weighted columns: Draw/Take/Discard primary, Hint compact, New Match + Guide */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions {
    display: grid !important;
    grid-template-columns:
      minmax(132px, 1.35fr)
      minmax(124px, 1.2fr)
      minmax(124px, 1.2fr)
      minmax(88px, 0.82fr)
      minmax(112px, 1.05fr)
      70px !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 960px !important;
    box-sizing: border-box !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions .btn,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions .discard-slot,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions .discard-slot > .btn {
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 12px 0 36px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    line-height: 1.15 !important;
    border-radius: 12px !important;
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions .discard-slot {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important; /* host-offer may pop above */
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions .discard-slot > .btn {
    width: 100% !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-draw {
    font-size: .84rem !important;
    letter-spacing: .04em !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-hint {
    padding: 0 8px !important;
    font-size: .72rem !important;
    letter-spacing: .02em !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-restart {
    padding: 0 10px !important;
    font-size: .76rem !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-draw::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-take::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-discard::before {
    left: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-hint::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-restart::before,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-draw::after,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-take::after,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions #btn-discard::after {
    content: none !important;
    display: none !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-actions .btn:not(:disabled):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.07);
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .player-rail .game-msg {
    display: none !important;
  }

  /* —— PC Game Table: Deep Green + Dark Wood + Gold (subtle Indian) —— */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-table {
    --rim: 10px !important;
    --table-radius: 28px !important;
    padding: var(--rim) !important;
    border-radius: var(--table-radius) !important;
    background:
      linear-gradient(145deg, #6b5210 0%, #c9a227 16%, #3d2e0a 48%, #2a1f08 78%, #6b5210 100%) !important;
    box-shadow:
      0 16px 36px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(255, 236, 180, .4),
      inset 0 -2px 6px rgba(0, 0, 0, .4) !important;
    overflow: visible !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-table::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: calc(var(--rim) - 3px) !important;
    border-radius: calc(var(--table-radius) - 4px) !important;
    border: 1.5px solid rgba(251, 191, 36, .5) !important;
    box-shadow: inset 0 0 0 1px rgba(3, 40, 28, .45) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    position: relative !important;
    border-radius: calc(var(--table-radius) - var(--rim)) !important;
    padding: 12px 18px 14px !important;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .04), transparent 48%),
      url("../rummy/background/table-pattern.svg") center / 80px repeat,
      linear-gradient(165deg, var(--rummy-table, #0c5a38) 0%, var(--rummy-green, #064e3b) 42%, var(--rummy-table-dark, #08422a) 100%) !important;
    box-shadow:
      inset 0 0 0 1.5px rgba(8, 50, 30, .5),
      inset 0 10px 24px rgba(0, 0, 0, .22) !important;
    overflow: visible !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-decor {
    z-index: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pattern {
    opacity: .05 !important;
    background: url("../images/felt-india-pattern.webp") center / 180px repeat !important;
    mix-blend-mode: soft-light;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pattern-royal {
    display: block !important;
    opacity: .04 !important;
    background: url("../rummy/background/royal-pattern.svg") center / 110px repeat !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-mandala-img {
    display: block !important;
    width: min(40%, 200px) !important;
    opacity: .05 !important;
    top: 42% !important;
    filter: none !important;
    animation: mandalaSpin 64s linear infinite !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-corner-orn {
    display: block !important;
    width: 48px !important;
    opacity: .28 !important;
    filter: none !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-corner-orn.tl { top: 8px !important; left: 10px !important; }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-corner-orn.tr { top: 8px !important; right: 10px !important; }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-corner-orn.bl {
    bottom: 10px !important; left: 12px !important; width: 40px !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-corner-orn.br {
    bottom: 10px !important; right: 12px !important; width: 40px !important;
  }

  /* Soft vignette only — hide busy casino micro-props */
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-glow {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0, 0, 0, .18) 100%) !important;
    pointer-events: none !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-line {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    width: min(360px, 52%) !important;
    height: 12px !important;
    transform: translateX(-50%) !important;
    background: url("../rummy/ornaments/ornamental-line.svg") center / contain no-repeat !important;
    opacity: .28 !important;
    pointer-events: none !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-line.top { top: 8px !important; }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-line.bottom {
    bottom: 8px !important;
    transform: translateX(-50%) scaleY(-1) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-paisley {
    display: block !important;
    position: absolute !important;
    width: 44px !important;
    opacity: .12 !important;
    pointer-events: none !important;
    filter: none !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-paisley.left {
    left: 4px !important; top: 30% !important; transform: rotate(-14deg) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-paisley.right {
    right: 4px !important; top: 32% !important; transform: scaleX(-1) rotate(-10deg) !important;
  }
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-peacock,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-chips,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-diya,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-pc-coin {
    display: none !important;
  }

  /* —— PC Player Area: gold ring + soft breathe —— */
  @keyframes rummyTurnBreathe {
    0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, .45), 0 0 10px rgba(251, 191, 36, .18); }
    50% { box-shadow: 0 0 0 2px rgba(251, 191, 36, .7), 0 0 16px rgba(251, 191, 36, .32); }
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat .avatar,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .seat .avatar {
    border: 2px solid var(--rummy-gold-line, #c9a227) !important;
    box-shadow: 0 0 0 1px rgba(255, 236, 180, .2), 0 4px 10px rgba(0, 0, 0, .35) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat.active .avatar,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .seat.active .avatar {
    border-color: var(--rummy-gold, #fbbf24) !important;
    animation: rummyTurnBreathe 2.8s ease-in-out infinite !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat .seat-name,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .seat .seat-name {
    color: var(--rummy-ivory, #f7f3e8) !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat.active .seat-status,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .seat.active .seat-status {
    color: var(--rummy-gold-light, #fde68a) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat-float.side-left,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat-float.side-right {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, .05), transparent 55%),
      rgba(4, 28, 20, .55) !important;
    border: 1px solid rgba(251, 191, 36, .28) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3) !important;
  }

  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat-float.side-left.active,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat-float.side-right.active,
  body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-inner > .seat-float.bottom.active {
    border-color: rgba(251, 191, 36, .5) !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .2), 0 8px 18px rgba(0, 0, 0, .32) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .felt-mandala-img,
    body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .seat.active .avatar,
    body.is-playing.play .game-shell:has(#battle-table:not([hidden])) .battle .seat.active .avatar {
      animation: none !important;
    }
  }
}

/* STEP 10 finale — action icons via ::before (survives background color rules) */
body.is-playing .game-actions #btn-draw,
body.is-playing .game-actions #btn-take,
body.is-playing .game-actions #btn-discard {
  position: relative;
  padding-left: 34px !important;
}
body.is-playing .game-actions #btn-draw::before,
body.is-playing .game-actions #btn-take::before,
body.is-playing .game-actions #btn-discard::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: .95;
}
body.is-playing .game-actions #btn-draw::before {
  background-image: url("../rummy/icons/action-draw.svg");
}
body.is-playing .game-actions #btn-take::before {
  background-image: url("../rummy/icons/action-take.svg");
}
body.is-playing .game-actions #btn-discard::before {
  background-image: url("../rummy/icons/action-discard.svg");
}
@media (max-width: 767px) {
  body.is-playing .game-actions #btn-draw::before,
  body.is-playing .game-actions #btn-take::before,
  body.is-playing .game-actions #btn-discard::before {
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
  }
  body.is-playing .game-actions #btn-draw,
  body.is-playing .game-actions #btn-take,
  body.is-playing .game-actions #btn-discard {
    padding: 24px 4px 6px !important;
  }
}

/* ============================================================================
   STEP 11–12 — Responsive QA + Performance / Accessibility
   ============================================================================ */

/* Kill remaining infinite / high-frequency motion (keep 150–250ms transitions) */
.start-btn,
.pile-center-gem img,
.led-scoreboard .led-value,
.result-diya::before,
.result-coin-float,
.casino-decor .m-casino-diya,
.casino-decor .m-casino-coin,
.casino-decor .m-casino-chip,
.start-art.card-float,
.start-art.mandala,
.start-art.win-glow {
  animation: none !important;
}

.pcard,
.pcard.selected,
.game-actions .btn,
.seat,
.seat .avatar,
.draw-pile,
.discard-visual,
.stock-visual {
  transition-duration: .18s;
  transition-timing-function: ease;
}

/* Primary action touch targets ≥ 44×44 (incl. short-height phones) */
@media (max-width: 767px) {
  .game-shell:has(#battle-table:not([hidden])) .game-actions .btn,
  .game-shell:has(#battle-table:not([hidden])) .game-actions .discard-slot,
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  .game-shell:has(#battle-table:not([hidden])) .game-actions .host-offer .btn {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  .start-btn,
  .btn-gold,
  .nav-dl,
  .play-settings,
  .lang-toggle {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Landscape phones / short viewports: compress vertical so hand + rail stay reachable */
@media (max-width: 1024px) and (orientation: landscape) {
  html,
  body.play,
  body.is-playing {
    overflow-x: clip;
  }

  body.is-playing .site-header,
  body.is-playing .lp-header,
  body.is-playing .play-header-extra,
  body.is-playing .led-scoreboard,
  body.is-playing .sticky-dl {
    display: none !important;
  }

  body.is-playing .game-shell,
  body.is-playing .board-arena,
  body.is-playing .felt-table {
    max-width: 100%;
    min-height: 0 !important;
  }

  body.is-playing .felt-inner {
    gap: 2px !important;
    padding: 2px 6px !important;
  }

  body.is-playing .seat.seat-float {
    transform: scale(0.85);
    transform-origin: top center;
  }

  body.is-playing .hand-stage.on-felt {
    min-height: 0 !important;
    padding: 2px 0 !important;
  }

  body.is-playing .hand-stage.on-felt .pcard {
    width: 36px !important;
    height: 52px !important;
  }

  body.is-playing .hand-stage.on-felt .hand {
    gap: 8px !important;
  }

  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 44px !important;
    height: 62px !important;
  }

  body.is-playing .player-rail {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding: 4px 10px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(7, 26, 20, 0.96);
  }

  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  body.is-playing .game-actions #btn-draw,
  body.is-playing .game-actions #btn-take,
  body.is-playing .game-actions #btn-discard {
    padding: 4px 8px 4px 28px !important;
    font-size: 0.72rem !important;
  }

  body.is-playing .game-actions #btn-draw::before,
  body.is-playing .game-actions #btn-take::before,
  body.is-playing .game-actions #btn-discard::before {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
  }

  body.is-playing .game-actions #btn-draw::after,
  body.is-playing .game-actions #btn-take::after,
  body.is-playing .game-actions #btn-discard::after {
    font-size: 0.72rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   MOBILE PLAY FIX — incomplete hand / clipped bottom row
   Scope: max-width 767px only. Desktop untouched.
   Pack piles + turn + hand to the bottom of the felt (above rail)
   so empty space sits ABOVE the table, not between turn chip and cards.
   ============================================================================ */
@media (max-width: 767px) {
  /*
    Prefer svh (small viewport) so mobile browser chrome / short
    embedded panels do not clip the hand + action rail.
  */
  html:has(body.is-playing.play),
  body.is-playing.play {
    height: 100% !important;
    max-height: 100dvh !important;
    max-height: 100svh !important; /* svh last: fit when browser chrome shrinks usable height */
    overflow: hidden !important;
  }

  /* Shell: battle grows, rail stays pinned under it */
  body.is-playing.play main#main.game-shell,
  body.is-playing.play .game-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Plan B (mobile): same crush fix — scroll SEO, protect table min height. */
  body.is-playing.play .game-shell > .wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }

  body.is-playing #battle-table,
  body.is-playing.play #battle-table {
    flex: 1 0 auto !important;
    min-height: min(48svh, 420px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.is-playing .player-rail,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 30 !important;
    margin: 0 !important;
    padding: 2px 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(7, 26, 20, 0.97) !important;
  }

  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    grid-template-rows: auto minmax(0, 1fr) !important;
    row-gap: 0 !important;
    padding: 0 2px !important;
    column-gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.is-playing .led-scoreboard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .led-scoreboard {
    margin: 0 0 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* Compact AI seats — reclaim vertical room */
  body.is-playing .side-rail .seat,
  body.is-playing .seat-float.side-left,
  body.is-playing .seat-float.side-right {
    transform: scale(0.88);
    transform-origin: top center;
    margin: 0 !important;
  }

  body.is-playing .felt-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-table {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /*
    Key fix: pack table content to the BOTTOM of the felt.
    Empty green space moves above DRAW/DISCARD; hand sits on the rail.
  */
  body.is-playing .felt-inner,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 4px !important;
    padding: 4px 2px 4px !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 36px !important;
    height: 50px !important;
  }

  body.is-playing .pile,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .pile {
    min-width: 0 !important;
    padding: 1px 3px 2px !important;
  }

  body.is-playing .pile .pile-label,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .pile .pile-label {
    font-size: 0 !important; /* real text hidden; ::after shows DRAW / DISCARD */
    line-height: 1.1 !important;
  }

  body.is-playing .pile .pile-count,
  body.is-playing .pile .pile-hint {
    display: none !important;
  }

  body.is-playing .battle .table-mid,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  body.is-playing .pile-ornament,
  body.is-playing .pile-center-gem {
    display: none !important;
  }

  /* Your Turn — single compact chip */
  body.is-playing .seat-float.bottom,
  body.is-playing .felt-inner > .seat-float.bottom,
  body.is-playing .board-arena .seat-float.bottom {
    min-height: 26px !important;
    height: auto !important;
    max-height: 30px !important;
    padding: 2px 10px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
  }

  body.is-playing .felt-inner > .seat-float.bottom .player-avatar-col,
  body.is-playing .felt-inner > .seat-float.bottom .seat-meta,
  body.is-playing .felt-inner > .seat-float.bottom .hud-stat {
    display: none !important;
  }

  /* Hand: content-sized, no margin-top:auto gap */
  body.is-playing .hand-stage.on-felt,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 2px 0 2px !important;
    overflow: visible !important;
    justify-content: center !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  body.is-playing .hand-stage.on-felt .hand-scroll,
  body.is-playing .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    padding: 2px !important;
    align-content: flex-end !important;
    justify-content: center !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.is-playing .hand-stage.on-felt .suit-group,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    gap: 1px !important;
    padding: 1px 1px 1px !important;
  }

  /* Compact cards — two rows + rail fit; keep tap targets usable */
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 34px !important;
    height: 48px !important;
    font-size: .64rem !important;
    margin-left: 0 !important;
  }

  body.is-playing .hand-stage.on-felt .pcard .suit,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: .76rem !important;
  }

  body.is-playing .hand-stage.on-felt .pcard.selected,
  body.is-playing .hand-stage.on-felt .pcard.new-draw,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-5px) !important;
  }

  body.is-playing .tip-row {
    margin: 0 0 2px !important;
    min-height: 0 !important;
  }

  body.is-playing .tip-row .meld-hint {
    -webkit-line-clamp: 1 !important;
    font-size: .62rem !important;
  }

  body.is-playing .deadwood-badge {
    font-size: .58rem !important;
    padding: 2px 6px !important;
  }

  body.is-playing .game-msg {
    display: none !important;
  }

  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  body.is-playing .game-actions #btn-draw,
  body.is-playing .game-actions #btn-take,
  body.is-playing .game-actions #btn-discard {
    padding: 18px 4px 4px !important;
  }

  body.is-playing .game-actions #btn-draw::before,
  body.is-playing .game-actions #btn-take::before,
  body.is-playing .game-actions #btn-discard::before {
    left: 50% !important;
    top: 4px !important;
    transform: translateX(-50%) !important;
    width: 13px !important;
    height: 13px !important;
  }

  /* Sticky download bar only — keep FAQ / demo-format / related / footer readable */
  body.is-playing .sticky-dl {
    display: none !important;
  }
}

/* Short phones — tighter cards + hide tip */
@media (max-width: 767px) and (max-height: 740px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 30px !important;
    height: 44px !important;
    font-size: .6rem !important;
  }

  body.is-playing .stock-visual,
  body.is-playing .discard-visual {
    width: 32px !important;
    height: 46px !important;
  }

  body.is-playing .tip-row {
    display: none !important;
  }

  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body.is-playing .side-rail .seat,
  body.is-playing .seat-float.side-left,
  body.is-playing .seat-float.side-right {
    transform: scale(0.8);
  }
}

/* Narrow phones */
@media (max-width: 374px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 26px !important;
    height: 38px !important;
  }
}