/* Sectors page: bulls against bears. Loaded only by sectors.html, after app.css.
   Every rule is scoped to .sx (the page root) or .hdr .xp (the XP pill), so nothing
   leaks into the shared design system. The bridge below maps app.css tokens onto the
   short names this page uses, so both themes follow the site's theme toggle. */
:root{--pop:cubic-bezier(.34,1.56,.64,1);--snap:cubic-bezier(.2,.9,.1,1);
  --card:var(--panel);--card2:var(--head);--body:var(--mut);--ind:var(--gold);--ind2:var(--mari);
  --up:var(--lime);--down:var(--coral);--flat:var(--neu)}
:root:not([data-theme="dark"]){--flat:#CFC4AC}
.sx{padding:var(--s1) 0 0}
.sx h1,.sx h2,.sx h3{font-family:"Fraunces",Figtree,serif;letter-spacing:-.02em;line-height:1.04;font-weight:600}
.sx button{font:inherit;color:inherit}
.sx svg.ic{width:14px;height:14px;flex:none}
.sx .num,.sx .stn{font-variant-numeric:tabular-nums}
.sx .def{margin-left:6px}
.sx-src{margin-top:40px;font-size:12px;color:var(--dim);max-width:80ch}
.sx-src a{color:var(--mut)}

/* XP pill in the site header, same numbers and store as the Briefing games */
.hdr .xp{display:flex;align-items:center;gap:10px}
.hdr .lv{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ind);color:var(--onacc);line-height:1;flex:none;transition:transform .45s var(--pop)}
.hdr .lv small{font-size:8.5px;font-weight:800;letter-spacing:.08em;opacity:.75;margin-bottom:-6px}
.hdr .lv b{font:800 18px "Fraunces",serif}
.hdr .meter{display:flex;flex-direction:column;gap:5px;min-width:0}
.hdr .mt{font-size:11.5px;color:var(--dim);font-weight:600;white-space:nowrap}
.hdr .mt b{color:var(--ink)}
.hdr .mbar{position:relative;width:120px;height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.hdr .mbar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;background:linear-gradient(90deg,var(--ind),var(--ind2));transition:width .8s var(--pop)}
.hdr .mbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%)}
.hdr .xp.bump .mbar i::after{animation:shine .9s ease-out}
.hdr .xp.bump .lv{transform:scale(1.18) rotate(-6deg)}
@keyframes shine{to{transform:translateX(100%)}}
.hdr .streak{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:99px;background:var(--line);font-size:13px;font-weight:700;white-space:nowrap;transition:background .3s,color .3s,transform .4s var(--pop)}
.hdr .streak.hot{background:var(--down);color:var(--onacc);transform:scale(1.06)}
.hdr .xp{margin-right:6px}
/* the shared header is already full at laptop widths: the pill shrinks to the level badge
   (plus the streak once it is running) so the row never overflows */
.hdr .streak.zero{display:none}
@media(max-width:1440px){.hdr .meter{display:none}.hdr .streak .lbl{display:none}}
@media(max-width:1180px){.hdr .srch{width:150px}}
@media(max-width:600px){.hdr .xp{gap:7px}.hdr .lv{width:30px;height:30px}.hdr .lv b{font-size:16px}.hdr .mbar{width:44px}.hdr .streak.zero{display:none}.hdr .streak .lbl{display:none}}

/* ================= shared page atoms ================= */
.sx .seb{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ind)}
.sx .seb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sx .up{color:var(--up)}.sx .dn{color:var(--down)}.sx .fl{color:var(--dim)}




