/* Qstar's website, drawn like the app: an anime sky, cream cards, jelly buttons on darker plinths
   and white titles with a navy outline. Colours come from the app's palettes. */

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

:root {
  --navy: #05145a;
  --ink: #33457a;
  --cream: #fffae8;
  --cream-deep: #fff1c7;
  --sky-top: #139ff7;
  --sky-horizon: #48d0fb;
  --sky-low: #37a7fd;
  --page: 1180px;
  --gutter: max(20px, calc((100% - var(--page)) / 2));
  --card-shadow: 0 6px 0 rgba(5, 20, 90, 0.14), 0 16px 32px rgba(5, 20, 90, 0.14);
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.9 6.5 4.6 10.6 12 12-7.4 1.4-11.1 5.5-12 12-.9-6.5-4.6-10.6-12-12 7.4-1.4 11.1-5.5 12-12z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--sky-low);
}

body {
  position: relative;
  margin: 0;
  overflow-x: clip;
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.45;
  color: var(--navy);
  background: linear-gradient(180deg, var(--sky-horizon) 0, #57d4fc 22%, #4ccafc 50%, #43bafd 80%, var(--sky-low) 100%);
}

main { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p { margin: 0; }

/* Titles break into even lines, never one word left alone on the last. */
h1, h2, .mode-name { text-wrap: balance; }

a { color: inherit; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  font-weight: 700;
  background: var(--cream);
  border: 2.5px solid var(--navy);
  border-radius: 14px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* White letters with a navy outline and a navy drop, like the app's titles. */
.outlined {
  color: #fff;
  -webkit-text-stroke: var(--stroke, 0.13em) var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 var(--drop, 0.07em) 0 var(--navy);
}

/* ---------- Jelly buttons ---------- */

.jelly {
  --face: linear-gradient(180deg, #fff 0%, #f3f3f3 100%);
  --plinth: var(--navy);
  --depth: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 28px;
  font: 700 21px/1 "Fredoka", ui-rounded, system-ui, sans-serif;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--face);
  border: 2.5px solid var(--navy);
  border-radius: 22px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), 0 var(--depth) 0 var(--plinth), 0 calc(var(--depth) + 8px) 18px rgba(5, 20, 90, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  overflow: hidden;
}

/* The gloss lens across the top of the face. */
.jelly::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 14px auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.jelly:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), 0 calc(var(--depth) + 2px) 0 var(--plinth), 0 calc(var(--depth) + 12px) 22px rgba(5, 20, 90, 0.24); }
.jelly:active { transform: translateY(calc(var(--depth) - 2px)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), 0 2px 0 var(--plinth), 0 6px 10px rgba(5, 20, 90, 0.2); }

.jelly--gold {
  --face: linear-gradient(180deg, #ffe83d 0%, #ffd105 55%, #ffb700 100%);
  --plinth: #a14a02;
  color: #121214;
}

.jelly--cream {
  --face: linear-gradient(180deg, #fffef6 0%, #fff4d2 100%);
  --plinth: #c8a75a;
}

.jelly--blue {
  --face: linear-gradient(180deg, #43b4ff 0%, #0a84ff 55%, #0068e8 100%);
  --plinth: #0a2a7a;
  color: #fff;
  -webkit-text-stroke: 0.14em var(--navy);
  paint-order: stroke fill;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.jelly--blue::before { background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); }

.jelly:disabled {
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.75) brightness(1.12);
  opacity: 0.7;
}

.jelly--small { min-height: 46px; padding: 0 18px; font-size: 17px; border-radius: 17px; --depth: 4px; }
.jelly--big { min-height: 72px; padding: 0 40px; font-size: 26px; border-radius: 26px; --depth: 7px; }

.jelly-icon { width: 0.95em; height: 0.95em; fill: currentColor; }

/* Now and then a band of light sweeps across the button, like the app's attract mode. */
.jelly--shine::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  pointer-events: none;
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px var(--gutter);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-icon { width: 48px; height: 48px; filter: drop-shadow(0 4px 0 rgba(5, 20, 90, 0.35)); }
.brand-name { font-weight: 700; font-size: 32px; letter-spacing: 0.01em; }

.topnav { display: flex; gap: 6px; margin-left: auto; }
.topnav a {
  padding: 8px 14px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.topnav a:hover { background: rgba(255, 250, 232, 0.55); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 32px;
  min-height: min(820px, 100svh);
  padding: 112px var(--gutter) 64px;
  background: url("/assets/img/art/sky-wide.webp") center bottom / cover no-repeat, var(--sky-top);
}

/* Melts the hero's sky into the page's sky. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(rgba(72, 208, 251, 0), var(--sky-horizon));
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 2; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  font-weight: 600;
  font-size: 16px;
  background: var(--cream);
  border: 2.5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(5, 20, 90, 0.18);
}

.pill-star {
  width: 18px;
  height: 18px;
  background: linear-gradient(#ffd84a, #ffad00);
  -webkit-mask: var(--sparkle) center / contain no-repeat;
  mask: var(--sparkle) center / contain no-repeat;
}

.hero-title {
  margin-top: 22px;
  font-weight: 700;
  font-size: clamp(46px, 6.4vw, 86px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  --stroke: 0.12em;
}

.hero-lead {
  max-width: 31em;
  margin-top: 22px;
  font-weight: 600;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.4;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 32px; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: 6px 14px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 250, 232, 0.94);
  border: 2.5px solid #fff;
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(5, 20, 90, 0.16);
}
.facts b { margin-right: 3px; font-weight: 700; font-size: 20px; color: var(--navy); }

.hero-stage {
  position: relative;
  z-index: 1;
  height: clamp(540px, 52vw, 680px);
}

.phone {
  --w: 280px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.162);
  background: linear-gradient(150deg, #3d4660 0%, #10141f 32%, #0c0f18 70%, #2c344b 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2), 0 0 0 2.5px rgba(5, 20, 90, 0.55), 0 30px 60px rgba(5, 20, 90, 0.35);
}
.phone img { width: 100%; border-radius: calc(var(--w) * 0.128); }

.phone--hero-front {
  --w: clamp(240px, 22vw, 300px);
  position: absolute;
  z-index: 2;
  left: 3%;
  top: 7%;
  transform: rotate(-4deg);
}

.phone--hero-back {
  --w: clamp(210px, 19vw, 262px);
  position: absolute;
  z-index: 1;
  right: -1%;
  top: 0;
  transform: rotate(7deg);
}

.hero-mascot {
  position: absolute;
  z-index: 3;
  left: -7%;
  top: -4%;
  width: clamp(120px, 12vw, 168px);
  filter: drop-shadow(0 12px 14px rgba(5, 20, 90, 0.28));
}

.hero-avatar {
  position: absolute;
  z-index: 3;
  width: clamp(66px, 6.4vw, 92px);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 0 rgba(5, 20, 90, 0.2), 0 14px 24px rgba(5, 20, 90, 0.25);
}
.hero-avatar--fox { right: 1%; bottom: 4%; }
.hero-avatar--astronaut { left: -9%; bottom: 26%; }

.sparkle {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  background: #fff;
  -webkit-mask: var(--sparkle) center / contain no-repeat;
  mask: var(--sparkle) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
.sparkle--1 { right: 36%; top: 2%; }
.sparkle--2 { right: 4%; top: 58%; width: 18px; height: 18px; }
.sparkle--3 { left: 30%; bottom: 0; width: 20px; height: 20px; }

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: clamp(80px, 11vw, 140px) var(--gutter) 0;
}

.section-title {
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.05;
  text-align: center;
}

.section-lead {
  max-width: 36em;
  margin: 16px auto 0;
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 20px);
  text-align: center;
}

/* Clouds drift past the sections' edges. */
.modes { padding-top: clamp(40px, 5vw, 72px); }

.modes::before,
.feature::before,
.packs::before,
.faq::before {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 551 / 256;
  background: url("/assets/img/art/cloud-1.webp") center / contain no-repeat;
  pointer-events: none;
}
.modes::before { width: clamp(260px, 30vw, 440px); left: -6%; top: 10%; }
.feature::before { width: clamp(180px, 20vw, 300px); right: -5%; top: 4%; background-image: url("/assets/img/art/cloud-2.webp"); aspect-ratio: 314 / 213; }
.feature--flip::before { right: auto; left: -4%; top: 30%; background-image: url("/assets/img/art/cloud-3.webp"); aspect-ratio: 373 / 101; width: clamp(220px, 24vw, 340px); }
.packs::before { width: clamp(240px, 28vw, 420px); right: -8%; top: 3%; }
.faq::before { width: clamp(200px, 24vw, 340px); left: -7%; top: 12%; background-image: url("/assets/img/art/cloud-3.webp"); aspect-ratio: 373 / 101; }

/* ---------- Who's playing today? ---------- */

.presenter { display: flex; flex-direction: column; align-items: center; }

.presenter-star {
  width: clamp(170px, 17vw, 230px);
  filter: drop-shadow(0 12px 12px rgba(5, 20, 90, 0.2));
}

.bubble {
  position: relative;
  margin-top: 6px;
  padding: 18px 42px;
  font-weight: 700;
  font-size: clamp(25px, 3.4vw, 40px);
  text-align: center;
  background: var(--cream);
  border-radius: 30px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 10px 0 rgba(5, 20, 90, 0.1), 0 20px 36px rgba(5, 20, 90, 0.16);
}
.bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  width: 36px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--cream);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 56px;
}

.mode { display: flex; flex-direction: column; gap: 22px; }

.mode p {
  flex: 1;
  padding: 18px 20px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: var(--card-shadow);
}

/* The home screen's candy cards: a gradient face with a white rim on a darker plinth. */
.mode-card {
  --light: #d1f0ff;
  --middle: #80c9ff;
  --deep: #2e8ff0;
  --plinth: #1461c4;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 124px;
  padding: 20px 128px 20px 24px;
  text-decoration: none;
  background: linear-gradient(to top right, var(--light) 0%, var(--middle) 46%, var(--deep) 100%);
  border: 3px solid #fff;
  border-radius: 30px;
  box-shadow: 0 8px 0 var(--plinth), 0 20px 30px rgba(5, 20, 90, 0.24);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.35), box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mode-card--pass { --light: #ffe0cc; --middle: #ffa87d; --deep: #ff7045; --plinth: #c74f2b; }
.mode-card--lobby { --light: #d6f7d9; --middle: #85de94; --deep: #2eb55c; --plinth: #148a42; }

/* A highlight across the top and a shade along the bottom round the face out like candy. */
.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 27px;
  background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 72%, rgba(5, 20, 90, 0.12));
  pointer-events: none;
}

.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 27px;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  pointer-events: none;
}

.mode-card:active { transform: perspective(900px) translateY(6px); box-shadow: 0 2px 0 var(--plinth), 0 8px 14px rgba(5, 20, 90, 0.2); }

.mode-name {
  position: relative;
  font-weight: 700;
  font-size: clamp(23px, 2.1vw, 28px);
  line-height: 1.1;
  --stroke: 0.15em;
  --drop: 0.1em;
}

.mode-sub { position: relative; font-weight: 600; font-size: 15px; }

.mode-art {
  position: absolute;
  right: 6px;
  top: -26px;
  width: 116px;
  filter: drop-shadow(0 8px 8px rgba(5, 20, 90, 0.2));
}
.mode-art--wide { top: 18px; right: 4px; width: 132px; }

/* ---------- Feature sections ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.feature--flip .feature-copy { order: 2; }

.feature-copy { position: relative; z-index: 1; }
.feature .section-title { text-align: left; }

.kicker {
  --light: #d1f0ff;
  --deep: #80c9ff;
  --plinth: #1461c4;
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 16px;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(var(--light), var(--deep));
  border: 2.5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--plinth);
}
.kicker--green { --light: #e6fbe8; --deep: #8fe29c; --plinth: #148a42; }
.kicker--coral { --light: #ffeadf; --deep: #ffb08a; --plinth: #c74f2b; }

.feature-lead { margin-top: 18px; font-weight: 600; font-size: clamp(18px, 1.5vw, 20px); }
.feature-note { margin-top: 20px; font-weight: 600; }

.perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.perks li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 22px;
  box-shadow: var(--card-shadow);
}
.perks img { flex: none; width: 58px; height: 58px; object-fit: contain; }
.perks p { color: var(--ink); font-size: 16px; line-height: 1.35; }
.perks b { display: block; margin-bottom: 2px; font-weight: 700; font-size: 18px; color: var(--navy); }

.feature-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}

.phone--feature { --w: clamp(210px, 19vw, 268px); }
.phone--tilt-left { z-index: 1; margin-right: -34px; transform: rotate(-5deg) translateY(16px); }
.phone--tilt-right { transform: rotate(5deg) translateY(-24px); }

.stage-star {
  position: absolute;
  width: clamp(64px, 6.5vw, 92px);
  filter: drop-shadow(0 8px 10px rgba(5, 20, 90, 0.25));
}
.stage-star--1 { left: 12%; top: 14%; rotate: -14deg; }
.stage-star--2 { right: 14%; bottom: 10%; width: clamp(48px, 4.8vw, 68px); rotate: 12deg; }

.avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.avatars li { position: relative; width: min(116px, calc((100% - 24px) / 4)); aspect-ratio: 1; }
.avatar-face { position: absolute; inset: 16%; width: 68%; border-radius: 50%; }
.avatar-frame { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 6px 6px rgba(5, 20, 90, 0.25)); }

/* ---------- Try a question ---------- */

.quiz { max-width: 580px; margin: 40px auto 0; }

.quiz-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px 16px;
  background: #f8fdff;
  border: 3px solid #fff;
  border-radius: 26px;
  box-shadow: 0 0 0 2.5px #32baec, var(--card-shadow);
}

.quiz-cover { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 3px 0 rgba(5, 20, 90, 0.18); }
.quiz-pack { font-weight: 700; font-size: 19px; line-height: 1.15; }
.quiz-count { font-weight: 600; font-size: 15px; color: #1f6fd1; }

.quiz-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  -webkit-text-stroke: 0.16em rgba(5, 20, 90, 0.75);
  paint-order: stroke fill;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(5, 20, 90, 0.2);
}
.chip--right { background: linear-gradient(#7fd894, #34b45a); }
.chip--streak { background: linear-gradient(#ffc48a, #ff8a3d); }

.quiz-steps {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.quiz-steps li { flex: 1; height: 11px; background: #dcebf7; border-radius: 4px; transition: background 0.3s ease; }
.quiz-steps li.is-current { background: #8fcfff; }
.quiz-steps li.is-right { background: #ffc61a; }
.quiz-steps li.is-wrong { background: #ff9c94; }

.quiz-card {
  margin-top: 18px;
  padding: 24px 18px 20px;
  background: var(--cream);
  border: 4px solid #32baec;
  border-radius: 36px;
  box-shadow: 0 0 0 4px #fff, var(--card-shadow);
}

.quiz-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.quiz-question {
  float: left;
  width: 100%;
  padding: 0 6px 12px;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.22;
  text-align: center;
}
.quiz-question:focus { outline: none; }

.quiz-answers { clear: both; display: grid; gap: 12px; }

.answer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 10px 54px;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(#fffdf4, #fcf2d6);
  border: 2.5px solid #ecd28f;
  border-radius: 20px;
  box-shadow: 0 4px 0 #dcbf76;
  transition: transform 0.12s ease, background 0.2s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.answer:hover { transform: translateY(-1px); }
.answer input { position: absolute; opacity: 0; pointer-events: none; }

.answer-mark {
  position: absolute;
  right: 16px;
  width: 28px;
  height: 28px;
  background: #fff8e4 center / 16px no-repeat;
  border: 2.5px solid #e2c27a;
  border-radius: 50%;
}

.answer:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Picked, before the reveal. */
.answer:has(input:checked):not(.is-right, .is-wrong) {
  background: linear-gradient(#fff6b8, #ffe36b);
  border-color: #f0b400;
  box-shadow: 0 4px 0 #cf9500;
}
.answer:has(input:checked):not(.is-right, .is-wrong) .answer-mark {
  background-color: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  border-color: #fff;
  box-shadow: 0 0 0 2px #2563eb;
}

.answer.is-right {
  background: linear-gradient(#d4f8d8, #92e4a1);
  border-color: #2eb55c;
  box-shadow: 0 4px 0 #1f8a45;
}
.answer.is-right .answer-mark {
  background-color: #2eb55c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  border-color: #fff;
  box-shadow: 0 0 0 2px #2eb55c;
}
.answer.is-wrong {
  background: linear-gradient(#ffdcd8, #ffaaa2);
  border-color: #e5484d;
  box-shadow: 0 4px 0 #b3262c;
}
.answer.is-wrong .answer-mark {
  background-color: #e5484d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  border-color: #fff;
  box-shadow: 0 0 0 2px #e5484d;
}
.answer.is-dim { opacity: 0.5; }
.quiz-fieldset:disabled .answer { cursor: default; transform: none; }

.quiz-lock { width: 100%; margin-top: 20px; }

.quiz-result:empty { display: none; }

.quiz-result {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  margin-top: 18px;
  padding: 18px 20px 20px;
  background: #fffdf6;
  border: 3px solid #fff;
  border-radius: 26px;
  box-shadow: 0 0 0 2.5px var(--tone, #2eb55c), var(--card-shadow);
}
.quiz-result.is-wrong { --tone: #e5484d; }

.result-star { grid-row: span 2; width: 84px; }
.result-verdict { font-weight: 700; font-size: 26px; line-height: 1.1; }
.result-answer { font-weight: 600; color: var(--ink); }
.result-explanation { grid-column: 1 / -1; margin-top: 10px; color: var(--ink); }
.result-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.result-actions .jelly { flex: 1 1 200px; }

/* ---------- Packs ---------- */

.topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 10px;
  max-width: 980px;
  margin: 32px auto 0;
  padding: 0;
  border: 0;
}

.topic-input { position: absolute; opacity: 0; pointer-events: none; }

.topic {
  --top: #fffef6;
  --bottom: #f3e2b2;
  --plinth: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 4px 18px 4px 8px;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  -webkit-text-stroke: 0.15em var(--navy);
  paint-order: stroke fill;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(var(--top), var(--bottom) 70%);
  border: 2.5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--plinth), 0 10px 18px rgba(5, 20, 90, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.topic img { width: 36px; height: 36px; }
.topic:hover { transform: translateY(-2px); }
.topic--all { padding: 4px 22px; color: var(--navy); -webkit-text-stroke: 0; }

.topic--music { --top: #ffa0c8; --bottom: #ec3d86; --plinth: #a3184f; }
.topic--film { --top: #a9b2ff; --bottom: #4b56d6; --plinth: #262e8f; }
.topic--sports { --top: #8fd6ff; --bottom: #1e9be8; --plinth: #0b5f9e; }
.topic--geography { --top: #86e8dc; --bottom: #16a89a; --plinth: #0b6e66; }
.topic--history { --top: #ffd77a; --bottom: #f7a823; --plinth: #b86a00; }
.topic--science { --top: #9be68a; --bottom: #33b553; --plinth: #16783a; }
.topic--food { --top: #ffb08a; --bottom: #f0603a; --plinth: #a8361a; }

.topic-input:checked + .topic {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 0 3px var(--navy), 0 6px 0 var(--plinth), 0 12px 20px rgba(5, 20, 90, 0.2);
}
.topic-input:focus-visible + .topic { outline: 3px solid #fff; outline-offset: 4px; }

/* Rows stay centred, so a short last row or a filtered topic sits in the middle. */
.pack-grid {
  --columns: 7;
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.pack {
  flex: 0 0 calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
  padding: 7px 7px 10px;
  text-align: center;
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.pack:hover { transform: translateY(-5px) rotate(-1.5deg); }
.pack img { width: 100%; aspect-ratio: 1; border-radius: 17px; }
.pack span { display: block; margin-top: 9px; padding: 0 4px; font-weight: 700; font-size: 15px; line-height: 1.15; }

/* Picking a topic shows only its packs: no script needed. */
.packs:has(#topic-music:checked) .pack:not([data-topic="music"]),
.packs:has(#topic-film:checked) .pack:not([data-topic="film"]),
.packs:has(#topic-sports:checked) .pack:not([data-topic="sports"]),
.packs:has(#topic-geography:checked) .pack:not([data-topic="geography"]),
.packs:has(#topic-history:checked) .pack:not([data-topic="history"]),
.packs:has(#topic-science:checked) .pack:not([data-topic="science"]),
.packs:has(#topic-food:checked) .pack:not([data-topic="food"]) {
  display: none;
}

.pack-note { margin-top: 30px; font-weight: 600; text-align: center; }

/* ---------- FAQ ---------- */

.faq-list { display: grid; gap: 14px; max-width: 820px; margin: 40px auto 0; }

.faq-item {
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: var(--card-shadow);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 24px;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  border-radius: 21px;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* The round navy arrow from the app's home cards. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 17px no-repeat, linear-gradient(#21388c, var(--navy));
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(5, 20, 90, 0.35);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(90deg); }

.faq-item p { padding: 0 24px 22px; color: var(--ink); font-size: 17px; }

/* ---------- Finale and footer ---------- */

.finale {
  position: relative;
  margin-top: clamp(64px, 8vw, 110px);
  text-align: center;
}

.finale-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.finale-star { width: clamp(150px, 15vw, 200px); margin-bottom: 6px; filter: drop-shadow(0 12px 12px rgba(5, 20, 90, 0.22)); }
.finale-lead { margin: 14px 0 30px; font-weight: 600; font-size: clamp(18px, 1.5vw, 20px); }
.finale-note { margin-top: 22px; font-weight: 600; }

.garden { display: block; margin-top: clamp(-220px, -12vw, -60px); }
.garden img {
  width: 100%;
  -webkit-mask-image: linear-gradient(transparent 0, #000 24%);
  mask-image: linear-gradient(transparent 0, #000 24%);
}

.footer {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px 24px;
  text-align: center;
}
.footer-brand,
.footer-fine {
  padding: 6px 16px;
  background: rgba(255, 250, 232, 0.92);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(5, 20, 90, 0.15);
}
.footer-brand { font-weight: 700; }
.footer-fine { font-size: 13px; color: var(--ink); }

/* ---------- Smaller screens ---------- */

@media (max-width: 1080px) {
  .topnav { display: none; }
  .topbar .jelly { margin-left: auto; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 112px;
    text-align: center;
    background-image: url("/assets/img/art/sky-tall.webp");
    background-position: center top;
  }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .facts { justify-content: center; }
  .hero-stage { width: min(560px, 100%); height: clamp(500px, 92vw, 640px); margin: 18px auto 0; }

  .mode-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }

  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature-copy { order: 0; }
  .feature-copy { max-width: 640px; margin-inline: auto; }
  .feature-stage { min-height: 0; padding-top: 20px; }

  .pack-grid { --columns: 5; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar { padding-top: 14px; }
  .brand-icon { width: 42px; height: 42px; }
  .brand-name { font-size: 28px; }

  .hero { padding-bottom: 72px; }
  .phone--hero-front { --w: min(62vw, 250px); left: 50%; top: 4%; transform: translateX(-62%) rotate(-4deg); }
  .phone--hero-back { --w: min(52vw, 210px); right: -2%; top: 10%; }
  .hero-mascot { left: -2%; top: 0; width: min(30vw, 130px); }
  .hero-avatar--astronaut { left: 2%; bottom: 10%; }
  .hero-avatar--fox { right: 4%; bottom: 0; }

  .bubble { padding: 14px 26px; }

  .mode-card { padding-right: 112px; min-height: 112px; }
  .mode-art { width: 100px; }
  .mode-art--wide { width: 112px; top: 22px; }

  .phone--feature { --w: min(46vw, 230px); }
  .phone--tilt-left { margin-right: -22px; }
  .perks { grid-template-columns: minmax(0, 1fr); }

  .quiz-head { grid-template-columns: auto minmax(0, 1fr); }
  .quiz-chips { grid-column: 1 / -1; justify-content: flex-start; }
  .answer { font-size: 18px; padding-inline: 46px; }

  .pack-grid { --columns: 3; --gap: 12px; }
  .pack { border-radius: 20px; padding: 5px 5px 8px; }
  .pack img { border-radius: 14px; }
  .pack span { font-size: 13px; }

  .topic { min-height: 42px; font-size: 15px; }
  .topic img { width: 30px; height: 30px; }

  .garden { margin-top: -40px; }
  .footer { padding-bottom: 18px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-mascot { animation: bob 3.2s ease-in-out infinite; }
  .hero-avatar--fox { animation: bob 3.8s ease-in-out 0.6s infinite; }
  .hero-avatar--astronaut { animation: bob 4.2s ease-in-out 1.2s infinite; }
  .sparkle { animation: twinkle 2.6s ease-in-out infinite; }
  .sparkle--2 { animation-delay: 0.9s; }
  .sparkle--3 { animation-delay: 1.7s; }
  .presenter-star, .finale-star { animation: wave 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
  .mode-art { animation: bob 3s ease-in-out infinite; }
  .mode:nth-child(2) .mode-art { animation-delay: 0.35s; }
  .mode:nth-child(3) .mode-art { animation-delay: 0.7s; }
  .mode-card::after { animation: sweep 7s ease-in-out 1.8s infinite; }
  .mode:nth-child(2) .mode-card::after { animation-delay: 2.02s; }
  .mode:nth-child(3) .mode-card::after { animation-delay: 2.24s; }
  .jelly--shine::after { animation: sweep 4.2s ease-in-out 1.2s infinite; }
  .stage-star { animation: bob 3.4s ease-in-out infinite; }
  .stage-star--2 { animation-delay: 1.1s; }
  .modes::before, .feature::before, .packs::before, .faq::before { animation: drift 26s ease-in-out infinite alternate; }

  .quiz-result { animation: pop-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
  .answer.is-right { animation: hop 0.5s ease both; }
  .answer.is-wrong { animation: shake 0.4s ease both; }
  .packs:has(.topic-input:not(#topic-all):checked) .pack { animation: pop-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }

  /* Cards rise into place as they scroll in, in browsers that tie animations to scrolling. */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes wave {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; translate: 0 -6px; }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; scale: 1; }
  50% { opacity: 0.35; scale: 0.6; }
}

@keyframes sweep {
  0%, 70% { background-position: 160% 0; }
  92%, 100% { background-position: -60% 0; }
}

@keyframes drift {
  from { translate: 0 0; }
  to { translate: 48px 6px; }
}

@keyframes rise {
  from { opacity: 0; translate: 0 48px; scale: 0.97; }
}

@keyframes pop-in {
  from { opacity: 0; scale: 0.9; }
}

@keyframes hop {
  30% { translate: 0 -8px; }
  60% { translate: 0 2px; }
}

@keyframes shake {
  20%, 60% { translate: -6px 0; }
  40%, 80% { translate: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 130px 20px 40px;
  background: url("/assets/img/art/sky-tall.webp") center top / cover no-repeat, var(--sky-top);
}

.lost-card {
  position: relative;
  width: min(420px, 100%);
  padding: 100px 26px 32px;
  text-align: center;
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 32px;
  box-shadow: var(--card-shadow);
}

.lost-star {
  position: absolute;
  left: 50%;
  top: -100px;
  width: 190px;
  translate: -50% 0;
  filter: drop-shadow(0 12px 12px rgba(5, 20, 90, 0.22));
}

.lost-title { font-weight: 700; font-size: 46px; }
.lost-text { margin: 10px 0 26px; font-weight: 600; color: var(--ink); }