/* QuickGamesArena non-shogi immersive arena v1
   -------------------------------------------------------------------------
   This late-loaded layer owns only shared theater framing and responsive
   presentation. Rules, coordinates, legal actions and private projections
   remain in the server snapshot and game_surface_renderer.js. */

.qg-competition-play-shell.qg-mode-theater > .qg-match-accessibility {
  display: none;
}

/* The lobby/rating/spectate columns belong to pre-match navigation. Keep
   them out of the live theater even though the legacy competition layer sets
   a later display:grid rule for the same panel. */
.qg-competition-play-shell.qg-mode-theater .qg-play-side {
  display: none !important;
}

.qg-competition-play-shell.qg-mode-theater > .qg-match-accessibility.is-arena-open {
  position: fixed;
  top: 72px;
  right: max(12px, env(safe-area-inset-right));
  z-index: 1350;
  display: block;
  width: min(420px, calc(100vw - 24px));
  margin: 0;
  border-color: rgba(var(--qg-realistic-accent-rgb, 94, 234, 212), .34);
  background: #09111c;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .56);
}

.qg-competition-play-shell.qg-mode-theater > .qg-match-accessibility.is-arena-open > summary {
  color: #f8fafc;
}

.qg-live-player-avatar-slot {
  box-sizing: border-box;
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
}

.qg-live-player-avatar-slot .qg-player-avatar-control {
  width: 38px;
  min-width: 38px;
  height: 38px;
}

.qg-live-player-avatar-slot .qg-player-avatar-initial {
  width: 15px;
  height: 15px;
  font-size: .48rem;
}

.qg-live-player-name-link {
  display: inline-flex;
  /* Poker/Hanafuda/Mahjong scale their dense visual table at some widths.
     Keep the post-transform profile target at or above the 24px WCAG AA
     minimum (28px becomes at least 24px at the smallest arena scale). */
  min-width: 28px;
  min-height: 28px;
  min-inline-size: 28px;
  min-block-size: 28px;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.qg-live-player-name-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.qg-live-player-name-link:focus-visible {
  border-radius: 3px;
  outline: 3px solid var(--qg-realistic-accent, #5eead4);
  outline-offset: 2px;
}

.qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] {
  position: relative;
  padding-left: 64px;
}

.qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] > .qg-live-player-avatar-slot,
.qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] > .qg-live-player-avatar-slot .qg-player-avatar-control {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

.qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] > .qg-live-player-avatar-slot {
  position: absolute;
  top: 50%;
  left: 9px;
  z-index: 3;
  transform: translateY(-50%);
}

.qg-poker-live-seat-copy.has-qg-live-avatar,
.qg-hanafuda-live-seat-copy.has-qg-live-avatar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}

.qg-poker-live-seat-copy.has-qg-live-avatar > .qg-live-player-avatar-slot,
.qg-hanafuda-live-seat-copy.has-qg-live-avatar > .qg-live-player-avatar-slot {
  grid-column: 1;
  grid-row: 1 / 4;
}

.qg-poker-live-seat-copy.has-qg-live-avatar > :not(.qg-live-player-avatar-slot),
.qg-hanafuda-live-seat-copy.has-qg-live-avatar > :not(.qg-live-player-avatar-slot) {
  grid-column: 2;
}

.qg-mahjong-live-seat > header.has-qg-live-avatar {
  grid-template-columns: 30px auto minmax(0, 1fr) auto;
}

.qg-mahjong-live-seat > header.has-qg-live-avatar > .qg-live-player-avatar-slot,
.qg-mahjong-live-seat > header.has-qg-live-avatar > .qg-live-player-avatar-slot .qg-player-avatar-control {
  width: 30px;
  min-width: 30px;
  height: 30px;
}

/* Keep the generic arena compact enough that the physical game remains the
   first visual target, while retaining identity, turn, settings and exit. */
.qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-bar {
  padding: 9px 12px;
}

.qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-actions {
  flex-wrap: wrap;
}

/* The resting chat becomes a non-obscuring table-side control in every live
   theater, matching the shogi reference behavior. */
