/* ARENA UI 1.0. Legacy components remain until their live integrations are verified.
   One shared foundation owns tokens, shell, controls, density and breakpoints. */
@import url('/assets/css/arena-legacy-components.css?v=20260906') layer(legacy);
:root {
  color-scheme:dark; --bg:#060b12; --panel:#0c1522; --panel-strong:#101e30;
  --line:#203249; --line-strong:#355274; --text:#edf5ff; --muted:#a4b7ce;
  --muted-2:#94aac3; --accent:#43caff; --accent-2:#168aff; --accent-3:#43caff;
  --shadow:none; --arena-radius:6px; --arena-space:16px; --arena-width:1440px;
  --arena-tm-font:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS","Segoe UI Symbol",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:90px}
body.arena-ui{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
.arena-ui .wrap{width:min(var(--arena-width),calc(100% - 48px));margin-inline:auto}
.arena-ui .main{padding:28px 0 48px;min-width:0}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.arena-ui img{max-width:100%;height:auto}
.arena-ui :is(h1,h2,h3,p){overflow-wrap:anywhere}
.arena-ui h1{font-size:clamp(2rem,4.5vw,3.75rem);line-height:1.06;letter-spacing:-.04em;margin:0 0 14px}
.arena-ui h2{font-size:1.35rem;line-height:1.25;letter-spacing:-.025em;margin:0}
.arena-ui h3{font-size:1.1rem;line-height:1.3;margin:0}
.arena-ui .eyebrow{font:700 .75rem/1.4 system-ui;letter-spacing:.14em;color:var(--accent);margin:0 0 10px}
.arena-ui .site-header{position:sticky;top:0;z-index:50;background:#080f19;border-bottom:1px solid var(--line);backdrop-filter:none}
.arena-ui .header-inner{min-height:76px;height:auto;gap:24px;padding-block:10px}
.arena-ui .brand{gap:10px}.arena-ui .brand img{width:42px;height:42px;flex-basis:42px;filter:none}
.arena-ui .brand strong{font-size:1rem;letter-spacing:.12em}.arena-ui .brand small{font-size:.75rem}
.arena-ui .main-nav{gap:3px;flex-wrap:wrap;justify-content:flex-end}
.arena-ui .main-nav a{animation:none;box-shadow:none;background:transparent;border:1px solid transparent;font-size:.875rem;min-height:44px;display:flex;align-items:center;padding:8px 10px;border-radius:4px}
.arena-ui .main-nav a.active{background:#12314c;border-color:#245174;color:#b9edff}
.arena-ui .main-nav .nick-nav-link{border:1px solid var(--line-strong);margin-left:8px}
.arena-ui :is(.panel,.hero-panel,.hero-card,.stat-card,.profile-hero,.auth-card){background:var(--panel);border:1px solid var(--line);border-radius:var(--arena-radius);box-shadow:none;backdrop-filter:none;min-width:0}
.arena-ui .panel{padding:20px;margin-bottom:18px}
.arena-ui .panel-head{gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.arena-ui .panel-head a{font-size:.875rem;min-height:32px;display:inline-flex;align-items:center}
.arena-ui :is(input,select,textarea,button,.btn,.auth-btn){font:inherit;border-radius:4px;min-height:44px;padding:10px 14px;max-width:100%;box-shadow:none}
.arena-ui :is(input,select,textarea){background:#080f19;border:1px solid var(--line-strong);color:var(--text);outline:revert}
.arena-ui input::placeholder{color:#91a8c1}
.arena-ui input[type=search]{min-width:0;flex:1}
.arena-ui :is(input[type=checkbox],input[type=radio]){min-height:20px;width:20px;accent-color:var(--accent)}
.arena-ui :is(button,.btn,.auth-btn){background:#31baff;border:1px solid #56c9ff;color:#03121e;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.arena-ui :is(button,.btn,.auth-btn):hover{filter:brightness(1.1);color:#03121e}
.arena-ui :is(.btn-secondary,.nav-toggle){background:#132339;color:var(--text);border-color:var(--line-strong)}
.arena-ui button:disabled{opacity:.55;cursor:not-allowed}
.arena-ui .toolbar{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:14px;backdrop-filter:none}
.arena-ui .split-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px}
.arena-ui .split-grid>*{min-width:0}
.arena-ui .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.arena-ui .stat-card{padding:16px 20px;border-left:3px solid var(--accent)}
.arena-ui .stat-card span{font-size:.75rem;color:var(--muted)}
.arena-ui .stat-card strong{font-size:clamp(1.5rem,3vw,2.25rem);margin-top:2px;font-variant-numeric:tabular-nums}
.arena-ui .stat-card em{font-size:.8rem;color:var(--muted);font-style:normal}
.arena-ui .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-radius:4px;border:1px solid var(--line);background:#09111e}
.arena-ui table{width:100%;min-width:620px;border-collapse:collapse;font-size:.875rem}
.arena-ui :is(th,td){padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.arena-ui th{font-size:.75rem;color:var(--muted);letter-spacing:.06em;background:#101e30}
.arena-ui td small{white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
.arena-ui td strong{font-variant-numeric:tabular-nums}
.arena-ui .rank{border-radius:4px;min-width:36px;padding:5px 8px;background:#173c57;color:#bdecff;font-variant-numeric:tabular-nums}
.arena-ui .ranking-list{gap:6px}
.arena-ui .ranking-list li{grid-template-columns:40px minmax(0,1fr) auto;padding:10px;border-radius:4px;border-color:var(--line);gap:10px}
.arena-ui :is(.tm-text,.tm-color,.arena-nickname-rendered,.arena-map-title-rendered){font-family:var(--arena-tm-font);overflow-wrap:anywhere;word-break:normal}
.tm-bold{font-weight:800}.tm-italic{font-style:italic}.tm-shadow{text-shadow:0 1px 2px #000,0 0 2px #d6edff}.tm-wide{letter-spacing:.045em}.tm-narrow{letter-spacing:-.025em}
/* Keep exact player-selected colors; small outline helps black codes on dark panels. */
.arena-ui .tm-text[style]{text-shadow:0 0 1px #c1d4eb}
.arena-ui .arena-masthead{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;padding:18px 0 28px;border-bottom:1px solid var(--line);margin-bottom:20px}
.arena-ui .arena-masthead h1{font-size:clamp(2.8rem,6.7vw,6rem);font-weight:900;letter-spacing:-.065em;line-height:.92;margin:0}
.arena-ui .arena-masthead h1 span{color:var(--accent)}
.arena-ui .arena-masthead-aside{max-width:300px;border-left:2px solid var(--accent);padding-left:18px}
.arena-ui .arena-masthead-aside p{font-size:1.1rem;margin-bottom:12px}
.arena-ui .arena-masthead-aside a{font-size:.875rem;color:var(--accent)}
.arena-ui .arena-portal{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;gap:20px;border-top:3px solid var(--accent)}
.arena-ui .arena-portal .eyebrow{margin-bottom:4px}
.arena-ui .live-server-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.arena-ui .live-panel{padding:14px;margin:0;background:#0a1320;border-color:#28435f}
.arena-ui .live-panel .panel-head{padding-bottom:10px;margin-bottom:12px;align-items:flex-start;flex-wrap:nowrap}
.arena-ui .live-panel .panel-head :is(h2,h3){min-width:0;font-size:1.1rem}
.arena-ui .live-badge{flex-shrink:0;font-size:.75rem;border:1px solid #346079;border-radius:4px;padding:3px 6px;background:#112e40;color:#a5e7ff}
.arena-ui .live-badge.offline,.arena-ui .live-badge.stale{color:#ffcd95;background:#30261c;border-color:#665039}
.arena-ui .live-overview-grid{display:block;margin:0 0 12px}
.arena-ui .live-card{background:none;border:0;padding:0;min-height:0}
.arena-ui .live-card>span{display:block;font-size:.75rem;color:var(--muted)}
.arena-ui .live-card strong{display:block;font-size:1rem;overflow-wrap:anywhere}
.arena-ui .live-card small{overflow-wrap:anywhere;display:block;color:var(--muted);font-size:.75rem}
.arena-ui .chips{gap:5px;max-height:160px;overflow:auto}
.arena-ui .chips .live-player-pill{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:4px 7px;font-size:.875rem}
.arena-ui .live-player-pill-link{max-width:100%}
.arena-ui .arena-home-replays-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.arena-ui .arena-home-replay-card{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:4px;min-width:0}
.arena-ui .arena-home-replay-main{min-width:0}.arena-ui .arena-home-replay-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.875rem;color:var(--muted)}
.arena-ui .arena-home-replay-side{display:grid;gap:6px;flex-shrink:0;align-content:center;font-variant-numeric:tabular-nums}
.arena-ui .arena-replay-play{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line-strong);border-radius:4px;color:var(--accent)}
.arena-ui .arena-secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.arena-ui .arena-secondary-grid p{color:var(--muted);margin:10px 0 14px}
.arena-ui .arena-racer-card{border-left:3px solid var(--accent)}
.arena-ui .profile-hero{padding:24px;gap:20px}.arena-ui .profile-meta{min-width:0}
.arena-ui .profile-meta span,.arena-ui .medal-grid div{border-radius:4px;border-color:var(--line)}
.arena-ui .pager{flex-wrap:wrap;gap:12px}
.arena-ui .site-footer{background:#080f19;padding:24px 0;border-top:1px solid var(--line)}
.arena-ui .arena-footer-legal{display:block;max-width:1000px;font-size:.75rem;line-height:1.6;color:var(--muted)}
.arena-ui .auth-wrap{width:min(560px,calc(100% - 32px));margin:48px auto}.arena-ui .auth-card{padding:26px}
.arena-ui .auth-field{display:block;margin:16px 0}.arena-ui .auth-field span{display:block;margin-bottom:6px;color:var(--muted)}
.arena-ui .auth-field input{width:100%}.arena-ui .auth-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.arena-ui :is(.auth-error,.auth-ok){padding:12px;margin:12px 0;border:1px solid #885153;border-radius:4px;background:#291820;color:#ffd3d4}
.arena-ui .auth-ok{background:#102b28;border-color:#347e70;color:#b9f3da}.arena-ui .auth-muted{color:var(--muted)}
.arena-ui :is(.empty,.arena-home-replays-empty){color:var(--muted);padding:18px;border:1px dashed var(--line-strong);border-radius:4px}
.skip-link,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;padding:12px;background:var(--accent);color:#03121e;z-index:10000}
.arena-ui .nav-toggle{display:none}
/* Decorative legacy layers have no functional role. */
.arena-ui :is(.bg-orb,.bg-grid,#arena-depth-bg,#arena-race-hero-bg){display:none}
@media(max-width:1200px){
 .arena-ui .nav-toggle{display:inline-flex}
 .arena-ui .main-nav{display:none;position:absolute;top:100%;left:16px;right:16px;max-height:calc(100dvh - 100px);overflow:auto;background:#0d1929;border:1px solid var(--line-strong);border-radius:4px;padding:12px;flex-direction:column;align-items:stretch}
 .arena-ui .main-nav.open{display:flex}.arena-ui .main-nav .nick-nav-link{margin-left:0}
 .arena-ui .live-server-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
 .arena-ui .split-grid,.arena-ui .profile-hero{grid-template-columns:minmax(0,1fr)}
 .arena-ui .arena-portal{grid-template-columns:minmax(0,1fr);gap:14px}
 .arena-ui .arena-home-replays-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .arena-ui .page-title{align-items:start;flex-wrap:wrap}
}
@media(max-width:600px){
 .arena-ui .wrap{width:calc(100% - 24px)}.arena-ui .main{padding-top:18px}
 .arena-ui .panel{padding:14px}.arena-ui .arena-masthead{grid-template-columns:minmax(0,1fr);gap:20px}
 .arena-ui .arena-masthead-aside{max-width:none}.arena-ui .arena-masthead-aside p{margin-bottom:4px}
 .arena-ui .stats-grid{gap:7px}.arena-ui .stat-card{padding:12px 8px}.arena-ui .stat-card em{display:block;font-size:.75rem}
 .arena-ui .live-server-list,.arena-ui .arena-home-replays-grid,.arena-ui .arena-secondary-grid{grid-template-columns:minmax(0,1fr)}
 .arena-ui .global-search{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
 .arena-ui :is(.toolbar,.auth-actions)>:is(input,select,button,.btn){flex:1 1 100%;width:100%}
 .arena-ui table{min-width:600px}.arena-ui :is(th,td){padding:10px}
 .arena-ui table tr>:first-child{position:sticky;left:0;background:#101e30;z-index:1}
 .arena-ui .medal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .arena-ui .profile-hero{padding:16px}.arena-ui .panel-head a{min-height:44px}
 .arena-ui [role=dialog]{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
}
@media(prefers-reduced-motion:reduce){.arena-ui *,.arena-ui *::before,.arena-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.arena-ui .brand{flex-shrink:0;min-width:124px}
.arena-ui .chips .live-player-pill{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:400px){
 .arena-ui .stats-grid{grid-template-columns:minmax(0,1fr)}
 .arena-ui .stat-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:10px 12px}
 .arena-ui .stat-card strong{font-size:1.5rem;grid-column:2;grid-row:1 / span 2;margin:0;align-self:center}
 .arena-ui .stat-card em{grid-column:1}
}