:root {
    /* === Risograph palette: cuatro tintas + crema === */
    --paper:        #F4EAD5;   /* crema marfil */
    --paper-warm:   #EFE3C5;   /* crema marfil más profundo */
    --ink-blue:     #1F3A93;   /* azul cobalto */
    --ink-blue-deep:#142868;
    --ink-red:      #C8312D;   /* rojo bermellón */
    --ink-red-deep: #A82622;
    --ink-yellow:   #F2C84B;   /* amarillo */
    --ink-yellow-deep:#D9AE2C;
    --ink-black:    #1A1A1A;   /* negro tinta */
    --ink-violet:   #3A2B60;   /* violeta sombra (acento sutil) */
    --ink-blue-tint:  rgba(31, 58, 147, 0.12);
    --ink-red-tint:   rgba(200, 49, 45, 0.16);
    --ink-yellow-tint:rgba(242, 200, 75, 0.22);

    /* Aliases compatibles con reglas antiguas */
    --bg-color: var(--paper);
    --text-color: var(--ink-black);
    --card-bg: var(--paper-warm);
    --primary-color: var(--ink-blue);
    --primary-hover: var(--ink-blue-deep);
    --secondary-color: #5b5b6a;
    --secondary-hover: #2f2f3a;
    --danger-color: var(--ink-red);
    --success-color: var(--ink-blue);
    --border-radius: 0px;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Iowan Old Style', 'Georgia', 'Times New Roman', serif;
    background-color: var(--paper);
    background-image:
        linear-gradient(rgba(244, 234, 213, 0.92), rgba(244, 234, 213, 0.92)),
        url("../../fondo.png?v=2");
    background-size: cover, 100% 100%;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    color: var(--ink-black);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* === Grano de papel: capa fija sobre toda la pantalla === */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
    opacity: 0.22;
    mix-blend-mode: multiply;
}

/* Una segunda capa muy sutil de manchas rojas, simulando la tinta */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.19  0 0 0 0 0.18  0 0 0 0.40 0'/></filter><rect width='400' height='400' filter='url(%23m)'/></svg>");
    opacity: 0.07;
    mix-blend-mode: multiply;
}

.screen-container {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.screen.active {
    display: flex;
}

.screen.scrollable {
    justify-content: flex-start;
    overflow-y: auto;
    padding: 60px 20px 20px 20px;
}

/* === Salida animada de los elementos del inicio al abrir reglas === */
#screen-start.leaving,
#screen-start.entering {
    pointer-events: none;
}

#screen-start.leaving h1 {
    animation: start-exit-h1 0.45s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}

#screen-start.leaving .subtitle {
    animation: start-exit-subtitle 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) 0.05s forwards;
}

#screen-start.leaving .btn-primary {
    animation: start-exit-btn 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.1s forwards;
}

#screen-start.leaving .btn-secondary {
    animation: start-exit-btn 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.16s forwards;
}

#screen-start.leaving #mobile-block-msg {
    animation: start-exit-subtitle 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) 0.13s forwards;
}

@keyframes start-exit-h1 {
    to { opacity: 0; transform: translateY(-40px) scale(0.94); }
}

@keyframes start-exit-subtitle {
    to { opacity: 0; transform: translateY(-22px); }
}

@keyframes start-exit-btn {
    to { opacity: 0; transform: translateY(28px) scale(0.92); }
}

/* === Entrada animada (inversa) al cerrar reglas === */
#screen-start.entering h1 {
    animation: start-enter-h1 0.45s cubic-bezier(0.18, 0.85, 0.42, 1) both;
}

#screen-start.entering .subtitle {
    animation: start-enter-subtitle 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) 0.05s both;
}

#screen-start.entering .btn-primary {
    animation: start-enter-btn 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.1s both;
}

#screen-start.entering .btn-secondary {
    animation: start-enter-btn 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.16s both;
}

#screen-start.entering #mobile-block-msg {
    animation: start-enter-subtitle 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) 0.13s both;
}

/* Variante más lenta para la entrada tras la intro del chat */
#screen-start.intro-entering h1 {
    animation: start-enter-h1 1s cubic-bezier(0.18, 0.85, 0.42, 1) 0.1s both;
}

#screen-start.intro-entering .subtitle {
    animation: start-enter-subtitle 0.9s cubic-bezier(0.18, 0.85, 0.42, 1) 0.35s both;
}

#screen-start.intro-entering .btn-primary {
    animation: start-enter-btn 0.9s cubic-bezier(0.18, 0.85, 0.42, 1) 0.6s both;
}

#screen-start.intro-entering .btn-secondary {
    animation: start-enter-btn 0.9s cubic-bezier(0.18, 0.85, 0.42, 1) 0.8s both;
}

#screen-start.intro-entering #mobile-block-msg {
    animation: start-enter-subtitle 0.9s cubic-bezier(0.18, 0.85, 0.42, 1) 0.7s both;
}

#screen-start.intro-entering {
    pointer-events: none;
}

@keyframes start-enter-h1 {
    from { opacity: 0; transform: translateY(-40px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes start-enter-subtitle {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes start-enter-btn {
    from { opacity: 0; transform: translateY(28px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* El botón de ajustes acompaña la salida/entrada del resto de la pantalla */
#screen-start.leaving .btn-settings {
    animation: start-exit-settings 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}
#screen-start.entering .btn-settings {
    animation: start-enter-settings 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.1s both;
}
#screen-start.intro-entering .btn-settings {
    animation: start-enter-settings 0.9s cubic-bezier(0.18, 0.85, 0.42, 1) 0.6s both;
}

@keyframes start-exit-settings {
    to { opacity: 0; transform: translateY(-24px) scale(0.8) rotate(-30deg); }
}

@keyframes start-enter-settings {
    from { opacity: 0; transform: translateY(-24px) scale(0.8) rotate(-30deg); }
    to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* === Animaciones de los controles de la pantalla de reglas === */
#screen-rules.entering .btn-close {
    animation: rules-ui-enter-down 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.05s both;
}

#screen-rules.entering .rules-nav-btn--side {
    animation: rules-ui-enter-sides 0.45s cubic-bezier(0.18, 0.85, 0.42, 1) 0.1s both;
}

#screen-rules.entering .rules-nav {
    animation: rules-ui-enter-up 0.42s cubic-bezier(0.18, 0.85, 0.42, 1) 0.12s both;
}

#screen-rules.leaving .btn-close {
    animation: rules-ui-exit-up 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}

#screen-rules.leaving .rules-nav-btn--side {
    animation: rules-ui-exit-shrink 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}

