/* シルエット県当て */
:root { --accent: #1f6f78; --accent-ink: #ffffff; --accent-soft: #dcefee; --bg: #eef3f1; --map-sea: #dfeef0; --map-grid: #9fc4c8; --land-a: #2f5d50; --land-b: #18352d; --hatch: rgba(255,255,255,.12); --outline: #0d211c; --ans: #d9473b; --guess: #8fa8a3; --land: #c9d6cf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #6fd0d6; --accent-ink: #062226; --accent-soft: #143a3e; --bg: #0c1517; --map-sea: #122a2e; --map-grid: #2b5158; --land-a: #9fd8c4; --land-b: #5fa58f; --hatch: rgba(0,0,0,.12); --outline: #d7fff2; --ans: #ff7a6b; --guess: #4d6a66; --land: #2d413f; }
}
:root[data-theme="dark"] { --accent: #6fd0d6; --accent-ink: #062226; --accent-soft: #143a3e; --bg: #0c1517; --map-sea: #122a2e; --map-grid: #2b5158; --land-a: #9fd8c4; --land-b: #5fa58f; --hatch: rgba(0,0,0,.12); --outline: #d7fff2; --ans: #ff7a6b; --guess: #4d6a66; --land: #2d413f; }

.ks-hero-wrap { margin: 4px 0 6px; }
.ks-hero { display: block; width: 100%; height: auto; }
.ks-hero-bg { fill: var(--map-sea); stroke: var(--map-grid); stroke-width: 1.5; }
.ks-hero-sil { fill: var(--land-a); }
.ks-hero-q { font-size: 34px; font-weight: 900; fill: var(--accent-ink); }
.ks-hero-rows rect.g { fill: #4caf6e; } .ks-hero-rows rect.y { fill: #e8c34a; } .ks-hero-rows rect.n { fill: var(--guess); }
.ks-hero-arrow { font-size: 20px; font-weight: 900; fill: var(--text); }

/* シルエット */
.ks-sil-box { border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--map-sea) 70%, #fff), var(--map-sea)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ks-sil { display: block; width: 100%; height: auto; max-height: 360px; }
.ks-fill-a { stop-color: var(--land-a); } .ks-fill-b { stop-color: var(--land-b); }
.ks-hatch { stroke: var(--hatch); stroke-width: 6; }
.ks-hatch-fill { pointer-events: none; }
.ks-outline { fill: none; stroke: var(--outline); stroke-width: 4; stroke-linejoin: round; opacity: .6; }
.ks-grid line { stroke: var(--map-grid); stroke-width: 2; stroke-dasharray: 6 10; opacity: .7; }
.ks-compass circle { fill: none; stroke: var(--map-grid); stroke-width: 3; }
.ks-cn { fill: var(--map-grid); } .ks-cn-n { fill: var(--ans); }
.ks-compass text { fill: var(--text-sub); font-size: 30px; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) { .ks-sil-box .ks-shape { animation: ks-rise .8s ease-out both; transform-origin: 500px 500px; } }
@keyframes ks-rise { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ks-note { text-align: center; margin: 2px 0 0; }

.ks-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ks-select { min-height: 52px; font-size: 17px; font-weight: 700; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); min-width: 0; }
.ks-msg { min-height: 1.6em; margin: 0; font-weight: 700; text-align: center; }
.ks-hint { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--text); font-weight: 700; }

.ks-rows { display: grid; gap: 6px; }
.ks-row { display: grid; grid-template-columns: 22px 1fr auto 30px 44px; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ks-row.is-empty { min-height: 44px; background: transparent; border-style: dashed; }
.ks-row.is-ok { border-color: var(--good); background: var(--good-soft); }
.ks-row-n { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.ks-row-name { font-weight: 800; min-width: 0; }
.ks-row-km { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.ks-row-dir { text-align: center; font-size: 18px; }
.ks-arrow { display: inline-block; font-weight: 900; color: var(--accent); }
.ks-row-pct { text-align: right; font-weight: 800; color: var(--accent); }
.ks-row-sq { grid-column: 2 / -1; display: flex; gap: 3px; }
.ks-row-sq i { flex: 1; height: 8px; border-radius: 3px; background: var(--guess); opacity: .45; }
.ks-row-sq i.g { background: #4caf6e; opacity: 1; } .ks-row-sq i.y { background: #e8c34a; opacity: 1; }

/* 結果 */
.ks-reveal { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 12px; border-radius: 16px; background: var(--map-sea); border: 1px solid var(--line); }
.ks-reveal-sil .ks-sil { max-height: 200px; }
.ks-japan { display: block; width: 100%; height: auto; max-height: 240px; }
.ks-jp { fill: var(--land); stroke: var(--map-sea); stroke-width: 1.2; }
.ks-jp.is-guess { fill: var(--guess); }
.ks-jp.is-ans { fill: var(--ans); }
.ks-oki-box { fill: none; stroke: var(--map-grid); stroke-width: 2; stroke-dasharray: 5 5; }
.ks-reveal-name { grid-column: 1 / -1; text-align: center; margin: 0; font-size: 26px; font-weight: 900; }
.ks-reveal-name small { display: block; font-size: 12px; color: var(--text-sub); font-weight: 700; }
.ks-result { text-align: center; }
.ks-title { font-size: 20px; font-weight: 900; margin: 6px 0 4px; }
.ks-rare { display: inline-block; font-size: 12px; background: linear-gradient(90deg, #c9a227, #f3d77a); color: #3a2a00; border-radius: 99px; padding: 1px 10px; margin-right: 6px; vertical-align: middle; }
.ks-squares { font-family: inherit; font-size: 18px; line-height: 1.5; margin: 8px 0 0; white-space: pre; }
.ks-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 6px; }
.ks-stats b { display: block; font-size: 22px; }
.ks-stats span { font-size: 12px; color: var(--text-sub); }
.ks-dist { display: grid; gap: 4px; margin-top: 8px; }
.ks-dist-row { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ks-dist-row span { width: 14px; text-align: right; color: var(--text-sub); }
.ks-dist-row i { font-style: normal; background: var(--guess); color: #fff; border-radius: 4px; padding: 0 6px; text-align: right; min-width: 24px; }
.ks-dist-row i.is-me { background: var(--accent); color: var(--accent-ink); }
.ks-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 3px; margin-top: 6px; }
.ks-zk { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 8px; background: var(--surface-2); font-size: 10px; color: var(--text-sub); padding: 3px; }
.ks-zk .ks-sil { width: 32px; height: 32px; }
.ks-zk.is-got { background: var(--map-sea); color: var(--text); font-weight: 700; }