/* VEGAN public views: Arena, Live, Pemain, Profil, Klasemen, Riwayat, Sesi, Iuran.
   Semua warna lewat token tokens.css. */

/* ---------- page chrome ---------- */
.view.is-enter > * { animation: reveal var(--dur-long) var(--ease-out) both; }
.view.is-enter > *:nth-child(2) { animation-delay: 50ms; }
.view.is-enter > *:nth-child(3) { animation-delay: 100ms; }
.view.is-enter > *:nth-child(4) { animation-delay: 150ms; }
.view.is-enter > *:nth-child(n+5) { animation-delay: 200ms; }
.view > * + * { margin-top: var(--space-8); }
.view > .backlink + * { margin-top: 0; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.page-head .kicker { display: block; margin-bottom: var(--space-2); }
.h-sm { font-size: var(--text-lg); text-transform: uppercase; }
.backlink {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-bottom: var(--space-4);
  color: var(--c-muted); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--dur-micro) var(--ease-out);
}
.backlink:hover { color: var(--c-ink); }
.avatar-row { display: inline-flex; align-items: center; }
.avatar-more { margin-left: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--c-faint); }
.delta.up, .vs__delta.up { color: var(--c-win); }
.delta.down, .vs__delta.down { color: var(--c-loss); }
.delta { min-width: 2.6rem; text-align: right; }

/* ---------- arena ---------- */
.arena-hero {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--c-accent-dim), transparent 60%),
    linear-gradient(160deg, var(--c-paper-3), var(--c-paper-2));
}
@media (min-width: 768px) { .arena-hero { padding: var(--space-8); } }
.arena-hero__head { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 860px) { .arena-hero__head { grid-template-columns: minmax(0, 1fr) auto; } }
.arena-hero__venue { display: flex; align-items: center; gap: 6px; }
.hud-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.hud-stats div { padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: oklch(14% 0.006 95 / 0.55); border: 1px solid var(--c-rule); min-width: 0; }
@media (min-width: 860px) { .hud-stats div { min-width: 92px; padding: var(--space-3); } }
.hud-stats dt { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-stats dd { margin: 4px 0 0; font-weight: 900; font-stretch: var(--wide); font-size: clamp(1rem, 5vw, var(--text-2xl)); line-height: 1; white-space: nowrap; }
/* HP: skor live naik ke atas, statistik sesi di bawahnya */
@media (max-width: 859px) { .arena-hero__head { display: contents; } .arena-hero .hud-stats { order: 2; } }
@media (max-width: 479px) { .arena-hero { padding: var(--space-5) var(--space-3); gap: var(--space-4); } .hud-stats div { padding: var(--space-2); } }
.hud-stats dd small, .tiles dd small { font-size: 0.5em; color: var(--c-muted); margin-left: 2px; font-weight: 700; }
.arena-live { display: flex; flex-direction: column; gap: var(--space-3); }
.arena-live .kicker { display: inline-flex; align-items: center; gap: 8px; }
.arena-recap { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.arena-recap__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 46ch; }
.mvp { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-paper-2); border: 1px solid var(--c-accent-line); transition: transform var(--dur-short) var(--ease-out); }
.mvp:hover { transform: translateY(-2px); }
.mvp .kicker { display: inline-flex; align-items: center; gap: 6px; }
.mvp b { display: block; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-xl); text-transform: uppercase; line-height: 1.1; }
.mvp small { display: block; }
.attend-strip { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

.lb-mini { list-style: none; margin: 0; padding: 0; }
.lb-mini li + li { border-top: 1px solid var(--c-rule); }
.lb-pos { width: 1.6rem; flex: none; text-align: center; font-weight: 900; font-stretch: var(--wide); color: var(--c-faint); }
.lb-mini li:first-child .lb-pos { color: var(--c-accent); }
.lb-elo { min-width: 3.2rem; text-align: right; font-weight: 900; font-stretch: var(--wide); }
@media (max-width: 420px) { .lb-mini .tier { display: none; } }

.dues-teaser {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.dues-teaser:hover { border-color: var(--c-accent-line); transform: translateY(-1px); }
.dues-teaser .kicker { display: block; }
.dues-teaser b { display: block; font-weight: 900; font-stretch: var(--wide); font-size: var(--text-2xl); line-height: 1.15; }
.dues-teaser small { display: block; font-size: var(--text-xs); }

.card-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(46%, 200px); gap: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 2px var(--space-3);
  scrollbar-width: thin; scrollbar-color: var(--c-rule-2) transparent;
}
.card-rail > * { scroll-snap-align: start; }
.card-rail:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-md); }

