:root {
  --ink: #e7f6f3;
  --muted: #98c5bb;
  --table-wood-a: #5f3318;
  --table-wood-b: #2d170b;
  --felt-a: #0d4f4f;
  --felt-b: #0a2f3f;
  --panel-bg: #10262e;
  --panel-line: #2f5f69;
  --chip-line: #d8b889;
  --chip-bg: #f6e5c6;
  --accent: #f6c868;
  --accent-strong: #d0942f;
  --danger: #cf6d52;
  --main-zone-w: clamp(460px, 60vw, 700px);
  --main-zone-h: 68px;
  --main-discard-two-row-h: 92px;
  --side-zone-w: 72px;
  --side-zone-gap: 2px;
  --side-zone-h: 252px;
  --side-discard-w: 166px;
  --side-discard-h: 194px;
  --side-open-row-w: 94px;
  --side-open-col-w: 40px;
  --side-open-h: 460px;
  --side-seat-w: calc(var(--side-discard-w) + var(--side-open-row-w) + 8px);
  --tile-base-w: 28px;
  --tile-base-h: 39px;
  --tile-op-w: 24px;
  --tile-op-h: 34px;
  --tile-side-op-w: 23px;
  --tile-side-op-h: 33px;
  --tile-side-meld-w: 40px;
  --tile-side-meld-h: 32px;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
  min-height: 100dvh;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 20% 8%, #ffffff14 0%, transparent 40%),
    radial-gradient(circle at 85% 20%, #35b8be24 0%, transparent 45%),
    linear-gradient(180deg, #08171d 0%, #091720 100%);
}

button,
label,
.chip,
.tile-face,
.table-stage {
  touch-action: manipulation;
}

.page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 14px 26px;
}

.hero h1 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}

.hero p {
  margin: 6px 0 14px;
  color: var(--muted);
}

.panel {
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #0f2a32 0%, #0d222b 100%);
  box-shadow: inset 0 1px 0 #ffffff10, 0 12px 24px #0000002f;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #d8f0ea;
}

.tools-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #89c8bc;
}

.hidden {
  display: none !important;
}

/* Keep grid/flex slot while hiding content and interaction. */
.hidden-preserve {
  visibility: hidden !important;
  pointer-events: none !important;
}

.table-panel {
  padding: 10px;
}

.mobile-tools-toggle,
.mobile-tools-fab,
.mobile-tools-close {
  display: none;
}

.mobile-tools-sheet {
  display: contents;
}

.tools-panel-head {
  display: none;
}

.table-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 528px;
  border-radius: 18px;
  border: 1px solid #6d3f21;
  background:
    radial-gradient(circle at 50% 52%, #2fadb42b 0%, transparent 45%),
    linear-gradient(180deg, var(--felt-a) 0%, var(--felt-b) 100%);
  box-shadow: inset 0 0 0 10px #3f220f, inset 0 0 0 12px #7d4c28, 0 12px 28px #00000061;
  overflow: hidden;
}

