/* ============================================================
   DealArena — THE ARENA homepage section (Package 2, June 2026)
   Mechanical port of design_handoff_arena_section/arena/styles.css:
   - :root tokens re-scoped onto .arena-scope (wrapper)
   - every rule prefixed .arena-scope; colliding classes renamed
     (.hero->.as-hero, .lead->.as-lead, .wrap->.as-wrap, .quest->.as-quest,
      .xpbar->.as-xpbar, .btn*->.as-btn*, .arena-bg->.as-bg,
      .hero-grid->.as-hero-grid, .op-pin.badge/.charm->.pin-badge/.pin-charm)
   - all 15 keyframes prefixed as-
   - backdrop fixed->absolute; drops/image-slot dead CSS removed
   Loaded by templates/marketing/home.html only (page-scoped).
   ============================================================ */

/* Port additions: the prototype used clickable <div>s; the Jinja partial ships
   real <button>s for keyboard a11y, so neutralize UA button chrome inside the
   section. [hidden] must win over any display set by component rules (the
   pre-rendered gear-detail panels and locker tab grids toggle via hidden). */
.arena-scope button {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
.arena-scope [hidden] { display: none !important; }

.arena-scope {
  /* grim stone */
  --bg:       #0a0805;
  --stone:    #14100a;
  --stone-2:  #1c160e;
  --stone-3:  #271e12;
  --stone-hi: #352714;

  /* parchment / ink */
  --parch:     #d6c5a0;
  --parch-mut: #9b8c6c;
  --ink:       #f3e8c8;

  /* metals */
  --gold:      #e7c372;
  --gold-lite: #f8e8b4;
  --gold-deep: #b18f3f;
  --gold-dark: #6c5220;
  --bronze:    #7c5c2e;

  /* forge / brand accent */
  --forge:   #ff5a1f;
  --forge-2: #ff8038;
  --ember:   #ffb347;

  /* rarity gems */
  --r-common:    #9aa0aa;
  --r-uncommon:  #54d06e;
  --r-rare:      #4aa3ff;
  --r-epic:      #b15cff;
  --r-legendary: #ff8a3d;

  /* tunables (set by tweaks) */
  --glow: 1;
  --accent: var(--forge);
  --font-head: "Grenze Gotisch";

  --f-epic:    var(--font-head), "Grenze Gotisch", "Cinzel", Georgia, serif; /* chunky game display */
  --f-display: "Cinzel", Georgia, serif;
  --f-ornate:  "Cinzel Decorative", "Cinzel", serif;
  --f-hud:     "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Spectral", Georgia, serif;

  --maxw: 1240px;

  /* ornate corner gem */
  --gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0 L13 6.5 L6.5 13 L0 6.5 Z' fill='%23f0d896' stroke='%236c5220' stroke-width='1.3'/%3E%3Cpath d='M6.5 2.6 L10.4 6.5 L6.5 10.4 L2.6 6.5 Z' fill='%23b8923f'/%3E%3C/svg%3E");
}

/* ============================================================
   ROOT — grim hall: vignette, stone grain, forge glow
   ============================================================ */
.arena-scope {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 128px) 0;
  color: var(--parch);
  font-family: var(--f-body);
  background:
    radial-gradient(58% 42% at 14% -4%, rgba(255,120,40,calc(.14*var(--glow))), transparent 60%),
    radial-gradient(58% 42% at 86% -4%, rgba(255,120,40,calc(.12*var(--glow))), transparent 60%),
    radial-gradient(130% 90% at 50% 122%, rgba(120,70,20,calc(.14*var(--glow))), transparent 56%),
    linear-gradient(180deg, #120d08, var(--bg) 60%);
  -webkit-font-smoothing: antialiased;
}
.arena-scope::before {           /* stone grain */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: overlay;
}
.arena-scope::after {            /* deep vignette */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  box-shadow: inset 0 0 260px 60px rgba(0,0,0,.78);
}
.arena-scope > * { position: relative; z-index: 1; }

/* ---------- world backdrop: "logged into the game" ---------- */
.arena-scope .as-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* ---------- blurred world scenes: castle / battle / mythic isles ----------
   Pure-CSS key-art that slowly cross-fades. Heavily blurred + low peak
   opacity so it reads as glowing atmosphere behind the UI — it accents and
   carves depth without ever competing with the content. */
.arena-scope .bg-scenes { position:absolute; inset:0; overflow:hidden; }
.arena-scope .bg-scene {
  position:absolute; inset:-6%; opacity:0;
  filter: blur(12px) saturate(1.2); will-change: opacity, transform;
  animation: as-sceneFade 42s ease-in-out infinite;
}
/* Continuous cross-fade: each scene fades in, holds, then its fade-out
   overlaps the next scene's fade-in — there is always one scene lit. */
@keyframes as-sceneFade {
  0%   { opacity:0;                                transform: scale(1.05) translateY(0); }
  7%   { opacity: calc(var(--peak,.8) * var(--glow)); }
  30%  { opacity: calc(var(--peak,.8) * var(--glow)); }
  40%  { opacity:0; }
  100% { opacity:0;                                transform: scale(1.14) translateY(-2.5%); }
}
.arena-scope .scene-keep { animation-delay:   0s;   --peak:.85; }
.arena-scope .scene-battle { animation-delay: -14s;   --peak:.9;  }
.arena-scope .scene-isles { animation-delay: -28s;   --peak:.82; }

/* a — CASTLE KEEP at dusk : warm sky, glowing horizon, dark battlements */
.arena-scope .scene-keep {
  background:
    radial-gradient(58% 30% at 50% 92%, rgba(255,168,72,.55), transparent 70%),
    linear-gradient(180deg, #160f08 0%, #2c1c0d 38%, #5e3414 66%, #a4561d 100%);
}
.arena-scope .scene-keep::before {           /* battlement / spire silhouette */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, #150d07, #070402 70%);
  clip-path: polygon(
    0% 100%, 0% 88%, 7% 88%, 7% 79%, 9% 79%, 9% 84%, 12% 84%, 12% 79%, 14% 79%, 14% 88%,
    20% 88%, 20% 66%, 22% 60%, 24% 66%, 24% 88%,
    29% 88%, 29% 82%, 43% 82%, 43% 56%, 46% 46%, 50% 38%, 54% 46%, 57% 56%, 57% 82%, 71% 82%, 71% 88%,
    76% 88%, 76% 66%, 78% 60%, 80% 66%, 80% 88%,
    86% 88%, 86% 79%, 88% 79%, 88% 84%, 91% 84%, 91% 79%, 93% 79%, 93% 88%,
    100% 88%, 100% 100%);
}
.arena-scope .scene-keep::after {            /* faint window-glow + banner flecks */
  content:""; position:absolute; inset:0; mix-blend-mode:screen;
  background:
    radial-gradient(3px 5px at 48% 64%, rgba(255,196,110,.9), transparent),
    radial-gradient(3px 5px at 51% 70%, rgba(255,196,110,.8), transparent),
    radial-gradient(3px 4px at 22% 76%, rgba(255,170,90,.7), transparent),
    radial-gradient(3px 4px at 78% 76%, rgba(255,170,90,.7), transparent);
}

/* b — BATTLEFIELD : ember sky, smoke, spear-line & troop ridge */
.arena-scope .scene-battle {
  background:
    radial-gradient(78% 64% at 50% 112%, #ff5d20, #8c2509 44%, #1c0c06 80%),
    linear-gradient(180deg, #0b0604 0%, transparent 46%);
}
.arena-scope .scene-battle::before {         /* rolling troop ridge */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, #160c07, #050202);
  clip-path: polygon(0 100%, 0 86%, 9% 80%, 17% 85%, 26% 78%, 35% 84%, 44% 79%,
    53% 85%, 62% 80%, 71% 86%, 80% 81%, 89% 86%, 100% 82%, 100% 100%);
}
.arena-scope .scene-battle::after {          /* drifting smoke plumes + raised spears */
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(93deg, transparent 0 26px, rgba(12,6,3,.6) 27px 29px) bottom/100% 42% no-repeat,
    radial-gradient(40% 52% at 26% 60%, rgba(60,38,24,.5), transparent 72%),
    radial-gradient(46% 56% at 72% 52%, rgba(50,30,20,.5), transparent 72%);
  mask: linear-gradient(180deg, transparent 30%, #000 64%);
}

/* c — MYTHIC ISLES : cool aurora sky, distant peaks, floating land */
.arena-scope .scene-isles {
  background:
    radial-gradient(40% 30% at 64% 20%, rgba(180,236,210,.5), transparent 70%),
    radial-gradient(60% 46% at 30% 90%, rgba(46,150,150,.5), transparent 74%),
    linear-gradient(180deg, #0a1830 0%, #143a52 46%, #1f6a72 80%, #5fb9ac 100%);
}
.arena-scope .scene-isles::before {          /* layered peaks + floating isle */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, #0c1c2a, #050b12);
  clip-path: polygon(0 100%, 0 74%, 12% 58%, 22% 70%, 33% 50%, 45% 68%, 57% 52%,
    68% 70%, 80% 56%, 90% 70%, 100% 60%, 100% 100%);
}
.arena-scope .scene-isles::after {           /* glowing moon + a drifting sky-isle */
  content:""; position:absolute; inset:0; mix-blend-mode:screen;
  background:
    radial-gradient(circle at 70% 22%, rgba(214,244,255,.85) 0 1.6%, rgba(140,210,230,.35) 2.2%, transparent 4%),
    radial-gradient(18% 5% at 34% 44%, rgba(20,40,46,.9), transparent 72%);
}

.arena-scope .bg-grade { position:absolute; inset:0;
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(255,130,50,calc(.13*var(--glow))), transparent 55%),
    /* keep text-zone legible without flattening the whole scene */
    linear-gradient(180deg, rgba(10,7,4,.34) 0%, rgba(10,7,4,.06) 28%, rgba(10,7,4,.66) 78%, var(--bg) 100%),
    radial-gradient(125% 95% at 50% 38%, transparent 42%, rgba(6,4,2,.5) 100%); }
.arena-scope .bg-rays { position:absolute; inset:-22% -12% auto -12%; height:92%; transform-origin:top center;
  background: repeating-linear-gradient(99deg, transparent 0 38px, rgba(255,212,150,.055) 40px 60px, transparent 62px 112px);
  filter: blur(24px); mix-blend-mode: screen; opacity:calc(.75*var(--glow)); animation: as-rayDrift 26s ease-in-out infinite alternate; }
.arena-scope .bg-fog { position:absolute; left:-30%; right:-30%; height:62%; filter: blur(36px); opacity:.55; }
.arena-scope .bg-fog.f1 { bottom:5%; background: radial-gradient(60% 100% at 30% 60%, rgba(125,92,60,.36), transparent 70%), radial-gradient(48% 100% at 76% 50%, rgba(82,72,96,.3), transparent 70%); animation: as-fogA 34s ease-in-out infinite alternate; }
.arena-scope .bg-fog.f2 { bottom:-6%; background: radial-gradient(55% 100% at 58% 60%, rgba(150,108,68,.32), transparent 70%); animation: as-fogB 46s ease-in-out infinite alternate; }
.arena-scope .bg-ridge { position:absolute; left:-2%; right:-2%; bottom:0; }
.arena-scope .bg-ridge.back { height:44%; background: linear-gradient(180deg, #16120c, #0a0805); opacity:.9;
  clip-path: polygon(0 64%, 8% 40%, 14% 52%, 22% 26%, 30% 46%, 38% 30%, 47% 50%, 55% 22%, 64% 48%, 72% 32%, 82% 52%, 90% 36%, 100% 58%, 100% 100%, 0 100%); }
.arena-scope .bg-ridge.front { height:30%; background: linear-gradient(180deg, #0c0a06, #060403);
  clip-path: polygon(0 70%, 10% 50%, 18% 66%, 28% 40%, 40% 64%, 50% 44%, 60% 66%, 70% 46%, 80% 64%, 90% 50%, 100% 70%, 100% 100%, 0 100%); }
@keyframes as-rayDrift { from{transform:translateX(-3%) rotate(-1deg)} to{transform:translateX(3%) rotate(1deg)} }
@keyframes as-fogA { from{transform:translateX(-9%)} to{transform:translateX(9%)} }
@keyframes as-fogB { from{transform:translateX(8%)} to{transform:translateX(-8%)} }

/* ---------- ambient: floating embers ---------- */
.arena-scope .embers { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.arena-scope .ember {
  position:absolute; bottom:-14px; border-radius:50%;
  background: var(--ember); box-shadow: 0 0 9px 1px var(--ember);
  opacity:0; animation: as-drift linear infinite;
}
@keyframes as-drift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity:0; }
  12%  { opacity: calc(.55*var(--glow)); }
  88%  { opacity: calc(.32*var(--glow)); }
  100% { transform: translateY(-106vh) translateX(26px) scale(.25); opacity:0; }
}

/* ---------- ambient: lurking beasts (eyes in the gloom) ---------- */
.arena-scope .beasts { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.arena-scope .beast-eyes {
  position:absolute; display:flex; gap: var(--eg, 16px);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ec,#ff7a2f) 80%, transparent));
  animation: as-blink var(--bk, 6s) ease-in-out infinite;
}
.arena-scope .beast-eyes i {
  width: var(--es, 9px); height: calc(var(--es,9px) * .62); border-radius:50%;
  background: radial-gradient(circle at 50% 40%, #fff6e0, var(--ec,#ff7a2f) 55%, #7a1f08);
  transform: rotate(var(--er, 0deg));
}
@keyframes as-blink {
  0%, 42%, 100% { opacity: var(--eo, .5); }
  45%, 47%      { opacity: 0; }
  49%, 92%      { opacity: var(--eo, .5); }
  94%, 96%      { opacity: 0; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.arena-scope .as-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.arena-scope section.arena-sec { padding: clamp(60px, 7.5vw, 116px) 0; }

/* ============================================================
   TYPE
   ============================================================ */
.arena-scope .kicker {
  font-family: var(--f-hud); font-weight:600;
  font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px; display:flex; align-items:center; gap:13px;
}
.arena-scope .kicker::before { content:""; height:1px; width:30px; background:linear-gradient(90deg, var(--gold-deep), transparent); }

.arena-scope .arena-h {
  font-family: var(--f-epic); font-weight: 700; line-height: 1.0;
  letter-spacing: .006em; margin: 0; text-wrap: balance;
  color: var(--ink);
  background: linear-gradient(178deg, #fff7e2 0%, #f3dfa3 42%, #caa14a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 15px rgba(0,0,0,.62));
}
.arena-scope h2.arena-h { font-size: clamp(36px, 4.6vw, 64px); }
.arena-scope h2.arena-h-hero { font-size: clamp(46px, 6.2vw, 92px); }

.arena-scope .as-lead {
  font-family: var(--f-body); font-size: clamp(16px,1.25vw,19px); line-height:1.64;
  color: var(--parch); max-width: 56ch; text-wrap: pretty;
}
.arena-scope .as-lead strong { color: var(--ink); font-weight: 700; }

/* ---------- buttons ---------- */
.arena-scope .as-btn {
  font-family: var(--f-hud); font-weight:700; font-size: 13.5px; letter-spacing:.14em;
  text-transform:uppercase; padding: 16px 30px; border-radius: 11px; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.arena-scope .as-btn-primary {
  color:#2a1205; border:1px solid #ffc089;
  background: linear-gradient(180deg, #ffa05a, var(--forge) 54%, #e0440f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(120,32,0,.55), 0 0 0 1px rgba(0,0,0,.5), 0 13px 28px rgba(255,90,31,calc(.5*var(--glow)));
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.arena-scope .as-btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(120,32,0,.55), 0 0 0 1px rgba(0,0,0,.5), 0 20px 44px rgba(255,90,31,calc(.66*var(--glow))); }
.arena-scope .as-btn-primary:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(120,32,0,.6), 0 0 0 1px rgba(0,0,0,.5), 0 6px 16px rgba(255,90,31,calc(.4*var(--glow))); }
.arena-scope .as-btn-ghost {
  color: var(--gold-lite); background: linear-gradient(180deg, var(--stone-hi), var(--stone));
  border:1px solid var(--gold-dark); box-shadow: inset 0 2px 0 rgba(231,195,114,.2), inset 0 -4px 0 rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.42);
}
.arena-scope .as-btn-ghost:hover { color: var(--gold-lite); border-color: var(--gold-deep); transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(231,195,114,.28), inset 0 -4px 0 rgba(0,0,0,.55), 0 0 22px -5px var(--gold-deep), 0 10px 24px rgba(0,0,0,.45); }
.arena-scope .as-btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }

/* ============================================================
   ORNATE PANEL  (gold-on-stone frame + corner gems)
   ============================================================ */
.arena-scope .panel {
  position: relative; border-radius: 14px; padding: 19px;
  background:
    linear-gradient(180deg, rgba(255,236,200,.04), transparent 24%),
    radial-gradient(130% 100% at 50% -10%, var(--stone-3), var(--stone) 72%);
  border: 1px solid transparent;
  box-shadow:
    0 26px 60px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(20,14,8,.92),
    inset 0 0 30px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(231,195,114,.18),
    inset 0 -4px 14px rgba(0,0,0,.5);
}
/* chunky metal rim drawn with a gradient border via mask */
.arena-scope .panel::before {
  content:""; position:absolute; inset:0; border-radius:14px; padding:3px; pointer-events:none;
  background: linear-gradient(150deg, #fcecb6 0%, #c9a24b 15%, #6c5220 40%, #2e220f 54%, #8a6d2f 76%, #f0d896 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.arena-scope .panel-glow { box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 46px -14px color-mix(in srgb, var(--accent) 72%, transparent), inset 0 0 0 1px rgba(20,14,8,.92), inset 0 0 30px rgba(0,0,0,.62), inset 0 2px 0 rgba(231,195,114,.18), inset 0 -4px 14px rgba(0,0,0,.5); }

/* corner gems */
.arena-scope .tick { position:absolute; width:13px; height:13px; z-index:4; background-image: var(--gem); background-size: contain; background-repeat:no-repeat; pointer-events:none; }
.arena-scope .tick.tl { top:5px;  left:5px; }
.arena-scope .tick.tr { top:5px;  right:5px; }
.arena-scope .tick.bl { bottom:5px; left:5px; }
.arena-scope .tick.br { bottom:5px; right:5px; }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.arena-scope .sec-head { max-width: 760px; margin-bottom: 46px; }
.arena-scope .sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.arena-scope .sec-head .arena-h { margin-bottom: 18px; }

/* ============================================================
   A · HERO / ENTER THE ARENA
   ============================================================ */
.arena-scope .as-hero { padding-top: clamp(40px,5vw,72px); }
.arena-scope .hero-portal-label {
  display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom: clamp(28px,4vw,52px);
  font-family: var(--f-ornate); font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  font-size: 12px; color: var(--gold);
}
.arena-scope .hero-portal-label .ln { height:1px; width: min(220px, 22vw); }
.arena-scope .hero-portal-label .ln:first-child { background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold)); }
.arena-scope .hero-portal-label .ln:last-child { background: linear-gradient(270deg, transparent, var(--gold-deep), var(--gold)); }

.arena-scope .as-hero-grid { display:grid; grid-template-columns: 1.06fr minmax(360px, .9fr); gap: clamp(30px,4.5vw,64px); align-items:center; }
.arena-scope .hero-copy .arena-h { margin-bottom: 22px; }
.arena-scope .hero-copy .as-lead { margin-bottom: 30px; }
.arena-scope .hero-cta { display:flex; gap:14px; flex-wrap:wrap; }

.arena-scope .hero-stats { display:flex; gap:34px; margin-top:42px; flex-wrap:wrap; }
.arena-scope .hero-stat .n { font-family: var(--f-display); font-weight:800; font-size:30px; color: var(--gold-lite); line-height:1; }
.arena-scope .hero-stat .n b { color: var(--forge); }
.arena-scope .hero-stat .l { font-family: var(--f-hud); font-size:12px; letter-spacing:.04em; color: var(--parch-mut); margin-top:6px; text-transform:uppercase; }

/* ---------- summoning pedestal (mascot stage) ---------- */
.arena-scope .char-stage {
  position: relative; width:100%; aspect-ratio: 4/5; display:grid; place-items:center;
  padding-bottom: 10px;
}
.arena-scope .char-ring {
  position:absolute; left:50%; top:46%; width: 118%; aspect-ratio:1; transform: translate(-50%,-50%);
  border-radius:50%; pointer-events:none; opacity:.5;
  background:
    repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(231,195,114,.5) 9deg 9.7deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 60.5%, #000 63%, transparent 64%);
          mask: radial-gradient(circle, transparent 60%, #000 60.5%, #000 63%, transparent 64%);
  animation: as-spin 64s linear infinite;
}
.arena-scope .char-ring::after {
  content:""; position:absolute; inset:7%; border-radius:50%;
  background: repeating-conic-gradient(from 0deg, transparent 0 5deg, rgba(255,140,60,.28) 5deg 5.4deg);
  -webkit-mask: radial-gradient(circle, transparent 67%, #000 67.5%, #000 69%, transparent 70%);
          mask: radial-gradient(circle, transparent 67%, #000 67.5%, #000 69%, transparent 70%);
  animation: as-spin 90s linear infinite reverse;
}
@keyframes as-spin { to { transform: rotate(360deg); } }

.arena-scope .char-slot {
  position: relative; width: 86%; aspect-ratio: 3/4; z-index:2;
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.22) 0 9px, transparent 9px 18px),
    radial-gradient(120% 80% at 50% 6%, #2c2114, #0e0904 78%);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 60px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 0 60px rgba(0,0,0,.7);
}
.arena-scope .char-slot::before {       /* gold metal rim (masked gradient border) */
  content:""; position:absolute; inset:0; border-radius:12px; padding:3px; pointer-events:none; z-index:4;
  background: linear-gradient(150deg,#ffd9a0,#ec9a3c 28%,#7a3d10 54%,#ec9a3c 78%,#ffd9a0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.arena-scope .char-slot::after {        /* glass sheen */
  content:""; position:absolute; inset:3px; border-radius:9px; pointer-events:none; z-index:3;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 22%);
}
.arena-scope .char-badge {
  position:absolute; top:14px; left:14px; z-index:4; white-space:nowrap;
  font-family: var(--f-hud); font-weight:700; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--r-legendary); background: rgba(8,5,3,.78); border:1px solid color-mix(in srgb,var(--r-legendary) 50%,transparent);
  padding:6px 11px; border-radius:6px; backdrop-filter: blur(3px);
}
.arena-scope .char-floor {
  position:absolute; left:14%; right:14%; bottom:1%; height:46px; z-index:1;
  background: radial-gradient(closest-side, rgba(255,120,40,calc(.6*var(--glow))), transparent);
  filter: blur(9px);
}

/* ---------- MMO player nameplate ---------- */
.arena-scope .nameplate {
  position:absolute; left:-14px; right:-14px; bottom:-22px; z-index:5; padding:15px 17px;
}
.arena-scope .nameplate .row1 { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.arena-scope .np-id { display:flex; align-items:center; gap:13px; min-width:0; }
.arena-scope .np-lvl {
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:11px;
  font-family: var(--f-display); font-weight:900; font-size:20px; color:#2a1205;
  background: radial-gradient(circle at 42% 34%, #ffe9b0, var(--gold) 58%, var(--gold-deep));
  border:1px solid #4a3410; box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.arena-scope .np-name { font-family: var(--f-display); font-weight:700; font-size:18px; letter-spacing:.05em; color: var(--ink); }
.arena-scope .np-sub { font-family: var(--f-hud); font-size:11.5px; letter-spacing:.04em; color: var(--parch-mut); margin-top:2px; }
.arena-scope .np-rank { font-family: var(--f-display); font-weight:700; font-size:14px; color: var(--r-rare); white-space:nowrap; }

.arena-scope .as-xpbar {
  margin-top:12px; height:11px; border-radius:6px; background: rgba(0,0,0,.55);
  border:1px solid var(--gold-dark); overflow:hidden; position:relative; box-shadow: inset 0 1px 4px rgba(0,0,0,.7);
}
.arena-scope .as-xpbar > i {
  position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--ember), var(--forge));
  box-shadow: 0 0 14px rgba(255,140,40,calc(.7*var(--glow))); transition: right 1.4s cubic-bezier(.2,.8,.2,1);
}
.arena-scope .xp-meta { display:flex; justify-content:space-between; margin-top:7px; font-family: var(--f-hud); font-size:10.5px; letter-spacing:.06em; color: var(--parch-mut); }

/* ============================================================
   B · PROGRESSION — rank ladder, quest log, leaderboard
   ============================================================ */
.arena-scope .rank-ladder { display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 26px; }
.arena-scope .rank-card {
  position:relative; text-align:center; padding: 20px 12px 16px; border-radius:11px;
  background: linear-gradient(180deg, color-mix(in srgb,var(--rc) 9%, var(--stone-2)), var(--stone));
  border:1px solid color-mix(in srgb,var(--rc) 32%, var(--gold-dark));
  box-shadow: inset 0 1px 0 rgba(231,195,114,.12), inset 0 0 18px rgba(0,0,0,.5);
}
/* tiered rank emblems — each tier adds more; legendary glows + animates */
.arena-scope .rank-emblem { position:relative; width:80px; height:86px; margin:0 auto 14px; display:grid; place-items:center; }
.arena-scope .rank-emblem > * { position:absolute; }
.arena-scope .re-aura { width:98px; height:98px; border-radius:50%; z-index:0; opacity:0; filter:blur(9px);
  background: radial-gradient(circle, color-mix(in srgb,var(--rc) 85%,transparent) 0%, transparent 64%); }
.arena-scope .re-points { width:80px; height:80px; z-index:1; opacity:0;
  background: conic-gradient(from 0deg, color-mix(in srgb,var(--rc) 65%,#000), color-mix(in srgb,var(--rc) 96%,#fff 35%), color-mix(in srgb,var(--rc) 60%,#000), color-mix(in srgb,var(--rc) 96%,#fff 35%), color-mix(in srgb,var(--rc) 65%,#000));
  clip-path: polygon(50% 0,61% 22%,86% 16%,76% 39%,99% 50%,76% 61%,86% 84%,61% 78%,50% 100%,39% 78%,14% 84%,24% 61%,1% 50%,24% 39%,14% 16%,39% 22%); }
.arena-scope .re-ring { width:86px; height:86px; border-radius:50%; z-index:2; opacity:0;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 7deg, transparent 7deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61% 71%, transparent 72%);
          mask: radial-gradient(circle, transparent 60%, #000 61% 71%, transparent 72%); }
.arena-scope .re-plate { position:relative; width:52px; height:58px; z-index:3; display:grid; place-items:center;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: linear-gradient(180deg, color-mix(in srgb,var(--rc) 82%,#fff 12%), color-mix(in srgb,var(--rc) 30%,#000));
  box-shadow: inset 0 0 14px rgba(0,0,0,.55); }
.arena-scope .re-plate b { font-family: var(--f-epic); font-weight:700; font-size:30px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.65); }
.arena-scope .re-plate::after { content:""; position:absolute; inset:0; clip-path:inherit; pointer-events:none; opacity:0;
  background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 46%); }
.arena-scope .re-spark { width:8px; height:8px; border-radius:50%; z-index:4; opacity:0; top:50%; left:50%; margin:-4px; transform-origin:4px 4px;
  background: radial-gradient(circle,#fff,var(--rc)); box-shadow:0 0 9px 2px var(--rc); }
/* tier reveals */
.arena-scope .rk1 .re-plate { filter: saturate(.82) brightness(.94); }
.arena-scope .rk2 .re-plate::after { opacity:.55; }
.arena-scope .rk2 .re-ring { opacity:.3; }
.arena-scope .rk3 .re-plate::after { opacity:.7; }
.arena-scope .rk3 .re-points { opacity:.5; }
.arena-scope .rk3 .re-aura { opacity:.4; }
.arena-scope .rk4 .re-plate::after { opacity:.78; }
.arena-scope .rk4 .re-points { opacity:.7; }
.arena-scope .rk4 .re-ring { opacity:.7; animation: as-spin 16s linear infinite; }
.arena-scope .rk4 .re-aura { opacity:.6; }
.arena-scope .rk5 .re-plate::after { opacity:.85; }
.arena-scope .rk5 .re-points { opacity:.85; animation: as-spin 28s linear infinite reverse; }
.arena-scope .rk5 .re-ring { opacity:.85; animation: as-spin 11s linear infinite; }
.arena-scope .rk5 .re-aura { opacity:.8; }
.arena-scope .rk5 .re-spark { opacity:1; animation: as-orbit 4.2s linear infinite; }
.arena-scope .rk6 .re-plate { animation: as-legendPulse 2.6s ease-in-out infinite; }
.arena-scope .rk6 .re-plate::after { opacity:.95; }
.arena-scope .rk6 .re-points { opacity:1; animation: as-spin 22s linear infinite reverse; }
.arena-scope .rk6 .re-ring { opacity:1; animation: as-spin 7s linear infinite; }
.arena-scope .rk6 .re-aura { opacity:1; animation: as-auraPulse 2.6s ease-in-out infinite; }
.arena-scope .rk6 .re-spark { opacity:1; animation: as-orbit 3.2s linear infinite; }
.arena-scope .rk6 .re-spark::before { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; transform: rotate(180deg) translateX(80px); box-shadow:0 0 9px 2px var(--rc); }
@keyframes as-orbit { from{transform: rotate(0deg) translateX(40px)} to{transform: rotate(360deg) translateX(40px)} }
@keyframes as-legendPulse { 0%,100%{filter: drop-shadow(0 0 5px var(--rc))} 50%{filter: drop-shadow(0 0 17px var(--rc))} }
@keyframes as-auraPulse { 0%,100%{opacity:.7; transform:scale(.9)} 50%{opacity:1; transform:scale(1.1)} }
.arena-scope .rank-name { font-family: var(--f-display); font-weight:700; font-size:15px; letter-spacing:.04em; color: var(--rc); }
.arena-scope .rank-tier { font-family: var(--f-hud); font-size:10px; letter-spacing:.1em; color: var(--parch-mut); margin-top:3px; text-transform:uppercase; }
.arena-scope .rank-xp { font-family: var(--f-body); font-size:12px; color: var(--parch-mut); margin-top:8px; }
.arena-scope .rank-xp b { font-family: var(--f-display); font-weight:700; color: var(--gold-lite); }
.arena-scope .rank-arrow { position:absolute; top:50%; right:-11px; transform:translateY(-50%); z-index:2; color: var(--gold-deep); font-size:20px; font-family: var(--f-display); }

.arena-scope .prog-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* quest log */
.arena-scope .questlog, .arena-scope .leaderboard { padding: 22px; }
.arena-scope .ql-head, .arena-scope .lb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.arena-scope .ql-title { font-family: var(--f-display); font-weight:700; font-size:17px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold); display:flex; align-items:center; gap:9px; white-space:nowrap; }
.arena-scope .ql-reset { font-family: var(--f-hud); font-size:11px; letter-spacing:.06em; color: var(--parch-mut); }
.arena-scope .as-quest {
  display:flex; align-items:center; gap:13px; padding:13px 13px; border-radius:9px; margin-bottom:8px; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border:1px solid rgba(108,82,32,.45); transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.arena-scope .as-quest:hover { border-color: var(--gold-deep); background: rgba(231,195,114,.05); transform: translateX(2px); }
.arena-scope .q-check {
  width:25px; height:25px; flex:none; border-radius:7px; display:grid; place-items:center; font-size:13px; font-weight:900;
  border:1.5px solid var(--gold-dark); color:#0c0905; background:transparent; transition: all .16s ease;
}
.arena-scope .as-quest.done { opacity:.62; }
.arena-scope .as-quest.done .q-check { background: var(--r-uncommon); border-color: var(--r-uncommon); }
.arena-scope .q-label { flex:1; font-family: var(--f-body); font-size:15px; color: var(--parch); }
.arena-scope .q-label small { display:block; font-family: var(--f-hud); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--parch-mut); margin-top:3px; }
.arena-scope .as-quest.done .q-label { color: var(--r-uncommon); }
.arena-scope .q-xp { font-family: var(--f-display); font-weight:700; font-size:13.5px; color: var(--gold-lite); white-space:nowrap; }
.arena-scope .q-xp.big { color: var(--forge); }
.arena-scope .ql-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.arena-scope .ql-foot .total { font-family: var(--f-body); font-size:12.5px; color: var(--parch-mut); }
.arena-scope .ql-foot .total b { font-family: var(--f-display); font-weight:900; font-size:16px; color: var(--gold-lite); }

/* leaderboard */
.arena-scope .lb-tag { font-family: var(--f-hud); font-size:11px; letter-spacing:.06em; color: var(--r-rare); }
.arena-scope .lb-row { display:grid; grid-template-columns: 38px 1fr auto; align-items:center; gap:13px; padding:12px 12px; border-radius:9px; margin-bottom:6px; border:1px solid transparent; transition: background .16s ease; }
.arena-scope .lb-row:hover { background: rgba(255,255,255,.025); }
.arena-scope .lb-row.you { background: linear-gradient(90deg, rgba(255,90,31,.16), transparent); border-color: rgba(255,90,31,.4); }
.arena-scope .lb-pos { font-family: var(--f-display); font-weight:900; font-size:20px; color: var(--gold); text-align:center; }
.arena-scope .lb-row:first-of-type .lb-pos { color: var(--r-legendary); }
.arena-scope .lb-name { font-family: var(--f-display); font-weight:700; font-size:15px; letter-spacing:.04em; color: var(--ink); }
.arena-scope .lb-name small { font-family: var(--f-body); font-weight:400; font-size:11px; color: var(--parch-mut); margin-left:8px; }
.arena-scope .lb-sub { font-family: var(--f-hud); font-size:11px; letter-spacing:.04em; color: var(--parch-mut); margin-top:2px; }
.arena-scope .lb-xp { font-family: var(--f-display); font-weight:900; font-size:16px; color: var(--gold-lite); text-align:right; }
.arena-scope .lb-xp small { display:block; font-family: var(--f-hud); font-weight:400; font-size:9.5px; letter-spacing:.04em; color: var(--parch-mut); }
.arena-scope .you-chip { font-family: var(--f-hud); font-weight:700; font-size:9px; letter-spacing:.1em; background: var(--forge); color:#2a1205; padding:2px 7px; border-radius:4px; margin-left:8px; vertical-align:middle; }

/* ============================================================
   ARMORY — paper-doll character/equipment screen
   ============================================================ */
.arena-scope .armory-grid { display:grid; grid-template-columns: 1.42fr .58fr; gap: 22px; align-items:stretch; }

.arena-scope .paperdoll { position:relative; min-height: 660px; padding: 22px; overflow:hidden; }
.arena-scope .pd-floor-label { position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:3;
  font-family: var(--f-hud); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--parch-mut); }
.arena-scope .pd-figure {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 40%; height: 82%; border-radius:12px; overflow:hidden; z-index:1;
  border:1px solid var(--gold-dark);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}
.arena-scope .pd-figure-glow {
  position:absolute; left:50%; bottom:7%; width:42%; height:46px; transform:translateX(-50%); z-index:0;
  background: radial-gradient(closest-side, rgba(255,120,40,calc(.5*var(--glow))), transparent); filter: blur(9px);
}

/* gear nodes flank the figure */
.arena-scope .gear-node {
  position:absolute; z-index:4; display:flex; align-items:center; gap:11px; cursor:pointer; width: 40%;
  transition: transform .16s ease, filter .2s ease;
}
.arena-scope .gear-node.left { left: 14px;  flex-direction: row; text-align:left; }
.arena-scope .gear-node.right { right: 14px; flex-direction: row-reverse; text-align:right; }
.arena-scope .gear-node:hover { transform: scale(1.03); }
.arena-scope .gn-hex {
  width:54px; height:60px; flex:none; display:grid; place-items:center;
  font-size:24px; color: var(--ink);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb,var(--rar) 30%, var(--stone-3)), #0e0a06);
  box-shadow: inset 0 0 14px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb,var(--rar) 60%, transparent);
  position:relative; transition: box-shadow .2s ease;
}
.arena-scope .gear-node.equipped .gn-hex { box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 0 1.5px var(--rar), 0 0 20px -4px var(--rar); }
.arena-scope .gear-node.ship-next .gn-hex { filter: grayscale(.5) brightness(.8); border-style:dashed; }
.arena-scope .gear-node.incoming .gn-hex { animation: as-relicPulse 2.4s ease-in-out infinite; }
@keyframes as-relicPulse { 0%,100%{box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 0 1px var(--rar), 0 0 14px -4px var(--rar);} 50%{box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 0 1.5px var(--rar), 0 0 28px 0 var(--rar);} }
.arena-scope .gear-node.active .gn-hex { box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 0 2px var(--gold-lite), 0 0 26px -2px var(--ember); }
.arena-scope .gn-label { min-width:0; }
.arena-scope .gn-label .nm { font-family: var(--f-display); font-weight:700; font-size:14px; letter-spacing:.02em; color: var(--ink); line-height:1.15; }
.arena-scope .gn-label .sl { font-family: var(--f-hud); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--parch-mut); margin-top:3px; }
.arena-scope .gn-tag { display:inline-block; margin-top:5px; font-family: var(--f-hud); font-weight:700; font-size:8.5px; letter-spacing:.08em;
  color: var(--gold); padding:2px 7px; border-radius:4px; border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); background: rgba(231,195,114,.07); }
.arena-scope .gear-node.incoming .gn-tag { color: var(--forge); border-color: color-mix(in srgb,var(--forge) 45%,transparent); }

/* gear detail — WoW item tooltip */
.arena-scope .gear-detail { padding: 22px; display:flex; flex-direction:column; }
.arena-scope .gd-status { align-self:flex-start; font-family: var(--f-hud); font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:5px; margin-bottom:16px; }
.arena-scope .gd-status.equipped { color: var(--r-uncommon); border:1px solid color-mix(in srgb,var(--r-uncommon) 45%,transparent); background: rgba(84,208,110,.1); }
.arena-scope .gd-status.ship-next { color: var(--gold); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent); background: rgba(231,195,114,.07); }
.arena-scope .gd-status.incoming { color: var(--forge); border:1px solid color-mix(in srgb,var(--forge) 45%,transparent); background: rgba(255,90,31,.08); }
.arena-scope .gd-slot { font-family: var(--f-hud); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--rar2); margin-bottom:6px; }
.arena-scope .gd-name { font-family: var(--f-display); font-weight:900; font-size:27px; line-height:1.04; color: var(--ink); }
.arena-scope .gd-rarity { font-family: var(--f-display); font-size:13px; letter-spacing:.05em; color: var(--rar2); margin-top:7px; }
.arena-scope .gd-desc { font-family: var(--f-body); font-size:14px; line-height:1.56; color: var(--parch); margin:16px 0; }
.arena-scope .gd-stats { list-style:none; padding:0; margin:0 0 6px; display:grid; gap:9px; }
.arena-scope .gd-stats li { font-family: var(--f-body); font-size:13.5px; color: var(--ink); display:flex; align-items:flex-start; gap:9px; }
.arena-scope .gd-stats li::before { content:"◆"; color: var(--rar2); font-size:8px; margin-top:5px; }
.arena-scope .gd-set { margin-top:auto; padding-top:18px; border-top:1px solid var(--gold-dark); }
.arena-scope .gd-set-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.arena-scope .gd-set-row .t { font-family: var(--f-display); font-weight:700; font-size:12px; letter-spacing:.03em; color: var(--gold); white-space:nowrap; }
.arena-scope .gd-set-row .c { font-family: var(--f-display); font-weight:700; font-size:12.5px; color: var(--parch); white-space:nowrap; }
.arena-scope .gd-set-bar { height:10px; border-radius:6px; background:rgba(0,0,0,.5); border:1px solid var(--gold-dark); overflow:hidden; }
.arena-scope .gd-set-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--ember),var(--forge)); box-shadow:0 0 11px rgba(255,140,40,.6); transition: width .4s ease; }
.arena-scope .gd-set-note { font-family: var(--f-body); font-size:12.5px; line-height:1.56; color: var(--parch); margin-top:11px; }
.arena-scope .gd-set-note b { font-family: var(--f-display); color: var(--gold-lite); font-weight:700; }

/* ============================================================
   C · THE LOCKER — coming-soon cosmetics
   ============================================================ */
.arena-scope .soon-flag { display:flex; width:fit-content; align-items:center; gap:10px; margin-bottom:18px;
  font-family: var(--f-hud); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold);
  padding:7px 13px; border-radius:7px; border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); background: rgba(231,195,114,.07); }
.arena-scope .soon-flag .dot { width:7px; height:7px; border-radius:50%; background: var(--forge); box-shadow:0 0 10px var(--forge); animation: as-blinkdot 1.6s ease-in-out infinite; }
@keyframes as-blinkdot { 0%,100%{opacity:1} 50%{opacity:.3} }

.arena-scope .locker-grid { display:grid; grid-template-columns: .76fr 1.24fr; gap: 22px; align-items:start; }

/* operator preview */
.arena-scope .loadout { padding: 20px; }
.arena-scope .loadout-portrait { position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:1px solid var(--gold-dark); margin-bottom:15px;
  background: radial-gradient(120% 70% at 50% 110%, color-mix(in srgb,var(--eqColor,var(--forge)) 26%, transparent), transparent 60%), linear-gradient(180deg,#171009,#080603);
  box-shadow: inset 0 0 38px rgba(0,0,0,.6), 0 0 28px -10px var(--eqColor,var(--forge)); }
.arena-scope .lo-title-chip { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; text-align:center; font-family: var(--f-body); font-size:12.5px; color: var(--parch);
  background: rgba(8,5,3,.74); border:1px solid var(--gold-dark); border-radius:7px; padding:8px 10px; backdrop-filter: blur(3px); }
.arena-scope .lo-title-chip b { color: var(--eqColor, var(--gold-lite)); font-family: var(--f-display); }
.arena-scope .loadout-name { font-family: var(--f-display); font-weight:900; font-size:19px; letter-spacing:.04em; color: var(--ink); display:flex; align-items:center; gap:9px; }
.arena-scope .loadout-name .eqbadge { font-size:18px; }
.arena-scope .loadout-sub { font-family: var(--f-hud); font-size:11.5px; letter-spacing:.04em; color: var(--parch-mut); margin-top:4px; }
.arena-scope .equipped-list { margin-top:16px; display:grid; gap:2px; }
.arena-scope .eq-item { display:flex; align-items:center; justify-content:space-between; font-family: var(--f-body); font-size:12.5px; padding:9px 0; border-bottom:1px dashed var(--gold-dark); }
.arena-scope .eq-item .k { font-family: var(--f-hud); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--parch-mut); }
.arena-scope .eq-item .v { color: var(--ink); }

/* shop tabs */
.arena-scope .shop-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.arena-scope .shop-tab { font-family: var(--f-hud); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 15px; border-radius:8px; cursor:pointer;
  background: linear-gradient(180deg,var(--stone-3),var(--stone)); border:1px solid var(--gold-dark); color: var(--parch-mut); transition: all .15s ease; }
.arena-scope .shop-tab:hover { color: var(--gold-lite); border-color: var(--gold-deep); }
.arena-scope .shop-tab.active { background: linear-gradient(180deg,var(--forge-2),var(--forge)); color:#2a1205; border-color:#ffc089; box-shadow: 0 6px 16px rgba(255,90,31,calc(.4*var(--glow))); }
.arena-scope .shop-tab .ct { font-family: var(--f-body); font-size:10px; opacity:.7; margin-left:6px; }

/* item tooltip cards */
.arena-scope .item-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:13px; }
.arena-scope .item { position:relative; border-radius:11px; padding:16px; cursor:pointer; overflow:hidden;
  background: linear-gradient(180deg, color-mix(in srgb,var(--rar) 9%, var(--stone-2)), var(--stone));
  border:1px solid color-mix(in srgb,var(--rar) 38%, var(--gold-dark)); box-shadow: inset 0 0 18px rgba(0,0,0,.5);
  transition: transform .16s ease, box-shadow .2s ease; }
.arena-scope .item::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--rar); box-shadow: 0 0 10px var(--rar); }
.arena-scope .item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 22px -6px var(--rar); }
.arena-scope .item.equipped { box-shadow: 0 0 0 1px var(--rar), 0 0 20px -6px var(--rar); }
.arena-scope .item.locked { opacity:.6; }
.arena-scope .item-icon { width:52px; height:52px; border-radius:10px; display:grid; place-items:center; font-size:26px; margin-bottom:12px;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb,var(--rar) 34%,#000), #0c0905); border:1px solid color-mix(in srgb,var(--rar) 55%,transparent); }
.arena-scope .item-name { font-family: var(--f-display); font-weight:700; font-size:15px; color: var(--ink); }
.arena-scope .item-rarity { font-family: var(--f-hud); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--rar); margin-top:4px; }
.arena-scope .item-foot { display:flex; align-items:center; justify-content:space-between; margin-top:13px; gap:10px; }
.arena-scope .item-unlock { font-family: var(--f-body); font-size:11.5px; color: var(--parch-mut); }
.arena-scope .item-cta { font-family: var(--f-hud); font-weight:700; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:6px; border:1px solid var(--gold-dark); color: var(--parch); background: rgba(255,255,255,.03); white-space:nowrap; }
.arena-scope .item.equipped .item-cta { background: var(--rar); color:#0c0905; border-color:transparent; }
.arena-scope .item.premium .item-cta { background: linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#2a1205; border-color:transparent; }
.arena-scope .item.locked .item-cta { background:transparent; color: var(--parch-mut); }
.arena-scope .lock-glyph { position:absolute; top:14px; right:14px; font-size:13px; }

/* display swatches */
.arena-scope .disp-sw { width:100%; height:62px; border-radius:9px; margin-bottom:12px; position:relative; overflow:hidden; border:1px solid var(--gold-dark); }
.arena-scope .disp-obsidian { background: linear-gradient(135deg,#2a2117,#0c0905 70%); }
.arena-scope .disp-obsidian::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(231,195,114,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(231,195,114,.05) 1px,transparent 1px); background-size:14px 14px; }
.arena-scope .disp-ember { background: radial-gradient(120% 130% at 30% 120%, #ff5a1f, #7a1f08 45%, #160a06 80%); }
.arena-scope .disp-ember::after { content:""; position:absolute; inset:0; background: radial-gradient(2px 2px at 20% 60%,#ffd089,transparent),radial-gradient(2px 2px at 60% 40%,#ffb070,transparent),radial-gradient(1.5px 1.5px at 80% 70%,#ffd089,transparent); animation: as-emberShift 4s linear infinite; }
@keyframes as-emberShift { to { transform: translateY(-10px); opacity:.4; } }
.arena-scope .disp-aurora { background: linear-gradient(110deg,#3a1f5c,#1b3a6c,#1f6c5a,#3a1f5c); background-size:300% 100%; animation: as-auroraShift 8s ease infinite; }
@keyframes as-auroraShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.arena-scope .disp-holofoil { background: linear-gradient(115deg,#ff5a1f,#ffc53d,#46e6df,#b15cff,#ff5a1f); background-size:280% 100%; animation: as-auroraShift 6s linear infinite; }
.arena-scope .disp-holofoil::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); background-size:280% 100%; animation: as-auroraShift 6s linear infinite; mix-blend-mode: overlay; }

/* overlays */
.arena-scope .overlay-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:13px; }
.arena-scope .ov-card { position:relative; border-radius:11px; overflow:hidden; border:1px solid color-mix(in srgb,var(--rar) 40%,var(--gold-dark)); background: var(--stone); }
.arena-scope .ov-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--rar); z-index:3; box-shadow:0 0 10px var(--rar); }
.arena-scope .ov-slot { position:relative; width:100%; aspect-ratio:16/9; background: linear-gradient(135deg, color-mix(in srgb,var(--rar) 20%,#0c0905), #0c0905); }
.arena-scope .ov-meta { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.arena-scope .ov-meta .nm { font-family: var(--f-display); font-weight:700; font-size:14px; color: var(--ink); }
.arena-scope .ov-meta .pt { font-family: var(--f-hud); font-size:10px; letter-spacing:.04em; color: var(--r-rare); margin-top:3px; }
.arena-scope .ov-price { font-family: var(--f-display); font-weight:700; font-size:12px; color:#2a1205; background: linear-gradient(180deg,var(--gold),var(--gold-deep)); padding:5px 10px; border-radius:6px; white-space:nowrap; }

.arena-scope .overlay-note { margin-top:16px; padding:15px 18px; border-radius:10px; border:1px solid var(--gold-dark); background: rgba(231,195,114,.04);
  font-family: var(--f-body); font-size:13px; line-height:1.6; color: var(--parch); }
.arena-scope .overlay-note b { font-family: var(--f-display); color: var(--gold-lite); letter-spacing:.02em; }

/* ============================================================
   OUTRO
   ============================================================ */
.arena-scope .arena-outro { text-align:center; padding-bottom: clamp(80px,10vw,140px); }
.arena-scope .arena-outro .arena-h { margin:0 auto 16px; max-width: 18ch; }
.arena-scope .arena-outro .as-lead { margin:0 auto 30px; }
.arena-scope .arena-outro .hero-cta { justify-content:center; }

/* ============================================================
   CROSSOVER — game-studio collabs → trademarked displays
   ============================================================ */
.arena-scope .collab-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.arena-scope .collab-card { position:relative; border-radius:13px; overflow:hidden; cursor:default;
  border:1px solid color-mix(in srgb,var(--rc) 42%, var(--gold-dark)); background: var(--stone);
  box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.5); transition: transform .18s ease, box-shadow .25s ease; }
.arena-scope .collab-card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(0,0,0,.55), 0 0 34px -8px var(--rc); }
.arena-scope .collab-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:4; background:var(--rc); box-shadow:0 0 12px var(--rc); }
.arena-scope .collab-art { position:relative; aspect-ratio:4/5; overflow:hidden; background: linear-gradient(160deg, color-mix(in srgb,var(--rc) 22%,#0c0905), #0a0705); }

/* ---- copyright-safe blurred genre teasers (pure CSS, no real game art) ---- */
.arena-scope .collab-teaser { position:absolute; inset:-12%; z-index:0; filter: blur(11px) saturate(1.15); transform: scale(1.1); opacity:.92; animation: as-teaserDrift 16s ease-in-out infinite alternate; }
@keyframes as-teaserDrift { from{transform:scale(1.1) translateY(-2%)} to{transform:scale(1.16) translateY(2%)} }
/* Frostpeak Saga — glacial */
.arena-scope .collab-frost { background:
  radial-gradient(40% 55% at 50% 12%, #cfeaff, transparent 70%),
  radial-gradient(60% 50% at 30% 90%, #2f6fa8, transparent 75%),
  conic-gradient(from 200deg at 60% 40%, #0b2c4a, #185a86 40%, #0a2238 75%),
  linear-gradient(180deg, #0a1c2e, #050d16); }
.arena-scope .collab-frost::after { content:""; position:absolute; inset:0; background:
  linear-gradient(74deg, transparent 44%, rgba(207,234,255,.5) 50%, transparent 56%),
  repeating-linear-gradient(86deg, transparent 0 24px, rgba(180,220,255,.12) 26px 30px); mix-blend-mode:screen; }
/* Override // Protocol — cyberpunk neon */
.arena-scope .collab-neon { background:
  radial-gradient(50% 40% at 70% 22%, #ff3da6, transparent 70%),
  radial-gradient(46% 50% at 24% 78%, #00e6ff, transparent 72%),
  linear-gradient(160deg, #1a0830, #08040f 80%); }
.arena-scope .collab-neon::after { content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(90deg, transparent 0 16px, rgba(0,230,255,.16) 17px 18px),
  repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,61,166,.12) 23px 24px); mix-blend-mode:screen; }
/* Realm of Ash — dark-fantasy ember */
.arena-scope .collab-ash { background:
  radial-gradient(46% 50% at 50% 86%, #ff6a1f, transparent 70%),
  radial-gradient(38% 44% at 50% 30%, #b1320c, transparent 72%),
  conic-gradient(from 180deg at 50% 100%, #2a0d06, #5a1b08 30%, #20120a 70%),
  linear-gradient(180deg, #1a0d07, #060302); }
.arena-scope .collab-ash::after { content:""; position:absolute; inset:0; background:
  radial-gradient(2px 2px at 30% 60%, #ffd089, transparent), radial-gradient(2px 2px at 64% 48%, #ffb070, transparent),
  radial-gradient(1.5px 1.5px at 48% 72%, #ffd089, transparent); mix-blend-mode:screen; }
/* Aether Tactics — floating sky isles */
.arena-scope .collab-aether { background:
  radial-gradient(50% 40% at 50% 16%, #d8f0c0, transparent 70%),
  radial-gradient(56% 46% at 64% 84%, #3fa17a, transparent 74%),
  linear-gradient(180deg, #1d3a5e, #14506a 50%, #0c2238); }
.arena-scope .collab-aether::after { content:""; position:absolute; inset:0; background:
  radial-gradient(28% 14% at 40% 58%, rgba(20,40,30,.6), transparent 70%),
  radial-gradient(20% 10% at 66% 40%, rgba(20,40,30,.5), transparent 70%); }
.arena-scope .collab-teaser-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(0deg, rgba(8,5,3,.78), rgba(8,5,3,.32) 48%, rgba(8,5,3,.5)); }

/* coming-soon lockup */
.arena-scope .collab-soon-badge { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }
.arena-scope .collab-soon-badge .cs-lock { font-size:24px; filter: drop-shadow(0 0 8px rgba(0,0,0,.7)); opacity:.92; }
.arena-scope .collab-soon-badge .cs-text { font-family:var(--f-epic); font-weight:700; font-size:20px; letter-spacing:.04em; text-transform:uppercase; color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.8), 0 0 18px color-mix(in srgb,var(--rc) 60%,transparent); }
.arena-scope .collab-card:hover .collab-teaser { filter: blur(7px) saturate(1.2); opacity:1; }
.arena-scope .collab-logoplate { position:absolute; left:12px; right:12px; bottom:12px; z-index:3; text-align:center;
  font-family:var(--f-hud); font-weight:700; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: color-mix(in srgb,var(--rc) 75%,#fff 25%);
  padding:8px 10px; border-radius:7px; border:1px dashed color-mix(in srgb,var(--rc) 50%,transparent); background: rgba(8,5,3,.6); backdrop-filter: blur(4px); }
.arena-scope .collab-tm { position:absolute; top:11px; left:11px; z-index:3; white-space:nowrap; font-family:var(--f-hud); font-weight:700; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--rc);
  background: rgba(8,5,3,.72); border:1px solid color-mix(in srgb,var(--rc) 48%,transparent); padding:5px 9px; border-radius:6px; backdrop-filter: blur(3px); }
.arena-scope .collab-veil { position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(0deg, rgba(8,5,3,.55), transparent 55%); }

/* ---- hero orc (3:4 crop fills the niche) ---- */
.arena-scope .char-mascot { position:absolute; top:3px; left:3px; width:calc(100% - 6px); height:calc(100% - 6px);
  object-fit:cover; object-position:50% 50%; border-radius:9px; filter: saturate(1.04) contrast(1.03); }

/* ---- Armory: full-body operator stands on a pedestal ---- */
.arena-scope .pd-operator { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); z-index:2;
  height:84%; width:auto; max-width:88%; object-fit:contain; object-position:bottom;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,120,40,calc(.25*var(--glow)))); }
.arena-scope .pd-operator-pedestal { position:absolute; left:50%; bottom:6%; width:62%; height:30px; transform:translateX(-50%); z-index:1;
  border-radius:50%; background: radial-gradient(closest-side, rgba(255,120,40,calc(.55*var(--glow))), transparent 72%); filter: blur(6px); }

/* ============================================================
   LOCKER OPERATOR — self-designed CSS avatar (reacts to gear)
   ============================================================ */
.arena-scope .loadout-portrait { display:grid; place-items:center; }
.arena-scope .op-skin { position:absolute; inset:0; z-index:0; opacity:.92; }
.arena-scope .op-skin::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 120%, transparent 30%, rgba(6,4,2,.7) 100%); }
.arena-scope .op-ring { position:absolute; left:50%; top:46%; width:74%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:1; opacity:.5; pointer-events:none;
  background: repeating-conic-gradient(from 0deg, transparent 0 8deg, color-mix(in srgb,var(--eqColor,var(--forge)) 80%,transparent) 8deg 8.8deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%); mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%);
  animation: as-spin 60s linear infinite; }

.arena-scope .op-avatar { position:relative; z-index:2; width:62%; aspect-ratio:3/4; transform:translateY(4%); }
.arena-scope .op-avatar > * { position:absolute; }
/* pauldrons */
.arena-scope .op-pauldron { width:46%; height:30%; bottom:2%; border-radius:46% 46% 38% 38%;
  background: linear-gradient(160deg, #3a2c18, #14100a 70%); box-shadow: inset 0 2px 0 rgba(231,195,114,.25), inset 0 -6px 12px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5);
  border:1px solid #4a3410; }
.arena-scope .op-pauldron.l { left:-4%; transform: rotate(-8deg); }
.arena-scope .op-pauldron.r { right:-4%; transform: rotate(8deg); }
.arena-scope .op-pauldron::after { content:""; position:absolute; inset:26% 0 auto 0; height:14%; margin:auto; width:30%; left:0; right:0;
  border-radius:50%; background: color-mix(in srgb,var(--eqColor,var(--forge)) 75%,#000); box-shadow:0 0 8px var(--eqColor,var(--forge)); }
/* gorget / chest */
.arena-scope .op-gorget { left:50%; bottom:6%; width:42%; height:34%; transform:translateX(-50%);
  clip-path: polygon(50% 0,100% 22%,84% 100%,16% 100%,0 22%);
  background: linear-gradient(180deg,#2a2014,#100b06); border:1px solid #4a3410;
  box-shadow: inset 0 2px 0 rgba(231,195,114,.22), inset 0 -8px 16px rgba(0,0,0,.6); }
/* helm */
.arena-scope .op-helm { left:50%; top:9%; width:50%; height:60%; transform:translateX(-50%);
  border-radius:50% 50% 40% 40%;
  background: linear-gradient(160deg,#5a4a32 0%,#2c2114 42%,#15100a 100%);
  border:1px solid #6c5220; box-shadow: inset 0 3px 0 rgba(231,195,114,.3), inset -8px 0 16px rgba(0,0,0,.5), inset 8px 0 16px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.55); }
.arena-scope .op-helm::after { content:""; position:absolute; left:50%; top:18%; width:62%; height:70%; transform:translateX(-50%);
  border-radius:46% 46% 50% 50%; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.85)); }
/* visor glow (eyes) */
.arena-scope .op-visor { left:50%; top:34%; width:34%; height:9%; transform:translateX(-50%); z-index:3; border-radius:3px;
  background: linear-gradient(90deg, #5a1f06, var(--eqColor,var(--ember)) 50%, #5a1f06);
  box-shadow: 0 0 16px 2px var(--eqColor,var(--ember)); }
.arena-scope .op-visor::after { content:""; position:absolute; left:50%; top:0; bottom:-120%; width:14%; transform:translateX(-50%); background:inherit; box-shadow:0 0 10px var(--eqColor,var(--ember)); }
/* crown circlet — sits on the helm brow */
.arena-scope .op-crest { left:50%; top:5%; width:52%; height:13%; transform:translateX(-50%); z-index:4;
  background: linear-gradient(180deg, var(--gold-lite), var(--gold-deep));
  clip-path: polygon(0 100%, 0 55%, 14% 55%, 20% 8%, 26% 55%, 40% 55%, 50% 0, 60% 55%, 74% 55%, 80% 8%, 86% 55%, 100% 55%, 100% 100%);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.arena-scope .op-crest::after { content:""; position:absolute; left:50%; top:48%; width:8%; aspect-ratio:1; transform:translateX(-50%) rotate(45deg);
  background: color-mix(in srgb,var(--eqColor,var(--forge)) 80%,#000); box-shadow:0 0 6px var(--eqColor,var(--forge)); }
/* rune accents on chest */
.arena-scope .op-runes { left:50%; bottom:9%; width:30%; height:20%; transform:translateX(-50%); z-index:3; opacity:.9;
  background:
    radial-gradient(circle at 50% 20%, var(--eqColor,var(--forge)) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 60%, var(--eqColor,var(--forge)) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 60%, var(--eqColor,var(--forge)) 0 1.5px, transparent 2.5px);
  filter: drop-shadow(0 0 5px var(--eqColor,var(--forge))); }

/* equipped pins (badge + charm) */
.arena-scope .op-pin { position:absolute; z-index:4; width:38px; height:42px; display:grid; place-items:center; font-size:18px;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: radial-gradient(circle at 50% 32%, var(--stone-hi), #0c0905); border:none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb,var(--eqColor,var(--gold)) 65%,transparent), 0 4px 10px rgba(0,0,0,.5); }
.arena-scope .op-pin.pin-badge { top:12px; left:12px; }
.arena-scope .op-pin.pin-charm { top:12px; right:12px; }

/* ---- overlay teasers (self-generated, copyright-safe) ---- */
.arena-scope .ov-teaser { position:absolute; inset:-10%; z-index:0; filter:blur(9px) saturate(1.15); transform:scale(1.08); animation: as-teaserDrift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(46% 60% at 28% 26%, color-mix(in srgb,var(--rar) 70%, transparent), transparent 70%),
    radial-gradient(52% 60% at 78% 80%, color-mix(in srgb,var(--rar) 45%, #0c0905), transparent 72%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 22px, transparent 22px 46px),
    linear-gradient(160deg, color-mix(in srgb,var(--rar) 24%, #0c0905), #08060c); }
.arena-scope .ov-teaser-veil { position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(0deg, rgba(8,5,3,.6), transparent 60%); }
.arena-scope .ov-preview-tag { position:absolute; left:11px; bottom:10px; z-index:2; font-family:var(--f-hud); font-weight:700; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb,var(--rar) 78%,#fff 22%);
  background:rgba(8,5,3,.6); border:1px solid color-mix(in srgb,var(--rar) 45%,transparent); padding:4px 8px; border-radius:5px; backdrop-filter:blur(3px); }

/* ---- Outro ---- */
.arena-scope .arena-outro { position:relative; overflow:hidden; }
.arena-scope .arena-outro .as-wrap { position:relative; z-index:1; }
.arena-scope .collab-meta { padding:15px 16px 17px; }
.arena-scope .collab-studio { font-family:var(--f-hud); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--parch-mut); }
.arena-scope .collab-name { font-family:var(--f-epic); font-weight:700; font-size:22px; color:var(--ink); margin-top:5px; line-height:1.04; }
.arena-scope .collab-theme { font-family:var(--f-body); font-size:12.5px; line-height:1.5; color:var(--parch); margin-top:8px; }
.arena-scope .collab-soon { display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-family:var(--f-hud); font-weight:700; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--rc); }
.arena-scope .collab-soon .dot { width:6px; height:6px; border-radius:50%; background:var(--rc); box-shadow:0 0 8px var(--rc); animation: as-blinkdot 1.6s ease-in-out infinite; }
.arena-scope .collab-foot { margin-top:26px; padding:18px 22px; border-radius:11px; border:1px solid var(--gold-dark); background: rgba(231,195,114,.04);
  font-family: var(--f-body); font-size:13.5px; line-height:1.6; color: var(--parch); text-align:center; }
.arena-scope .collab-foot b { font-family: var(--f-display); color: var(--gold-lite); letter-spacing:.02em; }
.arena-scope .collab-logos { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.arena-scope .collab-logo { font-family:var(--f-hud); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--parch-mut); white-space:nowrap;
  padding:9px 16px; border-radius:8px; border:1px dashed var(--gold-dark); background: rgba(231,195,114,.03); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .arena-scope .as-hero-grid { grid-template-columns: 1fr; }
  .arena-scope .char-stage { max-width: 440px; margin: 8px auto 40px; }
  .arena-scope .rank-ladder { grid-template-columns: repeat(3, 1fr); }
  .arena-scope .rank-arrow { display:none; }
  .arena-scope .prog-grid { grid-template-columns: 1fr; }
  .arena-scope .armory-grid { grid-template-columns: 1fr; }
  .arena-scope .locker-grid { grid-template-columns: 1fr; }
  .arena-scope .collab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .arena-scope .rank-ladder { grid-template-columns: repeat(2, 1fr); }
  .arena-scope .item-grid, .arena-scope .overlay-grid { grid-template-columns: 1fr; }
  .arena-scope .collab-grid { grid-template-columns: 1fr; }
  .arena-scope .hero-stats { gap:24px; }
  .arena-scope .gear-node { width: 44%; }
  .arena-scope .gn-label .nm { font-size:12px; }
  .arena-scope .paperdoll { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-scope .ember, .arena-scope .beasts { display:none; }
  .arena-scope .char-ring { animation:none; }
  .arena-scope .bg-rays, .arena-scope .bg-fog { animation:none; }
  .arena-scope .bg-scene { animation:none; }
  .arena-scope .scene-keep { opacity: calc(.42 * var(--glow)); }
  .arena-scope .re-ring, .arena-scope .re-points, .arena-scope .re-spark, .arena-scope .re-aura, .arena-scope .rk6 .re-plate { animation:none !important; }
  .arena-scope .as-xpbar > i, .arena-scope .gd-set-bar > i { transition:none; }
  .arena-scope .gear-node.incoming .gn-hex, .arena-scope .disp-aurora, .arena-scope .disp-holofoil, .arena-scope .disp-holofoil::after, .arena-scope .disp-ember::after, .arena-scope .soon-flag .dot, .arena-scope .collab-soon .dot { animation:none; }
}

/* ============================================================
   PORT GLUE — production markup ships real <button> elements
   (prototype used divs) and pre-rendered [hidden] panels whose
   classes set display:grid/flex. marketing-shell.css already
   resets button font/border/background/color site-wide.
   ============================================================ */
.arena-scope button.gear-node { padding: 0; }
.arena-scope button.as-quest { width: 100%; text-align: left; }
.arena-scope button.item { text-align: left; }
/* arena-section.js toggles this while the section is scrolled out of view —
   the blurred scene layers + fog + embers are the page's main paint cost. */
.arena-scope.is-offscreen .as-bg *,
.arena-scope.is-offscreen .ember,
.arena-scope.is-offscreen .beast-eyes,
.arena-scope.is-offscreen .beast-eyes i { animation-play-state: paused !important; }
.arena-scope .gn-label .nm, .arena-scope .gn-label .sl,
.arena-scope .item-name, .arena-scope .item-rarity,
.arena-scope .disp-sw { display: block; }