/* foraru.world — page styles (mobile first) */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(78px + var(--safe-top));
  background: var(--bg-0);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; height: 100dvh; }
html.no-scroll, html.no-scroll body { overflow: hidden; overscroll-behavior: none; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection { background: rgba(167, 139, 250, 0.45); color: #fff; }

/* ───────── ambient ───────── */

.sky,
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sky { z-index: 0; opacity: 0.9; }
.confetti { z-index: 90; }

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, #2d1650 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #120a20 100%);
}
.aurora i {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  opacity: 0.32;
  will-change: transform;
}
.aurora i:nth-child(1) {
  left: -35vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.55) 0%, transparent 62%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  right: -40vmax; top: 30vh;
  background: radial-gradient(circle, rgba(255, 154, 213, 0.28) 0%, transparent 60%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  left: -20vmax; bottom: -45vmax;
  background: radial-gradient(circle, rgba(109, 63, 224, 0.5) 0%, transparent 62%);
  animation: drift1 38s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-10vmax, -12vmax, 0) scale(0.92); } }

.scroll-line {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--violet), var(--rose), var(--gold));
  opacity: 0;
  transition: opacity 0.4s;
}
body:not(.is-locked) .scroll-line { opacity: 1; }

/* ───────── intro / envelope ───────── */

.intro {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(90% 60% at 50% 40%, rgba(139, 92, 246, 0.25), transparent 70%),
    linear-gradient(180deg, #1b0f30, var(--bg-0));
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  width: 100%;
}

.intro__to {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--lavender);
  transform: rotate(-3deg);
  animation: floatIn 1.2s var(--ease) both;
}

.intro__line {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--text);
  animation: floatIn 1.2s 0.15s var(--ease) both;
}

.intro__hint {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  animation: floatIn 1.2s 0.3s var(--ease) both, breathe 2.6s 1.5s ease-in-out infinite;
}
.intro__hint.is-nudge { color: var(--lilac); }

@keyframes floatIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes breathe { 50% { opacity: 0.55; } }

.envelope {
  --w: min(78vw, 320px);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 0.66);
  margin: 40px 0 18px;
  perspective: 900px;
  animation: envIn 1.1s var(--ease-bounce) both, envFloat 5s 1.2s ease-in-out infinite;
}
@keyframes envIn { from { opacity: 0; transform: translateY(30px) rotate(-6deg) scale(0.9); } }
@keyframes envFloat { 50% { transform: translateY(-6px) rotate(0.6deg); } }

.envelope__back,
.envelope__pocket,
.envelope__flap { position: absolute; inset: 0; border-radius: 14px; }

.envelope__back {
  background: linear-gradient(160deg, #5b33b5, #3c1f7c);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(139, 92, 246, 0.6);
}

.envelope__letter {
  position: absolute;
  left: 7%; right: 7%;
  top: 8%; bottom: 6%;
  padding: 16% 12% 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform 1s 0.45s var(--ease);
}
.envelope__letter-line { height: 5px; border-radius: 3px; background: rgba(93, 75, 128, 0.25); }
.envelope__letter-line.short { width: 60%; }
.envelope__letter-heart { margin-top: 4px; font-size: 1.1rem; }

.envelope__pocket {
  background: linear-gradient(200deg, #7a4fe0, #5a32b8 70%);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.15);
}
.envelope__pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(255, 255, 255, 0.08) 50%, transparent 50.4%),
    linear-gradient(to top left, transparent 49.6%, rgba(255, 255, 255, 0.08) 50%, transparent 50.4%);
}

.envelope__flap {
  z-index: 2;
  background: linear-gradient(180deg, #8d64f0, #6a40d6);
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  transform-origin: 50% 0;
  transition: transform 0.75s var(--ease), z-index 0s 0.38s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.envelope.is-open .envelope__flap { transform: rotateX(180deg); z-index: 0; }
.envelope.is-open .envelope__letter { transform: translateY(-58%); }

.seal {
  --size: 92px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.25s var(--ease), opacity 0.4s;
}
.seal:active { transform: scale(0.96); }
.seal.is-pressing { transform: scale(0.94); }

.seal__ring {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.seal__ring-track { fill: none; stroke: rgba(230, 219, 255, 0.14); stroke-width: 3; }
.seal__ring-fill {
  fill: none;
  stroke: var(--lavender);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 289.03;
  stroke-dashoffset: 289.03;
  filter: drop-shadow(0 0 6px rgba(201, 179, 255, 0.9));
}

.seal__wax {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 47% 53% 50% 50% / 52% 48% 54% 46%;
  background:
    radial-gradient(circle at 35% 30%, #b98cff 0%, #7c45e6 28%, #4e1fa8 70%, #34106f 100%);
  box-shadow:
    inset 0 -6px 12px rgba(20, 0, 50, 0.55),
    inset 0 5px 10px rgba(255, 255, 255, 0.25),
    0 8px 22px -6px rgba(10, 0, 30, 0.8),
    0 0 0 5px rgba(124, 69, 230, 0.35);
  animation: sealPulse 2.6s ease-in-out infinite;
}
.seal__wax::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.seal__letter {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: #e9dcff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.25);
}
@keyframes sealPulse {
  50% { box-shadow: inset 0 -6px 12px rgba(20, 0, 50, 0.55), inset 0 5px 10px rgba(255, 255, 255, 0.25), 0 8px 22px -6px rgba(10, 0, 30, 0.8), 0 0 0 10px rgba(124, 69, 230, 0.12); }
}
.seal.is-broken { transform: scale(1.5) rotate(18deg); opacity: 0; pointer-events: none; }

/* ───────── page frame ───────── */

.page {
  position: relative;
  z-index: 1;
  width: var(--col);
  margin: 0 auto;
  padding-bottom: calc(40px + var(--safe-bottom));
  opacity: 0;
  transition: opacity 1s 0.2s var(--ease);
}
body:not(.is-locked) .page { opacity: 1; }

.topbar {
  position: fixed;
  z-index: 30;
  top: calc(10px + var(--safe-top));
  left: 50%;
  width: var(--col);
  transform: translate(-50%, -140%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transition: transform 0.7s 0.6s var(--ease);
}
body:not(.is-locked) .topbar { transform: translate(-50%, 0); }
.topbar > * { pointer-events: auto; }

.topbar__brand,
.topbar__petals,
.topbar__sound {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(22, 12, 39, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}
.topbar__brand b { color: var(--lilac); font-weight: 700; }
.topbar__right { display: flex; gap: 8px; }
.topbar__petals svg { width: 16px; height: 16px; color: var(--violet-2); }
.topbar__petals.is-full svg { color: var(--gold); }
.topbar__petals.bump { animation: bump 0.6s var(--ease-bounce); }
@keyframes bump { 40% { transform: scale(1.18); } }
.topbar__sound { width: 38px; padding: 0; justify-content: center; cursor: pointer; }
.topbar__sound svg { width: 18px; height: 18px; fill: currentColor; }
.topbar__sound .off { display: none; }
.topbar__sound[aria-pressed="false"] .on { display: none; }
.topbar__sound[aria-pressed="false"] .off { display: block; }

.section { padding: 76px 0 8px; }

.section__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.1rem, 9vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--lavender);
  text-wrap: balance;
}
.section__title::before {
  content: "✦";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--violet-2);
}
.section__lead {
  margin: 0 0 26px;
  color: var(--text-soft);
  font-size: 0.98rem;
  text-wrap: pretty;
}
.section__lead:empty { display: none; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ───────── hero ───────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(70px + var(--safe-top)) 0 40px;
  text-align: center;
}

.hero__frame {
  position: relative;
  width: min(70vw, 300px);
  aspect-ratio: 3 / 4;
  margin-bottom: 30px;
  border-radius: 36px 36px 26px 26px;
  padding: 7px;
  background: linear-gradient(160deg, rgba(230, 219, 255, 0.55), rgba(139, 92, 246, 0.35) 40%, rgba(255, 154, 213, 0.3));
  box-shadow: 0 30px 80px -30px rgba(139, 92, 246, 0.8), 0 0 0 1px rgba(201, 179, 255, 0.2);
  opacity: 0;
  transform: translateY(30px) scale(0.96);
}
.hero__frame picture { display: block; width: 100%; height: 100%; }
.hero__frame img {
  width: 100%;
  height: 100%;
  border-radius: 30px 30px 20px 20px;
  object-fit: cover;
  object-position: center;
}
.hero__sticker {
  position: absolute;
  right: -8px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 1.6rem;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transform: rotate(12deg);
}

.hero__kicker,
.hero__title,
.hero__subtitle,
.hero__scroll { opacity: 0; transform: translateY(20px); }

body.is-ready .hero__frame { animation: rise 1.2s var(--ease) forwards; }
body.is-ready .hero__kicker { animation: rise 1s 0.25s var(--ease) forwards; }
body.is-ready .hero__title { animation: rise 1.1s 0.4s var(--ease) forwards; }
body.is-ready .hero__subtitle { animation: rise 1s 0.6s var(--ease) forwards; }
body.is-ready .hero__scroll { animation: rise 1s 0.9s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero__kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-2);
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.4rem, 17vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fff 0%, var(--lavender) 30%, var(--violet-2) 70%, var(--rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.08em 0.06em;
  text-wrap: balance;
}
.hero__subtitle {
  max-width: 30ch;
  margin: 14px auto 0;
  color: var(--text-soft);
  font-size: 1.02rem;
  text-wrap: pretty;
}
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.hero__scroll i {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(201, 179, 255, 0.18);
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 1px;
  height: 40%;
  background: var(--lilac);
  animation: drip 2s ease-in-out infinite;
}
@keyframes drip { to { top: 100%; } }

/* ───────── letter ───────── */

.letter__sheets { display: grid; gap: 34px; padding-top: 10px; }

.note {
  position: relative;
  padding: 34px 20px 26px 28px;
  border-radius: 6px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 13px, rgba(255, 154, 213, 0.45) 13px 14.5px, transparent 14.5px),
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  opacity: 0;
  transform: translateY(40px) rotate(var(--r, 0deg)) scale(0.98);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.note.in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.note:nth-child(odd) { --r: -0.7deg; }
.note:nth-child(even) { --r: 0.6deg; }

.note::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  background: rgba(167, 139, 250, 0.62);
  transform: rotate(-3deg);
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)),
    repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 5px);
  mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)),
    repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 5px);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.note:nth-child(even)::before { transform: rotate(4deg); background: rgba(255, 154, 213, 0.5); }

