/* 帰省サバイバル（実家の72時間） — 色はすべてCSS変数 */
:root {
  --accent: #b4413b; --accent-ink: #ffffff; --accent-soft: #f8e1dc;
  --sky0: #ffe3c2; --sky1: #bfe3ff; --sky2: #ffb38a; --sky3: #1c2347;
  --sun: #ffcf4d; --moon: #fff3c4; --hill: #c9d9b4; --ground: #a9c08f; --roof: #6b2f25; --wall: #f6e7cf; --win: #ffe39a; --winoff: #d6e4ef;
  --frame: #8a5a3a; --door: #8a4a32; --chim: #7a3b2a; --smoke: rgba(255, 255, 255, .7); --bamboo: #3f8a55; --pine: #2b6b40; --plate: #d8cbb8; --orange: #f39c2c; --leaf: #3f8a55;
  --c1: #f3a6a0; --c2: #9cc0e8; --c3: #c9b18a; --c4: #f6cf6a; --c5: #a8d5a2; --c6: #d2b4e6; --c7: #b8bcc6; --c0: #ffd27a;
  --g-hp: #e2685f; --g-money: #e0a92b; --g-smile: #e88db1; --star: #f0b429;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff8a7a; --accent-ink: #2a1210; --accent-soft: #3d1f1e;
    --sky0: #4a3a52; --sky1: #2e4a6b; --sky2: #6b3a3a; --hill: #3d4f3a; --ground: #33452f; --wall: #d9c9ae; --plate: #6b6152;
  }
}
:root[data-theme="dark"] {
  --accent: #ff8a7a; --accent-ink: #2a1210; --accent-soft: #3d1f1e;
  --sky0: #4a3a52; --sky1: #2e4a6b; --sky2: #6b3a3a; --hill: #3d4f3a; --ground: #33452f; --wall: #d9c9ae; --plate: #6b6152;
}

/* 絵 */
.ks-hero { text-align: center; }
.ks-scene { width: 100%; height: auto; display: block; border-radius: 14px; }
.ks-scene-big { max-width: 420px; margin: 0 auto; }
.ks-sky-0 .ks-sky { fill: var(--sky0); } .ks-sky-1 .ks-sky { fill: var(--sky1); } .ks-sky-2 .ks-sky { fill: var(--sky2); } .ks-sky-3 .ks-sky { fill: var(--sky3); }
.ks-sun { fill: var(--sun); } .ks-sky-3 .ks-sun { fill: var(--moon); }
.ks-star { fill: var(--moon); }
.ks-hill { fill: var(--hill); } .ks-ground { fill: var(--ground); }
.ks-roof { fill: var(--roof); } .ks-wall { fill: var(--wall); } .ks-win { fill: var(--winoff); } .ks-sky-2 .ks-win, .ks-sky-3 .ks-win { fill: var(--win); }
.ks-frame { stroke: var(--frame); stroke-width: 2; } .ks-door { fill: var(--door); } .ks-chim { fill: var(--chim); }
.ks-smoke circle { fill: var(--smoke); animation: ks-smoke 3s ease-in-out infinite; }
.ks-smoke circle:nth-child(2) { animation-delay: .5s; } .ks-smoke circle:nth-child(3) { animation-delay: 1s; }
.ks-bamboo { fill: var(--bamboo); } .ks-pine { fill: var(--pine); } .ks-plate { fill: var(--plate); } .ks-orange { fill: var(--orange); }
.ks-leaf { stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; }
@keyframes ks-smoke { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-3px); } }

/* プレイ */
.ks-play > * + * { margin-top: 10px; }
.ks-top { position: relative; }
.ks-when { display: flex; align-items: baseline; margin-bottom: 6px; }
.ks-when > div { display: flex; align-items: baseline; gap: 4px; width: 100%; flex-wrap: wrap; }
.ks-when b { font-size: 18px; }
.ks-count { margin-left: auto; }
.ks-scene-box .ks-scene { height: 110px; }
.ks-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ks-g { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; min-width: 0; }
.ks-g-top { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ks-g-n { font-size: 11px; color: var(--text-sub); width: 100%; line-height: 1.3; }
.ks-g-v { font-size: 15px; }
.ks-g-d { font-size: 12px; font-weight: 900; margin-left: auto; }
.ks-up { color: var(--good); } .ks-down { color: var(--bad); }
.ks-g-bar { height: 7px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 2px; }
.ks-g-bar > i { display: block; height: 100%; border-radius: 99px; transition: width .5s; }
#g-hp .ks-g-bar > i { background: var(--g-hp); } #g-money .ks-g-bar > i { background: var(--g-money); } #g-smile .ks-g-bar > i { background: var(--g-smile); }
.ks-g-bar.ks-low { outline: 2px solid var(--bad); outline-offset: 1px; }
.ks-body > * + * { margin-top: 10px; }
.ks-dayin { text-align: center; background: var(--accent); color: var(--accent-ink); border-radius: 16px; padding: 22px 16px; display: grid; gap: 2px; }
.ks-dayin b { font-size: 30px; } .ks-dayin small { opacity: .85; }
.ks-ev-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ks-ev-head small { color: var(--text-sub); }
.ks-ev-t { font-size: 20px; margin: 0; }
.ks-ev-text { margin: 0; }
.ks-av { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: #2a2a2a; flex: none; background: var(--c0); }
.ks-c1 { background: var(--c1); } .ks-c2 { background: var(--c2); } .ks-c3 { background: var(--c3); } .ks-c4 { background: var(--c4); } .ks-c5 { background: var(--c5); } .ks-c6 { background: var(--c6); } .ks-c7 { background: var(--c7); }
.ks-opt.ks-picked { border-color: var(--accent); background: var(--accent-soft); }
.ks-opt.ks-faded { opacity: .45; }
.ks-res { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.ks-res p { margin: 0 0 6px; }
.ks-res .mn-meta { margin: 6px 0 0; }
.ks-note { font-size: 13px; color: var(--text-sub); border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 8px !important; }

/* 結果 */
.ks-surv { font-weight: 800; color: var(--text-sub); margin: 0; }
.ks-type { font-size: clamp(30px, 9vw, 44px); font-weight: 900; color: var(--accent); line-height: 1.25; margin: 4px 0 6px; }
.ks-stars { font-size: 30px; letter-spacing: 4px; color: var(--line); margin-bottom: 6px; }
.ks-stars .on { color: var(--star); }
.ks-log { padding-left: 1.4em; margin: 6px 0 0; }
.ks-log li { margin-bottom: 4px; }
.ks-log-w { color: var(--text-sub); }
.ks-zukan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }