/* ==========================================================================
   AJEDREZ — sistema de diseno v3, escrito de cero.

   Direccion: la estructura y las superficies carbon calido de chess.com,
   con su verde caracteristico reemplazado por AZUL en dos variantes:
   - relleno oscuro (#2f66ad) para botones primarios, con texto blanco (5.8:1)
   - variante clara (#7ab1ea) para texto/iconos activos sobre fondo oscuro (6:1)
   Tipografia: Archivo (una sola familia variable, 400-800) — chunky y
   deportiva en pesos altos, sobria en cuerpo.
   Motion: micro-interacciones al estilo chess.com (boton con "labio"
   inferior que se hunde al pulsar), curvas ease-out fuertes, stagger corto
   en la entrada, todo respetando prefers-reduced-motion.
   Contraste verificado por calculo en cada par texto/fondo (min 4.5).
   ========================================================================== */

:root {
    /* Superficies: carbon calido de chess.com */
    --bg: #312e2b;
    --bg-side: #272421;
    --bg-elevated: #3d3934;
    --bg-input: #1d1b19;
    --border: #474340;

    --text: #f2f0ec;
    --text-muted: #b6b1a8;
    --text-faint: #847e75;

    /* Azul en dos papeles (nunca texto claro sobre relleno claro):
       fill = superficie de boton, text = tinta sobre fondos oscuros */
    --accent-fill: #2f66ad;
    --accent-fill-hover: #3a76c4;
    --accent-fill-edge: #234d83;   /* labio inferior del boton */
    --accent-text: #7ab1ea;
    --accent-soft: rgba(122, 177, 234, 0.12);

    --danger: #f0806a;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --sidebar-w: 218px;

    --font: "Archivo", "Segoe UI", system-ui, sans-serif;

    /* Curvas con caracter: las de fabrica del navegador son demasiado
       blandas (ease-out real, no el "ease-out" nominal de CSS) */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
}

h1, h2, h3 {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

/* Iconos SVG de trazo (los pocos sin imagen propia) */
.icon-sprite { display: none; }

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-img { object-fit: contain; }

/* ==========================================================================
   Entradas animadas (solo transform/opacity; se apagan con reduced-motion)
   ========================================================================== */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes slide-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Barra lateral
   ========================================================================== */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-side);
    padding: 0.9rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Las tarjetas del contenido (.card) usan "animation: rise-in", que trae
       un "transform" y eso crea su propio contexto de apilamiento aunque no
       tengan z-index. Sin esto, ese contenido -por venir despues en el HTML-
       pinta por encima de TODA la barra lateral, tapando el submenu de
       Problemas aunque el submenu tenga z-index alto: esa comparacion solo
       vale dentro del contexto de la barra, no contra el de fuera. */
    z-index: 50;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0.55rem 0.25rem 0.65rem;
    text-decoration: none;
    color: var(--text);
}

.logo-full {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
    animation: slide-in 280ms var(--ease-out) both;
}

/* Cascada corta al cargar (decorativa: no bloquea nada).
   Se apunta a los hijos directos de .side-nav, no a .side-link: "Problemas"
   va envuelto en un .side-item (por el submenu) y con :nth-child sobre
   .side-link se quedaria fuera de la cuenta. */
.side-nav > *:nth-child(1) { animation-delay: 20ms; }
.side-nav > *:nth-child(2) { animation-delay: 55ms; }
.side-nav > *:nth-child(3) { animation-delay: 90ms; }
.side-nav > *:nth-child(4) { animation-delay: 125ms; }
.side-nav > *:nth-child(5) { animation-delay: 160ms; }
.side-nav > *:nth-child(6) { animation-delay: 195ms; }

/* --- "Problemas" y su submenu ------------------------------------------- */
.side-item {
    position: relative;
    animation: slide-in 280ms var(--ease-out) both;
}

.side-caret {
    width: 16px;
    height: 16px;
    margin-left: auto;
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.side-item:hover .side-caret {
    opacity: 1;
    transform: translateX(2px);
}

.side-submenu {
    position: absolute;
    left: 100%;
    top: -0.4rem;
    margin-left: 0.45rem;
    min-width: 14.5rem;
    padding: 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 140ms var(--ease-out),
                transform 140ms var(--ease-out),
                visibility 140ms var(--ease-out);
    z-index: 40;
}

.side-item:hover .side-submenu,
.side-item:focus-within .side-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.side-sublink {
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}

.side-sublink:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.side-sublink.is-active {
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* El submenu sale FUERA de la barra lateral, y .sidebar tiene overflow-y:auto
   (para poder desplazarse en ventanas bajas). Un ancestro con overflow recorta
   a los hijos posicionados: sin esto el submenu aparece cortado por el borde
   derecho de la barra. En escritorio el contenido de la barra cabe de sobra,
   asi que ahi se deja overflow visible; el scroll se conserva en movil. */
@media (min-width: 901px) {
    .sidebar { overflow: visible; }
}

/* En movil la barra pasa a ser una fila horizontal y el flyout no encaja:
   se oculta y se llega a los submodos desde la propia pagina de Problemas. */
@media (max-width: 900px) {
    .side-submenu { display: none; }
    .side-caret { display: none; }
}

.side-link .icon-img,
.side-link .icon {
    width: 21px;
    height: 21px;
}

.side-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.side-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* ==========================================================================
   Botones — el "labio" inferior de chess.com: un borde grueso abajo que se
   hunde 2px al pulsar. Mas sutil que un relieve 3D, pero con tacto fisico.
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.65rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-align: center;
    cursor: pointer;
    transition: background 140ms var(--ease-out),
                transform 120ms var(--ease-out),
                box-shadow 120ms var(--ease-out);
}

.btn:active {
    transform: translateY(2px);
}

.btn-primary {
    background: var(--accent-fill);
    color: var(--theme-on-accent, #fff);
    box-shadow: 0 4px 0 var(--accent-fill-edge);
}

.btn-primary:active {
    box-shadow: 0 2px 0 var(--accent-fill-edge);
}

.btn-ghost {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.075);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

.btn-ghost:active {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}

.btn-lg {
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn:disabled:active {
    transform: none;
}

/* ==========================================================================
   Columna principal
   ========================================================================== */
.shell {
    flex: 1;
    min-width: 0;
}

main {
    padding: 1.75rem 2rem 3rem;
    max-width: 76rem;
    margin: 0 auto;
}

/* Las 4 paginas con tablero necesitan todo el ancho: el tope de 76rem es
   para paginas de texto (portada, comunidad) y les recortaba el tablero. */
main:has(.game-layout) {
    max-width: none;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.card {
    background: var(--bg-side);
    border-radius: var(--radius);
    padding: 1.2rem;
    animation: rise-in 300ms var(--ease-out) both;
}

.card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.card-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0.6rem 0 0;
}

.card-note-left {
    text-align: left;
}

.card-note.is-fail {
    color: var(--danger);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================================================
   Portada
   ========================================================================== */
.home {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-top {
    display: grid;
    grid-template-columns: 250px repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.quick-card {
    padding: 0.8rem;
}

.quick-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.quick-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
    transition: background 140ms var(--ease-out),
                transform 120ms var(--ease-out),
                box-shadow 120ms var(--ease-out);
}

.quick-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

.quick-btn-main {
    background: var(--accent-fill);
    color: #fff;
    box-shadow: 0 3px 0 var(--accent-fill-edge);
}

.quick-btn-main:active {
    box-shadow: 0 1px 0 var(--accent-fill-edge);
}

.quick-btn img,
.quick-btn .icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.quick-bolt {
    width: 22px;
    text-align: center;
    font-size: 1.1rem;
}

.board-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-side);
    border-radius: var(--radius);
    overflow: hidden;
    animation: rise-in 300ms var(--ease-out) both;
}

.home-top .board-card:nth-child(2) { animation-delay: 40ms; }
.home-top .board-card:nth-child(3) { animation-delay: 80ms; }
.home-top .board-card:nth-child(4) { animation-delay: 120ms; }

.board-card .cg-wrap {
    border-radius: 0;
}

.board-card-foot {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.85rem;
    gap: 0.6rem;
}

.board-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.board-card-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.board-card-title {
    font-weight: 700;
    font-size: 0.9rem;
}

.board-card-foot .btn {
    margin-top: auto;
}

/* ==========================================================================
   Panel de dos columnas (portada abajo, comunidad)
   ========================================================================== */
.dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.25rem;
    align-items: start;
}

.dash-main,
.dash-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.live-stats {
    display: flex;
    gap: 2rem;
}

.live-stats-panel {
    padding: 0 0.25rem;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.75rem 1rem;
    text-align: center;
}

.empty-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 22rem;
}

.empty-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    opacity: 0.6;
}

/* ==========================================================================
   Paginas de juego (jugar / puzzles / analisis / maquina)
   ========================================================================== */
.page-header {
    margin-bottom: 1.25rem;
}

.page-title {
    font-size: 1.7rem;
}

.page-sub {
    margin-top: 0.25rem;
    color: var(--text-muted);
}

.game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.board-col {
    /* El tope real es el MENOR entre 56rem y el alto de ventana menos lo
       que ocupan cabecera + barras de jugador + margenes (~180px medidos):
       el tablero es cuadrado, si sobrepasa el alto disponible obliga a
       hacer scroll. OJO: sin "margin: auto" — un grid item con margin
       auto horizontal deja de estirarse y se encoge a su contenido
       (probado: el tablero cayo a 178px). */
    max-width: min(56rem, calc(100vh - 200px));
    animation: rise-in 300ms var(--ease-out) both;
}

.side-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Pestanas de la pagina de Jugar */
.tab-bar {
    display: flex;
    gap: 1.5rem;
    padding: 0 0.25rem;
}

.tab {
    padding-bottom: 0.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-faint);
    border-bottom: 2px solid transparent;
    cursor: default;
}

.tab-active {
    color: var(--text);
    border-bottom-color: var(--accent-text);
}

.field-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.time-select {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.7rem;
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.card .btn-lg {
    margin-bottom: 0.85rem;
}

.card .stack {
    margin-bottom: 0.6rem;
}

/* Barras de jugador arriba/abajo del tablero */
.player-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-side);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.player-bar-top { margin-bottom: 0.5rem; }
.player-bar-bottom { margin-top: 0.5rem; }

.player-avatar {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.player-avatar img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.player-name {
    margin-right: auto;
}

.player-rating {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.82rem;
}

.player-clock {
    padding: 0.2rem 0.7rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 4.2rem;
    text-align: center;
    color: var(--text-muted);
}

/* Turno / color de piezas */
.turn-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.turn-dot,
.color-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.turn-white { background: #f2f0ec; }
.turn-black { background: #272421; }
.color-random { background: linear-gradient(135deg, #f2f0ec 50%, #272421 50%); }

/* Selector de color compacto: iconos redondos en vez de tarjetas grandes
   con texto (chess.com/lichess resuelven esto con un grupo pequeño de
   iconos, no con botones de bloque). */
.color-pick {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.color-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 140ms var(--ease-out),
                background 140ms var(--ease-out),
                transform 120ms var(--ease-out);
}

.color-icon-btn:active {
    transform: translateY(1px);
}

.color-icon-btn .color-dot {
    width: 20px;
    height: 20px;
}

/* Bots: acordeon de categorias (ver bots.py) */
.bot-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bot-category {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.bot-category-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.bot-category-icon {
    display: flex;
    color: var(--accent-text);
}

.bot-category-count {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 500;
}

.bot-category-caret {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 160ms var(--ease-out);
}

.bot-category-header[aria-expanded="true"] .bot-category-caret {
    transform: rotate(180deg);
}

.bot-category-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.4rem 0.4rem;
}

.bot-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}

.bot-item:hover { background: rgba(255, 255, 255, 0.04); }

.bot-item.is-selected {
    background: var(--accent-soft);
    border-color: var(--accent-text);
}

.bot-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}

.bot-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bot-name {
    font-size: 0.85rem;
    font-weight: 700;
}

.bot-elo {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Motor / lista de jugadas / PGN */
.engine-off {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.engine-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.5;
}

.move-list {
    min-height: 4rem;
    max-height: 16rem;
    overflow-y: auto;
}

.move-rows {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.move-row {
    display: grid;
    grid-template-columns: 2.2rem 1fr 1fr;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.move-row:nth-child(odd) {
    background: var(--bg-elevated);
}

.move-num {
    color: var(--text-faint);
}

.move-san {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    color: var(--text-muted);
}

/* La ultima jugada resaltada, al estilo del historial de lichess: es lo
   primero que el ojo busca al volver a mirar la partida. */
.move-san.is-last {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}

.pgn-input {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.6rem;
    background: var(--bg-input);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85rem;
    resize: vertical;
}

/* El tema del tablero (colores, coordenadas) vive en frontend/src/board.css
   y llega compilado en dist/app.css — no se duplica aqui. */

/* ==========================================================================
   Interacciones solo donde hay raton de verdad (en tactil, hover falso)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .side-link:hover {
        background: var(--bg-elevated);
        color: var(--text);
    }

    .side-link.is-active:hover {
        background: var(--accent-soft);
        color: var(--accent-text);
    }

    .btn-primary:hover { background: var(--accent-fill-hover); }
    .btn-ghost:hover { background: #47433e; }
    .quick-btn:hover { background: #47433e; }
    .quick-btn-main:hover { background: var(--accent-fill-hover); }
    .color-icon-btn:hover { background: #47433e; }

    .btn:disabled:hover {
        background: var(--bg-elevated);
    }

    .btn-primary:disabled:hover {
        background: var(--accent-fill);
    }
}

/* ==========================================================================
   Accesibilidad de movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after, *::backdrop {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .home-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        overflow-x: auto;
        padding: 0.6rem 0.85rem;
    }

    .side-nav {
        flex-direction: row;
    }

    .side-link span:last-child {
        white-space: nowrap;
    }

    .side-foot {
        margin-top: 0;
        flex-direction: row;
    }

    main {
        padding: 1.25rem 1rem 2.5rem;
    }

    .home-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash,
    .game-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-col {
        max-width: none;
    }
}

/* ===========================================================================
   Rediseño de experiencia — superficies con profundidad, azul de juego y
   una portada que invita a jugar antes de mostrar información secundaria.
   (Verde original de la maqueta a mano sustituido por el azul de acento del
   sitio: #81b64c→#2f66ad, #95c866→#3a76c4, #5f8b36→#234d83, #b9e88b/#c5e79d→#7ab1ea)
   =========================================================================== */
:root,
[data-theme="chessty-light"] {
    --theme-page: #f3f5f2;
    --theme-sidebar: #e8f0f7;
    --theme-surface: #ffffff;
    --theme-input: #f4f8fb;
    --theme-surface-alt: #edf4f9;
    --theme-title: #183a5a;
    --theme-border: rgba(24, 58, 90, 0.14);
    --theme-text: #172a3a;
    --theme-muted: #596d7e;
    --theme-faint: #718292;
    --theme-accent: #2f66ad;
    --theme-accent-hover: #3a76c4;
    --theme-accent-hover-strong: #265995;
    --theme-accent-edge: #234d83;
    --theme-accent-text: #245a91;
    --theme-accent-soft: rgba(47, 102, 173, 0.11);
    --theme-on-accent: #ffffff;
    --theme-gold: #d99a45;
    --theme-board-light: #dceaf4;
    --theme-board-dark: #4e789b;
    --theme-board-coords: #4e789b;
    --theme-page-glow: rgba(122, 177, 234, 0.2);
    --theme-page-shine: rgba(255, 255, 255, 0.55);
    --theme-shadow: rgba(24, 58, 90, 0.12);
}

[data-theme="chessty-arena"] {
    color-scheme: dark;
    --theme-page: #292d2b;
    --theme-sidebar: #222624;
    --theme-surface: #363b37;
    --theme-input: #404640;
    --theme-surface-alt: #3d433e;
    --theme-title: #f0eee8;
    --theme-border: rgba(226, 232, 224, 0.14);
    --theme-text: #f0eee8;
    --theme-muted: #b8bdb7;
    --theme-faint: #929a93;
    --theme-accent: #5f9b63;
    --theme-accent-hover: #70ae72;
    --theme-accent-hover-strong: #70ae72;
    --theme-accent-edge: #47784b;
    --theme-accent-text: #91c895;
    --theme-accent-soft: rgba(95, 155, 99, 0.17);
    --theme-on-accent: #172019;
    --theme-gold: #c99b54;
    --theme-board-light: #e8d6b3;
    --theme-board-dark: #6b8f71;
    --theme-board-coords: #c5b997;
    --theme-page-glow: rgba(95, 155, 99, 0.13);
    --theme-page-shine: rgba(240, 238, 232, 0.035);
    --theme-shadow: rgba(10, 14, 11, 0.34);
}

:root {
    --bg: var(--theme-page);
    --bg-side: var(--theme-sidebar);
    --bg-elevated: var(--theme-surface);
    --bg-input: var(--theme-input);
    --border: var(--theme-border);
    --text: var(--theme-text);
    --text-muted: var(--theme-muted);
    --text-faint: var(--theme-faint);
    --accent-fill: var(--theme-accent);
    --accent-fill-hover: var(--theme-accent-hover);
    --accent-fill-edge: var(--theme-accent-edge);
    --accent-text: var(--theme-accent-text);
    --accent-soft: var(--theme-accent-soft);
    --radius-sm: 8px;
    --radius: 13px;
    --radius-lg: 22px;
}

body {
    background:
        radial-gradient(ellipse 65% 48% at 76% -10%, var(--theme-page-glow), transparent 74%),
        linear-gradient(135deg, var(--theme-page-shine), transparent 48%),
        var(--bg);
}

.sidebar {
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 30px rgba(24, 58, 90, 0.08);
}

.logo-full { filter: drop-shadow(0 4px 7px rgba(47, 102, 173, 0.14)); }

.side-link {
    margin: 1px 0;
    border: 1px solid transparent;
}

.side-link.is-active {
    border-color: rgba(47, 102, 173, 0.24);
    box-shadow: inset 3px 0 0 var(--accent-fill);
}

main { max-width: 86rem; padding-top: 2.25rem; }

.page-header {
    padding: 0.35rem 0 0.35rem;
    margin-bottom: 1.65rem;
}

.page-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.045em; }
.page-sub { color: var(--text-muted); font-size: 1.02rem; margin-top: 0.45rem; }

.card {
    border: 1px solid var(--border);
    box-shadow: 0 12px 34px rgba(24, 58, 90, 0.09);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.04rem;
    letter-spacing: -0.015em;
}

.card-title::before {
    content: "";
    width: 5px;
    height: 1.05em;
    border-radius: 10px;
    background: var(--accent-fill);
}

.game-layout {
    gap: clamp(1.5rem, 3vw, 2.8rem);
    align-items: start;
}

.side-col { gap: 1rem; }

/* La sombra/redondeo del tablero vive en cg-board (frontend/src/board.css):
   el hijo directo de .board-col es .board-frame (el marco de las
   coordenadas), no [data-chessground] — un selector que apuntara ahi
   nunca coincidiria. */

.player-bar {
    padding: 0.5rem 0.15rem;
    color: var(--text-muted);
}

.player-avatar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.tab-bar {
    background: var(--bg-side);
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.tab { border-radius: 6px; }
.tab-active { background: var(--bg-elevated); color: var(--text); }

.time-select, .pgn-input {
    border: 1px solid var(--border);
    min-height: 45px;
}

.empty {
    border: 1px dashed rgba(24, 58, 90, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(232, 240, 247, 0.46);
}

/* Portada */
.home-redesign { gap: 1.5rem; }

.home-hero {
    min-height: 440px;
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(340px, 0.93fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(1rem, 3vw, 3rem) clamp(1rem, 3vw, 4rem);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(115deg, rgba(255,255,255,0.03), transparent 45%),
        radial-gradient(circle at 100% 50%, rgba(122, 177, 234, 0.16), transparent 42%),
        var(--bg-side);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.home-hero::after {
    content: "";
    position: absolute;
    right: -11rem;
    top: -13rem;
    width: 33rem;
    height: 33rem;
    border: 1px solid rgba(122, 177, 234, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.home-hero-copy { position: relative; z-index: 1; max-width: 37rem; }

.home-kicker, .section-kicker, .path-overline {
    color: var(--accent-text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.home-kicker { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.05rem; }
.home-kicker-dot, .hero-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 4px rgba(122, 177, 234, 0.16); }

.home-hero h1 {
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    letter-spacing: -0.07em;
    line-height: 0.9;
    max-width: 9.5ch;
}

.home-hero h1 em { color: var(--accent-text); font-style: normal; }

/* El ritmo como elemento dominante de la home (logueado y anonimo), en vez
   de enterrado bajo un hero de marketing largo. */
.home-ritmo-hero {
    text-align: center;
    padding: clamp(1.8rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 70% 60% at 50% -10%, rgba(122, 177, 234, 0.14), transparent 70%),
        var(--bg-side);
}

.home-ritmo-hero .home-kicker { justify-content: center; margin-bottom: 0.85rem; }

.home-ritmo-title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.home-time-grid-hero {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    max-width: 52rem;
    margin: 0 auto;
    gap: 0.85rem;
}

.home-time-card-hero {
    padding: 1.3rem 0.8rem;
    align-items: center;
    text-align: center;
}

.home-time-card-hero .home-time-clock { font-size: 1.7rem; }

.home-ritmo-hero .card-note { margin-top: 1.4rem; }

.home-lead {
    max-width: 31rem;
    margin: 1.4rem 0 1.65rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.6vw, 1.14rem);
    line-height: 1.6;
}

.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.btn-hero { min-height: 52px; padding-inline: 1.45rem; font-size: 1.03rem; }
.home-text-link { color: var(--text-muted); font-weight: 700; font-size: 0.91rem; text-decoration: none; }
.home-text-link span, .path-arrow { color: var(--accent-text); transition: transform 160ms var(--ease-out); display: inline-block; }
.home-text-link:hover, .path-card:hover h2 { color: var(--text); }
.home-text-link:hover span, .path-card:hover .path-arrow { transform: translateX(4px); }

.home-trust { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; margin-top: 1.7rem; color: var(--text-faint); list-style: none; font-size: 0.8rem; font-weight: 600; }
.home-trust li { display: flex; align-items: center; gap: 0.4rem; }
.home-trust li::before { content: "✓"; color: var(--accent-text); font-weight: 800; }

.hero-board-wrap { position: relative; z-index: 1; width: min(100%, 390px); justify-self: end; }
.hero-board { overflow: hidden; border: 8px solid #211f1d; border-radius: 15px; box-shadow: 0 28px 45px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.12); transform: rotate(2deg); }
.hero-board .cg-wrap { aspect-ratio: 1; }
.hero-board-glow { position: absolute; inset: 15% -10%; filter: blur(38px); background: rgba(122, 177, 234, 0.28); pointer-events: none; }
.hero-board-caption { position: absolute; display: flex; align-items: center; gap: 0.55rem; bottom: -1.05rem; left: -1.1rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border); background: #3d3935; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.25); font-size: 0.78rem; font-weight: 700; }
.hero-live-dot { width: 6px; height: 6px; box-shadow: none; }

.home-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.path-card { min-height: 145px; display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--bg-side); transition: transform 170ms var(--ease-out), border-color 170ms var(--ease-out), background 170ms var(--ease-out); }
.path-card:hover { transform: translateY(-4px); border-color: rgba(122, 177, 234, 0.42); background: #383531; }
.path-card-play { background: linear-gradient(120deg, rgba(122, 177, 234, 0.17), transparent 65%), var(--bg-side); }
.path-icon { width: 35px; height: 35px; object-fit: contain; }
.path-card h2 { margin-top: 0.25rem; font-size: 1rem; transition: color 160ms var(--ease-out); }
.path-card p { margin-top: 0.18rem; color: var(--text-muted); font-size: 0.81rem; }
.path-arrow { align-self: start; font-size: 1.2rem; }

.home-quick { padding: 1.35rem; }
.home-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.home-section-heading h2 { font-size: 1.45rem; margin-top: 0.2rem; }
.home-time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem; }
.home-time-card { display: flex; flex-direction: column; padding: 1rem; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; background: var(--bg-elevated); transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.home-time-card:hover { background: #494541; border-color: rgba(122, 177, 234, 0.35); transform: translateY(-2px); }
.home-time-clock { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; }
.home-time-name { margin-top: 0.12rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }

/* Panel de inicio para usuarios logueados (ver views.py::home) */
.home-continue {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.3rem;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(122, 177, 234, 0.3);
    background: var(--accent-soft);
    transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.home-continue:hover {
    background: rgba(122, 177, 234, 0.2);
    transform: translateY(-1px);
}

.home-continue-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-fill);
    color: #fff;
    flex-shrink: 0;
}

.home-continue-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.home-continue-text {
    margin-top: 0.15rem;
    font-weight: 600;
}

.home-continue .path-arrow {
    margin-left: auto;
    align-self: center;
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.7rem 0.4rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.home-stat-num {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.home-stat-label {
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-top: 0.1rem;
}

.home-puzzle-board {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.9rem;
}

@media (max-width: 1100px) {
    .home-hero { grid-template-columns: minmax(0, 1fr) minmax(290px, 0.8fr); gap: 2rem; }
    .home-paths { grid-template-columns: 1fr; }
    .path-card { min-height: 110px; }
}

@media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; padding: 2.1rem 1.4rem 2.8rem; }
    .home-hero h1 { max-width: 12ch; }
    .hero-board-wrap { justify-self: center; width: min(88%, 380px); margin-top: 0.45rem; }
    .home-paths { grid-template-columns: 1fr; }
    .home-time-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    main { padding: 1rem 0.85rem 2rem; }
    .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
    .home-hero { border-radius: 15px; }
    .home-hero h1 { font-size: clamp(2.65rem, 14vw, 3.7rem); }
    .hero-board-wrap { width: 94%; }
    .path-card { padding: 1rem; }
    .home-section-heading { align-items: start; flex-direction: column; }
}

/* ===========================================================================
   Home Chessty - club editorial claro. El tema queda aislado a la portada
   para no cambiar el lenguaje de las pantallas de juego existentes.
   =========================================================================== */
body:has(.home-club) {
    --bg: var(--theme-page);
    --bg-side: var(--theme-sidebar);
    --bg-elevated: var(--theme-surface);
    --bg-input: var(--theme-input);
    --border: var(--theme-border);
    --text: var(--theme-text);
    --text-muted: var(--theme-muted);
    --text-faint: var(--theme-faint);
    --accent-fill: var(--theme-accent);
    --accent-fill-hover: var(--theme-accent-hover-strong);
    --accent-fill-edge: var(--theme-accent-edge);
    --accent-text: var(--theme-accent-text);
    --accent-soft: var(--theme-accent-soft);
    color: var(--text);
    background:
        radial-gradient(circle at 78% 4%, var(--theme-page-glow), transparent 28rem),
        linear-gradient(135deg, var(--theme-page-shine), transparent 48%),
        var(--bg);
}

body:has(.home-club) .sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.48), transparent 28%),
        var(--bg-side);
    border-right-color: rgba(24, 58, 90, 0.12);
    box-shadow: 9px 0 34px rgba(24, 58, 90, 0.08);
}

body:has(.home-club) .logo-full {
    filter: drop-shadow(0 4px 7px rgba(47, 102, 173, 0.14));
}

body:has(.home-club) .side-link:hover,
body:has(.home-club) .side-sublink:hover {
    background: rgba(255,255,255,0.66);
}

body:has(.home-club) .side-submenu {
    background: #f8fbfd;
    box-shadow: 0 18px 40px rgba(24, 58, 90, 0.15);
}

body:has(.home-club) .btn-ghost {
    background: rgba(255,255,255,0.72);
    border-color: rgba(24,58,90,.12);
    box-shadow: 0 4px 0 rgba(24,58,90,.12);
}

body:has(.home-club) main {
    width: 100%;
    max-width: 92rem;
    padding: clamp(1rem, 2.5vw, 2.4rem) clamp(1rem, 3vw, 3.4rem) 4rem;
}

.home-club {
    --home-paper: var(--theme-surface);
    --home-blue-wash: var(--theme-surface-alt);
    --home-navy: var(--theme-title);
    --home-warm: var(--theme-gold);
    --home-line: var(--theme-border);
    --home-shadow: 0 24px 70px var(--theme-shadow);
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.4vw, 2.2rem);
    font-family: "Archivo", "Segoe UI", sans-serif;
}

.home-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(290px, 0.68fr);
    min-height: 570px;
    overflow: hidden;
    border: 1px solid rgba(24, 58, 90, 0.12);
    border-radius: 28px 28px 72px 28px;
    background: var(--home-paper);
    box-shadow: var(--home-shadow);
    animation: home-arrive 520ms var(--ease-out) both;
}

.home-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 38% 0 0;
    opacity: 0.32;
    background-image:
        linear-gradient(rgba(47,102,173,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,102,173,.08) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(130deg, #000, transparent 72%);
    mask-image: linear-gradient(130deg, #000, transparent 72%);
    pointer-events: none;
}

.home-stage::after {
    content: "64";
    position: absolute;
    z-index: -1;
    left: -0.04em;
    bottom: -0.28em;
    color: rgba(47, 102, 173, 0.035);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(12rem, 27vw, 25rem);
    line-height: 1;
    pointer-events: none;
}

.home-stage-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4.4vw, 4.6rem);
}

.home-club-kicker,
.home-section-number {
    color: var(--accent-text);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.home-club-kicker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.home-club-kicker > span {
    width: 1.7rem;
    height: 2px;
    background: var(--home-warm);
}

.home-stage h1 {
    max-width: 12ch;
    color: var(--home-navy);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5.2vw, 5.8rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.91;
}

.home-stage h1 span { color: var(--accent-fill); }

.home-club-lead {
    max-width: 38rem;
    margin-top: 1.3rem;
    color: var(--text-muted);
    font-size: clamp(0.96rem, 1.3vw, 1.08rem);
    line-height: 1.65;
}

.home-rhythm-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin: clamp(1.8rem, 3vw, 2.8rem) 0 0.85rem;
}

.home-rhythm-heading h2 {
    margin-top: 0.22rem;
    color: var(--home-navy);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 400;
    letter-spacing: -0.025em;
}

.home-all-rhythms,
.home-panel-heading a {
    color: var(--accent-text);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.home-all-rhythms span,
.home-panel-heading a span,
.home-puzzle-link span {
    display: inline-block;
    transition: transform 170ms var(--ease-out);
}

.home-all-rhythms:hover span,
.home-panel-heading a:hover span,
.home-puzzle-link:hover span { transform: translateX(4px); }

.home-rhythm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.home-rhythm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 74px;
    overflow: hidden;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    color: var(--home-navy);
    text-decoration: none;
    background: rgba(255,255,255,0.72);
    transition: transform 170ms var(--ease-out), border-color 170ms var(--ease-out), box-shadow 170ms var(--ease-out), background 170ms var(--ease-out);
}

.home-rhythm-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--home-blue-wash);
    transition: transform 230ms var(--ease-out), background 230ms var(--ease-out);
}

.home-rhythm-card:hover,
.home-rhythm-card:focus-visible {
    z-index: 1;
    transform: translateY(-3px);
    border-color: rgba(47,102,173,.42);
    background: #fff;
    box-shadow: 0 10px 22px rgba(24,58,90,.11);
}

.home-rhythm-card:hover::after { transform: scale(2.4); background: rgba(122,177,234,.24); }

.home-rhythm-clock {
    position: relative;
    z-index: 1;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.home-rhythm-name {
    position: relative;
    z-index: 1;
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.home-account-note {
    margin-top: 0.85rem;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.home-account-note a { color: var(--accent-text); font-weight: 700; }

.home-puzzle-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.7rem, 3vw, 3rem);
    color: #f7fbff;
    background:
        radial-gradient(circle at 92% 10%, rgba(122,177,234,.36), transparent 14rem),
        linear-gradient(145deg, #214f79 0%, #183a5a 58%, #102f4c 100%);
}

.home-puzzle-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background-image: repeating-linear-gradient(135deg, transparent 0 20px, rgba(255,255,255,.24) 20px 21px);
    pointer-events: none;
}

.home-puzzle-feature > * { position: relative; z-index: 1; }

.home-puzzle-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.home-puzzle-feature .home-section-number { color: #a9cef2; }

.home-puzzle-topline > span {
    color: rgba(247,251,255,.72);
    font-size: 0.68rem;
    font-weight: 700;
}

.home-puzzle-feature h2 {
    margin-top: 0.45rem;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.8rem, 2.7vw, 2.7rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

.home-puzzle-feature > p {
    color: rgba(247,251,255,.72);
    font-size: 0.82rem;
}

.home-feature-board {
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    filter: drop-shadow(0 20px 28px rgba(7,28,45,.3));
}

.home-puzzle-feature .board-frame {
    width: min(100%, 362px);
    margin: 1.15rem auto 1rem;
}

.home-feature-board cg-board {
    border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(255,255,255,.08);
    background-color: #dceaf4;
    background-image: conic-gradient(#4e789b 0 25%, #dceaf4 0 50%, #4e789b 0 75%, #dceaf4 0);
}

.home-feature-board coords {
    color: #dceaf4;
}

.home-feature-board cg-board square.move-dest {
    background: radial-gradient(rgba(24, 58, 90, 0.32) 22%, rgba(24, 58, 90, 0) 23%);
}

.home-feature-board cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0%, transparent 79%, rgba(24, 58, 90, 0.42) 80%);
}

.home-puzzle-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.78rem 0;
    border-top: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
}

.home-live-game {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem;
    border: 1px solid rgba(47,102,173,.24);
    border-radius: 14px;
    color: var(--home-navy);
    text-decoration: none;
    background: rgba(255,255,255,.8);
    box-shadow: 0 10px 26px rgba(24,58,90,.08);
    animation: home-arrive 400ms var(--ease-out) both;
}

.home-live-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent-fill);
}

.home-live-copy { display: flex; flex-direction: column; }
.home-live-copy strong { font-size: 0.86rem; }
.home-live-copy span { color: var(--text-muted); font-size: 0.75rem; }
.home-live-game .home-arrow { margin-left: auto; }

.home-section-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 0.25rem;
}

.home-section-intro h2 {
    color: var(--home-navy);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

.home-ways,
.home-personal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: home-arrive 520ms 100ms var(--ease-out) both;
}

.home-way-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--home-line);
}

.home-way {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 1.15rem;
    color: var(--home-navy);
    text-decoration: none;
    transition: background 170ms var(--ease-out), transform 170ms var(--ease-out);
}

.home-way + .home-way { border-left: 1px solid var(--home-line); }
.home-way:hover { background: rgba(255,255,255,.72); transform: translateY(-3px); }
.home-way-primary { background: rgba(232,240,247,.48); }

.home-way-index {
    align-self: start;
    color: var(--text-faint);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 0.8rem;
}

.home-way-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: #fff;
}

