:root {
  --bg: #fff4fb;
  --bg2: #ffeef8;
  --ink: #2d1630;
  --ink-soft: #654b68;
  --pink-100: #ffd9ef;
  --pink-200: #ffb6df;
  --pink-300: #ff7cc8;
  --pink-400: #ff4aa9;
  --cyan-200: #9aefff;
  --mint-200: #b7ffe9;
  --line: rgba(255, 90, 180, 0.18);
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.93);
  --shadow: 0 14px 30px rgba(255, 70, 163, 0.12);
  --shadow-neon: 0 0 0 1px rgba(255, 90, 180, 0.18), 0 16px 34px rgba(255, 70, 163, 0.14),
    0 0 32px rgba(255, 80, 180, 0.12);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 12px;
  --container: min(1160px, calc(100% - 2rem));
  --tr: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Quicksand", "Trebuchet MS", sans-serif;
  line-height: 1.5;
  background:
    linear-gradient(180deg, rgba(255, 244, 251, 0.9), rgba(255, 238, 247, 0.92)),
    radial-gradient(circle at 8% 12%, rgba(255, 185, 228, 0.42), transparent 50%),
    radial-gradient(circle at 92% 18%, rgba(255, 157, 214, 0.28), transparent 46%),
    radial-gradient(circle at 78% 86%, rgba(154, 239, 255, 0.18), transparent 45%),
    url("../images/background.jpg") center top / cover fixed no-repeat;
  background-color: var(--bg);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.page-shell {
  position: relative;
  overflow-x: clip;
}

.ambient-stars,
.ambient-stars::before,
.ambient-stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient-stars {
  z-index: -2;
  opacity: 0.7;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.92) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,0.8) 0 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.75) 0 0.9px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.82) 0 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,0.92) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,0.86) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.8) 0 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,0.88) 0 1px, transparent 1.5px);
  background-size:
    2px 2px, 2px 2px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px;
  background-position:
    6vw 8vh, 18vw 16vh, 29vw 7vh, 41vw 14vh,
    53vw 9vh, 67vw 18vh, 79vw 11vh, 90vw 7vh,
    9vw 32vh, 23vw 28vh, 37vw 35vh, 49vw 27vh,
    63vw 33vh, 76vw 29vh, 86vw 36vh, 95vw 26vh;
  animation: starLayerFloatA 26s linear infinite, twinkleSoft 6.4s ease-in-out infinite alternate;
}

.ambient-stars::before,
.ambient-stars::after {
  content: "";
  z-index: -2;
  background-repeat: no-repeat;
}

.ambient-stars::before {
  opacity: 0.65;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,244,210,0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.85) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(154,239,255,0.65) 0 1.1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.92) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,230,245,0.9) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,255,255,0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.86) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,244,210,0.86) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1.1px, transparent 1.9px);
  background-size:
    3px 3px, 3px 3px, 3px 3px, 3px 3px,
    3px 3px, 3px 3px, 3px 3px, 3px 3px,
    3px 3px, 3px 3px, 3px 3px, 3px 3px;
  background-position:
    12vw 48vh, 26vw 43vh, 39vw 52vh, 52vw 46vh,
    65vw 54vh, 78vw 44vh, 89vw 50vh, 7vw 67vh,
    21vw 73vh, 48vw 69vh, 72vw 76vh, 92vw 71vh;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.18));
  animation: starLayerFloatB 34s linear infinite, twinklePulseA 4.8s ease-in-out infinite;
}

.ambient-stars::after {
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1.3px, transparent 2.1px),
    radial-gradient(circle, rgba(255,226,241,0.95) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(154,239,255,0.72) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255,245,200,0.9) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1.3px, transparent 2.1px),
    radial-gradient(circle, rgba(255,255,255,0.92) 0 1.3px, transparent 2.1px),
    radial-gradient(circle, rgba(255,226,241,0.85) 0 1.2px, transparent 2px);
  background-size: 4px 4px;
  background-position:
    15vw 11vh, 34vw 21vh, 58vw 17vh, 83vw 24vh,
    11vw 58vh, 44vw 62vh, 68vw 59vh, 87vw 66vh;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)) drop-shadow(0 0 10px rgba(255, 160, 220, 0.15));
  animation: starLayerFloatC 42s linear infinite, twinklePulseB 7.2s ease-in-out infinite alternate;
}