/* ---------- live board (VS) ---------- */
.live-view__top { margin-bottom: var(--space-4); }
.live-view__top .backlink { margin-bottom: 0; }
.vs {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(70% 90% at 50% 120%, var(--c-accent-dim), transparent 70%),
    linear-gradient(170deg, var(--c-paper-3), var(--c-paper-2));
  border: 1px solid var(--c-rule);
  margin-top: 0 !important;
}
.vs__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-rule); font-size: var(--text-xs); }
.vs__bar .kicker { color: var(--c-ink); }
.vs__rules { margin-left: auto; }
.vs__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.vs__team { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-3); text-align: center; min-width: 0; transition: opacity var(--dur-short) var(--ease-out); }
.vs__players { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.vs__p { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; min-width: 0; max-width: 128px; border-radius: var(--r-md); padding: 4px; }
.vs__p:hover .vs__pn { color: var(--c-accent); }
.vs__pn { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-sm); text-transform: uppercase; line-height: 1.1; overflow-wrap: anywhere; transition: color var(--dur-micro) var(--ease-out); }
.vs__delta { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; }
.vs__pts { font-weight: 900; font-stretch: var(--wide); font-size: var(--text-score); line-height: 0.88; letter-spacing: -0.02em; }
.vs__pts.bump { animation: bump var(--dur-short) var(--ease-out); }
.vs__tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-paper); border: 1px solid var(--c-rule); color: var(--c-muted);
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.serve-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }
.vs__team.is-serving .vs__pts { color: var(--c-accent); text-shadow: 0 0 34px oklch(88% 0.165 95 / 0.35); }
.vs__team.is-serving .vs__tag { color: var(--c-accent); border-color: var(--c-accent-line); }
.vs__team.is-winner { background: radial-gradient(80% 70% at 50% 100%, var(--c-accent-dim), transparent 75%); }
.vs__team.is-winner .vs__pts, .vs__team.is-winner .vs__tag { color: var(--c-accent); }
.vs__team.is-winner .vs__tag { border-color: var(--c-accent-line); }
.vs__team.is-loser { opacity: 0.6; }
.vs__mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-3); border-inline: 1px solid var(--c-rule); }
.vs__x { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-xl); letter-spacing: 0.1em; color: var(--c-faint); }
.vs__games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vs__games li { display: grid; grid-template-columns: auto 2.4ch 2.4ch; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.vs__games span { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); white-space: nowrap; }
.vs__games b { font-family: var(--font-display); font-weight: 800; text-align: center; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.vs__games b.w { color: var(--c-ink); }
.vs__games li.is-cur b { color: var(--c-accent); }
.vs__flag { padding: var(--space-3) var(--space-4); text-align: center; background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.vs__flag.is-info { background: var(--c-paper-4); color: var(--c-ink); }
@media (max-width: 639px) {
  .vs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "mid mid"; }
  .vs__team[data-side="A"] { grid-area: a; border-right: 1px solid var(--c-rule); }
  .vs__team[data-side="B"] { grid-area: b; }
  .vs__mid { grid-area: mid; flex-direction: row; flex-wrap: wrap; border-inline: 0; border-top: 1px solid var(--c-rule); padding: var(--space-3); }
  .vs__x { display: none; }
  .vs__games { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
  .vs__team { padding: var(--space-5) var(--space-2); }
  .vs__rules { margin-left: 0; width: 100%; }
}

/* TV mode: layar penuh untuk HP/TV di pinggir lapangan */
body.tv .topbar, body.tv .tabbar, body.tv .demo-banner, body.tv .live-view__top .backlink, body.tv .live-view > section:not(.vs) { display: none; }
body.tv .view { padding-block: var(--space-3); }
body.tv .live-view { width: 100%; max-width: none; }
body.tv .live-view__top { margin-bottom: var(--space-3); justify-content: flex-end; }
body.tv .vs { min-height: calc(100dvh - 80px); display: flex; flex-direction: column; }
body.tv .vs__grid { flex: 1; }
body.tv .vs__pts { font-size: clamp(6rem, 24vw, 20rem); }
body.tv .vs__pn { font-size: var(--text-lg); }

/* ---------- players grid ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.toolbar + * { margin-top: 0 !important; }
.toolbar__sort .select { min-width: 150px; }
.toolbar__search { position: relative; flex: 1 1 180px; min-width: 0; }
.toolbar__search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-faint); pointer-events: none; }
.toolbar__search .input { padding-left: 36px; }

/* ---------- profil atlet: panel siaran (broadcast HUD) ---------- */
.bc {
  --t: var(--t-rookie);
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); padding: 10px; margin-top: 0 !important;
  background:
    radial-gradient(26% 20% at 10% 0%, oklch(97% 0.02 220 / 0.5), transparent 70%),
    radial-gradient(26% 20% at 90% 0%, oklch(97% 0.02 220 / 0.5), transparent 70%),
    radial-gradient(90% 45% at 50% 112%, oklch(46% 0.09 235 / 0.5), transparent 70%),
    linear-gradient(180deg, var(--c-stage-2), var(--c-stage) 62%);
}
.bc::before { /* bokeh lampu stadion, menipis di tengah */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.75;
  background:
    radial-gradient(circle, oklch(90% 0.08 210 / 0.55) 0 1.2px, transparent 2px) 0 0 / 29px 23px,
    radial-gradient(circle, oklch(90% 0.14 95 / 0.45) 0 1px, transparent 1.8px) 13px 9px / 41px 37px;
  -webkit-mask: radial-gradient(75% 60% at 50% 45%, transparent 35%, black 90%); mask: radial-gradient(75% 60% at 50% 45%, transparent 35%, black 90%);
}
.bc__frame {
  position: relative; border-radius: 14px; padding: 14px 12px 16px;
  background: oklch(14% 0.02 235 / 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px var(--c-holo-line), inset 0 0 44px -14px var(--c-holo), 0 0 34px -12px var(--c-holo);
}
.bc__frame::before { /* siku kuning besar di 4 sudut */
  content: ""; position: absolute; inset: -4px; z-index: 3; pointer-events: none;
  --b: 3px; --l: 38px; --k: var(--c-accent);
  background:
    linear-gradient(var(--k) 0 0) left top / var(--l) var(--b), linear-gradient(var(--k) 0 0) left top / var(--b) var(--l),
    linear-gradient(var(--k) 0 0) right top / var(--l) var(--b), linear-gradient(var(--k) 0 0) right top / var(--b) var(--l),
    linear-gradient(var(--k) 0 0) left bottom / var(--l) var(--b), linear-gradient(var(--k) 0 0) left bottom / var(--b) var(--l),
    linear-gradient(var(--k) 0 0) right bottom / var(--l) var(--b), linear-gradient(var(--k) 0 0) right bottom / var(--b) var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 6px oklch(88% 0.165 95 / 0.6));
}
.bc__side { display: none; }
.bc__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 8px 10px; margin-bottom: 12px; text-align: center; }
.bc__head::after { content: ""; position: absolute; bottom: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); }
.bc__title { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: clamp(0.82rem, 3.6vw, 1.15rem); letter-spacing: 0.12em; text-transform: uppercase; }
.bc__sub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-holo); }
.bc__grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "id" "facts" "skill" "power"; }
.bc__photo {
  grid-area: photo; position: relative; display: grid; place-items: end center; aspect-ratio: 1 / 0.95; overflow: hidden; border-radius: 10px;
  background: radial-gradient(70% 60% at 50% 72%, color-mix(in oklch, var(--t) 30%, transparent), transparent 70%), linear-gradient(180deg, oklch(30% 0.045 232 / 0.55), oklch(13% 0.02 235 / 0.7));
  box-shadow: inset 0 0 0 1px var(--c-holo-line), inset 0 0 30px -10px var(--c-holo);
}
.bc__photo::after { /* scanline + garis data tipis di kiri */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, oklch(96% 0.006 95 / 0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, var(--c-holo-dim) 0 1px, transparent 1px 9px) 12px 30% / 22% 40% no-repeat;
}
.bc__photo img { position: relative; width: 90%; height: 94%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 20px oklch(5% 0.01 240 / 0.7)); }
.bc__photo > svg { width: 55%; height: auto; color: oklch(96% 0.006 95 / 0.18); }
.bc__ovr { position: absolute; z-index: 2; top: 10px; left: 12px; display: flex; flex-direction: column; line-height: 0.9; }
.bc__ovr b { font-weight: 900; font-stretch: var(--wide); font-size: 2.6rem; color: var(--c-accent); text-shadow: 0 0 20px oklch(88% 0.165 95 / 0.4); }
.bc__ovr span { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; color: var(--c-holo); margin-top: 4px; }
.bc__photo .tier { position: absolute; z-index: 2; top: 14px; right: 12px; }
.bc__id { grid-area: id; min-width: 0; padding: 2px 0 2px 14px; border-left: 4px solid var(--c-accent); box-shadow: -8px 0 16px -10px var(--c-accent); }
.bc__name { font-size: clamp(1.9rem, 8.5vw, 2.8rem); line-height: 0.95; letter-spacing: 0.01em; }
.bc__nat { margin-top: 6px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.bc__facts { grid-area: facts; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bc__facts div { min-width: 0; padding: 8px 10px; border-radius: 8px; background: oklch(12% 0.02 235 / 0.65); box-shadow: inset 0 0 0 1px var(--c-holo-line), inset 0 0 16px -8px var(--c-holo); }
.bc__facts dt { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-holo); }
.bc__facts dd { margin: 3px 0 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: clamp(0.9rem, 3.8vw, 1.35rem); text-transform: uppercase; line-height: 1.1; }
.bc__facts dd small { font-size: 0.62em; color: var(--c-muted); font-weight: 700; }
.bc__facts dd .ic { color: var(--c-accent); }
.bc__panel { min-width: 0; padding: 12px; border-radius: 10px; background: oklch(12% 0.02 235 / 0.6); box-shadow: inset 0 0 0 1px var(--c-holo-line), inset 0 0 26px -10px var(--c-holo); }
.bc__skill { grid-area: skill; display: flex; flex-direction: column; gap: 6px; }
.bc__power { grid-area: power; }
.bc__ptitle { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--text-md); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent); }
.bc__ptitle b { color: var(--c-ink); font-size: var(--text-xl); font-weight: 900; }
.bc .radar { max-width: 340px; margin-inline: auto; }
.bc .radar .ring { stroke: var(--c-holo-dim); }
.bc .radar .ring-outer { stroke: var(--c-holo-line); }
.bc .radar .axis { stroke: var(--c-holo-dim); }
.bc .radar .lbl { fill: var(--c-ink); }
.bc .radar .val { fill: var(--c-accent); }
.bc .radar .vtx { fill: var(--c-accent); stroke: var(--c-heat-2); }
.bc__readout { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--c-holo-line); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-holo); }
.bc__readout b { margin-left: 4px; color: var(--c-ink); }
.pbars { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pbar__lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.pbar__lbl small { font-size: 0.85em; color: var(--c-muted); font-weight: 600; letter-spacing: 0.04em; }
.pbar__lbl b { font-size: 1rem; font-weight: 900; }
.pbar .segbar { margin-inline: 4px; }
@media (min-width: 640px) {
  .bc { padding: 16px; max-width: 920px; margin-inline: auto; }
  .bc__frame { padding: 18px 22px 22px 34px; }
  .bc__side { display: block; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9px; letter-spacing: 0.3em; color: var(--c-holo); opacity: 0.6; }
  .bc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "photo skill" "id skill" "facts power"; gap: 12px 16px; }
  .bc__facts { grid-template-columns: minmax(0, 1fr); }
}
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tiles div { padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper-2); border: 1px solid var(--c-rule); min-width: 0; }
.tiles dt { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles dd { margin: 6px 0 0; font-weight: 900; font-stretch: var(--wide); font-size: var(--text-2xl); line-height: 1; }
.tierbar { --t: var(--t-rookie); display: flex; flex-direction: column; gap: var(--space-2); }
.tierbar i { display: block; height: 8px; border-radius: 99px; background: var(--c-paper-4); overflow: hidden; }
.tierbar i b { display: block; height: 100%; width: var(--v); background: var(--t); box-shadow: 0 0 12px var(--t); border-radius: inherit; }
.radar-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3) !important; }
.legend-line { width: 22px; border-top: 2px dashed var(--c-faint); flex: none; }
.rel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule); text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out); }
a.rel:hover { border-color: var(--c-accent-line); }
.rel__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rel__txt .label { display: inline-flex; align-items: center; gap: 6px; }
.rel__txt b { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel.is-empty { opacity: 0.6; }
.statbars { display: flex; flex-direction: column; gap: var(--space-2); }
.statbars .label { margin-bottom: 2px; }
.hist-row .chip { min-width: 70px; justify-content: center; }

/* ---------- klasemen ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; max-width: 640px; margin-inline: auto; }
.podium__slot {
  --t: var(--t-rookie);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: var(--space-4) var(--space-2) var(--space-4); text-decoration: none; text-align: center;
  background: linear-gradient(180deg, color-mix(in oklch, var(--t) 18%, transparent), var(--c-glass) 60%);
  border: 1px solid color-mix(in oklch, var(--t) 40%, transparent); border-bottom-width: 3px; border-radius: var(--r-md);
  transition: transform var(--dur-short) var(--ease-out);
}
.podium__slot:hover { transform: translateY(-3px); }
.podium__slot.is-empty { visibility: hidden; }
.podium__slot[data-pos="1"] { padding-top: var(--space-8); border-color: var(--c-accent-line); border-bottom-color: var(--c-accent); background: linear-gradient(180deg, var(--c-accent-dim), var(--c-glass) 65%); }
.podium__pos { position: absolute; top: 6px; left: 10px; font-weight: 900; font-stretch: var(--wide); font-size: var(--text-xl); color: var(--t); }
.podium__slot[data-pos="1"] .podium__pos { color: var(--c-accent); font-size: var(--text-2xl); }
.podium__photo { width: 72%; aspect-ratio: 1 / 1.05; display: grid; place-items: end center; }
.podium__slot[data-pos="1"] .podium__photo { width: 86%; }
.podium__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 12px oklch(8% 0.01 95 / 0.6)); }
.podium__photo svg { width: 78%; color: oklch(96% 0.006 95 / 0.2); }
.podium__name { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-sm); text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__elo { font-weight: 900; font-stretch: var(--wide); font-size: var(--text-xl); line-height: 1; }
.podium__slot[data-pos="1"] .podium__elo { color: var(--c-accent); }
@media (max-width: 420px) { .podium__slot .tier { font-size: 9px; padding: 2px 6px 2px 5px; letter-spacing: 0.08em; } .podium__elo { font-size: var(--text-lg); } }

.lb { border: 1px solid var(--c-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); }
.lb-row {
  display: grid; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; min-width: 0;
  grid-template-columns: 1.8rem 40px minmax(0, 1fr) auto 3.4rem;
}
.lb-row + .lb-row { border-top: 1px solid var(--c-rule); }
a.lb-row:hover { background: var(--c-paper-3); }
.lb-head { padding-block: var(--space-2); background: var(--c-paper); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); }
.lb-row .lb-pos { width: auto; }
.lb-row:nth-child(2) .lb-pos { color: var(--c-accent); }
.lb-row:nth-child(3) .lb-pos, .lb-row:nth-child(4) .lb-pos { color: var(--c-ink); }
.lb-name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.lb-name b { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lb-col { color: var(--c-muted); font-weight: 700; text-align: right; white-space: nowrap; }
.lb-wr, .lb-form { display: none; }
.lb-row .lb-elo { min-width: 0; }
@media (min-width: 720px) {
  .lb-row { grid-template-columns: 2.2rem 40px minmax(0, 1fr) 4.2rem 3.4rem 7.2rem 4rem; }
  .lb-wr, .lb-form { display: block; }
  .lb-form { display: flex; justify-content: flex-end; }
}
.tier-legend .row { gap: var(--space-2); }

/* ---------- riwayat & sesi ---------- */
.ses-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-paper-2); border: 1px solid var(--c-rule); text-decoration: none; min-width: 0; transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.ses-card:hover { border-color: var(--c-accent-line); transform: translateY(-1px); }
.ses-card > .ic { color: var(--c-faint); }
.ses-card__date { width: 58px; height: 62px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule-2); }
.ses-card__date b { font-weight: 900; font-stretch: var(--wide); font-size: var(--text-2xl); line-height: 1; color: var(--c-accent); }
.ses-card__date span { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.ses-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ses-card__main .row { gap: var(--space-2); }
.ses-card__sub { font-size: var(--text-sm); }

.mini-table { border: 1px solid var(--c-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); }
.mini-table__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 2.6rem); gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-4); text-decoration: none; min-height: 48px; }
.mini-table__row + .mini-table__row { border-top: 1px solid var(--c-rule); }
a.mini-table__row:hover { background: var(--c-paper-3); }
.mini-table__row > span:not(:first-child) { text-align: center; }
.mini-table__row .row { flex-wrap: nowrap; gap: var(--space-2); min-width: 0; }
.mini-table__row .row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-table__row.is-head { min-height: 0; background: var(--c-paper); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); }

