/* Hallmark · shape: Map / Diagram · genre: playful · theme: Hum (deal 1/3, seed fizzmini-candy-jar-tiny-59f4·7d437b13·2026-10-26·r0) · job: try · draw: 6eb34a
 * hero: Stage (swapped from Corridor: the jar is the signature and needs the first screen) · nav: search-led bar · footer: letter close · imagery: the product (game icons) · signature: the candy jar, every candy a game that pops open
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a portal page has little to argue; the jar makes the case that a game should be as quick as taking a sweet */
@import url("./tokens.css?v=20261027103229");
@import url("./base.css?v=20261027103229");

@font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .2' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* candy roles: pear = the action, blue = links, coral = the one loud moment, mint = growth (Hum) */
  --candy-pear: var(--color-accent); --candy-pear-deep: var(--color-accent-deep);
  --candy-blue: oklch(72% 0.12 245); --candy-blue-deep: var(--color-accent-2);
  --candy-coral: var(--color-accent-3); --candy-coral-deep: oklch(56% 0.19 24);
  --candy-mint: var(--color-mint); --candy-mint-deep: var(--color-mint-deep);
  --candy-kraft: var(--color-sand); --candy-kraft-deep: var(--color-kraft);
  --jar-glass: oklch(97% 0.02 220 / 0.55); --jar-soda: oklch(90% 0.06 200 / 0.45); --jar-line: oklch(20% 0.014 255 / 0.55); --jar-shine: var(--color-fringe);
  --jar-lid: var(--color-kraft); --jar-lid-line: oklch(54% 0.08 60); --jar-rim: var(--color-paper-3);
  --mark-wrap: var(--color-accent-3); --mark-body: var(--color-accent); --mark-shine: var(--color-fringe);
  --shade-1: oklch(20% 0.014 255 / 0.08); --shade-2: oklch(20% 0.014 255 / 0.14); --shade-3: oklch(20% 0.014 255 / 0.35); --color-paper-dim: oklch(84% 0.012 95);
  --tear-both: polygon(0 6px, 6% 1px, 13% 7px, 20% 2px, 27% 8px, 35% 2px, 42% 6px, 50% 1px, 57% 7px, 64% 2px, 72% 8px, 79% 3px, 86% 7px, 93% 1px, 100% 5px, 100% calc(100% - 4px), 94% calc(100% - 9px), 87% calc(100% - 2px), 80% calc(100% - 8px), 72% calc(100% - 1px), 65% calc(100% - 7px), 57% calc(100% - 2px), 50% calc(100% - 8px), 42% calc(100% - 1px), 35% calc(100% - 6px), 27% calc(100% - 1px), 19% calc(100% - 8px), 12% calc(100% - 2px), 5% calc(100% - 7px), 0 calc(100% - 2px));
  --tear: polygon(0 6px, 4% 2px, 9% 7px, 15% 1px, 21% 6px, 28% 2px, 34% 8px, 41% 3px, 47% 7px, 54% 1px, 60% 6px, 67% 2px, 73% 7px, 80% 2px, 86% 6px, 93% 1px, 100% 5px, 100% 100%, 0 100%);
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: 1.0625rem; }
b { font-weight: 600; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.link { color: var(--color-accent-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.link:hover { text-decoration-thickness: 2px; }

/* card-stock buttons (Hum controls) */
.btn { --edge: 5px; display: inline-flex; align-items: center; gap: var(--space-xs); border: 0; border-radius: var(--radius-stock); min-height: 54px; padding: 0 var(--space-lg); font-weight: 600; color: var(--color-ink); text-decoration: none; cursor: pointer; background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn svg { width: 22px; height: 22px; }
.btn--primary { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; translate: none; }
.btn--sm { min-height: 46px; padding: 0 var(--space-md); }

/* nav: search-led bar */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--grain), var(--fibre), var(--color-paper); }
.nav::after { content: ""; position: absolute; inset: auto 0 -8px; height: 9px; background: var(--color-paper); clip-path: polygon(0 0, 100% 0, 100% 30%, 92% 80%, 84% 35%, 75% 90%, 66% 30%, 57% 75%, 48% 25%, 39% 85%, 30% 30%, 21% 80%, 12% 35%, 4% 70%, 0 30%); filter: drop-shadow(0 2px 1px var(--shade-1)); }
.nav__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.wordmark b { color: var(--color-accent-3); }
.wordmark__mark { width: 36px; height: 36px; }
.search { position: relative; justify-self: center; width: min(100%, 420px); }
.search input { width: 100%; height: 48px; padding: 0 calc(var(--space-xl) + var(--space-sm)) 0 calc(var(--space-xl) + var(--space-2xs)); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink); font-weight: 500; }
.search input::placeholder { color: var(--color-muted); }
.search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.search__icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; color: var(--color-muted); pointer-events: none; }
.search__key { position: absolute; right: 12px; top: 50%; translate: 0 -50%; min-width: 26px; padding: var(--space-3xs) var(--space-xs); border-radius: 8px; background: var(--color-paper-2); box-shadow: inset 0 -2px 0 var(--color-edge); color: var(--color-muted); font: 600 var(--text-sm) var(--font-body); text-align: center; }
.sound[aria-pressed="true"] { background: var(--grain), var(--fibre), var(--color-ink); color: var(--color-paper); box-shadow: 0 var(--edge) 0 0 var(--color-ink-2); }

