/* ═══════════ RANKED / LEAGUE — juiced-up redesign (preview) ═══════════ */

/* hero: radial glow stage behind the medal */
#screen-ranked .ranked-hero { position: relative; padding: 26px 0 14px; overflow: hidden; }
#screen-ranked .ranked-hero::before {
  content: ''; position: absolute; left: 50%; top: 30px; transform: translateX(-50%);
  width: 230px; height: 230px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(245,208,32,.38), transparent 65%);
  filter: blur(6px); animation: rkAura 3s ease-in-out infinite;
}
@keyframes rkAura { 0%,100% { opacity:.5; transform:translateX(-50%) scale(1); } 50% { opacity:.95; transform:translateX(-50%) scale(1.14); } }

/* medal badge: bigger, floating, glowing, rotating shine sweep */
#screen-ranked .ranked-badge {
  position: relative; z-index: 1; width: 100px; height: 100px; font-size: 40px;
  border-radius: 24px; margin-bottom: 14px; overflow: hidden;
  animation: rkFloat 3.2s ease-in-out infinite;
  box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.3), 0 0 26px rgba(245,208,32,.5);
}
#screen-ranked .ranked-badge::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  transform: skewX(-18deg);
  animation: rkShine 3.4s ease-in-out infinite;
}
@keyframes rkShine { 0% { left: -70%; } 28%, 100% { left: 140%; } }
@keyframes rkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rkSpin  { to { transform: rotate(360deg); } }

/* rank name + elo */
#screen-ranked .ranked-rank {
  position: relative; z-index: 1; font-size: 22px; text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 18px rgba(245,208,32,.55);
}
#screen-ranked .ranked-elo {
  position: relative; z-index: 1; font-size: 13px; margin-top: 8px;
  animation: rkElo 2s ease-in-out infinite;
}
@keyframes rkElo { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* progress bar: taller, glowing, grow-in + running shimmer */
#screen-ranked .ranked-prog-bar {
  height: 16px; max-width: 285px; border-radius: 10px; position: relative;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}
#screen-ranked .ranked-prog-fill {
  height: 100%; border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #ffd84a, #ff9a3b);
  box-shadow: 0 0 12px rgba(255,170,60,.75); animation: rkGrow .9s cubic-bezier(.2,1,.3,1);
}
@keyframes rkGrow { from { width: 0; } }
#screen-ranked .ranked-prog-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  animation: rkShimmer 1.9s ease-in-out infinite;
}
@keyframes rkShimmer { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(240%); } }

#screen-ranked .ranked-season {
  display: inline-block; margin: 8px auto 2px; padding: 5px 12px; border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cdd6e0;
}
#screen-ranked .ranked-hero + .ranked-season, #screen-ranked #ranked-season { display: block; text-align: center; }

/* section labels with an accent bar */
#screen-ranked .ranked-sec-label {
  position: relative; padding-left: 13px; color: #fff; opacity: .9; margin: 22px 2px 12px;
}
#screen-ranked .ranked-sec-label::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(#ffd84a, #ff9a3b); box-shadow: 0 0 8px rgba(255,170,60,.75);
}

/* rewards rows — staggered pop-in */
#screen-ranked .ranked-rw-row {
  padding: 10px 13px; border-radius: 12px; background: rgba(255,255,255,.06);
  border-left: 3px solid transparent; animation: rkRow .42s ease backwards;
}
#screen-ranked .ranked-rw-row.mine {
  background: rgba(245,208,32,.14); border-left-color: #f5d020; box-shadow: 0 0 14px rgba(245,208,32,.28);
}
#screen-ranked .ranked-rw-badge { width: 24px; height: 24px; box-shadow: 0 0 8px rgba(255,255,255,.25); }

/* leaderboard — top-3 medals + metal tint, your row pulses, staggered slide-in */
#screen-ranked .ranked-lb-row {
  padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.06);
  position: relative; animation: rkRow .42s ease backwards;
}
#screen-ranked .ranked-lb-row:nth-child(1) { background: linear-gradient(90deg, rgba(245,208,32,.24), rgba(255,255,255,.05)); border: 1px solid rgba(245,208,32,.55); }
#screen-ranked .ranked-lb-row:nth-child(2) { background: linear-gradient(90deg, rgba(200,210,220,.22), rgba(255,255,255,.05)); border: 1px solid rgba(200,210,220,.5); }
#screen-ranked .ranked-lb-row:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,.22), rgba(255,255,255,.05)); border: 1px solid rgba(205,127,50,.5); }
#screen-ranked .ranked-lb-row:nth-child(1) .ranked-lb-pos::before { content: '🥇 '; }
#screen-ranked .ranked-lb-row:nth-child(2) .ranked-lb-pos::before { content: '🥈 '; }
#screen-ranked .ranked-lb-row:nth-child(3) .ranked-lb-pos::before { content: '🥉 '; }
#screen-ranked .ranked-lb-row.mine {
  background: rgba(245,208,32,.16); border: 1px solid rgba(245,208,32,.6);
  animation: rkRow .42s ease backwards, rkMine 1.9s ease-in-out infinite .42s;
}
@keyframes rkMine { 0%,100% { box-shadow: 0 0 0 rgba(245,208,32,0); } 50% { box-shadow: 0 0 16px rgba(245,208,32,.55); } }
#screen-ranked .ranked-lb-elo { text-shadow: 0 0 8px rgba(245,208,32,.55); }

/* entrance + stagger */
@keyframes rkRow { from { opacity: 0; transform: translateX(-16px); } }
#screen-ranked .ranked-lb-row:nth-child(1){animation-delay:.02s}
#screen-ranked .ranked-lb-row:nth-child(2){animation-delay:.06s}
#screen-ranked .ranked-lb-row:nth-child(3){animation-delay:.10s}
#screen-ranked .ranked-lb-row:nth-child(4){animation-delay:.14s}
#screen-ranked .ranked-lb-row:nth-child(5){animation-delay:.18s}
#screen-ranked .ranked-lb-row:nth-child(n+6){animation-delay:.22s}
#screen-ranked .ranked-rw-row:nth-child(1){animation-delay:.05s}
#screen-ranked .ranked-rw-row:nth-child(2){animation-delay:.10s}
#screen-ranked .ranked-rw-row:nth-child(3){animation-delay:.15s}
#screen-ranked .ranked-rw-row:nth-child(n+4){animation-delay:.19s}

/* ═══════════ RANKINGS (leaderboard #screen-leaderboard) — juiced ═══════════ */
#screen-leaderboard .lb-entry {
  border-radius: 14px !important; padding: 12px 14px; margin-bottom: 8px;
  position: relative; animation: rkRow .42s ease backwards;
}
/* top-3 metal tint + glow */
#screen-leaderboard .lb-entry.rank-1 { background: linear-gradient(90deg, rgba(245,208,32,.22), rgba(255,255,255,.04)) !important; border: 1px solid rgba(245,208,32,.55) !important; box-shadow: 0 0 18px rgba(245,208,32,.22) !important; }
#screen-leaderboard .lb-entry.rank-2 { background: linear-gradient(90deg, rgba(200,210,220,.20), rgba(255,255,255,.04)) !important; border: 1px solid rgba(200,210,220,.50) !important; }
#screen-leaderboard .lb-entry.rank-3 { background: linear-gradient(90deg, rgba(205,127,50,.20), rgba(255,255,255,.04)) !important; border: 1px solid rgba(205,127,50,.50) !important; }
/* rank badges — metal gradients + glow */
#screen-leaderboard .lb-rank-badge { box-shadow: 0 0 10px rgba(255,255,255,.15); }
#screen-leaderboard .lb-entry.rank-1 .lb-rank-badge { background: linear-gradient(135deg,#ffe14a,#e0a000) !important; color:#4a3200 !important; box-shadow: 0 0 14px rgba(245,208,32,.65); }
#screen-leaderboard .lb-entry.rank-2 .lb-rank-badge { background: linear-gradient(135deg,#eef2f6,#aab4bf) !important; color:#2a2f36 !important; }
#screen-leaderboard .lb-entry.rank-3 .lb-rank-badge { background: linear-gradient(135deg,#e79a5c,#b06a2e) !important; color:#3a1f08 !important; }
/* score glow */
#screen-leaderboard .lb-score { text-shadow: 0 0 10px rgba(245,208,32,.5); }
/* your row pulses gold */
#screen-leaderboard .lb-entry.me {
  background: rgba(245,208,32,.15) !important; border: 1px solid rgba(245,208,32,.6) !important;
  animation: rkRow .42s ease backwards, rkMine 1.9s ease-in-out infinite .42s;
}
/* prize banner glow + tabs */
#screen-leaderboard .prize-banner { box-shadow: 0 0 20px rgba(245,208,32,.10), inset 0 1px 0 rgba(255,255,255,.08); }
#screen-leaderboard .prize-title { text-shadow: 0 0 12px rgba(245,208,32,.5); }
/* staggered entrance */
#screen-leaderboard .lb-entry:nth-child(1){animation-delay:.02s}
#screen-leaderboard .lb-entry:nth-child(2){animation-delay:.06s}
#screen-leaderboard .lb-entry:nth-child(3){animation-delay:.10s}
#screen-leaderboard .lb-entry:nth-child(4){animation-delay:.14s}
#screen-leaderboard .lb-entry:nth-child(5){animation-delay:.18s}
#screen-leaderboard .lb-entry:nth-child(n+6){animation-delay:.22s}

/* ═══════════ PODIUM (top-3) — the redesign centerpiece ═══════════ */
#screen-leaderboard .lb-podium {
  display: flex; justify-content: center; align-items: flex-end; gap: 10px;
  padding: 14px 6px 4px; margin-bottom: 6px;
}
.lb-podium .pod {
  flex: 1; max-width: 118px; display: flex; flex-direction: column; align-items: center;
  position: relative; cursor: pointer;
  animation: rkPodIn .5s cubic-bezier(.2,1.3,.4,1) backwards;
}
.lb-podium .pod-1 { animation-delay: .05s; } .lb-podium .pod-2 { animation-delay: .16s; } .lb-podium .pod-3 { animation-delay: .26s; }
@keyframes rkPodIn { from { opacity: 0; transform: translateY(24px) scale(.9); } }

.pod-crown { font-size: 26px; margin-bottom: 2px; animation: rkFloat 2.6s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.pod-ava {
  width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: radial-gradient(circle at 50% 34%, #3a3457, #16131f);
  border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.pod-1 .pod-ava { width: 68px; height: 68px; border-color: #ffe14a; box-shadow: 0 0 22px rgba(245,208,32,.75); }
.pod-2 .pod-ava { border-color: #e2e8ef; box-shadow: 0 0 14px rgba(200,210,220,.4); }
.pod-3 .pod-ava { border-color: #e79a5c; box-shadow: 0 0 14px rgba(205,127,50,.4); }
.pod-bird { display: block; image-rendering: pixelated; }
.pod-name { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; margin: 8px 0 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #f5d020; text-shadow: 0 0 8px rgba(245,208,32,.5); margin-bottom: 8px; }
.pod-bar {
  width: 100%; display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace; color: #fff; border-radius: 12px 12px 0 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}
.pod-1 .pod-bar { height: 80px; background: linear-gradient(#f5d020,#c99400); font-size: 26px; color: #543100; }
.pod-2 .pod-bar { height: 56px; background: linear-gradient(#c8d2dc,#8b97a3); font-size: 22px; }
.pod-3 .pod-bar { height: 42px; background: linear-gradient(#d98a52,#a5602c); font-size: 20px; }
.pod.me .pod-ava { box-shadow: 0 0 0 3px #f5d020, 0 0 18px rgba(245,208,32,.6); }

/* ═══════════ per-rank PRIZES inline (banner hidden) ═══════════ */
#screen-leaderboard .prize-banner { display: none !important; }
#screen-leaderboard .lb-prize {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: #ffd84a;
  background: rgba(245,208,32,.14); border: 1px solid rgba(245,208,32,.4);
  padding: 5px 8px; border-radius: 8px; white-space: nowrap; margin-right: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.pod-prize {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: #ffd84a;
  background: rgba(245,208,32,.16); border: 1px solid rgba(245,208,32,.45);
  padding: 4px 9px; border-radius: 10px; margin-bottom: 8px; white-space: nowrap;
  box-shadow: 0 0 10px rgba(245,208,32,.2);
}
#screen-leaderboard .pod-score { margin-bottom: 6px; }

/* ═══════════ BATTLE profile / ELO card — full redesign ═══════════ */
#screen-battle .b-profile-card {
  position: relative; cursor: pointer; overflow: hidden; align-items: center; gap: 12px;
  padding: 16px 16px 34px !important; margin: 12px 16px 0 !important; border-radius: 18px !important;
  background: linear-gradient(135deg, #2a2150 0%, #171232 58%, #120e26 100%) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(130,95,225,.35),
              0 10px 30px rgba(70,45,160,.28) !important;
}
/* warm glow behind the rank badge */
#screen-battle .b-profile-card::before {
  content: ''; position: absolute; left: 4px; top: -18px; width: 135px; height: 135px; pointer-events: none;
  background: radial-gradient(circle, rgba(230,180,90,.32), transparent 68%); filter: blur(6px);
}
#screen-battle .b-profile-left { gap: 12px; z-index: 1; }
#screen-battle .b-rank-badge {
  width: 56px !important; height: 56px !important; border-radius: 15px !important; font-size: 25px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35), 0 0 22px rgba(230,180,90,.55) !important;
  animation: rkFloat 3.2s ease-in-out infinite;
}
#screen-battle .b-profile-elo {
  font-size: 20px !important; color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 16px rgba(245,208,32,.4) !important;
}
#screen-battle .b-profile-rank {
  font-size: 8px !important; letter-spacing: 2px !important; color: #f0c070 !important; margin-top: 5px !important;
}
#screen-battle .b-profile-stats { gap: 6px !important; z-index: 1; }
#screen-battle .b-stat {
  min-width: 40px; padding: 8px 5px 6px; border-radius: 12px; gap: 3px !important;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
#screen-battle .b-stat-val { font-size: 15px !important; }
#screen-battle .b-stat-lbl { font-size: 7px !important; letter-spacing: 1px; opacity: .85; }
#screen-battle .b-stat:nth-child(1) { border-color: rgba(90,220,130,.4); background: rgba(90,220,130,.08); }
#screen-battle .b-stat:nth-child(1) .b-stat-val { color: #78e08c !important; }
#screen-battle .b-stat:nth-child(2) { border-color: rgba(255,95,95,.4); background: rgba(255,95,95,.08); }
#screen-battle .b-stat:nth-child(2) .b-stat-val { color: #ff8080 !important; }
#screen-battle .b-stat:nth-child(3) { border-color: rgba(255,160,60,.4); background: rgba(255,160,60,.08); }
#screen-battle .b-stat:nth-child(3) .b-stat-val { color: #ffb04a !important; }
/* footer: tap-to-open-league hint */
#screen-battle .b-profile-card::after {
  content: 'ТАП → ЛИГА · ТОП ИГРОКОВ ПО ELO ›';
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 8px 0;
  font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: 1px;
  color: rgba(255,255,255,.5); pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
}

/* ═══════════ RANK medals (CSS placeholder until Higgsfield art) ═══════════ */
.rk-medal {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0; vertical-align: middle;
  background: var(--rk);
  background-image:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, rgba(255,255,255,.22), rgba(0,0,0,.38));
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.rk-medal-star { font-size: .5em; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.rk-medal-pips { position: absolute; bottom: 8%; left: 0; right: 0; display: flex; gap: 2px; justify-content: center; }
.rk-medal-pips i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 2px rgba(0,0,0,.5); }
.rk-medal::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg);
  animation: rkShine 3.4s ease-in-out infinite;
}

/* ═══════════ RANK LADDER — chip, gameover reveal, screen ═══════════ */
.m2-rank {
  display: none; align-items: center; gap: 7px; margin: 8px auto 0; padding: 6px 12px 6px 7px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--m2-panel);
  box-shadow: 0 0 0 3px var(--m2-ink), inset 2px 2px 0 var(--m2-hi), inset -2px -2px 0 var(--m2-lo);
  font-family: 'Press Start 2P', monospace;
}
.m2-rank .mr-name { font-size: 8px; color: #fff; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ── BEST + rank chips: FORCED to identical size (same fixed width AND height) ── */
#screen-menu .m2-best,
#screen-menu .m2-rank {
  width: 164px !important; height: 46px !important; box-sizing: border-box !important;
  min-height: 0 !important; padding: 0 12px !important; margin: 6px 0 0 !important;
  align-items: center !important; justify-content: center !important;
  gap: 8px !important; vertical-align: middle !important; overflow: visible !important;
}
/* bigger rank medal in the chip — static + centered (the rkFloat animation made it
   drift up and clip the chip's top edge). */
#screen-menu .m2-rank .rk-medal2 {
  flex-shrink: 0; overflow: visible; animation: none !important;
  width: 28px !important; height: 28px !important; transform: none !important;
}
#screen-menu .m2-rank .rk-medal2-img { width: 100% !important; height: 100% !important; }

.go-rank { display: none; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 2px; }
.go-rank .gr-name { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #5a3a1a; letter-spacing: 1px; }

#screen-rankladder { background: linear-gradient(160deg,#1b1836 0%,#14111f 55%,#0d0b16 100%); }
#screen-rankladder .rl-scroll { flex: 1; overflow-y: auto; padding: 0 14px 24px; width: 100%; box-sizing: border-box; }
.rl-hero { text-align: center; padding: 22px 0 10px; position: relative; }
.rl-medal-wrap { display: inline-block; animation: rkFloat 3.2s ease-in-out infinite; margin-bottom: 12px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.rl-rank-name { font-family: 'Press Start 2P', monospace; font-size: 20px; color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 16px rgba(255,255,255,.25); }
.rl-best { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #ffd84a; margin-top: 8px; letter-spacing: 1px; }
.rl-prog { height: 14px; max-width: 280px; margin: 12px auto 6px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.rl-prog-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg,#ffd84a,#ff9a3b); box-shadow: 0 0 10px rgba(255,170,60,.6); animation: rkGrow .9s cubic-bezier(.2,1,.3,1); }
.rl-next { font-family: 'Press Start 2P', monospace; font-size: 7px; color: rgba(255,255,255,.6); letter-spacing: 1px; }
.rl-list { display: flex; flex-direction: column; gap: 8px; }
.rl-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); animation: rkRow .4s ease backwards; cursor: pointer; }
.rl-row.me { background: rgba(245,208,32,.14); border-color: rgba(245,208,32,.55); }
.rl-row:nth-child(1){animation-delay:.03s}.rl-row:nth-child(2){animation-delay:.07s}.rl-row:nth-child(3){animation-delay:.11s}.rl-row:nth-child(n+4){animation-delay:.15s}
.rl-pos { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #8fa4b8; min-width: 30px; }
.rl-name { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #fff; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-score { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #ffd84a; text-shadow: 0 0 8px rgba(245,208,32,.5); }

/* ═══════════ PLAYER PROFILE — full redesign ═══════════ */
#screen-profile .profile-card {
  display: flex !important; align-items: center; gap: 14px; position: relative; overflow: hidden;
  padding: 16px !important; margin: 12px 16px 0 !important; border-radius: 18px !important; border: 0 !important;
  background: linear-gradient(135deg,#2a2150 0%,#171232 60%,#120e26 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(130,95,225,.32), 0 10px 28px rgba(0,0,0,.4) !important;
}
#screen-profile .profile-card::before {
  content:''; position:absolute; left:6px; top:-16px; width:120px; height:120px; pointer-events:none;
  background: radial-gradient(circle, rgba(245,208,32,.22), transparent 66%); filter: blur(6px);
}
#screen-profile .profile-rank-medal { flex-shrink: 0; z-index:1; animation: rkFloat 3.2s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
#screen-profile .profile-name-wrap { flex: 1; min-width: 0; z-index:1; }
#screen-profile .profile-username { font-size: 14px !important; color: #fff !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#screen-profile .profile-rank-name { font-family:'Press Start 2P',monospace; font-size: 9px; color:#ffd84a; margin-top: 6px; letter-spacing: 1px; text-shadow: 0 0 10px rgba(245,208,32,.4); }
#screen-profile .profile-badges { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
#screen-profile .profile-elo-chip { font-family:'Press Start 2P',monospace; font-size: 7px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; padding: 5px 8px; letter-spacing: 1px; white-space:nowrap; }

/* stat boxes → juicy */
#screen-profile .profile-section-title { position: relative; padding-left: 13px; margin: 18px 0 10px !important; }
#screen-profile .profile-section-title::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:13px; border-radius:2px; background:linear-gradient(#ffd84a,#ff9a3b); box-shadow:0 0 8px rgba(255,170,60,.6); }
#screen-profile .profile-stat-box {
  border-radius: 12px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important;
  padding: 11px 6px !important; animation: rkRow .4s ease backwards;
}
#screen-profile .profile-stat-val { font-size: 16px !important; }
#screen-profile .profile-stat-lbl { font-size: 6.5px !important; opacity: .72; letter-spacing: 1px; margin-top: 3px; }
#screen-profile .profile-stats-grid .profile-stat-box:nth-child(1){animation-delay:.03s}
#screen-profile .profile-stats-grid .profile-stat-box:nth-child(2){animation-delay:.07s}
#screen-profile .profile-stats-grid .profile-stat-box:nth-child(3){animation-delay:.11s}
#screen-profile .profile-stats-grid .profile-stat-box:nth-child(4){animation-delay:.15s}
#screen-profile .profile-stats-grid .profile-stat-box:nth-child(n+5){animation-delay:.19s}

/* ═══════════ Epic rank medals (Higgsfield art + CSS aura/float) ═══════════ */
/* iOS WKWebView clips <img> when animated `filter` meets `object-fit:contain` —
   so the float lives on the wrapper and the image carries no filter. */
.rk-medal2 {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; vertical-align: middle; overflow: visible;
  animation: rkFloat 3.2s ease-in-out infinite;
}
.rk-medal2-img {
  width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: auto;
}
.rk-medal2 .rk-medal-pips { position: absolute; bottom: -3px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; }
.rk-medal2 .rk-medal-pips i { width: 4px; height: 4px; border-radius: 50%; background: var(--rk); box-shadow: 0 0 2px rgba(0,0,0,.8), 0 0 4px var(--rk); }

/* ═══════════ GAME OVER buttons — menu-style, panel-width ═══════════ */
#screen-gameover .gameover-buttons { max-width: 300px !important; width: calc(100% - 40px) !important; padding: 0 !important; margin: 16px auto 0 !important; }
#screen-gameover .btn {
  max-width: none !important; width: 100% !important; padding: 16px 0 !important; font-size: 13px !important;
  margin-bottom: 12px !important; border: 0 !important; border-radius: 14px !important; letter-spacing: 1px; color: #fff;
  transition: transform .06s;
}
#screen-gameover .btn-green  { background:#73bf2e !important; color:#123300 !important; box-shadow: 0 0 0 4px #1a3d0a, inset 4px 4px 0 #a5f050, inset -4px -4px 0 #4d8a1f, 0 6px 0 #123300 !important; }
#screen-gameover .btn-orange { background:#ff8a3b !important; color:#5a2600 !important; box-shadow: 0 0 0 4px #8a4010, inset 4px 4px 0 #ffc586, inset -4px -4px 0 #d16a1f, 0 6px 0 #7a3810 !important; }
#screen-gameover .btn-yellow { background:#f5c400 !important; color:#543100 !important; box-shadow: 0 0 0 4px #8a6000, inset 4px 4px 0 #ffe860, inset -4px -4px 0 #c99400, 0 6px 0 #6b4a00 !important; }
#screen-gameover .btn-gray   { background:#8090a0 !important; color:#fff !important;    box-shadow: 0 0 0 4px #3d5a70, inset 4px 4px 0 #b8cce0, inset -4px -4px 0 #6d8298, 0 6px 0 #2a4256 !important; }
#screen-gameover .btn:active { transform: translateY(4px); }