/* Landing page for Buddy: Puzzle Adventure.
   Colors, fonts and clay pieces follow docs/styleguide.md (v1.8) and the UI kit
   reference (design/reference/ui/ui_kit_reference.webp). Clay buttons and cards
   are the game's own 3x art, stretched as CSS 9-slices (border-image), exactly
   like the app stretches them with centerSlice. */

/* Baloo 2 (SIL OFL 1.1, fonts/OFL-Baloo2.txt): Ueberschriften und Knoepfe (Sina 2026-10-23), variabel 400-800, latin */
@font-face { font-family: "Baloo 2"; font-weight: 400 800; font-display: swap; src: url("../fonts/Baloo2-latin.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../fonts/Fredoka-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("../fonts/Fredoka-Bold.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("../fonts/Outfit-Regular.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("../fonts/Outfit-Medium.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../fonts/Outfit-SemiBold.woff2") format("woff2"); }

:root {
  --cream: #FBF2E9;
  --cream-2: #FFF8F1;
  --sand: #F3DDBF;
  --sand-deep: #E6C69B;
  --terracotta: #E08A62;
  --terra-ink: #9C4A2A;      /* terracotta dark enough for text on cream */
  --coral: #E8673A;
  --turquoise: #1FB5C4;
  --teal: #2F5D62;           /* text, Buddy's eyes */
  --teal-deep: #234A4E;
  --leaf: #3F9A82;
  --gold: #F5B21E;
  --ink-soft: #4B5F61;
  --shadow-warm: rgba(120, 72, 36, 0.18);
  /* 3D letters on clay buttons (clayLetterStyle in the app): dark lip 1-3 px below plus a soft drop */
  /* The thin dark halo around the letters (first four shadows) keeps white text readable on the light terracotta
     clay (WCAG 1.4.3 via halo: white on #8E4529 is 6.6:1); the lip below is the game's clay look. */
  --lip-terra: 1px 0 0 #8E4529, -1px 0 0 #8E4529, 0 -1px 0 #8E4529, 0 1px 0 #8E4529, 0 2px 0 #8E4529, 0 3px 0 #8E4529, 0 4px 4px rgba(89, 42, 18, 0.4);
  --lip-teal: 0 1px 0 #0E6570, 0 2px 0 #0E6570, 0 3px 0 #0E6570, 0 4px 4px rgba(10, 40, 44, 0.4);
  /* Thin clay ring around a flat cream face (ClayRingFrame in the app, hud_nav_ring 338x323, centerSlice 168,161-170,163 = insets 161 168 160 168).
     --k: image pixels per CSS pixel, like artScale; bigger = thinner ring and smaller corners. */
  --ring: url("../img/ui/ring.webp") 161 168 160 168 fill;

  --display: "Baloo 2", "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --radius: 22px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--teal);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--terra-ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--coral); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: 0; }
h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); color: var(--teal); }
h3 { font-size: 1.4rem; font-weight: 700; color: var(--teal); }
p { margin: 0; }
[hidden] { display: none !important; }
.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; }

/* Focus: dark terracotta ring with a cream gap, at least 3:1 against every section colour (WCAG 1.4.11, 2.4.7) */
:focus-visible { outline: 3px solid #A63F1C; outline-offset: 3px; border-radius: 12px; box-shadow: 0 0 0 3px #FFF8F1; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--teal); color: var(--cream); padding: 10px 16px; border-radius: 12px; font-weight: 600; }
.skip:focus { top: 12px; color: var(--cream); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 820px; }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra-ink); margin-bottom: 0.5rem; }
.lead { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.22rem); color: var(--ink-soft); max-width: 40rem; margin-top: 0.9rem; }
.small { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Clay buttons (9-slice of the game's UI kit, 3x art -> /3) ---------- */
.clay {
  --bi: url("../img/ui/btn_primary.webp");
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 58px; padding: 10px 30px 15px;
  border: 0; background: none; cursor: pointer;
  border-image: var(--bi) 87 89 86 89 fill / 29px 30px 29px 30px;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.1;
  color: #FFF8F1; text-decoration: none; text-shadow: var(--lip-terra);
  transition: transform .28s var(--ease-pop), filter .12s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
/* Clay squish (Sina 2026-10-25, more playful): a little lift on hover, squashed flat while pressed */
.clay:hover { color: #FFF8F1; filter: brightness(1.04); transform: translateY(-2px) scale(1.03); }
.clay:active { transform: translateY(2px) scale(1.05, .9); transition-duration: .08s; }
.clay-primary:active { --bi: url("../img/ui/btn_primary_pressed.webp"); }
.clay-teal { --bi: url("../img/ui/tab_active.webp"); border-image: var(--bi) 77 79 76 79 fill / 26px 27px 26px 27px; padding: 9px 26px 13px; text-shadow: var(--lip-teal); }
.clay-cream { --bi: url("../img/ui/btn_secondary.webp"); border-image: var(--bi) 86 88 86 88 fill / 29px 29px 29px 29px; color: var(--teal); text-shadow: none; }
.clay-cream:hover { color: var(--teal); }
.clay-sm { min-height: 46px; font-size: 1rem; padding: 7px 18px 11px; border-image-width: 22px 22px 22px 22px; }

/* Cards: the game's thin clay ring with a flat cream face (ClayRingFrame), like the hero card. The cream background
   under the ring covers the hairline seams between the 9-slice pieces on coloured bands. */
.card {
  position: relative;
  --k: 4.6;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k)); background: #F5E5D6;
  padding: 22px 22px 26px;
  box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15), 0 18px 34px -24px rgba(110, 60, 20, 0.45);
  transition: translate .4s var(--ease-pop), scale .3s var(--ease-pop);
}
@media (hover: hover) { .card:hover { translate: 0 -5px; } }
.card:active { scale: 1.01 .98; transition-duration: .1s; }

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--gutter);
  padding-top: max(14px, env(safe-area-inset-top));
}
.ring, .pill, .tile-ring, .tier b {
  --k: 5;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k)); box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15);
}
.brand { display: inline-flex; flex: none; align-items: center; text-decoration: none; color: var(--teal); margin-right: auto; padding: 2px; }
/* Phones: tighter top bar. When the bar does not fit in one row (main.js topbarFit), the section links give way first
   (.no-nav, all sections are a scroll away), then the badge pair moves to a second row on the right (.wrap). */
