/* ═══════════════════════════════════════════════════════
   GLOBAL — La Juegoteca
   Shared styles: reset, screens, portal home,
   lobby/queue, shared components (buttons, overlay)
═══════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

.card-collecting {
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.65s ease-in !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #0a1a0f;
  color: #fff;
  height: 100vh;
  overflow: hidden;
}

/* ── Screen system ─────────────────────────────────── */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Back button (shared) ──────────────────────────── */
.btn-back {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #a0c0a0;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
  z-index: 5;
}
.btn-back:hover { background: rgba(255,255,255,0.14); color: #fff; }

.game-back,
.game-menu-wrap {
  top: 34px;
  z-index: 30;
}

.game-menu-wrap {
  position: absolute;
  left: 16px;
}
.game-menu-wrap .btn-back {
  position: static;
}
.game-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 132px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(7, 18, 11, 0.94);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.game-menu-wrap.open .game-menu-dropdown { display: flex; flex-direction: column; gap: 4px; }
.game-menu-dropdown button {
  background: transparent;
  border: 0;
  color: #d8ecd8;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}
.game-menu-dropdown button:hover { background: rgba(255,255,255,0.1); }
.rules-box { max-width: 560px; width: min(92vw, 560px); }
.rules-content {
  color: #c0e0c0;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
}
.rules-content ul { padding-left: 20px; margin-top: 10px; }
.rules-content li + li { margin-top: 6px; }
.abandon-box { max-width: 430px; }
.player-badge.abandoned,
.my-name-badge.abandoned {
  filter: grayscale(0.9) brightness(0.58);
  opacity: 0.72;
}

/* ═══════════════════════════════════════════════════════
   PORTAL HOME
═══════════════════════════════════════════════════════ */
#screen-home {
  background: radial-gradient(ellipse at 50% 30%, #1c4a2a 0%, #0a1a0f 65%);
  gap: 28px;
  padding: 32px 20px;
  overflow-y: auto;
  transition: background 0.5s ease;
}

/* ── Tema Juegos de Mesa (morado, estilo parchís) ── */
#screen-home.cat-mesa {
  background: radial-gradient(ellipse at 40% 30%, #2a1040 0%, #0e0618 75%);
}
#screen-home.cat-mesa .games-section-label {
  color: #9080b0;
  text-shadow: 0 0 16px rgba(200,160,255,0.2);
}
#screen-home.cat-mesa #btn-back-cat {
  border-color: rgba(200,160,255,0.25);
  color: #b090d0;
}
#screen-home.cat-mesa #btn-back-cat:hover { color: #e0d0ff; }
#screen-home.cat-mesa .portal-logo-wrap {
  border-color: #c8a0ff;
  box-shadow: 0 0 24px rgba(200,160,255,0.4), 2px 4px 10px rgba(0,0,0,0.5);
}
#screen-home.cat-mesa .portal-logo-card { color: #9050c0; }
#screen-home.cat-mesa .portal-title {
  color: #e0d0ff;
  text-shadow: 0 0 30px rgba(200,160,255,0.4), 2px 2px 0 #3a006a;
}
#screen-home.cat-mesa .portal-subtitle { color: #7060a0; }

/* Menú de usuario — violeta */
#screen-home.cat-mesa #user-menu-btn {
  color: #b090d0;
  border-color: rgba(200,160,255,0.2);
}
#screen-home.cat-mesa #btn-login-header,
body.theme-mesa #btn-login-header {
  color: #e0d0ff;
  border-color: rgba(200,160,255,0.24);
  background: rgba(200,160,255,0.08);
}
#screen-home.cat-mesa #user-menu-btn:hover,
#screen-home.cat-mesa #btn-login-header:hover,
body.theme-mesa #btn-login-header:hover {
  color: #fff;
  background: rgba(200,160,255,0.15);
}
#screen-home.cat-mesa #user-menu-dropdown {
  background: #1a0e2a;
  border-color: rgba(200,160,255,0.18);
}
#screen-home.cat-mesa #user-menu-dropdown button { color: #b090d0; }
#screen-home.cat-mesa #user-menu-dropdown button:hover { color: #e0d0ff; }
#screen-home.cat-mesa #user-menu-dropdown button + button {
  border-top-color: rgba(200,160,255,0.1);
}

/* Footer — violeta */
#screen-home.cat-mesa .footer-copyright { color: #4a3060; }
#screen-home.cat-mesa .footer-sep       { color: #4a3060; }
#screen-home.cat-mesa .footer-links a   { color: #8060a0; }
#screen-home.cat-mesa .footer-links a:hover { color: #d0b0ff; }

.portal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.portal-logo-wrap {
  width: 56px;
  height: 76px;
  background: #fff;
  border-radius: 8px;
  border: 3px solid #f0c040;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(240,192,64,0.4), 2px 4px 10px rgba(0,0,0,0.5);
  margin-bottom: 4px;
  transition: border-color 0.5s, box-shadow 0.5s;
}
.portal-logo-card {
  font-size: 2.4rem;
  font-weight: 900;
  color: #b07800;
  line-height: 1;
  transition: color 0.5s;
}

.portal-title {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: #f0c040;
  text-shadow: 0 0 30px rgba(240,192,64,0.4), 2px 2px 0 #7a5000;
  transition: color 0.5s, text-shadow 0.5s;
}

