/* 字の大きさ(#186)。標準 / 大(112.5%)/ 特大(125%)。字の指定の九割がたは rem なので、
   根の字を変えればまとめて効く。盤と札そのもの(px で組んである)は変わらない ―― 盤は
   道具の「盤の大きさ」で変える。当てるのは public/font-scale.js(描く前)と settings.js
   (切り替えたとき)。解説ページ(/games)は台本を読まないので、ブラウザの拡大に任せる。 */
html[data-font-scale="large"] { font-size: 112.5%; }
html[data-font-scale="xlarge"] { font-size: 125%; }

/* 盤・札・賽の見た目の土台。色と寸法のトークンそのものは styles/tokens.css に
   あり(解説ページと分け合っているため)、このファイルはそれを使う側。 */


/* --- 行灯の盤 ---
   夜の対局。盤の灯を落とし、先手は象牙・後手は暗い木地にして、駒の向き
   ではなく色で手番が分かれる。将棋の器の中だけに掛けるので、同じトークン
   を読んでいるチェスの王手は昼のままでいる。 */
body.board-dark .shogi-container {
  --shogi-frame-a: #2f2118;
  --shogi-frame-b: #17100b;
  --shogi-frame-edge: var(--shop-brass-deep);
  --shogi-frame-sheen: rgba(221, 192, 127, 0.14);
  --shogi-frame-drop: rgba(0, 0, 0, 0.45);
  --shogi-board-a: #2c2018;
  --shogi-board-b: #211710;
  --shogi-board-grain: linear-gradient(transparent, transparent);
  --shogi-board-sheen:
    radial-gradient(120% 90% at 50% 0%, rgba(221, 192, 127, 0.1), transparent 62%);
  --shogi-line: rgba(221, 192, 127, 0.26);
  --shogi-line-edge: rgba(221, 192, 127, 0.45);
  --shogi-star: rgba(221, 192, 127, 0.55);
  --shogi-tray-a: #2f2118;
  --shogi-tray-b: #1b120c;
  --shogi-tray-border: rgba(221, 192, 127, 0.22);
  --shogi-tray-sheen: rgba(221, 192, 127, 0.1);
  --shogi-piece-a: #f6e8c4;
  --shogi-piece-b: #e9d5a6;
  --shogi-piece-flip-a: #6b4f34;
  --shogi-piece-flip-b: #4a3524;
  --shogi-piece-edge: #0f0a06;
  --shogi-piece-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  --shogi-piece-bevel:
    inset 0 -3px 5px rgba(0, 0, 0, 0.18),
    inset 0 2px 2px rgba(255, 252, 240, 0.5);
  --shogi-piece-bevel-flip:
    inset 0 3px 5px rgba(0, 0, 0, 0.18),
    inset 0 -2px 2px rgba(255, 252, 240, 0.5);
  --shogi-ink: #241a10;
  --shogi-ink-flip: #f2e4c2;
  --shogi-ink-red: #9c2b26;
  --shogi-ink-red-flip: #e59a80;
  --shogi-ink-weight: 700;
  --shogi-dot-gote-ring: 0 0 0 1px rgba(221, 192, 127, 0.45);
  --shogi-selected: rgba(221, 192, 127, 0.3);
  --shogi-legal: rgba(221, 192, 127, 0.7);
  --shogi-legal-ring: rgba(221, 192, 127, 0.85);
  --shogi-check: rgba(190, 58, 48, 0.55);
  --shogi-last-move: rgba(221, 192, 127, 0.13);
}

/* 同じ行灯をリバーシの卓にも。羅紗の灯を落として墨緑にし、罫と星は真鍮の
   細い光。黒石は盤に沈みやすいので、縁の照りだけ残して形を拾わせる。 */
body.board-dark .reversi-container {
  --reversi-frame-a: #2f2118;
  --reversi-frame-b: #17100b;
  --reversi-frame-edge: var(--shop-brass-deep);
  --reversi-frame-sheen: rgba(221, 192, 127, 0.14);
  --reversi-frame-drop: rgba(0, 0, 0, 0.5);
  --reversi-line: rgba(221, 192, 127, 0.18);
  --reversi-felt-a: #1a2b23;
  --reversi-felt-b: #14211b;
  --reversi-felt-nap: linear-gradient(transparent, transparent);
  --reversi-felt-sheen:
    radial-gradient(120% 90% at 50% 0%, rgba(221, 192, 127, 0.07), transparent 62%);
  --reversi-felt-hover: rgba(221, 192, 127, 0.08);
  --reversi-star: rgba(221, 192, 127, 0.55);
  --reversi-black: radial-gradient(circle at 36% 26%, #3b423d 0%, #1b201d 45%, #0a0c0b 100%);
  --reversi-black-bevel:
    inset 0 -3px 5px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(221, 192, 127, 0.3);
  --reversi-black-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(221, 192, 127, 0.35);
  --reversi-white: radial-gradient(circle at 36% 26%, #f8efd5 0%, #eadfbe 45%, #c9bb94 100%);
  --reversi-white-bevel:
    inset 0 -3px 5px rgba(90, 74, 46, 0.3),
    inset 0 2px 3px rgba(255, 252, 240, 0.85);
  --reversi-white-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  --reversi-legal: rgba(221, 192, 127, 0.8);
}

/* 五目並べの夜は将棋の夜と同じ行灯の盤。盤の灯を落として暗い木地にし、罫と
   星は真鍮の細い光。黒石は縁に真鍮の照りを残して盤から浮かせ、直前の手と
   五連も真鍮にする。 */
body.board-dark .gomoku-container {
  --gomoku-frame-a: #2f2118;
  --gomoku-frame-b: #17100b;
  --gomoku-frame-edge: var(--shop-brass-deep);
  --gomoku-frame-sheen: rgba(221, 192, 127, 0.14);
  --gomoku-frame-drop: rgba(0, 0, 0, 0.5);
  --gomoku-board-a: #2c2018;
  --gomoku-board-b: #211710;
  --gomoku-board-grain: linear-gradient(transparent, transparent);
  --gomoku-board-sheen:
    radial-gradient(120% 90% at 50% 0%, rgba(221, 192, 127, 0.1), transparent 62%);
  --gomoku-line: rgba(221, 192, 127, 0.3);
  --gomoku-line-edge: rgba(221, 192, 127, 0.5);
  --gomoku-star: rgba(221, 192, 127, 0.6);
  --gomoku-black: radial-gradient(circle at 36% 28%, #40463f 0%, #1b201d 45%, #0a0c0b 100%);
  --gomoku-black-sheen:
    radial-gradient(ellipse 34% 20% at 34% 26%, rgba(255, 255, 255, 0.18), transparent 100%);
  --gomoku-black-rim: rgba(221, 192, 127, 0.45);
  --gomoku-white: radial-gradient(circle at 36% 28%, #f8efd5 0%, #eadfbe 50%, #c9bb94 100%);
  --gomoku-white-stripes:
    repeating-radial-gradient(circle at -5% 180%,
      transparent 0 1.55px, rgba(120, 98, 60, 0.14) 1.55px 2.1px);
  --gomoku-stone-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
  --gomoku-last-on-black: #ddc07f;
  --gomoku-last-on-white: #8a6a1a;
  --gomoku-win: #f0d998;
  --gomoku-win-width: 2.2px;
  --gomoku-win-glow: rgba(221, 192, 127, 0.9);
  --gomoku-ghost-opacity: 0.4;
}

/* チェスの夜。枠も金物も駒の材も昼のままで、灯を落として盤の面だけ無彩に
   する ―― 木は灯りで色が変わるが、材は変わらないので。黄楊だけが灯りを
   受けて残り、黒檀は縁を温かい鼠にして暗いマスから輪郭で起き上がらせる。 */
body.board-dark .chess-container {
  --chess-frame-a: #2c2017;
  --chess-frame-b: #17100a;
  --chess-frame-edge: var(--shop-brass-deep);
  --chess-frame-sheen: rgba(221, 192, 127, 0.12);
  --chess-frame-drop: rgba(0, 0, 0, 0.5);
  --chess-board-edge: #17100a;
  /* 夜のマスは無彩まで落とさず、枠の胡桃と同じ方向の茶を一滴だけ残す。
     明るさは無彩案と同じで、色味だけ木へ寄せてある ―― 無彩にすると、
     胡桃の枠と真鍮に囲まれた盤だけが石板を嵌め込んだように見えるため。 */
  --chess-light: linear-gradient(160deg, #443f36, #3b372f);
  --chess-dark: linear-gradient(160deg, #221e19, #1a1713);
  --chess-hover: rgba(221, 192, 127, 0.08);
  --chess-coord: var(--shop-brass);
  --chess-last: rgba(226, 168, 58, 0.3);
  --chess-legal: rgba(226, 168, 58, 0.8);
  --chess-capture: rgba(196, 74, 64, 0.85);
  --chess-check: rgba(190, 58, 48, 0.5);
  --chess-white-face: #ead9b3;
  --chess-white-edge: #4a3115;
  --chess-white-line: #4a3115;
  --chess-white-bevel: #fff4d8;
  --chess-white-bevel-alpha: 0.4;
  --chess-black-face: #191410;
  --chess-black-edge: #6d6459;
  --chess-black-line: #9a9083;
  --chess-black-bevel: #3d362c;
  --chess-black-bevel-alpha: 0.5;
  --chess-piece-shadow: 0 2px 3px rgba(0, 0, 0, 0.55);
}

/* 夜の〇✕は帳面をしまって半紙を出す。紙の灯を落とすと墨は乗らないので、
   罫は穂先で引いた真鍮の細い光、手は胡粉の白。字は色ではなく形で分かれる
   ―― 半紙の上には一つの墨壺しかないので。 */
body.board-dark .ttt-board {
  --ttt-paper-a: #2b2419;
  --ttt-paper-b: #211b12;
  --ttt-paper-grain: linear-gradient(transparent, transparent);
  --ttt-paper-sheen:
    radial-gradient(120% 90% at 50% 0%, rgba(221, 192, 127, 0.09), transparent 62%);
  --ttt-board-edge:
    0 0 0 1px rgba(221, 192, 127, 0.22),
    0 10px 20px rgba(0, 0, 0, 0.45);
  --ttt-rule: rgba(221, 192, 127, 0.42);
  --ttt-ink-o: #f4ecd8;
  --ttt-ink-x: #f4ecd8;
  --ttt-win: #f4ecd8;
  --ttt-cell-hover: rgba(221, 192, 127, 0.07);
  --ttt-cell-win: rgba(221, 192, 127, 0.13);
  --ttt-ghost: 0.26;
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--shop-paper);
  color: var(--shop-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
}

/* iOS Safari の 100vh はアドレスバー等が畳まれた最大表示ぶんの高さで、
   実際に見えている高さ(dvh)より大きくなる。#top-screen 等は自分の丈を
   dvh に合わせて overflow:hidden にしているのに、この親を vh のままにする
   と親だけが伸びて下に余白ができ、指を離すまでの間だけそこへスクロール
   できてしまう(iPhoneで棚を見る画面の下に空白が出る不具合)。 */
#app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* =========================================================
   FLOATING TOOL CONTROLS — SE volume / board scale / rules
   Styled as objects left on the shop's table: a turned walnut
   counter with a brass rim, opening a washi slip of options.
   The look is shared by all three (.rules-toggle-btn lives in
   room.css, which only positions it); only the anchors differ.
   ========================================================= */
/* The tools stack up the right-hand edge of the table, above the gear tab:
   ?  /  board scale  /  SE  /  gear. Each control is anchored on its own, and
   opens its slip sideways into the clear space at its left, so a popup never
   covers another button. Only the SE control lives outside the room screen -
   every screen has sound - so body.in-room lifts it to make room for the rest. */
.se-control {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 5;
}
/* In a room the gear is a tab on the bottom edge, so the stack it reveals
   starts from the edge itself. */
body.in-room { --tool-stack-base: 0px; }
.se-control { bottom: var(--tool-stack-base); }

/* --- in a room the three settings live behind the gear ---
   Outside a room the sound button stands in the corner on its own: the gear is
   part of the room, and hiding the volume behind it everywhere would leave no
   way to reach it from the entrance or the lobby. */
body.in-room .se-control,
body.in-room .board-scale-control,
body.in-room .board-theme-control,
body.in-room .rules-control,
body.in-room .move-hints-control,
body.in-room .feedback-control { display: none; }
body.in-room.tools-open .se-control,
body.in-room.tools-open .board-scale-control:not(.hidden),
body.in-room.tools-open .board-theme-control:not(.hidden),
body.in-room.tools-open .rules-control:not(.hidden),
body.in-room.tools-open .move-hints-control:not(.hidden),
body.in-room.tools-open .feedback-control { display: block; }

body.in-room .se-control { bottom: calc(var(--tool-stack-base) + 58px); }
body.in-room .board-scale-control { bottom: calc(var(--tool-stack-base) + 116px); }
/* help sits above the two settings, and closes the gap when a card or dice
   game leaves no board to scale */
body.in-room .board-theme-control { bottom: calc(var(--tool-stack-base) + 174px); }
body.in-room .rules-control { bottom: calc(var(--tool-stack-base) + 174px); }
body.in-room.has-board-theme .rules-control { bottom: calc(var(--tool-stack-base) + 232px); }
body.in-room.no-board-scale .rules-control { bottom: calc(var(--tool-stack-base) + 116px); }
/* 手の手助け(issue #19)は、いつでも出ている一番上の一枚 ―― help の
   さらに上、それがどこにいようと(has-board-theme・no-board-scale の
   組み合わせも含めて)58px ぶん高いところに立つ。 */
body.in-room .move-hints-control { bottom: calc(var(--tool-stack-base) + 232px); }
body.in-room.has-board-theme .move-hints-control { bottom: calc(var(--tool-stack-base) + 290px); }
body.in-room.no-board-scale .move-hints-control { bottom: calc(var(--tool-stack-base) + 174px); }
body.in-room.has-board-theme.no-board-scale .move-hints-control { bottom: calc(var(--tool-stack-base) + 232px); }
/* 店主への便り(public/feedback.js)は手の手助けのさらに上、段のいちばん上。 */
body.in-room .feedback-control { bottom: calc(var(--tool-stack-base) + 290px); }
body.in-room.has-board-theme .feedback-control { bottom: calc(var(--tool-stack-base) + 348px); }
body.in-room.no-board-scale .feedback-control { bottom: calc(var(--tool-stack-base) + 232px); }
body.in-room.has-board-theme.no-board-scale .feedback-control { bottom: calc(var(--tool-stack-base) + 290px); }
/* 言葉の木札は店の外でだけ、音量の一つ上に立つ。卓の中では出さない
   (開き直すと卓の接続が一度切れる)。 */
.lang-control {
  position: fixed;
  right: 20px;
  bottom: calc(var(--tool-stack-base) + 58px);
  z-index: 5;
}
body.in-room .lang-control { display: none; }
/* 店の中(名札のある画面)では、効果音と言葉は名札の小札に入っている
   (player-menu.js)。右下の木札は入口でだけ立つ。 */
body.in-shop .se-control,
body.in-shop .lang-control { display: none; }
.lang-menu {
  position: absolute;
  right: 58px;
  bottom: 0;
  width: max-content;
}
/* max-content because an absolutely positioned box otherwise shrinks to fit
   its 48px-wide anchor and wraps the labels. */
.se-volume-menu {
  position: absolute;
  right: 58px;
  bottom: 0;
  width: max-content;
}

.board-scale-control {
  position: fixed;
  right: 20px;
  bottom: calc(var(--tool-stack-base) + 116px);
  z-index: 5;
}
.board-scale-control.hidden { display: none; }

.board-theme-control {
  position: fixed;
  right: 20px;
  bottom: calc(var(--tool-stack-base) + 174px);
  z-index: 5;
}
.board-theme-control.hidden { display: none; }
.board-scale-stepper {
  position: absolute;
  right: 58px;
  bottom: 0;
  width: max-content;
}

/* --- 木札: the round wooden buttons themselves --- */
.lang-toggle-btn,
.se-toggle-btn,
.board-scale-toggle-btn,
.board-theme-toggle-btn,
.rules-toggle-btn,
.tools-toggle-btn,
.move-hints-toggle-btn,
.feedback-toggle-btn {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--shop-walnut);
  background-image: var(--wood-sheen), var(--wood-grain);
  border: 1px solid var(--shop-brass);
  color: var(--shop-brass-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wood-shadow-button), 0 4px 12px rgba(36, 24, 16, 0.32);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.lang-toggle-btn:hover,
.se-toggle-btn:hover,
.board-scale-toggle-btn:hover,
.board-theme-toggle-btn:hover,
.rules-toggle-btn:hover,
.tools-toggle-btn:hover,
.move-hints-toggle-btn:hover,
.feedback-toggle-btn:hover {
  background-color: var(--shop-walnut-warm);
  transform: translateY(-2px);
  box-shadow: var(--wood-shadow-button), 0 7px 18px rgba(36, 24, 16, 0.36), 0 0 18px rgba(221, 192, 127, 0.3);
}
.lang-toggle-btn svg,
.se-toggle-btn svg,
.board-scale-toggle-btn svg,
.board-theme-toggle-btn svg,
.rules-toggle-btn svg,
.tools-toggle-btn svg,
.move-hints-toggle-btn svg,
.feedback-toggle-btn svg {
  width: 22px;
  height: 22px;
}
/* 日輪と三日月は一枚の木札の表と裏。盤が夜に入ると彫りが入れ替わる。
   隣の歯車も輪と光条の形なので、こちらは輪を塗って見分けをつけている。 */
.board-theme-toggle-btn .board-theme-moon,
body.board-dark .board-theme-toggle-btn .board-theme-sun { display: none; }
body.board-dark .board-theme-toggle-btn .board-theme-moon { display: block; }
.tools-toggle-btn.open {
  background-color: var(--shop-walnut-warm);
  box-shadow: var(--wood-shadow-button), 0 0 16px rgba(221, 192, 127, 0.32);
}
.se-mute-slash {
  opacity: 0;
}
.se-toggle-btn.muted .se-mute-slash {
  opacity: 1;
}
.move-hints-off-slash {
  opacity: 0;
}
.move-hints-toggle-btn.off .move-hints-off-slash {
  opacity: 1;
}
/* この卓では効かない(issue #31)。押せるままで、木札の色だけ抜く。 */
.move-hints-toggle-btn.inert {
  filter: grayscale(1);
  opacity: 0.5;
}

/* --- 短冊: the washi slip a button opens --- */
.se-volume-menu,
.lang-menu,
.board-scale-stepper {
  display: flex;
  border-radius: 3px;
  background-color: var(--shop-paper);
  background-image: var(--shop-paper-grain);
  border: 1px solid var(--shop-brass);
  box-shadow: 0 10px 24px rgba(36, 24, 16, 0.3);
}
.se-volume-menu {
  flex-direction: row;
  gap: 2px;
  padding: 6px;
}
.se-volume-menu.hidden,
.lang-menu.hidden,
.board-scale-stepper.hidden {
  display: none;
}
.se-volume-btn {
  min-width: 68px;
  padding: 7px 14px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.15s ease, color 0.15s ease;
}
.se-volume-btn:hover {
  background: rgba(180, 144, 63, 0.18);
}

/* 言葉の短冊は縦に一列。各言葉を自分の字で書くので、書体は店の書体を
   先に、その字を持たない言葉(ハングル・簡体字)は手元の書体へ落とす。 */
.lang-menu {
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}
.lang-option {
  display: block;
  min-width: 112px;
  padding: 7px 14px;
  border-radius: 2px;
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover {
  background: rgba(180, 144, 63, 0.18);
}

/* --- board scale stepper: one row of the same slip ---
   A dial rather than a list: minus / current zoom / plus, with 自動 kept
   apart by a hairline because it is a mode, not another rung. */
.board-scale-stepper {
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
}
.board-scale-step-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 1.05rem;
  line-height: 1;
  transition: background 0.15s ease;
}
.board-scale-step-btn:hover {
  background: rgba(180, 144, 63, 0.18);
}
.board-scale-step-btn:disabled {
  color: var(--shop-ink);
  opacity: 0.28;
  background: transparent;
  cursor: not-allowed;
}
.board-scale-value {
  min-width: 58px;
  text-align: center;
  font-family: var(--shop-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--shop-ink);
}
/* while auto is following the window the number is a readout, not a setting */
.board-scale-value.auto {
  color: var(--shop-ink-soft);
  font-weight: 400;
}
.board-scale-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 5px;
  background: var(--shop-paper-line);
}
.board-scale-auto-btn {
  padding: 7px 11px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--shop-ink-soft);
  font-family: var(--shop-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.15s ease, color 0.15s ease;
}
.board-scale-auto-btn:hover {
  background: rgba(180, 144, 63, 0.18);
  color: var(--shop-ink);
}
/* the setting in force reads as a 朱印 stamped onto the slip */
.se-volume-btn.active,
.lang-option.active,
.board-scale-auto-btn.active {
  background: var(--shop-seal);
  color: var(--shop-paper);
}

.screen {
  display: none;
}
.screen.active {
  display: block;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
}

.primary-btn {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.primary-btn:hover {
  background: var(--accent-hover);
}
.primary-btn:disabled {
  background: #4a5066;
  color: var(--text-dim);
  cursor: not-allowed;
}

.secondary-btn {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
.secondary-btn:hover {
  background: var(--border);
}
.secondary-btn:disabled {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
  cursor: not-allowed;
}

/* 待っている卓の「人を招く」(#271、waiting-table.js の placeInviteButton)。
   待ちの文の下に、真鍮の縁の小さめの釦。CPU と遊ぶ人の邪魔にならない格に
   とどめる(主の釦にしない)。どの卓の待ちの段にも同じ形で出る。
   卓の中の副の釦(room.css の .game-panel .secondary-btn)は透明の地に墨の字で、
   大富豪の緋毛氈や人狼の夜の卓では沈むので、その型は使わず紙の地を敷く。 */
#room-screen .invite-here-btn {
  display: block;
  margin: 10px auto 0;
  padding: 6px 18px;
  border: 1px solid var(--shop-brass);
  border-radius: 3px;
  background: var(--shop-paper-light);
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
#room-screen .invite-here-btn:hover { background: var(--shop-paper); }
/* スマホ縦の大富豪は山札の列が空席の札に挟まれて細い(100px ほど)。折れずに収める。 */
@media (max-width: 640px) {
  #room-screen .invite-here-btn { padding: 6px 12px; letter-spacing: 0.04em; }
}
#room-screen .invite-here-btn[hidden] { display: none; }

input, select {
  font: inherit;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  width: 100%;
}
input:focus, select:focus {
  outline: 2px solid var(--shop-pine);
}

label {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.required {
  color: var(--error);
}

.error-text {
  color: var(--error);
  min-height: 1.2em;
  font-size: 0.9rem;
  margin: 8px 0 0;
}

.modal-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0 0 14px;
}
.modal-hint.hidden { display: none; }

.status-text {
  color: var(--shop-ink-soft);
  min-height: 1.2em;
}


/* --- operator's banner (maintenance notices, wind-down countdown) ---
   A strip of paper pinned over the top of the shop. It takes part in the
   normal flow rather than floating, so it pushes the page down instead of
   covering the header - a notice that hides the way out is worse than none. */
.site-banner:empty { display: none; }

.banner-line {
  margin: 0;
  padding: 10px 24px;
  text-align: center;
  font-family: var(--shop-font-display);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--shop-ink);
  background-color: var(--shop-paper-deep);
  border-bottom: 1px solid var(--shop-paper-line);
}
.banner-line.hidden { display: none; }

.banner-line.warning {
  color: var(--shop-paper-light);
  background-color: var(--shop-burgundy);
  border-bottom-color: var(--shop-burgundy-deep);
}

/* --- 「ホーム画面に追加」の案内(issue #17) ---
   site-banner(お知らせ、上段で流れに参加する帯)とは違い、こちらは浮かせて
   画面の下に置く小さな札。何局か遊んだ人にだけ一度出て、閉じれば消える。 */
.install-banner {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  padding: 12px 10px 12px 16px;
  border-radius: var(--radius);
  background: var(--shop-walnut);
  color: var(--shop-paper);
  border: 1px solid var(--shop-brass);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.install-banner.hidden { display: none; }

.install-banner-text {
  margin: 0;
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.6;
}

.install-banner-action-btn {
  flex: none;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--shop-brass);
  background: var(--shop-brass);
  color: var(--shop-walnut-deep);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}
/* iPhone で出す「手順を見る」は紙への移動なので a。見た目はボタンに揃える。 */
a.install-banner-action-btn { text-decoration: none; }
.install-banner-action-btn:hover { background: var(--shop-brass-light); }
.install-banner-action-btn.hidden { display: none; }

.install-banner-close-btn {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--shop-paper);
  opacity: 0.65;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.install-banner-close-btn:hover { opacity: 1; }

/* A small picture placed above the prose in "あそびかた" - one look before
   the reading, for whoever has never sat at this game before. Empty and
   invisible for a game whose diagram has not been drawn yet. */
.rules-diagram {
  margin: 0 0 18px;
  padding: 14px 16px 12px;
  background: var(--shop-paper-light);
  border: 1px solid var(--shop-paper-line);
  border-radius: 10px;
}
.rules-diagram-art {
  display: flex;
  justify-content: center;
}
.rules-diagram-art > svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}
.rules-diagram figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--shop-ink-soft);
}

/* --- 点数表・役一覧とローカルルールの例 -----------------------------------
   組むのは public/rules-diagrams.mjs の ruleTableHtml / ruleExampleHtml。
   解説ページ(article.css)とアプリ(base.css)に同じものを置く。 */
.rt { margin: 0; }
.rt-lead { margin: 0 0 12px; }
.rt-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--shop-paper-light);
  border: 1px solid var(--shop-paper-line);
  font-size: 0.85rem;
  line-height: 1.55;
}
.rt-table thead th {
  padding: 7px 8px;
  background: var(--shop-paper-deep);
  border-bottom: 1px solid var(--shop-brass);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--shop-ink-soft);
  text-align: left;
}
.rt-table td,
.rt-table tbody th {
  padding: 9px 8px;
  border-top: 1px solid var(--shop-paper-line);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}
