/* Baton Corp interface, round 2: the BATON CLUB identity (docs/ART.md). The company's internal dashboard, played straight.
   Three materials: BLACK (the suit: every plate), LACQUER (the shaft: what is read first), GRIP (the green rubber handle:
   what you press or hold). One lacquer plate and one green control per view; never yellow.
   Everything is drawn on a 1920 x 1080 design canvas and zoomed by --s (src/ui/dom.js). System fonts only.
   The skin comes twice. `.bf.art`: the generated parts of assets/ui (src/ui/art.js writes their border-image rules from
   the manifest and one --im-* property per single image). `.bf.css`: the same parts in plain CSS, used when there is no
   manifest (or ?art=0). Rules without either class are layout and type, shared by both. */

#hud, #menu, #loading { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#hud { z-index: 10; }
#menu { z-index: 20; }
#loading { z-index: 30; }

.bf {
  --s: 1;
  --bg: #0E0B0B; --bg1: #141010; --bg2: #1A1515; --bg3: #2A2424; --bg4: #3A3333;
  --glass: rgba(26, 21, 21, .92); --glass-hi: rgba(20, 16, 16, .965);
  --hair: rgba(248, 248, 246, .10); --hair2: rgba(248, 248, 246, .19); --hair3: rgba(248, 248, 246, .36);
  --ink: #F8F8F6; --ink2: #CFCDCA; --mute: #9C9794; --dim: #716C69;
  --paper: #E9E8E7; --paper2: #DAD9D8; --pink: #1A1515; --pmute: #5E5956;
  --a: #14A745; --a2: #19B84D; --a7: #0F822F; --a9: #086A21; --a-ink: #0E0B0B; --a-soft: rgba(20, 167, 69, .16);
  --g: #40DB6E; --g-soft: rgba(64, 219, 110, .15);
  --r: #FF5142; --r-soft: rgba(255, 81, 66, .17); --r-deep: #B3271D;
  --w: #EA9B62; --w-soft: rgba(234, 155, 98, .16); --gold: #DCAA68;
  --lacquer: linear-gradient(180deg, #FFFFFF 0%, #F3F2F0 32%, #E9E8E7 56%, #D6D5D3 100%);
  --rubber: linear-gradient(180deg, #1DC255 0%, #14A745 52%, #0F8F39 100%);
  --ribs: repeating-linear-gradient(90deg, #40DB6E 0 1px, #14A745 1px 4px, #086A21 4px 6px);
  --f: "Helvetica Neue", "Arial Nova", Arial, "Segoe UI", sans-serif;
  --fd: "Avenir Next Condensed", "DIN Condensed", "HelveticaNeue-CondensedBold", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --fm: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs: Georgia, "Times New Roman", serif;
  --sh: 0 14px 34px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .34);
  --ease: cubic-bezier(.2, .8, .2, 1);
  zoom: var(--s);
  font: 400 15px/1.35 var(--f); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .003em;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: default;
}
.bf.glass { --glass: rgba(26, 21, 21, .68); }
.bf *, .bf *::before, .bf *::after { box-sizing: border-box; }
.bf button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.bf button:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
.bf .hide { display: none !important; }
.bf b { font-weight: 700; }
.bf img { display: block; -webkit-user-drag: none; }

/* an in-play plate: black leather, a hairline, a shadow. Text never sits on the scene itself. */
.bf .card { border: 1px solid transparent; border-radius: 12px; box-shadow: var(--sh); }
.bf.css .card { background: var(--glass); border-color: var(--hair); }
.bf.css.glass .card { -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }

/* icons: an inline SVG stroke, a moulded glyph (a mask that takes currentColor) or a produced picture */
.bf .i { display: inline-grid; width: 1em; height: 1em; font-size: 18px; flex: none; }
.bf .i.g { background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.bf .i.pic { background: #141010 center / cover no-repeat; border-radius: 22%; }
.bf .ic { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bf .ic .f { fill: currentColor; fill-opacity: .17; }
.bf .ic .s { fill: currentColor; stroke: none; }
.bf .shot { display: block; background: #141010 center / cover no-repeat; flex: none; }
.bf .mark-svg, .bf .mark-img { display: block; width: 100%; height: 100%; }
.bf .mark { display: inline-block; width: 20px; height: 20px; flex: none; }

.bf .lab { font: 700 11px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.bf .good { color: var(--g); } .bf .bad { color: var(--r); } .bf .warn { color: var(--w); }

/* key-caps: moulded keys; the first key of a prompt is green; the mouse buttons are a mouse */
.bf .kc { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px 3px; border: 1px solid transparent; border-radius: 5px;
  font: 700 12px/1 var(--f); letter-spacing: .02em; color: var(--ink); white-space: nowrap; flex: none; }
.bf .kc.pri { color: #0E0B0B; }
.bf .kc.ms { width: 19px; min-width: 19px; height: 25px; padding: 0; border: 0; background: var(--im-mouse-l) center / contain no-repeat; filter: brightness(1.75) drop-shadow(0 0 .6px rgba(248, 248, 246, .8)); }
.bf .kc.ms.r { background-image: var(--im-mouse-r); }
.bf.css .kc { padding-bottom: 0; background: var(--bg3); box-shadow: inset 0 0 0 1px var(--hair2), 0 2px 0 #000; }
.bf.css .kc.pri { background: var(--a); box-shadow: 0 2px 0 var(--a9); }

/* small meters stay thin lines; progress that matters is a baton that grows (.bbar) */
.bf .hbar { display: block; position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(248, 248, 246, .16); overflow: hidden; }
.bf .hbar > i { position: absolute; inset: 0; background: var(--a); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform .3s var(--ease); }
.bf .hbar.g > i { background: var(--g); } .bf .hbar.r > i { background: var(--r); } .bf .hbar.w > i { background: var(--ink); } .bf .hbar.o > i { background: var(--w); }
.bf .bbar { display: block; position: relative; flex: 1; height: 8px; border: 1px solid transparent; border-radius: 4px; }
.bf .bbar > i { position: absolute; left: -1px; top: -1px; bottom: -1px; width: calc(28px + (100% - 26px) * var(--f, 0)); border: 1px solid transparent; border-radius: 4px; transition: width .35s var(--ease); }
.bf .bbar.big { height: 12px; border-radius: 6px; }
.bf .bbar.big > i { width: calc(42px + (100% - 40px) * var(--f, 0)); border-radius: 6px; }
.bf.css .bbar { background: #0E0B0B; box-shadow: inset 0 1px 2px #000, 0 1px 0 var(--hair); }
.bf.css .bbar > i { background: var(--lacquer); }
.bf.css .bbar > i::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; border-radius: 4px 2px 2px 4px; background: var(--ribs); }
.bf.css .bbar.big > i::before { width: 40px; border-radius: 6px 2px 2px 6px; }

.bf .ring { position: relative; display: block; width: 28px; height: 28px; flex: none; }
.bf .ring .rg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.bf .ring circle { fill: none; stroke-width: 2.4; }
.bf .ring .trk { stroke: rgba(14, 11, 11, .9); }
.bf .ring .arc { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100px * (1 - var(--f, 1))); }
.bf .ring > .i, .bf .ring > .num { position: absolute; inset: 0; display: grid; place-items: center; margin: auto; }

.bf .pt { position: relative; display: block; overflow: hidden; background: radial-gradient(120% 95% at 50% 18%, #453d3d, #1A1515 72%); flex: none; }
.bf .pt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transform: scale(1.18); transform-origin: 50% 20%; }
.bf .pt.mono { background: hsl(var(--h, 140) 12% 26%); }
.bf .pt-m { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1em/1 var(--f); color: rgba(248, 248, 246, .86); letter-spacing: .02em; }
/* the portrait in the lacquer ring (the target card) */
.bf .pring { position: relative; width: 58px; height: 58px; flex: none; display: grid; place-items: center; }
.bf .pring .pt { width: 43px; height: 43px; border-radius: 50%; font-size: 15px; }
.bf .pring::after { content: ''; position: absolute; inset: 0; background: var(--im-ring-portrait) center / contain no-repeat; pointer-events: none; }
.bf.css .pring::after { inset: 6px; border-radius: 50%; background: none; box-shadow: 0 0 0 2px var(--a), 0 0 0 6px var(--paper), 0 3px 8px 6px rgba(0, 0, 0, .4); }

@keyframes bf-blink { 50% { opacity: .25; } }
@keyframes bf-in-r { from { opacity: 0; transform: translateX(26px); } }
@keyframes bf-in-u { from { opacity: 0; transform: translateY(8px); } }
@keyframes bf-in-d { from { opacity: 0; transform: translateY(-8px); } }
@keyframes bf-fade { from { opacity: 0; } }
@keyframes bf-crawl { to { transform: translateX(-50%); } }
@keyframes bf-swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes bf-nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes bf-bonk { 0% { transform: translateY(0); } 35% { transform: translateY(4px); } 100% { transform: translateY(0); } }
@keyframes bf-sheen { from { background-position: -140% 0; } to { background-position: 240% 0; } }

/* =============================================================================================================
   IN PLAY
   ============================================================================================================= */
.bf .play { position: absolute; inset: 0; transition: opacity .2s; }
.bf .play.menu .cross, .bf .play.menu .prompt, .bf .play.menu .tcard, .bf .play.menu .hints, .bf .play.menu .lt { opacity: 0; }

/* ---- top left: the KPI block ---- */
.bf .tl { position: absolute; left: 24px; top: 24px; width: 408px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bf .kpi { width: 100%; padding: 18px 18px 14px; }
.bf .kpi-top { display: flex; align-items: center; gap: 9px; height: 20px; }
.bf .kpi-top > * { flex: none; }
.bf .kpi-floor { font: 700 13.5px/1 var(--f); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
/* the place is written by hud.js in the longest form that fits (fitWhere); the ellipsis is only the last resort */
.bf .kpi-top > .kpi-where { flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .kpi-top > .kpi-where.decor { color: var(--ink2); }
.bf .kpi-top > .kpi-where.decor.full { color: var(--w); }
.bf .pw { display: flex; align-items: center; gap: 7px; font: 700 11px/1 var(--f); letter-spacing: .1em; color: var(--ink2); white-space: nowrap; }
.bf .pw i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px var(--g-soft); }
.bf .pw.out { color: var(--r); }
.bf .pw.out i { background: var(--r); box-shadow: 0 0 0 3px var(--r-soft); animation: bf-blink .7s steps(2) infinite; }
.bf .kpi-cash { position: relative; margin-top: 13px; height: 50px; display: flex; align-items: baseline; font: 500 52px/50px var(--f); letter-spacing: -.028em; white-space: nowrap; }
.bf .kpi-cash .cur { font-size: 30px; font-weight: 400; color: var(--mute); margin-right: 3px; letter-spacing: 0; }
.bf .kpi-cells { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bf .kpi-cell .val { margin-top: 7px; font: 500 20px/1 var(--f); letter-spacing: -.01em; white-space: nowrap; }
.bf .kpi-cell .val small { font-size: 13px; color: var(--mute); font-weight: 400; margin-left: 2px; letter-spacing: 0; }
.bf .kpi-ipo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 11px; }
.bf .kpi-ipo .pct { font: 500 12.5px/1 var(--f); color: var(--ink2); white-space: nowrap; min-width: 34px; text-align: right; }
.bf .kpi-ipo.ready .lab, .bf .kpi-ipo.ready .pct { color: var(--g); }
.bf .kpi-ipo.ready .bbar > i { animation: bf-blink 1.1s steps(2) infinite; }
.bf .pops { position: absolute; right: 0; top: 0; bottom: 0; width: 170px; pointer-events: none; }
.bf .pop { position: absolute; right: 0; bottom: 5px; font: 700 16px/1 var(--f); letter-spacing: 0; color: var(--g); opacity: 0; white-space: nowrap; animation: 1.1s var(--ease) both; }
.bf .pop.bad { color: var(--r); }
@keyframes bf-popA { 0% { opacity: 0; transform: translate(var(--x, 0), 12px); } 14% { opacity: 1; transform: translate(var(--x, 0), 0); } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), -16px); } }
@keyframes bf-popB { 0% { opacity: 0; transform: translate(var(--x, 0), 12px); } 14% { opacity: 1; transform: translate(var(--x, 0), 0); } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), -16px); } }

/* ---- onboarding memo ---- */
.bf .guide { display: flex; align-items: center; gap: 12px; padding: 11px 16px 9px 10px; width: max-content; max-width: 620px; animation: bf-in-d .35s var(--ease); }
.bf .guide-tag { flex: none; background: var(--a); color: var(--a-ink); font: 700 11px/1 var(--f); letter-spacing: .1em; padding: 7px 8px 6px; border-radius: 5px; white-space: nowrap; }
.bf .guide-txt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 500 15.5px/1.25 var(--f); }
.bf .guide.done .guide-tag { background: var(--g); }

/* ---- top centre: what is going on (the event's picture in the socket, its timer round it) ---- */
.bf .chips { position: absolute; top: 24px; left: 456px; right: 456px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bf .chip { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 17px 0 5px; border-radius: 19px; white-space: nowrap; color: var(--ink2); animation: bf-in-d .3s var(--ease); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.bf.css .chip { box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--hair2); }
.bf.css .chip.good { box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(64, 219, 110, .55); }
.bf.css .chip.bad { box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(255, 81, 66, .6); }
.bf .chip .ring { color: var(--ink2); }
.bf .chip .ring .i { font-size: 15px; color: var(--ink); }
.bf .chip.good .ring { color: var(--g); } .bf .chip.bad .ring { color: var(--r); }
.bf .chip.hold .ring .arc { animation: bf-blink .9s steps(2) infinite; }
.bf .chip-n { font: 700 12.5px/1 var(--f); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.bf .chip-d { font-size: 12.5px; line-height: 1; color: var(--mute); }
.bf .chip-t { font: 500 13px/1 var(--f); color: var(--ink2); min-width: 26px; text-align: right; }

/* ---- top right: notifications (the channel glyph on the ribbed block, a green or red line beside it) ---- */
.bf .toasts { position: absolute; top: 24px; right: 24px; width: 376px; display: flex; flex-direction: column; gap: 8px; }
.bf .toast { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; min-height: 58px; padding: 11px 14px 11px 0; animation: bf-in-r .32s var(--ease); transition: opacity .25s, transform .25s; }
.bf .toast.out { opacity: 0; transform: translateX(20px); }
.bf .toast::after { content: ''; position: absolute; left: 40.5px; top: 1px; bottom: 1px; width: 2.5px; background: var(--hair3); }
.bf.art .toast::after { background: none; }
.bf .toast.good::after { background: var(--g); } .bf .toast.bad::after { background: var(--r); }
.bf.css .toast { overflow: hidden; }
.bf.css .toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 41px; background: repeating-linear-gradient(90deg, #2A2424 0 3px, #141010 3px 6px); }
.bf .to-ic { position: relative; width: 40px; align-self: center; display: grid; place-items: center; color: var(--ink); }
.bf .to-ic .i { font-size: 20px; }
.bf .to-ic .i.pic { font-size: 30px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 5px rgba(0, 0, 0, .5); }
.bf .toast.good .to-ic { color: var(--g); } .bf .toast.bad .to-ic { color: var(--r); }
.bf .to-h { display: flex; align-items: baseline; gap: 8px; }
.bf .to-ch { font: 700 12.5px/1.2 var(--f); color: var(--ink); }
.bf .to-n { font: 700 11px/1 var(--f); color: var(--a-ink); background: var(--a); border-radius: 999px; padding: 2px 6px; align-self: center; }
.bf .to-ts { margin-left: auto; font-size: 11.5px; line-height: 1; color: var(--dim); }
.bf .to-b { margin-top: 3px; font-size: 14.5px; line-height: 1.3; color: var(--ink2); overflow-wrap: anywhere; }

/* ---- bottom left: gauges (a steel ring, the level drawn on it) ---- */
/* the bottom row is one grid: gauges | hints or build bar | abilities. The centre card is centred on the screen while
   both sides leave it room; when they do not it takes what is left between them and wraps, and never overlaps. */
/* the text chat of a visit (src/ui/chat.js): bottom left, over the gauges. Every line is its own small plate (text never sits
   on the scene itself); a line goes 12 s after it came and all are back while the input is open. Names can be clicked then. */
.bf .chat { position: absolute; left: 24px; bottom: 108px; width: 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* (six lines of 160 wide letters are 580 px of plates and stood on the money card: the log is as tall as about three of them,
   the oldest are cut off at its top edge. clip-path, not overflow: the plates keep their shadows at the sides and below.) */
.bf .chat-log { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; max-width: 100%; max-height: 330px; clip-path: inset(0 -16px -16px -16px); }
.bf .chat-l { flex: none; max-width: 100%; padding: 5px 11px; border-radius: 9px; background: rgba(14, 11, 11, .82); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font: 500 15px/1.3 var(--f); color: var(--ink); overflow-wrap: anywhere; transition: opacity .5s; animation: bf-in-u .22s var(--ease); }
.bf .chat-l.old { opacity: 0; }
.bf .chat-n { margin-right: 6px; font-weight: 700; color: var(--ink2); white-space: nowrap; }   /* (a name is never broken in two by the long word after it) */
.bf .chat-t { unicode-bidi: isolate; }   /* (a line in a right-to-left script does not move the name in front of it) */
.bf .chat-n.me { color: var(--g); }
.bf .chat-l.off .chat-n { margin-right: 0; color: var(--dim); text-decoration: line-through; }
.bf .chat-l.off .chat-t { display: none; }
.bf .chat.on .chat-n:not(.me) { pointer-events: auto; cursor: pointer; }
.bf .chat.on .chat-n:not(.me):hover { color: var(--ink); }
.bf .chat-in { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px 6px 14px; border-radius: 11px; background: rgba(14, 11, 11, .94); border: 1px solid var(--hair2); border-bottom: 2px solid var(--a); box-shadow: var(--sh); pointer-events: auto; }
.bf .chat-i { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 15px/1 var(--f); caret-color: var(--g); cursor: text; user-select: text; -webkit-user-select: text; }
.bf .chat-i::placeholder { color: var(--mute); }
/* the chip of voice chat (src/net/voice.js), under the chat log: what V does now. Bright green while the microphone is live. */
.bf .voice { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 13px 4px 8px; border-radius: 9px; background: rgba(14, 11, 11, .82); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font: 500 14px/1 var(--f); color: var(--ink2); white-space: nowrap; transition: background .1s, color .1s, box-shadow .1s; }
.bf .voice span:empty { display: none; }
.bf .voice.on { padding-left: 13px; color: var(--ink); }
.bf .voice.live { background: var(--g); color: #0E0B0B; font-weight: 700; box-shadow: 0 0 0 1px #8CF0A9, 0 0 18px rgba(64, 219, 110, .6); }
.bf .voice.no { color: var(--w); }
.bf .bot { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: end; column-gap: 16px; }
.bf .gauges { justify-self: start; display: flex; gap: 10px; }
.bf .gauge { display: flex; align-items: center; gap: 12px; padding: 12px 18px 10px 12px; min-width: 154px; }
.bf .gauge .ring { width: 48px; height: 48px; color: var(--g); background: var(--im-ring-gauge) center / contain no-repeat; }
.bf.css .gauge .ring { border-radius: 50%; background: radial-gradient(closest-side, #141010 71%, #5a5555 73%, #2A2424 86%, #4a4545 97%, transparent 100%); }
.bf .gauge .ring .trk { stroke: rgba(14, 11, 11, .55); }
.bf .gauge .ring .i { font-size: 20px; color: var(--ink); }
.bf .gauge .ring .arc { transition: stroke-dashoffset .25s var(--ease); }
.bf .ga-v { font: 500 22px/1 var(--f); letter-spacing: -.01em; white-space: nowrap; }
.bf .ga-v small { font-size: 14px; color: var(--mute); font-weight: 400; letter-spacing: 0; }
.bf .ga-l { margin-top: 6px; }
.bf .gauge.full .ring, .bf .gauge.hot .ring { color: var(--w); }
.bf .gauge.full .ga-l { color: var(--w); }

/* ---- bottom right: what the CEO can do. The slots are the pommel of the club seen end-on. ---- */
.bf .actions { justify-self: end; display: flex; align-items: center; gap: 16px; padding: 14px 18px 12px 18px; }
.bf .ceo { position: relative; min-width: 98px; overflow: hidden; }
.bf .ceo-v { margin-top: 7px; font: 500 22px/1 var(--f); letter-spacing: -.01em; white-space: nowrap; }
.bf .ceo .bbar { margin-top: 10px; flex: none; width: 98px; height: 6px; }
.bf .ceo .bbar > i { width: calc(20px + (100% - 18px) * var(--f, 0)); }
.bf.css .ceo .bbar > i::before { width: 18px; }
.bf .ceo.shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 50%; background: linear-gradient(100deg, transparent, rgba(248, 248, 246, .36), transparent); animation: bf-shine .7s ease-out; }
@keyframes bf-shine { to { left: 120%; } }
.bf .actions .sep { width: 1px; align-self: stretch; background: var(--hair2); }
.bf .act { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 62px; }
.bf .act .ring { width: 54px; height: 54px; color: var(--ink); background: var(--im-slot) center / contain no-repeat; transition: transform .16s var(--ease); }
.bf .act .ring .rg { display: none; }
.bf .act .ring .i { font-size: 24px; transition: opacity .15s; }
.bf .act .ring .num { font: 700 16px/1 var(--f); display: none; }
/* the cooldown: a lacquer sweep that comes round the ring clockwise */
.bf .act .ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(rgba(233, 232, 231, .92) calc(var(--f, 1) * 360deg), rgba(14, 11, 11, .5) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 75%, #000 77%, #000 97%, transparent 100%); mask: radial-gradient(closest-side, transparent 75%, #000 77%, #000 97%, transparent 100%); }
.bf .act.cool .ring::after { opacity: 1; }
.bf .act-k { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--f); color: var(--ink2); white-space: nowrap; height: 24px; }
.bf .act-k .kc { min-width: 22px; height: 22px; font-size: 11px; padding: 0 5px 3px; }
.bf .act-k .kc.ms { width: 17px; min-width: 17px; height: 23px; padding: 0; }
.bf .act.on .ring { background-image: var(--im-slot-on); }
.bf .act.cool .ring .i { opacity: .3; }
.bf .act.cool.long .ring .i { opacity: 0; }
.bf .act.cool.long .ring .num { display: grid; color: var(--ink); }
.bf .act.cool .act-k { color: var(--mute); }
.bf .act.lock .ring { color: var(--dim); background-image: var(--im-slot-off); }
.bf .act.lock .act-k { color: var(--dim); }
.bf .act.rdy .ring { background-image: var(--im-slot-on); animation: bf-ready .4s var(--ease); }
@keyframes bf-ready { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 100% { transform: scale(1); } }
.bf.css .act .ring { border-radius: 50%; background: radial-gradient(closest-side, #1A1515 0 72%, transparent 74%), repeating-conic-gradient(var(--a) 0 5deg, var(--a9) 5deg 9deg); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.bf.css .act.lock .ring { background: radial-gradient(closest-side, #141010 0 72%, transparent 74%), repeating-conic-gradient(#3A3333 0 5deg, #2A2424 5deg 9deg); }
.bf.css .act.rdy .ring, .bf.css .act.on .ring { box-shadow: 0 0 0 2px var(--g), 0 2px 5px rgba(0, 0, 0, .5); }

/* ---- bottom centre: key hints, or the build bar ---- */
.bf .bc { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bf .hints { display: flex; align-items: center; gap: 18px; padding: 10px 16px 8px; transition: opacity .2s; }
.bf .hint { display: flex; align-items: center; gap: 7px; font: 500 13px/1 var(--f); color: var(--ink2); white-space: nowrap; }
.bf .bbar-card { display: flex; align-items: center; gap: 16px; max-width: 100%; padding: 10px 16px 8px 10px; animation: bf-in-u .25s var(--ease); white-space: nowrap; }
.bf .bbar-card > * { flex: none; }
.bf .bbar-card > .bbar-id { flex: 0 1 auto; min-width: 0; white-space: normal; }
.bf .bbar-tile { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; background: var(--bg1); color: var(--ink); box-shadow: 0 0 0 1px var(--hair2); overflow: hidden; }
.bf .bbar-tile .i { font-size: 26px; }
.bf .bbar-tile .i.pic { font-size: 44px; border-radius: 0; }
.bf .bbar-n { font: 700 16.5px/1.08 var(--f); }
.bf .bbar-s { margin-top: 5px; font: 500 13px/1.2 var(--f); color: var(--mute); }
.bf .bbar-s > * { white-space: nowrap; }
.bf .bbar-s b { color: var(--ink); font-weight: 700; }
.bf .bbar-s b.no { color: var(--r); }
.bf .bbar-card .sep { width: 1px; height: 30px; background: var(--hair2); }
.bf .bbar-cut { margin-top: 6px; display: flex; align-items: center; gap: 7px; font: 700 13px/1.2 var(--f); color: var(--w); white-space: normal; max-width: 430px; }
.bf .bbar-cut .i { font-size: 16px; }

/* ---- the breaking-news lower third: ribbed end block, lacquer headline plate, black crawl strip ---- */
/* (zoomed down on a narrow canvas by --lts, src/ui/dom.js; its distance from the bottom edge is not) */
.bf .lt { zoom: var(--lts, 1); position: absolute; left: 50%; bottom: calc(150px / var(--lts, 1)); width: 1000px; height: 137px; margin-left: -500px; display: none; border: 1px solid transparent; transition: opacity .2s; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }
.bf .lt.on { display: block; animation: bf-lt-in .5s var(--ease) backwards; }
.bf .lt.out { animation: bf-lt-out .35s ease-in both; }
/* the label on the ribbed block sits on its own black plate (a label never lies on a texture) */
.bf .lt-tag { position: absolute; left: 0; top: 0; width: 117px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 0 5px; text-align: center; }
.bf .lt-tag span { display: block; max-width: 100%; padding: 6px 7px 4px; border-radius: 4px; background: rgba(14, 11, 11, .9); color: var(--ink); font: 700 18px/1.04 var(--fd); letter-spacing: .09em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(255, 255, 255, .22), inset 0 1px 2px #000; }
.bf .lt-head { position: absolute; left: 139px; right: 86px; top: 0; height: 83px; padding-top: 6px; display: flex; align-items: center; color: #1A1515; font: 700 50px/1 var(--fd); letter-spacing: .012em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.bf .lt-head > span { display: block; min-width: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; animation: bf-in-u .4s .16s var(--ease) both; }
.bf .lt-crawl { position: absolute; left: 117px; right: 74px; top: 91px; height: 35px; display: flex; animation: bf-fade .4s .22s both; }
.bf .lt-bug { flex: none; display: flex; align-items: center; gap: 8px; margin: 3px 0 3px 12px; padding: 0 10px 0 8px; border-radius: 4px; background: var(--a); color: var(--a-ink); font: 700 12.5px/1 var(--f); letter-spacing: .1em; }
.bf .lt-bug i { width: 16px; height: 16px; background: #0E0B0B; -webkit-mask: var(--im-mark-mono) center / contain no-repeat; mask: var(--im-mark-mono) center / contain no-repeat; }
.bf.css .lt-bug i { -webkit-mask: none; mask: none; width: 12px; height: 3px; border-radius: 2px; transform: rotate(-45deg); }
.bf .lt-clock { flex: none; display: grid; place-items: center; width: 70px; font: 500 14px/1 var(--fm); color: var(--ink2); border-right: 1px solid var(--hair2); }
.bf .lt-run { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 44px), transparent); }
.bf .lt-txt { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; padding-left: 30px; font: 500 18.5px/1 var(--f); color: var(--ink); animation: bf-crawl var(--dur, 16s) 2s linear infinite; }
.bf .lt-txt span { padding-right: 34px; }
.bf .lt-txt span::after { content: '///'; color: var(--g); margin-left: 34px; font-weight: 700; letter-spacing: .1em; }
.bf .lt:not(.good) .lt-txt span::after { color: var(--r); }
@keyframes bf-lt-in { from { clip-path: inset(-60px 100% -60px -60px); } to { clip-path: inset(-60px); } }
@keyframes bf-lt-out { to { opacity: 0; transform: translateX(-40px); } }
.bf.css .lt { filter: none; }
.bf.css .lt-tag { background: repeating-linear-gradient(90deg, #ff6a5c 0 2px, var(--r) 2px 17px, #9e1f17 17px 20px); border-radius: 6px 0 0 6px; }
.bf.css .lt.good .lt-tag { background: repeating-linear-gradient(90deg, var(--g) 0 2px, var(--a) 2px 17px, var(--a9) 17px 20px); }
.bf.css .lt-head { left: 117px; right: 0; padding-left: 22px; background: var(--lacquer); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 -4px 0 var(--r); }
.bf.css .lt.good .lt-head { box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 -4px 0 var(--a); }
.bf.css .lt-crawl { right: 0; top: 83px; height: 54px; padding: 9px 0; background: rgba(14, 11, 11, .96); }

/* ---- centre: crosshair, prompt, target card ---- */
.bf .cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity .15s; }
.bf .cx { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--ink); border: 0 solid var(--ink); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5);
  transition: width .14s var(--ease), height .14s var(--ease), margin .14s var(--ease), border-radius .14s, background .14s, border-color .14s, transform .14s; }
.bf .cross.on .cx { width: 22px; height: 22px; margin: -11px; background: transparent; border-width: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .35); }
.bf .cross.t-npc .cx { border-color: var(--g); }
.bf .cross.t-fixture .cx { border-radius: 4px; transform: rotate(45deg); width: 18px; height: 18px; margin: -9px; }
.bf .cross.t-item .cx { border-radius: 6px; }
.bf .cross.hot .cx { border-color: var(--r); }
.bf .prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 9px 16px 6px 9px; font: 500 15.5px/1 var(--f); white-space: nowrap; transition: opacity .15s; animation: bf-fade .15s; }
.bf .prompt .kc, .bf .guide .kc { min-width: 28px; height: 28px; font-size: 13.5px; padding: 0 7px 4px; }
.bf .prompt .kc.ms, .bf .guide .kc.ms { width: 21px; min-width: 21px; height: 28px; padding: 0; }
.bf .prompt > span:first-child { padding-left: 8px; }
.bf .prompt .kc ~ .kc, .bf .prompt .kc ~ .khold, .bf .prompt .khold ~ .kc { margin-left: 10px; }
/* a key that is held ("[Hold C] Oil it"): HOLD in small capitals before the cap, and while it is held a ring that runs
   round the cap (hud.prompt(text, {hold}); src/ui/dom.js setHold) */
.bf .khold { display: inline-flex; align-items: center; gap: 7px; }
.bf .khold > small { font: 700 10.5px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.bf .kc.held { position: relative; }
.bf .kring { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.bf .kring rect { x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); rx: 9px; fill: none; stroke-width: 3px; }
.bf .kring .trk { stroke: rgba(248, 248, 246, .2); }
.bf .kring .arc { stroke: var(--g); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100px * (1 - var(--f, 0))); filter: drop-shadow(0 0 3px rgba(64, 219, 110, .55)); }
/* the wall-in warning of build mode: a warning, never a refusal */
.bf .prompt.warn { color: var(--w); padding-left: 13px; }
.bf .prompt.warn > .i { font-size: 18px; }
.bf .prompt.warn > span:first-child { padding-left: 0; }
.bf .tcard { position: absolute; left: calc(50% + 96px); bottom: calc(50% - 18px); width: 296px; padding: 15px 15px 13px; transition: opacity .15s; }
.bf .tcard.in { animation: bf-tc .16s var(--ease); }
.bf .prompt.crk { top: 17%; }
.bf .tcard.crk { opacity: 0; }
@keyframes bf-tc { from { opacity: 0; margin-left: -8px; } }
.bf .tc-head { display: flex; align-items: center; gap: 11px; min-height: 46px; }
.bf .tc-head .pring { margin: -6px -3px -6px -6px; }
.bf .tc-tile { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--bg1); flex: none; overflow: hidden; box-shadow: 0 0 0 1px var(--hair2); }
.bf .tc-tile .i { font-size: 24px; }
.bf .tc-tile .i.pic { font-size: 46px; border-radius: 0; }
.bf .tc-name { font: 700 16.5px/1.1 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .tc-sub { margin-top: 4px; font-size: 12.5px; line-height: 1.15; color: var(--mute); }
.bf .tc-st { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
.bf .tc-note { font-size: 12.5px; line-height: 1.2; color: var(--mute); }
/* what they are doing right now (MOTION H1): the one line a glance wants */
.bf .tc-do { margin-top: 9px; font: 500 13.5px/1.25 var(--f); color: var(--ink); }
/* the bars share their columns, so a long value ("600/600") widens every row's number, not one row's bar */
.bf .tc-bars { margin-top: 11px; display: grid; grid-template-columns: minmax(62px, max-content) 1fr minmax(34px, max-content); align-items: center; gap: 8px; }
.bf .tc-bar { display: contents; }
.bf .tc-bar .n { font: 500 12.5px/1 var(--f); color: var(--ink2); text-align: right; white-space: nowrap; }
/* the line of people.label: what they want, how loyal, afraid, a promotion waiting */
.bf .tc-tags { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.bf .tc-tag { font: 700 11px/1 var(--f); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 5px; background: var(--hair); color: var(--ink2); white-space: nowrap; }
.bf .tc-tag.warn { color: var(--w); background: var(--w-soft); }
.bf .tc-tag.bad { color: var(--r); background: var(--r-soft); }
.bf .tc-tag.good { color: var(--g); background: var(--g-soft); }
.bf .tc-tag.gold { color: var(--gold); background: rgba(220, 170, 104, .15); }
/* the paper stars of the order board */
.bf .tc-stars { margin-left: auto; display: inline-flex; gap: 2px; color: var(--dim); }
.bf .tc-stars .i { font-size: 14px; }
.bf .tc-stars .i.on { color: var(--gold); }
.bf .tc-hint { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.3; color: var(--ink2); }

.bf .pill { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--f); letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px 4px; border-radius: 999px; background: var(--hair2); color: var(--ink2); white-space: nowrap; }
.bf .pill.good { color: var(--g); background: var(--g-soft); }
.bf .pill.bad { color: var(--r); background: var(--r-soft); }
.bf .pill.warn { color: var(--w); background: var(--w-soft); }

/* =============================================================================================================
   WINDOWS: a baton lies along the top edge (the rail); black leather with a saddle stitch below it
   ============================================================================================================= */
.bf .scrim { position: absolute; inset: 0; background: rgba(14, 11, 11, .62); opacity: 0; transition: opacity .2s; pointer-events: none; }
.bf .scrim.on { opacity: 1; pointer-events: auto; }
.bf .wins { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding-top: 10px; }
.bf .win { pointer-events: auto; position: relative; display: flex; flex-direction: column; border: 1px solid transparent; border-radius: 13px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .45); animation: bf-win .22s var(--ease); max-height: calc(100% - 22px); max-width: calc(100% - 28px); }
@keyframes bf-win { from { opacity: 0; transform: translateY(10px); } }
.bf.css .win { background: var(--glass-hi); border-color: var(--hair2); }
.bf.css .win::before { content: ''; position: absolute; left: 12px; right: 12px; top: -9px; height: 9px; border-radius: 5px; background: var(--lacquer); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.bf.css .win::after { content: ''; position: absolute; left: 12px; top: -10px; width: 112px; height: 11px; border-radius: 5px; background: var(--ribs); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.bf .win-head { display: flex; align-items: center; gap: 22px; padding: 22px 26px 16px 30px; flex: none; background: linear-gradient(var(--hair), var(--hair)) 50% 100% / calc(100% - 32px) 1px no-repeat; }
.bf .win-over { display: flex; align-items: center; gap: 9px; font: 700 11.5px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.bf .win-over .mark { width: 16px; height: 16px; }
.bf .win-title { margin-top: 9px; font: 700 29px/1 var(--f); letter-spacing: -.018em; }
.bf .win-sub { margin-top: 7px; font-size: 14.5px; line-height: 1.2; color: var(--mute); }
.bf .win-kpis { margin-left: auto; display: flex; gap: 30px; align-items: center; }
.bf .wk .v { margin-top: 8px; font: 500 22px/1 var(--f); letter-spacing: -.01em; white-space: nowrap; }
.bf .wk .v.warn { color: var(--w); }
.bf .win-x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); background: var(--im-close) center / contain no-repeat; transition: transform .08s, filter .15s; flex: none; }
.bf.art .win-x .i { display: none; }
.bf.css .win-x { border: 1px solid var(--hair3); background: var(--bg1); }
.bf .win-x:hover { filter: brightness(1.25); color: var(--ink); }
.bf .win-x:active { transform: scale(.92); }
.bf .win-esc { display: flex; align-items: center; gap: 10px; }
/* tabs: the active one is the side handle of the club */
.bf .tabs { display: flex; align-items: center; gap: 0; padding: 8px 22px 9px 24px; flex: none; background: linear-gradient(var(--hair), var(--hair)) 50% 100% / calc(100% - 32px) 1px no-repeat; }
.bf .tab { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 46px 0 16px; border: 1px solid transparent; border-radius: 8px 17px 17px 8px; font: 500 15px/1 var(--f); color: var(--mute); transition: color .15s; }
.bf .tab:hover { color: var(--ink); }
.bf .tab .i { font-size: 17px; }
.bf .tab.on { color: #0E0B0B; font-weight: 700; z-index: 1; }
.bf.css .tab.on { background: var(--rubber); box-shadow: inset -10px 0 0 var(--a7), inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 var(--a9); }
.bf .tab .n { font: 700 11.5px/1 var(--f); color: var(--ink2); background: var(--hair2); border-radius: 999px; padding: 3px 7px; }
.bf .tab.alert .n { background: var(--a); color: var(--a-ink); }
.bf .tab.on .n { background: #0E0B0B; color: var(--g); }
.bf .win-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 28px 26px; }
.bf ::-webkit-scrollbar { width: 12px; height: 12px; }
.bf ::-webkit-scrollbar-track { background: none; }
.bf ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background: linear-gradient(90deg, #fff, #E9E8E7 45%, #C9C8C6) content-box; min-height: 44px; }
.bf ::-webkit-scrollbar-corner { background: none; }
.bf .pane { animation: bf-fade .18s; }

/* buttons: green ribbed rubber is the one thing to press; black with a lacquer piping for the rest; red for danger */
.bf .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 24px 2px; border: 1px solid transparent; border-radius: 12px; font: 700 14px/1 var(--f); color: var(--ink); white-space: nowrap;
  transition: transform .08s, filter .15s, color .15s; }
.bf .btn:active { transform: translateY(2px) scale(.97); transition-duration: .08s; }
.bf .btn.pri { color: var(--a-ink); }
.bf .btn.danger { color: var(--r); }
.bf .btn.danger.sure { color: #0E0B0B; }
.bf .btn.off { cursor: not-allowed; color: var(--mute); }
.bf .btn.off:active { transform: none; }
.bf .btn .i { font-size: 17px; }
.bf.css .btn { background: linear-gradient(var(--bg3), var(--bg2)); box-shadow: inset 0 0 0 1.5px var(--paper), 0 3px 0 #000; }
.bf.css .btn:hover { filter: brightness(1.18); }
.bf.css .btn.pri { background: var(--rubber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--a9); }
.bf.css .btn.danger.sure { background: linear-gradient(#ff6a5c, #e5382d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #7d1711; }
.bf.css .btn.off { background: var(--bg4); box-shadow: inset 0 0 0 1px var(--hair); filter: none; }
.bf .why { font-size: 12.5px; line-height: 1.15; color: var(--r); }
.bf .tile { display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--ink); overflow: hidden; background: radial-gradient(circle at 40% 30%, #2f2929, #141010 75%); box-shadow: 0 0 0 1px var(--hair2), 0 4px 10px rgba(0, 0, 0, .45); }
.bf .tile .i.pic { width: 100%; height: 100%; font-size: inherit; border-radius: 0; }

/* lacquer and rubber catch the light: one highlight band crosses a primary control when the pointer arrives */
.bf .btn.pri, .bf .tbtn.pri, .bf .mbtn.pri, .bf .bell:not(.off):not(.ghost) { overflow: hidden; }
.bf .btn.pri::after, .bf .tbtn.pri::after, .bf .mbtn.pri::after, .bf .bell:not(.off):not(.ghost)::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%) -140% 0 / 240% 100% no-repeat; }
.bf .btn.pri:hover::after, .bf .tbtn.pri:hover::after, .bf .mbtn.pri:hover::after, .bf .bell:not(.off):not(.ghost):hover::after { animation: bf-sheen .45s ease-out 1; }
.bf .tbtn, .bf .mbtn, .bf .bell { position: relative; }

/* ---- tooltip ---- */
.bf .tip { position: absolute; left: 0; top: 0; max-width: 340px; padding: 12px 15px 13px; border: 1px solid transparent; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); pointer-events: none; opacity: 0; transition: opacity .1s; z-index: 5; }
.bf.css .tip { background: #0E0B0B; border-color: rgba(64, 219, 110, .5); }
.bf .tip.on { opacity: 1; }
.bf .tip-t { font: 700 15px/1.2 var(--f); }
.bf .tip-b { margin-top: 5px; font-size: 13.5px; line-height: 1.38; color: var(--ink2); }
.bf .tip-r { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.bf .tip-r span:nth-child(odd) { color: var(--mute); }
.bf .tip-r span:nth-child(even) { text-align: right; color: var(--ink); }
.bf .tip-w { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hair); font: 700 13px/1.25 var(--f); color: var(--r); }
.bf .tip-k { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--mute); }

/* ---- BUILD: the procurement catalogue ---- */
.bf .w-build { width: 1320px; height: 836px; }
.bf .w-build .win-body { padding: 0 10px 14px 0; display: grid; grid-template-columns: 252px 1fr; overflow: hidden; }
.bf .rail { display: flex; flex-direction: column; gap: 3px; padding: 16px 12px 14px 18px; border-right: 1px solid var(--hair); min-height: 0; overflow-y: auto; }
.bf .rail-h { display: flex; justify-content: space-between; padding: 4px 16px 10px 14px; }
.bf .rail-b { display: flex; align-items: center; gap: 12px; height: 42px; flex: none; white-space: nowrap; padding: 0 16px 0 14px; border: 1px solid transparent; border-radius: 9px 21px 21px 9px; font: 500 15px/1 var(--f); color: var(--ink2); transition: color .15s, background-color .15s; }
.bf .rail-b:hover { color: var(--ink); background-color: var(--hair); }
.bf .rail-b .i { font-size: 20px; color: var(--mute); transition: color .15s; }
.bf .rail-b .c { margin-left: auto; min-width: 22px; text-align: center; font: 700 12px/1 var(--f); color: var(--ink2); white-space: nowrap; }
.bf .rail-b.on { color: #0E0B0B; font-weight: 700; padding-right: 52px; background-color: transparent; }
/* a section with a row unlocked since the last look: a dot beside its name (the row itself carries the word) */
.bf .rail-new { flex: none; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px var(--g-soft); font-size: 0; color: transparent; overflow: hidden; }
.bf .rail-b.on .rail-new { background: #0E0B0B; box-shadow: 0 0 0 3px rgba(14, 11, 11, .2); }
.bf .rail-b.on .i { color: #0E0B0B; }
.bf .rail-b.on .c { color: #0E0B0B; }
.bf.css .rail-b.on { background: var(--rubber); box-shadow: inset -12px 0 0 var(--a7), inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 var(--a9); }
.bf .rail-note { margin-top: auto; padding: 12px; border-radius: 9px; border: 1px dashed var(--hair2); font-size: 12.5px; line-height: 1.4; color: var(--mute); }
.bf .rail-note b { display: block; color: var(--ink2); margin-bottom: 3px; font-size: 11px; letter-spacing: .12em; }
.bf .cat-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 0 16px 0 22px; scroll-behavior: auto; }
.bf .cat-sec { padding-top: 18px; scroll-margin-top: 0; }
.bf .cat-h { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 12px; }
.bf .cat-no { font: 500 12px/1 var(--fm); color: var(--g); letter-spacing: .06em; }
.bf .cat-t { font: 700 20px/1 var(--f); letter-spacing: -.012em; }
.bf .cat-b { font-size: 14px; line-height: 1; color: var(--mute); }
.bf .cat-n { margin-left: auto; font: 500 11.5px/1 var(--fm); letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.bf .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.bf .cat-sec:last-of-type .cat-grid { border-bottom: 0; }
.bf .cat-end { display: flex; align-items: center; justify-content: center; gap: 10px; height: 90px; font-size: 13px; color: var(--dim); }
.bf .cat-end .mark { width: 16px; height: 16px; opacity: .7; }
/* an item: its product picture in a moulded tray; an affordable price on a lacquer tag */
.bf .item { position: relative; display: flex; flex-direction: column; padding: 16px 17px 14px 16px; border: 1px solid transparent; border-radius: 14px; min-height: 204px;
  transition: filter .15s, transform .14s var(--ease); }
.bf.css .item, .bf.css .upg, .bf.css .ktile, .bf.css .fl, .bf.css .emp, .bf.css .t-perk { background: #141010; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 1px 0 var(--hair); border-color: rgba(248, 248, 246, .06); }
.bf .item:hover { filter: brightness(1.16); transform: translateY(-2px); }
.bf .item:active { transform: translateY(2px); transition-duration: .08s; }
.bf .item-top { display: flex; gap: 14px; }
.bf .item .tile { width: 84px; height: 84px; font-size: 84px; }
.bf .item .tile .i:not(.pic) { font-size: 44px; }
.bf .item-id { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bf .item-sku { font: 500 11px/1 var(--fm); letter-spacing: .06em; color: var(--dim); }
.bf .item-name { margin-top: 6px; font: 700 17.5px/1.12 var(--f); letter-spacing: -.008em; }
.bf .item-buy { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 10px; min-height: 38px; }
.bf .price { font: 700 19px/1 var(--f); letter-spacing: -.01em; white-space: nowrap; }
.bf .price.tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px 1px; border: 1px solid transparent; border-radius: 7px; color: #1A1515; font-size: 16.5px; }
.bf.css .price.tag { background: var(--lacquer); box-shadow: inset 0 0 0 1px rgba(26, 21, 21, .5), 0 2px 0 #8c8a88; }
.bf .item .why { min-width: 0; }
.bf .item-sku { white-space: nowrap; }
.bf .item-sku .own { color: var(--ink2); }      /* "· owned 3": on the SKU line, so the reason a card is unaffordable has the price row to itself */
.bf .item-desc { margin-top: 11px; font-size: 13.5px; line-height: 1.34; color: var(--ink2); }
.bf .specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-content: flex-start; }
.bf .spec { font: 500 12px/1 var(--f); color: var(--ink); padding: 5px 8px 4px; border-radius: 5px; background: var(--hair); white-space: nowrap; height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bf .spec b { color: var(--mute); font-weight: 500; margin-right: 5px; }
.bf .item .go { position: absolute; right: 16px; top: 68px; width: 26px; height: 26px; border-radius: 50%; background: var(--a); color: var(--a-ink); display: grid; place-items: center; opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s var(--ease); box-shadow: 0 2px 0 var(--a9); }
.bf .item .go .i { font-size: 15px; }
.bf .item .go .ic { stroke-width: 2.4; }
.bf .item:hover .go { opacity: 1; transform: none; }
.bf .item.off { cursor: not-allowed; }
.bf .item.off .price { color: var(--r); }
.bf .item.off .tile { filter: saturate(.35) brightness(.8); }
.bf .item.off:hover { transform: none; filter: none; }
.bf .item.off .go { display: none; }
/* a row unlocked since the catalogue was last looked at */
.bf .item-new { position: absolute; right: 14px; top: 13px; font: 700 10px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: #0E0B0B; background: var(--g); padding: 4px 6px 3px; border-radius: 3px; box-shadow: 0 1px 0 var(--a9); }
/* a row that is announced but not unlocked yet: a silhouette and the sentence that says what unlocks it */
.bf .item.locked { cursor: not-allowed; }
.bf .item.locked:hover { transform: none; filter: none; }
.bf .item.locked .tile { position: relative; }
.bf .item.locked .tile > .i:first-child { filter: brightness(.2) contrast(1.3) saturate(0); }
.bf .item.locked .tile .lk { position: absolute; inset: 0; margin: auto; font-size: 30px; color: var(--ink2); filter: drop-shadow(0 1px 2px #000); }
.bf .item.locked .item-name { color: var(--ink2); }
.bf .item.locked .item-desc { color: var(--mute); }
.bf .item-lock { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1.2 var(--f); color: var(--w); }
.bf .item-lock .i { font-size: 15px; }
.bf .nope { animation: bf-nope .28s; }
.bf .bonk { animation: bf-bonk .18s var(--ease); }

/* ---- HIRE: people ops. Every candidate is a staff badge. ---- */
.bf .w-hire { width: 1400px; height: 860px; }
.bf .w-hire .win-body { padding: 14px 20px 22px 24px; display: flex; flex-direction: column; }
.bf .tabs .form { margin-left: auto; display: flex; align-items: center; }
.bf .field { display: flex; align-items: baseline; gap: 9px; padding: 0 18px; border-right: 1px solid var(--hair2); white-space: nowrap; }
.bf .field:last-child { border-right: 0; padding-right: 6px; }
.bf .field .v { font: 500 15px/1 var(--f); color: var(--ink); }
.bf .field.bad .v { color: var(--r); }
.bf .cvs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 319px; gap: 12px; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 0; align-content: start; }
.bf .cv { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0 12px 9px; border: 1px solid transparent; border-radius: 10px; color: var(--pink); text-align: center; min-width: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .42); transition: transform .16s var(--ease), box-shadow .16s; }
.bf.css .cv { background: linear-gradient(var(--a) 0 34px, #F8F8F6 34px, var(--paper)); box-shadow: 0 8px 18px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(26, 21, 21, .35); }
.bf .cv > * { flex-shrink: 0; }
.bf .cv:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 16px 28px rgba(0, 0, 0, .5); }
.bf .cv:nth-child(even):hover { transform: translateY(-4px) rotate(.5deg); }
.bf .cv:active { transform: translateY(1px) scale(.985); }
.bf .cv-band { position: relative; height: 33px; margin: 0 -6px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 0 6px; font: 700 11px/1 var(--fd); letter-spacing: .18em; color: #0E0B0B; text-transform: uppercase; white-space: nowrap; }
.bf .cv-band::before { content: ''; position: absolute; left: 50%; top: 6px; width: 34px; height: 7px; margin-left: -17px; border-radius: 4px; background: rgba(14, 11, 11, .82); box-shadow: inset 0 1px 1px #000, 0 1px 0 rgba(255, 255, 255, .25); }
.bf .cv-ref { font: 500 11px/1 var(--fm); letter-spacing: .02em; color: rgba(14, 11, 11, .82); }
.bf .cv-photo { position: relative; margin: 9px auto 0; width: 86px; height: 88px; }
.bf .cv .pt { width: 86px; height: 88px; border: 1px solid transparent; border-radius: 9px; font-size: 26px; }
.bf.css .cv .pt { box-shadow: 0 0 0 3px #F8F8F6, 0 0 0 4px var(--a), 0 3px 8px 3px rgba(0, 0, 0, .25); }
.bf .cv .pt img { object-position: 50% 10%; transform: scale(1.12); transform-origin: 50% 16%; }
.bf .cv-best { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px 3px; border: 1px solid var(--a9); border-radius: 4px; background: #F8F8F6; color: var(--a9); white-space: nowrap; }
.bf .cv-best .i { font-size: 12px; }
.bf .cv-name { margin-top: 13px; font: 700 18.5px/1.05 var(--f); letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf .cv-title { margin-top: 3px; font-size: 12.5px; line-height: 1.1; color: var(--pmute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .cv-quip { margin-top: 6px; font: italic 400 12.5px/1.24 var(--fs); color: #3d3836; height: 46px; display: flex; align-items: center; justify-content: center; }
.bf .cv-rows { margin: 7px 0 0; display: grid; gap: 4px; text-align: left; }
.bf .cv-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; height: 10px; font: 700 11px/10px var(--f); letter-spacing: .08em; color: var(--pmute); }
.bf .seg { height: 7px; background: linear-gradient(90deg, var(--c, #1A1515) calc(var(--n, 5) * 10%), rgba(26, 21, 21, .15) 0);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); }
.bf .seg.chaos { --c: #B3271D; }
.bf .cv-hire { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 4px 1px; border: 1px solid transparent; border-radius: 9px; color: #0E0B0B; font: 700 13.5px/1 var(--f); white-space: nowrap; transition: filter .15s; }
.bf.css .cv-hire { background: var(--rubber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 var(--a9); }
.bf .cv-hire small { font: 700 11px/1 var(--f); letter-spacing: .06em; opacity: .85; }
.bf .cv-hire em { font: 500 11px/1 var(--f); font-style: normal; opacity: .85; }
.bf .cv.off .cv-hire em { display: none; }
.bf .cv.off { cursor: not-allowed; }
.bf.art .cv.off .cv-hire { border-image: none; }
.bf .cv.off .cv-hire { background: none; color: var(--r-deep); box-shadow: inset 0 0 0 1px rgba(179, 39, 29, .55); font-size: 11.5px; padding: 0 6px; border-radius: 6px; }
.bf .cv.off .cv-hire small { display: none; }
.bf .cv.off .pt img { filter: grayscale(1); opacity: .8; }
.bf .cv.off:hover { transform: none; box-shadow: 0 8px 18px rgba(0, 0, 0, .42); }
.bf .cv.nope { animation: bf-nope .28s; }
.bf .stamp { position: absolute; left: -12px; top: 8px; transform: rotate(-9deg); background: rgba(248, 248, 246, .9); font: 700 11.5px/1 var(--fd); letter-spacing: .12em; color: var(--r-deep); border: 1.5px solid var(--r-deep); border-radius: 3px; padding: 4px 6px 2px; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.bf .stamp.blue { color: var(--a9); border-color: var(--a9); }

.bf .dir { flex: 1; min-height: 0; overflow: auto; padding: 2px 4px 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; align-content: start; }
.bf .emp { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 158px 30px auto; align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px 8px 10px; border: 1px solid transparent; border-radius: 12px; }
.bf .emp .pt { width: 44px; height: 44px; border-radius: 50%; font-size: 15px; box-shadow: 0 0 0 2px var(--paper); }
.bf .emp-n { font: 700 15px/1.1 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .emp-t { margin-top: 4px; font-size: 12.5px; line-height: 1.2; color: var(--mute); }
.bf .emp-n { display: flex; align-items: center; gap: 7px; }
.bf .emp-n > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf .emp-star { display: inline-grid; color: var(--gold); flex: none; }
.bf .emp-star .i { font-size: 15px; }
.bf .emp-star .ic .f, .bf .tc-stars .ic .f { fill-opacity: 1; }
.bf .emp-bars { display: grid; gap: 7px; }
.bf .emp-bar { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.bf .emp-bar .lab { font-size: 11px; letter-spacing: .08em; }
.bf .emp-f { font: 700 12.5px/1 var(--f); color: var(--mute); text-align: center; }
.bf .emp .btn { height: 30px; padding: 0 18px 1px; font-size: 12px; border-radius: 9px; color: var(--ink2); }
.bf .emp .btn:hover { color: var(--r); }
.bf .emp .btn.sure, .bf .emp .btn.sure:hover { color: #0E0B0B; }
/* the job market's rows (the Hire window): the directory's row with the bars and the floor left out; the button hires, so it is not red */
.bf .emp.mk { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
.bf .emp.mk .mk-from { max-width: 210px; font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .emp.mk .mk-from.bad { color: var(--r); }
.bf .emp.mk .btn { min-width: 124px; color: var(--ink); }
.bf .emp.mk .btn:hover { color: var(--g); }
.bf .emp.mk .btn.off, .bf .emp.mk .btn.off:hover { color: var(--mute); cursor: default; }
.bf .empty { grid-column: 1 / -1; padding: 70px 0; text-align: center; color: var(--mute); font-size: 15px; }
.bf .empty b { display: block; color: var(--ink); font-size: 20px; margin-bottom: 6px; }

/* ---- COMPANY ---- */
.bf .w-company { width: 1320px; height: 836px; }
.bf .w-company .win-body { display: flex; flex-direction: column; padding: 20px 26px 24px; }
.bf .w-company .pane { flex: 1; min-height: 0; }
.bf .ups { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); grid-auto-rows: 1fr; gap: 12px; }
.bf .upg { position: relative; display: flex; flex-direction: column; padding: 16px 18px 14px 16px; border: 1px solid transparent; border-radius: 14px; min-height: 0; transition: filter .15s, transform .14s var(--ease); }
.bf .upg:hover { filter: brightness(1.16); transform: translateY(-2px); }
.bf .upg:active { transform: translateY(2px); transition-duration: .08s; }
.bf .upg .tile { width: 84px; height: 84px; font-size: 84px; }
.bf .upg .tile .i:not(.pic) { font-size: 34px; }
.bf .up-top { display: flex; gap: 14px; align-items: flex-start; }
.bf .up-id { min-width: 0; flex: 1; }
.bf .up-name { margin-top: 2px; font: 700 19px/1.1 var(--f); letter-spacing: -.01em; }
.bf .up-desc { margin-top: 5px; font-size: 13.5px; line-height: 1.3; color: var(--ink2); }
.bf .up-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.bf .up-side .price { font-size: 17px; }
.bf .up-side .price.no { color: var(--r); }
.bf .up-side .price.max { color: var(--g); font: 700 12px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; }
.bf .up-bot { display: flex; align-items: center; gap: 12px; padding-top: 12px; min-height: 17px; }
.bf .up-bot .pips { flex: 1; padding-top: 0; }
.bf .up-fx { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; }
.bf .up-fx > div { min-width: 0; font: 500 15px/1.15 var(--f); color: var(--ink); }
.bf .up-fx .lab { display: block; margin-bottom: 5px; }
.bf .up-fx .nx { color: var(--g); }
.bf .pips { display: flex; gap: 3px; padding-top: 12px; }
.bf .pips i { flex: 1; height: 5px; border-radius: 2px; background: var(--hair2); max-width: 30px; }
.bf .pips i.on { background: var(--a); }
.bf .up-foot { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; }
.bf .up-lv { font: 500 13px/1.25 var(--f); color: var(--mute); }
.bf .up-lv b { color: var(--ink); }
.bf .upg.off { cursor: not-allowed; }
.bf .upg.off:hover { transform: none; filter: none; }
.bf .upg.max .pips i.on { background: var(--g); }
.bf .upg.nope { animation: bf-nope .28s; }
.bf .ups.dense .up-desc { display: none; }

.bf .tower { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bf .tower-cap { width: 100%; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bf .tower-cap p { margin: 0; font-size: 14.5px; color: var(--mute); }
.bf .fl { width: var(--w, 100%); display: grid; grid-template-columns: 158px 1fr auto; align-items: center; gap: 18px; height: 91px; padding: 0 20px 0 0; border: 1px solid transparent; border-radius: 13px; transition: filter .15s; }
.bf .fl-pic { position: relative; align-self: stretch; margin: 6px 0 6px 6px; border-radius: 8px; overflow: hidden; background: var(--bg1); box-shadow: 0 0 0 1px var(--hair2); }
.bf .fl-pic .shot { position: absolute; inset: 0; }
.bf .fl-num { position: absolute; left: 6px; top: 6px; min-width: 34px; height: 26px; padding: 3px 6px 0; display: grid; place-items: center; font: 700 20px/1 var(--fd); letter-spacing: .04em; color: #1A1515; background: var(--lacquer); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(26, 21, 21, .45), 0 2px 4px rgba(0, 0, 0, .5); }
.bf .fl-name { font: 700 18px/1.1 var(--f); letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bf .fl-blurb { margin-top: 5px; font-size: 13.5px; line-height: 1.25; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .fl-meta { margin-top: 7px; display: flex; gap: 14px; font-size: 12.5px; line-height: 1; color: var(--mute); white-space: nowrap; }
.bf .fl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bf .fl.open .fl-num { background: var(--rubber); color: var(--a-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 4px rgba(0, 0, 0, .5); }
.bf .fl.here { filter: brightness(1.2); }
.bf .fl.locked { opacity: .55; }
.bf .fl.locked .shot { filter: grayscale(1) brightness(.8); }
.bf .fl.locked .fl-blurb { color: var(--mute); }

/* statistics: the company report. A row of three lead figures (the all-time number on the one lacquer plate, value and
   income with a sparkline), then nine records, each with its picture in a tray. */
.bf .kgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1.2fr 1fr 1fr 1fr; gap: 12px; }
.bf .ktile { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px 20px 12px 18px; border: 1px solid transparent; border-radius: 14px; min-height: 0; }
.bf .ktile .tile { width: 92px; height: 92px; font-size: 92px; }
/* with the round-2 records (orders, oil, promotions) there are up to twelve: four to a row under the three lead figures */
.bf .kgrid.wide { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.bf .kgrid.wide > .ktile { grid-column: span 3; grid-template-columns: 64px minmax(0, 1fr); gap: 13px; padding: 10px 14px 10px 13px; }
.bf .kgrid.wide > .ktile.lead, .bf .kgrid.wide > .ktile.hl { grid-column: span 4; }
.bf .kgrid.wide > .ktile.lead { grid-template-columns: minmax(0, auto) minmax(110px, 1fr); gap: 22px; padding: 18px 26px 16px 22px; }
.bf .kgrid.wide > .ktile.hl { padding: 18px 26px 16px 28px; }
.bf .kgrid.wide > .ktile:not(.lead):not(.hl) .tile { width: 64px; height: 64px; font-size: 64px; }
.bf .kgrid.wide > .ktile:not(.lead):not(.hl) .tile .i:not(.pic) { font-size: 30px; }
.bf .kgrid.wide > .ktile:not(.lead):not(.hl) .v { font-size: 30px; margin-top: 7px; }
.bf .kgrid.wide > .ktile:not(.lead):not(.hl) .d { font-size: 12px; margin-top: 6px; }
.bf .ktile .tile .i:not(.pic) { font-size: 40px; }
.bf .ktile .tile .pt { width: 100%; height: 100%; font-size: 30px; }
.bf .ktile .tile .pt img { object-position: 50% 12%; transform: scale(1.1); }
.bf .kt-id { min-width: 0; }
.bf .ktile .v { margin-top: 9px; font: 500 36px/1 var(--f); letter-spacing: -.024em; white-space: nowrap; }
.bf .ktile .d { margin-top: 8px; font-size: 13px; line-height: 1.25; color: var(--mute); }
.bf .ktile .bbar { display: block; width: 190px; max-width: 100%; margin-top: 9px; }
.bf .ktile.lead { grid-template-columns: minmax(0, auto) minmax(110px, 1fr); align-items: stretch; gap: 22px; padding: 18px 26px 16px 22px; }
.bf .ktile.lead .kt-id { align-self: center; max-width: 250px; }
.bf .ktile.lead .v { font-size: 42px; }
.bf .ktile.hl { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 18px 26px 16px 28px; color: #1A1515; }
.bf .ktile.hl .v { font-size: 62px; letter-spacing: -.03em; margin-top: 12px; }
.bf .ktile.hl .d { margin-top: 10px; font-size: 14px; }
/* a sparkline: one series, a 2 px accent line with its last point marked, a recessive baseline; the window is named above it */
.bf .spark { position: relative; min-height: 64px; border-bottom: 1px solid var(--hair2); }
.bf .spark .plot { position: absolute; left: 0; right: 5px; top: 22px; bottom: 0; }
.bf .spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bf .spark .ln { fill: none; stroke: var(--g); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.bf .spark .ar { fill: rgba(64, 219, 110, .1); stroke: none; }
.bf .spark .dot { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 2px #141010; }
.bf .spark .cap { position: absolute; right: 0; top: 0; font: 700 11px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.bf.css .ktile.hl { background: var(--lacquer); box-shadow: inset 0 0 0 1px rgba(26, 21, 21, .5), 0 3px 0 #8c8a88; }
.bf .ktile.hl .lab, .bf .ktile.hl .d { color: var(--pmute); }

/* the IPO tab: a trading terminal (green phosphor on black; share counts are gold, and nothing else is) */
.bf .term { display: grid; grid-template-columns: 1.28fr 1fr; gap: 0; height: 100%; min-height: 0; border-radius: 9px; overflow: hidden; background: #0A0808; border: 1px solid #2A2424; font: 500 13.5px/1.3 var(--fm); color: #CFCDCA; position: relative; }
.bf .term::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px); }
.bf .w-company .win-body.term-body { padding: 16px 20px 20px; }
.bf .t-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bf .t-col + .t-col { border-left: 1px solid #2A2424; }
.bf .t-bar { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 14px; background: #1A1515; border-bottom: 1px solid #2A2424; color: var(--mute); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex: none; }
.bf .t-bar b { color: var(--a-ink); background: var(--a); padding: 3px 7px 2px; letter-spacing: .06em; }
.bf .t-bar .r { margin-left: auto; }
.bf .t-amber { color: var(--g); } .bf .t-green { color: var(--g); } .bf .t-red { color: var(--r); } .bf .t-dim { color: var(--dim); } .bf .t-gold { color: var(--gold); }
.bf .t-quote { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 0 34px; padding: 16px 16px 6px; align-items: end; flex: none; }
.bf .t-q .k { font-size: 11.5px; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }
.bf .t-q .v { margin-top: 6px; font: 500 30px/1 var(--fm); letter-spacing: -.02em; white-space: nowrap; }
.bf .t-q.sm .v { font-size: 20px; }
.bf .t-chart { position: relative; margin: 12px 16px 0; flex: 1 1 96px; min-height: 96px; border: 1px solid #2A2424; background: linear-gradient(#1c1717 1px, transparent 1px) 0 -1px / 100% 25%, linear-gradient(90deg, #1c1717 1px, transparent 1px) -1px 0 / 12.5% 100%; }
.bf .t-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bf .t-chart .ln { fill: none; stroke: var(--g); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bf .t-chart .ar { fill: rgba(64, 219, 110, .1); stroke: none; }
.bf .t-chart .req { stroke: var(--paper); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.bf .t-chart .tag { position: absolute; right: 6px; font-size: 11.5px; letter-spacing: .08em; color: var(--paper); background: #0A0808; padding: 1px 4px; transform: translateY(-50%); }
.bf .t-chart .tagl { position: absolute; left: 6px; top: 6px; font-size: 11.5px; letter-spacing: .08em; color: var(--mute); }
.bf .t-prog { margin: 14px 16px 0; flex: none; }
.bf .t-prog .row { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
.bf .t-prog .bbar { margin-top: 8px; display: block; }
.bf .t-facts { margin: 14px 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #2A2424; flex: none; }
.bf .t-fact { padding: 10px 12px 11px; border-right: 1px solid #2A2424; min-width: 0; }
.bf .t-fact:last-child { border-right: 0; }
.bf .t-fact .k { font-size: 11.5px; letter-spacing: .06em; color: var(--mute); text-transform: uppercase; white-space: nowrap; }
.bf .t-fact .v { margin-top: 6px; font-size: 18px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .t-fact .d { margin-top: 5px; font-size: 12px; line-height: 1.25; color: var(--mute); }
.bf .t-bell { margin: 0 16px 14px; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; flex: none; }
.bf .bell { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 40px 2px 36px; border: 1px solid transparent; border-radius: 20px; color: var(--a-ink); font: 700 25px/1 var(--fd); letter-spacing: .1em; white-space: nowrap; transition: transform .08s, filter .15s; flex: none; }
.bf.css .bell { background: var(--rubber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--a9); }
.bf .bell .i { font-size: 28px; }
.bf .bell:hover .i { animation: bf-swing .6s ease-in-out infinite alternate; transform-origin: 50% 10%; }
.bf .bell:active { transform: translateY(2px) scale(.97); }
.bf .bell.off { color: var(--mute); cursor: not-allowed; }
.bf.css .bell.off { background: var(--bg4); box-shadow: inset 0 0 0 1px var(--hair); }
.bf .bell.off:hover .i { animation: none; }
.bf .bell.ghost { color: var(--ink); font-size: 18px; padding: 0 34px 2px; }
.bf.css .bell.ghost { background: linear-gradient(var(--bg3), var(--bg2)); box-shadow: inset 0 0 0 1.5px var(--paper), 0 4px 0 #000; }
.bf .t-bell .msg { flex: 1 1 200px; font-size: 12.5px; line-height: 1.4; color: var(--mute); min-width: 0; }
.bf .t-bell.confirm .msg { flex-basis: 100%; order: -1; font-size: 13px; color: #CFCDCA; padding: 9px 12px; border: 1px solid rgba(234, 155, 98, .45); background: var(--w-soft); border-radius: 4px; }
.bf .t-bell .msg b { color: var(--r); font-weight: 500; }
.bf .t-bell.confirm .msg b { color: var(--w); font-weight: 700; }
.bf .t-book { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.bf .t-perk { flex: 1; max-height: 118px; min-height: 84px; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px 10px 12px; border: 1px solid transparent; border-radius: 9px; transition: filter .12s; }
.bf .t-perk:hover { filter: brightness(1.2); }
.bf .t-perk > .i { font-size: 24px; color: var(--g); justify-self: center; }
.bf .t-perk > .i.pic { font-size: 52px; border-radius: 8px; box-shadow: 0 0 0 1px var(--hair2); }
.bf .t-perk .nm { font: 500 14.5px/1.1 var(--fm); color: var(--ink); white-space: nowrap; }
.bf .t-perk .nm span { color: var(--mute); margin-left: 8px; font-size: 12px; }
.bf .t-perk .ds { margin-top: 4px; font: 400 12.5px/1.25 var(--f); color: var(--mute); }
.bf .t-perk .lv { margin-top: 7px; display: flex; gap: 3px; }
.bf .t-perk .lv i { width: 16px; height: 4px; background: #2A2424; }
.bf .t-perk .lv i.on { background: var(--gold); }
.bf .t-buy { min-width: 112px; height: 34px; padding: 0 20px 1px; border: 1px solid transparent; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 700 13px/1 var(--fm); letter-spacing: .04em; color: var(--gold); white-space: nowrap; transition: transform .08s; }
.bf.css .t-buy { background: linear-gradient(var(--bg3), var(--bg2)); box-shadow: inset 0 0 0 1.5px var(--gold), 0 2px 0 #000; }
.bf .t-buy:active { transform: translateY(2px) scale(.96); }
.bf .t-buy .i { font-size: 15px; }
.bf .t-buy.off { color: var(--mute); cursor: not-allowed; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
.bf.css .t-buy.off { background: var(--bg4); box-shadow: inset 0 0 0 1px var(--hair); }
.bf .t-keys { display: flex; gap: 16px; height: 30px; align-items: center; padding: 0 14px; border-top: 1px solid #2A2424; background: #141010; font-size: 11.5px; letter-spacing: .04em; color: var(--mute); white-space: nowrap; overflow: hidden; flex: none; }
.bf .t-keys b { color: #0E0B0B; background: var(--mute); padding: 1px 5px; margin-right: 6px; font-weight: 500; }

/* ---- ELEVATOR: brushed steel, a lacquer nameplate, braille ---- */
.bf .w-elev { width: 520px; }
.bf.art .w-elev { border-image: none; }
.bf .steel { position: relative; padding: 26px 30px 24px; border-radius: 12px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%, rgba(0, 0, 0, .25)), var(--im-steel, repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px)) 0 0 / 256px 256px, #3b3a3a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 40px 90px rgba(0, 0, 0, .65); }
.bf .screw { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8d6d4, #5a5757 70%); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .25); }
.bf .screw::after { content: ''; position: absolute; left: 2px; right: 2px; top: 6px; height: 1px; background: rgba(14, 11, 11, .8); transform: rotate(var(--a, 35deg)); }
.bf .el-top { display: flex; align-items: stretch; gap: 16px; }
.bf .el-disp { flex: none; width: 104px; height: 78px; border-radius: 6px; background: #0E0B0B; box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--g); font: 700 52px/1 var(--fd); text-shadow: 0 0 14px rgba(64, 219, 110, .6); padding-top: 4px; }
.bf .el-disp .i { font-size: 20px; margin-top: -4px; }
.bf .el-plate { min-width: 0; flex: 1; padding: 12px 16px 10px; border: 1px solid transparent; border-radius: 10px; color: #1A1515; display: flex; flex-direction: column; justify-content: center; }
.bf.css .el-plate { background: var(--lacquer); box-shadow: inset 0 0 0 1px rgba(26, 21, 21, .5), 0 3px 0 #8c8a88; }
.bf .el-plate .t { font: 700 12px/1 var(--fd); letter-spacing: .22em; text-transform: uppercase; color: var(--pmute); }
.bf .el-plate .n { margin-top: 7px; font: 700 21px/1.05 var(--f); letter-spacing: -.01em; }
.bf .el-plate .c { margin-top: 5px; font-size: 12.5px; color: var(--pmute); }
.bf .el-x { position: absolute; right: -14px; top: -14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); background: var(--im-close) center / contain no-repeat; }
.bf.art .el-x .i { display: none; }
.bf.css .el-x { right: 10px; top: 8px; width: 30px; height: 30px; }
.bf .el-x:hover { filter: brightness(1.25); }
.bf .el-list { margin-top: 18px; display: grid; gap: 6px; }
.bf .el-row { display: grid; grid-template-columns: 60px 32px 96px 1fr; align-items: center; gap: 14px; width: 100%; padding: 4px 12px 4px 4px; border-radius: 34px 12px 12px 34px; transition: background .15s; }
.bf .el-row:hover { background: rgba(255, 255, 255, .08); }
.bf .el-btn { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font: 700 25px/1 var(--fd); padding-top: 3px; color: #1A1515; background: var(--im-elev) center / contain no-repeat; transition: transform .08s, filter .15s; }
.bf.css .el-btn { background: radial-gradient(circle at 50% 35%, #fff, var(--paper2) 62%, #5a5757 64%, #2A2424 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, .6); }
.bf .el-row:active .el-btn { transform: scale(.94); }
.bf .el-row.here .el-btn { background-image: var(--im-elev-lit); color: #0E0B0B; }
.bf.css .el-row.here .el-btn { background: radial-gradient(circle at 50% 35%, #fff, var(--g) 60%, #5a5757 64%, #2A2424 100%); box-shadow: 0 0 22px rgba(64, 219, 110, .6); }
.bf .el-row.next .el-btn { filter: brightness(.78); }
.bf .el-row.locked { cursor: not-allowed; }
.bf .el-row.locked .el-btn { filter: brightness(.42); color: var(--bg); }
.bf .el-row.locked .el-lab, .bf .el-row.locked .el-th { opacity: .5; }
.bf .braille { display: flex; gap: 5px; }
.bf .braille span { display: grid; grid-template-columns: 5px 5px; grid-auto-rows: 5px; gap: 2.5px; }
.bf .braille i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .28); }
.bf .braille i.on { background: radial-gradient(circle at 35% 30%, #fff, #7b7878 80%); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .7); }
.bf .el-th { width: 96px; height: 54px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .16); background: #141010; }
.bf .el-th .shot { width: 100%; height: 100%; }
.bf .el-row.locked .el-th .shot { filter: grayscale(1) brightness(.8); }
.bf .el-lab { min-width: 0; }
.bf .el-lab .n { font: 700 15.5px/1.1 var(--f); color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .el-lab .d { margin-top: 5px; font: 700 11.5px/1.2 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.bf .el-row.here .el-lab .d { color: var(--g); }
.bf .el-row.next .el-lab .d { color: var(--ink); }
.bf .el-row.next.no .el-lab .d { color: #ff8a7e; }
.bf .el-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 -1px 0 rgba(255, 255, 255, .12); font: 700 11px/1.5 var(--f); letter-spacing: .13em; text-transform: uppercase; color: var(--ink2); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

/* ---- PAUSE and SETTINGS ---- */
.bf .w-pause { width: 1000px; }
.bf .w-pause .win-body { display: grid; grid-template-columns: 300px 1fr; gap: 30px; padding: 22px 30px 28px; }
.bf .menu-col { display: flex; flex-direction: column; gap: 10px; }
.bf .mbtn { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 30px 2px 34px; border: 1px solid transparent; border-radius: 18px; font: 700 16px/1.1 var(--f); transition: transform .08s, filter .15s; }
.bf .mbtn small { display: block; margin-top: 4px; font: 400 12.5px/1 var(--f); color: var(--mute); }
.bf .mbtn .i { font-size: 22px; color: var(--ink2); }
.bf .mbtn:active { transform: translateY(2px) scale(.98); }
.bf .mbtn.pri { color: var(--a-ink); }
.bf .mbtn.pri small, .bf .mbtn.pri .i { color: rgba(14, 11, 11, .72); }
.bf .mbtn.danger { color: var(--r); margin-top: auto; }
.bf .mbtn.danger .i { color: var(--r); }
.bf .mbtn.danger.sure { color: #0E0B0B; }
.bf .mbtn.danger.sure small, .bf .mbtn.danger.sure .i { color: #0E0B0B; }
.bf .mbtn.danger.sure small { font-weight: 500; }
.bf.css .mbtn { background: linear-gradient(var(--bg3), var(--bg2)); box-shadow: inset 0 0 0 1.5px var(--paper), 0 3px 0 #000; }
.bf.css .mbtn:hover { filter: brightness(1.18); }
.bf.css .mbtn.pri { background: var(--rubber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--a9); }
.bf.css .mbtn.danger.sure { background: linear-gradient(#ff6a5c, #e5382d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #7d1711; }
.bf .plaque { margin: auto auto 0; width: 120px; height: 120px; border-radius: 14px; background: var(--im-plaque) center / cover no-repeat; box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .4); }
.bf.css .plaque { display: none; }
.bf .plaque + .mbtn.danger { margin-top: 18px; }
/* the pause window's right half: the settings, or the recovery code in their place (both keep their room, so the window does not jump) */
.bf .pause-r { display: grid; }
.bf .pause-r > * { grid-area: 1 / 1; }
.bf .pause-r > .gone { visibility: hidden; pointer-events: none; }
/* the recovery code (the pause window, on a street that keeps companies): the secret itself, dots until he asks; a field that takes another */
.bf .sect.code .code-blk { display: grid; gap: 8px; padding: 10px 0 2px; }
.bf .sect.code .code-blk + .code-blk { padding-top: 12px; }
.bf .code-line { display: flex; align-items: center; gap: 8px; }
.bf .code-v, .bf .code-line input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair2); background: var(--bg); color: var(--ink); font: 600 13px/36px var(--fm); letter-spacing: .03em; white-space: nowrap; overflow: hidden; outline: 0; }
.bf .code-v { user-select: all; -webkit-user-select: all; cursor: text; }
.bf .code-v.dim { color: var(--dim); user-select: none; -webkit-user-select: none; cursor: default; }
.bf .code-line input::placeholder { color: var(--dim); }
.bf .code-line input:focus { border-color: var(--a); box-shadow: 0 0 0 3px var(--a-soft); }
.bf .code-line .btn { flex: none; padding: 0 14px 2px; }
.bf .code-note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.bf .code-note.bad { color: var(--r); }
.bf .code-line.was .code-note { flex: 1; }
.bf .sect { margin-bottom: 20px; }
.bf .sect:last-child { margin-bottom: 0; }
.bf .sect > .lab { display: block; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); }
.bf .set { display: grid; grid-template-columns: 180px 1fr 54px; align-items: center; gap: 16px; height: 44px; }
.bf .set-n { display: flex; align-items: center; gap: 10px; font: 500 15px/1 var(--f); }
.bf .set-n .i { color: var(--mute); }
.bf .set-v { font: 500 14px/1 var(--f); color: var(--ink2); text-align: right; }
.bf .set small { font-size: 12.5px; color: var(--mute); }
.bf .set-row { display: flex; align-items: center; gap: 14px; }
/* a slider: a groove, a green rod, and the pommel of the club as its knob */
.bf .slider { position: relative; display: block; height: 28px; }
.bf .sl-t, .bf .sl-f { position: absolute; left: 0; top: 9px; height: 10px; border: 1px solid transparent; border-radius: 5px; pointer-events: none; }
.bf .sl-t { right: 0; }
.bf .sl-f { width: calc(14px + (100% - 28px) * var(--f, .5)); }
.bf.css .sl-t { background: #0E0B0B; box-shadow: inset 0 1px 2px #000, 0 1px 0 var(--hair); }
.bf.css .sl-f { background: var(--rubber); }
.bf .slider input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 28px; background: none; margin: 0; cursor: pointer; }
.bf .slider input::-webkit-slider-runnable-track { height: 28px; background: none; }
.bf .slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--im-knob, radial-gradient(circle, #F8F8F6 0 14%, #14A745 16% 100%)) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); transition: transform .1s; }
.bf .slider input:active::-webkit-slider-thumb { transform: scale(1.12); }
.bf .slider input::-moz-range-track { height: 28px; background: none; }
.bf .slider input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--im-knob, radial-gradient(circle, #F8F8F6 0 14%, #14A745 16% 100%)) center / contain no-repeat; }
.bf .slider input:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; border-radius: 14px; }
.bf .chk { width: 28px; height: 28px; flex: none; border-radius: 6px; background: var(--im-check-off) center / contain no-repeat; transition: transform .08s; }
.bf .chk.on { background-image: var(--im-check-on); }
.bf .chk:active { transform: scale(.92); }
.bf .chk .i { display: none; }
.bf.css .chk { background: #0E0B0B; box-shadow: inset 0 0 0 2px var(--paper); color: var(--a-ink); display: grid; place-items: center; }
.bf.css .chk.on { background: var(--a); }
.bf.css .chk.on .i { display: inline-grid; font-size: 18px; }
.bf .segm { display: inline-flex; padding: 3px; border-radius: 10px; background: #0E0B0B; box-shadow: inset 0 1px 2px #000, 0 1px 0 var(--hair); gap: 2px; justify-self: start; }
.bf .segm button { height: 30px; padding: 0 16px; border: 1px solid transparent; border-radius: 7px; font: 700 13px/1 var(--f); color: var(--mute); transition: color .15s; }
.bf .segm button:hover { color: var(--ink); }
.bf .segm button.on { color: #1A1515; }
.bf.css .segm button.on { background: var(--lacquer); }
/* a switch that is there and does nothing yet (rivalry, for a company the street keeps) */
.bf .segm.off { opacity: .45; }
.bf .segm.off button { cursor: default; }
.bf .segm.off button:not(.on):hover { color: var(--mute); }
.bf .tw-rv.later { margin-top: 0; }   /* (its line is a sentence, two lines of it: the card of my own tower is full to the pixel) */
.bf .keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; padding-top: 10px; }
.bf .key .kw { min-width: 0; white-space: normal; line-height: 1.15; }
.bf .key .kw small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.15; color: var(--mute); }
.bf .key { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; font-size: 14px; line-height: 1; color: var(--ink2); white-space: nowrap; }
.bf .key .ks { display: flex; gap: 4px; justify-content: flex-end; }

/* =============================================================================================================
   IPO CEREMONY: the bell is in the picture; the words stand on its dark right half
   ============================================================================================================= */
.bf .ipo { position: absolute; inset: 0; background: #0E0B0B; animation: bf-fade .35s; overflow: hidden; pointer-events: auto; }
.bf .ipo.out { opacity: 0; transition: opacity .5s; pointer-events: none; }
.bf .sp-bg { position: absolute; inset: -2%; will-change: transform; }
.bf .sp-bg > i { position: absolute; inset: 0; background: #0E0B0B center / cover no-repeat; }
.bf .ipo .sp-bg > i { background-image: var(--im-ipo); background-position: 30% center; animation: bf-push 24s ease-out both; }
.bf .ipo-scrim { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(14, 11, 11, .93), rgba(14, 11, 11, .78) 42%, rgba(14, 11, 11, 0) 70%), linear-gradient(0deg, rgba(14, 11, 11, .7), transparent 30%); }
.bf.css .ipo-scrim { background: radial-gradient(ellipse at 62% 45%, rgba(26, 21, 21, .6), rgba(14, 11, 11, .96)); }
.bf .ipo-board { position: absolute; left: 53%; right: 96px; top: 0; bottom: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; animation: bf-in-u .6s .1s var(--ease) both; }
.bf .ipo-over { display: flex; align-items: center; gap: 12px; font: 700 13px/1 var(--f); letter-spacing: .3em; color: var(--ink2); text-transform: uppercase; }
.bf .ipo-over img { height: 30px; width: auto; }
.bf .ipo-h { margin-top: 20px; font: 700 112px/.92 var(--fd); letter-spacing: .012em; text-transform: uppercase; color: var(--ink); text-shadow: 0 3px 0 rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .6); }
.bf .ipo-sh { margin-top: 26px; display: inline-flex; align-items: center; gap: 16px; color: var(--gold); font: 700 40px/1 var(--fd); letter-spacing: .05em; text-transform: uppercase; }
.bf .ipo-sh .i { font-size: 36px; }
.bf .ipo-sh .i.pic { font-size: 64px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(220, 170, 104, .5), 0 8px 20px rgba(0, 0, 0, .5); }
.bf .ipo-next { margin-top: 24px; max-width: 700px; font-size: 20px; line-height: 1.42; color: var(--ink2); }
.bf .ipo-next b { color: var(--ink); }
.bf .ipo-go { margin-top: 30px; }
.bf .ipo-tape { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: #0E0B0B; border-top: 1px solid var(--hair2); overflow: hidden; }
.bf .confetti { position: absolute; inset: 0; pointer-events: none; }
.bf .confetti i { position: absolute; top: -30px; left: var(--x); width: var(--w, 10px); height: var(--h, 16px); background: var(--c); opacity: .95; animation: bf-fall var(--d, 3s) var(--dl, 0s) linear infinite; }
@keyframes bf-fall { 0% { transform: translate3d(0, -40px, 0) rotate(0) rotateX(0); } 100% { transform: translate3d(var(--dx, 40px), 1200px, 0) rotate(var(--r, 540deg)) rotateX(720deg); } }
@keyframes bf-push { from { transform: scale(1); } to { transform: scale(1.07); } }

.bf .tape { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; font: 500 14px/1 var(--fm); letter-spacing: .04em; color: var(--ink2); animation: bf-crawl var(--dur, 60s) linear infinite; width: max-content; }
.bf .tape span { padding: 0 22px; }
.bf .tape b { color: var(--ink); font-weight: 500; margin-right: 8px; }
.bf .tape .tu { color: var(--g); } .bf .tape .td { color: var(--r); }

/* =============================================================================================================
   TITLE AND LOADING
   ============================================================================================================= */
#menu.screen, #loading.screen, .bf .splash { pointer-events: auto; }
.bf .splash { position: absolute; inset: 0; background: #0E0B0B; overflow: hidden; animation: bf-fade .4s; }
.bf .splash.out { opacity: 0; transition: opacity .45s; pointer-events: none; }
/* the key art: a slow push-in, and a few pixels of parallax against the logo (--px, --py: -1..1 from the pointer) */
.bf .title .sp-bg { transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -7px), 0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.bf .title .sp-bg > i { background-image: var(--im-title); background-position: 78% center; animation: bf-push 40s ease-out both; }
.bf .sp-scrim { position: absolute; inset: 0; pointer-events: none; }
.bf .title .sp-scrim { background: linear-gradient(90deg, rgba(14, 11, 11, .95), rgba(14, 11, 11, .82) 30%, rgba(14, 11, 11, 0) 58%), linear-gradient(0deg, rgba(14, 11, 11, .85), rgba(14, 11, 11, 0) 26%), radial-gradient(ellipse at 70% 40%, transparent 40%, rgba(14, 11, 11, .45) 100%); }
.bf.css .title .sp-scrim { background: linear-gradient(120deg, #0E0B0B 30%, #1A1515 70%, #14301c); }
.bf .t-col-l { position: absolute; left: 124px; top: 0; bottom: 44px; width: 640px; display: flex; flex-direction: column; justify-content: center; transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 3px), 0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.bf .brand { display: flex; align-items: center; gap: 14px; font: 700 12.5px/1 var(--f); letter-spacing: .22em; color: var(--mute); text-transform: uppercase; }
.bf .brand .mark { width: 24px; height: 24px; }
.bf .brand img.corp { height: 30px; width: auto; }
.bf .brand .sepd { width: 1px; height: 16px; background: var(--hair3); }
.bf .logo { display: block; width: 600px; height: auto; margin: 14px 0 0 -40px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.bf .wordmark { margin: 22px 0 0 -4px; font: 700 132px/.84 var(--fd); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 0 var(--a9), 0 4px 0 var(--a9), 0 6px 0 var(--a9), 0 18px 40px rgba(0, 0, 0, .6); }
.bf .tagline { margin-top: 14px; font: 400 21px/1.3 var(--f); color: var(--ink2); max-width: 600px; letter-spacing: -.005em; }
.bf .t-menu { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bf .tbtn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 344px; height: 56px; padding: 0 34px 2px 38px; border: 1px solid transparent; border-radius: 18px; font: 700 17px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transition: transform .12s var(--ease), filter .15s; white-space: nowrap; }
.bf .tbtn:hover, .bf .tbtn:focus-visible { transform: translateX(8px); }
.bf .tbtn:active { transform: translateX(8px) translateY(2px) scale(.98); transition-duration: .08s; }
.bf .tbtn.pri { color: var(--a-ink); }
.bf .tbtn.sure { color: #0E0B0B; }
.bf .tbtn .i { font-size: 20px; opacity: .85; }
.bf.css .tbtn { background: linear-gradient(var(--bg3), var(--bg2)); box-shadow: inset 0 0 0 1.5px var(--paper), 0 3px 0 #000, 0 8px 18px rgba(0, 0, 0, .4); }
.bf.css .tbtn:hover { filter: brightness(1.18); }
.bf.css .tbtn.pri { background: var(--rubber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--a9), 0 8px 18px rgba(0, 0, 0, .4); }
.bf.css .tbtn.sure { background: linear-gradient(#ff6a5c, #e5382d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #7d1711; }
.bf .t-note { margin-top: 16px; min-height: 18px; font-size: 13.5px; color: var(--mute); }
.bf .t-nav { margin-top: 18px; display: flex; align-items: center; gap: 16px; font: 500 12.5px/1 var(--f); color: var(--mute); }
.bf .t-nav span { display: flex; align-items: center; gap: 6px; }
.bf .splash-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: #0E0B0B; border-top: 1px solid var(--hair2); overflow: hidden; }
.bf .ver { position: absolute; right: 30px; bottom: 62px; font: 500 12px/1 var(--fm); letter-spacing: .06em; color: var(--ink2); text-align: right; text-shadow: 0 1px 3px #000; }
/* settings and credits over the title */
.bf .t-over { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 10px; background: rgba(14, 11, 11, .66); animation: bf-fade .2s; z-index: 3; }
.bf .w-set { width: 760px; }
.bf .w-set .win-body { padding: 20px 30px 26px; }
.bf .w-cred { width: 860px; }
/* the street (src/net): the Towers window */
.bf .w-towers { width: 1180px; height: 790px; }
.bf .w-towers .win-body { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 26px; padding: 18px 26px 24px; min-height: 0; flex: 1; }
.bf .tw-l { display: flex; flex-direction: column; min-height: 0; }
.bf .tw-q { display: flex; align-items: center; gap: 10px; flex: none; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--hair2); background: var(--bg1); color: var(--mute); }
.bf .tw-q input, .bf .tw-nrow input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 700 16px/1 var(--f); }
.bf .tw-q:focus-within, .bf .tw-nrow input:focus { border-color: var(--a); box-shadow: 0 0 0 3px var(--a-soft); }
.bf .tw-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 118px 58px 58px 52px 92px; align-items: center; gap: 8px; flex: none; width: 100%; height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; font: 600 14.5px/1 var(--f); color: var(--ink2); text-align: left; background: transparent; }
.bf .tw-row.tw-h { height: 34px; margin-top: 12px; font: 700 11px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.bf button.tw-row { cursor: pointer; }
.bf button.tw-row:hover { background: rgba(248, 248, 246, .05); }
.bf button.tw-row.on { background: var(--a-soft); border-color: rgba(20, 167, 69, .5); color: var(--ink); }
.bf .tw-row .rk { color: var(--mute); font-variant-numeric: tabular-nums; }
.bf .tw-row .nm { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); }
.bf .tw-row .nm b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .tw-row.me .nm b { color: var(--g); }
.bf .tw-row .nm em { flex: none; font: 700 10px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; font-style: normal; padding: 3px 6px 4px; border-radius: 6px; background: var(--a-soft); color: var(--g); }
.bf .tw-row .num, .bf .tw-row.tw-h span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.bf .tw-row .stt { text-align: right; color: var(--dim); font-size: 12.5px; }
.bf .tw-row .stt.open { color: var(--g); }
.bf .dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bg4); }
.bf .dot.on { background: var(--g); box-shadow: 0 0 0 3px var(--g-soft); }
.bf .tw-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.bf .tw-none { margin: auto; text-align: center; color: var(--mute); font-size: 15px; }
.bf .tw-none small { display: block; margin-top: 8px; color: var(--dim); font-size: 13px; }
.bf .tw-foot { flex: none; padding-top: 12px; min-height: 28px; font-size: 12.5px; color: var(--dim); }
.bf .tw-page { min-height: 0; }
.bf .tw-card { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid var(--hair2); background: var(--bg1); overflow-y: auto; scrollbar-width: thin; }   /* (a page taller than the window scrolls in its card: nothing hangs out of the frame) */
.bf .tw-card > * { flex: none; }
.bf .tw-card.me { gap: 11px; }   /* my own page carries three settings under the figures */
.bf .tw-over { font: 700 11px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--g); }
.bf .tw-name { font: 800 30px/1.05 var(--f); color: var(--ink); overflow-wrap: anywhere; }
.bf .tw-sub { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mute); }
.bf .tw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.bf .tw-st { display: grid; gap: 7px; padding: 12px 14px 13px; border-radius: 12px; background: var(--bg2); }
.bf .tw-st .lab, .bf .tw-set .lab { font: 700 10.5px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.bf .tw-st .v { font: 700 18px/1 var(--f); color: var(--ink); font-variant-numeric: tabular-nums; }
.bf .tw-set { display: grid; gap: 9px; margin-top: 4px; }
.bf .tw-rv { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }   /* my Rivalry switch: the label and its line on the left, Off / On on the right */
.bf .tw-rv > div { display: grid; gap: 6px; }
.bf .tw-nrow { display: flex; gap: 8px; height: 42px; }
.bf .tw-nrow input { padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair2); background: var(--bg); }
.bf .tw-nrow .btn { height: 42px; }
.bf .tw-note { font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.bf .tw-go { margin-top: auto; height: 54px; width: 100%; font-size: 17px; }
.bf .tw-go.off { opacity: .5; cursor: default; }
.bf .tw-go + .tw-note { text-align: center; }
.bf .tw-row .nm em.rv { background: var(--bg4); color: var(--mute); }
.bf .tw-raid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bf .tw-raid .btn { flex-direction: column; gap: 5px; height: auto; min-height: 46px; padding: 9px 8px 10px; font-size: 13px; white-space: pre; }
.bf .tw-raid .btn small { font: 600 11px/1 var(--f); color: var(--mute); white-space: nowrap; }
.bf .tw-raid .btn.off { opacity: .55; cursor: default; }
.bf .tw-note.bad { color: var(--r); } .bf .tw-note.good { color: var(--g); }   /* the street's answer to a raid, under the two buttons */
/* While you were out: the street's account of an absence (panels.js awayPanel). Four figures, then a line per thing that happened */
.bf .w-away { width: 760px; }
.bf .w-away .win-body { display: grid; gap: 14px; padding: 20px 28px 24px; }
.bf .w-away .tw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.bf .w-away .tw-st .v.good { color: var(--g); } .bf .w-away .tw-st .v.bad { color: var(--r); }
.bf .aw-lines { display: grid; gap: 8px; }
.bf .aw-l { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 14px 12px; border-radius: 12px; background: var(--bg2); font-size: 14px; line-height: 1.4; color: var(--ink2); }
.bf .aw-l .lab { font: 700 10.5px/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.bf .aw-l.bad .lab { color: var(--r); } .bf .aw-l.good .lab { color: var(--g); }
.bf .aw-ok { justify-self: end; height: 46px; padding: 0 24px; gap: 8px; font-size: 15px; }
.bf .w-cred .win-body { padding: 8px 30px 26px; }
.bf .cred { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; }
.bf .cred-sec { padding-top: 16px; }
.bf .cred-sec > .lab { display: block; padding-bottom: 9px; border-bottom: 1px solid var(--hair); color: var(--g); }
.bf .cred-row { padding-top: 10px; }
.bf .cred-row .k { font-size: 12.5px; line-height: 1.2; color: var(--mute); }
.bf .cred-row .v { margin-top: 3px; font: 500 14.5px/1.3 var(--f); color: var(--ink); }
.bf .cred-note { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); font: italic 400 13.5px/1.4 var(--fs); color: var(--ink2); }

.bf .loading .sp-bg > i { background-image: var(--im-loading); background-position: 72% center; animation: bf-push 30s ease-out both; }
.bf .loading .sp-scrim { background: linear-gradient(90deg, rgba(14, 11, 11, .9), rgba(14, 11, 11, .55) 38%, rgba(14, 11, 11, 0) 62%), linear-gradient(0deg, rgba(14, 11, 11, .8), rgba(14, 11, 11, 0) 24%); }
.bf .load { position: absolute; left: 124px; top: 50%; transform: translateY(-54%); width: 640px; }
.bf .load .logo { width: 540px; margin: 18px 0 0 -52px; }
.bf .load .wordmark { font-size: 96px; margin-top: 18px; }
.bf .load-row { margin-top: 44px; display: flex; justify-content: space-between; align-items: baseline; }
.bf .load-l { font: 500 16px/1 var(--f); color: var(--ink); }
.bf .load-p { font: 500 16px/1 var(--fm); color: var(--ink2); }
.bf .load .bbar { display: block; margin-top: 13px; }
.bf .load-tip { margin-top: 28px; display: flex; gap: 14px; align-items: baseline; min-height: 48px; }
.bf .load-tip .lab { color: var(--a-ink); background: var(--a); padding: 6px 8px 5px; border-radius: 5px; flex: none; }
.bf .load-tip p { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink2); }
.bf .load-tip p.sw { animation: bf-in-u .4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .bf .sp-bg, .bf .sp-bg > i, .bf .lt.on, .bf .confetti i, .bf .t-col-l { animation: none !important; transition: none !important; }
  .bf .tbtn:hover, .bf .item:hover, .bf .upg:hover, .bf .cv:hover { transform: none; }
}