/* Coldsnap game — re-themed to MiniMaker's palette. All variables scoped to .cs
   so the store's :root is untouched. Ported from techtouch.ca (drift expected). */
.cs {
  --bg:          var(--light);     /* light icy stage */
  --fg:          var(--dark);
  --accent:      var(--secondary); /* teal — reads as ice/cold */
  --card:        var(--white);
  --muted:       var(--medium);
  --border:      #e0e0e0;
  --alert:       var(--danger);
  --ok:          var(--success);
  --warn:        var(--warning);   /* boss glow / tier flash */
  --rank-gold:   #d4a017;
  --rank-silver: #b8bcbf;
  --rank-bronze: #b27849;
  --font-mono:   ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

  .cs [hidden],
  .cs-gameover-overlay[hidden] { display: none !important; }

  .cs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    position: relative;
  }

  /* --- Start screen --- */
  .cs .cs-start {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    text-align: center;
  }
  .cs .cs-start-title {
    font-weight: bold;
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    color: var(--accent);
  }
  .cs .cs-motif {
    align-self: center;
    color: var(--accent);
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 0;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: 6px;
    text-align: left;
  }
  .cs .cs-start-sub { color: var(--muted); margin: 0; }
  .cs .cs-leaderboard { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.75rem 0; }
  .cs .cs-lb-title { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
  .cs .cs-lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
  .cs .cs-lb-row {
    display: grid;
    grid-template-columns: 4rem 1fr 5rem;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
  }
  .cs .cs-lb-rank { font-weight: bold; }
  .cs .cs-lb-name { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs .cs-lb-score { color: var(--muted); text-align: right; }

  .cs .cs-start-btn {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.7rem 1.25rem;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.08em;
    align-self: center;
  }
  .cs .cs-start-btn:hover { opacity: 0.9; }

  /* --- Game screen + stage --- */
  .cs .cs-game {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
  }
  .cs .cs-hud {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
  }
  .cs .cs-hud-lives  { letter-spacing: 0.15em; color: var(--ok); }
  .cs .cs-hud-lives.danger { color: var(--alert); }
  .cs .cs-hud-tier   { color: var(--muted); }
  .cs .cs-hud-boost  { color: var(--warn); }
  .cs .cs-hud-mute  {
    margin-left: auto;
    font-family: inherit;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.55rem;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
  .cs .cs-hud-pause  {
    font-family: inherit;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.55rem;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }

  .cs .cs-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 480px;
    max-height: 75vh;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg);
    touch-action: none;
    user-select: none;
  }
  @media (orientation: portrait) and (max-width: 720px) {
    .cs .cs-stage { aspect-ratio: 3 / 4; min-height: 0; }
  }
  .cs .cs-ceiling {
    position: absolute; inset: 0 0 auto 0; height: 18px;
    background:
      linear-gradient(to bottom,
        #fbfdff 0 8px,                                                /* snow cap on the roof edge */
        color-mix(in srgb, var(--accent) 22%, var(--card)) 8px 100%); /* shaded eave underside */
    border-bottom: 3px solid color-mix(in srgb, var(--accent) 45%, var(--fg));
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  .cs .cs-floor {
    position: absolute; inset: auto 0 0 0; height: 56px;
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, #b07a4a 70%, #fff) 0 3px,                  /* snow line on the boards */
        transparent 3px 100%),
      repeating-linear-gradient(
        to right,
        #b07a4a 0 46px,
        #9c6a3e 46px 50px                                            /* plank seams */
      );
    border-top: 3px solid #7d5530;
    transition: border-color 200ms linear, filter 200ms linear;
  }
  .cs .cs-floor.damaged {
    border-top-color: var(--warn);
    filter: hue-rotate(-20deg);
  }
  .cs .cs-floor.critical {
    border-top-color: var(--alert);
    filter: hue-rotate(-40deg) saturate(1.4);
  }
  .cs .cs-base {
    position: absolute; bottom: 56px; left: 50%;
    width: 40px; height: 16px; transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 100%, #ffffff 0 60%, #dce8f2 100%);
    border-radius: 50% 50% 0 0;
    box-shadow: 0 -1px 3px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .cs .cs-tier-flash {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    color: var(--rank-gold);
    font-weight: bold;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    letter-spacing: 0.18em;
    opacity: 0;
  }
  .cs .cs-tier-flash.show {
    animation: cs-tier-flash 1.4s ease-out 1;
  }
  @keyframes cs-tier-flash {
    0%   { opacity: 0; transform: scale(0.9); }
    20%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.2); }
  }

  /* --- Game over overlay --- */
  .cs .cs-gameover-overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    display: flex; align-items: center; justify-content: center;
    border-radius: inherit;
    padding: 1rem; z-index: 10;
  }
  .cs .cs-gameover-card {
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 1.5rem 1.25rem;
    max-width: 26rem; width: 100%;
    display: flex; flex-direction: column; gap: 0.75rem; text-align: center;
  }
  .cs .cs-gameover-card.high-score {
    border-color: var(--rank-gold);
    animation: cs-highscore-flash 0.6s ease-in-out 4;
  }
  .cs .cs-highscore-banner {
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    color: var(--bg);
    background: var(--rank-gold);
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    margin: -0.25rem -0.25rem 0.25rem -0.25rem;
    animation: cs-highscore-pulse 0.6s ease-in-out 4;
  }
  @keyframes cs-highscore-flash {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rank-gold) 50%, transparent); }
    50%      { box-shadow: 0 0 18px 4px color-mix(in srgb, var(--rank-gold) 60%, transparent); }
  }
  @keyframes cs-highscore-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
  .cs .cs-gameover-title { font-weight: bold; font-size: 1.2rem; letter-spacing: 0.1em; color: var(--accent); }
  .cs .cs-gameover-score { font-size: 1.1rem; color: var(--fg); margin: 0; font-variant-numeric: tabular-nums; }
  .cs .cs-gameover-rank  { color: var(--muted); font-size: 0.85rem; margin: 0; }
  .cs .cs-name-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
  .cs .cs-name-label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; }
  .cs .cs-name-form input {
    width: 12rem; padding: 0.5rem;
    font-family: inherit; font-size: 1.1rem; text-align: center; letter-spacing: 0.1rem;
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--border); border-radius: 4px;
  }
  .cs .cs-name-form input:focus { outline: none; border-color: var(--accent); }
  .cs .cs-gameover-actions { display: flex; gap: 0.5rem; justify-content: center; }
  .cs .cs-gameover-btn {
    font-family: inherit; font-size: 0.9rem; padding: 0.55rem 1.1rem;
    background: var(--accent); color: var(--bg);
    border: none; border-radius: 6px; cursor: pointer; letter-spacing: 0.06em;
    min-height: 44px; min-width: 44px;
  }
  .cs .cs-gameover-btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
  .cs .cs-gameover-btn:hover { opacity: 0.9; }

  /* --- Entities --- */
  .cs .cs-icicle {
    position: absolute;
    top: 0; left: 0;
    background:
      linear-gradient(
        to bottom,
        #ffffff,
        #cfe6f5 55%,
        color-mix(in srgb, var(--accent) 60%, #cfe6f5)
      );
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--accent) 35%, transparent));
    will-change: transform;
  }
  /* Boss icicle reads distinct via a pulsing warn-colored glow that traces the
     triangle (drop-shadow follows the clip-path alpha). The cs-icicle-boss
     class is set at spawn and persists as the boss visually shrinks. */
  .cs .cs-icicle-boss {
    animation: cs-boss-pulse 1.2s ease-in-out infinite;
  }
  @keyframes cs-boss-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--warn) 50%, transparent)); }
    50%      { filter: drop-shadow(0 0 11px color-mix(in srgb, var(--warn) 90%, transparent)); }
  }
  .cs .cs-icicle.cracked {
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--accent) 25%, transparent),
        color-mix(in srgb, var(--warn) 60%, transparent)
      );
  }

  .cs .cs-rock {
    position: absolute;
    top: 0; left: 0;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 35% 30%, #ffffff 0 55%, #e3ebf2 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, #cfd8e0);
    border-radius: 50%;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 25%, transparent);
    will-change: transform;
  }
  /* Tier 5 — the dog. Render-diff sets the translate on .cs-rock via inline
     style, so an additional rotate transform would overwrite it. We mark
     the projectile visually distinct by glyph + color instead. */
  .cs .cs-rock-cat {
    width: auto; height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--fg) 35%, transparent));
  }

  .cs .cs-pickup {
    position: absolute;
    top: 0; left: 0;
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
    will-change: transform;
  }
  .cs .cs-pickup-rapid {
    background: color-mix(in srgb, var(--warn) 30%, var(--card));
    color: var(--warn);
    border: 1px solid var(--warn);
  }
  .cs .cs-pickup-pulse {
    background: color-mix(in srgb, var(--accent) 20%, var(--card));
    color: var(--accent);
    border: 1px solid var(--accent);
  }

  /* --- Backdrop: brick house wall + lit windows --- */
  /* Full-stage brick wall so the white icicles/snowballs read against a warm,
     darker surface (stacked-bond bricks via two mortar-line gradients). */
  .cs .cs-backdrop {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background-color: #9e4b38;                                  /* brick */
    background-image:
      repeating-linear-gradient(0deg,                           /* horizontal mortar every 24px */
        #d8cab5 0 2px, transparent 2px 24px),
      repeating-linear-gradient(90deg,                          /* vertical mortar every 48px */
        #d8cab5 0 2px, transparent 2px 48px);
  }
  /* Side panels are now just the window openings set into the brick wall. */
  .cs .cs-rack-bg {
    position: absolute;
    top: 18px; bottom: 56px;
    width: 22%;
    background: transparent;
    border: none;
  }
  .cs .cs-rack-bg-left  { left:  4%; }
  .cs .cs-rack-bg-right { right: 4%; }
  /* Lit window pane (warm amber) with muntin cross. */
  .cs .cs-rack-bg::before {
    content: "";
    position: absolute;
    top: 22%; left: 50%; transform: translateX(-50%);
    width: 46%; height: 26%;
    background-color: color-mix(in srgb, var(--warn) 55%, #fff7e0);
    background-image:
      linear-gradient(to right,  transparent calc(50% - 1px), color-mix(in srgb, var(--accent) 40%, var(--fg)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(to bottom, transparent calc(50% - 1px), color-mix(in srgb, var(--accent) 40%, var(--fg)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--fg));
    box-shadow: 0 0 10px color-mix(in srgb, var(--warn) 50%, transparent);
  }

  .cs .cs-mist {
    position: absolute;
    left: -10%; right: -10%; bottom: 56px;
    height: 48px;
    background:
      radial-gradient(circle at 15% 60%, #ffffff 0 1.5px, #b9cee4 2px, transparent 3px),
      radial-gradient(circle at 35% 30%, #ffffff 0 1.5px, #b9cee4 2px, transparent 3px),
      radial-gradient(circle at 55% 70%, #ffffff 0 2px,   #b9cee4 2.6px, transparent 3.4px),
      radial-gradient(circle at 75% 40%, #ffffff 0 1.5px, #b9cee4 2px, transparent 3px),
      radial-gradient(circle at 90% 65%, #ffffff 0 2px,   #b9cee4 2.6px, transparent 3.4px);
    opacity: 0.85;
    filter: blur(0.3px);
    animation: cs-mist-drift 18s linear infinite;
  }
  @keyframes cs-mist-drift {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(6%); }
    100% { transform: translateX(0); }
  }

  /* Pause backdrop animations when the tab is hidden (tabHidden global flag
     is set in the script; we mirror it onto the body for CSS to react to). */
  body.cs-tab-hidden .cs-backdrop,
  body.cs-tab-hidden .cs-backdrop * { animation-play-state: paused; }

  /* Ensure z-stacking: entities sit above the backdrop, below tier-flash. */
  .cs .cs-ceiling, .cs .cs-floor { z-index: 1; }
  .cs .cs-base { z-index: 2; }
  .cs .cs-icicle, .cs .cs-rock, .cs .cs-pickup { z-index: 2; position: absolute; }
  .cs .cs-tier-flash { z-index: 3; }

  /* --- Mode picker --- */
  .cs .cs-mode-picker {
    border: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .cs .cs-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .cs .cs-mode-btn {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 44px;
    transition: border-color 150ms linear, color 150ms linear;
  }
  .cs .cs-mode-btn .cs-mode-title {
    font-weight: bold;
    letter-spacing: 0.08em;
  }
  .cs .cs-mode-btn .cs-mode-sub {
    color: var(--muted);
    font-size: 0.8rem;
  }
  .cs .cs-mode-btn.selected {
    border-color: var(--accent);
    color: var(--accent);
  }
  .cs .cs-mode-btn.selected .cs-mode-sub {
    color: var(--accent);
  }

  .cs .cs-hud-shards { color: var(--rank-gold); letter-spacing: 0.05em; }
  .cs .cs-hud-level  { color: var(--accent);    letter-spacing: 0.05em; }

  /* --- Chunk particles --- */
  .cs .cs-chunk {
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
    will-change: transform, opacity;
    pointer-events: none;
  }

  /* --- Shop overlay --- */
  .cs .cs-shop-overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    display: flex; align-items: center; justify-content: center;
    border-radius: inherit;
    padding: 1rem; z-index: 10;
  }
  .cs .cs-shop-overlay[hidden] { display: none !important; }
  .cs .cs-shop-card {
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 1.25rem 1.25rem;
    max-width: 30rem; width: 100%;
    display: flex; flex-direction: column; gap: 0.75rem;
    text-align: center;
  }
  .cs .cs-shop-title { font-weight: bold; font-size: 1.2rem; letter-spacing: 0.1em; color: var(--accent); }
  .cs .cs-shop-shards { font-size: 1rem; color: var(--rank-gold); margin: 0; }
  .cs .cs-shop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .cs .cs-shop-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.55rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.15rem;
    text-align: left;
  }
  .cs .cs-shop-item-name  { font-weight: bold; font-size: 0.95rem; color: var(--fg); }
  .cs .cs-shop-item-desc  { color: var(--muted); font-size: 0.82rem; }
  .cs .cs-shop-item-price { color: var(--rank-gold); font-size: 0.85rem; }
  .cs .cs-shop-item-btn {
    margin-top: 0.3rem;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
    min-height: 32px;
    letter-spacing: 0.06em;
  }
  .cs .cs-shop-item-btn:disabled {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
    cursor: default;
  }
  .cs .cs-shop-item.owned .cs-shop-item-btn {
    background: transparent;
    color: var(--ok);
    border-color: var(--ok);
    cursor: default;
  }
  .cs .cs-shop-next {
    align-self: center;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.08em;
    min-height: 44px;
    min-width: 44px;
  }

  /* --- Victory overlay --- */
  .cs .cs-victory-overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    display: flex; align-items: center; justify-content: center;
    border-radius: inherit;
    padding: 1rem; z-index: 10;
  }
  .cs .cs-victory-overlay[hidden] { display: none !important; }
  .cs .cs-victory-card {
    background: var(--card);
    border: 1px solid var(--rank-gold);
    border-radius: 8px;
    padding: 1.5rem 1.25rem;
    max-width: 26rem; width: 100%;
    display: flex; flex-direction: column; gap: 0.75rem;
    text-align: center;
    animation: cs-highscore-flash 0.6s ease-in-out 6;
  }
  .cs .cs-victory-title { font-weight: bold; font-size: 1.3rem; letter-spacing: 0.16em; color: var(--rank-gold); }
  .cs .cs-victory-time, .cs .cs-victory-score { font-size: 1.05rem; color: var(--fg); margin: 0; font-variant-numeric: tabular-nums; }
  .cs .cs-victory-rank  { color: var(--muted); font-size: 0.85rem; margin: 0; }
  .cs .cs-victory-form  { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }

  /* --- Potted plants on the porch (the thing being defended) --- */
  .cs .cs-planters {
    position: absolute;
    left: 0; right: 0; bottom: 56px;          /* sitting on top of the porch boards */
    height: 38px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 10%;
    pointer-events: none;
    z-index: 1;
  }
  .cs .cs-plant {
    position: relative;
    width: 22px; height: 38px;                /* coordinate box: pot at bottom, leaves on top */
  }
  .cs .cs-plant::before {                      /* terracotta pot — clip-path here only clips this pseudo */
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 22px; height: 18px;
    background: linear-gradient(to bottom, #c9743b, #a85a2a);
    clip-path: polygon(14% 0, 86% 0, 72% 100%, 28% 100%);   /* tapered pot */
  }
  .cs .cs-plant::after {                        /* leafy tuft + snow cap — NO clip-path, fully visible */
    content: "";
    position: absolute;
    bottom: 14px; left: 50%; transform: translateX(-50%);   /* overlaps the pot rim, rises above it */
    width: 26px; height: 24px;
    background:
      radial-gradient(circle at 50% 18%, #ffffff 0 5px, transparent 6px),                                  /* snow cap on top */
      radial-gradient(circle at 28% 62%, var(--ok) 0 6px, transparent 7px),                                 /* left leaf */
      radial-gradient(circle at 72% 62%, var(--ok) 0 6px, transparent 7px),                                 /* right leaf */
      radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ok) 80%, #fff) 0 7px, transparent 8px);   /* center leaf */
  }

  /* --- Decorative passerby: a bundled-up figure strolling the porch --- */
  .cs .cs-passerby {
    position: absolute;
    bottom: 56px;                 /* on the porch floor line */
    left: -6%;
    width: 12px; height: 22px;
    opacity: 0.32;
    pointer-events: none;
    z-index: 0;                   /* behind the plants (z-index 1) */
    background: color-mix(in srgb, var(--accent) 60%, var(--fg));   /* winter coat */
    border-radius: 5px 5px 3px 3px;
    animation: cs-passerby-walk 22s linear infinite;
  }
  .cs .cs-passerby::before {       /* bobble hat / head */
    content: "";
    position: absolute;
    left: 50%; top: -8px; transform: translateX(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--warn);
  }
  .cs .cs-passerby::after {        /* scarf */
    content: "";
    position: absolute;
    left: 50%; top: 2px; transform: translateX(-50%);
    width: 12px; height: 4px;
    border-radius: 2px;
    background: var(--alert);
  }
  @keyframes cs-passerby-walk {
    0%, 4%    { left: -6%;  transform: scaleX(1);  }   /* stroll right */
    48%       { left: 100%; transform: scaleX(1);  }
    52%       { left: 100%; transform: scaleX(-1); }   /* turn around */
    96%, 100% { left: -6%;  transform: scaleX(-1); }   /* stroll back */
  }

/* --- Light-theme contrast overrides (coldsnap chrome was designed for a dark bg) --- */
.cs .cs-highscore-banner { color: var(--dark); }
.cs .cs-start-btn,
.cs .cs-gameover-btn,
.cs .cs-shop-item-btn,
.cs .cs-shop-next { color: var(--white); }
.cs .cs-gameover-btn.ghost,
.cs .cs-hud-pause,
.cs .cs-hud-mute { color: var(--dark); }
.cs .cs-mist  { opacity: 0.7; }
.cs .cs-start, .cs .cs-game, .cs .cs-stage,
.cs .cs-gameover-card, .cs .cs-shop-card, .cs .cs-victory-card { border-radius: var(--radius); }