/* auraquests.com - the game's site. Approved palette: Nest Lavender #B5A2CA, Resting Pad #EFE3CB, Warm Gold #DABA77,
   Charging Mint #89E7B6, Ready Light #FFE1A0. The renders are Blender (Eevee, Standard view), never AI. */
:root {
  --lavender: #b5a2ca;
  --lavender-deep: #7d6a99;
  --cream: #efe3cb;
  --cream-soft: #f7f1e4;
  --gold: #daba77;
  --gold-deep: #a9873f;
  --mint: #89e7b6;
  --mint-deep: #2f8f62;
  --glow: #ffe1a0;
  --sky: #cbe9f2;
  --aura: #ff6fb7;
  --ink: #2b2440;
  --ink-soft: #4a4262;
  --ink-faint: #6f6787;
  --paper: #fbf8f1;
  --radius: 20px;
  --radius-small: 12px;
  --shadow: 0 18px 50px rgba(43, 36, 64, 0.14);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font);
  font-size: 17px; line-height: 1.6; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lavender-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 8px; }

/* header */
.site-head { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: 0.01em; font-size: 1.35rem; }
.wordmark .spark { width: 30px; height: 30px; flex: none; }
.nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 26px); font-weight: 700; font-size: 0.98rem; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--lavender-deep); }
.wordmark span, .nav .btn { white-space: nowrap; }
.nav .hide-small { display: inline; }
@media (max-width: 640px) { .nav .hide-small { display: none; } }
@media (max-width: 420px) { .wordmark { font-size: 1.12rem; } .wordmark .spark { width: 24px; height: 24px; } .nav { gap: 12px; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 0; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; text-decoration: none;
  background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(43, 36, 64, 0.22); transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(43, 36, 64, 0.28); }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.gold:hover { color: var(--ink); }
.btn.ghost { background: rgba(255, 255, 255, 0.7); color: var(--ink); box-shadow: none; border: 2px solid rgba(43, 36, 64, 0.16); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 0.92rem; }

/* hero */
.hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; background: var(--sky); }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero picture img { object-position: 60% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251, 248, 241, 0.55) 0%, rgba(251, 248, 241, 0) 26%, rgba(251, 248, 241, 0) 55%, rgba(251, 248, 241, 0.92) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(32px, 7vh, 72px); }
.hero-copy { display: inline-block; max-width: 640px; padding: clamp(18px, 3vw, 30px) clamp(18px, 3.4vw, 34px);
  background: rgba(251, 248, 241, 0.8); border-radius: 26px; box-shadow: 0 20px 60px rgba(43, 36, 64, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-copy .eyebrow { background: rgba(181, 162, 202, 0.28); }
@media (max-width: 699px) {
  /* phones: the picture on top (Aura in view), the words in a card below it */
  .hero { display: block; min-height: 0; background: var(--paper); }
  .hero::after { display: none; }
  .hero picture { position: relative; display: block; height: 68vh; min-height: 420px; }
  .hero picture img { position: absolute; object-position: 70% 55%; }
  .hero .wrap { margin-top: -72px; padding-bottom: 24px; }
  .hero-copy { display: block; background: rgba(251, 248, 241, 0.94); }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; }
}
.eyebrow { display: inline-block; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.72); padding: 6px 12px; border-radius: 999px; }
.hero h1 { font-size: clamp(2.9rem, 9vw, 6.2rem); line-height: 0.98; margin: 14px 0 12px; letter-spacing: -0.01em; color: var(--ink);
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.6); }
.hero .lead { font-size: clamp(1.08rem, 2.2vw, 1.32rem); max-width: 34ch; margin: 0 0 22px; color: var(--ink-soft); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* sections */
section { padding: clamp(56px, 9vw, 110px) 0; }
.kicker { display: inline-block; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender-deep);
  margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: rgba(181, 162, 202, 0.22); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.005em; }
