/* ==========================================================================
   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);
}

/* ===========================================================================
   Centro legal: documentación clara, sobria y coherente con los tres temas
   ========================================================================== */
.site-legal-footer {
    display: flex;
    max-width: 76rem;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin: 0 auto;
    padding: .55rem 2rem .85rem;
    border-top: 1px solid var(--theme-border, var(--border));
    color: var(--theme-muted, var(--text-muted));
    font-size: .72rem;
    line-height: 1.2;
}

.site-legal-footer a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-weight: 650;
    text-underline-offset: 3px;
}

.site-legal-footer__brand { font-variant-numeric: tabular-nums; }
.site-legal-footer__divider { color: var(--theme-faint, var(--text-faint)); }
.site-legal-footer a:hover { color: var(--theme-accent-text, var(--accent-text)); }

/* Los tableros son espacios de trabajo: el pie no debe robarles altura ni
   repetir enlaces legales junto a los controles de una partida. */
main:has(.game-layout) + .site-legal-footer,
main:has(.analysis-lab) + .site-legal-footer,
main:has(.rush-game:not([hidden])) + .site-legal-footer {
    display: none;
}

main:has(.legal-page),
main:has(.legal-consent) {
    width: 100%;
    max-width: 74rem;
}

.legal-page {
    --legal-rule: color-mix(in srgb, var(--theme-border, var(--border)) 88%, transparent);
    --legal-muted: var(--theme-muted, var(--text-muted));
    --legal-title: var(--theme-title, var(--text));
    --legal-surface: color-mix(in srgb, var(--theme-surface, var(--bg-side)) 82%, transparent);
    display: grid;
    gap: 1rem;
    padding: clamp(.85rem, 2vw, 1.65rem) 0 clamp(2.5rem, 6vw, 5rem);
    font-family: var(--font);
}

.legal-hero {
    max-width: 52rem;
    padding: clamp(1.1rem, 3vw, 2.4rem) 0 1.4rem;
    border-bottom: 1px solid var(--legal-rule);
}

.legal-kicker {
    margin-bottom: .5rem;
    color: var(--theme-accent-text, var(--accent-text));
    font-size: .68rem;
    font-weight: 760;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.legal-hero h1 {
    color: var(--legal-title, var(--theme-title, var(--text)));
    font-family: var(--font);
    font-size: clamp(1.8rem, 3.4vw, 2.65rem);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.legal-lead {
    max-width: 42rem;
    margin-top: .7rem;
    color: var(--legal-muted);
    font-size: clamp(.98rem, 1.7vw, 1.08rem);
    line-height: 1.58;
}

.legal-version {
    margin-top: .9rem;
    color: var(--legal-muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.legal-draft-note {
    max-width: 52rem;
    padding: .9rem 1rem .9rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--warning, #b47a24) 42%, transparent);
    border-left: 3px solid var(--warning, #b47a24);
    border-radius: 8px;
    color: var(--legal-title);
    background: color-mix(in srgb, var(--warning, #b47a24) 8%, var(--legal-surface));
    font-size: .86rem;
    line-height: 1.55;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(12.5rem, 14.5rem) minmax(0, 52rem);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.legal-index {
    position: sticky;
    top: 1.25rem;
    display: grid;
    gap: .1rem;
    padding: .9rem;
    border: 1px solid var(--legal-rule);
    border-radius: 10px;
    background: var(--legal-surface);
}

.legal-index strong {
    margin: .05rem .2rem .5rem;
    color: var(--legal-title);
    font-size: .67rem;
    font-weight: 760;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.legal-index a {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 0 .45rem;
    border-radius: 6px;
    color: var(--legal-muted);
    font-size: .79rem;
    font-weight: 620;
    text-decoration: none;
    transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}

.legal-index a:hover,
.legal-index a:focus-visible {
    color: var(--legal-title);
    background: color-mix(in srgb, var(--theme-accent, var(--accent)) 12%, transparent);
}

.legal-copy {
    min-width: 0;
    display: grid;
    gap: .8rem;
}

.legal-copy section {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-items: start;
    column-gap: .8rem;
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--legal-rule);
    border-radius: 11px;
    background: var(--legal-surface);
    scroll-margin-top: 1.25rem;
}

.legal-section-number {
    grid-column: 1;
    grid-row: 1;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, var(--accent)) 45%, transparent);
    border-radius: 6px;
    color: var(--theme-accent-text, var(--accent-text));
    background: color-mix(in srgb, var(--theme-accent, var(--accent)) 10%, transparent);
    font-size: .66rem;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
}

.legal-copy h2 {
    grid-column: 2;
    margin-bottom: .8rem;
    color: var(--legal-title);
    font-family: var(--font);
    font-size: clamp(1.08rem, 2vw, 1.28rem);
    font-weight: 740;
    letter-spacing: -.018em;
    line-height: 1.25;
}

.legal-copy p,
.legal-copy ul,
.legal-copy .legal-facts {
    grid-column: 2;
}

.legal-copy p,
.legal-copy li {
    color: var(--legal-muted);
    font-size: .96rem;
    line-height: 1.68;
}

.legal-copy p + p { margin-top: .7rem; }
.legal-copy ul { display: grid; gap: .55rem; padding-left: 1.15rem; }
.legal-copy a { color: var(--theme-accent-text, var(--accent-text)); }
.legal-copy strong { color: var(--legal-title); }

.legal-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.legal-facts div {
    min-width: 0;
    padding: .82rem;
    border: 1px solid var(--legal-rule);
    border-radius: 7px;
    background: color-mix(in srgb, var(--theme-input, var(--bg-elevated)) 64%, transparent);
}

.legal-facts dt {
    color: var(--legal-muted);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.legal-facts dd {
    min-width: 0;
    margin-top: .25rem;
    overflow-wrap: anywhere;
    color: var(--legal-title);
    font-size: .84rem;
    font-weight: 750;
}

.legal-consent {
    position: relative;
    width: min(100%, 42rem);
    margin: clamp(1rem, 5vh, 4rem) auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    overflow: hidden;
    border: 1px solid var(--theme-border, var(--border));
    border-radius: 18px;
    background: var(--theme-surface, var(--bg-side));
    box-shadow: var(--theme-shadow, var(--shadow));
}

.legal-consent__mark {
    position: absolute;
    top: -.8rem;
    right: .8rem;
    color: color-mix(in srgb, var(--theme-accent, var(--accent)) 9%, transparent);
    font-family: var(--display, "DM Serif Display", Georgia, serif);
    font-size: 8rem;
    line-height: 1;
    pointer-events: none;
}

.legal-consent header { position: relative; max-width: 32rem; }
.legal-consent h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
.legal-consent header > p:last-child { margin-top: .55rem; color: var(--theme-muted, var(--text-muted)); }

.legal-consent__documents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1.5rem;
}

.legal-consent__documents a {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .9rem;
    border: 1px solid var(--theme-border, var(--border));
    border-radius: 11px;
    color: var(--theme-text, var(--text));
    background: var(--theme-input, var(--bg-elevated));
    text-decoration: none;
    transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.legal-consent__documents a:hover {
    border-color: var(--theme-accent, var(--accent));
    transform: translateY(-2px);
}

.legal-consent__documents span,
.legal-consent__documents small { color: var(--theme-muted, var(--text-muted)); font-size: .7rem; }
.legal-consent__documents strong { margin: .18rem 0; font-size: .95rem; }

.legal-consent__form {
    display: grid;
    gap: .55rem;
    margin-top: 1.2rem;
}

.legal-check {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid var(--theme-border, var(--border));
    border-radius: 10px;
    color: var(--theme-text, var(--text));
    background: color-mix(in srgb, var(--theme-input, var(--bg-elevated)) 66%, transparent);
    cursor: pointer;
}

.legal-check:hover { border-color: var(--theme-accent, var(--accent)); }
.legal-check.has-error { border-color: var(--danger, #b54b4b); }
.legal-check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--theme-accent, var(--accent)); }
.legal-field-error { color: var(--danger, #b54b4b); font-size: .75rem; }
.legal-consent .legal-consent__accept { width: 100%; min-height: 48px; margin-top: .35rem; }

.legal-consent__cancel { display: flex; justify-content: center; margin-top: .7rem; }
.legal-consent__cancel button {
    min-height: 44px;
    padding: .45rem .8rem;
    border: 0;
    color: var(--theme-muted, var(--text-muted));
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.legal-consent__cancel button:hover { color: var(--theme-text, var(--text)); }
.legal-consent__note { color: var(--theme-muted, var(--text-muted)); font-size: .7rem; text-align: center; }

@media (max-width: 900px) {
    main:has(.legal-page),
    main:has(.legal-consent) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    .site-legal-footer {
        gap: .55rem;
        padding: .4rem 1rem calc(72px + env(safe-area-inset-bottom));
    }
    .site-legal-footer a { min-height: 44px; }
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .legal-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legal-index strong { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .legal-page { padding-top: .4rem; }
    .legal-hero { padding-top: .85rem; }
    .legal-index {
        grid-template-columns: max-content repeat(8, max-content);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        white-space: nowrap;
    }
    .legal-index strong { grid-column: auto; margin: 0 .35rem 0 .1rem; align-self: center; }
    .legal-index a { padding: 0 .55rem; }
    .legal-copy section { grid-template-columns: 1.9rem minmax(0, 1fr); column-gap: .65rem; padding: 1rem; }
    .legal-section-number { width: 1.7rem; height: 1.7rem; }
    .legal-copy p,
    .legal-copy li { font-size: .92rem; line-height: 1.64; }
    .legal-facts,
    .legal-consent__documents { grid-template-columns: minmax(0, 1fr); }
    .legal-consent { margin: 0 auto; padding: 1.15rem; border-radius: 14px; }
    .legal-consent__documents a { min-height: 88px; }
}

/* Panel Chessty: usa los tokens de los tres temas, sin una hoja duplicada. */
.side-admin-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 750;
}
.side-admin-link svg { width: 22px; height: 22px; color: var(--accent-fill); }
.side-admin-link:hover { background: var(--bg-elevated); }

.admin-page { max-width: 1240px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.admin-heading > div { min-width: 0; }
.admin-heading .page-title { margin: .15rem 0 0; overflow-wrap: anywhere; }
.admin-heading p { margin-top: .35rem; color: var(--text-muted); font-size: .88rem; }
.admin-back-link { color: var(--accent-text); font-size: .78rem; font-weight: 800; text-decoration: none; }
.admin-tabs { display: flex; gap: .2rem; width: max-content; max-width: 100%; margin: .9rem 0 1rem; padding: .25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-side); }
.admin-tabs a { min-height: 44px; display: grid; place-items: center; padding: .5rem .9rem; border-radius: 9px; color: var(--text-muted); text-decoration: none; font-size: .82rem; font-weight: 750; transition: background 140ms var(--ease-out), color 140ms var(--ease-out); }
.admin-tabs a:hover { color: var(--text); background: var(--bg-elevated); }
.admin-tabs a.is-active { color: #fff; background: var(--accent-fill); }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.admin-metric { min-height: 94px; display: grid; align-content: center; gap: .35rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.admin-metric strong { color: var(--text); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-metric span { color: var(--text-muted); font-size: .76rem; font-weight: 700; }

.admin-launchpad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.admin-launch-card { min-height: 94px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface); text-decoration: none; box-shadow: 0 8px 24px rgba(8, 20, 30, .07); transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.admin-launch-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-fill) 45%, var(--border)); box-shadow: 0 12px 28px rgba(8, 20, 30, .11); }
.admin-launch-card-primary { grid-row: span 2; min-height: 202px; align-content: center; background: color-mix(in srgb, var(--accent-fill) 9%, var(--surface)); }
.admin-launch-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--accent-text); background: color-mix(in srgb, var(--accent-fill) 13%, var(--surface)); }
.admin-launch-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-launch-card > span:nth-child(2) { min-width: 0; display: grid; gap: .25rem; }
.admin-launch-card strong { font-size: 1rem; }
.admin-launch-card small { color: var(--text-muted); font-size: .76rem; line-height: 1.35; }
.admin-launch-card b { color: var(--accent-text); font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.admin-launch-card i { color: var(--accent-text); font-size: 1.25rem; font-style: normal; }

.admin-section { padding: 1.1rem; }
.admin-recent { margin-top: .85rem; }
.admin-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.admin-section-head a { color: var(--accent-text); font-size: .8rem; font-weight: 750; }
.admin-kicker { display: block; margin-bottom: .2rem; color: var(--text-muted); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.admin-feed { display: grid; margin-top: .6rem; }
.admin-feed-row { min-height: 54px; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.admin-feed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); }
.admin-feed-row div { min-width: 0; display: grid; gap: .12rem; }
.admin-feed-row strong { color: var(--text); font-size: .84rem; }
.admin-feed-row span, .admin-feed-row time { color: var(--text-muted); font-size: .72rem; }
.admin-feed-row time { font-variant-numeric: tabular-nums; }

.admin-role-categories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin-bottom: .75rem; }
.admin-role-category { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: .55rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 13px; color: var(--text); text-decoration: none; background: var(--surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent); transition: transform 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out); }
.admin-role-category:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-fill) 50%, var(--border)); background: var(--bg-elevated); }
.admin-role-category:focus-visible { outline-offset: 3px; }
.admin-role-category span { font-size: .8rem; font-weight: 800; }
.admin-role-category strong { display: grid; min-width: 1.8rem; min-height: 1.8rem; place-items: center; padding: 0 .35rem; border-radius: 999px; color: var(--text-muted); font-size: .78rem; background: var(--bg-elevated); }
.admin-role-category.is-active { border-color: var(--accent-fill); color: var(--accent-strong); background: color-mix(in srgb, var(--accent-fill) 10%, var(--surface)); box-shadow: inset 0 -3px 0 var(--accent-fill); }
.admin-role-category.is-active strong { color: var(--on-accent); background: var(--accent-fill); }
.admin-filters { display: grid; grid-template-columns: minmax(230px, 1fr) 180px auto auto; align-items: center; gap: .55rem; margin-bottom: .75rem; padding: .7rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.admin-filters input, .admin-filters select, .admin-field input, .admin-field select, .admin-control-panel input, .admin-control-panel select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg-elevated); }
.admin-clear-filter { min-height: 44px; display: grid; place-items: center; padding: 0 .5rem; color: var(--accent-text); font-size: .78rem; font-weight: 750; }
.admin-table-card { padding: 0; overflow: clip; }
.admin-table-head, .admin-user-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) 130px 120px 110px 92px 24px; align-items: center; gap: .7rem; padding: .7rem 1rem; }
.admin-table-head { min-height: 44px; color: var(--text-muted); font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.admin-user-row { min-height: 70px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .82rem; transition: background 120ms var(--ease-out); }
.admin-user-row:hover { background: color-mix(in srgb, var(--accent-fill) 7%, var(--surface)); }
.admin-user-row:focus-visible { position: relative; z-index: 1; }
.admin-account-cell { min-width: 0; display: grid; gap: .12rem; }
.admin-account-cell small { overflow: hidden; color: var(--text-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-chesscraft-state, .admin-user-row time { color: var(--text-muted); font-size: .76rem; }
.admin-row-arrow { color: var(--accent-text); font-size: 1.05rem; }
.admin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .2rem .58rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: .7rem;
    font-weight: 850;
    white-space: nowrap;
}
.admin-badge-role { color: var(--accent-text); background: color-mix(in srgb, var(--accent-fill) 14%, transparent); border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--border)); }
.admin-badge-qa { color: var(--warning-text, #713f12); background: color-mix(in srgb, #f59e0b 18%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }

.fair-play-test-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  color: var(--text);
}
.fair-play-test-banner span { color: var(--text-muted); font-size: .875rem; }
.qa-engine-toggle {
  width: auto;
  min-width: 6.75rem;
  gap: .4rem;
  padding-inline: .7rem;
}
.qa-engine-toggle span { font-size: .76rem; font-weight: 800; white-space: nowrap; }
.qa-engine-toggle[aria-pressed="true"] {
  color: #2d2109;
  border-color: #d99922;
  background: #efb44d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #efb44d 24%, transparent);
}
@media (max-width: 600px) {
  .fair-play-test-banner { align-items: flex-start; flex-direction: column; }
}
.admin-status-activa { color: #21653b; background: color-mix(in srgb, #36a669 13%, transparent); }
.admin-status-expirada { color: #805300; background: color-mix(in srgb, #d89219 14%, transparent); }
.admin-status-suspendida { color: #8f302c; background: color-mix(in srgb, #c94b44 13%, transparent); }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .admin-status-activa { color: #80d8a2; }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .admin-status-expirada { color: #f3c778; }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .admin-status-suspendida { color: #ff9e91; }
.admin-empty { padding: 2rem; color: var(--text-muted); text-align: center; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--text-muted); }
.admin-pagination a { min-height: 44px; display: grid; place-items: center; color: var(--accent-text); font-weight: 750; }

.admin-student-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: .55rem; margin-bottom: .75rem; padding: .7rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.admin-student-search input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg-elevated); }
.admin-student-list { padding: 0; overflow: clip; }
.admin-student-list-head, .admin-student-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) 90px 100px 90px minmax(145px, 1fr) 24px; align-items: center; gap: .75rem; padding: .7rem 1rem; }
.admin-student-list-head { min-height: 44px; color: var(--text-muted); font-size: .66rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.admin-student-row { min-height: 72px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background 120ms var(--ease-out); }
.admin-student-row:hover { background: color-mix(in srgb, var(--accent-fill) 7%, var(--surface)); }
.admin-student-row > span { display: grid; gap: .1rem; }
.admin-student-row b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.admin-student-row small, .admin-student-row time { color: var(--text-muted); font-size: .7rem; }
.admin-student-row .is-correct b { color: var(--success-text, #247244); }
.admin-student-row .is-failed b { color: var(--danger, #a33b36); }
.admin-student-row i { color: var(--accent-text); font-size: 1.05rem; font-style: normal; }
.admin-student-empty { padding: 2rem; text-align: center; }
.admin-student-empty p { margin-top: .25rem; color: var(--text-muted); font-size: .8rem; }

.admin-student-detail { display: grid; gap: .9rem; }
.admin-activity-last { color: var(--accent-text); font-size: .76rem; font-weight: 800; text-align: right; }
.admin-activity-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.admin-activity-periods article { display: grid; gap: .18rem; padding: .75rem; border-radius: 12px; background: var(--bg-elevated); }
.admin-activity-periods span { color: var(--text-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.admin-activity-periods strong { color: var(--text); font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-activity-periods small { color: var(--text-muted); font-size: .68rem; line-height: 1.35; }
.admin-activity-chart { height: 112px; display: grid; grid-template-columns: repeat(30, minmax(2px, 1fr)); align-items: end; gap: 3px; padding: .55rem .6rem 0; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(to top, var(--border) 1px, transparent 1px) 0 50% / 100% 50%; }
.admin-activity-bar { height: 100%; display: flex; align-items: end; }
.admin-activity-bar i { width: 100%; min-height: 3px; height: max(3px, var(--activity-height)); border-radius: 3px 3px 0 0; background: var(--accent-fill); }
.admin-activity-chart-dates { display: flex; justify-content: space-between; margin-top: -.55rem; color: var(--text-muted); font-size: .62rem; }
.admin-activity-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: .85rem; }
.admin-activity-split h3 { margin-bottom: .45rem; color: var(--text); font-size: .78rem; }
.admin-mode-breakdown, .admin-daily-history { display: grid; border: 1px solid var(--border); border-radius: 11px; overflow: clip; }
.admin-mode-breakdown > div { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: .1rem .55rem; padding: .55rem .65rem; border-top: 1px solid var(--border); }
.admin-mode-breakdown > div:first-child, .admin-daily-history > div:first-child { border-top: 0; }
.admin-mode-breakdown strong, .admin-daily-history strong { color: var(--text); font-size: .74rem; }
.admin-mode-breakdown span, .admin-mode-breakdown small { color: var(--text-muted); font-size: .66rem; }
.admin-mode-breakdown small { grid-column: 1 / -1; }
.admin-mode-breakdown > p, .admin-daily-history > p { padding: .8rem; color: var(--text-muted); font-size: .72rem; }
.admin-daily-history > div { min-height: 38px; display: grid; grid-template-columns: minmax(80px, 1fr) 34px 80px 70px; align-items: center; gap: .4rem; padding: .35rem .55rem; border-top: 1px solid var(--border); }
.admin-daily-history time, .admin-daily-history span { color: var(--text-muted); font-size: .66rem; font-variant-numeric: tabular-nums; }

.admin-form-page { max-width: 860px; }
.admin-create-form { padding: 0; overflow: clip; }
.admin-form-section { display: grid; gap: .9rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
.admin-form-section > div:first-child { display: flex; align-items: center; gap: .6rem; }
.admin-form-section h2 { color: var(--text); font-size: 1rem; }
.admin-step { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-text); background: color-mix(in srgb, var(--accent-fill) 13%, var(--surface)); font-size: .72rem; font-weight: 850; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-field { display: grid; align-content: start; gap: .4rem; }
.admin-field > label, .admin-control-panel label { color: var(--text); font-size: .76rem; font-weight: 800; }
.admin-role-options > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.admin-role-options label { min-height: 48px; display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 11px; color: var(--text); font-size: .8rem; font-weight: 750; background: var(--bg-elevated); cursor: pointer; }
.admin-role-options input, .admin-check-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent-fill); }
.admin-form-options { gap: .65rem; }
.admin-check-option { min-height: 58px; display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated); cursor: pointer; }
.admin-check-option > span { display: grid; gap: .1rem; }
.admin-check-option strong { color: var(--text); font-size: .8rem; }
.admin-check-option small { color: var(--text-muted); font-size: .7rem; line-height: 1.35; }
.admin-expiry-field { max-width: 320px; margin-top: .25rem; }
.field-error { color: var(--danger, #a33b36); font-size: .75rem; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.25rem; }

.admin-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); gap: 1rem; align-items: start; }
.admin-detail-main { display: grid; gap: .85rem; }
.admin-identity { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: .9rem; }
.admin-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: var(--accent-fill); font-size: 1.45rem; font-weight: 850; }
.admin-identity h2 { color: var(--text); font-size: 1.25rem; }
.admin-identity p { margin-top: .15rem; color: var(--text-muted); font-size: .8rem; }
.admin-identity-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.admin-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: .75rem; }
.admin-facts div { padding: .75rem; border-radius: 10px; background: var(--bg-elevated); }
.admin-facts dt { color: var(--text-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.admin-facts dd { margin: .2rem 0 0; color: var(--text); font-size: .85rem; font-variant-numeric: tabular-nums; }
.admin-control-panel { overflow: clip; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 34px rgba(8, 20, 30, .09); }
.admin-control-head { padding: 1rem 1.1rem .85rem; background: color-mix(in srgb, var(--accent-fill) 7%, var(--surface)); }
.admin-control-head h2 { color: var(--text); font-size: 1.12rem; }
.admin-control-group { display: grid; gap: .7rem; padding: .9rem 1.1rem; border-top: 1px solid var(--border); }
.admin-control-copy { display: grid; gap: .15rem; }
.admin-control-copy h3 { color: var(--text); font-size: .86rem; }
.admin-control-copy p, .admin-danger p { color: var(--text-muted); font-size: .72rem; line-height: 1.4; }
.admin-control-group form { display: grid; gap: .5rem; }
.admin-inline-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.admin-more-settings summary, .admin-danger summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .8rem; font-weight: 800; }
.admin-danger { border-color: color-mix(in srgb, #c94b44 34%, var(--border)); }
.admin-danger summary { color: var(--danger, #a33b36); }
.admin-protected { margin: 1rem; padding: 1rem; border-radius: 12px; color: var(--text); background: var(--bg-elevated); }
.admin-protected p { margin-top: .25rem; color: var(--text-muted); font-size: .76rem; }

.admin-confirm-dialog { width: min(440px, calc(100vw - 2rem)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background-color: var(--theme-surface, #fff); background-image: none; opacity: 1; isolation: isolate; box-shadow: 0 28px 80px rgba(0, 0, 0, .28); }
.admin-confirm-dialog::backdrop { background: rgba(5, 12, 18, .58); backdrop-filter: blur(3px); }
.admin-confirm-shell { position: relative; display: grid; gap: .9rem; padding: 1.5rem; }
.admin-dialog-close { position: absolute; top: .65rem; right: .65rem; width: 44px; height: 44px; border: 0; border-radius: 10px; color: var(--text-muted); background: transparent; font-size: 1.45rem; cursor: pointer; }
.admin-dialog-close:hover { color: var(--text); background: var(--bg-elevated); }
.admin-confirm-heading { display: flex; align-items: center; gap: .8rem; padding-right: 2.25rem; }
.admin-confirm-mark { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 14px; color: var(--accent-text); background: color-mix(in srgb, var(--accent-fill) 14%, var(--surface)); }
.admin-confirm-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.admin-confirm-heading .admin-kicker { display: block; margin-bottom: .14rem; }
.admin-confirm-shell h2 { margin: 0; color: var(--text); font-size: 1.15rem; }
.admin-confirm-shell > p { max-width: 38ch; margin: -.2rem 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.admin-confirm-shell menu { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .35rem; }
.profile-username .admin-badge { margin-left: .45rem; vertical-align: middle; font-family: var(--sans); }

@media (max-width: 1050px) {
    .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-role-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-filters { grid-template-columns: minmax(200px, 1fr) 1fr auto; }
    .admin-clear-filter { grid-column: 1 / -1; justify-self: start; }
    .admin-detail-grid { grid-template-columns: 1fr; }
    .admin-control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-control-head { grid-column: 1 / -1; }
    .admin-control-group { border-right: 1px solid var(--border); }
}

@media (max-width: 700px) {
    .admin-page { padding-inline: .75rem; }
    .admin-heading { align-items: stretch; flex-direction: column; }
    .admin-heading .page-title { font-size: 2rem; }
    .admin-heading .btn { width: 100%; min-height: 44px; padding-inline: .75rem; }
    .admin-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .admin-tabs a { min-width: 0; padding-inline: .55rem; font-size: .72rem; text-align: center; overflow-wrap: anywhere; }
    .admin-launchpad { grid-template-columns: 1fr; }
    .admin-launch-card, .admin-launch-card-primary { grid-row: auto; min-height: 84px; }
    .admin-role-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-role-category { min-height: 56px; padding: .65rem .75rem; }
    .admin-filters { grid-template-columns: 1fr; }
    .admin-clear-filter { grid-column: auto; }
    .admin-table-head { display: none; }
    .admin-user-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; padding: .85rem; }
    .admin-user-row > span:nth-child(2), .admin-user-row > span:nth-child(3), .admin-user-row > span:nth-child(4), .admin-user-row time { grid-column: 1; }
    .admin-row-arrow { grid-column: 2; grid-row: 1; }
    .admin-form-grid, .admin-role-options > div { grid-template-columns: 1fr; }
    .admin-identity { grid-template-columns: 52px minmax(0, 1fr); }
    .admin-avatar { width: 52px; height: 52px; }
    .admin-identity-badges { grid-column: 1 / -1; justify-content: start; }
    .admin-facts { grid-template-columns: 1fr; }
    .admin-control-panel { grid-template-columns: 1fr; }
    .admin-control-head { grid-column: auto; }
    .admin-control-group { border-right: 0; }
    .admin-inline-control { grid-template-columns: 1fr; }
    .admin-form-actions { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 2; background: var(--surface); }
    .admin-feed-row { grid-template-columns: 8px minmax(0, 1fr); }
    .admin-feed-row time { grid-column: 2; }
    .admin-confirm-shell menu { grid-template-columns: 1fr; }
    .admin-student-search { grid-template-columns: 1fr 1fr; }
    .admin-student-search input { grid-column: 1 / -1; }
    .admin-student-list-head { display: none; }
    .admin-student-row { grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: .55rem; padding: .85rem; }
    .admin-student-row > strong { grid-column: 1 / 4; }
    .admin-student-row > span { justify-items: start; }
    .admin-student-row time { grid-column: 1 / 4; }
    .admin-student-row i { grid-column: 4; grid-row: 1; }
    .admin-section-head { align-items: start; flex-direction: column; }
    .admin-activity-last { text-align: left; }
    .admin-activity-periods { grid-template-columns: 1fr; }
    .admin-activity-chart { gap: 2px; padding-inline: .35rem; }
    .admin-activity-split { grid-template-columns: 1fr; }
    .admin-daily-history > div { grid-template-columns: minmax(76px, 1fr) 28px 74px 66px; gap: .25rem; padding-inline: .4rem; }
}

* {
    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 {
    min-height: 44px;
    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 {
    min-height: 44px;
    display: flex;
    align-items: center;
    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);
}

.menu-user-icon,
.side-sublink-icon {
    object-fit: contain;
}

.side-sublink-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.side-sublink:has(.side-sublink-icon) { gap: 0.48rem; }

/* 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: 44px;
    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: 100%;
    height: 100%;
    object-fit: cover;
}

.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;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--theme-accent) 34%, transparent) transparent;
    scrollbar-width: thin;
}

.move-list::-webkit-scrollbar,
.analysis-tree::-webkit-scrollbar { width: 7px; }

.move-list::-webkit-scrollbar-thumb,
.analysis-tree::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 34%, transparent);
}

.move-table {
    display: grid;
    width: 100%;
    min-width: 0;
    align-content: start;
    gap: 2px;
    padding: .25rem 0;
}

.move-table__row {
    display: grid;
    min-width: 0;
    grid-template-columns: 2.65rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border-radius: 7px;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.move-table__row:nth-child(odd) {
    background: color-mix(in srgb, var(--theme-input) 78%, transparent);
}

.move-table__number {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding-inline: .55rem .35rem;
    color: var(--theme-faint);
    font-size: .72rem;
    font-weight: 750;
}

.move-table__cell {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .35rem .55rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--theme-text);
    background: transparent;
    font: inherit;
    text-align: left;
    transition: color 120ms var(--ease-out), background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}

.move-table__cell strong {
    min-width: 0;
    overflow: hidden;
    font-size: .8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.move-table__cell { cursor: pointer; }

button.move-table__cell:hover {
    border-color: var(--theme-border);
    color: var(--theme-accent-text);
    background: var(--theme-input);
}

button.move-table__cell:focus-visible {
    z-index: 1;
    outline: 3px solid color-mix(in srgb, var(--theme-accent) 42%, transparent);
    outline-offset: -3px;
}

.move-table__cell:active { background: var(--theme-accent-soft); }

.move-table__cell.is-current {
    border-color: color-mix(in srgb, var(--theme-accent) 44%, transparent);
    color: var(--theme-on-accent);
    background: var(--theme-accent);
    box-shadow: inset 0 -2px color-mix(in srgb, #000 14%, transparent);
}

.move-table__cell--empty { pointer-events: none; }

.move-table__badge {
    --quality-color: currentColor;
    display: inline-flex;
    min-width: 1.3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--quality-color);
    font-size: .7rem;
    font-weight: 950;
    line-height: 1;
}

.move-table__cell.is-current .move-table__badge { color: currentColor; }

.move-table__result {
    display: grid;
    min-height: 38px;
    place-items: center;
    margin-top: .2rem;
    border-top: 1px solid var(--theme-border);
    color: var(--theme-title);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.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-surface-hover: #e3edf5;
    --theme-focus: rgba(47, 102, 173, 0.42);
    --theme-success: #277146;
    --theme-success-soft: rgba(39, 113, 70, 0.12);
    --theme-warning: #805a28;
    --theme-warning-soft: rgba(217, 154, 69, 0.15);
    --theme-error: #a13d32;
    --theme-error-soft: rgba(161, 61, 50, 0.11);
    --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-surface-hover: #485049;
    --theme-focus: rgba(112, 174, 114, 0.48);
    --theme-success: #9bd2a0;
    --theme-success-soft: rgba(112, 174, 114, 0.18);
    --theme-warning: #f3c778;
    --theme-warning-soft: rgba(201, 155, 84, 0.2);
    --theme-error: #ffaaa0;
    --theme-error-soft: rgba(240, 128, 106, 0.16);
    --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);
}

/* Medianoche conserva la geometría de Arena, pero cambia por completo la
   familia cromática: azul petróleo para las superficies y ámbar para jugar. */
[data-theme="chessty-midnight"] {
    color-scheme: dark;
    --theme-page: #0b1820;
    --theme-sidebar: #09141b;
    --theme-surface: #122732;
    --theme-input: #18323f;
    --theme-surface-alt: #15303b;
    --theme-title: #f4ede2;
    --theme-border: rgba(210, 228, 230, 0.15);
    --theme-text: #f4ede2;
    --theme-muted: #b8c7c8;
    --theme-faint: #81999d;
    --theme-accent: #e2a64b;
    --theme-accent-hover: #f0b85e;
    --theme-accent-hover-strong: #c7842e;
    --theme-accent-edge: #a66a22;
    --theme-accent-text: #f3c778;
    --theme-accent-soft: rgba(226, 166, 75, 0.16);
    --theme-on-accent: #14262d;
    --theme-surface-hover: #1d3b48;
    --theme-focus: rgba(226, 166, 75, 0.5);
    --theme-success: #9bd2a0;
    --theme-success-soft: rgba(93, 163, 112, 0.18);
    --theme-warning: #f3c778;
    --theme-warning-soft: rgba(226, 166, 75, 0.18);
    --theme-error: #ffaaa0;
    --theme-error-soft: rgba(240, 128, 106, 0.16);
    --theme-gold: #e2a64b;
    --theme-board-light: #e7d3ac;
    --theme-board-dark: #42677a;
    --theme-board-coords: #d9edf0;
    --theme-page-glow: rgba(63, 112, 130, 0.2);
    --theme-page-shine: rgba(244, 237, 226, 0.025);
    --theme-shadow: rgba(2, 10, 14, 0.48);
}

: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);
    --theme-text-muted: var(--theme-muted);
    --theme-heading: var(--theme-title);
    --theme-link: var(--theme-accent-text);
    --theme-danger: var(--theme-error);
    --theme-shadow-sm: 0 8px 24px var(--theme-shadow);
    --theme-shadow-xs: 0 3px 10px var(--theme-shadow);
    --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: color-mix(in srgb, var(--theme-surface) 66%, transparent);
}

body:has(.home-club) .side-submenu {
    background: var(--theme-surface);
    box-shadow: 0 18px 40px var(--theme-shadow);
}

body:has(.home-club) .btn-ghost {
    background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
    border-color: var(--theme-border);
    box-shadow: 0 4px 0 var(--theme-shadow);
}

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: color-mix(in srgb, var(--theme-surface) 72%, transparent);
    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: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border));
    background: var(--theme-surface-hover);
    box-shadow: 0 10px 22px var(--theme-shadow);
}

.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 color-mix(in srgb, var(--theme-accent) 24%, var(--theme-border));
    border-radius: 14px;
    color: var(--home-navy);
    text-decoration: none;
    background: color-mix(in srgb, var(--theme-surface) 80%, transparent);
    box-shadow: 0 10px 26px var(--theme-shadow);
    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: color-mix(in srgb, var(--theme-surface) 72%, transparent); transform: translateY(-3px); }
.home-way-primary { background: color-mix(in srgb, var(--theme-surface-alt) 48%, transparent); }

.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: var(--theme-surface);
}

.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: color-mix(in srgb, var(--theme-surface) 72%, transparent);
}

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

/* La portada reutiliza las miniaturas finales reales del historial completo,
   con filas más cortas para que las seis últimas sigan cabiendo junto al
   balance de juego. */
.home-game-history { gap: .42rem; }
.home-game-history .game-row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 78px;
    border-radius: 11px;
}
.home-game-history .game-row-main {
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: 78px;
    gap: .7rem;
    padding: .48rem .65rem;
}
.home-game-history .game-mini-board {
    width: 62px;
    height: 62px;
    border-radius: 6px;
    box-shadow: none;
}
.home-game-history .game-row-summary { gap: .2rem; }
.home-game-history .game-result-label { font-size: .9rem; }
.home-game-history .game-time-control { padding: .18rem .36rem; font-size: .63rem; }
.home-game-history .game-rival-line { gap: .32rem; }
.home-game-history .game-rival-line > span { font-size: .56rem; }
.home-game-history .game-rival-line strong { font-size: .83rem; }
.home-game-history .game-row-summary__meta { font-size: .64rem; line-height: 1.2; }
.home-game-history .game-row-summary__meta > * { padding: 0 .35rem; }

.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; }
    .home-game-history .game-row { min-height: 74px; }
    .home-game-history .game-row-main { grid-template-columns: 58px minmax(0, 1fr); min-height: 74px; }
    .home-game-history .game-mini-board { width: 58px; height: 58px; }
}

@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);
}

