:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#040a12;color:#eff5ff}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 12% 0,#173d74,transparent 31rem),#040a12}button{font:inherit}.app-shell{width:min(100%,112rem);margin:auto;padding:clamp(.65rem,2.5vw,2rem)}.welcome{position:relative;isolation:isolate;min-height:calc(100vh - 4rem);overflow:hidden;border:1px solid #28476f;border-radius:1.5rem;background:#071222;box-shadow:0 2rem 6rem #0008}.welcome:before{position:absolute;z-index:-2;inset:0;background:url("assets/arena-rift-key-art-v1.png") center/cover no-repeat;content:""}.welcome:after{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0208142b 0%,#03091422 37%,#030813c4 59%,#030813f5 100%);content:""}.welcome-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;color:#a7bbdc;font-size:.65rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.brand{color:#fff;font-size:1.25rem;font-weight:950;letter-spacing:-.08em;text-decoration:none}.brand span{color:#8eb9ff}.welcome-copy{width:min(100% - 3rem,40rem);margin:clamp(3rem,13vh,10rem) clamp(1.5rem,8vw,8rem) 4rem auto}.eyebrow{margin:0 0 1rem;color:#9bc5ff;font-size:.74rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}h1{margin:.1rem 0 1.75rem;font-size:clamp(4rem,9vw,8.6rem);letter-spacing:-.09em;line-height:.77}h1 span{color:#91b6ff}.intro{max-width:37rem;color:#d4e0f6;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.75}.hero-spec{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:2rem 0}.portrait,.mini-portrait{display:block;width:3.2rem;height:3.2rem;border:1px solid #75a9ff88;border-radius:50%;background:url("assets/arena-rift-key-art-v1.png") 26% 51%/570% auto no-repeat,#102442;box-shadow:0 0 1.5rem #2e74e877}.hero-spec strong,.hero-spec small{display:block}.hero-spec strong{font-size:.91rem}.hero-spec small{margin-top:.2rem;color:#9bb0d2;font-size:.71rem}.spec-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-left:auto}.spec-tags span{padding:.35rem .5rem;border:1px solid #809ecc44;border-radius:.45rem;color:#c6d7f6;background:#08172bb3;font-size:.65rem;font-weight:750}.primary-button,.back-button,.abilities button,.dpad button{border:0;cursor:pointer;touch-action:manipulation}.primary-button{padding:1rem 1.2rem;border-radius:.75rem;color:#fff;background:linear-gradient(135deg,#286ff4,#7650e5);box-shadow:0 .8rem 2rem #2764c955;font-weight:900}.primary-button span{margin-left:.5rem;font-size:1.2em}.fine{color:#98acd0;font-size:.74rem}.match{max-width:105rem;margin:auto}.hud-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;min-height:4.5rem}.back-button{justify-self:start;padding:.55rem .75rem;border:1px solid #7592be66;border-radius:.6rem;color:#cad9f3;background:#071426;font-size:.78rem;font-weight:800}.objective{text-align:center}.objective b,.objective span{display:block}.objective b{font-size:1.05rem}.objective span{color:#a5b9dc;font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.timer{justify-self:end;padding:.42rem .6rem;border:1px solid #7096cd55;border-radius:.55rem;background:#071426;color:#d9e7ff;font-size:.78rem;font-weight:850}.battlefield{position:relative;overflow:hidden;border:1px solid #587cac77;border-radius:1rem;background:#06101e;box-shadow:0 1.2rem 4rem #0009}#arena{display:block;width:100%;height:min(62vw,51rem);min-height:27rem;cursor:crosshair;touch-action:none}.map-label{position:absolute;bottom:1rem;right:1rem;color:#d9e8ff88;font-size:.62rem;font-weight:900;letter-spacing:.14em}.map-label span{color:#87b3fcaa}.toast{position:absolute;top:4rem;left:50%;padding:.55rem .8rem;border:1px solid #a5c5ff55;border-radius:.55rem;background:#061327dd;color:#e8f2ff;font-size:.78rem;font-weight:850;opacity:0;transform:translateX(-50%);transition:opacity .2s}.toast.show{opacity:1}.hud-bottom{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:.8rem;padding:.65rem .8rem;border:1px solid #45658f55;border-radius:.9rem;background:#071426cc}.hero-hud{display:flex;align-items:center;gap:.6rem;min-width:12rem}.mini-portrait{width:2.5rem;height:2.5rem}.hero-hud b,.hero-hud span{display:block}.hero-hud b{font-size:.83rem}.hero-hud span,.hero-hud small{color:#99add0;font-size:.65rem}.bar{width:9rem;height:.38rem;margin:.33rem 0;border-radius:1rem;background:#211822;overflow:hidden}.bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2de48b,#a2ffbd);transition:width .15s}.abilities{display:flex;gap:.45rem}.abilities button{min-width:6.5rem;padding:.48rem .55rem;border:1px solid #547bb755;border-radius:.65rem;color:#eaf2ff;background:linear-gradient(145deg,#132d55,#0a1931)}.abilities button b,.abilities button span,.abilities button small{display:block}.abilities button b{color:#87b6ff;font-size:.8rem}.abilities button span{margin:.13rem 0;color:#e7f0ff;font-size:.69rem;font-weight:850}.abilities button small{color:#9db5dc;font-size:.59rem}.abilities .attack{border-color:#b8596766;background:linear-gradient(145deg,#57223a,#251225)}.mobile-controls{display:none}.desktop-help{margin:.75rem;color:#91a8ce;text-align:center;font-size:.73rem}@media(max-width:760px){.welcome{min-height:44rem}.welcome:before{background-position:37% center;opacity:.78}.welcome:after{background:linear-gradient(180deg,#02081420,#030813d9 60%,#030813fa)}.welcome-copy{width:auto;margin:15rem 1.35rem 2rem}.welcome-header{padding:1rem 1.25rem}.spec-tags{width:100%;margin-left:0}.hud-top{grid-template-columns:1fr auto}.objective{grid-row:1;grid-column:1/3;order:-1;padding-top:.55rem}.timer{grid-column:2}.battlefield{border-radius:.8rem}#arena{height:70vw;min-height:24rem}.hud-bottom{align-items:flex-start;flex-direction:column}.abilities{width:100%}.abilities button{flex:1;min-width:0}.mobile-controls{display:flex;align-items:center;gap:1rem;margin-top:.75rem}.mobile-controls p{margin:0;color:#99afd1;font-size:.73rem;line-height:1.5}.dpad{display:grid;grid-template-columns:repeat(3,2.8rem);grid-template-rows:repeat(2,2.6rem);gap:.22rem}.dpad button{border-radius:.45rem;color:#dceaff;background:#143867;font-weight:900}.dpad button[data-move=up]{grid-column:2}.dpad button[data-move=left]{grid-column:1;grid-row:2}.dpad button[data-move=down]{grid-column:2;grid-row:2}.dpad button[data-move=right]{grid-column:3;grid-row:2}.desktop-help{display:none}}@media(max-width:410px){.abilities{gap:.25rem}.abilities button{padding:.42rem .24rem}.hero-hud{min-width:0}.bar{width:8rem}}