:root{--pond-deep:#0e2b34;--pond:#16414a;--pond-light:#1f5560;--lily:#3fbf7f;--lily-dark:#2a8f5c;--frog:#6ede4f;--frog-dark:#4bb833;--frog-belly:#d9f7c2;--sun:#ffd75e;--fly:#ff5f6d;--text:#eaf7ee;--text-dim:#9fc2ae;--card:#092026b8;--card-border:#6ede4f47;--shadow:0 18px 40px -18px #000c;--sans:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;--mono:ui-monospace, Consolas, monospace;font:17px/1.55 var(--sans);color:var(--text);background:var(--pond-deep);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-height:100svh;margin:0;overflow-x:hidden}h1,h2,h3{color:var(--text);letter-spacing:-.5px;margin:0;font-weight:800}h1{font-size:clamp(2.6rem,8vw,5rem);line-height:1.05}h2{font-size:clamp(1.5rem,3vw,2rem)}p{margin:0}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit;font-size:1rem}input{font-family:inherit;font-size:1.1rem}:focus-visible{outline:3px solid var(--sun);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app{background:radial-gradient(1200px 600px at 20% -10%, #1d5a63 0%, transparent 60%), radial-gradient(900px 500px at 90% 10%, #17505a 0%, transparent 55%), linear-gradient(180deg, #123a44 0%, var(--pond-deep) 70%);min-height:100svh;transition:background .6s,filter .6s;position:relative;overflow:hidden}.app.night{background:radial-gradient(1200px 600px at 20% -10%,#1a2a5c 0%,#0000 60%),radial-gradient(900px 500px at 90% 10%,#4a2a6b 0%,#0000 55%),linear-gradient(#101a35 0%,#060a18 70%)}.app.rainbow{filter:saturate(1.35)hue-rotate(24deg)}.bubbles{pointer-events:none;z-index:0;position:fixed;inset:0}.bubble{background:radial-gradient(circle at 30% 30%,#ffffffe6,#a0dcff40);border:1px solid #ffffff80;border-radius:50%;width:14px;height:14px;animation:9s linear infinite rise;position:absolute;bottom:-40px}@keyframes rise{0%{opacity:0;transform:translateY(0)scale(.6)}10%{opacity:.9}to{opacity:0;transform:translateY(-105vh)scale(1.1)}}.topbar{z-index:2;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,40px);display:flex;position:relative}.brand{color:var(--text);letter-spacing:-.5px;align-items:center;gap:10px;font-size:1.4rem;font-weight:900;display:inline-flex}.brand .frog{transition:transform .4s}.brand:hover .frog{transform:rotate(-8deg)scale(1.06)}.topbar-actions{gap:8px;display:flex}.chip{color:var(--text);background:#ffffff14;border:1px solid #ffffff29;border-radius:999px;padding:8px 14px;font-size:.92rem;font-weight:700;transition:background .2s,transform .2s,border-color .2s}.chip:hover{background:#ffffff29;transform:translateY(-2px)}.chip[aria-pressed=true]{background:var(--frog);color:#06301c;border-color:#0000}.hero{z-index:1;gap:clamp(28px,6vw,60px);max-width:1080px;margin:0 auto;padding:clamp(8px,3vw,30px) clamp(16px,4vw,40px) 80px;display:grid;position:relative}.hero-stage{justify-items:center;gap:12px;display:grid}.pond{aspect-ratio:16/10;width:min(520px,90vw);box-shadow:inset 0 -20px 40px #00000059, var(--shadow);cursor:crosshair;background:radial-gradient(circle at 30% 25%,#ffffff2e,#0000 40%),linear-gradient(#1f7a86 0%,#14555f 100%);border-radius:40px;place-items:center;display:grid;position:relative;overflow:hidden}.pond:after{content:"";pointer-events:none;background:repeating-linear-gradient(-45deg,#ffffff0d 0 12px,#0000 12px 24px);animation:8s linear infinite drift;position:absolute;inset:0}@keyframes drift{to{background-position:200px 0}}.hero-frog{z-index:1;position:relative}.idle-bob{animation:2.6s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-14px)rotate(3deg)}}.lily{z-index:0;background:radial-gradient(at 35% 30%,#66d98a,#2a8f5c);border-radius:50%;width:90px;height:44px;position:absolute;box-shadow:0 6px 12px #00000059}.lily-1{bottom:12%;left:8%;transform:rotate(-8deg)scale(.9)}.lily-2{bottom:18%;right:10%;transform:rotate(6deg)scale(1.1)}.lily-3{top:8%;left:40%;transform:rotate(-3deg)scale(.7)}.ripple{pointer-events:none;z-index:2;border:2px solid #ffffffd9;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;animation:.9s ease-out forwards ripple-out;position:absolute}@keyframes ripple-out{to{opacity:0;transform:scale(5)}}.tap-hint{color:var(--text-dim);font-size:.9rem;font-weight:600;animation:2.4s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.5}}.hero-copy{text-align:center;justify-items:center;gap:18px;display:grid}.squiggle{color:var(--frog);display:inline-block;position:relative}.squiggle:after{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 7 Q20 1 38 6 T74 6 T118 5' fill='none' stroke='%23ffd75e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 50%/100% 100% no-repeat;height:8px;position:absolute;bottom:-4px;left:0;right:0}.lede{color:var(--text-dim);max-width:56ch;font-size:clamp(1.05rem,2.2vw,1.25rem)}.cta-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn-primary{color:#06301c;background:linear-gradient(#7df05a,#4bb833);border-radius:999px;padding:12px 22px;font-size:1rem;font-weight:900;transition:transform .12s,box-shadow .12s;box-shadow:0 6px #2a7a1c,0 10px 20px -6px #00000080}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px #2a7a1c,0 14px 24px -6px #00000080}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px #2a7a1c}.btn-big{padding:16px 30px;font-size:1.1rem}.btn-ghost{color:var(--text);background:#ffffff0f;border:1px solid #fff3;border-radius:999px;padding:12px 20px;font-weight:700;transition:background .2s,transform .2s}.btn-ghost:hover{background:#ffffff24;transform:translateY(-2px)}.games-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;display:grid}.game-tile{text-align:left;background:var(--card);border:1px solid var(--card-border);color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:22px;gap:8px;padding:22px;transition:transform .2s,border-color .2s,box-shadow .2s;display:grid}.game-tile:hover{border-color:var(--frog);transform:translateY(-6px)rotate(-1deg);box-shadow:0 20px 40px -18px #000c}.game-tile h2{font-size:1.25rem}.game-tile p{color:var(--text-dim);font-size:.94rem}.tile-emoji{font-size:2.2rem}.tile-go{color:var(--frog);font-size:.92rem;font-weight:800}.game-page{z-index:1;gap:22px;max-width:780px;margin:0 auto;padding:8px clamp(16px,4vw,40px) 80px;display:grid;position:relative}.game-head{text-align:center;justify-items:center;gap:10px;display:grid}.game-head p{color:var(--text-dim)}.game-card{background:var(--card);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--shadow);border-radius:26px;padding:clamp(16px,3vw,26px)}.game{gap:16px;display:grid}.game-hud{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.hud-item{color:var(--text-dim);background:#00000047;border:1px solid #ffffff1f;border-radius:999px;padding:6px 14px;font-size:.9rem}.hud-item b{color:var(--text);font-size:1.05rem}.hud-item b.danger{color:var(--fly)}.hud-item.combo{border-color:var(--sun);color:var(--sun);background:#ffd75e33}.game-overlay{text-align:center;border-radius:inherit;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#06191eb8;place-content:center;justify-items:center;gap:12px;padding:24px;display:grid;position:absolute;inset:0}.game-overlay p{color:var(--text-dim);max-width:44ch}.game-controls{justify-items:center;gap:10px;display:grid}.hint{color:var(--text-dim);text-align:center;max-width:52ch;font-size:.88rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pond-frame{aspect-ratio:4/3;touch-action:manipulation;background:linear-gradient(#1d6b76 0%,#0f4750 100%);border-radius:22px;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 -16px 30px #0006}.pond-frame.shake{animation:.3s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.pond-surface{background:repeating-linear-gradient(100deg,#ffffff0d 0 20px,#0000 20px 40px);animation:6s linear infinite drift;position:absolute;inset:0}.bug{cursor:pointer;filter:drop-shadow(0 4px 6px #0006);background:0 0;border:none;line-height:1;transition:transform .1s;animation:.6s ease-in-out infinite alternate wiggle;position:absolute}.bug:hover{transform:translate(-50%,-50%)scale(1.2)!important}.bug:active{transform:translate(-50%,-50%)scale(.8)!important}.bug-bad{filter:drop-shadow(0 0 8px #ff5f6dcc)}@keyframes wiggle{0%{margin-top:-4px}to{margin-top:4px}}.tongue{transform-origin:bottom;pointer-events:none;background:linear-gradient(#ff7b9c,#d9455f);border-radius:999px;width:8px;height:70px;margin:-70px 0 0 -4px;animation:.22s ease-out forwards zap;position:absolute}@keyframes zap{0%{opacity:1;transform:scaleY(.2)}to{opacity:0;transform:scaleY(1)}}.hopper-stage{aspect-ratio:3/4;background:linear-gradient(#1a5f6b 0%,#0e3a43 100%);border-radius:22px;width:100%;max-height:60vh;position:relative;overflow:hidden}.lily{cursor:pointer;z-index:1;background:0 0;border:none;padding:0;transition:filter .2s;animation:.35s ease-out lily-in;position:absolute;transform:translate(-50%,-50%)}.lily:hover{filter:brightness(1.2)}.lily-shape{background:radial-gradient(at 35% 30%,#66d98a,#2a8f5c);border-radius:50%;width:clamp(64px,18vw,92px);height:clamp(32px,9vw,46px);display:block;position:relative;box-shadow:0 8px 14px #0006}.lily-shape:after{content:"";background:linear-gradient(#1a5f6b,#0e3a43);border-radius:50%;width:14px;height:14px;position:absolute;top:0;left:50%;transform:translate(-50%,-40%)}@keyframes lily-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}}.hopper-frog{z-index:2;transition:left .38s cubic-bezier(.34,1.56,.64,1),top .38s cubic-bezier(.34,1.56,.64,1);position:absolute;transform:translate(-50%,-50%)}.hopper-frog.is-hopping{animation:.38s ease-in-out hop}@keyframes hop{0%,to{margin-top:0}50%{margin-top:-26px}}.hop-feedback{background:var(--sun);color:#4a3200;z-index:3;border-radius:999px;padding:6px 16px;font-weight:900;animation:.3s ease-out pop-in;position:absolute;top:12px;left:50%;transform:translate(-50%)}.frogger-stage{aspect-ratio:11/8;background:#7bd07a;border-radius:22px;flex-direction:column;width:100%;display:flex;position:relative;overflow:hidden}.frogger-goal{color:#fff;letter-spacing:2px;background:#4a2a6b;flex:0 0 12%;place-items:center;height:12%;font-size:.9rem;font-weight:900;display:grid}.lane{flex:1;position:relative;overflow:hidden}.lane-safe{background:#9be89a}.lane-road{background:#3a3a44}.lane-road:nth-child(odd){background:#44444e}.car{font-size:clamp(18px,4vw,28px);line-height:1;position:absolute;top:50%;transform:translate(-50%,-50%)}.grid-frog{z-index:5;transition:left .12s ease-out,top .12s ease-out;position:absolute}.grid-frog.idle{opacity:.9}.frogger-toast{z-index:6;color:var(--fly);text-shadow:0 2px 8px #0009;font-size:2rem;font-weight:900;animation:.25s ease-out pop-in;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dpad{grid-template-rows:repeat(2,46px);grid-template-columns:repeat(3,54px);justify-content:center;gap:8px;display:grid}.dpad button{color:var(--text);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;font-size:1.1rem;transition:background .15s,transform .1s}.dpad button:hover{background:#fff3}.dpad button:active{transform:scale(.94)}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-area:2/1}.dpad button:nth-child(3){grid-area:2/2}.dpad button:nth-child(4){grid-area:2/3}.reflex-pad{aspect-ratio:2;border:2px solid var(--card-border);width:100%;color:var(--text);cursor:pointer;background:linear-gradient(#1a5f6b,#0e3a43);border-radius:24px;place-items:center;gap:8px;transition:background .2s,border-color .2s,transform .1s;display:grid;position:relative;overflow:hidden}.reflex-pad:active{transform:scale(.99)}.reflex-pad.phase-go{border-color:var(--frog);background:linear-gradient(#4bb833,#2a8f5c);animation:.5s ease-in-out infinite alternate glow}@keyframes glow{0%{box-shadow:0 0 20px #6ede4f66}to{box-shadow:0 0 50px #6ede4fe6}}.reflex-frog{z-index:1;position:relative}.reflex-frog.pop{animation:.4s ease-in-out infinite bob}.reflex-label{z-index:1;font-size:1.2rem;font-weight:900}.reflex-timer{background:var(--sun);transform-origin:0;z-index:2;width:100%;height:6px;position:absolute;bottom:0;left:0}.reflex-result{text-align:center;color:var(--sun);font-size:1.4rem;font-weight:900;animation:.25s ease-out pop-in}.reflex-result.miss{color:var(--fly)}.reflex-summary{text-align:center;justify-items:center;gap:12px;display:grid}.reflex-summary ul{flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;display:flex}.reflex-summary li{background:#0000004d;border-radius:999px;padding:6px 12px;font-size:.9rem;font-weight:700}.footer{text-align:center;color:var(--text-dim);padding-top:20px;font-size:.9rem}.chip-user.signed-in{background:var(--frog);color:#06301c;border-color:#0000;font-weight:800}.auth-overlay{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#041216b8;place-items:center;padding:20px;animation:.18s fade-in;display:grid;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.auth-card{border:1px solid var(--card-border);width:min(420px,100%);box-shadow:var(--shadow);background:linear-gradient(#143e46fa,#0a252cfa);border-radius:22px;gap:14px;padding:24px;animation:.24s cubic-bezier(.2,1.3,.5,1) pop-in;display:grid;position:relative}@keyframes pop-in{0%{opacity:0;transform:translateY(14px)scale(.96)}to{opacity:1;transform:none}}.auth-head{align-items:center;gap:14px;display:flex}.auth-head h2{font-size:1.4rem}.auth-sub{color:var(--text-dim);font-size:.92rem}.auth-field{color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;gap:6px;font-size:.85rem;font-weight:700;display:grid}.auth-field input{color:var(--text);text-transform:none;letter-spacing:normal;background:#031014b3;border:1px solid #a0dcc840;border-radius:12px;padding:12px 14px;font-weight:500}.auth-field input:focus{border-color:var(--frog);outline:none;box-shadow:0 0 0 3px #6ede4f38}.auth-hint{color:var(--text-dim);font-size:.82rem}.auth-error{color:#ffd6d9;background:#ff5f6d29;border:1px solid #ff5f6d80;border-radius:10px;padding:10px 12px;font-size:.9rem}.auth-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.auth-actions .btn-primary,.auth-actions .btn-ghost{flex:auto}.auth-close{width:32px;height:32px;color:var(--text-dim);background:#ffffff14;border-radius:50%;font-size:1rem;position:absolute;top:12px;right:14px}.auth-close:hover{color:var(--text);background:#ffffff2e}.auth-scores{gap:6px;margin:0;padding:0;list-style:none;display:grid}.auth-scores li{background:#00000047;border-radius:10px;justify-content:space-between;gap:10px;padding:8px 12px;font-size:.92rem;display:flex}.auth-scores b{color:var(--frog)}.leaderboard{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:24px;margin-top:34px;padding:22px}.lb-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.lb-head h2{font-size:1.3rem}.lb-tabs{flex-wrap:wrap;gap:6px;display:flex}.lb-tab{color:var(--text-dim);background:#00000038;border:1px solid #a0dcc833;border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:700;transition:all .15s}.lb-tab:hover{color:var(--text)}.lb-tab.active{background:var(--frog);color:#06301c;border-color:#0000}.lb-empty{color:var(--text-dim);text-align:center;background:#00000038;border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:22px;display:flex}.lb-list{counter-reset:rank;gap:6px;margin:0;padding:0;list-style:none;display:grid}.lb-list li{background:#00000042;border-radius:12px;grid-template-columns:34px 1fr auto auto;align-items:center;gap:10px;padding:10px 14px;display:grid}.lb-list li.me{background:#6ede4f24;border:1px solid #6ede4f66}.lb-rank{text-align:center;font-weight:800}.lb-name{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.lb-runs{color:var(--text-dim);font-size:.8rem}.lb-score{color:var(--frog);font-size:1.05rem}@media (width<=520px){.hero{text-align:center}.cta-row{width:100%}.cta-row .btn-big{flex:1}.lb-list li{grid-template-columns:30px 1fr auto}.lb-runs{display:none}}