/* ---------- iuran ---------- */
.dues__pick .select { min-width: min(100%, 260px); }
.bill { padding: var(--space-6) var(--space-5); background: radial-gradient(90% 90% at 100% 0%, var(--c-accent-dim), transparent 60%), linear-gradient(160deg, var(--c-paper-3), var(--c-paper-2)); display: flex; flex-direction: column; gap: var(--space-2); }
.bill__amt { font-weight: 900; font-stretch: var(--wide); font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1; color: var(--c-accent); }
.bill__lines { margin: var(--space-3) 0 0; display: flex; flex-direction: column; }
.bill__lines div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px dashed var(--c-rule); font-size: var(--text-sm); }
.bill__lines dt { display: flex; align-items: center; gap: 8px; color: var(--c-muted); min-width: 0; }
.bill__lines dd { margin: 0; text-align: right; white-space: nowrap; }
.bill__lines dd:nth-of-type(1) { color: var(--c-faint); }
.bill__lines .is-total { border-top: 1px solid var(--c-rule-2); font-weight: 800; }
.bill__lines .is-total dt { color: var(--c-ink); }
.paym { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule); }
.paym__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paym__main b { font-size: var(--text-lg); font-weight: 800; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.paidbar { height: 8px; border-radius: 99px; background: var(--c-paper-4); overflow: hidden; margin-top: calc(-1 * var(--space-2)) !important; }
.paidbar b { display: block; height: 100%; width: var(--v); background: var(--c-win); border-radius: inherit; transition: width var(--dur-long) var(--ease-out); }
.dues-list { border: 1px solid var(--c-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); }
.due-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.due-row + .due-row { border-top: 1px solid var(--c-rule); }
.due-row__main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.due-row__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.due-row__amt { font-weight: 800; white-space: nowrap; }
.due-row.is-paid .due-row__amt { color: var(--c-faint); }
@media (max-width: 479px) {
  .due-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: var(--space-2); padding-inline: var(--space-3); }
  .due-row .avatar { --sz: 34px; }
  .due-row .btn span { display: none; }
  .due-row .btn { width: 36px; padding: 0; }
}
.pay-confirm { display: flex; flex-direction: column; gap: var(--space-4); }
.pay-confirm__who { display: flex; align-items: center; gap: var(--space-3); }
.pay-confirm__who > div { display: flex; flex-direction: column; min-width: 0; }
.pay-confirm__amt { margin-left: auto; font-size: var(--text-xl); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .view.is-enter > * { animation-name: fadeOnly !important; }
  .vs__pts.bump { animation: none; }
  .mvp:hover, .ses-card:hover, .podium__slot:hover, .dues-teaser:hover { transform: none; }
}