.sx .srv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--snap),transform .8s var(--snap)}
.sx .srv.in{opacity:1;transform:none}
.sx .ssec{margin-top:88px}
.sx .shead{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:end;margin-bottom:26px}
.sx .idx{grid-row:1/3;font:600 64px/0.86 "Fraunces",serif;color:var(--ind);letter-spacing:-.04em}
.sx .shead-t{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sx .shead h2{font-size:clamp(28px,4vw,40px)}
.sx .shead p{grid-column:2;color:var(--body);max-width:62ch;font-size:15.5px}
.sx .quest{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ind) 45%,var(--line));background:color-mix(in srgb,var(--ind) 12%,transparent);color:var(--ind);font-size:12px;font-weight:700;white-space:nowrap}
.sx .quest .ok{display:none}.sx .quest.got .bolt{display:none}.sx .quest.got .ok{display:block}
.sx .quest.got{background:color-mix(in srgb,var(--up) 16%,transparent);border-color:color-mix(in srgb,var(--up) 45%,var(--line));color:var(--up)}
.sx .spill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--body);font-size:13.5px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .3s var(--pop)}
.sx .spill:hover{border-color:var(--ind);color:var(--ind)}
.sx .spill.go{background:var(--ind);border-color:var(--ind);color:var(--onacc)}
.sx .spill.go:hover{transform:translateY(-1px);color:var(--onacc)}
.sx .spill[disabled]{opacity:.45;cursor:default;transform:none}
.sx-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;font-size:14.5px;z-index:300;transition:transform .45s var(--pop);pointer-events:none;max-width:calc(100vw - 32px);text-align:center;visibility:hidden}
.sx-toast.show{transform:translate(-50%,0);visibility:visible}
.sx-fly{position:fixed;left:0;top:0;z-index:310;padding:5px 11px;border-radius:99px;background:var(--ind);color:var(--onacc);font-weight:800;font-size:13px;pointer-events:none;white-space:nowrap}
.sx-bit{position:fixed;left:0;top:0;width:7px;height:7px;border-radius:2px;z-index:305;pointer-events:none}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sx .shake{animation:shake .4s}

/* ================= 00 · match day hero ================= */
.sx .sxh{margin-top:36px;position:relative;border-radius:20px;background:var(--card);box-shadow:var(--shadow);padding:34px 36px 30px;overflow:hidden}
.sx .sxh::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(600px 220px at 100% 0%,color-mix(in srgb,var(--up) 12%,transparent),transparent 70%),
  radial-gradient(520px 220px at 0% 0%,color-mix(in srgb,var(--down) 10%,transparent),transparent 70%)}
.sx .sxh>*{position:relative}
.sx .dateline{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums}
.sx .sxh h1{margin-top:12px;font-size:clamp(44px,7.4vw,86px);font-weight:700;letter-spacing:-.035em;line-height:.96}
.sx .sxh h1 em{font-style:italic;font-weight:500;color:var(--ind)}
.sx .board{margin-top:30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.sx .team{display:flex;align-items:center;gap:14px}
.sx .team.bull{justify-content:flex-start;flex-direction:row-reverse;text-align:right}
.sx .team-n{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.sx .team-d{font-size:13px;color:var(--dim)}
.sx .team .score{font:700 clamp(54px,8vw,92px)/.9 "Fraunces",serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sx .bear .score,.sx .bear .team-n{color:var(--down)}
.sx .bull .score,.sx .bull .team-n{color:var(--up)}
.sx .vs{display:grid;justify-items:center;gap:2px;padding:0 6px}
.sx .vs b{font:600 34px/1 "Fraunces",serif;color:var(--dim)}
.sx .vs span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.sx .rope{position:relative;margin-top:26px}
.sx .side{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s var(--pop),opacity .6s}
.sx .sxh.won.w-up .s-dn,.sx .sxh.won.w-dn .s-up{transform:translateY(2px) scaleY(.9);opacity:.75;transition-delay:.15s}
.sx .sxh.won.w-up .s-up,.sx .sxh.won.w-dn .s-dn{animation:hop .5s var(--snap) .1s 1}
@keyframes hop{45%{transform:translateY(-4px)}}
.sx .rope{container-type:inline-size}
.sx .cloth{transform-box:fill-box;transform-origin:0 50%}
.sx .sxh.won .cloth{animation:wave .45s ease-in-out 2}
@keyframes wave{25%{transform:skewY(-7deg) scaleX(.93)}75%{transform:skewY(5deg) scaleX(.97)}}
.sx #flag-r{transition:none}
.sx .wtag{position:absolute;top:2.5cqw;transform:translateY(-50%);display:flex;gap:.28em;white-space:nowrap;overflow:hidden;padding:2px 0;font:600 clamp(15px,2.2vw,22px)/1.1 "Fraunces",serif;letter-spacing:-.01em;pointer-events:none}
.sx .wtag.t-up{color:var(--up)}.sx .wtag.t-dn{color:var(--down)}.sx .wtag.t-fl{color:var(--ind)}
.sx .wtag span{display:inline-block;opacity:0;transform:translateX(-14px);transition:opacity .35s var(--snap),transform .5s var(--snap)}
.sx .wtag.rt span{transform:translateX(14px)}
.sx .sxh.won .wtag span{opacity:1;transform:none;transition-delay:calc(.35s + var(--w) * .12s)}
.sx .clock{font-weight:700;color:var(--body);min-width:22ch;text-align:center}
.sx .clock.real::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ind);margin-right:7px;vertical-align:1px}
.sx .replay{border:0;background:none;padding:2px 4px;color:var(--ind);font-size:12.5px;font-weight:700;cursor:pointer;opacity:0;transition:opacity .3s}
.sx .sxh.won .replay{opacity:1}
.sx .replay:hover{text-decoration:underline;text-underline-offset:3px}
.sx .rope svg{display:block;width:100%;height:auto;overflow:visible}
.sx .r-line{stroke:var(--dim);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 5;opacity:.75}
.sx .r-mid{stroke:var(--line);stroke-width:2;stroke-dasharray:4 5}
.sx .r-zone.dn{fill:color-mix(in srgb,var(--down) 14%,transparent)}
.sx .r-zone.up{fill:color-mix(in srgb,var(--up) 14%,transparent)}
.sx .r-flag path{fill:var(--ind)}
.sx circle.r-flag{fill:var(--ind);stroke:var(--card);stroke-width:3}
.sx .r-team{font:800 11px Figtree,sans-serif;letter-spacing:.14em}
.sx .r-team.dn{fill:var(--down)}.sx .r-team.up{fill:var(--up)}
.sx .r-cnt{font:600 12px Figtree,sans-serif;fill:var(--dim)}
.sx .r-p.dn{fill:var(--down)}.sx .r-p.up{fill:var(--up)}.sx .r-p.fl{fill:var(--flat)}
.sx .rope-l{display:flex;justify-content:space-between;align-items:baseline;gap:8px 14px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.sx .rope-l b{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.sx .rope-l .dn b{color:var(--down)}.sx .rope-l .up b{color:var(--up)}
.sx .rope-l .mid{display:inline-flex;align-items:center;gap:8px}
.sx .rope-l .up b{margin:0 0 0 4px}
.sx .comm{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.sx .comm li{list-style:none;padding:16px 18px 2px 0;font-size:14.5px;line-height:1.5;color:var(--body)}
.sx .comm li+li{padding-left:18px;border-left:1px solid var(--line)}
.sx .comm li b{color:var(--ink)}
.sx .comm .min{display:block;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ind)}
.sx .comm{padding:0}
.sx .stiles{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sx .stile{border-radius:16px;background:var(--card);box-shadow:var(--shadow);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.sx .stile .lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center}
.sx .stile .big{font:600 34px/1.05 "Fraunces",serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.sx .stile .big.gold{color:var(--ind)}
.sx .stile .of{font:600 14px Figtree,sans-serif;color:var(--dim);letter-spacing:0}
.sx .stile .stn{font-size:12.5px;color:var(--dim)}
.sx .stbar{height:6px;border-radius:3px;background:var(--line);display:flex;overflow:hidden;margin:4px 0 2px}
.sx .stbar i{height:100%;transition:width 1s var(--snap)}
.sx .stbar .u{background:var(--up)}.sx .stbar .f{flex:1}.sx .stbar .d{background:var(--down)}
.sx .conc{display:flex;gap:2px;height:6px;margin:4px 0 2px}
.sx .conc i{height:100%;border-radius:2px;background:var(--ind);transition:flex-grow 1s var(--snap)}
.sx .conc i.rest{background:var(--line)}

/* ================= 01 · call the leader ================= */
.sx .game{border-radius:20px;background:var(--card);box-shadow:var(--shadow);padding:24px 26px 24px}
.sx .g-top{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap}
.sx .g-q{font:600 clamp(21px,2.6vw,26px)/1.2 "Fraunces",serif;letter-spacing:-.015em;max-width:40ch}
.sx .g-pips{display:flex;gap:6px;align-items:center}
.sx .g-pips i{width:26px;height:6px;border-radius:3px;background:var(--line);transition:background .3s}
.sx .g-pips i.on{background:var(--ind)}
.sx .g-pips i.w{background:var(--up)}.sx .g-pips i.l{background:var(--down)}
.sx .g-cards{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;perspective:1000px}
.sx .gc{position:relative;height:178px;border:0;padding:0;background:none;cursor:pointer;text-align:left;transform-style:preserve-3d;transition:transform .7s var(--snap)}
.sx .gc:focus-visible{outline:2px solid var(--ind);outline-offset:4px;border-radius:16px}
.sx .gc .fc{position:absolute;inset:0;border-radius:16px;padding:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:var(--card2)}
.sx .gc .front{transition:border-color .2s,transform .3s var(--pop)}
.sx .gc:not(.flip):hover .front{border-color:var(--ind);transform:translateY(-3px)}
.sx .gc .front .q{margin-top:auto;font:700 46px/1 "Fraunces",serif;color:color-mix(in srgb,var(--ind) 70%,var(--dim))}
.sx .gc .nm{font:600 18px/1.15 "Fraunces",serif;color:var(--ink);letter-spacing:-.01em}
.sx .gc .mt2{font-size:12px;color:var(--dim)}
.sx .gc .back{transform:rotateY(180deg)}
.sx .gc.flip{transform:rotateY(180deg);cursor:default}
.sx .gc.win .back{border-color:var(--up);box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent)}
.sx .gc.pick:not(.win) .back{border-color:var(--down)}
.sx .gc .tagw{align-self:flex-start;padding:2px 7px;border:1px solid currentColor;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.sx .gc.win .tagw{color:var(--up)}.sx .gc.pick:not(.win) .tagw{color:var(--down)}
.sx .gc .stat{margin-top:auto;font:600 24px/1.05 "Fraunces",serif;font-variant-numeric:tabular-nums}
.sx .gc .stat small{font:600 12px Figtree,sans-serif;color:var(--dim)}
.sx .g-two{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sx .gb{height:84px;border-radius:16px;border:1px solid var(--line);background:var(--card2);font:600 24px "Fraunces",serif;color:var(--ink);cursor:pointer;transition:border-color .2s,transform .3s var(--pop),background .2s}
.sx .gb:not([disabled]):hover{border-color:var(--ind);transform:translateY(-3px)}
.sx .gb[disabled]{cursor:default}
.sx .gb.win{border-color:var(--up);color:var(--up);background:color-mix(in srgb,var(--up) 12%,var(--card2));box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent)}
.sx .gb.pick:not(.win){border-color:var(--down);color:var(--down)}
.sx .g-q b{color:var(--ind);font-weight:600}
.sx .g-foot{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:36px}
.sx .g-v{font-size:15px;color:var(--body);max-width:70ch}
.sx .g-v b{color:var(--ink)}
.sx .g-end{text-align:center;padding:26px 0 8px}
.sx .g-end .big{font:700 64px/1 "Fraunces",serif;color:var(--ind)}
.sx .g-end p{color:var(--body);margin:8px auto 18px;max-width:46ch}

/* ================= 02 · the arena ================= */
.sx .ar-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:6px}
.sx .find{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--dim);flex:1 1 220px;max-width:320px}
.sx .find input{border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--ink);width:100%;min-width:0}
.sx .find input::placeholder{color:var(--dim)}
.sx .sorts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sx .sorts>span{font-size:12px;color:var(--dim);margin-right:4px}
.sx .ssrt{height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--body);font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.sx .ssrt.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sx .ssrt i::after{content:"↓";font-style:normal;font-size:11px;opacity:0}
.sx .ssrt.on i::after{opacity:1}.sx .ssrt.on.asc i::after{content:"↑"}
.sx .arena{border-radius:20px;background:var(--card);box-shadow:var(--shadow);padding:6px 22px 14px;margin-top:12px}
.sx .a-cols,.sx .lane{display:grid;grid-template-columns:minmax(0,1fr) 180px 112px 132px 116px 120px;gap:0 18px;align-items:center}
.sx .a-cols{padding:14px 0 10px 18px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:var(--dim)}
.sx .a-cols>span{display:flex;align-items:center}
.sx .a-cols .r,.sx .lane .r{justify-content:flex-end;text-align:right}
.sx .div-h{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;padding:24px 0 10px;border-bottom:1px solid var(--line)}
.sx .div-h .t{display:inline-flex;align-items:center;gap:9px;font:600 20px "Fraunces",serif;letter-spacing:-.015em;color:var(--ink)}
.sx .div-h .t i{width:9px;height:9px;border-radius:50%}
.sx .div-h.up .t i{background:var(--up)}.sx .div-h.dn .t i{background:var(--down)}.sx .div-h.fl .t i{background:var(--dim)}.sx .div-h.th .t i{background:transparent;border:1.5px solid var(--dim)}
.sx .div-h .t small{font:700 11px Figtree,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sx .div-h .s{font-size:13px;color:var(--body);font-variant-numeric:tabular-nums}
.sx .div-h .d{flex-basis:100%;font-size:12.5px;color:var(--dim)}
.sx .lane{position:relative;padding:14px 0 14px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.sx .lane::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:transparent}
.sx .lane.lead::before{background:var(--up)}.sx .lane.lag::before{background:var(--down)}
.sx .lane:hover,.sx .lane.lit{background:color-mix(in srgb,var(--ind) 6%,transparent)}
.sx .lane .nmc{display:flex;align-items:flex-start;gap:10px;min-width:0}
.sx .chev{flex:none;width:18px;height:18px;margin-top:3px;display:grid;place-items:center;border:0;background:none;padding:0;color:var(--dim);cursor:pointer;transition:transform .3s var(--snap),color .15s}
.sx .lane.open .chev{transform:rotate(90deg);color:var(--ind)}
.sx .lane .nm{display:block;font:600 17px/1.2 "Fraunces",serif;letter-spacing:-.01em;color:var(--ink)}
.sx .lane .k-form .mv{white-space:nowrap}
.sx .lane .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--dim)}
.sx .tag{display:inline-block;padding:1px 6px;border:1px solid currentColor;border-radius:4px;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;line-height:1.5}
.sx .tag.up{color:var(--up)}.sx .tag.dn{color:var(--down)}.sx .tag.gd{color:var(--ind)}
.sx .got-c{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:color-mix(in srgb,var(--ind) 20%,transparent);color:var(--ind)}
.sx .got-c svg{width:10px;height:10px}
.sx .tug{display:flex;flex-direction:column;gap:6px;min-width:0}
.sx .tug svg{display:block;overflow:visible}
.sx .tug .cnt{display:flex;gap:10px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.sx .tug .cnt em{font-style:normal}
.sx .tug .cnt .fl{font-weight:600}
.sx .f-up{fill:var(--up)}.sx .f-dn{fill:var(--down)}.sx .f-fl{fill:var(--flat)}.sx .f-tr{fill:var(--line)}.sx .f-ax{fill:var(--dim);fill-opacity:.5}
.sx .knot{fill:var(--ink)}
.sx .u-r{transform-box:fill-box;transform-origin:center bottom}
.sx .srv .u-r{transform:scaleY(.15);opacity:.2;transition:transform .6s var(--pop),opacity .4s}
.sx .srv.in .u-r{transform:none;opacity:1;transition-delay:calc(var(--k) * 12ms + 120ms)}
.sx .knotg{transition:transform 1.1s var(--snap) .45s}
.sx .srv:not(.in) .knotg{transform:translateX(var(--k0))}
.sx .form{display:flex;gap:4px;align-items:center}
.sx .form i{width:12px;height:12px;border-radius:50%;flex:none}
.sx .form i.up{background:var(--up)}.sx .form i.dn{background:var(--down)}.sx .form i.fl{background:var(--flat)}.sx .form i.th{border:1.5px solid var(--dim)}.sx .form i.na{background:var(--line)}
.sx .form i.today{outline:2px solid var(--ind);outline-offset:1.5px}
.sx .mv{display:block;margin-top:4px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.sx .mv.z{color:var(--dim);font-weight:600}
.sx .cell b{display:block;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sx .cell b i,.sx .sco .r b i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--dim);margin-left:2px}
.sx .cell span{display:block;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.sx .more{display:block;padding:12px 0 6px 18px;border:0;background:none;color:var(--ind);font-size:13.5px;font-weight:700;cursor:pointer;text-align:left}
.sx .more:hover{text-decoration:underline;text-underline-offset:3px}
.sx .none{padding:30px 0;text-align:center;color:var(--dim)}
/* expanded: the sector card + its squad */
.sx .squad{display:block;padding:12px 0 20px 46px;border-bottom:1px solid var(--line);animation:sqIn .5s var(--snap)}
@keyframes sqIn{from{opacity:0;transform:translateY(-8px)}}
.sx .co-g{display:flex;align-items:baseline;gap:8px;padding:6px 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sx .co-g+.co-g,.sx .sco+.co-g{margin-top:10px}
.sx .co-g.up{color:var(--up)}.sx .co-g.dn{color:var(--down)}.sx .co-g.fl{color:var(--dim)}
.sx .co-g span{color:var(--dim);font-weight:700}
.sx .sq-ctx{font-size:12.5px;color:var(--dim);padding:0 0 6px;font-variant-numeric:tabular-nums}
.sx .sco{display:grid;grid-template-columns:minmax(0,1fr) 128px 104px 120px;gap:0 14px;align-items:center;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);animation:sqIn .45s var(--snap) backwards;animation-delay:calc(var(--j) * 25ms)}
.sx .sco .s{min-width:0}
.sx .sco .s a{font-weight:800;font-size:14px;color:var(--ink);text-decoration:none}
.sx .sco .s a:hover{color:var(--ind)}
.sx .sco .s span{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx .sco .spc{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.sx .sco .spc svg{flex:none}
.sx .sco .r{text-align:right}
.sx .sco .r b{display:block;font-size:13.5px;font-variant-numeric:tabular-nums}
.sx .sco .r span{display:block;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sx .co-all{margin-top:8px;border:0;background:none;padding:6px 0;color:var(--ind);font-weight:700;font-size:13px;cursor:pointer}
.sx .co-all:hover{text-decoration:underline;text-underline-offset:3px}
.sx .co-note{margin-top:10px;font-size:12.5px;color:var(--dim)}

/* ================= 03 · tomorrow's call ================= */
.sx .call{border-radius:20px;background:var(--card);box-shadow:var(--shadow);padding:24px 26px}
.sx .call-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
.sx .cc{position:relative;text-align:left;padding:15px 16px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card2);cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .3s var(--pop),box-shadow .2s}
.sx .cc:hover{border-color:var(--ind);transform:translateY(-2px)}
.sx .cc.sel{border-color:var(--ind);box-shadow:0 0 0 3px color-mix(in srgb,var(--ind) 22%,transparent)}
.sx .cc .nm{font:600 17px/1.15 "Fraunces",serif;color:var(--ink)}
.sx .cc .ln{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.sx .cc .odds{font-size:12px;color:var(--body)}
.sx .cc .odds b{color:var(--ink)}
.sx .call-f{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sx .call-f p{font-size:13.5px;color:var(--body);max-width:62ch}
.sx .call-f p b{color:var(--ink)}
.sx .locked{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ind)}

/* ================= 04 · where each sector closed (kept, at the end) ================= */
.sx .sfig-card{position:relative;border-radius:20px;background:var(--card);box-shadow:var(--shadow);padding:22px 22px 18px}
.sx .sec-fig-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.sx .sec-fig-h>span:first-child{font-size:15px;font-weight:700;color:var(--ink)}
.sx .sec-fig-k,.sx .sec-fig-f{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim)}
.sx .sec-fig-f{margin-top:6px}
.sx .kc{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--dim);flex:none}
.sx .kd{width:10px;height:10px;border:1.5px solid var(--dim);transform:rotate(45deg);flex:none;margin:0 2px}
.sx .bz-host{margin:8px -4px 0;min-height:200px}
.sx .sfig{display:block;overflow:visible;max-width:100%;height:auto}
.sx .sfig text{font-family:Figtree,sans-serif}
.sx .bz-band{fill:transparent}
.sx .bz-band.dn{fill:color-mix(in srgb,var(--down) 8%,transparent)}
.sx .bz-band.up{fill:color-mix(in srgb,var(--up) 8%,transparent)}
.sx .bz-zero{stroke:var(--dim);stroke-opacity:.6;stroke-dasharray:3 4}
.sx .bz-bl{font-size:12.5px;font-weight:700;fill:var(--dim)}
.sx .bz-bl.dn{fill:var(--down)}.sx .bz-bl.up{fill:var(--up)}
.sx .bz-end{font-size:11.5px;fill:var(--dim)}
.sx .bz .bz-b{stroke-width:1.5;fill-opacity:.22;transition:stroke-width .14s,fill-opacity .14s}
.sx .bz.dn .bz-b{fill:var(--down);stroke:var(--down)}
.sx .bz.up .bz-b{fill:var(--up);stroke:var(--up)}
.sx .bz.fl .bz-b{fill:var(--dim);stroke:var(--dim)}
.sx .bz.thin .bz-b{fill-opacity:0}
.sx .bz-lead path{fill:none;stroke:var(--ink);stroke-opacity:.38;stroke-width:1}
.sx .bz-lead circle{fill:var(--ink)}
.sx .bz-l{font-size:12px;font-weight:700;fill:var(--ink)}
.sx .bz-l tspan{font-weight:500;fill:var(--dim)}
.sx .sdot{cursor:pointer;outline:none;transition:opacity .14s}
.sx .sdot.near,.sx .bz-lead.near,.sx .bz-l.near{opacity:.22}
.sx .sdot.off{opacity:.08;pointer-events:none}
.sx .sdot.lit .bz-b,.sx .sdot:hover .bz-b{stroke-width:2.5;fill-opacity:.4}
.sx .sdot:focus-visible .bz-b{stroke:var(--ind);stroke-width:3}
@keyframes bzIn{from{opacity:0;transform:translateY(var(--dy)) scale(.35)}to{opacity:1;transform:none}}
@keyframes bzFade{from{opacity:0}}
@keyframes bzDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sx .bz-in{transform-box:fill-box;transform-origin:center;animation:bzIn .72s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i) * 16ms + 120ms)}
.sx .bz-band,.sx .bz-bl,.sx .bz-end,.sx .bz-zero{animation:bzFade .45s ease-out backwards}
.sx .bz-lead path{stroke-dasharray:1;animation:bzDraw .5s cubic-bezier(.3,.7,.3,1) .95s backwards}
.sx .bz-lead circle,.sx .bz-l{animation:bzFade .35s ease-out 1.15s backwards}
.sx .bz-fig.still *{animation:none!important}
.sx .stip{position:absolute;opacity:0;pointer-events:none;z-index:20;width:232px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px;transform:translateY(4px);transition:opacity .12s,transform .18s var(--snap)}
.sx .sfig-card.on .stip{opacity:1;transform:none}
.sx .stip>b{font-size:14px;font-weight:700;color:var(--ink)}
.sx .stip span{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sx .stip span b{font-weight:700;color:var(--ink)}
.sx .stip em{font-style:normal;font-weight:700}

/* ================= responsive ================= */
@media(max-width:900px){
  .sx .stiles{grid-template-columns:repeat(2,1fr)}
  .sx .a-cols,.sx .lane{grid-template-columns:minmax(0,1fr) 160px 104px 128px 112px}
  .sx .a-cols .k-cap,.sx .lane .k-cap{display:none}
  .sx .call-g{grid-template-columns:repeat(2,1fr)}
  .sx .g-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .sx .rope{margin-top:34px}
  .sx .nav{gap:4px 11px}.sx .nav a{font-size:13px}
  .sx .rope-l{font-size:12px}.sx .rope-l .w{display:none}.sx .rope-l .mid{order:3;flex-basis:100%;justify-content:center}
  .sx .shead{grid-template-columns:1fr;gap:6px}.sx .idx{grid-row:auto}.sx .shead p{grid-column:1}
  .sx .gc .stat{font-size:16px!important}.sx .gc .stat small{font-size:11px}
  .sx .call-g{grid-template-columns:1fr 1fr!important;gap:10px}.sx .cc{padding:12px 12px 11px}.sx .cc .nm{font-size:15px}.sx .cc .ln{flex-wrap:wrap;font-size:11px}
  .sx .cell b{font-size:14px}
  .sx .sxh{padding:24px 18px 20px;border-radius:18px}
  .sx .board{gap:6px}
  .sx .team{gap:8px}
  .sx .team-d{display:none}
  .sx .vs b{font-size:24px}
  .sx .comm{grid-template-columns:1fr}
  .sx .comm li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .sx .comm li{padding:14px 0 12px}
  .sx .stile{padding:14px 14px 12px}
  .sx .stile .big{font-size:26px}
  .sx .idx{font-size:46px}
  .sx .shead p{font-size:14.5px}
  .sx .game,.sx .call{padding:18px 16px}
  .sx .gc{height:156px}
  .sx .gc .fc{padding:13px}
  .sx .gc .nm{font-size:16px}
  .sx .gc .front .q{font-size:36px}
  .sx .gc .stat{font-size:20px}
  .sx .arena{padding:2px 14px 10px;border-radius:18px}
  .sx .a-cols{display:none}
  .sx .lane{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm nm" "tug tug" "top turn";gap:8px 12px;padding:14px 0 14px 12px}
  .sx .lane .nmc{grid-area:nm}.sx .lane .tug{grid-area:tug}.sx .lane .k-form{display:none}.sx .lane .k-top{grid-area:top;text-align:left;justify-content:flex-start}.sx .lane .k-turn{grid-area:turn}
  .sx .lane .k-top.r{text-align:left}
  .sx .lane .mform{display:flex}
  .sx .squad{padding:10px 0 16px 12px}
  .sx .sco{grid-template-columns:minmax(0,1fr) 72px 92px;gap:0 10px}
  .sx .sco .k-vol{display:none}
  .sx .sco .spc svg{display:none}
  .sx .sfig-card{padding:18px 12px 14px;border-radius:18px}
}
.sx .mform{display:none}
@media(prefers-reduced-motion:reduce){
  .sx *,.sx *::before,.sx *::after{animation:none!important;transition:none!important}
  .sx .srv{opacity:1;transform:none}
}