/* ============================================================
   Juniper's Social Thermometer — minigame styles
   Ported from the Schnerds Shopify theme's own copy of this file
   (schnerds-theme/assets/schnerds-juniper-game.css) for this static
   preview at maclandon.com/juniper — same game, same art, same CSS,
   just pointed at plain relative asset paths instead of Shopify's
   {{ asset_url }} / {% stylesheet %} plumbing (see the two rules
   below marked accordingly), and carrying its own --ink/--paper/etc
   tokens since this page doesn't have the Schnerds theme's global
   schnerds.css to inherit them from.
   Visual language: flat 2D, bold black outlines, comic drop-shadows
   (Npx Npx 0 ink), Fredoka display font. No white outlines added
   around the supplied transparent art, no gradients/glassmorphism/
   neon — flat fills only.
   ============================================================ */

:root { --paper:#FBF3E4; --ink:#1A1614; --pink:#FF2E92; --blue:#22A7E0; --yellow:#FFD21E; --green:#3DBB4E; --red:#ED2225; --font-display:'Fredoka',sans-serif; --font-body:'DM Sans',system-ui,sans-serif; }

/* Schnerds theme's sitewide content-wrap, restated here since this
   page doesn't load schnerds.css. */
.sn-wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

.sn-game-wrap { padding: 40px 0 72px; }

.sn-game-shell {
  position: relative;
  max-width: 1320px; /* was 760px, then 1080px — even larger on desktop, by request */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sn-game-title-row { text-align: center; margin-bottom: 4px; }
.sn-game-title-row h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 34px);
  color: var(--ink);
  margin: 0 0 4px;
}
.sn-game-title-row p {
  font-family: var(--font-body);
  color: var(--ink);
  opacity: .7;
  margin: 0;
  font-size: 15px;
}

/* ---- Loading state — shown until every sprite has decoded, per
   "Preload the image assets before enabling Start." ---- */
.sn-game-loading[hidden] { display: none; }
.sn-game-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 18px;
}
.sn-game-loading-spinner {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-top-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ink);
  animation: sn-game-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sn-game-loading-spinner { animation-duration: 2.4s; }
}
@keyframes sn-game-spin { to { transform: rotate(360deg); } }

/* ---- Shared "screen" cards (start / game-over) — NOT nested inside
   the fixed 3:2 board (a real 3:2 box is too short on most screens to
   hold an image + title + subtitle + instructions + button without
   clipping; confirmed live, the button was getting cut off by the
   board's own overflow:hidden). Own normal-flow cards instead, sized
   by their real content height, with the board itself hidden while
   either one shows — comic-card styling matching .sn-cp-quote-card
   sitewide either way. ---- */
.sn-game-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px 20px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 8px 0 var(--ink);
}
.sn-game-screen[hidden] { display: none; }

.sn-game-screen-juniper {
  width: clamp(110px, 22vw, 160px);
  height: auto;
  display: block;
  margin-bottom: 2px;
  animation: sn-game-float 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .sn-game-screen-juniper { animation: none; } }
@keyframes sn-game-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Start screen is now a fully-designed image (title, rules, AVOID/GRAB
   icon lists, and the START button are all real art) — two variants,
   a tall portrait one for mobile and a wide landscape one for desktop
   (own layout, own START button position), swapped via the same
   641px breakpoint used sitewide below. The card's own padding/gap
   are dropped so the image fills it edge-to-edge; overflow:hidden
   clips it to the card's rounded corners. A real, focusable button is
   positioned over each variant's own baked-in START pill (measured
   from its source image) so it's still a proper click/tap/keyboard
   target, not just "click anywhere." */
.sn-game-start-art { position: relative; padding: 0; gap: 0; overflow: hidden; }
.sn-game-start-variant { position: relative; }
.sn-game-start-bg { display: block; width: 100%; height: auto; }
.sn-game-start-hit {
  position: absolute;
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  cursor: pointer;
}
.sn-game-start-desktop { display: none; }
.sn-game-start-mobile { display: block; }
.sn-game-start-hit-mobile { left: 28.6%; right: 10%; top: 75%; bottom: 8.5%; }
.sn-game-start-hit-desktop { left: 36%; right: 36%; top: 84.5%; bottom: 8%; }
@media (min-width: 641px) {
  .sn-game-start-desktop { display: block; }
  .sn-game-start-mobile { display: none; }
}

.sn-game-start h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 32px);
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.sn-game-start .sn-game-subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue);
  font-size: clamp(15px, 2.4vw, 18px);
  margin: 0;
}
.sn-game-start .sn-game-instructions {
  font-family: var(--font-body);
  color: var(--ink);
  opacity: .75;
  max-width: 380px;
  font-size: 14px;
  margin: 0 0 6px;
}

.sn-game-over h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 36px);
  color: var(--red);
  margin: 0;
}
.sn-game-over .sn-game-over-line {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
  margin: 0;
}
.sn-game-over .sn-game-score-line {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 15px;
  margin: 4px 0 2px;
}
.sn-game-over .sn-game-score-line strong { font-family: var(--font-display); font-size: 20px; }

/* ---- Buttons — built from the supplied pill art (JuniperGame 7/8)
   as a background image, stretched only along its own straight middle
   (border-image-style slice keeps the rounded caps undistorted) so
   any button label length still reads as the same rounded-pill shape. ---- */
.sn-game-btn {
  appearance: none;
  /* No `border: none;` shorthand here on purpose — it resets
     border-image-source (and every other border-image-* longhand)
     right along with it in every major browser, which silently wiped
     out the pill art set via border-image-source further down and in
     this section's own {% stylesheet %} block (confirmed live: the
     button rendered as a bare white box). border-color: transparent
     gets the same "no visible plain border" result without touching
     border-image at all. */
  border-color: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  padding: 16px 30px;
  min-width: 180px;
  border-style: solid;
  /* Slice values are SOURCE-image pixels: the supplied pill art
     (JuniperGame 7/8, ~422x203) is a true stadium shape — its rounded
     end-caps are as wide as the pill is tall (~half the height each
     side), not a small corner radius. 40/100 matches that endcap
     proportion so border-image-repeat:stretch only stretches the
     straight middle, leaving both rounded ends undistorted at any
     label width. */
  border-width: 24px 58px;
  border-image-slice: 40 100 fill;
  border-image-width: 24px 58px;
  border-image-repeat: stretch;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}
.sn-game-btn:hover { transform: translateY(-2px) scale(1.02); }
.sn-game-btn:active { transform: translateY(1px) scale(.98); }
/* border-image-source for these two is set in the section's own
   {% stylesheet %} block (schnerds-juniper-game.liquid), the only
   place that can run asset_url to get the pill art's real URL. */
/* Hardcoded url()s here instead of the Shopify version's CSS-var/
   inline-style plumbing — there's no Liquid asset_url on a static
   page, and a plain relative path does the same job directly. */
