:root {
  color-scheme: dark;
  --ink: #19133d;
  --ink-deep: #100d2d;
  --ink-soft: #2a2259;
  --lavender: #a795ff;
  --gold: #ffe071;
  --gold-deep: #eba93b;
  --cream: #fff8dc;
  --teal: #5de0d0;
  --coral: #ff8275;
  --line: #51447a;
  --text: #fff9e7;
  --muted: #c0b8e1;
  font-family: 'Nunito', sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; color: var(--text); background: var(--ink); overflow-x: hidden; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 10% 18%, #3e2d7440 0, transparent 35%), radial-gradient(ellipse at 90% 65%, #34316b38 0, transparent 40%); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1160px, calc(100% - 56px)); margin-inline: auto; }
.game-shell { overflow: hidden; }
.nav { z-index: 10; position: relative; height: 82px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #fff2; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: white; font: 1000 23px/1 'Baloo 2', sans-serif; letter-spacing: .4px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid #fff3b5; border-radius: 14px 12px 15px 11px; background: linear-gradient(145deg, #ffe887, #f5ae3b); box-shadow: 0 4px 0 #b67038, inset 0 2px #ffffffb0; overflow: hidden; transform: rotate(-5deg); }
.brand-mark img { width: 56px; max-width: none; height: 56px; object-fit: contain; transform: translateY(5px) rotate(5deg); }
.brand-i,.brand-bang { color: var(--gold); }
.nav nav { display: flex; align-items: center; gap: 36px; color: #d6ceef; font-size: 13px; font-weight: 900; }
.nav nav a { transition: color .18s, transform .18s; }
.nav nav a:hover { color: var(--gold); transform: translateY(-2px); }
.nav-play { display: flex; align-items: center; gap: 9px; border: 2px solid #7465a6; border-radius: 12px; padding: 10px 14px; font-size: 10px; font-weight: 1000; letter-spacing: .5px; background: #29234f; box-shadow: 0 4px #11102c; transition: transform .18s, box-shadow .18s; }
.nav-play:hover { transform: translateY(-2px); box-shadow: 0 6px #11102c; }
.nav-play-icon { color: var(--gold); font-size: 12px; }
.hero { position: relative; min-height: 680px; isolation: isolate; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 58px 30px 70px; }
.hero-scene { position: absolute; z-index: -2; inset: 0 -100px; background: url('/images/quiz-isles.webp') 50% 49% / cover no-repeat; opacity: .82; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hero-vignette { position: absolute; z-index: -1; inset: 0 -100px; background: linear-gradient(90deg, #151233f2 1%, #151233dd 30%, #1512336e 57%, #15123342 100%), linear-gradient(0deg, var(--ink) 0%, transparent 22%, transparent 74%, #15123355 100%); }
.hero-copy { position: relative; z-index: 2; padding: 0 0 20px; max-width: 600px; }
.season-tag,.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #ded2ff; font-size: 10px; font-weight: 1000; letter-spacing: 1.6px; }
.season-tag { height: 31px; border: 1px solid #d5c67966; border-radius: 9px; padding: 0 12px; background: #28204fe8; box-shadow: 0 3px #130f2e; }
.season-tag i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.season-spark,.eyebrow>span { color: var(--gold); font-size: 16px; }
.hero h1,.section-heading h2,.journey h2,.final-cta h2 { margin: 20px 0 10px; font: 800 clamp(58px, 7.2vw, 91px)/.86 'Baloo 2', sans-serif; letter-spacing: -2px; text-shadow: 0 5px #28204e; }
.hero h1 span,.section-heading h2 span,.journey h2 span,.final-cta h2 span { color: var(--gold); }
.hero-copy>p { max-width: 440px; margin: 24px 0 25px; color: #e0daef; font-size: 16px; line-height: 1.55; font-weight: 800; text-shadow: 0 2px 10px #13102a; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.arcade-button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 19px; min-height: 53px; border: 2px solid #fff7c5; border-radius: 13px; padding: 0 15px 0 20px; font: 1000 11px 'Nunito', sans-serif; letter-spacing: .5px; transition: transform .17s, filter .17s, box-shadow .17s; }
.arcade-button b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; font-size: 18px; line-height: 1; }
.arcade-button:hover { transform: translateY(-4px) rotate(-1deg); filter: saturate(1.1); }
.arcade-button:active { transform: translateY(2px); }
.arcade-button-gold { color: #4c2b67; background: linear-gradient(#fff09b, #ffd65a 52%, #ffbd47); box-shadow: 0 6px #b87539, 0 9px #261944, inset 0 2px #fffbd2; }
.arcade-button-gold b { background: #fff3bb; box-shadow: inset 0 -2px #e4bd50; }
.arcade-button-gold:hover { box-shadow: 0 9px #b87539, 0 12px #261944, inset 0 2px #fffbd2; }
.hero-secondary { display: inline-flex; align-items: center; gap: 9px; color: #fff9e8; font-size: 12px; font-weight: 1000; }
.play-disc { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #bcb0e0; border-radius: 50%; padding-left: 2px; color: var(--gold); background: #28214c; transition: transform .25s; }
.hero-secondary:hover .play-disc { transform: rotate(90deg) scale(1.1); }
.hero-reward { display: flex; align-items: center; gap: 11px; width: fit-content; margin-top: 35px; border: 1px solid #e8d58b3d; border-radius: 11px; padding: 8px 11px 8px 8px; background: #171334df; box-shadow: 0 4px #0d0b25; }
.reward-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid #fff1a6; border-radius: 10px; color: #6a3c8b; font-size: 21px; background: linear-gradient(#fff293, #f4b83e); box-shadow: inset 0 -3px #d3903d; }
.hero-reward b,.hero-reward small { display: block; }
.hero-reward b { color: var(--cream); font-size: 11px; }
.hero-reward small { margin-top: 2px; color: #b9aecf; font-size: 9px; font-weight: 800; }
.reward-arrow { margin-left: 13px; color: var(--gold); font-size: 20px; }
.hero-character { z-index: 1; position: relative; height: 520px; display: flex; align-items: center; justify-content: center; }
.hero-character::before { content: ''; position: absolute; bottom: 35px; width: 360px; height: 90px; border-radius: 50%; background: #201643; filter: blur(16px); }
.hero-character>img { position: relative; z-index: 1; width: min(105%, 510px); max-height: 495px; object-fit: contain; filter: drop-shadow(0 23px 20px #100d326b); animation: owl-bob 4s ease-in-out infinite; }
.hello-bubble { z-index: 3; position: absolute; top: 54px; right: 4px; display: flex; flex-direction: column; gap: 2px; border: 3px solid #553576; border-radius: 15px; padding: 11px 15px; color: #44295f; background: #fff9df; box-shadow: 0 5px #bd7f4f; transform: rotate(4deg); animation: bubble-bob 3s ease-in-out infinite; }
.hello-bubble::before { content: ''; position: absolute; left: 16px; bottom: -13px; width: 17px; height: 17px; background: #fff9df; border-right: 3px solid #553576; border-bottom: 3px solid #553576; transform: rotate(45deg); }
.hello-bubble b { font: 800 18px 'Baloo 2', sans-serif; }
.hello-bubble span { color: #716084; font-size: 10px; line-height: 1.25; font-weight: 900; }
.hello-bubble i { position: absolute; top: -9px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--coral); }
.character-level { z-index: 3; position: absolute; left: 7px; bottom: 65px; display: grid; place-items: center; width: 62px; height: 67px; border: 3px solid #fff1a8; border-radius: 19px 17px 20px 15px; color: #53306f; background: linear-gradient(#fff39b, #f5bd4e); box-shadow: 0 5px #a96840; transform: rotate(-9deg); }
.character-level span { margin-top: 2px; font-size: 8px; font-weight: 1000; letter-spacing: 1px; }
.character-level b { font: 800 29px/.8 'Baloo 2', sans-serif; }
.character-level i { position: absolute; bottom: -14px; border: 1px solid #fff; border-radius: 5px; padding: 2px 5px; color: white; background: #8e5cc3; font-size: 7px; font-weight: 1000; font-style: normal; letter-spacing: .6px; }
.xp-toast { z-index: 4; position: absolute; right: 4px; bottom: 74px; display: grid; grid-template-columns: 32px auto; column-gap: 7px; align-items: center; border: 2px solid #643d8e; border-radius: 12px; padding: 7px 11px 7px 7px; color: #654287; background: #fff9df; box-shadow: 0 5px #b98345; transform: rotate(4deg); animation: bubble-bob 3.5s ease-in-out infinite reverse; }
.xp-toast>span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #70448d; background: #ffda60; font-size: 21px; }
.xp-toast b { font: 800 14px 'Baloo 2', sans-serif; line-height: 1; }
.xp-toast small { margin-top: 3px; font-size: 7px; font-weight: 1000; letter-spacing: .5px; }
.character-spark { z-index: 2; position: absolute; color: var(--gold); text-shadow: 0 0 15px #ffdf74; animation: twinkle 1.8s ease-in-out infinite; }
.spark-one { top: 135px; left: 24px; font-size: 28px; }
.spark-two { top: 210px; right: 5px; color: #fb91b3; font-size: 34px; animation-delay: .8s; }
.spark-three { right: 65px; bottom: 155px; font-size: 19px; animation-delay: 1.2s; }
.hero-bottom { position: absolute; right: 27px; bottom: 17px; left: 27px; display: flex; justify-content: space-between; color: #c5badf; font-size: 8px; font-weight: 1000; letter-spacing: 1.2px; }
.hero-bottom>span:last-child b { padding-left: 4px; color: var(--gold); font-size: 15px; }
.pulse-dot,.live-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #68ecc3; box-shadow: 0 0 10px #68ecc3; animation: pulse 1.8s ease-in-out infinite; }
.hero-bottom .pulse-dot { margin-right: 6px; }
.section { padding-top: 65px; padding-bottom: 82px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.eyebrow { color: #c1b4ee; font-size: 9px; letter-spacing: 1.55px; }
.section-heading h2,.journey h2 { margin: 10px 0 0; color: white; font-size: 57px; line-height: .9; text-shadow: 0 4px #261c50; }
.section-heading>p { max-width: 320px; margin: 0 0 3px; color: var(--muted); font-size: 13px; line-height: 1.6; font-weight: 700; }
.world-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.world-card { --card: #a379e6; --card-deep: #664297; position: relative; display: block; grid-column: span 2; min-height: 247px; overflow: hidden; border: 3px solid #45346c; border-radius: 22px; padding: 15px; background: linear-gradient(148deg, color-mix(in srgb, var(--card) 31%, #34275f), #211b4b 67%); box-shadow: 0 7px #110e2d, inset 0 1px #ffffff1f; transition: transform .18s, border-color .18s, filter .18s; }
.world-card:nth-child(4) { grid-column: 2 / span 2; }
.world-card:nth-child(5) { grid-column: 4 / span 2; }
.world-card:hover { z-index: 2; transform: translateY(-7px) rotate(-1deg); border-color: var(--card); filter: saturate(1.14); }
.world-card::before { content: ''; position: absolute; right: -44px; top: -63px; width: 180px; height: 180px; border: 2px solid color-mix(in srgb, var(--card) 55%, transparent); border-radius: 45% 55% 55% 45%; transform: rotate(27deg); box-shadow: 0 0 0 13px color-mix(in srgb, var(--card) 12%, transparent), 0 0 0 27px color-mix(in srgb, var(--card) 8%, transparent); }
.world-art { --card: #f3a8d8; --card-deep: #9e5db4; }
.world-food { --card: #ffb767; --card-deep: #ad633b; }
.world-cars { --card: #6dd7e5; --card-deep: #3775a1; }
.world-sports { --card: #ffda68; --card-deep: #ad7541; }
.world-cinema { --card: #ff90aa; --card-deep: #a14d86; }
.world-ribbon { z-index: 1; position: relative; display: inline-block; border: 1px solid color-mix(in srgb, var(--card) 47%, white); border-radius: 6px; padding: 5px 8px; color: color-mix(in srgb, var(--card) 22%, white); background: color-mix(in srgb, var(--card-deep) 58%, #221d4c); font-size: 8px; font-weight: 1000; letter-spacing: .8px; }
.world-artwork { position: absolute; top: 4px; right: 8px; display: grid; place-items: center; width: 132px; height: 116px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card) 32%, #fff2) 0, transparent 71%); transform: rotate(6deg); transition: transform .25s; }
.world-artwork svg { width: 130px; filter: drop-shadow(0 6px 0 #160f354e); }
.world-card:hover .world-artwork { transform: rotate(-4deg) scale(1.1); }
.world-sticker { position: absolute; top: 80px; right: 24px; display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #fff2c9; border-radius: 50%; color: #65417e; background: var(--card); box-shadow: 0 3px var(--card-deep); font-size: 15px; transform: rotate(11deg); }
.world-info { position: absolute; right: 13px; bottom: 15px; left: 17px; display: flex; flex-direction: column; align-items: flex-start; }
.world-info>span { border-radius: 5px; padding: 3px 6px; color: #fff3e1; background: color-mix(in srgb, var(--card-deep) 75%, #221b49); font-size: 7px; font-weight: 1000; letter-spacing: 1px; }
.world-info>b { margin-top: 5px; color: #fff9e8; font: 700 23px/1.05 'Baloo 2', sans-serif; text-shadow: 0 3px #241843; }
.world-info>small { margin-top: 3px; color: #d1c7e4; font-size: 9px; font-weight: 800; }
.world-go { position: absolute; right: 14px; bottom: 13px; display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #fff0b7; border-radius: 10px; color: #583b6f; background: var(--gold); box-shadow: 0 3px #bb7840; font-size: 17px; transition: transform .16s; }
.world-card:hover .world-go { transform: translateX(3px); }
.map-footer { display: flex; align-items: center; gap: 11px; margin-top: 25px; border: 2px solid #463971; border-radius: 13px; padding: 12px 15px; background: #211b47; box-shadow: 0 4px #100d29; }
.map-flag { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; color: #523c6f; background: var(--gold); font-size: 18px; }
.map-footer>span:nth-child(2) { display: flex; flex-direction: column; }
.map-footer>span:nth-child(2) b { color: white; font-size: 10px; }
.map-footer>span:nth-child(2) small { margin-top: 2px; color: #aaa0ca; font-size: 8px; }
.map-meter { flex: 1; height: 10px; margin-left: auto; border: 2px solid #554379; border-radius: 10px; background: #130f30; }
.map-meter i { display: block; width: 3%; height: 100%; border-radius: inherit; background: var(--gold); }
.map-progress { color: var(--gold); font-size: 10px; white-space: nowrap; }
.journey { padding-top: 10px; padding-bottom: 104px; }
.journey-board { position: relative; min-height: 365px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; overflow: hidden; border: 3px solid #7060a4; border-radius: 27px; padding: 42px 48px; background: linear-gradient(115deg, #533c9a, #312863 63%, #262051); box-shadow: 0 9px #0e0c2a, inset 0 2px #ffffff25; }
.journey-board::before { content: ''; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 31px 31px; mask-image: linear-gradient(90deg, transparent, black); }
.journey-copy { z-index: 2; position: relative; }
.journey h2 { font-size: 57px; }
.journey-copy p { max-width: 345px; margin: 15px 0 19px; color: #ddd4f0; font-size: 12px; line-height: 1.6; font-weight: 700; }
.arcade-button-light { min-height: 46px; border-color: #fbf4d8; color: #4a3473; background: linear-gradient(#fffef2, #e4d5ff); box-shadow: 0 5px #9561a0, 0 8px #171133; font-size: 9px; }
.arcade-button-light b { background: #d4c0fb; box-shadow: inset 0 -2px #ac94d7; }
.level-path { z-index: 2; position: relative; height: 266px; margin-left: 25px; }
.path-line { position: absolute; inset: 48px 15px 55px; border: 7px dashed #fff2a8; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 4px #624586); }
.path-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff5d0; font-size: 7px; font-weight: 1000; letter-spacing: 1px; text-shadow: 0 2px #282050; }
.path-node i { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #fff1b2; border-radius: 16px 13px 16px 12px; color: #57366d; background: linear-gradient(#fff1a4, #f6b84a); box-shadow: 0 5px #a96742; font: 800 23px 'Baloo 2', sans-serif; font-style: normal; transform: rotate(-8deg); }
.node-one { left: 8px; bottom: 47px; }
.node-two { left: 26%; top: 47px; }
.node-three { left: 52%; bottom: 52px; }
.node-four { right: 10%; top: 29px; }
.node-four i { color: white; background: linear-gradient(#fc8f8c, #d75779); }
.path-chest { position: absolute; right: 0; bottom: 37px; display: grid; place-items: center; width: 59px; height: 49px; border: 3px solid #fff0af; border-radius: 12px 13px 15px 14px; color: #703d85; background: linear-gradient(#ffd572 0 47%, #e99250 49%); box-shadow: 0 6px #9d5846; font-size: 24px; animation: chest-bounce 1.5s ease-in-out infinite; }
.path-ticket { position: absolute; left: 44%; top: 13px; display: flex; flex-direction: column; align-items: center; width: 65px; border: 2px solid #fff4c7; border-radius: 11px; padding: 6px 4px; color: #604080; background: #fff8dc; box-shadow: 0 4px #bf8751; transform: rotate(7deg); }
.path-ticket span { font-size: 7px; font-weight: 1000; }
.path-ticket b { font: 800 20px/.9 'Baloo 2', sans-serif; }
.path-ticket small { margin-top: 3px; font-size: 6px; font-weight: 1000; }
.board-decoration { position: absolute; color: #fff0a0; opacity: .8; }
.board-star { right: 25px; top: 25px; font-size: 25px; animation: twinkle 2s infinite; }
.board-ring { right: 41%; bottom: -126px; width: 230px; height: 230px; border: 1px solid #fff3; border-radius: 50%; box-shadow: 0 0 0 23px #fff1, 0 0 0 46px #fff1; }
.rank-heading { align-items: center; margin-bottom: 23px; }
.rank-side { text-align: right; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #51447c; border-radius: 8px; padding: 7px 9px; color: #d8cff0; background: #211c4a; font-size: 8px; font-weight: 1000; letter-spacing: .8px; }
.rank-side>p { margin: 9px 0 0; color: white; font: 700 21px/1.05 'Baloo 2', sans-serif; }
.rank-mascot { margin-top: 9px; color: #9789bd; font-size: 7px; font-weight: 1000; letter-spacing: .8px; }
.leaderboard-card { overflow: hidden; border: 3px solid #51447b; border-radius: 18px; background: #211c49; box-shadow: 0 7px #100d2a, inset 0 1px #ffffff20; }
.ranking-banner { min-height: 49px; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-bottom: 2px solid #55457e; background: linear-gradient(90deg, #392b66, #29234f); }
.ranking-banner>span:first-child { color: var(--gold); font-size: 19px; filter: drop-shadow(0 2px #a76b39); }
.ranking-banner>b { color: #fff8e5; font-size: 10px; font-weight: 1000; letter-spacing: 1px; }
.ranking-season { margin-left: auto; border-radius: 5px; padding: 4px 6px; color: #bbace4; background: #201a44; font-size: 7px; font-weight: 1000; letter-spacing: .6px; }
.ranking-head,.ranking-row { display: grid; grid-template-columns: .75fr 3fr 1fr 1.1fr; align-items: center; padding: 12px 20px; }
.ranking-head { border-bottom: 1px solid #ffffff15; color: #a59ac6; font-size: 8px; font-weight: 1000; letter-spacing: .9px; }
.ranking-head span:last-child { text-align: right; }
.ranking-row { min-height: 57px; border-bottom: 1px solid #ffffff0d; color: #eee9f9; font-size: 12px; font-weight: 900; transition: background .15s; }
.ranking-row:hover { background: #ffffff08; }
.ranking-row:last-child { border-bottom: 0; }
.rank-position { color: #b8afd0; font: 800 19px 'Baloo 2', sans-serif; }
.top-player .rank-position { color: var(--gold); font-size: 23px; text-shadow: 0 2px #a35b38; }
.player-name { display: flex; align-items: center; gap: 9px; }
.player-name i { display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #fff2c5; border-radius: 11px; color: #563a79; background: linear-gradient(140deg, #9decda, #43acb8); box-shadow: 0 3px #26365b; font-size: 11px; font-style: normal; font-weight: 1000; }
.ranking-row:nth-child(odd) .player-name i { background: linear-gradient(140deg, #ffb8c0, #e97a95); }
.rank-correct { color: #ccc2e1; font-size: 11px; }
.rank-correct small,.rank-score small { color: #9c90bd; font-size: 8px; }
.rank-score { color: var(--gold); text-align: right; font-size: 12px; }
.ranking-loading { min-height: 125px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #c6bbdf; font-size: 11px; font-weight: 900; }
.ranking-loading img { width: 43px; height: 40px; object-fit: contain; animation: owl-bob 2s infinite; }
.empty-ranking { min-height: 127px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #ded5ef; }
.empty-ranking>span { color: var(--gold); font-size: 22px; }
.empty-ranking b { font: 700 18px 'Baloo 2', sans-serif; }
.empty-ranking small { color: #a99dc4; font-size: 9px; }
.ranking-bottom { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border-top: 1px solid #ffffff13; color: #9d93b8; background: #1d1941; font-size: 7px; font-weight: 1000; letter-spacing: .7px; }
.ranking-bottom .pulse-dot { width: 6px; height: 6px; margin-right: 5px; }
.ranking-bottom a { color: var(--gold); }
.ranking-bottom a b { margin-left: 4px; font-size: 15px; vertical-align: -1px; }
.ranking-note { margin: 12px 0 0; color: #9f95bc; text-align: right; font-size: 9px; }
.final-cta { position: relative; min-height: 174px; display: flex; align-items: center; gap: 21px; overflow: hidden; margin-bottom: 80px; border: 2px solid #7262a4; border-radius: 22px; padding: 20px 31px; background: linear-gradient(110deg, #463783, #2c245a); box-shadow: 0 7px #110e2d; }
.final-cta>img { z-index: 1; width: 133px; height: 140px; object-fit: contain; align-self: end; margin-bottom: -5px; filter: drop-shadow(0 7px 5px #150d354b); }
.final-cta>div:nth-of-type(1) { z-index: 1; }
.final-cta h2 { margin: 3px 0 0; font-size: 43px; line-height: .95; }
.final-cta p { margin: 4px 0 0; color: #d4cbe8; font-size: 10px; font-weight: 800; }
.final-cta>.arcade-button { z-index: 1; margin-left: auto; }
.cta-confetti { position: absolute; inset: 16px 14px auto; color: #fff1a5; opacity: .52; font-size: 15px; letter-spacing: 30px; }
.footer { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #ffffff20; color: #968cae; font-size: 9px; font-weight: 800; }
.footer .brand { font-size: 17px; }
.footer .brand-mark { width: 32px; height: 32px; border-width: 2px; border-radius: 10px; }
.footer .brand-mark img { width: 44px; height: 44px; }
.footer>a:last-child { color: #c9bfdf; font-size: 8px; letter-spacing: .7px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.18,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.world-card.reveal:nth-child(2) { transition-delay: .08s; }
.world-card.reveal:nth-child(3) { transition-delay: .16s; }
.world-card.reveal:nth-child(4) { transition-delay: .08s; }
.world-card.reveal:nth-child(5) { transition-delay: .16s; }
@keyframes owl-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes bubble-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes twinkle { 0%,100% { opacity: .65; transform: scale(.86) rotate(-7deg); } 50% { opacity: 1; transform: scale(1.15) rotate(8deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .44; } }
@keyframes chest-bounce { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-5px) rotate(-3deg); } }
@media (max-width: 850px) {
  .shell { width: min(100% - 38px, 650px); }
  .nav { height: 72px; }
  .nav nav { gap: 17px; font-size: 11px; }
  .nav-play { padding: 9px 10px; font-size: 8px; }
  .hero { min-height: 620px; grid-template-columns: 1fr .75fr; padding: 45px 9px 55px; }
  .hero h1 { font-size: clamp(55px, 9vw, 72px); }
  .hero-character { height: 440px; }
  .hero-character>img { width: 125%; }
  .hello-bubble { top: 26px; right: -10px; }
  .character-level { left: -10px; bottom: 55px; }
  .xp-toast { right: -9px; bottom: 68px; }
  .world-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .world-card,.world-card:nth-child(4),.world-card:nth-child(5) { grid-column: auto; }
  .world-card:last-child { grid-column: 1 / -1; min-height: 202px; }
  .world-card:last-child .world-artwork { right: 27%; }
  .world-card:last-child .world-info { bottom: 23px; }
  .journey-board { padding-inline: 28px; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 30px); }
  .nav { height: 65px; }
  .brand { gap: 7px; font-size: 19px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand-mark img { width: 48px; height: 48px; }
  .nav nav { display: none; }
  .nav-play { border-radius: 9px; padding: 8px 9px; font-size: 7px; }
  .nav-play-icon { font-size: 9px; }
  .hero { min-height: 795px; display: block; padding: 38px 5px 53px; }
  .hero-scene { inset: 0 -75px; background-position: 48% center; }
  .hero-vignette { inset: 0 -75px; background: linear-gradient(90deg, #151233ed, #151233a1 70%, #15123370), linear-gradient(0deg, var(--ink) 0%, transparent 38%, #15123312 100%); }
  .hero-copy { max-width: 100%; padding-top: 0; }
  .season-tag { height: 28px; gap: 6px; padding-inline: 8px; font-size: 7px; letter-spacing: .9px; }
  .hero h1 { margin-top: 17px; font-size: clamp(54px, 16vw, 71px); }
  .hero-copy>p { max-width: 315px; margin: 13px 0 17px; font-size: 13px; }
  .hero-actions { gap: 14px; }
  .arcade-button { min-height: 47px; gap: 9px; padding-inline: 12px; font-size: 8px; }
  .arcade-button b { width: 23px; height: 23px; font-size: 15px; }
  .hero-secondary { gap: 6px; font-size: 9px; }
  .play-disc { width: 26px; height: 26px; font-size: 10px; }
  .hero-reward { margin-top: 17px; }
  .hero-character { position: absolute; right: 4px; bottom: 20px; width: 84%; height: 400px; }
  .hero-character>img { width: 113%; max-height: 397px; }
  .hello-bubble { top: 7px; right: -1px; padding: 8px 10px; }
  .hello-bubble b { font-size: 15px; }
  .hello-bubble span { font-size: 8px; }
  .character-level { left: -14px; bottom: 52px; transform: scale(.84) rotate(-9deg); }
  .xp-toast { right: -7px; bottom: 58px; transform: scale(.88) rotate(4deg); }
  .hero-character::before { bottom: 10px; width: 240px; }
  .hero-bottom { right: 3px; bottom: 9px; left: 3px; font-size: 6px; letter-spacing: .8px; }
  .hero-bottom>span:last-child { display: none; }
  .section { padding-top: 46px; padding-bottom: 58px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 22px; }
  .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .section-heading h2,.journey h2 { font-size: 45px; }
  .section-heading>p { font-size: 11px; }
  .world-grid { gap: 10px; }
  .world-card { min-height: 191px; border-width: 2px; border-radius: 17px; padding: 10px; }
  .world-ribbon { padding: 4px 6px; font-size: 6px; }
  .world-artwork { top: 0; right: 0; width: 103px; height: 103px; }
  .world-artwork svg { width: 107px; }
  .world-sticker { top: 63px; right: 10px; width: 24px; height: 24px; font-size: 12px; }
  .world-info { right: 7px; bottom: 12px; left: 10px; }
  .world-info>span { padding: 3px 4px; font-size: 6px; letter-spacing: .5px; }
  .world-info>b { margin-top: 4px; font-size: 18px; }
  .world-info>small { max-width: 135px; font-size: 7px; }
  .world-go { right: 8px; bottom: 8px; width: 23px; height: 23px; border-radius: 8px; font-size: 14px; }
  .world-card:last-child { min-height: 177px; }
  .map-footer { gap: 7px; padding: 8px; }
  .map-flag { width: 28px; height: 28px; font-size: 14px; }
  .map-footer>span:nth-child(2) b { font-size: 8px; }
  .map-footer>span:nth-child(2) small { max-width: 115px; font-size: 6px; }
  .map-meter { height: 8px; }
  .map-progress { font-size: 8px; }
  .journey { padding-top: 5px; padding-bottom: 65px; }
  .journey-board { min-height: 550px; grid-template-columns: 1fr; align-content: start; gap: 0; border-radius: 21px; padding: 25px 18px 16px; }
  .journey h2 { font-size: 47px; }
  .journey-copy p { max-width: 315px; font-size: 10px; }
  .arcade-button-light { min-height: 41px; font-size: 7px; }
  .level-path { height: 257px; margin: 17px 0 0; }
  .path-line { inset: 32px 6px 42px; border-width: 5px; }
  .node-one { left: 3px; bottom: 34px; }
  .node-two { left: 25%; top: 44px; }
  .node-three { left: 51%; bottom: 39px; }
  .node-four { right: 10%; top: 22px; }
  .path-node i { width: 39px; height: 39px; border-radius: 13px; font-size: 20px; }
  .path-chest { right: 0; bottom: 28px; width: 48px; height: 41px; font-size: 20px; }
  .path-ticket { left: 41%; top: 3px; transform: scale(.87) rotate(7deg); }
  .rank-heading { flex-direction: row; align-items: end; gap: 8px; }
  .rank-heading .section-heading h2 { font-size: 43px; }
  .rank-side>p { font-size: 15px; }
  .live-pill { gap: 5px; padding: 5px 6px; font-size: 6px; letter-spacing: .1px; }
  .live-pill i { width: 5px; height: 5px; }
  .rank-mascot { font-size: 5px; }
  .leaderboard-card { border-width: 2px; border-radius: 14px; }
  .ranking-banner { min-height: 40px; padding-inline: 10px; }
  .ranking-banner>b { font-size: 8px; }
  .ranking-season { font-size: 6px; }
  .ranking-head,.ranking-row { grid-template-columns: .5fr 2fr .8fr .9fr; padding: 10px 8px; }
  .ranking-head { font-size: 6px; letter-spacing: .2px; }
  .ranking-row { min-height: 51px; font-size: 9px; }
  .rank-position { font-size: 15px; }
  .top-player .rank-position { font-size: 18px; }
  .player-name { gap: 5px; }
  .player-name i { width: 23px; height: 23px; border-radius: 8px; font-size: 9px; }
  .rank-correct { font-size: 9px; }
  .rank-correct small,.rank-score small { font-size: 6px; }
  .rank-score { font-size: 9px; }
  .ranking-bottom { min-height: 37px; padding-inline: 7px; font-size: 5px; letter-spacing: .25px; }
  .ranking-bottom a b { font-size: 11px; }
  .ranking-note { font-size: 8px; }
  .final-cta { min-height: 155px; gap: 8px; margin-bottom: 55px; border-radius: 18px; padding: 16px 11px; }
  .final-cta>img { width: 83px; height: 114px; margin-left: -5px; }
  .final-cta .eyebrow { font-size: 6px; }
  .final-cta h2 { font-size: 34px; }
  .final-cta p { max-width: 160px; font-size: 7px; }
  .final-cta>.arcade-button { gap: 3px; min-height: 37px; margin-left: auto; padding-inline: 6px; font-size: 6px; }
  .final-cta>.arcade-button b { width: 19px; height: 19px; font-size: 11px; }
  .cta-confetti { letter-spacing: 17px; font-size: 10px; }
  .footer { min-height: 75px; flex-wrap: wrap; padding-block: 12px; }
  .footer .brand { font-size: 15px; }
  .footer>span { font-size: 7px; }
  .footer>a:last-child { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}