/* 二人麻雀固有の見た目（共通は ../common/base.css） */
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
#table text { pointer-events: none; }
/* PC: 卓（360:398）が画面の下にはみ出さないよう、画面の高さに合わせて幅を決める */
.board-wrap { max-width: 600px; }
@media (min-width: 700px) { .board-wrap { max-width: max(420px, min(600px, calc((100vh - 230px) * 360 / 398))); } }
@media (max-width: 480px) { .stage { padding: 6px; } }

/* 牌 */
.tile .edge { fill: #2F6B55; }
.tile .face { fill: #FCF9F0; stroke: #A89F88; stroke-width: .8; }
.tile.back .face { fill: #3E8466; stroke: #245A44; }
.tile .ring { fill: none; stroke: none; pointer-events: none; }
.tile .body { transition: opacity 120ms; }
.tile.hand { cursor: pointer; }
.tile.hand .body { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.tile.hand.dim .face { fill: #C9C3B2; }
.tile.hand.dim .body { opacity: .8; }
.tile.hand.can .ring { stroke: rgba(255, 255, 255, .0); }
.tile.hand.rec .ring { stroke: #FFFFFF; stroke-width: 2.4; stroke-dasharray: 4 3; }
.tile.hand.sel .ring { stroke: #F2C230; stroke-width: 3; stroke-dasharray: none; }
.tile.hand.sel .face { fill: #FFF3C4; }
.tile.river.last .ring { stroke: #F2C230; stroke-width: 2.4; }
.tile.win .ring, .tile.hand.win .ring { stroke: #F2C230; stroke-width: 3; }
.tile.ura .face { fill: #EFE6CC; }

/* 席の名前（卓の上） */
.info .info-box { fill: rgba(0, 0, 0, .28); }
.info.on .info-box { fill: rgba(0, 0, 0, .55); stroke: #F2C230; stroke-width: 1.5; }
.info-text { paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2.5px; }
#table text.sub { fill: #DCD6C8; }

/* 操作のボタン */
#actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-height: var(--tap); align-items: center; }
#actions .btn { flex: 0 1 auto; }
.btn.win-btn, .btn.riichi-btn { font-weight: 800; }
#hint { min-height: 1.5em; margin: 6px 0 0; }
#play > .controls { margin-top: 8px; }

/* 卓の上に重ねる箱（局の結果・役と点数表） */
.over-box {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%); width: min(96%, 480px); max-height: 88%; overflow: auto;
  background: var(--surface); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); padding: 12px 14px; text-align: center; z-index: 3;
}
.over-box h2 { margin: 0 0 8px; font-size: 1.3rem; }
.over-box .rowbox { margin: 4px 0 8px; }
.over-box .note, .over-box .scores { font-size: 14px; color: var(--ink-sub); margin: 6px 0; }
.over-box .scores { color: var(--ink); font-weight: 700; }
.over-box .controls { justify-content: center; margin-top: 8px; }
svg.tilerow { display: block; width: 100%; height: auto; margin: 0 auto; }
.yaku-list { margin: 0 auto; border-collapse: collapse; min-width: 60%; }
.yaku-list td { padding: 3px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.yaku-list td.num { text-align: right; font-weight: 700; white-space: nowrap; }
.over-box .fu, #p-feedback .fu { font-size: 14px; color: var(--ink-sub); margin: 6px 0 0; }
.over-box .total, #p-feedback .total { font-size: 1.15rem; font-weight: 800; margin: 6px 0; }

/* 役・点数表 */
.ref-box { top: 2%; max-height: 96%; text-align: left; }
.ref-tabs { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: -12px; background: var(--surface); padding: 4px 0 8px; }
.ref-tabs .on { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.ref-tabs .ref-close { margin-left: auto; }
.ref-box h3 { margin: 10px 0 4px; font-size: 1rem; }
.ref-yaku, .ref-pts { border-collapse: collapse; width: 100%; font-size: 15px; }
.ref-yaku th, .ref-yaku td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.ref-yaku th { white-space: nowrap; width: 8.5em; }
.ref-yaku th small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-sub); }
.ref-pts { margin: 6px 0; }
.ref-pts th, .ref-pts td { border: 1px solid var(--line); padding: 3px 6px; text-align: right; }
.ref-pts caption { text-align: left; font-weight: 700; padding: 4px 0; }
.pts-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .pts-wrap { grid-template-columns: 1fr; } .over-box { top: 2%; max-height: 96%; padding: 10px; } }

/* 練習 */
.p-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.p-tabs .on { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.p-card { border-top: 1px solid var(--line); padding-top: 8px; }
.p-q { font-weight: 700; margin: 4px 0 8px; }
.p-cond { margin: 0 0 8px; padding-left: 1.2em; font-size: 15px; }
#p-hand { background: #2E6B52; border-radius: 8px; padding: 10px 6px; }
#p-hand svg.tilerow { max-width: 560px !important; }
.p-choose .tile { cursor: pointer; }
.p-choose .tile.sel .ring { stroke: #F2C230; stroke-width: 3.5; }
.p-choose .tile.sel .face { fill: #FFF3C4; }
.p-choose .tile.rec .ring { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 5 3; }
#p-pick { margin-top: 10px; }
#p-pick > .btn { margin-top: 10px; }
.p-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; max-width: 460px; }
.p-grid.one { max-width: 460px; }
.p-tile { padding: 3px; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: pointer; min-height: var(--tap); display: flex; align-items: center; justify-content: center; }
.p-tile svg.tilerow { max-width: 40px !important; }
.p-tile.on { border-color: var(--accent); background: var(--accent-soft); outline: 2px solid var(--accent); }
.p-tile.ans { box-shadow: 0 0 0 3px var(--ok) inset; }
.p-tile:disabled { cursor: default; }
.p-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.p-choices .btn.ans { outline: 3px solid var(--ok); outline-offset: 1px; }
#p-feedback { margin-top: 10px; }
.p-mark { font-size: 1.3rem; font-weight: 800; margin: 4px 0; }
.p-mark.ok { color: var(--ok); }
.p-mark.ng { color: var(--ng); }
.p-table { border-collapse: collapse; margin: 6px 0; font-size: 15px; }
.p-table th, .p-table td { border: 1px solid var(--line); padding: 3px 8px; }
.p-table tr.best td { font-weight: 800; color: var(--ok); }
.p-table tr.mine td:first-child::after { content: " ←"; color: var(--ink-sub); }
.p-card > .controls { margin-top: 12px; }

/* 解説 */
.article .yaku-table td:first-child, .article .yaku-table th:first-child { white-space: nowrap; font-weight: 700; }
.article .pts-wrap { margin: 8px 0; }
.howto img[src*="board"] { max-width: 460px; }
.over-box .rowname { margin: 8px 0 2px; font-weight: 700; font-size: 15px; }

/* 牌の角の印（英語圏で一般的な表示。設定でオン。tiles.js の .tidx・.tface） */
.tidx { display: var(--tile-idx, none); }
.tface { transform-origin: 0 0; transform: var(--tile-face, none); }
:root.tile-idx { --tile-idx: inline; --tile-face: translate(6px, 8px) scale(.86); }
/* 英語の役名は長いので、役一覧の名前の列は折り返す */
:root:lang(en) .ref-yaku th { white-space: normal; width: 45%; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */