/* The Arena — competitive game standings, composed separately from the OS shell. */
body:has(.arena-page) .section-atmosphere { display:none; }
/* Centre the capped outer shell as well as the Arena on wide displays. */
#main.main:has(> .arena-page) { margin-inline:auto; }
.arena-page { --arena-gold:#ffcf5b; --arena-ice:#88dce9; position:relative; max-width:1500px; margin:0 auto; }
.arena-masthead { position:relative; min-height:230px; display:flex; align-items:center; isolation:isolate; padding:30px 0 22px; }
.arena-scene { position:absolute; z-index:-2; inset:-30px calc(-1 * var(--gutter)) -110px; background:linear-gradient(90deg,#08090b 0%,#08090b32 55%,#08090b00 80%),linear-gradient(0deg,#08090b,transparent 45%),url('/assets/arena-045/arena-045.webp') right 48%/auto 118% no-repeat; }
.arena-title { position:relative; z-index:1; width:100%; text-align:center; }
.arena-title>.arena-eyebrow,.arena-title>.arena-provenance { justify-content:center; }
.arena-title>p { margin-inline:auto!important; }
.arena-eyebrow { display:flex; align-items:center; gap:8px; color:#c3b994; font:600 8px/1.4 Consolas,monospace; letter-spacing:2px; }
.arena-title>.arena-eyebrow { color:#ffd66d; }
.arena-title h1 { font:900 clamp(45px,5.8vw,85px)/.98 var(--display-font); letter-spacing:-3px; margin:13px 0 12px; text-shadow:0 6px 35px #0009; }
.arena-title h1 em { color:var(--arena-gold); font-style:normal; }
.arena-title>p { font-size:13px; color:#d3d6de; margin:0; }
.arena-provenance { display:flex; gap:16px; align-items:center; margin-top:21px; color:#b0b8c9; font:8px/1.5 Consolas,monospace; text-transform:uppercase; letter-spacing:.8px; }
.arena-provenance>span+span { border-left:1px solid #b8c8e044; padding-left:16px; }
.arena-provenance>span:first-child { color:#ecd092; }
.arena-controls { position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 16px; border:1px solid #c3d6ee22; border-left:3px solid #eac35c; background:linear-gradient(105deg,#1b202be8,#0d111ae8); border-radius:5px; backdrop-filter:blur(18px); }
.arena-modes { display:flex; gap:8px; }
.arena-modes>a { display:flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:11px 23px; font-size:12px; font-weight:650; border:1px solid transparent; border-radius:4px; color:#b5bdcc; }
.arena-modes>a:hover { background:#ffffff0a; color:#fff; }
.arena-modes>a.active { background:linear-gradient(125deg,#ffdd82,#e9b333); color:#241b08; border-color:#ffe2a0; box-shadow:0 5px 22px #efb7261a; }
.arena-game { display:flex; align-items:center; gap:14px; }
.arena-game>span { font:7px/1.5 Consolas,monospace; letter-spacing:1px; color:#9faabe; }
.arena-game select { background:#0c1019; border:1px solid #75879e55; color:#edf1fa; min-width:200px; height:42px; border-radius:4px; padding:0 32px 0 13px; font-size:12px; }
.arena-section-head,.arena-roster-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.arena-section-head { margin:24px 0 5px; }
.arena-section-head>div,.arena-roster-head>div { display:flex; align-items:baseline; gap:16px; }
.arena-section-head h2,.arena-roster-head h2 { font-size:21px; font-weight:700; letter-spacing:-.4px; margin:0; }
.arena-field-label { font:7px/1.5 Consolas,monospace; letter-spacing:1px; color:#9aa9be; }
.arena-podium { display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:20px; align-items:end; padding:24px 2% 13px; }
.arena-contender { --place-color:#ffc957; position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:263px; padding:18px 15px 25px; text-align:center; transition:transform .3s var(--os-ease),filter .3s; }
.arena-contender:before { content:''; position:absolute; inset:45px 0 0; z-index:-2; clip-path:polygon(10% 0,90% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%); background:linear-gradient(145deg,color-mix(in srgb,var(--place-color) 15%,#0e1520),#0e131ddc 60%); border-top:1px solid color-mix(in srgb,var(--place-color) 58%,transparent); }
.arena-contender:after { content:''; position:absolute; bottom:10px; left:14%; right:14%; height:1px; background:var(--place-color); box-shadow:0 0 14px var(--place-color),0 -20px 45px color-mix(in srgb,var(--place-color) 32%,transparent); opacity:.65; }
.arena-contender:hover { transform:translateY(-5px); filter:brightness(1.13); }
.arena-contender.place-1 { order:2; min-height:300px; padding-bottom:34px; }
.arena-contender.place-2 { order:1; --place-color:#9bcddc; }
.arena-contender.place-3 { order:3; --place-color:#dc9d7b; }
.contender-portrait { width:94px; height:94px; position:relative; display:grid; place-items:center; margin-bottom:39px; }
.contender-portrait>.avatar,.contender-portrait>.arena-initials { width:100%; height:100%; --avatar:94px!important; border-radius:18px; border:1px solid color-mix(in srgb,var(--place-color) 65%,transparent); background:#101825; overflow:hidden; box-shadow:0 6px 40px #0009; }
.contender-portrait img { width:100%; height:100%; object-fit:cover; }
.place-1 .contender-portrait { width:110px; height:110px; }
.place-1 .contender-portrait>.avatar { --avatar:110px!important; }
.arena-initials { display:grid; place-items:center; font:800 30px/1 var(--display-font); color:#ede4cf; background:radial-gradient(circle at 30% 20%,#3a465c,#111823 75%); }
.contender-orbit { position:absolute; inset:-9px; border:1px solid color-mix(in srgb,var(--place-color) 48%,transparent); border-radius:24px; transform:rotate(-7deg); z-index:-1; box-shadow:0 0 28px color-mix(in srgb,var(--place-color) 15%,transparent); }
.place-1 .contender-orbit { animation:arena-orbit 6s ease-in-out infinite; }
.contender-crest { position:absolute; width:65px; height:74px; top:84px; z-index:2; filter:drop-shadow(0 5px 12px #000b); }
.place-1 .contender-crest { top:101px; width:74px; height:84px; }
.contender-label { display:block; font:6px/1.5 Consolas,monospace; letter-spacing:1.7px; color:var(--place-color); margin-bottom:7px; }
.contender-info { position:relative; z-index:1; }
.contender-info h2 { font:750 clamp(15px,1.7vw,24px)/1.2 var(--display-font); letter-spacing:-.4px; margin:0 0 9px; color:#f2f4f8; overflow-wrap:anywhere; }
.contender-score { font:600 21px/1.1 var(--display-font); color:#f4e9d0; letter-spacing:-.5px; }
.contender-score small { color:var(--place-color); font:7px Consolas,monospace; letter-spacing:1px; }
.arena-you { display:inline-block; border:1px solid #ffd98055; border-radius:2px; font:6px/1.5 Consolas,monospace; letter-spacing:1px; padding:3px 7px; color:#ffdb85; margin-top:9px; }
.contender-floor { position:absolute; right:12px; bottom:23px; font:900 65px/1 var(--display-font); color:color-mix(in srgb,var(--place-color) 7%,transparent); z-index:-1; }
.contender-rays { position:absolute; z-index:-3; inset:-24px -10px 0; background:conic-gradient(from 340deg at 50% 100%,transparent 0deg,color-mix(in srgb,var(--place-color) 12%,transparent) 15deg,transparent 35deg); mask-image:linear-gradient(0deg,#000,transparent 90%); }
.arena-standings { border:1px solid #9db8df24; border-radius:6px; background:linear-gradient(125deg,#141b27e8,#0b1019eb); overflow:hidden; margin-top:25px; }
.arena-roster-head { padding:20px 24px; }
.arena-search { display:flex; gap:9px; align-items:center; color:#9baac0; border-bottom:1px solid #9dafc844; padding:8px 0; }
.arena-search input { background:transparent; color:#e5edf7; border:0; outline:0; width:195px; font-size:11px; }
.arena-search:focus-within { border-color:var(--arena-gold); }
.arena-column-head { display:grid; grid-template-columns:55px 1fr auto; gap:15px; padding:10px 25px; border-block:1px solid #a9c3e51c; background:#060b123d; font:7px Consolas,monospace; letter-spacing:1.3px; color:#93a1b6; }
.arena-player-row.leader-row { display:flex; gap:16px; padding:11px 24px; border-color:#b9cced12; background:transparent; position:relative; min-height:61px; }
.arena-player-row.leader-row:hover { background:#7995c00c; }
.arena-player-row.board-you { background:linear-gradient(90deg,#ffc43d12,transparent); border-left:3px solid #f2c561; padding-left:21px; }
.arena-position { width:38px; flex:0 0 38px; text-align:center; font:600 15px Consolas,monospace; color:#8594a9; }
.arena-position img { display:block; margin:auto; width:30px; height:34px; }
.arena-row-portrait { width:38px; height:38px; flex:0 0 38px; }
.arena-row-portrait .avatar,.arena-row-portrait .arena-initials { width:38px; height:38px; border-radius:8px; font-size:13px; border:1px solid #acc4e529; }
.arena-player-name { font-size:13px; font-weight:650; color:#e5eaf3; min-width:0; overflow-wrap:anywhere; }
.arena-player-name small { font:6px Consolas,monospace; color:#f9d474; margin-left:10px; letter-spacing:1px; }
.arena-player-name em { display:block; font:6px Consolas,monospace; color:#8999b0; margin-top:5px; letter-spacing:1px; }
.arena-player-score { margin-left:auto; flex-shrink:0; color:#f5dfad; font:600 16px var(--display-font); }
.arena-player-score small { font:7px Consolas,monospace; color:#8f9eb4; margin-left:5px; }
.arena-player-dock { position:sticky; bottom:15px; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:16px; background:linear-gradient(115deg,#20232bf5,#101722ed); border:1px solid #d5bd754d; border-radius:5px; padding:13px 22px; margin-top:20px; backdrop-filter:blur(20px); box-shadow:0 8px 35px #0006; }
.arena-player-dock>div { display:flex; align-items:center; gap:13px; }
.arena-player-dock .avatar { --avatar:38px!important; border-radius:8px; }
.arena-player-dock .arena-initials { width:38px; height:38px; border-radius:8px; font-size:14px; }
.arena-player-dock small { display:block; font:6px Consolas,monospace; letter-spacing:1.3px; color:#b6bbc9; margin-bottom:5px; }
.arena-player-dock strong { font-size:14px; color:#f4de9e; }
.arena-player-dock strong i { color:#8f8470; padding:0 8px; font-style:normal; }
.arena-footnote { font-size:9px; line-height:1.7; color:#929caf; margin:18px 0 0; max-width:820px; }
.arena-open { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:50px; min-height:280px; padding:20px 5%; }
.arena-empty-places { display:flex; align-items:end; justify-content:center; gap:12px; height:190px; }
.arena-empty-places>span { height:128px; width:100px; display:flex; justify-content:center; align-items:start; border-bottom:2px solid #8cb1c755; background:linear-gradient(0deg,#81cfff12,transparent); }
.arena-empty-places>span:nth-child(2) { height:178px; border-color:#ffd37199; background:linear-gradient(0deg,#ffcf591a,transparent); }
.arena-empty-places>span:nth-child(3) { height:105px; }
.arena-empty-places img { width:85%; height:auto; opacity:.72; filter:drop-shadow(0 5px 20px #0007); }
.arena-open h2 { font:750 29px/1.08 var(--display-font); margin:10px 0; max-width:400px; letter-spacing:-.8px; }
.arena-open p { color:#adb9cc; font-size:12px; line-height:1.7; max-width:430px; margin:12px 0 17px; }
.arena-unlisted { display:flex; align-items:center; gap:15px; color:#9fabc0; padding:25px; font-size:12px; }
.arena-unlisted[hidden],.arena-podium[hidden],.arena-player-row[hidden] { display:none; }
.arena-sparks { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.arena-sparks i { position:absolute; right:18%; bottom:16%; width:2px; height:7px; background:#ffd477; box-shadow:0 0 9px #ffc74d; animation:arena-spark 6s ease-out infinite; opacity:0; }
.arena-sparks i:nth-child(2) { right:25%; animation-delay:1.5s; }
.arena-sparks i:nth-child(3) { right:9%; animation-delay:3s; }
.arena-sparks i:nth-child(4) { right:33%; animation-delay:4.2s; }
.arena-sparks i:nth-child(5) { right:16%; animation-delay:5s; }
@keyframes arena-spark { 0%{transform:translate(0,20px) rotate(25deg);opacity:0}20%{opacity:.65}80%{opacity:0}100%{transform:translate(-60px,-175px) rotate(25deg);opacity:0} }
@keyframes arena-orbit { 0%,100%{transform:rotate(-7deg);opacity:.5}50%{transform:rotate(7deg);opacity:1} }
body.reduced-motion .arena-sparks,body.reduced-motion .contender-orbit { animation:none!important; }
body.reduced-motion .arena-sparks { display:none; }
body.arena-backgrounded .arena-page * { animation-play-state:paused!important; }
.arena-page .arena-player-dock { position:relative; bottom:auto; }
.arena-showcase,.arena-standings { position:relative; z-index:1; }
.arena-you { position:absolute; top:100%; left:50%; transform:translateX(-50%); white-space:nowrap; }
body.reduce-atmosphere .arena-sparks { display:none; }
@media(prefers-reduced-motion:reduce) { .arena-sparks { display:none; }.contender-orbit { animation:none!important; }.arena-contender { transition:none; } }
@media(max-width:1100px) { .arena-title h1{font-size:62px}.arena-masthead{min-height:210px}.arena-game>span{display:none}.arena-roster-head>div .arena-eyebrow{display:none}.arena-podium{gap:12px;padding-inline:0}.arena-scene{background-size:auto,auto,auto 108%}.arena-modes>a{padding-inline:16px}.arena-section-head>div{gap:12px}.arena-open{gap:25px;padding-inline:2%} }
@media(max-width:760px) {
 .arena-masthead{min-height:210px;padding:22px 0}.arena-title h1{font-size:48px;letter-spacing:-2px}.arena-title>p{font-size:11px;max-width:210px;line-height:1.6}.arena-title>.arena-eyebrow{font-size:7px;letter-spacing:1px}.arena-scene{inset:-10px -22px -35px;background-position:center,center,74% center;background-size:auto,auto,auto 100%;opacity:.78}.arena-provenance{font-size:6px;gap:8px;margin-top:17px}.arena-provenance>span+span{padding-left:8px}.arena-controls{flex-wrap:wrap;gap:12px;padding:10px}.arena-modes{flex:1;justify-content:stretch;gap:5px}.arena-modes>a{flex:1;min-height:38px;padding:9px 10px;font-size:10px;gap:6px}.arena-modes .icon{width:13px}.arena-game{width:100%;justify-content:space-between}.arena-game>span{display:block;font-size:6px}.arena-game select{min-width:0;width:61%;height:35px;font-size:11px}.arena-section-head{margin-top:22px}.arena-section-head>div{display:block}.arena-section-head .arena-eyebrow{font-size:6px;letter-spacing:1.2px;margin-bottom:5px}.arena-section-head h2{font-size:18px}.arena-field-label{font-size:6px;text-align:right;max-width:100px}.arena-podium{gap:7px;padding-top:16px}.arena-contender{min-height:220px;padding:13px 6px 23px}.arena-contender.place-1{min-height:248px;padding-bottom:28px}.contender-portrait{width:60px;height:60px;margin-bottom:31px}.place-1 .contender-portrait{width:72px;height:72px}.contender-portrait>.avatar{--avatar:60px!important}.place-1 .contender-portrait>.avatar{--avatar:72px!important}.contender-orbit{inset:-5px;border-radius:18px}.contender-portrait>.avatar,.contender-portrait>.arena-initials{border-radius:13px}.contender-crest{width:44px;height:50px;top:64px}.place-1 .contender-crest{width:52px;height:59px;top:78px}.contender-label{font-size:5px;letter-spacing:.4px;min-height:15px}.contender-info h2{font-size:13px;line-height:1.3;max-width:110px;min-height:34px}.contender-score{font-size:16px}.contender-score small{font-size:6px}.contender-floor{font-size:42px;right:3px;bottom:22px}.arena-initials{font-size:21px}.arena-you{font-size:5px;padding:2px 4px;margin-top:6px}.arena-roster-head{padding:15px 12px;gap:12px}.arena-roster-head h2{font-size:17px}.arena-search{max-width:54%}.arena-search input{width:100%;min-width:0;font-size:10px}.arena-column-head{font-size:6px;padding-inline:13px;grid-template-columns:27px 1fr auto;gap:11px}.arena-player-row.leader-row{padding:10px 12px;gap:10px}.arena-player-row.board-you{padding-left:9px}.arena-position{width:26px;flex-basis:26px;font-size:12px}.arena-position img{width:25px;height:29px}.arena-row-portrait{width:32px;height:32px;flex-basis:32px}.arena-row-portrait .avatar,.arena-row-portrait .arena-initials{width:32px;height:32px;--avatar:32px!important;font-size:11px}.arena-player-name{font-size:11px}.arena-player-score{font-size:13px}.arena-player-score small{font-size:6px;margin-left:2px}.arena-player-dock{bottom:82px;padding:12px;gap:10px}.arena-player-dock strong{font-size:12px}.arena-player-dock small{font-size:5px;letter-spacing:.7px}.arena-player-dock .button{font-size:9px;padding:10px;max-width:125px}.arena-player-dock>div{gap:9px}.arena-player-dock .avatar{--avatar:30px!important}.arena-open{grid-template-columns:1fr;gap:22px;padding:22px 4px 12px;text-align:center}.arena-open .arena-eyebrow{justify-content:center}.arena-open h2{font-size:25px;max-width:none}.arena-open p{font-size:11px}.arena-empty-places{height:135px}.arena-empty-places>span{height:105px;width:75px}.arena-empty-places>span:nth-child(2){height:135px}.arena-empty-places>span:nth-child(3){height:87px}.arena-unlisted{padding:22px 15px;font-size:11px}.arena-footnote{font-size:8px}
}