/* だるまさんがころんだ — 色はすべてCSS変数 */
:root {
  --accent: #c0392b; --accent-ink: #ffffff; --accent-soft: #fbe3df;
  --daruma: #e0402f; --daruma-dark: #a82a1e; --gold: #e9b949; --face: #fff6e6; --ink: #2a2220;
  --ground: #e9d9b5; --ground-2: #dcc795; --sky: #dff0fb; --tree: #5c9a52; --trunk: #8a5a36; --me: #3d6fc4; --me-skin: #f5d2b0;
  --look: rgba(224, 64, 47, .14); --hold: #2f7d4f; --hold-down: #23613c; --on: #ffffff; --eye-w: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff7a6a; --accent-ink: #1a0d0b; --accent-soft: #3b1d19;
    --daruma: #e8503d; --daruma-dark: #b2392a; --face: #f6ead6; --ink: #1b1513;
    --ground: #3a3326; --ground-2: #4a4130; --sky: #1b2433; --tree: #3f7a3a; --trunk: #6a4428; --me: #7aa6ff; --me-skin: #e8c7a4;
    --look: rgba(255, 110, 90, .16); --hold: #3a9a62; --hold-down: #2c7a4c;
  }
}
:root[data-theme="dark"] {
  --accent: #ff7a6a; --accent-ink: #1a0d0b; --accent-soft: #3b1d19;
  --daruma: #e8503d; --daruma-dark: #b2392a; --face: #f6ead6; --ink: #1b1513;
  --ground: #3a3326; --ground-2: #4a4130; --sky: #1b2433; --tree: #3f7a3a; --trunk: #6a4428; --me: #7aa6ff; --me-skin: #e8c7a4;
  --look: rgba(255, 110, 90, .16); --hold: #3a9a62; --hold-down: #2c7a4c;
}