.rt-table .rt-pts { text-align: right; white-space: nowrap; }
/* 例の列は絵の幅で足りるので、役の名前の列に幅を回す。 */
.rt-table thead th:first-child { width: 42%; }
.rt-table td.rt-pts {
  font-family: var(--shop-font-display);
  font-weight: 700;
  color: var(--shop-seal-deep);
}
.rt-table .rt-group th {
  padding: 6px 8px;
  background: rgba(222, 208, 170, 0.35);
  font-family: var(--shop-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--shop-seal-deep);
}
.rt-name { display: block; font-weight: 700; color: var(--shop-ink); }
.rt-sub { display: block; font-size: 0.72rem; color: var(--shop-ink-soft); }
.rt-art { display: block; margin-bottom: 4px; border-radius: 6px; }
.rt-example { display: flex; flex-direction: column; gap: 3px; }
.rt-dice { display: block; }
.rt-cards { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.rt-cards > svg { display: block; flex: none; }
.rt-count { margin-left: 4px; font-size: 0.75rem; color: var(--shop-ink-soft); }
.rt-result { font-size: 0.72rem; color: var(--shop-ink-soft); }
.rt-text { font-size: 0.8rem; }
.rt-note { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.7; color: var(--shop-ink-soft); }

.rx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 3px;
  background: rgba(222, 208, 170, 0.45);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--shop-ink);
}
.rx-label { margin-right: 4px; font-size: 0.72rem; color: var(--shop-brass-deep); }
.rx-cards { display: inline-flex; gap: 2px; }
.rx-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 3px;
  box-sizing: border-box;
  border: 1px solid var(--shop-ink);
  border-radius: 3px;
  background: var(--shop-paper-light);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--shop-ink);
}
.rx-card.rx-red { color: var(--shop-seal); }
.rx-card.rx-joker { min-width: 36px; border: 1.4px solid var(--shop-seal); font-size: 0.6rem; color: var(--shop-seal); }
.rx-seats { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; }
.rx-seat {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shop-ink-soft);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
}
.rx-seat.rx-active { background: var(--shop-ink); border-color: var(--shop-ink); color: var(--shop-paper-light); }
.rx-seat.rx-next { border: 1.6px solid var(--shop-seal); color: var(--shop-seal); }
.rx-seat.rx-skip { opacity: 0.35; text-decoration: line-through; }
.rx-arrow { font-size: 0.7rem; color: var(--shop-ink-soft); }
.rule-example { display: block; margin-top: 6px; }
.detail-table-block { grid-column: 1 / -1; margin-top: 36px; }
.detail-table-block.hidden { display: none; }
.game-rules-content .rt-table { margin-bottom: 8px; }

/* =========================================================
   店の賽 — 三×三の升に目を彫る。地と彫りは --die-* が持つ。
   置く場所(卓の上・手控えの一行・目の選択)で大きさだけが変わるので、
   遊びの名は付けない。public/dice.js が組み立てる。
   升の大きさは --die-pip-size / --die-pip-gap で挽き直せる ―― 殻を自前で
   持つ側(ヨットの盆の賽は押せる木札、点取帳の行頭の賽は16px)は、彫りだけを
   借りて、大きさを自分のところで決める。
   ========================================================= */
.die {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--die-bone);
  box-shadow: var(--die-bevel), var(--die-shadow);
}
.die-pips {
  display: grid;
  grid-template-columns: repeat(3, var(--die-pip-size, 7px));
  grid-template-rows: repeat(3, var(--die-pip-size, 7px));
  gap: var(--die-pip-gap, 4px);
}
.die-pip { border-radius: 50%; }
.die-pip.on {
  background: var(--die-pip);
  box-shadow: var(--die-pip-sheen);
}
/* 手控えの賽。目が読める下限がこのあたり。 */
.die-small {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  box-shadow:
    inset 0 -2px 4px rgba(120, 100, 68, 0.26),
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    0 2px 3px rgba(0, 0, 0, 0.32);
}
.die-small .die-pips {
  --die-pip-size: 4px;
  --die-pip-gap: 2.5px;
}


/* --- 夜の花札 ---
   こいこいの卓は、夜は藍の毛氈に行灯の灯を上から落とす。枠は将棋・リバーシの
   夜と同じ灯を落とした胡桃。札(黒漆に金)は昼夜とも同じ。 */
body.board-dark .koikoi-container {
  --koikoi-frame-a: #2f2118;
  --koikoi-frame-b: #17100b;
  --koikoi-frame-edge: var(--shop-brass-deep);
  --koikoi-frame-sheen: rgba(221, 192, 127, 0.14);
  --koikoi-frame-drop: rgba(0, 0, 0, 0.5);
  --koikoi-cloth-a: #213549;
  --koikoi-cloth-b: #121d29;
  --koikoi-cloth-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 6px);
  --koikoi-cloth-sheen:
    radial-gradient(120% 90% at 50% 0%, rgba(221, 192, 127, 0.11), transparent 62%);
  --koikoi-cloth-well: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  --koikoi-cloth-ink: rgba(221, 192, 127, 0.72);
  --koikoi-card-shadow: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}

/* 指で押すには小さい押しどころ(#195)。見た目の大きさは変えず、まわりの透明な
   ::after を押せる範囲にして 44px 四方まで広げる(顔ぶれの × と同じ型、#114)。
   店の中の頭の切り替え・名札・戸口の戻り口と「ルールを読む」・品書きの「棚に戻る」と
   「一枚のページで開く」・卓を立てるの「自動 / クリア」・すごろくの札。 */
