/* board.css — バカラ罫線スコアボードの見た目(配色・マーク形・グリッド) */

:root {
  --red: #d23b3b;      /* 庄(B) / 下三路の「規則性あり」 */
  --blue: #2f6fdb;     /* 閑(P) / 下三路の「規則性なし」 */
  --green: #1f9d4d;    /* 和(T) */
  --cell: 26px;        /* 1マスの大きさ(ディーラー視認性は次段で微調整可) */
  --grid-line: #d8d8d8;
  --ink: #222;
  --panel-bg: #fff;
  --panel-border: #cfcfcf;
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
}

html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;            /* 16px を撤去: .app の 100dvh と二重化させない(縦溢れ防止) */
  background: #f4f5f7;
  overflow: hidden;      /* ページ自体は絶対に縦スクロールさせない */
}

/* ===== iPad 横向き1画面レイアウト(ipad-landscape-noscroll)===== */
/* 画面いっぱいの grid。左上=盤面 / 左下=入力ゾーン / 右=縦ツールバー。ページ縦スクロール無し。 */
.app {
  height: 100dvh;        /* iOS Safari のアドレスバー伸縮に強い dvh */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;  /* メイン / 右ツールバー(内容幅) */
  grid-template-rows: minmax(0, 1fr) auto;     /* 盤面(伸縮) / 入力(内容高) */
  grid-template-areas:
    "board   toolbar"
    "inputs  toolbar";
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.app__board   { grid-area: board;   min-height: 0; min-width: 0; overflow: hidden; }
.app__inputs  { grid-area: inputs;  min-width: 0; }
.app__toolbar { grid-area: toolbar; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* 盤面: 縦積み(flex column)をやめ 3 段 grid(珠盤路 / 大路 / 下段)。下段は .board__low で横並び。 */
.board {
  height: 100%;
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "bead"
    "big"
    "low";
}
.board > .road--bead { grid-area: bead; }
.board > .road--big  { grid-area: big; }
/* 下段ラッパ: 大眼仔/小路/曱甴路/問路/凡例 を横並び(各パネル内だけ横スクロール可) */
.board__low {
  grid-area: low;
  display: flex;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.board__low > * { min-width: 0; }                 /* flex 子の収縮を許可(横溢れはパネル内 scroll へ) */
.board__low > .road { flex: 1 1 0; }              /* 下三路3つは均等幅 */
.board__low > .road--monro { flex: 1.5 1 auto; }  /* 問路は見出しが長いぶん広め */
.board__low > .legend { flex: 1.3 1 0; overflow-y: auto; }  /* 凡例は縦が厳しければパネル内スクロール */

/* 各路パネル */
.road {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 6px 8px;
  min-height: 0;
  overflow: auto;   /* シューが伸びた路だけパネル内でスクロール(ページ縦は不動) */
}
.road__title { font-size: 12px; margin: 0 0 4px; }

/* グリッド: 縦6行、列はマーク数に合わせて自動。座標は各マスが明示指定。 */
.grid {
  display: grid;
  grid-template-rows: repeat(6, var(--cell));
  grid-auto-columns: var(--cell);
  grid-template-columns: repeat(var(--cols, 1), var(--cell));
  gap: 0;
  background:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--cell));
  border: 1px solid var(--grid-line);
  width: max-content;
  min-height: var(--cell);
  min-width: var(--cell);
}

.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* マーク(色は --c。c-* クラスで割り当て) */
.c-banker, .c-red { --c: var(--red); }
.c-player, .c-blue { --c: var(--blue); }
.c-tie { --c: var(--green); }

.mark { width: 16px; height: 16px; box-sizing: border-box; }
.mark--filled { border-radius: 50%; background: var(--c); }
.mark--hollow { border-radius: 50%; border: 2.5px solid var(--c); background: transparent; }
/* 斜線／(左下→右上) */
.mark--slash {
  background: linear-gradient(45deg, transparent 0 42%, var(--c) 42% 58%, transparent 58% 100%);
}

/* 大路の和: 緑斜線を○に重ねる */
.tie-overlay {
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
}

/* 問路 */
/* 見出し列(次が庄/次が閑)は文字幅に合わせて広げる(最低でも1マス幅)。
   見出しは1行固定(折返し禁止)、その真下のマークは中央揃え。 */
.monro { display: inline-grid; grid-template-columns: auto minmax(var(--cell), max-content) minmax(var(--cell), max-content); gap: 4px 16px; align-items: center; }
.monro__row { display: contents; }
.monro__h { font-size: 12px; color: #555; text-align: center; white-space: nowrap; }
.monro__road { font-size: 13px; }
.monro__cell { display: flex; align-items: center; justify-content: center; }

/* 凡例(下段カラム。INVARIANTS: 注意書きは隠さず常時表示。狭い枠には font 圧縮で収める=文言は不変) */
.legend { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 6px 8px; }
.legend__items { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-bottom: 6px; }
.legend__item { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.legend__note { font-size: 10.5px; color: #444; margin: 3px 0; line-height: 1.4; }

/* ===== 操作バー(step2 入力UI)===== */
/* ディーラーが素早く・迷わず・誤タップしにくい操作を最優先。大きめボタン・色で即判別。 */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 12px;       /* 下部固定バー。margin-bottom は .app grid の gap が担うので撤去 */
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}
.controls__inputs, .controls__ops { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.btn {
  min-height: 56px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  background: #888;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* 入力ボタンは特に大きく・色で即判別(庄赤/閑青/和緑) */
.btn--input { min-width: 92px; font-size: 18px; }
.btn--banker { background: var(--red); }
.btn--player { background: var(--blue); }
.btn--tie { background: var(--green); }

/* 取消・新規はおとなしい色(入力ボタンと混同しない) */
.btn--undo { background: #fff; color: var(--ink); border-color: #bbb; }
.btn--new { background: #fff; color: #8a4b00; border-color: #e0a060; }
.btn--danger { background: #c0392b; color: #fff; }

/* 新規の確認(誤消去防止・既定は非表示=app.js が制御) */
.confirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; background: #fff4e5; border: 1px solid #e0a060; border-radius: 8px; }
.confirm__msg { font-size: 13px; color: #8a4b00; }
.confirm .btn { min-height: 40px; padding: 6px 12px; font-size: 14px; }

/* 状態表示 */
.status { font-size: 13px; color: #555; margin-left: auto; }

/* 演出設定(⚙)= 右端ツールバー。パネルは下・左方向に開く(画面右端で見切れない) */
.settings { position: relative; }
.btn--gear { background: #fff; color: var(--ink); border-color: #bbb; min-height: 44px; font-size: 13px; width: 100%; padding: 8px 6px; line-height: 1.2; }
.settings__panel {
  position: absolute; top: 100%; right: 0; z-index: 10; margin-top: 6px; padding: 12px;
  background: #fff; border: 1px solid var(--panel-border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); min-width: 200px;
}
.set__row { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 4px 0; }
.set__threshold { font-size: 14px; padding: 2px 6px; }

/* ===== 全画面 昇竜カットイン(演出オーバーレイ)===== */
/* 演出は連勝という「結果の盛り上げ」。次の結果を予測・的中させるものではない。 */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  cursor: pointer; /* どこをタップしても閉じる */
}
.overlay--active { animation: overlay-in .25s ease-out; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.dragon { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* 本物(MP4)用: 全画面 video */
.dragon__video { width: 100%; height: 100%; object-fit: cover; }

/* 仮カットイン: 下から駆け上がる昇竜シルエット + 光の帯 */
.dragon__beam {
  position: absolute; left: 50%; bottom: -10%; width: 38vmin; height: 130vh; transform: translateX(-50%) rotate(2deg);
  background: linear-gradient(to top, rgba(255,210,90,0) 0%, rgba(255,180,40,.55) 35%, rgba(255,120,0,.85) 70%, rgba(255,255,200,.95) 100%);
  filter: blur(6px);
  animation: dragon-rise 1.6s cubic-bezier(.2,.7,.2,1) both;
}
.dragon__figure {
  position: relative; font-size: 46vmin; line-height: 1; filter: drop-shadow(0 0 24px rgba(255,160,40,.9));
  animation: dragon-rise 1.5s cubic-bezier(.2,.7,.2,1) both, dragon-sway 1.8s ease-in-out 1.2s infinite alternate;
}
.dragon__label {
  position: absolute; bottom: 8%; left: 0; right: 0; text-align: center;
  font-size: 9vmin; font-weight: 900; color: #fff;
  text-shadow: 0 0 18px rgba(255,150,30,1), 0 2px 4px rgba(0,0,0,.6);
  letter-spacing: .05em;
  animation: dragon-pop .5s .5s both;
}
.dragon--banker .dragon__label { color: #ffe3e0; }
.dragon--player .dragon__label { color: #e0ecff; }

@keyframes dragon-rise { from { transform: translateY(60vh) scale(.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes dragon-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes dragon-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 動きを抑える設定の利用者には控えめに */
@media (prefers-reduced-motion: reduce) {
  .dragon__beam, .dragon__figure, .dragon__label, .overlay--active { animation-duration: .01ms; animation-iteration-count: 1; }
}