@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg1:#1a1a2e;--bg2:#16213e;--bg3:#0f3460;--accent:#f5a623;--red:#e94560;--green:#4ecdc4;--purple:#a855f7}
body{font-family:'Nunito',sans-serif;background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px;overflow-x:hidden}
#particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;animation:floatStar linear infinite;opacity:.15}
@keyframes floatStar{from{transform:translateY(110vh) rotate(0deg)}to{transform:translateY(-10vh) rotate(360deg)}}
.wrap{position:relative;z-index:1;width:100%;max-width:900px}
header{text-align:center;margin-bottom:14px}
#back-btn{display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(26,26,46,.85);border:2px solid rgba(255,255,255,.25);border-radius:50px;padding:10px 28px;color:#fff;font-family:'Fredoka One',cursive;font-size:1rem;cursor:pointer;transition:background .2s;backdrop-filter:blur(8px);z-index:50;white-space:nowrap}
#back-btn:hover{background:rgba(255,255,255,.18)}
#back-btn.visible{display:block}
header h1{font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,5vw,3rem);background:linear-gradient(90deg,#f5a623,#fc4a1a,#a855f7,#4ecdc4,#f5a623);background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite;filter:drop-shadow(0 2px 10px rgba(245,166,35,.4))}
@keyframes shimmer{to{background-position:300% center}}
.tagline{color:#a0c4ff;font-weight:700;font-size:.88rem;margin-top:3px;letter-spacing:1px}
#hub{margin-bottom:16px}
#hub h2{color:#fff;font-family:'Fredoka One',cursive;font-size:1rem;text-align:center;margin-bottom:10px;opacity:.65;letter-spacing:1px}
.game-cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.game-card{background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.15);border-radius:18px;padding:12px 14px;cursor:pointer;transition:all .25s;text-align:center;min-width:96px;max-width:110px;backdrop-filter:blur(10px);position:relative}
.game-card:hover{transform:translateY(-5px) scale(1.04);border-color:var(--accent);box-shadow:0 12px 28px rgba(245,166,35,.3)}
.game-card.active{background:linear-gradient(135deg,rgba(245,166,35,.25),rgba(252,74,26,.2));border-color:var(--accent);box-shadow:0 8px 28px rgba(245,166,35,.4);transform:translateY(-4px)}
.gc-icon{font-size:2rem;display:block;margin-bottom:4px}
.gc-name{color:#fff;font-family:'Fredoka One',cursive;font-size:.82rem;line-height:1.2}
.gc-badge{position:absolute;top:6px;right:6px;background:var(--green);color:#0f3460;font-size:.5rem;font-weight:800;border-radius:50px;padding:2px 5px}
.screen{display:none;animation:fadeSlide .35s ease}
.screen.active{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ctrl-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);border-radius:50px;padding:8px 20px;color:#fff;font-family:'Fredoka One',cursive;font-size:.92rem;cursor:pointer;transition:all .2s}
.ctrl-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.ctrl-btn.green{border-color:#4ecdc4;color:#4ecdc4}.ctrl-btn.green:hover{background:rgba(78,205,196,.2)}
.ctrl-btn.red{border-color:#e94560;color:#e94560}.ctrl-btn.red:hover{background:rgba(233,69,96,.2)}
.stat-pill{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 14px;color:#fff;font-weight:800;font-size:.88rem;display:flex;align-items:center;gap:5px}
.stat-pill .val{color:var(--accent);font-size:.98rem}
.stats{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(7px);z-index:100;align-items:center;justify-content:center}
.overlay.show{display:flex}
.win-box{background:linear-gradient(135deg,#1a1a2e,#16213e);border:3px solid var(--accent);border-radius:26px;padding:30px 40px;text-align:center;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);max-width:370px;width:90%;box-shadow:0 20px 60px rgba(245,166,35,.35)}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.win-emoji{font-size:3.8rem;animation:bounce .8s ease infinite alternate;display:block}
@keyframes bounce{to{transform:translateY(-12px)}}
.win-box h2{font-family:'Fredoka One',cursive;font-size:1.9rem;background:linear-gradient(90deg,#f5a623,#fc4a1a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:7px 0}
.win-box p{color:#a0c4ff;font-size:.95rem;font-weight:700;margin-bottom:4px}
.win-stars{font-size:1.7rem;margin:8px 0;letter-spacing:5px}
.win-btn{background:linear-gradient(135deg,#f5a623,#fc4a1a);border:none;border-radius:50px;padding:11px 32px;color:#fff;font-family:'Fredoka One',cursive;font-size:1.15rem;cursor:pointer;margin-top:11px;box-shadow:0 6px 18px rgba(245,166,35,.5)}
.win-btn:hover{transform:translateY(-3px) scale(1.05)}
.confetti-piece{position:fixed;width:10px;height:10px;border-radius:2px;animation:confettiFall 3s ease-in forwards;pointer-events:none;z-index:200}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.ripple{position:fixed;border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none;animation:rippleOut .5s ease-out forwards;z-index:500}
@keyframes rippleOut{from{width:0;height:0;opacity:1;margin-left:0;margin-top:0}to{width:100px;height:100px;margin-left:-50px;margin-top:-50px;opacity:0}}

/* MEMORY */
.level-section{background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.15);border-radius:14px;padding:11px 14px;margin-bottom:11px}
.level-section h2{color:#fff;font-family:'Fredoka One',cursive;font-size:.95rem;margin-bottom:8px;text-align:center}
.level-btns{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.lvl-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:11px;padding:7px 13px;color:#fff;font-family:'Fredoka One',cursive;font-size:.82rem;cursor:pointer;transition:all .2s;text-align:center;min-width:75px}
.lvl-btn .pairs{font-size:.62rem;color:#a0c4ff;font-family:'Nunito',sans-serif;font-weight:700}
.lvl-btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.lvl-btn.active{background:linear-gradient(135deg,#f5a623,#fc4a1a);border-color:transparent;transform:translateY(-2px)}
.timer-wrap{width:100%;background:rgba(255,255,255,.1);border-radius:50px;height:8px;margin-bottom:11px;overflow:hidden}
.timer-bar{height:100%;background:linear-gradient(90deg,#4ecdc4,#f5a623,#fc4a1a);border-radius:50px}
#mem-grid{display:grid;gap:7px;justify-content:center;margin-bottom:12px}
.card{perspective:600px;cursor:pointer}
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.4,0,.2,1);border-radius:13px}
.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:13px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.card-back{background:linear-gradient(135deg,#e94560,#c0392b);box-shadow:0 4px 13px rgba(233,69,96,.4);border:3px solid rgba(255,255,255,.2)}
.card-back::after{content:'❓';font-size:1.7rem}
.card-front{background:linear-gradient(135deg,#fff,#f0f4ff);transform:rotateY(180deg);box-shadow:0 4px 13px rgba(0,0,0,.2);border:3px solid rgba(255,255,255,.8)}
.card.matched .card-front{background:linear-gradient(135deg,#d4edda,#a8e6cf);border-color:#4ecdc4;animation:matchPop .5s ease forwards}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.16)}100%{transform:rotateY(180deg) scale(1)}}
.card:hover:not(.flipped):not(.matched) .card-inner{transform:translateY(-3px)}
.card:hover:not(.flipped):not(.matched) .card-back{background:linear-gradient(135deg,#ff6b81,#e94560)}

/* TTT */
.ttt-wrap{display:flex;flex-direction:column;align-items:center;gap:13px}
.ttt-scoreboard{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.score-box{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);border-radius:13px;padding:8px 16px;text-align:center;transition:all .3s;min-width:78px}
.score-box.active-turn{border-color:var(--accent);background:rgba(245,166,35,.15);box-shadow:0 0 16px rgba(245,166,35,.3);transform:scale(1.05)}
.score-box .p-icon{font-size:1.7rem;display:block}
.score-box .p-label{color:#a0c4ff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.score-box .p-score{color:var(--accent);font-family:'Fredoka One',cursive;font-size:1.5rem}
.ttt-status{font-family:'Fredoka One',cursive;font-size:1.3rem;color:#fff;text-align:center;min-height:32px}
.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;background:rgba(255,255,255,.06);border-radius:18px;border:2px solid rgba(255,255,255,.12)}
.ttt-cell{width:clamp(74px,19vw,108px);height:clamp(74px,19vw,108px);background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:clamp(1.9rem,6.5vw,3rem);cursor:pointer;transition:all .2s;user-select:none}
.ttt-cell:hover:not(.taken){background:rgba(255,255,255,.15);transform:scale(1.06);border-color:var(--accent)}
.ttt-cell .mark{display:inline-block;animation:markPop .3s cubic-bezier(.175,.885,.32,1.275)}
@keyframes markPop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0deg)}}
.ttt-cell.win-cell{background:linear-gradient(135deg,rgba(78,205,196,.3),rgba(168,85,247,.3));border-color:var(--green);animation:winPulse .6s ease infinite alternate}
@keyframes winPulse{from{box-shadow:0 0 8px rgba(78,205,196,.4)}to{box-shadow:0 0 26px rgba(78,205,196,.9)}}
.mode-toggle{display:flex;background:rgba(255,255,255,.08);border-radius:50px;padding:3px;border:2px solid rgba(255,255,255,.15)}
.mode-btn{padding:7px 17px;border-radius:50px;border:none;font-family:'Fredoka One',cursive;font-size:.85rem;cursor:pointer;color:rgba(255,255,255,.6);background:transparent;transition:all .2s}
.mode-btn.active{background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;box-shadow:0 4px 12px rgba(168,85,247,.4)}

/* SNAKE */
.snake-wrap{display:flex;flex-direction:column;align-items:center;gap:11px}
#snake-canvas{border-radius:16px;border:3px solid rgba(255,255,255,.2);box-shadow:0 8px 30px rgba(0,0,0,.4);background:#0a0a1a;display:block;max-width:100%}
.dpad{display:grid;grid-template-areas:"  u  ""l c r""  d  ";gap:5px}
.dpad-btn{width:50px;height:50px;border:2px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.dpad-btn:hover,.dpad-btn:active{background:rgba(245,166,35,.3);border-color:var(--accent);transform:scale(1.1)}
.dpad-btn.up{grid-area:u}.dpad-btn.left{grid-area:l}.dpad-btn.right{grid-area:r}.dpad-btn.down{grid-area:d}
.dpad-center{grid-area:c;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1)}
.speed-btns{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.spd-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 15px;color:#fff;font-family:'Fredoka One',cursive;font-size:.82rem;cursor:pointer;transition:all .2s}
.spd-btn:hover{border-color:var(--accent)}
.spd-btn.active{background:linear-gradient(135deg,#f5a623,#fc4a1a);border-color:transparent}

/* COLOR PUZZLE */
.cp-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.cp-swatch-wrap{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);border-radius:14px;padding:9px 16px;text-align:center}
.cp-swatch-wrap label{color:#a0c4ff;font-size:.72rem;font-weight:700;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.cp-swatch{width:60px;height:60px;border-radius:11px;border:3px solid rgba(255,255,255,.3);margin:0 auto;transition:all .4s}
.cp-palette{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:480px}
.cp-color-btn{width:58px;height:58px;border-radius:13px;border:3px solid rgba(255,255,255,.25);cursor:pointer;transition:all .22s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}
.cp-color-btn:hover{transform:scale(1.12) translateY(-4px)}
.cp-color-btn span{color:#fff;font-size:.6rem;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.cp-mixing-area{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.cp-slot{width:50px;height:50px;border-radius:11px;border:2.5px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.05);transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;font-weight:800;color:rgba(255,255,255,.7)}
.cp-slot.filled{border-style:solid;border-color:rgba(255,255,255,.5)}
.cp-progress{width:260px;max-width:88vw;height:16px;background:rgba(255,255,255,.1);border-radius:50px;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.cp-prog-bar{height:100%;border-radius:50px;transition:width .5s ease,background .5s ease;width:0%}
.cp-sim{font-family:'Fredoka One',cursive;font-size:1.05rem;color:#fff;text-align:center}
.cp-level-info{font-family:'Fredoka One',cursive;color:#a0c4ff;font-size:.95rem;text-align:center}

/* WHACK A MOLE */
.wam-wrap{display:flex;flex-direction:column;align-items:center;gap:13px}
.wam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background:rgba(255,255,255,.06);border-radius:22px;border:2px solid rgba(255,255,255,.12)}
.wam-hole{width:clamp(88px,24vw,120px);height:clamp(88px,24vw,120px);border-radius:50%;background:radial-gradient(circle at 40% 40%,#2a1a0a,#1a0a00);border:4px solid #5a3a1a;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 6px 18px rgba(0,0,0,.6)}
.wam-mole{font-size:clamp(2.2rem,6vw,3rem);position:absolute;bottom:-100%;transition:bottom .18s cubic-bezier(.175,.885,.32,1.275);user-select:none}
.wam-hole.up .wam-mole{bottom:5%}
.wam-hole.whacked .wam-mole{animation:whackAnim .25s ease forwards}
@keyframes whackAnim{0%{transform:scale(1)}50%{transform:scale(1.3) rotate(-10deg)}100%{transform:scale(0) rotate(20deg)}}
.wam-hit-fx{position:absolute;font-size:1.4rem;font-family:'Fredoka One',cursive;color:#ffd700;pointer-events:none;animation:hitPop .6s ease forwards;z-index:10}
@keyframes hitPop{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-40px) scale(1.4);opacity:0}}
.diff-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 16px;color:#fff;font-family:'Fredoka One',cursive;font-size:.85rem;cursor:pointer;transition:all .2s}
.diff-btn:hover{border-color:var(--accent)}
.diff-btn.active{background:linear-gradient(135deg,#f5a623,#fc4a1a);border-color:transparent}
.wam-timer-bar-wrap{width:280px;max-width:88vw;height:14px;background:rgba(255,255,255,.1);border-radius:50px;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.wam-timer-bar{height:100%;background:linear-gradient(90deg,#4ecdc4,#f5a623,#fc4a1a);border-radius:50px;transition:width .5s linear}

/* SIMON */
.simon-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.simon-board{position:relative;width:clamp(240px,65vw,320px);height:clamp(240px,65vw,320px)}
.simon-btn{position:absolute;width:47%;height:47%;cursor:pointer;transition:all .15s;opacity:.65}
.simon-btn:hover{opacity:.8}
.simon-btn.lit{opacity:1;filter:brightness(1.6) drop-shadow(0 0 18px currentColor)}
.simon-btn.TL{top:0;left:0;border-radius:100% 0 0 0;background:#e94560}
.simon-btn.TR{top:0;right:0;border-radius:0 100% 0 0;background:#4ecdc4}
.simon-btn.BL{bottom:0;left:0;border-radius:0 0 0 100%;background:#f5a623}
.simon-btn.BR{bottom:0;right:0;border-radius:0 0 100% 0;background:#a855f7}
.simon-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;height:30%;border-radius:50%;background:#1a1a2e;border:4px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;font-size:1rem;color:#fff;z-index:2}
.simon-status{font-family:'Fredoka One',cursive;font-size:1.3rem;color:#fff;text-align:center;min-height:34px}
.simon-divh{position:absolute;top:50%;left:0;right:0;height:6px;background:#1a1a2e;transform:translateY(-50%);z-index:1}
.simon-divv{position:absolute;left:50%;top:0;bottom:0;width:6px;background:#1a1a2e;transform:translateX(-50%);z-index:1}

/* FRUIT CATCHER */
.fc-wrap{display:flex;flex-direction:column;align-items:center;gap:11px}
#fc-canvas{border-radius:16px;border:3px solid rgba(255,255,255,.2);box-shadow:0 8px 30px rgba(0,0,0,.4);display:block;max-width:100%}

/* SLIDING PUZZLE */
.sp-wrap{display:flex;flex-direction:column;align-items:center;gap:13px}
.sp-board{display:grid;gap:4px;padding:8px;background:rgba(255,255,255,.06);border-radius:18px;border:2px solid rgba(255,255,255,.12)}
.sp-tile{display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:transform .15s;user-select:none;overflow:hidden}
.sp-tile.num{background:linear-gradient(135deg,#4ecdc4,#2eaf9f);border:3px solid rgba(255,255,255,.3);color:#fff;font-family:'Fredoka One',cursive;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.sp-tile.num:hover{transform:scale(1.07)}
.sp-tile.empty{background:rgba(0,0,0,.35);border:2px dashed rgba(255,255,255,.1);cursor:default}
.sp-tile.correct{background:linear-gradient(135deg,#f5a623,#fc4a1a)!important;border-color:rgba(255,255,255,.5)!important}
.sp-tile.pic{border:2px solid rgba(255,255,255,.15);padding:0;cursor:pointer}
.sp-tile.pic:hover:not(.empty){transform:scale(1.05)}
.sp-tile.pic.empty{background:rgba(0,0,0,.6);border:2px dashed rgba(255,255,255,.1);cursor:default}
.sp-tile.pic.correct{box-shadow:0 0 0 3px #4ecdc4!important}
.sp-size-btn{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 16px;color:#fff;font-family:'Fredoka One',cursive;font-size:.85rem;cursor:pointer;transition:all .2s}
.sp-size-btn:hover{border-color:var(--accent)}
.sp-size-btn.active{background:linear-gradient(135deg,#a855f7,#6366f1);border-color:transparent}

/* WORD SCRAMBLE */
.ws-wrap{display:flex;flex-direction:column;align-items:center;gap:13px}
.ws-image{font-size:5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));animation:wsFloat 3s ease infinite alternate}
@keyframes wsFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.ws-letter{width:clamp(42px,10vw,56px);height:clamp(42px,10vw,56px);background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(99,102,241,.3));border:2px solid rgba(168,85,247,.5);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;font-size:clamp(1.3rem,4vw,1.8rem);color:#fff;cursor:pointer;transition:all .2s;user-select:none}
.ws-letter:hover{transform:translateY(-4px) scale(1.1);border-color:#a855f7}
.ws-letter.selected{background:linear-gradient(135deg,#f5a623,#fc4a1a);border-color:var(--accent);transform:translateY(-4px)}
.ws-slot{width:clamp(42px,10vw,56px);height:clamp(42px,10vw,56px);border-radius:11px;border:2.5px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;font-size:clamp(1.3rem,4vw,1.8rem);color:#fff;cursor:pointer;transition:all .2s}
.ws-slot.filled{border-style:solid;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.ws-progress-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.ws-progress-dot.done{background:var(--green)}
.ws-progress-dot.current{background:var(--accent)}

/* ═══ HUB LAYOUT ═══ */
body{padding:0;align-items:stretch}
#app-shell{display:flex;flex-direction:column;width:100%;min-height:100vh;position:relative;z-index:1}
#main-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 20px 40px}
#main-area header{text-align:center;margin-bottom:14px;width:100%;max-width:860px}
.screen{width:100%;max-width:860px}
#main-area header h1{font-family:'Fredoka One',cursive;font-size:clamp(1.5rem,4vw,2.4rem);background:linear-gradient(90deg,#f5a623,#fc4a1a,#a855f7,#4ecdc4,#f5a623);background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite;filter:drop-shadow(0 2px 10px rgba(245,166,35,.4))}
#main-area .tagline{color:#a0c4ff;font-weight:700;font-size:.88rem;margin-top:3px;letter-spacing:1px}
.hub-section{margin-bottom:22px;width:100%}
.hub-section-title{font-family:'Fredoka One',cursive;color:rgba(255,255,255,.5);font-size:.78rem;margin-bottom:10px;text-align:center;letter-spacing:2.5px;text-transform:uppercase}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.hub-card{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14);border-radius:20px;padding:18px 10px 14px;cursor:pointer;transition:all .25s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;backdrop-filter:blur(10px);position:relative;min-height:118px;justify-content:center;user-select:none}
.hub-card:hover{transform:translateY(-6px) scale(1.05);border-color:var(--accent);box-shadow:0 14px 32px rgba(245,166,35,.28)}
.hub-card:active{transform:scale(.95)}
.hub-card-emoji{font-size:2.8rem;line-height:1;display:block}
.hub-card-name{color:#fff;font-family:'Fredoka One',cursive;font-size:.8rem;line-height:1.25}
.hub-badge{font-size:.48rem;font-weight:800;border-radius:50px;padding:2px 6px;position:absolute;top:8px;right:8px;line-height:1.4}
.hub-badge.fun{background:var(--green);color:#0f3460}
.hub-badge.edu{background:var(--accent);color:#1a1a2e}
@media(max-width:600px){
  .hub-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .hub-card{min-height:96px;padding:12px 6px 10px;border-radius:16px;gap:5px}
  .hub-card-emoji{font-size:2.1rem}
  .hub-card-name{font-size:.72rem}
  #main-area{padding:10px 10px 30px}

  /* Mouse Trap: stack grid and history vertically on mobile */
  #mt-layout{flex-direction:column!important}
  #mt-history-panel{width:100%!important;flex-shrink:unset!important}
  #mt-history{max-height:120px!important}
}

/* Prevent 300ms tap delay and improve touch response on interactive elements */
button,.ctrl-btn,.hub-card,.diff-btn,.spd-btn,.mode-btn,.win-btn,.lvl-btn,.sp-size-btn,.dpad-btn{touch-action:manipulation}