/* FROSTED HEIGHTS: .fh-* only. Bakery art: glazed blue frosting (vertical gradient + sheen + dripping scalloped edge), golden baked edges, crisp sprinkles. */
.fh-ctrl .lbl{margin-top:16px}
.fh-lblnote{font-size:12.5px;font-weight:600;color:var(--dim)}
/* Normal | Hard: the site's .seg control; Hard's underline is gold */
.fh-seg button[data-r="d"].on{box-shadow:inset 0 1px 0 #ffffff14,inset 0 -2px 0 var(--gold)}
/* the odds + next-floor returns: small muted text, the selected difficulty's line brighter */
.fh-odds{display:grid;gap:1px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--dim);line-height:1.45}
.fh-odds b{color:var(--muted);font-weight:800}
.fh-odds > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-odds[data-sel="c"] .o-c,.fh-odds[data-sel="d"] .o-d{color:var(--muted)}
.fh-odds[data-sel="c"] .o-c b,.fh-odds[data-sel="d"] .o-d b{color:var(--cyan)}
.fh-ctrl .btn .tnum{font-weight:800}
/* Collect: bright accent blue whenever collecting is possible (disabled = the normal .btn:disabled look) */
.btn.pri.fh-collect{background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 8px 24px -8px #4285ffcc}
.btn.pri.fh-collect:hover:not(:disabled){background:#5b97ff;box-shadow:inset 0 1px 0 #ffffff50,0 10px 28px -8px #4285ff}
.btn.pri.fh-collect:active:not(:disabled){background:var(--accent-lo)}

/* stage: a sky bakery */
.fh-stage{display:flex;flex-direction:column;padding:14px 16px 10px;
  background:radial-gradient(ellipse 60% 40% at 18% 22%,#2b5aa833,transparent 70%),radial-gradient(ellipse 50% 35% at 85% 60%,#3a7ad633,transparent 70%),
    linear-gradient(180deg,#183a74 0%,#122c5c 45%,#0b1d40 100%)}
.fh-stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse 90px 26px at 12% 30%,#ffffff14 60%,transparent 62%),radial-gradient(ellipse 120px 30px at 86% 18%,#ffffff12 60%,transparent 62%),
    radial-gradient(ellipse 70px 20px at 80% 72%,#ffffff0f 60%,transparent 62%),radial-gradient(ellipse 100px 26px at 16% 78%,#ffffff0c 60%,transparent 62%)}
.fh-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(520px,100%);margin:0 auto 6px;flex:none;position:relative;z-index:30}
.fh-hc{background:#0a1631d0;border:1px solid #ffffff17;border-radius:12px;padding:6px 10px 7px;text-align:center;min-width:0;transition:border-color .2s,background .2s}
.fh-hc small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-hc b{display:block;font-size:20px;font-weight:800;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-hc.ret.on{border-color:#2fe08f66;background:#0b2a24d0}
.fh-hc.ret.on b{color:var(--win)}
.fh-hc.ret.bust{border-color:#ff547066;background:#2a0e1ad0}
.fh-hc b.l{color:var(--lose)}
.fh-hc.ret.bump b{animation:fh-bump .35s ease-out}
@keyframes fh-bump{40%{transform:scale(1.12)}}

.fh-scene{position:relative;flex:1;min-height:0;overflow:hidden}
/* positions are never transitioned: every draw snaps all parts to the same formula (see yOf in frosted.js);
   the only shelf motion is the explicit .rise keyframe played after a climb */
.fh-world{position:absolute;inset:0}
.fh-world > *{position:absolute}
.fh-world.compact .fh-fut,.fh-world.compact .fh-info{transition:bottom .35s ease}
@media(prefers-reduced-motion:reduce){.fh-world.compact .fh-fut,.fh-world.compact .fh-info{transition:none}}
.fh-world [hidden]{display:none!important}
.fh-base{filter:drop-shadow(0 10px 12px #0007)}
.fh-base svg{display:block;height:100%}

/* donut layers */
.fh-layer{pointer-events:none;filter:drop-shadow(0 3px 0 #0003)}
.fh-layer svg{display:block}
.fh-layer.drop{animation:fh-drop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes fh-drop{0%{opacity:0;transform:translateY(8px) scale(.96)}55%{opacity:1;transform:translateY(3px) scaleY(.96) scaleX(1.02)}100%{transform:none}}
.fh-layer.fall{animation:fh-fall .7s cubic-bezier(.5,0,.9,.6) var(--dl,0ms) forwards}
@keyframes fh-fall{20%{transform:translate(calc(var(--dx) * .2),-6px) rotate(calc(var(--rot) * .3))}100%{opacity:0;transform:translate(var(--dx),380px) rotate(var(--rot))}}
.fh-layer.ship,.fh-crown.ship,.fh-box.ship{transition:transform .55s cubic-bezier(.6,0,.8,.4),opacity .55s;transform:translateX(130vw)}
/* after the round: the built floors stay as a faint record so the route can be read */
.fh-world.settled .fh-layer{opacity:.28;filter:grayscale(.5)}

/* floor numbers beside floors not yet built */
.fh-info{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:12px;font-weight:800;color:var(--dim);pointer-events:none;z-index:40}
.fh-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#0a1631c0;border:1px solid #ffffff1a;font-size:12px;color:var(--muted)}

/* future floors: covered, inactive, all the same */
.fh-fut{display:flex;align-items:center;justify-content:center;gap:12%;border:1.5px dashed #9fc4ff2e;border-radius:99px;background:#0a163126;pointer-events:none}
.fh-cover{position:relative;width:min(28px,18%);height:60%;max-height:16px;flex:none}
.fh-cover i{display:block;width:100%;height:100%;border-radius:14px 14px 3px 3px;background:#2a4f8f80;box-shadow:0 3px 0 -1px #1d3a6e80;transition:opacity .24s,transform .3s}
.fh-cover svg{position:absolute;width:25px;height:25px;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .24s,transform .34s cubic-bezier(.2,.9,.3,1.25)}
.fh-cover.bomb i{opacity:0;transform:scale(.7)}
.fh-cover.bomb svg{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* compact result row: result pill + reveal toggle (only after a settled round) */
.fh-after{display:none;align-items:center;justify-content:center;gap:6px 10px;flex-wrap:wrap;margin:0;position:absolute;right:12px;bottom:12px;z-index:35;max-width:calc(100% - 24px)}
.fh-stage.done .fh-after{display:flex}
.fh-stage .fh-after .outcome{position:static;transform:none;opacity:0;font-size:14.5px;gap:8px;padding:4px 12px 4px 5px;box-shadow:none;max-width:100%}
.fh-stage .fh-after .outcome.on{opacity:1;transform:none}
.fh-stage .fh-after .outcome .tag{font-size:11px;padding:3px 8px}
.fh-stage .fh-after .outcome .det{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fh-revtog{display:flex;align-items:center;gap:8px;background:#0a1631e0;border:1px solid #ffffff1c;border-radius:99px;padding:3px 3px 3px 12px;max-width:100%}
.fh-revtog[hidden]{display:none}
.fh-revtog .lb{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fh-revtog .sg{display:flex;gap:2px;flex:none}
@media (max-width:520px){ .fh-revtog .lb .long{display:none} }
.fh-revtog button{height:30px;padding:0 11px;border:0;border-radius:99px;background:none;color:var(--muted);font-size:13px;font-weight:800;cursor:pointer}
.fh-revtog button:hover{color:var(--text)}
.fh-revtog button.on{background:var(--control-hi);color:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
.fh-revtog button[data-v="d"].on{box-shadow:inset 0 -2px 0 var(--gold)}

/* active floor: floating serving shelf */
.fh-shelf{z-index:30;display:flex;flex-direction:column;align-items:stretch;transition:opacity .3s}
.fh-shelf.rise{animation:fh-rise .4s cubic-bezier(.3,.9,.3,1.1)}
@keyframes fh-rise{from{opacity:.7;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fh-shelf.away{opacity:0;transition:opacity .25s}
.fh-trays{flex:1;display:flex;justify-content:center;align-items:flex-end;gap:10px;padding:8px 6px 0;min-height:0}
.fh-plank{height:14px;flex:none;border-radius:8px;background:linear-gradient(180deg,#f2c26b 0 45%,#c98a3c 45%);box-shadow:0 -4px 0 #4d8df0 inset,0 14px 22px -8px #000c}
.fh-shelf.active .fh-plank{box-shadow:0 -4px 0 #4d8df0 inset,0 14px 22px -8px #000c,0 0 0 2px #65c7ff66,0 0 34px -6px #65c7ff}
.fh-shelf.crack .fh-plank{animation:fh-shake .35s linear}
@keyframes fh-shake{20%{transform:translateX(-5px) rotate(-1deg)}45%{transform:translateX(4px) rotate(1deg)}70%{transform:translateX(-2px)}}

/* trays: identical buttons; nothing about a tray's contents exists in the DOM until it is opened */
.fh-tray{position:relative;width:var(--tw);height:var(--th);flex:none;border:0;padding:0;background:none;cursor:pointer;border-radius:14px;outline:none;-webkit-tap-highlight-color:transparent}
.fh-tray:disabled{cursor:default}
.fh-tray:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.fh-tsvg{width:100%;height:100%;display:block;overflow:visible}
.fh-lid .dome{fill:#3d7be0}.fh-lid .band{fill:#3570d2}.fh-lid .rim{fill:#2a5bb5}
.fh-shelf.rec-d .fh-lid .dome{fill:#2c55b0}.fh-shelf.rec-d .fh-lid .band{fill:#f2c26b}.fh-shelf.rec-d .fh-lid .rim{fill:#1d3f86}
.fh-lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .15s ease-out,filter .15s}
.fh-shelf:not(.active) .fh-tray:not(.open) .fh-lid{filter:saturate(.7) brightness(.8)}
@media (hover:hover){ .fh-tray:not(:disabled):hover .fh-lid{transform:translateY(-5px);filter:brightness(1.15)} }
.fh-tray:not(:disabled):active .fh-lid{transform:translateY(1px)}
.fh-tray.open .fh-lid{animation:fh-lid .4s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes fh-lid{0%{transform:none;opacity:1}40%{transform:translateY(-22px) rotate(-10deg);opacity:1}100%{transform:translate(-14px,-40px) rotate(-22deg);opacity:0}}
.fh-tray.open .fh-dn{animation:fh-pop .42s cubic-bezier(.25,1.5,.5,1) .08s both}
@keyframes fh-pop{0%{opacity:0;transform:translateY(8px) scale(.7)}100%{opacity:1;transform:none}}
.fh-dn,.fh-brk{transform-box:fill-box;transform-origin:50% 100%}
.fh-tray.broken .fh-plate{display:none}
.fh-tray.broken .fh-brk .hl{animation:fh-split-l .45s ease-out forwards;transform-box:fill-box;transform-origin:100% 100%}
.fh-tray.broken .fh-brk .hr{animation:fh-split-r .45s ease-out forwards;transform-box:fill-box;transform-origin:0 100%}
@keyframes fh-split-l{to{transform:translate(-4px,4px) rotate(-9deg)}}
@keyframes fh-split-r{to{transform:translate(4px,5px) rotate(8deg)}}
.fh-tray.hit{border-radius:16px;background:radial-gradient(ellipse at 50% 80%,#ff547055,transparent 70%)}
.fh-tray.pick.fresh{background:radial-gradient(ellipse at 50% 80%,#65c7ff40,transparent 70%)}
.fh-tray.ghost{opacity:.42}
.fh-tray.ghost .fh-lid{animation-duration:.25s}
.fh-tray.instant .fh-lid{animation:none;opacity:0}
.fh-tray.instant .fh-dn{animation:none}
.fh-tray.instant .fh-brk .hl,.fh-tray.instant .fh-brk .hr{animation-duration:.01ms}
.fh-tray.enter:not(.open) .fh-lid{animation:fh-in .32s ease-out}
@keyframes fh-in{0%{opacity:0;transform:translateY(-14px)}100%{opacity:1;transform:none}}

/* Completed tower: gold topper, gentle lift, one contained sprinkle burst. */
.fh-crown{z-index:25;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 0 #81552766)}
.fh-crown svg{width:100%;height:100%;display:block;overflow:visible}
.fh-crown.on{opacity:1;animation:fh-topper .65s cubic-bezier(.2,.8,.3,1) both}
.fh-crown.ship{animation:none}
.fh-crown.fading{animation:fh-crown-out .28s ease-in both}
@keyframes fh-crown-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.94)}}
@keyframes fh-topper{0%{opacity:0;transform:translateY(-45px) rotate(-9deg) scale(.7)}65%{opacity:1;transform:translateY(3px) rotate(3deg) scale(1.04)}100%{transform:none}}
.fh-celebration{width:0;z-index:24;pointer-events:none;visibility:hidden}
.fh-celebration>b{position:absolute;bottom:80px;left:0;transform:translateX(-50%);white-space:nowrap;font-size:12px;letter-spacing:.14em;color:#ffe6a2;text-shadow:0 2px 10px #09182e;opacity:0}
.fh-victory-halo{position:absolute;width:360px;height:360px;left:-180px;bottom:-180px;border-radius:50%;background:radial-gradient(circle,#ffd36c26,transparent 68%);opacity:0}
.fh-celebration>i{position:absolute;left:-3px;bottom:20px;width:6px;height:12px;border-radius:3px;background:var(--color);opacity:0}
.celebrating .fh-celebration{visibility:visible}
.celebrating .fh-celebration>i{animation:fh-sprinkle 1.2s ease-out var(--delay) both}
.celebrating .fh-celebration>b{animation:fh-complete 1.4s ease both}
.celebrating .fh-victory-halo{animation:fh-halo 1.4s ease both}
.celebrating .fh-layer{animation:fh-tower-lift 1.3s ease-in-out;filter:drop-shadow(0 3px 0 #0003)}
@keyframes fh-tower-lift{0%,100%{transform:none}38%{transform:translateY(-8px)}65%{transform:translateY(-2px)}}
@keyframes fh-sprinkle{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@keyframes fh-complete{0%,100%{opacity:0}22%,82%{opacity:1}}
@keyframes fh-halo{0%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.2)}}

/* delivery box */
.fh-box{z-index:50;display:none;pointer-events:none}
.fh-box.in{display:block}
.fh-box-body{position:absolute;inset:0;align-content:center;gap:10px;border-radius:8px 8px 6px 6px;background:linear-gradient(90deg,#d9e8ff 0 46%,#f2c26b 46% 54%,#d9e8ff 54%);
  box-shadow:inset 0 -10px 0 #b9cff2,0 16px 26px -10px #000c;clip-path:inset(100% 0 0 0);animation:fh-box-up .38s cubic-bezier(.3,.8,.3,1) forwards;display:grid;place-items:center}
@keyframes fh-box-up{to{clip-path:inset(0 0 0 0)}}
/* a glaze shine sweeps across the box the moment the donuts are packaged */
.fh-box-body{overflow:hidden}
.fh-box-body::after{content:"";position:absolute;top:0;bottom:0;left:-55%;width:45%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,#ffffffcc 50%,transparent);transform:skewX(-16deg);animation:fh-box-shine .7s ease-out .46s}
@keyframes fh-box-shine{0%{left:-55%;opacity:0}28%{opacity:.85}100%{left:120%;opacity:0}}
.fh-box-mark{width:44px;height:44px;border-radius:50%;justify-self:center;background:radial-gradient(circle,#d9e8ff 0 30%,#4d8df0 31% 70%,transparent 71%);box-shadow:0 0 0 4px #ffffffaa}
.fh-box.small .fh-box-mark{display:none}
.fh-box-tag{justify-self:center;background:#fff;color:#0b1d40;font-weight:800;font-size:15px;padding:4px 10px;border-radius:6px;box-shadow:0 2px 0 #0002;opacity:0;animation:fh-tag .2s .38s forwards}
@keyframes fh-tag{to{opacity:1}}
.fh-box-lid{position:absolute;left:-7px;right:-7px;top:-10px;height:16px;border-radius:6px 6px 3px 3px;background:#b9cff2;box-shadow:inset 0 -3px 0 #9db8e6;
  opacity:0;transform:translateY(-34px);animation:fh-lid-close .24s .3s cubic-bezier(.4,0,.6,1.4) forwards}
@keyframes fh-lid-close{0%{opacity:1;transform:translateY(-34px)}100%{opacity:1;transform:none}}

.fh-dock{display:none}
.fh-stage .outcome{bottom:auto;top:66px;z-index:45}
/* phones: the stage dock mirrors the Normal | Hard bar + Collect so both stay on screen with the active floor */
.fh-dock .seg{padding:3px}
.fh-dock .seg button{height:34px;font-size:14px}
.fh-dock .fh-odds{margin:3px 0 6px;font-size:11.5px;text-align:center}
.fh-dock .fh-odds[data-sel="c"] .o-d,.fh-dock .fh-odds[data-sel="d"] .o-c{display:none}

@media (max-width:900px){
  .fh-stage{height:min(600px,calc(100svh - 150px));min-height:500px;padding:10px 8px 8px}
  .fh-hud{gap:6px;margin-bottom:4px}
  .fh-hc{padding:5px 6px}
  .fh-hc small{font-size:10.5px;letter-spacing:.04em}
  .fh-hc b{font-size:17px}
  .fh-dock{display:block;flex:none;padding-top:8px}
  .fh-dock .btn.block{height:50px}
  .fh-num{width:20px;height:20px;font-size:11px}
  .fh-stage .outcome{top:58px;max-width:calc(100% - 20px);gap:8px;padding:8px 14px 8px 10px;font-size:16px}
  .fh-stage .outcome .det{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .fh-world,.fh-shelf{transition:none}
  .celebrating .fh-layer,.fh-crown.on{animation:none}
  .celebrating .fh-celebration>i,.celebrating .fh-victory-halo{display:none}
  .celebrating .fh-celebration>b{animation:none;opacity:1}
}
.fh-stats[hidden]{display:none}