/* サンタの配達ルート */
:root {
  --accent: #c8323a; --accent-soft: #fbe2e3; --accent-ink: #ffffff;
  --sr-sky: #14214a; --sr-sky2: #2a3d7a; --sr-moon: #ffe7a3; --sr-star: #fff7d6; --sr-snow: #f4f8ff;
  --sr-land: #eef3fb; --sr-land-line: #a9bbdc; --sr-sea: #1b2b5c;
  --sr-wall: #c99762; --sr-roof: #f4f8ff; --sr-roof-line: #8aa0c8; --sr-win: #3b4466; --sr-lit: #ffd36b; --sr-door: #7a4a2a;
  --sr-route: #e03c3c; --sr-gold: #e2a93a; --sr-green: #2f8f5b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff7a80; --accent-soft: #3a1c22; --accent-ink: #1a0e10;
    --sr-sky: #0a1230; --sr-sky2: #1a2756; --sr-land: #cfd9ee; --sr-sea: #0d1638;
  }
}
:root[data-theme="dark"] {
  --accent: #ff7a80; --accent-soft: #3a1c22; --accent-ink: #1a0e10;
  --sr-sky: #0a1230; --sr-sky2: #1a2756; --sr-land: #cfd9ee; --sr-sea: #0d1638;
}

.mn-title { font-size: clamp(26px, 8vw, 40px); }
.sr-hero { display: block; width: 100%; max-width: 400px; margin: 4px auto 10px; }
.sr-sky { fill: var(--sr-sky); }
.sr-sky-c { fill: var(--sr-sky); }
.sr-moon { fill: var(--sr-moon); }
.sr-star { fill: var(--sr-star); }
.sr-tw1 { animation: sr-tw 2.4s ease-in-out infinite; } .sr-tw2 { animation: sr-tw 3.1s ease-in-out -1s infinite; }
@keyframes sr-tw { 50% { opacity: .2; } }
.sr-trail { fill: none; stroke: var(--sr-lit); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .8; }
.sr-snow { fill: var(--sr-snow); }
.sr-fly { animation: sr-fly 3s ease-in-out infinite; }
@keyframes sr-fly { 50% { translate: 0 -6px; } }
.sr-sl-body { fill: var(--accent); }
.sr-sl-seat { fill: #8f1f26; }
.sr-sl-gift { fill: var(--sr-green); }
.sr-sl-ribbon { stroke: var(--sr-lit); stroke-width: 2.5; fill: none; }
.sr-sl-rein { stroke: var(--sr-lit); stroke-width: 1.5; fill: none; }
.sr-reindeer { fill: #a8774c; stroke: #a8774c; stroke-width: 1.4; stroke-linejoin: round; }
.sr-nose { fill: #ff4040; }
.sr-h-wall { fill: var(--sr-wall); }
.sr-h-roof { fill: none; stroke: var(--sr-roof); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sr-h-chim { fill: #8a5a3a; }
.sr-h-win { fill: var(--sr-win); }
.sr-h-door { fill: var(--sr-door); }
.sr-house.is-lit .sr-h-win { fill: var(--sr-lit); }

.sr-done { color: var(--good); margin: 8px 0 0; }
.sr-lv { flex-direction: column; gap: 0; line-height: 1.3; }
.sr-lv small { font-weight: 500; color: var(--text-sub); font-size: 12px; }
.sr-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sr-door { aspect-ratio: 1 / 1; border-radius: 10px; border: 2px solid var(--line); background: var(--surface-2); color: var(--text-sub); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; cursor: default; padding: 0; }
.sr-door b { font-size: 18px; }
.sr-door small { font-size: 11px; }
.sr-door.is-open { background: var(--surface); border-color: var(--accent); color: var(--text); cursor: pointer; }
.sr-door.is-got { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sr-door.is-xmas { border-style: dashed; }
.sr-door:disabled { opacity: .7; }

.sr-stat { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.sr-stat b { font-size: 18px; color: var(--accent); }
.sr-board { width: 100%; max-width: 520px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); }
.sr-map { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.sr-map-small { max-width: 360px; margin: 8px auto; border-radius: 12px; touch-action: auto; }
.sr-sea { fill: var(--sr-sea); }
.sr-map .sr-star { opacity: .55; }
.sr-land { fill: var(--sr-land); stroke: var(--sr-land-line); stroke-width: 4; stroke-linejoin: round; }
.sr-route { fill: none; stroke: var(--sr-route); stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.sr-route-opt { fill: none; stroke: var(--sr-gold); stroke-width: 9; stroke-dasharray: 24 18; stroke-linejoin: round; }
.sr-map .sr-house { cursor: pointer; }
.sr-badge { fill: var(--sr-route); stroke: #fff; stroke-width: 4; }
.sr-badge-t { fill: #fff; font-size: 42px; font-weight: 800; pointer-events: none; }

.sr-title-name { font-size: 24px; font-weight: 900; margin: 4px 0; }
.sr-tired b { color: var(--sr-gold); letter-spacing: 2px; }
.sr-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: end; height: 110px; margin: 8px 0; }
.sr-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sr-bar i { display: block; background: var(--surface-2); border-radius: 4px 4px 0 0; min-height: 2px; }
.sr-bar.is-me i { background: var(--accent); }
.sr-bar span { font-size: 10px; text-align: center; color: var(--text-sub); white-space: nowrap; }
.sr-zukan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sr-z { border: 2px dashed var(--line); border-radius: 10px; padding: 6px 10px; line-height: 1.4; }
.sr-z b { display: block; font-size: 14px; }
.sr-z small { color: var(--text-sub); font-size: 12px; }
.sr-z.is-got { border-style: solid; background: var(--surface); }
@media (min-width: 560px) { .sr-zukan { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sr-fly, .sr-tw1, .sr-tw2 { animation: none; } }
.mn-btn.is-ready { animation: sr-ready 1.2s ease-in-out infinite; }
@keyframes sr-ready { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .mn-btn.is-ready { animation: none; } }