.intro { color: var(--ink-soft); max-width: 60ch; margin: 0 0 34px; font-size: 1.08rem; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card .body { padding: 20px 22px 24px; }
.card h3 { margin: 0 0 6px; font-size: 1.22rem; }
.card p { margin: 0; color: var(--ink-soft); }

.band { background: linear-gradient(180deg, var(--cream-soft), var(--cream)); }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.gallery figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--sky); }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery .feature { grid-column: span 12; aspect-ratio: 16 / 8; }
.gallery .half2 { grid-column: span 6; aspect-ratio: 16 / 9; }
@media (max-width: 820px) { .gallery .half2 { grid-column: span 12; } }
.gallery .wide { grid-column: span 8; aspect-ratio: 16 / 9; }
.gallery .tall { grid-column: span 4; grid-row: span 2; }
.gallery .half { grid-column: span 8; aspect-ratio: 16 / 9; }
@media (max-width: 820px) {
  .gallery .wide, .gallery .half { grid-column: span 12; }
  .gallery .tall { grid-column: span 6; grid-row: auto; aspect-ratio: 9 / 16; order: 2; }
  .gallery .half { order: 3; }
  .gallery .wide:last-child { order: 4; }
}
/* 10 Nov: two closer shots stacked (w8) beside a tall one (t4); on phones the tall one goes full width */
.gallery .w8 { grid-column: span 8; aspect-ratio: 16 / 9; }
.gallery .t4 { grid-column: span 4; grid-row: span 2; }
@media (max-width: 820px) {
  .gallery .w8 { grid-column: span 12; }
  .gallery .t4 { grid-column: span 12; grid-row: auto; aspect-ratio: 4 / 5; }
  .gallery .t4 img { object-position: 50% 66%; }
}
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(251, 248, 241, 0.88); color: var(--ink); font-weight: 700;
  font-size: 0.85rem; padding: 5px 11px; border-radius: 999px; }
.note-real { margin-top: 22px; color: var(--ink-faint); font-size: 0.92rem; }

/* waitlist */
.join { background: var(--ink); color: #f4efff; }
.join .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .join .grid { grid-template-columns: 1fr; } }
.join h2 { color: #fff; }
.join .intro { color: #d9d0ec; }
.join .kicker { color: var(--glow); background: rgba(255, 225, 160, 0.14); }
.join-art { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.form { background: #fff; color: var(--ink); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.form label.field { display: block; font-weight: 800; margin-bottom: 6px; }
.form input[type="email"] {
  width: 100%; min-height: 52px; border-radius: var(--radius-small); border: 2px solid #d9d2e6; padding: 0 16px; font: inherit; font-size: 1.05rem;
  color: var(--ink); background: var(--paper);
}
.form input[type="email"]:focus { border-color: var(--lavender-deep); outline: none; box-shadow: 0 0 0 4px rgba(181, 162, 202, 0.35); }
.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px; font-size: 0.96rem; color: var(--ink-soft); }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--lavender-deep); }
.check .opt { font-weight: 700; color: var(--ink-faint); }
.form .btn { width: 100%; margin-top: 20px; }
.form .fine { font-size: 0.86rem; color: var(--ink-faint); margin: 14px 0 0; }
.form .status { margin: 14px 0 0; font-weight: 700; min-height: 1.4em; }
.form .status.ok { color: var(--mint-deep); }
.form .status.err { color: #b3261e; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* news */
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.news-list li { background: #fff; border-radius: var(--radius-small); padding: 18px 20px; box-shadow: 0 8px 24px rgba(43, 36, 64, 0.08); }
.news-list time { font-size: 0.85rem; color: var(--ink-faint); font-weight: 700; }
.news-list h3 { margin: 4px 0 4px; font-size: 1.12rem; }
.news-list p { margin: 0; color: var(--ink-soft); }

/* text pages */
.page { padding-top: 120px; }
.page h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin: 0 0 12px; }
.page .lead { color: var(--ink-soft); font-size: 1.12rem; max-width: 62ch; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.45rem; margin: 34px 0 8px; }
.prose li { margin: 4px 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; background: #fff; border-radius: var(--radius); padding: 22px 26px;
  box-shadow: var(--shadow); max-width: 760px; margin: 26px 0; }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 22px 0; }
.shots figure { margin: 0; background: #fff; border-radius: var(--radius-small); overflow: hidden; box-shadow: 0 8px 24px rgba(43, 36, 64, 0.1); }
.shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--sky); }
.shots figcaption { padding: 10px 14px 14px; font-size: 0.9rem; color: var(--ink-soft); }
.shots figcaption a { font-weight: 800; }
.draft { display: inline-block; background: var(--glow); color: var(--ink); font-weight: 800; font-size: 0.78rem; padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }

/* footer */
.site-foot { background: #1f1a30; color: #cfc6e3; padding: 40px 0 46px; font-size: 0.95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.site-foot a { color: #fff; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 700; }

/* ---- fun and cute (his words, 10 Nov: "make it beautiful and fun and cute") -------------------------------------
   Stickers are the Blender cutouts, the clips are the Mac's clean iPad captures. All motion stops for
   prefers-reduced-motion (the rule at the top). */

/* bouncier buttons, cards that lift, sticker-white frames */
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.97); }
.card { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 24px 60px rgba(43, 36, 64, 0.18); }
.card:nth-child(2):hover { transform: translateY(-6px) rotate(0.6deg); }
.gallery figure { border: 5px solid #fff; }
.hero-copy { border: 3px solid rgba(255, 255, 255, 0.9); }

/* twinkles over the hero */
.twinkle { position: absolute; z-index: 3; width: 26px; height: 26px; background: url("/assets/spark.svg") center / contain no-repeat;
  pointer-events: none; animation: twinkle 2.8s ease-in-out infinite; }
.tw1 { left: 7%; top: 24%; }
.tw2 { left: 44%; top: 15%; width: 18px; height: 18px; animation-delay: -1s; }
.tw3 { right: 9%; top: 34%; width: 22px; height: 22px; animation-delay: -1.9s; }
@keyframes twinkle { 0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.35; } 50% { transform: scale(1.1) rotate(18deg); opacity: 1; } }
@media (max-width: 699px) { .tw1 { top: 10%; } .tw2 { top: 5%; left: 54%; } .tw3 { top: 38%; } }

/* stickers: a heading with Aura beside it, a slow bob */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(12px, 3vw, 40px); }
.head-row > div { min-width: 0; }
.sticker { height: auto; filter: drop-shadow(0 14px 16px rgba(43, 36, 64, 0.22)); animation: bob 3.8s ease-in-out infinite; }
.sticker-slash { flex: none; width: clamp(96px, 15vw, 200px); margin: 0 0 26px; --tilt: 5deg;
  background: radial-gradient(closest-side, rgba(181, 162, 202, 0.5), rgba(181, 162, 202, 0)); border-radius: 50%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-9px) rotate(var(--tilt, 0deg)); } }

