/* シャットザボックス固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }

/* 箱（木の枠）。色は箱の素材の色なので、ダーク表示でも同じ（盤の地は暗くしすぎない） */
.box {
  --wood: #8A5A34; --wood-dark: #5E3B20; --tile: #F1DDB4; --tile-edge: #9B6B3E; --tile-ink: #3B2614; --felt: #2F6A50;
  position: relative; border-radius: 10px; padding: 10px 10px 12px;
  background: var(--wood);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 3px, transparent 3px 11px);
  box-shadow: inset 0 0 0 2px var(--wood-dark);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
/* 板の段（板は下の辺を軸に手前へ倒れる） */
.lid { background: var(--wood-dark); border-radius: 6px; padding: 10px 8px 0; }
.tiles { display: flex; gap: 4px; perspective: 520px; perspective-origin: 50% 0%; }
.tile {
  flex: 1 1 0; min-width: 0; height: clamp(76px, 17vw, 104px); padding: 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; position: relative;
}
.tile .face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--tile); border: 2px solid var(--tile-edge); border-bottom-width: 4px; border-radius: 5px 5px 2px 2px;
  transform-origin: 50% 100%; transition: transform 240ms cubic-bezier(.55,0,.9,.45), background-color 240ms, translate 160ms;
  filter: var(--shadow-piece);
}
.tile .num { font-size: clamp(22px, 5.6vw, 34px); font-weight: 800; color: var(--tile-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.box[data-n="12"] .tile .num, .box[data-n="10"] .tile .num { font-size: clamp(20px, 4.6vw, 30px); }
/* 倒れた板: 手前へほぼ平らに倒れ、裏の濃い木の色が少し見える */
.tile.down .face { transform: rotateX(-80deg); background: #C49A68; filter: none; }
.tile.down .num { opacity: 0; transition: opacity 120ms 80ms; }
/* 選んでいる板: 少し持ち上げて、アクセントの枠と小さな印 */
.tile.sel .face { translate: 0 -8px; border-color: var(--accent-strong, #2F5D8A); box-shadow: 0 0 0 3px #2F5D8A; filter: var(--shadow-lift); }
.tile.sel .face::after { content: ''; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #2F5D8A; }
.box.can-pick .tile:not(.down) { cursor: pointer; }
.box.can-pick .tile:not(.down):not(.sel):hover .face { translate: 0 -3px; }
.tile:focus-visible { outline: 3px solid var(--warn); outline-offset: 3px; border-radius: 6px; }
.rail { height: 12px; margin: 0 -8px; background: var(--wood); border-top: 2px solid #4A2E18; border-radius: 0 0 4px 4px; }

/* 板が多いとき、狭い画面では2段に（1段に並べると押しにくい） */
@media (max-width: 560px) {
  .box[data-n="10"] .tiles, .box[data-n="12"] .tiles { display: grid; grid-template-columns: repeat(var(--cols), 1fr); row-gap: 12px; }
  .box[data-n="10"] { --cols: 5; } .box[data-n="12"] { --cols: 6; }
  .box[data-n="10"] .tile, .box[data-n="12"] .tile { height: 72px; }
}

/* サイコロを振る所（フェルト） */
.tray {
  position: relative; margin-top: 10px; border-radius: 6px; height: clamp(104px, 22vw, 132px);
  background: var(--felt); box-shadow: inset 0 2px 6px rgba(0,0,0,.35); overflow: hidden;
}
.dice-area { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 28px); }
.dice-area .die { display: block; width: clamp(60px, 15vw, 82px); height: clamp(60px, 15vw, 82px); filter: var(--shadow-piece); }
.dice-area .die svg { display: block; width: 100%; height: 100%; }
.dice-area .die:nth-child(1) { rotate: -6deg; } .dice-area .die:nth-child(2) { rotate: 8deg; }
.dice-area .die.rolling { rotate: 0deg; }

/* 箱の下の行（目の合計と、選んだ板の式） */
.sumline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px; min-height: 44px; margin-top: 8px; font-size: 18px; }
.sumline b { font-size: 24px; font-variant-numeric: tabular-nums; }
.sumline .eq b.ok { color: var(--ok); } .sumline .eq b.ng { color: var(--ng); }
.sumline .target { font-weight: 700; }

.board-wrap .callout { top: calc(100% - 24px); z-index: 5; } /* サイコロと板に重ねない（箱の下の行に出す） */
.board-wrap .result-box { z-index: 6; inset: 8% 6% auto; }
.result-box ol { text-align: left; display: inline-block; margin: 8px auto; padding-left: 1.4em; }
.result-box li { margin: 4px 0; }

/* ボタンの列 */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.actions .btn { flex: 1 1 140px; min-height: 52px; font-size: 18px; }
.actions #clear { flex: 0 1 auto; }

/* 倒せる組み合わせ（手助け） */
.combos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 0; margin: 4px 0 8px; }
.combos.on { min-height: 44px; }
.combos .lbl { color: var(--ink-sub); font-size: 15px; margin-right: 4px; }
.combo {
  min-height: 44px; min-width: 52px; padding: 0 12px; border-radius: var(--radius); border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
}
.combo.sel { border-color: var(--accent); background: var(--accent-soft); }
.combo:disabled { cursor: default; opacity: .8; }
.combo:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* 点数表 */
.scores table { margin: 4px 0 8px; width: auto; min-width: 50%; font-size: 15px; border-collapse: collapse; }
.scores th, .scores td { padding: 4px 10px; text-align: center; font-variant-numeric: tabular-nums; }
.scores th[scope=row] { text-align: left; white-space: nowrap; }
.scores tr.now th[scope=row] { background: var(--accent-soft); }
.scores .mk { margin-right: 4px; }
.scores td.tot { font-weight: 700; }
.status .round { font-weight: 400; color: var(--ink-sub); margin-left: auto; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .tile .face { transition: none; } }
.result-box .note { white-space: pre-line; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --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; } }
/* 上のバーの高さ ここまで */