body:has(.qg-competition-play-shell.qg-mode-theater) .qg-floating-chat:not(.is-open) {
  right: max(8px, env(safe-area-inset-right));
  left: auto;
  width: 44px;
  opacity: .9;
}

body:has(.qg-competition-play-shell.qg-mode-theater) .qg-floating-chat:not(.is-open) .qg-floating-chat-bar {
  display: flex;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 5px;
  border-radius: 50%;
}

body:has(.qg-competition-play-shell.qg-mode-theater) .qg-floating-chat:not(.is-open) .qg-floating-chat-mark {
  width: 34px;
  height: 34px;
}

body:has(.qg-competition-play-shell.qg-mode-theater) .qg-floating-chat:not(.is-open) :is(
  .qg-floating-chat-bar-copy,
  .qg-floating-chat-expand-icon
) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Mahjong presentation is viewer-relative. Do not tilt the authoritative
   table as one monolithic layer; the upright hand and readable HUD are
   independent from the decorative cloth and wall. */
.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-grid {
  transform: none;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
  transform: none;
}

@media (max-width: 680px) {
  .qg-competition-play-shell.qg-mode-theater > .qg-match-accessibility.is-arena-open {
    inset: max(8px, env(safe-area-inset-top)) 8px auto;
    width: auto;
    max-height: calc(100svh - 16px);
    overflow: auto;
  }

  .qg-generic-live-stage[data-qg-stage-game] {
    gap: 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 7px 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-identity {
    grid-column: 1 / -1;
    gap: 2px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-identity > strong {
    font-size: .86rem;
    line-height: 1.25;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-eyebrow,
  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-meta {
    flex-wrap: nowrap;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-turn {
    grid-column: 1;
    min-height: 42px;
    padding: 5px 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-turn > strong {
    display: -webkit-box;
    max-height: 2.5em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: .88rem;
    line-height: 1.25;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: flex-end;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-actions :is(button, a) {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 9px;
  }

  .qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] {
    padding-left: 56px;
  }

  .qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] > .qg-live-player-avatar-slot {
    left: 6px;
  }

  /* Poker: the viewer seat shares the table row instead of appearing after
     the table. This keeps the real decision context in the first viewport. */
  .qg-poker-live-table {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(252px, auto) auto auto;
  }

  .qg-poker-play-money-policy { grid-column: 1; grid-row: 1; padding: 5px 8px; }
  .qg-poker-live-seat--opponent { grid-column: 1; grid-row: 2; }
  .qg-poker-live-felt { grid-column: 1; grid-row: 3; }
  .qg-poker-live-seat--viewer {
    grid-column: 1;
    grid-row: 3;
    z-index: 5;
    align-self: end;
    width: calc(100% - 16px);
    margin: 0 8px -24px;
    background: linear-gradient(135deg, rgba(5, 48, 36, .94), rgba(4, 12, 16, .96));
    box-shadow: 0 16px 28px rgba(0, 0, 0, .42);
  }

  .qg-poker-live-status { grid-column: 1; grid-row: 4; margin-top: 22px; }
  .qg-poker-live-actions {
    grid-column: 1;
    grid-row: 5;
    position: sticky;
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 20;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .36);
  }

  .qg-poker-live-seat {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "copy cards roles"
      "chips chips chips";
  }

  .qg-poker-live-seat-copy { grid-area: copy; }
  .qg-poker-live-hole-cards { grid-area: cards; }
  .qg-poker-live-roles { grid-area: roles; }
  .qg-poker-live-seat-chips { grid-area: chips; }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-felt {
    min-height: 252px;
    padding: 24px 12px 118px;
    transform: none;
  }

  /* Hanafuda: keep the physical top/field/bottom order, but place the
     viewer's hand before secondary capture summaries on a narrow screen. */
  .qg-hanafuda-live-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "opponent opponent"
      "field field"
      "viewer viewer"
      "hand hand"
      "opponent-captures viewer-captures"
      "status status"
      "actions actions";
  }

  .qg-hanafuda-live-hand > div {
    display: flex;
    gap: 0;
    justify-content: center;
    overflow: visible;
  }

  .qg-hanafuda-live-hand .qg-hanafuda-live-card {
    flex: 0 0 44px;
    width: 44px;
    height: auto;
    min-height: 64px;
  }

  .qg-hanafuda-live-hand .qg-hanafuda-live-card + .qg-hanafuda-live-card {
    margin-left: -5px;
  }

  .qg-hanafuda-live-actions {
    position: sticky;
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 20;
  }

  /* The full 13/14-tile hand remains one physical rack. Horizontal scrolling
     is explicit instead of clipping the rightmost (often drawn) tile. */
  .qg-mahjong-live-hand > div {
    display: flex;
    gap: 3px;
    justify-content: flex-start;
    padding: 2px 4px 7px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-padding-inline: 4px;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(94, 234, 212, .58) rgba(2, 44, 39, .4);
    scrollbar-width: thin;
  }

  .qg-mahjong-live-hand .qg-mahjong-live-tile {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 54px;
    scroll-snap-align: start;
  }

  .qg-mahjong-live-actions {
    position: sticky;
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 20;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .36);
  }

  /* cms_game.css has a slug-scoped coarse-pointer rule after its compact
     Mahjong rule.  Match that specificity here so a tile never collapses to
     a 20px-wide target merely to force all fourteen tiles on screen.  A real
     hand stays one rack and pans horizontally with 44px controls. */
  .gameportal .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
    overflow: visible;
  }

  .gameportal .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand > div {
    display: flex;
    gap: 3px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
  }

  .gameportal .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand button.qg-mahjong-live-tile {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-inline-size: 44px;
    height: 58px;
    min-height: 58px;
    min-block-size: 58px;
  }
}

