/*
  Kitten & Ducks — visual design pass v1
  Story-driven, asset-led, CSS-only presentation.
*/

@property --shine-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -40%;
}

@property --route-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

:root {
  --bg: #08131d;
  --bg-deep: #061018;
  --panel: rgba(15, 31, 42, .72);
  --panel-strong: rgba(13, 27, 37, .88);
  --text: #fffaf0;
  --muted: #bdc9cf;
  --yellow: #ffd84d;
  --yellow-soft: #ffe98e;
  --orange: #ff9f36;
  --blue: #75cfff;
  --green: #77d46a;
  --pink: #ff8bb7;
  --line: rgba(255,255,255,.10);
  --shadow: 0 30px 80px rgba(0,0,0,.28);
  --shadow-soft: 0 18px 48px rgba(0,0,0,.20);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 4%, rgba(255,168,55,.10), transparent 23rem),
    radial-gradient(circle at 84% 26%, rgba(89,190,255,.08), transparent 26rem),
    linear-gradient(180deg, #091621 0%, #0a1821 43%, #08131b 74%, #061018 100%);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }

main { position: relative; isolation: isolate; overflow: clip; }

/* ------------------------------------------------------------------
   Shared typography / layout
   ------------------------------------------------------------------ */
.section-shell {
  width: var(--shell);
  margin-inline: auto;
}

.section-shell--wide {
  width: min(1320px, calc(100% - 40px));
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--yellow);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

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

h2 {
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 5vw, 5.1rem);
  line-height: .95;
  letter-spacing: -.045em;
}

h2 span,
h2 em {
  color: var(--yellow);
  font-style: normal;
}

h3 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.03;
  letter-spacing: -.025em;
}

p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.68;
}

.lede {
  color: #e6eef1;
  font-size: clamp(1.05rem, 1.5vw, 1.23rem);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 54px;
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  width: min(920px, calc(100% - 24px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 9px 11px 9px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(7, 17, 25, .68);
  box-shadow: 0 18px 55px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.mini-brand,
.site-nav {
  display: flex;
  align-items: center;
}

.mini-brand {
  gap: 9px;
  padding-right: 10px;
  color: #fff;
  font-size: .92rem;
  font-weight: 900;
  text-decoration: none;
}

.mini-brand img { width: 31px; height: 31px; }

.site-nav { gap: 5px; }
.site-nav a {
  padding: 9px 13px;
  border-radius: 999px;
  color: #c7d0d6;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.site-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Hero — world introduction
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 112px 18px 84px;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(circle at 50% 37%, rgba(255, 212, 91, .08), transparent 28rem),
    radial-gradient(circle at 20% 65%, rgba(69, 172, 83, .10), transparent 24rem),
    radial-gradient(circle at 82% 62%, rgba(77, 177, 229, .08), transparent 24rem);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 30%;
  background: linear-gradient(to bottom, transparent, #0a1821 78%);
  pointer-events: none;
}

.hero__world {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero__canopy {
  position: absolute;
  top: -8%;
  width: min(34vw, 470px);
  opacity: .52;
  filter: saturate(.92) brightness(.76) drop-shadow(0 18px 30px rgba(0,0,0,.22));
}
.hero__canopy--left { left: -7%; transform: rotate(7deg); transform-origin: top left; }
.hero__canopy--right { right: -7%; transform: scaleX(-1) rotate(6deg); transform-origin: top right; }

.hero__meadow {
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: min(1200px, 100%);
  transform: translateX(-50%);
  opacity: .56;
  filter: saturate(.95) brightness(.73);
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 35%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 35%, #000 100%);
}

.hero__layout {
  position: relative;
  width: min(1440px, 97vw);
  display: grid;
  grid-template-columns: minmax(155px, .72fr) minmax(440px, 700px) minmax(145px, .66fr);
  align-items: center;
  gap: clamp(16px, 3vw, 54px);
}

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.hero__brand {
  width: min(650px, 100%);
  margin: 0 auto 2px;
}

.hero__brand img {
  width: 100%;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.24));
}

.hero__tagline {
  margin: 12px auto 12px;
  color: #fff7df;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.hero__intro {
  width: min(600px, 96%);
  margin: 0 auto 26px;
  color: #c6d0d4;
  font-size: 1rem;
  line-height: 1.62;
}
.hero__intro strong { color: #fff; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 13px 34px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.button--primary {
  position: relative;
  overflow: hidden;
  color: #20200f;
  background: linear-gradient(180deg, #ffe66b, #ffc93d);
  border: 1px solid rgba(255,255,255,.28);
}

.button--primary::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% var(--shine-x);
  width: 26%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent);
  animation: button-shine 6s ease-in-out infinite;
}

@keyframes button-shine {
  0%, 64%, 100% { --shine-x: -40%; }
  82% { --shine-x: 125%; }
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 42px rgba(0,0,0,.27);
}

.hero__character {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  min-height: 370px;
}

.hero__character::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 20px;
  width: 68%;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.27);
  filter: blur(8px);
}

.hero__character img {
  width: clamp(150px, 15vw, 235px);
  max-height: 340px;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.26));
  transform-origin: 50% 100%;
}
.hero__character--ducks img { width: clamp(135px, 13vw, 205px); }

.hero__character--kitten img { animation: kitten-breathe 4.8s ease-in-out infinite; }
.hero__character--ducks img { animation: ducks-bob 3.7s ease-in-out .5s infinite; }

@keyframes kitten-breathe {
  0%, 100% { transform: translateY(0) rotate(-.8deg); }
  50% { transform: translateY(-7px) rotate(.5deg); }
}

@keyframes ducks-bob {
  0%, 100% { transform: translateY(0) rotate(.8deg); }
  48% { transform: translateY(-8px) rotate(-.9deg); }
  62% { transform: translateY(-4px) rotate(.3deg); }
}

/* ------------------------------------------------------------------
   The mission
   ------------------------------------------------------------------ */
.story {
  position: relative;
  min-height: 980px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, .75fr);
  align-items: start;
  gap: clamp(42px, 8vw, 120px);
  padding-block: 138px 150px;
}

.story::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -10vw;
  background:
    radial-gradient(circle at 20% 32%, rgba(100, 205, 99, .085), transparent 24rem),
    radial-gradient(circle at 79% 52%, rgba(61, 170, 235, .09), transparent 26rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
}

.story__copy {
  position: sticky;
  top: 145px;
  max-width: 620px;
  padding-top: 26px;
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.feature-chips li {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #dce6e9;
  background: rgba(255,255,255,.035);
  font-size: .79rem;
  font-weight: 850;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.story__visual {
  min-height: 760px;
  display: grid;
  place-items: start center;
}

.gameplay-frame {
  position: sticky;
  top: 108px;
  width: min(350px, 100%);
  isolation: isolate;
  text-align: center;
}

.gameplay-frame::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: -18% -30%;
  background: url('/assets/gameplay/duck-rescue-world.webp') center / cover no-repeat;
  opacity: .11;
  filter: blur(48px) saturate(1.15);
  transform: scale(1.05);
  -webkit-mask-image: radial-gradient(ellipse, #000 0 35%, transparent 70%);
  mask-image: radial-gradient(ellipse, #000 0 35%, transparent 70%);
}

.phone-frame {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 34px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.10);
  transform: rotate(1.3deg);
  transition: transform .45s cubic-bezier(.16,.8,.2,1), box-shadow .45s ease;
}
.phone-frame::after {
  content: "";
  position: absolute;
  inset: 11px 19% auto;
  height: 5px;
  border-radius: 999px;
  background: rgba(3, 11, 16, .72);
}
.phone-frame img {
  width: 100%;
  border-radius: 35px;
}
.gameplay-frame:hover .phone-frame {
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 42px 96px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.10);
}

.gameplay-frame__environment {
  position: absolute;
  z-index: 2;
  left: -58px;
  right: -50px;
  bottom: 28px;
  pointer-events: none;
}
.gameplay-frame__lilies {
  width: 150px;
  margin-left: auto;
  opacity: .78;
  transform: rotate(5deg);
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.24));
}

.gameplay-frame figcaption {
  width: min(340px, 95%);
  margin: 16px auto 0;
  color: #8ea2ac;
  font-size: .78rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------------
   Duck personality beat
   ------------------------------------------------------------------ */
.duck-break {
  position: relative;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  padding-block: 88px 118px;
}

.duck-break::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -16vw;
  right: -16vw;
  inset-block: 2%;
  background:
    radial-gradient(ellipse at 24% 54%, rgba(101, 199, 94, .08), transparent 29rem),
    radial-gradient(ellipse at 72% 52%, rgba(255, 209, 76, .05), transparent 24rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 85%, transparent);
}

.duck-break__visual {
  display: grid;
  place-items: center;
}
.duck-break__visual img {
  width: min(420px, 100%);
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.24));
  animation: peek-bob 5.4s ease-in-out infinite;
}
@keyframes peek-bob {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  48% { transform: translateY(-10px) rotate(.5deg); }
}

.duck-break__copy {
  max-width: 650px;
}
.duck-break__copy h2 { max-width: 720px; }
.duck-break__copy p:last-child {
  max-width: 580px;
  color: #d4dfe2;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
}

/* ------------------------------------------------------------------
   Characters
   ------------------------------------------------------------------ */
.characters {
  position: relative;
  padding-block: 130px 150px;
  container-type: inline-size;
}

.characters::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 4% -9vw;
  background:
    radial-gradient(circle at 15% 22%, rgba(255,165,48,.07), transparent 20rem),
    radial-gradient(circle at 82% 30%, rgba(87,185,239,.065), transparent 20rem),
    radial-gradient(circle at 45% 82%, rgba(107,201,105,.06), transparent 27rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

.characters__heading { max-width: 820px; }
.characters__heading > p:last-child { max-width: 680px; }

.character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.character-card {
  --accent: var(--yellow);
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 23%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 35%),
    linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.016));
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  isolation: isolate;
  transition: transform .38s cubic-bezier(.16,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.character-card--orange { --accent: #ffad42; }
.character-card--gray   { --accent: #7ccaff; }
.character-card--white  { --accent: #ff93be; }
.character-card--black  { --accent: #8cd76f; }

.character-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.065) 50%, transparent 62%);
  background-size: 230% 100%;
  background-position: 115% 0;
  opacity: 0;
}

.character-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 34px 82px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.055);
}
.character-card:hover::after {
  opacity: 1;
  animation: card-sheen .95s ease both;
}
@keyframes card-sheen { to { background-position: -115% 0; } }

.character-card__portrait {
  min-height: 355px;
  display: grid;
  place-items: end center;
  padding: 22px 24px 0;
  overflow: hidden;
}
.character-card__portrait img {
  width: min(390px, 82%);
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.26));
  transition: transform .42s cubic-bezier(.16,.8,.2,1);
}
.character-card:hover .character-card__portrait img { transform: translateY(-6px) scale(1.025); }

.character-card__copy {
  position: relative;
  z-index: 3;
  padding: 24px 28px 28px;
  border-top: 1px solid rgba(255,255,255,.065);
  background: linear-gradient(180deg, rgba(7,17,24,.34), rgba(7,17,24,.66));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.character-card__role {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .17em;
}
.character-card__copy p:last-child { margin-bottom: 0; font-size: .94rem; line-height: 1.58; }

/* ------------------------------------------------------------------
   How it feels
   ------------------------------------------------------------------ */
.how-it-plays {
  position: relative;
  padding-block: 116px 150px;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.steps::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  top: 44%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,216,77,.25) 0 11px, transparent 11px 21px);
  transform: scaleX(var(--route-progress));
  transform-origin: left;
}

.step {
  position: relative;
  min-height: 500px;
  display: grid;
  grid-template-rows: 285px auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255,255,255,.052), rgba(255,255,255,.016));
  box-shadow: var(--shadow-soft);
  transition: transform .32s ease, border-color .32s ease;
}
.step:nth-child(2) { transform: translateY(34px); }
.step:hover { border-color: rgba(255,216,77,.18); transform: translateY(-5px); }
.step:nth-child(2):hover { transform: translateY(29px); }

.step__visual {
  display: grid;
  place-items: center;
  padding: 18px 18px 0;
  background: radial-gradient(circle at 50% 58%, rgba(255,216,77,.07), transparent 60%);
}
.step__visual img {
  width: 88%;
  max-height: 265px;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.22));
}
.step--guide .step__visual img,
.step--home .step__visual img { width: 98%; }

.step__copy { padding: 20px 22px 24px; }
.step__number {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin-bottom: 16px;
  border-radius: 14px;
  color: #302b0f;
  background: linear-gradient(180deg, #ffe975, #ffd143);
  font-size: .77rem;
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.step__copy p { margin-bottom: 0; font-size: .92rem; line-height: 1.55; }

/* ------------------------------------------------------------------
   Final scene
   ------------------------------------------------------------------ */
.coming-soon {
  position: relative;
  min-height: 900px;
  display: grid;
  align-items: center;
  padding-block: 145px 112px;
  isolation: isolate;
  overflow: hidden;
}

.coming-soon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, #08131b 0%, rgba(8,19,27,.32) 19%, rgba(6,14,20,.45) 70%, #061018 100%);
  pointer-events: none;
}

.coming-soon__world {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.coming-soon__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .50;
  filter: saturate(.78) brightness(.62);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
}

.coming-soon__lantern {
  position: absolute;
  left: clamp(12px, 3vw, 50px);
  bottom: clamp(30px, 7vw, 90px);
  width: clamp(90px, 11vw, 155px);
  opacity: .88;
  filter: drop-shadow(0 0 34px rgba(255,187,69,.25)) drop-shadow(0 24px 26px rgba(0,0,0,.28));
  animation: lantern-breathe 4.6s ease-in-out infinite alternate;
}
@keyframes lantern-breathe {
  to { filter: drop-shadow(0 0 52px rgba(255,187,69,.38)) drop-shadow(0 24px 26px rgba(0,0,0,.28)); }
}

.coming-soon__layout {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(420px, 1.05fr);
  align-items: end;
  gap: clamp(36px, 6vw, 80px);
}

.coming-soon__cuddle {
  align-self: end;
}
.coming-soon__cuddle img {
  width: min(640px, 100%);
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.30));
}

.coming-soon__copy {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(8,20,28,.79), rgba(9,21,29,.58));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.coming-soon__copy h2 {
  margin-bottom: 18px;
  font-size: clamp(2.5rem, 4.4vw, 4.8rem);
}
.coming-soon__copy > p:last-of-type { margin-bottom: 24px; }

