/* ============================================================
   スーパー麻雀 — スタイル（stage-1g-2）

   見た目は body[data-theme] で切り替える:
     pixel   … ドット絵/マスコット（既定・公開時の顔。Claude Design テーマA）
     classic … 麻雀卓スキン
     dev     … 開発用のテキストUI（stage-1f までの見た目をそのまま残したもの）

   並び順: ① 共通（骨組み） → ② dev（開発用） → ③ classic（麻雀卓） → ④ pixel（ドット絵）
   共通ブロックには「どのテーマでも要る構造」だけを置き、色や大きさは各テーマ側で持つ。

   パレットはサイト本体（src/styles/global.css）と同じ値をコピーしている。
   このページは public/ 直置きのバニラ HTML なので Astro のCSSは読めない。
   ============================================================ */

/* ============================================================
   ① 共通
   ============================================================ */

:root {
  /* サイト本体と共通のパレット（dev テーマの土台） */
  --color-yellow: #e8b93c;
  --color-pink: #e0559a;
  --color-bg: #17171b;
  --color-surface: #1c1c22;
  --color-border: #2a2a32;
  --color-text-mid: #c9c9d1;
  --color-text-dim: #8b8b96;
  --color-text-faint: #55555f;

  /* 麻雀卓テーマ（classic）用。緑フェルトと象牙色の牌 */
  --felt-light: #35785a;
  --felt: #2a6549;
  --felt-dark: #205039;
  --felt-deep: #17402c;
  --ivory: #f4f1de;
  --ivory-mid: #eae5cd;
  --ivory-edge: #c6bf9f;
  --ivory-side: #cdc4a1;
  --ink: #26262c;
  --ink-red: #b5342c;
  --ink-green: #1d6b3d;
  --ink-blue: #2b4f8e;
  --tile-back: #2b7a72;
  --tile-back-dark: #1d4f6b;
  --felt-text: #e7f0e8;
  --felt-text-dim: #b3c9ba;
  --gold: #ffe08a;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* hidden 属性を確実に効かせる。
   .row や .actions に display を書いているので、そのままだと作者側のスタイルが
   ブラウザ既定の [hidden]{display:none} に勝ってしまい、隠したい行が残る。 */
[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  color: #fff;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.7;
}

.wrap {
  max-width: 860px;
  margin: 0 auto;
}

h1 {
  font-family: 'DotGothic16', monospace;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--color-yellow);
}

/* タイトル行（見出し ＋ 見た目の切替ボタン） */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

button {
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-mid);
  padding: 5px 12px;
  cursor: pointer;
}

/* 牌を並べる行と箱。flex にしないと牌どうしの隙間が出ない */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
}

/* 牌の骨組み（見た目は各テーマ側）。
   .tile-face が中の文字（dev はこれをそのまま出し、classic は隠して意匠を描く）。 */
.tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

.tile.clickable {
  cursor: pointer;
}

/* ツモってきた牌は手牌から離して置く */
.drawn-gap {
  width: 14px;
  flex: none;
}

/* ドット絵は拡大しても にじませない（サイト本体の .pixelart と同じ約束） */
.pixelart {
  image-rendering: pixelated;
}

/* ドット絵テーマ専用の飾り。ほかのテーマでは最初から出さない
   （マスコット・上がりモーダルの紙吹雪・カードから飛び出すマスコット）。 */
.mascot,
.confetti,
.notice-mascot {
  display: none;
}

/* 対戦モードの切替ボタン（CPU対戦 / 2人で対戦 / 開発用）。
   ボタンの色そのものは各テーマの `.bar button` が持つ。ここは並べ方と現在地の印だけ。 */
.modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.modes button.current {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  cursor: default;
}

/* ── 受け渡し画面（?mode=2p・全テーマ共通） ─────────────
   1台を2人で回すので、手番が移ったら次の人が受け取るまで画面全体をふさぐ。
   前の人のツモ牌や手牌を次の人に見せないための覆いなので、**必ず不透明**にする
   （上がりモーダル z-index:30 よりも上に置く）。 */
.handoff {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--color-bg);
  cursor: pointer;
}

.handoff-card {
  text-align: center;
  max-width: 420px;
}

.handoff-to {
  font-family: 'DotGothic16', monospace;
  font-size: 28px;
  line-height: 1.4;
  color: var(--color-yellow);
}

.handoff-note {
  font-size: 13px;
  color: var(--color-text-dim);
  margin: 10px 0 20px;
}

/* 覆いのどこを押しても外れるが、押す場所が分かるようにボタンも置く */
#handoff-ok {
  font-size: 16px;
  background: var(--color-pink);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 3px 0 #a03569;
  color: #fff;
  padding: 12px 24px;
}

/* オンライン対戦の入り口（ロビー）029便。.handoff と同じ全画面の覆い */
.lobby {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--color-bg);
  overflow-y: auto;
}
.lobby-card {
  text-align: center;
  max-width: 460px;
  width: 100%;
}
.lobby-title {
  font-family: 'DotGothic16', monospace;
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-yellow);
  margin: 0 0 12px;
}
.lobby-lead {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-dim);
  margin: 0 0 20px;
}
.lobby-main {
  font-size: 18px;
  background: var(--color-pink);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 3px 0 #a03569;
  color: #fff;
  padding: 14px 28px;
  cursor: pointer;
}
.lobby-join {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lobby-join-label {
  font-size: 13px;
  color: var(--color-text-dim);
}
.lobby-join input,
.lobby-link input {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #4a4a52;
  background: #1d1d22;
  color: #eee;
}
.lobby-join input {
  min-width: 150px;
}
.lobby-join button,
.lobby-link button {
  font-size: 14px;
  font-weight: 700;
  background: var(--color-yellow);
  border: 0;
  border-radius: 8px;
  color: #241a00;
  padding: 8px 14px;
  cursor: pointer;
}
.lobby-link {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
}
.lobby-link input {
  flex: 1;
  min-width: 0;
  max-width: 320px;
}
.lobby-status {
  font-size: 14px;
  color: var(--color-yellow);
  margin: 8px 0 0;
}

/* ============================================================
   ② テーマ dev = 開発用のテキストUI（stage-1f までの見た目）
   ============================================================ */

body[data-theme='dev'] {
  background: var(--color-bg);
  padding: 24px 16px 64px;
}

[data-theme='dev'] .lead {
  color: var(--color-text-dim);
  font-size: 13px;
  margin-bottom: 20px;
}

/* ── 操作バー（シード指定・配り直し） ───────────── */
[data-theme='dev'] .bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

[data-theme='dev'] .bar label {
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: var(--color-text-dim);
}

/* 「CPUの手を見る」（開発用のチェックボックス） */
[data-theme='dev'] .bar label.peek {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
}

[data-theme='dev'] .bar label.peek input {
  width: auto;
  accent-color: var(--color-pink);
  cursor: pointer;
}

[data-theme='dev'] .bar input {
  width: 120px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: #fff;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  padding: 4px 8px;
}

[data-theme='dev'] button:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

/* ── 持ち点（画面上部に常時表示） ───────────── */
[data-theme='dev'] .score {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

[data-theme='dev'] .score .player {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px 14px;
  font-family: 'DotGothic16', monospace;
}

/* その局の親の枠を光らせる */
[data-theme='dev'] .score .player.dealer {
  border-color: var(--color-yellow);
}

[data-theme='dev'] .score .player.dealer .player-name::after {
  content: ' 親';
  color: var(--color-yellow);
}

[data-theme='dev'] .score .player-name {
  font-size: 14px;
  color: var(--color-text-dim);
}

[data-theme='dev'] .score .player-points {
  font-size: 20px;
  color: #fff;
}

/* 直前の局で動いた点 */
[data-theme='dev'] .score .player-delta {
  font-size: 13px;
}

[data-theme='dev'] .score .player-delta.plus {
  color: var(--color-yellow);
}

[data-theme='dev'] .score .player-delta.minus {
  color: var(--color-pink);
}

/* ── 場の情報 ───────────────────────────────── */
[data-theme='dev'] .status {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 16px;
  font-family: 'DotGothic16', monospace;
}

[data-theme='dev'] .status .round {
  font-size: 18px;
  color: var(--color-yellow);
}

[data-theme='dev'] .status .turn {
  font-size: 18px;
  color: var(--color-pink);
}

[data-theme='dev'] .status .meta {
  font-size: 13px;
  color: var(--color-text-dim);
}

/* ── 各家のパネル ───────────────────────────── */
[data-theme='dev'] .seat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

[data-theme='dev'] .seat.active {
  border-color: var(--color-pink);
}

[data-theme='dev'] .seat h2 {
  font-family: 'DotGothic16', monospace;
  font-size: 15px;
  color: var(--color-yellow);
  margin-bottom: 8px;
}

[data-theme='dev'] .seat.active h2::after {
  content: ' ← 手番';
  color: var(--color-pink);
}

[data-theme='dev'] .row {
  margin-bottom: 8px;
}

[data-theme='dev'] .row-label {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: var(--color-text-faint);
  width: 3.5em;
  flex: none;
}

/* ── 牌 ─────────────────────────────────────── */
[data-theme='dev'] .tile {
  font-family: 'DotGothic16', monospace;
  font-size: 20px;
  min-width: 38px;
  height: 50px;
  background: #efeee7;
  color: #22222a;
  border: 1px solid #b9b8ae;
  border-bottom-width: 3px;
  border-radius: 5px;
  padding: 0 6px;
}

[data-theme='dev'] .tile.clickable:hover {
  background: var(--color-yellow);
  transform: translateY(-4px);
}

/* 河（捨て牌）は少し小さく・暗く */
[data-theme='dev'] .tile.small {
  font-size: 15px;
  min-width: 28px;
  height: 36px;
  border-bottom-width: 2px;
  background: #cfcec6;
}

/* 山は伏せて置く（引く順番が見えると検証にならない） */
[data-theme='dev'] .tile.back {
  background: #3a3a46;
  border-color: #4a4a58;
}

[data-theme='dev'] .tile.drawn {
  box-shadow: 0 0 0 2px var(--color-pink);
}

/* ポンでもらった牌（さらした明刻の3枚目）。相手から来たことが分かるように枠を付ける */
[data-theme='dev'] .tile.from-river {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 2px rgba(224, 85, 154, 0.5);
}

/* 鳴かれた河の牌は薄くする（河には残したまま印だけ付ける） */
[data-theme='dev'] .tile.called {
  opacity: 0.3;
}

/* 暗槓の4枚（本来は両端2枚を伏せるが、デバッグ版なので表向き＋黄枠で示す） */
[data-theme='dev'] .tile.ankan {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 2px rgba(232, 185, 60, 0.5);
}

[data-theme='dev'] .empty {
  font-size: 12px;
  color: var(--color-text-faint);
}

/* テンパイ表示（デバッグ用・両家とも見える） */
[data-theme='dev'] .tenpai {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: var(--color-pink);
  margin: -2px 0 8px;
}

/* ── ツモ / ロン / ポン / カン のボタン ───────── */
[data-theme='dev'] .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-pink);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

[data-theme='dev'] .actions-label {
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: var(--color-pink);
  margin-right: 4px;
}

[data-theme='dev'] button.call.primary {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: #fff;
  font-size: 15px;
  padding: 6px 20px;
}

[data-theme='dev'] button.call.primary:hover {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-bg);
}