.portal-subtitle {
  font-size: 0.78rem;
  color: #709070;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  transition: color 0.5s;
}



/* Games section */
.games-section { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.games-section-label {
  font-size: 0.72rem;
  color: #607860;
  letter-spacing: 3px;
}
/* Categories section */
.categories-section { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.category-grid { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.category-card {
  width: 200px; height: 170px;
  background: linear-gradient(160deg, #1c5230 0%, #0d2e18 100%);
  border: 2px solid #2a6a3a;
  border-radius: 18px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 14px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  user-select: none;
}
.category-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: #f0c040;
  box-shadow: 0 18px 44px rgba(240,192,64,0.22), 0 6px 16px rgba(0,0,0,0.6);
}
.cat-icon { font-size: 2.8rem; line-height: 1; }
.cat-name {
  font-size: 0.9rem; font-weight: 800; color: #d8eed8;
  letter-spacing: 1px; text-align: center; text-transform: uppercase;
}
.cat-desc { font-size: 0.68rem; color: #6a9070; text-align: center; }

.btn {
  padding: 13px 44px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.1s, filter 0.1s;
  min-width: 250px;
}
.btn:hover  { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active { transform: translateY(0); }

.btn-primary    { background: linear-gradient(135deg, #f0c040, #c08000); color: #1a0a00; box-shadow: 0 4px 16px rgba(240,192,64,0.35); }
.btn-secondary  { background: linear-gradient(135deg, #2d7a4a, #1a5030); color: #e0ffe0; box-shadow: 0 4px 16px rgba(45,122,74,0.35); }
.btn-tertiary   { background: linear-gradient(135deg, #3a5a8a, #1a3060); color: #e0eeff; box-shadow: 0 4px 16px rgba(58,90,138,0.35); }
.btn-quaternary { background: linear-gradient(135deg, #7a3a9a, #3a1560); color: #f0e0ff; box-shadow: 0 4px 16px rgba(122,58,154,0.35); }
.btn-danger     { background: linear-gradient(135deg, #9a2828, #5a1414); color: #ffe0e0; }
.btn-sm        { padding: 9px 24px; font-size: 0.88rem; min-width: 130px; }

/* ═══════════════════════════════════════════════════════
   LOBBY SCREENS (sala privada + cola)
═══════════════════════════════════════════════════════ */
#screen-private-lobby,
#screen-queue {
  background: radial-gradient(ellipse at center, #1e4d2b 0%, #0d1f12 70%);
}

.lobby-box {
  background: rgba(0,0,0,0.32);
  border: 1px solid #2a5438;
  border-radius: 16px;
  padding: 28px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 320px;
}

.lobby-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f0c040;
  letter-spacing: 2px;
}

.lobby-hint {
  font-size: 0.74rem;
  color: #7a9a7a;
  letter-spacing: 1px;
  text-align: center;
}

#lobby-create-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.room-code-display {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 12px;
  color: #fff;
  background: rgba(240,192,64,0.12);
  border: 2px solid #f0c040;
  border-radius: 10px;
  padding: 8px 22px;
  margin: 8px 0 12px;
}

.queue-count {
  font-size: 2.6rem;
  font-weight: 900;
  color: #f0c040;
}

.players-list { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.player-slot {
  background: rgba(255,255,255,0.05);
  border: 1px solid #2a5438;
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 0.88rem;
  color: #80a080;
  text-align: center;
}
.player-slot.filled        { color: #d0ffd0; border-color: #4a9a5a; background: rgba(74,154,90,0.12); }
.player-slot.bot-slot      { color: #7a9a7a; border-color: #2a4a3a; font-style: italic; }

/* Selector de número de jugadores (sala privada) */
.player-count-selector { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn-pcount {
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 2px solid #2d5a3a;
  background: rgba(255,255,255,0.06);
  color: #a0c0a0;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-pcount:hover                    { border-color: #4a9a5a; color: #d0ffd0; }
.btn-pcount.active                   { border-color: #f0c040; color: #f0c040; background: rgba(240,192,64,0.12); }
.btn-pcount:disabled, .btn-pcount.pc-disabled {
  opacity: 0.25; cursor: not-allowed; pointer-events: none;
}

.waiting-text {
  color: #70907a;
  font-size: 0.8rem;
  letter-spacing: 1px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

.code-input {
  padding: 11px 18px;
  border-radius: 8px;
  border: 2px solid #2d7a4a;
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  width: 170px;
  letter-spacing: 6px;
  text-transform: uppercase;
  outline: none;
}
.code-input:focus { border-color: #f0c040; }

.error-msg { color: #ff6060; font-size: 0.84rem; min-height: 18px; }

/* ═══════════════════════════════════════════════════════
   OVERLAY GANADOR
═══════════════════════════════════════════════════════ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.overlay.active { display: flex; }

.overlay-box {
  background: linear-gradient(135deg, #1a4a2a, #0d2818);
  border: 3px solid #f0c040;
  border-radius: 20px;
  padding: 44px 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 0 60px rgba(240,192,64,0.35);
}
.overlay-title    { font-size: 2.6rem; font-weight: 900; color: #fff; letter-spacing: 4px; }
.overlay-subtitle { font-size: 1.2rem; color: #c0e0c0; }
.overlay-actions  { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ── Overlay de revancha ── */
.rematch-box { min-width: 320px; gap: 14px; }
.rematch-timer-wrap { text-align: center; }
.rematch-timer {
  font-size: 3.2rem; font-weight: 900; color: #f0c040;
  line-height: 1; text-shadow: 0 0 20px rgba(240,192,64,0.5);
  transition: color 0.4s;
}
.rematch-timer.urgent { color: #ff5050; }

.rematch-player-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.rematch-player-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s, border-color 0.3s;
}
.rematch-player-row.voted {
  background: rgba(40,130,65,0.3);
  border-color: rgba(80,200,100,0.3);
}
.rp-name   { font-size: 0.88rem; color: #d0ecd0; font-weight: 600; }
.rp-status { font-size: 0.78rem; }
.rematch-player-row.voted    .rp-status { color: #50d070; }
.rematch-player-row:not(.voted) .rp-status { color: #607860; }

#btn-rematch-yes:disabled { opacity: 0.6; cursor: default; transform: none; filter: none; }

/* ═══════════════════════════════════════════════════════
   MENÚ DE USUARIO (desplegable, esquina superior derecha)
═══════════════════════════════════════════════════════ */
#user-menu-wrap {
  position: absolute; top: 16px; right: 16px; z-index: 10;
}
#btn-login-header {
  position: absolute; top: 16px; right: 16px; z-index: 10;
}
#user-menu-btn,
#btn-login-header {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #a0c0a0; padding: 6px 14px;
  border-radius: 7px; cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.3px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
#user-menu-btn:hover,
#btn-login-header:hover { background: rgba(255,255,255,0.14); color: #fff; }
.user-menu-caret { font-size: 0.65rem; transition: transform 0.18s; display: inline-block; }
#user-menu-wrap.open .user-menu-caret { transform: rotate(180deg); }

#user-menu-dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #1a3020;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px; overflow: hidden; min-width: 158px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
#user-menu-wrap.open #user-menu-dropdown { display: block; }
#user-menu-dropdown button {
  display: block; width: 100%; padding: 10px 16px;
  background: none; border: none; color: #a0c0a0;
  text-align: left; cursor: pointer;
  font-size: 0.82rem; letter-spacing: 0.3px;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
#user-menu-dropdown button:hover { background: rgba(255,255,255,0.09); color: #fff; }
#user-menu-dropdown button + button { border-top: 1px solid rgba(255,255,255,0.07); }

/* ═══════════════════════════════════════════════════════
   OVERLAY DE PERFIL
═══════════════════════════════════════════════════════ */
.profile-box { min-width: 360px; gap: 18px; }
.profile-form-fields { display: flex; flex-direction: column; gap: 11px; width: 100%; }
.profile-field { display: flex; flex-direction: column; gap: 4px; }
.profile-field label { font-size: 0.67rem; color: #80a080; letter-spacing: 1px; }
.profile-field input {
  padding: 9px 13px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 6px;
  color: #e0e0e0; font-size: 0.88rem;
  outline: none; font-family: inherit;
}
.profile-field input:focus { border-color: rgba(255,255,255,0.35); }

/* ═══════════════════════════════════════════════════════
   LOGIN — REGISTRO Y OLVIDÉ CONTRASEÑA
═══════════════════════════════════════════════════════ */
.login-divider {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 2px 0;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.login-divider span {
  font-size: 0.63rem; color: #4a6050; letter-spacing: 1.5px; white-space: nowrap;
}
.btn-register {
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: #90b090;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-register:hover { background: rgba(255,255,255,0.12); color: #d0f0d0; border-color: rgba(255,255,255,0.28); }
.login-forgot {
  font-size: 0.72rem; color: #506050; text-decoration: none;
  letter-spacing: 0.5px; transition: color 0.15s;
  align-self: center;
}
.login-forgot:hover { color: #80a080; text-decoration: underline; }

/* ══════════════════════════════════════════
   FOOTER LEGAL (Login + Home)
══════════════════════════════════════════ */
#login-footer, #home-footer {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.footer-copyright {
  font-size: 0.6rem;
  color: #3a5a3a;
  letter-spacing: 0.4px;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
}
.footer-links a {
  color: #7a9a7a;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.15s;
}
.footer-links a:hover { color: #f0c040; }
.footer-sep { color: #3a5a3a; }

/* ══════════════════════════════════════════
   MODALES LEGALES
══════════════════════════════════════════ */
.legal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.legal-modal .modal-content {
  background: linear-gradient(160deg, #0f2e18 0%, #1a4a28 60%, #0d2015 100%);
  border: 2px solid rgba(240,192,64,0.45);
  border-radius: 14px;
  padding: 36px 40px;
  max-width: 540px;
  width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  box-shadow: 0 0 60px rgba(0,0,0,0.7), 0 0 28px rgba(240,192,64,0.1);
}
.legal-modal .modal-content h2 {
  font-size: 1rem;
  color: #f0c040;
  letter-spacing: 3px;
  margin: 0 0 20px;
  text-align: center;
  font-weight: 900;
}
.legal-modal .modal-content p {
  font-size: 0.82rem;
  color: #b8d4b8;
  line-height: 1.75;
  margin: 0 0 12px;
}
.legal-modal .modal-content strong { color: #ddeedd; }
.legal-modal .modal-content code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
  color: #a0e0a0;
}
.legal-modal .cerrar-modal {
  display: block;
  margin: 20px auto 0;
  padding: 9px 28px;
  background: linear-gradient(135deg, #2d7a4a, #1a5030);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 8px;
  color: #e0ffe8;
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter 0.15s;
}
.legal-modal .cerrar-modal:hover { filter: brightness(1.2); }
.legal-modal .modal-content::-webkit-scrollbar { width: 5px; }
.legal-modal .modal-content::-webkit-scrollbar-track { background: transparent; }
.legal-modal .modal-content::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,0.25);
  border-radius: 4px;
}

/* ══════════════════════════════════════════
   BANNER DE COOKIES
══════════════════════════════════════════ */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #0a1c10 0%, #122414 100%);
  border-top: 1px solid rgba(240,192,64,0.22);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 850;
  flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.55);
}
#cookie-banner p {
  margin: 0;
  font-size: 0.78rem;
  color: #8aaa8a;
  flex: 1;
  min-width: 200px;
  line-height: 1.5;
}
.cookie-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
#cookie-banner button {
  padding: 8px 22px;
  background: linear-gradient(135deg, #2d8a4a, #1a5030);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 6px;
  color: #e0ffe8;
  font-size: 0.8rem;
  font-family: inherit;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
#cookie-banner button:hover { filter: brightness(1.2); }

body.theme-mesa #cookie-banner {
  background: linear-gradient(90deg, #160824 0%, #26103c 100%);
  border-top-color: rgba(200,160,255,0.28);
}
body.theme-mesa #cookie-banner p {
  color: #b090d0;
}
body.theme-mesa #cookie-banner button {
  background: linear-gradient(135deg, #7a3a9a, #3a1560);
  border-color: rgba(200,160,255,0.36);
  color: #f0e6ff;
}

/* ══════════════════════════════════════════
   BOTÓN RANKING (Home)
══════════════════════════════════════════ */
#btn-ranking {
  margin-top: 6px;
  padding: 7px 20px;
  background: rgba(240,192,64,0.08);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 20px;
  color: #c8a030;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#btn-ranking:hover {
  background: rgba(240,192,64,0.18);
  color: #f0c040;
}

/* ══════════════════════════════════════════
   PANTALLA DE RANKING
══════════════════════════════════════════ */
.ranking-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 580px;
  padding: 64px 16px 80px;
  gap: 18px;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,192,64,0.2) transparent;
}
.ranking-wrap::-webkit-scrollbar { width: 5px; }
.ranking-wrap::-webkit-scrollbar-track { background: transparent; }
.ranking-wrap::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 4px; }

.ranking-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: #f0c040;
  text-align: center;
}

.ranking-tabs {
  display: flex;
  gap: 6px;
  width: min(100%, 430px);
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,192,64,0.25) transparent;
}
.ranking-tabs::-webkit-scrollbar { height: 5px; }
.ranking-tabs::-webkit-scrollbar-track { background: transparent; }
.ranking-tabs::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.25); border-radius: 4px; }
.rank-tab {
  flex: 0 0 118px;
  scroll-snap-align: start;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #7a9a7a;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
}
.rank-tab.active {
  background: linear-gradient(135deg, #2d7a4a, #1a5030);
  border-color: rgba(240,192,64,0.35);
  color: #e0ffe8;
}
.rank-tab:hover:not(.active) {
  background: rgba(255,255,255,0.09);
  color: #c0e0c0;
}

.ranking-table-wrap { width: 100%; }

.ranking-loading, .ranking-empty {
  text-align: center;
  padding: 36px 0;
  color: #507050;
  font-size: 0.82rem;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
}
.ranking-table th {
  font-size: 0.62rem;
  color: #507050;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.rank-col-pos  { width: 48px; text-align: center; }
.rank-col-elo, .rank-col-w, .rank-col-l { width: 56px; text-align: right; }
.ranking-table th.rank-col-elo,
.ranking-table th.rank-col-w,
.ranking-table th.rank-col-l  { text-align: right; }

.ranking-table td {
  padding: 9px 12px;
  font-size: 0.84rem;
  color: #a8c4a8;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ranking-table td.rank-col-pos  { text-align: center; }
.ranking-table td.rank-col-elo,
.ranking-table td.rank-col-w,
.ranking-table td.rank-col-l    { text-align: right; }

.ranking-table tr.rank-top1 td  { color: #f0c040; font-weight: 700; }
.ranking-table tr.rank-top2 td  { color: #c0c8d4; }
.ranking-table tr.rank-top3 td  { color: #c09a60; }
.ranking-table tr.rank-me   td  { background: rgba(45,120,75,0.22); color: #70e090; }
.ranking-table tr:last-child td { border-bottom: none; }

.rank-pos   { font-weight: 700; }
.rank-medal { font-size: 1.05rem; }

.ranking-my-row {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(90deg, rgba(45,120,75,0.16), rgba(45,120,75,0.07));
  border: 1px solid rgba(80,200,100,0.18);
  border-radius: 10px;
  font-size: 0.82rem;
  color: #70d090;
  text-align: center;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════
   RESPONSIVE MÓVIL
══════════════════════════════════════════ */
@media (max-width: 600px) {
  #screen-home {
    gap: 18px;
    padding: 72px 14px 16px;
    justify-content: center;
    min-height: 100dvh;
  }

  #screen-home .portal-header {
    margin-top: auto;
  }

  #screen-home .categories-section,
  #screen-home .games-section {
    margin-bottom: auto;
  }

  #screen-home .portal-logo-wrap {
    width: 48px;
    height: 64px;
    margin-bottom: 2px;
  }

  #screen-home .portal-logo-card {
    font-size: 2rem;
  }

  #screen-home .portal-title {
    font-size: 2rem;
    letter-spacing: 3px;
    text-align: center;
  }

  #screen-home .portal-subtitle {
    font-size: 0.66rem;
    letter-spacing: 2px;
    margin-bottom: 2px;
    text-align: center;
  }

  #user-menu-wrap,
  #btn-login-header {
    top: 12px;
    right: 12px;
  }

  #btn-login-header,
  #user-menu-btn {
    max-width: calc(100vw - 24px);
    padding: 6px 10px;
    font-size: 0.68rem;
    line-height: 1.15;
  }

  /* Footer sale del flujo absoluto para no pisar el contenido */
  #login-footer, #home-footer {
    position: static;
    margin-top: 0;
    padding-bottom: 16px;
    width: 100%;
  }

  .category-card {
    width: 150px;
    height: 140px;
    padding: 14px 10px;
  }
  .cat-icon { font-size: 2.2rem; }


  .category-grid { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════
   LOBBY — TEMAS POR JUEGO DE MESA
═══════════════════════════════════════════════════════ */

/* ── Parchís: fondo violeta de juegos de mesa ── */
#screen-private-lobby[data-game="parchis"] {
  background: radial-gradient(ellipse at center, #2a1040 0%, #0e0618 70%);
}

/* ── Parchís: borde de 4 colores con gradient border ── */
#screen-private-lobby[data-game="parchis"] .lobby-box {
  background: rgba(0,0,0,0.46) padding-box,
              conic-gradient(from 45deg, #e31837 0 25%, #007ac3 25% 50%, #fce100 50% 75%, #009640 75%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 48px rgba(0,0,0,0.55);
}
#screen-private-lobby[data-game="parchis"] .lobby-title    { color: #fff; }
#screen-private-lobby[data-game="parchis"] .lobby-hint     { color: #a8b8c8; }
#screen-private-lobby[data-game="parchis"] .waiting-text   { color: #8098b0; }
#screen-private-lobby[data-game="parchis"] .room-code-display {
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.07);
  color: #fff;
}
#screen-private-lobby[data-game="parchis"] .btn-pcount         { border-color: rgba(255,255,255,0.18); color: #b0c4d8; }
#screen-private-lobby[data-game="parchis"] .btn-pcount:hover   { border-color: rgba(255,255,255,0.5);  color: #fff; }
#screen-private-lobby[data-game="parchis"] .btn-pcount.active  { border-color: #fff; color: #fff; background: rgba(255,255,255,0.14); }
#screen-private-lobby[data-game="parchis"] .btn-back       { color: #c0a0e0; border-color: rgba(200,160,255,0.25); }
#screen-private-lobby[data-game="parchis"] .btn-back:hover { color: #e8d8ff; }

/* Slots coloreados por posición (= color asignado en Parchís) */
#screen-private-lobby[data-game="parchis"] .player-slot                  { border-color: rgba(255,255,255,0.1); }
#screen-private-lobby[data-game="parchis"] .player-slot:nth-child(1)     { border-color: rgba(200,32,48,0.6);  background: rgba(200,32,48,0.14);  color: #ffc0c6; }
#screen-private-lobby[data-game="parchis"] .player-slot:nth-child(2)     { border-color: rgba(0,116,184,0.65); background: rgba(0,116,184,0.15);  color: #aad8ff; }
#screen-private-lobby[data-game="parchis"] .player-slot:nth-child(3)     { border-color: rgba(200,160,0,0.6);  background: rgba(200,160,0,0.14);  color: #ffe870; }
#screen-private-lobby[data-game="parchis"] .player-slot:nth-child(4)     { border-color: rgba(0,150,64,0.65);  background: rgba(0,150,64,0.15);   color: #a0ffb8; }

/* ── Damas: fondo madera oscura ── */
#screen-private-lobby[data-game="damas"] {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(100,55,20,0.5) 0%, transparent 55%),
    linear-gradient(160deg, #2a170d 0%, #120905 62%, #070403 100%);
}

#screen-private-lobby[data-game="damas"] .btn-back       { color: #b87d46; border-color: rgba(184,125,70,0.3); }
#screen-private-lobby[data-game="damas"] .btn-back:hover { color: #e0c090; }

/* ── Damas: tema madera caoba ── */
#screen-private-lobby[data-game="damas"] .lobby-box {
  background: rgba(18,9,5,0.72);
  border-color: #b87d46;
  box-shadow: 0 0 40px rgba(184,125,70,0.22);
}
#screen-private-lobby[data-game="damas"] .lobby-title    { color: #e0c090; }
#screen-private-lobby[data-game="damas"] .lobby-hint     { color: #9a7a50; }
#screen-private-lobby[data-game="damas"] .waiting-text   { color: #7a5a38; }
#screen-private-lobby[data-game="damas"] .room-code-display {
  border-color: #b87d46;
  background: rgba(184,125,70,0.1);
  color: #f0d8a8;
}
#screen-private-lobby[data-game="damas"] .btn-pcount         { border-color: #4a2e18; color: #9a7a50; }
#screen-private-lobby[data-game="damas"] .btn-pcount:hover   { border-color: #b87d46; color: #e0c090; }
#screen-private-lobby[data-game="damas"] .btn-pcount.active  { border-color: #b87d46; color: #e0c090; background: rgba(184,125,70,0.15); }
#screen-private-lobby[data-game="damas"] .player-slot          { border-color: #2a1a0e; }
#screen-private-lobby[data-game="damas"] .player-slot.filled   { border-color: #b87d46; background: rgba(184,125,70,0.12); color: #f0d8a8; }
#screen-private-lobby[data-game="damas"] .player-slot.bot-slot { border-color: #4a2e18; color: #9a7a50; }

/* ── Reversi: fondo madera ámbar ── */
#screen-private-lobby[data-game="reversi"] {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(100,55,20,0.45) 0%, transparent 55%),
    linear-gradient(160deg, #1a0e06 0%, #0f0803 60%, #050302 100%);
}
#screen-private-lobby[data-game="reversi"] .btn-back       { color: #c8a050; border-color: rgba(166,124,0,0.35); }
#screen-private-lobby[data-game="reversi"] .btn-back:hover { color: #e8c361; }
#screen-private-lobby[data-game="reversi"] .lobby-box {
  background: rgba(15,8,3,0.78);
  border-color: #a67c00;
  box-shadow: 0 0 40px rgba(166,124,0,0.22);
}
#screen-private-lobby[data-game="reversi"] .lobby-title    { color: #e8d0a0; }
#screen-private-lobby[data-game="reversi"] .lobby-hint     { color: #8a6030; }
#screen-private-lobby[data-game="reversi"] .waiting-text   { color: #6a4820; }
#screen-private-lobby[data-game="reversi"] .room-code-display {
  border-color: #a67c00;
  background: rgba(166,124,0,0.1);
  color: #f0d898;
}
#screen-private-lobby[data-game="reversi"] .btn-pcount         { border-color: #3a2208; color: #7a5828; }
#screen-private-lobby[data-game="reversi"] .btn-pcount:hover   { border-color: #a67c00; color: #e8d0a0; }
#screen-private-lobby[data-game="reversi"] .btn-pcount.active  { border-color: #a67c00; color: #e8d0a0; background: rgba(166,124,0,0.15); }
#screen-private-lobby[data-game="reversi"] .player-slot          { border-color: #2a1a06; }
#screen-private-lobby[data-game="reversi"] .player-slot.filled   { border-color: #a67c00; background: rgba(166,124,0,0.12); color: #f0d898; }
#screen-private-lobby[data-game="reversi"] .player-slot.bot-slot { border-color: #3a2208; color: #7a5828; }

/* ═══════════════════════════════════════════════════════
   REVANCHA — TEMAS POR JUEGO DE MESA
═══════════════════════════════════════════════════════ */

/* ── Parchís: borde de 4 colores ── */
#overlay-rematch[data-game="parchis"] .overlay-box {
  background: linear-gradient(135deg, #12121e, #0a0a14) padding-box,
              conic-gradient(from 45deg, #e31837 0 25%, #007ac3 25% 50%, #fce100 50% 75%, #009640 75%) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
}
#overlay-rematch[data-game="parchis"] .overlay-title   { color: #fff; }
#overlay-rematch[data-game="parchis"] #rematch-winner-line { color: #b8c8d8; }
#overlay-rematch[data-game="parchis"] .rematch-timer   { color: #fff; text-shadow: 0 0 18px rgba(255,255,255,0.28); }
#overlay-rematch[data-game="parchis"] .rematch-player-row        { border-color: rgba(255,255,255,0.1); }
#overlay-rematch[data-game="parchis"] .rematch-player-row.voted  { background: rgba(0,150,64,0.22); border-color: rgba(0,200,90,0.3); }
#overlay-rematch[data-game="parchis"] .rp-name                   { color: #dce8f4; }
#overlay-rematch[data-game="parchis"] .rematch-player-row.voted .rp-status     { color: #50d870; }
#overlay-rematch[data-game="parchis"] .rematch-player-row:not(.voted) .rp-status { color: #6080a0; }

/* ── Damas: tema madera caoba ── */
#overlay-rematch[data-game="damas"] .overlay-box {
  background: linear-gradient(135deg, #2a1a0a, #120905);
  border-color: #b87d46;
  box-shadow: 0 0 60px rgba(184,125,70,0.28);
}
#overlay-rematch[data-game="damas"] .overlay-title   { color: #e0c090; }
#overlay-rematch[data-game="damas"] #rematch-winner-line { color: #9a7a50; }
#overlay-rematch[data-game="damas"] .rematch-timer   { color: #e0c090; text-shadow: 0 0 20px rgba(224,192,144,0.38); }
#overlay-rematch[data-game="damas"] .rematch-player-row        { border-color: rgba(184,125,70,0.2); background: rgba(184,125,70,0.04); }
#overlay-rematch[data-game="damas"] .rematch-player-row.voted  { background: rgba(184,125,70,0.2); border-color: rgba(224,192,144,0.3); }
#overlay-rematch[data-game="damas"] .rp-name                   { color: #d0b888; }
#overlay-rematch[data-game="damas"] .rematch-player-row.voted .rp-status     { color: #e0c090; }
#overlay-rematch[data-game="damas"] .rematch-player-row:not(.voted) .rp-status { color: #6a4a28; }

/* ═══════════════════════════════════════════════════════
   PALABRA SECRETA — LOBBY Y REVANCHA
═══════════════════════════════════════════════════════ */

#screen-private-lobby[data-game="palabrasecreta"] .btn-back       { color: #8ed8ee; border-color: rgba(120,210,240,0.28); }
#screen-private-lobby[data-game="palabrasecreta"] .btn-back:hover { color: #c8f4ff; }

/* ── Fondo de pantalla ── */
#screen-private-lobby[data-game="palabrasecreta"] {
  background: radial-gradient(ellipse at center, #0d2a36 0%, #06111a 70%);
}

/* ── Lobby box ── */
#screen-private-lobby[data-game="palabrasecreta"] .lobby-box {
  background: rgba(6,17,26,0.72);
  border-color: #4cb6d4;
  box-shadow: 0 0 40px rgba(76,182,212,0.18);
}
#screen-private-lobby[data-game="palabrasecreta"] .lobby-title    { color: #9ee7ff; }
#screen-private-lobby[data-game="palabrasecreta"] .lobby-hint     { color: #5a8898; }
#screen-private-lobby[data-game="palabrasecreta"] .waiting-text   { color: #3a6878; }
#screen-private-lobby[data-game="palabrasecreta"] .room-code-display {
  border-color: #4cb6d4;
  background: rgba(76,182,212,0.1);
  color: #c8f4ff;
}
#screen-private-lobby[data-game="palabrasecreta"] .btn-pcount         { border-color: #1a4a5a; color: #5a8898; }
#screen-private-lobby[data-game="palabrasecreta"] .btn-pcount:hover   { border-color: #4cb6d4; color: #9ee7ff; }
#screen-private-lobby[data-game="palabrasecreta"] .btn-pcount.active  { border-color: #4cb6d4; color: #9ee7ff; background: rgba(76,182,212,0.15); }
#screen-private-lobby[data-game="palabrasecreta"] .player-slot          { border-color: #102030; }
#screen-private-lobby[data-game="palabrasecreta"] .player-slot.filled   { border-color: rgba(76,182,212,0.5); background: rgba(76,182,212,0.1); color: #b8ecff; }
#screen-private-lobby[data-game="palabrasecreta"] .player-slot.bot-slot { border-color: #1a4a5a; color: #5a8898; }

/* ── Revancha ── */
#overlay-rematch[data-game="palabrasecreta"] .overlay-box {
  background: linear-gradient(135deg, #0a2030, #050d14);
  border-color: #4cb6d4;
  box-shadow: 0 0 60px rgba(76,182,212,0.22);
}
#overlay-rematch[data-game="palabrasecreta"] .overlay-title   { color: #9ee7ff; }
#overlay-rematch[data-game="palabrasecreta"] #rematch-winner-line { color: #5a8898; }
#overlay-rematch[data-game="palabrasecreta"] .rematch-timer   { color: #9ee7ff; text-shadow: 0 0 20px rgba(158,231,255,0.35); }
#overlay-rematch[data-game="palabrasecreta"] .rematch-player-row        { border-color: rgba(76,182,212,0.18); background: rgba(76,182,212,0.04); }
#overlay-rematch[data-game="palabrasecreta"] .rematch-player-row.voted  { background: rgba(76,182,212,0.18); border-color: rgba(158,231,255,0.3); }
#overlay-rematch[data-game="palabrasecreta"] .rp-name                   { color: #b0dcea; }
#overlay-rematch[data-game="palabrasecreta"] .rematch-player-row.voted .rp-status     { color: #9ee7ff; }
#overlay-rematch[data-game="palabrasecreta"] .rematch-player-row:not(.voted) .rp-status { color: #3a6878; }

/* ══════════════════════════════════════════════════════
   OVERLAY ABANDONAR POR JUEGO
   Técnica: sibling ~ (el game screen está .active
   mientras se juega y se muestra este overlay)
══════════════════════════════════════════════════════ */

/* ── Parchís ── */
#screen-parchis-game.active ~ #overlay-abandon-confirm .overlay-box {
  background: linear-gradient(135deg, #12121e, #0a0a14) padding-box,
              conic-gradient(from 45deg, #e31837 0 25%, #007ac3 25% 50%, #fce100 50% 75%, #009640 75%) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
}
#screen-parchis-game.active ~ #overlay-abandon-confirm .overlay-title    { color: #fff; }
#screen-parchis-game.active ~ #overlay-abandon-confirm .overlay-subtitle { color: #a0b8cc; }
#screen-parchis-game.active ~ #overlay-abandon-confirm .btn-secondary    { background: rgba(136,152,184,0.12); border: 1px solid rgba(136,152,184,0.45); color: #b8c8e0; box-shadow: none; }

/* ── Damas ── */
#screen-damas-game.active ~ #overlay-abandon-confirm .overlay-box {
  background: linear-gradient(135deg, #2a1a0a, #120905);
  border-color: #b87d46;
  box-shadow: 0 0 60px rgba(184,125,70,0.28);
}
#screen-damas-game.active ~ #overlay-abandon-confirm .overlay-title    { color: #e0c090; }
#screen-damas-game.active ~ #overlay-abandon-confirm .overlay-subtitle { color: #9a7a50; }
#screen-damas-game.active ~ #overlay-abandon-confirm .btn-secondary    { background: rgba(184,125,70,0.15); border: 1px solid rgba(184,125,70,0.5); color: #d4a870; box-shadow: none; }

/* ── Reversi ── */
#screen-reversi-game.active ~ #overlay-abandon-confirm .overlay-box {
  background: linear-gradient(145deg, rgba(70,42,22,0.98), rgba(24,13,7,0.98));
  border-color: #a67c00;
  box-shadow: 0 0 60px rgba(0,0,0,0.68), inset 0 0 18px rgba(0,0,0,0.55);
}
#screen-reversi-game.active ~ #overlay-abandon-confirm .overlay-title    { color: #f0d898; }
#screen-reversi-game.active ~ #overlay-abandon-confirm .overlay-subtitle { color: #c8a040; }
#screen-reversi-game.active ~ #overlay-abandon-confirm .btn-secondary    { background: rgba(166,124,0,0.15); border: 1px solid rgba(166,124,0,0.5); color: #c8a050; box-shadow: none; }

/* ── Palabra Secreta ── */
#screen-palabrasecreta-game.active ~ #overlay-abandon-confirm .overlay-box {
  background: linear-gradient(135deg, #0a2030, #050d14);
  border-color: #4cb6d4;
  box-shadow: 0 0 60px rgba(76,182,212,0.22);
}
#screen-palabrasecreta-game.active ~ #overlay-abandon-confirm .overlay-title    { color: #9ee7ff; }
#screen-palabrasecreta-game.active ~ #overlay-abandon-confirm .overlay-subtitle { color: #5a8898; }
#screen-palabrasecreta-game.active ~ #overlay-abandon-confirm .btn-secondary    { background: rgba(76,182,212,0.12); border: 1px solid rgba(76,182,212,0.45); color: #70c8e0; box-shadow: none; }

/* ══════════════════════════════════════════════════════
   OVERLAY 1 JUGADOR (data-game inyectado por JS)
   Se muestra desde el menú del juego, no desde la
   partida, por eso usamos [data-game] en vez de ~
══════════════════════════════════════════════════════ */

/* ── Parchís ── */
#overlay-single-choice[data-game="parchis"] .overlay-box {
  background: linear-gradient(135deg, #12121e, #0a0a14) padding-box,
              conic-gradient(from 45deg, #e31837 0 25%, #007ac3 25% 50%, #fce100 50% 75%, #009640 75%) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
}
#overlay-single-choice[data-game="parchis"] .overlay-title    { color: #fff; }
#overlay-single-choice[data-game="parchis"] .overlay-subtitle { color: #a0b8cc; }
#overlay-single-choice[data-game="parchis"] .btn-secondary    { background: rgba(136,152,184,0.12); border: 1px solid rgba(136,152,184,0.45); color: #b8c8e0; box-shadow: none; }

/* ── Damas ── */
#overlay-single-choice[data-game="damas"] .overlay-box {
  background: linear-gradient(135deg, #2a1a0a, #120905);
  border-color: #b87d46;
  box-shadow: 0 0 60px rgba(184,125,70,0.28);
}
#overlay-single-choice[data-game="damas"] .overlay-title    { color: #e0c090; }
#overlay-single-choice[data-game="damas"] .overlay-subtitle { color: #9a7a50; }
#overlay-single-choice[data-game="damas"] .btn-secondary    { background: rgba(184,125,70,0.15); border: 1px solid rgba(184,125,70,0.5); color: #d4a870; box-shadow: none; }

/* ── Reversi ── */
#overlay-single-choice[data-game="reversi"] .overlay-box {
  background: linear-gradient(145deg, rgba(70,42,22,0.98), rgba(24,13,7,0.98));
  border-color: #a67c00;
  box-shadow: 0 0 60px rgba(0,0,0,0.68), inset 0 0 18px rgba(0,0,0,0.55);
}
#overlay-single-choice[data-game="reversi"] .overlay-title    { color: #f0d898; }
#overlay-single-choice[data-game="reversi"] .overlay-subtitle { color: #c8a040; }
#overlay-single-choice[data-game="reversi"] .btn-secondary    { background: rgba(166,124,0,0.15); border: 1px solid rgba(166,124,0,0.5); color: #c8a050; box-shadow: none; }

/* ── Palabra Secreta ── */
#overlay-single-choice[data-game="palabrasecreta"] .overlay-box {
  background: linear-gradient(135deg, #0a2030, #050d14);
  border-color: #4cb6d4;
  box-shadow: 0 0 60px rgba(76,182,212,0.22);
}
#overlay-single-choice[data-game="palabrasecreta"] .overlay-title    { color: #9ee7ff; }
#overlay-single-choice[data-game="palabrasecreta"] .overlay-subtitle { color: #5a8898; }
#overlay-single-choice[data-game="palabrasecreta"] .btn-secondary    { background: rgba(76,182,212,0.12); border: 1px solid rgba(76,182,212,0.45); color: #70c8e0; box-shadow: none; }