#screen-rules.leaving .rules-nav {
    animation: rules-ui-exit-down 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}

#screen-rules.leaving .rules-scroll-down.visible {
    animation: rules-scroll-exit 0.4s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}

@keyframes rules-scroll-exit {
    from { opacity: 1; transform: translate(-50%, 0) scale(1); }
    to   { opacity: 0; transform: translate(-50%, 30px) scale(0.5); }
}

@keyframes rules-ui-enter-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rules-ui-enter-sides {
    from { opacity: 0; transform: scale(0.65); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes rules-ui-enter-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rules-ui-exit-up {
    to { opacity: 0; transform: translateY(-20px); }
}

@keyframes rules-ui-exit-shrink {
    to { opacity: 0; transform: scale(0.65); }
}

@keyframes rules-ui-exit-down {
    to { opacity: 0; transform: translateY(20px); }
}

/* ===== Mazo de reglas ===== */
#screen-rules {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 60px 40px 30px 40px;
    box-sizing: border-box;
    background: transparent;
    justify-content: center;
    align-items: center;
}

.rules-deck {
    position: relative;
    width: 100%;
    max-width: 1500px;
    flex: 1;
    perspective: 1800px;
    perspective-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    transform-style: preserve-3d;
}

.rules-card-step {
    display: none;
}

.rules-card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: auto;
    aspect-ratio: 21.6 / 27.9;
    max-width: 100%;
    background: var(--paper);
    border: 2px solid var(--ink-black);
    border-radius: 24px;
    padding: 36px 44px;
    box-sizing: border-box;
    box-shadow: 8px 8px 0 var(--ink-red);
    text-align: left;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    backface-visibility: hidden;
    transform: translate3d(0, 0, -400px) scale(0.7);
    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        filter 0.5s ease,
        box-shadow 0.5s ease;
}

.rules-card.active {
    opacity: 1;
    pointer-events: all;
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
    z-index: 5;
    box-shadow: 10px 10px 0 var(--ink-red);
    filter: none;
}

.rules-card.prev,
.rules-card.next {
    opacity: 0.3;
    pointer-events: all;
    cursor: pointer;
    z-index: 3;
    overflow: hidden;
    filter: none;
    background: var(--paper-warm);
}

.rules-card.prev {
    box-shadow: 6px 6px 0 var(--ink-blue);
}

.rules-card.next {
    box-shadow: 6px 6px 0 var(--ink-yellow);
}

.rules-card.prev:hover,
.rules-card.next:hover {
    opacity: 1;
    filter: none;
}

.rules-card.prev {
    transform: translate3d(-40%, 0, -10px) rotateY(10deg) scale(0.88);
}

.rules-card.next {
    transform: translate3d(40%, 0, -10px) rotateY(-10deg) scale(0.88);
}

.rules-card.far-prev,
.rules-card.far-next {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.rules-card.far-prev {
    transform: translate3d(-90%, 0, -300px) rotateY(45deg) scale(0.78);
}

.rules-card.far-next {
    transform: translate3d(90%, 0, -300px) rotateY(-45deg) scale(0.78);
}

.rules-card-step {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-red);
    margin-bottom: 18px;
    font-weight: 700;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
}

.rules-card h1, .rules-card h2 {
    color: var(--ink-blue);
    background: none;
    -webkit-text-fill-color: initial;
    margin: 0 0 22px 0;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    text-shadow: none;
    line-height: 1;
}

.rules-card h1 {
    font-size: 2.6rem;
    text-align: left;
}

.rules-card h2 {
    font-size: 2rem;
}

.rules-card p, .rules-card li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 12px;
    color: var(--ink-black);
    font-family: 'Inter', sans-serif;
}

.rules-card p.rules-disclaimer {
    margin-top: 18px;
    padding: 14px 18px;
    background: rgba(255, 43, 143, 0.12);
    border-left: 4px solid #06b6a4;
    border-radius: 10px;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.55;
}

.rules-card ul {
    margin: 12px 0 18px 0;
    padding-left: 22px;
}

.rules-card li {
    margin-bottom: 10px;
}

.rules-card em {
    color: var(--ink-violet);
    font-style: italic;
}

/* ===== Navegación del mazo ===== */
.rules-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.rules-stage .rules-deck {
    flex: 1;
    align-self: stretch;
    height: auto;
}

.rules-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 18px;
}

.rules-nav-btn--side {
    flex: 0 0 auto;
    z-index: 10;
    box-shadow: 4px 4px 0 var(--ink-blue);
}

.rules-scroll-down {
    position: absolute;
    bottom: 18px;
    left: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink-red);
    color: var(--paper);
    border: 2px solid var(--ink-black);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink-blue);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 0);
    transition: opacity 0.25s ease;
}

.rules-scroll-down.visible {
    opacity: 1;
    pointer-events: all;
    animation: scroll-down-bounce 1.6s ease-in-out infinite;
}

.rules-scroll-down:hover {
    background: var(--ink-red-deep);
}

@keyframes scroll-down-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
}

.rules-nav-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--ink-black);
    background: var(--paper);
    color: var(--ink-blue);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Inter', sans-serif;
}

.rules-nav-btn:hover:not(:disabled) {
    background: var(--ink-red);
    color: var(--ink-black);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink-blue);
}

.rules-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.rules-counter {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-blue);
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
}

.rules-counter #rules-current {
    color: var(--ink-red);
}

/* ===== Palabras clave coloreadas ===== */
.kw-confianza,
.kw-info,
.kw-pluralismo,
.kw-participacion,
.kw-accion,
.kw-rol,
.kw-mazo,
.kw-fantasy,
.kw-democracia,
.kw-peligro,
.kw-bonus {
    font-weight: 700;
}

.kw-confianza    { color: #38bdf8; }   /* azul cielo */
.kw-info         { color: #d97706; }   /* ámbar oscuro */
.kw-pluralismo   { color: #c084fc; }   /* violeta */
.kw-participacion{ color: #16a34a; }   /* verde */
.kw-accion       { color: #fb923c; }   /* naranja */
.kw-rol          { color: #f472b6; }   /* rosa */
.kw-mazo         { color: #6366f1; }   /* índigo */

.kw-democracia   {
    background: linear-gradient(90deg, #3b82f6, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.kw-peligro      { color: #dc2626; }   /* rojo */
.kw-bonus        { color: #16a34a; }   /* verde */

/* Aviso de "solo en ordenador": oculto por defecto (visible en pantallas no anchas) */
#mobile-block-msg { display: none; }

/* La partida solo se puede jugar en pantallas anchas (apaisadas, tipo ordenador).
   En pantallas estrechas, verticales o poco anchas el botón queda bloqueado. */
@media (max-width: 1024px), (orientation: portrait), (max-aspect-ratio: 13/10) {
    #btn-new-game {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
        filter: grayscale(0.6);
    }
    body .btn-settings {
        display: none;
    }
    #mobile-block-msg {
        display: block;
        max-width: 80%;
        margin: 4px auto 18px;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        line-height: 1.45;
        color: var(--ink-blue);
        background: rgba(255, 43, 143, 0.12);
        border-radius: 12px;
        padding: 12px 16px;
    }
}

@media (max-width: 720px) {
    /* En móvil la imagen de fondo no se estira — mantiene proporciones */
    body, html {
        background-size: cover, cover;
    }

    /* Reglas: cartas ocupan casi toda la pantalla, sin flechas laterales */
    #screen-rules {
        padding: 40px 12px 20px 12px;
    }

    .rules-stage {
        gap: 0;
    }

    .rules-nav-btn--side {
        display: none;
    }

    .rules-card {
        padding: 22px 18px;
        height: 85%;
        width: 78%;
        max-height: 85%;
        max-width: 78%;
        aspect-ratio: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Peeks laterales visibles: asoman ~22% del ancho a cada lado */
    .rules-card.prev {
        transform: translate3d(-78%, 0, -20px) rotateY(16deg) scale(0.82);
    }
    .rules-card.next {
        transform: translate3d(78%, 0, -20px) rotateY(-16deg) scale(0.82);
    }

    .rules-card h1 { font-size: 1.9rem; }
    .rules-card h2 { font-size: 1.5rem; }
    .rules-card p, .rules-card li { font-size: 0.95rem; }

    /* Pantalla principal: elementos reducidos en móvil */
    #screen-start h1 {
        font-size: 3rem;
        text-shadow:
            2px 2px 0 var(--ink-yellow),
            4px 4px 0 var(--ink-red);
    }
    #screen-start .subtitle {
        font-size: 1.05rem;
        margin-bottom: 28px;
    }
    #screen-start .btn-primary,
    #screen-start .btn-secondary {
        font-size: 0.95rem;
        padding: 11px 22px;
        box-shadow: 4px 4px 0 var(--ink-red);
    }
    #screen-start .btn-secondary {
        box-shadow: 4px 4px 0 var(--ink-yellow);
    }

    /* === Partida en móvil: tablero y cartas muy compactos === */
    #screen-game { padding: 6px; height: 100svh; overflow: hidden; }

    /* Stands de jugador en las esquinas, mínimos */
    .player-corner {
        width: 30vw;
        max-width: 104px;
        padding: 4px;
        gap: 0;
        border-radius: 9px;
    }
    #player-1 { top: 5px; left: 5px; }
    #player-2 { top: 5px; right: 5px; }
    #player-3 { bottom: 5px; left: 5px; }
    #player-4 { bottom: 5px; right: 5px; }

    .player-portrait { width: 30px; height: 30px; margin-bottom: 1px; }
    .player-portrait.placeholder::before { font-size: 0.8rem; }
    .player-num { font-size: 0.32rem; letter-spacing: 0.04em; }
    .role-name { font-size: 0.42rem; margin: 1px 0; line-height: 1.02; }
    .indicator-name { font-size: 0.34rem; }
    .player-corner .bar { gap: 1px; padding: 2px; margin-top: 2px; box-shadow: 2px 2px 0 var(--ink-black); }
    .player-corner .bar .pip { height: 6px; }

    /* Zona central (temporizador, cartas, decisiones): bloque compacto y centrado */
    .dashboard { justify-content: center; gap: 6px; }
    .timer-container { font-size: 0.95rem; margin: 0 0 2px; }
    /* Las cartas A/B NO se estiran: se ajustan a su contenido */
    .cards-area { flex-grow: 0; gap: 7px; max-width: 100%; align-items: flex-start; }
    .card.pokecard { border-width: 4px; }
    #screen-game .card.pokecard { border-radius: 9px; }
    .pokecard-header { padding: 3px 7px; }
    .pokecard-name { font-size: 0.44rem; }
    .pokecard-hp { font-size: 0.42rem; }
    .pokecard-art { min-height: 0; margin: 3px 5px 0; padding: 5px 6px; }
    .pokecard-text { font-size: 0.56rem; line-height: 1.1; }
    .pokecard-typebar { padding: 3px 0; }

    .actions-area { gap: 5px; padding: 10px 6px 6px; max-width: 100%; }
    .actions-area::before { font-size: 0.66rem; left: 12px; }
    #screen-game .action-btn {
        font-size: 0.56rem;
        padding: 6px 5px;
        flex: 1 1 42%;
        margin: 0;
    }
    .action-info-btn { width: 17px; height: 17px; top: -7px; left: -7px; font-size: 0.6rem; }

    /* Overlay de turno / consignas */
    .turn-card { padding: 12px 16px; max-width: 90vw; }
    .turn-player { font-size: 0.56rem; margin-bottom: 5px; }
    .turn-role { font-size: 1.2rem; margin-bottom: 8px; }
    .turn-time { font-size: 1.1rem; }
    .turn-consigna,
    .turn-subtext { font-size: 0.82rem; max-width: 84vw; padding: 9px 13px; margin-top: 12px; }
    .turn-consigna::before,
    .turn-subtext::before { font-size: 0.62rem; }
    .start-btn { font-size: 0.82rem; padding: 9px 22px; margin-top: 12px; }

    /* Cartas de reparto de roles (al dar "Nueva Partida"): cortas y compactas */
    .deal-card { width: 44vw; max-width: 150px; padding: 5px 8px 6px; }
    .deal-role-portrait { height: 48px; margin: 1px 0 4px; }
    .deal-player { font-size: 0.4rem; margin-bottom: 2px; }
    .deal-role { font-size: 0.54rem; margin-bottom: 3px; text-shadow: 1px 1px 0 var(--ink-red); }
    .deal-desc { font-size: 0.46rem; line-height: 1.22; }

    /* Abanico inicial: cartas más juntas (más solapadas) */
    .deal-card[data-player="1"] { transform: translate(-50%, -50%) translateX(-54px) rotate(-9deg); }
    .deal-card[data-player="2"] { transform: translate(-50%, -50%) translateX(-18px) rotate(-3deg); }
    .deal-card[data-player="3"] { transform: translate(-50%, -50%) translateX(18px)  rotate(3deg); }
    .deal-card[data-player="4"] { transform: translate(-50%, -50%) translateX(54px)  rotate(9deg); }

    /* Al repartir, las cartas vuelan a las esquinas a tamaño de stand */
    .role-deal-overlay.dealt .deal-card { transform: translate(0, 0) rotate(0) scale(0.62); }
    .role-deal-overlay.dealt .deal-card[data-player="1"] { top: 6px; left: 6px; }
    .role-deal-overlay.dealt .deal-card[data-player="2"] { top: 6px; left: auto; right: 6px; }
    .role-deal-overlay.dealt .deal-card[data-player="3"] { top: auto; bottom: 6px; left: 6px; }
    .role-deal-overlay.dealt .deal-card[data-player="4"] { top: auto; bottom: 6px; left: auto; right: 6px; }
}

h1 {
    font-size: 4.5rem;
    margin-bottom: 10px;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--ink-blue);
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow:
        3px 3px 0 var(--ink-yellow),
        6px 6px 0 var(--ink-red);
    line-height: 0.95;
}

.subtitle {
    font-size: 1.4rem;
    color: var(--ink-violet);
    margin-bottom: 40px;
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-style: italic;
}

button {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    padding: 14px 28px;
    border: 2px solid var(--ink-black);
    border-radius: 0;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.btn-primary {
    background-color: var(--ink-yellow);
    color: var(--ink-black);
    box-shadow: 5px 5px 0 var(--ink-red);
}

.btn-primary:hover {
    background-color: var(--ink-yellow-deep);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink-red);
}

.btn-secondary {
    background-color: var(--ink-blue);
    color: var(--paper);
    box-shadow: 5px 5px 0 var(--ink-yellow);
}

.btn-secondary:hover {
    background-color: var(--ink-blue-deep);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink-yellow);
}

#screen-game {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    background: transparent;
}

#screen-game h1,
#screen-game h2,
#screen-game .turn-role,
#screen-game .deal-role,
#screen-game .card-letter,
#screen-end h1,
#screen-end h2,
#screen-end .turn-role,
#screen-end .deal-role {
    text-shadow: none;
}

/* === Esquinas redondeadas dentro de la partida === */
#screen-game .player-corner,
#screen-game .deal-card,
#screen-game .turn-card,
#screen-game .card,
#screen-game .actions-area {
    border-radius: 24px;
}

#screen-game .player-portrait,
#screen-game .deal-role-portrait,
#screen-game .effect-row,
#screen-game .action-btn,
#screen-game .start-btn,
#screen-game .card-bonus {
    border-radius: 14px;
}

#screen-game .delta,
#screen-game .player-corner .bar .pip {
    border-radius: 6px;
}

.dashboard {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.player-corner {
    position: absolute;
    width: 210px;
    padding: 15px;
    background: var(--paper);
    border: 2px solid var(--ink-black);
    border-radius: 0;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 4px 4px 0 var(--ink-blue);
}

#player-1 { top: 20px; left: 20px; }
#player-2 { top: 20px; right: 20px; box-shadow: -4px 4px 0 var(--ink-red); }
#player-3 { bottom: 20px; left: 20px; box-shadow: 4px -4px 0 var(--ink-red); }
#player-4 { bottom: 20px; right: 20px; box-shadow: -4px -4px 0 var(--ink-blue); }

/* === Animación flotante de cambio de indicador (+1, -2…) === */
.indicator-delta {
    position: absolute;
    pointer-events: none;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    z-index: 10;
    text-shadow:
        -2px -2px 0 var(--paper),
         2px -2px 0 var(--paper),
        -2px  2px 0 var(--paper),
         2px  2px 0 var(--paper),
         0    3px 0 rgba(0, 0, 0, 0.35);
    animation: indicator-delta-rise 1.6s cubic-bezier(0.18, 0.85, 0.42, 1) forwards;
}

.indicator-delta.positive { color: #2E9B30; }
.indicator-delta.negative { color: #C8312D; }

/* Aparece justo fuera del lado interior del stand del jugador,
   a la altura de la barra de indicador (que está en la parte baja del stand). */
#player-1 .indicator-delta,
#player-3 .indicator-delta { left: calc(100% + 14px); bottom: 18px; }
#player-2 .indicator-delta,
#player-4 .indicator-delta { right: calc(100% + 14px); bottom: 18px; }

@keyframes indicator-delta-rise {
    0%   { opacity: 0; transform: translateY(14px) scale(0.55); }
    18%  { opacity: 1; transform: translateY(0)    scale(1.18); }
    32%  {              transform: translateY(-4px) scale(1.00); }
    78%  { opacity: 1; transform: translateY(-46px) scale(1.00); }
    100% { opacity: 0; transform: translateY(-72px) scale(0.92); }
}

.player-portrait {
    width: 110px;
    height: 110px;
    border-radius: 0;
    overflow: hidden;
    background: var(--ink-blue-tint);
    border: 2px solid var(--ink-black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;
}

.player-portrait.placeholder::before {
    content: attr(data-initial);
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--ink-blue);
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

.player-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.3) contrast(1.1);
    mix-blend-mode: multiply;
}

.player-num {
    font-size: 0.72rem;
    color: var(--ink-red);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}

.role-name {
    font-weight: 900;
    font-size: 1.05rem;
    margin: 2px 0;
    color: var(--ink-blue);
    line-height: 1.15;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}

.indicator-name {
    font-size: 0.78rem;
    color: var(--ink-black);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.player-corner .bar {
    width: 100%;
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding: 4px;
    background: var(--paper-warm);
    border: 2px solid var(--ink-black);
    box-shadow: 3px 3px 0 var(--ink-black);
    box-sizing: border-box;
}

.player-corner .bar .pip {
    flex: 1;
    height: 22px;
    background:
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, 0.07) 0 3px,
            transparent       3px 7px);
    border: 1.5px solid var(--ink-black);
    border-radius: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.player-corner .bar .pip.filled {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0)   42%,
            rgba(0,   0,   0,   0.18) 100%),
        var(--ink-blue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 6px rgba(31, 58, 147, 0.40);
}

.player-corner .bar .pip.filled.danger {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0)   42%,
            rgba(0,   0,   0,   0.18) 100%),
        var(--ink-red);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 7px rgba(200, 49, 45, 0.55);
    animation: pip-danger-pulse 1.1s ease-in-out infinite;
}

@keyframes pip-danger-pulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            0 0 7px rgba(200, 49, 45, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            0 0 14px rgba(200, 49, 45, 0.90);
        transform: scale(1.04);
    }
}

#screen-game.reading-mode .player-corner {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#screen-game.reading-mode .player-corner:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ink-red);
}

#screen-game.reading-mode #player-2:hover { box-shadow: -8px 8px 0 var(--ink-blue); }
#screen-game.reading-mode #player-3:hover { box-shadow: 8px -8px 0 var(--ink-blue); }
#screen-game.reading-mode #player-4:hover { box-shadow: -8px -8px 0 var(--ink-red); }

.role-info-overlay {
    position: absolute;
    inset: 0;
    background: rgba(242, 234, 211, 0.92);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.role-info-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.role-info-overlay .role-info-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 440px;
    padding: 22px 26px 26px;
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.role-info-overlay.visible .role-info-card {
    transform: scale(1);
}

.role-info-overlay .role-info-card .deal-role-portrait {
    height: 290px;
    margin: 4px 0 14px;
}

.role-info-overlay .role-info-card .deal-player {
    font-size: 1rem;
    margin-bottom: 12px;
}

.role-info-overlay .role-info-card .deal-role {
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.role-info-overlay .role-info-card .deal-desc {
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Reparto animado de roles al inicio de la partida */
.role-deal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(242, 234, 211, 0.96);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.role-deal-overlay.visible {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
}

.role-deal-overlay.dealt {
    cursor: default;
}

.deal-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ink-blue);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    animation: deal-hint-pulse 1.6s ease-in-out infinite;
}

.role-deal-overlay.dealt .deal-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes deal-hint-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.turn-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 26, 0.55);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.turn-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.turn-overlay.reading {
    background: transparent;
    align-items: flex-start;
    padding-top: 32px;
    pointer-events: none;
}

.turn-overlay.reading .turn-card {
    pointer-events: all;
}

.turn-overlay.reading .turn-player {
    color: var(--ink-blue);
    text-shadow: none;
}

.turn-overlay.reading .turn-role {
    font-size: 1.6rem;
    margin-bottom: 14px;
    color: var(--ink-blue);
    text-shadow: 3px 3px 0 var(--ink-red);
}

.turn-card {
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.35s ease;
    background: var(--paper);
    border: 2px solid var(--ink-black);
    padding: 30px 40px;
    box-shadow: 8px 8px 0 var(--ink-red);
}

.turn-overlay.visible .turn-card {
    transform: scale(1);
}

.turn-overlay.reading .turn-card {
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink-blue);
    padding: 20px 30px;
}

.turn-player {
    font-size: 1rem;
    color: var(--ink-red);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
}

.turn-role {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--ink-blue);
    line-height: 1;
    margin-bottom: 24px;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 5px 5px 0 var(--ink-red);
}

.turn-time {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--ink-black);
    font-variant-numeric: tabular-nums;
    font-family: 'Inter', sans-serif;
}

.turn-consigna,
.turn-subtext {
    margin: 20px auto 0;
    max-width: 480px;
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-size: 1.65rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
    color: #06b6a4;
    background: rgba(255, 43, 143, 0.14);
    border: none;
    box-shadow: none;
    border-radius: 14px;
    padding: 14px 24px;
}

.turn-consigna:empty,
.turn-subtext:empty {
    display: none;
}

.turn-consigna::before,
.turn-subtext::before {
    content: "💬 Consigna de comunicación";
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff2b8f;
    margin-bottom: 8px;
}

.start-btn {
    margin-top: 24px;
    padding: 16px 48px;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-black);
    background: var(--ink-yellow);
    border: 2px solid var(--ink-black);
    border-radius: 0;
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--ink-red);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: 'Inter', sans-serif;
}

.start-btn:hover {
    background: var(--ink-yellow-deep);
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ink-red);
}

.start-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ink-red);
}

.deal-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 310px;
    padding: 14px 18px 16px;
    background: var(--paper);
    border: 2px solid var(--ink-black);
    border-radius: 0;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 6px 6px 0 var(--ink-red);
    transition: top 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                left 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                right 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                bottom 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                transform 0.85s cubic-bezier(0.18, 0.85, 0.42, 1),
                opacity 0.5s ease;
}