/* a wavy underline */
.squiggle { padding-bottom: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5' fill='none' stroke='%23b5a2ca' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 24px 10px repeat-x; }

/* soft waves where sections meet (the wave takes the colour of the section it starts) */
.wave-top { position: relative; }
.wave-top::before { content: ""; position: absolute; left: 0; right: 0; top: -39px; height: 40px; pointer-events: none; background: var(--wave, var(--cream-soft));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C160 6 320 2 480 12s320 26 480 22 320-24 480-26V40z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C160 6 320 2 480 12s320 26 480 22 320-24 480-26V40z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* day to night (his yes, 10 Nov): the page starts in the islands' day colours and darkens section by section into
   the portal's night, so the waitlist sits inside the portal. Each section ends on the colour the next one starts. */
.day { background: linear-gradient(180deg, #fbf8f1, #f6efe2); }
.news-day { background: #f6efe2; }
.band { --wave: #f6efe2; background: linear-gradient(180deg, #f6efe2, #ece3f4); }
.lilac { --wave: #ece3f4; background: linear-gradient(180deg, #ece3f4, #d3c4ea); }
.dusk { --wave: #d3c4ea; background: linear-gradient(180deg, #d3c4ea 0%, #a593cf 55%, #4b3b78 100%); }
.join { position: relative; background: #16112b; }
.site-foot { background: #100c20; }
.dusk > .wrap, .join > .wrap { position: relative; z-index: 1; }
.stars::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: sky 4.5s ease-in-out infinite;
  background-image: radial-gradient(2px 2px at 7% 74%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 17% 90%, #ffe1a0, transparent 70%),
    radial-gradient(2px 2px at 29% 66%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 41% 93%, #c9f6ff, transparent 70%),
    radial-gradient(2px 2px at 55% 71%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 66% 87%, #ffd1ea, transparent 70%),
    radial-gradient(2px 2px at 78% 68%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 91% 92%, #ffe1a0, transparent 70%); }
.join.stars::after {
  background-image: radial-gradient(2px 2px at 6% 12%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 22% 30%, #c9f6ff, transparent 70%),
    radial-gradient(2px 2px at 38% 8%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 52% 22%, #ffd1ea, transparent 70%),
    radial-gradient(2px 2px at 71% 10%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 86% 28%, #ffe1a0, transparent 70%),
    radial-gradient(2px 2px at 95% 60%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 4% 70%, #c9f6ff, transparent 70%),
    radial-gradient(1.5px 1.5px at 48% 96%, #fff, transparent 70%); }
@keyframes sky { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* gameplay clips: they play while on screen (site.js) */
.clips-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 24px); }
.clips-grid .feature { grid-column: 1 / -1; }
@media (max-width: 760px) { .clips-grid { grid-template-columns: 1fr; } }
.clip { margin: 0; position: relative; border-radius: 26px; overflow: hidden; background: #1f1a30; border: 5px solid #fff;
  box-shadow: 0 18px 44px rgba(43, 36, 64, 0.2); }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1118; object-fit: cover; background: #1f1a30; }
.clips-grid .feature video { aspect-ratio: 16 / 9; }
.clip img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1118; object-fit: cover; }   /* iPad screenshots */
.clips-grid .feature img { aspect-ratio: 16 / 9; }
.clip figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(251, 248, 241, 0.9); color: var(--ink); font-weight: 700;
  font-size: 0.85rem; padding: 5px 11px; border-radius: 999px; pointer-events: none; }
.clip video[controls] ~ figcaption { top: 12px; bottom: auto; }
.clip-toggle { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(251, 248, 241, 0.92); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 16px rgba(43, 36, 64, 0.25); transition: transform .15s ease; }
.clip-toggle[hidden] { display: none; }
.clip-toggle:hover { transform: scale(1.08); }
.clip-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.clip-toggle .i-play, .clip-toggle.is-paused .i-pause { display: none; }
.clip-toggle.is-paused .i-play { display: block; }

/* the foes, as stickers on soft cards */
.foe-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
@media (max-width: 900px) { .foe-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foe-row li:last-child { grid-column: 1 / -1; } }
.foe-row li { border-radius: 28px; padding: 20px 14px 16px; text-align: center; box-shadow: var(--shadow); border: 4px solid #fff;
  display: grid; justify-items: center; align-content: end; gap: 12px; transition: transform .2s ease; background: #fff4f8; }
.foe-row li:nth-child(2) { background: #f3effa; }
.foe-row li:nth-child(3) { background: #eef9f3; }
.foe-row li:nth-child(4) { background: #fff8ea; }
.foe-row li:nth-child(5) { background: #eef6fb; }
.foe-row li:hover { transform: translateY(-4px) rotate(-1.2deg); }
.foe-row li:nth-child(even):hover { transform: translateY(-4px) rotate(1.2deg); }
.foe-row img { width: 100%; height: clamp(92px, 12vw, 140px); object-fit: contain; filter: drop-shadow(0 10px 12px rgba(43, 36, 64, 0.2));
  animation: bob 3.4s ease-in-out infinite; }
.foe-row li:nth-child(2) img { animation-delay: -0.7s; }
.foe-row li:nth-child(3) img { animation-delay: -1.4s; }
.foe-row li:nth-child(4) img { animation-delay: -2.1s; }
.foe-row li:nth-child(5) img { animation-delay: -2.8s; }
.foe-row span { font-weight: 800; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.3; }

/* bonk the foes: tap one, it squashes, shows its hurt face and drops a coin (site.js) */
.foe { position: relative; display: grid; justify-items: center; width: 100%; border: 0; padding: 0; margin: 0; background: none;
  cursor: pointer; font: inherit; color: inherit; border-radius: 18px; }
.foe img { pointer-events: none; }
.foe.bonked img { animation: bonk 0.8s ease both; }
@keyframes bonk { 0% { transform: none; } 14% { transform: scale(1.18, 0.78); } 30% { transform: scale(0.9, 1.12) translateX(-5px); }
  46% { transform: scale(1.04, 0.97) translateX(5px); } 62% { transform: translateX(-3px); } 78% { transform: translateX(2px); } 100% { transform: none; } }
.coin-pop { position: absolute; left: 50%; top: 4%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, #fff6cf 0 18%, #f4cf5d 45%, #c08a2a 100%);
  box-shadow: inset 0 0 0 2px #ffe9a3, 0 4px 10px rgba(43, 36, 64, 0.25); animation: coin-up 0.85s ease-out forwards; }
.coin-pop::after { content: "+1"; position: absolute; left: 32px; top: 2px; font-weight: 800; font-size: 0.95rem; color: #fff;
  text-shadow: 0 2px 6px rgba(43, 36, 64, 0.6); }
@keyframes coin-up { 0% { transform: translateY(10px) scale(0.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-64px) scale(1); opacity: 0; } }
.bonk-count { margin: 18px 0 0; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(22, 17, 43, 0.5); min-height: 1.6em; }

/* into the portal: a glowing ring opens onto her eyes as you scroll (site.js sets --r and --copy);
   without it, or with "reduce motion", the portal is simply wide open */
.portal { position: relative; padding: 0; background: linear-gradient(180deg, #4b3b78, #16112b 45%); }
.portal-stick { position: relative; height: 100vh; min-height: 520px; overflow: hidden; }
.portal.live { height: 210vh; }
.portal.live .portal-stick { position: sticky; top: 0; }
/* her face is low in the clip: keep the clip's bottom in view and put the ring's centre on her eyes (72% down) */
.portal { --cy: 72%; }
@media (max-width: 700px) { .portal { --cy: 76%; } }
.portal-window { position: absolute; inset: 0; clip-path: circle(var(--r, 150vmax) at 50% var(--cy)); }
.portal-window video, .portal-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; background: #16112b; }
.portal-ring { position: absolute; left: 50%; top: var(--cy); width: calc(var(--r, 150vmax) * 2); height: calc(var(--r, 150vmax) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.92); pointer-events: none;
  box-shadow: 0 0 28px 6px rgba(255, 95, 176, 0.7), inset 0 0 28px 6px rgba(95, 227, 255, 0.6); }
.portal-copy { position: absolute; left: 0; right: 0; top: clamp(48px, 11vh, 110px); padding: 0 var(--gutter); text-align: center;
  color: #fff; opacity: var(--copy, 1); }
.portal-copy h2 { color: #fff; font-size: clamp(2.2rem, 6vw, 4rem); margin: 0 0 18px; text-shadow: 0 4px 30px rgba(22, 17, 43, 0.85); }
.portal-copy .kicker { color: var(--glow); background: rgba(22, 17, 43, 0.6); }
.portal .clip-toggle { right: 18px; bottom: 18px; }

/* the waitlist: Aura's moods (tap her) and her cheer when someone joins (site.js) */
.form { position: relative; }
.moods { position: relative; display: grid; justify-items: center; gap: 8px; margin-top: 6px; }
.mood-aura { width: clamp(200px, 26vw, 300px); border: 0; padding: 0; cursor: pointer; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 95, 176, 0.35), rgba(255, 95, 176, 0)); }
.mood-aura img { width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.35)); animation: bob 3.6s ease-in-out infinite; }
.mood-aura.pop img { animation: pop 0.35s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.mood-aura.cheer img { animation: hop 0.6s ease-in-out 4; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-22px) scale(1.03, 0.97); } }
.mood-hint { margin: 0; font-weight: 800; color: #f4efff; text-align: center; }
.mood-hint span { color: var(--glow); }
.confetti { position: absolute; left: 50%; top: 38%; width: 10px; height: 10px; border-radius: 3px; pointer-events: none;
  background: var(--c, #ffe1a0); animation: confetti 1.3s ease-out forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); opacity: 0; } }

/* the coin hunt (his "add the coin hunt too", 10 Nov): five coins hidden on the page, a counter, and all five
   unlock two wallpapers (site.js; found coins are remembered in this browser) */
.has-coin { position: relative; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hunt-hint { margin: 14px 0 0; font-size: 0.9rem; font-weight: 700; color: var(--ink-faint); }
.hunt-coin { position: absolute; z-index: 4; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff6cf 0 16%, #f4cf5d 46%, #c08a2a 100%);
  box-shadow: inset 0 0 0 3px #ffe9a3, 0 6px 14px rgba(43, 36, 64, 0.3); animation: coin-spin 2.4s ease-in-out infinite; }
.hunt-coin[hidden] { display: none; }
.hunt-coin::after { content: ""; position: absolute; inset: 9px; background: #fff8dc;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.hunt-coin.got { animation: coin-got 0.6s ease-in forwards; pointer-events: none; }
@keyframes coin-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.3); } }
@keyframes coin-got { 0% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-70px) scale(1.5); opacity: 0; } }
.c1 { right: 11%; top: 24%; }
.c2 { right: 3%; bottom: 22px; }
.c3 { left: 1.5%; top: 48%; }
.c4 { right: 5%; bottom: 34px; }
.c5 { left: 3%; top: 26px; }
@media (max-width: 699px) { .c1 { right: 7%; top: 30%; } }
.hunt-hud { position: fixed; left: 14px; bottom: 14px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px;
  border: 0; border-radius: 999px; background: rgba(22, 17, 43, 0.86); color: #fff; font: inherit; font-weight: 800; font-size: 0.9rem;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.hunt-hud[hidden] { display: none; }
.hunt-hud.bump { animation: pop 0.35s ease; }
.hunt-hud.done { background: var(--gold); color: var(--ink); }
.mini-coin { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px #ffe9a3;
  background: radial-gradient(circle at 35% 30%, #fff6cf 0 16%, #f4cf5d 46%, #c08a2a 100%); }
.hunt-prize { width: min(92vw, 560px); max-height: 92vh; padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.hunt-prize::backdrop { background: rgba(22, 17, 43, 0.65); }
.prize-body { display: grid; justify-items: center; gap: 4px; padding: 24px 22px 22px; text-align: center; }
.prize-body h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0; }
.prize-lead { margin: 6px 0 14px; color: var(--ink-soft); }
.prize-pics { display: grid; grid-template-columns: 2.4fr 1fr; gap: 10px; align-items: end; width: 100%; }
.prize-pics img { width: 100%; border-radius: 14px; box-shadow: 0 8px 20px rgba(43, 36, 64, 0.18); }
.prize-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.prize-close { margin-top: 10px; }