/* lf-engine.css — the Engine panel (v2). Injected layer, never a bundle change.
   Theming: the surface is sampled from the door's own background (--lfe-bg) and the accent from the door's
   accent (--lf-engine-accent), so Bag Daddy and Faisal keep their palettes without this file naming them. */

[data-lfengine] {
	--lf-engine-accent: var(--color-luna, #d8b25a);
	--lfe-accent: var(--lf-engine-accent);
	--lfe-bg: #0b0d12;
	--lfe-card: color-mix(in srgb, var(--lfe-bg) 82%, #ffffff 4%);
	--lfe-line: rgba(255, 255, 255, 0.08);
	--lfe-dim: rgba(255, 255, 255, 0.52);
	--lfe-text: rgba(255, 255, 255, 0.93);
	--lfe-up: #2ebd85;
	--lfe-down: #f6465d;
	--lfe-gold: #f0b90b;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

/* ── the pill in the header ─────────────────────────────────────────────────────────────────────── */
#lf-engine-btn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 30px; margin: 0 4px 0 6px; padding: 0 10px; vertical-align: middle;
	border-radius: 13px; border: 1px solid var(--lf-engine-accent, #d8b25a);
	background: color-mix(in srgb, var(--lf-engine-accent, #d8b25a) 14%, transparent);
	color: var(--lf-engine-accent, #d8b25a);
	font: 700 10.5px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
	transition: transform 120ms ease-out;
}
#lf-engine-btn:active { transform: scale(0.96); }
#lf-engine-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: #2ebd85; flex: 0 0 auto; }
#lf-engine-btn .dot.stale { background: #f0b90b; }
#lf-engine-btn .dot.paused { background: #f6465d; }

html.lfe-lock, html.lfe-lock body { overflow: hidden !important; }

/* ── full-screen sheet: above the REAL MONEY bar and the bottom nav, never under them ────────────── */
#lf-engine-sheet {
	position: fixed; inset: 0; z-index: 2147483600;
	display: flex; align-items: stretch; justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0; pointer-events: none; transition: opacity 160ms ease-out;
	font: 500 13px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--lfe-text);
}
#lf-engine-sheet.open { opacity: 1; pointer-events: auto; }
#lf-engine-sheet .panel {
	position: relative; width: 100%; max-width: 560px; height: 100%; height: 100dvh;
	display: flex; flex-direction: column;
	background: var(--lfe-bg);
	box-shadow: 0 0 0 1px var(--lfe-line);
	padding-top: env(safe-area-inset-top, 0px);
}
#lf-engine-sheet button { font: inherit; color: inherit; }

.lfe-top {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px; border-bottom: 1px solid var(--lfe-line);
	background: linear-gradient(180deg, color-mix(in srgb, var(--lfe-accent) 10%, transparent), transparent);
}
.lfe-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: 0.03em; }
.lfe-logo { width: 26px; height: 26px; color: var(--lfe-text); flex: 0 0 auto; }
.lfe-btn {
	height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	font-weight: 600 !important; font-size: 13.5px !important;
}
.lfe-btn:active { transform: scale(0.97); }

.lfe-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }

/* stats grid */
.lfe-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--lfe-line); }
.lfe-cell { padding: 10px 14px; border-right: 1px solid var(--lfe-line); border-bottom: 1px solid var(--lfe-line); min-width: 0; }
.lfe-cell:nth-child(3n) { border-right: 0; }
.lfe-cell:nth-child(n+4) { border-bottom: 0; }
.lfe-cell .k { color: var(--lfe-dim); font-size: 12px; letter-spacing: 0.02em; }
.lfe-cell .v b { display: block; margin-top: 3px; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfe-cell .v b.red { color: var(--lfe-down); }
.lfe-cell .v b.green { color: var(--lfe-up); }
.lfe-cell .v b.gold { color: var(--lfe-gold); font-size: 16px; }

/* cards */
.lfe-card { margin: 12px 10px 0; border: 1px solid var(--lfe-line); border-radius: 12px; overflow: hidden; background: var(--lfe-card); }
.lfe-card-head, .lfe-full-head {
	display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px;
	border-bottom: 1px solid var(--lfe-line); font-weight: 700; font-size: 13.5px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--lfe-accent) 9%, transparent), transparent);
}
.lfe-led { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 2px; vertical-align: 0;
	background: var(--lfe-down); box-shadow: 0 0 8px var(--lfe-down); }
.lfe-canvas { display: block; width: 100%; height: 250px; }

/* tabs */
.lfe-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-bottom: 1px solid var(--lfe-line); }
.lfe-tab-btn {
	height: 38px; border-radius: 8px; cursor: pointer; font-weight: 700 !important; letter-spacing: 0.04em;
	border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.03); color: var(--lfe-dim) !important;
}
.lfe-tab-btn.on {
	color: #fff !important; border-color: color-mix(in srgb, var(--lfe-accent) 70%, #fff 10%);
	background: linear-gradient(180deg, color-mix(in srgb, var(--lfe-accent) 75%, #fff 8%), color-mix(in srgb, var(--lfe-accent) 55%, #000 10%));
	box-shadow: 0 0 14px color-mix(in srgb, var(--lfe-accent) 35%, transparent);
}

/* zones table */
.lfe-zhead, .lfe-zrow { display: grid; grid-template-columns: 44px 1fr 74px 92px; align-items: center; gap: 6px; padding: 0 12px; }
.lfe-zhead { height: 34px; color: var(--lfe-dim); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--lfe-line); }
.lfe-zhead span:last-child, .lfe-zrow .ds { text-align: right; }
.lfe-zrow { min-height: 54px; border-bottom: 1px solid var(--lfe-line); }
.lfe-zrow:last-child { border-bottom: 0; }
.lfe-zrow.dim { opacity: 0.5; }
.lfe-zrow .tf { color: var(--lfe-dim); font-weight: 800; }
.lfe-zrow .zn { color: var(--lfe-dim); font-size: 12.5px; }
.lfe-zrow .zn b { font-size: 13.5px; }
.lfe-zrow.short .zn b { color: var(--lfe-down); }
.lfe-zrow.long .zn b { color: var(--lfe-up); }
.lfe-zrow .st { font-size: 12.5px; color: var(--lfe-dim); }
.lfe-zrow .st.reach { color: var(--lfe-gold); font-weight: 700; }
.lfe-zrow .st.near { color: var(--lfe-text); }
.lfe-zrow .ds { font-weight: 700; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.lfe-zrow .ds i { width: 34px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; }
.lfe-zrow .ds i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); background: rgba(255, 255, 255, 0.45); }

/* gates / position */
.lfe-table { padding: 2px 0; }
.lfe-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--lfe-line); }
.lfe-row:last-child { border-bottom: 0; }
.lfe-row .num { font-weight: 700; }
.pill { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
	border: 1px solid rgba(255, 255, 255, 0.14); color: var(--lfe-dim); }
.pill.ok { color: var(--lfe-up); border-color: color-mix(in srgb, var(--lfe-up) 55%, transparent); }
.pill.bad { color: var(--lfe-down); border-color: color-mix(in srgb, var(--lfe-down) 55%, transparent); }
.lfe-empty { padding: 26px 16px; color: var(--lfe-dim); text-align: center; }

/* footer */
.lfe-foot {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--lfe-line); font-size: 13px; background: var(--lfe-bg);
}
.lfe-feed { display: inline-flex; align-items: center; gap: 8px; }
.lfe-sync { color: var(--lfe-dim); }
.lfe-sync b { color: var(--lfe-text); }
.lfe-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lfe-dim); }
.lfe-dot.live { background: var(--lfe-up); box-shadow: 0 0 6px var(--lfe-up); }
.lfe-dot.lagging { background: var(--lfe-gold); }
.lfe-dot.paused { background: var(--lfe-down); }

/* expanded chart */
.lfe-full { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--lfe-bg); z-index: 3;
	padding-top: env(safe-area-inset-top, 0px); }
.lfe-full.on { display: flex; }
.lfe-canvas-full { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }

/* start-up checklist */
.lfe-boot { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center;
	padding: 18px; background: var(--lfe-bg); }
.lfe-boot.on { display: flex; }
.lfe-boot-card { width: 100%; max-width: 420px; border: 1px solid var(--lfe-line); border-radius: 14px; overflow: hidden; background: var(--lfe-card); }
.lfe-boot-head { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--lfe-line);
	background: linear-gradient(180deg, color-mix(in srgb, var(--lfe-accent) 12%, transparent), transparent); }
.lfe-boot-brand { display: flex; align-items: center; gap: 14px; padding: 20px 18px 8px; }
.lfe-boot-brand .lfe-logo { width: 44px; height: 44px; }
.lfe-boot-brand b { display: block; font-size: 26px; font-weight: 800; letter-spacing: 0.02em; }
.lfe-boot-brand span { color: var(--lfe-dim); font-size: 12.5px; }
.lfe-steps { list-style: none; margin: 6px 0 0; padding: 0 18px; }
.lfe-steps li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0 9px 20px; position: relative;
	color: rgba(255, 255, 255, 0.28); font-size: 15px; }
.lfe-steps li::before { content: ""; position: absolute; left: 2px; width: 7px; height: 7px; transform: rotate(45deg);
	background: rgba(255, 255, 255, 0.2); }
.lfe-steps li.now, .lfe-steps li.done { color: var(--lfe-text); }
.lfe-steps li.now::before, .lfe-steps li.done::before { background: var(--lfe-down); }
.lfe-steps li em { font-style: normal; color: var(--lfe-dim); font-size: 13px; }
.lfe-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px 20px; }
.lfe-bar .trk { flex: 1 1 auto; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.lfe-bar .trk i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #ef5a5a, #b9282d);
	transition: width 140ms ease-out; }
.lfe-bar span { min-width: 40px; text-align: right; font-weight: 700; color: var(--lfe-text); }

@media (min-width: 700px) {
	#lf-engine-sheet .panel { height: calc(100dvh - 32px); margin-top: 16px; border-radius: 14px; overflow: hidden; }
	.lfe-canvas { height: 300px; }
}

/* v3.1 · asset dropdown — rows cascade in one after another */
#lf-engine-sheet .lfe-pick { position: relative; padding: 10px 14px; border-bottom: 1px solid var(--lfe-line); z-index: 5; }
#lf-engine-sheet .lfe-pick-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lfe-line); background: rgba(255,255,255,0.03); color: #fff; font: 700 15px/1 ui-sans-serif, system-ui, -apple-system, sans-serif; cursor: pointer; }
#lf-engine-sheet .lfe-pick-btn .lbl { color: var(--lfe-dim); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
#lf-engine-sheet .lfe-pick-btn b { flex: 1; text-align: left; color: var(--lfe-down); letter-spacing: .02em; }
#lf-engine-sheet .lfe-pick-btn .chev { width: 18px; height: 18px; color: var(--lfe-dim); transition: transform .22s ease; }
#lf-engine-sheet .lfe-pick.open .lfe-pick-btn { border-color: var(--lfe-accent, #2ebd85); }
#lf-engine-sheet .lfe-pick.open .chev { transform: rotate(180deg); }
#lf-engine-sheet .lfe-menu { position: absolute; left: 14px; right: 14px; top: calc(100% - 4px); padding: 6px; border-radius: 12px; border: 1px solid var(--lfe-line); background: var(--lfe-bg, #0b0d12); box-shadow: 0 18px 40px rgba(0,0,0,.55); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
#lf-engine-sheet .lfe-pick.open .lfe-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .16s ease, transform .16s ease; }
#lf-engine-sheet .lfe-opt { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: #fff; font: 700 14px/1 ui-sans-serif, system-ui, -apple-system, sans-serif; text-align: left; cursor: pointer; opacity: 0; transform: translateY(-8px); }
#lf-engine-sheet .lfe-opt span { color: var(--lfe-dim); font-weight: 600; font-size: 12.5px; }
#lf-engine-sheet .lfe-opt em { font-style: normal; font-size: 11px; color: var(--lfe-accent, #2ebd85); letter-spacing: .04em; text-transform: uppercase; }
#lf-engine-sheet .lfe-opt.on { background: color-mix(in srgb, var(--lfe-accent, #2ebd85) 14%, transparent); }
#lf-engine-sheet .lfe-opt:active { background: rgba(255,255,255,0.07); }
#lf-engine-sheet .lfe-pick.open .lfe-opt { animation: lfe-cascade .26s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes lfe-cascade { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #lf-engine-sheet .lfe-pick.open .lfe-opt { animation: none; opacity: 1; transform: none; } }

/* ── v5 · KLE layout in the door's own theme. lf-engine.js copies the app tokens into these variables on every
   paint and on a light/dark switch; the values below are only the fallback before that first read. ─────────── */
[data-lfengine] {
	--lfe-bg: #0b0d12;
	--lfe-bg2: #11141b;
	--lfe-raised: #11141b;
	--lfe-card: color-mix(in srgb, var(--lfe-raised) 78%, transparent);
	--lfe-line: rgba(255, 255, 255, 0.10);
	--lfe-dim: rgba(255, 255, 255, 0.55);
	--lfe-text: rgba(255, 255, 255, 0.93);
}
#lf-engine-sheet .panel { background: radial-gradient(120% 55% at 50% 0%, var(--lfe-bg2) 0%, var(--lfe-bg) 72%); color: var(--lfe-text); }
#lf-engine-sheet .lfe-top { background: color-mix(in srgb, var(--lfe-bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#lf-engine-sheet .lfe-btn { border-color: var(--lfe-line); background: color-mix(in srgb, var(--lfe-raised) 70%, transparent); color: var(--lfe-text); }
#lf-engine-sheet .lfe-pick { border-bottom: 0; padding-bottom: 0; }
#lf-engine-sheet .lfe-pick-btn { background: var(--lfe-card); border-color: var(--lfe-line); color: var(--lfe-text); }
#lf-engine-sheet .lfe-menu { background: var(--lfe-raised); border-color: var(--lfe-line); }
#lf-engine-sheet .lfe-opt { color: var(--lfe-text); }
#lf-engine-sheet .lfe-stats {
	margin: 12px 10px 0; border: 1px solid var(--lfe-line); border-radius: 14px; overflow: hidden;
	background: var(--lfe-card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#lf-engine-sheet .lfe-cell { border-color: var(--lfe-line); }
#lf-engine-sheet .lfe-cell .k { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.07em; color: var(--lfe-dim); }
#lf-engine-sheet .lfe-cell .v b { font-weight: 600; color: var(--lfe-text); }
#lf-engine-sheet .lfe-cell .v b.red { color: var(--lfe-down); }
#lf-engine-sheet .lfe-cell .v b.green { color: var(--lfe-up); }
#lf-engine-sheet .lfe-cell .v b.gold { color: var(--lfe-accent); }
#lf-engine-sheet .lfe-card { border-radius: 14px; border-color: var(--lfe-line); background: var(--lfe-card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#lf-engine-sheet .lfe-foot { background: color-mix(in srgb, var(--lfe-bg) 80%, transparent); border-top-color: var(--lfe-line); }

#lf-engine-sheet .lfe-tfs { display: flex; gap: 6px; }
#lf-engine-sheet .lfe-tf {
	height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--lfe-line); background: transparent;
	color: var(--lfe-text); font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, sans-serif !important; cursor: pointer;
}
#lf-engine-sheet .lfe-tf.on { background: var(--lfe-accent); border-color: var(--lfe-accent); color: var(--lfe-bg); }

#lf-engine-sheet .lfe-lwc { position: relative; height: 300px; }
#lf-engine-sheet .lfe-lwc-chart { position: absolute; inset: 0; }
#lf-engine-sheet .lfe-lwc-ov { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#lf-engine-sheet .lfe-lwc.empty .lfe-lwc-chart { visibility: hidden; }
#lf-engine-sheet .lfe-lwc.empty::after {
	content: "Chart unavailable — no candles in the feed"; position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center; color: var(--lfe-dim); font-size: 12px;
}
@media (min-height: 820px) { #lf-engine-sheet .lfe-lwc { height: 340px; } }

/* ── v6 · the battlefield inside the Engine: fighting bar between chart and tabs, army cards in the tab ──── */
#lf-engine-sheet .lfe-bf-at { font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--lfe-dim); text-transform: uppercase; }
#lf-engine-sheet .lfe-bf-at.stale { color: var(--lfe-down); }
#lf-engine-sheet .lfe-fight-body { padding: 10px 14px 12px; }
#lf-engine-sheet .lfe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
#lf-engine-sheet .lfe-chip { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--lfe-line); background: color-mix(in srgb, var(--lfe-raised) 60%, transparent);
	font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--lfe-dim); }
#lf-engine-sheet .lfe-chip b { color: var(--lfe-text); font-size: 11px; }
#lf-engine-sheet .lfe-chip.bid { border-color: color-mix(in srgb, var(--lfe-up) 45%, transparent); }
#lf-engine-sheet .lfe-chip.bid b { color: var(--lfe-up); }
#lf-engine-sheet .lfe-chip.ask { border-color: color-mix(in srgb, var(--lfe-down) 45%, transparent); }
#lf-engine-sheet .lfe-chip.ask b { color: var(--lfe-down); }
#lf-engine-sheet .lfe-track { position: relative; height: 26px; margin-top: 26px; border-radius: 13px; border: 1px solid var(--lfe-line);
	background: linear-gradient(90deg, color-mix(in srgb, var(--lfe-up) 50%, transparent), color-mix(in srgb, var(--lfe-text) 6%, transparent) 50%, color-mix(in srgb, var(--lfe-down) 50%, transparent)); }
#lf-engine-sheet .lfe-chips + .lfe-track { margin-top: 0; }
#lf-engine-sheet .lfe-tz { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; opacity: .85; }
#lf-engine-sheet .lfe-tz.long { background: color-mix(in srgb, var(--lfe-up) 80%, transparent); }
#lf-engine-sheet .lfe-tz.short { background: color-mix(in srgb, var(--lfe-down) 80%, transparent); }
#lf-engine-sheet .lfe-tz.neutral { background: color-mix(in srgb, var(--lfe-accent) 70%, transparent); }
#lf-engine-sheet .lfe-seam { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--lfe-gold);
	box-shadow: 0 0 10px color-mix(in srgb, var(--lfe-gold) 80%, transparent); }
#lf-engine-sheet .lfe-now { position: absolute; top: -24px; transform: translateX(-50%); font: 800 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--lfe-text); white-space: nowrap; }
#lf-engine-sheet .lfe-track-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--lfe-dim); }
#lf-engine-sheet .lfe-scale { display: flex; justify-content: space-between; margin-top: 8px; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--lfe-dim); }

#lf-engine-sheet .lfe-bf { padding: 12px; display: grid; gap: 10px; }
#lf-engine-sheet .lfe-bf-kick { font: 800 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--lfe-accent); }
#lf-engine-sheet .lfe-bf-story { font: 400 14.5px/1.6 Georgia, "Times New Roman", serif; color: var(--lfe-text); opacity: .92; }
#lf-engine-sheet .lfe-bf-story b.val { color: var(--lfe-text); font-weight: 700; opacity: 1; }
#lf-engine-sheet .lfe-bf-story i.tf { font-style: normal; font-weight: 700; color: var(--lfe-dim); letter-spacing: .04em; }
#lf-engine-sheet .lfe-bf-story b.dir { color: var(--lfe-gold); }
#lf-engine-sheet .lfe-votes { display: flex; flex-wrap: wrap; gap: 7px; }
#lf-engine-sheet .lfe-vote { display: flex; align-items: baseline; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--lfe-line); border-left-width: 3px;
	font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--lfe-text); }
#lf-engine-sheet .lfe-vote span { color: var(--lfe-dim); }
#lf-engine-sheet .lfe-vote.bull { border-left-color: var(--lfe-up); color: var(--lfe-up); }
#lf-engine-sheet .lfe-vote.bear { border-left-color: var(--lfe-down); color: var(--lfe-down); }
#lf-engine-sheet .lfe-army { border: 1px solid var(--lfe-line); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--lfe-raised) 50%, transparent); }
#lf-engine-sheet .lfe-army h4 { margin: 0; padding: 10px 12px; font: 800 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase;
	border-bottom: 1px solid var(--lfe-line); color: var(--lfe-text); }
#lf-engine-sheet .lfe-army.bull h4 { color: var(--lfe-up); box-shadow: inset 0 3px 0 var(--lfe-up); }
#lf-engine-sheet .lfe-army.bear h4 { color: var(--lfe-down); box-shadow: inset 0 3px 0 var(--lfe-down); }
#lf-engine-sheet .lfe-army.res h4 { color: var(--lfe-gold); box-shadow: inset 0 3px 0 var(--lfe-accent); }
#lf-engine-sheet .lfe-army.grave { opacity: .62; }
#lf-engine-sheet .lfe-arm-item { margin: 8px 10px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--lfe-line); font: 600 12.5px/1.4 Georgia, serif; color: var(--lfe-text); }
#lf-engine-sheet .lfe-arm-item .tf { margin-left: 6px; font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; color: var(--lfe-dim); }
#lf-engine-sheet .lfe-arm-item.hot { border-color: color-mix(in srgb, var(--lfe-gold) 55%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--lfe-gold) 22%, transparent); }
#lf-engine-sheet .lfe-arm-item.none { opacity: .6; font-style: italic; }

/* ── v7 · the fighting bar, copied verbatim from levels_cards.html (the battlefield tab) and scoped to the
   Engine panel by a build step: #lf-engine-sheet .lfe-bfx -> #lf-engine-sheet .lfe-bfx. Not copied: the page-wide ADR
   vignette (the page overlay) — it would darken the whole terminal. ── */
#lf-engine-sheet .lfe-bfx { --mono: ui-monospace, "SF Mono", Menlo, monospace; margin: 12px 10px 0; font-family: Georgia, "Times New Roman", serif; }
#lf-engine-sheet .lfe-bfx *, #lf-engine-sheet .lfe-bfx *::before, #lf-engine-sheet .lfe-bfx *::after { box-sizing: border-box; }
@keyframes bfPulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
/* ── the fighting bar: a spatial map of the fight, not a number ────────────── */
#lf-engine-sheet .lfe-bfx .bf-fight {
  margin:14px 0 4px; padding:18px 16px 22px; border-radius:13px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
#lf-engine-sheet .lfe-bfx .bf-bookline { margin:-24px 0 14px; font:700 9.5px var(--mono);
  letter-spacing:.07em; color:#8d9ab3; }
#lf-engine-sheet .lfe-bfx .bf-bookline b.bid { color:#5fd9a4; }
#lf-engine-sheet .lfe-bfx .bf-bookline b.ask { color:#ff8792; }
#lf-engine-sheet .lfe-bfx .bf-fight h3 {
  margin:0 0 44px; font:800 10px var(--mono); letter-spacing:.20em;
  text-transform:uppercase; color:#93a1bb;
}
#lf-engine-sheet .lfe-bfx .bf-track {
  position:relative; margin-top:10px; height:26px; isolation:isolate; border-radius:11px; overflow:visible;
  background:linear-gradient(90deg,
    rgba(53,201,139,.55) 0%, rgba(53,201,139,.22) 38%,
    rgba(255,255,255,.06) 50%,
    rgba(239,98,111,.22) 62%, rgba(239,98,111,.55) 100%);
  border:1px solid rgba(255,255,255,.10);
}
#lf-engine-sheet .lfe-bfx .bf-seam {
  position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, transparent, #f0d18a, transparent);
  box-shadow:0 0 10px rgba(240,209,138,.75);
}
#lf-engine-sheet .lfe-bfx .bf-pin {
  position:absolute; top:-7px; width:3px; height:40px; border-radius:2px; opacity:1;
}
/* a zone with thickness is drawn as a band, not a hairline: the width IS the imbalance */
#lf-engine-sheet .lfe-bfx .bf-band {
  position:absolute; z-index:1; top:-4px; height:34px; border-radius:3px; opacity:.55;
  border-left:1px solid rgba(255,255,255,.35); border-right:1px solid rgba(255,255,255,.35);
}
#lf-engine-sheet .lfe-bfx .bf-band.long { background:linear-gradient(180deg, rgba(53,201,139,.55), rgba(53,201,139,.18)); }
#lf-engine-sheet .lfe-bfx .bf-band.short { background:linear-gradient(180deg, rgba(239,98,111,.55), rgba(239,98,111,.18)); }
#lf-engine-sheet .lfe-bfx .bf-band.neutral { background:linear-gradient(180deg, rgba(227,182,83,.60), rgba(227,182,83,.20)); }
#lf-engine-sheet .lfe-bfx .bf-band.hot { opacity:.9; animation:bfPulse 1.5s ease-in-out infinite; }
/* tap a timeframe pill: everything else steps back, price never does */
#lf-engine-sheet .lfe-bfx .bf-band.dim, #lf-engine-sheet .lfe-bfx .bf-pin.dim { opacity:.20; }
#lf-engine-sheet .lfe-bfx .bf-item.dim { opacity:.20; }
#lf-engine-sheet .lfe-bfx .bf-mtf .bf-vote { cursor:pointer; user-select:none; }
#lf-engine-sheet .lfe-bfx .bf-mtf .bf-vote.active { box-shadow:0 0 0 2px rgba(244,220,154,.75), inset 0 0 18px rgba(244,220,154,.22); outline:1px solid rgba(244,220,154,.35); }

/* real depth: the book, drawn where it actually rests */
#lf-engine-sheet .lfe-bfx .bf-depth { position:absolute; inset:0; pointer-events:none; opacity:.55; z-index:0; }
#lf-engine-sheet .lfe-bfx .bf-depth .d { position:absolute; bottom:0; width:2px; border-radius:1px; opacity:.75; max-height:55%; }
#lf-engine-sheet .lfe-bfx .bf-depth .d.bid { background:rgba(53,201,139,.75); }
#lf-engine-sheet .lfe-bfx .bf-depth .d.ask { background:rgba(239,98,111,.75); }
#lf-engine-sheet .lfe-bfx .bf-wall {
  position:absolute; transform:translateX(-50%); font:800 8.5px var(--mono);
  letter-spacing:.04em; white-space:nowrap; padding:1px 4px; border-radius:3px;
}
#lf-engine-sheet .lfe-bfx .bf-wall.bid { color:#bfe9d5; background:rgba(53,201,139,.18); top:-14px; }
#lf-engine-sheet .lfe-bfx .bf-wall.ask { color:#ffd2d7; background:rgba(239,98,111,.18); top:-14px; }
#lf-engine-sheet .lfe-bfx .bf-wallmark { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; pointer-events:auto; z-index:2; }
#lf-engine-sheet .lfe-bfx .bf-wallmark.bid { background:#35c98b; box-shadow:0 0 6px rgba(53,201,139,.7); }
#lf-engine-sheet .lfe-bfx .bf-wallmark.ask { background:#ef626f; box-shadow:0 0 6px rgba(239,98,111,.7); }
#lf-engine-sheet .lfe-bfx .bf-testing { color:#f0d18a; font-weight:600; }

/* what happened at a zone, from board_state.json */
#lf-engine-sheet .lfe-bfx .bf-band [data-state] { position:absolute; }
#lf-engine-sheet .lfe-bfx .bf-band.tapped { box-shadow:0 0 14px rgba(240,209,138,.55); animation:bfPulse 1.3s ease-in-out infinite; }
#lf-engine-sheet .lfe-bfx .bf-band.held { box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 0 12px rgba(255,255,255,.25); }
#lf-engine-sheet .lfe-bfx .bf-band.re-armed {
  opacity:.9; outline:1px dashed rgba(240,209,138,.75); outline-offset:1px;
  box-shadow:0 0 12px rgba(240,209,138,.35);
}
#lf-engine-sheet .lfe-bfx .bf-tag.re-armed { color:#f0d18a; }
#lf-engine-sheet .lfe-bfx .bf-band.broken { opacity:.42; filter:grayscale(.45); }
#lf-engine-sheet .lfe-bfx .bf-band.broken::before {
  content:""; position:absolute; inset:0; border-radius:3px; z-index:2;
  background:
    linear-gradient(115deg, transparent 46%, rgba(255,255,255,.55) 47%, transparent 48%),
    linear-gradient(63deg,  transparent 61%, rgba(255,255,255,.40) 62%, transparent 63%),
    linear-gradient(78deg,  transparent 33%, rgba(255,255,255,.30) 34%, transparent 35%),
    linear-gradient(140deg, transparent 72%, rgba(255,255,255,.35) 73%, transparent 74%);
  mix-blend-mode:screen; pointer-events:none;
}
#lf-engine-sheet .lfe-bfx .bf-band.broken.short { box-shadow:inset 0 0 0 1px rgba(239,98,111,.55); }
#lf-engine-sheet .lfe-bfx .bf-band.broken.long  { box-shadow:inset 0 0 0 1px rgba(53,201,139,.45); }
#lf-engine-sheet .lfe-bfx .bf-band.broken::after {
  content:""; position:absolute; inset:0; border-radius:3px;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.45) 0 3px, transparent 3px 7px);
}
#lf-engine-sheet .lfe-bfx .bf-band-tick.broken { background:#7d8798; box-shadow:none; }
#lf-engine-sheet .lfe-bfx .bf-tag {
  position:absolute; z-index:4; top:auto; bottom:-15px; transform:translateX(-50%); font:800 8.5px var(--mono);
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:#cfd8e8;
}
#lf-engine-sheet .lfe-bfx .bf-tag.r1 { bottom:-26px; }
#lf-engine-sheet .lfe-bfx .bf-tag.r2 { bottom:-37px; font-size:8px; }
#lf-engine-sheet .lfe-bfx .bf-tag.tapped { color:#f0d18a; }
#lf-engine-sheet .lfe-bfx .bf-tag.broken { color:#8b96ab; }
#lf-engine-sheet .lfe-bfx .bf-band-tick {
  position:absolute; top:-8px; width:2px; height:42px; background:rgba(255,255,255,.85);
  border-radius:2px; box-shadow:0 0 6px rgba(255,255,255,.5);
}
/* the price flag lifts clear of the header and of the pins it passes */
#lf-engine-sheet .lfe-bfx .bf-now { top:-27px; }
#lf-engine-sheet .lfe-bfx .bf-now.hi { top:-40px; }   /* steps up when a state tag shares its column */
#lf-engine-sheet .lfe-bfx .bf-pin.long { background:#35c98b; box-shadow:0 0 8px rgba(53,201,139,.7); }
#lf-engine-sheet .lfe-bfx .bf-pin.short { background:#ef626f; box-shadow:0 0 8px rgba(239,98,111,.7); }
#lf-engine-sheet .lfe-bfx .bf-pin.neutral { background:#e3b653; box-shadow:0 0 8px rgba(227,182,83,.6); }
#lf-engine-sheet .lfe-bfx .bf-pin.near { animation:bfPulse 1.4s ease-in-out infinite; }
#lf-engine-sheet .lfe-bfx .bf-now {
  position:absolute; top:-16px; transform:translateX(-50%);
  font:800 10px var(--mono); color:#fff; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