.home-way-icon img { width: 25px; height: 25px; object-fit: contain; }
.home-way-copy { display: flex; min-width: 0; flex-direction: column; }
.home-way-copy strong { font-size: 0.9rem; }
.home-way-copy small { overflow: hidden; color: var(--text-muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.home-arrow { color: var(--accent-text); font-size: 1.15rem; transition: transform 170ms var(--ease-out); }
.home-way:hover .home-arrow, .home-live-game:hover .home-arrow { transform: translateX(4px); }

.home-personal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: rgba(255,255,255,.72);
}

.home-history-panel { padding: clamp(1.2rem, 2.5vw, 2rem); }

.home-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.home-panel-heading h3 { color: var(--home-navy); font-size: 1rem; }

.home-club .game-row { border-bottom-color: var(--home-line); }
.home-club .game-meta, .home-club .game-vs { color: var(--text-muted); }

.home-progress-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.4rem, 3vw, 2.5rem);
    color: #f7fbff;
    background: var(--home-navy);
}

.home-progress-label { color: #a9cef2; font-size: 0.7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-progress-total { margin-top: 0.5rem; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(3.2rem, 6vw, 5.5rem); font-weight: 400; line-height: .9; }
.home-progress-caption { color: rgba(247,251,255,.7); font-size: .78rem; }
.home-progress-stats { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(247,251,255,.75); font-size: .75rem; }
.home-progress-stats strong { color: #fff; }
.home-winrate { margin-top: 1rem; color: #a9cef2; font-size: .78rem; font-weight: 700; }
.home-progress-empty { max-width: 18rem; margin-top: 1.15rem; color: rgba(247,251,255,.72); font-size: .78rem; }

.home-empty-state {
    display: flex;
    min-height: 150px;
    align-items: center;
    gap: 1.1rem;
    border-top: 1px solid var(--home-line);
    color: var(--text-muted);
}

.home-empty-mark { color: rgba(47,102,173,.16); font-family: "DM Serif Display", Georgia, serif; font-size: 4.4rem; line-height: 1; }
.home-empty-state p { max-width: 25rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.3rem; line-height: 1.25; }

@keyframes home-arrive {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 1120px) {
    .home-stage { grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); }
    .home-stage-copy { padding: 2.4rem; }
    .home-rhythm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-way { grid-template-columns: auto 1fr auto; }
    .home-way-index { display: none; }
}

@media (max-width: 900px) {
    body:has(.home-club) main { padding-top: 1.1rem; }
    .home-stage { grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); min-height: 520px; border-radius: 24px 24px 52px 24px; }
    .home-stage h1 { font-size: clamp(2.7rem, 7vw, 4.4rem); }
    .home-puzzle-feature { padding: 1.5rem; }
    .home-way-list { grid-template-columns: 1fr; }
    .home-way + .home-way { border-top: 1px solid var(--home-line); border-left: 0; }
}

@media (max-width: 720px) {
    .home-stage { grid-template-columns: 1fr; border-radius: 20px 20px 42px 20px; }
    .home-stage-copy { padding: 2rem 1.25rem 1.5rem; }
    .home-stage h1 { max-width: 11ch; font-size: clamp(2.75rem, 13vw, 4.1rem); }
    .home-club-lead { font-size: .94rem; }
    .home-puzzle-feature { padding: 1.6rem 1.25rem 1.8rem; }
    .home-puzzle-feature .board-frame { width: min(100%, 382px); }
    .home-section-intro { display: block; }
    .home-personal-grid { grid-template-columns: 1fr; }
    .home-progress-panel { min-height: 240px; }
}

@media (max-width: 440px) {
    body:has(.home-club) main { padding: .75rem .7rem 2rem; }
    .home-club { gap: 1.45rem; }
    .home-stage-copy { padding-inline: 1rem; }
    .home-club-kicker { margin-bottom: 1rem; }
    .home-rhythm-heading { align-items: start; }
    .home-all-rhythms { margin-top: .25rem; white-space: nowrap; }
    .home-rhythm-card { min-height: 68px; padding: .7rem; }
    .home-account-note { line-height: 1.55; }
    .home-way { padding-inline: .8rem; }
    .home-way-copy small { white-space: normal; }
    .home-live-copy span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .home-stage,
    .home-live-game,
    .home-ways,
    .home-personal { animation: none; }

    .home-rhythm-card,
    .home-way,
    .home-arrow,
    .home-all-rhythms span,
    .home-panel-heading a span,
    .home-puzzle-link span { transition: none; }
}

/* ===========================================================================
   Layout de juego: el tablero manda. Se centra como una pieza única junto a
   sus controles y, al faltar ancho, los controles pasan debajo sin empujar ni
   encoger el damero.
   =========================================================================== */
main:has(.game-layout) {
    display: grid;
    place-items: start center;
    /* Menos aire arriba Y abajo que en el resto del sitio (main trae
       1.75rem/3rem por defecto): en esta pagina cada pixel de alto se lo
       lleva el tablero. */
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.game-layout .player-bar {
    min-height: 38px;
    padding: 0.4rem 0.65rem;
}

.game-layout .player-bar-top { margin-bottom: 0.35rem; }
.game-layout .player-bar-bottom { margin-top: 0.35rem; }

.game-layout {
    /* Tablero mas grande, al estilo lichess: prioriza el ancho disponible
       antes que encogerse a 56rem por defecto. El resto de la resta
       (calc(100vh - 126px)) esta medido con el DOM tras apretar el padding
       superior y las barras de jugador arriba: es lo que ocupan de verdad
       + un margen de seguridad. Bajarlo mas fuerza scroll vertical (ya se
       probo). */
    width: min(100%, 92rem);
    grid-template-columns: minmax(0, min(70rem, calc(100vh - 126px))) minmax(300px, 340px);
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.8rem);
}

.board-col {
    width: min(100%, min(70rem, calc(100vh - 126px)));
    max-width: none;
    justify-self: center;
}


.side-col {
    width: min(100%, 340px);
    justify-self: center;
    position: sticky;
    top: 1.5rem;
}

.player-bar { min-height: 48px; }

/* Portátiles: priorizar un tablero grande antes que forzar dos columnas. */
@media (max-width: 1160px) and (min-width: 901px) {
    .game-layout {
        max-width: 42rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .board-col { width: min(100%, calc(100vh - 190px)); }
    .side-col { width: 100%; max-width: 42rem; position: static; }
}

@media (max-width: 900px) {
    .sidebar,
    .side-nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sidebar::-webkit-scrollbar,
    .side-nav::-webkit-scrollbar { display: none; }

    .game-layout {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .board-col { width: min(100%, calc(100vh - 170px)); }
    .side-col { width: 100%; max-width: 42rem; position: static; }
    .tab-bar { width: 100%; }
}

@media (max-width: 560px) {
    .sidebar { padding-block: .45rem; }
    .logo { padding: .35rem .4rem; }
    .side-link { padding: .55rem .65rem; }
    .side-link .icon-img, .side-link .icon { width: 22px; height: 22px; }
    .side-foot { display: none; }

    .board-col { width: 100%; }
    .player-bar { min-height: 44px; padding-inline: .55rem; }
    .player-clock { margin-left: auto; }
    .side-col .card { padding: 1rem; }
}

/* Pulido editorial de la portada: una sala de ajedrez nocturna, no un panel. */
.home-redesign {
    --display: "DM Serif Display", Georgia, serif;
    gap: 1.8rem;
}

.home-hero {
    min-height: 500px;
    isolation: isolate;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.4rem, 5vw, 5.3rem);
    background:
        linear-gradient(118deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 100%),
        linear-gradient(108deg, #383430 0%, #302d29 48%, #292824 100%);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255,255,255,0.055);
}

.home-hero::before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image: linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 67%);
    mask-image: linear-gradient(to right, #000 0%, transparent 67%);
    pointer-events: none;
}

.home-hero::after {
    width: 31rem;
    height: 31rem;
    right: -14rem;
    top: -9rem;
    border-width: 22px;
    border-color: rgba(122, 177, 234, 0.075);
}

.home-hero-copy { align-self: center; }

.hero-prelude { display: flex; align-items: center; justify-content: space-between; max-width: 31rem; margin-bottom: 1.25rem; }
.hero-prelude .home-kicker { margin: 0; }
.hero-index { color: rgba(255,255,255,.27); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }

.home-hero h1 {
    max-width: 10ch;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(3.4rem, 6.1vw, 5.85rem);
    letter-spacing: -0.065em;
    line-height: .82;
}

.home-hero h1 em {
    color: #a9cef2;
    letter-spacing: -0.075em;
}

.home-lead { max-width: 28rem; margin: 1.8rem 0 1.9rem; font-size: 1.06rem; }
.btn-hero { min-height: 55px; padding-inline: 1.55rem; box-shadow: 0 5px 0 var(--accent-fill-edge), 0 12px 22px rgba(0,0,0,.16); }
.home-trust { margin-top: 2rem; }

.hero-board-wrap { width: min(100%, 410px); margin-right: 0.8rem; }
.hero-board { border: 10px solid #1d1c19; border-radius: 17px; transform: rotate(3.2deg); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.hero-board-wrap:hover .hero-board { transform: rotate(0deg) translateY(-7px); box-shadow: 0 35px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(169,206,242,.2); }
.hero-board-glow { inset: 11% -12%; background: rgba(122, 177, 234, .34); }
.hero-board-caption { bottom: -1.35rem; left: -1.85rem; padding: .66rem .9rem; border-color: rgba(255,255,255,.12); background: #272622; }
.hero-notation { position: absolute; z-index: -1; right: -2.25rem; top: 1.8rem; display: flex; align-items: center; gap: .7rem; color: rgba(169,206,242,.72); font-family: var(--display); font-size: 1.25rem; font-style: italic; transform: rotate(90deg); transform-origin: center; }
.hero-notation i { width: 19px; height: 1px; background: rgba(169,206,242,.4); }

.home-paths { gap: .85rem; }
.path-card { min-height: 154px; padding: 1.3rem; background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 60%), var(--bg-side); }
.path-card { position: relative; overflow: hidden; }
.path-card::before { content: ""; position: absolute; inset: auto -25px -40px auto; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; transition: transform 250ms var(--ease-out); }
.path-card:hover::before { transform: scale(1.45); }
.path-card h2 { font-family: var(--display); font-size: 1.27rem; font-weight: 400; letter-spacing: -.025em; }
.path-icon { width: 40px; height: 40px; padding: .38rem; background: rgba(0,0,0,.13); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; }
.path-card-play { background: linear-gradient(128deg, rgba(122,177,234,.22), rgba(122,177,234,.025) 70%), var(--bg-side); }

.home-quick { padding: 1.5rem; background: linear-gradient(105deg, rgba(255,255,255,.025), transparent 48%), var(--bg-side); }
.home-section-heading h2 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; letter-spacing: -.035em; }
.home-time-card { min-height: 88px; position: relative; overflow: hidden; }
.home-time-card::after { content: ""; position: absolute; width: 30px; height: 30px; right: -12px; bottom: -12px; border-radius: 50%; background: rgba(122,177,234,.17); transition: transform 170ms var(--ease-out); }
.home-time-card:hover::after { transform: scale(5); }
.home-time-clock, .home-time-name { z-index: 1; position: relative; }

@media (max-width: 900px) {
    .home-hero { min-height: auto; }
    .hero-board-wrap { margin: .6rem auto 0; }
    .hero-notation { right: -1.5rem; }
}

@media (max-width: 560px) {
    .home-hero { padding: 2rem 1.3rem 3.25rem; }
    .home-hero h1 { font-size: clamp(3.15rem, 16vw, 4.35rem); }
    .home-lead { font-size: .98rem; }
    .hero-board { border-width: 7px; }
    .hero-board-caption { left: -.55rem; }
    .hero-notation { display: none; }
}

/* ===========================================================================
   Motor y puzzles — estados de las funciones conectadas a Stockfish.
   Contrastes verificados: verde 8.9:1, rojo 5.6:1, apagado 8.3:1 sobre la
   superficie de las tarjetas.
   =========================================================================== */

/* --- Interruptor del motor --- */
.engine-switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}

.engine-switch input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-fill);
    cursor: pointer;
}

/* --- Lectura de la evaluacion --- */
.engine-readout {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    min-height: 74px;
}

/* Barra vertical al estilo de las webs de ajedrez: la parte blanca crece
   hacia arriba con la ventaja de las blancas. --eval lo fija el JS. */
.eval-bar {
    --eval: 50%;
    position: relative;
    width: 12px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #262421;
    box-shadow: inset 0 0 0 1px var(--border);
}

.eval-bar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: var(--eval);
    background: #f2f0ec;
    transition: height 260ms var(--ease-out);
}

.engine-numbers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

.engine-score {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    transition: color 160ms var(--ease-out);
}

/* Hasta que el motor no esta activo, el numero se queda apagado: asi se ve
   de un vistazo que no hay analisis corriendo. */
[data-engine-panel].is-active .engine-score {
    color: var(--text);
}

.engine-best {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* --- Estado del puzzle --- */
.puzzle-status {
    margin: 0.5rem 0 0.9rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 160ms var(--ease-out);
}

.puzzle-status.is-ok { color: #4ade80; }
.puzzle-status.is-fail { color: #f87171; }
.puzzle-status.is-hint { color: var(--accent-text); }

/* --- Seleccion de color --- */
.color-icon-btn.is-selected {
    background: var(--accent-soft);
    border-color: var(--accent-text);
}

/* ==========================================================================
   Autenticacion — registro, entrar, verificacion por codigo (django-allauth)
   ========================================================================== */
.auth-shell {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
}

.auth-title {
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.auth-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 1.4rem;
}

.auth-sub a {
    color: var(--accent-text);
    text-decoration: none;
}

.auth-sub a:hover {
    text-decoration: underline;
}

.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 0.8rem;
    transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-invalid input {
    border-color: #f87171;
}

.field-help {
    font-size: 0.78rem;
    color: var(--text-faint);
    line-height: 1.5;
}

/* Las ayudas con lista (los requisitos de la contraseña) pesan mucho para
   estar siempre a la vista: se ocultan y solo se despliegan mientras se
   esta escribiendo en ese campo, como en la mayoria de webs. Las ayudas de
   una sola linea (recuento de caracteres, pistas cortas...) llevan la clase
   normal .field-help sin -collapsible, y se quedan siempre visibles.
   Se marca la clase desde la plantilla (no con :has() en CSS): varios
   motores de navegador no repintan bien :has() combinado con :focus-within
   al cambiar el foco, aunque el selector "matchea" segun matches(). */
.field-help-collapsible {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 220ms var(--ease-out),
                opacity 160ms var(--ease-out),
                margin-top 220ms var(--ease-out);
}

.field:focus-within .field-help-collapsible {
    max-height: 12rem;
    opacity: 1;
    margin-top: 0.5rem;
}

/* Django manda el texto de ayuda de la contraseña como una <ul> (lista de
   requisitos). Sin esto se ve como texto de navegador sin estilo, suelto. */
.field-help ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.field-help li {
    position: relative;
    padding-left: 0.85rem;
}

.field-help li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.55em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-faint);
}

.field-errors {
    list-style: none;
    color: #f87171;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.field-checkbox {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1.4rem;
}

.auth-divider {
    height: 1px;
    background: var(--border);
    margin: 1.5rem 0 1rem;
}

.auth-divider-label {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-faint);
    margin-bottom: 1rem;
}

.auth-panel {
    margin-bottom: 1rem;
}

.auth-panel:last-child {
    margin-bottom: 0;
}

.auth-panel .auth-sub {
    margin-bottom: 1rem;
}

/* El QR necesita fondo claro para leerse: sobre el tema oscuro no escanea. */
.auth-qr {
    display: inline-block;
    background: #fff;
    padding: 0.9rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.auth-qr img {
    display: block;
    width: 180px;
    height: 180px;
}

.auth-providers {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.btn-social {
    gap: 0.65rem;
    background: var(--bg-elevated);
}

.btn-social-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-alerts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.auth-alert {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
}

.auth-alert-error {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

.auth-alert-success {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}

.side-profile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    transition: background 140ms var(--ease-out);
}

.side-profile:hover {
    background: var(--bg-elevated);
}

.side-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--text-faint);
}

.side-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-avatar svg {
    width: 60%;
    height: 60%;
}

.side-username {
    font-size: 0.92rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Perfil
   ========================================================================== */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.profile-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.profile-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    cursor: pointer;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-faint);
    transition: border-color 140ms var(--ease-out);
}

/* Version de solo lectura (pagina /perfil/, sin el <label> clicable que le
   da 72x72 al hijo .profile-avatar-img): necesita su propio tamaño fijo,
   independiente de esa regla, para no quedar ovalada. */
.profile-avatar-static {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-faint);
}

.profile-avatar-static img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-static svg {
    width: 60%;
    height: 60%;
}

.profile-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-img svg {
    width: 60%;
    height: 60%;
}

.profile-avatar:hover .profile-avatar-img {
    border-color: var(--accent-text);
}

/* Insignia de camara, siempre visible en la esquina: no hay que "descubrir"
   que la foto es clicable, es evidente a la primera. */
.profile-avatar-camera {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-fill);
    border: 2px solid var(--bg-side);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 140ms var(--ease-out);
}

.profile-avatar-camera svg {
    width: 14px;
    height: 14px;
}

.profile-avatar:hover .profile-avatar-camera {
    background: var(--accent-fill-hover);
}

.profile-avatar input[type="file"] {
    cursor: pointer;
}

.profile-avatar-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.profile-username {
    font-weight: 700;
    font-size: 1.05rem;
}

.profile-avatar-hint {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin-top: 0.3rem;
}

.settings-tabs {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.3rem;
    /* Las cuatro pestañas de Problemas no caben en un movil (444px sobre
       375px de ancho). Sin esto empujan la pagina entera y aparece scroll
       horizontal en todo el sitio; asi el desbordamiento se queda dentro de
       la propia fila de pestañas, que se desliza sola. */
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar { display: none; }

/* En escritorio, moverse entre Problemas/Rush/Battle/Personalizados ya se
   hace pasando el raton por "Problemas" en la barra lateral: repetir la
   misma navegacion como pestañas arriba de la pagina sobra visualmente.
   Solo hacen falta en movil, donde ese submenu no se muestra (no hay hover
   ni sitio para un flyout) y son la unica forma de llegar a esas paginas. */
@media (min-width: 901px) {
    .puzzle-nav-mobile { display: none; }
}

.settings-tab {
    flex-shrink: 0;
    padding: 0.7rem 1.1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transform: translateY(1px);
    transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.settings-tab:hover {
    color: var(--text);
}

.settings-tab.is-active {
    color: var(--accent-text);
    border-bottom-color: var(--accent-fill);
}

.account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-panels {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 36rem;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 4px 0 #b8543f;
}

.btn-danger:active {
    box-shadow: 0 2px 0 #b8543f;
}

/* Cabecera del panel de partida: nombre del rival destacado en vez de un
   titulo generico "Partida" — es el dato que de verdad importa de un
   vistazo, al estilo del widget de partida de lichess. */
.game-status-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-fill);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 var(--accent-soft);
    animation: status-pulse 2.2s ease-out infinite;
}

@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(122, 177, 234, 0.45); }
    70% { box-shadow: 0 0 0 6px rgba(122, 177, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(122, 177, 234, 0); }
}

.status-opponent-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Barra de acciones de la partida en vivo: iconos en vez de botones de
   texto apilados, al estilo de un toolbar de partida (voltear, retroceder,
   tablas, abandonar). */
.game-toolbar {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: rgba(122, 177, 234, 0.3);
}

.icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.icon-btn .icon { width: 19px; height: 19px; }

.icon-btn-danger:hover:not(:disabled) {
    background: rgba(240, 128, 106, 0.14);
    color: var(--danger);
    border-color: rgba(240, 128, 106, 0.3);
}

.confirm-dialog {
    width: 100%;
    max-width: 22rem;
    background: var(--bg-side);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    /* Antes aparecia/desaparecia de golpe con showModal()/close(), mientras
       el resto del sitio usa rise-in para casi todo — inconsistente. */
    animation: rise-in 180ms var(--ease-out) both;
}

.confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    animation: fade-in 180ms var(--ease-out) both;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.confirm-dialog-text {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ==========================================================================
   Problemas — Puzzle Rush, Battle y personalizados
   ========================================================================== */
.rush-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rush-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.rush-mode:not(:disabled):hover {
    border-color: var(--accent-text);
    transform: translateY(-2px);
}

.rush-mode:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.rush-clock {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}

.rush-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.rush-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.rule-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.rule-list li {
    position: relative;
    padding-left: 1.1rem;
}

.rule-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-fill);
}

/* ==========================================================================
   Cuenta atras del codigo de verificacion
   ========================================================================== */
.code-timer {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
    transition: color 160ms var(--ease-out);
}

.code-timer strong {
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.code-timer.is-expired {
    color: #f87171;
    font-weight: 600;
}

/* ==========================================================================
   Jugar en vivo (multijugador)
   ========================================================================== */
.searching {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.searching-spinner {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 3px solid var(--border);
    border-top-color: var(--accent-text);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
    margin-top: 0.1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.play-status {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
    transition: color 160ms var(--ease-out);
}

.play-status.is-over {
    color: var(--accent-text);
    font-size: 1.05rem;
    font-weight: 800;
}

/* El reloj del jugador que tiene el turno se resalta. Lo activa el JS al
   poner data-clock-active en la barra correspondiente. */
.player-bar[data-turn] .player-clock {
    background: var(--accent-fill);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .searching-spinner { animation: none; }
}

/* ==========================================================================
   Historial de partidas (perfil)
   ========================================================================== */
.game-history {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.game-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.4rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.game-row:last-child { border-bottom: none; }

.game-result-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.game-win .game-result-dot { background: #4ade80; }
.game-loss .game-result-dot { background: #f87171; }
.game-draw .game-result-dot { background: var(--text-faint); }

.game-result-label {
    font-weight: 700;
    min-width: 4.5rem;
}

.game-win .game-result-label { color: #4ade80; }
.game-loss .game-result-label { color: #f87171; }
.game-draw .game-result-label { color: var(--text-muted); }

.game-vs {
    color: var(--text);
    font-weight: 600;
}

.game-meta {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 0.82rem;
    text-align: right;
}

@media (max-width: 560px) {
    .game-meta { display: none; }
}

/* ===========================================================================
   Sala de juego Chessty. Comparte la luz y el azul editorial de la home,
   pero concentra la composicion en tablero, reloj y decisiones de partida.
   =========================================================================== */
body:has(.play-room) {
    --bg: var(--theme-page);
    --bg-side: var(--theme-sidebar);
    --bg-elevated: var(--theme-surface);
    --bg-input: var(--theme-input);
    --border: var(--theme-border);
    --text: var(--theme-text);
    --text-muted: var(--theme-muted);
    --text-faint: var(--theme-faint);
    --accent-fill: var(--theme-accent);
    --accent-fill-hover: var(--theme-accent-hover-strong);
    --accent-fill-edge: var(--theme-accent-edge);
    --accent-text: var(--theme-accent-text);
    --accent-soft: var(--theme-accent-soft);
    color: var(--text);
    background:
        radial-gradient(circle at 82% 2%, var(--theme-page-glow), transparent 29rem),
        linear-gradient(140deg, var(--theme-page-shine), transparent 52%),
        var(--bg);
}

body:has(.play-room) .sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.5), transparent 30%),
        var(--bg-side);
    border-right-color: rgba(24,58,90,.12);
    box-shadow: 9px 0 34px rgba(24,58,90,.08);
}

body:has(.play-room) .logo-full {
    filter: drop-shadow(0 4px 7px rgba(47,102,173,.14));
}

body:has(.play-room) .side-link:hover,
body:has(.play-room) .side-sublink:hover {
    background: rgba(255,255,255,.68);
}

body:has(.play-room) .side-submenu {
    background: #f8fbfd;
    box-shadow: 0 18px 40px rgba(24,58,90,.15);
}

body:has(.play-room) .btn-ghost {
    background: rgba(255,255,255,.76);
    border-color: rgba(24,58,90,.13);
    box-shadow: 0 4px 0 rgba(24,58,90,.12);
}

body:has(.play-room) main {
    width: 100%;
    max-width: none;
    /* Reserve the viewport for the board instead of a decorative page gutter. */
    padding: clamp(.55rem, 1.1vw, .85rem) clamp(.8rem, 2.4vw, 2.4rem) .5rem;
}

.play-room {
    --play-paper: var(--theme-surface);
    --play-navy: var(--theme-title);
    --play-blue: var(--theme-accent);
    --play-blue-soft: var(--theme-surface-alt);
    --play-warm: var(--theme-gold);
    --play-line: var(--theme-border);
    --play-shadow: 0 24px 64px var(--theme-shadow);
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    font-family: "Archivo", "Segoe UI", sans-serif;
}

.play-room [hidden] { display: none !important; }

.play-room-intro {
    display: grid;
    grid-template-columns: minmax(240px, auto) minmax(220px, 1fr) auto;
    align-items: end;
    gap: clamp(.85rem, 2.2vw, 2rem);
    margin-bottom: clamp(.45rem, 1vw, .7rem);
    padding: 0 .25rem;
    animation: play-room-in 460ms var(--ease-out) both;
}

.play-room-kicker,
.play-panel-index {
    color: var(--accent-text);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.play-room-kicker {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .2rem;
}

.play-room-kicker span {
    width: 1.4rem;
    height: 2px;
    background: var(--play-warm);
}

.play-room-intro h1 {
    color: var(--play-navy);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
}

.play-room-lead {
    max-width: 30rem;
    color: var(--text-muted);
    font-size: .94rem;
    line-height: 1.35;
}

.play-room-facts {
    display: flex;
    gap: .45rem;
    color: var(--text-faint);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.play-room-facts span {
    padding: .38rem .55rem;
    border: 1px solid var(--play-line);
    border-radius: 999px;
    background: rgba(255,255,255,.58);
}

.play-room-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
    justify-content: center;
    gap: clamp(1rem, 2.6vw, 2.25rem);
    align-items: start;
}

.play-board-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    /* The board's width is also its height: this cap removes page scrolling. */
    max-width: min(46rem, calc(100dvh - 148px));
    justify-self: end;
    padding: clamp(.65rem, 1.6vw, 1.15rem);
    border: 1px solid var(--play-line);
    border-radius: 24px 24px 56px 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,253,.86)),
        var(--play-paper);
    box-shadow: var(--play-shadow);
    animation: play-room-in 500ms 40ms var(--ease-out) both;
}

.play-board-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .32;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(47,102,173,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,102,173,.055) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(145deg, #000, transparent 64%);
    mask-image: linear-gradient(145deg, #000, transparent 64%);
    pointer-events: none;
}

.play-room-layout:has([data-play-ingame]:not([hidden])) .play-board-stage {
    max-width: min(46rem, calc(100vh - 205px));
}

.play-board-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
    padding: 0 .2rem;
    color: var(--text-faint);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.play-board-label span:last-child { color: var(--accent-text); }

.play-room .board-col {
    width: 100%;
    max-width: none;
    animation: none;
}

.play-room [data-play] .board-frame { width: 100%; }

.play-room [data-play] cg-board {
    background-color: #dceaf4;
    background-image: conic-gradient(#4e789b 0 25%, #dceaf4 0 50%, #4e789b 0 75%, #dceaf4 0);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(24,58,90,.18), 0 18px 38px rgba(24,58,90,.2);
}

.play-room [data-play] coords { color: #4e789b; }

.play-room [data-play] cg-board square.last-move {
    background-color: rgba(217,154,69,.56);
}

.play-room [data-play] cg-board square.selected {
    background-color: rgba(217,154,69,.7);
}

.play-room [data-play] cg-board square.move-dest {
    background: radial-gradient(rgba(24,58,90,.34) 22%, rgba(24,58,90,0) 23%);
}

.play-room [data-play] cg-board square.move-dest:hover {
    background: rgba(217,154,69,.4);
}

.play-room [data-play] cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0%, transparent 78%, rgba(24,58,90,.42) 79%);
}

.play-room .player-bar {
    min-height: 50px;
    padding: .48rem .55rem;
    border: 1px solid var(--play-line);
    border-radius: 12px;
    color: var(--play-navy);
    background: rgba(232,240,247,.86);
    box-shadow: 0 8px 18px rgba(24,58,90,.06);
}

.play-room .player-avatar {
    width: 34px;
    height: 34px;
    border-color: rgba(24,58,90,.12);
    background: #fff;
}

.play-room .player-clock {
    min-width: 5.2rem;
    padding: .35rem .7rem;
    border: 1px solid rgba(24,58,90,.12);
    border-radius: 9px;
    color: var(--play-navy);
    background: #fff;
    font-size: 1.08rem;
    box-shadow: inset 0 -2px rgba(24,58,90,.06);
    transition: color 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.play-room .player-bar[data-turn] .player-clock {
    color: #fff;
    background: var(--play-blue);
    box-shadow: 0 4px 0 var(--accent-fill-edge), 0 8px 18px rgba(47,102,173,.2);
}

.play-control-deck {
    width: 100%;
    max-width: none;
    position: sticky;
    top: 1rem;
    gap: 0;
    animation: play-room-in 500ms 90ms var(--ease-out) both;
}

.play-panel {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--play-line);
    border-radius: 22px 22px 48px 22px;
    color: var(--text);
    background: #fff;
    box-shadow: 0 22px 55px rgba(24,58,90,.12);
    animation: none;
}

/* The selector lives in the panel body, so only lift its clipping while open. */
.play-panel:has(.play-time-picker.is-open) {
    position: relative;
    z-index: 25;
    overflow: visible;
}

.play-control-deck:has(.play-time-picker.is-open) { z-index: 25; }

.play-panel-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.45rem 1.5rem 1.3rem;
    color: #f7fbff;
    background:
        radial-gradient(circle at 100% 0, rgba(122,177,234,.34), transparent 12rem),
        linear-gradient(145deg, #214f79, #183a5a 66%, #102f4c);
}

.play-panel-head::after {
    content: "64";
    position: absolute;
    z-index: -1;
    right: -.06em;
    bottom: -.42em;
    color: rgba(255,255,255,.055);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 8rem;
    line-height: 1;
}

.play-panel-index { color: #a9cef2; }

.play-panel-head h2 {
    margin-top: .4rem;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.8rem, 2.6vw, 2.35rem);
    font-weight: 400;
    letter-spacing: -.035em;
}

.play-panel-head > p:last-child {
    max-width: 28rem;
    margin-top: .4rem;
    color: rgba(247,251,255,.7);
    font-size: .9rem;
    line-height: 1.5;
}

.play-panel-body { padding: 1.35rem 1.5rem 1.6rem; }

.play-panel .field-label {
    color: var(--play-navy);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.play-panel .time-select {
    min-height: 50px;
    margin-bottom: .9rem;
    border: 1px solid var(--play-line);
    color: var(--play-navy);
    background: var(--play-blue-soft);
    box-shadow: inset 0 -2px rgba(24,58,90,.05);
}

.play-time-picker {
    position: relative;
    z-index: 1;
    margin-bottom: .9rem;
}

.play-time-trigger {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .58rem .85rem .58rem 1rem;
    border: 1px solid var(--play-line);
    border-radius: 12px;
    color: var(--play-navy);
    background: linear-gradient(135deg, #f7fbff, var(--play-blue-soft));
    box-shadow: inset 0 -2px rgba(24,58,90,.05), 0 3px 0 rgba(24,58,90,.09);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.play-time-trigger:hover {
    border-color: rgba(47,102,173,.4);
    background: #f1f8fd;
}

.play-time-trigger:focus-visible,
.play-time-picker.is-open .play-time-trigger {
    outline: none;
    border-color: var(--play-blue);
    box-shadow: 0 0 0 3px rgba(47,102,173,.15), 0 3px 0 rgba(24,58,90,.09);
}

.play-time-current {
    display: flex;
    align-items: baseline;
    gap: .55rem;
}

.play-time-current strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.play-time-current small {
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
}

.play-time-trigger .icon {
    width: 20px;
    height: 20px;
    color: var(--accent-text);
    transition: transform 180ms var(--ease-out);
}

.play-time-picker.is-open .play-time-trigger .icon { transform: rotate(180deg); }

.play-time-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + .55rem);
    right: 0;
    left: 0;
    display: grid;
    gap: .2rem;
    max-height: none;
    overflow: visible;
    padding: .45rem;
    border: 1px solid rgba(24,58,90,.16);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(24,58,90,.2), 0 3px 0 rgba(24,58,90,.08);
    transform-origin: top center;
    animation: play-time-menu-in 130ms var(--ease-out) both;
}

.play-time-picker.is-upward .play-time-menu {
    top: auto;
    bottom: calc(100% + .55rem);
    transform-origin: bottom center;
}

.play-time-option {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    min-height: 48px;
    align-items: center;
    gap: .7rem;
    padding: .55rem .72rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--play-navy);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 130ms var(--ease-out), border-color 130ms var(--ease-out), transform 130ms var(--ease-out);
}

.play-time-option strong {
    font-size: .95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.play-time-option span {
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
}

.play-time-option:hover,
.play-time-option:focus-visible {
    outline: none;
    border-color: rgba(47,102,173,.18);
    background: #edf5fb;
}

.play-time-option.is-selected {
    border-color: rgba(47,102,173,.3);
    background: #dceaf6;
    box-shadow: inset 3px 0 var(--play-blue);
}

@keyframes play-time-menu-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 560px) {
    .play-time-menu {
        max-height: min(25rem, calc(100dvh - 2rem));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-color: rgba(47,102,173,.38) transparent;
        scrollbar-width: thin;
    }

    .play-time-menu::-webkit-scrollbar { width: 7px; }
    .play-time-menu::-webkit-scrollbar-thumb {
        border: 2px solid #fff;
        border-radius: 999px;
        background: rgba(47,102,173,.38);
    }
}

.play-panel .time-select:focus {
    outline: none;
    border-color: var(--play-blue);
    box-shadow: 0 0 0 3px rgba(47,102,173,.14);
}

.play-search-button {
    min-height: 52px;
    margin-bottom: 0 !important;
}

.play-search-button .icon { width: 18px; height: 18px; }

.play-alternative {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--play-line);
}

.play-alternative > span {
    color: var(--text-faint);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.play-machine-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 56px;
    gap: .8rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(47,102,173,.2);
    border-radius: 13px;
    color: var(--play-navy);
    background: linear-gradient(135deg, #f5faff, #e6f0f8);
    box-shadow: 0 3px 0 rgba(24,58,90,.12);
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.play-machine-link .btn-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.play-machine-link > span {
    color: var(--accent-text);
    transition: transform 160ms var(--ease-out);
}

.play-machine-link:hover {
    background: #dbeaf6;
    box-shadow: 0 5px 0 rgba(24,58,90,.12);
    transform: translateY(-1px);
}

.play-machine-link:hover > span { transform: translateX(4px); }

.play-auth-gate { text-align: center; }

.play-auth-number {
    display: block;
    height: .75em;
    overflow: hidden;
    color: rgba(47,102,173,.12);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 6.5rem;
    line-height: .65;
}

.play-auth-gate h3 {
    margin-top: .75rem;
    color: var(--play-navy);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: -.025em;
}

.play-auth-gate p {
    max-width: 17rem;
    margin: .55rem auto 1.15rem;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.45;
}

.play-auth-actions {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.play-panel-searching .play-panel-body { text-align: center; }

.play-search-visual {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    margin: .3rem auto 1rem;
    place-items: center;
}

.play-search-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(47,102,173,.24);
    border-radius: 50%;
    animation: play-search-pulse 1.8s var(--ease-out) infinite;
}

.play-search-visual .searching-spinner {
    width: 44px;
    height: 44px;
    margin: 0;
    border-width: 3px;
    border-color: var(--play-blue-soft);
    border-top-color: var(--play-blue);
}

.play-search-rhythm {
    color: var(--text-muted);
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.play-search-rhythm strong {
    color: var(--play-navy);
    font-size: 1.15rem;
}

.play-search-note {
    max-width: 17rem;
    margin: .7rem auto 1.2rem;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.play-panel-head-live .game-status-header {
    align-items: center;
    margin-top: .45rem;
}

.play-panel-head-live .status-dot {
    background: #7ab1ea;
    box-shadow: 0 0 0 4px rgba(122,177,234,.18);
}

.play-panel-head-live .status-opponent-name {
    margin: 0;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
}

.play-panel-head-live .play-status {
    margin: .4rem 0 0;
    color: #a9cef2;
    font-size: .94rem;
}

.play-panel-head-live .play-status.is-over {
    color: #fff;
    font-size: 1rem;
}

.play-game-body { padding-top: 1rem; }

.play-moves-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--play-line);
    color: var(--text-faint);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.play-room .move-rows {
    min-height: 8.5rem;
    max-height: min(38vh, 21rem);
    margin: 0;
    padding: .65rem 0;
    overflow-y: auto;
}

.play-room .move-row {
    grid-template-columns: 2.2rem minmax(0,1fr) minmax(0,1fr);
    min-height: 34px;
    border-radius: 7px;
}

.play-room .move-row:nth-child(even) { background: rgba(232,240,247,.45); }
.play-room .move-num { color: var(--text-faint); }
.play-room .move-san { color: var(--play-navy); }
.play-room .move-san.is-last { color: #fff; background: var(--play-blue); }

.play-room .game-toolbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .45rem;
    margin-top: .35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--play-line);
}

.play-room .game-toolbar .icon-btn {
    width: 100%;
    min-width: 42px;
    color: var(--accent-text);
    border-color: var(--play-line);
    background: var(--play-blue-soft);
    box-shadow: none;
}

.play-room .game-toolbar .icon-btn:hover { background: #dce9f3; }
.play-room .game-toolbar .icon-btn-danger { color: #b33a32; background: #fff1ef; }
.play-room .game-toolbar .icon-btn:disabled { opacity: .38; }

.play-confirm-dialog {
    color: var(--text);
    border: 1px solid var(--play-line);
    background: #fff;
    box-shadow: 0 28px 75px rgba(24,58,90,.22);
}

.play-promotion-dialog {
    width: min(30rem, calc(100vw - 2rem));
    margin: auto;
    padding: 1.2rem;
    overflow: visible;
    color: var(--text);
    border: 1px solid var(--play-line);
    border-radius: 20px 20px 34px 20px;
    background: var(--theme-surface);
    box-shadow: 0 28px 75px rgba(24,58,90,.28);
    animation: rise-in 180ms var(--ease-out) both;
}
.play-promotion-dialog::backdrop { background: rgba(12,28,43,.5); backdrop-filter: blur(3px); }
.play-promotion-dialog form { display: grid; gap: .7rem; }
.play-promotion-kicker { margin: 0; color: var(--accent-fill); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.play-promotion-dialog h2 { margin: 0; color: var(--play-navy); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.5rem,4vw,2rem); font-weight: 400; }
.play-promotion-copy { margin: -.35rem 0 .2rem; color: var(--theme-muted); font-size: .9rem; }
.play-promotion-options { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; }
.play-promotion-options button {
    display: grid;
    min-height: 110px;
    padding: .55rem .35rem;
    place-items: center;
    gap: .15rem;
    color: var(--play-navy);
    border: 1px solid var(--play-line);
    border-radius: 13px;
    background: var(--play-blue-soft);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.play-promotion-options button:hover { transform: translateY(-2px); border-color: var(--accent-fill); background: #dce9f3; }
.play-promotion-options button:focus-visible { outline: 3px solid rgba(39,112,174,.38); outline-offset: 2px; }
.play-promotion-options svg { width: 44px; height: 44px; fill: currentColor; }
.play-promotion-options span { font-size: .82rem; font-weight: 800; }
.play-promotion-options kbd { padding: .04rem .28rem; color: var(--theme-muted); border: 1px solid var(--play-line); border-radius: 4px; font: 700 .65rem/1 "Archivo", sans-serif; }
.play-promotion-cancel { justify-self: center; min-height: 42px; padding: .35rem .8rem; color: var(--theme-muted); border: 0; background: transparent; cursor: pointer; font-weight: 750; }
.play-promotion-cancel:hover, .play-promotion-cancel:focus-visible { color: var(--accent-fill); text-decoration: underline; }
@media (max-width: 430px) { .play-promotion-options { grid-template-columns: repeat(2,1fr); } .play-promotion-options button { min-height: 82px; } }

@keyframes play-room-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes play-search-pulse {
    0% { opacity: .8; transform: scale(.72); }
    72%, 100% { opacity: 0; transform: scale(1.18); }
}

@media (max-width: 1120px) and (min-width: 901px) {
    .play-room { max-width: 46rem; }
    .play-room-intro { grid-template-columns: 1fr auto; }
    .play-room-lead { display: none; }
    .play-room-layout { grid-template-columns: 1fr; }
    .play-board-stage,
    .play-room-layout:has([data-play-ingame]:not([hidden])) .play-board-stage {
        max-width: min(46rem, calc(100vh - 150px));
        justify-self: center;
    }
    .play-control-deck { max-width: 46rem; position: static; }
}

@media (max-width: 900px) {
    body:has(.play-room) main { padding: .85rem .75rem 2rem; }
    .play-room-intro { grid-template-columns: 1fr auto; }
    .play-room-lead { display: none; }
    .play-room-facts span:last-child { display: none; }
    .play-room-layout { grid-template-columns: minmax(0,1fr); gap: 1rem; }
    .play-board-stage,
    .play-room-layout:has([data-play-ingame]:not([hidden])) .play-board-stage {
        width: 100%;
        max-width: 46rem;
        justify-self: center;
    }
    .play-control-deck { width: 100%; max-width: 46rem; justify-self: center; position: static; }
}

@media (max-width: 560px) {
    body:has(.play-room) main { padding-inline: .55rem; }
    .play-room-intro { margin-bottom: .7rem; padding-inline: .2rem; }
    .play-room-intro h1 { font-size: 2.15rem; }
    .play-room-kicker { font-size: .75rem; }
    .play-room-facts { display: none; }
    .play-board-stage { padding: .55rem; border-radius: 16px 16px 34px 16px; }
    .play-board-label { margin-bottom: .35rem; font-size: .75rem; }
    .play-room .board-frame { padding: 2px 2px 24px 25px; }
    .play-room [data-play] coords { font-size: 11px; }
    .play-room [data-play] coords.ranks { left: -20px; }
    .play-room [data-play] coords.files { bottom: -20px; }
    .play-room .player-bar { min-height: 46px; }
    .play-room .player-clock { min-width: 4.7rem; font-size: 1rem; }
    .play-panel { border-radius: 17px 17px 36px 17px; }
    .play-panel-head { padding: 1.25rem 1.15rem 1.1rem; }
    .play-panel-body { padding: 1.15rem; }
    .play-panel-head h2 { font-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .play-room-intro,
    .play-board-stage,
    .play-control-deck,
    .play-search-ring { animation: none; }

    .play-machine-link > span,
    .play-room .player-clock { transition: none; }
}

/* ===========================================================================
   Chessty unificado - sistema claro para el resto del producto
   Home y Jugar conservan sus composiciones propias; estas reglas convierten
   las pantallas heredadas en partes del mismo club editorial.
   =========================================================================== */
.skip-link {
    position: fixed;
    z-index: 200;
    top: .65rem;
    left: .65rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    color: #fff;
    background: var(--accent-fill);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(calc(-100% - 1rem));
    transition: transform 150ms var(--ease-out);
}

.skip-link:focus { transform: none; }

body:not(:has(.home-club)):not(:has(.play-room)) .sidebar,
.auth-page .sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), transparent 30%),
        var(--bg-side);
}

body:not(:has(.home-club)):not(:has(.play-room)) .side-link:hover,
body:not(:has(.home-club)):not(:has(.play-room)) .side-sublink:hover,
.auth-page .side-link:hover,
.auth-page .side-sublink:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--theme-surface-alt) 76%, transparent);
}

body:not(:has(.home-club)):not(:has(.play-room)) .side-submenu,
.auth-page .side-submenu {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 18px 40px var(--theme-shadow);
}

body:not(:has(.home-club)):not(:has(.play-room)) .btn-ghost,
.auth-page .btn-ghost {
    border-color: var(--theme-border);
    color: var(--text);
    background: var(--theme-surface);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-shadow) 85%, transparent);
}

body:not(:has(.home-club)):not(:has(.play-room)) .btn-ghost:hover,
.auth-page .btn-ghost:hover { background: var(--theme-surface-alt); }

.content-page,
.workspace-page {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--text);
    font-family: "Archivo", "Segoe UI", sans-serif;
}

.workspace-page > *,
.workspace-page .game-layout > * {
    min-width: 0;
    max-width: 100%;
}

.content-page { max-width: 72rem; margin: 0 auto; }

.content-page .page-header,
.workspace-intro {
    position: relative;
    margin-bottom: 1.2rem;
    padding-left: 1rem;
}

.content-page .page-header::before,
.workspace-intro::before {
    content: "";
    position: absolute;
    top: .15rem;
    bottom: .15rem;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(var(--accent-fill), #7ab1ea);
}

.content-page .page-title,
.workspace-intro h1 {
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(2.15rem, 4vw, 3.45rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
    text-wrap: balance;
}

.content-page .page-sub,
.workspace-intro > p {
    max-width: 38rem;
    color: var(--text-muted);
    font-size: .96rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.workspace-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    width: min(100%, 76rem);
    margin-inline: auto;
}

.workspace-intro h1 { font-size: clamp(1.85rem, 3vw, 2.55rem); }

.workspace-kicker {
    margin-bottom: .2rem;
    color: var(--accent-text);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.content-page .card,
.workspace-page .card,
.auth-page .card {
    border: 1px solid var(--theme-border);
    color: var(--text);
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent);
    box-shadow: 0 14px 38px var(--theme-shadow);
}

.content-page .card-title,
.workspace-page .card-title {
    color: var(--theme-title);
    font-size: 1.02rem;
}

.content-page .empty,
.workspace-page .empty {
    border-color: var(--theme-border);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-surface) 72%, transparent), transparent),
        var(--theme-surface-alt);
}

