/* そろばん固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.sb-wrap { position: relative; margin: 0 auto; }

/* ---------- そろばん（board.js の SVG） ---------- */
.abacus { width: 100%; }
.abacus svg.soroban { display: block; width: 100%; height: auto; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.abacus svg.soroban.mini, .abacus svg.soroban.locked { cursor: default; touch-action: auto; }
.abacus:not(.mini) svg.soroban { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22)); }
.soroban .bead { transition: transform 110ms ease-out; }
.soroban .bead.dim { opacity: .35; }
.soroban .rodmark { stroke: transparent; stroke-width: 3; }
.soroban .rodmark.focus { stroke: #E0A019; stroke-width: 3.5; }
.soroban .rodmark.diff { stroke: #D2413A; stroke-width: 3; stroke-dasharray: 6 4; }
.soroban .rodmark.focus.diff { stroke-dasharray: none; }
.soroban .plabel { font-size: 15px; font-weight: 700; fill: var(--ink-sub); font-family: var(--font); }
.soroban .plabel.unit { fill: var(--ink); }
.soroban .plabel.diff { fill: var(--ng); }
@media (prefers-reduced-motion: reduce) { .soroban .bead { transition: none; } }

/* ---------- 問題・読み ---------- */
.question { text-align: center; margin: 0 0 6px; }
.question p { margin: 0; }
.question .qmain { font-size: clamp(30px, 7vw, 44px); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.question .qmain .op { color: var(--ink-sub); }
.question .qmain .now { color: var(--accent); }
.question .qmain .done { color: var(--ink-sub); }
.question .qsub { font-weight: 700; font-size: 18px; }
.question .qnote { font-size: 15px; color: var(--warn); font-weight: 700; }
.readout { text-align: center; min-height: 52px; margin: 0 0 6px; line-height: 1.2; }
.readout.blank { visibility: hidden; }
.readout .num { display: inline-block; font-size: clamp(32px, 7.5vw, 46px); font-weight: 700; font-variant-numeric: tabular-nums; }
.readout .num .frac { color: var(--accent); }
.readout .num .unit { font-size: .6em; margin-left: 2px; }
.readout .kan { display: block; font-size: 15px; color: var(--ink-sub); }
.sb-wrap:not(.is-free) .readout.blank { visibility: hidden; }
.readout .num { font-size: clamp(24px, 5vw, 32px); }

/* ---------- まちがえたとき ---------- */
.fix { margin: 12px 0 0; padding: 12px 14px; border: 2px solid var(--ng); border-radius: var(--radius); background: var(--surface); }
.fix-title { margin: 0 0 8px; font-weight: 700; color: var(--ng); }
.fix .abacus.mini { max-width: 100%; margin: 0 auto; }
.fix-steps { margin: 10px 0 0; padding-left: 1.4em; }
.fix-steps li { margin: 2px 0; }
.fix-steps-h { margin: 10px 0 0; font-weight: 700; color: var(--ink-sub); font-size: 15px; }
.fix-steps-h + .fix-steps { margin-top: 2px; }
.readout .pre { font-size: 15px; font-weight: 700; color: var(--ink-sub); margin-right: 8px; vertical-align: middle; }
.fix-note { margin: 6px 0 0; color: var(--warn); font-weight: 700; }
.fix-note:empty { display: none; }

/* ---------- ボタン ---------- */
.main-btns { justify-content: center; }
.main-btns .btn { min-height: 50px; font-size: 18px; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.status .sname { min-width: 0; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 64px; text-align: right; margin-left: auto; }
.tag { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; vertical-align: middle; color: var(--accent); }
.select { font: inherit; min-height: var(--tap); padding: 0 10px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); max-width: 100%; }

/* ---------- 結果 ---------- */
.result-box { position: static; margin: 12px auto 0; max-width: 560px; }
.result-box .big { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.result-box .weak { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.result-box .weak span { border: 2px solid var(--ng); color: var(--ng); border-radius: 6px; padding: 0 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.result-box .best { display: inline-block; margin-left: 6px; font-size: 14px; color: var(--ok); border: 1.5px solid var(--ok); border-radius: 999px; padding: 0 8px; vertical-align: middle; }
.callout { z-index: 5; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .main-btns .btn { flex: 1 1 auto; padding: 0 12px; }
  .fix { padding: 10px; }
}
.howto img.narrow { max-width: 560px; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 3; --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; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */