.frugl-crossing{width:100%;max-width:470px;margin:0 auto}.frugl-crossing *{box-sizing:border-box}.frugl-crossing .fc-stage{background:var(--color-card);border:1px solid var(--color-border);border-radius:1rem;box-shadow:0 1px 3px #00000014,0 1px 2px -1px #0000000f;padding:13px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}.frugl-crossing .fc-stage.is-live{border-color:color-mix(in oklab,var(--color-frog) 50%,var(--color-border));box-shadow:0 0 0 3px color-mix(in oklab,var(--color-frog) 20%,transparent),0 1px 3px #00000014,0 1px 2px -1px #0000000f}.frugl-crossing .fc-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;padding:0 4px}.frugl-crossing .fc-hud-item{display:flex;flex-direction:column;gap:2px;min-width:92px}.frugl-crossing .fc-hud-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted-foreground)}.frugl-crossing .fc-hud-val{font-family:var(--font-mono);font-size:19px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.frugl-crossing .cost .fc-hud-val{color:var(--color-foreground);transition:color .2s ease}.frugl-crossing .cost .fc-hud-val.pos{color:var(--color-frog)}.frugl-crossing .cost .fc-hud-val.neg{color:var(--color-waste)}.frugl-crossing .fc-hud-val.bump{animation:fc-bump .4s cubic-bezier(.34,1.56,.64,1)}@keyframes fc-bump{0%{transform:scale(1)}40%{transform:scale(1.28)}to{transform:scale(1)}}.frugl-crossing .fc-hud-mid{flex:1;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--color-muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.frugl-crossing .fc-board{position:relative;width:100%;aspect-ratio:560 / 532;border-radius:.75rem;overflow:hidden;outline:none;cursor:pointer;background:var(--color-muted);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;animation:fc-screen-on .5s ease both}.frugl-crossing .fc-board:focus-visible{box-shadow:0 0 0 3px var(--color-ring)}@keyframes fc-screen-on{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.frugl-crossing .fc-board{animation:none}}.frugl-crossing .row{position:absolute;left:0;width:100%}.frugl-crossing .row.goal{background:color-mix(in oklab,var(--color-frog) 8%,transparent);border-bottom:2px solid color-mix(in oklab,var(--color-frog) 45%,transparent)}.frugl-crossing .row.start{background:var(--color-muted);border-top:2px solid var(--color-border)}.frugl-crossing .row.lane{background:color-mix(in oklab,var(--color-foreground) 6%,var(--color-background))}.frugl-crossing .row.lane.alt{background:color-mix(in oklab,var(--color-foreground) 9%,var(--color-background))}.frugl-crossing .row-tag{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;user-select:none}.frugl-crossing .row.goal .row-tag{color:var(--color-frog)}.frugl-crossing .row.start .row-tag{color:var(--color-muted-foreground)}.frugl-crossing .pad{position:absolute;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:color-mix(in oklab,var(--color-frog) 28%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-frog) 55%,transparent);transition:background .22s ease,box-shadow .22s ease}.frugl-crossing .pad.lit{background:var(--color-frog);box-shadow:inset 0 0 0 1.5px var(--color-frog-deep),0 0 8px color-mix(in oklab,var(--color-frog) 50%,transparent);animation:fc-pad-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes fc-pad-pop{0%{transform:translateY(-50%) scale(1)}45%{transform:translateY(-50%) scale(1.7)}to{transform:translateY(-50%) scale(1)}}@media(prefers-reduced-motion:reduce){.frugl-crossing .pad.lit{animation:none}}.frugl-crossing .bill{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:7px;height:42px;padding:0 11px 0 9px;background:var(--color-waste-soft);border:1px solid color-mix(in oklab,var(--color-waste) 55%,transparent);border-radius:.625rem;box-shadow:0 1px 2px #0000000d;white-space:nowrap;will-change:left}.frugl-crossing .bill .body{display:flex;flex-direction:column;gap:1px;line-height:1.1}.frugl-crossing .bill .amt{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--color-waste-deep);font-variant-numeric:tabular-nums}.frugl-crossing .bill .lbl{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.02em;color:color-mix(in oklab,var(--color-waste-deep) 70%,var(--color-foreground))}.frugl-crossing .bill:before{content:"$";display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:5px;background:var(--color-waste);color:var(--color-card);font-family:var(--font-mono);font-size:11px;font-weight:800;flex:none}.frugl-crossing .frog{position:absolute;top:0;left:0;width:8.6%;aspect-ratio:1;transition:left .13s cubic-bezier(.34,1.4,.64,1),top .13s cubic-bezier(.34,1.4,.64,1);z-index:5;will-change:left,top}.frugl-crossing .frog-inner{width:100%;height:100%;background:url(/frugl-frog-hero.svg) center/contain no-repeat;transition:transform .13s ease;transform-origin:50% 80%}.frugl-crossing .frog.hop .frog-inner{animation:fc-hop .15s ease}@keyframes fc-hop{0%{transform:scale(1)}45%{transform:scale(1.12,.9) translateY(-8%)}to{transform:scale(1)}}.frugl-crossing .frog.face-left .frog-inner{transform:scaleX(-1)}.frugl-crossing .frog.splat .frog-inner{animation:none;transform:scaleX(1.45) scaleY(.28);filter:saturate(.5) brightness(.92)}.frugl-crossing .frog.win .frog-inner{animation:fc-cheer .5s ease}@keyframes fc-cheer{0%,to{transform:translateY(0)}35%{transform:translateY(-22%) scale(1.05)}}.frugl-crossing .mark{position:absolute;transform:translate(-50%,-50%);width:11%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--color-waste) 35%,transparent) 0%,transparent 70%);z-index:4;pointer-events:none;opacity:0}.frugl-crossing .mark.show{animation:fc-markpop .6s ease forwards}@keyframes fc-markpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.frugl-crossing .float{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;z-index:8;pointer-events:none;opacity:0;white-space:nowrap}.frugl-crossing .float.cost{color:var(--color-destructive)}.frugl-crossing .float.gain{color:var(--color-frog)}.frugl-crossing .float.show{animation:fc-floatup 1s ease forwards}@keyframes fc-floatup{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-110%) scale(1.05)}to{opacity:0;transform:translate(-50%,-240%) scale(1)}}.frugl-crossing .fc-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;font-family:var(--font-mono);font-size:11px;color:var(--color-muted-foreground)}.frugl-crossing .fc-key{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;font-size:11px;background:var(--color-muted);border:1px solid var(--color-border);border-radius:.375rem}.frugl-crossing .fc-hint b{color:var(--color-frog);font-weight:600}.frugl-crossing .fc-hint-or{margin-left:2px}@media(hover:none)and (pointer:coarse){.frugl-crossing .fc-key{display:none}.frugl-crossing .fc-hint-or{margin-left:0;font-size:0}.frugl-crossing .fc-hint-or:before{content:"Swipe";font-size:11px}}@media(prefers-reduced-motion:reduce){.frugl-crossing .frog,.frugl-crossing .frog-inner{transition:none}.frugl-crossing .frog.hop .frog-inner,.frugl-crossing .frog.win .frog-inner{animation:none}}