/* ── 流局・上がりの告知 ─────────────────────── */
[data-theme='dev'] .notice {
  font-family: 'DotGothic16', monospace;
  font-size: 20px;
  color: var(--color-bg);
  background: var(--color-yellow);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  text-align: center;
}

[data-theme='dev'] .notice .result-shape {
  font-size: 15px;
  margin-top: 2px;
}

/* 完成した5枚 */
[data-theme='dev'] .notice .result-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 6px;
}

/* 役の内訳（清一色 6飜 …）。横並びで折り返す */
[data-theme='dev'] .notice .result-yaku {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: center;
  font-size: 14px;
  margin: 8px 0 4px;
}

[data-theme='dev'] .notice .result-yaku li {
  list-style: none;
  background: rgba(28, 28, 34, 0.14);
  border-radius: 4px;
  padding: 0 8px;
}

[data-theme='dev'] .notice .result-total {
  font-size: 18px;
}

[data-theme='dev'] .notice .result-move {
  font-size: 13px;
  margin-bottom: 4px;
}

[data-theme='dev'] .notice .result-note {
  font-size: 12px;
  opacity: 0.75;
}

/* 「次の局へ」「もう一度」 */
[data-theme='dev'] .notice .result-next {
  margin-top: 10px;
}

/* ── ログ ───────────────────────────────────── */
[data-theme='dev'] .log {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--color-text-mid);
}

[data-theme='dev'] .log h2 {
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: var(--color-text-faint);
  margin-bottom: 6px;
}

[data-theme='dev'] .log li {
  list-style: none;
  border-bottom: 1px dotted var(--color-border);
  padding: 2px 0;
}

[data-theme='dev'] .foot {
  margin-top: 20px;
  font-size: 12px;
  color: var(--color-text-faint);
}

/* ============================================================
   ③ テーマ classic = 麻雀卓（既定・公開時の顔）
   卓は緑フェルト・牌は象牙色。落ち着いた「本物の卓」風。
   ============================================================ */

body[data-theme='classic'] {
  background: radial-gradient(
    120% 90% at 50% 6%,
    var(--felt-light) 0%,
    var(--felt) 40%,
    var(--felt-dark) 72%,
    var(--felt-deep) 100%
  );
  background-attachment: fixed;
  color: var(--felt-text);
  padding: 12px 10px 36px;
}

/* 卓の縁の暗がり（ビネット）。最背面に固定で敷き、操作の邪魔はしない */
body[data-theme='classic']::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(115% 90% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.42) 100%);
}

/* 卓の上の並び順は flex の order で決める（HTML の順番は dev のまま触らない）。
   上＝相手 → 中央＝山と河 → 下＝自分の手牌、の順に見えるようにする。 */
[data-theme='classic'] .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

[data-theme='classic'] .head {
  order: 0;
  margin-bottom: 8px;
}

/* 開発向けの長い説明文は卓では出さない（?theme=dev 側で読める） */
[data-theme='classic'] .lead {
  display: none;
}

[data-theme='classic'] .board-head {
  order: 1;
}
[data-theme='classic'] .notice {
  order: 2;
}
[data-theme='classic'] .seat.opp {
  order: 4;
}
[data-theme='classic'] #seat-wall {
  order: 5;
}
[data-theme='classic'] .seat.you {
  order: 6;
}
[data-theme='classic'] .actions {
  order: 7;
}
[data-theme='classic'] .log {
  order: 8;
}
[data-theme='classic'] .bar {
  order: 9;
}
[data-theme='classic'] .foot {
  order: 10;
}

[data-theme='classic'] .head h1 {
  font-size: 20px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

[data-theme='classic'] #theme-toggle {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--felt-text);
}

[data-theme='classic'] #theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── ヘッダー（局・本場・持ち点・山残・嶺上） ───── */
[data-theme='classic'] .board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

[data-theme='classic'] .board-head .score,
[data-theme='classic'] .board-head .status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: 'DotGothic16', monospace;
}

[data-theme='classic'] .score .player {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 2px 10px;
}

[data-theme='classic'] .score .player.dealer {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 1px rgba(232, 185, 60, 0.35);
}

[data-theme='classic'] .score .player-name {
  font-size: 12px;
  color: var(--felt-text-dim);
}

/* 持ち点は「あなた / CPU」で読めるようにする（A・B だけだとどちらか迷う）。
   data-role は game.js が付ける。デバッグ版（両家とも手動）では付かない。 */
[data-theme='classic'] .score .player[data-role='you'] .player-name::before {
  content: 'あなた ';
}

[data-theme='classic'] .score .player[data-role='cpu'] .player-name::before {
  content: 'CPU ';
}

[data-theme='classic'] .score .player.dealer .player-name::after {
  content: ' 親';
  color: var(--color-yellow);
}

[data-theme='classic'] .score .player-points {
  font-size: 18px;
  color: #fff;
}

[data-theme='classic'] .score .player-delta {
  font-size: 12px;
}

[data-theme='classic'] .score .player-delta.plus {
  color: var(--color-yellow);
}

[data-theme='classic'] .score .player-delta.minus {
  color: #ff9ec8;
}

[data-theme='classic'] .status .round {
  font-size: 16px;
  color: var(--gold);
}

[data-theme='classic'] .status .turn {
  font-size: 13px;
  color: #ffd8ea;
}

[data-theme='classic'] .status .meta {
  font-size: 11px;
  color: var(--felt-text-dim);
}

/* ── 各家の場所 ─────────────────────────────
   相手（上）: 見出し → 手牌（裏）＋鳴き → 河
   自分（下）: 見出し → 河 → 手牌 ＋鳴き
   こうすると両家の河が卓の中央で向かい合う。 */
[data-theme='classic'] .seat {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'title title'
    'hand melds'
    'tenpai tenpai'
    'river river';
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}

