/* しりとり固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }
:root { --cpu: #5B616B; }
/* ダークのCPUの色: 白い字を載せても（次の字の丸・しっぽの字）、暗い面に置いても読める中間の灰色（D12） */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cpu: #7C818A; } }
:root[data-theme="dark"] { --cpu: #7C818A; }

.pm { font-weight: 700; margin-right: 2px; }
.status .count { margin-left: auto; color: var(--ink-sub); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.message.ng { color: var(--ng); }

/* ---------- 遊ぶ人 ---------- */
.players { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 8px; min-height: 30px; }
.pl { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border: 2px solid var(--line); border-radius: 999px; font-size: 15px; background: var(--surface); }
.pl small { color: var(--ink-sub); font-size: 14px; }
.pl.is-turn { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); font-weight: 700; }
.pl.is-out { opacity: .5; text-decoration: line-through; }
.players:empty { display: none; }

/* ---------- つながったことば（紙のカードを並べた列） ---------- */
.chain {
  list-style: none; margin: 0 auto; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; align-content: flex-start;
  max-width: 560px; height: 150px; overflow-y: auto; background: var(--board); border: 1px solid var(--line); border-radius: var(--radius); color: #1F2328;
}
.chip { display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 9px; background: #FFFFFF; border: 1.5px solid #D9D6CE; border-left: 5px solid var(--c); border-radius: 5px; font-size: 17px; line-height: 1.3; filter: var(--shadow-piece); }
.chip .pm { font-size: 14px; }
.chip .w { font-weight: 600; }
.chip .k { font-size: 14px; color: #5B616B; }
.chip .tail { color: #FFFFFF; background: var(--c, #2F5D8A); border-radius: 4px; padding: 0 2px; font-weight: 700; }
.chip.first { border-left-color: #8A8F98; }
.chip.first .tail { background: #2F5D8A; }
.chip.last { border-color: var(--c); border-left-width: 5px; }
.chip.out { background: #FBE3E0; border-color: #E8B4AD; border-left-color: #B23A3A; color: #7A2A26; }
.chip.out .why { font-size: 14px; margin-left: 4px; }
.chip.pop { animation: chip-in .25s ease-out; }
@keyframes chip-in { from { transform: translateY(6px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
/* 矢印（ことばの間） */
.chain .arr { color: #8A8F98; font-size: 14px; padding: 0 1px; }

/* ---------- 次の字 ---------- */
.need { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 10px auto 0; padding: 8px 12px; border: 2px solid var(--c, var(--accent)); border-radius: var(--radius); background: var(--surface); }
.need-head { flex: none; min-width: 58px; height: 58px; padding: 0 8px; border-radius: 29px; display: flex; align-items: center; justify-content: center; background: var(--c, var(--accent)); color: #FFFFFF; font-size: 34px; font-weight: 700; line-height: 1; }
.need-head.many { font-size: 24px; }
.need-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 17px; font-weight: 700; line-height: 1.35; }
.need-sub { font-size: 14px; font-weight: 400; color: var(--ink-sub); }
.timer { flex: none; position: relative; width: 48px; height: 48px; }
.timer svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 4; }
.t-bg { stroke: var(--line); }
.t-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .1s linear; }
.timer.low .t-fg { stroke: var(--ng); }
.timer span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.low span { color: var(--ng); }

/* ---------- 答えの欄 ---------- */
.answer-row { display: flex; gap: 8px; max-width: 560px; margin: 10px auto 0; position: relative; }
.answer {
  flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; padding: 0 12px; border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); font-size: 26px; font-weight: 700; letter-spacing: .04em; overflow: hidden; white-space: nowrap; cursor: text;
}
.answer .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); margin-left: 2px; animation: blink 1s steps(1) infinite; }
.answer.cpu .caret, .answer.thinking .caret { display: none; }
.answer .pd { color: var(--accent); font-size: 18px; font-weight: 600; margin-left: 4px; }
.answer.empty::before { content: 'ここに ことばが入ります'; color: var(--ink-sub); font-size: 16px; font-weight: 400; letter-spacing: 0; }
.answer.cpu { border-color: var(--line); }
.answer.cpu.empty::before { content: ''; }
.answer.thinking::after { content: '・・・'; color: var(--ink-sub); animation: dots 1.2s steps(4) infinite; overflow: hidden; display: inline-block; width: 3em; }
.answer.shake { animation: shake .3s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes dots { 0% { width: 0; } 100% { width: 3em; } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.btn.go { flex: none; padding: 0 18px; font-size: 18px; }
.ime { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; pointer-events: none; z-index: -1; }
.accept { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 8px auto 0; max-width: 560px; font-size: 15px; }

/* ---------- 50音のキー ---------- */
.kb { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 560px; margin: 10px auto 0; }
.kb .gap { visibility: hidden; }
.key {
  appearance: none; font: inherit; font-size: 20px; font-weight: 700; min-height: 42px; padding: 0; min-width: 0;
  border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.key.fn { color: var(--accent); }
.key[data-fn="d"], .key[data-fn="h"] { font-size: 28px; }
.key.wide { grid-column: span 2; font-size: 15px; }
.key.go-key { grid-column: span 2; background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.key:active:not(:disabled) { transform: translateY(1px); background: var(--accent-soft); }
.key.go-key:active:not(:disabled) { background: var(--btn); }
.key:disabled { opacity: .4; cursor: not-allowed; }
.key:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* ---------- 道具 ---------- */
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px auto 0; max-width: 560px; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 16px; flex: 1 1 0; justify-content: center; white-space: nowrap; }
.tool svg { width: 20px; height: 20px; flex: none; }
.tool[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- 設定 ---------- */
.rules-detail { margin-top: 10px; }
.rules-detail summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }
.rule-row { margin: 8px 0 12px; }
.rl { display: block; font-size: 14px; color: var(--ink-sub); margin-bottom: 4px; }
.rules-detail input:disabled + span { opacity: .75; }

/* ---------- 結果 ---------- */
.result-box { position: static; max-width: 560px; margin: 10px auto 0; padding: 16px; border-color: var(--c, var(--ink)); }
.result-box h2 { font-size: 1.4rem; margin-bottom: 6px; }
#play.is-over .answer-row, #play.is-over .kb, #play.is-over .tools, #play.is-over .accept { display: none !important; }
.result-box .big { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.rank { list-style: none; padding: 0; margin: 0 0 8px; text-align: left; display: inline-block; }
.rank li { margin: 2px 0; }
.rank small { color: var(--ink-sub); margin-left: 6px; }
.callout { z-index: 3; top: 40%; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .chain { height: 96px; padding: 6px; }
  .chip { font-size: 15px; padding: 3px 7px; }
  .need { padding: 6px 8px; gap: 8px; margin-top: 8px; }
  .need-head { min-width: 46px; height: 46px; font-size: 27px; }
  .need-head.many { font-size: 19px; }
  .need-text { font-size: 15px; }
  .timer, .timer svg { width: 40px; height: 40px; }
  .answer { min-height: 46px; font-size: 22px; }
  .btn.go { padding: 0 12px; }
  .kb { gap: 3px; margin-top: 8px; }
  .key { min-height: 40px; font-size: 18px; border-radius: 5px; }
  .key.wide, .key.go-key { font-size: 14px; }
  .tools { gap: 6px; margin-top: 8px; }
  .tool { padding: 0 4px; font-size: 14px; gap: 3px; min-width: 0; }
  .tools svg { display: none; }
  .controls .btn.icon { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .chip.pop, .answer.shake, .answer .caret, .answer.thinking::after { animation: none; }
}

/* iPhone の「連絡先を自動入力」を出さないため入力欄は type=search（要望No.66）。検索欄の見た目は消す */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button,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: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */