/* Reference composition. Original League fonts, rank emblems and profile wings. */
:root{--rs:min(calc(100vw / 1672),calc(100dvh / 941));--nav-h:calc(70 * var(--rs));--ivory:#f4edda;--line:#8f7447;--cyan:#50d9ed}
#menu{background:linear-gradient(90deg,#001019bf 0%,#00101972 47%,transparent 64%),linear-gradient(0deg,#00101a75,transparent 52%);overflow:hidden}
#menu header{position:absolute;inset:0 0 auto;height:var(--nav-h);padding:0 calc(270 * var(--rs)) 0 calc(36 * var(--rs));gap:calc(36 * var(--rs));background:linear-gradient(100deg,#020e15f5,#041a26eb);border-bottom:1px solid #9c7d44;z-index:8}
#menu header>.brand{display:flex;align-items:center;gap:calc(25 * var(--rs));width:calc(338 * var(--rs));flex:none;font:700 calc(34 * var(--rs))/1 Beaufort,serif;letter-spacing:calc(2 * var(--rs));color:var(--ivory);white-space:nowrap}
#menu header .brand img{position:static;width:calc(45 * var(--rs));height:calc(50 * var(--rs))}
#menu header>nav,#menu header>.icon{display:none!important}
#menu .home-rail{display:flex!important;position:static;flex-direction:row;width:auto;height:100%;padding:0;gap:0;flex:1;background:none;border:0;z-index:auto}
#menu .home-rail button{position:relative;flex:1;min-width:0;min-height:0;height:100%;padding:0 calc(14 * var(--rs));border:0;border-radius:0;gap:0;color:#e5ddc9;background:none}
#menu .home-rail button svg{display:none}
#menu .home-rail button span,#menu .home-rail button[data-shell=achievements] span{font:500 calc(16 * var(--rs))/1 Beaufort,serif;letter-spacing:calc(1.2 * var(--rs));white-space:nowrap}
#menu .home-rail button:before{content:'';position:absolute;left:0;top:25%;height:50%;width:1px;background:linear-gradient(transparent,#96743877,transparent)}
#menu .home-rail button.active{background:linear-gradient(0deg,#06627845,transparent 45%);color:#ffe3a3;border-bottom:2px solid #b98f42}
#menu .home-rail button.active:after{content:'';position:absolute;bottom:-4px;left:calc(50% - 4px);width:7px;height:7px;transform:rotate(45deg);background:#5bdeef;border:1px solid #e5bc64;box-shadow:0 0 9px #33d6ef}
#menu .home-rail button:hover{background:linear-gradient(0deg,#1a66703d,transparent);color:#fff3cb}
#menu .profile-summary{position:absolute;right:calc(35 * var(--rs));top:0;width:calc(210 * var(--rs));height:calc(256 * var(--rs));margin:0;filter:drop-shadow(0 4px 10px #0008)}
#menu #rankProfile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:calc(3 * var(--rs));width:100%;height:100%;padding:calc(3 * var(--rs)) 0 0;background:linear-gradient(120deg,#03101cf5,#071c27fa);border:1px solid #967542;border-top:0;clip-path:polygon(0 0,100% 0,100% 83%,50% 100%,0 83%);box-shadow:inset 0 0 0 4px #061823,inset 0 0 0 5px #82673570}
#menu .profile-medallion{position:relative;display:block;width:calc(200 * var(--rs));height:calc(174 * var(--rs));flex:none;--avatar-x:50%;--avatar-y:45%;--avatar-size:45%}
#menu #earnedBadge{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;z-index:2;padding:0;pointer-events:none}
#menu #profileAvatar{position:absolute;display:block;left:var(--avatar-x);top:var(--avatar-y);width:var(--avatar-size);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:cover;border:1px solid #d0b479;border-radius:50%;z-index:1}
#menu .profile-gem{position:absolute;left:calc(50% - 10 * var(--rs));bottom:calc(18 * var(--rs));width:calc(20 * var(--rs));height:calc(20 * var(--rs));transform:rotate(45deg);background:linear-gradient(135deg,#b9f8ff 0,#138dba 48%,#003755 49%,#1399ca);border:calc(3 * var(--rs)) solid #c4a567;box-shadow:0 0 0 1px #031521,0 0 8px #37c6ef88;z-index:3}
#menu #rankProfile.unranked .profile-gem{display:none}
#menu #displayName{font:500 calc(20 * var(--rs))/1.3 Beaufort,serif!important;max-width:90%;margin-top:calc(4 * var(--rs));color:#eee5d2}
#menu #earnedRankName{font:500 calc(16 * var(--rs))/1.3 Beaufort,serif;letter-spacing:calc(1.5 * var(--rs));color:#bed4e2;margin:0}
#menu #earnedRankName:before,#menu #earnedRankName:after{content:'◇';font-size:9px;color:#ac8a49;margin:0 10px}
#menu .menu-grid{position:absolute!important;inset:var(--nav-h) calc(28 * var(--rs)) calc(20 * var(--rs))!important;padding:0!important;margin:0!important;display:block!important}
#menu .location-panel{position:absolute!important;inset:0 auto 0 0!important;width:48.8%!important;height:100%!important;min-height:0!important;max-height:none!important;padding:calc(22 * var(--rs)) calc(16 * var(--rs)) calc(14 * var(--rs))!important;display:flex!important;flex-direction:column!important;gap:calc(12 * var(--rs))!important;border:0!important;border-right:1px solid #35505c!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(120deg,#03131ded,#021019f2)!important;overflow:visible!important}
#menu .location-panel:before,#menu .location-panel:after{display:none}
#menu .location-panel>.eyebrow,#menu #modeBrief,#menu .location-panel>.ornament,#menu .location-panel>.frame-gem{display:none!important}
#menu .training-heading{display:flex;align-items:center;gap:calc(28 * var(--rs));height:calc(84 * var(--rs));flex:none}
#menu .training-heading>div:first-child{flex:none}
#menu .lobby-kicker{font:400 calc(15 * var(--rs))/1 Beaufort,serif;letter-spacing:calc(3 * var(--rs));color:#b5c9da;margin:0 0 calc(8 * var(--rs))!important}
#menu .location-panel h2{font:700 calc(58 * var(--rs))/1 Beaufort,serif!important;letter-spacing:0!important;margin:0!important;color:var(--ivory)}
#menu .training-kind{flex:1;display:flex;align-items:center;gap:calc(16 * var(--rs));height:auto;min-width:0;margin:calc(22 * var(--rs)) 0 0!important;padding:0;border:0;background:none;clip-path:none;box-shadow:none}
#menu .training-kind:before{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#8f744765)}
#menu .training-mode-label{display:inline-flex;align-items:center;gap:calc(10 * var(--rs));white-space:nowrap;font:500 calc(17 * var(--rs))/1 Beaufort,serif;letter-spacing:calc(1.4 * var(--rs));text-transform:uppercase;color:#d3e1e7}
#menu .training-mode-label i{width:calc(5 * var(--rs));height:calc(5 * var(--rs));transform:rotate(45deg);background:#59d1df;box-shadow:0 0 7px #45c4d447}
#menu .rank-showcase{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;padding:calc(14 * var(--rs)) calc(12 * var(--rs)) calc(8 * var(--rs));border:1px solid var(--line);background:radial-gradient(ellipse at 22% 42%,#12354a55,transparent 64%),#02121bb5;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px)}
#menu .rank-top{display:flex;align-items:center;justify-content:space-between;padding:0 calc(2 * var(--rs));height:calc(28 * var(--rs));flex:none}
#menu .section-label{font:400 calc(17 * var(--rs))/1 Beaufort,serif;letter-spacing:calc(2.5 * var(--rs));margin:0!important;color:#c1d4e3}
#menu .tier-picker{display:flex;align-items:center;width:auto;min-height:calc(28 * var(--rs));padding:0 4px!important;margin:0!important;gap:calc(12 * var(--rs));border:0;border-radius:0;background:none;box-shadow:none;color:#c8d8e3;font:400 calc(15 * var(--rs)) Spiegel,sans-serif}
#menu .tier-picker:hover{background:none;box-shadow:none;color:#fff4da}
#menu .tier-picker b{color:#dec17e;font-size:calc(24 * var(--rs))}
#menu .selected-rank{display:flex;align-items:center;gap:calc(20 * var(--rs));flex:1;min-height:0;overflow:hidden}
#menu .selected-rank>img{width:38%;height:100%;min-height:0;flex:none;object-fit:contain;transform:none;padding:calc(4 * var(--rs));pointer-events:none}
#menu .selected-rank>div{position:relative;flex:1;min-width:0;padding-right:calc(12 * var(--rs));z-index:1}
#menu .selected-rank h3{font:700 calc(58 * var(--rs))/1.1 Beaufort,serif;color:#fcf3df;text-transform:uppercase;margin:0 0 calc(6 * var(--rs));letter-spacing:calc(1.1 * var(--rs))}
#menu .selected-rank p{font:400 calc(22 * var(--rs))/1.35 Spiegel,sans-serif;color:#bbd1e2;margin:0}
#menu .rank-carousel{display:flex;align-items:stretch;border:1px solid #6d5a3a;background:#03121b8c;height:calc(118 * var(--rs));flex:none}
#menu .rank-carousel>button{flex:0 0 calc(27 * var(--rs));padding:0;background:none;border:0;font:400 calc(31 * var(--rs)) Beaufort,serif;color:#e7d6a8}
#menu #rankRail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:calc(6 * var(--rs));flex:1;min-width:0}
.tier-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;min-height:0;padding:0 4px 10px;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;color:#c2d0db}
.tier-option img{width:100%;height:0;flex:1;min-height:0;object-fit:contain;transform:scale(1.25);pointer-events:none}
.tier-option b{font:500 calc(14 * var(--rs))/1.25 Beaufort,serif;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;z-index:1}
.tier-option.locked{color:#8b949a}.tier-option.locked img{filter:grayscale(1);opacity:.43}
.tier-option.current:not(.selected){box-shadow:inset 0 -2px #50d9ed66;color:#bfeaf2}
.tier-option.selected{border-bottom-color:#d0ac60;background:radial-gradient(ellipse at bottom,#0c6a8144,transparent 70%);color:#fff4da}
.tier-option.selected:after{content:'';position:absolute;bottom:-4px;width:6px;height:6px;transform:rotate(45deg);background:#40d5f1;border:1px solid #ffe5a0;box-shadow:0 0 8px #28bad9}
.tier-option:hover{background:#16405555;color:#f7ead3}.tier-option.locked:hover{background:#182730;cursor:help}
.tier-check,.tier-lock{position:absolute;right:8%;bottom:30%;height:calc(20 * var(--rs));width:calc(20 * var(--rs));display:grid;place-items:center;color:#62deed;background:#021922;border:1px solid #59c6d8;border-radius:50%;font:600 calc(14 * var(--rs)) Spiegel,sans-serif}
.tier-lock{color:#9ba0a4;background:none;border:0;border-radius:0}.tier-lock svg{height:100%;width:100%;fill:#8c959b;stroke:#adb4ba;stroke-width:1.8}
#menu .rank-notice{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#menu .pass-rules{flex:none;margin:0!important}
#menu .session-metrics{height:calc(94 * var(--rs));padding:calc(10 * var(--rs)) 0;border:1px solid #96753e;border-radius:0;background:linear-gradient(110deg,#03111bc9,#0b263433,#03111bda);align-items:center;box-shadow:inset 0 0 0 3px #04151e,inset 0 0 0 4px #6b583345;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
#menu .session-metrics b{font:700 calc(45 * var(--rs))/1 Beaufort,serif;color:#fff4df;letter-spacing:0}
#menu .session-metrics em{font:600 calc(27 * var(--rs)) Beaufort,serif;color:#f4eadb;margin-left:1px}
#menu .session-metrics small{font:400 calc(15 * var(--rs))/1.3 Beaufort,serif;letter-spacing:calc(1.4 * var(--rs));color:#c9d9e6;text-transform:uppercase;margin-top:calc(6 * var(--rs))}
#menu .session-metrics>span+span:before{background:linear-gradient(transparent,#8c7347,transparent);height:80%;top:10%}
#menu .arena-picker{height:calc(100 * var(--rs));min-height:0;gap:calc(25 * var(--rs));margin:0!important;border:1px solid #79653f;border-radius:0;background:#041722aa;flex:none;padding:calc(4 * var(--rs));clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%,0 6px)}
#menu .arena-picker img{width:calc(200 * var(--rs));height:100%;object-fit:cover}
#menu .arena-picker span{font:600 calc(24 * var(--rs))/1.2 Beaufort,serif;color:var(--ivory)}
#menu .arena-picker small{font:400 calc(13 * var(--rs))/1.5 Beaufort,serif;color:#cad9e3;letter-spacing:.5px;margin:0 0 calc(4 * var(--rs))}
#menu .arena-picker small.arena-note{font:400 calc(15 * var(--rs))/1.5 Spiegel,sans-serif;margin:calc(3 * var(--rs)) 0 0;color:#abc0d1;letter-spacing:.3px}
#menu .arena-picker>b{font-size:calc(24 * var(--rs));color:#dcbd75}
#menu .coop-coming{height:calc(62 * var(--rs));min-height:0;padding:calc(8 * var(--rs)) calc(20 * var(--rs));margin:0!important;gap:calc(22 * var(--rs));border:1px solid #5a5b59;border-radius:0;background:linear-gradient(100deg,#202322b0,#121719bf)!important;color:#a7aaa9!important;filter:grayscale(1);cursor:default;opacity:1}
#menu .coop-coming .coop-icon{width:calc(48 * var(--rs));color:#8d9292}.coop-icon svg{width:100%;height:calc(43 * var(--rs));stroke-width:1.3}
#menu .coop-coming strong,#menu .coop-coming small{font:400 calc(16 * var(--rs))/1.35 Spiegel,sans-serif;color:#a8aaa9}
#menu .coop-coming>b{font:400 calc(12 * var(--rs)) Spiegel,sans-serif;color:#a9abaa;border-color:#575b59;padding:calc(8 * var(--rs)) calc(16 * var(--rs));letter-spacing:.5px}
#menu .location-panel #startBtn{flex:none;width:100%;height:calc(65 * var(--rs));min-height:0;margin:0!important;padding:0 calc(48 * var(--rs))!important;font:700 calc(29 * var(--rs))/1 Beaufort,serif!important;letter-spacing:calc(1 * var(--rs));color:#ffe4aa;border:2px solid #d3b06a;border-radius:0;background:radial-gradient(ellipse at 50% 100%,#127b9755,transparent 75%),linear-gradient(110deg,#073b53,#032433 65%,#0b3a4d);box-shadow:inset 0 0 0 3px #061924,inset 0 0 0 4px #c69c57,inset 0 -4px #33cae2;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
#menu #startBtn span{right:calc(28 * var(--rs));font-size:calc(31 * var(--rs));color:#ffe8b3}
#menu .location-panel #startBtn:after{display:none}
#menu button:not(:disabled):active{filter:brightness(.88);transform:translateY(1px)}
#menu .location-panel #startBtn:disabled{filter:grayscale(.8);opacity:.55;cursor:wait}
#menu .hero-info{position:absolute;inset:0 0 calc(222 * var(--rs)) 50.5%!important;width:auto;height:auto;display:flex;align-items:flex-end!important;pointer-events:none;min-height:0}
#menu .hero-card{width:100%;padding:0 calc(16 * var(--rs)) calc(15 * var(--rs))!important;background:linear-gradient(90deg,#00101a72,transparent 70%)!important;pointer-events:none}
#menu .hero-card>.eyebrow{font:400 calc(16 * var(--rs))/1.3 Beaufort,serif!important;letter-spacing:calc(1.8 * var(--rs))!important}
#menu .hero-card h1{font:700 calc(64 * var(--rs))/1.02 Beaufort,serif!important;letter-spacing:calc(1.5 * var(--rs));margin:0 0 calc(12 * var(--rs))!important;color:var(--ivory);background:none;filter:drop-shadow(0 2px 3px #0008)}
#menu .champion-difficulty{background:none;border:0;padding:0;margin:0 0 calc(16 * var(--rs));max-width:none;pointer-events:auto;width:max-content}
#menu .champion-difficulty p{display:none}.dodge-rating-heading{gap:calc(17 * var(--rs))}.dodge-rating-heading>span:first-child{font:400 calc(15 * var(--rs)) Beaufort,serif;letter-spacing:0;color:#d0dfeb}.dodge-rating-heading strong{font-size:calc(18 * var(--rs))}.dodge-rating-heading .difficulty-stars svg{width:calc(19 * var(--rs));height:calc(19 * var(--rs))}
#menu .menu-spells{gap:calc(28 * var(--rs))!important}#menu .menu-spells .incoming-icon{width:calc(58 * var(--rs))!important;height:calc(58 * var(--rs))!important;pointer-events:auto}
#menu .incoming-icon kbd{font:500 calc(16 * var(--rs)) Beaufort,serif;min-width:calc(24 * var(--rs));height:calc(24 * var(--rs));bottom:calc(-5 * var(--rs));right:calc(-5 * var(--rs))}
#menu .menu-summoners{margin-top:calc(20 * var(--rs));gap:calc(36 * var(--rs));pointer-events:auto}#menu .menu-summoners img{width:calc(40 * var(--rs));height:calc(40 * var(--rs))}#menu .menu-summoners b,#menu .menu-summoners kbd{font-size:calc(15 * var(--rs))}
#menu .champion-panel{position:absolute!important;inset:auto 0 0 50.5%!important;width:auto;height:calc(208 * var(--rs))!important;padding:calc(12 * var(--rs)) calc(20 * var(--rs))!important;border:1px solid #997b46!important;border-radius:0;background:linear-gradient(120deg,#031621d9,#021019ef)!important;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);overflow:visible!important}
#menu .champion-order{display:none}
#menu #champions{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,calc(86 * var(--rs)));grid-auto-flow:row;justify-items:center;align-content:center;gap:calc(10 * var(--rs)) calc(12 * var(--rs))!important;height:100%!important;padding:0!important;overflow:visible!important}
#menu .champion-button{position:relative;display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start;min-width:0!important;min-height:0!important;height:100%!important;width:min(100%,calc(82 * var(--rs)));padding:0!important;gap:0!important;border:1px solid #274047!important;border-radius:3px;background:#05141cb0!important;flex:none!important;overflow:visible}
#menu .champion-button[hidden]{display:none!important}
#menu .champion-portrait{width:100%;height:calc(100% - 25 * var(--rs));min-height:0;flex:1;overflow:hidden;border:1px solid #a78345;border-radius:3px}
#menu .champion-button img{display:block;width:100%!important;height:100%!important;object-fit:contain;object-position:center;border:0!important;transform:none}
#menu .champion-button>.champion-portrait>.difficulty-stars{display:none}
#menu .champion-button>span:last-child{flex:none;line-height:calc(23 * var(--rs));text-align:center;white-space:nowrap}
#menu .champion-button b{font:600 calc(13 * var(--rs))/1 Beaufort,serif!important;letter-spacing:.3px!important;color:#ece9d9}
#menu .champion-button.selected .champion-portrait{border-color:#f5d276;box-shadow:0 0 0 1px #4ac7dc,0 0 12px #18c3df66}
#menu .champion-button.selected:after{content:'◆';position:absolute;right:5px;top:5px;color:#ffe9a5;text-shadow:0 0 8px #f6c456;font-size:calc(13 * var(--rs))}
#menu button:disabled{cursor:default}#menu .rank-carousel>button:disabled{opacity:.2}
#menu button:focus-visible,#modalCard button:focus-visible{outline:2px solid #70e6f5;outline-offset:3px;filter:brightness(1.15)}
#menu footer{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#modalCard .tier-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}#modalCard .tier-option{height:130px;border:1px solid #57615b;padding:0 10px 12px}#modalCard .tier-option b{font-size:15px}#modalCard .tier-lock,#modalCard .tier-check{height:20px;width:20px;bottom:30px}
@media(max-width:1050px){
 :root{--rs:.8px;--nav-h:64px}
 #menu{overflow-y:auto}#menu header{position:sticky;top:0;padding:0 140px 0 16px;gap:12px;height:64px}#menu header>.brand{width:auto;gap:10px;font-size:21px}#menu header .brand img{width:30px;height:38px}
 #menu .home-rail{position:fixed;top:64px;left:0;right:0;height:48px;background:#031723f5;border-bottom:1px solid #6a5837}#menu .home-rail button span,#menu .home-rail button[data-shell=achievements] span{font-size:12px;letter-spacing:.4px}#menu .home-rail button{padding:0 4px}
 #menu .profile-summary{width:154px;height:64px;right:8px}#menu #rankProfile{clip-path:none;border:0;background:none;box-shadow:none;overflow:visible}#menu .profile-medallion{position:absolute;left:0;top:5px;width:160px;height:139.2px;transform:scale(.375);transform-origin:top left;margin:0}#menu #earnedBadge{height:100%}#menu #profileAvatar{top:var(--avatar-y)}#menu .profile-gem{display:none}#menu #displayName{position:absolute;left:63px;top:16px;max-width:88px;font-size:13px!important;margin:0}#menu #earnedRankName{position:absolute;left:63px;top:36px;font-size:10px;letter-spacing:1px}#menu #earnedRankName:before,#menu #earnedRankName:after{display:none}

 #menu .menu-grid{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column;margin:60px 14px 16px!important;gap:14px}
 #menu .hero-info{position:relative;inset:auto!important;order:0;height:450px;width:100%}#menu .hero-card{padding:0 14px 14px!important}#menu .hero-card h1{font-size:48px!important}
 #menu .champion-panel{position:relative!important;inset:auto!important;order:1;width:100%;height:180px!important}
 #menu .location-panel{position:relative!important;inset:auto!important;order:2;width:100%!important;height:760px!important;border:1px solid #576257!important;padding:18px!important}
 #menu .training-heading{height:68px}#menu .rank-showcase{min-height:240px}#menu .selected-rank h3{font-size:42px}#menu .selected-rank p{font-size:18px}#menu .rank-carousel{height:100px}#menu .tier-option b{font-size:12px}
 #menu .arena-picker img{width:140px}#menu .coop-coming strong,#menu .coop-coming small{font-size:14px}#menu .location-panel #startBtn{min-height:56px}
}
@media(max-width:580px){
 #menu header>.brand{font-size:19px}#menu .training-heading{gap:14px}#menu .location-panel h2{font-size:40px!important}#menu .lobby-kicker{font-size:11px}#menu .training-mode-label{font-size:12px;letter-spacing:1px}#menu .training-kind{gap:8px}
 #menu .hero-info{height:380px}#menu .hero-card h1{font-size:40px!important}#menu .champion-difficulty .dodge-rating-heading{gap:8px}#menu .champion-difficulty .dodge-rating-heading>span:first-child{font-size:10px}
 #menu .champion-panel{padding:12px!important;height:264px!important}#menu #champions{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,72px);gap:8px!important}#menu .champion-button{width:min(100%,72px)}#menu .champion-button b{font-size:10px!important}
 #menu .location-panel{padding:12px!important;height:720px!important}#menu .selected-rank{gap:8px}#menu .selected-rank h3{font-size:32px}#menu .selected-rank p{font-size:15px}#menu .selected-rank>img{width:35%}
 #menu .section-label{font-size:12px}#menu .rank-carousel>button{flex-basis:18px}#menu .rank-carousel{height:86px}#menu .tier-option b{font-size:10px;letter-spacing:0}
 #menu .session-metrics b{font-size:32px}#menu .session-metrics small{font-size:10px;letter-spacing:0}#menu .arena-picker{gap:12px}#menu .arena-picker img{width:110px}#menu .arena-picker span{font-size:18px}#menu .arena-picker small.arena-note{font-size:11px}
 #modalCard .tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Compact profile actions and a stationary frame around scrolling content. */
#modalCard.scroll-dialog{display:flex;flex-direction:column;padding:0!important;overflow:visible;max-height:90dvh}
#modalCard.scroll-dialog>.dialog-scroll{width:100%;min-height:0;max-height:calc(90dvh - 4px);padding:35px 42px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#637783 #061722;border-radius:inherit}
#modalCard.scroll-dialog>.close-modal{z-index:5;background:#04131de6;border-radius:50%}
#modalCard .profile-actions{flex-wrap:wrap;align-items:center;gap:12px;padding-top:18px;border-top:1px solid #37515c;margin-top:16px}
#modalCard .profile-actions button{padding:10px 18px;font:500 15px/1.2 Spiegel,sans-serif;letter-spacing:0;border:1px solid #526b77;border-radius:3px;background:#102b39;color:#dce8ec}
#modalCard .profile-actions button:hover{background:#173c4c;border-color:#79b8c6}
#modalCard .profile-actions .profile-reset{margin-left:auto;background:none;color:#bfa6a2;border-color:transparent}
#modalCard .profile-actions .profile-reset:hover{color:#f1b6ad;border-color:#87554f;background:#552c242b}
#modalCard .autosave-note{display:flex;align-items:center;gap:8px;font:400 13px/1.5 Spiegel,sans-serif;color:#8eafb7;margin:18px 0 0;grid-column:1/-1}
#modalCard .autosave-note:before{content:'';width:5px;height:5px;border-radius:50%;background:#6bb9a1;flex:none}
#modalCard .autosave-note.save-error{color:#e1a69b}#modalCard .autosave-note.save-error:before{background:#db8271}
#menu #displayName,#menu #profileNameInput{position:absolute;top:calc(185 * var(--rs));left:8%;width:84%;height:calc(30 * var(--rs));max-width:none;margin:0!important;padding:0 4px;z-index:4;text-align:center;font:500 calc(20 * var(--rs))/1.3 Beaufort,serif!important;color:#eee5d2}
#menu #displayName{min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:2px;background:none;cursor:text;box-shadow:none}
#menu #displayName:hover{background:#16384970;color:#f8ead0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#8dafb580}
#menu #profileNameInput{background:#061c29;border:1px solid #6bd2e1;border-radius:2px;outline:none;box-shadow:0 0 0 2px #45c5df22;user-select:text}
#menu #earnedRankName{position:absolute;top:calc(215 * var(--rs));left:0;width:100%}
@media(max-width:1050px){#menu #displayName,#menu #profileNameInput{top:14px;left:61px;width:90px;height:23px;text-align:left;font-size:13px!important}#menu #earnedRankName{top:36px;left:63px;width:auto}}
@media(max-width:720px){#modalCard.scroll-dialog>.dialog-scroll{padding:28px 20px}#modalCard.dialog-profile .profile-hero{gap:14px}#modalCard.dialog-profile .profile-hero img{width:90px;height:90px}#modalCard .profile-actions .profile-reset{margin-left:0}}
/* Training journal: aligned results, real playtime and original champion portraits. */
#modalCard .journal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:22px 0 26px;border:1px solid #35505e;border-radius:4px;overflow:hidden;background:#35505e}
#modalCard .journal-summary>div{display:flex;flex-direction:column;gap:10px;padding:20px 24px;background:#09202c}
#modalCard .journal-summary small{font:500 11px/1.3 Spiegel,sans-serif;letter-spacing:1.3px;color:#8daebb}
#modalCard .journal-summary strong{font:500 29px/1 Beaufort,serif;color:#efe4ce}
#modalCard .journal-section{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px}
#modalCard .journal-section h3{font:500 15px/1.2 Beaufort,serif;letter-spacing:1px;margin:0;color:#ccba93}
#modalCard .journal-section>span{font:400 12px Spiegel,sans-serif;color:#7d9ba8}
#modalCard .training-records{display:grid;gap:8px}
#modalCard .training-record{display:grid;grid-template-columns:44px minmax(130px,1fr) 110px 106px 90px;align-items:center;gap:16px;padding:13px 16px;border:1px solid #2e48565c;border-radius:4px;background:linear-gradient(110deg,#0b2634a0,#071822)}
#modalCard .training-record>img{width:44px;height:44px;object-fit:contain;border:1px solid #8d754967;border-radius:3px}
#modalCard .record-champion{min-width:0;display:flex;flex-direction:column;gap:4px}
#modalCard .record-champion b{font:500 18px/1.2 Beaufort,serif;color:#f0e9d8}
#modalCard .record-champion span{font:400 12px/1.4 Spiegel,sans-serif;color:#8eacba}
#modalCard .record-outcome{font:500 11px/1.2 Spiegel,sans-serif;justify-self:start;color:#b6a39c;background:#40332a50;border:1px solid #80654a55;border-radius:3px;padding:6px 9px;white-space:nowrap}
#modalCard .record-outcome.completed{color:#9bd7c5;background:#17433850;border-color:#40886f55}
#modalCard .record-number,#modalCard .record-time{display:flex;flex-direction:column;gap:5px;align-items:flex-end;font-variant-numeric:tabular-nums}
#modalCard .record-number strong{font:500 22px/1 Beaufort,serif;color:#e4d4ac}
#modalCard .record-time strong{font:500 16px/1.2 Spiegel,sans-serif;color:#cbdce4}
#modalCard .record-number small,#modalCard .record-time small{font:400 11px/1.2 Spiegel,sans-serif;color:#7999a9}
#modalCard .journal-empty{padding:28px;text-align:center;color:#8daebb;border:1px dashed #35505e}
#modalCard.dialog-profile .profile-hero{padding:8px 0 10px;gap:22px;background:none}
#modalCard.dialog-profile .profile-hero img{width:100px;height:100px;border:1px solid #8b754e;border-radius:50%;padding:4px}
#modalCard.dialog-profile .profile-hero small{font:500 11px Spiegel,sans-serif;letter-spacing:1.3px;color:#8daebb}
#modalCard.dialog-profile .profile-hero h3{font:500 32px Beaufort,serif;margin:8px 0 4px}
#modalCard.dialog-profile .profile-hero p{margin:0;color:#9bb5c2;font-size:13px}
@media(max-width:720px){#modalCard .journal-summary>div{padding:16px 12px}#modalCard .journal-summary strong{font-size:24px}#modalCard .training-record{grid-template-columns:38px minmax(90px,1fr) 90px 78px 68px;gap:10px;padding:12px}#modalCard .training-record>img{width:38px;height:38px}#modalCard .record-champion span{font-size:11px}}
@media(max-width:560px){#modalCard .training-record{grid-template-columns:38px 1fr auto;gap:10px 12px}#modalCard .record-outcome{grid-column:3;grid-row:1}#modalCard .record-number{grid-column:2;align-items:flex-start}#modalCard .record-time{grid-column:3}#modalCard .journal-summary small{font-size:9px;letter-spacing:.7px}#modalCard .journal-summary strong{font-size:21px}#modalCard .journal-section>span{font-size:10px}}
#menu #starterBadge{position:absolute;width:calc(70 * var(--rs));height:calc(70 * var(--rs));left:calc(50% - 35 * var(--rs));bottom:0;object-fit:contain;z-index:3;pointer-events:none}
#modalCard .training-overview{border-color:#35505e;border-radius:4px;background:#09202c}
#modalCard .training-stat strong{color:#efe4ce}#modalCard .training-stat small{color:#8daebb}
#modalCard .played-champion{border-color:#2e485680;border-radius:4px;background:#09202c}
#modalCard .played-champion strong{color:#eee4d2}

/* Supplied starter artwork: blend its black matte into the navy surfaces. */
img[src="assets/copper-rank.webp"]{mix-blend-mode:screen}
#modalCard .dialog-scroll:focus-visible{outline:1px solid #5bd3e3;outline-offset:-8px}