.sn-game-btn-start { color: #fff; border-image-source: url('img/schnerds/schnerds-game-ui-pill-blue.webp'); }
.sn-game-btn-restart { color: var(--ink); border-image-source: url('img/schnerds/schnerds-game-ui-pill-yellow.webp'); }
@media (prefers-reduced-motion: reduce) { .sn-game-btn { transition: none; } }

/* ---- HUD ---- */
.sn-game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sn-game-hud[hidden] { display: none; }
/* By request — swap the HUD (thermometer/score/lives) and the game
   board's visual order: board now reads first, HUD below it. order
   only, not a DOM move — every JS reference (document.getElementById)
   is DOM-position-independent, so this is purely visual and touches
   nothing else. .sn-game-shell is the flex column both live in. */
.sn-game-hud { order: 2; }
.sn-game-board { order: 1; }

.sn-game-thermo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* The full-thermometer icon is a static mood decoration (the supplied
   art has no needle to rotate) — the real readout is which of the
   four COLD/COOL/WARM/COZY state images is currently showing next to
   it, swapped in refreshHud() rather than drawn/rotated in code.
   Sized by HEIGHT, not width — thermo-full's own source art is a
   short, wide strip (747x202), so width-based sizing was rendering it
   much shorter than the score panel/hearts next to it even at a
   "big" width. Height-matching to the score panel's own rendered
   height (~95-100px) is what actually reads as the same size. */
.sn-game-thermo-bar { position: relative; display: block; line-height: 0; flex-shrink: 0; }
/* By request — much larger, and using the HUD's own free space
   instead of sitting small next to it. */
.sn-game-thermo-icon { display: block; height: clamp(60px, 15vw, 170px); width: auto; }
.sn-game-thermo-state { display: block; height: clamp(80px, 15vw, 170px); width: auto; }
/* Position indicator (by request) — a vertical pin that slides along
   the gradient tube to show exactly where the live value sits, not
   just which of the 4 broad bands it's in. Positioned as a % of the
   ICON's own box (same box the marker is absolutely placed against,
   since .sn-game-thermo-wrap is the shared positioning parent and the
   icon is sized by height/auto-width right before it in source order)
   using --sn-thermo-pct, set every frame in updateThermometer(). 8%/
   86.75% below are the real measured start/end of the tube's colored
   gradient inside the source art (747x202 — sampled the pixels: solid
   blue starts at x=60, the pink end blends into the cap's black
   outline at x=648), not a guess — the bulb and rounded end-cap on
   either side of that aren't part of the 0-100 scale. */
.sn-game-thermo-marker {
  position: absolute;
  top: 8%;
  bottom: 18%;
  left: calc(8% + (var(--sn-thermo-pct, 0.5) * 78.75%));
  transform: translateX(-50%);
  width: 7px; /* scaled up alongside the larger thermometer */
  border-radius: 4px;
  background: var(--ink, #1A1614);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
  pointer-events: none;
  z-index: 2;
  transition: left .15s linear;
}
/* Small dot on top, reads as a flag/pin rather than a bare tick. */
.sn-game-thermo-marker::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink, #1A1614);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
@media (prefers-reduced-motion: reduce) {
  .sn-game-thermo-marker { transition: none; }
}

.sn-game-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.sn-game-readout {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  aspect-ratio: 395 / 163;
  background-image: url('img/schnerds/schnerds-game-ui-panel.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 8px;
}
.sn-game-readout span {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(12px, 2.2vw, 22px);
}
.sn-game-readout .sn-game-dot { opacity: .5; margin: 0 6px; }
.sn-game-lives { display: flex; gap: 4px; }
.sn-game-lives img { width: 34px; height: auto; display: block; }

.sn-game-pause-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.sn-game-pause-btn img { width: 42px; height: auto; display: block; }
.sn-game-pause-btn:active { transform: translateY(1px); }

/* ---- Board ---- */
.sn-game-board {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid var(--ink);
  /* Drop shadow removed, by request. */
  background: #cfe9c9; /* visible only for a frame before the bg image paints */
  touch-action: none; /* dragging Juniper never scrolls the page; nothing outside the board is affected */
  -webkit-user-select: none;
  user-select: none;
}
.sn-game-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Speech bubble — DOM element positioned each frame to track Juniper,
   using the supplied bubble art (JuniperGame 9) as its background so
   the tail/shape is real art, not a CSS-drawn triangle. */
.sn-game-bubble {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -100%);
  padding: 14px 20px 26px;
  min-width: 120px;
  max-width: 200px;
  background-image: url('img/schnerds/schnerds-game-ui-bubble.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sn-game-bubble.is-visible { opacity: 1; }

/* Level banner + critical-warning banner — same slot, swapped content. */
.sn-game-banner {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
  background: rgba(251, 243, 228, 0.0);
}
.sn-game-banner[hidden] { display: none; }
.sn-game-banner.is-level {
  background: rgba(251, 243, 228, 0.88);
}
.sn-game-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 40px);
  color: var(--ink);
  margin: 0;
  animation: sn-game-pop 0.35s ease;
}
.sn-game-banner-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--blue);
  margin: 0;
}
.sn-game-banner-juniper {
  width: 92px;
  height: auto;
  margin-bottom: 4px;
  animation: sn-game-pop 0.4s ease;
}
@keyframes sn-game-pop {
  0% { transform: scale(.5); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-game-banner-title, .sn-game-banner-juniper { animation: none; }
}

.sn-game-shell[data-paused="1"] .sn-game-paused-note {
  display: flex;
}
.sn-game-paused-note {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26, 22, 20, 0.55);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  padding: 20px;
}

.sn-game-credit {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
  opacity: .5;
  margin: 2px 0 0;
}

/* Power-up key legend (by request — "a little small key legend...
   what the power ups are"). Collapsed <details> so it stays out of the
   way of the board by default; matches the site's established sticker
   language (thick ink border, hard offset shadow) at a much smaller
   scale than a full card. */
.sn-game-legend {
  width: 100%;
  margin: 4px 0 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 4px 0 var(--ink);
  padding: 8px 14px;
}
.sn-game-legend summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
}
.sn-game-legend-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.sn-game-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sn-game-legend-row img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.sn-game-legend-row span {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.sn-game-legend-row b { font-family: var(--font-display); font-weight: 700; }

/* ===================== Enhancement pass additions ===================== */

/* Real text readout beside the thermometer badge image (by request —
   "Current state: Cold, Cool, Cozy, or Warm" as text, not just the
   badge art). Kept in sync with it in refreshHud(). */
.sn-game-thermo-label-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sn-game-thermo-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 3vw, 26px); /* by request — much larger COLD/COOL/WARM/COZY readout */
  letter-spacing: .06em;
  color: var(--ink);
}
/* Obvious-change pulse (by request — "use animation and shape in
   addition to color"): a brief scale+glow on the marker itself,
   triggered by JS toggling this class for ~450ms every time the
   thermometer's value actually moves, not a permanent animation. */
