:root{
  --bg:#f4f3ef; --panel:#fff; --line:#e2dfd7; --line-soft:#eeebe4;
  --ink:#2c2c2a; --ink-2:#6b6860; --ink-3:#a8a49a;
  --accent:#185fa5; --accent-soft:#eaf3fc;
  --ok:#3b6d11; --warn:#854f0b; --warn-soft:#fbf0dc; --bad:#a32d2d; --bad-soft:#fbecec;
  --tw:clamp(19px, 1.9vw, 29px); --th:clamp(26px, 2.57vw, 39px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;
  font-size:13px; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

#app{height:100%; display:flex; flex-direction:column; overflow:hidden}

/* ---------- topbar ---------- */
#topbar{display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; flex-wrap:nowrap; overflow:hidden}
.spacer{flex:1}
.tabs{display:flex; gap:4px; overflow-x:auto; padding-bottom:1px}
.tab{
  padding:4px 8px; border-radius:6px; font-size:12px; white-space:nowrap;
  background:#fff; border:1px solid var(--line); color:var(--ink); cursor:pointer;
}
.tab:hover{border-color:#c9c5ba}
.tab.on{background:var(--accent-soft); border-color:#9cc3e8; color:#12456f; font-weight:600}
.tab .dot{display:inline-block; width:5px; height:5px; border-radius:50%; margin-left:4px; vertical-align:middle}
.tab .dot.ok{background:var(--ok)} .tab .dot.warn{background:#d89b2c} .tab .dot.bad{background:var(--bad)}
.tab.add{border-style:dashed; color:var(--ink-3)}

.meta{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; min-width:0}
.chip{
  padding:4px 9px; border-radius:6px; font-size:12px; cursor:pointer; white-space:nowrap; flex:none;
  background:#fff; border:1px solid var(--line); color:var(--ink);
}
.chip:hover{border-color:#c9c5ba}
.chip.on{background:var(--accent-soft); border-color:#9cc3e8; color:#12456f}
.chip.warn{background:var(--warn-soft); border-color:#e8cf9e; color:var(--warn)}
.chip.ok{background:#eef6e6; border-color:#bcd79b; color:var(--ok)}
.chip.bad{background:var(--bad-soft); border-color:#e8b6b6; color:var(--bad)}
/* 桌布下拉：左側一條色票，右側原生箭頭 */
.chip.felt-sel{
  padding:3px 4px 3px 7px; border-left:5px solid #7b3aa0;
  font:inherit; font-size:12px; color:var(--ink); line-height:1.5;
}
/* 吃牌選項裡的赤五：要跟普通五分得出來 */
.chip .r5{color:#c0392b; font-weight:700}

/* 語言切換：小方塊 */
.chip.lang-sel{min-width:30px; text-align:center; font-weight:600; color:var(--accent)}

/* ---------- main ---------- */
#main{
  flex:1; min-height:0; display:grid; gap:0; padding:10px;
  grid-template-columns:var(--board-w,min(600px, calc(100vw - 480px))) 9px minmax(0,1fr);
  align-items:start; overflow:auto;
}
/* 明確指定欄位：board 一旦 display:none 就會退出 grid 流，
   若不指定，panels 會被自動塞進第 1 欄（寬度 0）→ 整個塌掉 */
#board{grid-column:1; grid-row:1; min-width:0}
#splitter{grid-column:2; grid-row:1}
#panels{grid-column:3; grid-row:1}
#main.no-board{grid-template-columns:minmax(0,1fr)}
#main.no-board #board,
#main.no-board #splitter{display:none}
#main.no-board #panels{grid-column:1}

/* 盤面三檔大小（牌素材是 SVG，放大不會糊；但用檔位避免任意拉伸造成版面怪） */
#main[data-bsize="s"]{--board-w:min(430px, calc(100vw - 480px))}
#main[data-bsize="m"]{--board-w:min(600px, calc(100vw - 480px))}
#main[data-bsize="l"]{--board-w:min(1040px, calc(100vw - 470px))}
#main[data-bsize="s"] .bd-table{--btw:clamp(11px, calc((100cqw - 28px) / var(--bd-units)), 19px)}
#main[data-bsize="m"] .bd-table{--btw:clamp(11px, calc((100cqw - 28px) / var(--bd-units)), 28px)}
#main[data-bsize="l"] .bd-table{--btw:clamp(11px, calc((100cqw - 28px) / var(--bd-units)), 44px)}

/* ---------- 可拖拉的分隔條 ---------- */
.splitter{
  position:relative; align-self:stretch; min-height:120px;
  cursor:col-resize; touch-action:none; outline:none; background:transparent;
}
.splitter::before{
  content:''; position:absolute; left:50%; top:4px; bottom:4px; width:2px; margin-left:-1px;
  background:#d7d3c8; border-radius:2px; transition:background .12s;
}
.splitter::after{
  content:''; position:absolute; left:50%; top:50%; width:5px; height:34px; margin:-17px 0 0 -2.5px;
  border-radius:3px; background:#cfcabd; opacity:.55; transition:opacity .12s;
}
.splitter:hover::before,.splitter:focus-visible::before,.splitter.dragging::before{background:#9cc3e8}
.splitter:hover::after,.splitter:focus-visible::after,.splitter.dragging::after{opacity:1; background:#9cc3e8}
.splitter:focus-visible::before{box-shadow:0 0 0 2px rgba(156,195,232,.35)}
body.resizing{cursor:col-resize; user-select:none}
body.resizing iframe,body.resizing img{pointer-events:none}

/* ---------- board：牌桌俯瞰圖（四家手牌＋河＋副露，各自面向自己） ---------- */
.board{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:8px; display:flex; flex-direction:column; gap:6px;
  container-type:inline-size;
}

/* 桌布配色：預設紫黑（與極雀的綠絨區分），其餘可切。
   深色系文字用白；淺色系文字用深墨 —— 全部走變數，切換只換 data-felt。 */
.bd-table{
  --felt-1:#4a1263; --felt-2:#280a37; --felt-3:#0e0314;
  --felt-ink:#fff; --felt-ink-2:rgba(255,255,255,.72); --felt-ink-3:rgba(255,255,255,.6);
  --felt-chip:rgba(255,255,255,.07); --felt-panel:rgba(0,0,0,.22);
  --felt-frame:rgba(255,255,255,.06); --felt-line:rgba(0,0,0,.35);
  --felt-hi:rgba(255,255,255,.18); --felt-shade:rgba(0,0,0,.55);
  --felt-ring:rgba(255,255,255,.8); --felt-gold:#f2dc9b; --felt-dash:rgba(255,255,255,.28);
}
body[data-felt="green"] .bd-table{--felt-1:#63ab8a; --felt-2:#2f7355; --felt-3:#1b4b39}
body[data-felt="blue"]  .bd-table{--felt-1:#2f6aa8; --felt-2:#17395f; --felt-3:#08172b}
body[data-felt="wine"]  .bd-table{--felt-1:#a02b3f; --felt-2:#5c1526; --felt-3:#240610}
body[data-felt="slate"] .bd-table{--felt-1:#5c6068; --felt-2:#303338; --felt-3:#141519}
body[data-felt="teal"]  .bd-table{--felt-1:#13807a; --felt-2:#0a4644; --felt-3:#031c1b}

/* ---- 淺色系：櫻粉 / 薄荷 / 天青 / 亞麻 ---- */
body[data-felt="sakura"] .bd-table{
  --felt-1:#fdf2f6; --felt-2:#f8dde8; --felt-3:#efc8d8;
  --felt-ink:#5b3a46; --felt-ink-2:rgba(91,58,70,.66); --felt-ink-3:rgba(91,58,70,.5);
  --felt-chip:rgba(255,255,255,.55); --felt-panel:rgba(255,255,255,.42);
  --felt-frame:rgba(120,60,80,.12); --felt-line:rgba(120,60,80,.16);
  --felt-hi:rgba(255,255,255,.85); --felt-shade:rgba(120,60,80,.12);
  --felt-ring:rgba(91,58,70,.55); --felt-gold:#a8762a; --felt-dash:rgba(91,58,70,.22);
}
body[data-felt="mint"] .bd-table{
  --felt-1:#effaf4; --felt-2:#d9f2e5; --felt-3:#c1e8d4;
  --felt-ink:#2c4a3c; --felt-ink-2:rgba(44,74,60,.66); --felt-ink-3:rgba(44,74,60,.5);
  --felt-chip:rgba(255,255,255,.55); --felt-panel:rgba(255,255,255,.42);
  --felt-frame:rgba(40,90,65,.12); --felt-line:rgba(40,90,65,.16);
  --felt-hi:rgba(255,255,255,.85); --felt-shade:rgba(40,90,65,.12);
  --felt-ring:rgba(44,74,60,.55); --felt-gold:#8a6a1e; --felt-dash:rgba(44,74,60,.22);
}
body[data-felt="sky"] .bd-table{
  --felt-1:#eff7fd; --felt-2:#d9ebfa; --felt-3:#c1dcf4;
  --felt-ink:#2b3f55; --felt-ink-2:rgba(43,63,85,.66); --felt-ink-3:rgba(43,63,85,.5);
  --felt-chip:rgba(255,255,255,.55); --felt-panel:rgba(255,255,255,.42);
  --felt-frame:rgba(40,70,110,.12); --felt-line:rgba(40,70,110,.16);
  --felt-hi:rgba(255,255,255,.85); --felt-shade:rgba(40,70,110,.12);
  --felt-ring:rgba(43,63,85,.55); --felt-gold:#8a6a1e; --felt-dash:rgba(43,63,85,.22);
}
body[data-felt="linen"] .bd-table{
  --felt-1:#fcf8f0; --felt-2:#f3ebdd; --felt-3:#e8dbc6;
  --felt-ink:#4a4237; --felt-ink-2:rgba(74,66,55,.66); --felt-ink-3:rgba(74,66,55,.5);
  --felt-chip:rgba(255,255,255,.55); --felt-panel:rgba(255,255,255,.42);
  --felt-frame:rgba(90,75,55,.12); --felt-line:rgba(90,75,55,.16);
  --felt-hi:rgba(255,255,255,.85); --felt-shade:rgba(90,75,55,.12);
  --felt-ring:rgba(74,66,55,.55); --felt-gold:#8a6a1e; --felt-dash:rgba(74,66,55,.22);
}

.bd-table{
  /* 牌面尺寸：跟著盤面寬度（容器查詢），上限由三檔大小控制 */
  --bd-units:23.32; --bd-mid:14;
  /* 桌子總寬 = 兩側(4th×2) + 中間(13 手牌 + 副露) → 用這個反推牌寬，永遠不溢出 */
  --btw:clamp(11px, calc((100cqw - 28px) / var(--bd-units)), 44px);
  --bth:calc(var(--btw) * 1.29);
  position:relative;
  display:grid;
  /* 中間那欄/列的大小**固定**成「14 張手牌 + 這局最多的副露」（--bd-melds）。
     ★ 不能用 auto：摸牌時手牌變 14 張、鳴牌後副露變寬，格子就會跟著長大，
       拖進度條時整張桌子會忽大忽小（看起來像在變形）。 */
  grid-template-columns:1fr calc(var(--bd-mid) * var(--btw)) 1fr;
  grid-template-rows:1fr calc(var(--bd-mid) * var(--btw)) 1fr;
  grid-template-areas:
    ". top ."
    "left center right"
    ". bot .";
  aspect-ratio:1/1;
  min-height:0;
  gap:2px;
  padding:6px;
  border-radius:16px;
  background:
    radial-gradient(120% 90% at 50% -8%, var(--felt-1) 0%, var(--felt-2) 42%, var(--felt-3) 100%);
  box-shadow:
    inset 0 2px 0 var(--felt-hi),
    inset 0 0 0 1px var(--felt-line),
    inset 0 -24px 44px -18px var(--felt-shade),
    0 2px 6px rgba(0,0,0,.18);
}

/* 四家：--rot 決定「這家的牌面向哪」，所有牌都由它旋轉 */
.bd-seat{--rot:0deg; display:flex; min-width:0; min-height:0; gap:2px; position:relative}
.s-top{grid-area:top; --rot:180deg; flex-direction:column; align-items:center; justify-content:space-between}
.s-bottom{grid-area:bot; --rot:0deg; flex-direction:column; align-items:center; justify-content:space-between}
.s-left{grid-area:left; --rot:90deg; flex-direction:row; align-items:center; justify-content:space-between}
.s-right{grid-area:right; --rot:-90deg; flex-direction:row; align-items:center; justify-content:space-between}

/* 手牌＋副露的那一條：副露一律接在「這家的右手邊」 */
.bd-strip{display:flex; align-items:center; gap:3px; flex:none; min-width:0}
.s-top .bd-strip,.s-bottom .bd-strip{flex-direction:row}
.s-left .bd-strip,.s-right .bd-strip{flex-direction:column; justify-content:center}

.bd-hand{display:flex; gap:0; flex:none; align-items:flex-end}
.s-left .bd-hand,.s-right .bd-hand{flex-direction:column; align-items:center}
/* 對家（轉 180°）與右家（轉 −90°）的「左→右」跟畫面相反，
   所以手牌要反向排：最小的牌才會在他們的左邊、剛摸的牌才會在他們的右邊。 */
.s-top .bd-hand{flex-direction:row-reverse}
.s-right .bd-hand{flex-direction:column-reverse}

/* 河：內層永遠是 6 欄 × 3 列的 18 格，外層只負責「旋轉後佔多大」。
   整塊一起轉，填充順序才會跟著座位走（6 欄→3 列是玩家自己的視角）。 */
.bd-rv-wrap{position:relative; flex:none}
.bd-rv-wrap.h{width:calc(var(--rv-cols,6) * var(--btw) + 5px); height:calc(3 * var(--bth) + 2px)}
.bd-rv-wrap.v{width:calc(3 * var(--bth) + 2px); height:calc(var(--rv-cols,6) * var(--btw) + 5px)}
.bd-rv{
  position:absolute; left:50%; top:50%;
  width:calc(var(--rv-cols,6) * var(--btw)); height:calc(3 * var(--bth));
  display:grid; grid-template-columns:repeat(var(--rv-cols,6),var(--btw)); grid-auto-rows:var(--bth);
  gap:1px; --rot:0deg;                     /* 牌不再各自轉，交給整塊 */
  transform:translate(-50%,-50%) rotate(var(--seat-rot,0deg));
}
.s-top .bd-rv{--seat-rot:180deg}
.s-left .bd-rv{--seat-rot:90deg}
.s-right .bd-rv{--seat-rot:-90deg}
.s-bottom .bd-rv{--seat-rot:0deg}
.bd-hole{display:block; border-radius:2px; background:rgba(255,255,255,.022)}
/* 立直宣言牌：整張牌橫置（原尺寸），會稍微壓到左右兩張 —— 真牌桌就是這樣 */
.bd-rv .t.ri{z-index:1}
.bd-rv .t.ri::before{transform:translate(-50%,-50%) rotate(90deg)}
.bd-rv .t.ri img{transform:rotate(90deg)}

/* 副露 */
.bd-melds{display:flex; flex-wrap:wrap; gap:3px; justify-content:center; align-content:center; flex:none}
/* 縱向座位：副露接在手牌下面，一組一組往下疊，寬度永遠跟手牌一樣（一欄） */
.s-left .bd-melds,.s-right .bd-melds{flex-direction:column; flex-wrap:nowrap; gap:4px}
/* 對家（轉 180°）與右家（轉 -90°）的第 1 組副露要「靠近手牌」那一端，
   所以容器與每組內部的方向都要反過來，牌序才跟視角一致 */
.s-top .bd-melds,.s-top .bd-meld{flex-direction:row-reverse}
.s-right .bd-melds,.s-right .bd-meld{flex-direction:column-reverse}
.bd-meld{display:inline-flex; gap:0; padding:1px; border-radius:3px; background:rgba(0,0,0,.24)}
.s-left .bd-meld{flex-direction:column}
/* 右家：整個區塊被旋轉 180°，順序要反過來才是「左→右」 */
.s-right .bd-meld{flex-direction:column-reverse}

/* ---- 牌面：SVG 只有字形沒有牌身，絨布上要補底色 ---- */
/* ★ 牌身一定要用「會跟著轉」的 ::before 畫。
   直接用 background 的話，SVG 會保持自己的長寬比（preserveAspectRatio），
   在左右家那種橫放的牌格裡就變成「直立的白牌 + 橫過來的字」—— 這就是要修的 bug。 */
.bd-table .t{
  --tw:var(--btw); --th:var(--bth);
  background:none;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));
}
.bd-table .t::before{
  content:''; position:absolute; left:50%; top:50%;
  width:var(--btw); height:var(--bth);
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  background:url(assets/tiles/Regular/Front.svg) center/100% 100% no-repeat;
}
body[data-theme="dark"] .bd-table .t::before{background-image:url(assets/tiles/Black/Front.svg)}
body[data-theme="dots"]    .bd-table .t::before{background-image:url(assets/tiles/Dots/Front.svg)}
body[data-theme="numeric"] .bd-table .t::before{background-image:url(assets/tiles/Numeric/Front.svg)}
.bd-table .t.sm{--tw:var(--btw); --th:var(--bth)}
.bd-table .t.rot{transform:none; margin:0}
.bd-table .t img{transform:rotate(var(--rot,0deg))}
/* 超過 4 張的紅色警示也要跟著轉 */
.bd-table .t.bad{background:none}
.bd-table .t.bad::before{background:#fdecec; box-shadow:inset 0 0 0 2px #e24b4a; border-radius:3px}

/* 縱向座位的手牌／副露：牌格換成橫的（th×tw），裡面的圖轉 90° 剛好填滿 */
.s-left .bd-hand .t,.s-right .bd-hand .t,
.s-left .bd-meld .t,.s-right .bd-meld .t{width:var(--bth); height:var(--btw)}
.s-left .bd-hand .t img,.s-right .bd-hand .t img,
.s-left .bd-meld .t img,.s-right .bd-meld .t img{
  position:absolute; left:50%; top:50%; width:var(--btw); height:var(--bth);
  transform:translate(-50%,-50%) rotate(var(--rot));
}

/* 副露裡「被叫的那張」橫置 —— 位置代表是誰打的（左=上家 中=對面 右=下家）
   ★ 整張牌（牌身＋花紋）原尺寸轉 90°，不縮小；
     牌格因此要給成正方形（--bth × --bth），旋轉後的視覺才塞得下。 */
/* 橫置的那張＝「別人打出來、被我叫的牌」：
   貼齊這一排的下沿，並加上紅框（跟真牌桌／參考圖一樣） */
.bd-meld{align-items:flex-end}
.bd-meld .t.rot{
  width:var(--bth); height:var(--btw); align-self:flex-end;
  outline:2px solid #c0392b; outline-offset:1px; border-radius:2px;
}
.s-left .bd-meld .t.rot,.s-right .bd-meld .t.rot{
  width:var(--btw); height:var(--bth);
}
.bd-meld .t.rot::before{transform:translate(-50%,-50%) rotate(calc(var(--rot) - 90deg))}
/* 格子是橫的，圖要自己撐回「牌的原尺寸」（btw × bth）再轉，不然會被拉扁 */
.bd-meld .t.rot img{
  position:absolute; left:50%; top:50%;
  width:var(--btw); height:var(--bth);
  transform:translate(-50%,-50%) rotate(calc(var(--rot) - 90deg));
}

/* 加槓：第 4 張「疊在碰的橫放那張的正上方」（只在俯瞰圖；輸入區不動） */
.bd-meld .kakan-stack{position:relative; display:inline-flex; flex:none; align-self:flex-end}
.bd-meld .kakan-add{
  position:absolute; left:50%; top:-96%; transform:translateX(-50%); z-index:3;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.bd-meld .kakan-add .t.rot{outline:none}

/* ---------- 中央 ---------- */
.bd-center{
  grid-area:center;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:
    ". n ."
    "w info e"
    ". s .";
  align-items:center; justify-items:center;
  gap:2px; padding:6px;
  position:relative;
  background:none;
  box-shadow:none;
  min-height:80px;
  width:100%; height:100%;
  align-self:stretch; justify-self:stretch;
}
.bd-center::before{
  content:''; position:absolute; inset:5%; border-radius:10px;
  background:var(--felt-panel);
  box-shadow:inset 0 0 0 1px var(--felt-frame), inset 0 2px 10px var(--felt-shade);
}
.bd-center > *{position:relative; z-index:1}
.bd-sc{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 9px 5px; border-radius:7px; min-width:68px;
  background:var(--felt-chip);
}
.bd-sc-h{display:flex; align-items:center; gap:2px; line-height:1}
.bd-sc b{font-size:13px; font-weight:600; color:var(--felt-ink-2)}
.bd-sc span{font-size:17px; font-weight:600; color:var(--felt-ink); font-variant-numeric:tabular-nums; line-height:1.2}
.bd-sc i{font-style:normal; font-size:11px; line-height:14px; padding:0 3px; border-radius:3px; background:var(--felt-chip); color:var(--felt-ink)}
.bd-sc i.ri{background:#c0392b; color:#fff}
.bd-sc.dealer{background:rgba(233,201,107,.16); box-shadow:inset 0 0 0 1px rgba(233,201,107,.45)}
.bd-sc.dealer b{color:var(--felt-gold)}
.bd-sc.dealer i.dl{background:rgba(233,201,107,.85); color:#2b2118}
.bd-sc.cur{box-shadow:inset 0 0 0 1.5px var(--felt-ring)}
.bd-sc.n{grid-area:n} .bd-sc.w{grid-area:w} .bd-sc.e{grid-area:e} .bd-sc.s{grid-area:s}

.bd-info{grid-area:info; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center; min-width:0}
.bd-round{font-size:13px; font-weight:700; color:var(--felt-ink); letter-spacing:.5px; line-height:1.2}
.bd-sub{font-size:9px; color:var(--felt-ink-2); line-height:1.35; white-space:nowrap}
.bd-wall{font-size:11px; color:var(--felt-ink-2); font-variant-numeric:tabular-nums; line-height:1.2}
.bd-wall b{font-size:15px; color:var(--felt-ink)}
.bd-dz{display:flex; align-items:center; justify-content:center; gap:1px; margin-top:2px}
.bd-dz i{font-style:normal; font-size:8.5px; color:var(--felt-ink-3); margin-right:2px}
.bd-dz.ura{opacity:.72}

/* 盤面窄（小視窗／小檔）→ 中央只留局番、牌山與分數 */
@container (max-width: 380px){
  .bd-sub{display:none}
  .bd-dz{display:none}
  .bd-round{font-size:11px}
  .bd-sc{padding:3px 8px 4px; min-width:74px}
  .bd-sc span{font-size:16px}
  .bd-wall b{font-size:13px}
}

/* ---------- 俯瞰圖下方的回放進度條 ---------- */
.bd-scrub{
  display:flex; align-items:center; gap:4px; padding:2px 2px 0;
  font-size:11px; color:var(--ink-2); flex:none;
}
.bd-scrub .sc-b{
  border:none; background:transparent; color:#8d8a82; cursor:pointer;
  font-size:11px; line-height:1; padding:3px 4px; border-radius:4px;
  font-family:ui-monospace,Consolas,monospace;
}
.bd-scrub .sc-b:hover:not(:disabled){background:#eef6fd; color:var(--accent)}
.bd-scrub .sc-b:disabled{opacity:.3; cursor:default}
.bd-scrub input[type=range]{
  flex:1; min-width:50px; height:18px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.bd-scrub input[type=range]:disabled{cursor:default; opacity:.5}
.bd-scrub input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px; background:#e6e3db;
}
.bd-scrub input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%; margin-top:-4.5px;
  background:#1f3a56; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.bd-scrub input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:#e6e3db}
.bd-scrub input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:#1f3a56; border:2px solid #fff;
}
.bd-scrub .sc-num{
  white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink-2);
  min-width:78px; text-align:right;
}
.bd-scrub .sc-num b{color:var(--accent); font-weight:600}

/* 視角切換（俯瞰圖）：莊家在下 → 可指定任一家在下方 */
.bd-view{
  display:flex; align-items:center; gap:4px; padding:0 2px 2px;
  font-size:11px; color:var(--ink-2); flex:none;
}
.bd-view > i{font-style:normal; color:#8d8a82; margin-right:2px}
.bd-view .vw{
  border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer;
  font-size:11px; line-height:1; padding:3px 7px; border-radius:5px;
}
.bd-view .vw:hover{background:#eef6fd; color:var(--accent); border-color:#bcd8f0}
.bd-view .vw.on{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600}
/* 蓋牌：靠右、用暖色區分（不是視角選項） */
.bd-view .vw.hide{margin-left:auto; border-color:#e0d3b8; color:#8a6a1e}
.bd-view .vw.hide:hover{background:#fdf6e8; border-color:#d9c39a; color:#7a5a12}
.bd-view .vw.hide.on{background:#a8762a; border-color:#a8762a; color:#fff}
/* 分數框可點：提示可以切視角 */
.bd-sc{cursor:pointer}
.bd-sc.at-bottom{box-shadow:inset 0 0 0 1px rgba(90,140,200,.35)}

/* 剛摸到、還沒打出的那張：跟手牌隔開一點，加一圈淡金框 */
.bd-draw-gap{flex:0 0 6px; align-self:stretch}
.bd-table .t.drawn{box-shadow:0 0 0 1.5px rgba(240,205,110,.9); border-radius:3px}

/* ---------- panels：1×4 豎排（每家一條，吃滿寬度） ---------- */
.panels{
  display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0;
  container-type:inline-size;
}
/* 牌面尺寸跟著「面板自己的寬度」縮放：拖分隔條或改視窗都不會擠爆 */
.pn{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:6px 10px 8px; min-width:0;
  --tw:clamp(13px, min(2.9cqw, (100cqw - 48px) / 22), 30px); --th:calc(var(--tw) * 1.34);
}
.pn.active{border-color:var(--accent); background:#f8fbfe; box-shadow:inset 0 0 0 1px var(--accent)}
/* 不正在編輯的其他家：淡一點，避免四家同時搶眼（滑過去看時仍清楚可讀） */
.pn:not(.active){opacity:.55; transition:opacity .15s ease}
.pn:not(.active):hover{opacity:.9}
.pn-h{display:flex; align-items:center; gap:6px; margin-bottom:2px; min-height:20px}
.pn-b{display:flex; flex-direction:column; gap:6px; min-width:0}
/* 一行可以放多個列組（配＋終 / 取＋露＋出），寬度不夠才換行 */
.ln{display:flex; align-items:center; gap:10px; min-width:0; min-height:var(--th)}
/* 同一行裡有兩列（終＋露）時用虛線隔開 */
.ln .row + .row{border-left:1px dashed var(--line-soft); padding-left:10px}
.ln .row{min-height:0}
.wind{
  width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; background:var(--ink); color:#fff; font-size:11px;
}
.wind.w1{background:#185fa5}.wind.w2{background:#3b6d11}.wind.w3{background:#ba7517}
.pn-name{font-size:12px; font-weight:600}
.pn-score{margin-left:auto; font-size:13px; font-variant-numeric:tabular-nums}
.badge{font-size:11px; padding:1px 5px; border-radius:4px; line-height:1.5}
.badge.riichi{background:var(--bad-soft); color:var(--bad)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.dealer{background:#e8eef5; color:#2f4a63}
.delta{font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.delta.up{color:var(--bad)} .delta.down{color:var(--ok)}

.row{display:flex; gap:2px; flex-wrap:nowrap; margin-top:0; align-items:center; min-height:var(--th); line-height:0}
.rl{font-size:11px; color:var(--ink-3); width:16px; flex:none; user-select:none; text-align:center}
.rl.cur{color:var(--accent); font-weight:600}

/* ---------- tiles ---------- */
.t{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  width:var(--tw); height:var(--th); flex:none; box-sizing:border-box;
  background:transparent; border:none; border-radius:3px;
  user-select:none;
}
.t img{width:100%; height:100%; display:block; object-fit:contain}

/* ---------- 牌背 ----------
   白牌身（Front.svg）上蓋一塊有色面板：斜紋 + 內框。
   只在俯瞰圖用（右側輸入面板要看得到牌面才能編輯）。 */
.t.back::after{
  content:''; position:absolute; inset:8% 7%; border-radius:2px; z-index:1;
  background:
    repeating-linear-gradient(45deg, var(--bk-hi) 0 2px, transparent 2px 7px),
    linear-gradient(155deg, var(--bk-1), var(--bk-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), inset 0 0 0 3px rgba(0,0,0,.14);
}
.t.back img{display:none}
.t.back{--bk-1:#3a6fbe; --bk-2:#1d3f7d; --bk-hi:rgba(255,255,255,.14)}
body[data-back="jade"]    .t.back{--bk-1:#33a078; --bk-2:#176a4f; --bk-hi:rgba(255,255,255,.14)}
body[data-back="crimson"] .t.back{--bk-1:#c44444; --bk-2:#7d1f1f; --bk-hi:rgba(255,255,255,.13)}
body[data-back="gold"]    .t.back{--bk-1:#e0b256; --bk-2:#a8762a; --bk-hi:rgba(255,255,255,.22)}
body[data-back="ink"]     .t.back{--bk-1:#4a4a50; --bk-2:#1c1c20; --bk-hi:rgba(255,255,255,.1)}
body[data-back="plum"]    .t.back{--bk-1:#8a56b0; --bk-2:#4a2a63; --bk-hi:rgba(255,255,255,.13)}
.t.empty{border:1px dashed #dedbd2; background:#faf9f6; border-radius:2px}
.t.cur{outline:2px solid var(--accent); outline-offset:-1px; background:#eef6fd}
[data-cur]{outline:2px solid var(--accent); outline-offset:-1px; border-radius:3px; background:#eef6fd}
.t.bad{background:#fdecec; box-shadow:inset 0 0 0 2px #e24b4a; border-radius:3px}
/* 打出手裡沒有的牌：立直宣言牌/被鳴走的牌是 .pn-meldc，也要標紅 */
.pn-meldc.bad{background:#fdecec; box-shadow:inset 0 0 0 2px #e24b4a; border-radius:3px}
.t.tsumo-mark{background:#f1efe8; border:1px solid #ded9cd; color:#8a8578; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; font:15px/1 ui-monospace,monospace}
.row.fin{opacity:.9}
.t.unknown{border:1px dashed #c9a227; background:#fdf8e8; color:#a8801a; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; font:600 13px/1 ui-monospace,monospace}
.t.dim{opacity:.45}
.t.rot{transform:rotate(90deg); margin:0 3px}
.t.sm{--tw:clamp(15px, 1.5vw, 21px); --th:clamp(20px, 2vw, 28px)}
.t.xs{--tw:16px; --th:21px}
.t.kan0{background:#f1efe8; border:1px dashed #c9c5ba; color:#a8a49a; font:11px/1 ui-monospace,monospace; display:inline-flex; align-items:center; justify-content:center}

.meld{display:inline-flex; gap:1px; padding:1px 3px; border-radius:4px; background:#f6f4ee; margin-right:4px}
.meld .t{border-color:#e2ded3}
.meld-tag{font-size:11px; color:#a8a49a; margin-left:3px; align-self:center}

/* ---------- status ---------- */
.status{display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--panel); border-top:1px solid var(--line); font-size:12px; flex:none}
.prompt{color:var(--ink); white-space:nowrap}
.prompt b{color:var(--accent); font-weight:600}
.buf{
  font-family:ui-monospace,Consolas,monospace; font-size:13px; color:var(--accent);
  min-width:26px; padding:1px 6px; border-bottom:1.5px solid var(--accent);
}
.buf.err{color:var(--bad); border-color:var(--bad)}
.hints{color:var(--ink-3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.guard{margin-left:auto; white-space:nowrap; font-size:11px}
.guard.ok{color:var(--ok)} .guard.bad{color:var(--bad)} .guard.warn{color:var(--warn)}

/* ---------- modal ---------- */
.modal{position:absolute; inset:0; background:rgba(40,38,34,.32); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
.modal.hidden{display:none}
.modal-box{
  background:#fff; border-radius:12px; padding:18px 20px; max-width:760px; max-height:86vh;
  overflow:auto; border:1px solid var(--line); min-width:320px;
}
.modal-box h3{margin:0 0 12px; font-size:15px; font-weight:600}
.modal-box h4{margin:16px 0 8px; font-size:13px; font-weight:600; color:var(--ink-2)}
.modal-box p{margin:0 0 10px; color:var(--ink-2); line-height:1.7}
.modal-row{display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap}
/* ★ 一定要 flex-wrap：按鈕一多（導出面板有 7 顆）就會超出 760px，
   而 justify-content:flex-end 會把溢出往「左邊」推 —— 第一顆直接被切掉。 */
.modal-actions{display:flex; flex-wrap:wrap; gap:8px; row-gap:8px; justify-content:flex-end; margin-top:16px}
.modal-actions .chip{padding:6px 14px}
/* 按鈕太多時，次要的連結鈕可以縮一點，讓主要動作留在第一排 */
.modal-actions .chip.link-mini{padding:5px 10px; font-size:11.5px}
.keytable{border-collapse:collapse; font-size:12px; width:100%}
.keytable td{padding:4px 8px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.keytable td.k{font-family:ui-monospace,Consolas,monospace; color:var(--accent); width:52px; white-space:nowrap}
.kt-row{display:flex; gap:2px; flex-wrap:wrap}
.sel{padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:13px}
.num{width:64px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; text-align:right}
.tip{font-size:11px; color:var(--ink-3); margin-top:6px; line-height:1.6}
.empty-note{color:var(--ink-3); font-size:11px}

/* 和了面板：可加減的役種 */
.yk-list{display:flex; flex-wrap:wrap; gap:4px; min-height:22px; flex:1; min-width:0}
.yk{
  display:inline-flex; align-items:center; gap:3px;
  background:#eef6e6; border:1px solid #bcd79b; color:#3b6d11;
  border-radius:5px; padding:1px 3px 1px 7px; font-size:11px; line-height:1.5;
}
.yk i{
  font-style:normal; cursor:pointer; color:#7d8f6a; font-size:13px; line-height:1;
  padding:0 3px; border-radius:3px; user-select:none;
}
.yk i:hover{background:#d9e8c8; color:var(--bad)}

/* ---------- 規則 / 導出 / 導入 ---------- */
.rule-row{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft)}
.rule-label{width:132px; flex:none; font-size:12px; color:var(--ink-2)}
.rule-ctrl{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.tip-inline{font-size:11px; color:var(--ink-3)}
.exp-table{border:1px solid var(--line); border-radius:8px; overflow:hidden; max-height:220px; overflow-y:auto}
.exp-row{display:flex; align-items:center; gap:6px; padding:5px 9px; font-size:12px; border-bottom:1px solid var(--line-soft); cursor:pointer; flex-wrap:wrap}
.exp-row:last-child{border-bottom:none}
.exp-row:hover{background:#f7fbfe}
.exp-row.bad{background:#fdf6f6}
/* ★ 窄視窗時這幾顆會被壓成「編／集」直排 —— 不能讓它們縮，改用換行處理 */
.link-btn{font-size:11px; color:var(--accent); text-decoration:none; border:1px solid #cfe0f2; border-radius:4px; padding:1px 6px; margin-left:4px; white-space:nowrap; flex:none}
.link-btn:hover{background:var(--accent-soft)}
.json-box{background:#faf9f6; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:11px/1.6 ui-monospace,Consolas,monospace; color:var(--ink-2); white-space:pre-wrap; word-break:break-all; overflow:auto}
.json-input{width:100%; min-height:150px; max-height:260px; resize:vertical; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:12px/1.6 ui-monospace,Consolas,monospace; color:var(--ink)}

/* ---------- 盤面結算資訊 ---------- */
.bd-res{margin-top:6px;padding:7px 9px;border-top:1px solid var(--line-soft);font-size:11px;line-height:1.6;color:var(--ink-2)}
.bd-res-empty{color:#b3aea2;text-align:center}
.bd-res-win + .bd-res-win{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line-soft)}
.bd-res-head{font-size:12px;color:var(--ink)}
.bd-res-head b{color:#a32d2d}
.bd-res-arrow{color:#a8a49a;margin:0 2px}
.bd-res-yaku{color:#3b6d11;word-break:break-all}
.bd-res-score{color:var(--ink);font-weight:600}
.bd-res-line{color:#6b6860}

/* ---------- 局一覧 ---------- */
.rt-wrap{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.rt{border-collapse:collapse;width:100%;font-size:12px}
.rt th{position:sticky;top:0;background:#faf9f6;text-align:left;font-weight:600;color:var(--ink-2);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.rt td{padding:5px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.rt tbody tr{cursor:pointer}
.rt tbody tr:hover{background:#f7fbfe}
.rt tbody tr.on{background:#eef6fd}
.rt tbody tr:last-child td{border-bottom:none}
.rt-n{font-weight:600;white-space:nowrap}
.rt-yaku{color:#3b6d11;max-width:200px;word-break:break-all}
.rt-delta{white-space:nowrap;font-variant-numeric:tabular-nums}
.rt-score{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2);line-height:1.3}

/* ---------- 適配各種解析度 ---------- */
/* 窄視窗：俯瞰圖搬到上面，面板在下（1×4 照舊），分隔條隱藏 */
@media (max-width: 780px){
  #main{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    padding:8px;
  }
  #board{grid-column:1; grid-row:1; width:100%; max-width:460px; margin:0 auto}
  #splitter{display:none}
  #panels{grid-column:1; grid-row:2}
  #main.no-board{grid-template-rows:auto}
  #main.no-board #panels{grid-column:1; grid-row:1}
  .bd-table{--btw:clamp(13px, 4.4cqw, 26px)}
}

/* 矮視窗（筆電 768/800）：把四家的上下留白收緊，四條要一屏放得下 */
@media (max-height: 820px){
  .panels{gap:6px}
  .pn{padding:4px 10px 6px}
  .pn-h{margin-bottom:0; min-height:18px}
  .pn-b{gap:4px}
  #main{padding:8px 10px}
}

/* 極窄（手機橫放/分割視窗）：牌再縮一級，狀態列提示省略 */
@media (max-width: 640px){
  .pn{--tw:clamp(14px, 3.9cqw, 22px)}
  .hints{display:none}
  .meta{display:none}
}


/* ---------- 游標提示條（學 tenhou：告訴你現在在哪、下一步能按什麼） ---------- */
#cursorHint{
  position:fixed; left:50%; transform:translateX(-50%); bottom:50px; z-index:60;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.08);
  padding:5px 14px; font-size:11px; color:var(--ink);
  max-width:calc(100vw - 32px); overflow:hidden; pointer-events:none;
}
#cursorHint.hidden{display:none}
.ch-pos{color:var(--ink-2)}
.ch-pos b{color:var(--accent); font-weight:600}
.ch-sep{width:1px; height:16px; background:var(--line); flex:none}
.ch-keys{display:flex; gap:3px; overflow:hidden}
.ch-k{display:inline-flex; align-items:center; gap:3px; background:#f6f5f1; border:1px solid var(--line); border-radius:5px; padding:0 5px; line-height:1.7}
.ch-k i{font-style:normal; font-family:ui-monospace,Consolas,monospace; font-weight:700; color:var(--accent)}
.ch-k s{text-decoration:none; color:var(--ink-2)}
.ch-foot{color:var(--ink-3); font-size:10px}

/* 取/出列裡的副露：只佔一格，保持欄位對齊 */
.t.mb{
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef6e6; border:1px solid #bcd79b; color:#3b6d11;
  border-radius:3px; font-size:11px; line-height:1;
}
.t.mb:hover{background:#e2f0d4}

/* 取/出列固定 18 格（可以跳巡補）：空格不要畫虛線框，太吵；滑過或游標停在那裡才顯示 */
.row[data-row="draw"] .t.empty,
.row[data-row="discard"] .t.empty{border-color:transparent; background:transparent}
.row[data-row="draw"] .t.empty:hover,
.row[data-row="discard"] .t.empty:hover{background:#eef6fd; border-color:#cfe0ef}
.row[data-row="draw"] .t.empty[data-cur],
.row[data-row="discard"] .t.empty[data-cur]{background:#eef6fd; border-color:#cfe0ef}

/* 立直棒：直接放在「點數框」裡（放大、橫放），不再貼在河邊 */
.bd-stick-lg{
  display:block; width:46px; height:12px; border-radius:6px;
  background:#f7f5ef; position:relative; flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.45);
}
.bd-stick-lg::after{
  content:''; position:absolute; top:2px; bottom:2px; left:50%; width:5px; margin-left:-2.5px;
  background:#c0392b; border-radius:2.5px;
}

/* 摸切（打出剛摸到的那張）→ 灰掉，跟手切區分 */
.bd-rv .t.tg{filter:grayscale(1) brightness(.92); opacity:.55}

/* 取/出 的副露：只佔一格，日語動作（ポン／チー／カン）標在牌的上方 ——
   這樣第 n 巡的「取」和「出」永遠對得上 */
.pn-meldc{position:relative; display:inline-flex; flex:none; width:var(--tw); justify-content:center}
.pn-meldc .ml{
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  font-size:8px; line-height:1; color:#8a8578; white-space:nowrap; letter-spacing:-.4px;
  pointer-events:none;
}
.pn-meldc .ml.ri{color:#c0392b}
.row[data-row="draw"],.row[data-row="discard"]{padding-top:3px}

/* 露列：整組牌 + 日語動作，被叫的那張橫置（看得出哪一家鳴的） */
.meld{position:relative}
.meld .ml{
  position:absolute; left:4px; top:-9px;
  font-size:8px; line-height:1; color:#8a8578; white-space:nowrap; letter-spacing:-.4px;
}
.row[data-row="meld"]{padding-top:4px; align-items:flex-end}

/* 終列：自摸牌單獨擺在最右邊 */
.pn-gap{flex:0 0 6px; align-self:stretch}
.row[data-row="final"] .t.drawn{box-shadow:0 0 0 1.5px rgba(240,205,110,.9); border-radius:3px}

/* 面板標頭的分數：結算前 + 這局的增減 */
.pn-score .dl{font-style:normal; font-size:10px; margin-left:4px; font-variant-numeric:tabular-nums}
.pn-score .dl.up{color:#c0392b}
.pn-score .dl.dn{color:#4a7a9b}

/* ---------- 面板的牌要有牌身 ----------
   之前只有花紋、沒有底色，結果「白」在白色面板上完全看不見 */
.panels .t:not(.empty):not(.tsumo-mark):not(.kan0){
  background:linear-gradient(#fffdf7, #f4efe2);
  box-shadow:inset 0 0 0 1px #ded8c8;
  border-radius:3px;
}

/* ---------- ドラ輸入條（傳統的表ドラ／裏ドラ 五格） ---------- */
.dora-bar{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:5px 9px; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  --tw:clamp(13px, min(2.6cqw, (100cqw - 48px) / 26), 26px); --th:calc(var(--tw) * 1.34);
}
.dora-bar .db-t{font-size:11px; color:var(--ink-3); letter-spacing:.5px}
.dora-bar .row{gap:2px; min-height:var(--th)}
.dora-bar .row + .row{border-left:1px dashed var(--line-soft); padding-left:10px}
.dora-bar .t{width:var(--tw); height:var(--th)}
.dora-bar .t.empty{border-style:dashed}

/* ---------- 輸入區下方的動作列 ---------- */
.act-bar{
  display:flex; align-items:center; gap:8px; flex:none; flex-wrap:wrap;
  padding:8px 6px; position:sticky; bottom:-10px; z-index:5;
  background:var(--bg); border-top:1px solid var(--line-soft);
  box-shadow:0 -6px 10px -8px rgba(0,0,0,.18);
}
.act-bar .chip{font-size:12px; padding:5px 14px}
.act-bar .chip[data-act="win"]{border-color:#e3c9c9; color:#a32d2d}
.act-bar .chip[data-act="draw"]{border-color:#cfd8e0; color:#4a7a9b}
.act-bar .ab-note{font-size:11px; color:var(--ink-3); margin-left:auto}

/* 自動存檔提示 */
.save-tip{font-size:11px; color:var(--ink-3); margin-left:auto; white-space:nowrap}

/* 王牌（ドラ/裏ドラ）空格：虛線小格，還沒翻開時佔位 */
.bd-dslot{
  width:calc(var(--btw) * .78); height:calc(var(--bth) * .78);
  box-sizing:border-box;
  border:1px dashed var(--felt-dash); border-radius:3px;
  display:inline-block; vertical-align:middle; margin-right:1px;
}
.bd-dz{display:flex; align-items:center; gap:3px}
/* 翻開的牌與空格同尺寸，兩列才會對齊（牌身 ::before 也要跟著縮） */
.bd-dz .t{width:calc(var(--btw) * .78); height:calc(var(--bth) * .78)}
.bd-dz .t::before{width:100%; height:100%}
/* 標籤固定寬度：ドラ(2 字) 和 裏(1 字) 寬度不同，不固定的話兩列格子會錯開 */
.bd-dz i{font-style:normal; width:18px; flex:none; text-align:right}

/* 備份清單（新建半莊對話框） */
.bk-list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.bk-list .chip{font-size:11px; padding:4px 10px}

/* 右下角浮動提示（一鍵跑譜等跨視窗操作用） */
#toast{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  max-width:min(420px, calc(100vw - 36px));
  background:#1f2a33; color:#fff; font-size:12px; line-height:1.7;
  padding:10px 14px; border-radius:10px; white-space:pre-line;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .18s, transform .18s;
}
#toast.on{opacity:1; transform:translateY(0)}

/* 規則對話框的対局者名字 */
.nm-cell{display:inline-flex; align-items:center; gap:3px; margin-right:6px}
.nm-cell i{font-style:normal; font-size:11px; color:var(--ink-3); width:12px; text-align:center}

/* 動作列的鳴牌群組 */
.act-bar .ab-sep{width:1px; height:18px; background:var(--line); margin:0 2px}
.act-bar .ab-lbl{font-size:11px; color:var(--ink-3)}
.act-bar .chip.off{opacity:.45}

/* 被鳴走的舍牌：牌留著、加紅框（跟副露的「被叫的那張」同一個記號） */
.t.called{outline:2px solid #c0392b; outline-offset:1px; border-radius:2px}

/* 被鳴牌跳過的一巡：留一個淡空格（保住欄位對齊） */
.t.skip{background:transparent; box-shadow:none; border:none}
.t.skip::after{
  content:''; display:block; width:55%; height:55%;
  border:1px dashed rgba(0,0,0,.18); border-radius:3px;
}
.bd-table .t.skip::before{background:rgba(0,0,0,.18); box-shadow:none}

/* 俯瞰圖的「槓」佔位：跟輸入區的 0 同一個意思（暗槓／加槓） */
.bd-rv .t.kan0-lg{
  display:flex; align-items:center; justify-content:center;
  font:600 13px/1 ui-monospace,monospace; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.1); border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

/* 首次引導的步驟清單 */
.ob-list{margin:6px 0 10px;padding-left:22px;line-height:1.85;font-size:13.5px}
.ob-list li{margin:2px 0}