[data-theme='classic'] .seat.you {
  grid-template-areas:
    'title title'
    'river river'
    'tenpai tenpai'
    'hand melds';
}

[data-theme='classic'] .seat h2 {
  grid-area: title;
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  font-weight: normal;
  color: var(--felt-text-dim);
  margin: 0;
}

[data-theme='classic'] .seat.active h2 {
  color: var(--gold);
}

[data-theme='classic'] .seat.active h2::after {
  content: ' ← 手番';
  color: var(--gold);
}

[data-theme='classic'] .row-hand {
  grid-area: hand;
}
[data-theme='classic'] .row-meld {
  grid-area: melds;
}
[data-theme='classic'] .tenpai {
  grid-area: tenpai;
}
[data-theme='classic'] .row-river {
  grid-area: river;
}

[data-theme='classic'] .row-hand .tiles {
  justify-content: center;
  gap: 4px;
}

/* 河は格子状に並べる（本物の卓と同じ。6枚で折り返す） */
[data-theme='classic'] .row-river .tiles {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: center;
  gap: 4px;
  min-height: 40px;
}

[data-theme='classic'] .row-meld .tiles {
  flex: none;
  gap: 2px;
}

/* 「手牌」「河」のラベルは卓では出さない（見れば分かる）。
   鳴き・山・嶺上は何の列か分からないので小さく残す。 */
[data-theme='classic'] .row-label {
  display: none;
}

[data-theme='classic'] .row-meld .row-label,
[data-theme='classic'] .row-wall .row-label,
[data-theme='classic'] .row-deadwall .row-label {
  display: inline;
  width: auto;
  flex: none;
  font-family: 'DotGothic16', monospace;
  font-size: 11px;
  color: var(--felt-text-dim);
}

[data-theme='classic'] .tenpai {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: var(--gold);
  margin: 0;
  text-align: center;
}

[data-theme='classic'] .empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

/* ── 山と嶺上（卓の中央） ───────────────────── */
[data-theme='classic'] #seat-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  margin: 6px 0 8px;
}

[data-theme='classic'] #seat-wall h2 {
  display: none;
}

[data-theme='classic'] #seat-wall .row {
  gap: 5px;
}

[data-theme='classic'] #seat-wall .tiles {
  flex: none;
  gap: 3px;
}

[data-theme='classic'] #seat-wall .tile {
  width: 20px;
  height: 28px;
  border-bottom-width: 3px;
}

/* ── 牌（象牙色の角丸タイル） ───────────────────
   中の意匠は ::before で描く（dev 用のテキスト .tile-face は隠す）。
   大きさは font-size を基準にした em で書いてあるので、
   小さい牌（河・山）でも意匠の比率が崩れない。 */
[data-theme='classic'] .tile {
  width: 42px;
  height: 56px;
  font-size: 22px;
  border-radius: 6px;
  padding: 0;
  background: linear-gradient(#fffdf3 0%, var(--ivory) 55%, var(--ivory-mid) 100%);
  border: 1px solid var(--ivory-edge);
  border-bottom: 4px solid var(--ivory-side);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  transition:
    transform 0.08s ease-out,
    filter 0.08s ease-out;
}

/* 手牌はいちばん大きく（触る牌なので） */
[data-theme='classic'] .row-hand .tile {
  width: 46px;
  height: 62px;
  font-size: 24px;
}

[data-theme='classic'] .tile.small {
  width: 28px;
  height: 38px;
  font-size: 15px;
  border-bottom-width: 3px;
}

/* dev のテキスト表記（6m・白 など）は卓では出さない */
[data-theme='classic'] .tile-face {
  display: none;
}

/* 萬子は漢数字＋萬の2段組み（\A で改行している） */
[data-theme='classic'] .tile[data-tile]::before {
  content: '';
  white-space: pre;
  text-align: center;
  line-height: 1.02;
}

[data-theme='classic'] .tile[data-tile='6m']::before {
  content: '六\A萬';
  font-size: 0.62em;
}

[data-theme='classic'] .tile[data-tile='7m']::before {
  content: '七\A萬';
  font-size: 0.62em;
}

/* 發（緑）・中（赤）は1文字を大きく */
[data-theme='classic'] .tile[data-tile='6z']::before {
  content: '發';
  color: var(--ink-green);
  font-size: 0.95em;
  font-weight: 700;
}

[data-theme='classic'] .tile[data-tile='7z']::before {
  content: '中';
  color: var(--ink-red);
  font-size: 0.95em;
  font-weight: 700;
}

/* 白は文字なし。青い枠だけの白牌 */
[data-theme='classic'] .tile[data-tile='5z']::before {
  content: '';
  width: 0.55em;
  height: 0.95em;
  border: 0.09em solid var(--ink-blue);
  border-radius: 0.06em;
}

/* 索子は竹の縦棒。4s = 2列×2段 / 8s = 4列×2段
   （棒1本を ::before で描き、box-shadow で残りを複製している） */
[data-theme='classic'] .tile[data-tile='4s']::before,
[data-theme='classic'] .tile[data-tile='8s']::before {
  content: '';
  width: 0.18em;
  height: 0.6em;
  border-radius: 0.09em;
  /* 複製（box-shadow）は単色になるので、元の1本も単色にして見た目をそろえる */
  background: var(--ink-green);
}

[data-theme='classic'] .tile[data-tile='4s']::before {
  box-shadow:
    0.42em 0 var(--ink-green),
    0 0.78em var(--ink-green),
    0.42em 0.78em var(--ink-green);
  transform: translate(-0.21em, -0.39em);
}

[data-theme='classic'] .tile[data-tile='8s']::before {
  box-shadow:
    0.42em 0 var(--ink-green),
    0.84em 0 var(--ink-green),
    1.26em 0 var(--ink-green),
    0 0.78em var(--ink-green),
    0.42em 0.78em var(--ink-green),
    0.84em 0.78em var(--ink-green),
    1.26em 0.78em var(--ink-green);
  transform: translate(-0.63em, -0.39em);
}

/* 裏面（CPU の伏せ手・山・伏せた嶺上）。緑〜青の無地 */
[data-theme='classic'] .tile.back {
  background: linear-gradient(150deg, var(--tile-back) 0%, var(--tile-back-dark) 100%);
  border-color: rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

/* 打てる牌は明るく、ホバー/タップで浮く */
[data-theme='classic'] .tile.clickable:hover,
[data-theme='classic'] .tile.clickable:focus-visible {
  transform: translateY(-7px);
  filter: brightness(1.06);
  box-shadow:
    0 9px 12px rgba(0, 0, 0, 0.4),
    0 0 0 2px var(--color-yellow),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 打てないとき（相手の手番）は少し沈める */
[data-theme='classic'] .row-hand .tile:not(.clickable) {
  transform: translateY(3px);
  filter: brightness(0.93) saturate(0.95);
}

/* ツモってきた牌（少し離して置くのは .drawn-gap 側） */
[data-theme='classic'] .tile.drawn {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.4),
    0 0 0 2px var(--color-yellow),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ポンでもらった牌（さらした明刻の3枚目）は横向きに寝かせる（本物の卓と同じ印） */
[data-theme='classic'] .tile.from-river {
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(224, 85, 154, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 鳴かれた河の牌は薄く（河には残したまま印だけ付ける） */
[data-theme='classic'] .tile.called {
  opacity: 0.34;
}

/* 暗槓の4枚（本来は両端2枚を伏せるが、今は4枚とも表向き＋金の枠で示す） */
[data-theme='classic'] .tile.ankan {
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(232, 185, 60, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── ツモ / ロン / ポン / カン のボタン ─────────
   役割で色を分ける: 上がり=黄 / 鳴き=ピンク / 見送り・進行=グレー */
[data-theme='classic'] .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0 10px;
}

[data-theme='classic'] .actions-label {
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: var(--gold);
  width: 100%;
  text-align: center;
}

[data-theme='classic'] button.call {
  font-size: 15px;
  padding: 9px 18px;
  min-width: 84px;
  border-radius: 10px;
}

[data-theme='classic'] button[data-kind='win'] {
  background: linear-gradient(#f3cf62, #dfa72c);
  border-color: #b9861f;
  color: #2a2114;
}

[data-theme='classic'] button[data-kind='call'] {
  background: linear-gradient(#ea6ea9, #cf3f85);
  border-color: #a92e69;
  color: #fff;
}

[data-theme='classic'] button[data-kind='skip'],
[data-theme='classic'] button[data-kind='next'] {
  background: linear-gradient(#77857d, #4e5a53);
  border-color: #3a443e;
  color: #f0f4f0;
}

[data-theme='classic'] button:hover {
  filter: brightness(1.1);
}

/* ── 上がり・流局の告知（一番の見せ場） ───────── */
[data-theme='classic'] .notice {
  font-family: 'DotGothic16', monospace;
  background: linear-gradient(#fff6dc, #f2d98c);
  color: #2a2114;
  border: 1px solid #b78f3c;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  padding: 14px 14px 12px;
  margin: 0 0 10px;
  text-align: center;
  animation: sm-pop 0.24s ease-out;
}

@keyframes sm-pop {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* 「視差効果を減らす」設定のときは動かさない */
@media (prefers-reduced-motion: reduce) {
  [data-theme='classic'] .notice {
    animation: none;
  }
  [data-theme='classic'] .tile {
    transition: none;
  }
}

/* 流局は静かに、対局終了は落ち着いた色で */
[data-theme='classic'] .notice[data-kind='draw'] {
  background: linear-gradient(#eef1ee, #cbd5cd);
  border-color: #8a9a92;
}

[data-theme='classic'] .notice[data-kind='over'] {
  background: linear-gradient(#fdf1d5, #e8c98d);
}

/* 役満・三倍満は枠を強くして「特別」を出す */
[data-theme='classic'] .notice[data-tier='big'] {
  border: 2px solid #fff3c4;
  box-shadow:
    0 0 0 3px rgba(232, 185, 60, 0.45),
    0 12px 28px rgba(0, 0, 0, 0.5);
}

[data-theme='classic'] .notice .result-head {
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

[data-theme='classic'] .notice .result-shape {
  font-size: 13px;
  opacity: 0.8;
}

[data-theme='classic'] .notice .result-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin: 10px 0 8px;
}

[data-theme='classic'] .notice .result-yaku {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  justify-content: center;
  font-size: 15px;
  margin: 8px 0 6px;
}

[data-theme='classic'] .notice .result-yaku li {
  list-style: none;
  background: rgba(42, 33, 20, 0.12);
  border-radius: 5px;
  padding: 1px 10px;
}

[data-theme='classic'] .notice .result-total {
  font-size: 24px;
  letter-spacing: 0.02em;
}

[data-theme='classic'] .notice .result-move {
  font-size: 14px;
  margin-top: 2px;
}

[data-theme='classic'] .notice .result-note {
  font-size: 12px;
  opacity: 0.7;
}

[data-theme='classic'] .notice .result-next {
  margin-top: 10px;
}

/* ── ログ・操作バー・脚注（卓では控えめに） ─────── */
[data-theme='classic'] .log {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 150px;
  overflow-y: auto;
  font-size: 12px;
  color: #dbe7dd;
}

[data-theme='classic'] .log h2 {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  font-weight: normal;
  color: var(--felt-text-dim);
  margin-bottom: 4px;
}

[data-theme='classic'] .log li {
  list-style: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
  padding: 1px 0;
}

[data-theme='classic'] .bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 10px;
}

[data-theme='classic'] .bar label {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: var(--felt-text-dim);
}

[data-theme='classic'] .bar label.peek {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
}

[data-theme='classic'] .bar label.peek input {
  width: auto;
  accent-color: var(--color-pink);
  cursor: pointer;
}

[data-theme='classic'] .bar input {
  width: 110px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  padding: 4px 8px;
}

[data-theme='classic'] .bar button {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--felt-text);
}

[data-theme='classic'] .foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--felt-text-dim);
  opacity: 0.8;
}

/* ── スマホ縦（360〜430px を想定） ───────────────
   手牌と鳴きが横に並ぶと窮屈なので、1列に積み替える。 */
@media (max-width: 560px) {
  body[data-theme='classic'] {
    padding: 10px 8px 28px;
  }

  [data-theme='classic'] .seat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'title'
      'hand'
      'melds'
      'tenpai'
      'river';
  }

  [data-theme='classic'] .seat.you {
    grid-template-areas:
      'title'
      'river'
      'tenpai'
      'melds'
      'hand';
  }

  [data-theme='classic'] .row-meld .tiles {
    justify-content: center;
  }

  [data-theme='classic'] .tile {
    width: 34px;
    height: 46px;
    font-size: 18px;
    border-bottom-width: 3px;
  }

  [data-theme='classic'] .row-hand .tile {
    width: 38px;
    height: 52px;
    font-size: 20px;
  }

  [data-theme='classic'] .tile.small {
    width: 24px;
    height: 33px;
    font-size: 13px;
    border-bottom-width: 2px;
  }

  [data-theme='classic'] #seat-wall .tile {
    width: 17px;
    height: 24px;
    border-bottom-width: 2px;
  }

  [data-theme='classic'] .drawn-gap {
    width: 10px;
  }

  [data-theme='classic'] .head h1 {
    font-size: 17px;
  }

  [data-theme='classic'] .notice .result-head {
    font-size: 19px;
  }

  [data-theme='classic'] .notice .result-total {
    font-size: 21px;
  }
}

/* ============================================================
   ④ テーマ pixel = ドット絵/マスコット（既定・公開時の顔）
   Claude Design のテーマA（docs/games/theme-a.dc.html）を見た目の正として実装。
   色・寸法・牌の意匠・レイアウトはデザインに合わせ、
   素材は public/assets/ のものを絶対パスで参照する。
   ============================================================ */

body[data-theme='pixel'] {
  background: var(--color-bg);
  color: #fff;
  padding: 10px 10px 20px;
}

/* 縦積み。ログとマスコットだけ横に並べたいので、grid で2列を用意して
   ふつうの行は2列ぶち抜き・ログとマスコットだけ左右に置く。
   並べ替え（order）は flex と同じように効く。 */
[data-theme='pixel'] .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 8px;
  max-width: 460px;
}

/* .board-area は display:contents なので中身が .wrap の孫になる。
   セレクタは DOM を見るので `.wrap > *` には当たらない。列いっぱいの指定を孫にも同じく効かせる
   （これが無いと通知・鳴きボタン・両家の席が左半分に縮む） */
[data-theme='pixel'] .wrap > *,
[data-theme='pixel'] .board-area > * {
  grid-column: 1 / -1;
}

[data-theme='pixel'] .head {
  order: 0;
}
[data-theme='pixel'] .board-head {
  order: 1;
}
[data-theme='pixel'] .seat.opp {
  order: 2;
}
[data-theme='pixel'] .log {
  order: 3;
  grid-column: 1;
}
[data-theme='pixel'] .mascot {
  order: 4;
  grid-column: 2;
}
[data-theme='pixel'] .notice {
  order: 5;
}
[data-theme='pixel'] .seat.you {
  order: 6;
}
[data-theme='pixel'] .actions {
  order: 7;
}
[data-theme='pixel'] .bar {
  order: 8;
}
[data-theme='pixel'] .foot {
  order: 9;
}

/* 開発向けの長い説明と、山・嶺上の実物の列は出さない
   （山と嶺上の残り枚数はヘッダーの「山 n 枚 ／ 嶺上 n 枚」で読める） */
[data-theme='pixel'] .lead,
[data-theme='pixel'] #seat-wall {
  display: none;
}

[data-theme='pixel'] .head h1 {
  font-size: 20px;
  color: var(--color-yellow);
}

[data-theme='pixel'] #theme-toggle {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-text-dim);
}

[data-theme='pixel'] #theme-toggle:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

/* ── ヘッダー（局・本場・山/嶺上）と持ち点 ───────── */
[data-theme='pixel'] .board-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* 場の情報（東n局・手番・山と嶺上）。デザインの1行目のパネル */
[data-theme='pixel'] .status {
  order: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 10px;
  margin: 0;
  font-family: 'DotGothic16', monospace;
}

[data-theme='pixel'] .status .round {
  font-size: 17px;
  color: var(--color-yellow);
}

[data-theme='pixel'] .status .turn {
  font-size: 12px;
  color: var(--color-pink);
}

[data-theme='pixel'] .status .meta {
  font-size: 11px;
  color: var(--color-text-dim);
  margin-left: auto;
}

/* 持ち点（デザインの2行目。あなた＝黄枠 / CPU＝灰枠） */
[data-theme='pixel'] .score {
  order: 1;
  display: flex;
  gap: 8px;
  margin: 0;
}

[data-theme='pixel'] .score .player {
  flex: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'DotGothic16', monospace;
}

[data-theme='pixel'] .score .player[data-role='you'] {
  border-color: var(--color-yellow);
}

[data-theme='pixel'] .score .player.dealer {
  box-shadow: inset 0 0 0 1px var(--color-yellow);
}

[data-theme='pixel'] .score .player-name {
  font-size: 12px;
  color: var(--color-text-dim);
}

[data-theme='pixel'] .score .player[data-role='you'] .player-name {
  color: var(--color-yellow);
}

/* 「A」「B」だけだとどちらが自分か分からないので名前を足す（classic と同じ） */
[data-theme='pixel'] .score .player[data-role='you'] .player-name::before {
  content: 'あなた ';
}

[data-theme='pixel'] .score .player[data-role='cpu'] .player-name::before {
  content: 'CPU ';
}

[data-theme='pixel'] .score .player.dealer .player-name::after {
  content: ' 親';
  color: var(--color-yellow);
}

[data-theme='pixel'] .score .player-points {
  font-size: 18px;
  color: #fff;
}

[data-theme='pixel'] .score .player-delta {
  font-size: 11px;
}

[data-theme='pixel'] .score .player-delta.plus {
  color: var(--color-yellow);
}

[data-theme='pixel'] .score .player-delta.minus {
  color: var(--color-pink);
}

/* ── 各家のゾーン ───────────────────────────────
   相手（上）: 見出し → 伏せ手＋鳴き → 河
   自分（下）: 見出し＋テンパイ → 河 → 鳴き → 手牌 */
[data-theme='pixel'] .seat {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 10px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'title title'
    'hand melds'
    'tenpai tenpai'
    'river river';
  align-items: center;
  gap: 7px 10px;
}

[data-theme='pixel'] .seat.you {
  grid-template-areas:
    'title tenpai'
    'river river'
    'melds melds'
    'hand hand';
}

[data-theme='pixel'] .seat.you.active {
  border-color: var(--color-yellow);
}

[data-theme='pixel'] .seat.opp.active {
  border-color: var(--color-pink);
}

[data-theme='pixel'] .seat h2 {
  grid-area: title;
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  font-weight: normal;
  color: var(--color-text-dim);
  margin: 0;
}

[data-theme='pixel'] .seat.you h2 {
  color: var(--color-yellow);
}

/* 手番の印はデザインどおり小さなバッジで（自分＝黄・相手＝ピンクで揺れる） */
[data-theme='pixel'] .seat.active h2::after {
  content: 'この人の手番';
  margin-left: 6px;
  font-size: 11px;
  border-radius: 4px;
  padding: 1px 8px;
  color: var(--color-bg);
  background: var(--color-yellow);
  white-space: nowrap;
}

[data-theme='pixel'] .seat.you.active h2::after {
  content: 'あなたの手番';
}

[data-theme='pixel'] .seat.opp.active h2::after {
  content: '考え中…';
  background: var(--color-pink);
  animation: sm-bob 1s steps(2) infinite;
}

[data-theme='pixel'] .row-hand {
  grid-area: hand;
}
[data-theme='pixel'] .row-meld {
  grid-area: melds;
}
[data-theme='pixel'] .tenpai {
  grid-area: tenpai;
}
[data-theme='pixel'] .row-river {
  grid-area: river;
}

[data-theme='pixel'] .seat.you .row-hand .tiles {
  gap: 5px;
}

[data-theme='pixel'] .row-river .tiles {
  gap: 4px;
  min-height: 38px;
}

[data-theme='pixel'] .row-meld .tiles {
  flex: none;
  gap: 3px;
}

/* 「手牌」「河」のラベルは出さない（見れば分かる）。鳴き・暗槓だけ小さく残す */
[data-theme='pixel'] .row-label {
  display: none;
}

[data-theme='pixel'] .row-meld .row-label {
  display: inline;
  width: auto;
  flex: none;
  font-family: 'DotGothic16', monospace;
  font-size: 10px;
  color: var(--color-pink);
}

[data-theme='pixel'] .tenpai {
  font-family: 'DotGothic16', monospace;
  font-size: 11px;
  color: var(--color-pink);
  margin: 0;
  text-align: right;
}

[data-theme='pixel'] .seat.you .tenpai::before {
  content: '★ ';
}

[data-theme='pixel'] .empty {
  font-size: 11px;
  color: var(--color-text-faint);
}

/* ── 牌（象牙色のドット絵タイル） ─────────────────
   意匠は ::before（数字・字）と ::after（萬 / 索 / 竹の縦棒）で描く。
   寸法はすべて em 基準なので、大きい牌でも小さい牌でも比率が崩れない。 */
[data-theme='pixel'] .tile {
  flex-direction: column;
  gap: 0.04em;
  width: 34px;
  height: 46px;
  font-family: 'DotGothic16', monospace;
  font-size: 17px;
  background: #f2eedf;
  color: #22222a;
  border: 2px solid var(--color-surface);
  border-radius: 5px;
  box-shadow:
    inset 0 -5px 0 #cfc9b4,
    0 3px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.1s;
}

/* 自分の手牌がいちばん大きい（触る牌なので） */
[data-theme='pixel'] .seat.you .row-hand .tile {
  width: 60px;
  height: 80px;
  font-size: 26px;
}

/* 河（.small）とさらした面子は小さく、影も浅く */
[data-theme='pixel'] .tile.small,
[data-theme='pixel'] .row-meld .tile {
  width: 28px;
  height: 38px;
  font-size: 15px;
  border-radius: 3px;
  box-shadow:
    inset 0 -3px 0 #cfc9b4,
    0 2px 0 rgba(0, 0, 0, 0.5);
}

/* 上がり告知に並ぶ完成形の5枚 */
[data-theme='pixel'] .notice .result-tiles .tile {
  width: 40px;
  height: 54px;
  font-size: 20px;
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 #cfc9b4;
}

/* dev のテキスト表記（6m・白 など）はドット絵テーマでは出さない */
[data-theme='pixel'] .tile-face {
  display: none;
}

[data-theme='pixel'] .tile[data-tile]::before {
  line-height: 1;
}

/* 萬子: 大きい数字＋下に小さく「萬」（赤） */
[data-theme='pixel'] .tile[data-tile='6m']::before {
  content: '6';
}

[data-theme='pixel'] .tile[data-tile='7m']::before {
  content: '7';
}

[data-theme='pixel'] .tile[data-tile='6m']::after,
[data-theme='pixel'] .tile[data-tile='7m']::after {
  content: '萬';
  font-size: 0.5em;
  line-height: 1;
  color: #c64a3f;
}

/* 索子: 緑の数字。小さい牌は「索」の字、大きい手牌は竹の縦棒で描く */
[data-theme='pixel'] .tile[data-tile='4s']::before {
  content: '4';
  color: #4fa05a;
}

[data-theme='pixel'] .tile[data-tile='8s']::before {
  content: '8';
  color: #4fa05a;
}

[data-theme='pixel'] .tile[data-tile='4s']::after,
[data-theme='pixel'] .tile[data-tile='8s']::after {
  content: '索';
  font-size: 0.5em;
  line-height: 1;
  color: #4fa05a;
}

/* 竹の縦棒（4s = 4本 / 8s = 2段×4本）。
   1本を ::after で描き、残りは box-shadow で複製している */
[data-theme='pixel'] .seat.you .row-hand .tile[data-tile='4s']::after,
[data-theme='pixel'] .seat.you .row-hand .tile[data-tile='8s']::after {
  content: '';
  width: 0.19em;
  height: 0.42em;
  margin-top: 0.08em;
  border-radius: 0.04em;
  background: #4fa05a;
}

[data-theme='pixel'] .seat.you .row-hand .tile[data-tile='4s']::after {
  box-shadow:
    0.27em 0 #4fa05a,
    0.54em 0 #4fa05a,
    0.81em 0 #4fa05a;
  transform: translateX(-0.405em);
}

[data-theme='pixel'] .seat.you .row-hand .tile[data-tile='8s']::after {
  height: 0.35em;
  box-shadow:
    0.27em 0 #4fa05a,
    0.54em 0 #4fa05a,
    0.81em 0 #4fa05a,
    0 0.43em #4fa05a,
    0.27em 0.43em #4fa05a,
    0.54em 0.43em #4fa05a,
    0.81em 0.43em #4fa05a;
  transform: translate(-0.405em, -0.215em);
}

/* 字牌: 白・發（緑）・中（赤） */
[data-theme='pixel'] .tile[data-tile='5z']::before {
  content: '白';
  font-size: 1.2em;
}

[data-theme='pixel'] .tile[data-tile='6z']::before {
  content: '發';
  font-size: 1.2em;
  color: #4fa05a;
}

[data-theme='pixel'] .tile[data-tile='7z']::before {
  content: '中';
  font-size: 1.2em;
  color: #c64a3f;
}

/* 裏牌（CPU の伏せ手・山・伏せた嶺上）。薄くマスコットを透かす */
[data-theme='pixel'] .tile.back {
  background: #23232b;
  border-color: #101014;
  box-shadow:
    inset 0 -4px 0 #17171b,
    0 3px 0 rgba(0, 0, 0, 0.5);
}

[data-theme='pixel'] .tile.back::before {
  content: '';
  width: 62%;
  height: 62%;
  background: url('/assets/mascot/mascot_open_32.png') center / contain no-repeat;
  image-rendering: pixelated;
  opacity: 0.55;
}

/* 打てる牌は触ると浮く */
[data-theme='pixel'] .tile.clickable:hover,
[data-theme='pixel'] .tile.clickable:focus-visible {
  transform: translateY(-6px);
}

/* ツモってきた牌は離して置き（.drawn-gap）、金の光をゆっくり点滅させる */
[data-theme='pixel'] .tile.drawn:not(.back) {
  animation: sm-popglow 1.2s steps(2) infinite;
}

/* CPU のツモ牌（伏せたまま）は光らせず、金の細枠だけ付ける */
[data-theme='pixel'] .tile.back.drawn {
  box-shadow:
    inset 0 -4px 0 #17171b,
    0 0 0 2px rgba(232, 185, 60, 0.5),
    0 3px 0 rgba(0, 0, 0, 0.5);
}

[data-theme='pixel'] .seat.you .row-hand .tile.drawn {
  transform: translateY(-6px);
}

[data-theme='pixel'] .seat.you .row-hand .tile.drawn.clickable:hover {
  transform: translateY(-10px);
}

@keyframes sm-popglow {
  0%,
  100% {
    box-shadow:
      inset 0 -5px 0 #cfc9b4,
      0 0 0 2px var(--color-yellow),
      0 3px 0 rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      inset 0 -5px 0 #cfc9b4,
      0 0 0 4px var(--color-yellow),
      0 3px 0 rgba(0, 0, 0, 0.5);
  }
}

@keyframes sm-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* ポンでもらった牌はピンク枠、暗槓の4枚は金枠 */
[data-theme='pixel'] .tile.from-river {
  border-color: var(--color-pink);
  box-shadow:
    inset 0 -3px 0 #cfc9b4,
    0 0 0 2px rgba(224, 85, 154, 0.4);
}

[data-theme='pixel'] .tile.ankan {
  border-color: var(--color-yellow);
  box-shadow:
    inset 0 -3px 0 #cfc9b4,
    0 0 0 2px rgba(232, 185, 60, 0.4);
}

/* 鳴かれた河の牌は薄く（河には残したまま印だけ付ける） */
[data-theme='pixel'] .tile.called {
  opacity: 0.3;
}

/* ── 中央: ログの吹き出し ＋ マスコット ───────────── */
[data-theme='pixel'] .log {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 10px 10px 10px 2px;
  padding: 8px 12px;
  max-height: 96px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--color-text-mid);
}

[data-theme='pixel'] .log h2 {
  display: none;
}

[data-theme='pixel'] .log li {
  list-style: none;
  padding: 1px 0;
}

[data-theme='pixel'] .mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  align-self: center;
}

[data-theme='pixel'] .mascot img {
  width: 72px;
  height: 72px;
  animation: sm-bob 1.6s ease-in-out infinite;
}

[data-theme='pixel'] .mascot-word {
  font-family: 'DotGothic16', monospace;
  font-size: 10px;
  color: var(--color-yellow);
  white-space: nowrap;
}

/* ── ツモ / ロン / ポン / カン のボタン ─────────────
   役割で色を分ける: 上がり=黄 / 鳴き=ピンク / 見送り・進行=グレー */
[data-theme='pixel'] .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-surface);
  border: 2px solid var(--color-pink);
  border-radius: 10px;
  padding: 10px;
  margin: 0;
}

