:root{
  --midnight:#050619;
  --ink:#fff6da;
  --soft:#dcd4ff;
  --gold:#ffd05a;
  --gold2:#ff9f1c;
  --blue:#23c8ff;
  --royal:#2558ff;
  --violet:#8a35ff;
  --green:#23c36b;
  --glass:rgba(11,14,55,.58);
  --line:rgba(255,208,90,.62);
  --line2:rgba(120,68,255,.65);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;background:#050619;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit} img{display:block;max-width:100%}
.site-bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4;opacity:.72;filter:saturate(1.15) contrast(1.05)}
.site-vignette{position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 52% 38%,rgba(80,38,180,.18),transparent 30%),linear-gradient(90deg,rgba(5,6,25,.75) 0%,rgba(11,9,42,.35) 42%,rgba(5,6,25,.72) 100%),linear-gradient(180deg,rgba(3,4,19,.28) 0%,rgba(3,4,19,.65) 100%)}
.sparkles{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1px),radial-gradient(circle,rgba(255,211,90,.9) 1px,transparent 1px);background-size:90px 90px,150px 150px;background-position:10px 20px,60px 80px;opacity:.28;animation:twinkle 9s linear infinite}
@keyframes twinkle{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:.38;transform:translateY(-10px)}}
.coin{position:fixed;width:72px;height:72px;z-index:1;pointer-events:none;filter:drop-shadow(0 0 18px rgba(255,195,48,.7));opacity:.78;animation:floatCoin 5.5s ease-in-out infinite}.coin-a{left:1.5%;top:57%}.coin-b{right:3%;bottom:8%;animation-delay:1s}.coin-c{left:3%;bottom:10%;animation-delay:2s}@keyframes floatCoin{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-18px) rotate(8deg)}}
.topbar{position:fixed;top:0;left:0;right:0;height:92px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:linear-gradient(180deg,rgba(4,5,22,.9),rgba(6,6,31,.58));border-bottom:1px solid rgba(255,208,90,.24);box-shadow:0 10px 38px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.brand img{width:148px;height:auto;filter:drop-shadow(0 0 14px rgba(61,217,255,.75))}.nav{display:flex;align-items:center;gap:22px}.nav a{font-family:Cinzel,serif;font-weight:800;font-size:16px;letter-spacing:.055em;text-transform:uppercase;color:#f8ecff;padding:14px 26px;border:1px solid transparent;border-radius:999px;text-shadow:0 2px 7px #000;transition:.22s}.nav a:hover,.nav a.active{color:#fff3a6;border-color:rgba(255,208,90,.7);box-shadow:inset 0 0 22px rgba(255,187,32,.12),0 0 18px rgba(255,208,90,.23);background:rgba(255,207,90,.08)}
.actions{display:flex;gap:14px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:0;cursor:pointer;font-weight:900;white-space:nowrap;transition:transform .2s,filter .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-dark{padding:15px 26px;color:#fff5d9;background:linear-gradient(180deg,rgba(18,22,65,.92),rgba(9,10,38,.82));border:1.5px solid rgba(255,208,90,.72);box-shadow:inset 0 0 18px rgba(255,205,90,.08),0 0 20px rgba(255,208,90,.13)}.btn-gold{padding:16px 30px;color:#150800;background:linear-gradient(180deg,#fff3a7 0%,#ffd459 36%,#f7a61e 100%);border:2px solid #fff1a8;box-shadow:0 0 0 3px rgba(255,172,25,.18),0 8px 28px rgba(255,172,25,.48),inset 0 -6px 0 rgba(164,85,0,.14);font-family:Cinzel,serif;font-size:21px}.btn-blue{padding:16px 30px;color:#fff;background:linear-gradient(180deg,#5a8bff,#2447e6 50%,#14218a);border:2px solid #98b8ff;box-shadow:0 8px 28px rgba(51,94,255,.48),inset 0 -6px 0 rgba(0,0,0,.16);font-family:Cinzel,serif;font-size:21px}.btn.big{min-width:232px;min-height:64px}
.mobile-menu{display:none;background:rgba(255,208,90,.12);color:#fff;border:1px solid rgba(255,208,90,.45);border-radius:14px;font-size:24px;padding:8px 12px}
main{position:relative;z-index:2}.hero-section{min-height:100vh;padding:128px 56px 64px;display:grid;grid-template-columns:minmax(420px,.92fr) minmax(540px,1.18fr);gap:58px;align-items:center}.eyebrow{font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.23em;color:#fff0a8;font-weight:900;font-size:13px;margin-bottom:18px;text-shadow:0 0 16px rgba(255,208,90,.55)}
.hero-copy{padding-left:32px}.hero-copy h1{font-family:Cinzel,serif;font-size:clamp(54px,6vw,104px);line-height:.98;letter-spacing:-.035em;text-shadow:0 4px 0 rgba(24,4,60,.7),0 0 30px rgba(255,255,255,.28)}.hero-copy h1 span,.hero-copy h1 strong,.hero-copy h1 em,.hero-copy h1 b{display:block}.hero-copy h1 strong,.hero-copy h1 b{font-style:normal;background:linear-gradient(180deg,#fff,#65e6ff 42%,#09a8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(69,214,255,.5)}.hero-copy h1 em{font-style:normal;background:linear-gradient(180deg,#fff7c7,#ffd75b 44%,#ff9b19 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 22px rgba(255,208,90,.55)}
.hero-text{margin:24px 0 30px;max-width:620px;color:#efe7ff;font-size:19px;line-height:1.72;font-weight:700;text-shadow:0 2px 10px #000}.hero-buttons{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:28px}.hero-pills{display:flex;gap:16px;flex-wrap:wrap}.hero-pills span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:rgba(15,15,58,.58);border:1px solid rgba(255,208,90,.54);box-shadow:inset 0 0 17px rgba(255,208,90,.08);font-family:Cinzel,serif;font-size:15px;font-weight:800;color:#fff6df}.hero-pills img{width:24px;height:24px}
.hero-showcase{position:relative}.showcase-gem{position:absolute;top:-28px;left:50%;width:118px;height:60px;transform:translateX(-50%);z-index:2;background:radial-gradient(circle,#fff 4%,#b66dff 20%,#6d2ffc 40%,transparent 68%);filter:drop-shadow(0 0 20px #b576ff)}.device-frame{position:relative;border-radius:44px;padding:26px;background:linear-gradient(180deg,rgba(12,22,82,.77),rgba(25,10,58,.72));border:3px solid rgba(255,208,90,.82);box-shadow:0 0 0 5px rgba(111,61,255,.42),0 0 45px rgba(98,45,255,.66),0 26px 70px rgba(0,0,0,.65);overflow:hidden}.device-frame::before{content:'';position:absolute;inset:14px;border-radius:34px;background:url('../screenshots/leaderboard_page_web.png') center/cover no-repeat;opacity:.76;filter:saturate(1.1)}.device-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,13,57,.12),rgba(5,5,33,.48));pointer-events:none}.device-frame>*{position:relative;z-index:1}.device-topline{height:72px;display:grid;grid-template-columns:145px 1fr 142px;align-items:center;gap:16px;background:rgba(4,16,65,.72);border:1px solid rgba(255,208,90,.34);border-radius:18px;padding:0 16px}.device-topline img{width:122px}.device-tabs{display:flex;align-items:center;justify-content:center;gap:28px;color:#fff7d8;font-weight:900}.device-tabs strong{color:#ffd75b}.device-topline a{background:linear-gradient(180deg,#a556ff,#6b24d7);border:1px solid rgba(255,255,255,.5);padding:13px 16px;border-radius:13px;font-weight:900;color:#fff}.device-note{width:max-content;max-width:90%;margin:18px auto 30px;background:rgba(4,10,39,.9);border:1px solid rgba(255,208,90,.34);border-radius:12px;padding:14px 22px;font-weight:900;color:#fff}.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:14px}.rank-card{position:relative;min-height:180px;border-radius:22px;padding:56px 18px 18px;background:rgba(13,25,73,.64);border:2px solid rgba(255,208,90,.62);text-align:center;box-shadow:inset 0 0 30px rgba(255,208,90,.08),0 12px 30px rgba(0,0,0,.28);backdrop-filter:blur(9px)}.rank-1{min-height:232px;border-color:#ffd75b;background:rgba(10,20,65,.76)}.rank-badge{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:86px}.rank-1 .rank-badge{width:112px;top:-48px}.avatar{width:82px;height:82px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:3px solid #ffd75b;box-shadow:0 0 25px rgba(255,208,90,.5)}.avatar.main{width:108px;height:108px}.rank-card h3{color:#fff;font-weight:900;font-size:18px;margin-bottom:10px}.rank-1 h3{font-size:25px}.belt,.coins{display:flex;align-items:center;justify-content:center;gap:7px;margin:7px auto 0;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:900;color:#fff}.belt img{width:24px;height:24px}.coins img{width:26px;height:26px}.coins{font-size:22px;color:#fff9d1}.top20{height:112px;margin-top:22px;border-radius:19px;background:rgba(7,14,55,.66);border:1px solid rgba(255,208,90,.4);display:flex;flex-direction:column;justify-content:center;padding:20px 28px;color:#fff}.top20 strong{font-size:22px;margin-bottom:12px}.top20 span{text-align:center;color:#eee8ff}.device-caption{text-align:center;font-family:Cinzel,serif;font-size:24px;font-weight:900;color:#ffe68a;margin-top:18px}
.features-section{position:relative;padding:82px 54px 92px}.section-heading{text-align:center;margin:0 auto 36px;max-width:780px}.section-heading h2{font-family:Cinzel,serif;font-size:clamp(34px,4vw,58px);color:#fff7df;text-shadow:0 0 24px rgba(255,208,90,.18)}.feature-grid{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.feature-card{position:relative;min-height:276px;border-radius:28px;padding:30px 28px;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border:2px solid rgba(255,208,90,.66);box-shadow:0 18px 44px rgba(0,0,0,.43),inset 0 0 28px rgba(255,255,255,.06);background:linear-gradient(135deg,rgba(16,30,93,.78),rgba(13,16,63,.9))}.feature-card::before{content:'';position:absolute;inset:0;opacity:.46;background:radial-gradient(circle at 50% 30%,var(--glow,rgba(40,174,255,.55)),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.28));pointer-events:none}.feature-card::after{content:'';position:absolute;inset:10px;border-radius:22px;border:1px solid rgba(255,255,255,.18);pointer-events:none}.feature-card h3{position:relative;font-family:Cinzel,serif;font-size:29px;color:#fff7df;text-shadow:0 2px 8px #000;margin-bottom:10px}.feature-card p{position:relative;color:#fff4d8;font-size:17px;line-height:1.45;font-weight:700;max-width:430px;text-shadow:0 2px 8px #000}.card-art{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:72px;background:radial-gradient(circle,#fff9c9 0%,rgba(255,208,90,.45) 32%,rgba(40,92,255,.18) 60%,transparent 70%);filter:drop-shadow(0 0 28px var(--glow,#25ccff))}.card-art img{width:115px;height:115px;object-fit:contain}.buzz{font-size:46px;flex-direction:column;color:#fff}.buzz span{font-size:30px;font-weight:900}.shield{color:#fcffe6}.question-orb{position:absolute;right:38px;top:42px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2a83ff,#33217b 58%,#12092e);border:2px solid rgba(255,208,90,.7);font-family:Cinzel,serif;font-size:32px;font-weight:900;color:#ffe68a;box-shadow:0 0 18px rgba(255,208,90,.35)}.solo{--glow:#1ca9ff}.multi{--glow:#8b35ff;background:linear-gradient(135deg,rgba(62,18,135,.82),rgba(17,11,71,.9))}.team{--glow:#25d671;background:linear-gradient(135deg,rgba(17,83,54,.82),rgba(9,48,37,.92))}.coins-card{--glow:#ffd05a;background:linear-gradient(135deg,rgba(111,65,5,.83),rgba(60,35,8,.94))}.discover{--glow:#20b6ff;background:linear-gradient(135deg,rgba(10,60,111,.82),rgba(9,29,61,.93))}.learn{--glow:#c99639;background:linear-gradient(135deg,rgba(94,75,16,.8),rgba(52,41,15,.94))}
.how-section{padding:20px 54px 84px}.scroll-panel{max-width:1160px;margin:0 auto;border-radius:32px;border:2px solid rgba(255,208,90,.62);background:rgba(8,12,49,.7);box-shadow:0 16px 46px rgba(0,0,0,.42);padding:34px;display:grid;grid-template-columns:1fr 1.25fr auto;gap:32px;align-items:center;backdrop-filter:blur(12px)}.scroll-panel h2{font-family:Cinzel,serif;font-size:34px;line-height:1.1;color:#fff7df}.steps{display:grid;gap:10px}.steps span{padding:12px 15px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,208,90,.28);font-weight:800;color:#fff2db}.footer{position:relative;z-index:2;padding:34px 50px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid rgba(255,208,90,.2);background:rgba(4,5,20,.55)}.footer img{width:118px}.footer nav{display:flex;gap:20px;flex-wrap:wrap;color:#fff2d4;font-weight:800}.footer p{color:rgba(255,255,255,.58);font-weight:700}
@media(max-width:1180px){.topbar{padding:0 22px}.nav{gap:4px}.nav a{padding:12px 14px}.hero-section{grid-template-columns:1fr;padding-left:30px;padding-right:30px}.hero-copy{padding-left:0}.hero-showcase{max-width:900px;margin:0 auto}.feature-grid{grid-template-columns:repeat(2,1fr)}.scroll-panel{grid-template-columns:1fr}}
@media(max-width:760px){.topbar{height:auto;min-height:74px;padding:12px 16px;flex-wrap:wrap}.brand img{width:116px}.mobile-menu{display:block;order:3}.nav{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;padding:8px 0}.nav.open{display:flex}.actions{order:4;margin-left:auto}.actions .btn-dark{display:none}.btn-gold{font-size:16px;padding:12px 18px}.hero-section{padding:112px 18px 42px;gap:28px}.hero-copy h1{font-size:52px}.hero-text{font-size:16px}.hero-buttons .btn{min-width:100%;font-size:18px}.hero-pills span{width:100%;justify-content:center}.device-frame{padding:14px;border-radius:28px}.device-topline{grid-template-columns:1fr;gap:8px;height:auto;text-align:center}.device-topline img{margin:0 auto}.device-topline a{display:none}.podium{grid-template-columns:1fr}.rank-card,.rank-1{min-height:0}.feature-grid{grid-template-columns:1fr}.features-section{padding:48px 18px}.footer{flex-direction:column;text-align:center}.coin{display:none}}

/* ── Functional additions: profile, screenshot slider, pages, store/help ── */
.screenshot-device::before{display:none!important}.slide-stage{position:absolute;inset:14px;border-radius:34px;overflow:hidden;background:#050619}.showcase-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);transition:opacity .75s ease,transform 3.4s ease;filter:saturate(1.15) contrast(1.02)}.showcase-slide.mobile-shot{object-fit:contain;background:radial-gradient(circle at 50% 32%,rgba(80,175,255,.22),transparent 34%),rgba(5,7,28,.72)}.showcase-slide.active{opacity:.82;transform:scale(1)}.slider-dots{position:relative;z-index:3;display:flex;justify-content:center;gap:8px;margin:260px auto 0}.slider-dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,208,90,.8);background:rgba(255,255,255,.22);box-shadow:0 0 10px rgba(255,208,90,.18);cursor:pointer}.slider-dot.active{width:28px;background:linear-gradient(90deg,#fff0a8,#ff9f1c)}
.site-profile-wrap{position:relative}.site-profile-chip{height:56px;display:flex;align-items:center;gap:10px;border-radius:999px;border:1.5px solid rgba(255,208,90,.72);background:rgba(8,10,42,.66);padding:6px 12px 6px 7px;color:#fff;cursor:pointer;box-shadow:inset 0 0 16px rgba(255,208,90,.08),0 8px 22px rgba(0,0,0,.25)}.site-profile-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #ffd05a;box-shadow:0 0 14px rgba(255,208,90,.5)}.site-profile-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;max-width:142px}.site-profile-copy b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:142px}.site-profile-copy small{font-size:11px;color:#ffd05a;font-weight:900;white-space:nowrap}.site-profile-belt{width:34px;height:34px;object-fit:contain}.site-profile-menu{display:none;position:absolute;right:0;top:68px;width:330px;border-radius:24px;border:1.7px solid rgba(255,208,90,.74);background:linear-gradient(160deg,rgba(7,12,56,.95),rgba(37,16,82,.94));box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 28px rgba(126,77,255,.28);padding:18px;z-index:80;color:#fff}.site-profile-wrap.open .site-profile-menu{display:block}.site-profile-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.site-profile-head img{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid #ffd05a}.site-profile-head strong{display:block;font-size:18px;font-weight:900}.site-profile-head span{display:block;font-size:12px;color:#dcd4ff;font-weight:800;word-break:break-all}.site-profile-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,208,90,.25);padding:12px;margin-top:9px}.site-profile-stat span{color:#dcd4ff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.site-profile-stat b{display:flex;align-items:center;gap:8px;color:#fff6da}.site-profile-stat img{width:28px;height:28px;object-fit:contain}.site-profile-actions{display:flex;gap:10px;margin-top:14px}.site-profile-actions .btn{flex:1}.site-logout{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.22)}
.page-hero{position:relative;z-index:2;min-height:100vh;padding:134px 54px 80px}.page-shell{max-width:1280px;margin:0 auto}.page-title{text-align:center;margin-bottom:44px}.page-title h1{font-family:Cinzel,serif;font-size:clamp(44px,6vw,84px);line-height:1;color:#fff7df;text-shadow:0 4px 0 rgba(24,4,60,.7),0 0 28px rgba(255,208,90,.18)}.page-title h1 strong{color:#ffd75b}.fantasy-panel{border-radius:34px;border:2px solid rgba(255,208,90,.62);background:rgba(8,12,49,.68);box-shadow:0 16px 46px rgba(0,0,0,.42);padding:34px;backdrop-filter:blur(14px)}.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}.creator-card{text-align:center;min-height:620px;display:flex;flex-direction:column;justify-content:center;align-items:center}.creator-avatar{width:166px;height:166px;border-radius:50%;background:radial-gradient(circle,#fff7cb 0,#ffd05a 42%,#2e3aff 43%,#1b1464 100%);display:flex;align-items:center;justify-content:center;font-size:72px;border:4px solid #ffd75b;box-shadow:0 0 32px rgba(255,208,90,.42);margin-bottom:26px}.creator-card h2,.copy-panel h2{font-family:Cinzel,serif;color:#ffd75b;font-size:34px;margin-bottom:14px}.copy-panel p,.copy-panel li,.faq-answer,.store-card p,.feature-detail p{color:#eee7ff;font-size:17px;line-height:1.65;font-weight:800;text-shadow:0 2px 8px #000}.copy-panel ul{list-style:none;margin-top:22px;display:grid;gap:13px}.copy-panel li::before{content:'●';color:#ffd75b;margin-right:12px}.linkedin-btn{margin-top:28px;background:linear-gradient(180deg,#0a66c2,#0758a7);border:1px solid rgba(255,255,255,.28)}
.feature-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.feature-detail{min-height:250px}.feature-detail .card-art{position:relative;top:auto;left:auto;transform:none;margin:0 auto 20px}.store-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}.store-tab{border:1.6px solid rgba(255,208,90,.34);background:rgba(255,255,255,.06);color:#dcd4ff;border-radius:999px;padding:14px 30px;font-size:18px;font-weight:900;cursor:pointer}.store-tab.active{background:linear-gradient(135deg,#1f78ff,#7d41ff);color:#fff;box-shadow:0 12px 26px rgba(45,105,255,.28)}.store-panel{display:none}.store-panel.active{display:block}.store-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.store-card{position:relative;border-radius:26px;border:1.6px solid rgba(255,208,90,.42);background:linear-gradient(160deg,rgba(7,12,56,.78),rgba(35,16,78,.72));box-shadow:0 14px 36px rgba(0,0,0,.36);padding:26px;text-align:center;min-height:240px}.store-card .icon{font-size:54px;margin-bottom:18px}.store-card h3{font-family:Cinzel,serif;font-size:25px;color:#fff7df;margin-bottom:10px}.store-card .price{font-size:30px;font-weight:900;color:#ffd75b;margin:16px 0}.store-card .btn{width:100%;justify-content:center}.faq-panel{max-width:940px;margin:0 auto}.faq-row{border-bottom:1px solid rgba(255,255,255,.14);padding:22px 28px;cursor:pointer}.faq-question{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:900;color:#fff}.faq-answer{display:none;padding-top:16px;color:#dcd4ff}.faq-row.open .faq-answer{display:block}.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:50px auto 0;max-width:920px}.contact-card{text-align:center}.contact-card .icon{font-size:40px;margin-bottom:14px}.contact-card a{color:#65e6ff;font-weight:900;font-size:20px}.launch-footer{position:relative;z-index:2;padding:58px 42px 44px;border-top:1px solid rgba(255,208,90,.18);background:linear-gradient(180deg,rgba(4,5,20,.2),rgba(4,5,20,.84));text-align:center}.launch-footer h2{font-family:Cinzel,serif;font-size:46px;color:#fff7df;margin-bottom:28px}.launch-footer h2 strong{color:#ffd75b}.download-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:42px}.download-btn{min-width:240px;border-radius:18px;border:1px solid rgba(255,255,255,.28);background:rgba(2,5,20,.8);padding:16px 22px;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900}.download-btn .big-icon{font-size:32px}.social-row{display:flex;justify-content:center;gap:18px;margin-bottom:24px}.social-row a{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:24px}.footer-links{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;color:#dcd4ff;font-weight:900;margin-bottom:22px}.footer-copy{color:rgba(255,255,255,.58);font-weight:800}
@media(max-width:1000px){.two-col,.feature-detail-grid,.store-grid,.contact-grid{grid-template-columns:1fr}.creator-card{min-height:420px}.slider-dots{margin-top:180px}.site-profile-copy{display:none}.site-profile-menu{right:-80px}}
@media(max-width:760px){.page-hero{padding:112px 18px 54px}.store-tab{font-size:15px;padding:12px 18px}.launch-footer h2{font-size:34px}.download-btn{min-width:100%}.site-profile-chip{height:48px}.site-profile-belt{display:none}.site-profile-menu{right:-70px;width:300px}.slider-dots{margin-top:110px}}


/* ── Final functionality-only fixes: real icons, clean slider fit, how carousel ── */
.brand-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#fff7df;filter:drop-shadow(0 0 10px rgba(255,216,74,.28))}.brand-icon svg{width:100%;height:100%;display:block}.brand-icon.apple svg{color:#fff}.brand-icon.web-play svg{color:#65e6ff}.social-row a svg{width:24px;height:24px;display:block}.social-row a:hover{color:#ffd75b;transform:translateY(-2px)}
/* keep the same fantasy device window, but remove overlays that hid screenshots */
.screenshot-device{height:560px;min-height:560px}.screenshot-device .device-topline,.screenshot-device .device-note,.screenshot-device .device-caption{display:none!important}.slide-stage{position:absolute;inset:18px;border-radius:30px;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(80,175,255,.12),transparent 44%),rgba(2,5,20,.86);display:flex;align-items:center;justify-content:center}.showcase-slide{object-fit:contain!important;object-position:center center!important;background:rgba(2,5,20,.76);opacity:0;transform:none!important;padding:0}.showcase-slide.active{opacity:1!important;transform:none!important}.showcase-slide.mobile-shot{object-fit:contain!important;background:rgba(2,5,20,.86)}.slider-dots{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);margin:0!important;padding:8px 12px;border-radius:999px;background:rgba(2,5,20,.56);backdrop-filter:blur(8px)}
/* How-it-works slider keeps the same card shell and adds small feature cards */
.how-slider{position:relative;min-height:218px;display:block}.how-card{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,208,90,.30);box-shadow:inset 0 0 24px rgba(255,216,74,.04)}.how-card.active{opacity:1;pointer-events:auto;transform:translateY(0)}.how-card .how-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:34px;background:radial-gradient(circle,#fff6c0 0%,rgba(255,216,74,.24) 38%,rgba(45,94,255,.15) 68%,transparent 100%);box-shadow:0 0 24px rgba(101,230,255,.24);margin-bottom:12px}.how-card .how-icon.coin-mini img{width:50px;height:50px;object-fit:contain}.how-card h3{font-family:Cinzel,serif;font-size:24px;color:#ffd75b;margin-bottom:8px}.how-card p{color:#fff2db;font-weight:800;line-height:1.42}.how-dots{position:absolute;left:0;right:0;bottom:-34px;display:flex;gap:8px;justify-content:center}.how-dot{width:9px;height:9px;border-radius:999px;border:1px solid rgba(255,208,90,.75);background:rgba(255,255,255,.20);cursor:pointer}.how-dot.active{width:26px;background:linear-gradient(90deg,#fff0a8,#ff9f1c)}
/* store data polish from Flutter StorePage */
.store-feature-offer{display:flex;align-items:center;justify-content:space-between;gap:24px}.store-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:8px 18px;border-radius:0 0 12px 12px;background:#7c3aed;color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em}.store-tag.red{background:#ef4444}.store-tag.green{background:#22c55e}.store-card h3{display:flex;align-items:center;justify-content:center;gap:8px}.store-card h3 img{width:28px;height:28px;object-fit:contain}.store-card small{font-size:13px;color:#dcd4ff}.store-note{margin-top:22px;color:#dcd4ff;font-weight:800}.plan-grid{grid-template-columns:repeat(3,1fr)}
/* auth page keeps layout but uses the same fantasy video and transparent glass */
.auth-bg video{opacity:.72!important}.auth-card.glass-strong{background:rgba(5,10,43,.50)!important;border:1px solid rgba(255,216,74,.34)!important;box-shadow:0 24px 80px rgba(0,0,0,.42),0 0 45px rgba(124,58,237,.20)!important}.input-field,.btn-google,.auth-tabs{background:rgba(255,255,255,.075)!important;backdrop-filter:blur(14px)}
@media(max-width:1000px){.screenshot-device{height:480px;min-height:480px}.plan-grid{grid-template-columns:1fr}.store-feature-offer{flex-direction:column;text-align:center}.how-slider{min-height:240px}}
@media(max-width:760px){.screenshot-device{height:390px;min-height:390px}.slide-stage{inset:12px;border-radius:22px}.how-slider{min-height:260px}.how-card h3{font-size:21px}.how-card p{font-size:14px}.how-dots{bottom:-26px}}

/* ── Website final requested fixes: same UI, only targeted behavior/fit fixes ── */
/* Keep the screenshot window size/theme, but restore the useful bottom caption only. */
.screenshot-device .device-topline,
.screenshot-device .device-note { display:none!important; }
.screenshot-device .device-caption{
  display:inline-flex!important;
  position:absolute;
  z-index:4;
  left:50%;
  bottom:58px;
  transform:translateX(-50%);
  align-items:center;
  justify-content:center;
  max-width:78%;
  min-height:42px;
  padding:8px 18px;
  margin:0!important;
  border-radius:999px;
  border:1px solid rgba(255,208,90,.54);
  background:rgba(2,5,20,.68);
  box-shadow:0 0 22px rgba(101,230,255,.16), inset 0 0 18px rgba(255,216,74,.06);
  color:#ffe68a;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(10px);
}
.screenshot-device .slider-dots{bottom:16px!important;}
.slide-stage{inset:18px 18px 18px 18px!important;}
.showcase-slide{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;}

/* Features page: compact rectangle cards with clear points, while preserving the fantasy panel style. */
.feature-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.feature-mini-card{
  min-height:170px;
  border-radius:24px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:14px;
  align-items:start;
  border:1.6px solid rgba(255,208,90,.52);
  background:linear-gradient(135deg,rgba(10,17,68,.42),rgba(28,14,70,.38));
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 0 22px rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
}
.feature-mini-icon{
  width:58px;height:58px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;
  background:radial-gradient(circle,#fff6c0 0%,rgba(255,216,74,.28) 38%,rgba(45,94,255,.14) 68%,transparent 100%);
  box-shadow:0 0 24px rgba(101,230,255,.24);
}
.feature-mini-icon img{width:50px;height:50px;object-fit:contain;}
.feature-mini-card h3{
  font-family:Cinzel,serif;
  color:#fff7df;
  font-size:20px;
  margin-bottom:7px;
  text-shadow:0 2px 8px #000;
}
.feature-mini-card ul{list-style:none;display:grid;gap:5px;margin:0;padding:0;}
.feature-mini-card li{
  color:#eee7ff;
  font-size:13.5px;
  line-height:1.35;
  font-weight:800;
  text-shadow:0 2px 7px #000;
}
.feature-mini-card li::before{content:'✦';color:#ffd75b;margin-right:7px;}
@media(max-width:1100px){.feature-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:720px){.feature-mini-grid{grid-template-columns:1fr}.feature-mini-card{grid-template-columns:50px 1fr}.feature-mini-icon{width:50px;height:50px;font-size:26px}.screenshot-device .device-caption{max-width:82%;font-size:16px;bottom:50px}.screenshot-device .slider-dots{bottom:12px!important}}


/* Final launch polish: ClueCoin symbols, static store buttons, compact website profile stats */
.inline-cluecoin,.mini-cluecoin{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin:0 4px;filter:drop-shadow(0 0 8px rgba(255,216,74,.45))}.mini-cluecoin{width:15px;height:15px;vertical-align:-3px;margin:0 3px 0 0}.store-tab .inline-cluecoin{width:24px;height:24px;vertical-align:-6px}.store-static-buy{cursor:default}.store-static-buy:hover{transform:none}.site-profile-stat b{max-width:180px;text-align:right;justify-content:flex-end}.site-profile-copy small{display:flex;align-items:center;gap:3px}

/* Final alignment fix: keep ClueCoin asset inline inside Store prices.
   Global img{display:block} was pushing the small ClueCoin icon onto its own line. */
.inline-cluecoin,
.mini-cluecoin,
.store-card .price small img.inline-cluecoin,
.store-card h3 img,
.store-tab img.inline-cluecoin {
  display: inline-block !important;
  max-width: none !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.inline-cluecoin {
  width: 20px !important;
  height: 20px !important;
  margin: 0 5px !important;
  vertical-align: -4px !important;
  filter: drop-shadow(0 0 8px rgba(255,216,74,.45));
}

.store-card .price small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  margin-top: 6px !important;
}

.store-card .price small .inline-cluecoin {
  width: 19px !important;
  height: 19px !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
}

.store-card h3 img {
  width: 30px !important;
  height: 30px !important;
  margin-right: 6px !important;
}

.store-tab .inline-cluecoin {
  width: 22px !important;
  height: 22px !important;
  margin: 0 6px 0 0 !important;
  vertical-align: -5px !important;
}


/* ── DigClue live mobile launch fixes: mobile login + play + responsive hero ── */
@media (max-width: 760px) {
  .topbar {
    min-height: 76px !important;
    height: auto !important;
    padding: 10px 10px !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .brand {
    flex: 0 0 auto !important;
  }

  .brand img {
    width: 96px !important;
    min-width: 96px !important;
  }

  .mobile-menu {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: 22px !important;
  }

  .actions {
    order: 3 !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Show Login left of Play on mobile. */
  .actions .btn-dark,
  .actions .site-auth-btn {
    display: inline-flex !important;
    width: 74px !important;
    min-width: 74px !important;
    height: 44px !important;
    padding: 0 8px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }

  .actions .btn-dark span,
  .actions .site-auth-btn span {
    font-size: 13px !important;
  }

  .actions .btn-dark::after,
  .actions .site-auth-btn::after {
    content: "Login";
    font-size: 12px !important;
    font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif !important;
    font-weight: 900 !important;
  }

  .actions .btn-gold,
  .actions .js-play-link {
    width: 118px !important;
    min-width: 118px !important;
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .actions .btn-gold span,
  .actions .js-play-link span {
    font-size: 16px !important;
  }

  .nav {
    position: absolute !important;
    top: 76px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(4, 5, 22, .96) !important;
    border: 1px solid rgba(255, 208, 90, .36) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(18px) !important;
  }

  .nav.open {
    display: flex !important;
  }

  .nav a {
    text-align: center !important;
  }

  /* Mobile website screenshot/device must stay wide and readable. */
  .hero-showcase {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .device-frame.screenshot-device {
    width: 100% !important;
    max-width: 100% !important;
    height: 282px !important;
    min-height: 282px !important;
    padding: 10px !important;
    border-radius: 26px !important;
  }

  .device-frame.screenshot-device .slide-stage {
    inset: 10px !important;
    border-radius: 21px !important;
  }

  .device-frame.screenshot-device .showcase-slide {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .screenshot-device .device-caption {
    bottom: 38px !important;
    max-width: 72% !important;
    min-height: 30px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
  }

  .screenshot-device .slider-dots {
    bottom: 9px !important;
  }

  .site-profile-wrap {
    max-width: 76px !important;
    flex: 0 0 76px !important;
  }

  .site-profile-chip {
    width: 76px !important;
    height: 44px !important;
    padding: 5px 8px !important;
    justify-content: center !important;
  }

  .site-profile-avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 390px) {
  .topbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 5px !important;
  }

  .brand img {
    width: 88px !important;
    min-width: 88px !important;
  }

  .mobile-menu {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    font-size: 20px !important;
  }

  .actions {
    gap: 5px !important;
  }

  .actions .btn-dark,
  .actions .site-auth-btn {
    width: 66px !important;
    min-width: 66px !important;
    height: 40px !important;
  }

  .actions .btn-dark::after,
  .actions .site-auth-btn::after {
    font-size: 11px !important;
  }

  .actions .btn-gold,
  .actions .js-play-link {
    width: 108px !important;
    min-width: 108px !important;
    height: 44px !important;
    font-size: 12px !important;
  }
}


/* ── iPad/tablet responsive hotfix ─────────────────────────────────────────
   Fixes iPad portrait/landscape layout, keeps the screenshot player visible,
   and prevents the header/nav from crushing the hero area. */
@media (min-width: 901px) and (max-width: 1180px) {
  .topbar {
    height: 82px !important;
    padding: 0 18px !important;
    gap: 14px !important;
  }
  .brand img {
    width: 118px !important;
  }
  .nav {
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .nav a {
    padding: 10px 12px !important;
    font-size: 13px !important;
    letter-spacing: .035em !important;
  }
  .actions {
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .actions .btn-dark {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
  .actions .btn-gold {
    padding: 12px 18px !important;
    font-size: 16px !important;
  }

  .hero-section {
    min-height: auto !important;
    padding: 108px 24px 48px !important;
    display: grid !important;
    grid-template-columns: minmax(315px, .84fr) minmax(410px, 1.16fr) !important;
    gap: 26px !important;
    align-items: center !important;
  }
  .hero-copy {
    padding-left: 0 !important;
    min-width: 0 !important;
  }
  .hero-copy h1 {
    font-size: clamp(46px, 5.8vw, 66px) !important;
    line-height: 1.0 !important;
  }
  .hero-text {
    margin: 16px 0 20px !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }
  .hero-edutainment-line {
    margin: 8px 0 10px !important;
    font-size: 15px !important;
  }
  .hero-buttons {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }
  .hero-buttons .btn.big {
    min-width: 178px !important;
    min-height: 52px !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
  }
  .hero-pills {
    gap: 8px !important;
  }
  .hero-pills span {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  .hero-showcase {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .device-frame.screenshot-device {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: clamp(350px, 45vw, 470px) !important;
    min-height: clamp(350px, 45vw, 470px) !important;
    padding: 14px !important;
    border-radius: 34px !important;
  }
  .device-frame.screenshot-device .slide-stage {
    display: flex !important;
    inset: 14px !important;
    border-radius: 26px !important;
  }
  .device-frame.screenshot-device .showcase-slide {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .device-frame.screenshot-device .showcase-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .screenshot-device .device-caption {
    bottom: 54px !important;
    font-size: 15px !important;
  }
  .screenshot-device .slider-dots {
    bottom: 14px !important;
  }
}

/* iPad portrait and small tablets: use mobile menu and stack hero cleanly. */
@media (min-width: 761px) and (max-width: 900px) {
  .topbar {
    min-height: 78px !important;
    height: auto !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .brand img {
    width: 108px !important;
    min-width: 108px !important;
  }
  .mobile-menu {
    display: inline-flex !important;
    order: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
  }
  .nav {
    display: none !important;
    position: absolute !important;
    top: 78px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(4, 5, 22, .96) !important;
    border: 1px solid rgba(255, 208, 90, .36) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 30 !important;
  }
  .nav.open { display: flex !important; }
  .nav a { text-align: center !important; }
  .actions {
    order: 3 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .actions .btn-dark {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  .actions .btn-gold {
    padding: 12px 18px !important;
    font-size: 15px !important;
  }

  .hero-section {
    min-height: auto !important;
    padding: 108px 24px 48px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .hero-copy {
    padding-left: 0 !important;
    text-align: left !important;
  }
  .hero-copy h1 {
    font-size: clamp(54px, 8vw, 72px) !important;
  }
  .hero-buttons .btn.big {
    min-width: 210px !important;
    min-height: 56px !important;
    font-size: 17px !important;
  }
  .hero-showcase {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .device-frame.screenshot-device {
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .device-frame.screenshot-device .showcase-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Extra safety for iPad Safari dynamic viewport behavior. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 761px) and (max-width: 1180px) {
    .hero-section { min-height: auto !important; }
    .site-bg-video { min-height: 100svh !important; }
  }
}

/* ── iPad header overflow fix: keep Play Now inside the screen ────────────── */
@media (min-width: 901px) and (max-width: 1180px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .topbar {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .brand {
    flex: 0 0 auto !important;
  }
  .brand img {
    width: 96px !important;
    min-width: 96px !important;
  }

  .nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
    justify-content: center !important;
  }
  .nav a {
    padding: 9px 9px !important;
    font-size: 12px !important;
    letter-spacing: .025em !important;
  }

  .actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  .actions .btn-dark {
    padding: 10px 12px !important;
    font-size: 12px !important;
    max-width: 194px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .actions .btn-gold {
    padding: 10px 13px !important;
    font-size: 14px !important;
    min-width: 116px !important;
    max-width: 142px !important;
    overflow: hidden !important;
  }
  .actions .btn-gold span {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .topbar {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .actions {
    min-width: 0 !important;
    max-width: calc(100vw - 170px) !important;
    gap: 6px !important;
  }
  .actions .btn-dark {
    padding: 10px 11px !important;
    font-size: 12px !important;
    max-width: 178px !important;
    overflow: hidden !important;
  }
  .actions .btn-gold {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-width: 106px !important;
    max-width: 132px !important;
    overflow: hidden !important;
  }
}

/* ── iPad burger placement fix: keep menu, move it behind the action buttons ──
   On iPad portrait Safari the hamburger was appearing immediately after the
   logo, making it feel like it was in the front of the header. Keep the burger
   menu, but place it after Sign In / Play Now so the header reads cleanly:
   Logo → actions → menu. */
@media (min-width: 761px) and (max-width: 900px) {
  .topbar {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .brand {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .actions {
    order: 2 !important;
    margin-left: auto !important;
    flex: 0 1 auto !important;
    max-width: calc(100vw - 220px) !important;
  }

  .mobile-menu {
    order: 3 !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    flex: 0 0 44px !important;
  }

  .nav {
    order: 4 !important;
    z-index: 60 !important;
  }
}

/* ── iPad hamburger dropdown front-layer fix ────────────────────────────────
   The header itself was using overflow hidden to stop Play Now from spilling
   outside the screen. That also clipped/covered the opened hamburger menu on
   iPad Safari. Keep the current iPad header positioning, but let the dropdown
   render above the hero/game preview. */
@media (min-width: 761px) and (max-width: 900px) {
  .topbar {
    overflow: visible !important;
    z-index: 99990 !important;
  }

  .mobile-menu {
    position: relative !important;
    z-index: 100001 !important;
  }

  .nav {
    position: fixed !important;
    top: 78px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-height: calc(100svh - 98px) !important;
    overflow-y: auto !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
  }

  .nav.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
  }

  .hero-section,
  .hero-showcase,
  .device-frame,
  .coin,
  .sparkles,
  main {
    z-index: auto;
  }
}

/* Same safety for mobile dropdowns so every device gets the menu above content. */
@media (max-width: 760px) {
  .topbar {
    overflow: visible !important;
    z-index: 99990 !important;
  }

  .mobile-menu {
    position: relative !important;
    z-index: 100001 !important;
  }

  .nav {
    position: fixed !important;
    top: 76px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100svh - 94px) !important;
    overflow-y: auto !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
  }

  .nav.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
  }
}

/* ── FINAL iPad-only hamburger dropdown fix ────────────────────────────────
   iPad Safari can use a 900px+ CSS viewport, so the earlier 761–900px-only
   dropdown layer fix did not apply on many iPads. This block covers the full
   iPad/tablet range and only changes the OPENED menu layer, not phone/desktop
   design. */
@media (min-width: 761px) and (max-width: 1180px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .topbar {
    position: fixed !important;
    overflow: visible !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
  }

  .mobile-menu {
    display: inline-flex !important;
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  /* The dropdown must be fixed to the viewport, not clipped inside the header. */
  .topbar .nav,
  #mainNav.nav {
    display: none !important;
    position: fixed !important;
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(4, 5, 22, .985), rgba(8, 15, 48, .985)) !important;
    border: 1.5px solid rgba(255, 208, 90, .62) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.70), 0 0 30px rgba(255,208,90,.20) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 2147483200 !important;
    overflow-y: auto !important;
    max-height: calc(100svh - 116px) !important;
  }

  .topbar .nav.open,
  #mainNav.nav.open {
    display: flex !important;
  }

  .topbar .nav a,
  #mainNav.nav a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.035) !important;
  }

  main,
  .hero-section,
  .hero-copy,
  .hero-showcase,
  .device-frame,
  .screenshot-device,
  .coin,
  .sparkles,
  .site-vignette,
  .site-bg-video {
    z-index: 1 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .topbar .nav,
  #mainNav.nav {
    top: 92px !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .topbar .nav,
  #mainNav.nav {
    top: 82px !important;
  }
}