.note__label {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.note__heading {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}
.note p.note__text {
  margin: 0 0 10px;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.48rem;
  line-height: 1.32;
  color: #2b1748;
  text-wrap: pretty;
}
.note p.note__text:last-child { margin-bottom: 0; }

.note .note__text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.note.in .note__text { opacity: 1; transform: none; }
.note.in .note__text:nth-of-type(2) { transition-delay: 0.25s; }
.note.in .note__text:nth-of-type(3) { transition-delay: 0.5s; }
.note.in .note__text:nth-of-type(4) { transition-delay: 0.75s; }

.note__corner {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: rgba(93, 75, 128, 0.55);
}

.letter__signature {
  margin: 30px 6px 0 auto;
  max-width: 28ch;
  font-family: var(--font-hand);
  font-size: 1.85rem;
  line-height: 1.15;
  text-align: right;
  color: var(--lilac);
  transform: rotate(-2deg) translateY(22px);
}
.letter__signature.in { transform: rotate(-2deg); }
.letter__signature::after {
  content: "";
  display: block;
  width: 120px;
  height: 12px;
  margin: 6px 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 C 30 2, 60 12, 90 5 S 115 4, 118 6' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ───────── gallery deck ───────── */

.deck {
  --card-w: min(76vw, 320px);
  position: relative;
  height: calc(var(--card-w) * 1.25 + 90px);
  margin: 10px auto 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.polaroid {
  position: absolute;
  left: 50%;
  top: 8px;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  padding: 12px 12px 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #fdfbff, #f3edff);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.2);
  transform-origin: 50% 85%;
  transition: transform 0.55s var(--ease), opacity 0.4s;
  will-change: transform;
  cursor: grab;
}
.polaroid.is-dragging { transition: none; cursor: grabbing; }
.polaroid__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(135deg, #d9cbf7, #b9a3ee);
}
.polaroid__img picture { display: block; width: 100%; height: 100%; }
.polaroid__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.polaroid__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  margin: 0;
  padding: 6px 6px 8px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.42rem;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}
.polaroid__heart {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 5rem;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 6px 20px rgba(109, 63, 224, 0.7));
}
.polaroid__heart.pop { animation: heartPop 0.9s var(--ease) forwards; }
@keyframes heartPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(1.25); }
  55% { transform: translate(-50%, -50%) scale(0.95); }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}
.polaroid__liked {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(0.4);
  transition: 0.4s var(--ease-bounce);
}
.polaroid.liked .polaroid__liked { opacity: 1; transform: none; }

.deck__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 4px;
}
.deck__count {
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.round-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(44, 25, 73, 0.6);
  color: var(--lavender);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.round-btn:active { transform: scale(0.92); background: rgba(139, 92, 246, 0.35); }
.round-btn svg { width: 20px; height: 20px; }

/* ───────── photo booth ───────── */

.booth { text-align: center; }
.booth .section__title::before { margin-left: auto; margin-right: auto; }

.booth__machine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 26px;
}
.booth__slot {
  position: relative;
  z-index: 2;
  width: min(72vw, 270px);
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0a0512, #251641);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(201, 179, 255, 0.25), 0 0 30px -6px rgba(139, 92, 246, 0.7);
}
.booth__strip-wrap {
  margin-top: -9px;
  padding: 0 20px 30px;
  overflow: hidden;
  clip-path: inset(0 -40px -40px -40px);
}
.booth__strip {
  --sw: min(54vw, 210px);
  width: var(--sw);
  margin: 0;
  padding: 12px 10px 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #1c1229, #120a1d);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(201, 179, 255, 0.1);
  transform: translateY(-104%) rotate(0deg);
  transition: transform 2.6s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.booth.in .booth__strip { transform: translateY(0) rotate(2.4deg); }

.booth__brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.booth__brand b { color: var(--lilac); }
.booth__brand small { font-size: 0.62rem; color: var(--muted); }

.booth__frames { display: grid; gap: 8px; }
.booth__frames picture { display: block; }
.booth__frames img {
  width: 100%;
  aspect-ratio: 1 / 0.92;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 2px;
}
.booth__frames img { background: #2a1a40; }

.booth__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 2px;
}
.booth__date {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.booth__stamp {
  padding: 2px 8px;
  border: 1.5px solid var(--rose);
  border-radius: 4px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--rose);
  transform: rotate(-8deg);
  opacity: 0.9;
}
.booth__caption {
  max-width: 30ch;
  margin: 6px auto 0;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--lavender);
}

/* ───────── games + violet ───────── */

.games { text-align: center; }
.games .section__title::before { margin-left: auto; margin-right: auto; }
.games .section__lead { max-width: 34ch; margin-left: auto; margin-right: auto; }

.violet {
  position: relative;
  width: min(60vw, 230px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.violet svg { width: 100%; height: 100%; overflow: visible; }
.violet__petal {
  transition: opacity 0.6s;
}
.violet__petal .petal-empty {
  fill: rgba(167, 139, 250, 0.06);
  stroke: rgba(201, 179, 255, 0.45);
  stroke-width: 1.6;
  stroke-dasharray: 5 6;
}
.violet__petal .petal-full {
  fill: url(#petalFill);
  filter: url(#petalGlow);
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--ease-bounce), opacity 0.5s;
}
.violet__petal.is-on .petal-full { opacity: 1; transform: scale(1); }
.violet__petal.is-new .petal-full { animation: petalIn 1.2s var(--ease-bounce); }
@keyframes petalIn {
  0% { transform: scale(0.1); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.violet__core { filter: drop-shadow(0 0 8px rgba(255, 217, 138, 0.6)); }
.violet.is-bloom svg { animation: bloom 1.6s var(--ease-bounce); }
.violet.is-full .violet__petals { animation: sway 6s ease-in-out infinite; transform-origin: 0 0; }
@keyframes bloom { 30% { transform: scale(0.9) rotate(-8deg); } 70% { transform: scale(1.08) rotate(6deg); } }
@keyframes sway { 50% { transform: rotate(6deg); } }

.games__progress {
  margin: 6px 0 22px;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--lilac);
}

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 138px;
  padding: 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(139, 92, 246, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(44, 25, 73, 0.85), rgba(26, 14, 45, 0.85));
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.game-card:active { transform: scale(0.97); }
.game-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 112px; }
.game-card__emoji { font-size: 2rem; line-height: 1.1; margin-bottom: 4px; }
.game-card__title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text);
}
.game-card__tag {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--text-soft);
}
.game-card__petal {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  color: transparent;
}
.game-card__petal svg { width: 100%; height: 100%; overflow: visible; }
.game-card__petal path { stroke: rgba(201, 179, 255, 0.5); stroke-width: 1.4; stroke-dasharray: 3 3; }
.game-card.is-won { border-color: rgba(167, 139, 250, 0.55); box-shadow: var(--glow); }
.game-card.is-won .game-card__petal { color: var(--violet-2); }
.game-card.is-won .game-card__petal path { stroke: none; }
.game-card.is-won .game-card__tag::after { content: " · есть 💜"; color: var(--lilac); }
.game-card.is-missing { opacity: 0.45; pointer-events: none; }

.secret {
  position: relative;
  margin-top: 26px;
  border-radius: 22px;
  text-align: center;
}
.secret__locked {
  padding: 26px 22px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 22px;
  color: var(--muted);
}
.secret__locked svg { width: 30px; height: 30px; color: var(--violet-2); }
.secret__locked h3 {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--text-soft);
}
.secret__locked p { margin: 0; font-size: 0.9rem; }
.secret.is-open .secret__locked { display: none; }
.secret__open {
  padding: 30px 22px 26px;
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 30px 80px -30px rgba(139, 92, 246, 0.9);
  text-align: left;
  animation: unfold 1.1s var(--ease) both;
}
.secret__open h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--ink);
}
.secret__open p {
  margin: 0 0 10px;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1.3;
  color: #2b1748;
}
@keyframes unfold { from { opacity: 0; transform: perspective(800px) rotateX(-60deg); transform-origin: top; } }

/* ───────── the ask ───────── */

.ask { padding-top: 96px; }
.ask__kicker {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
}
.ask__title { font-size: clamp(2.4rem, 11vw, 3.1rem); }
.ask__title::before { display: none; }

.when {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(33, 18, 55, 0.7);
}
.when__cal {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transform: rotate(-4deg);
}
.when__month {
  width: 100%;
  padding: 3px 0;
  background: linear-gradient(90deg, var(--violet), var(--violet-deep));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
.when__day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  padding-top: 4px;
}
.when__dow { padding-bottom: 6px; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.when__info p { margin: 0; }
.when__date { font-weight: 700; font-size: 1.02rem; }
.when__time {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--lilac);
}
.when__note { font-size: 0.84rem; color: var(--text-soft); }
.when__count {
  margin-top: 6px !important;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--peach);
}
.when__count:empty { display: none; }

.options { display: grid; gap: 12px; }

.option {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-height: 116px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(44, 25, 73, 0.9), rgba(28, 15, 48, 0.9));
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
}
.option:active { transform: scale(0.98); }
.option__art {
  position: relative;
  flex: none;
  width: 98px;
  overflow: hidden;
  border-radius: 15px;
}
.option__art svg { width: 100%; height: 100%; display: block; }
.option--doner .option__art {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 70%, #ffd98a, #ff9f6e 55%, #b75a8f);
}
.option__doner { font-size: 3rem; filter: drop-shadow(0 6px 10px rgba(80, 20, 40, 0.45)); transform: rotate(-12deg); }
.option__steam { position: absolute; top: 10px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
.option__steam i {
  width: 4px; height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  animation: steam 2.4s ease-in-out infinite;
}
.option__steam i:nth-child(2) { animation-delay: 0.6s; }
.option__steam i:nth-child(3) { animation-delay: 1.2s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(8px) scaleY(0.6); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-10px) scaleY(1.2) skewX(10deg); }
}
.option__body {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 4px 26px 4px 0;
}
.option__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.05;
  color: var(--text);
}
.option__text { font-size: 0.86rem; line-height: 1.4; color: var(--text-soft); }
.option__text:empty { display: none; }
.option__place {
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--peach);
}
.option__place small { color: var(--muted); font-size: 0.74rem; }
.option__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: 0.3s var(--ease-bounce);
}
.option[aria-checked="true"] {
  border-color: var(--violet-2);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18), 0 20px 50px -20px rgba(139, 92, 246, 0.9);
  transform: scale(1.015);
}
.option[aria-checked="true"] .option__check {
  border-color: transparent;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transform: scale(1.1);
}
.options.has-choice .option:not([aria-checked="true"]) { opacity: 0.6; }

.option__map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  margin: -4px 0 2px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--peach);
  text-decoration: none;
  justify-self: start;
  border: 1px dashed rgba(255, 198, 165, 0.4);
}
.option__map svg { width: 16px; height: 16px; }

.option--both { min-height: 84px; align-items: center; padding: 14px 16px; }
.option__emoji { flex: none; font-size: 1.5rem; letter-spacing: -0.1em; }
.option--both .option__title { font-size: 1.25rem; }

.confirm { margin-top: 18px; animation: floatIn 0.6s var(--ease) both; }

.no-zone {
  position: relative;
  height: 130px;
  margin-top: 16px;
}
.no-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(22, 12, 39, 0.8);
  color: var(--text-soft);
  font-size: 0.86rem;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: left 0.38s var(--ease), top 0.38s var(--ease), transform 0.38s var(--ease), opacity 0.3s;
  cursor: pointer;
  touch-action: manipulation;
}
.no-btn.is-tame { border-color: var(--line-strong); color: var(--text); background: rgba(44, 25, 73, 0.9); }
.no-btn.is-gotcha { animation: noGotcha 0.55s var(--ease-bounce); }
@keyframes noGotcha { 30% { scale: 1.18; } 60% { scale: 0.94; } 100% { scale: 1; } }
.no-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(33, 18, 55, 0.7);
  border: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-soft);
  text-align: center;
  animation: floatIn 0.6s var(--ease) both;
}

/* ticket */
.ticket-wrap { margin-top: 26px; text-align: center; animation: floatIn 0.8s var(--ease) both; }
.ticket-wrap__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--lavender);
}
.ticket-wrap__lead { margin: 6px auto 20px; max-width: 32ch; color: var(--text-soft); font-size: 0.95rem; }
.ticket-wrap__lead:empty { display: none; }

.ticket {
  --notch: 13px;
  display: flex;
  text-align: left;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.35));
  animation: ticketIn 1.1s var(--ease-bounce) both;
}
@keyframes ticketIn { from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(0.9); } }
.ticket__main {
  flex: 1;
  min-width: 0;
  padding: 18px 16px 16px 20px;
  border-radius: 16px 0 0 16px;
  color: var(--ink);
  background: linear-gradient(135deg, #fbf8ff, #e9dcff);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
}
.ticket__label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
.ticket__title {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.05;
}
.ticket__line { margin: 0 0 10px; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.15; color: var(--ink-soft); }
.ticket__line:empty { display: none; }
.ticket__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 4px 16px;
  margin: 0;
}
.ticket__meta dt { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.ticket__meta dd { margin: 0; font-weight: 700; font-size: 0.9rem; }
.ticket__place { margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.ticket__place:empty { display: none; }
.ticket__stub {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 74px;
  padding: 16px 0;
  border-radius: 0 16px 16px 0;
  border-left: 2px dashed rgba(42, 24, 70, 0.25);
  background: linear-gradient(180deg, var(--violet), var(--violet-deep));
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
}
.ticket__barcode {
  width: 34px;
  flex: 1;
  margin: 6px 0 10px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0 2px, transparent 2px 4px, rgba(255, 255, 255, 0.92) 4px 5px, transparent 5px 8px, rgba(255, 255, 255, 0.92) 8px 11px, transparent 11px 13px);
}
.ticket__no { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); }

.ticket-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

/* ───────── kebab today ───────── */

.kebab__title::before { content: "🌯"; font-size: 1.3rem; }

.kebabs { display: grid; gap: 14px; }

.kebab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(44, 25, 73, 0.92), rgba(24, 13, 42, 0.92));
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
}
.kebab-card:active { transform: scale(0.985); }
.kebab-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 217, 138, 0.55), transparent 60%),
    linear-gradient(135deg, #ff9f6e, #b75a8f 60%, #4b2a85);
}
.kebab-card__photo picture,
.kebab-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kebab-card__photo.no-photo picture { display: none; }
.kebab-card__photo.no-photo::before {
  content: attr(data-emoji) "🌯";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  letter-spacing: 0.1em;
  filter: drop-shadow(0 8px 14px rgba(60, 10, 40, 0.45));
}
.kebab-card__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(20, 10, 35, 0.55));
  pointer-events: none;
}
.kebab-card__badge {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(247, 242, 255, 0.94);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
}
.kebab-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; }
.kebab-card__ko { font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); }
.kebab-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--text);
}
.kebab-card__text { font-size: 0.9rem; line-height: 1.5; color: var(--text-soft); text-wrap: pretty; }
.kebab-card .option__check { top: 14px; right: 14px; background-color: rgba(13, 7, 23, 0.4); }
.kebab-card[aria-checked="true"] {
  border-color: var(--violet-2);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18), 0 20px 50px -20px rgba(139, 92, 246, 0.9);
}
.kebab-card[aria-checked="true"] .option__check {
  border-color: transparent;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transform: scale(1.1);
}
.kebabs.has-choice .kebab-card:not([aria-checked="true"]) { opacity: 0.6; }

.addon {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 16px;
  padding: 14px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.addon input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.addon__box {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  transition: 0.25s var(--ease-bounce);
}
.addon input:checked ~ .addon__box {
  border-color: transparent;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transform: scale(1.08);
}
.addon input:focus-visible ~ .addon__box { outline: 2px solid var(--lilac); outline-offset: 3px; }
.addon.is-on { border-style: solid; border-color: rgba(167, 139, 250, 0.6); background: rgba(139, 92, 246, 0.1); }
.addon__body { display: flex; flex-direction: column; gap: 2px; }
.addon__title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.addon__text { font-size: 0.82rem; line-height: 1.4; color: var(--text-soft); }

.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

.mail-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  text-align: center;
  color: var(--muted);
}

.kebab-done {
  margin-top: 18px;
  padding: 22px 18px 16px;
  border-radius: 22px;
  text-align: center;
  background: rgba(33, 18, 55, 0.75);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: var(--glow);
  animation: floatIn 0.6s var(--ease) both;
}
.kebab-done p { margin: 0; }
.kebab-done__emoji { font-size: 2.6rem; line-height: 1.1; animation: bump 0.8s var(--ease-bounce); }
.kebab-done__title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.8rem; color: var(--lavender); }
.kebab-done__text { margin-top: 4px !important; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.2; color: var(--text); }
.kebab-done__sent { margin-top: 8px !important; font-size: 0.82rem; color: var(--lilac); }
.kebab-done .ticket-actions { margin-top: 14px; }

.ticket-wrap__sent { margin: 16px 0 0; font-size: 0.86rem; color: var(--lilac); }

/* ───────── twilight («Сумерки») ───────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: -10px 0 4px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(22, 12, 39, 0.6);
  color: var(--text-soft);
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.chip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5f8f9c, #2c4a5e);
  box-shadow: 0 0 0 2px rgba(95, 143, 156, 0.25);
}
.chip[aria-pressed="true"] {
  border-color: rgba(125, 170, 180, 0.7);
  background: linear-gradient(135deg, rgba(55, 92, 104, 0.6), rgba(30, 46, 66, 0.7));
  color: #e3f1f4;
}

.polaroid__img img { transition: filter 0.8s var(--ease); }
.polaroid__img::after,
.polaroid__img::before {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.polaroid__img::after {
  content: "";
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 20, 28, 0.55)),
    linear-gradient(180deg, rgba(70, 120, 135, 0.38), rgba(28, 52, 72, 0.42));
  mix-blend-mode: multiply;
}
.polaroid__img::before {
  content: "forks, wa";
  z-index: 1;
  right: 10px;
  bottom: 8px;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: rgba(225, 240, 244, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.deck.is-twilight .polaroid__img img { filter: saturate(0.42) contrast(1.12) brightness(0.95) hue-rotate(-12deg); }
.deck.is-twilight .polaroid__img::after,
.deck.is-twilight .polaroid__img::before { opacity: 1; }

/* dusk forest above the question */
.ask { position: relative; }
.dusk {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 460px;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(38, 58, 84, 0.35) 30%, rgba(22, 40, 58, 0.55) 62%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%);
}
.dusk__moon {
  position: absolute;
  top: 84px;
  right: max(16px, calc(50vw - 200px));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fbf6ff, #d9cff5 60%, #b9acdf);
  box-shadow: 0 0 40px 10px rgba(217, 207, 245, 0.35), 0 0 120px 40px rgba(139, 92, 246, 0.25);
}
.dusk__trees { position: absolute; left: 0; width: 100%; }
.dusk__trees--far { bottom: 120px; height: 120px; fill: #1c2c40; opacity: 0.8; }
.dusk__trees--near { bottom: 70px; height: 150px; fill: #0f1828; }
.dusk__fog {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 90px;
  bottom: 150px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214, 228, 245, 0.32), transparent 70%);
  animation: fog 18s ease-in-out infinite alternate;
}
.dusk__fog--low { bottom: 60px; height: 120px; opacity: 0.9; animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes fog { to { transform: translateX(12%); } }
.ask > :not(.dusk) { position: relative; z-index: 1; }
.ask > .no-zone { position: relative; }
.ask > .ask__kicker { padding-top: 250px; }
.option__mist { animation: mist 9s ease-in-out infinite alternate; }
@keyframes mist { to { transform: translateX(40px); } }

/* ───────── Маңқа (весёлый) и Сквиди (грустный) ───────── */

.octo { text-align: center; }
.octo__title::before { content: "🐙"; font-size: 1.3rem; margin-left: auto; margin-right: auto; }
.octo .section__lead { max-width: 34ch; margin-left: auto; margin-right: auto; }

.octo__toy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 6px 10px 2px;
  border: 0;
  border-radius: 24px;
  background: none;
  cursor: pointer;
  perspective: 900px;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.octo__flip {
  position: relative;
  display: block;
  width: min(56vw, 220px);
  aspect-ratio: 200 / 180;
  transform-style: preserve-3d;
  transition: transform 0.85s var(--ease-bounce);
}
.octo__toy.is-flipped .octo__flip { transform: rotateY(180deg); }
.octo__toy:active .octo__flip { scale: 0.96; }
.octo__side {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.octo__side--squidi { transform: rotateY(180deg); }
.octo__side svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 22px rgba(10, 0, 30, 0.55));
  animation: octoBob 3.6s ease-in-out infinite;
}
@keyframes octoBob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.octo__legs path {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: octoWiggle 2.8s ease-in-out infinite;
}
.octo__legs path:nth-child(even) { animation-delay: -1.4s; }
@keyframes octoWiggle { 50% { transform: rotate(7deg); } }
.octo__bubble {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: octoBubble 2.4s ease-in-out infinite;
}
@keyframes octoBubble { 0%, 100% { transform: scale(0.65); } 50% { transform: scale(1.18); } }
.octo__hint { font-size: 0.78rem; color: var(--muted); transition: opacity 0.4s; }
.octo__toy.was-flipped .octo__hint { opacity: 0; }

.octo__name {
  margin: 2px 0 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--lavender);
}

