/* Allstar Noobz V.20.39: The Arena game overlay. */
html.ag-open,html.ag-open body{overflow:hidden;overscroll-behavior:none}
.ag-overlay{position:fixed;inset:0;z-index:200;background:#08080a;color:var(--text,#f3f3f2);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none}
.ag-overlay[hidden]{display:none}
.ag-canvas{position:absolute;inset:0;display:block;cursor:crosshair;touch-action:none}

.ag-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));pointer-events:none}
.ag-hud-block{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border:1px solid var(--line,#303034);border-radius:6px;background:rgba(20,20,22,.82)}
.ag-hud-label{font:9px var(--mono,monospace);letter-spacing:1.4px;color:var(--muted,#a2a2a7)}
.ag-hud-block strong{font:22px/1 var(--display,Impact,sans-serif);letter-spacing:.5px}
.ag-hud-hp{flex:1;max-width:260px}
.ag-hp{height:10px;margin-top:5px;border-radius:3px;background:#2a2a30;overflow:hidden}
.ag-hp i{display:block;height:100%;width:100%;background:#f3f3f2;transition:width .15s ease}
.ag-hp[data-low="true"] i{background:#ff4d5e}
.ag-icon-button{pointer-events:auto;margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line,#303034);border-radius:6px;background:rgba(20,20,22,.82)}
.ag-icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.ag-banner{position:absolute;left:0;right:0;top:32%;text-align:center;font:clamp(40px,9vw,84px)/1 var(--display,Impact,sans-serif);letter-spacing:1px;color:#fff;opacity:0;pointer-events:none;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.ag-banner.is-on{animation:ag-banner 2s ease forwards}
.ag-banner-main,.ag-banner-sub{display:block}
.ag-banner-sub{margin-top:10px;font:700 clamp(13px,2.6vw,18px)/1.2 var(--mono,monospace);letter-spacing:2px;color:#5dffa0}
.ag-banner-sub:empty{display:none}
@media (max-width:480px){.ag-hud-kills{display:none}.ag-hud{gap:6px}.ag-hud-block{padding:6px 8px}}
@keyframes ag-banner{0%{opacity:0;transform:scale(1.25)}15%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(.96)}}

.ag-stick{position:absolute;left:0;top:0;width:112px;height:112px;margin:-56px 0 0 -56px;border:2px solid rgba(243,243,242,.28);border-radius:50%;background:rgba(243,243,242,.06);pointer-events:none}
.ag-stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(243,243,242,.55)}
.ag-stick-aim{border-color:rgba(255,246,194,.35)}
.ag-stick-aim i{background:rgba(255,246,194,.7)}
.ag-stick[hidden]{display:none}

.ag-screen{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:rgba(8,8,10,.72);backdrop-filter:blur(3px)}
.ag-screen[hidden]{display:none}
.ag-card{width:min(420px,100%);padding:24px;border:1px solid var(--line,#303034);border-radius:8px;background:var(--surface,#141416);text-align:center}
.ag-eyebrow{display:block;margin-bottom:8px;font:10px var(--mono,monospace);letter-spacing:1.6px;color:var(--muted,#a2a2a7);overflow-wrap:anywhere}
.ag-title{font:clamp(38px,9vw,56px)/1 var(--display,Impact,sans-serif);margin:0 0 12px}
.ag-text{margin:0 0 16px;color:var(--muted,#a2a2a7);font-size:14px;line-height:1.5}
.ag-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}
.ag-stats dt{grid-row:1;text-transform:uppercase;font:9px var(--mono,monospace);letter-spacing:1.3px;color:var(--muted,#a2a2a7)}
.ag-stats dd{grid-row:2;margin:0;font:22px/1.1 var(--display,Impact,sans-serif)}
.ag-actions{display:grid;gap:10px}
.ag-actions .button{width:100%;min-height:48px;justify-content:center}

.arena-play{margin-bottom:10px}
.arena-login .arena-play{width:100%}

/* V.20.47 */
.ag-hud-ammo[data-low="true"] strong{color:#ffd23f}
.ag-toggles{display:flex;gap:8px;justify-content:center;margin:0 0 14px}
.ag-toggle{min-height:36px;padding:6px 14px;border:1px solid var(--line,#303034);border-radius:6px;background:var(--raised,#1b1b1e);font:12px var(--mono,monospace);letter-spacing:.5px}
.ag-toggle[aria-pressed="false"]{color:var(--muted,#a2a2a7);text-decoration:line-through}
.ag-toggle[hidden]{display:none}
@media (max-width:480px){.ag-hud-hp{min-width:70px}}

/* V.20.49: now playing, music credit */
.ag-now{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,12px);max-width:calc(100% - 32px);padding:8px 14px;border:1px solid var(--line,#303034);border-radius:999px;background:rgba(20,20,22,.88);font:12px var(--mono,monospace);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease}
.ag-now.is-on{opacity:1;transform:translate(-50%,0)}
.ag-credit{margin:-6px 0 14px;font:10px var(--mono,monospace);letter-spacing:.4px;color:var(--dim,#75757d)}
.ag-credit:empty{display:none}

/* V.20.50: volume sliders */
.ag-sliders{display:grid;gap:10px;margin:0 0 16px;text-align:left}
.ag-sliders[hidden]{display:none}
.ag-slider{display:grid;grid-template-columns:52px 1fr 44px;align-items:center;gap:10px;font:12px var(--mono,monospace);letter-spacing:.4px;color:var(--muted,#a2a2a7)}
.ag-slider input{width:100%;height:32px;margin:0;accent-color:#f3f3f2;touch-action:pan-x;cursor:pointer}
.ag-slider output{text-align:right;color:var(--text,#f3f3f2)}