[data-theme='pixel'] .actions-label {
  width: 100%;
  text-align: center;
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: var(--color-pink);
}

[data-theme='pixel'] button {
  font-family: 'DotGothic16', monospace;
  border: 2px solid var(--color-surface);
  border-radius: 8px;
}

[data-theme='pixel'] button.call {
  font-size: 16px;
  padding: 10px 18px;
  min-width: 88px;
}

[data-theme='pixel'] button[data-kind='win'] {
  background: var(--color-yellow);
  color: var(--color-bg);
  box-shadow: 0 3px 0 #9a7a24;
}

[data-theme='pixel'] button[data-kind='call'] {
  background: var(--color-pink);
  color: #fff;
  box-shadow: 0 3px 0 #933564;
}

[data-theme='pixel'] button[data-kind='skip'],
[data-theme='pixel'] button[data-kind='next'] {
  background: var(--color-border);
  color: var(--color-text-dim);
  box-shadow: 0 3px 0 #101014;
}

[data-theme='pixel'] button.call:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* ── 流局・対局終了のバナー ─────────────────────── */
[data-theme='pixel'] .notice {
  font-family: 'DotGothic16', monospace;
  background: var(--color-surface);
  border: 2px solid var(--color-text-faint);
  border-radius: 10px;
  padding: 12px;
  margin: 0;
  text-align: center;
  color: var(--color-text-mid);
}

