/* Crowd Run. The canvas is the only touch target that takes the finger (touch-action:none); everything around it scrolls. */
:root{
  --cr-ink:var(--ink,#211c17); --cr-soft:var(--ink-soft,#6a6253); --cr-accent:var(--crimson,#8e1d1d);
  --cr-card:var(--tile,#f7f0df); --cr-line:var(--line,rgba(33,28,23,.16)); --cr-blue:#2563eb; --cr-teal:#0f9d8a; --cr-gold:#d99a1e;
}
.cr-game{ position:relative; color:var(--cr-ink); font-family:var(--ui,Inter,system-ui,sans-serif); max-width:480px; margin:0 auto }
.cr-hud{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px }
.cr-legs{ font:700 15px/1 var(--ui,Inter,system-ui,sans-serif); letter-spacing:.04em; color:var(--cr-soft) }
.cr-tools{ display:flex; gap:6px }
.cr-tool{ min-width:40px; height:40px; border-radius:12px; border:1px solid var(--cr-line); background:var(--cr-card); color:var(--cr-ink);
  font:600 15px/1 var(--ui,Inter,system-ui,sans-serif); cursor:pointer; touch-action:manipulation }
.cr-tool:hover{ border-color:var(--cr-accent); color:var(--cr-accent) }
.cr-tool:focus-visible, .cr-btn:focus-visible, .cr-chip:focus-visible{ outline:3px solid color-mix(in srgb, var(--cr-accent) 60%, transparent); outline-offset:2px }
.cr-stage{ position:relative; border-radius:20px; overflow:hidden; background:#4fa84a; box-shadow:0 18px 40px -26px rgba(0,0,0,.8) }
.cr-canvas{ display:block; width:100%; height:520px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent }
.cr-over{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center;
  background:rgba(16,22,38,.62); color:#fff; z-index:3 }
.cr-over[hidden]{ display:none }
.cr-covered .cr-over{ background:linear-gradient(180deg, rgba(16,22,38,.78), rgba(16,22,38,.92)) }
.cr-over-h{ margin:0; font:800 22px/1.25 var(--ui,Inter,system-ui,sans-serif); max-width:22ch }
.cr-over-sub{ margin:0; font-size:14px; color:#d6deea; max-width:30ch }
.cr-msg{ min-height:1.4em; text-align:center; font-size:14px; color:var(--cr-soft); margin:8px 0 0 }
.cr-btn{ font:600 15px/1.1 var(--ui,Inter,system-ui,sans-serif); padding:11px 18px; border-radius:999px; cursor:pointer; touch-action:manipulation;
  border:1px solid var(--cr-line); background:var(--cr-card); color:var(--cr-ink) }
.cr-btn:hover{ border-color:var(--cr-accent); color:var(--cr-accent) }
.cr-primary{ background:var(--cr-accent); border-color:var(--cr-accent); color:#fff; box-shadow:0 8px 22px -12px var(--cr-accent) }
.cr-primary:hover{ color:#fff; filter:brightness(1.07) }
.cr-start{ font-size:18px; padding:14px 30px }
.cr-link{ background:none; border:0; padding:4px; font:inherit; color:var(--cr-soft); text-decoration:underline; cursor:pointer }
.cr-chip{ font:600 14px/1 var(--ui,Inter,system-ui,sans-serif); padding:9px 14px; border-radius:999px; border:1px solid var(--cr-line); background:var(--cr-card); color:var(--cr-soft); cursor:pointer }
.cr-chip[aria-pressed="true"]{ background:var(--cr-accent); border-color:var(--cr-accent); color:#fff }
.cr-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; min-height:300px;
  padding:40px 20px; color:var(--cr-soft); border:1px dashed var(--cr-line); border-radius:18px; background:var(--cr-card) }
.cr-state p{ margin:0; font-size:16px; max-width:34ch }
.cr-state.cr-err{ border-style:solid; border-color:color-mix(in srgb, var(--cr-accent) 40%, var(--cr-line)) }
.cr-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--cr-line); border-top-color:var(--cr-accent); animation:crSpin .8s linear infinite }
@keyframes crSpin{ to{ transform:rotate(360deg) } }
.cr-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 0 12px }
.cr-sub{ color:var(--cr-soft); font-size:14px }
.cr-pill{ font:700 12px/1 var(--ui,Inter,system-ui,sans-serif); letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:#1f2633; color:#fff }
.cr-lv-easy.cr-pill{ background:#2c8a4d } .cr-lv-medium.cr-pill{ background:#8a5f0e } .cr-lv-hard.cr-pill{ background:var(--cr-accent) }
.cr-levels{ display:flex; gap:6px }
/* goal line: colour + slow shimmer (house rule); static under reduced motion */
.cr-goal{ font-weight:800; background:linear-gradient(90deg, #60a5fa, #34d399, #fbbf24, #f87171, #a78bfa, #60a5fa); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:crShimmer 9s linear infinite }
@keyframes crShimmer{ to{ background-position:300% 0 } }
.cr-win{ margin:16px auto 0; max-width:480px; padding:18px 16px; border-radius:18px; background:var(--cr-card); border:1px solid var(--cr-line); text-align:center }
.cr-win-h{ margin:0 0 4px; font:800 21px/1.25 var(--ui,Inter,system-ui,sans-serif) }
.cr-win-line{ margin:0; font-size:16px; font-variant-numeric:tabular-nums }
.cr-win-sub{ margin:6px 0 0; color:var(--cr-soft); font-size:14px }
.cr-xp{ color:#2c8a4d; font-weight:800 }
.cr-perfect{ color:#b07a12; font-weight:800 }
.cr-win-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px }
.cr-lb{ margin:14px 0 0; text-align:left }
.cr-replay{ text-align:center; margin:10px 0 0 }
/* settings */
.cr-settings{ position:fixed; inset:0; z-index:1000; background:rgba(10,12,20,.55); display:flex; align-items:center; justify-content:center; padding:16px }
.cr-set-card{ width:min(420px, 100%); max-height:88vh; overflow:auto; background:var(--cr-card); color:var(--cr-ink); border-radius:18px; padding:16px 18px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6) }
.cr-set-head{ display:flex; justify-content:space-between; align-items:center; margin:0 0 8px; font-size:17px }
.cr-set-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--cr-line); font-size:15px; cursor:pointer }
.cr-set-row input{ width:20px; height:20px; margin-top:1px }
.cr-set-row small{ color:var(--cr-soft) }
.cr-set-log{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:6px 0 10px }
.cr-set-help{ font-size:14px; color:var(--cr-soft); margin:10px 0 0 }
.cr-set-ver{ font-size:12px; color:var(--cr-soft); margin:12px 0 0; opacity:.8 }
.cr-compact .cr-hud{ margin-bottom:6px }
.cr-compact .cr-msg{ display:none }
.sr-game-host .cr-head{ margin:0 0 6px } .sr-game-host .cr-head .cr-sub{ font-size:12px }
@media (prefers-reduced-motion: reduce){ .cr-goal{ animation:none } .cr-spin{ animation-duration:2s } }

/* Day: the pale shimmer hues vanish on sage, so the page goal line runs through deep hues (the in-game overlay sits on the dark scene and keeps the bright ones). */
:root[data-theme="light"] p:not(.cr-over-h) > .cr-goal{ background-image:linear-gradient(90deg,#b3302a,#1b6b3b,#6b3aa6,#1f5fb4,#b3302a) }