/* Previously Sports — Stats Hub · THE ARENA (C1) · arena.css v20261017ar3
   Ground-up rebuild display layer (James pick, 2026-10-17). Panel-wall
   grammar from CONCEPTS.md C1 + mocks/core.css + c1-*.html, scoped under
   .arena so nothing leaks into site chrome or league shells. Marathon
   ("Previously Display") 400 only · black/silver/red house tokens. */
.arena{--ar-bg:#000;--ar-surf:#101010;--ar-surf2:#1B1B1B;--ar-line:#2C2C2C;
 --ar-line2:#1E1E1E;--ar-silver:#A5ACAF;--ar-red:#E10600;--ar-ink:#EDEDED;
 --ar-disp:'Previously Display','Inter',sans-serif;
 color:var(--ar-ink);font-size:15px;line-height:1.45;max-width:1440px;
 margin:0 auto;padding:0 16px 44px;-webkit-font-smoothing:antialiased}
.arena *{box-sizing:border-box}
.arena .disp{font-family:var(--ar-disp);font-weight:400}
.arena .num{font-variant-numeric:tabular-nums lining-nums}
.arena .red{color:var(--ar-red)}.arena .silver{color:var(--ar-silver)}
.arena a{color:inherit;text-decoration:none}
.arena button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
.arena :focus-visible{outline:2px solid var(--ar-red);outline-offset:2px}

/* ---- hub chrome (inside the arena mount; site header is bible nav) ---- */
.arena .hubrow{display:flex;align-items:baseline;gap:22px;padding:14px 0 2px;flex-wrap:wrap}
.arena .hubname{font-family:var(--ar-disp);font-size:19px;letter-spacing:.14em;color:#fff}
.arena .htabs{display:flex;gap:18px;flex-wrap:wrap}
.arena .htab{font-size:13px;color:var(--ar-silver);padding-bottom:4px;border-bottom:2px solid transparent}
.arena .htab.on{color:#fff;border-bottom:2px solid var(--ar-red)}
.arena .ltabs{display:flex;gap:16px;flex-wrap:wrap;padding:10px 0 0}
.arena .ltab{font-size:12px;letter-spacing:.1em;color:var(--ar-silver);padding-bottom:3px;border-bottom:2px solid transparent;text-transform:uppercase}
.arena .ltab.on{color:#fff;border-bottom:2px solid var(--ar-red)}
.arena .audit{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
 border-bottom:1px solid var(--ar-line);padding:10px 2px 8px;margin-bottom:14px}
.arena .audit-t{font-family:var(--ar-disp);font-size:12px;letter-spacing:.2em;color:#fff}
.arena .audit-n{font-size:11.5px;color:var(--ar-silver)}

/* ---- panel kit ---- */
.arena .panels{display:grid;gap:14px}
.arena .mod{background:linear-gradient(180deg,#141414,#0D0D0D);border:1px solid var(--ar-line2);
 border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.5);padding:18px;min-width:0}
.arena .p-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.arena .p-title{font-family:var(--ar-disp);font-size:16px;letter-spacing:.12em;color:#fff}
.arena .kick{font-family:var(--ar-disp);font-size:11px;letter-spacing:.22em;color:var(--ar-silver);text-transform:uppercase}
.arena .door{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
 border-top:1px solid var(--ar-line);padding:12px 2px 2px;margin-top:12px;font-size:13px;color:#fff}
.arena .door .arr{color:var(--ar-red);font-family:var(--ar-disp)}
.arena .note{font-size:12px;color:var(--ar-silver);line-height:1.6;margin-top:10px}
.arena .body-t{font-size:13.5px;line-height:1.65}
.arena .err{border:1px solid var(--ar-line);border-radius:14px;padding:18px;color:var(--ar-silver);font-size:13.5px}

/* lanes (boards + front race) */
.arena .lane{display:grid;grid-template-columns:22px 40px 1fr auto;gap:10px;align-items:center;
 width:100%;text-align:left;padding:7px 0;border-bottom:1px solid var(--ar-line2)}
.arena .lane:last-of-type{border-bottom:none}
.arena .rk{font-family:var(--ar-disp);font-size:15px;color:var(--ar-silver);text-align:center}
.arena .lane .nm{font-size:14.5px}.arena .lane .tm{font-size:11px;color:var(--ar-silver);letter-spacing:.08em}
.arena .lane .bar{display:block;height:6px;background:#232323;border-radius:3px;margin-top:5px;overflow:hidden}
.arena .lane .bar i{display:block;height:100%;background:var(--ar-silver);border-radius:3px}
.arena .lane .bar i.r{background:var(--ar-red)}
.arena .lv{font-family:var(--ar-disp);font-size:21px;text-align:right}
.arena .hs{border-radius:50%;object-fit:cover;background:var(--ar-surf2)}
.arena .expand{border-top:1px solid var(--ar-line);margin-top:10px;padding-top:12px}
.arena .minirow{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--ar-line2);font-size:13.5px}
.arena .minirow:last-child{border-bottom:none}
.arena .minirow .v{font-variant-numeric:tabular-nums;white-space:nowrap}

/* percentile bars (Phase A grammar: silver, red at 95th+) */
.arena .pb{display:grid;grid-template-columns:96px 1fr 52px 44px;align-items:center;gap:10px;padding:5px 0}
.arena .pb-l{font-size:12px;color:var(--ar-silver);letter-spacing:.04em}
.arena .pb-t{height:8px;background:#232323;border-radius:4px;overflow:hidden;display:block}
.arena .pb-t .fill{display:block;height:100%;background:var(--ar-silver);border-radius:4px}
.arena .pb-t .fill.red{background:var(--ar-red)}
.arena .pb-v{font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.arena .pb-p{font-size:11px;color:var(--ar-silver);text-align:right}

/* verdict / faces / pairs (compare) */
.arena .faces{display:flex;align-items:center;gap:12px}
.arena .faces .hs{width:64px;height:64px}
.arena .vs{font-family:var(--ar-disp);color:var(--ar-red);font-size:18px}
.arena .verdict-n{font-family:var(--ar-disp);font-size:26px;color:#fff}
.arena .vhead{flex-wrap:wrap}
.arena .vhead .vname{font-size:24px}
.arena .vhead .vside{min-width:0}
.arena .vhead .vside>span{min-width:0}
.arena .vhead .vb{margin-left:auto}
/* Verdict header, narrow composition (rotation fix, 2026-10-17): below the
   12-column breakpoint the single-row header gets the stacked treatment —
   each face becomes a column (headshot over name) in its own half, and the
   counted verdict takes its own full-width line. The one-row form needs
   ~680px of min-content; in a phone-width panel the flex items crushed
   below their content, name text spilled into the verdict block, and
   player B's block ran off the right edge of the screen. */
@media(max-width:999px){
 .arena .vhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:14px 12px}
 .arena .vhead .vside{flex-direction:column;gap:8px;min-width:0}
 .arena .vhead .va{grid-column:1;grid-row:1;align-items:flex-start}
 .arena .vhead .vb{grid-column:2;grid-row:1;flex-direction:column-reverse;align-items:flex-end}
 .arena .vhead .vside>span{min-width:0}
 .arena .vhead .vctr{grid-column:1/-1;grid-row:2}
 .arena .vhead .vname{font-size:20px}
 .arena .vhead .faces .hs{width:56px;height:56px}}
/* Small phones: even a half column is too narrow for the longest names in
   the index (a 13-letter surname runs ~190px at 20px), so the faces stack
   full-width — A, then B right-aligned, then the verdict. */
@media(max-width:560px){
 .arena .vhead{grid-template-columns:minmax(0,1fr)}
 .arena .vhead .va{grid-column:1;grid-row:1}
 .arena .vhead .vb{grid-column:1;grid-row:2}
 .arena .vhead .vctr{grid-column:1;grid-row:3}}
.arena .pair{display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--ar-line2)}
.arena .pair:last-child{border-bottom:none}
.arena .pair .side{display:flex;align-items:center;gap:8px;min-width:0}
.arena .pair .side.r{flex-direction:row-reverse}
.arena .pair .tr{flex:1;height:9px;background:#232323;border-radius:4px;overflow:hidden}
.arena .pair .tr i{display:block;height:100%;background:var(--ar-silver)}
.arena .pair .side.r .tr i{margin-left:auto}
.arena .pair .tr i.win{background:var(--ar-red)}
.arena .pair .pv{font-size:15px;font-variant-numeric:tabular-nums;min-width:38px}
.arena .pair .side.r .pv{text-align:right}
.arena .pair .cl{text-align:center;font-size:11px;color:var(--ar-silver);letter-spacing:.1em}

/* radar */
.arena .radar .ring{fill:none;stroke:var(--ar-line);stroke-width:1}
.arena .radar .spoke{stroke:var(--ar-line);stroke-width:1}
.arena .radar .shape1{fill:rgba(225,6,0,.28);stroke:var(--ar-red);stroke-width:2}
.arena .radar .shape2{fill:rgba(165,172,175,.20);stroke:var(--ar-silver);stroke-width:2}
.arena .radar .rlab{fill:var(--ar-silver);font-size:9.5px;letter-spacing:.12em;font-family:'Inter',sans-serif}
.arena .radar .rvlab{fill:#fff;font-size:10px;font-family:var(--ar-disp)}

/* player dossier */
.arena .bio{display:flex;gap:16px;align-items:center}
.arena .bio .hs{width:92px;height:92px}
.arena .bigname{font-family:var(--ar-disp);font-size:30px;line-height:1.05;color:#fff}
.arena .facts{font-size:12.5px;color:var(--ar-silver);line-height:1.7}
.arena .split3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.arena .split3 .n{font-family:var(--ar-disp);font-size:30px}
.arena .split3 .l{font-size:11px;color:var(--ar-silver);letter-spacing:.1em;margin-top:2px}
.arena .tag{display:inline-block;border:1px solid var(--ar-line);border-radius:3px;
 padding:3px 8px;font-size:11px;color:var(--ar-silver);letter-spacing:.06em;margin:0 6px 6px 0}

/* standings */
.arena .standrow{display:grid;grid-template-columns:20px 26px 1fr auto auto;gap:9px;align-items:center;
 padding:6.5px 0;border-bottom:1px solid var(--ar-line2);font-size:13.5px}
.arena .standrow:last-of-type{border-bottom:none}
.arena .standrow .pct{font-variant-numeric:tabular-nums;color:var(--ar-silver);font-size:12.5px;white-space:nowrap}
.arena .standrow .logo{object-fit:contain}
.arena .pline{display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--ar-red);
 font-size:10.5px;letter-spacing:.18em;font-family:var(--ar-disp)}
.arena .pline:before,.arena .pline:after{content:'';flex:1;border-top:2px solid var(--ar-red)}

/* records */
.arena .recnum{font-family:var(--ar-disp);font-size:52px;line-height:1}

/* pickers (compare) */
.arena .pickers{display:grid;gap:12px;margin-bottom:14px}
.arena .picker label{display:block;font-size:11px;letter-spacing:.14em;color:var(--ar-silver);margin-bottom:6px;text-transform:uppercase}
.arena .picker .wrap{position:relative}
.arena .picker input{width:100%;background:var(--ar-surf);border:1px solid var(--ar-line);border-radius:8px;
 color:#fff;padding:10px 12px;font-size:14px}
.arena .results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;list-style:none;margin:0;
 padding:6px;background:rgba(16,16,16,.92);backdrop-filter:blur(10px);border:1px solid var(--ar-line);
 border-radius:10px;max-height:264px;overflow:auto}
.arena .results li{padding:7px 8px;font-size:13.5px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.arena .results li:hover,.arena .results li.on{background:var(--ar-surf2)}

/* skeleton (fixed geometry — no layout shift while data loads) */
.arena .skel{display:grid;gap:14px}
.arena .skel .mod{height:308px}
.arena .skel .mod.tall{height:430px}
@media(min-width:1000px){
 .arena .panels{grid-template-columns:repeat(12,1fr)}
 .arena .span3{grid-column:span 3}.arena .span4{grid-column:span 4}.arena .span5{grid-column:span 5}
 .arena .span6{grid-column:span 6}.arena .span7{grid-column:span 7}.arena .span8{grid-column:span 8}
 .arena .span12{grid-column:span 12}
 .arena .skel{grid-template-columns:repeat(12,1fr)}
 .arena .skel .mod{grid-column:span 6}.arena .skel .mod.tall{grid-column:span 7}
 .arena .recnum{font-size:64px}.arena .bigname{font-size:38px}
 .arena .pickers{grid-template-columns:1fr 1fr}}