/* Reclamar tablas (FIDE 9.2 y 9.3). Solo aparece cuando el reglamento lo
   permite, y va justo al lado del boton de ofrecer tablas: si se vieran
   iguales no habria forma de distinguirlos. Usa el mismo resalte de acento
   que ya emplea .side-link.is-active — no introduce colores nuevos. */
.icon-btn-claim {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: var(--accent-text);
}

.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;
    gap: .4rem;
    margin: 0;
    padding: 0;
}

.game-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.92rem;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.game-row:hover {
    border-color: var(--theme-accent);
    background: var(--theme-accent-soft);
}

.game-row-main {
    display: grid;
    grid-template-columns: 10px 5rem minmax(7rem, 1fr) auto minmax(13rem, auto);
    align-items: center;
    gap: .7rem;
    min-width: 0;
    min-height: 58px;
    padding: .55rem .25rem .55rem .75rem;
    color: inherit;
    text-decoration: none;
}

.game-row-main:focus-visible,
.game-action-link:focus-visible,
.game-pagination a:focus-visible {
    outline: 3px solid var(--theme-accent);
    outline-offset: 2px;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-color {
    color: var(--text-muted);
    font-size: .8rem;
}

.game-meta {
    display: grid;
    grid-template-columns: auto minmax(9rem, 1fr) auto;
    align-items: center;
    gap: .55rem;
    color: var(--text-faint);
    font-size: 0.82rem;
    text-align: right;
}

.game-meta strong { color: var(--text-muted); }

.game-row-actions {
    display: flex;
    gap: .35rem;
    padding-right: .55rem;
}

.game-action-link,
.game-pagination a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .5rem .7rem;
    border-radius: 9px;
    color: var(--text-muted);
    font-weight: 700;
    text-decoration: none;
}

.game-action-link:hover { background: var(--theme-accent-soft); color: var(--text); }
.game-action-link--analysis { color: var(--theme-accent); }

.game-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: .85rem;
}

.game-pagination a { border: 1px solid var(--border); }

/* Historial visual: cada fila conserva la densidad de Lichess, pero la
   miniatura usa el FEN final real de Chessty y el color del propio jugador. */
.profile-games-card { padding: clamp(.85rem, 2vw, 1.25rem); }
.profile-games-card__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; }
.profile-games-card__header .card-title { margin: 0; }
.profile-games-card__eyebrow { margin: 0 0 .18rem; color: var(--theme-accent); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.profile-games-card__count { padding: .3rem .55rem; border-radius: 999px; background: var(--theme-accent-soft); color: var(--theme-accent); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.game-history--boards { gap: .55rem; }
.game-history--boards .game-row { grid-template-columns: minmax(0, 1fr) 118px; min-height: 116px; overflow: hidden; border-color: color-mix(in srgb, var(--border) 88%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg-elevated) 96%, var(--theme-accent-soft)); }
.game-history--boards .game-row-main { grid-template-columns: 94px minmax(0, 1fr); min-height: 116px; gap: .95rem; padding: .65rem .8rem; }
.game-mini-board { display: block; width: 94px; height: 94px; overflow: hidden; border-radius: 8px; box-shadow: 0 5px 14px color-mix(in srgb, #000 18%, transparent); }
.game-mini-board .cg-wrap { width: 100%; height: 100%; }
.game-row-summary { display: grid; min-width: 0; align-content: center; gap: .38rem; }
.game-row-summary__top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.game-history--boards .game-result-label { min-width: 0; font-size: 1rem; letter-spacing: -.015em; }
.game-time-control { padding: .23rem .48rem; border-radius: 6px; background: color-mix(in srgb, var(--theme-accent) 10%, var(--bg-input)); color: var(--text); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.game-rival-line { display: flex; align-items: baseline; gap: .42rem; min-width: 0; }
.game-rival-line > span { color: var(--text-faint); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.game-rival-line strong { overflow: hidden; color: var(--text); font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.game-row-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; color: var(--text-muted); font-size: .74rem; line-height: 1.35; }
.game-row-summary__meta > * { padding: 0 .55rem; border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent); }
.game-row-summary__meta > :first-child { padding-left: 0; border-left: 0; }
.game-detail-color { color: var(--text-muted); font-weight: 750; }
.game-detail-ending { color: var(--text); }
.game-row-summary__meta time { color: var(--text-faint); }
.game-history--boards .game-row-actions { flex-direction: column; justify-content: center; gap: .4rem; padding: .55rem .6rem .55rem 0; }
.game-history--boards .game-action-link { min-width: 112px; min-height: 36px; padding: .35rem .5rem; border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); background: color-mix(in srgb, var(--bg-input) 72%, transparent); color: var(--text-muted); font-size: .73rem; }
.game-history--boards .game-action-link span { margin-right: .12rem; color: var(--theme-accent); font-size: .95rem; }
.game-history--boards .game-action-link--view:hover { border-color: var(--theme-accent); color: var(--text); }
.game-history--boards .game-action-link--analysis { border-color: color-mix(in srgb, var(--theme-accent) 32%, var(--border)); background: color-mix(in srgb, var(--theme-accent) 10%, transparent); }

@media (max-width: 560px) {
    .game-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .game-row-main {
        grid-template-columns: 10px auto minmax(0, 1fr) auto;
        gap: .55rem;
        padding: .65rem .75rem .3rem;
    }
    .game-result-label { min-width: 0; }
    .game-meta {
        grid-column: 2 / -1;
        grid-template-columns: auto minmax(0, 1fr);
        text-align: left;
    }
    .game-meta time { grid-column: 1 / -1; }
    .game-row-actions { justify-content: flex-end; padding: 0 .45rem .45rem; }
    .game-action-link { flex: 1; }
    .game-pagination { flex-wrap: wrap; }
    .profile-games-card { padding: .85rem; }
    .game-history--boards .game-row { min-height: 96px; }
    .game-history--boards .game-row-main { grid-template-columns: 76px minmax(0, 1fr); min-height: 96px; gap: .65rem; padding: .5rem; }
    .game-mini-board { width: 76px; height: 76px; }
    .game-row-summary__meta { gap: .12rem 0; font-size: .68rem; }
    .game-row-summary__meta > * { padding: 0 .35rem; }
    .game-history--boards .game-row-actions { display: none; }
    .game-history--boards .game-row-main::after { content: '›'; position: absolute; right: .48rem; color: var(--text-muted); font-size: 1.25rem; }
    .game-history--boards .game-row-main { position: relative; padding-right: 1.65rem; }
}

/* ===========================================================================
   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: color-mix(in srgb, var(--theme-surface) 68%, transparent);
}

body:has(.play-room) .side-submenu {
    background: var(--theme-surface);
    box-shadow: 0 18px 40px var(--theme-shadow);
}

body:has(.play-room) .btn-ghost {
    background: color-mix(in srgb, var(--theme-surface) 76%, transparent);
    border-color: var(--theme-border);
    box-shadow: 0 4px 0 var(--theme-shadow);
}

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: color-mix(in srgb, var(--theme-surface) 58%, transparent);
}

.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: var(--theme-border);
    background: var(--theme-surface);
}

.play-room .player-clock {
    min-width: 5.2rem;
    padding: .35rem .7rem;
    border: 1px solid var(--theme-border);
    border-radius: 9px;
    color: var(--play-navy);
    background: var(--theme-surface);
    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: var(--theme-on-accent);
    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: var(--theme-surface);
    box-shadow: 0 22px 55px var(--theme-shadow);
    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 var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
    box-shadow: 0 16px 34px var(--theme-shadow), 0 3px 0 var(--theme-shadow);
    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-result {
    --play-result-tone: var(--theme-accent);
    position: relative;
    display: grid;
    justify-items: center;
    padding: .35rem 0 .1rem;
    text-align: center;
    outline: none;
    animation: play-result-in 220ms var(--ease-out) both;
}

.play-result[hidden] {
    display: none;
}

.play-result.is-win {
    --play-result-tone: var(--theme-success, #4f8f63);
}

.play-result.is-loss {
    --play-result-tone: var(--theme-danger, #b44d48);
}

.play-result.is-draw,
.play-result.is-spectator {
    --play-result-tone: var(--theme-accent);
}

.play-result-seal {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: .65rem;
    place-items: center;
    color: var(--play-result-tone);
    background: color-mix(in srgb, var(--play-result-tone) 11%, var(--theme-surface-alt));
    border: 1px solid color-mix(in srgb, var(--play-result-tone) 34%, var(--theme-border));
    border-radius: 50%;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--play-result-tone) 13%, transparent);
}

.play-result-seal svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.play-result-kicker {
    margin: 0;
    color: var(--theme-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.play-result h2 {
    margin: .1rem 0 0;
    color: var(--theme-title);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 400;
    line-height: 1;
}

.play-result-summary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .55rem;
    margin-top: .45rem;
}

.play-result-summary strong {
    color: var(--theme-title);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.play-result-summary span {
    color: var(--theme-muted);
    font-size: .78rem;
    font-weight: 700;
}

.play-result-players {
    display: grid;
    width: 100%;
    gap: .4rem;
    margin-top: 1rem;
    padding: .55rem;
    background: var(--theme-surface-alt);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
}

.play-result-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    min-height: 48px;
    padding: .45rem .55rem;
    text-align: left;
    border-radius: 9px;
}

.play-result-player.is-winner {
    background: color-mix(in srgb, var(--play-result-tone) 9%, var(--theme-surface));
    box-shadow: inset 3px 0 var(--play-result-tone);
}

.play-result-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.play-result-color.is-white {
    background: #f5f1e8;
    border: 1px solid rgba(26, 38, 46, .28);
}

.play-result-color.is-black {
    background: #20262a;
    border: 1px solid rgba(255, 255, 255, .18);
}

.play-result-player > span:nth-child(2) {
    min-width: 0;
}

.play-result-player small,
.play-result-player strong {
    display: block;
}

.play-result-player small {
    color: var(--theme-faint);
    font-size: .63rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.play-result-player strong {
    overflow: hidden;
    color: var(--theme-text);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.play-result-player time {
    color: var(--theme-title);
    font-size: .82rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.play-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    width: 100%;
    margin-top: .85rem;
}

.play-result-actions .btn {
    min-width: 0;
    min-height: 46px;
    padding-inline: .65rem;
    font-size: .78rem;
}

.play-result-view {
    grid-column: 1 / -1;
    min-height: 44px;
    padding: .5rem;
    color: var(--theme-muted);
    font: inherit;
    font-size: .76rem;
    font-weight: 750;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.play-result-view:hover {
    color: var(--theme-text);
    background: var(--theme-surface-alt);
}

.play-result-view:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--theme-accent) 46%, transparent);
    outline-offset: 2px;
}

@keyframes play-result-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.play-moves-heading {
    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-list {
    min-height: 8.5rem;
    max-height: min(38vh, 21rem);
    margin: 0;
    padding: .4rem 0;
    overflow-y: auto;
}

.play-room .move-table__row:nth-child(even) { background: rgba(232,240,247,.45); }
.play-room .move-table__number { color: var(--text-faint); }
.play-room .move-table__cell { color: var(--play-navy); }
.play-room .move-table__cell.is-current { 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; }

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

.play-confirm-dialog {
    color: var(--text);
    border: 1px solid var(--play-line);
    background: var(--theme-surface);
    box-shadow: 0 28px 75px var(--theme-shadow);
}

.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(--theme-accent); background: var(--theme-surface-hover); }
.play-promotion-options button:focus-visible { outline: 3px solid var(--theme-focus); 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%); }

/* Rush, Battle y entrenamiento a medida usan el mismo tablero temático que
   el resto de Chessty. board.css se carga desde el bundle antes de main.css y
   conserva una paleta clásica como base; estas reglas, más específicas y sin
   !important, sustituyen solo esos tres modos por los tokens de data-theme. */
.rush-board-shell cg-board,
.rush-review-board cg-board,
[data-battle-board] cg-board,
.custom-training-board 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
    );
    box-shadow: 0 2px 4px var(--theme-shadow), 0 18px 38px var(--theme-shadow);
}

.rush-board-shell coords,
.rush-review-board coords,
[data-battle-board] coords,
.custom-training-board coords {
    color: var(--theme-board-coords);
    text-transform: none;
}

.rush-board-shell cg-board square.last-move,
.rush-review-board cg-board square.last-move,
[data-battle-board] cg-board square.last-move,
.custom-training-board cg-board square.last-move {
    background-color: color-mix(in srgb, var(--theme-warning) 56%, transparent);
}

.rush-board-shell cg-board square.selected,
.rush-review-board cg-board square.selected,
[data-battle-board] cg-board square.selected,
.custom-training-board cg-board square.selected {
    background-color: color-mix(in srgb, var(--theme-warning) 72%, transparent);
}

.rush-board-shell cg-board square.move-dest,
.rush-review-board cg-board square.move-dest,
[data-battle-board] cg-board square.move-dest,
.custom-training-board cg-board square.move-dest {
    background: radial-gradient(color-mix(in srgb, var(--theme-title) 34%, transparent) 22%, transparent 23%);
}

.rush-board-shell cg-board square.move-dest:hover,
.rush-review-board cg-board square.move-dest:hover,
[data-battle-board] cg-board square.move-dest:hover,
.custom-training-board cg-board square.move-dest:hover {
    background: color-mix(in srgb, var(--theme-warning) 38%, transparent);
}

.rush-board-shell cg-board square.oc.move-dest,
.rush-review-board cg-board square.oc.move-dest,
[data-battle-board] cg-board square.oc.move-dest,
.custom-training-board cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0 78%, color-mix(in srgb, var(--theme-title) 42%, transparent) 79%);
}

