/* Glimmerdragon Games — studio site. Palette "Sunny Isle": the game's G1 colours (sky, lagoon,
   candy pink, violet, leaf green, lantern gold, deep ink, cloud) in daylight, with the mark's
   dragon gold and crystal. Type: Cormorant Garamond (studio display), Fredoka (labels, shared with
   the game site), Nunito (body, shared). Self-hosted, OFL. One deferred decorative script. */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-wght.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --ink: #1A1433;
  --ink-2: #2A2058;
  --violet: #6B46C9;
  --violet-deep: #4B2FA0;
  --sky: #3EC6F2;
  --lagoon: #14A8D8;
  --pink: #E85AD0;
  --green: #6CC24A;
  --gold: #FFC94A;
  --gold-pale: #FFE7A3;
  --cloud: #FFF8EC;
  --surf: #D6F5FC;
  --muted: #4E4570;
  --dusk: #FFD3BF;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --round: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap: 76rem;
  --focus: var(--violet);
  --lift: 0 .4rem 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--cloud); color: var(--ink); font-family: var(--body); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.6; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--violet-deep); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.05; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: .3rem; }
::selection { background: var(--gold); color: var(--ink); }
.nowrap { white-space: nowrap; }
.i { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.18em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* @shared chrome: tools/build/chrome.css (edit there, then rebuild both sites) */
/* The shared header + footer of glimmerdragon.com and undyingarena.glimmerdragon.com.
   Literal colours (ink #1A1433, night #110D24, gold #FFC94A, cloud #FFF8EC) so both sites
   render it identically whatever their own tokens are. Fonts: Fredoka (both sites ship it). */
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: #FFC94A; color: #1A1433; font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 600;
  padding: .75rem 1.1rem; border-radius: .6rem; border: 2px solid #1A1433; text-decoration: none; transition: top .15s;
}
.skip:focus { top: 1rem; }
.masthead, .footer { --focus: #FFC94A; }
.masthead :focus-visible, .footer :focus-visible { outline: 3px solid #FFC94A; outline-offset: 3px; border-radius: .3rem; }

/* header: sticky ink bar, gold hairline, brand left, nav right; Menu (<details>) below 70rem */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 20, 51, .96);
  border-bottom: 1px solid rgba(255, 201, 74, .35);
  color: #FFF8EC;
}
.masthead__in { width: min(100% - 2 * clamp(1rem, 4vw, 2.5rem), 90rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: #FFF8EC; text-decoration: none; }
.brand:hover { color: #FFC94A; }
.brand__icon { display: block; flex: none; width: 2.6rem; height: 2.6rem; border-radius: .7rem; overflow: hidden; box-shadow: 0 0 0 2px #FFC94A; }
.brand__icon img, .brand__icon svg { display: block; width: 100%; height: 100%; }
.brand__name { font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 24rem) { .brand { gap: .55rem; } .brand__name { font-size: 1.04rem; letter-spacing: .02em; white-space: nowrap; } }
@media (max-width: 26rem) {
  /* a long brand keeps to one line on small phones; the hidden word still names the link */
  .brand__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; align-items: center; }
.nav__list > li { position: relative; }
.nav__list a {
  display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem .7rem; border-radius: .6rem;
  color: #FFF8EC; text-decoration: none; font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 500; font-size: 1rem; word-spacing: .12em;
}
.nav__list a:hover, .nav__list a[aria-current="page"], .nav__list a.is-here { color: #FFC94A; }
.nav__list a[aria-current="page"], .nav__list a.is-here { box-shadow: inset 0 -2px 0 #FFC94A; border-radius: 0; }
.has-sub > a::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); margin-left: .15rem; }
.sub {
  position: absolute; top: calc(100% - .1rem); left: -.5rem; min-width: 15rem; list-style: none; margin: 0; padding: .5rem;
  background: #251C49; border: 1px solid rgba(255, 201, 74, .45); border-radius: .9rem; box-shadow: 0 1rem 2.5rem -1rem rgba(26, 20, 51, .6);
  opacity: 0; visibility: hidden; transform: translateY(-.3rem); transition: opacity .15s, transform .15s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { border-radius: .55rem; }
.sub a:hover { background: rgba(255, 255, 255, .06); }
.nav-num {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #FFC94A; color: #1A1433; font-weight: 700; font-size: .85rem; margin-right: .2rem;
}
/* the sister-site link: always last, a plain nav item led by the other site's small mark */
.nav__cross { margin-left: .35rem; }
.nav__list .nav__cross a { gap: .55rem; }
.nav__cross-icon { display: block; flex: none; width: 1.6rem; height: 1.6rem; border-radius: .45rem; overflow: hidden; }
.nav__cross-icon img, .nav__cross-icon svg { display: block; width: 100%; height: 100%; }

/* compact menu (below 70rem), zero JS: "Menu" links to #menu, which shows the panel via :target.
   Following any link in it (another page or an in-page anchor) makes that destination the target,
   so the panel closes by itself and never covers the page you went to. "Close" targets an empty
   anchor inside the sticky bar, so nothing scrolls. */
.menu { position: static; }
/* the two targets sit fixed mid-screen, so following them never scrolls the page */
.menu__anchor { position: fixed; top: 50vh; left: 0; width: 1px; height: 1px; scroll-margin: 0; pointer-events: none; }
.menu__btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; min-width: 44px;
  padding: .45rem .9rem; border-radius: 999px; border: 2px solid #FFC94A; color: #FFC94A; background: #1A1433; text-decoration: none;
  font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 600; font-size: 1rem;
}
.menu__btn:hover { color: #1A1433; background: #FFC94A; }
.menu__btn .i { width: 1.15em; height: 1.15em; fill: currentColor; }
.menu__panel {
  position: fixed; left: 0; right: 0; top: calc(4.25rem + 1px); z-index: 2;
  background: #1A1433; border-bottom: 2px solid #FFC94A; box-shadow: 0 1.5rem 2rem -1rem rgba(0, 0, 0, .6);
  max-height: calc(100svh - 4.25rem - 1px); overflow-y: auto; visibility: hidden;
}
#menu:target ~ .menu__panel { visibility: visible; }
/* Close sits exactly over the Menu button in the bar */
.menu__close { position: fixed; top: calc((4.25rem - 44px) / 2); right: clamp(1rem, 4vw, 2.5rem); z-index: 3; visibility: hidden; }
#menu:target ~ .menu__panel .menu__close { visibility: visible; }
.menu__panel .menu__close:hover { color: #1A1433; }
.menu__panel ul { list-style: none; margin: 0; padding: .5rem clamp(1rem, 4vw, 2.5rem) 1.25rem; }
.menu__panel li a {
  display: flex; align-items: center; gap: .6rem; min-height: 48px; color: #FFF8EC; text-decoration: none;
  font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 500; font-size: 1.15rem; word-spacing: .12em;
  border-bottom: 1px solid rgba(255, 248, 236, .1);
}
.menu__panel a:hover, .menu__panel a[aria-current="page"] { color: #FFC94A; }
.menu-lands { padding: .25rem 0 .5rem 1rem !important; }
.menu-lands a { font-size: 1.05rem !important; }
.menu__cross a { gap: .7rem !important; border-bottom: 0 !important; }
@media (min-width: 70rem) {
  .nav { display: block; }
  .menu { display: none; }
}
@media (min-width: 70rem) and (max-width: 87.99rem) {
  /* the full game nav needs the room: the sister link keeps its mark and names itself to assistive tech */
  .nav__list--long .nav__cross-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* footer: night panel with a scalloped top edge; brand block left, two link columns right */
.footer { position: relative; background: #110D24; color: #CFC8E8; padding: 3.5rem 0 2.5rem; font-size: .95rem; line-height: 1.6; }
.footer__edge { position: absolute; top: -19px; left: 0; right: 0; height: 20px; background: #110D24; -webkit-mask: url("../svg/scallop.svg") repeat-x left bottom / 48px 20px; mask: url("../svg/scallop.svg") repeat-x left bottom / 48px 20px; }
.footer p { margin: 0 0 .6rem; }
.footer a { color: #FFC94A; }
.footer a:hover { color: #FFE7A3; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 1.4fr 1fr; } }
.footer__title { font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; color: #FFF8EC; margin-bottom: .3rem !important; }
.footer__status { display: flex; gap: .5rem; align-items: center; font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; color: #FFE7A3; }
.footer__status .i { color: #FFC94A; }
.footer__studio { margin: 1rem 0 0 !important; }
.footer__studio a { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 600; color: #FFF8EC; text-decoration: none; }
.footer__studio a:hover { color: #FFC94A; text-decoration: underline; }
.footer__studio img, .footer__studio picture { display: block; width: 2.6rem; height: 2.6rem; border-radius: .7rem; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.footer__nav .footer__h { grid-row: 1; font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .08em; line-height: 1.2; color: #FFF8EC; margin: 0 0 .5rem; }
.footer__nav ul { grid-row: 2; list-style: none; margin: 0; padding: 0; }
.footer__nav li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-right: .5rem; color: #CFC8E8; text-decoration: none; }
.footer__nav li + li { margin-top: .1rem; }
.footer__nav li a:hover { color: #FFC94A; text-decoration: underline; }
.footer__legal { grid-column: 1 / -1; margin: 0 !important; padding-top: 1.5rem; border-top: 1px solid rgba(255, 201, 74, .2); font-size: .85rem; }
/* anchored headings keep their kicker (the line above them) clear of the sticky bar */
h1[id], h2[id] { scroll-margin-top: 2.75rem; }
@media print { .masthead, .menu, .footer__edge { display: none !important; } }
/* @end shared chrome */

/* ---------------------------------------------------------------- shared type + controls */
.eyebrow { font-family: var(--round); font-weight: 600; font-size: .95rem; letter-spacing: .06em; color: var(--violet); margin: 0 0 .6rem; display: flex; align-items: center; gap: .55rem; }
.eyebrow::before { content: ""; width: .62rem; height: .62rem; flex: none; background: var(--pink); transform: rotate(45deg); border-radius: .12rem; }
.h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.1rem); color: var(--ink-2); letter-spacing: -.005em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px;
  font-family: var(--round); font-weight: 600; font-size: 1.06rem; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; border: 2px solid var(--ink); color: var(--ink); box-shadow: 0 .28rem 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 .4rem 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 .1rem 0 var(--ink); }
.btn--gold { background: var(--gold); }
.btn--gold:hover { background: #FFD56E; }
.btn--cloud { background: var(--cloud); }
.btn--cloud:hover { background: #fff; }
.btn--ink { background: var(--ink); color: var(--cloud); box-shadow: 0 .28rem 0 var(--violet); }
.btn--ink:hover { color: #fff; background: var(--ink-2); box-shadow: 0 .4rem 0 var(--violet); }

/* ---------------------------------------------------------------- hero: the bright isle */
.isle {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #56C6F1 0%, #86D8F6 26%, #BFEBFA 50%, #FFEDDC 74%, #FFE2D2 100%);
}
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky__sun {
  position: absolute; top: -12rem; right: -9rem; width: 34rem; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFBE6 0 16%, rgba(255, 243, 190, .85) 28%, rgba(255, 236, 170, .35) 52%, rgba(255, 236, 170, 0));
}
.sky__sun::before {
  content: ""; position: absolute; inset: -12%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .26) 0 5deg, rgba(255, 255, 255, 0) 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 24%, transparent 72%);
  mask: radial-gradient(closest-side, #000 24%, transparent 72%);
}
.sky__clouds { position: absolute; inset: 0; translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -4px); transition: translate .8s cubic-bezier(.2, .7, .2, 1); }
.cloud { position: absolute; height: auto; filter: drop-shadow(0 .5rem .8rem rgba(70, 140, 200, .16)); }
.cloud--1 { width: clamp(8rem, 13vw, 13rem); top: 1%; left: 36%; }
.cloud--2 { width: clamp(7rem, 12vw, 12rem); top: 9%; left: 52%; }
.cloud--3 { width: clamp(8rem, 15vw, 16rem); top: 30%; left: 79%; }
.cloud--4 { width: clamp(5rem, 9vw, 9rem); top: 40%; left: 56%; opacity: .92; }
.glint { position: absolute; width: var(--s); height: var(--s); color: #fff; opacity: .95; filter: drop-shadow(0 0 .25rem rgba(255, 236, 160, .95)); }
.glint__i { width: 100%; height: 100%; }

.isle__in { position: relative; z-index: 3; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding: 2.6rem 0 0; text-align: center; }
.isle__text { max-width: 36rem; margin-inline: auto; }
.isle__where { display: inline-block; font-family: var(--round); font-weight: 600; font-size: .9rem; letter-spacing: .04em; color: var(--ink-2); background: rgba(255, 255, 255, .62); padding: .3rem .85rem; border-radius: 999px; margin-bottom: 1rem; }
.isle__name { margin: 0 0 1.1rem; }
.isle__word {
  display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(3.1rem, 1.3rem + 7.4vw, 7.6rem); line-height: .92; letter-spacing: -.012em;
  color: var(--ink-2); text-shadow: 0 .035em 0 rgba(255, 255, 255, .85), 0 .1em .35em rgba(26, 20, 51, .16);
}
.isle__games { display: block; margin-top: .55rem; }
.isle__games span {
  display: inline-block; font-family: var(--round); font-weight: 700; font-size: clamp(.95rem, .75rem + .8vw, 1.4rem); letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: .45em 1.5em .42em calc(1.5em + .42em);
  clip-path: polygon(0 0, 100% 0, calc(100% - .75em) 50%, 100% 100%, 0 100%, .75em 50%);
  filter: drop-shadow(0 .2rem 0 var(--ink));
}
.isle__mission { font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); font-weight: 600; line-height: 1.5; color: var(--ink); margin-bottom: 1.4rem; }
.isle__go { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 0; }
.isle__lost { font-family: var(--serif); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.6rem); color: var(--ink-2); text-shadow: 0 .035em 0 rgba(255, 255, 255, .85); }

/* the world: three depth layers + the floating island; phones see the middle of the valley */
.world { position: relative; z-index: 2; height: clamp(24rem, 112vw, 38rem); margin-top: -1.5rem; }
.world--small { height: clamp(20rem, 90vw, 30rem); }
.world__depth { position: absolute; inset: 0; transition: translate .8s cubic-bezier(.2, .7, .2, 1); }
.world__depth--far { translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -2px); }
.world__depth--sea { translate: calc(var(--mx, 0) * -10px) 0; inset: 0 -12px; }
.world__depth--near { translate: calc(var(--mx, 0) * -20px) calc(var(--my, 0) * -4px); inset: 0 -24px; }
.world__layer { width: 100%; height: 100%; }
.isle__float {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 6%; margin-inline: auto; width: min(84vw, 27rem);
  translate: calc(var(--mx, 0) * -30px) calc(var(--my, 0) * -12px); transition: translate .8s cubic-bezier(.2, .7, .2, 1);
}
.world--small .isle__float { width: min(76vw, 23rem); }
.isle__svg { width: 100%; height: auto; }
.isle__shadow { position: absolute; left: 24%; right: 18%; bottom: -1%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 95, 138, .42), rgba(11, 95, 138, 0)); }
.isle__bob { position: relative; }
.isle__glow { opacity: .8; transition: opacity .4s ease; }
.world:hover .isle__glow { opacity: 1; }
.spark { position: absolute; width: 1.3rem; height: 1.3rem; color: #FFF6C9; filter: drop-shadow(0 0 .3rem rgba(255, 220, 120, .9)); }
.spark__i { width: 100%; height: 100%; }
.spark--1 { left: 31%; top: 10%; }
.spark--2 { left: 68%; top: 16%; width: .9rem; height: .9rem; }
.spark--3 { left: 24%; top: 40%; width: 1rem; height: 1rem; }
.spark--4 { left: 73%; top: 44%; }
.isle__foam {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 20px; z-index: 4; background: var(--surf);
  -webkit-mask: url("../svg/scallop.svg") repeat-x left bottom / 48px 20px;
  mask: url("../svg/scallop.svg") repeat-x left bottom / 48px 20px;
}

@media (max-width: 63.99rem) {
  .glint:not(.glint--edge), .cloud--3, .cloud--4 { display: none; }
  .cloud--1 { top: 53%; left: -6%; }
  .cloud--2 { top: 56%; left: 79%; }
  .sky__sun { width: 24rem; top: -10rem; right: -10rem; }
  .world { margin-top: -5rem; }
  .world--small { margin-top: -3rem; }
}
@media (max-width: 35.99rem) {
  .isle__where { background: none; padding: 0; font-size: .85rem; }
  .btn { padding: .65rem 1.05rem; font-size: 1rem; }
}
@media (min-width: 64rem) {
  .isle { min-height: clamp(40rem, calc(100svh - 4.25rem), 56rem); }
  .isle__in { padding-top: clamp(3.5rem, 10vh, 6.5rem); text-align: left; }
  .isle__text { margin: 0; max-width: min(36rem, 45vw); }
  .isle__go { justify-content: flex-start; }
  .world { position: absolute; inset: auto 0 0; height: 72%; margin: 0; }
  .isle__float, .world--small .isle__float { left: auto; right: clamp(1rem, 5vw, 7rem); width: clamp(26rem, 38vw, 38rem); bottom: 1.5%; margin: 0; }
  .isle--lost .isle__float { width: clamp(22rem, 30vw, 30rem); }
}

/* ---------------------------------------------------------------- our game */
.game { background: linear-gradient(180deg, var(--surf) 0%, #BFEFFB 55%, #E9F9FD 100%); padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.game__card {
  display: grid; gap: clamp(.75rem, 2vw, 1.5rem); align-items: center;
  background: var(--cloud); border: 3px solid var(--ink); border-radius: 1.6rem; padding: clamp(.6rem, 1.6vw, 1rem);
  box-shadow: 0 .45rem 0 var(--ink), 0 2.4rem 3rem -1.8rem rgba(11, 95, 138, .55);
}
@media (min-width: 56rem) { .game__card { grid-template-columns: 1.12fr 1fr; align-items: stretch; } }
.game__art { position: relative; margin: 0; border-radius: 1.1rem; overflow: hidden; border: 2.5px solid var(--ink); background: #7FD8F5; }
.game__art picture { height: 100%; }
.game__art img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; transform: perspective(900px) rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg)) scale(var(--tz, 1)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.game__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at calc(50% + var(--tx, 0) * 12%) calc(30% - var(--ty, 0) * 12%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%); opacity: var(--shine, 0); transition: opacity .4s ease; }
@media (min-width: 56rem) { .game__art { min-height: 20rem; } .game__art img { aspect-ratio: auto; } }
.game__text { padding: clamp(.6rem, 2.4vw, 1.6rem) clamp(.4rem, 2vw, 1.4rem) clamp(.6rem, 2vw, 1.2rem); }
.game__title {
  margin: 0 0 .7rem; font-family: var(--round); font-weight: 700; text-transform: uppercase; line-height: .88; letter-spacing: .01em;
  color: var(--gold); -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--ink), 0 .13em 0 rgba(26, 20, 51, .22);
}
.game__title span { display: block; }
.game__top { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.3rem); letter-spacing: .2em; color: #fff; }
.game__main { font-size: clamp(3rem, 2.1rem + 4vw, 5.4rem); }
.game__tag { margin: 0 0 1.1rem; }
.game__tag span {
  display: inline-block; font-family: var(--round); font-weight: 700; font-size: clamp(.9rem, .82rem + .3vw, 1.05rem); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--violet); padding: .5em 1.6em .45em; clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%, .8em 50%);
  filter: drop-shadow(0 .18rem 0 var(--ink));
}
.game__lead { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); }
.chips { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--round); font-weight: 500; font-size: .95rem; line-height: 1.25; padding: .4rem .85rem; border: 2px solid var(--ink); border-radius: 1.1rem; background: #fff; }
.chip--gold { background: var(--gold); font-weight: 600; }
.chip .i { color: var(--ink); }
.game__go { margin: 0; }

/* the party: five looks on a ledge */
.party { display: grid; gap: 1rem 2rem; align-items: end; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 56rem) { .party { grid-template-columns: minmax(16rem, 22rem) 1fr; } }
.party__title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); color: var(--ink-2); }
.party__text p { margin: 0; }
@media (min-width: 56rem) { .party__text { align-self: center; } }
.party__row { position: relative; list-style: none; margin: 0; padding: 0 0 1.4rem; display: flex; justify-content: center; align-items: flex-end; }
.party__row::before {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; height: 2.8rem; border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 45% 30%, #B2EC8A 0 40%, #8FDB63 41% 100%);
  border: 3px solid var(--ink); box-shadow: 0 .35rem 0 #4A9A3C, 0 .35rem 0 3px var(--ink);
}
/* any count 3-9 and mixed heights: --ph shrinks the party as it grows, --hs sizes one hero */
.party__row { --ph: 1; }
.party__row--n6 { --ph: .9; } .party__row--n7 { --ph: .8; } .party__row--n8 { --ph: .72; } .party__row--n9 { --ph: .65; }
.party__hero { --hs: 1; --sh: calc(clamp(7.2rem, 31vw, 15rem) * var(--ph) * var(--hs)); position: relative; margin: 0 -.3rem; flex: var(--ar, .6) 1 0; min-width: 0; max-width: calc(var(--ar, .6) * var(--sh)); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.party__hero--s { --hs: .7; } .party__hero--l { --hs: 1.12; }
.party__hero--lead { z-index: 2; --hs: 1.07; }
.party__pic { display: block; width: 100%; }
.party__pic img { width: 100%; height: auto; max-height: var(--sh); object-fit: contain; object-position: 50% 100%; }
.party__hero:hover { transform: translateY(-.7rem) rotate(-3deg); }

/* ---------------------------------------------------------------- the four lands */
.lands { background: linear-gradient(180deg, #E9F9FD 0%, var(--cloud) 22%, #FDEAF6 100%); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.lands__head, .values__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.lands__lead, .values__lead { font-size: 1.1rem; color: var(--muted); margin: 0; }
.lands__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); }
@media (min-width: 44rem) { .lands__grid { grid-template-columns: 1fr 1fr; } }
.land { --land: var(--violet); --land-ink: var(--violet-deep); }
.land--dark-valley { --land: #3A2A63; --land-ink: #3A2A63; }
.land--temple { --land: #D9A35B; --land-ink: #7A4E0C; }
.land--adventure-land { --land: #E85AD0; --land-ink: #9A1F87; }
.land--western { --land: #C8552B; --land-ink: #9A3A16; }
.land__link {
  position: relative; display: block; height: 100%; color: var(--ink); text-decoration: none; background: var(--cloud);
  border: 3px solid var(--ink); border-radius: 1.4rem; overflow: hidden; box-shadow: var(--lift);
  transition: transform .25s ease, box-shadow .25s ease;
}
.land__link:hover { color: var(--ink); transform: translateY(-.3rem); box-shadow: 0 .7rem 0 var(--ink); }
.land__art { display: block; overflow: hidden; border-bottom: 3px solid var(--ink); }
.land__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.land__link:hover .land__art img, .land__link:focus-visible .land__art img { transform: scale(1.06); }
.land__plate { display: grid; gap: .1rem; padding: .85rem 1.1rem 1.05rem; border-top: .45rem solid var(--land); }
.land__n { font-family: var(--round); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--land-ink); }
.land__name { font-family: var(--round); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); line-height: 1.1; }
.land__chapter { font-family: var(--round); font-weight: 500; font-size: .85rem; letter-spacing: .1em; color: var(--muted); }
.land__mood { font-size: 1rem; margin-top: .35rem; }
@media (min-width: 64rem) {
  .land__art { border-bottom: 0; }
  .land__plate {
    position: absolute; left: .8rem; bottom: .8rem; max-width: min(24rem, calc(100% - 1.6rem));
    background: var(--cloud); border: 2.5px solid var(--ink); border-radius: 1rem; box-shadow: 0 .25rem 0 var(--ink);
    border-top-width: .45rem; border-top-color: var(--land);
  }
}
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .land__mood { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease; }
  .land__link:hover .land__mood, .land__link:focus-visible .land__mood { max-height: 6rem; opacity: 1; margin-top: .35rem; }
}
.lands__more { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; }

/* ---------------------------------------------------------------- promises */
.values { background: linear-gradient(180deg, #FDEAF6 0%, #FFF1D6 100%); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 6rem); }
.vows { list-style: none; margin: 0; padding: 2.4rem 0 0; display: grid; gap: 3.2rem 1.5rem; }
@media (min-width: 40rem) { .vows { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .vows { grid-template-columns: repeat(4, 1fr); } }
.vow {
  --tint: #FFF1C9; --edge: var(--gold);
  position: relative; padding: 3.6rem 1.35rem 1.4rem; background: var(--tint);
  border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: var(--lift);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.vow--pink { --tint: #FFE3F4; --edge: #FF8FC6; }
.vow--sky { --tint: #DDF4FF; --edge: #8ED3FF; }
.vow--mint { --tint: #E4F8D9; --edge: #A8EC8E; }
.vow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.6rem; background: var(--edge); border-radius: 1.15rem 1.15rem 0 0; border-bottom: 3px solid var(--ink); }
.vow::after {
  content: ""; position: absolute; top: -3.4rem; left: -.6rem; width: 8rem; height: 7.5rem; pointer-events: none;
  background: url("../svg/burst.svg") no-repeat center / contain; opacity: 0; transform: scale(.5) rotate(-20deg); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.vow__emblem {
  position: absolute; top: -2.3rem; left: 1.1rem; width: 4.8rem; height: 4.8rem; padding: .5rem;
  background: #fff; border: 3px solid var(--ink); border-radius: 1.2rem; box-shadow: 0 .3rem 0 var(--ink);
  transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.vow__title { font-family: var(--round); font-weight: 600; font-size: 1.3rem; line-height: 1.2; margin-bottom: .55rem; }
.vow__link { color: var(--ink); text-decoration: none; }
.vow__link::after { content: ""; position: absolute; inset: 0; border-radius: 1.2rem; }
.vow__link:hover { text-decoration: underline; color: var(--ink); }
.vow__link:focus-visible { outline: none; }
.vow:focus-within { outline: 3px solid var(--violet); outline-offset: 4px; }
.vow p { margin: 0; }
.vow:hover, .vow:focus-within { transform: translateY(-.45rem) rotate(-.6deg); box-shadow: 0 .8rem 0 var(--ink); }
.vow:hover .vow__emblem, .vow:focus-within .vow__emblem { transform: translateY(-.35rem) rotate(-8deg) scale(1.08); }
.vow:hover::after, .vow:focus-within::after { opacity: 1; transform: scale(1) rotate(0); }

/* ---------------------------------------------------------------- contact postcard */
/* the footer's scallops sit on the dusk colour */
.post { background: linear-gradient(180deg, #FFF1D6 0%, var(--dusk) 100%); padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3.5rem, 6vw, 5rem); }
.post__card {
  display: grid; gap: 1.5rem; max-width: 60rem; margin-inline: auto; background: var(--cloud);
  border: 12px solid transparent; border-image: repeating-linear-gradient(-45deg, #E85AD0 0 12px, #FFF8EC 12px 20px, #3EC6F2 20px 32px, #FFF8EC 32px 40px) 12;
  box-shadow: 0 0 0 3px var(--ink), 0 .7rem 0 3px var(--ink);
  padding: clamp(1.25rem, 4vw, 2.75rem);
}
@media (min-width: 48rem) { .post__card { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.post__msg .h2 { margin-bottom: .35em; }
.post__mail { margin: 1.4rem 0 0; }
.post__mail .btn { max-width: 100%; white-space: nowrap; }
@media (max-width: 26rem) {
  .post__card { padding: 1.1rem 1rem; }
  .post__mail .btn { font-size: .9rem; padding: .65rem .9rem; gap: .4rem; }
}
.post__side { position: relative; min-height: 13rem; display: grid; justify-items: end; align-content: start; }
@media (max-width: 47.99rem) { .post__side { min-height: 10.5rem; margin-top: -.5rem; } }
.stamp {
  width: 7.4rem; aspect-ratio: 5 / 6; padding: 10px; transform: rotate(4deg); transform-origin: 70% 30%;
  background: linear-gradient(180deg, #7AD3F4, #3EC6F2 60%, #14A8D8);
  -webkit-mask: radial-gradient(5px, #0000 97%, #000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(5px, #0000 97%, #000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) content-box;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.stamp__mark { width: 100%; height: 100%; padding: .55rem; border: 2px solid rgba(255, 255, 255, .8); filter: drop-shadow(0 .15rem 0 rgba(26, 20, 51, .35)); }
.post__card:hover .stamp { transform: rotate(-2deg) scale(1.05); }
.postmark { position: absolute; width: 8.4rem; top: 3.6rem; right: 4.6rem; color: rgba(42, 32, 88, .5); transform: rotate(-14deg); font-family: var(--round); }
.post__lines { position: absolute; left: 0; right: 0; bottom: .3rem; height: 3.4rem; background: repeating-linear-gradient(180deg, transparent 0 1.05rem, rgba(42, 32, 88, .22) 1.05rem calc(1.05rem + 2px)); }
@media (max-width: 47.99rem) { .post__lines { right: 9rem; } }

/* ---------------------------------------------------------------- footer: shared chrome (above) */

/* ---------------------------------------------------------------- motion (all of it lives here) */
@media (prefers-reduced-motion: no-preference) {
  .sky__sun::before { animation: spin 160s linear infinite; }
  .cloud--1 { animation: drift 46s ease-in-out infinite alternate; }
  .cloud--2 { animation: drift 38s ease-in-out -12s infinite alternate-reverse; }
  .cloud--3 { animation: drift 52s ease-in-out -20s infinite alternate; }
  .cloud--4 { animation: drift 34s ease-in-out -6s infinite alternate-reverse; }
  .glint { animation: twinkle 4.6s ease-in-out var(--d, 0s) infinite; }
  .spark { animation: twinkle 3.2s ease-in-out infinite; }
  .spark--2 { animation-delay: .8s; }
  .spark--3 { animation-delay: 1.7s; }
  .spark--4 { animation-delay: 2.4s; }
  .isle__bob { animation: bob 7s ease-in-out infinite; }
  .isle__shadow { animation: shadow 7s ease-in-out infinite; }
  .isle__flow { animation: flow 1.1s linear infinite; }
  .world__ripples { animation: shimmer 5s ease-in-out infinite alternate; }
  .gd-glint { transform-box: fill-box; transform-origin: center; animation: glint 5s ease-in-out infinite; }
  .gd-glint--2 { animation-delay: 2.2s; }
  .party__hero { animation: hop 3.6s ease-in-out infinite; }
  .party__hero:nth-child(2) { animation-delay: .4s; }
  .party__hero:nth-child(3) { animation-delay: .8s; }
  .party__hero:nth-child(4) { animation-delay: 1.2s; }
  .party__hero:nth-child(5) { animation-delay: 1.6s; }
  .party__hero:nth-child(6) { animation-delay: 2s; }
  .party__hero:nth-child(7) { animation-delay: 2.4s; }
  .party__hero:nth-child(8) { animation-delay: 2.8s; }
  .party__hero:nth-child(9) { animation-delay: 3.2s; }
  .party__hero:hover { animation-play-state: paused; }
  .isle__text > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .isle__text > :nth-child(2) { animation-delay: .08s; }
  .isle__text > :nth-child(3) { animation-delay: .16s; }
  .isle__text > :nth-child(4) { animation-delay: .24s; }
  @supports (animation-timeline: view()) {
    .vow__emblem { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
  @supports (animation-timeline: scroll()) {
    .world__depth--far { animation: sink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .isle__float { animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  /* pointer parallax and tilt only ever move under no-preference */
  .sky__clouds, .world__depth, .isle__float { translate: none !important; }
  .game__art img { transform: none !important; }
  .game__art::after { opacity: 0 !important; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes drift { from { transform: translateX(-2.5vw); } to { transform: translateX(3vw); } }
@keyframes twinkle { 0%, 100% { opacity: .95; scale: 1; } 50% { opacity: .25; scale: .55; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.4%); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .75; } }
@keyframes flow { to { stroke-dashoffset: -32; } }
@keyframes shimmer { from { opacity: .55; } to { opacity: 1; } }
@keyframes glint { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.6) rotate(45deg); } }
@keyframes hop { 0%, 82%, 100% { translate: 0 0; } 88% { translate: 0 -.45rem; } 94% { translate: 0 0; } }
@keyframes rise { from { opacity: 0; translate: 0 1.2rem; } }
@keyframes pop { from { scale: .3; rotate: -25deg; opacity: 0; } 70% { scale: 1.12; rotate: 4deg; opacity: 1; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes sink { to { transform: translateY(9%); } }
@keyframes lift { to { transform: translateY(-5%); } }

/* @generated glints (build/studio.mjs) */
.glint--0 { left: 47%; top: 11%; --s: 0.7rem; --d: 1.3s; }
.glint--1 { left: 55%; top: 25%; --s: 1.1rem; --d: 1.9s; }
.glint--2 { left: 62%; top: 7%; --s: 0.6rem; --d: 0.7s; }
.glint--3 { left: 69%; top: 17%; --s: 0.9rem; --d: 3.1s; }
.glint--4 { left: 77%; top: 29%; --s: 1.2rem; --d: 0.4s; }
.glint--5 { left: 86%; top: 10%; --s: 0.8rem; --d: 2.4s; }
.glint--6 { left: 94%; top: 23%; --s: 0.7rem; --d: 2.7s; }
.glint--7 { left: 4%; top: 13%; --s: 0.8rem; --d: 3.6s; }
.glint--8 { left: 33%; top: 5%; --s: 0.6rem; --d: 4.2s; }
.glint--9 { left: 91%; top: 40%; --s: 0.6rem; --d: 1.1s; }
/* @end glints */

.isle--lost .isle__foam { display: none; }

/* @generated aspect */
.ar--hero-explorer { --ar: 0.907; }
.ar--hero-googly { --ar: 0.506; }
.ar--hero-pirate { --ar: 0.693; }
.ar--hero-robot { --ar: 0.549; }
.ar--hero-viking { --ar: 0.856; }
/* @end aspect */

/* @generated pointer-steps */
.mx-0 { --mx: -1; }
.mx-1 { --mx: -0.75; }
.mx-2 { --mx: -0.5; }
.mx-3 { --mx: -0.25; }
.mx-4 { --mx: 0; }
.mx-5 { --mx: 0.25; }
.mx-6 { --mx: 0.5; }
.mx-7 { --mx: 0.75; }
.mx-8 { --mx: 1; }
.my-0 { --my: -1; }
.my-1 { --my: -0.75; }
.my-2 { --my: -0.5; }
.my-3 { --my: -0.25; }
.my-4 { --my: 0; }
.my-5 { --my: 0.25; }
.my-6 { --my: 0.5; }
.my-7 { --my: 0.75; }
.my-8 { --my: 1; }
.tx-0 { --tx: -4; }
.tx-1 { --tx: -3; }
.tx-2 { --tx: -2; }
.tx-3 { --tx: -1; }
.tx-4 { --tx: 0; }
.tx-5 { --tx: 1; }
.tx-6 { --tx: 2; }
.tx-7 { --tx: 3; }
.tx-8 { --tx: 4; }
.ty-0 { --ty: 3; }
.ty-1 { --ty: 2.25; }
.ty-2 { --ty: 1.5; }
.ty-3 { --ty: 0.75; }
.ty-4 { --ty: 0; }
.ty-5 { --ty: -0.75; }
.ty-6 { --ty: -1.5; }
.ty-7 { --ty: -2.25; }
.ty-8 { --ty: -3; }
.is-tilted { --tz: 1.03; --shine: 1; }
/* @end pointer-steps */