:is(.nav-link-btn, .badge-btn, .gate-alt-btn, .gate-rules-link, .breadcrumb .link-btn, #detail-rules-page-link, .room-name-mini-btn, .sg-chip) {
  position: relative;
}
:is(.nav-link-btn, .badge-btn, .gate-alt-btn, .gate-rules-link, .breadcrumb .link-btn, #detail-rules-page-link, .room-name-mini-btn, .sg-chip)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* 店先の帯の下端の双罫(.site-header::after)が後から描かれて押せる範囲に被るので、
   頭の切り替えはその上に置く。 */
.nav-link-btn::after { z-index: 1; }
/* すごろくの帯の駒の印は隣り合うことがあるので、36px までにする。 */
.sg-strip-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 36px);
  height: max(100%, 36px);
  transform: translate(-50%, -50%);
}

/* 卓の途中に出る小さい押しどころ(#204、#195 の続き)。待った・降参する・振り返りの
   釦と ⏮◀▶⏭・棋譜を写す、軍人将棋の「戦いの記録」、すごろくの「すべて見る」、人狼の
   「あなたは〇〇」、卓の名の下のルールの札。見た目は変えず、透明な ::after で押せる
   丈を 44px まで伸ばす。横は伸ばさない ―― ⏮◀▶⏭ は 4px の間で隣り合い、ほかは
   もともと 44px より広い。 */
:is(#undo-btn, #shogi-resign-btn, #chess-resign-btn, #gunjin-resign-btn, .kifu-review .secondary-btn, #gunjin-log-all, .sg-link-btn, #werewolf-role, #room-rules) {
  position: relative;
}
:is(#undo-btn, #shogi-resign-btn, #chess-resign-btn, #gunjin-resign-btn, .kifu-review .secondary-btn, #gunjin-log-all, .sg-link-btn, #werewolf-role, #room-rules)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}