/* 対局終了は落ち着いた金 */
[data-theme='pixel'] .notice[data-kind='over'] {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

[data-theme='pixel'] .notice .result-head {
  font-size: 20px;
  line-height: 1.35;
}

[data-theme='pixel'] .notice .result-shape {
  font-size: 12px;
  color: var(--color-text-dim);
}

[data-theme='pixel'] .notice .result-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin: 12px 0 10px;
}

[data-theme='pixel'] .notice .result-yaku {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  justify-content: center;
  font-size: 13px;
  margin: 8px 0 4px;
}

[data-theme='pixel'] .notice .result-yaku li {
  list-style: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 8px;
}

[data-theme='pixel'] .notice .result-total {
  font-size: 18px;
  margin-top: 6px;
}

[data-theme='pixel'] .notice .result-move {
  font-size: 12px;
  margin-top: 2px;
}

[data-theme='pixel'] .notice .result-note {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
}

[data-theme='pixel'] .notice .result-next {
  margin-top: 12px;
}

/* ── 上がりの告知（ドット絵テーマ・盤面インライン） ──
   外枠 = .notice ／ カード = .notice-card。
   カードの上辺からマスコットが飛び出し、後ろに紙吹雪が降る。 */
[data-theme='pixel'] .notice[data-kind='win'] {
  /* 全画面モーダルをやめ、盤面インライン表示に（上がっても手牌・河が見える） */
  position: relative;
  z-index: 1;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 52px; /* カード上辺から飛び出すマスコットのぶんの余白 */
  overflow: visible;
}

[data-theme='pixel'] .notice[data-kind='win'] .notice-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  margin: 0 auto; /* 中央寄せ（マスコットのぶんの縦余白は .notice 側で確保） */
  background: var(--color-yellow);
  color: var(--color-bg);
  border: 3px solid var(--color-surface);
  border-radius: 14px;
  box-shadow: 0 6px 0 #9a7a24;
  padding: 18px 16px;
  animation: sm-pop 0.24s ease-out;
}

[data-theme='pixel'] .notice[data-kind='win'] .result-head {
  font-size: 26px;
  letter-spacing: 0.04em;
}

[data-theme='pixel'] .notice[data-kind='win'] .result-shape,
[data-theme='pixel'] .notice[data-kind='win'] .result-note {
  color: var(--color-bg);
  opacity: 0.75;
}

[data-theme='pixel'] .notice[data-kind='win'] .result-yaku li {
  background: rgba(28, 28, 34, 0.14);
}

[data-theme='pixel'] .notice[data-kind='win'] .result-total {
  font-size: 20px;
}

/* 金のカードの上では「次の局へ」を暗い色に反転させる（デザインどおり） */
[data-theme='pixel'] .notice[data-kind='win'] button[data-kind='next'] {
  background: var(--color-surface);
  color: var(--color-yellow);
  box-shadow: 0 3px 0 #000;
}

[data-theme='pixel'] .notice-mascot {
  display: block;
  width: 96px;
  height: 96px;
  margin: -58px auto 2px;
}

