/* Cade live chart: the plate, marks and badges of frontend-v1's MarketLiveChart
   (components/market/TradingViewLiveChart.tsx + trading-view-chart-subcomponents.tsx,
   MarketBetTicker.tsx, MarketDeltaBadge.tsx, MarketOutcomeTransition.tsx,
   MarketCasinoOutcomeCard.tsx) and the prediction-odds sparkline
   (duel-frame/MarketOddsSparkline.tsx). Every class is lc-*, scoped under .lc / .lco,
   so it cannot collide with a page's own classes. Values are theirs; see live-chart.js. */
.lc{--lc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;--lc-disp:"Futura PT Cond","Barlow Condensed",Impact,sans-serif;
  --lc-clip:polygon(14px 8px,36% 10px,34.5% 0%,56% 9px,calc(100% - 18px) 0%,calc(100% - 2px) 12%,calc(100% - 12px) 32%,calc(100% - 2px) 50%,calc(100% - 16px) 64%,calc(100% - 4px) 80%,calc(100% - 14px) calc(100% - 6px),77% 100%,50% calc(100% - 8px),53% 100%,14px calc(100% - 2px),8px 72%,2px 50%,10px 20%);
  --lc-tint:#8bd943;position:relative;height:clamp(260px,22vw,420px);min-width:0;isolation:isolate;font-family:var(--lc-mono);color:#f0ead9;-webkit-font-smoothing:antialiased}
.lc[data-tone=down]{--lc-tint:#ea2a46}
.lc *,.lc *::before,.lc *::after{box-sizing:border-box}
/* plate: a #0B0B0B shadow 6/6 behind a #111111 face, both on DS_PANEL_CLIP */
.lc-sh,.lc-face{position:absolute;inset:0;pointer-events:none;clip-path:var(--lc-clip)}
.lc-sh{transform:translate(6px,6px);background:#0b0b0b}
.lc-face{background:#111111}
/* ComicField: a 14px dot field at 7% and three sparks at 6%, in the tone of the trace */
.lc-field{position:absolute;inset:10px;z-index:1;overflow:hidden;pointer-events:none}
.lc-dots{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(circle at center,var(--lc-tint) 0 1px,transparent 1.4px);background-size:14px 14px}
.lc-spark{position:absolute;opacity:.06;fill:var(--lc-tint)}
/* the closed interval, a dim not a tint */
.lc-band{position:absolute;top:10px;bottom:10px;z-index:1;background:rgba(10,10,10,.42);pointer-events:none}
.lc-cv{position:absolute;left:10px;top:10px;z-index:1;pointer-events:none}
/* the three instants: market start, predictions close, market ends */
.lc-vl{position:absolute;top:10px;bottom:10px;z-index:2;width:1px;pointer-events:none;transition:background-color .5s}
.lc-vl.o{background:rgba(255,138,0,.55)}.lc-vl.k{background:rgba(250,244,36,.5)}.lc-vl.c{background:rgba(240,234,217,.45)}
.lc-cap{position:absolute;z-index:3;bottom:1px;transform-origin:top left;transform:rotate(90deg) translateX(-100%);pointer-events:none}
.lc-cap span{display:block;white-space:nowrap;font-family:var(--lc-mono);font-weight:800;text-transform:uppercase;line-height:1;font-size:9px;letter-spacing:.18em}
.lc-cap.o span{color:rgba(255,138,0,.85)}.lc-cap.k span{color:rgba(250,244,36,.85)}.lc-cap.c span{color:rgba(240,234,217,.7)}
.lc.compact .lc-cap span{font-size:8px;letter-spacing:.12em}
.lc.compact .lc-cap.o span{color:rgba(255,138,0,.65)}.lc.compact .lc-cap.k span{color:rgba(250,244,36,.6)}.lc.compact .lc-cap.c span{color:rgba(240,234,217,.45)}
.lc-cap[hidden],.lc-vl[hidden],.lc [hidden]{display:none!important}
/* narrow plots (under narrowAt, 420px by default): the rotated captions would sit under the clock and the curve, so
   they step back; the three coloured lines stay. The cutoff clock reads on one line */
.lc.narrow .lc-cap{display:none}
.lc.narrow .lc-cd:not(.centred) .lc-cdb{flex-direction:row;align-items:center;gap:6px}
/* OutcomeArrow: battle-r2 face5 / face6, stretched into its box as next/image fill does */
.lc-arrow{position:relative;display:inline-block;flex:none}
.lc-arrow img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lc-closeout{position:absolute;z-index:3;transform:translateX(-50%);display:flex;pointer-events:none}
/* the time axis along the very bottom */
.lc-time{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none}
.lc-tick{position:absolute;bottom:2px;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateX(-50%)}
.lc-tick i{display:block;width:1px;height:3px;background:rgba(240,234,217,.35)}
.lc-tick b{display:block;font-family:var(--lc-mono);font-size:8px;font-weight:700;line-height:1;letter-spacing:.06em;color:rgba(240,234,217,.55)}
/* MarketStartingPoint: the bet line's own badge, seated on the price rail */
.lc-start{position:absolute;z-index:3;transform:translate(-50%,-50%);border:2px solid #000;background:rgba(11,11,11,.92);box-shadow:3px 3px 0 #000;font-family:var(--lc-mono);font-weight:800;text-transform:uppercase;line-height:1;color:#faf424;padding:5px 8px;font-size:9px;letter-spacing:.12em;white-space:nowrap;pointer-events:none}
.lc.compact .lc-start{padding:3px 6px;font-size:8px;letter-spacing:.06em}
/* entries pinned to the curve (the viewer's own prediction arrow, 12 x 10) */
.lc-pm{position:absolute;z-index:2;display:flex;width:24px;height:24px;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);cursor:default;color:inherit;font:inherit}
.lc-pm svg{display:block}
.lc-pm.new svg{animation:lc-pm-in .42s cubic-bezier(.2,1.4,.4,1) both}
.lc-pm.mine{z-index:9}.lc-pm:focus-visible{outline:2px solid #f0ead9;outline-offset:1px}
.lc-tip{position:absolute;z-index:20;width:max-content;max-width:190px;border:2px solid #000;background:#f0ead9;padding:6px 8px;text-align:left;color:#000;box-shadow:3px 3px 0 #000;opacity:0;transition:opacity .15s;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);pointer-events:none}
.lc-tip.below{bottom:auto;top:calc(100% + 4px)}.lc-tip.edge{left:0;transform:none}
.lc-pm:hover .lc-tip,.lc-pm:focus-visible .lc-tip,.lc-pm[aria-expanded=true] .lc-tip{opacity:1}
.lc-tip b{display:block;font-family:var(--lc-disp);font-style:oblique;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
.lc-tip small{display:block;white-space:nowrap;font-family:var(--lc-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
/* MarketBetTicker: incoming entries, stacked above the control row */
.lc-ticker{position:absolute;z-index:7;bottom:52px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none}
.lc-ticker span{display:flex;align-items:center;gap:4px;font-family:var(--lc-mono);font-size:10px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;animation:lc-bet-in .32s ease-out both}
.lc-ticker span.out{animation:lc-bet-out .64s ease-out both}
/* the control row: recent outcomes + MarketDeltaBadge */
.lc-ctrl{position:absolute;z-index:8;bottom:14px;left:14px;display:flex;align-items:center;gap:6px;pointer-events:none}
.lc-pills{display:flex;height:30px;align-items:center;gap:4px}
.lc-pill{display:inline-flex;width:30px;height:30px;flex:none;align-items:center;justify-content:center;animation:lc-pill-in .2s ease-out both}
.lc-delta{flex:none;border:2px solid #000;padding:3px 8px;box-shadow:3px 3px 0 #000;background:#8bd943}
.lc-delta[data-direction=below]{background:#ea2a46}
.lc-delta span{display:block;font-family:var(--lc-mono);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#000;white-space:nowrap}
/* DeadlineCountdown: quiet top-left, then top-centre with a pulse in its last ten seconds */
.lc-cd{position:absolute;z-index:4;pointer-events:none;transition:all .5s cubic-bezier(.16,1,.3,1)}
.lc-cd.centred{left:50%!important;transform:translateX(-50%)}
.lc-cd.exit{animation:lc-deadline-exit .24s ease-out forwards}
.lc-cdb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:2px solid #000;background:rgba(11,11,11,.92);box-shadow:3px 3px 0 #000;padding:5px 8px}
.lc-cd.centred .lc-cdb{align-items:center;padding:12px 20px;transform-origin:center;will-change:transform}
.lc-cd.urgent .lc-cdb{animation:lc-deadline-pulse 1.4s ease-in-out infinite}
.lc-cd.compact .lc-cdb{flex-direction:row;align-items:center;gap:5px;padding:3px 5px}
.lc-ey{font-family:var(--lc-mono);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;line-height:1;color:#faf424}
.lc-fg{font-family:var(--lc-mono);font-weight:800;text-transform:uppercase;line-height:1;color:#f0ead9;font-size:9px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.lc-cd.centred .lc-fg{font-size:24px;letter-spacing:.08em}
.lc-cd.compact .lc-fg{font-size:9px;letter-spacing:.06em}
/* predictions closed: the state and the market's time left, top-left */
.lc-shut{position:absolute;z-index:6;display:grid;width:max-content;align-items:start;border:2px solid #000;background:rgba(11,11,11,.94);text-align:left;box-shadow:4px 4px 0 #000;padding:8px 10px;pointer-events:none;animation:lc-deadline-closed-in .24s ease-out}
.lc-shut-t{display:block;justify-self:center;white-space:nowrap;font-family:var(--lc-disp);font-style:oblique;font-weight:500;font-size:17.5px;letter-spacing:.02em;line-height:1;text-transform:uppercase;color:#faf424}
.lc-shut-v{display:block;margin-top:6px;width:100%;white-space:nowrap;font-family:var(--lc-mono);font-weight:800;font-size:18px;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:#f0ead9;font-variant-numeric:tabular-nums}
.lc.compact .lc-shut{display:flex;align-items:center;gap:6px;padding:3px 6px}
.lc.compact .lc-shut-t{font-family:var(--lc-mono);font-style:normal;font-weight:800;font-size:7px;letter-spacing:.08em}
.lc.compact .lc-shut-v{margin:0;width:auto;font-size:9px;letter-spacing:.06em}
/* the closed plate: MARKET / RESOLVING, centred */
.lc-plate{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid #000;background:#0b0b0b;box-shadow:3px 3px 0 #000;padding:12px 20px;pointer-events:none;animation:lc-deadline-closed-in .24s ease-out forwards}
.lc-plate small{font-family:var(--lc-mono);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;line-height:1;color:#ea2a46}
.lc-plate b{font-family:var(--lc-mono);font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;line-height:1;color:#f0ead9}
/* a move through the bet line: flash + jolt */
.lc-flash{position:absolute;inset:10px;z-index:4;pointer-events:none;opacity:0}
.lc-flash.up{background:rgba(151,255,73,.18);animation:lc-move-flash .7s ease-out forwards}
.lc-flash.down{background:rgba(255,42,87,.18);animation:lc-move-flash .7s ease-out forwards}
.lc.jolt-up{animation:lc-jolt-up .52s ease-out}.lc.jolt-down{animation:lc-jolt-down .52s ease-out}
/* MarketCasinoOutcomeCard (compact), the public verdict over the plot */
.lc-res{position:absolute;z-index:9;top:10px;left:10px;bottom:10px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lc-card{position:relative;border:5px solid var(--c);background:#171716;padding:6px;box-shadow:8px 8px 0 #000;animation:lc-card-in .35s cubic-bezier(.2,1.4,.4,1) both}
.lc-res.exit .lc-burst{animation:lc-card-out .2s linear forwards}
.lc-card>span{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 12px;border:2px solid #000;background:rgba(0,0,0,.6);font-family:var(--lc-disp);font-style:oblique;font-weight:500;font-size:42px;line-height:.78;color:var(--c);text-shadow:2px 2px 0 #000}
.lc-card i{display:block;width:38px;height:38px;flex:none;background:var(--c);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.lc-card i.gone{visibility:hidden}
.lc.compact .lc-card>span{font-size:30px;gap:8px;padding:5px 10px}.lc.compact .lc-card i{width:28px;height:28px}
.lc-fly{position:absolute;z-index:10;left:0;top:0;width:30px;height:30px;pointer-events:none}
/* MarketPayoutBurst, casino variant (compact): the marquee, the copy strip, your pick, NET PNL */
.lc-burst{position:relative;display:flex;min-width:0;max-width:88%;flex-direction:column;align-items:center;text-align:center;text-transform:uppercase;transform:rotate(-2deg);filter:drop-shadow(5px 6px 0 #000)}
.lc-burst .lc-card{animation:lc-stamp .45s cubic-bezier(.34,1.56,.64,1) both}
.lc-copy{position:relative;margin-top:-4px;transform:rotate(1deg);display:flex;align-items:center;justify-content:center;border:3px solid #000;background:var(--c);padding:6px 16px;font-family:var(--lc-disp);font-style:oblique;font-weight:500;font-size:28px;line-height:1;color:#000;box-shadow:5px 5px 0 #000;animation:lc-win-copy .62s cubic-bezier(.16,1,.3,1) .18s both}
.lc-stake{position:relative;margin-top:6px;border:2px solid #000;background:#0b0b0b;padding:4px 10px;font-family:var(--lc-mono);font-weight:800;font-size:11px;letter-spacing:.12em;line-height:1;color:#f0ead9;white-space:nowrap}
.lc-fig{position:relative;margin-top:8px;min-width:180px;transform:rotate(-1deg);border:4px solid #000;background:var(--c);padding:8px 16px;font-family:var(--lc-mono);font-weight:800;font-size:32px;line-height:1;letter-spacing:.04em;color:#000;box-shadow:7px 7px 0 #000;animation:lc-payout .7s cubic-bezier(.16,1,.3,1) .28s both}
.lc-fig small{display:block;margin-bottom:4px;font-size:.38em;letter-spacing:.14em;text-transform:uppercase}
.lc-fig span{display:block;font-variant-numeric:tabular-nums}
.lc.compact .lc-card>span{font-size:30px}.lc.compact .lc-copy{font-size:20px;padding:4px 12px}.lc.compact .lc-fig{font-size:22px;min-width:140px;padding:6px 12px}.lc.compact .lc-stake{font-size:9px}
.lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the crosshair readout, in the plate of the source's "Market started" note */
.lc-read{position:absolute;z-index:11;border:2px solid #000;background:rgba(11,11,11,.9);padding:4px 8px;box-shadow:2px 2px 0 #000;font-family:var(--lc-mono);font-weight:800;text-transform:uppercase;line-height:1.35;pointer-events:none;white-space:nowrap}
.lc-read span{display:block;font-size:8px;letter-spacing:.1em;color:rgba(240,234,217,.5)}
.lc-read b{display:block;font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.lc{touch-action:pan-y}
/* MarketEndCountdown: the round's last ten seconds, its eyebrow in the down red */
.lc-end .lc-ey{color:#ea2a46}
/* entries pop on the curve; a whale is half as big again */
.lc-pm.whale svg{transform:scale(1.5)}
.lc-pm.whale.new svg{animation:lc-pm-whale .5s cubic-bezier(.2,1.4,.4,1) both}
/* the viewer's open position (opt-in, api.position): the entry tag in the tooltip's cream plate
   with the side's colour as a keyline, the readout in MarketDeltaBadge's plate */
.lc-pos-m{z-index:9}
.lc-ptag{position:absolute;z-index:8;display:flex;align-items:center;gap:0;border:2px solid #000;border-left:6px solid var(--c,#91bb4f);background:#f0ead9;color:#000;box-shadow:3px 3px 0 #000;padding:4px 7px 4px 6px;font-family:var(--lc-mono);font-size:9px;font-weight:800;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.lc-ptag>*+*::before{content:"\00B7";margin:0 .45em;opacity:.55}
.lc-ptag b{font-family:var(--lc-disp);font-style:oblique;font-weight:500;font-size:12px;letter-spacing:.06em}
.lc-pnl{position:absolute;z-index:8;transform-origin:top right;border:2px solid #000;background:#8bd943;color:#000;box-shadow:3px 3px 0 #000;padding:5px 9px 6px;pointer-events:none;text-align:right;transition:background-color .25s}
.lc-pnl[data-state=losing],.lc-pnl[data-state=lost]{background:#ea2a46}
.lc-pnl small{display:block;font-family:var(--lc-mono);font-size:8px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase;opacity:.7}
.lc-pnl b{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:4px;font-family:var(--lc-mono);font-size:13px;font-weight:800;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.lc-pnl b>span+span::before{content:"\00B7";margin:0 .4em}
.lc-pnl b>span:empty{display:none}
.lc.compact .lc-pnl{padding:3px 6px 4px}.lc.compact .lc-pnl small{font-size:7px}
.lc.compact .lc-pnl b{font-size:10px;margin-top:3px}.lc.compact .lc-pnl .lc-pnl-p{flex-basis:100%}.lc.compact .lc-pnl .lc-pnl-p::before{content:none}
.lc.compact .lc-ptag{font-size:8px;padding:3px 5px 3px 4px;border-left-width:4px}.lc.compact .lc-ptag b{font-size:10px}
/* the "You" / "Your entry" label reads at 11px on a compact plot too (2026-10-06: nothing under 11px) */
.lc.compact .lc-ptag b{font-size:11px}
.lc-pnl.final{animation:lc-pnl-flash 1.5s ease-out}
@keyframes lc-pnl-flash{0%,33%,66%{transform:scale(1.12);box-shadow:6px 6px 0 #000}16%,50%,83%{transform:scale(1);box-shadow:3px 3px 0 #000}100%{transform:none}}
@keyframes lc-deadline-pulse{0%,100%{transform:scale(1);box-shadow:3px 3px 0 #000}50%{transform:scale(1.065);box-shadow:6px 6px 0 #000}}
@keyframes lc-deadline-exit{from{opacity:1}to{opacity:0}}
@keyframes lc-deadline-closed-in{from{opacity:0}to{opacity:1}}
@keyframes lc-jolt-up{0%,100%{transform:translate3d(0,0,0)}18%{transform:translate3d(-3px,-3px,0) rotate(-.25deg)}38%{transform:translate3d(3px,2px,0) rotate(.2deg)}58%{transform:translate3d(-2px,-1px,0)}78%{transform:translate3d(1px,1px,0)}}
@keyframes lc-jolt-down{0%,100%{transform:translate3d(0,0,0)}18%{transform:translate3d(3px,3px,0) rotate(.25deg)}38%{transform:translate3d(-3px,-2px,0) rotate(-.2deg)}58%{transform:translate3d(2px,1px,0)}78%{transform:translate3d(-1px,-1px,0)}}
@keyframes lc-move-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes lc-bet-in{from{opacity:0;transform:translate3d(-6px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes lc-bet-out{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-4px,0)}}
@keyframes lc-pill-in{from{opacity:0;transform:scale(.65) translateY(-10px)}to{opacity:1;transform:none}}
@keyframes lc-pm-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes lc-card-in{from{opacity:0;transform:scale(.8) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes lc-card-out{to{opacity:0}}
@keyframes lc-pm-whale{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1.5)}}
@keyframes lc-stamp{from{opacity:0;transform:scale(2.6) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes lc-win-copy{from{opacity:0;transform:scale(2.1) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(1deg)}}
@keyframes lc-payout{from{opacity:0;transform:translateY(14px) rotate(-1deg);letter-spacing:.3em}to{opacity:1;transform:translateY(0) rotate(-1deg);letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){
  .lc,.lc *{animation:none!important;transition:none!important}
}
.lc.still,.lc.still *{animation:none!important;transition:none!important}

/* the prediction-odds sparkline (MarketOddsSparkline): one green line over hairline rules */
.lco{--lc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;margin:0;display:flex;min-width:0;flex-direction:column}
.lco figcaption{margin-bottom:8px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lco-k{font-family:var(--lc-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ffa800}
.lco-v{font-family:var(--lc-mono);font-weight:700;font-size:13px;line-height:1.1;color:#91bb4f;font-variant-numeric:tabular-nums}
.lco-plot{position:relative;width:100%;height:var(--lco-h,96px)}
.lco-plot canvas{position:absolute;inset:0;display:block}