:root{
  --bg:#0f0f1a;
  --surface:#171725;
  --surface-2:#202033;
  --border:rgba(255,255,255,.09);
  --text:#f3eee4;
  --muted:#aaa497;
  --gold:#f0c040;
  --orange:#ff6b4a;
  --green:#4ecb71;
  --blue:#6ba3be;
  --radius:18px;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 50% -10%,#252540 0,#0f0f1a 45%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button{font:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,calc((100% - 1180px)/2));background:rgba(15,15,26,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:42px;height:42px;object-fit:contain}
.brand div{display:flex;flex-direction:column;line-height:1.05}
.brand strong{font-size:16px}
.brand span{margin-top:5px;color:var(--muted);font-size:11px}
.version-pill{padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11px;white-space:nowrap}
.page{width:min(1180px,100%);margin:0 auto;padding:26px 16px 64px}
.hero-copy{display:flex;align-items:end;justify-content:space-between;padding:8px 2px 18px}
.hero-copy h1{margin:3px 0 5px;font-size:clamp(30px,7vw,54px);line-height:.95;letter-spacing:-.045em}
.hero-copy p{margin:0;color:var(--muted)}
.eyebrow{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.18em}
.mountain-card,.standings-card{background:linear-gradient(180deg,rgba(32,32,51,.88),rgba(23,23,37,.96));border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 18px 14px}
.section-head h2{margin:4px 0 0;font-size:19px}
.mode-switch{display:flex;padding:3px;border:1px solid var(--border);border-radius:12px;background:#11111d}
.mode-btn{min-height:38px;padding:7px 11px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.mode-btn.active{background:var(--surface-2);color:var(--text)}
.mountain-host{padding:0 14px 14px}
.mountain-stage{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#10101b}
.mountain-stage>img{display:block;width:100%;height:auto}
.marker-layer{position:absolute;inset:0}
.climber-marker{position:absolute;display:grid;place-items:center;width:34px;height:34px;padding:0;border:2px solid rgba(255,255,255,.88);border-radius:50%;background:var(--orange);color:#111;font-weight:900;font-size:10px;box-shadow:0 4px 16px rgba(0,0,0,.45);transform:translate(-50%,-50%);cursor:pointer;transition:filter .2s,scale .2s;overflow:hidden}
.climber-marker img{width:100%;height:100%;object-fit:cover}
.climber-marker.rank-1,.climber-marker.rank-2,.climber-marker.rank-3{width:40px;height:40px;background:var(--gold)}
.climber-marker.group-marker{border-radius:12px;background:var(--blue);width:42px;height:42px}
.climber-marker:hover,.climber-marker:focus-visible{filter:brightness(1.15);scale:1.08;outline:none}
.mountain-detail{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px;margin-top:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(15,15,26,.82)}
.mountain-detail strong{display:block}
.mountain-detail span{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.detail-points{color:var(--gold);font-weight:900;font-size:18px;white-space:nowrap}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.stat-card{padding:14px 15px;border:1px solid var(--border);border-radius:14px;background:rgba(23,23,37,.82)}
.stat-card span{display:block;color:var(--muted);font-size:11px}
.stat-card strong{display:block;margin-top:5px;font-size:22px}
.standings-card{margin-top:12px}
.top-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 18px}
.standing{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:13px;background:rgba(15,15,26,.7)}
.medal{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(240,192,64,.12);font-size:18px}
.standing-copy{min-width:0}
.standing-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.standing-copy span{display:block;margin-top:3px;color:var(--muted);font-size:11px}
.splash{position:fixed;inset:0;z-index:100;overflow:auto;padding:22px;background:radial-gradient(circle at 50% 5%,#29294b 0,#151529 38%,#0f0f1a 72%);transition:opacity .65s ease,visibility .65s ease}
.splash::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px);background-size:52px 52px;opacity:.12}
.splash--leave{opacity:0;visibility:hidden}
.splash-brand{position:relative;z-index:2;display:flex;align-items:center;gap:14px;width:min(1000px,100%);margin:0 auto 12px}
.splash-brand img{width:58px;height:58px;object-fit:contain}
.splash-brand h1{margin:3px 0 2px;font-size:clamp(26px,6vw,42px);letter-spacing:-.035em}
.splash-brand p{margin:0;color:var(--muted);font-size:13px}
.splash-mountain{position:relative;z-index:2;width:min(1000px,100%);margin:0 auto;padding:0}
.splash-mountain .mountain-stage{box-shadow:0 28px 70px rgba(0,0,0,.4)}
.splash-top3{position:relative;z-index:3;display:flex;justify-content:center;gap:8px;width:min(720px,100%);margin:12px auto 0;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .4s ease,transform .4s ease}
.splash-top3.visible{opacity:1;transform:none}
.splash-winner{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.38);backdrop-filter:blur(8px)}
.splash-winner strong{font-size:12px}
.splash-winner span{display:block;color:var(--muted);font-size:10px}
@media(max-width:720px){
  .page{padding-left:10px;padding-right:10px}
  .topbar{padding-left:12px;padding-right:12px}
  .section-head{align-items:flex-start;flex-direction:column}
  .mode-switch{width:100%}
  .mode-btn{flex:1}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .top-three{grid-template-columns:1fr}
  .splash{padding:12px}
  .splash-brand{padding-top:4px}
  .splash-top3{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===== V2 MOUNTAIN POPUPS ===== */
.climber-marker{width:40px;height:40px;overflow:visible}
.climber-marker.rank-1,.climber-marker.rank-2,.climber-marker.rank-3{width:46px;height:46px}
.climber-marker img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.climber-marker.group-marker{width:46px;height:46px;border-radius:50%;overflow:visible}
.climber-marker.group-marker img{border-radius:50%}
.climber-marker.muted{opacity:.38;filter:saturate(.55)}
.climber-marker.selected{z-index:8;opacity:1;filter:none;scale:1.16;box-shadow:0 0 0 4px rgba(240,192,64,.22),0 8px 24px rgba(0,0,0,.55)}
.group-indicator{position:absolute;right:-7px;bottom:-6px;display:grid;place-items:center;width:21px;height:21px;border:2px solid #fff;border-radius:50%;background:#171725;font-size:10px;line-height:1}
.mountain-popover{--popover-shift:0px;position:absolute;z-index:12;width:min(285px,calc(100% - 24px));padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(15,15,26,.96);box-shadow:0 18px 44px rgba(0,0,0,.48);backdrop-filter:blur(16px);transform:translateX(calc(-50% + var(--popover-shift)));color:var(--text)}
.mountain-popover[hidden]{display:none}
.mountain-popover.above{transform:translate(calc(-50% + var(--popover-shift)),-100%) translateY(-30px)}
.mountain-popover.below{transform:translate(calc(-50% + var(--popover-shift)),30px)}
.popover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.popover-head strong{display:block;margin-top:2px;font-size:16px}
.popover-kicker{display:block;color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.16em}
.popover-close{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;margin:-5px -5px 0 0;border:0;border-radius:9px;background:rgba(255,255,255,.06);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.popover-group{margin-top:4px;color:var(--muted);font-size:11px}
.popover-score{display:flex;align-items:baseline;gap:5px;margin-top:12px}
.popover-score strong{font-size:27px;line-height:1;color:var(--gold)}
.popover-score span{color:var(--muted);font-size:11px}
.popover-progress{height:6px;margin-top:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
.popover-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--gold))}
.popover-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.popover-stats div{min-width:0;padding:8px 6px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.025);text-align:center}
.popover-stats span{display:block;color:var(--muted);font-size:9px}
.popover-stats strong{display:block;margin-top:3px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-group-badge{margin-top:10px;padding:8px 10px;border:1px solid rgba(240,192,64,.2);border-radius:9px;background:rgba(240,192,64,.08);color:var(--gold);font-size:11px;font-weight:800;text-align:center}

@media(max-width:640px){
.climber-marker{width:42px;height:42px}
.climber-marker.rank-1,.climber-marker.rank-2,.climber-marker.rank-3,.climber-marker.group-marker{width:46px;height:46px}
.mountain-popover,.mountain-popover.above,.mountain-popover.below{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;transform:none}
}

/* ===== V2 NAVIGATION + DETAIL PAGES ===== */

[hidden]{display:none!important}

.brand{text-decoration:none;color:inherit}

.popover-action{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:42px;
margin-top:12px;
padding:10px 12px;
border:1px solid rgba(240,192,64,.22);
border-radius:10px;
background:rgba(240,192,64,.08);
color:var(--gold);
font-size:12px;
font-weight:800;
text-decoration:none
}

.popover-action span{font-size:16px}

.detail-shell{
width:min(900px,100%);
margin:0 auto;
padding:8px 0 30px
}

.detail-back{
display:inline-flex;
align-items:center;
min-height:42px;
margin-bottom:14px;
color:var(--muted);
font-size:13px;
font-weight:700;
text-decoration:none
}

.profile-hero,.group-hero{
display:flex;
align-items:center;
gap:18px;
padding:20px;
border:1px solid var(--border);
border-radius:var(--radius);
background:linear-gradient(180deg,rgba(32,32,51,.9),rgba(23,23,37,.96))
}

.profile-avatar{
display:grid;
place-items:center;
width:82px;
height:82px;
flex:0 0 82px;
overflow:hidden;
border:3px solid rgba(255,255,255,.14);
border-radius:50%;
background:#25253a
}

.profile-avatar-image{
width:100%;
height:100%;
object-fit:cover
}

.profile-avatar-fallback{
font-size:23px;
font-weight:900;
color:var(--gold)
}

.profile-heading{min-width:0}

.profile-heading h1,.group-hero h1{
margin:4px 0 6px;
font-size:clamp(27px,6vw,40px);
line-height:1;
letter-spacing:-.04em
}

.profile-meta{
display:flex;
flex-wrap:wrap;
gap:6px
}

.profile-meta span{
padding:5px 8px;
border:1px solid var(--border);
border-radius:999px;
color:var(--muted);
font-size:10px
}

.group-hero{
justify-content:space-between
}

.group-hero p{
margin:6px 0 0;
color:var(--muted);
font-size:13px
}

.group-hero p a{
color:var(--gold);
text-decoration:none
}

.group-champion{
display:flex;
flex-direction:column;
align-items:center;
min-width:128px;
padding:12px;
border:1px solid rgba(240,192,64,.2);
border-radius:13px;
background:rgba(240,192,64,.07);
text-align:center
}

.group-champion>span{font-size:25px}
.group-champion strong{margin-top:3px;color:var(--gold)}
.group-champion small{margin-top:3px;color:var(--muted);font-size:9px}

.detail-stat-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:9px;
margin:10px 0
}

.detail-stat-grid>div{
padding:13px;
border:1px solid var(--border);
border-radius:13px;
background:rgba(23,23,37,.82)
}

.detail-stat-grid span{
display:block;
color:var(--muted);
font-size:10px
}

.detail-stat-grid strong{
display:block;
margin-top:4px;
font-size:21px
}

.detail-card{
margin-top:10px;
padding:17px;
border:1px solid var(--border);
border-radius:var(--radius);
background:linear-gradient(180deg,rgba(32,32,51,.84),rgba(23,23,37,.94))
}

.detail-card-heading{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:15px
}

.detail-card-heading h2{
margin:4px 0 0;
font-size:17px
}

.detail-card-heading>strong{
color:var(--gold);
font-size:19px
}

.detail-progress{
height:9px;
margin-top:14px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.07)
}

.detail-progress span,.member-progress span{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--blue),var(--gold))
}

.profile-badges{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:15px
}

.profile-badge{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
border:1px solid var(--border);
border-radius:12px;
background:rgba(255,255,255,.025)
}

.profile-badge img{
width:38px;
height:38px;
object-fit:contain
}

.profile-badge span{
font-size:11px;
font-weight:700
}

.activity-list,.member-list{
display:grid;
gap:7px;
margin-top:13px
}

.activity-row{
display:grid;
grid-template-columns:35px minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:10px;
border:1px solid var(--border);
border-radius:11px;
background:rgba(15,15,26,.48)
}

.activity-icon{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:9px;
background:rgba(78,203,113,.1);
color:var(--green)
}

.activity-copy,.activity-value{min-width:0}

.activity-copy strong{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.activity-copy span,.activity-value span{
display:block;
margin-top:3px;
color:var(--muted);
font-size:10px
}

.activity-value{text-align:right}
.activity-value strong{color:var(--gold)}

.empty-detail{
padding:18px;
border:1px dashed var(--border);
border-radius:11px;
color:var(--muted);
font-size:12px;
text-align:center
}

.empty-detail strong,.empty-detail span{display:block}
.empty-detail span{margin-top:4px}

.member-row{
display:grid;
grid-template-columns:44px minmax(0,1fr) auto;
align-items:center;
gap:11px;
padding:10px;
border:1px solid var(--border);
border-radius:12px;
background:rgba(15,15,26,.48);
color:inherit;
text-decoration:none
}

.member-avatar{
display:grid;
place-items:center;
width:42px;
height:42px;
overflow:hidden;
border:2px solid rgba(255,255,255,.11);
border-radius:50%;
background:#27273d;
font-size:11px;
font-weight:900
}

.member-avatar-image{
width:100%;
height:100%;
object-fit:cover
}

.member-copy{min-width:0}

.member-copy strong{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.member-copy>span{
display:block;
margin-top:2px;
color:var(--muted);
font-size:10px
}

.member-progress{
height:4px;
margin-top:7px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.06)
}

.member-points{text-align:right}
.member-points strong{display:block;color:var(--gold)}
.member-points span{display:block;color:var(--muted);font-size:9px}

/* ===== SPLASH RANKINGS ===== */

.splash-rankings{
position:relative;
z-index:5;
width:min(760px,100%);
margin:12px auto 0;
padding:14px;
opacity:0;
transform:translateY(8px) scale(.985);
transition:opacity .35s ease,transform .35s ease;
border:1px solid rgba(255,255,255,.1);
border-radius:17px;
background:rgba(7,7,14,.72);
backdrop-filter:blur(16px)
}

.splash-rankings.visible{
opacity:1;
transform:none
}

.splash-ranking-logo{
display:flex;
justify-content:center
}

.splash-ranking-logo img{
width:60px;
height:60px;
object-fit:contain
}

.splash-ranking-title{
margin-top:3px;
text-align:center
}

.splash-ranking-title h2{
margin:4px 0 2px;
font-size:20px
}

.splash-ranking-title p{
margin:0;
color:var(--muted);
font-size:10px
}

.splash-podium{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
margin-top:12px
}

.splash-rank-card{
display:grid;
grid-template-columns:auto 40px minmax(0,1fr);
align-items:center;
gap:8px;
padding:9px;
border:1px solid var(--border);
border-radius:12px;
background:rgba(255,255,255,.025)
}

.splash-rank-card.rank-1{
border-color:rgba(240,192,64,.25);
background:rgba(240,192,64,.07)
}

.splash-rank-number{font-size:18px}

.splash-rank-avatar{
display:grid;
place-items:center;
width:38px;
height:38px;
overflow:hidden;
border:2px solid rgba(255,255,255,.14);
border-radius:50%;
background:#27273d;
font-size:9px;
font-weight:900
}

.splash-rank-avatar img{
width:100%;
height:100%;
object-fit:cover
}

.splash-rank-copy{min-width:0}

.splash-rank-copy>span{
display:block;
color:var(--gold);
font-size:8px;
font-weight:900
}

.splash-rank-copy strong{
display:block;
margin-top:1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:11px
}

.splash-rank-copy small{
display:block;
margin-top:2px;
color:var(--muted);
font-size:9px
}

@media(max-width:640px){

.profile-hero,.group-hero{
align-items:flex-start
}

.profile-avatar{
width:68px;
height:68px;
flex-basis:68px
}

.group-hero{
flex-direction:column
}

.group-champion{
align-items:flex-start;
width:100%
}

.detail-stat-grid{
grid-template-columns:repeat(2,1fr)
}

.splash-podium{
grid-template-columns:1fr
}

.splash-rank-card{
grid-template-columns:auto 38px minmax(0,1fr)
}

}

/* ============================================================
   SPLASH V3
   Strict single-screen responsive layout
   Desktop / tablet / mobile / landscape
   ============================================================ */

.splash{
height:var(--splash-height,100dvh);
max-height:var(--splash-height,100dvh);
min-height:0;
overflow:hidden;
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
gap:8px;
padding:clamp(8px,1.8vw,18px);
overscroll-behavior:none
}

@supports not (height:100dvh){
.splash{
height:var(--splash-height,100vh);
max-height:var(--splash-height,100vh)
}
}

.splash-brand{
width:min(1000px,100%);
max-height:76px;
min-height:0;
margin:0 auto;
padding:0;
transition:
opacity .3s ease,
transform .3s ease,
max-height .35s ease,
margin .35s ease
}

.splash-brand img{
width:clamp(42px,5vw,58px);
height:clamp(42px,5vw,58px)
}

.splash-brand h1{
font-size:clamp(21px,4vw,38px)
}

.splash-brand p{
font-size:clamp(10px,1.5vw,13px)
}

.splash.rankings-phase .splash-brand{
max-height:0;
margin:0 auto -8px;
opacity:0;
overflow:hidden;
pointer-events:none;
transform:translateY(-8px)
}

.splash-mountain{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-width:0;
min-height:0;
margin:0 auto;
padding:0;
overflow:hidden
}

.splash-mountain .mountain-stage{
flex:0 0 auto;
max-width:100%;
max-height:100%;
margin:0;
border-radius:12px
}

.splash-mountain .mountain-stage>img{
display:block;
object-fit:fill
}

/*
Before rankings appear this row collapses completely,
giving the mountain the maximum available screen area.
*/
.splash:not(.rankings-phase) .splash-rankings{
height:0;
min-height:0;
margin:0 auto;
padding:0;
border-width:0;
overflow:hidden
}

.splash-rankings{
position:relative;
z-index:5;
box-sizing:border-box;
width:min(760px,100%);
height:148px;
min-height:148px;
margin:0 auto;
padding:7px 10px;
overflow:hidden;
border:1px solid rgba(255,255,255,.1);
border-radius:15px;
background:rgba(7,7,14,.78);
backdrop-filter:blur(16px);
transform:translateY(6px) scale(.99);
transition:
opacity .3s ease,
transform .3s ease,
height .35s ease,
min-height .35s ease,
padding .35s ease
}

.splash-rankings.visible{
opacity:1;
transform:none
}

.splash-ranking-logo{
height:31px;
display:flex;
align-items:center;
justify-content:center
}

.splash-ranking-logo img{
width:31px;
height:31px;
object-fit:contain
}

.splash-ranking-title{
margin-top:1px;
text-align:center
}

.splash-ranking-title .eyebrow{
font-size:8px
}

.splash-ranking-title h2{
margin:1px 0;
font-size:16px;
line-height:1.05
}

.splash-ranking-title p{
margin:0;
font-size:9px;
line-height:1.1
}

.splash-podium{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
margin-top:6px
}

.splash-rank-card{
min-width:0;
min-height:48px;
display:grid;
grid-template-columns:auto 32px minmax(0,1fr);
align-items:center;
gap:6px;
padding:5px 7px
}

.splash-rank-number{
font-size:16px
}

.splash-rank-avatar{
width:30px;
height:30px;
font-size:8px
}

.splash-rank-copy>span{
font-size:7px
}

.splash-rank-copy strong{
font-size:10px
}

.splash-rank-copy small{
margin-top:1px;
font-size:8px
}

/* ============================================================
   MOBILE PORTRAIT
   Rankings become compact vertical rows but stay on-screen.
   ============================================================ */

@media(max-width:640px) and (min-height:601px){

.splash{
gap:6px;
padding:9px
}

.splash-brand{
max-height:62px
}

.splash-brand img{
width:44px;
height:44px
}

.splash-brand h1{
font-size:23px
}

.splash-brand p{
font-size:10px
}

.splash-rankings{
height:194px;
min-height:194px;
padding:6px 8px
}

.splash-ranking-logo{
height:28px
}

.splash-ranking-logo img{
width:28px;
height:28px
}

.splash-ranking-title h2{
font-size:15px
}

.splash-ranking-title p{
font-size:8px
}

.splash-podium{
grid-template-columns:1fr;
gap:3px;
margin-top:5px
}

.splash-rank-card{
min-height:37px;
grid-template-columns:22px 28px minmax(0,1fr);
gap:6px;
padding:3px 7px
}

.splash-rank-number{
font-size:14px
}

.splash-rank-avatar{
width:26px;
height:26px
}

.splash-rank-copy{
display:grid;
grid-template-columns:24px minmax(0,1fr) auto;
align-items:center;
gap:5px
}

.splash-rank-copy>span,
.splash-rank-copy strong,
.splash-rank-copy small{
margin:0
}

.splash-rank-copy strong{
font-size:10px
}

.splash-rank-copy small{
font-size:8px;
white-space:nowrap
}

}

/* ============================================================
   SHORT SCREENS / LANDSCAPE PHONES / SMALL TABLETS
   Everything compresses rather than scrolling.
   ============================================================ */

@media(max-height:600px){

.splash{
gap:4px;
padding:6px 8px
}

.splash-brand{
max-height:47px;
gap:8px
}

.splash-brand img{
width:38px;
height:38px
}

.splash-brand h1{
font-size:19px
}

.splash-brand p{
display:none
}

.splash-rankings{
height:106px;
min-height:106px;
padding:4px 7px
}

.splash-ranking-logo{
height:23px
}

.splash-ranking-logo img{
width:23px;
height:23px
}

.splash-ranking-title{
line-height:1
}

.splash-ranking-title .eyebrow{
font-size:6px
}

.splash-ranking-title h2{
margin:0;
font-size:13px
}

.splash-ranking-title p{
display:none
}

.splash-podium{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:4px;
margin-top:4px
}

.splash-rank-card{
min-height:41px;
grid-template-columns:auto 24px minmax(0,1fr);
gap:4px;
padding:3px 5px
}

.splash-rank-number{
font-size:13px
}

.splash-rank-avatar{
width:23px;
height:23px
}

.splash-rank-copy>span{
font-size:6px
}

.splash-rank-copy strong{
font-size:8px
}

.splash-rank-copy small{
font-size:7px
}

}

/* Very narrow phones */
@media(max-width:380px) and (min-height:601px){

.splash{
padding-left:6px;
padding-right:6px
}

.splash-rankings{
height:188px;
min-height:188px
}

.splash-ranking-title p{
display:none
}

.splash-rank-card{
min-height:36px
}

}

/* Reduced motion still receives the complete final layout. */
@media(prefers-reduced-motion:reduce){

.splash-brand,
.splash-rankings{
transition:none
}

}

/* ============================================================
   V2 RESPONSIVE MOUNTAIN HOME
   Desktop + landscape tablet = mountain left / dashboard right
   Portrait tablet + mobile = mountain first / info underneath
   ============================================================ */

:root{
--app-height:100dvh;
--topbar-height:68px
}

.page{
width:min(1440px,100%);
margin:0 auto
}

.home-layout{
display:block
}

.mountain-panel{
min-width:0
}

.home-mountain-host{
display:flex;
align-items:center;
justify-content:center;
height:clamp(
360px,
calc(var(--app-height) - var(--topbar-height) - 125px),
760px
);
min-height:0;
padding:0 10px 12px;
overflow:hidden
}

.home-mountain-host .mountain-stage{
flex:0 0 auto;
max-width:100%;
max-height:100%;
margin:0 auto
}

.home-mountain-host .mountain-stage>img{
display:block;
width:100%;
height:100%
}

.dashboard-panel{
min-width:0
}

.dashboard-intro{
padding:24px 4px 8px
}

.dashboard-intro h1{
margin:4px 0 5px;
font-size:clamp(29px,7vw,48px);
line-height:.95;
letter-spacing:-.045em
}

.dashboard-intro p{
margin:0;
color:var(--muted)
}

.desktop-mode-switch{
display:none
}

.mobile-mode-switch{
display:flex
}

.top-group-summary{
margin-top:12px
}

.top-group-card{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
padding:14px;
border:1px solid rgba(240,192,64,.18);
border-radius:14px;
background:linear-gradient(
180deg,
rgba(240,192,64,.08),
rgba(23,23,37,.9)
);
color:inherit;
text-decoration:none
}

.top-group-crown{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:12px;
background:rgba(240,192,64,.1);
font-size:22px
}

.top-group-copy{
min-width:0
}

.top-group-copy strong{
display:block;
margin-top:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.top-group-copy small{
display:block;
margin-top:3px;
color:var(--muted);
font-size:10px
}

.top-group-arrow{
color:var(--gold);
font-size:20px
}


/* ============================================================
   WIDE LANDSCAPE
   Desktop and landscape tablets
   ============================================================ */

@media(min-width:900px) and (orientation:landscape){

body{
overflow-x:hidden
}

.page{
padding:14px 16px 18px
}

.home-layout{
display:grid;
grid-template-columns:minmax(0,1.8fr) minmax(300px,.72fr);
gap:14px;
height:calc(
var(--app-height) -
var(--topbar-height) -
32px
);
min-height:0
}

.mountain-panel{
display:flex;
flex-direction:column;
height:100%;
min-height:0
}

.mountain-heading{
flex:0 0 auto;
padding:14px 16px 10px
}

.mobile-mode-switch{
display:none
}

.home-mountain-host{
flex:1 1 auto;
height:auto;
min-height:0;
max-height:none;
padding:0 12px 12px
}

.dashboard-panel{
height:100%;
min-height:0;
overflow-y:auto;
padding-right:3px;
scrollbar-width:thin
}

.dashboard-intro{
padding:4px 2px 12px
}

.dashboard-intro h1{
font-size:clamp(31px,3vw,47px)
}

.dashboard-intro p{
font-size:12px
}

.desktop-mode-switch{
display:flex;
width:100%;
margin-bottom:10px
}

.desktop-mode-switch .mode-btn{
flex:1
}

.dashboard-panel .stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin:0
}

.dashboard-panel .stat-card{
padding:11px 12px
}

.dashboard-panel .stat-card strong{
font-size:20px
}

.dashboard-standings{
margin-top:10px
}

.dashboard-standings .section-head{
padding:14px 14px 9px
}

.dashboard-standings .top-three{
grid-template-columns:1fr;
gap:6px;
padding:0 12px 12px
}

.dashboard-standings .standing{
padding:9px 10px
}

.dashboard-standings .medal{
width:30px;
height:30px;
font-size:16px
}

.top-group-summary{
margin-top:10px
}

.top-group-card{
padding:11px
}

}


/* ============================================================
   LARGE DESKTOP
   Give mountain even more visual priority.
   ============================================================ */

@media(min-width:1280px) and (orientation:landscape){

.home-layout{
grid-template-columns:minmax(0,2fr) minmax(330px,.68fr)
}

}


/* ============================================================
   PORTRAIT TABLETS / MOBILE
   Full mountain first. Information remains underneath.
   ============================================================ */

@media(max-width:899px),(orientation:portrait){

.page{
padding-top:12px
}

.mountain-heading{
padding-bottom:10px
}

.dashboard-panel{
padding-top:0
}

.dashboard-intro{
padding-top:20px
}

}


/* ============================================================
   SMALL MOBILE
   Keep maximum room available for the actual mountain.
   ============================================================ */

@media(max-width:640px){

.page{
padding-left:8px;
padding-right:8px
}

.mountain-card{
border-radius:15px
}

.mountain-heading{
padding:12px 12px 9px
}

.mountain-heading h2{
font-size:17px
}

.home-mountain-host{
height:clamp(
330px,
calc(var(--app-height) - var(--topbar-height) - 118px),
650px
);
padding:0 5px 7px
}

.dashboard-intro{
padding:18px 3px 7px
}

.dashboard-intro h1{
font-size:31px
}

}


/* ============================================================
   SHORT LANDSCAPE DEVICES
   Especially landscape tablets / phones.
   ============================================================ */

@media(min-width:900px) and (orientation:landscape) and (max-height:700px){

.home-layout{
gap:10px;
height:calc(
var(--app-height) -
var(--topbar-height) -
22px
)
}

.page{
padding-top:9px;
padding-bottom:9px
}

.mountain-heading{
padding-top:10px;
padding-bottom:7px
}

.dashboard-intro h1{
font-size:29px
}

.dashboard-intro p{
display:none
}

.dashboard-intro{
padding-bottom:8px
}

.dashboard-panel .stat-card{
padding:8px 10px
}

.dashboard-panel .stat-card strong{
font-size:17px
}

.dashboard-standings .section-head{
padding-top:10px
}

.dashboard-standings .standing{
padding:7px 9px
}

}


/* ============================================================
   SPLASH V4
   Mountain remains full-screen.
   Rankings and large logo overlay the mountain.
   ============================================================ */

.splash.splash-v4{
position:fixed;
inset:0;
z-index:100;
display:block;
width:100%;
height:var(--splash-height,100dvh);
max-height:var(--splash-height,100dvh);
padding:0;
overflow:hidden;
background:
radial-gradient(
circle at 50% 5%,
#29294b 0,
#151529 38%,
#0f0f1a 72%
)
}

.splash.splash-v4 .splash-brand{
position:absolute;
z-index:7;
top:clamp(12px,3vh,28px);
left:50%;
width:auto;
max-width:calc(100% - 24px);
margin:0;
padding:0;
transform:translateX(-50%);
white-space:nowrap
}

.splash.splash-v4 .splash-mountain{
position:absolute;
z-index:2;
inset:8px;
display:flex;
align-items:center;
justify-content:center;
width:auto;
height:auto;
min-width:0;
min-height:0;
margin:0;
padding:0;
overflow:hidden
}

.splash.splash-v4 .splash-mountain .mountain-stage{
flex:0 0 auto;
max-width:100%;
max-height:100%;
margin:auto;
transition:
filter .45s ease,
transform .45s ease
}

.splash.splash-v4.rankings-phase .splash-mountain .mountain-stage{
filter:brightness(.43) saturate(.78);
transform:scale(.99)
}

.splash.splash-v4.rankings-phase .splash-brand{
opacity:0;
transform:translate(-50%,-12px);
pointer-events:none
}

.splash.splash-v4 .splash-rankings{
position:absolute;
z-index:10;
left:50%;
top:50%;
width:min(720px,calc(100% - 28px));
height:auto;
min-height:0;
max-height:calc(100% - 24px);
margin:0;
padding:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
border-radius:20px;
background:rgba(7,7,14,.68);
box-shadow:0 24px 70px rgba(0,0,0,.48);
backdrop-filter:blur(12px);
opacity:0;
transform:translate(-50%,-46%) scale(.97);
transition:
opacity .35s ease,
transform .35s ease
}

.splash.splash-v4 .splash-rankings.visible{
opacity:1;
transform:translate(-50%,-50%) scale(1)
}

.splash.splash-v4 .splash-ranking-logo{
display:flex;
align-items:center;
justify-content:center;
height:auto;
margin-bottom:4px
}

.splash.splash-v4 .splash-ranking-logo img{
width:clamp(92px,13vw,150px);
height:clamp(92px,13vw,150px);
object-fit:contain
}

.splash.splash-v4 .splash-ranking-title{
margin:0;
text-align:center
}

.splash.splash-v4 .splash-ranking-title .eyebrow{
font-size:9px
}

.splash.splash-v4 .splash-ranking-title h2{
margin:3px 0;
font-size:clamp(20px,3vw,29px);
line-height:1
}

.splash.splash-v4 .splash-ranking-title p{
margin:0;
color:var(--muted);
font-size:10px
}

.splash.splash-v4 .splash-podium{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:13px
}

.splash.splash-v4 .splash-rank-card{
display:grid;
grid-template-columns:auto 42px minmax(0,1fr);
align-items:center;
gap:8px;
min-height:58px;
padding:9px;
border:1px solid rgba(255,255,255,.09);
border-radius:13px;
background:rgba(255,255,255,.04)
}

.splash.splash-v4 .splash-rank-card.rank-1{
border-color:rgba(240,192,64,.3);
background:rgba(240,192,64,.1)
}

.splash.splash-v4 .splash-rank-number{
font-size:19px
}

.splash.splash-v4 .splash-rank-avatar{
width:40px;
height:40px
}

.splash.splash-v4 .splash-rank-copy>span{
font-size:7px
}

.splash.splash-v4 .splash-rank-copy strong{
font-size:11px
}

.splash.splash-v4 .splash-rank-copy small{
font-size:8px
}


/* ============================================================
   SPLASH MOBILE / PORTRAIT TABLET
   Same overlay. Compact ranking rows.
   ============================================================ */

@media(max-width:700px),(orientation:portrait){

.splash.splash-v4 .splash-rankings{
width:min(430px,calc(100% - 20px));
padding:14px 12px
}

.splash.splash-v4 .splash-ranking-logo img{
width:clamp(92px,28vw,132px);
height:clamp(92px,28vw,132px)
}

.splash.splash-v4 .splash-ranking-title h2{
font-size:20px
}

.splash.splash-v4 .splash-podium{
grid-template-columns:1fr;
gap:5px;
margin-top:10px
}

.splash.splash-v4 .splash-rank-card{
grid-template-columns:27px 36px minmax(0,1fr);
min-height:46px;
padding:5px 8px
}

.splash.splash-v4 .splash-rank-number{
font-size:16px
}

.splash.splash-v4 .splash-rank-avatar{
width:34px;
height:34px
}

.splash.splash-v4 .splash-rank-copy{
display:grid;
grid-template-columns:25px minmax(0,1fr) auto;
align-items:center;
gap:5px
}

.splash.splash-v4 .splash-rank-copy>span,
.splash.splash-v4 .splash-rank-copy strong,
.splash.splash-v4 .splash-rank-copy small{
margin:0
}

.splash.splash-v4 .splash-rank-copy small{
white-space:nowrap
}

}


/* ============================================================
   VERY SHORT SCREENS
   Preserve complete splash without scrolling.
   ============================================================ */

@media(max-height:600px){

.splash.splash-v4 .splash-rankings{
width:min(680px,calc(100% - 18px));
padding:7px 10px
}

.splash.splash-v4 .splash-ranking-logo img{
width:58px;
height:58px
}

.splash.splash-v4 .splash-ranking-title h2{
font-size:16px
}

.splash.splash-v4 .splash-ranking-title p{
display:none
}

.splash.splash-v4 .splash-podium{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;
margin-top:6px
}

.splash.splash-v4 .splash-rank-card{
grid-template-columns:auto 28px minmax(0,1fr);
min-height:39px;
padding:4px 6px
}

.splash.splash-v4 .splash-rank-avatar{
width:27px;
height:27px
}

}

/* ============================================================
   V2 POLISH PASS
   Branding / 55:45 desktop / vertical rankings / Pack Leaders
   ============================================================ */

/* No traditional underlines needed for navigational profile links. */
a,
a:hover,
a:focus,
a:active{
text-decoration:none
}

/* ------------------------------------------------------------
   MAIN APP BRAND
   Image only, substantially larger.
   ------------------------------------------------------------ */

.topbar{
min-height:86px;
padding-top:6px;
padding-bottom:6px
}

.brand{
display:flex;
align-items:center;
flex:0 0 auto
}

.brand img{
display:block;
width:auto;
height:72px;
max-width:230px;
object-fit:contain
}


/* ------------------------------------------------------------
   ALL MAIN RANKINGS VERTICAL
   ------------------------------------------------------------ */

.top-three{
grid-template-columns:1fr
}

.standing{
text-decoration:none
}


/* ------------------------------------------------------------
   DESKTOP / LANDSCAPE TABLET
   Approx. 55% mountain / 45% information.
   ------------------------------------------------------------ */

@media(min-width:900px) and (orientation:landscape){

.home-layout{
grid-template-columns:minmax(0,55fr) minmax(0,45fr)
}

}

@media(min-width:1280px) and (orientation:landscape){

.home-layout{
grid-template-columns:minmax(0,55fr) minmax(0,45fr)
}

}


/* ------------------------------------------------------------
   PACK LEADERS
   ------------------------------------------------------------ */

.top-group-crown{
display:grid;
place-items:center;
width:52px;
height:52px;
overflow:hidden;
border-radius:12px;
background:rgba(240,192,64,.06)
}

.top-group-crown img{
width:48px;
height:48px;
object-fit:contain
}

.group-champion{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:10px;
text-align:left
}

.group-champion img{
width:58px;
height:58px;
flex:0 0 58px;
object-fit:contain
}

.group-champion div{
min-width:0
}

.group-champion strong,
.group-champion small{
display:block
}

.top-group-badge{
display:flex;
align-items:center;
gap:9px;
text-align:left
}

.top-group-badge img{
width:42px;
height:42px;
flex:0 0 42px;
object-fit:contain
}

.top-group-badge div{
min-width:0
}

.top-group-badge strong{
display:block;
color:var(--gold);
font-size:11px
}

.top-group-badge span{
display:block;
margin-top:2px;
color:var(--muted);
font-size:9px
}


/* ============================================================
   SPLASH — INITIAL CLIMB
   Logo image only.
   Give the logo its own space instead of sitting over the
   important part of the mountain.
   ============================================================ */

.splash.splash-v4 .splash-brand{
position:absolute;
z-index:7;
top:16px;
left:16px;
width:auto;
height:auto;
max-width:none;
max-height:none;
margin:0;
padding:0;
opacity:1;
transform:none;
transition:opacity .3s ease,transform .3s ease
}

.splash.splash-v4 .splash-brand img{
display:block;
width:auto;
height:clamp(82px,9vw,128px);
max-width:180px;
object-fit:contain
}

/*
Desktop/landscape:
reserve a left rail for the opening logo so it does not sit
over the mountain.
*/
@media(min-width:700px) and (orientation:landscape){

.splash.splash-v4:not(.rankings-phase) .splash-mountain{
inset:8px 8px 8px clamp(125px,13vw,185px)
}

}

/*
Portrait/mobile:
reserve a small top band instead.
*/
@media(max-width:699px),(orientation:portrait){

.splash.splash-v4:not(.rankings-phase) .splash-mountain{
inset:clamp(72px,12vh,100px) 6px 6px 6px
}

.splash.splash-v4 .splash-brand{
top:7px;
left:9px
}

.splash.splash-v4 .splash-brand img{
height:68px;
max-width:125px
}

}

/*
When rankings begin, the opening logo disappears and the
mountain is allowed to use the whole background again.
*/
.splash.splash-v4.rankings-phase .splash-brand{
opacity:0;
transform:translateY(-8px);
pointer-events:none
}

.splash.splash-v4.rankings-phase .splash-mountain{
inset:8px
}


/* ============================================================
   SPLASH RANKING OVERLAY
   Large logo + VERTICAL Top 3 on every device.
   ============================================================ */

.splash.splash-v4 .splash-rankings{
width:min(530px,calc(100% - 24px));
padding:18px 20px 20px;
background:rgba(7,7,14,.72)
}

.splash.splash-v4 .splash-ranking-logo{
height:auto;
margin-bottom:4px
}

.splash.splash-v4 .splash-ranking-logo img{
width:auto;
height:clamp(145px,19vw,210px);
max-width:80%;
object-fit:contain
}

.splash.splash-v4 .splash-ranking-title .eyebrow{
font-size:9px
}

.splash.splash-v4 .splash-ranking-title h2{
margin:2px 0 3px;
font-size:clamp(21px,3vw,28px)
}

.splash.splash-v4 .splash-ranking-title p{
font-size:10px
}

.splash.splash-v4 .splash-podium{
display:grid;
grid-template-columns:1fr;
gap:7px;
margin-top:12px
}

.splash.splash-v4 .splash-rank-card{
display:grid;
grid-template-columns:34px 48px minmax(0,1fr);
align-items:center;
gap:10px;
min-height:61px;
padding:7px 11px
}

.splash.splash-v4 .splash-rank-number{
font-size:21px
}

.splash.splash-v4 .splash-rank-avatar{
width:44px;
height:44px
}

.splash.splash-v4 .splash-rank-copy{
display:block
}

.splash.splash-v4 .splash-rank-copy>span{
display:block;
font-size:7px
}

.splash.splash-v4 .splash-rank-copy strong{
display:block;
margin-top:1px;
font-size:12px
}

.splash.splash-v4 .splash-rank-copy small{
display:block;
margin-top:2px;
font-size:9px
}


/* ------------------------------------------------------------
   MOBILE APP LOGO
   Still prominent without wasting mountain space.
   ------------------------------------------------------------ */

@media(max-width:640px){

.topbar{
min-height:72px;
padding-top:4px;
padding-bottom:4px
}

.brand img{
height:60px;
max-width:175px
}

.splash.splash-v4 .splash-rankings{
width:calc(100% - 18px);
padding:12px
}

.splash.splash-v4 .splash-ranking-logo img{
height:clamp(120px,31vw,155px);
max-width:78%
}

.splash.splash-v4 .splash-podium{
grid-template-columns:1fr;
gap:5px
}

.splash.splash-v4 .splash-rank-card{
grid-template-columns:28px 38px minmax(0,1fr);
min-height:49px;
padding:5px 8px
}

.splash.splash-v4 .splash-rank-avatar{
width:36px;
height:36px
}

.splash.splash-v4 .splash-rank-copy{
display:block
}

}


/* ------------------------------------------------------------
   SHORT LANDSCAPE SCREENS
   Keep the entire ranking overlay visible.
   ------------------------------------------------------------ */

@media(max-height:620px){

.splash.splash-v4 .splash-rankings{
width:min(480px,calc(100% - 18px));
padding:7px 10px 9px
}

.splash.splash-v4 .splash-ranking-logo img{
height:75px
}

.splash.splash-v4 .splash-ranking-title h2{
font-size:15px
}

.splash.splash-v4 .splash-ranking-title p{
display:none
}

.splash.splash-v4 .splash-podium{
grid-template-columns:1fr;
gap:3px;
margin-top:5px
}

.splash.splash-v4 .splash-rank-card{
grid-template-columns:24px 30px minmax(0,1fr);
min-height:37px;
padding:3px 6px
}

.splash.splash-v4 .splash-rank-avatar{
width:28px;
height:28px
}

.splash.splash-v4 .splash-rank-number{
font-size:15px
}

.splash.splash-v4 .splash-rank-copy strong{
font-size:9px
}

.splash.splash-v4 .splash-rank-copy small{
font-size:7px
}

}

/* ============================================================
   V2 POLISH PASS
   Branding / 55:45 desktop / vertical rankings / Pack Leaders
   ============================================================ */

/* No traditional underlines needed for navigational profile links. */
a,
a:hover,
a:focus,
a:active{
text-decoration:none
}

/* ------------------------------------------------------------
   MAIN APP BRAND
   Image only, substantially larger.
   ------------------------------------------------------------ */

.topbar{
min-height:86px;
padding-top:6px;
padding-bottom:6px
}

.brand{
display:flex;
align-items:center;
flex:0 0 auto
}

.brand img{
display:block;
width:auto;
height:72px;
max-width:230px;
object-fit:contain
}


/* ------------------------------------------------------------
   ALL MAIN RANKINGS VERTICAL
   ------------------------------------------------------------ */

.top-three{
grid-template-columns:1fr
}

.standing{
text-decoration:none
}


/* ------------------------------------------------------------
   DESKTOP / LANDSCAPE TABLET
   Approx. 55% mountain / 45% information.
   ------------------------------------------------------------ */

@media(min-width:900px) and (orientation:landscape){

.home-layout{
grid-template-columns:minmax(0,55fr) minmax(0,45fr)
}

}

@media(min-width:1280px) and (orientation:landscape){

.home-layout{
grid-template-columns:minmax(0,55fr) minmax(0,45fr)
}

}


/* ------------------------------------------------------------
   PACK LEADERS
   ------------------------------------------------------------ */

.top-group-crown{
display:grid;
place-items:center;
width:52px;
height:52px;
overflow:hidden;
border-radius:12px;
background:rgba(240,192,64,.06)
}

.top-group-crown img{
width:48px;
height:48px;
object-fit:contain
}

.group-champion{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:10px;
text-align:left
}

.group-champion img{
width:58px;
height:58px;
flex:0 0 58px;
object-fit:contain
}

.group-champion div{
min-width:0
}

.group-champion strong,
.group-champion small{
display:block
}

.top-group-badge{
display:flex;
align-items:center;
gap:9px;
text-align:left
}

.top-group-badge img{
width:42px;
height:42px;
flex:0 0 42px;
object-fit:contain
}

.top-group-badge div{
min-width:0
}

.top-group-badge strong{
display:block;
color:var(--gold);
font-size:11px
}

.top-group-badge span{
display:block;
margin-top:2px;
color:var(--muted);
font-size:9px
}


/* ============================================================
   SPLASH — INITIAL CLIMB
   Logo image only.
   Give the logo its own space instead of sitting over the
   important part of the mountain.
   ============================================================ */

.splash.splash-v4 .splash-brand{
position:absolute;
z-index:7;
top:16px;
left:16px;
width:auto;
height:auto;
max-width:none;
max-height:none;
margin:0;
padding:0;
opacity:1;
transform:none;
transition:opacity .3s ease,transform .3s ease
}

.splash.splash-v4 .splash-brand img{
display:block;
width:auto;
height:clamp(82px,9vw,128px);
max-width:180px;
object-fit:contain
}

/*
Desktop/landscape:
reserve a left rail for the opening logo so it does not sit
over the mountain.
*/
@media(min-width:700px) and (orientation:landscape){

.splash.splash-v4:not(.rankings-phase) .splash-mountain{
inset:8px 8px 8px clamp(125px,13vw,185px)
}

}

/*
Portrait/mobile:
reserve a small top band instead.
*/
@media(max-width:699px),(orientation:portrait){

.splash.splash-v4:not(.rankings-phase) .splash-mountain{
inset:clamp(72px,12vh,100px) 6px 6px 6px
}

.splash.splash-v4 .splash-brand{
top:7px;
left:9px
}

.splash.splash-v4 .splash-brand img{
height:68px;
max-width:125px
}

}

/*
When rankings begin, the opening logo disappears and the
mountain is allowed to use the whole background again.
*/
.splash.splash-v4.rankings-phase .splash-brand{
opacity:0;
transform:translateY(-8px);
pointer-events:none
}

.splash.splash-v4.rankings-phase .splash-mountain{
inset:8px
}


/* ============================================================
   SPLASH RANKING OVERLAY
   Large logo + VERTICAL Top 3 on every device.
   ============================================================ */

.splash.splash-v4 .splash-rankings{
width:min(530px,calc(100% - 24px));
padding:18px 20px 20px;
background:rgba(7,7,14,.72)
}

.splash.splash-v4 .splash-ranking-logo{
height:auto;
margin-bottom:4px
}

.splash.splash-v4 .splash-ranking-logo img{
width:auto;
height:clamp(145px,19vw,210px);
max-width:80%;
object-fit:contain
}

.splash.splash-v4 .splash-ranking-title .eyebrow{
font-size:9px
}

.splash.splash-v4 .splash-ranking-title h2{
margin:2px 0 3px;
font-size:clamp(21px,3vw,28px)
}

.splash.splash-v4 .splash-ranking-title p{
font-size:10px
}

.splash.splash-v4 .splash-podium{
display:grid;
grid-template-columns:1fr;
gap:7px;
margin-top:12px
}

.splash.splash-v4 .splash-rank-card{
display:grid;
grid-template-columns:34px 48px minmax(0,1fr);
align-items:center;
gap:10px;
min-height:61px;
padding:7px 11px
}

.splash.splash-v4 .splash-rank-number{
font-size:21px
}

.splash.splash-v4 .splash-rank-avatar{
width:44px;
height:44px
}

.splash.splash-v4 .splash-rank-copy{
display:block
}

.splash.splash-v4 .splash-rank-copy>span{
display:block;
font-size:7px
}

.splash.splash-v4 .splash-rank-copy strong{
display:block;
margin-top:1px;
font-size:12px
}

.splash.splash-v4 .splash-rank-copy small{
display:block;
margin-top:2px;
font-size:9px
}


/* ------------------------------------------------------------
   MOBILE APP LOGO
   Still prominent without wasting mountain space.
   ------------------------------------------------------------ */

@media(max-width:640px){

.topbar{
min-height:72px;
padding-top:4px;
padding-bottom:4px
}

.brand img{
height:60px;
max-width:175px
}

.splash.splash-v4 .splash-rankings{
width:calc(100% - 18px);
padding:12px
}

.splash.splash-v4 .splash-ranking-logo img{
height:clamp(120px,31vw,155px);
max-width:78%
}

.splash.splash-v4 .splash-podium{
grid-template-columns:1fr;
gap:5px
}

.splash.splash-v4 .splash-rank-card{
grid-template-columns:28px 38px minmax(0,1fr);
min-height:49px;
padding:5px 8px
}

.splash.splash-v4 .splash-rank-avatar{
width:36px;
height:36px
}

.splash.splash-v4 .splash-rank-copy{
display:block
}

}


/* ------------------------------------------------------------
   SHORT LANDSCAPE SCREENS
   Keep the entire ranking overlay visible.
   ------------------------------------------------------------ */

@media(max-height:620px){

.splash.splash-v4 .splash-rankings{
width:min(480px,calc(100% - 18px));
padding:7px 10px 9px
}

.splash.splash-v4 .splash-ranking-logo img{
height:75px
}

.splash.splash-v4 .splash-ranking-title h2{
font-size:15px
}

.splash.splash-v4 .splash-ranking-title p{
display:none
}

.splash.splash-v4 .splash-podium{
grid-template-columns:1fr;
gap:3px;
margin-top:5px
}

.splash.splash-v4 .splash-rank-card{
grid-template-columns:24px 30px minmax(0,1fr);
min-height:37px;
padding:3px 6px
}

.splash.splash-v4 .splash-rank-avatar{
width:28px;
height:28px
}

.splash.splash-v4 .splash-rank-number{
font-size:15px
}

.splash.splash-v4 .splash-rank-copy strong{
font-size:9px
}

.splash.splash-v4 .splash-rank-copy small{
font-size:7px
}

}

/* ============================================================
   SPLASH V5 — CENTRED BRAND + CENTRED MOUNTAIN
   These highly-specific rules intentionally override all
   previous splash iterations while we continue prototyping.
   ============================================================ */

.splash.splash-v4{
--splash-logo-size:clamp(145px,20vh,220px);
}

/* Opening logo: large, central and above the mountain. */
.splash.splash-v4:not(.rankings-phase) .splash-brand{
position:absolute;
z-index:8;
top:clamp(8px,2vh,18px);
left:50%;
display:flex;
align-items:center;
justify-content:center;
width:auto;
height:var(--splash-logo-size);
max-width:90%;
max-height:none;
margin:0;
padding:0;
opacity:1;
transform:translateX(-50%);
}

.splash.splash-v4:not(.rankings-phase) .splash-brand img{
display:block;
width:auto;
height:100%;
max-width:min(440px,88vw);
object-fit:contain;
}

/*
The mountain gets its own centred space beneath the logo.
fitSplashMountain() still handles the exact aspect ratio.
*/
.splash.splash-v4:not(.rankings-phase) .splash-mountain{
position:absolute;
z-index:2;
top:calc(var(--splash-logo-size) + clamp(8px,2vh,18px));
right:clamp(8px,2vw,24px);
bottom:clamp(8px,2vh,20px);
left:clamp(8px,2vw,24px);
display:flex;
align-items:center;
justify-content:center;
width:auto;
height:auto;
margin:0;
padding:0;
overflow:hidden;
}

/* Slight reduction gives the mountain breathing room. */
.splash.splash-v4:not(.rankings-phase) .splash-mountain .mountain-stage{
margin:auto;
transform:scale(.91);
transform-origin:center center;
}

/* Ranking phase uses the full centred mountain as backdrop. */
.splash.splash-v4.rankings-phase .splash-mountain{
position:absolute;
inset:8px;
display:flex;
align-items:center;
justify-content:center;
}

/* Same logo scale in the ranking overlay as the opening scene. */
.splash.splash-v4 .splash-ranking-logo img{
width:auto;
height:var(--splash-logo-size);
max-width:min(440px,84vw);
object-fit:contain;
}

/* Larger logo means ranking panel should breathe rather than crowd. */
.splash.splash-v4 .splash-rankings{
width:min(550px,calc(100% - 20px));
max-height:calc(var(--splash-height,100dvh) - 18px);
padding:clamp(10px,2vh,18px);
overflow:hidden;
}

/* Phones: keep the exact same composition, just scale together. */
@media(max-width:640px){

.splash.splash-v4{
--splash-logo-size:clamp(115px,18vh,155px);
}

.splash.splash-v4:not(.rankings-phase) .splash-mountain .mountain-stage{
transform:scale(.93);
}

}

/* Short landscape screens need a slightly smaller shared logo. */
@media(max-height:600px){

.splash.splash-v4{
--splash-logo-size:clamp(70px,18vh,105px);
}

.splash.splash-v4:not(.rankings-phase) .splash-mountain{
top:calc(var(--splash-logo-size) + 4px);
bottom:5px;
}

.splash.splash-v4:not(.rankings-phase) .splash-mountain .mountain-stage{
transform:scale(.94);
}

}


/* ============================================================
   BADGE INTERACTION
   ============================================================ */

.profile-badge,
.group-champion.badge-trigger,
.top-group-badge.badge-trigger{
font:inherit;
color:inherit;
cursor:pointer;
}

.profile-badge{
appearance:none;
text-align:left;
}

.profile-badge:hover,
.profile-badge:focus-visible,
.group-champion.badge-trigger:hover,
.group-champion.badge-trigger:focus-visible,
.top-group-badge.badge-trigger:hover,
.top-group-badge.badge-trigger:focus-visible{
border-color:rgba(240,192,64,.36);
background:rgba(240,192,64,.07);
outline:none;
}

.badge-popup-open{
overflow:hidden;
}

.badge-popup-overlay{
position:fixed;
inset:0;
z-index:300;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
background:rgba(5,5,12,.76);
backdrop-filter:blur(8px);
opacity:0;
transition:opacity .18s ease;
}

.badge-popup-overlay[hidden]{
display:none;
}

.badge-popup-overlay.visible{
opacity:1;
}

.badge-popup{
position:relative;
width:min(390px,100%);
max-height:calc(100dvh - 32px);
overflow:auto;
padding:22px 20px 20px;
border:1px solid rgba(255,255,255,.12);
border-radius:19px;
background:linear-gradient(180deg,#202033,#141422);
box-shadow:0 28px 80px rgba(0,0,0,.55);
text-align:center;
transform:translateY(8px) scale(.975);
transition:transform .18s ease;
}

.badge-popup-overlay.visible .badge-popup{
transform:none;
}

.badge-popup-close{
position:absolute;
top:10px;
right:10px;
display:grid;
place-items:center;
width:38px;
height:38px;
padding:0;
border:1px solid var(--border);
border-radius:11px;
background:rgba(255,255,255,.05);
color:var(--muted);
font-size:25px;
line-height:1;
cursor:pointer;
}

.badge-popup-image{
display:block;
width:min(190px,55vw);
height:min(190px,55vw);
margin:0 auto 12px;
object-fit:contain;
}

.badge-popup-type{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:24px;
padding:4px 8px;
border-radius:999px;
font-size:8px;
font-weight:900;
letter-spacing:.13em;
}

.badge-popup-type.permanent{
border:1px solid rgba(78,203,113,.22);
background:rgba(78,203,113,.08);
color:var(--green);
}

.badge-popup-type.dynamic{
border:1px solid rgba(240,192,64,.25);
background:rgba(240,192,64,.09);
color:var(--gold);
}

.badge-popup h2{
margin:8px 0 7px;
font-size:25px;
letter-spacing:-.03em;
}

.badge-popup-description{
margin:0 auto;
max-width:330px;
color:var(--muted);
font-size:13px;
line-height:1.5;
}

.badge-popup-requirement{
margin-top:15px;
padding:11px 12px;
border:1px solid var(--border);
border-radius:12px;
background:rgba(255,255,255,.025);
text-align:left;
}

.badge-popup-requirement span{
display:block;
color:var(--gold);
font-size:8px;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
}

.badge-popup-requirement strong{
display:block;
margin-top:4px;
font-size:12px;
line-height:1.4;
}

@media(max-width:640px){

.badge-popup{
padding:18px 15px 16px;
}

.badge-popup-image{
width:min(165px,48vw);
height:min(165px,48vw);
}

.badge-popup h2{
font-size:22px;
}

}

/* ============================================================
   SPLASH LOGO TRANSITION FIX
   Prevent opening logo jumping back to legacy left position
   when rankings phase begins.
   ============================================================ */

.splash.splash-v4.rankings-phase .splash-brand{
left:50%!important;
top:clamp(8px,2vh,18px)!important;
transform:translateX(-50%)!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transition:none!important;
}