/* 足して10 固有の見た目（共通は ../common/base.css） */
.board-wrap { max-width: none; --ratio: 6 / 7; }

/* 盤: 画面の高さに合わせて幅を決める（スマホでも上のバーから下のボタンまで1画面に） */
.grid {
  --cols: 6; --rows: 7; --gap: clamp(3px, 0.8vw, 7px);
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: var(--gap);
  width: min(100%, 520px, calc((100svh - 330px) * var(--cols) / var(--rows))); min-width: min(100%, 260px);
  aspect-ratio: var(--ratio); margin: 0 auto; padding: var(--gap);
  background: var(--board); border-radius: var(--radius); border: 1px solid var(--line);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.grid.practice { width: min(100%, 440px, calc(100svh - 380px)); }
@media (min-width: 700px) { .grid { width: min(100%, 520px, calc((100svh - 310px) * var(--cols) / var(--rows))); } }
.cell { position: relative; min-width: 0; min-height: 0; }
.cell.empty.cursor { outline: 3px solid var(--warn); outline-offset: -2px; border-radius: var(--radius); }
.tile {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  padding: 0; margin: 0; border-radius: 8px; cursor: pointer; font: inherit; color: #1F2328;
  background: #FFFFFF; border: 2px solid #858891; filter: var(--shadow-piece);
  transition: transform var(--dur), background-color var(--dur), border-color var(--dur), opacity var(--dur);
  container-type: size;
}
.tile .num { font-weight: 700; font-size: 58cqh; line-height: 1; font-variant-numeric: tabular-nums; }
.with-dots .tile .num { font-size: 44cqh; }
.tile .tdots { width: 70%; height: auto; }
.tile .tdots .on { fill: #2F5D8A; }
.tile .tdots .off { fill: none; stroke: #B9B4A8; stroke-width: 1; }
.tile:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.tile.cursor { outline: 3px solid var(--warn); outline-offset: 2px; }
.tile.reach { border: 2px dashed #2F5D8A; }
.tile.sel { background: #DCE8F4; border: 3px solid #2F5D8A; transform: translateY(-2px); filter: var(--shadow-lift); }
.tile.hint { border: 3px solid #9A6415; background: #FBEFD9; animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(154,100,21,.0); } to { box-shadow: 0 0 0 5px rgba(154,100,21,.35); } }
.tile .ord { position: absolute; top: 3%; left: 6%; font-size: 22cqh; font-weight: 700; color: #2F5D8A; line-height: 1; }
.tile.bad { animation: shake .4s; border-color: #B23A3A; background: #F8E1E0; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.tile.vanish { transform: scale(.4); opacity: 0; transition: transform .35s ease-in, opacity .35s ease-in; }
.grid.mixing .tile { animation: mixin .4s ease-out; }
@keyframes mixin { from { transform: scale(.6) rotate(-8deg); opacity: .2; } to { transform: none; opacity: 1; } }
.grid.paused .tile { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile.vanish { transition: none; }
  .tile.hint, .tile.bad, .grid.mixing .tile { animation: none; }
}

/* 選んだ順の線（盤の上に重ねる。数字に重ならないよう端を短く） */
.pathsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.pathsvg line { stroke: #2F5D8A; stroke-linecap: round; opacity: .85; }

/* 点の文字（盤の地はダーク表示でも明るいので、色は固定） */
.float { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 20px; color: #2E7D4F; pointer-events: none; z-index: 4;
  text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF; animation: rise 1s ease-out forwards; }
@keyframes rise { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -36px; } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* 下の図（さくらんぼの図・10のわく）と式 */
.helper { display: flex; flex-direction: column; align-items: center; margin: 8px auto 0; max-width: 520px; }
.helper-fig { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; }
.helper-fig svg { display: block; height: 80px; width: auto; }
.helper-fig svg.cherry { height: 96px; }
.helper-eq { margin: 2px 0 0; min-height: 1.75em; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.helper[data-state="ok"] .helper-eq b { color: var(--ok); }
.helper[data-state="ng"] .helper-eq { color: var(--ng); }
.cherry .stem { stroke: var(--ink-sub); stroke-width: 3; fill: none; stroke-linecap: round; }
.cherry circle { stroke-width: 2.5; }
.cherry .c-top { fill: var(--surface); stroke: var(--ink); }
.cherry .c-a { fill: var(--accent-soft); stroke: var(--accent); }
.cherry .c-b { fill: var(--surface); stroke: var(--ok); }
.cherry .c-q { fill: var(--surface); stroke: var(--ink-sub); stroke-dasharray: 5 4; }
.cherry .c-empty { fill: var(--surface); stroke: var(--line-strong); stroke-dasharray: 5 4; }
.cherry text { font-size: 22px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-family: var(--font); }
.frame .fcell { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.frame .fa { fill: var(--accent); }
.frame .fb { fill: var(--ok); }
.frame .fc { fill: var(--warn); }
.frame .fover { fill: var(--ng); font-weight: 700; font-size: 18px; text-anchor: end; dominant-baseline: central; font-family: var(--font); }
.helper[data-state="ng"] .frame .fcell { stroke: var(--ng); }

/* 上のバー */
.hud { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-variant-numeric: tabular-nums; }
.hud .lv { font-weight: 700; }
.hud b { font-size: 1.15em; }
.hud .sub { color: var(--ink-sub); font-weight: 400; }
.message[data-tone="ok"] { color: var(--ok); font-weight: 700; }
.message[data-tone="ng"] { color: var(--ng); }

.play-main { justify-content: center; }
.play-main .btn { min-width: 96px; white-space: nowrap; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* 一時停止・行き止まり */
.pause-box {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; width: max-content; max-width: 92%;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 24px; text-align: center;
}
.pause-title { font-weight: 700; font-size: 1.2rem; margin: 0 0 10px; }
.stuck-note { margin: 0 0 4px; font-size: 15px; color: var(--ink-sub); max-width: 26em; }
.stuck-box .controls { justify-content: center; }

.result-box { z-index: 6; inset: 8% 6% auto; }
.result-box .big { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.result-box dl { display: grid; grid-template-columns: auto auto; gap: 2px 16px; justify-content: center; margin: 0 0 8px; }
.result-box dt { color: var(--ink-sub); text-align: right; }
.result-box dd { margin: 0; text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; }
.result-box .new { color: var(--ok); font-weight: 700; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .result-box { inset: 4% 2% auto; padding: 14px; }
  .result-box h2 { font-size: 1.3rem; }
  .hud { gap: 0 10px; font-size: .95rem; }
  .turnbar { margin-bottom: 6px; }
  .controls { margin-top: 8px; }
  .helper-fig svg { height: 56px; }
  .helper-fig svg.cherry { height: 68px; }
  .play-main .btn { min-width: 0; flex: 1; padding: 0 8px; font-size: 16px; }
  .linkbtn { display: none; }
  .pause-box { padding: 14px 12px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@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: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */