/**
 * MOBILE RUMMY UI REFINEMENT (2026-09-28)
 * Scope: max-width 767px ONLY. Desktop / 鈮?68px untouched.
 * Loaded after game.css on /rummy/ 鈥?cascades over MOBILE PLAY FIX sizes.
 * Goal: classic Online Rummy mobile table 鈥?card-first, compact, touch-friendly.
 */

@media (max-width: 767px) {
  /* 鈥斺€?P0 Header 52鈥?6px 鈥斺€?*/
  body.is-playing.play .site-header {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-bottom: 1px solid rgba(245, 250, 247, .08) !important;
    background: #041810 !important;
  }
  body.is-playing.play .play-back {
    font-size: 1.05rem !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 6px !important;
    color: var(--rummy-ivory, #f5faf7) !important;
  }
  body.is-playing.play .play-settings {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.15rem !important;
    border-color: rgba(245, 250, 247, .18) !important;
    color: var(--rummy-ivory, #f5faf7) !important;
    background: rgba(7, 26, 20, .9) !important;
  }

  /* 鈥斺€?P0 Stats one row 36鈥?4px 鈥斺€?*/
  body.is-playing .led-scoreboard {
    margin: 0 0 4px !important;
  }
  body.is-playing .led-screen.battle-hud {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(245, 250, 247, .1) !important;
    background: rgba(4, 24, 16, .65) !important;
    border-radius: 10px !important;
  }
  body.is-playing .led-scoreboard .led-label {
    font-size: .58rem !important;
    letter-spacing: .05em;
    color: rgba(245, 250, 247, .55) !important;
  }
  body.is-playing .led-scoreboard .led-value {
    font-size: .88rem !important;
    font-weight: 800;
    color: var(--rummy-ivory, #f5faf7) !important;
    animation: none !important;
  }
  body.is-playing .led-screen.battle-hud .hud-stat:nth-child(1) .led-value {
    font-size: 1rem !important;
    color: var(--rummy-ivory, #f5faf7) !important;
  }

  /* 鈥斺€?P0 Players compact 鈥斺€?*/
  body.is-playing .board-arena {
    row-gap: 2px !important;
    padding: 0 6px !important;
  }
  body.is-playing .side-rail .seat,
  body.is-playing .seat-float.side-left,
  body.is-playing .seat-float.side-right {
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body.is-playing .battle .seat-float.side-left .avatar,
  body.is-playing .battle .seat-float.side-right .avatar,
  body.is-playing .seat-float.side-left .avatar,
  body.is-playing .seat-float.side-right .avatar {
    width: 42px !important;
    height: 42px !important;
    border: 1.5px solid rgba(245, 250, 247, .18) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.is-playing .battle .seat-float.side-left.active .avatar,
  body.is-playing .battle .seat-float.side-right.active .avatar {
    border-color: var(--rummy-gold, #fbbf24) !important;
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, .45) !important;
  }
  body.is-playing .battle .seat-float .seat-name {
    font-size: .72rem !important;
    font-weight: 700;
  }
  body.is-playing .battle .seat-float .seat-status {
    font-size: .6rem !important;
  }
  body.is-playing .side-mini-hand,
  body.is-playing .side-rail .hud-stat,
  body.is-playing .ai-row {
    display: none !important;
  }

  /* 鈥斺€?P0 Game table: weaken pattern (keep Indian texture) 鈥斺€?*/
  body.is-playing .felt-pattern {
    opacity: .05 !important;
  }
  body.is-playing .felt-mandala-img,
  body.is-playing .felt-mandala {
    opacity: .06 !important;
    filter: none !important;
    animation: none !important;
  }
  body.is-playing .felt-corner-orn {
    opacity: .08 !important;
    width: 32px !important;
  }
  body.is-playing .hand-stage.on-felt::before {
    background: rgba(4, 24, 16, .2) !important;
  }
  body.is-playing .board-outer-art,
  body.is-playing .felt-chips,
  body.is-playing .m-casino-diya,
  body.is-playing .m-casino-chips {
    display: none !important;
  }

  /* Pack: Draw 鈫?Turn 鈫?Hand tight */
  body.is-playing .felt-inner {
    gap: 6px !important;
    padding: 2px 4px 6px !important;
    justify-content: flex-end !important;
  }
  body.is-playing .battle .table-mid {
    gap: 36px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 280px !important;
  }
  body.is-playing .pile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body.is-playing #pile-stock .pile-label::after,
  body.is-playing #pile-discard .pile-label::after {
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(245, 250, 247, .7) !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;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28) !important;
  }
  body.is-playing .stock-visual {
    border-color: rgba(251, 191, 36, .65) !important;
  }
  body.is-playing .discard-visual:not(.empty):not(.joker):not(.wild) {
    border-color: rgba(0, 0, 0, .12) !important;
  }

  /* 鈥斺€?P0 Your Turn chip 38鈥?2 脳 ~190 鈥斺€?*/
  body.is-playing .felt-inner > .seat-float.bottom,
  body.is-playing .seat-float.bottom,
  body.is-playing .board-arena .seat-float.bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 190px !important;
    max-width: 70% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(251, 191, 36, .28) !important;
    background: rgba(4, 17, 13, .78) !important;
    box-shadow: none !important;
  }
  body.is-playing .felt-inner > .seat-float.bottom .turn-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    color: var(--rummy-ivory, #f5faf7) !important;
  }
  body.is-playing .turn-icon {
    display: none !important;
  }
  body.is-playing .turn-dot {
    width: 8px !important;
    height: 8px !important;
    background: #34d399 !important;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, .22) !important;
    animation: none !important;
  }
  body.is-playing .turn-secs {
    margin-left: auto !important;
    color: var(--rummy-ivory, #f5faf7) !important;
    font-variant-numeric: tabular-nums;
  }
  body.is-playing .seat-float.bottom.warn-10 .turn-secs {
    color: var(--rummy-gold-soft, #fcd34d) !important;
  }
  body.is-playing .seat-float.bottom.warn-5 .turn-secs {
    color: #fbbf24 !important;
  }
  body.is-playing .seat-float.bottom.warn-3 {
    border-color: rgba(185, 28, 28, .7) !important;
  }
  body.is-playing .seat-float.bottom.warn-3 .turn-secs {
    color: #fca5a5 !important;
  }

  /* 鈥斺€?P0/P1 Hand = visual priority 鈥斺€?*/
  body.is-playing .hand-stage.on-felt {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 2px 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !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: 12px !important;
    padding: 6px 2px 4px !important;
    justify-content: center !important;
    align-content: flex-end !important;
    flex-wrap: wrap !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;
    padding: 2px 2px 4px !important;
    margin: 0 !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, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-pure,
  body.is-playing .hand-stage.on-felt .suit-group.valid, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-impure,
  body.is-playing .hand-stage.on-felt .suit-group.valid, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-set {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(52, 211, 153, .5) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group.valid, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-pure::after {
    width: 12px !important;
    height: 12px !important;
    bottom: -6px !important;
    opacity: .85 !important;
  }

  /* Cards ~375鈥?90 default */
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 42px !important;
    height: 62px !important;
    font-size: .72rem !important;
    margin-left: 0 !important;
    border-radius: 7px !important;
    background: #fbf8f0 !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    animation: none !important;
  }
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard .suit {
    font-size: .9rem !important;
  }
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected {
    transform: translateY(-10px) !important;
    border-color: var(--rummy-gold, #fbbf24) !important;
    outline: 1px solid rgba(251, 191, 36, .45);
    outline-offset: 0;
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, .35),
      0 6px 12px rgba(0, 0, 0, .28) !important;
    z-index: 6;
  }
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.new-draw {
    transform: translateY(-6px) !important;
  }
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.joker,
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.wild {
    border-color: var(--rummy-gold, #fbbf24) !important;
    border-width: 1.5px !important;
    background: linear-gradient(180deg, #fff9e8, #fbf8f0) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22) !important;
    animation: none !important;
    filter: none !important;
  }

  /* 鈥斺€?P1 Tip + Deadwood 鈥斺€?*/
  body.is-playing .player-rail {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 40 !important;
    min-height: 68px !important;
    padding: 8px 10px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(3, 20, 14, .97) !important;
    border-top: 1px solid rgba(245, 250, 247, .08) !important;
  }
  body.is-playing .tip-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    min-height: 0 !important;
  }
  body.is-playing .tip-row .meld-hint {
    font-size: .68rem !important;
    line-height: 1.25 !important;
    color: rgba(245, 250, 247, .62) !important;
    -webkit-line-clamp: 2 !important;
    font-weight: 600 !important;
  }
  body.is-playing .tip-row .meld-hint::before {
    content: none !important;
    display: none !important;
  }
  body.is-playing .deadwood-badge {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    color: rgba(245, 250, 247, .85) !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    flex-shrink: 0;
  }

  /* 鈥斺€?P1 Action bar 鈥斺€?*/
  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;
    min-width: 44px !important;
    border-radius: 12px !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
  }
  body.is-playing .game-actions #btn-draw {
    background: var(--rummy-green-light, #0a6b50) !important;
    border: 1px solid rgba(245, 250, 247, .12) !important;
    color: #fff !important;
  }
  body.is-playing .game-actions #btn-take {
    background: var(--rummy-green-dark, #033528) !important;
    border: 1px solid rgba(251, 191, 36, .55) !important;
    color: var(--rummy-gold-soft, #fcd34d) !important;
  }
  body.is-playing .game-actions #btn-discard {
    background: rgba(4, 24, 16, .9) !important;
    border: 1px solid rgba(245, 250, 247, .14) !important;
    color: rgba(245, 250, 247, .45) !important;
    opacity: .55;
  }
  body.is-playing .game-actions #btn-discard:not(:disabled),
  body.is-playing .game-actions #btn-discard.discard-ready:not(:disabled) {
    opacity: 1;
    color: var(--rummy-gold-soft, #fcd34d) !important;
    border-color: rgba(251, 191, 36, .65) !important;
    background: #0b3d2e !important;
  }
  body.is-playing .game-actions #btn-hint,
  body.is-playing .game-actions #btn-restart,
  body.is-playing .game-actions #btn-sort {
    display: none !important;
  }
}

/* Wider phones 390鈥?30 */
@media (min-width: 390px) and (max-width: 767px) {
  body.is-playing .hand-stage.on-felt .pcard, body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 44px !important;
    height: 66px !important;
    font-size: .76rem !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: 14px !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;
  }
}

/* Narrow phones 鈮?74 */
@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: 38px !important;
    height: 56px !important;
    font-size: .68rem !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: 10px !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: 50px !important;
    height: 70px !important;
  }
  body.is-playing .felt-inner > .seat-float.bottom {
    width: 170px !important;
  }
}

/* Short phones 鈥?keep tip + actions */
@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: 38px !important;
    height: 56px !important;
    font-size: .68rem !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: 48px !important;
    height: 68px !important;
  }
  body.is-playing .tip-row {
    display: flex !important;
    margin: 0 0 6px !important;
  }
  body.is-playing .tip-row .meld-hint {
    -webkit-line-clamp: 1 !important;
    font-size: .62rem !important;
  }
  body.is-playing .side-rail .seat,
  body.is-playing .seat-float.side-left,
  body.is-playing .seat-float.side-right {
    /* Avoid scale() — it shrinks the painted frame and looks clipped */
    transform: none !important;
  }
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}


/* Specificity boost — beat game.css :has() mobile pack rules */
@media (max-width: 767px) {
  body.is-playing .felt-pattern,
  body.is-playing .felt-table .felt-pattern,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-pattern {
    opacity: .05 !important;
  }
  body.is-playing .felt-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-table {
    background-image: none !important;
  }
  body.is-playing .felt-mandala-img,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-mandala-img {
    opacity: .06 !important;
  }
  body.is-playing .battle .table-mid,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    gap: 36px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  body.is-playing .hand-stage.on-felt .pcard.selected,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.selected {
    transform: translateY(-10px) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .35), 0 6px 12px rgba(0, 0, 0, .28) !important;
  }
  body.is-playing .hand-stage.on-felt .pcard.joker,
  body.is-playing .hand-stage.on-felt .pcard.wild,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.joker,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard.wild {
    border-color: #fbbf24 !important;
    animation: none !important;
  }
  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;
    padding: 4px 2px 2px !important;
    background: transparent !important;
  }
  body.is-playing .player-rail,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail {
    min-height: 68px !important;
    padding: 8px 10px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  body.is-playing .game-actions .btn,
  body.is-playing .game-actions .discard-slot,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .game-actions .btn,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .game-actions .discard-slot {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 52px !important;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 44px !important;
    height: 66px !important;
    font-size: .76rem !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 (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: 38px !important;
    height: 56px !important;
  }
}

@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: 38px !important;
    height: 56px !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: 48px !important;
    height: 68px !important;
  }
}

/* ===== Final cascade win (beat felt-inner baked pattern + :has card sizes) ===== */
@media (max-width: 767px) {
  body.is-playing .felt-inner,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    /* Solid green felt only — Indian texture lives on .felt-pattern @ 0.05 */
    background: linear-gradient(165deg, #0c5a38, #08422a 55%, #063522) !important;
    gap: 6px !important;
    padding: 2px 4px 6px !important;
    justify-content: flex-end !important;
  }
  body.is-playing .felt-pattern,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-pattern {
    display: block !important;
    opacity: .05 !important;
    background-image: url("../images/felt-india-pattern.webp") !important;
    background-size: 200px !important;
    background-repeat: repeat !important;
  }
  body.is-playing .felt-mandala-img,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-mandala-img {
    opacity: .06 !important;
  }
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 42px !important;
    height: 62px !important;
    font-size: .72rem !important;
    margin-left: 0 !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
  }
  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .battle .stock-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 .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    gap: 12px !important;
    flex-wrap: wrap !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: 0 !important;
    box-shadow: none !important;
    padding: 2px 2px 4px !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,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-pure,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-impure,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group.valid-set {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(52, 211, 153, .5) !important;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 44px !important;
    height: 66px !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;
  }
}

/* Pack seats + table to bottom of arena — remove mid-table void (mobile only) */
@media (max-width: 767px) {
  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    grid-template-rows: auto auto !important;
    align-content: end !important;
    row-gap: 4px !important;
  }
  body.is-playing .felt-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-table {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  body.is-playing .felt-inner,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
  }
}