/* Ranked: tier emblems, Home's Normal/Ranked switch, the Play screen's ranked card, the leaderboard page
   (screens/ranked.mjs). The after-game LP panel is in results.css. Shares tokens with style.css / arena.css. */
/* An emblem is its painted shield (a square tile) with the level ribbon laid over the same square. */
.rank-emblem{position:relative;display:block;aspect-ratio:1;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.65))}
.rank-emblem>img,.rank-emblem>.rk-pips{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.rank-emblem>.rk-pips{overflow:visible}
.rank-emblem.is-muted{filter:grayscale(1) brightness(.7) drop-shadow(0 4px 8px rgba(0,0,0,.65))}

/* ---------- top bar: the rank badge is just the emblem; hovering it names the rank ---------- */
.pill--rank{position:relative;min-width:0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;color:var(--ink)}
.pill-emblem{width:clamp(66px,5.4vw,86px);height:auto;margin:-20px -6px -16px;transition:scale .15s,filter .15s}
.pill--rank:hover .pill-emblem,.pill--rank:focus-visible .pill-emblem{scale:1.08;filter:brightness(1.15) drop-shadow(0 4px 8px rgba(0,0,0,.65))}
.pill--rank:hover .pill-emblem.is-muted,.pill--rank:focus-visible .pill-emblem.is-muted{filter:grayscale(1) brightness(.85) drop-shadow(0 4px 8px rgba(0,0,0,.65))}
.rank-tip{position:absolute;left:50%;top:calc(100% + 20px);z-index:30;display:flex;flex-direction:column;gap:7px;width:max-content;min-width:210px;padding:12px 14px 11px;
  border-radius:8px;border:2px solid transparent;background:linear-gradient(180deg,#1a140c,#08090a) padding-box,var(--frame) border-box;box-shadow:0 14px 30px rgba(0,0,0,.65);
  text-align:left;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;translate:-50% -4px;transition:opacity .15s,translate .15s,visibility 0s .15s}
.rank-tip::before{content:"";position:absolute;left:50%;top:-8px;width:12px;height:12px;translate:-50% 0;rotate:45deg;background:#1a140c;border:solid var(--gold2);border-width:2px 0 0 2px}
.pill--rank:hover .rank-tip,.pill--rank:focus-visible .rank-tip{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
.rank-tip-head,.rank-tip-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rank-tip-head b{font:700 21px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fbe7b0;white-space:nowrap}
.rank-tip-lp{font:600 12px/1 var(--cond);letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.rank-tip-note{font:500 12px/1.35 "Segoe UI",system-ui;color:var(--muted)}
.rank-tip .rk-record{gap:10px;font-size:11px;white-space:nowrap}
.rank-tip .rk-record b{font-size:14px}
.rank-tip-foot em{margin-left:auto;padding-left:6px;font:600 10px/1 var(--cond);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.top-ico .trophy{width:100%;height:100%}

/* ---------- home: Normal / Ranked switch on top of Play online ---------- */
.hub-play{display:flex;flex-direction:column;gap:10px;width:min(460px,33vw)}
.queue-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;gap:4px;border-radius:8px;border:2px solid transparent;
  background:linear-gradient(rgba(8,10,12,.82),rgba(8,10,12,.82)) padding-box,var(--frame) border-box;box-shadow:0 8px 20px rgba(0,0,0,.55)}
.queue-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:5px;background:none;cursor:pointer;
  font:700 15px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:background .2s,color .2s}
.queue-switch button:hover{color:var(--ink)}
.queue-switch button.is-on{color:#fff;background:linear-gradient(180deg,#2d6aa6,#123a66);box-shadow:inset 0 0 0 1px rgba(251,231,176,.35)}
.queue-switch button[data-queue="ranked"].is-on{background:linear-gradient(180deg,#7a4a12,#3a2006);box-shadow:inset 0 0 0 1px rgba(251,231,176,.55),0 0 18px rgba(255,190,90,.3)}
.qs-emblem{width:30px;height:30px;margin:-8px 0}
.fbtn--ranked{background:linear-gradient(180deg,#8a5a1c,#3b2107) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.7),0 0 34px rgba(255,190,90,.4),0 12px 30px rgba(0,0,0,.6)}
.fbtn--ranked small{color:#fbe7b0}

/* ---------- play: ranked mode + card ---------- */
.play-mode--ranked{position:relative;padding-right:74px}
.play-mode-emblem{position:absolute;right:10px;top:50%;width:58px;height:58px;translate:0 -50%}
.play-mode--ranked.is-on{background:linear-gradient(180deg,#8a5a1c,#3b2107) padding-box,var(--frame) border-box;box-shadow:0 0 26px rgba(255,190,90,.3)}
.play-mode--ranked.is-on small{color:#fbe7b0}
.rk-slot{margin-top:6px}
.rk-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:8px;border:2px solid transparent;
  background:linear-gradient(180deg,rgba(26,20,12,.92),rgba(8,9,10,.92)) padding-box,var(--frame) border-box;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.rk-card-top{display:flex;align-items:center;gap:12px}
.rk-card-emblem{width:78px;height:78px;flex:none;margin:-6px -4px}
.rk-card-top b{display:block;font:700 22px/1.05 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fbe7b0}
.rk-card-top small{display:block;margin-top:5px;font:500 13px/1.3 "Segoe UI",system-ui;color:var(--muted)}
.rk-bar{position:relative;height:10px;border-radius:5px;background:#050607;box-shadow:inset 0 0 0 1px rgba(215,166,83,.4);overflow:hidden}
.rk-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#b8862e,#fbe7b0);box-shadow:0 0 10px rgba(255,210,120,.6);transition:width 1.4s cubic-bezier(.2,.8,.2,1) .35s}
.rk-bar.is-apex i{background:linear-gradient(90deg,#8d33c9,#ff7ad9,#fbe7b0)}
.rk-record{display:flex;gap:14px;margin:0;font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rk-record b{color:var(--ink);font-size:16px}
.rk-note{margin:0;font-size:12px;color:#ffb3a0}
.rk-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rk-form{display:flex;gap:3px;margin-right:4px}
.rk-form i{width:8px;height:8px;border-radius:50%;background:#4a1d1d;box-shadow:inset 0 0 0 1px #b8544c}
.rk-form i.is-w{background:#2fb86a;box-shadow:inset 0 0 0 1px #9ff5c2}
.rk-chip{padding:3px 9px;border-radius:999px;font:600 11px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(251,231,176,.22);color:#d8cfbb}
.rk-chip--streak{color:#ffc27a;border-color:rgba(255,150,70,.55);background:rgba(255,120,40,.13)}
.rk-chip--guard{color:#a8dbff;border-color:rgba(120,190,255,.5);background:rgba(60,140,230,.13)}
.lb-you-card .rk-status{justify-content:center}
.lb-peak{font:600 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rk-board-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;width:100%;padding:10px 14px}
.rk-board-btn .trophy{width:22px;height:22px}

/* ---------- search ---------- */
.search-rank{display:flex;align-items:center;gap:10px;font:700 15px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#fbe7b0}
.search-emblem{width:44px;height:44px}

/* ---------- leaderboard ---------- */
.ladder-page{position:relative;height:100vh;min-height:620px;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(150px,19vh,200px) clamp(24px,3.4vw,64px) clamp(16px,2.4vh,28px);
  background:radial-gradient(80% 70% at 70% 0%,#2b2212,transparent 65%),radial-gradient(90% 90% at 10% 40%,#16222a,#0b0f12 70%)}
.ladder{flex:1;min-height:0;display:grid;grid-template-columns:clamp(240px,19vw,320px) minmax(0,1fr);gap:clamp(20px,2.6vw,48px)}
.lb-you-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 20px;border-radius:10px;border:2px solid transparent;text-align:center;
  background:linear-gradient(180deg,rgba(26,20,12,.92),rgba(8,9,10,.92)) padding-box,var(--frame) border-box;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.lb-you-emblem{width:min(170px,70%);height:auto;aspect-ratio:1;margin:-8px 0 -2px}
.lb-you-card>b{font:700 28px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fbe7b0}
.lb-you-card>small{font:500 13px/1.4 "Segoe UI",system-ui;color:var(--muted)}
.lb-you-card .rk-bar{width:100%}
.lb-play{width:100%;min-height:54px;margin-top:6px;justify-content:center}
.lb-play span{font-size:22px}
.lb-main{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}
.lb-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.lb-head h1{margin:0;font:700 clamp(30px,2.6vw,44px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 3px 10px #000}
.lb-head span{font:600 13px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.lb-note{color:var(--muted)}
.lb-podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:clamp(10px,1.4vw,24px);max-width:760px;width:100%;margin:10px auto 18px}
.lb-pod{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.lb-pod-emblem{width:clamp(80px,7vw,120px);height:auto;aspect-ratio:1}
.lb-pod--1 .lb-pod-emblem{width:clamp(104px,9vw,156px)}
.lb-pod b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 clamp(17px,1.4vw,22px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.lb-pod small{font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lb-pod-base{display:grid;place-items:center;width:100%;margin-top:6px;border-radius:6px 6px 0 0;font:700 30px/1 var(--cond);color:#1a1004;
  background:linear-gradient(180deg,#fff3c4,#d7a653 55%,#7a5018);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 10px 24px rgba(0,0,0,.5)}
.lb-pod--1 .lb-pod-base{height:84px}
.lb-pod--2 .lb-pod-base{height:58px;background:linear-gradient(180deg,#fff,#b5c2cf 55%,#56616e)}
.lb-pod--3 .lb-pod-base{height:42px;background:linear-gradient(180deg,#ffd2a1,#b8733a 55%,#5a2f10)}
.lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb-list--me{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(215,166,83,.35)}
.lb-row{display:grid;grid-template-columns:44px 44px minmax(0,1fr) minmax(110px,auto) 80px 70px;align-items:center;gap:12px;padding:6px 16px 6px 10px;border-radius:6px;
  background:rgba(10,12,14,.8);box-shadow:inset 0 0 0 1px rgba(215,166,83,.18)}
.lb-row.is-me{background:linear-gradient(90deg,rgba(63,120,190,.45),rgba(10,12,14,.85));box-shadow:inset 0 0 0 1px rgba(251,231,176,.55)}
.lb-place{font:700 20px/1 var(--cond);color:var(--gold1);text-align:center}
.lb-emblem{width:44px;height:44px}
.lb-name{display:flex;align-items:center;gap:8px;min-width:0}
.lb-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 18px/1 var(--cond);letter-spacing:.05em}
.lb-tier{font:600 14px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#fbe7b0}
.lb-lp,.lb-wl{font:600 15px/1 var(--cond);letter-spacing:.06em;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.lb-tiers{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,1.6vw,34px);margin-top:14px;padding-top:12px;border-top:1px solid rgba(215,166,83,.25)}
.lb-tier-step{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.72;transition:opacity .2s}
.lb-tier-step:hover,.lb-tier-step.is-on{opacity:1}
.lb-tier-emblem{width:clamp(44px,4.2vw,72px);height:auto;aspect-ratio:1}
.lb-tier-step small{font:600 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lb-tier-step.is-on small{color:#fbe7b0}

@media (max-width:1100px){
  .hub-play{width:auto}
}
@media (max-width:900px){
  .ladder-page{height:auto;overflow:visible}
  .ladder{grid-template-columns:1fr}
  .lb-main{overflow:visible}
  .lb-row{grid-template-columns:34px 38px minmax(0,1fr) 64px;gap:8px}
  .lb-tier,.lb-wl{display:none}
}
@media (max-width:700px){
  .ladder-page{padding:130px 16px 96px}
  .lb-tiers{flex-wrap:wrap}
  .play-mode--ranked{padding-right:12px}.play-mode-emblem{display:none}
}