.deal-role-portrait {
    width: 100%;
    height: 190px;
    margin: 2px 0 10px;
    border-radius: 0;
    overflow: hidden;
    background: var(--ink-blue-tint);
    border: 2px solid var(--ink-black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.deal-role-portrait.placeholder::before {
    content: attr(data-initial);
    font-size: 3rem;
    font-weight: 900;
    color: var(--ink-blue);
    line-height: 1;
    letter-spacing: 0.02em;
    font-family: 'Inter', sans-serif;
}

.deal-role-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.3) contrast(1.1);
    mix-blend-mode: multiply;
}

.deal-card[data-player="1"] { transform: translate(-50%, -50%) translateX(-440px) rotate(-10deg); }
.deal-card[data-player="2"] { transform: translate(-50%, -50%) translateX(-145px) rotate(-3deg); }
.deal-card[data-player="3"] { transform: translate(-50%, -50%) translateX(145px)  rotate(3deg); }
.deal-card[data-player="4"] { transform: translate(-50%, -50%) translateX(440px)  rotate(10deg); }

.role-deal-overlay.dealt .deal-card {
    transform: translate(0, 0) rotate(360deg) scale(0.92);
    box-shadow: 9px 9px 0 var(--ink-red);
}
/* Cada carta gira una vuelta completa hacia su esquina, alternando el sentido */
.role-deal-overlay.dealt .deal-card[data-player="1"] { top: 20px; left: 20px;
    transform: translate(0, 0) rotate(-360deg) scale(0.92); }
.role-deal-overlay.dealt .deal-card[data-player="2"] { top: 20px; left: auto; right: 20px;
    transform: translate(0, 0) rotate(360deg) scale(0.92); }
.role-deal-overlay.dealt .deal-card[data-player="3"] { top: auto; bottom: 20px; left: 20px;
    transform: translate(0, 0) rotate(-360deg) scale(0.92); }
.role-deal-overlay.dealt .deal-card[data-player="4"] { top: auto; bottom: 20px; left: auto; right: 20px;
    transform: translate(0, 0) rotate(360deg) scale(0.92); }

.deal-player {
    font-size: 0.85rem;
    color: var(--ink-red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}

.deal-role {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--ink-blue);
    margin-bottom: 10px;
    line-height: 1.15;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-shadow: 3px 3px 0 var(--ink-red);
}

.deal-desc {
    font-size: 0.92rem;
    color: var(--ink-black);
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.timer-container {
    font-size: 3rem;
    font-weight: 900;
    margin: 20px 0;
    color: var(--ink-blue);
    font-family: 'Inter', sans-serif;
}

.btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--paper);
    color: var(--ink-blue);
    font-size: 2rem;
    padding: 0;
    margin: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border: 2px solid var(--ink-black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 3px 0 var(--ink-red);
}
.btn-close:hover {
    background: var(--ink-red);
    color: var(--ink-black);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink-blue);
}

/* === Botón de ajustes (engranaje) === */
.btn-settings {
    position: fixed;
    top: 16px;
    right: 16px;
    background: var(--ink-yellow);
    color: var(--ink-blue-deep);
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: 2px solid var(--ink-black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink-red);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    z-index: 50;
}
.btn-settings:hover {
    background: var(--ink-red);
    color: var(--paper);
    transform: translate(-1px, -1px) rotate(40deg);
    box-shadow: 4px 4px 0 var(--ink-blue);
}

/* === Modal de ajustes === */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1100;
}
.settings-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.settings-card {
    position: relative;
    background: var(--paper);
    border: 3px solid var(--ink-black);
    box-shadow: 10px 10px 0 var(--ink-red), 18px 18px 0 var(--ink-blue);
    padding: 0 0 32px;
    width: min(90vw, 420px);
    text-align: center;
    overflow: hidden;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.2s ease;
}
.settings-overlay.visible .settings-card {
    transform: translateY(0) scale(1);
}
.settings-card h2 {
    margin: 0 0 28px;
    padding: 22px 32px;
    color: var(--paper);
    background: var(--ink-blue);
    border-bottom: 3px solid var(--ink-black);
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 1;
}
.settings-card .btn-close {
    background: var(--ink-yellow);
    color: var(--ink-blue-deep);
}
.settings-card .btn-close:hover {
    background: var(--paper);
    color: var(--ink-red);
}
.settings-field {
    text-align: center;
    padding: 0 32px;
}
.settings-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--ink-red);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
}
.settings-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.stepper-btn {
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
    line-height: 1;
    background: var(--ink-blue);
    color: var(--paper);
    border: 2px solid var(--ink-black);
    box-shadow: 3px 3px 0 var(--ink-red);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
.stepper-btn:hover {
    background: var(--ink-red);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink-yellow-deep);
}
.stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: 2px 2px 0 var(--ink-black);
    transform: none;
    background: var(--secondary-color);
}
.stepper-value {
    min-width: 100px;
    padding: 8px 12px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ink-blue-deep);
    background: var(--ink-yellow);
    border: 2px solid var(--ink-black);
    box-shadow: 3px 3px 0 var(--ink-blue);
}
.settings-hint {
    margin: 18px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--ink-black);
}

.btn-close--game {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
}

/* === Emerge desde el botón "Nueva Partida" === */
#screen-game.emerging .player-corner,
#screen-game.emerging .dashboard,
#screen-game.emerging #btn-exit-game {
    will-change: transform, opacity;
    transform-origin: center center;
}


.cards-area {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-grow: 1;
    gap: 32px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.cards-loading,
.cards-error {
    align-self: center;
    margin: auto;
    color: var(--ink-blue);
    font-size: 1.2rem;
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-style: italic;
}

.cards-error {
    color: var(--ink-red-deep);
}

.card {
    background: var(--paper);
    padding: 22px;
    border: 2px solid var(--ink-black);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--ink-blue);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card[data-deck="A"] { box-shadow: 6px 6px 0 var(--ink-blue); }
.card[data-deck="B"] { box-shadow: 6px 6px 0 var(--ink-red); }

.card-letter {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--ink-blue);
    line-height: 1;
    margin-bottom: 16px;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    text-shadow: 4px 4px 0 var(--ink-red);
}

