/* Runekin · css/stats.css — EXPLORE · estatísticas (5i, retrato).
   Fatia do antigo style.css (linhas 751–777); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ STATISTICS (5i) — portrait, rendered by rogue.js ============ */
.rg-stats { position: relative; margin: calc(-56px - env(safe-area-inset-top)) -24px 0; padding: calc(56px + env(safe-area-inset-top)) 24px 80px; }
.rg-stats > .bs-slab { position: absolute; z-index: 0; }
.rg-stats > *:not(.bs-slab) { position: relative; z-index: 1; }
.st-head { height: 260px; }
.rg-stats .st-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; color: #fff; padding-top: 18px; }
.rg-stats .st-top b { display: block; font: 400 52px/.85 var(--display); }
.rg-stats .st-top b.gold { color: var(--c2); }
.rg-stats .st-top span { display: block; font: 400 12px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-ink); margin-top: 4px; }
.rg-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 60px; }
.rg-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 10px; border-bottom: 2px solid var(--ink); }
.rg-stat span { font: 400 11px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.rg-stat b { font: 400 22px/1 var(--display); }
.rg-ach-title { margin-top: 28px; }
.rg-ach-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.rg-ach { aspect-ratio: 1; border: 3px solid var(--paper-line); color: var(--paper-line); display: grid; place-items: center; padding: 0; }
.rg-ach.ok { background: var(--ink); border-color: var(--ink); color: #fff; }
.rg-ach .rg-ic { width: 60%; height: 60%; }
.rg-ach-txt, .rg-ach-tick { display: none; }
.st-next { margin-top: 20px; padding: 8px 14px; background: #fff; border: 3px solid var(--ink); }
.st-next .bs-label { color: var(--muted); display: block; }
.st-next b { display: block; font: 400 20px/1 var(--display); text-transform: uppercase; margin-top: 2px; }
.st-next small { display: block; font: 400 11px var(--body); color: var(--muted); margin-top: 4px; }
.st-foot { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: var(--ink); clip-path: var(--e-foot); max-width: 520px; margin: 0 auto; z-index: 40; pointer-events: none; }
body[data-screen="rogue"]:not(.rg-land) { background-color: var(--paper); background-image: var(--dots-paper); color: var(--ink); }
body[data-screen="rogue"]:not(.rg-land) .appbar { display: flex; }