/* ==========================================================================
   NOTTO — Componentes compartidos de las páginas secundarias
   Requiere css/system.css. Se carga DESPUÉS del <style> de cada página
   para que los componentes comunes hablen con una sola voz.

   Aquí solo van piezas que se repiten en varias páginas. La maquetación
   propia de cada juego se queda donde está.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Volver
   Aparece en 18 sitios con 18 aspectos distintos. Ahora es uno.
   -------------------------------------------------------------------------- */

.back-button,
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--seam-hi);
    background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
    color: var(--ash);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: color var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease);
}

.back-button:hover,
.back-btn:hover {
    color: var(--accent-core);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 0 22px -8px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* --------------------------------------------------------------------------
   Botones
   Laca con canto encendido, en lugar de relleno plano.
   -------------------------------------------------------------------------- */

.btn,
.action-btn,
.play-button,
.start-button,
.custom-buy-btn,
.target-btn,
.create-btn,
.join-btn,
.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 12px 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
    border-radius: var(--r-md);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 24%, var(--lacquer-hi)),
            color-mix(in srgb, var(--accent) 9%, var(--lacquer)));
    color: var(--accent-core);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 20px -9px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: transform var(--t-fast) var(--ease),
        box-shadow var(--t-med) var(--ease),
        background var(--t-med) var(--ease);
}

.btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.play-button:hover:not(:disabled),
.start-button:hover:not(:disabled),
.custom-buy-btn:hover:not(:disabled),
.target-btn:hover:not(:disabled),
.create-btn:hover:not(:disabled),
.join-btn:hover:not(:disabled),
.send-btn:hover:not(:disabled) {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 34%, var(--lacquer-hi)),
            color-mix(in srgb, var(--accent) 14%, var(--lacquer)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 0 30px -6px color-mix(in srgb, var(--accent) 90%, transparent);
}

/* Los botones físicos bajan, no encogen */
.btn:active:not(:disabled),
.action-btn:active:not(:disabled),
.play-button:active:not(:disabled),
.start-button:active:not(:disabled) {
    transform: translateY(1px);
}

/* Apagado: cristal muerto */
.btn:disabled,
.action-btn:disabled,
.play-button:disabled,
.start-button:disabled,
.btn.disabled,
.play-button.disabled {
    background: var(--glass);
    border-color: var(--seam);
    color: var(--ash-dim);
    box-shadow: none;
    opacity: .8;
}

/* Variantes por significado */
.btn.danger,
.btn-danger,
.action-btn.danger,
.leave-btn,
.delete-btn,
.kick-btn {
    --accent: var(--neon-red);
    --accent-core: #FFC9CE;
}

.btn.success,
.action-btn.success,
.confirm-btn {
    --accent: var(--neon-lime);
    --accent-core: #C6FFE0;
}

.btn.secondary,
.action-btn.secondary {
    background: transparent;
    border-color: var(--seam-hi);
    color: var(--ash);
    box-shadow: none;
}

/* Fichas de apuesta rápida */
.quick-bet,
.chip {
    padding: 7px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--seam-hi);
    background: var(--glass);
    color: var(--ash);
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 700;
    transition: color var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease);
}

.quick-bet:hover,
.chip:hover {
    color: var(--accent-core);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 16px -6px color-mix(in srgb, var(--accent) 85%, transparent);
}

.quick-bet.selected,
.quick-bet.active,
.chip.selected {
    color: var(--accent-core);
    border-color: var(--accent-core);
    box-shadow: 0 0 18px -4px color-mix(in srgb, var(--accent) 90%, transparent);
}

/* Silenciar: un pulsador de panel, igual que en la cabecera del juego */
.mute-button,
.music-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--seam-hi);
    background: var(--glass);
    color: var(--ash);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

.mute-button:hover,
.music-btn:hover {
    color: var(--accent-core);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --------------------------------------------------------------------------
   Superficies
   -------------------------------------------------------------------------- */

.card,
.game-card,
.room-item,
.bet-section,
.create-form,
.music-panel,
.chat-container,
.panel {
    position: relative;
    background: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 65%);
    border: 1px solid var(--seam);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 24px 48px -30px #000;
}

.game-card:hover,
.room-item:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 26px -12px color-mix(in srgb, var(--accent) 85%, transparent),
        0 24px 48px -30px #000;
}

.game-title,
.card-title,
.result-title {
    font-family: var(--font-sign);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-core);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
}

.game-description,
.card-description {
    color: var(--ash);
    font-size: 13px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea {
    padding: 11px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--seam);
    background: #05050A;
    color: var(--chalk);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7);
    transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

input::placeholder,
textarea::placeholder {
    color: var(--ash-dim);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, .7),
        0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

select option {
    background: var(--lacquer);
    color: var(--chalk);
}

/* --------------------------------------------------------------------------
   Saldo
   Es el número que importa: siempre en el mismo instrumento.
   -------------------------------------------------------------------------- */

.balance,
.balance-display,
.money-display,
.user-balance {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--neon-gold);
    text-shadow: 0 0 12px color-mix(in srgb, var(--neon-gold) 45%, transparent);
}

/* --------------------------------------------------------------------------
   Tablas y listas
   -------------------------------------------------------------------------- */

table {
    border-collapse: collapse;
}

th {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ash-dim);
    border-bottom: 1px solid var(--seam);
}

td {
    border-bottom: 1px solid color-mix(in srgb, var(--seam) 60%, transparent);
}

/* --------------------------------------------------------------------------
   Barras de desplazamiento
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--seam-hi);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 55%, var(--seam-hi));
}