:root{--bg: #0b1020;--ink: #e8f0ff;--hint: #6b7280;--z-background: 0;--z-frogs: 5;--z-backword: 20;--z-top: 100}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(1200px 800px at 50% 30%,#131a33 0%,var(--bg) 60%);color:var(--ink);overflow:hidden}.stage{position:relative;width:100vw;height:100vh;display:grid;place-items:center;-webkit-user-select:none;user-select:none}.grain{pointer-events:none;position:absolute;inset:0;opacity:.04;mix-blend-mode:overlay;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>')}.stack{flex-direction:row;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3vmin,24px);width:min(980px,92vw);height:min(460px,70vmin);padding-bottom:7vmin;margin:0 auto}@media(orientation:portrait),(max-width:640px){.stack{flex-direction:column;align-items:center;width:min(360px,92vw)}}.frog,.empty{position:relative;width:clamp(90px,22vmin,180px);aspect-ratio:1 / 1}.frog{transform-origin:50% 70%;will-change:transform;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .2s,opacity .25s;cursor:pointer;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}.frog.f1{filter:hue-rotate(0deg) saturate(1.05) contrast(1.02)}.frog.f2{filter:hue-rotate(40deg) saturate(1.05) contrast(1.02)}.frog.f3{filter:hue-rotate(90deg) saturate(1.05) contrast(1.02)}.frog.f4{filter:hue-rotate(150deg) saturate(1.05) contrast(1.02)}.empty{opacity:.14;border:2px dashed rgba(255,255,255,.25);border-radius:16px}.frog:not(.chosen){animation:float 2.4s ease-in-out infinite}@keyframes float{0%,to{translate:0 0}50%{translate:0 -1.2%}}.frog.hopping{animation:arcHop .46s ease-out;z-index:5}@keyframes arcHop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-18%) scale(1.08)}to{transform:translateY(0) scale(1)}}.frog.chosen{transform:translateY(-16%) scale(1.12);z-index:9;filter:drop-shadow(0 20px 50px rgba(0,0,0,.5))}.frog.dim{opacity:.28;filter:grayscale(.25) brightness(.85);pointer-events:none}.backword{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transform:translateY(6%);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);z-index:var(--z-backword);mix-blend-mode:difference}.backword.show{opacity:.18;transform:translateY(0)}.backword h1{margin:0;font-weight:900;letter-spacing:.06em;text-transform:uppercase;text-align:center;font-size:clamp(36px,14vmin,180px);background:linear-gradient(180deg,var(--ink),#bcd7ff 60%,#89f5c9);-webkit-background-clip:text;background-clip:text;color:transparent;filter:blur(.2px) drop-shadow(0 6px 40px rgba(0,0,0,.35))}.hint{position:absolute;bottom:32px;left:50%;translate:-50% 0;color:var(--hint);opacity:.8;font-size:14px}.hint kbd{background:#111827;border:1px solid #374151;padding:2px 6px;border-radius:6px;font-size:12px}