/* hero: Stage */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - 76px - var(--space-xl) - var(--space-2xl)); }
.hero__text { position: relative; display: grid; gap: var(--space-lg); align-content: center; }
.hero h1 { max-width: none; }
.h1-line { display: block; white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); padding-top: var(--space-xs); }

/* the ticket: what a picked candy shows */
.ticket { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); margin-top: var(--space-sm); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); animation: ticket-in var(--dur-long) var(--ease-snap); }
.ticket__icon { width: 96px; height: 96px; border-radius: 22px; }
.ticket__body { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.ticket__name { font-size: var(--text-title); max-width: none; padding-right: var(--space-xl); }
.ticket__kind { color: var(--color-muted); font-size: var(--text-sm); }
.ticket__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.ticket__close { position: absolute; top: var(--space-sm); right: var(--space-sm); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-snap); }
.ticket__close:hover { background: var(--color-paper-3); }
.ticket__close svg { width: 20px; height: 20px; }
@keyframes ticket-in { from { opacity: 0; translate: 0 12px; } }

/* the jar (the map: every candy is a node, the shelf below is its legend) */
.jar { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 720; justify-self: center; filter: drop-shadow(6px 18px 18px var(--shade-2)); }
.jar__glass, .jar__shine { position: absolute; inset: 0; width: 100%; height: 100%; }
.jar__shine { pointer-events: none; }
.jar__inside { position: absolute; left: 11%; right: 11%; top: 31%; bottom: 3.5%; border-radius: 0 0 48px 48px; }
.jar.is-shaking { animation: jar-shake 640ms var(--ease-in-out); }
@keyframes jar-shake { 0%, 100% { rotate: 0deg; } 15% { rotate: -5deg; } 35% { rotate: 4deg; } 55% { rotate: -3deg; } 75% { rotate: 2deg; } }

.sugar, .candy { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r, 0deg); }
.sugar { --c: var(--candy-pear); --d: var(--candy-pear-deep); width: calc(64px * var(--s, 1)); height: calc(40px * var(--s, 1)); border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--color-fringe) 0 9%, transparent 10%), repeating-linear-gradient(115deg, var(--c) 0 9px, var(--d) 9px 13px); box-shadow: inset -3px -4px 0 color-mix(in oklab, var(--d) 70%, transparent); }
.sugar--blue { --c: var(--candy-blue); --d: var(--candy-blue-deep); }
.sugar--coral { --c: var(--candy-coral); --d: var(--candy-coral-deep); }
.sugar--mint { --c: var(--candy-mint); --d: var(--candy-mint-deep); }
.sugar--kraft { --c: var(--candy-kraft); --d: var(--candy-kraft-deep); }

.candy { --c: var(--candy-pear); --d: var(--candy-pear-deep); z-index: var(--z-raised); display: grid; place-items: center; width: clamp(78px, 8.4vw, 118px); aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 6px var(--c), 0 0 0 9px var(--d), 3px 10px 14px -4px var(--shade-3); text-decoration: none; color: var(--color-ink); cursor: pointer; transition: rotate var(--dur-short) var(--ease-snap), translate var(--dur-short) var(--ease-snap); }
.candy::before, .candy::after { content: ""; position: absolute; top: 50%; width: 46%; height: 62%; background: var(--grain), var(--c); translate: 0 -50%; z-index: -1; }
.candy::before { right: 88%; clip-path: polygon(100% 50%, 0 0, 14% 50%, 0 100%); }
.candy::after { left: 88%; clip-path: polygon(0 50%, 100% 0, 86% 50%, 100% 100%); }
.candy img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.candy--blue { --c: var(--candy-blue); --d: var(--candy-blue-deep); }
.candy--coral { --c: var(--candy-coral); --d: var(--candy-coral-deep); }
.candy--mint { --c: var(--candy-mint); --d: var(--candy-mint-deep); }
.candy:hover, .candy:focus-visible { translate: -50% -56%; rotate: 0deg; }
.candy:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 12px; }
.candy.is-picked { z-index: var(--z-dropdown); rotate: 0deg; animation: candy-pop 700ms var(--ease-spring); }
@keyframes candy-pop { 0% { translate: -50% -50%; } 40% { translate: -50% -120%; rotate: 20deg; } 100% { translate: -50% -56%; rotate: 0deg; } }
.candy__tag { position: absolute; top: calc(100% + 16px); left: 50%; translate: -50% 0; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity var(--dur-short) var(--ease-snap); pointer-events: none; }
.candy:hover .candy__tag, .candy:focus-visible .candy__tag, .candy.is-picked .candy__tag { opacity: 1; }
.candy.is-dim { opacity: 0.25; }

/* float: everything bobs in the soda */
.js .sugar, .js .candy:not(.is-picked) { animation: bob var(--bob, 4.2s) var(--ease-in-out) var(--bob-delay, 0s) infinite alternate; }
@keyframes bob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
.jar.is-paused .sugar, .jar.is-paused .candy { animation-play-state: paused; }

/* fizz: bubbles rising through the glass */
.fizz { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fizz i { position: absolute; bottom: -12px; left: var(--x); width: var(--w); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--jar-shine); opacity: 0; animation: rise var(--t) var(--ease-in) var(--delay) infinite; }
@keyframes rise { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 0.85; } 100% { opacity: 0; translate: var(--drift) -460px; } }
.jar.is-paused .fizz i { animation-play-state: paused; }

/* drop-in: the page's one reveal; the end state is the default, so no script means a full jar */
.js .jar.is-filling .candy, .js .jar.is-filling .sugar { animation: drop var(--dur-long) var(--ease-snap) both; animation-delay: var(--drop, 0ms); }
@keyframes drop { from { opacity: 0; translate: -50% -340%; } }

/* games: the legend */
.games { position: relative; padding-block: var(--section-gap-s) var(--section-gap); background: var(--grain), var(--fibre), var(--color-paper-2); clip-path: var(--tear-both); }
.games__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.games__note { color: var(--color-muted); }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.wrapper { --c: var(--candy-pear); display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card), inset 0 -6px 0 var(--c); scroll-margin-top: 120px; }
.wrapper:nth-child(even) { margin-left: var(--space-3xl); }
.wrapper:nth-child(odd) { margin-right: var(--space-3xl); }
.wrapper--blue { --c: var(--candy-blue); } .wrapper--coral { --c: var(--candy-coral); } .wrapper--mint { --c: var(--candy-mint); }
.wrapper__icon { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 0 0 5px var(--c); }
.wrapper__text { display: grid; gap: var(--space-2xs); }
.wrapper__text h3 { font-size: var(--text-2xl); }
.wrapper__kind { color: var(--color-muted); font-size: var(--text-sm); }
.wrapper__actions { display: grid; justify-items: end; gap: var(--space-sm); }
.wrapper.is-hidden { display: none; }
.soon { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); }
.empty { margin-top: var(--space-xl); font-size: var(--text-lead); }

/* where they play */
.where { padding-block: var(--section-gap-s); }
.where__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.where__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.stock { display: grid; gap: var(--space-xs); align-content: start; min-height: 196px; padding: var(--space-lg); border-radius: var(--radius-stock); background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 5px 0 0 var(--color-edge); }
.stock h3 { font-size: var(--text-xl); }
.stock__state { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.stock__state--live { color: var(--color-mint-deep); }
.stock--soon { background: var(--grain), var(--fibre), var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }

/* footer: letter close on a torn ink sheet */
.letter { margin-top: var(--space-2xl); padding-block: var(--space-3xl) var(--space-2xl); background: var(--grain), var(--color-ink); color: var(--color-paper); clip-path: var(--tear); }
.letter__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.letter__body { font-size: var(--text-xl); line-height: 1.4; max-width: 45ch; }
.letter__body a { color: var(--color-accent); }
.letter__sign { margin-top: var(--space-lg); color: var(--color-paper-dim); }
.letter__links { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-lg); }
.letter__links a { color: var(--color-paper); font-weight: 600; text-underline-offset: 0.25em; }
.letter a:focus-visible { outline-color: var(--color-accent); }

@media (max-width: 60rem) {
  .nav__row { grid-template-columns: auto auto; }
  .search { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-bottom: var(--space-sm); }
  .sound { justify-self: end; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .jar { width: min(100%, 440px); }
  .games__head, .where__grid, .letter__grid { grid-template-columns: minmax(0, 1fr); }
  .wrapper, .wrapper:nth-child(even), .wrapper:nth-child(odd) { margin-inline: 0; }
  .where__list { grid-template-columns: minmax(0, 1fr); }
  .stock { min-height: 0; }
  .letter__links { justify-content: start; }
}
@media (max-width: 40rem) {
  .sound span { display: none; }
  .sound { padding: 0 var(--space-md); }
  .wrapper { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); }
  .wrapper__icon { width: 84px; height: 84px; border-radius: 22px; }
  .wrapper__actions { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
  .ticket { grid-template-columns: 64px minmax(0, 1fr); }
  .ticket__icon { width: 64px; height: 64px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fizz { display: none; }
  .candy:hover, .candy:focus-visible { translate: -50% -50%; }
}
@media (max-width: 25rem) { .h1-line { white-space: normal; } }