@media (max-width: 440px) { .topbar { gap: 8px; } .topbar .lang-caret { display: none; } .topbar .lang-btn { padding: 0 11px; } }
.topbar.no-nav .topnav { display: none; }
.topbar.wrap { flex-wrap: wrap; row-gap: 8px; }
.topbar.wrap .stores-top { order: 10; margin-left: auto; }
/* Logo frei, ohne Ring-Pille (Sina 2026-10-25: "too cramped"); weicher Schatten fuer Lesbarkeit auf dem Meer */
.brand img { height: clamp(56px, 3vw + 30px, 78px); width: auto; filter: drop-shadow(0 4px 6px rgba(16, 70, 80, 0.35)); }
.brand:hover { color: var(--teal); }
.topnav { display: none; flex: none; white-space: nowrap; gap: 2px; --k: 6.2; padding: 6px 12px; }
.topnav a { font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--teal); text-decoration: none; padding: 7px 14px 6px; border-radius: 999px; transition: transform .25s var(--ease-pop); }
.topnav a:hover { transform: translateY(-1px) scale(1.05); }
.topnav a:active { transform: scale(1.08, .88); }
.topnav a:hover { background: #EBD9C2; }
@media (min-width: 760px) { .topnav { display: flex; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--cream); }
.hero-stage { position: relative; height: clamp(400px, 40vw + 260px, 600px); overflow: hidden; background: #2EC3D3; }
/* The painting (2944x1248, phones: its right-hand crop 1560x1248) covers the stage. --ar is its aspect ratio,
   --z zooms in, --fx/--fy is the point of the painting that should sit in the middle (clamped so the painting
   always covers the stage). Buddy and his bubble are placed in painting coordinates (--bx/--by: his feet on the
   free tile next to the crate), so he always stands there. Wide screens show the painting at most at its own
   size up to 2944 px; beyond that it grows a little (1.25x at 3680 px). */
.scene {
  position: absolute; inset: 0; container-type: size;
  --ar: 2.359; --bx: .768; --by: .515; --bwf: .088;
  --z: 1; --fx: 1; --fy: .5;
  --sw: calc(max(100cqw, var(--ar) * 100cqh) * var(--z));
  --sh: calc(var(--sw) / var(--ar));
  --sl: clamp(100cqw - var(--sw), 50cqw - var(--fx) * var(--sw), 0px);
  --st: clamp(100cqh - var(--sh), 50cqh - var(--fy) * var(--sh), 0px);
  --bw: calc(var(--sw) * var(--bwf));
}
@media (max-width: 899px) { .scene { --ar: 1.25; --bx: .5615; --by: .515; --bwf: .17; --z: 1; --fx: .5; --fy: .52; } }
.scene-img { position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); max-width: none; }
.hero-buddy, .hero-bubble, .gull { position: absolute; }
/* Buddy (--bw, --bwf) about as wide as the free tile: 8.8 % of the full painting, 17 % of the phone crop */
.hero-buddy {
  left: calc(var(--sl) + var(--sw) * var(--bx)); top: calc(var(--st) + var(--sh) * var(--by));
  width: var(--bw); aspect-ratio: 262 / 300;
  transform: translate(-50%, -100%);
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: 40%;
  -webkit-tap-highlight-color: transparent;
}
.hero-body { display: block; position: relative; transform-origin: 50% 100%; animation: bob 2.6s ease-in-out infinite; }
.hero-buddy img { width: 100%; height: auto; }
.hero-buddy.hop .hero-body { animation: hop .6s var(--ease-pop); }
/* Easter egg: five taps and Buddy wears the straw sun hat (wardrobe layer, trimmed) */
.hero-buddy .hero-hat { position: absolute; left: 2.8%; top: -15.7%; width: 90%; animation: hat-drop .6s var(--ease-pop); }
.hero-buddy-shadow { position: absolute; left: 14%; right: 14%; bottom: -4%; height: 14%; background: radial-gradient(closest-side, rgba(110, 70, 30, 0.38), rgba(110, 70, 30, 0)); animation: shadow 2.6s ease-in-out infinite; }
/* Speech bubble: a small ring pill (RingPill in the app) with a cream tail */
.hero-bubble {
  --k: 7; z-index: 4;
  left: calc(var(--sl) + var(--sw) * var(--bx)); top: calc(var(--st) + var(--sh) * var(--by) - var(--bw) * 1.2);
  transform: translate(-50%, -100%) scale(.6); opacity: 0;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: 23px; box-shadow: 0 6px 14px -6px rgba(33, 58, 61, 0.4);
  color: var(--teal); font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  padding: 9px 18px 7px; white-space: nowrap;
  transition: transform .25s var(--ease-pop), opacity .2s ease; pointer-events: none;
}
/* Tail: a ring-coloured triangle with a cream one on top that covers the ring where they meet */
.hero-bubble::before, .hero-bubble::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hero-bubble::before { bottom: -13px; width: 24px; height: 14px; background: #E2C29C; }
.hero-bubble::after { bottom: -7px; width: 16px; height: 10px; background: #F4E5D6; }
.hero-bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }

.gull { top: 16%; left: 0; width: 64px; will-change: translate; animation: fly 26s linear infinite; }
.gull img { position: absolute; inset: 0; width: 100%; height: auto; }
.gull img:last-child { animation: flap .5s steps(1) infinite; }
.gull img:first-child { animation: flap .5s steps(1) infinite reverse; }
.gull-2 { top: 30%; width: 48px; animation-duration: 34s; animation-delay: -15s; }

.hero-card {
  position: relative; z-index: 3;
  margin: -44px var(--gutter) 0;
  --k: 4.6;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k));
  /* Creme unter dem Ring: zwischen den 9-Slice-Stuecken schien sonst eine Haarlinie Meer durch (Sina 2026-10-25) */
  background: #F5E5D6;
  padding: 22px 22px 24px;
  box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15), 0 24px 44px -24px rgba(16, 70, 80, 0.55);
}
.hero-title { margin: -4px 0 4px; }
/* Logo statt Schrift (Sina 2026-10-23); der Titel bleibt als Text fuer Screenreader und Suche */
.hero-logo { display: block; width: min(100%, 380px); height: auto; filter: drop-shadow(0 8px 10px rgba(140, 60, 30, 0.18)); }
/* Sticker letters (StickerText on the share cards): cream fill, terracotta rim, darker edge below.
   The rim is a stroke painted behind the fill; the edge is the same text again in ::before, moved down. */
.sticker {
  position: relative; z-index: 0; display: inline-block;
  font: 800 var(--fs, 1.6rem)/1.1 "Baloo 2", var(--display); letter-spacing: 0.03em; word-spacing: 0.12em;
  color: #FFF8EE; -webkit-text-stroke: 0.2em #C95E38; paint-order: stroke fill;
}
.sticker::before {
  content: attr(data-text); position: absolute; left: 0; top: 0.11em; z-index: -1; width: 100%;
  color: #9E4527; -webkit-text-stroke: 0.2em #9E4527; paint-order: stroke fill;
  filter: drop-shadow(0 0.07em 0.1em rgba(80, 30, 10, 0.35));
}
.hero-tag { --fs: clamp(1.32rem, 1.05rem + 1vw, 1.72rem); margin: 0 0 12px 0.12em; }
/* Ruhiger (Sina 2026-10-25: "too busy"): alles mittig unter dem Logo, kurze Zeile, ein leiser Hinweis */
.hero-card { text-align: center; }
.hero-card .hero-logo { margin: 0 auto; }
.hero-card .stores { justify-content: center; }
.hero-pitch { margin: 6px auto 0; font: 600 clamp(1.1rem, 1rem + 0.4vw, 1.28rem)/1.4 var(--display); color: var(--teal); max-width: 27rem; text-wrap: balance; }
.hero-note { margin-top: 16px; font-size: 0.98rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.inline-link { display: inline-block; padding: 3px 0; font: 700 1.04rem/1.2 var(--display); white-space: nowrap; color: #0E6570; }
.inline-link:hover { color: var(--teal-deep); }
.shore { display: none; }

@media (min-width: 900px) {
  .hero-stage { height: clamp(620px, 88vh, 860px); }
  .hero-card {
    position: absolute; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top: 50%;
    transform: translateY(-46%);
    margin: 0; width: min(500px, 43vw); padding: 26px 34px 30px; --k: 4;
  }
  .shore { display: block; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 46px; fill: var(--cream); z-index: 2; }
}

/* ---------- Store badges (official Apple and Google art, site/img/badges/README.md; Sina 2026-10-25) ----------
   Brand rules: the art stays as it is (no shadow, filter, hover motion or text on it), App Store first, both the same
   height (Google's never smaller), at least 40 px high, clear space of a quarter of the height around each badge.
   "Coming soon" is a separate label (.hero-note, .stores-soon), never on the badge. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 22px; }
.store { position: relative; display: block; flex: none; line-height: 0; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.store img { height: 48px; width: auto; }
.store:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
/* Top bar (Sina 2026-10-25: badges instead of the "Get the game" pill): 40 px (Apple's minimum) on a flat cream face in
   the thin clay ring, padding and gap = a quarter of the height as clear space, so no painting shows inside it. */
.stores-top { --k: 7.4; flex: none; flex-wrap: nowrap; gap: 10px; margin: 0; padding: 11px 13px; border-radius: 999px; }
.stores-top .store img { height: 40px; }
.stores-top .store-toast { bottom: auto; top: calc(100% + 18px); left: auto; right: 0; transform: none; animation-name: toast-down; }
.stores-top .store-toast::after { bottom: auto; top: -6px; left: auto; right: 40px; transform: rotate(45deg); }
/* Phones: a little smaller so both fit side by side (still above Apple's 40 px, gap = a quarter of the height) */
@media (max-width: 440px) { .stores { gap: 12px; } .store img { height: 44px; } }
.stores-soon {
  display: inline-block; margin: 16px 0 0;
  font: 600 0.9rem/1 var(--display); color: #5A3A06; white-space: nowrap;
  padding: 7px 14px 9px;
  border-image: url("../img/ui/ribbon_offer.webp") 62 64 61 64 fill / 15px 16px 15px 16px;
}
.store-toast { position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%); width: max-content; max-width: 240px; white-space: normal; text-align: center;
  background: var(--teal); color: var(--cream); font: 500 0.92rem/1.35 var(--body); padding: 9px 14px; border-radius: 14px; text-shadow: none;
  box-shadow: 0 8px 20px -8px rgba(20, 40, 44, 0.55); animation: toast 2.6s ease forwards; pointer-events: none; z-index: 5; }
.store-toast::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--teal); transform: translateX(-50%) rotate(45deg); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; overflow-x: clip; }
.section-head { margin-bottom: clamp(30px, 4vw, 52px); }

