/* 山手線ゲーム固有の見た目（共通は ../common/base.css）
   鉄道（路線図・駅名標・車両・路線の色の帯）を思わせる形・色は使わない。白いお題カードと手拍子の丸だけ */
[hidden] { display: none !important; }

.board-wrap { min-height: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---------- お題カード（紙のカード。地は明るいまま、文字の色は固定） ---------- */
.topic-card {
  background: var(--board); color: #1F2328; border: 2px solid #CFC9BC; border-radius: 10px;
  padding: 10px 18px 14px; text-align: center; filter: var(--shadow-piece); position: relative;
}
.tc-head { margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.tc-label { font-size: 15px; font-weight: 700; color: #5B616B; letter-spacing: .1em; }
.tc-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tag { font-size: 14px; font-weight: 700; border: 1px solid #C9C4B8; border-radius: 999px; padding: 0 10px; line-height: 1.7; color: #5B616B; background: #FFFFFF; }
.tag.cat { background: #E9EEF4; color: #24496E; border-color: #B9C8D8; }
.tag rt { font-weight: 400; }
.tc-title { margin: 4px 0 0; font-size: clamp(26px, 6.4vw, 40px); font-weight: 700; line-height: 1.45; letter-spacing: .02em; overflow-wrap: anywhere; }
.tc-title.long { font-size: clamp(22px, 5vw, 32px); }
.tc-title rt { font-size: max(.4em, 10px); font-weight: 400; }
.tc-sub { margin: 2px 0 0; font-size: 15px; color: #5B616B; min-height: 0; }
.tc-sub:empty { display: none; }
.topic-card.flip { animation: flip .32s ease-out; }
@keyframes flip { 0% { transform: rotateX(80deg); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* ---------- 手拍子のリズム ---------- */
.rhythm { text-align: center; }
.now { margin: 0; font-size: clamp(22px, 5.4vw, 32px); font-weight: 700; line-height: 1.4; min-height: 1.4em; overflow-wrap: anywhere; }
.now .num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .2em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .7em; margin-right: .35em; vertical-align: .15em; }
.now small { font-size: .6em; font-weight: 700; color: var(--ink-sub); margin-left: .4em; }
.now rt { font-size: max(.4em, 10px); font-weight: 400; }
.beats { display: flex; justify-content: center; gap: clamp(8px, 3vw, 18px); margin: 8px 0 6px; }
.beat {
  width: clamp(56px, 15vw, 76px); height: clamp(56px, 15vw, 76px); border-radius: 50%; border: 3px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(15px, 3.8vw, 19px); color: var(--ink-sub);
  background: var(--surface); transition: background-color 80ms, border-color 80ms, color 80ms, transform 80ms;
}
.beat.clap { border-style: dashed; }
.beat.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: scale(1.08); }
.beat.clap.on { background: var(--ink); border-color: var(--ink); color: var(--bg); border-style: solid; }
.beat.done { border-color: var(--ok); color: var(--ok); }
.rhythm.said .beat.ans { border-color: var(--ok); color: var(--ok); border-style: solid; }
.rhythm.said .beat.ans.on { background: var(--ok); color: #FFFFFF; }
.gauge { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; max-width: 420px; margin: 4px auto 0; }
.gauge i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; }
.gauge.warn i { background: var(--warn); }
.gauge.stop i { background: var(--line-strong); }
/* ひとりで練習の残り時間 */
.clock { font-size: clamp(34px, 9vw, 52px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 4px 0 0; }
.clock small { font-size: .45em; margin-left: 4px; color: var(--ink-sub); }
.clock.warn { color: var(--warn); }

/* ---------- 順番 ---------- */
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.players li {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 10px 2px 4px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.3; max-width: 100%;
}
.players li .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-sub); font-weight: 700; font-size: 14px; flex: none; }
.players li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.players li .x { font-size: 14px; color: var(--ng); font-weight: 700; }
.players li.cur { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.players li.cur .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.players li.gone { opacity: .5; text-decoration: line-through; border-style: dashed; }
.players li rt { font-size: 10px; font-weight: 400; }

/* ---------- 出た答え ---------- */
.said { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 0; }
.said:empty { display: none; }
.said .a { font-size: 15px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 8px; background: var(--surface); line-height: 1.7; }
.said .a b { font-weight: 700; }
.said .a .by { color: var(--ink-sub); font-size: 14px; margin-left: 4px; }
.said .a.ok { border-color: var(--ok); }
.said .a.ok::before { content: '○ '; color: var(--ok); font-weight: 700; }
.said .a.unk::before { content: '？ '; color: var(--ink-sub); font-weight: 700; }
.said .a.dup { border-color: var(--ng); color: var(--ng); font-weight: 700; }
.said .a.new { animation: pop-in .2s ease-out; }
@keyframes pop-in { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 操作 ---------- */
.acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.btn.big { min-height: 60px; font-size: 21px; padding: 0 28px; min-width: 9em; }
.btn.big.out { min-width: 6em; color: var(--ng); border-color: var(--ng); }
#said-btn { min-width: 11em; }
.text-input {
  flex: 1; min-width: 0; min-height: 52px; box-sizing: border-box; padding: 0 14px; font: inherit; font-size: 21px; font-weight: 700;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.text-input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.text-input::placeholder { color: var(--ink-sub); font-weight: 400; font-size: 17px; }
.answer-form, .own-form { display: flex; gap: 8px; max-width: 560px; margin: 12px auto 0; }
.answer-form .btn, .own-form .btn { flex: none; }
.answer-form.shake { animation: shake .38s ease-out; }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
.who { text-align: center; margin-top: 12px; border: 2px solid var(--ng); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.who-q { margin: 0; font-weight: 700; font-size: 18px; }
.who .acts { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .topic-card.flip, .said .a.new, .answer-form.shake { animation: none; } }

/* 答えの例 */
.examples { max-width: 600px; margin: 12px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px 10px; font-size: 16px; line-height: 1.9; }
.examples h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink-sub); }
.examples .ex { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.examples .ex span { border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; background: var(--bg); }
.examples .ex span.hit { border-color: var(--ok); color: var(--ok); font-weight: 700; background: var(--surface); }
.examples .ex span.hit::before { content: '○'; margin-right: 2px; }
.examples .ex rt { font-size: 10px; }
.examples p { margin: 4px 0 0; font-size: 14px; color: var(--ink-sub); }

/* 記録 */
.record { max-width: 600px; margin: 12px auto 0; }
.record summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--accent); }
.rtable { width: 100%; font-size: 15px; }
.rtable th, .rtable td { padding: 4px 8px; }
.rtable td.c { text-align: center; white-space: nowrap; }
.rtable rt { font-size: 10px; }
.hist { list-style: none; padding: 0; margin: 8px 0 0; font-size: 15px; }
.hist li { border-bottom: 1px solid var(--line); padding: 3px 0; }
.hist li .r { color: var(--ink-sub); font-size: 14px; }

/* 設定: 名前の欄 */
.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.names label { display: flex; align-items: center; gap: 6px; }
.names .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-sub); font-weight: 700; font-size: 14px; flex: none; }
.names input { flex: 1; min-width: 0; min-height: var(--tap); font: inherit; font-size: 17px; padding: 0 10px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.names input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.choices.nums .choice span { padding: 0 12px; }

/* 結果 */
.result-box { position: static; margin: 0 auto; max-width: 600px; width: 100%; }
.result-box .big { margin: 0 0 8px; }
.result-box .rtable { margin: 8px 0 12px; text-align: left; }
.result-box .ylist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.ylist button {
  appearance: none; font: inherit; font-size: 16px; min-height: var(--tap); padding: 0 10px; border-radius: 6px; cursor: pointer;
  border: 2px dashed var(--line-strong); background: var(--surface); color: var(--ink);
}
.ylist button[aria-pressed="true"] { border-style: solid; border-color: var(--ok); color: var(--ok); font-weight: 700; }
.ylist button[aria-pressed="true"]::before { content: '○ '; }
.ylist button[aria-pressed="false"]::before { content: '？ '; color: var(--ink-sub); }
.ylist .fixed { font-size: 16px; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; border: 2px solid var(--ok); color: var(--ok); font-weight: 700; }
.ylist .fixed::before { content: '○ '; }
.result-box h3 { font-size: 16px; margin: 12px 0 4px; }
.result-box .examples { text-align: left; margin-top: 4px; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .topic-card { padding: 8px 12px 12px; }
  .btn.big { min-height: 56px; font-size: 19px; padding: 0 18px; min-width: 0; flex: 1 1 auto; }
  #said-btn { min-width: 0; flex: 2 1 auto; }
  .text-input { font-size: 19px; min-height: 48px; }
  .names { grid-template-columns: 1fr 1fr; }
  .players li { font-size: 14px; min-height: 32px; }
  .players li .nm { max-width: 6.5em; }
}
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* iPhone の「連絡先を自動入力」を出さないため名前の欄は type=search（要望No.87）。検索欄の見た目は消す（ほかの欄はそのまま） */
.names input[type=search]{-webkit-appearance:none;appearance:none}
.names input[type=search]::-webkit-search-cancel-button,.names input[type=search]::-webkit-search-decoration{display:none;-webkit-appearance:none}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 11px; --tb-st-rt: 11px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */