/* ヨット固有の見た目（共通は ../common/base.css） */
.board-wrap { max-width: 640px; }

/* サイコロの台（木の枠＋フェルト。下の帯がキープの列） */
.tray {
  position: relative; border-radius: 10px; padding: 8px;
  background: #6B4A2E url(assets/wood_dark.webp) center / 256px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.felt {
  position: relative; height: clamp(118px, 26vw, 150px); border-radius: 6px 6px 0 0;
  background: #2F6B4F url(assets/felt.webp) center / 256px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.shelf {
  position: relative; height: clamp(82px, 15vw, 106px); border-radius: 0 0 6px 6px; margin-top: 3px;
  background: #EFE4CF url(assets/wood_light.webp) center / 300px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}
.shelf span {
  position: absolute; left: 8px; top: 4px; font-size: 14px; font-weight: 700; color: #5A4632;
  letter-spacing: .1em; background: rgba(255,248,234,.85); border-radius: 4px; padding: 0 6px; line-height: 1.6;
}
.tray.keep-off .shelf span { opacity: .5; }

/* サイコロ（位置は game.js が --x/--y で決める。台の左上からの割合） */
.die {
  --s: clamp(62px, 17vw, 90px);
  position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) + 18px);
  margin: 0; padding: 0; border: 0; background: none; cursor: default; color: inherit; font: inherit;
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
  transition: transform 260ms cubic-bezier(.3,.7,.3,1);
  -webkit-tap-highlight-color: transparent;
}
.die.no-anim { transition: none; }
.die img { display: block; width: var(--s); height: var(--s); pointer-events: none; transform: rotate(var(--r, 0deg)); filter: var(--shadow-piece); }
.die .dnum {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-width: 22px; height: 20px; border-radius: 10px;
  font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; padding: 0 6px;
  background: rgba(255,248,234,.9); color: #1F2328; display: none;
}
.tray.can-keep .die { cursor: pointer; }
.tray.can-keep .die .dnum { display: block; }
.tray.can-keep .die:hover img, .tray.can-keep .die:focus-visible img { filter: var(--shadow-lift); }
.die:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; border-radius: 8px; }
.die.kept .dnum { background: var(--btn); color: var(--btn-ink); }
.die.locked img { opacity: .92; }
.die.hidden { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .die { transition: none; } }

.tray .callout { top: calc(100% + 36px); z-index: 5; } /* サイコロに重ねない（ボタンの列の上に出す） */

/* ボタンの列 */
.actions { display: flex; gap: 8px; margin: 10px 0; }
.actions .btn { flex: 1; min-height: 52px; font-size: 18px; }
.actions #roll .left { font-weight: 400; font-size: 15px; margin-left: 6px; }

/* 得点表 */
.sheet-wrap { overflow-x: auto; }
table.sheet { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; font-size: 15px; background: var(--surface); }
.sheet th, .sheet td { border: 0; border-bottom: 1px solid var(--line); padding: 0 6px; height: 31px; text-align: center; background: transparent; }
.sheet thead th { font-size: 14px; font-weight: 700; height: 38px; line-height: 1.2; border-bottom: 2px solid var(--line); }
.sheet thead th .mk { display: block; font-size: 15px; }
.sheet thead th.now { background: var(--accent-soft); box-shadow: inset 0 -4px 0 var(--pc); }
.sheet th.cat { text-align: left; font-weight: 700; white-space: nowrap; width: 46%; }
.sheet th.cat .ico { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.sheet th.cat .desc { font-weight: 400; font-size: 14px; color: var(--ink-sub); margin-left: 8px; }
.sheet td.now { background: rgba(47, 93, 138, .06); }
.sheet td.val { font-weight: 700; font-variant-numeric: tabular-nums; }
.sheet td.zero { color: var(--ink-sub); font-weight: 400; }
.sheet td.pot { color: var(--ink-sub); opacity: .75; font-weight: 400; cursor: pointer; }
.sheet td.pot.good { color: var(--accent); opacity: 1; font-weight: 700; }
.sheet td.pot.sel { outline: 3px solid var(--accent); outline-offset: -3px; background: var(--accent-soft); color: var(--ink); opacity: 1; font-weight: 700; }
.sheet td.just { animation: justfill .9s ease-out; }
/* 書きこんだ欄を一瞬だけ注意色で（ダークでも文字が読めるよう、面の色に混ぜる） */
@keyframes justfill { from { background: color-mix(in srgb, var(--warn) 30%, var(--surface)); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .sheet td.just { animation: none; background: color-mix(in srgb, var(--warn) 30%, var(--surface)); } }
.sheet tr.sum th, .sheet tr.sum td { background: var(--bg); font-size: 14px; height: 30px; }
.sheet tr.sum td { font-weight: 700; }
.sheet tr.sum td .got { color: var(--ok); margin-left: 4px; }
.sheet tr.sum td .need { font-weight: 400; color: var(--ink-sub); font-size: 14px; }
:root:lang(en) .sheet tr.sum td .need { white-space: nowrap; } /* 英語のページ: 小計の「/63」「 ✗」を折り返さない */
.sheet tr.total th, .sheet tr.total td { font-size: 16px; font-weight: 700; border-top: 2px solid var(--ink-sub); height: 40px; }
.sheet tr.got td { color: var(--ok); }
.sheet .dot-mk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -1px; margin-right: 3px; }

@media (max-width: 520px) {
  .sheet th.cat .desc { display: none; }
  .sheet th, .sheet td { height: 29px; padding: 0 4px; }
  .sheet thead th { height: 34px; }
  .sheet tr.sum th, .sheet tr.sum td { height: 28px; font-size: 14px; }
  .sheet tr.total th, .sheet tr.total td { height: 34px; }
  .felt { height: 108px; }
  .shelf { height: 82px; }
  .actions { margin: 8px 0; }
  .actions .btn { min-height: 48px; font-size: 17px; padding: 0 8px; }
  .sheet { font-size: 14px; }
  .sheet th.cat { width: auto; }
}

/* 結果（得点表の上に重ねる） */
.result-box { inset: 8% 6% auto; z-index: 10; }
.result-box li { font-variant-numeric: tabular-nums; }

.howto img[src*="zero"], .howto img[src*="bonus"] { max-width: 600px; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --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: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */