/* 明かり消しパズル 固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.lamp-box { aspect-ratio: 1 / 1; }
svg.lamps { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
svg.lamps text { pointer-events: none; }

/* 盆: 焦げ茶の木の台（夜の部屋のように、明かりが映える） */
svg.lamps .tray { fill: #3A2D23; }
svg.lamps .tray-in { fill: #2F241C; stroke: #4A3A2D; stroke-width: 3; }

/* 明かり: 木の枠＋紙。手で触る物なので薄い影を1段 */
svg.lamps .lamp { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
svg.lamps .frame { fill: #1F1711; }
svg.lamps .paper-off { fill: #5A4E43; }
svg.lamps .lattice line { stroke: #2A2019; stroke-width: 3; opacity: .55; }
svg.lamps .lamp.on .lattice line { opacity: .32; }
svg.lamps .pip { fill: #5A3413; }
/* 点く・消えるは、紙の明るさをふわっと切り替える */
svg.lamps .lit, svg.lamps .halo, svg.lamps .pip { opacity: 0; transition: opacity .22s ease-out; }
svg.lamps .halo { pointer-events: none; transition-duration: .3s; }
svg.lamps.instant .lit, svg.lamps.instant .halo, svg.lamps.instant .pip { transition: none !important; }
svg.lamps .body { transform-box: fill-box; transform-origin: center; }
svg.lamps .body.bump { animation: bump .2s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(.94); } 100% { transform: scale(1); } }
svg.lamps.solved .lamp .body { animation: rest .5s ease-out both; }
@keyframes rest { 0% { transform: none; } 40% { transform: translateY(-5px); } 100% { transform: none; } }

/* ヒント: 押すマスを注意色の点線で囲む。回数（3段階で2回のとき）は小さな丸 */
svg.lamps .hint-box { fill: none; stroke: #E5A23A; stroke-width: 9; stroke-dasharray: 24 12; pointer-events: none; }
svg.lamps .hint-badge circle { fill: #B7791F; stroke: #FFF6E0; stroke-width: 4; }
svg.lamps .hint-badge text { fill: #FFFFFF; font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
/* キーボードのカーソルと、押すと変わるマス */
svg.lamps .cursor { fill: none; stroke: #8FB8E0; stroke-width: 8; pointer-events: none; }
svg.lamps .reach { fill: none; stroke: rgba(255, 244, 214, .7); stroke-width: 4; stroke-dasharray: 10 8; pointer-events: none; }

/* 手番のバー: 大きさ・手数・時計 */
.status { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.st-name { white-space: nowrap; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter b { font-size: 1.15em; }
.counter small { color: var(--ink-sub); font-weight: 700; font-size: 14px; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 56px; text-align: right; margin-left: auto; }
.lv { 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); }

/* ヒント */
.think { margin: 10px auto 0; border: 2px solid var(--line); border-left: 6px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.think h3 { margin: 0 0 4px; font-size: 16px; }
.think p { margin: 0 0 6px; }
.think p:last-child { margin-bottom: 0; }

.custom { border-left: 4px solid var(--line); padding-left: 12px; margin-bottom: 8px; }
.custom .field { margin-bottom: 10px; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain:disabled { opacity: .45; }

/* 結果は盤の下に出す（消えた盤を隠さない） */
.result-box { position: static; margin: 10px auto 0; padding: 16px 20px; max-width: 560px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.result-box .big { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; }
.callout { z-index: 3; }

@media (max-width: 420px) {
  .stage { padding: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  svg.lamps .lit, svg.lamps .halo, svg.lamps .pip { transition: none; }
  svg.lamps .body.bump, svg.lamps.solved .lamp .body { animation: none; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; } }
@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.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.25; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */