/* 共通の画面の枠（game-shell v1）: 色・形・字・余白の変数と、ボタン・選び・ダイアログ・「？」の見た目。
   変数の名前は兄弟（393・フレネミー・ピラミッド・錬成）の共通の名前。各アプリは :root の値だけを上書きする（style.css）。
   アプリだけの色は --x- で始める（枠は読まない）。暗い色は 2 か所に同じ値（prefers-color-scheme と data-theme）。
   角丸は 2 種（--radius-s = ボタン・入力、--radius = ダイアログ）。v1/ は足すだけ・壊さない。 */
:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --border: #d8d0bf;
  --text: #1d1b16;
  --text-2: #5d574b;
  --accent: #b5532a;
  --accent-soft: rgba(181, 83, 42, 0.12);
  --on-accent: #ffffff;
  --danger: #b3261e;
  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 10px 28px rgba(60, 40, 10, 0.18);
  --font: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', system-ui, sans-serif;
  --font-piece: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  /* 列と行 */
  --gutter: 16px;
  --gap: 16px;
  --content: min(1200px, 100cqw - 2 * var(--gutter));
  --rail: 168px;
  --side: 300px;
  --row: 44px;
  /* 盤の中（アプリが値を替える） */
  --ban: #e6be72;
  --ban-line: #3b2a14;
  --komadai: #e9c98e;
  --piece: #17100a;
  --promoted: #c0261d;
  --last: rgba(255, 200, 60, 0.55);
  --target: rgba(40, 140, 80, 0.45);
  --picked: rgba(60, 120, 220, 0.45);
  --check: rgba(220, 40, 40, 0.55);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #17150f;
    --surface: #221f18;
    --border: #3d382c;
    --text: #efe9dc;
    --text-2: #b0a892;
    --accent: #e0814f;
    --accent-soft: rgba(224, 129, 79, 0.18);
    --on-accent: #1c120c;
    --danger: #ff7a68;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    --ban: #c99d55;
    --ban-line: #2a1d0c;
    --komadai: #b8935a;
  }
}
:root[data-theme='dark'] {
  --bg: #17150f;
  --surface: #221f18;
  --border: #3d382c;
  --text: #efe9dc;
  --text-2: #b0a892;
  --accent: #e0814f;
  --accent-soft: rgba(224, 129, 79, 0.18);
  --on-accent: #1c120c;
  --danger: #ff7a68;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  --ban: #c99d55;
  --ban-line: #2a1d0c;
  --komadai: #b8935a;
  color-scheme: dark;
}
:root[data-theme='light'] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  /* 列の幅（--content）は 100cqw で決める（縦のスクロールバーの幅を含めない） */
  container-type: inline-size;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* ボタン・入力（角丸 --radius-s・高さ 44px） */
button,
select,
input {
  font: inherit;
  color: inherit;
}
button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
button:hover:not(:disabled) {
  background: var(--accent-soft);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
button.primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}
button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
select,
input[type='number'],
input[type='text'] {
  min-height: 44px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
}
/* 選びの段（1 つを選ぶ）。選んだ物の印は 1 種 = アクセント色の塗り ＋ aria-pressed / aria-checked */
.seg {
  display: inline-flex;
  flex-wrap: nowrap;
}
.seg > button {
  border-radius: 0;
  margin-left: -1px;
}
.seg > button:first-child {
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  margin-left: 0;
}
.seg > button:last-child {
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
button[aria-pressed='true'],
button[aria-checked='true'],
button[aria-selected='true'].gs-tab {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* 選んだ物の上にマウスがあっても塗りを保つ（:hover の薄い塗りに白い字が乗って読めなくならないように） */
button[aria-pressed='true']:hover:not(:disabled),
button[aria-checked='true']:hover:not(:disabled),
button[aria-selected='true'].gs-tab:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}

/* 「？」: 全角「？」の丸い枠（見た目 24px・押せる範囲 44px） */
.gs-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0 4px;
  padding: 0;
  border: 1.5px solid var(--text-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.gs-help::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.gs-help.gs-help-link {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
}

/* ダイアログ（真ん中・✖ 右上・角丸 --radius） */
.gs-dialog {
  width: min(92vw, 420px);
  max-width: 92vw;
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.gs-dialog::backdrop {
  background: rgba(20, 12, 4, 0.45);
}
.gs-dialog-box {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding: 16px 20px 20px;
}
.gs-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.gs-dialog-title {
  flex: 1;
  margin: 0;
  padding-top: 8px;
  font-size: 1.05rem;
  font-weight: 700;
}
.gs-close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1;
}
.gs-dialog-body {
  overflow-y: auto;
  min-height: 0;
}
.gs-dialog-foot {
  margin-top: 16px;
}
.gs-dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.gs-dialog-lede {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 0.9rem;
}
.gs-wide {
  width: min(96vw, 640px);
}
.gs-full {
  width: min(96vw, 640px);
}
@media (max-width: 759px) {
  .gs-full {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .gs-full .gs-dialog-box {
    height: 100%;
    max-height: 100dvh;
  }
}
/* 終局 */
.gs-result {
  text-align: center;
}
.gs-result .gs-dialog-head {
  padding-left: 34px; /* ✖ の幅だけ空けて題を真ん中に */
}
.gs-result-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}
.gs-result-reason {
  margin: 0;
  color: var(--text-2);
}
/* 確かめ */
.gs-confirm .gs-dialog-title {
  font-weight: 600;
}
/* 成りの問い（決まった所。背景は薄く、盤が見える） */
.gs-dialog.gs-placed {
  position: fixed;
  inset: auto; /* 置く所は left・top だけで決める（UA の inset: 0 だと幅が画面いっぱいになる） */
  margin: 0;
  width: fit-content;
  max-width: min(92vw, 320px);
}
.gs-promote::backdrop {
  background: rgba(20, 12, 4, 0.12);
}
.gs-promote .gs-dialog-box {
  padding: 10px 12px 12px;
}
.gs-promote .gs-dialog-title {
  padding-left: 34px;
  text-align: center;
}
.gs-promote-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 88px;
}
/* 一覧（書き出しの形式など。行の全体が 1 つのボタン） */
.gs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-list li + li {
  margin-top: 6px;
}
.gs-list-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}
.gs-list-note {
  color: var(--text-2);
  font-weight: 400;
  font-size: 0.85rem;
}
/* 定義 */
.gs-help-def {
  margin: 0;
  white-space: pre-line;
}
.gs-help-list {
  margin: 0;
}
.gs-help-list dt {
  font-weight: 700;
  margin-top: 8px;
}
.gs-help-list dt:first-child {
  margin-top: 0;
}
.gs-help-list dd {
  margin: 0;
  color: var(--text-2);
}