/* Fight card. Builds on site.css tokens; everything here is page-local. */
.card-page{--red-wash:rgba(226,50,43,.2);--blue-wash:rgba(46,124,246,.2);--hair:rgba(241,237,227,.08)}
.eyebrow{font:700 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.eyebrow.gold{color:var(--gold)}
.est-note{font-size:12px;color:var(--mute);letter-spacing:.02em}
.est-tag{display:inline-block;padding:2px 6px;border:1px solid #5a4613;color:var(--gold);font:700 10px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;border-radius:1px;vertical-align:middle}

/* ---------- status strip ---------- */
.cc-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink-3);background:var(--ink-2);margin-bottom:8px}
.cc-strip>div{padding:14px 18px;border-left:1px solid var(--ink-3);display:grid;gap:6px;min-width:0}
.cc-strip>div:first-child{border-left:0}
.cc-strip b{font:900 34px/.9 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-strip .on b{color:var(--red-text)}
.cc-strip .bell b{color:var(--gold)}

/* ---------- live dot ---------- */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(226,50,43,.6);animation:pulse 1.6s ease-out infinite;vertical-align:middle;margin-right:6px}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(226,50,43,0)}100%{box-shadow:0 0 0 0 rgba(226,50,43,0)}}

/* ---------- live now ---------- */
.live-list{display:grid;gap:12px}
.live-card{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) auto minmax(0,1fr) 120px auto;align-items:center;gap:16px;padding:10px 18px 10px 10px;text-decoration:none;
  background:linear-gradient(90deg,var(--red-wash),transparent 30%,transparent 70%,var(--blue-wash)),var(--ink-2);border:1px solid var(--ink-3);border-left:3px solid var(--red);border-right:3px solid var(--blue);overflow:hidden}
.live-card:hover{border-color:var(--line-2);border-left-color:var(--red);border-right-color:var(--blue)}
.live-card img{width:120px;height:90px;object-fit:cover;display:block}
.live-card .nm{font:900 30px/1 var(--display);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-card .nm.b{text-align:right}
.live-card .mid{display:grid;justify-items:center;gap:6px;text-align:center}
.live-card .vs{font:900 22px/1 var(--display);color:var(--gold)}
.live-card .rd{font:700 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);white-space:nowrap}
.live-card .go{display:grid;gap:6px;justify-items:end}

/* ---------- bout (tale of the tape) ---------- */
.bout{position:relative;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:2px;margin-bottom:18px;overflow:hidden}
.bout::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%)}
.bout-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px 12px;flex-wrap:wrap}
.bout-head h3{font:900 30px/1 var(--display);text-transform:uppercase;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bout-head h3 small{font:700 12px/1 var(--ui);letter-spacing:.14em;color:var(--mute)}
.clock{display:grid;gap:6px;min-width:190px;justify-items:end}
.clock .t{font:900 28px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--bone)}
.clock .t.hot{color:var(--red-text)}
.clock .bar{width:190px;height:4px;background:var(--ink-4);overflow:hidden}
.clock .bar i{display:block;height:100%;background:var(--gold);transition:width 1s linear}
.clock .bar i.hot{background:var(--red)}