.rush-board-shell cg-board square.check,
.rush-review-board cg-board square.check,
[data-battle-board] cg-board square.check,
.custom-training-board cg-board square.check {
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--theme-error) 92%, transparent) 0%,
        color-mix(in srgb, var(--theme-error) 34%, transparent) 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: var(--theme-heading); }
.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(--theme-accent); box-shadow: 0 14px 28px var(--theme-shadow); }
.watch-game-card:focus-visible { outline: 3px solid var(--theme-focus); 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: var(--theme-success); box-shadow: 0 0 0 4px var(--theme-success-soft); }
.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) {
    .fair-play-case-heading { align-items: flex-start; flex-direction: column; }
    .fair-play-case-state { width: 100%; flex-wrap: wrap; }
    .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: var(--theme-heading); 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: var(--theme-surface-alt); }
.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: color-mix(in srgb, var(--theme-surface) 96%, transparent);
    box-shadow: 0 24px 65px var(--theme-shadow);
}
.auth-page .auth-title { color: var(--theme-title); 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: var(--theme-surface-alt); }
.auth-page .auth-alert-error { color: var(--theme-error); background: var(--theme-error-soft); }
.auth-page .auth-alert-success { color: var(--theme-success); background: var(--theme-success-soft); }

.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: color-mix(in srgb, var(--theme-surface) 97%, transparent) !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: var(--theme-heading);
    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: var(--theme-heading);
    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 color-mix(in srgb, var(--theme-accent) 24%, var(--theme-border));
    border-radius: 999px;
    color: var(--accent-text);
    background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
    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: var(--theme-heading);
    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: var(--theme-surface-hover); }

.bot-studio .bot-item.is-selected {
    border-color: var(--theme-accent);
    background: var(--theme-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent), 0 5px 12px var(--theme-shadow);
}

.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: var(--theme-heading);
    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: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border)); background: var(--theme-surface-hover); }
.bot-color-field .color-icon-btn.is-selected { border-color: var(--theme-accent); color: var(--theme-heading); background: var(--theme-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent); }

.bot-color-piece,
.bot-color-random { width: 20px; height: 20px; flex: 0 0 auto; }
.bot-color-piece { stroke: var(--theme-heading); 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: var(--theme-heading); 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: var(--theme-warning); box-shadow: 0 0 0 4px var(--theme-warning-soft); }
.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: var(--theme-surface-alt); }
.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: var(--theme-accent);
    background: var(--theme-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent), 0 5px 12px var(--theme-shadow);
}

.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 var(--theme-focus);
    outline-offset: 3px;
}

.bot-lobby-shell .color-icon-btn:has(input:checked) {
    border-color: var(--theme-accent);
    color: var(--theme-heading);
    background: var(--theme-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

.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: color-mix(in srgb, var(--theme-surface) 97%, transparent) !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: var(--theme-heading);
    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 var(--theme-border);
    border-radius: 11px;
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    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: var(--theme-heading);
    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));
    }
}

.home-mobile-quick {
    display: none;
}

@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 color-mix(in srgb, var(--theme-accent) 18%, var(--theme-border));
    border-radius: 12px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--theme-surface) 58%, transparent);
    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: var(--theme-text); }

.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 var(--theme-border);
    background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
    box-shadow: 0 18px 50px var(--theme-shadow);
    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: var(--theme-heading);
    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: var(--theme-heading);
    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: var(--theme-accent);
    background:
        linear-gradient(145deg, var(--theme-surface), var(--theme-accent-soft));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent), 0 12px 25px var(--theme-shadow);
}

.bot-lobby-shell .bot-item:has(input:focus-visible) {
    outline: 3px solid var(--theme-focus);
    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: var(--theme-heading);
    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: var(--theme-heading);
    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: var(--theme-text);
    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: var(--theme-heading);
    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: var(--theme-accent);
    color: var(--theme-heading);
    background: var(--theme-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent), 0 5px 12px var(--theme-shadow);
}

.bot-brief .color-icon-btn:has(input:focus-visible) {
    outline: 3px solid var(--theme-focus);
    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, var(--theme-page-glow), 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 color-mix(in srgb, var(--theme-accent) 24%, var(--theme-border));
    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;
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    box-shadow: 0 10px 28px var(--theme-shadow);
    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: color-mix(in srgb, var(--theme-accent) 44%, var(--theme-border));
    background: var(--theme-surface-hover);
    box-shadow: 0 14px 34px var(--theme-shadow);
    transform: translateY(-2px);
}

.theme-option > input:focus-visible + .theme-option-visual {
    outline: 3px solid var(--theme-focus);
    outline-offset: 3px;
}

.theme-option > input:checked + .theme-option-visual {
    border-color: var(--accent-fill);
    background:
        linear-gradient(135deg, var(--theme-accent-soft), transparent 55%),
        var(--bg-elevated);
    box-shadow:
        0 0 0 1px var(--accent-fill),
        0 15px 38px var(--theme-shadow);
}

.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;
    --preview-on-accent: #ffffff;
    display: grid;
    grid-template-columns: 27% 73%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--preview-muted);
    border-radius: 13px;
    background: var(--preview-page);
    box-shadow: 0 13px 28px var(--theme-shadow);
}

.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;
    --preview-on-accent: #172019;
}

.theme-preview[data-preview-theme="chessty-midnight"] {
    --preview-page: #0b1820;
    --preview-sidebar: #09141b;
    --preview-surface: #122732;
    --preview-text: #f4ede2;
    --preview-muted: rgba(210, 228, 230, 0.16);
    --preview-accent: #e2a64b;
    --preview-board-light: #e7d3ac;
    --preview-board-dark: #42677a;
    --preview-on-accent: #14262d;
}

.theme-preview-sidebar {
    display: flex;
    flex-direction: column;
    gap: 9%;
    padding: 12% 14%;
    background: var(--preview-sidebar);
    box-shadow: 3px 0 9px var(--theme-shadow);
}

.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: var(--preview-on-accent);
    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 var(--theme-surface);
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--theme-border);
}

