/* 桜はいつ咲く？ 全国予想バトル */
:root {
  --accent: #c63d6f; --accent-soft: #fbe3ec; --accent-ink: #ffffff;
  --sk-petal: #ffc6d9; --sk-petal-line: #f19ab8; --sk-heart: #e0457b; --sk-branch: #6b4a3a; --sk-bud: #8fbf6a;
  --sk-early: #e0729a; --sk-late: #6f93c9; --sk-pink: #ffe7ef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff8fb6; --accent-soft: #3a1f2c; --accent-ink: #1a0f14;
    --sk-petal: #f5a9c4; --sk-petal-line: #d97a9c; --sk-heart: #ff6b9a; --sk-branch: #b08a74; --sk-bud: #8fbf6a;
    --sk-early: #ff8fb6; --sk-late: #8fb0e6; --sk-pink: #3a1f2c;
  }
}
:root[data-theme="dark"] {
  --accent: #ff8fb6; --accent-soft: #3a1f2c; --accent-ink: #1a0f14;
  --sk-petal: #f5a9c4; --sk-petal-line: #d97a9c; --sk-heart: #ff6b9a; --sk-branch: #b08a74; --sk-bud: #8fbf6a;
  --sk-early: #ff8fb6; --sk-late: #8fb0e6; --sk-pink: #3a1f2c;
}

.mn-title { font-size: clamp(24px, 7vw, 38px); }
.sk-hero { display: block; width: 100%; max-width: 380px; margin: 4px auto 8px; overflow: visible; }
.sk-branch { fill: none; stroke: var(--sk-branch); stroke-width: 7; stroke-linecap: round; }
.sk-branch-thin { stroke-width: 4; }
.sk-petal { fill: var(--sk-petal); stroke: var(--sk-petal-line); stroke-width: .8; }
.sk-heart { fill: var(--sk-heart); }
.sk-fall { fill: var(--sk-petal); animation: sk-fall 5s ease-in-out infinite; }
.sk-fall1 { animation-delay: -1.2s; } .sk-fall2 { animation-delay: -2.6s; } .sk-fall3 { animation-delay: -3.8s; }
@keyframes sk-fall { 0% { translate: 0 -40px; opacity: 0; } 20% { opacity: 1; } 100% { translate: 18px 30px; opacity: 0; } }

.sk-daily b { color: var(--text); }
.sk-done { color: var(--good); margin: 8px 0 0; }
.sk-pred-card { background: var(--sk-pink); border-color: var(--sk-petal-line); }
.sk-pred-card h3 { margin-bottom: 4px; }
.sk-btn-pink { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sk-years { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; min-height: 44px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.sk-chip small { font-weight: 500; font-size: 11px; color: var(--text-sub); }
.sk-chip:hover { border-color: var(--accent); }

.sk-q-title { font-size: 21px; margin: 0 0 6px; }
.sk-hints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sk-bud-wrap { width: 84px; height: 84px; margin: 0 auto; }
.sk-bud { width: 100%; height: 100%; overflow: visible; }
.sk-flower-closed .sk-petal { fill: var(--sk-bud); stroke: none; }
.sk-bloom { animation: sk-open .7s cubic-bezier(.2, 1.4, .4, 1); transform-box: fill-box; transform-origin: center; }
@keyframes sk-open { from { scale: .3; rotate: -40deg; } to { scale: 1; rotate: 0deg; } }
.sk-date { font-size: clamp(36px, 11vw, 52px); font-weight: 900; color: var(--accent); line-height: 1.2; }
.sk-dev { min-height: 1.6em; }
.sk-range { width: 100%; margin: 14px 0 2px; accent-color: var(--accent); height: 36px; }
.sk-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-sub); }
.sk-step { min-width: 0; padding: 8px 12px; font-size: 14px; }
.sk-reveal { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sk-actual { font-size: 22px; color: var(--accent); }
.sk-err { font-weight: 900; font-size: 18px; }
.sk-tl { display: block; width: 100%; max-width: 360px; margin: 4px auto 0; overflow: visible; }
.sk-tl-axis { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.sk-tl-normal { stroke: var(--text-sub); stroke-width: 2; stroke-dasharray: 3 3; }
.sk-tl-guess { fill: var(--sk-late); }
.sk-tl-label { font-size: 10px; fill: var(--text-sub); }

.sk-unit { font-size: .4em; margin-left: 4px; color: var(--text); }
.sk-title-name { font-size: 24px; font-weight: 900; margin: 4px 0; }
.sk-row { display: grid; grid-template-columns: 4.2em 1fr 1fr auto; gap: 6px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sk-row-err { font-weight: 800; }
.sk-row-err.is-pita { color: var(--accent); }
.sk-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-items: end; height: 110px; margin: 8px 0; }
.sk-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sk-bar i { display: block; background: var(--surface-2); border-radius: 4px 4px 0 0; min-height: 2px; }
.sk-bar.is-me i { background: var(--accent); }
.sk-bar span { font-size: 10px; text-align: center; color: var(--text-sub); white-space: nowrap; }

.sk-select { flex: 1; min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; padding: 6px 10px; }
.sk-hist { display: block; width: 100%; margin-top: 4px; }
.sk-h-early { fill: var(--sk-early); }
.sk-h-late { fill: var(--sk-late); }
.sk-mypred { background: var(--sk-pink); }
.sk-pbars { display: grid; grid-template-columns: repeat(41, 1fr); gap: 1px; align-items: end; height: 90px; margin: 8px 0 4px; }
.sk-pbar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 2px; }
.sk-pbar i { display: block; background: var(--sk-petal-line); opacity: .55; min-height: 1px; border-radius: 2px 2px 0 0; }
.sk-pbar.is-normal { background: var(--surface-2); }
.sk-pbar.is-me i { background: var(--accent); opacity: 1; min-height: 6px; }
.sk-pbar.is-actual { outline: 2px solid var(--sk-heart); }
.sk-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.sk-stamp { font-size: 12px; padding: 4px 2px; min-height: 34px; border: 1px dashed var(--line); background: transparent; border-radius: 8px; cursor: pointer; color: var(--text-sub); }
.sk-stamp.is-got { border-style: solid; border-color: var(--sk-petal-line); background: var(--sk-pink); color: var(--text); font-weight: 700; }
.sk-zukan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sk-z { border: 2px dashed var(--line); border-radius: 10px; padding: 6px 10px; line-height: 1.4; }
.sk-z b { display: block; font-size: 14px; }
.sk-z small { color: var(--text-sub); font-size: 12px; }
.sk-z.is-got { border-style: solid; background: var(--surface); }
@media (min-width: 560px) { .sk-zukan { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sk-fall { display: none; } }