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