/* MUS - Estilos del juego
 * Tema tradicional "txoko + naipe": mesa de madera calida, paneles con
 * acabado litografico de naipe antiguo, tipografia serif. */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

/* Monocraft self-hosted (fonts/, OFL, github.com/IdreesInc/Monocraft).
   Pesos reales: 400/600/700 y Black para titulos — sin negrita sintetica,
   que en una fuente pixel se emborrona. */
@font-face {
    font-family: 'Monocraft';
    src: url('../fonts/Monocraft.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monocraft';
    src: url('../fonts/Monocraft-SemiBold.ttf') format('truetype');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monocraft';
    src: url('../fonts/Monocraft-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Monocraft';
    src: url('../fonts/Monocraft-Black.ttf') format('truetype');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================
 * TOKENS DEL TEMA (paleta, texturas, fuentes)
 * Cambiar el tema = cambiar estas variables.
 * --font-titulo: cuando llegue la fuente vasca self-hosted, declarar su
 * @font-face y ponerla aqui la primera.
 * ============================================ */
:root {
    /* Tipografia (pixel): Monocraft self-hosted para todo, con Pixelify
       Sans de respaldo. (Se probo Jacquard 12 "pixel medieval" para los
       titulos y era ilegible — no volver.) */
    --font-titulo: 'Monocraft', 'Pixelify Sans', 'Segoe UI', sans-serif;
    --font-ui: 'Monocraft', 'Pixelify Sans', 'Segoe UI', sans-serif;
    --font-sans: 'Monocraft', 'Pixelify Sans', 'Segoe UI', Arial, sans-serif;

    /* Madera (mesa de taberna) */
    --madera-luz: #6f4c29;
    --madera: #59391d;
    --madera-sombra: #3c2712;
    --madera-borde: #2a1a0b;

    /* Papel litografico (paneles, naipes) */
    --crema: #f0e4c8;
    --crema-sombra: #e2d1ac;
    --tinta: #3b2d1c;
    --tinta-suave: #6d5c41;

    /* Acentos */
    --carmin: #a32b28;
    --carmin-vivo: #c23a32;
    --dorado: #c9a24b;
    --dorado-claro: #e6c987;
    --verde-botella: #3f6b3a;
    --verde-claro: #86b978;
    --rojo-claro: #e08a80;

    /* Texturas procedurales (SVG): veta de madera y grano de papel */
    --tex-madera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0.35 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.45'/%3E%3C/svg%3E");
    --tex-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
}

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

html, body {
    height: 100vh;
    overflow: hidden;
}

body {
    font-family: var(--font-ui);
    background: var(--madera);
    color: #f0e8d6;
    position: relative;
}

/* Mesa de madera: veta procedural + tablones + brillo calido de lampara */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        var(--tex-madera),
        repeating-linear-gradient(90deg,
            rgba(0,0,0,0) 0px, rgba(0,0,0,0) 226px,
            rgba(20,10,4,0.35) 226px, rgba(20,10,4,0.35) 228px,
            rgba(255,220,160,0.05) 228px, rgba(255,220,160,0.05) 230px),
        radial-gradient(ellipse at 50% 38%, rgba(255,196,110,0.14) 0%, transparent 62%),
        linear-gradient(180deg, var(--madera-luz) 0%, var(--madera) 55%, var(--madera-sombra) 100%);
    background-size: 300px 300px, auto, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: 0;
}

/* Vineteado calido para profundidad */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(15,8,3,0.45) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.mus-game {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 6px 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ===== CABECERA ===== */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    background: linear-gradient(180deg, rgba(26,14,6,0.55) 0%, rgba(26,14,6,0.38) 100%);
    border-radius: 8px;
    border: 1px solid rgba(201,162,75,0.22);
    box-shadow: inset 0 1px 0 rgba(255,225,170,0.06), 0 2px 6px rgba(0,0,0,0.25);
    margin-bottom: 4px;
    flex-shrink: 0;
}

.game-title {
    font-family: var(--font-titulo);
    font-size: 20px;
    color: var(--dorado-claro);
    text-shadow: 0 0 10px rgba(201,162,75,0.3);
    margin: 0;
    letter-spacing: 2px;
}

.lance-indicator {
    font-size: 13px;
}

.lance-label {
    color: #b6a582;
}

.lance-current {
    color: var(--dorado-claro);
    font-weight: 700;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== MARCADOR ===== */
.scoreboard {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 6px 15px;
    background: linear-gradient(180deg, rgba(26,14,6,0.5) 0%, rgba(26,14,6,0.32) 100%);
    border-radius: 8px;
    border: 1px solid rgba(201,162,75,0.16);
    box-shadow: inset 0 1px 0 rgba(255,225,170,0.05);
    margin-bottom: 4px;
    flex-shrink: 0;
}

.score-team {
    text-align: center;
    min-width: 100px;
    /* Ancla para el "+N" flotante (.score-delta, position: absolute) */
    position: relative;
}

.score-team-name {
    display: block;
    font-size: 11px;
    color: #c3b28c;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.score-piedras {
    font-size: 18px;
    font-weight: 800;
}

.score-team--nosotros .score-value { color: var(--verde-claro); }
.score-team--ellos .score-value { color: var(--rojo-claro); }

.score-max {
    color: #93805e;
    font-size: 13px;
}

.score-bar {
    height: 3px;
    background: rgba(255,235,190,0.14);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.score-team--nosotros .score-bar-fill { background: linear-gradient(90deg, var(--verde-botella), var(--verde-claro)); }
.score-team--ellos .score-bar-fill { background: linear-gradient(90deg, var(--carmin), var(--rojo-claro)); }

/* ============================================
 * TAMANOS DE CARTA (sistema responsive)
 * Cada breakpoint SOLO redefine estas variables.
 * La separacion visual entre cartas es identica en todas las manos:
 * - Horizontal (jugador/pareja): gap del flexbox.
 * - Lateral (rivales, cartas rotadas 90): margen negativo calculado que
 *   compensa el hueco muerto de la rotacion (alto - ancho) y deja el gap.
 * ============================================ */
:root {
    --card-w: 92px;
    --card-gap: 10px;
    --card-side-w: 78px;
    --card-side-gap: 8px;
    /* Alto derivado del ancho con la proporcion EXACTA del sprite pixel
       (73x113): los breakpoints solo redefinen los anchos y el alto se
       recalcula solo — sin deformar el pixel art. */
    --card-h: calc(var(--card-w) * 113 / 73);
    --card-side-h: calc(var(--card-side-w) * 113 / 73);
    /* Las cartas del humano, un punto mas grandes que las del resto */
    --factor-jugador: 1.09;
}

/* Tamano extra SOLO del jugador: factor sobre las variables responsive
   (sigue escalando en todos los breakpoints). La baraja, cuando esta
   anclada a su mano (el humano es mano), crece igual para no desentonar. */
.player-area--jugador .card,
.player-area--jugador .deck-stack {
    width: calc(var(--card-w) * var(--factor-jugador));
    height: calc(var(--card-h) * var(--factor-jugador));
}

/* ===== MESA DE JUEGO ===== */
.game-table {
    flex: 1;
    display: grid;
    grid-template-areas:
        "left   top    right"
        "left   center right"
        "left   bottom right";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 2px;
    padding: 2px;
    min-height: 0;
    overflow: visible;
}

/* ===== AREAS DE JUGADORES ===== */
.player-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-height: 0;
    overflow: visible;
    position: relative;
}

.player-area--top { grid-area: top; }
.player-area--bottom { grid-area: bottom; }
.player-area--left { grid-area: left; }
.player-area--right { grid-area: right; }

/* En desktop, las areas laterales van EN FILA: la pildora de nombre/avatar
   se coloca al lado exterior de las cartas (izquierda para Rival 1, derecha
   para Rival 2), igual que jugador/pareja pero girado. Asi el eje vertical
   queda libre para las cartas y la baraja del mano, sin choques con el
   nombre. Ademas la mano se arrima al centro de la mesa. */
@media (min-width: 769px) {
    /* Gap real pildora-cartas: la carta rotada sobresale (alto-ancho)/2 de su
       caja de layout, asi que se compensa para dejar 14px VISUALES de aire */
    .player-area--left {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: calc((var(--card-side-h) - var(--card-side-w)) / 2 + 14px);
        padding-right: 22px;
    }

    .player-area--right {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
        gap: calc((var(--card-side-h) - var(--card-side-w)) / 2 + 14px);
        padding-left: 22px;
    }
}

/* Bocadillos de los rivales (todos los tamanos): se abren ARRIBA de la
   pildora con la cola hacia abajo, en vez de hacia un lado — asi nunca
   tapan las cartas ni se salen de pantalla. Anclados al lado interior:
   los de Rival 1 crecen hacia la derecha y los de Rival 2 hacia la
   izquierda, siempre hacia dentro de la mesa. */
.player-area--left .player-status,
.player-area--right .player-status {
    top: auto;
    bottom: calc(100% + 9px);
    left: 50%;
    right: auto;
    margin-left: 0;
    transform: translateX(-50%) translateY(4px) scale(0);
}

.player-area--left .player-status.speech-bubble--visible,
.player-area--right .player-status.speech-bubble--visible {
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Cola exterior (borde oscuro) apuntando hacia abajo, centrada */
.player-area--left .player-status::after,
.player-area--right .player-status::after {
    top: 100%;
    left: 50%;
    right: auto;
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #6b5433;
    border-bottom: none;
    transform: none;
}

/* Cola interior (relleno blanco), centrada */
.player-area--left .player-status::before,
.player-area--right .player-status::before {
    top: 100%;
    left: 50%;
    right: auto;
    margin-top: -1px;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #f9f0da;
    border-bottom: none;
    transform: none;
}

/* Cartas laterales giradas 90 grados */
.player-area--left .card,
.player-area--right .card {
    width: var(--card-side-w);
    height: var(--card-side-h);
    transform: rotate(90deg);
}

/* La pildora de nombre/avatar SIEMPRE por encima de las cartas: si en una
   pantalla baja la columna lateral se queda corta y las cartas desbordan
   hacia arriba, que nunca tapen el nombre */
.player-area--left .player-info,
.player-area--right .player-info {
    z-index: 6;
    background-color: rgba(30, 17, 8, 0.45);
}

/* Manos laterales apiladas */
.player-area--left .player-hand,
.player-area--right .player-hand {
    flex-direction: column;
    gap: 0;
}

/* Separacion visual = --card-side-gap (igual que jugador/pareja):
   el margen negativo absorbe el hueco muerto de la rotacion (alto - ancho) */
.player-area--left .player-hand .card,
.player-area--right .player-hand .card {
    margin-top: calc(var(--card-side-gap) - (var(--card-side-h) - var(--card-side-w)));
}

.player-area--left .player-hand .card:first-child,
.player-area--right .player-hand .card:first-child {
    margin-top: 0;
}

.player-info {
    text-align: center;
    margin: 2px 0;
    position: relative;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Pildora del turno activo: padding/borde constantes (transparentes en
       reposo) para que al activarse no haya salto de layout */
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Player avatars */
.player-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: rgba(26,14,6,0.45);
    border: 1.5px solid rgba(230,201,135,0.25);
}

.player-area--jugador .player-avatar { border-color: var(--verde-claro); }
.player-area--pareja .player-avatar { border-color: var(--verde-claro); }
.player-area--rival1 .player-avatar { border-color: var(--rojo-claro); }
.player-area--rival2 .player-avatar { border-color: var(--rojo-claro); }

.player-name {
    font-size: 12px;
    font-weight: 700;
    color: #dccca8;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.player-name--active {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

/* Speech bubble - appears to the RIGHT of name */
.player-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta);
    background: linear-gradient(180deg, #f9f0da 0%, var(--crema) 100%);
    border: 2px solid #6b5433;
    border-radius: 12px;
    padding: 3px 10px;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateY(-50%) scale(0);
    box-shadow: 1px 2px 0 rgba(0,0,0,0.2);
    text-shadow: none;
    white-space: nowrap;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

/* Visible state */
.player-status.speech-bubble--visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Speech bubble tail - points LEFT toward name */
.player-status::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 8px solid #6b5433;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.player-status::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 6px solid #f9f0da;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    z-index: 1;
}

/* Pop animation */
@keyframes bubblePop {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

.player-status.status-animate {
    animation: bubblePop 0.25s ease-out;
}

/* ===== MANOS DE CARTAS ===== */
.player-hand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--card-gap);
    min-height: 0;
    /* position: relative permite anclar la baraja (position: absolute) al lado
     * de las cartas del mano usando left/right/top/bottom con calc(100% + gap). */
    position: relative;
    overflow: visible;
}

/* (la variante .player-hand--vertical era codigo muerto y se elimino;
   las manos laterales usan .player-area--left/right) */

/* ===== ZONA CENTRAL ===== */
.table-center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    overflow: visible;
    position: relative;
}

/* Central table glow effect */
.table-center::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,75,0.08) 0%, rgba(201,162,75,0.03) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: tableGlow 4s ease-in-out infinite alternate;
}

