/* マッチ棒パズル固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-area { position: relative; }

/* ---------- 問題のカード ---------- */
.card { background: var(--board); color: #1F2328; border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 10px 12px; }
.prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 0; margin-bottom: 4px; }
.prog:empty { display: none; }
.prog i {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9C4B8; background: #FFFFFF; font-style: normal;
  font-size: 13px; line-height: 1; font-weight: 700; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
}
.prog i.now { border-color: #2F5D8A; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #2F5D8A; }
.prog i.ok { background: #2E7D4F; border-color: #2E7D4F; }
.prog i.hint { background: #FFFFFF; border-color: #2E7D4F; }
.prog i.ng { background: #B23A3A; border-color: #B23A3A; }
.prog i.ok::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.prog i.hint::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2E7D4F; }
.prog i.ng::after { content: '×'; }

.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: #5B616B; font-weight: 700; }
.qno { font-variant-numeric: tabular-nums; }
.qlv { border: 1px solid #858891; border-radius: 999px; padding: 0 8px; }
.qsolved { color: #2E7D4F; }
.qmoved { margin-left: auto; font-size: 15px; color: #3B4048; }
.qmoved b { font-size: 18px; color: #2F5D8A; }
.qmoved.full b { color: #1F2328; }
.qtask { margin: 4px 0 8px; font-size: 18px; font-weight: 700; text-align: center; color: #1F2328; line-height: 1.6; }

/* ---------- 盤（深い緑の布の上に木の棒） ---------- */
.board-wrap { max-width: none; background: #2F4A40; border-radius: 8px; padding: 6px; touch-action: none; }
.board-svg {
  display: block; margin: 0 auto; width: 100%;
  max-width: min(100%, calc(var(--vbw, 440) * 1.35px));
  max-height: 58vh; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.board-svg[data-kind="sq"] { max-width: min(100%, calc(var(--vbw, 300) * 1.3px)); }
.wood { fill: #E2B77A; stroke: #7A4E1E; stroke-width: 1.3; }
.grain { stroke: #F3D8A8; stroke-width: 1.4; stroke-linecap: round; opacity: .9; }
.head { fill: #B83A2E; stroke: #5E1812; stroke-width: 1.3; }
.stick { cursor: grab; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.45)); }
.stick.moved .wood { fill: #EDC78E; }
.stick.sel .wood, .stick.sel .head { stroke: #FFD95A; stroke-width: 3.2; }
.stick.sel { filter: drop-shadow(0 5px 4px rgba(0,0,0,.5)); }
.stick.cur .wood { stroke: #9CC8F0; stroke-width: 3; }
.stick.dragging { opacity: .25; }
.stick.float { opacity: .95; filter: drop-shadow(0 6px 5px rgba(0,0,0,.5)); pointer-events: none; }
.stick.ok .wood { stroke: #7FD6A0; stroke-width: 2.4; }
.stick.shown .wood { stroke: #F2A29C; stroke-width: 2.4; }
.ghost { fill: none; stroke: none; }
#g-ghost .show .ghost { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.7); stroke-width: 1.6; stroke-dasharray: 5 4; }
#g-ghost .show.cur .ghost, #g-ghost .show.target .ghost { fill: rgba(255,217,90,.35); stroke: #FFD95A; stroke-dasharray: none; stroke-width: 2.4; }
.from-mark { fill: none; stroke: rgba(236,221,190,.55); stroke-width: 1.4; stroke-dasharray: 3 4; }
.hint-ring { fill: none; stroke: #FFD95A; stroke-width: 5; opacity: .95; }
.hint-take .hint-ring { animation: blink 1.1s ease-in-out infinite; }
.hint-dest { fill: rgba(255,217,90,.25); stroke: #FFD95A; stroke-width: 2.4; stroke-dasharray: 6 4; }
@keyframes blink { 50% { opacity: .35; } }
.bad-cell { fill: none; stroke: #F2A29C; stroke-width: 2.4; stroke-dasharray: 6 5; }
.bad-mark { fill: none; stroke: #F2A29C; stroke-width: 5; }
.dots circle { fill: rgba(255,255,255,.35); }
.board-wrap.shake { animation: shake .38s ease-out; }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .board-wrap.shake, .hint-take .hint-ring { animation: none; } }

.note { min-height: 1.6em; margin: 8px 0 0; font-size: 16px; font-weight: 700; color: #3B4048; text-align: center; }
.note.ok { color: #2E7D4F; }
.note.ng { color: #B23A3A; }
.note .eq { display: block; font-size: 26px; letter-spacing: .04em; }
.note small { display: block; font-size: 15px; font-weight: 400; color: #3B4048; line-height: 1.6; }

/* ボタンの列 */
.main-ctrl { justify-content: center; }
.main-ctrl .btn { padding: 0 14px; }
#nav { justify-content: center; margin-top: 8px; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.spacer { flex: 1; }
.timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-sub); }
.tag { font-size: 14px; font-weight: 700; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 8px; color: var(--ink-sub); }
.choice .done { font-size: 13px; color: var(--ink-sub); margin-left: 6px; font-weight: 400; }

/* 結果 */
.result-box { position: static; margin: 0 auto; max-width: 560px; }
.result-box .big { margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; }
.result-box .rlist { list-style: none; padding: 0; margin: 8px auto 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; text-align: left; max-width: 480px; }
.rlist li { display: flex; align-items: baseline; gap: 6px; font-size: 16px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.rlist .m { width: 1.4em; flex: none; font-weight: 700; text-align: center; }
.rlist .m.ok, .rlist .m.hint { color: var(--ok); } .rlist .m.ng { color: var(--ng); }
.rlist .to { color: var(--ink-sub); }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .card { padding: 8px 6px 10px; }
  .board-wrap { padding: 4px; }
  .qtask { font-size: 16px; }
  .main-ctrl { display: grid; grid-template-columns: 1fr 1fr; }
  .main-ctrl .btn { padding: 0 8px; }
  .main-ctrl #next { grid-column: 1 / -1; }
  .result-box .rlist { grid-template-columns: 1fr; }
  .result-box { padding: 16px 12px; }
}

/* 図解・結果で使う、動かした棒の印 */
.to-mark .wood { stroke: #FFD95A; stroke-width: 3.4; }
.mb-static .from-mark { stroke: rgba(236,221,190,.8); stroke-width: 1.8; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --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; } }
/* 上のバーの高さ ここまで */