/* 卓の外で開く選び札の紙(手番・CPU の強さ・ポーカーの型・こいこいの月数)と、
   卓を立てる紙のゲームごとの決まり(大富豪・七並べ・ライアーズダイス)。
   もとは chess.css・daifugo.css・sevens.css に居たが、卓の CSS は卓が立つときに
   読むようになった(issue #137)ので、棚から開く紙の分はここへ出した。
   読む順は room.css・game-fx.css のあと ―― 移す前と同じ位置に当たる。 */

/* --- 卓を立てる紙: 大富豪・七並べ・ライアーズダイスの決まり --- */
.daifugo-options {
  margin: 4px 0 14px;
}
.daifugo-standard-note {
  font-size: 0.8rem;
  color: var(--shop-ink-soft);
  margin: 0 0 10px;
}
.daifugo-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}
.daifugo-rule-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--shop-ink);
  cursor: pointer;
}
.daifugo-rule-check input {
  width: auto;
  margin: 0;
}

/* --- 卓を立てる紙: 一枚目(ルーム名と公開)・二枚目(ゲーム) ---
   案は design/room-create/gen.mjs の「二枚目 A」。 */
.create-room-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 18px;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--shop-ink-soft);
}
.create-room-steps.hidden { display: none; }
.create-room-steps li { display: flex; align-items: center; gap: 6px; }
.create-room-steps li.hidden { display: none; }
.create-room-steps li + li::before {
  content: "";
  width: 24px;
  height: 1px;
  margin-right: 4px;
  background: var(--shop-ink-soft);
}
.create-room-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--shop-ink-soft);
  font-size: 0.7rem;
}
.create-room-steps li.current { color: var(--shop-ink); font-weight: 700; }
.create-room-steps li.current .create-room-step-no {
  background: var(--shop-pine);
  border-color: var(--shop-pine);
  color: var(--shop-paper);
}
.create-room-page.hidden { display: none; }
/* 二枚目(箱の絵)はスマホ縦で窓が画面より背が高い。「戻る / 作成」を窓の下端に
   貼り付け、選んだあと下まで送らなくても押せるようにする (#176)。紙の色を敷いて
   下を流れる箱を隠し、上に罫を一本。 */
#create-room-modal .modal-actions {
  position: sticky;
  bottom: -16px;
  margin: 20px -28px -28px;
  padding: 12px 28px 16px;
  background: var(--shop-paper);
  border-top: 1px solid var(--shop-paper-line);
  z-index: 1;
  flex-wrap: wrap;
}
/* 釦の上の一行(#176)。「将棋の卓を立てます・2人・非公開」。 */
.create-room-summary {
  flex: 1 0 100%;
  margin: 0 0 2px;
  font-size: 14px;
  color: var(--shop-ink);
}
.create-room-summary.hidden { display: none; }
.create-room-summary b { font-family: var(--shop-font-display); }
.create-room-summary-rest { color: var(--shop-ink-soft); }

/* 棚と同じ箱の絵を五列(狭い画面は三列)。先頭が「あとで決める」。 */
.room-game-picker {
  --pick-size: 76px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 6px;
  margin: 4px 0 16px;
}
@media (max-width: 480px) {
  .room-game-picker { --pick-size: 80px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; }
}
.room-game-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0;
  text-align: center;
  cursor: pointer;
}
.room-game-pick.hidden { display: none; }
.paper-modal .room-game-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  box-shadow: none;
  cursor: pointer;
}
.room-game-cover {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--pick-size);
  height: var(--pick-size);
  border-radius: 3px;
  overflow: hidden;
  color: var(--shop-paper);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  box-shadow: 0 2px 5px rgba(20, 12, 6, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.room-game-cover .cover-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 棚の箱と同じ罫 */
.room-game-cover::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(221, 192, 127, 0.42);
}
.room-game-pick:hover .room-game-cover { transform: translateY(-2px); }
.room-game-pick:has(input:checked) .room-game-cover {
  box-shadow: 0 0 0 3px var(--shop-paper-light), 0 0 0 6px var(--shop-pine);
}
/* 選んだ箱の右肩に松の丸と白い鉤 */
.room-game-pick:has(input:checked)::after {
  content: "";
  position: absolute;
  top: -9px;
  left: calc(50% + var(--pick-size) / 2 - 15px);
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--shop-paper-light);
  background: var(--shop-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 L6.5 12 L13 4.5' fill='none' stroke='%23f7f1e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  pointer-events: none;
}
.room-game-pick:has(input:focus-visible) .room-game-cover { outline: 2px solid var(--shop-brass-deep); outline-offset: 7px; }
.room-game-pick:has(input:disabled) { cursor: default; opacity: 0.5; }
.room-game-name {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--shop-ink);
}
.room-game-sub {
  margin-top: -3px;
  font-size: 0.68rem;
  color: var(--shop-ink-soft);
}
#create-later-note { margin: 0 0 12px; color: var(--shop-ink-soft); font-size: 0.8rem; }
/* 三枚目の頭: どのゲームの決まりか */
.create-room-detail-game {
  margin: 0 0 12px;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--shop-ink);
}

