/* こたつから出られない — 色はすべてCSS変数 */
:root {
  --accent: #b8401f; --accent-ink: #ffffff; --accent-soft: #fae3d8;
  --kd-wall0: #efe3cb; --kd-wall1: #d9c7a6; --kd-tatami: #cfc795; --kd-tatami-line: rgba(120, 110, 60, .25);
  --kd-quilt: #c9482a; --kd-quilt-dot: rgba(255, 214, 140, .7); --kd-quilt-line: rgba(120, 30, 10, .18);
  --kd-top: #b07a48; --kd-top-edge: #e2b98a; --kd-frame: #7a5a3a; --kd-moon: #fff8d8; --kd-flake: #ffffff;
  --kd-ink: #222222; --kd-cheek: #de3c30; --kd-hat: #d23b2a; --kd-hatband: #f4e6d0; --kd-cat: #4a4a52; --kd-arm: #3b6fa8; --kd-mitt: #d23b2a;
  --kd-orange: #f39c2c; --kd-leaf: #3f8a55; --kd-warm: #ef8a3a; --kd-cold: #5d9be0; --kd-stage: #2a1f1a; --kd-rare: #2e86c1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff9a72; --accent-ink: #2a120a; --accent-soft: #3d2219;
    --kd-wall0: #5a4c3a; --kd-wall1: #3f3428; --kd-tatami: #6b6744; --kd-top: #7d5532; --kd-stage: #120c09; --kd-rare: #7fc0ff;
  }
}
:root[data-theme="dark"] {
  --accent: #ff9a72; --accent-ink: #2a120a; --accent-soft: #3d2219;
  --kd-wall0: #5a4c3a; --kd-wall1: #3f3428; --kd-tatami: #6b6744; --kd-top: #7d5532; --kd-stage: #120c09; --kd-rare: #7fc0ff;
}

/* 絵 */
.kd-hero { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.kd-hero-sm { max-width: 420px; margin: 0 auto; }
.kd-hero-svg { display: block; width: 100%; height: auto; }
.kd-hero-photo img, .kd-portrait img { display: block; width: 100%; height: auto; }
.kd-portrait { max-width: 420px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.kd-wall0 { stop-color: var(--kd-wall0); } .kd-wall1 { stop-color: var(--kd-wall1); }
.kd-tatami { fill: var(--kd-tatami); } .kd-tatami-line { stroke: var(--kd-tatami-line); stroke-width: 1; }
.kd-quilt { fill: var(--kd-quilt); } .kd-quilt-dot { fill: var(--kd-quilt-dot); } .kd-quilt-line { stroke: var(--kd-quilt-line); stroke-width: 1; }
.kd-frame { stroke: var(--kd-frame); stroke-width: 4; } .kd-sash { stroke: var(--kd-frame); stroke-width: 2; }
.kd-moon { fill: var(--kd-moon); } .kd-flake { fill: var(--kd-flake); animation: kd-snow 3s linear infinite; }
.kd-cord { stroke: #555; stroke-width: 1.5; } .kd-shade { fill: #f6e7c4; stroke: #c9a66a; stroke-width: 1.5; }
.kd-clockface { fill: #fffaf0; stroke: #6b4a2a; stroke-width: 3; }
.kd-ink { stroke: var(--kd-ink); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.kd-shiver { stroke: #5d9be0; stroke-width: 2.5; stroke-linecap: round; }
.kd-remote-b { fill: #26272c; } .kd-red { fill: #e74c3c; }
.kd-top { fill: var(--kd-top); } .kd-top-edge { stroke: var(--kd-top-edge); stroke-width: 2; }
.kd-orange { fill: var(--kd-orange); } .kd-leaf { stroke: var(--kd-leaf); stroke-width: 3; stroke-linecap: round; }
.kd-catb { fill: var(--kd-cat); } .kd-tail { stroke: var(--kd-cat); stroke-width: 5; fill: none; stroke-linecap: round; }
.kd-zzz { font-size: 12px; fill: #6b6b78; font-weight: 700; }
.kd-arm { stroke: var(--kd-arm); stroke-width: 13; fill: none; stroke-linecap: round; }
.kd-arm-stripe { stroke: rgba(255, 255, 255, .65); stroke-width: 13; fill: none; stroke-dasharray: 4 8; }
.kd-mitt { fill: var(--kd-mitt); }
.kd-hat { fill: var(--kd-hat); } .kd-pom { fill: #ffffff; } .kd-hatband { fill: var(--kd-hatband); }
.kd-face { stroke: rgba(150, 130, 100, .35); stroke-width: 1; }
.kd-kuma { stroke: rgba(70, 60, 80, .5); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.kd-eye { fill: #fff; stroke: var(--kd-ink); stroke-width: 1.2; } .kd-pupil { fill: #111; } .kd-gap { fill: #222; }
.kd-cheek { fill: var(--kd-cheek); opacity: .8; }
.kd-remote { animation: kd-wiggle 1.6s ease-in-out infinite; transform-origin: 326px 190px; }
.kd-cat { animation: kd-breathe 3s ease-in-out infinite; transform-origin: 262px 134px; }
@keyframes kd-snow { from { transform: translateY(-4px); opacity: .4; } to { transform: translateY(10px); opacity: 1; } }
@keyframes kd-wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes kd-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* プレイ */
.kd-play { max-width: 420px; margin: 0 auto; }
.kd-play > * + * { margin-top: 8px; }
.kd-hud { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kd-hud > * { min-width: 0; }
.kd-hud-row { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.kd-lbl { font-size: 12px; color: var(--text-sub); font-weight: 700; white-space: nowrap; }
.kd-clock-t { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 52px; }
.kd-done { font-size: 20px; font-weight: 900; color: var(--accent); white-space: nowrap; }
.kd-pause { width: 36px; height: 32px; font-weight: 900; flex: none; }
.kd-warm { flex: 1; min-width: 80px; height: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.kd-warm > i { display: block; height: 100%; width: 100%; background: var(--kd-warm); border-radius: 99px; transition: width .12s; }
.kd-warm.kd-cold > i { background: var(--kd-cold); }
.kd-warm-v { min-width: 28px; text-align: right; }
.kd-stage { position: relative; background: var(--kd-stage); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.kd-cv { display: block; width: 100%; height: auto; aspect-ratio: 360 / 540; max-height: 66vh; margin: 0 auto; object-fit: contain; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.kd-msg { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .7); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 12px; display: none; }
.kd-msg.on { display: block; }

/* 結果 */
.kd-final .kd-surv { font-size: 30px; font-weight: 900; margin: 0; }
.kd-type { font-size: clamp(21px, 6.2vw, 30px); font-weight: 900; color: var(--accent); line-height: 1.3; margin: 6px 0 10px; }
.kd-rare { display: inline-block; font-size: 13px; color: #fff; background: var(--kd-rare); border-radius: 6px; padding: 1px 8px; margin-right: 6px; vertical-align: middle; }
.kd-emo { font-size: 20px; letter-spacing: 1px; line-height: 1.5; }
.kd-zukan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-note { margin: 4px 0 8px; text-align: right; }