/* デジタルそろばん — 盤の描画
   ここだけ design-system のフラット原則の外。UIではなく「教具そのものの再現」なので、
   木目と立体感を入れる。まわりのボタン・パネルは styles.css の型のまま。 */

.soroban-wrap {
  /* 指で押せる大きさを下限にする。せまい画面でははみ出して横にスクロールする。
     「ぜんぶ見る」を押すと、17けたを縮めて画面に収める。 */
  --pitch: clamp(34px, calc((100vw - 48px) / 17), 48px);
  --bw: calc(var(--pitch) * 0.90);
  --u: calc(var(--bw) / 2);                    /* 珠の高さ＝たての1めもり */
  --beam: max(8px, calc(var(--u) * 0.54));
  --frame: max(9px, calc(var(--u) * 0.55));
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.soroban-wrap::-webkit-scrollbar { height: 6px; }
.soroban-wrap::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 3px; }

.soroban { flex: none; user-select: none; -webkit-user-select: none; touch-action: none; }
/* ぜんぶ見る（17けたを画面幅に収める） */
.soroban-wrap.fit-all { --pitch: calc((100vw - 34px) / 17); overflow-x: hidden; }

/* ===== 木の枠 ===== */
.board {
  position: relative;
  padding: var(--frame);
  border-radius: calc(var(--frame) * 0.35);
  background:
    linear-gradient(180deg, rgba(255,246,230,.20) 0 2px, rgba(0,0,0,0) 2px),
    repeating-linear-gradient(179deg,
      rgba(255,236,208,.055) 0 1px, rgba(0,0,0,.05) 1px 3px, rgba(255,236,208,.03) 3px 4px, rgba(0,0,0,.035) 4px 7px),
    repeating-linear-gradient(91deg,
      #7b5431 0 34px, #8a6038 34px 62px, #6f4826 62px 96px, #815a33 96px 131px),
    #7a5330;
  box-shadow:
    0 1px 0 rgba(255,240,220,.28) inset,
    0 -2px 4px rgba(0,0,0,.35) inset,
    0 3px 10px rgba(58,32,12,.28);
}
.board::after {                      /* 枠のふちの陰 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(40,22,8,.55) inset;
}

/* ===== 枠の内がわ ===== */
.field {
  position: relative;
  display: flex;
  background: linear-gradient(180deg, #2b1c11 0%, #1d1309 55%, #251810 100%);
  box-shadow: 0 2px 7px rgba(0,0,0,.55) inset;
}

/* ===== 桁 ===== */
.rod {
  position: relative; flex: none;
  width: var(--pitch);
  height: calc(7 * var(--u) + var(--beam));
}
.rail {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: max(2px, calc(var(--u) * 0.12));
  margin-left: calc(max(2px, calc(var(--u) * 0.12)) / -2);
  background: linear-gradient(90deg, #4a3a22 14%, #9d8a63 48%, #56452b 84%);
  box-shadow: 0 0 2px rgba(0,0,0,.6);
}
.rod.is-lit .rail { background: linear-gradient(90deg, #7c6a44, #f0dcb0 45%, #8c7650); }

/* ===== 珠 ===== */
.bead {
  position: absolute; left: 50%;
  width: var(--bw); height: var(--u);
  margin-left: calc(var(--bw) / -2);
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  transition: transform 110ms cubic-bezier(.22,.85,.3,1);
  transform: translateY(calc(var(--y, 0) * var(--u)));
}
.bead.heaven { top: 0; }
.bead.earth  { top: calc(2 * var(--u) + var(--beam)); }
.soroban.is-dragging .bead { transition: none; }

/* ヒントで光らせる珠 */
.bead.is-hint { animation: beadPulse 1.1s ease-in-out infinite; }
@keyframes beadPulse {
  0%, 100% { filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
  50%      { filter: drop-shadow(0 0 7px #ffd98a) drop-shadow(0 0 14px #ffb347); }
}

/* ===== 梁（はり） ===== */
.beam {
  position: absolute; left: 0; right: 0;
  top: calc(2 * var(--u));
  height: var(--beam);
  background:
    linear-gradient(180deg, #8a6134 0 8%, #4a2d14 26%, #221307 68%, #120a03 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.65), 0 -1px 2px rgba(0,0,0,.45);
  pointer-events: none;
}
.beam .dot {
  position: absolute; top: 50%; left: calc((var(--i) + 0.5) * var(--pitch));
  width: max(3px, calc(var(--u) * 0.17)); aspect-ratio: 1;
  margin: 0; transform: translate(-50%, -50%);
  border-radius: 50%; background: #f3e6cd;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}

/* ===== 一の位のしるし ===== */
.ones-row {
  position: relative;
  height: 30px;
  margin: 2px var(--frame) 0;
}
.ones-marker {
  position: absolute; top: 0;
  left: calc((var(--i) + 0.5) * var(--pitch));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  color: var(--shu); cursor: grab; touch-action: none;
  transition: left 140ms cubic-bezier(.22,.85,.3,1);
}
.ones-marker:active { cursor: grabbing; }
.ones-marker .tri { font-size: 13px; line-height: 1; }
.ones-marker .lbl { font-size: 11px; line-height: 1.4; white-space: nowrap; }
.ones-marker.is-locked { cursor: default; opacity: .85; }

/* ===== 位の名前 ===== */
.places {
  position: relative; height: 18px;
  margin: 0 var(--frame) 4px;
  color: var(--ink-soft);
}
.places span {
  position: absolute; top: 0;
  left: calc((var(--i) + 0.5) * var(--pitch));
  transform: translateX(-50%);
  font-size: 11px; line-height: 1.5; white-space: nowrap;
}

/* ===== 読み取った数 =====
   ふだんは伏せておく。珠を読むのが先で、数はたしかめに使うもの。
   出したときに下が動かないよう、場所は空けたまま隠す。 */
.readout {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 4px 14px; margin: 10px auto 0; text-align: center;
  visibility: hidden;
}
body.reveal .readout { visibility: visible; }
.readout .num {
  font-size: clamp(1.5rem, 5.5vw, 2.3rem); font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.readout .kanji { font-size: 0.95rem; color: var(--ink-soft); }

/* ===== 盤のまわりのボタン ===== */
.board-tools {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 14px;
}

/* ===== 大きくうつすモード ===== */
body.stage { background: #14100c; }
body.stage .topbar,
body.stage .site-foot,
body.stage .drill,
body.stage .hero,
body.stage .hide-on-stage { display: none !important; }
/* 盤は画面の真ん中。上は数の席、下はボタンの席をあけておく（重ならないように） */
body.stage .board-sec {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 92px 0 96px;
}
body.stage .soroban-wrap {
  /* 映す場面なので、せまい画面でも17けたが全部入るようにする（下限を切らない） */
  --pitch: min(96px, calc((100vw - 28px) / 17));
  justify-content: center; padding: 0; overflow-x: hidden;
}
/* 大きくうつしているときは、数をいったん伏せる。
   「いくつでしょう」と聞いてから出せるように。 */
body.stage .readout { position: fixed; top: 20px; left: 0; right: 0; margin: 0; z-index: 3; }
body.stage .readout .num { color: #f6ecdc; }
body.stage .readout .kanji { color: #b6a892; }
body.stage .places { color: #b6a892; }
body.stage .stage-exit { display: inline-flex !important; }
.stage-exit { display: none; }
body.stage .board-tools { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; margin: 0; z-index: 3; }

@media (max-width: 600px) {
  .ones-marker .lbl { font-size: 10px; }
  .places span { font-size: 10px; }
}

/* ===== 使わない桁を落とす（3年の面）=====
   桁を消さずに暗くする。本物のそろばんは17桁のままで、見るところだけ明るくする。 */
.rod.is-dim .bead { opacity: .5; filter: saturate(.45) brightness(.72); }
.rod.is-dim .rail { opacity: .6; }
.rod.is-dim { pointer-events: none; }
.rod.is-dim .bead.is-hint { animation: none; }

/* ===== 手順の言いかた（1手ずつ）===== */
.beat-say {
  margin-top: 12px; padding: 10px 14px;
  border-left: 3px solid var(--ai);
  font-size: 1rem; color: var(--ink);
}
.beat-say b { color: var(--ai); font-weight: 600; }
.beat-say .why {
  display: block; margin-top: 4px;
  font-size: 0.88rem; color: var(--ink-soft);
  word-break: auto-phrase; text-wrap: pretty;
}

/* せまくて字が重なるときだけ、小数第二位の名前を下の段におろす */
.soroban-wrap.fit-all .places { height: 32px; }
.soroban-wrap.fit-all .places span { font-size: 10px; }
.soroban-wrap.fit-all .places span[data-row="2"] { top: 14px; }
/* 大きくうつすモードも、せまい画面では同じように段を分ける */
@media (max-width: 760px) {
  body.stage .places { height: 32px; }
  body.stage .places span { font-size: 10px; }
  body.stage .places span[data-row="2"] { top: 14px; }
}