:root{font-family:DM Sans,system-ui,sans-serif;color:#172554;background:#f8fafc;font-synthesis:none;--navy: #172554;--muted: #64748b;--line: #e2e8f0;--yellow: #fbbf24;--pink: #fb7185;--green: #34d399;--blue: #60a5fa;--purple: #a78bfa}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 10% 0%,#fef3c7 0,transparent 26rem),radial-gradient(circle at 100% 20%,#dbeafe 0,transparent 25rem),#f8fafc;overscroll-behavior-y:contain}button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}.app-frame{width:min(1080px,100%);min-height:100vh;margin:auto;padding:0 28px env(safe-area-inset-bottom)}.topbar{display:flex;justify-content:space-between;align-items:center;padding:28px 0}.topbar.compact{padding-bottom:12px}.brand,.brand-button{display:flex;align-items:center;gap:12px;background:transparent;padding:0;text-align:left}.brand strong,.brand-button{font-family:Outfit,sans-serif;font-weight:800;letter-spacing:-.03em}.brand small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:#fff;background:var(--navy);box-shadow:0 8px 18px #17255426}.audio-toggle{border:1px solid var(--line);background:#ffffffb8;padding:10px 14px;border-radius:999px;font-size:.78rem;font-weight:700;min-height:42px;transition:transform .2s,background .2s}.audio-toggle:hover{transform:translateY(-2px);background:#fff}.hero{display:flex;justify-content:space-between;align-items:center;min-height:320px;padding:42px 54px;overflow:hidden;border-radius:32px;color:#fff;background:linear-gradient(125deg,#172554,#273b89 62%,#4264bf);box-shadow:0 22px 45px #17255425;position:relative}.hero:after{content:"";position:absolute;inset:auto -8% -55% 35%;height:270px;border-radius:50%;background:#ffffff12}.hero-copy{position:relative;z-index:1;max-width:570px}.eyebrow{color:#f59e0b;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:800;margin:0 0 11px}.hero .eyebrow{color:#fde68a}h1,h2{font-family:Outfit,sans-serif;letter-spacing:-.06em;margin:0}.hero h1{font-size:clamp(2.8rem,7vw,5rem);line-height:.94}.hero h1 em{color:#fcd34d;font-style:normal}.hero-copy>p:last-child{color:#dbeafe;line-height:1.6;max-width:420px;margin:22px 0 0}.hero-art{width:220px;height:220px;position:relative;z-index:1}.hero-art span{position:absolute;display:grid;place-items:center;width:82px;height:82px;border-radius:26px;font-size:2.8rem;background:#ffffff16;border:1px solid #ffffff28;box-shadow:0 15px 24px #0002;animation:float 5s ease-in-out infinite}.hero-art span:nth-child(1){left:8px;top:20px}.hero-art span:nth-child(2){right:0;top:0;animation-delay:-1s}.hero-art span:nth-child(3){left:55px;bottom:4px;animation-delay:-2s}.hero-art span:nth-child(4){right:8px;bottom:25px;animation-delay:-3s}.catalog-section{padding:58px 0 25px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-heading h2{font-size:clamp(1.8rem,4vw,2.5rem)}.game-count{color:var(--muted);font-size:.8rem;font-weight:700;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:99px}.catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.catalog-card{display:flex;align-items:center;gap:17px;min-height:112px;padding:20px;border:1px solid var(--line);border-radius:22px;background:#ffffffd9;text-align:left;box-shadow:0 7px 20px #17255408;transition:transform .2s,border-color .2s,box-shadow .2s}.catalog-card:hover{transform:translateY(-4px);border-color:var(--card-accent);box-shadow:0 15px 30px #17255414}.card-icon{display:grid;place-items:center;flex:0 0 55px;height:55px;border-radius:18px;font-size:1.8rem;background:color-mix(in srgb,var(--card-accent) 20%,white)}.card-copy{display:grid;gap:5px;flex:1}.card-copy strong{font-family:Outfit,sans-serif;font-size:1.1rem}.card-copy small{color:var(--muted);line-height:1.4;font-size:.78rem}.card-arrow{color:var(--card-accent);font-size:1.4rem;font-weight:700}.footer{display:flex;justify-content:space-between;gap:10px;color:#94a3b8;font-size:.72rem;padding:25px 0 32px}.game-shell{padding:18px 0 40px;max-width:760px;margin:auto}.game-heading{display:flex;align-items:center;gap:14px;margin:12px 0 18px}.game-heading>div{flex:1}.game-heading h1{font-size:clamp(1.65rem,5vw,2.4rem)}.game-heading .eyebrow{margin-bottom:4px}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:1.3rem}.button{min-height:42px;padding:10px 16px;border-radius:13px;background:var(--navy);color:#fff;font-weight:700;transition:transform .2s,opacity .2s}.button:hover{transform:translateY(-2px)}.button-small{padding:8px 13px;font-size:.78rem}.game-stat{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:#ffffffa8}.game-stat strong{color:var(--navy)}.loading-card,.result-card{display:flex;align-items:center;gap:14px;padding:22px;border-radius:20px;background:#fff;box-shadow:0 12px 30px #17255412}.spinner{width:20px;height:20px;border:3px solid #dbeafe;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}.result-card{margin-top:18px;border:2px solid #fde68a;background:#fffbeb}.result-card>div{flex:1}.result-card strong,.result-card small{display:block}.result-card small{color:var(--muted);margin-top:4px}.result-sparkle{font-size:1.8rem}.puzzle-board{background:#ffffffd9;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 12px 30px #1725540b}.instruction{margin:0 0 18px;color:var(--muted);font-size:.9rem;line-height:1.5}.game-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:15px}.feedback{min-height:24px;font-size:.82rem;color:#475569;font-weight:600}.feedback.success{color:#059669}.feedback.error{color:#e11d48}.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice{min-height:66px;border:2px solid transparent;border-radius:16px;background:#f1f5f9;font-size:1.7rem;transition:transform .15s,border-color .15s,background .15s}.choice:hover,.choice.selected{transform:scale(1.04);border-color:#60a5fa;background:#eff6ff}.choice.correct{background:#d1fae5;border-color:#34d399}.choice.wrong{background:#ffe4e6;border-color:#fb7185}.sorting-area,.flow-area{display:grid;grid-template-columns:1fr 1fr;gap:14px}.drop-zone{min-height:180px;border:2px dashed #cbd5e1;border-radius:18px;padding:12px;background:#f8fafc}.drop-zone.active{border-color:var(--blue);background:#eff6ff}.object-grid{display:flex;flex-wrap:wrap;gap:10px}.draggable{width:56px;height:56px;border-radius:17px;font-size:1.6rem;background:#fff;border:1px solid var(--line);touch-action:none}.draggable.selected{outline:3px solid #60a5fa}.target-label{color:var(--muted);font-size:.72rem;font-weight:700;margin-bottom:12px}.pattern{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:24px 0}.pattern span{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#eff6ff;font-size:1.5rem}.pattern .missing{background:#fef3c7;color:#d97706;border:2px dashed #fbbf24}.maze-board{display:grid;gap:3px;width:min(100%,420px);aspect-ratio:1;margin:auto;padding:4px;border-radius:18px;background:#172554;touch-action:none}.maze-cell{border-radius:4px;background:#dbeafe}.maze-cell.wall{background:#172554}.maze-cell.path{background:#bfdbfe}.maze-cell.start{background:#34d399}.maze-cell.end{background:#fbbf24}.maze-cell.player{background:#fb7185;box-shadow:inset 0 0 0 4px #fff}.flow-canvas{width:100%;max-width:520px;aspect-ratio:1.55;margin:auto;border-radius:18px;background:#f1f5f9;touch-action:none}.ball-lane{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;min-height:220px;padding:15px;border-radius:18px;background:linear-gradient(#eff6ff,#dbeafe)}.ball-target{min-height:62px;border-radius:15px;background:#fff9;border:2px dashed #94a3b8;font-size:1.5rem}.ball-target.hit{background:#d1fae5;border-color:#34d399}.ball-picker{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.ball{width:48px;height:48px;border-radius:50%;border:3px solid white;box-shadow:0 4px 10px #17255420;font-size:1.2rem}.ball.selected{outline:3px solid var(--navy);transform:translateY(-4px)}@keyframes float{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(4deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:680px){.app-frame{padding:0 16px env(safe-area-inset-bottom)}.topbar{padding:18px 0}.hero{min-height:370px;padding:30px 24px;align-items:flex-start}.hero-art{position:absolute;right:-22px;bottom:-20px;transform:scale(.72);opacity:.85}.catalog-grid{grid-template-columns:1fr}.footer{flex-direction:column}.game-heading{gap:9px}.game-heading .button-small{font-size:.7rem;padding:7px 9px}.sorting-area,.flow-area{grid-template-columns:1fr}.choice-grid{grid-template-columns:repeat(3,1fr)}.puzzle-board{padding:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}