/* サイコロ 固有の見た目（共通は ../common/base.css） */
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.num-choices .choice span { min-width: 64px; justify-content: center; padding: 0 10px; }

/* サイコロの置き場（地は紙の色。ダークでも明るいまま＝サイコロが見やすい） */
.tray {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 210px; padding: 18px 12px; border-radius: var(--radius);
  background: #EFE9DC; border: 1px solid #D9D0BC; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tray.busy { cursor: progress; }
.dice { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--gap, 14px); margin: 0 auto; }
.die {
  width: var(--die, 100px); height: var(--die, 100px);
  transform: translate(var(--ox, 0px), var(--oy, 0px)) rotate(var(--rot, 0deg));
  transition: transform .18s ease-out;
}
.die svg { display: block; width: 100%; height: 100%; }
/* 3Dで描いた絵（1枚に並べたコマの1つを出す）。絵の周りの余白（影の分）だけ外へはみ出させて、SVG のときと同じ大きさに見せる */
.die-img { display: block; width: 140%; height: 140%; margin: -20%; background-repeat: no-repeat; pointer-events: none; }
/* 振ったときの動き: はねて回りながら元の位置へ */
.die.tumble { animation: tumble .62s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tumble {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  30%  { transform: translate(calc(var(--dx) * .6), var(--dy)) rotate(calc(var(--spin) * .45)) scale(1.06); }
  60%  { transform: translate(var(--dx), 0) rotate(calc(var(--spin) * .8)) scale(.98); }
  80%  { transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .25)) rotate(calc(var(--spin) * .95)); }
  100% { transform: translate(var(--ox, 0px), var(--oy, 0px)) rotate(calc(var(--spin) + var(--rot, 0deg))); }
}
.die.fade { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .die { transition: none; } .die.tumble { animation: none; } }

