:root {
  --bg:#0f1419; --card:#1a222d; --ink:#e8eef6; --muted:#93a4b8;
  --line:#2c3848; --brand:#22c55e; --brand2:#16a34a;
}
* { box-sizing: border-box; }
body {
  margin:0; min-height:100vh; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(900px 500px at 0% 0%, #163525 0%, transparent 50%), var(--bg);
  color: var(--ink); color-scheme: dark;
}
a { color: var(--brand); }
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.card {
  width:min(400px,100%); background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:26px 22px; box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.logo { font-size:2rem; margin-bottom:8px; }
.card h1 { margin:0 0 6px; font-size:1.4rem; }
.sub { margin:0 0 16px; color:var(--muted); font-size:.9rem; line-height:1.45; }
.errors { margin:0 0 12px; padding:10px 12px; list-style:none; background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35); border-radius:10px; color:#fecaca; font-size:.88rem; }
.tabs { display:flex; gap:6px; margin-bottom:14px; }
.tab { flex:1; padding:8px; border-radius:10px; border:1px solid var(--line); background:#243041; color:var(--ink); font-weight:700; cursor:pointer; }
.tab.on { background:var(--brand); color:#052e16; border-color:transparent; }
.form { display:flex; flex-direction:column; gap:12px; }
.form label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; font-weight:600; }
.form input {
  padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:#0f1419; color:var(--ink); font:inherit;
}
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  background:#243041; color:var(--ink); font-weight:700; cursor:pointer; text-decoration:none;
}
.btn.primary { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#052e16; border:0; }
.topbar {
  position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 16px; background:rgba(15,20,25,.92); border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.topbar .brand { font-weight:800; }
.topbar .meta { color:var(--muted); font-size:.85rem; }
.wrap { max-width:1100px; margin:0 auto; padding:16px; }
/* tokens usados por la UI del juego */
:root, html {
  --ink: #e8eef6; --muted: #93a4b8; --line: #2c3848; --surface: #1a222d;
  --surface-2: #243041; --brand: #22c55e; --bg: #0f1419; --radius: 12px;
}
.juego-btn { background:#243041 !important; color:var(--ink)!important; border:1px solid var(--line)!important; }
.juego-btn.primary { background:linear-gradient(135deg,var(--brand),var(--brand2))!important; color:#052e16!important; border:0!important; }
.lobby-card, .board-panel, .side-panel, .game-card {
  background: var(--surface)!important; border-color: var(--line)!important; color: var(--ink)!important;
}

/* Autenticación */
.auth-card { width:min(430px,100%); }
.register-card { width:min(760px,100%); }
.auth-logo { width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#052e16;font-size:1.9rem;font-weight:800;margin-bottom:14px; }
.auth-sep { text-align:center;color:var(--muted);font-size:.82rem;margin:18px 0 10px;position:relative; }
.auth-back { display:block;text-align:center;margin-top:14px;color:var(--muted);text-decoration:none;font-size:.9rem; }
.auth-back:hover { color:var(--ink); }
.character-builder { margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#121923; }
.builder-preview,.character-preview { display:grid;place-items:center;min-height:220px;border-radius:14px;background:linear-gradient(180deg,#f6f1e8,#fff);overflow:hidden; }
.preview-svg { width:190px;height:220px; }
.big-character { width:250px;height:290px; }
.gender-switch { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0; }
.gender-switch > span { margin-right:auto;font-weight:800; }
.gender-btn,.opt-tab,.choice,.preset { border:1px solid var(--line);background:#243041;color:var(--ink);border-radius:10px;padding:8px 11px;font:inherit;font-weight:700;cursor:pointer; }
.gender-btn:hover,.opt-tab:hover,.choice:hover,.preset:hover { filter:brightness(1.08); }
.gender-btn.active,.opt-tab.active { background:var(--brand);color:#052e16;border-color:transparent; }
.option-tabs { display:flex;gap:6px;overflow:auto;padding-bottom:7px; }
.opt-tab { white-space:nowrap;font-size:.82rem; }
.opt-panel { display:flex;gap:7px;flex-wrap:wrap;padding:10px 0 2px; }
.choice { display:inline-flex;align-items:center;gap:7px;font-size:.82rem; }
.skin-dot { width:25px;height:25px;border-radius:50%;display:inline-block;border:2px solid rgba(0,0,0,.15); }
.preset-line { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted); }
.preset { font-size:.78rem; }
.character-page { min-height:calc(100vh - 70px);display:grid;place-items:start center;padding:30px 16px; }
.character-card { width:min(650px,100%);background:var(--surface,#1a222d);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 16px 45px rgba(0,0,0,.28);text-align:center; }
.character-card .option-tabs,.character-card .opt-panel { justify-content:center; }
.character-card .gender-switch { justify-content:center; }
.character-card .gender-switch > span { flex:0 0 100%;margin:0 0 3px; }
.invitation-page { max-width:850px;margin:30px auto; }
.empty-invitations { padding:35px 15px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px; }
.inv-row { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line); }
.inv-row:first-of-type { border-top:0; }
@media(max-width:620px){ .card{padding:20px 16px}.register-card{width:100%}.option-tabs{justify-content:flex-start}.inv-row{align-items:flex-start;flex-direction:column}.inv-row .juego-btn{width:100%} }

/* ===== Acabado visual: navegación e invitaciones ===== */
.auth{background:radial-gradient(900px 500px at 15% 5%,rgba(34,197,94,.13),transparent 55%),radial-gradient(700px 500px at 90% 90%,rgba(59,130,246,.10),transparent 55%),var(--bg)}
.auth-card,.register-card{backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.38)}
.auth-logo{box-shadow:0 10px 25px rgba(34,197,94,.18)}
.form input:focus,.form select:focus{outline:none;border-color:#5b8def;box-shadow:0 0 0 4px rgba(91,141,239,.12)}
.topbar{min-height:58px}
.topbar .brand{display:flex;align-items:center;gap:8px;font-size:1.02rem}
.topbar .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topbar .meta a{padding:6px 9px;border-radius:8px;text-decoration:none;color:var(--muted);transition:.18s}
.topbar .meta a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.character-page{padding:34px 16px 60px}
.character-card{background:linear-gradient(180deg,rgba(30,41,55,.98),rgba(20,27,37,.98));border-color:rgba(148,163,184,.18);box-shadow:0 28px 70px rgba(0,0,0,.32)}
.character-card h1{margin:4px 0 5px;font-size:1.65rem;letter-spacing:-.03em}
.character-card .sub{margin-bottom:20px}
.character-preview,.builder-preview{min-height:330px;background:radial-gradient(circle at 50% 25%,#fff 0,#f5f0e8 55%,#e9e1d5 100%);border:1px solid rgba(15,23,42,.08);box-shadow:inset 0 -30px 60px rgba(0,0,0,.035)}
.big-character{width:310px;height:345px;filter:drop-shadow(0 15px 20px rgba(15,23,42,.14));transition:transform .25s ease}
.big-character:hover{transform:translateY(-3px) scale(1.01)}
.gender-switch{margin:18px 0 12px}
.gender-btn,.opt-tab,.choice,.preset{transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
.gender-btn:hover,.opt-tab:hover,.choice:hover,.preset:hover{transform:translateY(-1px)}
.gender-btn.active,.opt-tab.active{box-shadow:0 7px 18px rgba(34,197,94,.15)}
.option-tabs{padding:5px;background:rgba(15,23,42,.42);border:1px solid var(--line);border-radius:13px}
.opt-tab{border-color:transparent;background:transparent}
.opt-panel{min-height:56px;padding:12px 4px 8px}
.choice{background:rgba(36,48,65,.7)}
.choice:has(.skin-dot){padding:5px 9px}
.skin-dot{width:28px;height:28px;box-shadow:inset 0 1px 2px rgba(255,255,255,.25),0 2px 5px rgba(0,0,0,.16)}
.character-card #save-character{width:100%;margin-top:10px;padding:13px;border-radius:12px}
.invitation-page{max-width:900px;margin:34px auto;background:linear-gradient(180deg,rgba(26,34,45,.98),rgba(20,27,37,.98));box-shadow:0 24px 60px rgba(0,0,0,.25);border-color:rgba(148,163,184,.18)}
.invitation-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
.invitation-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.22);font-size:1.35rem}
.inv-row{padding:14px 16px;margin-bottom:10px;border-radius:14px;background:rgba(15,20,27,.72)!important;border-color:rgba(148,163,184,.13)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.inv-row:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(0,0,0,.14)!important;border-color:rgba(99,102,241,.38)!important}
.inv-user{display:flex;align-items:center;gap:11px}
.inv-avatar{width:40px;height:40px;border-radius:12px;overflow:hidden;background:#f5f0e8;display:grid;place-items:center;flex:none}
.inv-avatar svg{width:100%;height:100%}
.inv-actions{display:flex;gap:7px;align-items:center}
.empty-invitations{background:rgba(15,20,27,.45);border-style:solid;border-color:rgba(148,163,184,.12)}
@media(max-width:620px){.character-preview,.builder-preview{min-height:290px}.big-character{width:270px;height:300px}.topbar .meta{font-size:.78rem}.invitation-head{flex-direction:column}.inv-actions{width:100%}.inv-actions .juego-btn{flex:1}}
.character-card .gender-switch>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-right:2px}
.character-actions{margin-top:10px}
.choice.active{border-color:rgba(34,197,94,.8);background:rgba(34,197,94,.13);box-shadow:0 0 0 2px rgba(34,197,94,.10)}
.choice-dot,.choice-mark{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.15);flex:none}
.choice-mark{background:rgba(148,163,184,.08);font-size:.8rem;color:#94a3b8}
.eye-marrones{background:#654533}.eye-azules{background:#3977b9}.eye-verdes{background:#4e9467}.eye-negros{background:#17191c}
.hair-negro{background:#20242b}.hair-castano{background:#633b29}.hair-rubio{background:#d7ae57}.hair-pelirrojo{background:#a94d31}.hair-azul{background:#3c72c7}.hair-rosa{background:#cc5b91}

/* ===== Tema claro/oscuro y navegación refinada ===== */
html[data-theme="light"]{
  --bg:#f4f7fb;--surface:#ffffff;--surface-2:#f8fafc;--card:#ffffff;--ink:#172033;--muted:#667085;
  --line:#e4e8ef;--brand:#2563eb;--brand2:#1d4ed8;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0d1117;--surface:#151b23;--surface-2:#1c2531;--card:#151b23;--ink:#edf2f7;--muted:#9aa7b8;
  --line:#2b3645;--brand:#60a5fa;--brand2:#3b82f6;color-scheme:dark;
}
body{background:var(--bg);color:var(--ink);transition:background-color .2s,color .2s}
html[data-theme="light"] body{background:radial-gradient(900px 500px at 0% 0%,#e9f2ff 0%,transparent 52%),var(--bg)}
html[data-theme="dark"] body{background:radial-gradient(900px 500px at 0% 0%,#132438 0%,transparent 52%),var(--bg)}
.topbar{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line)}
.topbar .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.top-link{color:var(--muted);text-decoration:none}.top-link:hover{color:var(--ink)}
.theme-toggle{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--ink);cursor:pointer;font-size:1rem;display:inline-grid;place-items:center;transition:transform .15s,background .15s}
.theme-toggle:hover{transform:translateY(-1px);background:var(--surface)}
.theme-toggle.compact{width:34px;height:34px}
.nav-badge{display:inline-flex;min-width:19px;height:19px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;vertical-align:middle;margin-left:3px}
.auth-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.muted-inline{font-weight:400;color:var(--muted)}
html[data-theme="light"] .card{box-shadow:0 18px 50px rgba(15,23,42,.09)}
html[data-theme="light"] .card .form input{background:#fff;color:var(--ink);border-color:var(--line)}
html[data-theme="light"] .errors{color:#b42318;background:#fff1f0;border-color:#fecdca}
html[data-theme="light"] .btn{background:#fff;color:var(--ink);border-color:var(--line)}
html[data-theme="light"] .btn.primary{color:#fff}
html[data-theme="dark"] .btn.primary{color:#06101e}
html[data-theme="light"] .auth-logo{color:#fff}

/* estadísticas */
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat-box{background:var(--surface-2);border-color:var(--line);transition:transform .15s,border-color .15s}
.stat-box:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.stat-box strong{color:var(--ink)}
.stats-detail{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:8px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.stats-detail strong{color:var(--ink)}

/* invitaciones */
.invitation-page{background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 45px rgba(15,23,42,.08)}
.invitation-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}
.invitation-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);font-size:1.25rem}
.inv-row{padding:15px 0;border-top:1px solid var(--line);transition:background .15s}
.inv-row:hover{background:color-mix(in srgb,var(--brand) 4%,transparent)}
.inv-user{display:flex;align-items:center;gap:12px;min-width:0}.inv-user>div:last-child{min-width:0}
.inv-actions{display:flex;gap:7px;flex-shrink:0}
@media(max-width:620px){.invitation-head{align-items:flex-start;flex-direction:column}.topbar .meta{gap:8px}.theme-toggle.compact{width:32px;height:32px}}


/* ===== Corrección completa del modo claro =====
   Los estilos base de compatibilidad no deben imponer superficies oscuras.
   Estas reglas finales tienen prioridad cuando el tema es claro. */
html[data-theme="light"] .juego-btn,
html.theme-light .juego-btn{
  background:#ffffff !important;
  color:#1a1f28 !important;
  border:1px solid #d8dee8 !important;
}
html[data-theme="light"] .juego-btn:hover,
html.theme-light .juego-btn:hover{
  background:#f1f5f9 !important;
  color:#111827 !important;
  border-color:#c5cdd8 !important;
}
html[data-theme="light"] .juego-btn.primary,
html.theme-light .juego-btn.primary{
  background:linear-gradient(135deg,#5f73ef,#4f46e5) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
html[data-theme="light"] .juego-btn.danger,
html.theme-light .juego-btn.danger{
  background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
html[data-theme="light"] .inv-row,
html.theme-light .inv-row{
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
  color:#1a1f28 !important;
}
html[data-theme="light"] .inv-row:hover,
html.theme-light .inv-row:hover{
  background:#ffffff !important;
  border-color:#c7d2fe !important;
}
html[data-theme="light"] .lobby-card,
html[data-theme="light"] .board-panel,
html[data-theme="light"] .side-panel,
html.theme-light .lobby-card,
html.theme-light .board-panel,
html.theme-light .side-panel{
  background:#ffffff !important;
  color:#1a1f28 !important;
  border-color:#e2e8f0 !important;
}
html[data-theme="light"] .topbar,
html.theme-light .topbar{
  color:#1a1f28;
}
html[data-theme="light"] .theme-toggle,
html.theme-light .theme-toggle{
  background:#ffffff;
  color:#1a1f28;
  border-color:#d8dee8;
}

/* ===== Rediseño final de autenticación: claro/oscuro consistente ===== */
.auth{
  position:relative;
  overflow:auto;
  padding:32px 18px;
  background:
    radial-gradient(700px 420px at 10% 0%, color-mix(in srgb,var(--brand) 10%,transparent), transparent 65%),
    radial-gradient(600px 420px at 100% 100%, color-mix(in srgb,#6366f1 9%,transparent), transparent 65%),
    var(--bg);
}
.auth-card{
  width:min(440px,100%);
  padding:30px;
  border-radius:24px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(15,23,42,.12);
}
.auth-head{align-items:center;margin-bottom:20px}
.auth-logo{
  width:56px;height:56px;margin:0;border-radius:17px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff !important;
  box-shadow:0 10px 25px color-mix(in srgb,var(--brand) 22%,transparent);
  font-size:1.9rem;
}
.auth .theme-toggle{
  flex:0 0 auto;
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.auth-card h1{font-size:1.65rem;letter-spacing:-.025em;margin:0 0 8px;color:var(--ink)}
.auth-card .sub{font-size:.92rem;line-height:1.55;margin-bottom:22px}
.auth-card .form{gap:14px}
.auth-card .form label{color:var(--ink);font-size:.84rem}
.auth-card .form input{
  width:100%;min-height:46px;padding:12px 13px;margin-top:1px;
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:12px;
}
.auth-card .form input::placeholder{color:var(--muted)}
.auth-card .form input:focus{
  outline:none !important;
  border-color:var(--brand) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent) !important;
}
.auth-card .btn{
  width:100%;min-height:46px;
  border-radius:12px;
  font-weight:750;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.auth-card .btn:hover{transform:translateY(-1px)}
.auth-card .btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 20%,transparent);
}
.auth-card .btn.primary:hover{filter:brightness(1.04);box-shadow:0 13px 28px color-mix(in srgb,var(--brand) 25%,transparent)}
.auth-card .auth-sep{margin:22px 0 12px;color:var(--muted)}
.auth-card .auth-sep:before,.auth-card .auth-sep:after{
  content:"";position:absolute;top:50%;width:27%;height:1px;background:var(--line)
}
.auth-card .auth-sep:before{left:0}.auth-card .auth-sep:after{right:0}
.auth-card .auth-sep span{background:var(--surface);padding:0 10px;position:relative}
.auth-card a.btn:not(.primary){
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  box-shadow:none;
}
.auth-card a.btn:not(.primary):hover{
  background:color-mix(in srgb,var(--brand) 7%,var(--surface-2)) !important;
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line)) !important;
}
.auth-back{
  display:block;padding:12px 8px;margin-top:12px;
  color:var(--muted) !important;font-weight:650;border-radius:10px;
}
.auth-back:hover{background:var(--surface-2);color:var(--ink) !important}
html[data-theme="light"] .auth-card{box-shadow:0 25px 70px rgba(15,23,42,.12)}
html[data-theme="dark"] .auth-card{box-shadow:0 25px 70px rgba(0,0,0,.38)}
html[data-theme="dark"] .auth-card .form input{background:#10161f !important}
html[data-theme="dark"] .auth-card a.btn:not(.primary){background:#1b2430 !important}
@media(max-width:520px){
  .auth{padding:18px 12px}
  .auth-card{padding:24px 18px;border-radius:20px}
  .auth-card h1{font-size:1.45rem}
}

/* =========================================================
   REDISEÑO 2026 — lobby y experiencia de juego
   Inspirado en un panel de ajedrez moderno, sin cambiar la lógica.
   ========================================================= */
:root{
  --accent:#4f6df5;
  --accent-2:#3657df;
  --accent-soft:#eef2ff;
  --good:#16a36a;
  --warn:#f59e0b;
  --danger:#dc4b4b;
}
html[data-theme="light"]{
  --bg:#f3f6fb;--surface:#fff;--surface-2:#f7f9fc;--card:#fff;
  --ink:#172033;--muted:#697586;--line:#dfe5ee;
  --brand:#4f6df5;--brand2:#3657df;
}
html[data-theme="dark"]{
  --bg:#0b1220;--surface:#111a2a;--surface-2:#172235;--card:#111a2a;
  --ink:#eef3fb;--muted:#9aa9bd;--line:#27364c;
  --brand:#6d83ff;--brand2:#4f6df5;
}
.wrap{max-width:1280px;padding:24px 20px 42px}
.topbar{padding:12px 20px;box-shadow:0 1px 0 var(--line)}
.topbar .brand{font-size:1.08rem;letter-spacing:.01em}

/* Lobby hero */
.lobby-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 10px 35px rgba(15,23,42,.06)}
.lobby-hero h1{font-size:1.55rem;letter-spacing:-.03em}
.juego-sub{color:var(--muted);line-height:1.45}
.juego-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.juego-btn{min-height:38px;padding:9px 14px;border-radius:10px!important;background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important;font-weight:750;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s}
.juego-btn:hover{transform:translateY(-1px);border-color:#b8c3d3!important;background:var(--surface)!important}
.juego-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(79,109,245,.20)!important}
.juego-btn.danger{background:linear-gradient(135deg,#e45757,#c73737)!important;color:#fff!important;border-color:transparent!important}

/* Tabs */
.lobby-tabs{display:flex;gap:4px;padding:5px;margin-bottom:16px;border:1px solid var(--line);border-radius:13px;background:var(--surface);width:max-content;max-width:100%;box-shadow:0 4px 15px rgba(15,23,42,.04)}
.lobby-tab{border:0!important;background:transparent!important;color:var(--muted)!important;padding:9px 16px;border-radius:9px;font-weight:800;cursor:pointer;transition:.15s}
.lobby-tab:hover{color:var(--ink)!important;background:var(--surface-2)!important}
.lobby-tab.active{background:var(--accent-soft)!important;color:var(--accent-2)!important;box-shadow:none}
html[data-theme="dark"] .lobby-tab.active{background:rgba(109,131,255,.14)!important;color:#aebaff!important}

/* Cards / lists */
.lobby-card,.board-panel,.side-panel,.game-card{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:17px!important;box-shadow:0 8px 28px rgba(15,23,42,.055)!important}
.lobby-card{padding:20px}
.lobby-card h2,.lobby-card h3{letter-spacing:-.02em}
.rank-row,.sala-row,.torneo-row{border-color:var(--line)!important}
.rank-row{padding:13px 8px!important}
.rank-chip,.badge,.badge-estado{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:4px 8px;font-size:.75rem}

/* Crear sala: una sola línea en escritorio, agrupada lógicamente */
#seccion-crear{padding:22px 24px}
#seccion-crear>h3{margin:0 0 3px;font-size:1.1rem}
#seccion-crear>p{margin:0 0 16px;font-size:.82rem}
.crear-sala-grid{display:grid!important;grid-template-columns:minmax(150px,1.3fr) minmax(120px,.9fr) auto minmax(130px,.9fr) auto auto;gap:10px;align-items:end}
.crear-sala-grid .field{min-width:0}
.crear-sala-grid .field.full{grid-column:auto!important}
.field-label{display:block;margin-bottom:6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.055em;font-weight:850;color:var(--muted)}
.crear-sala-grid input,.crear-sala-grid select,.reloj-nums input,.torneo-reglas,#unirse-form input{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit;padding:9px 11px}
.crear-sala-grid input:focus,.crear-sala-grid select:focus,.reloj-nums input:focus,#unirse-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.12)}
.crear-check{display:flex!important;align-items:center;gap:7px;white-space:nowrap;font-size:.8rem!important;font-weight:700!important;color:var(--ink)!important;min-height:42px}
.crear-check input{accent-color:var(--accent);width:16px;height:16px}
.reloj-box{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.reloj-box>.sala-meta{margin:0 0 0 auto!important;font-size:.76rem;white-space:nowrap}
.presets{display:flex;gap:6px;align-items:center}
.preset-btn{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-weight:750;transition:.15s}
.preset-btn:hover{border-color:#aebbd0;transform:translateY(-1px)}
.preset-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
html[data-theme="dark"] .preset-btn.on{background:rgba(109,131,255,.14);color:#b5c0ff}
.reloj-nums{display:flex;gap:7px;align-items:center}
.reloj-nums label{font-size:.78rem;color:var(--muted);display:flex;gap:5px;align-items:center}
.reloj-nums input{width:65px;min-height:36px;padding:6px 8px}
#seccion-crear form>div:last-child{margin-top:12px!important}
#seccion-crear form>div:last-child .juego-btn{min-width:150px}

/* Sala + torneos + join */
.lobby-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.sala-row,.torneo-row{padding:13px 0!important;display:flex;align-items:center;justify-content:space-between;gap:14px}
.sala-row strong,.torneo-row strong{font-size:.92rem}
.form-row{display:flex;gap:10px;align-items:center}
.form-row input{flex:1}
#ajedrez-share-box{border-color:#eabf58!important;background:linear-gradient(180deg,var(--surface),var(--surface-2))!important}

/* Estadísticas */
.stats-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.stat-box{min-height:86px;padding:13px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:5px}
.stat-box strong{font-size:1.35rem;color:var(--ink);letter-spacing:-.03em}
.stat-box span{font-size:.75rem;color:var(--muted);font-weight:700}

/* Juego: estructura tipo dashboard */
.juego-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px 20px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:0 8px 28px rgba(15,23,42,.05)}
.juego-top h1{font-size:1.35rem;margin:0 0 3px}
.juego-main{display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:16px!important;align-items:start}
.board-panel{padding:14px!important}
.board-head{padding:2px 2px 10px!important}
.turn{font-weight:850!important;color:var(--ink)!important}
.status-banner{border-radius:10px!important}
.side-panel{padding:14px!important;gap:10px!important}
.player{border:1px solid var(--line)!important;border-radius:14px!important;background:var(--surface-2)!important;padding:13px!important;box-shadow:none!important}
.player-clock{border-radius:9px!important;padding:7px 9px!important;background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)}
.player-clock.active{background:#ecfdf5!important;color:#087f57!important;border-color:#b8e8d4!important}
.player-clock.low{background:#fff1f1!important;color:#c73535!important;border-color:#f2b6b6!important}
html[data-theme="dark"] .player-clock.active{background:#0e3024!important;color:#55d7a6!important;border-color:#205a46!important}
html[data-theme="dark"] .player-clock.low{background:#3a171c!important;color:#ff7777!important;border-color:#663038!important}
.info{color:var(--muted)!important}
.chat-card{border-top-color:var(--line)!important}
.chat{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--ink)!important}
.chat .comment-bubble{background:var(--surface)!important;border-color:var(--line)!important}
.chat .comment-user,.chat .comment-text{color:var(--ink)!important}
.chat-form input,.chat-emoji-btn{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}

/* Responsive */
@media(max-width:1050px){
  .crear-sala-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .crear-sala-grid .check-field{align-self:center}
  .reloj-box{flex-wrap:wrap}.reloj-box>.sala-meta{width:100%;margin:0!important}
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .juego-main{grid-template-columns:minmax(0,1fr) 290px!important}
}
@media(max-width:800px){
  .lobby-hero,.juego-top{align-items:flex-start;flex-direction:column}
  .lobby-grid,.juego-main{grid-template-columns:1fr!important}
  .side-panel{display:grid!important;grid-template-columns:1fr 1fr}
  .side-panel>.chat-card{grid-column:1/-1}
  .crear-sala-grid{grid-template-columns:1fr 1fr!important}
  .crear-sala-grid .field.full{grid-column:1/-1!important}
}
@media(max-width:560px){
  .wrap{padding:12px 10px 30px}.lobby-hero,.juego-top{padding:16px}.lobby-card{padding:15px}
  .lobby-tabs{width:100%;overflow:auto}.lobby-tab{flex:1;white-space:nowrap;padding:8px 11px}
  .crear-sala-grid,.stats-grid{grid-template-columns:1fr!important}
  .reloj-box{align-items:flex-start;flex-direction:column}.presets{flex-wrap:wrap}
  .form-row{flex-direction:column;align-items:stretch}.form-row .juego-btn{width:100%}
  .side-panel{display:flex!important}
}


/* Resumen compacto de rendimiento, visible sin abrir Estadísticas */
.quick-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:0 0 16px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--line);box-shadow:0 5px 20px rgba(15,23,42,.04)}
.quick-stats>div{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:3px;text-align:center}
.quick-stats strong{font-size:1.12rem;letter-spacing:-.02em}.quick-stats span{font-size:.7rem;color:var(--muted);font-weight:750}
html[data-theme="dark"] .quick-stats>div{background:var(--surface)}
@media(max-width:900px){.quick-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.quick-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.profile-avatar{object-fit:cover;object-position:center center;}


/* ===== Perfil v8: crop, seguidores y avatares ===== */
.profile-avatar{object-fit:cover;object-position:center;width:42px;height:42px;border-radius:50%;display:block;background:var(--surface-2)}
.profile-avatar.lg{width:104px;height:104px;border-radius:24px}
.avatar-default-img{object-fit:cover}
.profile-avatar-wrap{flex:none}/* legacy metrics strip removed */.profile-followers{margin:16px 0}.follow-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.follow-user{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--surface-2);font-weight:750}.follow-user:hover{border-color:#7c8ff5;transform:translateY(-1px)}
.crop-layout{display:grid;grid-template-columns:minmax(280px,320px) 1fr;gap:18px;align-items:start}.crop-stage{width:320px;height:320px;max-width:100%;border-radius:18px;overflow:hidden;position:relative;background:var(--surface-2);border:1px solid var(--line);touch-action:none;cursor:grab}.crop-stage:active{cursor:grabbing}.crop-stage canvas{width:100%;height:100%;display:block}.crop-stage:after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none}.crop-help{position:absolute;left:10px;right:10px;bottom:10px;padding:7px 9px;border-radius:9px;background:rgba(0,0,0,.58);color:#fff;text-align:center;font-size:.75rem;pointer-events:none}.crop-controls{display:flex;flex-direction:column;gap:12px}.crop-controls input[type=range]{width:100%}.file-picker{display:block;padding:11px 13px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);font-weight:750;cursor:pointer}.file-picker input{display:none}
/* ===== Administración v8 ===== */
.admin-section{margin-top:16px;padding:18px}.admin-create-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.admin-create-grid label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:750;color:var(--muted)}.admin-create-grid input,.admin-create-grid select,.admin-create-grid textarea{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit}.admin-create-grid .full{grid-column:1/-1}.admin-table{display:flex;flex-direction:column;gap:8px}.admin-user,.admin-row{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(80px,auto) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.admin-user-id{display:flex;align-items:center;gap:10px}.admin-user-id>div{display:flex;flex-direction:column;gap:2px}.admin-user-id span{font-size:.75rem;color:var(--muted)}.admin-nick{font-weight:800;color:var(--ink);text-decoration:none}.admin-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.7rem;font-weight:800;color:var(--muted)}.badge.admin{color:#7c3aed;background:#f5f3ff;border-color:#ddd6fe}.badge.ok{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.badge.danger{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.admin-search{display:flex;gap:7px}.admin-search input{min-width:240px}.invitation-nav{position:relative}.invitation-nav .nav-badge{margin-left:3px}.inv-pulse{animation:invPulse .7s ease}.nav-badge{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800}.nav-badge[hidden]{display:none}@keyframes invPulse{0%{transform:scale(1)}35%{transform:scale(1.08)}70%{transform:scale(.98)}100%{transform:scale(1)}}
@media(max-width:900px){.profile-metrics{grid-template-columns:repeat(3,1fr)}.admin-create-grid{grid-template-columns:repeat(2,1fr)}.admin-user,.admin-row{grid-template-columns:1fr auto}.admin-actions{grid-column:1/-1;justify-content:flex-start}.crop-layout{grid-template-columns:1fr}.crop-stage{margin:auto}}
@media(max-width:560px){.profile-identity{align-items:flex-start}.profile-avatar.lg{width:82px;height:82px}.profile-metrics{grid-template-columns:repeat(2,1fr)}.follow-list{grid-template-columns:1fr}.admin-create-grid{grid-template-columns:1fr}.admin-search{width:100%;flex-direction:column}.admin-search input{min-width:0}.admin-row{grid-template-columns:1fr}.crop-stage{width:290px;height:290px}}

/* ===== v10: lobby social / connected players / guide polish ===== */
.online-card{margin:16px 0}.online-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.online-list{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}.online-user{min-width:178px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);background:var(--surface-2);border-radius:15px;text-decoration:none;color:var(--ink);transition:.18s ease}.online-user:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 50%,var(--line));box-shadow:0 8px 20px rgba(15,23,42,.08)}.online-user .profile-avatar{width:42px;height:42px;flex:0 0 42px}.online-user-info{min-width:0;flex:1}.online-user-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.online-user-info small{display:block;color:#22a06b;font-weight:700;font-size:.72rem;margin-top:2px}.online-challenge{border:0;border-radius:9px;padding:7px 9px;background:var(--brand);color:#fff;font-weight:800;cursor:pointer;white-space:nowrap}.online-challenge:hover{filter:brightness(.95)}.online-me{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 35%,transparent)}
.guide-hero{position:relative;overflow:hidden}.guide-hero:after{content:'♞';position:absolute;right:28px;bottom:-30px;font-size:150px;opacity:.06;line-height:1}.guide-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}.guide-card{grid-column:span 6;min-height:100%;transition:transform .18s ease,box-shadow .18s ease}.guide-card:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(15,23,42,.08)}.guide-card.full{grid-column:1/-1}.piece-grid{grid-template-columns:repeat(3,1fr)}.piece{min-height:92px;display:flex;flex-direction:column;justify-content:center}.piece strong{font-size:1rem}.guide-nav a{transition:.15s ease}.guide-nav a:hover{border-color:var(--brand);color:var(--brand)}.guide-card h2{display:flex;align-items:center;gap:8px}.guide-card h3{color:var(--ink)}
@media(max-width:900px){.guide-card{grid-column:1/-1}.piece-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.online-user{min-width:160px}.piece-grid{grid-template-columns:1fr}.guide-hero{padding:22px}.guide-hero:after{display:none}}
/* Guide visual hierarchy v10 */
.guide .guide-card{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--surface-2)));border-radius:20px}.guide .guide-card p{font-size:.94rem}.guide .tip{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent)}.guide .check{display:flex;align-items:center;gap:8px;min-height:52px}/* piece:before removed — cada carta ya tiene su símbolo */.guide .guide-nav{box-shadow:0 8px 20px rgba(15,23,42,.04)}

/* v15 — iconografía plana y UI compacta */
.flat-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:0;vertical-align:-3px}
.flat-icon svg{width:100%;height:100%;display:block}
.top-link .flat-icon{margin-right:3px}
.lobby-card,.board-panel,.side-panel{box-shadow:0 8px 24px rgba(15,23,42,.06)}
.lobby-card h2,.lobby-card h3{margin-bottom:8px}
.juego-page{max-width:1180px;margin-inline:auto}
@media(min-width:951px){.juego-main{gap:12px}.side-panel{gap:8px}.chat{height:220px!important}.lobby-grid{gap:10px!important}}
@media(max-width:700px){.wrap{padding:10px}.topbar{padding:8px 10px}.topbar .top-link span:not(.nav-badge){display:none}.topbar .top-profile span{display:none}.juego-actions{flex-wrap:wrap}.lobby-hero{gap:8px!important}.online-user{padding:7px 8px!important}}

/* v16 — perfiles y jugadores conectados: render estable */
.online-list{min-height:58px;align-items:stretch}
.online-user{flex:0 0 220px;min-width:220px;box-sizing:border-box}
.online-user-link{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none}
.online-user-link .profile-avatar{width:44px;height:44px;min-width:44px;object-fit:cover;object-position:center;border-radius:50%;background:var(--surface-2)}
.online-user-info strong{font-weight:850}
.online-empty{display:flex;align-items:center;min-height:50px}
.crop-stage{user-select:none;-webkit-user-select:none}
.crop-stage canvas{touch-action:none}
@media(max-width:560px){.online-user{flex-basis:205px;min-width:205px}.online-list{padding-bottom:6px}}

/* v17 — editor de perfil en modal */
body.modal-open{overflow:hidden}
.profile-edit-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0}
.profile-edit-actions h2{margin:0 0 3px}
.profile-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px}
.profile-modal[hidden]{display:none}
.profile-modal-backdrop{position:absolute;inset:0;background:rgba(7,12,22,.62);backdrop-filter:blur(4px)}
.profile-modal-card{position:relative;width:min(760px,100%);max-height:min(92vh,760px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:20px}
.modal-close{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.crop-modal-layout{display:grid;grid-template-columns:minmax(256px,320px) 1fr;gap:20px;align-items:center;margin:8px 0 18px}
.crop-stage{width:320px;height:320px;max-width:100%;margin:auto;border-radius:18px;overflow:hidden;position:relative;background:var(--surface-2);border:1px solid var(--line);touch-action:none;cursor:grab;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.crop-stage:active{cursor:grabbing}.crop-stage canvas{width:100%;height:100%;display:block}.crop-stage:after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.28);pointer-events:none}
.crop-help{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff;text-align:center;font-size:.75rem;pointer-events:none}
.crop-controls{display:flex;flex-direction:column;gap:12px}.crop-controls input[type=range]{width:100%}.crop-range-label{display:grid;gap:7px}.crop-range-label output{font-weight:800;color:var(--muted)}.crop-status{margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:700px){.profile-modal{padding:8px}.profile-modal-card{padding:14px;border-radius:18px;max-height:96vh}.crop-modal-layout{grid-template-columns:1fr}.crop-stage{width:min(320px,calc(100vw - 48px));height:min(320px,calc(100vw - 48px))}.profile-edit-actions{padding:14px}}

/* ========== v18 — Menú de usuario + perfiles modernos ========== */
.topbar .brand { text-decoration: none; color: inherit; font-weight: 800; letter-spacing: -.02em; }
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); cursor: pointer; font: inherit; font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.user-menu-trigger:hover, .user-menu.open .user-menu-trigger {
  background: var(--surface); border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.user-menu-trigger .profile-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.user-menu-nick { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.user-menu-caret { font-size: .65rem; opacity: .55; margin-left: 2px; }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
  width: min(300px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.22);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  animation: menuIn .16s ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.user-menu-dropdown[hidden] { display: none; }
.user-menu-head {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.user-menu-head .profile-avatar, .user-menu-head .profile-avatar.lg {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
}
.user-menu-head strong { display: block; font-size: .95rem; }
.user-menu-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.user-menu-dropdown a:hover { background: var(--surface-2); }
.user-menu-admin { color: var(--brand) !important; }
.user-menu-danger { color: #f87171 !important; }
.user-menu-sep { height: 1px; background: var(--line); margin: 4px 8px; }
@media (max-width: 640px) {
  .user-menu-nick { display: none; }
  .top-nav-hide-sm { display: none !important; }
  .top-nav-hide-xs { display: none !important; }
}

/* ---- Perfil moderno ---- */
.profile-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}
.profile-hero.lobby-card,
.profile-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  border-radius: 24px !important;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}
.profile-banner {
  display: block !important;
  width: 100% !important;
  height: 148px !important;
  min-height: 148px;
  flex: none !important;
  background:
    radial-gradient(ellipse 90% 140% at 15% -10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(125deg, #0d9488 0%, #2563eb 45%, #7c3aed 100%) !important;
  position: relative;
}
.profile-banner::after {
  content: "♟";
  position: absolute;
  right: 28px;
  bottom: -8px;
  font-size: 7rem;
  opacity: .12;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
html[data-theme="dark"] .profile-banner {
  background:
    radial-gradient(ellipse 90% 140% at 15% -10%, rgba(255,255,255,.15), transparent 50%),
    linear-gradient(125deg, #0f766e 0%, #1e40af 45%, #6d28d9 100%) !important;
}
.profile-hero-body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px 24px !important;
  margin-top: -52px !important;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}
.profile-identity {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex: 1;
  min-width: 240px;
}
.profile-avatar-wrap {
  flex-shrink: 0;
}
.profile-avatar-wrap .profile-avatar.lg {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--surface);
  box-shadow:
    0 0 0 1px var(--line),
    0 12px 28px rgba(0,0,0,.18);
  background: var(--surface-2);
  display: block;
}
.profile-identity-text {
  padding-bottom: 6px;
  min-width: 0;
}
.profile-nick {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.profile-nick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-bio {
  margin: 8px 0 0;
  max-width: 420px;
  line-height: 1.5;
  color: var(--muted);
  font-size: .95rem;
}
.profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.profile-actions .juego-btn.primary {
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent);
}
.badge-admin {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-banned {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.28);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}

/* Métricas tipo "stats strip" */
.profile-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 18px 0 20px;
}
.profile-metrics > * {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 12px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.profile-metrics button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
}
.profile-metrics > *:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}
.profile-metrics strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.profile-metrics span {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 800px) {
  .profile-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .profile-metrics { grid-template-columns: repeat(2, 1fr); }
  .profile-avatar-wrap .profile-avatar.lg { width: 88px; height: 88px; }
  .profile-nick { font-size: 1.4rem; }
  .profile-banner { height: 100px; }
  .profile-hero-body { margin-top: -36px; padding: 0 16px 18px; }
}

/* Grid de contenido */
.profile-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .profile-grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
  .profile-matches-card { grid-column: 1 / -1; }
}
.profile-stats-card,
.profile-matches-card,
#follow-panel {
  border-radius: 20px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}
.profile-stats-card h2,
.profile-matches-card h2,
#follow-panel h2 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.profile-stats-grid .stat-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  transition: transform .15s, border-color .15s;
}
.profile-stats-grid .stat-box:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.profile-stats-grid .stat-box strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 2px;
}
.profile-stats-grid .stat-box span {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
}
.stat-box.win strong { color: #16a34a; }
.stat-box.loss strong { color: #dc2626; }
.stat-box.draw strong { color: #d97706; }
html[data-theme="dark"] .stat-box.win strong { color: #4ade80; }
html[data-theme="dark"] .stat-box.loss strong { color: #f87171; }
html[data-theme="dark"] .stat-box.draw strong { color: #fbbf24; }

.color-stats {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}
.color-stat-label {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: .88rem;
}
.color-stat-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--line);
}
.color-stat-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #cbd5e1, #64748b);
  min-width: 0;
  transition: width .4s ease;
}
.color-stat-bar.dark span {
  background: linear-gradient(90deg, #475569, #0f172a);
}
html[data-theme="light"] .color-stat-bar.dark span {
  background: linear-gradient(90deg, #64748b, #1e293b);
}

/* Enfrentamientos */
.match-list { display: flex; flex-direction: column; gap: 8px; }
.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.match-row:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
.match-rival { display: flex; align-items: center; gap: 12px; min-width: 0; }
.match-rival .profile-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.match-rival strong { display: block; font-size: .92rem; }
.result-pill {
  font-size: .75rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.result-pill.victoria {
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, .28);
}
.result-pill.derrota {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
  border-color: rgba(239, 68, 68, .25);
}
.result-pill.tablas {
  background: rgba(245, 158, 11, .12);
  color: #d97706;
  border-color: rgba(245, 158, 11, .28);
}
html[data-theme="dark"] .result-pill.victoria { color: #4ade80; }
html[data-theme="dark"] .result-pill.derrota { color: #f87171; }
html[data-theme="dark"] .result-pill.tablas { color: #fbbf24; }

.follow-list { display: flex; flex-wrap: wrap; gap: 10px; }
.follow-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface-2);
  text-decoration: none; color: inherit; font-weight: 600;
  transition: border-color .15s, transform .12s;
}
.follow-user:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  transform: translateY(-1px);
}
.follow-user .profile-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

.form-label {
  display: flex; flex-direction: column; gap: 6px;
  font-weight: 600; font-size: .88rem; margin-bottom: 12px;
}
.form-label textarea,
.form-label input[type=file] {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font: inherit;
}
.form-label textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.profile-success {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .3);
  color: #166534; font-weight: 600;
}
html[data-theme="dark"] .profile-success {
  color: #86efac; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .3);
}

/* Admin */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0 22px;
}
.admin-stats > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}
.admin-stats strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.03em;
}
.admin-stats span {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.admin-section { margin-bottom: 18px; border-radius: 18px !important; }
.admin-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
}
.admin-row:last-child { border-bottom: 0; }
.admin-row form { display: inline; }
.section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px;
}

/* Empty states */
.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

/* Perfil: botón primario legible en modo claro */
html[data-theme="light"] .profile-actions .juego-btn.primary {
  color: #fff !important;
}
html[data-theme="dark"] .profile-actions .juego-btn.primary {
  color: #06101e !important;
}
/* Evitar que estilos viejos de profile-avatar.lg cuadren el avatar */
.profile-hero .profile-avatar.lg,
.profile-avatar-wrap .profile-avatar.lg {
  border-radius: 50% !important;
  width: 112px !important;
  height: 112px !important;
  object-fit: cover !important;
}


/* ========== v19 — Perfil distintivo (no Bootstrap) ========== */
.profile-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 14px 56px;
}

.pf-card {
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 60px rgba(15, 23, 42, .1);
}

.pf-cover {
  position: relative;
  height: 168px;
  background:
    linear-gradient(135deg, #0f766e 0%, #1d4ed8 42%, #6d28d9 78%, #9d174d 100%);
}
html[data-theme="dark"] .pf-cover {
  background:
    linear-gradient(135deg, #115e59 0%, #1e3a8a 42%, #5b21b6 78%, #831843 100%);
}
.pf-cover-pattern {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 1.5px, transparent 3px),
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.08) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.06) 50%, transparent 51%);
  background-size: 28px 28px, 40px 40px, 56px 56px, 56px 56px;
  pointer-events: none;
}
.pf-cover-pattern::after {
  content: "♟";
  position: absolute;
  right: 32px;
  bottom: -12px;
  font-size: 8.5rem;
  color: #fff;
  opacity: .14;
  line-height: 1;
}
.pf-cover-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.pf-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 16px;
  border-radius: 999px;
  transition: transform .12s, box-shadow .15s, background .15s;
}
.pf-btn:hover { transform: translateY(-1px); }
.pf-btn-solid {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.pf-btn-solid:hover { box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.pf-btn-ghost {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}
.pf-btn-ghost:hover { background: rgba(255,255,255,.24); }

.pf-main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar info"
    "kpi kpi";
  gap: 0 20px;
  padding: 0 22px 22px;
  margin-top: -44px;
  position: relative;
  z-index: 1;
}
.pf-avatar-ring {
  grid-area: avatar;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(145deg, #fff, #e2e8f0);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  align-self: start;
}
html[data-theme="dark"] .pf-avatar-ring {
  background: linear-gradient(145deg, #334155, #1e293b);
}
.pf-avatar-ring .profile-avatar,
.pf-avatar-ring .profile-avatar.lg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  display: block;
  box-shadow: none !important;
}
.pf-info {
  grid-area: info;
  padding-top: 52px;
  min-width: 0;
}
.pf-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-name {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.pf-meta {
  margin: 6px 0 0;
  font-size: .86rem;
  color: var(--muted);
  font-weight: 600;
}
.pf-bio {
  margin: 10px 0 0;
  max-width: 480px;
  font-size: .95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
}
.pf-chip {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: 999px;
}
.pf-chip-admin {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.pf-chip-ban {
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
}

/* KPI strip integrado (no cajas sueltas tipo Bootstrap) */
.pf-kpi {
  grid-area: kpi;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 22px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.pf-kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: default;
  transition: background .15s;
}
.pf-kpi-item:last-child { border-right: 0; }
button.pf-kpi-item { cursor: pointer; }
button.pf-kpi-item:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.pf-kpi-item b {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.pf-kpi-item span {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.pf-kpi-accent b { color: var(--brand); }
.pf-kpi-win b { color: #16a34a; }
html[data-theme="dark"] .pf-kpi-win b { color: #4ade80; }

@media (max-width: 720px) {
  .pf-cover { height: 130px; }
  .pf-main {
    grid-template-columns: auto 1fr;
    gap: 0 14px;
    padding: 0 14px 16px;
    margin-top: -36px;
  }
  .pf-avatar-ring { width: 88px; height: 88px; }
  .pf-info { padding-top: 44px; }
  .pf-name { font-size: 1.35rem; }
  .pf-kpi { grid-template-columns: repeat(3, 1fr); }
  .pf-kpi-item:nth-child(3) { border-right: 0; }
  .pf-kpi-item:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* Paneles inferiores */
.pf-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  padding: 20px 22px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
  color: var(--ink) !important;
}
.pf-panel h2 {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
@media (min-width: 900px) {
  .profile-grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
  .profile-matches-card { grid-column: 1 / -1; }
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.profile-stats-grid .stat-box {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
}
.profile-stats-grid .stat-box strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 2px;
}
.profile-stats-grid .stat-box span {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.color-stats { display: grid; gap: 14px; }
.color-stat-label { font-weight: 700; margin-bottom: 6px; font-size: .85rem; }
.color-stat-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.color-stat-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #94a3b8, #64748b);
}
.color-stat-bar.dark span {
  background: linear-gradient(90deg, #475569, #1e293b);
}

.match-list { display: flex; flex-direction: column; gap: 6px; }
.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}
.match-row:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.match-rival { display: flex; align-items: center; gap: 12px; min-width: 0; }
.match-rival .profile-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
}
.result-pill {
  font-size: .72rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
}
.result-pill.victoria { background: rgba(22,163,74,.12); color: #16a34a; }
.result-pill.derrota { background: rgba(220,38,38,.1); color: #dc2626; }
.result-pill.tablas { background: rgba(217,119,6,.12); color: #d97706; }
html[data-theme="dark"] .result-pill.victoria { color: #4ade80; }
html[data-theme="dark"] .result-pill.derrota { color: #f87171; }
html[data-theme="dark"] .result-pill.tablas { color: #fbbf24; }

.follow-list { display: flex; flex-wrap: wrap; gap: 8px; }
.follow-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-decoration: none; color: inherit; font-weight: 600; font-size: .88rem;
}
.follow-user .profile-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  border: 1px dashed var(--line);
  border-radius: 16px;
}

/* Selector de idioma */
.lang-menu { position: relative; }
.lang-menu-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; font-size: .8rem;
  transition: border-color .15s, box-shadow .15s;
}
.lang-menu-trigger:hover, .lang-menu.open .lang-menu-trigger {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-code { letter-spacing: .04em; opacity: .85; }
.lang-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  min-width: 200px; max-height: min(70vh, 360px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.2);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: menuIn .15s ease-out;
}
.lang-menu-dropdown[hidden] { display: none; }
.lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .88rem;
}
.lang-option:hover { background: var(--surface-2); }
.lang-option.is-active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.lang-check { margin-left: auto; font-weight: 800; }
@media (max-width: 520px) {
  .lang-code { display: none; }
}
.guide code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:.86em;font-family:ui-monospace,Menlo,Consolas,monospace}
.guide-card.full{grid-column:1/-1}
.guide-nav{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.guide-nav a{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.82rem;font-weight:700}
.guide-nav a:hover{border-color:var(--brand);color:var(--brand)}

/* Guía: cartas de piezas sin icono fantasma */
.guide .piece-grid .piece{
  position:relative;
  text-align:left;
  padding:14px 16px;
}
.guide .piece-grid .piece strong{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.05rem;
  margin-bottom:6px;
}


/* ========== Lobby compacto — GAMBITO ========== */
.lobby-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 4px 16px rgba(15,23,42,.04);
}
.lobby-toolbar-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  min-width:0;
}
.lobby-title{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.lobby-toolbar .lobby-tabs{
  display:flex;
  gap:4px;
  margin:0;
  padding:3px;
  border-radius:12px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.lobby-toolbar .lobby-tab{
  padding:7px 12px;
  border-radius:9px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
  white-space:nowrap;
}
.lobby-toolbar .lobby-tab.active,
.lobby-toolbar .lobby-tab:hover{
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.lobby-toolbar-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.lobby-toolbar-actions .juego-btn{
  padding:8px 14px;
  font-size:.85rem;
}
/* Reducir espacio del topbar un poco */
.topbar{
  padding:8px 14px;
}
.wrap{
  padding-top:12px;
}
.online-card{
  margin-top:10px;
}
@media(max-width:720px){
  .lobby-toolbar{padding:10px;gap:10px}
  .lobby-toolbar-left{width:100%}
  .lobby-toolbar .lobby-tabs{width:100%;overflow-x:auto}
  .lobby-toolbar-actions{width:100%}
  .lobby-toolbar-actions .juego-btn{flex:1;justify-content:center}
}


/* Logo GAMBITO en header (una sola vez) */
.brand.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  line-height:0;
  padding:2px 0;
}
.brand-logo-img{
  height:42px;
  width:auto;
  max-width:min(220px,48vw);
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.brand-extra{
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
  line-height:1.2;
  border-left:1px solid var(--line);
  padding-left:10px;
}
@media(max-width:520px){
  .brand-logo-img{height:32px}
  .brand-extra{display:none}
}
/* Fondo del topbar un poco más limpio con logo oscuro */
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.92);
}
html[data-theme="dark"] .topbar{
  background:rgba(10,12,18,.94);
}


/* Perfil a ancho completo, sin datos repetidos */
.profile-page{
  max-width:1100px !important;
  width:100%;
  margin:0 auto;
  padding:16px 16px 48px;
  box-sizing:border-box;
}
.profile-full{
  width:100%;
  margin-top:14px;
}
.pf-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.pf-section-head h2{margin:0}
.pf-stats-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.pf-stat{
  text-align:center;
  padding:14px 8px;
  border-radius:14px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-2) 55%,transparent);
}
.pf-stat strong{
  display:block;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:4px;
}
.pf-stat span{
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
}
.pf-stat.loss strong{color:#dc2626}
.pf-stat.draw strong{color:#d97706}
.pf-stat.accent strong{color:var(--brand)}
html[data-theme="dark"] .pf-stat.loss strong{color:#f87171}
html[data-theme="dark"] .pf-stat.draw strong{color:#fbbf24}

.pf-color-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.pf-color-card{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-2) 40%,transparent);
}
.pf-color-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-weight:700;
}
.pf-color-top strong{font-size:1.1rem}

.match-list-wide{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
@media(max-width:800px){
  .pf-stats-row{grid-template-columns:repeat(3,1fr)}
  .pf-color-row{grid-template-columns:1fr}
  .match-list-wide{grid-template-columns:1fr}
}
@media(max-width:480px){
  .pf-stats-row{grid-template-columns:repeat(2,1fr)}
}

/* Logo nuevo (fondo transparente) */
.brand-logo-img{
  height:42px !important;
  max-width:min(220px,48vw) !important;
}
html[data-theme="light"] .brand-logo-img{
  /* ligero resalte sobre fondo claro */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
}


/* ========== Auth split: about + login/register tabs + footer ========== */
body.auth-split{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--brand2, #0ea5e9) 14%, transparent), transparent 55%),
    var(--bg);
}
.auth-shell{
  flex:1;
  display:grid;
  grid-template-columns:1.15fr 0.95fr;
  gap:0;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:28px 20px 12px;
  align-items:stretch;
  box-sizing:border-box;
}
.auth-about{
  display:flex;
  align-items:center;
  padding:12px 28px 12px 8px;
}
.auth-about-inner{max-width:520px}
.auth-about-logo{
  height:56px;
  width:auto;
  margin-bottom:18px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));
}
.auth-about-title{
  margin:0 0 10px;
  font-size:clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing:-.03em;
  line-height:1.15;
}
.auth-about-lead{
  margin:0 0 20px;
  color:var(--muted);
  line-height:1.55;
  font-size:.98rem;
}
.auth-features{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  gap:12px;
}
.auth-features li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px);
}
.af-ico{
  width:36px;height:36px;
  border-radius:10px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--brand) 16%, var(--surface));
  font-size:1.1rem;
  flex-shrink:0;
}
.auth-features strong{display:block;font-size:.92rem;margin-bottom:2px}
.auth-features span{display:block;font-size:.82rem;color:var(--muted);line-height:1.4}
.auth-about-actions{display:flex;flex-wrap:wrap;gap:8px}

.auth-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px 8px;
}
.auth-panel-top{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:12px;
}
.auth-card-tabs{
  width:100%;
  max-width:420px;
  margin-left:auto;
  padding:22px 22px 24px;
  border-radius:20px;
}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  border-radius:12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  margin-bottom:18px;
}
.auth-tab{
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:9px;
  font:inherit;
  font-weight:800;
  font-size:.88rem;
  color:var(--muted);
  cursor:pointer;
}
.auth-tab.active{
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.auth-tab-panel h2{
  margin:0 0 4px;
  font-size:1.35rem;
  letter-spacing:-.02em;
}
.auth-tab-panel .sub{margin:0 0 16px}
.ok-msg{
  background:color-mix(in srgb, #22c55e 14%, var(--surface));
  border:1px solid color-mix(in srgb, #22c55e 35%, var(--line));
  color:var(--ink);
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:.9rem;
}
.muted-inline{color:var(--muted);font-weight:500;font-size:.85em}

.auth-footer{
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);
  margin-top:auto;
}
.auth-footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:22px 20px 28px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:18px;
  box-sizing:border-box;
}
.af-col strong{
  display:block;
  margin-bottom:8px;
  font-size:.88rem;
  letter-spacing:.02em;
}
.af-col p{
  margin:0 0 6px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.45;
}
.af-col a{color:var(--ink);text-decoration:none}
.af-col a:hover{color:var(--brand)}
.af-copy{
  display:flex;
  align-items:flex-end;
}
.af-copy p{font-size:.78rem}

@media(max-width:900px){
  .auth-shell{grid-template-columns:1fr;padding:16px 14px 8px}
  .auth-about{padding:8px 4px 4px}
  .auth-about-inner{max-width:none}
  .auth-card-tabs{margin:0 auto;max-width:460px}
  .auth-footer-inner{grid-template-columns:1fr 1fr;gap:14px}
}
@media(max-width:520px){
  .auth-footer-inner{grid-template-columns:1fr}
  .auth-features li{padding:10px 12px}
  .af-copy{align-items:flex-start}
}


/* Auth: menos espacio superior + iconos SVG planos */
body.auth-split{padding-top:0}
.auth-shell{padding:12px 20px 8px !important;align-items:center}
.auth-about{padding:4px 24px 4px 4px !important}
.auth-about-logo{height:48px !important;margin-bottom:10px !important}
.auth-about-title{margin-bottom:6px !important}
.auth-about-lead{margin-bottom:14px !important;font-size:.92rem !important}
.auth-features{gap:8px !important;margin-bottom:14px !important}
.auth-features li{padding:10px 12px !important;border-radius:12px !important}
.af-ico{
  width:34px !important;height:34px !important;
  border-radius:9px !important;
  color:var(--brand) !important;
  background:color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
}
.af-ico svg{width:26px;height:26px;display:block}
.auth-panel{padding:4px 4px !important}
.auth-panel-top{margin-bottom:8px !important}
.auth-card-tabs{padding:18px 18px 20px !important}
.auth-footer-inner{padding:16px 20px 20px !important}
@media(max-width:900px){
  .auth-shell{padding:10px 14px 6px !important}
  .auth-about{padding:4px !important}
}


/* Auth features: iconos SVG más grandes, alineados, sin fondo */
.auth-features li{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:12px 4px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.af-ico{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--brand) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
}
.af-ico svg{
  width:24px !important;
  height:24px !important;
  display:block;
  stroke-width:1.6;
}
.auth-features strong{font-size:.95rem;margin-bottom:2px}
.auth-features span{font-size:.84rem}

/* Footer contacto */
.auth-footer-grid{
  grid-template-columns:1fr 1.4fr !important;
  gap:28px !important;
  align-items:start;
}
.af-copy-line{margin-top:12px !important;font-size:.78rem !important}
.af-links{font-size:.84rem}
.af-contact-hint{margin-bottom:10px !important}
.contact-form{display:flex;flex-direction:column;gap:10px;max-width:520px}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-form label{
  display:flex;flex-direction:column;gap:4px;
  font-size:.8rem;font-weight:700;color:var(--ink);
}
.contact-form input,
.contact-form textarea{
  font:inherit;font-weight:500;font-size:.9rem;
  padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink);resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);
}
.contact-submit{align-self:flex-start;padding:10px 18px;border-radius:10px;font-weight:800}
@media(max-width:700px){
  .auth-footer-grid{grid-template-columns:1fr !important}
  .contact-row{grid-template-columns:1fr}
}

.admin-row-unread{background:color-mix(in srgb,var(--brand) 8%,var(--surface));border-left:3px solid var(--brand)}


/* Contact modal */
.auth-footer-simple{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  grid-template-columns:none !important;
}
.af-footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
body.contact-modal-open{overflow:hidden}
.contact-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
}
.contact-modal[hidden]{display:none !important}
.contact-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
}
.contact-modal-card{
  position:relative;
  z-index:1;
  width:min(480px,100%);
  max-height:min(90vh,640px);
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 20px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.contact-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.contact-modal-head h2{
  margin:0;
  font-size:1.2rem;
  letter-spacing:-.02em;
}
.contact-modal-close{
  width:36px;height:36px;
  border:0;border-radius:10px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.contact-modal-close:hover{background:var(--line)}
.contact-modal .contact-form{max-width:none}
.contact-modal .af-contact-hint{margin:0 0 12px;color:var(--muted);font-size:.9rem}

/* Footer moderno intro */
.site-footer{border-top:1px solid var(--line);background:transparent;padding:28px 20px 32px;margin-top:auto}
.site-footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.sf-logo{height:32px;width:auto;display:block;margin-bottom:8px}
.sf-brand p{margin:0;color:var(--muted);font-size:.85rem}
.sf-nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.sf-link{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 4px;color:var(--ink);font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;text-decoration:none;opacity:.9}
.sf-link:hover{color:var(--brand);opacity:1}
.sf-link svg{flex-shrink:0;opacity:.85}
.sf-copy p{margin:0;font-size:.78rem;color:var(--muted)}
.sf-extra{max-width:1100px;margin:18px auto 0;padding-top:14px;border-top:1px solid var(--line)}
.sf-extra h3{margin:0 0 6px;font-size:.95rem}
.sf-extra p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}

/* Roles y niveles */
.role-badge,.level-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.02em;vertical-align:middle}
.role-admin{background:#7c3aed;color:#fff}
.role-mod{background:#0ea5e9;color:#fff}
.level-badge{background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.level-peon{opacity:.9}.level-rey{border-color:gold;color:#b45309}

/* Chat global */
.global-chat-card{margin-top:12px}
.global-chat-layout{display:grid;grid-template-columns:1fr 180px;gap:14px}
.global-chat-msgs{height:220px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2);margin:10px 0}
.gchat-row{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.gchat-text{margin-top:2px;font-size:.9rem;line-height:1.4;word-break:break-word}
.global-chat-form{display:flex;gap:8px}
.global-chat-form input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.global-chat-online h3{margin:0 0 8px;font-size:.85rem}
.global-chat-online-list{max-height:260px;overflow:auto;font-size:.85rem}
.gchat-on-user{padding:4px 0;display:flex;gap:6px;align-items:center}
.gchat-on-user a{color:var(--ink);text-decoration:none;font-weight:700}
@media(max-width:720px){.global-chat-layout{grid-template-columns:1fr}}

.verify-box{margin-top:10px;padding:10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);word-break:break-all;font-size:.85rem}
.verify-box a{color:var(--brand)}

/* Crop modal mejoras */
.profile-modal-card{max-width:min(560px,96vw)}
.crop-stage{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0f172a}
.crop-hint{margin:8px 0 0}


/* Chat drawer (menú superior) */
body.chat-drawer-open{overflow:hidden}
.chat-drawer{position:fixed;inset:0;z-index:1200}
.chat-drawer[hidden]{display:none!important}
.chat-drawer-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px)}
.chat-drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(420px,100%);
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-12px 0 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column;padding:14px 14px 16px;box-sizing:border-box;
}
.chat-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-drawer-head h2{margin:0;font-size:1.1rem}
.chat-drawer-hint{margin:6px 0 10px}
.chat-drawer-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 120px;gap:10px}
.chat-drawer .global-chat-msgs{height:auto;min-height:0;flex:1;margin:0}
.chat-drawer .global-chat-form{margin-top:10px}
.top-chat-btn{cursor:pointer;border:0;background:transparent;font:inherit}
.user-menu-btn-item{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:10px 12px;font:inherit;cursor:pointer;color:var(--ink);
}
.user-menu-btn-item:hover{background:var(--surface-2)}
@media(max-width:560px){
  .chat-drawer-body{grid-template-columns:1fr}
  .chat-drawer .global-chat-online{display:none}
}


/* Páginas info: Protocolo / Quiénes somos */
.info-page{min-height:100vh;background:var(--bg)}
.info-wrap{max-width:960px;margin:0 auto;padding:28px 18px 48px}
.info-hero{
  text-align:center;padding:28px 16px 24px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface));
  border:1px solid var(--line);border-radius:20px;margin-bottom:22px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.info-hero-badge{
  width:56px;height:56px;margin:0 auto 12px;border-radius:16px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--brand) 14%, var(--surface));
  color:var(--brand);border:1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
}
.info-hero h1{margin:0 0 8px;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em}
.info-hero p{margin:0 auto;max-width:42rem;color:var(--muted);line-height:1.55;font-size:.98rem}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-grid-3{grid-template-columns:repeat(3,1fr)}
.info-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:20px 18px 18px;box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.info-card-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--brand) 12%, var(--surface));color:var(--brand);margin-bottom:12px;
}
.info-card-icon-alt{background:color-mix(in srgb, #0ea5e9 14%, var(--surface));color:#0284c7}
.info-card h2{margin:0 0 12px;font-size:1.05rem}
.info-card-text{margin:0;color:var(--muted);line-height:1.55;font-size:.92rem}
.info-list{margin:0;padding:0;list-style:none;counter-reset:infoitem}
.info-list li{
  position:relative;padding:10px 10px 10px 40px;margin:0 0 8px;
  background:var(--surface-2);border-radius:12px;color:var(--ink);
  font-size:.9rem;line-height:1.45;
}
.info-list li:last-child{margin-bottom:0}
.info-list li::before{
  counter-increment:infoitem;content:counter(infoitem);
  position:absolute;left:10px;top:10px;
  width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;
}
.info-tip{
  margin-top:18px;display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--brand) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  color:var(--ink);
}
.info-tip svg{flex-shrink:0;color:var(--brand);margin-top:2px}
.info-tip p{margin:0;font-size:.9rem;line-height:1.5}
.site-footer-compact{flex-direction:column;align-items:center;text-align:center;gap:12px}
.site-footer-compact .sf-copy-line{margin:0;font-size:.78rem;color:var(--muted)}
@media(max-width:800px){
  .info-grid,.info-grid-3{grid-template-columns:1fr}
}


/* Chat página completa */
.chat-page-wrap{max-width:1100px;margin:0 auto;padding:20px 16px 40px}
.chat-page-hero{margin-bottom:16px}
.chat-page-hero h1{margin:0 0 6px;font-size:1.45rem}
.chat-page-hero p{margin:0;color:var(--muted)}
.chat-page-layout{display:grid;grid-template-columns:1fr 220px;gap:14px;align-items:stretch}
.chat-page-main{display:flex;flex-direction:column;min-height:420px;padding:14px}
.chat-page-main .global-chat-msgs{
  flex:1;min-height:280px;height:min(55vh,480px);margin:0 0 10px;
  border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface-2);overflow:auto
}
.chat-page-side{padding:14px}
.chat-page-side h2{margin:0 0 10px;font-size:.95rem}
.chat-emoji-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.emoji-btn{
  width:32px;height:32px;border:0;border-radius:8px;background:transparent;
  font-size:1.15rem;cursor:pointer;line-height:1
}
.emoji-btn:hover{background:var(--surface-2)}
@media(max-width:800px){
  .chat-page-layout{grid-template-columns:1fr}
}


/* Crear sala — layout lógico */
.create-room-card{margin-top:16px;padding:18px 18px 16px}
.create-room-head h3{margin:0 0 4px}
.create-room-head .sala-meta{margin:0 0 14px}
.create-room-form{display:flex;flex-direction:column;gap:14px}
.cr-block{
  margin:0;padding:14px 14px 12px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);
}
.cr-block-soft{background:transparent}
.cr-block legend{
  padding:0 6px;font-size:.78rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.cr-seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cr-seg-item{
  position:relative;cursor:pointer;user-select:none;
}
.cr-seg-item input{position:absolute;opacity:0;pointer-events:none}
.cr-seg-item span{
  display:inline-block;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:.88rem;font-weight:700;color:var(--ink);
}
.cr-seg-item input:checked + span{
  border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--surface));
  color:var(--brand);
}
.cr-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.cr-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px}
.cr-field > span{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.cr-field input,.cr-field select{
  font:inherit;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.cr-hint{margin:8px 0 0}
.cr-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cr-presets .preset-btn{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
}
.cr-presets .preset-btn.on{
  border-color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,var(--surface));color:var(--brand);
}
.cr-clock-nums{margin-top:10px}
.cr-checks{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:4px}
.cr-check{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}
.cr-actions{display:flex;justify-content:flex-start}
.cr-submit{min-width:160px;padding:12px 20px;font-weight:800}
@media(max-width:640px){
  .cr-row-2{grid-template-columns:1fr}
}


/* Emoji picker categorías */
.gambito-emoji-panel{
  position:fixed!important;z-index:10090!important;width:min(320px,92vw);display:block!important;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.22);padding:8px;box-sizing:border-box;
}
.gambito-emoji-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.gambito-emoji-tab{
  border:0;background:var(--surface-2);color:var(--muted);font:inherit;font-size:.72rem;font-weight:800;
  padding:5px 8px;border-radius:8px;cursor:pointer;text-transform:uppercase;letter-spacing:.02em;
}
.gambito-emoji-tab.on{background:color-mix(in srgb,var(--brand) 16%,var(--surface));color:var(--brand)}
.gambito-emoji-body{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:200px;overflow:auto}
.gambito-emoji-item{
  border:0;background:transparent;font-size:1.25rem;cursor:pointer;padding:4px;line-height:1.3;border-radius:8px;
}
.gambito-emoji-item:hover{background:var(--surface-2)}
.chat-emoji-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;flex-shrink:0;
}
.chat-emoji-btn:hover{border-color:var(--brand);color:var(--brand)}
.global-chat-form{display:flex;gap:8px;align-items:center}
.global-chat-form input{flex:1}

/* Footer global a todo el ancho */
html,body{min-height:100%}
body{display:flex;flex-direction:column}
body > .wrap, body > main, body > .info-wrap, body > .chat-page-wrap{flex:1 0 auto;width:100%}
.site-footer-global{
  width:100%;margin-top:auto;flex-shrink:0;
  background:transparent;border-top:1px solid var(--line);
  padding:20px 0 24px;
}
.site-footer-full{
  width:100%;max-width:1100px;margin:0 auto;padding:0 16px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  box-sizing:border-box;
}
.site-footer-full .sf-nav{flex:1;justify-content:flex-start}
.site-footer-full .sf-copy-line{margin:0;font-size:.78rem;color:var(--muted);white-space:nowrap}
@media(max-width:640px){
  .site-footer-full{flex-direction:column;align-items:flex-start}
}

.top-link-ico{display:inline-flex;align-items:center;gap:6px}
.top-link-ico svg{flex-shrink:0;opacity:.9}
.user-menu-dropdown a,.user-menu-dropdown .user-menu-btn-item{display:flex;align-items:center;gap:8px}
.menu-ico{flex-shrink:0;opacity:.85}


/* Crear partida/torneo compacto */
.create-room-compact{gap:10px!important}
.create-room-card{padding:14px 14px 12px!important}
.create-room-head{margin-bottom:8px}
.create-room-head h3{margin:0;font-size:1.05rem}
.cr-compact-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cr-input,.cr-select{
  font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:.88rem;
}
.cr-grow{flex:1;min-width:140px}
.cr-select{min-width:100px}
.cr-clock-nums{display:inline-flex;gap:6px;align-items:center}
.cr-clock-nums input{width:64px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.create-room-compact .cr-submit{margin-left:auto}
.create-room-compact .cr-block{display:none}

/* Emoji button siempre visible */
.chat-emoji-btn,.global-chat-form .chat-emoji-btn{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:42px!important;height:42px!important;min-width:42px;
  border-radius:10px!important;border:1px solid var(--line)!important;
  background:var(--surface)!important;color:var(--ink)!important;
  cursor:pointer;font-size:1.25rem!important;line-height:1;padding:0!important;
  flex-shrink:0;
}
.chat-emoji-btn:hover{border-color:var(--brand)!important}
.global-chat-form{display:flex!important;gap:8px;align-items:center}
.global-chat-form input{flex:1;min-width:0}
.gambito-emoji-panel{
  position:fixed!important;z-index:99999!important;
  width:min(320px,92vw)!important;
  background:var(--surface,#1e293b)!important;
  border:1px solid var(--line,#334155)!important;
  border-radius:14px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.35)!important;
  padding:10px!important;
}
.gambito-emoji-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.gambito-emoji-tab{
  border:0;background:var(--surface-2,#334155);color:var(--muted,#94a3b8);
  font-size:.7rem;font-weight:800;padding:5px 8px;border-radius:8px;cursor:pointer;
}
.gambito-emoji-tab.on{background:#6366f1;color:#fff}
.gambito-emoji-body{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:210px;overflow:auto}
.gambito-emoji-item{border:0;background:transparent;font-size:1.3rem;cursor:pointer;padding:5px;border-radius:8px;line-height:1.2}
.gambito-emoji-item:hover{background:rgba(99,102,241,.2)}


/* hidden debe ganar sobre flex */
[hidden]{display:none!important}
.cr-compact-row[hidden],#cr-private-opts[hidden],#cr-invite-opts[hidden],#cr-clock-nums[hidden]{display:none!important}

/* Emoji MODAL */
body.emoji-modal-open{overflow:hidden}
.emoji-modal{position:fixed;inset:0;z-index:500000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.emoji-modal[hidden]{display:none!important}
.emoji-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.emoji-modal-card{
  position:relative;z-index:1;width:min(380px,100%);max-height:min(80vh,520px);
  background:var(--surface,#1e293b);border:1px solid var(--line,#334155);
  border-radius:16px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:10px;
}
.emoji-modal-head{display:flex;align-items:center;justify-content:space-between}
.emoji-modal-head strong{font-size:1rem}
.emoji-modal-x{width:36px;height:36px;border:0;border-radius:10px;background:var(--surface-2,#334155);color:var(--ink,#fff);font-size:1.4rem;cursor:pointer}
.emoji-modal-tabs{display:flex;flex-wrap:wrap;gap:6px}
.emoji-modal-tab{
  border:0;border-radius:999px;padding:6px 12px;font:inherit;font-size:.8rem;font-weight:700;
  background:var(--surface-2,#334155);color:var(--muted,#94a3b8);cursor:pointer;
}
.emoji-modal-tab.on{background:#6366f1;color:#fff}
.emoji-modal-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:4px;
  overflow:auto;max-height:280px;padding:4px;
}
.emoji-modal-item{
  border:0;background:transparent;font-size:1.45rem;cursor:pointer;
  padding:6px;border-radius:10px;line-height:1.2;
}
.emoji-modal-item:hover{background:rgba(99,102,241,.25)}

/* Crear sala más limpia */
.create-room-compact .cr-extra{width:100%}
.create-room-compact .cr-extra input{width:100%;max-width:320px}


/* Crear partida: una sola línea responsive */
.create-room-compact.one-line .cr-compact-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;
}
.create-room-card.one-line-card{padding:12px 14px!important}
.create-room-card.one-line-card .create-room-head{display:none}
.create-room-compact .cr-submit{margin-left:auto;padding:8px 14px!important;font-size:.88rem}

/* Chat general vistoso */
.chat-page-hero{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-page-hero h1{margin:0}
.gchat-row{
  display:grid;grid-template-columns:36px 1fr;gap:8px 10px;
  padding:10px;border-radius:12px;margin-bottom:8px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.gchat-row:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.gchat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.gchat-text{grid-column:2;font-size:.95rem;line-height:1.45}
.gchat-on-user{
  display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;
  border:1px solid transparent;
}
.gchat-on-user:hover{background:var(--surface-2)}
.gchat-on-user.is-follower{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 8%,transparent)}
.gchat-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}

/* Ranking mejorado */
.rank-row{
  display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;
  padding:12px;border-radius:14px;border:1px solid var(--line);margin-bottom:8px;
  background:var(--surface);
}
.rank-row.top1{border-color:gold;background:color-mix(in srgb,gold 8%,var(--surface))}
.rank-row.top2{border-color:silver}
.rank-row.top3{border-color:#cd7f32}
.rank-pos{font-weight:900;font-size:1.1rem;text-align:center;color:var(--muted)}
.rank-main{display:flex;align-items:center;gap:10px;min-width:0}
.rank-stats{display:flex;flex-wrap:wrap;gap:6px;font-size:.75rem;color:var(--muted)}
.rank-stats b{color:var(--ink)}
.rank-wr{font-weight:800;color:var(--brand)}

/* Stats strip mejorado */
.quick-stats{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
}
.quick-stats > div{
  text-align:center;padding:12px 8px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
}
.quick-stats strong{display:block;font-size:1.25rem}
.quick-stats span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
@media(max-width:700px){.quick-stats{grid-template-columns:repeat(3,1fr)}}

/* Portada perfil */
.pf-cover{
  height:160px;border-radius:18px 18px 0 0;background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 35%, #0f172a), #1e293b);
  background-size:cover;background-position:center;position:relative;overflow:hidden;
}
.pf-cover-edit{
  position:absolute;right:12px;bottom:12px;z-index:2;
}
.profile-hero.has-cover{padding-top:0}
.profile-hero.has-cover .pf-main{margin-top:-40px;position:relative;z-index:1;padding:0 16px 16px}

/* Piezas más fluidas */
.tablero .casilla .pieza,
.board .piece,
[data-piece]{
  transition: transform .18s cubic-bezier(.2,.8,.2,1), left .18s cubic-bezier(.2,.8,.2,1), top .18s cubic-bezier(.2,.8,.2,1);
}

/* —— Torneos oficiales y privados —— */
.torneo-row.torneo-oficial{
  background:linear-gradient(90deg,color-mix(in srgb,#f59e0b 12%,var(--surface)) 0%,var(--surface) 70%);
  border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));
  border-radius:12px;
  padding:12px 14px!important;
  margin:6px 0;
  box-shadow:0 1px 0 color-mix(in srgb,#f59e0b 20%,transparent);
}
.badge-oficial{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#78350f;
  border-color:#f59e0b;
  font-weight:800;
  letter-spacing:.02em;
}
.badge-privado{
  background:var(--surface-2);
  color:var(--muted);
  border-color:var(--line);
}
.badge.mod{
  color:#0369a1;
  background:#e0f2fe;
  border-color:#7dd3fc;
}
.admin-badges{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.admin-nivel-form select{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.admin-actions form.admin-nivel-form{display:inline-flex}
.create-room-card#seccion-torneo .cr-seg{flex-shrink:0}

/* —— Lobby principal ampliado —— */
.lobby-main-grid{grid-template-columns:1.2fr .9fr;gap:18px}
@media(max-width:900px){.lobby-main-grid{grid-template-columns:1fr}}
.badge-live{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.badge-wait{color:#0369a1;background:#e0f2fe;border-color:#7dd3fc}
.muted-inline{color:var(--muted);font-weight:600}

.create-room-expanded{padding:20px 22px!important;margin-top:18px}
.create-room-expanded .create-room-head{display:block!important;margin-bottom:14px}
.create-room-expanded .create-room-head h3{margin:0 0 4px;font-size:1.15rem}
.create-room-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 16px;
  align-items:end;
}
.cr-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cr-field-full{grid-column:1/-1}
.cr-label{font-size:.78rem;font-weight:750;color:var(--muted);letter-spacing:.02em}
.cr-select-full,.create-room-grid .cr-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit}
.cr-footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cr-footer-row .cr-submit{margin-left:auto;padding:10px 20px!important;font-size:.95rem}
.create-room-grid .cr-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.create-room-grid .preset-btn{padding:8px 12px;border-radius:10px;font-weight:750}
.create-room-grid .cr-seg{display:inline-flex;flex-wrap:wrap}
@media(max-width:700px){
  .create-room-grid{grid-template-columns:1fr}
  .cr-footer-row .cr-submit{margin-left:0;width:100%}
}

/* Formulario torneo menos apretado */
#seccion-torneo.create-room-card{padding:18px!important}
#seccion-torneo .create-room-head{display:block!important}
#seccion-torneo .cr-compact-row{gap:10px}

/* ===== Optimización móvil global ===== */
@media (max-width: 900px) {
  .wrap {
    padding: 10px 8px 24px !important;
    max-width: 100%;
  }
  .topbar {
    padding: 8px 10px;
    gap: 8px;
  }
  .topbar .brand-logo-img {
    max-height: 32px;
    width: auto;
  }
  .juego-btn,
  .btn {
    min-height: 42px;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    overflow-x: hidden;
  }
}
@media (max-width: 600px) {
  .wrap {
    padding: 8px 6px 20px !important;
  }
  .topbar .meta {
    gap: 6px;
  }
}
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .wrap {
      padding-left: max(8px, env(safe-area-inset-left)) !important;
      padding-right: max(8px, env(safe-area-inset-right)) !important;
      padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
    .topbar {
      padding-left: max(10px, env(safe-area-inset-left));
      padding-right: max(10px, env(safe-area-inset-right));
    }
  }
}

/* Menos padding del wrap en página de juego */
body:has(.juego-main) .wrap{
  padding: 4px 10px 6px !important;
}
body:has(.juego-main) .juego-page{
  padding: 0 !important;
}
body:has(.juego-main) .topbar{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
}
@media (max-width: 700px){
  body:has(.juego-main) .wrap{
    padding: 2px 4px 4px !important;
  }
}

/* =========================================================
   Gambito Design System — polish global
   ========================================================= */
:root, html {
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
  --ease: cubic-bezier(.22, .7, .2, 1);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="light"] {
  --bg: #f0f4f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --card: #ffffff;
  --ink: #121a2a;
  --muted: #5b6b82;
  --line: #e2e8f0;
  --brand: #2563eb;
  --brand2: #1d4ed8;
  --accent: #0ea5e9;
}
html[data-theme="dark"] {
  --bg: #0b1017;
  --surface: #131a23;
  --surface-2: #1a2330;
  --card: #131a23;
  --ink: #eef3f9;
  --muted: #8b9bb0;
  --line: #273243;
  --brand: #5b9cff;
  --brand2: #3b82f6;
  --accent: #38bdf8;
}

body {
  font-family: var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="light"] body {
  background:
    radial-gradient(1000px 520px at 8% -10%, rgba(37, 99, 235, 0.10), transparent 55%),
    radial-gradient(800px 480px at 100% 0%, rgba(14, 165, 233, 0.07), transparent 50%),
    var(--bg);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1000px 520px at 8% -10%, rgba(59, 130, 246, 0.12), transparent 55%),
    radial-gradient(800px 480px at 100% 0%, rgba(34, 197, 94, 0.05), transparent 50%),
    var(--bg);
}

/* —— Topbar —— */
.topbar {
  padding: 8px 16px !important;
  min-height: 52px !important;
  background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="light"] .topbar {
  box-shadow: 0 1px 0 rgba(15,23,42,.03), 0 8px 24px rgba(15,23,42,.03);
}
.topbar .brand-logo-img {
  height: 40px;
  width: auto;
  max-width: min(220px, 48vw);
  transition: transform .2s var(--ease);
}
.topbar .brand:hover .brand-logo-img {
  transform: scale(1.03);
}
.top-link, .topbar .meta a {
  color: var(--muted) !important;
  font-weight: 650 !important;
  font-size: .88rem !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease) !important;
}
.top-link:hover, .topbar .meta a:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent) !important;
  color: var(--ink) !important;
}
.theme-toggle, .lang-menu-trigger, .user-menu-trigger {
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  transition: background .15s, border-color .15s, transform .15s var(--ease), box-shadow .15s !important;
}
.theme-toggle:hover, .lang-menu-trigger:hover, .user-menu-trigger:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line)) !important;
  box-shadow: var(--focus);
  transform: translateY(-1px);
}
.user-menu-dropdown, .lang-menu-dropdown {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
  overflow: hidden;
}
.user-menu-dropdown a, .lang-option {
  border-radius: 8px !important;
  transition: background .12s !important;
}
.user-menu-dropdown a:hover, .lang-option:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent) !important;
}

/* —— Cards & surfaces —— */
.lobby-card, .board-panel, .side-panel, .game-card, .card,
.create-room-card, .online-card, .invitation-page, .profile-hero {
  border-radius: var(--radius-lg) !important;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  transition: box-shadow .2s var(--ease), border-color .2s, transform .2s var(--ease);
}
.lobby-card:hover, .game-card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: color-mix(in srgb, var(--brand) 22%, var(--line)) !important;
}

/* —— Buttons —— */
.juego-btn, .btn, .preset-btn {
  border-radius: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  transition: transform .12s var(--ease), box-shadow .15s, background .15s, border-color .15s, filter .15s !important;
}
.juego-btn:hover, .btn:hover, .preset-btn:hover {
  transform: translateY(-1px);
}
.juego-btn:active, .btn:active {
  transform: translateY(0) scale(.98);
}
.juego-btn.primary, .btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}
html[data-theme="dark"] .juego-btn.primary,
html[data-theme="dark"] .btn.primary {
  color: #06101e !important;
}
.juego-btn.danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.28) !important;
}

