/* ==========================================================================
   THE FINALS Tracker — page layouts
   One section per page, in the order of the navigation.
   ========================================================================== */
@layer components {

/* ============================================================== HOME ==== */
.hero { position: relative; padding: 56px 0 26px; isolation: isolate; }
.page-home > main::before { display: none; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 30% 0%, rgb(var(--acc-rgb) / .28), transparent 70%),
    radial-gradient(35% 45% at 85% 10%, color-mix(in srgb, var(--hi) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #12070c 0%, var(--bg) 85%);
}
.beam {
  position: absolute; top: -40%; width: 70vmax; height: 140vmax; left: var(--x); transform-origin: 50% 0;
  background: conic-gradient(from 180deg at 50% 0, transparent 0 172deg, var(--c) 177deg 183deg, transparent 188deg 360deg);
  opacity: .5; filter: blur(16px); mix-blend-mode: screen;
  animation: beam var(--d, 14s) ease-in-out infinite alternate;
}
.beam:nth-child(1) { --x: -18%; --c: rgb(var(--acc-rgb) / .55); --r0: -26deg; --r1: -8deg; }
.beam:nth-child(2) { --x: 30%; --c: #ffffff30; --r0: 10deg; --r1: -12deg; --d: 18s; }
.beam:nth-child(3) { --x: 62%; --c: color-mix(in srgb, var(--hi) 40%, transparent); --r0: 24deg; --r1: 6deg; --d: 16s; }
@keyframes beam { from { transform: translateX(-50%) rotate(var(--r0)); } to { transform: translateX(-50%) rotate(var(--r1)); } }
.floor {
  position: absolute; left: -25%; right: -25%; bottom: -10%; height: 62%;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 75%); mask-image: linear-gradient(0deg, #000 10%, transparent 75%);
  animation: floor 3.2s linear infinite;
}
@keyframes floor { to { background-position: 0 64px; } }
.hero-bg::after { content: ''; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(180deg, transparent, var(--bg)); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 40px; align-items: center; }
.hero-title { font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.015em; transform: skewX(-8deg); transform-origin: left bottom; margin: 4px 0 20px; }
.hero-title span { display: block; font-family: var(--f-display); font-stretch: 125%; }
.hero-title .t1 { font-size: clamp(54px, 8.6vw, 128px); background: linear-gradient(180deg, #fff 30%, #ffd1db); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgb(var(--acc-rgb) / .35)); }
.hero-title .t2 { font-size: clamp(26px, 3.9vw, 58px); color: var(--acc); margin-top: 8px; letter-spacing: .01em; }
.hero-title .t2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--ink-2); }
.hero-sub { color: var(--ink-2); font-size: 16px; max-width: 560px; }

.hero-search { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 26px; max-width: 640px; height: 64px; padding: 8px 8px 8px 20px; border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--line-3), 0 24px 60px -24px #000, 0 0 0 0 rgb(var(--acc-rgb) / 0); transition: box-shadow var(--t); }
.hero-search:focus-within { box-shadow: 0 0 0 1px rgb(var(--acc-rgb) / .7), 0 24px 60px -24px #000, 0 0 0 6px rgb(var(--acc-rgb) / .14); }
.hero-search > .i { font-size: 22px; color: var(--acc); }
.hero-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 17px; color: var(--ink); }
.hero-search input::placeholder { color: var(--ink-4); }
.hero-search .btn { height: 48px; padding: 0 22px; }
.hero-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 30px; }
.hero-quick .qlabel { font: 700 10.5px/30px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-right: 4px; }
.qchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 560; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.qchip:hover { background: var(--s3); color: var(--ink); transform: translateY(-1px); }
.qchip .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--s4); font: 800 11px/1 var(--f-display); }
.qchip .i { font-size: 13px; color: var(--hi); }

/* the #1 card */
.champ { position: relative; padding: 22px; border-radius: var(--r-xl); background: linear-gradient(165deg, color-mix(in srgb, var(--tier, var(--acc)) 22%, var(--s1)), var(--s1) 60%); box-shadow: var(--edge), 0 0 0 1px color-mix(in srgb, var(--tier, var(--acc)) 35%, transparent), 0 40px 80px -30px #000; overflow: hidden; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.champ::after { content: '#1'; position: absolute; right: -6px; top: -26px; font: 900 170px/1 var(--f-display); font-stretch: 70%; color: transparent; -webkit-text-stroke: 1px #ffffff12; pointer-events: none; }
.champ-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.champ-k .eyebrow { margin: 0; }
.champ-top { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.champ-name { font: 850 26px/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.champ-name:hover { color: var(--acc-hi); }
.champ-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.champ-score { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.champ-score .v { font: 900 52px/.9 var(--f-display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.champ-score .v small { font: 700 13px/1 var(--f-mono); color: var(--ink-3); margin-left: 6px; }
.champ-score .gap { text-align: right; font-size: 12px; color: var(--ink-3); }
.champ-score .gap b { display: block; font: 800 18px/1.1 var(--f-display); font-stretch: 72%; color: var(--ink); }

.clock { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--edge), 0 0 0 1px var(--line); }
.clock-l { font: 700 10.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.clock-l b { display: block; color: var(--ink); font-size: 12px; margin-top: 3px; }
.clock-v { display: flex; gap: 6px; }
.clock-v span { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 6px 4px 5px; border-radius: 8px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.clock-v b { font: 850 22px/1 var(--f-display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.clock-v small { font: 600 9px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-4); margin-top: 4px; text-transform: uppercase; }

.statband { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-radius: var(--r-lg); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; }
.statband > div { padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.statband > div + div { border-left: 1px solid var(--line); }
.statband .i { font-size: 26px; color: var(--acc); flex: none; }
.statband small { display: block; font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.statband b { display: block; font: 850 26px/1.1 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; margin-top: 3px; }
/* Players online on Steam: live dot, the whole tile opens /player-count, the i says so. */
.statband .sb-online { position: relative; cursor: pointer; transition: background var(--t-fast); }
.statband .sb-online:hover { background: #ffffff08; }
.sb-live { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); animation: pulse-dot 2s ease-in-out infinite; }
.statband .sb-info { position: absolute; top: 8px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-3); transition: color var(--t-fast), background var(--t-fast); }
.statband .sb-info .i { font-size: 17px; color: currentColor; }
.statband .sb-online:hover .sb-info, .statband .sb-info:focus-visible { color: var(--ink); background: var(--s3); }
@media (prefers-reduced-motion: reduce) { .sb-live { animation: none; } }

/* podium + top 10 */
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 10px; align-items: end; padding: 18px 16px 6px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px 14px; border-radius: var(--r-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--m) 16%, var(--s2)), var(--s1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 30%, transparent); transition: transform var(--t) var(--ease), box-shadow var(--t); }
.pod:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 60%, transparent), 0 20px 40px -20px color-mix(in srgb, var(--m) 60%, transparent); }
.pod.p1 { --m: var(--hi); padding-top: 26px; }
.pod.p2 { --m: var(--silver); }
.pod.p3 { --m: var(--bronze); }
.pod-n { position: absolute; top: -12px; left: 50%; translate: -50% 0; height: 24px; min-width: 34px; padding: 0 8px; display: grid; place-items: center; font: 900 14px/1 var(--f-display); font-stretch: 72%; color: #111; background: var(--m); clip-path: var(--lean); }
.pod-name { font-weight: 650; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-score { font: 850 22px/1 var(--f-display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.pod-score small { font: 600 10px/1 var(--f-mono); color: var(--ink-3); margin-left: 3px; }
.pod .club { margin-top: 2px; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.home-side { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .hero { padding-top: 30px; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .statband > div:nth-child(3) { border-left: 0; }
  .statband > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-search { height: 56px; }
  .hero-search .btn span { display: none; }
  .hero-search .btn { width: 44px; padding: 0; height: 42px; }
  .podium { gap: 6px; padding-inline: 10px; }
  .pod-score { font-size: 18px; }
}

/* ranked ladder */
.ladder { display: flex; flex-direction: column; padding: 6px 0; }
.ladder-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px 52px; align-items: center; gap: 10px; padding: 5px 16px; transition: background var(--t-fast); }
.ladder-row:hover { background: var(--s2); }
.ladder-row img { width: 28px; height: 28px; }
.ladder-name { font-weight: 600; font-size: 13px; white-space: nowrap; }
.ladder-name small { display: block; font: 500 11px/1.2 var(--f-mono); color: var(--ink-4); }
.ladder-bar { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; }
.ladder-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tier); box-shadow: 0 0 10px var(--tier); transform-origin: left; animation: none; animation-delay: calc(var(--i) * 40ms); }
.ladder-val { text-align: right; font: 750 14px/1 var(--f-display); font-stretch: 72%; }
.ladder-val small { display: block; font: 500 10.5px/1.3 var(--f-mono); color: var(--ink-4); }
.ladder-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.ladder-foot b { color: var(--ink); }

/* clubs strip */
.club-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; }
@media (max-width: 860px) { .club-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.club-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: background var(--t-fast), transform var(--t) var(--ease); }
.club-card:hover { background: var(--s3); transform: translateY(-2px); }
.club-card-top { display: flex; align-items: center; justify-content: space-between; }
.club-card .club { height: 24px; font-size: 13px; padding: 0 8px; }
.club-card b { font: 850 26px/1 var(--f-display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.club-card small { display: block; font: 600 10px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: 3px; }
.club-card .meta { font-size: 12px; color: var(--ink-3); }

/* overlay promo */
.promo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding: 30px; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(80% 120% at 0% 0%, rgb(var(--acc-rgb) / .25), transparent 60%), var(--s1); box-shadow: var(--edge), 0 0 0 1px var(--line-2); }
.promo h2 { font: 900 clamp(28px, 3.4vw, 44px)/.92 var(--f-display); font-stretch: 122%; text-transform: uppercase; transform: skewX(-6deg); }
.promo p { color: var(--ink-2); margin: 14px 0 20px; max-width: 460px; }
.promo-shot { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px var(--line-2); transform: perspective(1200px) rotateY(-10deg) rotateX(3deg); transition: transform .6s var(--ease-out); }
.promo:hover .promo-shot { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.promo-shot img { width: 100%; }
@media (max-width: 860px) { .promo { grid-template-columns: 1fr; padding: 22px; } .promo-shot { transform: none; } }

/* explore tiles */
.explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 18px; border-radius: var(--r-lg); overflow: hidden; background: var(--s1); box-shadow: var(--edge), 0 0 0 1px var(--line); isolation: isolate; transition: box-shadow var(--t), transform var(--t) var(--ease); }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--art, none) center / cover; opacity: .28; transition: opacity var(--t), transform .8s var(--ease-out); -webkit-mask-image: linear-gradient(0deg, transparent, #000 90%); mask-image: linear-gradient(0deg, transparent, #000 90%); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--edge), 0 0 0 1px rgb(var(--acc-rgb) / .45), 0 24px 50px -24px rgb(var(--acc-rgb) / .6); }
.tile:hover::after { opacity: .45; transform: scale(1.05); }
.tile > .i:not(.go) { position: absolute; top: 16px; left: 18px; font-size: 26px; color: var(--acc); }
.tile b { font: 850 19px/1.05 var(--f-display); font-stretch: 116%; text-transform: uppercase; }
.tile small { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
.tile .go { position: absolute; top: 16px; right: 16px; left: auto; font-size: 18px; color: var(--ink-3); transition: transform var(--t), color var(--t); }
.tile:hover .go { transform: translate(3px, -3px); color: var(--ink); }

}
@layer components {
  .rows-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows-2 > .rw:nth-child(odd) { border-right: 1px solid var(--line); }
  .rows-2 > .rw:nth-last-child(-n+2) { border-bottom: 0; }
  @media (max-width: 640px) { .rows-2 { grid-template-columns: minmax(0, 1fr); } .rows-2 > .rw:nth-child(odd) { border-right: 0; } .rows-2 > .rw:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
}
@layer components {
  @media (max-width: 560px) { .tile { min-height: 120px; padding: 14px; } .tile b { font-size: 15px; font-stretch: 100%; } .tile > .i:not(.go) { left: 14px; top: 14px; } .tile .go { right: 12px; top: 14px; } }
}

/* ======================================================= LEADERBOARD ==== */
@layer components {
  .phead { overflow: hidden; isolation: isolate; }
  .phead-art { position: absolute; inset: 0; z-index: -1; background: var(--art) center 40% / cover; opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 95%), linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 0%, transparent 95%); filter: saturate(.8); }
  .phead-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 10%, transparent 60%, var(--bg)); }
  .lb-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
  .lb-f { display: flex; flex-direction: column; min-width: 160px; }
  .lb-f .sel { width: 100%; }
  .lb-top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; margin: 16px 0; align-items: stretch; }
  .lb-top .ladder-row { padding-block: 6px; }
  .lb-legend { padding: 6px 0; max-height: 330px; overflow-y: auto; }
  @media (max-width: 1100px) { .lb-top { grid-template-columns: minmax(0, 1fr); } }
  .lb-tools { flex-wrap: wrap; }
  .lb-search { width: min(380px, 100%); }
  .lb-search input { height: 36px; }
  .lb-tbl tr.is-p1 { background: linear-gradient(90deg, color-mix(in srgb, var(--hi) 9%, transparent), transparent 50%); }
  .lb-tbl tr.is-p2 { background: linear-gradient(90deg, color-mix(in srgb, var(--silver) 7%, transparent), transparent 50%); }
  .lb-tbl tr.is-p3 { background: linear-gradient(90deg, color-mix(in srgb, var(--bronze) 8%, transparent), transparent 50%); }
  .plats { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
  .plats > span { display: inline-flex; align-items: center; gap: 4px; }
  .plats svg { width: 12px; height: 12px; opacity: .95; color: var(--ink-2); }
  @media (max-width: 720px) { .lb-f { min-width: 0; flex: 1 1 140px; } .lb-search { width: 100%; } }
}

/* ============================================================ PLAYER ==== */
@layer components {
  .page-player > main::before { display: none; }

  /* loader: a broadcast stinger */
  .stinger { position: relative; min-height: calc(100vh - var(--hdr-h)); min-height: calc(100dvh - var(--hdr-h)); display: grid; place-items: center; background: var(--bg); overflow: hidden; }
  .stinger:not(.is-done) ~ #playerRoot { display: none; }
  #playerRoot.pl-reveal { animation: fade-in .45s var(--ease) both; }
  .stinger::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 50%, rgb(var(--acc-rgb) / .16), transparent 70%), var(--stripes); }
  .stinger.is-done { display: none; }
  html:not(.js) .stinger { display: none; }
  .stinger-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .stinger-mark { animation: st-in .7s var(--spring) both; filter: drop-shadow(0 10px 30px rgb(var(--acc-rgb) / .5)); }
  .stinger-text { text-align: center; overflow: hidden; }
  .stinger-text small { display: block; font: 700 11px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acc-hi); animation: rise .5s var(--ease-out) .15s both; }
  .stinger-text b { display: block; margin-top: 10px; font: 900 clamp(30px, 6vw, 56px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; transform: skewX(-8deg); animation: st-name .6s var(--ease-out) .25s both; }
  .stinger-bar { width: 220px; height: 3px; border-radius: 2px; background: var(--s3); overflow: hidden; }
  .stinger-bar i { display: block; height: 100%; width: 40%; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: st-bar 1s var(--ease-io) infinite; }
  @keyframes st-in { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
  @keyframes st-name { from { opacity: 0; transform: skewX(-8deg) translateY(100%); } }
  @keyframes st-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

  /* hero */
  .ph { position: relative; isolation: isolate; padding: 26px 0 0; overflow: hidden; }
  .ph-cover { position: absolute; inset: 0 0 auto; height: 100%; z-index: -1; }
  .ph-cover::before { content: ''; position: absolute; inset: 0; background: var(--ph-cover) center 35% / cover no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent); mask-image: linear-gradient(180deg, #000 35%, transparent); }
  .ph-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 75%), radial-gradient(60% 80% at 15% 30%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 70%), linear-gradient(0deg, var(--bg), transparent 45%); }
  .ph.has-cover .ph-cover::before { opacity: .9; }
  .ph .crumbs { margin-bottom: 18px; }
  .ph-avatar { position: relative; flex: none; width: var(--av); height: var(--av); display: grid; place-items: center; }
  .ph-avatar .emblem { width: var(--av) !important; height: var(--av) !important; }
  .ph-avatar .emblem::before { filter: blur(22px); opacity: .9; }
  .ph-initial { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 28px; background: var(--s3); font: 900 56px/1 var(--f-display); color: var(--ink-2); }
  .ph-avatar.is-avatar { border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier) 70%, transparent), 0 20px 50px -10px #000; }
  .ph-avatar .ph-avatar-img { width: 100%; height: 100%; object-fit: cover; }
  .ph-avatar.has-frame { border-radius: 26px; }
  .pf-frame { position: absolute; z-index: 4; left: calc(var(--av) / -4); top: calc(50% - var(--av) * .75); width: calc(var(--av) * 1.5); height: calc(var(--av) * 1.5); pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .45s var(--ease), transform .55s var(--spring); }
  .pf-frame.is-in { opacity: 1; transform: none; }
  .pf-frame img { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px #0009); }
  .pf-frame::after { content: ''; position: absolute; inset: 16.67%; pointer-events: auto; }
  .ph-id { flex: 1; min-width: 0; }
  .ph-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .ph-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; color: var(--ink-2); font-size: 13px; }
  .ph-club { height: 24px; font-size: 12.5px; padding: 0 8px; }
  .ph-handle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .ph-handle svg { width: 15px; height: 15px; color: var(--ink-2); }
  .ph-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .pf-social { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
  .pf-social svg { width: 15px; height: 15px; }
  .pf-social:hover { transform: translateY(-2px); background: var(--s3); }
  .pf-social.is-twitch:hover { color: #9146ff; } .pf-social.is-youtube:hover { color: #ff0033; } .pf-social.is-x:hover, .pf-social.is-tiktok:hover { color: #fff; }
  .pf-social.is-instagram:hover { color: #e4405f; } .pf-social.is-kick:hover { color: #53fc18; } .pf-social.is-discord:hover { color: #5865f2; }

  .claim-chip { height: 26px; }
  .claim-chip.is-claimed { cursor: default; }
  .premium-info { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--hi); background: color-mix(in srgb, var(--hi) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hi) 28%, transparent); transition: background var(--t-fast); }
  .premium-info .i { font-size: 14px; }
  .premium-info:hover { background: color-mix(in srgb, var(--hi) 18%, transparent); color: var(--hi); }
  .premium-info.is-active { color: var(--hi-ink); background: var(--hi); box-shadow: none; }

  .ph-inner { --av: 112px; position: relative; display: flex; align-items: center; gap: 24px; padding-bottom: 26px; }
  .ph-nameline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
  .ph-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 900 clamp(26px, 3.2vw, 40px)/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0; transform: skewX(-6deg); transform-origin: left bottom; }
  .ph-name > span:first-child { text-shadow: 0 4px 24px #000a; overflow-wrap: anywhere; }
  .ph-tag { font: 600 13px/1 var(--f-mono); color: var(--ink-3); transform: skewX(6deg); text-transform: none; }
  .ph-badges { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 10px; background: #0b0b10cc; box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .ph-badge { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; transition: transform .18s var(--ease), background .18s; animation: badge-in .45s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * 60ms); }
  .ph-badge img { width: 36px; height: 36px; filter: drop-shadow(0 2px 4px #000a); }
  .ph-badge:hover, .ph-badge:focus-visible { transform: translateY(-2px) scale(1.08); background: #ffffff0d; outline: none; z-index: 2; }
  .ph-badge.tier-legendary img { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hi) 45%, transparent)) drop-shadow(0 2px 4px #000a); }
  .ph-badge-more { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 7px; background: #ffffff0f; color: var(--ink-2); font: 800 15px/1 var(--f-display); font-stretch: 80%; animation: badge-in .45s var(--ease-out) .1s both; }
  .ph-badge-more:hover { background: #ffffff1f; color: #fff; }
  @keyframes badge-in { from { opacity: 0; transform: translateX(14px); } }
  .ph-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .ph-actions .btn { --b-bg: color-mix(in srgb, var(--s2) 80%, transparent); }
  .ph-actions .btn.is-on { color: var(--hi); --b-bd: color-mix(in srgb, var(--hi) 55%, transparent); --b-bg: color-mix(in srgb, var(--hi) 12%, var(--s1)); }

  /* score card: where the player stands right now */
  .ph-score { position: relative; flex: none; align-self: center; width: 320px; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--s1) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 35%, var(--line-2)), 0 24px 50px -24px #000; transition: box-shadow var(--t); }
  a.ph-score:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 65%, transparent), 0 24px 50px -24px #000; color: inherit; }
  .ph-score::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; background: linear-gradient(90deg, var(--tier), transparent); }
  .ph-score-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 10.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .ph-score-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
  .ph-score-rank, .ph-score-rs { display: flex; flex-direction: column; gap: 4px; }
  .ph-score-rs { text-align: right; align-items: flex-end; }
  .ph-score small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
  .ph-score b { font: 900 34px/1 var(--f-display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
  .ph-score-rs b { color: color-mix(in srgb, var(--tier) 35%, #fff); }
  .ph-score-lg { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 620; }
  .ph-score-lg em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); }
  .ph-score .meter { height: 5px; }
  .cs-board { display: inline-flex; align-items: center; gap: 8px; }
  .cs-board .i { color: var(--ink-3); }
  @media (max-width: 1100px) { .ph-inner { flex-wrap: wrap; } .ph-score { width: 100%; } }
  @media (max-width: 720px) {
    .ph-inner { --av: 72px; gap: 14px; align-items: flex-start; }
    .ph-id { flex: 1 1 calc(100% - var(--av) - 14px); min-width: 0; }
    .ph-name { font-size: clamp(22px, 7vw, 30px); font-stretch: 104%; }
    .ph-actions { margin-top: 12px; }
    .ph-actions .btn span { display: none; }
    .ph-actions .btn:first-child span { display: inline; }
    .ph-badge, .ph-badge img { width: 32px; height: 32px; }
    .ph-badge-more { min-width: 32px; height: 32px; }
  }

  /* tab band: pins under the header */
  .pf-bar { position: sticky; top: calc(var(--hdr-h) + var(--tick-h)); z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line-2); }
  .pf-bar .tabs { margin-inline: -4px; }
  .pf-bar .tab .i { font-size: 16px; color: var(--ink-3); transition: color var(--t-fast); }
  .pf-bar .tab.is-on .i { color: var(--acc); }
  .pf-bar .tabs-ink { background: linear-gradient(90deg, var(--acc), var(--tier, var(--acc))); }

  .pl-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  .pl-side { position: sticky; top: calc(var(--hdr-h) + var(--tick-h) + 64px); display: flex; flex-direction: column; }
  .pl-side .lt { margin: 22px 0 12px; }
  .pl-side .lt:first-child { margin-top: 0; }
  .pl-main { min-width: 0; }
  .pl-page:not([data-pane="overview"]) .pl-side { display: none; }
  .pl-page:not([data-pane="overview"]) .pl-layout { grid-template-columns: minmax(0, 1fr); }
  .pl-stale { margin-top: 20px; display: flex; gap: 6px; align-items: center; }
  @media (max-width: 1100px) {
    .pl-layout { grid-template-columns: minmax(0, 1fr); }
    .pl-side { position: static; order: 2; }
  }
  @media (max-width: 860px) {
        .ph-kicker { margin-bottom: 8px; }
      }

  /* current season */
  .cs-card { overflow: hidden; background: linear-gradient(165deg, color-mix(in srgb, var(--tier) 16%, var(--s1)), var(--s1) 55%); }
  .cs-top { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px; }
  .cs-main { flex: 1; min-width: 0; }
  .cs-league { font: 800 15px/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .03em; }
  .cs-rs { font: 900 32px/1 var(--f-display); font-stretch: 70%; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .cs-rs small { font: 600 11px/1 var(--f-mono); color: var(--ink-3); margin-left: 4px; }
  .cs-side { text-align: right; }
  .cs-side small { display: block; font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .cs-side b { font: 850 22px/1.2 var(--f-display); font-stretch: 72%; }
  .cs-meter { padding: 0 16px 16px; }
  .cs-meter-h { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
  .cs-meter-h b { color: var(--ink); }
  .cs-empty { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--ink-3); font-size: 13px; }
  .cs-table { border-top: 1px solid var(--line); }
  .cs-table th { background: transparent; }

  /* peaks */
  .peaks { overflow: hidden; }
  .pk-band { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 8px; padding: 10px 14px; font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); background: var(--bg-2); border-bottom: 1px solid var(--line); }
  .pk-band span { text-align: right; }
  .pk-band b { font-weight: 700; padding-left: 42px; }
  .pk-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 64px 64px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast); }
  .pk-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--tier); opacity: .8; }
  .pk-row:hover { background: var(--s2); }
  .pk-row img { width: 32px; height: 32px; }
  .pk-noicon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-4); }
  .pk-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pk-name small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk-name b { font: 800 17px/1 var(--f-display); font-stretch: 72%; }
  .pk-name sup { font: 600 9px/1 var(--f-mono); color: var(--ink-4); margin-left: 2px; vertical-align: top; }
  .pk-val { text-align: right; font: 750 14px/1 var(--f-display); font-stretch: 76%; font-variant-numeric: tabular-nums; }
  .pk-row.is-extra { display: none; }
  .peaks.is-open .pk-row.is-extra { display: grid; }
  .pk-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; font-weight: 600; font-size: 12.5px; color: var(--ink-3); }
  .pk-more:hover { color: var(--ink); background: var(--s2); }
  .peaks.is-open .pk-more .i { transform: rotate(180deg); }

  /* aliases */
  .al-list { padding: 8px 0; }
  .al-list li { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 13.5px; color: var(--ink-2); }
  .al-list li i { width: 8px; height: 8px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-4); }
  .al-list li.is-current { color: var(--ink); font-weight: 600; }
  .al-list li.is-current i { background: var(--acc); box-shadow: 0 0 0 3px rgb(var(--acc-rgb) / .25); }
  .al-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px 14px; border-top: 1px solid var(--line); }

  /* insights: standing + activity */
  .ins-flow { display: flex; flex-direction: column; gap: 16px; }
  .ins-flow > .sec-head { margin: 10px 0 -4px; }
  .ins-cards { display: flex; flex-wrap: wrap; gap: 14px; }
  .ins-cards > .ins-card { flex: 1 1 320px; min-width: 0; }
  .ins-card { padding: 16px; }
  .ins-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .ins-card-head h3 { display: flex; align-items: center; gap: 8px; font: 800 14px/1.2 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; }
  .ins-chip { font: 600 11.5px/1 var(--f-mono); color: var(--ink-2); padding: 5px 8px; border-radius: 6px; background: var(--s3); }
  .ins-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ins-cards .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-stat { padding: 12px; border-radius: var(--r); background: var(--s2); display: flex; flex-direction: column; gap: 6px; }
  .ins-v { font: 850 22px/1 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; }
  .ins-l { font-size: 11.5px; color: var(--ink-3); }
  .ins-sub { font: 600 11px/1 var(--f-mono); color: var(--ink-3); margin-left: 4px; }
  .ins-league { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; }
  .ins-meter { margin-top: 14px; }
  .ins-meter-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 8px; }
  .ins-meter-track { height: 8px; border-radius: 4px; background: var(--s4); overflow: hidden; }
  .ins-meter-fill { height: 100%; border-radius: inherit; background: var(--acc); box-shadow: 0 0 12px var(--acc); transform-origin: left; animation: none; }
  .ins-cuts { margin-top: 12px; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
  .ins-cuts li { display: flex; align-items: center; gap: 8px; }
  .ins-cuts .i { font-size: 14px; color: var(--ink-3); }
  .ins-done, .ins-done .i { color: var(--up) !important; }
  .ins-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ins-cross-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ins-cross li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .ins-cross li:last-child { border-bottom: 0; }
  .ins-cross-who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ins-cross-who:hover { color: var(--acc-hi); }
  .ins-cross-move { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
  .ins-cross-card.is-up .ins-card-head .i { color: var(--up); }
  .ins-cross-card.is-down .ins-card-head .i { color: var(--down); }
  .ins-facts li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .ins-facts li:last-child { border-bottom: 0; }
  .ins-fact-k { color: var(--ink-3); }
  .ins-core li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .ins-core li:last-child { border-bottom: 0; }
  .ins-core li.is-me { color: var(--acc-hi); font-weight: 650; }
  .ins-core-n { font: 800 14px/1 var(--f-display); color: var(--ink-4); }
  .ins-core-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ins-core-score { font: 750 14px/1 var(--f-display); font-stretch: 76%; }
  .ins-chart { min-height: 160px; }
  .ins-leagues li { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr) 44px; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; }
  .ins-lg-bar { height: 6px; border-radius: 3px; background: var(--s4); overflow: hidden; }
  .ins-lg-bar span { display: block; height: 100%; background: var(--acc); border-radius: inherit; animation: none; transform-origin: left; }
  .ins-lg-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .ins-miles li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .ins-miles li:last-child { border-bottom: 0; }
  .ins-miles .i { color: var(--acc); }
  .ins-note { margin-top: -6px; }
  .pl-up { color: var(--up); } .pl-down { color: var(--down); }
  @media (max-width: 860px) { .ins-grid, .ins-pair, .ins-cross-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ins-pair, .ins-cross-grid { grid-template-columns: minmax(0, 1fr); } }

  /* sessions log */
  .pl-log-head { align-items: flex-start; }
  .pl-log-pick { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
  .pl-log-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .pl-log-tile { padding: 14px; border-radius: var(--r); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; }
  .pll-l { font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .pll-v { font: 850 24px/1 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; }
  .pl-res { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 4px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; clip-path: var(--lean); }
  .pl-res.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
  .pl-res.down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
  .pl-rd { font-size: 11.5px; margin-left: 4px; }
  #logBox .tbl-wrap { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); background: var(--s1); }

  .pl-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: var(--ink-3); font-size: 12.5px; }
  .pl-more:not(.is-busy) { visibility: hidden; }
  .pl-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--acc); animation: spin .7s linear infinite; }
  @media (max-width: 720px) { .pl-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* events dialog */
  .ev-section + .ev-section { margin-top: 22px; }
  .ev-h { font: 800 13px/1 var(--f-display); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
  .event-list { display: flex; flex-direction: column; }
  .event-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .event-item:last-child { border-bottom: 0; }
  .ev-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--s3); color: var(--ink-2); }
  .ev-ic.up { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
  .ev-ic.down { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
  .ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
  .ev-name { font-weight: 650; }
  .ev-name:hover { color: var(--acc-hi); }
  .ev-text { color: var(--ink-3); font-size: 12px; }
  .ev-rename { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
  .ev-old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
  .ev-arrow { color: var(--acc); }
  .ev-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--ink-3); }
  .ev-rank { font-weight: 700; color: var(--ink); }

  /* badge case (drawer) */
  .bdc-spot { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: radial-gradient(80% 120% at 0 0, color-mix(in srgb, var(--bt, var(--acc)) 22%, transparent), transparent 70%), var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); scroll-margin-top: 12px; }
  .bdc-spot.tier-legendary { --bt: var(--hi); } .bdc-spot.tier-epic { --bt: #b06cff; } .bdc-spot.tier-rare { --bt: #4aa8ff; } .bdc-spot.tier-common { --bt: #8a8a99; }
  .bdc-spot-art img { width: 112px; height: 112px; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--bt) 50%, transparent)); animation: st-in .5s var(--spring) both; }
  .bdc-spot.is-locked .bdc-spot-art img { filter: grayscale(1) brightness(.5); }
  .bdc-spot-body { min-width: 0; }
  .bdc-spot-tags { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  .bdc-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--up); }
  .bdc-spot.is-locked .bdc-status { color: var(--ink-3); }
  .bdc-tier { font: 700 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; color: var(--bt); background: color-mix(in srgb, var(--bt) 14%, transparent); clip-path: var(--lean); }
  .bdc-spot-name { font: 850 22px/1.05 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
  .bdc-spot-desc { color: var(--ink-2); margin-top: 6px; font-size: 13.5px; }
  .bdc-spot-how { color: var(--ink-3); margin-top: 4px; font-size: 12.5px; }
  .bdg-rarity { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-3); }
  .bdg-rarity b { color: var(--ink); }
  .bdg-bar { height: 5px; border-radius: 3px; background: var(--s4); overflow: hidden; }
  .bdg-bar i { display: block; height: 100%; border-radius: inherit; background: var(--bt, var(--acc)); }
  .bdc-progress { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
  .bdc-ring { --p: 0; flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--s1) 78%, transparent 80% 100%), conic-gradient(var(--acc) calc(var(--p) * 1%), var(--s4) 0); }
  .bdc-ring b { font: 900 22px/1 var(--f-display); font-stretch: 72%; }
  .bdc-ring small { font: 600 10px/1 var(--f-mono); color: var(--ink-3); }
  .bdc-progress-main { flex: 1; min-width: 0; }
  .bdc-progress-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
  .bdc-progress-head a { display: inline-flex; align-items: center; color: var(--acc-hi); font-weight: 600; }
  .bdg-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .bdg-tierchip { font-size: 11.5px; color: var(--ink-3); padding: 4px 8px; border-radius: 999px; background: var(--s2); }
  .bdg-tierchip b { color: var(--ink); }
  .bdc-filter { margin-bottom: 14px; }
  .bdc-group + .bdc-group { margin-top: 18px; }
  .bdc-group-head { display: flex; justify-content: space-between; font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
  .bdc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .bdc-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--r); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t-fast), transform var(--t) var(--spring), box-shadow var(--t-fast); }
  .bdc-tile:hover { background: var(--s3); transform: translateY(-2px); }
  .bdc-tile.is-on { box-shadow: inset 0 0 0 2px var(--acc); background: rgb(var(--acc-rgb) / .1); }
  .bdc-tile img { width: 54px; height: 54px; }
  .bdc-tile.is-locked img { filter: grayscale(1) brightness(.45); }
  .bdc-tile-name { font-size: 11px; text-align: center; color: var(--ink-2); line-height: 1.25; }
  .bdc-lock { position: absolute; top: 6px; right: 6px; font-size: 13px; color: var(--ink-4); }
  .bdc-count { position: absolute; top: 6px; left: 6px; font: 700 10.5px/1 var(--f-mono); color: var(--hi); }
}
@layer components {
  .ins-flow > .tbl-wrap, .pl-pane .tbl-wrap:not(.panel .tbl-wrap) { background: var(--s1); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
  .tbl tr.ins-me { background: rgb(var(--acc-rgb) / .1); }
  .tbl tr.ins-me td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
}
@layer components { @media (max-width: 720px) { .lb-filters { width: 100%; } .lb-f { flex: 1 1 140px; } } }

/* ===================================================== HOME SEARCH ==== */
@layer components {
  .hs { position: relative; max-width: 640px; margin-top: 26px; z-index: 20; }
  .hs .hero-search { margin-top: 0; padding-left: 8px; }
  .hs.is-open .hero-search { border-radius: 16px 16px 0 0; box-shadow: 0 0 0 1px rgb(var(--acc-rgb) / .7), 0 0 0 6px rgb(var(--acc-rgb) / .12); }
  .hs-plats { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
  .hs-plat { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-3); transition: background var(--t-fast), color var(--t-fast); }
  .hs-plat img, .hs-plat svg { width: 16px; height: 16px; }
  .hs-plat:hover { color: var(--ink); }
  .hs-plat.is-on { background: var(--s4); color: var(--ink); box-shadow: var(--edge); }
  .hs-plat:not(.is-on) img { filter: grayscale(1) brightness(.8); }
  .hero-search input { padding-left: 6px; }
  .hs-panel { position: absolute; left: 0; right: 0; top: 100%; border-radius: 0 0 16px 16px; background: var(--s1); box-shadow: 0 0 0 1px rgb(var(--acc-rgb) / .7), 0 30px 70px -20px #000; overflow: hidden; animation: pop-in .16s var(--ease-out); }
  .hs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .hs-tabs > button { height: 28px; }
  .hs-count { font: 600 11px/1 var(--f-mono); color: var(--ink-3); padding: 5px 8px; border-radius: 6px; background: var(--s2); }
  .hs-list { max-height: 320px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
  .hs-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: var(--r); cursor: pointer; transition: background var(--t-fast); }
  .hs-row:hover, .hs-row.is-active { background: var(--s3); }
  .hs-av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--s3); font: 800 14px/1 var(--f-display); color: var(--ink-2); }
  .hs-av.is-icon { background: transparent; }
  .hs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .hs-name { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs-rank { font: 800 14px/1 var(--f-display); font-stretch: 72%; color: var(--ink-2); }
  .hs-btn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--ink-4); transition: color var(--t-fast), background var(--t-fast); }
  .hs-btn:hover { background: var(--s4); color: var(--ink); }
  .hs-star.is-on { color: var(--hi); }
  .hs-empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }
  .hs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-4); }
  .hs-global { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 12px; font-weight: 560; }
  .hs-global:hover { color: var(--acc-hi); }
  .hs.is-open ~ .hero-quick { visibility: hidden; }
  @media (max-width: 640px) { .hs-foot > span { display: none; } .hs-plats { display: none; } .hero-search { padding-left: 14px; } }
}
@layer components {
  /* Home: board + ladder, clubs across, then two equal lists side by side. */
  .home-grid { align-items: stretch; }
  .home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .home-col > .panel:last-child { flex: 1; display: flex; flex-direction: column; }
  .home-col > .panel:last-child > .rows { flex: 1; justify-content: space-between; }
  .home-col .rw { min-height: 56px; }
  .home-row { margin-top: 20px; }
  .home-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
  .home-pair .rw { min-height: 58px; }
  @media (max-width: 860px) { .home-pair { grid-template-columns: minmax(0, 1fr); } }
}