/* 〇×の盤面サイズ「－ 5×5 ＋」と、勝利条件の 3〜10 の札。 */
.tictactoe-options { margin: 0 0 14px; }
.tictactoe-options .field-label:first-child { margin-top: 0; }
.ttt-size-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--shop-ink-soft);
  border-radius: 4px;
  overflow: hidden;
}
.paper-modal .ttt-step-btn {
  width: 48px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--shop-ink);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.paper-modal .ttt-step-btn:hover:not(:disabled) { background: rgba(180, 144, 63, 0.16); }
.paper-modal .ttt-step-btn:disabled { color: var(--shop-paper-line); cursor: default; }
.paper-modal .ttt-step-btn:focus-visible { outline: 2px solid var(--shop-brass-deep); outline-offset: -3px; }
.ttt-size-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  border-left: 1px solid var(--shop-ink-soft);
  border-right: 1px solid var(--shop-ink-soft);
  background: var(--shop-paper-light);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--shop-ink);
}
.ttt-win-choices {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.ttt-win-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--shop-ink-soft);
  border-radius: 4px;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--shop-ink);
  cursor: pointer;
}
.paper-modal .ttt-win-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  box-shadow: none;
  cursor: pointer;
}
.ttt-win-choice:hover { background: rgba(180, 144, 63, 0.16); }
/* 盤の大きさに見合った数(defaultTttWinLength)。真鍮の縁で少しだけ目立たせる。 */
.ttt-win-choice.recommended { border-color: var(--shop-brass); box-shadow: inset 0 0 0 1px var(--shop-brass); }
.ttt-win-choice:has(input:checked) {
  background: var(--shop-pine);
  border-color: var(--shop-pine);
  box-shadow: none;
  color: var(--shop-paper);
}
.ttt-win-choice:has(input:disabled) {
  border-style: dashed;
  border-color: var(--shop-paper-line);
  color: var(--shop-paper-line);
  cursor: default;
  background: transparent;
}
.ttt-win-choice:has(input:focus-visible) { outline: 2px solid var(--shop-brass-deep); outline-offset: 2px; }
@media (max-width: 480px) {
  .ttt-win-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 卓を立てる画面のパスの決まりの説明。公開設定の説明(#room-visibility-note)とそろえる。 */
#sevens-pass-note { margin: 6px 0 0; color: var(--shop-ink-soft); font-size: 0.8rem; }

/* --- 選び札 --- */
.turn-order-choices {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.poker-variant-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.turn-order-choice, .poker-variant-choice {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 8px;
}
.turn-order-choice:hover, .poker-variant-choice:hover {
  background: var(--border);
}
.paper-modal .turn-order-choice, .paper-modal .poker-variant-choice {
  background: var(--shop-paper-deep);
  border: 1px solid var(--shop-paper-line);
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  letter-spacing: 0.08em;
}
.paper-modal .turn-order-choice:hover, .paper-modal .poker-variant-choice:hover {
  background: rgba(180, 144, 63, 0.18);
}
.turn-order-choice.cancel, .poker-variant-choice.cancel {
  background: #5b6172;
  border-color: #5b6172;
  color: #fff;
}
.turn-order-choice.cancel:hover, .poker-variant-choice.cancel:hover {
  background: #6b7285;
}
/* Cancel steps back rather than shouting in grey - the same outlined treatment
   the room gives its secondary buttons. */
.paper-modal .turn-order-choice.cancel, .paper-modal .poker-variant-choice.cancel {
  background: transparent;
  border-color: var(--shop-ink-soft);
  color: var(--shop-ink-soft);
  font-weight: 400;
}
/* 迷ったらこれ、の一つ(CPU の強さの「ふつう」)。真鍮の縁で少しだけ目立たせる。 */
.paper-modal .turn-order-choice.recommended {
  border-color: var(--shop-brass);
  box-shadow: inset 0 0 0 1px var(--shop-brass);
}
/* 選び直すときの、いまの強さ(issue #78)。おすすめの縁はそのとき消す。 */
.has-current .paper-modal .turn-order-choice.recommended:not(.current) {
  border-color: var(--shop-paper-line);
  box-shadow: none;
}
.paper-modal .turn-order-choice.current {
  background: rgba(180, 144, 63, 0.18);
  border-color: var(--shop-brass-deep);
  box-shadow: inset 0 0 0 1px var(--shop-brass-deep);
}
.cpu-level-note.hidden { display: none; }
.cpu-level-choice.hidden { display: none; }
/* 強さごとの成績を添えるとき(#132)。強さは縦に並べ、右に成績と「勝」の判。 */
.with-record .turn-order-choices { flex-direction: column; }
.with-record .cpu-level-choice:not(.cancel):not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
}
.with-record .cpu-level-choice.cancel { flex: none; align-self: flex-end; padding: 8px 20px; }
.cpu-level-record {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--shop-font-body, inherit);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--shop-ink-soft);
}
.cpu-level-record.none { color: var(--shop-ink-faint, var(--shop-ink-soft)); opacity: 0.8; }
.cpu-level-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--shop-seal);
  color: var(--shop-seal);
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1;
  transform: rotate(-8deg);
}
/* 「CPUと一局」で決まりも選ぶ(issue #74)。閉じていれば一行、開くと決まりの
   札が段で並ぶ。選んだ札は松の地に抜き(卓を立てる窓の公開・非公開と同じ)。 */
