/* 都道府県パズル固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }
:root { --sea: #DCE9F2; --land: #F4F1E8; --ctx: #D9D5CB; --edge: #6B6F76; --hl: #F0A23B; }

.board-wrap { max-width: 640px; }
.map-box { position: relative; background: var(--sea); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
#map { display: block; width: 100%; height: auto; max-height: 56vh; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#map.zoomed { touch-action: none; cursor: grab; }
#map.panning { cursor: grabbing; }
#map .sea { fill: var(--sea); }
#map .coast { fill: none; stroke: var(--edge); stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#map .pref { stroke: var(--edge); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; fill-rule: evenodd; }
#map .pref.slot, #map .pref.plain { fill: var(--land); }
#map .pref.ctx { fill: var(--ctx); stroke: #9C9A93; }
#map .pref.placed { stroke: #3F4349; }
#map .pref.hl { fill: var(--hl); stroke: #7A4A0C; stroke-width: 2px; }
#map .pref.ng { fill: #F2B8B2; stroke: #B23A3A; }
#map.no-lines .pref.slot, #map.no-lines .pref.plain { stroke: var(--land); }
#map .pref.pickable { cursor: pointer; }
#map .inset-box { fill: var(--sea); stroke: #8A9099; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
#map .inset-title { fill: #4D535B; font-weight: 700; dominant-baseline: hanging; }
#map .label { fill: #1F2328; font-weight: 700; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: .25em; pointer-events: none; }
#map .glow { fill: rgba(240,162,59,.35); stroke: #D9480F; stroke-width: 3px; vector-effect: non-scaling-stroke; animation: blink-glow .7s ease-in-out infinite alternate; pointer-events: none; }
#map .glow-ring { fill: none; stroke: #D9480F; stroke-width: 2.5px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; pointer-events: none; animation: blink-glow .7s ease-in-out infinite alternate; }
#map .cap-o { fill: #FFFFFF; stroke: #1F2328; }
#map .cap-i { fill: #1F2328; }
#map .cap-t { fill: #1F2328; font-weight: 700; dominant-baseline: central; paint-order: stroke; stroke: #FFFFFF; }
#map .hl-ring { fill: none; stroke: #D9480F; stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
@keyframes blink-glow { from { opacity: 1; } to { opacity: .35; } }

/* 地図のすぐ下: ヒントと、拡大・縮小のボタン */
.map-tools { display: flex; align-items: center; gap: 8px; margin: 8px auto 0; max-width: 640px; }
.map-tools .spacer { flex: 1; }
.zoom { display: flex; gap: 6px; }
.zbtn {
  appearance: none; font: inherit; width: 44px; height: 44px; border-radius: var(--radius); border: 2px solid var(--line);
  background: var(--surface); color: var(--accent); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
  touch-action: manipulation;
}
.zbtn.wide { width: auto; padding: 0 12px; font-size: 15px; }
.zbtn:disabled { opacity: .4; cursor: default; }
.zbtn:focus-visible { outline: 3px solid var(--warn); outline-offset: 1px; }

/* 形のクイズ（地図の上に重ねる） */
.shape-card { position: absolute; inset: 0; background: var(--board); display: flex; align-items: center; justify-content: center; padding: 16px; }
.shape-card svg { width: 80%; height: 80%; max-height: 360px; }
.shape-card .piece-shape { fill: #CFE0EE !important; stroke: #2F5D8A; stroke-width: 2.5px; }

/* トレイ（ピースの置き場） */
.stage { -webkit-user-select: none; user-select: none; }
.tray {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 10px 4px 8px; margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 110px; scroll-snap-type: x proximity;
}
.tray.two { grid-template-rows: auto auto; }
.card-p {
  appearance: none; font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--line-strong); border-radius: var(--radius);
  width: 84px; height: 96px; padding: 4px 2px 2px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; scroll-snap-align: start; position: relative;
}
.card-p svg { width: 60px; height: 56px; flex: none; pointer-events: none; }
.card-p .nm { font-size: 14px; font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; pointer-events: none; }
.card-p .nm rt { font-size: 10px; font-weight: 400; }
.card-p.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.card-p.dragging { opacity: .35; }
.card-p.miss { animation: shake .35s ease-out; }
.card-p:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.card-p .tag { position: absolute; top: 2px; right: 4px; font-size: 14px; color: var(--ng); font-weight: 700; pointer-events: none; }
.piece-shape { stroke: #3F4349; stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; fill-rule: evenodd; }
@keyframes shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

/* ドラッグ中のピース（画面全体に重ねた SVG） */
.drag-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; overflow: visible; }
.drag-layer .piece-shape { filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); stroke-width: 1.6px; }
.drag-layer .ring { fill: none; stroke: #D9480F; stroke-width: 2px; stroke-dasharray: 5 4; }

/* クイズ */
.quiz { margin-top: 10px; }
.question { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; text-align: center; min-height: 1.6em; }
.question ruby rt { font-size: .55em; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ans {
  appearance: none; font: inherit; font-size: 20px; font-weight: 700; min-height: 60px; padding: 4px 8px; border-radius: var(--radius);
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation; line-height: 1.25;
  position: relative;
}
.ans rt { font-size: 11px; font-weight: 400; }
.ans .num { position: absolute; left: 6px; top: 3px; font-size: 14px; line-height: 1.2; color: var(--ink-sub); font-weight: 400; }
.ans:active:not(:disabled) { transform: translateY(1px); }
.ans:disabled { cursor: default; }
.ans.right { background: #E6F3EA; border-color: #2E7D4F; color: #1E5A38; }
.ans.wrong { background: #FBE9E7; border-color: #B23A3A; color: #8E2626; }
.ans:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.after { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; }
.explain { margin: 0; font-weight: 700; flex: 1; min-width: 200px; }
.explain.ng { color: var(--ng); }
.explain.ok { color: var(--ok); }
.prog { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin: 0 0 6px; }
.prog i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C9C4B8; background: var(--surface); }
.prog i.now { border-color: var(--accent); }
.prog i.ok { background: #2E7D4F; border-color: #2E7D4F; }
.prog i.ng { background: #B23A3A; border-color: #B23A3A; }

/* 結果 */
#result.result-box { position: static; margin: 10px auto 0; max-width: 560px; }
.result-box .big { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.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; }
.result-box .miss-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.result-box .miss-list span { border: 2px solid var(--ng); color: var(--ng); border-radius: 6px; padding: 0 8px; font-weight: 700; }

.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 64px; text-align: right; margin-left: auto; }
.tag-s { 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); }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.regions .choice span { font-weight: 700; position: relative; }
.regions .choice span .star { font-size: 14px; color: #B7791F; margin-left: 4px; }
.callout { z-index: 5; top: 12%; }

@media (max-width: 420px) {
  .stage { padding: 8px; }
  .tray { grid-auto-columns: 76px; gap: 6px; }
  .card-p { width: 76px; height: 90px; }
  .card-p svg { width: 54px; height: 50px; }
  .ans { font-size: 18px; min-height: 54px; }
  .controls .btn.icon { padding: 0 9px; }
  .zbtn { width: 40px; height: 40px; font-size: 22px; }
  .zbtn.wide { font-size: 14px; padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #map .glow, #map .glow-ring, .card-p.miss { animation: none; }
}
.howto img.narrow { max-width: 560px; }
/* 上のバーの高さを一定に（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: 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; } }
/* 上のバーの高さ ここまで */