.octo__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.octo__answer {
  min-height: 52px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(44, 25, 73, 0.6);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.octo__answer:active { transform: scale(0.97); }
.octo__answer[data-octo="manqa"][aria-checked="true"] {
  border-color: #c9a2ff;
  background: linear-gradient(135deg, rgba(212, 176, 255, 0.35), rgba(167, 123, 255, 0.28));
  box-shadow: var(--glow);
}
.octo__answer[data-octo="squidi"][aria-checked="true"] {
  border-color: #8fc7c1;
  background: linear-gradient(135deg, rgba(159, 210, 203, 0.32), rgba(95, 159, 152, 0.28));
  box-shadow: 0 0 0 1px rgba(143, 199, 193, 0.3), 0 10px 40px -10px rgba(95, 159, 152, 0.7);
}
.octo__tear {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: octoTear 3.2s ease-in infinite;
}
@keyframes octoTear {
  0%, 55% { transform: translateY(0) scale(0.6); opacity: 0; }
  65% { opacity: 1; transform: translateY(0) scale(1); }
  100% { transform: translateY(16px) scale(0.9); opacity: 0; }
}
.octo__reply {
  margin-top: 16px;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(33, 18, 55, 0.7);
  animation: floatIn 0.6s var(--ease) both;
}
.octo__reply-text {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text);
}

/* ───────── Жанеля тоже с нами? ───────── */

.buddy {
  padding: 14px;
  border: 1.5px dashed rgba(255, 198, 165, 0.45);
  border-radius: 18px;
  background: rgba(44, 25, 73, 0.45);
  animation: floatIn 0.5s var(--ease) both;
}
.buddy__q {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.98rem;
  text-align: center;
  color: var(--text);
}
.buddy__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buddy__opt {
  min-height: 46px;
  padding: 8px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(13, 7, 23, 0.5);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.buddy__opt[aria-checked="true"] {
  border-color: var(--peach);
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 198, 165, 0.28), rgba(255, 154, 213, 0.2));
}

/* ───────── «уже у меня ✓» ───────── */

.send-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.send-status[data-state="sending"] { color: var(--text-soft); }
.send-status[data-state="sending"] .send-status__text::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sendSpin 0.8s linear infinite;
}
@keyframes sendSpin { to { transform: rotate(360deg); } }
.send-status[data-state="sent"] { color: #9ff0c8; }
.send-status[data-state="failed"] { color: var(--danger); }
.send-status__retry {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.send-status--big {
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 1rem;
}
.send-status--big[data-state="sent"] { background: rgba(159, 240, 200, 0.1); box-shadow: inset 0 0 0 1px rgba(159, 240, 200, 0.35); }
.send-status--big[data-state="failed"] { background: rgba(255, 122, 156, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 122, 156, 0.35); }

.change-time { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.change-time .btn { min-height: 50px; padding: 10px 16px; }

.kebab__kicker {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(255, 154, 213, 0.45);
  border-radius: 999px;
  background: rgba(255, 154, 213, 0.12);
  letter-spacing: 0.12em;
}
.kebab-done #kebabReset { margin-top: 8px; }

/* ticket meta: «кто» on its own row so names never break word-by-word */
.ticket__meta { grid-template-columns: repeat(2, auto); }
.ticket__meta > div:last-child { grid-column: 1 / -1; }
.ticket__meta > div:not(:last-child) dd { white-space: nowrap; }
.option__body { padding-right: 32px; }

/* ───────── «продолжить» after a win ───────── */

.sheet__continue {
  flex: none;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  background: linear-gradient(135deg, #a77bff 0%, var(--violet) 45%, var(--violet-deep) 100%);
  box-shadow: 0 10px 26px -10px rgba(139, 92, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  touch-action: manipulation;
}
.sheet__continue.is-in { animation: continueIn 0.6s var(--ease-bounce) both, continueGlow 2.2s 0.6s ease-in-out infinite; }
@keyframes continueIn { from { opacity: 0; transform: translateY(-8px) scale(0.85); } }
@keyframes continueGlow {
  50% { box-shadow: 0 10px 30px -6px rgba(167, 123, 255, 1), 0 0 0 6px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

/* ───────── kebab: sticky confirm, cards stay put after the choice ───────── */

.kebab__cta.is-sticky {
  position: sticky;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 6;
  box-shadow: 0 18px 40px -12px rgba(5, 0, 15, 0.85), 0 14px 34px -12px rgba(139, 92, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.kebabs.is-locked .kebab-card { pointer-events: none; }
.kebabs.is-locked .kebab-card:not([aria-checked="true"]) { opacity: 0.38; filter: saturate(0.6); }
.kebab-done__when { margin-top: 6px !important; font-size: 0.9rem; font-weight: 600; color: var(--peach); }

/* ───────── footer author ───────── */

.footer__author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(33, 18, 55, 0.6);
}
.footer__avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(201, 179, 255, 0.5), 0 8px 20px -8px rgba(0, 0, 0, 0.8);
}
.footer__author .footer__made { margin: 0; font-size: 0.86rem; letter-spacing: 0.02em; color: var(--text-soft); }

/* ───────── buttons / fields ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.3s, background 0.3s;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; }
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #a77bff 0%, var(--violet) 45%, var(--violet-deep) 100%);
  box-shadow: 0 14px 34px -12px rgba(139, 92, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn--ghost {
  color: var(--lavender);
  background: rgba(44, 25, 73, 0.5);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--big { width: 100%; min-height: 58px; font-size: 1.05rem; }

.link-btn {
  justify-self: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--lilac);
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: rgba(201, 179, 255, 0.4);
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-btn--muted { color: var(--muted); }

.field {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(13, 7, 23, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* no iOS zoom */
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); }

/* ───────── footer ───────── */

.footer {
  padding: 90px 0 30px;
  text-align: center;
}
.footer__ps {
  max-width: 30ch;
  margin: 0 auto 30px;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--lavender);
}
.footer__ps:empty { display: none; }
.footer__seal {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 47% 53% 50% 50% / 52% 48% 54% 46%;
  background: radial-gradient(circle at 35% 30%, #b98cff 0%, #7c45e6 30%, #4e1fa8 72%);
  box-shadow: inset 0 -4px 8px rgba(20, 0, 50, 0.5), 0 8px 20px -8px rgba(0, 0, 0, 0.8);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: #e9dcff;
}
.footer__made { margin: 0; font-size: 0.8rem; color: var(--muted); }
.footer__top {
  display: inline-block;
  margin-top: 14px;
  padding: 10px;
  font-size: 0.82rem;
  color: var(--text-soft);
  text-decoration: none;
}

/* ───────── game sheet ───────── */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 16, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s;
}
.sheet__panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  height: calc(100% - 10px - var(--safe-top));
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(139, 92, 246, 0.22), transparent 70%),
    linear-gradient(180deg, #1d1033, var(--bg-0));
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line);
  transform: translate(-50%, 100%);
  transition: transform 0.5s var(--ease);
  overscroll-behavior: contain;
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: translate(-50%, 0); }

.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 10px 20px;
}
.sheet__head::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: rgba(201, 179, 255, 0.25);
}
.sheet__titles { min-width: 0; flex: 1; }
.sheet__restart {
  flex: none;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(44, 25, 73, 0.6);
  color: var(--lavender);
  font-size: 0.82rem;
  cursor: pointer;
  touch-action: manipulation;
}
.sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--lavender);
}
.sheet__status {
  margin: 2px 0 0;
  min-height: 1.2em;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--lilac);
}
.sheet__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(44, 25, 73, 0.6);
  color: var(--text-soft);
  cursor: pointer;
}
.sheet__close svg { width: 18px; height: 18px; }

