/*
 * hub-front-themes: layout y detalles del theme neon por pantalla y tamaño (E1.F10–F13), todo bajo [data-theme="neon"].
 * Cada sección nombra los marcos que reproduce (D5). Los tokens están en ../tokens.css.
 *
 * Neón (marcos B-* del canvas aprobado): noche violeta, Unbounded / Manrope / JetBrains Mono, paneles #15152A con
 * borde #2E2D52, destacado #1B1640 con panel de arte #231C58, rojo #FF4455 (Jugar, activo), cian #3DE0FF (Unirme,
 * enlaces, códigos), lima #C6F432 (EN VIVO, hitos). Las salas del Inicio van en la columna lateral (escritorio).
 * Prefijo `html[data-theme="neon"]` en todo: así gana a las reglas por tamaño de app.css (misma especificidad, va después).
 * Rótulos de 9–10 px de los marcos suben a 11 px (D20).
 */

/* ── Base: fondo, colores por juego, reseteos (todos los marcos B-*) ─────────── */
/* El arte va en el lienzo (html) y no en el body: así cubre toda la ventana aunque el contenido sea corto o largo. */
html[data-theme="neon"] { background: #0B0B14 var(--t-art-wide) center / cover no-repeat fixed; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) { background-image: var(--t-art-tall); }
html[data-theme="neon"][data-size] body { background: transparent; font-family: Manrope, system-ui, sans-serif; color: #EDEBFF; }
html[data-theme="neon"] {
  --n-surface: #15152A; --n-surface-2: #1E1E3A; --n-hero: #1B1640; --n-hero-2: #231C58; --n-border: #2E2D52;
  --n-border-2: #3A3470; --n-text: #EDEBFF; --n-text-2: #A9A6C9; --n-desc: #C9C6EA; --n-red: #FF4455; --n-cyan: #3DE0FF;
  --n-lime: #C6F432; --n-pink: #FF7A8A; --n-gold: #FFD23F; --n-ink: #0B0B14; --n-mono: 'JetBrains Mono', ui-monospace, monospace;
  --n-display: Unbounded, system-ui, sans-serif; --n-text-font: Manrope, system-ui, sans-serif;
}
/* Color de cada juego (borde del ícono, "MEJOR…", código, asientos, Unirme de la pantalla Salas) */
html[data-theme="neon"] [data-game] { --g: #3DE0FF; }
html[data-theme="neon"] [data-game="pasapaloma"] { --g: #FFD23F; }
html[data-theme="neon"] [data-game="donkydoz"] { --g: #3DE0FF; }
html[data-theme="neon"] [data-game="pingpongale"] { --g: #FF7A8A; }
html[data-theme="neon"] [data-game="salvimaticas"] { --g: #C6F432; }
html[data-theme="neon"] [data-game="pigeometridash"] { --g: #C6F432; }

html[data-theme="neon"] :is(.kh-rooms__list, .kh-games__grid, .kh-rk-list, .kh-podium, .kh-rk-games ul, .kh-mis-list, .kh-chips, .kh-compas__list) {
  list-style: none; margin: 0; padding: 0;
}
html[data-theme="neon"] :is(.kh-view, .kh-compas, .kh-account-sheet, .kh-login) :is(h1, h2, h3, p, dl, dd) { margin: 0; }
html[data-theme="neon"] :is(.kh-game__link, .kh-room__join, .kh-rooms__all, .kh-rooms__back, .kh-rooms__create, .kh-board__more, .kh-btn,
  .kh-nav__link, .kh-account, .kh-back, .kh-acc-links__row) { text-decoration: none; }
html[data-theme="neon"] a:not(.kh-btn):not(.kh-nav__link):not(.kh-account):not(.kh-game__link):not(.kh-back) { color: var(--n-cyan); }
html[data-theme="neon"] a:not(.kh-btn):not(.kh-nav__link):not(.kh-account):not(.kh-game__link):not(.kh-back):hover { color: #9CEEFF; }

/* Botones (marcos B-*: Manrope 800, radio 12, sin versales) */
html[data-theme="neon"] .kh-btn {
  font-family: var(--n-text-font); font-weight: 700; font-size: 16px; letter-spacing: 0; border-radius: 12px; color: var(--n-text);
  border: 1px solid var(--n-border-2); padding: 0 20px;
}
html[data-theme="neon"] .kh-btn--primary {
  background: var(--n-red); color: var(--n-ink); border: 0; font-weight: 800; padding: 14px 24px; clip-path: none; box-shadow: none;
}
html[data-theme="neon"] .kh-btn--ghost { color: var(--n-pink); border-color: var(--n-red); }
/* Insignia de estado (EN VIVO, SIN SALAS, CARGANDO, SIN SEÑAL, SIN PARTIDAS): JetBrains Mono 700, radio 6 */
html[data-theme="neon"] {
  --n-badge: 700 11px/1.2 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Marco: encabezado, navegación y cuenta (B-Desktop, B-Inicio-TabletH, B-Inicio-TabletV, B-Inicio-MovilH, B-MovilV) ── */
html[data-theme="neon"] .kh-shell[data-nav="header"] { padding: 28px 44px; gap: 22px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-shell[data-nav="header"] { padding: 26px 34px; gap: 18px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-shell[data-nav="header"] { padding: 30px; gap: 20px; }
html[data-theme="neon"][data-size="movil-h"] .kh-shell[data-nav="header"] { padding: 16px 20px; gap: 12px; }
html[data-theme="neon"] .kh-shell[data-nav="bottom"] { padding: 18px 16px 0; gap: 14px; }

html[data-theme="neon"] .kh-header { gap: 28px; }
html[data-theme="neon"] .kh-header__logo { width: 48px; height: 48px; border-radius: 12px; flex: none; }
html[data-theme="neon"] .kh-brand__name {
  font-family: var(--n-display); font-weight: 800; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; color: var(--n-text);
  white-space: nowrap;
}
html[data-theme="neon"] .kh-brand__hero { color: var(--n-red); }
html[data-theme="neon"] .kh-brand__tag { display: none; }
html[data-theme="neon"] .kh-nav--header { margin-left: 0; gap: 22px; font-family: var(--n-text-font); font-weight: 600; font-size: 16px; letter-spacing: 0; }
html[data-theme="neon"] .kh-nav--header .kh-nav__link { color: var(--n-text-2); padding-bottom: 6px; border-bottom: 2px solid transparent; }
html[data-theme="neon"] .kh-nav--header .kh-nav__link[aria-current="page"] { color: var(--n-text); font-weight: 600; border-bottom-color: var(--n-red); }
/* Cuenta en píldora (escritorio, tablet V): avatar 32 r9 + apodo; en tablet H, móvil H y móvil V: cuadro de 44 r12 */
html[data-theme="neon"] .kh-account--pill {
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 12px; padding: 6px 14px 6px 6px;
  font: 600 14px var(--n-text-font); color: var(--n-text); gap: 10px;
}
html[data-theme="neon"] .kh-account__avatar { border: 0; border-radius: 12px; background: var(--n-red); width: 44px; height: 44px; }
html[data-theme="neon"] .kh-account__img { border-radius: inherit; }
html[data-theme="neon"] .kh-account--pill .kh-account__avatar { width: 32px; height: 32px; border-radius: 9px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) .kh-header[data-variant="brand"] .kh-account--pill { padding: 0; border: 0; background: none; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) .kh-header[data-variant="brand"] .kh-account--pill .kh-account__avatar { width: 44px; height: 44px; border-radius: 12px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) .kh-header[data-variant="brand"] .kh-account__nick { display: none; }

/* Tablet H: marca 19 px, nav con 44 px de alto */
html[data-theme="neon"][data-size="tablet-h"] .kh-header { gap: 26px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-brand__name { font-size: 19px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-nav--header { gap: 20px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="tablet-v"]) .kh-nav--header .kh-nav__link { padding: 12px 0 6px; }

/* ── Inicio · escritorio y tablet H (B-Desktop, B-Inicio-TabletH): héroe + juegos a la izquierda, salas y ranking en la
 *    columna lateral. .kh-inicio__main se abre (display: contents) para ubicar sus piezas en la grilla del Inicio. ── */
html[data-theme="neon"] .kh-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html[data-theme="neon"] .kh-greet { display: none; }
html[data-theme="neon"] .kh-inicio__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 0;
  align-items: start; flex-grow: 1;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio__main { display: contents; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio [data-slot="rooms"] { grid-column: 2; grid-row: 1; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio .kh-featured { grid-column: 1; grid-row: 1 / 3; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio .kh-games { grid-column: 1; grid-row: 3 / 5; margin-top: 20px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio__side { grid-column: 2; grid-row: 2 / 5; margin-top: 16px; align-self: stretch; display: flex; }
html[data-theme="neon"][data-size="tablet-h"] .kh-inicio { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 20px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-inicio .kh-games { margin-top: 18px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-inicio__side { display: none; }   /* B-Inicio-TabletH: solo las salas en la columna */

/* Destacado (héroe de 330 px): texto a la izquierda, panel de arte #231C58 a la derecha */
html[data-theme="neon"] .kh-featured {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: minmax(36px, 1fr) auto auto minmax(36px, 1fr); height: 330px; border-radius: 24px; background: var(--n-hero);
  border: 1px solid var(--n-border-2); overflow: hidden;
}
html[data-theme="neon"] .kh-featured__art {
  grid-column: 2; grid-row: 1 / -1; width: 100%; height: 100%; object-fit: contain; background: var(--n-hero-2); display: block;
}
html[data-theme="neon"] .kh-featured__body { grid-column: 1; grid-row: 2; padding: 0 40px; display: flex; flex-direction: column; gap: 14px; }
html[data-theme="neon"] .kh-featured__eyebrow { font-family: var(--n-mono); font-size: 12px; color: var(--n-lime); letter-spacing: 2px; }
html[data-theme="neon"] .kh-featured__name { font-family: var(--n-display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--n-text); }
html[data-theme="neon"] .kh-featured__desc { font-size: 17px; color: var(--n-desc); max-width: 440px; }
html[data-theme="neon"] .kh-featured__actions { grid-column: 1; grid-row: 3; padding: 14px 40px 0; display: flex; gap: 10px; }
html[data-theme="neon"] .kh-featured__actions .kh-btn { font-size: 16px; }
html[data-theme="neon"] .kh-featured__actions .kh-btn--secondary { padding: 14px 20px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-featured { grid-template-columns: minmax(0, 1fr) 300px; height: 320px; grid-template-rows: minmax(30px, 1fr) auto auto minmax(30px, 1fr); }
html[data-theme="neon"][data-size="tablet-h"] .kh-featured__body { padding: 0 34px; gap: 12px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-featured__name { font-size: 34px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-featured__desc { font-size: 16px; max-width: 400px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-featured__actions { padding: 12px 34px 0; }

/* Todos los juegos: tarjetas #15152A r18, ícono 48 r14 con borde del color del juego; el destacado no se repite */
html[data-theme="neon"] .kh-games { display: flex; flex-direction: column; gap: 12px; }
html[data-theme="neon"] .kh-games__title { font-family: var(--n-display); font-weight: 700; font-size: 18px; letter-spacing: 1px; }
html[data-theme="neon"] .kh-games__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html[data-theme="neon"] .kh-game[data-featured] { display: none; }
html[data-theme="neon"] .kh-game__link {
  height: 100%; box-sizing: border-box; color: var(--n-text); background: var(--n-surface); border: 1px solid var(--n-border);
  border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
html[data-theme="neon"] .kh-game__icon {
  width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--g); box-sizing: border-box; object-fit: contain; flex: none;
}
html[data-theme="neon"] .kh-game__name { font-family: var(--n-display); font-weight: 700; font-size: 16px; }
html[data-theme="neon"] .kh-game__tag { font-size: 13px; color: var(--n-text-2); }
html[data-theme="neon"] .kh-game__mine { font-family: var(--n-mono); font-size: 12px; color: var(--g); }
html[data-theme="neon"][data-size="tablet-h"] .kh-games__grid { gap: 12px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-game__link { padding: 14px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-game__name { font-size: 15px; }
html[data-theme="neon"] .kh-games__soon { margin: 4px 0 0; font-size: 14px; color: var(--n-text-2); }
html[data-theme="neon"] .kh-games__soon::before {
  content: 'PRÓXIMAMENTE:'; margin-right: 0.3em; font-family: var(--n-mono); font-size: 12px; color: var(--n-lime); letter-spacing: 2px;
}

/* Salas en la columna lateral: panel #15152A r20, "EN VIVO" en lima, filas #1E1E3A con tres líneas y "Unirme" cian */
html[data-theme="neon"] .kh-rooms--home {
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 20px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
html[data-theme="neon"] .kh-rooms__head { display: flex; align-items: center; gap: 8px; }
html[data-theme="neon"] .kh-rooms--home .kh-rooms__title { font: 700 15px var(--n-text-font); color: var(--n-text); display: flex; align-items: center; gap: 8px; }
html[data-theme="neon"] .kh-rooms__title::before {
  content: 'EN VIVO'; flex: none; font: var(--n-badge); color: var(--n-ink); background: var(--n-lime); padding: 3px 7px; border-radius: 6px;
}
html[data-theme="neon"] .kh-rooms[data-state="empty"] .kh-rooms__title::before { content: 'SIN SALAS'; color: var(--n-text); background: var(--n-border); }
html[data-theme="neon"] .kh-rooms__sub { display: none; }
html[data-theme="neon"] .kh-rooms__all { margin-left: auto; font-size: 13px; font-weight: 700; padding: 4px 0; }
html[data-theme="neon"] .kh-rooms__list { display: flex; flex-direction: column; gap: 10px; }
html[data-theme="neon"] .kh-rooms--home .kh-room { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--n-surface-2); }
html[data-theme="neon"] .kh-room__icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--g); box-sizing: border-box; flex: none; object-fit: contain; }
/* Cuerpo de la fila en tres líneas: "{juego} {CÓDIGO}" / "{quién} · {cupos}" / "{ESTADO} · {relación}" */
html[data-theme="neon"] .kh-rooms--home .kh-room__body { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--n-text-2); }
html[data-theme="neon"] .kh-room__label, html[data-theme="neon"] .kh-rooms--home .kh-room__seats { display: none; }
html[data-theme="neon"] .kh-rooms--home .kh-room__game { display: inline; font: 700 16px var(--n-text-font); color: var(--n-text); }
html[data-theme="neon"] .kh-rooms--home .kh-room__code { margin-left: 0.3em; font: 16px var(--n-mono); color: var(--n-cyan); }
html[data-theme="neon"] .kh-rooms--home .kh-room__who { display: inline; }
html[data-theme="neon"] .kh-rooms--home :is(.kh-room__who, .kh-room__state)::before { content: '\A'; white-space: pre; }
html[data-theme="neon"] .kh-rooms--home .kh-room__slots::before { content: ' · '; }
html[data-theme="neon"] .kh-room__state { font: 700 11px var(--n-mono); color: var(--n-lime); }
html[data-theme="neon"] .kh-room__state[data-state="wait"] { color: var(--n-text-2); }
html[data-theme="neon"] .kh-rooms--home .kh-room__ctx { display: inline; color: var(--n-desc); }
html[data-theme="neon"] .kh-rooms--home .kh-room__ctx::before { content: ' · '; }
html[data-theme="neon"] .kh-rooms--home .kh-room__join {
  flex: none; min-height: 0; border: 0; background: var(--n-cyan); color: var(--n-ink); font-weight: 800; font-size: 13px;
  padding: 9px 12px; border-radius: 10px;
}
html[data-theme="neon"]:not([data-size="desktop"]) .kh-rooms--home .kh-room__join { padding: 13px 12px; }
/* "Ver todas las salas" al pie del panel en escritorio y tablet H (texto largo del theme en data-long) */
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-rooms--home .kh-rooms__head { display: contents; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-rooms--home .kh-rooms__all { order: 2; margin-left: 0; align-self: flex-start; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-rooms__all[data-long] { font-size: 0; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-rooms__all[data-long]::after { content: attr(data-long); font-size: 13px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__all { padding: 10px 0; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="tablet-v"]) .kh-rooms__all[data-long]::after { font-size: 14px; }
html[data-theme="neon"] .kh-rooms--home .kh-rooms__list { order: 1; }
html[data-theme="neon"] .kh-rooms--home .kh-rooms__empty { order: 1; }

/* Ranking de la columna lateral: "Ranking · Pasapaloma Medio", periodo en rojo, filas en mono con "tú" #2A1830 */
html[data-theme="neon"] .kh-board {
  flex-grow: 1; background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 20px; padding: 16px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 10px;
}
html[data-theme="neon"] .kh-board > * { grid-column: 1 / -1; }
html[data-theme="neon"] .kh-board__title { grid-column: 1; font: 700 15px var(--n-text-font); color: var(--n-text); }
html[data-theme="neon"] .kh-board__sub { display: none; }
html[data-theme="neon"] .kh-board__more { grid-column: 2; grid-row: 1; font-size: 13px; align-self: center; }
html[data-theme="neon"] .kh-seg { display: flex; gap: 6px; }
html[data-theme="neon"] .kh-seg__btn {
  border: 1px solid var(--n-border); background: transparent; color: var(--n-text); border-radius: 10px; padding: 7px 11px;
  font: 700 12px var(--n-text-font); cursor: pointer;
}
html[data-theme="neon"] .kh-seg__btn[aria-pressed="true"] { border-color: var(--n-red); background: var(--n-red); color: var(--n-ink); }
html[data-theme="neon"] .kh-rk-list { display: flex; flex-direction: column; gap: 4px; font-family: var(--n-mono); }
html[data-theme="neon"] .kh-rk-row { display: flex; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--n-text); }
html[data-theme="neon"] .kh-rk-row__rank { width: 28px; flex: none; }
html[data-theme="neon"] .kh-rk-row__nick { flex-grow: 1; min-width: 0; font-family: var(--n-text-font); font-weight: 600; }
html[data-theme="neon"] .kh-rk-row[data-me] { background: #2A1830; color: var(--n-pink); }

/* ── Inicio · tablet V, móviles y "bro" (B-Inicio-TabletV, B-MovilV, B-Inicio-MovilH, B-Inicio-Bro-MovilV) ─────── */
/* Tablet V: marca y cuenta arriba, la navegación en su propia fila */
html[data-theme="neon"][data-size="tablet-v"] .kh-header[data-variant="brand"] { flex-wrap: wrap; gap: 0; row-gap: 20px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-header__logo { width: 48px; height: 48px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-brand__name { font-size: 19px; letter-spacing: 3px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-nav--header { order: 5; flex-basis: 100%; margin-left: 0; gap: 22px; font-size: 16px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-header[data-variant="brand"] .kh-account { order: 4; }
html[data-theme="neon"][data-size="tablet-v"] .kh-inicio__main { gap: 20px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-inicio__side { display: none; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home { gap: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__all { padding: 10px 0; }
/* Salas de tablet V: 3 tarjetas #1E1E3A con borde del juego, código grande, asientos y "Unirme" del color del juego */
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 8px; row-gap: 8px; padding: 14px;
  border: 1px solid var(--g); border-radius: 18px; background: var(--n-surface-2);
}
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__body { display: contents; font-size: 13px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__icon { order: 1; width: 34px; height: 34px; border-radius: 8px; border: 0; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__game { order: 2; flex: 1 1 calc(100% - 42px); font: 700 16px var(--n-display); }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__code { order: 3; flex: 1 1 auto; margin: 0; font: 700 26px var(--n-mono); letter-spacing: 4px; color: var(--g); }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__state { order: 4; font-size: 11px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__who { order: 5; flex-basis: 100%; font-size: 13px; color: var(--n-text); }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__ctx { order: 6; flex-basis: 100%; font-size: 12px; color: var(--n-text-2); }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home :is(.kh-room__who, .kh-room__state, .kh-room__slots, .kh-room__ctx)::before { content: none; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__seats { order: 7; display: flex; gap: 4px; --seat: 22px; --seat-r: 6px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__slots { order: 8; flex: 1 1 auto; margin-left: 2px; font: 12px var(--n-mono); color: var(--n-text); }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--home .kh-room__join {
  order: 9; flex-basis: 100%; margin-top: auto; text-align: center; background: var(--g); padding: 12px; border-radius: 12px; font-size: 16px;
}
/* Asientos (salas de tablet V y pantalla Salas): cuadros con borde del juego; ocupados rellenos */
html[data-theme="neon"] .kh-room__seat {
  width: var(--seat, 22px); height: var(--seat, 22px); border-radius: var(--seat-r, 6px); border: 1px solid var(--g); box-sizing: border-box;
  background: transparent; flex: none;
}
html[data-theme="neon"] .kh-room__seat[data-taken="true"] { background: var(--g); }
/* Destacado de tablet V: 300 px de alto, panel de arte de 300 */
html[data-theme="neon"][data-size="tablet-v"] .kh-featured { grid-template-columns: minmax(0, 1fr) 300px; height: 300px; grid-template-rows: minmax(30px, 1fr) auto auto minmax(30px, 1fr); }
html[data-theme="neon"][data-size="tablet-v"] .kh-featured__body { padding: 0 32px; gap: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-featured__name { font-size: 34px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-featured__desc { font-size: 16px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-featured__actions { padding: 12px 32px 0; }
html[data-theme="neon"][data-size="tablet-v"] .kh-games__grid { gap: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-game__link { padding: 14px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-game__name { font-size: 15px; }

/* Móvil V: encabezado propio (logo 48, marca 15, cuenta 44 r12) y menú al pie #15152A con el activo en rojo */
html[data-theme="neon"] .kh-header[data-variant="mobile"] { gap: 0; }
html[data-theme="neon"] .kh-header[data-variant="mobile"] .kh-brand__name { font-size: 15px; letter-spacing: 2px; }
html[data-theme="neon"] .kh-header[data-variant="mobile"] .kh-account { margin-left: auto; }
html[data-theme="neon"] .kh-nav--bottom {
  margin: auto -16px 0; background: var(--n-surface); border-top: 1px solid var(--n-border); padding: 8px 8px calc(18px + env(safe-area-inset-bottom));
  font-family: var(--n-text-font); letter-spacing: 0;
}
html[data-theme="neon"] .kh-nav--bottom .kh-nav__link { padding: 13px 10px; color: var(--n-text-2); font-weight: 700; font-size: 13px; }
html[data-theme="neon"] .kh-nav--bottom .kh-nav__link[aria-current="page"] { color: var(--n-red); font-weight: 800; }
html[data-theme="neon"] .kh-shell[data-nav="bottom"] .kh-main { gap: 14px; }

/* Salas del Inicio en móvil: panel con borde lima, una sala en fila; "Ver todas" a la derecha del título */
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms--home { border-color: var(--n-lime); border-radius: 16px; padding: 12px 14px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms--home[data-state="empty"] { border: 1px dashed var(--n-border-2); }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms--home .kh-rooms__title { font-size: 14px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms__title::before { padding: 3px 6px; border-radius: 5px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms--home .kh-room { padding: 0; background: none; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms--home :is(.kh-room__game, .kh-room__code) { font-size: 14px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--home { padding: 10px 12px; gap: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title { font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--home :is(.kh-room__game, .kh-room__code) { font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--home .kh-room__icon { width: 38px; height: 38px; }

/* Destacado en móvil V: sin panel de arte, en columna (NUEVO · nombre 28 · texto · botones) */
html[data-theme="neon"][data-size="movil-v"] .kh-featured {
  height: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 22px;
}
html[data-theme="neon"][data-size="movil-v"] .kh-featured__art { display: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-featured__body { padding: 0; gap: 8px; }
html[data-theme="neon"][data-size="movil-v"] .kh-featured[data-new] .kh-featured__eyebrow { font-size: 0; }
html[data-theme="neon"][data-size="movil-v"] .kh-featured[data-new] .kh-featured__eyebrow::after { content: 'NUEVO'; font-size: 11px; }
html[data-theme="neon"][data-size="movil-v"] .kh-featured__name { font-size: 28px; line-height: 1.05; }
html[data-theme="neon"][data-size="movil-v"] .kh-featured__desc { font-size: 14px; }
html[data-theme="neon"][data-size="movil-v"] .kh-featured__actions { padding: 0; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-featured__actions .kh-btn--primary { padding: 12px 20px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-featured__actions .kh-btn--secondary { padding: 12px 18px; }

/* Juegos en móvil: filas #15152A r16 con ícono 42 y "MEJOR…" en mono del color del juego; sin título ni bajada */
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-games { gap: 14px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) :is(.kh-games__title, .kh-game__tag) { display: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-games__grid { display: flex; flex-direction: column; gap: 8px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-game__link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 0;
  align-content: center; padding: 10px 12px; border-radius: 16px;
}
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-game__icon { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-game__name { font: 700 16px var(--n-text-font); align-self: end; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-game__mine { font-size: 11px; align-self: start; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-games__soon { margin: 0; font-size: 13px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-games__soon::before { font-size: 11px; }

/* Móvil H (B-Inicio-MovilH): héroe a la izquierda (arte 140 px recortado); salas, juegos 2×2 y próximamente a la derecha */
html[data-theme="neon"][data-size="movil-h"] .kh-header { gap: 14px; }
html[data-theme="neon"][data-size="movil-h"] .kh-header__logo { width: 40px; height: 40px; border-radius: 10px; }
html[data-theme="neon"][data-size="movil-h"] .kh-brand__name { font-size: 13px; letter-spacing: 2px; }
html[data-theme="neon"][data-size="movil-h"] .kh-nav--header { gap: 4px; margin-left: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-nav--header .kh-nav__link { padding: 13px 12px; border: 0; font-weight: 700; font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-nav--header .kh-nav__link[aria-current="page"] { color: var(--n-red); font-weight: 800; }
html[data-theme="neon"][data-size="movil-h"] .kh-inicio { flex-grow: 1; }
html[data-theme="neon"][data-size="movil-h"] .kh-inicio__side { display: none; }
html[data-theme="neon"][data-size="movil-h"] .kh-inicio__main {
  flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto 1fr; gap: 10px 12px; align-items: start;
}
html[data-theme="neon"][data-size="movil-h"] .kh-inicio [data-slot="rooms"] { grid-column: 2; grid-row: 1; }
html[data-theme="neon"][data-size="movil-h"] .kh-inicio .kh-games { grid-column: 2; grid-row: 2 / 4; gap: 10px; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured {
  grid-column: 1; grid-row: 1 / 4; align-self: stretch; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 140px;
  grid-template-rows: minmax(18px, 1fr) auto auto minmax(18px, 1fr); border-radius: 22px;
}
html[data-theme="neon"][data-size="movil-h"] .kh-featured__art { object-fit: cover; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__body { padding: 0 18px; gap: 10px; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__eyebrow { font-size: 11px; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__name { font-size: 22px; line-height: 1.05; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__desc { font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__actions { padding: 10px 18px 0; gap: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__actions .kh-btn { font-size: 14px; padding: 13px 18px; }
html[data-theme="neon"][data-size="movil-h"] .kh-featured__actions .kh-btn--secondary { padding: 13px 14px; }
html[data-theme="neon"][data-size="movil-h"] .kh-games__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-game__link { column-gap: 10px; padding: 8px 10px; border-radius: 14px; }
html[data-theme="neon"][data-size="movil-h"] .kh-game__icon { width: 34px; height: 34px; border-radius: 10px; }
html[data-theme="neon"][data-size="movil-h"] .kh-game__name { font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-game__mine { font-size: 11px; }
html[data-theme="neon"][data-size="movil-h"] .kh-games__soon { font-size: 12px; }

/* ── Salas (B-Salas-Desktop, B-Salas-TabletH, B-Salas-TabletV, B-Salas-MovilV, B-MovilH) ───────────────────────── */
/* Encabezado: "‹ Volver a Juegos", EN VIVO, título Unbounded, bajada y "Crear sala" en rojo a la derecha */
html[data-theme="neon"] .kh-rooms--page {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 22px; align-items: end;
}
html[data-theme="neon"] .kh-rooms--page .kh-rooms__head { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
html[data-theme="neon"] .kh-rooms__back { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
html[data-theme="neon"] .kh-rooms--page .kh-rooms__title {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font: 700 40px/1 var(--n-display); color: var(--n-text);
}
html[data-theme="neon"] .kh-rooms--page .kh-rooms__title::before { font-size: 12px; padding: 4px 8px; }
html[data-theme="neon"] .kh-rooms--page .kh-rooms__sub { display: block; font-size: 16px; color: var(--n-desc); }
html[data-theme="neon"] .kh-rooms--page > .kh-rooms__create {
  grid-column: 2; grid-row: 1; align-self: end; border: 0; background: var(--n-red); color: var(--n-ink); font-weight: 800; padding: 14px 24px;
}
html[data-theme="neon"] .kh-rooms--page > :is(.kh-rooms__list, .kh-rooms__empty) { grid-column: 1 / -1; }
/* Tarjetas de sala (escritorio, tablet H, móvil H): borde del juego, ícono 64, código de 44 px, asientos y Unirme */
html[data-theme="neon"] .kh-rooms--page .kh-rooms__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html[data-theme="neon"] .kh-rooms--page .kh-room {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 14px; row-gap: 12px; padding: 22px;
  background: var(--n-surface); border: 1px solid var(--g); border-radius: 24px; --seat: 30px; --seat-r: 8px;
}
html[data-theme="neon"] .kh-rooms--page .kh-room__body { display: contents; }
html[data-theme="neon"] .kh-rooms--page .kh-room__icon { order: 1; width: 64px; height: 64px; border-radius: 16px; border: 0; }
html[data-theme="neon"] .kh-rooms--page .kh-room__game { order: 2; flex: 1 1 calc(100% - 78px); min-width: 0; font: 700 22px var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-rooms--page .kh-room__code { order: 3; flex: 1 1 auto; font: 700 44px var(--n-mono); letter-spacing: 6px; color: var(--g); }
html[data-theme="neon"] .kh-rooms--page .kh-room__state { order: 4; font-size: 12px; }
html[data-theme="neon"] .kh-rooms--page .kh-room__who { order: 5; flex-basis: 100%; font-size: 16px; font-weight: 600; color: var(--n-text); }
html[data-theme="neon"] .kh-rooms--page .kh-room__ctx { order: 6; flex-basis: 100%; font-size: 14px; color: var(--n-text-2); }
html[data-theme="neon"] .kh-rooms--page .kh-room__seats { order: 7; display: flex; gap: 6px; }
html[data-theme="neon"] .kh-rooms--page .kh-room__slots { order: 8; flex: 1 1 auto; margin-left: -6px; font: 14px var(--n-mono); color: var(--n-text); }
html[data-theme="neon"] .kh-rooms--page .kh-room__join {
  order: 9; flex-basis: 100%; margin-top: 6px; border: 0; background: var(--g); color: var(--n-ink); font-weight: 800; font-size: 16px;
  padding: 14px; border-radius: 14px; text-align: center;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page { column-gap: 20px; row-gap: 18px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__title { font-size: 32px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="tablet-v"]) .kh-rooms--page .kh-rooms__sub { font-size: 15px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="tablet-v"]) .kh-rooms--page > .kh-rooms__create { padding: 14px 22px; flex: none; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__list { gap: 16px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room { padding: 18px; border-radius: 22px; row-gap: 10px; column-gap: 12px; --seat: 26px; --seat-r: 7px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__icon { width: 52px; height: 52px; border-radius: 14px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__game { flex-basis: calc(100% - 64px); font-size: 19px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__code { font-size: 36px; letter-spacing: 5px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__who { font-size: 15px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__ctx { font-size: 13px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__seats { gap: 5px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-room__slots { margin-left: -4px; font-size: 13px; }

/* Tablet V: filas (ícono 64 · texto · columna de 150 px con el estado sobre "Unirme") */
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page { column-gap: 20px; row-gap: 20px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__title { font-size: 30px; line-height: 1.05; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms__back { padding: 10px 0; margin: 0; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__list { display: flex; flex-direction: column; gap: 14px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px; column-gap: 18px; align-items: center;
  padding: 18px 20px; border-radius: 22px; --seat: 22px; --seat-r: 6px;
}
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__icon { grid-column: 1; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__body {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 6px; min-width: 0;
}
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__game { flex: 0 1 auto; font-size: 19px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__code { flex: 1 1 auto; font-size: 24px; letter-spacing: 4px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__who { font-size: 15px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__ctx { font-size: 13px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__seats { gap: 5px; align-self: center; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__slots { margin-left: -6px; font-size: 13px; align-self: center; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__state {
  position: absolute; right: 20px; width: 150px; top: calc(50% - 37px); text-align: center;
}
html[data-theme="neon"][data-size="tablet-v"] .kh-rooms--page .kh-room__join { grid-column: 3; margin-top: 26px; }

/* Móvil V: filas compactas (ícono 44 · "Juego CÓDIGO" / quién / estado · relación / asientos 16 · Unirme a la derecha) */
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page { display: flex; flex-direction: column; gap: 14px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-rooms__head { gap: 8px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms--page .kh-rooms__back { display: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-rooms__title { gap: 8px; font-size: 23px; line-height: 1.1; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-rooms__title::before { font-size: 11px; padding: 3px 7px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-rooms__sub { font-size: 14px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page > .kh-rooms__create { align-self: flex-start; margin-top: -2px; padding: 12px 20px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-rooms__list { display: flex; flex-direction: column; gap: 10px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room {
  flex-wrap: nowrap; gap: 12px; padding: 12px; border-radius: 18px; --seat: 16px; --seat-r: 5px;
}
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__icon { width: 44px; height: 44px; border-radius: 12px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 3px; column-gap: 0;
}
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__game { flex: 0 1 auto; font: 700 15px var(--n-text-font); }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__code { flex: 1 1 auto; margin-left: 8px; font-size: 15px; letter-spacing: 2px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__who { font-size: 13px; font-weight: 400; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__state { order: 5; font-size: 11px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__ctx { order: 6; flex: 1 1 0; min-width: 50%; font-size: 12px; color: var(--n-desc); }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__ctx::before { content: ' · '; white-space: pre; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__seats { order: 7; gap: 4px; margin-top: 3px; align-self: center; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__slots { order: 8; margin: 3px 0 0 6px; font-size: 12px; align-self: center; }
html[data-theme="neon"][data-size="movil-v"] .kh-rooms--page .kh-room__join { flex: none; flex-basis: auto; order: 9; margin: 0; padding: 13px 12px; border-radius: 12px; font-size: 13px; }

/* Móvil H: título en una línea (EN VIVO · título 18 · bajada 12) y 3 tarjetas compactas */
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page { row-gap: 10px; column-gap: 12px; align-items: center; flex-grow: 1; grid-template-rows: auto 1fr; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-rooms__head { flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-rooms__title { flex-direction: row; align-items: center; gap: 12px; font-size: 18px; white-space: nowrap; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-rooms__title::before { font-size: 11px; padding: 4px 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-rooms__sub { font-size: 12px; color: var(--n-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page > .kh-rooms__create { align-self: center; font-size: 13px; padding: 13px 16px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-rooms__list { gap: 12px; align-self: stretch; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room { padding: 12px 14px; border-radius: 18px; column-gap: 8px; row-gap: 6px; --seat: 20px; --seat-r: 6px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__icon { width: 30px; height: 30px; border-radius: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__game { flex-basis: calc(100% - 38px); font-size: 14px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__code { font-size: 24px; letter-spacing: 4px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__state { font-size: 11px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__who { font-size: 13px; font-weight: 400; color: var(--n-desc); }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__ctx { font-size: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__seats { gap: 4px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__slots { margin-left: -2px; font-size: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rooms--page .kh-room__join { margin-top: auto; padding: 12px; border-radius: 12px; }

/* ── Rankings · escritorio y tablets (B-Rankings-Desktop, B-Rankings-TabletV, B-TabletH) ──────────────────────────── */
/* Juegos: columna "Rankings" de 320 px con el puesto de cada uno ("TU PUESTO 1.º" en el color del juego) */
html[data-theme="neon"] .kh-rankings { gap: 24px; flex-grow: 1; }
html[data-theme="neon"]:is([data-size="desktop"]) .kh-rankings { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
html[data-theme="neon"] .kh-rk-games ul { display: flex; flex-direction: column; gap: 8px; }
html[data-theme="neon"][data-size="desktop"] .kh-rk-games {
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
html[data-theme="neon"][data-size="desktop"] .kh-rk-games::before {
  content: 'Rankings'; margin-bottom: 4px; font: 700 18px var(--n-display); letter-spacing: 1px; color: var(--n-text);
}
html[data-theme="neon"] .kh-rk-game {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; text-align: left; background: transparent; border: 1px solid var(--n-border); border-radius: 16px; padding: 10px 12px;
  color: var(--n-text); font: 700 15px var(--n-text-font); cursor: pointer;
}
html[data-theme="neon"] .kh-rk-game[aria-pressed="true"] { background: var(--n-surface-2); border-color: var(--n-red); }
html[data-theme="neon"] .kh-rk-game__icon {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--g); box-sizing: border-box; object-fit: contain;
}
html[data-theme="neon"] .kh-rk-game__name { grid-row: 1 / 3; }
html[data-theme="neon"] .kh-rk-game__rank-label { grid-column: 3; grid-row: 1; justify-self: end; font: 11px var(--n-mono); color: var(--n-text-2); }
html[data-theme="neon"] .kh-rk-game__rank { grid-column: 3; grid-row: 2; justify-self: end; font: 700 18px var(--n-mono); color: var(--g); }
/* El puesto propio se lee "1.º" (data-rank crudo); sin puesto queda "—" */
html[data-theme="neon"] .kh-rk-game__rank:not([data-rank="none"]) { font-size: 0; }
html[data-theme="neon"] .kh-rk-game__rank:not([data-rank="none"])::after { content: attr(data-rank) '.º'; font-size: 18px; }

/* Tabla: título del juego, dificultad (rojo) y periodo (cian) arriba; podio a la izquierda y lista a la derecha */
html[data-theme="neon"] .kh-rk-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 18px; align-content: start;
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 20px; padding: 22px 26px; min-width: 0;
}
html[data-theme="neon"] .kh-rk-head { display: contents; }
html[data-theme="neon"] .kh-rk-title { grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: center; font: 700 30px var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-rk-filters { grid-column: 1 / -1; grid-row: 1; justify-self: end; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
html[data-theme="neon"] .kh-rk-main .kh-seg__btn { border-radius: 12px; padding: 10px 16px; font-size: 14px; }
html[data-theme="neon"] .kh-rk-main .kh-rk-periods .kh-seg__btn[aria-pressed="true"] { background: var(--n-cyan); border-color: var(--n-cyan); }
html[data-theme="neon"] .kh-rk-subtitle {
  grid-column: 1; grid-row: 2; align-self: start; z-index: 1; margin: 22px 22px 0; font: 12px var(--n-mono); letter-spacing: 2px;
  color: var(--n-lime); text-transform: uppercase; pointer-events: none;
}
html[data-theme="neon"] .kh-podium {
  grid-column: 1; grid-row: 2 / 4; align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  align-items: end; align-content: end; background: var(--n-hero); border: 1px solid var(--n-border-2); border-radius: 20px;
  padding: 56px 22px 0; overflow: hidden;
}
html[data-theme="neon"] .kh-podium__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; --pc: var(--n-gold); --ph: 180px; }
html[data-theme="neon"] .kh-podium__item[data-pos="1"] { order: 2; }
html[data-theme="neon"] .kh-podium__item[data-pos="2"] { order: 1; --pc: var(--n-cyan); --ph: 130px; }
html[data-theme="neon"] .kh-podium__item[data-pos="3"] { order: 3; --pc: var(--n-pink); --ph: 100px; }
html[data-theme="neon"] .kh-podium__avatar {
  width: 56px; height: 56px; border-radius: 16px; background: var(--pc); display: grid; place-items: center;
  font: 800 22px var(--n-display); color: var(--n-ink);
}
html[data-theme="neon"] .kh-podium__nick { font-weight: 700; font-size: 15px; color: var(--n-text); text-align: center; overflow-wrap: anywhere; }
html[data-theme="neon"] .kh-podium__item[data-me] .kh-podium__nick { color: var(--n-pink); }
html[data-theme="neon"] .kh-podium__score { font: 14px var(--n-mono); color: var(--n-desc); }
html[data-theme="neon"] .kh-podium__bar { display: none; }
/* El puesto es el bloque del podio (alto por puesto, borde superior del color, número grande) */
html[data-theme="neon"] .kh-podium__rank {
  order: 10; width: 100%; height: var(--ph); box-sizing: border-box; border-radius: 14px 14px 0 0; background: var(--n-hero-2);
  border-top: 3px solid var(--pc); display: grid; place-items: center; font-size: 0; color: var(--pc);
}
html[data-theme="neon"] .kh-podium__rank::after { font: 800 34px var(--n-display); }
html[data-theme="neon"] .kh-podium__item[data-pos="1"] .kh-podium__rank::after { content: '1'; }
html[data-theme="neon"] .kh-podium__item[data-pos="2"] .kh-podium__rank::after { content: '2'; }
html[data-theme="neon"] .kh-podium__item[data-pos="3"] .kh-podium__rank::after { content: '3'; }
html[data-theme="neon"] .kh-rk-main > .kh-rk-list { grid-column: 2; grid-row: 2; align-self: start; gap: 6px; font-size: 15px; }
html[data-theme="neon"] .kh-rk-main .kh-rk-row { gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--n-border); }
html[data-theme="neon"] .kh-rk-main .kh-rk-row__rank { width: 30px; }
html[data-theme="neon"] .kh-rk-around { grid-column: 2; grid-row: 3; align-self: start; display: flex; flex-direction: column; gap: 6px; }
html[data-theme="neon"] .kh-rk-around__title { display: flex; align-items: center; gap: 8px; font: 11px var(--n-mono); color: var(--n-text-2); text-transform: uppercase; }
html[data-theme="neon"] .kh-rk-around__title::before,
html[data-theme="neon"] .kh-rk-around__title::after { content: ''; flex-grow: 1; border-top: 1px dashed var(--n-border-2); }
html[data-theme="neon"] .kh-rk-main > .kh-rk-empty { grid-column: 1 / -1; grid-row: 2; }

/* Tablet V: 5 juegos en fila, dificultad junto al título, periodo segmentado a todo el ancho */
html[data-theme="neon"][data-size="tablet-v"] .kh-rankings { gap: 20px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-games ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game {
  height: 100%; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 8px; column-gap: 4px;
  align-items: baseline; justify-items: start; background: var(--n-surface); padding: 12px; font-size: 14px;
}
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game[aria-pressed="true"] { background: var(--n-surface-2); }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game__icon { grid-row: 1; grid-column: 1 / -1; width: 38px; height: 38px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game__name { grid-row: 2; grid-column: 1 / -1; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game__rank-label { grid-row: 3; grid-column: 1; justify-self: start; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game__rank { grid-row: 3; grid-column: 2; justify-self: start; font-size: 15px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-game__rank:not([data-rank="none"])::after { font-size: 15px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) .kh-rk-main { grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-main { border-radius: 22px; padding: 22px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-title { grid-column: 1; font-size: 26px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"], [data-size="movil-h"]) .kh-rk-filters { display: contents; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-boards { grid-column: 2; grid-row: 1; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-boards .kh-seg__btn { padding: 12px 16px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) .kh-rk-periods {
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--n-ink);
  border: 1px solid var(--n-border); border-radius: 14px; padding: 4px;
}
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"], [data-size="movil-h"]) .kh-rk-main .kh-rk-periods .kh-seg__btn { border: 0; border-radius: 10px; padding: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-rk-subtitle {
  grid-column: 1 / -1; grid-row: 3; margin: 0; font: 14px var(--n-text-font); letter-spacing: 0; color: var(--n-desc); text-transform: none;
}
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) .kh-podium { grid-column: 1 / -1; grid-row: 4; }
html[data-theme="neon"][data-size="tablet-v"] .kh-podium { padding: 22px 26px 0; gap: 16px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) .kh-rk-main > .kh-rk-list { grid-column: 1 / -1; grid-row: 5; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) .kh-rk-around { grid-column: 1 / -1; grid-row: 6; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="movil-v"]) .kh-rk-main > .kh-rk-empty { grid-row: 4; }

/* Tablet H (B-TabletH): pestañas de juego en fila (activa en rojo), periodo segmentado y el tablero en su panel */
html[data-theme="neon"][data-size="tablet-h"] .kh-rankings { gap: 16px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-games ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-game {
  width: auto; display: flex; align-items: baseline; gap: 8px; border-radius: 12px; padding: 12px 16px; font-size: 14px;
}
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-rk-game[aria-pressed="true"] { background: var(--n-red); border-color: var(--n-red); color: var(--n-ink); }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-rk-game :is(.kh-rk-game__icon, .kh-rk-game__rank-label) { display: none; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-rk-game__rank { color: inherit; font-weight: 500; font-size: 12px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-rk-game__rank:not([data-rank="none"])::after { font-size: 12px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main { background: none; border: 0; padding: 0; column-gap: 16px; row-gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-title { display: none; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-filters { justify-self: start; gap: 12px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main .kh-seg {
  gap: 4px; background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 14px; padding: 4px;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main .kh-seg__btn { border: 0; border-radius: 10px; padding: 11px 16px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-subtitle { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: center; margin: 0; color: var(--n-text-2); letter-spacing: 0; }
html[data-theme="neon"][data-size="tablet-h"] .kh-podium { grid-row: 2 / 4; padding: 12px 10px 0; gap: 8px; border-radius: 16px; align-self: start; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__item { gap: 4px; --ph: 60px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__item[data-pos="2"] { --ph: 44px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__item[data-pos="3"] { --ph: 32px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-podium__avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__nick,
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__score { font-size: 12px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__rank { border-radius: 10px 10px 0 0; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-v"]) .kh-podium__rank::after { font-size: 20px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main > .kh-rk-list { font-size: 14px; gap: 4px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main .kh-rk-row { gap: 10px; padding: 8px 10px; border-radius: 10px; border: 0; background: var(--n-surface); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main .kh-rk-row[data-me] { background: #2A1830; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-main .kh-rk-row__rank { width: 26px; }

/* ── Rankings · móviles (B-Rankings-MovilV, B-Rankings-MovilH) ────────────────────────────────────────────────────── */
/* Móvil V: "Rankings", juegos en fila con desplazamiento, dificultad y periodo segmentados, podio compacto y lista */
html[data-theme="neon"][data-size="movil-v"] .kh-rankings { gap: 12px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rankings::before { content: 'Rankings'; font: 700 22px var(--n-display); color: var(--n-text); }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-games ul {
  flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none;
}
html[data-theme="neon"][data-size="movil-v"] .kh-rk-games li { flex: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-game {
  width: auto; display: flex; align-items: center; gap: 8px; background: var(--n-surface); border-radius: 12px; padding: 12px 14px; font-size: 14px;
}
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; background: none; border: 0; padding: 0; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) :is(.kh-rk-title, .kh-rk-subtitle) { display: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main .kh-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--n-surface); border: 1px solid var(--n-border);
  border-radius: 14px; padding: 4px;
}
html[data-theme="neon"][data-size="movil-v"] .kh-rk-boards { grid-column: 1; grid-row: 1; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-periods { grid-column: 1; grid-row: 2; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main .kh-seg__btn { border: 0; border-radius: 10px; padding: 11px 6px; font-size: 13px; }
html[data-theme="neon"][data-size="movil-v"] .kh-podium { grid-column: 1; grid-row: 3; padding: 12px 12px 0; gap: 8px; border-radius: 18px; }
html[data-theme="neon"][data-size="movil-v"] .kh-podium__avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main > .kh-rk-list { grid-column: 1; grid-row: 4; gap: 4px; font-size: 14px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-around { grid-column: 1; grid-row: 5; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main > .kh-rk-empty { grid-column: 1; grid-row: 3; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rk-main .kh-rk-row { background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 10px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rk-main .kh-rk-row[data-me] { background: #2A1830; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main .kh-rk-row { gap: 10px; padding: 9px 12px; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main .kh-rk-row__rank { width: 26px; }

/* Móvil H: juegos en columna de 230 px; a la derecha, filtros arriba y podio + lista de 200 px */
html[data-theme="neon"][data-size="movil-h"] .kh-rankings { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: start; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-games ul { gap: 6px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-game {
  display: flex; align-items: center; gap: 10px; min-height: 44px; background: var(--n-surface); border-radius: 12px; padding: 4px 10px 4px 5px; font-size: 13px;
}
html[data-theme="neon"][data-size="movil-h"] .kh-rk-game__icon { width: 32px; height: 32px; border-radius: 9px; border: 0; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-game__name { flex-grow: 1; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-game__rank-label { display: none; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-game__rank { font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-game__rank:not([data-rank="none"])::after { font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main {
  grid-template-columns: minmax(0, 1fr) 200px; column-gap: 10px; row-gap: 10px; background: none; border: 0; padding: 0;
}
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main .kh-seg { gap: 2px; background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 12px; padding: 3px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-boards { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-periods { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main .kh-seg__btn { border: 0; border-radius: 9px; padding: 11px 10px; font-size: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium { grid-column: 1; grid-row: 2 / 4; padding: 10px 10px 0; gap: 6px; border-radius: 16px; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium__item { gap: 3px; --ph: 56px; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium__item[data-pos="2"] { --ph: 40px; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium__item[data-pos="3"] { --ph: 30px; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium__avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] :is(.kh-podium__nick, .kh-podium__score) { font-size: 11px; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium__rank { border-radius: 9px 9px 0 0; }
html[data-theme="neon"][data-size="movil-h"] .kh-podium__rank::after { font-size: 18px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main > .kh-rk-list { grid-column: 2; grid-row: 2; gap: 4px; font-size: 13px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-around { grid-column: 2; grid-row: 3; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main .kh-rk-row { gap: 8px; padding: 8px 10px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main .kh-rk-row__rank { width: 22px; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main .kh-rk-row__nick { font-size: 12px; }

/* ── Mis jugadas · escritorio y tablets (B-MisJugadas-Desktop, B-TabletV, B-MisJugadas-TabletH) ─────────────────── */
/* Temporada: anillo de hitos (lima sobre #2E2D52) y las 4 cifras en Unbounded 800 sobre el panel #1B1640 */
html[data-theme="neon"] .kh-mis { gap: 22px; }
html[data-theme="neon"] .kh-season {
  position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; row-gap: 14px; align-items: center;
  align-content: center; background: var(--n-hero); border: 1px solid var(--n-border-2); border-radius: 24px; padding: 24px 32px;
}
html[data-theme="neon"] .kh-season__title { display: none; }
html[data-theme="neon"] .kh-season__sub { grid-column: 2; font: 700 26px var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-season__hitos {
  grid-column: 1; grid-row: 1 / 4; position: relative; width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; --ring: 10px;
}
html[data-theme="neon"] .kh-season__hitos::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--n-lime) var(--kh-pct, 0%), var(--n-border) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 0.5px), #000 calc(100% - var(--ring)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 0.5px), #000 calc(100% - var(--ring)));
}
html[data-theme="neon"] .kh-season__hitos :is(.kh-stat__label, .kh-bar__fill) { display: none; }
html[data-theme="neon"] .kh-season__hitos .kh-stat__value { position: relative; font: 800 34px/1.2 var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-season__hitos::after { content: 'DE ' attr(aria-valuemax) ' HITOS'; position: relative; font: 11px var(--n-mono); color: var(--n-text-2); }
html[data-theme="neon"] .kh-stats { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html[data-theme="neon"] .kh-stat[data-stat="played"] { order: 1; }
html[data-theme="neon"] .kh-stat[data-stat="best"] { order: 2; }
html[data-theme="neon"] .kh-stat[data-stat="compas"] { order: 3; }
html[data-theme="neon"] .kh-stat[data-stat="week"] { order: 4; }
html[data-theme="neon"] .kh-stats .kh-stat__label { font: 11px var(--n-mono); color: var(--n-text-2); text-transform: uppercase; }
html[data-theme="neon"] .kh-stats .kh-stat__value { font: 800 32px/1.25 var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-stat[data-stat="compas"] .kh-stat__value { color: var(--n-pink); }
html[data-theme="neon"] .kh-stat[data-stat="week"] .kh-stat__value { color: var(--n-cyan); }
/* "1.º" grande en amarillo y "en Pasapaloma" debajo (el texto trae el salto de línea) */
html[data-theme="neon"] .kh-stat[data-stat="best"] .kh-stat__value { white-space: pre-line; font: 12px/1.4 var(--n-text-font); color: var(--n-desc); }
html[data-theme="neon"] .kh-stat[data-stat="best"] .kh-stat__value::first-line { font: 800 32px/1.25 var(--n-display); color: var(--n-gold); }
html[data-theme="neon"] .kh-season__note { grid-column: 2; font-size: 14px; color: var(--n-desc); }

/* Tarjetas de cada juego: ícono con borde del color, puesto "1.º" en mono del color, hitos en barra y chips */
html[data-theme="neon"] .kh-mis-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html[data-theme="neon"] .kh-mis-card > article {
  height: 100%; box-sizing: border-box; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; align-content: start;
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 20px; padding: 20px;
}
html[data-theme="neon"] .kh-mis-card__icon { grid-column: 1; grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--g); box-sizing: border-box; object-fit: contain; }
html[data-theme="neon"] .kh-mis-card__name { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 700 19px var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-mis-card__rank { grid-column: 3; grid-row: 1; justify-self: end; font: 700 28px var(--n-mono); color: var(--g); }
html[data-theme="neon"] .kh-mis-card__rank:not([data-rank="none"]) { font-size: 0; }
html[data-theme="neon"] .kh-mis-card__rank:not([data-rank="none"])::after { content: attr(data-rank) '.º'; font-size: 28px; }
html[data-theme="neon"] .kh-mis-card__best { grid-column: 3; grid-row: 2; justify-self: end; font: 11px var(--n-mono); color: var(--n-text-2); }
html[data-theme="neon"] .kh-mis-card > article > :is(.kh-mis-card__meta, .kh-mis-card__hitos, .kh-chips, .kh-mis-card__next, .kh-mis-card__continue) { grid-column: 1 / -1; margin-top: 14px; }
html[data-theme="neon"] .kh-mis-card__meta { font-size: 13px; color: var(--n-text-2); }
html[data-theme="neon"] .kh-mis-card__hitos { display: flex; align-items: center; gap: 12px; }
html[data-theme="neon"] .kh-mis-card__hitos-label { flex: none; font: 11px var(--n-mono); color: var(--n-text-2); }
html[data-theme="neon"] .kh-mis-card__hitos .kh-bar { flex-grow: 1; height: 8px; border-radius: 4px; background: var(--n-border); overflow: hidden; }
html[data-theme="neon"] .kh-mis-card__hitos .kh-bar__fill { display: block; height: 100%; width: var(--kh-pct, 0%); background: var(--g); border-radius: 4px; }
html[data-theme="neon"] .kh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme="neon"] .kh-chips .kh-chip {
  min-height: 0; font: 700 12px var(--n-text-font); padding: 6px 10px; border-radius: 9px; background: transparent; color: var(--n-text-2);
  border: 1px solid var(--n-border);
}
html[data-theme="neon"] .kh-chips .kh-chip[data-state="won"] { background: var(--g); color: var(--n-ink); border-color: var(--g); }
html[data-theme="neon"] .kh-chips .kh-chip[data-state="secret"] { border: 1px dashed #6E6B92; }
html[data-theme="neon"] .kh-mis-card__next { font-size: 13px; color: var(--n-desc); }
html[data-theme="neon"] .kh-mis-card__continue { border: 0; background: var(--g); color: var(--n-ink); font-weight: 800; font-size: 14px; padding: 13px 18px; text-align: center; }

/* Tablet V: sin título; tarjetas una bajo otra, con el nombre y el detalle juntos y "Continuar" junto al próximo hito */
html[data-theme="neon"][data-size="tablet-v"] .kh-mis { gap: 20px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="tablet-h"]) .kh-season__sub { display: none; }
html[data-theme="neon"][data-size="tablet-v"] .kh-season { padding: 24px 26px; column-gap: 24px; row-gap: 12px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="tablet-h"]) .kh-season__hitos { grid-row: 1 / 3; }
html[data-theme="neon"][data-size="tablet-v"] .kh-stats { gap: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-stats .kh-stat__value,
html[data-theme="neon"][data-size="tablet-v"] .kh-stat[data-stat="best"] .kh-stat__value::first-line { font-size: 30px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-list { display: flex; flex-direction: column; gap: 20px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card > article { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 18px 20px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card__icon { width: 50px; height: 50px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card__name { grid-row: 1; align-self: end; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card > article > .kh-mis-card__meta { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card__rank:not([data-rank="none"])::after { font-size: 26px; }
html[data-theme="neon"]:is([data-size="tablet-v"], [data-size="tablet-h"]) .kh-mis-card > article > :is(.kh-mis-card__hitos, .kh-chips, .kh-mis-card__next, .kh-mis-card__continue) { margin-top: 12px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card > article > .kh-mis-card__next { grid-column: 1 / 3; grid-row: 5; align-self: center; }
html[data-theme="neon"][data-size="tablet-v"] .kh-mis-card > article > .kh-mis-card__continue { grid-column: 3; grid-row: 5; }

/* Tablet H: anillo de 124 px, cifras de 28 px y tres tarjetas */
html[data-theme="neon"][data-size="tablet-h"] .kh-mis { gap: 18px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-season { grid-template-columns: 124px minmax(0, 1fr); column-gap: 26px; row-gap: 10px; padding: 20px 26px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-season__hitos { width: 124px; height: 124px; --ring: 9px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-season__hitos .kh-stat__value { font-size: 28px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-stats { gap: 14px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-stats .kh-stat__value,
html[data-theme="neon"][data-size="tablet-h"] .kh-stat[data-stat="best"] .kh-stat__value::first-line { font-size: 28px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-list { gap: 16px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-card > article { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; padding: 18px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-card__icon { width: 48px; height: 48px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-card__name { font-size: 17px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-card__rank:not([data-rank="none"])::after { font-size: 24px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-card > article > .kh-mis-card__meta { margin-top: 12px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-mis-card__hitos { gap: 10px; }

/* ── Mis jugadas · móviles (B-MisJugadas-MovilV, B-MisJugadas-MovilH) ─────────────────────────────────────────────── */
/* Móvil V: "Mis jugadas" sobre el panel, anillo de 100 px y cifras 2×2 (PARTIDAS, COMPAS / MEJOR PUESTO, ESTA SEMANA) */
html[data-theme="neon"][data-size="movil-v"] .kh-mis { gap: 14px; }
html[data-theme="neon"][data-size="movil-v"] .kh-season {
  margin-top: 41px; grid-template-columns: 100px minmax(0, 1fr); column-gap: 16px; row-gap: 16px; padding: 18px; border-radius: 22px;
}
html[data-theme="neon"][data-size="movil-v"] .kh-season__title { display: block; position: absolute; top: -41px; left: 0; font: 700 22px var(--n-display); color: var(--n-text); }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-season__sub { display: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-season__hitos { grid-row: 1; width: 100px; height: 100px; --ring: 8px; }
html[data-theme="neon"][data-size="movil-v"] .kh-season__hitos .kh-stat__value { font-size: 24px; }
html[data-theme="neon"][data-size="movil-v"] .kh-stats { grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-theme="neon"][data-size="movil-v"] .kh-stat[data-stat="compas"] { order: 2; }
html[data-theme="neon"][data-size="movil-v"] .kh-stat[data-stat="best"] { order: 3; }
html[data-theme="neon"][data-size="movil-v"] .kh-stats .kh-stat__value,
html[data-theme="neon"][data-size="movil-v"] .kh-stat[data-stat="best"] .kh-stat__value::first-line { font-size: 22px; }
html[data-theme="neon"][data-size="movil-v"] .kh-stat[data-stat="best"] .kh-stat__value { font-size: 11px; }
html[data-theme="neon"][data-size="movil-v"] .kh-season__note { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-list { display: flex; flex-direction: column; gap: 14px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-card > article { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; padding: 16px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-card__icon { width: 46px; height: 46px; border-radius: 13px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-card__name { font-size: 16px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-card__rank:not([data-rank="none"])::after { font-size: 22px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-card > article > :is(.kh-mis-card__meta, .kh-mis-card__hitos, .kh-chips, .kh-mis-card__next, .kh-mis-card__continue) { margin-top: 10px; }
html[data-theme="neon"][data-size="movil-v"] .kh-mis-card__hitos { gap: 10px; }

/* Móvil H: temporada en una franja (anillo de 68 px y cifras en fila) y tres tarjetas compactas */
html[data-theme="neon"][data-size="movil-h"] .kh-mis { gap: 10px; }
html[data-theme="neon"][data-size="movil-h"] .kh-season { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-radius: 18px; }
html[data-theme="neon"][data-size="movil-h"] .kh-season__hitos { flex: none; width: 68px; height: 68px; --ring: 6px; }
html[data-theme="neon"][data-size="movil-h"] .kh-season__hitos .kh-stat__value { font-size: 17px; line-height: 1; }
html[data-theme="neon"][data-size="movil-h"] .kh-season__hitos::after { content: 'DE ' attr(aria-valuemax); }
html[data-theme="neon"][data-size="movil-h"] .kh-stats { display: flex; gap: 18px; flex: none; }
html[data-theme="neon"][data-size="movil-h"] .kh-stats .kh-stat__value,
html[data-theme="neon"][data-size="movil-h"] .kh-stat[data-stat="best"] .kh-stat__value::first-line { font-size: 20px; }
html[data-theme="neon"][data-size="movil-h"] .kh-season__note {
  min-width: 0; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-theme="neon"][data-size="movil-h"] .kh-mis-list { gap: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card > article { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 14px; border-radius: 18px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__icon { width: 38px; height: 38px; border-radius: 11px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__name { font-size: 14px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__rank:not([data-rank="none"])::after { font-size: 18px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card > article > :is(.kh-mis-card__meta, .kh-mis-card__hitos, .kh-chips, .kh-mis-card__next, .kh-mis-card__continue) { margin-top: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__meta { font-size: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__hitos { gap: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__hitos .kh-bar { height: 6px; border-radius: 3px; }
html[data-theme="neon"][data-size="movil-h"] .kh-chips { gap: 5px; }
html[data-theme="neon"][data-size="movil-h"] .kh-chips .kh-chip { font-size: 11px; padding: 4px 8px; border-radius: 8px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__next { font-size: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-mis-card__continue { font-size: 13px; padding: 13px 12px; }

/* ── Mi cuenta (B-Cuenta-Desktop, B-Cuenta-TabletH, B-Cuenta-TabletV, B-Cuenta-MovilV, B-Cuenta-MovilH) ──────────── */
/* Hoja #15152A: lateral de 560 px (escritorio, tablet H), inferior de 2 columnas (tablet V), pantalla (móviles) */
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-account-veil { background: rgba(5, 5, 12, 0.72); }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-account-veil { background: var(--n-surface); }
html[data-theme="neon"] .kh-account-sheet { background: var(--n-surface); padding: 18px 16px 24px; gap: 14px; font-family: var(--n-text-font); color: var(--n-text); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-account-sheet {
  width: 560px; background: var(--n-surface); border-left: 1px solid var(--n-border-2); box-shadow: none; padding: 28px; gap: 16px;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-account-sheet { padding: 22px 26px; gap: 14px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-account-sheet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 16px; max-height: none; height: 700px;
  background: var(--n-surface); border-top: 1px solid var(--n-border-2); border-radius: 28px 28px 0 0; box-shadow: none; padding: 14px 30px 30px;
}
html[data-theme="neon"][data-size="tablet-v"] .kh-account-sheet::before {
  content: ''; grid-column: 1 / -1; justify-self: center; width: 56px; height: 5px; border-radius: 3px; background: var(--n-border-2);
}
html[data-theme="neon"][data-size="tablet-v"] .kh-account-sheet > :is(.kh-page-head) { grid-column: 1 / -1; }
html[data-theme="neon"][data-size="tablet-v"] .kh-acc-profile { grid-column: 1; grid-row: 3; }
html[data-theme="neon"][data-size="tablet-v"] .kh-acc-links { grid-column: 1; grid-row: 4; }
html[data-theme="neon"][data-size="tablet-v"] .kh-acc-sound { grid-column: 1; grid-row: 5; }
html[data-theme="neon"][data-size="tablet-v"] .kh-acc-themes { grid-column: 2; grid-row: 3 / 5; align-self: start; }
html[data-theme="neon"][data-size="tablet-v"] :is(.kh-acc-signout, .kh-acc-kh) { grid-column: 2; grid-row: 5; align-self: end; }
html[data-theme="neon"][data-size="movil-h"] .kh-account-sheet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 12px; padding: 16px 20px;
}
html[data-theme="neon"][data-size="movil-h"] .kh-account-sheet > .kh-page-head { grid-column: 1 / -1; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-profile { grid-column: 1; grid-row: 2; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-sound { grid-column: 1; grid-row: 3; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-themes { grid-column: 2; grid-row: 2; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-links { grid-column: 2; grid-row: 3; align-self: start; }

/* Encabezado: "Mi cuenta" en Unbounded; "Volver" en recuadro (escritorio y tablets) o "‹" de 44 px (móviles) */
html[data-theme="neon"] .kh-account-sheet .kh-page-head { flex-direction: row; justify-content: flex-start; gap: 12px; }
html[data-theme="neon"] .kh-account-sheet .kh-page-head__title { font: 700 22px var(--n-display); letter-spacing: 0; color: var(--n-text); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-v"]) .kh-account-sheet .kh-page-head__title { font-size: 24px; }
html[data-theme="neon"][data-size="movil-h"] .kh-account-sheet .kh-page-head__title { font-size: 20px; }
html[data-theme="neon"] .kh-back {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--n-border-2); background: none; color: var(--n-text); font-size: 0;
}
html[data-theme="neon"] .kh-back::after { content: '‹'; font: 700 20px var(--n-text-font); line-height: 1; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-account-sheet .kh-back {
  order: 3; margin-left: auto; width: auto; height: auto; padding: 12px 16px; background: none;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-account-sheet .kh-back::after { content: 'Volver'; font: 700 14px var(--n-text-font); }
/* "Cerrar sesión" (borde rojo, texto rosado): junto a Volver en escritorio y tablet H, arriba a la derecha en móvil H */
html[data-theme="neon"] .kh-acc-signout {
  width: 100%; margin-top: auto; background: transparent; border: 1px solid var(--n-red); color: var(--n-pink); font: 700 15px var(--n-text-font);
  letter-spacing: 0; padding: 13px; border-radius: 12px;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="movil-h"]) .kh-acc-signout {
  position: absolute; top: 28px; right: 122px; width: auto; margin: 0; font-size: 14px; padding: 12px 16px;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-acc-signout { top: 22px; right: 120px; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-signout { top: 16px; right: 20px; }

/* Bloques #1E1E3A r16: apodo (con "No uses tu nombre real." en amarillo) y avatar; enlaces; theme; sonido */
html[data-theme="neon"] :is(.kh-acc-profile, .kh-acc-links, .kh-acc-themes, .kh-acc-sound) {
  background: var(--n-surface-2); border: 1px solid var(--n-border); border-radius: 16px; padding: 14px 16px;
}
html[data-theme="neon"]:is([data-size="movil-v"]) :is(.kh-acc-profile, .kh-acc-themes, .kh-acc-sound) { padding: 14px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) :is(.kh-acc-profile, .kh-acc-themes, .kh-acc-sound) { padding: 12px 16px; }
html[data-theme="neon"] .kh-acc-profile { display: flex; flex-direction: column; gap: 8px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-acc-profile { background: var(--n-surface-2); border: 1px solid var(--n-border); padding: 14px 16px; gap: 8px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-acc-profile { padding: 12px 16px; }
html[data-theme="neon"] .kh-acc-field { order: 1; gap: 8px; }
html[data-theme="neon"] .kh-acc-avatar-row { order: 2; flex-wrap: wrap; gap: 14px; }
html[data-theme="neon"] .kh-acc-avatar-row::before {
  content: 'AVATAR'; flex-basis: 100%; margin: 4px 0 -6px; font: 11px var(--n-mono); letter-spacing: 1px; color: var(--n-text-2);
}
html[data-theme="neon"][data-size="movil-h"] .kh-acc-avatar-row::before { display: none; }
html[data-theme="neon"] .kh-account-sheet .kh-label { font: 11px var(--n-mono); letter-spacing: 1px; color: var(--n-text-2); }
html[data-theme="neon"] .kh-account-sheet .kh-input {
  height: 46px; background: var(--n-ink); border: 1px solid var(--n-border-2); border-radius: 12px; padding: 0 14px;
  font: 600 16px var(--n-text-font); color: var(--n-text);
}
html[data-theme="neon"] .kh-acc-field__row { gap: 10px; }
html[data-theme="neon"] .kh-acc-field__row [data-action="save-nick"] { border: 0; background: var(--n-red); color: var(--n-ink); font-weight: 800; font-size: 15px; padding: 0 20px; }
html[data-theme="neon"] .kh-acc-real { font-size: 12px; font-weight: 700; color: var(--n-gold); }
html[data-theme="neon"] .kh-acc-real::before { content: 'De 2 a 16 caracteres. '; font-weight: 400; color: var(--n-text-2); }
html[data-theme="neon"] .kh-acc-status { font-size: 12px; min-height: 0; }
html[data-theme="neon"] .kh-acc-status:empty { display: none; }
html[data-theme="neon"] .kh-acc-avatar {
  width: 64px; height: 64px; border-radius: 16px; border: 2px solid var(--n-red); background: var(--n-red); box-sizing: border-box; object-fit: cover;
}
html[data-theme="neon"][data-size="desktop"] .kh-acc-avatar { width: 64px; height: 64px; }
html[data-theme="neon"] .kh-acc-avatar-side { gap: 6px; min-width: 0; }
html[data-theme="neon"] .kh-acc-avatar-note { order: -1; font: 13px var(--n-text-font); color: var(--n-desc); }
html[data-theme="neon"] .kh-acc-generate { font-size: 14px; padding: 12px 16px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) .kh-acc-avatar-side { flex: 1 1 0; flex-direction: row; align-items: center; gap: 14px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) .kh-acc-avatar-note { flex: 1 1 auto; }
html[data-theme="neon"][data-size="tablet-h"] .kh-acc-avatar { width: 60px; height: 60px; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-avatar { width: 56px; height: 56px; border-radius: 14px; }
html[data-theme="neon"][data-size="movil-h"] :is(.kh-acc-avatar-note) { font-size: 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-generate { font-size: 13px; padding: 12px; }

/* Enlaces: "Mis compas 3 ▸" y "Cómo les dices a tus amigos: Compas ▸" (la palabra en lima) */
html[data-theme="neon"] .kh-acc-links { display: flex; flex-direction: column; padding: 4px 16px; border-top: 1px solid var(--n-border); }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="movil-h"]) .kh-acc-links { padding: 2px 16px; }
html[data-theme="neon"] .kh-acc-links__row {
  width: 100%; min-height: 44px; font: 700 14px var(--n-text-font); color: var(--n-text); border-bottom: 1px solid var(--n-border); gap: 0;
}
html[data-theme="neon"] .kh-acc-links__row[data-action="word"] { font-weight: 600; border-bottom: 0; }
html[data-theme="neon"] .kh-acc-links__row[data-action="word"][aria-expanded="true"] { border-bottom: 1px solid var(--n-border); }
html[data-theme="neon"] .kh-acc-links__value { font: 12px var(--n-mono); color: var(--n-text-2); }
html[data-theme="neon"] .kh-acc-links__row[data-action="word"] .kh-acc-links__value { margin-left: 6px; font: 700 14px var(--n-text-font); color: var(--n-lime); }
html[data-theme="neon"] .kh-acc-links__row[data-action="word"]::after { content: '▸'; margin-left: auto; color: var(--n-text-2); }
html[data-theme="neon"] .kh-acc-word { border-bottom: 0; }
html[data-theme="neon"] .kh-words__chip { min-height: 44px; font: 700 14px var(--n-text-font); border-radius: 10px; background: var(--n-surface); border-color: var(--n-border); padding: 0 14px; }
html[data-theme="neon"] .kh-words__chip[aria-pressed="true"] { background: var(--n-red); border-color: var(--n-red); color: var(--n-ink); }

/* Theme: miniaturas con fondo, emblema 24 r6 y dos barras del color del theme; la actual con borde rojo y "ACTUAL" lima */
html[data-theme="neon"] .kh-acc-themes { display: flex; flex-direction: column; gap: 8px; }
html[data-theme="neon"] .kh-acc-themes__head { flex-direction: column; align-items: flex-start; gap: 8px; }
html[data-theme="neon"] .kh-acc-h2 { font: 500 11px var(--n-mono); letter-spacing: 1px; color: var(--n-text-2); text-transform: uppercase; }
html[data-theme="neon"] .kh-acc-themes__note { font: 13px var(--n-text-font); color: var(--n-desc); }
html[data-theme="neon"][data-size="movil-h"] .kh-acc-themes__note { display: none; }
html[data-theme="neon"] .kh-themes[data-variant="account"] { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-themes[data-variant="account"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 5px; border-radius: 14px;
  background: var(--n-surface); border: 2px solid var(--n-border); color: var(--n-text); font: 700 14px var(--n-text-font);
}
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card[aria-pressed="true"] { border-color: var(--n-red); }
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { grid-column: 1 / -1; width: 100%; height: 64px; border-radius: 10px; }
html[data-theme="neon"][data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { height: 70px; }
html[data-theme="neon"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { height: 84px; }
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__logo { display: block; left: 7px; top: 7px; width: 24px; height: 24px; border-radius: 6px; }
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__ink {
  display: block; left: 7px; top: auto; bottom: 7px; width: 48%; height: 7px; border-radius: 4px;
}
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__ink--short { bottom: 18px; width: 30%; height: 5px; border-radius: 3px; opacity: 0.6; }
html[data-theme="neon"] .kh-theme-card[data-theme-id="casino"] .kh-theme-card__ink { background: #E3B85A; }
html[data-theme="neon"] .kh-theme-card[data-theme-id="neon"] .kh-theme-card__ink { background: #FF4455; }
html[data-theme="neon"] .kh-theme-card[data-theme-id="recreo"] .kh-theme-card__ink { background: #F2B632; }
html[data-theme="neon"] .kh-theme-card[data-theme-id="cuaderno"] .kh-theme-card__ink { background: #FFE45C; }
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__art { display: none; }
/* Nombre "Casino", "Neón"… en Manrope (el texto viene en versales: minúsculas y mayúscula inicial) */
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__name {
  display: block; padding: 0 3px 3px; font: 700 14px var(--n-text-font); letter-spacing: 0; text-transform: lowercase;
}
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__name::first-letter { text-transform: uppercase; }
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card__state {
  padding: 0 4px 3px; font: 700 11px var(--n-mono); color: var(--n-text-2); text-transform: uppercase; text-align: right;
}
html[data-theme="neon"] .kh-themes[data-variant="account"] .kh-theme-card[aria-pressed="true"] .kh-theme-card__state { color: var(--n-lime); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-themes[data-variant="account"] .kh-theme-card { grid-template-columns: minmax(0, 1fr); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-themes[data-variant="account"] .kh-theme-card__state { text-align: left; min-height: 12px; }

/* Sonido: Música y Efectos con rango rojo, "Silenciar todo" */
html[data-theme="neon"] .kh-acc-sound { gap: 4px; }
html[data-theme="neon"] .kh-acc-sound .kh-acc-h2 { margin-bottom: 4px; }
html[data-theme="neon"] :is(.kh-acc-sound__row, .kh-acc-sound__mute) { font: 600 16px var(--n-text-font); }
html[data-theme="neon"] .kh-acc-sound__row { grid-template-columns: 90px minmax(0, 1fr); }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"], [data-size="tablet-v"]) .kh-acc-sound__row { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
html[data-theme="neon"] .kh-account-sheet :is(.kh-range, .kh-check) { accent-color: var(--n-red); }
html[data-theme="neon"] .kh-account-sheet .kh-check { width: 20px; height: 20px; margin: 0; }
html[data-theme="neon"] .kh-acc-kh { font-size: 13px; color: var(--n-text-2); }

/* ── Mis compas (B-MisCompas-Desktop, B-MisCompas-MovilV) ────────────────────────────────────────────────────────── */
/* Escritorio: "‹ Volver a Mi cuenta", "SOLO TÚ VES ESTA LISTA", "Mis compas" 40 px y la lista de 820 px */
html[data-theme="neon"] .kh-compas { gap: 10px; font-family: var(--n-text-font); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-compas { width: 820px; max-width: 100%; align-self: flex-start; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-compas > .kh-page-head { display: contents; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-compas .kh-back {
  order: 1; width: auto; height: auto; border: 0; align-self: flex-start; margin-bottom: 4px; color: var(--n-cyan); font-size: 0;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-compas .kh-back::after { content: '‹ ' attr(aria-label); font: 700 14px var(--n-text-font); }
html[data-theme="neon"] .kh-compas__tag {
  order: 2; align-self: flex-start; font: 700 12px/1.2 var(--n-mono); letter-spacing: 0; color: var(--n-ink); background: var(--n-lime); padding: 4px 8px; border-radius: 6px;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-compas .kh-page-head__title { order: 3; font: 700 40px/1 var(--n-display); letter-spacing: 0; color: var(--n-text); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-compas :is(.kh-page-head__count, .kh-account) { display: none; }
html[data-theme="neon"] .kh-compas__intro { order: 4; font: 16px var(--n-text-font); color: var(--n-desc); }
html[data-theme="neon"] .kh-compas__body { order: 5; margin-top: 12px; }
html[data-theme="neon"] .kh-compas__list { gap: 12px; }
/* Cada compa: inicial en cuadro de color, apodo, "jugaron 7 veces · último: ayer en Pasapaloma", Pausar / Eliminar */
html[data-theme="neon"] .kh-compa {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--n-surface); border: 1px solid var(--n-border-2);
  border-radius: 20px; padding: 16px 20px;
}
html[data-theme="neon"] .kh-compa[data-paused="true"] { border-color: var(--n-border); }
html[data-theme="neon"] .kh-compa__row { flex: 1 1 0; min-width: 0; gap: 16px; }
html[data-theme="neon"] .kh-compa[data-paused="true"] .kh-compa__row { opacity: 0.55; }
html[data-theme="neon"] .kh-compa__ini {
  width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--n-gold); font: 800 22px var(--n-display); color: var(--n-ink);
}
html[data-theme="neon"] .kh-compas__item:nth-child(3n+2) .kh-compa__ini { background: var(--n-pink); }
html[data-theme="neon"] .kh-compas__item:nth-child(3n) .kh-compa__ini { background: var(--n-cyan); }
html[data-theme="neon"] .kh-compa__nick { font: 700 18px var(--n-text-font); color: var(--n-text); }
html[data-theme="neon"] .kh-compa__meta { font-size: 14px; color: var(--n-desc); }
html[data-theme="neon"] .kh-compa__paused { font: 700 12px var(--n-mono); font-style: normal; color: var(--n-gold); border: 1px solid var(--n-gold); padding: 6px 10px; border-radius: 8px; }
html[data-theme="neon"] .kh-compa__actions { display: flex; gap: 16px; }
html[data-theme="neon"] .kh-compa__actions .kh-btn { font-size: 14px; padding: 13px 18px; }
html[data-theme="neon"] .kh-compa__actions [data-action="pause"] { color: var(--n-text); border-color: var(--n-border-2); }
html[data-theme="neon"] .kh-compa__actions [data-action="resume"] { background: var(--n-cyan); }
html[data-theme="neon"] .kh-compa__actions .kh-btn--ghost { border: 1px solid var(--n-red); color: var(--n-pink); font-weight: 700; }
html[data-theme="neon"] .kh-compa__err { flex-basis: 100%; color: var(--n-pink); }
/* Confirmar eliminar: panel #15152A con borde rojo sobre velo (centrado en escritorio, hoja inferior en móvil) */
html[data-theme="neon"] .kh-compa__confirm {
  position: fixed; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--n-surface); border: 1px solid var(--n-red); border-radius: 24px; padding: 26px; gap: 14px;
  box-shadow: 0 0 0 100vmax rgba(5, 5, 12, 0.72);
}
html[data-theme="neon"] .kh-compa__question { font: 700 22px/1.2 var(--n-display); color: var(--n-text); }
html[data-theme="neon"] .kh-compa__note { display: block; margin-top: 14px; font: 15px var(--n-text-font); color: var(--n-desc); }
html[data-theme="neon"] .kh-compa__confirm .kh-compa__actions { justify-content: flex-end; gap: 10px; margin-top: 6px; }
html[data-theme="neon"] .kh-compa__confirm .kh-btn { font-size: 15px; padding: 13px 20px; }
/* Móvil V: encabezado propio de la pantalla (‹ · Mis compas · cuenta), tarjetas en columna y botones a lo ancho */
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-shell:has(.kh-compas) > .kh-header[data-variant="mobile"] { display: none; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas { gap: 8px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas > .kh-page-head { margin-bottom: 6px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas .kh-page-head__title { font: 700 22px var(--n-display); letter-spacing: 0; color: var(--n-text); }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas .kh-page-head__count { display: none; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas__tag { font-size: 11px; padding: 3px 7px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas__intro { font-size: 14px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas__body { margin-top: 6px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compas__list { gap: 10px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border-radius: 18px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__row { gap: 12px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__ini { width: 48px; height: 48px; border-radius: 14px; font-size: 19px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__nick { font-size: 16px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__meta { font-size: 13px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__paused { align-self: flex-start; font-size: 11px; padding: 5px 8px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__actions { gap: 8px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__actions .kh-btn { flex: 1 1 0; padding: 13px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__confirm {
  left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-width: none; border: 0; border-top: 1px solid var(--n-red);
  border-radius: 24px 24px 0 0; padding: 22px 16px 28px; gap: 12px;
}
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__question { font-size: 20px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__note { font-size: 14px; margin-top: 12px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-compa__confirm .kh-btn { flex: 1 1 0; padding: 13px; }

/* ── Estados (B-Estado-Cargando, -Error, -SinCompas, -SinPartidas, -SinIcono, -SinSesion) ────────────────────────── */
/* Cargando: "CARGANDO · Buscando a tus compas…" sobre las formas del Inicio (#232246, pulso apagado con reduced-motion) */
html[data-theme="neon"] .kh-state--loading { gap: 0; }
html[data-theme="neon"] .kh-state--loading .kh-state__text {
  display: flex; align-items: center; gap: 8px; text-align: left; background: var(--n-surface); border: 1px solid var(--n-border); border-bottom: 0;
  border-radius: 16px 16px 0 0; padding: 12px 14px 0; font: 700 14px var(--n-text-font); font-style: normal; color: var(--n-text-2);
}
html[data-theme="neon"] .kh-state--loading .kh-state__text::before {
  content: 'CARGANDO'; font: var(--n-badge); color: var(--n-lime); border: 1px solid var(--n-lime); padding: 2px 6px; border-radius: 5px;
}
html[data-theme="neon"] .kh-skel-group, html[data-theme="neon"] .kh-skel-group:has(.kh-skel--card) { display: flex; flex-direction: column; gap: 8px; }
html[data-theme="neon"] .kh-skel { gap: 12px; padding: 10px 12px; border: 1px solid var(--n-border); border-radius: 16px; background: var(--n-surface); }
html[data-theme="neon"] :is(.kh-skel__dot, .kh-skel__line) { background: #232246; border: 0; border-radius: 8px; }
html[data-theme="neon"] .kh-skel__dot { width: 42px; height: 42px; border-radius: 12px; }
html[data-theme="neon"] .kh-skel__line { height: 12px; width: 46%; }
html[data-theme="neon"] .kh-skel__line--short { height: 10px; width: 34%; opacity: 1; }
html[data-theme="neon"] .kh-state--loading .kh-skel-group > .kh-skel:first-child { border-top: 0; border-radius: 0 0 16px 16px; padding: 10px 14px 12px; }
html[data-theme="neon"] .kh-skel--row .kh-skel__dot { width: 40px; height: 40px; border-radius: 10px; }
html[data-theme="neon"] .kh-skel--hero { margin: 6px 0; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; background: var(--n-hero); border-color: var(--n-border-2); border-radius: 22px; }
html[data-theme="neon"] .kh-skel--hero .kh-skel__dot { width: 64px; height: 10px; border-radius: 8px; }
html[data-theme="neon"] .kh-skel--hero .kh-skel__line { height: 28px; width: 78%; }
html[data-theme="neon"] .kh-skel--hero .kh-skel__line--short { height: 12px; width: 92%; }
html[data-theme="neon"] .kh-skel--card { flex-direction: row; padding: 10px 12px; }
html[data-theme="neon"] .kh-skel--card .kh-skel__dot { width: 42px; height: 42px; border: 0; }
html[data-theme="neon"] .kh-skel--line .kh-skel__dot { width: 28px; height: 28px; }
/* Error: "SIN SEÑAL" en rojo, el texto del theme y "Reintentar" cian, en el panel con borde rojo */
html[data-theme="neon"] .kh-state--error {
  margin: 0; align-items: flex-start; text-align: left; gap: 8px; background: var(--n-surface); border: 1px solid var(--n-red); border-radius: 16px; padding: 12px 14px;
}
html[data-theme="neon"] .kh-state--error .kh-state__art { display: none; }
html[data-theme="neon"] .kh-state--error .kh-state__title { font: var(--n-badge); letter-spacing: 0; color: var(--n-ink); background: var(--n-red); padding: 3px 6px; border-radius: 5px; }
html[data-theme="neon"] :is(.kh-state__body, .kh-state__hint) { font: 13px var(--n-text-font); font-style: normal; color: var(--n-desc); }
html[data-theme="neon"] .kh-state__retry { margin: 0; border: 0; background: var(--n-cyan); color: var(--n-ink); font-weight: 800; font-size: 14px; padding: 13px 18px; }
/* Sin salas / sin compas: panel punteado con "SIN SALAS", el texto y "Crear sala" rojo */
html[data-theme="neon"] .kh-rooms[data-state="empty"] { border: 1px dashed var(--n-border-2); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-rooms--home[data-state="empty"] { padding: 18px; gap: 12px; }
html[data-theme="neon"] .kh-empty { align-items: flex-start; text-align: left; padding: 0; gap: 12px; }
html[data-theme="neon"] .kh-empty__title { font: 700 18px/1.2 var(--n-display); letter-spacing: 0; color: var(--n-text); }
html[data-theme="neon"] .kh-empty__text { font-size: 14px; color: var(--n-desc); }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"]) .kh-rooms__empty .kh-empty__text { font-size: 13px; }
html[data-theme="neon"] .kh-empty .kh-rooms__create { border: 0; background: var(--n-red); color: var(--n-ink); font-weight: 800; font-size: 14px; padding: 12px 20px; }
/* Sin partidas: "SIN PARTIDAS", "Tu temporada parte con tu primera partida" y "Ver todos los juegos" */
html[data-theme="neon"] .kh-mis-empty {
  background: var(--n-surface); border: 1px dashed var(--n-border-2); border-radius: 20px; padding: 20px 18px;
}
html[data-theme="neon"] .kh-mis-empty::before {
  content: 'SIN PARTIDAS'; font: var(--n-badge); color: var(--n-ink); background: var(--n-lime); padding: 3px 6px; border-radius: 5px;
}
html[data-theme="neon"] .kh-mis-empty .kh-empty__title { font-size: 20px; line-height: 1.15; }
html[data-theme="neon"] .kh-mis-empty .kh-btn { border: 0; background: none; color: var(--n-cyan); padding: 12px 0; font-size: 14px; font-weight: 700; }
html[data-theme="neon"] .kh-rk-empty { padding: 20px; background: var(--n-surface); border: 1px dashed var(--n-border-2); border-radius: 16px; }
html[data-theme="neon"] .kh-rk-empty .kh-empty__title { font-size: 16px; }
html[data-theme="neon"] .kh-compas__empty .kh-empty__title { font: 700 16px var(--n-text-font); }
/* Juego sin ícono del theme: el cuadro queda con el borde del juego sobre #231C58 */
html[data-theme="neon"] :is(.kh-game__icon, .kh-room__icon, .kh-rk-game__icon, .kh-mis-card__icon):is([src=""], :not([src])) { background: var(--n-hero-2); color: transparent; }

/* Sin sesión (login del theme): marca, arte del destacado, "5 JUEGOS · CON TUS COMPAS", "Entra a la sala" y Google en blanco */
html[data-theme="neon"] .kh-login {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr auto auto auto auto;
  column-gap: 0; row-gap: 12px; align-items: center; text-align: left; padding: 18px 16px 28px; font-family: var(--n-text-font);
}
html[data-theme="neon"] :is(.kh-login__hero, .kh-login__card) { display: contents; }
html[data-theme="neon"] .kh-login__logo { grid-column: 1; grid-row: 1; width: 48px; height: 48px; border-radius: 12px; }
html[data-theme="neon"] .kh-login__brand {
  grid-column: 2; grid-row: 1; font: 800 15px var(--n-display); letter-spacing: 2px; text-transform: uppercase; color: var(--n-text);
}
html[data-theme="neon"] .kh-login::before {
  content: ''; grid-column: 1 / -1; grid-row: 2; height: 300px; margin: 6px 0; border-radius: 22px; border: 1px solid var(--n-border-2);
  background: var(--n-hero-2) url(/themes/neon/juegos/pigeometridash.webp) center / contain no-repeat;
}
html[data-theme="neon"] .kh-login__chips { display: none; }
html[data-theme="neon"] .kh-login__tag { grid-column: 1 / -1; grid-row: 3; margin: 0; font: 11px var(--n-mono); font-style: normal; letter-spacing: 2px; color: var(--n-lime); }
html[data-theme="neon"] .kh-login__title { grid-column: 1 / -1; grid-row: 4; font: 700 30px/1.05 var(--n-display); letter-spacing: 0; color: var(--n-text); }
html[data-theme="neon"] :is(.kh-login__body, .kh-login__sub) { grid-column: 1 / -1; grid-row: 5; align-self: start; font: 15px var(--n-text-font); font-style: normal; color: var(--n-desc); }
html[data-theme="neon"] .kh-login__sub { display: none; }
html[data-theme="neon"] .kh-login__btn {
  grid-column: 1 / -1; grid-row: 7; min-height: 52px; gap: 12px; background: var(--n-text); color: var(--n-ink); font: 800 16px var(--n-text-font);
  border-radius: 14px;
}
html[data-theme="neon"] .kh-login__btn + .kh-login__btn { grid-row: 8; }
html[data-theme="neon"] .kh-login__g {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--n-text-2);
  font: 800 14px var(--n-text-font); color: var(--n-ink);
}
html[data-theme="neon"] .kh-login__btn[data-action="apple"] .kh-login__g { display: none; }
html[data-theme="neon"] :is(.kh-login__info, .kh-login__err) { grid-column: 1 / -1; grid-row: 9; }
html[data-theme="neon"] .kh-login__err { color: var(--n-ink); background: var(--n-pink); }
html[data-theme="neon"] .kh-login__note { grid-column: 1 / -1; grid-row: 10; font-size: 13px; color: var(--n-text-2); text-align: center; }
/* Escritorio y tablet H: el panel #1B1640 con el texto a la izquierda y el arte en la columna de 620 px */
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login {
  position: relative; isolation: isolate; grid-template-columns: 48px minmax(0, 1fr) 620px;
  grid-template-rows: auto 1fr auto auto auto auto auto auto auto 1fr; row-gap: 18px; padding: 28px 44px 44px; text-align: left;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login::after {
  content: ''; grid-column: 1 / -1; grid-row: 2 / -1; align-self: stretch; margin-top: 4px; z-index: -1; border-radius: 24px;
  background: var(--n-hero); border: 1px solid var(--n-border-2);
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login::before {
  grid-column: 3; grid-row: 2 / -1; height: auto; align-self: stretch; margin: 4px 0 0; border: 0; border-radius: 0 24px 24px 0;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__brand { margin-left: 28px; font-size: 22px; letter-spacing: 3px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login :is(.kh-login__tag, .kh-login__title, .kh-login__body, .kh-login__btn, .kh-login__note, .kh-login__chips, .kh-login__info, .kh-login__err) {
  grid-column: 1 / 3; margin-left: 64px; margin-right: 64px; justify-self: start;
}
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__tag { grid-row: 3; font-size: 12px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__title { grid-row: 4; font-size: 60px; line-height: 1; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__body { grid-row: 5; font-size: 19px; max-width: 520px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__btn { grid-row: 6; width: auto; min-height: 0; margin-top: 6px; padding: 15px 26px 15px 16px; font-size: 17px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__btn + .kh-login__btn { grid-row: 7; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__g { width: 28px; height: 28px; font-size: 15px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__note { grid-row: 8; font-size: 14px; text-align: left; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) :is(.kh-login__info, .kh-login__err) { grid-row: 7; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__chips { grid-row: 9; display: flex; gap: 12px; padding: 0; margin-top: 18px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-login__chip {
  width: 56px; height: 56px; margin: 0; border-radius: 14px; border: 1px solid var(--n-border-2); box-shadow: none; object-fit: contain;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-login { grid-template-columns: 48px minmax(0, 1fr) 460px; padding: 26px 34px 34px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-login__title { font-size: 44px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-login :is(.kh-login__tag, .kh-login__title, .kh-login__body, .kh-login__btn, .kh-login__note, .kh-login__chips) { margin-left: 44px; margin-right: 44px; }
/* Móvil H: sin el panel de arte (no cabe en 390 px de alto) */
html[data-theme="neon"][data-size="movil-h"] .kh-login::before { display: none; }
html[data-theme="neon"][data-size="movil-h"] .kh-login { grid-template-rows: auto 0 auto auto auto 1fr auto auto auto auto; padding: 16px 20px; }

/* ── Dentro de KitchHero (B-KH-Desktop, -TabletV, -TabletH, -MovilV, -MovilH y B-KH-{Salas, Rankings, MisJugadas, Cuenta,
 *    MisCompas}-MovilV): encabezado compacto + pestañas con subrayado rojo, sin menú al pie (D11). ─────────────────── */
html[data-theme="neon"][data-kh] .kh-shell { padding: 12px 16px 14px; gap: 12px; }
html[data-theme="neon"][data-kh][data-size="desktop"] .kh-shell { padding: 14px 44px 18px; gap: 14px; }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-shell { padding: 14px 34px 18px; gap: 14px; }
html[data-theme="neon"][data-kh][data-size="tablet-v"] .kh-shell { padding: 16px 30px 20px; gap: 16px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-shell { padding: 8px 16px; gap: 8px; }
html[data-theme="neon"][data-kh] .kh-main { padding: 0; }
html[data-theme="neon"] .kh-khbar { gap: inherit; }
html[data-theme="neon"][data-kh] .kh-khbar { gap: 12px; }
html[data-theme="neon"][data-kh]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-khbar { gap: 14px; }
html[data-theme="neon"][data-kh][data-size="tablet-v"] .kh-khbar { gap: 16px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-khbar { gap: 8px; }
html[data-theme="neon"] .kh-header[data-variant="compact"] { padding: 0; gap: 0; }
html[data-theme="neon"] .kh-header[data-variant="compact"] .kh-header__logo { width: 36px; height: 36px; border-radius: 10px; }
html[data-theme="neon"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 13px; letter-spacing: 2px; }
html[data-theme="neon"] .kh-header[data-variant="compact"] .kh-account { margin-left: auto; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-header[data-variant="compact"] { gap: 10px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-header[data-variant="compact"] .kh-header__logo { width: 40px; height: 40px; border-radius: 11px; }
html[data-theme="neon"][data-size="desktop"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 16px; letter-spacing: 3px; }
html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="tablet-v"]) .kh-header[data-variant="compact"] .kh-brand__name { font-size: 15px; letter-spacing: 3px; }
html[data-theme="neon"][data-size="movil-h"] .kh-header[data-variant="compact"] { gap: 10px; height: 44px; }
html[data-theme="neon"][data-size="movil-h"] .kh-header[data-variant="compact"] .kh-header__logo { width: 32px; height: 32px; border-radius: 9px; }
html[data-theme="neon"][data-size="movil-h"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 12px; }
/* Pestañas: móvil V en 3 columnas a todo el ancho; escritorio y tablets alineadas a la izquierda; móvil H de 44 px */
html[data-theme="neon"] .kh-nav--tabs {
  background: none; border-bottom: 1px solid var(--n-border); margin: 0 -16px; padding: 0 8px; font-family: var(--n-text-font); letter-spacing: 0;
}
html[data-theme="neon"] .kh-nav--tabs .kh-nav__link { padding: 13px 6px 11px; color: var(--n-text-2); font-weight: 700; font-size: 13px; }
html[data-theme="neon"] .kh-nav--tabs .kh-nav__link[aria-current="page"] { color: var(--n-text); font-weight: 800; border-bottom-color: var(--n-red); }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-nav--tabs { display: flex; gap: 22px; margin: 0; padding: 0; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-nav--tabs .kh-nav__link { padding: 12px 2px 10px; font-weight: 600; font-size: 16px; }
html[data-theme="neon"]:is([data-size="desktop"], [data-size="tablet-h"], [data-size="tablet-v"]) .kh-nav--tabs .kh-nav__link[aria-current="page"] { font-weight: 600; }
html[data-theme="neon"][data-size="movil-h"] .kh-nav--tabs { display: flex; gap: 8px; height: 44px; padding: 0 12px; }
html[data-theme="neon"][data-size="movil-h"] .kh-nav--tabs .kh-nav__link { display: grid; place-items: center; padding: 0 14px; }

/* Inicio dentro de KitchHero: el mismo de cada tamaño, más compacto (héroe 290 / 250 / 260 px) */
html[data-theme="neon"][data-kh][data-size="desktop"] .kh-featured { height: 290px; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(30px, 1fr) auto auto minmax(30px, 1fr); }
html[data-theme="neon"][data-kh][data-size="desktop"] .kh-featured__name { font-size: 46px; }
html[data-theme="neon"][data-kh]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio .kh-games { margin-top: 18px; }
html[data-theme="neon"][data-kh]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-inicio__side { margin-top: 14px; }
html[data-theme="neon"][data-kh]:is([data-size="desktop"], [data-size="tablet-h"]) .kh-rooms--home { padding: 14px 18px; gap: 8px; }
html[data-theme="neon"][data-kh][data-size="desktop"] .kh-rooms--home .kh-room { padding: 9px 10px; }
html[data-theme="neon"][data-kh][data-size="desktop"] .kh-board { padding: 14px 18px; gap: 8px; }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-featured { height: 250px; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(24px, 1fr) auto auto minmax(24px, 1fr); }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-featured__body { padding: 0 30px; gap: 10px; }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-featured__name { font-size: 32px; }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-featured__desc { font-size: 15px; }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-featured__actions { padding: 10px 30px 0; }
html[data-theme="neon"][data-kh][data-size="tablet-h"] .kh-inicio .kh-games { margin-top: 16px; }
html[data-theme="neon"][data-kh][data-size="tablet-v"] .kh-inicio__main { gap: 16px; }
html[data-theme="neon"][data-kh][data-size="tablet-v"] .kh-featured { height: 260px; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(26px, 1fr) auto auto minmax(26px, 1fr); }
html[data-theme="neon"][data-kh][data-size="tablet-v"] .kh-featured__body { padding: 0 30px; }
html[data-theme="neon"][data-kh][data-size="tablet-v"] .kh-featured__actions { padding: 12px 30px 0; }
/* Móvil V: juegos en 2 columnas y héroe de 24 px */
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-inicio__main { gap: 12px; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-featured { padding: 14px 16px; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-featured__name { font-size: 24px; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-games__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-game__link { column-gap: 10px; padding: 9px 10px; border-radius: 14px; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-game__icon { width: 38px; height: 38px; border-radius: 11px; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-game__name { font-size: 13px; }
/* Móvil H (~270 px útiles): salas primero y todo en una fila con desplazamiento horizontal */
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio__main {
  display: flex; flex-direction: row; gap: 10px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 0 16px; align-items: stretch;
  flex-grow: 1; min-height: 0;
}
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio :is([data-slot="rooms"], .kh-rooms--home, .kh-rooms--home .kh-rooms__head, .kh-rooms--home .kh-rooms__list, .kh-games, .kh-games__grid) { display: contents; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio :is(.kh-rooms__title, .kh-games__title) { display: none; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-rooms--home .kh-room {
  order: 1; flex: none; width: 250px; box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px;
  background: var(--n-surface); border: 1px solid var(--g); border-radius: 16px;
}
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-room__icon { display: none; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-room__join { margin-top: auto; background: var(--g); text-align: center; padding: 13px; border-radius: 11px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-rooms__all {
  order: 2; flex: none; width: 110px; box-sizing: border-box; margin: 0; display: grid; place-items: center; text-align: center; padding: 12px;
  background: var(--n-surface); border: 1px dashed var(--n-border-2); border-radius: 16px; color: var(--n-text); font-size: 0;
}
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-rooms__all::after { content: attr(data-long); font: 700 13px var(--n-text-font); }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-rooms__empty { order: 1; flex: none; width: 250px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured {
  order: 3; flex: none; width: 270px; height: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 16px;
}
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured__art { display: none; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured__body { padding: 0; gap: 4px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured__name { font-size: 17px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured__desc { font-size: 12px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured__actions { margin-top: auto; padding: 0; gap: 8px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-featured__actions .kh-btn { font-size: 13px; padding: 13px 16px; border-radius: 11px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-game { order: 4; flex: none; width: 140px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-game__link { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-game__icon { width: 40px; height: 40px; border-radius: 11px; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-game__name { font-size: 13px; align-self: auto; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio .kh-games__soon { order: 5; flex: none; width: 160px; align-self: center; }
html[data-theme="neon"][data-kh][data-size="movil-h"] .kh-inicio { flex-grow: 1; min-height: 0; }
/* Pantallas internas en móvil V dentro de KitchHero: sin encabezado propio de Mis compas duplicado ni menú al pie */
html[data-theme="neon"][data-kh] .kh-compas > .kh-page-head .kh-account { display: none; }
html[data-theme="neon"][data-kh] .kh-account-veil { background: var(--n-surface); }

/* ── Pasada completa de Neón (46 marcos B-*): tamaños intermedios sin scroll horizontal (req. 7.1) y textos largos ── */
html[data-theme="neon"] :is(.kh-main, .kh-view-slot, .kh-inicio > *, .kh-inicio__main > *, .kh-rk-main > *, .kh-mis-list > *, .kh-rooms__list > *, .kh-games__grid > *) { min-width: 0; }
html[data-theme="neon"] :is(.kh-room__who, .kh-room__ctx, .kh-game__name, .kh-mis-card__name, .kh-compa__nick, .kh-rk-row__nick) { overflow-wrap: anywhere; }
html[data-theme="neon"] .kh-rk-row__nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Entre tablet H y escritorio la columna lateral no baja de 300 px; bajo 1100 px de ancho los juegos van en 3 columnas */
html[data-theme="neon"][data-size="tablet-h"] .kh-inicio { grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 340px); }
@media (max-width: 1100px) {
  html[data-theme="neon"]:is([data-size="tablet-h"], [data-size="tablet-v"]) .kh-games__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme="neon"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  html[data-theme="neon"][data-size="tablet-v"] :is(.kh-rooms--home .kh-rooms__list, .kh-rk-games ul) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme="neon"][data-size="tablet-v"] .kh-featured { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (max-width: 1350px) {
  html[data-theme="neon"][data-size="desktop"] .kh-featured__name { font-size: 44px; }
}
@media (max-width: 360px) {
  html[data-theme="neon"][data-size="movil-v"] .kh-brand__name { font-size: 13px; letter-spacing: 1px; }
}

/* ── Rankings · los 3 tableros lado a lado (B-TabletH) · desviaciones comunes ────────────────────────────────────────
   La vista emite `.kh-rk-trio` en tablet H y escritorio; B-TabletH lo dibuja en tablet H: Fácil, Medio y Difícil en 3
   columnas, sin el selector de dificultad ni el tablero elegido, y "PASAPALOMA · FÁCIL / MEDIO / DIFÍCIL" a la derecha
   del periodo. En los demás tamaños sigue el tablero elegido. */
html[data-theme="neon"] :is(.kh-rk-trio, .kh-rk-trio__caption) { display: none; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rankings[data-trio] :is(.kh-rk-boards, .kh-rk-subtitle, .kh-rk-main > .kh-podium, .kh-rk-main > .kh-rk-list, .kh-rk-main > .kh-rk-around, .kh-rk-main > .kh-rk-empty) { display: none; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-main { grid-template-rows: auto minmax(0, 1fr); flex-grow: 1; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-filters { grid-row: 1; justify-self: stretch; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio__caption { display: block; margin: 0 0 0 auto; font: 12px var(--n-mono); color: var(--n-text-2); text-transform: uppercase; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio {
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 0;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio__board {
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 20px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio__head { display: flex; align-items: baseline; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio__title { margin: 0; font: 700 17px var(--n-display); color: var(--n-text); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio__sub { margin: 0 0 0 auto; font: 11px var(--n-mono); color: var(--n-text-2); text-transform: uppercase; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; align-self: stretch;
  background: var(--n-hero); border: 1px solid var(--n-border-2); border-radius: 16px; padding: 12px 10px 0; overflow: hidden;
}
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-podium__avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-podium__nick { font-size: 12px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-podium__score { font-size: 12px; color: var(--n-desc); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-list { display: flex; flex-direction: column; gap: 4px; font: 14px var(--n-mono); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--n-text); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row[data-me] { background: #2A1830; color: var(--n-pink); }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row__rank { width: 26px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row__nick { flex-grow: 1; font: 600 14px var(--n-text-font); }
/* Con tu puesto fuera del top, el marco deja 2 filas antes de "TU PUESTO" */
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio__board:has(.kh-rk-around) > .kh-rk-list > .kh-rk-row:nth-child(n+3) { display: none; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-around { display: flex; flex-direction: column; gap: 4px; }
html[data-theme="neon"][data-size="tablet-h"] .kh-rk-trio .kh-rk-empty { padding: 12px 0; font-size: 13px; color: var(--n-text-2); }

/* ── Rankings · cuántas filas muestra la lista y el panel de escritorio (desviaciones comunes, punto 3) ─────────────
   B-Rankings-Desktop llega hasta el 09 dentro del panel, con el podio a lo alto de la lista; B-Rankings-MovilV y MovilH
   hasta el 08 y B-KH-Rankings-MovilV hasta el 07. Tu fila nunca se esconde. */
html[data-theme="neon"][data-size="desktop"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+7):not([data-me]) { display: none; }
html[data-theme="neon"][data-size="movil-v"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+6):not([data-me]) { display: none; }
html[data-theme="neon"][data-size="movil-h"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+6):not([data-me]) { display: none; }
html[data-theme="neon"][data-kh][data-size="movil-v"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+5):not([data-me]) { display: none; }
html[data-theme="neon"][data-size="desktop"] .kh-rk-main { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
html[data-theme="neon"][data-size="desktop"] .kh-rk-main > .kh-podium { align-self: stretch; }

/* ── Desviaciones comunes, punto 4 · elementos que faltaban ───────────────────────────────────────────────────────
   "7 hitos" en lima junto al apodo (B-Desktop y los demás marcos de escritorio); "70 %" a la derecha de cada rango de
   sonido (B-Cuenta-*); "Cambiar juego" arriba a la derecha de la tarjeta de ranking (B-Desktop); sin partidas con la
   temporada en cero y el destacado con "Jugar" (B-Estado-SinPartidas-MovilV). */
html[data-theme="neon"] .kh-account__hitos { display: none; font: 12px var(--n-mono); color: var(--n-lime); }
html[data-theme="neon"][data-size="desktop"] .kh-account--pill .kh-account__hitos { display: inline; }
html[data-theme="neon"] .kh-acc-sound__row:has(.kh-acc-sound__value) { grid-template-columns: 90px minmax(0, 1fr) 52px; }
html[data-theme="neon"]:is([data-size="movil-v"], [data-size="movil-h"], [data-size="tablet-v"]) .kh-acc-sound__row:has(.kh-acc-sound__value) { grid-template-columns: 70px minmax(0, 1fr) 52px; }
html[data-theme="neon"] .kh-acc-sound__value { font: 13px var(--n-mono); text-align: right; color: var(--n-text); }
html[data-theme="neon"] .kh-board__change { grid-column: 2; grid-row: 1; align-self: center; font-size: 13px; text-decoration: none; color: var(--n-cyan); }
html[data-theme="neon"] .kh-mis[data-state="empty"] .kh-season__sub,
html[data-theme="neon"] .kh-mis[data-state="empty"] .kh-season__note { display: none; }
html[data-theme="neon"] .kh-mis[data-state="empty"] :is(.kh-stat[data-stat="best"], .kh-stat[data-stat="week"]) .kh-stat__value { color: var(--n-text-2); }
html[data-theme="neon"] .kh-mis-featured {
  display: flex; align-items: center; gap: 12px; align-self: stretch; text-decoration: none; color: var(--n-text);
  background: var(--n-hero); border: 1px solid var(--n-border-2); border-radius: 16px; padding: 10px 12px;
}
html[data-theme="neon"] .kh-mis-featured__icon { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: var(--n-hero-2); flex: none; }
html[data-theme="neon"] .kh-mis-featured__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
html[data-theme="neon"] .kh-mis-featured__name { font-weight: 700; }
html[data-theme="neon"] .kh-mis-featured__eyebrow { font: 11px var(--n-mono); color: var(--n-lime); }
html[data-theme="neon"] .kh-mis-featured__play { border: 0; background: var(--n-red); color: var(--n-ink); font-weight: 800; padding: 12px 16px; border-radius: 12px; font-size: 14px; }

/* ── Desviaciones comunes · QA del Mac (B-Desktop): el arte del destacado queda dentro de la tarjeta oscura, en su
   panel #231C58 a lo alto de la tarjeta. */
html[data-theme="neon"] .kh-featured { isolation: isolate; box-sizing: border-box; }
html[data-theme="neon"] .kh-featured__art { align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; max-width: none; box-sizing: border-box; border-radius: 0; }

/* BUG-35: indicador de fila deslizable (si la fila se desborda): cian con brillo */
html[data-theme="neon"] .kh-scroll-more__btn { border-color: #3DE0FF; background: #15152A; color: #3DE0FF; box-shadow: 0 0 10px rgba(61, 224, 255, 0.35); }
html[data-theme="neon"] .kh-scroll-more__dot { background: #2E2D52; opacity: 1; }
html[data-theme="neon"] .kh-scroll-more__dot[data-on] { background: #FF4455; box-shadow: 0 0 8px rgba(255, 68, 85, 0.6); }

/* Vista previa (req. 4.4 · D23): cian con brillo */
html[data-theme="neon"] .kh-preview-btn { border-color: #3DE0FF; color: #3DE0FF; box-shadow: 0 0 10px rgba(61, 224, 255, 0.3); }
html[data-theme="neon"] .kh-pv { border-color: #3A3470; box-shadow: 0 0 0 1px rgba(61, 224, 255, 0.25), 0 24px 60px rgba(0, 0, 0, 0.6); }
html[data-theme="neon"] .kh-pv__nav { border-color: #3DE0FF; color: #3DE0FF; }