.ambient-orbs,
.ambient-orbs::before,
.ambient-orbs::after {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px);
}

.ambient-orbs {
  top: 8rem;
  right: -5rem;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(255, 120, 200, 0.25), transparent 72%);
  animation: orbFloat 11s ease-in-out infinite alternate;
}

.ambient-orbs::before {
  content: "";
  width: 14rem;
  height: 14rem;
  position: absolute;
  left: -18rem;
  top: 21rem;
  background: radial-gradient(circle, rgba(255, 205, 120, 0.18), transparent 72%);
  animation: orbFloat 13s ease-in-out infinite alternate-reverse;
}

.ambient-orbs::after {
  content: "";
  width: 16rem;
  height: 16rem;
  position: absolute;
  left: -4rem;
  top: 34rem;
  background: radial-gradient(circle, rgba(154, 239, 255, 0.18), transparent 72%);
  animation: orbFloat 16s ease-in-out infinite alternate;
}

@keyframes orbFloat {
  from {
    transform: translateY(-4px) translateX(-6px);
  }
  to {
    transform: translateY(12px) translateX(10px);
  }
}

@keyframes starLayerFloatA {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-8px, 14px, 0); }
}

@keyframes starLayerFloatB {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(10px, -10px, 0); }
}

@keyframes starLayerFloatC {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-6px, -12px, 0); }
}

@keyframes twinkleSoft {
  0%, 100% { opacity: 0.6; filter: none; }
  50% { opacity: 0.85; filter: drop-shadow(0 0 4px rgba(255,255,255,0.12)); }
}

@keyframes twinklePulseA {
  0%, 100% { opacity: 0.45; }
  25% { opacity: 0.8; }
  50% { opacity: 0.5; }
  75% { opacity: 0.9; }
}

@keyframes twinklePulseB {
  0%, 100% { opacity: 0.35; }
  20% { opacity: 0.7; }
  40% { opacity: 0.45; }
  65% { opacity: 0.82; }
  80% { opacity: 0.4; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255, 247, 252, 0.76);
  border-bottom: 1px solid rgba(255, 90, 180, 0.12);
}

.site-header__inner {
  width: var(--container);
  margin: 0 auto;
  padding: 0.65rem 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.45rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 290px;
}

.brand__icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.12) 42%, transparent 44%),
    linear-gradient(150deg, var(--pink-300), #ff9ad5 45%, #ffcbe9);
  box-shadow: 0 0 18px rgba(255, 74, 169, 0.28);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  overflow: hidden;
}

.brand__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0.08rem;
  filter: saturate(1.06) contrast(1.03);
}

.brand__title {
  margin: 0;
  line-height: 1;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.18rem;
}

.brand__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  order: 2;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  order: 4;
  padding-top: 0.05rem;
}

.site-nav a {
  padding: 0.44rem 0.68rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: color var(--tr), background var(--tr), transform var(--tr), box-shadow var(--tr);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  outline: none;
  color: var(--ink);
  background: rgba(255, 120, 200, 0.1);
  transform: translateY(-1px);
}

.site-nav a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink-400), #ff6fc0);
  box-shadow: 0 10px 20px rgba(255, 74, 169, 0.2);
}

.header-side {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  order: 3;
  margin-left: auto;
  justify-content: flex-end;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(255, 90, 180, 0.08);
  font-weight: 700;
  font-size: 0.82rem;
}

.pill--age {
  background: linear-gradient(135deg, rgba(255, 76, 170, 0.14), rgba(255, 208, 236, 0.85));
}

.pill--wallet strong {
  color: var(--pink-400);
}

.site-main {
  width: var(--container);
  margin: 0 auto;
  padding: 1.2rem 0 3rem;
}

.hero {
  position: relative;
  padding: 2.2rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.12) 40%, transparent 44%),
    radial-gradient(circle at 84% 22%, rgba(255, 195, 231, 0.4), transparent 44%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 238, 248, 0.86));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-neon);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.35) 42%, transparent 50%);
  background-size: 200% 100%;
  animation: heroSweep 7.5s linear infinite;
}

@keyframes heroSweep {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -40% 0;
  }
}

.hero__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.2rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
}

