/* ダウト: 札・卓・席・一言の帯・手札は cards.js（C.layout）のまま。ここは場の中の物（つぎの数・判定・受付の残り）と、設定・記録・部屋の待つ画面だけ */
/* 見た目: トランプ・カジノの「明るく落ち着いた」シリーズ共通（2026-10-23 持ち主の指示）。地は明るい灰、文字は墨色、主なボタンと題字の飾りはえんじ。卓と札の裏は cards.js の共通のまま */
:root {
  --ink: #1E2B27;    /* 文字（墨色） */
  --sub: #5C6660;    /* 薄い文字 */
  --paper: #E9E8E3;  /* 地（ホームも遊ぶ画面の卓の周りも） */
  --accent: #8E3B2E; /* えんじ（主なボタン・題字の飾り・強める所） */
  --accent-ink: #FFFFFF;
  --line: #CFCDC5;   /* 区切りの線 */
}
/* 共通部品の色は変数で渡すだけ。部屋の ctx.el には shell の theme が届かないので、ここでも渡す */
.dt-host { --ui-red: #8E3B2E; --ui-red-ink: #FFFFFF; --ui-ink: #1E2B27; --ui-sub: #5C6660; --ui-card: #E9E8E3; --ui-shade: rgba(233, 232, 227, .97); --ui-chip: #DEDCD5; --ui-paper: #E9E8E3; --ui-soft: #CFCDC5; }
.dt-host { background: var(--paper); color: var(--ink); }
/* 2 つ目以降のボタン（下の段・帯の遊び方とやめる）: 細い線のボタン（線と文字は墨色、地は透明） */
.dt-host .ui-btn.sub { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.dt-host .ui-btn.sub:disabled { opacity: .45; }
/* 一言の帯（自分の番）も主なボタンと同じ組 */
.dt-host .cd-say.me { background: var(--accent); color: var(--accent-ink); }
.dt-host .cd-say .cd-think { margin-left: .5em; vertical-align: middle; }
.dt-host:not(.shell-stage) { position: relative; width: 100%; height: 100%; overflow: hidden; }
.dt-host { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dt-host .cd-layout[hidden] { display: none; }
.dt-host .cd-layout.dt-por .cd-seats { flex-wrap: wrap; justify-content: center; }
.dt-cur { outline: 3px solid var(--paper); outline-offset: 2px; }
.dt-sent { opacity: .35; translate: 0 -18px; }
.dt-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dt-layer > * { pointer-events: auto; }
.dt-act { white-space: nowrap; }
/* 手札が多いときの段分け（table.js）。各段は幅いっぱいに取り、下の段は上の段の札を 65% 見せて重ねる */
.dt-host .cd-hand.dt-rows { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.dt-host .cd-hand.dt-rows > .dt-row { min-height: 0; padding-top: 0; }
.dt-host .cd-hand.dt-rows > .dt-row + .dt-row { margin-top: calc(var(--cd-w, 64px) * -0.49); }

/* 場（L.field の中） */
.dt-pile { position: relative; width: 72px; height: 101px; margin-bottom: 30px; }
.dt-pile .cd { position: absolute; left: 0; top: 0; }
.dt-pile.dt-heap { width: 200px; }
.dt-pile.dt-heap .cd { left: 8px; }
.dt-pilen { position: absolute; left: -40px; right: -40px; top: 108px; text-align: center; font-size: 20px; white-space: nowrap; }
.dt-pilen b { font-size: 26px; }
.dt-fly { position: absolute; z-index: 5; pointer-events: none; }
.dt-need { width: 160px; padding: 6px 0 8px; border-radius: 6px; background: var(--paper); color: var(--ink); text-align: center; border-top: 4px solid var(--accent); }
.dt-need small { display: block; font-size: 18px; color: var(--sub); }
.dt-need > b { display: block; font-size: 72px; line-height: 1; font-weight: 900; color: var(--accent); }
.dt-need .seq { display: block; font-size: 16px; color: var(--sub); margin-top: 2px; white-space: nowrap; }
.dt-need .seq b { color: var(--ink); }
.dt-timer { position: absolute; left: 25%; right: 25%; bottom: 0; height: 10px; background: rgba(0,0,0,.3); border-radius: 5px; overflow: hidden; }
.dt-timer i { display: block; height: 100%; width: 0; background: var(--paper); }

/* ダウトの判定（検印を押す） */
.dt-reveal { text-align: center; pointer-events: none; }
.dt-reveal .stamp { display: inline-block; background: var(--paper); border: 3px solid var(--accent); border-radius: 4px; padding: 0 .3em; font-size: 54px; line-height: 1.1; font-weight: 900; color: var(--accent); letter-spacing: .06em; transform: rotate(-6deg); animation: dt-stamp .3s cubic-bezier(.2,1.6,.4,1); }
.dt-reveal .row { display: flex; justify-content: center; gap: 8px; margin: 6px 0; }
.dt-reveal .cd { animation: dt-flip .35s ease-out both; }
.dt-reveal .cd.dt-ng { outline: 4px solid var(--accent); outline-offset: 1px; }
.dt-reveal .verdict { display: inline-block; font-size: 34px; font-weight: 900; padding: 0 22px; border-radius: 4px; animation: dt-pop .25s .7s both; }
.dt-reveal.lie .verdict { background: var(--accent); color: var(--accent-ink); }
.dt-reveal.truth .verdict { background: var(--paper); color: var(--ink); outline: 2px solid var(--ink); }
@keyframes dt-stamp { from { transform: rotate(-6deg) scale(2); opacity: 0; } }
@keyframes dt-flip { from { transform: rotateY(90deg); } }
@keyframes dt-pop { from { transform: scale(.5); opacity: 0; } }

/* 詳しく・設定・記録（shell.panel の中） */
.dt-rec { min-width: 340px; }
.dt-best { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dt-best div { border-bottom: 2px solid var(--accent); padding: 8px 12px; text-align: center; }
.dt-best span { display: block; font-size: 18px; color: var(--sub); }
.dt-best b { font-size: 44px; line-height: 1.1; }
.dt-best small { font-size: 18px; margin-left: 4px; }
.dt-rec ul { list-style: none; margin: 0; padding: 0; }
.dt-rec li { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.dt-rec li b { font-size: 24px; }
.dt-set .dt-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.dt-set .dt-opt > span { min-width: 6.5em; }

/* ホームのデモ（h.art の中で本番の卓を縮めて動かす。押しても何も起きない） */
.dt-host.dt-demo, .dt-demo { position: absolute; transform-origin: 0 0; pointer-events: none; }
/* 遊び方の図（shell.guide の箱の中。本番の卓を縮めた静止画。drawScene） */
.dt-pic { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dt-pic *, .dt-pic *::before, .dt-pic *::after { animation: none !important; transition: none !important; }
.dt-key { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -10px); background: var(--paper); color: var(--accent); border: 3px solid var(--accent); border-radius: 4px; padding: 0 .4em; font-weight: 900; line-height: 1.5; white-space: nowrap; z-index: 30; }
.dt-key.below { bottom: auto; top: 100%; transform: translate(-50%, 10px); }

/* 部屋の小さなウィンドウ（共通の shell.panel）の中身: 待つ画面・結果・やめますか */
.dt-sub { color: var(--sub); }
.dt-pacts { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.dt-res ol { margin: 8px 0 12px; padding-left: 1.4em; font-size: 24px; line-height: 1.5; }
.dt-res ol .me { color: var(--accent); }
.dt-wait ul { list-style: none; padding: 0; margin: 10px 0; font-size: 26px; line-height: 1.6; columns: 2; }
.dt-wait ul .cpu { color: var(--sub); }