/* ===================================================================
   The Giant Boss — styles (mobile-first)
   =================================================================== */
:root {
  --bg: #120a1f;
  --bg2: #1c1030;
  --panel: rgba(18, 10, 31, 0.85);
  --gold: #f5c542;
  --gold-2: #ffe08a;
  --text: #ece7f5;
  --muted: #9a8fb5;
  --hp: #e23a5a;
  --hp-glow: #ff5c78;
  --accent: #7c3aed;
  --ok: #22c55e;
  --danger: #ef4444;
  --radius: 14px;
  --maxw: 480px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  /* V2 Cosmic Obsidian: near-black stage with faint dimensional light wells */
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(76, 39, 128, .5) 0%, transparent 62%),
    radial-gradient(900px 600px at 50% 112%, rgba(34, 16, 66, .55) 0%, transparent 55%),
    #07030d;
  overflow: hidden;
  user-select: none;
}

#app { max-width: var(--maxw); margin: 0 auto; height: 100dvh; position: relative; }

.screen { display: none; height: 100dvh; flex-direction: column; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ------------------------------ AUTH ------------------------------ */
#auth { align-items: center; justify-content: center; padding: 20px; }
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid rgba(245, 197, 66, 0.25);
  border-radius: 20px; padding: 26px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 40px rgba(124,58,237,0.08);
  backdrop-filter: blur(6px);
}
.brand { text-align: center; margin-bottom: 18px; }
.brand-emoji { font-size: 54px; filter: drop-shadow(0 6px 14px rgba(226,58,90,0.5)); animation: float 3s ease-in-out infinite; }
.brand h1 { margin: 6px 0 4px; font-size: 26px; letter-spacing: 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }

.tabs { display: flex; gap: 8px; margin: 18px 0 14px; }
.tab { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
  background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.tab.active { color: #120a1f; background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; }

.auth-form { display: none; flex-direction: column; gap: 10px; }
.auth-form.active { display: flex; }
.auth-form input {
  padding: 13px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3); color: var(--text); font-size: 15px; outline: none;
}
.auth-form input:focus { border-color: var(--gold); }
.btn-primary {
  margin-top: 4px; padding: 14px; border: none; border-radius: 11px; cursor: pointer;
  font-size: 16px; font-weight: 800; letter-spacing: 0.5px; color: #120a1f;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 8px 20px rgba(245,197,66,0.3);
}
.btn-primary:active { transform: translateY(1px); }
.auth-error { color: var(--danger); font-size: 13px; text-align: center; margin-top: 12px; min-height: 16px; }

/* ------------------------------ BOSS HEADER ------------------------------ */
.boss-header { padding: 10px 12px 6px; }
.boss-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; letter-spacing: 1px; font-size: 15px;
  transform: translateX(-10px); /* whole title nudged slightly left (v3.27) */ }
.boss-title .skull { color: var(--gold); }
#boss-name { text-transform: uppercase; }
.boss-level { margin-left: 12px; flex: 0 0 auto; font-size: 11px; color: #120a1f; background: var(--gold); padding: 2px 7px; border-radius: 20px; font-weight: 900; } /* clear gap from the boss name */
.hp-wrap { position: relative; margin-top: 6px; }
.hp-bar { height: 20px; border-radius: 20px; background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15); overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); }
.hp-fill { height: 100%; width: 100%;
  background: linear-gradient(180deg, var(--hp-glow), var(--hp));
  box-shadow: 0 0 12px var(--hp-glow); transition: width 0.25s ease; }
.hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

/* ------------------------------ ARENA ------------------------------ */
.arena {
  position: relative; flex: 1; overflow: hidden;
  /* V2: real painted raid arena (Higgsfield production art) — broken geodesic
     rings echo the boss's own geometry; the platform grounds the stage.
     A dark scrim keeps every overlay readable; the old prototype grid is gone. */
  background:
    linear-gradient(180deg, rgba(5, 2, 11, 0.30) 0%, rgba(5, 2, 11, 0.10) 30%, rgba(5, 2, 11, 0.42) 100%),
    url('/assets/colossum-v2/arena/arena-cosmic-9x16.webp') center top / cover no-repeat,
    radial-gradient(120% 80% at 50% 0%, #1c0e33 0%, #0a0516 70%);
  perspective: 700px;
}
.next-boss {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--muted); white-space: nowrap;
  padding: 3px 9px 3px 6px; border-radius: 11px;
  background: rgba(10,8,20,.55); border: 1px solid rgba(255,255,255,.1);
}
.next-boss span:first-child { font-size: 15px; filter: drop-shadow(0 0 4px rgba(0,0,0,0.5)); }
.next-label #next-boss-name { color: #cbd5e1; }

/* "10 DMG = 1 💎" rule badge — top-left of the arena, right below "How to play",
   framed at the same size/style as the How-to-play button. */
.dmg-rule {
  position: absolute; top: 4px; left: 8px; z-index: 28;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #d9f7e8; cursor: help;
  padding: 4px 9px; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(16,185,129,.3), rgba(6,95,70,.35));
  border: 1px solid rgba(52,211,153,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Brawl-Stars-style Account LVL meter — top-left, below the 10-DMG rule badge */
.lvl-badge {
  position: absolute; top: 34px; left: 8px; z-index: 28;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 13px 4px 4px; border: 2px solid var(--gold); border-radius: 24px;
  background: linear-gradient(160deg, rgba(124,58,237,0.45), rgba(10,8,20,0.88));
  box-shadow: 0 3px 14px rgba(0,0,0,0.5), inset 0 0 16px rgba(124,58,237,0.22);
}
.lvl-badge:active { transform: translateY(1px); }
.lvl-badge .lvl-ava {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: radial-gradient(circle at 38% 28%, #4a2a80, #180d2c);
  border: 2px solid var(--gold-2); box-shadow: inset 0 0 8px rgba(0,0,0,0.55), 0 0 6px rgba(245,197,66,0.35);
}
.lvl-badge .lvl-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lvl-badge .lvl-num { font-size: 10px; font-weight: 800; color: var(--gold-2); letter-spacing: .4px; line-height: 1; }
.lvl-badge .lvl-num b { color: #fff; font-size: 14px; }
.lvl-badge .lvl-xpbar { width: 64px; height: 7px; border-radius: 4px; background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15); overflow: hidden; }
.lvl-badge .lvl-xpbar i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease;
  background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 6px rgba(245,197,66,0.55); }

.boss {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  text-align: center; transition: transform 0.1s;
}
.boss-emoji { font-size: 120px; line-height: 1; filter: drop-shadow(0 10px 24px rgba(226,58,90,0.5));
  animation: boss-breathe 3.5s ease-in-out infinite; }
.boss-shadow { width: 130px; height: 22px; margin: -6px auto 0; border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,0.55), transparent 70%); }
.boss.hit { animation: boss-shake 0.28s; }
.boss.dying { animation: boss-die 0.9s forwards; }
@keyframes boss-shake { 0%,100%{transform:translateX(-50%);} 20%{transform:translateX(-56%) rotate(-3deg);} 60%{transform:translateX(-44%) rotate(3deg);} }
@keyframes boss-die { to { transform: translateX(-50%) scale(0.2) rotate(40deg); opacity: 0; } }
.boss.incoming { animation: boss-incoming 0.9s cubic-bezier(.2,.9,.3,1.2); }
@keyframes boss-incoming { from { transform: translateX(-50%) translateY(-320px) scale(0.5); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

.player { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
.player-throne {
  width: 78px; height: 78px; margin: 0 auto; border-radius: 14px;
  background: linear-gradient(180deg, rgba(124,58,237,0.35), rgba(0,0,0,0.4));
  border: 2px solid rgba(245,197,66,0.35); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 0 16px rgba(124,58,237,0.2);
}
.player.attacking .player-throne { animation: lunge 0.3s; }
@keyframes lunge { 50% { transform: translateY(-16px) scale(1.05); } }
.player-emoji { font-size: 42px; }
.player-name { margin-top: 6px; font-size: 12px; font-weight: 700; }

.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg-num { position: absolute; font-weight: 900; font-size: 22px; color: var(--gold-2);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8); animation: dmg-rise 0.9s forwards; white-space: nowrap; }
.dmg-num.other { font-size: 15px; color: #cbb8ff; opacity: 0.85; }
.dmg-num.crit { color: #ff6b6b; font-size: 28px; }
@keyframes dmg-rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-6px) scale(1.1); } 100% { transform: translateY(-70px) scale(1); opacity: 0; } }

.projectile { position: absolute; font-size: 26px; animation: fly 0.32s ease-in forwards; }
@keyframes fly { to { transform: translateY(var(--fly-dist)) scale(0.6); opacity: 0.2; } }

.mini-lb {
  position: absolute; top: 4px; right: 6px; width: 112px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 11px; padding: 6px 7px 5px; backdrop-filter: blur(5px);
}
.mini-lb-title { font-size: 10px; color: var(--gold); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 4px; }
.mini-lb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mini-lb li { display: flex; justify-content: space-between; font-size: 10.5px; }
.mini-lb .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px; }
.mini-lb .lb-dmg { color: var(--gold-2); font-weight: 700; }
.mlb-toggle { display: block; width: 100%; margin-top: 2px; padding: 4px 6px; border-radius: 8px;
  border: 1px solid rgba(245,197,66,.35); background: rgba(245,197,66,.12); color: var(--gold-2);
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; cursor: pointer; text-align: center; }
.mlb-toggle:active { transform: translateY(1px); }
#mini-lb-list:not(.hidden) { margin-top: 5px; }
/* "YOU · #rank · score" row under the expanded top 5 */
.mlb-me { margin-top: 5px; padding: 3px 6px; border-radius: 8px; text-align: center;
  font-size: 9.5px; font-weight: 800; color: #d6c6ff;
  background: rgba(124,58,237,.18); border: 1px dashed rgba(167,139,250,.5); }
.mlb-me .mlb-me-tag { color: var(--gold-2); letter-spacing: .5px; }
.mlb-me.hidden { display: none; }
.name-premium { color: var(--gold); font-weight: 800; }

/* ------------------------------ HUD / ATTACK ------------------------------ */
.hud { padding: 8px 16px 4px; }
.attack-btn {
  width: 100%; padding: 16px; border: none; border-radius: 16px; cursor: pointer;
  color: #fff; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #ff5c78, #c31d3c);
  box-shadow: 0 10px 26px rgba(226,58,90,0.45), inset 0 -3px 0 rgba(0,0,0,0.25);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform 0.08s, filter 0.2s;
}
.attack-btn .attack-label { font-size: 22px; }
.attack-btn .attack-sub { font-size: 12px; opacity: 0.9; font-weight: 700; }
.attack-btn:active { transform: translateY(2px); }
.attack-btn.cooling { filter: grayscale(0.5) brightness(0.7); pointer-events: none;
  background: linear-gradient(180deg, #555, #333); box-shadow: none; }

/* ------------------------------ BOTTOM NAV ------------------------------ */
.bottom-nav { display: flex; align-items: center; justify-content: space-around; gap: 6px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.3); }
.nav-btn { background: transparent; border: none; color: var(--text); font-size: 20px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-btn span { font-size: 10px; color: var(--muted); }
.wallet { font-weight: 800; color: var(--gold-2); font-size: 15px;
  background: rgba(0,0,0,0.35); padding: 8px 12px; border-radius: 20px; border: 1px solid rgba(245,197,66,0.25); }

/* ------------------------------ MODALS ------------------------------ */
.modal-overlay { position: fixed; inset: 0; background: rgba(6,3,12,0.72); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center; animation: fade 0.14s ease-out;
  transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: var(--maxw); max-height: 86dvh; overflow-y: auto;
  background: var(--bg2); border-radius: 20px 20px 0 0; border-top: 1px solid rgba(245,197,66,0.3);
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  /* Single, opacity-only entrance. No transform on the modal itself → nothing to
     remove at animation-end, so no repaint "flash / out-and-in" on Samsung/mobile.
     The layer stays composited via translateZ so the fade is smooth. */
  transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 18px; letter-spacing: 0.5px; }
.modal-close { background: rgba(255,255,255,0.08); border: none; color: var(--text); width: 32px; height: 32px;
  border-radius: 50%; font-size: 18px; cursor: pointer; }

/* character cards */
.char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.char-card { border-radius: 14px; padding: 12px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3); position: relative; text-align: center; }
.char-card .char-emoji { font-size: 40px; }
.char-card .char-name { font-weight: 800; font-size: 13px; margin: 4px 0 2px; }
.char-card .char-rarity { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.char-card .char-dmg { font-size: 12px; color: var(--gold-2); font-weight: 700; }
.char-card .char-btn { margin-top: 8px; width: 100%; padding: 8px; border: none; border-radius: 9px;
  font-weight: 800; font-size: 12px; cursor: pointer; }
.char-btn.buy { background: linear-gradient(180deg,var(--gold-2),var(--gold)); color:#120a1f; }
.char-btn.select { background: rgba(124,58,237,0.4); color:#fff; border:1px solid rgba(124,58,237,0.6); }
.char-btn.selected { background: var(--ok); color:#062611; }
.char-btn.locked { background: rgba(255,255,255,0.08); color: var(--muted); }
.char-card.owned { border-color: rgba(34,197,94,0.4); }

/* prizes panel */
.prizes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.prize-cat { font-size: 11px; font-weight: 800; color: var(--gold-2); letter-spacing: .5px; margin: 6px 0 0; text-transform: uppercase; }
.prize-cat small { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.prize-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); }
.prize-medal { font-size: 24px; }
.prize-1 { border-color: rgba(245,197,66,0.5); box-shadow: 0 0 16px rgba(245,197,66,0.15); }
.prize-text b { color: var(--gold-2); }
.prize-text { font-size: 13px; line-height: 1.4; }

/* full leaderboard */
.lb-full { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-full li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
  background: rgba(0,0,0,0.3); }
.lb-full .rank { font-weight: 900; width: 26px; color: var(--muted); }
.lb-full .rank.top { color: var(--gold); }
.lb-full .lb-name { flex: 1; font-weight: 700; }
.lb-full .lb-dmg { color: var(--gold-2); font-weight: 800; }

/* profile */
.profile-head { text-align: center; margin-bottom: 14px; }
.profile-name { font-size: 22px; font-weight: 900; }
.profile-sub { color: var(--muted); font-size: 13px; }
.badge-prem { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; color: #120a1f;
  background: linear-gradient(180deg,var(--gold-2),var(--gold)); padding: 3px 10px; border-radius: 20px; }
.stat-row { display: flex; gap: 10px; margin-bottom: 14px; }
.stat { flex: 1; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 10px; text-align: center; }
.stat .stat-val { font-size: 18px; font-weight: 900; color: var(--gold-2); }
.stat .stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.honors { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.honor { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(245,197,66,0.2); font-size: 13px; }
.section-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 6px 0; }
.btn-gold { width: 100%; padding: 13px; border: none; border-radius: 12px; font-weight: 800; cursor: pointer;
  color: #120a1f; background: linear-gradient(180deg,var(--gold-2),var(--gold)); }
.btn-ghost { width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
  background: transparent; color: var(--text); font-weight: 700; cursor: pointer; margin-top: 8px; }
.muted-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; }

/* victory banner */
.victory-banner { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(245,197,66,0.2), rgba(6,3,12,0.92)); animation: fade 0.3s; }
.victory-banner h2 { font-size: 30px; margin: 0 0 4px;
  background: linear-gradient(180deg,var(--gold-2),var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.victory-banner .vb-sub { color: var(--muted); margin-bottom: 16px; }
.vb-winners { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.vb-win { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(245,197,66,0.3); text-align: left; }
.vb-win .medal { font-size: 26px; }
.vb-win .vb-info b { color: var(--gold-2); }
.vb-win .vb-info small { color: var(--muted); display: block; }

@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes boss-breathe { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }

/* Batch 44b: toasts sit ABOVE the HUD (meter + ATTACK) so messages never cover
   the button or the timing meter above it. The HUD block is ~158px tall and sits
   over the bottom nav, so anchor well clear of it. */
.toast { position: fixed; bottom: 238px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: rgba(0,0,0,0.85); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 13px;
  border: 1px solid rgba(245,197,66,0.3); animation: fade 0.2s; max-width: 90%; text-align: center; }

/* =================================================================
   v2 additions — social, chat, payments, leaderboard redesign
   ================================================================= */
.nav-btn { position: relative; }
.nav-badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(0,0,0,0.4); }

.modal-body { }
.modal-tall { min-height: 70dvh; }

/* sub-tabs inside modals */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 12px; }
.subtab { flex: 1 1 auto; min-width: 28%; padding: 8px 4px; border: none; border-radius: 9px; background: transparent; color: var(--muted); white-space: nowrap;
  font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.subtab.active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; }

/* diamond packs */
.pack-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pack-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(245,197,66,0.25); border-radius: 14px; padding: 12px 6px; text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center; }
.pack-diamonds { font-size: 15px; font-weight: 800; color: var(--gold-2); }
.pack-tag { font-size: 9px; color: #120a1f; background: var(--ok); border-radius: 10px; padding: 1px 6px; display: inline-block; margin: 4px 0; }
.pack-buy { margin-top: auto; width: 100%; padding: 9px 0; border: none; border-radius: 9px; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #4ade80, #16a34a); color: #052e16; }
.pack-buy:disabled { filter: grayscale(.6) brightness(.7); cursor: default; }

/* Wheel Packs (ticket + diamond bundles) */
.wpack-grid { display: flex; flex-direction: column; gap: 10px; }
.wpack-card { position: relative; background: rgba(0,0,0,0.3); border: 1px solid rgba(124,58,237,0.4);
  border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wpack-card.featured { border-color: rgba(245,197,66,0.55); background: linear-gradient(160deg, rgba(245,197,66,0.08), rgba(0,0,0,0.3)); }
.wpack-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wpack-head b { color: var(--gold-2); }
.wpack-emoji { font-size: 22px; }
.wpack-contents { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--text); display: flex; flex-direction: column; gap: 3px; }
.wpack-contents li { list-style: '➕ '; }
.wpack-card .pack-tag { position: absolute; top: 10px; right: 12px; margin: 0; }
.wpack-legend { font-size: 11.5px; color: var(--muted); background: rgba(245,197,66,0.08);
  border: 1px solid rgba(245,197,66,0.3); border-radius: 10px; padding: 8px 10px; margin: 10px 0 4px; }
.wpack-legend b { color: var(--gold-2); }
.odds-tier { font-size: 11px; font-weight: 800; color: var(--gold-2); margin: 8px 0 3px; }

/* wheel-card ticket count + how-to-earn line */
.wheel-owned { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--gold-2); }
.ticket-howto { font-size: 11px; color: var(--muted); padding: 0 4px 4px; margin-top: -2px; }
.ticket-howto b { color: var(--gold-2); }
.champ-reset-note { text-align: center; font-size: 13px; color: var(--gold-2); margin: 10px 0 2px; }
.champ-reset-note b { color: var(--gold-2); }
.pay-off { text-align: center; padding: 18px; border-radius: 14px; background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(245,197,66,0.4); color: var(--text); font-size: 14px; line-height: 1.6; }
.prem-active { text-align: center; padding: 14px; border-radius: 12px; background: rgba(245,197,66,0.12);
  border: 1px solid rgba(245,197,66,0.4); color: var(--gold-2); font-weight: 700; }

/* leaderboard: podium */
.lb-body { min-height: 120px; }
.podium { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.podium-slot { flex: 1; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 10px 4px; text-align: center; cursor: pointer; }
.podium-slot.p1 { order: 2; border-color: rgba(245,197,66,0.6); box-shadow: 0 0 18px rgba(245,197,66,0.2); padding-top: 16px; }
.podium-slot.p2 { order: 1; }
.podium-slot.p3 { order: 3; }
.podium-medal { font-size: 26px; }
.podium-name { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-dmg { font-size: 12px; color: var(--gold-2); font-weight: 700; }
.lb-full li { cursor: pointer; }
.lb-full li.me { border: 1px solid var(--gold); background: rgba(245,197,66,0.1); }
.lb-you { margin-top: 10px; text-align: center; padding: 10px; border-radius: 11px; background: rgba(245,197,66,0.1);
  border: 1px solid rgba(245,197,66,0.4); font-size: 13px; }
.party-sel { width: 100%; padding: 10px; border-radius: 10px; background: rgba(0,0,0,0.4); color: var(--text);
  border: 1px solid rgba(255,255,255,0.15); margin-bottom: 10px; font-size: 14px; }

/* friend / list rows */
.frow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,0.3); margin-bottom: 8px; }
.frow-main { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; overflow: hidden; }
.crest { font-size: 24px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(124,58,237,0.25); border-radius: 10px; flex-shrink: 0; }
.crest.big { font-size: 40px; width: 64px; height: 64px; margin: 0 auto 8px; }
.muted { color: var(--muted); }
.row-btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.mini-btn { border: none; border-radius: 9px; padding: 7px 12px; font-weight: 800; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,0.1); color: var(--text); }
.mini-btn.add, .mini-btn.ok { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; }
.mini-btn.no { background: rgba(239,68,68,0.25); color: #fecaca; }
.mini-btn.done { background: rgba(34,197,94,0.25); color: #bbf7d0; }
.mini-btn.muted { background: rgba(255,255,255,0.06); color: var(--muted); }
.search-input { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35); color: var(--text); font-size: 15px; outline: none; margin-bottom: 10px; }
.search-input:focus { border-color: var(--gold); }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form .search-input { margin-bottom: 0; }

/* forgot-password link on the auth screen */
.forgot-row { text-align: center; margin-top: 10px; }
.link-btn { display: inline-block; width: 100%; background: none; border: none; color: var(--gold);
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; padding: 4px; }
.link-btn:hover { color: #e6c14a; }

/* chat */
.chat-log { height: 50dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 8px; }
.bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,0.08); align-self: flex-start;
  font-size: 14px; line-height: 1.35; word-break: break-word; }
.bubble.mine { align-self: flex-end; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; }
.bubble-from { display: block; font-size: 10px; color: var(--gold); font-weight: 800; margin-bottom: 2px; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; padding: 12px 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.4); color: var(--text); outline: none; font-size: 15px; }
.chat-form input:focus { border-color: var(--gold); }
.chat-send { width: 46px; border: none; border-radius: 50%; font-size: 18px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; font-weight: 900; }

/* =================================================================
   Floating Premium CTA + Premium modal
   ================================================================= */
.premium-fab {
  position: absolute; right: 0; bottom: 248px; z-index: 25;
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px 7px 11px; border: none; border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #120a1f; font-weight: 900; font-size: 13px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 5px 14px rgba(245,197,66,0.45); animation: fab-pulse 2.2s ease-in-out infinite;
}
.premium-fab span { font-size: 10px; letter-spacing: 1px; }
.premium-fab.hidden { display: none; }
@keyframes fab-pulse {
  0%,100% { transform: translateX(0); box-shadow: 0 6px 18px rgba(245,197,66,0.45); }
  50%     { transform: translateX(-4px); box-shadow: 0 8px 28px rgba(245,197,66,0.85); }
}

.premium-hero { text-align: center; margin-bottom: 16px; }
.premium-hero .crown { font-size: 54px; filter: drop-shadow(0 6px 14px rgba(245,197,66,0.6)); animation: float 3s ease-in-out infinite; }
.premium-hero h3 { margin: 6px 0 2px; font-size: 24px; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.premium-hero .price { color: var(--muted); font-size: 13px; }
.premium-hero .price b { color: var(--gold-2); font-size: 15px; }
.prem-timer-wrap { color: var(--muted); font-size: 13px; margin-top: 4px; }
.prem-timer-wrap b { display: block; margin-top: 4px; color: var(--gold-2); font-size: 26px; font-weight: 900;
  letter-spacing: 1px; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(245,197,66,.5); }

.benefit { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(245,197,66,0.18); margin-bottom: 8px; }
.benefit .b-ico { font-size: 26px; line-height: 1; flex-shrink: 0; }
.benefit .b-title { font-weight: 800; font-size: 14px; }
.benefit .b-desc { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.benefit.headline { border-color: rgba(245,197,66,0.5); background: rgba(245,197,66,0.1); }

.premium-cta { width: 100%; padding: 16px; border: none; border-radius: 14px; cursor: pointer;
  font-weight: 900; font-size: 18px; color: #120a1f; margin-top: 8px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 22px rgba(245,197,66,0.45); }
.premium-cta:active { transform: translateY(1px); }
.premium-cta.small { font-size: 15px; padding: 13px; }
/* Secondary "try 5 days" self-buy under the main 30-day CTA (main-screen premium modal). */
.premium-cta.starter { font-size: 15px; padding: 13px; color: #ffe8a3;
  background: rgba(245, 197, 66, 0.14); border: 1px solid rgba(245, 197, 66, 0.5);
  box-shadow: none; }
.premium-active-box { text-align: center; padding: 18px; border-radius: 14px; margin-bottom: 8px;
  background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.45); color: var(--gold-2); font-weight: 800; font-size: 15px; }
.premium-secure { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; }

/* referral / invite box */
.invite-box { background: rgba(0,0,0,0.3); border: 1px solid rgba(245,197,66,0.3); border-radius: 14px;
  padding: 14px; text-align: center; margin-bottom: 12px; }
.invite-desc { font-size: 13px; color: var(--text); margin-bottom: 10px; line-height: 1.4; }
.invite-desc b { color: var(--gold-2); }
.invite-code { font-size: 26px; font-weight: 900; letter-spacing: 5px; color: var(--gold-2);
  background: rgba(0,0,0,0.4); border-radius: 10px; padding: 12px; margin-bottom: 10px; user-select: all; }

/* legal: terms checkbox + footer links */
.terms-check { display: flex; align-items: flex-start; gap: 8px; direction: rtl; text-align: right;
  font-size: 12px; color: var(--muted); line-height: 1.55; cursor: pointer; }
.terms-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
.terms-check a { color: var(--gold); }
.terms-check b { color: var(--gold-2); }
.remember-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; margin: 0 2px 2px; }
.remember-check input { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
.legal-links { text-align: center; margin-top: 14px; font-size: 12px; color: var(--muted); }
.legal-links a { color: var(--muted); text-decoration: underline; }

/* cash prize ribbon (main screen) */
/* ---- compact header row: [❓ How to play] [NEXT boss] [🏆 $5 SKILL PRIZE] ---- */
.hdr-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 5px 0 0; }
.hdr-info .next-boss { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.hdr-info .next-boss .next-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-mini {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #cbd5e1; cursor: pointer;
  padding: 4px 9px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(75,91,214,.35), rgba(47,58,160,.35));
  border: 1px solid rgba(99,120,255,.45);
}
.guide-mini:active { transform: translateY(1px); }
.prize-ribbon {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid rgba(245,197,66,.5); border-radius: 11px; cursor: pointer;
  background: linear-gradient(90deg, rgba(245,197,66,.18), rgba(124,58,237,.18), rgba(245,197,66,.18));
  background-size: 200% 100%; animation: ribbon-shine 4s linear infinite;
  color: var(--text); font-size: 10.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
}
.prize-ribbon b { color: var(--gold-2); }
@keyframes ribbon-shine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* cash-prize claim window (top-right) + claim modal */
.prize-claim-fab {
  position: absolute; top: 42px; right: 8px; z-index: 45; /* sits just below the top control bar */
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 8px 12px; border: 2px solid #fff; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #4ade80, #16a34a); color: #052e16;
  font-weight: 900; font-size: 18px;
  box-shadow: 0 0 0 2px rgba(34,197,94,.4), 0 6px 20px rgba(34,197,94,.65);
  animation: claim-pop 1.2s ease-in-out infinite;
}
.prize-claim-fab span { font-size: 9px; letter-spacing: 1px; margin-top: 2px; }
.prize-claim-fab.hidden { display: none; }
@keyframes claim-pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.claim-hero { text-align: center; margin-bottom: 12px; }
.claim-amt { font-size: 46px; font-weight: 900; color: #4ade80; text-shadow: 0 2px 12px rgba(34,197,94,.5); }
.claim-note { background: rgba(0,0,0,.3); border: 1px solid rgba(74,222,128,.35); border-radius: 12px;
  padding: 12px; font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
.claim-note b { color: #4ade80; }

/* ===================== WORLD RAID (v3 skill combat) ===================== */
.brand-sub { font-size: 12px; font-weight: 900; letter-spacing: 6px; color: var(--gold);
  margin: 2px 0 8px; text-shadow: 0 0 14px rgba(245,197,66,.5); }

/* (phase banner + shield bar removed in v3.26 — no boss phases any more) */
@keyframes rage-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* perfect-hit meter */
.meter { position: relative; height: 26px; border-radius: 13px; background: linear-gradient(90deg, rgba(239,68,68,.5), rgba(239,68,68,.32));
  border: 1px solid rgba(255,255,255,.14); overflow: hidden; margin: 0 4px 8px; }
.m-zone { position: absolute; top: 0; bottom: 0; border-radius: 4px;
  transition: left .5s cubic-bezier(.22,1,.36,1), width .3s ease; }
.m-green { background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,.8), inset 0 0 0 1px rgba(255,255,255,.35); z-index: 1; }
/* PERFECT hit: the green zone flares brightly, then slides to its new random spot */
.m-green.hit-flash { animation: green-pop .55s ease-out; }
@keyframes green-pop {
  0%   { background: #eafff2; box-shadow: 0 0 14px rgba(74,222,128,.9); }
  22%  { background: #c7ffdb; box-shadow: 0 0 32px 9px rgba(130,255,180,1), 0 0 52px rgba(74,222,128,.9); }
  100% { background: rgba(74,222,128,.9); box-shadow: 0 0 12px rgba(74,222,128,.8); }
}
/* GOLDEN PIXEL: a tiny gold band centred in the green — release exactly here for a GOLDEN HIT */
.m-gold { background: linear-gradient(180deg,#fde68a,#f59e0b); z-index: 1; border-radius: 3px;
  box-shadow: 0 0 10px 2px rgba(245,197,66,.9), inset 0 0 0 1px rgba(255,255,255,.65); }
.m-gold.gold-flash { animation: gold-pop .6s ease-out; }
@keyframes gold-pop {
  0%   { transform: scaleY(1);   box-shadow: 0 0 12px 2px rgba(245,197,66,.9); }
  25%  { transform: scaleY(1.7); box-shadow: 0 0 36px 13px rgba(255,215,80,1), 0 0 64px rgba(245,197,66,.95); }
  100% { transform: scaleY(1);   box-shadow: 0 0 10px 2px rgba(245,197,66,.9); }
}
/* MISS: the whole (red) bar flares red — the red counterpart of the green flare */
.meter.miss-flash { animation: meter-miss .5s ease-out; }
@keyframes meter-miss {
  0%   { background: linear-gradient(90deg, rgba(239,68,68,.5), rgba(239,68,68,.32)); }
  20%  { background: linear-gradient(90deg, rgba(255,64,64,.95), rgba(255,86,86,.85));
         box-shadow: 0 0 24px 5px rgba(239,68,68,.95), inset 0 1px 4px rgba(0,0,0,.6); }
  100% { background: linear-gradient(90deg, rgba(239,68,68,.5), rgba(239,68,68,.32)); }
}
.m-marker { position: absolute; top: -2px; bottom: -2px; width: 5px; background: #fff; border-radius: 2px;
  box-shadow: 0 0 8px #fff; transform: translateX(-50%); z-index: 2; }

/* skill HUD */
.skill-hud { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.sh-item { font-size: 12px; font-weight: 800; color: #cbb8ff; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 3px 12px; }
.sh-item b { color: var(--gold-2); }
#combo-chip { opacity: .55; }
#combo-chip.hot { opacity: 1; border-color: rgba(255,107,107,.6); color: #ff9f9f; }
.sh-item.counter { background: rgba(245,197,66,.2); border-color: var(--gold); color: var(--gold-2); animation: rage-pulse .8s infinite; }

/* grade fx */
.grade-fx { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 26px; font-weight: 900;
  letter-spacing: 1px; pointer-events: none; animation: gradepop 1s ease-out forwards; text-shadow: 0 2px 10px #000; }
.grade-fx.perfect { color: #4ade80; }
.grade-fx.weak { color: #9ca3af; font-size: 18px; }
.grade-fx.golden { color: #fde047; font-size: 30px; text-shadow: 0 0 14px rgba(245,197,66,1), 0 2px 10px #000; }
.dmg-num.golden { color: #fde047; text-shadow: 0 0 10px rgba(245,197,66,1), 0 2px 6px rgba(0,0,0,.85); }
@keyframes gradepop { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 20% { opacity: 1; transform: translateX(-50%) scale(1.2); } 100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(1); } }
.dmg-num.weakhit { color: #9ca3af; font-size: 16px; }

/* weak spot target */
.ws-target { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #4ade80;
  background: radial-gradient(circle, rgba(74,222,128,.4), rgba(74,222,128,.08)); font-size: 24px; cursor: pointer;
  transform: translate(-50%,-50%); z-index: 6; animation: ws-pulse .7s ease-in-out infinite; padding: 0; line-height: 1; }
@keyframes ws-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); } 50% { box-shadow: 0 0 0 14px rgba(74,222,128,0); } }

/* dodge button */
.dodge-btn { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 8;
  font-size: 22px; font-weight: 900; letter-spacing: 1px; padding: 18px 34px; border: none; border-radius: 16px; cursor: pointer;
  color: #120a1f; background: linear-gradient(180deg,#7dd3fc,#0ea5e9); box-shadow: 0 6px 0 #075985, 0 0 30px rgba(14,165,233,.6);
  animation: rage-pulse .5s infinite; }
.dodge-btn:disabled { filter: grayscale(.6); animation: none; }
.dodge-btn:active { transform: translate(-50%,-50%) scale(.95); }

/* mini-lb tabs */
.mini-lb-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.mlb-tab { flex: 1; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 3px 2px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); color: #9a8fb5; cursor: pointer; }
.mlb-tab.active { background: rgba(245,197,66,.18); border-color: var(--gold); color: var(--gold-2); }

/* victory skill row */
.vb-skill { display: flex; align-items: center; gap: 10px; background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.45); border-radius: 12px; padding: 8px 12px; margin: 8px 0; text-align: left; }
.vb-skill .medal { font-size: 26px; }
.vb-skill small { display: block; color: #9a8fb5; font-size: 11px; }

/* ===================== LIVE EVENT LAYER (v3.1) ===================== */
/* world-event ticker */
.ticker { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 30;
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .3px;
  padding: 6px 10px; border-radius: 10px; color: #fff;
  background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px); animation: ticker-in .35s ease-out; }
@keyframes ticker-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ticker-rage, .ticker-final { color: #ff9f9f; border-color: rgba(255,107,107,.5); background: rgba(120,20,20,.5); }
.ticker-crown { color: var(--gold-2); border-color: var(--gold); background: rgba(90,70,10,.5); }
.ticker-weakspot, .ticker-shield { color: #7dd3fc; border-color: rgba(56,189,248,.5); }
.ticker-kill { color: #4ade80; border-color: rgba(74,222,128,.5); }

/* crown bar — floating pill, top-left of the arena (never shifts layout) */
.crown-bar { position: absolute; top: 60px; left: 8px; right: auto; z-index: 29;
  font-size: 12px; font-weight: 800; color: var(--gold-2);
  padding: 3px 10px; border-radius: 12px; background: rgba(30,20,5,.6);
  border: 1px solid rgba(245,197,66,.4); text-shadow: 0 0 10px rgba(245,197,66,.5);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* next-event countdown row (above the meter) */
.event-timers { display: flex; justify-content: center; gap: 14px; margin-bottom: 5px;
  font-size: 12px; font-weight: 800; color: #cbb8ff; }
.event-timers span { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 2px 10px; }
#ev-weakspot { color: #7dd3fc; }
#ev-rank { color: var(--gold-2); }

/* onboarding */
.onb-lead { font-size: 15px; text-align: center; margin: 0 0 12px; }
.onb-lead b { color: var(--gold-2); }
.onb-list { margin: 0 0 14px; padding-left: 18px; }
.onb-list li { font-size: 13.5px; line-height: 1.7; margin-bottom: 6px; }
.onb-list b { color: var(--gold-2); }

/* prize-rules note */
.rules-note { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 9px 11px; font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.rules-note b { color: var(--gold-2); }

/* ==================================================================
   HOW TO PLAY — guide content (the button is .guide-mini in the header)
   ================================================================== */

.guide { display: flex; flex-direction: column; gap: 14px; }
.g-goal { background: rgba(245,197,66,0.1); border: 1px solid rgba(245,197,66,0.35);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.g-goal b { color: var(--gold-2); }
.g-sec { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 12px 14px; }
.g-sec h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.3px; }
.g-sec .g-ico { font-size: 19px; }
.g-sec p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: #d9d2ea; }
.g-sec p:last-child { margin-bottom: 0; }
.g-tip { color: var(--gold-2) !important; font-style: italic; }
.g-row { display: flex; align-items: flex-start; gap: 10px; margin: 7px 0; }
.g-txt { font-size: 12.5px; line-height: 1.5; color: #d9d2ea; flex: 1; }
.g-txt b { color: #fff; }
.g-chip { flex-shrink: 0; min-width: 74px; text-align: center; font-size: 10.5px; font-weight: 900;
  letter-spacing: 0.4px; padding: 5px 8px; border-radius: 8px; color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); }
.g-chip.green  { background: rgba(52,199,89,0.25);  border-color: rgba(52,199,89,0.6);  color: #7dff9e; }
.g-chip.yellow { background: rgba(245,197,66,0.22); border-color: rgba(245,197,66,0.6); color: #ffdd7a; }
.g-chip.red    { background: rgba(255,69,58,0.22);  border-color: rgba(255,69,58,0.6);  color: #ff9a92; }
.g-chip.gold   { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; border: none; }
.onb-hint { font-size: 11px; color: var(--muted); text-align: center; margin: 10px 0 0; line-height: 1.4; }
.onb-hint b { color: #b9c0ff; }

/* ==================================================================
   3D BOSS ENGINE + arena glow-up (v3.3)
   ================================================================== */
/* size by the SHORTER of width/height so the boss never grows down onto the
   player avatar on short/landscape screens; stays high and upright */
.boss.has3d { width: min(72vw, 42vh, 330px); height: min(72vw, 42vh, 330px); top: 3%; }
.boss.has3d .boss-emoji { display: none; }
.boss.has3d .boss-shadow { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 44%; height: 20px; opacity: .8; }
/* canvas is a REPLACED element — inset:0 alone won't stretch it, so force an
   explicit 100% size (three.js responsive pattern) or it renders at its
   drawing-buffer intrinsic size and overflows the container on narrow screens. */
.boss3d-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
  z-index: 1; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,.55)); }
.boss.has3d .ws-target { z-index: 6; }
/* keep the CSS shake subtle in 3D (the engine does its own reactions) */
.boss.has3d.hit { animation: boss-shake3d 0.2s; }
@keyframes boss-shake3d { 0%,100%{transform:translateX(-50%);} 50%{transform:translateX(-50%) translateY(2px);} }
.boss.has3d.incoming { animation: none; }

/* ==================================================================
   LIVING UI — animated background, arena glow, neon HP, sheen (v3.3)
   ================================================================== */
:root { --boss-glow: #e2603a; }

/* drifting aurora + ember field behind everything */
body::before {
  content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 20%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(40% 32% at 80% 30%, rgba(226,58,90,0.22), transparent 60%),
    radial-gradient(45% 35% at 50% 90%, rgba(56,189,248,0.18), transparent 60%);
  filter: blur(30px); animation: aurora 22s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1.4px 1.4px at 20px 30px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 130px 80px, rgba(255,255,255,.35), transparent),
    radial-gradient(1.6px 1.6px at 70px 160px, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 180px 200px, rgba(255,255,255,.3), transparent);
  background-size: 220px 240px; animation: embers 30s linear infinite;
}
@keyframes aurora { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(3%,-2%) scale(1.08);} 100%{transform:translate(-3%,2%) scale(1.04);} }
@keyframes embers { from { background-position: 0 0; } to { background-position: 0 -240px; } }
#app { z-index: 1; }

/* arena breathes with the boss's colour */
.arena::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 34%, var(--boss-glow), transparent 62%);
  opacity: .28; mix-blend-mode: screen; animation: arena-pulse 4.5s ease-in-out infinite;
}
.arena::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 120px 20px rgba(0,0,0,.55); /* vignette */
}
@keyframes arena-pulse { 0%,100%{opacity:.22; transform:scale(1);} 50%{opacity:.4; transform:scale(1.06);} }

/* neon HP bar with a sweeping shine */
.hp-bar { height: 22px; border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 14px rgba(226,58,90,.35); }
.hp-fill { position: relative;
  background: linear-gradient(180deg, #ff8aa0, var(--hp) 60%, #a3122f);
  box-shadow: 0 0 16px var(--hp-glow), inset 0 0 10px rgba(255,255,255,.25); }
.hp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 250% 100%; animation: hp-shine 2.6s linear infinite;
}
@keyframes hp-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* attack button: animated sheen */
.attack-btn { position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(226,58,90,.55), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08); }
.attack-btn::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); animation: btn-sheen 3.2s ease-in-out infinite;
}
@keyframes btn-sheen { 0%{left:-60%;} 55%,100%{left:130%;} }
.attack-btn .attack-label { text-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* meter: glassy glow */
.meter { box-shadow: inset 0 1px 4px rgba(0,0,0,.6), 0 0 16px rgba(74,222,128,.25); border: 1px solid rgba(255,255,255,.12); }
.m-marker { box-shadow: 0 0 0 1.6px rgba(0,0,0,.7), 0 0 7px rgba(255,255,255,.9); }

/* glass bottom nav + boss header */
.bottom-nav { background: rgba(10,5,20,.55); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.06); }
.boss-header { position: relative; z-index: 2; }

/* ==================================================================
   Boss info chip + hover tooltips (v3.4 / reframed v3.26)
   ================================================================== */
/* "Every Boss LVL ×1.25 HP · Champions reset" — framed line at the top of the
   mini-lb column (same size & style family as the FREE WHEEL hint below it). */
.raiders {
  display: block; width: 100%; margin: 0 0 5px; padding: 4px 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.25;
  text-align: center; color: #d6c6ff; cursor: help; text-transform: uppercase;
  background: rgba(124,58,237,0.14); border: 1px solid rgba(124,58,237,0.4);
  border-radius: 8px;
}
.raiders b { color: #fff; }
.raiders-note { color: var(--muted); font-size: 10px; }

.tooltip {
  position: fixed; z-index: 9999; max-width: 240px; pointer-events: none;
  background: rgba(12,7,22,0.97); color: #f0ecf8; border: 1px solid rgba(245,197,66,0.45);
  border-radius: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  animation: tip-in 0.12s ease-out;
}
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
[data-tip] { cursor: help; }
button[data-tip], .nav-btn[data-tip], .attack-btn[data-tip] { cursor: pointer; }

/* season-reset disclosure inside the Shop (v3.5) */
.season-note { background: rgba(245,197,66,0.1); border: 1px solid rgba(245,197,66,0.35);
  border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--text); margin-bottom: 12px; }
.season-note b { color: var(--gold-2); }

/* online-players indicator — green dot, top-right corner (nudged right+up v3.27) */
.online-badge { position: absolute; top: 4px; right: 2px; z-index: 31;
  display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 20px;
  background: rgba(10,5,20,0.6); border: 1px solid rgba(52,199,89,0.4);
  font-size: 12px; font-weight: 800; color: #7dff9e; backdrop-filter: blur(6px); cursor: help; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #34c759;
  box-shadow: 0 0 8px #34c759; animation: online-pulse 2s ease-in-out infinite; }
@keyframes online-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } }

/* settings gear — small round control, top-left corner (opens the ⚙️ modal) */
.settings-fab { position: absolute; top: 3px; left: 8px; z-index: 31;
  width: 29px; height: 29px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(10,8,20,.6); color: #fff; font-size: 14px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.settings-fab:active { transform: scale(.92) rotate(35deg); }

/* settings modal — rows with iOS-style on/off switches */
.settings { display: flex; flex-direction: column; gap: 10px; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--text); }
.set-row:active { transform: scale(.99); }
.set-ico { font-size: 22px; line-height: 1; }
.set-txt { flex: 1; display: flex; flex-direction: column; }
.set-txt b { font-size: 14px; font-weight: 800; }
.set-txt small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.set-switch { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,.15); transition: background .2s; }
.set-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: left .2s; }
.set-row[data-on="1"] .set-switch { background: var(--ok); }
.set-row[data-on="1"] .set-switch i { left: 23px; }

/* charge-attack: HOLD the button to fill this vertical bar; RELEASE to strike */
.attack-btn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
.attack-btn.charging { filter: brightness(1.1); box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset; }
.charge-meter { position: absolute; right: 8px; bottom: 198px; z-index: 60;
  width: 14px; height: 64px; border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.charge-meter.hidden { display: none; }
.charge-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: linear-gradient(0deg, #f59e0b, #fbbf24); }
.charge-meter.ready { border-color: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,.85); }
.charge-meter.ready .charge-fill { background: linear-gradient(0deg, #22c55e, #4ade80); }

/* ==================================================================
   RESPONSIVE FIT (v3.9) — the boss is sized by JavaScript to the MEASURED
   arena (fitBoss() in app.js sets #boss width/height inline), so it always
   fits above the avatar on every device. No container-query or transform
   tricks — works in every browser. (Reverts the v3.7/v3.8 experiments.)
   ================================================================== */
.boss.has3d { top: 4%; }   /* width/height are set inline by fitBoss() */

/* ==================================================================
   REWARD WHEELS (v3.22) — Shop → 🎡 Wheel tab
   ================================================================== */
.wheels { display: flex; flex-direction: column; gap: 14px; }
.wheel-card {
  background: linear-gradient(160deg, rgba(124,58,237,0.14), rgba(18,10,31,0.6));
  border: 1px solid rgba(124,58,237,0.35); border-radius: var(--radius);
  padding: 12px 12px 14px; box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.wheel-card.premium { border-color: rgba(245,197,66,0.5); background: linear-gradient(160deg, rgba(245,197,66,0.12), rgba(18,10,31,0.6)); }
.wheel-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.wheel-emoji { font-size: 20px; }
.wheel-card.premium .wheel-head b { color: var(--gold-2); }
.wheel-blurb { color: var(--muted); font-size: 12px; margin: 4px 0 10px; line-height: 1.4; }

/* the slot reel */
.reel {
  position: relative; height: 46px; overflow: hidden; border-radius: 10px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.reel-track { display: flex; height: 100%; will-change: transform; }
.reel-cell {
  flex: 0 0 112px; width: 112px; margin: 0 8px; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--text);
  background: rgba(124,58,237,0.18); border-radius: 8px;
}
.reel-cell.premium_ms { background: rgba(245,197,66,0.22); color: var(--gold-2); }
.reel-cell.namecolor  { background: rgba(56,189,248,0.20); color: #bfe9ff; }
.reel-cursor {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 10px solid var(--gold); filter: drop-shadow(0 0 5px var(--gold)); z-index: 3;
}
.reel-cursor::after {
  content: ''; position: absolute; top: 10px; left: -1px; width: 2px; height: 46px;
  background: linear-gradient(var(--gold), transparent); opacity: 0.7;
}

.wheel-spin {
  width: 100%; margin-top: 10px; padding: 12px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 800; color: #1a1030; cursor: pointer;
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 4px 14px rgba(245,197,66,0.35);
}
.wheel-card.free .wheel-spin { background: linear-gradient(90deg, var(--accent), #a855f7); color: #fff; box-shadow: 0 4px 14px rgba(124,58,237,0.4); }
.wheel-spin.cooling, .wheel-spin.locked { background: rgba(255,255,255,0.08); color: var(--muted); cursor: not-allowed; box-shadow: none; }

.wheel-odds { margin-top: 8px; }
.wheel-odds summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.odd-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 2px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.odd-lbl.premium_ms { color: var(--gold-2); }
.odd-lbl.namecolor { color: #bfe9ff; }
.odd-pct { color: var(--muted); font-variant-numeric: tabular-nums; }

/* little "free wheel" call-to-action above the mini-leaderboard */
/* full-width hint above the mini leaderboard's Skill/DMG tabs */
.free-wheel-hint {
  display: block; width: 100%; margin: 0 0 5px; padding: 4px 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.2;
  text-align: center; color: var(--gold-2); cursor: pointer;
  background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.35);
  border-radius: 8px; text-transform: uppercase;
}
.free-wheel-hint.ready { animation: fwh-pulse 1.4s ease-in-out infinite; }
@keyframes fwh-pulse {
  0%, 100% { background: rgba(245,197,66,0.14); box-shadow: 0 0 0 rgba(245,197,66,0); }
  50%      { background: rgba(245,197,66,0.30); box-shadow: 0 0 10px rgba(245,197,66,0.5); }
}

/* ==================================================================
   RAIDER ROAD + WHEEL TICKETS + ACCOUNT LVL (v3.23)
   ================================================================== */
/* corner shortcut fabs (top-left, next to the ⚙️ gear) */
.corner-fab { position: absolute; top: 3px; z-index: 31;
  width: 29px; height: 29px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(10,8,20,.6); color: #fff; font-size: 14px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.tickets-fab { left: 44px; } /* sits where the (removed) Raider Road button was */
.corner-fab .nav-badge { position: absolute; top: -4px; right: -4px; }
.corner-fab.glow { animation: fab-glow 1.2s ease-in-out infinite; border-color: var(--gold); }
/* socials button — top-right, just left of the online-players badge (small gap) */
.right-fab { left: auto; }
.social-fab { right: 64px; top: 4px; }

/* global-chat CTA — right edge, just above the Premium button, same pill style */
.gchat-cta {
  position: absolute; right: 0; bottom: 300px; z-index: 25;
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px 7px 11px; border: none; border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #6d8bff, #3a4fd6);
  color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 5px 14px rgba(58,79,214,0.5);
}
.gchat-cta span { font-size: 10px; letter-spacing: 1px; }
.gchat-cta:active { transform: translateY(1px); }
.gchat-cta .nav-badge { position: absolute; top: -4px; left: -4px; }

/* socials modal */
.socials { display: flex; flex-direction: column; gap: 8px; }
.social-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(124,58,237,.4); color: var(--text);
  text-decoration: none; font-size: 15px; }
.social-row:active { transform: translateY(1px); }
.social-row .social-ico { font-size: 20px; }
.social-row .social-go { margin-left: auto; color: var(--gold); font-weight: 900; }
.social-row.soon { opacity: .55; }
.social-row.soon .social-go { color: var(--muted); font-size: 11px; font-weight: 700; }

/* report a problem / suggestion */
.report-email, .report-msg { width: 100%; padding: 12px 13px; border-radius: 11px; margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); color: var(--text); font-size: 14px; outline: none; }
.report-email:focus, .report-msg:focus { border-color: var(--gold); }
.report-msg { resize: vertical; min-height: 110px; font-family: inherit; }

/* broadcast opt-in row (profile) */
.optin-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted);
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; cursor: pointer; }
.optin-row input { margin-top: 2px; accent-color: var(--gold); }

/* global chat extras */
.gchat-note { font-size: 11px; color: var(--muted); background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.35); border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; }
.bubble-from[data-guser] { cursor: pointer; } /* Batch 44: dotted underline removed */

/* lifetime-event banners (Ranks → Life Skill / Life DMG) */
.life-event { font-size: 12px; line-height: 1.5; color: var(--text); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 8px;
  background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.4); }
.life-event.gold { background: rgba(245,197,66,.1); border-color: rgba(245,197,66,.5); }
.life-event small { color: var(--muted); }
.life-event b { color: var(--gold-2); }

/* volume sliders (settings) */
.vol-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
.vol-row .vol-txt { flex: 0 0 58px; font-size: 13px; }
.vol-slider { flex: 1; accent-color: var(--gold); height: 22px; }
.vol-val { flex: 0 0 40px; text-align: right; font-size: 12px; color: var(--gold-2); font-weight: 800; }
.settings.vols { display: flex; flex-direction: column; gap: 8px; }
@keyframes fab-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
  50%      { box-shadow: 0 0 14px rgba(245,197,66,.8); }
}

/* side popups (LVL UP / new road reward / ticket earned) */
.side-pop {
  position: fixed; left: 10px; top: 88px; z-index: 300;
  padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 800;
  color: var(--text); background: rgba(18,10,31,.92); border: 1px solid var(--accent);
  box-shadow: 0 6px 24px rgba(124,58,237,.45); backdrop-filter: blur(6px);
  animation: side-in .45s cubic-bezier(.2,.9,.3,1.2); max-width: 72vw;
}
.side-pop.lvlup { border-color: var(--gold); box-shadow: 0 6px 24px rgba(245,197,66,.45); color: var(--gold-2); }
.side-pop.ticket { border-color: #38bdf8; box-shadow: 0 6px 24px rgba(56,189,248,.4); }
.side-pop.out { transition: opacity .5s, transform .5s; opacity: 0; transform: translateX(-24px); }
@keyframes side-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* XP bar (profile + Raider Road header) */
.xp-wrap { margin: 6px 0; }
.xp-txt { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.xp-txt b { color: var(--gold-2); }
.xp-bar { height: 10px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.xp-bar i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 8px rgba(245,197,66,.5); }
.profile-xp { cursor: pointer; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }

/* leaderboard LVL chip */
.lb-lvl { font-size: 9px; font-weight: 800; color: #bfa3ff; background: rgba(124,58,237,.22);
  border: 1px solid rgba(124,58,237,.4); border-radius: 7px; padding: 1px 5px; white-space: nowrap; }
.podium-slot .lb-lvl { display: inline-block; margin-top: 2px; }

/* ---- Raider Road ---- */
.road-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.road-lvl-badge { flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  font-size: 16px; font-weight: 900; color: var(--gold-2);
  background: linear-gradient(160deg, rgba(245,197,66,.25), rgba(124,58,237,.2));
  border: 1px solid rgba(245,197,66,.55); border-radius: 12px; padding: 8px 12px;
  text-shadow: 0 0 10px rgba(245,197,66,.6); }
.road-lvl-badge.maxed { border-color: #fff; }
.road-head .xp-wrap { flex: 1; margin: 0; }
.road-scroll { overflow-x: auto; overflow-y: hidden; padding: 6px 4px 10px; -webkit-overflow-scrolling: touch;
  border-radius: 16px; border: 1px solid rgba(124,58,237,.35);
  background:
    radial-gradient(300px 120px at 18% 12%, rgba(124,58,237,.28), transparent 70%),
    radial-gradient(260px 110px at 78% 85%, rgba(245,197,66,.10), transparent 70%),
    radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(2px 2px at 57% 22%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 55%, rgba(255,255,255,.3), transparent 100%),
    linear-gradient(160deg, #221040, #140a26 60%, #1a0f33);
  box-shadow: inset 0 0 34px rgba(0,0,0,.6), 0 4px 18px rgba(124,58,237,.2); }
.road-track { position: relative; display: flex; align-items: flex-end; gap: 0; padding: 88px 30px 8px; min-width: max-content; }
.road-line, .road-fill { position: absolute; height: 9px; border-radius: 5px; bottom: 64px; left: 0; }
.road-line { right: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.road-fill { background: linear-gradient(90deg, var(--accent), #a855f7, var(--gold));
  box-shadow: 0 0 14px rgba(245,197,66,.65), 0 0 30px rgba(168,85,247,.35); width: 0; }
.road-you { position: absolute; bottom: 86px; transform: translateX(-50%); z-index: 5;
  font-size: 9px; font-weight: 900; color: #1a1030;
  background: linear-gradient(180deg, #ffe08a, var(--gold)); border-radius: 8px;
  padding: 3px 8px; white-space: nowrap; border: 1px solid #fff3;
  box-shadow: 0 0 14px rgba(245,197,66,.9), 0 0 34px rgba(245,197,66,.45);
  animation: you-bob 1.6s ease-in-out infinite; }
.road-you::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--gold); }
@keyframes you-bob { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 5px; } }
.road-node { position: relative; z-index: 2; flex: 0 0 86px; width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
.road-node .rn-reward { min-height: 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  font-size: 9.5px; font-weight: 700; color: var(--text); text-align: center;
  background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.35); border-radius: 9px;
  padding: 5px 6px; margin-bottom: 6px; }
.road-node .rr-line { white-space: nowrap; }
.road-node .rn-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: #241539; border: 2px solid rgba(255,255,255,.16); margin-bottom: 34px; }
.road-node .rn-lvl { position: absolute; bottom: 22px; font-size: 9.5px; font-weight: 800; color: var(--muted); }
.road-node .rn-claim { position: absolute; bottom: 0; font-size: 10px; font-weight: 900; color: #1a1030;
  border: none; border-radius: 9px; padding: 4px 10px; cursor: pointer;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 12px rgba(245,197,66,.6); animation: claim-pulse 1.3s ease-in-out infinite; }
.rn-claim.all { position: static; padding: 8px 12px; font-size: 11px; flex: 0 0 auto; }
@keyframes claim-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.road-node .rn-done { position: absolute; bottom: 0; font-size: 9px; font-weight: 800; color: var(--ok); }
.road-node.locked { opacity: .5; filter: saturate(.6); }
.road-node.claimable .rn-dot { border-color: var(--gold);
  box-shadow: 0 0 14px rgba(245,197,66,.85), 0 0 30px rgba(245,197,66,.35);
  animation: node-glow 1.4s ease-in-out infinite; }
.road-node.claimable .rn-reward { border-color: rgba(245,197,66,.65); background: rgba(245,197,66,.16);
  box-shadow: 0 0 12px rgba(245,197,66,.25); }
.road-node.claimed .rn-dot { border-color: var(--ok); box-shadow: 0 0 8px rgba(34,197,94,.4); }
@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(245,197,66,.6); }
  50%      { box-shadow: 0 0 20px rgba(245,197,66,1), 0 0 40px rgba(245,197,66,.45); }
}
.road-node.rn-big { flex-basis: 118px; width: 118px; }
.road-node.rn-big .rn-dot { width: 48px; height: 48px; font-size: 21px; margin-bottom: 25px;
  background: radial-gradient(circle at 36% 26%, #3c2468, #1c1030); border-width: 3px;
  border-color: rgba(245,197,66,.6); box-shadow: 0 0 16px rgba(168,85,247,.5); }
.road-node.rn-big .rn-reward { border-width: 2px; font-size: 10px;
  background: linear-gradient(160deg, rgba(245,197,66,.16), rgba(124,58,237,.14));
  border-color: rgba(245,197,66,.5); box-shadow: 0 0 14px rgba(245,197,66,.2); }
.road-node.rn-big .rn-lvl { font-size: 11px; color: var(--gold-2); text-shadow: 0 0 8px rgba(245,197,66,.6); }

/* ---- Wheel Tickets ---- */
.tickets { display: flex; flex-direction: column; gap: 8px; }
.tick-reel { margin-bottom: 4px; }
.ticket-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
.ticket-row .ticket-ico { font-size: 22px; }
.ticket-row .ticket-info { flex: 1; display: flex; flex-direction: column; }
.ticket-row .ticket-info small { color: var(--muted); font-size: 11px; }
.ticket-row.empty { opacity: .6; }
.ticket-row.common { border-color: rgba(156,163,175,.4); }
.ticket-row.rare { border-color: rgba(56,189,248,.45); }
.ticket-row.epic { border-color: rgba(168,85,247,.5); }
.ticket-row.legendary { border-color: rgba(245,197,66,.55); background: linear-gradient(160deg, rgba(245,197,66,.08), rgba(0,0,0,.3)); }
.ticket-row.royal { border-color: rgba(245,197,66,.5); }
.ticket-spin { border: none; border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 900;
  color: #1a1030; cursor: pointer; background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 10px rgba(245,197,66,.5); }
.ticket-locked { color: var(--muted); font-size: 12px; }
.ticket-count { font-size: 20px; font-weight: 900; color: var(--gold-2); min-width: 24px; text-align: center; }
.ticket-row.empty .ticket-count { color: var(--muted); }
.ticket-cooling { color: var(--muted); font-size: 11px; }
.ticket-odds summary { font-size: 11px; }

/* legal note under every wheel */
.wheel-legal { margin-top: 7px; font-size: 10px; color: var(--muted); text-align: center; }

/* royal wheel card (renamed premium) */
.wheel-card.royal { border-color: rgba(245,197,66,0.5); background: linear-gradient(160deg, rgba(245,197,66,0.12), rgba(18,10,31,0.6)); }
.wheel-card.royal .wheel-head b { color: var(--gold-2); }

/* name-colour picker */
.namecolor-box { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 12px; }
.namecolor-box.off { color: var(--muted); font-size: 12px; line-height: 1.4; }
.nc-head { font-size: 13px; margin-bottom: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 0 8px var(--gold); }
.swatch-clear { margin-top: 10px; background: rgba(255,255,255,0.08); color: var(--text); border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer; }

/* ==================================================================
   v3.26 — RIFT EVENTS, 10-DMG rule, premium indicator, skill-penalty table
   ================================================================== */
/* Premium fab shows an ACTIVE state (gold ring + days left) for members */
.premium-fab.active {
  background: linear-gradient(180deg, #2b1c4d, #171031);
  border: 2px solid var(--gold); color: var(--gold-2);
  box-shadow: 0 0 14px rgba(245,197,66,.55);
}

/* RIFT EVENT CTA — right edge, above the chat pill, same pill family */
.rift-cta {
  position: absolute; right: 0; bottom: 352px; z-index: 25;
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px 7px 11px; border: none; border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #ff7849, #c2410c);
  color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 5px 14px rgba(194,65,12,0.5);
}
.rift-cta span { font-size: 10px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.rift-cta:active { transform: translateY(1px); }
.rift-cta.live { animation: rift-live 1.1s ease-in-out infinite; }
@keyframes rift-live {
  0%,100% { box-shadow: 0 5px 14px rgba(194,65,12,.5); filter: brightness(1); }
  50%     { box-shadow: 0 0 22px rgba(255,120,73,.95); filter: brightness(1.25); }
}

/* 🌀 Rift Points chip in the HUD (visible only while an event is live) */
.sh-item.rift-chip { border-color: rgba(255,120,73,.6); color: #ffb59a; background: rgba(120,45,10,.35); }
.sh-item.rift-chip b { color: #ffd9c2; }

/* --- Rift modal --- */
.rift-hero { text-align: center; padding: 16px 12px 14px; border-radius: var(--radius); margin-bottom: 12px;
  background: linear-gradient(160deg, rgba(194,65,12,.25), rgba(18,10,31,.7));
  border: 1px solid rgba(255,120,73,.4); }
.rift-hero.live { border-color: rgba(255,120,73,.8); box-shadow: 0 0 24px rgba(255,120,73,.3), inset 0 0 30px rgba(194,65,12,.15); }
.rift-hero h3 { margin: 4px 0 6px; font-size: 19px; letter-spacing: 1px; color: #ffd9c2; }
.rift-flame { font-size: 40px; filter: drop-shadow(0 0 14px rgba(255,120,73,.8)); }
.rift-hero.live .rift-flame { animation: rift-live 1.1s ease-in-out infinite; border-radius: 50%; }
.rift-timer { font-size: 13px; color: var(--muted); }
.rift-timer b { color: #fff; font-variant-numeric: tabular-nums; }
.rift-burst { color: var(--gold-2); font-weight: 900; animation: rage-pulse .7s infinite; }
.rift-mystats { display: flex; justify-content: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.rift-mystats span { font-size: 12px; font-weight: 800; color: #ffb59a; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,120,73,.4); border-radius: 20px; padding: 4px 12px; }
.rift-mystats b { color: #fff; }
.rift-fx { margin-top: 10px; padding: 7px 10px; border-radius: 10px; font-size: 12px; color: #ffe9c2;
  background: rgba(245,197,66,.14); border: 1px solid rgba(245,197,66,.45); animation: rage-pulse 1.2s infinite; }

.rift-levels { display: flex; flex-direction: column; gap: 6px; }
.rift-lvl { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 11px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.09); }
.rift-lvl.done { border-color: rgba(74,222,128,.45); background: rgba(22,101,52,.18); }
.rift-lvl.next { border-color: rgba(255,120,73,.65); box-shadow: 0 0 10px rgba(255,120,73,.25); }
.rift-lvl .rl-dot { font-size: 16px; }
.rift-lvl .rl-info { display: flex; flex-direction: column; gap: 1px; font-size: 12px; min-width: 0; }
.rift-lvl .rl-info b { color: #ffd9c2; }
.rift-lvl .rl-info small { color: var(--gold-2); font-weight: 700; }
.rift-lvl .rl-bar { margin-left: auto; width: 64px; height: 7px; border-radius: 4px; flex: 0 0 auto;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.rift-lvl .rl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7849, #f59e0b); }

.rift-prizes { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.rift-prize { font-size: 12px; padding: 6px 10px; border-radius: 9px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
.rift-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; font-size: 12.5px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); margin-bottom: 4px; }
.rift-row.me { border-color: rgba(255,120,73,.6); background: rgba(120,45,10,.25); }
.rift-row .rank { font-weight: 900; min-width: 28px; }
.rift-row .lb-dmg { margin-left: auto; color: #ffb59a; font-weight: 800; }

.rift-shards { background: rgba(0,0,0,.28); border: 1px solid rgba(167,139,250,.4); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rs-count { font-size: 14px; }
.rs-count b { color: #c4b5fd; font-size: 17px; }
.rs-note { font-size: 11px; color: var(--muted); }
.rift-shards .btn-gold { width: 100%; }
.rift-shards .btn-gold:disabled { opacity: .45; cursor: not-allowed; }
.rift-points-guide { margin-top: 10px; }

/* --- skill-penalty table (How to Play) --- */
.pen-table { border: 1px solid rgba(255,107,107,.35); border-radius: 11px; overflow: hidden; margin: 8px 0; }
.pen-row { display: flex; justify-content: space-between; padding: 6px 12px; font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.05); }
.pen-row:last-child { border-bottom: none; }
.pen-row:nth-child(even) { background: rgba(255,255,255,.03); }
.pen-row.pen-head { background: rgba(255,107,107,.16); font-weight: 900; color: #ffb4b4; letter-spacing: .3px; }
.pen-val { color: #ff8484; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ==================================================================
   v3.27 — Rift Missions, LVL-badge glow, collapsed mini-lb
   ================================================================== */
.lvl-badge.glow { animation: fab-glow 1.2s ease-in-out infinite; }

/* Rift Missions — 3 per event, same for the whole world */
.rift-missions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rift-mission { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(124,58,237,.14), rgba(0,0,0,.3));
  border: 1px solid rgba(167,139,250,.4); }
.rift-mission.done { border-color: rgba(74,222,128,.5); background: rgba(22,101,52,.16); }
.rift-mission .rm-ico { font-size: 20px; filter: drop-shadow(0 0 6px rgba(167,139,250,.6)); }
.rift-mission .rm-info { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 0; flex: 1; }
.rift-mission .rm-info b { color: #e9d5ff; letter-spacing: .3px; }
.rift-mission .rm-info small { color: var(--muted); }
.rift-mission .rm-info small b { color: #ffb59a; }
.rift-mission .rm-bar { width: 100%; height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); }
.rift-mission .rm-bar i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease;
  background: linear-gradient(90deg, #a78bfa, #ff7849); }
.rift-mission.done .rm-bar i { background: linear-gradient(90deg, #4ade80, #22c55e); }
.rift-mission .rm-state { font-size: 12px; font-weight: 900; color: #cbb8ff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm-all { text-align: center; padding: 8px 10px; border-radius: 11px; font-size: 12px; color: var(--gold-2);
  background: rgba(245,197,66,.1); border: 1px dashed rgba(245,197,66,.45); }
.rm-all.done { border-style: solid; border-color: rgba(74,222,128,.5); color: #86efac; background: rgba(22,101,52,.16); }

/* ==================================================================
   v4.0 — time-based champions, boosts, contracts, cosmetics, jackpot,
   layout-stability fixes, low-performance mode, safe-area
   ================================================================== */
/* --- layout stability: attack area must NEVER move surrounding UI (#95-97) --- */
.hud { min-height: 158px; }
.attack-btn { will-change: transform, filter; }
.attack-btn:active, .attack-btn.charging { transform: scale(.97); } /* transform-only — no reflow */
.attack-sub { display: block; min-height: 15px; line-height: 15px; }  /* fixed line, no height jump */
.event-timers { min-height: 22px; }
.skill-hud { min-height: 26px; flex-wrap: wrap; }
.ws-target { will-change: left, top; contain: layout; }
.bottom-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } /* iPhone bar */
.premium-fab, .gchat-cta, .rift-cta { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* --- active-boost chip (near the attack button, injected into #event-timers) --- */
.boost-chip { background: rgba(120,45,10,.4) !important; border: 1px solid rgba(255,120,73,.55) !important;
  color: #ffb59a !important; font-weight: 800; animation: rage-pulse 1.6s infinite; }

/* --- v4 champion cards --- */
.char-card.v4 { position: relative; border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  box-shadow: 0 4px 16px rgba(0,0,0,.35), inset 0 0 22px color-mix(in srgb, var(--rar) 10%, transparent); }
.char-card.v4.locked { opacity: .78; }
.char-card.v4.selected { border-color: var(--gold); box-shadow: 0 0 16px rgba(245,197,66,.35); }
.char-state { position: absolute; top: 6px; right: 6px; font-size: 8px; font-weight: 900; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 8px; background: rgba(0,0,0,.5); color: var(--muted); }
.char-state.active { color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.char-state.selected { color: #120a1f; background: var(--gold); }
.char-state.expired { color: #ffb4b4; border: 1px solid rgba(255,107,107,.4); }
.char-ability { margin: 5px 0 2px; padding: 5px 7px; border-radius: 9px; background: rgba(124,58,237,.14);
  border: 1px solid rgba(167,139,250,.3); display: flex; flex-direction: column; gap: 1px; }
.char-ability b { font-size: 10.5px; color: #d6c6ff; }
.char-ability small { font-size: 9px; color: var(--muted); line-height: 1.35; }
.char-ability.none { opacity: .5; }
.char-time { font-size: 10px; font-weight: 800; margin: 3px 0; }
.char-time.on { color: #4ade80; }
.char-time.off { color: var(--muted); }
.char-time.free { color: var(--gold-2); }
.char-buys { display: flex; gap: 4px; margin: 4px 0 2px; }
.cb-time { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer;
  padding: 5px 2px; border-radius: 9px; border: 1px solid rgba(245,197,66,.4); background: rgba(245,197,66,.1);
  color: var(--gold-2); font-size: 10px; font-weight: 900; }
.cb-time i { font-style: normal; font-size: 8.5px; color: var(--muted); }
.cb-time:active { transform: translateY(1px); }
.char-addtime { font-size: 8.5px; color: var(--muted); text-align: center; margin-bottom: 4px; letter-spacing: .3px; }

/* --- boosts & contracts --- */
.boost-actives { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.boost-active-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 11px;
  border-radius: 10px; background: rgba(120,45,10,.25); border: 1px solid rgba(255,120,73,.5); }
.boost-active-row .ba-left { margin-left: auto; color: #ffb59a; font-weight: 800; font-size: 11px; }
.boost-grid { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.boost-card, .contract-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
  background: linear-gradient(160deg, rgba(124,58,237,.12), rgba(0,0,0,.32)); border: 1px solid rgba(167,139,250,.35); }
.boost-card .bc-ico, .contract-card .bc-ico { font-size: 24px; filter: drop-shadow(0 0 8px rgba(255,120,73,.5)); }
.bc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bc-info b { font-size: 13px; }
.bc-info small { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.contract-card { margin-bottom: 6px; }
.contract-card.live { border-color: rgba(74,222,128,.5); }
.contract-card.done { opacity: .75; }
.ct-prog { font-size: 12px; font-weight: 900; color: #4ade80; white-space: nowrap; }
.ct-done { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* --- tickets tab / cosmetics --- */
.tk-buy-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; margin-bottom: 6px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); }
.tk-buy-row.rare { border-color: rgba(56,189,248,.4); }
.tk-buy-row.epic { border-color: rgba(168,85,247,.45); }
.nc-buys { display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.nc-buys .pack-buy { flex: 1; min-width: 100px; }
.fx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fx-card { padding: 10px; border-radius: 13px; text-align: center; display: flex; flex-direction: column; gap: 5px;
  background: rgba(0,0,0,.3); border: 1px solid color-mix(in srgb, var(--fx) 45%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--fx) 10%, transparent); }
.fx-card .fx-ico { font-size: 26px; filter: drop-shadow(0 0 10px var(--fx)); }
.fx-card b { font-size: 11.5px; }
.fx-card.owned { border-color: #4ade80; }
.fx-active { color: #4ade80; font-weight: 800; font-size: 9px; }
.fx-buys { display: flex; gap: 4px; }
.fx-buy { flex: 1; padding: 5px 2px; border-radius: 8px; border: 1px solid rgba(245,197,66,.4);
  background: rgba(245,197,66,.1); color: var(--gold-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.hitfx-burst { position: absolute; font-size: 30px; pointer-events: none; animation: hitfx-pop .65s ease-out forwards;
  filter: drop-shadow(0 0 14px var(--fx)); z-index: 6; }
/* the local player's own effect — bigger + a coloured glow ring so it clearly reads */
.hitfx-burst.big { font-size: 50px; animation: hitfx-pop-big .8s ease-out forwards;
  filter: drop-shadow(0 0 10px var(--fx)) drop-shadow(0 0 26px var(--fx)); }
@keyframes hitfx-pop { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(.9) translateY(-30px); opacity: 0; } }
@keyframes hitfx-pop-big { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 22% { transform: scale(1.55) rotate(4deg); opacity: 1; } 100% { transform: scale(1.05) translateY(-46px) rotate(0); opacity: 0; } }

/* --- premium tab offers --- */
.prem-offer { padding: 14px; border-radius: var(--radius); margin-bottom: 10px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; }
.prem-offer.big { background: linear-gradient(160deg, rgba(245,197,66,.16), rgba(18,10,31,.6)); border: 1px solid rgba(245,197,66,.5); }
.prem-offer.starter { background: rgba(124,58,237,.12); border: 1px solid rgba(167,139,250,.4); }
.po-head { font-size: 15px; letter-spacing: .5px; }
.po-perks { font-size: 11.5px; color: var(--muted); }

/* --- event shop --- */
.es-head { padding: 11px 13px; border-radius: 12px; font-size: 13px; margin-bottom: 10px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,120,73,.35); }
.es-head.live { border-color: rgba(255,120,73,.8); box-shadow: 0 0 14px rgba(255,120,73,.25); }
.es-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; margin-bottom: 6px;
  background: rgba(120,45,10,.16); border: 1px solid rgba(255,120,73,.35); }
.es-row .es-label { font-size: 13px; }
.es-row .pack-buy { margin-left: auto; }
.es-row .pack-buy:disabled { opacity: .45; cursor: not-allowed; }

/* --- confirm-spend overlay (10,000+ 💎) --- */
.confirm-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(5,2,12,.75); backdrop-filter: blur(4px); }
.confirm-box { width: min(320px, 88vw); padding: 20px; border-radius: 18px; text-align: center;
  background: linear-gradient(170deg, #241242, #120a1f); border: 1px solid rgba(245,197,66,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.7); }
.cb-ico { font-size: 34px; margin-bottom: 6px; }
.cb-txt { font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.cb-row { display: flex; gap: 8px; }
.cb-row button { flex: 1; }

/* --- LEGENDARY JACKPOT overlay --- */
.jackpot-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(80% 80% at 50% 45%, rgba(245,197,66,.28), rgba(5,2,12,.92)); animation: jp-in .4s ease-out; }
.jackpot-overlay.out { opacity: 0; transition: opacity .5s; }
.jp-inner { text-align: center; animation: jp-pop .6s cubic-bezier(.2,1.4,.4,1); }
.jp-burst { font-size: 54px; animation: jp-spin 2.4s ease-in-out infinite; }
.jp-title { font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #ffd76a;
  text-shadow: 0 0 30px rgba(245,197,66,.95), 0 4px 14px #000; margin: 8px 0 4px; }
.jp-label { font-size: 18px; font-weight: 800; color: #fff; }
@keyframes jp-in { from { opacity: 0; } }
@keyframes jp-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes jp-spin { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.15); } }

/* --- ability & combo grade fx --- */
.grade-fx.ability { color: #c4b5fd; font-size: 20px; text-shadow: 0 0 14px rgba(167,139,250,1), 0 2px 8px #000; }
.dmg-num.ability-dmg { color: #c4b5fd; font-size: 32px; text-shadow: 0 0 14px rgba(167,139,250,1), 0 2px 8px #000; }
.wheel-card.drift { border-color: rgba(103,232,249,.5); background: linear-gradient(160deg, rgba(103,232,249,.1), rgba(18,10,31,.6)); }
.grade-fx.combo-mile { color: #ff9f5a; font-size: 28px; text-shadow: 0 0 16px rgba(255,120,73,1), 0 2px 10px #000; }
.dmg-num.golden { font-size: 30px; }

/* --- HP bar premium polish: damage tick flash --- */
.hp-bar { height: 24px; border-radius: 14px; }
.hp-fill { transition: width .35s cubic-bezier(.22,1,.36,1); }
.hp-wrap { position: relative; }

/* --- low-performance mode: strip heavy animations (#61-62) --- */
body.lowfx .arena::before, body.lowfx .hp-fill::after, body.lowfx .attack-btn::before { animation: none !important; opacity: .15; }
body.lowfx .boss-emoji, body.lowfx .rift-cta.live, body.lowfx .free-wheel-hint.ready,
body.lowfx .prize-ribbon, body.lowfx .online-dot, body.lowfx .jp-burst { animation: none !important; }
body.lowfx .boss.hit { animation: none !important; }
body.lowfx * { backdrop-filter: none !important; }

/* ===================== Batch 2 — onboarding & daily retention ===================== */
/* daily login calendar */
.daily-wrap { text-align: center; }
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.daily-cell { position: relative; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border, rgba(124,58,237,.35));
  background: rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 74px; }
.daily-cell .daily-day { font-size: 11px; color: var(--muted); font-weight: 700; }
.daily-cell .daily-reward { font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.2; }
.daily-cell.done { opacity: .55; border-color: rgba(34,197,94,.5); }
.daily-cell.today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(245,197,66,.4); background: rgba(245,197,66,.08); animation: daily-pulse 1.6s ease-in-out infinite; }
.daily-cell.locked { opacity: .8; }
.daily-cell .daily-tag { position: absolute; top: -8px; right: -4px; font-size: 9px; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; border-radius: 8px; padding: 1px 6px; }
.daily-cell.done .daily-tag { background: var(--ok); color: #06210f; }
@keyframes daily-pulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* new-player mission tracker chip (top-left, under the LVL badge) */
.newbie-tracker { position: absolute; top: 96px; left: 8px; z-index: 26; max-width: 176px;
  background: linear-gradient(180deg, rgba(124,58,237,.28), rgba(18,10,31,.9)); border: 1px solid rgba(124,58,237,.6);
  border-radius: 12px; padding: 7px 10px; box-shadow: 0 6px 20px rgba(124,58,237,.35); pointer-events: none; }
.newbie-tracker .nt-head { font-size: 10.5px; font-weight: 900; color: var(--gold-2); letter-spacing: .3px; }
.newbie-tracker .nt-goal { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 2px; line-height: 1.25; }
.newbie-tracker .nt-reward { font-size: 11px; color: #7dd3fc; margin-top: 2px; }
body.lowfx .daily-cell.today { animation: none !important; }
@media (max-width: 480px) { .newbie-tracker { max-width: 150px; top: 88px; } .daily-cell { min-height: 66px; } }

/* ===================== Batch 3 — tasks, challenges, boss pass ===================== */
.tasks-cta {
  position: absolute; right: 0; bottom: 404px; z-index: 25;
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px 7px 11px; border: none; border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #34d399, #059669);
  color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 5px 14px rgba(5,150,105,0.5);
}
.tasks-cta span { font-size: 10px; letter-spacing: 1px; }
.tasks-cta:active { transform: translateY(1px); }
.tasks-cta .nav-badge { position: absolute; top: -4px; left: -4px; }
.tasks-cta.glow { animation: tasks-glow 1s ease-in-out infinite; }
@keyframes tasks-glow { 0%,100% { box-shadow: 0 5px 14px rgba(5,150,105,.5); } 50% { box-shadow: 0 0 22px 4px rgba(52,211,153,.9); } }
.tasks-cta { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* task cards */
.task-subtabs { margin-bottom: 10px; }
.task-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid rgba(124,58,237,.3); background: rgba(0,0,0,.25); }
.task-card.done { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.06); }
.task-main { flex: 1; min-width: 0; }
.task-goal { font-size: 13.5px; font-weight: 700; color: var(--text); }
.task-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); margin: 6px 0 4px; overflow: hidden; }
.task-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #34d399, #059669); transition: width .4s ease; }
.task-reward { font-size: 11.5px; color: var(--gold-2); }
.task-action { flex-shrink: 0; }
.task-claim { padding: 6px 14px; font-size: 13px; }
.task-claimed { font-size: 12px; color: var(--ok); font-weight: 800; }
.task-prog-txt { font-size: 12px; color: var(--muted); font-weight: 700; }

/* boss pass */
.bp-legend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; font-size: 10.5px; font-weight: 800;
  color: var(--muted); text-align: center; margin-bottom: 6px; letter-spacing: .5px; }
.bp-track { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bp-tier { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: stretch; opacity: .55; }
.bp-tier.reached { opacity: 1; }
.bp-xp { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--text);
  border-radius: 10px; background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.3); padding: 6px 4px; text-align: center; }
.bp-cell { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 6px 4px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25); min-height: 52px; }
.bp-cell.premium { border-color: rgba(245,197,66,.35); background: rgba(245,197,66,.05); }
.bp-cell.ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bp-cell.claimed { opacity: .55; }
.bp-reward { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.2; }
.bp-claim { padding: 3px 10px; font-size: 11.5px; }
.bp-claimed { color: var(--ok); font-weight: 900; font-size: 14px; }
.bp-lock, .bp-lockxp { font-size: 11px; color: var(--muted); }
.bp-prem-on { text-align: center; font-weight: 800; color: var(--gold-2); padding: 8px; }
body.lowfx .tasks-cta.glow { animation: none !important; }
@media (max-width: 480px) { .bp-reward { font-size: 10px; } .bp-xp { font-size: 10.5px; } }

/* ===================== Batch 4 — badges, shout, recovery ===================== */
/* badge grid on the profile */
.badge-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 10px; }
.badge-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 3px; border-radius: 12px;
  border: 1px solid rgba(124,58,237,.28); background: rgba(0,0,0,.25); text-align: center; }
.badge-chip.earned { border-color: var(--gold); background: rgba(245,197,66,.08); box-shadow: 0 0 10px rgba(245,197,66,.2); }
.badge-chip.locked { opacity: .5; filter: grayscale(.6); }
.badge-emoji { font-size: 22px; line-height: 1; }
.badge-name { font-size: 8.5px; font-weight: 700; color: var(--text); line-height: 1.15; }

/* global shout composer + banner */
.shout-open-btn { width: 100%; margin-bottom: 8px; }
.shout-input { width: 100%; padding: 12px 13px; margin: 10px 0; border-radius: 10px; border: 1px solid rgba(124,58,237,.4);
  background: rgba(0,0,0,.3); color: var(--text); font-size: 16px; outline: none; -webkit-appearance: none; }
.shout-input:focus { border-color: var(--gold); }
.shout-banner { position: absolute; top: 52px; left: 50%; transform: translate(-50%, -20px); z-index: 60; max-width: 92%;
  padding: 9px 14px; border-radius: 12px; background: linear-gradient(180deg, #7c3aed, #4c1d95);
  border: 1px solid var(--gold); box-shadow: 0 8px 26px rgba(0,0,0,.5); color: #fff; font-size: 13px; font-weight: 600;
  opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; text-align: center; }
.shout-banner.show { transform: translate(-50%, 0); opacity: 1; }
.shout-badge { font-weight: 900; color: var(--gold-2); letter-spacing: .5px; margin-right: 4px; }

/* recovery boost offer (bottom, above attack area) */
/* side-anchored compact offer card — slides in from the RIGHT edge, never covers
   the arena centre (per request). Recovery = red theme. */
.recovery-offer { position: absolute; right: 8px; left: auto; bottom: 168px; transform: translateX(118%); z-index: 40;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 172px; padding: 10px 11px 9px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(220,38,38,.9), rgba(127,29,29,.92)); border: 1px solid #fca5a5;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.recovery-offer.show { transform: translateX(0); opacity: .97; }
.recovery-offer .ro-txt { font-size: 11.5px; color: #fff; font-weight: 600; line-height: 1.35; padding-right: 12px; }
.recovery-offer .ro-buy { width: 100%; padding: 7px 10px; font-size: 12px; white-space: nowrap; }
.recovery-offer .ro-x { position: absolute; top: 3px; right: 5px; background: none; border: none; color: #fecaca; font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; }
body.lowfx .shout-banner, body.lowfx .recovery-offer { transition: opacity .2s ease !important; }
@media (max-width: 480px) { .badge-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; } .badge-name { font-size: 8px; } }

/* ===================== Batch 5 — cosmic depth + polish ===================== */
/* drifting particle/star field behind the boss (additive, no layout impact) */
.arena-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .5; }
.arena-fx::before, .arena-fx::after {
  content: ''; position: absolute; inset: -20%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(196,181,253,.7), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(147,197,253,.6), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 12% 80%, rgba(196,181,253,.6), transparent);
  background-repeat: repeat; background-size: 300px 300px;
  animation: drift 28s linear infinite;
}
.arena-fx::after { background-size: 220px 220px; opacity: .6; animation-duration: 44s; animation-direction: reverse; }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-40px,-60px,0); } }
body.lowfx .arena-fx { display: none; }

/* Modal entrance: OPACITY ONLY. Never animate the modal's transform — ending at
   `transform: none` used to strip the translateZ(0) layer and flash-repaint on
   Samsung ("out and in"). Fading keeps the composited layer intact the whole time. */
.modal { animation: modal-in .16s ease-out; }
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.btn-gold, .btn-primary, .btn-ghost { transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.btn-gold:hover, .btn-primary:hover { filter: brightness(1.08); }
.btn-gold:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px) scale(.99); }
.section-title { letter-spacing: .3px; }
body.lowfx .modal { animation: none !important; }

/* reward side-pop gets a subtle sparkle sweep */
.side-pop.lvlup::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%); animation: sweep 1.1s ease .1s 1;
}
@keyframes sweep { to { transform: translateX(120%); } }
body.lowfx .side-pop.lvlup::after { display: none; }

/* ===================== Batch 6 — boss history, stats, referral ===================== */
/* boss history cards */
.bh-card { padding: 11px 13px; margin-bottom: 9px; border-radius: 12px; border: 1px solid rgba(124,58,237,.3); background: rgba(0,0,0,.25); }
.bh-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.bh-head b { color: var(--gold-2); font-size: 14px; }
.bh-when { font-size: 10px; color: var(--muted); white-space: nowrap; }
.bh-row { font-size: 12px; color: var(--text); line-height: 1.5; }

/* my-stats grid */
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ms-cell { padding: 12px 6px; border-radius: 12px; border: 1px solid rgba(124,58,237,.28); background: rgba(0,0,0,.25); text-align: center; }
.ms-val { font-size: 17px; font-weight: 900; color: var(--gold-2); line-height: 1.1; }
.ms-lbl { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

/* referral share buttons */
.share-row { display: flex; gap: 6px; margin-top: 8px; }
.share-btn { flex: 1; padding: 8px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; transition: transform .12s ease, filter .2s ease; }
.share-btn:active { transform: translateY(1px); }
.share-btn:hover { filter: brightness(1.1); }
.share-btn.discord { background: linear-gradient(180deg, #7289da, #4e5d94); }
.share-btn.tiktok { background: linear-gradient(180deg, #333, #111); border-color: rgba(37,244,238,.5); }
.share-btn.youtube { background: linear-gradient(180deg, #ff4e45, #c4302b); }

/* profile "More" row */
.more-row { display: flex; gap: 8px; }
.more-row .btn-ghost { flex: 1; }

/* ===================== Batch 7 — titles + frames ===================== */
.cos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.cos-grid.frames { grid-template-columns: repeat(2, 1fr); }
.cos-card { padding: 10px; border-radius: 12px; border: 1px solid rgba(124,58,237,.28); background: rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cos-card.owned { border-color: rgba(34,197,94,.4); }
.cos-card.equipped { border-color: var(--gold); box-shadow: 0 0 12px rgba(245,197,66,.3); background: rgba(245,197,66,.06); }
.cos-name { font-size: 12.5px; font-weight: 800; color: var(--gold-2); }
.cos-frame-prev { width: 42px; height: 42px; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0,0,0,.3); }
.cos-buys { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cos-buy { padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(124,58,237,.25);
  color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.cos-buy:active { transform: translateY(1px); }
.cos-btn { padding: 6px 16px; border-radius: 9px; border: none; font-size: 12px; font-weight: 800; cursor: pointer; }
.cos-btn.eq { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #120a1f; }
.cos-btn.off { background: rgba(255,255,255,.12); color: var(--text); }
/* profile title + framed avatar */
.profile-title { font-size: 12px; font-weight: 800; color: var(--gold-2); letter-spacing: .5px; margin: -2px 0 2px; }
.crest.big.framed { border: 3px solid; }

/* ===================== Batch 8 — taunt, celebration, deal, crown ===================== */
.shout-banner.taunt { background: linear-gradient(180deg, #dc2626, #7f1d1d); border-color: #fca5a5; }
.chat-cta-row { display: flex; gap: 6px; margin-bottom: 8px; }
.chat-cta-row .shout-open-btn { flex: 1; margin-bottom: 0; font-size: 12px; padding: 8px 6px; }

/* daily deal banner */
.deal-banner { margin-bottom: 12px; padding: 12px; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, rgba(245,197,66,.16), rgba(124,58,237,.16)); border: 1px solid var(--gold); }
.deal-star { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: var(--gold-2); }
.deal-label { font-size: 14px; font-weight: 800; color: var(--text); margin: 5px 0 9px; }

/* full-screen boss-death celebration */
.celebration-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.celebration-overlay.show { opacity: 1; }
.cel-core { font-size: 84px; text-align: center; animation: cel-pop .5s cubic-bezier(.22,1.4,.36,1); filter: drop-shadow(0 0 24px rgba(245,197,66,.8)); }
.cel-name { font-size: 20px; font-weight: 900; color: var(--gold-2); text-shadow: 0 2px 12px rgba(0,0,0,.7); margin-top: -6px; }
@keyframes cel-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.cel-particle { position: absolute; left: 50%; top: 50%; font-size: 30px;
  animation: cel-fly var(--d) ease-out forwards; }
@keyframes cel-fly { from { transform: translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.4); opacity: 1; }
  to { transform: translate(-50%,-50%) rotate(var(--a)) translateY(-220px) scale(1); opacity: 0; } }
body.lowfx .celebration-overlay { transition: opacity .15s ease; } body.lowfx .cel-particle { display: none; }

/* ===================== Batch 9 — premium extras + offers ===================== */
.comeback-gift { margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(245,197,66,.1);
  border: 1px solid var(--gold); font-size: 13px; color: var(--text); }
.prem-mission { margin-bottom: 12px; }
.emote-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 4px; margin-top: 6px;
  border-top: 1px solid rgba(124,58,237,.25); }
.emote-lbl { font-size: 13px; margin-right: 2px; }
.emote-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(124,58,237,.18); font-size: 16px; cursor: pointer; padding: 0; }
.emote-btn:active { transform: scale(.92); }
/* side-anchored offer card — slides in from the RIGHT, purple/gold theme, distinct
   from the red Recovery card and never blocks the arena centre. */
.death-offer { position: absolute; right: 8px; left: auto; bottom: 168px; transform: translateX(118%); z-index: 55;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 176px; padding: 10px 11px 9px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,.94), rgba(76,29,149,.94)); border: 1px solid var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.death-offer.show { transform: translateX(0); opacity: .97; }
.death-offer .do-txt { font-size: 11.5px; color: #fff; line-height: 1.35; padding-right: 12px; }
.death-offer .do-go { width: 100%; padding: 7px 10px; font-size: 12px; white-space: nowrap; }
.death-offer .do-x { position: absolute; top: 3px; right: 5px; background: none; border: none; color: #ddd6fe; font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; }

/* ===================== Batch 10 — notifications, admin, mastery, loader ===================== */
/* notification bell (top-right, left of the gear) */
.notif-fab { position: absolute; top: 8px; right: 44px; z-index: 31; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(124,58,237,.5); background: rgba(18,10,31,.8); color: #fff; font-size: 15px; cursor: pointer; padding: 0; }
.notif-fab .nav-badge { position: absolute; top: -4px; right: -4px; }
.notif-list { display: flex; flex-direction: column; gap: 7px; }
.notif-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(124,58,237,.3); background: rgba(0,0,0,.25); color: var(--text); font-size: 13px; cursor: pointer; text-align: left; }
.notif-row:active { transform: translateY(1px); }
.notif-ico { font-size: 18px; }
.notif-go { margin-left: auto; color: var(--gold); font-size: 18px; font-weight: 900; }

/* champion mastery badge on the card */
.char-mastery { position: absolute; top: 6px; left: 6px; font-size: 9.5px; font-weight: 800; padding: 2px 6px;
  border-radius: 8px; background: rgba(245,197,66,.15); border: 1px solid rgba(245,197,66,.5); color: var(--gold-2); z-index: 2; }
.char-card.v4.mastered { box-shadow: 0 0 0 1px rgba(245,197,66,.35), 0 6px 18px rgba(0,0,0,.4); }

/* boss-death cinematic flash (layered under the victory banner) */
@keyframes cinematic-flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
.boss.dying { animation: boss-die 1s ease forwards; }
@keyframes boss-die { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.12); filter: brightness(2.4) saturate(1.6); } 100% { transform: scale(.2) rotate(12deg); opacity: 0; } }

/* branded loading screen */
#boot-loader { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(80% 60% at 50% 40%, #241436, #0a0614 70%); transition: opacity .5s ease; }
#boot-loader.gone { opacity: 0; pointer-events: none; }
.bl-logo { font-size: 32px; font-weight: 900; letter-spacing: 2px; color: #fff; text-shadow: 0 0 24px rgba(124,58,237,.9); }
.bl-logo span { color: var(--gold-2); }
.bl-bar { width: 180px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.bl-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #7c3aed, var(--gold)); animation: bl-load 1s ease-in-out infinite; }
@keyframes bl-load { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.bl-msg { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
body.lowfx .bl-bar i { animation-duration: 1.6s; }

/* ===================== Batch 11 — champion auras + party vault ===================== */
.char-card.v4.auraed { border-color: var(--aura); box-shadow: 0 0 0 1px var(--aura), 0 0 22px color-mix(in srgb, var(--aura) 60%, transparent); }
.char-card.v4.auraed .char-emoji { filter: drop-shadow(0 0 10px var(--aura)); }
body.has-aura .attack-btn { box-shadow: 0 0 18px color-mix(in srgb, var(--aura) 55%, transparent), 0 8px 20px rgba(0,0,0,.4); }
body.has-aura .lvl-badge { box-shadow: 0 0 12px color-mix(in srgb, var(--aura) 45%, transparent); }
/* Champion aura → a glowing FRAME around your character on the main screen.
   (Was targeting #player-throne — an id that doesn't exist — so it never showed.) */
body.has-aura .player-throne {
  border-color: var(--aura);
  box-shadow: 0 0 0 2px var(--aura), 0 0 20px 3px color-mix(in srgb, var(--aura) 65%, transparent),
              inset 0 0 16px color-mix(in srgb, var(--aura) 30%, transparent);
  animation: aura-pulse 2.4s ease-in-out infinite;
}
body.has-aura .player-emoji { filter: drop-shadow(0 0 8px var(--aura)); }
@keyframes aura-pulse { 0%,100% { box-shadow: 0 0 0 2px var(--aura), 0 0 16px 2px color-mix(in srgb, var(--aura) 55%, transparent), inset 0 0 16px color-mix(in srgb, var(--aura) 28%, transparent); }
  50% { box-shadow: 0 0 0 2px var(--aura), 0 0 26px 5px color-mix(in srgb, var(--aura) 75%, transparent), inset 0 0 18px color-mix(in srgb, var(--aura) 34%, transparent); } }
body.lowfx.has-aura .player-throne { animation: none; }
body.lowfx.has-aura .attack-btn { box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.party-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 35%, transparent), rgba(18,10,31,.6)); border: 1px solid var(--pc); }
.party-banner .pb-emoji { font-size: 26px; filter: drop-shadow(0 0 8px var(--pc)); }
.party-banner .pb-badge { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #fff; }
.pv-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.pv-b { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); font-size: 17px; cursor: pointer; }
.pv-b.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pv-c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pv-c.on { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }

/* ===================== Batch 12 — owned hit effects + equip ===================== */
.fx-equip { display: block; width: 100%; margin: 4px 0; padding: 6px 0; border-radius: 9px; border: 1px solid var(--fx);
  background: color-mix(in srgb, var(--fx) 18%, transparent); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: 1px; cursor: pointer; }
.fx-equip:active { transform: scale(.96); }
.fx-owned-tag { display: block; font-size: 10.5px; font-weight: 800; color: var(--fx); letter-spacing: .5px; margin: 2px 0; }
.fx-active { display: block; font-size: 10.5px; font-weight: 900; color: var(--gold); letter-spacing: .5px; margin: 2px 0; }

/* ===================== Batch 13 — purchase UX ===================== */
/* Boost cards: description sits ABOVE the buy button (not beside it). */
.boost-card.v13, .contract-card.v13 { flex-direction: column; align-items: stretch; gap: 6px; }
.boost-card.v13 .bc-top, .contract-card.v13 .bc-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.boost-card.v13 .bc-blurb, .contract-card.v13 .bc-blurb { font-size: 11px; color: var(--muted); line-height: 1.4; }
.boost-card.v13 .pack-buy, .contract-card.v13 .pack-buy { width: 100%; }
/* progress bar + status inside the (now column-layout) diamond-contract cards */
.contract-card.v13 .rm-bar { display: block; width: 100%; height: 6px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.12); }
.contract-card.v13 .rm-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#f5c542,#f59e42); }
.contract-card.v13 .ct-prog, .contract-card.v13 .ct-done { text-align: center; width: 100%; }
.boost-active-row.covered { opacity: .82; } /* keep the EQUIP button readable */
.boost-active-row .ba-left { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; }
.boost-active-row .ba-left.applying { color: #8ef5a0; }
.ba-equip { margin-left: auto; background: linear-gradient(135deg, #f5c542, #f59e42); border: none;
  color: #1a1205; font-weight: 900; font-size: 11px; letter-spacing: .5px; padding: 5px 13px;
  border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(245,158,66,.35); }
.ba-equip:active { transform: scale(.94); }
.confirm-box .cb-bal { font-size: 11.5px; color: var(--muted); margin: 6px 0 2px; }
.confirm-box .cb-short { color: #f87171; font-weight: 700; }

/* ===================== Batch 14 — premium champion ===================== */
.char-state.only-premium { background: linear-gradient(90deg, #b8860b, #f5c542); color: #1a1206; }
.cb-time.getprem { flex: 1; background: linear-gradient(135deg, #b8860b, #f5c542); color: #1a1206; font-weight: 900; }
.po-champ { font-size: 12px; line-height: 1.45; background: rgba(245,197,66,.08); border: 1px solid rgba(245,197,66,.35);
  border-radius: 10px; padding: 8px 10px; margin: 8px 0; color: #f3e8c8; }

/* ===================== Batch 15 — rename ===================== */
/* stack the rename input + button so the input is full-width and easy to type in
   (the old side-by-side row squeezed it to a sliver on narrow phones) */
.rename-row { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rename-row .shout-input { width: 100%; margin: 4px 0 0; }
.rename-row .btn-gold { width: 100%; white-space: nowrap; }

/* ===================== Batch 16 — XP guide, first-purchase banner, rift countdown ===================== */
.xp-eq { font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: .3px; }
.xp-guide { margin: 10px 0; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 12px; background: rgba(0,0,0,.25); }
.xp-guide summary { cursor: pointer; font-size: 12.5px; font-weight: 800; }
.xpg-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 2px; border-bottom: 1px dashed rgba(255,255,255,.07); }
.xpg-row:last-of-type { border-bottom: 0; }
.fp-bonus { background: linear-gradient(135deg, rgba(245,197,66,.16), rgba(124,58,237,.14)); border: 1px solid rgba(245,197,66,.5);
  border-radius: 13px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; }
.boost-chip.rift-ends { border-color: #f97316; color: #fdba74; box-shadow: 0 0 10px rgba(249,115,22,.35); }

/* ===================== Batch 19 — layout fixes + notification queue ===================== */
/* Bell: aligned with the corner-fab row, no longer touching the socials button. */
.notif-fab { top: 4px !important; right: 100px !important; width: 29px !important; height: 29px !important; font-size: 14px; }
/* Side pops stack in a queue container instead of piling on one spot. */
/* Batch 44b: cap the stack height so a run of pops never reaches the ATTACK
   button / meter at the bottom (protected zone ~250px). */
#side-pops { position: fixed; left: 10px; top: 88px; z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 74vw; max-height: calc(100dvh - 340px); overflow: hidden; }
#side-pops .side-pop { position: static; left: auto; top: auto; }
/* Tasks "!" badge → small gold beacon instead of the harsh red exclamation. */
/* Tasks "something to claim" indicator = a small RED DOT on the LEFT (no "!"). */
.tasks-cta .nav-badge { top: -3px; left: -3px; right: auto; min-width: 11px; width: 11px; height: 11px; padding: 0;
  font-size: 0; border-radius: 50%; background: #ef4444; border: 1.5px solid #2a0d0d;
  box-shadow: 0 0 8px rgba(239,68,68,.9); animation: badge-breathe 1.6s ease-in-out infinite; }
@keyframes badge-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
body.lowfx .tasks-cta .nav-badge { animation: none; }
/* New-raider tracker: an in-flow chip in the event-timers row. */
.newbie-chip { background: rgba(0,0,0,.3); border: 1px solid rgba(245,197,66,.45); border-radius: 20px; padding: 2px 10px;
  font-size: 11.5px; color: #f3e8c8; cursor: help; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.newbie-chip b { color: var(--gold-2); }
.newbie-tracker { display: none; } /* the old absolute box is retired */

/* ===================== Batch 20 — fullscreen + fx perf ===================== */
.fs-fab { left: 80px; }
#fx-layer { pointer-events: none; contain: layout style; }
.projectile, .dmg-num, .grade-fx { will-change: transform, opacity; }

/* ===================== Batch 21 — visual overhaul: attack btn, meter, feedback ===================== */
/* Attack button: locked height (no layout movement), stronger press, charge glow, cooldown ring. */
.attack-btn { position: relative; min-height: 72px; overflow: hidden; }
.attack-btn .attack-sub { min-height: 15px; }
.attack-btn:active { transform: scale(.965); filter: brightness(1.12); }
.attack-btn.charging { animation: atk-charge 0.9s ease-in-out infinite; }
@keyframes atk-charge {
  0%, 100% { box-shadow: 0 10px 26px rgba(226,58,90,.45), 0 0 18px rgba(255,92,120,.55), inset 0 -3px 0 rgba(0,0,0,.25); }
  50%      { box-shadow: 0 10px 26px rgba(226,58,90,.55), 0 0 34px rgba(255,92,120,.95), inset 0 -3px 0 rgba(0,0,0,.25); }
}
.attack-btn.cooling {
  filter: none; pointer-events: none;
  background: linear-gradient(180deg, #241a2e, #17101f);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
  color: #a89ec4;
}
/* Gold cooldown sweep: a real child scaled by ONE compositor animation (WAAPI,
   set in startCooldown) — buttery smooth, replaces the stuttery 10fps width var. */
.attack-btn .cd-sweep {
  position: absolute; inset: 0; width: 100%; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, rgba(245,197,66,.05), rgba(245,197,66,.22));
  border-right: 2px solid rgba(245,197,66,.55);
  opacity: 0; will-change: transform;
}
.attack-btn.cooling .cd-sweep { opacity: 1; }
.attack-btn.ready-pop { animation: atk-ready .35s cubic-bezier(.2,.9,.3,1.4); }
@keyframes atk-ready { 0% { transform: scale(.96); filter: brightness(1.35); } 100% { transform: scale(1); filter: none; } }
body.lowfx .attack-btn.charging { animation: none; }

/* Meter: red feels dangerous, green zone reads instantly. */
.meter { height: 28px; background: linear-gradient(90deg, rgba(239,68,68,.55), rgba(190,30,45,.4));
  box-shadow: inset 0 1px 4px rgba(0,0,0,.6), inset 0 0 18px rgba(239,68,68,.28), 0 0 16px rgba(74,222,128,.22); }
.m-green { box-shadow: 0 0 14px rgba(74,222,128,.95), inset 0 0 0 1.5px rgba(255,255,255,.5); }
.meter.miss-flash { box-shadow: inset 0 0 26px rgba(239,68,68,.75), 0 0 22px rgba(239,68,68,.5); }

/* Hit feedback: unmistakable grades. */
.grade-fx.perfect { font-size: 30px; text-shadow: 0 0 16px rgba(74,222,128,.95), 0 2px 10px #000; }
.grade-fx.weak { color: #f87171; font-size: 22px; text-shadow: 0 0 12px rgba(239,68,68,.8), 0 2px 8px #000; animation: gradeshake 1s ease-out forwards; }
@keyframes gradeshake {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  15% { opacity: 1; transform: translateX(-53%) scale(1.15); }
  25% { transform: translateX(-47%) scale(1.1); }
  35% { transform: translateX(-51%) scale(1.05); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1); }
}

/* Premium cosmic polish: subtle depth + neon accents, cheap on mobile. */
.section-title { text-shadow: 0 0 12px rgba(124,58,237,.35); }
.modal { border: 1px solid rgba(124,58,237,.35); box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 30px rgba(124,58,237,.18); }
.btn-gold { text-shadow: 0 1px 0 rgba(255,255,255,.25); box-shadow: 0 4px 16px rgba(245,197,66,.35), inset 0 -2px 0 rgba(0,0,0,.2); }
.arena { position: relative; }
.arena::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.13), transparent 55%),
              radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.5), transparent 60%); }
body.lowfx .arena::after { display: none; }

/* ===== Batch 23: clean top-RIGHT control bar (bell · socials · online) ===== */
/* One flex row, all the same height, even spacing — no more overlap. */
.top-right-bar { position: absolute; top: 6px; right: 7px; z-index: 32; display: flex; align-items: center; gap: 7px; }
/* Flatten the wrapped controls into the row: cancel their own absolute placement
   (incl. the old !important overrides on the bell). Sizes/looks are kept. */
.top-right-bar > * { position: static !important; top: auto !important; right: auto !important;
  left: auto !important; bottom: auto !important; margin: 0 !important; }
.top-right-bar .notif-fab, .top-right-bar .social-fab { width: 30px !important; height: 30px !important; flex: 0 0 auto; }
.top-right-bar .online-badge { height: 30px; }
/* keep the notification red-dot pinned to the bell itself inside the flex row */
.top-right-bar .notif-fab { position: relative !important; }
.top-right-bar .notif-fab .nav-badge { position: absolute !important; top: -4px !important; right: -4px !important; }
/* Push the boss title clear BELOW the top control strip so fabs never sit on the
   boss name (that overlap was the "messy / on top of each other" complaint). */
.boss-header { padding-top: 42px; }
.boss-title { transform: none; }

/* ===== Batch 23: prominent LIVE Rift Event indicators ===== */
/* Big tappable LIVE banner pinned to the top of the arena with a large countdown. */
.rift-live-banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 34;
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: none; border-radius: 22px; cursor: pointer;
  background: linear-gradient(90deg, #f59e42, #ef4444, #7c3aed); background-size: 200% 100%;
  color: #fff; font-weight: 900; letter-spacing: .5px; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(239,68,68,.5), 0 0 24px rgba(124,58,237,.35);
  animation: rlb-shine 2.4s linear infinite, rlb-pulse 1.4s ease-in-out infinite; }
.rift-live-banner .rlb-tag { font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.rift-live-banner .rlb-time { font-size: 16px; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.28);
  padding: 1px 8px; border-radius: 10px; }
.rift-live-banner .rlb-cta { font-size: 10.5px; opacity: .9; }
@keyframes rlb-shine { to { background-position: 200% 0; } }
@keyframes rlb-pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.045); } }
/* Ambient glow around the whole arena while the event is live. */
body.rift-live .arena { box-shadow: inset 0 0 0 2px rgba(239,68,68,.45), inset 0 0 40px rgba(124,58,237,.3);
  animation: rift-arena 2.6s ease-in-out infinite; }
@keyframes rift-arena { 0%,100% { box-shadow: inset 0 0 0 2px rgba(239,68,68,.35), inset 0 0 34px rgba(124,58,237,.25); }
  50% { box-shadow: inset 0 0 0 2px rgba(239,68,68,.6), inset 0 0 52px rgba(124,58,237,.4); } }
/* One-shot full-screen "EVENT STARTED" burst. */
.rift-start-flash { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at 50% 45%, rgba(239,68,68,.28), rgba(124,58,237,.22) 40%, transparent 70%); }
.rift-start-flash.show { opacity: 1; }
.rift-start-flash .rsf-inner { text-align: center; color: #fff; font-weight: 900; font-size: 30px; line-height: 1.25;
  letter-spacing: 1px; text-shadow: 0 0 22px rgba(239,68,68,.9), 0 0 40px rgba(124,58,237,.7);
  transform: scale(.7); transition: transform .4s cubic-bezier(.22,1.4,.36,1); }
.rift-start-flash.show .rsf-inner { transform: scale(1); }
.rift-start-flash .rsf-inner b { color: var(--gold); font-size: 40px; }
body.lowfx .rift-live-banner, body.lowfx body.rift-live .arena { animation: none; }
body.lowfx .rift-live-banner { animation: none; }

/* ===== Batch 24: GOLDEN CROWN SPOT ===== */
/* The reigning name — top-centre strip, rainbow shimmer, floating crown, sparkle. */
.crown-spot { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); z-index: 31;
  display: flex; align-items: center; gap: 5px; max-width: calc(100% - 238px);
  padding: 4px 12px; border: none; border-radius: 20px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(100deg, #f5c542, #ff7ac8, #7c3aed, #38bdf8, #f5c542);
  background-size: 320% 100%; animation: cs-flow 5s linear infinite;
  box-shadow: 0 0 14px rgba(245,197,66,.65), 0 0 30px rgba(124,58,237,.35), inset 0 0 8px rgba(255,255,255,.28);
  transform: translateX(-50%) translateZ(0); }
.crown-spot.hidden { display: none; }
.crown-spot .cs-crown { font-size: 15px; animation: cs-bob 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff7cc); }
.crown-spot .cs-name { font-weight: 900; font-size: 13px; letter-spacing: .6px; color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,.55), 0 0 16px rgba(255,255,255,.45);
  overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.crown-spot .cs-spark { font-size: 11px; color: #fffbe6; animation: cs-spin 2.6s linear infinite; }
@keyframes cs-flow { to { background-position: 320% 0; } }
@keyframes cs-bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2.5px) rotate(6deg); } }
@keyframes cs-spin { to { transform: rotate(360deg); } }
body.lowfx .crown-spot, body.lowfx .crown-spot .cs-crown, body.lowfx .crown-spot .cs-spark { animation: none; }

/* Crown Spot shop card (Premium tab) — same rainbow language, calm enough to read. */
.crown-shop { position: relative; margin-bottom: 12px; padding: 13px 13px 11px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(60,34,5,.92), rgba(30,12,50,.94));
  border: 2px solid transparent; background-clip: padding-box; overflow: hidden; }
.crown-shop::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 18px;
  background: linear-gradient(100deg, #f5c542, #ff7ac8, #7c3aed, #38bdf8, #f5c542);
  background-size: 320% 100%; animation: cs-flow 6s linear infinite; }
.crown-shop .crs-head { font-weight: 900; font-size: 15.5px; letter-spacing: 1px; color: var(--gold);
  text-shadow: 0 0 14px rgba(245,197,66,.6); display: flex; align-items: center; gap: 7px; }
.crown-shop .crs-crown { font-size: 20px; animation: cs-bob 1.8s ease-in-out infinite; }
.crown-shop .crs-sub { font-size: 12px; color: #f3e8c8; margin: 6px 0 8px; line-height: 1.45; }
.crown-shop .crs-now { font-size: 12px; padding: 6px 10px; border-radius: 10px; margin-bottom: 6px;
  background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.4); color: #ffe9a8; }
.crown-shop .crs-now.free { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.45); color: #b7f7c8; }
.crown-shop .crs-queue { font-size: 11.5px; color: #ddd6fe; margin-bottom: 9px; line-height: 1.5; }
.crown-shop .crs-buys { display: flex; gap: 8px; }
.crown-shop .crs-buys button { flex: 1; padding: 10px 8px; font-size: 13px; white-space: nowrap; }
.crown-shop .crs-buys button:disabled { filter: grayscale(.6) brightness(.75); cursor: default; }
.crown-shop .crs-note { display: block; margin-top: 7px; font-size: 10px; color: var(--muted); }
body.lowfx .crown-shop::before, body.lowfx .crown-shop .crs-crown { animation: none; }

/* time-left note inside the shop's ACTIVE boosts rows (main-screen chip stays clean) */
.boost-active-row .ba-time { font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* ===== Batch 25: Golden Crown — one-crown lock + VIEW ALL queue table ===== */
.crown-shop .crs-locked {
  margin: 8px 0 2px; padding: 9px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: rgba(245, 197, 66, .08); border: 1px dashed rgba(245, 197, 66, .45); color: var(--gold, #f5c542);
}
.crown-shop .crs-viewall { width: 100%; margin: 6px 0 2px; padding: 7px 8px; font-size: 12px; }
.crown-shop .crs-queue-table { margin: 6px 0 2px; max-height: 220px; overflow-y: auto; }
.crs-q-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.crs-q-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 6px; }
.crs-q-tbl td { padding: 5px 6px; border-top: 1px solid rgba(255, 255, 255, .06); }
.crs-q-tbl .crs-q-holder td { color: var(--gold, #f5c542); font-weight: 700; }

/* ===== Batch 26: ULTRA performance mode — still boss, almost no animations ===== */
body.ultrafx #boss, body.ultrafx .boss, body.ultrafx .boss-emoji { animation: none !important; }
body.ultrafx .projectile, body.ultrafx .dmg-num.other { display: none !important; }
body.ultrafx .dmg-num { animation-duration: .5s !important; text-shadow: none !important; }
body.ultrafx .grade-fx { animation-duration: .45s !important; text-shadow: none !important; }
body.ultrafx .hp-fill { transition: width .12s linear !important; }
body.ultrafx .attack-btn, body.ultrafx .attack-btn::after { transition: none !important; }
body.ultrafx .side-pop { animation-duration: .18s !important; }
body.ultrafx .crown-spot, body.ultrafx .rift-live-banner, body.ultrafx .prize-ribbon { animation: none !important; }
body.ultrafx .victory-overlay, body.ultrafx .modal-overlay { backdrop-filter: none !important; }

/* ===== Batch 31: no long-press "Copy/Select" bubbles on phones ===== */
/* Safari needs the -webkit- prefixes; body already sets user-select: none. */
html, body {
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* iOS long-press callout (Copy / Share…) */
}
/* Typing fields stay fully selectable & editable. */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
img, a { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* ===== Batch 35: emergency admin banner (all online players) ===== */
.emergency-banner {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 10000; max-width: min(94vw, 560px); margin-top: 8px;
  padding: 12px 18px; border-radius: 12px; font-weight: 800; font-size: 14px;
  color: #fff; background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  border: 1px solid #ef4444; box-shadow: 0 8px 30px rgba(239, 68, 68, .45);
  display: flex; gap: 8px; align-items: center;
}

/* ===================================================================
   Batch 36 — PREMIUM VISUAL OVERHAUL (v5)
   One unified design language for the whole game: dark cosmic base,
   neon violet/blue atmosphere, gold as the "value" colour. This layer
   sits LAST in the cascade on purpose: it refines and unifies the
   rules above without rewriting them. Every animation added here is
   switched off under body.lowfx (Performance) — and ULTRA mode always
   enables lowfx too, so both modes stay clean and cheap.
   =================================================================== */

/* ---------- 1 · Design tokens ---------- */
:root {
  --bg: #0d0819;
  --bg2: #151024;
  --panel: rgba(15, 9, 28, 0.86);
  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --blue: #38bdf8;
  --line: rgba(167, 139, 250, 0.16);        /* default hairline border */
  --line-2: rgba(167, 139, 250, 0.32);      /* emphasised border */
  --card-bg: linear-gradient(165deg, rgba(139, 92, 246, 0.09), rgba(9, 5, 18, 0.5));
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.4);
}

/* ---------- 2 · Base atmosphere & typography ---------- */
body {
  background:
    radial-gradient(1100px 520px at 50% -12%, #33195a 0%, transparent 62%),
    radial-gradient(900px 600px at 50% 112%, #221040 0%, transparent 58%),
    radial-gradient(700px 500px at -10% 55%, rgba(56, 189, 248, 0.10) 0%, transparent 60%),
    var(--bg);
}
/* aurora: a touch of blue joins the purple/red so the cosmos feels deeper */
body::before {
  background:
    radial-gradient(38% 30% at 20% 18%, rgba(139, 92, 246, 0.35), transparent 60%),
    radial-gradient(40% 32% at 82% 28%, rgba(226, 58, 90, 0.18), transparent 60%),
    radial-gradient(42% 34% at 30% 88%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(30% 26% at 70% 70%, rgba(245, 197, 66, 0.06), transparent 60%);
}
b, strong { font-variant-numeric: tabular-nums; }
.sh-item, .event-timers span, .hp-text, .ticket-count, .ms-val, .stat .stat-val,
.lb-dmg, .podium-dmg, .prem-timer-wrap b, .rift-timer b, .wallet { font-variant-numeric: tabular-nums; }

/* ---------- 3 · One card language everywhere ---------- */
.task-card, .boost-card, .contract-card, .wheel-card, .char-card, .benefit, .frow,
.notif-row, .prize-row, .bh-card, .ms-cell, .stat, .honor, .ticket-row, .tk-buy-row,
.rift-lvl, .rift-mission, .cos-card, .fx-card, .badge-chip, .daily-cell, .set-row,
.vol-row, .social-row, .life-event, .g-sec, .wpack-card, .prem-offer.starter, .invite-box {
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.lb-full li, .rift-row, .podium-slot {
  background: linear-gradient(165deg, rgba(139, 92, 246, 0.07), rgba(9, 5, 18, 0.42));
  border: 1px solid rgba(167, 139, 250, 0.10);
}
.lb-full li.me { border: 1px solid var(--gold); background: rgba(245, 197, 66, 0.10); }
.podium-slot.p1 { border-color: rgba(245, 197, 66, 0.6); box-shadow: 0 0 18px rgba(245, 197, 66, 0.2); }
.empty-state, .muted-note { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; }
.empty-state { padding: 30px 14px; }
.empty-state::before { content: '🌌'; display: block; font-size: 30px; margin-bottom: 8px; opacity: .85; }

/* ---------- 4 · One button language everywhere ---------- */
.btn-gold, .btn-primary, .btn-ghost, .premium-cta, .pack-buy, .wheel-spin, .ticket-spin,
.char-btn, .cos-btn, .cos-buy, .mini-btn, .ba-equip, .rn-claim, .fx-buy, .fx-equip,
.cb-time, .modal-close, .subtab, .tab, .share-btn, .chat-send, .emote-btn, .mlb-toggle,
.dodge-btn, .swatch, .pv-b, .set-row {
  transition: transform .13s var(--ease-out), filter .18s ease, box-shadow .2s ease, background .18s ease, color .18s ease;
}
.btn-gold:active, .btn-primary:active, .premium-cta:active, .pack-buy:active, .wheel-spin:active,
.ticket-spin:active, .char-btn:active, .cos-btn:active, .mini-btn:active, .rn-claim:active,
.share-btn:active, .chat-send:active, .mlb-toggle:active { transform: scale(.96); }
.btn-gold, .premium-cta, .rn-claim, .char-btn.buy, .wheel-spin, .ticket-spin {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(245, 197, 66, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.pack-buy { box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.btn-ghost { border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(167, 139, 250, 0.08); }
.modal button:disabled { cursor: not-allowed; }
:where(button):focus-visible { outline: 2px solid rgba(245, 197, 66, 0.65); outline-offset: 2px; }

/* ---------- 5 · Modals: premium glass sheet ---------- */
.modal-overlay { background: rgba(5, 2, 11, 0.74); backdrop-filter: blur(5px); }
.modal {
  background:
    radial-gradient(560px 200px at 50% -60px, rgba(139, 92, 246, 0.16), transparent 70%),
    linear-gradient(175deg, #1a1230, var(--bg2) 40%);
  border: 1px solid rgba(167, 139, 250, 0.26); border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(124, 58, 237, 0.16);
  overscroll-behavior: contain;
}
/* grab-handle: instantly reads as "sheet" on mobile */
.modal::before {
  content: ''; display: block; width: 42px; height: 4px; border-radius: 3px;
  margin: -4px auto 10px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.55), rgba(245, 197, 66, 0.55));
}
.modal-head { margin: 0 -16px 12px; padding: 0 16px 10px; border-bottom: 1px solid rgba(167, 139, 250, 0.14); }
.modal-head h2 { font-size: 19px; font-weight: 900; letter-spacing: .6px; text-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }
.modal-close { width: 34px; height: 34px; background: rgba(167, 139, 250, 0.10); border: 1px solid rgba(167, 139, 250, 0.22); }
.modal-close:hover { background: rgba(239, 68, 68, 0.22); transform: rotate(90deg); }
.modal::-webkit-scrollbar { width: 7px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.25); border-radius: 8px; }
.chat-log::-webkit-scrollbar, .crown-shop .crs-queue-table::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb, .crown-shop .crs-queue-table::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.25); border-radius: 8px; }

/* ---------- 6 · Tabs: glass rail, glowing active pill ---------- */
.subtabs {
  gap: 5px; padding: 5px; border-radius: 14px;
  background: rgba(8, 4, 16, 0.55); border: 1px solid var(--line);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}
.subtab { border-radius: 10px; padding: 9px 5px; }
.subtab:not(.active):hover { color: var(--text); background: rgba(167, 139, 250, 0.10); }
.subtab:active { transform: scale(.96); }
.subtab.active {
  box-shadow: 0 2px 12px rgba(245, 197, 66, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- 7 · Boss header: title + neon HP ---------- */
.boss-title { font-size: 16px; letter-spacing: 1.6px; text-shadow: 0 0 16px rgba(139, 92, 246, 0.55), 0 2px 4px rgba(0, 0, 0, 0.6); }
.boss-level {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hp-bar { position: relative; background: rgba(5, 2, 11, 0.6); }
.hp-text { font-size: 12.5px; letter-spacing: .4px; }

/* ---------- 8 · Arena: (superseded by the V2 painted arena at the end of this file) ---------- */
.boss-emoji { filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px color-mix(in srgb, var(--boss-glow) 45%, transparent)); }
.boss-shadow {
  width: 150px; height: 24px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.65), transparent 70%);
  box-shadow: 0 0 26px 6px color-mix(in srgb, var(--boss-glow) 30%, transparent);
  animation: ground-glow 4.5s ease-in-out infinite;
}
@keyframes ground-glow {
  0%, 100% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--boss-glow) 26%, transparent); }
  50%      { box-shadow: 0 0 34px 9px color-mix(in srgb, var(--boss-glow) 42%, transparent); }
}
.player-throne {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.32), rgba(5, 2, 11, 0.55));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 18px rgba(124, 58, 237, 0.22);
}
.player-name { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); letter-spacing: .3px; }
.dmg-num { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 14px rgba(245, 197, 66, 0.4); }
.dmg-num.crit { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 90, 90, 0.85); }

/* ---------- 9 · HUD chips + attack button: the money shot ---------- */
.sh-item, .event-timers span {
  background: rgba(10, 5, 20, 0.55); border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.meter { border-radius: 14px; }
.attack-btn {
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, #ff5c78, #d61f44 55%, #931233);
  box-shadow: 0 10px 30px rgba(226, 58, 90, 0.5), 0 0 26px rgba(226, 58, 90, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
.attack-btn .attack-label { font-size: 23px; letter-spacing: 3px; }
.attack-btn.cooling { border: 1px solid rgba(167, 139, 250, 0.14); }

/* ---------- 10 · Bottom nav + wallet ---------- */
.bottom-nav {
  background: linear-gradient(180deg, rgba(13, 8, 25, 0.72), rgba(8, 4, 16, 0.92));
  border-top: 1px solid rgba(167, 139, 250, 0.18);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}
.nav-btn { border-radius: 12px; padding: 3px 8px; transition: transform .12s var(--ease-out); }
.nav-btn:active { transform: scale(.88); }
.nav-btn span { font-weight: 700; letter-spacing: .3px; }
.wallet {
  background: linear-gradient(165deg, rgba(245, 197, 66, 0.16), rgba(8, 4, 16, 0.5));
  border: 1px solid rgba(245, 197, 66, 0.42);
  box-shadow: 0 0 14px rgba(245, 197, 66, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- 11 · Right-edge CTA pills: one family ---------- */
.rift-cta, .tasks-cta, .gchat-cta, .premium-fab {
  border-radius: 15px 0 0 15px; font-size: 14px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.premium-fab { box-shadow: 0 5px 16px rgba(245, 197, 66, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.rift-cta.live { box-shadow: 0 0 22px rgba(255, 120, 73, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* ---------- 12 · Corner controls (gear · tickets · bell · socials) ---------- */
.settings-fab, .corner-fab, .notif-fab {
  border: 1px solid rgba(167, 139, 250, 0.30);
  background: rgba(12, 7, 22, 0.66);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.online-badge { background: rgba(8, 4, 16, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }

/* ---------- 13 · Shop: valuable, browsable, exciting ---------- */
.pack-card {
  background: linear-gradient(170deg, rgba(245, 197, 66, 0.10), rgba(9, 5, 18, 0.55));
  box-shadow: var(--card-shadow);
}
.pack-diamonds { font-size: 16px; text-shadow: 0 0 12px rgba(245, 197, 66, 0.4); }
.wheel-card.legendary, .wheel-card.royal { box-shadow: 0 0 18px rgba(245, 197, 66, 0.12), var(--card-shadow); }
.prem-offer.big {
  background: linear-gradient(160deg, rgba(245, 197, 66, 0.16), rgba(20, 10, 36, 0.7));
  box-shadow: 0 0 22px rgba(245, 197, 66, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- 14 · Champions: rare & collectible ---------- */
.char-card { overflow: hidden; }
.char-card.v4::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 48px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 24%, transparent), transparent);
}
.char-card.v4 .char-emoji { filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--rar) 60%, transparent)); }
.char-card .char-name { letter-spacing: .3px; }
.char-card .char-rarity { font-weight: 900; }

/* ---------- 15 · Tasks & progress bars ---------- */
.task-bar, .rm-bar, .rl-bar, .xp-bar { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.task-bar-fill { box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }

/* ---------- 16 · Chat: cleaner bubbles ---------- */
.bubble {
  background: linear-gradient(165deg, rgba(139, 92, 246, 0.15), rgba(12, 7, 22, 0.6));
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 15px 15px 15px 5px;
}
.bubble.mine { border: none; border-radius: 15px 15px 5px 15px; box-shadow: 0 4px 12px rgba(245, 197, 66, 0.22); }

/* ---------- 17 · Toasts & side pops ---------- */
.toast {
  background: linear-gradient(165deg, rgba(35, 20, 62, 0.96), rgba(13, 7, 25, 0.97));
  border: 1px solid rgba(167, 139, 250, 0.4); font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(139, 92, 246, 0.18);
}

/* ---------- 18 · Auth screen & boot loader: the first impression ---------- */
.auth-card {
  position: relative;
  border: 1px solid rgba(167, 139, 250, 0.30);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 44px rgba(124, 58, 237, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 66, 0.7), transparent);
}
.brand h1 { font-size: 30px; letter-spacing: 3px; }
.brand-emoji { filter: drop-shadow(0 6px 16px rgba(226, 58, 90, 0.55)) drop-shadow(0 0 26px rgba(139, 92, 246, 0.45)); }
.auth-form input { transition: border-color .2s ease, box-shadow .2s ease; }
.auth-form input:focus { box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.16); }
.bl-logo { text-shadow: 0 0 28px rgba(139, 92, 246, 1), 0 0 60px rgba(139, 92, 246, 0.5); }

/* ---------- 19 · Settings switches ---------- */
.set-row[data-on="1"] .set-switch { background: linear-gradient(90deg, #16a34a, #4ade80); box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }

/* ---------- 20 · Desktop: intentional composition, centred dialogs ---------- */
@media (min-width: 720px) {
  #app {
    border-inline: 1px solid rgba(167, 139, 250, 0.14);
    box-shadow: 0 0 90px rgba(124, 58, 237, 0.16), 0 0 200px rgba(0, 0, 0, 0.55);
  }
  .modal-overlay { align-items: center; padding: 26px; }
  .modal { border-radius: 22px; border: 1px solid rgba(167, 139, 250, 0.30); max-height: 84dvh; }
  .modal::before { display: none; }
  .tooltip { max-width: 300px; }
}

/* ---------- 20b · Inputs, auth tabs, wheels & victory ---------- */
.search-input:focus, .chat-form input:focus, .shout-input:focus,
.report-email:focus, .report-msg:focus { box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.14); }
.search-input, .chat-form input, .shout-input, .report-email, .report-msg {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tabs { background: rgba(8, 4, 16, 0.55); border: 1px solid var(--line); border-radius: 13px; padding: 5px; gap: 5px; margin: 18px 0 14px; }
.tab { border: none; border-radius: 9px; }
.tab:not(.active):hover { color: var(--text); background: rgba(167, 139, 250, 0.10); }
.tab.active { box-shadow: 0 2px 12px rgba(245, 197, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.reel { border-radius: 12px; background: rgba(5, 2, 11, 0.55); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); }
.reel-cell { border-radius: 9px; border: 1px solid rgba(167, 139, 250, 0.14); }
.victory-banner { backdrop-filter: blur(4px); }
.victory-banner h2 { font-size: 34px; letter-spacing: 2px; filter: drop-shadow(0 4px 18px rgba(245, 197, 66, 0.4)); }
.vb-win { background: linear-gradient(165deg, rgba(139, 92, 246, 0.10), rgba(9, 5, 18, 0.55)); }

/* ---------- 20c · Final consistency details ---------- */
/* ticket BUY rows: name over "You own N", buy button snug on the right
   (the column layout was only scoped to .ticket-row, so these rows ran
   the label and count together into one cramped line) */
.tk-buy-row .ticket-ico { font-size: 22px; }
.tk-buy-row .ticket-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-buy-row .ticket-info b { white-space: nowrap; }
.tk-buy-row .ticket-info small { color: var(--muted); font-size: 11px; }
.tk-buy-row .pack-buy { flex: 0 0 auto; width: auto; margin-left: auto; padding: 9px 18px; white-space: nowrap; }
.mini-lb { background: rgba(8, 4, 16, 0.62); border: 1px solid var(--line); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.confirm-box { border: 1px solid rgba(245, 197, 66, 0.5); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(139, 92, 246, 0.2); }
.podium-medal, .prize-medal, .vb-win .medal { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.crown-bar { border-radius: 12px; }

/* ---------- 21 · Performance-mode gating for everything added above ---------- */
body.lowfx .boss-shadow { animation: none; box-shadow: none; }
body.lowfx .boss-emoji { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)); }
body.lowfx .modal, body.lowfx .modal-overlay { box-shadow: none; }
body.lowfx .subtab, body.lowfx .nav-btn,
body.lowfx .btn-gold, body.lowfx .btn-primary { transition-duration: .05s; }

/* ===================================================================
   Batch 37 — PHONE PERFORMANCE + CLEAN FEEL (default mode included)
   The game was heating up phones in NORMAL mode. Root causes: (a) many
   backdrop-filter blurs sitting on top of constantly-animating layers —
   every frame re-blurs; (b) infinite animations of paint properties
   (background-position, left, box-shadow) that rasterise every frame.
   This layer removes every backdrop blur and rebuilds each always-on
   animation as compositor-only transform/opacity. Looks the same,
   costs a fraction.
   =================================================================== */

/* ---- 1 · No backdrop blurs anywhere (opacity bumped to compensate) ---- */
.bottom-nav, .mini-lb, .online-badge, .settings-fab, .corner-fab, .notif-fab,
.ticker, .tooltip, .side-pop, .auth-card, .charge-meter, .modal-overlay,
.victory-banner, .confirm-overlay {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.mini-lb { background: rgba(8, 4, 16, 0.8); }
.online-badge { background: rgba(8, 4, 16, 0.82); }
.settings-fab, .corner-fab, .notif-fab { background: rgba(12, 7, 22, 0.85); }
.ticker { background: rgba(5, 2, 11, 0.88); }
.auth-card { background: rgba(15, 9, 28, 0.94); }

/* ---- 2 · HP shine: was background-position (paints every frame) →
        now a strip moved by transform (compositor-only) ---- */
.hp-fill::after {
  inset: 0 auto 0 0; width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-120%); will-change: transform;
  animation: hp-shine 2.8s linear infinite;
}
@keyframes hp-shine { to { transform: translateX(340%); } }

/* ---- 3 · Attack-button sheen: was animating `left` → transform ---- */
@keyframes btn-sheen {
  0%        { transform: skewX(-18deg) translateX(0); }
  55%, 100% { transform: skewX(-18deg) translateX(480%); }
}

/* ---- 4 · Ember starfield: was background-position → transform loop ---- */
body::after { inset: 0 0 -240px 0; will-change: transform; }
@keyframes embers { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -240px, 0); } }

/* ---- 5 · Arena boss-glow: mix-blend-mode forced the whole arena stack
        to recomposite every pulse frame — plain translucency instead ---- */
.arena::before { mix-blend-mode: normal; }

/* ---- 6 · Small always-on pulses: box-shadow/background keyframes
        (paint) rebuilt as transform/opacity (composite) ---- */
@keyframes fab-pulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes tasks-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fab-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes fwh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.prize-ribbon { animation: none; } /* static gradient — the shine repainted every frame */
.boss-shadow { animation: none; box-shadow: 0 0 26px 6px color-mix(in srgb, var(--boss-glow) 30%, transparent); }

/* ---- 7 · Performance mode: also stop the background field entirely ---- */
body.lowfx::before, body.lowfx::after { animation: none; }

/* ===================================================================
   Batch 37 — VISIBILITY & PREMIUM NAME
   =================================================================== */
/* Your own name under the character: dark pill, bigger, always readable.
   The pill lives on the CONTAINER (.player-name), never on the inner <span> —
   putting a background on the span out-specificity'd .name-premium's
   background-clip:text and made premium names invisible (dark-on-dark). */
.player-name {
  margin-top: 7px; font-size: 13px; display: inline-block;
  padding: 3px 12px; border-radius: 12px;
  background: rgba(8, 4, 16, 0.78); border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.player-name span { display: inline; }

/* Premium names: animated rainbow-gold by DEFAULT, everywhere the game marks
   a premium name (.name-premium). A custom name colour (inline style) still
   wins — and after a colour RESET the inline style is gone, so the name falls
   back to this moving gradient, exactly as requested. */
.name-premium {
  font-weight: 800;
  background: linear-gradient(90deg, #f5c542, #ff8ac2, #a78bfa, #67e8f9, #f5c542);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none; /* clipped gradient text stays crisp (no inherited halo) */
  animation: premname 4s linear infinite;
}
@keyframes premname { to { background-position: 300% 0; } }
/* perf modes: gradient stays (still colourful), it just stops moving */
body.lowfx .name-premium { animation: none; }

/* While dragging the sheet down, its own transition must not fight the finger */
.modal.dragging { transition: none; }

/* ===================================================================
   Batch 39 — chat: input always visible (no scrolling to reach it)
   The chat sheet is a fixed-height flex column: header pinned on top,
   the message form pinned at the bottom, and ONLY the log scrolls in
   between. Previously the whole modal scrolled as one block, pushing
   the input below the fold on phones.
   =================================================================== */
.modal-chat { height: 86dvh; display: flex; flex-direction: column; overflow: hidden; }
.modal-chat .modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal-chat .chat-log { flex: 1 1 auto; height: auto; min-height: 80px; }
.modal-chat .gchat-note, .modal-chat .chat-cta-row, .modal-chat .emote-bar { flex: 0 0 auto; }
.modal-chat .chat-form { flex: 0 0 auto; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(167, 139, 250, 0.14); }
@media (min-width: 720px) { .modal-chat { height: 82dvh; max-height: 82dvh; } }

/* ===================================================================
   Batch 38 — top-left swap, live crown timer, meter marker
   =================================================================== */
/* "10 DMG = 1 💎" moved INTO the header row (where How-to-play sat) — it keeps
   its green pill look but flows with the row instead of floating in the arena. */
.hdr-info .dmg-rule { position: static; flex: 0 0 auto; }
/* Raider Road badge slides up to the old dmg-rule spot… */
.lvl-badge { top: 4px; }
/* …and How-to-play sits right below it, slightly smaller (same spacing rhythm). */
.arena-guide { position: absolute; top: 58px; left: 8px; z-index: 28;
  font-size: 9.5px; padding: 3px 8px; }
/* skill-crown pill drops below the new stack so nothing overlaps */
.crown-bar { top: 88px; }

/* live crown countdown in the shop card */
.crs-timer { font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 10px rgba(245, 197, 66, 0.7); }

/* meter marker is moved by transform now (see meterLoop) — anchor it at 0 */
.m-marker { left: 0; will-change: transform; }

/* ===================================================================
   Batch 40 — daily/weekly reset countdowns
   =================================================================== */
/* timer strip at the top of Tasks → Daily / Weekly */
.reset-bar { display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 0 0 10px; padding: 7px 10px; border-radius: 10px;
  background: rgba(124, 92, 255, 0.10); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted); }
.reset-left { font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }
.section-title .reset-left { font-size: 11px; }
.deal-timer { margin-top: 6px; font-size: 11px; color: var(--muted); }
.deal-timer .reset-left { color: var(--gold-2); }

/* ===================================================================
   Batch 40 — SMOOTHNESS AUDIT (mobile + weak desktop)
   Every remaining always-on animation that touched a PAINT property
   (box-shadow / background-position / margin / left / filter) is
   rebuilt compositor-only (transform/opacity) or frozen at its rest
   look. Plus tap/scroll/keyboard interaction hardening.
   =================================================================== */

/* ---- A · full-screen aurora: blur(30px) over a 140%-viewport fixed
        layer is the single most expensive layer on weak GPUs (Safari
        especially). The radial gradients are already soft — dropping
        the blur barely changes the look and frees a full-screen
        filter pass every frame. ---- */
body::before { filter: none; }

/* ---- B · always-on box-shadow pulses → static glow (rest look kept) ---- */
.boss-shadow { animation: none; }                    /* boss ground glow */
body.has-aura .player-throne { animation: none; }    /* champion aura frame */
body.rift-live .arena { animation: none; }           /* event arena glow */
.crown-shop::before { animation: none; }             /* rainbow border stays, stops flowing */
.prize-ribbon { animation: none; }                   /* static gold↔purple gradient */

/* ---- C · pulses rebuilt as compositor-only transform ---- */
/* rift CTA heartbeat: was box-shadow + brightness (repaint every frame) */
@keyframes rift-live { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.rift-cta.live { box-shadow: 0 0 20px rgba(255, 120, 73, 0.8); }
/* attack button while charging: static boosted glow + gentle scale pulse */
.attack-btn.charging { box-shadow: 0 10px 26px rgba(226, 58, 90, 0.55), 0 0 30px rgba(255, 92, 120, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
@keyframes atk-charge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
/* Raider-Road YOU marker: was margin-bottom — relayouts the whole road every frame */
@keyframes you-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
/* claimable road node: static gold glow (from its base rule) + scale pulse */
@keyframes node-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
/* wheel-spin target: box-shadow ripple → expanding ring (transform + opacity) */
.ws-target { animation: none; }
.ws-target::after { content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid rgba(74, 222, 128, 0.75); animation: ws-ring 0.7s ease-out infinite; }
@keyframes ws-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
/* rift live banner: drop the background-position shine, keep the transform pulse */
.rift-live-banner { animation: rlb-pulse 1.4s ease-in-out infinite; }
/* boot loading bar: was margin-left (layout every frame) → translateX */
@keyframes bl-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.bl-bar i { will-change: transform; }

/* ---- D · interaction hardening ---- */
/* no double-tap-zoom delay on any control (iOS Safari rapid taps);
   .attack-btn keeps its own touch-action:none for hold-to-charge */
button, .subtab, .nav-btn, .corner-fab, .modal-close, .task-card { touch-action: manipulation; }
/* modal scrolling must never chain to the page behind it */
.modal, .modal-body, .chat-log { overscroll-behavior: contain; }
/* new-message churn repaints only the log, never the whole modal */
.chat-log { contain: layout paint; }
/* 16px inputs: iOS never auto-zooms/jumps the layout on focus */
.chat-form input, .auth-form input, .search-input, .report-email, .report-msg { font-size: 16px; }

/* ===================================================================
   Batch 41 — left/right CTA split, task tab dots, wheel win reveal
   =================================================================== */
/* TASKS + RIFT move to the LEFT edge, mirroring CHAT + PREMIUM on the
   right at the same heights (user request): a symmetric 2×2 layout. */
.rift-cta  { left: 0; right: auto; bottom: 248px; border-radius: 0 15px 15px 0; }
.tasks-cta { left: 0; right: auto; bottom: 300px; border-radius: 0 15px 15px 0; }
/* badge hugs the OUTER (right) corner now that the pill is left-anchored */
.tasks-cta .nav-badge { left: auto; right: -3px; }

/* red claim-dot on the Tasks modal tabs — tells you WHICH category has
   something to claim even after you're inside */
.subtab { position: relative; }
.tab-dot { position: absolute; top: 3px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #ef4444; pointer-events: none;
  box-shadow: 0 0 7px rgba(239, 68, 68, 0.9); }
.tab-dot.hidden { display: none; }

/* wheel result: the landed cell glows gold + a big YOU WON strip under the
   reel (the prize used to vanish behind an instant tab re-render) */
.reel-cell.win { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(245, 197, 66, 0.75);
  border-radius: 10px; }
.wheel-won { margin: 8px 0 2px; padding: 9px 12px; border-radius: 12px; text-align: center;
  font-weight: 900; font-size: 14.5px; letter-spacing: 0.3px; color: #1a1030;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.55); }

/* ===================================================================
   Batch 43 — daily-deal claimed state, drift credit, GIFTS system
   =================================================================== */
/* deal already bought today */
.deal-claimed { padding: 10px 12px; border-radius: 12px; text-align: center; font-weight: 800;
  font-size: 13px; color: var(--ok); background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.35); }
/* drift wheel free-credit button */
.wheel-spin.ready { background: linear-gradient(180deg, #4ade80, #16a34a); color: #06220f;
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.5); }

/* --- 🎁 gift button beside real-money buy buttons --- */
.buy-gift-row { display: flex; gap: 6px; align-items: stretch; }
.buy-gift-row .pack-buy { flex: 1; width: auto; margin: 0; }
.gift-btn { flex: 0 0 42px; width: 42px; border: 1px solid rgba(245, 197, 66, 0.45);
  border-radius: 10px; background: rgba(245, 197, 66, 0.10); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  transition: transform 0.12s var(--ease-out), background 0.12s; }
.gift-btn:hover { background: rgba(245, 197, 66, 0.22); }
.gift-btn:active { transform: scale(0.92); }

/* --- "gift Premium to a friend" box (shown even when you already own it) --- */
.gift-prem-box { margin: 12px 0; padding: 12px; border-radius: 14px;
  background: rgba(245, 197, 66, 0.07); border: 1px solid rgba(245, 197, 66, 0.32); }
.gpx-title { font-weight: 800; font-size: 14px; color: #f5c542; margin-bottom: 2px; }
.gpx-sub { font-size: 12px; opacity: 0.72; margin-bottom: 10px; line-height: 1.35; }
.gift-wide { display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(245, 197, 66, 0.5); background: rgba(245, 197, 66, 0.14);
  color: #ffe8a3; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform 0.12s var(--ease-out), background 0.12s; }
.gift-wide:first-of-type { margin-top: 0; }
.gift-wide:hover { background: rgba(245, 197, 66, 0.24); }
.gift-wide:active { transform: scale(0.97); }

/* --- gift picker modal --- */
.gp-product { padding: 10px 12px; border-radius: 12px; margin-bottom: 10px; font-size: 13.5px;
  background: rgba(245, 197, 66, 0.10); border: 1px solid rgba(245, 197, 66, 0.35); }
.gf-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto;
  overscroll-behavior: contain; margin-bottom: 4px; }
.gf-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 11px;
  background: var(--card-bg); border: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.gf-row:has(input:checked) { border-color: var(--gold); background: rgba(245, 197, 66, 0.10); }
.gf-row input { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }
.gwrap-row { display: flex; gap: 9px; margin-bottom: 6px; }
.gwrap { width: 36px; height: 36px; border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.12s var(--ease-out); }
.gwrap:active { transform: scale(0.9); }
.gwrap.sel { border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.45); }
.gwrap.gold   { background: linear-gradient(160deg, #ffe08a, #f5c542); }
.gwrap.purple { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
.gwrap.blue   { background: linear-gradient(160deg, #7dd3fc, #0284c7); }
.gwrap.red    { background: linear-gradient(160deg, #fda4af, #dc2626); }
.gwrap.green  { background: linear-gradient(160deg, #86efac, #16a34a); }
.gwrap.pink   { background: linear-gradient(160deg, #f9a8d4, #db2777); }
#gift-send { margin-top: 10px; }

/* --- unwrap overlay (recipient) --- */
.gift-overlay { position: fixed; inset: 0; z-index: 420; display: flex; align-items: center;
  justify-content: center; background: rgba(5, 2, 12, 0.88); }
.gift-stage { text-align: center; padding: 24px; max-width: 320px; }
.gift-from { font-size: 16px; margin-bottom: 22px; color: var(--text); }
.gift-box { position: relative; width: 120px; height: 110px; margin: 0 auto 20px;
  transition: transform 0.35s var(--ease-out); }
.gift-box .gb-body { position: absolute; left: 10px; right: 10px; bottom: 0; height: 78px;
  border-radius: 10px; }
.gift-box .gb-lid { position: absolute; left: 0; right: 0; top: 18px; height: 26px;
  border-radius: 8px; transition: transform 0.45s var(--ease-out), opacity 0.45s; }
.gift-box .gb-bow { position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 30px; transition: transform 0.45s var(--ease-out), opacity 0.45s; }
.gift-box.gold .gb-body   { background: linear-gradient(160deg, #ffe08a, #d9a616); }
.gift-box.gold .gb-lid    { background: #f5c542; }
.gift-box.purple .gb-body { background: linear-gradient(160deg, #a78bfa, #6d28d9); }
.gift-box.purple .gb-lid  { background: #8b5cf6; }
.gift-box.blue .gb-body   { background: linear-gradient(160deg, #7dd3fc, #0369a1); }
.gift-box.blue .gb-lid    { background: #38bdf8; }
.gift-box.red .gb-body    { background: linear-gradient(160deg, #fda4af, #b91c1c); }
.gift-box.red .gb-lid     { background: #ef4444; }
.gift-box.green .gb-body  { background: linear-gradient(160deg, #86efac, #15803d); }
.gift-box.green .gb-lid   { background: #22c55e; }
.gift-box.pink .gb-body   { background: linear-gradient(160deg, #f9a8d4, #be185d); }
.gift-box.pink .gb-lid    { background: #ec4899; }
.gift-box.open { transform: scale(1.06); }
.gift-box.open .gb-lid { transform: translateY(-46px) rotate(-14deg); opacity: 0; }
.gift-box.open .gb-bow { transform: translateX(-50%) translateY(-52px) rotate(16deg); opacity: 0; }
.gift-reveal { margin-bottom: 18px; }
.gift-reveal.hidden { display: none; }
.gr-product { font-size: 19px; font-weight: 900; color: var(--gold-2);
  text-shadow: 0 0 16px rgba(245, 197, 66, 0.55); margin-bottom: 8px; }
.gr-msg { font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.5; }
.gift-open-btn { min-width: 200px; }

/* ===================================================================
   Batch 43 — RIFT EVENT v2 (premium hero, road levels, collapse, live pill)
   =================================================================== */
/* main-screen LIVE banner: bigger + unmissable (top-center of the arena) */
.rift-live-banner { padding: 8px 18px; }
.rift-live-banner .rlb-tag { font-size: 14.5px; letter-spacing: 1px; }
.rift-live-banner .rlb-time { font-size: 18px; }
/* <24h countdown pill in the same spot (event NOT live yet) */
.rift-soon { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 34;
  padding: 6px 14px; border: 1px solid rgba(124, 58, 237, 0.55); border-radius: 20px; cursor: pointer;
  background: rgba(20, 10, 38, 0.92); color: #cbb6ff; font-weight: 900; font-size: 12.5px;
  letter-spacing: 0.4px; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.rift-soon:active { transform: translateX(-50%) translateY(1px); }

/* hero card v2 — the event's stage */
.rift-hero.v2 { position: relative; text-align: center; padding: 20px 16px 18px; border-radius: 18px;
  margin-bottom: 14px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, rgba(124, 58, 237, 0.30), rgba(9, 5, 18, 0.72) 70%);
  border: 1px solid rgba(124, 58, 237, 0.45);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.rift-hero.v2.live { border-color: rgba(255, 120, 73, 0.65);
  background: radial-gradient(120% 100% at 50% 0%, rgba(194, 65, 12, 0.32), rgba(30, 8, 40, 0.78) 70%);
  box-shadow: 0 8px 34px rgba(239, 68, 68, 0.30), 0 0 26px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.rift-hero.v2 h3 { margin: 4px 0 6px; font-size: 17px; letter-spacing: 1.5px; }
.rift-hero.v2 .rift-flame { font-size: 44px; filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.8)); }
.rift-hero.v2.live .rift-flame { filter: drop-shadow(0 0 16px rgba(255, 120, 73, 0.9)); animation: cs-bob 1.8s ease-in-out infinite; }
.rh-badge { position: absolute; top: 10px; right: 12px; padding: 3px 10px; border-radius: 12px;
  background: rgba(239, 68, 68, 0.18); border: 1px solid rgba(239, 68, 68, 0.6);
  color: #ff8f8f; font-size: 10.5px; font-weight: 900; letter-spacing: 1.5px;
  animation: rift-live 1.4s ease-in-out infinite; }
.rh-timer { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 1px;
  color: #fff; text-shadow: 0 0 22px rgba(167, 139, 250, 0.65); margin: 2px 0 10px; }
.rift-hero.v2.live .rh-timer { text-shadow: 0 0 22px rgba(255, 120, 73, 0.75); }
.rh-chips { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.rh-chip { padding: 5px 11px; border-radius: 14px; font-size: 12px; font-weight: 800;
  background: rgba(8, 4, 16, 0.55); border: 1px solid var(--line-2); white-space: nowrap; }
.rh-chip.big { font-size: 13.5px; padding: 7px 13px; }
.rh-next { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.rh-next b { color: var(--gold-2); }
.rh-bar { display: block; max-width: 260px; margin: 6px auto 0; }
.rh-sub { font-size: 12px; color: var(--muted); line-height: 1.55; max-width: 320px; margin: 6px auto 0; }
.rift-fx.v2 { margin-top: 10px; padding: 9px 12px; border-radius: 12px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(245, 197, 66, 0.10); border: 1px solid rgba(245, 197, 66, 0.45); }
.rift-fx.v2 small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rift-burst { display: inline-block; margin: -4px 0 8px; padding: 4px 12px; border-radius: 12px;
  background: rgba(245, 197, 66, 0.16); border: 1px solid var(--gold); color: var(--gold-2);
  font-weight: 900; font-size: 12.5px; }

/* mission cards: live state */
.rift-mission.active { border-color: rgba(255, 120, 73, 0.45); }
/* level road: locked future levels dim out */
.rift-lvl.locked { opacity: 0.5; }
.rift-lvl.next { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 197, 66, 0.2); }
/* leaderboard: #1 prize pops */
.rift-prize.p1 { border-color: var(--gold); background: rgba(245, 197, 66, 0.10);
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.18); }
/* shards v2 */
.rift-shards.v2 .rs-wallet { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.rs-btn small { font-weight: 600; opacity: 0.75; }
/* collapsed long-text sections */
.rift-collapse { margin: 10px 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-bg); overflow: hidden; }
.rift-collapse summary { padding: 11px 14px; cursor: pointer; font-weight: 800; font-size: 13.5px;
  list-style: none; user-select: none; }
.rift-collapse summary::-webkit-details-marker { display: none; }
.rift-collapse summary::after { content: '▾'; float: right; color: var(--muted); transition: transform 0.2s; }
.rift-collapse[open] summary::after { transform: rotate(180deg); }
.rift-collapse > *:not(summary) { padding: 0 14px 12px; }
body.lowfx .rh-badge, body.lowfx .rift-hero.v2.live .rift-flame { animation: none; }

/* ===================================================================
   Batch 42 — hide unbuyable boosts
   =================================================================== */
/* A boost you already have (or have a stronger version of) is dimmed and shows
   an "owned" tag instead of a buy button — no wasted purchases. */
.boost-card.covered-card { opacity: 0.62; }
.bc-owned { display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 10px;
  font-size: 11.5px; font-weight: 800; color: var(--ok);
  background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); }

/* ===================================================================
   Batch 44 — layout & polish fixes
   =================================================================== */
/* 1) LIVE banner smaller — it used to touch the screen edges / side pills. */
.rift-live-banner { top: 6px; padding: 4px 10px; gap: 6px;
  max-width: calc(100% - 118px); overflow: hidden; }
.rift-live-banner .rlb-tag { font-size: 10.5px; }
.rift-live-banner .rlb-time { font-size: 13px; padding: 1px 6px; }
.rift-live-banner .rlb-cta { font-size: 9.5px; }
@media (max-width: 520px) {
  .rift-live-banner { max-width: calc(100% - 124px); padding: 3px 8px; }
  .rift-live-banner .rlb-cta { display: none; }
  /* Batch 44b: keep the Golden Crown Spot CENTRED (as before) — just make it a bit
     shorter on phones so a long name can't reach the 🔔 notification cluster. */
  .crown-spot { max-width: calc(100% - 300px); }
  .crown-spot .cs-name { max-width: 28vw; }
}
/* 2) While the event is live, lift the four edge pills a touch so they clear
   the (taller) event HUD bar. */
body.rift-live .rift-cta    { bottom: 262px; }
body.rift-live .tasks-cta   { bottom: 314px; }
body.rift-live .premium-fab { bottom: 262px; }
body.rift-live .gchat-cta   { bottom: 314px; }
/* 4) Clip the sparkle sweep INSIDE the popup (it used to slide out past the
   right edge and keep going). */
.side-pop { overflow: hidden; }
/* 5) Real brand logos in the Socials list (inline SVGs). */
.social-ico svg { width: 24px; height: 24px; display: block; border-radius: 6px; }
/* 6) Friends board — metric picker + "what am I looking at" label. */
.fr-metric { display: flex; gap: 6px; margin-bottom: 8px; }
.fr-mbtn { flex: 1; padding: 8px; border-radius: 10px; cursor: pointer; font-weight: 800; font-size: 12.5px;
  color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.fr-mbtn.active { color: #fff; background: rgba(124,58,237,.3); border-color: var(--accent); }
.fr-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; padding: 7px 10px;
  background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.3); border-radius: 10px; }
.fr-label b { color: var(--text); }
/* 9) 🌈 RAINBOW name colour (Premium-only) — animated gradient text. */
[data-nc="rainbow"] {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #38bdf8, #a855f7, #ef4444);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent !important; animation: nc-rainbow 3s linear infinite;
}
@keyframes nc-rainbow { to { background-position: 300% 0; } }
body.lowfx [data-nc="rainbow"] { animation: none; }
.swatch.rainbow { background: linear-gradient(135deg, #ef4444, #f59e0b, #22c55e, #38bdf8, #a855f7);
  display: flex; align-items: center; justify-content: center; font-size: 12px; }
.swatch.rainbow.locked { opacity: 0.6; }
/* 10) Full-screen BAN notice. */
.ban-screen { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 2, 11, 0.94); backdrop-filter: blur(8px); padding: 20px; }
.ban-card { max-width: 340px; width: 100%; text-align: center; padding: 26px 20px; border-radius: 18px;
  background: rgba(30, 8, 12, 0.95); border: 1px solid rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.35); }
.ban-card .ban-ico { font-size: 44px; margin-bottom: 6px; }
.ban-card h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: 1px; color: #fca5a5; }
.ban-card p { font-size: 13.5px; line-height: 1.5; margin: 6px 0; }
.ban-card .ban-left { margin: 10px 0; padding: 8px; border-radius: 10px; font-size: 14px;
  background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4); }
.ban-card .ban-left b { font-variant-numeric: tabular-nums; color: #fecaca; }
.ban-card .ban-sub { font-size: 12px; opacity: 0.75; }
/* 11) Blocked players list (profile). */
.blocked-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; font-size: 13px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.blocked-row .btn-ghost.small { padding: 6px 10px; font-size: 12px; width: auto; }
/* 12) Real-money purchase history rows. */
.pay-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px;
  margin-bottom: 6px; font-size: 12.5px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1); }
.pay-row .pr-kind { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-row .pr-amt { font-weight: 800; color: var(--gold-2); }
.pay-row .pr-date { color: var(--muted); font-size: 11px; }

/* ===================================================================
   ============  COLOSSUM V2 — COSMIC OBSIDIAN DESIGN SYSTEM  ========
   The premium layer. Everything below overrides the prototype-era
   styling by cascade. Sections: tokens · header · arena chrome ·
   battle HUD · signature attack · nav dock · glass chips · modals ·
   buttons · cards · auth · perf guards · mobile.
   =================================================================== */
:root {
  --v2-obsidian-0: #05020b;
  --v2-obsidian-1: #0b0616;
  --v2-obsidian-2: #120a22;
  --v2-obsidian-3: #1a1030;
  --v2-violet: #7c3aed;
  --v2-violet-2: #a78bfa;
  --v2-cyan: #38e8ff;
  --v2-crimson: #ff3b5c;
  --v2-gold: #f5c542;
  --v2-gold-2: #ffe08a;
  --v2-line: rgba(167, 139, 250, 0.16);          /* hairline borders */
  --v2-line-gold: rgba(245, 197, 66, 0.35);
  --v2-glass: linear-gradient(165deg, rgba(26, 16, 48, 0.86), rgba(9, 5, 18, 0.92));
  --v2-glass-soft: linear-gradient(165deg, rgba(26, 16, 48, 0.62), rgba(9, 5, 18, 0.72));
  --v2-metal-gold: linear-gradient(180deg, #ffe9a3 0%, #f5c542 45%, #c98f1b 100%);
  --v2-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --v2-r-lg: 18px; --v2-r-md: 13px; --v2-r-sm: 10px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- numerals: every stat reads like a game counter ---------- */
.sh-item b, .hp-text, .rh-timer, .wallet, #online-count, .lb-dmg, .podium-dmg,
.stat-val, .rlb-time, .m-marker, .lvl-num, .task-reward, .pr-amt {
  font-variant-numeric: tabular-nums;
}

/* ================= HEADER: boss identity strip ================= */
.boss-header {
  padding: 8px 12px 7px;
  background: linear-gradient(180deg, rgba(10, 5, 20, 0.92), rgba(10, 5, 20, 0.55) 80%, transparent);
  border-bottom: 1px solid var(--v2-line);
  backdrop-filter: blur(8px);
}
.boss-title {
  font-size: 16px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(124, 58, 237, 0.55);
}
.boss-title .skull { filter: drop-shadow(0 0 6px rgba(245, 197, 66, .7)); }
.boss-level {
  font-size: 10px; letter-spacing: 1px; padding: 2px 8px; border-radius: 9px;
  background: rgba(124, 58, 237, 0.22); border: 1px solid rgba(167, 139, 250, 0.4);
  color: var(--v2-violet-2);
}
/* HP: segmented raid bar */
.hp-bar {
  height: 21px; border-radius: 11px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.55) calc(10% - 1px) 10%),
    rgba(6, 3, 12, 0.72);
  border: 1px solid rgba(255, 91, 120, 0.35);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 14px rgba(226, 58, 90, 0.18);
}
.hp-fill {
  background: linear-gradient(180deg, #ff7a93 0%, var(--hp) 55%, #a1123a 100%);
  box-shadow: 0 0 16px rgba(255, 92, 120, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border-radius: 10px 0 0 10px;
}
.hp-text { font-size: 11.5px; letter-spacing: .4px; }

/* ================= ARENA CHROME (chips share one glass material) ================= */
.lvl-badge, .online-badge, .settings-fab, .corner-fab, .notif-fab, .guide-mini,
.mlb-toggle, .free-wheel-hint, .mini-lb-tabs .mlb-tab, #mlb-me {
  background: var(--v2-glass-soft) !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(6px);
}
.free-wheel-hint { color: var(--v2-gold-2); border-color: var(--v2-line-gold) !important; }
.free-wheel-hint.ready { border-color: rgba(245, 197, 66, .7) !important; }
.mlb-tab.active { border-color: var(--v2-line-gold) !important; color: var(--v2-gold-2); }

/* ================= BATTLE HUD: one unified command console ================= */
.hud {
  padding: 7px 12px 6px;
  background: linear-gradient(180deg, transparent, rgba(8, 4, 16, 0.88) 26%, rgba(8, 4, 16, 0.97));
  border-top: 1px solid var(--v2-line);
  backdrop-filter: blur(10px);
}
.event-timers span {
  padding: 2px 9px; border-radius: 9px; font-size: 10.5px;
  background: rgba(10, 5, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.07);
}
.sh-item {
  border-radius: 10px !important;
  background: linear-gradient(165deg, rgba(30, 18, 54, 0.85), rgba(12, 6, 24, 0.9)) !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
}
.sh-item b { color: #fff; }

/* --- timing meter: precision instrument --- */
.meter {
  height: 30px; border-radius: 15px; margin: 2px 4px 10px;
  background: linear-gradient(180deg, rgba(40, 10, 18, 0.9), rgba(24, 6, 12, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 18px rgba(124, 58, 237, 0.12);
}
.m-green {
  background: linear-gradient(180deg, #86efac, #22c55e 60%, #15803d);
  box-shadow: 0 0 16px rgba(74, 222, 128, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
  border-radius: 6px;
}
.m-gold {
  background: linear-gradient(180deg, #fff7d6, #fde68a 40%, #f59e0b);
  box-shadow: 0 0 14px rgba(245, 197, 66, 1), 0 0 26px rgba(245, 197, 66, .6);
}
.m-marker {
  width: 4px; top: -3px; bottom: -3px; border-radius: 3px;
  background: linear-gradient(180deg, #fff, #d8ccff);
  box-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 22px rgba(167, 139, 250, .7);
}

/* --- SIGNATURE ATTACK CONTROL — the COLOSSUM strike sigil --- */
.attack-btn {
  position: relative; overflow: hidden;
  min-height: 74px; padding: 14px 16px;
  border-radius: 20px;
  clip-path: polygon(4.5% 0, 95.5% 0, 100% 30%, 100% 70%, 95.5% 100%, 4.5% 100%, 0 70%, 0 30%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 40%),
    radial-gradient(120% 160% at 50% 115%, #7a0f26 0%, transparent 55%),
    linear-gradient(180deg, #ff5c78 0%, #d92a4e 45%, #8f1030 100%);
  box-shadow:
    0 12px 30px rgba(226, 58, 90, 0.42),
    inset 0 -4px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.07s, filter 0.2s;
}
.attack-btn::before {  /* idle energy sweep across the face */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  background-size: 260% 100%;
  animation: atk-sweep 3.2s linear infinite;
}
@keyframes atk-sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.attack-btn .attack-label {
  font-size: 23px; letter-spacing: 6px; text-indent: 6px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 255, 255, 0.35);
}
.attack-btn .attack-sub { font-size: 11.5px; opacity: .92; letter-spacing: .3px; }
.attack-btn:active { transform: translateY(2px) scale(0.995); }
/* holding / charging: the sigil goes gold — release power */
.attack-btn.charging {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 40%),
    radial-gradient(120% 160% at 50% 115%, #8a5a00 0%, transparent 55%),
    linear-gradient(180deg, #ffe08a 0%, #f5b422 45%, #a86a06 100%);
  color: #241300;
  box-shadow: 0 12px 34px rgba(245, 197, 66, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.attack-btn.charging .attack-label { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.attack-btn.charging::before { animation-duration: 0.9s; }
/* cooldown: powered-down obsidian + charging rail */
.attack-btn.cooling {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%),
    linear-gradient(180deg, #2c1a3e 0%, #1a0f2a 55%, #120a1e 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #b9a8d9;
}
.attack-btn.cooling::before { animation: none; background: none; }
.attack-btn .cd-sweep {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 4px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--v2-violet), var(--v2-cyan));
  box-shadow: 0 0 12px rgba(56, 232, 255, 0.7);
  opacity: 0;
}
.attack-btn.cooling .cd-sweep { opacity: 1; }
.attack-btn.ready-pop { animation: atk-ready 0.35s var(--ease-out); }
@keyframes atk-ready {
  0% { transform: scale(0.98); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ================= NAV DOCK ================= */
.bottom-nav {
  background: linear-gradient(180deg, rgba(14, 7, 26, 0.94), rgba(8, 4, 16, 0.98)) !important;
  border-top: 1px solid var(--v2-line) !important;
  backdrop-filter: blur(14px);
}
.nav-btn { position: relative; padding: 4px 10px; border-radius: 12px; transition: transform .12s var(--ease-out); }
.nav-btn:active { transform: scale(.9); }
.wallet {
  padding: 6px 12px; border-radius: 12px;
  background: linear-gradient(165deg, rgba(58, 40, 8, 0.55), rgba(24, 14, 2, 0.6));
  border: 1px solid var(--v2-line-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(245, 197, 66, 0.12);
}

/* ================= MODAL SHELL V2 ================= */
.modal-overlay { background: rgba(4, 2, 9, 0.78); backdrop-filter: blur(5px); }
.modal {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #150c26 0%, #0d0718 100%);
  border-top: 1px solid rgba(245, 197, 66, 0.4);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.modal-head h2 { font-size: 19px; letter-spacing: 1.2px; font-weight: 900; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 30%, #cbb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-close { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); transition: transform .12s; }
.modal-close:active { transform: scale(.88); }
.section-title {
  font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; font-size: 12.5px;
  color: var(--v2-violet-2);
  display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--v2-line), transparent); }
.section-title small { text-transform: none; letter-spacing: .2px; }

/* subtabs — one pill rail */
.subtabs { gap: 5px !important; padding: 4px; border-radius: 13px;
  background: rgba(6, 3, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); }
.subtab { border-radius: 9px !important; border: 1px solid transparent !important; transition: all .16s var(--ease-out); }
.subtab.active {
  background: linear-gradient(165deg, rgba(124, 58, 237, 0.4), rgba(76, 29, 149, 0.28)) !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff !important; /* the legacy gold-tab dark text is unreadable on violet */
}

/* ================= BUTTON SYSTEM V2 ================= */
.btn-gold, .premium-cta:not(.starter), .rn-claim {
  background: var(--v2-metal-gold);
  box-shadow: 0 8px 22px rgba(245, 197, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary {
  background: linear-gradient(180deg, #9d6bff 0%, var(--v2-violet) 55%, #5b21b6 100%);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.btn-ghost {
  border: 1px solid var(--v2-line) !important;
  background: linear-gradient(165deg, rgba(30, 18, 54, 0.5), rgba(12, 6, 24, 0.55)) !important;
}
.btn-gold:active, .btn-primary:active, .btn-ghost:active, .pack-buy:active { transform: translateY(1px) scale(0.99); }
.pack-buy {
  background: var(--v2-metal-gold);
  border: none; color: #221200;
  box-shadow: 0 5px 16px rgba(245, 197, 66, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* ================= CARD MATERIAL V2 (every list card shares it) ================= */
.task-card, .wheel-card, .boost-card, .contract-card, .prem-offer, .honor,
.wpack-card, .pack-card, .prize-row, .life-event, .gift-prem-box, .es-row,
.rift-mission, .rift-lvl, .rift-prize, .invite-box, .tk-buy-row, .blocked-row,
.pay-row, .daily-cell, .bp-tier, .gf-row, .badge-cell, .social-row, .friend-row {
  background: var(--v2-glass);
  border: 1px solid var(--v2-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.prize-row.prize-1, .rift-prize.p1 {
  border-color: var(--v2-line-gold);
  background:
    radial-gradient(140% 100% at 0% 50%, rgba(245, 197, 66, 0.12) 0%, transparent 55%),
    var(--v2-glass);
  box-shadow: 0 4px 18px rgba(245, 197, 66, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* rarity accents on wheel cards */
.wheel-card.common { border-left: 3px solid #9ca3af; }
.wheel-card.rare { border-left: 3px solid #38bdf8; }
.wheel-card.epic { border-left: 3px solid #a855f7; }
.wheel-card.legendary { border-left: 3px solid #f5c542; box-shadow: 0 4px 20px rgba(245, 197, 66, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05); }

/* leaderboard podium — trophy metal */
.podium-slot {
  background: var(--v2-glass);
  border: 1px solid var(--v2-line);
}
.podium-slot.p1 {
  border-color: var(--v2-line-gold);
  background: radial-gradient(120% 90% at 50% 0%, rgba(245, 197, 66, 0.16) 0%, transparent 60%), var(--v2-glass);
  box-shadow: 0 6px 24px rgba(245, 197, 66, 0.2);
}
.podium-slot.p2 { border-color: rgba(203, 213, 225, 0.35); }
.podium-slot.p3 { border-color: rgba(217, 119, 6, 0.4); }

/* ================= AUTH: first impression ================= */
#auth {
  background:
    linear-gradient(180deg, rgba(5, 2, 11, 0.55), rgba(5, 2, 11, 0.8)),
    url('/assets/colossum-v2/arena/arena-cosmic-9x16.webp') center / cover no-repeat;
}
.auth-card {
  background: linear-gradient(180deg, rgba(18, 10, 33, 0.92), rgba(9, 5, 18, 0.95));
  border: 1px solid var(--v2-line-gold);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.brand h1 { letter-spacing: 4px; font-size: 28px; }
.brand-sub { letter-spacing: 5px !important; }

/* boot loader on the same stage */
#boot-loader {
  background:
    linear-gradient(180deg, rgba(5, 2, 11, 0.6), rgba(5, 2, 11, 0.85)),
    url('/assets/colossum-v2/arena/arena-cosmic-9x16-lq.webp') center / cover no-repeat, #07030d !important;
}

/* ================= PERF GUARDS ================= */
body.lowfx .attack-btn::before, body.ultrafx .attack-btn::before { animation: none; background: none; }
body.lowfx .boss-header, body.lowfx .hud, body.lowfx .bottom-nav,
body.ultrafx .boss-header, body.ultrafx .hud, body.ultrafx .bottom-nav { backdrop-filter: none; }
body.ultrafx .arena { background-image:
  linear-gradient(180deg, rgba(5, 2, 11, 0.3), rgba(5, 2, 11, 0.42)),
  url('/assets/colossum-v2/arena/arena-cosmic-9x16-lq.webp'); }

/* ================= MOBILE POLISH ================= */
@media (max-width: 380px) {
  .attack-btn .attack-label { font-size: 20px; letter-spacing: 4px; }
  .boss-title { font-size: 14px; letter-spacing: 1.6px; }
}
/* =================== end COLOSSUM V2 layer =================== */

/* ================= V2: CHAMPIONS — collectible portrait cells ================= */
.char-card, .char-card.v4 {
  background:
    radial-gradient(90% 55% at 50% 18%, color-mix(in srgb, var(--rar, #7c3aed) 20%, transparent) 0%, transparent 60%),
    var(--v2-glass);
  border: 1px solid color-mix(in srgb, var(--rar, #a78bfa) 38%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.char-card::before {  /* portrait pedestal light */
  content: ''; position: absolute; left: 50%; top: 52px; width: 74px; height: 12px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--rar, #7c3aed) 55%, transparent), transparent 70%);
  filter: blur(2px);
}
.char-card .char-emoji {
  font-size: 44px; line-height: 1.25;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--rar, #7c3aed) 60%, transparent));
}
.char-card .char-name { font-size: 13.5px; letter-spacing: .4px; }
.char-card .char-rarity { font-weight: 900; letter-spacing: 2px; }
.char-card.owned { border-color: color-mix(in srgb, var(--rar, #22c55e) 70%, transparent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--rar, #22c55e) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* the player's own champion on the battle screen — presence, not placeholder */
.player-throne {
  position: relative;
}
.player-throne::before {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 84px; height: 16px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--boss-glow, #7c3aed) 40%, rgba(124, 58, 237, .5)), transparent 72%);
  filter: blur(2px);
}
.player-emoji { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 16px rgba(124, 58, 237, 0.45)); }
.player-name {
  background: var(--v2-glass-soft);
  border: 1px solid var(--v2-line);
  border-radius: 10px; padding: 2px 10px !important;
  backdrop-filter: blur(4px);
}

/* ================= V2: VICTORY + TICKER + CROWN ================= */
.victory-banner {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245, 197, 66, 0.2) 0%, transparent 55%),
    linear-gradient(180deg, rgba(21, 12, 38, 0.97), rgba(9, 5, 18, 0.98)) !important;
  border: 1px solid var(--v2-line-gold) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(245, 197, 66, 0.18) !important;
}
.ticker {
  border-radius: 11px !important;
  background: var(--v2-glass) !important;
  border: 1px solid var(--v2-line) !important;
  backdrop-filter: blur(8px);
}
.crown-spot { box-shadow: 0 0 18px rgba(245, 197, 66, .55), 0 0 40px rgba(124, 58, 237, .3), inset 0 0 10px rgba(255, 255, 255, .3) !important; }

/* ================= V2: PREMIUM & GIFT SURFACES ================= */
.premium-hero, .prem-active {
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(245, 197, 66, 0.14) 0%, transparent 55%),
    var(--v2-glass) !important;
  border: 1px solid var(--v2-line-gold) !important;
}
.gift-box { filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.6)); }

/* ================= V2: RIFT — dimensional identity ================= */
.rift-hero.v2 {
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 59, 92, 0.14) 0%, transparent 55%),
    linear-gradient(165deg, rgba(40, 12, 20, 0.85), rgba(12, 5, 18, 0.92)) !important;
}
.rift-cta.live { box-shadow: 0 0 22px rgba(255, 120, 73, .8), 0 5px 14px rgba(194, 65, 12, .5) !important; }

/* ================= V2: SCROLL + FOCUS ================= */
.modal::-webkit-scrollbar { width: 5px; }
.modal::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.3); border-radius: 3px; }
button:focus-visible { outline: 2px solid rgba(167, 139, 250, 0.7); outline-offset: 2px; }

/* ================= V2.1 — ARENA ART ENFORCEMENT + focal cleanup =================
   A legacy theme layer was overriding the painted arena with a flat gradient
   (the reported "nothing changed" bug). This block is FINAL in the cascade. */
.arena {
  background:
    linear-gradient(180deg, rgba(5, 2, 11, 0.18) 0%, rgba(5, 2, 11, 0.05) 34%, rgba(5, 2, 11, 0.34) 100%),
    url('/assets/colossum-v2/arena/arena-cosmic-9x16.webp') center top / cover no-repeat,
    radial-gradient(120% 80% at 50% 0%, #1c0e33 0%, #0a0516 70%);
}
/* the old boss-colour wash was drowning the painted art — keep a whisper of it */
.arena::before { opacity: .13; }
@keyframes arena-pulse { 0%,100%{opacity:.10; transform:scale(1);} 50%{opacity:.18; transform:scale(1.05);} }
/* star drift stays, but under the art's own stars — subtler */
.arena-fx { opacity: .3; }
body.ultrafx .arena { background-image:
  linear-gradient(180deg, rgba(5, 2, 11, 0.2), rgba(5, 2, 11, 0.34)),
  url('/assets/colossum-v2/arena/arena-cosmic-9x16-lq.webp'); }

/* boss name — cinematic title */
.boss-title #boss-name {
  background: linear-gradient(180deg, #fff 25%, #d9c9ff 70%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}