:root{--font-heading: "Fredoka", cursive, sans-serif;--font-body: "Outfit", sans-serif;--bg-dark: #0f172a;--bg-card: rgba(30, 41, 59, .85);--bg-card-hover: rgba(51, 65, 85, .95);--border-glass: rgba(255, 255, 255, .14);--primary-purple: #8b5cf6;--primary-pink: #ec4899;--primary-blue: #06b6d4;--primary-amber: #f59e0b;--primary-green: #10b981;--text-main: #f8fafc;--text-muted: #94a3b8;--radius-lg: 20px;--radius-md: 14px;--radius-sm: 8px;--shadow-glow: 0 10px 25px -10px rgba(139, 92, 246, .4);--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .35s cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;touch-action:manipulation}html,body{min-height:100%;width:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}body{font-family:var(--font-body);background-color:var(--bg-dark);background-image:radial-gradient(at 0% 0%,rgba(139,92,246,.22) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(6,182,212,.18) 0px,transparent 50%);background-attachment:fixed;color:var(--text-main);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}#app{display:flex;flex-direction:column;min-height:100dvh;width:100%;max-width:460px;margin:0 auto;padding:8px 12px;position:relative}.app-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:var(--radius-md);margin-bottom:10px;box-shadow:0 4px 16px #00000040;flex-shrink:0}.logo-container{display:flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--font-heading);font-size:clamp(1.1rem,4vw,1.3rem);font-weight:700}.logo-icon{font-size:1.3rem;filter:drop-shadow(0 0 6px rgba(139,92,246,.6))}.accent{background:linear-gradient(135deg,var(--primary-pink),var(--primary-amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-actions{display:flex;align-items:center;gap:6px}.pill-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:50px;font-family:var(--font-heading);font-weight:600;font-size:clamp(.75rem,3.2vw,.85rem);border:1px solid var(--border-glass);cursor:pointer;transition:all var(--transition-fast)}.pill-btn.mode-kid{background:#10b98126;color:#34d399;border-color:#34d3994d}.pill-btn.mode-family{background:#f59e0b26;color:#fbbf24;border-color:#fbbf244d}.pill-btn.secondary{background:#ffffff14;color:var(--text-main)}.pill-btn.secondary:hover{background:#ffffff26}.icon-btn{background:#ffffff14;border:1px solid var(--border-glass);color:var(--text-main);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;transition:transform var(--transition-fast)}.icon-btn:hover{transform:scale(1.1);background:#ffffff26}#main-container{flex:1;display:flex;flex-direction:column;position:relative;width:100%}.screen{display:none;opacity:0;transition:opacity .3s ease;flex-direction:column;width:100%;flex:1}.screen.active{display:flex;opacity:1}.hero-section{text-align:center;margin-bottom:10px;flex-shrink:0}.hero-title{font-family:var(--font-heading);font-size:clamp(1.4rem,5vw,1.8rem);font-weight:700;line-height:1.2;margin-bottom:2px}.hero-gradient{background:linear-gradient(135deg,var(--primary-purple),var(--primary-pink),var(--primary-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{color:var(--text-muted);font-size:clamp(.78rem,3.2vw,.85rem)}.game-cards-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px;flex:1}.game-card{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:12px;position:relative;display:flex;flex-direction:column;transition:all var(--transition-smooth);cursor:pointer;overflow:hidden}.game-card:hover,.game-card:active{transform:scale(1.015);border-color:#8b5cf666;box-shadow:var(--shadow-glow);background:var(--bg-card-hover)}.card-badge{position:absolute;top:10px;right:10px;background:#ffffff1a;padding:2px 7px;border-radius:20px;font-size:.68rem;font-weight:600;color:var(--text-muted);border:1px solid var(--border-glass)}.card-icon-wrapper{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:6px}.card-icon-wrapper.hockey-bg{background:linear-gradient(135deg,#ec4899,#8b5cf6)}.card-icon-wrapper.tower-bg{background:linear-gradient(135deg,#06b6d4,#10b981)}.card-icon-wrapper.memory-bg{background:linear-gradient(135deg,#f59e0b,#ec4899)}.card-emoji{font-size:1.5rem;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}.card-content h3{font-family:var(--font-heading);font-size:1.15rem;margin-bottom:2px}.card-content p{color:var(--text-muted);font-size:.8rem;line-height:1.25;margin-bottom:6px}.card-meta{display:flex;gap:8px;font-size:.72rem;color:var(--text-muted);margin-bottom:6px}.play-btn{width:100%;padding:8px;border-radius:var(--radius-sm);border:none;background:linear-gradient(135deg,var(--primary-purple),var(--primary-pink));color:#fff;font-family:var(--font-heading);font-size:.88rem;font-weight:600;cursor:pointer;transition:transform var(--transition-fast),filter var(--transition-fast);box-shadow:0 4px 12px #ec48994d}.game-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;background:var(--bg-card);padding:6px 10px;border-radius:var(--radius-md);border:1px solid var(--border-glass);flex-shrink:0}.game-active-title{font-family:var(--font-heading);font-size:.98rem;font-weight:700;color:var(--primary-blue)}.game-stage{flex:1;width:100%;min-height:380px;max-height:620px;background:#0f172af2;border-radius:var(--radius-lg);border:1px solid var(--border-glass);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;box-shadow:inset 0 0 30px #00000080}.mode-selector-wrapper{display:flex;gap:6px;justify-content:center}.mode-pill-btn{padding:5px 10px;border-radius:30px;border:1px solid var(--border-glass);background:#ffffff14;color:var(--text-muted);font-family:var(--font-heading);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.mode-pill-btn.active{background:linear-gradient(135deg,var(--primary-blue),var(--primary-purple));color:#fff;border-color:transparent;box-shadow:0 4px 12px #06b6d466}.level-card-modal{position:relative;max-width:400px!important}.close-btn{position:absolute;top:12px;right:12px;background:#ffffff1a;border:none;color:var(--text-main);width:28px;height:28px;border-radius:50%;font-size:.9rem;cursor:pointer}.world-tabs{display:flex;gap:5px;margin-top:10px;margin-bottom:12px;justify-content:center;flex-wrap:wrap}.world-tab{background:#ffffff14;border:1px solid var(--border-glass);border-radius:20px;padding:4px 9px;font-family:var(--font-heading);font-size:.75rem;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.world-tab.active{background:linear-gradient(135deg,var(--primary-purple),var(--primary-pink));color:#fff;border-color:transparent;box-shadow:0 4px 12px #ec489966}.levels-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:240px;overflow-y:auto;padding-right:2px}.level-card-btn{background:#1e293be6;border:2px solid var(--border-glass);border-radius:var(--radius-md);padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:all var(--transition-fast)}.level-card-btn:not(.locked):hover{transform:scale(1.06);border-color:var(--primary-blue);background:#06b6d433}.level-card-btn.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}.level-num{font-family:var(--font-heading);font-size:.88rem;font-weight:700}.level-stars{font-size:.62rem;color:#f59e0b}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172ae0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:12px;opacity:1;transition:opacity .3s ease}.modal-overlay.hidden{display:none;opacity:0;pointer-events:none}.modal-card{background:var(--bg-dark);border:2px solid var(--primary-purple);border-radius:var(--radius-lg);padding:22px 16px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 50px #00000080,var(--shadow-glow);animation:modalPop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes modalPop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.modal-emoji{font-size:2.6rem;margin-bottom:6px}.modal-card h2{font-family:var(--font-heading);font-size:1.45rem;margin-bottom:4px}.modal-card p{color:var(--text-muted);font-size:.88rem;margin-bottom:14px}.modal-buttons{display:flex;gap:8px;flex-direction:column}.action-btn{width:100%;padding:10px;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:.92rem;font-weight:600;cursor:pointer;border:none;transition:transform var(--transition-fast)}.action-btn.primary{background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));color:#fff}.action-btn.secondary{background:#ffffff1a;color:var(--text-main);border:1px solid var(--border-glass)}.action-btn:hover{transform:scale(1.02)}.app-footer{text-align:center;padding:4px;font-size:.7rem;color:var(--text-muted);flex-shrink:0}