/* ═══════════════════════════════════════════════════
   logIELTS — Bảng vàng (Badge of Honor)
   Gold/amber accent · Space Grotesk · Dark/Light via tokens
   Icon rendering (lgb-*) comes from shared/lg-badges.js; this file only
   lays out the page around it.
   ═══════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif;min-height:100vh;min-height:100dvh;margin:0}
main{display:block}

.wrap{max-width:860px;margin:0 auto;padding:18px 16px 60px}

/* ── Gate panel (login / error states) — mirrors leaderboard's ── */
.gate-panel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:34px 22px;text-align:center;margin-top:40px}
.gate-panel .gate-ic{font-size:2.4rem;margin-bottom:10px}
.gate-panel .gate-title{font-weight:700;font-size:1.15rem;margin-bottom:8px}
.gate-panel .gate-msg{color:var(--text2);font-size:.92rem;line-height:1.6;margin-bottom:16px}
.btn-gold{background:linear-gradient(135deg,#EAB308,#CA8A04);color:#1a1300;border:none;border-radius:var(--r2);padding:12px 20px;font-family:inherit;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.btn-gold:hover{opacity:.92}

/* ── Title row ── */
.bg-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 6px}
.bg-title{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;margin:0;letter-spacing:-.01em}
.bg-refresh-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surf2);color:var(--dim);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s,color .2s,border-color .2s;flex-shrink:0}
.bg-refresh-btn:hover{color:var(--text);border-color:var(--accent)}
.bg-refresh-btn.spinning{animation:bgSpin .7s linear}
@keyframes bgSpin{to{transform:rotate(360deg)}}
.bg-lead{margin:0 0 20px;font-size:.88rem;line-height:1.6;color:var(--text2)}

/* ── Section shell ── */
.bg-section{margin:0 0 30px}
.bg-h2{display:flex;align-items:baseline;gap:8px;font-size:1.1rem;font-weight:800;margin:0 0 12px}
.bg-h-ico{font-size:1.1rem}
.bg-h-sub{font-size:.78rem;font-weight:600;color:var(--dim)}

/* ── Bộ sưu tập: lưới 12 ô / năm ── */
.bg-year-block{margin:0 0 20px;background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 14px 16px}
.bg-year-hdr{font-weight:800;font-size:.92rem;color:var(--text);margin-bottom:12px}
.bg-year-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.bg-slot{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.bg-slot-icon{width:56px;height:56px}
.bg-slot-cap{font-size:.66rem;line-height:1.35;color:var(--text2);font-weight:600;max-width:84px}
.bg-slot-cap-empty{color:var(--dim);font-weight:500;opacity:.75}

/* ── Empty / info boxes ── */
.bg-empty{text-align:center;padding:34px 20px;color:var(--dim);font-size:.9rem;line-height:1.7;background:var(--surf);border:1px solid var(--border);border-radius:var(--r)}
.bg-empty-ic{font-size:2rem;margin-bottom:10px}
.bg-empty-title{font-weight:700;color:var(--text);margin-bottom:6px;font-size:.98rem}
.bg-empty-msg{max-width:480px;margin:0 auto;color:var(--text2)}

/* ── Bảng vàng (hall of fame) ── */
.bg-founder-note{background:var(--surf2);border:1px solid var(--border);border-left:4px solid #EAB308;border-radius:10px;padding:10px 13px;font-size:.82rem;line-height:1.55;color:var(--text2);margin-bottom:16px}
.bg-hof-sub{font-size:.86rem;font-weight:800;margin:18px 0 8px;color:var(--text)}
.bg-hof-sub:first-child{margin-top:0}
.bg-hof-list{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.bg-hof-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border)}
.bg-hof-list>.bg-hof-row:last-child{border-bottom:none}
.bg-hof-info{flex:1;min-width:0}
.bg-hof-name{font-weight:700;font-size:.9rem;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bg-hof-class{font-size:.68rem;font-weight:700;color:var(--dim);background:var(--surf2);border-radius:999px;padding:2px 8px}
.bg-hof-meta{font-size:.76rem;color:var(--dim);margin-top:2px}

/* ── Light mode card lift (mirrors leaderboard) ── */
[data-theme="light"] .gate-panel,
[data-theme="light"] .bg-year-block,
[data-theme="light"] .bg-empty,
[data-theme="light"] .bg-hof-list{
  box-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
}

/* ── Responsive ── */
@media(max-width:640px){
  .bg-year-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .bg-slot-icon{width:48px;height:48px}
}
@media(max-width:420px){
  .bg-title{font-size:1.3rem}
  .bg-year-grid{grid-template-columns:repeat(3,1fr)}
}