.sn-game-thermo-marker.is-pulsing { animation: thermoPulse .45s ease-out; }
@keyframes thermoPulse {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.6); }
  100% { transform: translateX(-50%) scale(1); }
}
.sn-game-thermo-marker.is-pulsing::before { animation: thermoDotPulse .45s ease-out; }
@keyframes thermoDotPulse {
  0% { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
  40% { box-shadow: 0 0 0 6px rgba(255,255,255,.85); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-game-thermo-marker.is-pulsing, .sn-game-thermo-marker.is-pulsing::before { animation: none; }
}

/* Active power-up badges (by request) — small chips, one per running
   powerup, each with a live countdown ring. JS only appends children
   while game.powerups has a live entry, no [hidden] toggling needed —
   but the row used to take zero height when empty, so a badge popping
   in mid-run grew the HUD's total height and shifted the whole page
   (the game board is tall enough that the page was already flirting
   with needing a scrollbar; that height change was tipping it over
   and jumping the scroll position — "the screen jumps," by request).
   min-height reserves one badge row's worth of space up front, empty
   or not, so a badge appearing never changes the page's layout height. */
.sn-game-powerups { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; order: 3; min-height: 32px; }
.sn-game-powerup-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink);
}
.sn-game-powerup-badge img { width: 22px; height: 22px; object-fit: contain; }
.sn-game-powerup-badge b { font-variant-numeric: tabular-nums; }

/* 3-2-1 countdown — overlays the board (Juniper/objects visible but
   frozen underneath), same layer pattern as .sn-game-banner. */
.sn-game-countdown {
  position: absolute;
  inset: 0;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 22, 20, .25);
}
.sn-game-countdown[hidden] { display: none; }
.sn-game-countdown-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 16vw, 140px);
  color: #fff;
  text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(0,0,0,.4);
  animation: countdownPop .7s ease-out;
}
@keyframes countdownPop { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sn-game-countdown-num { animation: none; }
}

/* Game-over: expanded stats + new-best banner. */
.sn-game-new-best {
  margin: 0;
  padding: 4px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink);
  animation: newBestPop .35s ease-out;
}
.sn-game-new-best[hidden] { display: none; }
@keyframes newBestPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sn-game-new-best { animation: none; } }
.sn-game-over-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 16px;
  margin: 4px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}
.sn-game-over-stats span:nth-child(odd) { text-align: right; opacity: .65; }
.sn-game-over-stats span:nth-child(even) { text-align: left; font-weight: 700; font-family: var(--font-display); }

@media (max-width: 640px) {
  /* By request — mobile elements were reading as cut off (needed a
     scroll to reach Start); trimmed the page's own top/bottom padding
     around the shell so the full start screen has better odds of
     fitting in one mobile viewport. */
  .sn-game-wrap { padding: 10px 0 16px; }
  .sn-game-shell { max-width: 100%; padding: 0 4px; margin: 0 auto; box-sizing: border-box; }
  /* Real centering guard (by request — "make sure the game is
     centered") — width:100% + margin:0 auto alone doesn't protect
     against the board being pushed off-center by a horizontal
     overflow elsewhere in the shell (a grid/flex child wider than the
     viewport forces the whole page to scroll right, which reads as
     "not centered" even though this element's own box is technically
     centered within an now-wider-than-viewport parent). box-sizing
     make the 4px shell padding above actually count toward 100%
     instead of adding to it. */
  .sn-game-board { width: 100%; margin: 0 auto; box-sizing: border-box; }
  /* Black stroke removed on mobile specifically, by request — desktop
     keeps it untouched. */
  .sn-game-board { border: none; }
  /* Mobile HUD redesign (by request — "one compact responsive unit...
     eliminate the large unused cream-colored gaps"). The desktop
     layout's .sn-game-readout min-width:270px plus a wrapping flex row
     were the real cause: at narrow widths the thermometer and the
     stats block each claimed a full row (wrapping), and the readout's
     min-width forced extra blank cream padding inside its own panel
     art past what the actual score/level text needed.
     Was a 2-column grid (thermometer | stats) sharing one row — once
     the thermometer got much bigger per request, its own "auto" column
     width grew enough to squeeze the stats column off the right edge
     ("score and level is cut off / pushed to the right"). Stacked
     instead: thermometer gets its own full-width centered row, stats
     (readout/lives/pause) get their own centered row below it — the
     two no longer compete for the same horizontal space at any size. */
  .sn-game-hud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  .sn-game-thermo-wrap { justify-content: center; width: 100%; }
  /* By request — much larger on mobile too, using the HUD's own free
     space instead of leaving it small next to the stats pill. */
  .sn-game-thermo-icon { height: 72px; }
  .sn-game-thermo-state { height: 62px; }
  .sn-game-thermo-label { font-size: 15px; }
  .sn-game-stats { flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; }
  .sn-game-readout { min-width: 0; width: auto; aspect-ratio: auto; padding: 4px 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; background-image: none; }
  .sn-game-readout span { font-size: 13px; }
  .sn-game-lives img { width: 22px; }
  /* Bigger tap target (by request — "make Pause large enough to tap
     comfortably"), was a bare 42px image with zero padding around it
     (well under the 44px touch-target minimum once you count the
     image doesn't even fill its own box edge to edge). Real circular
     button now, same sticker language as the readout pill. */
  .sn-game-pause-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
  }
  .sn-game-pause-btn img { width: 20px; }
  .sn-game-legend { margin-left: 4px; margin-right: 4px; width: auto; }
}