[data-theme='pixel'] .confetti {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

[data-theme='pixel'] .confetti span {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  background: var(--color-yellow);
  animation: sm-confetti 2.4s linear infinite;
}

[data-theme='pixel'] .confetti span:nth-child(1) {
  left: 8%;
}
[data-theme='pixel'] .confetti span:nth-child(2) {
  left: 22%;
  width: 8px;
  height: 8px;
  background: var(--color-pink);
  animation-duration: 2.8s;
  animation-delay: 0.4s;
}
[data-theme='pixel'] .confetti span:nth-child(3) {
  left: 38%;
  background: #4fa05a;
  animation-duration: 2.4s;
  animation-delay: 0.9s;
}
[data-theme='pixel'] .confetti span:nth-child(4) {
  left: 55%;
  width: 8px;
  height: 8px;
  animation-duration: 3s;
  animation-delay: 0.2s;
}
[data-theme='pixel'] .confetti span:nth-child(5) {
  left: 70%;
  background: var(--color-pink);
  animation-duration: 2.6s;
  animation-delay: 1.1s;
}
[data-theme='pixel'] .confetti span:nth-child(6) {
  left: 86%;
  width: 8px;
  height: 8px;
  animation-duration: 2.3s;
  animation-delay: 0.6s;
}

@keyframes sm-confetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(720deg);
    opacity: 0;
  }
}

/* ── 操作バー・脚注（ドット絵テーマでは控えめに） ───── */
[data-theme='pixel'] .bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 4px 0 0;
}

[data-theme='pixel'] .bar label {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: var(--color-text-dim);
}

[data-theme='pixel'] .bar label.peek {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
}

[data-theme='pixel'] .bar label.peek input {
  width: auto;
  accent-color: var(--color-pink);
  cursor: pointer;
}

[data-theme='pixel'] .bar input {
  width: 110px;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  color: #fff;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  padding: 4px 8px;
}

[data-theme='pixel'] .bar button {
  background: var(--color-bg);
  color: var(--color-text-dim);
  box-shadow: 0 2px 0 #101014;
}

[data-theme='pixel'] .foot {
  font-size: 11px;
  color: var(--color-text-faint);
}

/* 「視差効果を減らす」設定のときは動かさない */
@media (prefers-reduced-motion: reduce) {
  [data-theme='pixel'] .tile,
  [data-theme='pixel'] .tile.drawn:not(.back),
  [data-theme='pixel'] .mascot img,
  [data-theme='pixel'] .confetti span,
  [data-theme='pixel'] .seat.opp.active h2::after,
  [data-theme='pixel'] .notice[data-kind='win'] .notice-card {
    animation: none;
    transition: none;
  }
}

/* ── 狭い画面（〜400px）───────────────────────────
   自分の手牌は最大6枚（暗槓後の単騎でも5枚＋ツモ）並ぶので少し縮める。 */
@media (max-width: 400px) {
  [data-theme='pixel'] .seat.you .row-hand .tile {
    width: 50px;
    height: 68px;
    font-size: 22px;
  }

  [data-theme='pixel'] .mascot img {
    width: 60px;
    height: 60px;
  }

  [data-theme='pixel'] .drawn-gap {
    width: 8px;
  }
}

/* 背の低い画面では上がりモーダルを上寄せにする（中央寄せだと上が切れるため） */
@media (max-height: 660px) {
  [data-theme='pixel'] .notice[data-kind='win'] {
    align-items: flex-start;
  }
}

/* 役一覧モーダル 038便 */
.yaku-open {
  font-size: 13px;
  font-weight: 700;
  background: var(--color-yellow);
  color: #241a00;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.yaku-overlay {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 15, 18, 0.85);
  overflow-y: auto;
}
.yaku-card {
  background: var(--color-bg);
  border: 2px solid var(--color-yellow);
  border-radius: 12px;
  max-width: 460px;
  width: 100%;
  padding: 16px 18px;
  max-height: 86vh;
  overflow-y: auto;
}
.yaku-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.yaku-title {
  font-family: 'DotGothic16', monospace;
  color: var(--color-yellow);
  font-size: 20px;
  margin: 0;
}
.yaku-close {
  font-size: 13px;
  background: var(--color-pink);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
.yaku-section {
  font-size: 14px;
  color: var(--color-yellow);
  margin: 14px 0 6px;
  border-bottom: 1px solid #4a4a52;
  padding-bottom: 3px;
}
.yaku-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.yaku-table td {
  padding: 4px 6px;
  vertical-align: top;
  border-bottom: 1px solid #33333a;
  color: #ddd;
}
.yaku-table .yaku-name {
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}
.yaku-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-dim);
  margin: 12px 0 0;
}

/* 役一覧モーダル内「詳しいルール」リンク 040便 */
.yaku-more {
  margin: 16px 0 2px;
  text-align: center;
}
.yaku-more a {
  display: inline-block;
  font-size: 13px;
  color: var(--color-pink);
  text-decoration: none;
  border: 1px solid var(--color-pink);
  border-radius: 8px;
  padding: 8px 16px;
}
.yaku-more a:hover {
  background: rgba(224, 85, 154, 0.12);
}

/* board-area は既定で透過（他テーマ/モバイルは従来どおり動く） */
.board-area { display: contents; }

/* ===== PC 横長レイアウト（デスクトップ・classic麻雀卓） 便: sm-pc v2 ===== */
@media (min-width: 1024px) {
  [data-theme='classic'] .wrap {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 26px;
    row-gap: 12px;
    align-items: start;
  }
  [data-theme='classic'] .lead { display: none; }
  [data-theme='classic'] .head       { grid-column: 1; grid-row: 1; }
  [data-theme='classic'] .board-head { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; gap: 8px; }
  [data-theme='classic'] .bar        { grid-column: 1; grid-row: 3; }
  [data-theme='classic'] .log        { grid-column: 1; grid-row: 4; align-self: stretch; max-height: 340px; overflow: auto; }
  [data-theme='classic'] .foot       { grid-column: 1; grid-row: 5; }
  [data-theme='classic'] .board-area {
    grid-column: 2;
    grid-row: 1 / 6;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: radial-gradient(120% 90% at 50% 30%, rgba(60,120,80,0.30), rgba(20,50,32,0.34) 70%, rgba(12,34,22,0.40));
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    box-shadow: inset 0 0 70px rgba(0,0,0,0.40);
    padding: 26px 20px;
    min-height: 560px;
  }
  [data-theme='classic'] .board-area .notice   { order: 0; }
  [data-theme='classic'] .board-area .seat.opp { order: 1; }
  [data-theme='classic'] .board-area #seat-wall{ order: 2; }
  [data-theme='classic'] .board-area .seat.you { order: 3; }
  [data-theme='classic'] .board-area .actions  { order: 4; }
  [data-theme='classic'] .board-area .seat { width: 100%; max-width: 660px; }
  [data-theme='classic'] .board-area .row { justify-content: center; }
}

/* PC横長: 牌を大きく（意匠が崩れないよう font-size も一緒に上げる） 便: sm-pc v2 */
@media (min-width: 1024px) {
  [data-theme='classic'] .board-area .tile { width: 58px; height: 78px; font-size: 30px; }
  [data-theme='classic'] .board-area .row-hand .tile { width: 66px; height: 88px; font-size: 34px; }
  [data-theme='classic'] .board-area #seat-wall .tile { width: 28px; height: 40px; }
  [data-theme='classic'] .board-area .tile.small { width: 40px; height: 54px; font-size: 21px; }
  [data-theme='classic'] .board-area .seat h2 { font-size: 15px; }
  [data-theme='classic'] .board-area .row { margin: 7px 0; }
  [data-theme='classic'] .board-area .row-label { min-width: 2.6em; }
}

/* ===== PC横長: ドット絵テーマ 便: sm-pc v2 ===== */
@media (min-width: 1024px) {
  [data-theme='pixel'] .wrap {
    max-width: 1200px;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 24px;
    row-gap: 12px;
    align-content: start;
    align-items: start;
    position: relative;
  }
  [data-theme='pixel'] .wrap > * { grid-column: auto; }
  [data-theme='pixel'] .lead { display: none; }
  [data-theme='pixel'] .head       { grid-column: 1; grid-row: 1; }
  [data-theme='pixel'] .board-head { grid-column: 1; grid-row: 2; }
  [data-theme='pixel'] .bar        { grid-column: 1; grid-row: 3; }
  [data-theme='pixel'] .log        { grid-column: 1; grid-row: 4; align-self: stretch; max-height: 320px; overflow: auto; }
  [data-theme='pixel'] .foot       { grid-column: 1; grid-row: 5; }
  [data-theme='pixel'] .board-area {
    grid-column: 2; grid-row: 1 / 6; align-self: stretch;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: #14141a; border: 1px solid #2a2a32; border-radius: 16px;
    background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1.4px);
    background-size: 22px 22px;
    padding: 28px 22px; min-height: 560px; position: relative;
  }
  [data-theme='pixel'] .board-area .notice   { order: 0; }
  [data-theme='pixel'] .board-area .seat.opp { order: 1; }
  [data-theme='pixel'] .board-area .actions  { order: 2; }
  [data-theme='pixel'] .board-area .seat.you { order: 3; }
  [data-theme='pixel'] .board-area .seat { width: 100%; max-width: 640px; }
  [data-theme='pixel'] .board-area .row { justify-content: center; }
  /* マスコットは盤の右下に */
  [data-theme='pixel'] .mascot {
    grid-column: 2; grid-row: 1 / 6;
    align-self: end; justify-self: end;
    margin: 0 22px 20px 0; z-index: 3; flex-direction: column; text-align: center;
  }
  /* 牌を大きく */
  [data-theme='pixel'] .board-area .tile { width: 58px; height: 78px; }
  [data-theme='pixel'] .board-area .row-hand .tile { width: 64px; height: 86px; }
}


