/* ==========================================================
   גלגל המתנות של שירלי — עיצוב חגיגי (מובייל-פירסט)
   ========================================================== */

:root {
  --bg-deep: #17032c;
  --bg-mid: #3c0a58;
  --bg-rose: #8a1350;
  --gold-light: #fff3c4;
  --gold: #ffc94d;
  --gold-deep: #e08a00;
  --gold-shadow: #8a4b00;
  --rose: #ff4d84;
  --rose-deep: #b3003c;
  --ink: #2a0640;
  --display: "Secular One", "Rubik", "Arial Hebrew", system-ui, sans-serif;
  --font: "Rubik", "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-deep);
  color: #fff;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

body { overflow-x: hidden; }

/* ==========================================================
   רקע חגיגי: הילה, בוקה, בלונים, דגלונים, נצנוצים
   ========================================================== */
.bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 85% 50% at 50% 8%, var(--bg-rose) 0%, transparent 62%),
    radial-gradient(ellipse 95% 60% at 50% 105%, var(--bg-mid) 0%, transparent 70%),
    linear-gradient(180deg, #1d0433 0%, var(--bg-deep) 55%, #10021f 100%);
}

.bg-glow {
  position: absolute; inset: -25%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 201, 77, 0.22) 0%, transparent 55%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.bokeh { position: absolute; border-radius: 50%; filter: blur(14px); opacity: 0.32; animation: drift var(--d, 22s) ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(var(--dx, 20px), var(--dy, -34px), 0) scale(1.18); }
}

/* בלונים */
.balloon {
  position: absolute; bottom: -28vh;
  width: var(--w, 54px); aspect-ratio: 0.82;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0%, transparent 42%), var(--c, #ff4d84);
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  opacity: 0.75;
  animation: float-up var(--d, 20s) linear infinite var(--delay, 0s);
}
.balloon::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  width: 2px; height: 46px; translate: -50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
}
.balloon::before {
  content: ""; position: absolute; top: 99%; left: 50%;
  width: 10px; height: 8px; translate: -50% 0;
  background: var(--c, #ff4d84);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@keyframes float-up {
  0% { transform: translate3d(0, 0, 0) rotate(-6deg); opacity: 0; }
  10% { opacity: 0.75; }
  90% { opacity: 0.75; }
  100% { transform: translate3d(var(--sway, 30px), -138vh, 0) rotate(6deg); opacity: 0; }
}

/* שרשרת דגלונים */
.bunting { position: absolute; top: 0; left: -2%; width: 104%; height: 76px; z-index: 1; opacity: 0.95; }
.bunting svg { width: 100%; height: 100%; display: block; }

.sparkle {
  position: absolute; width: var(--s, 6px); aspect-ratio: 1;
  background: var(--gold-light); opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle var(--d, 4s) ease-in-out infinite var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.95; transform: scale(1) rotate(45deg); }
}

.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* ==========================================================
   מסכים
   ========================================================== */
.screen {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.6vh;
  padding: calc(env(safe-area-inset-top) + 9vh) 5vw calc(env(safe-area-inset-bottom) + 4vh);
  text-align: center;
  animation: screen-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(18px) scale(0.975); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================
   טיפוגרפיה
   ========================================================== */
.title, .subtitle, .gift-name, .blessing-title, .gate-question, .mazal-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.22;
  white-space: pre-line;
  background: linear-gradient(180deg, #fffaf0 0%, var(--gold-light) 28%, var(--gold) 62%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-shadow)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  padding: 0 0.08em 0.1em;
}

.title { font-size: clamp(1.8rem, 8.6vw, 3.4rem); }
.subtitle { font-size: clamp(1.4rem, 6.8vw, 2.5rem); }

.lead {
  margin: 0; max-width: 32ch;
  font-size: clamp(1rem, 4.4vw, 1.35rem); font-weight: 500; line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  white-space: pre-line;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hint { margin: 0; font-size: clamp(0.78rem, 3.3vw, 0.98rem); color: rgba(255, 255, 255, 0.6); }

/* ==========================================================
   תמונת שירלי
   ========================================================== */
.photo-frame {
  position: relative;
  width: min(54vw, 240px); height: min(54vw, 240px);
  border-radius: 50%; padding: 6px;
  background: conic-gradient(from 0deg, #fff3c4, var(--gold-deep), var(--gold), #fffaf0, var(--gold-deep), var(--gold), #fff3c4);
  box-shadow: 0 0 52px rgba(255, 201, 77, 0.5), 0 16px 36px rgba(0, 0, 0, 0.55);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.photo-frame::after {
  content: ""; position: absolute; inset: -14px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 243, 196, 0.45);
  animation: spin-slow 26s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.photo-clip {
  position: absolute; inset: 6px;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, #4a1270, #2a0640);
}

.photo-clip img, .photo-fallback {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--photo-focus, 50% 20%);
  scale: var(--photo-zoom, 1);
  transform-origin: var(--photo-focus, 50% 20%);
}
.photo-fallback {
  display: grid; place-items: center;
  font-family: var(--display); font-size: clamp(3rem, 18vw, 6rem); color: var(--gold);
}

.photo-badge {
  position: absolute; inset-inline-end: -8px; bottom: 0;
  display: grid; place-items: center;
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  font-family: var(--display); font-size: clamp(1.2rem, 6vw, 2rem); color: #5a1b00;
  background: linear-gradient(180deg, #fffaf0, var(--gold) 55%, var(--gold-deep));
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: badge-pop 2.6s ease-in-out infinite;
}
@keyframes badge-pop { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.08) rotate(6deg); } }

/* ==========================================================
   כפתורים
   ========================================================== */
.btn {
  position: relative;
  font-family: var(--font); font-weight: 900;
  border: none; border-radius: 999px;
  cursor: pointer; overflow: hidden;
  padding: 1.05em 2.2em;
  font-size: clamp(1.05rem, 4.8vw, 1.4rem);
  min-height: 56px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease, opacity 0.2s ease;
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { inset-inline-start: -60%; } 100% { inset-inline-start: 120%; } }

.btn:active:not(:disabled) { transform: translateY(3px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #ff87b0 0%, var(--rose) 45%, #d1004b 100%);
  box-shadow: 0 6px 0 var(--rose-deep), 0 14px 30px rgba(0, 0, 0, 0.5);
  border: 3px solid rgba(255, 243, 196, 0.9);
}
.btn-primary:active:not(:disabled) { box-shadow: 0 2px 0 var(--rose-deep), 0 6px 14px rgba(0, 0, 0, 0.4); }

.btn-gold {
  color: #5a1b00;
  background: linear-gradient(180deg, #fffaf0 0%, var(--gold) 52%, var(--gold-deep) 100%);
  box-shadow: 0 6px 0 #a35f00, 0 14px 30px rgba(0, 0, 0, 0.5);
}
.btn-gold:active { box-shadow: 0 2px 0 #a35f00, 0 6px 14px rgba(0, 0, 0, 0.4); }

.btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost::after { display: none; }

.btn-spin { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.btn-spin:disabled { animation: none; }

.sound-btn {
  position: fixed; z-index: 30;
  top: calc(env(safe-area-inset-top) + 10px); inset-inline-start: 12px;
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 20px; color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%; cursor: pointer;
}

/* ==========================================================
   שאלות לפני הגלגל
   ========================================================== */
.gate-card { padding: 8vw 6vw 7vw; }

.gate-emoji { font-size: clamp(2.4rem, 12vw, 4rem); line-height: 1; margin-bottom: 2vh; animation: badge-pop 2.4s ease-in-out infinite; }
.gate-question { font-size: clamp(1.25rem, 5.9vw, 2.1rem); margin-bottom: 1.5vh; }
.gate-sub { margin: 0 0 4vh; font-size: clamp(0.95rem, 4.2vw, 1.2rem); color: rgba(255, 255, 255, 0.86); line-height: 1.55; white-space: pre-line; }

.gate-actions { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 130px; }
.gate-actions .btn-primary { width: 100%; }

.btn-no {
  position: relative;
  padding: 0.85em 2em; min-height: 48px;
  font-size: clamp(0.95rem, 4.2vw, 1.15rem);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.28s ease;
  will-change: transform;
}

.gate-progress { display: flex; justify-content: center; gap: 8px; margin-top: 3vh; }
.gate-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background 0.3s ease, transform 0.3s ease; }
.gate-dot.is-done { background: var(--gold); }
.gate-dot.is-active { background: var(--rose); transform: scale(1.35); }

/* ==========================================================
   קלפים וחלונות
   ========================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 5vw;
  background: rgba(10, 2, 22, 0.86);
  animation: fade-in 0.25s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.card {
  position: relative;
  width: min(92vw, 470px);
  padding: 7vw 6vw;
  text-align: center;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 201, 77, 0.22), transparent 60%),
    linear-gradient(160deg, #4d1478 0%, #2c0945 62%, #1b0530 100%);
  border: 3px solid var(--gold);
  border-radius: 30px;
  box-shadow: 0 0 70px rgba(255, 201, 77, 0.3), 0 22px 54px rgba(0, 0, 0, 0.62);
}
.card::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(255, 243, 196, 0.32);
  border-radius: 24px; pointer-events: none;
}

.pop-in { animation: pop 0.6s cubic-bezier(0.18, 1.4, 0.4, 1) both; }
@keyframes pop {
  from { opacity: 0; transform: scale(0.6) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}

.kicker { margin: 0 0 2vh; font-size: clamp(1rem, 4.6vw, 1.25rem); font-weight: 700; color: rgba(255, 255, 255, 0.88); }
.gift-name { font-size: clamp(1.7rem, 8.4vw, 2.7rem); margin-bottom: 4vh; }

.gift-icon { width: clamp(84px, 28vw, 130px); margin: 0 auto 2vh; color: #fff; }
.gift-icon svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
.gift-icon-lg { width: clamp(96px, 32vw, 150px); }

.actions { display: flex; flex-direction: column; gap: 12px; }

/* מזל טוב! */
.mazal-card { padding: 9vw 6vw; }
.mazal-emoji { font-size: clamp(3rem, 16vw, 5.5rem); line-height: 1; margin-bottom: 1vh; animation: badge-pop 2s ease-in-out infinite; }
.mazal-title { font-size: clamp(1.9rem, 9.5vw, 3.2rem); margin-bottom: 1.5vh; }
.mazal-text { margin: 0 0 4vh; font-size: clamp(1rem, 4.6vw, 1.3rem); line-height: 1.6; color: rgba(255, 255, 255, 0.94); white-space: pre-line; }

/* ==========================================================
   הגלגל
   ========================================================== */
.wheel-area { --wheel-size: min(86vw, 390px); position: relative; width: var(--wheel-size); aspect-ratio: 1; display: grid; place-items: center; }

.wheel-frame {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%; padding: 3.6%;
  background: conic-gradient(from 0deg, #fff3c4, var(--gold-deep), var(--gold), #fffaf0, var(--gold-deep), var(--gold), #fff3c4);
  box-shadow: 0 0 50px rgba(255, 201, 77, 0.45), 0 18px 38px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(122, 60, 0, 0.45);
}
.wheel-frame::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px dotted rgba(255, 243, 196, 0.35);
  animation: spin-slow 40s linear infinite;
  pointer-events: none;
}

.rotor { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; will-change: transform; }
.rotor svg { display: block; width: 100%; height: 100%; }

.wheel-hub {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 22%; aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--display); font-size: clamp(1rem, 5vw, 1.6rem); color: #5a1b00;
  background: linear-gradient(180deg, #fffaf0, var(--gold) 58%, var(--gold-deep));
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.pointer {
  position: absolute; top: -3.5%; left: 50%; translate: -50% 0;
  width: 13%; z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
  transform-origin: 50% 32%;
  pointer-events: none;
}
.pointer svg { display: block; width: 100%; height: auto; }

.wheel-label { font-family: var(--display); fill: #2e0d00; }

/* ==========================================================
   ברכה
   ========================================================== */
.blessing-gift { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 5.6vw, 1.7rem); color: var(--gold); }
.blessing-gift-line { margin: 1.2vh 0 0; font-size: clamp(1.05rem, 4.8vw, 1.35rem); font-weight: 700; line-height: 1.5; }
.divider { height: 2px; margin: 3.4vh auto; width: 72%; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.blessing-title { font-size: clamp(1.6rem, 7.4vw, 2.3rem); margin-bottom: 1.6vh; }
.blessing-family {
  margin: 0 0 4vh; font-size: clamp(1.02rem, 4.5vw, 1.3rem); font-weight: 500;
  line-height: 1.8; color: rgba(255, 255, 255, 0.96); white-space: pre-line;
}

/* ==========================================================
   מסכים גדולים
   ========================================================== */
@media (min-width: 720px) and (min-height: 620px) {
  .screen { gap: 24px; padding-top: 11vh; }
  .wheel-area { --wheel-size: min(60vh, 440px); }
  .card { padding: 40px 44px; }
  .gate-card, .mazal-card { padding: 44px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-glow, .sparkle, .balloon, .bokeh, .photo-frame, .photo-frame::after,
  .wheel-frame::after, .btn::after, .btn-spin, .photo-badge, .gate-emoji, .mazal-emoji { animation: none; }
}

/* ==========================================================
   נורות מסביב לגלגל
   ========================================================== */
.bulbs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.bulb {
  position: absolute; top: 50%; left: 50%;
  width: 3.4%; aspect-ratio: 1;
  margin: -1.7% 0 0 -1.7%;
  border-radius: 50%;
  background: #fff6d6;
  box-shadow: 0 0 0 1px rgba(122, 43, 0, 0.45);
}

.bulb::after {
  content: ""; position: absolute; inset: -115%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 225, 1) 0%, rgba(255, 210, 90, 0.75) 32%, transparent 68%);
  opacity: 0.18;
  animation: bulb-idle 1.7s ease-in-out infinite var(--idle-delay, 0s);
}

@keyframes bulb-idle { 0%, 100% { opacity: 0.18; } 50% { opacity: 1; } }

.wheel-area.is-spinning .bulb::after {
  animation: bulb-chase 0.55s linear infinite var(--chase-delay, 0s);
}
@keyframes bulb-chase { 0%, 62%, 100% { opacity: 0.18; } 12%, 32% { opacity: 1; } }

.wheel-area.is-winning .bulb::after {
  animation: bulb-win 0.26s steps(1, end) infinite var(--idle-delay, 0s);
}
@keyframes bulb-win { 0% { opacity: 1; } 50% { opacity: 0.2; } }

.fireworks-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 44; pointer-events: none; }

/* ==========================================================
   קופסת המתנה שנפתחת
   ========================================================== */
.giftbox {
  --box: #ff4d84;
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: clamp(120px, 42vw, 180px);
  aspect-ratio: 1;
}

.gb-body {
  position: absolute; inset: 26% 6% 4%;
  border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--box) 85%, #fff) 0%, var(--box) 45%, color-mix(in srgb, var(--box) 70%, #000) 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.gb-body::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 16%; translate: -50% 0;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, var(--gold-deep));
}

.gb-lid {
  position: absolute; inset: 12% 0 auto; height: 22%;
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--box) 90%, #fff), var(--box));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  transform-origin: 50% 100%;
}

.gb-lid::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 14%; translate: -50% 0;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 60%, var(--gold-deep));
}

.gb-bow {
  position: absolute; bottom: 88%; left: 50%;
  width: 46%; aspect-ratio: 2 / 1; translate: -50% 0;
  background:
    radial-gradient(circle at 22% 60%, var(--gold) 0 30%, transparent 32%),
    radial-gradient(circle at 78% 60%, var(--gold) 0 30%, transparent 32%),
    radial-gradient(circle at 50% 78%, var(--gold-light) 0 14%, transparent 16%);
}

.giftbox.is-shaking { animation: gb-shake 0.85s ease-in-out; }
@keyframes gb-shake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15% { transform: rotate(-7deg) translateY(-4px); }
  30% { transform: rotate(7deg) translateY(0); }
  45% { transform: rotate(-6deg) translateY(-6px); }
  60% { transform: rotate(6deg) translateY(0); }
  75% { transform: rotate(-4deg) translateY(-3px); }
  88% { transform: rotate(3deg) translateY(0); }
}

.giftbox.is-open .gb-lid { animation: gb-lid-fly 0.65s cubic-bezier(0.3, -0.6, 0.6, 1) forwards; }
@keyframes gb-lid-fly {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-190%) rotate(-28deg) scale(0.85); opacity: 0; }
}

.giftbox.is-open .gb-body { animation: gb-body-pop 0.6s ease forwards; }
@keyframes gb-body-pop {
  40% { transform: scaleY(0.92) scaleX(1.06); }
  100% { transform: scale(0.9); opacity: 0; }
}

/* התוכן מתגלה מתוך הקופסה */
.reveal { opacity: 0; }
.reveal.is-revealed { animation: reveal-in 0.7s cubic-bezier(0.18, 1.45, 0.4, 1) both; }
@keyframes reveal-in {
  from { opacity: 0; transform: scale(0.35) translateY(28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bulb::after, .giftbox.is-shaking { animation: none; }
}

/* ==========================================================
   מסך "לחצי כאן להתחלה"
   ========================================================== */
.intro-overlay {
  z-index: 60;
  background: radial-gradient(circle at 50% 35%, rgba(60, 10, 88, 0.92) 0%, rgba(10, 2, 22, 0.96) 100%);
  cursor: pointer;
}

.intro-overlay.is-closing { animation: fade-out 0.32s ease forwards; }

.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4vh;
  width: min(86vw, 420px);
  padding: 8vw 6vw;
  font-family: var(--font);
  text-align: center;
  color: var(--white);
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 201, 77, 0.25), transparent 62%),
    linear-gradient(160deg, #4d1478 0%, #2c0945 62%, #1b0530 100%);
  border: 3px solid var(--gold);
  border-radius: 30px;
  box-shadow: 0 0 70px rgba(255, 201, 77, 0.35), 0 22px 54px rgba(0, 0, 0, 0.62);
  cursor: pointer;
  animation: intro-pulse 2.1s ease-in-out infinite;
}

@keyframes intro-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(255, 201, 77, 0.3), 0 22px 54px rgba(0, 0, 0, 0.6); }
  50% { transform: scale(1.035); box-shadow: 0 0 95px rgba(255, 201, 77, 0.55), 0 22px 54px rgba(0, 0, 0, 0.6); }
}

.intro-emoji { font-size: clamp(3rem, 15vw, 5rem); line-height: 1; }

.intro-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 7.5vw, 2.6rem);
  background: linear-gradient(180deg, #fffaf0 0%, var(--gold-light) 30%, var(--gold) 65%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-shadow));
  padding: 0 0.1em 0.08em;
}

.intro-sub { font-size: clamp(0.9rem, 4vw, 1.15rem); font-weight: 500; color: rgba(255, 255, 255, 0.8); }

@media (prefers-reduced-motion: reduce) { .intro-card { animation: none; } }