#lf-engine-sheet .lfe-bfx .bf-now::after {
  content:""; position:absolute; left:50%; top:14px; width:0; height:0;
  transform:translateX(-50%); border-left:5px solid transparent;
  border-right:5px solid transparent; border-top:6px solid #fff;
}
#lf-engine-sheet .lfe-bfx .bf-scale { position:relative; }
#lf-engine-sheet .lfe-bfx .bf-scale::before, #lf-engine-sheet .lfe-bfx .bf-scale::after {
  content:""; position:absolute; top:-32px; width:1px; height:12px;
  background:rgba(255,255,255,.35);
}
#lf-engine-sheet .lfe-bfx .bf-scale::before { left:0; }
#lf-engine-sheet .lfe-bfx .bf-scale::after  { right:0; }
#lf-engine-sheet .lfe-bfx .bf-scale {
  display:flex; justify-content:space-between; margin-top:30px;
  font:700 9.5px var(--mono); letter-spacing:.10em; color:#8d9ab3;
}
/* ── breach flash: one shot when a wall actually breaks ──────────────────────── */
@keyframes breachSplit {
  0%   { filter:none; transform:none; box-shadow:none; }
  15%  { filter:hue-rotate(-12deg) saturate(1.8); transform:translateX(-2px);
         box-shadow:-3px 0 rgba(255,60,80,.75), 3px 0 rgba(60,140,255,.75); }
  35%  { transform:translateX(2px); box-shadow:3px 0 rgba(255,60,80,.55), -3px 0 rgba(60,140,255,.55); }
  55%  { filter:none; transform:translateX(-1px); box-shadow:none; }
  100% { filter:none; transform:none; box-shadow:none; }
}
#lf-engine-sheet .lfe-bfx .bf-band.breach-flash { animation: breachSplit .62s steps(4, end) 1; }
@media (prefers-reduced-motion: reduce) { #lf-engine-sheet .lfe-bfx .bf-band.breach-flash { animation:none; } }
/* ── volume-scaled price seam: intensity is transacted size ──────────────────── */
@keyframes seamPulse {
  0%,100% { box-shadow:0 0 6px rgba(244,220,154,.55); }
  50%     { box-shadow:0 0 18px rgba(244,220,154,.95); }
}
#lf-engine-sheet .lfe-bfx .bf-now.seam-hot { animation: seamPulse var(--seam-dur, 1.6s) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #lf-engine-sheet .lfe-bfx .bf-now.seam-hot { animation:none; } }
#lf-engine-sheet .lfe-bfx .bf-telemetry { display:flex; flex-wrap:wrap; gap:6px; margin:-26px 0 16px; }
#lf-engine-sheet .lfe-bfx .bf-tel {
  display:inline-flex; align-items:baseline; gap:5px; padding:4px 9px; border-radius:6px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
  font:700 9.5px var(--mono); letter-spacing:.07em; color:#8d9ab3;
}
#lf-engine-sheet .lfe-bfx .bf-tel b { font-size:11px; letter-spacing:.03em; color:#cfd8e8; }
#lf-engine-sheet .lfe-bfx .bf-tel.bid { border-color:rgba(53,201,139,.35); background:rgba(53,201,139,.08); }
#lf-engine-sheet .lfe-bfx .bf-tel.bid b { color:#5fd9a4; }
#lf-engine-sheet .lfe-bfx .bf-tel.ask { border-color:rgba(239,98,111,.35); background:rgba(239,98,111,.08); }
#lf-engine-sheet .lfe-bfx .bf-tel.ask b { color:#ff8792; }
#lf-engine-sheet .lfe-bfx .bf-tel.imb b.up { color:#5fd9a4; }
#lf-engine-sheet .lfe-bfx .bf-tel.imb b.dn { color:#ff8792; }
#lf-engine-sheet .lfe-bfx .bf-fight { margin: 0; }
#lf-engine-sheet .lfe-bfx .bf-miss { font: 600 12px var(--mono); color: #8d9ab3; margin-top: -30px; }
#lf-engine-sheet .lfe-bfx .bf-miss-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 10px var(--mono); letter-spacing: .1em; color: #8d9ab3; }
#lf-engine-sheet .lfe-vote i { font-style: normal; font-size: 9px; letter-spacing: .06em; opacity: .8; margin-left: 2px; text-transform: none; color: var(--lfe-dim); }
#lf-engine-sheet .lfe-vote i.new { color: #f0d18a; font-weight: 800; }
#lf-engine-sheet .lfe-bf-kick { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#lf-engine-sheet .lfe-bf-kick span { letter-spacing: .14em; }
#lf-engine-sheet .lfe-bf-kick span.ok { color: var(--lfe-up); }
#lf-engine-sheet .lfe-bf-kick span.late { color: var(--lfe-gold); }
/* on a phone the chips wrap to two rows; the raised price flag (.bf-now.hi, top -40px) needs clear air under them */
#lf-engine-sheet .lfe-bfx .bf-telemetry { margin-bottom: 34px; }