.table-stage.pre-game .top-open-row,
.table-stage.pre-game .side-open-row,
.table-stage.pre-game .op-hand,
.table-stage.pre-game .hand,
.table-stage.pre-game .discard-zone,
.table-stage.pre-game .player-hand-band {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.table-meta {
  position: absolute;
  left: 1.3%;
  top: 1.8%;
  z-index: 5;
}

.panel-chip {
  width: 124px;
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #4a2a13 0%, #2f190b 100%);
  border: 1px solid #7f4f2c;
  box-shadow: 0 4px 8px #00000042;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: #f8d9ab;
  margin-bottom: 5px;
}

.meta-row:last-child {
  margin-bottom: 0;
}

.meta-label {
  color: #e4b672;
}

.rules-chip {
  position: absolute;
  top: 2%;
  right: 1.4%;
  z-index: 6;
  border: 1px solid #81512d;
  border-radius: 8px;
  background: linear-gradient(180deg, #4f2b14 0%, #341c0d 100%);
  color: #f4d7ae;
  padding: 7px 12px;
  font-size: 0.84rem;
}

.mobile-new-game-chip {
  display: none;
}

.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #041318ba;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.rules-modal-card {
  width: min(460px, calc(100vw - 28px));
  max-height: min(74vh, 620px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid #4f7e8a;
  background: linear-gradient(180deg, #102b34 0%, #0d242d 100%);
  box-shadow: 0 16px 30px #00000066;
  padding: 12px;
}

.rules-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.rules-modal-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #d6f1ea;
}

.rules-modal-close {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.82rem;
}

.rules-fan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.rules-fan-list li {
  border: 1px solid #3f6c79;
  border-radius: 8px;
  background: #0d313da8;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rules-fan-name {
  color: #d8f2ec;
  font-size: 0.9rem;
}

.rules-fan-mul {
  color: #f7d89f;
  font-size: 0.84rem;
  white-space: nowrap;
}

.confirm-modal-card {
  max-width: 380px;
}

.confirm-modal-text {
  color: #d7efe9;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.confirm-modal-tile {
  width: 24px;
  height: 34px;
  vertical-align: -7px;
  margin: 0 2px;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-modal-actions .btn {
  min-height: 34px;
  padding: 6px 12px;
}

.confirm-modal-actions .confirm-ok {
  border: 1px solid #6e9fa9;
  color: #f7f3e2;
  background: #2f4e59;
}

.seat {
  position: absolute;
  z-index: 2;
}

.seat-top {
  left: calc(1.6% + 200px);
  right: calc(1.6% + 200px);
  top: 2.8%;
  transform: none;
  width: auto;
  max-width: none;
}

.seat-right {
  right: calc(var(--tile-side-op-w) * 2);
  top: calc(6% + 40px);
  width: auto;
  display: grid;
  grid-template-columns: var(--side-discard-w) auto;
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-content: start;
}

.seat-left {
  left: calc(var(--tile-side-op-w) * 2);
  top: calc(6% + 40px);
  width: auto;
  display: grid;
  grid-template-columns: auto var(--side-discard-w);
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-content: start;
}

.seat-bottom {
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  width: clamp(420px, 52vw, 620px);
  max-width: calc(100% - 640px);
}

.seat-info {
  margin-bottom: 4px;
  text-align: center;
  font-size: 0.8rem;
  color: #d1ebe6;
  text-shadow: 0 1px 2px #00000085;
}

/* Move seat/dealer info to the left side of each hand container via pseudo label. */
.seat-info {
  display: none;
}

.seat-open-row {
  position: relative;
}

.seat-open-label {
  position: absolute;
  left: -56px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border-radius: 6px;
  background: transparent;
  color: #d7efea;
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.seat-open-label-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.player-hand-band .bottom-open-row .seat-open-label {
  left: -82px;
}

/* Seat labels outside hand region by each player's own perspective-left side. */
.seat-top .top-open-row .seat-open-label {
  left: auto;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
}

.seat-right .right-open-row .seat-open-label {
  left: 50%;
  top: auto;
  bottom: -18px;
  transform: translateX(-50%);
}

.seat-left .left-open-row .seat-open-label {
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
}

.seat-open-row {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
}

.top-open-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #4e8d9b58;
  background: #0d3142a1;
}

.top-hand-stack {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}

.seat-top .top-open-row .op-hand {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.op-draw-slot.horizontal {
  flex: 0 0 calc(var(--tile-op-w) + 8px);
  min-width: calc(var(--tile-op-w) + 8px);
  min-height: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.seat-top .top-open-row .meld-zone {
  order: 3;
  flex: 0 1 auto;
  width: auto;
  min-height: 36px;
  max-height: 36px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-content: center;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.side-open-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: max-content;
  min-width: 34px;
  height: var(--side-open-h);
  min-height: var(--side-open-h);
  justify-content: space-between;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #4e8d9b58;
  background: #0d3142a1;
  overflow: visible;
}

.seat-right .player-card,
.seat-right .seat-info,
.seat-left .player-card,
.seat-left .seat-info {
  grid-column: 1 / span 2;
}

.seat-right .discard-zone.vertical {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
}

.seat-right .right-open-row {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  justify-content: flex-start;
}

.seat-right .right-open-row .op-hand.vertical {
  order: 1;
}

.seat-right .right-open-row .meld-zone.vertical {
  order: 2;
}

.seat-left .left-open-row {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.seat-left .left-open-row .op-hand.vertical {
  flex: 0 0 auto;
  overflow-y: hidden;
  margin-top: auto;
}

.seat-left .left-open-row .op-hand.vertical.has-win-final {
  margin-bottom: 0;
  max-height: none;
  overflow-y: visible;
}

.seat-left .left-open-row .op-hand.vertical.has-draw-final {
  overflow-y: visible;
}

.seat-right .right-open-row .op-hand.vertical.has-win-final {
  margin-top: auto;
  max-height: none;
  overflow-y: visible;
}

.seat-right .right-open-row .op-hand.vertical.has-draw-final {
  max-height: none;
  overflow-y: visible;
}

.seat-left .left-open-row .meld-zone.vertical.is-empty {
  width: 0;
  min-width: 0;
  max-width: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

.seat-left .left-open-row .meld-zone.vertical.is-empty + .op-hand.vertical {
  max-height: calc(var(--side-open-h) - (var(--tile-side-op-h) * 2));
}

.seat-left .discard-zone.vertical {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
}

.side-open-row .op-hand.vertical,
.side-open-row .meld-zone.vertical {
  width: auto;
  min-width: var(--side-open-col-w);
  max-width: none;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  justify-content: flex-start;
  gap: 0;
}

.side-open-row .op-hand.vertical {
  flex: 1 1 auto;
  grid-template-columns: max-content;
  justify-content: center;
  justify-items: center;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.side-hand-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

.side-hand-stack-left {
  justify-content: flex-start;
}

.op-draw-slot.vertical {
  width: var(--side-open-col-w);
  min-width: var(--side-open-col-w);
  height: 42px;
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 6px;
}

.op-draw-slot.vertical.op-draw-slot-bottom {
  align-items: flex-end;
  margin-bottom: 0;
  margin-top: 6px;
}

.side-open-row .meld-zone.vertical {
  flex: 0 0 auto;
  min-height: 96px;
  max-height: none;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  overflow-x: visible;
  overflow-y: visible;
}

.side-open-row .meld-group {
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
}

.side-open-row .tile-face.op-tile {
  width: 35px;
  height: 32px;
}

.side-open-row .tile-face.meld-tile {
  width: var(--tile-side-meld-w);
  height: var(--tile-side-meld-h);
}

.side-open-row .op-hand.vertical .tile-face + .tile-face {
  margin-top: -7px;
}

.seat-left .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back,
.seat-right .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back {
  margin-top: -11px;
}

.side-open-row .meld-group .tile-face + .tile-face {
  margin-top: -6px;
}

.side-open-row .meld-zone.vertical .meld-group + .meld-group {
  margin-top: 0;
}

.seat-left .side-open-row .meld-group .tile-face + .tile-face {
  margin-top: -4px;
}

.seat-left .side-open-row .meld-zone.vertical .meld-group + .meld-group {
  margin-top: 0;
}

.seat-right .side-open-row .meld-group .tile-face + .tile-face {
  margin-top: -4px;
}

.seat-right .side-open-row .meld-zone.vertical .meld-group + .meld-group {
  margin-top: 0;
}

.bottom-open-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
}

.bottom-open-row.hand-insert-active {
  overflow: visible;
}

.player-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.avatar-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f6f6ef;
  background: linear-gradient(180deg, #2d8e9c 0%, #1d5e6f 100%);
  border: 1px solid #89cfd8;
  box-shadow: 0 2px 5px #00000055;
  text-shadow: 0 1px 1px #00121799;
}

.avatar-photo {
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.avatar-seat0 {
  background: linear-gradient(180deg, #f4d36c 0%, #bf7a1f 100%);
  border-color: #f8e5a3;
  color: #261100;
  text-shadow: none;
}

.avatar-seat1 {
  background: linear-gradient(180deg, #7b8dff 0%, #4156b9 100%);
  border-color: #b9c3ff;
}

.avatar-seat2 {
  background: linear-gradient(180deg, #4fb7a7 0%, #1a766a 100%);
  border-color: #98e0d6;
}

.avatar-seat3 {
  background: linear-gradient(180deg, #d8798e 0%, #9f3958 100%);
  border-color: #f3b5c3;
}

.score-chip {
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.72rem;
  color: #f7d89f;
  border: 1px solid #7d4e2c;
  background: #2f1b0f;
}

.op-hand {
  min-height: 42px;
  margin-bottom: 4px;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #4e8d9b58;
  background: #0d3142a1;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  align-content: flex-start;
}

.op-hand.vertical {
  min-height: 92px;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  justify-items: center;
}

.top-open-row .op-hand {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.tile-face.op-tile {
  width: var(--tile-op-w);
  height: var(--tile-op-h);
}

.discard-zone {
  min-height: var(--main-zone-h);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #6cb8b66e;
  background: #0413188f;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  align-content: flex-start;
}

.discard-zone.vertical {
  width: var(--side-zone-w);
  min-height: var(--side-zone-h);
  max-height: var(--side-zone-h);
  gap: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  overflow: hidden;
  overflow: clip;
}

.discard-zone.vertical.discard-zone-side {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2px;
  justify-content: flex-start;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.discard-zone-side-right {
  flex-direction: row;
}

.discard-zone-side-left {
  flex-direction: row-reverse;
}

.discard-col {
  display: grid;
  grid-auto-rows: 28px;
  row-gap: 2px;
  justify-items: center;
  align-content: start;
  min-width: 39px;
  max-height: var(--side-discard-h);
  overflow: hidden;
  position: relative;
}

.discard-zone-side-right .discard-col {
  height: calc(var(--side-discard-h) - 8px);
  align-content: end;
}

.discard-zone-side-left .discard-col {
  align-content: start;
}

.discard-slot {
  width: 39px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discard-zone-side .tile-face {
  display: block;
  width: var(--tile-base-w);
  height: var(--tile-base-h);
}

.discard-zone-side-left .discard-col-newest {
  box-shadow: inset 0 0 0 1px #8fd5d0a3;
  border-radius: 3px;
}

.debug-discard-left .seat-left .discard-zone.vertical {
  overflow: auto;
}

.debug-discard-left .seat-left .discard-zone .discard-col {
  outline: 1px dashed #ff8f4a;
  outline-offset: -1px;
}

.debug-discard-left .seat-left .discard-zone .discard-col-newest {
  outline: 2px solid #ffd14a;
}

.meld-zone {
  min-height: var(--main-zone-h);
  margin-bottom: 0;
  padding: 3px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  align-content: flex-start;
}

.meld-zone.vertical {
  width: var(--side-zone-w);
  min-height: var(--side-zone-h);
  max-height: var(--side-zone-h);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.seat-right .discard-zone.vertical,
.seat-left .discard-zone.vertical {
  width: var(--side-discard-w);
  min-height: var(--side-discard-h);
  max-height: var(--side-discard-h);
}

.seat-top .meld-zone,
.seat-bottom .meld-zone,
.seat-bottom .meld-zone {
  width: 100%;
  min-height: var(--main-zone-h);
  max-height: var(--main-zone-h);
  overflow: hidden;
}

.seat-top .discard-zone,
.seat-bottom .discard-zone {
  width: 284px;
  min-height: var(--main-discard-two-row-h);
  max-height: var(--main-discard-two-row-h);
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
  align-content: flex-start;
  overflow: hidden;
}

.seat-top .discard-zone {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  align-content: flex-start;
}

.seat-bottom .discard-zone {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}

.meld-group {
  display: inline-flex;
  gap: 1px;
  padding: 1px 3px;
  border-radius: 6px;
  border: none;
  background: transparent;
}

.tile-face.meld-tile {
  width: var(--tile-op-w);
  height: var(--tile-op-h);
}

.seat-right .meld-group,
.seat-left .meld-group {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tile-face.latest-discard.tile-loaded {
  animation: none;
  outline: 1px solid #7de8d5b3;
  outline-offset: -1px;
}

.tile-face.claim-target-discard.tile-loaded {
  outline: 2px solid #ffd54a;
  outline-offset: -1px;
  box-shadow: 0 0 0 2px #3a2f00, 0 0 12px #ffd54acc;
  animation: claim-target-pulse 0.95s ease-in-out infinite;
}

.center-hud {
  position: absolute;
  top: 45.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 41%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.center-status {
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  color: #b0d7cf;
}

.status-ribbon {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #48a6a0;
  background: #093138d9;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  font-size: 0.74rem;
  color: #a7d8d0;
}

.status-ribbon span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-ribbon-copy-btn {
  border: 1px solid #67c7bb;
  border-radius: 999px;
  background: linear-gradient(180deg, #1b6a68 0%, #134c50 100%);
  color: #e7fffb;
  font-size: 0.68rem;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.status-ribbon-copy-btn:active {
  transform: translateY(1px);
}

#replayRoundText {
  flex: 1 1 34%;
  text-align: center;
}

.center-wind {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  border: 1px solid #7ec5c0;
  background:
    radial-gradient(circle at 50% 50%, #16282e 0%, #122228 48%, #0b171f 100%);
  color: #daf6f1;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2px #ffffff10, 0 10px 18px #00000066;
}

.center-controls {
  width: 100%;
  border: 1px solid #4ba29e;
  border-radius: 999px;
  background: linear-gradient(180deg, #176a71ba 0%, #0f4d55d6 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.table-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 6px;
  background: #1b8386;
  color: #d8fbf3;
  font-weight: 700;
  font-size: 0.82rem;
  opacity: 0.52;
}

.table-btn.active {
  background: #2bb9ae;
  color: #083432;
  animation: active-breath 1.9s ease-in-out infinite;
}

.mode-hint {
  font-size: 0.76rem;
  color: #81c8bc;
}

.mode-hint.mode-hint-placeholder {
  visibility: hidden;
}

.center-hud-auto-action {
  width: auto;
  min-width: 138px;
  height: 46px;
  max-width: 100%;
  margin-top: 1px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #4ca39d;
  background: linear-gradient(180deg, #1c7a7f 0%, #14545a 100%);
  color: #daf7f1;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.center-hud-auto-action:disabled {
  opacity: 0.56;
}

#aiPaceDebug {
  display: none;
  color: #ccecdf;
  font-size: 0.74rem;
  background: #0a273099;
  border: 1px solid #4a8d98;
  border-radius: 999px;
  padding: 3px 10px;
}

@keyframes pulse-glow {
  0% {
    filter: drop-shadow(0 1px 1px #00000044);
  }
  50% {
    filter: drop-shadow(0 0 8px #6df4d8bb);
  }
  100% {
    filter: drop-shadow(0 1px 1px #00000044);
  }
}

@keyframes active-breath {
  0% {
    box-shadow: 0 0 0 0 #53e9c54a;
  }
  50% {
    box-shadow: 0 0 0 5px #53e9c51a;
  }
  100% {
    box-shadow: 0 0 0 0 #53e9c500;
  }
}

.player-hand-band {
  position: absolute;
  left: calc(1.6% + 200px);
  right: calc(1.6% + 200px);
  bottom: 1.9%;
  z-index: 3;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid #80d4c15c;
  background: linear-gradient(180deg, #0d333ddd 0%, #081e26f2 100%);
  box-shadow: 0 -14px 28px #00141a4f, inset 0 1px 0 #ffffff14;
  backdrop-filter: blur(12px);
}

.player-hand-band.hand-insert-active {
  overflow: visible;
}

.action-dock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1.9% + 62px);
  width: min(420px, calc(100% - 420px));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.action-dock .claim-panel {
  margin: 0;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid #8ed9c76e;
  background: linear-gradient(180deg, #11363df7 0%, #0a252bf3 100%);
  box-shadow: 0 10px 18px #00141a70;
  pointer-events: auto;
}

.action-dock .panel-head {
  display: none;
}

.player-hand-band .band-head {
  display: none;
}

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.band-head h3 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
}

.hand {
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bottom-open-row .hand {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  contain: layout;
}

/* Only enlarge human hand tiles (bottom hand area), keep all other zones unchanged. */
.player-hand-band .bottom-open-row .hand .tile-face {
  width: calc(var(--tile-base-w) + 2px);
  height: calc(var(--tile-base-h) + 3px);
}

.player-hand-band .bottom-open-row .hand {
  min-height: calc(var(--tile-base-h) + 3px);
}

.player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
  width: calc(var(--tile-base-w) + 2px);
  height: calc(var(--tile-base-h) + 3px);
}

.bottom-open-row .hand .chip {
  flex: 0 0 auto;
}

.bottom-open-row .hand.hand-insert-active {
  overflow: visible;
}

.bottom-open-row .hand .chip.hand-insert-animating {
  will-change: transform;
  position: relative;
  z-index: 2;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.bottom-open-row .hand .chip.hand-insert-focus {
  z-index: 3;
}

.bottom-open-row .meld-zone {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  min-height: 36px;
  max-height: none;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 1px;
  margin-left: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  /* border-radius: 10px; */
  /* border: 1px solid #d2d7dc; */
  padding: 0;
  /* background: #f7fafc; */
  /* min-width: 30px; */
  /* min-height: 28px; */
  box-shadow: 0 2px 3px #00000035;
}

.chip.touch-confirm-armed {
  transform: translateY(-3px);
  border-radius: 8px;
  box-shadow: 0 0 0 2px #56d7cbcc, 0 8px 14px #0a777566;
  background: linear-gradient(180deg, #0d373cbf 0%, #0b2a30d9 100%);
}

.chip.touch-confirm-armed .tile-face {
  transform: none;
  border-radius: 8px;
}

.chip:disabled {
  opacity: 0.7;
}

.hand.tile-batch-loading .chip,
.op-hand.tile-batch-loading .tile-face {
  opacity: 0;
}

.hand.tile-batch-ready .chip,
.op-hand.tile-batch-ready .tile-face {
  opacity: 1;
  transition: opacity 120ms ease-out;
}

.hand.showdown .chip:disabled {
  opacity: 1;
}

.hand.replay .chip:disabled {
  opacity: 1;
}

.hand.tile-batch-loading .chip {
  opacity: 0;
}

.tile-face {
  display: block;
  width: var(--tile-base-w);
  height: var(--tile-base-h);
  object-fit: contain;
  background-image: var(--tile-sprite-url, none);
  background-repeat: no-repeat;
  background-size:
    calc(var(--tile-sprite-sheet-width, 0px) * 100% / var(--tile-sprite-source-width, 1px))
    calc(var(--tile-sprite-sheet-height, 0px) * 100% / var(--tile-sprite-source-height, 1px));
  background-position: var(--tile-sprite-pos-x, 0%) var(--tile-sprite-pos-y, 0%);
  filter: drop-shadow(0 1px 1px #00000044);
}

.tile-face.rot-right {
  transform: rotate(90deg);
}

.tile-face.rot-left {
  transform: rotate(-90deg);
}

.tile-face.meld-tile.rot-left,
.tile-face.meld-tile.rot-right {
  margin-bottom: 0;
}

/* Compress spacing between two adjacent flipped non-claimed meld tiles.
   Apply on the first tile so only that pair is affected. */
.side-open-row .meld-group .tile-face.meld-tile.rot-left:not(.chi-claimed):not(.peng-claimed):has(+ .tile-face.meld-tile.rot-left:not(.chi-claimed):not(.peng-claimed)),
.side-open-row .meld-group .tile-face.meld-tile.rot-right:not(.chi-claimed):not(.peng-claimed):has(+ .tile-face.meld-tile.rot-right:not(.chi-claimed):not(.peng-claimed)),
.side-open-row .meld-group .tile-face.meld-tile.rot-left:not(.chi-claimed):not(.peng-claimed):has(+ .tile-face.meld-tile.rot-right:not(.chi-claimed):not(.peng-claimed)),
.side-open-row .meld-group .tile-face.meld-tile.rot-right:not(.chi-claimed):not(.peng-claimed):has(+ .tile-face.meld-tile.rot-left:not(.chi-claimed):not(.peng-claimed)) {
  margin-bottom: -4px;
}

.tile-face.rot-up {
  transform: rotate(180deg);
}

.tile-face.meld-tile.chi-claimed {
  transform-origin: center center;
}

.tile-face.meld-tile.chi-claimed-bottom {
  transform: rotate(90deg);
  margin-left: 4px;
  margin-right: 4px;
}

.tile-face.meld-tile.chi-claimed-top {
  transform: rotate(90deg);
  margin-left: 4px;
  margin-right: 4px;
}

.tile-face.meld-tile.chi-claimed-right {
  transform: rotate(0deg);
  margin-top: 4px;
  margin-bottom: 4px;
}

.tile-face.meld-tile.chi-claimed-left {
  transform: rotate(0deg);
  margin-top: 4px;
  margin-bottom: 4px;
}

.tile-face.meld-tile.peng-claimed {
  transform-origin: center center;
}

.tile-face.meld-tile.peng-claimed-bottom {
  transform: rotate(90deg);
  margin-left: 4px;
  margin-right: 4px;
}

.tile-face.meld-tile.peng-claimed-top {
  transform: rotate(90deg);
  margin-left: 4px;
  margin-right: 4px;
}

.tile-face.meld-tile.peng-claimed-right {
  transform: rotate(0deg);
  margin-top: 4px;
  margin-bottom: 4px;
}

.tile-face.meld-tile.peng-claimed-left {
  transform: rotate(0deg);
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Keep rotated side claimed meld tiles aligned: no extra bottom margin after rotation. */
.tile-face.meld-tile.chi-claimed-right.rot-left,
.tile-face.meld-tile.peng-claimed-right.rot-left,
.tile-face.meld-tile.chi-claimed-left.rot-right,
.tile-face.meld-tile.peng-claimed-left.rot-right {
  margin-bottom: 0;
}

/* Keep claimed-tile highlight only for seat0(bottom); remove it for right/top/left seats. */
.seat-right .tile-face.meld-tile.chi-claimed,
.seat-right .tile-face.meld-tile.peng-claimed,
.seat-top .tile-face.meld-tile.chi-claimed,
.seat-top .tile-face.meld-tile.peng-claimed,
.seat-left .tile-face.meld-tile.chi-claimed,
.seat-left .tile-face.meld-tile.peng-claimed {
  outline: none;
  box-shadow: none;
}

.tile-face.win-final-tile.win-edge-tail.win-axis-horizontal {
  margin-left: 20px !important;
}

.tile-face.win-final-tile.win-edge-head.win-axis-horizontal {
  margin-right: 20px !important;
}

.tile-face.win-final-tile.win-edge-tail.win-axis-vertical {
  margin-top: 1px !important;
}

.tile-face.win-final-tile.win-edge-head.win-axis-vertical {
  margin-bottom: 1px !important;
}

.tile-face.draw-final-tile.draw-edge-tail.draw-axis-horizontal {
  margin-left: 20px !important;
}

.tile-face.draw-final-tile.draw-edge-head.draw-axis-horizontal {
  margin-right: 20px !important;
}

.chip.draw-tail-gap {
  margin-left: 20px !important;
}

.chip.draw-tail-gap .tile-face.draw-final-tile.draw-edge-tail.draw-axis-horizontal {
  margin-left: 0 !important;
}

.tile-face.draw-final-tile.draw-edge-tail.draw-axis-vertical {
  margin-top: 1px !important;
}

.tile-face.draw-final-tile.draw-edge-head.draw-axis-vertical {
  margin-bottom: 1px !important;
}

textarea,
input,
select {
  width: 100%;
  border: 1px solid #4d7882;
  border-radius: 8px;
  padding: 8px;
  color: #dcf5ef;
  background: #0d242b;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.actions.v-bottom {
  align-items: flex-end;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.grid3 > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid3 > label.inline-field {
  flex-direction: row;
  align-items: center;
}

.grid3 > .actions {
  margin-top: 0;
}

.grid3 select,
.grid3 input,
.grid3 .btn {
  min-height: 38px;
}

.replay-step-actions {
  margin-top: 0;
}

.replay-load-action {
  margin-top: 0;
}

.replay-step-actions .btn {
  width: 100%;
}

.replay-step-mul {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  color: #cce8e3;
  white-space: nowrap;
}

.replay-step-mul input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: #7fd6bd;
}

label {
  font-size: 0.9rem;
  color: #aad4cc;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}

.btn.primary {
  width: 100%;
  font-size: 1rem;
  color: #1a2012;
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
}

#newGame {
  width: auto;
  min-width: 116px;
  padding: 8px 12px;
  font-size: 0.92rem;
}

#aiPaceToggle {
  width: 100%;
  font-size: 1rem;
}

#playMode {
  width: 132px;
  max-width: 100%;
}

.btn.ghost {
  color: #cce8e3;
  background: linear-gradient(180deg, #173d47 0%, #112d35 100%);
  border: 1px solid #4a7d87;
}

.ai-auto-inline {
  display: inline-grid;
  grid-template-columns: auto auto 18px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ai-auto-tile-slot {
  width: 18px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-auto-tile-slot.empty {
  visibility: hidden;
}

.ai-auto-tile {
  width: 18px;
  height: 26px;
  flex: 0 0 18px;
}

.result {
  margin-top: 10px;
  min-height: 74px;
  border: 1px solid #477985;
  border-radius: 12px;
  padding: 12px;
  white-space: pre-wrap;
  background: linear-gradient(180deg, #0b2630 0%, #081d25 100%);
  box-shadow: inset 0 1px 0 #ffffff0d;
}

.result-line {
  line-height: 1.4;
}

.result-line + .result-line {
  margin-top: 3px;
}

.retention-panel,
.postgame-card,
.training-panel {
  border-color: #6da895;
  background:
    radial-gradient(circle at 12% 0%, #f6c86824 0%, transparent 42%),
    linear-gradient(180deg, #102f35 0%, #0b242c 100%);
}

.retention-head,
.postgame-card-head,
.training-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.retention-head h2,
.postgame-card-head h2,
.training-head h2 {
  margin-bottom: 0;
}

.client-id-badge,
.postgame-badge {
  flex: 0 0 auto;
  border: 1px solid #6ba996;
  border-radius: 999px;
  padding: 4px 8px;
  color: #d8f4ed;
  background: #0b252bcc;
  font-size: 0.72rem;
  font-weight: 800;
}

.postgame-badge.is-win {
  border-color: #f2c464;
  color: #30230c;
  background: linear-gradient(180deg, #f6d783 0%, #d9a944 100%);
}

.retention-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
}

.retention-card {
  width: 100%;
  min-height: 72px;
  border: 1px solid #4f8488;
  border-radius: 14px;
  padding: 10px;
  text-align: left;
  color: #dff6f0;
  background: linear-gradient(160deg, #123c44 0%, #0a2630 100%);
  box-shadow: inset 0 1px 0 #ffffff10, 0 8px 14px #0012193d;
}

.retention-card.continue-card {
  border-color: #d3ae65;
  color: #fff0c7;
  background:
    radial-gradient(circle at 12% 18%, #f6c86838 0%, transparent 44%),
    linear-gradient(160deg, #4c3215 0%, #173139 100%);
}

.retention-card:disabled {
  opacity: 0.55;
}

.retention-card-title,
.retention-card-meta {
  display: block;
}

.retention-card-title {
  font-size: 0.95rem;
  font-weight: 900;
  margin-bottom: 6px;
}

.retention-card-meta {
  color: #a8d5cc;
  font-size: 0.78rem;
  line-height: 1.35;
}

.continue-card .retention-card-meta {
  color: #f5d89a;
}

.retention-status,
.postgame-api-hint,
.pwa-install-hint {
  margin-top: 9px;
  color: #9fd0c7;
  font-size: 0.8rem;
  line-height: 1.4;
}

.pwa-install-hint {
  border: 1px solid #6da895;
  border-radius: 10px;
  padding: 8px 9px;
  color: #ffe3a6;
  background: #17323acc;
}

.postgame-summary {
  border: 1px solid #477985;
  border-radius: 12px;
  padding: 10px;
  color: #dff6f0;
  background: #08232bcc;
  line-height: 1.45;
}

.postgame-metrics {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr;
  gap: 8px;
  margin-top: 10px;
}

.postgame-metrics div {
  border: 1px solid #416d74;
  border-radius: 12px;
  padding: 8px;
  background: #0b2730;
}

.postgame-metrics span,
.postgame-metrics strong {
  display: block;
}

.postgame-metrics span {
  color: #91c6bc;
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.postgame-metrics strong {
  color: #f5dfaa;
  font-size: 0.9rem;
}

.postgame-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.training-close-btn {
  min-height: 34px;
  padding: 6px 12px;
}

.training-progress {
  color: #f4d48c;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.training-prompt,
.training-feedback,
.postgame-decision-detail {
  border: 1px solid #477985;
  border-radius: 12px;
  padding: 10px;
  color: #dff6f0;
  background: #08232bcc;
  line-height: 1.45;
}

.training-hand,
.detail-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  min-height: 36px;
  margin: 10px 0;
}

.review-tile,
.choice-tile {
  width: 22px;
  height: 31px;
  object-fit: contain;
}

.training-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
}

.training-choice {
  min-height: 46px;
  border: 1px solid #4f8488;
  border-radius: 10px;
  padding: 7px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #dff6f0;
  background: linear-gradient(180deg, #123c44 0%, #0a2630 100%);
  font-weight: 800;
}

.training-choice:disabled {
  opacity: 0.7;
}

.training-feedback {
  margin-top: 10px;
}

.feedback-ok,
.feedback-miss {
  font-weight: 900;
  margin-bottom: 6px;
}

.feedback-ok {
  color: #93f0b2;
}

.feedback-miss {
  color: #ffd18e;
}

.feedback-line + .feedback-line {
  margin-top: 4px;
}

.training-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.postgame-decision-list {
  margin-top: 10px;
}

.postgame-decision-title,
.detail-head {
  color: #f4d48c;
  font-size: 0.82rem;
  font-weight: 900;
  margin-bottom: 6px;
}

.postgame-decision-item {
  width: 100%;
  border: 1px solid #416d74;
  border-radius: 10px;
  padding: 8px 9px;
  margin-top: 6px;
  text-align: left;
  color: #dff6f0;
  background: #0b2730;
  line-height: 1.35;
}

.postgame-decision-detail {
  margin-top: 10px;
}

.detail-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.detail-comparison > div {
  border: 1px solid #416d74;
  border-radius: 10px;
  padding: 8px;
  background: #0b2730;
}

.detail-comparison span {
  display: block;
  color: #91c6bc;
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.detail-reason {
  margin-top: 8px;
  color: #cfece5;
}

.review-empty {
  color: #91c6bc;
  font-size: 0.82rem;
}

.action-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.action-seat {
  color: #9ecec2;
}

.action-label {
  color: #d9efe8;
}

.action-tile {
  width: 16px;
  height: 24px;
  flex: 0 0 16px;
}

.note {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #97c7be;
}

.claim-panel {
  border-color: #4f8274;
  background: linear-gradient(180deg, #133842 0%, #0f282e 100%);
}

.claim-hint {
  color: #9ecec2;
  font-size: 0.85rem;
}

.claim-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.claim-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.action-dock .claim-row-2 {
  margin-top: 2px;
}

.claim-btn {
  min-height: 38px;
  padding: 6px 2px;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.claim-btn:disabled {
  opacity: 0.42;
}

.claim-btn .btn-tile {
  width: 20px;
  height: 28px;
  filter: drop-shadow(0 1px 1px #0000005c);
}

.win-celebration {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.win-celebration.active {
  opacity: 1;
}

.win-celebration::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, #ffe58f9a 0%, #ffd1664f 26%, #00000000 56%),
    radial-gradient(circle at 48% 56%, #fff9de7a 0%, #00000000 52%);
  opacity: 0;
}

.win-celebration.active::before {
  animation: win-flash 520ms ease-out;
}

.win-confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.score-flow-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.win-confetti {
  position: absolute;
  top: -8%;
  left: var(--start-x, 50%);
  width: 7px;
  height: 15px;
  border-radius: 2px;
  background: var(--confetti-color, #ffd166);
  transform: translateX(-50%) rotate(var(--spin-a, 0deg));
  animation: confetti-fall var(--fall-dur, 1.5s) ease-out forwards;
}

.score-flow-token {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform:
    translate(var(--score-flow-from-x, 0px), var(--score-flow-from-y, 0px))
    scale(var(--score-flow-start-scale, 0.9))
    rotate(var(--score-flow-rot-start, 0deg));
  animation: score-flow-arc var(--score-flow-dur, 900ms) cubic-bezier(0.22, 0.84, 0.26, 1) forwards;
  animation-delay: var(--score-flow-delay, 0ms);
}

.score-flow-token.token-bag {
  width: 24px;
  height: 26px;
  border-radius: 48% 48% 42% 42% / 28% 28% 68% 68%;
  background: linear-gradient(180deg, #ffefb7 0%, #e5b952 46%, #b8781d 100%);
  box-shadow: inset 0 1px 0 #fff8d8cc, inset 0 -2px 4px #8f5816a8;
}

.score-flow-token.token-bag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 11px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 55% 55% 30% 30%;
  background: linear-gradient(180deg, #ffe7ab 0%, #cb8f32 100%);
  box-shadow: 0 7px 0 -4px #7b4e14;
}

.score-flow-token.token-bag::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  color: #835115;
  text-shadow: 0 1px 0 #fff4c9;
}

.score-flow-token.token-coin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #fff8cb 0%, #ffe28a 32%, #e2b53f 66%, #a56a17 100%);
  box-shadow: inset 0 0 0 2px #fff1bf80, inset 0 -1px 2px #8e5e1799;
}

.score-flow-token.token-coin::before {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  color: #8a5915;
}

.dice-roll-effect {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.dice-roll-effect.active {
  opacity: 1;
}

.dice-roll-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, #f5d37f66 0%, #f5d37f22 24%, #00000000 54%),
    radial-gradient(circle at 50% 52%, #00000055 0%, #00000000 58%);
}

.dice-roll-stage {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dice-roll-cubes {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.dice-roll-cube {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  border: 1px solid #f8dfb4b8;
  background: radial-gradient(circle at 24% 20%, #fff7e2 0%, #f4dbae 28%, #d3a465 100%);
  box-shadow: 0 8px 16px #00000066, inset 0 2px 3px #fff8e0aa, inset 0 -3px 5px #a57a3a66;
  display: grid;
  place-items: center;
  transform: translateY(0) rotate(0deg) scale(1);
  will-change: transform;
}

.dice-roll-effect.rolling .dice-roll-cube {
  animation: dice-roll-wobble 210ms ease-in-out infinite;
}

.dice-roll-effect.rolling .dice-roll-cube.die-right {
  animation-delay: 65ms;
}

.dice-roll-effect.settled .dice-roll-cube {
  animation: dice-roll-settle 280ms cubic-bezier(0.2, 0.82, 0.3, 1);
}

.dice-roll-value {
  font-size: 38px;
  line-height: 1;
  color: #7d4f1f;
  text-shadow: 0 1px 0 #fff3cd, 0 2px 3px #00000033;
}

.dice-roll-total {
  font-size: 0.84rem;
  color: #faedca;
  text-shadow: 0 1px 2px #00000085;
  border: 1px solid #d3ac64a6;
  border-radius: 999px;
  padding: 3px 10px;
  background: #251709c2;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 150ms ease;
}

.dice-roll-effect.settled .dice-roll-total {
  opacity: 1;
  transform: translateY(0);
}

.win-celebration-text {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: clamp(28px, 5.2vw, 54px);
  color: #fff8dc;
  text-shadow: 0 3px 10px #00000091, 0 0 16px #ffe28a99;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid #ffe3a2cc;
  background: linear-gradient(180deg, #4d7a42e6 0%, #2b5d3fe6 100%);
  box-shadow: 0 10px 30px #00000055, 0 0 0 2px #ffffff22 inset;
  animation: win-text-pop-strong 960ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.win-celebration-subtext {
  position: absolute;
  left: 50%;
  top: calc(42% + 52px);
  transform: translateX(-50%);
  max-width: min(86%, 820px);
  text-align: center;
  font-size: clamp(12px, 2.2vw, 16px);
  line-height: 1.3;
  color: #fff7da;
  text-shadow: 0 1px 5px #00000095;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #ffe7b24d;
  background: #122f2280;
  white-space: normal;
  overflow: visible;
}

.player-hand-band.win-glow {
  animation: hand-win-pulse-strong 1.6s ease;
}

#playerTotalScore {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  min-width: 3ch;
}

#playerTotalScore.win-score-glow {
  animation: score-win-pulse-strong 1.6s ease;
}

#playerTotalScore.win-score-glow.score-flow-impact {
  animation: score-win-pulse-strong 1.15s ease, score-impact-bump 720ms cubic-bezier(0.2, 0.9, 0.24, 1);
}

#playerTotalScore .score-base {
  color: inherit;
  min-width: 1.5ch;
  text-align: right;
}

#playerTotalScore .score-delta {
  margin-left: 2px;
  font-weight: 700;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 160ms ease, transform 180ms ease, color 160ms ease;
}

#playerTotalScore.score-delta-positive .score-delta {
  color: #6ce79f;
}

#playerTotalScore.score-delta-negative .score-delta {
  color: #ff7f8f;
}

#playerTotalScore.score-delta-zero .score-delta {
  color: #d8d8d8;
}

#playerTotalScore.score-flow-pending .score-base {
  color: #ffeab1;
}

#playerTotalScore.score-flow-pending .score-delta {
  opacity: 1;
  transform: translateY(-1px) scale(1.08);
}

#playerTotalScore.score-flow-counting .score-base {
  color: #fff2c2;
  text-shadow: 0 0 10px #ffd36f55;
}

#playerTotalScore.score-flow-counting .score-delta {
  transform: translateY(-1px) scale(1.04);
}

#playerTotalScore.score-flow-landed .score-base {
  color: #fff7dc;
}

#playerTotalScore.score-flow-landed .score-delta {
  opacity: 0.82;
  transform: translateY(0) scale(0.98);
}

.tile-face.win-self-final {
  animation: self-win-tile-glow 1.6s ease;
  box-shadow: 0 0 0 2px #ffe38a, 0 0 14px #ffd54acc;
  border-radius: 5px;
}

.table-stage.other-win-active .seat.seat-dimmed,
.table-stage.other-win-active .player-hand-band.other-win-dimmed,
.table-stage.other-win-active .seat-open-row.other-win-dimmed {
  filter: brightness(0.82) saturate(0.72);
  opacity: 0.88;
  transition: none;
}

.table-stage.other-win-active .seat.seat-dimmed .tile-face,
.table-stage.other-win-active .player-hand-band.other-win-dimmed .tile-face,
.table-stage.other-win-active .seat-open-row.other-win-dimmed .tile-face {
  animation: none !important;
  box-shadow: none !important;
}

.table-stage.other-win-active .seat.seat-winner,
.table-stage.other-win-active .player-hand-band.other-win-winner,
.table-stage.other-win-active .seat-open-row.other-win-winner {
  filter: brightness(1);
  opacity: 1;
}

.table-stage.other-win-active .op-hand.hand-winner-focus,
.table-stage.other-win-active .hand.hand-winner-focus,
.table-stage.other-win-active .player-hand-band.hand-winner-focus,
.table-stage.other-win-active .seat-open-row.hand-winner-focus {
  box-shadow: 0 0 0 1px #f0d8a1a6, 0 0 14px #f0d8a133;
  border-radius: 8px;
  animation: other-win-hand-focus 1.2s ease;
}

.table-stage.other-win-active .seat.seat-winner .tile-face.win-final-tile {
  animation: other-win-final-pulse 0.6s ease;
  box-shadow: 0 0 0 1px #f6dd9f, 0 0 10px #f6dd9fa8;
  border-radius: 5px;
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) rotate(var(--spin-a, 0deg));
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--drift-x, 0px))) translateY(120%) rotate(var(--spin-b, 360deg));
  }
}

@keyframes score-flow-arc {
  0% {
    opacity: 0;
    transform:
      translate(var(--score-flow-from-x, 0px), var(--score-flow-from-y, 0px))
      scale(var(--score-flow-start-scale, 0.9))
      rotate(var(--score-flow-rot-start, 0deg));
  }
  12% {
    opacity: 1;
  }
  58% {
    opacity: 1;
    transform:
      translate(var(--score-flow-mid-x, 0px), var(--score-flow-mid-y, 0px))
      scale(var(--score-flow-mid-scale, 1.02))
      rotate(var(--score-flow-rot-mid, 0deg));
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--score-flow-to-x, 0px), var(--score-flow-to-y, 0px))
      scale(var(--score-flow-end-scale, 0.46))
      rotate(var(--score-flow-rot-end, 0deg));
  }
}

@keyframes other-win-final-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  40% {
    transform: scale(1.08);
    filter: brightness(1.24);
  }
  100% {
    transform: scale(1);
    filter: brightness(1.02);
  }
}

@keyframes other-win-hand-focus {
  0% {
    box-shadow: 0 0 0 1px #f0d8a155, 0 0 0 #f0d8a100;
  }
  50% {
    box-shadow: 0 0 0 1px #f0d8a1cc, 0 0 16px #f0d8a166;
  }
  100% {
    box-shadow: 0 0 0 1px #f0d8a1a6, 0 0 14px #f0d8a133;
  }
}

@keyframes win-text-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes win-text-pop-strong {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(-3deg);
  }
  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12) rotate(1.5deg);
  }
  62% {
    transform: translate(-50%, -50%) scale(0.98) rotate(-1deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes win-flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hand-win-pulse-strong {
  0% {
    box-shadow: 0 0 0 0 #8bf3c955, inset 0 0 0 0 #ffffff00;
  }
  22% {
    box-shadow: 0 0 0 10px #8bf3c933, inset 0 0 20px #d4fff055;
  }
  44% {
    box-shadow: 0 0 0 0 #8bf3c900, inset 0 0 0 #ffffff00;
  }
  68% {
    box-shadow: 0 0 0 8px #7cdcff2e, inset 0 0 16px #d8ffef44;
  }
  100% {
    box-shadow: 0 0 0 0 #7cdcff00, inset 0 0 0 #ffffff00;
  }
}

@keyframes score-win-pulse-strong {
  0% {
    color: #fef3c0;
    text-shadow: 0 0 0 #0000;
  }
  22% {
    color: #ffe08a;
    text-shadow: 0 0 12px #ffd54acc, 0 0 24px #ffd54a66;
  }
  46% {
    color: #fff1be;
    text-shadow: 0 0 0 #0000;
  }
  72% {
    color: #ffe79a;
    text-shadow: 0 0 10px #ffd54a99;
  }
  100% {
    color: inherit;
    text-shadow: 0 0 0 #0000;
  }
}

@keyframes score-impact-bump {
  0% {
    transform: scale(1);
  }
  24% {
    transform: scale(1.16);
  }
  58% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes score-delta-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.86);
  }
  48% {
    opacity: 1;
    transform: translateY(-1px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes self-win-tile-glow {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  28% {
    transform: translateY(-3px) scale(1.06);
    filter: brightness(1.22);
  }
  58% {
    transform: translateY(0) scale(0.99);
    filter: brightness(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes dice-roll-wobble {
  0% {
    transform: translateY(0) rotate(-8deg) scale(0.97);
  }
  50% {
    transform: translateY(-5px) rotate(8deg) scale(1.03);
  }
  100% {
    transform: translateY(0) rotate(-9deg) scale(0.98);
  }
}

@keyframes dice-roll-settle {
  0% {
    transform: translateY(-3px) rotate(5deg) scale(1.05);
  }
  45% {
    transform: translateY(1px) rotate(-3deg) scale(0.98);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.chi-option-wrap {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chi-option-title {
  font-size: 0.78rem;
  color: #9ecec2;
}

.chi-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chi-option-btn {
  border: 1px solid #3c6f79;
  border-radius: 8px;
  background: #153942;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.chi-option-btn.active {
  border-color: #7fd6bd;
  box-shadow: 0 0 0 1px #7fd6bd66 inset;
}

.chi-option-tile {
  width: 18px;
  height: 26px;
}

.chi-option-mid {
  filter: drop-shadow(0 0 3px #ffd54acc);
}

.kong-option-btn {
  gap: 6px;
  padding: 2px 6px;
}

.kong-option-type {
  font-size: 0.78rem;
  color: #d6eee7;
  line-height: 1;
  white-space: nowrap;
}

@keyframes claim-target-pulse {
  0% {
    box-shadow: 0 0 0 2px #3a2f00, 0 0 8px #ffd54a99;
  }
  50% {
    box-shadow: 0 0 0 2px #3a2f00, 0 0 16px #ffd54acc;
  }
  100% {
    box-shadow: 0 0 0 2px #3a2f00, 0 0 8px #ffd54a99;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.discards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #99c6bc;
  font-size: 0.92rem;
}

.compact-panel h2 {
  margin-bottom: 4px;
}

.discard-empty {
  color: #8eb3ad;
}

.rec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ai-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ai-mini-title {
  color: #d9efe8;
  font-size: 0.92rem;
  font-weight: 600;
}

.ai-mini-tag {
  font-size: 0.72rem;
  color: #aebbc3;
  background: #203641;
  border: 1px solid #3e5e6c;
  border-radius: 999px;
  padding: 1px 8px;
}

.ai-mini-state {
  color: #99b8bf;
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.ai-mini-next {
  color: #89a4ac;
  font-size: 0.8rem;
}

.rec-code {
  color: #96c6bc;
  font-size: 0.9rem;
}

.rec-reason {
  line-height: 1.55;
  word-break: break-word;
}

.text-tile {
  width: 22px;
  height: 31px;
  vertical-align: -6px;
  margin: 0 2px;
}

@media (max-width: 900px) {
  .rules-chip:not(.mobile-new-game-chip) {
    display: none;
  }

  .mobile-new-game-chip {
    display: inline-block;
  }

  .table-stage.is-active-round .mobile-new-game-chip {
    display: none;
  }

  .table-stage {
    min-height: 462px;
    --side-zone-w: 68px;
  }

  .seat-top,
  .seat-bottom {
    width: min(540px, calc(100% - 210px));
  }

  .seat-top {
    top: 2.2%;
  }

  .seat-left,
  .seat-right {
    width: var(--side-seat-w);
    top: calc(10% + 40px);
  }

  .center-hud {
    top: 45%;
    width: 50%;
  }
}

@media (max-width: 720px) {
  .page {
    padding: 8px 8px 18px;
  }

  .hero {
    display: none;
  }

  .table-panel {
    padding: 6px;
    margin-bottom: 10px;
  }

  .table-stage {
    min-height: 432px;
    --side-zone-w: 62px;
  }

  .seat-bottom {
    bottom: 22%;
  }

  .seat-top {
    top: 1.8%;
  }

  .seat-left,
  .seat-right {
    width: var(--side-seat-w);
    top: calc(8% + 40px);
  }

  .center-hud {
    width: 58%;
    top: 43%;
  }

  .center-wind {
    width: 74px;
    height: 74px;
    font-size: 1.7rem;
  }

  .table-btn {
    font-size: 0.74rem;
  }

  .tile-face {
    width: 28px;
    height: 40px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .grid3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  #retentionPanel,
  #trainingPanel,
  #postgameReviewCard {
    display: none !important;
  }

  .page {
    max-width: none;
    padding: max(8px, env(safe-area-inset-top)) 0 calc(156px + env(safe-area-inset-bottom));
  }

  .table-panel {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .table-stage {
    min-height: calc(100dvh - 158px - env(safe-area-inset-bottom));
    border-radius: 0 0 22px 22px;
    border-left: none;
    border-right: none;
    box-shadow: inset 0 0 0 8px #3f220f, inset 0 0 0 10px #7d4c28, 0 14px 28px #00000040;
  }

  .table-meta {
    display: none;
  }

  .center-status {
    width: auto;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #76d3c168;
    background: #062027cf;
    backdrop-filter: blur(10px);
  }

  .status-ribbon {
    width: auto;
    max-width: 100%;
    padding: 5px 10px;
    background: #062027d9;
    box-shadow: 0 8px 18px #00121952;
    backdrop-filter: blur(10px);
  }

  .center-controls {
    background: #0b3037e3;
    box-shadow: 0 10px 18px #00121952;
    backdrop-filter: blur(10px);
  }

  .mobile-tools-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-tools-fab,
  .mobile-tools-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-tools-fab {
    position: fixed;
    right: 12px;
    bottom: calc(126px + env(safe-area-inset-bottom));
    z-index: 22;
    min-width: 56px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #8cdac8;
    background: linear-gradient(180deg, #f4d58c 0%, #dbab4b 100%);
    box-shadow: 0 12px 22px #00000040;
    color: #2f2207;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }

  .mobile-tools-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    display: block;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #09212700 0%, #071a20cf 20%, #07181ef7 100%);
    transform: translateY(calc(100% - 62px));
    transition: transform 220ms ease;
    pointer-events: none;
  }

  .mobile-tools-toggle:checked ~ .mobile-tools-sheet {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-tools-toggle:checked ~ .mobile-tools-fab {
    opacity: 0;
    pointer-events: none;
  }

  .tools-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .tools-panel-head h2 {
    margin-bottom: 0;
  }

  .mobile-tools-close {
    min-width: 64px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #477b84;
    background: #10323a;
    color: #d3efea;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .mobile-tools-sheet .panel {
    margin-bottom: 8px;
    border-radius: 18px;
    box-shadow: 0 12px 26px #00000052;
  }

  .tools-panel {
    background: linear-gradient(180deg, #0e2e38 0%, #09222b 100%);
  }

  .mobile-tools-sheet .grid3 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .mobile-tools-sheet .grid3 > label.inline-field {
    flex-direction: column;
    align-items: flex-start;
  }

  .retention-actions {
    grid-template-columns: 1fr;
  }

  .retention-card {
    min-height: 58px;
    display: grid;
    align-content: center;
  }

  .postgame-metrics {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .training-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-comparison {
    grid-template-columns: 1fr;
  }

  .mobile-tools-sheet .result {
    min-height: 56px;
    max-height: 108px;
    overflow: auto;
  }

  .river-panel .discards {
    max-height: 80px;
    overflow: auto;
  }

  .avatar-dot {
    width: 26px;
    height: 26px;
    font-size: 0.68rem;
    background: linear-gradient(180deg, #47b6be 0%, #206d79 100%);
  }

  .avatar-photo {
    width: 26px;
    height: 26px;
  }

  .score-chip {
    padding: 2px 7px;
    font-size: 0.68rem;
    background: #25160e;
  }

  .center-hud-auto-action {
    min-width: 184px;
    height: 46px;
    border-radius: 14px;
    box-shadow: 0 10px 20px #00182173;
  }

  .player-hand-band {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 72px;
    padding: 8px 9px calc(10px + env(safe-area-inset-bottom));
    border-radius: 18px;
  }

  .player-hand-band::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #ffffff10 0%, transparent 40%);
    pointer-events: none;
  }

  .player-hand-band .bottom-open-row .seat-open-label {
    left: 4px;
    top: -20px;
    transform: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: #062027d2;
    border: 1px solid #69c8bd50;
  }

  .bottom-open-row {
    align-items: center;
    gap: 6px;
  }

  .bottom-open-row .hand {
    gap: 2px;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  .bottom-open-row .hand::-webkit-scrollbar {
    display: none;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: 35px;
    height: 49px;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    max-width: none;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: 31px;
    height: 44px;
  }

  .action-dock {
    bottom: calc(90px + env(safe-area-inset-bottom));
    width: min(430px, calc(100% - 64px));
    gap: 8px;
  }

  .claim-row {
    gap: 7px;
  }

  .claim-btn {
    min-height: 40px;
    border-radius: 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: 1.2rem;
  }

  .table-meta {
    left: 2%;
    top: 2.5%;
  }

  .table-stage {
    --side-zone-w: 56px;
  }

  .panel-chip {
    width: 110px;
    padding: 7px;
  }

  .meta-row {
    font-size: 0.7rem;
  }

  .rules-chip {
    font-size: 0.72rem;
    padding: 6px 9px;
  }

  .seat-info {
    font-size: 0.7rem;
  }

  .avatar-dot {
    width: 24px;
    height: 24px;
    font-size: 0.66rem;
  }

  .avatar-photo {
    width: 24px;
    height: 24px;
  }

  .score-chip {
    min-width: 22px;
    font-size: 0.66rem;
    padding: 2px 4px;
  }

  .discard-zone {
    min-height: 46px;
    padding: 3px;
    gap: 2px;
  }

  .seat-top .discard-zone,
  .seat-bottom .discard-zone {
    min-height: 52px;
    max-height: 52px;
  }

  .discard-zone.vertical {
    width: 58px;
    min-height: 178px;
    max-height: 178px;
  }

  .meld-zone {
    min-height: 36px;
  }

  .meld-zone.vertical {
    width: 58px;
    min-height: 136px;
    max-height: 136px;
  }

  .op-hand {
    min-height: 34px;
  }

  .op-hand.vertical {
    min-height: 68px;
  }

  .tile-face.op-tile {
    width: 18px;
    height: 26px;
  }

  .tile-face.meld-tile {
    width: 18px;
    height: 26px;
  }

  .center-hud {
    width: 70%;
    top: 40%;
  }

  .dice-roll-cube {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .dice-roll-value {
    font-size: 31px;
  }

  .center-status {
    font-size: 0.78rem;
  }

  .status-ribbon {
    font-size: 0.64rem;
    padding: 4px 8px;
  }

  .status-ribbon-copy-btn {
    font-size: 0.6rem;
    padding: 4px 6px;
  }

  .center-controls {
    gap: 4px;
    padding: 6px;
  }

  .table-btn {
    padding: 7px 4px;
    font-size: 0.66rem;
  }

  .player-hand-band {
    left: 1.2%;
    right: 1.2%;
    padding: 8px;
  }

  .hand {
    gap: 6px;
  }

  .chip {
    /* min-width: 34px; */
    /* min-height: 50px; */
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .grid3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .table-stage {
    min-height: calc(100dvh - 150px - env(safe-area-inset-bottom));
  }

  .mobile-tools-fab {
    right: 10px;
    bottom: calc(120px + env(safe-area-inset-bottom));
    min-width: 52px;
    height: 36px;
    padding: 0 12px;
    font-size: 0.76rem;
  }

  .mobile-tools-sheet {
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(calc(100% - 58px));
  }

  .mobile-tools-sheet .grid3 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .retention-head,
  .postgame-card-head {
    align-items: flex-start;
  }

  .postgame-metrics {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .postgame-actions {
    grid-template-columns: 1fr;
  }

  .training-choices,
  .training-nav {
    grid-template-columns: 1fr;
  }

  .tools-panel-head {
    margin-bottom: 8px;
  }

  .center-hud {
    width: 72%;
    top: 39%;
  }

  .status-ribbon {
    font-size: 0.62rem;
  }

  .center-status {
    font-size: 0.74rem;
  }

  .player-hand-band {
    min-height: 70px;
    padding: 7px 7px calc(9px + env(safe-area-inset-bottom));
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: 33px;
    height: 46px;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    max-width: none;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: 29px;
    height: 41px;
  }

  .action-dock {
    width: calc(100% - 28px);
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .action-dock .claim-panel {
    padding: 8px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  :root {
    --tile-base-w: 22px;
    --tile-base-h: 31px;
    --tile-op-w: 17px;
    --tile-op-h: 24px;
    --tile-side-op-w: 18px;
    --tile-side-op-h: 24px;
    --tile-side-meld-w: 29px;
    --tile-side-meld-h: 23px;
    --side-discard-w: 102px;
    --side-discard-h: 146px;
    --side-open-row-w: 66px;
    --side-open-col-w: 30px;
    --side-open-h: 256px;
    --main-zone-h: 46px;
    --main-discard-two-row-h: 62px;
  }

  .page {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    min-height: 100dvh;
    padding-top: max(3px, env(safe-area-inset-top));
    padding-right: max(5px, env(safe-area-inset-right));
    padding-bottom: max(3px, env(safe-area-inset-bottom));
    padding-left: max(5px, env(safe-area-inset-left));
  }

  .hero,
  .page > .panel:not(.table-panel) {
    display: none;
  }

  .table-panel {
    margin: 0;
    padding: 2px;
    height: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .table-panel > h2 {
    display: none;
  }

  .table-stage {
    height: calc(100dvh - max(3px, env(safe-area-inset-top)) - max(3px, env(safe-area-inset-bottom)) - 4px);
    min-height: 0;
    aspect-ratio: auto;
  }

  .table-meta {
    display: block;
    left: 8px;
    top: 8px;
    z-index: 7;
  }

  .rules-chip {
    top: 8px;
    right: 10px;
    padding: 4px 9px;
    font-size: 0.66rem;
  }

  .seat-top {
    left: calc(50% - 210px);
    right: auto;
    top: 12px;
    width: 420px;
    max-width: calc(100% - 360px);
  }

  .seat-left {
    left: 18px;
    top: 82px;
  }

  .seat-right {
    right: 18px;
    top: 82px;
  }

  .seat-bottom {
    left: 50%;
    bottom: 18%;
    width: clamp(360px, 58vw, 540px);
    max-width: calc(100% - 320px);
  }

  .seat-info {
    font-size: 0.66rem;
    margin-bottom: 2px;
  }

  .seat-left .seat-info,
  .seat-right .seat-info {
    font-size: 0.62rem;
  }

  .seat-top .discard-zone,
  .seat-bottom .discard-zone {
    width: 218px;
    min-height: calc(var(--main-discard-two-row-h) + 10px);
    max-height: calc(var(--main-discard-two-row-h) + 10px);
  }

  .discard-zone.vertical.discard-zone-side {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
    overflow: hidden;
    padding: 2px;
  }

  .discard-zone-side .discard-col {
    display: grid;
    grid-auto-rows: 21px;
    row-gap: 0;
    justify-items: center;
    align-content: start;
    min-width: 23px;
    max-height: var(--side-discard-h);
    overflow: hidden;
  }

  .discard-zone-side-right .discard-col {
    align-content: end;
  }

  .discard-zone-side .discard-slot {
    width: 20px;
    height: 24px;
  }

  .discard-zone-side .tile-face {
    width: 17px;
    height: 24px;
  }

  .discard-zone-side .discard-col-newest {
    box-shadow: none;
    border-radius: 0;
  }

  .side-open-row .tile-face.op-tile {
    width: var(--tile-side-op-w);
    height: var(--tile-side-op-h);
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -10px;
  }

  .seat-left .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back,
  .seat-right .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back {
    margin-top: -13px;
  }

  .table-stage.is-finished-round .side-open-row .op-hand.vertical .tile-face.op-tile + .tile-face.op-tile {
    margin-top: -8px;
  }

  .op-draw-slot.vertical {
    height: 26px;
    min-height: 26px;
    margin-bottom: 2px;
  }

  .op-draw-slot.vertical.op-draw-slot-bottom {
    margin-top: 2px;
  }

  .seat-right .right-open-row .meld-zone.vertical.is-empty,
  .seat-left .left-open-row .meld-zone.vertical.is-empty {
    width: 0;
    min-width: 0;
    max-width: 0;
    min-height: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
  }

  .center-hud {
    width: auto;
    top: 78px;
    gap: 5px;
  }

  .dice-roll-stage {
    top: 44%;
    gap: 7px;
  }

  .dice-roll-cube {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .dice-roll-value {
    font-size: 25px;
  }

  .status-ribbon {
    padding: 3px 7px;
    font-size: 0.62rem;
  }

  .status-ribbon-copy-btn {
    font-size: 0.58rem;
    padding: 3px 5px;
  }

  .center-status,
  .mode-hint {
    font-size: 0.6rem;
  }

  .player-hand-band {
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    padding-top: 4px;
    padding-right: 7px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    padding-left: 7px;
  }

  .bottom-open-row {
    gap: 2px;
  }

  .bottom-open-row .hand {
    min-height: 34px;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 4px;
    justify-content: flex-start;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: calc(var(--tile-base-w) + 4px);
    height: calc(var(--tile-base-h) + 5px);
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: calc(var(--tile-base-w) + 4px);
    height: calc(var(--tile-base-h) + 5px);
  }

  .player-hand-band .bottom-open-row .hand {
    min-height: calc(var(--tile-base-h) + 5px);
  }

  .player-hand-band .bottom-open-row .hand .chip + .chip {
    margin-left: 1px;
  }


  .bottom-open-row .hand .chip {
    flex: 0 0 auto;
  }

  .bottom-open-row .meld-zone {
    min-height: calc(var(--tile-base-h) + 5px);
    max-height: calc(var(--tile-base-h) + 5px);
    overflow-x: auto;
    overflow-y: visible;
  }

  .action-dock {
    bottom: calc(max(5px, env(safe-area-inset-bottom)) + 54px);
    width: min(310px, calc(100% - 300px));
  }

  .op-hand .discard-empty {
    display: none;
  }

  .discard-empty {
    font-size: 0.56rem;
  }

  .avatar-dot {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
  }

  .avatar-photo {
    width: 24px;
    height: 24px;
  }

  .score-chip {
    min-width: 20px;
    padding: 1px 4px;
    font-size: 0.62rem;
  }

  .table-stage {
    border-radius: 12px;
    border-color: #4d7f84;
    background:
      linear-gradient(180deg, #0e5654 0%, #07313e 100%);
    box-shadow: inset 0 0 0 3px #244b40, inset 0 0 0 5px #785033, 0 8px 18px #00000061;
  }

  .table-meta {
    width: auto;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2b180dcc;
    backdrop-filter: blur(6px);
  }

  .table-meta .meta-row {
    margin: 0;
    gap: 5px;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .table-meta .meta-label {
    max-width: 40px;
    overflow: hidden;
  }

  .rules-chip {
    min-height: 32px;
    border-radius: 999px;
    background: #2b180dcc;
    backdrop-filter: blur(6px);
  }

  .mobile-new-game-chip {
    min-width: 68px;
    text-align: center;
  }

  .table-stage.is-active-round .mobile-new-game-chip {
    display: none;
  }

  .seat-top {
    left: calc(50% - 190px);
    right: auto;
    top: 28px;
    width: 380px;
    max-width: calc(100% - 360px);
  }

  .top-open-row {
    min-height: 34px;
    padding: 3px 5px;
    border-radius: 8px;
    border-color: #4e8d9b2c;
    background: #082a3470;
  }

  .seat-top .top-open-row .op-hand {
    min-height: 30px;
    align-items: flex-start;
  }

  .op-draw-slot.horizontal {
    min-height: 30px;
  }

  .seat-top .top-open-row .meld-zone {
    min-height: 30px;
    max-height: 30px;
  }

  .seat-top .top-open-row .seat-open-label {
    right: -46px;
    font-size: 0.58rem;
  }

  .seat-top .discard-zone {
    width: 196px;
    min-height: 44px;
    max-height: 44px;
    margin-top: 1px;
  }

  .seat-left,
  .seat-right {
    top: 74px;
    width: 124px;
    grid-template-columns: 34px 82px;
    column-gap: 4px;
  }

  .seat-right {
    grid-template-columns: 82px 34px;
  }

  .seat-left {
    left: 22px;
  }

  .seat-right {
    right: 22px;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 82px;
    min-height: 158px;
    max-height: 158px;
    border-radius: 8px;
    border-color: #4e8d9b38;
    background: #061f2966;
  }

  .discard-zone-side .discard-col {
    min-width: 21px;
    grid-auto-rows: 15px;
    row-gap: 0;
  }

  .discard-zone-side .discard-slot {
    width: 21px;
    height: 15px;
  }

  .discard-zone-side .tile-face {
    width: 15px;
    height: 21px;
  }

  .side-open-row {
    width: 34px;
    min-width: 34px;
    height: 226px;
    min-height: 226px;
    padding: 2px;
    border-color: #4e8d9b3f;
    background: #082a3470;
    overflow: hidden;
  }

  .side-hand-stack {
    max-height: 222px;
    overflow: visible;
  }

  .seat-right .right-open-row .meld-zone.vertical {
    order: 0;
  }

  .seat-right .right-open-row .side-hand-stack {
    order: 1;
  }

  .side-open-row .op-hand.vertical {
    max-height: none;
    overflow: visible;
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -15px;
  }

  .seat-left .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back,
  .seat-right .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back {
    margin-top: -17px;
  }

  .table-stage.is-finished-round .side-open-row .op-hand.vertical .tile-face.op-tile + .tile-face.op-tile {
    margin-top: -9px;
  }

  .side-open-row .meld-zone.vertical {
    min-height: 30px;
    max-height: 58px;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .side-open-row .meld-zone.vertical::-webkit-scrollbar {
    display: none;
  }

  .seat-left .left-open-row .op-hand.vertical {
    margin-top: 0;
  }

  .seat-right .right-open-row .seat-open-label,
  .seat-left .left-open-row .seat-open-label {
    font-size: 0.54rem;
    padding: 1px 4px;
    color: #dff6f0;
    background: #061f29d9;
    border-radius: 5px;
  }

  .seat-right .right-open-row .seat-open-label {
    left: auto;
    right: 0;
    top: -17px;
    bottom: auto;
    transform: none;
  }

  .seat-left .left-open-row .seat-open-label {
    left: 0;
    top: -17px;
    transform: none;
  }

  .seat-bottom {
    bottom: 116px;
    width: 244px;
    max-width: calc(100% - 280px);
    z-index: 4;
  }

  .seat-bottom .discard-zone {
    width: 244px;
    min-height: 66px;
    max-height: 66px;
    border-radius: 8px;
    border-color: #4e8d9b38;
    background: #061f2966;
  }

  .seat-bottom .discard-zone .tile-face {
    width: 20px;
    height: 28px;
  }

  .center-hud {
    top: calc(50% - 38px);
    left: calc(50% - 105px);
    transform: none;
    width: 210px;
    gap: 3px;
    pointer-events: none;
    z-index: 6;
  }

  .center-status {
    width: auto;
    max-width: 210px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #63c4b878;
    background: #061f29c9;
    color: #d7f2ec;
    font-size: 0.6rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-ribbon {
    width: auto;
    max-width: 260px;
    background: #061f29d9;
    pointer-events: auto;
  }

  .mode-hint {
    display: none;
  }

  .center-hud-auto-action {
    position: fixed;
    left: 50%;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 67px);
    transform: translateX(-50%);
    min-width: 176px;
    height: 38px;
    border-radius: 12px;
    border-color: #79d9c7;
    background: linear-gradient(180deg, #238e8d 0%, #136066 100%);
    box-shadow: 0 8px 16px #001b2280;
    color: #f4fffb;
    font-size: 0.92rem;
    pointer-events: auto;
  }

  .player-hand-band {
    left: max(33px, env(safe-area-inset-left));
    right: max(33px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    min-height: 60px;
    padding: 4px 7px calc(4px + env(safe-area-inset-bottom));
    border-radius: 10px;
    border-color: #8ee1d35c;
    background: linear-gradient(180deg, #0b3038ed 0%, #071d25f2 100%);
    box-shadow: 0 -8px 18px #00111655, inset 0 1px 0 #ffffff12;
  }

  .player-hand-band .bottom-open-row .seat-open-label {
    left: 0;
    top: -18px;
    transform: none;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 6px;
    background: #061f29cc;
  }

  .bottom-open-row {
    align-items: center;
    gap: 5px;
    display: flex;
  }

  .bottom-open-row .hand {
    min-height: 52px;
    padding-top: 0;
    padding-bottom: 2px;
    gap: 2px;
    scrollbar-width: none;
  }

  .bottom-open-row .hand::-webkit-scrollbar {
    display: none;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: 35px;
    height: 50px;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    min-height: 52px;
    max-height: 52px;
    width: auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .player-hand-band .bottom-open-row .meld-zone::-webkit-scrollbar {
    display: none;
  }

  .player-hand-band .bottom-open-row .meld-zone .meld-group {
    flex: 0 0 auto;
    gap: 1px;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: 34px;
    height: 48px;
  }

  .chip.touch-confirm-armed {
    transform: translateY(-5px);
  }

  .action-dock {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 74px);
    width: min(430px, calc(100% - 180px));
  }

  .discard-zone.is-empty,
  .meld-zone.is-empty,
  .discard-zone:has(.discard-empty),
  .meld-zone:has(.discard-empty) {
    border-color: #4e8d9b24;
    background: #061f2938;
    box-shadow: none;
  }

  .discard-zone .discard-empty,
  .meld-zone .discard-empty {
    opacity: 0;
  }

  .mobile-tools-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(7px + env(safe-area-inset-bottom));
    right: max(7px, env(safe-area-inset-right));
    z-index: 28;
    min-width: 34px;
    height: 28px;
    padding: 0 7px;
    font-size: 0.62rem;
  }

  .mobile-tools-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-tools-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #477b84;
    background: #10323a;
    color: #d3efea;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .mobile-tools-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    max-height: calc(100dvh - max(6px, env(safe-area-inset-top)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #09212700 0%, #071a20cf 18%, #07181ef7 100%);
    transform: translateY(calc(100% + 8px));
    z-index: 27;
    pointer-events: none;
    transition: transform 220ms ease;
  }

  .mobile-tools-toggle:checked ~ .mobile-tools-sheet {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-tools-toggle:checked ~ .mobile-tools-fab {
    opacity: 0;
    pointer-events: none;
  }

  .tools-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  .action-dock .claim-panel {
    padding: 6px 8px;
    border-radius: 12px;
    background: #0b2b30f2;
    box-shadow: 0 8px 16px #001b2280;
  }

  .claim-row {
    gap: 6px;
  }

  .claim-btn {
    min-height: 34px;
    padding: 5px 3px;
    border-radius: 9px;
    font-size: 0.78rem;
  }
}

@media (orientation: landscape) and (max-height: 390px) and (max-width: 980px) {
  :root {
    --tile-base-w: 20px;
    --tile-base-h: 28px;
    --tile-op-w: 15px;
    --tile-op-h: 21px;
    --tile-side-op-w: 16px;
    --tile-side-op-h: 22px;
    --main-discard-two-row-h: 38px;
  }

  .table-stage {
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #244b40, inset 0 0 0 4px #785033;
  }

  .table-meta {
    top: 5px;
    left: 6px;
    padding: 3px 7px;
    gap: 6px;
  }

  .table-meta .meta-row {
    font-size: 0.56rem;
  }

  .rules-chip {
    top: 5px;
    right: 7px;
    min-height: 28px;
    padding: 3px 8px;
    font-size: 0.6rem;
  }

  .seat-top {
    top: 22px;
    left: calc(50% - 160px);
    width: 320px;
    max-width: calc(100% - 300px);
  }

  .top-open-row {
    min-height: 28px;
    padding: 2px 4px;
  }

  .seat-top .top-open-row .op-hand,
  .op-draw-slot.horizontal,
  .seat-top .top-open-row .meld-zone {
    min-height: 24px;
    max-height: 24px;
  }

  .seat-top .top-open-row .seat-open-label {
    right: -40px;
    font-size: 0.52rem;
  }

  .seat-top .discard-zone {
    width: 158px;
    min-height: 34px;
    max-height: 34px;
  }

  .seat-left,
  .seat-right {
    top: 62px;
    width: auto;
    grid-template-columns: auto 68px;
    column-gap: 3px;
  }

  .seat-right {
    grid-template-columns: 68px auto;
  }

  .seat-left {
    left: 18px;
  }

  .seat-right {
    right: 18px;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 68px;
    min-height: 142px;
    max-height: 142px;
    padding: 1px;
  }

  .discard-zone.vertical.discard-zone-side {
    gap: 0;
    padding: 1px;
  }

  .discard-zone-side .discard-col {
    min-width: 18px;
    grid-auto-rows: 13px;
    row-gap: 0;
  }

  .discard-zone-side .discard-slot {
    width: 18px;
    height: 13px;
  }

  .discard-zone-side .tile-face {
    width: 13px;
    height: 18px;
  }

  .side-open-row {
    width: max-content;
    min-width: 30px;
    height: 220px;
    min-height: 220px;
    overflow: hidden;
  }

  .seat-right .right-open-row .meld-zone.vertical {
    order: 0;
  }

  .seat-right .right-open-row .side-hand-stack {
    order: 1;
  }

  .side-open-row .meld-zone.vertical {
    max-height: 58px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .side-open-row .meld-zone.vertical::-webkit-scrollbar {
    display: none;
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -15px;
  }

  .table-stage.is-finished-round .side-open-row .op-hand.vertical .tile-face.op-tile + .tile-face.op-tile {
    margin-top: -9px;
  }

  .seat-right .right-open-row .seat-open-label,
  .seat-left .left-open-row .seat-open-label {
    top: -15px;
    font-size: 0.5rem;
  }

  .seat-bottom {
    bottom: 90px;
    width: 202px;
    max-width: calc(100% - 230px);
  }

  .seat-bottom .discard-zone {
    width: 202px;
    min-height: 58px;
    max-height: 58px;
  }

  .seat-bottom .discard-zone .tile-face {
    width: 17px;
    height: 24px;
  }

  .center-hud {
    top: calc(50% - 34px);
    left: calc(50% - 85px);
    transform: none;
    width: 170px;
  }

  .center-status {
    max-width: 170px;
    padding: 2px 7px;
    font-size: 0.56rem;
  }

  .center-hud-auto-action {
    bottom: calc(max(5px, env(safe-area-inset-bottom)) + 60px);
    min-width: 148px;
    height: 30px;
    font-size: 0.78rem;
  }

  .player-hand-band {
    left: 50%;
    right: auto;
    width: calc(100% - 93px);
    transform: translateX(-50%);
    bottom: max(3px, env(safe-area-inset-bottom));
    min-height: 52px;
    padding: 3px 5px calc(3px + env(safe-area-inset-bottom));
    border-radius: 9px;
  }

  .player-hand-band .bottom-open-row .seat-open-label {
    top: -15px;
    font-size: 0.52rem;
  }

  .bottom-open-row {
    gap: 3px;
  }

  .bottom-open-row .hand {
    min-height: 44px;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: 30px;
    height: 43px;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    min-height: 44px;
    max-height: 44px;
    max-width: none;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: 29px;
    height: 41px;
  }

  .action-dock {
    bottom: calc(max(4px, env(safe-area-inset-bottom)) + 58px);
    width: min(330px, calc(100% - 160px));
  }

  .mobile-tools-fab {
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    font-size: 0.58rem;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 980px) and (max-height: 520px) {
  #retentionPanel,
  #trainingPanel,
  #postgameReviewCard {
    display: none !important;
  }

  body {
    background:
      radial-gradient(circle at 50% 50%, #00000000 0 50%, #00000066 100%),
      linear-gradient(135deg, #2b1714 0%, #120908 48%, #301912 100%);
  }

  .page {
    padding: 0;
  }

  .table-panel {
    padding: 0;
  }

  .table-stage {
    width: 100vw;
    height: 100dvh;
    border: none;
    border-radius: 0;
    background:
      linear-gradient(90deg, #00000066 0 5.8%, #00000000 12% 88%, #00000066 94.2% 100%),
      linear-gradient(180deg, #0000004d 0 4.5%, #00000000 15% 84%, #00000059 100%),
      radial-gradient(ellipse at 50% 52%, #14936f 0%, #08755f 47%, #06483f 78%, #1f120e 100%);
    box-shadow:
      inset 0 0 0 11px #21100d,
      inset 0 0 0 14px #8c5b2c,
      inset 0 0 0 17px #22110c,
      inset 0 0 54px #000000b0;
  }

  .table-stage::before {
    content: "";
    position: absolute;
    inset: 18px 46px 52px;
    border: 1px solid #49b69a24;
    border-radius: 10px;
    background:
      repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 4px),
      linear-gradient(90deg, transparent 0 48%, #0b483e80 48% 52%, transparent 52% 100%);
    box-shadow: inset 0 0 42px #05392fa8;
    pointer-events: none;
  }

  .table-stage::after {
    content: "杭州麻将";
    position: absolute;
    left: 28%;
    bottom: 22%;
    color: #06382f73;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0;
    pointer-events: none;
  }

  .table-meta {
    top: max(8px, env(safe-area-inset-top));
    left: max(56px, env(safe-area-inset-left));
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid #2b3540cc;
    border-radius: 6px;
    background: linear-gradient(180deg, #293247e0 0%, #141a28e8 100%);
    box-shadow: 0 5px 12px #00000063;
    color: #edf9ff;
  }

  .table-meta .meta-row {
    font-size: 0.7rem;
    line-height: 1.08;
  }

  .table-meta .meta-label {
    color: #b8c7da;
  }

  .rules-chip:not(.mobile-new-game-chip) {
    display: inline-flex;
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    top: max(8px, env(safe-area-inset-top));
    width: 38px;
    min-width: 38px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
    border-color: #2e4054;
    background: linear-gradient(180deg, #243148e8 0%, #121a2ae8 100%);
    box-shadow: 0 5px 12px #00000063;
    color: transparent;
    overflow: hidden;
  }

  .rules-chip:not(.mobile-new-game-chip)::before {
    content: "☰";
    color: #eaf8ff;
    font-size: 1.35rem;
    line-height: 1;
  }

  .mobile-new-game-chip {
    top: max(8px, env(safe-area-inset-top));
    right: max(37px, env(safe-area-inset-right));
    min-width: 66px;
    min-height: 34px;
    border-radius: 6px;
    border-color: #2e4054;
    background: linear-gradient(180deg, #243148e8 0%, #121a2ae8 100%);
    box-shadow: 0 5px 12px #00000063;
    color: #eaf8ff;
    font-size: 0.68rem;
  }

  .seat .player-card {
    position: fixed;
    z-index: 8;
    display: grid;
    grid-template-rows: 38px 19px;
    justify-items: center;
    gap: 0;
    width: 52px;
    margin: 0;
    padding: 2px;
    border: 1px solid #3e3940;
    border-radius: 4px;
    background: #171217d9;
    box-shadow: 0 5px 12px #00000080;
  }

  .avatar-dot {
    width: 38px;
    height: 38px;
    border: 2px solid #ece8df;
    border-radius: 2px;
    background:
      radial-gradient(circle at 50% 42%, #f2f8ff 0 18%, transparent 19%),
      linear-gradient(160deg, #5db36b 0%, #d9f1a1 54%, #e8493e 55% 100%);
    color: #0d2b18;
    font-size: 0.62rem;
    font-weight: 900;
    box-shadow: none;
  }

  .avatar-photo {
    width: 38px;
    height: 38px;
    border-radius: 2px;
  }

  .score-chip {
    width: 46px;
    min-width: 46px;
    padding: 1px 3px;
    border: none;
    border-radius: 0 0 3px 3px;
    background: #1c161b;
    color: #e9edf5;
    font-size: 0.72rem;
    line-height: 17px;
  }

  .seat.is-current-seat .player-card {
    box-shadow: 0 0 0 2px #ff4b40, 0 0 12px #ff3b32a6;
  }

  .seat-bottom .player-card {
    left: calc(max(0px, env(safe-area-inset-left)) - 150px);
    bottom: max(0px, env(safe-area-inset-bottom));
  }

  .seat-left .player-card {
    left: calc(max(55px, env(safe-area-inset-left)) + 30px);
    top: calc(42% - 45px);
  }

  .seat-right .player-card {
    right: calc(max(55px, env(safe-area-inset-right)) + 30px);
    top: calc(34% - 45px);
  }

  .seat-top .player-card {
    right: max(116px, env(safe-area-inset-right));
    top: 52px;
  }

  .seat-top {
    top: 33px;
    left: calc(50% - 155px);
    width: 310px;
    max-width: calc(100% - 360px);
  }

  .top-open-row,
  .side-open-row,
  .discard-zone,
  .player-hand-band,
  .action-dock .claim-panel {
    border-color: #0b463a4a;
    background: transparent;
    box-shadow: none;
  }

  .top-open-row {
    padding: 0;
  }

  .seat-top .top-open-row .op-hand {
    justify-content: center;
  }

  .op-hand .tile-face.op-tile {
    filter: drop-shadow(0 2px 1px #001a1266);
  }

  .seat-left,
  .seat-right {
    top: 70px;
    width: auto;
  }

  .seat-left {
    left: max(42px, env(safe-area-inset-left));
  }

  .seat-right {
    right: max(42px, env(safe-area-inset-right));
  }

  .side-open-row {
    height: 240px;
    min-height: 240px;
  }

  .side-open-row .tile-face.op-tile,
  .seat-top .tile-face.op-tile {
    border-radius: 3px;
  }

  .seat-top .tile-face.op-tile {
    width: 25px;
    height: 35px;
  }

  .side-open-row .tile-face.op-tile {
    width: 31px;
    height: 29px;
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -10px;
  }

  .seat-left .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back,
  .seat-right .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back {
    margin-top: -13px;
  }

  .seat-top .discard-zone {
    width: 172px;
    min-height: 42px;
    max-height: 42px;
    margin-top: 2px;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 74px;
    min-height: 166px;
    max-height: 166px;
  }

  .seat-bottom {
    bottom: 91px;
    width: 238px;
    max-width: calc(100% - 300px);
  }

  .seat-bottom .discard-zone {
    width: 238px;
    min-height: 58px;
    max-height: 58px;
    background: #052f2852;
  }

  .center-hud {
    top: calc(50% - 40px);
    left: 50%;
    width: 96px;
    min-height: 62px;
    transform: translateX(-50%);
    gap: 2px;
    padding: 7px 7px 5px;
    border: 1px solid #2e2a25;
    border-radius: 13px;
    background:
      radial-gradient(circle at 50% 48%, #26404a 0 34%, #12171c 35% 100%);
    box-shadow: 0 8px 14px #00000091, inset 0 0 0 2px #5f4d35;
  }

  .center-status {
    max-width: 80px;
    margin-top: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: #4ff2ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.98rem;
    font-weight: 900;
  }

  .status-ribbon {
    position: fixed;
    left: 50%;
    top: max(9px, env(safe-area-inset-top));
    transform: translateX(-50%);
    max-width: 260px;
    border-color: #223448;
    background: #172134e8;
    box-shadow: 0 5px 12px #00000063;
  }

  .player-hand-band {
    left: 50%;
    right: auto;
    width: calc(100% - 150px);
    transform: translateX(-50%);
    bottom: max(7px, env(safe-area-inset-bottom));
    min-height: 64px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .player-hand-band::before {
    display: none;
  }

  .bottom-open-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
  }

  .bottom-open-row .hand {
    min-height: 62px;
    padding: 4px 0 0;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: 41px;
    height: 58px;
    filter: drop-shadow(0 3px 2px #00000080);
  }

  .bottom-open-row .hand .chip + .chip {
    margin-left: -1px;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    min-height: 58px;
    max-height: 58px;
    max-width: none;
    align-items: flex-end;
    gap: 1px;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: 38px;
    height: 54px;
  }

  .player-hand-band .bottom-open-row .seat-open-label,
  .seat-right .right-open-row .seat-open-label,
  .seat-left .left-open-row .seat-open-label,
  .seat-top .top-open-row .seat-open-label {
    border: none;
    background: #b86513e6;
    color: #ffe8bd;
    box-shadow: 0 2px 4px #00000063;
  }

  .player-hand-band .bottom-open-row .seat-open-label {
    left: 0;
    top: -17px;
  }

  .action-dock {
    right: max(76px, env(safe-area-inset-right));
    left: auto;
    bottom: calc(max(9px, env(safe-area-inset-bottom)) + 72px);
    width: min(330px, calc(100% - 250px));
    transform: none;
  }

  .action-dock .claim-panel {
    padding: 6px;
    border: 1px solid #f0d27a7a;
    border-radius: 10px;
    background: #21140bcc;
    box-shadow: 0 8px 15px #00000080;
  }

  .claim-btn {
    min-height: 34px;
    border: 1px solid #f0cf7b8a;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8d46d 0%, #b95d17 100%);
    color: #fff7d4;
    text-shadow: 0 1px 1px #4e1600;
  }

  .center-hud-auto-action {
    bottom: calc(max(9px, env(safe-area-inset-bottom)) + 75px);
    min-width: 142px;
    height: 34px;
    border: 1px solid #f0cf7b8a;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8d46d 0%, #b95d17 100%);
    color: #fff7d4;
    text-shadow: 0 1px 1px #4e1600;
  }

  .mobile-tools-fab {
    right: max(13px, env(safe-area-inset-right));
    bottom: calc(max(78px, env(safe-area-inset-bottom)) + 8px);
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #5c81d1 0%, #253b76 78%);
    box-shadow: 0 5px 12px #0000008f;
    color: transparent;
    overflow: hidden;
  }

  .mobile-tools-fab::before {
    content: "...";
    color: #e9f4ff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 1px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 980px) and (max-height: 390px) {
  .seat-top {
    top: 29px;
    left: calc(50% - 132px);
    width: 264px;
  }

  .seat-left,
  .seat-right {
    top: 58px;
  }

  .side-open-row {
    height: 206px;
    min-height: 206px;
  }

  .seat-bottom {
    bottom: 76px;
  }

  .player-hand-band {
    left: 50%;
    right: auto;
    width: calc(100% - 146px);
    transform: translateX(-50%);
    min-height: 55px;
  }

  .bottom-open-row .hand {
    min-height: 54px;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: 35px;
    height: 50px;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    min-height: 50px;
    max-height: 50px;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: 33px;
    height: 47px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  #retentionPanel,
  #trainingPanel,
  #postgameReviewCard {
    display: none !important;
  }

  body {
    overflow: hidden;
  }

  .page {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding: 0;
  }

  .hero,
  .page > .panel:not(.table-panel) {
    display: none;
  }

  .table-panel {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .table-stage {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
    border: none;
    background:
      linear-gradient(90deg, #00000073 0 5.2%, #00000000 11% 89%, #00000073 94.8% 100%),
      linear-gradient(180deg, #00000052 0 4.2%, #00000000 14% 84%, #0000005c 100%),
      radial-gradient(ellipse at 50% 52%, #16a077 0%, #08785f 47%, #06473d 78%, #1f120e 100%);
    box-shadow:
      inset 0 0 0 11px #21100d,
      inset 0 0 0 14px #8c5b2c,
      inset 0 0 0 17px #22110c,
      inset 0 0 56px #000000b3;
  }

  .table-stage::before {
    inset: 18px 44px 46px;
    border-color: #49b69a1f;
    background: transparent;
  }

  .table-stage::after {
    left: 29%;
    bottom: 23%;
    color: #06382f45;
    font-size: 1rem;
  }

  .table-meta {
    top: max(10px, env(safe-area-inset-top));
    left: max(60px, env(safe-area-inset-left));
    min-height: 28px;
    width: auto;
    max-width: 260px;
    padding: 3px 9px;
    gap: 8px;
    border-radius: 7px;
    border: 1px solid #1f2c3aa8;
    background: linear-gradient(180deg, #253044c7 0%, #101827d9 100%);
    box-shadow: 0 4px 9px #0000004d;
    color: #edf9ff;
    opacity: 0.76;
  }

  .table-meta .meta-row {
    font-size: 0.62rem;
    line-height: 1;
  }

  .table-meta .meta-label {
    max-width: 42px;
  }

  .rules-chip:not(.mobile-new-game-chip) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: max(10px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: 34px;
    min-width: 34px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 7px;
    border-color: #2e4054;
    background: linear-gradient(180deg, #243148e8 0%, #121a2ae8 100%);
    box-shadow: 0 5px 12px #00000063;
    color: transparent;
    overflow: hidden;
  }

  .rules-chip:not(.mobile-new-game-chip)::before {
    content: "☰";
    color: #eaf8ff;
    font-size: 1.15rem;
  }

  .mobile-new-game-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: max(10px, env(safe-area-inset-top));
    right: max(43px, env(safe-area-inset-right));
    min-width: 50px;
    width: 50px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 7px;
    border-color: #2e4054;
    background: linear-gradient(180deg, #243148c9 0%, #121a2ad9 100%);
    box-shadow: 0 4px 9px #0000004d;
    color: transparent;
    font-size: 0;
    line-height: 1;
    overflow: hidden;
  }

  .mobile-new-game-chip::before {
    content: "再来";
    color: #eaf8ff;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .seat .player-card {
    position: fixed;
    z-index: 12;
    display: grid;
    width: 45px;
    grid-template-rows: 33px 16px;
    padding: 2px;
    transform: none;
  }

  .avatar-dot {
    width: 33px;
    height: 33px;
    font-size: 0.56rem;
  }

  .avatar-photo {
    width: 33px;
    height: 33px;
    border-radius: 2px;
  }

  .score-chip {
    width: 39px;
    min-width: 39px;
    font-size: 0.64rem;
    line-height: 15px;
  }

  .seat-top .player-card {
    top: calc(max(36px, calc(env(safe-area-inset-top) + 32px)) + 10px);
    right: max(90px, env(safe-area-inset-right));
  }

  .seat-left .player-card {
    left: calc(max(79px, env(safe-area-inset-left)) + 30px);
    top: calc(42% - 45px);
  }

  .seat-right .player-card {
    right: calc(max(163px, env(safe-area-inset-right)) + 30px);
    top: calc(38% - 45px);
  }

  .seat-top {
    top: 31px;
    left: calc(50% - 168px);
    right: auto;
    width: 336px;
    max-width: calc(100% - 360px);
  }

  .seat-top .top-open-row {
    min-height: 30px;
    padding: 0;
  }

  .seat-top .top-open-row .op-hand {
    min-height: 30px;
    justify-content: center;
  }

  .seat-top .tile-face.op-tile {
    width: 24px;
    height: 34px;
  }

  .seat-top .discard-zone {
    width: 188px;
    min-height: 44px;
    max-height: 44px;
    margin-top: 4px;
    background: #052f2826;
  }

  .seat-left,
  .seat-right {
    top: 86px;
    width: auto;
    column-gap: 6px;
  }

  .seat-left {
    left: max(52px, env(safe-area-inset-left));
    grid-template-columns: auto 86px;
  }

  .seat-right {
    right: max(52px, env(safe-area-inset-right));
    grid-template-columns: 86px auto;
  }

  .side-open-row {
    width: max-content;
    min-width: 38px;
    height: min(300px, calc(100dvh - 180px));
    min-height: 196px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    overflow: hidden;
  }

  .side-hand-stack {
    max-height: none;
  }

  .side-open-row .tile-face.op-tile {
    width: 34px;
    height: 31px;
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -8px;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 86px;
    min-height: min(226px, calc(100dvh - 230px));
    max-height: min(226px, calc(100dvh - 230px));
    padding: 2px;
    background: #052f2828;
    border-color: #0b463a20;
  }

  .discard-zone.is-empty,
  .discard-zone:has(.discard-empty) {
    background: transparent;
    border-color: transparent;
  }

  .discard-zone-side .discard-col {
    min-width: 23px;
    grid-auto-rows: 17px;
    row-gap: 0;
  }

  .discard-zone-side .discard-slot {
    width: 23px;
    height: 17px;
  }

  .discard-zone-side .tile-face {
    width: 16px;
    height: 23px;
  }

  .seat-bottom {
    bottom: 92px;
    width: 270px;
    max-width: calc(100% - 390px);
  }

  .seat-bottom .discard-zone {
    width: 270px;
    min-height: 54px;
    max-height: 54px;
    background: #052f2824;
    border-color: #0b463a20;
  }

  .seat-bottom .discard-zone .tile-face,
  .seat-top .discard-zone .tile-face {
    width: 18px;
    height: 26px;
  }

  .center-hud {
    top: calc(50% - 22px);
    left: 50%;
    width: 112px;
    min-height: 46px;
    padding: 5px 10px 4px;
    border-radius: 15px;
    transform: translateX(-50%);
    background:
      linear-gradient(135deg, transparent 0 12px, #151c22 12px calc(100% - 12px), transparent calc(100% - 12px)),
      radial-gradient(circle at 50% 48%, #263d47 0 34%, #12171c 35% 100%);
    box-shadow: 0 6px 12px #00000082, inset 0 0 0 2px #5f4d35;
  }

  .center-status {
    max-width: 92px;
    margin-top: 5px;
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.12;
  }

  .status-ribbon {
    max-width: 230px;
    padding: 3px 7px;
    font-size: 0.58rem;
    opacity: 0.9;
  }

  .player-hand-band {
    left: 50%;
    right: auto;
    width: calc(100% - 168px);
    transform: translateX(-50%);
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 64px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .player-hand-band::before {
    display: none;
  }

  .bottom-open-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }

  .bottom-open-row .hand {
    min-height: 68px;
    padding-top: 6px;
    justify-content: flex-start;
    overflow-y: visible;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: clamp(36px, 4.25vw, 42px);
    height: clamp(51px, 6vw, 59px);
  }

  .player-hand-band .bottom-open-row .meld-zone {
    min-height: 56px;
    max-height: 56px;
    width: auto;
    max-width: none;
    justify-content: flex-end;
    align-items: flex-end;
    padding-left: 6px;
    border-left: 1px solid #d8c38a42;
  }

  .player-hand-band .bottom-open-row .meld-zone .tile-face.meld-tile {
    width: clamp(33px, 3.8vw, 38px);
    height: clamp(47px, 5.4vw, 54px);
  }

  .player-hand-band .bottom-open-row .seat-open-label,
  .seat-right .right-open-row .seat-open-label,
  .seat-left .left-open-row .seat-open-label,
  .seat-top .top-open-row .seat-open-label {
    opacity: 0.82;
    transform: none;
  }

  .player-hand-band .bottom-open-row .seat-open-label {
    left: 0;
    top: -18px;
  }

  .seat-top .top-open-row .seat-open-label {
    right: -54px;
    top: 50%;
    transform: translateY(-50%);
  }

  .seat-left .left-open-row .seat-open-label,
  .seat-right .right-open-row .seat-open-label {
    top: -18px;
  }

  .action-dock {
    right: max(90px, env(safe-area-inset-right));
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 68px);
    width: min(310px, calc(100% - 360px));
  }

  .action-dock .claim-panel {
    padding: 5px;
    border-radius: 999px;
  }

  .claim-btn {
    min-height: 31px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .center-hud-auto-action {
    position: absolute;
    left: auto;
    right: calc(100% + 10px);
    top: calc(100% - 6px);
    bottom: auto;
    transform: none;
    min-width: 98px;
    height: 29px;
    font-size: 0.68rem;
    opacity: 0.84;
  }

  .mobile-tools-fab {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(50% - 20px);
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #5c81d1 0%, #253b76 78%);
    color: transparent;
    overflow: hidden;
    box-shadow:
      0 4px 10px #00000080,
      0 -46px 0 -3px #263b76e6,
      0 46px 0 -3px #263b76e6;
    z-index: 30;
  }

  .mobile-tools-fab::before {
    content: "☰";
    display: block;
    position: relative;
    z-index: 1;
    color: #e9f4ff;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 1px;
  }

  .mobile-tools-fab::after {
    content: "";
    position: absolute;
    inset: auto 9px 8px;
    height: 2px;
    border-radius: 999px;
    background: #e9f4ff;
    box-shadow: 0 -6px 0 #e9f4ff, 0 -12px 0 #e9f4ff;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 430px) {
  .table-meta {
    max-width: 220px;
    opacity: 0.82;
  }

  .seat-top {
    top: 28px;
    left: calc(50% - 150px);
    width: 300px;
  }

  .seat-top .player-card {
    top: 48px;
    right: max(72px, env(safe-area-inset-right));
  }

  .seat-left,
  .seat-right {
    top: 68px;
  }

  .side-open-row {
    height: min(250px, calc(100dvh - 160px));
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    min-height: min(184px, calc(100dvh - 210px));
    max-height: min(184px, calc(100dvh - 210px));
  }

  .seat-bottom {
    bottom: 76px;
  }

  .seat-bottom .player-card {
    left: calc(max(0px, env(safe-area-inset-left)) - 100px);
    bottom: max(0px, env(safe-area-inset-bottom));
  }

  .player-hand-band {
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 56px;
  }

  .bottom-open-row .hand {
    min-height: 61px;
    padding-top: 5px;
    overflow-y: visible;
  }

  .player-hand-band .bottom-open-row .hand .tile-face {
    width: clamp(33px, 4vw, 38px);
    height: clamp(47px, 5.7vw, 54px);
  }

  .player-hand-band .bottom-open-row .meld-zone {
    min-height: 50px;
    max-height: 50px;
  }

  .center-hud {
    top: calc(50% - 31px);
    width: 76px;
    min-height: 50px;
  }

  .center-status {
    font-size: 0.76rem;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  .seat .player-card {
    z-index: 18;
    display: grid;
    pointer-events: none;
  }

  .seat-bottom .player-card {
    left: calc(max(0px, env(safe-area-inset-left)) - 150px);
    top: auto;
    bottom: max(0px, env(safe-area-inset-bottom));
  }

  .seat-top .player-card {
    left: calc(50% + 186px);
    right: auto;
    top: calc(max(10px, env(safe-area-inset-top)) + 10px);
  }

  .seat-top {
    left: 50%;
    width: min(420px, calc(100vw - 410px));
    max-width: none;
    transform: translateX(-50%);
  }

  .seat-top .top-open-row {
    width: 100%;
  }

  .top-hand-stack {
    justify-content: center;
  }

  .seat-top .top-open-row .op-hand {
    flex: 0 1 auto;
    max-width: 100%;
    overflow: visible;
  }

  .seat-left .player-card {
    left: calc(max(51px, env(safe-area-inset-left)) + 30px);
    top: 43px;
  }

  .seat-right .player-card {
    right: calc(max(51px, env(safe-area-inset-right)) + 30px);
    top: 43px;
  }

  .table-stage.other-win-active .seat-left .player-card {
    left: calc(max(51px, env(safe-area-inset-left)) - 24px);
  }

  .table-stage.other-win-active .seat-right .player-card {
    right: calc(max(51px, env(safe-area-inset-right)) - 24px);
  }

  .seat-left,
  .seat-right {
    top: 64px;
    width: auto;
    column-gap: 6px;
  }

  .seat-left {
    left: max(54px, env(safe-area-inset-left));
    grid-template-columns: auto 92px;
  }

  .seat-right {
    right: max(54px, env(safe-area-inset-right));
    grid-template-columns: 92px auto;
  }

  .side-open-row {
    height: min(318px, calc(100dvh - 118px));
    min-height: min(318px, calc(100dvh - 118px));
    overflow: visible;
  }

  .side-hand-stack {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .side-open-row .tile-face.op-tile {
    width: 30px;
    height: 27px;
  }

  .table-stage.is-finished-round .side-open-row .tile-face.op-tile {
    width: 25px;
    height: 23px;
    background: transparent;
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -7px;
  }

  .seat-left .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back,
  .seat-right .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back {
    margin-top: -9px;
  }

  .table-stage.is-finished-round .side-open-row .op-hand.vertical .tile-face.op-tile + .tile-face.op-tile {
    margin-top: -4px;
  }

  .op-draw-slot.vertical {
    height: 24px;
    min-height: 24px;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 92px;
    min-height: min(214px, calc(100dvh - 202px));
    max-height: min(214px, calc(100dvh - 202px));
    padding: 3px;
    border-color: #0b463a2e;
    background: #052f282d;
  }

  .discard-zone.vertical.discard-zone-side {
    gap: 2px;
    overflow: hidden;
  }

  .discard-zone-side .discard-col {
    min-width: 24px;
    grid-auto-rows: 18px;
    row-gap: 1px;
  }

  .discard-zone-side .discard-slot {
    width: 24px;
    height: 18px;
  }

  .discard-zone-side .tile-face {
    width: 17px;
    height: 24px;
  }

  .discard-zone-side-right .discard-col {
    align-content: end;
  }

  .discard-zone-side-left .discard-col {
    align-content: start;
  }

  .seat-top .discard-zone {
    width: min(322px, 100%);
    min-height: 64px;
    max-height: 64px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .seat-bottom {
    bottom: 82px;
  }

  .seat-bottom .discard-zone {
    width: min(322px, calc(100vw - 520px));
    min-height: 64px;
    max-height: 64px;
    margin-left: calc(50% - 50vw + ((100vw - min(322px, calc(100vw - 520px))) / 2));
    margin-right: 0;
  }

  .seat-bottom .discard-zone .tile-face,
  .seat-top .discard-zone .tile-face {
    width: 19px;
    height: 27px;
  }

  .player-hand-band {
    left: 50%;
    right: auto;
    width: calc(100% - 218px);
    transform: translateX(-50%);
  }

  .player-hand-band .bottom-open-row .meld-zone {
    max-width: none;
    overflow-x: auto;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  .player-hand-band .bottom-open-row {
    overflow: visible;
  }

  .player-hand-band .bottom-open-row .hand {
    flex: 1 1 0;
    flex-basis: 0;
    width: auto;
    min-width: 0;
  }

  .player-hand-band .bottom-open-row .meld-zone {
    flex: 0 0 max-content;
    width: max-content;
    min-width: max-content;
    overflow: visible;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 430px) {
  .seat-left,
  .seat-right {
    top: 58px;
  }

  .side-open-row {
    height: min(278px, calc(100dvh - 112px));
    min-height: min(278px, calc(100dvh - 112px));
  }

  .side-open-row .tile-face.op-tile {
    width: 28px;
    height: 25px;
  }

  .table-stage.is-finished-round .side-open-row .tile-face.op-tile {
    width: 23px;
    height: 21px;
    background: transparent;
  }

  .side-open-row .op-hand.vertical .tile-face + .tile-face {
    margin-top: -6px;
  }

  .seat-left .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back,
  .seat-right .side-open-row .op-hand.vertical .tile-face.tile-back + .tile-face.tile-back {
    margin-top: -8px;
  }

  .table-stage.is-finished-round .side-open-row .op-hand.vertical .tile-face.op-tile + .tile-face.op-tile {
    margin-top: -4px;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    min-height: min(176px, calc(100dvh - 196px));
    max-height: min(176px, calc(100dvh - 196px));
  }

  .discard-zone-side .discard-col {
    min-width: 23px;
    grid-auto-rows: 16px;
  }

  .discard-zone-side .discard-slot {
    width: 23px;
    height: 16px;
  }

  .discard-zone-side .tile-face {
    width: 16px;
    height: 23px;
  }

  .seat-left .player-card,
  .seat-right .player-card {
    top: 31px;
  }

  .seat-bottom {
    bottom: 70px;
  }

  .player-hand-band {
    left: 50%;
    right: auto;
    width: calc(100% - 200px);
    transform: translateX(-50%);
  }

  .player-hand-band .bottom-open-row .meld-zone {
    max-width: none;
  }
}

/* Let opponent meld areas grow instead of being clipped by fixed breakpoint widths. */
.seat-top .top-open-row {
  overflow: visible;
}

.seat-top .top-open-row .meld-zone {
  width: auto;
  min-width: 0;
  max-width: none !important;
  flex: 0 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.seat-left,
.seat-right {
  width: auto;
}

.seat-left,
.seat-right {
  grid-template-columns: max-content max-content !important;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  .seat-top .seat-open-row > .seat-open-label,
  .seat-left .seat-open-row > .seat-open-label,
  .seat-right .seat-open-row > .seat-open-label {
    display: inline-flex !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0 !important;
  }

  .seat-top .seat-open-row > .seat-open-label .seat-open-label-text,
  .seat-left .seat-open-row > .seat-open-label .seat-open-label-text,
  .seat-right .seat-open-row > .seat-open-label .seat-open-label-text {
    display: none !important;
  }

  .seat-top .seat-info,
  .seat-left .seat-info,
  .seat-right .seat-info {
    z-index: 19;
    display: block;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    color: #f5f2e8;
    font-size: 0.62rem;
    line-height: 1.1;
    text-shadow: 0 1px 2px #000000b8;
  }

  .seat-top .player-card,
  .seat-left .player-card,
  .seat-right .player-card {
    overflow: visible;
  }

  .seat-top .player-card .seat-info,
  .seat-left .player-card .seat-info {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    max-width: none;
    text-align: left;
  }

  .seat-right .player-card .seat-info {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
    text-align: center;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 430px) {
  .seat-top .player-card .seat-info,
  .seat-left .player-card .seat-info {
    left: calc(100% + 6px);
  }

  .seat-right .player-card .seat-info {
    bottom: calc(100% + 1px);
  }
}

.side-open-row {
  width: max-content;
  overflow: visible !important;
}

.side-open-row .meld-zone.vertical {
  width: max-content;
  min-width: var(--side-open-col-w);
  max-height: none !important;
  overflow: visible !important;
}

/* Keep the human meld area fully visible; let the hand rail take the squeeze/scroll instead. */
.player-hand-band .bottom-open-row {
  min-width: 0;
}

.player-hand-band .bottom-open-row .hand {
  flex: 1 1 0 !important;
  width: auto;
  min-width: 0;
}

.player-hand-band .bottom-open-row .meld-zone {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

.action-dock {
  translate: 15px 15px;
}

.discard-zone,
.meld-zone,
.meld-group,
.top-open-row,
.side-open-row {
  border: none !important;
  background: transparent !important;
}

.center-hud .center-hud-auto-action {
  position: absolute;
  left: 50%;
  right: auto;
  top: calc(100% + 6px);
  bottom: auto;
  transform: translateX(-50%);
  align-self: auto;
  margin-top: 0;
}

.action-dock .claim-panel,
.claim-panel {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  .seat-left {
    left: max(46px, env(safe-area-inset-left));
    grid-template-columns: auto 104px;
  }

  .seat-right {
    right: max(46px, env(safe-area-inset-right));
    grid-template-columns: 104px auto;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 104px;
    min-height: min(232px, calc(100dvh - 190px));
    max-height: min(232px, calc(100dvh - 190px));
  }

  .discard-zone-side .discard-col {
    min-width: 31px;
    grid-auto-rows: 22px;
    row-gap: 1px;
  }

  .discard-zone-side-right .discard-col {
    height: 160px;
    max-height: none;
    align-content: end;
  }

  .discard-zone-side-left .discard-col {
    height: 160px;
    max-height: none;
    align-content: start;
  }

  .discard-zone-side .discard-slot {
    width: 31px;
    height: 22px;
  }

  .discard-zone-side .tile-face {
    width: 21px;
    height: 30px;
  }

  .seat-top .discard-zone {
    width: min(342px, 100%);
    min-height: 80px;
    max-height: 80px;
  }

  .seat-bottom .discard-zone {
    min-height: 80px;
    max-height: 80px;
  }

  .seat-top .discard-zone .tile-face {
    width: 24px;
    height: 34px;
  }

  .seat-bottom .discard-zone .tile-face {
    width: 24px;
    height: 34px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 430px) {
  .seat-left {
    left: max(44px, env(safe-area-inset-left));
    grid-template-columns: auto 100px;
  }

  .seat-right {
    right: max(44px, env(safe-area-inset-right));
    grid-template-columns: 100px auto;
  }

  .seat-right .discard-zone.vertical,
  .seat-left .discard-zone.vertical {
    width: 100px;
    min-height: min(212px, calc(100dvh - 182px));
    max-height: min(212px, calc(100dvh - 182px));
  }

  .discard-zone-side .discard-col {
    min-width: 30px;
    grid-auto-rows: 21px;
  }

  .discard-zone-side-right .discard-col {
    height: 153px;
    max-height: none;
    align-content: end;
  }

  .discard-zone-side-left .discard-col {
    height: 153px;
    max-height: none;
    align-content: start;
  }

  .discard-zone-side .discard-slot {
    width: 30px;
    height: 21px;
  }

  .discard-zone-side .tile-face {
    width: 20px;
    height: 29px;
  }

  .seat-top .discard-zone {
    width: min(330px, 100%);
    min-height: 74px;
    max-height: 74px;
  }

  .seat-bottom .discard-zone {
    width: min(322px, calc(100vw - 390px));
    min-height: 74px;
    max-height: 74px;
    margin-left: calc(50% - 50vw + ((100vw - min(322px, calc(100vw - 390px))) / 2));
  }

  .seat-top .discard-zone .tile-face {
    width: 22px;
    height: 31px;
  }

  .seat-bottom .discard-zone .tile-face {
    width: 22px;
    height: 31px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .seat-top .player-card,
  .seat-right .player-card {
    position: relative;
    display: inline-flex;
    width: max-content;
    justify-self: center;
    justify-content: center;
    align-items: center;
    gap: 6px;
    overflow: visible;
  }

  .seat-top .player-card {
    margin-left: auto;
    margin-right: auto;
  }

  .seat-right .player-card {
    margin-left: auto;
    margin-right: auto;
  }

  .seat-top .player-card .seat-info,
  .seat-right .player-card .seat-info {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: none;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }

  .seat-top .top-open-row > .seat-open-label,
  .seat-right .right-open-row > .seat-open-label {
    display: none !important;
  }
}