:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f6f3e8;color-scheme:dark;--ink:#172932;--panel:#1c303bee;--line:#ffffff20;--muted:#a6b9bf;--blue:#66e3ee;--red:#ff8b79;--gold:#ffcf69;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-right:env(safe-area-inset-right,0px)} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}img{-webkit-user-drag:none;pointer-events:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#172932;overscroll-behavior:none}body{touch-action:none;user-select:none;-webkit-user-select:none}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:none}button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:active{translate:0 2px}button:disabled{cursor:default}svg{display:block}kbd{font-family:inherit;font-size:10px;font-weight:700;border:1px solid #ffffff26;border-radius:4px;padding:3px 5px;color:#c8d6d9;background:#ffffff0a}.hidden,[hidden]{display:none!important}#app{position:relative;width:100%;height:100vh;height:var(--arena-height,100dvh);overflow:hidden;isolation:isolate}#arena{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;padding:24px}.screen:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#10232ce8,#182a3480);backdrop-filter:blur(6px);z-index:-1}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.4px;color:var(--blue)}.separator{margin:0 10px;color:#738e97}.blue-dot,.menu-corner>span{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:8px;box-shadow:0 0 14px #66e3ee70} #loading{position:absolute;inset:0;z-index:50;background:#172932;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}#loading strong{font-size:22px}#loading span{color:var(--muted);font-size:13px}.loader-emblem{display:block;width:66px;height:75px;object-fit:contain;animation:breathe 1s ease-in-out infinite alternate}@keyframes breathe{to{translate:0 -8px;opacity:.6}} .menu-panel{width:min(870px,94vw);max-height:94dvh;padding:32px 40px;text-align:center;overflow:auto;scrollbar-width:none;background:linear-gradient(145deg,#2c444eea,#172932f5);border:1px solid #b2d6db32;border-radius:26px;box-shadow:0 24px 90px #07192380,inset 0 1px #ffffff0c}h1{font-size:clamp(32px,4.5vw,56px);font-weight:850;line-height:1.02;letter-spacing:-2.6px;margin:18px 0 14px}h1 span{color:var(--gold)}.primary{padding:14px 24px;min-height:50px;font-size:13px;font-weight:900;letter-spacing:1px;border-radius:11px;background:linear-gradient(#ffdf8a,#f5bb54);color:#3a3020;border:1px solid #ffebba;box-shadow:0 4px 0 #a97630,0 6px 18px #081d2e30}.primary span{margin-left:22px}.primary:hover{filter:brightness(1.07)}.secondary{background:#ffffff07;border:1px solid #ffffff26;border-radius:11px;padding:14px 22px;font-size:12px;font-weight:650}.secondary:hover{background:#ffffff12} /* Match HUD */ #hud{position:absolute;inset:0;pointer-events:none}.utility{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));top:calc(18px + var(--safe-top));display:flex;align-items:center;gap:6px;z-index:25;pointer-events:auto}.utility button{height:36px;min-width:36px;padding:8px;border:1px solid #d1e9eb30;background:#1b303de8;border-radius:9px;box-shadow:0 3px 10px #12202c20;font-size:18px}.utility button:hover{background:#35545e}.utility button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.utility .score-toggle{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800}.score-toggle svg{width:15px!important}.score-toggle kbd{font-size:8px;padding:2px 3px} .minimap-panel{position:absolute;right:16px;bottom:14px;padding:7px;width:132px;border:1px solid #cae4e244;border-radius:14px;background:linear-gradient(140deg,#233e49f5,#142b36f5);box-shadow:0 6px 24px #0c233950}.map-heading{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px;font-size:8px;font-weight:800;letter-spacing:2px;color:#a9c5ce}.map-live{width:4px;height:4px;border-radius:50%;background:#89e4cc;box-shadow:0 0 7px #69dccb}#minimap{display:block;width:100%;height:auto;border-radius:7px;background:#122b33;border:1px solid #ffffff15}.map-legend{display:flex;justify-content:space-between;gap:4px;margin:8px 1px 0;font-size:6px;font-weight:800;color:#aac5cb;letter-spacing:.5px}.map-legend span{display:flex;align-items:center;gap:3px}.map-legend i{width:4px;height:4px;background:var(--blue);border-radius:50%}.map-legend span:last-child i{background:var(--red)} .player-dock{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;align-items:stretch}.player-dock>div,.recall-button{background:linear-gradient(145deg,#263e49f5,#172c38f5);border:1px solid #cae4e238;box-shadow:0 5px 18px #10253844;border-radius:13px}#xp-status{display:flex;align-items:center;padding:8px;gap:8px;width:265px}.player-portrait{position:relative;width:46px;height:50px;flex-shrink:0;background:radial-gradient(#538c97,#213d4a);border:1px solid #70dfe459;border-radius:9px}.player-portrait img{width:100%;height:100%;object-fit:cover;border-radius:8px}.player-portrait b{position:absolute;left:-7px;bottom:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#213e4b;border:2px solid var(--blue);font-size:11px;color:#efffff}.player-vitals{flex:1;min-width:0}.player-name{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.player-name strong{font-size:12px;color:#f1f7f6;font-weight:800}.player-name>span{font-size:8px;color:#9db9c4;white-space:nowrap}.health-track{height:16px;position:relative;background:#10232a;border:1px solid #071e2566;border-radius:4px;overflow:hidden}.health-track>i{display:block;width:100%;height:100%;background:linear-gradient(#80d7b8,#39a58e);transition:width .12s}.health-track>span{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:800;text-shadow:0 1px 2px #0d333c}.xp-track{display:flex;align-items:center;gap:6px;margin-top:6px}.xp-track>i{height:3px;display:block;flex:1;background:#ffffff12;border-radius:3px;overflow:hidden}#xp-fill{display:block;background:var(--blue);height:100%;transition:width .2s}.xp-track>small{font-size:7px;color:#a4bcc6;min-width:64px;text-align:right;font-variant-numeric:tabular-nums} .recall-button{width:48px;padding:6px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:auto;color:#abc8d1}.recall-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.recall-button>span{font-size:8px;letter-spacing:1.4px;font-weight:850}.recall-button kbd{font-size:8px;padding:1px 5px}.recall-button.channeling{color:var(--blue);border-color:var(--blue);box-shadow:0 0 22px #66e3ee22}.recall-button:hover{background:#33515e}#special-status{display:flex;align-items:center;width:150px;padding:8px;gap:8px}.ultimate-icon{width:36px;height:36px;flex-shrink:0;border:2px solid #e7bf6966;border-radius:13px;background:#d5a54d16;display:grid;place-items:center}.ultimate-icon svg{width:28px;height:28px;fill:#e7bf69}.ultimate-info{min-width:0;flex:1;line-height:1}.ultimate-info>span{display:block;line-height:1.2;font-size:7px;font-weight:800;letter-spacing:1px;color:#dbcfb4;white-space:nowrap}.ultimate-info>strong{display:block;font-size:19px;line-height:24px;color:#ffdb8a;font-variant-numeric:tabular-nums}.ultimate-info>i{display:block;height:3px;background:#ffffff16;border-radius:2px;margin:3px 0 6px;overflow:hidden}#special-fill{display:block;height:100%;background:var(--gold)}.ultimate-info>small{display:block;line-height:1.2;font-size:6px;font-weight:800;letter-spacing:1px;color:#a6b8b9}#special-status.ready{border-color:#f4c56599;background:linear-gradient(120deg,#52492bf5,#283c3ef5)}#special-status.ready .ultimate-icon{border-color:#ffe6a4;box-shadow:0 0 20px #fbd36a25}#recall-status{position:absolute;bottom:132px;left:50%;transform:translateX(-50%);width:260px;padding:12px 16px;border:1px solid #6ee5ed66;border-radius:12px;background:#1c3545ed;box-shadow:0 5px 25px #11283250}#recall-status>span{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;font-weight:800;color:var(--blue)}#recall-status>i{display:block;height:4px;background:#ffffff14;margin:10px 0;border-radius:3px;overflow:hidden}#recall-fill{display:block;height:100%;background:var(--blue)}#recall-status small{font-size:8px;color:#aec8cf;display:block;text-align:center}#announcement{position:absolute;top:calc(125px + var(--safe-top));left:50%;transform:translate(-50%,-6px);padding:10px 18px;border:1px solid #c0e0df33;border-radius:9px;background:#1c3442e8;box-shadow:0 3px 15px #10273222;font-size:10px;font-weight:800;letter-spacing:.5px;color:#f5dfb0;max-width:75%;text-align:center;opacity:0;transition:opacity .18s,transform .18s}#announcement.visible{opacity:1;transform:translate(-50%,0)} /* Touch: the movement surface stays invisible. */ #touch-controls{display:none;position:absolute;inset:0;pointer-events:none}.touch-mode #touch-controls{display:block}.touch-only{display:none}.touch-mode .touch-only{display:inline}.touch-mode .desktop-only{display:none}.touch-mode .score-toggle kbd{display:none}.stick{position:absolute;width:126px;height:126px;bottom:calc(24px + var(--safe-bottom));right:calc(24px + env(safe-area-inset-right,0px));border:1px solid #efffff66;border-radius:50%;background:#1b35463b;box-shadow:inset 0 0 0 7px #ffffff06,0 5px 20px #20323c20;pointer-events:auto}.stick:after{content:"";position:absolute;inset:12px;border:1px solid #e6ffff2b;border-radius:50%;pointer-events:none}.stick-knob{position:absolute;width:58px;height:58px;left:33px;top:33px;border:2px solid #edffff8c;border-radius:50%;background:#a4c4ca40;box-shadow:0 4px 12px #10273222;pointer-events:none}.crosshair{position:absolute;inset:0;display:grid;place-items:center;font:60px Arial;color:#ecffff8a}.stick.active{background:#1c566848;border-color:var(--blue)}.stick.active .stick-knob{background:#7adce45a;border-color:var(--blue)}#special{position:absolute;right:calc(174px + var(--safe-right));bottom:calc(36px + var(--safe-bottom));width:72px;height:72px;border:2px solid #e7cc914d;border-radius:22px;background:linear-gradient(140deg,#38505ce6,#1e3444e6);pointer-events:auto;box-shadow:0 5px 18px #1a2a3740}#special svg{position:absolute;inset:12px;width:44px;height:44px;fill:#a8b5af;stroke:#d3d3b6;stroke-width:1}#special span{position:absolute;bottom:7px;left:0;right:0;font-size:10px;font-weight:850;color:#f3e7c6;text-shadow:0 1px 4px #15313a}#special.ready{background:linear-gradient(140deg,#ffdc79,#eeb54b);border-color:#fff0b1;box-shadow:0 0 24px #f9c85e40,0 5px 18px #1a2a3740}#special.ready svg{fill:#fff9d4;stroke:#a2762b}.touch-mode #special-status{display:none}.touch-mode .player-dock{left:20px;transform:none;bottom:calc(20px + var(--safe-bottom))}.touch-mode #xp-status{width:240px}.touch-mode .recall-button kbd{display:none} /* Match summary */ #scoreboard{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:#071c2aab;backdrop-filter:blur(10px)}.score-panel{scrollbar-color:#527483 transparent;width:min(930px,100%);max-height:94dvh;overflow:auto;overscroll-behavior:contain;border:1px solid #a7d4d744;border-radius:22px;background:linear-gradient(140deg,#29414bf5,#142b37fa);box-shadow:0 30px 100px #051b2dcc;padding:26px;scrollbar-width:thin}.score-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.score-header h2{font-size:26px;font-weight:850;letter-spacing:-.9px;margin:8px 0 0}.score-meta{display:flex;gap:18px;align-items:center}.score-meta>span{font-size:15px;color:#bbd4db;font-variant-numeric:tabular-nums}.score-meta button{height:38px;width:38px;border:1px solid #ffffff30;border-radius:10px;background:#ffffff08;font-size:25px;color:#d5e5e9}.score-meta button:hover{background:#ffffff18}.score-team{border:1px solid #80c7d633;border-radius:13px;overflow:hidden;margin-top:14px}.score-team.enemy{border-color:#eaa18a30}.score-team-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#66d8e412}.score-team.enemy .score-team-heading{background:#f6947a0d}.score-team-heading strong{font-size:10px;letter-spacing:2px;color:var(--blue)}.score-team.enemy .score-team-heading strong{color:var(--red)}.score-team-heading span{font-size:9px;color:#9dbac4}.score-team-heading b{color:#e0eff1;font-size:17px;margin-right:6px}.score-table{width:100%;border-collapse:collapse;table-layout:fixed}.score-table th{text-align:center;padding:9px 6px;font-size:9px;font-weight:800;letter-spacing:1.3px;color:#819fae;background:#142d382b}.score-table th:first-child{text-align:left;padding-left:16px;width:37%}.score-table th:nth-child(2){width:20%}.score-table td{text-align:center;padding:9px 6px;border-top:1px solid #ffffff0b;font-size:12px;font-variant-numeric:tabular-nums}.score-table td:first-child{text-align:left;padding-left:16px}.score-table tr.is-you{background:#63ddea0b}.score-identity{display:flex;align-items:center;gap:11px}.score-avatar{position:relative;flex-shrink:0;width:40px;height:40px;border:1px solid #72b9c35c;border-radius:10px;background:#274751;overflow:hidden}.score-avatar img{width:100%;height:100%;object-fit:cover}.score-identity strong{display:block;font-size:12px;font-weight:800}.score-identity small{display:block;font-size:7px;letter-spacing:1px;color:#8faeb9;margin-top:4px;text-transform:uppercase}.score-identity em{font-style:normal;font-size:6px;letter-spacing:1px;color:var(--blue);border:1px solid #65dfea55;padding:2px 3px;border-radius:3px;margin-left:5px;vertical-align:middle}.score-alive{display:inline-flex;align-items:center;gap:6px;color:#a0d6c1;font-size:8px;font-weight:750;letter-spacing:.7px}.score-alive:before{content:"";width:4px;height:4px;background:#90d6b8;border-radius:50%}.score-dead{color:#ffba9d;font-size:10px;font-weight:800}.is-dead .score-avatar img{filter:grayscale(1);opacity:.45}.score-level{display:inline-grid;place-items:center;min-width:24px;height:24px;border:1px solid #91b2b53b;border-radius:7px;font-weight:800;color:#dfefea;background:#253f45}.score-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-size:8px;color:#88a7b4}.score-footer i{display:inline-block;width:4px;height:4px;background:#8ad8c3;border-radius:50%;margin-right:5px} /* Pause and result */ .dialog-screen:before{background:#102535b8;backdrop-filter:blur(8px)}.dialog{width:min(420px,94vw);text-align:center;background:linear-gradient(140deg,#2b444f,#1a303d);padding:34px;border:1px solid #bddce13b;border-radius:23px;box-shadow:0 20px 70px #10263880}.dialog h2{font-size:42px;font-weight:850;letter-spacing:-1.5px;margin:14px 0;color:#f8df9e}.dialog p{font-size:12px;line-height:1.7;color:#abc4ce;margin:12px 0 26px}.dialog .primary{width:100%}.text-button{background:none;color:#a1bec9;font-size:11px;padding:22px 10px 0;display:block;margin:auto}.text-button:hover{color:#e9ffff}#result-icon{font-size:60px;color:var(--gold);line-height:1;filter:drop-shadow(0 0 22px #ffd76b44);margin-bottom:15px}.result-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-around;border-block:1px solid #ffffff16;padding:18px 0;margin:22px 0 26px}.result-stats strong{display:block;font-size:23px;font-weight:800}.result-stats span{display:block;font-size:7px;letter-spacing:1px;color:#97b6c1;margin-top:6px}#result.defeat h2,#result.defeat #result-icon{color:var(--red)}#fullscreen-notice{position:absolute;z-index:70;top:70px;right:20px;padding:12px 18px;font-size:11px;border:1px solid #bbd9e233;border-radius:10px;background:#1b3444ee} @media(max-width:1100px){.utility .score-toggle>span{display:none}.match-top{width:420px}.player-dock{left:20px;transform:none}#xp-status{width:250px}#special-status{width:160px}.minimap-panel{width:126px}} @media(max-width:700px){.menu-panel{padding:26px 18px;border-radius:20px}h1{font-size:42px;letter-spacing:-1.8px}.primary{font-size:11px;padding:14px 18px}.secondary{font-size:11px;padding:14px 16px}.match-top{top:calc(10px + var(--safe-top));width:calc(100% - 24px);max-width:430px;gap:14px;padding:9px 12px;border-radius:12px}.team-roster{display:none}.match-score{font-size:22px;line-height:24px}.team-heading span{font-size:7px;letter-spacing:1px}.team-heading em{font-size:9px}.match-clock{margin-top:2px}.match-center{min-width:65px}.utility{top:calc(83px + var(--safe-top));right:12px;gap:5px}.utility button{min-width:44px;height:44px;padding:11px}.utility .score-toggle>span{display:inline}.utility .score-toggle{font-size:10px;gap:5px}.utility .score-toggle kbd{display:none}.minimap-panel{left:12px;top:calc(83px + var(--safe-top));right:auto;bottom:auto;width:90px;border-radius:10px;padding:6px}.map-heading{font-size:6px;margin-bottom:5px}.map-legend{display:none}#announcement{top:calc(131px + var(--safe-top));left:auto;right:12px;transform:translateY(-6px);max-width:calc(100% - 133px);padding:9px 11px;font-size:8px;line-height:1.5}#announcement.visible{transform:translateY(0)}.player-dock,.touch-mode .player-dock{left:12px;bottom:calc(14px + var(--safe-bottom));transform:none;gap:7px;flex-wrap:wrap;width:200px}#xp-status,.touch-mode #xp-status{width:200px;order:0;padding:7px;gap:8px}.player-portrait{width:34px;height:38px}.player-portrait b{width:20px;height:20px;font-size:9px;left:-5px;bottom:-5px}.player-name{gap:5px}.player-name strong{font-size:9px}.player-name>span{font-size:6px}.health-track{height:14px}.health-track>span{font-size:8px}.xp-track{margin-top:4px;gap:4px}.xp-track>small{font-size:6px;min-width:52px}.recall-button{order:1;width:72px;min-height:46px;flex-direction:row;flex-wrap:wrap;gap:5px;padding:7px}.recall-button svg{width:18px;height:18px}.recall-button>span{font-size:8px;letter-spacing:.5px}.recall-button kbd{display:none}#special-status{order:2;width:121px;padding:5px 8px;gap:6px;min-height:46px}.ultimate-icon{width:30px;height:30px;border-radius:8px}.ultimate-icon svg{width:20px;height:20px}.ultimate-info>strong{font-size:14px;line-height:17px}.ultimate-info>span{display:block;line-height:1.2;font-size:5px}.ultimate-info>small{display:block;line-height:1.2;font-size:5px}.ultimate-info>i{margin:2px 0;height:2px}.stick{right:calc(14px + var(--safe-right));bottom:calc(20px + var(--safe-bottom));width:112px;height:112px}.stick-knob{width:52px;height:52px;top:29px;left:29px}.crosshair{font-size:55px}#special{right:calc(30px + var(--safe-right));bottom:calc(151px + var(--safe-bottom));width:62px;height:62px;border-radius:20px}#special svg{width:36px;height:36px;inset:11px}#special span{font-size:9px;bottom:5px}.touch-mode .player-dock{width:200px}#recall-status{bottom:calc(151px + var(--safe-bottom));left:12px;transform:none;width:200px;padding:10px 12px}#recall-status>span{font-size:8px}#recall-status small{font-size:7px}#scoreboard{padding:12px}.score-panel{padding:16px 12px;border-radius:17px;max-height:94dvh}.score-header{margin-bottom:18px}.score-header h2{font-size:20px;letter-spacing:-.7px;max-width:190px}.score-header .eyebrow{font-size:7px;letter-spacing:1.7px}.score-meta{gap:8px}.score-meta>span{font-size:11px}.score-meta button{height:32px;width:32px}.score-team-heading{padding:10px}.score-team-heading strong{font-size:9px;letter-spacing:1px}.score-team-heading span{font-size:8px}.score-table th{font-size:7px;padding:8px 3px;letter-spacing:.5px}.score-table th:first-child{padding-left:9px;width:33%}.score-table th:nth-child(2){width:21%}.score-table td{padding:10px 3px;font-size:12px}.score-table td:first-child{padding-left:9px}.score-identity{gap:7px}.score-avatar{width:29px;height:32px;border-radius:7px}.score-identity strong{font-size:11px}.score-identity small{font-size:6px;letter-spacing:.5px}.score-identity em{display:none}.score-alive{font-size:7px;gap:4px;letter-spacing:0}.score-dead{font-size:10px}.score-level{min-width:20px;height:22px;border-radius:6px;font-size:10px}.score-footer{font-size:7px;gap:6px;line-height:1.7;margin-top:15px}.score-footer kbd{font-size:6px;padding:2px}.dialog{padding:28px}.dialog h2{font-size:35px}.touch-mode .player-dock{width:calc(100vw - 150px);max-width:242px;flex-wrap:nowrap;gap:5px}.touch-mode #xp-status{width:auto;min-width:0;flex:1;order:1}.touch-mode .recall-button{order:0;flex:0 0 44px;width:44px;min-width:44px;padding:5px;flex-direction:column;gap:3px}.touch-mode .recall-button>span{font-size:8px}} @media(max-width:360px){.touch-mode .player-dock{width:190px;flex-wrap:wrap}.touch-mode #xp-status{order:0;flex:auto;width:190px}.touch-mode .recall-button{order:1;}h1{font-size:37px}.player-dock,.touch-mode .player-dock,#xp-status,.touch-mode #xp-status{width:190px}.player-name>span{display:none}.score-identity small{display:none}.score-avatar{width:24px;height:28px}.score-table th:first-child{width:34%}.score-header h2{font-size:18px}.utility .score-toggle>span{display:none}} @media(max-height:540px) and (orientation:landscape){.screen{padding:10px}.menu-panel{width:min(780px,94vw);padding:16px 24px;max-height:96dvh}h1{font-size:30px;margin:8px 0;letter-spacing:-1px}h1 br{display:none}h1 span{margin-left:7px}.eyebrow{font-size:8px}.primary{min-height:38px;padding:10px 18px;font-size:10px}.secondary{padding:11px 16px;font-size:10px}.match-top{top:8px;width:350px;padding:8px 12px;gap:12px}.team-roster{display:none}.match-score{font-size:20px;line-height:23px}.match-center{min-width:55px}.team-heading{margin-bottom:6px}.team-heading span{font-size:6px;letter-spacing:1px}.utility{top:10px;right:10px}.utility button{height:44px;min-width:44px}.utility .score-toggle>span,.utility kbd{display:none}.minimap-panel{left:10px;right:auto;top:10px;bottom:auto;width:100px;padding:6px}.map-heading{font-size:6px;margin-bottom:4px}.map-legend{display:none}.player-dock{bottom:10px;left:125px;gap:6px}#xp-status{width:255px;padding:7px}.player-portrait{height:45px;width:42px}.player-name strong{font-size:10px}.health-track{height:14px}.health-track>span{font-size:8px}.xp-track>small{font-size:6px}.recall-button{width:48px;padding:6px}.recall-button svg{width:20px;height:20px}.recall-button>span{font-size:7px}#special-status{width:150px;padding:7px}.ultimate-icon{width:34px;height:34px}.ultimate-info>strong{font-size:18px;line-height:21px}.touch-mode .player-dock{left:10px;bottom:10px}.touch-mode #xp-status{width:235px}.touch-mode .recall-button{width:48px}.stick{width:104px;height:104px;right:calc(16px + var(--safe-right));bottom:calc(14px + var(--safe-bottom))}.stick-knob{width:48px;height:48px;left:27px;top:27px}#special{width:60px;height:60px;right:calc(138px + var(--safe-right));bottom:calc(23px + var(--safe-bottom));border-radius:19px}#special svg{width:36px;height:36px;inset:10px}#announcement{top:82px;font-size:8px;padding:8px 12px}#recall-status{bottom:92px;left:50%;transform:translateX(-50%);width:230px;padding:9px 12px}#scoreboard{padding:10px}.score-panel{padding:14px 18px;max-height:95dvh}.score-header{margin-bottom:12px}.score-header h2{font-size:20px;margin-top:4px}.score-header .eyebrow{font-size:7px}.score-team{margin-top:9px}.score-team-heading{padding:7px 12px}.score-table td{padding:5px 6px}.score-table th{padding:6px;font-size:6px}.score-avatar{width:28px;height:28px}.score-identity strong{font-size:10px}.score-identity small{font-size:5px;margin-top:2px}.score-footer{margin-top:12px;font-size:7px}.dialog{padding:20px 28px}.dialog h2{font-size:30px;margin:8px 0}.dialog p{margin-bottom:16px}.result-stats{padding:12px 0;margin:15px 0}.result-stats strong{font-size:19px}#result-icon{font-size:32px;margin-bottom:8px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}} /* Compact personal panel with live kills / deaths / assists. */ #xp-status{width:224px;padding:6px;gap:7px;align-self:center}.player-portrait{width:35px;height:39px}.player-portrait b{width:20px;height:20px;font-size:9px;left:-5px;bottom:-4px}.player-name{margin-bottom:4px;gap:6px}.player-name strong{font-size:10px}.player-name #hero-kda{font-size:10px;font-weight:800;color:#f3dfac;letter-spacing:.5px;font-variant-numeric:tabular-nums}.player-name #hero-stats{display:none}.health-track{height:14px}.health-track>span{font-size:8px}.xp-track{margin-top:4px}.xp-track>small{font-size:6px}.touch-mode #xp-status{width:224px} #special.aiming{border-color:#fff3b5;box-shadow:0 0 0 7px #ffdb692a,0 0 30px #ffdb6955;transform:scale(1.08)} @media(max-width:700px){#xp-status{width:184px}.touch-mode #xp-status{width:auto}.player-portrait{width:28px;height:32px}.player-name strong{font-size:8px}.player-name #hero-kda{font-size:9px;letter-spacing:0}.player-portrait b{width:18px;height:18px;font-size:8px}.touch-mode .player-dock{max-width:224px}.health-track{height:12px}.health-track>span{font-size:7px}.xp-track>small{font-size:6px}} @media(max-width:360px){.touch-mode .player-dock{width:174px}.touch-mode #xp-status{width:174px}} #match-feed,#kill-feed{display:flex;align-items:flex-end;flex-direction:column;gap:5px;pointer-events:none}#match-feed{position:absolute;right:16px;top:74px}#kill-feed:empty{display:none}.feed-row{display:flex;align-items:center;gap:7px;padding:5px 8px;background:#18303bea;border:1px solid #6ad8e64a;border-left:3px solid #65e2eb;border-radius:7px;box-shadow:0 3px 12px #10273430}.feed-row.enemy{border-left-color:#ff8b79}.feed-row img{width:25px;height:25px;border-radius:5px;background:#244650}.feed-sword{color:#edcc85;font-size:16px}.feed-assists{display:flex;gap:3px;border-left:1px solid #ffffff26;padding-left:7px}.feed-assists img{width:18px;height:18px}.feed-unit{width:25px;text-align:center;color:#b7d7db}@media(max-width:700px){#match-feed{top:137px;right:12px}.feed-row{gap:5px;padding:4px 6px}.feed-row img{width:21px;height:21px}.feed-assists img{width:15px;height:15px}} #player-build .build-slots{display:flex;gap:3px;margin-top:4px}.build-slots{display:flex;gap:4px;margin-top:5px}.build-slot{display:flex;align-items:center;justify-content:center;position:relative;width:24px;height:24px;border:1px solid #91b7bf30;border-radius:5px;background:#0f2735;opacity:.35}.build-slot img{width:16px;height:16px}.build-slot b{position:absolute;bottom:-2px;right:-3px;font-size:8px;font-weight:900;color:#ffe2a0;text-shadow:0 1px 2px #000;background:#16303b;border-radius:3px;padding:0 2px}.build-slot.chosen{opacity:1;border-color:#66e3ee88;background:#2a555d}#player-build .build-slot{width:19px;height:19px}#player-build .build-slot img{width:13px;height:13px}#player-build .build-slot b{font-size:7px} #upgrade-picker{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);padding:8px;background:#18303bf0;border:1px solid #79dfd16b;border-radius:12px;pointer-events:auto;box-shadow:0 4px 24px #09253250}#upgrade-points{display:block;text-align:center;font-size:8px;letter-spacing:1px;color:#b2e8df;margin-bottom:6px}#upgrade-choices{display:flex;gap:5px}#upgrade-choices button{display:flex;align-items:center;flex-direction:column;gap:4px;min-width:75px;padding:7px;border-radius:7px;background:#2c4a55;border:1px solid #94e6df3b}#upgrade-choices button:hover{background:#39616b;border-color:#99fff1}#upgrade-choices img{width:24px;height:24px}#upgrade-choices span{font-size:9px;font-weight:800}#upgrade-choices small{font-size:6px;color:#b6cdd1;white-space:nowrap} @media(max-width:700px){#upgrade-picker{left:8px;right:8px;bottom:98px;transform:none;padding:6px}#upgrade-choices{gap:4px}#upgrade-choices button{min-width:0;flex:1;padding:6px 3px}#upgrade-choices span{font-size:8px}#upgrade-choices small{font-size:5px;white-space:normal;text-align:center}#upgrade-choices img{width:21px;height:21px}.score-table th:first-child{width:37%}.score-table th:nth-child(2){width:17%}.score-identity{gap:5px}.score-avatar{width:23px;height:28px}.score-table .build-slots{gap:2px}.score-table .build-slot{width:16px;height:18px}.score-table .build-slot img{width:12px;height:12px}.score-table .build-slot b{font-size:6px}#player-build .build-slot{width:16px;height:16px}#player-build .build-slot img{width:11px;height:11px}} @media(max-width:700px){#upgrade-picker{left:8px;right:auto;bottom:100px;width:calc(100vw - 150px);max-width:260px}#upgrade-choices small{display:none}#upgrade-choices button{min-height:44px;padding:4px 1px}#upgrade-choices span{font-size:6px}#upgrade-points{font-size:7px;letter-spacing:0}} @media(max-width:700px){#match-feed{top:190px}} /* Team vision and directional Flash */ .minimap-panel{width:148px;background:#142c35f5;border-color:#a9d5cc55}.map-heading{letter-spacing:1px;font-size:7px}#minimap{image-rendering:auto;border-color:#d6eedc44}.map-legend{font-size:6px;letter-spacing:.3px} .flash-button{position:relative;width:48px;min-height:52px;align-self:stretch;pointer-events:auto;border:1px solid #d4ba6755;border-radius:12px;background:linear-gradient(145deg,#4b4930f0,#21353ff5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#ffe9a0;box-shadow:0 4px 16px #10273244;overflow:hidden}.flash-button svg{width:24px;height:24px;fill:currentColor}.flash-button span{font-size:8px;font-weight:900;letter-spacing:.5px}.flash-button kbd{font-size:8px;padding:1px 4px}.flash-button:disabled{color:#94a9ad;border-color:#8ba09c44;opacity:.75}.flash-button.ready{border-color:#f6de87aa}.flash-button:after{content:'';position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(to right,#ffe28c var(--flash-charge,100%),#ffffff22 0)} .touch-mode #flash{position:fixed;right:calc(38px + var(--safe-right));bottom:calc(176px + var(--safe-bottom));width:62px;height:62px;min-height:0;border-radius:20px;z-index:4}.touch-mode #flash kbd{display:none}.touch-mode #flash svg{width:28px;height:28px}.touch-mode #flash span{font-size:9px} @media(max-width:700px){.minimap-panel{width:104px}.map-heading{font-size:6px;letter-spacing:.3px}.touch-mode #flash{right:calc(102px + var(--safe-right));bottom:calc(151px + var(--safe-bottom));width:56px;height:56px;border-radius:18px}.touch-mode #flash svg{width:25px;height:25px}.flash-button{width:42px;min-width:42px}.flash-button kbd{display:none}} @media(max-height:540px) and (orientation:landscape){.minimap-panel{width:100px}.touch-mode #flash{right:calc(39px + var(--safe-right));bottom:calc(132px + var(--safe-bottom));width:56px;height:56px}.flash-button{min-height:48px}} /* One row: allied objectives, allied kills, time, enemy kills, enemy objectives. */ .match-top{position:absolute;top:calc(14px + var(--safe-top));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) 30px 54px 30px minmax(0,1fr);align-items:center;width:min(410px,calc(100% - 24px));max-width:none;height:38px;padding:0 12px;gap:10px;border:1px solid #bedcd737;border-radius:11px;background:linear-gradient(#213944f5,#182b36ee);box-shadow:0 4px 18px #0b25342e} .objective-ticks{display:flex;align-items:center;gap:4px;min-width:0;color:var(--blue)}.objective-ticks.enemy{color:var(--red)}.objective-tick{position:relative;display:block;flex:1;min-width:0;height:14px;overflow:hidden;border:1px solid #ffffff2d;border-radius:3px;background:#081e29;box-shadow:inset 0 1px 3px #0005}.objective-tick i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(#9aeaf0,#40b9cb);transition:width .15s}.enemy .objective-tick i{background:linear-gradient(#ffc5a8,#ef8976)}.objective-tick b{position:absolute;inset:0;display:grid;place-items:center;color:#fff9e8;font-size:8px;font-weight:900;line-height:1;text-shadow:0 1px 2px #152f39,0 0 2px #152f39}.objective-tick.destroyed{border-color:#ffffff13}.objective-tick.destroyed b{opacity:.27}.objective-tick.destroyed:after{content:'';position:absolute;left:10%;right:10%;height:1px;top:50%;background:#98a6a66b;transform:rotate(-24deg)} .match-kills{font-size:23px;line-height:1;text-align:center;font-variant-numeric:tabular-nums}.match-kills.ally{color:var(--blue)}.match-kills.enemy{color:var(--red)}.match-timer{text-align:center;white-space:nowrap;font-size:12px;line-height:1;font-weight:800;letter-spacing:.3px;color:#e1ece7;font-variant-numeric:tabular-nums} @media(max-width:700px){.match-top{top:calc(10px + var(--safe-top));width:min(354px,calc(100% - 24px));height:34px;padding:0 10px;gap:6px;grid-template-columns:minmax(0,1fr) 24px 44px 24px minmax(0,1fr)}.objective-ticks{gap:3px}.objective-tick{height:12px}.objective-tick b{font-size:7px}.match-kills{font-size:20px}.match-timer{font-size:10px}.utility,.minimap-panel{top:calc(58px + var(--safe-top))}#announcement{top:calc(110px + var(--safe-top))}} @media(max-height:540px) and (orientation:landscape){.match-top{top:8px;width:340px;height:34px;padding:0 10px;gap:7px;grid-template-columns:minmax(0,1fr) 24px 44px 24px minmax(0,1fr)}.utility,.minimap-panel{top:10px}.match-kills{font-size:20px}.match-timer{font-size:10px}} @media(max-width:740px) and (max-height:540px) and (orientation:landscape){.match-top{left:calc(50% - 47px);width:calc(100vw - 338px);gap:5px;padding:0 7px;grid-template-columns:minmax(0,1fr) 20px 40px 20px minmax(0,1fr)}.utility{gap:5px}} /* Settings are a live popover; no pause state or pause screen. */ #settings-panel{position:absolute;z-index:50;right:calc(18px + env(safe-area-inset-right,0px));top:calc(62px + var(--safe-top));width:min(260px,calc(100vw - 24px));padding:12px;border:1px solid #c5dfd93d;border-radius:15px;background:linear-gradient(145deg,#29434ff5,#162d39fa);box-shadow:0 12px 40px #071c2a80;pointer-events:auto}#settings-panel header{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;padding-left:4px}#settings-panel header strong{font-size:13px;font-weight:850;color:#edf3e5}#settings-close{display:grid;place-items:center;width:30px;height:30px;border:1px solid #c7e3db24;border-radius:8px;background:#ffffff08;color:#bbd2d6;font-size:23px;line-height:1}.setting-row{width:100%;min-height:46px;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #aecdc922;border-radius:9px;background:#ffffff06;text-align:left}.setting-row+.setting-row{margin-top:8px}.setting-row:hover{background:#ffffff10}.setting-row svg{width:19px;height:19px;fill:none;stroke:#bad5d6;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.setting-row span{flex:1;font-size:11px;font-weight:700}.setting-row b{font-size:8px;letter-spacing:.5px;color:#8da9b1;background:#0c2535;padding:5px 7px;border-radius:5px}.setting-row[aria-pressed=true] b{color:#a3eee5;background:#4adcc91a} /* Smaller twin-stick ultimate: tap to auto-target, drag and release to aim. */ #special{--ultimate-size:72px;--ultimate-knob:34px;width:var(--ultimate-size);height:var(--ultimate-size);padding:0;border-radius:50%;border:1px solid #e2c88880;background:#453e284f;box-shadow:inset 0 0 0 5px #ffe29a0c,0 4px 18px #132d3940;transform:none;translate:none;touch-action:none}#special:after{inset:8px;border-color:#eacb7e44}#special .stick-knob{position:absolute;width:var(--ultimate-knob);height:var(--ultimate-knob);left:calc((100% - var(--ultimate-knob))/2);top:calc((100% - var(--ultimate-knob))/2);right:auto;bottom:auto;display:grid;place-items:center;border-radius:50%;border:1px solid #dbce9b88;background:#7f795d5c;box-shadow:0 3px 10px #0e273c55;pointer-events:none}#special .stick-knob svg{position:static;inset:auto;width:21px;height:21px;fill:#d3c99d;stroke:#50462e;stroke-width:1.5}#special-percent{position:absolute;left:0;right:0;bottom:3px;line-height:10px;font-size:8px;font-weight:850;color:#f7e4ae;text-shadow:0 1px 3px #182c33;pointer-events:none}#special.ready{border-color:#ffe598;background:#9c7d353d;box-shadow:inset 0 0 0 5px #ffda7212,0 0 18px #ffd66b25}#special.ready .stick-knob{background:linear-gradient(#ffe497,#dfae52);border-color:#fff2c7}#special.ready .stick-knob svg{fill:#fff6cf;stroke:#af8039}#special.aiming{transform:none;border-color:#fff2bc;box-shadow:0 0 0 4px #ffdc6925,0 0 24px #ffdb6940}#special.aiming .stick-knob{background:#ffdc87;border-color:#fff6c9} @media(max-width:700px){#settings-panel{right:12px;top:calc(112px + var(--safe-top));width:min(246px,calc(100vw - 24px))}#special{--ultimate-size:62px;--ultimate-knob:28px}#special .stick-knob svg{width:18px;height:18px}} @media(max-height:540px) and (orientation:landscape){#settings-panel{top:62px;right:10px;width:246px}#special{--ultimate-size:60px;--ultimate-knob:28px}} @media(max-width:740px) and (max-height:540px) and (orientation:landscape){.match-top{left:50%;width:min(340px,calc(100vw - 230px))}} @media(max-height:540px) and (orientation:landscape){#settings-panel{top:58px;padding:8px}#settings-panel header{margin-bottom:6px}#settings-close{width:24px;height:24px;font-size:21px}.setting-row{min-height:44px;padding:9px}.setting-row+.setting-row{margin-top:6px}} /* Compact side-by-side scoreboard on every screen. */ .score-panel{width:min(980px,100%);padding:18px;border-radius:18px}.score-header{margin-bottom:14px}.score-header .eyebrow{display:none}.score-header h2{font-size:22px;margin:0}.score-meta{gap:12px}#score-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}.score-team{min-width:0;margin:0;border-radius:10px}.score-team-heading{padding:10px;gap:6px}.score-team-heading strong{font-size:9px;letter-spacing:1px}.score-team-heading span{font-size:8px;white-space:nowrap}.score-team-heading b{font-size:15px;margin-right:2px}.score-team-heading i{font-style:normal;color:inherit}.score-table th{padding:7px 4px;font-size:7px;letter-spacing:.5px}.score-table th:first-child{width:52%;padding-left:9px}.score-table th:nth-child(2){width:28%}.score-table th:nth-child(3),.score-table th:nth-child(4){width:10%}.score-table td{padding:8px 4px;font-size:11px}.score-table td:first-child{padding-left:9px}.score-identity{gap:7px;min-width:0}.score-details{min-width:0}.score-identity strong{font-size:11px;white-space:nowrap}.score-identity small.score-state-text{font-size:6px;letter-spacing:.5px;margin-top:3px;display:block}.score-avatar{width:28px;height:32px;border-radius:7px;overflow:visible;flex-shrink:0}.score-avatar>img{border-radius:6px}.score-live-dot{position:absolute;bottom:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:#a0efb3;border:2px solid #203d45}.score-respawn{position:absolute;left:-2px;right:-2px;bottom:-1px;border-radius:3px;background:#442e30f0;color:#ffd5b9;font-size:9px;text-align:center;line-height:13px}.score-kda{display:inline-flex;gap:3px;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}.score-kda b{font-weight:800}.score-kda i{font-style:normal;color:#7c9da7;font-size:9px}.score-level{min-width:20px;height:21px;font-size:10px}.score-table .build-slots{gap:3px;margin-top:5px}.score-table .build-slot{width:18px;height:18px}.score-table .build-slot img{width:12px;height:12px}.score-table .build-slot b{font-size:6px}.score-footer{margin-top:12px;font-size:7px} @media(max-width:700px){#scoreboard{padding:8px}.score-panel{padding:10px 8px;border-radius:13px}.score-header{margin-bottom:10px}.score-header h2{font-size:17px;max-width:none}.score-meta>span{font-size:10px}.score-meta button{width:30px;height:30px}.score-meta{gap:8px}#score-content{gap:6px}.score-team-heading{padding:8px 5px;gap:3px}.score-team-heading strong{font-size:7px;letter-spacing:.4px}.score-team-heading span{font-size:6px}.score-team-heading b{font-size:12px}.score-table th{font-size:6px;padding:6px 1px;letter-spacing:0}.score-table th:first-child{width:54%;padding-left:5px}.score-table th:nth-child(2){width:26%}.score-table td{padding:9px 1px;font-size:9px}.score-table td:first-child{padding-left:5px}.score-identity{gap:4px}.score-identity strong{font-size:8px}.score-identity em,.score-identity small.score-state-text{display:none}.score-avatar{width:16px;height:23px;border-radius:4px}.score-avatar>img{border-radius:3px}.score-live-dot{width:6px;height:6px;border-width:1px;right:-1px;bottom:-1px}.score-respawn{font-size:7px;line-height:11px;left:-1px;right:-1px}.score-kda{font-size:9px;gap:1px}.score-kda i{font-size:7px}.score-level{min-width:15px;height:18px;font-size:8px;border-radius:4px}.score-table .build-slots{gap:1px;margin-top:4px}.score-table .build-slot{width:11px;height:13px;border-radius:3px}.score-table .build-slot img{width:8px;height:8px}.score-table .build-slot b{font-size:5px;padding:0 1px;right:-1px;bottom:-2px}.score-footer{font-size:6px;margin-top:10px;gap:6px}.score-footer span{white-space:nowrap}} @media(max-height:540px) and (orientation:landscape){.score-panel{padding:12px 14px}.score-header{margin-bottom:10px}.score-team{margin-top:0}.score-team-heading{padding:7px 9px}.score-table td{padding:6px 4px}.score-table .build-slot{width:16px;height:16px}.score-table .build-slot img{width:11px;height:11px}.score-avatar{width:25px;height:28px}.score-footer{margin-top:9px}} @media(max-width:360px){#scoreboard{padding:5px}.score-panel{padding:8px 5px}#score-content{gap:4px}.score-team-heading strong{font-size:6px}.score-team-heading span{font-size:5px}.score-table th:first-child{width:54%;padding-left:3px}.score-table td:first-child{padding-left:3px}.score-identity{gap:2px}.score-avatar{width:14px;height:21px}.score-identity strong{font-size:7px}.score-kda{font-size:8px;gap:0}.score-table .build-slot{width:9px;height:12px}.score-table .build-slot img{width:7px;height:7px}.score-table .build-slots{gap:1px}.score-footer{font-size:5px}} /* Reserve icon geometry instead of letting flex layouts squeeze or clip SVGs. */ .utility>button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible;line-height:1;padding:8px}.utility>button svg,.recall-button svg,.setting-row svg,.ultimate-icon svg,#special .stick-knob svg{display:block;flex:none;overflow:visible}.flash-button{flex-shrink:0;min-width:48px;min-height:60px;padding:4px;overflow:visible}.flash-button svg{flex:none;overflow:visible;display:block}.flash-button span{flex:none;line-height:10px;white-space:nowrap}.flash-button kbd{flex:none;line-height:10px;padding:0 4px}.recall-button{flex-shrink:0}.recall-button>span{flex:none;line-height:1.2;white-space:nowrap}.score-meta button,#settings-close{display:grid;place-items:center;padding:0;line-height:1;overflow:visible}.ultimate-icon{overflow:visible}#special{overflow:visible}.touch-mode #flash{min-height:0} @media(min-width:701px){ body:not(.touch-mode) .player-dock{left:clamp(14px,1.5vw,28px);right:auto;transform:none;max-width:calc(100vw - clamp(170px,18vw,320px) - 60px);flex-wrap:wrap} body:not(.touch-mode) .minimap-panel{left:auto;top:auto;right:clamp(14px,1.5vw,28px);bottom:14px;width:clamp(170px,18vw,320px);max-height:calc(100dvh - 90px);padding:9px} body:not(.touch-mode) .map-heading{font-size:clamp(8px,.7vw,10px);margin-bottom:7px}body:not(.touch-mode) .map-legend{font-size:clamp(7px,.6vw,9px);margin-top:7px} body:not(.touch-mode) .score-panel{width:min(1440px,calc(100vw - 64px));padding:clamp(20px,2vw,32px)} body:not(.touch-mode) .score-header{margin-bottom:clamp(16px,1.5vw,24px)}body:not(.touch-mode) .score-header h2{font-size:clamp(24px,2vw,34px)} body:not(.touch-mode) #score-content{gap:clamp(12px,1.4vw,22px)}body:not(.touch-mode) .score-team-heading{padding:12px} body:not(.touch-mode) .score-team-heading strong{font-size:clamp(11px,1.1vw,16px)}body:not(.touch-mode) .score-team-heading span{font-size:clamp(10px,.9vw,13px)}body:not(.touch-mode) .score-team-heading b{font-size:clamp(18px,1.6vw,23px)} body:not(.touch-mode) .score-table th{font-size:clamp(9px,.8vw,12px);padding:9px 6px}body:not(.touch-mode) .score-table td{font-size:clamp(13px,1.1vw,17px);padding:clamp(9px,1vw,14px) 6px} body:not(.touch-mode) .score-identity{gap:9px}body:not(.touch-mode) .score-identity strong{font-size:clamp(13px,1.15vw,18px)}body:not(.touch-mode) .score-identity small.score-state-text{font-size:8px} body:not(.touch-mode) .score-avatar{width:clamp(34px,3vw,48px);height:clamp(38px,3.3vw,52px)}body:not(.touch-mode) .score-kda{font-size:clamp(14px,1.3vw,20px)}body:not(.touch-mode) .score-kda i{font-size:11px} body:not(.touch-mode) .score-level{min-width:26px;height:28px;font-size:14px}body:not(.touch-mode) .score-table .build-slot{width:clamp(20px,1.8vw,28px);height:clamp(20px,1.8vw,28px)}body:not(.touch-mode) .score-table .build-slot img{width:70%;height:70%}body:not(.touch-mode) .score-table .build-slot b{font-size:8px}body:not(.touch-mode) .score-footer{font-size:9px} } @media(min-width:701px){body:not(.touch-mode) .minimap-panel{width:min(clamp(170px,18vw,320px),calc(68dvh - 80px))}} /* Compact player HUD and lower touch upgrades, with Base in the action cluster. */ body:not(.touch-mode) #xp-status{width:190px} .touch-mode .player-dock{left:12px;bottom:calc(14px + var(--safe-bottom));width:128px;max-width:128px;flex-wrap:nowrap;gap:0} .touch-mode #xp-status{width:128px;flex:none;padding:5px;gap:5px}.touch-mode .player-portrait{width:24px;height:28px}.touch-mode .player-portrait b{width:17px;height:17px;font-size:7px;left:-3px;bottom:-3px}.touch-mode .player-name{gap:3px;margin-bottom:3px}.touch-mode .player-name strong{font-size:7px;white-space:nowrap}.touch-mode .player-name #hero-kda{font-size:7px;letter-spacing:0}.touch-mode .health-track{height:12px}.touch-mode .health-track>span{font-size:6px}.touch-mode #player-build .build-slots{gap:2px;margin-top:3px}.touch-mode #player-build .build-slot{width:12px;height:13px}.touch-mode #player-build .build-slot img{width:9px;height:9px}.touch-mode #player-build .build-slot b{font-size:5px}.touch-mode .xp-track{margin-top:3px;gap:3px}.touch-mode .xp-track>small{min-width:43px;font-size:5px} .touch-mode #mobile-base{position:fixed;left:auto;right:102px;bottom:calc(218px + var(--safe-bottom));z-index:4;width:56px;min-width:56px;height:56px;min-height:56px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px;gap:4px;background:linear-gradient(145deg,#345965ee,#18323fee);border-color:#7bdde577}.touch-mode #mobile-base svg{width:24px;height:24px}.touch-mode #mobile-base>span{font-size:8px;letter-spacing:.5px}.touch-mode #mobile-base kbd{display:none} .touch-mode #upgrade-picker{left:148px;right:132px;bottom:calc(14px + var(--safe-bottom));width:auto;max-width:112px;transform:none;padding:5px;border-radius:10px}.touch-mode #upgrade-points{font-size:6px;line-height:9px;letter-spacing:0;margin-bottom:4px;white-space:nowrap}.touch-mode #upgrade-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.touch-mode #upgrade-choices button{padding:3px;min-width:0;min-height:32px;height:32px;border-radius:6px}.touch-mode #upgrade-choices img{width:21px;height:21px}.touch-mode #upgrade-choices span,.touch-mode #upgrade-choices small{display:none} .touch-mode #recall-status{left:12px;bottom:calc(151px + var(--safe-bottom));width:140px;transform:none;padding:8px}.touch-mode #recall-status>span{font-size:6px;letter-spacing:.3px}.touch-mode #recall-status small{font-size:6px;line-height:1.4} @media(max-width:360px){.touch-mode .player-dock{left:8px;width:110px;max-width:110px}.touch-mode #xp-status{width:110px;padding:4px;gap:4px}.touch-mode .player-portrait{width:21px;height:25px}.touch-mode .player-name strong,.touch-mode .player-name #hero-kda{font-size:6px}.touch-mode #upgrade-picker{left:124px;right:132px;max-width:none;padding:4px}.touch-mode #upgrade-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.touch-mode #upgrade-choices button{min-height:30px;height:30px;padding:2px}.touch-mode #upgrade-choices img{width:17px;height:17px}.touch-mode #upgrade-points{font-size:5px}} @media(max-height:540px) and (orientation:landscape){.touch-mode .player-dock{left:10px;bottom:10px}.touch-mode #mobile-base{right:108px;bottom:calc(132px + var(--safe-bottom))}.touch-mode #upgrade-picker{left:148px;right:auto;bottom:10px;width:230px;max-width:calc(100vw - 410px);padding:5px}.touch-mode #upgrade-choices{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.touch-mode #upgrade-choices button{min-height:32px;height:32px}.touch-mode #recall-status{left:10px;bottom:100px;width:140px}} /* Dock the HUD to the screen edges and leave the playing field open. */ .utility{top:var(--safe-top);right:env(safe-area-inset-right,0px)} .utility #settings{width:44px;min-width:44px;height:44px;padding:10px;color:#effbf7} .utility #settings svg{width:24px;height:24px;fill:currentColor;stroke:none;overflow:visible} .minimap-panel,body:not(.touch-mode) .minimap-panel{left:env(safe-area-inset-left,0px);right:auto;top:var(--safe-top);bottom:auto;border-radius:0 0 12px 0;border-top:0;border-left:0} .match-top{top:var(--safe-top);border-top:0;border-radius:0 0 11px 11px} .player-dock,.touch-mode .player-dock,body:not(.touch-mode) .player-dock{left:env(safe-area-inset-left,0px);bottom:var(--safe-bottom);transform:none} .player-dock>div,.player-dock>.recall-button,.player-dock>.flash-button{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0} #upgrade-picker,.touch-mode #upgrade-picker{bottom:var(--safe-bottom);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0} .touch-mode #upgrade-picker{left:calc(136px + env(safe-area-inset-left,0px))} @media(min-width:701px){ body:not(.touch-mode) .match-top{width:min(410px,calc(100vw - 380px))} body:not(.touch-mode) #upgrade-picker{left:calc(462px + env(safe-area-inset-left,0px));right:env(safe-area-inset-right,0px);width:auto;max-width:360px;transform:none;padding:6px} body:not(.touch-mode) #upgrade-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px} body:not(.touch-mode) #upgrade-choices button{min-width:0;padding:5px 2px} body:not(.touch-mode) #upgrade-choices span{font-size:7px} body:not(.touch-mode) #upgrade-choices small{display:none} } @media(max-width:700px) and (orientation:portrait){ .match-top{left:112px;right:env(safe-area-inset-right,0px);width:auto;transform:none;gap:5px;padding:0 7px;grid-template-columns:minmax(0,1fr) 22px 40px 22px minmax(0,1fr)} .utility{top:calc(40px + var(--safe-top))} body:not(.touch-mode) #upgrade-picker{left:208px;right:0;max-width:360px;width:auto;transform:none} body:not(.touch-mode) #upgrade-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:360px){.touch-mode #upgrade-picker{left:calc(118px + env(safe-area-inset-left,0px))}} @media(max-height:540px) and (orientation:landscape){ .touch-mode #upgrade-picker{left:calc(136px + env(safe-area-inset-left,0px))} } /* A clear manual-aim state, with a quiet center for cancellation. */ #aim-stick.manual-aim,#special.manual-aim{border-color:#fff8db;background:#547c854d;box-shadow:inset 0 0 0 5px #fff5c511,0 0 15px #dbffff24} #aim-stick.manual-aim .stick-knob{border-color:#fff6d7;background:#a3e4ec77} #aim-stick.aim-cancel,#special.aim-cancel{border-color:#9db2b966;background:#20384533;box-shadow:none} #aim-stick.aim-cancel .stick-knob,#special.aim-cancel .stick-knob{opacity:.55} /* Fourth champion and Luma's second, shared-ammo aiming stick. */ #heal-stick{display:none;touch-action:none;padding:0;border-color:#a5ffce99;background:#3d92704d}#heal-stick .stick-knob{display:grid;place-items:center;background:#9dffcc4a;border-color:#ceffe6}#heal-stick svg{width:25px;height:25px;fill:none;stroke:#deffed;stroke-width:3;stroke-linecap:round;pointer-events:none}.heal-label{position:absolute;bottom:4px;left:0;right:0;font-size:8px;font-weight:850;color:#d4ffe8;pointer-events:none;text-shadow:0 1px 3px #102e25} .touch-mode.support-mode #heal-stick{display:block;width:88px;height:88px;right:calc(140px + var(--safe-right));bottom:calc(120px + var(--safe-bottom))}.touch-mode.support-mode #heal-stick .stick-knob{width:42px;height:42px;left:22px;top:22px}.touch-mode.support-mode #heal-stick:after{inset:9px}.touch-mode.support-mode #flash{bottom:calc(235px + var(--safe-bottom))}.touch-mode.support-mode #mobile-base{bottom:calc(300px + var(--safe-bottom))}.support-mode #aim-stick:before{content:'ATTACCO';position:absolute;bottom:4px;left:0;right:0;font-size:8px;font-weight:850;color:#effcfa;text-align:center;pointer-events:none}.touch-mode.support-mode #special.ready .stick-knob{background:linear-gradient(#beffe1,#69cfac)} #heal-stick.manual-aim{border-color:#e2ffef;background:#72cba066;box-shadow:inset 0 0 0 5px #beffd411,0 0 15px #bbffda33}#heal-stick.aim-cancel{border-color:#9db9ad66;background:#20382a33;box-shadow:none}#heal-stick.aim-cancel .stick-knob{opacity:.55} @media(max-height:540px) and (orientation:landscape){.touch-mode.support-mode #heal-stick{right:calc(202px + var(--safe-right));bottom:calc(14px + var(--safe-bottom));width:92px;height:92px}.touch-mode.support-mode #heal-stick .stick-knob{width:44px;height:44px;left:23px;top:23px}.touch-mode.support-mode #flash{bottom:calc(132px + var(--safe-bottom))}.touch-mode.support-mode #mobile-base{bottom:calc(132px + var(--safe-bottom))}.touch-mode.support-mode #upgrade-picker{max-width:calc(100vw - 440px)}} /* Base stays with the player's left dock, for every champion and orientation. */ .touch-mode .player-dock{width:176px;max-width:176px;gap:4px;align-items:stretch} .touch-mode #xp-status{order:0;width:128px} .touch-mode #mobile-base,.touch-mode.support-mode #mobile-base{position:static;order:0;left:auto;right:auto;bottom:auto;width:44px;min-width:44px;height:auto;min-height:56px;flex:0 0 44px;border-radius:10px 10px 0 0;padding:4px;gap:3px} .touch-mode #mobile-base svg{width:22px;height:22px} .touch-mode #upgrade-picker{left:calc(184px + env(safe-area-inset-left,0px));max-width:112px} .touch-mode #upgrade-choices{grid-template-columns:repeat(auto-fit,minmax(28px,1fr))} @media(max-width:360px){.touch-mode .player-dock{width:158px;max-width:158px}.touch-mode #xp-status{width:110px}.touch-mode #upgrade-picker{left:env(safe-area-inset-left,0px);right:auto;bottom:calc(72px + var(--safe-bottom));width:158px;max-width:158px}.touch-mode #upgrade-choices{grid-template-columns:repeat(5,minmax(0,1fr))}} @media(max-height:540px) and (orientation:landscape){.touch-mode #upgrade-picker{right:auto;width:230px;max-width:calc(100vw - 410px - env(safe-area-inset-left,0px))}.touch-mode.support-mode #upgrade-picker{max-width:calc(100vw - 490px - env(safe-area-inset-left,0px))}} @media(max-width:620px) and (max-height:540px) and (orientation:landscape){.touch-mode #upgrade-picker,.touch-mode.support-mode #upgrade-picker{left:env(safe-area-inset-left,0px);bottom:calc(72px + var(--safe-bottom));right:auto;width:176px;max-width:176px}.touch-mode #upgrade-choices{grid-template-columns:repeat(5,minmax(0,1fr))}} /* ---------- multiplayer ---------- */ .menu-corner{position:absolute;bottom:22px;left:28px;font-size:8px;font-weight:800;letter-spacing:2px;color:#d8e5e7a0} @media(max-width:700px){.menu-corner{font-size:6px;bottom:14px;left:20px}} @media(max-height:540px) and (orientation:landscape){.menu-corner{display:none}} #mp-pause{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:#0a1a22a8;backdrop-filter:blur(6px)} #mp-pause.hidden{display:none} #mp-pause p{min-height:20px} #mp-toast{position:fixed;z-index:90;bottom:calc(20px + var(--safe-bottom,0px));left:50%;transform:translateX(-50%);background:#1b3444f2;border:1px solid #bbd9e244;border-radius:11px;color:#e6f7fb;font-size:12px;padding:12px 20px;max-width:90vw;text-align:center;box-shadow:0 10px 40px #05121a88} #mp-toast.hidden{display:none} .arena-install{min-height:38px;margin-top:11px;padding:4px 1px;background:none;color:#b7e6d4;text-align:left;font-size:12px;font-weight:850;text-decoration:underline;text-underline-offset:4px} #install-help{max-height:calc(100% - 20px);overflow:auto;color:#e9f1ed} #install-help::backdrop{background:#081812b8;backdrop-filter:blur(4px)} #install-help h2{font-size:clamp(22px,5vw,34px)} #install-ios{margin:14px 0 18px;padding-inline-start:22px;text-align:left;color:#d4e9df;font-size:13px;line-height:1.45} #install-ios li+li{margin-top:6px} #solo-setup{ padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,env(safe-area-inset-left,0px)); } .solo-panel{ width:min(560px,100%);max-height:none;min-width:0;overflow:visible; display:grid;gap:12px;padding:clamp(10px,2.4vmin,22px); border-radius:16px;background:linear-gradient(145deg,#233f39,#132620); } #solo-title{margin:0;font-size:clamp(20px,4.5vmin,30px);letter-spacing:-.025em} .difficulty-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .difficulty-buttons button{ min-height:36px;padding:5px 12px;border:1px solid #76a2a2;border-radius:7px; background:#163437;color:#edf5f1;font-size:clamp(11px,1.65vw,14px);font-weight:750; } .difficulty-buttons button[aria-pressed=true]{background:#ffc66a;border-color:#ffc66a;color:#162728} .difficulty-buttons button:not(:disabled):hover{border-color:#ffdd99} .difficulty-buttons button:disabled:not([aria-pressed=true]){opacity:.5} .solo-teams{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(5px,2vw,12px); } .solo-team{ min-width:0;margin:0;padding:4px clamp(3px,1.2vw,8px) 7px;border:1px solid var(--team-color); border-radius:9px;background:#0d2323; } .solo-team.blue{--team-color:var(--blue)} .solo-team.red{--team-color:var(--red)} .solo-team legend{padding:0 5px;color:var(--team-color);font-size:12px;font-weight:850;text-align:left} .solo-lineup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2px,1vw,6px)} .solo-slot,.solo-choice{ display:grid;align-content:center;justify-items:center;gap:3px;min-width:0;padding:4px 1px; border:1px solid #91b9ab3b;border-radius:7px;background:#1a342d;color:#edf6ed; } .solo-slot-label,.solo-slot strong,.solo-choice span{ font-size:clamp(9px,2.75vw,12px);line-height:1.15;white-space:nowrap; } .solo-slot-label{color:var(--team-color);font-weight:750} .solo-slot img,.solo-choice img{ display:block;width:min(100%,clamp(38px,13vw,54px));aspect-ratio:1;border-radius:4px; object-fit:contain;background:radial-gradient(#456d60,#142c28); } .solo-slot:hover,.solo-choice:hover{border-color:#e2ecda} .solo-slot:focus-visible,.solo-choice:focus-visible{outline-offset:1px;z-index:1} .solo-slot[aria-pressed="true"],.solo-choice[aria-pressed="true"]{ border-color:#ffdc88;background:#5b492b;box-shadow:inset 0 0 0 1px #ffdc8890; } .solo-picker{min-width:0;text-align:left} #solo-picker-title{margin:0 0 4px;color:#ffecb9;font-size:12px;font-weight:800} #solo-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(3px,1vw,7px)} .solo-choice{font-weight:750} .solo-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px} .solo-actions button{min-height:44px;padding:6px 8px;letter-spacing:0} @media(max-height:470px) and (min-width:480px){ .solo-panel{ width:min(620px,100%);gap:7px 10px;padding:9px 12px;align-items:center; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); grid-template-areas:"title bots" "teams teams" "picker actions"; } #solo-title{grid-area:title;text-align:left} #solo-difficulty{grid-area:bots} .solo-teams{grid-area:teams} .solo-picker{grid-area:picker} .solo-actions{grid-area:actions;align-self:end} .solo-slot img,.solo-choice img{width:min(100%,11dvh,46px)} .solo-slot-label,.solo-slot strong,.solo-choice span{font-size:10px} } @media(max-height:430px) and (max-width:479px){ .solo-panel{gap:6px;padding:8px} .solo-slot img,.solo-choice img{width:min(100%,34px)} } @media(max-height:350px) and (max-width:479px){ .solo-slot img,.solo-choice img{width:min(100%,30px)} } #tutorial-guide{ position:absolute;z-index:2;top:calc(var(--safe-top) + 62px);right:calc(var(--safe-right) + 10px); width:min(218px,33vw);padding:8px 10px;color:#fff5dc;background:#142b24ed;border:1px solid #e9ca88; border-radius:6px;box-shadow:0 3px 12px #07181270; } #tutorial-instruction header{display:flex;justify-content:space-between;align-items:baseline;gap:6px} #tutorial-step{flex:none;font-size:9px;font-weight:800;color:#f8ce7c;font-variant-numeric:tabular-nums} #tutorial-title{font-size:13px;line-height:1.2} #tutorial-text{margin:4px 0 0;font-size:12px;line-height:1.3} .touch-mode[data-tutorial] #hud #flash:not([data-tutorial-cue]), .touch-mode[data-tutorial]:not([data-tutorial="recall"]) #hud #mobile-base{display:none} body:not(.touch-mode)[data-tutorial] #hud .tutorial-hud-bottom{ position:absolute;left:50%;bottom:calc(var(--hud-bottom) + 78px);transform:translateX(-50%); width:min(480px,calc(100% - 24px));display:flex;flex-direction:column-reverse;gap:10px;align-items:stretch; } body:not(.touch-mode)[data-tutorial] #hud :is(#tutorial-guide,#upgrade-picker){ position:relative;inset:auto;transform:none;width:100%;max-width:none; } body:not(.touch-mode)[data-tutorial] #tutorial-title{font-size:15px} body:not(.touch-mode)[data-tutorial] #tutorial-text{font-size:13px} @media(orientation:portrait){ #tutorial-guide{top:calc(var(--safe-top) + 89px);right:calc(var(--safe-right) + 6px);width:min(174px,43vw);padding:7px} } /* HUD dorato. Le proporzioni landscape seguono il mockup approvato. */ #app{ --hud-gold:#e9ca88; --hud-glass:#112521e8; --hud-wash:#0b211d35; } #hud{ --hud-map-width:clamp(145px,13vw,245px); --hud-player-width:190px; --hud-player-height:88px; --hud-dragon-buff-space:0px; --hud-base-size:50px; --hud-attack-size:clamp(76px,12.2vw,126px); --hud-small-size:clamp(45px,7vw,72px); --hud-inset:clamp(12px,2.45vw,25px); --hud-action-gap:clamp(9px,1.7vw,16px); --hud-right:calc(var(--safe-right) + var(--hud-inset)); --hud-bottom:calc(var(--safe-bottom) + var(--hud-inset)); } #hud .minimap-panel,#hud .match-top,#hud #xp-status,#hud #special-status, #hud .feed-row,#hud #upgrade-picker,#app .utility>button{ background:var(--hud-glass); border-color:var(--hud-gold); box-shadow:0 2px 8px #071a1533; } #hud .minimap-panel{ left:env(safe-area-inset-left,0px);top:var(--safe-top);right:auto;bottom:auto; width:var(--hud-map-width);padding:0;overflow:visible;border-radius:0 0 4px 0; } #hud #minimap{border:0;border-radius:0 0 3px 0} .spectating #arena{cursor:grab} .spectating #arena:active{cursor:grabbing} .spectating #minimap{pointer-events:auto;cursor:crosshair;touch-action:none} #respawn{ position:absolute;top:calc(100% + 4px);left:0;width:100%; display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 6px; background:#142620bd;border:1px solid #e9ca8890;border-radius:0 4px 4px 0; } #respawn>span{font-size:clamp(8px,1vw,10px);font-weight:750;color:#f3dfb6} #respawn>strong{font-size:clamp(14px,1.5vw,20px);line-height:1;color:#fff3d3;font-variant-numeric:tabular-nums} #hud .match-top{ top:var(--safe-top);left:50%;transform:translateX(-50%); width:min(460px,46vw);height:clamp(30px,3.6vw,42px);padding:0 10px; gap:clamp(4px,1vw,11px);border-radius:0 0 7px 7px; grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr); } #hud .match-kills{font-size:clamp(18px,2.45vw,26px);line-height:1;font-weight:900} #hud .match-timer{font-size:clamp(10px,1.2vw,14px);color:#fff7e5} #hud .objective-ticks{gap:clamp(3px,.7vw,9px)} #hud .objective-tick{ display:flex;align-items:center;gap:3px;height:auto;border:0; overflow:visible;background:none;box-shadow:none; } #hud .objective-tick b{position:static;display:block;flex:0 0 clamp(7px,1vw,13px);text-shadow:none} #hud .objective-tick b svg{width:100%;fill:#fff9e9} #hud .objective-health{position:relative;flex:1;min-width:0;height:clamp(5px,.86vw,10px);overflow:hidden;background:#07100ee8;border-radius:4px} #hud .objective-tick i{border-radius:inherit;background:#39dcea} #hud .enemy .objective-tick i{background:#f38378} #hud .objective-tick.destroyed:after{content:none} #app .utility{top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + 10px);gap:6px} #app .utility>button{width:42px;min-width:42px;height:42px;padding:8px;border-radius:6px} #app .utility>button svg{width:22px;height:22px} #app .utility .score-toggle>:is(span,kbd){display:none} #hud #match-feed{top:calc(var(--safe-top) + 62px);right:calc(var(--safe-right) + 10px)} #hud.dragon-buff-active{--hud-dragon-buff-space:36px} #dragon-damage [data-team="0"],#dragon-recap [data-team="0"]{--dragon-team:#5feaf7} #dragon-damage [data-team="1"],#dragon-recap [data-team="1"]{--dragon-team:#ff8876} #dragon-damage{ position:absolute;top:calc(100% + 3px);inset-inline:-1px; display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:5px; padding:2px 8px;border:1px solid var(--hud-gold);border-radius:5px;background:var(--hud-glass); } #dragon-damage-icon{display:block;width:20px;height:20px;border-radius:50%;background:#263c30} .dragon-damage-indicator{display:flex;align-items:center;gap:4px;white-space:nowrap} #dragon-damage-lead{color:var(--dragon-team,#fff9e9);font-size:11px;font-variant-numeric:tabular-nums} .dragon-damage-track{ position:relative;min-width:0;height:12px;overflow:hidden;border-radius:3px;background:#07100e; } .dragon-damage-track i{position:absolute;inset-block:0;left:0;width:0;background:var(--dragon-team)} .dragon-damage-track[data-team="0"] i{left:auto;right:0} #dragon-recap{ display:grid;gap:5px; padding:5px 7px;border:1px solid var(--hud-gold);border-radius:6px; background:var(--hud-glass);color:#fff1d4; } .dragon-recap-line{display:grid;grid-template-columns:22px auto;align-items:center;gap:6px;font-size:12px} .dragon-recap-line img{width:22px;height:22px;border-radius:3px;background:#344840} #dragon-team-reward{color:var(--dragon-team)} #dragon-team-reward i{justify-self:center;width:12px;height:12px;border-radius:3px;background:var(--dragon-team)} #dragon-buff{ position:absolute;left:0;bottom:calc(100% + 4px);width:100%;padding:3px 7px; border:1px solid #ebb97b;border-radius:0 5px 5px 0;background:var(--hud-glass);color:#ffe1a2; font-size:10px;line-height:11px;font-weight:850;font-variant-numeric:tabular-nums;pointer-events:none; } #dragon-buff small{display:block;color:#fff0c9;font-size:8px;line-height:10px;white-space:nowrap} #hud .feed-row{border-radius:6px;border-left-color:#68e0e7} #hud .feed-row.enemy{border-left-color:#f28d82} #hud .player-dock{ left:env(safe-area-inset-left,0px);bottom:var(--safe-bottom); width:auto;max-width:none;flex-wrap:nowrap;transform:none;align-items:center;gap:7px; } #hud #xp-status{ position:relative;display:grid;grid-template-columns:auto minmax(0,1fr); flex:none;width:var(--hud-player-width);min-height:var(--hud-player-height);padding:7px;gap:5px 7px; border-width:1px 1px 0 0;border-radius:0 7px 0 0; } #hud .player-portrait{width:clamp(26px,4.3vw,42px);height:auto;aspect-ratio:1;border-radius:50%} #hud .player-portrait img{border-radius:inherit} #hud .player-name strong{font-size:clamp(8px,1.25vw,12px);text-transform:uppercase} #hud .player-name #hero-kda{font-size:clamp(8px,1.05vw,10px);color:#fff1d7} #hud .health-track{height:clamp(10px,1.18vw,14px);border-radius:8px} #hud #health-fill{background:#2acbdc;border-radius:8px} #hud .xp-track b{background:#49d8ea} #hud #player-build{ grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px; min-width:0;padding:0;border:0;border-radius:4px;background:none;color:#f7eaca;pointer-events:auto; } #hud #player-build:focus-visible{outline:1px solid var(--hud-gold);outline-offset:2px} #hud #player-build .build-slot{ justify-content:flex-start;gap:3px;width:auto;height:17px;min-width:0;padding:0 3px; border-color:#e9ca882a;border-radius:3px;background:#fff8e308;opacity:1; font-size:clamp(8px,1.15vw,10px);font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap; } #hud #player-build .build-slot img{flex:none;width:10px;height:10px} #hud #player-build .build-slot>span{min-width:0;overflow:hidden;text-overflow:ellipsis} #hud #player-build .build-slot:not(.chosen) img{opacity:.65} #hud #player-build .build-slot.chosen{background:#ebc67a18;border-color:#ebc67a66} #hud #player-build .build-slot b{top:-4px;left:0;bottom:auto;right:auto;font-size:6px} .score-table .build-slots{flex-wrap:wrap} #hud #player-stat-panel{ position:absolute;z-index:6;left:0;bottom:calc(100% + 6px + var(--hud-dragon-buff-space));width:min(310px,calc(100vw - 18px)); padding:8px 10px;max-height:calc(100dvh - 112px - var(--hud-dragon-buff-space));overflow:auto;overscroll-behavior:contain; border:1px solid var(--hud-gold);border-radius:6px;background:#112521f7;color:#fff0cf; box-shadow:0 4px 14px #071a1555;pointer-events:auto;touch-action:pan-y;font-size:11px; } .touch-mode #hud #player-stat-panel{touch-action:none} #player-stat-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px} #player-stat-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:inherit;font-size:20px} #player-stat-values{display:grid;gap:5px;margin:0} #player-stat-values>div{display:grid;grid-template-columns:64px 1fr;gap:6px;padding-top:4px;border-top:1px solid #e9ca8828} #player-stat-values dt{font-weight:850} #player-stat-values dd{margin:0;color:#d9e8db;font-variant-numeric:tabular-nums} #player-stat-values small{display:block;margin-top:1px;color:#ffe29c;font-size:10px} #hud #special-status{border-radius:6px} #hud .ultimate-info strong{color:#fff1cc} #hud :is(#mobile-base,#flash,#aim-stick,#special,#heal-stick,.ultimate-icon){ border:1px solid var(--hud-gold);border-radius:50%;background:var(--hud-wash); box-shadow:0 2px 7px #091f1945;color:#fff6e0;translate:none;overflow:visible; } #hud :is(#mobile-base,#flash,#special).ready{background:var(--hud-wash)} #hud #mobile-base{ position:relative;flex:0 0 var(--hud-base-size); width:var(--hud-base-size);min-width:var(--hud-base-size); height:var(--hud-base-size);min-height:var(--hud-base-size);gap:2px; } #hud #mobile-base>svg:not(.action-meter){width:23px;height:23px;stroke-width:2} #hud #mobile-base>span,#hud #flash-time{font-size:9px;letter-spacing:.35px;text-shadow:0 1px 3px #0a1d16} #hud #flash{width:54px;min-width:0;height:54px;min-height:0;align-self:center;gap:2px} #hud #flash>svg:not(.action-meter){width:25px;height:25px;fill:#fbd16c} #hud #flash:disabled,#hud #mobile-base:disabled{opacity:1} #hud #flash:disabled>svg:not(.action-meter){opacity:.55} #hud .ultimate-icon{position:relative;flex-shrink:0} #hud .ultimate-icon>svg:not(.action-meter){fill:#fbd16c} #hud .stick:after,#hud .flash-button:after{content:none} #hud :is(#aim-stick,#special,#heal-stick) .stick-knob{ position:absolute;inset:22%;width:auto;height:auto;display:grid;place-items:center; background:none;border:0;box-shadow:none; } #hud #aim-stick .stick-knob svg{ width:100%;height:100%;fill:none;stroke:#fff9e6;stroke-width:3.2; stroke-linecap:round;filter:drop-shadow(0 1px 1px #0a1d17); } #hud #special .stick-knob svg{width:100%;height:100%;fill:#fbd16c;stroke:#533c2155;stroke-width:1.3} #hud #special .stick-knob,#hud #heal-stick .stick-knob{inset:20% 20% 27%} #hud :is(#aim-stick,#special,#heal-stick).manual-aim{background:#21463868;border-color:#fff2bc;box-shadow:none} #hud :is(#aim-stick,#special,#heal-stick).aim-cancel{background:var(--hud-wash);border-color:#dfd5b27c} #hud :is(#special-percent,.heal-label,.action-countdown){ position:absolute;left:0;right:0;bottom:5px;text-align:center;pointer-events:none; font-size:9px;line-height:10px;font-weight:850;color:#fff4dd;text-shadow:0 1px 3px #091c15; } #hud #aim-stick:before{content:none} #hud :is(#mobile-base,#flash,#aim-stick,#special,#heal-stick,.ultimate-icon)>svg.action-meter{ position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg); pointer-events:none;overflow:visible;fill:none;stroke:none; } #hud .action-meter circle{ fill:none;stroke:#ffe3a1;stroke-width:var(--ring-width,1px); vector-effect:non-scaling-stroke;stroke-dasharray:var(--ring-progress,0) 100; transition:stroke-dasharray 75ms linear,stroke-width 75ms linear; } @media(prefers-reduced-motion:reduce){#hud .action-meter circle{transition:none}} .touch-mode #hud{ --hud-map-width:clamp(78px,12vw,150px); --hud-player-width:clamp(126px,20vw,220px); --hud-base-size:clamp(44px,5.8vw,58px); } .touch-mode #hud #mobile-base>svg.action-meter{display:none} body:not(.touch-mode) #hud #upgrade-picker{ left:50%;right:auto;bottom:50px;transform:translateX(-50%); width:min(480px,calc(100% - 24px));max-width:none; border-bottom:1px solid var(--hud-gold);border-radius:6px; } .touch-mode #hud .match-top{width:min(460px,40.5vw)} .touch-mode #hud #aim-stick{ width:var(--hud-attack-size);height:var(--hud-attack-size);right:var(--hud-right);bottom:var(--hud-bottom); } .touch-mode #hud :is(#flash,#special,#heal-stick){width:var(--hud-small-size);height:var(--hud-small-size)} .touch-mode #hud #flash{ right:var(--hud-right);bottom:calc(var(--hud-bottom) + var(--hud-attack-size) + var(--hud-action-gap)); } .touch-mode #hud :is(#special,#heal-stick){ right:calc(var(--hud-right) + var(--hud-attack-size) + var(--hud-action-gap)); bottom:var(--hud-bottom); } .touch-mode #hud #heal-stick{bottom:calc(var(--hud-bottom) + var(--hud-small-size) + var(--hud-action-gap))} .touch-mode #hud #upgrade-picker{ left:calc(env(safe-area-inset-left,0px) + var(--hud-player-width) + var(--hud-base-size) + 14px); width:clamp(164px,24vw,225px);max-width:none;right:auto;border-radius:6px 6px 0 0; } #hud #upgrade-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px} #hud #upgrade-choices button{ position:relative;display:flex;min-width:0;height:auto;min-height:44px;gap:2px;padding:4px 3px; border-radius:4px;background:#ffffff0d;border-color:#e9ca883d;color:#fff1cd;text-align:center; } #hud #upgrade-choices button:hover,#hud #upgrade-choices button:focus-visible{background:#e9ca8826;border-color:var(--hud-gold)} #hud #upgrade-choices img{width:16px;height:16px} #hud #upgrade-choices span,#hud #upgrade-choices small{display:block;line-height:1.15;white-space:normal;overflow-wrap:anywhere} #hud #upgrade-choices span{font-size:9px} #hud #upgrade-choices small{font-size:9px;color:#f9dfa4;font-variant-numeric:tabular-nums} #hud #upgrade-choices kbd{position:absolute;top:3px;right:4px;color:#d7c292;font-size:8px} .touch-mode #hud #upgrade-choices{grid-template-columns:repeat(3,minmax(0,1fr))} @media(orientation:portrait){ #hud{--hud-map-width:clamp(80px,25vw,122px)} body:not(.touch-mode) #hud{ --hud-player-width:clamp(104px,38vw,190px); --hud-base-size:clamp(44px,12vw,50px); } body:not(.touch-mode) #hud .player-dock{gap:5px} body:not(.touch-mode) #hud #flash{width:var(--hud-base-size);height:var(--hud-base-size)} body:not(.touch-mode) #hud #special-status{width:clamp(82px,24vw,130px);padding:4px;gap:4px} body:not(.touch-mode) #hud .ultimate-icon{width:24px;height:24px} body:not(.touch-mode) #hud .ultimate-info small{font-size:6px;white-space:nowrap} .touch-mode #hud{ --hud-map-width:clamp(76px,24vw,122px); --hud-player-width:clamp(134px,40vw,176px); --hud-attack-size:clamp(80px,26vw,116px); --hud-small-size:clamp(44px,14vw,62px); --hud-inset:12px;--hud-action-gap:10px; } #hud .match-top,.touch-mode #hud .match-top{ left:calc(env(safe-area-inset-left,0px) + var(--hud-map-width) + 6px); right:var(--safe-right);width:auto;transform:none;padding:0 6px;gap:5px; } #app .utility{top:calc(var(--safe-top) + 38px);right:calc(var(--safe-right) + 6px)} #hud #match-feed{top:calc(var(--safe-top) + 88px)} #app:has(#dragon-damage:not([hidden])) .utility{top:calc(var(--safe-top) + 72px)} #app:has(#dragon-damage:not([hidden])) #match-feed{top:calc(var(--safe-top) + 122px)} .touch-mode #hud #special{ right:var(--hud-right);bottom:calc(var(--hud-bottom) + var(--hud-attack-size) + var(--hud-action-gap)); } .touch-mode #hud #flash{ right:calc(var(--hud-right) + var(--hud-small-size) + var(--hud-action-gap)); } .touch-mode #hud #heal-stick{ right:var(--hud-right); bottom:calc(var(--hud-bottom) + var(--hud-attack-size) + var(--hud-small-size) + 2 * var(--hud-action-gap)); } } @media(orientation:portrait),(max-width:650px){ .touch-mode #hud #upgrade-picker{ left:env(safe-area-inset-left,0px);bottom:calc(var(--safe-bottom) + var(--hud-player-height) + 4px + var(--hud-dragon-buff-space)); width:calc(var(--hud-player-width) + var(--hud-base-size) + 7px);border-bottom-width:1px;border-radius:0 6px 6px 0; } } @media(max-width:440px){ #hud #player-build .build-slot{gap:2px;padding-inline:2px} #hud #player-build .build-slot img{width:9px;height:9px} body:not(.touch-mode) #hud #upgrade-choices{grid-template-columns:repeat(3,minmax(0,1fr))} } #hud :is(#mobile-base,#flash)>kbd{display:none} #app [data-tutorial-cue]{outline:2px solid #ffe29b;outline-offset:2px} #app [data-tutorial-cue]::after{ position:absolute;z-index:5;bottom:calc(100% + 6px);left:50%;width:16px;height:23px; translate:-50% 0;background:#ffe29b;pointer-events:none;content:""; clip-path:polygon(34% 0,66% 0,66% 48%,100% 48%,50% 100%,0 48%,34% 48%); } #app #mobile-score[data-tutorial-cue]{position:relative} #app :is(#mobile-score,#special)[data-tutorial-cue]::after{ bottom:auto;top:50%;left:auto;right:calc(100% + 10px);translate:0 -50%;rotate:-90deg; } #app .minimap-panel[data-tutorial-cue]::after{ bottom:auto;top:50%;left:calc(100% + 10px);translate:0 -50%;rotate:90deg; } body:not(.touch-mode)[data-tutorial] #app :is(#mobile-base,#flash)>kbd, body:not(.touch-mode) #app #mobile-score[data-tutorial-cue]>kbd{ position:absolute;z-index:1;display:block;right:0;top:-8px;padding:2px 4px; border:1px solid #ffe29b;border-radius:3px;background:#142b24;color:#fff3d5;font-size:9px;line-height:1; } body:not(.touch-mode) #app #mobile-score[data-tutorial-cue]>kbd{top:auto;bottom:-7px} /* Landscape menu and multiplayer lobby. */ .arena-menu-open { --shell-bg:#0d272a; --shell-panel:#102f32; --shell-line:#3c696c; --shell-muted:#afccca; --shell-gold:#ffc66a; --shell-nav-height:clamp(46px,10.5dvh,78px); color:#edf5f1; touch-action:auto; } .arena-nav { position:absolute;z-index:23;inset:0 0 auto;display:grid; grid-template-columns:auto minmax(0,1fr) auto;align-items:center; min-height:calc(var(--shell-nav-height) + var(--safe-top)); padding:var(--safe-top) max(3vw,var(--safe-right)) 0 max(3vw,env(safe-area-inset-left)); background:#122f32;border-bottom:1px solid var(--shell-line); } .arena-wordmark{ display:block;width:clamp(112px,25vw,285px);height:calc(var(--shell-nav-height) - 10px); object-fit:contain;object-position:left center; } .arena-nav nav{display:flex;align-self:stretch;justify-content:center;padding:0 2vw} .arena-nav nav button,.arena-account{ padding:0 clamp(8px,2.4vw,32px);background:none;color:var(--shell-muted); font-size:clamp(11px,2vw,24px);font-weight:750;white-space:nowrap;touch-action:manipulation; } .arena-nav nav button{border-bottom:3px solid transparent;padding-top:3px} .arena-nav nav button[aria-current=page]{border-color:var(--shell-gold);background:#1d4446;color:#fff} .arena-nav nav button:active{translate:none} .arena-account{color:var(--shell-gold);padding:0;min-height:40px} .arena-menu-open #app .utility{ top:calc(var(--safe-top) + (var(--shell-nav-height) - 36px)/2);z-index:24; } .arena-menu-open #app .utility>button{width:36px;height:36px;min-width:36px} .arena-menu-open #settings-panel{top:calc(var(--shell-nav-height) + var(--safe-top) + 6px)} .arena-menu-open .arena-nav{padding-right:calc(var(--safe-right) + 52px)} .arena-menu-open #solo-setup{top:calc(var(--shell-nav-height) + var(--safe-top))} .arena-menu-open #solo-setup .menu-panel{max-height:100%} .arena-shell.screen{ top:calc(var(--shell-nav-height) + var(--safe-top));display:block;overflow:auto;touch-action:pan-y; padding:clamp(12px,3dvh,32px) max(3vw,var(--safe-right)) max(12px,var(--safe-bottom)) max(3vw,env(safe-area-inset-left)); background:radial-gradient(ellipse at 52% 0,#173c38,var(--shell-bg) 75%); } .arena-shell.screen::before{display:none} .shell-body{width:min(100%,1360px);margin-inline:auto;min-width:0} .shell-centered{min-height:100%;display:grid;place-items:center} .shell-panel{min-width:0;border:1px solid var(--shell-line);border-radius:12px;background:var(--shell-panel);padding:clamp(10px,2.2vw,22px)} .arena-shell h1,.arena-shell h2,.arena-shell p{margin:0} .arena-shell h1{font-size:clamp(24px,4.2vw,54px);line-height:1.05;letter-spacing:-.035em} .arena-shell h2{font-size:clamp(16px,2.8vw,30px);line-height:1.1} .arena-shell p,.arena-shell small{color:var(--shell-muted)} .shell-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:clamp(8px,1.8vw,22px)} .shell-heading,.shell-footer{display:flex;gap:12px;align-items:center;justify-content:space-between} .shell-action,.arena-shell select,.arena-shell input,#arena-profile input{ min-height:42px;padding:7px 11px;border:1px solid #76a2a2;border-radius:8px; background:#13383b;color:#eef8f4;font:inherit;touch-action:manipulation; } .shell-action{font-weight:750} .shell-action:hover{background:#235155} .shell-action.gold{border-color:#ffc66a;background:#ffc66a;color:#162728} .shell-action.gold:hover{background:#ffdb91} .shell-action:disabled{opacity:.45} .shell-link{padding:10px;background:none;color:var(--shell-muted);font-weight:700;touch-action:manipulation} .shell-link:hover{color:#fff} .arena-home{min-height:100%;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:6vw;align-items:center} .arena-home-main,.arena-home-extra{display:grid;gap:clamp(8px,2.4dvh,24px)} .arena-home-main{text-align:center} .arena-home-main h1{font-size:clamp(27px,5.6vw,74px)} .arena-home-main p{font-size:clamp(13px,2.3vw,25px)} .arena-home-main small{font-size:clamp(12px,1.7vw,18px)} #play-ranked{font-size:clamp(18px,3.7vw,42px);min-height:clamp(52px,15dvh,105px);margin-top:1dvh} .arena-home-extra .shell-action{display:grid;gap:5px;text-align:left;padding:clamp(7px,2dvh,20px) clamp(10px,2vw,22px)} .arena-home-extra strong{font-size:clamp(13px,2.5vw,28px)} .arena-home-extra small{font-weight:500} .arena-home-extra #install{justify-self:center;color:var(--shell-muted);font-size:11px} .queue-panel,.private-entry{width:min(100%,500px);display:grid;gap:12px;text-align:center} .queue-panel{justify-items:center} .queue-time{ display:grid;place-items:center;width:clamp(68px,18dvh,126px);aspect-ratio:1;margin:4px; border:4px solid #396567;border-top-color:var(--shell-gold);border-radius:50%; font-size:clamp(18px,4dvh,31px);font-variant-numeric:tabular-nums; } .draft-body,.private-lobby{display:grid;gap:clamp(8px,2dvh,18px)} #draft-time,#lobby-format{color:var(--shell-gold);font-variant-numeric:tabular-nums} .draft-allies,.private-team ul{padding:0;margin:12px 0 0;list-style:none;display:grid;gap:7px} .draft-allies li,.private-team li{ border:1px solid var(--shell-line);border-radius:8px;display:flex;align-items:center;gap:8px; padding:6px 9px;min-width:0;min-height:44px; } .draft-allies img,.draft-placeholder{width:32px;height:32px;object-fit:cover;border-radius:5px;flex:none} .draft-placeholder{display:grid;place-items:center;background:#224a4d;color:var(--shell-muted)} .draft-allies strong,.private-team li strong{margin-right:auto;overflow:hidden;text-overflow:ellipsis;min-width:0} .draft-allies small{white-space:nowrap} .draft-allies li.locked{border-color:#629783} .draft-choices{display:grid;align-content:space-between;gap:10px} .portrait-strip{ --portrait-size:clamp(50px,14dvh,98px); display:flex;gap:clamp(6px,1.2vw,15px);overflow-x:auto;overscroll-behavior-x:contain; touch-action:pan-x;max-width:100%;padding:4px;scrollbar-width:thin; } .portrait-card{ flex:0 0 var(--portrait-size);min-width:0;display:grid;justify-items:center;gap:4px;padding:0; background:transparent;font-weight:700;color:#edf5f1;touch-action:pan-x; } .portrait-card img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid #5a8586;border-radius:9px;background:#224548} .portrait-card[aria-pressed=true] img{border-color:var(--shell-gold);background:#3a4a3f} .portrait-card:disabled:not([aria-pressed=true]){opacity:.55} .draft-selection{display:flex;align-items:center;gap:7px;min-width:0} .draft-selection canvas{width:clamp(68px,15dvh,150px);height:auto;flex:none} .draft-choices .portrait-strip{--portrait-size:clamp(44px,7.1vw,88px);min-width:0} .draft-choices .shell-action{width:100%} .collection-body{display:grid;gap:clamp(8px,2dvh,18px)} .collection-content{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} .collection-preview{ display:grid;place-items:center;background:radial-gradient(ellipse at center,#356347,#173c35 50%,#102f32); } .collection-preview canvas{width:min(100%,48dvh,360px);height:auto;aspect-ratio:1} .skin-panel{display:grid;align-content:start;gap:8px} .skin-panel h1{font-size:clamp(17px,3.1vw,38px)} .skin-list{display:grid;gap:6px;overflow:auto;max-height:42dvh;touch-action:pan-y;padding:2px} .skin-choice{ display:flex;align-items:center;gap:10px;text-align:left;background:#122e31;border:1px solid var(--shell-line); color:#edf5f1;border-radius:8px;padding:4px 10px;min-height:42px;touch-action:pan-y;font-size:clamp(12px,1.7vw,20px); } .skin-choice[aria-pressed=true]{border-color:var(--shell-gold)} .skin-choice canvas{height:clamp(32px,9dvh,69px);width:auto;flex:none} .skin-choice small{display:block;margin-top:3px;color:#a0dd8c} #skin-status:empty{display:none} .league-card{display:grid;align-content:start;gap:clamp(8px,2dvh,18px)} .rank-summary{display:flex;align-items:center;gap:clamp(10px,2vw,24px);min-width:0} .rank-summary>div{flex:1;min-width:0} .rank-summary strong,.rank-summary small{display:block;margin-top:5px} .rank-summary strong{font-size:clamp(14px,2.4vw,26px);color:#d7eae7} .league-badge{ display:block;flex:none;aspect-ratio:1;width:clamp(48px,9vw,128px); background:center/contain no-repeat; filter:drop-shadow(0 5px 4px #071a1baa); } .league-badge[data-league="placement"]{ background:linear-gradient(145deg,#92aab3,#203e46); clip-path:polygon(50% 4%,91% 20%,82% 70%,50% 96%,18% 70%,9% 20%); display:grid;place-items:center; } .league-badge[data-league="placement"]::after{content:"◇";color:#e5eff0;font-size:clamp(11px,3.5vw,35px)} .arena-account .league-badge[data-league="placement"]::after{font-size:clamp(9px,1.5vw,18px)} .league-tiers{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(4px,1vw,10px);border-top:1px solid var(--shell-line);padding-top:9px; } .league-tiers button{ display:grid;justify-items:center;gap:3px;min-width:0;min-height:44px; padding:3px 2px 5px;border:1px solid transparent;border-radius:8px; background:transparent;color:#edf5f1;font-size:clamp(10px,1.5vw,16px); } .league-tiers button:hover{background:#1d4144} .league-tiers button[aria-pressed=true]{ border-color:var(--shell-gold);background:#1e4447;color:#ffdc99; } .league-tiers .league-badge{width:clamp(30px,5.4vw,80px)} .weekly-board .shell-heading{align-items:start;gap:8px} .weekly-league{ flex:none;border:1px solid var(--shell-line);border-radius:6px;padding:5px 9px; color:#ffe0a1;background:#17383b;font-size:clamp(10px,1.5vw,16px); } .arena-shell progress{width:100%;height:8px;accent-color:var(--shell-gold)} .weekly-board table{width:100%;border-collapse:collapse;margin-top:7px} .weekly-board th,.weekly-board td{padding:clamp(5px,1.6dvh,14px) 6px;text-align:left;border-bottom:1px solid var(--shell-line)} .weekly-board th{color:var(--shell-muted);font-weight:600} .weekly-board th:last-child,.weekly-board td:last-child{text-align:right;font-variant-numeric:tabular-nums} .weekly-board tr.current{color:var(--shell-gold);background:#224b4d} #weekly-status:not(:empty){margin-top:10px} .private-entry label{display:grid;gap:4px;text-align:left;color:var(--shell-muted)} .private-entry input,.profile-recovery input{min-width:0;width:100%} .private-entry .mp-join-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0} .private-lobby .shell-heading>div,.lobby-code{display:flex;gap:10px;align-items:center} .lobby-code span{color:var(--shell-muted)} #lobby-code{font-size:1.17em;letter-spacing:.1em} .private-teams{grid-template-columns:repeat(2,minmax(0,1fr))} .private-team{--team-color:#58b7f5;border-color:var(--team-color);padding:0;overflow:hidden} .private-team.red{--team-color:#f28385} .private-team h2{padding:10px;background:color-mix(in srgb,var(--team-color) 18%,var(--shell-panel))} .private-team ul{margin:0;padding:6px} .private-team li.vacant{border-style:dashed} .private-team li small,.private-team li span{color:var(--shell-muted)} .private-team .shell-action,.private-team select{min-height:36px;padding:4px 6px;font-size:clamp(10px,1.57vw,16px)} .private-team .slot-move{margin-left:auto;white-space:nowrap} .private-lobby .shell-footer{justify-content:flex-start;flex-wrap:wrap} .private-lobby .shell-footer label{display:flex;gap:6px;align-items:center} #lobby-start{margin-left:auto} .ranked-result-body{align-items:center;min-height:min(72dvh,530px)} .ranked-celebration{text-align:center;display:grid;justify-items:center;gap:8px} .ranked-celebration .league-badge{width:clamp(70px,16vw,180px)} #ranked-delta{font-size:clamp(24px,4vw,52px);color:var(--shell-gold)} .ranked-detail{display:grid;gap:10px} .ranked-detail dl{margin:0;border:1px solid var(--shell-line);border-radius:8px;padding:0 10px} .ranked-detail dl>div{display:flex;justify-content:space-between;padding:8px 0} .ranked-detail dl>div+div{border-top:1px solid var(--shell-line)} .ranked-detail dd{font-weight:800} .ranked-detail .shell-footer{justify-content:start;flex-wrap:wrap} #arena-profile{width:min(92vw,480px);color:#edf5f1} #arena-profile::backdrop{background:#041b1bcc} #arena-profile form,#arena-profile label{display:grid;gap:8px} #arena-profile input{user-select:text;-webkit-user-select:text} .profile-recovery{display:flex;gap:6px;margin-top:6px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @media(max-height:470px) and (orientation:landscape){ .arena-shell.screen{padding-top:8px} .arena-shell .shell-action,.arena-shell input,.arena-shell select{min-height:36px} .private-team h2{padding:6px 8px}.private-team li{min-height:38px;padding:3px 5px;gap:4px} .private-team li .shell-action,.private-team li select{min-height:31px} } @media(max-width:680px) and (orientation:landscape){ .arena-nav nav{padding-inline:4px} .arena-nav nav button{padding-inline:8px} .private-team li{flex-wrap:wrap} .draft-allies li{flex-wrap:wrap;gap:3px} } @media(orientation:portrait){ .arena-wordmark{width:clamp(90px,30vw,145px)} .arena-nav nav{padding:0 3px}.arena-nav nav button{padding-inline:5px} .arena-menu-open #app .utility{top:calc(var(--safe-top) + var(--shell-nav-height) + 5px)} .arena-menu-open .arena-nav{padding-right:max(3vw,var(--safe-right))} .arena-menu-open #settings-panel{top:calc(var(--shell-nav-height) + var(--safe-top) + 45px)} .shell-columns,.arena-home{grid-template-columns:1fr} .arena-home{align-content:center;gap:24px} .arena-home-extra{gap:8px} } .arena-account{display:flex;align-items:center;gap:clamp(4px,1vw,9px)} .arena-account .league-badge{width:clamp(19px,3.2vw,43px)} .private-team li > select{width:auto;min-width:0;flex-shrink:1} .private-team li strong{white-space:nowrap} .private-lobby .lobby-code #lobby-code{min-width:5ch;text-align:center;padding:8px;border-radius:6px;border:1px solid var(--shell-line)} .arena-shell #lobby-copy{min-height:36px;font-size:inherit} #collection-champions{justify-self:stretch} #menu.arena-shell{ background:linear-gradient(90deg,#0d272af3,#0d272ac9),url("assets/forest/perimeter.webp") center/cover; } .collection-preview{ background:radial-gradient(ellipse at center,#32674645,#102f32da),url("assets/forest/perimeter.webp") center/cover; } .collection-preview canvas{filter:drop-shadow(0 5px 5px #081f20aa)} #mp-name,#mp-code{user-select:text;-webkit-user-select:text} #menu.tutorial-required #play-tutorial{justify-self:center;color:var(--shell-gold);text-decoration:underline;text-underline-offset:4px} @media(max-height:470px) and (orientation:landscape){ #solo-difficulty{flex-wrap:nowrap;gap:4px} #solo-difficulty button{padding-inline:clamp(6px,1vw,12px)} .league-card .rank-summary .league-badge{width:clamp(44px,13dvh,96px)} .league-tiers .league-badge{width:clamp(28px,11dvh,66px)} }