.card[data-deck="B"] .card-letter {
    color: var(--ink-red);
    text-shadow: 4px 4px 0 var(--ink-blue);
}

.card-bonus {
    display: inline-block;
    background: var(--ink-yellow);
    color: var(--ink-black);
    border: 2px solid var(--ink-black);
    font-weight: 900;
    font-size: 0.95rem;
    padding: 4px 12px;
    border-radius: 0;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.card-text {
    font-size: 0.95rem;
    color: var(--ink-black);
    margin: 0;
    line-height: 1.5;
    font-family: 'Iowan Old Style', 'Georgia', serif;
}

.card {
    transition: opacity 0.3s ease;
}

.card.flipping {
    opacity: 0;
}

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

/* === Cartas estilo TCG Pokémon === */
#screen-game .card.pokecard { border-radius: 18px; }

.card.pokecard {
    --type-color:      var(--paper-warm);
    --type-color-deep: rgba(0, 0, 0, 0.18);
    --type-soft:       rgba(244, 234, 213, 0.55);
    position: relative;
    background: var(--paper);
    padding: 0;
    border: 9px solid var(--type-color);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 8px 18px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
}

/* Línea fina interior, típica de los marcos TCG */
.card.pokecard::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--type-color-deep);
    border-radius: 10px;
    pointer-events: none;
}

.card.pokecard[data-type="fuego"]     { --type-color: #E69A78; --type-color-deep: #B66B4D; --type-soft: rgba(230, 154, 120, 0.28); }
.card.pokecard[data-type="agua"]      { --type-color: #8FB6DC; --type-color-deep: #5E89B5; --type-soft: rgba(143, 182, 220, 0.28); }
.card.pokecard[data-type="bosque"]    { --type-color: #A9C57A; --type-color-deep: #6E904B; --type-soft: rgba(169, 197, 122, 0.28); }
.card.pokecard[data-type="electrico"] { --type-color: #ECC85A; --type-color-deep: #B5953A; --type-soft: rgba(236, 200, 90, 0.30); }
.card.pokecard[data-type="psiquico"]  { --type-color: #C49DD2; --type-color-deep: #8E6C9F; --type-soft: rgba(196, 157, 210, 0.28); }
.card.pokecard[data-type="tierra"]    { --type-color: #C29B6B; --type-color-deep: #8B6A45; --type-soft: rgba(194, 155, 107, 0.28); }

.pokecard-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 14px;
    background: var(--type-soft);
    border-bottom: 1px solid var(--type-color-deep);
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pokecard-name {
    font-size: 1rem;
    color: var(--ink-black);
}

.pokecard-hp {
    font-size: 0.88rem;
    color: var(--ink-red-deep);
    font-weight: 900;
}

.pokecard-art {
    position: relative;
    flex: 1 1 auto;
    min-height: 150px;
    margin: 10px 14px 0;
    padding: 18px 22px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.4), transparent 55%),
        var(--type-soft);
    border: 1px solid var(--type-color-deep);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pokecard-art-watermark {
    position: absolute;
    font-size: 9rem;
    opacity: 0.22;
    filter: grayscale(0.15);
    pointer-events: none;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 0;
}

.pokecard-typebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin: 8px 0 0;
    background: var(--type-soft);
    border-top: 1px solid var(--type-color-deep);
    border-bottom: 1px solid var(--type-color-deep);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-black);
}

.pokecard-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--type-color);
    border: 1px solid var(--type-color-deep);
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.pokecard-text {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--ink-black);
    text-align: center;
    text-wrap: balance;
}

/* Cuando la carta se voltea, el marco Pokémon se conserva: sólo cambia el
   contenido dentro de .pokecard-art (texto → tabla de efectos). */
.card.pokecard.flipped .pokecard-art {
    align-items: stretch;
    justify-content: center;
    padding: 12px 14px;
}

.card.pokecard.flipped .effects-table {
    position: relative;
    z-index: 1;
    gap: 5px;
}

.card.pokecard.flipped .effect-row {
    padding: 6px 10px;
    background: rgba(244, 234, 213, 0.92);
    border: 1.5px solid var(--type-color-deep);
}

.effects-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.effect-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 0;
    background: var(--paper-warm);
    border: 1.5px solid var(--ink-black);
    transition: all 0.2s ease;
}

.effect-row.chosen {
    background: var(--ink-red);
    border-color: var(--ink-black);
    box-shadow: 3px 3px 0 var(--ink-blue);
}

.effect-decision {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink-blue);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.effect-row.chosen .effect-decision {
    color: var(--ink-black);
}

.effect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.delta {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 0;
    background: var(--paper);
    border: 1px solid var(--ink-black);
    font-family: 'Inter', sans-serif;
}

.delta.positive { color: var(--ink-blue); }
.delta.negative { color: var(--ink-red-deep); }
.delta.zero     { color: var(--ink-black); }

.effect-row.chosen .delta {
    background: var(--paper);
}

#end-info {
    max-width: 480px;
    margin: 20px auto 30px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.6;
    font-family: 'Iowan Old Style', 'Georgia', serif;
}

#end-info strong {
    color: var(--ink-red-deep);
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}

#end-info ul {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

#end-info li {
    margin-bottom: 6px;
}

.actions-area {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    background: var(--paper);
    border: 2px solid var(--ink-black);
    border-radius: 0;
    box-shadow: 5px 5px 0 var(--ink-blue);
    margin: 20px auto 0;
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
}

.actions-area::before {
    content: "DECIDE AQUÍ";
    position: absolute;
    top: 0;
    left: 28px;
    transform: translateY(-55%);
    background: var(--paper);
    padding: 0 12px;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--ink-black);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.action-btn {
    background: var(--paper);
    color: var(--ink-blue);
    border: 2px solid var(--ink-black);
    box-shadow: 4px 4px 0 var(--ink-red);
    position: relative;
    overflow: visible;
}

.action-info-btn {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink-yellow);
    color: var(--ink-black);
    border: 2px solid var(--ink-black);
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 2px 2px 0 var(--ink-red);
    transition: transform 0.15s ease, background 0.15s ease;
    user-select: none;
}

