/* THE FLOOR — the live wall of Infi chats (web/js/work/floor.js). Lives in the desk's 720×396 monitor area.
   Prefix fl-. Reading text ≥ 18 px, tap targets ≥ 48 px. Uses the desk tokens (--sd-*) with fallbacks so the
   lab page works too. Animations are compositor-friendly (opacity/transform); glows are pre-drawn on pseudo
   elements and only their opacity animates. `.fl.is-calm` (reduce motion) stops the loops. */

.fl {
  --ink: var(--sd-ink, #f8f5ff);
  --ink2: var(--sd-ink2, #ddd4f7);
  --ink3: var(--sd-ink3, #b1a6d8);
  --line: var(--sd-line, rgba(226, 214, 255, .15));
  --flag: var(--sd-flag, #ff4f74);
  --ok: var(--sd-ok, #3ddc97);
  --warn: var(--sd-warn, #ffc24b);
  --grad: var(--sd-grad, linear-gradient(100deg, #7c5cff 0%, #c04af2 52%, #ff5c9a 100%));
  --font: var(--sd-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif);
  position: absolute; inset: 0; overflow: hidden;
  font: 400 18px/1.3 var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
.fl [hidden] { display: none !important; }
.fl-grow { flex: 1; }

/* the control-room backdrop: deep purple, a faint camera-wall grid and scanlines */
.fl-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 120%, rgba(255, 79, 116, .10), transparent 60%),
    radial-gradient(70% 90% at 0% 0%, rgba(124, 92, 255, .30), transparent 62%),
    linear-gradient(165deg, #171030 0%, #110b24 60%, #160d28 100%); }
.fl-bg::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px); }
.fl.is-hot .fl-bg { background:
    radial-gradient(80% 70% at 50% 120%, rgba(255, 79, 116, .22), transparent 62%),
    radial-gradient(70% 90% at 0% 0%, rgba(124, 92, 255, .28), transparent 62%),
    linear-gradient(165deg, #1a0f2c 0%, #140a22 60%, #1d0c24 100%); }

/* ───────── header strip */
.fl-head { position: absolute; left: 0; right: 0; top: 0; height: 42px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: rgba(8, 5, 20, .35); }
.fl-live { display: inline-flex; align-items: center; gap: 8px; font: 850 18px/1 var(--font); letter-spacing: .1em; color: #fff; white-space: nowrap; }
.fl-live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--flag); box-shadow: 0 0 10px var(--flag); animation: fl-blink 1.4s steps(2, jump-none) infinite; }
@keyframes fl-blink { 50% { opacity: .25; } }
.fl-ver { font: 700 18px/1 var(--font); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.fl-count { font: 850 20px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-count.ok { color: var(--ok); } .fl-count.bad { color: var(--flag); } .fl-count.ff { color: var(--warn); }
.fl-count b { color: #fff; }
.fl-count.bump { animation: fl-bump .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes fl-bump { 30% { transform: scale(1.35); } }
.fl-hot { padding: 5px 10px; border-radius: 999px; font: 850 18px/1 var(--font); color: #fff; white-space: nowrap;
  background: rgba(255, 79, 116, .28); box-shadow: inset 0 0 0 2px var(--flag); animation: fl-beat .9s ease-in-out infinite; }
.fl-streak { padding: 5px 10px; border-radius: 999px; font: 850 18px/1 var(--font); color: #1b1438; background: var(--warn); white-space: nowrap; }
@keyframes fl-beat { 50% { transform: scale(1.07); } }

/* ───────── the wall */
.fl-grid { position: absolute; left: 8px; right: 8px; top: 50px; bottom: 8px; z-index: 1; display: grid; gap: 8px; }
.fl-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.fl-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.fl-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; }

.fl-slot { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px 9px; border-radius: 16px; cursor: pointer; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  box-shadow: inset 0 0 0 1.5px rgba(226, 214, 255, .13), 0 6px 16px rgba(0, 0, 0, .25);
  transition: transform .12s ease-out; }
/* the red heat that wells up from the bottom of a chat going wrong, and its pre-drawn glow */
.fl-slot::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(130% 95% at 50% 115%, rgba(255, 79, 116, .55), rgba(255, 79, 116, 0) 70%); transition: opacity .5s; }
.fl-slot::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  box-shadow: inset 0 0 0 3px #ff6f8c, inset 0 0 26px rgba(255, 79, 116, .55); }
.fl-slot.is-press { transform: scale(.975); }

.fl-s-top { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; padding-right: 22px; }
.fl-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 23px; line-height: 1; background: linear-gradient(135deg, #3b2b6b, #5a2c70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.fl-av.tier-pro { box-shadow: inset 0 0 0 2px #a78bfa; }
.fl-av.tier-ent { box-shadow: inset 0 0 0 2px #fbbf24; }
.fl-av.tier-ver { box-shadow: inset 0 0 0 2px #38bdf8, 0 0 10px rgba(56, 189, 248, .45); }
.fl-s-who { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; }
.fl-s-name { min-width: 0; font: 780 18px/1.15 var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-tier { flex: none; padding: 0 6px; border-radius: 6px; font: 780 18px/24px var(--font); white-space: nowrap; background: rgba(255, 255, 255, .09); color: var(--ink2); }
.fl-tier.tier-pro { background: rgba(167, 139, 250, .2); color: #ddd6fe; }
.fl-tier.tier-ent { background: rgba(251, 191, 36, .18); color: #fde68a; }
.fl-tier.tier-ver { background: rgba(56, 189, 248, .22); color: #bae6fd; }
.fl-s-label { position: absolute; right: 9px; top: 9px; font: 800 15px/1 var(--sd-mono, ui-monospace, monospace); color: rgba(177, 166, 216, .7); letter-spacing: .05em; }
/* tall cards (3 lines): name and tier stack */
.n3 .fl-s-who { flex-direction: column; align-items: stretch; gap: 3px; }
.n3 .fl-s-who .fl-tier { align-self: flex-start; }
.n3 .fl-s-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.12; }
.n3 .fl-av { width: 46px; height: 46px; font-size: 27px; }

/* chats about YOUR stuff (your secret app, your agent) wear a little 🤫 */
.fl-slot.is-mine .fl-av::after { content: '🤫'; position: absolute; right: -7px; bottom: -6px; font-size: 16px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.fl-slot.is-mine { background: linear-gradient(180deg, rgba(45, 212, 191, .12), rgba(255, 255, 255, .035)); }

/* the conversation: newest at the bottom, older lines fade off the top */
.fl-feed { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.fl-b { flex: none; max-width: 94%; padding: 6px 10px 7px; border-radius: 14px; font: 600 calc(18px * var(--k2, 1))/1.24 var(--font); }
.fl-b-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-word; }
.n4 .fl-b-t, .n6 .fl-b-t { -webkit-line-clamp: 2; }
.fl-b.u { align-self: flex-start; color: #1b1438; background: #f3efff; border-top-left-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.fl-b.i { align-self: flex-end; color: #fff; border-top-right-radius: 5px;
  background: linear-gradient(140deg, rgba(124, 92, 255, .62), rgba(192, 74, 242, .45)); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .35); }
.fl-b.s { align-self: center; max-width: 100%; padding: 4px 10px; border-radius: 10px; font-weight: 700; font-style: italic; color: var(--ink2);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(226, 214, 255, .25); }
.fl-b.in { animation: fl-pop .26s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fl-pop { from { transform: translateY(8px) scale(.94); opacity: 0; } }
.fl-b.bad.sent { background: linear-gradient(140deg, rgba(255, 79, 116, .7), rgba(192, 74, 242, .5)); box-shadow: inset 0 0 0 2px #ff7a95; }
.fl-b.fix { box-shadow: inset 0 0 0 2px var(--ok); background: linear-gradient(140deg, rgba(61, 220, 151, .35), rgba(124, 92, 255, .45)); }
.fl-b.fumble { opacity: .8; box-shadow: inset 0 0 0 2px var(--warn); }
/* Infi's bad reply typing itself out: bottom-anchored, so the newest words always show */
.fl-b.stream { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; max-height: calc(18px * 1.24 * 3 + 13px);
  background: linear-gradient(140deg, rgba(255, 79, 116, .62), rgba(192, 74, 242, .5)); box-shadow: inset 0 0 0 2px #ff7a95; }
.fl-sw { flex: none; }
.fl-b.stream .fl-b-t { display: inline; -webkit-line-clamp: unset; }
.n4 .fl-b.stream, .n6 .fl-b.stream { max-height: calc(18px * 1.24 * 2 + 9px); }
.is-brew .fl-b.stream { background: linear-gradient(140deg, rgba(124, 92, 255, .62), rgba(192, 74, 242, .45)); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .35); }
.fl-caret { display: inline-block; width: 9px; height: 18px; margin-left: 2px; vertical-align: -3px; background: #fff; animation: fl-caret .5s steps(2) infinite; }
@keyframes fl-caret { 50% { opacity: 0; } }
.fl-typing { flex: none; display: inline-flex; gap: 5px; padding: 9px 12px; border-radius: 14px; }
.fl-typing.u { align-self: flex-start; background: rgba(243, 239, 255, .9); border-top-left-radius: 5px; }
.fl-typing.i { align-self: flex-end; background: rgba(124, 92, 255, .5); border-top-right-radius: 5px; }
.fl-typing i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: fl-dot .9s ease-in-out infinite; }
.fl-typing.u i { background: #6d5bb0; }
.fl-typing i:nth-child(2) { animation-delay: .15s; } .fl-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fl-dot { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }

/* compact cards (4 and 6 lines): less chrome, more conversation */
.n4 .fl-slot, .n6 .fl-slot { padding: 6px 8px 7px; gap: 4px; border-radius: 14px; }
.n4 .fl-av, .n6 .fl-av { width: 32px; height: 32px; font-size: 19px; border-radius: 10px; }
.n4 .fl-b, .n6 .fl-b { padding: 4px 9px 5px; border-radius: 12px; }
.n4 .fl-feed, .n6 .fl-feed { gap: 4px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.n4 .fl-typing, .n6 .fl-typing { padding: 6px 10px; }
.n4 .fl-s-foot, .n6 .fl-s-foot { height: 26px; }
.n4 .fl-chip, .n6 .fl-chip { line-height: 25px; padding: 0 8px; }
.n4 .fl-s-label, .n6 .fl-s-label { top: 7px; right: 8px; }

/* footer: the keyword-filter chip and the heat bar */
.fl-s-foot { flex: none; display: flex; align-items: center; gap: 8px; height: 28px; }
.fl-chip { flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 820 18px/26px var(--font); padding: 0 9px; border-radius: 9px; }
.fl-chip:empty { display: none; }
.fl-chip.warn { color: #2a1a00; background: var(--warn); }
.fl-chip.go { color: #fff; background: var(--flag); box-shadow: 0 0 12px rgba(255, 79, 116, .6); animation: fl-beat .7s ease-in-out infinite; }
.fl-chip.calm { color: #06301f; background: var(--ok); }
.fl-chip.in { color: #04263a; background: #7dd3fc; }
.fl-heat { position: relative; flex: 1; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.fl-heat i { position: absolute; inset: 0; border-radius: 5px; transform-origin: 0 50%; transform: scaleX(.06);
  background: linear-gradient(90deg, #7c5cff, #a78bfa); transition: transform .45s linear, background .3s; }
.is-warn .fl-heat i { background: linear-gradient(90deg, #ffb13b, #ffd36b); }
.is-go .fl-heat i, .is-crit .fl-heat i { background: linear-gradient(90deg, #ff9a4f, #ff4f74); transition: none; }
.is-calm .fl-heat i { background: var(--ok); }

/* phases */
.fl-slot.is-warn { box-shadow: inset 0 0 0 2px rgba(255, 194, 75, .7), 0 0 18px rgba(255, 194, 75, .18), 0 6px 16px rgba(0, 0, 0, .25); }
.fl-slot.is-warn::before { opacity: .25; background: radial-gradient(130% 95% at 50% 115%, rgba(255, 194, 75, .5), rgba(255, 194, 75, 0) 70%); }
.fl-slot.is-go::before, .fl-slot.is-crit::before { opacity: calc(.35 + var(--h, .5) * .6); }
.fl-slot.is-go::after { animation: fl-throb 1s ease-in-out infinite; }
.fl-slot.is-crit::after { animation: fl-throb .45s ease-in-out infinite; }
.fl-slot.is-crit { animation: fl-shake .16s linear infinite; }
@keyframes fl-throb { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes fl-shake { 25% { transform: translate(1.5px, -1px) rotate(.3deg); } 75% { transform: translate(-1.5px, 1px) rotate(-.3deg); } }
.fl-slot.is-engaged { box-shadow: inset 0 0 0 2.5px #7dd3fc, 0 0 18px rgba(125, 211, 252, .3); }
.fl-slot.is-calm { box-shadow: inset 0 0 0 2px rgba(61, 220, 151, .7), 0 6px 16px rgba(0, 0, 0, .25); }
.fl-slot.is-ended > :not(.fl-over) { opacity: .4; transition: opacity .4s; }
.fl-slot.is-empty { cursor: default; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1.5px rgba(226, 214, 255, .1); }
.fl-slot.is-empty::before { display: none; }
.fl-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.fl-empty-t { font: 700 18px/1.2 var(--font); color: var(--ink3); }
.fl-empty-dots { display: flex; gap: 6px; }
.fl-empty-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); opacity: .5; animation: fl-dot 1.2s ease-in-out infinite; }
.fl-empty-dots i:nth-child(2) { animation-delay: .2s; } .fl-empty-dots i:nth-child(3) { animation-delay: .4s; }

/* one-shot motion */
.fl-slot.is-new { animation: fl-drop .46s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes fl-drop { from { transform: translateY(-22px) scale(.92); opacity: 0; } }
.fl-slot.is-nope { animation: fl-nope .32s ease-out; }
@keyframes fl-nope { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.fl-slot.is-land { animation: fl-land .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fl-land { from { transform: scale(1.06); } }
.fl-slot.is-ping .fl-s-top::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--flag); opacity: 0; pointer-events: none; animation: fl-ping .7s ease-out; }
@keyframes fl-ping { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(4); } }

/* stamps over a slot */
.fl-over { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; border-radius: inherit; }
.fl-over.on { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fl-over.win, .fl-over.lose, .fl-over.false { background: rgba(10, 6, 26, .5); }
.fl-stamp { padding: 4px 14px; border: 4px solid currentColor; border-radius: 10px; font: 900 28px/1.05 var(--font); letter-spacing: .06em;
  white-space: nowrap; background: rgba(10, 6, 26, .78); transform: rotate(-7deg); animation: fl-stamp .26s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fl-stamp { from { transform: rotate(-7deg) scale(2.1); opacity: 0; } }
.fl-over.win { color: var(--ok); } .fl-over.lose { color: var(--flag); } .fl-over.false { color: var(--warn); }
.fl-plus { font: 850 18px/1 var(--font); color: var(--ok); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.fl-liab { position: absolute; right: 8px; top: 8px; padding: 2px 8px; border-radius: 8px; font: 850 18px/24px var(--font); color: #2a1a00; background: var(--warn); }
.fl-ticker { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 9px 6px; display: flex; align-items: center; gap: 6px;
  font: 800 18px/1.2 var(--font); color: #fff; background: linear-gradient(90deg, #a5102c, #d9244a); box-shadow: 0 -2px 0 rgba(0, 0, 0, .3); }
.fl-ticker b { flex: none; padding: 1px 6px; border-radius: 5px; font: 900 15px/1.3 var(--font); letter-spacing: .06em; color: #a5102c; background: #fff; align-self: flex-start; margin-top: 2px; }
.fl-ticker span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.n3 .fl-ticker span { -webkit-line-clamp: 4; }
.fl-ended { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 12px; background: rgba(10, 6, 26, .7); }
.fl-ended span { font: 700 18px/1 var(--font); color: var(--ink2); }
.fl-ended b { font: 800 20px/1 var(--font); color: var(--warn); letter-spacing: .06em; }

/* "while you were away" + morning / closed curtain */
.fl-banner { position: absolute; left: 50%; top: 50px; z-index: 6; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font: 850 20px/1 var(--font); color: #06301f; background: var(--ok); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); animation: fl-down .35s cubic-bezier(.2, 1.5, .4, 1); }
.fl-banner.bad { color: #fff; background: var(--flag); }
@keyframes fl-down { from { transform: translate(-50%, -30px); opacity: 0; } }
.fl-curtain { position: absolute; left: 8px; right: 8px; top: 50px; bottom: 8px; z-index: 5; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: rgba(12, 8, 28, .9); box-shadow: inset 0 0 0 1.5px var(--line); }
.fl-cur-k { font: 850 18px/1 var(--font); letter-spacing: .24em; color: var(--warn); }
.fl-cur-big { font: 900 36px/1.05 var(--font); color: #fff; letter-spacing: -.01em; }
.fl-cur-s { font: 650 20px/1.3 var(--font); color: var(--ink2); max-width: 560px; }

/* ───────── the zoomed-in chat */
.fl-zoom { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(90% 80% at 20% 0%, rgba(124, 92, 255, .25), transparent 60%), linear-gradient(165deg, #1d1540 0%, #140d2c 100%); }
.fl-z-top { flex: none; height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(8, 5, 20, .35); }
.fl-av.big { width: 48px; height: 48px; font-size: 29px; border-radius: 14px; }
.fl-z-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fl-z-who b { font: 850 21px/1.1 var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
.fl-z-sub { display: flex; align-items: center; gap: 8px; }
.fl-z-line { font: 700 18px/24px var(--font); color: var(--ink3); }
.fl-z-fault { flex: none; padding: 6px 12px; border-radius: 999px; font: 850 18px/1 var(--font); color: #fff; white-space: nowrap;
  background: color-mix(in srgb, var(--fc, #ff4f74) 32%, transparent); box-shadow: inset 0 0 0 2px var(--fc, #ff4f74); }
.fl-z-fault.ok { --fc: #7dd3fc; }
.fl-z-strip { display: none; flex: none; height: 40px; align-items: center; gap: 10px; padding: 0 12px; background: rgba(8, 5, 20, .5); border-bottom: 1px solid var(--line); }
.fl-z-strip-t { font: 800 18px/1 var(--font); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fl-radar { flex: none; display: flex; gap: 6px; }
.fl-rd { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 800 16px/1 var(--sd-mono, ui-monospace, monospace);
  color: var(--ink3); background: rgba(255, 255, 255, .06); }
.fl-rd i { width: 10px; height: 10px; border-radius: 50%; background: rgba(177, 166, 216, .5); }
.fl-rd.is-warn i, .fl-rd.is-brew i { background: var(--warn); }
.fl-rd.is-go, .fl-rd.is-crit { color: #fff; background: rgba(255, 79, 116, .35); animation: fl-beat .6s ease-in-out infinite; }
.fl-rd.is-go i, .fl-rd.is-crit i { background: var(--flag); box-shadow: 0 0 8px var(--flag); }
.fl-rd.is-empty, .fl-rd.is-ended { opacity: .5; }
.fl-z-thread { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 14px;
  scrollbar-width: none; overscroll-behavior: contain; }
.fl-z-thread::-webkit-scrollbar { display: none; }
.fl-z-thread > :first-child { margin-top: auto; }
.fl-z-thread .fl-b { max-width: 78%; padding: 8px 13px 9px; border-radius: 16px; font: 600 calc(20px * var(--k, 1))/1.3 var(--font); }
.fl-z-thread .fl-b-t { display: block; -webkit-line-clamp: unset; }
.fl-z-thread .fl-b.s { font-size: 18px; }
.fl-b-who { display: block; margin-bottom: 3px; font: 850 18px/1.1 var(--font); color: rgba(255, 255, 255, .78); }
.fl-b-who:empty { display: none; }
.fl-b.draft { align-self: flex-end; color: #fff; border-top-right-radius: 5px; background: linear-gradient(140deg, rgba(255, 79, 116, .55), rgba(192, 74, 242, .4));
  outline: 2.5px dashed #ff8fa6; outline-offset: -2.5px; }
.fl-b.draft .fl-b-who { color: #ffd0da; }
.fl-b.draft.blocked .fl-b-t, .fl-b.struck .fl-b-t { text-decoration: line-through 2px rgba(255, 255, 255, .8); opacity: .55; }
.fl-b.draft.blocked { outline-color: var(--ok); background: rgba(80, 60, 120, .5); }
.fl-b.draft.blocked .fl-b-who { color: var(--ok); }
.fl-b.draft.fumbled { outline-color: var(--warn); }
.fl-b.draft.fumbled .fl-b-who { color: var(--warn); }
.fl-b.struck { opacity: .6; }

.fl-z-foot { flex: none; }
.fl-zoom.is-micro .fl-z-top, .fl-zoom.is-micro .fl-z-thread, .fl-zoom.is-micro .fl-z-foot { display: none; }
.fl-zoom.is-micro .fl-z-strip { display: flex; }
.fl-zmicro { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; }
.fl-zmicro .rx.rx-micro { border-radius: 0; }

/* a scripted choice instead of a microgame */
.fl-choice { padding: 10px 14px 12px; background: rgba(8, 5, 20, .55); border-top: 1px solid var(--line); }
.fl-choice-q { margin-bottom: 8px; font: 800 20px/1.2 var(--font); color: #fff; }
.fl-choice-row { display: flex; gap: 10px; }
.fl-opt { flex: 1; min-height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 12px; border-radius: 16px; cursor: pointer;
  font: 850 19px/1.15 var(--font); color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(226, 214, 255, .3), 0 4px 0 rgba(0, 0, 0, .3);
  transition: transform .08s; }
.fl-opt.is-press { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(226, 214, 255, .5), 0 1px 0 rgba(0, 0, 0, .3); }
.fl-opt.picked { background: var(--grad); box-shadow: inset 0 0 0 2px #fff; }

/* the outcome: a stamp slams in, then clears so the thread is readable; the verdict stays in the bar below */
.fl-z-stamp { position: absolute; left: 0; right: 0; top: 62px; bottom: 70px; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(55% 60% at 50% 50%, rgba(10, 6, 26, .82), rgba(10, 6, 26, 0));
  animation: fl-stampbox 1.5s ease-in both; }
@keyframes fl-stampbox { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.fl-z-stamp-i { padding: 6px 22px; border: 6px solid currentColor; border-radius: 14px; font: 900 54px/1 var(--font); letter-spacing: .06em; white-space: nowrap;
  transform: rotate(-6deg); background: rgba(10, 6, 26, .7); animation: fl-bigstamp .3s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fl-bigstamp { from { transform: rotate(-6deg) scale(2.4); opacity: 0; } }
.fl-z-stamp.win { color: var(--ok); } .fl-z-stamp.lose { color: var(--flag); } .fl-z-stamp.false { color: var(--warn); }
.fl-zoom.is-result .fl-z-foot { padding: 0; }
.fl-res { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 8px 12px 8px 14px; border-top: 1px solid var(--line); background: rgba(8, 5, 20, .6);
  animation: fl-up .3s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes fl-up { from { transform: translateY(24px); opacity: 0; } }
.fl-res-pill { flex: none; padding: 7px 12px; border-radius: 12px; font: 900 20px/1 var(--font); letter-spacing: .04em; white-space: nowrap; }
.fl-res.win .fl-res-pill { color: #06301f; background: var(--ok); }
.fl-res.lose .fl-res-pill { color: #fff; background: var(--flag); }
.fl-res.false .fl-res-pill { color: #2a1a00; background: var(--warn); }
.fl-res-note { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 750 19px/1.2 var(--font); color: #fff; }
.fl-res-tv { display: flex; align-items: flex-start; gap: 7px; }
.fl-res-tv b { flex: none; margin-top: 1px; padding: 1px 6px; border-radius: 5px; font: 900 15px/1.3 var(--font); color: #a5102c; background: #fff; }
.fl-res.lose .fl-res-note { color: #ffd0da; }
.fl-res-quip { font: italic 650 18px/1.2 var(--font); color: var(--ink2); }
.fl-back { flex: none; min-height: 54px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 16px; cursor: pointer;
  font: 850 20px/1 var(--font); color: #fff; background: var(--grad); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.fl-z-fault.win { --fc: #3ddc97; } .fl-z-fault.lose { --fc: #ff4f74; } .fl-z-fault.false { --fc: #ffc24b; }
.fl-zoom.res-win { box-shadow: inset 0 0 0 3px var(--ok); }
.fl-zoom.res-lose { box-shadow: inset 0 0 0 3px var(--flag); }
.fl-zoom.res-false { box-shadow: inset 0 0 0 3px var(--warn); }
.fl-zoom.fl-shake { animation: fl-shake .1s linear 4; }
.fl-confetti { position: absolute; left: 0; right: 0; top: 46%; height: 0; z-index: 6; pointer-events: none; }
.fl-confetti i { position: absolute; top: 0; width: 10px; height: 16px; border-radius: 3px; opacity: 0;
  animation: fl-conf 1.1s cubic-bezier(.15, .7, .4, 1) forwards; }
@keyframes fl-conf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 260px)) rotate(var(--r)); } }

/* reduce motion: no loops, no shakes */
.fl.is-still *, .fl.is-still *::before, .fl.is-still *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }