:root{
 --yellow:#ffd51f;--orange:#ff8a1f;--pink:#ff4ca0;--cyan:#38ddff;
 --green:#35e28a;--ink:#050914;--panel:#0a1422;--panel2:#101e31;
 --line:rgba(255,255,255,.13);--muted:#aebbd0;--white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#fff;background:
 radial-gradient(circle at 50% -15%,rgba(88,63,220,.25),transparent 35%),
 linear-gradient(#030712,#07111f 55%,#03070e);
 font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit}.container{width:min(1200px,calc(100% - 28px));margin:auto}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(3,7,18,.91);
 border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}
.nav{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.25rem;font-weight:1000}
.logo-badge{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;
 background:linear-gradient(135deg,var(--yellow),var(--orange));color:#111;animation:bob 2.8s ease-in-out infinite}
.logo strong{color:var(--yellow)}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{text-decoration:none;text-transform:uppercase;font-size:.8rem;font-weight:900}
.navlinks a:hover{color:var(--yellow)}
.approved{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(53,226,138,.35);
 background:rgba(53,226,138,.08);color:#79f5b4;border-radius:999px;font-weight:900;font-size:.78rem}
.hero{position:relative;overflow:hidden;padding:72px 0 52px;text-align:center}
.hero:before{content:"";position:absolute;inset:0;background:
 radial-gradient(circle at 18% 40%,rgba(255,76,160,.22),transparent 22%),
 radial-gradient(circle at 82% 38%,rgba(56,221,255,.2),transparent 24%)}
.hero>*{position:relative}
.hero h1{margin:0;font-size:clamp(3.5rem,10vw,8rem);line-height:.84;letter-spacing:-.07em;
 color:var(--yellow);text-transform:uppercase;text-shadow:0 6px 0 #ff8b00,0 13px 0 #6a3800}
.hero h1 span{color:#fff;font-size:.45em;text-shadow:0 5px 0 #596579}
.hero h2{text-transform:uppercase;font-size:clamp(1.2rem,3vw,2.1rem);margin:25px 0 8px}
.hero h2 em{color:var(--yellow);font-style:normal}.hero p{max-width:760px;margin:0 auto 24px;color:#d2dbea}
.cta{display:inline-flex;padding:13px 23px;background:linear-gradient(#ffe65e,#ffbd00);
 color:#171100;border-radius:9px;text-decoration:none;font-weight:1000;text-transform:uppercase}
.floating-icons span{position:absolute;font-size:clamp(2rem,6vw,5rem);animation:floaty 4s ease-in-out infinite}
.floating-icons span:nth-child(1){left:5%;top:22%}.floating-icons span:nth-child(2){right:6%;top:30%;animation-delay:.7s}
.floating-icons span:nth-child(3){left:12%;bottom:8%;animation-delay:1.4s}.floating-icons span:nth-child(4){right:14%;bottom:5%;animation-delay:2s}
.section{padding:38px 0}.section-title{text-transform:uppercase}.section-title span{color:var(--yellow)}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.game-card{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel2),var(--panel));
 border:1px solid var(--line);border-radius:17px;box-shadow:0 20px 55px rgba(0,0,0,.38);
 transition:.22s transform,.22s border-color}
.game-card:hover{transform:translateY(-7px) rotate(.25deg);border-color:rgba(255,213,31,.55)}
.game-art{height:190px;display:grid;place-items:center;font-size:6.5rem;position:relative}
.game-art:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.game-art .icon{z-index:1;animation:bob 2.8s ease-in-out infinite;filter:drop-shadow(0 18px 12px rgba(0,0,0,.42))}
.violet{background:radial-gradient(circle,#6a4cff,#151044)}.red{background:radial-gradient(circle,#ff5159,#501126)}
.sky{background:radial-gradient(circle,#48cfff,#155181)}.blue{background:radial-gradient(circle,#4e62ff,#071735)}
.purple{background:radial-gradient(circle,#b14cff,#311052)}.orange{background:radial-gradient(circle,#ffac38,#6e2607)}
.pink{background:radial-gradient(circle,#ff68bd,#5d1742)}.green{background:radial-gradient(circle,#44e88d,#0e562d)}
.teal{background:radial-gradient(circle,#32dccb,#0a554e)}
.card-body{padding:17px}.eyebrow{color:var(--yellow);font-size:.72rem;text-transform:uppercase;font-weight:1000;letter-spacing:.08em}
.card-body h3{margin:4px 0 7px}.card-body p{color:#bfcbdb;font-size:.9rem;min-height:48px}
.card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.play{padding:9px 16px;background:var(--yellow);color:#151000;border-radius:8px;text-decoration:none;font-weight:1000}
.top-score{font-size:.78rem;text-align:right;color:#aebbd0}.top-score strong{display:block;color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.stat{padding:18px;background:#0b1728;border:1px solid var(--line);border-radius:13px;text-align:center}
.stat b{display:block;color:var(--yellow);font-size:1.7rem}
.family-banner{padding:27px;border:1px solid rgba(53,226,138,.28);background:
 linear-gradient(135deg,rgba(53,226,138,.11),rgba(56,221,255,.08));border-radius:18px;text-align:center}
.site-footer{padding:36px 0 18px;border-top:1px solid var(--line);background:#02060d}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}.footer-links{display:grid;gap:8px}
.footer-links a{text-decoration:none;color:#aebbd0}.footer-links a:hover{color:var(--yellow)}
.copy{text-align:center;color:#718096;font-size:.8rem;border-top:1px solid var(--line);margin-top:25px;padding-top:16px}
.game-page{padding:18px 0 34px}.game-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:13px}
.game-head h1{margin:0}.game-head p{margin:3px 0;color:var(--muted)}
.game-panel{position:relative;min-height:620px;border:1px solid var(--line);border-radius:20px;overflow:hidden;
 background:#050914;box-shadow:0 24px 70px rgba(0,0,0,.46)}
.setup{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:
 radial-gradient(circle at 50% 20%,rgba(94,63,220,.42),rgba(3,7,18,.96) 60%)}
.setup-card{width:min(580px,100%);padding:27px;border-radius:22px;background:rgba(7,14,27,.94);
 border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.5);text-align:center}
.setup-card h2{font-size:clamp(2rem,6vw,3.7rem);margin:0;color:var(--yellow)}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;text-align:left}
label{font-weight:900;font-size:.82rem}input,select{width:100%;margin-top:6px;padding:12px;border-radius:9px;
 border:1px solid var(--line);background:#0d1929;color:white;font:inherit}
.start-game{border:0;border-radius:9px;padding:13px 25px;background:var(--yellow);color:#161000;font-weight:1000;cursor:pointer}
.canvas-wrap{height:620px}.game-canvas{width:100%;height:100%;display:block;touch-action:none}
.game-toolbar{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.game-toolbar>div{pointer-events:auto;display:flex;gap:7px;flex-wrap:wrap}
.game-pill,.game-btn{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(4,8,18,.78);color:#fff;font-weight:900}
.game-btn{cursor:pointer}.touch-controls{position:absolute;inset:auto 8px 8px;z-index:4;display:none;justify-content:space-between;pointer-events:none}
.touch-pad,.touch-actions{display:grid;gap:5px;pointer-events:auto}.touch-pad{grid-template-columns:repeat(3,52px)}
.touch-pad button,.touch-actions button{height:48px;border:1px solid var(--line);border-radius:12px;background:rgba(8,16,30,.78);color:white;font-weight:1000}
.touch-pad .up{grid-column:2}.touch-pad .left{grid-column:1}.touch-pad .down{grid-column:2}.touch-pad .right{grid-column:3}
.result-overlay{position:absolute;inset:0;z-index:6;display:none;place-items:center;padding:20px;background:rgba(2,5,13,.84)}
.result-overlay.show{display:grid}.result-card{max-width:620px;text-align:center;padding:30px;border:1px solid var(--line);
 border-radius:24px;background:#081321}.result-card h2{font-size:clamp(2.4rem,7vw,5rem);margin:0;color:var(--yellow)}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:10px;height:18px;animation:fall 2.8s linear infinite}
@keyframes bob{50%{transform:translateY(-9px) rotate(2deg)}}@keyframes floaty{50%{transform:translateY(-14px) rotate(8deg)}}
@keyframes fall{from{transform:translateY(-30px) rotate(0)}to{transform:translateY(700px) rotate(700deg)}}
@media(max-width:950px){.game-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 .navlinks{display:none}.approved{font-size:.7rem}.game-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr}.game-head{align-items:flex-start}.game-panel,.canvas-wrap{min-height:560px;height:calc(100vh - 170px)}
 .touch-controls{display:flex}.setup-grid{grid-template-columns:1fr}.game-art{height:170px}.hero{padding-top:50px}
}


/* ===== Nerdania Hall of Fame ===== */
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.secondary-cta{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.2)}
.hall-section{position:relative;background:
 radial-gradient(circle at 10% 0,rgba(255,213,31,.14),transparent 28%),
 radial-gradient(circle at 90% 20%,rgba(255,76,160,.13),transparent 25%)}
.hall-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:22px}
.hall-heading p{color:var(--muted);margin:.25rem 0 0}.hall-crown{font-size:5rem;animation:bob 2.5s ease-in-out infinite;filter:drop-shadow(0 12px 16px rgba(255,213,31,.28))}
.leaderboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.leaderboard-card{overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#101e31,#07111e);
 border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.36);transition:transform .22s,border-color .22s}
.leaderboard-card:hover{transform:translateY(-6px);border-color:rgba(255,213,31,.55)}
.leaderboard-top{min-height:102px;padding:17px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.leaderboard-top:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.12),transparent 45%)}
.leaderboard-top>*{position:relative;z-index:1}.leader-game-icon{font-size:3rem;filter:drop-shadow(0 9px 7px rgba(0,0,0,.35));animation:bob 3s ease-in-out infinite}
.leaderboard-top small{font-weight:1000;letter-spacing:.1em;color:#fff8}.leaderboard-top h3{margin:3px 0 0}
.score-list{list-style:none;padding:10px 15px;margin:0}
.score-list li{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;padding:11px 5px;border-bottom:1px solid rgba(255,255,255,.08)}
.score-list li:last-child{border-bottom:0}.rank{font-size:1.35rem}.score-player{font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis}
.score-player small{display:block;color:#8292aa;font-size:.68rem;text-transform:uppercase;margin-top:2px}.score-list strong{color:var(--yellow);font-size:1.05rem}
.leader-play{display:block;margin:5px 15px 16px;padding:10px;text-align:center;text-decoration:none;border-radius:9px;background:rgba(255,213,31,.1);
 border:1px solid rgba(255,213,31,.22);color:#ffe666;font-weight:1000}.leader-play:hover{background:var(--yellow);color:#171100}
.empty-score{opacity:.8}.family-credit{margin-top:15px;color:#ffe666}

/* ===== Universal finger controls ===== */
.mobile-control-note{display:none;position:absolute;z-index:4;left:50%;bottom:8px;transform:translateX(-50%);font-size:.7rem;color:#dbe5f3;
 background:rgba(2,7,17,.68);padding:5px 9px;border-radius:999px;pointer-events:none;white-space:nowrap}
.touch-controls{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;
 box-shadow:0 7px 0 rgba(0,0,0,.32),0 10px 20px rgba(0,0,0,.25);transition:transform .06s,box-shadow .06s,background .08s}
.touch-controls button.is-pressed,.touch-controls button:active{transform:translateY(5px) scale(.97);box-shadow:0 2px 0 rgba(0,0,0,.3);background:rgba(255,213,31,.92);color:#141000}
.touch-action-primary{background:rgba(255,76,160,.82)!important;font-size:.79rem}

@media(max-width:950px){.leaderboard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 .leaderboard-grid{grid-template-columns:1fr}.hall-heading{align-items:flex-start}.hall-crown{font-size:3.8rem}
 .touch-controls{display:flex!important;left:7px;right:7px;bottom:19px;align-items:flex-end}
 .touch-pad{grid-template-columns:repeat(3,58px)!important;grid-template-rows:repeat(2,56px)}
 .touch-pad button,.touch-actions button{height:54px!important;min-width:56px;font-size:1.15rem}
 .touch-actions{grid-template-columns:76px 76px}.touch-actions button{padding:5px;font-size:.72rem}
 .mobile-control-note{display:block;bottom:4px}
 .canvas-wrap{padding-bottom:4px}
}
@media(max-width:390px){
 .touch-pad{grid-template-columns:repeat(3,51px)!important}.touch-pad button{min-width:49px}
 .touch-actions{grid-template-columns:65px 65px}.touch-actions button{min-width:62px}
}


/* ===== Nerdania Mind Games Edition ===== */
.mind-hero{background:
 radial-gradient(circle at 15% 15%,rgba(56,221,255,.18),transparent 28%),
 radial-gradient(circle at 85% 20%,rgba(255,76,160,.18),transparent 26%),
 linear-gradient(160deg,#09182c,#1e1748 58%,#07111d)}
.mind-hero h1 span{color:#38ddff}.section-kicker{text-align:center;color:#38ddff;font-weight:1000;letter-spacing:.16em;font-size:.76rem}
.section-intro{text-align:center;max-width:760px;margin:-8px auto 28px;color:var(--muted)}
.brain-benefits{padding:0 0 12px;background:#07111e}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:translateY(-23px)}
.benefit-grid article{padding:17px;border-radius:15px;background:linear-gradient(145deg,#10243b,#0a1627);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 35px rgba(0,0,0,.28)}
.benefit-grid b{display:block;color:#ffd51f;font-size:1.05rem}.benefit-grid span{display:block;color:#9aacbf;font-size:.84rem;margin-top:5px}
.mind-card .game-art{position:relative}.brain-rings{position:absolute;width:130px;height:130px;border:2px solid rgba(255,255,255,.18);border-radius:50%;animation:brainPulse 2.8s ease-in-out infinite}
.brain-rings:before,.brain-rings:after{content:"";position:absolute;border:2px solid rgba(255,255,255,.13);border-radius:50%;inset:15px}.brain-rings:after{inset:31px}
@keyframes brainPulse{50%{transform:scale(1.13);opacity:.55}}
.skill-tag{display:inline-block;margin:4px 0 13px;padding:6px 9px;border-radius:999px;background:rgba(56,221,255,.08);border:1px solid rgba(56,221,255,.2);color:#9ceeff;font-size:.74rem;font-weight:900}
.mind-panel{min-height:650px}.mind-canvas-wrap{height:650px}.game-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.game-info-grid article{padding:20px;border-radius:16px;background:#0c1929;border:1px solid rgba(255,255,255,.1)}
.game-info-grid h2{margin:0 0 8px;color:#ffd51f}.game-info-grid p{margin:0;color:#aebdd0;line-height:1.65}
.yellow{background:linear-gradient(135deg,#ffd51f,#e18419)!important}
@media(max-width:850px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 .game-info-grid{grid-template-columns:1fr}.mind-panel{min-height:600px}.mind-canvas-wrap{height:600px}
 .mind-touch-controls{display:flex!important}.benefit-grid{transform:none;padding-top:15px}
}
@media(max-width:480px){.benefit-grid{grid-template-columns:1fr}.mind-canvas-wrap{height:570px}.mind-panel{min-height:570px}}


/* =========================================================
   NERDANIA UNIVERSAL RESPONSIVE + MOBILE GAME SYSTEM
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{min-width:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.container{width:min(1180px,calc(100% - 28px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(14px)}
.nav{min-height:68px;gap:16px}
.logo{min-width:0}.logo span:last-child{white-space:nowrap}
.navlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.navlinks a{min-height:42px;display:inline-flex;align-items:center;padding:7px 3px}
.hero{padding-inline:0}
.hero h1{font-size:clamp(2.6rem,8vw,6.2rem);line-height:.95;overflow-wrap:anywhere}
.hero h2{font-size:clamp(1.15rem,3.5vw,2rem)}
.hero p{font-size:clamp(.96rem,2.5vw,1.12rem)}
.hero-actions .cta,.cta{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.game-grid,.leaderboard-grid{align-items:stretch}
.game-card,.leaderboard-card{min-width:0}
.card-body h3,.leaderboard-top h3{overflow-wrap:anywhere}
.card-actions{gap:10px}
.play{min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center}
.setup-card{width:min(680px,calc(100% - 22px));max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.setup-grid label{min-width:0}
.setup-grid input,.setup-grid select{width:100%;min-height:48px;font-size:16px}
.start-game,.game-btn{min-height:46px}
.game-page{padding-top:22px}
.game-head{gap:14px;align-items:center}
.game-head>div{min-width:0}
.game-head h1{font-size:clamp(1.7rem,5vw,3rem);overflow-wrap:anywhere}
.game-panel{width:100%;min-height:0!important;overflow:hidden}
.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.game-toolbar>div{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.game-pill{white-space:nowrap}
.canvas-wrap,.mind-canvas-wrap{position:relative;width:100%;height:auto!important;min-height:420px;aspect-ratio:16/10;max-height:72dvh;overflow:hidden;background:#020817;touch-action:none}
.game-canvas{display:block;width:100%!important;height:100%!important;min-width:0;min-height:0;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-controls{display:none}
.mobile-control-note{display:none}
.result-card{width:min(560px,calc(100% - 22px));max-height:calc(100dvh - 24px);overflow:auto}
.score-list li{min-width:0}
.score-player{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:980px){
 .nav{padding-block:8px;flex-wrap:wrap;justify-content:center}
 .approved{order:3}
 .game-grid,.leaderboard-grid,.benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .game-head{align-items:flex-start}
}
@media (max-width:760px){
 body{padding-bottom:max(0px,env(safe-area-inset-bottom))}
 .container{width:min(100% - 18px,1180px)}
 .site-header{position:relative}
 .nav{min-height:auto;padding:10px 0}
 .logo{width:100%;justify-content:center}
 .navlinks{width:100%;justify-content:center;gap:4px 10px}
 .navlinks a{min-height:40px;font-size:.9rem}
 .approved{width:auto;justify-content:center}
 .hero{padding-top:52px;padding-bottom:54px}
 .hero h1{font-size:clamp(2.5rem,14vw,4.3rem)}
 .hero-actions{flex-direction:column;align-items:stretch}
 .hero-actions .cta{width:100%}
 .benefit-grid,.game-grid,.leaderboard-grid,.game-info-grid,.footer-grid{grid-template-columns:1fr!important}
 .section{padding-block:46px}
 .section-title{font-size:clamp(1.8rem,8vw,2.65rem)}
 .game-art{min-height:180px}
 .card-actions{flex-direction:column;align-items:stretch}
 .top-score{text-align:center}
 .hall-heading{align-items:flex-start;gap:12px}
 .hall-crown{font-size:2.7rem!important}
 .game-page{padding-top:12px}
 .game-head{flex-direction:column;align-items:stretch}
 .game-head .cta{width:100%}
 .game-toolbar{padding:10px}
 .game-toolbar>div{width:100%;justify-content:center}
 .game-pill{font-size:.78rem;padding:7px 8px}
 .game-btn{flex:1 1 0;min-width:120px}
 .game-panel{border-radius:14px}
 .canvas-wrap,.mind-canvas-wrap{min-height:440px;height:calc(100dvh - 225px)!important;max-height:680px;aspect-ratio:auto}
 .mind-touch-controls{display:flex!important;position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:30;justify-content:space-between;align-items:flex-end;pointer-events:none}
 .mind-touch-controls>*{pointer-events:auto}
 .touch-pad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px);gap:5px}
 .touch-pad .up{grid-column:2;grid-row:1}.touch-pad .left{grid-column:1;grid-row:2}.touch-pad .down{grid-column:2;grid-row:2}.touch-pad .right{grid-column:3;grid-row:2}
 .touch-actions{display:grid;grid-template-columns:76px 76px;gap:7px}
 .touch-controls button{min-width:54px;height:54px;border-radius:15px;font-size:1.05rem;border:1px solid rgba(255,255,255,.25);background:rgba(9,20,37,.86);color:#fff;backdrop-filter:blur(8px)}
 .touch-actions button{min-width:74px;font-size:.68rem;padding:5px}
 .touch-action-primary{background:rgba(255,76,160,.9)!important}
 .setup{padding:10px}
 .setup-card{padding:20px 14px}
 .setup-grid{grid-template-columns:1fr}
 .setup-card h2{font-size:1.65rem}
 .result-overlay{padding:10px}
 .result-card{padding:24px 15px}
 .game-info-grid article{padding:17px}
}
@media (max-width:430px){
 .container{width:calc(100% - 12px)}
 .logo{font-size:.93rem}
 .logo-badge{width:38px;height:38px}
 .navlinks a{font-size:.8rem}
 .approved{font-size:.74rem}
 .hero h1{font-size:clamp(2.15rem,13vw,3.25rem)}
 .hero h2{font-size:1.05rem}
 .game-card{border-radius:15px}
 .card-body{padding:16px 13px}
 .game-art{min-height:155px}
 .leaderboard-top{min-height:88px;padding:13px}
 .leader-game-icon{font-size:2.3rem}
 .game-toolbar{gap:7px}
 .game-pill{font-size:.7rem}
 .game-btn{min-width:0;font-size:.75rem;padding:8px}
 .canvas-wrap,.mind-canvas-wrap{min-height:400px;height:calc(100dvh - 205px)!important}
 .touch-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:4px}
 .touch-controls button{min-width:48px;height:48px;border-radius:13px}
 .touch-actions{grid-template-columns:64px 64px;gap:5px}
 .touch-actions button{min-width:62px;font-size:.61rem}
}
@media (max-height:560px) and (orientation:landscape){
 .site-header,.game-head,.game-info-grid,.site-footer{display:none}
 .game-page{padding:0}
 .game-page .container{width:100%;max-width:none}
 .game-panel{border-radius:0;min-height:100dvh!important}
 .game-toolbar{padding:6px 10px;min-height:48px}
 .canvas-wrap,.mind-canvas-wrap{height:calc(100dvh - 48px)!important;min-height:0;max-height:none}
 .mind-touch-controls{bottom:max(5px,env(safe-area-inset-bottom))}
 .touch-pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}
 .touch-controls button{width:44px;min-width:44px;height:44px}
 .touch-actions{grid-template-columns:60px 60px}
 .touch-actions button{min-width:58px}
}
@media (min-width:1400px){
 .container{width:min(1320px,calc(100% - 48px))}
 .game-grid,.leaderboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .canvas-wrap,.mind-canvas-wrap{max-height:760px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


/* =========================================================
   FINAL RESPONSIVE GAME LAYOUT — TOOLBAR/CONTROLS NEVER OVERLAY
   ========================================================= */
:root{--page-pad:clamp(10px,2.5vw,24px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{min-width:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
button,a,input,select{-webkit-tap-highlight-color:transparent}
.container{width:min(1220px,calc(100% - (var(--page-pad)*2)));margin-inline:auto}
.game-container{width:min(1080px,calc(100% - (var(--page-pad)*2)))}
.game-panel{position:relative;min-height:0!important;overflow:hidden;border-radius:22px;background:#07101d}
.game-toolbar{position:relative!important;inset:auto!important;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;background:linear-gradient(180deg,#101d31,#091421);border-bottom:1px solid rgba(255,255,255,.1);pointer-events:auto!important}
.game-toolbar>div{pointer-events:auto!important}.game-status-row,.game-tool-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.game-pill{display:inline-flex;align-items:center;gap:5px;min-height:42px;padding:9px 12px;border-radius:12px;background:#030914;border:1px solid rgba(255,255,255,.12);font-size:.9rem;font-weight:900;white-space:nowrap}
.game-pill b{color:#ffd51f}.game-btn{min-height:42px;padding:8px 12px;border-radius:12px}
.canvas-wrap,.mind-canvas-wrap{position:relative!important;width:100%;height:auto!important;min-height:540px;aspect-ratio:16/10;max-height:none!important;padding:0!important;overflow:hidden;background:#020817;touch-action:none}
.game-canvas{display:block;width:100%!important;height:100%!important;min-width:0;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.setup,.result-overlay{position:absolute;inset:0}.setup-card{width:min(620px,calc(100% - 22px));max-height:calc(100% - 22px);overflow:auto;-webkit-overflow-scrolling:touch}
.setup-icon{font-size:clamp(3rem,8vw,5rem)}
.touch-controls,.mind-touch-controls{position:relative!important;inset:auto!important;z-index:10;display:none;pointer-events:auto!important;padding:12px;background:linear-gradient(180deg,#0b1728,#050c16);border-top:1px solid rgba(255,255,255,.12);user-select:none;-webkit-user-select:none;touch-action:none}
.touch-control-label{display:none}.touch-control-dock{display:flex;width:100%;justify-content:space-between;align-items:flex-end;gap:18px}
.touch-pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:7px}.touch-pad .up{grid-column:2;grid-row:1}.touch-pad .left{grid-column:1;grid-row:2}.touch-pad .down{grid-column:2;grid-row:2}.touch-pad .right{grid-column:3;grid-row:2}
.touch-actions{display:grid;grid-template-columns:90px;gap:9px}.touch-controls button{min-width:58px;height:58px;border-radius:15px;background:#142238;color:#fff;border:1px solid rgba(255,255,255,.2);font-weight:1000;box-shadow:0 5px 0 rgba(0,0,0,.35);touch-action:none}.touch-actions button{width:90px;font-size:.72rem}.touch-action-primary{background:#d83e90!important}
.share-game-card{margin-top:18px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#10233b,#17173c);border:1px solid rgba(56,221,255,.24);display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.share-game-card>div:first-child{display:flex;align-items:center;gap:13px}.share-game-card h2{margin:0;color:#fff}.share-game-card p{margin:4px 0 0;color:#aebed1}.share-icon{font-size:2.4rem}.share-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.share-btn{min-height:42px;padding:9px 13px;border:0;border-radius:11px;color:#fff;text-decoration:none;font-weight:900;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:#254366}.share-btn.facebook{background:#1877f2}.share-btn.whatsapp{background:#128c4b}.share-btn.copy-share{background:#6b46c1}.share-toast{position:fixed;left:50%;bottom:24px;z-index:9999;transform:translate(-50%,20px);opacity:0;padding:11px 16px;border-radius:999px;background:#ffd51f;color:#171100;font-weight:1000;transition:.2s;pointer-events:none}.share-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:820px){
 .game-head{display:flex;flex-direction:column;align-items:stretch;gap:12px}.game-back{width:100%}
 .game-toolbar{align-items:stretch}.game-status-row,.game-tool-row{width:100%;justify-content:center}.game-pill{font-size:.78rem;min-height:38px;padding:7px 9px}.game-btn{flex:1;min-width:130px}
 .canvas-wrap,.mind-canvas-wrap{aspect-ratio:4/5;min-height:0;height:auto!important}
 .touch-controls,.mind-touch-controls{display:block!important}.touch-control-dock{max-width:560px;margin:auto}
 .share-game-card{flex-direction:column;align-items:stretch}.share-buttons{justify-content:stretch}.share-btn{flex:1 1 130px}
 .setup-grid{grid-template-columns:1fr}.setup-card{padding:19px 14px}.game-info-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
 :root{--page-pad:6px}.site-header{position:relative}.game-page{padding-top:8px}.game-head h1{font-size:1.65rem}.game-head p{font-size:.88rem}
 .game-panel{border-radius:13px}.game-toolbar{padding:8px 6px;gap:6px}.game-status-row,.game-tool-row{gap:5px}.game-pill{font-size:.68rem;min-height:34px;padding:6px 7px;border-radius:9px}.game-btn{font-size:.72rem;min-height:38px;padding:6px}
 .canvas-wrap,.mind-canvas-wrap{aspect-ratio:4/5;min-height:0!important}
 .touch-controls,.mind-touch-controls{padding:9px 7px}.touch-control-dock{gap:8px}.touch-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:5px}.touch-controls button{min-width:48px;height:48px;border-radius:12px}.touch-actions{grid-template-columns:72px;gap:7px}.touch-actions button{width:72px;font-size:.61rem}
 .share-game-card{padding:15px 12px}.share-game-card>div:first-child{align-items:flex-start}.share-icon{font-size:1.8rem}.share-game-card h2{font-size:1.15rem}.share-game-card p{font-size:.85rem}.share-btn{flex:1 1 calc(50% - 5px);font-size:.8rem;padding:8px}
}
@media(max-height:540px) and (orientation:landscape){
 .site-header,.game-head,.game-info-grid,.site-footer,.share-game-card{display:none}.game-page{padding:0}.game-container{width:100%;max-width:none}.game-panel{border-radius:0;display:grid;grid-template-columns:1fr 190px;grid-template-rows:auto 1fr;min-height:100dvh!important}.game-toolbar{grid-column:1/-1;padding:5px}.canvas-wrap,.mind-canvas-wrap{grid-column:1;grid-row:2;aspect-ratio:auto;height:calc(100dvh - 46px)!important}.touch-controls,.mind-touch-controls{grid-column:2;grid-row:2;display:flex!important;padding:8px}.touch-control-dock{flex-direction:column;justify-content:center;align-items:center}.touch-pad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px)}.touch-controls button{min-width:40px;height:40px}.touch-actions{grid-template-columns:72px 72px}.touch-actions button{width:72px}}

.card-actions{display:grid!important;grid-template-columns:1fr auto;align-items:stretch}.card-share{border:1px solid rgba(56,221,255,.3);background:rgba(56,221,255,.08);color:#9ceeff;border-radius:10px;padding:9px 12px;font-weight:1000;cursor:pointer}.top-score{grid-column:1/-1}.discovery-section{background:radial-gradient(circle at 50% 0,rgba(56,221,255,.12),transparent 40%)}.discovery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.discovery-grid article{padding:22px;border-radius:18px;background:linear-gradient(145deg,#11243a,#0a1424);border:1px solid rgba(255,255,255,.11);box-shadow:0 18px 45px rgba(0,0,0,.25)}.discovery-grid span{font-size:2.5rem}.discovery-grid h3{margin:10px 0 7px;color:#ffd51f}.discovery-grid p{margin:0;color:#aebdd0;line-height:1.55}@media(max-width:900px){.discovery-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.discovery-grid{grid-template-columns:1fr}.card-actions{grid-template-columns:1fr}.top-score{grid-column:1}.card-share{min-height:44px}}

/* Mobile viewport + fullscreen repair (all mind games) */
:root{--visible-vh:100dvh}
.game-panel:fullscreen,.game-panel:-webkit-full-screen{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0;background:#050c16;display:flex;flex-direction:column}
.game-panel:fullscreen .canvas-wrap,.game-panel:fullscreen .mind-canvas-wrap,
.game-panel:-webkit-full-screen .canvas-wrap,.game-panel:-webkit-full-screen .mind-canvas-wrap{flex:1 1 auto;height:auto!important;min-height:0!important;aspect-ratio:auto}
.game-panel:fullscreen .touch-controls,.game-panel:fullscreen .mind-touch-controls,
.game-panel:-webkit-full-screen .touch-controls,.game-panel:-webkit-full-screen .mind-touch-controls{flex:0 0 auto}
body.game-focus-mode{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;background:#050c16}
body.game-focus-mode .site-header,body.game-focus-mode .game-head,body.game-focus-mode .share-game-card,body.game-focus-mode .game-info-grid,body.game-focus-mode .site-footer{display:none!important}
body.game-focus-mode main,body.game-focus-mode .game-page,body.game-focus-mode .game-container{width:100%;height:100%;max-width:none;margin:0;padding:0}
body.game-focus-mode .game-panel{width:100%;height:100%;border:0;border-radius:0;display:flex;flex-direction:column}
body.game-focus-mode .game-toolbar{flex:0 0 auto}
body.game-focus-mode .canvas-wrap,body.game-focus-mode .mind-canvas-wrap{flex:1 1 auto;height:auto!important;min-height:0!important;aspect-ratio:auto}
body.game-focus-mode .touch-controls,body.game-focus-mode .mind-touch-controls{flex:0 0 auto}

@media(max-width:820px){
 .game-container{width:100%}
 .game-page{padding-inline:0}
 .game-panel{display:flex;flex-direction:column}
 .game-toolbar{flex:0 0 auto}
 .canvas-wrap,.mind-canvas-wrap{flex:0 0 auto;width:100%;height:clamp(430px,68dvh,650px)!important;min-height:0!important;aspect-ratio:auto!important}
 .touch-controls,.mind-touch-controls{flex:0 0 auto}
 .touch-control-dock{align-items:center}
}
@media(max-width:480px) and (orientation:portrait){
 .game-toolbar{padding:6px 5px}
 .game-status-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .game-pill{justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:5px 3px;font-size:.62rem}
 .game-tool-row{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
 .game-btn{width:100%;min-width:0!important;min-height:34px}
 .canvas-wrap,.mind-canvas-wrap{height:clamp(420px,66dvh,585px)!important}
 .touch-controls,.mind-touch-controls{padding:7px 6px}
 .touch-control-dock{max-width:none;gap:6px}
 .touch-pad{grid-template-columns:repeat(4,minmax(42px,1fr));grid-template-rows:46px;gap:5px;flex:1}
 .touch-pad .up,.touch-pad .left,.touch-pad .down,.touch-pad .right{grid-row:1}
 .touch-pad .left{grid-column:1}.touch-pad .up{grid-column:2}.touch-pad .down{grid-column:3}.touch-pad .right{grid-column:4}
 .touch-controls button{min-width:42px!important;width:100%;height:46px!important}
 .touch-actions{grid-template-columns:68px;gap:5px}
 .touch-actions button{width:68px!important;height:46px!important}
}
@media(max-height:700px) and (orientation:portrait){
 .canvas-wrap,.mind-canvas-wrap{height:calc(100dvh - 205px)!important;min-height:360px!important}
 body.game-focus-mode .canvas-wrap,body.game-focus-mode .mind-canvas-wrap{height:auto!important;min-height:0!important}
}