.hero h1,
.page-hero h1 {
  margin: 0.65rem 0 0.5rem;
  line-height: 1.02;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-family: "Baloo 2", "Segoe UI", sans-serif;
}

.hero p {
  margin: 0.25rem 0;
  color: var(--ink-soft);
}

.hero p + p {
  margin-top: 0.45rem;
}

.hero__cta {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  cursor: pointer;
  padding: 0.78rem 1.06rem;
  border-radius: 999px;
  font-weight: 800;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), filter var(--tr);
}

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pink-400), #ff77c6 58%, #ff99b7);
  box-shadow: 0 14px 28px rgba(255, 74, 169, 0.22);
}

.btn--ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(255, 90, 180, 0.08);
}

.btn--soft {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,230,245,0.84));
  border: 1px solid var(--line);
}

.btn:hover,
.btn:focus-visible {
  outline: none;
  transform: translateY(-2px);
}

.hero-art {
  position: relative;
  min-height: 280px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,0.95), rgba(255,255,255,0.12) 36%, transparent 44%),
    radial-gradient(circle at 74% 35%, rgba(255,125,200,0.45), transparent 44%),
    linear-gradient(160deg, #ffe4f4, #ffd7ee 44%, #fff0f9);
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(255, 90, 180, 0.1);
}

.hero-art--image {
  min-height: 320px;
}

.hero-art__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}

.hero-art__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(48, 18, 54, 0.06), rgba(255, 235, 246, 0.08)),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.38), transparent 42%),
    radial-gradient(circle at 82% 75%, rgba(255, 124, 199, 0.16), transparent 44%);
}

.hero-art__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    linear-gradient(to right, rgba(255,255,255,0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.45) 1px, transparent 1px);
  background-size: 36px 36px;
}

.hero-art__chip,
.hero-art__card,
.hero-art__orb {
  position: absolute;
  box-shadow: 0 14px 22px rgba(255, 80, 180, 0.16);
  z-index: 2;
}

.hero-art__chip {
  width: 82px;
  height: 82px;
  top: 24px;
  right: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.12) 40%, transparent 42%),
    conic-gradient(from 70deg, #ff6fc0, #ffa4da, #ffd6ef, #ff6fc0);
  border: 7px solid rgba(255,255,255,0.75);
  animation: floatChip 4.5s ease-in-out infinite;
}

.hero-art__card {
  width: 104px;
  height: 144px;
  left: 28px;
  bottom: 24px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  color: var(--pink-400);
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,220,241,0.92));
  border: 1px solid rgba(255,255,255,0.8);
  transform: rotate(-8deg);
  animation: floatCard 5.1s ease-in-out infinite;
}

.hero-art__orb {
  width: 156px;
  height: 156px;
  left: 45%;
  top: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.08) 35%, rgba(255, 130, 202, 0.2) 58%, transparent 72%);
  border: 1px solid rgba(255,255,255,0.52);
  animation: pulseOrb 3.2s ease-in-out infinite;
}

@keyframes floatChip {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-9px) rotate(-4deg); }
}

@keyframes pulseOrb {
  0%, 100% { transform: scale(0.98); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; }
}

.hero-stats {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.stat-card {
  padding: 0.8rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  box-shadow: 0 10px 18px rgba(255, 90, 180, 0.08);
}

.stat-card__label {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.stat-card__value {
  display: block;
  margin-top: 0.15rem;
  font-weight: 800;
  font-size: 1.05rem;
}

.notice,
.panel,
.card,
.tile,
.disclaimer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.notice,
.panel,
.card,
.tile,
.disclaimer {
  padding: 1rem;
}

.notice strong {
  color: var(--pink-400);
}

.section {
  margin-top: 1.3rem;
}

.section-title {
  margin: 0 0 0.65rem;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.55rem;
  line-height: 1.05;
}

.section-subtitle {
  margin: -0.1rem 0 0.8rem;
  color: var(--ink-soft);
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
}

.feature-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,240,249,0.88));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.feature-card::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154,239,255,0.28), transparent 72%);
}

.feature-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,214,237,0.86));
  border: 1px solid var(--line);
}

.feature-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 16px rgba(255, 90, 180, 0.12);
  aspect-ratio: 16 / 9;
  margin: -0.05rem 0 0.15rem;
}

.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition: transform 400ms ease;
}

.feature-card:hover .feature-card__media img {
  transform: scale(1.04);
}