.cpu-level-rules {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--shop-paper-line);
}
.cpu-level-rules.hidden { display: none; }
.cpu-level-rules summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--shop-brass-deep);
  list-style: none;
}
.cpu-level-rules summary::-webkit-details-marker { display: none; }
.cpu-level-rules summary::after { content: ' ▾'; }
.cpu-level-rules[open] summary::after { content: ' ▴'; }
.cpu-level-rules-now {
  font-size: 0.76rem;
  color: var(--shop-ink-soft);
}
.cpu-level-rules-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.cpu-rule-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cpu-rule-label {
  font-size: 0.8rem;
  color: var(--shop-ink);
}
.cpu-rule-seg {
  display: flex;
  border: 1px solid var(--shop-ink-soft);
  border-radius: 4px;
  overflow: hidden;
}
.cpu-rule-opt {
  flex: 1;
  min-height: 40px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--shop-ink);
  font: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.cpu-rule-opt + .cpu-rule-opt { border-left: 1px solid var(--shop-ink-soft); }
.cpu-rule-opt:hover { background: rgba(180, 144, 63, 0.16); }
.cpu-rule-opt[aria-checked="true"] {
  background: var(--shop-pine, #2f4a3a);
  color: var(--shop-paper);
}
.cpu-rule-opt:focus-visible {
  outline: 2px solid var(--shop-brass-deep);
  outline-offset: -3px;
}
.cpu-level-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--shop-ink-soft);
}
.paper-modal .turn-order-choice.cancel:hover, .paper-modal .poker-variant-choice.cancel:hover {
  background: rgba(85, 73, 58, 0.1);
  color: var(--shop-ink);
}