/* OneAIWorld leaderboard ("The Arena"): angled panels, gold-versus-blue duel, podium, heat tables.
   Loaded only by model_leaderboard.html. Barlow Condensed is used here for display type only. */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../../fonts/oaiw/barlow-condensed-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../../fonts/oaiw/barlow-condensed-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../../../fonts/oaiw/barlow-condensed-800-latin.woff2') format('woff2'); }

.oaiw-arena {
  --oaiw-font-arena: 'Barlow Condensed', 'Space Grotesk', 'Arial Narrow', sans-serif;
  --arena-gold: #ffc83d; --arena-silver: #c7d4e8; --arena-bronze: #d08a55;
  --arena-cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  --arena-cut-r: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.oaiw-arena .oaiw-center { text-align: center; max-width: 52rem; margin-inline: auto; }
.oaiw-arena .oaiw-arena-h2 { font-family: var(--oaiw-font-arena); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: .95; }

/* ---------- eyebrow + buttons ---------- */
.oaiw-arena .oaiw-arena-eyebrow { display: inline-flex; align-items: center; gap: .7rem; font: 700 .82rem var(--oaiw-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--arena-gold); margin-bottom: 1rem; }
.oaiw-arena .oaiw-arena-eyebrow::before, .oaiw-arena .oaiw-arena-eyebrow::after { content: ""; width: 2.4rem; height: 2px; background: currentColor; }
.oaiw-arena .oaiw-arena-eyebrow--theme { color: var(--oaiw-warning); }
.oaiw-arena-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.oaiw-arena .oaiw-arena-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: .85rem 2.2rem; font: 800 1.3rem var(--oaiw-font-arena); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: filter var(--oaiw-fast), transform var(--oaiw-fast);
}
.oaiw-arena .oaiw-arena-btn--primary { background: linear-gradient(180deg, #63b3ff, #2f78b8); color: #04101f; }
.oaiw-arena .oaiw-arena-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; }
.oaiw-arena .oaiw-arena-btn:hover, .oaiw-arena .oaiw-arena-btn:focus-visible { filter: brightness(1.14); transform: translateY(-2px); color: inherit; }
.oaiw-arena .oaiw-arena-btn--primary:hover { color: #04101f; }
.oaiw-arena .oaiw-arena-btn--ghost:hover { color: #fff; }

/* ---------- hero ---------- */
.oaiw-arena-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(2.5rem, 5vw, 4.5rem); background: #0a1220; }
.oaiw-arena-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 45% 55% at 50% 0, rgba(140, 200, 255, .38), transparent 66%), linear-gradient(115deg, rgba(66, 139, 202, .3) 0 50%, transparent 50%), linear-gradient(115deg, transparent 0 50%, rgba(255, 200, 61, .11) 50%), #0a1220;
}
.oaiw-arena-hero__bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px); }
.oaiw-arena-hero__title { text-align: center; }
.oaiw-arena .oaiw-arena-hero h1 { font-family: var(--oaiw-font-arena); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(3.4rem, 1.2rem + 9.5vw, 8.2rem); line-height: .86; color: #fff; margin: .4rem 0 1.1rem; }
.oaiw-arena .oaiw-arena-hero h1 span { color: #63b3ff; display: inline-block; }
.oaiw-arena-hero__sub { max-width: 46rem; margin: 0 auto; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.6; color: #a9bbd6; }

/* ---------- podium ---------- */
.oaiw-podium-wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.oaiw-podium-label { text-align: center; margin: 0 0 .9rem; font: 700 .78rem var(--oaiw-font-mono); letter-spacing: .18em; text-transform: uppercase; color: #8fa6c6; }
.oaiw-podium { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.4rem, 1.4vw, .9rem); }
.oaiw-pod {
  flex: 0 1 15.5rem; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .9rem .7rem 1rem; color: #fff;
  background: linear-gradient(180deg, #1a2f55, #0d1830); border: 1px solid rgba(120, 170, 240, .22); border-bottom: 0;
}
.oaiw-pod--1 { order: 2; min-height: 13rem; border-top: 4px solid var(--arena-gold); box-shadow: 0 -20px 60px rgba(255, 200, 61, .12); }
.oaiw-pod--2 { order: 1; min-height: 10.75rem; border-top: 4px solid var(--arena-silver); }
.oaiw-pod--3 { order: 3; min-height: 9rem; border-top: 4px solid var(--arena-bronze); }
.oaiw-pod__n { font: 800 3rem/1 var(--oaiw-font-arena); color: rgba(255, 255, 255, .16); }
.oaiw-pod--1 .oaiw-pod__n { color: rgba(255, 200, 61, .5); }
.oaiw-pod__name { font: 800 clamp(1.05rem, .8rem + 1vw, 1.65rem)/1.05 var(--oaiw-font-arena); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; margin-top: .2rem; }
.oaiw-pod__score { font: 700 1.05rem var(--oaiw-font-mono); color: #8fd0ff; margin-top: .35rem; }
.oaiw-pod__score small { color: #6f8db3; font-size: .75em; }
.oaiw-pod__note { margin-top: auto; padding-top: .5rem; font: 500 .68rem var(--oaiw-font-mono); letter-spacing: .05em; text-transform: uppercase; color: #8fa6c6; }
@media (max-width: 575.98px) { .oaiw-pod__note { display: none; } .oaiw-pod--1 { min-height: 10.5rem; } .oaiw-pod--2 { min-height: 8.75rem; } .oaiw-pod--3 { min-height: 7.5rem; } }

/* ---------- head to head ---------- */
.oaiw-duel { display: grid; grid-template-columns: 1fr 7rem 1fr; align-items: center; max-width: 60rem; margin: 0 auto var(--oaiw-space-6); }
.oaiw-duel__side { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.6rem 1.4rem; background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); clip-path: var(--arena-cut); min-width: 0; }
.oaiw-duel__side--l { border-left: 5px solid var(--oaiw-accent); }
.oaiw-duel__side--r { border-right: 5px solid var(--oaiw-warning); text-align: right; clip-path: var(--arena-cut-r); align-items: flex-end; }
.oaiw-duel__tag { font: 700 .72rem var(--oaiw-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oaiw-text-faint); }
.oaiw-duel__name { font: 800 clamp(1.5rem, 1rem + 1.6vw, 2.2rem)/1 var(--oaiw-font-arena); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; color: var(--oaiw-text); }
.oaiw-duel__score { font: 800 clamp(2.6rem, 1.8rem + 2.6vw, 3.9rem)/1 var(--oaiw-font-arena); color: var(--oaiw-accent); }
.oaiw-duel__side--r .oaiw-duel__score { color: var(--oaiw-warning); }
.oaiw-duel__wins { font-size: .85rem; color: var(--oaiw-text-muted); }
.oaiw-vs { justify-self: center; width: 4.6rem; height: 4.6rem; display: grid; place-items: center; transform: rotate(45deg); background: linear-gradient(135deg, var(--oaiw-text), var(--oaiw-accent)); color: var(--oaiw-bg); box-shadow: 0 0 0 6px rgba(var(--oaiw-accent-rgb), .18), 0 0 50px rgba(var(--oaiw-accent-rgb), .45); }
.oaiw-vs span { transform: rotate(-45deg); font: 800 2rem var(--oaiw-font-arena); }
@media (max-width: 767.98px) {
  .oaiw-duel { grid-template-columns: 1fr; gap: .4rem; }
  .oaiw-vs { width: 3.2rem; height: 3.2rem; margin: .6rem 0; }
  .oaiw-vs span { font-size: 1.4rem; }
  .oaiw-duel__side--r { text-align: left; align-items: flex-start; border-right: 1px solid var(--oaiw-line); border-left: 5px solid var(--oaiw-warning); clip-path: var(--arena-cut); }
}

.oaiw-tug { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; gap: .7rem; }
.oaiw-tug__row { display: grid; grid-template-columns: 2.8rem 1fr minmax(6.5rem, 9.5rem) 1fr 2.8rem; gap: .7rem; align-items: center; }
.oaiw-tug__label { text-align: center; font: 700 1.05rem var(--oaiw-font-arena); letter-spacing: .1em; text-transform: uppercase; color: var(--oaiw-text-muted); }
.oaiw-tug__v { font: 700 1rem var(--oaiw-font-mono); color: var(--oaiw-text-muted); }
.oaiw-tug__v--l { text-align: right; }
.oaiw-tug__bar { display: flex; height: .8rem; background: var(--oaiw-surface-2); box-shadow: inset 0 0 0 1px var(--oaiw-line); overflow: hidden; }
.oaiw-tug__bar--l { justify-content: flex-end; transform: skewX(-18deg); }
.oaiw-tug__bar--r { transform: skewX(-18deg); }
.oaiw-tug__bar i { display: block; width: var(--w); height: 100%; opacity: .5; transition: width .9s var(--oaiw-ease); }
.oaiw-tug__bar--l i { background: var(--oaiw-accent); }
.oaiw-tug__bar--r i { background: var(--oaiw-warning); }
.oaiw-tug__row.is-left .oaiw-tug__bar--l i, .oaiw-tug__row.is-right .oaiw-tug__bar--r i { opacity: 1; }
.oaiw-tug__row.is-left .oaiw-tug__v--l { color: var(--oaiw-accent); }
.oaiw-tug__row.is-right .oaiw-tug__v--r { color: var(--oaiw-warning); }
.oaiw-tug__row.is-left .oaiw-tug__label, .oaiw-tug__row.is-right .oaiw-tug__label { color: var(--oaiw-text); }
.oaiw-tug__row:not(.is-left):not(.is-right) .oaiw-tug__bar i { opacity: .85; }
@media (max-width: 575.98px) {
  .oaiw-tug__row { grid-template-columns: 2.4rem 1fr 1fr 2.4rem; gap: .4rem .6rem; }
  .oaiw-tug__label { grid-column: 1 / -1; order: -1; text-align: left; }
}

/* ---------- highlights ---------- */
.oaiw-hl { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }
.oaiw-hl__tile { display: flex; flex-direction: column; gap: .25rem; padding: 1.3rem 1.4rem; background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); clip-path: var(--arena-cut); min-width: 0; }
.oaiw-hl__tile i { font-size: 1.7rem; color: var(--oaiw-warning); margin-bottom: .3rem; }
.oaiw-hl__tile b { font: 700 1.25rem var(--oaiw-font-display); color: var(--oaiw-text); overflow-wrap: anywhere; }
.oaiw-hl__tile span { color: var(--oaiw-text-muted); font-size: .92rem; }
.oaiw-arena .oaiw-fineprint { font-size: var(--oaiw-text-sm); color: var(--oaiw-text-muted); margin: var(--oaiw-space-5) auto 0; }

/* ---------- tabs ---------- */
.oaiw-tabs { display: flex; justify-content: center; gap: .6rem; margin-bottom: var(--oaiw-space-5); }
.oaiw-tabs[hidden] { display: none; }
.oaiw-tabs button { padding: .55rem 1.6rem; border: 0; cursor: pointer; font: 800 1.2rem var(--oaiw-font-arena); letter-spacing: .06em; text-transform: uppercase; color: var(--oaiw-text-muted); background: var(--oaiw-surface); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background var(--oaiw-fast), color var(--oaiw-fast); }
.oaiw-tabs button:hover { color: var(--oaiw-text); }
.oaiw-tabs button.is-active { background: var(--oaiw-accent-fill); color: var(--oaiw-on-accent); }
.oaiw-tabs:not([hidden]) ~ .oaiw-rankpanel > .oaiw-rankpanel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.oaiw-rankpanel + .oaiw-rankpanel { margin-top: var(--oaiw-space-7); }
.oaiw-rankpanel__title { font: 800 2rem var(--oaiw-font-arena); text-transform: uppercase; letter-spacing: .02em; text-align: center; margin-bottom: .6rem; }
.oaiw-rankpanel__note { text-align: center; max-width: 52rem; margin: 0 auto var(--oaiw-space-5); color: var(--oaiw-text-muted); }

/* ---------- ranked tables ---------- */
.oaiw-tablewrap { overflow-x: auto; }
.oaiw-tablewrap:focus-visible { outline: 2px solid var(--oaiw-accent); outline-offset: 4px; }
.oaiw-tablewrap--narrow { max-width: 44rem; margin-inline: auto; }
.oaiw-lb { width: 100%; border-collapse: separate; border-spacing: 0 .45rem; }
.oaiw-lb tbody th.oaiw-lb__model { min-width: 10rem; }
.oaiw-lb thead th { padding: 0 .75rem .3rem; font: 600 .7rem var(--oaiw-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--oaiw-text-faint); white-space: nowrap; border: 0; background: transparent; text-align: left; }
.oaiw-lb thead th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.oaiw-lb thead th button:hover, .oaiw-lb thead th button:focus-visible { color: var(--oaiw-text); }
.oaiw-lb thead th button:focus-visible { outline: 2px solid var(--oaiw-accent); outline-offset: 3px; border-radius: 4px; }
.oaiw-lb thead th[aria-sort="ascending"] button::after { content: "\25B2"; font-size: .6rem; color: var(--oaiw-accent); }
.oaiw-lb thead th[aria-sort="descending"] button::after { content: "\25BC"; font-size: .6rem; color: var(--oaiw-accent); }
.oaiw-lb tbody > tr > * { padding: .7rem .75rem; background: var(--oaiw-surface); border-block: 1px solid var(--oaiw-line); vertical-align: middle; text-align: left; font-size: .95rem; color: var(--oaiw-text); }
.oaiw-lb tbody > tr > :first-child { border-left: 1px solid var(--oaiw-line); border-radius: 14px 0 0 14px; }
.oaiw-lb tbody > tr > :last-child { border-right: 1px solid var(--oaiw-line); border-radius: 0 14px 14px 0; }
.oaiw-lb tbody > tr:hover > * { background: var(--oaiw-surface-hover); }
.oaiw-lb__rank { width: 3.6rem; }
.oaiw-lb tbody th.oaiw-lb__model { font: 700 1.05rem var(--oaiw-font-display); overflow-wrap: anywhere; }
.oaiw-lb__overall { min-width: 8rem; }
.oaiw-lb__reviews { display: block; font: 500 .68rem var(--oaiw-font-mono); letter-spacing: .04em; color: var(--oaiw-text-faint); margin-top: .1rem; }
.oaiw-lb__overall .oaiw-bar { margin-top: .4rem; max-width: 9rem; }
.oaiw-lb tbody td.oaiw-lb__dim { text-align: center; font-family: var(--oaiw-font-mono); font-weight: 600; background: color-mix(in srgb, var(--oaiw-accent-fill) calc(var(--heat, 0) * .5%), var(--oaiw-surface)); }
.oaiw-lb thead th.oaiw-lb__dim { text-align: center; white-space: normal; max-width: 6rem; line-height: 1.25; }
.oaiw-lb tbody td.oaiw-lb__dim { padding-inline: .5rem; }
.oaiw-lb tbody td:nth-last-child(-n+2) { white-space: nowrap; }
.oaiw-lb tbody th.oaiw-lb__model, .oaiw-lb thead th { white-space: nowrap; }
.oaiw-lb--rel { min-width: 0; }
.oaiw-medal { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font: 800 1.15rem var(--oaiw-font-arena); }
.oaiw-medal--1 { background: var(--arena-gold); color: #241800; box-shadow: 0 0 16px rgba(255, 200, 61, .55); }
.oaiw-medal--2 { background: var(--arena-silver); color: #0d1b2e; }
.oaiw-medal--3 { background: var(--arena-bronze); color: #1c0f04; }
.oaiw-medal--n { background: var(--oaiw-surface-2); color: var(--oaiw-accent); box-shadow: inset 0 0 0 1px var(--oaiw-line-strong); }
.oaiw-chip { display: inline-block; min-width: 3.3rem; padding: .16rem .6rem; text-align: center; border-radius: 8px; font: 700 .98rem var(--oaiw-font-mono); }
.oaiw-chip--hi { background: var(--oaiw-score-hi); color: var(--oaiw-on-accent); }
.oaiw-chip--mid { background: var(--oaiw-score-mid); color: var(--oaiw-on-accent); }
.oaiw-chip--lo { background: #ffc83d; color: #241800; }
.oaiw-chip--low { background: var(--oaiw-surface-2); color: var(--oaiw-text); box-shadow: inset 0 0 0 1px var(--oaiw-line-strong); }
.oaiw-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem; border-radius: 999px; font: 600 .75rem var(--oaiw-font-mono); letter-spacing: .02em; color: var(--oaiw-text-muted); background: var(--oaiw-surface-2); box-shadow: inset 0 0 0 1px var(--oaiw-line); }
.oaiw-tag--fast { color: var(--oaiw-accent); margin-left: .35rem; }

.oaiw-empty { max-width: 34rem; margin: var(--oaiw-space-7) auto; text-align: center; padding: var(--oaiw-space-6); background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-lg); }
.oaiw-empty > i { font-size: 2.2rem; color: var(--oaiw-accent); }

/* ---------- methodology ---------- */
.oaiw-method { list-style: none; margin: 0 0 var(--oaiw-space-6); padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.oaiw-method li { padding: 1.4rem; background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-lg); }
.oaiw-method h3 { font-size: 1.15rem; margin: .9rem 0 .4rem; }
.oaiw-method p { margin: 0; color: var(--oaiw-text-muted); font-size: .95rem; }
.oaiw-privacy { display: flex; gap: 1rem; align-items: center; max-width: 46rem; margin: 0 auto; padding: 1rem 1.4rem; background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); border-left: 5px solid var(--oaiw-warning); }
.oaiw-privacy i { font-size: 1.6rem; color: var(--oaiw-warning); }
.oaiw-privacy p { margin: 0; color: var(--oaiw-text); }

/* ---------- closing CTA ---------- */
.oaiw-arena-finale { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: var(--oaiw-space-9); background: linear-gradient(115deg, rgba(66, 139, 202, .3) 0 50%, rgba(255, 200, 61, .1) 50%), #0a1220; }
.oaiw-arena-finale::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px); }
.oaiw-arena .oaiw-arena-finale h2 { font: 800 clamp(2.4rem, 1.2rem + 4.5vw, 5rem)/.92 var(--oaiw-font-arena); text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.oaiw-arena .oaiw-arena-finale h2 span { color: var(--arena-gold); }
.oaiw-arena-finale p { color: #b9cde8; font-size: 1.15rem; margin: 0; }

@media (max-width: 575.98px) {
  .oaiw-lb tbody th.oaiw-lb__model { min-width: 0; white-space: normal; }
  .oaiw-lb__rank { width: 2.8rem; }
  .oaiw-lb__overall { min-width: 0; }
  /* the trailing columns are hidden here, so the overall cell closes the row */
  .oaiw-lb:not(.oaiw-lb--rel) tbody > tr > .oaiw-lb__overall { border-right: 1px solid var(--oaiw-line); border-radius: 0 14px 14px 0; }
}

@media (prefers-reduced-motion: reduce) { .oaiw-arena .oaiw-arena-btn, .oaiw-tug__bar i, .oaiw-tabs button { transition: none; } }

/* model names in the ranked tables link to their model pages */
.oaiw-lb__model a { color: inherit; text-decoration: none; font-weight: 700; }
.oaiw-lb__model a:hover { color: var(--oaiw-accent); text-decoration: underline; text-underline-offset: 3px; }