.content-page .empty-icon,
.workspace-page .empty-icon {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px var(--theme-shadow));
}

.workspace-page .game-layout {
    grid-template-columns: minmax(0, min(43rem, calc(100dvh - 178px))) minmax(310px, 360px);
    gap: clamp(1rem, 2.4vw, 2rem);
    width: min(100%, 76rem);
}

.workspace-page .board-col {
    width: min(100%, min(43rem, calc(100dvh - 178px)));
    min-width: 0;
}

.bot-workspace .game-layout {
    grid-template-columns: minmax(0, min(40rem, calc(100dvh - 210px))) minmax(320px, 360px);
}

.bot-workspace .board-col {
    width: min(100%, min(40rem, calc(100dvh - 210px)));
}

.workspace-page .side-col {
    width: 100%;
    max-height: calc(100dvh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1px .35rem 1rem 1px;
    scrollbar-color: color-mix(in srgb, var(--theme-accent) 32%, transparent) transparent;
    scrollbar-width: thin;
}

.workspace-page .side-col::-webkit-scrollbar { width: 7px; }
.workspace-page .side-col::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 32%, transparent);
}

body:not(:has(.home-club)):not(:has(.play-room)) .game-layout cg-board {
    border-radius: 10px;
    background-color: var(--theme-board-light);
    background-image: conic-gradient(
        var(--theme-board-dark) 0 25%,
        var(--theme-board-light) 0 50%,
        var(--theme-board-dark) 0 75%,
        var(--theme-board-light) 0
    );
    box-shadow: 0 2px 4px var(--theme-shadow), 0 18px 38px var(--theme-shadow);
}

body:not(:has(.home-club)):not(:has(.play-room)) .game-layout coords {
    color: var(--theme-board-coords);
    text-transform: none;
}

body:not(:has(.home-club)):not(:has(.play-room)) .game-layout cg-board square.last-move { background-color: rgba(217,154,69,.56); }
body:not(:has(.home-club)):not(:has(.play-room)) .game-layout cg-board square.selected { background-color: rgba(217,154,69,.7); }
body:not(:has(.home-club)):not(:has(.play-room)) .game-layout cg-board square.move-dest { background: radial-gradient(rgba(24,58,90,.34) 22%, transparent 23%); }
body:not(:has(.home-club)):not(:has(.play-room)) .game-layout cg-board square.oc.move-dest { background: radial-gradient(transparent 0 78%, rgba(24,58,90,.42) 79%); }
body:not(:has(.home-club)):not(:has(.play-room)) .game-layout cg-board square.check { background: radial-gradient(ellipse at center, rgba(196,56,50,.92) 0%, rgba(196,56,50,.34) 58%, transparent 72%); }

/* El analizador no usa .game-layout, asi que necesita su propia aplicacion
   del tablero azul del tema claro en vez del marron base de Chessground. */
html[data-theme="chessty-light"] .analysis-lab cg-board {
    background-color: var(--theme-board-light);
    background-image: conic-gradient(
        var(--theme-board-dark) 0 25%,
        var(--theme-board-light) 0 50%,
        var(--theme-board-dark) 0 75%,
        var(--theme-board-light) 0
    );
}

html[data-theme="chessty-light"] .analysis-lab cg-board square.last-move { background-color: rgba(217, 154, 69, .56); }
html[data-theme="chessty-light"] .analysis-lab cg-board square.selected { background-color: rgba(217, 154, 69, .7); }
html[data-theme="chessty-light"] .analysis-lab cg-board square.move-dest { background: radial-gradient(rgba(24, 58, 90, .34) 22%, transparent 23%); }
html[data-theme="chessty-light"] .analysis-lab cg-board square.move-dest:hover { background: rgba(217, 154, 69, .38); }
html[data-theme="chessty-light"] .analysis-lab cg-board square.oc.move-dest { background: radial-gradient(transparent 0 78%, rgba(24, 58, 90, .42) 79%); }

.workspace-page .player-bar {
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    color: var(--theme-title);
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    box-shadow: 0 8px 18px var(--theme-shadow);
}

.workspace-page .player-clock {
    color: var(--theme-title);
    background: var(--theme-surface-alt);
    font-variant-numeric: tabular-nums;
}

.workspace-page .move-list,
.workspace-page .move-rows {
    scrollbar-color: color-mix(in srgb, var(--theme-accent) 32%, transparent) transparent;
}

.engine-switch {
    min-height: 44px;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--theme-surface-alt);
}

.engine-switch input { width: 20px; height: 20px; accent-color: var(--accent-fill); }
.engine-score { color: var(--theme-title); font-variant-numeric: tabular-nums; }
.eval-bar { background: var(--theme-title); }

.bot-category,
.bot-category-body { border-color: var(--border); background: var(--theme-surface); }
.bot-category-header { color: var(--theme-title); background: var(--theme-surface-alt); }
.bot-item { color: var(--text); background: transparent; }
.bot-item:hover { background: var(--theme-surface-alt); }
.bot-item.is-selected {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent);
    background: var(--theme-accent-soft);
}
.bot-elo,
.bot-category-count { color: var(--text-muted); }

.turn-line,
.puzzle-status { color: var(--text); }
.puzzle-status { padding: .75rem; border-radius: 10px; background: var(--theme-surface-alt); }
.live-stats .stat-num { color: var(--theme-title); font-variant-numeric: tabular-nums; }

.puzzle-mode-page .page-header { max-width: 52rem; }
.puzzle-mode-page .rush-modes { gap: 1rem; }
.puzzle-mode-page .rush-mode {
    min-height: 158px;
    border-radius: 18px 18px 36px 18px;
    background: linear-gradient(145deg, var(--theme-surface), var(--theme-surface-alt));
}
.puzzle-mode-page .rush-mode:disabled { opacity: .72; filter: saturate(.75); }
.puzzle-mode-page .rush-clock { color: var(--accent-fill); font-family: "DM Serif Display", Georgia, serif; }
.puzzle-mode-page .rule-list li::before { background: var(--theme-gold); }

.community-page .dash { grid-template-columns: minmax(0,1fr) 280px; gap: 1.2rem; }
.community-page .dash-main { gap: 1.2rem; }
.community-page .empty { min-height: 180px; }
.community-page .live-stats { justify-content: flex-start; gap: 2rem; }

.watch-page { max-width: 60rem; }
.watch-page > .card { overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem); border-radius: 24px 24px 56px 24px; }
.watch-page .empty { min-height: 340px; border: 0; background: transparent; }
.watch-page .empty-text { max-width: 34rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1.35rem; color: #183a5a; }
.watch-games { display: grid; gap: .85rem; }
.watch-game-card {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(24, 58, 90, .06);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.watch-game-card:hover { transform: translateY(-2px); border-color: var(--accent-fill); box-shadow: 0 14px 28px rgba(24, 58, 90, .12); }
.watch-game-card:focus-visible { outline: 3px solid rgba(39, 112, 174, .35); outline-offset: 3px; }
.watch-game-live { grid-column: 1 / -1; color: var(--accent-fill); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.watch-game-live i { display: inline-block; width: .48rem; height: .48rem; margin-right: .36rem; border-radius: 50%; background: #47a870; box-shadow: 0 0 0 4px rgba(71, 168, 112, .13); }
.watch-players { display: flex; align-items: center; gap: .55rem; min-width: 0; font-size: 1.05rem; }
.watch-players strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-players span, .watch-game-meta { color: var(--theme-muted); }
.watch-game-meta { display: flex; gap: .7rem; font-size: .88rem; white-space: nowrap; }
.watch-game-action { color: var(--accent-fill); font-weight: 800; white-space: nowrap; }
@media (max-width: 620px) {
    .watch-game-card { grid-template-columns: 1fr; gap: .65rem; }
    .watch-game-live { grid-column: auto; }
    .watch-game-meta { order: 3; }
    .watch-game-action { order: 4; }
}

.profile-page .dash { gap: 1.2rem; }
.profile-page .profile-header-row { min-height: 88px; }
.profile-page .profile-username { color: #183a5a; font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.profile-page .home-stat { border: 1px solid var(--border); border-radius: 12px; background: #edf4f9; }
.profile-page .game-row { border-color: var(--border); }

.field input,
.field select,
.field textarea {
    min-height: 46px;
    border-color: var(--theme-border);
    color: var(--text);
    background: var(--theme-input);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--theme-faint); }

.custom-puzzle-workspace #id_fen {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .86rem;
}

.confirm-dialog {
    overscroll-behavior: contain;
    border-color: var(--theme-border);
    color: var(--text);
    background: var(--theme-surface);
    box-shadow: 0 28px 75px var(--theme-shadow);
}

.auth-page .auth-shell { min-height: calc(100dvh - 5.25rem); align-items: center; }
.auth-page .auth-card {
    overflow: hidden;
    border-radius: 22px 22px 48px 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 65px rgba(24,58,90,.14);
}
.auth-page .auth-title { color: #183a5a; font-family: "DM Serif Display", Georgia, serif; font-size: 2.15rem; font-weight: 400; }
.auth-page .btn-social { border: 1px solid var(--border); color: var(--text); background: #edf4f9; }
.auth-page .auth-alert-error { color: #9e302c; background: #fff0ee; }
.auth-page .auth-alert-success { color: #21653b; background: #eaf7ef; }

.home-club-kicker,
.home-section-number,
.home-rhythm-name,
.home-puzzle-topline > span { font-size: .75rem; }

.home-way-copy small { font-size: .78rem; }

@media (max-width: 1160px) and (min-width: 901px) {
    .workspace-page .game-layout,
    .bot-workspace .game-layout { grid-template-columns: minmax(0,1fr); max-width: 42rem; }
    .workspace-page .board-col,
    .bot-workspace .board-col { width: min(100%, calc(100dvh - 185px)); }
    .workspace-page .side-col { max-height: none; overflow: visible; }
}

@media (max-width: 900px) {
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 100;
        overflow: hidden;
        padding-top: max(.5rem, env(safe-area-inset-top));
        padding-inline: .65rem;
    }

    .logo { flex: 0 0 auto; }
    .logo-full { width: 135px; height: auto; }

    .side-nav {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .side-nav::-webkit-scrollbar { display: none; }
    .side-link { min-height: 44px; flex: 0 0 auto; }

    .content-page .page-header,
    .workspace-intro { margin-bottom: .9rem; }

    .workspace-intro { align-items: start; }
    .workspace-intro > p { display: none; }

    .workspace-page .game-layout,
    .bot-workspace .game-layout {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0,1fr);
    }

    .workspace-page .board-col,
    .bot-workspace .board-col,
    .workspace-page .board-frame {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .workspace-page .side-col {
        width: 100%;
        max-width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .community-page .dash { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 560px) {
    main:has(.workspace-page) { padding: .8rem .55rem 2rem; overflow-x: clip; }
    main:has(.content-page),
    .auth-page main { padding: 1rem .8rem 2rem; }

    .workspace-intro { padding-left: .75rem; }
    .workspace-intro h1 { font-size: 1.8rem; }

    .puzzle-nav-mobile {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .settings-tab { min-height: 44px; padding-inline: .85rem; }
    .workspace-page .board-frame { box-sizing: border-box; padding: 2px 2px 24px 25px; }
    .workspace-page coords { font-size: 11px; }
    .workspace-page coords.ranks { left: -20px; }
    .workspace-page coords.files { bottom: -20px; }

    .bot-workspace .player-bar { min-height: 46px; }
    .bot-workspace .bot-category-header,
    .bot-workspace .bot-item { min-height: 48px; }

    .content-page .page-title { font-size: 2.35rem; }
    .content-page .card,
    .workspace-page .card { padding: 1rem; border-radius: 16px; }
    .profile-header-row { align-items: flex-start; flex-direction: column; }
    .account-row { align-items: flex-start; flex-direction: column; }
    .auth-page .auth-shell { padding: .5rem 0; align-items: start; }
    .auth-page .auth-card { padding: 1.25rem; border-radius: 18px 18px 36px 18px; }
}

/* ==========================================================================
   Contra la maquina - estudio de rival
   ========================================================================== */
.bot-workspace .player-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.bot-workspace .player-meta {
    margin-top: .16rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .02em;
}

.bot-workspace .bot-board-avatar {
    overflow: hidden;
    border-color: rgba(47,102,173,.22);
    background: #dceaf4;
}

.bot-workspace .bot-board-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-studio {
    overflow: hidden;
    padding: 0 !important;
    border-radius: 20px 20px 38px 20px !important;
    background: rgba(255,255,255,.97) !important;
}

.bot-studio [hidden] { display: none !important; }

.bot-studio-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem .65rem;
    border-bottom: 1px solid rgba(24,58,90,.1);
}

.bot-studio-kicker {
    color: var(--accent-text);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.bot-studio-heading h2 {
    margin-top: .05rem;
    color: #183a5a;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: -.035em;
}

.bot-studio-step {
    color: rgba(47,102,173,.16);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 2.35rem;
    line-height: 1;
}

.bot-feature {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 104px minmax(0,1fr);
    min-height: 136px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(217,154,69,.24), transparent 7rem),
        linear-gradient(135deg, #e9f3fa, #f8fbfd 64%);
}

.bot-feature::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 150px;
    right: -72px;
    bottom: -96px;
    border: 18px solid rgba(47,102,173,.06);
    border-radius: 50%;
}

.bot-feature-portrait {
    align-self: end;
    width: 104px;
    height: 126px;
    overflow: hidden;
    border-radius: 0 24px 0 0;
    box-shadow: 8px 0 24px rgba(24,58,90,.12);
}

.bot-feature-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: opacity 140ms var(--ease-out), transform 220ms var(--ease-out);
}

.bot-feature-copy {
    align-self: center;
    min-width: 0;
    padding: .75rem .9rem .75rem .8rem;
}

.bot-feature-titleline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bot-feature-titleline h3 {
    overflow: hidden;
    color: #183a5a;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-country {
    min-width: 31px;
    padding: .16rem .34rem;
    border: 1px solid rgba(47,102,173,.2);
    border-radius: 999px;
    color: var(--accent-text);
    background: rgba(255,255,255,.72);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-align: center;
}

.bot-feature-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .3rem;
    color: var(--text-muted);
    font-size: .72rem;
}

.bot-feature-meta strong { color: var(--accent-text); font-variant-numeric: tabular-nums; }

.bot-quote {
    min-height: 2.9em;
    margin-top: .42rem;
    color: #314e66;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: .88rem;
    font-style: italic;
    line-height: 1.38;
    text-wrap: pretty;
}

.bot-setup-controls { padding: .65rem 1rem 0; }

.bot-studio .bot-accordion { gap: 0; }
.bot-studio .bot-category { overflow: visible; border: 0; background: transparent; }
.bot-studio .bot-category + .bot-category { margin-top: .4rem; border-top: 1px solid var(--border); }

.bot-studio .bot-category-header {
    min-height: 34px;
    padding: .2rem 0 .5rem;
    color: #183a5a;
    background: transparent;
    font-size: .78rem;
}

.bot-studio .bot-category-icon .icon { width: 16px; height: 16px; }
.bot-studio .bot-category-count { margin-left: auto; font-size: .72rem; }
.bot-studio .bot-category-caret { margin-left: .15rem; }

.bot-studio .bot-category-body {
    display: grid;
    grid-template-columns: repeat(5, minmax(55px,1fr));
    gap: .35rem;
    overflow-x: auto;
    padding: 0 0 .3rem;
    border: 0;
    background: transparent;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(47,102,173,.25) transparent;
}

.bot-studio .bot-item {
    position: relative;
    display: flex;
    min-width: 55px;
    min-height: 86px;
    flex-direction: column;
    gap: .28rem;
    padding: .3rem .18rem .35rem;
    border: 1px solid transparent;
    border-radius: 12px;
    text-align: center;
}

.bot-studio .bot-item:hover { background: #edf5fb; }

.bot-studio .bot-item.is-selected {
    border-color: #2f66ad;
    background: #dceaf6;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 5px 12px rgba(24,58,90,.1);
}

.bot-studio .bot-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 14px;
    background: #dceaf4;
    box-shadow: 0 4px 10px rgba(24,58,90,.14);
}

.bot-studio .bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-studio .bot-info { align-items: center; gap: 0; line-height: 1.1; }
.bot-studio .bot-name { max-width: 100%; overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.bot-studio .bot-elo { font-size: .68rem; }

.bot-selected-check {
    position: absolute;
    display: none;
    width: 17px;
    height: 17px;
    top: 2px;
    right: 2px;
    padding: 2px;
    border-radius: 50%;
    color: #fff;
    background: #2f66ad;
    box-shadow: 0 2px 5px rgba(24,58,90,.2);
}

.bot-item.is-selected .bot-selected-check { display: block; }

.bot-color-field {
    margin-top: .6rem;
    padding: .55rem 0 .1rem;
    border: 0;
    border-top: 1px solid rgba(24,58,90,.11);
}

.bot-color-field legend {
    float: left;
    width: 86px;
    padding-top: .5rem;
    color: #183a5a;
    font-size: .76rem;
    font-weight: 800;
}

.bot-color-field .color-pick {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .35rem;
    margin: 0 0 0 86px;
}

.bot-color-field .color-icon-btn {
    width: auto;
    min-width: 0;
    height: 50px;
    flex-direction: row;
    gap: .28rem;
    border: 1px solid rgba(24,58,90,.13);
    border-radius: 10px;
    color: var(--text-muted);
    background: #f7fafc;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 750;
}

.bot-color-field .color-icon-btn:hover { border-color: rgba(47,102,173,.35); background: #edf5fb; }
.bot-color-field .color-icon-btn.is-selected { border-color: #2f66ad; color: #183a5a; background: #dceaf6; box-shadow: inset 0 0 0 1px rgba(47,102,173,.08); }

.bot-color-piece,
.bot-color-random { width: 20px; height: 20px; flex: 0 0 auto; }
.bot-color-piece { stroke: #183a5a; stroke-width: 1; }
.bot-color-piece-white { fill: #fff; filter: drop-shadow(0 1px 1px rgba(24,58,90,.4)); }
.bot-color-piece-black { fill: #183a5a; }
.bot-color-random { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.bot-studio-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .65rem 1rem 1rem;
}

.bot-status {
    min-height: 1.35rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.35;
    text-align: center;
}

.bot-start {
    min-height: 48px;
    gap: .3rem;
    border-radius: 11px;
    box-shadow: 0 5px 0 var(--accent-fill-edge), 0 11px 20px rgba(47,102,173,.16);
}

.bot-start strong { font-weight: 850; }

.bot-match {
    padding: .7rem 1rem 0;
    animation: fade-in 180ms var(--ease-out) both;
}

.bot-match-heading {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .45rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(24,58,90,.11);
}

.bot-match-heading h3 { color: #183a5a; font-size: .82rem; }
.bot-match-heading > span:last-child { color: var(--text-muted); font-size: .68rem; }
.bot-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #d99a45; box-shadow: 0 0 0 4px rgba(217,154,69,.15); }
.bot-match-label { margin: .55rem 0 .25rem; color: var(--text-muted); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bot-match .move-list { min-height: 86px; max-height: 154px; border-radius: 9px; background: #f4f8fb; }
.bot-match .empty-text { padding: 1.8rem .8rem; text-align: center; }
.bot-match .move-row { border-radius: 0; font-size: .78rem; }

.side-col.is-playing .bot-studio-heading { display: none; }
.side-col.is-playing .bot-feature { grid-template-columns: 78px minmax(0,1fr); min-height: 98px; }
.side-col.is-playing .bot-feature-portrait { width: 78px; height: 92px; }
.side-col.is-playing .bot-feature-titleline h3 { font-size: 1.35rem; }
.side-col.is-playing .bot-quote { display: none; }
.side-col.is-playing .bot-feature-copy { padding-block: .55rem; }

@media (max-width: 900px) {
    .bot-workspace .side-col { max-width: 42rem; }
    .bot-studio .bot-category-body { grid-template-columns: repeat(5,minmax(72px,1fr)); }
    .bot-studio .bot-item { min-width: 72px; }
}

@media (max-width: 560px) {
    .bot-studio { border-radius: 16px 16px 30px 16px !important; }
    .bot-feature { grid-template-columns: 94px minmax(0,1fr); min-height: 126px; }
    .bot-feature-portrait { width: 94px; height: 118px; }
    .bot-feature-titleline h3 { font-size: 1.48rem; }
    .bot-quote { font-size: .82rem; }
    .bot-setup-controls { padding-inline: .8rem; }
    .bot-studio-actions,
    .bot-match { padding-inline: .8rem; }
    .bot-studio .bot-category-body { grid-template-columns: repeat(5,72px); margin-right: -.8rem; padding-right: .8rem; }
    .bot-color-field legend { float: none; display: block; width: auto; padding: 0 0 .45rem; }
    .bot-color-field .color-pick { margin-left: 0; }
    .bot-color-field .color-icon-btn { min-height: 52px; flex-direction: column; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bot-feature-portrait img,
    .bot-match { transition: none; animation: none; }
}

/* Vestíbulo y mesa dedicada contra bots. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.bot-lobby-workspace {
    min-height: calc(100dvh - 5rem);
}

.bot-lobby-intro {
    width: min(100%, 42rem);
}

.bot-lobby-shell {
    width: min(100%, 42rem);
    margin-inline: auto;
}

.bot-lobby-shell .bot-studio {
    box-shadow: 0 24px 60px rgba(24,58,90,.14);
}

.bot-lobby-shell .bot-feature {
    grid-template-columns: 132px minmax(0,1fr);
    min-height: 164px;
}

.bot-lobby-shell .bot-feature-portrait {
    width: 132px;
    height: 154px;
}

.bot-lobby-shell .bot-feature-titleline h3 {
    font-size: 1.95rem;
}

.bot-lobby-shell .bot-category {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.bot-lobby-shell .bot-item,
.bot-lobby-shell .color-icon-btn {
    cursor: pointer;
    user-select: none;
}

.bot-lobby-shell .bot-item:has(input:checked) {
    border-color: #2f66ad;
    background: #dceaf6;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 5px 12px rgba(24,58,90,.1);
}

.bot-lobby-shell .bot-item:has(input:checked) .bot-selected-check {
    display: block;
}

.bot-lobby-shell .bot-item:has(input:focus-visible),
.bot-lobby-shell .color-icon-btn:has(input:focus-visible) {
    outline: 3px solid rgba(47,102,173,.42);
    outline-offset: 3px;
}

.bot-lobby-shell .color-icon-btn:has(input:checked) {
    border-color: #2f66ad;
    color: #183a5a;
    background: #dceaf6;
    box-shadow: inset 0 0 0 1px rgba(47,102,173,.08);
}

.bot-game-workspace .game-layout {
    grid-template-columns: minmax(0, min(40rem, calc(100dvh - 205px))) minmax(310px, 360px);
}

.bot-game-workspace .board-col {
    width: min(100%, min(40rem, calc(100dvh - 205px)));
}

.bot-game-intro {
    margin-bottom: .8rem;
}

.bot-game-intro h1 {
    font-size: clamp(1.7rem, 2.5vw, 2.25rem);
}

.bot-game-workspace .player-side {
    margin-left: auto;
    padding: .32rem .55rem;
    border: 1px solid rgba(47,102,173,.15);
    border-radius: 999px;
    color: var(--accent-text);
    background: #edf4f9;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bot-game-panel {
    overflow: visible !important;
    padding: 1px !important;
}

.bot-match-card {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0 !important;
    border-radius: 20px 20px 38px 20px !important;
    background: rgba(255,255,255,.97) !important;
}

.bot-match-opponent {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) auto;
    align-items: center;
    gap: .8rem;
    overflow: hidden;
    padding: .8rem 1rem;
    background:
        radial-gradient(circle at 8% 14%, rgba(217,154,69,.23), transparent 6rem),
        linear-gradient(135deg, #e9f3fa, #f8fbfd 70%);
}

.bot-match-opponent::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 110px;
    height: 110px;
    right: -62px;
    bottom: -72px;
    border: 14px solid rgba(47,102,173,.06);
    border-radius: 50%;
}

.bot-match-opponent img {
    width: 76px;
    height: 86px;
    object-fit: cover;
    object-position: center 18%;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 14px 14px 24px 14px;
    box-shadow: 0 9px 20px rgba(24,58,90,.15);
}

.bot-match-opponent h2 {
    color: #183a5a;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1;
}

.bot-match-opponent div > p:last-child {
    margin-top: .3rem;
    color: var(--text-muted);
    font-size: .72rem;
}

.bot-game-state {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .65rem;
    min-height: 54px;
    margin: .9rem 1rem .7rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(47,102,173,.12);
    border-radius: 11px;
    color: #294b68;
    background: #edf4f9;
    font-size: .82rem;
    font-weight: 700;
}

.bot-game-history {
    min-height: 0;
    padding: 0 1rem;
}

.bot-game-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

.bot-game-section-title h3 {
    color: #183a5a;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bot-game-section-title span {
    color: var(--text-muted);
    font-size: .7rem;
}

.bot-game-history .move-list {
    height: clamp(118px, 22dvh, 190px);
    overflow-y: auto;
    border: 1px solid rgba(24,58,90,.08);
    border-radius: 11px;
    background: #f4f8fb;
}

.bot-game-history .move-row {
    font-size: .8rem;
}

.bot-game-history .empty-text {
    display: grid;
    min-height: 116px;
    place-items: center;
    padding: 1rem;
    text-align: center;
}

.bot-game-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding: .8rem 1rem 1rem;
}

.bot-game-actions .btn {
    min-width: 0;
    min-height: 46px;
    padding-inline: .65rem;
    gap: .4rem;
    font-size: .78rem;
}

.bot-game-actions .icon {
    width: 18px;
    height: 18px;
}

@media (max-width: 1160px) and (min-width: 901px) {
    .bot-game-workspace .game-layout {
        grid-template-columns: minmax(0,1fr);
        max-width: 42rem;
    }

    .bot-game-workspace .board-col {
        width: min(100%, calc(100dvh - 185px));
    }
}

@media (max-width: 900px) {
    .bot-game-workspace .game-layout {
        grid-template-columns: minmax(0,1fr);
    }

    .bot-game-workspace .board-col {
        width: 100%;
    }

    .bot-game-panel {
        max-width: 42rem;
    }
}

@media (max-width: 560px) {
    .bot-lobby-intro > p {
        display: none;
    }

    .bot-lobby-shell .bot-feature {
        grid-template-columns: 94px minmax(0,1fr);
        min-height: 126px;
    }

    .bot-lobby-shell .bot-feature-portrait {
        width: 94px;
        height: 118px;
    }

    .bot-lobby-shell .bot-feature-titleline h3 {
        font-size: 1.48rem;
    }

    .bot-game-intro {
        margin-bottom: .65rem;
    }

    .bot-game-intro h1 {
        font-size: 1.65rem;
    }

    .bot-match-opponent {
        grid-template-columns: 68px minmax(0,1fr) auto;
        padding-inline: .8rem;
    }

    .bot-match-opponent img {
        width: 68px;
        height: 78px;
    }

    .bot-game-actions {
        padding-inline: .8rem;
    }

    .bot-game-actions .btn {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bot-lobby-shell .bot-feature-portrait img {
        transition: none;
    }
}

/* ==========================================================================
   Vestíbulo de bots - sala editorial de rivales
   ========================================================================== */
main:has(.bot-lobby-workspace) {
    position: relative;
    overflow-x: clip;
    padding-block: clamp(.75rem, 1.8dvh, 1.25rem);
}

.bot-lobby-workspace {
    position: relative;
    isolation: isolate;
    min-height: 0;
    max-width: 100%;
}

.bot-lobby-glow {
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.bot-lobby-glow-one {
    width: 30rem;
    height: 30rem;
    top: -14rem;
    right: -11rem;
    background: radial-gradient(circle, rgba(85,151,211,.15), transparent 68%);
}

.bot-lobby-glow-two {
    width: 22rem;
    height: 22rem;
    bottom: -11rem;
    left: 8%;
    background: radial-gradient(circle, rgba(217,154,69,.12), transparent 68%);
}

.bot-lobby-intro {
    width: min(100%, 76rem);
    margin-bottom: clamp(.7rem, 1.5dvh, 1rem);
    padding-left: 1rem;
}

.bot-lobby-intro h1 {
    max-width: 36rem;
    font-size: clamp(2rem, 3.2vw, 2.85rem);
    line-height: .96;
}

.bot-lobby-intro-note {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    border: 1px solid rgba(47,102,173,.13);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(255,255,255,.58);
    font-size: .72rem;
    line-height: 1.35;
    backdrop-filter: blur(10px);
}

.bot-lobby-intro-note svg {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    fill: rgba(47,102,173,.08);
    stroke: var(--accent-text);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bot-lobby-intro-note strong { color: #294b68; }

.bot-lobby-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(330px, .95fr);
    align-items: stretch;
    gap: clamp(.8rem, 1.5vw, 1.15rem);
    width: min(100%, 76rem);
    margin-inline: auto;
}

.bot-roster,
.bot-brief {
    min-width: 0;
    border: 1px solid rgba(24,58,90,.12);
    background: rgba(255,255,255,.9);
    box-shadow: 0 18px 50px rgba(24,58,90,.1);
    backdrop-filter: blur(14px);
}

.bot-roster {
    padding: clamp(.85rem, 1.5vw, 1.15rem);
    border-radius: 22px 22px 22px 44px;
}

.bot-brief {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border-radius: 22px 22px 44px 22px;
}

.bot-roster-heading,
.bot-brief-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bot-roster-heading > div,
.bot-brief-topline > div {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.bot-roster-heading > p {
    max-width: 16rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.4;
    text-align: right;
}

.bot-step-number {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(47,102,173,.16);
    border-radius: 10px;
    color: var(--accent-text);
    background: #edf5fb;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.bot-section-kicker {
    color: var(--accent-text);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.bot-roster-heading h2,
.bot-brief-topline h2 {
    margin-top: .06rem;
    color: #183a5a;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1;
}

.bot-roster-groups { margin-top: .8rem; }

.bot-lobby-shell .bot-category {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.bot-lobby-shell .bot-category + .bot-category {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(24,58,90,.1);
}

.bot-lobby-shell .bot-category > legend {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .55rem;
    padding: 0;
    color: #183a5a;
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bot-lobby-shell .bot-category > legend small {
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
}

.bot-lobby-shell .bot-category-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .55rem;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
}

.bot-lobby-shell .bot-item {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0,1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: .35rem .65rem;
    min-width: 0;
    min-height: 160px;
    padding: .7rem;
    overflow: hidden;
    border: 1px solid rgba(24,58,90,.11);
    border-radius: 15px;
    color: var(--text);
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(237,245,251,.68));
    box-shadow: 0 5px 15px rgba(24,58,90,.055);
    cursor: pointer;
    isolation: isolate;
    text-align: left;
    transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
    animation: bot-card-arrive 420ms var(--ease-out) both;
}

.bot-lobby-shell .bot-item:nth-child(2) { animation-delay: 45ms; }
.bot-lobby-shell .bot-item:nth-child(3) { animation-delay: 90ms; }
.bot-lobby-shell .bot-item:nth-child(4) { animation-delay: 135ms; }
.bot-lobby-shell .bot-item:nth-child(5) { animation-delay: 180ms; }

.bot-lobby-shell .bot-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 86px;
    height: 86px;
    left: -42px;
    bottom: -52px;
    border: 12px solid rgba(47,102,173,.045);
    border-radius: 50%;
}

.bot-lobby-shell .bot-item:hover {
    z-index: 1;
    transform: translateY(-3px);
    border-color: rgba(47,102,173,.28);
    background: linear-gradient(145deg, #fff, #edf5fb);
    box-shadow: 0 12px 24px rgba(24,58,90,.11);
}

.bot-lobby-shell .bot-item:active { transform: translateY(-1px) scale(.992); }

.bot-lobby-shell .bot-item.is-selected,
.bot-lobby-shell .bot-item:has(input:checked) {
    transform: translateY(-2px);
    border-color: #2f66ad;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(220,234,246,.92));
    box-shadow: inset 0 0 0 1px rgba(47,102,173,.08), 0 12px 25px rgba(47,102,173,.14);
}

.bot-lobby-shell .bot-item:has(input:focus-visible) {
    outline: 3px solid rgba(47,102,173,.42);
    outline-offset: 3px;
}

.bot-card-number {
    position: absolute;
    top: .45rem;
    right: .55rem;
    color: rgba(24,58,90,.14);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.45rem;
    line-height: 1;
}

.bot-lobby-shell .bot-avatar {
    grid-row: 1 / 3;
    width: 78px;
    height: 98px;
    align-self: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 14px 14px 24px 14px;
    background: #dceaf4;
    box-shadow: 0 7px 16px rgba(24,58,90,.14);
}

.bot-lobby-shell .bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform 260ms var(--ease-out);
}

.bot-lobby-shell .bot-item:hover .bot-avatar img { transform: scale(1.035); }

.bot-lobby-shell .bot-info {
    display: flex;
    min-width: 0;
    align-self: end;
    align-items: flex-start;
    flex-direction: column;
    gap: .22rem;
}

.bot-lobby-shell .bot-name {
    max-width: 100%;
    overflow: hidden;
    color: #183a5a;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-card-meta {
    display: flex;
    align-items: center;
    gap: .28rem;
    color: var(--text-muted);
    font-size: .67rem;
    font-variant-numeric: tabular-nums;
}

.bot-card-meta strong { color: var(--accent-text); font-weight: 850; }

.bot-personality {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding: .12rem .38rem;
    border: 1px solid rgba(217,154,69,.24);
    border-radius: 999px;
    color: #805a28;
    background: rgba(249,233,207,.58);
    font-size: .63rem;
    font-weight: 750;
}

.bot-selected-state {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: .22rem;
    min-height: 20px;
    color: var(--accent-text);
    font-size: .62rem;
    font-weight: 850;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.bot-selected-state svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bot-item.is-selected .bot-selected-state,
.bot-item:has(input:checked) .bot-selected-state {
    opacity: 1;
    transform: none;
}

.bot-brief-topline {
    padding: .85rem 1rem .7rem;
    border-bottom: 1px solid rgba(24,58,90,.09);
}

.bot-brief-ready {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #315c45;
    font-size: .62rem;
    font-weight: 800;
}

.bot-brief-ready i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55a275;
    box-shadow: 0 0 0 4px rgba(85,162,117,.12);
}

.bot-brief .bot-feature {
    display: grid;
    grid-template-columns: 104px minmax(0,1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: .35rem .8rem;
    min-height: 0;
    padding: .8rem 1rem .72rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 22%, rgba(217,154,69,.2), transparent 7rem),
        linear-gradient(135deg, #e9f3fa, #f8fbfd 70%);
}

.bot-brief .bot-feature::after {
    width: 120px;
    height: 120px;
    right: -66px;
    bottom: -76px;
    border-width: 14px;
}

.bot-brief .bot-feature-portrait {
    position: relative;
    grid-row: 1 / 3;
    width: 104px;
    height: 126px;
    align-self: center;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

.bot-portrait-ring {
    position: absolute;
    inset: -5px 7px 5px -5px;
    border: 1px solid rgba(217,154,69,.42);
    border-radius: 17px 17px 31px 17px;
    transform: rotate(-3deg);
}

.bot-brief .bot-feature-portrait img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 16px 16px 30px 16px;
    box-shadow: 0 10px 24px rgba(24,58,90,.17);
}

.bot-brief .bot-feature-portrait img.is-swapping {
    animation: bot-portrait-swap 240ms var(--ease-out) both;
}

.bot-feature-country {
    position: absolute;
    right: -5px;
    bottom: 9px;
    z-index: 2;
    min-width: 30px;
    padding: .2rem .38rem;
    border: 2px solid #fff;
    border-radius: 999px;
    color: var(--accent-text);
    background: #edf5fb;
    box-shadow: 0 4px 10px rgba(24,58,90,.13);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
}

.bot-brief .bot-feature-copy {
    align-self: end;
    padding: 0;
}

.bot-feature-overline {
    color: var(--accent-text);
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bot-brief .bot-feature-copy h3 {
    margin-top: .05rem;
    color: #183a5a;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1;
}

.bot-brief .bot-feature-meta {
    margin-top: .25rem;
    font-size: .68rem;
}

.bot-brief blockquote {
    align-self: start;
    color: #294b68;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: .78rem;
    font-style: italic;
    line-height: 1.3;
}

.bot-feature-preview {
    grid-column: 1 / -1;
    min-height: 2.5em;
    margin-top: .2rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(24,58,90,.09);
    color: var(--text-muted);
    font-size: .68rem;
    line-height: 1.4;
}

.bot-brief .bot-color-field {
    margin: 0;
    padding: .7rem 1rem .55rem;
    border: 0;
    border-top: 1px solid rgba(24,58,90,.09);
}

.bot-brief .bot-color-field legend {
    float: none;
    display: block;
    width: auto;
    padding: 0 0 .45rem;
    color: #183a5a;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bot-brief .bot-color-field .color-pick {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .4rem;
    margin: 0;
}

.bot-brief .color-icon-btn {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 58px;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .12rem;
    padding: .35rem .2rem;
    border: 1px solid rgba(24,58,90,.12);
    border-radius: 11px;
    color: var(--text-muted);
    background: #f7fafc;
    cursor: pointer;
    text-align: center;
    transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}

.bot-brief .color-icon-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(47,102,173,.32);
    background: #edf5fb;
}

.bot-brief .color-icon-btn:has(input:checked),
.bot-brief .color-icon-btn.is-selected {
    border-color: #2f66ad;
    color: #183a5a;
    background: #dceaf6;
    box-shadow: inset 0 0 0 1px rgba(47,102,173,.08), 0 5px 12px rgba(24,58,90,.09);
}

.bot-brief .color-icon-btn:has(input:focus-visible) {
    outline: 3px solid rgba(47,102,173,.42);
    outline-offset: 2px;
}

.bot-brief .color-icon-btn > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.08;
}

.bot-brief .color-icon-btn strong { font-size: .65rem; }
.bot-brief .color-icon-btn small { margin-top: .1rem; color: var(--text-muted); font-size: .55rem; font-weight: 650; }
.bot-brief .bot-color-piece,
.bot-brief .bot-color-random { width: 18px; height: 18px; }

.bot-color-note {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    color: var(--text-muted);
    font-size: .59rem;
    line-height: 1.3;
}

.bot-color-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.bot-brief .bot-studio-actions {
    gap: .35rem;
    margin-top: auto;
    padding: .65rem 1rem .75rem;
    border-top: 1px solid rgba(24,58,90,.09);
}

.bot-brief .bot-start {
    min-height: 60px;
    justify-content: space-between;
    padding: .55rem .65rem .55rem 1rem;
    border-radius: 13px;
    text-align: left;
}

.bot-start-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .05rem;
}

.bot-start-copy small {
    opacity: .78;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bot-start-copy strong {
    overflow: hidden;
    font-size: .87rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-brief .bot-start > svg {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 7px;
    border-radius: 10px;
    background: rgba(255,255,255,.14);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms var(--ease-out);
}

.bot-brief .bot-start:hover > svg { transform: translateX(3px); }
.bot-brief .bot-start[aria-busy="true"] > svg { animation: bot-arrow-wait 700ms ease-in-out infinite alternate; }

.bot-brief .bot-status {
    min-height: 0;
    color: var(--text-muted);
    font-size: .59rem;
}

@keyframes bot-card-arrive {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

@keyframes bot-portrait-swap {
    from { opacity: .35; transform: scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes bot-arrow-wait {
    from { transform: translateX(0); }
    to { transform: translateX(4px); }
}

@media (max-width: 1050px) {
    .bot-lobby-shell { grid-template-columns: minmax(0,1.45fr) minmax(315px,.95fr); }
    .bot-lobby-shell .bot-category-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .bot-roster-heading > p { display: none; }
}

@media (max-width: 900px) {
    main:has(.bot-lobby-workspace) { padding-top: .8rem; }
    .bot-lobby-shell { grid-template-columns: minmax(0,1fr); width: min(100%,42rem); }
    .bot-lobby-intro { width: min(100%,42rem); }
    .bot-lobby-shell .bot-category-body { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .bot-lobby-shell .bot-item { min-height: 148px; }
    .bot-brief .bot-feature { grid-template-columns: 122px minmax(0,1fr); }
    .bot-brief .bot-feature-portrait { width: 122px; height: 142px; }
}

@media (max-width: 620px) {
    .bot-lobby-intro-note { display: none; }
    .bot-lobby-shell .bot-category-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .bot-roster { padding: .8rem; border-radius: 18px 18px 18px 34px; }
    .bot-brief { border-radius: 18px 18px 34px 18px; }
}

@media (max-width: 430px) {
    main:has(.bot-lobby-workspace) { padding: .7rem .5rem 1.5rem; }
    .bot-lobby-intro { margin-bottom: .65rem; padding-left: .7rem; }
    .bot-lobby-intro h1 { max-width: 20rem; font-size: 1.9rem; }
    .bot-roster-heading h2,
    .bot-brief-topline h2 { font-size: 1.25rem; }
    .bot-step-number { width: 31px; height: 31px; }
    .bot-lobby-shell .bot-category-body { gap: .45rem; }
    .bot-lobby-shell .bot-item {
        grid-template-columns: 54px minmax(0,1fr);
        min-height: 112px;
        gap: .25rem .48rem;
        padding: .55rem;
        border-radius: 13px;
    }
    .bot-card-number { display: none; }
    .bot-lobby-shell .bot-avatar { width: 54px; height: 70px; border-radius: 12px 12px 20px 12px; }
    .bot-lobby-shell .bot-name { max-width: 100%; font-size: 1.02rem; }
    .bot-card-meta { gap: .2rem; font-size: .57rem; }
    .bot-personality { min-height: 18px; padding-inline: .3rem; font-size: .54rem; }
    .bot-selected-state { font-size: .54rem; }
    .bot-brief-topline { padding-inline: .8rem; }
    .bot-brief-ready { font-size: .57rem; }
    .bot-brief .bot-feature { grid-template-columns: 94px minmax(0,1fr); padding-inline: .8rem; }
    .bot-brief .bot-feature-portrait { width: 94px; height: 116px; }
    .bot-brief .bot-feature-copy h3 { font-size: 1.55rem; }
    .bot-brief blockquote { font-size: .72rem; }
    .bot-brief .bot-color-field,
    .bot-brief .bot-studio-actions { padding-inline: .8rem; }
    .bot-brief .color-icon-btn { min-height: 62px; }
    .bot-feature-preview { font-size: .65rem; }
    .bot-brief .bot-start { min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
    .bot-lobby-shell .bot-item,
    .bot-brief .bot-feature-portrait img.is-swapping,
    .bot-brief .bot-start[aria-busy="true"] > svg {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Preferencias de interfaz
   ========================================================================== */
.profile-edit-page:has(.interface-settings) .settings-panels {
    max-width: 58rem;
}

.interface-settings {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 94% 0, rgba(122, 177, 234, 0.16), transparent 18rem),
        var(--bg-elevated);
}

.interface-settings::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 7rem;
    height: 5px;
    border-radius: 0 0 0 5px;
    background: linear-gradient(90deg, var(--theme-gold), var(--accent-fill));
}

.interface-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.settings-eyebrow {
    margin: 0 0 0.45rem;
    color: var(--accent-text);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.interface-settings-heading .card-title {
    margin-bottom: 0.55rem;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.interface-settings-heading .card-note {
    max-width: 37rem;
}

.interface-heading-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    padding: 9px;
    border: 1px solid rgba(47, 102, 173, 0.18);
    border-radius: 15px;
    color: var(--accent-fill);
    background: var(--accent-soft);
}

.theme-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.theme-option {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.theme-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.theme-option-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.1rem, 3vw, 2rem);
    align-items: center;
    height: 100%;
    min-height: 24rem;
    padding: clamp(1rem, 2.5vw, 1.45rem);
    border: 2px solid var(--border);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 28px rgba(24, 58, 90, 0.07);
    transition:
        border-color 150ms var(--ease-out),
        box-shadow 150ms var(--ease-out),
        transform 150ms var(--ease-out);
}

.theme-option:hover .theme-option-visual {
    border-color: rgba(47, 102, 173, 0.44);
    box-shadow: 0 14px 34px rgba(24, 58, 90, 0.11);
    transform: translateY(-2px);
}

.theme-option > input:focus-visible + .theme-option-visual {
    outline: 3px solid rgba(47, 102, 173, 0.28);
    outline-offset: 3px;
}

.theme-option > input:checked + .theme-option-visual {
    border-color: var(--accent-fill);
    background:
        linear-gradient(135deg, rgba(47, 102, 173, 0.055), transparent 55%),
        var(--bg-elevated);
    box-shadow:
        0 0 0 1px var(--accent-fill),
        0 15px 38px rgba(47, 102, 173, 0.14);
}

.theme-preview {
    --preview-page: #f3f5f2;
    --preview-sidebar: #e8f0f7;
    --preview-surface: #ffffff;
    --preview-text: #183a5a;
    --preview-muted: rgba(24, 58, 90, 0.14);
    --preview-accent: #2f66ad;
    --preview-board-light: #f1d5ad;
    --preview-board-dark: #6f9fc6;
    display: grid;
    grid-template-columns: 27% 73%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(24, 58, 90, 0.17);
    border-radius: 13px;
    background: var(--preview-page);
    box-shadow: 0 13px 28px rgba(24, 58, 90, 0.15);
}

.theme-preview[data-preview-theme="chessty-arena"] {
    --preview-page: #292d2b;
    --preview-sidebar: #222624;
    --preview-surface: #363b37;
    --preview-text: #f0eee8;
    --preview-muted: rgba(240, 238, 232, 0.17);
    --preview-accent: #5f9b63;
    --preview-board-light: #e8d6b3;
    --preview-board-dark: #6b8f71;
}

.theme-preview-sidebar {
    display: flex;
    flex-direction: column;
    gap: 9%;
    padding: 12% 14%;
    background: var(--preview-sidebar);
    box-shadow: 3px 0 9px rgba(24, 58, 90, 0.08);
}

.theme-preview-sidebar > span:not(.theme-preview-logo) {
    width: 85%;
    height: 7%;
    border-radius: 999px;
    background: var(--preview-muted);
}

.theme-preview-sidebar > span:nth-child(3) {
    width: 100%;
    background: color-mix(in srgb, var(--preview-accent) 55%, transparent);
}

.theme-preview-logo {
    display: grid;
    place-items: center;
    width: 36%;
    aspect-ratio: 1;
    margin-bottom: 8%;
    border-radius: 35% 35% 48% 35%;
    color: #fff;
    background: var(--preview-accent);
    font-size: clamp(0.35rem, 1vw, 0.7rem);
    font-weight: 900;
}

.theme-preview-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 5%;
}

.theme-preview-topbar {
    width: 43%;
    height: 6%;
    margin-bottom: 7%;
    border-radius: 999px;
    background: var(--preview-text);
    opacity: 0.76;
}

.theme-preview-content {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 7%;
    flex: 1;
}

.theme-preview-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    align-self: start;
    aspect-ratio: 1;
    border-radius: 5px;
}

.theme-preview-board i:nth-child(odd) { background: var(--preview-board-light); }
.theme-preview-board i:nth-child(even) { background: var(--preview-board-dark); }

.theme-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 9%;
    padding: 12%;
    border: 1px solid var(--preview-muted);
    border-radius: 7px;
    background: var(--preview-surface);
}

.theme-preview-panel i {
    width: 100%;
    height: 7%;
    border-radius: 99px;
    background: var(--preview-muted);
}

.theme-preview-panel i:nth-child(2) { width: 72%; }

.theme-preview-panel b {
    width: 100%;
    height: 18%;
    margin-top: auto;
    border-radius: 5px;
    background: var(--preview-accent);
}

.theme-option-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.theme-option-title-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.theme-option-title-row strong {
    color: var(--text);
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    letter-spacing: -0.025em;
}

.theme-selected-badge {
    display: none;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.55rem;
    border-radius: 999px;
    color: var(--accent-text);
    background: var(--accent-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

.theme-selected-badge svg {
    width: 15px;
    height: 15px;
}

.theme-option > input:checked + .theme-option-visual .theme-selected-badge {
    display: inline-flex;
}

.theme-option-description {
    margin-top: 0.65rem;
    color: var(--text-muted);
    font-size: 0.93rem;
    line-height: 1.55;
}

.theme-palette {
    display: flex;
    gap: 0.45rem;
    margin-top: 1.2rem;
}

.theme-palette i {
    width: 27px;
    height: 27px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px rgba(24, 58, 90, 0.18);
}

.interface-settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.35rem;
}

.future-themes-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-faint);
    font-size: 0.84rem;
}

.future-themes-note svg {
    width: 18px;
    height: 18px;
    color: var(--theme-gold);
}

.interface-settings-footer .btn {
    min-height: 46px;
}

@media (max-width: 700px) {
    .interface-settings {
        padding: 1.15rem;
    }

    .interface-heading-icon {
        display: none;
    }

    .theme-picker { grid-template-columns: minmax(0, 1fr); }
    .theme-option-visual { min-height: 0; }

    .theme-preview {
        width: 100%;
    }

    .interface-settings-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .interface-settings-footer .btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .theme-option-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .theme-selected-badge {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-option-visual {
        transition: none;
    }
}

/* ==========================================================================
   Chessty Arena - club de competición cálido
   Todas las adaptaciones quedan acotadas al atributo del servidor para que
   el tema claro conserve sus valores y no haya un flash al cargar.
   ========================================================================== */
html[data-theme="chessty-arena"] body {
    background:
        radial-gradient(circle at 78% 2%, rgba(95, 155, 99, 0.13), transparent 31rem),
        linear-gradient(135deg, rgba(240, 238, 232, 0.035), transparent 52%),
        var(--theme-page);
}

html[data-theme="chessty-arena"] .sidebar,
html[data-theme="chessty-arena"] body:has(.home-club) .sidebar,
html[data-theme="chessty-arena"] body:has(.play-room) .sidebar,
html[data-theme="chessty-arena"] .auth-page .sidebar {
    border-color: var(--theme-border);
    background:
        linear-gradient(180deg, rgba(240, 238, 232, 0.035), transparent 30%),
        var(--theme-sidebar);
    box-shadow: 9px 0 34px rgba(10, 14, 11, 0.3);
}

html[data-theme="chessty-arena"] .logo-full {
    filter: brightness(1.16) saturate(0.75) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.28));
}

html[data-theme="chessty-arena"] .side-link:hover,
html[data-theme="chessty-arena"] .side-sublink:hover,
html[data-theme="chessty-arena"] body:has(.home-club) .side-link:hover,
html[data-theme="chessty-arena"] body:has(.play-room) .side-link:hover {
    color: var(--theme-text);
    background: rgba(240, 238, 232, 0.07);
}

html[data-theme="chessty-arena"] .side-link.is-active {
    border-color: rgba(145, 200, 149, 0.24);
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

html[data-theme="chessty-arena"] .side-submenu,
html[data-theme="chessty-arena"] body:has(.home-club) .side-submenu,
html[data-theme="chessty-arena"] body:has(.play-room) .side-submenu,
html[data-theme="chessty-arena"] .auth-page .side-submenu {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: #363b37;
    box-shadow: 0 18px 44px rgba(8, 12, 9, 0.42);
}

html[data-theme="chessty-arena"] .btn-ghost,
html[data-theme="chessty-arena"] body:has(.home-club) .btn-ghost,
html[data-theme="chessty-arena"] body:has(.play-room) .btn-ghost,
html[data-theme="chessty-arena"] .auth-page .btn-ghost {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    box-shadow: 0 4px 0 #202522;
}

html[data-theme="chessty-arena"] .btn-ghost:hover,
html[data-theme="chessty-arena"] .auth-page .btn-ghost:hover {
    background: #485049;
}

html[data-theme="chessty-arena"] .content-page .page-title,
html[data-theme="chessty-arena"] .workspace-intro h1,
html[data-theme="chessty-arena"] .content-page .card-title,
html[data-theme="chessty-arena"] .workspace-page .card-title,
html[data-theme="chessty-arena"] .profile-page .profile-username,
html[data-theme="chessty-arena"] .watch-page .empty-text {
    color: var(--theme-title);
}

html[data-theme="chessty-arena"] .content-page .card,
html[data-theme="chessty-arena"] .workspace-page .card,
html[data-theme="chessty-arena"] .auth-page .card,
html[data-theme="chessty-arena"] .interface-settings {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: rgba(54, 59, 55, 0.96);
    box-shadow: 0 16px 42px rgba(8, 12, 9, 0.28);
}

html[data-theme="chessty-arena"] .content-page .empty,
html[data-theme="chessty-arena"] .workspace-page .empty,
html[data-theme="chessty-arena"] .profile-page .home-stat,
html[data-theme="chessty-arena"] .puzzle-status,
html[data-theme="chessty-arena"] .engine-switch,
html[data-theme="chessty-arena"] .bot-game-workspace .player-side {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
}

html[data-theme="chessty-arena"] .field input,
html[data-theme="chessty-arena"] .field select,
html[data-theme="chessty-arena"] .field textarea {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-input);
}

html[data-theme="chessty-arena"] .field input::placeholder,
html[data-theme="chessty-arena"] .field textarea::placeholder {
    color: var(--theme-faint);
}

html[data-theme="chessty-arena"] .confirm-dialog,
html[data-theme="chessty-arena"] .play-confirm-dialog {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 30px 80px rgba(7, 10, 8, 0.52);
}

html[data-theme="chessty-arena"] .auth-page .auth-card {
    border-color: var(--theme-border);
    background: rgba(54, 59, 55, 0.97);
    box-shadow: 0 26px 70px rgba(7, 10, 8, 0.42);
}

html[data-theme="chessty-arena"] .auth-page .auth-title {
    color: var(--theme-title);
}

html[data-theme="chessty-arena"] .auth-page .btn-social {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
}

html[data-theme="chessty-arena"] .auth-alert-success,
html[data-theme="chessty-arena"] .auth-page .auth-alert-success {
    border-color: rgba(112, 174, 114, 0.3);
    color: #bce2bf;
    background: rgba(70, 119, 75, 0.3);
}

html[data-theme="chessty-arena"] .auth-alert-error,
html[data-theme="chessty-arena"] .auth-page .auth-alert-error {
    border-color: rgba(240, 128, 106, 0.3);
    color: #ffc1b5;
    background: rgba(121, 55, 47, 0.32);
}

html[data-theme="chessty-arena"] .settings-tab:hover {
    color: var(--theme-text);
}

/* Portada */
html[data-theme="chessty-arena"] body:has(.home-club) {
    background:
        radial-gradient(circle at 78% 4%, rgba(95, 155, 99, 0.14), transparent 30rem),
        linear-gradient(135deg, rgba(240, 238, 232, 0.025), transparent 50%),
        var(--theme-page);
}

html[data-theme="chessty-arena"] .home-stage {
    border-color: var(--theme-border);
    background: var(--theme-surface);
}

html[data-theme="chessty-arena"] .home-stage::before {
    background-image:
        linear-gradient(rgba(145, 200, 149, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145, 200, 149, 0.055) 1px, transparent 1px);
}

html[data-theme="chessty-arena"] .home-stage::after {
    color: rgba(145, 200, 149, 0.035);
}

html[data-theme="chessty-arena"] .home-rhythm-card,
html[data-theme="chessty-arena"] .home-live-game,
html[data-theme="chessty-arena"] .home-personal-grid {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: rgba(64, 70, 64, 0.82);
    box-shadow: 0 12px 28px rgba(8, 12, 9, 0.2);
}

html[data-theme="chessty-arena"] .home-rhythm-card:hover,
html[data-theme="chessty-arena"] .home-rhythm-card:focus-visible,
html[data-theme="chessty-arena"] .home-way:hover {
    border-color: rgba(145, 200, 149, 0.4);
    background: #454c46;
    box-shadow: 0 12px 26px rgba(8, 12, 9, 0.28);
}

html[data-theme="chessty-arena"] .home-way-primary,
html[data-theme="chessty-arena"] .home-way-icon {
    border-color: var(--theme-border);
    background: var(--theme-surface-alt);
}

html[data-theme="chessty-arena"] .home-puzzle-feature {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 92% 10%, rgba(112, 174, 114, 0.24), transparent 14rem),
        linear-gradient(145deg, #324638 0%, #26372c 58%, #1e2c23 100%);
}

html[data-theme="chessty-arena"] .home-puzzle-feature .home-section-number,
html[data-theme="chessty-arena"] .home-progress-label,
html[data-theme="chessty-arena"] .home-winrate {
    color: #a9d1ac;
}

html[data-theme="chessty-arena"] .home-progress-panel {
    color: var(--theme-text);
    background: #243229;
}

html[data-theme="chessty-arena"] .home-empty-mark {
    color: rgba(145, 200, 149, 0.13);
}

/* Sala de juego */
html[data-theme="chessty-arena"] body:has(.play-room) {
    background:
        radial-gradient(circle at 82% 2%, rgba(95, 155, 99, 0.14), transparent 31rem),
        linear-gradient(140deg, rgba(240, 238, 232, 0.025), transparent 52%),
        var(--theme-page);
}

html[data-theme="chessty-arena"] .play-room-facts span,
html[data-theme="chessty-arena"] .play-board-stage {
    border-color: var(--theme-border);
    background: var(--theme-surface);
}

html[data-theme="chessty-arena"] .play-board-stage {
    box-shadow: var(--play-shadow);
}

html[data-theme="chessty-arena"] .play-board-stage::before {
    background-image:
        linear-gradient(rgba(145, 200, 149, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145, 200, 149, 0.045) 1px, transparent 1px);
}

html[data-theme="chessty-arena"] .play-room .player-bar,
html[data-theme="chessty-arena"] .workspace-page .player-bar {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    box-shadow: 0 8px 20px rgba(8, 12, 9, 0.24);
}

html[data-theme="chessty-arena"] .play-room .player-avatar,
html[data-theme="chessty-arena"] .play-room .player-clock,
html[data-theme="chessty-arena"] .workspace-page .player-clock {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-input);
    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.16);
}

html[data-theme="chessty-arena"] .play-room .player-bar[data-turn] .player-clock {
    color: var(--theme-on-accent);
    background: var(--theme-accent);
}

html[data-theme="chessty-arena"] .play-panel {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 24px 60px rgba(7, 10, 8, 0.36);
}

html[data-theme="chessty-arena"] .play-panel-head {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 100% 0, rgba(112, 174, 114, 0.24), transparent 12rem),
        linear-gradient(145deg, #344b3a, #273a2d 66%, #1f2f24);
}

html[data-theme="chessty-arena"] .play-panel-index,
html[data-theme="chessty-arena"] .play-panel-head-live .play-status {
    color: #a9d1ac;
}

html[data-theme="chessty-arena"] .play-time-trigger,
html[data-theme="chessty-arena"] .play-time-menu,
html[data-theme="chessty-arena"] .play-machine-link {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-input);
    box-shadow: 0 4px 0 #252a26;
}

html[data-theme="chessty-arena"] .play-time-trigger:hover,
html[data-theme="chessty-arena"] .play-time-option:hover,
html[data-theme="chessty-arena"] .play-time-option:focus-visible,
html[data-theme="chessty-arena"] .play-machine-link:hover,
html[data-theme="chessty-arena"] .play-room .game-toolbar .icon-btn:hover {
    border-color: rgba(145, 200, 149, 0.3);
    background: #485049;
}

html[data-theme="chessty-arena"] .play-time-option {
    color: var(--theme-text);
}

html[data-theme="chessty-arena"] .play-time-option.is-selected {
    border-color: rgba(145, 200, 149, 0.4);
    color: var(--theme-text);
    background: var(--theme-accent-soft);
    box-shadow: inset 3px 0 var(--theme-accent);
}

html[data-theme="chessty-arena"] .play-room .move-row:nth-child(even) {
    background: rgba(240, 238, 232, 0.045);
}

html[data-theme="chessty-arena"] .play-room .move-san.is-last {
    color: var(--theme-on-accent);
}

html[data-theme="chessty-arena"] .play-room .game-toolbar .icon-btn {
    border-color: var(--theme-border);
    color: var(--theme-accent-text);
    background: var(--theme-input);
}

/* Bots, análisis, problemas y otras mesas */
html[data-theme="chessty-arena"] .play-promotion-dialog {
    color: var(--theme-text);
    border-color: var(--theme-border);
    background: var(--theme-surface);
    box-shadow: 0 30px 80px rgba(7,10,8,.52);
}
html[data-theme="chessty-arena"] .play-promotion-dialog h2,
html[data-theme="chessty-arena"] .play-promotion-options button { color: var(--theme-text); }
html[data-theme="chessty-arena"] .play-promotion-options button { border-color: var(--theme-border); background: var(--theme-input); }
html[data-theme="chessty-arena"] .play-promotion-options button:hover { border-color: var(--theme-accent); background: #485049; }
html[data-theme="chessty-arena"] .play-promotion-options kbd { border-color: var(--theme-border); color: var(--theme-text-muted); }

html[data-theme="chessty-arena"] .bot-roster,
html[data-theme="chessty-arena"] .bot-brief,
html[data-theme="chessty-arena"] .bot-studio,
html[data-theme="chessty-arena"] .bot-match-card {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: rgba(54, 59, 55, 0.97) !important;
    box-shadow: 0 22px 56px rgba(7, 10, 8, 0.34);
}

html[data-theme="chessty-arena"] .bot-lobby-intro-note,
html[data-theme="chessty-arena"] .bot-lobby-shell .bot-item,
html[data-theme="chessty-arena"] .bot-brief .color-icon-btn,
html[data-theme="chessty-arena"] .bot-game-state,
html[data-theme="chessty-arena"] .bot-game-history .move-list {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    box-shadow: 0 8px 20px rgba(8, 12, 9, 0.18);
}

html[data-theme="chessty-arena"] .bot-lobby-shell .bot-item:hover,
html[data-theme="chessty-arena"] .bot-brief .color-icon-btn:hover {
    border-color: rgba(145, 200, 149, 0.3);
    background: #485049;
}

html[data-theme="chessty-arena"] .bot-lobby-shell .bot-item.is-selected,
html[data-theme="chessty-arena"] .bot-lobby-shell .bot-item:has(input:checked),
html[data-theme="chessty-arena"] .bot-brief .color-icon-btn:has(input:checked),
html[data-theme="chessty-arena"] .bot-brief .color-icon-btn.is-selected {
    border-color: var(--theme-accent);
    color: var(--theme-text);
    background: var(--theme-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(145, 200, 149, 0.08), 0 12px 26px rgba(7, 10, 8, 0.25);
}

html[data-theme="chessty-arena"] .bot-roster-heading h2,
html[data-theme="chessty-arena"] .bot-brief-topline h2,
html[data-theme="chessty-arena"] .bot-lobby-shell .bot-category > legend,
html[data-theme="chessty-arena"] .bot-lobby-shell .bot-name,
html[data-theme="chessty-arena"] .bot-brief .bot-feature-copy h3,
html[data-theme="chessty-arena"] .bot-brief .bot-color-field legend,
html[data-theme="chessty-arena"] .bot-match-opponent h2,
html[data-theme="chessty-arena"] .bot-game-section-title h3 {
    color: var(--theme-title);
}

html[data-theme="chessty-arena"] .bot-lobby-intro-note strong,
html[data-theme="chessty-arena"] .bot-brief blockquote,
html[data-theme="chessty-arena"] .bot-feature-preview {
    color: var(--theme-muted);
}

html[data-theme="chessty-arena"] .bot-brief-ready {
    color: var(--theme-accent-text);
}

html[data-theme="chessty-arena"] .bot-brief .bot-feature,
html[data-theme="chessty-arena"] .bot-match-opponent {
    background:
        radial-gradient(circle at 12% 18%, rgba(201, 155, 84, 0.16), transparent 7rem),
        linear-gradient(135deg, #3f4740, #343a36 70%);
}

html[data-theme="chessty-arena"] .bot-personality {
    border-color: rgba(201, 155, 84, 0.28);
    color: #e6c993;
    background: rgba(129, 91, 38, 0.2);
}

html[data-theme="chessty-arena"] .bot-feature-country,
html[data-theme="chessty-arena"] .bot-step-number {
    border-color: var(--theme-border);
    color: var(--theme-accent-text);
    background: var(--theme-input);
}

/* Tableros Chessground: una sola fuente cromática para todas las páginas. */
html[data-theme="chessty-arena"] body cg-board {
    background-color: var(--theme-board-light) !important;
    background-image: conic-gradient(
        var(--theme-board-dark) 0 25%,
        var(--theme-board-light) 0 50%,
        var(--theme-board-dark) 0 75%,
        var(--theme-board-light) 0
    ) !important;
    box-shadow: 0 2px 4px rgba(8, 12, 9, 0.4), 0 18px 40px rgba(8, 12, 9, 0.46) !important;
}

html[data-theme="chessty-arena"] body .cg-wrap coords {
    color: var(--theme-board-coords) !important;
}

html[data-theme="chessty-arena"] body cg-board square.last-move {
    background-color: rgba(201, 155, 84, 0.55) !important;
}

html[data-theme="chessty-arena"] body cg-board square.selected {
    background-color: rgba(201, 155, 84, 0.72) !important;
}

html[data-theme="chessty-arena"] body cg-board square.move-dest {
    background: radial-gradient(rgba(25, 37, 28, 0.42) 22%, transparent 23%) !important;
}

html[data-theme="chessty-arena"] body cg-board square.move-dest:hover {
    background: rgba(201, 155, 84, 0.38) !important;
}

html[data-theme="chessty-arena"] body cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0 78%, rgba(25, 37, 28, 0.5) 79%) !important;
}

html[data-theme="chessty-arena"] .theme-option-visual {
    background: rgba(64, 70, 64, 0.72);
    box-shadow: 0 12px 30px rgba(7, 10, 8, 0.24);
}

html[data-theme="chessty-arena"] .theme-option > input:checked + .theme-option-visual {
    background:
        linear-gradient(135deg, rgba(95, 155, 99, 0.1), transparent 58%),
        var(--theme-surface);
}

html[data-theme="chessty-arena"] .theme-palette i {
    border-color: #4a514b;
    box-shadow: 0 0 0 1px rgba(240, 238, 232, 0.18);
}

@media (max-width: 900px) {
    html[data-theme="chessty-arena"] .sidebar {
        box-shadow: 0 8px 24px rgba(7, 10, 8, 0.28);
    }
}

/* ==========================================================================
   Laboratorio de analisis
   Una mesa compacta: tablero dominante y una sola consola de trabajo.
   ========================================================================== */
main:has(.analysis-lab) {
    max-width: none;
    padding: .8rem clamp(.75rem, 2vw, 1.7rem) 1rem;
}

.analysis-lab {
    width: min(100%, 84rem);
    margin: 0 auto;
    color: var(--theme-text);
    font-family: "Archivo", "Segoe UI", sans-serif;
}

.analysis-lab__intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: .75rem;
    padding-inline: .25rem;
}

.analysis-lab__intro h1 {
    margin: 0;
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.65rem, 2.6vw, 2.45rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1;
}

.analysis-lab__intro > p {
    max-width: 31rem;
    margin: 0 0 .1rem;
    color: var(--theme-muted);
    font-size: .88rem;
    line-height: 1.45;
    text-align: right;
}

.analysis-lab__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
    align-items: start;
    gap: clamp(1rem, 2vw, 1.6rem);
}

.analysis-board-stage {
    width: min(100%, calc(100dvh - 132px));
    max-width: 49rem;
    min-width: 0;
    justify-self: end;
}

.analysis-board-row {
    display: flex;
    align-items: stretch;
    min-width: 0;
    gap: .42rem;
}

.analysis-board-wrap {
    flex: 1;
    min-width: 0;
}

.analysis-board-wrap .board-frame {
    padding-top: 0;
    padding-right: 0;
}

.analysis-player {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: .5rem;
    padding: .25rem calc(.25rem + 2px) .25rem 2.3rem;
    color: var(--theme-title);
    font-size: .78rem;
    font-weight: 800;
}

.analysis-player--top { padding-bottom: .35rem; }
.analysis-player--bottom { padding-top: .35rem; }

.analysis-player__piece {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: #202522;
    box-shadow: 0 0 0 3px rgba(32,37,34,.09);
}

.analysis-player__piece--light {
    border-color: rgba(24,58,90,.16);
    background: #f7f4ec;
}

.analysis-player__turn,
.analysis-player__hint {
    margin-left: auto;
    color: var(--theme-faint);
    font-size: .7rem;
    font-weight: 700;
}

.analysis-eval {
    --eval: 50%;
    display: flex;
    width: 34px;
    min-width: 34px;
    flex-direction: column;
    padding-bottom: 30px;
}

.analysis-eval__score {
    display: grid;
    z-index: 1;
    min-height: 26px;
    place-items: center;
    margin-bottom: -26px;
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.analysis-eval__track {
    position: relative;
    height: 100%;
    min-height: 180px;
    overflow: hidden;
    border: 1px solid rgba(24,58,90,.2);
    border-radius: 8px;
    background: #1d2429;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.analysis-eval__track::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: var(--eval);
    background: #f3f4f1;
    transition: height 240ms var(--ease-out);
}

.analysis-console {
    display: flex;
    min-height: min(650px, calc(100dvh - 108px));
    max-height: calc(100dvh - 108px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent);
    box-shadow: 0 20px 50px var(--theme-shadow);
}

.analysis-console__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem .8rem;
    border-bottom: 1px solid var(--theme-border);
    background:
        radial-gradient(circle at 100% 0, var(--theme-accent-soft), transparent 9rem),
        var(--theme-surface);
}

.analysis-console__eyebrow {
    margin: 0 0 .08rem;
    color: var(--theme-accent-text);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.analysis-console__head h2,
.analysis-dialog h2 {
    margin: 0;
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
}

.analysis-console__actions {
    display: flex;
    gap: .4rem;
}

.analysis-icon-btn,
.analysis-nav button,
.analysis-dialog__close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    color: var(--theme-accent-text);
    background: var(--theme-input);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.analysis-icon-btn:hover,
.analysis-nav button:hover:not(:disabled),
.analysis-dialog__close:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, transparent);
    background: var(--theme-accent-soft);
    transform: translateY(-1px);
}

.analysis-icon-btn svg,
.analysis-nav svg,
.analysis-dialog__close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analysis-engine {
    padding: .8rem 1rem .75rem;
    border-bottom: 1px solid var(--theme-border);
}

.analysis-engine__topline {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.analysis-engine-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--theme-title);
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
}

.analysis-engine-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.analysis-engine-switch__track {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--theme-faint);
    transition: background 160ms ease;
}

.analysis-engine-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.24);
    transition: transform 180ms var(--ease-out);
}

.analysis-engine-switch input:checked + .analysis-engine-switch__track {
    background: var(--theme-accent);
}

.analysis-engine-switch input:checked + .analysis-engine-switch__track::after {
    transform: translateX(15px);
}

.analysis-engine-switch input:focus-visible + .analysis-engine-switch__track {
    outline: 3px solid color-mix(in srgb, var(--theme-accent) 28%, transparent);
    outline-offset: 2px;
}

.analysis-engine__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--theme-muted);
    font-size: .69rem;
    font-weight: 800;
}

.analysis-engine__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-faint);
}

.analysis-engine__status[data-state="ready"] i { background: #4f9b63; }
.analysis-engine__status[data-state="error"] i { background: #c7514c; }
.analysis-engine__status[data-state="thinking"] i {
    background: var(--theme-accent);
    animation: analysis-pulse 850ms ease-in-out infinite;
}

.analysis-engine__summary {
    display: flex;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: .12rem;
    margin-top: .35rem;
}

.analysis-engine__summary strong {
    color: var(--theme-title);
    font-size: .9rem;
}

.analysis-engine__summary span {
    color: var(--theme-muted);
    font-size: .7rem;
}

.analysis-lines {
    display: grid;
    min-height: 76px;
    gap: .35rem;
    align-content: start;
}

.analysis-line {
    display: grid;
    min-height: 35px;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: .4rem;
    padding: .25rem .4rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--theme-input);
}

.analysis-line.is-best {
    border-color: color-mix(in srgb, var(--theme-accent) 27%, transparent);
    background: var(--theme-accent-soft);
}

.analysis-line__score {
    color: var(--theme-title);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.analysis-line__moves {
    display: flex;
    min-width: 0;
    gap: .08rem;
    overflow: hidden;
}

.analysis-line__moves button {
    flex: 0 0 auto;
    padding: .2rem .22rem;
    border: 0;
    border-radius: 4px;
    color: var(--theme-text);
    background: transparent;
    font-size: .72rem;
    font-weight: 750;
    cursor: pointer;
}

.analysis-line__moves button:hover,
.analysis-line__moves button:focus-visible {
    color: var(--theme-accent-text);
    background: color-mix(in srgb, var(--theme-surface) 65%, transparent);
}

.analysis-line__depth {
    color: var(--theme-faint);
    font-size: .61rem;
    text-align: right;
}

.analysis-tree-section {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    padding: .75rem 1rem 0;
}

.analysis-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}

.analysis-section-title > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.analysis-section-title span {
    color: var(--theme-title);
    font-size: .78rem;
    font-weight: 900;
}

.analysis-section-title small {
    color: var(--theme-faint);
    font-size: .65rem;
}

.analysis-text-btn {
    padding: .3rem .48rem;
    border: 0;
    border-radius: 6px;
    color: var(--theme-accent-text);
    background: transparent;
    font-size: .67rem;
    font-weight: 850;
    cursor: pointer;
}

.analysis-text-btn:hover { background: var(--theme-accent-soft); }

.analysis-tree {
    min-height: 92px;
    flex: 1;
    overflow: auto;
    padding: .1rem .1rem .6rem;
    scrollbar-color: color-mix(in srgb, var(--theme-accent) 34%, transparent) transparent;
    scrollbar-width: thin;
}

.analysis-mainline,
.analysis-variation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .22rem;
}

.analysis-move {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: .25rem;
    padding: .28rem .42rem;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--theme-text);
    background: transparent;
    cursor: pointer;
}

.analysis-move span {
    color: var(--theme-faint);
    font-size: .64rem;
}

.analysis-move strong {
    font-size: .75rem;
    font-weight: 800;
}

.analysis-move:hover {
    border-color: var(--theme-border);
    background: var(--theme-input);
}

.analysis-move.is-current {
    border-color: color-mix(in srgb, var(--theme-accent) 44%, transparent);
    color: var(--theme-on-accent);
    background: var(--theme-accent);
}

.analysis-move.is-current span { color: currentColor; opacity: .78; }

.analysis-variations {
    display: grid;
    width: 100%;
    gap: .2rem;
    margin: .15rem 0 .2rem .85rem;
    padding-left: .55rem;
    border-left: 2px solid color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

.analysis-move.is-variation {
    color: var(--theme-muted);
    font-style: italic;
}

.analysis-empty {
    margin: 0;
    padding: .7rem;
    border: 1px dashed var(--theme-border);
    border-radius: 8px;
    color: var(--theme-muted);
    background: color-mix(in srgb, var(--theme-input) 78%, transparent);
    font-size: .72rem;
    line-height: 1.4;
}

.analysis-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem 1rem;
    border-top: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-input) 60%, transparent);
}

.analysis-nav button {
    width: 38px;
    height: 38px;
    border-color: transparent;
    background: transparent;
}

.analysis-nav button:disabled {
    opacity: .28;
    cursor: not-allowed;
}

.analysis-nav__divider {
    width: 1px;
    height: 22px;
    margin-inline: .15rem;
    background: var(--theme-border);
}

.analysis-console__foot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    padding: .65rem 1rem .8rem;
    border-top: 1px solid var(--theme-border);
}

.analysis-console__foot button {
    min-height: 34px;
    padding: .35rem .3rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text);
    background: var(--theme-input);
    font-size: .66rem;
    font-weight: 850;
    cursor: pointer;
}

.analysis-console__foot button:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
    color: var(--theme-accent-text);
}

.analysis-toast {
    position: absolute;
    right: 1rem;
    bottom: calc(100% + .45rem);
    padding: .45rem .65rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-on-accent);
    background: var(--theme-accent);
    box-shadow: 0 10px 25px var(--theme-shadow);
    font-size: .7rem;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.analysis-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.analysis-dialog,
.analysis-promotion {
    width: min(calc(100% - 2rem), 34rem);
    max-height: min(90dvh, 42rem);
    overflow: auto;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 32px 90px rgba(10,18,24,.32);
}

.analysis-dialog::backdrop,
.analysis-promotion::backdrop {
    background: rgba(12,20,25,.48);
    backdrop-filter: blur(3px);
}

.analysis-dialog > form { padding: 1.15rem; }

.analysis-dialog header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.analysis-dialog__close {
    width: 36px;
    height: 36px;
}

.analysis-import-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    margin-bottom: .85rem;
    padding: .25rem;
    border-radius: 10px;
    background: var(--theme-input);
}

.analysis-import-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 7px;
    color: var(--theme-muted);
    background: transparent;
    font-weight: 850;
    cursor: pointer;
}