/* Short desktop windows
   -------------------------------------------------------------------------
   A wide browser can still be height-bound. Keep the mandatory sequence
   opponent -> physical surface -> viewer -> primary action in the first
   viewport, while records remain independently scrollable. This is a
   composition-only policy; server coordinates and legal actions are intact. */
@media (min-width: 681px) and (max-height: 820px) {
  .qg-competition-play-shell.qg-mode-theater .qg-play-panel {
    padding: 8px 12px;
  }

  .qg-generic-live-stage[data-qg-stage-game] {
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-bar {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .32fr) auto;
    gap: 6px 8px;
    min-height: 56px;
    padding: 5px 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-identity {
    gap: 1px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-last {
    display: none;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-turn {
    min-width: 150px;
    padding: 5px 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-game-surface {
    gap: 6px;
    margin: 0;
    padding: 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-game-surface-mount {
    min-height: 0;
    padding: 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] {
    min-height: 46px;
    padding-top: 3px;
    padding-right: 8px;
    padding-bottom: 3px;
    padding-left: 52px;
  }

  .qg-generic-live-stage[data-qg-stage-game] [class*="-player-strip"] > .qg-live-player-avatar-slot {
    left: 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game] [class*="-action-bar"] {
    gap: 6px;
  }

  .qg-competition-play-shell.qg-mode-theater .qg-result-review {
    max-height: calc(100svh - 78px);
  }

  /* Square and intersection boards keep useful desktop-sized cells without
     pushing either player or the action row below a 720/768px viewport. */
  .qg-generic-play-shell.qg-mode-theater .qg-generic-live-stage[data-qg-stage-game] .qg-surface-board-frame {
    width: min(100%, 60svh, 460px);
  }

  .qg-generic-play-shell[data-qg-game-slug="xiangqi"].qg-mode-theater .qg-generic-live-stage[data-qg-stage-game="xiangqi"] .qg-surface-board-frame {
    width: min(100%, 54svh, 420px);
  }

  /* A seated Hold'em view keeps the felt dominant, but the first decision
     row must be reachable without a blind scroll. */
  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-table {
    gap: 6px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-seat {
    min-height: 66px;
    padding: 6px 9px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-card {
    width: 56px;
    height: 79px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-felt {
    min-height: 292px;
    padding-block: 32px 50px;
    border-width: 10px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-seat--opponent {
    margin-bottom: -30px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-seat--viewer {
    margin-top: -48px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-status {
    padding: 6px 9px;
  }

  /* Koi-Koi needs only a modest density change: retain full-size art and
     reclaim height from framing, seat chrome and secondary capture trays. */
  .qg-generic-live-stage[data-qg-stage-game="hanafuda"] .qg-hanafuda-live-table {
    gap: 6px;
    padding: 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game="hanafuda"] .qg-hanafuda-live-seat {
    min-height: 56px;
    padding: 5px 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game="hanafuda"] .qg-hanafuda-live-field {
    min-height: 210px;
    padding: 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game="hanafuda"] .qg-hanafuda-live-captures {
    max-height: 244px;
    padding: 6px;
  }

  .qg-generic-live-stage[data-qg-stage-game="hanafuda"] .qg-hanafuda-live-hand {
    gap: 4px;
    padding: 5px 8px;
    transform: translateY(-5px) scale(1.01);
  }

  /* The automatic Mahjong table is width-driven. On short windows a 640px
     table remains readable and leaves room for the viewer's upright rack. */
  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-grid {
    width: min(100%, 640px);
    grid-template-columns: minmax(142px, 1fr) minmax(190px, 1.32fr) minmax(142px, 1fr);
    grid-template-rows: minmax(112px, 1fr) minmax(164px, 1.35fr) minmax(112px, 1fr);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
    margin-top: -18px;
    padding: 6px;
    transform: scale(1.015);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand .qg-mahjong-live-tile {
    height: 56px;
  }

  /* Backgammon's accessory rail is preserved below one continuous playfield;
     only the triangle length adapts to the constrained window. */
  .qg-generic-play-shell[data-qg-game-slug="backgammon"] .qg-surface-backgammon.is-live .qg-surface-backgammon-row,
  .qg-generic-play-shell[data-qg-game-slug="backgammon"] .qg-surface-backgammon.is-live .qg-surface-point--backgammon,
  .qg-generic-play-shell[data-qg-game-slug="backgammon"] .qg-surface-backgammon.is-live .qg-surface-backgammon-bar {
    min-height: 124px;
  }

  .qg-generic-play-shell[data-qg-game-slug="backgammon"] .qg-surface-backgammon.is-live .qg-surface-point--backgammon.is-top::before {
    border-top-width: 112px;
  }

  .qg-generic-play-shell[data-qg-game-slug="backgammon"] .qg-surface-backgammon.is-live .qg-surface-point--backgammon.is-bottom::before {
    border-bottom-width: 112px;
  }

  .qg-generic-play-shell[data-qg-game-slug="backgammon"] .qg-surface-backgammon.is-live .qg-surface-backgammon-checker {
    width: 22px;
    height: 22px;
  }

  .qg-generic-live-stage[data-qg-stage-game="backgammon"] .qg-backgammon-series-strip {
    padding: 4px 8px;
  }

  .qg-generic-live-stage[data-qg-stage-game="mancala"] .qg-surface-mancala--live {
    min-height: 270px;
  }
}

/* A 720px-tall desktop is the narrowest supported theater composition.
   Tighten only the priority tables enough to keep the complete decision
   surface (or the complete upright rack) inside that initial viewport. */
@media (min-width: 681px) and (max-height: 740px) {
  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-felt {
    min-height: 240px;
    padding-block: 24px 40px;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
    margin-top: -23px;
  }
}

@media (max-width: 430px) {
  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-turn {
    grid-column: 1;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-actions {
    grid-column: 2;
    display: flex;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-actions [data-qg-arena-settings] > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-last {
    display: none;
  }

  .qg-generic-live-stage[data-qg-stage-game] .qg-generic-arena-eyebrow small {
    max-width: 12rem;
  }

  .qg-poker-live-seat-copy.has-qg-live-avatar,
  .qg-hanafuda-live-seat-copy.has-qg-live-avatar {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 6px;
  }

  .qg-poker-live-seat-copy.has-qg-live-avatar > .qg-live-player-avatar-slot,
  .qg-hanafuda-live-seat-copy.has-qg-live-avatar > .qg-live-player-avatar-slot,
  .qg-poker-live-seat-copy.has-qg-live-avatar > .qg-live-player-avatar-slot .qg-player-avatar-control,
  .qg-hanafuda-live-seat-copy.has-qg-live-avatar > .qg-live-player-avatar-slot .qg-player-avatar-control {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .qg-hanafuda-live-field { min-height: 198px; }

  .qg-hanafuda-live-captures {
    max-height: 124px;
  }

  .qg-mahjong-live-seat > header.has-qg-live-avatar {
    grid-template-columns: 22px 22px minmax(0, 1fr);
    gap: 2px;
  }

  .qg-mahjong-live-seat > header.has-qg-live-avatar > .qg-live-player-avatar-slot,
  .qg-mahjong-live-seat > header.has-qg-live-avatar > .qg-live-player-avatar-slot .qg-player-avatar-control {
    width: 22px;
    min-width: 22px;
    height: 22px;
  }

  /* A phone uses a compact seated Poker composition. Direct decisions share
     one row and the raise editor shares a second row, so every legal control
     is reachable without depending on page scrolling inside the theater. */
  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-table {
    gap: 5px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-play-money-policy {
    padding: 3px 6px;
    font-size: .58rem;
    line-height: 1.2;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-seat {
    gap: 4px 6px;
    padding: 5px 6px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-felt {
    min-height: 190px;
    padding: 16px 10px 84px;
    border-width: 5px;
    transform: perspective(900px) rotateX(2deg);
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-status {
    margin-top: 16px;
    padding: 5px 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-actions {
    gap: 6px;
    padding: 6px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-actions > div:first-child {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-action {
    min-height: 44px;
    padding: 5px 4px;
    font-size: .66rem;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-raise {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 6px;
    align-items: center;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-raise > div {
    grid-column: 2;
    grid-row: 1;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-raise input[type="number"] {
    width: 68px;
    min-height: 44px;
    padding: 5px;
  }

  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-raise > small,
  .qg-generic-live-stage[data-qg-stage-game="poker"] .qg-poker-live-raise > output {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* Recover the last few pixels of the initial phone viewport without
     shrinking Koi-Koi cards or Backgammon controls below their touch target. */
  .qg-generic-live-stage[data-qg-stage-game="hanafuda"] .qg-hanafuda-live-field {
    min-height: 182px;
  }

  .qg-generic-live-stage[data-qg-stage-game="backgammon"] .qg-backgammon-series-strip {
    padding: 4px 7px;
  }

  .qg-generic-live-stage[data-qg-stage-game="backgammon"] .qg-backgammon-scoreboard > span {
    min-height: 36px;
  }

  .qg-generic-live-stage[data-qg-stage-game="backgammon"] .qg-backgammon-player-strip {
    min-height: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qg-live-player-avatar-slot .qg-player-avatar-control,
  .qg-live-player-name-link {
    transition: none;
  }
}

@media (forced-colors: active) {
  .qg-live-player-avatar-slot .qg-player-avatar-control,
  .qg-live-player-name-link {
    forced-color-adjust: auto;
  }
}

/* Mahjong layered perspective
   -------------------------------------------------------------------------
   The seated player's rack, actions and profile controls stay on an upright
   interaction plane.  Only the decorative table and public tabletop zones
   recede, so tile text, focus rings and semantic bounds are never flattened
   by one monolithic 3D transform. */
.qg-generic-live-stage[data-qg-stage-game="mahjong"]
  .qg-mahjong-live[data-qg-mahjong-presentation="layered-perspective"] {
  --qg-mahjong-far-inset: 12%;
  --qg-mahjong-near-apron: clamp(20px, 2.4vw, 30px);
  --qg-mahjong-scene-width: min(100%, 920px);
  isolation: isolate;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-scene {
  position: relative;
  isolation: isolate;
  width: var(--qg-mahjong-scene-width);
  aspect-ratio: 1.28;
  margin-inline: auto;
  overflow: visible;
  perspective: 1400px;
  filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .48));
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane {
  position: absolute;
  inset: 0 1.5%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(
    var(--qg-mahjong-far-inset) 0,
    calc(100% - var(--qg-mahjong-far-inset)) 0,
    100% 100%,
    0 100%
  );
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 13% 86%, rgba(0, 0, 0, .38)),
    linear-gradient(165deg, #33463f, #14251f 55%, #07120f);
  box-shadow:
    inset 0 0 0 1px rgba(240, 253, 250, .16),
    inset 0 -12px 18px rgba(0, 0, 0, .58);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.2vw, 14px) clamp(9px, 1.35vw, 17px) var(--qg-mahjong-near-apron);
  clip-path: polygon(9.5% 0, 90.5% 0, 100% 100%, 0 100%);
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(203, 255, 235, .12), transparent 35%),
    linear-gradient(180deg, rgba(2, 59, 49, .08), rgba(0, 25, 21, .42)),
    url("../visual_assets/materials/emerald-baize.webp");
  background-size: auto, auto, 430px 430px;
  box-shadow:
    inset 0 0 0 2px rgba(167, 243, 208, .12),
    inset 0 0 58px rgba(0, 0, 0, .43);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--qg-mahjong-near-apron);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
  border-top: 1px solid rgba(226, 232, 240, .15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 18%),
    repeating-linear-gradient(96deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #31443d, #14251f 54%, #08120f);
  box-shadow: inset 0 -7px 11px rgba(0, 0, 0, .58), 0 9px 12px rgba(0, 0, 0, .42);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-grid {
  position: absolute;
  inset: 2.5% 4.2% 7.5%;
  z-index: 2;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: clamp(4px, .65vw, 8px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  grid-template-columns: minmax(150px, .94fr) minmax(226px, 1.42fr) minmax(150px, .94fr);
  grid-template-rows: minmax(108px, .72fr) minmax(210px, 1.4fr) minmax(136px, .94fr);
  gap: clamp(3px, .55vw, 7px);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat.is-turn {
  border-color: rgba(94, 234, 212, .5);
  background: radial-gradient(ellipse at center, rgba(13, 148, 136, .24), rgba(2, 44, 39, .05) 72%);
  box-shadow: 0 0 26px rgba(45, 212, 191, .12), inset 0 0 0 1px rgba(94, 234, 212, .08);
}

/* Keep identity/profile controls upright. Recede only physical tabletop
   content, and size the far seat through layout rather than shrinking its
   clickable header. */
.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat--top {
  width: 86%;
  justify-self: center;
  align-self: end;
  transform: translateY(3px);
  transform-origin: center bottom;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"]
  .qg-mahjong-live-seat--top :is(.qg-mahjong-live-concealed-rack, .qg-mahjong-live-river, .qg-mahjong-live-melds) {
  transform: scale(.84);
  transform-origin: center top;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"]
  :is(.qg-mahjong-live-seat--left, .qg-mahjong-live-seat--right) {
  width: 94%;
  align-self: center;
  transform: none;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat--left {
  justify-self: end;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat--right {
  justify-self: start;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"]
  :is(.qg-mahjong-live-seat--left, .qg-mahjong-live-seat--right)
  :is(.qg-mahjong-live-concealed-rack, .qg-mahjong-live-river, .qg-mahjong-live-melds) {
  transform: scale(.92);
  transform-origin: center top;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat--bottom {
  align-self: start;
  transform: translateY(2px);
  transform-origin: center top;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-center {
  width: 94%;
  justify-self: center;
  align-self: center;
  transform: translateY(1.5%) scale(.96);
  transform-origin: center;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    0 17px 23px rgba(0, 0, 0, .4),
    0 0 32px rgba(5, 150, 105, .09);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-wall-side--top {
  transform: scaleX(.8);
  transform-origin: center bottom;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-wall-side--bottom {
  transform: rotate(180deg) scaleX(1.05);
  transform-origin: center;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"]
  :is(.qg-mahjong-live-wall-side--left, .qg-mahjong-live-wall-side--right) {
  transform-origin: center;
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-wall-side--left {
  transform: scaleY(.92);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-wall-side--right {
  transform: rotate(180deg) scaleY(.92);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
  position: relative;
  z-index: 7;
  width: min(100%, 940px);
  margin: calc(var(--qg-mahjong-near-apron) * -1.45) auto 0;
  transform: none;
  transform-origin: center top;
  border-color: rgba(153, 246, 228, .24);
  background:
    linear-gradient(180deg, rgba(8, 47, 43, .94), rgba(1, 24, 23, .96)),
    url("../visual_assets/materials/emerald-baize.webp");
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    inset 0 -12px 20px rgba(0, 0, 0, .28),
    0 21px 30px rgba(0, 0, 0, .43);
}

.qg-generic-live-stage[data-qg-stage-game="mahjong"]
  .qg-mahjong-live-hand .qg-mahjong-live-tile {
  filter: drop-shadow(2px 8px 5px rgba(0, 0, 0, .46));
}

@media (min-width: 681px) and (max-height: 820px) {
  .qg-generic-live-stage[data-qg-stage-game="mahjong"]
    .qg-mahjong-live[data-qg-mahjong-presentation="layered-perspective"] {
    --qg-mahjong-scene-width: min(100%, 650px);
    --qg-mahjong-near-apron: 22px;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-grid {
    grid-template-columns: minmax(128px, .94fr) minmax(184px, 1.38fr) minmax(128px, .94fr);
    grid-template-rows: minmax(92px, .72fr) minmax(152px, 1.38fr) minmax(98px, .9fr);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
    margin-top: -30px;
    padding: 6px;
  }
}

@media (max-width: 680px) {
  .qg-generic-live-stage[data-qg-stage-game="mahjong"]
    .qg-mahjong-live[data-qg-mahjong-presentation="layered-perspective"] {
    --qg-mahjong-far-inset: 9%;
    --qg-mahjong-near-apron: 18px;
    --qg-mahjong-scene-width: 100%;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-scene {
    height: clamp(340px, 78vw, 520px);
    aspect-ratio: auto;
    filter: drop-shadow(0 17px 15px rgba(0, 0, 0, .45));
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane {
    inset-inline: .5%;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane::before {
    inset: 7px 7px var(--qg-mahjong-near-apron);
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
    background-size: auto, auto, 320px 320px;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-grid {
    inset: 2% 1.5% 8%;
    width: auto;
    min-height: 0;
    padding: 3px;
    grid-template-columns: minmax(78px, .82fr) minmax(108px, 1.18fr) minmax(78px, .82fr);
    grid-template-rows: 92px minmax(112px, 1fr) 96px;
    gap: 2px;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live.has-long-river .qg-mahjong-live-scene {
    height: clamp(380px, 92vw, 438px);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live.has-long-river .qg-mahjong-live-table-grid {
    min-height: 0;
    grid-template-rows: 108px minmax(128px, 1fr) 108px;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-seat--top,
  .qg-generic-live-stage[data-qg-stage-game="mahjong"]
    :is(.qg-mahjong-live-seat--left, .qg-mahjong-live-seat--right) {
    width: 100%;
    transform: none;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"]
    .qg-mahjong-live-seat--top :is(.qg-mahjong-live-concealed-rack, .qg-mahjong-live-river, .qg-mahjong-live-melds) {
    transform: scale(.9);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"]
    :is(.qg-mahjong-live-seat--left, .qg-mahjong-live-seat--right)
    :is(.qg-mahjong-live-concealed-rack, .qg-mahjong-live-river, .qg-mahjong-live-melds) {
    transform: scale(.96);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-center {
    width: 98%;
    transform: none;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-wall {
    display: none;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-hand {
    width: 100%;
    margin-top: -22px;
    transform: none;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"]
    .qg-mahjong-live-hand .qg-mahjong-live-tile {
    filter: drop-shadow(1px 5px 4px rgba(0, 0, 0, .43));
  }
}

@media (max-width: 430px) {
  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-scene {
    height: clamp(340px, 90vw, 374px);
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live.has-long-river .qg-mahjong-live-scene {
    height: clamp(380px, 100vw, 410px);
  }
}

@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane,
  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane::before,
  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane::after {
    clip-path: none;
    border-radius: 18px;
  }
}

@media (forced-colors: active) {
  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-plane {
    display: none;
  }

  .qg-generic-live-stage[data-qg-stage-game="mahjong"] .qg-mahjong-live-table-grid {
    border: 2px solid CanvasText;
    background: Canvas;
  }
}