/* playhugstorm.com — the game's own world on the web: sky-blue splash, meadow greens, cream panels with ink outlines,
   chunky two-tone toon buttons, Fredoka + Nunito, and the gloom → bloom restoration as the signature moment.
   Tokens follow the game's ui/theme/tokens.css (GDD §10.10). No inline styles anywhere (strict CSP). */

@font-face { font-family: 'Fredoka'; src: url("/assets/fonts/fredoka-latin-wght.99d6c78e04.woff2") format('woff2'); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; src: url("/assets/fonts/nunito-latin-wght.ba344451ea.woff2") format('woff2'); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* metric-matched fallbacks keep the layout still while the fonts arrive */
@font-face { font-family: 'Fredoka Fallback'; src: local('Arial Rounded MT Bold'), local('Arial'); size-adjust: 93%; ascent-override: 99%; descent-override: 25%; }
@font-face { font-family: 'Nunito Fallback'; src: local('Arial'); size-adjust: 101%; ascent-override: 100%; descent-override: 35%; }

:root {
  --ink: #3B2A55; --ink-2: #5E4E7A; --ink-soft: rgba(59, 42, 85, .16);
  --cream: #FFF7E6; --paper: #FFFDF6; --cream-edge: #E8D3AE; --cream-inset: #F4E6C8; --cream-deep: #EAD6B0;
  --primary: #FFC53D; --primary-dark: #F7A928; --primary-lip: #F08A1C; --primary-hi: #FFE9A3;
  --go: #5ED13B; --go-dark: #45B82E; --go-lip: #2F9A2E; --go-hi: #B5F27E;
  --blue: #43A8F7; --blue-dark: #2E8FE6; --blue-lip: #1F6FC9; --blue-hi: #A9DBFF;
  --sky: #4FB4FF; --sky-2: #62BEFF; --sky-3: #A6DDFF; --sky-4: #D3F0FF;
  --grass: #91D945; --grass-2: #7CC845; --grass-3: #5DBB4C; --meadow-deep: #2E6F35;
  --peach: #FFE9C9; --peach-2: #F2C98A; --gold: #FFD447; --coral: #FF7AA2;
  --gloom-top: #7E8792; --gloom-bottom: #B2BDC8; --glum: #4B3F78; --night: #231C52; --night-2: #3A2B78;
  --r-common: #A9B8C8; --r-rare: #4DA8FF; --r-epic: #B46BFF; --r-legend: #FFB22E;
  --font-display: 'Fredoka', 'Fredoka Fallback', ui-rounded, system-ui, sans-serif;
  --font-body: 'Nunito', 'Nunito Fallback', ui-rounded, system-ui, sans-serif;
  --side: 16px; --wrap: 1180px;
  --ease-out: cubic-bezier(.33, 1, .68, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-sine: cubic-bezier(.37, 0, .63, 1);
  --ambient: 0 10px 18px rgba(59, 42, 85, .2);
  --bloom: 1;
  color-scheme: light;
}
@media (min-width: 700px) { :root { --side: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 700 1.0625rem/1.55 var(--font-body); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: rgba(59, 42, 85, .45); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px var(--primary-hi); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
html { scrollbar-color: var(--ink-2) var(--cream-inset); }
.wrap { width: min(100% - 2 * var(--side), var(--wrap)); margin-inline: auto; }
.wrap-narrow { --wrap: 820px; }

/* ---- skip link and header ---------------------------------------------------------------------------------- */
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--primary); color: var(--ink); font: 700 1rem/1 var(--font-display); text-decoration: none; transition: top .18s var(--ease-out); }
.skip:focus { top: 12px; }
.top { position: absolute; inset: 0 0 auto; z-index: 20; padding: 14px var(--side) 0; }
.draft-banner ~ .top { top: 38px; }
.nw { white-space: nowrap; }
.home .top-logo { visibility: hidden; }
.home .top-nav { justify-content: flex-end; }
.top-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1400px; margin: 0 auto; }
.top-logo { text-decoration: none; border-radius: 12px; }
.top-links { display: none; list-style: none; margin: 0; padding: 6px; gap: 4px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink), var(--ambient); }
.top-links a { display: block; padding: 8px 16px; border-radius: 999px; font: 600 1rem/1.1 var(--font-display); text-decoration: none; }
.top-links a:hover { background: var(--cream-inset); }
@media (min-width: 900px) { .top-links { display: flex; } }
main:focus { outline: none; }

/* ---- the wordmark (Outlined per letter, bounce line) ------------------------------------------------------ */
.wordmark { display: inline-block; font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.wm-letters { display: inline-flex; isolation: isolate; padding: .06em .12em .16em; }
.wm-l { position: relative; display: inline-block; }
.wm-d { display: inline-block; position: relative; }
.wm-s { position: absolute; inset: 0; color: var(--ink); -webkit-text-stroke: .15em var(--ink); text-shadow: 0 .11em 0 var(--ink); }
.wm-f { position: relative; color: #fff; }
.wm-gold .wm-f { background: linear-gradient(180deg, #FFFFFF 16%, #FFF1B0 42%, #FFD447 60%, #F7A928 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-0 { transform: none; } .wm-1 { transform: translateY(.084em) rotate(4.96deg); } .wm-2 { transform: translateY(.076em) rotate(-1.28deg); }
.wm-3 { transform: translateY(-.015em) rotate(-4.63deg); } .wm-4 { transform: translateY(-.089em) rotate(2.47deg); } .wm-5 { transform: translateY(-.066em) rotate(3.99deg); }
.wm-6 { transform: translateY(.029em) rotate(-3.4deg); } .wm-7 { transform: translateY(.094em) rotate(-3.03deg); }
.wm-small { font-size: 34px; }
.wm-foot { font-size: 46px; }
.wm-hero { font-size: clamp(68px, 19vw, 96px); }
@media (min-width: 700px) { .wm-hero { font-size: clamp(96px, 10vw, 150px); } }

/* the letters drop in once (the game's Loading entrance), compositor only */
@media (prefers-reduced-motion: no-preference) {
  .wm-hero .wm-d { animation: wm-drop .62s var(--ease-out) both; }
  .wm-hero .wm-1 .wm-d { animation-delay: .05s; } .wm-hero .wm-2 .wm-d { animation-delay: .1s; } .wm-hero .wm-3 .wm-d { animation-delay: .15s; }
  .wm-hero .wm-4 .wm-d { animation-delay: .2s; } .wm-hero .wm-5 .wm-d { animation-delay: .25s; } .wm-hero .wm-6 .wm-d { animation-delay: .3s; } .wm-hero .wm-7 .wm-d { animation-delay: .35s; }
}
@keyframes wm-drop {
  0% { transform: translateY(-.7em) scale(.55); opacity: 0; }
  55% { transform: translateY(.07em) scale(1.08, .94); opacity: 1; }
  78% { transform: translateY(-.03em) scale(.98, 1.03); }
  100% { transform: none; opacity: 1; }
}

/* ---- outlined display headings ---------------------------------------------------------------------------- */
.outlined { position: relative; display: inline-block; isolation: isolate; --ow: .075em; }
.o-stroke { position: absolute; inset: 0; z-index: -1; color: var(--ink); -webkit-text-stroke: calc(var(--ow) * 2) var(--ink); text-shadow: 0 .09em 0 var(--ink); }
.o-fill { position: relative; color: #fff; }
.sec-title { font-size: clamp(38px, 8.6vw, 64px); line-height: 1.02; padding-bottom: .12em; }
.lede { font-size: clamp(1.125rem, 2.2vw, 1.3rem); line-height: 1.5; max-width: 34em; }

/* ---- buttons (the game's anatomy: 2.5 px ink, two-tone face, specular dot, lip, press = drop 3 px) ---------- */
.btn { --f: var(--primary); --fd: var(--primary-dark); --lip: var(--primary-lip); --hi: var(--primary-hi);
  display: inline-flex; text-decoration: none; color: var(--ink); border-radius: 20px; -webkit-tap-highlight-color: transparent; }
.btn-go { --f: var(--go); --fd: var(--go-dark); --lip: var(--go-lip); --hi: var(--go-hi); color: #fff; }
.btn-blue { --f: var(--blue); --fd: var(--blue-dark); --lip: var(--blue-lip); --hi: var(--blue-hi); color: #fff; }
.btn-cream { --f: var(--paper); --fd: var(--cream-inset); --lip: var(--cream-edge); --hi: #fff; }
.btn-face { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 6px 24px 9px;
  border: 2.5px solid var(--ink); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, var(--f) 0 57%, var(--fd) 58% 100%);
  box-shadow: inset 0 2.5px 0 var(--hi), inset 0 -3.5px 0 var(--lip), 0 4px 0 var(--ink), var(--ambient);
  font: 700 1.3rem/1.1 var(--font-display); transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.btn-go .btn-label, .btn-blue .btn-label { text-shadow: 0 2px 0 rgba(47, 90, 30, .55); }
.btn-blue .btn-label { text-shadow: 0 2px 0 rgba(31, 60, 140, .55); }
.btn-spec { position: absolute; left: 11px; top: 7px; width: 12px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .75); transform: rotate(-14deg); }
.btn .glyph { width: 22px; height: 22px; stroke-width: 2.8; }
.btn .glyph { fill: currentColor; }
.btn:hover .btn-face { transform: translateY(-2px); box-shadow: inset 0 2.5px 0 var(--hi), inset 0 -3.5px 0 var(--lip), 0 6px 0 var(--ink), var(--ambient); }
.btn:active .btn-face { transform: translateY(3px) scale(.98); box-shadow: inset 0 2.5px 0 var(--hi), inset 0 -1.5px 0 var(--lip), 0 1px 0 var(--ink), 0 3px 6px rgba(59, 42, 85, .2); transition-duration: .06s; }
.btn:focus-visible { outline-offset: 5px; }
.btn-s .btn-face { min-height: 46px; padding: 4px 18px 7px; font-size: 1.1rem; border-radius: 16px; }

/* store chips: cream, not buttons (nothing to press before launch) */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.store-face { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 7px 16px 9px 12px; border: 2.5px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, var(--paper) 0 57%, var(--cream-inset) 58% 100%); box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 var(--cream-edge), 0 4px 0 var(--ink), var(--ambient); }
.store-glyph { width: 26px; height: 26px; flex: none; }
.store-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.store-sub { font: 800 .8125rem/1.1 var(--font-body); letter-spacing: .01em; color: var(--ink-2); }
.store-name { font: 700 1.2rem/1.1 var(--font-display); }

/* ---- hero: sky, copy, the valley ---------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-top: 68px;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 32%, var(--sky-3) 64%, var(--sky-4) 100%); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--gloom-top), var(--gloom-bottom)); opacity: calc((1 - var(--bloom)) * .92); }
.sky { position: absolute; inset: 0; pointer-events: none; }
.cloud { position: absolute; left: 0; display: block; aspect-ratio: 1.5; background: center / 100% 100% no-repeat; opacity: .95;
  --x: calc(-110% + var(--p) * (100vw + 110%)); transform: translateX(var(--x)); }
.cloud-a { top: 7%; width: min(46vw, 420px); background-image: url("/assets/shapes/cloud-a.ad62dfbc51.svg"); --p: .38; }
.cloud-b { top: 23%; width: min(30vw, 260px); background-image: url("/assets/shapes/cloud-c.9f286f4dd9.svg"); --p: .8; opacity: .85; }
.cloud-c { top: 3%; width: min(36vw, 320px); background-image: url("/assets/shapes/cloud-b.74292a564d.svg"); --p: .1; opacity: .9; }
.cloud-d { top: 36%; width: min(24vw, 200px); background-image: url("/assets/shapes/cloud-c.9f286f4dd9.svg"); --p: .55; opacity: .8; }
/* a short drift that settles (moving decoration stops within 5 s, WCAG 2.2.2) */
@media (prefers-reduced-motion: no-preference) {
  .cloud { animation: drift 4.5s var(--ease-out) both; }
  .cloud-b { animation-duration: 3.6s; } .cloud-d { animation-duration: 4s; }
}
@keyframes drift { from { transform: translateX(calc(var(--x) - 7vw)); } to { transform: translateX(var(--x)); } }
.sky-par { transform: translate3d(0, calc(var(--sy, 0) * .35px), 0); }

.hero-copy { position: relative; z-index: 3; text-align: center; padding: 18px var(--side) 0; }
.hero-title { margin: 0 auto; font-size: 1em; line-height: 1; }
.tagline { margin-top: 10px; font: 600 clamp(1.4rem, 6vw, 2.2rem)/1.15 var(--font-display); color: var(--ink); text-wrap: balance; }
.hero-line { margin: 10px auto 0; max-width: 30em; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.valley { position: relative; z-index: 1; aspect-ratio: 430 / 520; margin-top: -24%; }
.valley picture, .valley img { position: absolute; inset: 0; width: 100%; height: 100%; }
.valley img { object-fit: cover; object-position: 50% 100%; }
.v-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.v-rim path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-rim-glow { stroke: #FFE66B; stroke-width: 18; opacity: .38; }
.v-rim-line { stroke: #FFF1A8; stroke-width: 5; }
.v-rim { opacity: 0; transition: opacity .3s; }
.wave-on .v-rim { opacity: var(--rim, 1); }
/* before the script runs (and without it) the valley is in full colour; the script adds the wave */
.hero-actions { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px var(--side) 40px; background: var(--grass);
  box-shadow: 0 -1px 0 var(--grass); }
.hero-more { margin: 0; }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .hero { min-height: clamp(640px, 100svh, 1180px); display: flex; flex-direction: column; padding-top: 96px; }
  .hero-copy { max-width: min(46vw, 640px); margin-left: max(var(--side), 5vw); padding: 12px 0 0; text-align: left; }
  .hero-title .wm-letters { padding-left: 0; }
  .tagline { margin-top: 14px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
  .hero-line { margin: 12px 0 0; font-size: clamp(1.05rem, 1.35vw, 1.25rem); max-width: 26em; }
  .valley { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; aspect-ratio: 1600 / 1000; }
  .hero-copy::before { content: ''; position: absolute; z-index: -1; left: -12%; right: -18%; top: -14%; bottom: -30%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(220, 242, 255, .9), rgba(220, 242, 255, .62) 58%, rgba(220, 242, 255, 0)); }
  .hero-copy { isolation: isolate; }
  .tagline, .hero-line { text-shadow: 0 0 2px rgba(226, 244, 255, .95), 0 0 10px rgba(226, 244, 255, .9), 0 0 22px rgba(226, 244, 255, .7); }
  .hero-actions { position: relative; align-items: flex-start; margin-left: max(var(--side), 5vw); padding: 22px 0 0; background: none; box-shadow: none; }
  .stores { justify-content: flex-start; }
  .hero-more { display: none; }
}
@media (min-width: 700px) and (min-aspect-ratio: 1/1) and (max-height: 760px) { .wm-hero { font-size: clamp(80px, 8vw, 118px); } .hero-line { display: none; } }

/* ---- meadow sections ---------------------------------------------------------------------------------------- */
.play { position: relative; padding: 36px 0 72px; background: linear-gradient(180deg, var(--grass) 0%, var(--grass-2) 40%, var(--grass-3) 100%); }
.play .sec-title { display: block; width: fit-content; margin: 0 auto 28px; text-align: center; }
.play-grid { display: grid; gap: 36px; justify-items: center; }
@media (min-width: 900px) { .play-grid { grid-template-columns: minmax(300px, 380px) 1fr; align-items: center; gap: 56px; } }
.phone { position: relative; margin: 0; width: min(78vw, 340px); }
.phone-body { position: relative; padding: 12px; border: 3px solid var(--ink); border-radius: 46px; background: linear-gradient(160deg, #FFFDF6, #F1E2C4);
  box-shadow: inset 0 3px 0 #fff, inset 0 -5px 0 var(--cream-edge), 0 6px 0 var(--ink), 0 24px 40px rgba(34, 70, 20, .35); transform: rotate(-2deg); }
.phone-body::before { content: ''; position: absolute; left: 50%; top: 20px; z-index: 2; width: 26%; height: 16px; margin-left: -13%; border-radius: 99px; background: var(--ink); }
.phone-screen { overflow: hidden; border: 2.5px solid var(--ink); border-radius: 34px; aspect-ratio: 432 / 768; background: #5FA845; }
.phone-video { width: 100%; height: 100%; object-fit: cover; }
.phone-toggle { position: absolute; right: -6px; bottom: 26px; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 16px 8px 12px;
  border: 2.5px solid var(--ink); border-radius: 16px; background: linear-gradient(180deg, var(--paper) 0 57%, var(--cream-inset) 58%); color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--cream-edge), 0 3px 0 var(--ink); font: 700 1rem/1 var(--font-display); cursor: pointer; }
.phone-toggle .glyph { width: 18px; height: 18px; fill: currentColor; }
.phone-toggle > span { display: inline-flex; align-items: center; gap: 6px; }
.phone-toggle[data-state='playing'] .pt-play, .phone-toggle[data-state='paused'] .pt-pause { display: none; }
.phone-toggle:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--cream-edge), 0 1px 0 var(--ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; width: 100%; max-width: 620px; counter-reset: s; }
.step { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; border: 3px solid var(--ink); border-radius: 26px;
  background: var(--cream); box-shadow: inset 0 3px 0 #fff, inset 0 -4px 0 var(--cream-edge), 0 5px 0 var(--ink), 0 14px 24px rgba(34, 70, 20, .28); }
.step-shot { overflow: hidden; border: 2.5px solid var(--ink); border-radius: 16px; aspect-ratio: 3 / 4; background: #5FA845; }
.step-shot img { width: 100%; height: 100%; object-fit: cover; }
.step-text { position: relative; }
.step-n { position: absolute; right: -4px; top: -6px; display: grid; place-items: center; width: 38px; height: 38px; border: 2.5px solid var(--ink); border-radius: 50%;
  background: var(--primary); font: 700 1.3rem/1 var(--font-display); box-shadow: inset 0 -3px 0 var(--primary-lip), 0 2px 0 var(--ink); }
.step h3 { font-size: 1.55rem; padding-right: 40px; }
.step p { margin-top: 4px; color: var(--ink); }
@media (min-width: 700px) { .step { grid-template-columns: 132px 1fr; padding: 14px 22px 14px 14px; } .step h3 { font-size: 1.8rem; } }
@media (min-width: 900px) { .step-2 { margin-left: 28px; } .step-3 { margin-left: 56px; } }

/* ---- Guardians ------------------------------------------------------------------------------------------------ */
.guardians { position: relative; padding-bottom: 80px; background: linear-gradient(180deg, #9ADB4A 0, #A7DE63 120px, #D9F2B5 360px, var(--sky-4) 100%); }
.g-band { position: relative; background: #8ACDF4; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.g-band-pic img { width: 100%; height: auto; aspect-ratio: 1200 / 450; object-fit: cover; }
@media (max-width: 699px) { .g-band-pic img { aspect-ratio: 16 / 9; object-position: 50% 70%; } }
.g-head { display: grid; gap: 12px; justify-items: center; text-align: center; margin: 36px auto 28px; }
.g-head .lede { margin-inline: auto; }
.g-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1000px) { .g-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.g-card { --rc: var(--r-common); --rc-hi: #E7EEF5; position: relative; display: flex; flex-direction: column; padding: 10px 12px 14px; border: 3px solid var(--ink); border-radius: 24px;
  background: linear-gradient(180deg, var(--rc-hi) 0%, #FFFDF6 58%); box-shadow: inset 0 0 0 4px var(--rc), inset 0 -6px 0 4px var(--rc), 0 5px 0 var(--ink), 0 14px 22px rgba(59, 42, 85, .16); }
.g-card.r-rare { --rc: var(--r-rare); --rc-hi: #C9E6FF; }
.g-card.r-epic { --rc: var(--r-epic); --rc-hi: #E9D2FF; }
.g-card.r-legendary { --rc: var(--r-legend); --rc-hi: #FFE7A8; }
.g-stage { position: relative; aspect-ratio: 1; margin: -4px -4px 0; }
.g-stage::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: 8%; height: 12%; border-radius: 50%; background: rgba(59, 42, 85, .1); }
.g-pic img { position: relative; width: 100%; height: auto; }
.g-name { font-size: 1.45rem; margin-top: 2px; }
.g-what { font: 800 .85rem/1.3 var(--font-body); color: var(--ink-2); }
.g-does { margin-top: 6px; font-size: .98rem; line-height: 1.4; }
.g-rarity { position: absolute; top: 10px; left: 10px; padding: 2px 10px 3px; border: 2px solid var(--ink); border-radius: 99px; background: var(--rc);
  font: 800 .8125rem/1.2 var(--font-body); color: var(--ink); }
.r-epic .g-rarity { background: #D9B3FF; } .r-rare .g-rarity { background: #9FD0FF; }
.g-grow { display: flex; gap: 2px; margin-top: 12px; padding: 3px; border: 2px solid var(--ink); border-radius: 14px; background: var(--cream-inset); }
.g-grow button { flex: 1 1 auto; min-width: max-content; min-height: 38px; padding: 2px 6px 4px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 800 .8125rem/1 var(--font-body); cursor: pointer; }
.g-grow button[aria-pressed='true'] { background: var(--go); color: var(--ink); box-shadow: inset 0 -3px 0 var(--go-lip), inset 0 0 0 2px var(--ink); }
.g-grow button:hover:not([aria-pressed='true']) { background: #fff; }
@media (prefers-reduced-motion: no-preference) { .g-pic.pop img { animation: pop .42s var(--ease-back); } }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08, .95); } 100% { transform: none; } }
@media (min-width: 760px) { .g-card { padding: 12px 16px 16px; } }
/* phones: one Guardian per row, picture on the left, so the stage switch keeps 13 px labels on one line */
@media (max-width: 559px) {
  .g-grid { grid-template-columns: 1fr; gap: 12px; }
  .g-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 12px; padding: 10px 12px 12px 8px; }
  .g-stage { grid-row: 1 / span 2; align-self: center; margin: 0; }
  .g-text { grid-column: 2; }
  .g-grow { grid-column: 2; align-self: end; margin-top: 10px; }
  .g-rarity { top: 8px; left: 8px; }
}
@media (max-width: 359px) { .g-card { grid-template-columns: 88px minmax(0, 1fr); column-gap: 8px; padding-inline: 6px 8px; } .g-grow button { padding-inline: 4px; } }

/* ---- the Grove ------------------------------------------------------------------------------------------------ */
.grove { padding: 80px 0; background: linear-gradient(180deg, var(--sky-4) 0, var(--peach) 220px, #FFF1D8 100%); }
.grove-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .grove-grid { grid-template-columns: 1fr minmax(0, 620px); gap: 56px; } }
.grove-copy { display: grid; gap: 16px; }
.buildings { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .buildings { grid-template-columns: 1fr 1fr; } }
.buildings li { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 2.5px solid var(--ink); border-radius: 20px; background: var(--paper);
  box-shadow: inset 0 -3px 0 var(--cream-edge), 0 3px 0 var(--ink); }
.buildings .gicon { width: 64px; height: 64px; flex: none; }
.buildings h3 { font-size: 1.2rem; }
.buildings p { font-size: .95rem; line-height: 1.35; }
.grove-art { margin: 0; }
.compare { position: relative; overflow: hidden; aspect-ratio: 3 / 2; touch-action: pan-y; border: 3px solid var(--ink); border-radius: 28px; background: #C8DC74;
  box-shadow: 0 6px 0 var(--ink), 0 22px 36px rgba(120, 80, 30, .28); }
.compare picture, .compare img { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare img { object-fit: cover; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.cmp-bloom { clip-path: inset(0 calc(100% - var(--pos, 62%)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 62%); width: 0; display: none; }
.has-compare .cmp-handle { display: block; }
.cmp-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; background: #FFF1A8; box-shadow: 0 0 0 2px var(--ink), 0 0 18px 6px rgba(255, 230, 107, .55); }
.cmp-handle::after { content: ''; position: absolute; top: 50%; left: -22px; width: 44px; height: 44px; margin-top: -22px; border: 2.5px solid var(--ink); border-radius: 50%;
  background: var(--primary) url("/assets/shapes/grip.b884636cd3.svg") center / 24px no-repeat; box-shadow: inset 0 -3px 0 var(--primary-lip), 0 3px 0 var(--ink); }
.cmp-label { display: flex; align-items: center; gap: 14px; margin-top: 16px; font: 700 1.05rem/1 var(--font-display); }
.cmp-label > span { flex: none; }
.cmp-range { flex: 1; min-width: 0; height: 36px; margin: 0; accent-color: var(--go-dark); background: none; cursor: pointer; }
/* the track is gold up to the thumb (the restored part, like the picture) and grey after it */
.cmp-range::-webkit-slider-runnable-track { height: 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: linear-gradient(90deg, #FFD447 0 var(--pos, 62%), #8A93A0 var(--pos, 62%) 100%); }
.cmp-range::-moz-range-track { height: 10px; border: 2.5px solid var(--ink); border-radius: 99px; background: linear-gradient(90deg, #FFD447 0 var(--pos, 62%), #8A93A0 var(--pos, 62%) 100%); }
.cmp-range { -webkit-appearance: none; appearance: none; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--go); box-shadow: inset 0 -3px 0 var(--go-lip); }
.cmp-range::-moz-range-thumb { width: 26px; height: 26px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--go); }

/* ---- lands (the one night band) ------------------------------------------------------------------------------- */
.lands { position: relative; padding: 84px 0 92px; color: #fff; text-align: center; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 110%, #7C4DB0 0%, var(--night-2) 45%, var(--night) 100%); }
.lands::before { content: ''; position: absolute; inset: 0; background: url("/assets/shapes/stars.0b292697f5.svg") 0 0 / 520px auto repeat; opacity: .7; pointer-events: none; }
.lands .wrap { position: relative; }
.lands .lede { margin: 16px auto 0; color: #F4EEFF; }
.lands .sec-title { --ow: .07em; }
.bosses { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 760px) { .bosses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.boss { padding: 16px 10px 18px; border: 3px solid var(--ink); border-radius: 26px; background: linear-gradient(180deg, #4A3C8C, #2E2466);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18), 0 5px 0 #120E2E; }
.boss .gicon { width: min(168px, 80%); height: auto; margin: 0 auto 8px; }
.boss h3 { font-size: 1.3rem; }
.boss p { font: 800 .9rem/1.3 var(--font-body); color: #E5DBFF; }
@media (prefers-reduced-motion: no-preference) {
  .boss.is-in .gicon { animation: bob .8s var(--ease-sine) 4 alternate both; }
  .boss.is-in:nth-child(2) .gicon { animation-delay: .15s; } .boss.is-in:nth-child(3) .gicon { animation-delay: .3s; } .boss.is-in:nth-child(4) .gicon { animation-delay: .45s; }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ---- fair and kind -------------------------------------------------------------------------------------------- */
.fair { padding: 84px 0 64px; background: linear-gradient(180deg, #C9F0A8, var(--cream) 70%); }
.fair .sec-title { display: block; width: fit-content; margin: 0 auto 32px; }
.fair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .fair-list { grid-template-columns: 1fr 1fr; gap: 18px; } }
.fair-list li { display: flex; gap: 16px; align-items: center; padding: 14px 20px 14px 14px; border: 3px solid var(--ink); border-radius: 24px; background: var(--paper);
  box-shadow: inset 0 -4px 0 var(--cream-edge), 0 4px 0 var(--ink); }
.fair-list .gicon { width: 64px; height: 64px; flex: none; }
.fair-list h3 { font-size: 1.35rem; }
.fair-list p { margin-top: 2px; font-size: 1rem; line-height: 1.4; }

/* ---- FAQ ------------------------------------------------------------------------------------------------------ */
.faq { padding: 56px 0 80px; background: var(--cream); }
.sec-title-dark { --ow: .07em; }
.faq .sec-title { display: block; width: fit-content; margin: 0 auto 28px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 3px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: inset 0 -4px 0 var(--cream-edge), 0 4px 0 var(--ink); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 16px 14px 20px; cursor: pointer; list-style: none;
  font: 600 1.25rem/1.2 var(--font-display); border-radius: 19px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--primary);
  box-shadow: inset 0 -3px 0 var(--primary-lip); transition: transform .26s var(--ease-back); }
.faq-plus .glyph { width: 18px; height: 18px; stroke-width: 3; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-a { padding: 0 20px 18px; }
.faq-a p + p { margin-top: 10px; }

/* ---- finale and footer ----------------------------------------------------------------------------------------- */
.finale { padding: 40px 0 70px; background: linear-gradient(180deg, var(--cream), var(--sky-4) 30%, var(--sky-3)); }
.finale-inner { display: grid; justify-items: center; text-align: center; gap: 8px; padding-bottom: 12px; }
.finale-pim { width: 180px; }
.finale-pim img { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .finale-pim.is-in img { animation: hop .5s var(--ease-sine) 6 alternate both; transform-origin: 50% 92%; } }
@keyframes hop { 0% { transform: translateY(0) scale(1.03, .97); } 100% { transform: translateY(-10px) scale(.98, 1.02); } }
.finale-h { font-size: clamp(2rem, 6vw, 3rem); }
.finale p { margin: 6px 0 18px; font-size: 1.15rem; }
@media (min-width: 760px) { .finale-inner { grid-template-columns: auto auto; justify-content: center; text-align: left; gap: 28px; } .finale .stores { justify-content: flex-start; } }

.foot { position: relative; color: #fff; background: var(--meadow-deep); padding-top: 40px; }
.foot-hills { position: absolute; left: 0; right: 0; top: -60px; height: 62px; background: url("/assets/shapes/hills.684f8a1765.svg") center bottom / 100% 100% no-repeat; pointer-events: none; }
.finale + .foot { margin-top: 60px; }
.foot-inner { width: min(100% - 2 * var(--side), var(--wrap)); margin: 0 auto; display: grid; gap: 36px; padding-bottom: 36px; }
@media (min-width: 900px) { .foot-inner { grid-template-columns: 1.1fr 1.6fr; } }
.foot-brand { display: grid; gap: 12px; justify-items: start; }
.foot-logo { text-decoration: none; }
.foot-tag { font: 600 1.2rem/1.3 var(--font-display); }
.foot .stores { justify-content: flex-start; color: var(--ink); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 600px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-h { font-size: 1.2rem; margin-bottom: 8px; color: #D7F5B3; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-cols a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 0; color: #fff; text-decoration-color: rgba(255, 255, 255, .5); overflow-wrap: break-word; hyphens: manual; }
.foot-cols a:hover { text-decoration-color: #fff; }
.foot :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); }
.glyph-s { width: 18px; height: 18px; }
.foot-base a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.foot-base { border-top: 2px solid rgba(255, 255, 255, .18); padding: 18px var(--side) calc(22px + env(safe-area-inset-bottom)); text-align: center; font-size: .9rem; color: #E6F6D6;
  display: grid; gap: 4px; }

/* ---- documents (legal and help) -------------------------------------------------------------------------------- */
.doc-page main { position: relative; }
.doc-wrap { position: relative; padding: 96px var(--side) 72px; background: linear-gradient(180deg, var(--sky) 0, var(--sky-3) 280px, #CFEFA7 560px, var(--grass) 100%); }
.doc-sky { position: absolute; left: 0; right: 0; top: 0; height: 300px; background: url("/assets/shapes/cloud-a.ad62dfbc51.svg") 6% 64px / 240px auto no-repeat, url("/assets/shapes/cloud-b.74292a564d.svg") 94% 26px / 180px auto no-repeat; opacity: .9; pointer-events: none; }
.doc { position: relative; max-width: 820px; margin: 0 auto; padding: 28px 22px 36px; border: 3px solid var(--ink); border-radius: 30px; background: var(--paper);
  box-shadow: inset 0 3px 0 #fff, inset 0 -5px 0 var(--cream-edge), 0 6px 0 var(--ink), 0 24px 40px rgba(34, 70, 20, .25); font-weight: 600; font-size: 1.05rem; line-height: 1.62; }
@media (min-width: 700px) { .doc { padding: 40px 56px 52px; } }
.doc-head { display: grid; gap: 10px; margin-bottom: 20px; }
.doc-title { font-size: clamp(1.9rem, 7vw, 3.1rem); hyphens: manual; overflow-wrap: break-word; }
.doc-intro { font-size: 1.15rem; line-height: 1.55; font-weight: 700; }
.doc-intro p + p { margin-top: 10px; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--ink-2); font-weight: 800; font-size: .95rem; }
.doc-lang { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 7px 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--cream);
  color: var(--ink); text-decoration: none; box-shadow: 0 2px 0 var(--ink); }
.doc-lang:hover { background: var(--primary-hi); }
.doc-toc { margin: 8px 0 12px; padding: 16px 20px; border: 2.5px solid var(--ink); border-radius: 20px; background: var(--cream); }
.doc-toc-h { font-size: 1.15rem; margin-bottom: 6px; }
.doc-toc ol { margin: 0; padding-left: 1.4em; columns: 2 16em; column-gap: 28px; }
.doc-toc li { break-inside: avoid; padding: 2px 0; }
.doc-sec { padding-top: 26px; }
.doc-sec h2 { font-size: 1.6rem; margin-bottom: 10px; scroll-margin-top: 16px; }
.doc-sec h3 { font-size: 1.22rem; margin: 20px 0 6px; }
.doc-sec p, .doc-sec ul, .doc-sec ol, .doc-sec dl, .doc-sec address { margin: 0 0 12px; max-width: 68ch; }
.doc-sec ul, .doc-sec ol { padding-left: 1.3em; }
.doc-sec li { margin-bottom: 6px; }
.doc-sec li::marker { color: var(--ink-2); }
.doc-sec address { font-style: normal; }
.doc-sec strong { font-weight: 900; }
.doc-sec dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.doc-sec dt { font-weight: 900; }
.doc-sec dd { margin: 0; }
@media (max-width: 520px) { .doc-sec dl { grid-template-columns: 1fr; gap: 0 0; } .doc-sec dd { margin-bottom: 8px; } }
.doc-sec a { overflow-wrap: anywhere; }
.note { padding: 14px 18px; border: 2.5px solid var(--ink); border-radius: 18px; background: #EAF6FF; }
.table-wrap { overflow-x: auto; margin: 0 0 14px; border: 2.5px solid var(--ink); border-radius: 18px; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.doc th, .doc td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--cream-edge); }
.doc th { background: var(--cream); font-weight: 900; }
.doc tr:last-child td { border-bottom: 0; }
.steps-doc { counter-reset: d; list-style: none; padding: 0 !important; }
.steps-doc li { position: relative; padding-left: 48px; min-height: 36px; margin-bottom: 12px; }
.steps-doc li::before { counter-increment: d; content: counter(d); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 2.5px solid var(--ink); border-radius: 50%; background: var(--primary); font: 700 1.1rem/1 var(--font-display); box-shadow: inset 0 -3px 0 var(--primary-lip); }
.doc-art { width: 132px; margin: -6px 0 0 -6px; }
mark.todo { background: #FFE0E0; color: #8A1C1C; padding: 0 4px; border-radius: 4px; border: 1.5px dashed #C22E2E; }
.draft-banner { position: relative; z-index: 60; padding: 8px 16px; background: #C22E2E; color: #fff; text-align: center; font: 800 .95rem/1.3 var(--font-body); }

/* press kit */
.press-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-width: none !important; }
.press-grid li { margin: 0; padding: 10px; border: 2.5px solid var(--ink); border-radius: 18px; background: var(--cream); display: grid; gap: 8px; align-content: start; }
.press-grid img { width: 100%; height: auto; border-radius: 10px; border: 2px solid var(--ink); background: #8ACDF4; }
.press-grid .dl { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; }
.press-grid .dl .glyph { width: 18px; height: 18px; }
.press-grid small { color: var(--ink-2); font-weight: 800; }

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 96px var(--side) 64px; background: linear-gradient(180deg, var(--gloom-top), var(--gloom-bottom) 60%, var(--grass)); }
.lost .glum-pic { width: 200px; margin: 0 auto 8px; }
.lost h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.lost p { margin: 10px auto 24px; max-width: 26em; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media print { .top, .foot, .skip, .doc-sky { display: none; } .doc-wrap { background: none; padding: 0; } .doc { box-shadow: none; border: 0; } }

/* the wave's first frame before the script takes over (generated from site/src/art/art.json) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero { --bloom: .74; }
  .valley .v-bloom { clip-path: ellipse(57.61% 21.44% at 23.00% 78.20%); }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .valley .v-bloom { clip-path: ellipse(34.27% 24.68% at 31.04% 71.63%); }
}