/* "Send my score" (Chris, Sept 30): the blue pill, under Restart. */
.sn-game-btn-share { margin-top: 12px; color: #fff; border-image-source: url('img/schnerds/schnerds-game-ui-pill-blue.webp'); }

/* 2026-10-16 refinements */
/* The badge art already says COLD/COOL/WARM/COZY; the text copy was a dark ghost on navy. Kept for screen readers. */
.sn-game-thermo-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.sn-game-sound-btn {
  appearance:none; border:0; background:#FFF6E3; border-radius:999px;
  width:44px; height:44px; font-size:20px; line-height:44px; padding:0;
  box-shadow:0 3px 0 rgba(0,0,0,.25); cursor:pointer;
}
.sn-game-sound-btn:active { transform: translateY(1px); }
/* drag pad: no page scroll/bounce while steering anywhere on screen */
html.sn-playing, html.sn-playing body { touch-action:none; overscroll-behavior:none; }
/* level-up ribbon: play continues underneath */
.sn-game-banner.is-ribbon { inset: auto 0 auto 0; top: 4%; background: none; gap: 2px; }
.sn-game-banner.is-ribbon .sn-game-banner-title {
  background: #FFD23F; border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 18px; font-size: clamp(18px, 4vw, 28px); box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.sn-game-banner.is-ribbon .sn-game-banner-sub {
  background: rgba(255,255,255,.85); border-radius: 999px; padding: 2px 10px; font-size: 12px;
}
/* 2026-10-16 end screen: rises in, one big count-up number, three flip tiles */
.sn-game-over:not([hidden]) { animation: snGoRise .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes snGoRise { from { opacity:0; transform: translateY(40px) scale(.96); } to { opacity:1; transform:none; } }
.sn-go-hero { display:flex; flex-direction:column; align-items:center; margin: 6px 0 10px; }
.sn-go-label { font-family: var(--font-display); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.sn-go-big { font-family: var(--font-display); font-weight:700; font-size: clamp(56px, 16vw, 88px); line-height:1; color: var(--ink); }
.sn-go-hero .sn-game-new-best { margin:4px 0 0; }
.sn-go-tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; width:min(340px, 92%); margin: 0 auto 14px; perspective: 600px; }
.sn-go-tile {
  background:#fff; border:3px solid var(--ink); border-radius:16px; padding:8px 4px 6px;
  display:flex; flex-direction:column; align-items:center; box-shadow:0 4px 0 rgba(0,0,0,.18);
  transform-origin: 50% 0;
}
.sn-go-tile b { font-family: var(--font-display); font-size:26px; line-height:1.1; }
.sn-go-tile span { font-size:12px; font-weight:700; opacity:.7; }
.sn-game-over:not([hidden]) .sn-go-tile { animation: snGoFlip .5s ease-out both; }
.sn-game-over:not([hidden]) .sn-go-tile:nth-child(1) { animation-delay: .55s; }
.sn-game-over:not([hidden]) .sn-go-tile:nth-child(2) { animation-delay: .7s; }
.sn-game-over:not([hidden]) .sn-go-tile:nth-child(3) { animation-delay: .85s; }
@keyframes snGoFlip { from { transform: rotateX(-90deg); opacity:0; } 60% { transform: rotateX(12deg); opacity:1; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .sn-game-over:not([hidden]), .sn-game-over:not([hidden]) .sn-go-tile { animation:none; }
}
/* first-game "drag anywhere" hint, sits in the open space under the board */
.sn-drag-hint {
  position: fixed; left: 50%; bottom: 16vh; transform: translateX(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #FFF6E3;
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.sn-drag-hint.is-on { opacity: 1; }
.sn-drag-hint-finger { font-size: 42px; animation: snDragSlide 1.4s ease-in-out infinite; }
@keyframes snDragSlide { 0%,100% { transform: translateX(-46px); } 50% { transform: translateX(46px); } }
@media (prefers-reduced-motion: reduce) { .sn-drag-hint-finger { animation: none; } }
/* end screen fits short phones (iPhone with Safari bars ~660px tall) */
.sn-game-over { gap: 6px; padding: 18px 16px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.sn-game-over .sn-game-screen-juniper { width: clamp(84px, 18vw, 120px); }
.sn-game-over .sn-game-btn { padding: 6px 22px; border-width: 18px 44px; border-image-width: 18px 44px; font-size: 18px; min-width: 200px; }
.sn-game-over .sn-game-btn-share { margin-top: 2px; }
@media (max-height: 760px) {
  .sn-go-big { font-size: 58px; }
  .sn-go-hero { margin: 0 0 6px; }
  .sn-go-tile b { font-size: 22px; }
  .sn-game-over .sn-game-over-line { margin: 0; }
}
.sn-drag-hint { bottom: auto; }
.sn-drag-hint > span:last-child { white-space: nowrap; background: rgba(22,19,15,.78); padding: 6px 14px; border-radius: 999px; }
/* the shared "All games" pill hides while a round is running (it sat on the HUD on short phones) */
html.sn-playing #mac-games-return { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* 2026-10-16: full-screen end scene. Warm golden cafeteria after a great run,
   quiet dusk cafeteria after a rough one. Tall art on phones and iPad portrait,
   wide art (Juniper left, numbers right) on iPad landscape and desktop. */
.sn-game-over.is-great, .sn-game-over.is-rough {
  position: fixed; inset: 0; z-index: 9999; border: 0; border-radius: 0; box-shadow: none;
  max-height: none; overflow-y: auto; justify-content: flex-start; gap: 4px;
  padding: max(28px, env(safe-area-inset-top)) 16px 84px;
  background: #f6d48a url(img/schnerds/schnerds-game-end-warm.webp) center / cover no-repeat;
}
.sn-game-over.is-rough { background: #4b4f86 url(img/schnerds/schnerds-game-end-dusk.webp) center 70% / cover no-repeat; }
.sn-game-over.is-great .sn-go-hero, .sn-game-over.is-rough .sn-go-hero { order: -2; margin: 2vh 0 0; }
.sn-game-over.is-great .sn-go-label { color: #7a3f00; opacity: .85; }
.sn-game-over.is-rough .sn-go-label { color: #fff; opacity: .9; }
.sn-game-over.is-great .sn-go-big, .sn-game-over.is-rough .sn-go-big {
  font-size: clamp(72px, 20vw, 130px); color: #fff;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink);
}
.sn-game-over.is-great h2, .sn-game-over.is-rough h2 { order: -1; margin: 0; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.sn-game-over.is-great h2 { color: #ff8a1f; }
.sn-game-over.is-great .sn-game-screen-juniper, .sn-game-over.is-rough .sn-game-screen-juniper {
  width: clamp(120px, 32vw, 200px); margin-top: auto;
}
.sn-game-over.is-great .sn-game-screen-juniper { filter: drop-shadow(0 10px 14px rgba(255,170,40,.6)); }
.sn-game-over.is-rough .sn-game-screen-juniper { filter: drop-shadow(0 10px 14px rgba(255,200,120,.45)); }
.sn-game-over.is-great .sn-game-over-line, .sn-game-over.is-rough .sn-game-over-line {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 14px; font-weight: 700;
}
.sn-game-over.is-great .sn-go-tiles, .sn-game-over.is-rough .sn-go-tiles { margin-top: 6px; }
.sn-game-over.is-great .sn-go-tile, .sn-game-over.is-rough .sn-go-tile { background: rgba(255,250,238,.94); }
.sn-game-over.is-great .sn-game-btn-restart, .sn-game-over.is-rough .sn-game-btn-restart { margin-top: auto; }

@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  .sn-game-over.is-great, .sn-game-over.is-rough {
    display: grid; grid-template-columns: 46% 54%; justify-items: center; align-content: center; row-gap: 6px;
    padding: 24px 24px 24px;
    background-image: url(img/schnerds/schnerds-game-end-warm-wide.webp); background-position: 30% 70%;
  }
  .sn-game-over.is-rough { background-image: url(img/schnerds/schnerds-game-end-dusk-wide.webp); background-position: 35% 70%; }
  .sn-game-over.is-great > *, .sn-game-over.is-rough > * { grid-column: 2; }
  .sn-game-over.is-great .sn-game-screen-juniper, .sn-game-over.is-rough .sn-game-screen-juniper {
    grid-column: 1; grid-row: 1 / span 9; align-self: end; margin: 0 0 14vh; width: clamp(170px, 22vw, 280px);
  }
  .sn-game-over.is-great .sn-go-hero, .sn-game-over.is-rough .sn-go-hero { margin: 0; }
  .sn-game-over.is-great .sn-game-btn-restart, .sn-game-over.is-rough .sn-game-btn-restart { margin-top: 10px; }
}
@media (orientation: portrait) and (min-width: 700px) {
  .sn-game-over.is-great .sn-game-screen-juniper, .sn-game-over.is-rough .sn-game-screen-juniper { width: clamp(200px, 30vw, 300px); }
  .sn-game-over.is-great .sn-game-btn-restart, .sn-game-over.is-rough .sn-game-btn-restart { margin-top: 4vh; }
  .sn-game-over.is-great .sn-game-btn-share, .sn-game-over.is-rough .sn-game-btn-share { margin-bottom: auto; }
}

/* 2026-10-17: full-screen start scene. The start art sits inside a night
   cafeteria made for the screen's shape, edges feathered so it reads as one
   picture. Portrait art on phones and iPad portrait, wide art on iPad
   landscape and desktop, always sized to fit (the START pill never crops). */
#sn-game-start.sn-game-start-art:not([hidden]) {
  position: fixed; inset: 0; z-index: 9998; border: 0; border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: #0a1430 url(img/schnerds/schnerds-game-start-bg.webp) center / cover no-repeat;
}
#sn-game-start .sn-game-start-mobile { display: block; width: min(100vw, calc((100dvh - 40px) * 0.726)); }
#sn-game-start .sn-game-start-desktop { display: none; }
#sn-game-start .sn-game-start-bg {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
@media (max-width: 500px) and (orientation: portrait) {
  /* phones: the art already spans the width, so only feather top and bottom */
  #sn-game-start .sn-game-start-bg {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  }
}
@media (orientation: landscape) and (min-width: 641px) {
  #sn-game-start.sn-game-start-art:not([hidden]) { background-image: url(img/schnerds/schnerds-game-start-bg-wide.webp); }
  #sn-game-start .sn-game-start-mobile { display: none; }
  #sn-game-start .sn-game-start-desktop { display: block; width: min(96vw, calc((100dvh - 24px) * 1.363)); }
}

/* ===== 2026-10-17: live start screen (.sn-start2) ===== */
#sn-game-start.sn-start2:not([hidden]) {
  position: fixed; inset: 0; z-index: 9998; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 6px;
  padding: max(14px, env(safe-area-inset-top)) 12px max(64px, calc(env(safe-area-inset-bottom) + 58px));
  overflow-y: auto; text-align: center;
  background: #bfe3ee url(img/schnerds/schnerds-game-start-scene.webp) center 40% / cover no-repeat;
}
.sn-start2 h1 { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .92; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.sn-s2-t1, .sn-s2-t2 { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.sn-s2-t1 { color: #FFD21E; font-size: clamp(30px, 10vw, 64px); }
.sn-s2-t2 { color: #39D0C2; font-size: clamp(40px, 13.5vw, 88px); }
.sn-s2-tag { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 3.8vw, 20px); color: var(--ink);
  background: rgba(251,243,228,.92); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 14px; display: inline-block; }
.sn-s2-tag b { color: #F39B1F; }

.sn-s2-mid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; width: 100%; max-width: 560px; }
.sn-s2-col { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 18px;
  background: rgba(12,30,62,.62); border: 2px solid var(--ink); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sn-s2-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-s2-col li { display: flex; align-items: center; gap: 6px; color: #fff; text-align: left; }
.sn-s2-col img { width: clamp(30px, 5.2vh, 46px); height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.sn-s2-col li span { display: flex; flex-direction: column; line-height: 1.05; }
.sn-s2-col b { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.sn-s2-col small { display: none; font-size: 12px; opacity: .9; max-width: 150px; }
.sn-s2-pill { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; }
.sn-s2-avoid .sn-s2-pill { background: #2F7CF6; }
.sn-s2-grab .sn-s2-pill { background: #F39B1F; }
.sn-s2-grab li { flex-direction: column; gap: 0; text-align: center; }
.sn-s2-grab li span { align-items: center; }

.sn-s2-hero { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.sn-s2-jun { width: clamp(96px, 30vw, 190px); height: auto; filter: drop-shadow(0 8px 10px rgba(0,40,80,.35)); animation: sn-game-float 2.6s ease-in-out infinite; }
.sn-s2-thermo { display: flex; flex-direction: column; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; box-shadow: 3px 4px 0 var(--ink); }
.sn-s2-thermo span { font-family: var(--font-display); font-weight: 700; font-size: clamp(10px, 2.6vw, 14px); color: #fff; padding: clamp(5px, 1.3vh, 10px) 7px; text-transform: uppercase; letter-spacing: .03em; }
.sn-s2-thermo .w { background: #EF5B3B; } .sn-s2-thermo .z { background: #F39B1F; } .sn-s2-thermo .c { background: #2F7CF6; } .sn-s2-thermo .f { background: #1E3E9E; }

.sn-s2-card { background: rgba(251,243,228,.95); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 5px 0 var(--ink); padding: 6px 10px 8px; width: 100%; max-width: 440px; }
.sn-s2-card-h { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 3.6vw, 17px); text-transform: uppercase; }
.sn-s2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sn-s2-steps > div { display: flex; flex-direction: column; align-items: center; font-size: clamp(11px, 3vw, 14px); font-weight: 600; line-height: 1.1; }
.sn-s2-steps > div + div { border-left: 2px dashed rgba(26,22,20,.25); }
.sn-s2-ico { display: flex; align-items: center; gap: 2px; height: 30px; }
.sn-s2-ico img { height: 28px; width: auto; }
.sn-s2-ico i { font-style: normal; font-weight: 700; font-size: 22px; }
.sn-s2-ico .dn { color: #2F7CF6; } .sn-s2-ico .up { color: #EF5B3B; }

.sn-s2-start { font-size: 26px; letter-spacing: .06em; min-width: 230px; animation: sn-s2-pulse 1.6s ease-in-out infinite; }
@keyframes sn-s2-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.sn-s2-drag { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); background: rgba(251,243,228,.85); border-radius: 999px; padding: 2px 12px; }
.sn-s2-drag .mouse { display: none; }
@media (pointer: fine) { .sn-s2-drag .mouse { display: inline; } .sn-s2-drag .touch { display: none; } }
@media (prefers-reduced-motion: reduce) { .sn-s2-start, .sn-s2-jun { animation: none; } }

/* wider portrait screens (iPad held upright): bigger pieces + grab descriptions */
@media (orientation: portrait) and (min-width: 700px) {
  .sn-s2-mid { max-width: 760px; gap: 18px; }
  .sn-s2-col { padding: 12px 12px; }
  .sn-s2-col img { width: 54px; }
  .sn-s2-grab li { flex-direction: row; gap: 10px; text-align: left; }
  .sn-s2-grab li span { align-items: flex-start; }
  .sn-s2-col b { font-size: 17px; }
  .sn-s2-col small { display: block; font-size: 14px; }
  .sn-s2-jun { width: 210px; }
  .sn-s2-thermo span { font-size: 16px; padding: 14px 10px; }
  .sn-s2-card { max-width: 600px; padding: 10px 16px 12px; }
  .sn-s2-steps > div { font-size: 16px; }
  .sn-s2-ico { height: 40px; } .sn-s2-ico img { height: 38px; }
}
/* iPad landscape / desktop: wide scene, columns with full descriptions */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  #sn-game-start.sn-start2:not([hidden]) { background-image: url(img/schnerds/schnerds-game-start-scene-wide.webp); background-position: center 60%; padding-bottom: 20px; gap: 4px; }
  .sn-s2-t1 { font-size: clamp(30px, 5.4vh, 52px); } .sn-s2-t2 { font-size: clamp(40px, 8.6vh, 84px); }
  .sn-s2-mid { max-width: 1000px; gap: 20px; }
  .sn-s2-avoid ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .sn-s2-col { padding: 10px 14px; }
  .sn-s2-col img { width: clamp(38px, 6vh, 54px); }
  .sn-s2-grab li { flex-direction: row; gap: 10px; text-align: left; }
  .sn-s2-grab li span { align-items: flex-start; }
  .sn-s2-col b { font-size: 16px; }
  .sn-s2-col small { display: block; font-size: 13px; }
  .sn-s2-jun { width: clamp(150px, 24vh, 230px); }
  .sn-s2-thermo span { font-size: 15px; padding: clamp(8px, 1.6vh, 14px) 10px; }
  .sn-s2-card { max-width: 560px; }
}
.sn-start2 { font-family: var(--font-body); }
.sn-start2 .sn-s2-start { position: relative; inset: auto; padding: 8px 26px; border-width: 22px 50px; border-image-width: 22px 50px; font-size: 24px; min-width: 220px; flex: none; }
.sn-s2-steps > div, .sn-s2-col small { font-family: var(--font-body); }
@media (max-height: 700px) and (orientation: portrait) {
  .sn-s2-t1 { font-size: 26px; } .sn-s2-t2 { font-size: 38px; }
  .sn-s2-tag { font-size: 13px; margin-top: 4px; }
  .sn-s2-col img { width: 26px; }
  .sn-s2-col { padding: 5px 5px; gap: 2px; }
  .sn-s2-col b { font-size: 11px; }
  .sn-s2-jun { width: 92px; }
  .sn-s2-thermo span { font-size: 10px; padding: 4px 6px; }
  .sn-s2-card { padding: 4px 8px 6px; } .sn-s2-ico { height: 24px; } .sn-s2-ico img { height: 22px; }
  .sn-s2-steps > div { font-size: 11px; }
  .sn-start2 .sn-s2-start { font-size: 20px; padding: 4px 20px; border-width: 18px 44px; border-image-width: 18px 44px; }
  .sn-s2-drag { font-size: 12px; }
}
.sn-s2-thermo { flex: none; }
.sn-s2-jun { min-width: 0; flex: 0 1 auto; }
@media (max-height: 700px) and (orientation: portrait) {
  .sn-s2-drag { display: none; }
  #sn-game-start.sn-start2:not([hidden]) { justify-content: flex-start; gap: 5px; padding-top: 10px; }
  .sn-s2-jun { width: 80px; }
}

/* ===== 2026-10-17: premium pass on the start screen ===== */
/* 3. background pushed back: blurred, slightly dimmed, soft vignette */
#sn-game-start.sn-start2:not([hidden]) { background: #bfe3ee; justify-content: center; gap: clamp(8px, 1.6vh, 16px); isolation: isolate; }
#sn-game-start.sn-start2::before, #sn-game-start.sn-start2::after { content: ''; position: fixed; inset: -16px; z-index: -1; pointer-events: none; }
#sn-game-start.sn-start2::before { background: url(img/schnerds/schnerds-game-start-scene.webp) center 40% / cover no-repeat; filter: blur(3px) saturate(1.05) brightness(.96); }
#sn-game-start.sn-start2::after { background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(255,255,255,0) 40%, rgba(10,40,80,.28) 100%); }
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  #sn-game-start.sn-start2:not([hidden]) { background: #bfe3ee; }
  #sn-game-start.sn-start2::before { background-image: url(img/schnerds/schnerds-game-start-scene-wide.webp); background-position: center 60%; }
}

/* 7. title with real depth */
.sn-s2-t1, .sn-s2-t2 { -webkit-text-stroke: 5px var(--ink); text-shadow: 0 5px 0 var(--ink), 0 12px 22px rgba(0,30,70,.35); }
.sn-s2-t2 { background: none; }
.sn-s2-tag { font-size: clamp(14px, 3.8vw, 21px); padding: 5px 18px; box-shadow: 3px 4px 0 var(--ink); margin-top: 10px; }

/* 1 + 2. matched cream cards: cold glow left, warm glow right */
.sn-s2-mid { align-items: stretch; }
.sn-s2-col { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px;
  -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-start; padding-top: 10px; }
.sn-s2-avoid { box-shadow: 4px 5px 0 var(--ink), 0 0 28px rgba(47,124,246,.55); }
.sn-s2-grab  { box-shadow: 4px 5px 0 var(--ink), 0 0 28px rgba(243,155,31,.6); }
.sn-s2-col li { color: var(--ink); }
.sn-s2-col small { opacity: .75; }
.sn-s2-col ul { flex: 1; justify-content: space-around; }
.sn-s2-cap { margin: 0 0 2px; font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 1.1; opacity: .7; max-width: 12ch; }
.sn-s2-col img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.sn-s2-hero { align-self: center; }

/* 4. Juniper grounded + the thermometer points at the goal */
.sn-s2-junwrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.sn-s2-floor { width: 70%; height: 14px; margin-top: -4px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10,40,80,.38), rgba(10,40,80,0) 70%); animation: sn-s2-floor 2.6s ease-in-out infinite; }
@keyframes sn-s2-floor { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.82); opacity: .6; } }
.sn-s2-thermo { position: relative; overflow: visible; }
.sn-s2-thermo span:first-child { border-radius: 999px 999px 0 0; } .sn-s2-thermo span:last-child { border-radius: 0 0 999px 999px; }
.sn-s2-thermo .z { position: relative; }
.sn-s2-aim { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-style: normal;
  font-size: .85em; color: var(--ink); background: #FFD21E; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 8px; box-shadow: 2px 2px 0 var(--ink);
  animation: sn-s2-aim 1.4s ease-in-out infinite; }
@keyframes sn-s2-aim { 0%,100% { transform: translate(0,-50%); } 50% { transform: translate(5px,-50%); } }

/* 6. one-second entrance, then a shine sweep on START */
#sn-game-start.sn-start2:not([hidden]) .sn-s2-title { animation: sn-s2-drop .55s cubic-bezier(.2,.9,.3,1.25) both; }
#sn-game-start.sn-start2:not([hidden]) .sn-s2-avoid { animation: sn-s2-left .5s .2s cubic-bezier(.2,.9,.3,1.1) both; }
#sn-game-start.sn-start2:not([hidden]) .sn-s2-grab { animation: sn-s2-right .5s .2s cubic-bezier(.2,.9,.3,1.1) both; }
#sn-game-start.sn-start2:not([hidden]) .sn-s2-hero { animation: sn-s2-up .5s .3s ease-out both; }
#sn-game-start.sn-start2:not([hidden]) .sn-s2-card { animation: sn-s2-up .45s .45s ease-out both; }
#sn-game-start.sn-start2:not([hidden]) .sn-s2-start { animation: sn-s2-pop .45s .6s cubic-bezier(.2,.9,.3,1.4) both, sn-s2-pulse 1.6s 1.2s ease-in-out infinite; }
#sn-game-start.sn-start2:not([hidden]) .sn-s2-drag { animation: sn-s2-up .4s .75s ease-out both; }
@keyframes sn-s2-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes sn-s2-left { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes sn-s2-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes sn-s2-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sn-s2-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.sn-start2 .sn-s2-start::after { content: ''; position: absolute; inset: -6px -14px; border-radius: 999px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 160% 0;
  animation: sn-s2-shine 3.4s 1.6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes sn-s2-shine { 0% { background-position: 160% 0; } 35%, 100% { background-position: -60% 0; } }

/* 5. landscape: equal columns, tight vertical rhythm */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  .sn-s2-mid { grid-template-columns: 1fr auto 1fr; max-width: 1040px; }
  .sn-s2-col { width: 100%; max-width: 330px; }
  .sn-s2-avoid { justify-self: end; } .sn-s2-grab { justify-self: start; }
  .sn-s2-avoid ul { align-content: space-around; justify-items: center; }
  .sn-s2-cap { font-size: 13px; max-width: none; }
  .sn-s2-avoid img { width: clamp(46px, 7vh, 62px); }
  .sn-s2-hero { padding-right: 70px; }
}
@media (orientation: portrait) {
  .sn-s2-aim { font-size: .75em; padding: 0 6px; }
  .sn-s2-hero { padding-right: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  #sn-game-start.sn-start2 *, .sn-start2 .sn-s2-start::after { animation: none !important; }
}
/* premium pass fixes */
#sn-game-start.sn-start2:not([hidden]) { justify-content: flex-start; }
.sn-start2 .sn-s2-title { margin-top: auto; }
.sn-start2 .sn-s2-drag { margin-bottom: auto; }
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  .sn-s2-avoid { max-width: 250px; }
  .sn-s2-avoid ul { gap: 14px 22px; }
  .sn-s2-hero { padding-right: 104px; }
}
@media (max-width: 699px) {
  .sn-s2-aim, .sn-s2-cap { display: none; }
  .sn-s2-hero { padding-right: 0; }
}
@media (orientation: portrait) and (min-width: 700px) { .sn-s2-hero { padding-right: 96px; } }
@media (max-height: 700px) and (orientation: portrait) { .sn-start2 .sn-s2-start { margin-bottom: auto; } }
@media (max-height: 600px) and (orientation: portrait) {
  #sn-game-start.sn-start2:not([hidden]) { gap: 4px; padding-top: 8px; padding-bottom: 58px; }
  .sn-s2-t1 { font-size: 22px; -webkit-text-stroke: 4px var(--ink); } .sn-s2-t2 { font-size: 32px; -webkit-text-stroke: 4px var(--ink); }
  .sn-s2-tag { font-size: 11.5px; padding: 2px 10px; margin-top: 4px; box-shadow: 2px 2px 0 var(--ink); }
  .sn-s2-col { padding: 5px 4px; } .sn-s2-col img { width: 23px; } .sn-s2-col b { font-size: 10px; }
  .sn-s2-pill { font-size: 11px; padding: 0 8px; }
  .sn-s2-jun { width: 74px; } .sn-s2-thermo span { font-size: 9px; padding: 3px 5px; }
  .sn-s2-card { padding: 3px 6px 5px; } .sn-s2-card-h { font-size: 11.5px; margin-bottom: 2px; }
  .sn-s2-ico { height: 20px; } .sn-s2-ico img { height: 18px; } .sn-s2-ico i { font-size: 16px; }
  .sn-s2-steps > div { font-size: 10px; }
  .sn-start2 .sn-s2-start { font-size: 18px; padding: 2px 18px; border-width: 16px 40px; border-image-width: 16px 40px; min-width: 180px; }
}
/* 2026-10-17: real iPhone fix. Size to the visible area (100dvh, never under Safari's bar),
   keep a clear strip at the bottom for the "All games" pill, and stop phone columns
   growing with screen height. */
#sn-game-start.sn-start2:not([hidden]) { inset: auto; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; }
@media (max-width: 699px) {
  #sn-game-start.sn-start2:not([hidden]) { padding-bottom: calc(env(safe-area-inset-bottom) + 76px); gap: clamp(6px, 1.2vh, 12px); }
  .sn-s2-col img { width: clamp(26px, 4.2vh, 38px); }
  .sn-s2-col ul { gap: 0; }
  .sn-s2-col b { font-size: 12px; }
  .sn-s2-jun { width: clamp(90px, 28vw, 150px); }
  .sn-s2-thermo span { font-size: 11px; padding: clamp(4px, 1vh, 8px) 7px; }
  .sn-s2-card { padding: 5px 8px 7px; }
  .sn-s2-steps > div { font-size: clamp(11px, 3vw, 13px); }
  .sn-start2 .sn-s2-start { font-size: 22px; padding: 4px 22px; border-width: 18px 46px; border-image-width: 18px 46px; }
  .sn-s2-drag { display: none; }
  .sn-start2 .sn-s2-start { margin-bottom: auto; }
}
#sn-game-start.sn-start2 { box-sizing: border-box; }
@media (max-height: 600px) and (orientation: portrait) {
  #sn-game-start.sn-start2:not([hidden]) { padding-bottom: calc(env(safe-area-inset-bottom) + 64px); gap: 4px; }
  .sn-s2-col img { width: 21px; }
  .sn-start2 .sn-s2-start { font-size: 17px; padding: 0 16px; border-width: 15px 38px; border-image-width: 15px 38px; min-width: 170px; }
}

/* ===== 2026-10-17: play screen matches the start screen, and always fits ===== */
/* blurred cool cafeteria behind the board instead of dark navy */
body::before { content: ''; position: fixed; inset: -20px; z-index: -1; pointer-events: none;
  background: #bfe3ee url(img/schnerds/schnerds-game-start-scene.webp) center 40% / cover no-repeat; filter: blur(6px) brightness(.93); }
@media (orientation: landscape) { body::before { background-image: url(img/schnerds/schnerds-game-start-scene-wide.webp); background-position: center 60%; } }

/* HUD = one cream card, same family as the start screen cards */
.sn-game-hud { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink);
  box-sizing: border-box; margin-left: auto; margin-right: auto; }
.sn-game-readout { min-width: 0; width: auto; aspect-ratio: auto; padding: 4px 14px; background: #fff; background-image: none;
  border: 2px solid var(--ink); border-radius: 999px; font-family: var(--font-display); font-weight: 700; }
.sn-game-sound-btn, .sn-game-pause-btn { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); padding: 0; }
.sn-game-pause-btn img { width: 20px; }

/* iPad held upright, iPad sideways, desktop: board sized to fit above a slim one-row HUD */
@media (min-width: 641px) {
  .sn-game-board, .sn-game-hud { width: min(100%, calc((100dvh - 190px) * 1.5)); margin-left: auto; margin-right: auto; }
  .sn-game-shell { gap: 10px; }
  .sn-game-hud { flex-wrap: nowrap; padding: 6px 14px; gap: 14px; }
  .sn-game-thermo-icon { height: 52px; }
  .sn-game-thermo-state { height: 50px; }
  .sn-game-stats { display: flex; align-items: center; gap: 12px; }
  .sn-game-readout span { font-size: 17px; }
  .sn-game-lives img { width: 30px; }
}
/* phones: board shrinks just enough that the two-row HUD always fits */
@media (max-width: 640px) {
  .sn-game-board { width: min(100%, calc((100dvh - 168px) * 0.754)); margin-left: auto; margin-right: auto; }
  .sn-game-shell { gap: 8px; }
  .sn-game-hud { width: calc(100% - 8px); padding: 6px 8px; gap: 4px; }
  .sn-game-thermo-icon { height: 50px; }
  .sn-game-thermo-state { height: 44px; }
  .sn-game-pause-btn, .sn-game-sound-btn { width: 40px; height: 40px; }
}
@media (min-width: 641px) {
  .sn-game-hud .sn-game-stats { flex-direction: row; flex-wrap: nowrap; }
  .sn-game-readout { white-space: nowrap; }
  .sn-game-powerups { flex: 1 1 auto; min-width: 0; }
}

/* ===== 2026-10-17: how-to clip ===== */
.sn-s2-howto { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; background: #F39B1F;
  border: 3px solid var(--ink); border-radius: 999px; padding: 4px 16px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.sn-s2-howto:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.sn-howto { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(10,30,60,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sn-howto-in .3s ease-out both; }
.sn-howto[hidden] { display: none; }
@keyframes sn-howto-in { from { opacity: 0; } to { opacity: 1; } }
.sn-howto-card { background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 6px 8px 0 var(--ink); padding: 12px 14px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; animation: sn-s2-pop .4s cubic-bezier(.2,.9,.3,1.3) both; }
.sn-howto-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--ink); }
.sn-howto-vid { position: relative; height: min(64dvh, 620px); aspect-ratio: 9 / 16; max-width: calc(100vw - 60px); border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #cfe9c9; }
.sn-howto-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-howto-cap { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; width: max-content; max-width: 92%; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.6dvh, 22px); color: var(--ink); background: #FFD21E;
  border: 3px solid var(--ink); border-radius: 999px; padding: 5px 14px; box-shadow: 3px 3px 0 var(--ink); }
.sn-howto-cap:empty { display: none; }
.sn-howto-cap.pop { animation: sn-howto-cap .35s cubic-bezier(.2,.9,.3,1.4); }
@keyframes sn-howto-cap { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.sn-howto-dots { display: flex; gap: 6px; }
.sn-howto-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.sn-howto-dots i.on { background: #F39B1F; }
.sn-howto-btns { display: flex; align-items: center; gap: 12px; }
.sn-howto-skip { font-family: var(--font-display); font-weight: 700; font-size: 16px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.sn-howto .sn-howto-play { font-size: 20px; padding: 2px 20px; border-width: 18px 44px; border-image-width: 18px 44px; min-width: 0; }
.sn-howto.done .sn-howto-play { animation: sn-s2-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sn-howto, .sn-howto-card, .sn-howto-cap.pop, .sn-howto.done .sn-howto-play { animation: none; } }
@media (max-height: 600px) { .sn-howto-vid { height: 58dvh; } .sn-howto-h { font-size: 18px; } .sn-s2-howto { font-size: 12px; padding: 2px 12px; margin-top: 4px; } }

/* 2026-10-17: speech bubble points at Juniper (tail tip over the snorkel), flips near the right edge */
.sn-game-bubble { background-image: none; isolation: isolate; transform: translate(-13%, -100%); }
.sn-game-bubble::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('img/schnerds/schnerds-game-ui-bubble.webp') center / 100% 100% no-repeat; }
.sn-game-bubble.is-right { transform: translate(-87%, -100%); }
.sn-game-bubble.is-right::before { transform: scaleX(-1); }

/* 2026-10-17: "All games" button removed from the game pages, so no bottom strip needed */
@media (max-width: 699px) { #sn-game-start.sn-start2:not([hidden]) { padding-bottom: calc(env(safe-area-inset-bottom) + 22px); } }
@media (max-height: 600px) and (orientation: portrait) { #sn-game-start.sn-start2:not([hidden]) { padding-bottom: calc(env(safe-area-inset-bottom) + 14px); } }
.sn-howto-sound { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: #fff; background: #2F7CF6; border: 3px solid var(--ink); border-radius: 999px; padding: 6px 16px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
  animation: sn-s2-pulse 1.4s ease-in-out infinite; }
.sn-howto-sound[hidden] { display: none; }
.sn-howto-vid video { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sn-howto-sound { animation: none; } }
.sn-howto-sound { white-space: nowrap; animation-name: sn-howto-snd; }
@keyframes sn-howto-snd { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
.sn-howto button:focus:not(:focus-visible) { outline: none; }
.sn-howto .sn-howto-play:focus { outline: none; }

/* 2026-10-17: the page never scrolls or bounces on phones (Mac: "make it stuck").
   Everything is sized to fit the screen, so there is nothing to scroll to. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; touch-action: none; -webkit-overflow-scrolling: auto; }
.sn-game-wrap { height: 100%; box-sizing: border-box; overflow: hidden; }
@media (max-width: 640px) { .sn-game-board { width: min(100%, calc((100dvh - 176px) * 0.754)); } }

/* 2026-10-17: end screen "Bring Juniper home" card */
.sn-shop-chip { display:flex; align-items:center; gap:12px; margin:16px auto 0; padding:6px 10px 6px 6px; width:min(340px,100%); box-sizing:border-box;
  background:linear-gradient(#fff 40%, #fff3b0); color:var(--ink); border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--ink); text-decoration:none;
  font-family:var(--font-display); line-height:1.05; text-align:left; -webkit-tap-highlight-color:transparent; }
.sn-shop-chip img { width:58px; height:58px; border-radius:16px; background:#ffe866; object-fit:contain; flex:none; }
.sn-shop-chip span { flex:1; min-width:0; }
.sn-shop-chip b { display:block; font-size:19px; font-weight:700; white-space:nowrap; }
.sn-shop-chip small { display:block; font-size:14px; font-weight:700; color:#1d7fc4; margin-top:3px; }
.sn-shop-chip i { flex:none; width:38px; height:38px; border-radius:50%; background:#F5D90A; color:var(--ink); border:3px solid var(--ink); display:grid; place-items:center; font:700 24px/1 var(--font-display); font-style:normal; padding-bottom:3px; box-sizing:border-box; }
.sn-shop-chip:active { transform:translateY(3px); box-shadow:0 2px 0 var(--ink); }
.sn-game-over:not([hidden]) .sn-shop-chip { animation:snGoRise .5s 1.1s cubic-bezier(.2,.9,.3,1.2) both, snShopNudge 3.2s 3s ease-in-out infinite; }
.sn-game-over:not([hidden]) .sn-shop-chip:active { animation:none; }
@keyframes snShopNudge { 0%,84%,100% { transform:none; } 88% { transform:rotate(-2deg) scale(1.03); } 92% { transform:rotate(2deg) scale(1.03); } 96% { transform:rotate(-1deg); } }
@media (max-width:360px) { .sn-shop-chip b { font-size:16px; } .sn-shop-chip i { display:none; } }
@media (prefers-reduced-motion: reduce) { .sn-game-over:not([hidden]) .sn-shop-chip { animation:none; } }
@media (max-height: 620px) {
  .sn-game-over .sn-game-screen-juniper { max-height: 50px; width: auto; }
  .sn-game-over .sn-go-tiles { margin-top: 6px; margin-bottom: 6px; }
  .sn-game-over .sn-shop-chip { margin-top: 8px; padding: 4px 8px 4px 4px; gap: 10px; }
  .sn-game-over .sn-shop-chip img { width: 46px; height: 46px; border-radius: 13px; }
  .sn-game-over .sn-shop-chip b { font-size: 17px; }
  .sn-game-over .sn-shop-chip small { font-size: 13px; margin-top: 2px; }
  .sn-game-over .sn-shop-chip i { width: 34px; height: 34px; font-size: 21px; }
  .sn-game-over .sn-game-screen-juniper { max-height: 44px; }
}