@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0a151c;--panel:#0c1921;--gold:#ddbc7d;--gold-dark:#8b7148;--text:#eee9dc;--muted:#91a3a8;--line:#b49c6b30;--serif:'Cinzel',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #f6db9e;outline-offset:5px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}#arena{display:block;width:100vw;height:100dvh;touch-action:none;position:fixed;inset:0}.lobby{position:fixed;inset:0;overflow:auto}.lobby-shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#08151bf7 0%,#08151bf0 27%,#08151bbd 46%,#07182025 78%),linear-gradient(0deg,#07131c 0%,transparent 22%,#07141b55 87%,#08141bdd 100%)}.site-header{position:relative;height:104px;margin:0 4.5%;display:flex;align-items:center;border-bottom:1px solid #aec5b519;gap:6%}.brand{display:flex;align-items:center;gap:13px;font-family:var(--serif);letter-spacing:1.4px;font-size:15px;font-weight:600;white-space:nowrap}.brand svg{width:36px;height:42px;color:var(--gold);stroke-width:1.2}.brand small{font-size:10px;font-weight:400;margin:0 2px}.site-header nav{display:flex;align-items:stretch;height:100%;gap:32px;font-size:10px;letter-spacing:2px}.nav-active{display:grid;place-items:center;position:relative;color:var(--gold)}.nav-active:after{content:'';position:absolute;bottom:-1px;width:100%;height:2px;background:var(--gold);box-shadow:0 -3px 17px #d8b66a66}.text-button{padding:0;background:none;font-size:10px;letter-spacing:1.7px;color:#b4c0bf;transition:color .2s}.text-button:hover{color:var(--gold)}.alpha-badge{margin-left:auto;font-size:9px;letter-spacing:1.7px;display:flex;align-items:center;gap:9px;color:#a7bab5;border:1px solid #9da77733;padding:9px 12px;background:#10292144}.alpha-badge i,.live-dot{height:5px;width:5px;display:inline-block;background:#91bca6;border-radius:100%;box-shadow:0 0 9px #75c9a233}.lobby-content{position:relative;margin:clamp(28px,6.5vh,75px) 0 60px 8%;width:490px}.eyebrow{font-size:9px;letter-spacing:2.8px;color:var(--gold);font-weight:500;display:flex;align-items:center;gap:12px}.eyebrow>span{width:24px;height:1px;background:var(--gold-dark)}h1{font-family:var(--serif);font-size:clamp(43px,4.3vw,67px);font-weight:400;line-height:1.19;letter-spacing:-1.2px;margin:20px 0 18px}h1 em{font-style:normal;color:var(--gold)}.intro{color:#a5b5b8;line-height:1.85;font-size:14px;margin-bottom:30px}.champion-heading{display:flex;align-items:center;justify-content:space-between;width:396px;font-size:8px;letter-spacing:1.2px;color:#71898e;margin-bottom:12px}.champion-heading b{font-size:9px;letter-spacing:1.8px;font-weight:500;margin-left:9px;color:#c9d0c7}.champion-list{display:flex;gap:12px}.champion-card{position:relative;width:124px;height:139px;padding:0;border:1px solid #63716a4d;background:#10232c;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;text-align:left}.champion-card:hover{border-color:#c8ae77;transform:translateY(-3px)}.champion-card.selected{border-color:var(--gold);box-shadow:0 0 22px #dbb76b0d}.champion-card.selected:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold)}.champion-card canvas{width:100%;height:100%;object-fit:cover;opacity:.67;transition:opacity .2s;position:absolute;inset:0}.champion-card:hover canvas,.champion-card.selected canvas{opacity:1}.champion-label{position:absolute;bottom:13px;left:13px;z-index:1}.champion-label strong{display:block;font-family:var(--serif);font-size:13px;letter-spacing:1.6px;margin-bottom:4px}.champion-label small{font-size:7px;color:#a3b0b6;letter-spacing:1.5px}.champion-check{display:none;position:absolute;z-index:1;right:7px;top:7px;width:16px;height:16px;background:var(--gold);color:#15232a;border-radius:100%;font-size:11px;text-align:center;line-height:16px}.selected .champion-check{display:block}.champion-detail{display:flex;gap:12px;align-items:center;width:396px;margin:17px 0 24px;min-height:40px}.champion-detail strong{color:#cfc7b3;font-size:11px;font-weight:500}.champion-detail p{font-size:10px;color:#7e9499;margin:5px 0 0;line-height:1.5;max-width:295px;min-height:30px}.difficulty{margin-left:auto;text-align:right;align-self:flex-start;white-space:nowrap}.difficulty>span{font-size:6px;color:#6f868c;letter-spacing:1.2px}.difficulty>div{display:flex;gap:3px;margin-top:8px;justify-content:flex-end}.difficulty i{width:14px;height:3px;display:inline-block;background:#43554d}.difficulty i.on{background:var(--gold)}.play-row{display:flex;gap:12px}.button-gold{height:53px;min-width:300px;display:flex;justify-content:center;align-items:center;gap:32px;background:linear-gradient(115deg,#dbc18a,#ba9558);color:#172127;font-size:10px;font-weight:700;letter-spacing:2px;border:1px solid #e5cc96;box-shadow:inset 0 0 0 3px #5e4a2d18,0 8px 36px #0002;transition:filter .2s,transform .2s}.button-gold svg{width:21px;height:21px;stroke-width:1.3}.button-gold:hover{filter:brightness(1.12);transform:translateY(-1px)}.help-circle{width:53px;height:53px;border:1px solid #b6b58a40;background:#10232a66;color:#a8b5ae;display:grid;place-items:center}.help-circle:hover{border-color:var(--gold);color:var(--gold)}.play-note{font-size:7px;letter-spacing:1.05px;color:#779094;display:flex;align-items:center;gap:9px;margin-top:14px}.play-note>span:not(.live-dot){color:#4a676d}.map-caption{position:absolute;left:64%;top:62%;width:330px;transform:translateX(-15%);text-align:center;pointer-events:none;text-shadow:0 2px 18px #07121b}.map-caption-icon{width:55px;height:55px;display:grid;place-items:center;border:1px solid #dab97950;transform:rotate(45deg);margin:0 auto 27px;background:#0a1d2380;box-shadow:0 0 45px #d6b5730d}.map-caption-icon svg{width:40px;height:40px;color:#e2c17c;transform:rotate(-45deg)}.map-caption .eyebrow{justify-content:center;font-size:7px;letter-spacing:3px}.map-caption h2{font:400 28px var(--serif);margin:14px 0 10px;color:#eee4cd;letter-spacing:1px}.map-caption p{font-size:10px;letter-spacing:.25px;color:#b0bfbb}.map-features{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:23px;font-size:6px;letter-spacing:1.2px;color:#a3b6aa}.map-features i{width:3px;height:3px;background:var(--gold);transform:rotate(45deg)}.lobby-footer{position:relative;margin:0 4.5%;padding:22px 0;border-top:1px solid #aec5b519;display:flex;justify-content:space-between;color:#617d83;font-size:7px;letter-spacing:1.5px}.lobby-footer i{font-style:normal;color:#a58d5b;margin:0 11px}
.hud{position:fixed;inset:0;pointer-events:none}.hud button,.minimap-wrap,.joystick{pointer-events:auto}.match-top{position:absolute;top:0;left:0;right:0;padding:14px 23px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#08151ddd,transparent)}.match-brand{display:flex;align-items:center;gap:10px;font:10px var(--serif);letter-spacing:1.4px;color:#e1c486}.match-brand svg{width:28px;height:33px}.match-brand small{display:block;margin-top:4px;color:#a7b6b6;font:7px var(--sans);letter-spacing:2px}.scoreboard{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:20px;padding:10px 24px;background:#08151de8;border:1px solid #80938350;box-shadow:0 6px 24px #001a;min-width:240px}.scoreboard>span:not(.score-divider){font:21px var(--serif);min-width:17px;text-align:center}.team-blue{color:#7ed1df}.team-red{color:#ee91a1}.scoreboard svg{width:15px;color:#aeb8b0}.score-divider{width:1px;height:18px;background:#aaa88b30}.scoreboard time{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#dedbc8}.match-actions{display:flex;gap:5px}.icon-button{display:grid;place-items:center;width:34px;height:34px;background:#0a1b21b0;border:1px solid #a5ac8d30;color:#bfcabf}.icon-button svg{width:17px;height:17px}.icon-button:hover{color:var(--gold);border-color:var(--gold-dark)}.objective{position:absolute;top:90px;left:24px;display:flex;gap:10px;align-items:center;background:#0c1b22b8;padding:11px 15px;border-left:2px solid #d2b37288}.objective svg{color:var(--gold);width:24px;height:24px}.objective span{font-size:8px;letter-spacing:1.3px;color:#ddd2b8}.objective small{display:block;font-size:10px;letter-spacing:0;color:#9bacac;margin-top:5px}.toast{position:absolute;top:100px;left:50%;transform:translate(-50%,-6px);max-width:480px;padding:13px 24px;text-align:center;font-size:12px;color:#e9d9b6;background:linear-gradient(90deg,#0b1b2200,#0b1b22f5 15%,#0b1b22f5 85%,#0b1b2200);opacity:0;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.match-stats{position:absolute;bottom:153px;left:24px;display:flex;gap:21px;color:#d1d5c5;font-size:10px;background:#081820b0;padding:8px 12px;border:1px solid #adbb9430}.match-stats>span{display:flex;align-items:center;gap:7px}.match-stats svg{width:13px;height:13px;color:#cbbd91}.match-stats b{font-weight:500}.match-stats>span:last-child{font-size:8px;letter-spacing:1px;color:#9baead}.bottom-hud{position:absolute;bottom:28px;left:24px;display:flex;align-items:center;gap:16px;padding:12px 16px 12px 10px;background:linear-gradient(135deg,#0a1921f5,#0b1b21f5);border:1px solid #a6ae7f55;box-shadow:0 10px 45px #0008;max-width:calc(100vw - 300px)}.champion-status{display:flex;align-items:center;gap:12px;width:250px}.hud-portrait{width:70px;height:74px;position:relative;border:1px solid var(--gold-dark)}.hud-portrait canvas{width:100%;height:100%;object-fit:cover}.hud-portrait>span{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#172830;border:1px solid #c2a362;min-width:23px;height:22px;text-align:center;font-size:12px;line-height:20px;color:#f1d58d;font-weight:600}.status-details{flex:1}.status-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.status-name strong{font:10px var(--serif);letter-spacing:1px;color:#dfc38c}.status-name>span{font-size:7px;color:#a6b8b3}.resource-bar{height:16px;background:#031319;position:relative;margin-bottom:4px;border:1px solid #b4bda21a}.resource-bar i{position:absolute;inset:0;right:auto;transition:width .12s}.health i{background:linear-gradient(90deg,#45765b,#8bb279)}.mana i{background:linear-gradient(90deg,#234f76,#549cba)}.resource-bar span{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:#f2f4e2;text-shadow:0 1px 3px #031315;font-variant-numeric:tabular-nums}.xp-bar{height:3px;background:#031319;margin-top:8px}.xp-bar i{display:block;height:100%;background:#d5b675;transition:width .2s}.ability-group{display:flex;align-items:center;gap:7px;border-left:1px solid #96a18130;padding-left:16px}.ability{position:relative;display:grid;place-items:center;width:49px;height:52px;border:1px solid #b59b5b88;background:radial-gradient(ellipse at 50% 30%,#ad854048,#18262e 85%);color:#e7c783;transition:border-color .15s,filter .15s;padding:0;overflow:visible}.ability:hover:not(:disabled){border-color:#f6d794;filter:brightness(1.3)}.ability svg{width:29px;height:29px;stroke-width:1.3;pointer-events:none}.ability kbd{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font:9px var(--sans);background:#14222b;color:#eee2c5;padding:1px 5px;border:1px solid #8f896352;z-index:2}.cooldown{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:#f6eddb;z-index:1;background:#06121bca}.cooldown:empty{display:none}.ability.locked{color:#758183;border-color:#60737566;background:#16252b}.ability.no-mana{filter:grayscale(.8)}.ability.ultimate{border-color:#dbc078;background:radial-gradient(ellipse,#baa26544,#16242b)}.summoner-group{display:flex;gap:6px}.ability.summoner{width:34px;height:39px;color:#e4cf88;border-color:#ac985e77;background:#70632f33}.ability.summoner svg{width:22px;height:22px}.ability.heal-spell{color:#a6deaa;background:#42734f33;border-color:#85ae7d77}.summoner .cooldown{font-size:14px}.inventory-section{padding-left:12px;border-left:1px solid #9da88030;min-width:120px}.inventory{display:flex;gap:3px;margin-bottom:8px}.inventory>span{display:grid;place-items:center;width:19px;height:22px;background:#07151b;border:1px solid #7a8c7040}.inventory svg{width:14px;height:14px;color:#d4bc83}.gold-button{width:100%;padding:2px 0;background:none;display:flex;align-items:center;gap:6px;color:#e6c681;font-size:11px}.gold-button svg{width:14px;height:14px}.gold-button>span{margin-left:auto;font-size:7px;color:#98aca9;letter-spacing:1px}.gold-button kbd{font-size:7px;padding:2px 4px;border:1px solid #7e947244;color:#c5cbb4}.minimap-wrap{position:absolute;bottom:28px;right:22px;width:228px;border:1px solid #a4ab7d66;background:#0b1b22ed;box-shadow:0 10px 45px #0008}.minimap-title{height:23px;display:flex;align-items:center;justify-content:space-between;font:7px var(--serif);letter-spacing:1.8px;padding:0 10px;color:#ccbb92}.minimap-title span{font:12px var(--sans);color:#879b8e}#minimap{display:block;width:100%;height:auto;cursor:crosshair}#recall-button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:7px;letter-spacing:1.5px;height:28px;background:#0e2429;width:100%;color:#a8bfba;border-top:1px solid #8d9d7230}#recall-button svg{height:12px;width:12px}#recall-button kbd{font-size:7px;padding:2px 3px;border:1px solid #7e947244}.control-hint{position:absolute;bottom:8px;left:30px;color:#c2d2ba99;font-size:6px;letter-spacing:1.1px}.control-hint span{margin:0 9px;color:#d0b579}.respawn{position:absolute;top:32%;left:50%;transform:translateX(-50%);text-align:center;background:#09151cdd;padding:30px 55px;border:1px solid #b2b09250}.respawn>span{font-size:8px;letter-spacing:3px;color:#bba77b}.respawn strong{display:block;font:64px var(--serif);margin:12px 0;color:#e1c897}.respawn p{font-size:11px;color:#a7b5b4}.recall{position:absolute;bottom:185px;left:50%;transform:translateX(-50%);width:260px;text-align:center}.recall>span{font-size:8px;letter-spacing:1.7px;color:#d4f1e9}.recall b{font-weight:500;margin-left:14px}.recall>div{height:5px;background:#0b1e26;border:1px solid #84b6b7;margin:8px 0}.recall i{display:block;height:100%;background:#99cbd3}.recall small{font-size:8px;color:#b2d0cd}.joystick,.touch-attack{display:none}
.modal{background:linear-gradient(135deg,#10242b,#0a151e);color:var(--text);border:1px solid #baa47670;max-width:700px;width:calc(100% - 36px);padding:43px 43px 36px;box-shadow:0 30px 120px #0009;max-height:calc(100dvh - 40px);overflow:auto}.modal::backdrop{background:#030d15bd;backdrop-filter:blur(7px)}.modal h2{font:400 31px/1.35 var(--serif);color:#e0c58d;margin:18px 0}.modal p{color:#a2b5b7;font-size:12px;line-height:1.8}.modal .close-dialog{position:absolute;top:15px;right:15px}.modal-intro{max-width:490px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px 35px;margin:30px 0}.help-grid>div>svg{color:var(--gold);width:23px;height:23px}.help-grid h3{font:500 12px var(--serif);letter-spacing:.3px;color:#dedaca;margin:10px 0}.help-grid p{font-size:11px;line-height:1.85;margin:0}.help-grid kbd{font:9px var(--sans);border:1px solid #8b9a8255;padding:1px 4px;color:#dbc993}.modal .mobile-help{font-size:10px;padding:12px 15px;border-left:2px solid #a9b08844;background:#9bbb8810}.modal .button-gold{margin-top:25px;width:100%;min-width:0}.compact{max-width:430px;text-align:center;padding:40px}.compact .eyebrow{justify-content:center;font-size:8px;letter-spacing:2px}.compact .button-gold{font-size:9px;letter-spacing:1.6px;gap:20px}.button-secondary{display:block;width:100%;padding:16px;background:none;font-size:9px;letter-spacing:1.6px;color:#a6b6b4}.button-secondary:hover{color:var(--gold)}.shop-heading{display:flex;align-items:center;justify-content:space-between}.shop-heading>span{display:flex;align-items:center;gap:9px;color:var(--gold)}.shop-heading svg{width:20px}.shop-items{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:23px}.shop-item{background:#11272b;border:1px solid #92a58044;padding:18px;text-align:left;display:grid;grid-template-columns:40px 1fr;gap:10px}.shop-item:hover:not(:disabled){border-color:var(--gold-dark);background:#1d3433}.shop-item:disabled{opacity:.48}.shop-item>svg{width:34px;height:34px;color:#d9bf86;grid-row:span 2;margin-top:3px}.shop-item strong{font-size:10px;font-weight:500;color:#e1ddc9}.shop-item small{font-size:9px;color:#8ea8a7;display:block;margin-top:5px}.shop-price{grid-column:2;font-size:11px;color:var(--gold);margin-top:5px}.shop-price b{font-weight:500}.shop-feedback{min-height:20px!important;margin-bottom:0}.shop-tip{font-size:9px!important;color:#607d83!important}.result-mark svg{width:64px;height:64px;color:var(--gold);margin-bottom:22px}.result-modal h2{font-size:45px;letter-spacing:3px;margin-bottom:12px}.result-stats{display:flex;justify-content:space-around;margin:27px 0;border-top:1px solid #9ca37c33;border-bottom:1px solid #9ca37c33;padding:20px 0;gap:12px}.result-stats strong{display:block;font-size:17px;color:#ded1ac;font-weight:400}.result-stats small{display:block;font-size:7px;letter-spacing:1px;color:#8aa5a6;margin-top:8px}noscript{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:999}
@media(min-width:1600px){.lobby-content{width:570px;margin-top:8vh}.champion-card{width:143px;height:158px}.champion-heading,.champion-detail{width:453px}.intro{font-size:15px}.champion-detail p{font-size:11px}.map-caption{top:63%}}
@media(max-height:800px) and (min-width:801px){.site-header{height:82px}.lobby-content{margin-top:30px;margin-bottom:28px}h1{font-size:48px;margin:15px 0}.intro{font-size:12px;margin-bottom:22px}.champion-card{width:112px;height:118px}.champion-heading,.champion-detail{width:360px}.champion-detail{margin:12px 0 18px}.champion-label{bottom:10px}.map-caption{top:60%}.lobby-footer{padding:16px 0}.button-gold{height:47px}.help-circle{width:47px;height:47px}}
@media(max-width:1180px){.bottom-hud{gap:10px;padding-right:10px}.champion-status{width:208px;gap:8px}.hud-portrait{width:57px;height:66px}.ability-group{padding-left:10px;gap:5px}.ability{width:41px;height:47px}.inventory-section{min-width:98px;padding-left:9px}.inventory>span{width:15px;height:19px}.inventory svg{width:12px}.minimap-wrap{width:190px;right:15px}.bottom-hud{max-width:calc(100vw - 230px);left:15px}.ability.summoner{width:30px}.match-stats{left:15px;bottom:143px}.map-caption{left:67%;width:290px}.lobby-content{margin-left:6%}}
@media(max-width:1000px){.inventory-section{display:none}.bottom-hud{max-width:calc(100vw - 220px)}.map-caption{left:71%;width:250px}.map-caption h2{font-size:23px}.map-caption p{font-size:9px}.map-features{gap:6px;font-size:5px}.site-header{gap:5%}.site-header nav{gap:22px}.brand{font-size:12px}.alpha-badge{font-size:7px}.lobby-content{width:440px}h1{font-size:48px}}
@media(max-width:800px){.lobby-shade{background:linear-gradient(90deg,#08151be8,#08151ba1),linear-gradient(0deg,#07131cf5 0%,#08151b70 50%,#08151bde 100%)}.site-header{height:78px;margin:0 6%;gap:0}.brand{font-size:12px;letter-spacing:.6px;gap:9px}.brand svg{width:28px}.brand small{font-size:8px}.site-header nav{margin-left:auto;gap:0}.nav-active{display:none}.text-button{font-size:8px;letter-spacing:1px}.alpha-badge{display:none}.lobby-content{width:min(430px,88%);margin:35px auto 30px}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:clamp(42px,8vw,58px);margin:18px 0}.intro{font-size:13px;margin-bottom:28px}.champion-heading,.champion-detail{width:100%}.champion-list{gap:10px}.champion-card{width:calc((100% - 20px)/3);height:140px}.champion-detail{margin:16px 0 21px}.champion-detail p{font-size:10px;max-width:290px}.play-row{width:100%}.play-row .button-gold{flex:1;min-width:0;font-size:9px;letter-spacing:1.7px;gap:18px}.play-note{font-size:6px;letter-spacing:.75px;justify-content:center;gap:8px}.map-caption{display:none}.lobby-footer{margin:0 6%;font-size:6px;letter-spacing:1px;justify-content:center;padding:20px 0}.lobby-footer>span:last-child{display:none}.match-brand>span{display:none}.match-top{padding:12px}.match-actions{gap:3px}.scoreboard{min-width:175px;gap:12px;padding:9px 12px}.scoreboard>span:not(.score-divider){font-size:17px}.scoreboard svg{width:12px}.scoreboard time{font-size:10px}.match-brand svg{width:25px}.match-actions .icon-button{width:28px;height:28px}.match-actions [data-help]{display:none}.objective{top:68px;left:12px;padding:8px 10px}.objective span{font-size:6px;letter-spacing:1px}.objective small{font-size:8px}.objective svg{width:19px}.toast{top:138px;width:90%;font-size:10px;padding:10px 14px}.bottom-hud{bottom:20px;left:12px;right:12px;max-width:none;gap:12px;justify-content:center;padding:10px}.champion-status{width:185px}.hud-portrait{width:47px;height:57px}.status-name strong{font-size:8px}.resource-bar{height:13px}.status-name{margin-bottom:5px}.resource-bar span{font-size:7px}.ability{width:38px;height:43px}.ability svg{width:24px;height:24px}.ability.summoner{width:27px;height:33px}.ability.summoner svg{width:18px}.minimap-wrap{bottom:120px;right:12px;width:145px}.minimap-title{font-size:5px;letter-spacing:1px;height:20px}#recall-button{height:23px;font-size:6px;letter-spacing:.9px}.match-stats{bottom:120px;left:12px;gap:12px;padding:8px;font-size:8px}.match-stats>span:last-child{display:none}.control-hint{display:none}.recall{bottom:280px}.modal{padding:35px 25px 25px}.modal h2{font-size:27px}.help-grid{gap:20px}.help-grid p{font-size:10px}.help-grid h3{font-size:10px}.shop-item{grid-template-columns:29px 1fr;padding:13px;gap:7px}.shop-item>svg{width:26px;height:26px}.shop-item strong{font-size:9px}.shop-heading>span{font-size:12px}.shop-heading h2{font-size:23px}}
@media(max-width:520px){.champion-card{height:130px}.champion-label{left:10px;bottom:10px}.champion-label strong{font-size:12px}.champion-label small{font-size:6px}.champion-detail p{max-width:245px}.difficulty{margin-top:1px}.difficulty>span{font-size:5px}.difficulty i{width:10px}.champion-heading{font-size:6px}.champion-heading b{font-size:7px;letter-spacing:1.3px}.bottom-hud{gap:8px;padding:9px 7px;flex-wrap:wrap;bottom:12px;justify-content:space-between;align-items:flex-end}.champion-status{width:100%;gap:10px;border-bottom:1px solid #8b9b7833;padding-bottom:9px}.hud-portrait{width:36px;height:38px}.hud-portrait>span{font-size:9px;height:17px;line-height:15px;min-width:18px;bottom:-5px}.status-details{display:grid;grid-template-columns:1fr 1fr;column-gap:7px}.status-name{grid-column:span 2;margin-bottom:5px}.status-name>span{font-size:6px}.resource-bar{height:11px;margin-bottom:2px}.resource-bar span{font-size:6px}.xp-bar{grid-column:span 2;margin-top:3px;height:2px}.ability-group{border:0;padding:0;gap:8px}.ability{width:43px;height:43px}.summoner-group{gap:7px;margin-bottom:3px}.ability.summoner{width:30px}.minimap-wrap{bottom:154px;width:115px;right:12px}.match-stats{bottom:auto;top:125px;left:12px}.objective{top:64px}.toast{top:164px}.recall{bottom:330px;width:220px}.help-grid{grid-template-columns:1fr}.shop-items{grid-template-columns:1fr}.compact{padding:35px 24px}.result-stats{gap:9px}.result-stats strong{font-size:15px}.result-stats small{font-size:6px}}
@media(pointer:coarse){.joystick{display:block;position:absolute;left:28px;bottom:205px;width:96px;height:96px;border-radius:100%;border:1px solid #a1bcaa55;background:#11252c70;touch-action:none;pointer-events:auto}.joystick>div{position:absolute;left:26px;top:26px;width:42px;height:42px;border:1px solid #d8cfaa99;border-radius:100%;background:#6b8c7f55;box-shadow:0 0 20px #06131b55;pointer-events:none}.touch-attack{display:grid;place-items:center;position:absolute;right:148px;bottom:190px;width:56px;height:56px;border:1px solid #dcc588aa;border-radius:100%;background:#1c3039bd;color:var(--gold)}.touch-attack svg{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.champion-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}.champion-card{width:auto;height:132px}.champion-label{left:8px;bottom:12px}.champion-label strong{font-size:10px;letter-spacing:.6px}.champion-label small{font-size:6px;letter-spacing:.8px}.champion-card canvas{object-fit:cover}.champion-heading,.champion-detail{width:100%}.champion-detail{margin-bottom:14px;min-height:52px}.champion-detail p{max-width:370px}.skill-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 24px;max-width:440px}.skill-preview>span{display:grid;grid-template-columns:28px 1fr;gap:5px;align-items:center;position:relative}.skill-preview img{width:28px;height:28px;border:1px solid #c7aa6c66;grid-row:span 2}.skill-preview kbd{font:8px var(--sans);color:#dfc78e}.skill-preview small{font-size:8px;color:#8fa6a9;line-height:1.3;align-self:start}.ability>img{width:100%;height:100%;object-fit:cover;pointer-events:none}.inventory img{display:block;width:100%;height:100%;object-fit:cover}.shop-item>img{width:38px;height:38px;grid-row:span 2;border:1px solid #d4b77a66;object-fit:cover}.ability.locked>img{filter:grayscale(.8);opacity:.45}.button-gold:disabled{filter:saturate(.3);opacity:.6;cursor:wait}
@media(min-width:1600px){.champion-card{height:145px}}
@media(max-height:800px) and (min-width:801px){.champion-card{height:108px}.champion-list,.champion-heading,.champion-detail{max-width:440px}.lobby-content{margin-top:23px}h1{font-size:44px}.skill-preview{margin-bottom:20px}.intro{margin-bottom:18px}.champion-label strong{font-size:9px}.lobby-footer{padding:12px 0}}
@media(max-width:800px){.champion-card{height:119px}.champion-label strong{font-size:8px;letter-spacing:.3px}.champion-label small{font-size:5px;letter-spacing:.3px}.champion-label{left:5px}.skill-preview{gap:8px}.skill-preview small{font-size:7px}.champion-detail p{max-width:310px}.shop-item>img{width:29px;height:29px}}
@media(max-width:520px){.champion-card{height:100px}.champion-card canvas{width:calc(100% + 20px);max-width:none;left:-10px}.champion-label strong{font-size:7px}.champion-label small{font-size:4px}.champion-check{right:4px;top:4px;width:12px;height:12px;font-size:9px;line-height:12px}.champion-list{gap:5px}.champion-detail p{max-width:245px}.skill-preview{grid-template-columns:1fr 1fr;gap:10px}.skill-preview>span{grid-template-columns:28px 12px 1fr;gap:6px}.skill-preview img{grid-row:1}.skill-preview small{font-size:8px;align-self:center}.skill-preview{margin-bottom:20px}.lobby-footer{font-size:5px;letter-spacing:.6px}}
.site-header{gap:4%}.site-header nav{gap:22px}.profile-wallet,.collection-wallet{display:flex;gap:20px;align-items:center}.profile-wallet{margin-left:auto;background:#0d2029b0;border:1px solid var(--line);padding:10px 16px;white-space:nowrap}.profile-wallet:hover{border-color:var(--gold-dark)}.essence{color:#86d4dc}.crystals{color:#d2a6ef}.profile-wallet b,.collection-wallet b{font-size:13px;font-weight:500;margin-left:3px;font-variant-numeric:tabular-nums}.profile-wallet small,.collection-wallet small{display:block;font-size:6px;letter-spacing:1.4px;margin-top:4px;color:#96afb4}.profile-note{font-size:9px;color:#7e989d;margin-top:12px}.champion-locked canvas{filter:grayscale(.7);opacity:.45}.champion-locked .champion-check{display:block;background:#263b45;color:#c3b798;border:1px solid #7d7960}.champion-locked.selected canvas{opacity:.7}.equipped-look{display:flex;align-items:center;gap:11px;width:365px;max-width:100%;text-align:left;background:linear-gradient(90deg,#bb93600f,#10232a55);border:1px solid #baa47638;padding:11px 13px;margin:0 0 17px;color:var(--gold)}.equipped-look:hover{border-color:var(--gold-dark)}.equipped-look>svg{width:20px;height:20px}.equipped-look>span{font-size:7px;letter-spacing:1.4px;color:#8aa2a8}.equipped-look b{display:block;font-size:11px;letter-spacing:.2px;color:#e2d6bb;margin-top:3px;font-weight:500}.equipped-look>small{font-size:7px;letter-spacing:1.1px;margin-left:auto}.button-gold:disabled{cursor:default}
.collection-modal{width:min(1160px,calc(100% - 36px));max-width:1160px;padding:30px 35px 20px;background:radial-gradient(ellipse at 10% 40%,#17323a88,transparent 55%),#0b1820}.collection-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-right:40px}.collection-header h2{font-size:32px;margin:10px 0 4px}.collection-header p{margin:0;font-size:10px;letter-spacing:.4px}.collection-wallet{gap:28px;border-left:1px solid var(--line);padding-left:30px}.collection-wallet b{font-size:21px}.collection-wallet small{font-size:7px}.collection-tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);margin:23px 0}.collection-tabs>button{padding:12px 0;background:none;font-size:10px;letter-spacing:1.8px;border-bottom:2px solid transparent;color:#839fa6}.collection-tabs>button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.collection-heroes{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0 0 20px}.collection-heroes button{background:#10232b;padding:9px 12px;border:1px solid #78919429;font-size:11px}.collection-heroes button[aria-pressed=true]{border-color:var(--gold-dark);color:var(--gold);background:#bc985912}.collection-heroes small{display:block;font-size:6px;letter-spacing:1.2px;color:#7d989e;margin-top:5px}.collection-browser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:35px}.collection-preview{border-right:1px solid var(--line);padding-right:30px;min-width:0}.preview-art{position:relative;background:linear-gradient(#14333b15,#09151b70);border:1px solid #8aafad16;overflow:hidden}.preview-art canvas{display:block;width:100%;aspect-ratio:480/330}.preview-art>small{position:absolute;bottom:9px;left:10px;right:10px;text-align:center;letter-spacing:1.1px;font-size:6px;color:#819c9f;line-height:1.6}.preview-controls{display:flex;justify-content:center;gap:4px;margin:12px 0 19px}.preview-controls button{padding:7px 8px;background:#10242e;border:1px solid #6c8a8f30;color:#8ea9b0;font-size:7px;letter-spacing:.6px}.preview-controls button[aria-pressed=true],.preview-controls button:hover{color:var(--gold);border-color:var(--gold-dark)}.preview-controls [data-turn]{font-size:16px;padding:0 9px}.card-kicker{display:block;font-size:6px;letter-spacing:1.5px;color:var(--skin-color,var(--gold))}.preview-copy h3{font:400 29px var(--serif);margin:9px 0;color:#e4d2aa}.preview-copy>strong{font-size:10px;font-weight:500;color:#b7c3bc}.preview-copy p{font-size:10px;margin:10px 0 0;max-width:365px}.collection-selection{min-width:0;padding-top:6px}.collection-selection>.eyebrow{font-size:8px;letter-spacing:1.7px}.collection-selection>p{font-size:10px;margin:7px 0 15px}.collection-cards{display:grid;gap:10px;margin:22px 0}.skin-collection{grid-template-columns:repeat(4,minmax(0,1fr))}.champion-collection{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-card{min-width:0;position:relative;text-align:left;background:#0b1922;border:1px solid #74918c36;padding:0 10px 11px;overflow:hidden;transition:border-color .2s,transform .2s}.collection-card:hover{border-color:#c6b483;transform:translateY(-2px)}.collection-card[aria-pressed=true]{border-color:var(--gold);background:#bc985910;box-shadow:inset 0 -2px var(--gold)}.collection-card canvas{width:calc(100% + 20px);margin:0 -10px;display:block;aspect-ratio:1;object-fit:cover}.collection-card .card-kicker{font-size:5px;letter-spacing:.6px;white-space:nowrap;margin-top:5px}.collection-card strong{display:block;font:500 12px var(--serif);margin:6px 0;overflow-wrap:anywhere}.collection-card>small{font-size:7px;color:#99b3b7;display:block;min-height:16px;line-height:1.5}.collection-selection>.button-gold{width:100%;min-width:0;padding:10px 16px;letter-spacing:1.2px;font-size:9px;min-height:49px;height:auto;line-height:1.7}.collection-selection #collection-unlock-hint{font-size:10px;line-height:1.8;margin:12px 0;min-height:36px}.collection-selection .collection-feedback{color:#e5ce99;font-size:11px;min-height:20px;margin:8px 0}.collection-selection .local-economy,.local-economy{font-size:9px;color:#68868d;line-height:1.8;border-top:1px solid #6e8b8b22;padding-top:13px}.reward-explainer{padding:5px 0 20px}.reward-explainer h3{font:400 26px var(--serif);color:#e5cea2;margin:12px 0}.reward-explainer p{font-size:11px}.reward-explainer b{font-weight:500;color:#b5d2d1}.challenge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:25px}.challenge-card{background:linear-gradient(135deg,#17313c,#0a1721);padding:20px;border:1px solid #c5b47c30}.challenge-card h3{font:400 20px var(--serif);color:var(--gold)}.challenge-card p{font-size:10px}.challenge-card small{font-size:8px;color:#8aadb1;display:block;line-height:1.6}.challenge-card progress{width:100%;height:4px;appearance:none;border:0;background:#355058;margin:12px 0}.challenge-card progress::-webkit-progress-bar{background:#355058}.challenge-card progress::-webkit-progress-value{background:var(--gold)}.challenge-card progress::-moz-progress-bar{background:var(--gold)}.result-rewards{border:1px solid #a7c4ad30;background:#1b3b3430;padding:14px;margin-bottom:20px;text-align:center}.result-rewards>strong{font-size:12px;color:#89d3dd}.result-rewards strong span{display:block;color:#d1a9eb;margin-top:7px}.result-rewards small{display:block;font-size:7px;letter-spacing:1px;color:var(--gold);margin-top:10px}.result-rewards p{font-size:10px;margin:10px 0 0;color:#c4d7bc}
@media(min-width:801px) and (max-height:850px){.collection-modal{padding-top:23px}.collection-header h2{font-size:27px}.collection-tabs{margin:14px 0}.collection-cards{margin:15px 0}.preview-copy h3{font-size:23px}.collection-preview .preview-art{max-height:265px}.preview-art canvas{height:265px;object-fit:contain}.collection-modal .collection-card canvas{max-height:128px;object-fit:cover}.collection-heroes{margin-bottom:14px}.lobby-content{margin-top:25px}.lobby-content h1{font-size:43px}.intro{margin-bottom:20px}}
@media(max-width:1000px){.site-header{gap:25px}.site-header nav{gap:14px}.profile-wallet{gap:12px;padding:9px}.profile-wallet small{font-size:5px}.collection-browser{gap:22px;grid-template-columns:1fr 1.1fr}.collection-preview{padding-right:20px}.skin-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-card canvas{max-height:115px;object-fit:cover}.challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-modal{padding:25px}}
@media(max-width:800px){.site-header{height:auto;min-height:92px;flex-wrap:wrap;gap:0;padding:15px 0 12px;row-gap:15px}.site-header .brand{flex:1}.site-header nav{order:3;width:100%;height:auto;justify-content:flex-start;gap:24px;margin:0}.site-header nav .nav-active{display:none}.profile-wallet{padding:6px 9px;border:0;margin-left:auto;gap:13px}.profile-wallet b{font-size:11px}.collection-modal{max-height:calc(100dvh - 20px);width:calc(100% - 20px);padding:23px 20px}.collection-header{gap:15px;padding-right:25px;align-items:flex-start}.collection-header h2{font-size:25px}.collection-header .eyebrow{font-size:6px;letter-spacing:1.6px}.collection-header p{font-size:8px;line-height:1.6}.collection-wallet{gap:13px;padding-left:15px;flex-wrap:wrap}.collection-wallet b{font-size:15px}.collection-wallet small{font-size:5px}.collection-tabs{gap:24px;margin:15px 0}.collection-tabs>button{font-size:9px;letter-spacing:1px}.collection-browser{grid-template-columns:1fr;gap:23px}.collection-preview{padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.preview-art{grid-row:span 2}.preview-controls{margin:0;grid-column:2;grid-row:2;flex-wrap:wrap;align-self:start;justify-content:flex-start}.preview-copy{grid-column:2;grid-row:1}.preview-copy h3{font-size:23px;margin:7px 0}.preview-copy>strong{font-size:9px}.preview-copy p{font-size:9px;line-height:1.6}.preview-art>small{font-size:5px;letter-spacing:.3px}.collection-cards{margin:15px 0}.skin-collection{grid-template-columns:repeat(4,minmax(0,1fr))}.champion-collection{grid-template-columns:repeat(5,minmax(0,1fr))}.collection-card{padding:0 7px 9px}.collection-card canvas{max-height:none;width:calc(100% + 14px);margin:0 -7px}.collection-card strong{font-size:11px}.collection-card .card-kicker{font-size:4px;letter-spacing:.3px}.collection-card>small{font-size:6px}.collection-heroes{gap:5px}.collection-heroes button{padding:8px 4px;font-size:9px}.collection-heroes small{font-size:5px;letter-spacing:.3px}.collection-selection .local-economy{margin-bottom:0}.collection-selection .collection-feedback{min-height:0}.equipped-look{width:100%}}
@media(max-width:520px){.collection-modal{padding:24px 15px 15px}.collection-header{padding-right:23px}.collection-wallet{display:grid;gap:10px;padding-left:10px}.collection-wallet b{font-size:13px}.collection-wallet small{display:none}.collection-header h2{font-size:22px}.collection-header .eyebrow{font-size:5px}.collection-tabs{gap:20px}.collection-tabs>button{font-size:8px}.collection-preview{gap:0 12px;grid-template-columns:1fr 1fr}.preview-art canvas{height:190px;object-fit:cover}.preview-copy h3{font-size:20px}.preview-copy p{font-size:8px}.preview-controls{margin-top:10px;gap:3px}.preview-controls button{padding:5px 6px;font-size:6px}.preview-controls [data-turn]{font-size:13px;padding:0 7px}.preview-art>small{bottom:5px;font-size:4px}.collection-selection>.eyebrow{font-size:7px}.collection-selection>p{font-size:9px}.skin-collection{gap:6px}.champion-collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.collection-card strong{font-size:10px}.collection-card .card-kicker{font-size:4px;letter-spacing:0}.collection-card>small{font-size:5px}.challenge-grid{gap:10px}.challenge-card{padding:14px}.challenge-card h3{font-size:17px}.challenge-card .card-kicker{font-size:5px;letter-spacing:.7px}.reward-explainer h3{font-size:20px}.reward-explainer p{font-size:10px}.collection-selection>.button-gold{font-size:8px;letter-spacing:.6px}.profile-note{font-size:8px}.site-header nav{gap:22px}.site-header nav button{font-size:8px}}
/* Kill announcements */
.announcer{--line:#ddbc7d;--title:linear-gradient(#fff6dc,#e6c47e 58%,#a9823f);position:absolute;top:clamp(140px,20%,240px);left:50%;display:flex;align-items:center;justify-content:center;gap:20px;width:max-content;max-width:calc(100vw - 32px);padding:13px 60px;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-10px) scale(.96);transition:opacity .35s,transform .35s,visibility 0s .35s;background:linear-gradient(90deg,#08141b00,#08141bf2 20%,#08141bf2 80%,#08141b00)}
.announcer:before,.announcer:after{content:'';position:absolute;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.announcer:before{top:0}.announcer:after{bottom:0}
.announcer.visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .32s cubic-bezier(.2,1.45,.4,1),visibility 0s}
.announcer[data-side="ally"]{--line:#7ed1df}
.announcer[data-side="enemy"]{--line:#ee91a1;--title:linear-gradient(#ffe6ea,#ef98a7 58%,#a8485b)}
.announce-text{text-align:center}
.announcer strong{display:block;padding:.24em .1em .04em;font:600 30px/1.05 var(--serif);letter-spacing:4px;text-transform:uppercase;white-space:nowrap;background:var(--title);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px #000d)}
.announcer.visible strong{animation:announce-punch .42s cubic-bezier(.2,1.5,.4,1)}
.announcer small{display:block;margin-top:4px;font-size:11px;letter-spacing:1px;color:#cdd5cd}
.announce-face{--ring:#ee91a1;position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;overflow:hidden;background:#0c1921;border:2px solid var(--ring);box-shadow:0 0 0 3px #08141bcc,0 0 18px #000c;flex-shrink:0}
.announce-face[data-team="0"]{--ring:#7ed1df}
.announce-face canvas{width:100%;height:100%;display:block}
.announce-face svg{display:none;width:26px;height:26px;color:var(--ring)}
.announce-face.structure canvas{display:none}.announce-face.structure svg{display:block}
.announce-face[data-face="victim"] canvas{filter:grayscale(.85) brightness(.75)}
.announce-face[data-face="victim"]:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,transparent 47%,var(--ring) 47%,var(--ring) 53%,transparent 53%);opacity:.75}
@keyframes announce-punch{from{opacity:0;transform:scale(1.4);letter-spacing:9px}to{opacity:1;transform:none}}
@media(max-width:800px){.announcer{top:26%;gap:12px;padding:10px 32px}.announcer strong{font-size:21px;letter-spacing:2.5px}.announcer small{font-size:9px;margin-top:6px}.announce-face{width:42px;height:42px}.announce-face svg{width:20px;height:20px}}
@media(max-width:520px){.announcer{gap:8px;padding:8px 18px}.announcer strong{font-size:16px;letter-spacing:1.5px;white-space:normal}.announcer small{font-size:8px;letter-spacing:.4px}.announce-face{width:34px;height:34px}}
@media(max-height:520px) and (min-width:521px){.announcer{top:58px;gap:10px;padding:5px 30px}.announcer strong{font-size:18px;letter-spacing:2.5px}.announcer small{font-size:9px;letter-spacing:.4px}.announce-face{width:32px;height:32px}.announce-face svg{width:18px;height:18px}}

/* Modes, nickname and loadout in the lobby */
.look-row{display:flex;gap:10px;flex-wrap:wrap}.look-row .equipped-look{flex:1 1 220px;margin:0}
.mode-heading{margin-top:22px}.net-status{font-size:8px;letter-spacing:1.4px;color:var(--muted)}.net-status[data-state="online"]{color:#9bd4a3}.net-status[data-state="offline"]{color:#e79aa6}
.mode-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 12px}
.mode-switch button{padding:11px 6px 9px;background:#0b1a21cc;border:1px solid #b49c6b33;font:600 15px var(--serif);letter-spacing:1px;color:#d9cfb6;transition:border-color .15s,background .15s}
.mode-switch button small{display:block;margin-top:4px;font:500 7px var(--sans);letter-spacing:1.6px;color:var(--muted)}
.mode-switch button:hover{border-color:#ddbc7d88}.mode-switch button[aria-pressed="true"]{background:linear-gradient(#2a2416,#14150f);border-color:var(--gold);color:#f6e3b4}
.name-row{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:8px 12px;background:#0b1a21cc;border:1px solid #b49c6b33}
.name-row span{font-size:8px;letter-spacing:1.8px;color:var(--gold);white-space:nowrap}
.name-row input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid #b49c6b44;color:var(--text);font:500 14px var(--sans);padding:6px 2px;outline:none}
.name-row input:focus{border-bottom-color:var(--gold)}.name-row.invalid{border-color:#e79aa6}
/* Queue */
.queue-panel{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:16px;padding:14px 18px;background:#08151df5;border:1px solid #ddbc7d66;box-shadow:0 12px 40px #000c;max-width:calc(100vw - 32px)}
.queue-panel strong{display:block;font:600 13px var(--serif);letter-spacing:1.5px;color:#f1dfb2}.queue-panel small{display:block;margin-top:4px;font-size:10px;color:#b7c3bf}
.queue-panel time{font:600 22px var(--serif);color:var(--gold);font-variant-numeric:tabular-nums}.queue-panel .button-secondary{margin:0;width:auto;padding:10px 16px}
/* Champion select */
.draft{position:fixed;inset:0;z-index:20;overflow:auto;background:radial-gradient(circle at 50% 0,#1b2a2c,#08141b 70%);padding:22px 4.5% 30px}
.draft-header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid #aec5b519;padding-bottom:14px}
.draft-header h2{font:500 30px var(--serif);margin:8px 0 0}.draft-timer{text-align:center}.draft-timer strong{display:block;font:600 40px var(--serif);color:var(--gold);font-variant-numeric:tabular-nums}.draft-timer small{font-size:8px;letter-spacing:2px;color:var(--muted)}
.draft-timer.urgent strong{color:#ef98a7}
.draft-body{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:22px;margin-top:20px}
.draft-team h3{font-size:9px;letter-spacing:2.4px;color:#7ed1df;margin:0 0 10px}.draft-team.enemy h3{color:#ee91a1}
.draft-team ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.draft-team li{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;padding:7px;background:#0b1a21cc;border:1px solid #7ed1df22}
.draft-team.enemy li{border-color:#ee91a122}.draft-team li.you{border-color:#ddbc7d99;background:#1a1a12cc}
.draft-team canvas{width:48px;height:48px;display:block;background:#0c1921}.draft-team .unknown{width:48px;height:48px;display:grid;place-items:center;background:#0c1921;font:600 18px var(--serif);color:#5f6d70}
.draft-team strong{display:block;font-size:12px;color:#efe6cf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draft-team small{font-size:9px;letter-spacing:1px;color:var(--muted)}
.draft-team .lock{font-size:12px;color:#5f6d70}.draft-team .lock.on{color:#9bd4a3}
.draft-champions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.draft-champions button{position:relative;padding:0;background:#0c1921;border:1px solid #b49c6b33;overflow:hidden}
.draft-champions canvas{display:block;width:100%;aspect-ratio:1}.draft-champions span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:600 10px var(--serif);letter-spacing:1px;color:#f2e6c8;text-shadow:0 1px 4px #000}
.draft-champions button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}.draft-champions button:disabled{opacity:.35;cursor:not-allowed}
.draft-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0 10px;flex-wrap:wrap}
.draft-hero strong{font:500 24px var(--serif);color:#f3e5c2}.draft-hero small{display:block;font-size:8px;letter-spacing:2px;color:var(--gold);margin-top:4px}
.draft-skins{display:flex;gap:6px;flex-wrap:wrap}.draft-skins button{padding:7px 11px;font-size:10px;background:#0b1a21cc;border:1px solid #b49c6b33;color:#d6ccb2}.draft-skins button[aria-pressed="true"]{border-color:var(--gold);color:#f6e3b4}
.draft-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}.draft-actions p{margin:0;font-size:11px;color:#b7c3bf}.draft-actions .button-gold{width:auto;margin:0;min-width:220px}
/* Skill picker */
.skill-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);grid-template-areas:"slots detail" "pool detail";gap:12px 18px}
.loadout-slots{grid-area:slots;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.loadout-slot{position:relative;display:grid;justify-items:center;gap:6px;padding:10px 6px 8px;background:#0b1a21cc;border:1px solid #b49c6b33;text-align:center}
.loadout-slot img{width:44px;height:44px;display:block}.loadout-slot kbd{position:absolute;top:6px;left:6px;font:600 10px var(--serif);color:var(--gold)}
.loadout-slot small{font-size:9px;line-height:1.3;color:#d6ccb2;min-height:24px}.loadout-slot.active{border-color:var(--gold);background:#1a1a12cc}.loadout-slot.ultimate{border-color:#c79bdc55}.loadout-slot.ultimate.active{border-color:#d9b0f0}
.skill-pool{grid-area:pool;display:grid;gap:12px}.skill-pool h4{margin:0 0 7px;font-size:8px;letter-spacing:2px;color:var(--gold)}.skill-pool h4 small{color:var(--muted);letter-spacing:1px;margin-left:6px}
.pool-grid{display:flex;flex-wrap:wrap;gap:6px}
.pool-skill{position:relative;width:42px;height:42px;padding:0;background:#0c1921;border:1px solid #b49c6b2a;opacity:.62;transition:opacity .12s,transform .12s,border-color .12s}
.pool-skill img{width:100%;height:100%;display:block}.pool-skill:hover,.pool-skill:focus-visible{opacity:1;transform:translateY(-2px)}
.pool-skill.fits{opacity:.92;border-color:#ddbc7d66}.pool-skill.chosen{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pool-key{position:absolute;right:2px;bottom:1px;font:700 10px var(--serif);color:#fff6dc;text-shadow:0 1px 3px #000}
.skill-picker.locked .pool-skill,.skill-picker.locked .loadout-slot{cursor:default}
.skill-detail{grid-area:detail;align-self:start;display:flex;gap:12px;padding:14px;background:#08151dd9;border:1px solid #b49c6b33;min-height:150px}
.skill-detail img{width:48px;height:48px;flex-shrink:0}.skill-detail strong{display:block;font:500 16px var(--serif);color:#f3e5c2}
.skill-tags{display:block;margin-top:4px;font-size:9px;letter-spacing:.8px;color:var(--muted)}.skill-tags b{color:#d9b0f0;font-weight:600}
.skill-detail p{margin:8px 0 0;font-size:12px;line-height:1.5;color:#dcd5c3}.skill-detail .skill-numbers{color:#efd18a;font-size:11px}.skill-detail .skill-origin{color:#7f9297;font-size:10px;font-style:italic}
.loadout-modal{width:min(980px,calc(100% - 32px))}.loadout-modal .button-gold{margin-top:16px}
/* Kill feed, scoreboard and connection banner */
.killfeed{position:absolute;top:84px;right:24px;display:grid;gap:5px;justify-items:end;pointer-events:none}
.feed-entry{display:flex;align-items:center;gap:8px;padding:6px 11px;font-size:11px;background:#08151de0;border-right:2px solid #7ed1df;animation:feed-in .25s ease-out}
.feed-entry[data-side="enemy"]{border-right-color:#ee91a1}.feed-entry b{font-weight:600;color:#7ed1df}.feed-entry b.enemy{color:#ee91a1}.feed-entry svg{width:13px;height:13px;color:#cfd6cf}
@keyframes feed-in{from{opacity:0;transform:translateX(12px)}}
.score-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 22px;background:#08151df2;border:1px solid #b49c6b55;box-shadow:0 18px 60px #000d;min-width:min(760px,calc(100vw - 32px));z-index:5}
.score-panel h3{margin:0 0 8px;font-size:9px;letter-spacing:2.4px;color:#7ed1df}.score-panel .enemy h3{color:#ee91a1}
.score-panel table{width:100%;border-collapse:collapse;font-size:11px}.score-panel th{font-size:7px;letter-spacing:1.4px;color:var(--muted);font-weight:500;text-align:left;padding:0 6px 6px}
.score-panel td{padding:6px;border-top:1px solid #b49c6b1f;color:#e1dbc9;font-variant-numeric:tabular-nums}.score-panel tr.you td{color:#f6e3b4}.score-panel td small{color:var(--muted)}
.net-banner{position:absolute;top:118px;left:50%;transform:translateX(-50%);padding:9px 16px;font-size:11px;letter-spacing:.5px;background:#3a1720ee;border:1px solid #ee91a188;color:#ffe3e7}
@media(max-width:1000px){.draft-body{grid-template-columns:1fr}.draft-team ol{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.skill-picker{grid-template-columns:1fr;grid-template-areas:"slots" "detail" "pool"}}
@media(max-width:520px){.draft{padding:14px 16px 24px}.draft-header h2{font-size:22px}.draft-champions{gap:5px}.loadout-slot img{width:34px;height:34px}.loadout-slot small{font-size:8px}.pool-skill{width:38px;height:38px}.mode-switch button{font-size:13px}.queue-panel{gap:10px;padding:10px 12px;bottom:12px}.queue-panel time{font-size:16px}.score-panel{grid-template-columns:1fr;max-height:70vh;overflow:auto}.killfeed{top:70px;right:12px}.draft-actions .button-gold{width:100%}}
.map-choice{margin:4px 0 13px}.map-choice>.champion-heading{margin-bottom:8px}.map-variant-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.map-variant-card{--map-art:none;position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;height:62px;min-width:0;overflow:hidden;padding:0 9px 8px;border:1px solid #92aa8c35;background:#0b1a21;text-align:left;transition:border-color .16s,transform .16s,box-shadow .16s}.map-variant-card:before{content:"";position:absolute;z-index:-2;inset:0;background-image:linear-gradient(0deg,#07131cf5 0%,#07131c48 78%),var(--map-art);background-size:cover;background-position:center;opacity:.82;transition:transform .25s,opacity .2s}.map-variant-card:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(135deg,#8fc98a10,transparent 55%);pointer-events:none}.map-variant-card:hover{border-color:#a7ce8b;transform:translateY(-2px)}.map-variant-card:hover:before,.map-variant-card[aria-pressed=true]:before{opacity:1;transform:scale(1.05)}.map-variant-card[aria-pressed=true]{border-color:#c5d78c;box-shadow:0 0 15px #9bc87925}.map-variant-card span{display:block;min-width:0;position:relative;z-index:1}.map-variant-title{overflow:hidden;color:#e8e8d5;font:500 9px var(--serif);letter-spacing:.65px;text-overflow:ellipsis;white-space:nowrap}.map-variant-card[aria-pressed=true] .map-variant-title{color:#e8d59b}.map-variant-label{margin-top:4px;color:#9eb5a3;font-size:6px;letter-spacing:1.1px}.map-caption{transition:filter .35s}.map-caption[data-variant="mata"] .map-caption-icon{border-color:#9ecf8d70;box-shadow:0 0 45px #58a76b25}.map-caption[data-variant="ancestral"] .map-caption-icon{border-color:#a6d58e70;box-shadow:0 0 45px #72c78c25}

/* Skill ranks, level-up buttons and the champion stats panel. */
.ability-slot{position:relative;display:flex}
.level-up{position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:24px;height:19px;padding:0;display:grid;place-items:center;font:700 15px/1 var(--sans);color:#1b1408;background:linear-gradient(#f6dc9c,#c49a4b);border:1px solid #fff0c0;box-shadow:0 0 10px #f0c86a99;animation:level-pulse 1.1s ease-in-out infinite;z-index:3;cursor:pointer}
.level-up[hidden]{display:none}.level-up:hover{filter:brightness(1.15)}
@keyframes level-pulse{50%{box-shadow:0 0 18px #f3cd74;transform:translateX(-50%) translateY(-2px)}}
.rank-pips{position:absolute;top:3px;left:4px;right:4px;display:flex;gap:2px;z-index:2;pointer-events:none}
.rank-pips i{flex:1;height:4px;background:#07131acc;border:1px solid #7b775c66}
.rank-pips i.on{background:#efcf86;border-color:#fbe6ae;box-shadow:0 0 4px #efcf8699}
.status-name>#attack-stat.points{color:#f1d58d;font-weight:600;letter-spacing:.8px;font-size:8px}
.hud-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding-right:14px;border-right:1px solid #96a18130;font-variant-numeric:tabular-nums;pointer-events:auto}
.hud-stats span{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:10px;color:#ece6d0;min-width:56px}
.hud-stats small{font-size:7px;letter-spacing:.9px;color:#93a8a6}
@media(max-width:1180px){.hud-stats{gap:2px 8px;padding-right:9px}.hud-stats span{min-width:46px;font-size:9px}}
@media(max-width:800px){.hud-stats{display:none}}

/* Vale de Goldenia: buffs, dragons, wards and Smite */
.buff-row{position:absolute;bottom:192px;left:24px;display:flex;flex-wrap:wrap;gap:6px;max-width:420px;pointer-events:none}
.buff-row:empty{display:none}
.buff-chip{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:10px;color:#eef2e4;background:#081820d9;border:1px solid #c9b07a55;font-variant-numeric:tabular-nums}
.buff-chip b{font-weight:600;letter-spacing:.4px}
.buff-blue{border-color:#4fb3ff99;box-shadow:inset 3px 0 0 #4fb3ff}.buff-red{border-color:#ff6a4a99;box-shadow:inset 3px 0 0 #ff6a4a}.buff-baron{border-color:#b07cff99;box-shadow:inset 3px 0 0 #b07cff}
.buff-dragon{width:14px;height:14px;transform:rotate(45deg);background:var(--c);border:2px solid #0b1418;box-shadow:0 0 8px var(--c);margin:3px 2px}
.ability.ward-spell{color:#ffe38a;border-color:#c9b06a77;background:#5c4a2c33}
.ability.ward-spell .charges{position:absolute;top:-6px;right:-6px;min-width:15px;height:15px;font-size:9px;line-height:15px;text-align:center;background:#1b2a31;border:1px solid #c9b06a;color:#ffe9a8;z-index:3}
.ability.smite-spell{color:#ffd76a;border-color:#e0b04a99;background:#6a4a1433}
.draft-spells{margin-top:8px}
@media(max-width:800px){.buff-row{bottom:auto;top:170px;left:12px}}

.ward-spell .ward-icon{display:block;width:100%;height:100%;object-fit:cover}