/* ── v8 · the armies behind the stats: bear behind Instrument (facing right), bull behind In Play (facing left),
   the middle column left clear for the numbers. The side the bias favours is lit; the other steps back. ── */
#lf-engine-sheet .lfe-stats { position: relative; isolation: isolate; }
#lf-engine-sheet .lfe-stats::before, #lf-engine-sheet .lfe-stats::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 46%; z-index: -1; pointer-events: none;
	background-size: cover; background-repeat: no-repeat; opacity: .34; transition: opacity .6s ease, filter .6s ease;
}
#lf-engine-sheet .lfe-stats::before {
	left: 0; background-image: url("/lf-bf-bear.jpg"); background-position: 55% 42%;
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%); mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
}
#lf-engine-sheet .lfe-stats::after {
	right: 0; background-image: url("/lf-bf-bull.jpg"); background-position: 40% 48%;
	-webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 100%); mask-image: linear-gradient(270deg, #000 30%, transparent 100%);
}
#lf-engine-sheet .lfe-stats.bias-bear::before { opacity: .62; }
#lf-engine-sheet .lfe-stats.bias-bear::after { opacity: .16; filter: grayscale(.6); }
#lf-engine-sheet .lfe-stats.bias-bull::after { opacity: .62; }
#lf-engine-sheet .lfe-stats.bias-bull::before { opacity: .16; filter: grayscale(.6); }
#lf-engine-sheet .lfe-stats .lfe-cell { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }

/* ── v9 · owner's duel image behind the stats (bear left, bull right, the chart clash between them). The same
   image is drawn twice and masked to each half, so the bias can still light one army and dim the other. ── */
#lf-engine-sheet .lfe-stats::before, #lf-engine-sheet .lfe-stats::after {
	left: 0; right: 0; width: auto; background-image: url("/lf-bf-duel.jpg?v=3"); background-size: cover; background-position: 50% 45%;
	opacity: .5;
}
#lf-engine-sheet .lfe-stats::before {
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 58%); mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 58%);
}
#lf-engine-sheet .lfe-stats::after {
	-webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 58%, #000 100%); mask-image: linear-gradient(90deg, transparent 42%, #000 58%, #000 100%);
}
#lf-engine-sheet .lfe-stats.bias-bear::before, #lf-engine-sheet .lfe-stats.bias-bull::after { opacity: .78; filter: none; }
#lf-engine-sheet .lfe-stats.bias-bear::after, #lf-engine-sheet .lfe-stats.bias-bull::before { opacity: .22; filter: grayscale(.7) brightness(.8); }
/* a soft veil over the bright chart in the middle column so Last and Distance stay readable */
#lf-engine-sheet .lfe-stats .lfe-cell:nth-child(3n+2) { background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12)); }
/* the side that is losing fades but keeps its colour: greyscale hid the bull green glow (owner, 7 Nov) */
#lf-engine-sheet .lfe-stats.bias-bear::after, #lf-engine-sheet .lfe-stats.bias-bull::before { opacity: .38; filter: brightness(.9); }