/* ==========================================================================
   SKIN: MONOCHROME NOIR (MINIMALISTA Y MONOCOLOR)
   ========================================================================== */

:root {
    --bg-main: #090a0f;
    --bg-card: #12151e;
    --bg-card-hover: #181c28;
    --bg-canvas: #0c0e14;
    
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.22);
    --border-focus: rgba(255, 255, 255, 0.5);
    
    /* Monocolor Accent (Blanco Puro) */
    --accent: #ffffff;
    --accent-muted: rgba(255, 255, 255, 0.1);
    
    --text-primary: #f8fafc;
    --text-secondary: #8a94a6;
    --text-muted: #525a6e;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    margin: 0;
    padding: 24px;
    text-align: center;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Encabezado */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.logo-icon {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}

h1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0;
    color: var(--text-primary);
}

/* Barra de Metas */
.goals-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: var(--bg-card);
    padding: 18px 24px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

@media (max-width: 720px) {
    .goals-bar {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.goal-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    width: 100%;
}

.goal-card img {
    width: 42px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.goal-card .info {
    text-align: left;
}

.goal-card .badge {
    font-size: 9px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.badge-start { 
    background: #ffffff; 
    color: #000000; 
}
.badge-target { 
    background: transparent; 
    color: var(--text-primary); 
    border: 1px solid var(--border-hover);
}

.goal-card h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.goals-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: center;
}

.connector-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.connector-indicator svg {
    width: 14px;
    height: 14px;
    fill: var(--text-secondary);
}

/* Botones de Acción (Monocromo) */
.actions-group {
    display: flex;
    gap: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn svg {
    width: 14px;
    height: 14px;
}

.btn-primary {
    background: var(--text-primary);
    color: var(--bg-main);
    border-color: var(--text-primary);
}

.btn-primary:hover {
    background: #e2e8f0;
    border-color: #e2e8f0;
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

/* Buscador Principal */
.search-wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto 16px auto;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    fill: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 40px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
    transition: all 0.15s ease;
}

.search-input:focus {
    border-color: var(--border-focus);
}

.autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--bg-card-hover);
}

.autocomplete-item img {
    width: 34px;
    height: 46px;
    object-fit: cover;
    border-radius: 4px;
}

.autocomplete-item .type-tag {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
}

/* Status Messages */
.status-message {
    font-size: 12px;
    font-weight: 500;
    min-height: 20px;
    margin-bottom: 12px;
}

.status-message.error {
    color: #f87171;
}

/* Panel de Solución */
.solution-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 95%;
    box-sizing: border-box;
    margin: 0 auto 16px auto;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.solution-panel h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
}

.solution-panel p {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.solution-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.solution-step {
    background: var(--bg-main);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-width: 85px;
    text-align: center;
}

.solution-step img {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
}

.solution-step h5 {
    margin: 6px 0 2px 0;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px;
}

.solution-arrow {
    width: 14px;
    height: 14px;
    fill: var(--text-secondary);
}

/* Canvas del Tablero */
.board-canvas {
    position: relative;
    width: 100%;
    max-width: 95%;
    height: 600px;
    background-color: var(--bg-canvas);
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin: 0 auto;
    overflow: hidden;
    user-select: none;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

#connectionsSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

#connectionsSvg line {
    stroke: rgba(255, 255, 255, 0.25) !important;
    stroke-width: 1.5px !important;
}

/* Camino con la mejor conexión encontrada hasta ahora (multijugador): se
   pinta por encima del resto en amarillo para que destaque de un vistazo.
   Si se encuentra un camino más corto, esta clase pasa a las líneas del
   nuevo camino y las anteriores vuelven al estilo normal de arriba. */
#connectionsSvg line.mp-best-path-line {
    stroke: #fbbf24 !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.55));
}

/* Fichas / Nodos Arrastrables */
.node-card {
    position: absolute;
    background: var(--bg-card);
    padding: 8px;
    border-radius: 8px;
    width: 100px;
    border: 1px solid var(--border-color);
    text-align: center;
    z-index: 2;
    cursor: grab;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    transition: border-color 0.15s, transform 0.15s ease;
}

.node-card:hover {
    border-color: var(--border-hover);
}

.node-card:active {
    cursor: grabbing;
    z-index: 100;
    border-color: var(--text-primary);
}

.node-card.start-node { 
    border: 2px solid var(--text-primary); 
}
.node-card.target-node { 
    border: 2px dashed var(--text-secondary); 
}

.node-card img {
    width: 100%;
    height: 135px;
    object-fit: cover;
    border-radius: 4px;
    pointer-events: none;
}

.node-card h4 {
    margin: 6px 0 1px 0;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-card small {
    color: var(--text-muted);
    font-size: 9px;
    font-family: ui-monospace, monospace;
    pointer-events: none;
    text-transform: uppercase;
}

.delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--bg-main);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    transition: all 0.15s ease;
}

.delete-btn:hover {
    background: var(--text-primary);
    color: var(--bg-main);
    border-color: var(--text-primary);
}

.delete-btn svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

/* Selectores y Controles de Meta */
.goal-card-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 260px;
}

.goal-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

.goal-search-container {
    position: relative;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.goal-search-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
    margin: 0;
}

.goal-search-input:focus {
    border-color: var(--border-focus);
}

.goal-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    z-index: 1050;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.goal-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}

.goal-autocomplete-item:hover {
    background: var(--bg-card-hover);
}

.goal-autocomplete-item img {
    width: 28px;
    height: 38px;
    object-fit: cover;
    border-radius: 4px;
}

/* Botón Aleatorio (Shuffle) */
.shuffle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--bg-main);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.shuffle-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: var(--bg-card);
}

.shuffle-btn svg {
    width: 16px;
    height: 16px;
}