.feature-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 16, 48, 0.02), rgba(255, 127, 201, 0.08)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.32), transparent 42%);
  pointer-events: none;
}

.feature-card h3,
.card h3,
.panel h3,
.tile h3 {
  margin: 0.1rem 0 0;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.05rem;
}

.feature-card p,
.card p,
.panel p,
.tile p,
.disclaimer p {
  margin: 0;
  color: var(--ink-soft);
}

.feature-card p + p,
.card p + p,
.panel p + p,
.tile p + p,
.disclaimer p + p,
.review-card p + p,
.legal-section p + p,
.legal-section ul + p {
  margin-top: 0.55rem;
}

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

.step {
  position: relative;
  padding: 1rem 1rem 1rem 3rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line);
  box-shadow: 0 10px 18px rgba(255, 90, 180, 0.07);
}

.step__num {
  position: absolute;
  left: 0.95rem;
  top: 0.95rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--pink-400), var(--pink-300));
  box-shadow: 0 0 14px rgba(255, 74, 169, 0.25);
}

.step h3 {
  margin: 0 0 0.22rem;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1rem;
}

.step p {
  margin: 0;
  color: var(--ink-soft);
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 1.7rem 1.4rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,239,248,0.88));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.page-hero::before {
  content: "";
  position: absolute;
  left: -2rem;
  bottom: -3.5rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 155, 216, 0.2), transparent 72%);
}

.page-hero p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
}

.page-hero p + p {
  margin-top: 0.45rem;
}

.page-hero__banner {
  margin-top: 0.95rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: 0 14px 24px rgba(255, 90, 180, 0.14);
  aspect-ratio: 16 / 7;
  position: relative;
}

.page-hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-hero__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 16, 48, 0.02), rgba(255, 138, 208, 0.08)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.2), transparent 40%);
  pointer-events: none;
}

.columns {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.review-card {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,242,250,0.9));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.review-card__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow: 0 12px 18px rgba(255, 90, 180, 0.12);
  aspect-ratio: 16 / 7;
  margin-bottom: 0.1rem;
}

.review-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.review-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 16, 48, 0.02), rgba(255, 138, 208, 0.08)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.22), transparent 44%);
}

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}

.review-card__title {
  margin: 0;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.12rem;
}

.stars {
  display: inline-flex;
  gap: 0.14rem;
  color: #ff73c4;
  text-shadow: 0 0 10px rgba(255, 115, 196, 0.24);
}

.rating-bars {
  display: grid;
  gap: 0.5rem;
}

.rating-bar {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.84rem;
}

.rating-bar__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 192, 227, 0.4);
  overflow: hidden;
}

.rating-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff96d1, #ff61b6);
  box-shadow: 0 0 14px rgba(255, 96, 181, 0.24);
  transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.quote {
  margin: 0;
  padding: 0.85rem;
  border-radius: 13px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255, 90, 180, 0.12);
  color: var(--ink-soft);
}

.quote strong {
  color: var(--ink);
}

.faq {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow);
}

.faq-item button {
  width: 100%;
  border: 0;
  padding: 1rem;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.faq-item button span:last-child {
  color: var(--pink-400);
  font-size: 1.15rem;
}

.faq-item__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.faq-item__content > div {
  overflow: hidden;
  padding: 0 1rem;
}

.faq-item p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.faq-item.is-open .faq-item__content {
  grid-template-rows: 1fr;
}

.faq-item.is-open button {
  background: rgba(255, 96, 181, 0.05);
}

.timeline {
  position: relative;
  display: grid;
  gap: 0.8rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 95, 182, 0.3), rgba(154,239,255,0.22));
}

.timeline-item {
  position: relative;
  padding: 0.95rem 1rem 0.95rem 2.35rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-400), var(--pink-300));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.92), 0 0 14px rgba(255, 90, 180, 0.2);
}

.timeline-item time {
  display: inline-block;
  margin-bottom: 0.2rem;
  color: var(--pink-400);
  font-weight: 800;
}

.timeline-item h3 {
  margin: 0;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
}

.timeline-item p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
}

.legal-doc {
  display: grid;
  gap: 0.8rem;
}

.legal-section {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.legal-section h2 {
  margin: 0 0 0.35rem;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.15rem;
}

.legal-section p,
.legal-section li {
  margin-top: 0.2rem;
  color: var(--ink-soft);
}

.legal-section ul {
  margin: 0.25rem 0 0;
  padding-left: 1.05rem;
}

.contact-form {
  display: grid;
  gap: 0.8rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-weight: 800;
  font-size: 0.86rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 180, 0.22);
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  padding: 0.72rem 0.84rem;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid rgba(255, 74, 169, 0.35);
  outline-offset: 1px;
}

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.74);
  border: 1px solid var(--line);
  padding: 0.65rem 0.8rem;
}

.field--check input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}

.form-note {
  margin: 0;
  color: var(--ink-soft);
}

.contact-result {
  display: none;
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  background: rgba(183, 255, 233, 0.45);
  border: 1px solid rgba(77, 201, 157, 0.32);
  color: #145947;
  font-weight: 700;
}

.contact-result.is-visible {
  display: block;
}

.site-footer {
  margin-top: 2.5rem;
  background: rgba(255,247,252,0.78);
  border-top: 1px solid rgba(255, 90, 180, 0.12);
  backdrop-filter: blur(10px);
}

.site-footer__inner {
  width: var(--container);
  margin: 0 auto;
  padding: 1.15rem 0 2rem;
  display: grid;
  gap: 1rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.footer-block {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.footer-block h3 {
  margin: 0 0 0.3rem;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1rem;
}

.footer-block p {
  margin: 0;
  color: var(--ink-soft);
}

.footer-brandline {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.85rem;
  align-items: center;
}

.footer-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.48);
  box-shadow: 0 10px 18px rgba(255, 90, 180, 0.12);
  background: rgba(255,255,255,0.6);
  padding: 0.18rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.footer-links a {
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  transition: background var(--tr), color var(--tr), transform var(--tr);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  outline: none;
  background: rgba(255, 120, 200, 0.1);
  color: var(--ink);
  transform: translateY(-1px);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.footer-meta strong {
  color: var(--ink);
}

.disclaimer h2,
.disclaimer h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
}

.game-shell {
  display: grid;
  gap: 1rem;
}

.game-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1rem;
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,239,247,0.88));
  box-shadow: var(--shadow-neon);
}

.game-hero h1 {
  margin: 0.35rem 0;
  line-height: 1.02;
  font-size: clamp(1.55rem, 4vw, 2.4rem);
  font-family: "Baloo 2", "Segoe UI", sans-serif;
}

.game-hero p {
  margin: 0.2rem 0;
  color: var(--ink-soft);
}

.game-glow-panel {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-radius: 18px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.65);
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,0.88), rgba(255,255,255,0.1) 36%, transparent 44%),
    linear-gradient(160deg, rgba(255,196,230,0.62), rgba(255,241,249,0.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 14px 24px rgba(255, 90, 180, 0.12);
}

.game-glow-panel::before,
.game-glow-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.game-glow-panel::before {
  width: 8rem;
  height: 8rem;
  right: -1rem;
  top: -1rem;
  background: radial-gradient(circle, rgba(255, 105, 190, 0.32), transparent 72%);
  animation: pulseOrb 4.2s ease-in-out infinite;
}

.game-glow-panel::after {
  width: 6rem;
  height: 6rem;
  left: -0.6rem;
  bottom: -0.6rem;
  background: radial-gradient(circle, rgba(154,239,255,0.28), transparent 72%);
  animation: pulseOrb 5.4s ease-in-out infinite reverse;
}

.game-glow-panel--poster {
  padding: 0.55rem;
}

.game-poster {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 196px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 10px 18px rgba(255, 90, 180, 0.14);
}

.game-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.game-poster__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 16, 48, 0.08), rgba(42, 16, 48, 0.02) 35%, rgba(42, 16, 48, 0.2)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.2), transparent 45%);
}

.game-poster__chips {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.game-poster__chips .pill {
  font-size: 0.74rem;
  padding: 0.32rem 0.56rem;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 14px rgba(255, 90, 180, 0.12);
}

.game-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.65rem;
}

.metric {
  padding: 0.7rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  box-shadow: 0 10px 18px rgba(255, 90, 180, 0.07);
}

.metric__label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.metric__value {
  display: block;
  margin-top: 0.12rem;
  font-weight: 800;
  font-size: 1.04rem;
}

.game-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  align-items: start;
}

.game-sidebar {
  display: grid;
  gap: 1rem;
}

.game-panel {
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-neon);
}

.board-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.board-header h2 {
  margin: 0;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.2rem;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.status-line {
  margin-top: 0.75rem;
  min-height: 2.7rem;
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
  background: rgba(255,244,250,0.88);
  border: 1px solid rgba(255, 90, 180, 0.12);
  color: var(--ink-soft);
}

.status-line strong {
  color: var(--pink-400);
}

.game-log {
  display: grid;
  gap: 0.45rem;
}

.game-log__item {
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255, 90, 180, 0.1);
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.game-log__item strong {
  color: var(--pink-400);
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
}

.badge-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem;
  border-radius: 17px;
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.badge-card::before {
  content: "";
  position: absolute;
  right: -1.2rem;
  bottom: -1.8rem;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 200, 0.18), transparent 72%);
}

.badge-card.is-locked {
  opacity: 0.65;
  filter: saturate(0.65);
}

.badge-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,220,241,0.88));
}

.badge-card__title {
  margin: 0;
  font-weight: 800;
}

.badge-card__desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.badge-card__date {
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.achievements-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 192, 227, 0.4);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9ad5, #ff63b8);
  box-shadow: 0 0 14px rgba(255, 99, 184, 0.22);
  transition: width 420ms ease;
}

/* Memory cards */
.memory-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.65rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,0.92), rgba(255,255,255,0.06) 38%, transparent 44%),
    linear-gradient(160deg, rgba(255, 221, 241, 0.72), rgba(255, 243, 250, 0.88));
  border: 1px solid rgba(255, 90, 180, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}

.memory-card {
  position: relative;
  padding: 0;
  border: 0;
  background: linear-gradient(160deg, rgba(255, 208, 234, 0.38), rgba(255,255,255,0.4));
  cursor: pointer;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  perspective: 1000px;
  box-shadow: 0 8px 16px rgba(255, 90, 180, 0.08);
}

.memory-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.memory-card.is-flipped .memory-card__inner,
.memory-card.is-matched .memory-card__inner {
  transform: rotateY(180deg);
}

.memory-card__face {
  position: absolute;
  display: block;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,0.55);
  overflow: hidden;
  transform: translateZ(0);
}

.memory-card__face--back {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: white;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0.12) 38%, transparent 42%),
    radial-gradient(circle at 76% 78%, rgba(154, 239, 255, 0.16), transparent 50%),
    linear-gradient(160deg, rgba(255, 71, 171, 0.96), rgba(255, 142, 209, 0.9));
  box-shadow: 0 10px 18px rgba(255, 90, 180, 0.12);
  text-shadow: 0 0 12px rgba(255,255,255,0.38);
}

.memory-card__face--back::before {
  content: "";
  position: absolute;
  inset: 10% 9%;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.4);
  pointer-events: none;
}

.memory-card__face--front {
  transform: rotateY(180deg);
  padding: 0.55rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.3rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.96), rgba(255,255,255,0.12) 40%, transparent 44%),
    radial-gradient(circle at 78% 84%, rgba(255, 170, 220, 0.12), transparent 50%),
    linear-gradient(160deg, rgba(255,255,255,0.98), rgba(255,228,245,0.94));
  color: var(--ink);
}

.memory-card__glyph {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  border: 1px solid rgba(255, 90, 180, 0.18);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 14px rgba(255, 90, 180, 0.1), inset 0 0 0 1px rgba(255,255,255,0.45);
}

.memory-card__name {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.05;
  color: #3a1d40;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.memory-card.is-matched .memory-card__face--front {
  box-shadow: 0 0 0 2px rgba(255, 90, 180, 0.24) inset, 0 0 18px rgba(255, 90, 180, 0.16);
}

/* Reels */
.reels-machine {
  display: grid;
  gap: 0.8rem;
}

.reels-frame {
  border-radius: 20px;
  padding: 0.8rem;
  border: 1px solid rgba(255, 90, 180, 0.22);
  background: linear-gradient(160deg, rgba(255,245,251,0.95), rgba(255,226,241,0.86));
  box-shadow: 0 16px 28px rgba(255, 90, 180, 0.12);
}

.reels-grid {
  --reel-cell-h: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: start;
}

