@font-face{font-family:Caesar;src:url("/fonts/CaesarDressing-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:Questrial;src:url("/fonts/Questrial-Regular.woff2") format("woff2");font-display:swap}
:root{
  --ink:#08060c;--sky:#0b1428;--under:#1a0608;--gold:#ffd24a;--ivory:#fff6e0;
  --azure:#4aa8ff;--crimson:#ff2a2a;--magma:#ff6a1a;--ember:#ff9a2e;--bolt:#f4f0ff;
  --line:rgba(255,210,74,.35);--card:#10080c;
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--ink);color:var(--ivory)}
body{font-family:Questrial,system-ui,sans-serif;line-height:1.55;min-height:100%}
img{max-width:100%;height:auto;display:block}a{color:var(--gold);text-decoration:none}
a:hover{color:#ffe08a}h1,h2,h3,.brand,.vs{font-family:Caesar,serif;letter-spacing:.02em;line-height:1.15}
.skip{position:absolute;left:-999px}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Header — 48px */
.top{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;
  background:linear-gradient(90deg,#0a1224 0 50%,#1a0608 50% 100%);border-bottom:1px solid var(--gold);
  padding:0 10px;box-shadow:0 4px 18px #000a}
.nav-l,.nav-r{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.nav-l{justify-content:flex-start}.nav-r{justify-content:flex-end}
.nav-l a,.nav-r a{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.nav-l a{color:#ffe9a8;background:#13203a;border:1px solid #f0c14b88}
.nav-l a:hover,.nav-l a.is-on{background:linear-gradient(180deg,#ffd24a,#e8a812);color:#160c08}
.nav-r a{color:#ffd0c8;background:#3a0c0e;border:1px solid #ff4a4a88}
.nav-r a:hover,.nav-r a.is-on{background:linear-gradient(180deg,#ff4a3a,#b51010);color:#fff6e0}
.brand{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:160px;text-align:center;line-height:1}
.brand b{font-size:28px;color:var(--gold);text-shadow:0 0 16px #ffd24a,0 2px 0 #7a4a00;font-weight:400}
.brand em{font-style:normal;font-size:9px;letter-spacing:.28em;color:#ffe9a8;margin-top:-2px}
.brand .wings{position:absolute;inset:auto;width:170px;height:36px;pointer-events:none}
.hamb{display:none;background:none;border:0;color:var(--gold);font-size:26px;cursor:pointer}
/* Ticker — 24px */
.ticker{display:grid;grid-template-columns:1fr 1fr;height:24px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  overflow:hidden;border-bottom:1px solid #000}
.ticker .c{display:flex;align-items:center;padding:0 14px;white-space:nowrap;overflow:hidden}
.ticker .sky{background:#101c34;color:#ffe08a}.ticker .und{background:#2a0a0c;color:#ffb39a;justify-content:flex-end}
/* Hero — compact 258px so tiles fit on 1280x800 */
.hero{position:relative;height:262px;background:#08060c url("/img/hero-duelo-arena.webp") center top / 100% 100% no-repeat;isolation:isolate}
.hero .cta-wrap{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center}
.btn-cta,.btn-rec{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:Caesar,serif;
  font-size:20px;padding:8px 26px;border-radius:10px;border:2px solid #7a4a00;color:#160c08;
  background:linear-gradient(180deg,#ffe36a,#f0b422 55%,#d4920c);box-shadow:0 0 18px #ffd24a88,0 3px 0 #7a4a00;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.btn-cta:hover,.btn-rec:hover{color:#160c08;filter:brightness(1.08)}
.btn-rec{background:linear-gradient(180deg,#ff6a4a,#e01818 55%,#9a0c0c);border-color:#5a1010;color:#fff6e0;
  box-shadow:0 0 18px #ff2a2a66,0 3px 0 #5a1010;font-size:16px;padding:8px 18px}
.note{font-size:11px;color:#c8b89a;margin:.4rem 0 0}
/* Slim promo rail ~90px art */
.promos{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 16px 6px;background:linear-gradient(90deg,#0b1428 0 50%,#1a0608 50% 100%)}
.promo{position:relative;display:block;border-radius:8px;overflow:hidden;border:1px solid var(--gold);height:90px;
  box-shadow:0 0 12px #0008}
.promo img{width:100%;height:90px;object-fit:cover}
/* Tile pit — two rows of 4, fully on first 800px screen */
.pit-wrap{padding:6px 16px 8px;background:linear-gradient(90deg,#07101e 0 50%,#140506 50% 100%)}
.pit-wrap h2{margin:0 0 6px;font-size:16px;color:var(--gold);text-align:center;font-weight:400}
.pit{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 10px}
.tile{display:block;border-radius:10px;overflow:hidden;border:1px solid #f0c14b99;box-shadow:0 0 10px #0008;background:#0a0a12}
.tile img{width:100%;height:102px;object-fit:cover;object-position:center}
.tile:hover{transform:translateY(-1px);box-shadow:0 0 16px #ffd24a55}
/* Coliseum odds */
.odds{display:grid;grid-template-columns:1fr 1fr;margin:8px 16px 18px;border:1px solid var(--gold);border-radius:8px;overflow:hidden}
.odds h2{margin:0;padding:7px 12px;font-size:14px;font-weight:400;letter-spacing:.08em}
.odds .sky{background:#101c34;border-right:1px solid #ffd24a55}
.odds .und{background:#2a0a0c}
.odds .sky h2{color:var(--gold);background:#182848}
.odds .und h2{color:#ffb39a;background:#3a1012}
.odds table{width:100%;border-collapse:collapse;font-size:13px}
.odds th,.odds td{padding:6px 12px;text-align:left;border-top:1px solid #ffffff14}
.odds th{color:#c8b89a;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.odds .sky td:last-child{color:var(--gold);font-weight:700}
.odds .und td:last-child{color:var(--ember);font-weight:700}
.odds caption{caption-side:bottom;padding:6px 12px;color:#b8a88a;font-size:11px;text-align:left}
/* Pages */
.wrap{max-width:1100px;margin:0 auto;padding:22px 18px 48px}
.crumbs{font-size:12px;color:#c8b89a;margin:0 0 12px}
.crumbs a{color:#ffe08a}.lead{font-size:1.05rem;color:#f3ead4}
article h1{font-size:2rem;margin:.2rem 0 1rem;color:var(--gold);font-weight:400}
article h2{font-size:1.35rem;margin:1.6rem 0 .6rem;color:var(--ember);font-weight:400}
article h3{font-size:1.1rem;color:#ffe08a;font-weight:400}
figure{margin:0 0 1.2rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#10080c}
figure img{width:100%;height:auto}figcaption{padding:8px 12px;font-size:13px;color:#c8b89a;background:#10080c}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:1.1rem 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1rem 0}
.fact{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#12080c}
.fact b{display:block;color:var(--gold);font-family:Caesar,serif;font-size:1.2rem;font-weight:400}
.fact span{font-size:12px;color:#c8b89a}
.callout{border-left:3px solid var(--crimson);padding:8px 12px;background:#1a0a0c;margin:1rem 0;color:#f3ead4}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Reviews amphitheater */
.arena-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center}
.arena-tools input{flex:1;min-width:200px;background:#12080c;border:1px solid var(--gold);color:var(--ivory);
  border-radius:8px;padding:8px 12px;font:inherit}
.wedges{display:flex;flex-wrap:wrap;gap:6px}
.wedges button{background:#160a0c;color:#ffe08a;border:1px solid var(--line);border-radius:999px;padding:6px 10px;
  font:inherit;cursor:pointer}
.wedges button.is-on{background:var(--gold);color:#160c08}
.scoreboard{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.slip{border:1px solid var(--line);border-radius:8px;padding:10px;background:linear-gradient(90deg,#10182a 0 50%,#1a0808 50% 100%);
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.slip .mono{width:42px;height:42px;border-radius:6px;object-fit:cover;border:1px solid #f0c14b66;background:#0a0a12}
.slip h3{margin:0;font-size:1rem;color:var(--gold);font-family:Questrial,sans-serif}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:11px;color:#c8b89a}
.cols b{display:block;color:#ffe08a;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.slip .go{font-size:12px;padding:6px 8px;border-radius:6px;background:#182848;color:#ffe08a;border:1px solid #f0c14b55}
.slip.feat{grid-column:1/-1;border-color:var(--gold);box-shadow:0 0 14px #ffd24a33}
.more{display:block;margin:16px auto;background:#160a0c;color:var(--gold);border:1px solid var(--gold);
  border-radius:8px;padding:10px 20px;font:inherit;cursor:pointer}
.hidden{display:none !important}
/* Review ata */
.ata{border:1px solid var(--gold);border-radius:10px;overflow:hidden;margin:1rem 0}
.ata header{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#101c34,#2a0a0c)}
.ata header div{padding:10px 14px}.ata header .k{font-size:11px;color:#c8b89a;text-transform:uppercase}
.ata dl{display:grid;grid-template-columns:180px 1fr;margin:0;border-top:1px solid #ffffff14}
.ata dt{padding:8px 14px;color:#c8b89a;background:#12080c;border-bottom:1px solid #ffffff10}
.ata dd{padding:8px 14px;margin:0;border-bottom:1px solid #ffffff10}
footer{border-top:1px solid var(--gold);background:linear-gradient(90deg,#0b1428,#1a0608);padding:22px 16px;color:#c8b89a;font-size:13px}
footer .fgrid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
footer a{color:#ffe08a}footer strong{color:var(--gold)}
.plus18{display:inline-block;border:1px solid var(--crimson);color:#ffb3a0;padding:1px 6px;border-radius:4px;margin-right:6px}
@media (max-width:900px){
  .ticker{grid-template-columns:1fr;height:22px}
  .ticker .und{display:none}
  .ticker .sky{justify-content:center}
  .hamb{display:block;position:absolute;left:8px;top:8px;z-index:45}
  .top{grid-template-columns:1fr auto 1fr;height:52px;padding-left:42px}
  .nav-l,.nav-r{display:none}
  .top.open .nav-l,.top.open .nav-r{display:flex;position:absolute;top:52px;left:0;right:0;flex-wrap:wrap;
    background:#0c0a10;padding:8px;border-bottom:1px solid var(--gold);z-index:44}
  .hero{height:200px;background-size:cover;background-position:center top}
  .promos,.odds,.grid-2,.facts,.scoreboard,.ata header,.ata dl{grid-template-columns:1fr}
  .pit{grid-template-columns:1fr 1fr}
  .tile img{height:110px}
  footer .fgrid{grid-template-columns:1fr}
  .ticker{font-size:10px}
  .brand b{font-size:24px}
}
@media (max-width:520px){
  .hero{height:200px}
  .btn-cta{font-size:16px;padding:7px 16px}
}