/* だるま */
.ds-daruma { width: 100%; height: 100%; display: block; overflow: visible; }
.ds-shadow { fill: rgba(0, 0, 0, .18); }
.ds-body { fill: var(--daruma); stroke: var(--daruma-dark); stroke-width: 3; }
.ds-gold { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.ds-goldc { fill: var(--gold); }
.ds-faceplate { fill: var(--face); }
.ds-brow, .ds-mous { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.ds-eye-w { fill: var(--eye-w); stroke: var(--ink); stroke-width: 2; }
.ds-eye-b { fill: var(--ink); }
.ds-daruma.back .ds-frontside, .ds-daruma.turning .ds-backside { display: none; }
.ds-daruma.front .ds-backside { display: none; }
.ds-daruma.turning .ds-frontside { opacity: .55; }
.ds-daruma.turning .ds-body-g { animation: ds-turn .2s ease-out; transform-origin: 60px 70px; }
@keyframes ds-turn { from { transform: scaleX(.2); } to { transform: none; } }
.ds-daruma.front .ds-eye-b { animation: ds-look 1.6s ease-in-out infinite; }
@keyframes ds-look { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
.ds-bob { animation: ds-bob 2.6s ease-in-out infinite; transform-origin: 60px 120px; }
@keyframes ds-bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.ds-hero { display: flex; justify-content: center; align-items: flex-end; gap: 30px; height: 150px; }
.ds-hero .ds-daruma { width: 130px; height: 140px; }
.ds-hero-me { width: 46px; height: 64px; }

/* 走る人 */
.ds-me { width: 100%; height: 100%; display: block; overflow: visible; }
.ds-me-head { fill: var(--me-skin); }
.ds-me-body { fill: var(--me); }
.ds-me-leg { stroke: var(--me); stroke-width: 5; stroke-linecap: round; fill: none; }
.ds-runner.run .ds-leg-a, .ds-runner.run .ds-arm-b { animation: ds-swing .3s ease-in-out infinite alternate; transform-origin: 20px 40px; }
.ds-runner.run .ds-leg-b, .ds-runner.run .ds-arm-a { animation: ds-swing .3s ease-in-out infinite alternate-reverse; transform-origin: 20px 40px; }
@keyframes ds-swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.ds-runner.frozen { opacity: .5; filter: grayscale(1); }

/* プレイ画面 */
.ds-play { display: flex; flex-direction: column; gap: 8px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ds-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.ds-hud-c { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; line-height: 1.3; display: flex; flex-direction: column; }
.ds-num { font-size: 24px; font-variant-numeric: tabular-nums; }
.ds-tbar > i { transition: none; }
.ds-field { position: relative; height: min(52vh, 420px); min-height: 300px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(var(--sky) 0 22%, var(--ground) 22% 100%); }
.ds-field.looking::after { content: ""; position: absolute; inset: 0; background: var(--look); pointer-events: none; }
.ds-tree { position: absolute; top: 6%; width: 52px; height: 70px; }
.ds-tree::before { content: ""; position: absolute; left: 22px; bottom: 0; width: 8px; height: 26px; background: var(--trunk); border-radius: 3px; }
.ds-tree::after { content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 50px; background: var(--tree); border-radius: 50%; }
.ds-tree-l { left: 6%; } .ds-tree-r { right: 6%; }
.ds-oni { position: absolute; left: 50%; top: 3%; width: 92px; height: 100px; transform: translateX(-50%); z-index: 2; }
.ds-oni.feint .ds-daruma { animation: ds-feint .42s ease-in-out; }
@keyframes ds-feint { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg) scaleX(.85); } 60% { transform: rotate(7deg) scaleX(.9); } }
.ds-chant { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: clamp(22px, 7vw, 34px); font-weight: 900; letter-spacing: .06em; color: var(--text); text-shadow: 0 2px 0 var(--surface); z-index: 3; min-height: 1.2em; }
.ds-chant.last { color: var(--accent); }
.ds-marks span { position: absolute; left: 8px; font-size: 11px; color: var(--text-sub); border-top: 1px dashed var(--ground-2); width: calc(100% - 16px); padding-top: 1px; }
.ds-track { position: absolute; left: 50%; bottom: 4%; top: 32%; width: 44px; transform: translateX(-50%); }
.ds-runner { position: absolute; left: 0; width: 40px; height: 56px; bottom: 0; }
.ds-touches { position: absolute; right: 10px; bottom: 8px; color: var(--gold); font-size: 20px; letter-spacing: 2px; z-index: 3; }
.ds-msg { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .15s, transform .15s; z-index: 4; background: var(--surface); color: var(--text); font-weight: 900; font-size: 22px; padding: 8px 18px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; pointer-events: none; }
.ds-msg.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ds-msg.bad { background: var(--bad); color: var(--on); }
.ds-msg.good { background: var(--good); color: var(--on); }
.ds-msg.touch { background: var(--gold); color: var(--ink); }
.ds-hold { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 110px; border: 0; border-radius: 24px; background: var(--hold); color: var(--on); cursor: pointer; touch-action: none; box-shadow: 0 6px 0 var(--hold-down); transition: transform .05s, box-shadow .05s; }
.ds-hold b { font-size: 22px; }
.ds-hold span { font-size: 13px; opacity: .85; }
.ds-hold.down { transform: translateY(5px); box-shadow: 0 1px 0 var(--hold-down); background: var(--hold-down); }

/* 結果 */
.ds-final .mn-big { display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.ds-of { font-size: 26px; color: var(--text); }
.ds-title-name { font-size: 20px; font-weight: 900; color: var(--accent); margin: 4px 0; }
.ds-titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ds-hist { display: flex; gap: 6px; align-items: flex-end; height: 84px; margin: 8px 0 2px; }
.ds-hb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--text-sub); }
.ds-hb i { display: block; width: 100%; background: var(--surface-2); border-radius: 4px 4px 0 0; }
.ds-hb.me i { background: var(--accent); }
.mn-daily-num { white-space: nowrap; }
.ds-hero { margin-bottom: 8px; }