/* HOW IT WORKS — Star Kitty's guide (modal over the blurred homepage) */
.gd-ov { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(10, 6, 16, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.gd-ov.on { opacity: 1; pointer-events: auto; }
.gd-box { position: relative; width: min(1500px, 84vw, calc((100vh - 130px) * 16 / 9)); aspect-ratio: 16 / 9; transform: translateY(18px) scale(.97); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.gd-ov.on .gd-box { transform: none; }
.gd-stage { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #0c0912; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.gd-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.gd-slide.on { opacity: 1; }
.gd-slide > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-frame { position: absolute; inset: -1.6%; width: 103.2%; height: 103.2%; pointer-events: none; z-index: 3; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }
.gd-x, .gd-nav { position: absolute; z-index: 5; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.gd-x img, .gd-nav img { display: block; width: 100%; height: auto; pointer-events: none; }
.gd-x { width: 56px; right: -26px; top: -26px; }
.gd-nav { width: 58px; top: 50%; margin-top: -32px; }
.gd-nav.prev { left: -84px; } .gd-nav.next { right: -84px; }
.gd-x:hover, .gd-nav:hover { transform: scale(1.06); filter: brightness(1.2) drop-shadow(0 0 10px rgba(214, 178, 106, .55)); }
.gd-nav[disabled] { opacity: .3; pointer-events: none; }
.gd-dots { position: absolute; left: 0; right: 0; bottom: -44px; display: flex; justify-content: center; gap: 12px; z-index: 5; }
.gd-dots i { width: 11px; height: 11px; border-radius: 50%; transform: rotate(45deg); border-radius: 2px; background: rgba(255, 236, 196, .25); box-shadow: 0 0 0 1px rgba(255, 220, 150, .6); transition: background .3s, box-shadow .3s; cursor: pointer; }
.gd-dots i.on { background: linear-gradient(135deg, #f3dca0, #b98a3e); box-shadow: 0 0 0 1.5px #f1d48c, 0 0 10px rgba(214, 178, 106, .6); }
.gd-snd { position: absolute; z-index: 5; left: 0; bottom: -48px; display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; color: #f6e2b8;
  font: 700 13px/1 Barlow, sans-serif; letter-spacing: .18em; opacity: .8; }
.gd-snd:hover { opacity: 1; }
.gd-snd svg { width: 20px; height: 20px; }
/* infographic content: the slide art is the Seedream design; real cards / packs go in its empty slots, captions in code */
.gd-stage { container-type: inline-size; border-radius: 10px; box-shadow: 0 0 0 1px rgba(214, 178, 106, .75), 0 0 0 5px rgba(10, 6, 18, .55), 0 30px 90px rgba(0, 0, 0, .65); }
.gd-slot { position: absolute; overflow: visible; }
.gd-card, .gd-pack { position: absolute; left: 50%; top: 50%; width: auto; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); filter: drop-shadow(0 .5cqw .7cqw rgba(0, 0, 0, .6)); }
.gd-card { height: 84%; border-radius: .45cqw; }
.gd-pack { height: 80%; }
.gd-clash { position: absolute; left: 50%; top: 42%; width: 5.5cqw; height: 5.5cqw; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 6%, rgba(255, 214, 120, .85) 14%, rgba(255, 110, 200, .35) 34%, transparent 62%); animation: gdClash 2.4s ease-in-out infinite; }
@keyframes gdClash { 50% { transform: translate(-50%, -50%) scale(1.18); opacity: .8; } }
.gd-cap { position: absolute; margin: 0; display: flex; align-items: flex-start; justify-content: center; text-align: center; font: 500 1.12cqw/1.45 Barlow, sans-serif; color: #c9c1d8; letter-spacing: .01em; }
/* slide windows: Seedream art fills the window edge to edge, real cards / packs composited in */
.gd-win { overflow: hidden; border-radius: .45cqw; background: #0b0814; isolation: isolate; }
.gd-win::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .28), inset 0 0 1.6cqw rgba(6, 3, 14, .7); }
.gd-win::before { content: ''; position: absolute; inset: -20% -60%; z-index: 8; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 240, 210, .16) 50%, transparent 58%); transform: translateX(-60%); animation: gdSheen 9s ease-in-out infinite; }
.gd-slide .gd-win:nth-of-type(2)::before { animation-delay: 3s; } .gd-slide .gd-win:nth-of-type(3)::before { animation-delay: 6s; }
@keyframes gdSheen { 0%, 70% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.gd-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gd-art.kb { animation: gdKb 18s ease-in-out infinite alternate; transform-origin: 50% 55%; }
@keyframes gdKb { to { transform: scale(1.07); } }
.gd-front { z-index: 5; }
/* cards rising out of the deck case */
.gd-dk { position: absolute; left: calc(51% + var(--dx)); top: 63%; height: 40%; width: auto; border-radius: .35cqw; z-index: 3;
  transform: translate(-50%, -100%) rotate(var(--r)); transform-origin: 50% 100%; filter: drop-shadow(0 0 .9cqw rgba(255, 196, 110, .55));
  animation: gdRise 5s ease-in-out infinite; }
.gd-dk:nth-of-type(2) { animation-delay: -1.6s; } .gd-dk:nth-of-type(3) { animation-delay: -3.2s; }
@keyframes gdRise { 50% { translate: 0 -2.5%; } }
.gd-beam { position: absolute; left: 51%; top: 58%; width: 80%; aspect-ratio: 1; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 214, 140, .55), rgba(255, 170, 80, .15) 35%, transparent 62%); animation: gdPulse 4s ease-in-out infinite; }
.gd-beam.pk { left: 50.5%; top: 36%; width: 95%; }
@keyframes gdPulse { 50% { opacity: .6; } }
.gd-mega { position: absolute; left: 50.5%; top: 56%; height: 44%; width: auto; z-index: 3; transform: translate(-50%, -100%);
  filter: drop-shadow(0 .4cqw .8cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 1.2cqw rgba(255, 200, 120, .45)); animation: gdFloat 4.5s ease-in-out infinite; }
@keyframes gdFloat { 50% { translate: 0 -2%; } }
.gd-cap { position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .6cqw;
  font: 500 1.06cqw/1.35 'Barlow', sans-serif; color: #ece2cd; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.gd-cap b { font-weight: 700; color: #f4cf7c; }
/* voice button */
.gd-snd { padding: 8px 16px 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(214, 178, 106, .55); background: rgba(20, 12, 30, .55); opacity: .9; transition: box-shadow .25s, background .25s, opacity .25s; }
.gd-snd svg { width: 14px; height: 14px; }
.gd-snd:hover, .gd-snd.on { opacity: 1; background: rgba(60, 38, 18, .6); box-shadow: inset 0 0 0 1px #f1d48c, 0 0 14px rgba(214, 178, 106, .45); }
/* ambient particles over the slide background (panels are clipped out) */
.gd-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.gd-slot, .gd-cap { z-index: 2; }
/* painted title (Seedream) with a slow light sweep clipped to its own shape */
.gd-title { position: absolute; left: 50%; top: 2.2%; width: 33%; z-index: 3; transform: translateX(-50%); filter: drop-shadow(0 .5cqw 1cqw rgba(0, 0, 0, .55)); animation: gdTitle 6s ease-in-out infinite; }
.gd-title img { display: block; width: 100%; height: auto; }
.gd-title::after { content: ''; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--t) center / 100% 100% no-repeat; mask: var(--t) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 220, .55) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: gdTSheen 6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes gdTSheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes gdTitle { 50% { transform: translateX(-50%) translateY(-.15cqw); } }
/* ornate window frame (Seedream, 9-slice). s = 0.0359cqw per source px */
.gd-box { container-type: inline-size; width: min(1500px, 84vw, calc((100vh - 230px) * 16 / 9)); }
.gd-mf { position: absolute; z-index: 4; pointer-events: none; top: -2.73cqw; bottom: -2.34cqw; left: -2.98cqw; right: -2.98cqw;
  border-style: solid; border-width: 9.34cqw 8.62cqw 9.34cqw 8.62cqw; border-image: url(mframe.webp) 260 240 260 240 stretch; filter: drop-shadow(0 .6cqw 1.4cqw rgba(0, 0, 0, .55)); }
.gd-mf img { position: absolute; display: block; height: auto; }
.gd-mf .paw { width: 5.75cqw; left: 50%; bottom: -9.34cqw; transform: translateX(-50%); }
.gd-mf .gl, .gd-mf .gr { width: 3.59cqw; top: 50%; transform: translateY(-50%); }
.gd-mf .gl { left: -8.62cqw; } .gd-mf .gr { right: -8.62cqw; }
.gd-stage { box-shadow: 0 30px 90px rgba(0, 0, 0, .65); }
.gd-x { z-index: 6; width: 60px; right: -7.2cqw; top: -1.6cqw; }
.gd-nav.prev { left: calc(-3cqw - 76px); } .gd-nav.next { right: calc(-3cqw - 76px); }
.gd-dots { bottom: calc(-2.34cqw - 40px); } .gd-snd { bottom: calc(-2.34cqw - 46px); left: -2cqw; }
/* slide 2 */
.gd-one { position: absolute; left: var(--l); top: 50%; height: 72%; width: auto; z-index: 3; border-radius: .4cqw; transform: translate(-50%, -50%) rotate(var(--r));
  filter: drop-shadow(0 .5cqw 1cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 1cqw rgba(255, 200, 110, .5)); animation: gdFloat 5s ease-in-out infinite; }
.gd-beam.ice { background: radial-gradient(circle, rgba(190, 220, 255, .5), rgba(120, 160, 255, .14) 35%, transparent 62%); }
.gd-win:has(.ice) .gd-one { filter: drop-shadow(0 .5cqw 1cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 1cqw rgba(170, 205, 255, .55)); }
.gd-lock { position: absolute; left: 26%; top: 50%; width: 3.4cqw; height: 3.4cqw; z-index: 4; transform: translate(85%, 120%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f7fb, #aab4c3 45%, #5d6677); box-shadow: 0 0 0 .18cqw #2b3140, 0 .3cqw .8cqw rgba(0, 0, 0, .6), 0 0 1cqw rgba(170, 205, 255, .6);
  -webkit-mask: none; animation: gdFloat 5s ease-in-out infinite; }
.gd-lock::before { content: ''; position: absolute; inset: 22% 28% 24%; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232b3140' d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); }
.gd-tag { position: absolute; left: 3.5%; top: 5%; z-index: 7; padding: .35cqw .75cqw .3cqw; border-radius: .25cqw; white-space: nowrap;
  font: 700 .78cqw/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .16em; }
.gd-tag.gold { color: #2a1a06; background: linear-gradient(180deg, #f8e2a2, #c9973f); box-shadow: 0 0 0 1px #fff2c4 inset, 0 .25cqw .7cqw rgba(0, 0, 0, .5), 0 0 1cqw rgba(255, 200, 110, .4); }
.gd-tag.silver { color: #1d2230; background: linear-gradient(180deg, #f1f4f8, #9aa5b6); box-shadow: 0 0 0 1px #ffffff inset, 0 .25cqw .7cqw rgba(0, 0, 0, .5), 0 0 1cqw rgba(170, 205, 255, .35); }
.gd-cap b.sv { color: #cfe0ff; }
/* amethyst diamond buttons sitting on the frame's own gems (arrows on the side gems, X on the top-right corner gem) */
.gd-x, .gd-nav { z-index: 6; filter: drop-shadow(0 .3cqw .6cqw rgba(0, 0, 0, .55)); transition: transform .2s ease, filter .2s ease; }
.gd-x { width: 6.4cqw; right: -3.49cqw; top: -3.24cqw; }
.gd-nav { width: 6.4cqw; top: calc(50% - .2cqw); margin-top: 0; transform: translateY(-50%); }
.gd-nav.prev { left: -4.38cqw; } .gd-nav.next { right: -4.38cqw; }
.gd-x:hover { transform: scale(1.08); filter: brightness(1.15) drop-shadow(0 0 .8cqw rgba(200, 140, 255, .8)); }
.gd-nav:hover { transform: translateY(-50%) scale(1.08); filter: brightness(1.15) drop-shadow(0 0 .8cqw rgba(200, 140, 255, .8)); }
.gd-nav[disabled] { opacity: 1; pointer-events: none; filter: grayscale(.85) brightness(.55) drop-shadow(0 .3cqw .6cqw rgba(0, 0, 0, .55)); }
.gd-mf .gl, .gd-mf .gr { display: none; }
/* slide 3: rarity pyramid. Only soft breathing light on each tier (no rotation, no scaling) + a sheen on the seal */
.gd-tier { position: absolute; z-index: 2; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; animation: gdTier 4s ease-in-out infinite; }
.gd-tier.w { background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 62%); }
.gd-tier.b { background: radial-gradient(circle, rgba(90, 150, 255, .45), transparent 62%); }
.gd-tier.p { background: radial-gradient(circle, rgba(205, 110, 255, .45), transparent 62%); }
.gd-tier.r { background: radial-gradient(circle, rgba(255, 80, 90, .45), transparent 62%); }
.gd-tier.g { background: radial-gradient(circle, rgba(255, 240, 200, .5), transparent 62%); }
@keyframes gdTier { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.gd-seal { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; overflow: hidden; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 190, .35) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: gdTSheen 7s ease-in-out infinite 1s; }
.gd-cap.wide { font-size: 1.3cqw; white-space: nowrap; }
/* slide 3 hover: each stained-glass window lights up, a shimmer runs down the glass and its light spills on the floor */
.gd-hot { position: absolute; z-index: 3; pointer-events: auto; border-radius: 50% 50% 6% 6% / 22% 22% 3% 3%; --c: 255, 255, 255; }
.gd-hot.b { --c: 90, 150, 255; } .gd-hot.p { --c: 200, 110, 255; } .gd-hot.r { --c: 255, 80, 90; } .gd-hot.g { --c: 255, 225, 150; }
.gd-hot::before { content: ''; position: absolute; inset: -12% -30%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--c), .45), transparent); opacity: .25; animation: gdTier 4s ease-in-out var(--dl) infinite; transition: opacity .35s, transform .35s; }
.gd-hot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(180deg, transparent 0 35%, rgba(255, 255, 255, .55) 48%, transparent 62%) no-repeat, radial-gradient(ellipse 60% 45% at 50% 55%, rgba(var(--c), .55), transparent 75%);
  background-size: 100% 260%, 100% 100%; background-position: 0 120%, 0 0; }
.gd-hot:hover::before { animation: none; opacity: 1; transform: scale(1.12); }
.gd-hot:hover::after { opacity: 1; animation: gdGlass 1.1s ease-out; }
@keyframes gdGlass { from { background-position: 0 120%, 0 0; } to { background-position: 0 -40%, 0 0; } }
.gd-sealhot { position: absolute; z-index: 3; border-radius: 50%; pointer-events: auto; transition: box-shadow .4s; }
.gd-sealhot::before { content: ''; position: absolute; inset: -15%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .4), transparent); }
.gd-sealhot:hover::before { opacity: 1; }
.gd-slide:has(.gd-sealhot:hover) .gd-seal { animation-duration: 1.4s; }
/* slides 1-2: the window art leans in slightly on hover */
.gd-win .gd-art { transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.gd-win:hover .gd-art:not(.gd-front) { transform: scale(1.045); filter: brightness(1.12); }
.gd-win:hover .gd-art.gd-front { transform: scale(1.045); filter: brightness(1.12); }
.gd-win .gd-art.kb:hover, .gd-win:hover .gd-art.kb { animation-play-state: paused; }
.gd-cap span { text-wrap: balance; }
/* slide 4: art clipped to each gate's arch window */
.gd-arch { position: absolute; z-index: 2; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.gd-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.gd-arch:hover img { transform: scale(1.05); filter: brightness(1.12); }
.gd-arch::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 2cqw rgba(6, 3, 14, .7); }
.gd-cap.sm { font-size: .95cqw; }
.gd-hot.t { --c: 60, 230, 210; }
.gd-hot.door { border-radius: 8% 8% 2% 2%; }
/* slide 5: PLAY NOW call to action (hooks into window.__guidePlay once match select exists) */
.gd-play { position: absolute; z-index: 4; left: 68%; top: 82%; width: 31%; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 .6cqw 1.2cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 1.4cqw rgba(255, 90, 90, .35)); animation: gdPlay 2.6s ease-in-out infinite; transition: filter .25s; }
.gd-play img { display: block; width: 100%; height: auto; pointer-events: none; }
.gd-play::after { content: ''; position: absolute; inset: 14% 8% 22%; pointer-events: none; mix-blend-mode: screen; border-radius: .6cqw;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 200, .55) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: gdTSheen 3.5s ease-in-out infinite; }
.gd-play:hover { filter: brightness(1.12) drop-shadow(0 .6cqw 1.2cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 2.2cqw rgba(255, 120, 110, .7)); animation-play-state: paused; }
.gd-play:active { transform: translate(-50%, -50%) scale(.97); }
.gd-play.nudge { animation: gdNudge .45s ease; }
@keyframes gdPlay { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } }
@keyframes gdNudge { 20%, 60% { transform: translate(-52%, -50%); } 40%, 80% { transform: translate(-48%, -50%); } }
.gd-cap.cta { font-size: 1.25cqw; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 1cqw rgba(0, 0, 0, .6); }
/* slide 5: starter deck fan over the board + ribbon + play */
.gd-fan { position: absolute; z-index: 3; left: 68%; top: 62%; width: 0; height: 0; }
.gd-fan img { position: absolute; left: 0; top: 0; height: 15.5cqw; width: 11.09cqw; max-width: none; border-radius: .45cqw; transform-origin: 50% 230%;
  transform: translate(-50%, -100%) rotate(var(--r)); filter: drop-shadow(0 .5cqw .9cqw rgba(0, 0, 0, .55)) drop-shadow(0 0 .8cqw rgba(255, 200, 120, .35));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; z-index: var(--z); }