/* —— Forms —— */
input, select, textarea {
  border-radius: var(--radius-sm) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line)) !important;
  box-shadow: var(--focus) !important;
}

/* —— Lobby —— */
.lobby-tabs {
  border-radius: 999px !important;
  padding: 4px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}
.lobby-tab {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: background .15s, color .15s, box-shadow .15s !important;
}
.lobby-tab.active {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent) !important;
}
html[data-theme="dark"] .lobby-tab.active {
  color: #06101e !important;
}
.sala-row, .torneo-row, .match-row {
  border-radius: 12px;
  transition: background .12s, transform .12s;
  padding-left: 6px;
  padding-right: 6px;
}
.sala-row:hover, .torneo-row:hover, .match-row:hover {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.badge, .badge-estado, .result-pill {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}
.stat-box, .quick-stats > div, .profile-metrics > div, .admin-stats > div {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s !important;
}
.stat-box:hover, .quick-stats > div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line)) !important;
  box-shadow: var(--shadow-md);
}

/* —— Online users —— */
.online-user {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  transition: transform .15s, border-color .15s, box-shadow .15s !important;
}
.online-user:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  box-shadow: var(--shadow-sm);
}
.online-challenge {
  border-radius: 10px !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* —— Auth —— */
.auth .card, .card {
  border-radius: 22px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--line) !important;
}
.auth-logo {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* —— Profile / admin —— */
.profile-avatar {
  border: 2px solid color-mix(in srgb, var(--line) 80%, transparent) !important;
  box-shadow: var(--shadow-sm);
}
.profile-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface)) !important;
}

