/* A visible arena environment, lit surfaces and chromatic depth. */
:root {
  --bg: #101322; --panel: #1b2032; --panel-2: #272d43; --line: #3b435e;
  --muted: #b3bed5; --accent: #dcff47;
}
body.hub, body.hub.login-page, body.sandbox-page { isolation: isolate; background: #101322; }
body.hub::before, body.sandbox-page::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #10102130, #11132658 58%, #1012218c), url('/static/assets/arena-atmosphere.webp') center / cover;
}
body.hub::after, body.sandbox-page::after {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 8% 30%, #b2ff002e, transparent 37%), radial-gradient(ellipse at 96% 45%, #974aff4f, transparent 42%);
}
body.hub main, .login-topbar, .login-footer { position: relative; z-index: 1; }
body.hub .topbar {
  background: linear-gradient(100deg, #263122ed, #17182bed 36%, #25203bed);
  border-bottom-color: #7f82984f; box-shadow: 0 8px 30px #060b1740; backdrop-filter: blur(18px);
}
.arena-sidebar {
  background: linear-gradient(170deg, #1a2425ed, #161c30f0 46%, #23223cf0);
  border-right-color: #6b758244; backdrop-filter: blur(18px);
}
body.hub .brand-mark { filter: drop-shadow(0 0 10px #b8ff0077); }
.brand-wordmark b { text-shadow: 0 0 24px #caff4526; }
body.hub .nav a.active {
  border-color: #d7fa4570; background: linear-gradient(100deg, #caff452b, #96ac3310);
  box-shadow: inset 0 0 16px #d7fa4510, 0 0 18px #9bec0010;
}
body.hub .nav a.active::before { box-shadow: 0 0 14px #dcff47; }
body.hub .nav a:hover { background: #ffffff12; }
body.hub .wallet-pill { border-color: #d7fa4580; background: #303b1be6; box-shadow: 0 0 21px #b6fb001a; }
body.hub .wallet-coin { box-shadow: 0 0 12px #d7fa454a; }
body.hub .btn.primary {
  background: linear-gradient(110deg, #e9ff78, #c5fb2c); border-color: #edff9e;
  box-shadow: 0 5px 23px #c3fa0036, inset 0 1px #ffffffe0;
}
body.hub .btn.primary:hover { background: #ecff98; box-shadow: 0 7px 34px #c3fa0066, inset 0 1px #fff; }
body.hub .btn.primary:disabled { box-shadow: none; }
body.hub .btn.ghost { background: #1c243bd9; border-color: #788ba352; }
body.hub .btn.ghost:hover { background: #2d3650; border-color: #a4b9d6; }
body.hub .panel { background: linear-gradient(145deg, #353957e8, #172237f5 58%, #232944f0); border-color: #6a709959; box-shadow: 0 8px 28px #0607193d, inset 0 1px #d8e4ff0b; }
body.hub .empty { background: #152238c9; border-color: #8496b74d; }
body.hub .page-head h1, .screen-page-head h1 { text-shadow: 0 4px 20px #050a15, 0 0 32px #cadcff24; }
body.hub .page-head .sub, .screen-page-head p { color: #d1d9ea; text-shadow: 0 2px 8px #050a15; }
.eyebrow, .screen-eyebrow, .armory-eyebrow { color: #c3cce0; }
body.hub .section-title { text-shadow: 0 3px 14px #080d1e; }
.section-mark { filter: drop-shadow(0 0 7px #c8ff0075); }
body.hub .pill.live { background: #0e362de8; border-color: #79e6b06b; box-shadow: 0 0 14px #79e6b021; }
.sidebar-promo { border-color: #c7f34b75; background: linear-gradient(0deg, #253408f5, #18200b45 65%, #151b1233), url('/static/assets/operator-card.webp') 55% 30% / cover; box-shadow: 0 0 24px #b7ef0012; }
.sidebar-promo-kicker { font-size: 9px; }
.sidebar-promo:hover { box-shadow: 0 0 28px #c9ff0038; border-color: #d7fa45; }

/* The key art becomes a living stage rather than a dark rectangular banner. */
.arena-hero {
  isolation: isolate; min-height: 350px; background: #182619; border-color: #b0d7439e;
  box-shadow: 0 0 40px #a5ec001a, inset 0 0 28px #d7fa4512;
}
.arena-hero::before { content: ''; position: absolute; z-index: -2; inset: -3%; background: url('/static/assets/arena-hero.webp') 61% 37% / cover; }
.arena-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #192307e8, #10170882 42%, #16300708 73%), linear-gradient(0deg, #bbf70015, transparent 42%); }
.hero-copy { padding: 34px; }
.hero-tag { font-size: 10px; color: #ecff93; letter-spacing: .12em; }
.hero-tag i { box-shadow: 0 0 13px 3px #b9ff00a0; }
.hero-copy h2 { font-size: clamp(50px, 5vw, 78px); margin-top: 22px; }
.hero-copy h2 em { text-shadow: 0 0 32px #c8ff0052; }
.hero-copy p { color: #e2e8d1; font-size: 13px; }
.hero-edition { color: #e1edca; }
.collection-promo {
  background: radial-gradient(ellipse at 55% 30%, #b585ff5c, transparent 65%), linear-gradient(150deg, #392965, #26264deb 65%, #2f2046);
  border-color: #a581e9a6; box-shadow: 0 0 35px #8543ff25, inset 0 0 40px #b894ff0a;
}
.collection-promo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 45%, #b298ff14 45.2%, transparent 45.6%), linear-gradient(65deg, transparent 62%, #d5b7ff14 62.2%, transparent 62.6%);
}
.promo-eyebrow { color: #e8dcff; font-size: 9px; }
.promo-art::before { content: ''; position: absolute; inset: 28% 8% 3%; border-radius: 50%; background: radial-gradient(ellipse, #b784ff6b, transparent 66%); }
.promo-card { height: 185px; width: 133px; box-shadow: 0 18px 24px #05081585, 0 0 28px #b292ff2b; }
.promo-card-back { opacity: .95; border-color: #cbadff; }
.promo-card-front { border-color: #dcff85; box-shadow: 0 18px 24px #05081585, 0 0 25px #d7fa4542; }
.promo-bottom .eyebrow { color: #e0cdff; font-size: 9px; }
.promo-bottom h2 { font-size: 32px; text-shadow: 0 0 24px #d5bdff3b; }
.promo-arrow { color: #efe2ff; background: #a576ff33; border-color: #b99ae587; }
.arena-modes a { background: linear-gradient(125deg, #375137e6, #1c2a2de6); border-color: #a3d77466; box-shadow: inset 0 1px #e9ff9617; }
.arena-modes a:nth-child(2) { background: linear-gradient(125deg, #453561ec, #282941eb); border-color: #c695ff66; }
.arena-modes a:nth-child(3) { background: linear-gradient(125deg, #293f66ec, #1b2a45eb); border-color: #7daaff66; }
.arena-modes a:hover { background: #34475bea; border-color: #e0f6c4; }
.mode-icon { background: #b4ff0024; box-shadow: 0 0 18px #9fff0024; }
.arena-modes a:nth-child(2) .mode-icon { background: #ba83ff30; box-shadow: 0 0 18px #aa77ff30; }
.arena-modes a:nth-child(3) .mode-icon { background: #6ca2ff30; box-shadow: 0 0 18px #5d9dff24; }
.arena-modes small { color: #c5cee0; }
.lobby-page .me-profile { background: linear-gradient(100deg, #344325eb, #202d3af0 30%, #302b4ceb); border-color: #a0c37366; box-shadow: inset 3px 0 #d7fa45, 0 10px 28px #050b192f; }
.lobby-page .me-avatar { background: #b8f32d20; box-shadow: 0 0 22px #b6f60024; border-color: #c8ff0066; }
.lobby-page .me-tile { border-left-color: #a6b4d338; }
.me-queue, .lobby-page .me-panel { background: #19243de6; border-color: #8496b74d; }
.me-queue-summary:hover { background: #b8c8fa0a; }
.lobby-page .live-card { background: linear-gradient(145deg, #273b46ee, #1b213aee); border-color: #79e6b06e; box-shadow: 0 0 18px #59eab012; }
.lobby-page .live-empty { background: radial-gradient(ellipse at 50% 0, #569ffb29, transparent 80%), #172338e8; border-color: #80a8e158; }
.lobby-page .ch-card { background: linear-gradient(100deg, #425523b8, #222d39ef 65%); border-color: #b9e46d68; }
.lobby-page .ch-card::before { box-shadow: 0 0 13px #d7fa4585; }
.lobby-page .ch-card.mine { background: #212c41eb; }
.lobby-page .lb-table, .lobby-page .lobby-section[data-section="feed"] > .lobby-body { background: #1b253ded; border-color: #8390b152; box-shadow: 0 12px 30px #050b1933; }
.lobby-page .lb-head { background: #39415be6; }
.lobby-page .feed-item[data-tone="rare"] .feed-row { background: linear-gradient(110deg, color-mix(in srgb, var(--rc) 28%, #20253b), #202b43); }

/* Cards carry their rarity color beyond a one-pixel edge. */
.card.operator-card { background: linear-gradient(165deg, color-mix(in srgb, var(--rc) 19%, #1a2236), #1b2436 58%, color-mix(in srgb, var(--rc) 12%, #1b2035)); border-color: color-mix(in srgb, var(--rc) 62%, #374153); box-shadow: 0 12px 28px #04071750, 0 0 20px color-mix(in srgb, var(--rc) 12%, transparent); }
.card.operator-card:hover, .card.operator-card:focus-within { border-color: var(--rc); box-shadow: 0 18px 35px #05081485, 0 0 30px color-mix(in srgb, var(--rc) 32%, transparent); }
.operator-card .card-art::after { background: linear-gradient(180deg, #080a106b, transparent 40%, #1c2636 100%), linear-gradient(90deg, color-mix(in srgb, var(--rc) 20%, transparent), transparent 65%); }
.operator-card .card-art::before { filter: hue-rotate(var(--art-hue)) saturate(calc(var(--art-saturation) * 1.3)) brightness(1.14); }
.operator-card .bar { background: #ffffff1f; }
.operator-card .bar .fill { box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 45%, transparent); }
.operator-card .card-rating strong { text-shadow: 0 0 19px color-mix(in srgb, var(--rc) 38%, transparent); }
.operator-card .card-foot { border-top-color: color-mix(in srgb, var(--rc) 28%, #30394e); background: #121b2a42; }
.operator-card .btn.open-btn { background: linear-gradient(110deg, color-mix(in srgb, var(--rc) 29%, #19243a), color-mix(in srgb, var(--rc) 12%, #19243a)); border-color: color-mix(in srgb, var(--rc) 75%, #30394e); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 11%, transparent); }
.operator-card .btn.open-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--rc) 32%, #1a2336); }
.armory-intro { border-color: #b4df6285; box-shadow: 0 0 30px #b5ff0017; }
.armory-intro::before { opacity: 1; }
.armory-intro::after { background: linear-gradient(90deg, #17290cea 2%, #172616be 28%, #11151d08 70%, #111c25a0); }
.armory-intro h2 { text-shadow: 0 0 28px #d5ff4729; }
.armory-intro p { color: #d6dfce; }
.armory-empty { background: #1c2a40e6; border-color: #7a91bd6b; }

/* Supporting screens remain readable while exposing the arena lighting. */
body.hub.battles-page .battle-builder.panel.pad { background: radial-gradient(ellipse at 100% 0, #8c58d82e, transparent 57%), radial-gradient(ellipse at 0 100%, #b0e00014, transparent 58%), #1a253aed; border-color: #9da5e15c; }
.battle-banner { background: linear-gradient(90deg, #283b15ed 10%, #15282085 55%, #15191b05), url('/static/assets/arena-hero.webp') right 36% / cover; border-color: #b4df6285; box-shadow: 0 0 35px #acff0017; }
body.hub.battles-page .pick { background: #2c3549; border-color: #535e7b; }
body.hub.battles-page .pick.on { background: color-mix(in srgb, var(--rc) 15%, #253248); }
body.hub .battle-row { background: linear-gradient(100deg, #2a354bee, #212b40f5); border-color: #5e71915e; }
body.hub .challenge { background: linear-gradient(100deg, #566025bd, #253048ed); border-color: #c4e57675; }
body.hub.battle-page .result-hero { background: radial-gradient(ellipse at 50% 110%, #95ca2245, transparent 70%), #1b2a40ed; border-color: #bfdf8073; box-shadow: 0 0 36px #adf13417; }
body.hub.battle-page .mvp { background: linear-gradient(145deg, #74763885, #253446f0); border-color: #e7e49b8c; box-shadow: 0 0 22px #decd2725; }
body.hub.wallet-page .wallet-summary { background: radial-gradient(ellipse at 100% 0, #d5ed4e46, transparent 58%), linear-gradient(145deg, #25392eef, #212e46f2); border-color: #c4e5767a; box-shadow: 0 0 35px #b9e83819; }
body.hub.wallet-page .wallet-balance { color: #e5ff9e; text-shadow: 0 0 24px #d7fa4545; }
body.hub.login-page main.login-stage { border-color: #a1a5d06b; box-shadow: 0 0 80px #994cff21, 0 18px 50px #03061566; }
.login-world-shade { background: linear-gradient(90deg, #1b2a11a8, #06090a05 90%), linear-gradient(0deg, #1b2519df, transparent 38%, #06090a05 55%, #06090a30); }
.login-world h1 em { text-shadow: 0 0 35px #c3ff003f; }
.login-entry { background: radial-gradient(ellipse at 100% 0, #ae71ff33, transparent 64%), #21273eee; }
.login-page .quick .btn { background: #303b53; border-color: #67779d70; }
.arena-footer { border-top-color: #abbce54d; text-shadow: 0 2px 8px #060918; }

@keyframes arena-light-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .8; } to { transform: translate3d(3%, 3%, 0) scale(1.08); opacity: 1; } }
@keyframes arena-scenery { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1%, 0, 0); } }
body.motion-enabled::after { animation: arena-light-drift 12s ease-in-out infinite alternate; }
.motion-enabled .arena-hero::before { animation: arena-scenery 14s ease-in-out infinite alternate; }
body.motion-suspended::after, .motion-suspended .arena-hero::before { animation-play-state: paused; }
@media (max-width: 760px) {
  body.hub::before { background-position: center, 46% center; }
  body.hub .arena-sidebar { background: linear-gradient(100deg, #223522f5, #222944f5 60%, #352453f5); border-top: 1px solid #94a36b88; }
  .arena-hero { min-height: 328px; }
  .hero-copy { padding: 28px 23px; }
  .hero-copy h2 { font-size: 60px; }
  .hero-copy p { font-size: 12px; }
  .hero-tag { font-size: 8px; }
  .promo-bottom h2 { font-size: 27px; }
  .promo-eyebrow, .promo-bottom .eyebrow { font-size: 8px; }
  .collection-promo { box-shadow: 0 0 25px #9d58ff25; }
  .lobby-page .me-profile { background: linear-gradient(135deg, #344325ed, #202d3af2 45%, #302b4ceb); }
  .lobby-page .me-tile { border-left-color: #a6b4d338; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-enabled::after, .motion-enabled .arena-hero::before { animation: none; }
}

.hero-energy { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.motion-enabled .hero-energy { display: block; }
.hero-energy::before { content: ''; position: absolute; top: -35%; bottom: -35%; left: 44%; width: 2px; background: linear-gradient(transparent, #e8ff7fcc, transparent); box-shadow: 0 0 26px 7px #caff0026; rotate: 26deg; animation: arena-beam 7s ease-in-out infinite; }
@keyframes arena-beam { 0% { translate: -65px 0; opacity: 0; } 18% { opacity: .8; } 65% { opacity: .4; } 85%, 100% { translate: 420px 0; opacity: 0; } }
.motion-suspended .hero-energy::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .motion-enabled .hero-energy { display: none; } }