/* Core loop */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px 26px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-top: 34px; }
.step-num { --k: 7; position: absolute; left: 22px; top: -22px; width: 46px; height: 46px; display: grid; place-items: center; padding-bottom: 2px;
  border-radius: 50%; background: #F5E5D6; font: 700 1.4rem/1 var(--display); color: var(--terra-ink); }
.step h3 { margin-top: 18px; }
.step p { margin-top: 8px; color: var(--ink-soft); }
.step-art { position: relative; height: 150px; border-radius: 18px; background: #EEDBC3; overflow: hidden; }
.step-art.loop-on { height: 196px; display: grid; place-items: center; container-type: size; padding: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 55%, #F6E7D2, #EEDBC3 70%); }
.step-art .lb { width: min(100cqw - 28px, (100cqh - 28px) * var(--ar)); }
.art-push { display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.art-push .t { width: 30%; max-width: 92px; }
.push-crate, .push-buddy { position: absolute; width: min(30%, 92px); top: 50%; }
.push-crate { left: 50%; transform: translate(-50%, -50%); animation: crate-slide 3.2s ease-in-out infinite; }
.push-buddy { height: auto; width: min(22%, 66px); left: 50%; transform: translate(-150%, -72%); animation: buddy-push 3.2s ease-in-out infinite; }
.art-rescue { display: flex; align-items: center; justify-content: center; gap: 18px; }
.art-rescue .net { width: 96px; }
.art-rescue .freed { width: 92px; animation: cheer 3.2s ease-in-out infinite; }
.arrow-dot { width: 34px; height: 12px; background: radial-gradient(circle, var(--terracotta) 4px, transparent 5px) 0 50% / 12px 12px repeat-x; }
.art-restore .map { width: 100%; height: 100%; object-fit: cover; }
.art-restore .hammer { position: absolute; width: 58px; right: 40%; top: 18px; animation: bounce 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(60, 40, 20, 0.3)); }

/* ---------- Mini puzzle ----------
   The phone shows the game's own play screen (app/lib/src/ui/hud.dart, clay.dart, dpad.dart, medal_sheet.dart,
   result_panel.dart, state 2026-10-25): level ribbon with medallion, goal tray in the thin clay ring with the move
   counter and the medal you are on track for, ring buttons with cut-out glyphs, Buddy's bubble from card_reward.
   Sizes are the app's logical pixels; the 9-slices are the app's 3x art divided by the app's scale. */
.try { background:
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.35) 0 2px, transparent 3px) 0 0 / 46px 46px,
  radial-gradient(circle at 70% 80%, rgba(176, 122, 78, 0.12) 0 2px, transparent 3px) 0 0 / 38px 38px,
  var(--sand); }
.try-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) { .try-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; } }
.try .lead { max-width: 30rem; }

/* Controls as small clay keycaps in the thin ring (like the game's round buttons) */
.howto { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; color: var(--ink-soft); font-size: 1rem; }
.howto li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.keys { display: inline-flex; gap: 5px; }
kbd { --k: 9.5; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px 1px;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: 12px; box-shadow: 0 2px 5px rgba(33, 58, 61, 0.14);
  font: 600 0.95rem/1 "Fredoka", var(--display); color: var(--teal); }
.kbd-word { padding: 0 12px 1px; }
.howto-or { font-size: 0.92rem; }
.howto-what { color: var(--teal); font-weight: 500; margin-right: 6px; }
.howto-touch { display: none !important; }
.focus-hint .howto-touch { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .howto-keys { display: none !important; }
  .howto-touch { display: flex !important; }
  .focus-hint .howto-touch { display: inline !important; }
}
.howto-medals { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--teal); font-weight: 500; }
.medal-trio { display: inline-flex; }
.medal-trio img { width: auto; height: 30px; margin-right: 1px; filter: drop-shadow(0 2px 2px rgba(90, 55, 20, 0.25)); }
.medal-trio img:last-child { margin-right: 0; }

.game { width: 100%; max-width: 460px; margin: 0 auto; }
.game-frame {
  position: relative; border-radius: 34px; padding: 14px 14px 16px; overflow: hidden; container-type: inline-size;
  /* calm play background with a cream glow behind the board (_CalmBackground) */
  background:
    radial-gradient(ellipse 85% 60% at 50% 46%, rgba(251, 242, 233, 0.4), rgba(251, 242, 233, 0)),
    url("../img/worlds/play-bg-coast-calm.webp") center bottom / cover no-repeat, #F6E3C6;
  box-shadow: 0 0 0 6px var(--cream-2), 0 0 0 8.5px #E2C7A4, 0 26px 50px -22px rgba(110, 60, 20, 0.55);
  font-family: "Outfit", var(--body);
}

/* Level ribbon (LevelHeader: ui_ribbon 605x168, centerSlice 110,50-495,118 at 3x) with the medallion as a seal */
.ribbon { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px;
  padding: 5px 68px 21px; border: 0;
  border-image: url("../img/ui/ribbon.webp") 50 110 50 110 fill / 16.667px 36.667px 16.667px 36.667px; }
.ribbon-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 19px/1.1 "Outfit", var(--body); color: var(--terra-ink); }
.medallion { position: absolute; left: 10px; top: -2px; width: 50px; height: 50px; display: grid; place-items: center; padding-bottom: 3px;
  background: url("../img/ui/medallion.webp") center / contain no-repeat; font: 600 19px/1 "Outfit", var(--body); color: var(--terra-ink); }