.reel-column {
  position: relative;
  padding: 0.4rem;
  border-radius: 15px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(255, 90, 180, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}

.reel-column::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  top: calc(50% - (var(--reel-cell-h) / 2));
  height: var(--reel-cell-h);
  border-radius: 13px;
  border: 1px solid rgba(255, 90, 180, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
  pointer-events: none;
  z-index: 1;
}

.reel-window {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  z-index: 0;
  height: calc(var(--reel-cell-h) * 3 + 0.35rem * 2);
}

.reel-strip {
  display: grid;
  gap: 0.35rem;
  will-change: transform;
  transform: translateY(0);
}

.reel-column.is-spinning::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.45), rgba(255,255,255,0.1));
  animation: reelShimmer 380ms linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes reelShimmer {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

.reel-cell {
  height: var(--reel-cell-h);
  min-height: var(--reel-cell-h);
  border-radius: 13px;
  display: grid;
  place-items: center;
  padding: 0.35rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,236,248,0.88));
  border: 1px solid rgba(255, 90, 180, 0.1);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.reel-cell.is-payline {
  box-shadow: 0 0 0 2px rgba(255, 90, 180, 0.24), 0 0 16px rgba(255, 90, 180, 0.18);
  transform: translateY(-1px);
}

.reel-symbol {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.reel-symbol__icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 90, 180, 0.14);
  background: rgba(255,255,255,0.9);
  font-size: 1.15rem;
}

.reel-symbol__label {
  font-size: 0.73rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
}

.stake-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip-btn {
  border: 1px solid rgba(255, 90, 180, 0.18);
  background: rgba(255,255,255,0.88);
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
  transition: transform var(--tr), background var(--tr), color var(--tr), box-shadow var(--tr);
}

.chip-btn:hover,
.chip-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.chip-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 83, 174, 0.95), rgba(255, 149, 210, 0.95));
  box-shadow: 0 10px 16px rgba(255, 90, 180, 0.16);
}

.paytable {
  display: grid;
  gap: 0.55rem;
}

.payline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.5rem 0.65rem;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(255, 90, 180, 0.1);
}

.payline-row strong {
  color: var(--pink-400);
}

/* Aim arena */
.aim-stage {
  display: grid;
  gap: 0.8rem;
}

.aim-arena {
  position: relative;
  overflow: hidden;
  min-height: 370px;
  border-radius: 20px;
  border: 1px solid rgba(255, 90, 180, 0.18);
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.72), rgba(255,255,255,0.08) 36%, transparent 42%),
    radial-gradient(circle at 80% 72%, rgba(154,239,255,0.18), transparent 44%),
    linear-gradient(160deg, rgba(255,232,246,0.96), rgba(255,244,251,0.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 16px 28px rgba(255, 90, 180, 0.12);
}

.aim-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background:
    linear-gradient(to right, rgba(255,255,255,0.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.32) 1px, transparent 1px);
  background-size: 42px 42px;
}

.aim-target {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.1) 38%, transparent 40%),
    radial-gradient(circle, rgba(255, 110, 190, 0.24), rgba(255, 110, 190, 0.18) 34%, rgba(255,255,255,0.24) 35%, rgba(255,255,255,0.24) 48%, rgba(255, 110, 190, 0.14) 49%, transparent 50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.46) inset, 0 0 18px rgba(255, 90, 180, 0.2);
  animation: targetSpawn 180ms ease-out, targetPulse 1s ease-in-out infinite;
}

.aim-target__core {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  border: 2px solid rgba(255, 90, 180, 0.4);
}

.aim-target.is-expiring {
  animation: targetPulse 0.45s ease-in-out infinite, targetBlink 220ms linear infinite;
}

.aim-target.is-hit {
  pointer-events: none;
  animation: targetHit 250ms ease-out forwards;
}

@keyframes targetSpawn {
  from { transform: scale(0.65); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes targetPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes targetBlink {
  50% { box-shadow: 0 0 0 2px rgba(255, 90, 180, 0.28) inset, 0 0 24px rgba(255, 90, 180, 0.3); }
}

@keyframes targetHit {
  to { transform: scale(1.18); opacity: 0; }
}

.aim-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.98), rgba(255, 140, 205, 0.5));
  animation: sparkFly 520ms ease-out forwards;
}

@keyframes sparkFly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.toast-root {
  position: fixed;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 80;
  width: min(360px, calc(100vw - 1.5rem));
  display: grid;
  gap: 0.5rem;
}

.toast {
  padding: 0.7rem 0.85rem;
  border-radius: 15px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255, 90, 180, 0.16);
  box-shadow: 0 16px 24px rgba(255, 90, 180, 0.16);
  color: var(--ink);
  animation: toastIn 220ms ease-out;
}

.toast strong {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--pink-400);
}

.toast--good {
  border-color: rgba(77, 201, 157, 0.28);
}

.toast--warn {
  border-color: rgba(255, 184, 0, 0.28);
}

@keyframes toastIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(40, 22, 46, 0.4);
  backdrop-filter: blur(12px);
}

.age-gate[hidden] {
  display: none;
}

.age-gate__panel {
  width: min(640px, 100%);
  padding: 1.05rem;
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,0.95), rgba(255,255,255,0.1) 38%, transparent 42%),
    linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,236,248,0.92));
  border: 1px solid rgba(255, 90, 180, 0.22);
  box-shadow: 0 24px 50px rgba(40, 22, 46, 0.2), 0 0 24px rgba(255, 90, 180, 0.12);
}

.age-gate__badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--pink-400), #ff9fd6);
  box-shadow: 0 0 18px rgba(255, 74, 169, 0.24);
}

.age-gate__panel h2 {
  margin: 0.65rem 0 0.3rem;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.4rem;
}

.age-gate__panel p {
  margin: 0.2rem 0;
  color: var(--ink-soft);
}

.age-gate__actions {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.u-stack {
  display: grid;
  gap: 0.8rem;
}

.u-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.u-muted {
  color: var(--ink-soft);
}

@media (max-width: 980px) {
  .hero__layout,
  .columns,
  .game-hero,
  .game-layout,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .game-sidebar {
    order: -1;
  }

  .grid--3,
  .steps,
  .achievements-overview {
    grid-template-columns: 1fr;
  }

  .grid--2 {
    grid-template-columns: 1fr;
  }

  .game-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-header__inner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .site-nav {
    width: 100%;
    display: none;
    justify-content: flex-start;
    padding-top: 0.2rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .footer-brandline {
    grid-template-columns: 60px 1fr;
    gap: 0.7rem;
  }

  .footer-logo {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }
}

@media (max-width: 720px) {
  .site-main {
    width: min(100%, calc(100% - 1rem));
    padding-top: 0.8rem;
  }

  .hero,
  .page-hero,
  .game-panel {
    padding: 0.9rem;
    border-radius: 18px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .hero-art--image {
    min-height: 240px;
  }

  .page-hero__banner {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  .feature-card__media,
  .review-card__media {
    border-radius: 12px;
  }

  .game-poster {
    min-height: 180px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .memory-board {
    gap: 0.5rem;
  }

  .memory-card__glyph {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.15rem;
  }

  .memory-card__name {
    font-size: 0.68rem;
  }

  .reels-grid {
    --reel-cell-h: 64px;
  }

  .reel-cell {
    height: var(--reel-cell-h);
    min-height: var(--reel-cell-h);
  }

  .aim-arena {
    min-height: 300px;
  }

  .aim-target {
    width: 70px;
    height: 70px;
  }

  .rating-bar {
    grid-template-columns: 92px 1fr auto;
  }
}

@media (max-width: 520px) {
  .header-side {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .pill {
    font-size: 0.76rem;
    padding: 0.38rem 0.58rem;
  }

  .brand__icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 12px;
  }

  .brand__title {
    font-size: 1.02rem;
  }

  .brand__subtitle {
    font-size: 0.72rem;
  }

  .site-nav a {
    font-size: 0.84rem;
    padding: 0.38rem 0.56rem;
  }

  .memory-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reels-grid {
    --reel-cell-h: 58px;
    gap: 0.45rem;
  }

  .reel-cell {
    height: var(--reel-cell-h);
    min-height: var(--reel-cell-h);
  }

  .reel-symbol__icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 1rem;
  }

  .reel-symbol__label {
    font-size: 0.65rem;
  }

  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brandline {
    grid-template-columns: 1fr;
  }

  .footer-logo {
    width: 76px;
    height: 76px;
  }
}

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