/* ====================================================================
   LOTERÍA MEXICANA — Cyber-Mex Futurista v4.0
   Stream-Ready · 16:9 Desktop-First · Neón Cantina · No Emojis
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ─── DESIGN TOKENS: TEMA BASE ───────────────────────────────────────── */
:root {
    /* === PALETA CYBER-MEX === */
    --neon-magenta:     #ff0090;
    --neon-magenta-dim: rgba(255,0,144,0.22);
    --neon-magenta-glow:rgba(255,0,144,0.50);

    --neon-cyan:        #00f5d4;
    --neon-cyan-dim:    rgba(0,245,212,0.18);
    --neon-cyan-glow:   rgba(0,245,212,0.45);

    --neon-gold:        #ffd700;
    --neon-gold-dim:    rgba(255,215,0,0.20);
    --neon-gold-glow:   rgba(255,215,0,0.45);

    --neon-green:       #39ff14;
    --neon-green-dim:   rgba(57,255,20,0.18);
    --neon-green-glow:  rgba(57,255,20,0.45);

    --neon-red:         #ff2244;
    --neon-red-glow:    rgba(255,34,68,0.45);

    --neon-violet:      #bf5fff;
    --neon-violet-dim:  rgba(191,95,255,0.18);

    /* === FONDOS === */
    --bg-void:      #05020f;
    --bg-deep:      #0c0520;
    --bg-mid:       #130930;
    --bg-surface:   rgba(18,8,40,0.90);
    --bg-glass:     rgba(255,255,255,0.05);
    --bg-glass-hi:  rgba(255,255,255,0.09);

    /* === BORDES / VIDRIO === */
    --border-glass:  rgba(255,255,255,0.10);
    --border-glow-m: rgba(255,0,144,0.45);
    --border-glow-c: rgba(0,245,212,0.40);

    /* === TEXTO === */
    --txt-bright: #ffffff;
    --txt-main:   rgba(255,255,255,0.90);
    --txt-dim:    rgba(255,255,255,0.52);
    --txt-mute:   rgba(255,255,255,0.28);

    /* === SOMBRAS === */
    --shadow-card: 0 8px 40px rgba(0,0,0,0.65);
    --shadow-btn:  0 4px 18px rgba(0,0,0,0.40);
    --shadow-xl:   0 24px 70px rgba(0,0,0,0.80);

    /* === RADIOS === */
    --r-xl:   22px;
    --r-lg:   14px;
    --r-md:   10px;
    --r-sm:    6px;
    --r-pill: 60px;

    /* === TIPOGRAFÍA === */
    --font-display: 'Bebas Neue', 'Rajdhani', sans-serif;
    --font-heading: 'Rajdhani', sans-serif;
    --font-body:    'Nunito', sans-serif;

    /* === TEMA (intercambiable) === */
    --theme-accent:  var(--neon-magenta);
    --theme-accent2: var(--neon-cyan);
    --theme-glow:    var(--neon-magenta-glow);
}

/* Tema alternativo "Agave" (comentar/descomentar para cambiar de skin)
:root {
    --theme-accent:  var(--neon-cyan);
    --theme-accent2: var(--neon-gold);
    --theme-glow:    var(--neon-cyan-glow);
}
*/

/* ─── RESET ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

/* ─── BODY & FONDO DINÁMICO ─────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background-color: var(--bg-void);
    color: var(--txt-main);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Fondo animado: Degradado cónico giratorio */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 15%, rgba(255,0,144,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 85%, rgba(0,245,212,0.09) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 60% 40%, rgba(191,95,255,0.07) 0%, transparent 60%),
        linear-gradient(170deg, #0c0520 0%, #05020f 50%, #0a0418 100%);
    pointer-events: none;
    z-index: 0;
    animation: bgShift 18s ease-in-out infinite alternate;
}

/* Rejilla de puntos tipo HUD */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 38px 38px;
    pointer-events: none;
    z-index: 0;
}

@keyframes bgShift {
    0%   { filter: hue-rotate(0deg);   }
    50%  { filter: hue-rotate(18deg);  }
    100% { filter: hue-rotate(-10deg); }
}

/* ─── CONTAINER ─────────────────────────────────────────────────────────── */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 40px;
    position: relative;
    z-index: 1;
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0 20px;
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

/* Streamer avatar placeholder */
.streamer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-magenta), var(--neon-violet));
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 16px var(--neon-magenta-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.3s;
}
.streamer-avatar:hover {
    box-shadow: 0 0 28px var(--neon-magenta-glow), 0 0 50px var(--neon-magenta-dim);
    transform: scale(1.08);
}
.streamer-avatar img { width: 100%; height: 100%; object-fit: cover; }

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Logo principal en el header */
.header-logo {
    height: 58px;
    width: auto;
    display: block;
    /* Elimina el fondo blanco del PNG usando mix-blend-mode */
    mix-blend-mode: multiply;
    filter:
        drop-shadow(0 0 10px rgba(255, 50, 0, 0.55))
        drop-shadow(0 0 22px rgba(0, 200, 255, 0.30))
        brightness(1.05)
        contrast(1.05);
    transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    cursor: default;
}
.header-logo:hover {
    filter:
        drop-shadow(0 0 16px rgba(255, 80, 0, 0.80))
        drop-shadow(0 0 34px rgba(0, 220, 255, 0.50))
        brightness(1.12)
        contrast(1.08);
    transform: scale(1.06) rotate(-1deg);
}

.logo-icon-fa {
    font-size: 2.2rem;
    color: var(--neon-gold);
    filter: drop-shadow(0 0 14px var(--neon-gold-glow));
    animation: floatIcon 3.5s ease-in-out infinite;
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(-2deg);  }
    50%       { transform: translateY(-7px) rotate(2deg); }
}

header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    letter-spacing: 5px;
    line-height: 1;
    background: linear-gradient(135deg,
        var(--neon-magenta) 0%,
        var(--neon-gold)    45%,
        var(--neon-cyan)   100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px var(--neon-magenta-dim));
    animation: titlePulse 4s ease-in-out infinite alternate;
}
@keyframes titlePulse {
    from { filter: drop-shadow(0 0 12px var(--neon-magenta-dim)); }
    to   { filter: drop-shadow(0 0 30px var(--neon-magenta-glow)); }
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ─── BOTONES BASE ───────────────────────────────────────────────────────── */
button {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1.5px;
    border: none;
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.22s ease,
                background 0.22s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.1rem;
    padding: 11px 24px;
    box-shadow: var(--shadow-btn);
}

/* Shimmer sweep */
button::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.45s ease;
    pointer-events: none;
}
button:hover::after { left: 160%; }
button:hover  { transform: translateY(-3px) scale(1.03); }
button:active { transform: translateY(1px)  scale(0.97); transition-duration: 0.08s; }
button:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; }

/* Variantes */
.btn-primary {
    background: linear-gradient(135deg, var(--neon-magenta) 0%, #c0006a 100%);
    color: #fff;
    box-shadow: 0 4px 22px var(--neon-magenta-dim);
    border: 1px solid rgba(255,0,144,0.30);
}
.btn-primary:hover {
    box-shadow: 0 8px 32px var(--neon-magenta-glow), 0 0 60px var(--neon-magenta-dim);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--neon-cyan) 0%, #00b89a 100%);
    color: var(--bg-deep);
    box-shadow: 0 4px 22px var(--neon-cyan-dim);
    border: 1px solid rgba(0,245,212,0.30);
}
.btn-secondary:hover {
    box-shadow: 0 8px 32px var(--neon-cyan-glow), 0 0 60px var(--neon-cyan-dim);
}

