/* Turnabout */
.new-game[data-game=turnabout] .intro-art{background:#e2eee6}
.ta-progress{display:inline-flex;gap:4px;margin-right:10px;vertical-align:middle}
.ta-progress i{width:8px;height:8px;border-radius:50%;background:#e3e6dd;border:1px solid #cdd3c6}
.ta-progress i.now{background:var(--paper);border-color:var(--ink)}
.ta-progress i.ok{background:#8fc4a5;border-color:#5f9c79}
.ta-progress i.miss{background:#e7b2b6;border-color:#c07a80}
.ta-round-label{vertical-align:middle}
.ta-stage{display:flex;align-items:center;justify-content:center;gap:22px;margin:4px auto 18px;max-width:520px}
.ta-target{margin:0;padding:10px 12px 6px;border:1px solid #c9d8cd;border-radius:16px;background:#eef5ef;text-align:center;flex:0 0 auto}
.ta-target figcaption{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.ta-target .ta-shape{width:132px;height:132px}
.ta-ask{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.ta-question{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:500;line-height:1.3;margin:0;letter-spacing:-.2px}
.ta-timer{font-size:12px;color:#8b948d;font-variant-numeric:tabular-nums;background:var(--off);border-radius:20px;padding:3px 10px}
.ta-timer.is-stopped{color:var(--ink-soft)}
.ta-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:560px;margin:0 auto}
.ta-option{position:relative;min-height:44px;padding:6px 6px 7px;border:1px solid #d0d5cb;border-radius:15px;background:#fbfcf8;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;color:var(--ink)}
.ta-option:hover:not(:disabled){transform:translateY(-2px);border-color:#9fb4a5;box-shadow:0 4px 0 #252b280d}
.ta-option .ta-shape{display:block;width:100%;max-width:120px;aspect-ratio:1;height:auto}
.ta-key{align-self:flex-start;padding-left:3px;font-size:11px;line-height:14px;font-weight:600;color:#9aa29b}
.ta-tag{display:block;min-height:14px;line-height:14px;text-align:center;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.ta-shape .ta-dot{fill:#d5d9cf}
.ta-shape .ta-cell{fill:#cfe2d5;stroke:#333833;stroke-width:1.4}
.ta-shape.is-target .ta-cell{fill:#9fcbb0}
.ta-options.is-review .ta-option:disabled{opacity:1}
.ta-option.is-answer{border:2px solid var(--teal);background:#e6f2ea}
.ta-option.is-answer .ta-cell{fill:#9fcbb0}
.ta-option.is-answer .ta-tag{color:var(--teal);font-weight:600}
.ta-option.is-wrong{border:2px solid #c46a72;background:#f8eaea}
.ta-option.is-wrong .ta-cell{fill:#efc7ca}
.ta-option.is-wrong .ta-tag{color:#a84046;font-weight:600}
.ta-option.is-dim{opacity:.55!important}
.ta-verdict{text-align:center;font-weight:600}
.ta-verdict.good{color:var(--teal)}.ta-verdict.bad{color:#a84046}
.new-game[data-game=turnabout] .game-message{text-align:center}
.ta-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-width:420px;margin:20px auto 0}
.ta-chip{border-radius:10px;padding:7px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid}
.ta-chip span{font-size:15px;font-weight:600}.ta-chip small{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.ta-chip.ok{background:#e6f2ea;border-color:#b6d4c0;color:var(--teal)}
.ta-chip.miss{background:#f8eaea;border-color:#e2bfc2;color:#a84046}
@media(max-width:560px){
  .ta-options{grid-template-columns:repeat(2,1fr);gap:10px;max-width:330px}
  .ta-stage{gap:14px}
  .ta-target .ta-shape{width:104px;height:104px}
  .ta-question{font-size:17px}
  .ta-strip{gap:4px}.ta-chip small{font-size:9px}
}
@media(max-width:360px){.ta-stage{flex-direction:column;gap:10px}.ta-ask{align-items:center;text-align:center}}
@media(prefers-reduced-motion:reduce){.ta-option{transition:none}.ta-option:hover:not(:disabled){transform:none}}
.new-game[data-game=turnabout] .game-status{gap:12px}
.new-game[data-game=turnabout] .game-status>strong{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto}
.ta-question{text-align:left}
@media(max-width:420px){.new-game[data-game=turnabout] .game-status>span{font-size:11px}.ta-progress{gap:3px;margin-right:7px}.ta-progress i{width:7px;height:7px}}