.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:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body {
    background:
        radial-gradient(circle at 78% 2%, var(--theme-page-glow), transparent 31rem),
        linear-gradient(135deg, var(--theme-page-shine), transparent 52%),
        var(--theme-page);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .sidebar,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.home-club) .sidebar,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.play-room) .sidebar,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .sidebar {
    border-color: var(--theme-border);
    background:
        linear-gradient(180deg, var(--theme-page-shine), transparent 30%),
        var(--theme-sidebar);
    box-shadow: 9px 0 34px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .logo-full {
    filter: brightness(1.16) saturate(0.75) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.28));
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .side-link:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .side-sublink:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.home-club) .side-link:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.play-room) .side-link:hover {
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-text) 7%, transparent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .side-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);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .side-submenu,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.home-club) .side-submenu,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.play-room) .side-submenu,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .side-submenu {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 18px 44px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .btn-ghost,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.home-club) .btn-ghost,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.play-room) .btn-ghost,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .btn-ghost {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-page) 82%, #000);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .btn-ghost:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .btn-ghost:hover {
    background: var(--theme-surface-hover);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .content-page .page-title,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .workspace-intro h1,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .content-page .card-title,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .workspace-page .card-title,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .profile-page .profile-username,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .watch-page .empty-text {
    color: var(--theme-title);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .content-page .card,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .workspace-page .card,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .card,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .interface-settings {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent);
    box-shadow: 0 16px 42px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .content-page .empty,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .workspace-page .empty,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .profile-page .home-stat,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .puzzle-status,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .engine-switch,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-game-workspace .player-side {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .field input,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .field select,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .field textarea {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-input);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .field input::placeholder,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .field textarea::placeholder {
    color: var(--theme-faint);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .confirm-dialog,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-confirm-dialog {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 30px 80px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .auth-card {
    border-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-surface) 97%, transparent);
    box-shadow: 0 26px 70px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .auth-title {
    color: var(--theme-title);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .btn-social {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-alert-success,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .auth-alert-success {
    border-color: color-mix(in srgb, var(--theme-success) 38%, var(--theme-border));
    color: var(--theme-success);
    background: var(--theme-success-soft);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-alert-error,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .auth-page .auth-alert-error {
    border-color: color-mix(in srgb, var(--theme-error) 38%, var(--theme-border));
    color: var(--theme-error);
    background: var(--theme-error-soft);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .settings-tab:hover {
    color: var(--theme-text);
}

/* Portada */
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.home-club) {
    background:
        radial-gradient(circle at 78% 4%, var(--theme-page-glow), transparent 30rem),
        linear-gradient(135deg, var(--theme-page-shine), transparent 50%),
        var(--theme-page);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-stage {
    border-color: var(--theme-border);
    background: var(--theme-surface);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-stage::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--theme-accent) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 8%, transparent) 1px, transparent 1px);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-stage::after {
    color: color-mix(in srgb, var(--theme-accent) 5%, transparent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-rhythm-card,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-live-game,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-personal-grid {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-surface-alt) 82%, transparent);
    box-shadow: 0 12px 28px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-rhythm-card:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-rhythm-card:focus-visible,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-way:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border));
    background: var(--theme-surface-hover);
    box-shadow: 0 12px 26px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-way-primary,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-way-icon {
    border-color: var(--theme-border);
    background: var(--theme-surface-alt);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-puzzle-feature {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 14rem),
        linear-gradient(145deg, var(--theme-surface-alt) 0%, var(--theme-surface) 58%, var(--theme-page) 100%);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-puzzle-feature .home-section-number,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-progress-label,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-winrate {
    color: var(--theme-accent-text);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-progress-panel {
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-page) 72%, var(--theme-surface));
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .home-empty-mark {
    color: color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

/* Sala de juego */
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body:has(.play-room) {
    background:
        radial-gradient(circle at 82% 2%, var(--theme-page-glow), transparent 31rem),
        linear-gradient(140deg, var(--theme-page-shine), transparent 52%),
        var(--theme-page);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room-facts span,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-board-stage {
    border-color: var(--theme-border);
    background: var(--theme-surface);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-board-stage {
    box-shadow: var(--play-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-board-stage::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--theme-accent) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 7%, transparent) 1px, transparent 1px);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .player-bar,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .workspace-page .player-bar {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    box-shadow: 0 8px 20px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .player-avatar,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .player-clock,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .workspace-page .player-clock {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-input);
    box-shadow: inset 0 -2px color-mix(in srgb, var(--theme-shadow) 75%, transparent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .player-bar[data-turn] .player-clock {
    color: var(--theme-on-accent);
    background: var(--theme-accent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-panel {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
    box-shadow: 0 24px 60px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-panel-head {
    color: var(--theme-text);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 12rem),
        linear-gradient(145deg, var(--theme-surface-alt), var(--theme-surface) 66%, var(--theme-page));
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-panel-index,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-panel-head-live .play-status {
    color: var(--theme-accent-text);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-trigger,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-menu,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-machine-link {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-input);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-page) 82%, #000);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-trigger:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-option:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-option:focus-visible,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-machine-link:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .game-toolbar .icon-btn:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 36%, var(--theme-border));
    background: var(--theme-surface-hover);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-option {
    color: var(--theme-text);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-time-option.is-selected {
    border-color: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border));
    color: var(--theme-text);
    background: var(--theme-accent-soft);
    box-shadow: inset 3px 0 var(--theme-accent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .move-row:nth-child(even) {
    background: color-mix(in srgb, var(--theme-text) 5%, transparent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-room .move-san.is-last {
    color: var(--theme-on-accent);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .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:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-promotion-dialog {
    color: var(--theme-text);
    border-color: var(--theme-border);
    background: var(--theme-surface);
    box-shadow: 0 30px 80px var(--theme-shadow);
}
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-promotion-dialog h2,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-promotion-options button { color: var(--theme-text); }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-promotion-options button { border-color: var(--theme-border); background: var(--theme-input); }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-promotion-options button:hover { border-color: var(--theme-accent); background: var(--theme-surface-hover); }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .play-promotion-options kbd { border-color: var(--theme-border); color: var(--theme-text-muted); }

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-roster,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-studio,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-match-card {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-surface) 97%, transparent) !important;
    box-shadow: 0 22px 56px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-intro-note,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-shell .bot-item,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief .color-icon-btn,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-game-state,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-game-history .move-list {
    border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface-alt);
    box-shadow: 0 8px 20px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-shell .bot-item:hover,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief .color-icon-btn:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 36%, var(--theme-border));
    background: var(--theme-surface-hover);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-shell .bot-item.is-selected,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-shell .bot-item:has(input:checked),
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief .color-icon-btn:has(input:checked),
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .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 color-mix(in srgb, var(--theme-accent) 10%, transparent), 0 12px 26px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-roster-heading h2,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief-topline h2,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-shell .bot-category > legend,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-shell .bot-name,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief .bot-feature-copy h3,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief .bot-color-field legend,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-match-opponent h2,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-game-section-title h3 {
    color: var(--theme-title);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-lobby-intro-note strong,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief blockquote,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-feature-preview {
    color: var(--theme-muted);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief-ready {
    color: var(--theme-accent-text);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-brief .bot-feature,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-match-opponent {
    background:
        radial-gradient(circle at 12% 18%, var(--theme-warning-soft), transparent 7rem),
        linear-gradient(135deg, var(--theme-surface-alt), var(--theme-surface) 70%);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-personality {
    border-color: color-mix(in srgb, var(--theme-warning) 34%, var(--theme-border));
    color: var(--theme-warning);
    background: var(--theme-warning-soft);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .bot-feature-country,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .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:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) 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 var(--theme-shadow), 0 18px 40px var(--theme-shadow) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body .cg-wrap coords {
    color: var(--theme-board-coords) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body cg-board square.last-move {
    background-color: rgba(201, 155, 84, 0.55) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body cg-board square.selected {
    background-color: rgba(201, 155, 84, 0.72) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body cg-board square.move-dest {
    background: radial-gradient(rgba(25, 37, 28, 0.42) 22%, transparent 23%) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body cg-board square.move-dest:hover {
    background: rgba(201, 155, 84, 0.38) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) body cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0 78%, rgba(25, 37, 28, 0.5) 79%) !important;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .theme-option-visual {
    background: color-mix(in srgb, var(--theme-surface-alt) 72%, transparent);
    box-shadow: 0 12px 30px var(--theme-shadow);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .theme-option > input:checked + .theme-option-visual {
    background:
        linear-gradient(135deg, var(--theme-accent-soft), transparent 58%),
        var(--theme-surface);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .theme-palette i {
    border-color: var(--theme-border);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-text) 18%, transparent);
}

/* Ajustes propios de Medianoche. La estructura y los estados oscuros se
   comparten con Arena; aquí solo se sustituyen los pocos pigmentos de club
   que no pueden expresarse mediante los tokens globales. */
html[data-theme="chessty-midnight"] body,
html[data-theme="chessty-midnight"] body:has(.home-club),
html[data-theme="chessty-midnight"] body:has(.play-room) {
    background:
        radial-gradient(circle at 78% 2%, rgba(63, 112, 130, .22), transparent 31rem),
        linear-gradient(135deg, rgba(244, 237, 226, .025), transparent 52%),
        var(--theme-page);
}

html[data-theme="chessty-midnight"] .sidebar,
html[data-theme="chessty-midnight"] body:has(.home-club) .sidebar,
html[data-theme="chessty-midnight"] body:has(.play-room) .sidebar,
html[data-theme="chessty-midnight"] .auth-page .sidebar {
    background:
        linear-gradient(180deg, rgba(244, 237, 226, .025), transparent 30%),
        var(--theme-sidebar);
    box-shadow: 9px 0 34px rgba(2, 10, 14, .42);
}

html[data-theme="chessty-midnight"] .side-link.is-active,
html[data-theme="chessty-midnight"] .play-time-option.is-selected {
    border-color: rgba(226, 166, 75, .42);
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
}

html[data-theme="chessty-midnight"] .side-link:hover,
html[data-theme="chessty-midnight"] .side-sublink:hover,
html[data-theme="chessty-midnight"] .btn-ghost:hover,
html[data-theme="chessty-midnight"] .play-time-trigger:hover,
html[data-theme="chessty-midnight"] .play-time-option:hover,
html[data-theme="chessty-midnight"] .play-machine-link:hover,
html[data-theme="chessty-midnight"] .bot-lobby-shell .bot-item:hover {
    border-color: rgba(226, 166, 75, .32);
    background: #1d3b48;
}

html[data-theme="chessty-midnight"] .side-submenu,
html[data-theme="chessty-midnight"] .content-page .card,
html[data-theme="chessty-midnight"] .workspace-page .card,
html[data-theme="chessty-midnight"] .auth-page .card,
html[data-theme="chessty-midnight"] .interface-settings,
html[data-theme="chessty-midnight"] .play-panel,
html[data-theme="chessty-midnight"] .bot-roster,
html[data-theme="chessty-midnight"] .bot-brief,
html[data-theme="chessty-midnight"] .bot-studio,
html[data-theme="chessty-midnight"] .bot-match-card {
    background: var(--theme-surface);
}

html[data-theme="chessty-midnight"] .home-puzzle-feature {
    background:
        radial-gradient(circle at 92% 10%, rgba(226, 166, 75, .2), transparent 14rem),
        linear-gradient(145deg, #173643 0%, #102a35 58%, #0b2029 100%);
}

html[data-theme="chessty-midnight"] .play-panel-head {
    background:
        radial-gradient(circle at 100% 0, rgba(226, 166, 75, .2), transparent 12rem),
        linear-gradient(145deg, #1b3e4b, #12303b 66%, #0d232c);
}

html[data-theme="chessty-midnight"] .home-puzzle-feature .home-section-number,
html[data-theme="chessty-midnight"] .home-progress-label,
html[data-theme="chessty-midnight"] .home-winrate,
html[data-theme="chessty-midnight"] .play-panel-index,
html[data-theme="chessty-midnight"] .play-panel-head-live .play-status {
    color: var(--theme-accent-text);
}

html[data-theme="chessty-midnight"] body cg-board square.last-move {
    background-color: rgba(226, 166, 75, .55) !important;
}

html[data-theme="chessty-midnight"] body cg-board square.selected {
    background-color: rgba(226, 166, 75, .72) !important;
}

html[data-theme="chessty-midnight"] body cg-board square.move-dest {
    background: radial-gradient(rgba(10, 31, 40, .5) 22%, transparent 23%) !important;
}

html[data-theme="chessty-midnight"] body cg-board square.move-dest:hover {
    background: rgba(226, 166, 75, .38) !important;
}

html[data-theme="chessty-midnight"] body cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0 78%, rgba(10, 31, 40, .58) 79%) !important;
}

html[data-theme="chessty-midnight"] .theme-option > input:checked + .theme-option-visual {
    background:
        linear-gradient(135deg, rgba(226, 166, 75, .12), transparent 58%),
        var(--theme-surface);
}

html[data-theme="chessty-midnight"] .theme-palette i {
    border-color: #36505b;
    box-shadow: 0 0 0 1px rgba(244, 237, 226, .16);
}

@media (max-width: 900px) {
    html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .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 [hidden] { display: none !important; }

.analysis-replay-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    color: var(--theme-muted);
    font-size: .84rem;
}

.analysis-replay-summary strong {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--theme-accent-soft);
    color: var(--theme-accent-text);
}

.analysis-replay-summary .btn { min-height: 44px; }

.analysis-lab--replay .analysis-board-stage {
    width: min(100%, calc(100dvh - 148px));
}

.analysis-lab--replay .analysis-console {
    min-height: 0;
}

.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: var(--theme-success); }
.analysis-engine__status[data-state="error"] i { background: var(--theme-error); }
.analysis-engine__status[data-state="paused"] i { background: var(--theme-warning, #c78a2b); }
.analysis-engine__status:is([data-state="thinking"], [data-state="downloading"]) i {
    background: var(--theme-accent);
    animation: analysis-pulse 850ms ease-in-out infinite;
}

.energy64-counter {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .5rem .7rem;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 32%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: color-mix(in srgb, var(--theme-accent) 9%, var(--bg-elevated));
    font-size: .84rem;
}
.energy64-counter__bolt { font-size: 1.05rem; }
.energy64-counter strong { color: var(--theme-accent); }
.energy64-reward {
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: max(2rem, env(safe-area-inset-bottom));
    display: grid;
    gap: .05rem;
    padding: .7rem 1rem;
    border: 1px solid color-mix(in srgb, #f5bd3c 55%, transparent);
    border-radius: .75rem;
    color: #fff;
    background: #17375a;
    box-shadow: 0 14px 34px rgba(6, 20, 38, .28);
    transform: translate(-50%, 14px);
    animation: energy64-reward-in 2.8s ease both;
    pointer-events: none;
}
.energy64-reward strong { color: #ffd364; font-size: 1.05rem; }
.energy64-reward span { font-size: .78rem; }
@keyframes energy64-reward-in {
    0%, 100% { opacity: 0; transform: translate(-50%, 14px); }
    12%, 78% { opacity: 1; transform: translate(-50%, 0); }
}
.energy64-streak-celebration {
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: 50%;
    width: min(21rem, calc(100vw - 2rem));
    padding: 1.45rem 1.25rem 1.3rem;
    border: 1px solid rgba(255, 198, 72, .82);
    border-radius: 1.1rem;
    color: #fffaf0;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, #7d3e16, #182c48 68%);
    box-shadow: 0 22px 70px rgba(2, 13, 30, .55);
    animation: energy64-streak-in 5.2s ease both;
    pointer-events: none;
}
.energy64-streak-celebration__fire {
    margin: -.85rem 0 .15rem;
    font-size: 3.35rem;
    filter: drop-shadow(0 .32rem .4rem rgba(236, 111, 20, .35));
    animation: energy64-flame 700ms ease-in-out infinite alternate;
}
.energy64-streak-celebration p { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffd471; }
.energy64-streak-celebration strong { display: block; margin-top: .28rem; font-family: var(--font-display); font-size: 1.55rem; }
.energy64-streak-celebration span { display: block; margin-top: .42rem; color: #d8e4f2; font-size: .86rem; }
@keyframes energy64-streak-in {
    0%, 100% { opacity: 0; transform: translate(-50%, -45%) scale(.82); }
    11%, 84% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes energy64-flame { from { transform: rotate(-4deg) scale(.95); } to { transform: rotate(4deg) scale(1.08); } }
.energy64-profile-card {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    min-height: 7.6rem;
    padding: 1.15rem 1.35rem;
    overflow: hidden;
    border-color: color-mix(in srgb, #e89f34 38%, var(--card-border));
    background:
        radial-gradient(circle at 0% 50%, color-mix(in srgb, #ef9d29 16%, transparent), transparent 30%),
        linear-gradient(115deg, color-mix(in srgb, #e89f34 8%, var(--bg-elevated)), var(--bg-elevated) 58%);
}
.energy64-profile-card__flame {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid color-mix(in srgb, #f6b44e 52%, transparent);
    border-radius: 1rem;
    background: linear-gradient(145deg, #ffcb69, #ed8b28);
    box-shadow: 0 .5rem 1.1rem rgba(191, 96, 15, .2);
    font-size: 1.75rem;
    filter: none;
}
.energy64-profile-card__main { min-width: 0; }
.energy64-profile-card__eyebrow { margin: 0 0 .22rem; font-size: .67rem; font-weight: 900; letter-spacing: .12em; color: #c57a18; }
.energy64-profile-card__total { display: flex; align-items: baseline; gap: .5rem; }
.energy64-profile-card__total strong { color: var(--text); font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: .95; letter-spacing: -.035em; }
.energy64-profile-card__total span { color: #c77b16; font-size: .88rem; font-weight: 800; }
.energy64-profile-card__main > p:last-child { margin: .4rem 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.35; }
.energy64-profile-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(5.1rem, auto));
    gap: .6rem;
    padding-left: 1.15rem;
    border-left: 1px solid color-mix(in srgb, #e89f34 27%, transparent);
}
.energy64-profile-card__stats > div { display: grid; gap: .18rem; }
.energy64-profile-card__stats span { color: var(--text-muted); font-size: .69rem; font-weight: 750; white-space: nowrap; }
.energy64-profile-card__stats strong { color: var(--text); font-size: .98rem; font-weight: 900; white-space: nowrap; }
.energy64-profile-card__stats i { font-style: normal; }
.profile-username-form {
    margin: 1.1rem 0;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--theme-accent) 4%, transparent);
}
.players-directory-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.players-directory-header p { margin: .28rem 0 0; color: var(--text-muted); }
.players-directory-kicker { color: var(--theme-accent) !important; font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.players-directory-search { display: flex; gap: .65rem; margin-bottom: 1.1rem; padding: .8rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg-elevated); }
.players-directory-search input { min-width: 0; flex: 1; }
.players-directory-list { overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg-elevated); }
.players-directory-list__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 42px; padding: .55rem .85rem; border-bottom: 1px solid var(--card-border); background: color-mix(in srgb, var(--theme-accent) 5%, transparent); }
.players-directory-list__header span { color: var(--text-muted); font-size: .66rem; font-weight: 900; letter-spacing: .1em; }
.players-directory-list__header strong { color: var(--theme-accent); font-size: .72rem; white-space: nowrap; }
.player-directory-row { display: flex; align-items: center; gap: .82rem; min-height: 72px; padding: .7rem .85rem; border-bottom: 1px solid var(--card-border); transition: background 140ms var(--ease-out), padding-left 140ms var(--ease-out); }
.player-directory-row:last-child { border-bottom: 0; }
.player-directory-row:hover { padding-left: 1rem; background: color-mix(in srgb, var(--theme-accent) 7%, transparent); }
.player-directory-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; overflow: hidden; border: 2px solid color-mix(in srgb, var(--theme-accent) 26%, var(--card-border)); border-radius: 50%; color: var(--theme-on-accent, #fff); background: var(--accent-fill); font-size: .92rem; font-weight: 900; }
.player-directory-avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-directory-person { display: grid; min-width: 0; gap: .08rem; }
.player-directory-person__label, .friend-card__label { color: var(--text-faint); font-size: .61rem; font-weight: 900; letter-spacing: .1em; }
.player-directory-row h2 { margin: 0; font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.player-directory-person__role { color: var(--text-muted); font-size: .75rem; }
.player-directory-row__chevron { margin-left: auto; color: var(--text-muted); font-size: 1.4rem; line-height: 1; }
.player-directory-row__action { display: flex; flex: 0 0 auto; align-items: center; margin-left: auto; }
.player-directory-row__action form { margin: 0; }
.btn-sm { min-height: 34px; padding: .35rem .65rem; font-size: .76rem; }
.friend-status { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: .2rem .56rem; border: 1px solid color-mix(in srgb, var(--card-border) 88%, transparent); border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.friend-status.is-friend { color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 12%, transparent); }
.side-link__emoji { display: grid; width: 22px; height: 22px; place-items: center; font-size: 1rem; }
.side-notification { margin-left: auto; padding: .15rem .38rem; border-radius: 999px; background: color-mix(in srgb, #e5a23b 18%, transparent); color: var(--text); font-size: .66rem; font-weight: 900; white-space: nowrap; }
.friends-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.friends-header p { margin: .28rem 0 0; color: var(--text-muted); }
.friends-section { margin: 0 0 1rem; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg-elevated); }
.friends-section__heading { display: flex; align-items: center; justify-content: space-between; gap: .55rem; padding: .72rem .9rem; border-bottom: 1px solid var(--card-border); background: color-mix(in srgb, var(--theme-accent) 4%, transparent); }
.friends-section__heading > div { display: grid; gap: .08rem; }
.friends-section__heading p { margin: 0; color: var(--text-faint); font-size: .62rem; font-weight: 900; letter-spacing: .11em; }
.friends-section__heading h2 { margin: 0; color: var(--text); font-size: .94rem; }
.friends-section__heading span { display: grid; min-width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 999px; background: var(--bg-subtle); color: var(--theme-accent); font-size: .72rem; font-weight: 900; }
.friend-inbox-row { display: flex; align-items: center; gap: .82rem; padding: .8rem .9rem; border-bottom: 1px solid var(--card-border); }
.friend-inbox-row:last-child { border-bottom: 0; }
.friend-inbox-row__person { display: grid; min-width: 0; gap: .08rem; }
.friend-inbox-row__person > span { color: var(--text-faint); font-size: .61rem; font-weight: 900; letter-spacing: .1em; }
.friend-inbox-row h3 { margin: 0; color: var(--text); font-size: .95rem; }
.friend-inbox-row p { margin: .14rem 0 0; color: var(--text-muted); font-size: .78rem; }
.friend-inbox-row__actions { display: flex; flex: 0 0 auto; gap: .42rem; margin-left: auto; }
.friend-inbox-row__actions form { margin: 0; }
.friends-empty { margin: 0; padding: 1rem; color: var(--text-muted); font-size: .86rem; }
.friends-list, .friends-sent-list { display: grid; }
.friend-card { display: flex; align-items: center; gap: .75rem; min-height: 68px; padding: .72rem .9rem; border-bottom: 1px solid var(--card-border); background: color-mix(in srgb, var(--theme-accent) 2%, transparent); }
.friend-card:last-child { border-bottom: 0; }
.friend-card > div { display: grid; min-width: 0; gap: .08rem; }
.friend-card strong { color: var(--text); font-size: .94rem; overflow-wrap: anywhere; }
.friend-card > div > span:last-child { color: var(--text-muted); font-size: .75rem; }
.friend-card > .friend-status { margin-left: auto; }
.friend-card__actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.friend-card__actions .friend-status { margin-left: 0; }
.friend-card--sent { background: transparent; }
.player-directory-person, .friend-inbox-row__person { color: inherit; text-decoration: none; }
.player-directory-person:hover h2, .friend-inbox-row__person:hover h3 { color: var(--theme-accent); }
.friend-card__main { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; min-width: 0; gap: .75rem; color: inherit; text-decoration: none; }
.friend-card__main > span:last-child { display: grid; min-width: 0; gap: .08rem; }
.friend-card__main strong { color: var(--text); font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-card__main > span:last-child > span:last-child { color: var(--text-muted); font-size: .75rem; }
.friend-card__main:hover strong { color: var(--theme-accent); }
.friend-card__main:hover .player-directory-avatar { border-color: var(--theme-accent); }
.friend-chat-page { max-width: 1240px; padding-top: 1.25rem; }
.direct-message-layout { display: grid; min-height: min(720px, calc(100vh - 150px)); grid-template-columns: 230px minmax(0, 1fr) 214px; overflow: hidden; border: 1px solid var(--card-border); border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 20px 55px color-mix(in srgb, #000 14%, transparent); }
.direct-message-list { display: flex; flex-direction: column; min-width: 0; padding: .72rem; border-right: 1px solid var(--card-border); background: color-mix(in srgb, var(--bg-subtle) 82%, var(--bg-elevated)); }
.direct-message-list__top { display: flex; align-items: center; gap: .5rem; padding: .48rem .55rem .7rem; color: var(--text); font-family: var(--font-display); font-size: 1rem; text-decoration: none; }
.direct-message-list__top span { color: var(--theme-accent); font-family: var(--font-body); }
.direct-message-list__search { display: block; overflow: hidden; padding: .58rem .65rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-input); color: var(--text-muted); font-size: .72rem; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.direct-message-list__search:hover { border-color: var(--theme-accent); color: var(--text); }
.direct-message-list__label { margin: 1.05rem .5rem .42rem; color: var(--text-faint); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.direct-message-list__people { display: grid; gap: .18rem; overflow-y: auto; }
.direct-message-person { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .55rem; padding: .48rem; border-radius: 8px; color: var(--text-muted); text-decoration: none; }
.direct-message-person:hover { background: color-mix(in srgb, var(--theme-accent) 8%, transparent); color: var(--text); }
.direct-message-person.is-active { background: color-mix(in srgb, var(--theme-accent) 16%, var(--bg-subtle)); color: var(--text); box-shadow: inset 3px 0 0 var(--theme-accent); }
.direct-message-person .player-directory-avatar { width: 34px; height: 34px; }
.direct-message-person > span:last-child { display: grid; min-width: 0; gap: .05rem; }
.direct-message-person strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.direct-message-person small { overflow: hidden; color: var(--text-faint); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.friend-chat-header { display: flex; align-items: center; gap: .75rem; padding: .78rem 1rem; border-bottom: 1px solid var(--card-border); background: var(--bg-elevated); }
.friend-chat-header__identity { display: flex; align-items: center; min-width: 0; gap: .65rem; color: inherit; text-decoration: none; }
.friend-chat-header__identity > span:last-child { display: grid; min-width: 0; gap: .06rem; }
.friend-chat-header__identity:hover h1 { color: var(--theme-accent); }
.friend-chat-header__avatar { width: 44px; height: 44px; flex-basis: 44px; }
.friend-chat-header p { margin: 0; color: var(--text-faint); font-size: .61rem; font-weight: 900; letter-spacing: .12em; }
.friend-chat-header h1 { margin: 0; overflow: hidden; color: var(--text); font-family: var(--font-display); font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.friend-chat-header__profile { margin-left: auto; color: var(--text-muted); font-size: .72rem; font-weight: 800; text-decoration: none; }
.friend-chat-header__profile:hover { color: var(--theme-accent); }
.friend-chat-room { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--bg-elevated); }
.friend-chat-room__notice { padding: .54rem .85rem; border-bottom: 1px solid var(--card-border); background: color-mix(in srgb, var(--theme-accent) 5%, transparent); color: var(--text-muted); font-size: .73rem; text-align: center; }
.friend-chat-messages { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: .52rem; overflow-y: auto; padding: 1.15rem; background-color: color-mix(in srgb, var(--bg-input) 45%, var(--bg-elevated)); background-image: linear-gradient(30deg, color-mix(in srgb, var(--theme-accent) 3%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-accent) 3%, transparent) 87.5%, color-mix(in srgb, var(--theme-accent) 3%, transparent)), linear-gradient(150deg, color-mix(in srgb, var(--theme-accent) 3%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--theme-accent) 3%, transparent) 87.5%, color-mix(in srgb, var(--theme-accent) 3%, transparent)); background-size: 32px 56px; }
.friend-message { display: grid; width: fit-content; max-width: min(76%, 520px); gap: .2rem; padding: .6rem .72rem .44rem; border: 1px solid color-mix(in srgb, var(--card-border) 82%, transparent); border-radius: 15px 15px 15px 3px; background: var(--bg-elevated); color: var(--text); box-shadow: 0 4px 12px color-mix(in srgb, #000 7%, transparent); }
.friend-message.is-mine { align-self: end; border-color: color-mix(in srgb, var(--theme-accent) 36%, var(--card-border)); border-radius: 15px 15px 3px 15px; background: color-mix(in srgb, var(--theme-accent) 18%, var(--bg-elevated)); }
.friend-message p { margin: 0; overflow-wrap: anywhere; font-size: .88rem; line-height: 1.42; white-space: pre-wrap; }
.friend-message time { color: var(--text-faint); font-size: .64rem; font-weight: 750; text-align: right; }
.friend-chat-empty { display: grid; align-self: center; place-items: center; max-width: 290px; margin: auto; color: var(--text-muted); text-align: center; }
.friend-chat-empty > span { margin-bottom: .3rem; color: var(--theme-accent); font-size: 2rem; }
.friend-chat-empty strong { color: var(--text); font-size: .92rem; }
.friend-chat-empty p { margin: .32rem 0 0; font-size: .78rem; line-height: 1.45; }
.friend-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .55rem; padding: .7rem; border-top: 1px solid var(--card-border); background: var(--bg-elevated); }
.friend-chat-compose textarea { width: 100%; min-height: 42px; max-height: 128px; resize: none; padding: .63rem .7rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--bg-input); color: var(--text); font: inherit; line-height: 1.35; }
.friend-chat-compose textarea:focus { border-color: var(--theme-accent); outline: 2px solid color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.friend-chat-compose .btn { min-height: 42px; }
.friend-chat-status { min-height: 22px; margin: 0; padding: 0 .85rem .48rem; color: var(--text-faint); font-size: .68rem; font-weight: 700; }
.friend-chat-status[data-state="ready"] { color: #36a968; }
.friend-chat-status[data-state="error"] { color: #d3675d; }
.direct-message-profile { position: relative; min-width: 0; border-left: 1px solid var(--card-border); background: color-mix(in srgb, var(--bg-subtle) 58%, var(--bg-elevated)); }
.direct-message-profile__cover { display: block; height: 72px; background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 52%, #18324c), color-mix(in srgb, var(--theme-accent) 15%, var(--bg-subtle))); }
.direct-message-profile__avatar { position: absolute; top: 42px; left: 1rem; width: 62px; height: 62px; border: 4px solid var(--bg-elevated); }
.direct-message-profile__body { display: grid; gap: .38rem; padding: 2.5rem 1rem 1rem; }
.direct-message-profile__body p { margin: 0; color: var(--text-faint); font-size: .61rem; font-weight: 900; letter-spacing: .1em; }
.direct-message-profile__body h2 { margin: 0; color: var(--text); font-family: var(--font-display); font-size: 1.2rem; overflow-wrap: anywhere; }
.direct-message-profile__status { color: #47bd77; font-size: .72rem; font-weight: 750; }
.direct-message-profile__body blockquote { margin: .65rem 0; padding: .65rem; border-left: 2px solid var(--theme-accent); color: var(--text-muted); font-size: .76rem; line-height: 1.45; }
.direct-message-profile__body .btn { margin-top: .45rem; justify-content: center; }
.player-public-page { max-width: 760px; }
.player-public-back { display: inline-flex; margin: 0 0 .7rem; color: var(--text-muted); font-size: .82rem; font-weight: 800; text-decoration: none; }
.player-public-back:hover { color: var(--theme-accent); }
.player-public-card { position: relative; display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center; gap: 1rem; overflow: hidden; min-height: 160px; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--theme-accent) 13%, var(--bg-elevated)), var(--bg-elevated) 56%); }
.player-public-card__orb { position: absolute; width: 230px; height: 230px; right: -105px; top: -125px; border: 1px solid color-mix(in srgb, var(--theme-accent) 23%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--theme-accent) 7%, transparent); }
.player-public-avatar { position: relative; display: grid; width: 94px; height: 94px; place-items: center; overflow: hidden; border: 3px solid color-mix(in srgb, var(--theme-accent) 45%, var(--card-border)); border-radius: 50%; background: var(--bg-input); box-shadow: 0 10px 22px color-mix(in srgb, #000 11%, transparent); }
.player-public-avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-public-card__content { position: relative; display: grid; min-width: 0; gap: .17rem; }
.player-public-card__content > p { margin: 0; color: var(--theme-accent); font-size: .64rem; font-weight: 900; letter-spacing: .13em; }
.player-public-card__content h1 { margin: 0; overflow-wrap: anywhere; color: var(--text); font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); }
.player-public-card__content > span { color: var(--text-muted); font-size: .82rem; }
.player-public-card__content blockquote { margin: .42rem 0 0; color: var(--text); font-size: .86rem; line-height: 1.45; }
.player-public-card__actions { position: relative; display: flex; align-items: center; gap: .55rem; }
.player-public-card__actions form { margin: 0; }
@media (max-width: 580px) {
    .friends-header { align-items: flex-start; flex-direction: column; }
    .friend-inbox-row { flex-wrap: wrap; }
    .friend-inbox-row__actions { width: 100%; margin-left: 47px; }
    .friend-inbox-row__actions .btn { flex: 1; }
    .friend-inbox-row__actions form { flex: 1; }
    .friend-inbox-row__actions button { width: 100%; }
    .players-directory-header .btn, .friends-header .btn { width: 100%; }
    .players-directory-header { align-items: flex-start; flex-direction: column; }
    .players-directory-list__header { padding: .55rem .7rem; }
    .players-directory-list__header span { font-size: .6rem; }
    .player-directory-row { gap: .62rem; padding: .62rem .7rem; }
    .player-directory-row:hover { padding-left: .7rem; }
    .player-directory-avatar { width: 38px; height: 38px; flex-basis: 38px; }
    .player-directory-row__action .btn-sm { padding: .35rem .48rem; font-size: .7rem; }
    .player-directory-row__action .friend-status { max-width: 98px; overflow: hidden; text-overflow: ellipsis; }
    .friend-card__actions { gap: .3rem; }
    .friend-card__actions .friend-status { display: none; }
    .direct-message-layout { display: block; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .direct-message-list { display: none; }
    .direct-message-profile { display: none; }
    .friend-chat-room { min-height: calc(100svh - 150px); border: 1px solid var(--card-border); border-radius: 14px; }
    .friend-chat-header { gap: .55rem; padding: .6rem; }
    .friend-chat-header__avatar { width: 40px; height: 40px; flex-basis: 40px; }
    .friend-chat-header h1 { font-size: 1.1rem; }
    .friend-chat-header__profile { display: none; }
    .friend-chat-messages { min-height: calc(100svh - 275px); padding: .72rem; }
    .friend-message { max-width: 86%; }
    .friend-chat-compose { position: sticky; bottom: 0; gap: .42rem; padding: .55rem; }
    .friend-chat-compose .btn { padding: .45rem .6rem; font-size: .76rem; }
    .player-public-card { grid-template-columns: 66px minmax(0, 1fr); gap: .8rem; padding: 1rem; }
    .player-public-avatar { width: 66px; height: 66px; }
    .player-public-card__actions { grid-column: 1 / -1; width: 100%; }
    .player-public-card__actions .btn, .player-public-card__actions form, .player-public-card__actions form .btn { width: 100%; }
}
.players-directory-empty { display: grid; gap: .25rem; min-height: 132px; place-content: center; text-align: center; border: 1px dashed var(--card-border); border-radius: var(--radius); color: var(--text-muted); }
.field-hint { margin: .38rem 0 0; color: var(--text-muted); font-size: .82rem; }

.analysis-engine__local-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .3rem;
    color: var(--theme-muted);
    font-size: .68rem;
    font-weight: 750;
}

.analysis-engine__local-meta button {
    min-height: 32px;
    padding: .25rem .6rem;
    border: 1px solid var(--theme-border);
    border-radius: .55rem;
    background: var(--theme-surface-soft);
    color: var(--theme-text);
    font: inherit;
    cursor: pointer;
}

.analysis-engine__local-meta button:hover,
.analysis-engine__local-meta button:focus-visible {
    border-color: var(--theme-accent);
    color: var(--theme-title);
}

.analysis-engine__progress {
    height: 4px;
    margin-top: .4rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--theme-faint);
}

.analysis-engine__progress span {
    display: block;
    width: var(--engine-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--theme-accent);
    transition: width 100ms linear;
}

@media (max-width: 900px) {
    .analysis-engine-switch,
    .analysis-engine__local-meta button {
        min-height: 44px;
    }
}

.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-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .15rem;
}

.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-section-title [data-review-status] {
    max-width: 18rem;
    color: var(--theme-muted);
}

.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-text-btn:disabled {
    opacity: .5;
    cursor: wait;
}

.analysis-review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 .55rem;
}

.analysis-review-count {
    display: inline-flex;
    min-width: 32px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    padding: .2rem .38rem;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    color: var(--theme-text);
    background: var(--theme-input);
    cursor: pointer;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.analysis-review-count:hover,
.analysis-review-count:focus-visible {
    border-color: color-mix(in srgb, var(--quality-color, var(--theme-accent)) 55%, transparent);
    outline: none;
}

.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 { min-width: 0; }

.analysis-quality {
    --quality-color: var(--theme-accent-text);
    display: inline-flex;
    min-width: 1.15rem;
    align-items: center;
    justify-content: center;
    color: var(--quality-color);
    font-size: .7rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.analysis-quality--book { --quality-color: #6788b5; }
.analysis-quality--star { --quality-color: #d49734; }
.analysis-quality--great { --quality-color: #4f9b63; }
.analysis-quality--brilliant { --quality-color: #279aa8; }
.analysis-quality--inaccuracy { --quality-color: #c78c32; }
.analysis-quality--mistake { --quality-color: #ce6b43; }
.analysis-quality--blunder { --quality-color: #c7514c; }
.analysis-quality--fair-play { --quality-color: #b46b34; }

.analysis-review-count.analysis-quality--book,
.analysis-review-count.analysis-quality--star,
.analysis-review-count.analysis-quality--great,
.analysis-review-count.analysis-quality--brilliant,
.analysis-review-count.analysis-quality--inaccuracy,
.analysis-review-count.analysis-quality--mistake,
.analysis-review-count.analysis-quality--blunder {
    color: var(--quality-color);
}

/* Chessty Fair Play: privado, sobrio y sin lenguaje de culpabilidad. */
.fair-play-page { max-width: 1280px; }
.fair-play-filters label {
    display: grid;
    gap: .28rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
}
.fair-play-list { display: grid; margin-top: .75rem; }
.fair-play-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(170px, 1.4fr) 100px 110px minmax(140px, .7fr);
    align-items: center;
    gap: 1rem;
    padding: .75rem .25rem;
    border-top: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}
.fair-play-row:hover { background: color-mix(in srgb, var(--accent-fill) 6%, transparent); }
.fair-play-user,
.fair-play-status,
.fair-play-score { display: grid; gap: .14rem; min-width: 0; }
.fair-play-user strong { overflow: hidden; text-overflow: ellipsis; }
.fair-play-user span,
.fair-play-status time,
.fair-play-score span { color: var(--text-muted); font-size: .7rem; }
.fair-play-score strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.fair-play-level {
    min-height: 30px;
    display: inline-flex;
    width: max-content;
    align-items: center;
    padding: .25rem .62rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fair-play-level--low { color: #39734d; background: color-mix(in srgb, #54a36d 12%, transparent); }
.fair-play-level--medium { color: #8b5c13; background: color-mix(in srgb, #d39735 14%, transparent); }
.fair-play-level--high { color: #993e39; background: color-mix(in srgb, #c7514c 13%, transparent); }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .fair-play-level--low { color: #83d29a; }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .fair-play-level--medium { color: #efc376; }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .fair-play-level--high { color: #ff9b92; }
.fair-play-empty { padding: 2.5rem 1rem; text-align: center; }
.fair-play-empty strong { color: var(--text); }
.fair-play-empty p { margin-top: .25rem; color: var(--text-muted); font-size: .82rem; }
.admin-back-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-text); text-decoration: none; font-size: .8rem; font-weight: 800; }
.fair-play-case-state { display: flex; align-items: center; gap: .65rem; color: var(--text-muted); }
.fair-play-summary-grid {
    display: grid;
    grid-template-columns: 180px 180px minmax(260px, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}
.fair-play-summary { min-height: 132px; display: flex; flex-direction: column; justify-content: center; padding: 1rem; }
.fair-play-summary > span { color: var(--text-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.fair-play-summary > strong { margin-top: .25rem; color: var(--text); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.fair-play-summary small { margin-top: .45rem; color: var(--text-muted); line-height: 1.4; }
.fair-play-summary ul { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; list-style: none; }
.fair-play-summary li { padding: .35rem .55rem; border-radius: 8px; color: var(--text); background: var(--bg-elevated); font-size: .72rem; }
.fair-play-summary li b { margin-left: .2rem; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.fair-play-games { display: grid; gap: .75rem; margin-top: .8rem; }
.fair-play-game { padding: .9rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg-elevated) 60%, transparent); }
.fair-play-game header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fair-play-game header > div { display: grid; gap: .16rem; min-width: 0; }
.fair-play-game header strong { color: var(--text); overflow-wrap: anywhere; }
.fair-play-game header span { color: var(--text-muted); font-size: .72rem; }
.fair-play-game-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin-top: .75rem; }
.fair-play-game-metrics div { padding: .55rem; border-radius: 8px; background: var(--bg-side); }
.fair-play-game-metrics dt { color: var(--text-muted); font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.fair-play-game-metrics dd { margin-top: .12rem; color: var(--text); font-size: .83rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fair-play-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.fair-play-flags span { padding: .25rem .48rem; border: 1px solid color-mix(in srgb, #b46b34 35%, var(--border)); border-radius: 7px; color: var(--text); font-size: .7rem; }
.fair-play-sample-note,
.fair-play-safety-note { margin-top: .65rem; color: var(--text-muted); font-size: .72rem; }
.fair-play-review-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.fair-play-review-form { display: grid; gap: .55rem; margin-top: .8rem; }
.fair-play-review-form > label { color: var(--text); font-size: .76rem; font-weight: 800; }
.fair-play-review-form textarea { width: 100%; min-height: 104px; resize: vertical; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg-elevated); font: inherit; }
.fair-play-review-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.fair-play-review-actions .btn { min-height: 44px; }
.fair-play-suspend { min-height: 44px; border: 1px solid color-mix(in srgb, #c7514c 45%, var(--border)); color: #a53e39; background: color-mix(in srgb, #c7514c 9%, transparent); }
.fair-play-replay-note { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, #b46b34 38%, var(--theme-border)); border-radius: 10px; color: var(--theme-text); background: color-mix(in srgb, #b46b34 9%, var(--theme-surface)); }
.fair-play-replay-note span { color: var(--theme-muted); font-size: .75rem; }
.fair-play-replay-note a { margin-left: auto; color: var(--theme-accent-text); font-size: .75rem; font-weight: 800; }

@media (max-width: 900px) {
    .fair-play-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fair-play-summary--wide { grid-column: 1 / -1; }
    .fair-play-review-grid { grid-template-columns: 1fr; }
    .fair-play-game-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .fair-play-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
    .fair-play-score { grid-column: 1; }
    .fair-play-status { grid-column: 2; grid-row: 2; text-align: right; }
    .fair-play-summary-grid { grid-template-columns: 1fr 1fr; }
    .fair-play-summary { min-height: 108px; }
    .fair-play-game header { align-items: flex-start; }
    .fair-play-game-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fair-play-replay-note { align-items: flex-start; flex-direction: column; }
    .fair-play-replay-note a { margin-left: 0; min-height: 44px; display: flex; align-items: center; }
}

.analysis-variations {
    display: grid;
    min-width: 0;
    gap: .45rem;
    margin: .5rem 0 .2rem .75rem;
    padding-left: .65rem;
    border-left: 2px solid color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

.analysis-variation {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.analysis-variation__label {
    color: var(--theme-muted);
    font-size: .62rem;
    font-weight: 800;
}

.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: 44px;
    height: 44px;
    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: 44px;
    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: var(--theme-error);
    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:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .analysis-eval__track {
    border-color: rgba(240,238,232,.18);
    background: #161b18;
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .analysis-eval__track::after { background: #eee9dd; }
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .analysis-dialog__error { color: var(--theme-error); }

@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-replay-summary {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .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-replay-summary { gap: .45rem; padding-inline: .45rem; }
    .analysis-replay-summary span { font-size: .78rem; }
    .analysis-replay-summary .btn { margin-left: auto; }
    .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-section-title { align-items: flex-start; }
    .analysis-section-actions { flex-wrap: wrap; justify-content: flex-end; }
    .analysis-text-btn { min-height: 32px; }
    .analysis-line { grid-template-columns: 44px minmax(0, 1fr) 24px; }
    .analysis-tree { min-height: 240px; max-height: 320px; }
    .move-table__number,
    .move-table__cell { min-height: 44px; }
    .move-table__row { grid-template-columns: 2.35rem minmax(0, 1fr) minmax(0, 1fr); }
    .move-table__number { padding-inline: .42rem .25rem; }
    .move-table__cell { padding-inline: .45rem; }
    .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: var(--theme-success);
    --puzzle-negative: var(--theme-error);
    --puzzle-warm: var(--theme-gold);
    color: var(--theme-text);
}

html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .puzzle-workspace,
html:is([data-theme="chessty-arena"], [data-theme="chessty-midnight"]) .puzzle-hub-page {
    --puzzle-positive: var(--theme-success);
    --puzzle-negative: var(--theme-error);
}

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);
    overflow: hidden;
}

.battle-avatar img, .battle-avatar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.battle-avatar-photo { overflow: hidden; }

.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-lobby-grid {
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.5fr);
}

.battle-rules { align-self: start; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: 1.05rem 1.15rem; }
.battle-rules .puzzle-rules-intro { display: flex; align-items: end; justify-content: space-between; gap: .8rem; }
.battle-rules .puzzle-rules-intro .workspace-kicker { margin: 0; }
.battle-rules .puzzle-rule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.battle-rules .puzzle-rule-grid li { grid-template-columns: 30px minmax(0, 1fr); gap: .45rem; min-height: 76px; padding: .6rem; border: 1px solid var(--theme-border); border-radius: 10px; background: color-mix(in srgb, var(--theme-accent) 4%, var(--theme-surface)); }
.battle-rules .puzzle-rule-grid li:last-child { padding-bottom: .6rem; }
.battle-rules .puzzle-rule-grid li > span { width: 28px; height: 28px; border-radius: 8px; font-size: .9rem; }
.battle-rules .puzzle-rule-grid strong { margin: .05rem 0 .15rem; font-size: .78rem; line-height: 1.15; }
.battle-rules .puzzle-rule-grid p { margin: 0; font-size: .65rem; line-height: 1.3; }

@media (max-width: 680px) {
    .battle-rules .puzzle-rules-intro { align-items: flex-start; flex-direction: column; gap: .18rem; }
    .battle-rules .puzzle-rule-grid { grid-template-columns: minmax(0, 1fr); }
    .battle-rules .puzzle-rule-grid li { min-height: 0; }
}

.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;
}

.battle-development-card [hidden] {
    display: none;
}

.battle-time-picker { width: 100%; padding: .9rem; border: 1px solid var(--card-border); border-radius: 12px; background: color-mix(in srgb, var(--theme-accent) 6%, var(--bg-subtle)); }
.battle-time-picker > .workspace-kicker { margin: 0 0 .6rem; font-size: .76rem; letter-spacing: .1em; }
.battle-time-picker__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; }
.battle-time-picker__presets button { min-height: 40px; padding: .35rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-elevated); color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 850; cursor: pointer; }
.battle-time-picker__presets button:hover, .battle-time-picker__presets button.is-selected { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 17%, var(--bg-elevated)); color: var(--theme-accent); }
.battle-time-picker__custom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .7rem; color: var(--text); font-size: .88rem; font-weight: 850; }
.battle-time-picker__custom input { width: 84px; padding: .52rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-input); color: var(--text); font: inherit; font-size: .94rem; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; }
.battle-time-picker__custom input:focus { border-color: var(--theme-accent); outline: 2px solid color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.battle-time-picker__note { display: flex; flex-wrap: wrap; gap: .32rem .65rem; margin: .68rem 0 0; padding: .5rem .55rem; border-left: 2px solid color-mix(in srgb, var(--theme-accent) 70%, transparent); background: color-mix(in srgb, var(--bg-elevated) 60%, transparent); color: var(--text-muted); font-size: .7rem; font-weight: 750; line-height: 1.35; }
.battle-time-picker__note span { white-space: nowrap; }
.battle-development-card .btn { min-height: 50px; font-size: .95rem; }

/* Puzzle Battle en curso */
.battle-active-page {
    width: min(100%, 76rem);
    max-width: 76rem;
}

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

.battle-match-heading h1 {
    margin: .12rem 0 0;
    color: var(--theme-title);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1;
}

.battle-connection,
.battle-player-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 30px;
    padding: .3rem .6rem;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border));
    border-radius: 999px;
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.battle-connection i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-accent);
    box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.battle-connection.is-offline,
.battle-player-state.is-offline {
    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));
}

.battle-connection.is-offline i {
    background: var(--puzzle-negative);
    box-shadow: none;
}

.battle-match-layout {
    display: grid;
    grid-template-columns:
        minmax(0, min(46rem, calc(100dvh - 236px)))
        minmax(19rem, 22rem);
    align-items: start;
    gap: var(--chess-layout-gap);
}

.battle-board-column {
    display: flex;
    width: min(100%, min(46rem, calc(100dvh - 236px)));
    min-width: 0;
    flex-direction: column;
    gap: .45rem;
}

.battle-board-frame {
    width: 100%;
    min-width: 0;
}

.battle-board-frame > .board-frame {
    width: 100%;
}

.battle-participant {
    display: grid;
    min-width: 0;
    min-height: 54px;
    padding: .45rem .65rem;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface);
}

.battle-participant-you {
    border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
}

.battle-color-piece {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(18, 26, 31, .16);
    border-radius: 10px;
    color: #ffffff;
    background: #36434a;
    font-size: 1.65rem;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
}

.battle-color-piece[data-color="black"] {
    border-color: rgba(18, 26, 31, .16);
    color: #161a1c;
    background: #f3eee5;
}

.battle-participant-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .1rem;
}

.battle-participant-copy strong,
.battle-participant-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-participant-copy strong {
    color: var(--theme-title);
    font-size: .88rem;
}

.battle-participant-copy span {
    color: var(--theme-muted);
    font-size: .74rem;
    font-weight: 700;
}

.battle-player-state {
    min-height: 26px;
    padding: .2rem .5rem;
    font-size: .66rem;
}

.battle-match-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: var(--theme-surface);
    box-shadow: 0 16px 38px var(--theme-shadow);
}

.battle-round-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface-alt);
}

.battle-active-page .battle-clock,
.battle-problem-count {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .08rem;
    color: var(--theme-muted);
}

.battle-active-page .battle-clock {
    border-right: 1px solid var(--theme-border);
}

.battle-active-page .battle-clock span,
.battle-problem-count span {
    color: var(--theme-faint);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.battle-active-page .battle-clock strong,
.battle-problem-count strong {
    color: var(--theme-title);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}

.battle-live-score {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
}

.battle-score-row {
    display: grid;
    min-width: 0;
    min-height: 62px;
    padding: .55rem .65rem;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: .55rem;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-surface);
}

.battle-score-row.is-leading {
    box-shadow: inset 3px 0 0 var(--theme-accent);
    background: var(--theme-accent-soft);
}

.battle-score-person {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.battle-score-person strong {
    overflow: hidden;
    color: var(--theme-title);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-score-person small {
    color: var(--theme-faint);
    font-size: .68rem;
}

.battle-score-row .battle-score {
    font-family: inherit;
    font-size: 1.55rem;
    font-weight: 850;
    text-align: right;
}

.battle-score-row .battle-lives {
    margin: 0;
}

.battle-lead {
    margin: 0;
    padding: .42rem .65rem;
    color: var(--theme-muted);
    background: var(--theme-surface-alt);
    font-size: .7rem;
    font-weight: 800;
    text-align: center;
}

.battle-status {
    display: flex;
    min-height: 48px;
    margin: 0;
    padding: .65rem .75rem;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
    border-radius: 11px;
    color: var(--theme-title);
    background: var(--theme-accent-soft);
    font-size: .84rem;
    font-weight: 850;
}

.battle-status[data-tone="success"] {
    border-color: color-mix(in srgb, var(--puzzle-positive) 38%, var(--theme-border));
    color: var(--puzzle-positive);
    background: color-mix(in srgb, var(--puzzle-positive) 10%, var(--theme-surface));
}

.battle-status[data-tone="error"] {
    border-color: color-mix(in srgb, var(--puzzle-negative) 38%, var(--theme-border));
    color: var(--puzzle-negative);
    background: color-mix(in srgb, var(--puzzle-negative) 10%, var(--theme-surface));
}

.battle-status[data-tone="waiting"] {
    color: var(--theme-muted);
    background: var(--theme-surface-alt);
}

.battle-abandon {
    width: 100%;
    min-height: 44px;
}

.battle-result {
    padding-top: .2rem;
}

.battle-result[hidden] {
    display: none;
}

.battle-result h2 {
    margin: .18rem 0 .1rem;
    color: var(--theme-title);
    font-size: 1.7rem;
}

.battle-result > p:not(.workspace-kicker) {
    margin: 0 0 .65rem;
    color: var(--theme-muted);
    font-size: .8rem;
}

.battle-result-score {
    display: grid;
    gap: .35rem;
    margin: 0;
}

.battle-result-score > div {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: 9px;
    background: var(--theme-surface-alt);
}

.battle-result-score dt,
.battle-result-score dd {
    overflow: hidden;
    margin: 0;
    color: var(--theme-muted);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-result-score dt,
.battle-result-score strong {
    color: var(--theme-title);
}

.battle-result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    margin-top: .7rem;
}

.battle-result-actions .btn {
    min-height: 44px;
}

@media (max-width: 1160px) {
    .battle-active-page {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

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

    .battle-board-column {
        width: min(100%, calc(100dvh - 190px));
        max-width: 46rem;
        justify-self: center;
    }

    .battle-match-panel {
        width: min(100%, 46rem);
    }
}

@media (max-width: 900px) {
    .battle-active-page {
        width: 100%;
    }

    .battle-match-heading {
        margin-bottom: .55rem;
    }

    .battle-match-heading h1 {
        font-size: 1.25rem;
    }

    .battle-board-column {
        width: 100%;
    }

    .battle-match-layout {
        gap: .7rem;
    }

    .battle-match-panel {
        padding: .65rem;
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .battle-match-heading .workspace-kicker {
        display: none;
    }

    .battle-match-heading h1 {
        font-size: 1.08rem;
    }

    .battle-connection {
        min-height: 28px;
        font-size: .66rem;
    }

    .battle-participant {
        min-height: 50px;
        padding: .35rem .45rem;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: .5rem;
        border-radius: 10px;
    }

    .battle-color-piece {
        width: 34px;
        height: 34px;
        font-size: 1.45rem;
    }

    .battle-player-state {
        min-height: 24px;
    }

    .battle-active-page .board-frame {
        padding: 2px 2px 24px 25px;
    }

    .battle-active-page .battle-clock,
    .battle-problem-count {
        min-height: 62px;
    }

    .battle-active-page .battle-clock strong,
    .battle-problem-count strong {
        font-size: 1.3rem;
    }

    .battle-score-row {
        min-height: 56px;
    }
}

/* 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);
    }

    .puzzle-workspace .side-col {
        max-height: none;
        overflow: visible;
    }

    .analysis-console {
        min-height: 560px;
        max-height: min(640px, calc(100dvh - 80px));
        overflow: hidden;
    }
}

@media (max-width: 900px) {
    /* Navegación táctil: fija abajo para no robar altura al tablero. */
    body {
        min-height: 100dvh;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .sidebar {
        position: fixed;
        z-index: 1000;
        inset: auto 0 0;
        width: auto;
        max-width: none;
        height: calc(68px + env(safe-area-inset-bottom));
        padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
        overflow: visible;
        border-right: 0;
        border-top: 1px solid var(--border);
        border-bottom: 0;
        background: var(--bg-side);
        box-shadow: 0 -8px 22px rgba(0, 0, 0, .16);
    }

    .logo,
    .side-foot,
    .side-submenu,
    .side-caret {
        display: none;
    }

    .side-nav {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        height: 60px;
        gap: .15rem;
        overflow: visible;
    }

    /* Una cuenta autorizada ve ChessCraft como séptimo acceso sin provocar
       desplazamiento horizontal ni reducir la zona táctil vertical. */
    .side-nav:has(.chesscraft-link) { grid-template-columns: repeat(7, minmax(0, 1fr)); }

    .side-item {
        min-width: 0;
        animation: none;
    }

    .side-link {
        display: flex;
        min-width: 0;
        min-height: 52px;
        height: 60px;
        padding: .25rem .1rem;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: .15rem;
        border-radius: 8px;
        font-size: 0;
        line-height: 1;
        text-align: center;
        animation: none;
    }

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

    .side-link span {
        display: none;
    }

    .side-link::after {
        content: attr(data-mobile-label);
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: currentColor;
        font-size: .59rem;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .side-link.is-active {
        border-color: color-mix(in srgb, var(--accent-fill) 34%, var(--border));
        box-shadow: inset 0 3px 0 var(--accent-fill);
    }

    main,
    body:has(.home-club) main,
    body:has(.play-room) main,
    main:has(.workspace-page),
    main:has(.content-page),
    .auth-page main {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .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%;
    }

    /* En móvil el contenido aparece inmediatamente; no se oculta durante
       animaciones de entrada que retrasan la primera impresión. */
    .home-stage,
    .home-live-game,
    .home-ways,
    .home-personal,
    .card,
    .play-room-intro,
    .play-board-stage,
    .play-control-deck,
    .bot-lobby-shell .bot-item {
        animation: none;
    }

    .bot-lobby-shell {
        align-items: start;
    }

    .bot-lobby-glow {
        display: none;
    }

    .bot-roster,
    .bot-brief {
        align-self: start;
    }

    .watch-page > .card {
        padding: clamp(1rem, 4vw, 1.5rem);
        border-radius: 18px 18px 32px 18px;
    }

    .watch-page .empty {
        min-height: 240px;
    }

    .community-page .dash,
    .community-page .dash-main {
        gap: .8rem;
    }

    .community-page .empty {
        min-height: 150px;
    }

    /* Profundidad contenida en superficies táctiles: mantiene la identidad
       sin el salto visual propio de los estados hover de escritorio. */
    .card,
    .play-board-stage,
    .play-control-deck,
    .bot-roster,
    .bot-brief,
    .admin-control-panel {
        box-shadow: 0 5px 16px var(--theme-shadow);
    }

    .admin-page {
        width: 100%;
        max-width: 100%;
    }

    .admin-confirm-dialog,
    .play-promotion-dialog,
    .play-confirm-dialog {
        max-height: calc(100dvh - 1rem);
        margin-block: auto;
    }
}

@media (max-width: 720px) {
    .home-mobile-quick {
        display: grid;
        gap: .7rem;
        margin: 1.15rem 0 .35rem;
    }

    .home-mobile-play {
        width: 100%;
        min-height: 56px;
        font-size: 1rem;
    }

    .home-mobile-secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .home-mobile-secondary a {
        display: flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .55rem .4rem;
        border: 1px solid var(--home-line);
        border-radius: 10px;
        color: var(--home-ink);
        background: color-mix(in srgb, var(--theme-surface) 52%, transparent);
        font-size: .76rem;
        font-weight: 750;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
    }

    .home-mobile-secondary img {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        object-fit: contain;
    }

    .puzzle-nav-mobile {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        gap: .25rem;
        overflow: visible;
    }

    .puzzle-nav-mobile .puzzle-mode-link {
        min-width: 0;
        min-height: 52px;
        padding: .4rem .2rem;
        justify-content: center;
        flex-direction: column;
        gap: .18rem;
        font-size: 0;
        text-align: center;
    }

    .puzzle-nav-mobile .puzzle-mode-link svg {
        width: 18px;
        height: 18px;
    }

    .puzzle-nav-mobile .puzzle-mode-link span {
        display: none;
    }

    .puzzle-nav-mobile .puzzle-mode-link::after {
        content: attr(data-mobile-label);
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: currentColor;
        font-size: .66rem;
        font-weight: 800;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .puzzle-journey-room .puzzle-rank-ribbon {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .55rem;
        margin: .45rem 0 .6rem;
        padding: .6rem;
        border-radius: 14px;
    }

    .puzzle-journey-room .puzzle-rank-emblem {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .puzzle-journey-room .puzzle-rank-emblem svg {
        width: 29px;
        height: 29px;
    }

    .puzzle-journey-room .puzzle-progress-caption,
    .puzzle-journey-room .puzzle-rank-actions {
        display: none;
    }
}

@media (max-width: 560px) {
    body:has(.home-club) main {
        padding: .45rem .45rem calc(92px + env(safe-area-inset-bottom));
    }

    .home-club {
        gap: 1rem;
    }

    .home-stage {
        border-radius: 16px 16px 28px 16px;
    }

    .home-stage-copy {
        padding: 1.15rem .9rem 1rem;
    }

    .home-club-kicker {
        margin-bottom: .6rem;
        font-size: .66rem;
    }

    .home-stage h1 {
        max-width: 10ch;
        margin-bottom: .65rem;
        font-size: clamp(2.45rem, 12.5vw, 3.25rem);
        line-height: .96;
    }

    .home-club-lead {
        max-width: 32rem;
        font-size: .9rem;
        line-height: 1.45;
    }

    .home-rhythm-heading,
    .home-rhythm-grid,
    .home-account-note {
        display: none;
    }

    .home-puzzle-feature {
        padding: 1.05rem .9rem 1.2rem;
    }

    .home-puzzle-feature h2 {
        margin-top: .45rem;
        font-size: 1.7rem;
    }

    .home-puzzle-feature > p {
        margin-top: .15rem;
        font-size: .78rem;
    }

    .home-puzzle-feature .board-frame {
        width: 100%;
        margin: .8rem auto .65rem;
        padding: 2px 2px 21px 21px;
    }

    .home-puzzle-feature coords {
        font-size: 10px;
    }

    .home-puzzle-feature coords.ranks {
        left: -17px;
    }

    .home-puzzle-feature coords.files {
        bottom: -17px;
    }

    body:has(.play-room) main {
        padding: .45rem .35rem calc(92px + env(safe-area-inset-bottom));
    }

    .play-room-intro {
        margin-bottom: .45rem;
        padding-inline: .25rem;
    }

    .play-room-intro h1 {
        font-size: 1.75rem;
    }

    .play-room-kicker {
        font-size: .67rem;
    }

    .play-room-layout {
        gap: .75rem;
    }

    .play-board-stage {
        padding: .35rem;
        border-radius: 12px 12px 22px 12px;
    }

    .play-board-label {
        margin-bottom: .25rem;
        font-size: .68rem;
    }

    .play-room .board-frame {
        padding: 2px 2px 21px 21px;
    }

    .play-room [data-play] coords {
        font-size: 10px;
    }

    .play-room [data-play] coords.ranks {
        left: -17px;
    }

    .play-room [data-play] coords.files {
        bottom: -17px;
    }

    .play-panel-head,
    .play-panel-body {
        padding: 1rem;
    }

    .play-panel-head h2 {
        font-size: 1.7rem;
    }

    .play-promotion-dialog,
    .play-confirm-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
    }

    main:has(.puzzle-workspace) {
        padding: .45rem .35rem calc(92px + env(safe-area-inset-bottom));
    }

    .puzzle-page-header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: .45rem;
        padding-inline: .25rem;
    }

    .puzzle-heading-mark {
        display: none;
    }

    .puzzle-page-header h1 {
        font-size: 1.48rem;
    }

    .puzzle-nav-mobile {
        margin-bottom: .45rem;
    }

    .puzzle-board-stage {
        padding: .25rem;
        border-radius: 12px;
    }

    main:has(.analysis-lab) {
        padding: .4rem .25rem calc(92px + env(safe-area-inset-bottom));
    }

    .analysis-lab__intro {
        gap: .15rem;
        padding-inline: .3rem;
    }

    .analysis-lab__intro h1 {
        font-size: 1.4rem;
    }

    .analysis-board-row {
        gap: .15rem;
    }

    .analysis-eval {
        width: 24px;
        min-width: 24px;
    }

    .analysis-player {
        padding-left: 1.65rem;
    }

    .analysis-console {
        min-height: 0;
        border-radius: 12px;
    }

    /* En móvil, la lectura sigue la tarea: navegar, revisar jugadas y evaluar. */
    .analysis-nav {
        order: 1;
        border-top: 0;
        border-bottom: 1px solid var(--theme-border);
    }

    .analysis-tree-section {
        order: 2;
        min-height: 150px;
        flex: none;
        padding-bottom: .75rem;
    }

    .analysis-engine {
        order: 3;
    }

    .analysis-console__head {
        order: 4;
    }

    .analysis-console__foot {
        order: 5;
    }

    main:has(.bot-lobby-workspace) {
        padding: .45rem .4rem calc(92px + env(safe-area-inset-bottom));
    }

    .bot-lobby-intro {
        margin-bottom: .45rem;
        padding-left: .55rem;
    }

    .bot-lobby-intro h1 {
        font-size: 1.65rem;
        line-height: 1;
    }

    .bot-roster {
        padding: .7rem;
        border-radius: 15px 15px 15px 26px;
    }

    .bot-lobby-shell .bot-item {
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: 96px;
        height: auto;
        padding: .55rem;
        overflow: visible;
        animation: none;
    }

    .bot-lobby-shell .bot-category {
        overflow: visible;
    }

    .bot-lobby-shell .bot-avatar {
        width: 58px;
        height: 76px;
    }

    .bot-lobby-shell .bot-info {
        align-self: center;
    }

    .bot-selected-state {
        align-self: start;
    }

    .bot-brief .bot-feature {
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 116px;
        height: auto;
        overflow: visible;
    }

    .bot-brief .bot-feature-portrait {
        width: 82px;
        height: 102px;
    }

    main:has(.content-page),
    .community-page {
        --mobile-section-gap: .75rem;
    }

    .content-page .page-header {
        margin-bottom: .75rem;
    }

    .content-page .page-header h1,
    .community-page .page-header h1 {
        font-size: 2rem;
    }

    .watch-page > .card {
        padding: 1rem;
    }

    .watch-page .empty {
        min-height: 220px;
    }

    .watch-page .empty-text {
        font-size: 1.05rem;
    }

    .community-page .dash-main,
    .community-page .dash-side {
        gap: var(--mobile-section-gap);
    }

    .community-page .card,
    .community-page .empty {
        padding: 1rem;
    }
}

@media (max-width: 900px) and (hover: none) {
    .btn:hover,
    .card:hover,
    .side-link:hover,
    .bot-lobby-shell .bot-item:hover,
    .admin-launch-card:hover {
        transform: none;
    }

    .btn:active,
    .bot-lobby-shell .bot-item:active,
    .admin-launch-card:active {
        transform: scale(.985);
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
    }

    .sidebar {
        height: calc(58px + env(safe-area-inset-bottom));
        padding-block: .2rem calc(.2rem + env(safe-area-inset-bottom));
    }

    .side-nav,
    .side-link {
        height: 50px;
    }

    .side-link {
        min-height: 48px;
    }

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

    .play-room-layout,
    .board-workspace .game-layout,
    .analysis-lab__workspace {
        width: min(100%, 48rem);
        margin-inline: auto;
    }

    .play-board-stage,
    .board-workspace .board-col,
    .analysis-board-stage {
        width: min(100%, calc(100dvh - 88px));
        justify-self: center;
    }
}