.sheet__body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px calc(12px + var(--safe-bottom));
}

.sheet__intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  min-height: 0;
  overflow-y: auto;
  gap: 14px;
  padding: 20px 14px 24px;
  text-align: center;
}
.sheet__emoji {
  flex: none;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 34px;
  font-size: 3.4rem;
  background: radial-gradient(circle at 50% 30%, rgba(167, 139, 250, 0.4), rgba(44, 25, 73, 0.7));
  box-shadow: var(--glow);
  animation: envFloat 4s ease-in-out infinite;
}
.sheet__rules { max-width: 30ch; margin: 6px 0 0; font-size: 1.02rem; color: var(--text-soft); }
.sheet__won { margin: 0; font-family: var(--font-hand); font-size: 1.3rem; color: var(--lilac); }
.sheet__intro .btn { max-width: 320px; margin-top: 10px; }

.game-root {
  position: relative;
  isolation: isolate; /* game layers (doner receipt, stickers…) can never cover the petal card */
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
}

.game-root.is-behind { opacity: 0.12; transition: opacity 0.35s var(--ease); }

.sheet__win {
  position: absolute;
  inset: 0 12px calc(12px + var(--safe-bottom));
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-content: safe center;
  justify-items: center;
  gap: 14px;
  padding: 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  text-align: center;
  background: rgba(13, 7, 23, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.5s var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } }
.sheet__win-petal { width: 72px; height: 84px; animation: petalFall 1s var(--ease) both; pointer-events: none; }
.sheet__win-petal svg { display: block; width: 100%; height: 100%; overflow: hidden; filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)); }
@keyframes petalFall {
  0% { opacity: 0; transform: translateY(-20px) scale(0.7); }
  60% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { transform: none; }
}
.sheet__win-kicker {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-2);
}
.sheet__win-msg {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(1.45rem, 6vw, 1.8rem);
  line-height: 1.25;
  color: var(--lavender);
}
.sheet__win-actions { display: grid; gap: 10px; width: 100%; max-width: 300px; margin-top: 14px; }

.games__reset { margin: 18px 0 24px; text-align: center; }
.games__reset .link-btn { min-height: 44px; }
.games__reset .link-btn:disabled { opacity: 0.45; cursor: default; }
.games__reset-confirm { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.games__reset-confirm p { margin: 0 0 14px; font-size: 0.9rem; color: var(--text-soft); }
.games__reset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.addon--notice { cursor: default; border-color: var(--line-strong); }
.addon__emoji { flex: none; font-size: 1.65rem; }

@media (max-width: 360px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-card { min-width: 0; padding: 14px 12px; }
  .option { gap: 10px; }
  .option__art { width: 64px; }
  .option__title { font-size: 1.25rem; }
  .sheet__head { gap: 8px; padding-left: 14px; }
  .sheet__title { font-size: 1.3rem; }
}

@media (max-height: 620px) {
  .sheet__win { gap: 10px; padding: 16px; }
  .sheet__win-petal { width: 48px; height: 56px; }
  .sheet__win-actions { margin-top: 4px; }
  .sheet__emoji { width: 64px; height: 64px; font-size: 2.2rem; border-radius: 22px; }
}

/* ───────── toast ───────── */

.toast {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(22px + var(--safe-bottom));
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(244, 238, 255, 0.96);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.3s;
  pointer-events: none;
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.noscript {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 100;
  padding: 14px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

/* ───────── larger screens ───────── */

@media (min-width: 720px) {
  .hero__frame { width: 300px; }
  .section { padding-top: 96px; }
}

/* ───────── reduced motion ───────── */

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