:root{color:#243044;--ink:#243044;--cream:#fff8ef;--line:#ead9c4;background:#8ad4ff;font-family:Fredoka,Trebuchet MS,Segoe UI,sans-serif;font-weight:600;line-height:1.2}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{-webkit-user-select:none;user-select:none;background:radial-gradient(90px 54px at 7% 10%,#fff 42%,#0000 44%),radial-gradient(54px 36px at 12% 13%,#fff 42%,#0000 44%),radial-gradient(130px 74px at 92% 8%,#fff 42%,#0000 44%),radial-gradient(70px 46px at 80% 14%,#fff 40%,#0000 42%),linear-gradient(#7ecfff 0%,#d7f4ff 38%,#fff3dd 100%);min-height:100dvh}button,input{font:inherit;color:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}button:focus-visible{outline-offset:2px;outline:3px solid #243044}#app{flex-direction:column;max-width:520px;height:100dvh;min-height:0;margin:0 auto;display:flex;overflow:hidden}header{padding:calc(10px + env(safe-area-inset-top)) 14px 6px;flex-shrink:0}.top{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex}h1{letter-spacing:-.02em;align-items:center;gap:6px;min-width:0;margin:0;font-size:clamp(1.05rem,4.4vw,1.7rem);display:flex}h1 svg{flex:none}.stats{align-items:center;gap:8px;display:flex}.lives,.score-pill,#mute{box-shadow:0 3px 0 var(--line);background:#fff}.lives{border-radius:999px;gap:1px;padding:4px 8px;font-size:1.15rem;line-height:1;display:flex}.heart{color:#f3c9d2}.heart.full{color:#ff4d6d}.score-pill{white-space:nowrap;border-radius:999px;align-items:center;gap:5px;min-height:36px;padding:4px 10px 4px 6px;display:flex}.score-pill strong{font-size:1.15rem}.score-pill small{color:#7d6b58;font-size:.72rem;font-weight:600}.lily-dot{background:radial-gradient(circle at 40% 40%,#b6f58a,#2f9d46 72%);border-radius:50%;width:18px;height:14px;box-shadow:inset -2px -2px #00000014}#mute{border:none;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid}.hint{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:8px 0 0;font-size:1rem;display:flex}.hint b{box-shadow:0 2px 0 var(--line);letter-spacing:.06em;background:#fff;border-radius:999px;padding:3px 9px;font-size:.92rem}.hint b.up{background:#d5f7a4}.hint b.down{background:#ffe7a3}.hint b.left{background:#c9ebff}.hint b.right{background:#ffd4e6}#board{background:#6f7f8e;border-radius:22px;flex:1;min-height:0;margin:8px 12px 0;position:relative;overflow:hidden;box-shadow:0 8px #285a4614,0 14px 28px #285a7829}#lanes{flex-direction:column;display:flex;position:absolute;inset:0}.lane{flex:1;min-height:0;position:relative;overflow:hidden}.lane.grass{background:repeating-linear-gradient(90deg,#0000 0 12px,#ffffff1a 12px 14px),linear-gradient(#58b856,#7ed56a)}.lane.median{background:repeating-linear-gradient(90deg,#0000 0 12px,#ffffff24 12px 14px),linear-gradient(#c6ee86,#9adf72)}.lane.home{background:linear-gradient(#ffffff59,#0000 32%),linear-gradient(90deg,#49d4ef,#1496d4 50%,#3ec6ea)}.lane.road{background:linear-gradient(#d5dee6,#d5dee6) top/100% 3px no-repeat,linear-gradient(#d5dee6,#d5dee6) bottom/100% 3px no-repeat,repeating-linear-gradient(90deg,#fff3a8 0 14px,#0000 14px 30px) 50%/100% 4px no-repeat,linear-gradient(#738394,#667685)}.flower{font-size:clamp(12px,2.2vh,18px);line-height:1;position:absolute;bottom:0;transform:translate(-50%)}.pill-label{color:#2d4a34;letter-spacing:.05em;background:#fff8ef;border-radius:999px;padding:3px 6px;font-size:clamp(9px,1.5vh,12px);position:absolute;top:4px;left:6px;box-shadow:0 2px #00000014}.pill-label.rest{left:auto;right:6px}.lilies{justify-content:space-evenly;align-items:center;height:100%;padding:0 3%;display:flex}.lily{background:radial-gradient(circle at 38% 40%,#c6f69a,#2f9d46 70%);border-radius:50%;width:16%;height:52%;position:relative;box-shadow:inset -4px -3px #00000014,0 3px #0c506e2e}.lily:after{content:"";background:#ffe56a;border-radius:50%;width:6px;height:6px;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);box-shadow:0 -5px #ff8fb8,0 5px #ff8fb8,5px 0 #ffd0e2,-5px 0 #ffd0e2}.vehicle{pointer-events:none;height:84%;position:absolute;top:8%}.vehicle.flip{transform:scaleX(-1)}.vehicle .shell{background:linear-gradient(#ffffff59, transparent 30%), var(--body);border-radius:12px 16px 10px 10px;position:absolute;inset:24% 0 16%;box-shadow:inset 0 -3px #0000001a}.vehicle .shell:after{content:"";background:#ffffff47;height:14%;position:absolute;top:62%;left:0;right:0}.vehicle .roof{background:color-mix(in srgb, var(--body) 75%, white);border-radius:10px 12px 3px 3px;height:68%;position:absolute;top:-42%;left:16%;right:32%}.vehicle .roof:after{content:"";background:linear-gradient(#f7fdff,#c5e9f8);border-radius:6px 8px 2px 2px;position:absolute;inset:18% 12% 0}.vehicle .eyes{z-index:1;gap:4px;display:flex;position:absolute;top:18%;left:18%}.vehicle .eyes i{background:#fff;border-radius:50%;width:7px;height:7px;display:block;box-shadow:inset -2px -1px #243044}.vehicle .smile{border-bottom:2px solid #243044;border-radius:0 0 8px 8px;width:18%;height:14%;position:absolute;bottom:16%;left:20%}.vehicle .light{background:#fff6bf;border-radius:3px;width:9%;height:30%;position:absolute;top:28%;right:6%;box-shadow:3px 0 8px #ffe98a}.truck .bed{background:color-mix(in srgb, var(--body) 78%, #243044);border-radius:8px 3px 6px 8px;width:58%;position:absolute;top:32%;bottom:18%;left:0}.truck .cab{background:linear-gradient(#ffffff59, transparent 28%), var(--body);border-radius:8px 14px 8px 8px;width:48%;position:absolute;top:14%;bottom:16%;right:0}.truck .cab:before{content:"";background:linear-gradient(#f7fdff,#c5e9f8);border-radius:6px;height:34%;position:absolute;top:10%;left:14%;right:20%}.truck .eyes{top:36%;left:18%}.truck .smile{width:28%;bottom:18%;left:22%}.truck .light{height:22%;top:40%;right:8%}.wheel{aspect-ratio:1;background:radial-gradient(circle,#e7edf4 0 26%,#0000 28%),#2a3038;border-radius:50%;width:16%;position:absolute;bottom:2%}.vehicle.car .wheel.a{left:12%}.vehicle.car .wheel.b{right:14%}.truck .wheel.a{width:13%;left:6%}.truck .wheel.b{width:13%;left:34%}.truck .wheel.c{width:13%;right:8%}#frog{z-index:4;pointer-events:none;width:14.2857%;height:10%;transition:left .12s ease-out,bottom .12s ease-out;position:absolute}#frog .sprite{place-items:center;width:100%;height:100%;display:grid}#frog.snap{transition:none}#frog svg{width:96%;height:96%;overflow:visible}#frog.bump{animation:.22s bump}#frog.blink .sprite{animation:.28s steps(2,end) infinite blink}#frog svg.hop{animation:.22s hop}#frog svg.yay{animation:.7s yay}#flash,#confetti,#toast,.overlay{pointer-events:none;position:absolute}#flash{opacity:0;z-index:5;background:#ffd5de;inset:0}#flash.on{animation:.45s flash}#confetti{z-index:6;inset:0;overflow:hidden}.bit{border-radius:2px;width:8px;height:12px;animation:.8s ease-out forwards confetti;position:absolute;top:18%}#toast{color:var(--ink);text-align:center;opacity:0;z-index:6;background:#fff8ef;border-radius:14px;max-width:90%;padding:8px 12px;font-size:.95rem;bottom:10px;left:50%;transform:translate(-50%)translateY(8px);box-shadow:0 4px #24304414}#toast.show{animation:1.7s toast}.overlay{z-index:7;pointer-events:auto;background:#fff8efc7;place-items:center;padding:16px;display:grid;inset:0}.overlay[hidden]{display:none}.card{text-align:center;background:#fff;border-radius:24px;width:min(280px,100%);padding:16px 18px 18px;box-shadow:0 10px #2430440d,0 16px 30px #2430441f}.card h2{margin:4px 0 6px;font-size:1.45rem}.card p{margin:0 0 8px;font-size:1.02rem}.over-best{color:#7d6b58;min-height:1.2em}#again{background:#c6f27a;border:none;border-radius:16px;margin-top:6px;padding:12px 22px;font-size:1.15rem;font-weight:700;box-shadow:0 4px #74b434}#again:active{transform:translateY(3px);box-shadow:0 1px #74b434}.dock{background:var(--cream);padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;flex-shrink:0;box-shadow:0 -8px 20px #5032140d}.typer{align-items:stretch;gap:8px;display:flex}.buffer{letter-spacing:.14em;background:#fff;border-radius:16px;flex:1;justify-content:center;align-items:center;min-height:48px;padding:4px 12px;font-size:1.35rem;display:flex;box-shadow:inset 0 0 0 2px #f0e2d2}.buffer.empty:before{content:"type a word";letter-spacing:0;color:#b7a894;font-size:1rem}.buffer:not(.empty):after{content:"";background:#ff8a3d;border-radius:2px;width:3px;height:1.15em;margin-left:6px;animation:1s step-end infinite caret}.buffer.shake{animation:.32s shake}#erase{box-shadow:0 3px 0 var(--line);background:#fff;border:none;border-radius:16px;padding:0 14px;font-weight:700}#erase:active{box-shadow:0 1px 0 var(--line);transform:translateY(2px)}.buffer-help{text-align:center;color:#8a7360;min-height:1.1em;margin:4px 0 6px;font-size:.85rem}.pads{grid-template-columns:1fr .85fr 1fr;grid-template-areas:".up.""left mid right"".down.";gap:8px;display:grid}.pad{border:none;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:62px;font-weight:700;display:flex}.pad .arrow{font-size:1.25rem;line-height:1}.pad .word{letter-spacing:.08em;font-size:.92rem}.pad.up{background:#d5f7a4;grid-area:up;box-shadow:0 4px #7db83a}.pad.down{background:#ffe7a3;grid-area:down;box-shadow:0 4px #e0b03a}.pad.left{background:#c9ebff;grid-area:left;box-shadow:0 4px #6eb4de}.pad.right{background:#ffd4e6;grid-area:right;box-shadow:0 4px #e89ab8}.pad:active{transform:translateY(3px);box-shadow:0 1px #0000001f}.pad-frog{grid-area:mid;place-items:center;display:grid}.ghost-input{opacity:0;caret-color:#0000;border:0;width:1px;height:1px;padding:0;font-size:16px;position:fixed;top:0;left:0}@keyframes hop{0%{transform:translateY(0)scale(1)}40%{transform:translateY(-18%)scale(.94,1.1)}to{transform:translateY(0)scale(1)}}@keyframes yay{0%{transform:translateY(0)scale(1)}30%{transform:translateY(-22%)scale(1.08,.92)}55%{transform:translateY(0)scale(.96,1.08)}75%{transform:translateY(-12%)scale(1.04)}to{transform:translateY(0)scale(1)}}@keyframes bump{0%,to{transform:translate(0)}35%{transform:translate(-5px)}70%{transform:translate(5px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}@keyframes flash{0%{opacity:.72}to{opacity:0}}@keyframes blink{50%{opacity:.35}}@keyframes caret{50%{opacity:0}}@keyframes toast{0%{opacity:0;transform:translate(-50%)translateY(8px)}12%{opacity:1;transform:translate(-50%)translateY(0)}80%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(6px)}}@keyframes confetti{to{transform:translate(var(--dx), var(--dy)) rotate(var(--rot));opacity:0}}@media (width<=420px){h1{font-size:1.05rem}h1 svg{width:30px;height:30px}#mute{width:40px;height:40px}.lives{font-size:1rem}}@media (height<=740px){h1{font-size:1.15rem}.hint{margin-top:4px}.pad{min-height:50px}.buffer{min-height:42px;font-size:1.15rem}header{padding-top:6px}}@media (height<=520px){.pads{grid-template-columns:repeat(4,1fr);grid-template-areas:"left up down right"}.pad-frog{display:none}.pad{flex-direction:row;gap:4px;min-height:44px}.hint b{padding:2px 7px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}