.btn-action {
    background: linear-gradient(135deg, var(--neon-gold) 0%, #c9a800 100%);
    color: var(--bg-deep);
    box-shadow: 0 4px 22px var(--neon-gold-dim);
    border: 1px solid rgba(255,215,0,0.30);
}
.btn-action:hover {
    box-shadow: 0 8px 32px var(--neon-gold-glow), 0 0 60px var(--neon-gold-dim);
}

.btn-verde {
    background: linear-gradient(135deg, var(--neon-green) 0%, #26bb00 100%);
    color: var(--bg-deep);
    box-shadow: 0 4px 22px var(--neon-green-dim);
    border: 1px solid rgba(57,255,20,0.30);
    font-weight: 900;
}
.btn-verde:hover {
    box-shadow: 0 8px 32px var(--neon-green-glow);
}

.btn-danger {
    background: linear-gradient(135deg, var(--neon-red) 0%, #a80018 100%);
    color: #fff;
    box-shadow: 0 4px 18px var(--neon-red-glow);
}

.btn-ghost {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--txt-main);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.3px;
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--bg-glass-hi);
    border-color: var(--theme-accent);
    color: var(--theme-accent);
    box-shadow: 0 0 14px var(--neon-magenta-dim);
    transform: translateY(-2px);
}

.btn-small  { font-size: 0.82rem; padding: 6px 14px; border-radius: var(--r-md); }
.btn-wide   { width: 100%; justify-content: center; }
.btn-paypal { background: linear-gradient(135deg, #003087, #001555); color: white; }
.btn-spei   { background: linear-gradient(135deg, #006040, #003020); color: white; }

/* ─── BOTÓN "¡LOTERÍA!" — El Hype Button ──────────────────────────────── */
.btn-loteria {
    width: 100%;
    margin-top: 14px;
    font-size: 1.8rem;
    letter-spacing: 4px;
    padding: 16px 20px;
    border-radius: var(--r-lg);
    color: var(--bg-void);
    background: linear-gradient(135deg,
        var(--neon-green)  0%,
        var(--neon-cyan)  40%,
        var(--neon-gold) 100%);
    border: 2px solid var(--neon-green);
    animation: hyperGlow 1s ease-in-out infinite alternate;
    text-shadow: none;
    box-shadow:
        0 0 20px var(--neon-green-glow),
        0 0 50px var(--neon-green-dim),
        inset 0 2px 0 rgba(255,255,255,0.25);
}
@keyframes hyperGlow {
    from {
        box-shadow: 0 0 20px var(--neon-green-glow), 0 0 50px var(--neon-green-dim);
        transform: scale(1);
    }
    to {
        box-shadow: 0 0 40px var(--neon-green-glow), 0 0 80px var(--neon-green-glow), 0 0 120px var(--neon-green-dim);
        transform: scale(1.03);
    }
}

/* ─── UTILIDADES ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── SCREENS ────────────────────────────────────────────────────────────── */
.screen { display: none; text-align: center; }
.screen.active {
    display: block;
    animation: screenReveal 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes screenReveal {
    from { opacity: 0; transform: translateY(32px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ─── GLASS CARD BASE ─────────────────────────────────────────────────────── */
.glass-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
}

/* ─── BARRA SUPERIOR NEÓN ─────────────────────────────────────────────────── */
.neon-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg,
        var(--neon-magenta),
        var(--neon-gold),
        var(--neon-cyan));
    background-size: 200% 100%;
    animation: barFlow 4s linear infinite;
}
@keyframes barFlow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ─── LOGIN SCREEN ────────────────────────────────────────────────────────── */
#login-screen {
    max-width: 440px;
    margin: 60px auto;
    padding: 52px 40px;
    background: rgba(18,8,40,0.95);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(28px);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,0,144,0.12);
    position: relative;
    overflow: hidden;
}
#login-screen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,0,144,0.08) 0%, transparent 70%); pointer-events: none; }

.screen-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--r-pill);
    padding: 5px 18px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--txt-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.screen-badge i { color: var(--neon-gold); font-size: 0.85rem; }

#login-screen h2 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    letter-spacing: 3px;
    color: var(--txt-bright);
    margin-bottom: 30px;
    text-shadow: 0 0 30px var(--neon-magenta-dim);
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}
.input-icon-fa {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--txt-mute);
    pointer-events: none;
    transition: color 0.2s;
}
.input-group:focus-within .input-icon-fa { color: var(--neon-magenta); }

#login-screen input,
.modal-content input[type="text"] {
    width: 100%;
    padding: 14px 16px 14px 46px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid var(--border-glass);
    border-radius: var(--r-lg);
    font-size: 1.05rem;
    font-family: var(--font-body);
    color: var(--txt-bright);
    transition: border-color 0.2s, box-shadow 0.2s;
}
#login-screen input::placeholder { color: var(--txt-mute); }
#login-screen input:focus,
.modal-content input[type="text"]:focus {
    outline: none;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 0 3px var(--neon-magenta-dim), 0 0 20px var(--neon-magenta-dim);
}

/* ─── MODE SELECTION ──────────────────────────────────────────────────────── */
#mode-screen { padding: 12px 0 24px; }
#mode-screen .section-label {
    font-size: 0.72rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--txt-mute);
    font-weight: 700;
    margin-bottom: 8px;
}
#mode-screen h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    letter-spacing: 4px;
    color: var(--txt-bright);
    margin-bottom: 10px;
}

.modes-grid {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-top: 36px;
    flex-wrap: wrap;
}

.mode-card {
    background: rgba(18,8,40,0.80);
    backdrop-filter: blur(22px);
    border-radius: var(--r-xl);
    padding: 36px 28px 28px;
    width: min(340px, 94vw);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s;
    cursor: default;
}

/* Borde degradado */
.mode-card::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.3s;
}
.mode-card.global::before  { background: linear-gradient(135deg, var(--neon-magenta), var(--neon-gold)); }
.mode-card.private::before { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet)); }
.mode-card:hover { transform: translateY(-10px) scale(1.02); }
.mode-card.global:hover  { box-shadow: 0 30px 60px var(--neon-magenta-dim), 0 0 80px rgba(255,0,144,0.12); }
.mode-card.private:hover { box-shadow: 0 30px 60px var(--neon-cyan-dim),    0 0 80px rgba(0,245,212,0.10); }

.mode-icon-fa {
    font-size: 3.5rem;
    display: block;
    margin: 0 auto 18px;
    line-height: 1;
}
.mode-card.global  .mode-icon-fa { color: var(--neon-magenta); filter: drop-shadow(0 0 14px var(--neon-magenta-glow)); }
.mode-card.private .mode-icon-fa { color: var(--neon-cyan);    filter: drop-shadow(0 0 14px var(--neon-cyan-glow)); }

.mode-card h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.mode-card.global  h3 { color: var(--neon-magenta); }
.mode-card.private h3 { color: var(--neon-cyan); }

.mode-card p {
    font-size: 0.88rem;
    color: var(--txt-dim);
    line-height: 1.7;
    margin-bottom: 22px;
}
.mode-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font-size: 0.72rem;
    color: var(--txt-mute);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.mode-divider::before, .mode-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border-glass);
}

/* ─── TOP BAR ─────────────────────────────────────────────────────────────── */
.top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(12,5,32,0.90);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(22px);
    padding: 10px 18px;
    border-radius: var(--r-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
    row-gap: 8px;
    position: relative;
    overflow: hidden;
}
.top-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-magenta), var(--neon-gold), var(--neon-cyan));
    background-size: 200% 100%;
    animation: barFlow 4s linear infinite;
}
.top-bar > div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    font-family: var(--font-body);
}
.top-bar-spacer { flex: 1; }

/* ─── BADGES ──────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--r-pill);
    padding: 4px 14px;
    font-size: 0.80rem;
    font-weight: 700;
    font-family: var(--font-body);
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.badge i { font-size: 0.78rem; }

.badge-room    { background: rgba(255,255,255,0.07);    border: 1px solid var(--border-glass); color: var(--txt-dim); }
.badge-pot     { background: var(--neon-gold-dim);       border: 1px dashed var(--neon-gold);   color: var(--neon-gold); }
.badge-coins   { background: var(--neon-green-dim);      border: 1px solid rgba(57,255,20,0.25); color: var(--neon-green); }
.badge-players { background: var(--neon-cyan-dim);       border: 1px solid rgba(0,245,212,0.25); color: var(--neon-cyan); }
.badge-status  { background: rgba(255,255,255,0.06);    border: 1px solid var(--border-glass); color: var(--txt-dim); }

.coin-balance {
    color: var(--neon-gold);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
}

/* ─── STORE SCREEN ────────────────────────────────────────────────────────── */
#store-screen {
    background: rgba(14,6,34,0.92);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(22px);
    border-radius: var(--r-xl);
    padding: 28px 26px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.store-header { margin-bottom: 24px; }
.store-header h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    letter-spacing: 4px;
    color: var(--txt-bright);
    margin-bottom: 8px;
}
.store-header h2 i { color: var(--neon-gold); margin-right: 6px; }
.store-header p  { font-size: 0.9rem; color: var(--txt-dim); line-height: 1.7; }
.store-header p strong { color: var(--neon-gold); }

/* Grid de cartillas en tienda */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

/* Mini-board en tienda (estilo TCG card) */
.mini-board {
    border: 1.5px solid var(--border-glass);
    border-radius: var(--r-md);
    padding: 6px;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1);
    position: relative;
    overflow: hidden;
}
.mini-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(0,245,212,0.05));
    opacity: 0;
    transition: opacity 0.2s;
}
.mini-board:hover {
    border-color: var(--neon-cyan);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px var(--neon-cyan-dim), 0 0 0 1px var(--neon-cyan-dim);
}
.mini-board:hover::before { opacity: 1; }

.mini-board.selected {
    border-color: var(--neon-green);
    background: var(--neon-green-dim);
    box-shadow: 0 0 24px var(--neon-green-glow), 0 0 0 2px var(--neon-green);
}
.mini-board.selected::after {
    content: '';
    position: absolute;
    top: 5px; right: 6px;
    width: 18px; height: 18px;
    background: var(--neon-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    z-index: 2;
    box-shadow: 0 0 10px var(--neon-green-glow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center;
}

.mini-board-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    border-radius: 5px;
    overflow: hidden;
}
/* Cada carta de la miniatura → estilo NFT */
.mini-card {
    aspect-ratio: 2/3;
    background: #1a0840;
    overflow: hidden;
    position: relative;
}
.mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5));
    pointer-events: none;
}

.store-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid var(--border-glass);
}
.store-total-info { font-size: 1rem; font-weight: 700; color: var(--txt-dim); }
.store-total-info strong { color: var(--neon-gold); font-size: 1.6rem; font-family: var(--font-heading); }

/* ─── PAYMENT MODAL ───────────────────────────────────────────────────────── */
.payment-options { text-align: left; margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.pay-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    border: 1.5px solid var(--border-glass);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--txt-main);
}
.pay-option:has(input:checked) {
    border-color: var(--neon-cyan);
    background: var(--neon-cyan-dim);
    box-shadow: 0 0 18px var(--neon-cyan-dim);
}
.pay-option:hover { border-color: var(--neon-cyan); background: rgba(0,245,212,0.06); }
.pay-option input { accent-color: var(--neon-cyan); width: 16px; height: 16px; cursor: pointer; }
.pay-option .pay-label { flex: 1; font-weight: 700; }
.pay-option .pay-price { font-weight: 800; color: var(--neon-gold); font-size: 1rem; }
.pay-option .pay-badge {
    font-size: 0.70rem;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--neon-green-dim);
    color: var(--neon-green);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(57,255,20,0.25);
}
.payment-methods {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* ─── GAME SCREEN ─────────────────────────────────────────────────────────── */
#game-screen { text-align: left; }

.game-area {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

/* ─── CALLER AREA (Left Column) ───────────────────────────────────────────── */
.caller-area {
    background: rgba(14,6,34,0.92);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(22px);
    border-radius: var(--r-xl);
    padding: 22px 18px;
    position: sticky;
    top: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.caller-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--neon-gold), var(--neon-magenta));
    background-size: 200% 100%;
    animation: barFlow 3s linear infinite;
}

.caller-label {
    font-size: 0.68rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-mute);
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    font-family: var(--font-body);
}
.caller-area h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: var(--neon-gold);
    text-align: center;
    margin-bottom: 16px;
}

/* ─── CARTA ACTUAL (TCG premium) ─────────────────────────────────────────── */
.current-card-wrap {
    position: relative;
    width: 100%;
    max-width: 165px;
    margin: 0 auto 18px;
    perspective: 800px;
}
.current-card-glow {
    position: absolute;
    inset: -10px;
    border-radius: var(--r-lg);
    background: radial-gradient(circle at 50% 50%, var(--neon-magenta-glow) 0%, transparent 70%);
    animation: cardGlowPulse 2.5s ease-in-out infinite;
    pointer-events: none;
    filter: blur(6px);
}
@keyframes cardGlowPulse {
    0%,100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.9; transform: scale(1.12); }
}

#current-card {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(160deg, #1e0640 0%, #0a0320 100%);
    border: 2px solid var(--neon-magenta);
    box-shadow:
        0 0 0 1px rgba(255,0,144,0.20),
        0 0 30px var(--neon-magenta-dim),
        var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Holographic sheen on card */
