/* ==========================================================================
   ARENA — "Neon Night" theme. Loaded after app.css, so it only restyles.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #07060f;
  --surface: rgba(24, 20, 48, .62);
  --surface-strong: #171331;
  --line: rgba(190, 170, 255, .14);
  --muted: #a49fc4;
  --text: #f8f6ff;
  --cyan: #5ef0ff;
  --violet: #9b6bff;
  --pink: #ff4fa3;
  --gold: #ffd166;
  --green: #5af0b0;
  --grad-main: linear-gradient(120deg, #ff4fa3 0%, #9b6bff 55%, #5ec8ff 100%);
  --grad-gold: linear-gradient(120deg, #ffe08a, #ffb03a);
  --glass: linear-gradient(155deg, rgba(40, 32, 84, .66), rgba(16, 13, 36, .74));
  --radius: 22px;
  --glow: 0 10px 34px rgba(155, 107, 255, .28);
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(60rem 34rem at 110% -10%, rgba(155, 107, 255, .30), transparent 60%),
    radial-gradient(48rem 30rem at -20% 38%, rgba(255, 79, 163, .16), transparent 62%),
    radial-gradient(40rem 26rem at 60% 115%, rgba(94, 200, 255, .15), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.ambient { opacity: .32; filter: blur(70px); animation: floaty 14s ease-in-out infinite alternate; }
.ambient-one { background: #8a5bff; }
.ambient-two { background: #ff4fa3; animation-delay: -6s; }
@keyframes floaty { from { transform: translate3d(0, -14px, 0) scale(1); } to { transform: translate3d(-18px, 26px, 0) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .ambient, .page { animation: none !important; } }

/* ---------- header ---------- */
.topbar { height: 58px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 14px; background: var(--grad-main);
  box-shadow: 0 6px 22px rgba(255, 79, 163, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.brand strong { font-size: 16px; letter-spacing: 1.4px; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { color: #8f89b5; letter-spacing: 1.6px; }
.currency-pill {
  padding: 7px 12px; border-color: rgba(255, 255, 255, .1); border-radius: 30px;
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); font-weight: 800;
}
.coin-pill { color: var(--gold); border-color: rgba(255, 209, 102, .28); }

.avatar { border: 2px solid transparent; background: linear-gradient(#1b1640, #1b1640) padding-box, var(--grad-main) border-box; box-shadow: 0 0 22px rgba(155, 107, 255, .45); }
.eyebrow { color: var(--pink); letter-spacing: .3px; }
.welcome-copy h1 { font-size: 22px; font-weight: 900; }
.level-badge { color: #1d1300; border: 0; background: var(--grad-gold); box-shadow: 0 6px 20px rgba(255, 176, 58, .35); }
.level-badge span { opacity: .75; }

/* ---------- hero ---------- */
.hero-card {
  border: 1px solid transparent; border-radius: 28px; min-height: 236px;
  background:
    linear-gradient(135deg, #2a1d6b 0%, #4a1f78 52%, #7a2a86 100%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .04) 40%, rgba(255, 79, 163, .5)) border-box;
  box-shadow: 0 22px 60px rgba(60, 20, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.hero-copy h2 { font-size: clamp(26px, 7vw, 34px); }
.hero-copy h2 em { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy p { color: #e6defa; }
.hero-kicker { color: #ffe3f1; }
.live-dot { background: #ff4f6d; box-shadow: 0 0 0 0 rgba(255, 79, 109, .7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 79, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 79, 109, 0); } }
.orb-large { background: radial-gradient(circle at 34% 26%, #fff, #ffb3e1 30%, #b06bff 64%, #5b2bd1); box-shadow: 0 0 34px rgba(255, 140, 220, .6), 0 0 90px rgba(155, 107, 255, .6); }

/* ---------- buttons ---------- */
.primary-button, .play-card-button {
  color: #fff; border: 0; background: var(--grad-main); font-weight: 900;
  box-shadow: 0 8px 24px rgba(255, 79, 163, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.primary-button:hover, .play-card-button:hover { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(255, 79, 163, .45); }
.primary-button:active, .play-card-button:active { transform: scale(.96); }
.challenge-card-button { border-color: rgba(255, 209, 102, .4); color: var(--gold); background: rgba(255, 209, 102, .08); font-weight: 800; }
.text-button { color: var(--pink); }

/* ---------- cards ---------- */
.stat-card, .mission-card, .level-progress-card, .info-card, .wallet-card, .season-card,
.leader-row, .reward-card, .game-card, .mini-game, .empty-state, .catalog-note {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(3, 2, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.stat-card b { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 23px; }
.stat-label { color: var(--muted); }
.section-heading h2, .page-heading h2 { font-weight: 900; letter-spacing: .2px; }
.section-heading h2::before { content: ""; display: inline-block; width: 5px; height: 18px; margin-inline-end: 9px; border-radius: 4px; vertical-align: -3px; background: var(--grad-main); }
.section-tag { color: #d9d0ff; background: rgba(155, 107, 255, .14); border-color: rgba(155, 107, 255, .3); }

.game-card, .mini-game { transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.game-card:hover, .mini-game:hover { transform: translateY(-4px); border-color: rgba(255, 79, 163, .45); box-shadow: 0 18px 44px rgba(155, 107, 255, .3); }
.game-image img { height: 128px; }
.game-image::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; background: linear-gradient(to top, rgba(12, 9, 30, .92), transparent); }
.game-image .game-category { z-index: 1; color: #fff; border: 0; background: var(--grad-main); font-weight: 800; box-shadow: 0 4px 14px rgba(255, 79, 163, .4); }
.game-card h3 { font-weight: 900; }
.mini-game::after { background: var(--grad-main); color: #fff; }

.progress-track { background: rgba(255, 255, 255, .09); }
.progress-track i { background: var(--grad-main); box-shadow: 0 0 12px rgba(255, 79, 163, .55); }
.mission-icon { background: linear-gradient(145deg, rgba(155, 107, 255, .3), rgba(255, 79, 163, .2)); }
.mission-count { color: var(--gold); }

/* ---------- filters / tabs ---------- */
.filter-chip, .segmented-control button { border-color: var(--line); color: #cfc8ee; background: rgba(255, 255, 255, .05); }
.filter-chip.active, .segmented-control button.active { color: #fff; border-color: transparent; background: var(--grad-main); box-shadow: 0 6px 18px rgba(255, 79, 163, .35); }
.search-box, .leaderboard-game-picker select { border-color: var(--line); background: rgba(255, 255, 255, .06); border-radius: 16px; }
.search-box:focus-within, .leaderboard-game-picker select:focus { border-color: rgba(255, 79, 163, .6); box-shadow: 0 0 0 3px rgba(255, 79, 163, .16); }

/* ---------- leaderboard ---------- */
.leader-row { padding-block: 11px; }
.leader-row:nth-child(1) { border-color: rgba(255, 209, 102, .5); background: linear-gradient(120deg, rgba(255, 209, 102, .2), rgba(40, 32, 84, .6)); box-shadow: 0 12px 34px rgba(255, 176, 58, .2); }
.leader-row:nth-child(2) { border-color: rgba(205, 214, 235, .4); }
.leader-row:nth-child(3) { border-color: rgba(230, 150, 90, .4); }
.leader-row:nth-child(1) .leader-rank { background: var(--grad-gold); color: #251600; }
.leader-row:nth-child(2) .leader-rank { background: linear-gradient(135deg, #f1f4ff, #aab4cf); color: #151a2b; }
.leader-row:nth-child(3) .leader-rank { background: linear-gradient(135deg, #ffbd8a, #c4703a); color: #2a1200; }
.leader-score { color: var(--gold); font-weight: 900; text-shadow: 0 0 14px rgba(255, 209, 102, .35); }

/* ---------- season / rewards / wallet ---------- */
.season-card { background: linear-gradient(150deg, rgba(86, 44, 160, .6), rgba(20, 15, 45, .85)); }
.season-emblem { background: var(--grad-gold); color: #281800; box-shadow: 0 8px 24px rgba(255, 176, 58, .4); }
.route-stop.stop-current > span, .map-node.current { border-color: var(--pink); box-shadow: 0 0 18px rgba(255, 79, 163, .6); }
.route-stop.stop-done > span, .map-node.completed { border-color: rgba(90, 240, 176, .6); background: rgba(90, 240, 176, .16); }
.wallet-card { background: linear-gradient(135deg, rgba(255, 209, 102, .18), rgba(155, 107, 255, .16)); border-color: rgba(255, 209, 102, .3); }
.reward-card.unlocked { border-color: rgba(90, 240, 176, .5); box-shadow: 0 10px 30px rgba(90, 240, 176, .15); }

/* ---------- challenge + match result ---------- */
.challenge-panel {
  border: 1px solid transparent; border-radius: 24px;
  background:
    linear-gradient(115deg, #2b1a66, #3c1a62 60%, #1c2a58) padding-box,
    linear-gradient(120deg, #ff4fa3, #9b6bff, #5ec8ff) border-box;
  box-shadow: var(--glow);
}
.challenge-player { background: rgba(8, 6, 24, .62); border-color: rgba(255, 255, 255, .1); border-radius: 14px; }
.challenge-player b { color: var(--gold); }
.match-result-card { border: 1px solid transparent; background: linear-gradient(#1a1440, #110d2c) padding-box, var(--grad-main) border-box; box-shadow: 0 26px 80px rgba(120, 60, 255, .45); }
.match-player > b { color: var(--gold); }
.sheet { background: linear-gradient(#1a1440, #0f0b26); border-top: 1px solid rgba(155, 107, 255, .35); }
.choice-option { border-color: var(--line); background: rgba(255, 255, 255, .05); }

/* ---------- bottom nav: floating glass pill ---------- */
.bottom-nav {
  border: 1px solid rgba(190, 170, 255, .2); border-radius: 28px; min-height: 70px;
  background: rgba(16, 12, 38, .82); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 16px 44px rgba(3, 2, 14, .7), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
.nav-item { color: #8f89b5; border-radius: 20px; transition: color .2s, background .2s, transform .15s; }
.nav-item:active { transform: scale(.94); }
.nav-item.active { color: #fff; background: linear-gradient(135deg, rgba(255, 79, 163, .34), rgba(155, 107, 255, .34)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nav-item.active > span { filter: drop-shadow(0 0 8px rgba(255, 79, 163, .75)); }

/* ---------- game modal ---------- */
.modal { background: #05040d; }
.modal-header { border-bottom: 1px solid rgba(155, 107, 255, .25); background: linear-gradient(#17123a, #0f0b26); }
.icon-button { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); }
.toast { border: 1px solid rgba(255, 79, 163, .4); background: rgba(24, 16, 52, .96); box-shadow: 0 14px 44px rgba(155, 107, 255, .35); }
.notice { border-color: rgba(255, 209, 102, .3); background: rgba(255, 209, 102, .09); color: #ffe9b3; border-radius: 16px; }
.sheet-backdrop { backdrop-filter: blur(4px); }

/* page transition */
.page { animation: rise .35s cubic-bezier(.2, .8, .3, 1); }
::selection { background: rgba(255, 79, 163, .45); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(155, 107, 255, .4); border-radius: 8px; }

/* ---------- polish ---------- */
.topbar { background: none; border: 0; box-shadow: none; padding-inline: 2px; }
.catalog-note { height: auto; min-height: 0; padding: 12px 16px; line-height: 1.7; text-align: center; color: var(--muted); font-size: 12px; }
.stat-card { min-height: 84px; padding: 13px 12px; }
.stat-icon { top: 11px; left: 10px; font-size: 14px; }
.stat-label { padding-inline-end: 22px; }
.filter-row { padding-inline: 2px; }