/* ============================================ HOME HEAD, second pass ==== */
@layer components {
  .hero { padding: 44px 0 22px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }
  .hero-title { margin: 6px 0 16px; line-height: .9; }
  .hero-title .t1 { font-size: clamp(40px, 5.4vw, 78px); }
  .hero-title .t2 { font-size: clamp(20px, 2.4vw, 32px); margin-top: 6px; letter-spacing: .02em; }
  .hero-sub { font-size: 15px; max-width: 540px; }

  /* the live card: #1 on top, the season clock as its footer */
  .champ { padding: 0; display: flex; flex-direction: column; }
  .champ::after { font-size: 140px; top: -18px; }
  .champ-k { padding: 18px 20px 0; }
  .champ-body { padding: 14px 20px 18px; }
  .champ-top { margin-top: 0; gap: 14px; }
  .champ-name { font-size: 24px; }
  .champ-meta { gap: 8px; margin-top: 6px; }
  .champ-meta .lg { font-size: 12.5px; color: var(--ink-2); }
  .champ-score { margin-top: 16px; padding-top: 14px; }
  .champ-score .v { font-size: 44px; }
  .champ .clock { margin: 0; border-radius: 0; box-shadow: none; background: #00000040; border-top: 1px solid var(--line-2); padding: 12px 20px; }
  .clock-l { display: inline-flex; align-items: center; gap: 8px; font: 650 12px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .clock-l .i { color: var(--acc); font-size: 16px; }
  .clock-v { gap: 4px; }
  .clock-v span { flex-direction: row; align-items: baseline; gap: 2px; min-width: 0; padding: 5px 7px; }
  .clock-v b { font-size: 18px; }
  .clock-v small { margin: 0; font-size: 10px; }
  .statband { margin-top: 34px; }

  /* search: platform picker + underline tabs */
  .hs .hero-search { padding-left: 6px; gap: 6px; }
  .hs-plat-pick { position: relative; flex: none; }
  .hs-plat-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px 0 12px; border-radius: 11px; color: var(--ink); font-weight: 600; font-size: 13.5px; transition: background var(--t-fast); }
  .hs-plat-btn:hover, .hs-plat-btn[aria-expanded="true"] { background: var(--s3); }
  .hs-plat-btn > .i { font-size: 14px; color: var(--ink-3); transition: transform var(--t); }
  .hs-plat-btn[aria-expanded="true"] > .i { transform: rotate(180deg); }
  .hs-plat-ic { width: 18px; height: 18px; display: grid; place-items: center; }
  .hs-plat-ic img, .hs-plat-ic svg { width: 17px; height: 17px; }
  .hs-plat-menu { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; min-width: 190px; padding: 5px; border-radius: var(--r); background: var(--s2); box-shadow: var(--shadow-pop); animation: pop-in .16s var(--ease-out); }
  .hs-plat-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 7px; color: var(--ink-2); font-weight: 560; font-size: 13.5px; text-align: left; }
  .hs-plat-menu button:hover { background: var(--s4); color: var(--ink); }
  .hs-plat-menu button[aria-selected="true"] { color: var(--ink); }
  .hs-plat-menu button > .i { margin-left: auto; color: var(--acc); font-size: 15px; }
  .hs-sep { width: 1px; height: 26px; background: var(--line-2); flex: none; }
  .hs-tabs { padding: 0 10px; border-bottom: 1px solid var(--line); }
  .hs-tabs .tab { height: 42px; padding: 0 12px; font-size: 13px; }
  .hs-tabs .count { min-width: 20px; text-align: center; }
  .hs-tabs .tab.is-on .count { background: rgb(var(--acc-rgb) / .18); color: var(--acc-hi); }
  @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hero-side { max-width: 520px; } }
  @media (max-width: 640px) { .hs-plat-name { display: none; } .hs-plat-pick, .hs-sep { display: flex; } .hs .hero-search { padding-left: 4px; } .hs-plat-btn { padding: 0 8px; } }
}
@layer components { .hero { z-index: 5; } .hs { z-index: 30; } }
@layer components { .home-grid.is-measuring { align-items: start; } .home-grid.is-measuring .home-col > .panel:last-child { flex: none; } }
@layer components {
  .hs-plat-btn { height: 38px; padding: 0 10px; margin-left: 4px; border-radius: 10px; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; }
  .hs-plat-btn:hover, .hs-plat-btn[aria-expanded="true"] { background: var(--s4); box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .45); }
  .hs-sep { display: none; }
  .hs-plat-menu { min-width: 280px; padding: 6px; }
  .hs-plat-h { padding: 8px 10px 6px; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
  .hs-plat-menu button { align-items: center; padding: 9px 10px; }
  .hs-plat-menu .hs-plat-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--s3); }
  .hs-plat-menu button[aria-selected="true"] .hs-plat-ic { background: rgb(var(--acc-rgb) / .16); color: var(--acc-hi); }
  .hs-plat-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hs-plat-t b { font-weight: 620; color: var(--ink); }
  .hs-plat-t small { font-size: 11.5px; color: var(--ink-3); }
}