/* Goal tray (GoalTray: ClayRingFrame artScale 6), goal pieces 46 px with a soft double shadow */
.tray { --k: 6; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 10px 9px 14px; }
.goals { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.goal { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
.goal > img:first-child { width: 46px; height: 46px; border-radius: 12px;
  box-shadow: 0 1.5px 2px rgba(112, 68, 24, 0.25), 0 4px 10px rgba(112, 68, 24, 0.35); }
.goal .goal-badge { position: absolute; left: -5px; top: -6px; width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 2px 4px rgba(112, 68, 24, 0.33); }
.goal .goal-check { position: absolute; right: -4px; bottom: -4px; width: 21px; height: 21px; }
.goal .goal-count { position: absolute; right: -6px; top: -6px; padding: 1px 5px; border-radius: 9px; background: var(--teal); color: #fff; font: 600 11px/1.3 "Outfit", var(--body); }
.goal.spring { animation: pop .45s var(--ease-pop); }

/* Move counter (MovesCounter): ring 50 px with only the number, the medal you are on track for hangs at the top right */
.moves { position: relative; flex: none; width: 66px; height: 58px; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.moves-ring { --k: 6.8; position: absolute; left: 0; top: 4px; width: 50px; height: 50px; display: grid; place-items: center; padding-bottom: 1px;
  border-radius: 50%; font: 600 22px/1 "Outfit", var(--body); color: var(--teal); }
.moves-medal { position: absolute; right: 0; top: -6px; width: auto; height: 32px; transform-origin: 50% 0; }
.moves-medal.drop { animation: medal-wobble .6s ease-out; }
.moves.tick .moves-ring { animation: pop .25s var(--ease-pop); }
.moves:focus-visible { outline-offset: 2px; border-radius: 50%; }

.board-wrap { position: relative; margin-top: 12px; }
.board {
  position: relative; margin: 0 auto; width: 100%; aspect-ratio: 1; padding: 3%;
  border-radius: 20px; background: #EBCB98;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 0 rgba(170, 115, 55, 0.32), 0 8px 18px -8px rgba(90, 55, 20, 0.5);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; outline: none;
}
.board:focus-visible { outline: 0; box-shadow: 0 0 0 3px #FFF8F1, 0 0 0 6px #A63F1C, inset 0 4px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 0 rgba(170, 115, 55, 0.32); }
.tiles, .pieces { position: absolute; inset: 3%; z-index: 1; }
/* Tiles are placed one by one from --c/--r (set by the scripts), like the pieces. A CSS grid with percentage heights
   rendered tall, overlapping tiles in iPhone Safari (Sina 2026-10-27). 4 % overlap hides the seams between tiles. */
.tiles img { position: absolute; display: block; max-width: none; pointer-events: none;
  left: calc((var(--c, 0) - .02) * 100% / var(--cols, 5)); top: calc((var(--r, 0) - .02) * 100% / var(--rows, 5));
  width: calc(104% / var(--cols, 5)); height: calc(104% / var(--rows, 5)); }
.tiles img.swap { animation: pop .3s var(--ease-pop); }
.pieces { pointer-events: none; }
.piece { position: absolute; left: 0; top: 0; width: calc(100% / var(--cols, 5)); height: calc(100% / var(--rows, 5));
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); transition: transform .17s ease-out; }
.no-anim .piece, .no-anim .piece * { transition: none !important; animation: none !important; }
.piece.crate img { width: 104%; height: 104%; margin: -2%; max-width: none; filter: drop-shadow(0 4px 3px rgba(90, 55, 20, 0.35)); }
.piece.crate.sink img { transition: transform .25s ease .1s, opacity .25s ease .1s; transform: scale(.82) translateY(6%); opacity: 0; }
.piece.buddy .sprite { position: absolute; left: 50%; bottom: 16%; height: 108%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; }
.piece.buddy .sprite.flip { transform: translateX(-50%) scaleX(-1); }
.piece.buddy .shadow { position: absolute; left: 22%; right: 22%; bottom: 10%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(80, 50, 20, 0.4), rgba(80, 50, 20, 0)); }
.piece.buddy.hop .sprite { animation: board-hop .2s ease-out; }
.piece.buddy.hop .sprite.flip { animation: board-hop-flip .2s ease-out; }
.piece.buddy.bump .sprite { animation: wobble .32s ease; }
.piece.buddy.bump .sprite.flip { animation: wobble-flip .32s ease; }
.piece.buddy.won .sprite { animation: dance .55s ease-in-out infinite alternate; }
.focus-hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(47, 93, 98, 0.92); color: var(--cream); font: 600 0.85rem/1 "Fredoka", var(--display); padding: 8px 13px; border-radius: 999px; white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.game.started .focus-hint { opacity: 0; }

/* Under the board: Buddy with his bubble over undo/restart on the left, the D-pad diamond on the right */
.controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.controls-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.controls-row { display: flex; gap: 10px; }
.speech { display: flex; align-items: flex-end; min-height: 66px; }
.speech-buddy { flex: none; width: auto; height: 50px; margin: 0 -2px 2px 0; }
/* ClayBubble: card_reward 433x223 (insets 58 63 62 65) at 1.6 x 3, tail from the left edge to Buddy's head */
.speech-bubble { position: relative; flex: 1; min-width: 0; margin-left: 14px; padding: 8px 14px 11px 13px;
  border: 0; border-image: url("../img/ui/card_reward.webp") 58 63 62 65 fill / 12.08px 13.13px 12.92px 13.54px;
  transition: opacity .26s ease; }
.speech-bubble::before { content: ""; position: absolute; left: -14px; bottom: 5px; width: 20px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M20 3Q12 11 1.5 17.5Q0 19.5 3.5 19Q12 17 20 14Z' fill='%23CAA17A' transform='translate(0 2.5)'/%3E%3Cpath d='M20 3Q12 11 1.5 17.5Q0 19.5 3.5 19Q12 17 20 14Z' fill='%23F5E7D5'/%3E%3C/svg%3E") center / contain no-repeat; }
.speech-bubble strong { display: block; font: 600 16px/1.15 "Fredoka", var(--display); color: var(--terra-ink); }
.speech-bubble span { display: block; font: 500 13px/1.25 "Outfit", var(--body); color: var(--teal); }
.speech-bubble.say { animation: bubble-pop .46s var(--ease-pop); transform-origin: 0 80%; }
.speech-bubble.quiet { opacity: 0; }

/* Round buttons (ArtButton.ring): flat cream disc in the thin clay ring, cut-out glyph on top */
.round { --s: 52px; --k: 6.538; --icon: none; --i: .56; --turn: 0deg;
  position: relative; flex: none; width: var(--s); height: var(--s); border: 0; padding: 0; cursor: pointer; background: none;
  border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: 50%; box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15);
  transition: transform .25s var(--ease-pop), opacity .15s ease; -webkit-tap-highlight-color: transparent; }
.round::after { content: ""; position: absolute; inset: 0; background: var(--icon) center / calc(var(--s) * var(--i)) auto no-repeat; transform: rotate(var(--turn)); }
.round:hover { transform: scale(1.07); }
.round:active { transform: scale(1.08, .86) translateY(1px); transition-duration: .07s; }
.round:disabled { opacity: .45; cursor: default; transform: none; }
.round-undo { --icon: url("../img/ui/ui_icon_undo.webp"); --i: .56; }
.round-restart { --icon: url("../img/ui/ui_icon_restart.webp"); --i: .54; }
.dpad { flex: none; display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); }
.dpad .round { --s: 48px; --k: 7.083; --icon: url("../img/ui/ui_icon_chevron.webp"); --i: .42; }
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; --turn: -90deg; }
.dpad .right { grid-column: 3; grid-row: 2; --turn: 90deg; }
.dpad .down { grid-column: 2; grid-row: 3; --turn: 180deg; }
/* Narrow phones: smaller arrows (DPad size 44) and Buddy's bubble over the whole width */
@container (max-width: 400px) {
  .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .dpad .round { --s: 44px; --k: 7.727; }
  .controls { flex-wrap: wrap; }
  .controls-left { display: contents; }
  .speech { flex: 1 0 100%; order: -1; }
  .controls-row { align-self: flex-end; }
}

.text-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 120px; padding: 0 14px;
  border: 0; background: none; cursor: pointer; font: 600 17px/1 "Fredoka", var(--display); color: var(--teal); text-decoration: none; }
.text-action:hover { color: var(--teal-deep); text-decoration: underline; }

/* Medals sheet (medal_sheet.dart): card_content tray, one row per medal, the one you are on track for in the ring */
.sheet { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 22px;
  background: rgba(47, 93, 98, 0.28); animation: fade .2s ease; }
.sheet-card { width: 100%; max-width: 360px; padding: 20px 18px 10px; text-align: center;
  border: 0; border-image: url("../img/ui/card_content.webp") 75 84 79 82 fill / 17.86px 20px 18.81px 19.52px; animation: rise .35s var(--ease-pop); }
.sheet-title { font: 600 21px/1.15 "Outfit", var(--body); color: var(--terra-ink); }
.medal-rows { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 8px; }
.medal-row { --k: 6.27; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 16px; background: #F4E6D2; }
.medal-row.current { border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k)); background: none; border-radius: 26px; box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15); }
.medal-row img { width: auto; height: 34px; margin: 0 1px; }
.medal-row .limit { display: inline-flex; align-items: center; gap: 4px; font: 600 18px/1.1 "Outfit", var(--body); color: var(--teal); }
.medal-row .limit svg { width: 24px; height: 24px; fill: var(--teal); }
.medal-row.missed > * { opacity: .6; }
.medal-row.missed img { filter: saturate(.25) brightness(1.12); }

/* Win (result_panel.dart): Buddy cheers over the card; ribbon with the level medallion, medal in the sunburst with
   the move badge, restart ring and the terracotta main button */