@keyframes spin-shake {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.shuffle-btn svg.spinning {
    animation: spin-shake 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   SESIÓN: widget de la esquina superior derecha
   ========================================================================== */

.auth-widget {
    position: fixed;
    top: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    z-index: 40;
}

.auth-widget .auth-username {
    color: var(--text-primary);
    font-weight: 600;
}

.auth-widget a,
.auth-widget button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-widget a:hover,
.auth-widget button:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

@media (max-width: 720px) {
    .auth-widget {
        position: static;
        justify-content: center;
        margin: 0 0 16px 0;
    }
}

/* ==========================================================================
   MENÚ DE USUARIO (avatar circular + desplegable)
   Sustituye al antiguo botón "Cerrar sesión". El avatar es, por defecto,
   un círculo simple con el icono de la app en blanco; cuando en el futuro
   se pueda subir una foto de perfil, esta sustituirá al icono dentro del
   mismo círculo (ver regla .user-avatar-btn img).
   ========================================================================== */

.user-menu {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.user-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;

    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;

    transition: background 0.15s ease, border-color 0.15s ease;
}

/* .auth-widget button (y su variante para .site-topbar en móvil, más abajo
   en este archivo) también seleccionan este botón por ser un <button>
   dentro de .auth-widget, y pisan tanto el padding como el border-radius
   de arriba porque su especificidad es mayor (clase + tipo de elemento
   gana a una sola clase). Estas dos reglas anulan eso explícitamente para
   que el botón sea siempre un círculo, tenga o no foto de perfil. */
.auth-widget .user-avatar-btn,
.site-topbar .auth-widget .user-avatar-btn {
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

.user-avatar-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Reservado para cuando el usuario tenga una foto de perfil personalizada:
   basta con meter un <img> dentro de .user-avatar-btn en vez del <svg>. */
.user-avatar-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-btn:hover,
.user-menu.open .user-avatar-btn {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    padding: 8px;
    box-sizing: border-box;

    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
}

.user-menu.open .user-menu-dropdown {
    display: flex;
}

/* Cabecera "Hola, XXXX" dentro del propio desplegable, para las páginas
   donde no hay sitio (o no tiene sentido) mostrarlo también fuera, junto
   al avatar (a diferencia de menu.html, que sí lo muestra fuera). */
.user-menu-greeting {
    padding: 8px 12px 4px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-divider {
    height: 1px;
    margin: 2px 4px 6px;
    background: var(--border-color);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    box-sizing: border-box;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;

    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.user-menu-item:hover {
    background: var(--bg-card-hover);
}

.user-menu-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .user-avatar-btn {
        width: 36px;
        height: 36px;
    }

    .user-menu-dropdown {
        min-width: 190px;
    }
}

/* ==========================================================================
   PÁGINA DE LOGIN / REGISTRO
   ========================================================================== */

.auth-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-brand svg {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}

.auth-brand span {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.auth-tabs {
    display: flex;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    user-select: none;
}

.auth-tab.active {
    background: var(--text-primary);
    color: var(--bg-main);
}

.auth-form {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.auth-form.active {
    display: flex;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.auth-field label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-field input {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.auth-field input:focus {
    border-color: var(--border-focus);
}

.auth-error {
    font-size: 12px;
    color: #f87171;
    min-height: 16px;
    text-align: left;
}

.auth-submit {
    height: 42px;
    border-radius: 6px;
    border: 1px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-main);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-submit:hover {
    background: #e2e8f0;
    border-color: #e2e8f0;
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-back {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
}

.auth-back:hover {
    color: var(--text-primary);
}

/* ==========================================================================
   ENLACE "← MENÚ" (esquina superior izquierda, espejo del auth-widget)
   ========================================================================== */

.nav-back {
    position: fixed;
    top: 20px;
    left: 24px;
    z-index: 40;
}

.nav-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-back a:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

@media (max-width: 720px) {
    .nav-back {
        position: static;
        display: flex;
        justify-content: center;
        margin: 0 0 12px 0;
    }
}

/* ==========================================================================
   PÁGINA DE MENÚ PRINCIPAL
   ========================================================================== */

.menu-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-wrap {
    width: 100%;
    max-width: 900px;
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
}

.menu-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.menu-brand .logo-icon {
    width: 30px;
    height: 30px;
    fill: var(--text-primary);
}

.menu-brand h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
}

.menu-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 36px 0;
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

@media (max-width: 720px) {
    .mode-grid {
        grid-template-columns: 1fr;
    }
}

.mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 28px 20px;
    text-decoration: none;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.mode-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateY(-3px);
}

.mode-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.mode-icon svg {
    width: 22px;
    height: 22px;
}

.mode-card h3 {
    margin: 4px 0 0 0;
    font-size: 15px;
    font-weight: 600;
}

.mode-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==========================================================================
   PÁGINAS "PRÓXIMAMENTE" (diario / multijugador, hasta que las construyamos)
   ========================================================================== */

.placeholder-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-card {
    width: 100%;
    max-width: 420px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 36px 28px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.placeholder-card .mode-icon {
    margin: 0 auto 18px auto;
    width: 56px;
    height: 56px;
}

.placeholder-card .mode-icon svg {
    width: 26px;
    height: 26px;
}

.placeholder-card h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.placeholder-card p {
    margin: 0 0 24px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==========================================================================
   MODO DIARIO
   ========================================================================== */

.daily-meta {
    max-width: 900px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
}

.daily-date-badge {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    text-transform: capitalize;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--text-primary);
}

.leaderboard-wrap {
    max-width: 600px;
    margin: 24px auto 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.leaderboard-wrap h3 {
    margin: 0 0 14px 0;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

/* ==================== Modo "Las 5 Pistas" ==================== */

.pistas-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Barra de intentos (los 5 "puntos", como en un Wordle) */
.pistas-attempts-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pistas-attempt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.pistas-attempt-dot.correct {
    background: #34d399;
    border-color: #34d399;
}

.pistas-attempt-dot.wrong {
    background: #f87171;
    border-color: #f87171;
}

.pistas-attempts-label {
    margin-left: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Panel de pistas */
.pistas-hints-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.hint-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 18px;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.hint-card.locked {
    opacity: 0.5;
}

.hint-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.hint-card.locked .hint-card-header {
    color: var(--text-secondary);
}

.hint-lock-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.hint-card-body {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-primary);
}

.hint-line {
    margin: 4px 0;
    color: var(--text-secondary);
}

.hint-line strong {
    color: var(--text-primary);
    font-weight: 600;
}

.hint-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hint-chip {
    background: var(--accent-muted);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

.hint-tagline {
    margin: 0;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
}

.hint-cast-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hint-cast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 72px;
    text-align: center;
}

.hint-cast-item img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
}

.hint-cast-item span {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Historial de intentos */
.pistas-guesses-wrap {
    max-width: 640px;
    margin: 24px auto 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.pistas-guesses-wrap h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
}

.pistas-no-guesses {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}

.pistas-guess-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 8px;
}

.pistas-guess-row img {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.pistas-guess-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.pistas-guess-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pistas-guess-row.correct .pistas-guess-icon {
    color: #34d399;
}

.pistas-guess-row.wrong .pistas-guess-icon {
    color: #f87171;
}

/* Resultado final (acierto o intentos agotados) */
.pistas-result-panel {
    max-width: 640px;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 22px;
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.pistas-result-panel.success {
    border-color: rgba(52, 211, 153, 0.4);
}

.pistas-result-panel.fail {
    border-color: rgba(248, 113, 113, 0.4);
}

.pistas-result-poster {
    width: 72px;
    height: 108px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--bg-card-hover);
}

.pistas-result-info h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.pistas-result-panel.success .pistas-result-info h3 {
    color: #34d399;
}

.pistas-result-panel.fail .pistas-result-info h3 {
    color: #f87171;
}

.pistas-result-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pistas-result-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}


.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.leaderboard-table th {
    text-align: left;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    color: var(--text-primary);
}

.leaderboard-table tr:last-child td {
    border-bottom: none;
}

.leaderboard-table tr.me {
    background: var(--bg-card-hover);
}

.leaderboard-table th:nth-child(1),
.leaderboard-table td.rank {
    width: 28px;
}

.leaderboard-table td.rank {
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) {
    width: 55%;
}

.leaderboard-table .status-fail {
    color: #f87171;
}

/* Foto de perfil (o iniciales) junto al nombre de usuario en las filas del
   ranking, tanto en el ranking de hoy como en el historial de días pasados. */
.leaderboard-user-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leaderboard-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.leaderboard-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.leaderboard-empty {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 6px 0;
    text-align: left;
}

.leaderboard-table tr.expandable {
    cursor: pointer;
}

.leaderboard-table tr.expandable:hover {
    background: var(--bg-card-hover);
}

.leaderboard-table .expand-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}

.leaderboard-detail-row td {
    padding: 12px 8px 18px 8px;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-hint {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
}

.history-toggle-btn {
    margin-left: 6px;
}

.history-wrap {
    max-width: 500px;
    margin: 0 auto 24px auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.history-wrap h4 {
    margin: 20px 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary);
}

.history-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.history-calendar-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-nav-btn svg {
    width: 14px;
    height: 14px;
}

.calendar-nav-btn:hover:not(:disabled) {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.calendar-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* En pantallas grandes el contenedor .history-wrap es ancho (700px),
   lo que hacía que las celdas del calendario crecieran demasiado.
   Limitamos el ancho del calendario en sí (no el resto del panel)
   para que las celdas queden del mismo tamaño que en móvil. */
@media (min-width: 721px) {
    .calendar-weekdays,
    .calendar-grid {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}

.calendar-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
}

.calendar-cell.empty {
    visibility: hidden;
}

.calendar-cell.has-challenge {
    flex-direction: column;
    gap: 3px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-cell.has-challenge:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.calendar-cell-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-primary);
}

.history-detail-goals {
    margin-top: 18px;
}

/* ==========================================================================
   MODO MULTIJUGADOR
   ========================================================================== */

.mp-wrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mp-hero {
    margin: 0 0 28px 0;
}

.mp-hero p {
    margin: 6px 0 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.mp-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    text-align: left;
}

@media (max-width: 640px) {
    .mp-home-grid {
        grid-template-columns: 1fr;
    }
}

.mp-option-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mp-option-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.mp-option-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.mp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-field label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mp-rounds-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-rounds-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mp-rounds-stepper button:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.mp-rounds-stepper span {
    min-width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
}

.mp-field input[type="text"] {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    font-family: ui-monospace, monospace;
}

.mp-field input[type="text"]:focus {
    border-color: var(--border-focus);
}

.mp-error {
    font-size: 12px;
    color: #f87171;
    min-height: 16px;
    text-align: left;
}

/* Lobby / sala de espera */
.mp-lobby-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 26px;
    box-sizing: border-box;
    text-align: center;
}

.mp-token-display {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px 0;
}

.mp-token-value {
    font-family: ui-monospace, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-primary);
}

.mp-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
}

.mp-copy-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.mp-copy-btn svg {
    width: 14px;
    height: 14px;
}

.mp-lobby-hint {
    margin: 0 0 20px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.mp-players-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 22px 0;
    text-align: left;
}

.mp-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
}

.mp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

/* Cuando el jugador tiene foto de perfil, se inserta un <img> dentro de
   .mp-avatar en vez de las iniciales (ver mpAvatarHTML en multiplayer.html). */
.mp-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Variante reducida para las filas de las tablas de resultados (entre
   rondas y fin de partida). */
.mp-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.mp-player-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
}

.mp-status-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.mp-status-pill.ready {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.1);
}

.mp-status-pill.waiting-slot {
    font-style: italic;
}

.mp-status-pill.disconnected {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.1);
}

/* Cuenta atrás a pantalla completa */
.mp-countdown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 10, 15, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.mp-countdown-number {
    font-size: 120px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
}

/* Barra superior durante la partida */
.mp-topbar {
    max-width: 900px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
}

.mp-topbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mp-topbar-item .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.mp-topbar-item .value {
    font-size: 15px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
}

.mp-timer.mp-timer-low {
    color: #fc3333;
}

.mp-opponent-status {
    font-size: 13px;
    color: var(--text-secondary);
}

.mp-opponent-status.done {
    color: #34d399;
}

.mp-opponent-status.rendido {
    color: #c3e01d;
}

/* Panel de fin de ronda / fin de partida */
.mp-round-end-panel,
.mp-gameover-panel {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 26px;
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.mp-round-end-panel h3,
.mp-gameover-panel h2 {
    margin: 0 0 4px 0;
}

.mp-round-end-panel p,
.mp-gameover-panel p {
    margin: 0 0 18px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.mp-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.mp-results-table th {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.mp-results-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 13px;
}

.mp-results-table tr:last-child td {
    border-bottom: none;
}

.mp-results-table tr.winner td {
    color: #34d399;
    font-weight: 700;
}

.mp-results-user-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-gameover-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mp-conn-banner {
    max-width: 640px;
    margin: 0 auto 14px auto;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    font-size: 12px;
    text-align: center;
}

/* Popup "conexión encontrada": aparece arriba centrado al conseguir una
   conexión en multijugador y se retira solo a los pocos segundos. */
.mp-connection-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    text-align: left;
    pointer-events: none;
    animation: mp-toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mp-connection-toast.hide {
    animation: mp-toast-out 0.25s ease forwards;
}

.mp-connection-toast-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-connection-toast-icon svg {
    width: 18px;
    height: 18px;
}

.mp-connection-toast-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mp-connection-toast-text strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.mp-connection-toast-text span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

@keyframes mp-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, -14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes mp-toast-out {
    from {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -10px) scale(0.97);
    }
}

@media (max-width: 480px) {
    .mp-connection-toast {
        top: 68px;
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
        padding: 12px 14px;
    }

    .mp-connection-toast-icon {
        width: 30px;
        height: 30px;
    }

    @keyframes mp-toast-in {
        from { opacity: 0; transform: translateY(-14px) scale(0.97); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes mp-toast-out {
        from { opacity: 1; transform: translateY(0) scale(1); }
        to { opacity: 0; transform: translateY(-10px) scale(0.98); }
    }
}

/* ==========================================================================
   RESPONSIVE MÓVIL
   Solo afecta a pantallas de móvil (≤480px). No toca tablet ni escritorio,
   que ya se ven bien con las reglas de arriba.
   ========================================================================== */

@media (max-width: 480px) {

    body {
        padding: 14px 10px;
    }

    header {
        margin-bottom: 16px;
        gap: 8px;
    }

    .logo-icon {
        width: 20px;
        height: 20px;
    }

    h1 {
        font-size: 17px;
    }

    /* Widget de sesión y enlace "menú": ya se apilan y centran a partir de
       720px; en móvil además reducimos un poco el tamaño de los botones. */
    .auth-widget,
    .nav-back a {
        font-size: 11px;
    }

    .auth-widget a,
    .auth-widget button {
        padding: 5px 10px;
    }

    /* En "Menú" y "Acerca de" el body actúa como flex-container para
       centrar la tarjeta. Sin dirección explícita, al pasar el
       nav-back/auth-widget a position: static (regla de 720px de arriba)
       se colocan en fila junto a la tarjeta en vez de apilarse encima,
       partiendo la pantalla en dos columnas. Forzamos columna solo en
       móvil para que todo se apile verticalmente como corresponde. */
    .menu-page,
    .about-page {
        flex-direction: column;
    }

    /* "← Menú" y el widget de usuario/cerrar sesión en una sola fila
       en vez de apilados, solo en móvil. */
    .mobile-topbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 16px;
    }

    .mobile-topbar .nav-back,
    .mobile-topbar .auth-widget {
        position: static;
        margin: 0;
        flex-shrink: 0;
    }

    /* Barra de metas (origen / conectar con / destino) */
    .goals-bar {
        padding: 14px 12px;
        gap: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .goal-card {
        gap: 10px;
        min-height: auto;
    }

    .goal-card img {
        width: 36px;
        height: 48px;
    }

    .goal-card h4 {
        font-size: 12px;
    }

    .goals-center {
        gap: 10px;
    }

    .connector-indicator {
        font-size: 10px;
    }

    .goal-card-container {
        max-width: 100%;
    }

    /* Buscador y botones */
    .search-wrapper {
        max-width: 100%;
    }

    .search-input {
        font-size: 16px; /* evita el zoom automático de iOS al enfocar */
        padding: 10px 38px 10px 38px;
    }

    .goal-search-input {
        font-size: 16px;
    }

    .actions-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .goal-controls {
        flex-wrap: nowrap;
    }

    /* Tablero: más bajo y con fichas más pequeñas para que quepan sin
       necesidad de hacer zoom, y el arrastre siga siendo cómodo con el dedo */
    .board-canvas {
        height: 430px;
        max-width: 100%;
        border-radius: 10px;
    }

    .node-card {
        width: 62px;
        padding: 4px;
        border-radius: 6px;
    }

    .node-card img {
        height: 76px;
        border-radius: 3px;
    }

    .node-card h4 {
        font-size: 8px;
        margin: 3px 0 0 0;
    }

    .node-card small {
        font-size: 6px;
    }

    .delete-btn {
        width: 15px;
        height: 15px;
        top: -4px;
        right: -4px;
    }

    .delete-btn svg {
        width: 8px;
        height: 8px;
    }

    /* Panel de solución */
    .solution-panel {
        padding: 14px;
        max-width: 100%;
    }

    .solution-chain {
        gap: 8px;
    }

    .solution-step {
        min-width: 68px;
        padding: 6px;
    }

    .solution-step img {
        width: 38px;
        height: 50px;
    }

    .solution-step h5 {
        max-width: 68px;
        font-size: 10px;
    }

    /* Login / registro */
    .auth-card {
        padding: 20px;
        border-radius: 12px;
    }

    .auth-brand span {
        font-size: 16px;
    }

    /* Menú principal */
    .menu-brand h1 {
        font-size: 21px;
    }

    .menu-subtitle {
        margin-bottom: 24px;
    }

    .mode-card {
        padding: 20px 16px;
    }

    .placeholder-card {
        padding: 26px 20px;
    }

    /* Modo diario */
    .daily-meta {
        font-size: 11px;
        gap: 8px;
    }

    .leaderboard-wrap {
        padding: 16px;
        border-radius: 10px;
    }

    .leaderboard-table {
        font-size: 12px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 7px 6px;
    }

    /* Modo "Las 5 Pistas" */
    .hint-card {
        padding: 12px 14px;
    }

    .pistas-result-panel {
        flex-direction: column;
        text-align: center;
        padding: 18px;
    }

    .pistas-result-poster {
        width: 96px;
        height: 144px;
    }

    .history-wrap {
        padding: 16px;
        border-radius: 10px;
    }

    .calendar-weekdays {
        font-size: 9px;
    }

    .calendar-cell {
        font-size: 11px;
    }

    .calendar-cell-dot {
        width: 3px;
        height: 3px;
    }

    /* Modo multijugador */
    .mp-hero p {
        font-size: 12px;
    }

    .mp-option-card {
        padding: 16px;
    }

    .mp-lobby-card {
        padding: 18px;
    }

    .mp-token-value {
        font-size: 21px;
        letter-spacing: 2px;
    }

    .mp-countdown-number {
        font-size: 84px;
    }

    .mp-topbar {
        gap: 14px;
        padding: 8px 14px;
        justify-content: space-around;
    }

    .mp-topbar-item .value {
        font-size: 13px;
    }

    .mp-opponent-status {
        flex-basis: 100%;
        font-size: 11px;
    }

    .mp-round-end-panel,
    .mp-gameover-panel {
        padding: 18px;
        max-width: 100%;
    }

    .mp-results-table th,
    .mp-results-table td {
        padding: 7px 5px;
        font-size: 12px;
    }

    .mp-gameover-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .about-card {
        margin: auto;
    }
}

/* ==========================================================================
   ENLACE "ACERCA DE" (pie del menú principal)
   ========================================================================== */

.menu-about-link {
    display: inline-block;
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.menu-about-link:hover {
    color: var(--text-secondary);
}

/* ==========================================================================
   PÁGINA "ACERCA DE"
   ========================================================================== */

.about-page {
    display: block;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0 16px 40px;
}

.about-page .site-topbar {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
}

.about-page .about-card {
    margin: 40px auto 0;
}
.about-card {
    width: 100%;
    max-width: 480px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.about-card h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
}

.about-card > p {
    margin: 0 0 28px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.about-people {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.about-person {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 18px;
}

.about-person h3 {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.about-person .about-role {
    margin: 0 0 12px 0;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.about-link:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.about-link svg {
    width: 14px;
    height: 14px;
}


/* ==========================================================================
   BARRA SUPERIOR GLOBAL
   Unifica navegación + sesión en todas las páginas.
   ========================================================================== */

.site-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: calc(100% + 48px);
    min-height: 56px;
    margin: -24px -24px 24px;
    padding: 0 24px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;

    background: rgba(9, 10, 15, 0.94);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-topbar-title {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-topbar-title .logo-icon-sm {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: var(--text-primary);
}

.site-nav {
    display: flex;
    align-items: center;
    grid-column: 1;
    justify-self: start;
    min-width: 0;
}

.site-nav-link,
.site-nav-current {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    box-sizing: border-box;

    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-primary);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav-link {
    transition: background 0.15s ease, border-color 0.15s ease;
}

.site-nav-link:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

.site-nav-current {
    color: var(--text-secondary);
}

/* Icono discreto de acceso al buzón de sugerencias (solo admins),
   al lado del botón "Menú"/"← Menú". Mismo lenguaje visual que
   .site-nav-link pero sin texto. */
.site-nav-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 8px;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;

    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-decoration: none;

    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-nav-icon-link svg {
    width: 16px;
    height: 16px;
}

.site-nav-icon-link:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

/* El auth deja de ser "fixed": ahora forma parte de la barra y nunca
   cambia de posición entre páginas. */
.site-topbar .auth-widget {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    grid-column: 3;
    justify-self: end;
    flex-shrink: 0;
    z-index: auto;
}

/* Evita que las reglas antiguas de .nav-back interfieran. */
.site-topbar .nav-back {
    position: static;
    margin: 0;
}

/* La barra ya ocupa el lugar del antiguo mobile-topbar. */
.mobile-topbar {
    display: none !important;
}

/* Menu y Acerca de tenían el body como flex-container. Con la barra global
   arriba, pasamos a flujo normal para que el contenido no "salte". */
.menu-page,
.about-page {
    display: block;
}

.menu-page .menu-wrap {
    margin-top: clamp(28px, 8vh, 80px);
    margin-left: auto;
    margin-right: auto;
}

.about-page .about-card {
    margin: 40px auto;
}

/* El header de las páginas de juego mantiene exactamente la misma altura,
   separación y posición relativa al contenido. */
body:not(.menu-page):not(.about-page):not(.auth-page) > header {
    margin-top: 0;
}

/* ==========================================================================
   BARRA SUPERIOR RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
    .site-topbar {
        width: calc(100% + 20px);
        min-height: 52px;
        margin: -14px -10px 16px;
        padding: 0 10px;
        gap: 10px;
    }

    .site-topbar-title {
        font-size: 12.5px;
    }

    .site-nav-link,
    .site-nav-current {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .site-topbar .auth-widget {
        gap: 6px;
    }

    .site-nav-icon-link {
        width: 32px;
        height: 32px;
        margin-left: 6px;
    }

    .site-topbar .auth-widget a,
    .site-topbar .auth-widget button {
        padding: 5px 10px;
        font-size: 11px;
    }

    .menu-page .menu-wrap {
        margin-top: 24px;
    }

    .about-page {
        padding: 0 10px 24px;
    }

    .about-page .site-topbar {
        width: calc(100% + 20px);
        margin-left: -10px;
        margin-right: -10px;
    }

    .about-page .about-card {
        margin-top: 24px;
    }
}

@media (max-width: 360px) {
    .site-topbar {
        gap: 6px;
    }

    .site-nav-link,
    .site-nav-current {
        padding-left: 8px;
        padding-right: 8px;
    }

    .site-topbar .auth-widget a,
    .site-topbar .auth-widget button {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* Ajuste para la página de administración con la barra superior global. */
.admin-page .admin-card {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    .admin-page .admin-card {
        margin-top: 24px;
    }
}

/* ========================================================================== 
   WIDGET "¿NO LO ENCUENTRAS? SUGIÉRELO"
   ========================================================================== */

/* Botón de sugerencia: icono de bombilla discreto, integrado en el
   margen derecho de la propia barra de búsqueda (no un widget aparte). */
.suggest-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;

    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.suggest-toggle:hover,
.suggest-toggle.open {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.suggest-toggle svg {
    width: 16px;
    height: 16px;
}

/* El formulario se despliega como un popover anclado a la barra de
   búsqueda, igual que la lista de autocompletado. */
.suggest-form {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 32px);
    z-index: 1001;

    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);

    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    text-align: left;
}

.suggest-form.open {
    display: flex;
    animation: suggestFormIn 0.15s ease;
}

@keyframes suggestFormIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.suggest-intro {
    margin: 0 0 2px 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.suggest-form input,
.suggest-form textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.suggest-form input:focus,
.suggest-form textarea:focus {
    border-color: var(--border-focus);
}

.suggest-form textarea {
    min-height: 50px;
}

.suggest-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.suggest-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}

.suggest-message {
    font-size: 12px;
    color: var(--text-secondary);
    min-height: 16px;
}

.suggest-message a {
    color: var(--text-primary);
}

/* ========================================================================== 
   PANEL DE ADMINISTRACIÓN: BUZÓN DE SUGERENCIAS
   ========================================================================== */

.admin-page {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 80px 16px 40px 16px;
    display: flex;
    justify-content: center;
}

.admin-card {
    width: 100%;
    max-width: 700px;
    height: fit-content;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.admin-card h2 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.admin-filters {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-filter-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.admin-filter-btn.active {
    background: var(--text-primary);
    color: var(--bg-main);
    border-color: var(--text-primary);
}

.admin-loading {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px 0;
}

.suggestion-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-align: left;
    transition: border-color 0.15s ease;
}

.suggestion-row:last-child {
    margin-bottom: 0;
}

.suggestion-row:hover {
    border-color: var(--border-hover);
}

.suggestion-main {
    flex: 1;
    min-width: 0;
}

.suggestion-headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.suggestion-headline strong {
    font-size: 14px;
    color: var(--text-primary);
    word-break: break-word;
}

.suggestion-meta {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.suggestion-note {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

.suggestion-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;

    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-btn svg {
    width: 15px;
    height: 15px;
}

.icon-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.icon-btn-danger:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

.suggestion-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.badge-done {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

@media (max-width: 720px) {
    .admin-page {
        flex-direction: column;
        padding: 24px 16px 40px 16px;
    }
}

@media (max-width: 600px) {
    .suggestion-row {
        gap: 10px;
        padding: 10px 12px;
    }

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

@media (max-width: 480px) {
    .admin-card {
        padding: 18px;
        border-radius: 12px;
    }

    .admin-card h2 {
        font-size: 16px;
    }

    .admin-filters {
        gap: 6px;
        margin-bottom: 16px;
    }

    .admin-filter-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .suggestion-headline strong {
        font-size: 13px;
    }

    .suggestion-actions {
        gap: 4px;
    }

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

    .icon-btn svg {
        width: 13px;
        height: 13px;
    }
}


/* ==========================================================================
   ADMIN + TOPBAR
   La topbar ocupa toda la parte superior; solo la tarjeta se centra.
   ========================================================================== */

.admin-page {
    display: block;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 0 16px 40px;
}

.admin-page .site-topbar {
    margin-left: calc(-1 * 16px);
    margin-right: calc(-1 * 16px);
    width: calc(100% + 32px);
}

.admin-page .admin-card {
    margin: 40px auto 0;
}

@media (max-width: 720px) {
    .admin-page {
        padding: 0 10px 24px;
    }

    .admin-page .site-topbar {
        width: calc(100% + 20px);
        margin-left: -10px;
        margin-right: -10px;
    }

    .admin-page .admin-card {
        margin-top: 24px;
    }
}

/* ==========================================================================
   PÁGINA DE CONFIGURACIÓN DE CUENTA
   ========================================================================== */

.settings-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.settings-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 0;
    box-sizing: border-box;

    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.settings-avatar-btn:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.settings-avatar-btn svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    margin-bottom: 8px;
}

.settings-field label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-field-row {
    display: flex;
    gap: 8px;
}

.settings-field-row input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease;
    min-width: 0;
}

.settings-field-row input:focus {
    border-color: var(--border-focus);
}

.settings-field-row .btn {
    flex-shrink: 0;
}

.settings-hint {
    font-size: 12px;
    color: var(--text-secondary);
    min-height: 16px;
    margin: 4px 0 0 0;
    text-align: center;
}

.settings-field .settings-hint {
    text-align: left;
}

.settings-hint-error {
    color: #f87171;
}

.settings-hint-success {
    color: #34d399;
}