#current-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 20%,
        rgba(255,255,255,0.06) 40%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 2;
}
#current-card.new-card {
    animation: dealCard 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes dealCard {
    0%   { transform: scale(0.15) rotate(-25deg) translateY(-40px); opacity: 0; }
    80%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.card-inner {
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--txt-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.card-img, .card-img-large { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-label, .card-label-large { display: none; }

/* ─── HOUSE WIDGET ────────────────────────────────────────────────────────── */
.house-area {
    background: rgba(255,34,68,0.06);
    border: 1px dashed rgba(255,34,68,0.30);
    border-radius: var(--r-md);
    padding: 12px 10px;
    text-align: center;
    margin: 12px 0;
    transition: border-color 0.3s;
}
.house-area:hover { border-color: rgba(255,34,68,0.55); }
.house-area h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #ff6b6b;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.house-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    max-width: 150px;
    margin: 0 auto;
}
.house-mini-card {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    background: #1a0840;
    aspect-ratio: 2/3;
    border: 1px solid rgba(255,255,255,0.07);
}
.house-mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.house-mini-card.marked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,34,68,0.75);
    animation: chipFade 0.3s ease both;
}
@keyframes chipFade {
    from { opacity: 0; transform: scale(1.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── HISTORY ──────────────────────────────────────────────────────────────── */
.recent-cards {
    margin-top: 16px;
    border-top: 1px solid var(--border-glass);
    padding-top: 14px;
}
.recent-cards h4 {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--txt-mute);
    margin-bottom: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}
.history-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.history-item { border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.35); transition: transform 0.15s; }
.history-item:hover { transform: scale(1.18); z-index: 2; }
.history-img {
    width: 28px;
    height: 42px;
    object-fit: cover;
    display: block;
    opacity: 0.72;
    filter: saturate(0.65);
    transition: filter 0.2s, opacity 0.2s;
}
.history-item:hover .history-img { opacity: 1; filter: saturate(1.2); }

/* ─── PLAYER BOARDS AREA ────────────────────────────────────────────────────── */
.player-area {
    background: rgba(14,6,34,0.92);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(22px);
    border-radius: var(--r-xl);
    padding: 24px 22px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: relative;
}
.player-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
    background-size: 200% 100%;
    animation: barFlow 3s linear infinite reverse;
}
.player-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
}
.player-area h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 2px;
    color: var(--neon-green);
    display: flex;
    align-items: center;
    gap: 10px;
}
.player-area h3 i { font-size: 1.4rem; }

/* ─── BOARD 4×4 (CARTILLA) ──────────────────────────────────────────────── */
.boards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.board-wrapper {
    background: rgba(255,255,255,0.02);
    border: 1.5px solid var(--border-glass);
    border-radius: var(--r-lg);
    padding: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
}
.board-wrapper:hover {
    border-color: var(--neon-magenta-dim);
    box-shadow: 0 0 24px var(--neon-magenta-dim);
}
.board-wrapper h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--txt-mute);
    margin-bottom: 12px;
    text-align: center;
}

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

/* Carta en la cartilla — estilo TCG coleccionable */
.board .card {
    aspect-ratio: 2/3;
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(160deg, #1e0840, #0c0320);
    border: 2px solid rgba(255,255,255,0.10);
    transition:
        transform 0.20s cubic-bezier(0.34,1.3,0.64,1),
        box-shadow 0.20s ease,
        border-color 0.20s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.55);
    user-select: none;
}
/* Brillo holográfico sobre la carta */
.board .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.07) 50%,
        transparent 70%
    );
    z-index: 2;
    pointer-events: none;
}
.board .card:hover {
    transform: scale(1.12) translateY(-3px);
    border-color: var(--neon-cyan);
    z-index: 3;
    box-shadow:
        0 10px 25px var(--neon-cyan-dim),
        0 0 0 1px var(--neon-cyan);
}

/* FICHA MARCADA — animación de impacto */
.board .card.marked {
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 16px var(--neon-magenta-dim), 0 0 0 1px var(--neon-magenta);
}
.board .card.marked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 62%; height: 62%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 30%,
        rgba(255,180,220,0.95),
        var(--neon-magenta) 55%,
        #700040 100%
    );
    box-shadow:
        0 0 18px var(--neon-magenta-glow),
        inset 0 4px 8px rgba(255,255,255,0.35),
        inset 0 -4px 8px rgba(0,0,0,0.35);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 3;
    animation: chipImpact 0.40s cubic-bezier(0.175,0.885,0.32,1.275) both;
}

/* ─── MARCADORES PERSONALIZADOS (Frijol / Corcholata / Neón) ───────────── */
/* MARCADOR: FRIJOL */
body.marker-frijol .board .card.marked::after,
.board .card.marked.marker-frijol::after {
    border-radius: 0 !important;
    background: url('img/frijol.png') center/contain no-repeat !important;
    box-shadow: none !important;
    width: 78% !important;
    height: 78% !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.88)) drop-shadow(0 0 6px rgba(255,255,255,0.18)) !important;
}

