/* Critter Guard. The canvas takes the finger (touch-action:none); swiping anywhere else scrolls. */
:root{
  --ctg-ink:var(--ink,#211c17); --ctg-soft:var(--ink-soft,#6a6253); --ctg-accent:var(--crimson,#8e1d1d);
  --ctg-card:var(--tile,#f7f0df); --ctg-line:var(--line,rgba(33,28,23,.16));
}
.ctg-game{ position:relative; color:var(--ctg-ink); font-family:var(--ui,Inter,system-ui,sans-serif); max-width:480px; margin:0 auto }
.ctg-hud{ display:flex; align-items:center; gap:10px; margin:0 0 8px; flex-wrap:wrap }
.ctg-stat{ font:700 15px/1 var(--ui,Inter,system-ui,sans-serif); font-variant-numeric:tabular-nums; color:var(--ctg-soft) }
.ctg-lives{ color:var(--crimson-text) } .ctg-coins{ color:var(--gold-text) }
.ctg-tools{ display:flex; gap:6px; margin-left:auto }
.ctg-tool{ min-width:40px; height:40px; border-radius:12px; border:1px solid var(--ctg-line); background:var(--ctg-card); color:var(--ctg-ink);
  font:600 15px/1 var(--ui,Inter,system-ui,sans-serif); cursor:pointer; touch-action:manipulation }
.ctg-tool:hover{ border-color:var(--ctg-accent); color:var(--ctg-accent) }
.ctg-tool:focus-visible, .ctg-btn:focus-visible, .ctg-chip:focus-visible{ outline:3px solid color-mix(in srgb, var(--ctg-accent) 60%, transparent); outline-offset:2px }
.ctg-stage{ position:relative; display:flex; justify-content:center; border-radius:20px; overflow:hidden; background:#6fbf62; box-shadow:0 18px 40px -26px rgba(0,0,0,.8) }
.ctg-canvas{ display:block; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent }
.ctg-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 }
.ctg-over[hidden]{ display:none }
.ctg-covered .ctg-over{ background:linear-gradient(180deg, rgba(16,22,38,.8), rgba(16,22,38,.93)) }
.ctg-over-h{ margin:0; font:800 22px/1.25 var(--ui,Inter,system-ui,sans-serif); max-width:22ch }
.ctg-over-sub{ margin:0; font-size:14px; color:#d6deea; max-width:32ch }
/* Next-up tray: the ring on the first critter fills with coins toward its cost; kind = silhouette + name + tile pattern (never colour alone). */
@property --p{ syntax:"<number>"; inherits:true; initial-value:0 }
.ctg-game{ --ctg-go:#23733f; --ctg-wait:#94650c; --ctg-rm-ink:#9a3412; --ctg-track:color-mix(in srgb, var(--ctg-ink) 14%, transparent) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ctg-game{ --ctg-go:#5fd08a; --ctg-wait:#e6b54e; --ctg-rm-ink:#fdba74 } }
:root[data-theme="dark"] .ctg-game, .sr-game-wrap .ctg-game{ --ctg-go:#5fd08a; --ctg-wait:#e6b54e; --ctg-rm-ink:#fdba74 }
.ctg-tray{ position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 0; padding:13px 12px 10px;
  border-radius:16px; background:var(--ctg-card); border:1px solid var(--ctg-line) }
.ctg-q-label{ position:absolute; top:-9px; left:12px; padding:4px 9px; border-radius:999px; background:var(--ctg-ink); color:var(--ctg-card);
  font:800 10.5px/1 var(--ui,Inter,system-ui,sans-serif); letter-spacing:.12em; text-transform:uppercase }
.ctg-q-row{ display:flex; align-items:flex-end; gap:8px; flex:0 0 auto }
.ctg-q{ display:flex; flex-direction:column; align-items:center; gap:5px; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit }
/* touch-action:none: the Next up tile is dragged onto the field, so it must not scroll the page or flip the Shorts reel */
.ctg-q1{ cursor:grab; touch-action:none; border-radius:14px; transition:--p .35s ease-out }
.ctg-q1.is-lifted{ opacity:.45 }
.ctg-q-tile{ position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; --kc:#8a8a8a;
  background-color:color-mix(in srgb, var(--kc) 22%, var(--ctg-card)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--kc) 55%, transparent) }
.ctg-q1 .ctg-q-tile{ width:58px; height:58px; margin:6px 6px 4px }
.ctg-q-img{ display:block; width:32px; height:32px }
.ctg-q1 .ctg-q-img{ width:46px; height:46px }
.ctg-q2, .ctg-q3{ opacity:.8 }
.ctg-q[data-k="0"] .ctg-q-tile{ --kc:#a0673a; background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--kc) 34%, transparent) 0 3px, transparent 3px 8px) }
.ctg-q[data-k="1"] .ctg-q-tile{ --kc:#f08a24; background-image:radial-gradient(color-mix(in srgb, var(--kc) 55%, transparent) 1.7px, transparent 2.3px); background-size:8px 8px }
.ctg-q[data-k="2"] .ctg-q-tile{ --kc:#d4ae10; background-image:repeating-linear-gradient(0deg, color-mix(in srgb, var(--kc) 45%, transparent) 0 2.5px, transparent 2.5px 7px) }
.ctg-q[data-k="3"] .ctg-q-tile{ --kc:#6d74d6; background-image:linear-gradient(color-mix(in srgb, var(--kc) 40%, transparent) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--kc) 40%, transparent) 1.5px, transparent 1.5px); background-size:8px 8px }
.ctg-q1 .ctg-q-tile::before{ content:""; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(var(--ctg-ring, var(--ctg-track)) calc(var(--p) * 360deg), var(--ctg-track) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)) }
.ctg-tray[data-afford="1"] .ctg-q1{ --ctg-ring:var(--ctg-go) }
.ctg-tray[data-afford="0"] .ctg-q1{ --ctg-ring:var(--ctg-wait) }
.ctg-tray[data-place="1"] .ctg-q1 .ctg-q-tile::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:3px solid var(--ctg-go); animation:ctgReady 1.5s ease-out infinite }
@keyframes ctgReady{ from{ transform:scale(1); opacity:.75 } to{ transform:scale(1.3); opacity:0 } }
.ctg-q-lv{ position:absolute; z-index:1; right:-6px; bottom:-6px; width:21px; height:21px; border-radius:50%; background:#fff; border:2px solid #1f2633; color:#1a1f2e;
  font:800 11.5px/17px var(--ui,Inter,system-ui,sans-serif); text-align:center }
.ctg-q-name{ font:700 12px/1 var(--ui,Inter,system-ui,sans-serif); color:var(--ctg-ink) }
.ctg-q2 .ctg-q-name, .ctg-q3 .ctg-q-name{ font-size:11px; font-weight:600; color:var(--ctg-soft) }
.ctg-ready{ flex:1 1 140px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px }
.ctg-ready-h{ margin:0; font:800 18px/1.15 var(--ui,Inter,system-ui,sans-serif); color:var(--ctg-ink); font-variant-numeric:tabular-nums }
.ctg-tray[data-state="ready"] .ctg-ready-h{ color:var(--ctg-go); text-transform:uppercase; letter-spacing:.06em }
.ctg-tray[data-state="poor"] .ctg-ready-h{ color:var(--ctg-wait) }
/* two lines reserved: the longest state wraps, and a tray that grows mid-run shoves the page */
.ctg-ready-sub{ margin:0; min-height:2.6em; font-size:13.5px; line-height:1.3; color:var(--ctg-soft) }
.ctg-ready .ctg-next{ margin-top:6px; min-height:40px; padding:9px 16px; font-size:14.5px }
.ctg-tray[data-state="done"]{ opacity:.6 }
.ctg-tray[data-state="idle"] .ctg-q1{ --ctg-ring:var(--ctg-go) }
/* remove: the zone covers the tray while a placed critter is dragged; the ✕ floats by a selected critter */
.ctg-rmzone{ position:absolute; inset:-1px; z-index:2; display:grid; place-items:center; border-radius:16px; border:2px dashed #c2410c;
  background:color-mix(in srgb, #c2410c 14%, var(--ctg-card)); color:var(--ctg-rm-ink); font:800 17px/1.2 var(--ui,Inter,system-ui,sans-serif); pointer-events:none }
.ctg-rmzone[hidden]{ display:none }
.ctg-tray.is-removing .ctg-q-label{ visibility:hidden }
.ctg-rmzone.is-hot{ background:#c2410c; border-style:solid; color:#fff }
.ctg-rmzone.is-off{ border-color:var(--ctg-line); background:var(--ctg-card); color:var(--ctg-soft) }
.ctg-rmzone.is-off.is-hot{ background:color-mix(in srgb, var(--ctg-ink) 10%, var(--ctg-card)); color:var(--ctg-soft) }
.ctg-x{ position:absolute; z-index:2; transform:translate(-50%, -50%); min-width:44px; min-height:34px; padding:6px 10px; border-radius:999px;
  border:2px solid #fff; background:#c2410c; color:#fff; font:800 13.5px/1 var(--ui,Inter,system-ui,sans-serif); font-variant-numeric:tabular-nums;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.55); cursor:pointer; touch-action:manipulation; white-space:nowrap }
.ctg-x[hidden]{ display:none }
.ctg-finish{ position:absolute; z-index:2; left:50%; top:38%; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 22px; border-radius:18px; background:rgba(16,22,38,.82); color:#fff; text-align:center; pointer-events:none; box-shadow:0 16px 40px -18px rgba(0,0,0,.8);
  animation:ctgFinish .45s cubic-bezier(.2,1.4,.4,1) both }
.ctg-finish[hidden]{ display:none }
.ctg-finish b{ white-space:nowrap; font:800 21px/1.2 var(--ui,Inter,system-ui,sans-serif); color:#fde047 }
.ctg-finish span{ font:600 14px/1.3 var(--ui,Inter,system-ui,sans-serif); font-variant-numeric:tabular-nums; color:#e2e8f0 }
.ctg-finish.is-lost{ background:rgba(127,29,29,.85) } .ctg-finish.is-lost b{ color:#fecaca }
@keyframes ctgFinish{ from{ transform:translate(-50%, -50%) scale(.7); opacity:0 } to{ transform:translate(-50%, -50%) scale(1); opacity:1 } }
.ctg-x.is-armed{ background:#9a1c1c }
.ctg-x[aria-disabled="true"]{ background:#6b6359; opacity:.85 }
.ctg-x:focus-visible{ outline:3px solid #fde047; outline-offset:2px }
/* the reel slide re-themes --tile/--ink on .sr-game-wrap; the :root aliases above resolved before that, so re-point them here */
.sr-game-wrap .ctg-game{ --ctg-ink:var(--ink); --ctg-soft:var(--ink-soft); --ctg-card:var(--tile); --ctg-line:var(--line); --ctg-accent:var(--crimson) }
.ctg-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
.ctg-q1:focus-visible{ outline:3px solid color-mix(in srgb, var(--ctg-accent) 60%, transparent); outline-offset:2px }
/* How-to steps (first-play Start card and the "?" button) */
.ctg-howto .ctg-over{ background:rgba(16,22,38,.9) }
.ctg-steps{ margin:0; padding:0; list-style:none; counter-reset:ctgs; display:grid; gap:9px; max-width:31ch; text-align:left; font-size:14.5px; line-height:1.35; color:#dfe6f1 }
.ctg-steps li{ counter-increment:ctgs; display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:start }
.ctg-steps li::before{ content:counter(ctgs); width:24px; height:24px; border-radius:50%; background:#fde047; color:#1f2633; font:800 13px/24px var(--ui,Inter,system-ui,sans-serif); text-align:center }
.ctg-steps b{ color:#fff }
.ctg-msg{ min-height:2.6em; text-align:center; font-size:14px; color:var(--ctg-soft); margin:6px 0 0 }
.ctg-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(--ctg-line); background:var(--ctg-card); color:var(--ctg-ink) }
.ctg-btn:hover{ border-color:var(--ctg-accent); color:var(--ctg-accent) }
.ctg-btn:disabled{ opacity:.45; cursor:default }
.ctg-next:not(:disabled){ background:#2c8a4d; border-color:#2c8a4d; color:#fff }
.ctg-primary{ background:var(--ctg-accent); border-color:var(--ctg-accent); color:#fff; box-shadow:0 8px 22px -12px var(--ctg-accent) }
.ctg-primary:hover{ color:#fff; filter:brightness(1.07) }
.ctg-start{ font-size:18px; padding:14px 30px }
.ctg-link{ background:none; border:0; padding:4px; font:inherit; color:var(--ctg-soft); text-decoration:underline; cursor:pointer }
.ctg-chip{ font:600 14px/1 var(--ui,Inter,system-ui,sans-serif); padding:9px 14px; border-radius:999px; border:1px solid var(--ctg-line); background:var(--ctg-card); color:var(--ctg-soft); cursor:pointer }
.ctg-chip[aria-pressed="true"]{ background:var(--ctg-accent); border-color:var(--ctg-accent); color:#fff }
.ctg-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(--ctg-soft); border:1px dashed var(--ctg-line); border-radius:18px; background:var(--ctg-card) }
.ctg-state p{ margin:0; font-size:16px; max-width:34ch }
.ctg-state.ctg-err{ border-style:solid; border-color:color-mix(in srgb, var(--ctg-accent) 40%, var(--ctg-line)) }
.ctg-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--ctg-line); border-top-color:var(--ctg-accent); animation:ctgSpin .8s linear infinite }
@keyframes ctgSpin{ to{ transform:rotate(360deg) } }
.ctg-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; margin:0 0 12px }
.ctg-sub{ color:var(--ctg-soft); font-size:14px }
.ctg-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 }
.ctg-lv-easy.ctg-pill{ background:#2c8a4d } .ctg-lv-medium.ctg-pill{ background:#8a5f0e } .ctg-lv-hard.ctg-pill{ background:var(--ctg-accent) }
.ctg-levels{ display:flex; gap:6px }
.ctg-goal{ font-weight:800; background:linear-gradient(90deg, #f6a04d, #34d399, #a78bfa, #fbbf24, #60a5fa, #f6a04d); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:ctgShimmer 9s linear infinite }
@keyframes ctgShimmer{ to{ background-position:300% 0 } }
.ctg-win{ margin:16px auto 0; max-width:480px; padding:18px 16px; border-radius:18px; background:var(--ctg-card); border:1px solid var(--ctg-line); text-align:center }
.ctg-win-h{ margin:0 0 4px; font:800 21px/1.25 var(--ui,Inter,system-ui,sans-serif) }
.ctg-win-line{ margin:0; font-size:16px; font-variant-numeric:tabular-nums }
.ctg-win-sub{ margin:6px 0 0; color:var(--ctg-soft); font-size:14px }
.ctg-xp{ color:#2c8a4d; font-weight:800 }
.ctg-win-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px }
.ctg-lb{ margin:14px 0 0; text-align:left }
.ctg-replay{ text-align:center; margin:10px 0 0 }
.ctg-settings{ position:fixed; inset:0; z-index:1000; background:rgba(10,12,20,.55); display:flex; align-items:center; justify-content:center; padding:16px }
.ctg-set-card{ width:min(420px, 100%); max-height:88vh; overflow:auto; background:var(--ctg-card); color:var(--ctg-ink); border-radius:18px; padding:16px 18px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6) }
.ctg-set-head{ display:flex; justify-content:space-between; align-items:center; margin:0 0 8px; font-size:17px }
.ctg-set-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--ctg-line); font-size:15px; cursor:pointer }
.ctg-set-row input{ width:20px; height:20px; margin-top:1px }
.ctg-set-row small{ color:var(--ctg-soft) }
.ctg-set-log{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:6px 0 10px }
.ctg-set-help{ font-size:14px; color:var(--ctg-soft); margin:10px 0 0 }
.ctg-set-ver{ font-size:12px; color:var(--ctg-soft); margin:12px 0 0; opacity:.8 }
.ctg-compact .ctg-msg{ display:none }
.ctg-compact .ctg-hud{ margin-bottom:6px } .ctg-compact .ctg-tray{ margin-top:13px; padding:12px 10px 8px; gap:10px }
.ctg-compact .ctg-steps{ font-size:13px; gap:6px } .ctg-compact.ctg-howto .ctg-over-sub{ display:none } .ctg-compact .ctg-over{ gap:10px; padding:14px }
.sr-game-host .ctg-head{ margin:0 0 6px } .sr-game-host .ctg-head .ctg-sub{ font-size:12px }
@media (prefers-reduced-motion: reduce){ .ctg-goal{ animation:none } .ctg-finish{ animation:none } .ctg-spin{ animation-duration:2s } .ctg-q1{ transition:none } .ctg-tray[data-place="1"] .ctg-q1 .ctg-q-tile::after{ animation:none; opacity:.5 } }
.ctg-rm .ctg-goal{ animation:none } .ctg-rm .ctg-finish{ animation:none } .ctg-rm .ctg-q1{ transition:none } .ctg-rm .ctg-tray[data-place="1"] .ctg-q1 .ctg-q-tile::after{ animation:none; opacity:.5 }

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