.faq { display: grid; gap: 10px; }
.faq__item {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  transition: border-color .2s ease, background .2s ease;
}
.faq__item:hover,
.faq__item[open] {
  border-color: rgba(255,216,77,.19);
  background: rgba(255,255,255,.052);
}
.faq__item summary {
  position: relative;
  padding: 15px 46px 15px 16px;
  color: #f5f7f2;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  font-weight: 900;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yellow);
  font-size: 1.2rem;
  transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p {
  margin: 0;
  padding: 0 16px 16px;
  color: #aebfc6;
  font-size: .86rem;
  line-height: 1.55;
}

@supports selector(details::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .32s ease, opacity .24s ease, content-visibility .32s allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0 30px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #758892;
  font-size: .74rem;
}
.site-footer a {
  color: #9eb0b9;
  text-decoration: none;
}
.site-footer a:hover { color: #fff; }

/* ------------------------------------------------------------------
   Scroll-linked choreography — enhancement only
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  .story__copy,
  .gameplay-frame,
  .duck-break__visual,
  .duck-break__copy,
  .characters__heading,
  .character-card,
  .section-heading--center,
  .step,
  .coming-soon__cuddle,
  .coming-soon__copy {
    animation: reveal-on-view linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 26%;
  }

  .character-card:nth-child(2),
  .character-card:nth-child(4),
  .step:nth-child(2) { animation-range: entry 7% cover 31%; }

  @keyframes reveal-on-view {
    from {
      opacity: 0;
      transform: translateY(36px) scale(.975);
      filter: blur(7px) saturate(.75);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0) saturate(1);
    }
  }

  .gameplay-frame {
    animation-name: gameplay-on-view;
    animation-range: entry 0% cover 36%;
  }
  @keyframes gameplay-on-view {
    from {
      opacity: .25;
      transform: translateY(46px) rotate(4deg) scale(.94);
      filter: blur(7px) saturate(.65);
    }
    to {
      opacity: 1;
      transform: translateY(0) rotate(0) scale(1);
      filter: blur(0) saturate(1);
    }
  }

  .steps::before {
    animation: route-draw linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 62%;
  }
  @keyframes route-draw {
    from { --route-progress: 0; opacity: .05; }
    to { --route-progress: 1; opacity: 1; }
  }
}

/* ------------------------------------------------------------------
   Responsive layout
   ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .hero__layout {
    grid-template-columns: minmax(125px, .48fr) minmax(420px, 650px) minmax(120px, .45fr);
    gap: 18px;
  }
  .hero__character img { width: clamp(135px, 15vw, 190px); }
  .hero__character--ducks img { width: clamp(120px, 13vw, 170px); }

  .story { grid-template-columns: 1fr 340px; gap: 54px; }
  .coming-soon__layout { grid-template-columns: .9fr 1.1fr; }
}

@media (max-width: 840px) {
  :root { --shell: min(700px, calc(100% - 28px)); }

  .site-header { top: 9px; width: calc(100% - 18px); justify-content: center; }
  .site-nav { display: none; }

  h2 { font-size: clamp(2.45rem, 10vw, 4.15rem); }

  .hero {
    min-height: auto;
    padding: 90px 12px 56px;
  }
  .hero__layout {
    width: min(700px, 96vw);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "content content"
      "kitten ducks";
    align-items: end;
    gap: 28px 8px;
  }
  .hero__content { grid-area: content; }
  .hero__character--kitten { grid-area: kitten; }
  .hero__character--ducks { grid-area: ducks; }
  .hero__brand { width: min(540px, 86vw); }
  .hero__intro { width: min(560px, 91vw); }
  .hero__character { min-height: 185px; }
  .hero__character img { width: min(31vw, 165px); max-height: 175px; }
  .hero__character--ducks img { width: min(28vw, 150px); }
  .hero__canopy { width: 44vw; top: -4%; opacity: .34; }
  .hero__meadow { width: 850px; max-width: none; bottom: -2%; opacity: .42; }

  .story {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 46px;
    padding-block: 90px 108px;
  }
  .story__copy,
  .gameplay-frame { position: static; }
  .story__visual { min-height: 0; }
  .gameplay-frame { width: min(320px, 74vw); }

  .duck-break {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 78px 100px;
    text-align: center;
  }
  .duck-break__visual img { width: min(350px, 78vw); }
  .duck-break__copy { margin-inline: auto; }
  .duck-break__copy p:last-child { margin-inline: auto; }

  .characters { padding-block: 100px 118px; }
  .character-grid { gap: 18px; }
  .character-card { min-height: 500px; }
  .character-card__portrait { min-height: 315px; }

  .how-it-plays { padding-block: 90px 118px; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .steps::before { display: none; }
  .step,
  .step:nth-child(2) { min-height: 0; transform: none; }
  .step:hover,
  .step:nth-child(2):hover { transform: translateY(-4px); }
  .step { grid-template-columns: minmax(160px, .82fr) minmax(0, 1.18fr); grid-template-rows: auto; align-items: center; }
  .step__visual { min-height: 250px; }
  .step__visual img { max-height: 230px; }

  .coming-soon {
    min-height: 0;
    padding-block: 110px 80px;
  }
  .coming-soon__layout { grid-template-columns: 1fr; gap: 26px; }
  .coming-soon__cuddle { order: 2; display: grid; place-items: center; }
  .coming-soon__cuddle img { width: min(620px, 92vw); }
  .coming-soon__copy { order: 1; }
  .coming-soon__lantern { width: 100px; opacity: .66; }
}

@media (max-width: 600px) {
  :root { --radius-xl: 26px; --radius-lg: 22px; }

  body { background-color: #08131d; }
  .section-shell,
  .section-shell--wide { width: calc(100% - 24px); }

  .eyebrow { font-size: .67rem; letter-spacing: .16em; }
  p { font-size: .96rem; }

  .hero { padding-top: 82px; }
  .hero__layout { width: 100%; gap: 24px 4px; }
  .hero__brand { width: min(78vw, 390px); }
  .hero__tagline { font-size: clamp(1.25rem, 6.4vw, 1.65rem); }
  .hero__intro { font-size: .94rem; }
  .hero__character { min-height: 150px; }
  .hero__character img { width: min(34vw, 145px); max-height: 150px; }
  .hero__character--ducks img { width: min(31vw, 132px); }
  .hero__canopy { width: 54vw; opacity: .24; }
  .hero__meadow { width: 720px; opacity: .36; }

  .story { padding-block: 72px 88px; }
  .feature-chips { gap: 7px; }
  .feature-chips li { padding: 8px 10px; font-size: .72rem; }
  .gameplay-frame { width: min(270px, 73vw); }
  .gameplay-frame__environment { left: -36px; right: -38px; bottom: 24px; }
  .gameplay-frame__lilies { width: 112px; }
  .phone-frame { padding: 6px; border-radius: 34px; }
  .phone-frame img { border-radius: 29px; }

  .duck-break { padding-block: 66px 82px; }
  .duck-break__visual img { width: min(300px, 82vw); }

  .characters { padding-block: 80px 94px; }
  .section-heading { margin-bottom: 34px; }
  .character-grid { grid-template-columns: 1fr; }
  .character-card { min-height: 0; }
  .character-card__portrait { min-height: 280px; }
  .character-card__portrait img { width: min(290px, 78%); max-height: 300px; }
  .character-card__copy { padding: 20px 22px 23px; }

  .how-it-plays { padding-block: 74px 92px; }
  .steps { gap: 14px; }
  .step { grid-template-columns: 1fr; }
  .step__visual { min-height: 220px; padding-bottom: 0; }
  .step__visual img { width: min(310px, 80%); max-height: 215px; }
  .step--guide .step__visual img,
  .step--home .step__visual img { width: min(360px, 93%); }
  .step__copy { padding: 16px 19px 22px; }

  .coming-soon { padding-block: 86px 62px; }
  .coming-soon__copy { padding: 24px 18px; }
  .coming-soon__background { object-position: 58% center; opacity: .42; }
  .coming-soon__lantern { width: 80px; left: -6px; bottom: 18px; opacity: .5; }
  .coming-soon__cuddle img { width: 94vw; }

  .site-footer {
    width: calc(100% - 24px);
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 20px 26px;
  }
}

@media (max-width: 390px) {
  .hero__character { min-height: 135px; }
  .hero__character img { width: min(35vw, 126px); }
  .hero__character--ducks img { width: min(32vw, 116px); }
  .button { min-height: 47px; padding-inline: 17px; font-size: .88rem; }
  .gameplay-frame { width: min(250px, 73vw); }
}

/* ------------------------------------------------------------------
   Accessibility / reduced motion
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Anchor navigation should clear the floating header. */
#game,
#kittens,
#world {
  scroll-margin-top: 92px;
}

/* On phones/tablets, keep the content immediately visible and reserve
   scroll-linked choreography for larger screens. This avoids mobile jank. */
@media (max-width: 840px) {
  @supports (animation-timeline: view()) {
    .story__copy,
    .gameplay-frame,
    .duck-break__visual,
    .duck-break__copy,
    .characters__heading,
    .character-card,
    .section-heading--center,
    .step,
    .coming-soon__cuddle,
    .coming-soon__copy {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

    .steps::before {
      animation: none !important;
      --route-progress: 1;
    }
  }
}

/* ======================================================================
   MOBILE REBUILD v1.1
   A separate phone/tablet composition. Desktop rules above remain intact.
   ====================================================================== */
@media (max-width: 900px) {
  :root {
    --shell: min(100% - 28px, 700px);
    --radius-xl: 28px;
    --radius-lg: 24px;
  }

  html,
  body,
  main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    min-width: 0;
  }

  .section-shell,
  .section-shell--wide {
    width: min(100% - 28px, 700px) !important;
    margin-inline: auto;
  }

  /* Keep everything immediately visible on mobile. */
  .story__copy,
  .gameplay-frame,
  .duck-break__visual,
  .duck-break__copy,
  .characters__heading,
  .character-card,
  .section-heading--center,
  .step,
  .coming-soon__cuddle,
  .coming-soon__copy {
    opacity: 1 !important;
    filter: none !important;
    animation-timeline: auto !important;
  }

  /* Header */
  .site-header {
    top: 8px;
    width: calc(100% - 18px);
    min-height: 50px;
    justify-content: center;
    padding: 8px 12px;
  }

  .site-nav {
    display: none;
  }

  .mini-brand {
    padding: 0;
    font-size: .90rem;
  }

  .mini-brand img {
    width: 29px;
    height: 29px;
  }

  /* Shared mobile typography */
  h2 {
    font-size: clamp(2.25rem, 10.5vw, 3.8rem);
    line-height: .97;
  }

  h3 {
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
  }

  p {
    font-size: .98rem;
    line-height: 1.60;
  }

  .eyebrow {
    margin-bottom: 11px;
    font-size: .66rem;
    letter-spacing: .15em;
  }

  /* --------------------------------------------------------------
     HERO — text first, then kitten + ducks as one supporting row.
     -------------------------------------------------------------- */
  .hero {
    min-height: auto;
    display: block;
    padding: 82px 14px 46px;
  }

  .hero__layout {
    width: min(100%, 700px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "content content"
      "kitten ducks";
    gap: 28px 8px;
    align-items: end;
  }

  .hero__content {
    grid-area: content;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }

  .hero__brand {
    width: min(82vw, 490px);
    margin-inline: auto;
  }

  .hero__tagline {
    width: min(100%, 470px);
    margin: 12px auto 10px;
    font-size: clamp(1.35rem, 6.4vw, 1.85rem);
  }

  .hero__intro {
    width: min(100%, 500px);
    margin: 0 auto 22px;
    padding-inline: 4px;
    font-size: .96rem;
  }

  .hero__character {
    min-height: 150px;
    height: 150px;
    display: grid;
    place-items: end center;
  }

  .hero__character--kitten {
    grid-area: kitten;
  }

  .hero__character--ducks {
    grid-area: ducks;
  }

  .hero__character img {
    width: min(35vw, 150px);
    max-width: 78%;
    max-height: 145px;
    object-fit: contain;
  }

  .hero__character--ducks img {
    width: min(31vw, 132px);
    max-width: 72%;
  }

  .hero__character::after {
    bottom: 4px;
    width: 52%;
    height: 10px;
  }

  .hero__canopy {
    width: 54vw;
    top: -2%;
    opacity: .18;
  }

  .hero__meadow {
    width: 760px;
    max-width: none;
    bottom: -1%;
    opacity: .32;
  }

  /* --------------------------------------------------------------
     THE MISSION — normal document flow, no sticky behavior.
     -------------------------------------------------------------- */
  .story {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 38px;
    padding-block: 76px 92px;
  }

  .story__copy {
    position: static;
    top: auto;
    max-width: none;
    padding: 0;
    transform: none !important;
  }

  .story__visual {
    min-height: 0;
    display: grid;
    place-items: center;
  }

  .gameplay-frame {
    position: relative;
    top: auto;
    width: min(285px, 72vw);
    margin-inline: auto;
    transform: none !important;
  }

  .gameplay-frame::before {
    inset: -13%;
    opacity: .07;
    filter: blur(38px) saturate(1.08);
  }

  .gameplay-frame__environment {
    left: -28px;
    right: -30px;
    bottom: 22px;
  }

  .gameplay-frame__lilies {
    width: 95px;
    opacity: .54;
  }

  .phone-frame {
    transform: none;
    border-radius: 32px;
  }

  .phone-frame img {
    border-radius: 27px;
  }

  .feature-chips {
    gap: 7px;
    margin-top: 20px;
  }

  .feature-chips li {
    padding: 8px 10px;
    font-size: .73rem;
  }

  /* --------------------------------------------------------------
     DUCK BREAK — image and copy remain one tight visual beat.
     -------------------------------------------------------------- */
  .duck-break {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-block: 70px 86px;
    text-align: center;
  }

  .duck-break::before {
    inset-block: 10%;
    opacity: .7;
  }

  .duck-break__visual {
    width: 100%;
    display: grid;
    place-items: center;
    transform: none !important;
  }

  .duck-break__visual img {
    width: min(300px, 76vw);
    animation: none;
  }

  .duck-break__copy {
    width: min(100%, 570px);
    margin-inline: auto;
    transform: none !important;
  }

  .duck-break__copy p:last-child {
    margin-inline: auto;
  }

  /* --------------------------------------------------------------
     CHARACTERS — one card per row, no hover-only geometry.
     -------------------------------------------------------------- */
  .characters {
    padding-block: 80px 96px;
  }

  .characters__heading {
    max-width: 620px;
    margin-bottom: 34px;
    transform: none !important;
  }

  .character-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .character-card {
    width: 100%;
    min-height: 0;
    grid-template-rows: auto auto;
    border-radius: 26px;
    transform: none !important;
  }

  .character-card:hover {
    transform: none;
  }

  .character-card__portrait {
    min-height: 0;
    height: auto;
    padding: 22px 20px 0;
  }

  .character-card__portrait img {
    width: min(300px, 72vw);
    max-width: 78%;
    max-height: 290px;
    transform: none !important;
  }

  .character-card__copy {
    padding: 20px 22px 24px;
  }

  /* --------------------------------------------------------------
     HOW IT FEELS — three clean stacked story cards.
     -------------------------------------------------------------- */
  .how-it-plays {
    padding-block: 76px 94px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .steps::before {
    display: none;
  }

  .step,
  .step:nth-child(2) {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    transform: none !important;
    border-radius: 24px;
  }

  .step:hover,
  .step:nth-child(2):hover {
    transform: none;
  }

  .step__visual {
    min-height: 0;
    height: auto;
    padding: 20px 16px 4px;
  }

  .step__visual img,
  .step--guide .step__visual img,
  .step--home .step__visual img {
    width: min(330px, 84vw);
    max-width: 92%;
    max-height: 235px;
    object-fit: contain;
  }

  .step__copy {
    padding: 16px 20px 22px;
  }

  .step__number {
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
  }

  /* --------------------------------------------------------------
     FINAL — message first, cuddle scene underneath.
     -------------------------------------------------------------- */
  .coming-soon {
    min-height: 0;
    display: block;
    padding-block: 80px 54px;
  }

  .coming-soon__layout {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .coming-soon__copy {
    order: 1;
    width: 100%;
    padding: 24px 20px;
    transform: none !important;
  }

  .coming-soon__copy h2 {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
  }

  .coming-soon__cuddle {
    order: 2;
    display: grid;
    place-items: center;
    transform: none !important;
  }

  .coming-soon__cuddle img {
    width: min(560px, 94vw);
  }

  .coming-soon__background {
    object-position: 62% center;
    opacity: .32;
    filter: saturate(.72) brightness(.52);
  }

  .coming-soon__lantern {
    display: none;
  }

  .faq {
    gap: 9px;
  }

  /* Footer */
  .site-footer {
    width: calc(100% - 28px);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-block: 20px 28px;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .section-shell,
  .section-shell--wide {
    width: calc(100% - 24px) !important;
  }

  .hero {
    padding-inline: 10px;
    padding-bottom: 38px;
  }

  .hero__layout {
    gap: 24px 2px;
  }

  .hero__brand {
    width: min(80vw, 360px);
  }

  .hero__character {
    height: 132px;
    min-height: 132px;
  }

  .hero__character img {
    width: min(35vw, 128px);
    max-height: 128px;
  }

  .hero__character--ducks img {
    width: min(31vw, 116px);
  }

  .button {
    min-height: 47px;
    padding-inline: 17px;
    font-size: .88rem;
  }

  .story {
    padding-block: 66px 80px;
  }

  .gameplay-frame {
    width: min(260px, 71vw);
  }

  .duck-break {
    padding-block: 62px 76px;
  }

  .duck-break__visual img {
    width: min(280px, 78vw);
  }

  .characters {
    padding-block: 70px 82px;
  }

  .character-card__portrait img {
    width: min(270px, 72vw);
    max-height: 270px;
  }

  .how-it-plays {
    padding-block: 68px 82px;
  }

  .step__visual img,
  .step--guide .step__visual img,
  .step--home .step__visual img {
    width: min(300px, 82vw);
    max-height: 215px;
  }

  .coming-soon {
    padding-block: 72px 48px;
  }

  .coming-soon__copy {
    padding: 22px 17px;
  }

  .coming-soon__cuddle img {
    width: 94vw;
  }
}

/* Explicitly disable scroll-linked reveals for mobile/tablet browsers. */
@media (max-width: 900px) {
  @supports (animation-timeline: view()) {
    .story__copy,
    .gameplay-frame,
    .duck-break__visual,
    .duck-break__copy,
    .characters__heading,
    .character-card,
    .section-heading--center,
    .step,
    .coming-soon__cuddle,
    .coming-soon__copy {
      animation: none !important;
      animation-timeline: auto !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
  }
}

/* ------------------------------------------------------------------
   Language switcher — native <details>, no JavaScript
   ------------------------------------------------------------------ */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-switcher {
  position: relative;
  flex: 0 0 auto;
}

.language-switcher > summary {
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 999px;
  color: #dce4e9;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color .18s ease, background .18s ease;
}

.language-switcher > summary::-webkit-details-marker { display: none; }
.language-switcher > summary::marker { content: ""; }

.language-switcher > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.language-switcher > summary:hover,
.language-switcher[open] > summary {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.language-switcher[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.language-switcher__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 164px;
  display: grid;
  gap: 2px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(8, 18, 27, .96);
  box-shadow: 0 18px 55px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.language-switcher__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #cbd4da;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}

.language-switcher__menu a:hover,
.language-switcher__menu a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.065);
}

.language-switcher__menu a[aria-current="page"] {
  color: #fff4ba;
  background: rgba(255, 221, 98, .09);
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 900px) {
  .site-header {
    justify-content: space-between;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .language-switcher > summary {
    min-width: 48px;
    padding: 9px 10px;
  }
}

@media (max-width: 520px) {
  .site-footer__links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

@media (max-width: 360px) {
  .mini-brand span { display: none; }
}

/* ------------------------------------------------------------------
   CJK typography — local system fonts only, no external font requests.
   ------------------------------------------------------------------ */
html:lang(ja),
html:lang(zh-Hans) {
  line-break: strict;
}

html:lang(ja) body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

html:lang(zh-Hans) body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

html:lang(ja) h2,
html:lang(zh-Hans) h2 {
  line-height: 1.08;
  letter-spacing: -.025em;
}

html:lang(ja) h3,
html:lang(zh-Hans) h3 {
  line-height: 1.15;
  letter-spacing: -.015em;
}

html:lang(ja) .eyebrow,
html:lang(zh-Hans) .eyebrow {
  letter-spacing: .08em;
  text-transform: none;
}

html:lang(ja) .character-card__role,
html:lang(zh-Hans) .character-card__role {
  letter-spacing: .06em;
}

html:lang(ja) .hero__tagline,
html:lang(zh-Hans) .hero__tagline {
  line-height: 1.25;
  letter-spacing: -.015em;
}

html:lang(ja) .language-switcher > summary,
html:lang(zh-Hans) .language-switcher > summary {
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  html:lang(ja) h2,
  html:lang(zh-Hans) h2 {
    font-size: clamp(2rem, 9.2vw, 3.35rem);
    line-height: 1.1;
  }

  html:lang(ja) .hero__tagline,
  html:lang(zh-Hans) .hero__tagline {
    font-size: clamp(1.22rem, 5.8vw, 1.7rem);
  }
}

/* ------------------------------------------------------------------
   404 page — friendly, static, and localized.
   ------------------------------------------------------------------ */
.error-page {
  min-height: 100svh;
  overflow-x: hidden;
}

.not-found {
  position: relative;
  min-height: calc(100svh - 72px);
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(78px, 11vw, 132px) 24px clamp(54px, 8vw, 96px);
  overflow: hidden;
}

.not-found::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 30% 38%, rgba(93, 191, 140, .14), transparent 31%),
    radial-gradient(circle at 72% 58%, rgba(255, 216, 91, .08), transparent 27%),
    linear-gradient(180deg, #0b1017 0%, #10211c 100%);
}

.not-found__world {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.not-found__grass {
  position: absolute;
  left: 50%;
  bottom: -4vw;
  width: min(1500px, 118vw);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  opacity: .72;
  filter: saturate(.92) brightness(.82);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
}

.not-found__layout {
  width: min(970px, 100%);
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(360px, 1.15fr);
  align-items: center;
  gap: clamp(30px, 6vw, 76px);
}

.not-found__duck {
  margin: 0;
  display: grid;
  place-items: center;
}

.not-found__duck img {
  width: min(390px, 100%);
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.24));
  animation: lost-duck-bob 4.8s ease-in-out infinite;
}

.not-found__copy { max-width: 610px; }

.not-found__copy h1 {
  margin: .18em 0 .38em;
  font-size: clamp(2.65rem, 6.4vw, 5.8rem);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.not-found__copy > p:not(.eyebrow) {
  max-width: 52ch;
  margin: 0 0 28px;
  color: var(--text-muted, #c9d2d7);
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  line-height: 1.7;
}

@keyframes lost-duck-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}

@media (max-width: 720px) {
  .not-found {
    min-height: calc(100svh - 62px);
    padding: 78px 18px 46px;
  }

  .not-found__layout {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  .not-found__duck img { width: min(250px, 66vw); }
  .not-found__copy { margin-inline: auto; }
  .not-found__copy h1 { font-size: clamp(2.35rem, 11vw, 3.7rem); }
  .not-found__copy > p:not(.eyebrow) { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .not-found__duck img { animation: none; }
}

/* ------------------------------------------------------------------
   Privacy policy — same world, quieter reading surface.
   ------------------------------------------------------------------ */
.privacy-page {
  min-height: 100svh;
  overflow-x: hidden;
}

.privacy-main {
  position: relative;
  width: min(1080px, calc(100% - 32px));
  margin-inline: auto;
  padding: 128px 0 74px;
}

.privacy-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(1200px, 110vw);
  height: 660px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 214, 91, .08), transparent 27%),
    radial-gradient(circle at 23% 31%, rgba(86, 174, 130, .09), transparent 31%);
  pointer-events: none;
}

.privacy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .65fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  min-height: 390px;
  margin-bottom: 38px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(19, 34, 42, .72), rgba(10, 20, 28, .82));
  box-shadow: 0 30px 90px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}

.privacy-hero__copy h1 {
  margin: .15em 0 .24em;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.privacy-hero__date {
  margin: 22px 0 0;
  color: #98aab3;
  font-size: .9rem;
  line-height: 1.7;
}

.privacy-hero__owl {
  margin: 0;
  display: grid;
  place-items: center;
}

.privacy-hero__owl img {
  width: min(340px, 100%);
  height: auto;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.25));
}

.privacy-content {
  width: min(900px, 100%);
  margin-inline: auto;
}

.privacy-section {
  margin: 0 0 18px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 24px;
  background: rgba(12, 24, 31, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.privacy-section h2 {
  margin: 0 0 20px;
  color: #f4f7f8;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.privacy-section h3 {
  margin: 30px 0 12px;
  color: #edf2f4;
  font-size: 1.08rem;
}

.privacy-section p,
.privacy-section li,
.privacy-address {
  color: #bdc9cf;
  font-size: .98rem;
  line-height: 1.78;
}

.privacy-section p { margin: 0 0 15px; }
.privacy-section p:last-child { margin-bottom: 0; }

.privacy-section ul {
  margin: 5px 0 19px;
  padding-left: 1.3rem;
}

.privacy-section li + li { margin-top: 7px; }

.privacy-section strong { color: #edf3f5; }

.privacy-section a,
.privacy-address a {
  color: #f5dc78;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.privacy-section a:hover,
.privacy-address a:hover { color: #fff2b3; }

.privacy-address {
  margin: 18px 0;
  padding: 17px 19px;
  border-left: 3px solid rgba(245, 220, 120, .65);
  border-radius: 0 13px 13px 0;
  background: rgba(255,255,255,.035);
  font-style: normal;
}

.privacy-section code {
  padding: .13em .36em;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  color: #e9f0f2;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .9em;
  overflow-wrap: anywhere;
}

.privacy-table-wrap {
  width: 100%;
  margin: 20px 0 24px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}

.privacy-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: rgba(5, 14, 20, .32);
  color: #bdc9cf;
  font-size: .88rem;
  line-height: 1.55;
}

.privacy-table th,
.privacy-table td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,.065);
  vertical-align: top;
  text-align: left;
}

.privacy-table th {
  color: #eef3f5;
  background: rgba(255,255,255,.035);
  font-size: .8rem;
  font-weight: 900;
}

.privacy-table tr:last-child td { border-bottom: 0; }

.privacy-back {
  width: min(900px, 100%);
  margin: 38px auto 4px;
  text-align: center;
}

.privacy-page .site-footer {
  margin-top: 14px;
}

html:lang(ja) .privacy-section h2,
html:lang(zh-Hans) .privacy-section h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -.01em;
}

@media (max-width: 760px) {
  .privacy-main {
    width: calc(100% - 24px);
    padding-top: 92px;
    padding-bottom: 52px;
  }

  .privacy-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 4px;
    margin-bottom: 22px;
    padding: 28px 21px 18px;
    text-align: center;
  }

  .privacy-hero__copy h1 {
    font-size: clamp(2.5rem, 13vw, 4.3rem);
  }

  .privacy-hero__date {
    font-size: .82rem;
  }

  .privacy-hero__owl {
    order: 2;
  }

  .privacy-hero__owl img {
    width: min(230px, 64vw);
  }

  .privacy-section {
    padding: 23px 18px;
    border-radius: 19px;
  }

  .privacy-section p,
  .privacy-section li,
  .privacy-address {
    font-size: .94rem;
    line-height: 1.72;
  }

  .privacy-table {
    min-width: 650px;
    font-size: .84rem;
  }
}