.bout-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.1fr) minmax(0,1fr);grid-template-areas:"red tape blue";border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
.cside{grid-area:red;display:grid;align-content:start;min-width:0;position:relative}
.cside.blue{grid-area:blue}
.cside .pic{position:relative;aspect-ratio:6/5;background:radial-gradient(ellipse 70% 60% at 50% 100%,var(--red-wash),transparent 70%),radial-gradient(circle at 50% 35%,#1b2025,var(--ink-2) 70%);overflow:hidden}
.cside.blue .pic{background:radial-gradient(ellipse 70% 60% at 50% 100%,var(--blue-wash),transparent 70%),radial-gradient(circle at 50% 35%,#1b2025,var(--ink-2) 70%)}
.cside .pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.bout:hover .cside .pic img{transform:scale(1.03)}
.cside .pic .corner-lbl{position:absolute;left:12px;top:12px}
.cside.blue .pic .corner-lbl{left:auto;right:12px}
.cside .who{padding:12px 16px 16px;display:grid;gap:4px}
.cside.blue .who{text-align:right}
.cside .nm{font:900 clamp(28px,3vw,40px)/.95 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.cside.red .nm{color:var(--bone)}
.cside .sub{font-size:14px;color:var(--bone-dim)}
.cside .perks{font-size:13px;color:var(--mute)}
.cside .mine{margin-top:6px;font-weight:700;color:var(--gold);font-size:14px}

.tape{grid-area:tape;padding:16px 18px 18px;border-left:1px solid var(--ink-3);border-right:1px solid var(--ink-3);display:grid;align-content:start;gap:10px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.tape .ttl{display:flex;justify-content:center;align-items:center;gap:10px;font:900 18px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.tape .ttl::before,.tape .ttl::after{content:"";flex:1;height:1px;background:var(--line)}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:center;gap:10px}
.trow .l,.trow .r{font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.trow .l{text-align:right}
.trow .k{font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:center}
.trow .l.up,.trow .r.up{color:var(--bone)}
.trow .l.dn,.trow .r.dn{color:var(--bone-dim);font-weight:700}
.trow.txt .l,.trow.txt .r{font:600 15px/1.15 var(--ui);text-transform:capitalize}
.sbar{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px}
.trow .l.sbar{grid-template-columns:minmax(0,1fr) 28px}
.sbar i{display:block;height:6px;background:var(--ink-4);position:relative;overflow:hidden}
.sbar i b{position:absolute;inset:0 auto 0 0;background:var(--blue)}
.trow .l.sbar i b{inset:0 0 0 auto;background:var(--red)}
.sbar span{font:800 18px/1 var(--display);font-variant-numeric:tabular-nums}
.sbar.dn span{color:var(--bone-dim)}
.sbar.dn i b{opacity:.55}

.sim{margin-top:6px;padding-top:12px;border-top:1px solid var(--ink-3);display:grid;gap:8px}
.sim .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sim .split{display:flex;height:10px;background:var(--ink-4)}
.sim .split i{background:var(--red);transition:flex-basis .6s var(--ease)}
.sim .split b{background:var(--blue);flex:1}
.sim .pct{display:flex;justify-content:space-between;font:900 26px/1 var(--display);font-variant-numeric:tabular-nums}
.sim .pct span:first-child{color:var(--red-text)}.sim .pct span:last-child{color:var(--blue-text)}

/* ---------- pools + slip ---------- */
.bout-foot{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0}
.pools{padding:16px 20px 18px;border-right:1px solid var(--ink-3);display:grid;align-content:start;gap:10px}
.pools table{width:100%;border-collapse:collapse;font-size:15px}
.pools th{font:700 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
.pools th:first-child{text-align:left}
.pools td{padding:9px 8px;border-bottom:1px solid var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pools td:first-child{text-align:left;font-weight:700}
.pools td .x{display:block;font-size:12px;color:var(--mute)}
.pools tr.sel td{background:rgba(242,182,50,.06)}
.pools tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.pools .r{color:var(--red-text)}.pools .b{color:var(--blue-text)}

.slip{padding:16px 20px 20px;display:grid;align-content:start;gap:12px;background:var(--ink)}
.slip .pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slip .pick button{display:grid;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line-2);border-radius:2px;background:var(--ink-2);min-width:0;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.slip .pick button span{font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.slip .pick button b{font:900 22px/1 var(--display);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slip .pick button[data-side="1"]{text-align:right}
.slip .pick button[aria-pressed=true][data-side="0"]{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.slip .pick button[aria-pressed=true][data-side="1"]{background:#1c4fb0;border-color:#1c4fb0;color:#fff}
.slip .pick button[aria-pressed=true] span{color:rgba(255,255,255,.75)}
.slip .pick button:hover{transform:translateY(-1px)}
.slip .stake{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.slip .stake input{width:100%;font:800 22px/1 var(--display);padding:9px 12px;font-variant-numeric:tabular-nums}
.slip .chips{display:flex;gap:6px;flex-wrap:wrap}
.slip .chips button{padding:6px 10px;border:1px solid var(--line);border-radius:2px;font-weight:700;font-size:14px;color:var(--bone-dim);font-variant-numeric:tabular-nums}
.slip .chips button:hover{color:var(--bone);border-color:var(--line-2)}
.slip .curs{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.slip .curs .seg button{padding:6px 10px;font-size:13px}
.slip .ret{display:grid;gap:3px;padding:10px 12px;border:1px dashed #4a3b12;background:rgba(242,182,50,.04)}
.slip .ret b{font:900 26px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.slip .ret p{font-size:13px;color:var(--bone-dim)}
.slip .acts{display:flex;gap:8px;flex-wrap:wrap}
.slip .acts .btn.go{flex:1 1 180px}
.slip .acts .btn.go.red{background:var(--red-btn);color:#fff}
.slip .acts .btn.go.blue{background:#1c4fb0;color:#fff}

/* ---------- queue ---------- */
.queue{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qcol{background:var(--ink-2);border:1px solid var(--ink-3);padding:16px 18px 18px;display:grid;align-content:start;gap:10px}
.qcol h3{font:900 24px/1 var(--display);text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.qcol h3 small{font:700 12px/1 var(--ui);letter-spacing:.1em;color:var(--mute)}
.qcol ol{list-style:none;display:grid;gap:2px;counter-reset:q}
.qcol li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--ink-3);counter-increment:q;min-width:0}
.qcol li::before{content:counter(q,decimal-leading-zero);font:800 15px/1 var(--display);color:var(--mute);width:22px}
.qcol li:nth-child(-n+2)::before{color:var(--gold)}
.qcol li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcol li span{margin-left:auto;color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.qcol .none{color:var(--mute);font-size:14px}

/* ---------- results ---------- */
.results{display:grid;gap:8px}
.res{display:grid;grid-template-columns:54px minmax(0,1fr) 170px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 14px;background:var(--ink-2);border:1px solid var(--ink-3)}
.res .no{font:900 22px/1 var(--display);color:var(--mute);font-variant-numeric:tabular-nums}
.res .f{display:flex;align-items:center;gap:10px;min-width:0}
.res .f.b{flex-direction:row-reverse;text-align:right}
.res .f img{width:56px;height:44px;object-fit:cover;background:var(--ink-3);flex:none}
.res .f .n{display:grid;gap:3px;min-width:0}
.res .f .n b{font:900 22px/1 var(--display);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .f .n small{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.res .f.lost{opacity:.5}
.res .f.won.r .n b{color:var(--red-text)}.res .f.won.b .n b{color:var(--blue-text)}
.res .up{color:var(--ok)}.res .down{color:var(--err)}
.res .how{display:grid;justify-items:center;gap:5px;text-align:center}
.res .how .m{font:900 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;background:var(--ink-4)}
.res .how .m.ko{background:#3a0f0c;color:#ff8a80}
.res .how .m.dec{background:#1d2530;color:#bcd9f5}
.res .how small{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.res .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- your corner ---------- */
.corner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.corner-grid .panel{display:grid;align-content:start;gap:10px}
.corner-grid .big{font:900 30px/1 var(--display);font-variant-numeric:tabular-nums}
.corner-grid .rows{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- pre-launch ---------- */
.poster{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);align-items:end;min-height:420px;border:1px solid var(--ink-3);overflow:hidden;
  background:radial-gradient(ellipse 45% 70% at 12% 100%,rgba(226,50,43,.28),transparent 70%),radial-gradient(ellipse 45% 70% at 88% 100%,rgba(46,124,246,.28),transparent 70%),linear-gradient(180deg,#0d0f11,var(--ink))}
.poster::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,var(--red),var(--gold),var(--blue))}
.poster .fig{align-self:end;display:grid;justify-items:center;min-width:0}
.poster .fig img{width:100%;max-width:380px;aspect-ratio:4/5;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.poster .fig p{font:900 34px/1 var(--display);text-transform:uppercase;margin-top:-26px;position:relative}
.poster .fig small{display:block;font:700 12px/1.4 var(--ui);letter-spacing:.14em;color:var(--bone-dim);text-align:center;margin-bottom:22px}
.poster .mid{align-self:center;text-align:center;display:grid;justify-items:center;gap:14px;padding:30px 10px}
.poster .mid h2{font:900 clamp(44px,5.4vw,78px)/.86 var(--display);text-transform:uppercase}
.poster .mid h2 em{font-style:normal;color:var(--gold)}
.poster .mid p{color:var(--bone-dim);max-width:36ch}
.poster .mid .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stamp{display:inline-block;padding:5px 10px;border:2px solid var(--gold);color:var(--gold);font:800 13px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;transform:rotate(-2deg)}

.format{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink-3);background:var(--ink-2)}
.format li{list-style:none;padding:18px 18px 20px;border-left:1px solid var(--ink-3);display:grid;align-content:start;gap:8px}
.format li:first-child{border-left:0}
.format .n{font:900 44px/.8 var(--display);color:var(--ink-4);-webkit-text-stroke:1px var(--line-2)}
.format h3{font:900 24px/1 var(--display);text-transform:uppercase}
.format p{color:var(--bone-dim);font-size:15px}
.format p b{color:var(--bone)}

.bout.exh::before{background:repeating-linear-gradient(135deg,var(--gold) 0 10px,#1a1406 10px 20px)}
.exh-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;flex-wrap:wrap}
.exh-foot p{color:var(--bone-dim);font-size:14px;max-width:70ch}
.coins{display:flex;gap:8px;flex-wrap:wrap}
.coin{padding:5px 9px;border:1px solid var(--line-2);font:700 13px/1 var(--ui);letter-spacing:.06em}

.tix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tix .panel{display:grid;gap:8px;align-content:start}
.tix .price{font:900 44px/.9 var(--display);color:var(--gold)}
.tix .price small{font:700 14px/1 var(--ui);color:var(--mute);margin-left:6px;letter-spacing:.04em}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bout-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"red blue" "tape tape"}
  .tape{border-left:0;border-right:0;border-top:1px solid var(--ink-3)}
  .cside.red{border-right:1px solid var(--ink-3)}
  .live-card{grid-template-columns:90px minmax(0,1fr) auto minmax(0,1fr) 90px;row-gap:10px}
  .live-card img{width:90px;height:68px}
  .live-card .go{grid-column:1/-1;justify-items:stretch}
  .res{grid-template-columns:44px minmax(0,1fr) 150px minmax(0,1fr)}
  .res .acts{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:900px){
  .cc-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-strip>div:nth-child(3){border-left:0}
  .cc-strip>div:nth-child(n+3){border-top:1px solid var(--ink-3)}
  .bout-foot{grid-template-columns:1fr}
  .pools{border-right:0;border-bottom:1px solid var(--ink-3)}
  .queue,.corner-grid,.tix{grid-template-columns:1fr}
  .format{grid-template-columns:1fr 1fr}
  .format li:nth-child(3){border-left:0}
  .format li:nth-child(n+3){border-top:1px solid var(--ink-3)}
  .poster{grid-template-columns:1fr 1fr;grid-template-areas:"mid mid" "a b";min-height:0}
  .poster .mid{grid-area:mid;padding:28px 16px 6px}
  .poster .fig.a{grid-area:a}.poster .fig.b{grid-area:b}
  .poster .fig p{font-size:26px}
}
@media (max-width:600px){
  .bout-head .stamp{display:none}
  .bout-head{padding:14px 14px 10px}
  .bout-head h3{font-size:24px}
  .clock{min-width:0;justify-items:start;width:100%}
  .clock .bar{width:100%}
  .cside .who{padding:10px 12px 12px}
  .cside .nm{font-size:24px}
  .cside .sub{font-size:13px}
  .cside .perks{display:none}
  .tape{padding:14px 12px 16px}
  .trow{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:6px}
  .trow .k{font-size:10px;letter-spacing:.1em}
  .pools,.slip{padding:14px}
  .pools td,.pools th{padding:8px 4px}
  .live-card{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px 10px;padding:10px 12px}
  .live-card img{width:96px;height:72px}
  .live-card img.a{grid-column:1;grid-row:1;justify-self:start}.live-card img.b{grid-column:3;grid-row:1;justify-self:end}
  .live-card .mid{grid-column:2;grid-row:1/3;align-self:center}
  .live-card .nm{font-size:22px;white-space:normal;overflow-wrap:anywhere;grid-row:2}
  .live-card .nm.a{grid-column:1}.live-card .nm.b{grid-column:3}
  .live-card .go{grid-row:3}
  .res{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 8px;padding:12px}
  .res .no{grid-column:1/-1;font-size:15px}
  .res .how{grid-column:1/-1;grid-row:2;justify-items:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .res .f img{width:44px;height:36px}
  .res .f .n b{font-size:18px}
  .format{grid-template-columns:1fr}
  .format li{border-left:0;border-top:1px solid var(--ink-3)}
  .format li:first-child{border-top:0}
  .cc-strip b{font-size:28px}
  .cc-strip>div{padding:12px 14px}
  .poster .fig small{margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){.dot{animation:none}.clock .bar i{transition:none}}