/*
 * Klasemen & bracket. Arah visual: panggung stand up. Podium dan bracket duduk di "stage" navy
 * dengan lampu sorot cyan; tabel tetap terang supaya angka mudah dibaca.
 */
:root{
  --stage:#070E22; --stage2:#0f1f4d; --stage3:#15295E;
  --glow:rgba(31,195,243,.55); --glass:rgba(255,255,255,.06); --glass-line:rgba(255,255,255,.12);
  --gold:#FFD66B;
}

.seg{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:99px;background:var(--bg3);margin-bottom:1.4rem}
.seg button{padding:.55rem 1.2rem;border-radius:99px;font-weight:700;font-size:.85rem;color:var(--muted);transition:background .25s,color .25s,box-shadow .25s}
.seg button:hover{color:var(--b1)}
.seg button.on{background:var(--card);color:var(--b1);box-shadow:0 2px 10px rgba(20,32,80,.12)}
.seg button:focus-visible{outline:2px solid var(--b2);outline-offset:2px}

/* ── Panggung bersama: latar navy + lampu sorot ─────────────────────────── */
.stage{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:#fff;
  background:
    radial-gradient(120% 70% at 50% 120%,rgba(31,195,243,.22),transparent 60%),
    linear-gradient(165deg,var(--stage) 0%,var(--stage2) 55%,var(--stage3) 100%);
  box-shadow:0 30px 80px rgba(7,14,34,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.stage::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(31,195,243,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(31,195,243,.14) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.stage-lights{position:absolute;inset:0;z-index:-1;pointer-events:none}
.stage-lights i{position:absolute;top:-20%;width:34%;height:130%;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(31,195,243,.06) 55%,transparent 80%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(6px);opacity:.55;animation:sweep 9s ease-in-out infinite alternate}
.stage-lights i:nth-child(1){left:2%;transform:rotate(-14deg);animation-delay:-3s}
.stage-lights i:nth-child(2){left:33%;transform:rotate(0);opacity:.75}
.stage-lights i:nth-child(3){right:2%;transform:rotate(14deg);animation-delay:-6s}
@keyframes sweep{from{rotate:-4deg}to{rotate:4deg}}
/* panel bracket tinggi: sorot lebih pendek & redup supaya tidak membentuk pola di belakang kartu */
.stage .stage-lights i{height:60%;opacity:.3}
.stage .stage-lights i:nth-child(2){opacity:.4}

/* ── Klasemen ────────────────────────────────────────────────────────── */
.board-card{position:relative;border-radius:24px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 24px 70px rgba(20,32,80,.12)}
.board-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;padding:1.3rem 1.4rem 1.1rem;color:#fff;
  background:radial-gradient(90% 140% at 100% 0,rgba(31,195,243,.35),transparent 55%),linear-gradient(120deg,var(--stage) 0%,var(--stage2) 60%,var(--stage3) 100%)}
.board-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--cy),var(--b2) 60%,transparent)}
.board-head .eyebrow{color:var(--cy)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem}
.lg{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:700;color:rgba(255,255,255,.85);padding:.35rem .7rem;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.lg i{width:9px;height:9px;border-radius:3px}
.lg-direct i{background:#6f8fd6}
.lg-qual i{background:var(--cy);box-shadow:0 0 8px var(--glow)}
.lg-wild i{background:#d9cfb8}
.scroll-hint{margin-top:.8rem;display:none}
@media(max-width:1000px){.scroll-hint{display:block}}

.board-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.board{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;min-width:820px}
.board th,.board td{padding:.75rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.board th{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg2);font-weight:700;text-align:center;vertical-align:bottom;padding-top:.9rem}
.board th .p{display:block;width:max-content;margin:.3rem auto 0;padding:.08rem .4rem;border-radius:5px;font-size:.6rem;letter-spacing:0;color:var(--b2);background:color-mix(in srgb,var(--b2) 10%,transparent)}
.board th.l,.board td.l{text-align:left;padding-left:1.3rem}
.board td.c{text-align:center;color:color-mix(in srgb,var(--muted) 45%,transparent)}
.board td.c.has{color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.board td.c.has span{display:inline-block;min-width:3.4em;padding:.3rem .5rem;border-radius:8px;
  background:color-mix(in srgb,var(--cy) calc(8% + var(--a,0) * 28%),transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cy) calc(var(--a,0) * 30%),transparent)}

/* judul grup */
.board tr.grp td{padding:1.1rem 1.3rem .55rem;background:var(--card);border-bottom:none;font-size:.72rem;color:var(--muted)}
.board tr.grp td span{display:flex;align-items:center;gap:.45rem;position:sticky;left:1.3rem;width:max-content}
.board tr.grp td b{font-family:var(--f-h);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b1)}
.board tr.grp td em{font-style:normal;margin-left:.4rem;padding:.12rem .55rem;border-radius:99px;background:var(--bg3);font-weight:700;font-size:.66rem}
.board tr.grp td span::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--b2)}
.board tr.g-direct td span::before{background:var(--b1)}
.board tr.g-qualifier td span::before{background:var(--cy);box-shadow:0 0 0 3px rgba(31,195,243,.2)}
.board tr.g-none td span::before{background:#b9ab8c}

/* garis batas Direct Invitation: di bawah posisi 6 */
.board tr.cutline td{border-bottom:3px solid var(--accent)}
.board tr.cutline td:first-child{z-index:4}
.board tr.cutline td:first-child::after{content:attr(data-cut);position:absolute;left:1.3rem;bottom:-.62rem;z-index:3;padding:.1rem .5rem;border-radius:99px;
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent)}

.board .who{display:flex;align-items:center;gap:.75rem;min-width:220px}
.board .rk{font-family:var(--f-h);font-weight:700;font-size:1.05rem;color:var(--b1);width:30px;text-align:center;flex:none;font-variant-numeric:tabular-nums}
.board .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-h);font-weight:700;font-size:.76rem;color:var(--b1);background:rgba(38,66,132,.1);flex:none;transition:transform .3s var(--ease),background .3s}
.board .nm{font-weight:700;color:var(--ink2);line-height:1.15}
.board .sub{font-size:.72rem;color:var(--muted);font-weight:500;margin-top:.1rem}
.board .av.ph,.pot li .av.ph{padding:0;overflow:hidden;background:var(--bg3)}
.board .av.ph img,.pot li .av.ph img{width:100%;height:100%;object-fit:cover;display:block}
.potchip{display:inline-block;vertical-align:middle;margin-left:.45rem;padding:.12rem .45rem;border-radius:6px;font-family:var(--f-b);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--b1)}
.potchip.b{background:var(--b2)}


/* total: angka besar + bar relatif pemuncak */
.board td.tot,.board th.tot{text-align:right;min-width:150px}
.board th.tot{font-size:.66rem;background:color-mix(in srgb,var(--cy) 14%,var(--bg2));color:var(--b1)}
.board td.tot{position:relative;font-family:var(--f-h);font-weight:700;font-size:1.25rem;color:var(--b1);background:color-mix(in srgb,var(--cy) 6%,var(--card));font-variant-numeric:tabular-nums;padding-right:1.3rem}
.board td.tot b{position:relative}
.board td.tot .bar{position:absolute;left:.9rem;right:4.4rem;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:color-mix(in srgb,var(--b1) 8%,transparent);overflow:hidden}
.board td.tot .bar::after{content:'';position:absolute;inset:0;width:var(--w);border-radius:inherit;background:var(--grad);transform-origin:left;animation:grow 1s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms + 200ms)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.board tr.row{animation:fadeIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.board tr.row td{transition:background-color .2s}
.board tr.row:hover td{background:color-mix(in srgb,var(--cy) 8%,var(--card))}
.board tr.row:hover td.tot{background:color-mix(in srgb,var(--cy) 16%,var(--card))}
.board tr.row:hover .av{transform:scale(1.08)}

/* kolom pertama & total menempel saat digeser */
.board th:first-child,.board td:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
.board th:first-child{background:var(--bg2);z-index:3}
.board tr.grp td:first-child{position:static}
.board th.tot,.board td.tot{position:sticky;right:0;z-index:2}
.board th.tot{z-index:3}
.board tr:last-child td{border-bottom:none}

/*
 * Dasar tabel putih bersih. Grup dibedakan lewat aksen: garis kiri per baris + pita judul grup berwarna,
 * bukan latar penuh per baris (terlalu banyak tint bikin kusam). Semua warna opak karena kolom nama & total menempel.
 */
.board tr.zone-direct{--accent:var(--b1);--accent-ink:#fff}
.board tr.zone-qualifier{--accent:var(--cy);--accent-ink:#04122a}
.board tr.zone-none{--accent:#b9ab8c;--accent-ink:#3b3220}
.board th,.board th:first-child,.board th.tot{background:var(--card);border-bottom:2px solid var(--line)}
.board th.tot{color:var(--b1)}
.board tr.row td,.board tr.row td:first-child,.board tr.row td.tot{background:var(--card)}
.board tr.row:hover td,.board tr.row:hover td:first-child,.board tr.row:hover td.tot{background:color-mix(in srgb,var(--accent,var(--cy)) 6%,var(--card))}
.board tr.row td:first-child{box-shadow:inset 4px 0 0 var(--accent,transparent)}

/* pita judul grup */
.board tr.grp td{padding:.6rem 1.3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.board tr.g-direct td{background:color-mix(in srgb,var(--b1) 8%,var(--card))}
.board tr.g-qualifier td{background:color-mix(in srgb,var(--cy) 12%,var(--card))}
.board tr.g-none td{background:color-mix(in srgb,#d9cfb8 28%,var(--card))}
.board tr.g-none td b{color:#7a6a45}
.board tr.grp td em{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.board tr.cutline + tr.grp td{padding-top:1rem}
.board td.empty{text-align:center;padding:2.5rem}

/* ── Stage bracket ─────────────────────────────────────────────────────── */
.stage{padding:clamp(1.4rem,3vw,2.6rem)}
.stage-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.stage-head .eyebrow{color:var(--cy)}
.stage-head h2{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.02em;color:#fff;margin:.35rem 0 0}
.weights{list-style:none;display:flex;gap:.5rem}
.weights li{display:flex;flex-direction:column;align-items:center;min-width:88px;padding:.7rem .9rem;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line)}
.weights b{font-family:var(--f-h);font-size:1.5rem;line-height:1;color:#fff}
.weights span{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.3rem}
.weights li:last-child{border-color:rgba(31,195,243,.45);background:rgba(31,195,243,.1)}
.weights li:last-child b{color:var(--cy)}

.bracket-scroll{overflow-x:auto;padding:.4rem .2rem .6rem;-webkit-overflow-scrolling:touch}
.bracket{--gap:56px;display:grid;grid-template-columns:repeat(3,250px);column-gap:var(--gap);min-width:max-content}
@media(min-width:1100px){.bracket{--gap:clamp(56px,6vw,96px);grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}}
.bracket .col{display:grid;grid-template-rows:auto repeat(3,1fr);row-gap:1.2rem}
.bracket .col h4{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-family:var(--f-h);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding-bottom:.7rem;border-bottom:1px solid var(--glass-line)}
.bracket .col h4 span{font-family:var(--f-b);font-size:.64rem;letter-spacing:.12em;color:rgba(255,255,255,.5);font-weight:600}
.bracket .fin h4{color:var(--gold)}
.bracket .cell{display:flex;flex-direction:column;justify-content:center;position:relative}
.bracket .pair{display:flex;flex-direction:column;gap:1rem;position:relative}
/* garis penghubung, menyala cyan */
.bracket .pair::after{content:'';position:absolute;right:calc(var(--gap) * -0.5);top:25%;bottom:25%;width:calc(var(--gap) * .5);border:2px solid var(--cy);border-left:none;border-radius:0 12px 12px 0;opacity:.55;filter:drop-shadow(0 0 6px var(--glow))}
.bracket .r2 .m::before,.bracket .fin .qual::before{content:'';position:absolute;left:calc(var(--gap) * -0.5);top:50%;width:calc(var(--gap) * .5);height:2px;background:var(--cy);opacity:.55;box-shadow:0 0 8px var(--glow)}
.bracket .r2 .m::after{content:'';position:absolute;right:calc(var(--gap) * -0.5);top:50%;width:calc(var(--gap) * .5);height:2px;background:var(--cy);opacity:.55;box-shadow:0 0 8px var(--glow)}

.m{position:relative;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--glass-line);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.m:hover{transform:translateY(-3px);border-color:rgba(31,195,243,.5);box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(31,195,243,.25)}
.m .mh{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .8rem;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);
  background:linear-gradient(90deg,rgba(38,66,132,.9),rgba(36,109,169,.6));border-radius:13px 13px 0 0}
.m .mh span:first-child{color:#fff}
.m .t{display:grid;grid-template-columns:40px 1fr 34px;align-items:center;gap:.55rem;padding:.6rem .7rem;border-top:1px solid var(--glass-line)}
.m .t .pot{font-size:.58rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);text-align:center;background:rgba(255,255,255,.08);border-radius:6px;padding:.22rem 0}
.m .t .nm{font-weight:700;font-size:.95rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m .t .res{width:30px;height:28px;border-radius:7px;display:grid;place-items:center;font-family:var(--f-h);font-weight:700;font-size:.8rem;color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.m .t.win{background:linear-gradient(90deg,rgba(31,195,243,.2),transparent)}
.m .t.win .nm{color:#fff}
.m .t.win .nm::after{content:' ✓';color:var(--cy);font-size:.8rem}
.m .t.win .res{background:var(--cy);color:#04122a;box-shadow:0 0 14px var(--glow)}
.m .t.lose .nm{color:rgba(255,255,255,.4);font-weight:500;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.m .t.tbd .nm{color:rgba(255,255,255,.35);font-weight:500;font-style:italic}
.m .mj{display:flex;flex-direction:column;gap:.2rem;padding:.5rem .8rem;border-top:1px solid var(--glass-line);font-size:.68rem;color:rgba(255,255,255,.6)}
.m .mj i{font-style:normal;color:var(--cy);font-weight:700}
.m .mf{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .8rem;border-top:1px solid var(--glass-line);font-size:.72rem;color:rgba(255,255,255,.6)}
.m .mf a{color:var(--cy);font-weight:700}
.m.tbd-m{border-style:dashed;background:rgba(255,255,255,.025);box-shadow:none}
.m.tbd-m .mh{background:rgba(255,255,255,.06)}

.qual{position:relative;display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-radius:16px;color:#3a2600;
  background:linear-gradient(135deg,#f7b733,var(--gold));box-shadow:0 0 0 1px rgba(255,214,107,.5),0 14px 40px rgba(255,214,107,.3);animation:glow 3s ease-in-out infinite}
.qual .av{width:44px;height:44px;border-radius:50%;background:rgba(58,38,0,.12);display:grid;place-items:center;font-family:var(--f-h);font-weight:700;font-size:.95rem;flex:none}
.qual .nm{font-family:var(--f-h);font-weight:700;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qual .lbl{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.qual.tbd{color:rgba(255,255,255,.7);background:rgba(255,214,107,.05);border:1.5px dashed rgba(255,214,107,.4);box-shadow:none;animation:none}
.qual.tbd .av{background:rgba(255,214,107,.12);color:var(--gold)}
.qual.tbd .lbl{color:var(--gold);opacity:1}
.qual.tbd .nm{font-family:var(--f-b);font-weight:500;font-size:.9rem;font-style:italic}
.bracket .fin .qual::before{background:var(--gold);box-shadow:0 0 8px rgba(255,214,107,.6)}
@keyframes glow{50%{box-shadow:0 0 0 1px rgba(255,214,107,.7),0 18px 50px rgba(255,214,107,.45)}}

/* ── Pot A / Pot B ─────────────────────────────────────────────────────── */
.pots{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.6rem}
.pot{position:relative;overflow:hidden;padding:1.4rem 1.4rem 1.2rem;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.pot-letter{position:absolute;right:.4rem;bottom:-2.6rem;font-family:var(--f-h);font-weight:700;font-size:9rem;line-height:1;color:var(--b1);opacity:.06;pointer-events:none}
.pot-b .pot-letter{color:var(--b2)}
.pot ol{list-style:none;margin-top:.9rem;display:flex;flex-direction:column;gap:.45rem;position:relative}
.pot li{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-radius:12px;background:var(--bg2);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.pot li:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--b2) 40%,transparent)}
.pot li .rk{font-family:var(--f-h);font-weight:700;color:var(--b1);width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.pot li .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-h);font-weight:700;font-size:.68rem;color:#fff;background:var(--b1);flex:none}
.pot-b li .av{background:var(--b2)}
.pot li .nm{font-weight:700;color:var(--ink2)}
.pot li .ct{font-size:.8rem;color:var(--muted);margin-left:auto}
.pot li.tbd .nm{color:var(--muted);font-weight:500;font-style:italic}

/* ── Mobile / tablet ───────────────────────────────────────────────────── */
@media(max-width:760px){
  .stage{border-radius:22px}
  .weights{width:100%}
  .weights li{flex:1;min-width:0}
  .pots{grid-template-columns:1fr}
  .board-card{border-radius:18px}
  .board-head{padding:1rem .9rem .85rem;gap:.6rem}
  .board-head .eyebrow{font-size:.62rem}
  .lg{font-size:.6rem;padding:.24rem .55rem}
  .board td.tot,.board th.tot{min-width:0}
  .board td.tot .bar{display:none}
  /* kolom nama & total menempel; sisakan ruang untuk kolom kategori yang digeser */
  .board{font-size:.68rem;width:max-content;min-width:100%}
  .board th,.board td{padding:.42rem .35rem}
  .board th{font-size:.5rem;padding-top:.6rem}
  .board th .p{font-size:.5rem}
  .board th.l,.board td.l{padding-left:.7rem;padding-right:.5rem}
  .board .who{min-width:0;width:118px;gap:.35rem}
  .board .who>div{min-width:0}
  .board .av{display:none}
  .board .av.ph{display:block;width:24px;height:24px}
  .board .rk{width:18px;font-size:.66rem}
  .board .nm{font-size:.72rem}
  .board .sub{font-size:.56rem}
  .board .nm,.board .sub{overflow:hidden;text-overflow:ellipsis}
  .potchip{margin-left:.25rem;padding:.05rem .28rem;font-size:.46rem}
  .board td.tot{font-size:.82rem;padding-right:.7rem}
  .board td.c.has span{min-width:0;padding:.16rem .3rem;border-radius:5px;font-size:.66rem}
  .board tr.grp td{padding:.5rem .7rem;font-size:.56rem}
  .board tr.cutline + tr.grp td{padding-top:.85rem}
  .board tr.grp td span{left:.7rem}
  .board tr.grp td b{font-size:.62rem}
  .board tr.grp td em{font-size:.52rem}
  .board tr.cutline td:first-child::after{left:.7rem;font-size:.46rem}
}

@media(prefers-reduced-motion:reduce){
  .stage-lights i,.board tr.row,.board td.tot .bar::after,.qual{animation:none}
  .m,.pot li,.board .av{transition:none}
}