/* ═══════════════════════════════════════════════════════════════
   タイトル画面 ＋ ルールパネル（便066）
   ・タイトル: 起動時に出る。「遊ぶ」「ルール説明」
   ・ルール : PC(≥1280px) は右にドッキング（背景を暗くせず盤面を操作できる）
             スマホ/狭い画面は重ねて表示（背景を暗くする）
   ═══════════════════════════════════════════════════════════════ */

html { overflow-x: hidden; }

:root{
  --rz-bg:#1b1b21; --rz-card:#24242c; --rz-line:#34343e;
  --rz-yellow:#e8b93c; --rz-pink:#e0559a; --rz-green:#6ac47a;
  --rz-text:#ececee; --rz-dim:#9a9aa6;
}

/* ── ゲーム中の「ルール」ボタン（ヘッダーに置く・目立つ） ── */
#rules-btn{
  font: inherit; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:999px; cursor:pointer;
  background:var(--rz-pink); color:#fff; border:none;
  box-shadow:0 3px 10px rgba(224,85,154,.35);
  white-space:nowrap; line-height:1;
}
#rules-btn:hover{ filter:brightness(1.07); }
#rules-btn:active{ transform:translateY(1px); }
#rules-btn.on{ background:var(--rz-card); color:var(--rz-pink); box-shadow:inset 0 0 0 1.5px var(--rz-pink); }

/* ── タイトル画面 ── */
#start-screen{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 50% 32%, #2a2a34 0%, #16161b 62%, #0d0d11 100%);
}
#start-screen[hidden]{ display:none; }
#start-screen::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:20px 20px;
}
.ss-card{ position:relative; width:100%; max-width:440px; text-align:center; }
.ss-eyebrow{ font-size:12px; letter-spacing:.34em; color:var(--rz-dim); margin:0 0 14px; }
.ss-logo{
  font-family:'DotGothic16', monospace; color:var(--rz-yellow);
  font-size:clamp(38px,10vw,60px); letter-spacing:.05em; margin:0 0 12px;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.ss-sub{ color:#cfcfd6; font-size:14.5px; line-height:1.85; margin:0 0 34px; }
.ss-btns{ display:flex; flex-direction:column; gap:13px; align-items:center; }
.ss-btn{
  font-family:'DotGothic16', monospace; font-size:19px; letter-spacing:.04em;
  width:min(300px,100%); padding:15px 20px; border-radius:14px; cursor:pointer;
  border:2px solid transparent; transition:transform .08s, filter .15s, background .15s;
}
.ss-btn:active{ transform:translateY(1.5px); }
.ss-btn.play{ background:var(--rz-yellow); color:#1a1a1f; box-shadow:0 5px 0 #b28524; }
.ss-btn.play:hover{ filter:brightness(1.05); }
.ss-btn.rules{ background:transparent; color:var(--rz-text); border-color:#4a4a56; box-shadow:0 5px 0 rgba(0,0,0,.25); }
.ss-btn.rules:hover{ border-color:var(--rz-pink); color:#fff; }
.ss-foot{ margin:26px 0 0; font-size:12px; color:var(--rz-dim); line-height:1.7; }

/* ── ルールの背景（スマホのみ暗くする） ── */
#rules-backdrop{
  position:fixed; inset:0; z-index:190; background:rgba(6,6,10,.55);
  opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s;
}
body.rules-open #rules-backdrop{ opacity:1; visibility:visible; }

/* ── ルールパネル（既定＝重ねて表示） ── */
#rules-panel{
  position:fixed; top:0; right:0; height:100%; width:min(430px,100%);
  z-index:195; background:var(--rz-bg); color:var(--rz-text);
  border-left:1px solid var(--rz-line); box-shadow:-14px 0 44px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overscroll-behavior:contain;
}
body.rules-open #rules-panel{ transform:translateX(0); }
.rp-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--rz-line); background:#191920;
}
.rp-title{ font-family:'DotGothic16',monospace; color:var(--rz-yellow); font-size:19px; margin:0; letter-spacing:.04em; }
.rp-close{
  font:inherit; font-size:15px; background:transparent; color:var(--rz-dim);
  border:1px solid var(--rz-line); border-radius:8px; padding:6px 12px; cursor:pointer;
}
.rp-close:hover{ color:#fff; border-color:var(--rz-pink); }
.rp-body{ flex:1 1 auto; overflow-y:auto; padding:8px 18px 30px; line-height:1.7; font-size:14px; }
.rp-body h3{
  font-family:'DotGothic16',monospace; color:var(--rz-yellow); font-size:15.5px;
  margin:22px 0 6px; padding-bottom:6px; border-bottom:2px solid var(--rz-line);
}
.rp-body h3:first-child{ margin-top:12px; }
.rp-body p{ margin:8px 0; }
.rp-tiles{ font-family:'DotGothic16',monospace; color:var(--rz-green); letter-spacing:.05em; }
.rp-body ul{ margin:8px 0; padding-left:20px; }
.rp-body li{ margin:5px 0; }
.rp-body code{ background:#2c2c35; border-radius:5px; padding:1px 6px; font-size:.9em; color:var(--rz-yellow); }
.rp-body table{ width:100%; border-collapse:collapse; font-size:13px; margin:6px 0; }
.rp-body th,.rp-body td{ text-align:left; padding:6px 6px; border-bottom:1px solid var(--rz-line); vertical-align:top; }
.rp-body th{ color:var(--rz-dim); font-weight:500; font-size:12px; }
.rp-name{ font-weight:700; color:#fff; white-space:nowrap; }
.rp-han{ color:var(--rz-yellow); font-weight:700; white-space:nowrap; }
.rp-han.ykm{ color:var(--rz-pink); }
.rp-dim{ color:var(--rz-dim); font-size:.9em; }
.rp-more{
  display:inline-block; margin:18px 0 0; font-size:13px; color:var(--rz-pink);
  text-decoration:none; border:1px solid var(--rz-pink); border-radius:8px; padding:8px 14px;
}
.rp-more:hover{ background:rgba(224,85,154,.12); }

/* ── PC(≥1280px): 右にドッキング（背景暗転なし・盤面操作可） ── */
@media (min-width:1280px){
  body{ transition:padding-right .3s cubic-bezier(.4,0,.2,1); }
  body.rules-open{ padding-right:380px; }
  #rules-panel{ width:380px; box-shadow:-10px 0 30px rgba(0,0,0,.32); }
  body.rules-open #rules-backdrop{ opacity:0; visibility:hidden; }  /* PCは暗くしない */
}

/* ── ヘッダー微調整: ルールボタンは見出しの下に置く（便066） ── */
.head{ flex-wrap:wrap; align-items:center; }
.head h1{ white-space:nowrap; }
#theme-toggle{ order:2; }
#rules-btn{ order:3; flex:1 0 100%; justify-content:center; margin-top:6px; }
/* PC横長でも同様に全幅（サイドバー内） */
@media (min-width:1024px){
  #rules-btn{ flex:1 0 100%; }
}

/* ── フッター折りたたみ ＋ 1画面フィット（便067） ── */
details.foot{ border:none; padding:0; }
details.foot > summary{
  cursor:pointer; list-style:none; font-size:12px; color:var(--color-text-dim,#9a9aa6);
  padding:3px 0; display:inline-flex; align-items:center; gap:6px; opacity:.72;
}
details.foot > summary::-webkit-details-marker{ display:none; }
details.foot > summary::before{ content:'▸'; font-size:10px; }
details.foot[open] > summary::before{ content:'▾'; }
details.foot > summary:hover{ opacity:1; }
.foot-body{ margin-top:6px; font-size:12px; line-height:1.6; color:var(--color-text-dim,#9a9aa6); }

/* PC(≥1024px)で .wrap を画面高さに合わせて縮小し、縦スクロールをなくす */
@media (min-width:1024px){
  body.fit-on{ height:100vh; overflow:hidden; }
  body.fit-on .wrap{ transform-origin: top center; will-change: transform; }
}