/* ======================================== HOME: overlay card + 5 stats ==== */
@layer components {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; }
  .ov3d { position: relative; display: flex; flex-direction: column; gap: 22px; perspective: 1400px; }
  .ov3d::before { content: ''; position: absolute; inset: 4% 6% 40%; z-index: -1; background: radial-gradient(closest-side, rgb(var(--acc-rgb) / .45), transparent); filter: blur(46px); animation: ov-glow 6s ease-in-out infinite alternate; }
  @keyframes ov-glow { to { transform: translate(6%, 4%) scale(1.08); opacity: .7; } }
  .ov3d-card {
    --rx: 6deg; --ry: -14deg;
    position: relative; display: block; border-radius: 16px; overflow: hidden; transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
    box-shadow: 0 0 0 1px var(--line-3), 0 50px 90px -30px #000, 0 30px 60px -30px rgb(var(--acc-rgb) / .55);
    animation: ov-float 7s ease-in-out infinite;
    transition: transform .6s var(--ease-out), box-shadow .4s;
  }
  .ov3d-card.is-tilt { animation: none; transition: transform .12s linear, box-shadow .4s; box-shadow: 0 0 0 1px rgb(var(--acc-rgb) / .5), 0 50px 90px -30px #000, 0 30px 70px -26px rgb(var(--acc-rgb) / .8); }
  @keyframes ov-float { 0%, 100% { transform: rotateX(6deg) rotateY(-14deg) translateY(0); } 50% { transform: rotateX(3deg) rotateY(-8deg) translateY(-10px); } }
  .ov3d-card img { width: 100%; height: auto; display: block; }
  .ov3d-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at var(--gx, 20%) var(--gy, 10%), #ffffff2a, transparent 60%), linear-gradient(115deg, transparent 40%, #ffffff10 50%, transparent 60%); mix-blend-mode: screen; }
  .ov3d-tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 8px; background: #08080bcc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transform: translateZ(40px); }
  .ov3d-tag .i { color: var(--acc); font-size: 14px; }
  .ov3d-copy h2 { font: 900 clamp(22px, 2.2vw, 30px)/1 var(--f-display); font-stretch: 118%; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left bottom; }
  .ov3d-copy p { color: var(--ink-2); font-size: 14px; margin: 10px 0 16px; max-width: 520px; }
  .ov3d-btns { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (prefers-reduced-motion: reduce) { .ov3d-card { animation: none; } }
  @media (max-width: 1100px) { .hero-side { max-width: 640px; } }

  .statband.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .statband.is-5 > div { padding: 16px 18px; }
  .sb-clock b i { font-style: normal; font: 600 11px/1 var(--f-mono); color: var(--ink-3); margin: 0 3px 0 1px; }
  .sb-clock { background: linear-gradient(135deg, rgb(var(--acc-rgb) / .14), transparent 70%); }
  @media (max-width: 1100px) { .statband.is-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .statband.is-5 > div:nth-child(4) { border-left: 0; } .statband.is-5 > div:nth-child(n+4) { border-top: 1px solid var(--line); } }
  @media (max-width: 640px) { .statband.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statband.is-5 > div { border-left: 0 !important; border-top: 1px solid var(--line); } .statband.is-5 > div:nth-child(-n+2) { border-top: 0; } .statband.is-5 > div:nth-child(even) { border-left: 1px solid var(--line) !important; } .statband.is-5 > .sb-clock { grid-column: 1 / -1; border-left: 0 !important; } }
}
@layer components {
  /* platform picker: icon + name, a compact list with a filled selection */
  .hs-plat-btn { gap: 8px; padding: 0 8px 0 6px; background: var(--s2); }
  .hs-plat-btn .hs-plat-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--s4); }
  .hs-plat-btn .hs-plat-ic img, .hs-plat-btn .hs-plat-ic svg { width: 15px; height: 15px; }
  .hs-plat-menu { min-width: 0; width: 196px; padding: 5px; display: grid; gap: 2px; }
  .hs-plat-menu button { gap: 10px; padding: 6px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
  .hs-plat-menu .hs-plat-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--s3); transition: background var(--t-fast); }
  .hs-plat-menu button:hover .hs-plat-ic { background: var(--s5); }
  .hs-plat-menu button[aria-selected="true"] { background: rgb(var(--acc-rgb) / .14); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .4); }
  .hs-plat-menu button[aria-selected="true"] .hs-plat-ic { background: var(--acc); color: #fff; }
  .hs-plat-t { font-size: 13.5px; }
}
@layer components { .hs-plat-ic img { border-radius: 4px; } .hero-grid { align-items: start; } .hero-copy { padding-top: 40px; } @media (max-width: 1100px) { .hero-copy { padding-top: 0; } } }
@layer components { @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hero-side { max-width: 640px; } } @media (max-width: 640px) { .ov3d-card { --rx: 0deg; --ry: 0deg; animation: none; transform: none; } .ov3d-copy h2 { font-size: 22px; } } }
@layer components {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 420px; align-items: center; }
  .hero-copy { padding-top: 0; }
  .feed { box-shadow: var(--edge), 0 0 0 1px var(--line-2), 0 40px 80px -30px #000; }
  .feed .panel-h { border-bottom: 0; padding-bottom: 6px; }
  .feed-tabs { margin: 0 16px 8px; display: flex; }
  .feed-tabs > button { flex: 1; justify-content: center; }
  .feed-list { border-top: 1px solid var(--line); min-height: 270px; }
  .fd-row { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
  .fd-row:last-child { border-bottom: 0; }
  .fd-row:hover { background: var(--s2); }
  .fd-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 16px; }
  .fd-ic.is-ban { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
  .fd-ic.is-rename { background: rgb(var(--acc-rgb) / .12); color: var(--acc-hi); }
  .fd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fd-main b { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fd-main small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fd-main s { color: var(--ink-4); }
  .fd-when { font: 500 11px/1 var(--f-mono); color: var(--ink-4); white-space: nowrap; }
  .feed-foot { display: flex; justify-content: space-between; }
  @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-side { max-width: none; } }
}
@layer components { .lb-f { width: 200px; min-width: 0; flex: none; } @media (max-width: 720px) { .lb-f { width: auto; flex: 1 1 140px; } } }
@layer components {
  #lbMeta { min-height: 26px; }
  #dirIntro { min-height: calc(2 * 1.55em); max-width: 760px; }
  @media (max-width: 720px) { #dirIntro { min-height: calc(3 * 1.55em); } }
}
@layer components {
  .home-grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: stretch; }
  .home-grid > .panel:last-child { display: flex; flex-direction: column; }
  .home-grid .ladder { flex: 1; }
  .home-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
  .home-lists > .panel { display: flex; flex-direction: column; }
  .home-lists .rows { flex: 1; }
  .home-lists .rw { min-height: 60px; gap: 12px; padding: 8px 16px; }
  .home-lists .rw-end { min-width: 64px; }
  .home-lists .bar { width: 56px; }
  @media (max-width: 720px) { .home-lists { grid-template-columns: minmax(0, 1fr); } }
}
@layer components { @media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } } }
@layer components {
  /* Leaderboard head: the pickers always stay at the right; the title takes two
     fixed lines (season, then mode), whatever the mode's name length. */
  .lb-head .phead-row { flex-wrap: nowrap; align-items: flex-end; }
  .lb-head .phead-row > div:first-child { flex: 1; min-width: 0; }
  .lb-head .lb-filters { flex: none; flex-wrap: nowrap; }
  #lbTitle { font-size: clamp(28px, 3.6vw, 48px); line-height: .95; }
  #lbTitle em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 900px) {
    .lb-head .phead-row { flex-wrap: wrap; }
    .lb-head .lb-filters { width: 100%; flex-wrap: wrap; }
  }
}
@layer components { .lb-top.no-leagues { grid-template-columns: minmax(0, 1fr); } .lb-top.no-leagues > .panel:last-child { display: none; } }
@layer components {
  /* Top 10 as rows; the podium rows carry their metal as a side bar + tint */
  .home-top td { height: 48px; }
  .home-top tr.is-p1 td:first-child { box-shadow: inset 3px 0 0 var(--hi); }
  .home-top tr.is-p2 td:first-child { box-shadow: inset 3px 0 0 var(--silver); }
  .home-top tr.is-p3 td:first-child { box-shadow: inset 3px 0 0 var(--bronze); }
  .home-top tr.is-p1 .score { color: var(--hi); }
  .home-grid .ladder-row { flex: 1; padding-block: 4px; }
  .home-grid .ladder { justify-content: flex-start; gap: 0; padding: 0; }
}

@layer components {
  .hs-plat-pick [data-plat="steam"] { --platform-color: #66c0f4; }
  .hs-plat-pick [data-plat="psn"] { --platform-color: #0070d1; }
  .hs-plat-pick [data-plat="xbox"] { --platform-color: #107c10; }
  .hs-plat-pick [data-plat]:not([data-plat="embark"]) .hs-plat-ic {
    color: var(--platform-color);
    background: color-mix(in srgb, var(--platform-color) 14%, var(--s2));
  }
}

@layer components {
  /* Stable player navigation; identity and actions follow the production layout. */
  .page-player .pf-bar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pl-tabs .tabs-ink { transition: none; box-shadow: none; }
  .pl-page { min-height: calc(100svh - var(--hdr-h) - var(--tick-h) - 46px); overflow-anchor: none; }
  .ph-inner { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; --av: 104px; gap: 24px; align-items: end; padding-top: 42px; padding-bottom: 26px; }
  .ph-name { font-size: clamp(28px, 3vw, 42px); }
  .ph-nameline { align-items: center; gap: 10px 14px; }
  .ph-badges { margin: 0; padding: 3px; }
  .ph-badge, .ph-badge img { width: 32px; height: 32px; }
  .ph-badge-more { min-width: 32px; height: 32px; }
  .ph-meta { margin-top: 12px; gap: 8px 18px; }
  .ph-handle { min-width: 0; max-width: 100%; }
  .ph-handle > span { overflow: hidden; text-overflow: ellipsis; }
  .ph-presence { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-3); font-size: 12px; margin-bottom: 12px; }
  .ph-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 320px; }
  .ph-kicker { justify-content: flex-end; margin: 0; gap: 6px; }
  .ph-actions { display: flex; gap: 8px; margin: 0; }
  .ph-actions .btn { width: 38px; height: 36px; padding: 0; justify-content: center; }
  .ph-actions .btn span, .ph-actions .btn:first-child span { display: none; }
  .ph-controls .premium-info { font-size: 11px; padding-inline: 8px; }
  .cs-rs small { font-size: 10px; }
  @media (max-width: 1100px) {
    .ph-inner { grid-template-columns: 88px minmax(0, 1fr); --av: 88px; gap: 18px; padding-top: 24px; }
    .ph-controls { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: none; }
    .ph-kicker { justify-content: flex-start; }
  }
  @media (max-width: 600px) {
    .ph-inner { grid-template-columns: 64px minmax(0, 1fr); --av: 64px; gap: 16px; padding-top: 10px; }
    .ph-avatar { align-self: start; margin-top: 26px; }
    .ph-name { font-size: 28px; flex-wrap: wrap; gap: 3px 8px; }
    .ph-nameline { gap: 10px; }
    .ph-badges { flex-wrap: wrap; }
    .ph-badge, .ph-badge img { width: 27px; height: 27px; }
    .ph-badge-more { min-width: 27px; height: 27px; }
    .ph-controls { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line-2); }
    .ph-kicker { flex: 1 1 100%; }
    .ph-actions { gap: 8px; }
  }
}
@layer components {
  /* Home: the top ten and today's climbers side by side, row for row. The
     climbers' rows share the panel's height evenly, so both lists end level. */
  .home-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
  .home-climbers { display: flex; flex-direction: column; }
  .home-climbers #movers { flex: 1; display: flex; flex-direction: column; }
  .home-climbers #movers > .rw, .home-climbers #movers > .sk-row { flex: 1 1 0; min-height: 0; height: auto; padding-block: 0; }
  @media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } .home-climbers #movers > .rw { flex: none; min-height: 56px; } }
}
@layer components {
  .rw-head { flex: none; display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--line-2);
    font: 650 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
}
@layer components {
  /* With a frame equipped the avatar becomes the tile the frame art was drawn
     around: a square with two cut corners, filled in the tier colour. The 13
     frames stay as they are. */
  .ph-avatar.has-frame {
    --pfc: calc(var(--av) * .14);
    border-radius: 0; box-shadow: none;
    clip-path: polygon(var(--pfc) 0, 100% 0, 100% calc(100% - var(--pfc)), calc(100% - var(--pfc)) 100%, 0 100%, 0 var(--pfc));
    background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--tier) 40%, transparent), transparent 75%), linear-gradient(150deg, color-mix(in srgb, var(--tier) 30%, #15151b), #0d0d12);
  }
  .ph-avatar.has-frame .emblem { width: 82% !important; height: 82% !important; }
  .ph-avatar.has-frame .emblem::before { display: none; }
  .ph-avatar.has-frame.is-avatar .ph-avatar-img { border-radius: 0; }
}
@layer components { .pf-frame { left: 0; top: 0; } }
@layer components {
  .floor { left: 0; right: 0; bottom: 0; height: 70%; transform: none; animation: none;
    background: url('/assets/images/arena-floor.svg?v=2') center bottom / cover no-repeat; opacity: .12; }
}
@layer components {
  /* ---- Profile on phones: the production order, rebuilt on the new skin ----
     head (avatar tile + name, badges, handles), a row of four labelled
     actions, the claim chips, then This season first, the overview, and the
     peaks and aliases last. */
  @media (max-width: 720px) {
    .ph { padding-top: 14px; }
    .ph .crumbs { margin-bottom: 10px; }
    .ph-inner { grid-template-columns: 76px minmax(0, 1fr); --av: 76px; gap: 6px 14px; align-items: start; padding-top: 6px; padding-bottom: 18px; }
    .ph-avatar { margin-top: 0; align-self: start; grid-row: span 1;
      --pfc: 11px; clip-path: polygon(var(--pfc) 0, 100% 0, 100% calc(100% - var(--pfc)), calc(100% - var(--pfc)) 100%, 0 100%, 0 var(--pfc));
      background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--tier) 40%, transparent), transparent 75%), linear-gradient(150deg, color-mix(in srgb, var(--tier) 30%, #15151b), #0d0d12); }
    .ph-avatar .emblem { width: 62px !important; height: 62px !important; }
    .ph-avatar .emblem::before { display: none; }
    .ph-presence { order: 3; margin: 10px 0 0; font-size: 12px; gap: 4px 14px; }
    .ph-id { display: flex; flex-direction: column; min-width: 0; }
    .ph-nameline { order: 1; flex-direction: column; align-items: flex-start; gap: 8px; }
    .ph-name { font-size: 26px; }
    .ph-meta { order: 2; margin-top: 8px; gap: 6px 14px; font-size: 12.5px; }
    .ph-socials { order: 4; }
    .ph-controls { grid-column: 1 / -1; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 10px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line-2); max-width: none; }
    .ph-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .ph-actions .btn { width: auto; height: 40px; padding: 0 6px; gap: 6px; font-size: 12px; }
    .ph-actions .btn span, .ph-actions .btn:first-child span { display: inline; }
    .ph-kicker { justify-content: flex-start; flex-wrap: wrap; }

    /* sections in the production order */
    .pl-layout { display: flex; flex-direction: column; gap: 0; }
    .pl-side { display: contents; }
    .pl-side > * { order: 3; }
    .pl-side > :nth-child(1), .pl-side > :nth-child(2) { order: 1; }
    .pl-main { order: 2; }
    .pl-side > .lt:first-child { margin-top: 0; }
    .pl-side > .lt { margin: 24px 0 12px; }
    .pl-main .lt { margin-top: 24px; }
    .pl-side > :nth-child(1) { margin-top: 0; }

    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .kpi { padding: 12px 14px; }
    .kpi-v { font-size: 26px; }
    .lt-title small { display: none; }
  }
}
@layer components { @media (max-width: 720px) { .pl-side > *, .pl-main { width: 100%; max-width: none; align-self: stretch; } } }
@layer components {
  .hero-quick { flex-wrap: nowrap; align-items: center; gap: 10px; max-width: 640px; min-height: 32px; }
  .hero-quick:empty { display: none; }
  .hero-quick .qlabel { flex: none; line-height: 1; }
  .qrow { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .qrow::-webkit-scrollbar { display: none; }
  .qchip { flex: none; height: 30px; padding: 0 11px 0 9px; gap: 6px; max-width: 170px; }
  .qchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qchip .i { font-size: 13px; color: var(--ink-3); }
  .qchip.is-fav .i { color: var(--hi); }
  .qchip:hover { transform: none; }
  @media (max-width: 640px) { .hero-quick .qlabel { display: none; } }
}

@layer components {
  /* Player name: normal case, upright and smaller, with the #tag scaled to it
     instead of a fixed 13px next to a 40px headline. */
  .page-player .ph-name { font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; font-stretch: 100%; text-transform: none; transform: none; letter-spacing: -.01em; gap: 6px; }
  .page-player .ph-tag { font-size: max(13px, .52em); font-weight: 500; transform: none; letter-spacing: 0; }
  @media (max-width: 600px) { .page-player .ph-name { font-size: 22px; } }
  @media (max-width: 420px) { .page-player .ph-name { font-size: 20px; } }
}

@layer components {
  /* Ban flag on the profile, next to the name (pill styles: sections.css .bn-pill). */
  .ph-nameline .ph-ban { height: 24px; font-size: 11.5px; text-decoration: none; transition: filter .15s; }
  .ph-nameline .ph-ban .i { width: 14px; height: 14px; }
  .ph-nameline .ph-ban:hover { filter: brightness(1.2); }
}