/* 行動でわかる性格ゲーム */
:root {
  --accent: #5b44c4; --accent-soft: #ebe6fb; --accent-ink: #ffffff;
  --k-sky: #1b2350; --k-star: #fff6c8; --k-moon: #ffe7a0; --k-bld: #2b3368; --k-win: #ffd27a; --k-win-off: #39417a;
  --k-ground: #2a2440; --k-house: #3b3a6e; --k-lit: #ffcf6e; --k-door: #6a4a3a; --k-pole: #6b6f86; --k-lamp: #ffe08a; --k-glow: rgba(255, 210, 120, .25);
  --k-line: #8b8fb0; --k-shutter: #59608e; --k-road: #4a4f78; --k-river: #3c64a8; --k-stall: #c9573c; --k-roof: #e8a33d; --k-roof2: #ffffff;
  --k-box: #b58b5a; --k-seat: #a06a3a; --k-bush: #2f5a46; --k-sign: #3db37a; --k-person: #c7cbe0; --k-wallb: #6d5f8f; --k-torii: #e2483a;
  --k-say: #f3f0fb; --k-detour: #fff4dd; --k-urgent: #fde7e7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #a99bff; --accent-soft: #2a2552; --accent-ink: #12102a; --k-say: #1f2240; --k-detour: #33291a; --k-urgent: #3a1d22; }
}
:root[data-theme="dark"] { --accent: #a99bff; --accent-soft: #2a2552; --accent-ink: #12102a; --k-say: #1f2240; --k-detour: #33291a; --k-urgent: #3a1d22; }

.k-hero { border-radius: var(--radius); overflow: hidden; line-height: 0; box-shadow: var(--shadow); }
.k-art { width: 100%; height: auto; display: block; aspect-ratio: 360 / 150; }
.k-sky { fill: var(--k-sky); } .k-star { fill: var(--k-star); } .k-moon { fill: var(--k-moon); } .k-bld { fill: var(--k-bld); }
.k-win { fill: var(--k-win); } .k-win-off { fill: var(--k-win-off); } .k-ground { fill: var(--k-ground); } .k-house { fill: var(--k-house); }
.k-lit { fill: var(--k-lit); } .k-door { fill: var(--k-door); } .k-pole { fill: var(--k-pole); stroke: var(--k-pole); } .k-lamp { fill: var(--k-lamp); }
.k-glow { fill: var(--k-glow); } .k-line { stroke: var(--k-line); stroke-width: 2; fill: none; } .k-shutter { fill: var(--k-shutter); }
.k-road { fill: var(--k-road); } .k-river { fill: var(--k-river); } .k-stall { fill: var(--k-stall); } .k-roof { fill: var(--k-roof); }
.k-roof2 { stroke: var(--k-roof2); stroke-width: 3; opacity: .6; } .k-box { fill: var(--k-box); } .k-seat { fill: var(--k-seat); }
.k-bush { fill: var(--k-bush); } .k-sign { fill: var(--k-sign); } .k-person { fill: var(--k-person); } .k-wallb { fill: var(--k-wallb); }
.k-torii { fill: var(--k-torii); } .k-bang { fill: var(--k-lamp); font-size: 22px; font-weight: 900; }
.k-tw { animation: k-tw 2.4s ease-in-out infinite; }
@keyframes k-tw { 50% { opacity: .2; } }
.k-glow { animation: k-glow 3s ease-in-out infinite; }
@keyframes k-glow { 50% { opacity: .5; } }

.k-scene-title { font-size: 22px; margin: 4px 0 0; }
.k-text { font-size: 17px; line-height: 1.85; }
.k-urgent .k-text { background: var(--k-urgent); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.k-urgent .k-hero { animation: mn-shake .4s 2; }
.k-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.k-tools .mn-btn { min-height: 44px; font-size: 14px; padding: 8px 12px; }
.k-spot { border-style: dashed; }
.k-detour { background: var(--k-detour); }
.k-ico { display: inline-flex; color: var(--accent); }
.k-log { display: grid; gap: 6px; }
.k-log:empty { display: none; }
.k-say { margin: 0; background: var(--k-say); border-radius: 10px; padding: 8px 12px; font-size: 15px; animation: mn-in .3s ease-out; }
.k-say-detour { background: var(--k-detour); }
.k-react { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; font-weight: 700; }

.k-friend { display: flex; gap: 12px; align-items: center; }
.k-friend-char svg { display: block; }
.k-result { padding-top: 22px; }
.k-char svg { display: block; margin: 0 auto; }
.k-code { font-size: 28px; font-weight: 900; letter-spacing: .3em; color: var(--accent); margin: 4px 0 0 .3em; }
.k-type { font-size: clamp(28px, 8vw, 38px); font-weight: 900; margin: 4px 0 6px; }
.k-axis-lab { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text-sub); font-weight: 700; }
.k-axis-lab .on { color: var(--accent); }
.k-axis-bar { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; }
.k-axis-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .8s ease-out; }
.k-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.k-stat { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.k-stat b { font-size: 20px; }
.k-pair { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.k-pair-mid { text-align: center; flex: 1; min-width: 0; }
.k-pair .mn-big { font-size: clamp(36px, 11vw, 56px); }
.k-zukan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.k-zk { text-align: center; background: var(--surface-2); border-radius: 10px; padding: 6px 4px; line-height: 1.3; }
.k-zk svg { display: block; margin: 0 auto; }
.k-zk-q { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: var(--text-sub); }
.k-zk-off { opacity: .6; }
.k-daily .mn-daily-num { font-size: 22px; }