:root{--bg: #1a1730;--bg-gradient: radial-gradient(ellipse 120% 80% at 50% -15%, rgba(139, 92, 246, .42), transparent 55%), radial-gradient(ellipse 90% 70% at 0% 85%, rgba(255, 107, 74, .24), transparent 50%), radial-gradient(ellipse 70% 55% at 100% 25%, rgba(34, 211, 238, .18), transparent 45%), linear-gradient(165deg, #221e3d 0%, #1a1730 45%, #1c2848 100%);--fg: #F8FAFC;--muted: #94A3B8;--accent: #FF6B4A;--accent-hover: #FF8566;--accent-secondary: #8B5CF6;--accent-cyan: #22D3EE;--success: #34D399;--danger: #F87171;--surface: rgba(255, 255, 255, .06);--surface-strong: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .12);--radius: 14px;--radius-lg: 20px;--shadow-glow: 0 0 40px rgba(255, 107, 74, .15);font-family:Outfit,system-ui,-apple-system,sans-serif;color:var(--fg);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;min-height:100dvh;background:var(--bg-gradient);background-attachment:fixed}body.route-play{overflow:hidden;height:100dvh}#root{min-height:100dvh}.page{min-height:100dvh;padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.4rem;border-radius:var(--radius);border:none;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(135deg,var(--accent),#FF8F6B);color:#1a0a06;box-shadow:0 4px 20px #ff6b4a59}.btn.primary:hover{box-shadow:0 6px 28px #ff6b4a73}.btn.secondary{background:var(--surface);color:var(--fg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.btn.ghost{background:transparent;color:var(--muted)}.link-muted{color:var(--muted);font-size:.9rem;text-decoration:none}.link-muted:hover{color:var(--accent-cyan)}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.25rem;background:var(--bg-gradient)}.landing .hero{display:flex;flex-direction:column;align-items:center;gap:1.25rem;max-width:420px;width:100%}.landing .logo-mark{font-size:3rem;font-weight:800;letter-spacing:-.06em;background:linear-gradient(135deg,var(--fg) 0%,var(--accent) 50%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:1.2rem;font-weight:500;color:var(--muted);line-height:1.45;max-width:22rem}.demo-zoom{width:min(300px,88vw);aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:#1e1a36;border:2px solid var(--glass-border);box-shadow:var(--shadow-glow);position:relative}.demo-zoom-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}.demo-zoom-img.is-active{opacity:1;animation:dezoomIn .45s cubic-bezier(.22,1,.36,1)}.demo-zoom img{width:100%;height:100%;object-fit:cover}.demo-zoom-badge{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#1a1730d1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.35rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;color:var(--accent-cyan);border:1px solid var(--glass-border)}.cta-row{display:flex;flex-direction:column;gap:.75rem;width:min(320px,100%)}.page.play{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;padding:0;overflow:hidden;background:var(--bg-gradient)}.play-header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:max(.65rem,env(safe-area-inset-top)) 1rem .65rem;background:#1a1730e6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border);z-index:10}.play-header-left{display:flex;align-items:center;gap:.75rem}.puzzle-num{font-weight:700;font-size:.95rem;color:var(--accent)}.play-timer{font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600;color:var(--muted);min-width:2.5rem}.dezoom-dots{display:flex;gap:8px;align-items:center}.dezoom-dots .dot{width:12px;height:12px;border-radius:50%;background:#ffffff26;border:2px solid rgba(255,255,255,.2);transition:all .35s ease}.dezoom-dots .dot.used{background:linear-gradient(135deg,var(--accent),var(--accent-secondary));border-color:transparent;box-shadow:0 0 12px #ff6b4a80;transform:scale(1.1)}.zoom-frame{flex:1;min-height:0;width:100%;overflow:hidden;position:relative;background:#18142e}.zoom-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 80px #0006;z-index:2}.zoom-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:0;transition:opacity .3s ease;pointer-events:none}.zoom-image.is-active{opacity:1;animation:dezoomIn .4s cubic-bezier(.22,1,.36,1)}@keyframes dezoomIn{0%{transform:scale(1.14);opacity:.7;filter:brightness(1.1)}to{transform:scale(1);opacity:1;filter:brightness(1)}}.play-footer{flex-shrink:0;padding:.75rem 1rem max(.85rem,env(safe-area-inset-bottom));background:#1a1730eb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--glass-border)}.guess-form{display:flex;gap:.6rem;max-width:640px;margin:0 auto}.guess-form input{flex:1;padding:.95rem 1.1rem;border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--surface);color:var(--fg);font-family:inherit;font-size:1.05rem;font-weight:500}.guess-form input::placeholder{color:var(--muted)}.guess-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ff6b4a33}.guess-form button{padding:.95rem 1.35rem;border-radius:var(--radius);border:none;background:linear-gradient(135deg,var(--accent),#FF8F6B);color:#1a0a06;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 16px #ff6b4a4d}.guess-form button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.play-error{text-align:center;color:var(--danger);font-size:.85rem;padding:.35rem 1rem 0;margin:0}.loading{text-align:center;padding:3rem;color:var(--muted);font-weight:500}.page.result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 1.25rem;background:var(--bg-gradient)}.result-card{width:min(400px,100%);padding:2rem 1.5rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-glow)}.result h1{font-size:2rem;font-weight:800;margin:0 0 .5rem}.result h1.win{color:var(--success)}.result h1.fail{color:var(--muted)}.result .score{font-size:3.5rem;font-weight:800;margin:.5rem 0 1rem;background:linear-gradient(135deg,var(--accent),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stats{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap}.stats li{font-size:.9rem;color:var(--muted);font-weight:500}.stats li strong{display:block;color:var(--fg);font-size:1.1rem;font-weight:700}.share-preview{background:#00000059;padding:.85rem 1rem;border-radius:var(--radius);font-size:.8rem;text-align:left;overflow-x:auto;white-space:pre-wrap;border:1px solid var(--glass-border);margin:1rem 0 0;color:var(--muted)}.result-nav{display:flex;gap:1.25rem;margin-top:1.5rem}.result-nav a{color:var(--accent-cyan);font-weight:600;text-decoration:none}.page.leaderboard{padding:1.5rem 1rem 2rem;max-width:480px;margin:0 auto}.page.leaderboard h1{font-size:1.75rem;font-weight:800;margin:0 0 .25rem}.page.leaderboard .sub{color:var(--muted);margin:0 0 1rem}.my-rank{display:inline-block;background:linear-gradient(135deg,#ff6b4a33,#8b5cf633);border:1px solid var(--glass-border);padding:.5rem 1rem;border-radius:var(--radius);color:var(--accent);font-weight:700;margin-bottom:1rem}.lb-list{list-style:none;padding:0;margin:1rem 0 1.5rem;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--glass-border);overflow:hidden}.lb-list li{display:grid;grid-template-columns:2.5rem 1fr 4rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);gap:.5rem}.lb-list li:last-child{border-bottom:none}.lb-list li.me{background:#ff6b4a1f}.lb-list .rank{font-weight:800;color:var(--accent-secondary);font-size:.9rem}.lb-list li:nth-child(1) .rank{color:gold}.lb-list li:nth-child(2) .rank{color:silver}.lb-list li:nth-child(3) .rank{color:#cd7f32}.lb-list .name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-list .pts{text-align:right;font-weight:700;color:var(--success)}.muted{color:var(--muted)}.page.login,.page.profile,.page.admin{max-width:400px;margin:0 auto;padding-top:2rem}.login form,.admin-form{display:flex;flex-direction:column;gap:.85rem}.login input,.admin-form input{padding:.85rem 1rem;border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--surface);color:var(--fg);font-family:inherit}.login label,.admin-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;font-weight:500;color:var(--muted)}.error{color:var(--danger);font-size:.9rem}.photo-attribution{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.45rem .65rem;font-size:.68rem;font-weight:500;color:#f8fafceb;background:linear-gradient(transparent,#0a0814d1);text-decoration:none;text-align:center;line-height:1.3}.photo-attribution.compact{position:static;background:none;padding:0;font-size:.62rem;color:var(--muted);display:block;margin-top:.25rem}.photo-attribution:hover{color:var(--accent-cyan)}.like-btn{display:inline-flex;align-items:center;gap:.45rem;margin:.75rem auto;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--glass-border);background:var(--surface);color:var(--fg);font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer}.like-btn.liked{border-color:#ff6b4a80;background:#ff6b4a26;color:var(--accent)}.like-count{font-variant-numeric:tabular-nums;color:var(--muted)}.page.premium{display:flex;flex-direction:column;align-items:center;padding:2rem 1.25rem}.premium-card{width:min(420px,100%);text-align:center}.premium-price{font-size:2rem;font-weight:800;color:var(--accent);margin:.5rem 0 1rem}.premium-perks{text-align:left;margin:0 0 1.25rem;padding-left:1.25rem;color:var(--muted);line-height:1.6}.premium-consent{font-size:.75rem;color:var(--muted);margin-bottom:1rem;line-height:1.45}.premium-active{color:var(--success);font-weight:700;margin:.75rem 0}.premium-msg{margin-top:1rem;font-size:.9rem;color:var(--accent-cyan)}.premium-cta{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--glass-border)}.premium-cta p{color:var(--muted);margin-bottom:.75rem}.practice-badge{color:var(--accent-secondary)!important}.practice-done{display:flex;flex-direction:column;gap:.65rem;align-items:center}.practice-actions{display:flex;gap:.65rem;width:100%;max-width:400px}.practice-actions .btn{flex:1}.page.gallery,.page.credits{max-width:720px;margin:0 auto;padding:1.5rem 1rem 2rem}.page.gallery h1,.page.credits h1{font-size:1.75rem;font-weight:800;margin:0 0 .25rem}.page.gallery .sub,.page.credits .sub{color:var(--muted);margin:0 0 1rem}.gallery-hint{font-size:.9rem;color:var(--muted);margin-bottom:1rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin-top:1.25rem}.gallery-card{border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;background:var(--surface);padding:0;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .2s}.gallery-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.gallery-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.gallery-card-meta{padding:.45rem .5rem .55rem}.gallery-likes{font-size:.8rem;font-weight:700;color:var(--accent)}.credits-list{list-style:none;padding:0;margin:1.5rem 0;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--glass-border);overflow:hidden}.credits-list li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}.credits-list li:last-child{border-bottom:none}.credits-list a{color:var(--accent-cyan);font-weight:600;text-decoration:none}.credits-meta{font-size:.8rem;color:var(--muted);white-space:nowrap}