/* -------------------------------------------------------------------------
   Papan peringkat minigames: SATU game di atas panggung, bergantian sendiri.

   Bentuknya mengikuti panel papan di hub (`minigames/style.css .showcase`), dan
   itu keputusan sadar: lima podium yang ditumpuk jadi satu halaman panjang
   terasa seperti lima tabel, bukan satu papan. Satu game, satu panggung, dengan
   tab untuk memilih sendiri dan tombol jeda untuk berhenti di satu game.

   Urutan BACA dan urutan LIHAT dipisah: `ol` tetap 1-2-3 di DOM (pembaca layar
   dan Tab tidak melompat), kolom tengah yang dapat `order` pertama.
   ------------------------------------------------------------------------- */

.lb-page { padding-top: 34px; }

.lb-season {
  margin: 0;
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- panel ---------- */

.lb-panel {
  position: relative;
  margin: 30px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(200, 162, 90, .1) 0%, rgba(200, 162, 90, 0) 62%),
    linear-gradient(180deg, rgba(24, 31, 39, .94) 0%, rgba(11, 16, 21, .97) 100%);
  box-shadow: var(--shadow-sm);
  /* Panggung: seni hero di kanan sengaja dipotong tepi panel, bukan meluber. */
  overflow: hidden;
}

/* Seni hero sebagai latar panggung. Satu gambar per game (`data-art` di tab),
   bukan gambar sama untuk semua: papan Item Memorize tidak perlu Invoker.
   `pointer-events: none` karena ini hiasan — tidak ada yang bisa diklik di sini.
   Mulainya DI BAWAH baris tab: kalau ikut masuk ke belakang label tab, nama game
   terakhir jadi tidak terbaca. */
.lb-art {
  position: absolute;
  top: 58px;
  right: -4%;
  width: min(58%, 620px);
  z-index: 0;
  pointer-events: none;
  /* Hilang ke kiri dan ke bawah supaya nama-nama di daftar tetap terbaca. */
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .55) 34%, #000 72%),
    linear-gradient(180deg, #000 0%, #000 46%, transparent 78%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .55) 34%, #000 72%),
    linear-gradient(180deg, #000 0%, #000 46%, transparent 78%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.lb-art img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .34;
  filter: saturate(.82) contrast(1.06) drop-shadow(0 22px 40px rgba(0, 0, 0, .6));
}

/* ---------- tab + jeda ---------- */

.lb-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px clamp(10px, 1.6vw, 18px) 0;
}

.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.lb-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nav-dim, #97a1ab);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.lb-tabs button img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 1px;
  opacity: .8;
}

.lb-tabs button:hover,
.lb-tabs button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .05);
}

.lb-tabs button[aria-selected="true"] {
  color: #fff;
  border-color: rgba(200, 162, 90, .45);
  background: linear-gradient(180deg, rgba(200, 162, 90, .16), rgba(200, 162, 90, .04));
}

.lb-tabs button[aria-selected="true"] img { opacity: 1; }

.lb-pause {
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.lb-pause:hover,
.lb-pause:focus-visible { color: #fff; border-color: var(--line-strong); }

/* Garis waktu: satu-satunya tanda bahwa panel akan berganti sendiri. */
.lb-timer {
  position: relative;
  z-index: 1;
  height: 2px;
  margin: 10px clamp(10px, 1.6vw, 18px) 0;
  background: rgba(43, 53, 64, .8);
  border-radius: 2px;
  overflow: hidden;
}

.lb-timer i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(200, 162, 90, .5), var(--amber));
  transition: width .2s linear;
}

/* ---------- isi ---------- */

.lb-body {
  position: relative;
  z-index: 1;
  padding: 6px clamp(14px, 2vw, 26px) 20px;
  /* Tinggi dasar supaya panel tidak melompat saat papan berganti dari 25 baris
     ke papan yang baru punya tiga pemain. */
  min-height: 430px;
}

.lb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
}

.lb-head h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}

.lb-play {
  flex: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(200, 162, 90, .38);
  transition: color .15s ease, border-color .15s ease;
}

.lb-play:hover,
.lb-play:focus-visible { color: #fff; border-color: #fff; }

.lb-state {
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--dim);
}

.lb-state.is-bad { color: var(--bad); }

/* ---------- podium ---------- */

.lb-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.4vw, 20px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* DOM 1-2-3, layar 2-1-3. */
.lb-step:nth-child(1) { order: 2; }
.lb-step:nth-child(2) { order: 1; }
.lb-step:nth-child(3) { order: 3; }

/* Garis panggung: menutup kaki ketiga balok jadi satu lantai. */
.lb-stage::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(200, 162, 90, 0), rgba(200, 162, 90, .55) 50%, rgba(200, 162, 90, 0));
  pointer-events: none;
}

.lb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lb-figure {
  position: relative;
  display: block;
  line-height: 0;
}

.lb-face {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #1a232c;
  border: 1px solid var(--line-strong);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  font-family: var(--font-title);
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}

.lb-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-step[data-place="1"] .lb-face {
  width: 80px;
  height: 80px;
  font-size: 26px;
  border-color: rgba(255, 200, 87, .6);
  box-shadow:
    0 0 0 2px rgba(255, 200, 87, .3),
    0 0 28px rgba(255, 190, 90, .28),
    0 10px 24px rgba(0, 0, 0, .55);
}

/* Bintang peringkat (assets/rank-medal.js) menggantung di atas foto. */
.lb-figure .board-medal {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
}

.lb-step[data-place="1"] .lb-figure .board-medal { width: 22px; height: 22px; top: -11px; }

.lb-name {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-step[data-place="1"] .lb-name { font-size: 15px; color: #fff; }

.lb-points {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--amber);
}

.lb-step[data-place="1"] .lb-points { font-size: 12px; color: #ffd58a; }

/* Balok podium: tinggi = peringkat, jadi tinggi balok itu sendiri pesannya. */
.lb-podium {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(58, 70, 84, .9) 0%, rgba(17, 23, 30, .97) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
  overflow: hidden;
}

.lb-step[data-place="1"] .lb-podium { height: clamp(118px, 12vw, 152px); }
.lb-step[data-place="2"] .lb-podium { height: clamp(86px, 9vw, 112px); }
.lb-step[data-place="3"] .lb-podium { height: clamp(70px, 7.4vw, 92px); }

.lb-step[data-place="1"] .lb-podium {
  border-color: rgba(200, 162, 90, .55);
  background: linear-gradient(180deg, rgba(104, 84, 46, .95) 0%, rgba(30, 25, 17, .98) 100%);
}

.lb-step[data-place="2"] .lb-podium { background: linear-gradient(180deg, rgba(84, 94, 106, .9) 0%, rgba(19, 24, 30, .97) 100%); }
.lb-step[data-place="3"] .lb-podium { background: linear-gradient(180deg, rgba(88, 62, 44, .9) 0%, rgba(21, 18, 16, .97) 100%); }

/* Sorotan dari bawah panggung ke balok juara. */
.lb-step[data-place="1"] .lb-podium::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -92px;
  height: 92px;
  background: radial-gradient(closest-side at 50% 100%, rgba(255, 214, 150, .34) 0%, rgba(255, 214, 150, 0) 100%);
  pointer-events: none;
}

.lb-place {
  font-family: var(--font-title);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  color: rgba(216, 223, 230, .42);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

.lb-step[data-place="1"] .lb-place { color: #f2cf86; }
.lb-step[data-place="2"] .lb-place { color: rgba(226, 233, 240, .68); }
.lb-step[data-place="3"] .lb-place { color: rgba(216, 168, 122, .72); }

/* ---------- peringkat 4-25 ---------- */

.lb-rest {
  column-count: 2;
  column-gap: clamp(20px, 3vw, 46px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.lb-rest li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-top: 1px solid rgba(43, 53, 64, .55);
  font-size: 13px;
  color: var(--text-soft);
  /* Baris tidak boleh dipotong di tengah oleh pindah kolom. */
  break-inside: avoid;
}

.lb-rest-place {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim);
}

.lb-rest-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-rest-name .rank-medal { width: 15px; height: 15px; }

.lb-rest-points {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Baris milik sendiri: dikenali tanpa harus membaca namanya. */
.is-me { background: linear-gradient(90deg, rgba(200, 162, 90, .13), rgba(200, 162, 90, 0)); }

.lb-you {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.lb-you strong { color: var(--amber); }

.lb-login {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.lb-login a { color: var(--amber); }

.lb-noscript { padding: 24px 0 40px; color: var(--muted); }

/* Teks yang hanya untuk pembaca layar ("Peringkat 1" sebelum namanya). */
.lb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lb-login[hidden] { display: none; }

@media (max-width: 760px) {
  .lb-art { width: 88%; top: -4%; right: -18%; }
  .lb-art img { opacity: .2; }
  .lb-body { padding-left: 12px; padding-right: 12px; min-height: 380px; }
  .lb-tabs button { font-size: 10px; letter-spacing: .08em; padding: 6px 8px; }
  .lb-tabs button img { width: 17px; height: 17px; }
  .lb-face { width: 46px; height: 46px; font-size: 18px; }
  .lb-step[data-place="1"] .lb-face { width: 62px; height: 62px; font-size: 22px; }
  .lb-name { font-size: 11.5px; }
  .lb-step[data-place="1"] .lb-name { font-size: 12.5px; }
  .lb-rest { column-count: 1; }
  .lb-rest li { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-play, .lb-tabs button { transition: none; }
  .lb-timer i { transition: none; }
}