.game-table.mahjong-table {
  --table-height: clamp(210px, 39vh, 415px);
  --portrait-size: clamp(34px, 5vw, 60px);
  --tile-height: 78px;
  --river-tile: 24px;
  grid-template-columns: minmax(0, 1fr);
}
.game-table > .mahjong-panel {
  padding: 8px;
  background: #171d25;
  border-color: #61483d;
}
.mahjong-panel .tablehead { margin-bottom: 5px; }
.mahjong-panel .tablehead h2 { margin: 0; font-size: clamp(.86rem, 2.2vw, 1.12rem); }
.mahjong-panel .tablehead button { padding: .3rem .55rem; font-size: .78rem; }
.mahjong-panel .felt {
  min-height: 0;
  padding: 0;
  border: 1px solid #9e7055;
  border-radius: 13px;
  background: #171d26;
}
.mahjong-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-bottom: 1px solid #785443;
  border-radius: 12px 12px 0 0;
  background: #29232b;
}
.mahjong-banner .notice {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe6b1;
  font-size: .8rem;
}
.mahjong-meta { color: #dbcbb5; text-align: right; font-size: .72rem; }
.mahjong-round-info { display: flex; align-items: center; gap: 6px; min-width: 0; color: #ffe0a3; font-size: .74rem; }
.mahjong-round { white-space: nowrap; font-weight: 800; }
.mahjong-dealer-name {
  min-width: 0;
  padding: 1px 6px;
  overflow: hidden;
  border: 1px solid #a77948;
  border-radius: 5px;
  background: #503726;
  color: #ffe2ac;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mahjong-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas: "left opposite right" "left river right";
  grid-template-columns: minmax(64px, 1fr) minmax(0, 3.5fr) minmax(64px, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px 8px;
  height: var(--table-height);
  padding: 4px clamp(4px, 1.1vw, 14px) 3px;
  background: #21242c url("/mahjong-table.svg?v=17") center / 100% 100% no-repeat;
}
.mahjong-center {
  --wall-edge: clamp(6px, 2.1dvh, 12px);
  --wall-side: clamp(7px, 1.5vw, 16px);
  grid-area: river;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
}
.mahjong-wall {
  grid-area: 1 / 1;
  display: grid;
  grid-template-areas: ". north ." "west . east" ". south .";
  grid-template-columns: var(--wall-side) minmax(0, 1fr) var(--wall-side);
  grid-template-rows: var(--wall-edge) minmax(0, 1fr) var(--wall-edge);
  gap: 1px;
  pointer-events: none;
}
.wall-side {
  display: grid;
  gap: .65px;
}
.wall-side-0, .wall-side-2 {
  grid-template-columns: repeat(18, minmax(0, 1fr));
}
.wall-side-1, .wall-side-3 {
  grid-template-rows: repeat(18, minmax(0, 1fr));
}
.wall-side-0 { grid-area: south; align-items: end; }
.wall-side-1 { grid-area: east; justify-items: end; }
.wall-side-2 { grid-area: north; align-items: end; direction: rtl; }
.wall-side-3 { grid-area: west; justify-items: start; }
.wall-side-0 .wall-stack, .wall-side-2 .wall-stack {
  grid-column: var(--slot);
  height: 100%;
}
.wall-side-1 .wall-stack, .wall-side-3 .wall-stack {
  width: 100%;
}
.wall-side-1 .wall-stack { grid-row: calc(19 - var(--slot)); }
.wall-side-3 .wall-stack { grid-row: var(--slot); }
.wall-side-0 .wall-stack.single, .wall-side-2 .wall-stack.single { height: 55%; }
.wall-side-1 .wall-stack.single, .wall-side-3 .wall-stack.single { width: 55%; }
.wall-side-1 .wall-stack, .wall-side-3 .wall-stack {
  background: linear-gradient(90deg, #b8dfd6 0 19%, #53939e 20% 46%, #d5d7b4 47% 59%, #377381 60%);
}
.wall-side-1 .wall-stack.single, .wall-side-3 .wall-stack.single {
  background: linear-gradient(90deg, #b8dfd6 0 29%, #53939e 30%);
}
.wall-stack {
  border-radius: 2px;
  background: linear-gradient(#b8dfd6 0 20%, #53939e 20% 47%, #d5d7b4 47% 60%, #377381 60%);
  box-shadow: 0 1px 1px #0e2630;
}
.wall-stack.single { background: linear-gradient(#b8dfd6 0 30%, #53939e 30%); }
.mahjong-transfer {
  --transfer-x: 50%;
  --transfer-y: 94%;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 55%;
  display: grid;
  justify-items: center;
  gap: 3px;
  pointer-events: none;
  animation: mahjong-transfer 540ms ease-in-out both;
}
.mahjong-transfer.transfer-1 { --transfer-x: 91%; --transfer-y: 48%; }
.mahjong-transfer.transfer-2 { --transfer-y: 12%; }
.mahjong-transfer.transfer-3 { --transfer-x: 9%; --transfer-y: 48%; }
.mahjong-transfer.own-draw { --transfer-x: 88%; animation-duration: 630ms; }
.mahjong-transfer.discard-show { animation: mahjong-discard-show 800ms ease-out both; }
.mahjong-transfer-packet { display: flex; gap: 3px; filter: drop-shadow(0 2px 4px #0b1628a8); }
.mahjong-transfer-back {
  width: clamp(14px, 2.6vw, 27px);
  aspect-ratio: 3 / 4;
  border: 1px solid #d1f1e2;
  border-radius: 4px;
  background: linear-gradient(145deg, #a0e0d6 0 9%, #4c9aa6 10% 72%, #2e6474 74%);
  box-shadow: inset 0 0 0 2px #87c0c877, 0 2px #1c4f5d;
}
.mahjong-transfer.own-draw .tile, .mahjong-transfer.discard-show .tile { width: clamp(44px, 7.2vw, 75px); height: auto; aspect-ratio: 3 / 4; padding: 0; outline: 2px solid #ffdc89; }
.mahjong-transfer-label { padding: 0 5px; border-radius: 4px; background: #192b37; color: #ffdf9e; font-size: .66rem; font-weight: 800; }
.discard-show .mahjong-transfer-label { padding: 2px 7px; background: #7b362c; font-size: .8rem; }
.mahjong-dice {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid #d3a568;
  border-radius: 8px;
  background: #192938f0;
  color: #ffe6b4;
  font-size: .8rem;
  white-space: nowrap;
  pointer-events: none;
}
.mahjong-dice[hidden] { display: none; }
.mahjong-dice-faces { display: flex; gap: 5px; }
.mahjong-dice-faces svg { width: clamp(26px, 4.7vw, 43px); aspect-ratio: 1; }
.mahjong-dice.rolling svg { animation: mahjong-dice-roll 200ms ease-in-out infinite alternate; }
.mahjong-dice.rolling svg:nth-child(2) { animation-delay: -100ms; }
.mahjong-dice.rolling svg:nth-child(3) { animation-delay: -150ms; }
@keyframes mahjong-dice-roll {
  from { transform: translateY(1px) rotate(-14deg); }
  to { transform: translateY(-5px) rotate(14deg); }
}
@keyframes mahjong-discard-show {
  from { left: var(--transfer-x); top: var(--transfer-y); transform: translate(-50%, -50%) scale(.55); opacity: 0; }
  22%, 84% { left: 50%; top: 55%; transform: translate(-50%, -50%); opacity: 1; }
  to { left: 50%; top: 55%; transform: translate(-50%, -50%); opacity: 0; }
}
@keyframes mahjong-transfer {
  0% { left: 50%; top: 55%; transform: translate(-50%, -50%) scale(.85); opacity: 0; }
  15%, 45% { left: 50%; top: 55%; transform: translate(-50%, -50%); opacity: 1; }
  88% { left: var(--transfer-x); top: var(--transfer-y); transform: translate(-50%, -50%) scale(.72); opacity: 1; }
  100% { left: var(--transfer-x); top: var(--transfer-y); transform: translate(-50%, -50%) scale(.64); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mahjong-transfer { --transfer-x: 50%; --transfer-y: 55%; animation: mahjong-transfer-fade 450ms ease-out both; }
  .mahjong-transfer.discard-show { animation-name: mahjong-transfer-fade; }
  .mahjong-dice.rolling svg { animation: none; }
  @keyframes mahjong-transfer-fade {
    0%, 75% { transform: translate(-50%, -50%); opacity: 1; }
    100% { transform: translate(-50%, -50%); opacity: 0; }
  }
}
.mahjong-felt .seat {
  min-width: 0;
  border: 1px solid #a67c5a;
  padding: 4px;
  background: linear-gradient(160deg, #302a34, #192530);
  color: #ffedce;
  text-align: center;
}
.mahjong-stage .seat { align-self: center; max-height: 100%; overflow: auto; scrollbar-width: thin; }
.mahjong-dealer-seat .seat-identity strong { color: #ffcb73; }
.mahjong-felt .seat.turn { border-color: #ffcf73; box-shadow: 0 0 0 1px #ffcf73, 0 0 15px #f9b35461; }
.mahjong-stage .seat-avatar {
  width: var(--portrait-size);
  height: var(--portrait-size);
  border: 2px solid #c89566;
  background: #dca66d;
  box-shadow: 0 2px 6px #0008;
  font-size: 1rem;
}
.mahjong-stage .seat-identity { justify-content: center; }
.mahjong-stage .seat strong, .mahjong-action-rail .seat strong { font-size: clamp(.68rem, 1.5vw, .86rem); }
.mahjong-stage .seat small { color: #d0c7bc; font-size: clamp(.59rem, 1.2vw, .72rem); }
.mahjong-stage .seat-position-1 { grid-area: right; }
.mahjong-stage .seat-position-2 {
  grid-area: opposite;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: calc(var(--portrait-size) + 6px);
}
.mahjong-stage .seat-position-3 { grid-area: left; }
.mahjong-stage .seat-position-1 .seat-identity, .mahjong-stage .seat-position-3 .seat-identity { flex-direction: column; }
.mahjong-stage .seat-identity strong { max-width: 100%; }
.mahjong-stage .seat-position-2 .seat-identity { flex: none; max-width: 55%; }
.mahjong-stage .seat-position-2 small { white-space: nowrap; }
.mahjong-rack {
  display: grid;
  grid-template-columns: repeat(17, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  min-width: 0;
  margin-block: 3px;
}
.mahjong-rack > span {
  height: clamp(8px, 1.45vw, 13px);
  border-radius: 2px;
  background: linear-gradient(#79b9ac 0 15%, #3c837e 16% 76%, #d9dfca 77% 90%, #477b76 91%);
}
.mahjong-stage .seat-position-2 .mahjong-rack { width: clamp(53px, 12vw, 146px); }
.mahjong-felt .seat-tiles, .mahjong-felt .seat-meld { display: flex; flex-wrap: nowrap; gap: 2px; }
.mahjong-felt .seat-tiles { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.mahjong-felt .seat-meld { padding-inline-end: 3px; border-inline-end: 1px solid #c99a73; }
.mahjong-stage .seat-position-2 .seat-tiles, .mahjong-action-rail .seat-tiles { margin: 0; }
.mahjong-felt .rivers {
  grid-area: 1 / 1;
  display: grid;
  grid-template: "west north east" minmax(0, 1fr) "west south east" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1px;
  min-height: 0;
  margin: calc(var(--wall-edge) + 1px) calc(var(--wall-side) + 1px);
  padding: 2px 3px;
  border: 1px solid #86bcbd4c;
  border-radius: 8px;
  background: #112e46a8;
}
.mahjong-felt .river {
  min-height: 0;
  align-content: flex-start;
  gap: 2px;
  padding: 2px 3px;
  margin: 0;
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.mahjong-felt .river-0 { grid-area: south; justify-content: center; border-top: 1px solid #aad3cb3b; }
.mahjong-felt .river-1 { grid-area: east; justify-content: end; border-left: 1px solid #aad3cb3b; }
.mahjong-felt .river-2 { grid-area: north; justify-content: center; border-bottom: 1px solid #aad3cb3b; }
.mahjong-felt .river-3 { grid-area: west; border-right: 1px solid #aad3cb3b; }
.mahjong-felt .tile, .classic-tile-symbol .tile {
  border: 1px solid #d4cec2;
  border-radius: clamp(3px, .55vw, 6px);
  background: linear-gradient(145deg, #fffefa 10%, #fffdf7 65%, #eee9e1);
  box-shadow: inset 0 1px #fffef8, 0 var(--tile-depth, 1px) #317463;
}
.classic-tile-symbol .tile { width: 35px; height: 45px; padding: 0; --tile-depth: 3px; }
.mahjong-felt .river .tile, .mahjong-felt .seat-tiles .tile {
  flex: none;
  width: var(--river-tile);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
}
.mahjong-felt .seat-tiles .tile { width: min(18px, var(--river-tile)); }
.mahjong-felt .river .river-last {
  border-color: #d78c32;
  outline: 2px solid #ffd27f;
  outline-offset: -1px;
  box-shadow: 0 1px 5px #ffbb66b8;
}
.mahjong-controls {
  padding: 3px 6px 5px;
  border-top: 1px solid #a67c5a;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #2a2935, #19242e);
}
.mahjong-action-rail { display: flex; justify-content: space-between; align-items: center; gap: 5px; min-width: 0; }
.mahjong-action-rail .actions {
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 5px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mahjong-action-rail .actions button { flex: none; min-width: 44px; min-height: 44px; }
.mahjong-action-rail .actions .timer, .mahjong-action-rail .actions small { white-space: nowrap; }
.mahjong-action-rail .seat {
  display: flex;
  align-items: center;
  max-width: 36%;
  gap: 4px;
  padding: 3px 5px;
}
.mahjong-action-rail .seat-identity { flex: 0 1 auto; }
.mahjong-controls .hand {
  display: grid;
  grid-template-columns: repeat(17, minmax(0, 1fr));
  align-items: end;
  gap: clamp(1px, .28vw, 4px);
  margin: 0;
  padding: 4px 1px 3px;
}
.mahjong-controls .hand:empty { display: none; }
.mahjong-controls.in-play .hand { padding-top: 16px; }
.mahjong-controls .hand .tile {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 30px;
  max-height: var(--tile-height);
  aspect-ratio: 3 / 4;
  padding: 0;
  --tile-depth: 3px;
}
.mahjong-controls .hand button.tile:hover { border-color: #ffce77; }
.mahjong-controls .hand .chosen { outline-color: #ffe2a2; }
.mahjong-controls .hand.has-draw { grid-template-columns: repeat(16, minmax(0, 1fr)) clamp(4px, 1vw, 10px) minmax(0, 1fr); }
.drawn-tile { position: relative; grid-column: -2; min-width: 0; }
.drawn-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  padding: 0 3px;
  border-radius: 3px;
  background: #ffcf72;
  color: #282019;
  font-size: .65rem;
  line-height: 1.3;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}
.mahjong-controls .drawn-tile .tile { border-color: #ffcc68; box-shadow: 0 3px #b68139, 0 0 0 1px #ffcc68; }
.mahjong-table .chat { padding: 7px 10px; }
.mahjong-table .chat details:not([open]) summary { margin-bottom: 0; }

@media (orientation: landscape) and (max-height: 600px) {
  html.mahjong-playing .top { display: none; }
  .game-table.mahjong-table {
    --table-height: clamp(104px, calc(100dvh - 210px), 340px);
    --portrait-size: clamp(34px, 11dvh, 52px);
    --tile-height: 54px;
    --river-tile: clamp(15px, 4.9dvh, 21px);
  }
  .game-table > .mahjong-panel { padding: 4px 6px; }
}
@media (orientation: portrait) {
  .table-immersive .game-table.mahjong-table {
    --table-height: clamp(104px, calc(100dvw - 210px), 340px);
    --portrait-size: clamp(34px, 11dvw, 52px);
    --tile-height: 54px;
    --river-tile: clamp(15px, 4.9dvw, 21px);
  }
  .table-immersive .mahjong-center { --wall-edge: clamp(6px, 2.1dvw, 12px); --wall-side: clamp(7px, 1.5vh, 16px); }
  html:not(.table-immersive) .mahjong-stage .seat-position-2 small { display: none; }
  html:not(.table-immersive) .mahjong-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  html:not(.table-immersive) .mahjong-round-info { grid-row: 1; grid-column: 1 / -1; }
}