.game-page{max-width:1480px;margin:auto;padding:32px 40px}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.game-heading h1{font-size:28px}.game-heading p{font-size:14px;color:var(--muted);margin:0}.game-preferences{display:flex;align-items:center;gap:18px}.sound-toggle{min-height:38px;padding:8px 13px;border:1px solid #687558;border-radius:999px;background:#13231a;color:#d7c292;font-size:13px;white-space:nowrap}.sound-toggle[aria-pressed="false"]{color:var(--muted);border-color:#465244;background:transparent}.sound-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.coach-toggle{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}.coach-toggle input{width:19px;height:19px;accent-color:var(--gold)}.game-rules{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:20px;border:1px solid var(--border);border-radius:6px;padding:12px 16px}.game-rules summary{cursor:pointer;color:#d0ccae}.game-rules p{max-width:1000px;margin:14px 0 0}.game-rules a{color:var(--gold);text-decoration:underline}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}.match-frame{background:linear-gradient(135deg,#514f43,#262f24,#484537);padding:12px;border-radius:17px;box-shadow:0 12px 25px #0005,inset 0 1px 0 #a2a08555;min-width:0}.match-panel{border:1px solid #546249;border-radius:10px;background:linear-gradient(145deg,#243529,#17271e);padding:24px;min-height:460px}.match-panel h2{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.7;margin-bottom:14px}.match-panel h3{font-size:17px;font-weight:500;line-height:1.8}.match-panel p{color:#becbb5;font-size:14px;line-height:1.9}.match-panel .primary-button{margin-top:15px}.secondary-button{border:1px solid #687558;background:transparent;border-radius:5px;color:var(--gold);width:100%;padding:12px;margin-top:12px;font-size:14px}.selected-tile{height:118px;border:1px dashed #85917355;display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0;color:var(--muted);font-size:14px;border-radius:5px}.selected-tile img{width:44px;filter:drop-shadow(1px 4px 3px #0008)}.selected-tile strong{font-size:22px;font-family:var(--serif);font-weight:400}.panel-footnote{font-size:12px!important;margin:20px 0 0}.suggested-tile{display:flex;align-items:center;justify-content:space-between;background:#101e16;padding:17px;border-radius:5px;color:var(--gold);font-size:14px}.suggested-tile img{width:40px}.thinking-dots{font-size:30px;color:var(--gold);text-align:center;margin:80px 0}.quiz-context{font-size:13px;color:var(--gold);line-height:1.9;border:1px solid #63705070;border-radius:4px;padding:10px 12px}.winning-preview{display:flex;gap:1px;margin:20px 0 23px}.winning-preview img{width:calc((100% - 13px)/14);border-radius:2px}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quiz-options button{padding:12px 6px;background:#14221a;color:#eee4c9;border:1px solid #6d7a5d;border-radius:4px;font-size:16px;min-height:48px}.quiz-options button:hover{background:#445039}.quiz-options button:focus-visible{outline:2px solid var(--gold)}.quiz-error{color:#f4b09a!important;font-size:14px!important}.quiz-hint{margin-top:20px;color:var(--muted);font-size:13px}.quiz-hint summary{cursor:pointer;color:var(--gold)}.quiz-hint p{font-size:13px;margin:8px 0}.settled-score{font-size:31px;font-family:Georgia,var(--serif);color:var(--gold);margin:15px 0}.payment-list{margin:20px 0}.payment-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #56654b55;padding:13px 0;font-size:14px}.payment-list strong{font-weight:400;font-variant-numeric:tabular-nums}.payment-list strong.plus{color:var(--gold)}.match-log{margin-top:23px;border-top:1px solid var(--border);padding-top:20px}.match-log h2{font-size:14px;font-weight:500;color:var(--gold)}.match-log ol{list-style:none;padding:0;margin:0;display:flex;gap:8px 25px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.game-bottom{display:flex;justify-content:space-between;gap:18px;font-size:12px;color:var(--muted);align-items:center;margin:23px 0}.game-bottom button:disabled{opacity:.4}.game-page button{touch-action:manipulation}
@media(max-width:1100px){.game-page{padding:26px 24px}.game-layout{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.match-panel{padding:20px}}
@media(max-width:820px){.game-layout{grid-template-columns:1fr}.match-panel{min-height:0}.game-heading{align-items:flex-start}.game-heading h1{font-size:25px}.coach-toggle{font-size:13px}.game-heading p{font-size:13px}.selected-tile{height:85px}.quiz-options{grid-template-columns:repeat(3,1fr)}.winning-preview img{max-width:36px}.winning-preview{justify-content:center}.thinking-dots{margin:25px 0}.game-rules{font-size:12px}}
@media(max-width:500px){.game-page{padding:22px 12px}.game-heading{flex-direction:column;gap:15px}.game-heading h1{font-size:25px}.game-heading p{font-size:13px}.game-preferences{width:100%;justify-content:flex-end}.coach-toggle{align-self:flex-end}.match-frame{padding:8px;border-radius:12px}.match-panel{padding:20px}.game-bottom{align-items:flex-start;flex-direction:column;gap:8px}.game-bottom button{align-self:flex-end}.quiz-options button{font-size:14px}.game-rules{padding:10px 12px}.game-layout{gap:15px}}
.quiz-melds{display:flex;gap:14px 12px;flex-wrap:wrap;margin:0 0 24px;justify-content:center}.kan-actions .secondary-button{display:flex;gap:12px;align-items:center;justify-content:center}.kan-actions .secondary-button img{width:24px;height:auto}.kan-actions p{font-size:12px;margin:10px 0 0}.call-choices{display:flex;flex-direction:column;gap:12px;margin:18px 0}.call-choice{border:1px solid #818764;background:#192b1c;border-radius:5px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--gold);min-height:66px}.call-choice strong{font-size:15px;font-weight:500}.call-choice>span{display:flex;gap:2px}.call-choice img{width:28px;height:auto;box-shadow:0 2px 0 #a5b487;border-radius:2px}.call-choice:hover{background:#344530}.call-choice:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.winning-preview img{flex:0 1 auto}

@media(max-width:500px){.call-choice{padding:13px 16px}.call-choice img{width:31px}}
/* The four seats share one local coordinate system, rotated around the table. */
.match-board {
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(#023a2560, #04211760), url('/assets/felt.png') center / cover;
  box-shadow: inset 0 2px 15px #000a;
}
.table-seat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: center;
  --hand-tile-width: 4.45cqw;
}
.player-0 { transform: rotate(0deg); --hand-tile-width: 5.45cqw; }
.player-1 { transform: rotate(-90deg); }
.player-2 { transform: rotate(180deg); }
.player-3 { transform: rotate(90deg); }
.table-seat .player-name {
  position: absolute;
  bottom: 1.8%;
  left: 17%;
  width: 66%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, .9cqw, 9px);
  white-space: nowrap;
  color: #e3e8d4;
  font-size: clamp(12px, 1.8cqw, 14px);
  font-variant-numeric: tabular-nums;
}
.player-name strong { font-size: inherit; font-weight: 500; }
.player-name .wind-badge {
  width: clamp(20px, 3.3cqw, 28px);
  height: clamp(22px, 3.3cqw, 28px);
  font-size: clamp(15px, 2.4cqw, 19px);
  flex-shrink: 0;
}
.player-name b { font-size: 12px; background: #ad5540; color: #fff0d9; padding: 2px 5px; border-radius: 3px; }
.thinking .player-name { color: var(--gold); }
.thinking .wind-badge { border-color: var(--gold); background: #dbb77620; }
.seat-hand {
  position: absolute;
  left: 17%;
  width: 66%;
  bottom: 9.5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5cqw;
}
.own-player .seat-hand { left: 8%; width: 84%; }
.opponent-hand, .play-hand { display: flex; align-items: flex-end; gap: .2cqw; min-width: 0; }
.opponent-tile, .play-tile {
  width: var(--hand-tile-width);
  flex: 0 0 var(--hand-tile-width);
  position: relative;
  line-height: 0;
}
.opponent-tile img, .play-tile img { width: 100%; height: auto; aspect-ratio: 66 / 90; border-radius: 3px; }
.opponent-tile { filter: drop-shadow(1px 3px 2px #001c1590); }
.opponent-tile.drawn, .play-tile.drawn { margin-left: .9cqw; }
.play-tile {
  pointer-events: auto;
  padding: 0;
  background: #cacbb0;
  border-radius: 4px;
  box-shadow: 0 2px 0 #c7c5a9, 0 4px 0 #496340;
  transition: transform .15s, box-shadow .15s;
}
/* Keep the lower tap area available when a selected tile lifts up. */
.play-tile::after { content: ''; position: absolute; inset: 0 0 -1cqw; }
.play-tile:hover:not(:disabled) { transform: translateY(-.65cqw); }
.play-tile.selected { transform: translateY(-1cqw); box-shadow: 0 2px 0 #c7c5a9, 0 4px 0 #496340, 0 0 0 2px var(--gold); }
.play-tile:disabled { opacity: .8; cursor: default; }
.play-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* First discard is nearest the center; each six-tile row grows toward its owner. */
.match-river {
  position: absolute;
  top: 62.7%;
  left: 35%;
  display: flex;
  flex-direction: column;
  gap: .3cqw;
  --river-tile-height: calc(var(--river-tile-width, 3.35cqw) * 90 / 66);
}
.river-row { display: flex; gap: .25cqw; align-items: flex-end; height: var(--river-tile-height); }
.river-piece {
  display: block;
  position: relative;
  width: var(--river-tile-width, 3.35cqw);
  height: var(--river-tile-height);
  flex: none;
  line-height: 0;
  pointer-events: auto;
}
.river-piece img { width: 100%; height: 100%; border-radius: 2px; box-shadow: 0 1px 1px #061b0eb3; }
.river-piece.riichi { width: var(--river-tile-height); height: var(--river-tile-width, 3.35cqw); }
.river-piece.riichi img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--river-tile-width, 3.35cqw);
  height: var(--river-tile-height);
  transform: translate(-50%, -50%) rotate(-90deg);
}
.river-piece.last-discard { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 2px; }
.match-center {
  position: absolute;
  left: 38.5%;
  top: 38.5%;
  width: 23%;
  height: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35cqw;
  border: 1px solid #607153aa;
  border-radius: 5px;
  background: #13281eef;
  box-shadow: 0 3px 9px #00120970;
  color: #bdc9b1;
  text-align: center;
}
.match-center > strong { font-family: var(--serif); color: var(--gold); font-size: clamp(18px, 3.4cqw, 30px); font-weight: 400; line-height: 1.3; }
.match-center > div { font-size: clamp(12px, 1.55cqw, 14px); line-height: 1.4; }
.match-center > div > span { display: block; }
.remaining b { font-size: clamp(14px, 2.2cqw, 19px); font-weight: 500; }

/* Riichi remains visible for every seat, including while another player acts. */
.is-riichi .player-name { background: #572329; color: #fff2e8; border-radius: 4px; outline: 2px solid #ff858f; outline-offset: 2px; box-shadow: 0 0 14px #ff697733; }
.is-riichi .player-name .wind-badge { border-color: #ffacb1; background: #702b34; }
.is-riichi .player-name b { background: #b3263e; color: #fff; font-weight: 700; }
.is-riichi .player-name .riichi-stick { width: clamp(24px, 5cqw, 44px); height: 6px; }
.is-riichi .match-river { isolation: isolate; }
.is-riichi .match-river::before { content: ''; position: absolute; inset: -.7cqw; border: 2px solid #ff858f; border-radius: 4px; background: #76293844; z-index: -1; pointer-events: none; }
.is-riichi .river-piece.riichi { outline: 2px solid #ff858f; outline-offset: 1px; border-radius: 2px; }
.is-riichi .river-piece.last-discard { outline-color: var(--gold); }
.quiz-context.is-riichi { border: 2px solid #ff858f; background: #572329; color: #fff2e8; }

/* Opponent threats stay beside the hand and the active controls. */
.opponent.is-riichi::before { content: ''; position: absolute; left: 12%; bottom: .8%; width: 76%; height: 18%; border: 3px solid #ff667b; border-radius: 8px; background: #a5143540; box-shadow: 0 0 16px #ff496438, inset 0 0 16px #ff496424; pointer-events: none; }
.opponent.is-riichi .player-name b { font-size: 14px; background: #d32a4b; }
.riichi-watch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; padding: 12px 14px; border: 2px solid #ff7186; border-radius: 7px; background: #611c2b; color: #fff6ec; }
.riichi-watch[hidden] { display: none; }
.riichi-watch-title { font-size: 16px; line-height: 1.5; white-space: nowrap; }
.riichi-watch-players { display: flex; flex-wrap: wrap; gap: 6px; }
.riichi-watch-players > span { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; padding: 5px 8px; border: 1px solid #ffa4b266; border-radius: 4px; background: #270e16; font-size: 14px; line-height: 1.5; }
.riichi-watch-players b { color: #ffb9c4; }
.riichi-watch-players small { color: #e7c7cb; font-size: 12px; }
.riichi-watch--panel { margin: 0 0 18px; padding: 12px; }
.riichi-watch--panel .riichi-watch-players { width: 100%; }
.riichi-watch--panel .riichi-watch-players > span { width: 100%; }

@media (max-width: 500px) { .riichi-watch { padding: 10px; gap: 7px; } }

/* Melds sit to each player's right; an added kan stacks on the claimed tile. */
.played-meld { --meld-width: 24px; --meld-height: calc(var(--meld-width) * 90 / 66); display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; min-width: 0; }
.meld-title { font-size: 12px; color: #c9d8b8; line-height: 1.5; text-align: center; }
.meld-title small { display: none; font-size: 12px; }
.meld-tiles { display: flex; gap: 1px; align-items: flex-end; position: relative; }
.meld-piece { display: block; position: relative; width: var(--meld-width); height: var(--meld-height); flex: none; line-height: 0; }
.meld-piece img { width: var(--meld-width); height: var(--meld-height); border-radius: 2px; box-shadow: 0 1px 0 #a6b28b; }
.meld-piece.claimed-piece { width: var(--meld-height); height: var(--meld-width); }
.claimed-piece > img, .added-piece img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.added-piece { position: absolute; width: 100%; height: 100%; bottom: calc(100% + 1px); left: 0; }
.added-kan .meld-tiles { padding-top: calc(var(--meld-width) * 2 - var(--meld-height) + 1px); }
.player-melds { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 1cqw; margin-left: auto; flex: none; }
.table-seat .played-meld { --meld-width: 2.6cqw; pointer-events: auto; }
.own-player .played-meld { --meld-width: 3.15cqw; }
.table-seat .meld-title { display: none; }
.table-seat .meld-tiles { gap: .15cqw; }

@media (min-width: 821px) and (max-width: 1100px) {
  .game-layout { grid-template-columns: 1fr; }
  .match-frame { width: 100%; max-width: 820px; justify-self: center; }
  .match-panel { min-height: 0; }
}
@media (max-width: 500px) {
  .table-seat .player-name { left: 12%; width: 76%; gap: 4px; }
  .player-name b { padding: 2px 3px; }
  .match-center { left: 37.5%; top: 37.5%; width: 25%; height: 25%; gap: 0; }
  .match-center > strong { font-size: 18px; line-height: 1.2; }
  .match-center > div { line-height: 1.15; }
  .play-tile img, .opponent-tile img { border-radius: 2px; }
  .river-piece.last-discard { outline-width: 1px; }
}
@media (prefers-reduced-motion: reduce) { .play-tile { transition: none; } }
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){.game-page{padding:12px}.game-layout{grid-template-columns:minmax(280px,calc(100dvh - 110px)) minmax(240px,1fr);gap:12px}.match-panel{min-height:0;padding:14px}.match-frame{padding:6px}.selected-tile{height:60px;margin:12px 0}.selected-tile img{width:30px}.match-panel h2{font-size:20px}.quiz-options{grid-template-columns:repeat(2,1fr)}.game-layout{scroll-margin-top:76px}}

/* Public round information stays readable without covering the four seats. */
.table-status{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 24px;padding:14px;margin-bottom:10px;border:1px solid #687558;border-radius:7px;background:#13281e;color:#e3e8d4;font-size:14px;line-height:1.5}
.match-center .honba-status{width:90%;flex:none;min-width:0;line-height:1.2}.honba-status>strong{color:var(--gold);font-size:14px;font-weight:500}.match-center .honba-sticks{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 3px;max-height:16px;overflow:auto;margin:2px 0;padding:0 1px}.honba-sticks:empty{display:none}.honba-stick{display:block;flex:none;width:40px;height:6px}
@media(max-width:500px){.match-center>strong{font-size:16px}.match-center .honba-status{line-height:1.1}.honba-status>strong{font-size:12px}.match-center .honba-sticks{gap:1px 2px;max-height:12px;margin:1px 0}.honba-stick{width:32px;height:5px}.match-center .remaining b{font-size:14px}}

.live-dora{flex:2 1 260px;min-width:0}.dead-wall-title{font-size:14px;color:#e3e8d4}.dead-wall{display:flex;gap:4px;align-items:flex-start;width:100%;max-width:340px;margin:12px 0 8px;padding:0 2px 3px}.dead-wall-stack{position:relative;flex:1;min-width:0;aspect-ratio:29 / 50}.dead-wall-stack span{position:absolute;left:0;width:100%;line-height:0}.dead-wall-lower{top:18%;filter:brightness(.8)}.dead-wall-upper{top:0;z-index:1}.dead-wall-stack img{display:block;width:100%;height:auto;aspect-ratio:29 / 40;border-radius:3px;box-shadow:0 3px 0 #d7d1b5,0 5px 0 #7d886a,1px 6px 3px #0008}
@media(max-width:500px){.table-status{padding:10px;gap:12px}.live-dora{flex-basis:100%}}


/* Visible indicators share the center; all four rivers use the same scale. */
.center-dora{display:flex;justify-content:center;align-items:center;gap:2px;width:90%;margin-top:2px;flex-shrink:0}.center-dora img{display:block;min-width:0;width:min(clamp(14px,3.4cqw,26px),calc((100% - (var(--indicator-count) - 1)*2px)/var(--indicator-count)));height:auto;aspect-ratio:29/40;border-radius:2px;box-shadow:0 1px 0 #a6b28b}.match-center{gap:0}.match-center>strong{font-size:clamp(16px,2.8cqw,25px)}.match-center .honba-sticks{max-height:12px}.match-center .remaining b{font-size:clamp(12px,1.8cqw,16px)}
#call-dock:empty{display:none}.call-docked{min-height:0;width:min(100%,460px);margin:12px 0 0 auto;padding:14px}.call-docked .eyebrow,.call-docked .panel-footnote{display:none}.call-docked h2{font-size:18px;line-height:1.4;margin:0 0 4px}.call-docked p{margin:0 0 10px;font-size:14px}.call-docked .call-choices{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:8px 0}.call-docked .call-choice{flex:1 1 150px;min-height:44px;padding:8px 10px;gap:8px}.call-docked .call-choice img{width:22px}.call-docked .secondary-button{margin-top:0;min-height:44px;padding:9px}.game-layout.has-call-dock{grid-template-columns:minmax(0,1fr) 330px}.game-layout.has-call-dock>.match-frame{grid-column:1}
@media(max-width:1100px){.game-layout.has-call-dock{grid-template-columns:1fr}}
@media(max-width:500px){.match-center>strong{font-size:15px}.match-center>div{font-size:12px;line-height:1.1}.center-dora{margin-top:1px}.match-center .honba-sticks{max-height:6px}.call-docked{padding:12px}.call-docked .call-choice{flex-basis:120px}}