/* ---------- octagon: 3D broadcast (v-octagon.js); the no-WebGL fallback keeps its rules in views2.css ---------- */
#vOctagon{--disp:"Segoe UI Black","Arial Black",Inter,system-ui,sans-serif;background:#06050a}
#vOctagon .bear{--tc:#ff4d5e;--td:#2a0508}
#vOctagon .bull{--tc:#22d36b;--td:#04210f}
#ocCanvasWrap{position:absolute;left:0;top:60px;width:940px;height:544px;overflow:hidden;cursor:grab;touch-action:none;background:#06050a}
#ocCanvasWrap:active{cursor:grabbing}
#ocCanvasWrap canvas{display:block}
/* replay letterbox */
.ocLb{position:absolute;left:0;width:940px;height:0;background:#000;z-index:4;pointer-events:none;transition:height .35s ease}
#ocLbT{top:60px}#ocLbB{top:604px;transform:translateY(-100%)}
#vOctagon.ocRepOn .ocLb{height:40px}
#vOctagon.ocRepOn #ocHud,#vOctagon.ocRepOn #ocLow{opacity:0}
#ocRep{position:absolute;left:24px;top:112px;z-index:6;display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .3s}
#ocRep i{width:10px;height:10px;border-radius:50%;background:#ff3b4a;box-shadow:0 0 10px #ff3b4a;animation:ocPulse 1s infinite}
#ocRep b{font:italic 900 26px/1 var(--disp);color:#fff;letter-spacing:.04em;text-shadow:0 2px 0 #000}
#ocRep small{font:900 10px Inter,sans-serif;letter-spacing:.22em;color:var(--gold)}
#vOctagon.ocRepOn #ocRep{opacity:1;transform:none}
/* top bar: portrait plates, slanted HP bars with a damage trail, clock */
#ocHud{position:absolute;left:0;top:68px;width:940px;height:120px;pointer-events:none;z-index:5;transition:opacity .3s}
.ocPl{position:absolute;top:0;width:384px;height:84px}
.ocPl.bear{left:12px}.ocPl.bull{left:544px}
.ocPl .pt{position:absolute;top:0;width:56px;height:56px;border-radius:10px;display:grid;place-items:center;overflow:hidden;pointer-events:auto;cursor:pointer;
 background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--tc) 38%,#15101f),#0b0912);box-shadow:inset 0 0 0 2px var(--tc),0 0 18px color-mix(in srgb,var(--tc) 40%,transparent)}
.ocPl .pt:hover{filter:brightness(1.2)}
.ocPl.bear .pt{left:0}.ocPl.bull .pt{right:0}
.ocPl.you .pt::after{content:'YOU';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font:900 8px Inter,sans-serif;letter-spacing:.14em;color:#2a1500;background:var(--gold);border-radius:3px;padding:1px 4px}
.ocPl .nm{position:absolute;top:2px;font:italic 900 25px/1 var(--disp);color:#fff;text-shadow:0 2px 0 var(--td),0 0 14px rgba(0,0,0,.85)}
.ocPl.bear .nm{left:66px}.ocPl.bull .nm{right:66px}
.ocPl .pc{position:absolute;top:-5px;display:flex;align-items:baseline;gap:1px;font:italic 900 34px/1 var(--disp);color:var(--tc);font-variant-numeric:tabular-nums;
 text-shadow:0 2px 0 var(--td),0 0 16px color-mix(in srgb,var(--tc) 55%,transparent)}
.ocPl .pc small{font-size:14px;color:#fff}
.ocPl.bear .pc{right:8px}.ocPl.bull .pc{left:8px}
.ocPl .bar{position:absolute;top:33px;height:18px;width:318px;overflow:hidden;background:linear-gradient(#17131f,#09070e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ocPl.bear .bar{left:66px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.ocPl.bull .bar{right:66px;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%)}
.ocPl .bar i{position:absolute;top:0;bottom:0}
.ocPl.bear .bar i{left:0}.ocPl.bull .bar i{right:0}
.ocPl .bar .tr{background:#fff;opacity:.85;transition:width .8s ease-in .35s}
.ocPl.bear .bar .fl{background:linear-gradient(90deg,#7a1220,#ff4d5e 70%,#ff9aa4)}
.ocPl.bull .bar .fl{background:linear-gradient(270deg,#0b6b33,#22d36b 70%,#9dffc6)}
.ocPl .bar .fl::after{content:'';position:absolute;inset:0 0 50% 0;background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0))}
.ocPl.low .bar .fl{animation:ocLowHp .5s steps(2) infinite}
@keyframes ocLowHp{50%{filter:brightness(1.7)}}
.ocPl .sub{position:absolute;top:58px;font:800 10.5px Inter,sans-serif;letter-spacing:.1em;color:#dad8ea;text-shadow:0 1px 3px #000,0 0 8px #000;white-space:nowrap}
.ocPl.bear .sub{left:66px}.ocPl.bull .sub{right:66px}
#ocMid{position:absolute;left:404px;top:-4px;width:132px;height:74px;text-align:center;background:linear-gradient(#1a1524,#0a0810);border:1px solid #3a3450;border-top:3px solid var(--btc);
 clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
#ocMid small{display:block;margin-top:7px;font:900 9.5px Inter,sans-serif;letter-spacing:.16em;color:#cfcde0}
#ocMid b{display:block;font:italic 900 29px/1.08 var(--disp);color:#fff;font-variant-numeric:tabular-nums}
#ocLive{display:inline-flex;align-items:center;gap:5px;font:900 8.5px Inter,sans-serif;letter-spacing:.2em;color:var(--mut)}
#ocLive.on{color:#ff7d88}
#ocLive.on::before{content:'';width:6px;height:6px;border-radius:50%;background:#ff3b4a;box-shadow:0 0 8px #ff3b4a;animation:ocPulse 1s infinite}
@keyframes ocPulse{50%{opacity:.25}}
#ocSpark{position:absolute;left:360px;top:80px;width:220px;text-align:center}
#ocSpark svg{display:block;overflow:visible;filter:drop-shadow(0 1px 2px #000)}
#ocSpark small{display:block;margin-top:2px;font:900 8.5px Inter,sans-serif;letter-spacing:.22em;color:#c9c6dc;text-shadow:0 1px 3px #000}
/* announcer */
#ocAnn{position:absolute;left:0;width:940px;top:250px;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:8;opacity:0}
#ocAnn::before{content:'';position:absolute;left:-20px;right:-20px;top:22px;bottom:18px;transform:skewY(-3deg);background:linear-gradient(90deg,transparent,rgba(8,6,16,.82) 20%,rgba(8,6,16,.82) 80%,transparent);
 border-top:2px solid rgba(247,147,26,.7);border-bottom:2px solid rgba(247,147,26,.7)}
#ocAnn b{position:relative;font:italic 900 72px/1 var(--disp);letter-spacing:-.01em;padding:0 12px;background:linear-gradient(#fff 32%,#ffe08a 56%,#f7931a 82%);
 -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #2a1500)}
#ocAnn.bull b{background-image:linear-gradient(#fff 30%,#a8ffc9 56%,#22d36b 84%);filter:drop-shadow(0 4px 0 #04210f)}
#ocAnn.bear b{background-image:linear-gradient(#fff 30%,#ffb0b7 56%,#ff4d5e 84%);filter:drop-shadow(0 4px 0 #2a0508)}
#ocAnn small{position:relative;margin-top:6px;font:900 12px Inter,sans-serif;letter-spacing:.28em;color:#fff}
#ocAnn.on{animation:ocAnn var(--ms,1.6s) ease-out forwards}
#ocAnn.on b{animation:ocAnnB var(--ms,1.6s) cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes ocAnn{0%{opacity:0}8%{opacity:1}84%{opacity:1}100%{opacity:0}}
@keyframes ocAnnB{0%{transform:scale(2.3)}12%{transform:scale(.95)}18%,100%{transform:scale(1)}}
/* named strike callout */
.ocCall{position:absolute;top:446px;z-index:7;display:flex;align-items:center;gap:10px;height:56px;min-width:300px;max-width:400px;padding:0 16px 0 9px;cursor:pointer;opacity:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(14,11,24,.96),rgba(14,11,24,.84));border-left:4px solid var(--tc);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.ocCall.bear{left:12px}
.ocCall.bull{right:352px;flex-direction:row-reverse;text-align:right;padding:0 9px 0 16px;border-left:0;border-right:4px solid var(--tc);clip-path:polygon(0 0,100% 0,100% 100%,12px 100%)}
.ocCall.on{opacity:1;pointer-events:auto;animation:ocCallIn .38s cubic-bezier(.2,1.3,.4,1),ocCallOut .35s ease-in 3.45s forwards}
.ocCall.bull.on{animation-name:ocCallInR,ocCallOut}
.ocCall:hover{background:rgba(40,34,64,.96)}
.ocCall .t{flex:1;min-width:0}
.ocCall .t small{display:block;font:900 9px Inter,sans-serif;letter-spacing:.2em;color:var(--tc)}
.ocCall.crit .t small{color:var(--gold)}
.ocCall .t b{display:block;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocCall .t span{display:block;font-size:11px;font-weight:700;color:#b9b6cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocCall .d{font:italic 900 26px var(--disp);color:var(--tc);text-shadow:0 2px 0 var(--td)}
@keyframes ocCallIn{from{transform:translateX(-110%);opacity:0}}
@keyframes ocCallInR{from{transform:translateX(110%);opacity:0}}
@keyframes ocCallOut{to{opacity:0;transform:translateY(-8px)}}
/* damage popups (projected from the 3D hit point) */
#ocFx{position:absolute;left:0;top:60px;width:940px;height:544px;pointer-events:none;z-index:6;overflow:hidden}
.ocPop{position:absolute;transform:translate(-50%,-50%);font:italic 900 22px/1 var(--disp);color:var(--tc);white-space:nowrap;text-shadow:0 2px 0 var(--td),0 0 12px rgba(0,0,0,.9);animation:ocPop 1.25s ease-out forwards}
.ocPop.big{font-size:40px;color:#fff;-webkit-text-stroke:1.5px var(--tc)}
.ocPop i{font-size:11px;font-style:normal;letter-spacing:.12em;margin-left:4px;color:#fff}
@keyframes ocPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}22%{transform:translate(-50%,-62%) scale(1)}100%{opacity:0;transform:translate(-50%,-150%)}}
/* lower third */
#ocLow{position:absolute;left:12px;width:916px;top:570px;height:26px;display:flex;align-items:center;gap:10px;padding-right:12px;z-index:5;pointer-events:none;
 background:linear-gradient(90deg,rgba(10,8,18,.94),rgba(10,8,18,.6));border-left:4px solid var(--btc);font:600 11.5px Inter,sans-serif;color:#d8d6ea;white-space:nowrap;transition:opacity .3s}
#ocTag{align-self:stretch;display:flex;align-items:center;padding:0 10px;background:var(--btc);color:#2a1500;font:900 10px Inter,sans-serif;letter-spacing:.18em}
#ocLow .hint{position:static;margin-left:auto;font-size:11px;color:var(--mut)}
/* rail: tale of the tape (volume) + fight feed */
#ocRail{position:absolute;left:950px;top:68px;width:320px;height:536px;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(rgba(22,18,38,.97),rgba(11,9,19,.97));border:1px solid #2c2846;border-radius:14px}
#ocRail h3{margin:0;padding:7px 14px 6px;flex:none;display:flex;align-items:center;gap:8px;font:900 11px Inter,sans-serif;letter-spacing:.16em;color:var(--btc);border-bottom:1px solid #26223a;background:linear-gradient(90deg,rgba(247,147,26,.16),transparent 70%)}
#ocRail h3 span{margin-left:auto;color:var(--mut);font-weight:600;font-size:11px;letter-spacing:.02em}
#ocRail h3 .dot{width:8px;height:8px;border-radius:50%;background:#ff3b4a;box-shadow:0 0 8px #ff3b4a;animation:ocPulse 1s infinite}
#ocTape{flex:none;padding:8px 14px 2px}
.ocStack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#2a2744}
.ocStack i{height:100%;transition:width .4s}.ocStack .r{background:var(--bear)}.ocStack .n{background:#8d8aa8}.ocStack .g{background:var(--bull)}
.ocStackL{display:flex;justify-content:space-between;margin:4px 0 4px;font:700 10.5px Inter,sans-serif;color:#a9a7c0}
.ocStackL b{font:italic 900 13px var(--disp);color:#fff;margin-right:2px}.ocStackL .bc b{color:var(--bear)}.ocStackL .uc b{color:var(--bull)}
.ocSr{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:8px;height:22px;font:italic 900 14px var(--disp);font-variant-numeric:tabular-nums}
.ocSr .bc{color:var(--bear)}.ocSr .uc{color:var(--bull);text-align:right}
.ocSr .m{height:18px;display:flex;align-items:center;justify-content:center;font:800 9.5px Inter,sans-serif;letter-spacing:.14em;color:#a9a7c0;background:linear-gradient(90deg,var(--bear) 0 var(--p),var(--bull) var(--p) 100%) bottom/100% 3px no-repeat}
#ocFlow{flex:none;padding:6px 14px 8px;border-bottom:1px solid #26223a}
#ocFlow svg{display:block;overflow:visible}
#ocList{flex:1;overflow:hidden;padding:4px 8px}
.ocRow{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;height:42px;padding:0 6px 0 11px;border-radius:9px;cursor:pointer}
.ocRow:hover{background:rgba(255,255,255,.05)}
.ocRow::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--tc)}
.ocRow .t{min-width:0}
.ocRow .t b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocRow .t small{display:block;font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocRow .d{text-align:right}
.ocRow .d b{display:block;font:italic 900 16px/1.1 var(--disp);color:var(--tc)}
.ocRow .d small{display:block;font-size:9.5px;font-weight:700;color:var(--gold);letter-spacing:.04em}
.ocRow.new{animation:ocRowIn .45s ease-out}
@keyframes ocRowIn{from{background:rgba(247,147,26,.3);transform:translateX(26px)}}
.ocIc{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;font:900 13px/1 Inter,sans-serif;color:var(--tc);background:color-mix(in srgb,var(--tc) 18%,transparent);box-shadow:inset 0 0 0 1.5px var(--tc)}
.ocRow.crit .ocIc{color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.ocEmpty{padding:14px 8px;color:var(--mut);font-size:12.5px;line-height:1.45}
@media (prefers-reduced-motion:reduce){#ocAnn.on,#ocAnn.on b,.ocCall.on,.ocPop,.ocRow.new{animation-duration:.01s}}
/* Smart Money below the minimum signal: grey hatched bars, no numbers, no bull-share line */
#vOctagon.ns .ocPl .bar i{display:none}
#vOctagon.ns .ocPl .bar{background:repeating-linear-gradient(135deg,#2a2a40 0 7px,#1b1b2c 7px 14px)}
#vOctagon.ns .ocPl .pc{color:#8d8aa8}
.ocNs{font-size:11.5px;line-height:1.35;min-height:40px}
.ocNs .nosig{white-space:normal}
.ocNs small{display:block;margin-top:2px;font-size:10.5px;color:#8d8aa8}
#vOctagon.ns .ocPl .pc small{display:none}