@keyframes tableGlow {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.played-cards {
    display: none;
}

.discard-area {
    display: none;
}

.current-bet {
    background: rgba(30,17,8,0.6);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid rgba(201,162,75,0.3);
    box-shadow: inset 0 1px 0 rgba(255,235,190,0.07);
}

.bet-label {
    color: #b6a582;
}

.bet-value {
    color: var(--dorado-claro);
    font-weight: 700;
    margin-left: 5px;
}

/* ===== CARTAS ===== */
.card {
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 6px;
    border: none;
    display: inline-block;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
    flex-shrink: 0;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 6px;
    pointer-events: none;
}

.card--front:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 2px 8px 20px rgba(0,0,0,0.5), 0 12px 30px rgba(201,162,75,0.15);
}

.card--selected {
    transform: translateY(-10px) scale(1.05) !important;
    box-shadow: 0 12px 30px rgba(163,43,40,0.45), 0 0 15px rgba(163,43,40,0.25) !important;
    outline: 2px solid var(--carmin-vivo);
}

/* Deal animation handled via inline JS (cards fly from deck) */

/* ===== PANEL DE CONTROLES ===== */
.controls-panel {
    background: linear-gradient(180deg, rgba(26,14,6,0.4) 0%, rgba(26,14,6,0.55) 100%);
    border-radius: 8px;
    border: 1px solid rgba(201,162,75,0.16);
    box-shadow: inset 0 1px 0 rgba(255,225,170,0.05);
    margin-top: 4px;
    flex-shrink: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.controls-group {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.controls-group--mus {
    display: flex;
}

.controls-group--descarte {
}

.controls-group--envido-sub {
    gap: 10px;
}

.envite-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Selector de cantidad envido (+/-) */
.envido-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn--envido-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #64513a;
    color: #f6ecd2;
}

.envido-amount-display {
    font-size: 20px;
    font-weight: 800;
    color: var(--dorado-claro);
    min-width: 28px;
    text-align: center;
}

.envido-sub-actions {
    display: flex;
    gap: 6px;
}

/* ===== BOTONES (tablillas de madera pintada) ===== */
.btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-ui);
    border: 1px solid rgba(20,10,4,0.65);
    border-radius: 7px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #f6ecd2;
    background-image: var(--tex-papel);
    background-color: var(--madera-luz);
    /* Relieve de tablilla: canto inferior + bisel de luz arriba */
    box-shadow: 0 3px 0 rgba(20,10,4,0.55), 0 5px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,235,190,0.28), inset 0 -2px 3px rgba(0,0,0,0.22);
    /* Letras grabadas */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.55), 0 1px 1px rgba(255,240,200,0.12);
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(20,10,4,0.5), 0 8px 14px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,235,190,0.28), inset 0 -2px 3px rgba(0,0,0,0.22);
    filter: brightness(1.12);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(20,10,4,0.55), 0 2px 4px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(0,0,0,0.3);
    transition-duration: 0.05s;
}

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