.gd-slide.on .gd-fan img { animation: gdDeal .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .08s) both; }
.gd-fan img:hover { transform: translate(-50%, -112%) rotate(var(--r)) scale(1.08); z-index: 20; filter: drop-shadow(0 .8cqw 1.2cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 1.4cqw rgba(255, 210, 130, .8)); }
@keyframes gdDeal { from { transform: translate(-50%, -60%) rotate(0deg) scale(.8); opacity: 0; } }
.gd-fanglow { position: absolute; z-index: 2; left: 68%; top: 44%; width: 46cqw; aspect-ratio: 1.6; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 210, 140, .45), rgba(255, 150, 200, .12) 55%, transparent); animation: gdGem 4s ease-in-out infinite; }
.gd-ribbon { position: absolute; z-index: 4; left: 68%; top: 64.5%; width: 34%; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 .4cqw .8cqw rgba(0, 0, 0, .6)); }
.gd-play { left: 68%; top: 82.5%; width: 25%; }
/* slide 5: the starter deck bursts out of the light and opens into an arc; ribbon + PLAY NOW on the centre axis */
.gd-arc { position: absolute; z-index: 3; left: 61%; top: 58.5%; width: 0; height: 0; }
.gd-arc img { position: absolute; left: 0; top: 0; width: 8.6cqw; height: 12cqw; max-width: none; border-radius: .4cqw; z-index: calc(10 - var(--a));
  --x: calc(var(--n) * 5.8cqw); --y: calc(var(--a) * var(--a) * .7cqw); --r: calc(var(--n) * 8deg);
  transform: translate(calc(-50% + var(--x)), calc(-100% + var(--y))) rotate(var(--r));
  filter: drop-shadow(0 .5cqw .9cqw rgba(0, 0, 0, .55)) drop-shadow(0 0 1cqw rgba(255, 205, 120, .45)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.gd-slide.on .gd-arc img { animation: gdBurstIn .9s cubic-bezier(.15, .9, .25, 1.15) var(--d) both, gdHover 4s ease-in-out calc(var(--d) + .9s) infinite; }
@keyframes gdBurstIn { from { transform: translate(-50%, -20%) rotate(0deg) scale(.15); opacity: 0; filter: brightness(3) drop-shadow(0 0 2cqw rgba(255, 220, 150, 1)); } 60% { opacity: 1; } }
@keyframes gdHover { 50% { translate: 0 -.5cqw; } }
.gd-arc img:hover { transform: translate(calc(-50% + var(--x)), calc(-112% + var(--y))) rotate(var(--r)) scale(1.12); z-index: 30; filter: drop-shadow(0 .8cqw 1.2cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 1.6cqw rgba(255, 215, 140, .9)); }
.gd-slide.burst .gd-ribbon { left: 61%; top: 63.5%; width: 30%; z-index: 4; }
.gd-slide.burst .gd-play { left: 61%; top: 86%; width: 22%; }
.gd-slide.burst:has(.gd-play:hover) .gd-arc img { filter: brightness(1.15) drop-shadow(0 .5cqw .9cqw rgba(0, 0, 0, .55)) drop-shadow(0 0 1.6cqw rgba(255, 215, 140, .9)); }
/* slide 5 (marquee): the painted PLAY NOW sign is the button. Bulbs twinkle + a light chase runs through them;
   on hover the whole sign blazes, the chase speeds up and the sparks around rise faster. */
.gd-bulbs { position: absolute; z-index: 2; pointer-events: none; }
.gd-bulbs img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; transition: opacity .35s, filter .35s; }
.gd-bulbs .b1 { opacity: .35; animation: gdTwinkle 2.4s steps(2, end) infinite; }
.gd-bulbs .b2 { opacity: .9; -webkit-mask: linear-gradient(100deg, transparent 0 40%, #000 47% 53%, transparent 60% 100%) 0 0 / 300% 100% no-repeat;
  mask: linear-gradient(100deg, transparent 0 40%, #000 47% 53%, transparent 60% 100%) 0 0 / 300% 100% no-repeat; animation: gdChase 3.2s linear infinite; }
@keyframes gdTwinkle { 50% { opacity: .55; } }
@keyframes gdChase { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.gd-mglow { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .25; transition: opacity .4s;
  background: radial-gradient(closest-side, rgba(255, 205, 120, .55), transparent); }
.gd-hotplay { position: absolute; z-index: 5; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 30% / 50%; animation: none; filter: none; width: auto; transform: none; }
.gd-hotplay::after { display: none; }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-bulbs .b1 { opacity: 1; animation: none; filter: drop-shadow(0 0 .6cqw rgba(255, 210, 120, .9)); }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-bulbs .b2 { animation-duration: 1.1s; opacity: 1; }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-mglow { opacity: 1; }
.gd-slide.marquee:has(.gd-hotplay:active) .gd-bulbs .b1 { filter: brightness(1.6) drop-shadow(0 0 1cqw #fff3c8); }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-cap.cta b { color: #ffe39a; text-shadow: 0 0 .8cqw rgba(255, 200, 110, .8); }
.gd-hotplay.nudge { animation: none; }
.gd-slide.marquee:has(.gd-hotplay.nudge) .gd-bulbs { animation: gdNudge2 .45s ease; }
@keyframes gdNudge2 { 20%, 60% { translate: -.4cqw 0; } 40%, 80% { translate: .4cqw 0; } }
/* slow sweeping spotlights */
.gd-beam2 { position: absolute; z-index: 1; top: -10%; width: 26%; height: 120%; pointer-events: none; mix-blend-mode: screen; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(200, 170, 255, .22), rgba(255, 210, 150, .08) 60%, transparent); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.gd-beam2.l { left: 10%; animation: gdSweep 7s ease-in-out infinite alternate; }
.gd-beam2.r { left: 52%; animation: gdSweep 8s ease-in-out infinite alternate-reverse; }
@keyframes gdSweep { from { rotate: -14deg; } to { rotate: 14deg; } }
/* slide 5 extra life: falling gold confetti, star twinkles, kitty aura, flickering spotlights */
.gd-confetti { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.gd-confetti i { position: absolute; top: -6%; width: calc(.55cqw * var(--sz)); height: calc(1cqw * var(--sz)); border-radius: 1px;
  background: linear-gradient(135deg, #fff1b8, #e3b04b 45%, #9c6a1f); filter: hue-rotate(var(--hue)) drop-shadow(0 0 .3cqw rgba(255, 210, 120, .6));
  animation: gdFall var(--dur) linear var(--del) infinite; }
.gd-confetti i:nth-child(3n) { border-radius: 50%; width: calc(.6cqw * var(--sz)); height: calc(.6cqw * var(--sz)); }
@keyframes gdFall { 0% { transform: translate(0, 0) rotate3d(1, .4, .2, 0deg); opacity: 0; } 8% { opacity: 1; }
  50% { transform: translate(var(--sw), 56cqw) rotate3d(1, .4, .2, 540deg); } 100% { transform: translate(calc(var(--sw) * -.5), 115cqw) rotate3d(1, .4, .2, 1080deg); opacity: .8; } }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-confetti i { animation-duration: calc(var(--dur) * .55); }
.gd-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gd-stars b { position: absolute; width: calc(2.4cqw * var(--sz)); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 6%, transparent 9%), conic-gradient(from 0deg, transparent 0 40deg, rgba(255, 240, 200, .95) 45deg, transparent 50deg 130deg, rgba(255, 240, 200, .95) 135deg, transparent 140deg 220deg, rgba(255, 240, 200, .95) 225deg, transparent 230deg 310deg, rgba(255, 240, 200, .95) 315deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: gdStar 3.6s ease-in-out var(--del) infinite; }
@keyframes gdStar { 0%, 70%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); } 82% { transform: translate(-50%, -50%) scale(1) rotate(45deg); } }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-stars b { animation-duration: 1.6s; }
.gd-kglow { position: absolute; z-index: 2; pointer-events: none; animation: gdAura 3.4s ease-in-out infinite; }
@keyframes gdAura { 0%, 100% { filter: drop-shadow(0 0 .6cqw rgba(255, 170, 225, .35)); } 50% { filter: drop-shadow(0 0 1.8cqw rgba(255, 190, 235, .8)) drop-shadow(0 0 3cqw rgba(255, 210, 140, .35)); } }
.gd-slide.marquee:has(.gd-hotplay:hover) .gd-kglow { animation-duration: 1.4s; }
.gd-spot { position: absolute; z-index: 1; top: -4%; width: 9cqw; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(170, 190, 255, .35) 30%, transparent 65%); animation: gdFlick 4.5s steps(1, end) infinite; }
.gd-spot.l { left: 7%; } .gd-spot.r { right: 7%; animation-delay: -2.1s; }
@keyframes gdFlick { 0%, 100% { opacity: .9; } 47% { opacity: .55; } 49% { opacity: 1; } 72% { opacity: .75; } }
/* voice button: Star Kitty avatar + LISTEN (clearly "hear her", not "play the game") */
.gd-snd { gap: 9px; padding: 5px 16px 5px 5px; font: 700 13px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .2em; }
.gd-snd .av { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1.5px #f1d48c, 0 0 10px rgba(255, 170, 225, .35); transition: box-shadow .3s; }
.gd-snd svg { width: 16px; height: 16px; }
.gd-snd.on .av { animation: gdTalk 1s ease-in-out infinite; }
@keyframes gdTalk { 50% { box-shadow: 0 0 0 2px #ffd6ef, 0 0 16px rgba(255, 170, 225, .9); } }
.gd-snd .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.gd-snd .eq i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: gdEq .9s ease-in-out infinite; }
.gd-snd .eq i:nth-child(2) { animation-delay: -.3s; } .gd-snd .eq i:nth-child(3) { animation-delay: -.6s; } .gd-snd .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes gdEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.gd-snd:not(.on) .av { animation: gdInvite 2.8s ease-in-out infinite; }
@keyframes gdInvite { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12) rotate(-6deg); } 90% { transform: scale(1.04) rotate(4deg); } }
/* nothing inside the guide may catch clicks while it is closed, and only the visible slide is interactive */
.gd-ov:not(.on), .gd-ov:not(.on) * { pointer-events: none !important; }
.gd-slide:not(.on), .gd-slide:not(.on) * { pointer-events: none !important; }

/* performance: the closed guide is only transparent, so its ~120 looping animations kept running behind every screen */
.gd-ov:not(.on) *, .gd-ov:not(.on) *::before, .gd-ov:not(.on) *::after { animation-play-state: paused !important; }