.analysis-import-tabs button[aria-selected="true"] {
    color: var(--theme-accent-text);
    background: var(--theme-surface);
    box-shadow: 0 3px 10px var(--theme-shadow);
}

.analysis-import-field {
    display: grid;
    gap: .4rem;
    color: var(--theme-title);
    font-size: .75rem;
    font-weight: 850;
}

.analysis-import-field textarea {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    padding: .75rem;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    color: var(--theme-text);
    background: var(--theme-input);
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: .75rem;
    line-height: 1.5;
}

.analysis-import-field[hidden] { display: none; }

.analysis-dialog__error {
    min-height: 1.25rem;
    margin: .45rem 0;
    color: #b53f3a;
    font-size: .72rem;
    font-weight: 750;
}

.analysis-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

.analysis-setting {
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--theme-border);
}

.analysis-setting > span {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.analysis-setting strong { color: var(--theme-title); font-size: .82rem; }
.analysis-setting small { color: var(--theme-muted); font-size: .68rem; }

.analysis-setting select {
    min-height: 40px;
    padding: .4rem 2rem .4rem .6rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text);
    background: var(--theme-input);
}

.analysis-setting--check input {
    width: 20px;
    height: 20px;
    accent-color: var(--theme-accent);
}

.analysis-settings-note {
    margin: .75rem 0;
    color: var(--theme-muted);
    font-size: .7rem;
    line-height: 1.45;
}