/* MARCADOR: CORCHOLATA */
body.marker-corcholata .board .card.marked::after,
.board .card.marked.marker-corcholata::after {
    border-radius: 0 !important;
    background: url('img/corcholata.png') center/contain no-repeat !important;
    box-shadow: none !important;
    width: 76% !important;
    height: 76% !important;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.90)) drop-shadow(0 0 8px rgba(0,245,212,0.35)) !important;
}

/* ─── MODAL SELECCIÓN DE MARCADOR ───────────────────────────────────────── */
.marker-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0 16px;
}
.marker-option-card {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid var(--border-glass);
    border-radius: var(--r-lg);
    padding: 18px 10px 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.marker-option-card:hover {
    border-color: var(--neon-cyan);
    transform: translateY(-5px);
    box-shadow: 0 10px 24px var(--neon-cyan-dim);
}
.marker-option-card.selected {
    border-color: var(--neon-gold);
    background: var(--neon-gold-dim);
    box-shadow: 0 0 24px var(--neon-gold-glow), 0 0 0 1.5px var(--neon-gold);
}
.marker-preview-img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.marker-preview-neon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,180,220,0.95), var(--neon-magenta) 55%, #700040 100%);
    box-shadow: 0 0 18px var(--neon-magenta-glow);
}
.marker-option-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--txt-bright);
}
.marker-option-desc {
    font-size: 0.72rem;
    color: var(--txt-dim);
}
@keyframes chipImpact {
    0%   { transform: translate(-50%, -80%) scale(0) rotate(-25deg); opacity: 0; }
    60%  { transform: translate(-50%, -44%) scale(1.15) rotate(3deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.95; }
}

/* Efecto GLITCH en rojo si carta inválida */
.board .card.invalid-mark {
    animation: glitchRed 0.5s ease both;
    border-color: var(--neon-red) !important;
}
@keyframes glitchRed {
    0%   { transform: translate(0); filter: none; box-shadow: 0 0 20px var(--neon-red-glow); }
    10%  { transform: translate(-4px, 1px); filter: hue-rotate(30deg) saturate(2); }
    20%  { transform: translate(4px, -1px); }
    30%  { transform: translate(-3px, 2px); filter: hue-rotate(-30deg); }
    40%  { transform: translate(3px, -1px); }
    50%  { transform: translate(-2px, 1px); filter: none; }
    60%  { transform: translate(2px, 0); }
    70%  { transform: translate(-1px, 1px); }
    80%  { transform: translate(1px, -1px); }
    90%  { transform: translate(-1px, 0); }
    100% { transform: translate(0); box-shadow: none; }
}

/* ─── HOST CONTROLS ────────────────────────────────────────────────────────── */
#host-controls {
    background: var(--neon-cyan-dim);
    border: 1px solid rgba(0,245,212,0.22);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

/* ─── MODALS ───────────────────────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(3,1,12,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 16px;
    animation: modalFadeIn 0.28s ease both;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    background: linear-gradient(165deg, #1a0838 0%, #0c0424 100%);
    border: 1.5px solid var(--border-glass);
    border-radius: var(--r-xl);
    padding: 40px 34px;
    max-width: 500px;
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    animation: modalPop 0.42s cubic-bezier(0.175,0.885,0.32,1.275) both;
    box-shadow:
        0 0 0 1px rgba(255,0,144,0.18),
        0 0 60px var(--neon-magenta-dim),
        var(--shadow-xl);
    overflow: hidden;
}
@keyframes modalPop {
    from { transform: scale(0.78) translateY(24px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Barra top en modal */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--neon-magenta), var(--neon-gold), var(--neon-cyan));
    background-size: 200% 100%;
    animation: barFlow 3s linear infinite;
}

.modal-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: 4px;
    color: var(--txt-bright);
    margin-bottom: 12px;
    text-shadow: 0 0 30px var(--neon-magenta-dim);
}
.modal-content p {
    color: var(--txt-dim);
    font-size: 0.95rem;
    margin-bottom: 18px;
    line-height: 1.65;
}

/* Input de código dentro del modal */
.modal-content input[type="text"] {
    padding: 14px 18px;
    font-size: 2.2rem;
    letter-spacing: 8px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-display);
    margin: 8px 0 22px;
    border-color: var(--neon-cyan);
}

