/*
 * Ensiklopedia pembukaan (/pembukaan) — berkas terpisah dengan alasan yang sama seperti
 * blog.css: halaman ini dibaca dari atas ke bawah, bukan dipakai sambil bermain, dan
 * yang dikejar panjang baris yang nyaman serta tabel yang terbaca di layar ponsel.
 *
 * Tidak ada satu pun warna baru di sini: semuanya peubah dari app.css (--accent,
 * --line, --muted, --light-sq, --dark-sq), supaya halaman ini tidak diam-diam menjadi
 * pulau dengan hijau yang berbeda sendiri — termasuk ketika tema papan diganti.
 */

.ob-wrap { max-width: 920px; }
.ob-post h2 { margin: 30px 0 10px; font-size: 21px; }
.ob-post h3 { margin: 18px 0 6px; font-size: 16.5px; }
.ob-sec { margin: 26px 0; }

/* ------------------------------------------------------------------- papan ---- */

/*
 * Papan 8×8. `repeat(8, 1fr)` sengaja TIDAK dipakai: di lebar pecahan, 1fr membulatkan
 * tiap kolom sendiri-sendiri dan menyisakan garis rambut di antara petak (lihat catatan
 * geometri papan situs). `12.5%` membagi lebar yang sama persis ke delapan kolom.
 */
.ob-board {
  display: grid; grid-template-columns: repeat(8, 12.5%);
  width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px;
}
.ob-board i { position: relative; display: block; aspect-ratio: 1; }
.ob-board i.l { background: var(--light-sq, #eeeed2); }
.ob-board i.d { background: var(--dark-sq, #769656); }
.ob-board img { position: absolute; inset: 6%; width: 88%; height: 88%; }

.ob-hero-board { width: 248px; border-radius: 14px; overflow: hidden; }

/* ------------------------------------------------------------------ fakta ----- */

.ob-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 18px; margin: 4px 0 22px; padding: 16px 18px;
  background: var(--card, #fff); border: 1px solid var(--line, #e4ece7); border-radius: 14px;
}
.ob-facts dt {
  font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted, #6b7d73); margin: 0 0 3px;
}
.ob-facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.ob-moves, .ob-san { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ob-moves { font-size: 14px; font-weight: 600; letter-spacing: .2px; }

/* ------------------------------------------------------------------ hasil ----- */

.ob-bar {
  display: inline-flex; width: 100%; max-width: 420px; height: 14px;
  border-radius: 7px; overflow: hidden; background: var(--line, #e4ece7); vertical-align: middle;
}
.ob-bar b { display: block; height: 100%; }
.ob-bar b.w { background: #f0f2ef; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ob-bar b.d { background: #b9c6be; }
.ob-bar b.b { background: #2f3a33; }

.ob-results { display: grid; gap: 10px; }
.ob-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; font-size: 14px; }
.ob-legend b { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }
.ob-legend b.w { background: #f0f2ef; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ob-legend b.d { background: #b9c6be; }
.ob-legend b.b { background: #2f3a33; }

/* ------------------------------------------------------------------ tabel ----- */

/* Tabel pada lebar ponsel digeser ke samping, bukan dipadatkan sampai tak terbaca. */
.ob-table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  display: block; overflow-x: auto; white-space: nowrap;
}
.ob-table th, .ob-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line, #e4ece7); }
.ob-table th {
  font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted, #6b7d73); font-weight: 700;
}
.ob-table td.n, .ob-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.ob-table tbody tr:last-child td { border-bottom: 0; }
.ob-barcell { min-width: 190px; }
.ob-barcell .ob-bar { max-width: 120px; }
.ob-pct { margin-left: 8px; font-size: 12.5px; color: var(--muted, #6b7d73); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ daftar ---- */

.ob-links { list-style: none; margin: 0; padding: 0; }
.ob-links li { padding: 5px 0; border-bottom: 1px dashed var(--line, #e4ece7); }
.ob-links li:last-child { border-bottom: 0; }
.ob-links-wide { columns: 2; column-gap: 28px; }
.ob-links-wide li { break-inside: avoid; }

.ob-family { margin: 20px 0 26px; }
.ob-family h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }

.ob-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ob-players { list-style: none; margin: 0; padding: 0; }
.ob-players li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14.5px; }

/* ----------------------------------------------------------------- dekade ----- */

.ob-decades { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-decades li { display: grid; grid-template-columns: 74px 1fr 64px; align-items: center; gap: 10px; font-size: 14px; }
.ob-decades .bar { height: 10px; background: var(--line, #e4ece7); border-radius: 5px; overflow: hidden; }
.ob-decades .bar b { display: block; height: 100%; background: var(--accent, #146c43); }
.ob-decades .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted, #6b7d73); }

.ob-source { margin-top: 26px; }

@media (max-width: 720px) {
  .ob-hero-board { width: 100%; max-width: 320px; }
  .ob-links-wide { columns: 1; }
  .ob-cols { grid-template-columns: 1fr; }
}