.analysis-promotion {
    width: min(calc(100% - 2rem), 27rem);
    padding: 1rem;
    text-align: center;
}

.analysis-promotion p {
    margin: 0 0 .8rem;
    color: var(--theme-title);
    font-weight: 900;
}

.analysis-promotion form > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
}

.analysis-promotion [data-promotion] {
    min-height: 58px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    color: var(--theme-title);
    background: var(--theme-input);
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

.analysis-promotion [data-promotion]:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.analysis-promotion__cancel {
    margin-top: .75rem;
    border: 0;
    color: var(--theme-muted);
    background: transparent;
    cursor: pointer;
}

html[data-theme="chessty-arena"] .analysis-eval__track {
    border-color: rgba(240,238,232,.18);
    background: #161b18;
}

html[data-theme="chessty-arena"] .analysis-eval__track::after { background: #eee9dd; }
html[data-theme="chessty-arena"] .analysis-dialog__error { color: #ffaaa0; }

@keyframes analysis-pulse {
    50% { opacity: .35; transform: scale(.72); }
}

@media (max-width: 1120px) {
    .analysis-lab__workspace {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
    }

    .analysis-board-stage { width: min(100%, calc(100dvh - 160px)); }
    .analysis-console { min-height: calc(100dvh - 120px); }
}

@media (max-width: 900px) {
    main:has(.analysis-lab) { padding: 1rem; }

    .analysis-lab__intro {
        align-items: start;
        flex-direction: column;
        gap: .35rem;
    }

    .analysis-lab__intro > p { text-align: left; }

    .analysis-lab__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .analysis-board-stage {
        width: min(100%, 44rem);
        justify-self: center;
    }

    .analysis-console {
        width: min(100%, 44rem);
        min-height: 570px;
        max-height: none;
        justify-self: center;
    }
}

@media (max-width: 560px) {
    main:has(.analysis-lab) { padding: .55rem .35rem 1rem; }
    .analysis-lab__intro { padding-inline: .45rem; }
    .analysis-lab__intro > p { display: none; }
    .analysis-lab__intro h1 { font-size: 1.55rem; }
    .analysis-board-row { gap: .22rem; }
    .analysis-eval { width: 28px; min-width: 28px; }
    .analysis-player { padding-left: 1.9rem; }
    .analysis-player__hint { display: none; }
    .analysis-console { min-height: 540px; border-radius: 14px; }
    .analysis-console__head,
    .analysis-engine,
    .analysis-tree-section { padding-inline: .75rem; }
    .analysis-icon-btn,
    .analysis-nav button { width: 44px; height: 44px; }
    .analysis-nav { gap: .08rem; padding-inline: .35rem; }
    .analysis-console__foot { padding-inline: .75rem; }
    .analysis-console__foot button { min-height: 44px; }
    .analysis-line { grid-template-columns: 44px minmax(0, 1fr) 24px; }
    .analysis-promotion form > div { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .analysis-eval__track::after,
    .analysis-engine-switch__track,
    .analysis-engine-switch__track::after,
    .analysis-icon-btn,
    .analysis-nav button,
    .analysis-toast {
        transition: none;
    }

    .analysis-engine__status[data-state="thinking"] i { animation: none; }
}

/* ==========================================================================
   Problemas - sala de entrenamiento
   Los componentes consumen los tokens globales para funcionar en claro y
   Arena sin duplicar una segunda hoja de estilos por tema.
   ========================================================================== */
.puzzle-workspace,
.puzzle-hub-page {
    --puzzle-positive: #277146;
    --puzzle-negative: #a13d32;
    --puzzle-warm: var(--theme-gold);
    color: var(--theme-text);
}

html[data-theme="chessty-arena"] .puzzle-workspace,
html[data-theme="chessty-arena"] .puzzle-hub-page {
    --puzzle-positive: #9bd2a0;
    --puzzle-negative: #ffaaa0;
}

main:has(.puzzle-workspace),
main:has(.puzzle-hub-page) {
    overflow-x: clip;
}

main:has(.puzzle-workspace) {
    padding: clamp(.8rem, 2vw, 1.5rem) clamp(.75rem, 2.5vw, 2.2rem) 1.5rem;
}

main:has(.puzzle-hub-page) {
    padding: clamp(1rem, 2.5vw, 2rem);
}

.puzzle-page-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    width: min(100%, 76rem);
    margin: 0 auto 1rem;
}

.puzzle-heading-mark,
.puzzle-card-icon,
.rush-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.puzzle-heading-mark {
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border));
    border-radius: 14px;
    box-shadow: inset 0 1px color-mix(in srgb, var(--theme-title) 8%, transparent);
}

.puzzle-heading-mark svg {
    width: 25px;
    height: 25px;
}

.puzzle-page-header svg,
.puzzle-hub-page svg,
.puzzle-control-rail svg,
.puzzle-board-foot svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.puzzle-page-header h1,
.puzzle-hero h1,
.battle-copy h1 {
    margin: 0;
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.puzzle-page-header h1 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1;
}

.puzzle-page-lead {
    max-width: 42rem;
    margin-top: .3rem;
    color: var(--theme-muted);
    font-size: .92rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.puzzle-availability,
.puzzle-coming-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 34px;
    padding: .45rem .7rem;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    color: var(--theme-muted);
    background: var(--theme-surface);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.puzzle-availability > span,
.puzzle-coming-badge > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-accent);
    box-shadow: 0 0 0 4px var(--theme-accent-soft);
}

.puzzle-mode-nav {
    position: relative;
    align-items: stretch;
    gap: .3rem;
    width: 100%;
    margin: 0 0 1rem;
    padding: .3rem;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
    box-shadow: 0 10px 24px var(--theme-shadow);
    scrollbar-width: none;
}

.puzzle-mode-nav::-webkit-scrollbar {
    display: none;
}

