/* Crowd Cannon. The canvas is the only touch target that takes the finger (touch-action:none); everything around it scrolls. */
/* Re-declared on .sr-game-wrap: a var() resolves where it is declared, so the reel's dark --ink never reached a :root-only copy. */
:root, .sr-game-wrap{
  --cc-ink:var(--ink,#211c17); --cc-soft:var(--ink-soft,#6a6253); --cc-accent:var(--crimson,#8e1d1d);
  --cc-card:var(--tile,#f7f0df); --cc-line:var(--line,rgba(33,28,23,.16)); --cc-blue:#2563eb;
}
.cc-game{ position:relative; color:var(--cc-ink); font-family:var(--ui,Inter,system-ui,sans-serif); max-width:480px; margin:0 auto }
.cc-hud{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px }
.cc-stat{ font:700 15px/1 var(--ui,Inter,system-ui,sans-serif); color:var(--cc-soft); font-variant-numeric:tabular-nums }
.cc-stat b{ color:var(--cc-ink); font-size:17px }
.cc-heart{ color:#e0453a; font-size:16px }
.cc-low .cc-stat b, .cc-low .cc-heart{ color:#dc2626; animation:ccLow .7s ease-in-out infinite alternate }
@keyframes ccLow{ to{ opacity:.45 } }
.cc-of{ font-weight:600 } .cc-lbl{ font-weight:600; font-size:13px }
.cc-tools{ display:flex; gap:6px }
.cc-tool{ min-width:44px; height:44px; border-radius:12px; border:1px solid var(--cc-line); background:var(--cc-card); color:var(--cc-ink);
  font:600 15px/1 var(--ui,Inter,system-ui,sans-serif); cursor:pointer; touch-action:manipulation }
.cc-tool:hover{ border-color:var(--cc-accent); color:var(--cc-accent) }
.cc-tool:focus-visible, .cc-btn:focus-visible, .cc-chip:focus-visible{ outline:3px solid color-mix(in srgb, var(--cc-accent) 60%, transparent); outline-offset:2px }
.cc-stage{ position:relative; border-radius:20px; overflow:hidden; background:#7cc4ff; box-shadow:0 18px 40px -26px rgba(0,0,0,.8) }
.cc-canvas{ display:block; width:100%; height:600px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent }
.cc-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,.6); color:#fff; z-index:3 }
.cc-over[hidden]{ display:none }
.cc-covered .cc-over{ background:linear-gradient(180deg, rgba(16,22,38,.72), rgba(16,22,38,.9)) }
.cc-over-h{ margin:0; font:800 23px/1.25 var(--ui,Inter,system-ui,sans-serif); max-width:20ch }
.cc-over-k{ margin:0; font:900 34px/1.05 var(--ui,Inter,system-ui,sans-serif); letter-spacing:.01em; color:#fde68a; text-shadow:0 3px 0 #7a2e00, 0 0 24px rgba(253,224,71,.6); animation:ccPop .5s cubic-bezier(.2,1.6,.4,1) both }
.cc-over-sub{ margin:0; font-size:14px; color:#d6deea; max-width:32ch }
.cc-over-twist{ margin:0; display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:12px; background:rgba(253,224,71,.14); border:1px solid rgba(253,224,71,.45); max-width:34ch } .cc-over-twist b{ color:#fde047; font-size:15px } .cc-over-twist span{ color:#f1f5f9; font-size:14px }
.cc-over-base{ margin:0; font-size:15px; color:#fecaca } .cc-over-base b{ color:#fff; font-size:18px }
.cc-over-score{ margin:0; font:800 20px/1 var(--ui,Inter,system-ui,sans-serif); color:#e2e8f0 } .cc-over-score b{ font-size:40px; color:#fff; font-variant-numeric:tabular-nums }
.cc-stars{ margin:0; font-size:40px; line-height:1; letter-spacing:.06em }
.cc-star{ color:rgba(255,255,255,.22); display:inline-block }
.cc-star.on{ color:#fde047; text-shadow:0 0 18px rgba(253,224,71,.8); animation:ccPop .45s cubic-bezier(.2,1.6,.4,1) both }
@keyframes ccPop{ from{ transform:scale(.3); opacity:0 } to{ transform:scale(1); opacity:1 } }
.cc-banner{ position:absolute; left:50%; top:30%; z-index:2; transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none; white-space:nowrap;
  font:900 26px/1 var(--ui,Inter,system-ui,sans-serif); letter-spacing:.02em; color:#fff; padding:10px 18px; border-radius:999px; transition:opacity .25s, transform .3s cubic-bezier(.2,1.6,.4,1); will-change:transform,opacity }
.cc-banner.cc-b-on{ opacity:1; transform:translate(-50%,-50%) scale(1) }
/* no box-shadow on banners: a blurred shadow animating over the canvas is repainted every frame by a software compositor */
.cc-b-red{ background:#dc2626; border:3px solid #fff } .cc-b-gold{ background:#d97706; border:3px solid #fff }
.cc-b-green{ background:#16a34a; border:3px solid #fff } .cc-b-purple{ background:#9333ea; border:3px solid #fff }
.cc-b-win{ background:linear-gradient(90deg,#f59e0b,#ef4444,#d946ef); border:3px solid #fff; font-size:32px; top:40% }
.cc-msg{ min-height:1.4em; text-align:center; font-size:14px; color:var(--cc-soft); margin:8px 0 0 }
.cc-btn{ min-height:44px; 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(--cc-line); background:var(--cc-card); color:var(--cc-ink); text-decoration:none; display:inline-flex; align-items:center }
.cc-btn:hover{ border-color:var(--cc-accent); color:var(--cc-accent) }
.cc-primary{ background:var(--cc-accent); border-color:var(--cc-accent); color:#fff; box-shadow:0 8px 22px -12px var(--cc-accent) }
.cc-primary:hover{ color:#fff; filter:brightness(1.07) }
.cc-start{ font-size:18px; padding:14px 30px }
.cc-link{ background:none; border:0; padding:4px; min-height:44px; font:inherit; color:var(--cc-soft); text-decoration:underline; cursor:pointer }
.cc-chip{ font:600 14px/1 var(--ui,Inter,system-ui,sans-serif); padding:9px 14px; border-radius:999px; border:1px solid var(--cc-line); background:var(--cc-card); color:var(--cc-soft); cursor:pointer }
.cc-chip[aria-pressed="true"]{ background:var(--cc-accent); border-color:var(--cc-accent); color:#fff }
.cc-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(--cc-soft); border:1px dashed var(--cc-line); border-radius:18px; background:var(--cc-card) }
.cc-state p{ margin:0; font-size:16px; max-width:34ch }
.cc-state.cc-err{ border-style:solid; border-color:color-mix(in srgb, var(--cc-accent) 40%, var(--cc-line)) }
.cc-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--cc-line); border-top-color:var(--cc-accent); animation:ccSpin .8s linear infinite }
@keyframes ccSpin{ to{ transform:rotate(360deg) } }
.cc-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 0 12px }
.cc-sub{ color:var(--cc-soft); font-size:14px }
.cc-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 }
.cc-lv-easy.cc-pill{ background:#2c8a4d } .cc-lv-medium.cc-pill{ background:#8a5f0e } .cc-lv-hard.cc-pill{ background:var(--cc-accent) }
.cc-levels{ display:flex; gap:6px }
/* goal line: colour + slow shimmer (house rule); static under reduced motion */
.cc-goal{ font-weight:800; background:linear-gradient(90deg, #60a5fa, #fbbf24, #f472b6, #f87171, #60a5fa); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:ccShimmer 8s linear infinite }
@keyframes ccShimmer{ to{ background-position:300% 0 } }
.cc-win{ margin:16px auto 0; max-width:480px; padding:18px 16px; border-radius:18px; background:var(--cc-card); border:1px solid var(--cc-line); text-align:center }
.cc-win-h{ margin:0 0 4px; font:800 21px/1.25 var(--ui,Inter,system-ui,sans-serif) }
.cc-win-line{ margin:0; font-size:16px; font-variant-numeric:tabular-nums }
.cc-win-sub{ margin:6px 0 0; color:var(--cc-soft); font-size:14px }
.cc-xp{ color:#2c8a4d; font-weight:800 }
.cc-gold{ color:#b07a12; font-weight:800 }
.cc-win-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px }
/* feed.css .dc-share margin (8px auto) pushed Share low and off-centre in this row. */
.cc-win-actions .dc-share{ margin:0 }
.cc-lb{ margin:14px 0 0; text-align:left }
.cc-replay{ text-align:center; margin:10px 0 0 }
/* settings */
.cc-settings{ position:fixed; inset:0; z-index:1000; background:rgba(10,12,20,.55); display:flex; align-items:center; justify-content:center; padding:16px }
.cc-set-card{ width:min(420px, 100%); max-height:88vh; overflow:auto; background:var(--cc-card); color:var(--cc-ink); border-radius:18px; padding:16px 18px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6) }
.cc-set-head{ display:flex; justify-content:space-between; align-items:center; margin:0 0 8px; font-size:17px }
.cc-set-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--cc-line); font-size:15px; cursor:pointer }
.cc-set-row input{ width:20px; height:20px; margin-top:1px }
.cc-set-row small{ color:var(--cc-soft) }
.cc-set-log{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:6px 0 10px }
.cc-set-help{ font-size:14px; color:var(--cc-soft); margin:10px 0 0 }
.cc-set-ver{ font-size:12px; color:var(--cc-soft); margin:12px 0 0; opacity:.8 }
.cc-compact .cc-hud{ margin-bottom:6px }
.cc-compact .cc-msg{ display:none }
.sr-game-host .cc-head{ margin:0 0 6px } .sr-game-host .cc-head .cc-sub{ font-size:12px }
@media (prefers-reduced-motion: reduce){ .cc-goal, .cc-low .cc-stat b, .cc-low .cc-heart{ animation:none } .cc-spin{ animation-duration:2s } .cc-banner{ transition:opacity .2s } .cc-star.on, .cc-over-k{ animation:none } }

/* 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(.cc-over-h) > .cc-goal{ background-image:linear-gradient(90deg,#b3302a,#1b6b3b,#6b3aa6,#1f5fb4,#b3302a) }