/* —— Scrollbar sutil —— */
.chat, .online-list, .user-menu-dropdown {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent;
}
.chat::-webkit-scrollbar, .online-list::-webkit-scrollbar {
  width: 6px;
}
.chat::-webkit-scrollbar-thumb, .online-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 999px;
}

/* —— Selection —— */
::selection {
  background: color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--ink);
}

/* =========================================================
   GAMBITO ELITE — rediseño vistoso
   Identidad: esmeralda + oro, club de ajedrez premium
   ========================================================= */
:root, html {
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 20px;
  --gold: #d4a853;
  --gold2: #f0d78c;
  --emerald: #0f766e;
  --emerald2: #14b8a6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.14);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
  --ease: cubic-bezier(.22,.75,.2,1);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="light"] {
  --bg: #eef2f0;
  --surface: #ffffff;
  --surface-2: #f4f7f5;
  --card: #ffffff;
  --ink: #0f1a17;
  --muted: #5a6e68;
  --line: #d8e3de;
  --brand: #0f766e;
  --brand2: #0d9488;
  --accent: #d4a853;
  --danger: #dc2626;
}

html[data-theme="dark"] {
  --bg: #070d0c;
  --surface: #0f1715;
  --surface-2: #15201d;
  --card: #0f1715;
  --ink: #e8f2ee;
  --muted: #8aa399;
  --line: #243530;
  --brand: #2dd4bf;
  --brand2: #14b8a6;
  --accent: #e4c075;
  --danger: #f87171;
}

body {
  font-family: var(--font);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 560px at 0% -5%, rgba(15, 118, 110, 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(212, 168, 83, 0.10), transparent 50%),
    radial-gradient(700px 400px at 50% 100%, rgba(15, 118, 110, 0.05), transparent 45%),
    var(--bg) !important;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 560px at 0% -5%, rgba(45, 212, 191, 0.10), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(228, 192, 117, 0.07), transparent 50%),
    radial-gradient(700px 400px at 40% 100%, rgba(15, 118, 110, 0.08), transparent 45%),
    var(--bg) !important;
}

/* —— Topbar glass + acento oro —— */
.topbar {
  padding: 7px 16px !important;
  min-height: 50px !important;
  background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.35) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent),
    0 10px 30px rgba(0,0,0,.06) !important;
}
.topbar .brand-logo-img {
  height: 32px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
  transition: transform .2s var(--ease), filter .2s;
}
.topbar .brand:hover .brand-logo-img {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--accent) 40%, transparent));
}
.top-link, .topbar .meta a.top-link {
  color: var(--muted) !important;
  font-weight: 700 !important;
  font-size: .86rem !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  transition: all .15s var(--ease) !important;
}
.top-link:hover, .topbar .meta a.top-link:hover {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--brand) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand) 22%, transparent) !important;
}
.theme-toggle, .lang-menu-trigger, .user-menu-trigger {
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  transition: all .15s var(--ease) !important;
}
.theme-toggle:hover, .lang-menu-trigger:hover, .user-menu-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  transform: translateY(-1px);
}
.user-menu-dropdown, .lang-menu-dropdown {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) !important;
  overflow: hidden !important;
}
.user-menu-dropdown a:hover, .lang-option:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent) !important;
}
.user-menu-head {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface-2)) !important;
  border-bottom: 1px solid var(--line) !important;
}
.nav-badge {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
}

/* —— Cards premium —— */
.lobby-card, .board-panel, .side-panel, .game-card, .card,
.create-room-card, .online-card, .invitation-page, .profile-hero,
.guide-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent), var(--surface)) !important;
  color: var(--ink) !important;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent) !important;
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s !important;
}
html[data-theme="light"] .lobby-card,
html[data-theme="light"] .game-card,
html[data-theme="light"] .card {
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 10px 28px rgba(15, 60, 50, 0.07) !important;
}
.lobby-card:hover, .game-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line)) !important;
  box-shadow:
    0 14px 36px rgba(15, 60, 50, 0.12),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* —— Botones vistosos —— */
.juego-btn, .btn, .preset-btn {
  border-radius: 12px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em;
  transition: transform .12s var(--ease), box-shadow .15s, filter .15s, border-color .15s !important;
}
.juego-btn:not(.primary):not(.danger), .btn:not(.primary) {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.juego-btn:not(.primary):not(.danger):hover, .btn:not(.primary):hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)) !important;
  transform: translateY(-1px);
}
.juego-btn.primary, .btn.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 55%, color-mix(in srgb, var(--accent) 55%, var(--brand2)) 140%) !important;
  border: 0 !important;
  color: #042f2e !important;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}
html[data-theme="dark"] .juego-btn.primary,
html[data-theme="dark"] .btn.primary {
  color: #042f2e !important;
}
.juego-btn.primary:hover, .btn.primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--brand) 42%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.juego-btn.danger {
  background: linear-gradient(135deg, #f87171, #dc2626 40%, #991b1b) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.32) !important;
}

/* —— Lobby tabs —— */
.lobby-tabs {
  border-radius: 999px !important;
  padding: 4px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.lobby-tab {
  border-radius: 999px !important;
  font-weight: 750 !important;
  transition: all .15s var(--ease) !important;
}
.lobby-tab.active {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #042f2e !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}

/* —— Stats / online —— */
.stat-box, .quick-stats > div, .profile-metrics > div, .admin-stats > div {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 6%, var(--surface-2)), var(--surface-2)) !important;
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s !important;
}
.stat-box:hover, .quick-stats > div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.stat-box strong {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 850;
}
.online-user {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  transition: all .15s var(--ease) !important;
}
.online-user:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line)) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.online-challenge {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #042f2e !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* —— Forms —— */
input, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
/* select: colores fijos (var() en option se vuelve transparente en Chrome) */
select {
  border-radius: var(--radius-sm) !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line)) !important;
  box-shadow: var(--focus) !important;
}

/* —— Auth —— */
.auth .card, .card {
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent) !important;
}
.auth-logo {
  background: linear-gradient(135deg, var(--brand), var(--brand2), var(--accent)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}

/* —— Profile —— */
.profile-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
}
.profile-avatar {
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* —— Badges —— */
.badge, .badge-estado, .result-pill {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
}
.badge-estado.jugando, .badge.ok {
  background: color-mix(in srgb, var(--brand) 18%, transparent) !important;
  color: var(--brand) !important;
}

/* —— Scrollbar —— */
.chat, .online-list, .user-menu-dropdown {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 35%, transparent) transparent;
}
::selection {
  background: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--ink);
}

/* Filas */
.sala-row:hover, .torneo-row:hover, .match-row:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent) !important;
  border-radius: 10px;
}

