/* ---------- DONUT FLIGHT (v2: physics timeline + landing-or-water ending) ---------- */
.fl-stage{background:#5fa8f2}
#fl-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.fl-hud{position:absolute;left:16px;top:14px;z-index:3;display:flex;gap:10px;pointer-events:none}
.fl-hud > div{background:#0a1631e0;border:1px solid #ffffff26;border-radius:14px;padding:8px 16px 10px;min-width:150px}
.fl-hud small{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#bcd0f5;white-space:nowrap}
.fl-hud b{display:block;font-size:38px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.fl-hud .m b{min-width:5.2ch}
.fl-hud.hot .m b{color:#ffe08a;text-shadow:0 0 14px #ffd16655}
.fl-hud.hot .r small:after{content:" · at risk";color:#ffb3c0}
.fl-hud.won .r{background:#0f5a3ae6;border-color:#35c47c}
.fl-hud.won .r b{color:#9dffcf}
.fl-hud.short .r b{color:#ffe08a}
.fl-hud.lost .r{background:#5a1020e6;border-color:#e8405c}
.fl-hud.lost .r b{color:#ffb3c0}
.fl-hud.lost .m b{color:#a9b6cc;text-decoration:line-through;text-decoration-thickness:3px}
#fl-m.f-add{animation:flAdd .45s ease-out}
#fl-m.f-mul{animation:flMul .5s ease-out}
#fl-m.f-half{animation:flHalf .5s ease-out}
@keyframes flAdd{0%{transform:scale(1.18);color:#ffd166}100%{transform:none}}
@keyframes flMul{0%{transform:scale(1.25);color:#c7a6ff}100%{transform:none}}
@keyframes flHalf{0%{transform:translateX(-4px);color:#ff6b81}25%{transform:translateX(4px)}50%{transform:translateX(-2px)}100%{transform:none}}
.fl-hud b{transform-origin:left center}
.fl-state{position:absolute;right:16px;top:14px;z-index:3;font-size:14px;font-weight:800;letter-spacing:.04em;color:#fff;background:#0a1631e0;border:1px solid #ffffff26;border-radius:99px;padding:7px 14px;pointer-events:none}
.fl-state.launch,.fl-state.fly{background:#173a7ae6;border-color:#65c7ff}
.fl-state.landed{background:#0f5a3ae6;border-color:#35c47c}
.fl-state.splashed{background:#5a1020e6;border-color:#e8405c}
.fl-route{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;width:min(520px,calc(100% - 32px));pointer-events:none;
  background:linear-gradient(180deg,#102c4bd9,#091b32e8);border:1px solid #bce6ff30;border-radius:99px;padding:13px 18px;box-shadow:0 4px 14px #04142c30,inset 0 1px #ffffff08;backdrop-filter:blur(8px)}
.fl-route .bar{position:relative;height:5px;border-radius:99px;background:#6a98c133;box-shadow:inset 0 1px 2px #04132655}
#fl-route-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#4797ed,#9ce9ff);box-shadow:0 0 7px #63c8ff22}
#fl-route-dock{position:absolute;top:-2px;bottom:-2px;border-radius:99px;background:linear-gradient(180deg,#a0e8c0,#49b995);box-shadow:inset 0 1px #e7fffba8}
#fl-route-me{position:absolute;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:50%;background:#e5f7ff;border:3px solid #358de0;box-shadow:0 0 0 2px #0b2440,0 1px 6px #06182f80}
#fl-route-me:after{content:"";position:absolute;left:3px;top:2px;width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;border-left:5px solid #2169ab}
.fl-stage .outcome{bottom:84px}
.fl-opts{margin-top:12px}
.fl-opts .seg{width:100%}
.fl-opts .seg button{font-size:14px;white-space:nowrap;padding:0 8px;flex:1}
.fl-legend{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.fl-legend .r{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:var(--inset);border:1px solid var(--border)}
.fl-legend .ico{width:40px;height:40px;flex:none;display:grid;place-items:center}
.fl-legend .ico svg{width:38px;height:38px}
.fl-legend .ico img{width:40px;height:auto}
.fl-legend b{display:block;font-size:14.5px}
.fl-legend span:not(.ico){display:block;font-size:13px;color:var(--muted)}
.fl-legend em{font-style:normal;font-weight:800;color:var(--text)}
.fl-legend .add b{color:#ffe08a}.fl-legend .mul b{color:#d9c2ff}.fl-legend .half b{color:#ffb3c0}
.fl-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.fl-note b{color:var(--text)}
.fl-recent{margin-top:14px}
.fl-recent .lbl{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fl-recent table{width:100%;border-collapse:collapse;font-size:13px}
.fl-recent th{font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;padding:0 4px 4px}
.fl-recent th:first-child,.fl-recent td:first-child{text-align:left}
.fl-recent td{padding:5px 4px;border-top:1px solid var(--border);text-align:right;white-space:nowrap}
.fl-recent tr.w .n{color:var(--win,#35c47c)}.fl-recent tr.l .n,.fl-recent tr.s .n{color:#ff8fa3}
.fl-recent tr.s td:first-child{color:#ff8fa3}.fl-recent tr.w td:first-child{color:#7dffc4}
.fl-recent .none{text-align:center!important;color:var(--muted);padding:10px}
@media (max-width:900px){
  .fl-hud{left:10px;top:10px;gap:6px}
  .fl-hud > div{min-width:0;padding:5px 10px 6px}
  .fl-hud small{font-size:10.5px}
  .fl-hud b{font-size:24px}
  .fl-state{right:10px;top:10px;font-size:12px;padding:5px 10px}
  .fl-route{bottom:8px;padding:12px 16px}
  .fl-stage .outcome{bottom:66px}
}
@media (max-width:480px){ .fl-state{top:auto;bottom:62px;right:10px} }
/* the stage fills the whole game box height (the control column can be taller than --stage-h) */
.fl-game .fl-stage{height:auto;min-height:var(--stage-h);align-self:stretch}
@media (max-width:900px){
  .fl-stage .outcome{max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:center;row-gap:2px;gap:8px;padding:8px 14px 8px 10px;font-size:16px}
  .fl-stage .outcome .det{white-space:normal;text-align:center;font-size:12.5px;line-height:1.3;flex-basis:100%}
}
@media (max-width:480px){ .fl-stage .outcome{border-radius:16px;bottom:104px} }
/* compact key inside the stage (moved out of the side panel) */
.fl-key{position:absolute;left:16px;top:104px;z-index:3;display:flex;gap:6px;pointer-events:none}
.fl-key .k{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#cfe0ff;background:#0a1631c7;border:1px solid #ffffff1f;border-radius:8px;padding:4px 10px 4px 5px;white-space:nowrap}
.fl-key .k b{font-weight:800}
.fl-key .k.add b{color:#ffe08a}.fl-key .k.mul b{color:#d9c2ff}.fl-key .k.half b{color:#ffb3c0}
.fl-key svg{width:20px;height:20px}
.fl-key img{width:26px;height:auto}
@media (max-width:900px){ .fl-key{top:74px;left:10px} .fl-key .k{font-size:11px;padding:3px 8px 3px 4px} }
@media (max-width:480px){ .fl-key{display:none} }