/* ─── WINNER MODAL ─────────────────────────────────────────────────────────── */
#winner-modal .modal-content {
    box-shadow:
        0 0 0 1px rgba(255,215,0,0.30),
        0 0 80px var(--neon-gold-dim),
        0 0 130px rgba(255,0,144,0.15),
        var(--shadow-xl);
}
#winner-modal .modal-content::before {
    background: linear-gradient(90deg,
        var(--neon-gold),
        var(--neon-magenta),
        var(--neon-cyan),
        var(--neon-green),
        var(--neon-gold));
    background-size: 400% 100%;
    animation: rainbowBorder 2.5s linear infinite;
}
@keyframes rainbowBorder {
    0%   { background-position: 0% 0%; }
    100% { background-position: 400% 0%; }
}

.winner-board-title {
    font-size: 0.75rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--txt-mute);
    margin-bottom: 10px;
    font-weight: 700;
}

/* ─── CONFETTI CANVAS ─────────────────────────────────────────────────────── */
#confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
}

/* ─── PANEL STREAMER / OVERLAY HINT ──────────────────────────────────────── */
.streamer-panel {
    background: rgba(10,4,25,0.75);
    border: 1px dashed rgba(0,245,212,0.22);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.streamer-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--neon-cyan), transparent);
    opacity: 0.6;
}
.streamer-panel-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--neon-cyan);
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
}
.streamer-panel-label i { font-size: 0.8rem; }
.streamer-panel-placeholder {
    background: rgba(0,245,212,0.04);
    border-radius: var(--r-sm);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--txt-mute);
    border: 1px dashed rgba(255,255,255,0.07);
}
.streamer-panel-placeholder i { color: var(--neon-cyan); opacity: 0.5; }

/* ─── SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neon-magenta); border-radius: 10px; }

/* ─── RESPONSIVE: TABLET (≤900px) ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .game-area {
        grid-template-columns: 1fr;
    }
    .caller-area {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 22px;
        row-gap: 0;
        align-items: start;
        padding-bottom: 16px;
    }
    .caller-area::before { border-radius: var(--r-xl) var(--r-xl) 0 0; }
    .caller-label, .caller-area h3 { grid-column: 1 / -1; }
    .current-card-wrap { max-width: 130px; }
    .boards-container { grid-template-columns: 1fr; }
}

/* ─── RESPONSIVE: MOBILE (≤600px) ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .container { padding: 0 12px 30px; }

    header { padding: 12px 0 16px; margin-bottom: 18px; }
    header h1 { font-size: 2rem; letter-spacing: 3px; }
    .logo-icon-fa { font-size: 1.8rem; }
    .header-actions button { font-size: 0.80rem; padding: 8px 10px; }
    .streamer-avatar { width: 40px; height: 40px; font-size: 1.1rem; }

    .top-bar { padding: 9px 12px; gap: 5px; }
    .top-bar > div { font-size: 0.76rem; }
    .coin-balance { font-size: 1rem; }
    .badge { font-size: 0.72rem; padding: 3px 10px; }

    .modes-grid { gap: 14px; }
    .mode-card { padding: 28px 20px 22px; }
    .mode-icon-fa { font-size: 2.8rem; }
    .mode-card h3 { font-size: 1.6rem; }

    .caller-area {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 14px 12px;
        border-radius: var(--r-lg);
    }
    .current-card-wrap { max-width: 110px; }
    .current-card-glow { inset: -5px; }

    .player-area { padding: 16px 14px; }
    .player-area h3 { font-size: 1.5rem; }
    .boards-container { grid-template-columns: 1fr; gap: 14px; }
    .board { gap: 5px; }
    .board-wrapper { padding: 10px 9px; }

    .store-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .store-footer { flex-direction: column; text-align: center; }
    .store-footer button { width: 100%; }

    #login-screen { padding: 38px 24px; margin: 28px auto; }
    #login-screen h2 { font-size: 2.2rem; }

    .modal-content { padding: 28px 20px; }
    .modal-content h2 { font-size: 2rem; }
    .modal-content input[type="text"] { font-size: 1.8rem; letter-spacing: 5px; }
    .payment-methods { gap: 8px; }
    .payment-methods button { font-size: 0.88rem; padding: 10px 14px; }
}

/* ─── UTILITY ANIMATIONS ────────────────────────────────────────────────────── */
@keyframes popIn {
    from { transform: scale(0) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shimmerHit {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: scale(2.5); }
}

/* Destello de impacto al marcar (clase inyectada por JS) */
.card-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 70%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    animation: shimmerHit 0.4s ease both;
}