/* 合計・出た目 */
.readout { text-align: center; margin: 10px 0 0; min-height: 3.2em; }
.total { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.total .lbl { font-size: 1rem; color: var(--ink-sub); margin-right: 4px; }
.total b { font-size: 2.4rem; }
.values { margin: 2px 0 0; color: var(--ink-sub); font-size: 1.05rem; font-variant-numeric: tabular-nums; min-height: 1.5em; }

.main-btns { justify-content: center; }
.roll-btn { min-width: 170px; min-height: 56px; font-size: 21px; }

/* これまでの目 */
.hist-box { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hist-title { font-size: 1rem; margin: 0; }
.hist { list-style: none; margin: 6px 0 0; padding: 0; max-height: 216px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 4px 6px; border-bottom: 1px dashed var(--line); }
.hist li.new { background: var(--accent-soft); }
.hist li.empty { color: var(--ink-sub); border: none; }
.hist .h-no { color: var(--ink-sub); min-width: 2.2em; text-align: right; font-size: 14px; }
.hist .h-vals { font-weight: 700; }
.hist .h-sum { color: var(--ink-sub); }
.hist .h-sum b { color: var(--ink); }
.hist .h-f { font-size: 14px; color: var(--ink-sub); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }

/* サイコロトーク */
/* 並び: 置き場 → 合計 → お題 → 振る → お題の表・実験 → 履歴（実験では「大きく表示」をグラフの下へ） */
.tool { display: flex; flex-direction: column; }
.tray { order: 1; } .readout { order: 2; } .talk-now { order: 3; } .main-btns { order: 4; } .talk-board { order: 5; } .exp { order: 5; } .hist-box { order: 6; }
.tool[data-mode="exp"] .main-btns { order: 6; }
.talk-now { margin-top: 10px !important; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; margin: 0 0 10px; padding: 8px 12px;
  border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: 1.35rem; font-weight: 700; text-align: left; line-height: 1.4; }
.talk-now .tn-v svg { width: 44px; height: 44px; display: block; }
.talk-now .tn-text.sub { color: var(--ink-sub); font-size: 1rem; font-weight: 400; }
.talk-now.pop { animation: talkpop .3s ease-out; }
@keyframes talkpop { from { transform: scale(.94); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.talk-now.rolling { opacity: .4; }
.talk-board { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.talk-board li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.4; }
.talk-board li.hit { border: 2px solid var(--accent); background: var(--accent-soft); font-weight: 700; padding: 5px 7px; }
.talk-board .tb-die svg { width: 28px; height: 28px; display: block; }
.talk-board .tb-die { flex: none; }
.talk-board .empty { color: var(--ink-sub); }
@media (max-width: 520px) { .talk-board { grid-template-columns: 1fr; } .talk-now { font-size: 1.15rem; } }

/* 設定: お題の一覧・自分で書くお題 */
.theme-list { margin: 8px 0 0; padding-left: 1.6em; color: var(--ink-sub); font-size: 15px; columns: 2; column-gap: 24px; }
.custom-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.custom-list li { display: flex; align-items: center; gap: 8px; }
.custom-list .cl-die svg { width: 30px; height: 30px; display: block; }
.custom-list input { flex: 1; min-width: 0; min-height: var(--tap); font: inherit; padding: 4px 10px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.custom-list input:focus-visible { outline: 3px solid var(--warn); outline-offset: 1px; }
@media (max-width: 520px) { .theme-list { columns: 1; } }

/* 確率の実験 */
.exp { margin-top: 10px; }
.exp-stat { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.exp-stat b { font-size: 1.3rem; }
.exp-stat .es-most { color: var(--ink-sub); }
.chart-wrap { background: var(--board); border-radius: var(--radius); border: 1px solid var(--line); padding: 4px; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: #E2DDD2; stroke-width: 1; }
.chart .base { stroke: #6B6F76; stroke-width: 1.5; }
.chart .ax { fill: #4B5058; font-size: 14px; font-family: var(--font); }
.chart .bar { fill: #2F5D8A; opacity: .85; }
.chart .th { fill: none; stroke: #B23A3A; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.chart .thdot { fill: #B23A3A; }
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; font-size: 14px; color: var(--ink-sub); }
.chart-key .key-bar { display: inline-block; width: 14px; height: 14px; background: #2F5D8A; opacity: .85; border-radius: 2px; }
.chart-key .key-line { display: inline-block; width: 24px; border-top: 3px dashed #B23A3A; margin-left: 10px; }
.exp-btns { justify-content: center; }
.exp-btns .btn { min-width: 76px; }
.exp-table { margin-top: 10px; }
.exp-table summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--accent); }
.table-wrap { max-height: 320px; overflow: auto; }
.exp-table table { font-variant-numeric: tabular-nums; margin: 0; }
.exp-table td, .exp-table th { padding: 4px 10px; text-align: right; }
.exp-table th:first-child, .exp-table td:first-child { text-align: center; }
.tool[data-mode="exp"] .tray, .tool[data-mode="talk"] .tray { min-height: 120px; }

/* 大きく表示（プロジェクター用）: 全画面にできる端末は全画面、できなければページいっぱい */
.tool.big {
  position: fixed; inset: 0; z-index: 100; overflow: auto; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; padding: 2vh 3vw;
}
.tool.big .tray { flex: 0 1 auto; min-height: 50vh; }
.tool.big[data-mode="exp"] .tray { min-height: 22vh; }
.tool.big .total { font-size: 3vh; }
.tool.big .total .lbl { font-size: 3.4vh; }
.tool.big .total b { font-size: 12vh; }
.tool.big .values { font-size: 4vh; }
.tool.big .hist-box { display: none; }
.tool.big .roll-btn { min-height: 72px; font-size: 26px; min-width: 240px; }
.tool.big .talk-now { font-size: 5vh; }
.tool.big .talk-now .tn-v svg { width: 8vh; height: 8vh; }
.tool.big .talk-board { font-size: 2.4vh; }
.tool.big .exp-table { display: none; }
.tool.big .chart-wrap { max-width: 150vh; margin: 0 auto; width: 100%; }
body.big-open { overflow: hidden; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .tray { min-height: 170px; padding: 14px 8px; }
  .turnbar { margin-bottom: 6px; }
  .total b { font-size: 2.1rem; }
  .roll-btn { min-width: 140px; }
  .linkbtn { display: none; } /* 狭い画面では「使いかた」を省く（解説はすぐ下） */
  .exp-btns .btn { min-width: 0; flex: 1 1 auto; padding: 0 12px; }
}

/* iPhone の「連絡先を自動入力」を出さないため入力欄は type=search（要望No.87）。検索欄の見た目は消す */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{display:none;-webkit-appearance:none}
/* 上のバーの高さを一定に（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: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */