/**
 * smgr/css/pages/eltapado_ranking.css — clasificación de "El Tapado"
 * portada al chrome "Foco". Mismo recipe que masomenos_ranking.css.
 *   · :root sin scope; body{background} → .game-scope{background}.
 *   · Resto de selectores prefijados con ".game-scope ".
 *   · Reset de aislamiento (img, button). .logo-main eliminado (chrome clásico).
 */

/* ===== Variables del juego (globales, sin scope) ===== */
:root { --g-navy:#1e3a5f; --g-navy2:#2c5282; --g-orange:#ed8936; --g-ok:#16a34a; --g-border:#e2e8f0; --g-muted:#64748b; --g-ink:#0f172a; }

/* ===== Reset de aislamiento ===== */
.game-scope img { max-width: none; }
.game-scope button { font: inherit; }

.game-scope { background:#eef2f8; }

.game-scope .rk { max-width:760px; margin:20px auto 40px; padding:0 12px; font-family:Roboto, sans-serif; color:var(--g-ink); }
.game-scope .rk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:10px 0 16px; }
.game-scope .rk h1 { font-size:23px; color:var(--g-navy2); margin:0 0 4px; font-weight:700; }
.game-scope .rk h1 .wm { font-family:'Space Grotesk',sans-serif; } .game-scope .rk h1 .wm b { color:var(--g-orange); }
.game-scope .rk .intro { color:var(--g-muted); font-size:14px; margin:0; }
.game-scope .btn-play-top { white-space:nowrap; background:linear-gradient(135deg,var(--g-orange),#dd6b20); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:9px 14px; border-radius:10px; }
.game-scope .rk-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.game-scope .rk-tabs a { text-decoration:none; font-size:13.5px; font-weight:700; color:var(--g-navy2); background:#fff; border:1.5px solid var(--g-border); border-radius:999px; padding:7px 14px; }
.game-scope .rk-tabs a.active { background:var(--g-navy2); color:#fff; border-color:var(--g-navy2); }
.game-scope .rk-table { width:100%; background:#fff; border-collapse:collapse; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(15,23,42,.06); }
.game-scope .rk-table th { background:var(--g-navy2); color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:10px 14px; text-align:left; font-weight:500; }
.game-scope .rk-table td { font-size:15px; padding:10px 14px; border-bottom:1px solid #edf2f7; }
.game-scope .rk-table tr:last-child td { border-bottom:none; }
.game-scope .rk-table .rank { width:46px; color:#a0aec0; font-weight:500; }
.game-scope .rk-table .rank.t1 { color:#dd6b20; font-weight:700; } .game-scope .rk-table .rank.t2 { color:#a0aec0; font-weight:700; } .game-scope .rk-table .rank.t3 { color:#b7791f; font-weight:700; }
.game-scope .rk-table .sc { text-align:right; font-weight:700; color:var(--g-ok); font-size:18px; font-family:'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; }
.game-scope .rk-table .sc small { font-size:12px; color:var(--g-muted); font-weight:500; }
.game-scope .rk-table .sub { text-align:right; color:#718096; font-size:13px; font-variant-numeric:tabular-nums; }
.game-scope .rk-table tr.me td { background:#f0fdf4; font-weight:500; }
.game-scope .rk-table tbody tr { cursor:pointer; transition:background-color .12s; }
.game-scope .rk-table tbody tr:hover td { background:#f7fafc; } .game-scope .rk-table tbody tr.me:hover td { background:#dcfce7; }
.game-scope .guest-pill { font-size:10.5px; font-weight:700; color:#64748b; background:#eef2f7; border-radius:6px; padding:1px 6px; margin-left:4px; text-transform:uppercase; letter-spacing:.04em; }
.game-scope .rk-empty { text-align:center; padding:38px 20px; color:#a0aec0; background:#fff; border-radius:10px; }
.game-scope .my-rank { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:12px; padding:12px 16px; cursor:pointer; }
.game-scope .my-rank .t { font-size:14px; color:var(--g-ink); } .game-scope .my-rank .cta { white-space:nowrap; color:var(--g-ok); font-weight:700; font-size:13.5px; }
.game-scope .btn-back { display:inline-block; margin-top:18px; color:var(--g-navy2); text-decoration:none; font-weight:600; font-size:14px; }

/* modal */
.game-scope .pg-back { position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:14px; }
.game-scope .pg-back.pg-open { display:flex !important; }
.game-scope .pg-modal { background:#fff; border-radius:16px; width:100%; max-width:520px; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; }
.game-scope .pg-head { padding:18px 20px; border-bottom:1px solid var(--g-border); }
.game-scope .pg-head-top { display:flex; align-items:center; justify-content:space-between; }
.game-scope .pg-head h3 { margin:0; font-size:19px; font-weight:700; color:var(--g-navy2); }
.game-scope .pg-close { background:none; border:none; font-size:26px; line-height:1; color:#94a3b8; cursor:pointer; }
.game-scope .pg-sum { display:flex; gap:18px; margin-top:10px; }
.game-scope .pg-sum div { font-size:12px; color:var(--g-muted); } .game-scope .pg-sum div b { display:block; font-family:'Space Grotesk',sans-serif; font-size:20px; color:var(--g-ink); }
.game-scope .pg-body { padding:8px 14px 16px; overflow-y:auto; }
.game-scope .pg-loading { text-align:center; color:#a0aec0; padding:24px; }
.game-scope .pg-game { display:flex; align-items:center; gap:12px; padding:10px 8px; border-bottom:1px solid #f1f5f9; }
.game-scope .pg-game:last-child { border-bottom:none; }
.game-scope .pg-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.game-scope .pg-badge.libre { background:#dbeafe; color:var(--g-navy2); } .game-scope .pg-badge.diario { background:#fed7aa; color:#c2410c; }
.game-scope .pg-res { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; min-width:54px; text-align:center; }
.game-scope .pg-res.ok { color:var(--g-ok); } .game-scope .pg-res.no { color:#94a3b8; }
.game-scope .pg-when { flex:1; color:#718096; font-size:13px; }
.game-scope .pg-rep { color:var(--g-navy2); text-decoration:none; font-weight:700; font-size:13px; white-space:nowrap; }
@media (max-width:560px){ .game-scope .rk-table .sub { display:none; } .game-scope .rk-head { flex-direction:column; align-items:stretch; } }