.win { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px;
  background: rgba(251, 242, 233, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .3s ease; }
.win-box { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; animation: rise .45s var(--ease-pop); }
.win-buddy { width: auto; height: 104px; margin-bottom: -6px; position: relative; z-index: 1; animation: cheer 2.4s ease-in-out .5s infinite; }
.win-card { position: relative; width: 100%; padding: 0 18px 14px; text-align: center;
  border: 0; border-image: url("../img/ui/plaque_card.webp") 84 84 90 84 fill / 28px 28px 30px 28px; }
.win-ribbon { margin: 0 -26px; top: -2px; }
.win-medal { position: relative; width: 150px; height: 150px; margin: 0 auto; display: grid; place-items: center; }
.win-medal img { position: relative; width: auto; height: 104px; animation: pop .5s var(--ease-pop) .15s both; }
.sunburst { position: absolute; inset: -40px; background: url("../img/ui/win_sunburst.webp") center / contain no-repeat; animation: spin 18s linear infinite; }
.win-moves { position: absolute; right: 2px; top: 14px; width: 54px; height: 54px; display: grid; place-items: center; padding-bottom: 3px;
  background: url("../img/ui/counter.webp") center / contain no-repeat; font: 600 21px/1 "Outfit", var(--body); color: var(--teal); }
.win-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.win-actions .clay { flex: 1; max-width: 210px; min-height: 56px; font-family: "Fredoka", var(--display); font-size: 1.15rem; }
.win-actions .clay:focus-visible { border-radius: 999px; }
.win .text-action { margin-top: 2px; font-size: 16px; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }

/* Level stones under the phone, as on the map: the stone shows the medal, a round number tag below,
   Buddy stands on the level you are playing */
.levels { display: flex; justify-content: center; gap: 18px; margin-top: 30px; }
.level-stone { position: relative; width: 76px; height: 72px; border: 0; padding: 0; cursor: pointer; background: none; transition: transform .15s var(--ease-pop); -webkit-tap-highlight-color: transparent; }
.level-stone .stone { position: absolute; left: 0; top: 0; width: 76px; height: 61px; object-fit: contain; }
.level-stone .tag { position: absolute; left: 50%; bottom: 0; width: 27px; height: 27px; margin-left: -13.5px; display: grid; place-items: center;
  border-radius: 50%; background: var(--cream); border: 1.5px solid #DCC3A3; box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.2);
  font: 600 14px/1 "Outfit", var(--body); color: var(--teal); }
.level-stone .here { position: absolute; left: 50%; bottom: 34px; width: auto; height: 46px; margin-left: -19.5px; animation: bob 2.6s ease-in-out infinite; pointer-events: none; }
.level-stone:hover { transform: translateY(-3px); }
.level-stone:focus-visible { outline-offset: 4px; }

/* ---------- Worlds ---------- */
.worlds { --tint: #E4F3F6; background: var(--tint); transition: background-color .6s ease; overflow: hidden; }
.worlds[data-world="underwater"] { --tint: #DDF3F0; }
.worlds[data-world="beach"] { --tint: #FCEBCF; }
.worlds[data-world="sahara"] { --tint: #FADCCB; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 12px; margin: 0 calc(var(--gutter) * -1) 8px; padding-left: var(--gutter); padding-right: var(--gutter); }
.tabs::-webkit-scrollbar { display: none; }
.tab { --k: 6.2; flex: none; cursor: pointer; min-height: 48px; padding: 8px 20px 9px;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: 999px; background: #F5E5D6; box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15);
  font: 700 1.08rem/1 var(--display); color: var(--teal); transition: transform .28s var(--ease-pop); }
/* Selected: the same ring with a teal face (like the selected segment in the game) */
.tab { position: relative; isolation: isolate; }
.tab[aria-selected="true"] { color: #FFF8F1; text-shadow: 0 1px 0 #0E4C52; }
.tab[aria-selected="true"]::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 999px; background: linear-gradient(#3A7177, #2A585D); }
.tab:hover { transform: translateY(-2px) scale(1.04); }
.tab:active { transform: scale(1.06, .88); transition-duration: .07s; }
.world-track { --gap: 64px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--gap); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.world-track::-webkit-scrollbar { display: none; }
.world { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; gap: 22px; padding: 12px 14px 34px; align-content: start; }
@media (min-width: 960px) { .world { padding: 12px 40px 40px 14px; } }
@media (min-width: 960px) { .world { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 50px; align-items: center; } }
.world-window { position: relative; --k: 4.6; padding: 12px;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k)); background: #F5E5D6;
  box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15), 0 24px 40px -26px rgba(80, 50, 20, 0.55); }
.world-window > img:first-child { width: 100%; aspect-ratio: 1014 / 768; object-fit: cover; border-radius: 18px; }
.world-friend { position: absolute; right: -10px; bottom: -22px; width: clamp(78px, 18vw, 120px); filter: drop-shadow(0 8px 8px rgba(60, 40, 20, 0.3)); animation: bob 3s ease-in-out infinite; transform-origin: 50% 100%; }
.world-time { font: 700 0.95rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); }
.world-copy h3 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3rem); font-weight: 800; margin: 8px 0 10px; }
.world-copy > p { color: var(--teal); max-width: 32rem; }
.world-friends { margin-top: 10px !important; font-weight: 500; color: var(--ink-soft) !important; }
.pieces-row { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.pieces-row li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; text-align: center; font: 600 0.88rem/1.15 var(--display); color: var(--teal); }
.pieces-row img { width: 76px; height: 76px; filter: drop-shadow(0 5px 4px rgba(90, 55, 20, 0.25)); }
.swipe-hint { text-align: center; font: 600 0.95rem/1 var(--display); color: var(--ink-soft); margin-top: 8px; }
.swipe-hint span { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@media (min-width: 960px) { .swipe-hint { display: none; } }

/* ---------- Collect ---------- */
.collect-grid, .daily-grid { display: grid; gap: 26px; }
@media (min-width: 760px) and (max-width: 1059px) { .collect-grid, .daily-grid { grid-template-columns: repeat(2, 1fr); } .collect-grid > :nth-child(3), .daily-grid > :nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1060px) { .collect-grid, .daily-grid { grid-template-columns: repeat(3, 1fr); } }
.feature h3 { margin-top: 20px; }
.feature p { margin-top: 8px; color: var(--ink-soft); }
/* Small ring pill with an icon and a number (StatChip / reward pills in the game) */
.pill { --k: 9; display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 30px; padding: 2px 10px 2px 6px;
  border-radius: 999px; background: #F5E5D6; box-shadow: 0 1.5px 4px rgba(33, 58, 61, 0.14);
  font: 700 0.95rem/1 var(--display); color: var(--teal); white-space: nowrap; }
.pill img { width: auto; height: 20px; }
.pill svg { width: 18px; height: 18px; fill: currentColor; margin-right: 2px; }
/* Square picture tile (the icon box of quest rows and the crew flag) */
.tile-ring { --k: 10; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: #FBF1E4; }
.tile-ring img { width: 74%; height: 74%; object-fit: contain; }

/* Souvenir shelf (souvenirs.dart WoodShelf, shelf_frame 800x797 at 3x, insets 98 86 93 93): head with the shelf's
   hat under the glass dome, n/12 and a bar, then 4 x 3 compartments; missing souvenirs are pale silhouettes,
   today's place glows */
.shelf { --wood: #7A4724; background: #6E4021 content-box; border: 0; border-image: url("../img/ui/shelf_frame.webp") 98 86 93 93 fill / 21px 19px 20px 20px;
  padding: 16px 16px 14px 17px; filter: drop-shadow(0 6px 8px rgba(90, 50, 20, 0.28)); }
.shelf-head { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; padding: 2px 8px 8px 4px;
  border-bottom: 5px solid #A0612F; box-shadow: 0 2px 0 #5E3418; }
.dome { position: relative; width: 44px; height: 51px; }
.dome img { position: absolute; }
.dome img:last-child { inset: 0; width: 100%; height: 100%; }
.dome-hat { left: 9px; top: 15px; width: 26px; height: 26px; opacity: .55; filter: saturate(.3); }
.shelf-count { font: 700 1.35rem/1 var(--display); color: #FFF1DC; }
.shelf-bar { height: 12px; border-radius: 99px; background: #F3E2C8; box-shadow: inset 0 1px 2px rgba(80, 40, 10, 0.4); padding: 2px; }
.shelf-bar .fill { display: block; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(#5CCFD8, #1FA5B3); }
.shelf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shelf-grid li { position: relative; aspect-ratio: 1 / .86; display: grid; place-items: center; padding: 8% 10% 4%;
  border-bottom: 5px solid #A0612F; box-shadow: 0 2px 0 #5E3418; }
.shelf-grid li:not(:nth-child(4n))::after { content: ""; position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: #A0612F; box-shadow: 1px 0 0 #5E3418; z-index: 1; }
.shelf-grid li:nth-last-child(-n+4) { border-bottom: 0; box-shadow: none; }
.shelf-grid img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s var(--ease-pop); }
.shelf-grid li:not(.gap):not(.glow) img:hover { transform: translateY(-4px) rotate(-3deg); }
.shelf-grid .gap img, .shelf-grid .glow img { filter: brightness(0) invert(1); opacity: .17; }
.shelf-grid .glow { background: radial-gradient(closest-side, rgba(255, 224, 138, 0.95), rgba(255, 201, 74, 0.4) 55%, rgba(255, 201, 74, 0)); }
.shelf-grid .glow img { opacity: .45; }

.dress { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: 18px; background: radial-gradient(circle at 50% 70%, #FBF0E2 0 30%, #EEDBC3 72%); }
.dress-stage { position: relative; display: block; width: 46%; max-width: 170px; margin: 0 auto; padding-top: 18px; }
.dress-stage img { width: 100%; }
.dress-hat { position: absolute; left: 0; top: 18px; }
.dress-hat.swap, .dress-buddy.swap { animation: hat-drop .45s var(--ease-pop); }
.dress:hover .dress-buddy, .dress:focus-visible .dress-buddy { animation: bob 1.2s ease-in-out infinite; }
.hat-name { --k: 7.5; display: table; margin: 14px auto 0 !important; padding: 5px 16px 4px; border-radius: 999px; background: #F5E5D6;
  font: 700 1rem/1.2 var(--display); color: var(--terra-ink); }
.journal { position: relative; height: 196px; border-radius: 18px; background: #EEDBC3; }
/* Only the game's clay picture frames, no white photo card or tape behind them (Sina 2026-10-25); the shadow follows the frame */
.photo { position: absolute; margin: 0; width: 40%; max-width: 132px; filter: drop-shadow(0 6px 8px rgba(80, 50, 20, 0.35)); transition: transform .25s var(--ease-pop); }
.photo img { width: 100%; }
.p1 { left: 6%; top: 24px; transform: rotate(-7deg); }
.p2 { left: 31%; top: 12px; transform: rotate(3deg); z-index: 1; }
.p3 { right: 6%; top: 28px; transform: rotate(8deg); }
.journal:hover .p1 { transform: rotate(-11deg) translateY(-4px); }
.journal:hover .p3 { transform: rotate(12deg) translateY(-4px); }

/* ---------- Together (evening harbor band) ---------- */
.together { background: var(--teal); color: var(--cream); container-type: inline-size; }
.together h2 { color: var(--cream); }
.together .eyebrow { color: #F7C287; }
.together .lead { color: #D9E7E4; }
.together-grid { display: grid; gap: 22px; }
@media (min-width: 760px) { .together-grid { grid-template-columns: repeat(3, 1fr); } .together-grid .crew { grid-column: 1 / -1; } }
.mini { text-align: left; }
.mini-icon { height: 76px; width: auto; margin-bottom: 14px; filter: drop-shadow(0 5px 5px rgba(60, 40, 20, 0.25)); }
.mini p { margin-top: 6px; color: var(--ink-soft); font-size: 1rem; }
.mini-icon.avatar { --k: 5; display: grid; width: 76px; height: 76px; filter: none; }
.mini-icon.avatar img { width: 100%; height: 100%; margin: 0; }
/* Crew card: a small copy of the crew screen (crew_screen.dart): team head with flag, name and 7/20, a member row
   with level and gold pills, and the emote ring buttons */
.crew { display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .crew { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; padding: 24px 34px 26px 24px; } }
.crew-mock { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: #EEDBC3; }
.crew-head, .crew-member { --k: 6; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k)); background: #F5E5D6; box-shadow: 0 2px 6px rgba(33, 58, 61, 0.12); }
.crew-head .tile-ring { width: 50px; height: 50px; background: #DDF0EE; }
.crew-name { flex: 1; min-width: 0; font: 800 clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem)/1.1 var(--display); color: var(--terra-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { --k: 8; flex: none; width: 54px; height: 54px; border-radius: 50%; background: #F5E5D6; display: grid; place-items: center; overflow: hidden; }
.avatar img { width: auto; height: 40px; margin-top: 8px; }
.crew-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.crew-who b { flex: 1 0 100%; font: 700 1.15rem/1.1 var(--display); color: var(--teal); }
.emotes { display: flex; justify-content: center; gap: 14px; padding-top: 2px; }
.emotes .ring { --k: 8; width: 46px; height: 46px; border-radius: 50%; background: #F5E5D6; display: grid; place-items: center; }
.emotes svg { width: 22px; height: 22px; fill: var(--terra-ink); }
.mini-copy p { margin-top: 6px; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Daily ---------- */
.daily-grid .pedestal, .daily-grid .quest, .daily-grid .gift { height: 222px; }
/* Discovery head: the day's souvenir on the pedestal, Buddy cheering, the painted Coast behind (today_screen.dart) */
.pedestal { position: relative; border-radius: 18px; overflow: hidden; background: url("../img/worlds/coast-600.webp") center 40% / cover no-repeat; }
.pedestal-base { position: absolute; left: 34%; bottom: 8px; width: 50%; max-width: 190px; transform: translateX(-50%); }
.pedestal-item { position: absolute; left: 34%; bottom: 70px; width: 28%; max-width: 104px; transform: translateX(-50%); z-index: 1; animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 8px rgba(60, 40, 20, 0.3)); }
.pedestal-buddy { position: absolute; right: 7%; bottom: 14px; width: 30%; max-width: 112px; height: auto; transform-origin: 50% 100%; animation: bob 2.6s ease-in-out infinite; }
.sparkle { position: absolute; width: 24px; animation: twinkle 2.4s ease-in-out infinite; z-index: 2; }
.s1 { left: 16%; top: 30px; }
.s2 { left: 50%; top: 56px; width: 16px; animation-delay: -1.2s; }
/* Weekly quests (weekly_quests_card.dart): ring rows with the icon tile, the task, a gold bar with n/target and the
   coin pill; the weekly chest with 150 coins and a lantern below */
.groove { flex: 1; height: 13px; border-image: url("../img/ui/progress_groove.webp") 40 43 39 44 fill / 6.5px 7px 6.5px 7px; padding: 2.5px 3px; }
.groove .fill { display: block; height: 100%; width: var(--p); border-image: url("../img/ui/progress_fill_gold.webp") 34 37 34 37 fill / 4px 4px 4px 4px; }
.pill-claim { min-height: 34px; padding: 3px 12px 3px 7px; background: #FCEAB9; }
/* Daily gift (daily_gift.dart): the bronze / silver / gold chests at 7, 14 and 21 days on a gold track, then the
   seven days: opened boxes with a check, today's box in the gold frame, wrapped boxes, the chest on day 7 */
.tier { position: relative; flex: 0 0 31%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tier img { width: 56px; height: auto; }
.tier b { --k: 11; min-width: 30px; padding: 2px 6px; text-align: center; border-radius: 99px; background: #F5E5D6; font: 700 0.8rem/1.2 var(--display); color: var(--teal); }

/* ---------- FAQ ---------- */
.faq { background: var(--sand); }
.faq-list { display: grid; gap: 14px; }
.qa { --k: 5.4; border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k)); background: #F5E5D6; box-shadow: 0 2px 6px rgba(33, 58, 61, 0.12); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px 16px 22px; font: 700 1.15rem/1.3 var(--display); color: var(--teal); border-radius: 26px; }
.qa summary::-webkit-details-marker { display: none; }
/* Chevron in a small ring button (ArtButton.ring) */
.qa summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: url("../img/ui/ui_icon_chevron.webp") center / 15px no-repeat, url("../img/ui/ring.webp") center / 100% 100% no-repeat;
  transform: rotate(180deg); transition: transform .25s var(--ease-pop); box-shadow: 0 2px 5px rgba(33, 58, 61, 0.14); }
.qa[open] summary::after { transform: rotate(0deg); }
.qa p { padding: 0 22px 20px; color: var(--ink-soft); max-width: 44rem; }

/* ---------- Final CTA: the same day ends at sunset ---------- */
.final { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 130px) 0 0; background: #F7C287; }
.final-sky { position: absolute; inset: 0; }
.final-sky img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.final-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 242, 233, 0) 40%, rgba(247, 194, 135, 0.35) 100%); }
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.final-card { --k: 4.6; max-width: 640px; padding: 26px 26px 30px;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  border-radius: calc(161px / var(--k)); background: #F5E5D6;
  box-shadow: 0 2px 6px rgba(33, 58, 61, 0.15), 0 24px 44px -24px rgba(110, 50, 20, 0.6); }
.final-card .lead { margin: 12px auto 0; }
.final-card .stores { justify-content: center; }
.parade { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, 1.4vw, 16px); margin-top: 34px; padding-bottom: 18px; width: 100%; max-width: 760px; }
.pf { width: clamp(50px, 12vw, 104px); filter: drop-shadow(0 8px 6px rgba(90, 40, 20, 0.35)); transform-origin: 50% 100%; animation: bob 2.4s ease-in-out infinite; }
.f-buddy { width: clamp(84px, 20vw, 170px); animation-duration: 2s; }
.f-seahorse { width: clamp(40px, 9vw, 78px); animation-delay: -.6s; }
.f-turtle { animation-delay: -1.2s; }
.f-seal { animation-delay: -.3s; }
.f-fennec { animation-delay: -1.6s; }

/* ---------- Footer ---------- */
.footer { background: var(--teal-deep); color: #D9E7E4; padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-inner { display: grid; gap: 22px; }
@media (min-width: 860px) { .footer-inner { grid-template-columns: 1fr auto; align-items: center; } .footer-fine { grid-column: 1 / -1; } }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 48px; height: 48px; border-radius: 14px; }
.footer-title { font: 600 1.15rem/1.2 var(--display); color: var(--cream); }
.footer-pub { font-size: 0.92rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-nav a { color: var(--cream); font-weight: 500; }
.footer-nav a:hover { color: #F7C287; }
.footer-fine { font-size: 0.82rem; color: #A9C2BE; }

/* ---------- Scroll reveal (only with JS, never hides content without it) ---------- */
@media (scripting: enabled) { .reveal:not(.is-in) { opacity: 0; transform: translateY(26px); } }
.reveal { transition: opacity .6s ease, transform .7s var(--ease-pop), translate .4s var(--ease-pop), scale .3s var(--ease-pop); }
.steps .reveal:nth-child(2), .collect-grid .reveal:nth-child(2), .daily-grid .reveal:nth-child(2), .together-grid .reveal:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s; }
.steps .reveal:nth-child(3), .collect-grid .reveal:nth-child(3), .daily-grid .reveal:nth-child(3), .together-grid .reveal:nth-child(3) { transition-delay: .16s, .16s, 0s, 0s; }
.together-grid .reveal:nth-child(4) { transition-delay: .24s, .24s, 0s, 0s; }

/* ---------- Keyframes ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4%) scale(.985, 1.015); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.86); opacity: .75; } }
@keyframes hop { 0% { transform: scale(1.08, .9); } 35% { transform: translateY(-22%) scale(.94, 1.08); } 70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
@keyframes fly { 0% { translate: -100px 0; } 50% { translate: 50cqw 26px; } 100% { translate: calc(100cqw + 40px) 0; } }
@keyframes flap { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes crate-slide { 0%, 20% { transform: translate(-50%, -50%); } 55%, 80% { transform: translate(50%, -50%); } 100% { transform: translate(-50%, -50%); } }
@keyframes buddy-push { 0%, 20% { transform: translate(-150%, -72%); } 55%, 80% { transform: translate(-30%, -72%) rotate(6deg); } 100% { transform: translate(-150%, -72%); } }
@keyframes cheer { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-16px) rotate(-6deg); } 80% { transform: translateY(0) rotate(0); } 88% { transform: translateY(-8px) rotate(5deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-7deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
@keyframes pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes board-hop { 0% { transform: translateX(-50%) scale(1.06, .92); } 50% { transform: translateX(-50%) translateY(-14%) scale(.96, 1.05); } 100% { transform: translateX(-50%); } }
@keyframes board-hop-flip { 0% { transform: translateX(-50%) scale(-1.06, .92); } 50% { transform: translateX(-50%) translateY(-14%) scale(-.96, 1.05); } 100% { transform: translateX(-50%) scaleX(-1); } }
@keyframes wobble { 0%, 100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(-7deg); } 60% { transform: translateX(-50%) rotate(5deg); } }
@keyframes wobble-flip { 0%, 100% { transform: translateX(-50%) scaleX(-1) rotate(0); } 25% { transform: translateX(-50%) scaleX(-1) rotate(-7deg); } 60% { transform: translateX(-50%) scaleX(-1) rotate(5deg); } }
@keyframes dance { from { transform: translateX(-50%) translateY(0) rotate(-4deg); } to { transform: translateX(-50%) translateY(-12%) rotate(4deg); } }
@keyframes hat-drop { 0% { transform: translateY(-30%) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(30px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes medal-wobble { 0% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes bubble-pop { 0% { transform: scale(.75); } 100% { transform: scale(1); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 6px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
@keyframes toast-down { 0% { opacity: 0; transform: translateY(-6px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .gull { display: none; }
  .reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* Wochenaufgaben und Tagesgeschenk ruhig (Sina 2026-10-25): flache Mulde, keine Rahmen je Zeile, Originalbilder */
.quest { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: #EEDBC3; }
.quest-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #F8EEE2; box-shadow: 0 0 0 1.5px #E6CFB0, 0 2px 4px rgba(110, 70, 30, 0.12); }
.quest-icon { flex: none; width: 40px; height: 40px; object-fit: contain; }
.quest-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
/* Longer languages (es, fr, it, pl, pt-BR) wrap to a second line instead of being cut off */
.quest-label { font: 700 0.98rem/1.15 var(--display); color: var(--teal); text-wrap: balance; overflow-wrap: break-word; }
.quest .groove { height: 8px; margin: 0; padding: 0; border: 0; border-image: none; border-radius: 99px; background: #F7EBDB; box-shadow: inset 0 1px 2px rgba(110, 70, 30, 0.25); }
.quest .groove .fill { display: block; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(#FFD45A, #F2A91A); }
.quest-coins { display: inline-flex; align-items: center; gap: 4px; font: 700 0.95rem/1 var(--display); color: var(--teal); }
.quest-coins img { width: 20px; height: 20px; object-fit: contain; }
.quest-row.is-done .quest-label { color: var(--ink-soft); }
.quest-chest-row { display: flex; align-items: center; gap: 14px; padding-top: 2px; }
.quest-chest { width: 52px; height: auto; animation: wiggle 3s ease-in-out infinite; }
.gift { display: flex; align-items: center; justify-content: center; padding: 18px 12px; border-radius: 18px; background: #EEDBC3; }
.gift-days { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; }
.gift-days li { flex: 0 0 calc((100% - 18px) / 4); }
.gift-days li { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 14px; background: #F8EEE2; box-shadow: 0 0 0 1.5px #E6CFB0, 0 2px 4px rgba(110, 70, 30, 0.12); }
.gift-days img { width: 100%; max-width: 58px; aspect-ratio: 1; object-fit: contain; }
.gift-days .done img { opacity: .55; }
.gift-days b { font: 700 0.8rem/1 var(--display); color: var(--ink-soft); }
.gift-days .today { background: #FFF6EA; box-shadow: 0 0 0 2.5px var(--gold), 0 3px 8px -2px rgba(200, 130, 10, 0.45); }
.gift-days .today b { color: var(--coral); }
.gift-days .today img { animation: wiggle 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .quest-chest, .gift-days .today img { animation: none; } }

/* ---------- Self-playing mini boards (site/js/loops.js, Sina 2026-10-25: show the gameplay throughout) ----------
   The same tiles and pieces as the demo board (.tiles, .pieces, .piece), on a sand base in the step cards and over
   the painted world windows. --ar is columns / rows; the 3 % inset keeps the cells square. */
.lb { position: relative; width: 100%; aspect-ratio: var(--ar); border-radius: 16px; background: #EBCB98;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -5px 0 rgba(170, 115, 55, 0.32), 0 10px 18px -8px rgba(90, 55, 20, 0.5);
  transition: opacity .4s ease; }
.lb-fade .lb { opacity: 0; }
.lb-still .piece, .lb-still .piece *, .lb-still .tiles img { transition: none !important; animation: none !important; }
.lb .tiles img.swap { animation: pop .34s var(--ease-pop); }
.lb .piece { transition: transform .3s cubic-bezier(.3, .7, .4, 1); }
.lb .piece.glide, .lb .piece.roll { transition: transform .21s linear; }
.lb .piece.warp { transition: none; }
.lb .piece.buddy.hop .sprite { animation-duration: .28s; }
.piece.ball img, .piece.mirror img { width: 104%; height: 104%; margin: -2%; max-width: none; filter: drop-shadow(0 4px 3px rgba(90, 55, 20, 0.35)); }
.piece.ball img { width: 74%; height: 74%; margin: 13%; transition: transform .26s ease, opacity .26s ease; }
.piece.ball.roll img { animation: spin .42s linear infinite; }
.piece.ball.dive img { animation: none; transform: scale(.15) translateY(30%); opacity: 0; }
.piece.sun img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.piece.sun .sun-head { inset: 11%; width: 78%; height: 78%; transform: rotate(var(--turn)); filter: drop-shadow(0 3px 3px rgba(150, 90, 10, 0.35)); }
/* The sun's beam (SaharaArt.beamPath): soft glow, warm core, a white-hot line in the middle */
.lb-beam { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; z-index: 1; pointer-events: none; overflow: visible; }
.lb-beam polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lb-beam .glow { stroke: #FFE27A; stroke-width: .34; opacity: .38; }
.lb-beam .core { stroke: #FFE27A; stroke-width: .1; animation: beam-pulse 1.1s ease-in-out infinite; }
.lb-beam .hot { stroke: #FFFBEA; stroke-width: .04; }
.lb-beam.flash { animation: fade .3s ease; }
.lb-fx { position: absolute; inset: 3%; z-index: 3; pointer-events: none; }
.lb-burst, .lb-medal { position: absolute; left: calc(var(--c) * 100% / var(--cols)); top: calc(var(--r) * 100% / var(--rows));
  width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); }
.lb-spark { position: absolute; left: 50%; top: 50%; width: 34%; height: auto; margin: -17% 0 0 -17%; opacity: 0; animation: spark .85s ease-out both; }
.lb-burst.big .lb-spark { width: 46%; margin: -23% 0 0 -23%; }
/* A freed friend jumps out of the net and shrinks into Buddy's backpack */
.lb-pop { position: absolute; left: 6%; bottom: 18%; width: 88%; height: auto; max-width: none; animation: friend-pop 1.5s var(--ease-pop) both;
  filter: drop-shadow(0 5px 4px rgba(60, 40, 20, 0.3)); }
.lb-medal { display: grid; place-items: center; z-index: 2; }
.lb-medal img { width: auto; height: 84%; animation: medal-pop .6s var(--ease-pop) both, medal-bob 1.6s ease-in-out .6s infinite; filter: drop-shadow(0 6px 6px rgba(90, 55, 20, 0.35)); }

/* Restore step: coins go to the hammer marker, it taps, the lighthouse (map art before / after) is fixed.
   object-position = the lamp, so the hammer and the sparkles sit on it at any card width */
.art-restore.loop-on .map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.art-restore .map-fixed { opacity: 0; transition: opacity .45s ease; transform-origin: 66% 40%; }
.art-restore .map-fixed.on { opacity: 1; animation: fix-pop .7s var(--ease-pop); }
.art-restore.loop-on .hammer { right: auto; left: calc(66% - 26px); top: 6%; width: 52px; transform-origin: 80% 85%; transition: opacity .3s ease, transform .3s ease; }
.art-restore .hammer.tap { animation: hammer-tap .3s ease-in-out 3; }
.art-restore .hammer.gone { opacity: 0; transform: scale(.4); animation: none; }
.coin-pill { --k: 7; position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 0; border-image: var(--ring) / calc(161px / var(--k)) calc(168px / var(--k)) calc(160px / var(--k)) calc(168px / var(--k));
  background: #F5E5D6; box-shadow: 0 2px 6px rgba(33, 58, 61, 0.2); }
.coin-pill img { width: 26px; height: 26px; object-fit: contain; }
.coin-pill.give { animation: pop .4s var(--ease-pop); }
.restore-fx { position: absolute; left: 66%; top: 32%; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; }
.fly-coin { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; object-fit: contain; opacity: 0; animation: coin-fly .85s cubic-bezier(.5, 0, .6, 1) both; }

/* Worlds: each window plays its world's mechanic over the painting */
/* The board sits a little high, so the world's friend has its corner below it */
.world-board { position: absolute; inset: 12px; z-index: 1; display: grid; place-items: start center; padding-top: 6%; container-type: size; pointer-events: none; }
.world-board .lb { width: min(84cqw, 72cqh * var(--ar)); box-shadow: 0 0 0 4px rgba(255, 248, 241, 0.75), 0 18px 30px -12px rgba(30, 40, 40, 0.55); }
.world-board ~ .world-friend { z-index: 2; width: clamp(64px, 13vw, 96px); right: -8px; bottom: -18px; }
.pieces-row li.hl img { animation: piece-hl .7s var(--ease-pop); }

/* ---------- Playful bits (Sina 2026-10-25: a bit more fun, still calm) ---------- */
/* Wobbly section edges: a soft clay wave in the next section's colour drifts slowly along the bottom */
.wave { position: absolute; left: 0; bottom: -1px; width: 200%; height: 24px; z-index: 2; pointer-events: none; fill: var(--cream); animation: drift 40s linear infinite; }
.wave-top { bottom: auto; top: -1px; animation-name: drift-flip; transform: scaleY(-1); }
.wave-sand { fill: var(--sand); }
.wave-teal { fill: var(--teal); }
.wave-cream { fill: var(--cream); }
/* Buddy peeks over the next section's edge and waves when it scrolls into view */
.peek { position: absolute; bottom: 3px; z-index: 1; width: clamp(72px, 7vw, 96px); aspect-ratio: 80 / 72; overflow: hidden; pointer-events: none; }
.peek-right { right: max(7%, calc((100% - var(--maxw)) / 2 + 60px)); }
.peek-left { left: max(7%, calc((100% - var(--maxw)) / 2 + 60px)); }
.peek img { width: 100%; height: auto; transform: translateY(105%); transform-origin: 50% 100%; transition: transform .7s var(--ease-pop); }
.peek.is-in img { transform: translateY(18%); animation: wave-hi 1.3s ease-in-out .7s 2; }
/* Coins pop out of the daily cards on hover or tap */

@keyframes spark { 0% { transform: rotate(var(--a)) translateY(0) scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-190%) scale(.9) rotate(60deg); opacity: 0; } }
@keyframes friend-pop { 0% { transform: translateY(15%) scale(.4); opacity: 0; } 22% { transform: translateY(-58%) scale(1.06); opacity: 1; } 68% { transform: translateY(-62%) scale(1); opacity: 1; } 100% { transform: translateY(-10%) scale(.25); opacity: 0; } }
@keyframes medal-pop { 0% { transform: translateY(-20%) scale(.2) rotate(-20deg); opacity: 0; } 100% { transform: translateY(-104%) scale(1); opacity: 1; } }
@keyframes medal-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6%; } }
@keyframes beam-pulse { 0%, 100% { opacity: .95; } 50% { opacity: .7; } }
@keyframes fix-pop { 0% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes hammer-tap { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-24deg) translateY(-3px); } 70% { transform: rotate(8deg); } }
@keyframes coin-fly { 0% { transform: translate(calc(33px - 66cqw), calc(68cqh - 33px)) scale(.8); opacity: 0; }
  15% { opacity: 1; } 55% { transform: translate(calc((33px - 66cqw) / 2), calc((68cqh - 33px) / 2 - 34px)) scale(1); opacity: 1; }
  100% { transform: translate(0, 0) scale(.5); opacity: 0; } }
@keyframes piece-hl { 0% { transform: none; } 35% { transform: scale(1.2) rotate(-6deg); } 100% { transform: none; } }
@keyframes drift { to { transform: translateX(-50%); } }
@keyframes drift-flip { from { transform: scaleY(-1); } to { transform: translateX(-50%) scaleY(-1); } }
@keyframes wave-hi { 0%, 100% { transform: translateY(18%) rotate(0); } 25% { transform: translateY(13%) rotate(-9deg); } 75% { transform: translateY(13%) rotate(9deg); } }

@media (prefers-reduced-motion: reduce) {
  .wave,     .peek img { transform: translateY(18%); }
}

/* Bar fills (were inline style="--p", moved here for a Content-Security-Policy without 'unsafe-inline') */
.fill.p-42 { --p: 41.7%; }
.fill.p-60 { --p: 60%; }
.fill.p-100 { --p: 100%; }

/* Pause control (WCAG 2.2.2): a ring button with a pause / play glyph in the top bar, a text button in the footer.
   Paused: every CSS animation holds still (loops.js stops the boards). Hidden with prefers-reduced-motion. */
.motion-toggle { --s: 46px; --k: 7.4; background: #F5E5D6; }
.motion-toggle::after { background: none; inset: 0; margin: auto; width: 14px; height: 16px;
  border-left: 5px solid var(--teal); border-right: 5px solid var(--teal); }
.motion-toggle[aria-pressed="true"]::after { width: 0; height: 0; margin-left: 17px; border: 0; border-left: 15px solid var(--teal);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.footer-motion { margin: 0; }
.footer-motion-btn { min-width: 0; min-height: 44px; padding: 0; color: var(--cream); font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.footer-motion-btn:hover { color: #F7C287; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
/* The world track clips anything outside a panel, so the panel's focus ring sits inside it */
.world:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px #FFF8F1; border-radius: 24px; }