/* Tintes por accion (madera pintada, misma tablilla) */
.btn--mus { background-color: #47663a; }
.btn--cortar { background-color: #64513a; }
.btn--envido { background-color: #9a6b23; }
.btn--ordago { background-color: var(--carmin); }
.btn--quiero { background-color: #47663a; }
.btn--no-quiero { background-color: #64513a; }
.btn--primary { background-color: #4a5c74; }

/* ===== INDICADOR DE TURNO (oculto) ===== */
.turn-indicator {
    display: none !important;
}

/* ===== MODALES ===== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    /* visibility saca el modal (y sus botones) del orden de tabulacion.
       El delay permite que la animacion de cierre termine antes de ocultar. */
    visibility: hidden;
    transition: background 0.35s ease, visibility 0s linear 0.35s;
}

.modal[aria-hidden="false"] {
    background: rgba(0,0,0,0.75);
    pointer-events: auto;
    visibility: visible;
    transition: background 0.35s ease;
}

.modal-overlay {
    position: absolute;
    inset: 0;
}

.modal-content {
    position: relative;
    background-image: var(--tex-papel), linear-gradient(180deg, #f6ecd4 0%, var(--crema) 60%, var(--crema-sombra) 100%);
    border-radius: 10px;
    border: 1px solid #9a7c46;
    padding: 25px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    color: var(--tinta);
    box-shadow: 0 14px 45px rgba(0,0,0,0.55), inset 0 0 40px rgba(160,120,60,0.12);
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* Filete interior litografico (doble linea, como el marco de un naipe) */
.modal-content::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(163,43,40,0.45);
    border-radius: 6px;
    pointer-events: none;
}

.modal[aria-hidden="false"] .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-header {
    margin-bottom: 15px;
}

.modal-title {
    font-family: var(--font-titulo);
    font-size: 22px;
    color: var(--carmin);
    margin: 0;
    letter-spacing: 1px;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color 0.2s;
    z-index: 1;
}

.modal-close:hover {
    color: var(--tinta);
}

.modal-body {
    margin-bottom: 20px;
    color: var(--tinta);
    line-height: 1.4;
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Modal de resultado */
.result-display {
    padding: 15px 0;
}

.result-winner {
    font-family: var(--font-titulo);
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.result-winner.victory { color: var(--verde-botella); text-shadow: 0 1px 0 rgba(255,250,230,0.6); }
.result-winner.defeat { color: var(--carmin); text-shadow: 0 1px 0 rgba(255,250,230,0.6); }

.result-scores {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.result-score {
    text-align: center;
}

.result-team {
    display: block;
    font-size: 11px;
    color: var(--tinta-suave);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-points {
    font-size: 30px;
    font-weight: 800;
    color: var(--tinta);
}

/* Modal de ordago */
.modal--ordago .modal-title {
    color: var(--carmin-vivo);
    font-size: 28px;
    text-shadow: 0 1px 0 rgba(255,250,230,0.6);
}

.modal-footer--ordago {
    gap: 15px;
}

/* ===== TANTOS (piedras/amarrakos near players) ===== */
.tantos-container {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 3;
}

/* Jugador (bottom): tantos a la IZQUIERDA de sus cartas */
.tantos--jugador {
    left: -46px;
    top: 50%;
    transform: translateY(-50%);
}

/* Pareja (top): tantos a la DERECHA de sus cartas */
.tantos--pareja {
    right: -46px;
    top: 50%;
    transform: translateY(-50%);
}

/* Rival1 (left): tantos DEBAJO de sus cartas */
.tantos--rival1 {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Rival2 (right): tantos DEBAJO de sus cartas */
.tantos--rival2 {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Individual stone - positioned absolutely for natural scatter */
.tanto {
    position: absolute;
    display: block;
}

.tanto--new {
    animation: tantoAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tantoAppear {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Piedra (value 1) - small round stone */
.tanto--piedra {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Amarrako (value 5) - larger rectangular token */
.tanto--amarrako {
    width: 11px;
    height: 15px;
    border-radius: 3px;
}

/* Nosotros team colors (jugador piedras, pareja amarrakos) */
.tantos--nosotros .tanto--piedra {
    background: radial-gradient(circle at 35% 35%, #a8d5a0, #2e7d32);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.35);
}

.tantos--nosotros .tanto--amarrako {
    background: linear-gradient(135deg, #81C784, #1B5E20);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.15);
}

/* Ellos team colors (rival2 piedras, rival1 amarrakos) */
.tantos--ellos .tanto--piedra {
    background: radial-gradient(circle at 35% 35%, #ef9a9a, #b71c1c);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.35);
}

.tantos--ellos .tanto--amarrako {
    background: linear-gradient(135deg, #EF5350, #8B0000);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.15);
}

/* ===== BARAJA VISIBLE (deck) ===== */
.deck-area {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* La baraja mide LO MISMO que las cartas del jugador junto al que esta
   (variables responsive). Para las manos laterales se usa el tamano lateral
   y se rota 90 igual que sus cartas (clase .deck-area--side desde JS). */
.deck-stack {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
}

.deck-area--side .deck-stack {
    width: var(--card-side-w);
    height: var(--card-side-h);
    transform: rotate(90deg);
}

/* Pila desordenada de reversos: la ligera rotacion de cada carta hace que
   se lea como "mazo" y no como una quinta carta de la mano */
.deck-card {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.35);
}

.deck-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.deck-card:nth-child(1) { transform: translate(-3px, 3px) rotate(-5deg); }
.deck-card:nth-child(2) { transform: translate(2px, 0) rotate(3deg); }
.deck-card:nth-child(3) { transform: translate(0, -2px) rotate(-1deg); }

/* Old piedras-visual in scoreboard - hide, replaced by tapete tantos */
.piedras-visual {
    display: none;
}

/* ===== PARTICULAS ===== */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.particle {
    position: absolute;
    pointer-events: none;
    animation: particleFall linear forwards;
}

@keyframes particleFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ===== ANIMACIONES ===== */

/* Controls group slide-in */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.controls-group[style*="display: flex"],
.controls-group--mus {
    animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Score bar pulse on update */
@keyframes scorePulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

.score-bar-fill.score-updated {
    animation: scorePulse 0.6s ease;
}

/* "+N" flotante al cobrar piedras (dejes en el acto, cobros de ronda) */
@keyframes scoreDeltaFloat {
    0%   { opacity: 0; transform: translateY(6px) scale(0.7); }
    20%  { opacity: 1; transform: translateY(0) scale(1.15); }
    45%  { transform: translateY(-4px) scale(1); }
    100% { opacity: 0; transform: translateY(-16px) scale(0.9); }
}

.score-delta {
    position: absolute;
    top: 2px;
    right: -4px;
    font-family: var(--font-titulo);
    font-size: 15px;
    color: var(--dorado-claro);
    text-shadow: 0 0 8px rgba(201, 162, 75, 0.6), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    animation: scoreDeltaFloat 1.6s ease-out forwards;
    z-index: 10;
}

/* Resumen table rows */
.resumen-table tbody tr {
    transition: background 0.2s;
}

.resumen-table tbody tr:hover {
    background: rgba(120,80,30,0.08);
}

.resumen-nosotros { color: var(--verde-botella); font-weight: bold; }
.resumen-ellos { color: var(--carmin); font-weight: bold; }
.resumen-totals { border-top: 1px solid #b39a68; font-weight: bold; }

/* ===== MOBILE: keep table layout, scale down ===== */
@media (max-width: 768px) {
    html, body {
        height: 100dvh;
    }

    .mus-game {
        padding: 4px;
        height: 100dvh;
    }

    /* Compact header: inline */
    .game-header {
        padding: 4px 10px;
        margin-bottom: 2px;
    }

    .game-title {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .lance-indicator {
        font-size: 11px;
    }

    /* Compact scoreboard */
    .scoreboard {
        padding: 4px 10px;
        gap: 20px;
        margin-bottom: 2px;
    }

    .score-team {
        min-width: 70px;
    }

    .score-team-name {
        font-size: 9px;
    }

    .score-piedras {
        font-size: 15px;
    }

    .score-bar {
        height: 2px;
        margin-top: 2px;
    }

    /* Table grid: keep 3 columns but tighter */
    .game-table {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 1px;
        padding: 1px;
    }

    /* Cartas mas grandes en movil (separacion lateral se autocalcula) */
    :root {
        --card-w: 66px;
        --card-gap: 6px;
        --card-side-w: 50px;
        --card-side-gap: 6px;
    }

    .card {
        border-radius: 4px;
    }

    /* Player info compact */
    .player-name {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .player-status {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 10px;
        margin-left: 5px;
    }

    /* Center area */
    .current-bet {
        padding: 4px 12px;
        font-size: 12px;
    }

    /* Controls panel: taller for touch */
    .controls-panel {
        height: 58px;
        padding: 0 8px;
        margin-top: 2px;
    }

    /* Buttons: touch-friendly min size (44px = recomendacion tactil) */
    .btn {
        padding: 10px 16px;
        font-size: 12px;
        letter-spacing: 0.5px;
        min-height: 44px;
        touch-action: manipulation;
    }

    .controls-group {
        gap: 6px;
    }

    .envite-row {
        gap: 6px;
    }

    /* Envido selector: flechas grandes para el pulgar */
    .btn--envido-arrow {
        width: 40px;
        height: 40px;
        min-height: 40px;
        font-size: 18px;
    }

    .envido-amount-display {
        font-size: 18px;
        min-width: 24px;
    }

    .envido-sub-actions {
        gap: 4px;
    }

    /* Modals */
    .modal-content {
        padding: 18px;
        max-width: 320px;
    }

    .modal-title {
        font-size: 18px;
    }

    .result-winner {
        font-size: 22px;
    }

    .result-points {
        font-size: 24px;
    }

    /* Avatars smaller on mobile */
    .player-avatar {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    /* Tantos smaller on mobile */
    .tantos-container { width: 30px; height: 30px; }
    .tanto--piedra { width: 7px; height: 7px; }
    .tanto--amarrako { width: 9px; height: 12px; }

    /* Central glow smaller */
    .table-center::before {
        width: 100px;
        height: 100px;
    }

    /* Disable hover effects on touch */
    .card--front:hover {
        transform: none;
        box-shadow: 1px 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
    }

    .btn:hover:not(:disabled) {
        transform: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
        filter: none;
    }
}

/* ===== SMALL PHONES (< 400px) ===== */
@media (max-width: 400px) {
    .game-header {
        padding: 3px 8px;
    }

    .game-title {
        font-size: 14px;
    }

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

    .scoreboard {
        padding: 3px 8px;
        gap: 12px;
    }

    .score-team-name { font-size: 8px; }
    .score-piedras { font-size: 13px; }
    .score-max { font-size: 11px; }

    :root {
        --card-w: 57px;
        --card-gap: 5px;
        --card-side-w: 43px;
        --card-side-gap: 5px;
    }

    .player-name {
        font-size: 10px;
    }

    .player-status {
        font-size: 10px;
        padding: 2px 7px;
    }

    .btn {
        padding: 9px 12px;
        font-size: 11px;
        min-height: 42px;
    }

    .controls-panel {
        height: 54px;
    }

    .current-bet {
        font-size: 10px;
        padding: 2px 8px;
    }

    .tantos-container { width: 25px; height: 25px; }
    .tanto--piedra { width: 6px; height: 6px; }
    .tanto--amarrako { width: 7px; height: 10px; }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .game-header {
        padding: 2px 10px;
        margin-bottom: 1px;
    }

    .game-title { font-size: 14px; }

    .scoreboard {
        padding: 2px 10px;
        margin-bottom: 1px;
    }

    .score-team-name { font-size: 8px; margin-bottom: 0; }
    .score-piedras { font-size: 13px; }
    .score-bar { display: none; }

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

    :root {
        --card-w: 54px;
        --card-gap: 5px;
        --card-side-w: 40px;
        --card-side-gap: 4px;
    }

    .player-area {
        padding: 2px;
    }

    .player-name { font-size: 9px; }
    .player-info { min-height: 16px; margin: 1px 0; }

    .controls-panel {
        height: 40px;
        margin-top: 1px;
    }

    .btn {
        padding: 5px 10px;
        font-size: 10px;
        min-height: 30px;
    }

}

/* ===== SHORT DESKTOP ===== */
@media (min-width: 769px) and (max-height: 600px) {
    .game-header {
        padding: 3px 10px;
    }

    .game-title { font-size: 16px; }

    .scoreboard {
        padding: 4px 10px;
    }

    .score-piedras { font-size: 16px; }

    :root {
        --card-w: 72px;
        --card-gap: 7px;
        --card-side-w: 62px;
        --card-side-gap: 6px;
    }

    .controls-panel {
        height: 48px;
    }

    .btn {
        padding: 6px 14px;
        font-size: 11px;
    }
}

/* ===== TOUCH DEVICE OVERRIDES ===== */
@media (hover: none) and (pointer: coarse) {
    .card--front:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }

    .btn:hover:not(:disabled) {
        transform: none;
        filter: none;
    }

    /* Larger tap targets */
    .btn {
        min-height: 36px;
        touch-action: manipulation;
    }

    .card {
        touch-action: manipulation;
    }

    /* Tap highlight */
    .card--front:active {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(201,162,75,0.3);
    }

    .btn:active:not(:disabled) {
        filter: brightness(0.9);
    }
}

/* ============================================
 * ESTILOS MOVIDOS DESDE injectStyles() en main.js
 * ============================================ */

/* NOTA: el antiguo bloque `#mano-* .card` con tamanos fijos se elimino:
   su especificidad de ID machacaba los tamanos responsive de las media
   queries. El tamano de carta vive SOLO en las variables --card-*. */

/* Nombre del jugador que esta hablando */
.player-name--speaking {
    color: var(--dorado-claro) !important;
    text-shadow: 0 0 8px rgba(201, 162, 75, 0.6) !important;
}

/* Indicador de MANO */
.mano-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--dorado-claro), var(--dorado));
    color: #3b2d1c;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    text-shadow: none;
    animation: manoBadgePulse 2s ease-in-out infinite;
}

@keyframes manoBadgePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(201, 162, 75, 0.5); }
    50% { box-shadow: 0 0 15px rgba(201, 162, 75, 0.8); }
}

.player-name--mano {
    color: var(--dorado-claro);
}

/* En los rivales laterales el badge MANO no cabe DENTRO de la pildora (la
   ensancharia hasta chocar con las cartas): flota centrado bajo la pildora
   (encima en movil, donde debajo estan sus cartas). */
.player-area--left .mano-badge,
.player-area--right .mano-badge {
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    margin-left: 0;
}

@media (max-width: 768px) {
    .player-area--left .mano-badge,
    .player-area--right .mano-badge {
        top: auto;
        bottom: calc(100% + 4px);
    }

    /* El bocadillo sube por encima del badge MANO flotante para no taparlo */
    .player-area--left .player-status,
    .player-area--right .player-status {
        bottom: calc(100% + 24px);
    }

    /* La pildora de los rivales, mas levantada: aire extra garantizado entre
       ella y sus cartas */
    .player-area--left .player-info,
    .player-area--right .player-info {
        margin-bottom: 14px;
    }
}

/* Indicador flotante de turno (legacy, oculto siempre) */
#indicador-turno {
    display: none !important;
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(76, 175, 80, 0.95);
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 16px;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Mensaje informativo grande y visible */
.info-message {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(30, 17, 8, 0.93);
    color: var(--dorado-claro);
    font-family: var(--font-ui);
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s;
    pointer-events: none;
    text-align: center;
    max-width: 90%;
    border: 1px solid rgba(201, 162, 75, 0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,235,190,0.08);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.info-message--visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Modales con pointer-events para transiciones suaves */
.modal[aria-hidden="true"] { pointer-events: none; }
.modal[aria-hidden="false"] { pointer-events: auto; }

/* Responsive de banners (los tamanos de carta viven en las variables --card-*) */
@media (max-width: 768px) {
    .mano-badge { font-size: 8px; padding: 1px 4px; }
    .info-message {
        font-size: 16px;
        padding: 12px 24px;
    }
}

@media (max-width: 400px) {
    .info-message {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* ============================================
 * RESUMEN DE RONDA integrado en la mesa:
 * sin overlay oscuro, panel compacto en el centro — las cartas reveladas
 * de rivales y pareja siguen visibles durante el recuento.
 * ============================================ */
.modal--resumen[aria-hidden="false"] {
    background: transparent;
    pointer-events: none;
}

.modal--resumen .modal-overlay {
    display: none;
}

.modal--resumen .modal-content {
    pointer-events: auto;
    max-width: 320px;
    padding: 14px 20px 16px;
    border: 1px solid #9a7c46;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(160,120,60,0.12);
}

.modal--resumen .modal-header {
    margin-bottom: 8px;
}

.modal--resumen .resumen-table th,
.modal--resumen .resumen-table td {
    padding: 5px 10px;
}

/* En movil el recuento se compacta: asi cabe en el hueco central de la mesa
   sin tapar las cartas reveladas de nadie */
@media (max-width: 768px) {
    .modal--resumen .modal-content {
        max-width: 250px;
        padding: 8px 12px 10px;
    }

    .modal--resumen .modal-title {
        font-size: 15px;
    }

    .modal--resumen .resumen-table th,
    .modal--resumen .resumen-table td {
        padding: 3px 8px;
        font-size: 12px;
    }

    .modal--resumen .resumen-totals td {
        font-size: 13px;
    }
}

/* Tabla resumen de ronda - extra al final para no romper la cascada */
.resumen-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.resumen-table th,
.resumen-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(120,90,45,0.25);
}

.resumen-table th {
    color: var(--carmin);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.resumen-table td {
    color: var(--tinta);
    font-size: 14px;
}

.resumen-totals td {
    border-top: 2px solid rgba(163, 43, 40, 0.35);
    font-weight: bold;
    color: var(--tinta);
    font-size: 15px;
}

/* ============================================
 * GLOW DEL TURNO ACTUAL alrededor del area completa del jugador
 * ============================================ */

.player-area {
    border-radius: 12px;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative;
}

/* Indicador de turno: pildora redondeada resaltando avatar + nombre, con
   anillo dorado pulsante en el avatar. (El antiguo glow alrededor del area
   completa era invasivo y se veia mal en movil; este es localizado y
   funciona igual en todos los tamanos.) */
.player-area--active .player-info {
    background-color: rgba(201, 162, 75, 0.10);
    border-color: rgba(201, 162, 75, 0.45);
    animation: pillTurnPulse 1.5s ease-in-out infinite;
}

.player-area--active .player-avatar {
    border-color: var(--dorado-claro);
}

/* Badge "x3" junto al nombre durante la fase de descarte, indica cuantas
 * cartas pidio cada jugador. Se mantiene visible hasta que empieza el envite. */
.discard-badge {
    display: inline-block;
    background: linear-gradient(135deg, #5b8a4d, var(--verde-botella));
    color: #f3ecd8;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    animation: discardBadgePop 0.4s ease-out;
}

@keyframes discardBadgePop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pillTurnPulse {
    0%, 100% {
        box-shadow: 0 0 8px 1px rgba(201, 162, 75, 0.18),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    50% {
        box-shadow: 0 0 16px 3px rgba(201, 162, 75, 0.42),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* ===== MENU PRINCIPAL ===== */
.menu-screen {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255,196,110,0.16) 0%, transparent 60%),
        linear-gradient(180deg, var(--madera-luz) 0%, var(--madera) 52%, var(--madera-sombra) 100%);
    transition: opacity 0.35s ease, visibility 0.35s;
}

/* Misma veta de madera y tablones que la mesa */
.menu-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        var(--tex-madera),
        repeating-linear-gradient(90deg,
            rgba(0,0,0,0) 0px, rgba(0,0,0,0) 226px,
            rgba(20,10,4,0.35) 226px, rgba(20,10,4,0.35) 228px,
            rgba(255,220,160,0.05) 228px, rgba(255,220,160,0.05) 230px);
    background-size: 300px 300px, auto;
    pointer-events: none;
}

/* Vineteado del menu */
.menu-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(15,8,3,0.5) 100%);
    pointer-events: none;
}

.menu-screen--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.menu-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-height: 100vh;
    padding: 24px 16px;
    overflow-y: auto;
}

/* ----- Logo ----- */
.menu-logo {
    text-align: center;
    user-select: none;
}

.menu-logo-cards {
    position: relative;
    width: 230px;
    height: 112px;
    margin: 0 auto -30px;
}

.menu-logo-cards img {
    --angle: 0deg;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 76px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 8, 3, 0.55);
    transform-origin: 50% 120%;
    transform: translateX(-50%) rotate(var(--angle));
    animation: menuFan 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.menu-logo-cards img:nth-child(1) { --angle: -27deg; animation-delay: 0.05s; }
.menu-logo-cards img:nth-child(2) { --angle: -9deg;  animation-delay: 0.15s; }
.menu-logo-cards img:nth-child(3) { --angle: 9deg;   animation-delay: 0.25s; }
.menu-logo-cards img:nth-child(4) { --angle: 27deg;  animation-delay: 0.35s; }

@keyframes menuFan {
    from {
        transform: translateX(-50%) rotate(0deg) translateY(36px);
        opacity: 0;
    }
}

/* Titulo tallado en la madera y pintado en dorado viejo */
.menu-logo-title {
    position: relative;
    font-family: var(--font-titulo);
    font-size: 84px;
    line-height: 1;
    font-weight: 400;
    color: var(--dorado-claro);
    letter-spacing: 10px;
    margin-left: 10px; /* compensa el letter-spacing final para centrar */
    text-shadow:
        0 1px 0 #8a6d35,
        0 2px 0 #6d5527,
        0 3px 0 #55411d,
        0 4px 0 #3d2e13,
        0 6px 4px rgba(10, 5, 2, 0.55),
        0 12px 26px rgba(10, 5, 2, 0.5);
}

/* Filete litografico bajo el titulo: linea - rombo - linea */
.menu-logo-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #d9c491;
    text-shadow: 0 1px 2px rgba(10,5,2,0.6);
}

.menu-logo-subtitle::before,
.menu-logo-subtitle::after {
    content: '';
    width: 58px;
    height: 5px;
    background:
        linear-gradient(0deg, transparent 0, transparent 2px, rgba(201,162,75,0.75) 2px, rgba(201,162,75,0.75) 3px, transparent 3px),
        radial-gradient(circle at 50% 50%, rgba(201,162,75,0.9) 0 1.5px, transparent 2px);
    background-size: 100% 100%, 9px 5px;
    background-position: 0 0, 4px 0;
}

/* Con un panel abierto, el logo se oculta para dejar sitio */
.menu-screen--panel .menu-logo {
    display: none;
}

/* ----- Botones del menu (tablillas grandes) ----- */
.menu-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.menu-buttons[hidden] {
    display: none;
}

.menu-btn {
    width: 280px;
    padding: 13px 20px;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f2e5c4;
    background-image: var(--tex-madera);
    background-color: #55381c;
    background-size: 300px 300px;
    border: 1px solid rgba(20,10,4,0.7);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s;
    box-shadow: 0 4px 0 rgba(20,10,4,0.6), 0 8px 14px rgba(10,5,2,0.4),
        inset 0 1px 0 rgba(255,235,190,0.22), inset 0 0 0 2px rgba(201,162,75,0.18), inset 0 -3px 4px rgba(0,0,0,0.28);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 1px rgba(255,240,200,0.12);
}

.menu-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 6px 0 rgba(20,10,4,0.55), 0 11px 20px rgba(10,5,2,0.45),
        inset 0 1px 0 rgba(255,235,190,0.22), inset 0 0 0 2px rgba(201,162,75,0.3), inset 0 -3px 4px rgba(0,0,0,0.28);
}

.menu-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(20,10,4,0.6), 0 3px 6px rgba(10,5,2,0.4),
        inset 0 2px 5px rgba(0,0,0,0.35);
    transition-duration: 0.05s;
}

.menu-btn--jugar {
    font-size: 23px;
    padding: 16px 20px;
    color: #f7ead0;
    background-color: var(--carmin);
    box-shadow: 0 4px 0 rgba(20,10,4,0.6), 0 8px 14px rgba(10,5,2,0.4),
        inset 0 1px 0 rgba(255,235,190,0.3), inset 0 0 0 2px rgba(230,201,135,0.4), inset 0 -3px 4px rgba(0,0,0,0.28);
}

.menu-btn--volver {
    width: auto;
    min-width: 170px;
    font-size: 14px;
    padding: 10px 26px;
}

/* ----- Paneles (reglas / ajustes): naipe litografico ----- */
.menu-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(680px, 94vw);
    max-height: min(80vh, 660px);
    background-image: var(--tex-papel), linear-gradient(180deg, #f6ecd4 0%, var(--crema) 60%, var(--crema-sombra) 100%);
    color: var(--tinta);
    border: 1px solid #9a7c46;
    border-radius: 10px;
    box-shadow: 0 22px 55px rgba(10, 5, 2, 0.55), inset 0 0 45px rgba(160,120,60,0.12);
    overflow: hidden;
    animation: menuPanelPop 0.25s ease-out;
}

/* Filete interior doble, como el marco de un naipe */
.menu-panel::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(163,43,40,0.4);
    border-radius: 5px;
    pointer-events: none;
    z-index: 2;
}

.menu-panel[hidden] {
    display: none;
}

@keyframes menuPanelPop {
    from {
        transform: translateY(14px) scale(0.97);
        opacity: 0;
    }
}

.menu-panel-header {
    padding: 16px 26px 12px;
    border-bottom: 1px solid rgba(163,43,40,0.3);
    flex-shrink: 0;
}

.menu-panel-header h2 {
    font-family: var(--font-titulo);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--carmin);
}

.menu-panel-body {
    padding: 16px 26px;
    overflow-y: auto;
}

.menu-panel-footer {
    display: flex;
    justify-content: center;
    padding: 13px;
    border-top: 1px solid rgba(163,43,40,0.3);
    flex-shrink: 0;
}

/* ----- Contenido de reglas ----- */
.reglas-body h3 {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--carmin);
    margin: 18px 0 8px;
}

.reglas-body h3:first-child {
    margin-top: 0;
}

.reglas-body p,
.reglas-body li {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--tinta);
}

.reglas-body p {
    margin-bottom: 8px;
}

.reglas-body ul {
    padding-left: 18px;
    margin-bottom: 8px;
}

.reglas-body li {
    margin: 4px 0;
}

.reglas-body strong {
    color: var(--carmin);
}

.reglas-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 12px;
    font-size: 13px;
}

.reglas-body th,
.reglas-body td {
    padding: 5px 8px;
    text-align: center;
    border: 1px solid rgba(120,90,45,0.35);
    color: var(--tinta);
}

.reglas-body th {
    color: var(--carmin);
    background: rgba(163,43,40,0.06);
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

/* ----- Ajustes ----- */
.ajuste {
    margin-bottom: 22px;
}

.ajuste:last-child {
    margin-bottom: 6px;
}

.ajuste-label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tinta);
    margin-bottom: 8px;
}

.ajuste-valor {
    color: var(--carmin);
    margin-left: 6px;
}

.ajuste-nota {
    margin-top: 6px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--tinta-suave);
}

.segmented {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.segmented button {
    flex: 1;
    min-width: 90px;
    padding: 9px 12px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tinta-suave);
    background: rgba(255,250,235,0.5);
    border: 1px solid rgba(120,90,45,0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.segmented button:hover {
    border-color: var(--carmin);
    color: var(--tinta);
}

.segmented button.segmented--active {
    color: #f7ead0;
    background: linear-gradient(180deg, var(--carmin-vivo), var(--carmin));
    border-color: #7e211f;
    box-shadow: inset 0 1px 0 rgba(255,235,190,0.25), 0 2px 5px rgba(120,30,25,0.3);
}

#ajuste-volumen {
    width: 100%;
    accent-color: var(--carmin);
}

/* ----- Boton de menu en la cabecera ----- */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-menu-btn {
    padding: 4px 10px;
    font-size: 16px;
    line-height: 1;
    color: var(--dorado-claro);
    background: rgba(30,17,8,0.5);
    border: 1px solid rgba(201,162,75,0.35);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.header-menu-btn:hover {
    background: rgba(201,162,75,0.2);
    border-color: rgba(201,162,75,0.6);
}

/* ----- Responsive del menu ----- */
@media (max-width: 768px) {
    .menu-logo-title {
        font-size: 58px;
        letter-spacing: 7px;
        margin-left: 7px;
    }

    .menu-logo-cards {
        width: 190px;
        height: 94px;
        margin-bottom: -24px;
    }

    .menu-logo-cards img {
        width: 62px;
    }

    .menu-btn {
        width: min(280px, 86vw);
    }

    .menu-panel {
        max-height: 84vh;
    }
}

/* Pantallas bajas (movil apaisado): sin abanico y todo mas compacto */
@media (max-height: 540px) {
    .menu-inner {
        gap: 14px;
    }

    .menu-logo-cards {
        display: none;
    }

    .menu-logo-title {
        font-size: 42px;
    }

    .menu-logo-subtitle {
        display: none;
    }

    .menu-buttons {
        gap: 8px;
    }

    .menu-btn {
        padding: 9px 20px;
        font-size: 15px;
    }

    .menu-btn--jugar {
        font-size: 17px;
        padding: 11px 20px;
    }

    .menu-panel {
        max-height: 92vh;
    }
}

/* ============================================
 * AJUSTES DE MOVIL (2026-08-04)
 * ============================================ */
@media (max-width: 768px) {
    /* Baraja visible DESACTIVADA en movil: no hay sitio razonable junto a
       las manos laterales. visibility (y no display:none) porque el reparto
       anima las cartas DESDE su posicion (getBoundingClientRect) y el badge
       MANO de la pildora sigue indicando quien es mano. */
    .deck-area {
        visibility: hidden;
    }

    /* Recuento de ronda: centrado como siempre pero con el panel TRASLUCIDO
       (fondo rgba en vez de opacity: el texto queda nitido y las cartas
       reveladas se ven a traves) */
    .modal--resumen .modal-content {
        background: rgba(240, 228, 200, 0.84);
    }

    /* Submenu de envido en UNA fila que quepa en el panel de 58px (con wrap,
       el contador saltaba arriba y los botones se salian de la pantalla) */
    .controls-group--envido-sub {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .controls-group--envido-sub .btn {
        min-height: 38px;
        padding: 8px 9px;
        font-size: 11px;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .controls-group--envido-sub .btn--envido-arrow {
        width: 34px;
        height: 34px;
        min-height: 34px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .controls-group--envido-sub .envido-selector {
        gap: 4px;
        flex-shrink: 0;
    }

    .controls-group--envido-sub .envido-amount-display {
        font-size: 16px;
        min-width: 20px;
    }

    /* Fin de partida: centrado y TRASLUCIDO como el recuento (overlay suave
       + panel rgba) para ver con que cartas te han ganado */
    .modal--result[aria-hidden="false"] {
        background: rgba(0, 0, 0, 0.25);
    }

    .modal--result .modal-content {
        background: rgba(240, 228, 200, 0.86);
        max-width: 330px;
        padding: 12px 18px 14px;
    }

    .modal--result .result-display {
        padding: 6px 0;
    }

    /* Temporizador de turno: en movil pasa a barrita HORIZONTAL pegada al
       borde superior del panel de controles (la vertical de la derecha
       quedaba tapada por el submenu de envido). Sin reloj: no hay sitio. */
    .turno-timer {
        left: 0;
        right: 0;
        top: -2px;
        bottom: auto;
        height: 6px;
        gap: 0;
    }

    .turno-timer-reloj {
        display: none;
    }

    .turno-timer-barra {
        width: 100%;
        height: 100%;
        border-width: 1px;
        align-items: stretch;
    }

    .turno-timer .turno-timer-fill {
        width: calc(var(--frac, 1) * 100%);
        height: 100%;
        transition: width 0.1s linear;
    }
}

/* ============================================
 * PAUSA Y TEMPORIZADOR DE TURNO
 * ============================================ */

/* Boton rojo de cancelar en los modales de confirmacion */
.btn--cancelar {
    background-color: var(--carmin);
}

/* Overlay de pausa: cubre y bloquea toda la mesa */
.pausa-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(15, 8, 3, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.pausa-overlay[hidden] {
    display: none;
}

.pausa-titulo {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-indent: 0.3em; /* compensa el letter-spacing del ultimo caracter */
    color: var(--dorado);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

.btn--reanudar {
    padding: 14px 28px;
    font-size: 1.05rem;
}

/* Temporizador de turno: barrita vertical pegada al lado derecho del panel
   de controles. Verde → ambar (mitad) → rojo parpadeante (ultimo cuarto). */
.controls-panel {
    position: relative;
}

.turno-timer {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.turno-timer[hidden] {
    display: none;
}

.turno-timer-reloj {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.turno-timer-barra {
    width: 14px;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(59, 45, 28, 0.9);
    display: flex;
    align-items: flex-end;
}

.turno-timer-fill {
    width: 100%;
    height: calc(var(--frac, 1) * 100%);
    background: var(--verde-claro);
    transition: height 0.1s linear;
}

.turno-timer--ambar .turno-timer-fill {
    background: var(--dorado);
}

.turno-timer--rojo .turno-timer-fill {
    background: var(--carmin);
    animation: timerParpadeo 0.5s steps(2) infinite;
}

@keyframes timerParpadeo {
    50% { opacity: 0.45; }
}

/* ============================================
 * MODO PIXEL ART (capa sobre el tema tradicional)
 * Bordes duros, sombras sin difuminar, biseles de pixel y sprites nitidos.
 * Para volver al tema "suave": borrar esta seccion y restaurar las fuentes
 * serif en los tokens (git: commit 19adbec).
 * ============================================ */

/* --- Sprites nitidos --- */
.card-img,
.deck-card img,
.menu-logo-cards img {
    image-rendering: pixelated;
}

.card,
.card-img,
.deck-card {
    border-radius: 0;
}

.card {
    box-shadow: 3px 3px 0 rgba(15, 8, 3, 0.4);
}

/* Hover y seleccion SIN scale: escalar un sprite pixel lo emborrona.
   La carta seleccionada sube franca, con marco carmin separado del borde
   blanco del naipe (outline-offset) y su sombra dura en el sitio.
   (Solo con raton: en tactil los hovers se quedan "pegados" tras el tap.) */
@media (hover: hover) and (pointer: fine) {
    .card--front:hover {
        transform: translateY(-6px);
        box-shadow: 4px 8px 0 rgba(15, 8, 3, 0.4);
    }
}

.card--selected {
    transform: translateY(-14px) !important;
    filter: brightness(1.07);
    box-shadow: 4px 7px 0 rgba(15, 8, 3, 0.35) !important;
    outline: 3px solid var(--carmin-vivo);
    outline-offset: 2px;
}

.deck-card {
    box-shadow: 2px 2px 0 rgba(15, 8, 3, 0.4);
}

.menu-logo-cards img {
    border-radius: 0;
    box-shadow: 4px 5px 0 rgba(15, 8, 3, 0.45);
    width: 73px; /* escala 1:1 del sprite */
}

/* --- Chrome cuadrado (cabecera, marcador, controles) --- */
.game-header,
.scoreboard,
.controls-panel {
    border-radius: 0;
    border-width: 2px;
    box-shadow: 0 3px 0 rgba(15, 8, 3, 0.35);
}

.current-bet {
    border-radius: 4px;
    border-width: 2px;
}

.player-info {
    border-radius: 6px;
}

/* --- Botones: bisel de pixel --- */
.btn,
.menu-btn {
    border-radius: 0;
    border: 2px solid rgba(20, 10, 4, 0.9);
    box-shadow: inset 0 2px 0 rgba(255, 235, 190, 0.28), inset 2px 0 0 rgba(255, 235, 190, 0.12),
        inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 4px 0 rgba(20, 10, 4, 0.65);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled),
    .menu-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.12);
        box-shadow: inset 0 2px 0 rgba(255, 235, 190, 0.28), inset 2px 0 0 rgba(255, 235, 190, 0.12),
            inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 6px 0 rgba(20, 10, 4, 0.6);
    }
}

.btn:active:not(:disabled),
.menu-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(20, 10, 4, 0.65);
}

.btn--envido-arrow {
    border-radius: 0;
}

.header-menu-btn {
    border-radius: 0;
    border-width: 2px;
}

/* --- Paneles y modales: naipe de borde duro --- */
.modal-content,
.menu-panel {
    border-radius: 0;
    border-width: 2px;
    box-shadow: 6px 7px 0 rgba(15, 8, 3, 0.45);
}

.modal-content::before,
.menu-panel::before {
    border-radius: 0;
}

.modal--resumen .modal-content {
    box-shadow: 5px 6px 0 rgba(15, 8, 3, 0.4);
}

.segmented button {
    border-radius: 0;
    border-width: 2px;
}

.segmented button.segmented--active {
    box-shadow: inset 0 2px 0 rgba(255, 235, 190, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

/* --- Bocadillos: papelito cuadrado --- */
.player-status {
    border-radius: 4px;
    box-shadow: 2px 2px 0 rgba(15, 8, 3, 0.35);
}

/* --- Badges cuadrados --- */
.mano-badge,
.discard-badge {
    border-radius: 3px;
}

/* --- Banner de lances/avisos: cuadrado + rombos ornamentales --- */
.info-message {
    border-radius: 0;
    border-width: 2px;
    box-shadow: 5px 6px 0 rgba(15, 8, 3, 0.45);
    font-family: var(--font-ui);
    letter-spacing: 2px;
}

.info-message::before,
.info-message::after {
    content: '◆';
    font-size: 0.55em;
    color: var(--dorado);
    vertical-align: middle;
}

.info-message::before { margin-right: 14px; }
.info-message::after { margin-left: 14px; }

/* --- Titulos en Pixelify Sans negrita, con sombra escalonada de pixel --- */
.menu-logo-title {
    font-size: 88px;
    font-weight: 700;
    letter-spacing: 8px;
    margin-left: 8px;
    text-shadow:
        0 4px 0 #55411d,
        0 7px 0 rgba(10, 5, 2, 0.55),
        7px 9px 0 rgba(10, 5, 2, 0.4);
}

.game-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
}

.modal--ordago .modal-title {
    font-size: 30px;
}

.menu-panel-header h2 {
    font-size: 21px;
    font-weight: 700;
}

.result-winner {
    font-size: 32px;
}

@media (max-width: 768px) {
    .menu-logo-title {
        font-size: 60px;
        letter-spacing: 5px;
        margin-left: 5px;
    }

    .game-title {
        font-size: 18px;
    }

    .menu-logo-cards img {
        width: 62px;
    }
}

@media (max-height: 540px) {
    .menu-logo-title {
        font-size: 44px;
    }
}

/* --- Monocraft: nada de estilos sinteticos (negrita/cursiva falsas
       emborronan una fuente pixel) --- */
body {
    font-synthesis: none;
}

.ajuste-nota {
    font-style: normal;
}

/* --- Legibilidad del texto corrido: todo en Monocraft (decision del
       usuario: probamos Pixelify Sans y no le gusto). Se compensa con
       cuerpo mas grande, mas interlineado y tinta mas oscura (contraste
       sobre el papel crema). --- */
.reglas-body p,
.reglas-body li {
    font-size: 15px;
    line-height: 1.7;
    color: #2a1f12;
}

.reglas-body th,
.reglas-body td {
    color: #2a1f12;
}

.modal-body {
    color: #2a1f12;
}

.reglas-body table {
    font-size: 13px;
}

.ajuste-nota {
    font-size: 13px;
    color: #5d4d35;
}

/* --- Identidad de jugadores: sin avatares emoji (los .player-avatar
       de CSS se conservan para futuros retratos sprite). Pareja en verde,
       rivales en carmin claro — se lee el equipo de un vistazo. --- */
.player-area--pareja .player-name {
    color: var(--verde-claro);
}

.player-area--rival1 .player-name,
.player-area--rival2 .player-name {
    color: var(--rojo-claro);
}

/* --- Monedita pixel junto al "+N" al cobrar piedras. Con la moneda el
       delta es mas ancho: sale desde abajo del bloque del equipo (no desde
       la esquina superior, donde pisaba la etiqueta del nombre). --- */
.score-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    top: auto;
    bottom: -4px;
    right: -12px;
}

.score-delta::before {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%236b4a12' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v4h-1zM7 2h1v4h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23e2b23c' d='M2 1h4v1h-4zM1 2h1v1h-1zM4 2h3v1h-3zM1 3h1v1h-1zM3 3h4v1h-4zM1 4h6v1h-6zM1 5h4v1h-4zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1z'/%3E%3Cpath fill='%23f7e08d' d='M2 2h2v1h-2zM2 3h1v1h-1z'/%3E%3Cpath fill='%23b07d1e' d='M5 5h1v1h-1zM3 6h2v1h-2z'/%3E%3C/svg%3E") no-repeat center / contain;
    image-rendering: pixelated;
    animation: coinFlip 0.55s ease-in-out;
}

@keyframes coinFlip {
    0% { transform: scaleX(1); }
    35% { transform: scaleX(0.15); }
    70% { transform: scaleX(1); }
}

/* --- Monton de monedas junto a cada contador del marcador: crece con la
       partida (sprites/coins 1-5, copa 6 para el ganador). Colocados en el
       lado exterior de cada equipo, sin afectar al layout. --- */
.score-monedas {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    pointer-events: none;
}

.score-team--nosotros .score-monedas {
    right: calc(100% + 8px);
}

.score-team--ellos .score-monedas {
    left: calc(100% + 8px);
}

@media (max-width: 768px) {
    .score-monedas {
        width: 24px;
        height: 24px;
    }
}

/* --- Avatares sprite en las pildoras (personajes de nombres.js) --- */
.player-avatar {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    image-rendering: pixelated;
    background: rgba(26, 14, 6, 0.45);
    border: 1.5px solid rgba(230, 201, 135, 0.25);
    padding: 1px;
}

.player-avatar[hidden] {
    display: none;
}

/* --- Iconos sprite en botones (puerta = salir, pergamino = reglas,
       engranaje = ajustes) --- */
.icono-ui {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    display: block;
    pointer-events: none;
}

.menu-btn .icono-ui {
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: -6px;
    margin-right: 10px;
}

.header-menu-btn {
    padding: 3px 8px;
}

@media (max-width: 768px) {
    .player-avatar {
        width: 22px;
        height: 22px;
    }
}

/* --- Apuesta viva: el bocadillo del que ha envidado queda destacado en
       carmin hasta que el lance se resuelve (el de ordago, aun mas). El
       pulso usa solo box-shadow: transform esta reservado al posicionado. --- */
.player-status--envite {
    border-color: var(--carmin);
    animation: envitePulse 1.6s ease-in-out infinite;
}

.player-status--ordago {
    background: linear-gradient(180deg, var(--carmin-vivo), var(--carmin));
    border-color: #6d1c1a;
    color: #f7ead0;
    font-weight: 700;
    letter-spacing: 1px;
    animation: ordagoPulse 0.9s ease-in-out infinite;
}

/* Cola del bocadillo ordago acorde al fondo carmin */
.player-status--ordago::before {
    border-right-color: var(--carmin-vivo);
    border-top-color: var(--carmin-vivo);
}

@keyframes envitePulse {
    0%, 100% { box-shadow: 2px 2px 0 rgba(15, 8, 3, 0.35), 0 0 0 0 rgba(163, 43, 40, 0.35); }
    50% { box-shadow: 2px 2px 0 rgba(15, 8, 3, 0.35), 0 0 0 4px rgba(163, 43, 40, 0.22); }
}

@keyframes ordagoPulse {
    0%, 100% { box-shadow: 2px 2px 0 rgba(15, 8, 3, 0.4), 0 0 0 0 rgba(194, 58, 50, 0.5); }
    50% { box-shadow: 2px 2px 0 rgba(15, 8, 3, 0.4), 0 0 0 6px rgba(194, 58, 50, 0.28); }
}

/* Pildora central del envite en modo ordago */
.current-bet--ordago {
    border-color: var(--carmin-vivo);
    animation: ordagoPulse 0.9s ease-in-out infinite;
}

.current-bet--ordago .bet-value {
    color: #ff9d8d;
}

/* Nota "(pegada)" del resumen: cobro ya hecho en el acto, no suma ahora */
.resumen-pegada {
    color: var(--tinta-suave);
    font-size: 0.85em;
}