/* ===== Crear partida en una sola línea + tooltips ===== */
.create-room-inline .cr-inline-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:10px 12px;
  width:100%;
  overflow-x:auto;
  padding-bottom:4px;
}
.create-room-inline .cr-field{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.create-room-inline .cr-label{
  font-size:.72rem;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}
.create-room-inline .cr-select,
.create-room-inline .cr-input{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  font:inherit;
  min-width:0;
  max-width:160px;
}
.create-room-inline .cr-submit-wrap .cr-submit{
  white-space:nowrap;
  padding:9px 16px !important;
}
.create-room-inline .cr-check-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-size:.78rem;
  white-space:nowrap;
}
.create-room-inline .cr-clock-nums{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.create-room-inline .cr-clock-nums input{
  width:56px;
  padding:8px 6px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  font:inherit;
}
.create-room-inline .cr-extra-row{
  display:flex;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
}
.create-room-inline .cr-extra-row .cr-input{ min-width:200px; max-width:280px; }

/* Tooltips nativos mejorados + CSS fallback */
.cr-tip{ position:relative; }
.cr-tip[data-tip]:hover::after,
.cr-tip[data-tip]:focus-within::after{
  /* desactivado: se usa tooltip en .cr-label */
  content: none !important;
  display: none !important;
}
html[data-theme="dark"] .cr-tip[data-tip]:hover::after,
html[data-theme="dark"] .cr-tip[data-tip]:focus-within::after{
  background:#e2e8f0;
  color:#0f172a;
}

@media (max-width: 900px){
  .create-room-inline .cr-inline-row{
    flex-wrap:wrap;
    overflow:visible;
  }
  .create-room-inline .cr-select,
  .create-room-inline .cr-input{
    max-width:100%;
  }
  .create-room-inline .cr-field{
    flex:1 1 140px;
  }
  .create-room-inline .cr-submit-wrap{
    flex:1 1 100%;
  }
  .create-room-inline .cr-submit-wrap .cr-submit{
    width:100%;
  }
}

/* Tipografía del sistema (Windows / macOS / Linux) */
html, body, button, input, select, textarea {
  font-family: Arial, Helvetica, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif !important;
}

/* Responsive global */
@media (max-width: 720px){
  .wrap{ padding-left:8px !important; padding-right:8px !important; }
  .lobby-main-grid, .lobby-grid{ grid-template-columns:1fr !important; }
  .topbar{ flex-wrap:wrap; gap:8px; }
  .juego-actions{ flex-wrap:wrap; }
  .juego-actions .juego-btn{ font-size:.8rem; padding:7px 10px; }
}

/* Tooltips crear partida: solo al pasar sobre la etiqueta (no al abrir el select) */
.create-room-card,
.create-room-inline,
.create-room-inline .cr-inline-row,
.create-room-inline .cr-field,
.vs-focus-host,
#seccion-crear,
#pane-salas {
  overflow: visible !important;
}
.cr-tip {
  position: relative !important;
  z-index: 1;
}
.cr-tip[data-tip]::after,
.cr-tip[data-tip]::before {
  content: none !important;
  display: none !important;
}
/* Tooltip en el label, no en focus del select (evita solaparse y cortarse) */
.cr-tip .cr-label {
  position: relative;
  cursor: help;
}
.cr-label[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  background: #0f172a;
  color: #f8fafc;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 8px 11px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: min(280px, 70vw);
  z-index: 10060;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  pointer-events: none;
}
html[data-theme="dark"] .cr-label[data-tip]:hover::after {
  background: #e2e8f0;
  color: #0f172a;
}
/* Selects legibles: opción seleccionada visible */
.create-room-inline .cr-select,
.cr-select {
  color: var(--ink, #0f172a) !important;
  background: var(--surface, #fff) !important;
  min-width: 9.5rem;
  max-width: 100%;
}

/* Lista de jugadas */
.moves-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.moves-list {
  max-height: min(50vh, 360px);
  overflow: auto;
  padding: 4px 2px;
}
.moves-ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}
.moves-ol li {
  display: grid;
  grid-template-columns: 2.2em 1fr 1fr;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
}
.moves-ol .mv-num { color: var(--muted, #64748b); font-weight: 700; }
.moves-ol .mv-w, .moves-ol .mv-b { font-weight: 700; letter-spacing: .02em; }
html[data-theme="dark"] .moves-ol li { background: rgba(255,255,255,.04); }

/* Crop modes avatar / portada */
.crop-mode-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.crop-stage.is-cover {
  width: min(100%, 520px) !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 14px !important;
  aspect-ratio: 720 / 200;
}
.crop-stage.is-cover::after {
  border-radius: 10px !important; /* rectángulo para portada, no círculo */
  inset: 6px !important;
  box-shadow: 0 0 0 999px rgba(0,0,0,.32) !important;
}
.crop-stage.is-avatar {
  width: min(320px, 100%) !important;
  height: min(320px, 100%) !important;
  aspect-ratio: 1 / 1;
}
.crop-stage.is-avatar::after {
  border-radius: 50% !important;
  inset: 0 !important;
}
.crop-stage canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Avatar siempre circular (nunca óvalo) */
.pf-avatar-ring {
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  min-height: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
}
.pf-avatar-ring .profile-avatar,
.pf-avatar-ring .profile-avatar.lg,
.pf-avatar-ring img {
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  min-height: 108px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
}
.profile-avatar,
.profile-avatar.lg {
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
}
.profile-avatar.lg {
  width: 104px !important;
  height: 104px !important;
}

/* Portada con imagen */
.pf-cover.has-cover {
  background-color: #0f172a;
  background-repeat: no-repeat;
}
.pf-cover.has-cover .pf-cover-pattern {
  opacity: .12;
}
.pf-cover.has-cover .pf-cover-pattern::after {
  display: none;
}

/* Crop avatar: cuadrado perfecto → círculo, no óvalo */
.crop-modal-layout {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: start !important;
  gap: 16px !important;
}
.crop-stage.is-avatar {
  width: 280px !important;
  height: 280px !important;
  min-width: 280px !important;
  min-height: 280px !important;
  max-width: 280px !important;
  max-height: 280px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px !important;
  flex: none !important;
  justify-self: start !important;
}
.crop-stage.is-avatar::after {
  border-radius: 50% !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.crop-stage.is-avatar canvas {
  width: 280px !important;
  height: 280px !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
@media (max-width: 600px) {
  .crop-modal-layout {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .crop-stage.is-avatar {
    width: 240px !important;
    height: 240px !important;
    min-width: 240px !important;
    min-height: 240px !important;
    max-width: 240px !important;
    max-height: 240px !important;
  }
  .crop-stage.is-avatar canvas {
    width: 240px !important;
    height: 240px !important;
  }
}

/* Modal editar perfil: no cortar contenido */
.profile-modal {
  padding: 12px !important;
  align-items: start !important;
  overflow-y: auto !important;
}
.profile-modal-card {
  width: min(720px, 96vw) !important;
  max-width: min(720px, 96vw) !important;
  max-height: min(94vh, 900px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 12px auto !important;
  box-sizing: border-box !important;
}
.crop-modal-layout {
  grid-template-columns: auto minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.crop-controls {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.crop-controls .form-label,
.crop-controls .crop-range-label {
  word-break: break-word;
}
.crop-controls input[type=file] {
  max-width: 100% !important;
}
@media (max-width: 640px) {
  .crop-modal-layout {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
}

/* Partidas activas: más espacio entre filas y elementos */
.lobby-card .sala-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px 20px !important;
  padding: 16px 14px !important;
  margin: 10px 0 !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 14px !important;
  background: var(--surface-2, #f8fafc) !important;
  flex-wrap: wrap !important;
}
.lobby-card .sala-row + .sala-row {
  margin-top: 12px !important;
}
.lobby-card .sala-row > div:first-child {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.lobby-card .sala-row strong {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  display: block !important;
}
.lobby-card .sala-row .sala-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.lobby-card .sala-row .juego-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  flex: 0 0 auto !important;
}
.lobby-card .sala-row .juego-actions .juego-btn {
  padding: 9px 14px !important;
  min-height: 38px !important;
}
.lobby-card h2 {
  margin-bottom: 6px !important;
}
.lobby-card > .sala-meta {
  margin: 0 0 14px !important;
}
html[data-theme="dark"] .lobby-card .sala-row {
  background: rgba(255,255,255,.04) !important;
}

.crop-stage.is-cover {
  width: min(100%, 520px) !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 160px !important;
  aspect-ratio: auto !important;
  border-radius: 12px !important;
}
.crop-stage.is-cover canvas {
  width: 100% !important;
  height: 100% !important;
}
.crop-file-wrap input[type=file] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
}

/* ========== Editor de perfil: portada + avatar refinados ========== */
.crop-mode-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 14px;
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}
.crop-mode-tabs .crop-mode-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 700;
  color: var(--muted);
}
.crop-mode-tabs .crop-mode-btn.primary,
.crop-mode-tabs .crop-mode-btn[aria-selected="true"] {
  background: var(--brand, #5b5cf0) !important;
  color: #fff !important;
}

.crop-modal-layout {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 8px !important;
  align-items: start !important;
  overflow: visible !important;
}
.crop-modal-layout.is-avatar-layout {
  grid-template-columns: auto minmax(0, 1fr) !important;
}
.crop-modal-layout.is-cover-layout {
  grid-template-columns: 1fr !important;
}

.crop-stage {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.04) 75%),
    var(--surface-2);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid var(--line);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage.is-drop {
  border-color: var(--brand, #5b5cf0) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #5b5cf0) 28%, transparent);
}
.crop-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

.crop-stage.is-avatar {
  width: 280px !important;
  height: 280px !important;
  min-width: 280px !important;
  min-height: 280px !important;
  max-width: 280px !important;
  max-height: 280px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 20px !important;
  justify-self: start;
}
.crop-stage.is-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 999px rgba(0,0,0,.34);
  pointer-events: none;
}

.crop-stage.is-cover {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 720 / 200 !important;
  border-radius: 14px !important;
}
.crop-stage.is-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px !important;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  pointer-events: none;
}

.crop-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(2px);
}
.crop-empty[hidden] { display: none !important; }
.crop-empty-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 2px;
  opacity: .9;
}
.crop-empty strong {
  font-size: .95rem;
  color: var(--ink);
}
.crop-empty span {
  font-size: .78rem;
  color: var(--muted);
  max-width: 28ch;
}
.crop-empty .juego-btn {
  margin-top: 8px;
}
.crop-stage.is-cover .crop-empty {
  border-radius: 12px;
}
.crop-stage.is-avatar .crop-empty {
  /* keep square empty state; circle is only the crop mask after image */
}

.crop-help {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.62);
  color: #fff;
  text-align: center;
  font-size: .74rem;
  pointer-events: none;
  z-index: 3;
}
.crop-help[hidden] { display: none !important; }

.crop-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.crop-modal-layout.is-cover-layout .crop-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
}
.crop-modal-layout.is-cover-layout .crop-file-card {
  grid-column: 1 / -1;
}
.crop-modal-layout.is-cover-layout .crop-range-label {
  grid-column: 1;
}
.crop-modal-layout.is-cover-layout .crop-ctrl-row {
  grid-column: 2;
  justify-content: flex-end;
}
.crop-modal-layout.is-cover-layout .crop-status,
.crop-modal-layout.is-cover-layout .crop-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.crop-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.crop-file-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.crop-file-card-text strong {
  font-size: .9rem;
  color: var(--ink);
}
.crop-file-card-text span {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.3;
}
.crop-file-card .juego-btn {
  flex: none;
  white-space: nowrap;
}
.crop-file-card[hidden] { display: none !important; }

.crop-range-label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: .86rem;
}
.crop-range-label output {
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.crop-range-label input[type=range] {
  width: 100%;
  accent-color: var(--brand, #5b5cf0);
}
.crop-ctrl-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.crop-status {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.crop-hint {
  margin: 0;
  color: var(--muted);
}

.profile-modal-card {
  width: min(760px, 96vw) !important;
  max-width: min(760px, 96vw) !important;
}

@media (max-width: 700px) {
  .crop-modal-layout.is-avatar-layout {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .crop-stage.is-avatar {
    width: min(260px, calc(100vw - 56px)) !important;
    height: min(260px, calc(100vw - 56px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: min(260px, calc(100vw - 56px)) !important;
    max-height: min(260px, calc(100vw - 56px)) !important;
    justify-self: center;
  }
  .crop-controls {
    width: 100%;
  }
  .crop-modal-layout.is-cover-layout .crop-controls {
    grid-template-columns: 1fr;
  }
  .crop-modal-layout.is-cover-layout .crop-ctrl-row {
    grid-column: 1;
    justify-content: flex-start;
  }
  .crop-file-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .crop-file-card .juego-btn {
    width: 100%;
  }
  .crop-mode-tabs {
    width: 100%;
  }
  .crop-mode-tabs .crop-mode-btn {
    flex: 1;
  }
}

html[data-theme="dark"] .crop-stage {
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.03) 75%),
    var(--surface-2);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
html[data-theme="dark"] .crop-empty {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

/* Logo legible en modo oscuro */
html[data-theme="dark"] .brand-logo-img,
html[data-theme="dark"] .auth-about-logo{
  filter: drop-shadow(0 0 10px rgba(99,102,241,.35)) brightness(1.15) contrast(1.05);
}

/* Logo grande y sin espacios muertos */
.brand.brand-logo{
  gap:0 !important;
  padding:0 !important;
  line-height:0 !important;
}
.topbar .brand-logo-img,
.brand-logo-img{
  height:56px !important;
  max-width:min(280px,55vw) !important;
  width:auto !important;
  display:block !important;
  margin:0 !important;
}
@media(max-width:520px){
  .topbar .brand-logo-img,
  .brand-logo-img{height:40px !important;max-width:min(200px,52vw) !important}
}
.auth-about-logo{
  height:72px !important;
  width:auto !important;
  max-width:min(320px,90%) !important;
  margin:0 0 14px 0 !important;
}
html[data-theme="dark"] .brand-logo-img,
html[data-theme="dark"] .auth-about-logo{
  filter: drop-shadow(0 0 12px rgba(99,102,241,.4)) brightness(1.18) !important;
}
.topbar{
  padding-top:8px !important;
  padding-bottom:8px !important;
  align-items:center !important;
}

/* Visibilidad: botones siempre visibles (evita bug del select nativo) */
.cr-vis-field{ min-width: min(100%, 280px); flex: 1 1 220px; }
.cr-vis-seg{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;
}
.cr-vis-opt{
  display:inline-flex; align-items:center; cursor:pointer; margin:0;
}
.cr-vis-opt input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.cr-vis-opt span{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line,#e2e8f0);
  background:var(--surface,#fff);
  color:var(--ink,#0f172a);
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.cr-vis-opt input:checked + span{
  border-color: var(--brand, #0f766e);
  background: color-mix(in srgb, var(--brand, #0f766e) 14%, #fff);
  color: var(--brand, #0f766e);
}
.cr-vis-opt input:focus-visible + span{
  outline: 2px solid color-mix(in srgb, var(--brand,#0f766e) 50%, transparent);
  outline-offset: 2px;
}
html[data-theme="dark"] .cr-vis-opt span{
  background:#1e293b; border-color:#334155; color:#e2e8f0;
}
html[data-theme="dark"] .cr-vis-opt input:checked + span{
  background: color-mix(in srgb, var(--brand,#2dd4bf) 22%, #0f172a);
  border-color: var(--brand, #2dd4bf);
  color: #5eead4;
}

/* Select de visibilidad y demás: no estilizar <option> (rompe el texto en algunos navegadores) */
.create-room-inline .cr-select{
  appearance: auto;
  -webkit-appearance: menulist;
  color: var(--ink, #0f172a);
  background-color: var(--surface, #fff);
  min-width: 11rem;
}
.create-room-inline .cr-select option{
  /* dejar estilos nativos del SO */
  color: initial;
  background: initial;
  font-weight: normal;
}

/* ========== FIX SELECT OPTIONS (Chrome/Edge/Windows) ==========
   Las variables CSS (var(--ink)) no aplican bien dentro del popup
   nativo de <option> y el texto queda transparente/invisible. */
select,
select.cr-select,
.create-room-inline .cr-select,
.form select,
.form-row select {
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
select option,
select optgroup {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: normal !important;
}
html[data-theme="dark"] select,
html.theme-dark select,
html[data-theme="dark"] select.cr-select,
html.theme-dark select.cr-select {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  background-color: #1e293b !important;
  border-color: #475569 !important;
}
html[data-theme="dark"] select option,
html.theme-dark select option,
html[data-theme="dark"] select optgroup,
html.theme-dark select optgroup {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  background-color: #1e293b !important;
}
.create-room-inline .cr-select {
  max-width: none !important;
  min-width: 9rem !important;
}

.sf-lang-flag{ font-size:1.15rem; line-height:1; margin-right:6px; }
.sf-lang-option{ display:flex; align-items:center; gap:8px; }
.sf-lang-btn .sf-lang-flag{ margin-right:4px; }

/* Custom select (reemplazo confiable del nativo) */
select.cr-select-native-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  clip:rect(0,0,0,0) !important;
}
.cr-cselect{
  position:relative;
  display:inline-block;
  min-width:9.5rem;
  max-width:100%;
  vertical-align:middle;
}
.cr-cselect-btn{
  width:100%;
  text-align:left;
  font:inherit;
  font-size:.88rem;
  font-weight:600;
  color:#0f172a;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:8px 32px 8px 12px;
  cursor:pointer;
  line-height:1.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.cr-cselect-btn:hover{ border-color:#94a3b8; }
.cr-cselect.open .cr-cselect-btn{
  border-color:#0f766e;
  box-shadow:0 0 0 3px rgba(15,118,110,.15);
}
.cr-cselect-menu{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 4px);
  z-index:10050;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(15,23,42,.16);
  padding:6px;
  max-height:240px;
  overflow:auto;
}
.cr-cselect-opt{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  font:inherit;
  font-size:.88rem;
  font-weight:600;
  color:#0f172a;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
}
.cr-cselect-opt:hover{ background:#f1f5f9; }
.cr-cselect-opt.is-active{
  background:rgba(15,118,110,.12);
  color:#0f766e;
}
html[data-theme="dark"] .cr-cselect-btn{
  background:#1e293b; color:#f1f5f9; border-color:#475569;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
html[data-theme="dark"] .cr-cselect-menu{
  background:#0f172a; border-color:#334155;
}
html[data-theme="dark"] .cr-cselect-opt{ color:#f1f5f9; }
html[data-theme="dark"] .cr-cselect-opt:hover{ background:#1e293b; }
html[data-theme="dark"] .cr-cselect-opt.is-active{
  background:rgba(45,212,191,.15); color:#5eead4;
}

/* Selects por encima del footer, sin solaparse con links */
.cr-cselect{ z-index: 5; }
.cr-cselect.open{ z-index: 10080; }
.cr-cselect-menu{
  z-index: 10090 !important;
  position: fixed !important;
}
.site-footer, .site-footer-global, .sf-nav, .sf-link{
  position: relative;
  z-index: 1;
}
.site-footer-global{ isolation: isolate; }

/* Menú usuario: separadores visibles y menos espacio muerto */
.user-menu-dropdown .user-menu-sep,
#user-menu-dropdown .user-menu-sep{
  display: block !important;
  height: 1px !important;
  margin: 4px 12px !important;
  padding: 0 !important;
  background: #cbd5e1 !important;
  opacity: 1 !important;
  border: 0 !important;
  list-style: none !important;
}
html[data-theme="dark"] .user-menu-dropdown .user-menu-sep,
html[data-theme="dark"] #user-menu-dropdown .user-menu-sep{
  background: #475569 !important;
}
.user-menu-dropdown a[role="menuitem"],
.user-menu-dropdown .user-menu-item-btn,
.user-menu-theme-btn{
  padding: 8px 14px !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.user-menu-dropdown{
  padding: 6px 0 8px !important;
}

.cr-cselect-menu.is-open{
  display:block !important;
  position:fixed !important;
  z-index:200000 !important;
  margin:0 !important;
}
.cr-cselect-menu[hidden]{ display:none !important; }

/* Header y main: mismo ancho horizontal */
.topbar{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.wrap,
main.wrap,
body > .wrap,
.chat-page-wrap,
.invitation-page,
.character-page{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* vs-focus / lobby cards usan todo el ancho útil */
.vs-focus-host,
#seccion-crear,
#seccion-vs-cpu,
.vs-focus-toolbar,
.lobby-toolbar,
.lobby-card.create-room-card{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.site-footer-global,
.site-footer-full{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.site-footer-inner,
.site-footer-full{
  max-width: none !important;
  width: 100% !important;
}
@media (max-width: 640px){
  .topbar,
  .wrap,
  main.wrap,
  .site-footer-global{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Inicio siempre visible en header */
.top-link-inicio{
  font-weight: 700 !important;
}
/* Main = mismo ancho útil que la barra del header */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.topbar{
  width: 100vw !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
.wrap,
main.wrap,
body > main,
body > .wrap,
.chat-page-wrap{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
.site-footer-global,
.site-footer-full,
.site-footer-inner{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
.vs-focus-toolbar,
.lobby-toolbar,
.vs-focus-host,
#seccion-crear,
.create-room-card,
.lobby-card{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 640px){
  .topbar, .wrap, main.wrap, .site-footer-global{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Alineación fina header ↔ main (mismo margen lateral) */
:root{
  --page-pad-x: 16px;
}
@media (min-width: 900px){
  :root{ --page-pad-x: 16px; }
}
.topbar{
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}
.wrap,
main.wrap,
body > .wrap,
body > main,
.chat-page-wrap{
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  padding-top: 12px !important;
}
.site-footer-global,
.site-footer-full,
.site-footer-inner{
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}
/* Quitar márgenes extra de las tarjetas del lobby en modo vs */
.vs-focus-mode .wrap,
body.vs-focus-mode .wrap{
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}
.vs-focus-toolbar.lobby-toolbar,
.lobby-toolbar.vs-focus-toolbar{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.vs-focus-host,
.vs-focus-host .lobby-card,
.vs-focus-host .create-room-card,
#seccion-crear,
#vs-active-games{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* logo del header no empuja el contenido a un ancho distinto */
.topbar .brand-logo-img{
  max-height: 40px;
  width: auto;
}

/* ===== Menú móvil / responsive topbar ===== */
.mobile-nav-toggle{
  display:none;
  width:40px;height:40px;padding:0;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  cursor:pointer;align-items:center;justify-content:center;flex:none;
}
.mobile-nav-bars{display:flex;flex-direction:column;gap:5px;width:18px}
.mobile-nav-bars span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-bars span:nth-child(2){opacity:0}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav-overlay{
  position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.mobile-nav-overlay.open{opacity:1;pointer-events:auto}
.mobile-nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:12001;
  width:min(320px,88vw);max-width:100%;
  background:var(--surface);color:var(--ink);border-left:1px solid var(--line);
  box-shadow:-12px 0 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .22s ease;
  overflow:auto;-webkit-overflow-scrolling:touch;
}
.mobile-nav-drawer.open{transform:translateX(0)}
.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--surface);z-index:1;
}
.mobile-nav-close{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-size:1.1rem;cursor:pointer;
}
.mobile-nav-body{padding:10px 12px 28px;display:flex;flex-direction:column;gap:4px}
.mobile-nav-link{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;
  border:0;background:transparent;width:100%;text-align:left;font:inherit;cursor:pointer;
}
.mobile-nav-link:hover,.mobile-nav-link:focus{background:var(--surface-2)}
.mobile-nav-link.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#052e16}
.mobile-nav-link.danger{color:#f87171}
.mobile-nav-sep{height:1px;background:var(--line);margin:10px 6px}
.mobile-nav-lang-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;padding:4px 14px}
.mobile-nav-langs{display:flex;flex-direction:column;gap:2px}
.mobile-nav-lang{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;
}
.mobile-nav-lang.is-active{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand)}
.mobile-nav-lang:hover{background:var(--surface-2)}
body.mobile-nav-open{overflow:hidden}

.user-menu-lang-block{padding:6px 8px 8px}
.user-menu-lang-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;padding:2px 6px 6px}
.user-menu-lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.user-menu-lang-grid .lang-option.compact{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:.7rem;font-weight:700;
}
.user-menu-lang-grid .lang-option.compact:hover{background:var(--surface-2)}
.user-menu-lang-grid .lang-option.compact.is-active{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand)}
.user-menu-lang-grid .lang-code{opacity:.8}

@media (max-width: 900px){
  .top-nav-desktop{display:none !important;}
  .mobile-nav-toggle{display:inline-flex;}
  .topbar .meta{gap:6px;flex-wrap:nowrap}
  .topbar{padding:8px 10px;gap:8px}
  .brand-logo-img{height:34px !important;max-height:34px}
  .user-menu-nick{display:none}
  .lang-menu-trigger .top-nav-hide-xs{display:none}
}
@media (max-width: 640px){
  .top-nav-hide-sm,.top-nav-hide-xs{display:none !important}
  .topbar .meta{gap:5px}
  .invitation-nav span.top-nav-hide-xs{display:none}
  .user-menu-dropdown{width:min(300px,calc(100vw - 16px));right:-8px}
  .lang-menu-dropdown{right:0;left:auto}
  .wrap{padding:10px 12px 24px}
}
@media (max-width: 420px){
  .top-login-btn{padding:8px 10px;font-size:.82rem}
  .brand-extra{display:none}
}

/* Mejoras generales responsive */
@media (max-width: 720px){
  .lobby-card,.game-card,.board-panel,.side-panel{border-radius:14px}
  .quick-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 480px){
  .topbar{min-height:52px}
  .msg-toast{left:10px;right:10px;width:auto}
}

/* ===== Menú móvil refinado ===== */
.mobile-nav-drawer{
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--bg)) 100%);
}
.mobile-nav-head strong{font-size:1.05rem;letter-spacing:-.02em}
.mobile-nav-link{
  min-height:48px;
  font-size:1rem;
  border:1px solid transparent;
}
.mobile-nav-link:active{transform:scale(.98)}
.mobile-nav-link .mnav-ico{
  width:1.4em;display:inline-flex;justify-content:center;flex:none;opacity:.9
}
.mobile-nav-link.primary{justify-content:center;margin-top:4px}
.mobile-nav-bars span{height:2.5px;border-radius:3px}
@media (max-width:900px){
  .topbar .invitation-nav{order:1}
  .user-menu{order:2}
  .mobile-nav-toggle{order:3}
}

/* Footer language dropdown */
.sf-lang-drop{position:relative;display:inline-flex}
.sf-lang-btn{cursor:pointer;font:inherit}
.sf-lang-menu{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:50;
  min-width:220px;max-height:min(50vh,360px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);padding:6px;
  display:flex;flex-direction:column;gap:2px;
}
.sf-lang-menu[hidden]{display:none!important}
.sf-lang-option{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;
}
.sf-lang-option:hover{background:var(--surface-2)}
.sf-lang-option.is-active{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
.sf-lang-option .lang-check{margin-left:auto;font-weight:800}
@media(max-width:600px){
  .sf-lang-menu{left:auto;right:0;min-width:min(260px,92vw)}
}

/* Retar: asegurar clic y visibilidad */
.online-user {
  position: relative !important;
  z-index: 1;
  overflow: visible !important;
}
.online-user-link {
  pointer-events: auto;
  max-width: calc(100% - 72px);
}
.online-challenge,
button.online-challenge {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
  min-width: 64px !important;
  min-height: 36px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(34,197,94,.35);
  touch-action: manipulation;
}
.online-challenge:disabled {
  opacity: .7;
  cursor: wait !important;
}

/* —— Ranking compacto en una línea —— */
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-row.rank-line {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px !important;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  min-height: 44px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rank-row.rank-line:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.rank-row.rank-line.top1 {
  background: linear-gradient(90deg, #fef3c7, #fde68a 40%, #fef3c7);
  border-color: #f59e0b;
}
.rank-row.rank-line.top2 {
  background: linear-gradient(90deg, #f1f5f9, #e2e8f0 40%, #f1f5f9);
  border-color: #94a3b8;
}
.rank-row.rank-line.top3 {
  background: linear-gradient(90deg, #ffedd5, #fed7aa 40%, #ffedd5);
  border-color: #d97706;
}
.rank-pos {
  flex: 0 0 48px;
  font-weight: 850;
  font-size: .9rem;
  white-space: nowrap;
}
.rank-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 140px;
  overflow: hidden;
}
.rank-player .profile-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 28px !important;
  border-radius: 50%;
  object-fit: cover;
}
.rank-nick {
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-data {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
}
.rank-data span {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.rank-data b { color: var(--ink); font-weight: 800; }
.rank-data .rk-v b { color: #16a34a; }
.rank-data .rk-d b { color: #dc2626; }
.rank-data .rk-wr b { color: var(--brand, #0d9488); }
.rank-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
#btn-rank-more {
  min-width: 220px;
}
@media (max-width: 700px) {
  .rank-row.rank-line {
    gap: 6px;
    padding: 7px 8px !important;
  }
  .rank-pos { flex-basis: 36px; font-size: .8rem; }
  .rank-player .profile-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  .rank-data {
    gap: 4px;
    font-size: .7rem;
  }
  .rank-data span { padding: 1px 4px; }
}
@media (max-width: 520px) {
  /* En móvil muy chico ocultar algunas métricas para que quepa en una línea */
  .rank-data span:nth-child(4),
  .rank-data span:nth-child(5) {
    display: none;
  }
}

/* —— Iconos SVG planos (más grandes y legibles) —— */
.ico { width: 28px; height: 28px; 
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .92;
}
.ico.tab-ico { width: 28px; height: 28px; margin-right: 8px; }
.ico.btn-ico { width: 24px; height: 24px; margin-right: 8px; }
.ico.inline-ico { width: 22px; height: 22px; }
.ico.crown-ico { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(217,119,6,.45)); }
.ico.nav-ico { width: 28px; height: 28px; margin-right: 8px; }
.top-link-ico .ico, .top-link .ico { width: 28px; height: 28px; }
.mnav-ico .ico, .mobile-nav-link .ico { width: 26px; height: 26px; }
.lobby-tab .ico { width: 26px; height: 26px; }
h2 .ico, h3 .ico { width: 30px; height: 30px; margin-right: 8px; }

/* —— Toast / mensajes mejorados (compacto en móvil) —— */
.toast, #toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  transform: translateX(-50%) translateY(8px);
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  z-index: 10050 !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
  width: auto !important;
  max-height: none !important;
  height: auto !important;
  text-align: center;
  font-size: .85rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  display: none !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.toast.show, #toast.show {
  display: block !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto;
}
@media (max-width: 480px) {
  .toast, #toast {
    max-width: calc(100vw - 20px) !important;
    padding: 9px 12px !important;
    font-size: .82rem !important;
  }
}
.reto-toast, .msg-toast {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-weight: 650;
  box-shadow: 0 14px 36px rgba(0,0,0,.25) !important;
  max-width: min(400px, 92vw);
  text-align: center;
}
.reto-toast a, .msg-toast a { color: inherit; text-decoration: underline; }

/* Perfil: rivales */
.rivals-list { margin-top: 8px; }
.rival-row .rank-data span { font-variant-numeric: tabular-nums; }
.match-row-full { gap: 12px; }
.match-row-full .sala-meta { display: block; margin-top: 2px; }


/* Visibilidad de iconos SVG (img no hereda currentColor) */
.ico {
  filter: none;
}
/* Iconos a color: no invertir en dark */
html[data-theme="dark"] .ico,
html.theme-dark .ico,
html:not([data-theme="light"]):not(.theme-light) .ico {
  filter: none;
  opacity: .95;
}
/* La corona dorada no se invierte */
html[data-theme="dark"] .ico.crown-ico,
html.theme-dark .ico.crown-ico,
html:not([data-theme="light"]):not(.theme-light) .ico.crown-ico {
  filter: drop-shadow(0 1px 3px rgba(217,119,6,.45));
}

.rank-data .rk-sw b { color: #0d9488; }
.rank-data .rk-sw { background: color-mix(in srgb, #0d9488 12%, var(--surface)); }


/* Leyenda ranking */
.rank-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-2);
}
.rank-leg-item{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.35;
}
.rank-leg-item b{
  color:var(--ink);
  font-weight:800;
  margin-right:2px;
}
.rank-leg-item .ico{
  vertical-align:-2px;
}

/* Ranking: misma grilla para encabezado y filas */
.rank-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
}
.rank-head,
.rank-table .rank-row.rank-line {
  display: grid !important;
  grid-template-columns:
    48px
    minmax(110px, 1.6fr)
    repeat(8, minmax(52px, 0.7fr));
  align-items: center;
  column-gap: 6px;
  row-gap: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 720px;
}
.rank-head {
  background: color-mix(in srgb, var(--brand, #0d9488) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brand, #0d9488) 24%, var(--line));
  border-radius: 12px;
  font-size: .72rem;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 2;
}
.rank-head .rk-c {
  text-align: center;
}
.rank-head .rk-player {
  text-align: left;
  font-weight: 800;
  color: var(--ink);
  font-size: .8rem;
}
.rank-head .rk-pos {
  font-weight: 800;
  color: var(--ink);
}
.rank-head .rk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
}
.rank-head .rk-stat b {
  font-size: .8rem;
  font-weight: 900;
  color: var(--ink);
}
.rank-head .rk-stat small {
  font-size: .6rem;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
}
.rank-table .rank-row.rank-line {
  flex-wrap: nowrap !important;
}
.rank-table .rk-pos {
  text-align: center;
  font-weight: 800;
  white-space: nowrap;
}
.rank-table .rk-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}
.rank-table .rk-player .rank-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-table .rk-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  font-variant-numeric: tabular-nums;
}
.rank-table .rk-stat b {
  font-weight: 800;
  color: var(--ink);
  font-size: .9rem;
}
.rank-table .rk-sw {
  background: color-mix(in srgb, #0d9488 14%, var(--surface));
}
.rank-table .rk-sw b { color: #0d9488; }
.rank-table .rk-v b { color: #16a34a; }
.rank-table .rk-d b { color: #dc2626; }
.rank-table .rk-wr b { color: var(--brand, #0d9488); }

.rank-mobile-hint {
  display: none;
  font-size: .72rem;
  color: var(--muted);
  margin: 0 0 8px;
}
@media (max-width: 700px) {
  .rank-mobile-hint { display: block; }
  .rank-head .rk-stat small { display: none; }
}


/* Conectados compactos (inicio) */
#online-card .online-list,
.online-card .online-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
  padding: 2px 0 4px !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
#online-card .online-user,
.online-card .online-user {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 6px 4px 4px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
  transform: none !important;
}
#online-card .online-user:hover,
.online-card .online-user:hover {
  transform: none !important;
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent) !important;
}
#online-card .online-user-link,
.online-card .online-user-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 140px;
  text-decoration: none !important;
  color: inherit !important;
}
#online-card .online-user-link .profile-avatar,
#online-card .online-user .profile-avatar,
.online-card .online-user-link .profile-avatar,
.online-card .online-user .profile-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
#online-card .online-user-info,
.online-card .online-user-info {
  min-width: 0 !important;
  line-height: 1.15 !important;
}
#online-card .online-user-info strong,
.online-card .online-user-info strong {
  display: block !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100px;
}
#online-card .online-user-info small,
.online-card .online-user-info small {
  display: none !important; /* más compacto: sin "Online" en cada fila */
}
#online-card .online-challenge,
.online-card .online-challenge {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  background: var(--brand) !important;
  color: #fff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-height: 24px !important;
}
#online-card .online-me,
.online-card .online-me {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent) !important;
}
#online-card .online-head h2,
.online-card .online-head h2 {
  font-size: 1.05rem !important;
}
#online-card .online-head,
.online-card .online-head {
  margin-bottom: 8px !important;
}
@media (max-width: 560px) {
  #online-card .online-user-link,
  .online-card .online-user-link { max-width: 120px; }
  #online-card .online-user-info strong,
  .online-card .online-user-info strong { max-width: 78px; font-size: .74rem !important; }
}

/* —— Perfil: Rivales mejorados —— */
.profile-rivals-card .pf-section-head,
.profile-matches-card .pf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.profile-rivals-card .pf-section-head h2,
.profile-matches-card .pf-section-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}
.rivals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.rival-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.rival-card:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}
.rival-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rival-card-top .profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rival-card-name {
  min-width: 0;
}
.rival-card-name strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rival-card-name .sala-meta {
  font-size: .75rem;
}
.rival-card-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.rv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  text-align: center;
  line-height: 1.15;
}
.rv-stat b {
  font-size: .95rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.rv-stat span {
  font-size: .58rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-top: 2px;
}
.rv-stat.rv-win b { color: #16a34a; }
.rv-stat.rv-loss b { color: #dc2626; }
html[data-theme="dark"] .rv-stat.rv-win b { color: #4ade80; }
html[data-theme="dark"] .rv-stat.rv-loss b { color: #f87171; }

/* —— Perfil: enfrentamientos limpios —— */
.match-list-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.match-row-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.match-row-clean:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.match-row-clean .match-rival {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.match-row-clean .match-rival .profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.match-meta {
  min-width: 0;
}
.match-meta strong {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin-top: 3px;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600;
}
.match-dot { opacity: .5; }
.match-color {
  font-weight: 750;
  color: var(--ink);
  opacity: .75;
}
.match-row-clean .result-pill {
  font-size: .72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  flex-shrink: 0;
  min-width: 88px;
  text-align: center;
}

@media (max-width: 560px) {
  .rival-card-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .match-row-clean {
    padding: 10px 12px;
  }
  .match-row-clean .result-pill {
    min-width: 72px;
    padding: 5px 8px;
    font-size: .68rem;
  }
}

/* Rivales: lista limpia en una línea */
.rivals-list-clean {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rival-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.rival-line:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.rival-line-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rival-line-who .profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rival-line-who strong {
  font-size: .92rem;
  font-weight: 800;
}
.rival-line-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
}
.rv-chip b {
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rv-chip.rv-win b { color: #16a34a; }
.rv-chip.rv-loss b { color: #dc2626; }
html[data-theme="dark"] .rv-chip.rv-win b { color: #4ade80; }
html[data-theme="dark"] .rv-chip.rv-loss b { color: #f87171; }

/* Torneos — tarjetas claras */
.torneo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, var(--surface-2)), var(--surface-2));
}
.torneo-card.torneo-oficial {
  border-color: color-mix(in srgb, gold 45%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, gold 12%, var(--surface-2)), var(--surface-2));
}
.torneo-card-main { min-width: 0; flex: 1 1 220px; }
.torneo-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 6px;
}
.torneo-name {
  font-size: 1.02rem;
  font-weight: 850;
  color: var(--ink);
}
.torneo-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 650;
}
.torneo-card-meta code {
  font-size: .78rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--ink);
}
.torneo-estado {
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand, #0d9488);
}
.torneo-estado.est-programado { background: rgba(245,158,11,.12); color: #d97706; }
.torneo-estado.est-en_curso { background: rgba(34,197,94,.12); color: #16a34a; }
.torneo-estado.est-finalizado { background: rgba(100,116,139,.12); color: #64748b; }
.torneo-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.badge-oficial {
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(234,179,8,.18);
  color: #b45309;
}
.badge-privado {
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(100,116,139,.12);
  color: #475569;
}

/* Torneos más vistosos */
.torneo-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 8%, var(--surface)) 0%, var(--surface-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.torneo-name { font-size: 1.12rem !important; letter-spacing: -.01em; }
.torneo-card-actions .juego-btn {
  min-width: 96px;
  justify-content: center;
}
.torneo-card-actions .juego-btn.primary {
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Language menu a bit cleaner */
.sf-lang-menu { min-width: 200px; }
.sf-lang-option { padding: 8px 12px; gap: 10px; }
.sf-lang-flag { font-size: 1.15rem; }


/* Selector de idioma mejorado */
.sf-lang-drop { position: relative; display: inline-flex; }
.sf-lang-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
.sf-lang-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line)) !important;
  background: var(--surface) !important;
}
.sf-lang-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 16px !important;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(15,23,42,.16);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-lang-option {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
}
.sf-lang-option:hover { background: var(--surface-2); }
.sf-lang-option.is-active {
  background: color-mix(in srgb, var(--brand) 14%, transparent) !important;
  color: var(--brand) !important;
  font-weight: 800;
}
.sf-lang-flag {
  font-size: 1.25rem !important;
  width: 1.5rem;
  text-align: center;
  line-height: 1;
}
.sf-lang-option .lang-check {
  margin-left: auto;
  color: var(--brand);
  font-weight: 900;
}

/* Iconos un poco más grandes en tabs y títulos */
.lobby-tab .ico { width: 22px !important; height: 22px !important; }
h2 .ico, h3 .ico { width: 26px !important; height: 26px !important; }

/* ===== Banderas SVG a color + menú idioma pulido ===== */
.sf-lang-flag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 24px;
  line-height: 0 !important;
  margin: 0 !important;
}
.sf-lang-flag-img {
  display: block;
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.08);
  flex-shrink: 0;
}
.sf-lang-btn .sf-lang-flag-img {
  width: 22px;
  height: 15px;
}
.sf-lang-name {
  flex: 1;
  min-width: 0;
}
.sf-lang-option .lang-check {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.sf-lang-option .lang-check-ico {
  width: 16px !important;
  height: 16px !important;
}
.sf-lang-menu {
  min-width: 260px !important;
  max-height: min(70vh, 420px);
  overflow-y: auto;
}
.sf-lang-option.is-active .sf-lang-flag-img {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent), 0 1px 3px rgba(15,23,42,.1);
}

/* Iconos SVG a color en navegación */
.top-link-ico .ico.nav-ico,
.mobile-nav-link .ico.nav-ico,
.menu-ico.ico {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}
.top-link-ico {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.mobile-nav-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.user-menu-dropdown a {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.user-menu-dropdown .menu-ico.ico {
  width: 20px !important;
  height: 20px !important;
}

/* ===== Torneos rediseñados ===== */
.torneos-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.torneos-section-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.torneos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .torneos-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.torneo-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 16px 14px !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line)) !important;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--brand) 10%, var(--surface)) 0%,
      var(--surface) 48%,
      var(--surface-2) 100%) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.torneo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .11) !important;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
}
.torneo-card.torneo-oficial {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--line)) !important;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, #f59e0b 14%, var(--surface)) 0%,
      var(--surface) 50%,
      var(--surface-2) 100%) !important;
}
.torneo-card.est-card-en_curso {
  border-color: color-mix(in srgb, #22c55e 35%, var(--line)) !important;
}
.torneo-card.est-card-finalizado {
  opacity: .82;
}
.torneo-card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.torneo-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.torneo-name {
  font-size: 1.18rem !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
  word-break: break-word;
}
.torneo-card-host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 650;
}
.torneo-host-label {
  opacity: .75;
}
.torneo-host {
  color: var(--ink);
  font-weight: 750;
}
.torneo-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.torneo-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.torneo-progress-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
}
.torneo-progress-meta b {
  color: var(--ink);
  font-weight: 850;
}
.torneo-code code {
  font-size: .78rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--ink);
  letter-spacing: .04em;
}
.torneo-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface-2));
  overflow: hidden;
}
.torneo-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand, #0d9488), color-mix(in srgb, var(--brand, #0d9488) 60%, #38bdf8));
  min-width: 0;
  transition: width .25s ease;
}
.torneo-card-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  align-items: center;
  margin-top: 2px;
}
.torneo-card-actions .juego-btn {
  min-width: 0 !important;
  flex: 1 1 auto;
  justify-content: center;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 750;
}
.torneo-card-actions .juego-btn.primary {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent);
}
.torneo-card-actions .btn-ico {
  width: 16px !important;
  height: 16px !important;
}
.badge-fmt {
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand, #0d9488);
}
.torneo-estado {
  font-size: .72rem !important;
  font-weight: 850 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  letter-spacing: .01em;
}
.torneo-estado.est-abierto {
  background: rgba(14, 165, 233, .14) !important;
  color: #0284c7 !important;
}
.torneo-estado.est-programado {
  background: rgba(245, 158, 11, .14) !important;
  color: #d97706 !important;
}
.torneo-estado.est-en_curso {
  background: rgba(34, 197, 94, .14) !important;
  color: #16a34a !important;
}
.torneo-estado.est-pausado {
  background: rgba(168, 85, 247, .12) !important;
  color: #7c3aed !important;
}
.torneo-estado.est-finalizado {
  background: rgba(100, 116, 139, .14) !important;
  color: #64748b !important;
}
.torneos-empty {
  padding: 18px 8px;
  text-align: center;
}


/* Perfil: rivales y enfrentamientos enriquecidos */
.rival-line-who-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rival-line-who-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rival-last{font-size:.72rem;color:var(--muted,#64748b);font-weight:500}
.match-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.match-open-btn{padding:5px 10px!important;font-size:.75rem!important;text-decoration:none}
.match-det{font-weight:600}
.match-code{opacity:.7;font-family:ui-monospace,monospace;font-size:.78em}
.match-row-clean{text-decoration:none;color:inherit}
.match-row-clean .match-rival{text-decoration:none;color:inherit;flex:1;min-width:0}
@media(max-width:640px){
  .rival-line{flex-direction:column;align-items:flex-start;gap:8px}
  .rival-line-stats{flex-wrap:wrap}
  .match-actions{width:100%;justify-content:space-between}
}

/* Paginación mejorada */
.aj-pager{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:16px 0 8px;padding:12px 10px;
  border-radius:14px;
  background:color-mix(in srgb, var(--brand, #4f46e5) 6%, var(--surface-2, #f8fafc));
  border:1px solid color-mix(in srgb, var(--brand, #4f46e5) 18%, var(--line, #e2e8f0));
}
html[data-theme="dark"] .aj-pager,
html.theme-dark .aj-pager{
  background:rgba(99,102,241,.08);
  border-color:#303a49;
}
.aj-pager-nav{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.aj-pager-pages{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;
}
.aj-pager-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 16px!important;
  border-radius:12px!important;font-size:.9rem!important;font-weight:700!important;
  text-decoration:none;border:1px solid var(--line,#e2e8f0);
  background:var(--surface,#fff);color:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;
}
.aj-pager-btn:hover:not(.is-disabled){
  border-color:#6366f1;color:#4f46e5;
  box-shadow:0 4px 12px rgba(79,70,229,.15);
  transform:translateY(-1px);
}
.aj-pager-btn.is-disabled{opacity:.4;pointer-events:none;cursor:default}
.aj-pager-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 8px;
  border-radius:12px;font-size:.9rem;font-weight:700;
  text-decoration:none;color:inherit;
  border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.aj-pager-num:hover{
  background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.25);color:#4f46e5;
}
.aj-pager-num.is-current{
  background:#4f46e5;color:#fff;border-color:#4f46e5;
  box-shadow:0 4px 12px rgba(79,70,229,.3);
}
.aj-pager-ellipsis{opacity:.5;padding:0 4px;font-weight:700}
.aj-pager-info{
  font-size:.85rem;color:var(--muted,#64748b);font-weight:600;letter-spacing:.01em;
}

/* Iconos SVG más grandes en todo el sitio */
.ico {
  width: 32px !important;
  height: 32px !important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
}
.ico.tab-ico { width: 32px !important; height: 32px !important; margin-right: 8px; }
.ico.btn-ico { width: 28px !important; height: 28px !important; margin-right: 8px; }
.ico.inline-ico { width: 26px !important; height: 26px !important; }
.ico.crown-ico { width: 36px !important; height: 36px !important; }
.ico.nav-ico { width: 32px !important; height: 32px !important; margin-right: 8px; }
h1 .ico, h2 .ico, h3 .ico { width: 36px !important; height: 36px !important; margin-right: 8px; }
.top-link .ico, .top-link-ico .ico { width: 32px !important; height: 32px !important; }
.lobby-tab .ico { width: 30px !important; height: 30px !important; }
.mobile-nav-link .ico, .mnav-ico .ico { width: 30px !important; height: 30px !important; }
.flat-icon { width: 28px !important; height: 28px !important; }
.flat-icon svg, .af-ico svg { width: 30px !important; height: 30px !important; }
.sf-lang-flag-img { width: 28px !important; height: 20px !important; object-fit: cover; border-radius: 3px; }
img.ico[src*=".svg"] { min-width: 22px; min-height: 22px; }

.aj-pager.is-loading{opacity:.55;pointer-events:none}
.aj-pager-box.is-loading{opacity:.6;transition:opacity .15s}
.aj-pager-box{min-height:40px}


/* ===== DM modal siempre visible (también en páginas sin game.css completo) ===== */
.dm-windows{position:fixed!important;inset:0!important;pointer-events:none!important;z-index:200000!important}
.dm-win{
  pointer-events:auto!important;position:fixed!important;
  right:16px!important;bottom:56px!important;left:auto!important;top:auto!important;
  width:min(380px,94vw)!important;height:min(460px,78vh)!important;
  display:flex!important;flex-direction:column!important;
  background:#fff!important;color:#0f172a!important;
  border:2px solid #0f766e!important;border-radius:16px!important;
  box-shadow:0 22px 56px rgba(0,0,0,.35)!important;overflow:hidden!important;
  z-index:200001!important;
}
html[data-theme="dark"] .dm-win, html.theme-dark .dm-win{background:#0f172a!important;color:#e2e8f0!important;border-color:#2dd4bf!important}
.dm-win.minimized{display:none!important}
.dm-win-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  padding:10px 12px!important;background:linear-gradient(135deg,#0f766e,#115e59)!important;color:#fff!important;
  cursor:grab!important;user-select:none!important;flex-shrink:0!important
}
.dm-win-title{font-size:.92rem!important;font-weight:800!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-win-actions{display:flex;gap:4px}
.dm-icon-btn{border:0;background:rgba(255,255,255,.18);color:#fff;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:.95rem}
.dm-icon-btn:hover{background:rgba(255,255,255,.3)}
.dm-win-body{display:flex;flex-direction:column;flex:1;min-height:0}
.dm-win-msgs{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:inherit}
.dm-msg{max-width:88%;align-self:flex-start;background:#f1f5f9;border-radius:12px 12px 12px 4px;padding:8px 11px}
.dm-msg.mine{align-self:flex-end;background:#ccfbf1;border-radius:12px 12px 4px 12px}
html[data-theme="dark"] .dm-msg{background:#1e293b}
html[data-theme="dark"] .dm-msg.mine{background:#134e4a}
.dm-msg-text{font-size:.9rem;line-height:1.4;word-break:break-word}
.dm-msg-ts{font-size:.7rem;opacity:.65;margin-top:3px}
.dm-win-form{display:flex;gap:6px;padding:10px;border-top:1px solid #e2e8f0;align-items:center;flex-shrink:0}
html[data-theme="dark"] .dm-win-form{border-color:#334155}
.dm-win-input{flex:1;min-width:0;padding:9px 11px;border-radius:11px;border:1px solid #cbd5e1;font:inherit}
html[data-theme="dark"] .dm-win-input{background:#0b1220;border-color:#334155;color:#e2e8f0}
.dm-tray{position:fixed!important;right:12px!important;left:auto!important;bottom:12px!important;z-index:200002!important;display:flex;flex-wrap:wrap;gap:6px;max-width:min(96vw,560px);pointer-events:none;justify-content:flex-end}
.dm-tray-chip{pointer-events:auto;border:1px solid #99f6e4;background:#0f766e;color:#fff;border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 8px 20px rgba(15,118,110,.35)}
.dm-tray-chip.has-unread{background:#b45309;border-color:#fbbf24;animation:dmPulse 1.2s ease infinite}
.dm-tray-badge{background:#fff;color:#0f766e;border-radius:999px;min-width:18px;height:18px;padding:0 5px;font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
@keyframes dmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.gchat-nick,.chat-nick-btn,.dm-open-nick{background:none;border:0;padding:0;color:#0f766e;font-weight:800;cursor:pointer;font:inherit}
.gchat-nick:hover,.chat-nick-btn:hover{text-decoration:underline}
html[data-theme="dark"] .gchat-nick,html[data-theme="dark"] .chat-nick-btn{color:#5eead4}

/* ===== Perfil compacto: una sola línea ===== */
.profile-page .ico{width:22px!important;height:22px!important}
.profile-page h2 .ico,.profile-page h3 .ico{width:24px!important;height:24px!important;margin-right:6px}
.rival-line{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;padding:8px 10px!important;flex-wrap:nowrap!important;
}
.rival-line-who{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.rival-line-who .profile-avatar,.rival-line-who img{width:28px!important;height:28px!important;border-radius:50%}
.rival-line-who-text{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0}
.rival-line-who-text strong{font-size:.88rem;white-space:nowrap}
.rival-last{font-size:.72rem;opacity:.7;white-space:nowrap}
.rival-line-stats{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;overflow-x:auto;max-width:65%}
.rv-chip{font-size:.72rem!important;padding:3px 7px!important;white-space:nowrap}
.match-row-clean{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;padding:8px 10px!important;flex-wrap:nowrap!important
}
.match-row-clean .match-rival{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.match-row-clean .profile-avatar,.match-row-clean .match-rival img{width:28px!important;height:28px!important}
.match-meta strong{font-size:.88rem}
.match-sub{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.match-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.result-pill{font-size:.72rem!important;padding:4px 8px!important}
.match-open-btn{padding:4px 10px!important;font-size:.75rem!important}

/* ===== Paginación más vistosa ===== */
.aj-pager{
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;
  margin:18px 0 10px!important;padding:14px 14px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(14,165,233,.08))!important;
  border:1px solid rgba(79,70,229,.22)!important;
  box-shadow:0 8px 24px rgba(79,70,229,.08)!important;
}
html[data-theme="dark"] .aj-pager{
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(14,165,233,.1))!important;
  border-color:rgba(129,140,248,.28)!important;
}
.aj-pager-nav{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.aj-pager-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.aj-pager-btn{
  min-height:44px!important;padding:10px 18px!important;border-radius:14px!important;
  font-size:.95rem!important;font-weight:800!important;letter-spacing:.01em;
  background:linear-gradient(180deg,#6366f1,#4f46e5)!important;color:#fff!important;border:0!important;
  box-shadow:0 6px 16px rgba(79,70,229,.35)!important;
}
.aj-pager-btn:hover:not(.is-disabled){filter:brightness(1.08);transform:translateY(-1px)}
.aj-pager-btn.is-disabled{opacity:.35!important;filter:grayscale(.3);box-shadow:none!important}
.aj-pager-num{
  min-width:42px!important;height:42px!important;border-radius:12px!important;
  font-size:.95rem!important;font-weight:800!important;
  border:1px solid rgba(79,70,229,.2)!important;background:var(--surface,#fff)!important
}
.aj-pager-num:hover{background:rgba(99,102,241,.12)!important;color:#4f46e5}
.aj-pager-num.is-current{
  background:linear-gradient(180deg,#6366f1,#4f46e5)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 6px 16px rgba(79,70,229,.35)!important
}
.aj-pager-info{font-size:.88rem!important;font-weight:700!important;color:var(--muted,#64748b)}

/* ===== Jugadas posibles más visibles ===== */
.board .sq.target::after,
.sq.target::after{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;
  width:38%!important;height:38%!important;margin:0!important;
  transform:translate(-50%,-50%)!important;border-radius:50%!important;
  background:rgba(34,197,94,.72)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.45),0 2px 8px rgba(0,0,0,.25)!important;
  z-index:4!important;pointer-events:none!important;
}
.board .sq.dark.target::after,.sq.dark.target::after{background:rgba(255,255,255,.55)!important}
.board .sq.light.target::after,.sq.light.target::after{background:rgba(22,101,52,.55)!important}
.board .sq.capture::after,.sq.capture::after{
  content:""!important;position:absolute!important;inset:6%!important;
  border:4px solid rgba(239,68,68,.92)!important;border-radius:50%!important;
  background:transparent!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)!important;
  z-index:4!important;pointer-events:none!important;
}
.board .sq.sel,.sq.sel{
  box-shadow:inset 0 0 0 3px #2563eb!important;
  background:#93c5fd!important;
}
.board .sq{overflow:visible!important}

/* Chat de partida más claro */
.side-panel .chat-box,.game-chat,.room-chat,.chat-log{
  border-radius:14px;
}
.side-panel .chat-msg,.gchat-row,.room-chat-msg{
  padding:6px 8px;border-radius:10px;margin-bottom:4px;
}


/* Chat público / partida más legible */
.chat-card, .chat-card-tab{
  border-radius:16px!important;
  border:1px solid var(--line,#e2e8f0);
  background:var(--surface,#fff);
  overflow:hidden;
}
.chat#chat, .chat-card .chat{
  max-height:min(42vh,420px);
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(180deg,rgba(15,118,110,.04),transparent 120px);
}
.comment-item.post.reply{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 10px;border-radius:12px;
  background:color-mix(in srgb,var(--surface-2,#f8fafc) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--line,#e2e8f0) 70%,transparent);
}
.comment-item .comment-user,.comment-item .chat-nick-btn{
  font-weight:800;color:#0f766e;cursor:pointer;background:none;border:0;padding:0;font:inherit
}
html[data-theme="dark"] .comment-item .chat-nick-btn{color:#5eead4}
.comment-text,.post-content{font-size:.9rem;line-height:1.4;word-break:break-word}
.chat-form{
  display:flex;align-items:center;gap:8px;padding:10px;
  border-top:1px solid var(--line,#e2e8f0);background:var(--surface-2,#f8fafc)
}
.chat-form input{
  flex:1;min-width:0;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line,#cbd5e1);font:inherit
}
.chat-emoji-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line,#e2e8f0);
  background:var(--surface,#fff);font-size:1.2rem;cursor:pointer
}
.chat-load-more{width:100%;margin-bottom:8px;font-size:.82rem!important}

/* Estabilidad visual del tablero */
.board{min-height:200px;background:#c4a574}
.board .piece{opacity:1!important}
.board .piece.piece-landing{animation:pieceLandIn .28s ease-out both}
@keyframes pieceLandIn{
  0%{transform:scale(.96);filter:brightness(1.08)}
  100%{transform:scale(1);filter:none}
}



/* ===== Responsive global (corrección de desfase) ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
.wrap, .chat-page-wrap, .info-wrap, .profile-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* Chat general: layout adaptable */
.chat-page-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) !important;
  gap: 14px !important;
  align-items: start !important;
}
.chat-page-main { min-width: 0 !important; }
.chat-page-side { min-width: 0 !important; }
.global-chat-msgs {
  min-height: 280px;
  max-height: min(58vh, 520px);
  overflow: auto;
}
.global-chat-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.global-chat-form input {
  flex: 1 1 160px;
  min-width: 0;
}

/* DM flotante robusto */
#dm-windows.dm-windows,
.dm-windows {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 300000 !important;
}
#dm-windows .dm-win,
.dm-win {
  pointer-events: auto !important;
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 300001 !important;
  width: min(380px, calc(100vw - 16px)) !important;
  height: min(460px, calc(100vh - 72px)) !important;
  max-width: calc(100vw - 12px) !important;
  max-height: calc(100dvh - 64px) !important;
  background: #fff !important;
  color: #0f172a !important;
  border: 2px solid #0f766e !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.38) !important;
  overflow: hidden !important;
}
html[data-theme="dark"] .dm-win,
html.theme-dark .dm-win {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #2dd4bf !important;
}
.dm-win.minimized,
.dm-win[hidden] {
  display: none !important;
}
.dm-tray {
  position: fixed !important;
  z-index: 300002 !important;
  right: 10px !important;
  left: auto !important;
  bottom: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: calc(100vw - 16px) !important;
  pointer-events: none !important;
  justify-content: flex-end !important;
}

/* Topbar mobile */
@media (max-width: 900px) {
  .chat-page-layout {
    grid-template-columns: 1fr !important;
  }
  .chat-page-side {
    order: 2;
  }
  .top-nav-desktop span:not(.nav-badge) {
    /* keep icons readable */
  }
  .lobby-grid {
    grid-template-columns: 1fr !important;
  }
  .rank-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rank-head, .rank-row {
    min-width: 640px;
  }
  .torneos-grid {
    grid-template-columns: 1fr !important;
  }
  .profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .rival-line, .match-row-clean {
    flex-wrap: wrap !important;
  }
  .rival-line-stats {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 640px) {
  .wrap, .chat-page-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .topbar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .brand-logo-img {
    width: auto !important;
    max-height: 40px !important;
  }
  .ico.nav-ico, .top-link .ico {
    width: 24px !important;
    height: 24px !important;
  }
  .lobby-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }
  .lobby-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .dm-win {
    right: 6px !important;
    left: 6px !important;
    bottom: 56px !important;
    width: auto !important;
    height: min(70dvh, 520px) !important;
  }
  .dm-tray {
    left: 6px !important;
    right: 6px !important;
    justify-content: flex-start !important;
  }
  .aj-pager-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: .85rem !important;
  }
  .aj-pager-num {
    min-width: 36px !important;
    height: 36px !important;
  }
  .global-chat-form {
    flex-wrap: wrap;
  }
  .global-chat-form .juego-btn {
    width: 100%;
  }
  .juego-main {
    grid-template-columns: 1fr !important;
  }
  .side-panel {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .profile-metrics {
    grid-template-columns: 1fr 1fr !important;
  }
  .pf-stats-row {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}



/* ===== DM theme-aware + toast + collapse ===== */
.dm-toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(12px);
  z-index:300100;max-width:min(420px,92vw);padding:12px 16px;border-radius:14px;
  background:var(--surface,#fff);color:var(--ink,#0f172a);
  border:1px solid var(--line,#e2e8f0);
  box-shadow:0 16px 40px rgba(0,0,0,.22);font-size:.9rem;font-weight:650;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.dm-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
html[data-theme="dark"] .dm-toast,html.theme-dark .dm-toast{
  background:#1e293b;color:#e2e8f0;border-color:#334155;
}

.dm-win{
  background:var(--surface,#fff)!important;
  color:var(--ink,#0f172a)!important;
  border:1px solid var(--line,#cbd5e1)!important;
  box-shadow:0 20px 50px rgba(15,23,42,.28)!important;
}
html[data-theme="dark"] .dm-win,
html.theme-dark .dm-win{
  background:var(--surface,#0f172a)!important;
  color:var(--ink,#e2e8f0)!important;
  border-color:#334155!important;
  box-shadow:0 20px 50px rgba(0,0,0,.5)!important;
}
.dm-win-head{
  background:linear-gradient(135deg,var(--brand,#0f766e),color-mix(in srgb,var(--brand,#0f766e) 70%,#000))!important;
  color:#fff!important;
}
.dm-win-body{background:inherit!important}
.dm-win-msgs{background:transparent!important}
.dm-msg{
  background:color-mix(in srgb,var(--surface-2,#f1f5f9) 100%,transparent)!important;
  color:inherit!important;
}
.dm-msg.mine{
  background:color-mix(in srgb,var(--brand,#0f766e) 22%,var(--surface,#fff))!important;
}
html[data-theme="dark"] .dm-msg{
  background:#1e293b!important;
}
html[data-theme="dark"] .dm-msg.mine{
  background:color-mix(in srgb,#2dd4bf 22%,#0f172a)!important;
}
.dm-win-form{
  border-top:1px solid var(--line,#e2e8f0)!important;
  background:color-mix(in srgb,var(--surface-2,#f8fafc) 100%,transparent)!important;
}
html[data-theme="dark"] .dm-win-form{border-color:#334155!important;background:#0b1220!important}
.dm-win-input{
  background:var(--surface,#fff)!important;
  color:inherit!important;
  border:1px solid var(--line,#cbd5e1)!important;
}
html[data-theme="dark"] .dm-win-input{
  background:#0b1220!important;
  border-color:#334155!important;
  color:#e2e8f0!important;
}
.dm-win.minimized,
.dm-win[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.dm-tray-chip{
  background:var(--brand,#0f766e)!important;
  border-color:color-mix(in srgb,var(--brand,#0f766e) 60%,#fff)!important;
  color:#fff!important;
}
.dm-tray-chip.has-unread{
  background:#b45309!important;
  border-color:#fbbf24!important;
  animation:dmPulse 1.2s ease infinite;
}



/* ===== DM ventana flotante — layout limpio (prioridad final) ===== */
#dm-windows.dm-windows,
.dm-windows{
  position:fixed !important;
  inset:auto !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important;
  pointer-events:none !important;
  z-index:300000 !important;
  display:block !important;
  overflow:visible !important;
}
#dm-windows .dm-win,
.dm-win{
  pointer-events:auto !important;
  position:fixed !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:360px !important;
  max-width:calc(100vw - 16px) !important;
  height:440px !important;
  max-height:calc(100dvh - 72px) !important;
  right:16px !important;
  bottom:64px !important;
  left:auto !important;
  top:auto !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  border-radius:16px !important;
  border:1px solid var(--line, #cbd5e1) !important;
  background:var(--surface, #ffffff) !important;
  color:var(--ink, #0f172a) !important;
  box-shadow:0 22px 50px rgba(15,23,42,.28) !important;
  overflow:hidden !important;
  z-index:300001 !important;
}
html[data-theme="dark"] .dm-win,
html.theme-dark .dm-win{
  background:#0f172a !important;
  color:#e2e8f0 !important;
  border-color:#334155 !important;
  box-shadow:0 22px 50px rgba(0,0,0,.55) !important;
}
.dm-win.expanded{
  width:min(520px, calc(100vw - 16px)) !important;
  height:min(640px, calc(100dvh - 72px)) !important;
}
.dm-win.minimized,
.dm-win[hidden]{
  display:none !important;
}
.dm-win-head{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  flex:0 0 auto !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:0 10px !important;
  margin:0 !important;
  background:linear-gradient(135deg, #0f766e, #115e59) !important;
  color:#fff !important;
  cursor:grab !important;
  user-select:none !important;
  overflow:hidden !important;
}
.dm-win-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:.92rem !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#fff !important;
}
.dm-win-actions{
  display:flex !important;
  flex:0 0 auto !important;
  gap:4px !important;
}
.dm-icon-btn{
  width:30px !important; height:30px !important;
  border:0 !important; border-radius:8px !important;
  background:rgba(255,255,255,.18) !important; color:#fff !important;
  cursor:pointer !important; font-size:.95rem !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; line-height:1 !important;
}
.dm-icon-btn:hover{background:rgba(255,255,255,.3) !important}
.dm-win-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  overflow:hidden !important;
  background:inherit !important;
}
.dm-win-msgs{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:10px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.dm-msg{
  max-width:85% !important;
  align-self:flex-start !important;
  background:var(--surface-2, #f1f5f9) !important;
  border-radius:12px 12px 12px 4px !important;
  padding:8px 11px !important;
  color:inherit !important;
}
.dm-msg.mine{
  align-self:flex-end !important;
  background:color-mix(in srgb, #0f766e 18%, var(--surface,#fff)) !important;
  border-radius:12px 12px 4px 12px !important;
}
html[data-theme="dark"] .dm-msg{background:#1e293b !important}
html[data-theme="dark"] .dm-msg.mine{background:#134e4a !important}
.dm-msg-text{font-size:.9rem !important; line-height:1.4 !important; word-break:break-word !important}
.dm-msg-ts{font-size:.68rem !important; opacity:.65 !important; margin-top:3px !important}
.dm-win-form{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:10px !important;
  margin:0 !important;
  border-top:1px solid var(--line,#e2e8f0) !important;
  background:var(--surface-2,#f8fafc) !important;
}
html[data-theme="dark"] .dm-win-form{border-color:#334155 !important; background:#0b1220 !important}
.dm-win-input{
  flex:1 1 auto !important;
  min-width:0 !important;
  padding:9px 11px !important;
  border-radius:11px !important;
  border:1px solid var(--line,#cbd5e1) !important;
  background:var(--surface,#fff) !important;
  color:inherit !important;
  font:inherit !important;
}
html[data-theme="dark"] .dm-win-input{background:#0b1220 !important; border-color:#334155 !important; color:#e2e8f0 !important}
.dm-send-btn{flex:0 0 auto !important; white-space:nowrap !important}
.dm-emoji-btn{flex:0 0 auto !important; width:38px !important; height:38px !important}

/* Bandeja inferior: solo chips, nunca la ventana completa */
#dm-tray.dm-tray,
.dm-tray{
  position:fixed !important;
  right:10px !important;
  left:auto !important;
  bottom:10px !important;
  top:auto !important;
  z-index:300002 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  max-width:min(96vw, 560px) !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
  overflow:visible !important;
}
.dm-tray-chip{
  pointer-events:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  max-width:180px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid #99f6e4 !important;
  background:#0f766e !important;
  color:#fff !important;
  font-size:.8rem !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 8px 20px rgba(15,118,110,.3) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.dm-tray-nick{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:120px !important;
}
.dm-tray-badge{
  background:#fff !important;
  color:#0f766e !important;
  border-radius:999px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  font-size:.68rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
}
.dm-tray-chip.has-unread{
  background:#b45309 !important;
  border-color:#fbbf24 !important;
}

@media (max-width:640px){
  .dm-win{
    right:8px !important;
    left:8px !important;
    width:auto !important;
    bottom:56px !important;
    height:min(70dvh, 520px) !important;
  }
}


/* ===== Responsive chat + global polish ===== */
@media (max-width:900px){
  .chat-page-layout{grid-template-columns:1fr!important}
  .chat-page-side{order:2}
  .lobby-grid{grid-template-columns:1fr!important}
  .juego-main{grid-template-columns:1fr!important}
}
@media (max-width:700px){
  .topbar{flex-wrap:wrap;gap:6px}
  .wrap,.chat-page-wrap{padding-left:10px!important;padding-right:10px!important}
  .global-chat-msgs{max-height:50vh}
  .aj-dm-win{right:8px!important;left:8px!important;width:auto!important;bottom:56px!important}
  .rank-table{overflow-x:auto}
  .profile-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:480px){
  .top-link span:not(.nav-badge){display:none}
  .brand-logo-img{max-height:36px!important}
  .lobby-tabs{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
  .lobby-tab{flex:0 0 auto;white-space:nowrap}
  .aj-pager-btn{min-height:40px;padding:8px 12px}
}

/* Chat global estetico */

/* Chat global estetico */
.global-chat-msgs{
  height:min(58vh,520px)!important;max-height:min(58vh,520px);
  overflow:auto;border:1px solid var(--line);border-radius:16px;padding:12px;
  background:var(--surface-2);margin:10px 0
}
.gchat-row{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:10px 12px;
  border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.gchat-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.gchat-av-letter{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:#0f766e;color:#fff;font-weight:800;font-size:.9rem;flex-shrink:0
}
.gchat-body{min-width:0;flex:1}
.gchat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:3px}
.gchat-time{font-size:.72rem;opacity:.65;margin-left:auto}
.gchat-text{font-size:.95rem;line-height:1.45;word-break:break-word}
.global-chat-form{display:flex;gap:8px;align-items:center}
.global-chat-form input{flex:1;min-width:0;padding:11px 14px;border-radius:12px}


/* Solo menú hamburguesa en móvil (sin nav duplicada) */
@media (max-width: 900px) {
  .topbar .top-actions > .top-link,
  .topbar .top-actions > .reto-nav,
  .topbar .top-actions > .theme-toggle,
  .topbar .top-actions > .top-login-btn,
  .top-nav-desktop {
    display: none !important;
  }
  .mobile-nav-toggle {
    display: inline-flex !important;
  }
  .topbar .user-menu,
  .topbar .aj-bell-wrap {
    display: inline-flex !important;
  }
}

/* Avatar circular (no “huevo”) */
.profile-avatar,
.profile-avatar.lg,
.profile-avatar-wrap .profile-avatar,
.profile-hero .profile-avatar.lg,
.pf-avatar-ring .profile-avatar,
.pf-avatar-ring .profile-avatar.lg,
.user-menu-trigger .profile-avatar,
.online-user-link .profile-avatar,
.follow-user .profile-avatar,
.match-rival .profile-avatar,
.aj-dm-av,
.gchat-av,
.gchat-on-av {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
}
.profile-avatar.lg,
.profile-hero .profile-avatar.lg,
.pf-avatar-ring .profile-avatar.lg {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
}
.profile-avatar:not(.lg) {
  width: 42px !important;
  height: 42px !important;
}
.user-menu-trigger .profile-avatar {
  width: 32px !important;
  height: 32px !important;
}


/* Tablero estable */
.board, #board, .chess-board {
  min-width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  position: relative;
}
.move-flyer {
  z-index: 5;
  pointer-events: none;
  will-change: transform, opacity;
}


/* Nivel numérico coloreado junto al nick */
.nick-level{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.35em;height:1.35em;padding:0 5px;margin-right:4px;
  border-radius:6px;font-size:.78rem;font-weight:800;line-height:1;
  background:rgba(0,0,0,.06);border:1px solid currentColor;
  vertical-align:middle;font-variant-numeric:tabular-nums;
}
html.dark .nick-level, body.dark .nick-level{background:rgba(255,255,255,.08)}
.nick-name{font-weight:700}
.level-badge{display:none!important} /* legacy oculto */


/* ===== Botón tema: sol / luna ===== */
.theme-toggle{
  position:relative;
  color:var(--ink,#1a1f28);
}
.theme-toggle .theme-ico{
  display:none;
  line-height:0;
  pointer-events:none;
}
.theme-toggle .theme-ico svg{
  display:block;
  width:18px;height:18px;
}
/* En modo claro se muestra la luna (para pasar a oscuro) */
html[data-theme="light"] .theme-toggle .theme-ico-moon,
html.theme-light .theme-toggle .theme-ico-moon,
html:not([data-theme="dark"]):not(.theme-dark) .theme-toggle .theme-ico-moon{
  display:inline-flex;
}
/* En modo oscuro se muestra el sol (para pasar a claro) */
html[data-theme="dark"] .theme-toggle .theme-ico-sun,
html.theme-dark .theme-toggle .theme-ico-sun{
  display:inline-flex;
}
.theme-toggle.compact{
  width:36px;height:36px;min-width:36px;
  padding:0;overflow:hidden;
}

/* ===== Toast monedas diarias (arriba, visible) ===== */
.daily-toast{
  position:fixed !important;
  top:max(16px, env(safe-area-inset-top, 0px) + 12px) !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) translateY(-12px) !important;
  z-index:10050 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  max-width:min(420px, calc(100vw - 24px)) !important;
  width:auto !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  border:1px solid color-mix(in srgb, var(--brand, #0d9488) 35%, var(--line, #d8dee8)) !important;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand, #0d9488) 18%, var(--surface, #fff)), var(--surface, #fff)) !important;
  color:var(--ink, #0f172a) !important;
  box-shadow:0 12px 40px rgba(15,23,42,.18) !important;
  font-size:1rem !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease !important;
}
.daily-toast.show{
  opacity:1 !important;
  transform:translateX(-50%) translateY(0) !important;
  pointer-events:auto !important;
}
.daily-toast.hide{
  opacity:0 !important;
  transform:translateX(-50%) translateY(-12px) !important;
}
.daily-toast-ico{
  font-size:1.55rem !important;
  line-height:1 !important;
  flex:0 0 auto;
}
.daily-toast-txt{
  font-size:1rem !important;
  font-weight:750 !important;
}
@media(max-width:560px){
  .daily-toast{
    top:max(12px, env(safe-area-inset-top, 0px) + 8px) !important;
    padding:12px 14px !important;
    font-size:.95rem !important;
    max-width:calc(100vw - 20px) !important;
  }
  .daily-toast-ico{font-size:1.35rem !important}
}

/* ===== Tema en footer (desplegable con color) ===== */
.sf-theme-drop{position:relative;display:inline-flex;z-index:5}
.sf-theme-drop.is-open{z-index:100200}
.sf-theme-btn{
  background:linear-gradient(135deg, var(--brand, #0d9488), var(--brand2, #6366f1)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  font-weight:750 !important;
  box-shadow:0 6px 18px color-mix(in srgb, var(--brand, #0d9488) 35%, transparent);
  position:relative;z-index:2;
}
.sf-theme-btn:hover{filter:brightness(1.06)}
.sf-theme-btn .theme-ico{color:#fff}
.sf-theme-btn .sf-theme-ico{display:inline-grid;place-items:center;width:20px;height:20px}
.sf-theme-menu{
  position:fixed !important;
  min-width:200px;
  background:var(--surface,#fff) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  box-shadow:0 16px 40px rgba(15,23,42,.22) !important;
  padding:6px !important;
  z-index:100250 !important;
  opacity:1 !important;
}
.sf-theme-menu[hidden]{display:none !important}
.sf-theme-option{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:0;border-radius:10px;background:transparent;
  color:var(--ink) !important;font:inherit;font-weight:650;cursor:pointer;text-align:left;
}
.sf-theme-option:hover{background:var(--surface-2,#f1f5f9)}
.sf-theme-option.is-active{
  background:color-mix(in srgb, var(--brand,#0d9488) 16%, transparent);
  color:var(--brand,#0d9488) !important;font-weight:800;
}
html[data-theme="dark"] .sf-theme-menu,html.theme-dark .sf-theme-menu{background:#1a222d !important;border-color:#2c3848 !important}
html[data-theme="dark"] .sf-theme-option:hover,html.theme-dark .sf-theme-option:hover{background:#243041}
.site-footer-global,.site-footer{position:relative;z-index:30}
.sf-lang-drop{position:relative;z-index:5}
.sf-lang-drop.is-open{z-index:100200}
.sf-lang-menu{z-index:100250 !important}


/* ===== Intro / login más vistosa ===== */
body.auth-vivid.auth-split{
  background:
    radial-gradient(ellipse 900px 500px at 8% -5%, color-mix(in srgb, #0d9488 22%, transparent), transparent 55%),
    radial-gradient(ellipse 700px 420px at 95% 5%, color-mix(in srgb, #6366f1 16%, transparent), transparent 50%),
    radial-gradient(ellipse 500px 300px at 50% 100%, color-mix(in srgb, #f59e0b 8%, transparent), transparent 45%),
    var(--bg);
}
html[data-theme="dark"] body.auth-vivid.auth-split,
html.theme-dark body.auth-vivid.auth-split{
  background:
    radial-gradient(ellipse 900px 500px at 8% -5%, rgba(13,148,136,.28), transparent 55%),
    radial-gradient(ellipse 700px 420px at 95% 5%, rgba(99,102,241,.22), transparent 50%),
    radial-gradient(ellipse 500px 300px at 40% 110%, rgba(245,158,11,.1), transparent 45%),
    #0b1220;
}
.auth-about{position:relative}
.auth-about-bg{
  position:absolute;inset:-20px -10px -20px -30px;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, #6366f1 10%, transparent) 0%, transparent 40%);
  border-radius:28px;
}
.auth-about-inner{position:relative;z-index:1}
.auth-about-logo-text{
  font-size:1.75rem;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(135deg, var(--brand), #6366f1 60%, #0ea5e9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;display:inline-block;
}
.auth-about-logo{
  height:64px;max-width:min(280px,90vw);object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(15,23,42,.15));
}
.auth-features li{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.auth-features li:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow:0 10px 28px rgba(15,23,42,.1);
}
.af-ico{
  background:linear-gradient(145deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), color-mix(in srgb, #6366f1 14%, var(--surface)));
  color:var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.auth-card-tabs{
  box-shadow:0 24px 60px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  backdrop-filter:blur(16px);
}
html[data-theme="dark"] .auth-card-tabs,
html.theme-dark .auth-card-tabs{
  box-shadow:0 28px 70px rgba(0,0,0,.45);
  background:color-mix(in srgb, var(--surface) 92%, #0b1220);
}
.auth-panel-top .theme-toggle{
  width:40px;height:40px;min-width:40px;
  border-radius:12px;
}
.auth-panel-top .lang-menu-trigger{
  padding:8px 12px;border-radius:12px;min-height:40px;
}
.brand-text{
  font-weight:900;font-size:1.15rem;letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--brand), #6366f1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-logo-img{max-height:48px;width:auto;object-fit:contain}


/* Diseño: cajas del lobby siempre con borde visible */
.lobby-toolbar-actions:empty{display:none!important}
.lobby-card,.online-card{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--design-radius,14px);
}
.online-user{
  border:1px solid var(--line);
  background:var(--surface-2,var(--surface));
  border-radius:var(--design-radius-sm,10px);
}


/* ===== Menú de pestañas del lobby (mejorado) ===== */
.lobby-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px !important;
  border:1px solid var(--line) !important;
  border-radius:var(--design-radius,16px) !important;
  background:var(--surface) !important;
  box-shadow:0 4px 18px rgba(15,23,42,.05);
}
.lobby-toolbar .lobby-tabs,
.lobby-tabs{
  display:inline-flex !important;
  align-items:center;
  gap:4px;
  padding:4px !important;
  margin:0 !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  background:var(--surface-2,color-mix(in srgb,var(--surface) 90%,var(--line))) !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
  width:auto !important;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.lobby-toolbar .lobby-tab,
.lobby-tab{
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  padding:9px 16px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--muted) !important;
  font:inherit;
  font-weight:750 !important;
  font-size:.86rem !important;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s,color .18s,box-shadow .18s,transform .15s;
}
.lobby-toolbar .lobby-tab:hover,
.lobby-tab:hover{
  color:var(--ink) !important;
  background:color-mix(in srgb,var(--surface) 80%,transparent) !important;
}
.lobby-toolbar .lobby-tab.active,
.lobby-tab.active{
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 35%,transparent) !important;
  transform:translateY(-1px);
}
.lobby-tab .tab-ico,
.lobby-tab .ico{
  width:18px;height:18px;flex:0 0 18px;
  opacity:.9;
}
.lobby-tab.active .tab-ico,
.lobby-tab.active .ico{
  opacity:1;
  filter:brightness(0) invert(1);
}
html[data-theme="dark"] .lobby-tab.active .ico,
html.theme-dark .lobby-tab.active .ico{
  filter:brightness(0) invert(1);
}
.lobby-toolbar-actions .juego-btn{
  border-radius:999px !important;
  padding:9px 16px !important;
  font-weight:750;
}
@media(max-width:640px){
  .lobby-toolbar .lobby-tab,
  .lobby-tab{padding:8px 12px !important;font-size:.8rem !important}
  .lobby-tab .ico{width:16px;height:16px}
}

/* Iconos del botón de tema del footer: solo uno visible */
.sf-theme-ico{
  position:relative;
  display:inline-grid !important;
  place-items:center;
  width:20px;height:20px;
}
.sf-theme-ico .theme-ico{
  grid-area:1/1;
  display:none !important;
  color:#fff !important;
  line-height:0;
}
.sf-theme-ico .theme-ico svg{width:18px;height:18px;display:block}
/* En modo claro: mostrar luna (sugerencia de pasar a oscuro) — o sol del modo actual */
/* Mostrar el icono del modo ACTUAL */
html[data-theme="light"] .sf-theme-ico .theme-ico-sun,
html.theme-light .sf-theme-ico .theme-ico-sun,
html:not([data-theme="dark"]):not(.theme-dark) .sf-theme-ico .theme-ico-sun{
  display:inline-flex !important;
}
html[data-theme="dark"] .sf-theme-ico .theme-ico-moon,
html.theme-dark .sf-theme-ico .theme-ico-moon{
  display:inline-flex !important;
}
.sf-theme-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}


/* ===== VS Sistema — panel limpio ===== */
.vs-cpu-card{
  padding:18px 20px !important;
  border:1px solid var(--line) !important;
  border-radius:var(--design-radius,16px) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand,#0d9488) 8%, transparent), transparent 55%),
    var(--surface,#fff) !important;
  box-shadow:0 8px 28px rgba(15,23,42,.06);
}
.vs-cpu-head{
  display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;
}
.vs-cpu-icon{
  width:48px;height:48px;border-radius:14px;flex:0 0 48px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand,#0d9488),var(--brand2,#6366f1));
  color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--brand,#0d9488) 30%,transparent);
}
.vs-cpu-icon .ico{color:#fff;filter:brightness(0) invert(1)}
.vs-cpu-title{margin:0 0 4px;font-size:1.2rem;letter-spacing:-.02em}
.vs-cpu-lead{margin:0;font-size:.9rem}
.vs-cpu-row{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
}
.vs-cpu-field{min-width:140px;flex:1 1 140px}
.vs-cpu-field select,.vs-cpu-field .cr-select{
  width:100%;min-height:42px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;
}
.vs-cpu-go{
  min-height:42px;padding:10px 18px !important;border-radius:12px !important;
  white-space:nowrap;margin-left:auto;
}
@media(max-width:560px){
  .vs-cpu-go{width:100%;margin-left:0;justify-content:center}
  .vs-cpu-field{flex:1 1 100%}
}


/* ===== Selector de tema (segmentado, sin dropdown) ===== */
.sf-theme-seg{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:3px;
  border-radius:999px;
  background:color-mix(in srgb, var(--brand, #0d9488) 12%, var(--surface-2, #e8eef5));
  border:1px solid color-mix(in srgb, var(--brand, #0d9488) 28%, var(--line, #d8dee8));
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}
.sf-theme-seg-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  background:transparent;
  color:var(--ink, #0f172a);
  font:inherit;
  font-size:.82rem;
  font-weight:750;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  line-height:1.1;
  transition:background .15s, color .15s, transform .12s;
}
.sf-theme-seg-btn:hover{background:color-mix(in srgb, var(--brand,#0d9488) 10%, transparent)}
.sf-theme-seg-btn.is-active{
  background:linear-gradient(135deg, var(--brand, #0d9488), var(--brand2, #6366f1));
  color:#fff !important;
  box-shadow:0 4px 12px color-mix(in srgb, var(--brand,#0d9488) 35%, transparent);
}
.sf-theme-seg-btn.is-active svg{color:#fff}
.sf-theme-seg-ico{display:inline-grid;place-items:center;width:16px;height:16px}
html[data-theme="dark"] .sf-theme-seg,
html.theme-dark .sf-theme-seg{
  background:#1a222d;
  border-color:#2c3848;
}
html[data-theme="dark"] .sf-theme-seg-btn:not(.is-active),
html.theme-dark .sf-theme-seg-btn:not(.is-active){color:#e2e8f0}

.pf-stat.abandon strong{color:#f59e0b}

/* ========== Fixes v0.0.2: protocol icon+text, lobby tabs, cards, footer ========== */

/* Protocol: icono al lado del título (no abajo) */
.info-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.info-card-head .info-card-icon{
  margin-bottom:0;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:11px;
}
.info-card-head h2{
  margin:0;
  font-size:1.08rem;
  line-height:1.25;
}
.info-card .info-list{
  margin-top:0;
}

/* Lobby tabs: sin fondo/bordes redondos exagerados, más compacto */
.lobby-tabs,
.lobby-toolbar .lobby-tabs{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 2px !important;
}
.lobby-tab,
.lobby-toolbar .lobby-tab{
  border-radius: 8px !important;
  padding: 6px 11px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: 0 !important;
}
.lobby-tab:hover,
.lobby-toolbar .lobby-tab:hover{
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.lobby-tab.active,
.lobby-toolbar .lobby-tab.active{
  background: color-mix(in srgb, var(--brand) 14%, var(--surface)) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
  border: 0 !important;
}
html[data-theme="dark"] .lobby-tab.active,
html.theme-dark .lobby-tab.active,
html[data-theme="dark"] .lobby-toolbar .lobby-tab.active{
  background: rgba(109,131,255,.14) !important;
  color: #aebaff !important;
}
.lobby-tab .ico, .lobby-tab .tab-ico{
  width: 18px !important;
  height: 18px !important;
}

/* Cards: asegurar borde visible en todos los sectores del lobby */
.lobby-card,
.online-card,
.lobby-card.torneos-section,
.lobby-main-grid > .lobby-card,
#online-card,
.vs-active-games.lobby-card{
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.04) !important;
}
html[data-theme="dark"] .lobby-card,
html[data-theme="dark"] .online-card,
html.theme-dark .lobby-card{
  border-color: var(--line) !important;
}

/* Footer: más ordenado, icono + texto en línea, menos desorden */
.site-footer-global .sf-nav,
.site-footer-full .sf-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.sf-link{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap;
  padding: 5px 6px !important;
  font-size: .86rem !important;
}
.sf-link svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sf-theme-seg{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.sf-theme-seg-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
}
.sf-theme-seg-btn.is-active{
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.sf-theme-seg-btn .sf-theme-seg-ico{
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.sf-lang-btn{
  white-space: nowrap;
}
@media (max-width: 720px){
  .site-footer-full .sf-nav{
    gap: 6px 10px;
  }
  .sf-link span{
    /* mantener texto visible al lado del icono */
  }
}

/* Ad slots placeholders (opcional visual) */
.ad-slot{
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 12px auto;
  text-align: center;
  min-height: 0;
  overflow: hidden;
}
.ad-slot:empty{ display: none; }
.ad-slot-banner{ max-width: 728px; }
.ad-slot-rect{ max-width: 300px; }
.ad-slot-leader{ max-width: 970px; }



/* Menos espacio entre icono y texto en tabs del lobby */
.lobby-tab,
.lobby-toolbar .lobby-tab{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.lobby-tab .ico,
.lobby-tab .tab-ico,
.lobby-toolbar .lobby-tab .ico{
  margin: 0 !important;
  margin-right: 0 !important;
}


/* ===== Footer ordenado v0.0.2b ===== */
.site-footer-global{
  width:100%;
  margin-top:auto;
  flex-shrink:0;
  background:transparent;
  border-top:1px solid var(--line);
  padding:16px 0 20px;
}
.site-footer-full{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.site-footer-full .sf-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  width:100%;
  flex:none !important;
}
.sf-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 4px;
}
.sf-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.sf-link{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap;
  padding:5px 8px !important;
  font-size:.84rem !important;
  font-weight:650;
  background:none;
  border:0;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  opacity:.9;
}
.sf-link:hover{color:var(--brand);opacity:1}
.sf-link svg{flex-shrink:0;opacity:.85;width:18px;height:18px}

/* Tema segmentado compacto */
.sf-theme-seg{
  display:inline-flex !important;
  align-items:center;
  gap:2px !important;
  padding:2px !important;
  border-radius:10px !important;
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
.sf-theme-seg-btn{
  display:inline-flex !important;
  align-items:center;
  gap:5px !important;
  padding:5px 10px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--muted) !important;
  font:inherit;
  font-size:.78rem !important;
  font-weight:650 !important;
  cursor:pointer;
  line-height:1.1;
  box-shadow:none !important;
}
.sf-theme-seg-btn:hover{
  background:var(--surface) !important;
  color:var(--ink) !important;
}
.sf-theme-seg-btn.is-active{
  background:var(--surface) !important;
  color:var(--ink) !important;
  box-shadow:0 1px 3px rgba(15,23,42,.08) !important;
}
.sf-theme-seg-btn.is-active svg{color:inherit !important}
.sf-theme-seg-ico{
  display:inline-grid;
  place-items:center;
  width:15px;
  height:15px;
}
html[data-theme="dark"] .sf-theme-seg,
html.theme-dark .sf-theme-seg{
  background:#1a222d !important;
  border-color:#2c3848 !important;
}
html[data-theme="dark"] .sf-theme-seg-btn.is-active,
html.theme-dark .sf-theme-seg-btn.is-active{
  background:#243041 !important;
  color:#e8eef6 !important;
}

.sf-lang-btn{
  white-space:nowrap;
  padding:5px 8px !important;
}
.sf-copy-line{
  margin:0;
  font-size:.76rem;
  color:var(--muted);
  text-align:left;
}

@media (max-width:720px){
  .site-footer-full .sf-nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .sf-controls{
    margin-left:0;
    width:100%;
  }
  .sf-theme-label{
    /* mantener texto en mobile */
  }
}
@media (max-width:420px){
  .sf-theme-label{display:none} /* solo iconos en muy angosto */
  .sf-theme-seg-btn{padding:6px 8px !important}
}


/* ===== Responsive full-site polish v0.0.2c ===== */

/* Contenedor principal: más ancho útil, sin scroll horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap,
main.wrap,
body > .wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 18px 36px;
  box-sizing: border-box;
  flex: 1 0 auto;
}

/* Topbar a todo el ancho de la ventana */
.topbar {
  width: 100%;
  box-sizing: border-box;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

/* Cards del lobby: ocupan todo el espacio del grid, borde siempre visible */
.lobby-main-grid,
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}
.lobby-main-grid > .lobby-card,
.lobby-grid > .lobby-card,
.online-card.lobby-card,
#online-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

/* Toolbar full width */
.lobby-toolbar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Info pages */
.info-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  box-sizing: border-box;
}
.info-grid {
  width: 100%;
  box-sizing: border-box;
}

/* Footer ya full-width; alinear con el wrap */
.site-footer-full {
  max-width: 1200px;
}

/* —— Tablet —— */
@media (max-width: 900px) {
  .lobby-main-grid,
  .lobby-grid {
    grid-template-columns: 1fr !important;
  }
  .wrap,
  main.wrap {
    padding: 12px 14px 28px;
  }
  .info-grid,
  .info-grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* —— Móvil —— */
@media (max-width: 640px) {
  .wrap,
  main.wrap,
  body > .wrap {
    padding: 10px 10px 24px;
  }

  .topbar {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;
  }
  .topbar .brand {
    font-size: 0.98rem;
  }

  .lobby-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .lobby-toolbar-left,
  .lobby-toolbar-actions {
    width: 100%;
  }
  .lobby-toolbar .lobby-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .lobby-tab,
  .lobby-toolbar .lobby-tab {
    flex: 0 0 auto;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    min-height: 40px; /* touch target */
  }
  .lobby-toolbar-actions .juego-btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
  }

  .lobby-card,
  .online-card,
  #online-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  .lobby-card h2,
  .lobby-card h3 {
    font-size: 1.02rem;
  }

  .sala-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .sala-row .juego-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .sala-row .juego-actions .juego-btn {
    flex: 1;
    justify-content: center;
    min-height: 40px;
  }

  .online-list {
    gap: 8px;
  }
  .online-user {
    min-width: 150px;
  }

  .juego-btn {
    min-height: 40px;
    padding: 9px 12px;
  }

  /* Footer móvil */
  .site-footer-global {
    padding: 14px 0 18px;
  }
  .site-footer-full {
    padding: 0 10px;
    gap: 10px;
  }
  .site-footer-full .sf-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .sf-links {
    width: 100%;
    gap: 2px;
  }
  .sf-controls {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .sf-link {
    padding: 8px 6px !important;
    min-height: 40px;
    font-size: 0.82rem !important;
  }
  .sf-copy-line {
    font-size: 0.72rem;
  }

  /* Info pages móvil */
  .info-wrap {
    padding: 18px 12px 32px;
  }
  .info-hero h1 {
    font-size: 1.35rem;
  }
  .info-card {
    padding: 14px 12px !important;
  }
}

/* —— Móvil muy chico —— */
@media (max-width: 380px) {
  .wrap,
  main.wrap {
    padding: 8px 8px 20px;
  }
  .sf-theme-label {
    display: none;
  }
  .lobby-tab span,
  .lobby-toolbar .lobby-tab {
    font-size: 0.74rem !important;
  }
}

/* Evitar que tablas/listas rompan el layout */
.admin-table,
.online-list,
.torneos-grid {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ===== BORDES SOLIDOS v0.0.2d ===== */
/* Anula color-mix transparente que dejaba los bordes casi invisibles */
.lobby-card,
.lobby-card.torneos-section,
.lobby-main-grid > .lobby-card,
.lobby-grid > .lobby-card,
.online-card,
.online-card.lobby-card,
#online-card,
.create-room-card,
.game-card,
.board-panel,
.side-panel,
.profile-hero,
.invitation-page,
.guide-card,
.info-card,
.admin-section,
.global-chat-card,
.vs-active-games,
.card,
.lobby-hero {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  border-radius: 14px !important;
}

/* Tema claro: borde un poco más marcado para que se note sobre fondo gris */
html[data-theme="light"] .lobby-card,
html[data-theme="light"] .online-card,
html[data-theme="light"] #online-card,
html[data-theme="light"] .create-room-card,
html[data-theme="light"] .game-card,
html[data-theme="light"] .board-panel,
html[data-theme="light"] .side-panel,
html[data-theme="light"] .info-card,
html[data-theme="light"] .admin-section,
html[data-theme="light"] .card,
html.theme-light .lobby-card,
html.theme-light .online-card,
html.theme-light .create-room-card,
html.theme-light .game-card,
html.theme-light .info-card,
html.theme-light .card {
  border: 1px solid #c9d2de !important;
  border-color: #c9d2de !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

/* Tema oscuro: borde visible sobre fondo oscuro */
html[data-theme="dark"] .lobby-card,
html[data-theme="dark"] .online-card,
html[data-theme="dark"] .create-room-card,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .board-panel,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .card,
html.theme-dark .lobby-card,
html.theme-dark .online-card,
html.theme-dark .create-room-card,
html.theme-dark .game-card,
html.theme-dark .info-card {
  border: 1px solid #3a4a5e !important;
  border-color: #3a4a5e !important;
  background: var(--surface) !important;
}

/* Hover: solo realce suave, sin perder el borde */
.lobby-card:hover,
.game-card:hover,
.online-card:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  transform: none; /* evitar saltos raros en grid */
}

/* Grid: las celdas llenan el ancho y el borde se ve completo */
.lobby-main-grid,
.lobby-grid {
  align-items: stretch;
}
.lobby-main-grid > *,
.lobby-grid > * {
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}


/* ===== Align header = content + lang icon v0.0.2e ===== */

/* Misma columna visual: topbar, contenido y footer */
:root {
  --site-max: 1200px;
  --page-pad-x: 16px;
}

.topbar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar-inner {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.wrap,
main.wrap,
body > .wrap,
body > main,
.chat-page-wrap,
.info-wrap {
  width: 100%;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box;
}

.site-footer-full,
.site-footer-inner {
  width: 100%;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box;
}

/* Idioma: solo bandera + caret, menú al click */
.sf-lang-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px !important;
  min-height: 36px;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.sf-lang-icon-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line)) !important;
  color: var(--brand) !important;
}
.sf-lang-icon-btn .sf-lang-flag {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  line-height: 0;
}
.sf-lang-icon-btn .sf-lang-flag-img,
.sf-lang-icon-btn .sf-lang-flag svg {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  display: block;
}
.sf-lang-icon-btn .sf-lang-caret {
  opacity: 0.65;
  flex-shrink: 0;
}
.sf-lang-drop {
  position: relative;
  display: inline-flex;
}
.sf-lang-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10050;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 6px;
}
.sf-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  white-space: nowrap;
}
.sf-lang-option:hover {
  background: var(--surface-2);
}
.sf-lang-option.is-active {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-weight: 700;
}

@media (max-width: 640px) {
  :root { --page-pad-x: 10px; }
  .topbar-inner {
    min-height: 44px;
    gap: 8px;
  }
}


/* ===== FINAL layout lock v0.0.2f ===== */
/* Una sola columna para header, main y footer */
:root {
  --site-max: 1120px !important;
  --page-pad-x: 16px !important;
}

/* Topbar: fondo full-bleed, contenido centrado */
.topbar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}
.topbar-inner {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin: 0 auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 48px !important;
}

/* Main / wrap: exactamente la misma columna */
.wrap,
main.wrap,
body > .wrap,
body > main,
.chat-page-wrap,
.info-wrap,
.profile-page,
.invitation-page {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
}

/* Footer: misma columna */
.site-footer-global {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.site-footer-full,
.site-footer-inner {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
}

/* Toolbar / cards no se salen de la columna */
.lobby-toolbar,
.vs-focus-toolbar,
.lobby-main-grid,
.lobby-grid,
.online-card,
#online-card,
.lobby-card,
.create-room-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* —— Bordes de tarjetas: siempre var(--line) del Diseño —— */
.lobby-card,
.lobby-card.torneos-section,
.lobby-main-grid > .lobby-card,
.lobby-grid > .lobby-card,
.online-card,
.online-card.lobby-card,
#online-card,
.create-room-card,
.game-card,
.board-panel,
.side-panel,
.profile-hero,
.invitation-page,
.guide-card,
.info-card,
.admin-section,
.global-chat-card,
.vs-active-games,
.card,
.lobby-hero,
.lobby-toolbar,
.auth-card,
.msg-panel,
.rank-panel {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .lobby-card,
html[data-theme="light"] .online-card,
html[data-theme="light"] #online-card,
html[data-theme="light"] .create-room-card,
html[data-theme="light"] .game-card,
html[data-theme="light"] .board-panel,
html[data-theme="light"] .side-panel,
html[data-theme="light"] .info-card,
html[data-theme="light"] .admin-section,
html[data-theme="light"] .card,
html[data-theme="light"] .lobby-toolbar,
html.theme-light .lobby-card,
html.theme-light .online-card,
html.theme-light .create-room-card,
html.theme-light .game-card,
html.theme-light .info-card,
html.theme-light .card,
html.theme-light .lobby-toolbar {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

html[data-theme="dark"] .lobby-card,
html[data-theme="dark"] .online-card,
html[data-theme="dark"] .create-room-card,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .board-panel,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .lobby-toolbar,
html.theme-dark .lobby-card,
html.theme-dark .online-card,
html.theme-dark .create-room-card,
html.theme-dark .game-card,
html.theme-dark .info-card,
html.theme-dark .lobby-toolbar {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

@media (max-width: 640px) {
  :root {
    --page-pad-x: 10px !important;
  }
  .topbar-inner {
    min-height: 44px !important;
  }
}


/* ===== Theme switch + lang translate + align v0.0.2g ===== */

/* Toggle deslizable claro/oscuro */
.sf-theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.sf-theme-track {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb923c, #f97316 40%, #ea580c);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  transition: background .25s ease;
}
.sf-theme-switch.is-dark .sf-theme-track {
  background: linear-gradient(135deg, #38bdf8, #3b82f6 45%, #2563eb);
}
.sf-theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.25);
  display: grid;
  place-items: center;
  transition: transform .25s ease;
  color: #ea580c;
}
.sf-theme-switch.is-dark .sf-theme-knob {
  transform: translateX(24px);
  color: #2563eb;
}
.sf-theme-knob .sf-theme-sun { display: block; }
.sf-theme-knob .sf-theme-moon { display: none; }
.sf-theme-switch.is-dark .sf-theme-knob .sf-theme-sun { display: none; }
.sf-theme-switch.is-dark .sf-theme-knob .sf-theme-moon { display: block; }

/* Idioma: icono traducción */
.sf-lang-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  cursor: pointer;
  line-height: 0;
}
.sf-lang-icon-btn:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
  background: var(--surface-2) !important;
}
.sf-lang-translate {
  display: block;
  width: 26px;
  height: 22px;
}
.sf-controls {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

/* —— Alineación definitiva header / main / footer —— */
:root {
  --site-max: 1100px !important;
  --page-pad-x: 16px !important;
}
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
/* Header full-bleed de fondo; contenido centrado */
.topbar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}
.topbar-inner {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px var(--page-pad-x) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
/* Contenido principal: MISMA caja que topbar-inner */
.wrap,
main.wrap,
body > .wrap,
body > main,
.chat-page-wrap,
.info-wrap,
.profile-page {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
}
/* Footer misma caja */
.site-footer-global {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-footer-full,
.site-footer-inner {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  :root { --page-pad-x: 10px !important; }
  .sf-theme-track { width: 48px; height: 26px; }
  .sf-theme-knob { width: 22px; height: 22px; }
  .sf-theme-switch.is-dark .sf-theme-knob { transform: translateX(22px); }
}


/* ===== Compact header 50px v0.0.2h ===== */
:root {
  --site-max: 1100px !important;
  --page-pad-x: 16px !important;
  --topbar-h: 50px !important;
}

.topbar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: var(--topbar-h) !important;
  height: auto !important;
  box-sizing: border-box !important;
  display: block !important;
  border-bottom: 1px solid var(--line) !important;
}

.topbar-inner {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--page-pad-x) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: var(--topbar-h) !important;
  height: var(--topbar-h) !important;
}

.topbar .brand,
.topbar .brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  max-height: 40px !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

.topbar .brand-logo-img,
.brand-logo-img {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  max-width: min(200px, 42vw) !important;
  object-fit: contain !important;
  display: block !important;
}

.topbar .meta,
.topbar .top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  min-height: 0 !important;
}

.topbar .top-link,
.topbar .meta a.top-link {
  padding: 4px 8px !important;
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  border-radius: 8px !important;
  gap: 5px !important;
  line-height: 1.2 !important;
  min-height: 32px !important;
}

.topbar .nav-ico,
.topbar .top-link .ico {
  width: 18px !important;
  height: 18px !important;
}

.topbar .user-menu-trigger {
  padding: 2px 8px 2px 2px !important;
  min-height: 34px !important;
  gap: 6px !important;
  border-radius: 999px !important;
}

.topbar .user-menu-trigger .profile-avatar,
.topbar .user-menu-trigger img {
  width: 28px !important;
  height: 28px !important;
}

.topbar .user-menu-nick {
  font-size: 0.8rem !important;
  max-width: 100px !important;
}

.topbar .mobile-nav-toggle {
  width: 34px !important;
  height: 34px !important;
}

/* Main alineado al mismo ancho que topbar-inner */
.wrap,
main.wrap,
body > .wrap,
body > main,
.chat-page-wrap,
.info-wrap,
.profile-page {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
}

.site-footer-full,
.site-footer-inner {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  .topbar .top-link span:not(.nav-badge) {
    display: none !important;
  }
  .topbar .brand-logo-img,
  .brand-logo-img {
    height: 32px !important;
    max-height: 32px !important;
    max-width: min(160px, 48vw) !important;
  }
}
@media (max-width: 640px) {
  :root { --page-pad-x: 10px !important; }
}


/* ===== Header width + logo + lang list v0.0.2i ===== */

/* Más ancho útil: menos margen vacío a los costados */
:root {
  --site-max: 1280px !important;
  --page-pad-x: 20px !important;
  --topbar-h: 50px !important;
}

.topbar-inner {
  max-width: var(--site-max) !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
}

.wrap,
main.wrap,
body > .wrap,
body > main,
.chat-page-wrap,
.info-wrap,
.profile-page,
.site-footer-full,
.site-footer-inner {
  max-width: var(--site-max) !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}

/* Logo más grande dentro de los 50px */
.topbar .brand-logo-img,
.brand-logo-img,
.topbar .brand-logo img {
  height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
  max-width: min(240px, 50vw) !important;
  object-fit: contain !important;
}

/* Menú de idiomas: lista completa sin scroll */
.sf-lang-menu {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  min-width: 220px !important;
  padding: 6px !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  z-index: 10060 !important;
}
.sf-lang-option {
  padding: 7px 10px !important;
  font-size: 0.86rem !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  :root { --page-pad-x: 12px !important; }
  .topbar .brand-logo-img,
  .brand-logo-img {
    height: 36px !important;
    max-height: 36px !important;
    max-width: min(180px, 52vw) !important;
  }
}


/* ===== Footer align + lang no border v0.0.2j ===== */
.site-footer-full{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.site-footer-full .sf-nav{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 16px !important;
  width: 100% !important;
}
.sf-links{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 4px !important;
}
.sf-controls{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}
.sf-copy-line{
  margin: 0 !important;
  padding: 0 !important;
  font-size: .76rem !important;
  color: var(--muted) !important;
  line-height: 1.3 !important;
  width: 100% !important;
  text-align: left !important;
}

/* Idioma: sin borde */
.sf-lang-icon-btn{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}
.sf-lang-icon-btn:hover{
  background: var(--surface-2) !important;
  border: 0 !important;
}

@media (max-width: 640px){
  .site-footer-full .sf-nav{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .sf-controls{
    margin-left: 0 !important;
  }
}

/* Captcha anti-spam (registro / contacto) */
.captcha-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.85rem;
  font-weight:600;
}
.captcha-field .captcha-q{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-width:4.5rem;
  padding:8px 14px;
  margin:2px 0 4px;
  border-radius:10px;
  font:800 1.05rem/1 "Segoe UI",system-ui,Arial,sans-serif;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);
  color:#312e81;
  border:1px solid #c7d2fe;
  user-select:none;
}
html[data-theme="dark"] .captcha-field .captcha-q,
html.theme-dark .captcha-field .captcha-q{
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  color:#e0e7ff;
  border-color:#4338ca;
}
.captcha-field input[type="number"]{
  max-width:140px;
}
.contact-form .captcha-field{margin-top:4px}