.action-info-btn:hover {
    background: var(--ink-red);
    color: var(--paper);
    transform: scale(1.15);
    box-shadow: 2px 2px 0 var(--ink-blue);
}

.action-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 26, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* === Overlay "¿Qué ha pasado?" tras revelar efectos === */
.round-summary-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 26, 0.62);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 24px;
    box-sizing: border-box;
}

.round-summary-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.round-summary-card {
    background: var(--paper);
    border: 2px solid var(--ink-black);
    border-radius: 24px;
    padding: 36px 40px 32px;
    width: 820px;
    max-width: 94vw;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 8px 8px 0 var(--ink-blue);
    transform: scale(0.88);
    transition: transform 0.4s cubic-bezier(0.34, 1.30, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.round-summary-overlay.visible .round-summary-card {
    transform: scale(1);
}

.round-summary-title {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 2.6rem;
    text-transform: uppercase;
    color: var(--ink-blue);
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1;
}

.round-summary-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.round-summary-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.round-summary-section + .round-summary-section {
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
    padding-top: 16px;
}

.round-summary-deck-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(0, 0, 0, 0.55);
}

.round-summary-section[data-deck="A"] .round-summary-deck-label { color: rgba(31, 58, 147, 0.65); }
.round-summary-section[data-deck="B"] .round-summary-deck-label { color: rgba(200, 49, 45, 0.65); }

.round-summary-text {
    margin: 4px 0 0;
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-size: 1.95rem;
    line-height: 1.45;
    color: var(--ink-black);
}

.round-summary-text.empty {
    font-style: italic;
    color: rgba(0, 0, 0, 0.55);
}

.round-summary-continue {
    align-self: center;
    background: var(--paper);
    color: var(--ink-blue);
    border: 2px solid var(--ink-black);
    box-shadow: 4px 4px 0 var(--ink-red);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 14px 36px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 8px;
}

.round-summary-continue:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink-red);
}

.round-summary-continue:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink-red);
}

.action-info-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* === Stand del jugador presidente: sombra dorada + leve iluminación === */
#screen-game .player-corner.president {
    box-shadow: 5px 5px 0 #c79a1e, 0 0 10px 2px rgba(214, 168, 41, 0.4);
}

.action-info-card {
    background: var(--paper);
    border: 2px solid var(--ink-black);
    border-radius: 24px;
    padding: 28px 32px 30px;
    width: 460px;
    max-width: 90vw;
    box-sizing: border-box;
    box-shadow: 8px 8px 0 var(--ink-red);
    transform: scale(0.85);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.action-info-overlay.visible .action-info-card {
    transform: scale(1);
}

.action-info-name {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 1.7rem;
    text-transform: uppercase;
    color: var(--ink-blue);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
    text-align: center;
    line-height: 1;
}

.action-info-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-black);
    text-align: left;
}

.action-info-desc strong {
    color: var(--ink-blue);
    font-weight: 800;
}
.action-btn:hover:not(:has(.action-info-btn:hover)) {
    background: var(--ink-red);
    color: var(--ink-black);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink-blue);
}
.action-btn.selected {
    background: var(--ink-blue);
    color: var(--paper);
    box-shadow: 4px 4px 0 var(--ink-red);
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-violet) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background-color: var(--ink-violet);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--ink-red);
}

/* ============================================================
   Intro: conversación estilo WhatsApp sobre el fondo
   ============================================================ */
.intro-chat {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
    background: transparent;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.intro-chat.intro-chat--leaving {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
}

/* Mientras corre la intro, ocultar la pantalla principal (se ve solo el fondo) */
body.intro-running #screen-start {
    visibility: hidden;
}

/* --- Conversación centrada sobre el fondo (los mensajes se acumulan) --- */
.intro-chat-body {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 4px;
    box-sizing: border-box;
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
}

.intro-msg {
    display: flex;
    width: 100%;
}

.intro-msg--in  { justify-content: flex-start; }
.intro-msg--out { justify-content: flex-end; }

.intro-bubble {
    position: relative;
    max-width: 80%;
    padding: 11px 16px 12px;
    border-radius: 16px;
    font-size: 1.15rem;
    line-height: 1.4;
    color: #111b21;
    box-shadow: 5px 5px 0 rgba(26, 26, 26, 0.2);
    word-wrap: break-word;
    animation: intro-bubble-in 0.28s cubic-bezier(0.18, 0.85, 0.42, 1) both;
}

.intro-msg--in .intro-bubble {
    background: #ffffff;
    border: 2px solid var(--ink-black);
    border-top-left-radius: 3px;
}

.intro-msg--out .intro-bubble {
    background: #d9fdd3;
    border: 2px solid var(--ink-black);
    border-top-right-radius: 3px;
}

@keyframes intro-bubble-in {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-meta {
    display: inline-block;
    float: right;
    margin: 6px 0 -2px 10px;
    font-size: 0.68rem;
    color: #667781;
    line-height: 1;
    white-space: nowrap;
}

.intro-ticks {
    margin-left: 3px;
    color: #53bdeb;
    letter-spacing: -2px;
}

/* --- Indicador de "escribiendo" --- */
.intro-typing .intro-bubble {
    padding: 13px 15px;
}

.intro-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.intro-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa6ac;
    display: inline-block;
    animation: intro-dot 1.2s infinite ease-in-out;
}

.intro-dots i:nth-child(2) { animation-delay: 0.18s; }
.intro-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes intro-dot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-3px); }
}

/* --- Botón de saltar --- */
.intro-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    margin: 0;
    padding: 5px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    color: #555;
    background: rgba(120, 120, 120, 0.25);
    border: none;
    border-radius: 999px;
    box-shadow: none;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.intro-skip:hover {
    opacity: 0.9;
    background: rgba(120, 120, 120, 0.4);
}

/* El botón de saltar solo está disponible 1 s; luego se desvanece */
.intro-skip--gone {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .intro-bubble { animation-duration: 0.01ms; }
}