.puzzle-mode-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 1 0 auto;
    min-height: 44px;
    padding: .65rem .8rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--theme-muted);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 170ms var(--ease-out),
        border-color 170ms var(--ease-out),
        background 170ms var(--ease-out);
}

.puzzle-mode-link svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.puzzle-mode-link:hover {
    color: var(--theme-text);
    background: var(--theme-surface-alt);
}

.puzzle-mode-link.is-active {
    border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.puzzle-mode-link.is-active::after {
    content: "";
    position: absolute;
    right: .7rem;
    bottom: .35rem;
    left: .7rem;
    height: 2px;
    border-radius: 999px;
    background: var(--theme-accent);
}

.puzzle-mode-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--theme-accent) 32%, transparent);
    outline-offset: 2px;
}

.puzzle-workspace .workspace-kicker,
.puzzle-hub-page .workspace-kicker {
    color: var(--theme-accent-text);
}

.puzzle-game-layout {
    grid-template-columns: minmax(0, min(40rem, calc(100dvh - 205px))) minmax(310px, 360px);
    align-items: start;
    gap: clamp(1rem, 2.2vw, 1.8rem);
}

.puzzle-workspace .puzzle-game-layout .board-col {
    width: min(100%, min(40rem, calc(100dvh - 205px)));
}

.puzzle-board-stage {
    padding: clamp(.45rem, 1vw, .7rem);
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-title) 4%, transparent), transparent 48%),
        var(--theme-surface);
    box-shadow: 0 22px 52px var(--theme-shadow);
}

.puzzle-board-frame {
    min-width: 0;
}

.puzzle-board-frame > .board-frame {
    width: 100%;
}

.puzzle-workspace .puzzle-board-frame cg-board {
    border-radius: 10px;
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--theme-shadow) 85%, transparent),
        0 16px 30px var(--theme-shadow);
}

.puzzle-workspace .puzzle-board-frame piece {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
}

.puzzle-workspace .puzzle-board-frame piece.dragging {
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .34));
}

.puzzle-board-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 35px;
    padding: .45rem .35rem 0;
    color: var(--theme-faint);
    font-size: .76rem;
    font-weight: 650;
}

.puzzle-side-to-move {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--theme-text);
}

.puzzle-side-to-move svg {
    width: 17px;
    height: 17px;
    color: var(--theme-accent-text);
}

.puzzle-color-disc {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.puzzle-color-disc-white {
    border: 1px solid color-mix(in srgb, var(--theme-title) 32%, transparent);
    background: #f7f4ec;
    box-shadow: inset 0 -2px 3px rgba(24, 27, 25, .12);
}

.puzzle-control-rail {
    gap: .85rem;
}

.puzzle-workspace .puzzle-control-rail .card {
    padding: clamp(1rem, 1.7vw, 1.25rem);
    border-radius: 16px;
    background: var(--theme-surface);
}

.puzzle-action-card {
    position: relative;
    overflow: hidden;
}

.puzzle-action-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    border-radius: 0 0 0 100%;
    background: radial-gradient(circle at 100% 0, var(--theme-accent-soft), transparent 70%);
    pointer-events: none;
}

.puzzle-card-topline {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    color: var(--theme-accent-text);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.puzzle-card-icon,
.rush-mode-icon {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, var(--theme-border));
    border-radius: 10px;
}

.puzzle-card-icon svg,
.rush-mode-icon svg {
    width: 19px;
    height: 19px;
}

.puzzle-action-card .card-title {
    position: relative;
    margin-bottom: .2rem;
    font-size: 1.45rem;
}

.puzzle-action-card .card-title::before,
.puzzle-progress-card .card-title::before,
.study-tools-card .card-title::before,
.custom-position-card .card-title::before,
.puzzle-rules-card .card-title::before,
.battle-development-card .card-title::before {
    display: none;
}

.puzzle-action-card .turn-line {
    gap: .55rem;
    margin: 0;
    color: var(--theme-muted);
    font-size: .88rem;
}

.puzzle-status {
    position: relative;
    min-height: 60px;
    margin: 1rem 0;
    padding: .85rem .9rem .85rem 2.65rem;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    font-size: .9rem;
    line-height: 1.45;
}

.puzzle-status::before {
    content: "";
    position: absolute;
    top: 1.08rem;
    left: 1rem;
    width: 9px;
    height: 9px;
    border: 2px solid var(--theme-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--theme-accent-soft);
}

.puzzle-status.is-loading::before {
    border-right-color: transparent;
    animation: puzzle-spin .75s linear infinite;
}

.puzzle-status.is-ok {
    border-color: color-mix(in srgb, var(--puzzle-positive) 36%, var(--theme-border));
    color: var(--puzzle-positive);
    background: color-mix(in srgb, var(--puzzle-positive) 11%, var(--theme-surface));
}

.puzzle-status.is-ok::before {
    border-color: var(--puzzle-positive);
    background: var(--puzzle-positive);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--puzzle-positive) 14%, transparent);
}

.puzzle-status.is-fail,
.puzzle-status.is-error {
    border-color: color-mix(in srgb, var(--puzzle-negative) 36%, var(--theme-border));
    color: var(--puzzle-negative);
    background: color-mix(in srgb, var(--puzzle-negative) 10%, var(--theme-surface));
}

.puzzle-status.is-fail::before,
.puzzle-status.is-error::before {
    border-color: var(--puzzle-negative);
    background: var(--puzzle-negative);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--puzzle-negative) 14%, transparent);
}

.puzzle-status.is-hint {
    border-color: color-mix(in srgb, var(--puzzle-warm) 42%, var(--theme-border));
    color: var(--theme-text);
    background: color-mix(in srgb, var(--puzzle-warm) 13%, var(--theme-surface));
}

.puzzle-status.is-hint::before {
    border-color: var(--puzzle-warm);
    background: var(--puzzle-warm);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--puzzle-warm) 16%, transparent);
}

@keyframes puzzle-spin {
    to { transform: rotate(360deg); }
}

.puzzle-actions {
    display: grid;
    gap: .6rem;
}

.puzzle-actions .btn,
.custom-fen-form .btn,
.custom-position-actions .btn,
.battle-development-card .btn,
.puzzle-inline-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
}

.puzzle-actions .btn svg,
.custom-fen-form .btn svg,
.custom-position-actions .btn svg,
.battle-development-card .btn svg,
.puzzle-inline-cta .btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.puzzle-secondary-action:disabled {
    opacity: .52;
}

.puzzle-section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .9rem;
}

.puzzle-section-heading .card-title {
    margin: 0;
    font-size: 1.12rem;
}

.puzzle-section-heading > svg {
    width: 22px;
    height: 22px;
    color: var(--theme-accent-text);
}

.puzzle-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.puzzle-stat {
    align-items: flex-start;
    gap: .1rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--theme-border);
    border-radius: 11px;
    background: var(--theme-surface-alt);
}

.puzzle-stat .stat-num {
    color: var(--theme-title);
    font-size: 1.55rem;
    line-height: 1;
}

.puzzle-stat .stat-label {
    color: var(--theme-muted);
    font-size: .75rem;
    text-transform: none;
}

.puzzle-honest-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .8rem;
    color: var(--theme-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.puzzle-honest-note svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: .08rem;
    color: var(--theme-accent-text);
}

/* Portadas de Rush y Battle */
.puzzle-hub-page {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.4rem);
    max-width: 72rem;
}

.puzzle-hero,
.battle-arena {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 18%, var(--theme-accent-soft), transparent 19rem),
        linear-gradient(130deg, color-mix(in srgb, var(--theme-title) 4%, transparent), transparent 55%),
        var(--theme-surface);
    box-shadow: 0 22px 58px var(--theme-shadow);
}

.puzzle-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
    align-items: center;
    min-height: 230px;
    padding: clamp(1.5rem, 4vw, 3.2rem);
}

.puzzle-hero::before,
.battle-arena::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image:
        linear-gradient(45deg, transparent 48%, var(--theme-border) 49%, var(--theme-border) 51%, transparent 52%);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, transparent 42%, #000);
    pointer-events: none;
}

.puzzle-hero-copy,
.battle-copy {
    position: relative;
    z-index: 1;
}

.puzzle-hero h1,
.battle-copy h1 {
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    line-height: .9;
}

.puzzle-hero-copy > p:not(.workspace-kicker),
.battle-copy > p:not(.workspace-kicker) {
    max-width: 38rem;
    margin: .85rem 0 1.1rem;
    color: var(--theme-muted);
    font-size: clamp(.95rem, 1.4vw, 1.08rem);
    line-height: 1.55;
    text-wrap: pretty;
}

.puzzle-coming-badge {
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.puzzle-hero-emblem {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    justify-self: end;
    width: min(20vw, 210px);
    min-width: 170px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
    border-radius: 50%;
    color: var(--theme-accent-text);
    background:
        radial-gradient(circle, var(--theme-accent-soft), transparent 68%),
        var(--theme-surface-alt);
    box-shadow:
        inset 0 0 0 12px color-mix(in srgb, var(--theme-surface) 55%, transparent),
        0 18px 40px var(--theme-shadow);
}

.puzzle-hero-emblem svg {
    position: absolute;
    width: 58%;
    height: 58%;
    opacity: .17;
    stroke-width: 2;
}

.puzzle-hero-emblem > span {
    position: relative;
    margin-top: -.1em;
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.4rem, 7vw, 5.3rem);
    line-height: .8;
}

.puzzle-hero-emblem small {
    position: absolute;
    bottom: 20%;
    color: var(--theme-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.puzzle-section-block {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.puzzle-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.puzzle-section-title h2,
.puzzle-rules-card h2,
.battle-development-card h2 {
    margin: 0;
    color: var(--theme-title);
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    line-height: 1.15;
}

.puzzle-section-title > p {
    max-width: 30rem;
    color: var(--theme-muted);
    font-size: .84rem;
    line-height: 1.45;
    text-align: right;
}

.puzzle-hub-page .rush-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 0;
}

.puzzle-hub-page .rush-mode {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 1.2rem;
    border-color: var(--theme-border);
    border-radius: 16px;
    color: var(--theme-text);
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--theme-title) 4%, transparent), transparent 58%),
        var(--theme-surface);
    box-shadow: 0 12px 30px var(--theme-shadow);
}

.puzzle-hub-page .rush-mode::after {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: var(--theme-accent-soft);
}

.puzzle-hub-page .rush-mode:disabled {
    opacity: 1;
    filter: none;
    cursor: not-allowed;
}

.puzzle-hub-page .rush-mode:disabled:hover {
    transform: none;
}

.rush-mode-topline,
.rush-mode-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .6rem;
}

.rush-status {
    padding: .32rem .5rem;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    color: var(--theme-faint);
    background: var(--theme-surface-alt);
    font-size: .68rem;
    font-weight: 750;
}

.puzzle-hub-page .rush-clock {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(2.45rem, 4vw, 3.3rem);
    font-weight: 400;
}

.puzzle-hub-page .rush-name {
    position: relative;
    z-index: 1;
    color: var(--theme-title);
    font-size: 1.05rem;
}

.puzzle-hub-page .rush-note {
    position: relative;
    z-index: 1;
    max-width: 29ch;
    min-height: 3.8em;
    color: var(--theme-muted);
    font-size: .82rem;
}

.rush-mode-footer {
    margin-top: auto;
    padding-top: .85rem;
    border-top: 1px solid var(--theme-border);
    color: var(--theme-accent-text);
    font-size: .74rem;
    font-weight: 750;
}

.rush-mode-footer svg {
    width: 17px;
    height: 17px;
}

.rush-mode-5min .rush-mode-icon {
    color: var(--puzzle-warm);
    background: color-mix(in srgb, var(--puzzle-warm) 13%, var(--theme-surface));
}

.rush-mode-3min .rush-mode-icon {
    color: var(--puzzle-negative);
    background: color-mix(in srgb, var(--puzzle-negative) 10%, var(--theme-surface));
}

.puzzle-hub-page .puzzle-rules-card,
.puzzle-hub-page .battle-development-card {
    border-color: var(--theme-border);
    border-radius: 18px;
    background: var(--theme-surface);
}

.puzzle-rules-card {
    display: grid;
    grid-template-columns: minmax(190px, .75fr) minmax(0, 1.65fr);
    gap: clamp(1rem, 3vw, 2.2rem);
    padding: clamp(1.2rem, 3vw, 1.8rem);
}

.puzzle-rules-intro > p:not(.workspace-kicker) {
    margin-top: .55rem;
    color: var(--theme-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.puzzle-rule-grid {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.puzzle-rule-grid li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    min-width: 0;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--theme-border);
}

.puzzle-rule-grid li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.puzzle-rule-grid li > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
    font-size: .7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.puzzle-rule-grid strong {
    display: block;
    margin-bottom: .15rem;
    color: var(--theme-title);
    font-size: .88rem;
}

.puzzle-rule-grid p {
    color: var(--theme-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.puzzle-inline-cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border);
}

.puzzle-inline-cta > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.puzzle-inline-cta strong {
    color: var(--theme-title);
    font-size: .9rem;
}

.puzzle-inline-cta span {
    color: var(--theme-muted);
    font-size: .78rem;
}

/* Puzzle Battle */
.battle-arena {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(430px, 1.15fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    min-height: 340px;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.battle-scoreboard {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.battle-player-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    padding: 1.1rem .75rem;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface-alt);
    box-shadow: 0 15px 34px var(--theme-shadow);
}

.battle-player-opponent {
    border-color: color-mix(in srgb, var(--puzzle-warm) 32%, var(--theme-border));
}

.battle-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.battle-player-opponent .battle-avatar {
    color: var(--puzzle-warm);
    background: color-mix(in srgb, var(--puzzle-warm) 13%, var(--theme-surface));
}

.battle-avatar svg {
    width: 25px;
    height: 25px;
}

.battle-player-card > strong {
    overflow: hidden;
    max-width: 100%;
    color: var(--theme-title);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-score {
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 2.4rem;
    line-height: .95;
    font-variant-numeric: tabular-nums;
}

.battle-lives {
    display: flex;
    gap: .3rem;
    margin-top: .2rem;
}

.battle-lives i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--puzzle-negative);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--puzzle-negative) 11%, transparent);
}

.battle-lives i.is-lost {
    opacity: .2;
}

.battle-clock {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .25rem;
    color: var(--theme-accent-text);
    text-align: center;
}

.battle-clock svg {
    width: 26px;
    height: 26px;
}

.battle-clock strong {
    color: var(--theme-title);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.battle-clock span {
    color: var(--theme-faint);
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.battle-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    gap: .9rem;
}

.battle-rules {
    grid-template-columns: minmax(160px, .6fr) minmax(0, 1.5fr);
}

.battle-development-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.battle-development-card > div p:not(.workspace-kicker) {
    margin-top: .55rem;
    color: var(--theme-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.battle-development-card .btn {
    margin-top: auto;
}

/* Posicion personalizada */
.custom-position-card .card-title {
    margin-bottom: .35rem;
    font-size: 1.35rem;
}

.custom-position-intro {
    margin-bottom: 1rem;
    color: var(--theme-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.custom-fen-form {
    gap: .8rem;
}

.custom-puzzle-workspace #id_fen {
    min-height: 92px;
    padding: .8rem;
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.custom-puzzle-workspace .field-help {
    margin-top: .1rem;
    color: var(--theme-faint);
    font-size: .75rem;
    line-height: 1.4;
}

.custom-position-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .75rem;
}

.custom-position-actions .btn {
    min-width: 0;
    padding-inline: .65rem;
    font-size: .78rem;
}

.custom-position-actions .btn.is-copied {
    border-color: var(--theme-accent);
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.study-tool-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.study-tool-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
}

.study-tool-list li > svg {
    width: 34px;
    height: 34px;
    padding: .45rem;
    border-radius: 9px;
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

.study-tool-list strong,
.study-tool-list span {
    display: block;
}

.study-tool-list strong {
    margin-bottom: .12rem;
    color: var(--theme-title);
    font-size: .82rem;
}

.study-tool-list span {
    color: var(--theme-muted);
    font-size: .74rem;
    line-height: 1.4;
}

.study-analysis-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 58px;
    margin-top: 1rem;
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
    border-radius: 11px;
    color: var(--theme-text);
    background: var(--theme-accent-soft);
    text-decoration: none;
    transition:
        border-color 170ms var(--ease-out),
        transform 170ms var(--ease-out);
}

.study-analysis-link:hover {
    border-color: var(--theme-accent);
    transform: translateY(-1px);
}

.study-analysis-link span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .1rem;
}

.study-analysis-link strong {
    color: var(--theme-title);
    font-size: .8rem;
}

.study-analysis-link small {
    overflow: hidden;
    color: var(--theme-muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.study-analysis-link > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--theme-accent-text);
}

@media (max-width: 1160px) and (min-width: 901px) {
    .puzzle-workspace .puzzle-game-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
        max-width: 68rem;
    }

    .puzzle-workspace .puzzle-game-layout .board-col {
        width: min(100%, calc(100dvh - 205px));
    }

    .puzzle-workspace .side-col {
        max-height: calc(100dvh - 115px);
        overflow-y: auto;
    }
}

@media (max-width: 900px) {
    .puzzle-page-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .puzzle-availability {
        display: none;
    }

    .puzzle-mode-nav {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .puzzle-mode-link {
        flex: 0 0 auto;
    }

    .puzzle-workspace .puzzle-game-layout {
        width: min(100%, 44rem);
        margin-inline: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .puzzle-workspace .puzzle-game-layout .board-col {
        width: 100%;
    }

    .puzzle-workspace .puzzle-control-rail {
        max-height: none;
        overflow: visible;
    }

    .puzzle-hub-page .rush-modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .puzzle-hub-page .rush-mode:last-child {
        grid-column: 1 / -1;
    }

    .battle-arena {
        grid-template-columns: minmax(0, 1fr);
    }

    .battle-copy > p:not(.workspace-kicker) {
        max-width: 48rem;
    }

    .battle-scoreboard {
        width: min(100%, 34rem);
        justify-self: center;
    }

    .battle-details-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    main:has(.puzzle-workspace),
    main:has(.puzzle-hub-page) {
        padding: .75rem .55rem 1.5rem;
    }

    .puzzle-page-header {
        gap: .7rem;
        padding-inline: .25rem;
    }

    .puzzle-heading-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .puzzle-page-header h1 {
        font-size: 1.65rem;
    }

    .puzzle-page-lead {
        display: none;
    }

    .puzzle-mode-nav {
        margin-bottom: .7rem;
    }

    .puzzle-board-stage {
        padding: .35rem;
        border-radius: 14px;
    }

    .puzzle-board-foot {
        padding-inline: .2rem;
        font-size: .7rem;
    }

    .puzzle-workspace .puzzle-control-rail .card {
        border-radius: 14px;
    }

    .puzzle-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 1.4rem;
    }

    .puzzle-hero h1,
    .battle-copy h1 {
        font-size: clamp(2.55rem, 13vw, 4rem);
    }

    .puzzle-hero-emblem {
        display: none;
    }

    .puzzle-section-title {
        align-items: start;
        flex-direction: column;
        gap: .25rem;
    }

    .puzzle-section-title > p {
        text-align: left;
    }

    .puzzle-hub-page .rush-modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .puzzle-hub-page .rush-mode,
    .puzzle-hub-page .rush-mode:last-child {
        grid-column: auto;
        min-height: 225px;
    }

    .puzzle-rules-card,
    .battle-rules {
        grid-template-columns: minmax(0, 1fr);
    }

    .puzzle-inline-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .battle-arena {
        min-height: 0;
        padding: 1.35rem;
    }

    .battle-scoreboard {
        grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
        gap: .35rem;
    }

    .battle-player-card {
        padding: .85rem .4rem;
    }

    .battle-avatar {
        width: 40px;
        height: 40px;
    }

    .battle-score {
        font-size: 2rem;
    }

    .battle-clock strong {
        font-size: 1.1rem;
    }

    .custom-position-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 400px) {
    .puzzle-heading-mark {
        display: none;
    }

    .puzzle-page-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .puzzle-board-foot > span:last-child {
        display: none;
    }

    .battle-scoreboard {
        grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    }

    .battle-clock span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .puzzle-mode-link,
    .puzzle-status,
    .study-analysis-link {
        transition: none;
    }

    .puzzle-status.is-loading::before {
        animation: none;
        border-right-color: var(--theme-accent);
    }
}

/* ==========================================================================
   Escala compartida para tableros de juego

   El tablero se limita por ancho y por alto disponible. Las reservas
   verticales representan la cabecera y los controles propios de cada sala;
   así una pantalla alta aprovecha hasta 46rem sin crear scroll en escritorio.
   ========================================================================== */
:root {
    --chess-board-max: 46rem;
    --chess-panel-width: 22.5rem;
    --chess-layout-gap: clamp(1rem, 2vw, 1.8rem);
}

@media (min-width: 1161px) {
    main:has(.analysis-lab) {
        padding-bottom: .5rem;
    }

    .play-room-layout,
    .board-workspace .game-layout {
        width: min(
            100%,
            calc(var(--chess-board-max) + var(--chess-panel-width) + var(--chess-layout-gap))
        );
        grid-template-columns:
            minmax(0, min(var(--chess-board-max), calc(100dvh - var(--board-height-reserve))))
            minmax(310px, var(--chess-panel-width));
        gap: var(--chess-layout-gap);
    }

    .play-room {
        --board-height-reserve: 132px;
        max-width: calc(
            var(--chess-board-max) + var(--chess-panel-width) + var(--chess-layout-gap)
        );
    }

    .play-board-stage {
        max-width: min(var(--chess-board-max), calc(100dvh - var(--board-height-reserve)));
    }

    .play-room-layout:has([data-play-ingame]:not([hidden])) {
        --board-height-reserve: 188px;
    }

    .board-workspace {
        --board-height-reserve: 172px;
    }

    .board-workspace .board-col {
        width: min(100%, min(var(--chess-board-max), calc(100dvh - var(--board-height-reserve))));
    }

    .bot-game-workspace {
        --board-height-reserve: 200px;
    }

    .puzzle-workspace {
        --board-height-reserve: 238px;
    }

    .puzzle-workspace .puzzle-game-layout .board-col {
        width: min(100%, min(var(--chess-board-max), calc(100dvh - var(--board-height-reserve))));
    }

    .puzzle-workspace .side-col {
        max-height: calc(100dvh - 203px);
    }

    .analysis-lab__workspace {
        grid-template-columns:
            minmax(0, min(var(--chess-board-max), calc(100dvh - 116px)))
            minmax(350px, var(--chess-panel-width));
        gap: var(--chess-layout-gap);
    }

    .analysis-board-stage {
        width: min(100%, min(var(--chess-board-max), calc(100dvh - 116px)));
        max-width: none;
    }
}

/* En portátiles y tablet horizontal es mejor apilar el panel que reducir el
   tablero hasta perder presencia. El scroll pasa a ser el natural de página. */
@media (max-width: 1160px) and (min-width: 901px) {
    .puzzle-workspace .puzzle-game-layout,
    .analysis-lab__workspace {
        width: min(100%, var(--chess-board-max));
        max-width: var(--chess-board-max);
        margin-inline: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .puzzle-workspace .puzzle-game-layout .board-col,
    .analysis-board-stage {
        width: min(100%, calc(100dvh - 150px));
        max-width: var(--chess-board-max);
        justify-self: center;
    }

    .puzzle-workspace .side-col,
    .analysis-console {
        width: 100%;
        max-width: var(--chess-board-max);
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 900px) {
    .play-board-stage,
    .board-workspace .board-col,
    .analysis-board-stage {
        width: 100%;
        max-width: var(--chess-board-max);
    }

    .cg-wrap,
    .board-frame {
        min-width: 0;
        max-width: 100%;
    }
}