/* =============================================
   PuffCase — minijuegos.css
   Sección de Minijuegos: CoinFlip + Upgrade
   + Panel Admin + Modales
   ============================================= */

/* ── FUENTES ESPECÍFICAS MINIJUEGOS ─────────── */
/* Space Mono para valores numéricos clave */
.cf-card-coins,
.ug-stat-val,
.adm-stat-val,
.hist-pot,
.cf-resultado--ganado,
.cf-resultado--perdido {
    font-family: 'Space Mono', 'Courier New', monospace;
}

/* ── HERO DE MINIJUEGOS ──────────────────────── */
.mj-hero {
    position: relative;
    padding: 44px 24px 40px;
    text-align: center;
    overflow: hidden;
    background: var(--purple-dark);
    border-bottom: 2px solid var(--purple-border);
}
.mj-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 50% -20%, rgba(124,58,237,.5) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 80% 80%,  rgba(240,192,64,.08) 0%, transparent 60%);
    pointer-events: none;
}
.mj-hero-content { position: relative; z-index: 1; }

.mj-hero-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple-glow);
    border: 1px solid rgba(181,123,255,.4);
    padding: 5px 16px;
    border-radius: 20px;
    background: rgba(124,58,237,.12);
    margin-bottom: 16px;
}
.mj-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    line-height: 1.1;
}
.mj-accent {
    color: var(--purple-glow);
    text-shadow: 0 0 30px rgba(181,123,255,.5);
}
.mj-hero-sub {
    color: var(--gray-light);
    font-size: 1rem;
    margin-bottom: 0;
}

/* ── BARRA DE TABS STICKY ──────────────────────── */
.mj-tabs-bar {
    position: sticky;
    top: var(--header-h); /* 68px — debajo del header */
    z-index: 190;
    background: rgba(10, 7, 22, 0.96);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid rgba(124,58,237,0.22);
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
}

.mj-tabs {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.mj-tabs::-webkit-scrollbar { display: none; }

.mj-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 22px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gray-mid);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.mj-tab:hover { color: var(--gray-light); }
.mj-tab--active {
    color: var(--white);
    border-bottom-color: var(--purple-accent);
}
.mj-tab--admin { color: var(--gold-dark); }
.mj-tab--admin.mj-tab--active { border-bottom-color: var(--gold); color: var(--gold); }
.mj-tab-icon { font-size: 1rem; line-height: 1; }
.mj-tab-off {
    font-size: 0.58rem;
    background: #f44336;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* ── PANELES ───────────────────────────────────── */
.mj-panel {
    padding: 40px 24px 60px;
    max-width: 1300px;
    margin: 0 auto;
}
.mj-panel--hidden { display: none !important; }

.mj-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}
.mj-layout--single {
    grid-template-columns: 1fr;
}

/* ── SECCIÓN HEADER ────────────────────────────── */
.mj-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mj-section-header h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
}
.mj-refresh-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--purple-border);
    color: var(--gray-light);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 1rem;
    transition: all .2s;
    font-family: inherit;
}
.mj-refresh-btn:hover { background: rgba(124,58,237,.2); color: var(--white); }

/* ── CARDS GENÉRICAS ───────────────────────────── */
.mj-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.mj-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid var(--purple-border);
}
.mj-card-header h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    flex: 1;
}
.mj-card-icon { font-size: 1.1rem; }
.mj-card-body { padding: 20px; }

/* ── FORMULARIOS ───────────────────────────────── */
.mj-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-light);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.mj-input {
    width: 100%;
    background: var(--purple-deep);
    border: 1px solid var(--gray-dark);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--white);
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.mj-input:focus {
    border-color: var(--purple-accent);
    box-shadow: 0 0 0 2px rgba(124,58,237,.2);
}
.mj-input--sm { padding: 6px 10px; font-size: 0.82rem; }
.mj-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.mj-input-row .mj-input { flex: 1; }

/* ── BOTONES ───────────────────────────────────── */
.mj-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    transition: all .2s;
    text-align: center;
    text-decoration: none;
    width: 100%;
    margin-top: 14px;
}
.mj-btn--primary {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff;
}
.mj-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--purple-bright), #c090ff);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
.mj-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.mj-btn--danger {
    background: rgba(244,67,54,.15);
    border: 1px solid rgba(244,67,54,.4);
    color: #f44336;
}
.mj-btn--danger:hover { background: rgba(244,67,54,.3); }
.mj-btn--bot {
    background: rgba(138,43,226,.15);
    border: 1px solid rgba(138,43,226,.45);
    color: #b97fff;
}
.mj-btn--bot:hover { background: rgba(138,43,226,.3); }
.mj-btn--bot:disabled { opacity: .5; cursor: not-allowed; }
.cf-card-actions-owner {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mj-btn--join {
    background: linear-gradient(135deg, #1a5a30, #2a8050);
    color: #fff;
}
.mj-btn--join:hover { background: linear-gradient(135deg, #2a8050, #3aaa70); }
.mj-btn--steam {
    background: linear-gradient(135deg, #1b2838, #2a475e);
    color: #fff;
    border: 1px solid #4c6b8a;
}
.mj-btn--steam:hover { background: linear-gradient(135deg, #2a3f55, #3a6080); }

.mj-btn-xs {
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--purple-border);
    background: var(--purple-mid);
    color: var(--gray-light);
    transition: all .2s;
    white-space: nowrap;
}
.mj-btn-xs:hover { background: var(--purple-soft); color: var(--white); }
.mj-btn-xs--save {
    background: rgba(76,175,125,.15);
    border-color: rgba(76,175,125,.4);
    color: #4caf7d;
}
.mj-btn-xs--save:hover { background: rgba(76,175,125,.3); }
.mj-btn-xs--danger {
    background: rgba(244,67,54,.15);
    border-color: rgba(244,67,54,.4);
    color: #f44336;
}
.mj-btn-xs--danger:hover { background: rgba(244,67,54,.3); }

/* ── MENSAJES ──────────────────────────────────── */
.mj-msg { font-size: 0.78rem; margin-top: 8px; min-height: 18px; }
.mj-msg--ok  { color: #4caf7d; }
.mj-msg--err { color: #f44336; }

/* ── EMPTY STATES ──────────────────────────────── */
.mj-empty {
    text-align: center;
    color: var(--gray-mid);
    font-size: 0.85rem;
    padding: 20px;
}
.mj-empty--big {
    padding: 60px 20px;
    font-size: 1rem;
    color: var(--gray-mid);
}
.mj-empty--big span {
    display: block;
    font-size: 0.82rem;
    margin-top: 6px;
    color: var(--gray-dark);
}

/* ── BANNER DESHABILITADO ──────────────────────── */
.mj-disabled-banner {
    background: rgba(244,67,54,.1);
    border: 1px solid rgba(244,67,54,.35);
    color: #f44336;
    padding: 12px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 28px;
}

/* ── MINI LISTA (mis partidas) ─────────────────── */
.mj-mini-lista { display: flex; flex-direction: column; gap: 8px; }
.mj-mini-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--gray-light);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.mj-mini-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.mj-mini-badge--pendiente { background: rgba(240,192,64,.2);  color: var(--gold); }
.mj-mini-badge--finalizada{ background: rgba(76,175,125,.2); color: #4caf7d; }
.mj-mini-badge--cancelada  { background: rgba(100,100,100,.2); color: var(--gray-mid); }
.mj-mini-ok  { color: #4caf7d; margin-left: auto; font-weight: 700; }
.mj-mini-err { color: #f44336; margin-left: auto; font-weight: 700; }

/* ── COINFLIP: SELECTOR DE LADO ─────────────────── */
.cf-side-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}
.cf-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--purple-deep);
    border: 2px solid var(--gray-dark);
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-mid);
    font-family: 'Rajdhani', sans-serif;
}
.cf-side-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: grayscale(.6);
    transition: filter .2s;
}
.cf-side--active.cf-side--ct {
    border-color: #3a8fb5;
    background: rgba(58,143,181,.12);
    color: #7ad4f5;
}
.cf-side--active.cf-side--ct .cf-side-img { filter: none; }
.cf-side--active.cf-side--tt {
    border-color: #c4a000;
    background: rgba(196,160,0,.12);
    color: #f0c040;
}
.cf-side--active.cf-side--tt .cf-side-img { filter: none; }
.cf-side:not(.cf-side--active):hover { border-color: var(--purple-border); color: var(--gray-light); }

/* ── COINFLIP: LISTA DE PARTIDAS ─────────────────── */
.cf-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cf-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    transition: border-color .2s, transform .2s;
}
.cf-card:hover {
    border-color: var(--purple-accent);
    transform: translateX(2px);
}
.cf-card-user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cf-card-avatar {
    width: 36px; height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--purple-border);
    flex-shrink: 0;
}
.cf-card-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--white);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-card-fecha { font-size: 0.7rem; color: var(--gray-mid); margin-top: 2px; }

.cf-card-vs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cf-card-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
}
.cf-card-lado-img { width: 28px; height: 28px; object-fit: contain; }
.cf-card-lado--ct  { color: #7ad4f5; }
.cf-card-lado--tt  { color: #f0c040; }
.cf-card-lado--op  { opacity: .45; }

.cf-card-pot { text-align: center; }
.cf-card-coins {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
}
.cf-card-coins-label { font-size: 0.65rem; color: var(--gray-mid); }

.cf-card-actions { flex-shrink: 0; }
.cf-card-actions .mj-btn { width: auto; margin-top: 0; padding: 8px 16px; font-size: 0.82rem; }

/* ── TABLA HISTORIAL ───────────────────────────── */
.cf-historial-tabla { overflow-x: auto; }
.mj-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.mj-tabla thead th {
    text-align: left;
    padding: 10px 14px;
    color: var(--gray-mid);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--purple-border);
}
.mj-tabla tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--gray-light);
    vertical-align: middle;
}
.mj-tabla tbody tr:hover td { background: rgba(255,255,255,.02); }
.hist-row--win td { background: rgba(76,175,125,.05); }

.hist-jugadores { display: flex; align-items: center; gap: 6px; }
.hist-avatar { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.hist-resultado-img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.hist-resultado-label { font-weight: 700; vertical-align: middle; }
.hist-pot { font-weight: 700; color: var(--gold); }
.hist-ganador { color: var(--white); font-weight: 600; }
.hist-fecha { color: var(--gray-mid); }

/* ── HISTORIAL COINFLIP: celda ganador destacada ── */
.hist-ganador-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hist-ganador-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #4caf7d;
    flex-shrink: 0;
}
.hist-ganador-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hist-ganador-nombre {
    font-weight: 700;
    font-size: 0.88rem;
    color: #4caf7d;
    line-height: 1.2;
}
.hist-ganador-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(76,175,125,0.7);
}
.hist-ganador-trophy {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Bote del historial más visible */
.hist-pot-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hist-pot-valor {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gold);
}
.hist-pot-label {
    font-size: 0.68rem;
    color: var(--gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mj-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.mj-badge--ganado {
    background: rgba(76,175,125,.2);
    border: 1px solid rgba(76,175,125,.45);
    color: #4caf7d;
    box-shadow: 0 0 8px rgba(76,175,125,.15);
}
.mj-badge--perdido {
    background: rgba(244,67,54,.15);
    border: 1px solid rgba(244,67,54,.35);
    color: #f44336;
}

/* ── UPGRADE: INTRO ────────────────────────────── */
.ug-intro {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 32px;
}
.ug-intro-icon { font-size: 2.5rem; flex-shrink: 0; }
.ug-intro h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    margin-bottom: 6px;
}
.ug-intro p { color: var(--gray-light); font-size: 0.9rem; }

/* ── UPGRADE: CONTENEDOR PRINCIPAL ───────────── */
#ug-eventos-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── UPGRADE: GRID DE EVENTOS ─────────────────── */
.ug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}
.ug-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
}
.ug-card:not(.ug-card--agotado):hover {
    transform: translateY(-4px);
    border-color: var(--purple-accent);
    box-shadow: 0 12px 40px rgba(124,58,237,.3);
}
.ug-card--agotado { opacity: .65; }
.ug-card--admin {
    border-color: rgba(240,192,64,.2);
}

.ug-card-img {
    position: relative;
    width: 100%;
    padding-top: 52%;
    background: var(--purple-mid);
    overflow: hidden;
}
.ug-skin-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform .3s;
}
.ug-card:hover .ug-skin-img { transform: scale(1.04); }
.ug-skin-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.ug-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.ug-card-nombre {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}
.ug-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.ug-stat { text-align: center; }
.ug-stat-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
}
.ug-stat-label {
    font-size: 0.65rem;
    color: var(--gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* Barra de probabilidad */
.ug-prob-bar {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
}
.ug-prob-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf7d, #7dff9d);
    border-radius: 3px;
    transition: width .6s ease;
}

.ug-ganado-info {
    font-size: 0.78rem;
    color: var(--gold);
    text-align: center;
    padding: 10px;
    background: rgba(240,192,64,.08);
    border-radius: 8px;
    border: 1px solid rgba(240,192,64,.25);
}

.ug-card-body .mj-btn { margin-top: auto; }

.adm-ug-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

/* ── MODAL COINFLIP ────────────────────────────── */
.cf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* Variante para coinflip: columna (stage arriba, card abajo) */
.cf-modal--flip {
    flex-direction: column;
    gap: 0;
    padding: 0;
}
.cf-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(10px);
}
.cf-modal-box {
    position: relative;
    z-index: 1;
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    animation: modal-in .25s ease;
}
.cf-modal-box--upgrade { max-width: 480px; }
@keyframes modal-in {
    from { opacity: 0; transform: scale(.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   COINFLIP ANIMATION v5
   Escena separada del card — moneda 200px en el centro del overlay
   ══════════════════════════════════════════════════════════════ */

/* Flash de color que cubre toda la pantalla en el reveal */
.cf-flash-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}
@keyframes cf-flash-g {
    0%   { opacity: 0; }
    8%   { opacity: 1; background: radial-gradient(circle at 50% 42%,rgba(56,220,120,.22),transparent 62%); }
    100% { opacity: 0; }
}
@keyframes cf-flash-r {
    0%   { opacity: 0; }
    8%   { opacity: 1; background: radial-gradient(circle at 50% 42%,rgba(244,60,50,.22),transparent 62%); }
    100% { opacity: 0; }
}
.cf-flash-overlay--g { animation: cf-flash-g .75s ease forwards; }
.cf-flash-overlay--r { animation: cf-flash-r .75s ease forwards; }

/* Escena de la moneda — contenedor de perspectiva, sin fondo */
.cf-coin-stage {
    position: relative;
    width: 300px;
    height: 340px;
    perspective: 460px;
    overflow: visible;
    flex-shrink: 0;
    z-index: 1;
}

/* ── Speed lines: rayas radiales que llenan la escena ────────── */
.cf-speed-lines {
    position: absolute;
    top: 50%; left: 50%;
    width: 520px; height: 520px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: repeating-conic-gradient(
        rgba(255,255,255,.055) 0deg 2deg,
        transparent 2deg 18deg
    );
    opacity: 0;
    will-change: transform, opacity;
}
@keyframes cf-speed-lines-spin {
    0%   { transform: translate(-50%,-50%) rotate(0deg);    opacity: 0; }
    10%  { opacity: 1; }
    62%  { opacity: .7;  transform: translate(-50%,-50%) rotate(2160deg); }
    80%  { opacity: 0;   transform: translate(-50%,-50%) rotate(2880deg); }
    100% { opacity: 0;   transform: translate(-50%,-50%) rotate(3240deg); }
}

/* ── Halo anular durante el giro ─────────────────────────────── */
.cf-spin-haze {
    position: absolute;
    top: 50%; left: 50%;
    width: 340px; height: 340px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        transparent 38%,
        rgba(140,210,255,.24) 55%,
        rgba(80,140,255,.1)  72%,
        transparent 84%
    );
    opacity: 0;
    will-change: transform, opacity;
}
@keyframes cf-spin-haze-anim {
    0%   { transform: translate(-50%,-50%) scale(.65); opacity: 0; }
    12%  { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
    42%  { transform: translate(-50%,-50%) scale(1.1); opacity: .95; }
    72%  { transform: translate(-50%,-50%) scale(1);   opacity: .25; }
    84%  { transform: translate(-50%,-50%) scale(.9);  opacity: 0; }
    100% { opacity: 0; }
}

/* ── Moneda 3D ───────────────────────────────────────────────── */
.cf-coin-inner {
    position: absolute;
    bottom: 28px;
    left: 50px;       /* (300-200)/2 */
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Caras — SIN filter (rompe GPU-compositing en preserve-3d) */
.cf-coin-face {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: contain;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: transparent;
    will-change: transform;
}
.cf-coin-face--back { transform: rotateY(180deg); }

/* ── Destello en la cima — dentro del inner, sube con la moneda */
.cf-apex-flash {
    position: absolute;
    inset: -55px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(255,255,255,1)    0%,
        rgba(255,240,100,.92) 10%,
        rgba(255,160,20,.55)  30%,
        transparent 56%
    );
    transform: scale(0);
    opacity: 0;
    will-change: transform, opacity;
}
@keyframes cf-apex-burst {
    0%   { transform: scale(.04); opacity: 1; }
    18%  { transform: scale(.65); opacity: 1; }
    55%  { transform: scale(1.9); opacity: .65; }
    100% { transform: scale(3.2); opacity: 0; }
}
.cf-apex-flash--go { animation: cf-apex-burst .4s cubic-bezier(.04,.9,.2,1) forwards; }

/* ── Glow win/lose — posicionado igual que coin-inner ────────── */
.cf-coin-glow {
    position: absolute;
    bottom: 28px; left: 50px;
    width: 200px; height: 200px;
    border-radius: 50%;
    pointer-events: none;
}
@keyframes cf-glow-ganado {
    0%   { box-shadow: 0 0 0px 0px    rgba(56,220,120,0); }
    30%  { box-shadow: 0 0 80px 32px  rgba(56,220,120,1); }
    100% { box-shadow: 0 0 44px 14px  rgba(56,220,120,.7); }
}
@keyframes cf-glow-perdido {
    0%   { box-shadow: 0 0 0px 0px    rgba(244,60,50,0); }
    30%  { box-shadow: 0 0 80px 32px  rgba(244,60,50,1); }
    100% { box-shadow: 0 0 44px 14px  rgba(244,60,50,.7); }
}
.cf-coin-inner.cf-coin-ganado ~ .cf-coin-glow  { animation: cf-glow-ganado .65s ease forwards; }
.cf-coin-inner.cf-coin-perdido ~ .cf-coin-glow { animation: cf-glow-perdido .65s ease forwards; }

/* ── Sombra en el suelo ──────────────────────────────────────── */
.cf-coin-shadow {
    position: absolute;
    bottom: 8px; left: 50%;
    width: 115px; height: 16px;
    transform: translateX(-50%) scaleX(0);
    background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
@keyframes cf-shadow-anim {
    0%  { transform: translateX(-50%) scaleX(0);    opacity: 0; }
    7%  { transform: translateX(-50%) scaleX(.5);   opacity: .32; }
    42% { transform: translateX(-50%) scaleX(.18);  opacity: .08; }
    80% { transform: translateX(-50%) scaleX(.62);  opacity: .42; }
    87% { transform: translateX(-50%) scaleX(1.48); opacity: .92; }
    93% { transform: translateX(-50%) scaleX(.78);  opacity: .48; }
    97% { transform: translateX(-50%) scaleX(1.12); opacity: .62; }
    100%{ transform: translateX(-50%) scaleX(1);    opacity: .55; }
}

/* ── Card de resultado (aparece desde abajo) ─────────────────── */
.cf-result-card {
    position: relative;
    z-index: 1;
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 24px 32px 28px;
    text-align: center;
    max-width: 340px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 70px rgba(0,0,0,.7);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: none;
}
.cf-result-card--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.2,.64,1);
}

/* ── Activadores stage-level ─────────────────────────────────── */
.cf-coin-stage.cf-lanzando-ct .cf-speed-lines,
.cf-coin-stage.cf-lanzando-tt .cf-speed-lines {
    animation: cf-speed-lines-spin 2.8s ease-out forwards;
}
.cf-coin-stage.cf-lanzando-ct .cf-spin-haze,
.cf-coin-stage.cf-lanzando-tt .cf-spin-haze {
    animation: cf-spin-haze-anim 2.8s ease-out forwards;
}
.cf-coin-stage.cf-lanzando-ct .cf-coin-shadow,
.cf-coin-stage.cf-lanzando-tt .cf-coin-shadow {
    animation: cf-shadow-anim 2.8s ease-out forwards;
}

/* ── Keyframes de la moneda (CT y TT)
   Coin 200px — stage 300×340 — perspectiva 460px
   rotateZ sutil (máx ±2.5°) para wobble natural                */
@keyframes cf-lanzamiento-ct {
    0%  { transform: translateY(0)      rotateY(-12deg) rotateZ(0deg)    scale(1);
          animation-timing-function: cubic-bezier(.6,.05,.7,.45); }
    7%  { transform: translateY(15px)   rotateY(-38deg) rotateZ(-1.5deg) scale(.91);
          animation-timing-function: cubic-bezier(.06,0,.1,1); }

    18% { transform: translateY(-85px)  rotateY(648deg)  rotateZ(.2deg)  scale(1.06); }
    32% { transform: translateY(-155px) rotateY(1944deg) rotateZ(0deg)   scale(1.09); }
    42% { transform: translateY(-172px) rotateY(2664deg) rotateZ(0deg)   scale(1.1);
          animation-timing-function: cubic-bezier(.45,0,.75,1); }

    56% { transform: translateY(-100px) rotateY(3168deg) rotateZ(0deg)   scale(1.04); }
    64% { transform: translateY(-42px)  rotateY(3420deg) rotateZ(2.5deg) scale(1.01); }
    71% { transform: translateY(-16px)  rotateY(3492deg) rotateZ(-1.5deg) scale(1.0); }
    78% { transform: translateY(-5px)   rotateY(3546deg) rotateZ(.5deg)  scale(1.0);
          animation-timing-function: cubic-bezier(.18,0,.35,1); }

    /* IMPACTO CT — 3600° = cara frontal */
    85% { transform: translateY(0)      rotateY(3600deg) rotateZ(0deg) scaleY(.58) scaleX(1.36); }

    91% { transform: translateY(-22px)  rotateY(3600deg) rotateZ(0deg)   scale(1.08);
          animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
    96% { transform: translateY(0)      rotateY(3600deg) rotateZ(0deg) scaleY(.93) scaleX(1.06); }
    100%{ transform: translateY(0)      rotateY(3600deg) rotateZ(0deg)   scale(1); }
}

@keyframes cf-lanzamiento-tt {
    0%  { transform: translateY(0)      rotateY(-12deg) rotateZ(0deg)    scale(1);
          animation-timing-function: cubic-bezier(.6,.05,.7,.45); }
    7%  { transform: translateY(15px)   rotateY(-38deg) rotateZ(-1.5deg) scale(.91);
          animation-timing-function: cubic-bezier(.06,0,.1,1); }
    18% { transform: translateY(-85px)  rotateY(648deg)  rotateZ(.2deg)  scale(1.06); }
    32% { transform: translateY(-155px) rotateY(1944deg) rotateZ(0deg)   scale(1.09); }
    42% { transform: translateY(-172px) rotateY(2664deg) rotateZ(0deg)   scale(1.1);
          animation-timing-function: cubic-bezier(.45,0,.75,1); }
    56% { transform: translateY(-100px) rotateY(3168deg) rotateZ(0deg)   scale(1.04); }
    64% { transform: translateY(-42px)  rotateY(3420deg) rotateZ(2.5deg) scale(1.01); }
    71% { transform: translateY(-16px)  rotateY(3492deg) rotateZ(-1.5deg) scale(1.0); }
    78% { transform: translateY(-5px)   rotateY(3546deg) rotateZ(.5deg)  scale(1.0);
          animation-timing-function: cubic-bezier(.18,0,.35,1); }

    /* IMPACTO TT — 3780° = cara trasera */
    85% { transform: translateY(0)      rotateY(3780deg) rotateZ(0deg) scaleY(.58) scaleX(1.36); }

    91% { transform: translateY(-22px)  rotateY(3780deg) rotateZ(0deg)   scale(1.08);
          animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
    96% { transform: translateY(0)      rotateY(3780deg) rotateZ(0deg) scaleY(.93) scaleX(1.06); }
    100%{ transform: translateY(0)      rotateY(3780deg) rotateZ(0deg)   scale(1); }
}

.cf-coin-stage.cf-lanzando-ct .cf-coin-inner { animation: cf-lanzamiento-ct 2.8s linear forwards; }
.cf-coin-stage.cf-lanzando-tt .cf-coin-inner { animation: cf-lanzamiento-tt 2.8s linear forwards; }

/* ── Flash de color en el modal al impactar ──────────────────── */
@keyframes cf-box-flash-g {
    0%   { box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 0 0 rgba(56,220,120,0); }
    18%  { box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 80px 12px rgba(56,220,120,.28); }
    100% { box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 0 0 rgba(56,220,120,0); }
}
@keyframes cf-box-flash-r {
    0%   { box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 0 0 rgba(244,60,50,0); }
    18%  { box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 80px 12px rgba(244,60,50,.28); }
    100% { box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 0 0 rgba(244,60,50,0); }
}
.cf-modal-box--flash-g { animation: cf-box-flash-g .65s ease forwards; }
.cf-modal-box--flash-r { animation: cf-box-flash-r .65s ease forwards; }

/* ── Texto del resultado ─────────────────────────────────────── */
@keyframes cf-resultado-in {
    from { opacity: 0; transform: translateY(20px) scale(.82); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cf-modal-resultado--visible {
    animation: cf-resultado-in .45s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Shake del stage (pérdida) ───────────────────────────────── */
@keyframes cf-shake-stage {
    0%,100% { transform: translateX(0) rotate(0); }
    15%     { transform: translateX(-8px) rotate(-.4deg); }
    30%     { transform: translateX(8px)  rotate(.4deg); }
    45%     { transform: translateX(-5px) rotate(-.2deg); }
    60%     { transform: translateX(5px)  rotate(.2deg); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(3px); }
}
/* ── Shake del modal al perder ───────────────────────────────── */
@keyframes cf-shake {
    0%,100% { transform: translateX(0) rotate(0); }
    14%     { transform: translateX(-10px) rotate(-.5deg); }
    28%     { transform: translateX(10px)  rotate(.5deg); }
    42%     { transform: translateX(-7px)  rotate(-.3deg); }
    57%     { transform: translateX(7px)   rotate(.3deg); }
    71%     { transform: translateX(-4px); }
    85%     { transform: translateX(4px); }
}
.cf-modal-box--shake { animation: cf-shake .52s ease; }

/* ── Confetti al ganar — trayectorias via CSS custom props ───── */
@keyframes cf-particle {
    0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(0.3); opacity: 0; }
}
.cf-confetti {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 2px;
    pointer-events: none;
    animation: cf-particle var(--dur,.9s) ease var(--delay,0s) forwards;
}

/* ── MODAL UPGRADE — BARRA DE PROGRESO ──────────── */

/* Contenedor de la barra (relativo para las partículas) */
.ug-bar-wrap {
    position: relative;
    height: 60px;
    margin-bottom: 24px;
    overflow: visible;
}

/* Track de la barra (fondo dividido: verde|rojo según prob) */
.ug-bar-track {
    position: absolute;
    bottom: 8px;
    left: 0; right: 0;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    /* El color del track se establece inline desde PHP/JS */
    background: rgba(255,255,255,.08);
}

/* Relleno animado que "sube" hasta el roll */
.ug-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    background: linear-gradient(90deg, #4caf7d, #7dff9d);
    box-shadow: 0 0 12px rgba(76,175,125,.6);
    position: relative;
    /* La transición se aplica via JS */
}

/* Cursor vertical (aguja) que sigue al relleno */
.ug-bar-cursor {
    position: absolute;
    bottom: 2px;
    left: 0%;
    width: 4px;
    height: 36px;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255,255,255,.9);
    transform: translateX(-2px);
}

/* Línea de umbral (probabilidad de ganar) */
.ug-bar-threshold {
    position: absolute;
    bottom: 2px;
    width: 3px;
    height: 36px;
    background: rgba(255,255,255,.35);
    border-radius: 2px;
    transform: translateX(-1.5px);
}
.ug-bar-threshold-label {
    position: absolute;
    bottom: 40px;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
}

/* ── Efecto GANADO: brillo verde que sube ──────── */
@keyframes bar-win-pulse {
    0%   { box-shadow: 0 0 12px rgba(76,175,125,.6); }
    50%  { box-shadow: 0 0 40px rgba(76,175,125,1), 0 -10px 40px rgba(76,175,125,.8); }
    100% { box-shadow: 0 0 20px rgba(76,175,125,.8); }
}
.ug-bar--win .ug-bar-fill {
    animation: bar-win-pulse .6s ease 3;
}
.ug-bar--win .ug-bar-track {
    border: 1px solid rgba(76,175,125,.6);
}

/* ── Efecto PERDIDO: explosión roja ────────────── */
@keyframes bar-explode {
    0%   { transform: scaleX(1) scaleY(1); opacity: 1; }
    40%  { transform: scaleX(1.04) scaleY(1.3); opacity: 1;
           box-shadow: 0 0 30px rgba(244,67,54,1); }
    60%  { transform: scaleX(0.96) scaleY(0.7); opacity: .8; }
    80%  { transform: scaleX(1.02) scaleY(1.1); opacity: .6; }
    100% { transform: scaleX(1) scaleY(1); opacity: 0; }
}
.ug-bar--explode .ug-bar-fill {
    background: linear-gradient(90deg, #f44336, #ff7043);
    box-shadow: 0 0 20px rgba(244,67,54,.8);
    animation: bar-explode .7s ease forwards;
}
.ug-bar--explode .ug-bar-cursor {
    background: #f44336;
    box-shadow: 0 0 16px rgba(244,67,54,1);
    animation: bar-explode .7s ease forwards;
}

/* ── Partículas de explosión ───────────────────── */
.ug-particula {
    position: absolute;
    bottom: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: particula-fly .7s ease forwards;
}
@keyframes particula-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Título del modal de upgrade */
.ug-bar-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-light);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

/* ── ADMIN: STATS ──────────────────────────────── */
.adm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.adm-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.adm-stat-card--gold { border-color: rgba(240,192,64,.3); }
.adm-stat-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}
.adm-stat-card--gold .adm-stat-val { color: var(--gold); }
.adm-stat-label { font-size: 0.72rem; color: var(--gray-mid); text-transform: uppercase; letter-spacing: 0.5px; }

.adm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Configuración */
.adm-cfg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 0.85rem;
    color: var(--gray-light);
    gap: 12px;
}

/* Toggle switch */
.mj-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.mj-toggle input { opacity: 0; width: 0; height: 0; }
.mj-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-dark);
    border-radius: 22px;
    cursor: pointer;
    transition: .3s;
}
.mj-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: .3s;
}
.mj-toggle input:checked + .mj-toggle-slider { background: var(--purple-accent); }
.mj-toggle input:checked + .mj-toggle-slider::before { transform: translateX(18px); }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 1100px) {
    .mj-layout { grid-template-columns: 260px 1fr; }
}
@media (max-width: 900px) {
    .mj-layout { grid-template-columns: 1fr; }
    .mj-sidebar { display: contents; } /* los hijos van en flujo normal */
    .adm-grid { grid-template-columns: 1fr; }
    .adm-ug-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .mj-tabs { gap: 0; }
    .mj-tab { padding: 10px 16px; font-size: 0.88rem; }
    .cf-card { grid-template-columns: 1fr; gap: 12px; }
    .cf-card-vs { justify-content: center; }
    .cf-card-actions .mj-btn { width: 100%; }
    .ug-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 480px) {
    .mj-panel { padding: 24px 14px 40px; }
    .ug-grid { grid-template-columns: 1fr 1fr; }
    .ug-card-stats { grid-template-columns: 1fr 1fr 1fr; }
    .adm-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   PuffCase — Jackpot CSS
   Añadir al final de minijuegos.css
   ============================================= */

/* ── JACKPOT: PANEL PRINCIPAL ─────────────────── */

/* ══════════════════════════════════════════════
   JACKPOT — Coin Rain Pot Animation
   Sustituye toda la sección jp-* de minijuegos.css
   ══════════════════════════════════════════════ */

/* ── LAYOUT ─────────────────────────────────── */
.jp-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── BOTE CARD (arena de monedas) ───────────── */
.jp-pot-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative; /* necesario para monedas absolutas */
    transition: border-color .3s, box-shadow .3s;
}
.jp-pot-card--active {
    border-color: rgba(240,192,64,.5);
    box-shadow: 0 0 30px rgba(240,192,64,.12);
}
.jp-pot-card--spinning {
    animation: jp-pot-blink .8s ease infinite;
}
@keyframes jp-pot-blink {
    0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,.3); }
    50%       { box-shadow: 0 0 40px rgba(240,192,64,.6); }
}

/* Header */
.jp-pot-header {
    background: linear-gradient(135deg, rgba(240,192,64,.12), rgba(124,58,237,.1));
    border-bottom: 1px solid var(--purple-border);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.jp-pot-header h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    flex: 1;
}
.jp-pot-icon { font-size: 1.4rem; }

.jp-fee-badge-inline {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f44336;
    background: rgba(244,67,54,.1);
    border: 1px solid rgba(244,67,54,.25);
    padding: 3px 8px;
    border-radius: 6px;
}

/* ── CALDERO SVG ────────────────────────────── */
.jp-cauldron-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 24px auto 8px;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.jp-cauldron-wrap.jp-cauldron--bump {
    animation: jp-cauldron-bump .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes jp-cauldron-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12) translateY(-6px); }
    70%  { transform: scale(1.06) translateY(-2px); }
    100% { transform: scale(1); }
}
.jp-cauldron-glow {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,192,64,.15) 0%, transparent 70%);
    animation: jp-glow-pulse 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes jp-glow-pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.1); }
}
.jp-cauldron-svg {
    width: 100%;
    height: 100%;
}

/* ── VALOR DEL BOTE ─────────────────────────── */
.jp-pot-value-wrap {
    padding: 8px 22px 16px;
    text-align: center;
}
.jp-pot-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray-mid);
    margin-bottom: 6px;
}
.jp-pot-value {
    font-family: 'Space Mono', monospace;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(240,192,64,.5);
    line-height: 1;
    transition: all .3s;
}
.jp-pot-pc {
    font-size: 0.85rem;
    color: var(--gold-dark);
    margin-top: 4px;
}

/* ── BARRA JUGADORES ─────────────────────────── */
.jp-players-bar { padding: 0 22px 16px; }
.jp-players-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--gray-mid);
    margin-bottom: 8px;
}
.jp-players-track {
    height: 8px;
    background: rgba(255,255,255,.07);
    border-radius: 4px;
    overflow: hidden;
}
.jp-players-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--purple-accent), var(--gold));
    transition: width .5s ease;
}

/* ── TIMER ──────────────────────────────────── */
.jp-timer-wrap { padding: 10px 22px 18px; text-align: center; }
.jp-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(240,192,64,.08);
    border: 1px solid rgba(240,192,64,.25);
    border-radius: 12px;
    padding: 10px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
}
.jp-timer--urgente {
    background: rgba(244,67,54,.12);
    border-color: rgba(244,67,54,.4);
    color: #f44336;
    animation: jp-urgente-pulse 1s infinite;
}
@keyframes jp-urgente-pulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 20px rgba(244,67,54,.4); }
}
.jp-timer-label {
    font-size: 0.75rem;
    color: var(--gray-mid);
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
}
.jp-waiting-msg {
    font-size: 0.82rem;
    color: var(--gray-mid);
    padding: 8px 22px 18px;
    text-align: center;
    line-height: 1.5;
}

/* ── FORMULARIO ENTRADA ─────────────────────── */
.jp-enter-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.jp-enter-body { padding: 20px; }
.jp-enter-info {
    font-size: 0.78rem;
    color: var(--gray-mid);
    margin-bottom: 14px;
    line-height: 1.5;
}
.jp-enter-fee {
    display: inline-block;
    background: rgba(244,67,54,.1);
    border: 1px solid rgba(244,67,54,.25);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #f44336;
    margin-left: 4px;
}
.jp-limits-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.jp-limit-chip {
    flex: 1;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--purple-border);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
}
.jp-limit-val {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
    display: block;
}
.jp-limit-lbl {
    font-size: 0.62rem;
    color: var(--gray-mid);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.jp-mi-entrada {
    background: rgba(124,58,237,.1);
    border: 1px solid rgba(124,58,237,.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 14px;
    font-size: 0.82rem;
}
.jp-mi-entrada-titulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--purple-glow);
    font-weight: 700;
    margin-bottom: 6px;
}
.jp-mi-entrada-valor {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}
.jp-mi-pct {
    color: var(--purple-glow);
    font-size: 0.82rem;
    margin-top: 3px;
}

/* ── CAPA DE MONEDAS ────────────────────────── */
.jp-coin-rain-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
    border-radius: 20px;
}

/* Moneda individual */
.jp-coin {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.3);
    animation: jp-coin-fall var(--duration, 1.2s) var(--delay, 0s) cubic-bezier(.25,.46,.45,.94) forwards;
    will-change: transform, opacity;
}
@keyframes jp-coin-fall {
    0%   { transform: translateY(0) rotate(0deg) scale(1);                       opacity: 1; }
    70%  { transform: translateY(var(--end-y, 250px)) rotate(var(--spin, 400deg)) scale(.8); opacity: .9; }
    100% { transform: translateY(var(--end-y, 250px)) rotate(var(--spin, 720deg)) scale(0);  opacity: 0; }
}
.jp-coin--gold {
    background: radial-gradient(circle at 35% 35%, #ffe066, #f0c040 50%, #b8860b);
    color: #7a5000;
    border: 1.5px solid #d4a010;
}
.jp-coin--purple {
    background: radial-gradient(circle at 35% 35%, #c090ff, #7c3aed 50%, #4a1d96);
    color: #e0ccff;
    border: 1.5px solid #9c6bef;
}
.jp-coin--silver {
    background: radial-gradient(circle at 35% 35%, #e0e0e0, #a0a0a0 50%, #606060);
    color: #333;
    border: 1.5px solid #888;
}
.jp-coin::after {
    content: '';
    position: absolute;
    top: 4px; left: 5px;
    width: 9px; height: 5px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    transform: rotate(-30deg);
}

/* Avatar flotante cuando entra jugador */
.jp-avatar-fly {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(13,10,26,.88);
    border: 1px solid var(--purple-border);
    border-radius: 28px;
    padding: 4px 12px 4px 4px;
    backdrop-filter: blur(8px);
    z-index: 10;
    pointer-events: none;
    animation: jp-avatar-appear .4s cubic-bezier(.34,1.56,.64,1) forwards,
               jp-avatar-fade 2.8s .2s forwards;
}
@keyframes jp-avatar-appear {
    from { transform: translateY(16px) scale(.8); opacity: 0; }
    to   { transform: translateY(0)    scale(1);  opacity: 1; }
}
@keyframes jp-avatar-fade {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}
.jp-avatar-fly img, .jp-avatar-fly-ph {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--purple-accent);
    flex-shrink: 0;
}
.jp-avatar-fly-ph {
    background: rgba(124,58,237,.4);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: var(--purple-glow);
}
.jp-avatar-fly-nombre {
    font-family: 'Rajdhani', sans-serif;
    font-size: .8rem; font-weight: 600; color: var(--white);
}
.jp-avatar-fly-coins {
    font-family: 'Space Mono', monospace;
    font-size: .68rem; color: var(--gold); margin-left: 2px;
}

/* Badge % flotante */
@keyframes jp-pct-float {
    0%   { opacity: 0; transform: translateY(0) translateX(-50%) scale(.7); }
    20%  { opacity: 1; transform: translateY(-8px) translateX(-50%) scale(1); }
    80%  { opacity: 1; transform: translateY(-22px) translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-38px) translateX(-50%) scale(.9); }
}

/* ── DONUT / WHEEL ──────────────────────────── */
.jp-main-col { min-width: 0; }
.jp-wheel-wrap {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
}
.jp-wheel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid var(--purple-border);
}
.jp-wheel-header h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--white);
}
.jp-donut-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 24px;
    gap: 32px;
    flex-wrap: wrap;
}
.jp-donut-canvas {
    width: 200px; height: 200px;
    flex-shrink: 0;
    border-radius: 50%;
}
.jp-donut-legend {
    flex: 1; min-width: 160px;
    display: flex; flex-direction: column; gap: 8px;
}
.jp-legend-item {
    display: flex; align-items: center; gap: 8px; font-size: .82rem;
}
.jp-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.jp-legend-nombre {
    flex: 1; color: var(--gray-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jp-legend-pct {
    font-family: 'Space Mono', monospace;
    font-weight: 700; font-size: .8rem; color: var(--white);
}
.jp-legend-monto { font-size: .72rem; color: var(--gray-mid); }
.jp-donut-empty {
    padding: 48px 24px; text-align: center;
    color: var(--gray-mid); font-size: .88rem;
}
.jp-donut-empty-icon { font-size: 2.8rem; margin-bottom: 10px; }

/* ── LISTA DE JUGADORES ─────────────────────── */
.jp-jugadores-wrap {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.jp-jugadores-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid var(--purple-border);
}
.jp-jugadores-header h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; font-weight: 700; color: var(--white);
}
.jp-jugadores-count {
    font-size: .72rem;
    background: rgba(124,58,237,.2);
    border: 1px solid var(--purple-border);
    color: var(--purple-glow);
    padding: 2px 10px; border-radius: 12px;
}
.jp-jugadores-lista {
    max-height: 280px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--purple-border) transparent;
}
.jp-jugador-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    position: relative; overflow: hidden;
    animation: jp-row-in .25s ease;
}
/* Barra de % de fondo */
.jp-jugador-row::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--jp-pct, 0%);
    background: rgba(124,58,237,.1);
    transition: width .6s ease-out;
    pointer-events: none;
}
@keyframes jp-row-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.jp-jugador-row:last-child { border-bottom: none; }

.jp-jugador-color {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.2);
}
.jp-jugador-avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid transparent;
    flex-shrink: 0;
}
.jp-jugador-nombre {
    flex: 1; font-size: .85rem; font-weight: 600; color: var(--white);
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jp-jugador-monto {
    font-family: 'Space Mono', monospace;
    font-size: .8rem; font-weight: 700; color: var(--gold);
}
.jp-jugador-pct {
    font-size: .72rem; color: var(--gray-mid); width: 44px; text-align: right;
}
.jp-jugadores-empty {
    padding: 28px; text-align: center; color: var(--gray-mid); font-size: .82rem;
}

/* ── HISTORIAL ──────────────────────────────── */
.jp-hist-tabla { width: 100%; border-collapse: collapse; }
.jp-hist-tabla th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--gray-mid); padding: 8px 12px; text-align: left;
    border-bottom: 1px solid var(--purple-border);
}
.jp-hist-tabla td {
    padding: 10px 12px; font-size: .82rem; color: var(--gray-light);
    border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle;
}
.jp-hist-tabla tbody tr:hover { background: rgba(255,255,255,.02); }
.jp-hist-ganador { display: flex; align-items: center; gap: 8px; }
.jp-hist-avatar {
    width: 26px; height: 26px; border-radius: 6px;
    object-fit: cover; border: 1px solid var(--purple-border);
}
.jp-hist-nombre { font-weight: 600; color: var(--white); }
.jp-hist-pot {
    font-family: 'Space Mono', monospace;
    font-weight: 700; color: var(--gold);
}
.jp-hist-seed {
    font-family: 'Space Mono', monospace;
    font-size: .65rem; color: var(--gray-mid); cursor: help;
}
.jp-pct-badge {
    display: inline-block; padding: 2px 7px; border-radius: 8px;
    font-size: .75rem; font-weight: 700; font-family: 'Space Mono', monospace;
}
.jp-pct-badge--high  { background: rgba(76,175,125,.18);  color: #4caf7d; }
.jp-pct-badge--mid   { background: rgba(240,192,64,.15);  color: var(--gold); }
.jp-pct-badge--low   { background: rgba(124,58,237,.2);   color: var(--purple-glow); }

/* ── MODALES ────────────────────────────────── */
.jp-modal {
    position: fixed; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
}
.jp-modal-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.78); backdrop-filter: blur(8px);
}
.jp-modal-box {
    position: relative;
    background: var(--purple-dark);
    border: 1px solid var(--purple-border);
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 460px; width: 90%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    animation: jp-modal-in .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes jp-modal-in {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.jp-modal-trophy {
    font-size: 4rem; margin-bottom: 12px;
    animation: jp-trophy-bounce .6s .2s ease both;
}
@keyframes jp-trophy-bounce {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
.jp-modal-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem; font-weight: 700; margin-bottom: 6px;
    color: var(--gold); text-shadow: 0 0 30px rgba(240,192,64,.5);
}
.jp-modal-ganador {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin: 16px 0;
}
.jp-modal-avatar {
    width: 48px; height: 48px;
    border-radius: 12px; border: 2px solid var(--gold); object-fit: cover;
}
.jp-modal-nombre { font-size: 1.1rem; font-weight: 700; color: var(--white); }
.jp-modal-premio {
    font-family: 'Space Mono', monospace;
    font-size: 2.4rem; font-weight: 700;
    color: var(--gold); text-shadow: 0 0 40px rgba(240,192,64,.6);
    margin: 12px 0 4px;
}
.jp-modal-premio-label { font-size: .78rem; color: var(--gray-mid); margin-bottom: 20px; }
.jp-modal-seed {
    background: rgba(0,0,0,.2); border-radius: 8px; padding: 10px;
    font-size: .65rem; font-family: 'Space Mono', monospace;
    color: var(--gray-mid); word-break: break-all; margin-bottom: 20px; text-align: left;
}
.jp-modal-seed strong { color: var(--gray-light); display: block; margin-bottom: 2px; }

/* Ruleta */
.jp-ruleta-box {
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 28px 24px 32px;
    text-align: center; position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.jp-ruleta-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem; font-weight: 700;
    color: var(--gold); letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(240,192,64,.5);
    animation: jp-spin-pulse 1s ease infinite;
}
@keyframes jp-spin-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.jp-ruleta-wrap { position: relative; display: inline-block; }
#jp-ruleta-canvas {
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(124,58,237,.5), 0 0 80px rgba(124,58,237,.2);
    display: block; max-width: 100%;
}

/* ── PARTÍCULAS DE EXPLOSIÓN ────────────────── */
@keyframes jp-explode {
    0%   { transform: translate(0,0) scale(1);       opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── OVERLAY SPINNING ───────────────────────── */
.jp-spin-overlay {
    position: absolute; inset: 0;
    background: rgba(13,10,26,.82); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    z-index: 10; animation: jp-spin-fadein .3s ease;
}
@keyframes jp-spin-fadein { from { opacity: 0; } to { opacity: 1; } }
.jp-spin-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jp-spin-wheel {
    font-size: 3rem;
    animation: jp-spin-bounce .6s ease infinite alternate;
}
@keyframes jp-spin-bounce {
    from { transform: scale(1) rotate(-10deg); }
    to   { transform: scale(1.2) rotate(10deg); }
}
.jp-spin-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem; font-weight: 700;
    color: var(--gold); letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(240,192,64,.5);
    animation: jp-spin-pulse 1s ease infinite;
}

/* ── COLORES PALETA ─────────────────────────── */
.jp-color-0  { background: #7c3aed; } .jp-color-1  { background: #f0c040; }
.jp-color-2  { background: #4caf7d; } .jp-color-3  { background: #f44336; }
.jp-color-4  { background: #29b6f6; } .jp-color-5  { background: #ff7043; }
.jp-color-6  { background: #ab47bc; } .jp-color-7  { background: #26c6da; }
.jp-color-8  { background: #9ccc65; } .jp-color-9  { background: #ec407a; }
.jp-color-10 { background: #ffca28; } .jp-color-11 { background: #42a5f5; }

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1100px) { .jp-layout { grid-template-columns: 300px 1fr; } }
@media (max-width: 900px) {
    .jp-layout { grid-template-columns: 1fr; }
    .jp-donut-wrap { flex-direction: column; }
    .jp-donut-canvas { width: 160px; height: 160px; }
}
@media (max-width: 600px) {
    .jp-modal-box { padding: 32px 20px; }
    .jp-pot-value { font-size: 2rem; }
    #jp-ruleta-canvas { width: 260px !important; height: 260px !important; }
    .jp-hist-tabla th:nth-child(4), .jp-hist-tabla td:nth-child(4) { display: none; }
    .jp-cauldron-wrap { width: 130px; height: 130px; }
}

/* ══════════════════════════════════════════════
   UPGRADE — Badges de dificultad (sin % visible)
   ══════════════════════════════════════════════ */
.ug-dif {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    display: inline-block;
}
.ug-dif--baja {
    background: rgba(244,67,54,.15);
    border: 1px solid rgba(244,67,54,.4);
    color: #f44336;
}
.ug-dif--media {
    background: rgba(240,192,64,.15);
    border: 1px solid rgba(240,192,64,.4);
    color: #f0c040;
}
.ug-dif--alta {
    background: rgba(76,175,125,.15);
    border: 1px solid rgba(76,175,125,.4);
    color: #4caf7d;
}

/* ══════════════════════════════════════════════
   JACKPOT — Overlay de spinning durante el sorteo
   ══════════════════════════════════════════════ */
.jp-spin-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13,10,26,.82);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: jp-spin-fadein .3s ease;
}
@keyframes jp-spin-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.jp-spin-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.jp-spin-wheel {
    font-size: 3rem;
    animation: jp-spin-bounce .6s ease infinite alternate;
}
@keyframes jp-spin-bounce {
    from { transform: scale(1) rotate(-10deg); }
    to   { transform: scale(1.2) rotate(10deg); }
}
.jp-spin-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(240,192,64,.5);
    animation: jp-spin-pulse 1s ease infinite;
}
@keyframes jp-spin-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Pot card parpadeando durante el spinning */
.jp-pot-card--spinning {
    animation: jp-pot-blink .8s ease infinite;
}
@keyframes jp-pot-blink {
    0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,.3); }
    50%       { box-shadow: 0 0 40px rgba(240,192,64,.6); }
}

/* ══════════════════════════════════════════════
   JACKPOT — Modal de ruleta
   ══════════════════════════════════════════════ */
.jp-ruleta-box {
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 28px 24px 32px;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.jp-ruleta-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(240,192,64,.5);
    animation: jp-spin-pulse 1s ease infinite;
}
.jp-ruleta-wrap {
    position: relative;
    display: inline-block;
}
#jp-ruleta-canvas {
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(124,58,237,.5), 0 0 80px rgba(124,58,237,.2);
    display: block;
    max-width: 100%;
}
@media (max-width: 480px) {
    #jp-ruleta-canvas { width: 260px; height: 260px; }
}
/* =============================================
   UPGRADE — Layout secciones Activos / Ganadores
   (sobrescribe versión anterior)
   ============================================= */

/* Header de sección dentro del grid de eventos */
.ug-seccion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0 14px;
    border-bottom: 2px solid var(--purple-border);
    margin-bottom: 20px;
    /* span full width para que no sea tratado como item del grid */
    grid-column: 1 / -1;
}
.ug-seccion-header--ganadores {
    margin-top: 36px;
    border-bottom-color: rgba(240,192,64,.3);
}
.ug-seccion-icon { font-size: 1.2rem; }
.ug-seccion-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    flex: 1;
    letter-spacing: .4px;
}
.ug-seccion-badge {
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 20px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.ug-seccion-badge--activo {
    background: rgba(76,175,125,.15);
    border: 1px solid rgba(76,175,125,.4);
    color: #4caf7d;
}
.ug-seccion-badge--ganado {
    background: rgba(240,192,64,.1);
    border: 1px solid rgba(240,192,64,.3);
    color: var(--gold);
}

/* Sub-grids dentro de cada sección */
.ug-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Cards ganadas: tono dorado sutil */
.ug-subgrid--ganadores .ug-card {
    opacity: .8;
    border-color: rgba(240,192,64,.2);
}
.ug-subgrid--ganadores .ug-card:hover {
    opacity: 1;
    border-color: rgba(240,192,64,.5);
    box-shadow: 0 8px 30px rgba(240,192,64,.1);
}

/* =============================================
   UPGRADE — Popups profesionales
   ============================================= */
#ug-popup-confirm,
#ug-popup-tradelink {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
}
.ug-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
}
.ug-popup-box {
    position: relative;
    z-index: 1;
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.12);
    animation: ug-popup-in .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ug-popup-in {
    from { opacity:0; transform: scale(.88) translateY(12px); }
    to   { opacity:1; transform: scale(1)  translateY(0); }
}
.ug-popup-icon { font-size: 2.6rem; margin-bottom: 10px; line-height: 1; }
.ug-popup-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .4px;
    margin-bottom: 8px;
}
.ug-popup-desc {
    font-size: .88rem;
    color: var(--gray-light);
    line-height: 1.55;
    margin-bottom: 18px;
}
.ug-popup-desc strong { color: var(--gold); }
.ug-popup-saldo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.ug-popup-saldo-label { font-size: .78rem; color: var(--gray-mid); font-weight: 500; }
.ug-popup-saldo-val {
    font-family: 'Space Mono', monospace;
    font-size: .86rem;
    font-weight: 700;
    color: var(--white);
}
.ug-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 20px;
}
.ug-popup-btn {
    display: block; width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: .9rem; font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer; border: none;
    text-decoration: none;
    transition: all .2s;
    letter-spacing: .3px;
    text-align: center;
}
.ug-popup-btn--primary {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff;
    box-shadow: 0 4px 18px rgba(124,58,237,.4);
}
.ug-popup-btn--primary:hover {
    background: linear-gradient(135deg, var(--purple-bright), #c090ff);
    box-shadow: 0 6px 24px rgba(124,58,237,.6);
    transform: translateY(-1px);
}
.ug-popup-btn--secondary {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--gray-light);
}
.ug-popup-btn--secondary:hover { background: rgba(255,255,255,.09); color: var(--white); }

/* =============================================
   COINFLIP — Popup confirmación unirse
   ============================================= */
#cf-popup-unirse {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
}
.cf-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
}
.cf-popup-box {
    position: relative;
    z-index: 1;
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    animation: ug-popup-in .22s cubic-bezier(.34,1.56,.64,1);
}
.cf-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--purple-border);
}
.cf-popup-id {
    font-size: .75rem;
    color: var(--gray-mid);
    font-family: 'Space Mono', monospace;
}
.cf-popup-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
    flex: 1;
}
.cf-popup-vs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.cf-popup-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.cf-popup-avatar {
    width: 48px; height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--purple-border);
}
.cf-popup-nombre {
    font-size: .78rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-popup-lado-img {
    width: 32px; height: 32px;
    object-fit: contain;
}
.cf-popup-vs-sep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.cf-popup-vs-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-mid);
}
.cf-popup-pot {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
}
.cf-popup-pot-label {
    font-size: .65rem;
    color: var(--gold-dark);
    text-align: center;
}
.cf-popup-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: rgba(255,255,255,.03);
    border-radius: 9px;
    margin-bottom: 8px;
    font-size: .82rem;
}
.cf-popup-info-label { color: var(--gray-mid); }
.cf-popup-info-val { color: var(--white); font-weight: 600; font-family: 'Space Mono', monospace; font-size: .8rem; }
.cf-popup-info-val--gold { color: var(--gold); }
.cf-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}
.cf-popup-btn {
    display: block; width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: .9rem; font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer; border: none;
    transition: all .2s; letter-spacing: .3px;
}
.cf-popup-btn--join {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff;
    box-shadow: 0 4px 18px rgba(124,58,237,.4);
}
.cf-popup-btn--join:hover {
    background: linear-gradient(135deg, var(--purple-bright), #c090ff);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(124,58,237,.6);
}
.cf-popup-btn--cancel {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--gray-light);
}
.cf-popup-btn--cancel:hover { background: rgba(255,255,255,.09); color: var(--white); }

/* =============================================
   COINFLIP — Mis partidas: botón cancelar
   ============================================= */
.mj-mini-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.mj-mini-id { font-size: .82rem; color: var(--gray-light); flex: 1; }
.mj-mis-cancel-btn {
    margin-left: auto;
    padding: 3px 9px;
    font-size: .7rem;
    background: rgba(244,67,54,.12);
    border: 1px solid rgba(244,67,54,.3);
    color: #f77;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .2s;
    flex-shrink: 0;
}
.mj-mis-cancel-btn:hover {
    background: rgba(244,67,54,.25);
    border-color: rgba(244,67,54,.6);
    color: #f44336;
}

/* =============================================
   TIENDA — Botón bloqueado por falta de tradelink
   ============================================= */
.tienda-modal-warn--block {
    background: rgba(124,58,237,.08);
    border: 1px solid rgba(124,58,237,.3);
    color: var(--gray-light);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .84rem;
    line-height: 1.6;
    text-align: left;
    margin: 12px 0;
}
.tienda-modal-warn-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--purple-glow);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}
.tienda-modal-warn-link:hover { color: var(--white); text-decoration: underline; }
.tienda-modal-btn--disabled {
    background: var(--gray-dark) !important;
    color: var(--gray-mid) !important;
    cursor: not-allowed !important;
    opacity: .65;
}
/* =================================================================
   DICE GAME — estilos integrados desde dicegame.css
   ================================================================= */
/* =================================================================
   dicegame.css — Dice Game · PuffCase
   Requiere: base.css (variables CSS globales)
   ================================================================= */

/* ── HERO ─────────────────────────────────────────────────────── */
.dg-hero {
    position: relative;
    padding: 80px 24px 0;
    text-align: center;
    overflow: hidden;
}
.dg-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.25) 0%, transparent 65%);
    pointer-events: none;
}
.dg-hero-content { position: relative; z-index: 1; }

.dg-hero-badge {
    display: inline-block;
    background: rgba(124,58,237,.18);
    border: 1px solid var(--purple-accent);
    color: var(--purple-glow);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.dg-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 14px;
}
.dg-accent { color: var(--purple-glow); }

.dg-hero-sub {
    font-size: 1.05rem;
    color: var(--gray-light);
    margin-bottom: 20px;
}
.dg-hero-saldo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(240,192,64,.1);
    border: 1px solid rgba(240,192,64,.3);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: .9rem;
    color: var(--gold);
    margin-bottom: 0;
}

/* ── TABS ─────────────────────────────────────────────────────── */
.dg-tabs-wrap {
    display: flex;
    justify-content: center;
    padding: 32px 24px 0;
}
.dg-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--purple-deep);
    border: 1px solid var(--purple-border);
    border-radius: 14px;
    padding: 5px;
}
.dg-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--gray-mid);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.dg-tab:hover { color: var(--white); background: rgba(124,58,237,.15); }
.dg-tab--active {
    background: var(--purple-accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,58,237,.4);
}
.dg-tab--admin { color: var(--purple-glow); }
.dg-tab--admin.dg-tab--active { background: rgba(124,58,237,.25); color: var(--purple-glow); }
.dg-tab-icon { font-size: 1rem; }

/* ── PANELS ───────────────────────────────────────────────────── */
.dg-panel { padding: 32px 0 60px; }
.dg-panel--hidden { display: none; }

.dg-panel-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── BANNERS ──────────────────────────────────────────────────── */
.dg-login-banner,
.dg-warning-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 24px;
    font-size: .9rem;
}
.dg-login-banner {
    background: rgba(124,58,237,.12);
    border: 1px solid var(--purple-border);
    color: var(--gray-light);
}
.dg-warning-banner {
    background: rgba(240,192,64,.1);
    border: 1px solid rgba(240,192,64,.3);
    color: var(--gold);
}

/* ── SECTION HEADER ───────────────────────────────────────────── */
.dg-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.dg-section-header h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}

/* ── GRID DE JUEGOS ───────────────────────────────────────────── */
.dg-juegos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

/* ── CARD DE JUEGO ────────────────────────────────────────────── */
.dg-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
}
.dg-card:hover {
    transform: translateY(-5px);
    border-color: var(--purple-accent);
    box-shadow: 0 14px 44px rgba(124,58,237,.35);
}

/* Imagen de skin */
.dg-card-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--purple-mid);
    overflow: hidden;
}
.dg-card-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .3s;
}
.dg-card:hover .dg-card-img img { transform: scale(1.07); }
.dg-card-no-img {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--purple-border);
}

/* Badge de stock */
.dg-card-stock {
    position: absolute; top: 10px; right: 10px;
    background: rgba(76,175,125,.18);
    border: 1px solid rgba(76,175,125,.5);
    color: #4caf7d;
    font-size: .72rem; font-weight: 700;
    padding: 4px 10px; border-radius: 20px;
    letter-spacing: .3px;
}
.dg-card-stock--agotado {
    background: rgba(244,67,54,.12);
    border-color: rgba(244,67,54,.4);
    color: #f44336;
}

/* Body de card */
.dg-card-body {
    padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
}
.dg-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem; font-weight: 700;
    color: var(--white);
}
.dg-card-skin {
    font-size: .88rem;
    color: var(--gray-light);
}
.dg-card-skin strong { color: var(--gold); }

/* Meta pills */
.dg-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.dg-card-meta span {
    background: rgba(124,58,237,.1);
    border: 1px solid var(--purple-border);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .75rem;
    color: var(--gray-light);
}

/* Coste destacado */
.dg-card-coste {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.dg-card-coste-pc { font-size: .7rem; color: var(--gold-dark); font-weight: 500; }

/* Botón jugar */
.dg-btn-jugar {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff; border: none; border-radius: 10px;
    padding: 11px 18px; font-size: .92rem; font-weight: 700;
    cursor: pointer; transition: opacity .2s, transform .15s;
    width: 100%; margin-top: auto;
}
.dg-btn-jugar:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.dg-btn-jugar:disabled {
    background: var(--purple-mid);
    color: var(--gray-mid);
    cursor: not-allowed;
    opacity: .6;
}

/* ── MODAL ────────────────────────────────────────────────────── */
.dg-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 2000;
    align-items: center; justify-content: center;
    padding: 16px;
}
.dg-modal-inner {
    background: var(--card-bg);
    border: 1px solid var(--purple-accent);
    border-radius: 20px;
    padding: 32px;
    width: min(620px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 40px rgba(124,58,237,.2);
}
.dg-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: rgba(255,255,255,.07); border: 1px solid var(--purple-border);
    color: var(--gray-light); border-radius: 8px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer;
    transition: all .15s;
}
.dg-modal-close:hover { background: rgba(244,67,54,.15); color: #f44336; border-color: #f44336; }

.dg-modal-titulo {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.45rem; font-weight: 700;
    color: var(--white); margin-bottom: 6px;
}
.dg-modal-info {
    font-size: .88rem; color: var(--gray-light);
    margin-bottom: 16px;
}

/* Skin preview en modal */
.dg-modal-skin {
    display: flex; align-items: center; gap: 14px;
    background: rgba(124,58,237,.08);
    border: 1px solid var(--purple-border);
    border-radius: 12px; padding: 12px 16px;
    margin-bottom: 20px;
}
.dg-modal-skin img {
    width: 64px; height: 64px;
    object-fit: contain; border-radius: 8px;
    background: var(--purple-mid); padding: 6px;
    flex-shrink: 0;
}
.dg-modal-skin-info { display: flex; flex-direction: column; gap: 3px; }
.dg-modal-skin-nombre { font-weight: 700; color: var(--white); font-size: 1rem; }
.dg-modal-skin-sub { font-size: .82rem; color: var(--gray-light); }

.dg-modal-instruccion {
    font-size: .88rem; color: var(--gray-light);
    margin-bottom: 14px; font-weight: 500;
}

/* Grid de dados en el modal */
.dg-modal-dados {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center;
    margin-bottom: 24px;
}
.dg-dado-sel {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.dg-dado-label {
    font-size: .75rem; color: var(--gray-mid);
    font-weight: 600; letter-spacing: .5px;
}
.dg-dado-num {
    width: 60px; height: 60px;
    background: var(--purple-mid);
    border: 2px solid var(--purple-accent);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 1.6rem; font-weight: 700;
    color: var(--white);
    transition: background .1s, transform .1s, border-color .15s;
}
/* Estado: acertado / fallado */
.dg-dado-num--acierto {
    background: rgba(76,175,125,.25);
    border-color: #4caf7d;
    color: #4caf7d;
    transform: scale(1.08);
}
.dg-dado-num--fallo {
    background: rgba(244,67,54,.15);
    border-color: rgba(244,67,54,.6);
    color: #f44336;
}
/* Select de valor */
.dg-sel {
    background: var(--purple-deep);
    border: 1px solid var(--purple-border);
    color: var(--white);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: .85rem;
    width: 60px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s;
}
.dg-sel:focus { outline: none; border-color: var(--purple-accent); }

/* Botón tirar */
.dg-btn-tirar {
    width: 100%; padding: 13px;
    font-size: 1rem; font-weight: 700;
    transition: opacity .2s;
}
.dg-btn-tirar:disabled { opacity: .5; cursor: not-allowed; }

/* ── RESULTADO ────────────────────────────────────────────────── */
.dg-resultado {
    border-radius: 14px; padding: 22px;
    text-align: center; margin-top: 20px;
    animation: dgFadeIn .35s ease;
}
@keyframes dgFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.dg-resultado--win {
    background: rgba(76,175,125,.12);
    border: 1px solid rgba(76,175,125,.5);
}
.dg-resultado--lose {
    background: rgba(244,67,54,.08);
    border: 1px solid rgba(244,67,54,.3);
}
.dg-res-icon { font-size: 2.8rem; margin-bottom: 10px; }
.dg-resultado h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.6rem; font-weight: 800; margin-bottom: 8px;
}
.dg-resultado--win h3 { color: #4caf7d; }
.dg-resultado--lose h3 { color: #f44336; }
.dg-resultado p { font-size: .9rem; color: var(--gray-light); line-height: 1.6; }
.dg-resultado p strong { color: var(--white); }

.dg-res-dados {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-top: 14px;
}
.dg-res-dado {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: .7rem; color: var(--gray-mid);
}
.dg-res-dado-num {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 800;
    font-family: 'Space Mono', monospace;
}
.dg-res-dado--ok .dg-res-dado-num { background: rgba(76,175,125,.2); color: #4caf7d; border: 1px solid rgba(76,175,125,.5); }
.dg-res-dado--ko .dg-res-dado-num { background: rgba(244,67,54,.12); color: #f44336; border: 1px solid rgba(244,67,54,.35); }

.dg-modal-footer {
    display: flex; gap: 12px; margin-top: 16px;
}
.dg-modal-footer .mj-btn { flex: 1; }

/* ── GANADORES (pública) ─────────────────────────────────────── */
.dg-ganadores-wrap {
    max-width: 860px;
    margin: 0 auto;
}
.dg-ganadores-list {
    list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.dg-ganador-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 12px; padding: 12px 18px;
    font-size: .9rem; color: var(--gray-light);
    transition: border-color .15s;
}
.dg-ganador-item:hover { border-color: var(--purple-accent); }
.dg-ganador-av {
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--purple-accent);
    flex-shrink: 0;
}
.dg-ganador-user { font-weight: 700; color: var(--white); }
.dg-ganador-skin { color: var(--gold); font-weight: 600; }
.dg-ganador-juego { font-size: .8rem; color: var(--gray-mid); }
.dg-ganador-fecha { margin-left: auto; font-size: .78rem; color: var(--gray-mid); white-space: nowrap; }
.dg-ganador-dados {
    font-size: .75rem; color: var(--purple-glow);
    font-family: 'Space Mono', monospace;
}

/* ── PANEL ADMIN ─────────────────────────────────────────────── */
.adm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dg-prob-preview {
    margin-top: 14px;
    background: rgba(124,58,237,.1);
    border: 1px solid var(--purple-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .88rem;
    color: var(--gray-light);
}
.dg-prob-preview strong { color: var(--purple-glow); font-size: 1rem; }

/* Tabla de referencia de probabilidades */
.dg-prob-table {
    width: 100%; border-collapse: collapse;
    font-size: .85rem;
}
.dg-prob-table th {
    background: var(--purple-mid);
    color: var(--gray-light);
    padding: 10px 14px; text-align: left;
    font-weight: 600; font-size: .8rem;
    letter-spacing: .3px;
}
.dg-prob-table td {
    padding: 10px 14px;
    color: var(--gray-light);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.dg-prob-table tr:last-child td { border-bottom: none; }
.dg-dif {
    display: inline-block;
    padding: 3px 10px; border-radius: 20px;
    font-size: .75rem; font-weight: 700;
}
.dg-dif--easy { background: rgba(76,175,125,.15); color: #4caf7d; border: 1px solid rgba(76,175,125,.4); }
.dg-dif--med  { background: rgba(240,192,64,.12); color: var(--gold); border: 1px solid rgba(240,192,64,.3); }
.dg-dif--hard { background: rgba(244,67,54,.1); color: #f44336; border: 1px solid rgba(244,67,54,.35); }

/* Lista de juegos en admin */
.dg-adm-juego-row {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    transition: border-color .15s;
}
.dg-adm-juego-row:hover { border-color: var(--purple-accent); }
.dg-adm-juego-img {
    width: 56px; height: 56px;
    border-radius: 8px; object-fit: contain;
    background: var(--purple-mid); padding: 6px;
    flex-shrink: 0;
}
.dg-adm-juego-info { flex: 1; min-width: 160px; }
.dg-adm-juego-nombre {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: var(--white);
}
.dg-adm-juego-meta { font-size: .8rem; color: var(--gray-mid); margin-top: 3px; }

.dg-adm-juego-stats {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.dg-adm-stat {
    display: flex; flex-direction: column; align-items: center;
    min-width: 60px;
}
.dg-adm-stat-val {
    font-family: 'Space Mono', monospace;
    font-size: 1rem; font-weight: 700; color: var(--white);
}
.dg-adm-stat-lbl { font-size: .7rem; color: var(--gray-mid); }

.dg-adm-juego-acciones {
    display: flex; gap: 8px; flex-shrink: 0;
}

/* Badge activo/inactivo en admin */
.dg-badge-on  { display:inline-block; background:rgba(76,175,125,.15); border:1px solid rgba(76,175,125,.5); color:#4caf7d; border-radius:20px; padding:3px 10px; font-size:.75rem; font-weight:700; }
.dg-badge-off { display:inline-block; background:rgba(244,67,54,.1); border:1px solid rgba(244,67,54,.35); color:#f44336; border-radius:20px; padding:3px 10px; font-size:.75rem; font-weight:700; }

/* Tabla ganadores admin */
.dg-adm-ganadores-tabla {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--purple-border);
}
.dg-adm-ganadores-tabla table {
    width: 100%; border-collapse: collapse;
    font-size: .85rem;
}
.dg-adm-ganadores-tabla th {
    background: var(--purple-mid);
    color: var(--gray-light); padding: 11px 14px;
    text-align: left; font-weight: 600; white-space: nowrap;
}
.dg-adm-ganadores-tabla td {
    padding: 10px 14px; color: var(--gray-light);
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: middle;
}
.dg-adm-ganadores-tabla tr:last-child td { border-bottom: none; }
.dg-adm-ganadores-tabla tr:hover td { background: rgba(124,58,237,.06); }

/* ── ESTADOS VACÍO / LOADING / ERROR ─────────────────────────── */
.dg-loading, .dg-error {
    text-align: center; padding: 48px;
    color: var(--gray-mid); font-size: .95rem;
}
.dg-error { color: #f44336; }

/* ── BUTTONS (reutiliza clases de minijuegos) ─────────────────── */
.mj-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border: none; border-radius: 10px;
    padding: 10px 20px; font-size: .9rem; font-weight: 700;
    cursor: pointer; transition: all .2s;
    text-decoration: none;
}
.mj-btn--primary {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,58,237,.3);
}
.mj-btn--primary:hover { opacity: .88; transform: translateY(-1px); }
.mj-btn--secondary {
    background: var(--purple-mid);
    border: 1px solid var(--purple-border);
    color: var(--gray-light);
}
.mj-btn--secondary:hover { border-color: var(--purple-accent); color: var(--white); }
.mj-btn--steam {
    background: #1b2838;
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
}
.mj-btn--danger {
    background: rgba(244,67,54,.15);
    border: 1px solid rgba(244,67,54,.4);
    color: #f44336;
}
.mj-btn--danger:hover { background: rgba(244,67,54,.25); }

.mj-btn-xs {
    background: var(--purple-mid); border: 1px solid var(--purple-border);
    color: var(--gray-light); border-radius: 6px;
    padding: 4px 10px; font-size: .78rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.mj-btn-xs:hover { border-color: var(--purple-accent); color: var(--white); }
.mj-btn-xs--save { border-color: rgba(76,175,125,.5); color: #4caf7d; }
.mj-btn-xs--save:hover { background: rgba(76,175,125,.15); }

.mj-msg {
    font-size: .85rem; margin-top: 8px;
    min-height: 20px; transition: color .2s;
}
.mj-msg--ok   { color: #4caf7d; }
.mj-msg--err  { color: #f44336; }

.mj-refresh-btn {
    background: none; border: 1px solid var(--purple-border);
    color: var(--gray-mid); border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.mj-refresh-btn:hover { border-color: var(--purple-accent); color: var(--white); transform: rotate(90deg); }

.mj-empty { text-align: center; padding: 32px 16px; color: var(--gray-mid); font-size: .9rem; }
.mj-empty--big { padding: 64px 16px; font-size: 1rem; }

.mj-input {
    width: 100%; background: var(--purple-deep);
    border: 1px solid var(--purple-border);
    color: var(--white); border-radius: 8px;
    padding: 9px 12px; font-size: .9rem;
    font-family: inherit;
    transition: border-color .15s;
    box-sizing: border-box;
}
.mj-input:focus { outline: none; border-color: var(--purple-accent); }
.mj-label { font-size: .8rem; color: var(--gray-mid); font-weight: 600; letter-spacing: .3px; display: block; margin-bottom: 6px; }

/* mj-toggle (reutilizado) */
.mj-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.mj-toggle input { opacity: 0; width: 0; height: 0; }
.mj-toggle-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.1);
    border-radius: 24px;
    border: 1px solid var(--purple-border);
    transition: all .25s;
}
.mj-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px; left: 2px; top: 2px;
    background: var(--gray-mid); border-radius: 50%;
    transition: all .25s;
}
.mj-toggle input:checked + .mj-toggle-slider { background: var(--purple-accent); border-color: var(--purple-accent); }
.mj-toggle input:checked + .mj-toggle-slider::before { transform: translateX(20px); background: #fff; }

/* Admin section headers */
.adm-section { margin-top: 40px; }
.adm-section-title {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--purple-border);
}
.adm-section-icon { font-size: 1.4rem; }
.adm-section-title h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem; font-weight: 700; color: var(--white);
}

.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.mj-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 14px; overflow: hidden;
}
.mj-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--purple-border);
    background: rgba(124,58,237,.06);
}
.mj-card-icon { font-size: 1.1rem; }
.mj-card-header h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: var(--white);
    flex: 1;
}
.mj-card-body { padding: 18px; }

/* Stats grid */
.adm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.adm-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 12px; padding: 16px;
    text-align: center;
}
.adm-stat-card--gold { border-color: rgba(240,192,64,.3); }
.adm-stat-icon { font-size: 1.6rem; margin-bottom: 8px; }
.adm-stat-val {
    font-family: 'Space Mono', monospace;
    font-size: 1.4rem; font-weight: 700; color: var(--white);
}
.adm-stat-label { font-size: .75rem; color: var(--gray-mid); margin-top: 4px; }

.adm-cfg-row {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .88rem; color: var(--gray-light);
}
.adm-cfg-row:last-child { border-bottom: none; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dg-juegos-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .adm-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .dg-tabs { flex-wrap: wrap; }
    .dg-tab { flex: 1; justify-content: center; padding: 8px 12px; font-size: .82rem; }
    .dg-modal-inner { padding: 22px 16px; }
    .dg-dado-num { width: 50px; height: 50px; font-size: 1.3rem; }
    .dg-sel { width: 50px; }
    .dg-modal-footer { flex-direction: column; }
    .dg-ganador-fecha { display: none; }
    .dg-adm-juego-stats { display: none; }
}
@media (max-width: 420px) {
    .dg-juegos-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════
   HISTORIAL COINFLIP — GANADOR MUY VISIBLE
   Override para que minijuegos.js use las clases nuevas
   cuando renderice el historial
   ══════════════════════════════════════════════════ */

/* Fila donde el usuario actual es el ganador — verde suave fuerte */
.hist-row--win td {
    background: rgba(76,175,125,.08) !important;
    border-bottom-color: rgba(76,175,125,.12) !important;
}
.hist-row--win {
    border-left: 3px solid #4caf7d;
}

/* Separador visual entre VS jugadores */
.hist-vs {
    font-size: 0.7rem;
    color: var(--gray-mid);
    font-weight: 600;
    padding: 0 2px;
}

/* Nombre del ganador en el historial global — siempre destacado */
td .hist-ganador {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(76,175,125,.12);
    border: 1px solid rgba(76,175,125,.3);
    border-radius: 20px;
    padding: 3px 10px 3px 6px;
    color: #4caf7d;
    font-weight: 700;
    font-size: 0.82rem;
}
td .hist-ganador::before {
    content: '🏆';
    font-size: 0.78rem;
}

/* Bote en el historial: más grande y dorado */
td .hist-pot {
    font-size: 0.92rem;
    font-family: 'Space Mono', monospace;
}

/* Botones MIN y x2 en el formulario coinflip */
.mj-btn-xs {
    background: rgba(124,58,237,.15);
    border: 1px solid var(--purple-border);
    color: var(--gray-light);
    border-radius: 6px;
    padding: 0 10px;
    height: 36px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    flex-shrink: 0;
}
.mj-btn-xs:hover {
    background: rgba(124,58,237,.3);
    border-color: var(--purple-accent);
    color: #fff;
}
/* MIN en verde tenue, x2 en dorado tenue */
.mj-btn-xs[onclick*="min"] {
    border-color: rgba(76,175,125,.35);
    color: #4caf7d;
}
.mj-btn-xs[onclick*="min"]:hover {
    background: rgba(76,175,125,.18);
    border-color: #4caf7d;
    color: #fff;
}
.mj-btn-xs[onclick*="x2"] {
    border-color: rgba(240,192,64,.35);
    color: var(--gold);
}
.mj-btn-xs[onclick*="x2"]:hover {
    background: rgba(240,192,64,.18);
    border-color: var(--gold);
    color: #fff;
}

.xp-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    z-index: 9999;
    animation: fadeInOut 3s forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   UPGRADE — Modal Forja / Reactor Sci-Fi
   Reemplaza los bloques .cf-modal-box--upgrade y .ug-bar-* de
   minijuegos.css por estas reglas. Mantiene --purple-*, --gold,
   --green, --white, --gray-light, --gray-mid del sistema actual.
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay y caja principal ─────────────────────────────── */
#ug-result-modal .cf-modal-box--upgrade {
    max-width: 500px;
    padding: 40px 36px 36px;
    background: linear-gradient(160deg, #0f0a1e, #140d26);
    border: 1px solid rgba(124,58,237,.4);
    border-radius: 24px;
    box-shadow:
        0 0 0 1px rgba(124,58,237,.1),
        0 32px 80px rgba(0,0,0,.8),
        0 0 80px rgba(124,58,237,.12);
    overflow: hidden;
    transition: border-color .5s, box-shadow .5s;
}

/* Líneas de escaneo decorativas */
#ug-result-modal .cf-modal-box--upgrade::before,
#ug-result-modal .cf-modal-box--upgrade::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,.3), transparent);
    height: 1px;
    left: 0; right: 0;
    pointer-events: none;
    animation: ug-scanline 3s linear infinite;
    z-index: 0;
}
#ug-result-modal .cf-modal-box--upgrade::after {
    animation-delay: 1.5s;
}
@keyframes ug-scanline {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 102%; opacity: 0; }
}

/* Estado ganado */
#ug-result-modal .cf-modal-box--upgrade.ug-forge--win {
    border-color: rgba(76,175,125,.5);
    box-shadow:
        0 0 0 1px rgba(76,175,125,.2),
        0 32px 80px rgba(0,0,0,.8),
        0 0 80px rgba(76,175,125,.18);
}
/* Estado perdido */
#ug-result-modal .cf-modal-box--upgrade.ug-forge--lose {
    border-color: rgba(244,67,54,.4);
    box-shadow:
        0 0 0 1px rgba(244,67,54,.15),
        0 32px 80px rgba(0,0,0,.8),
        0 0 60px rgba(244,67,54,.12);
}

/* ── Header con líneas decorativas ────────────────────────── */
.ug-bar-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple-glow);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    transition: color .4s;
}
.ug-bar-title::before,
.ug-bar-title::after {
    content: '';
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(181,123,255,.5));
}
.ug-bar-title::after {
    background: linear-gradient(270deg, transparent, rgba(181,123,255,.5));
}

/* ── Escena de la skin ─────────────────────────────────────── */
.ug-skin-scene {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 32px;
    flex-shrink: 0;
}

/* Anillo de plasma central */
.ug-plasma-ring {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(124,58,237,.08) 0%, transparent 70%);
    border: 1px solid rgba(124,58,237,.2);
    animation: ug-plasma-pulse 2s ease-in-out infinite;
    transition: border-color .4s;
}
@keyframes ug-plasma-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .6;
        box-shadow: 0 0 20px rgba(124,58,237,.1);
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
        box-shadow: 0 0 40px rgba(124,58,237,.25), inset 0 0 20px rgba(124,58,237,.1);
    }
}

/* Órbitas de energía */
.ug-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    animation: ug-orbit-spin 4s linear infinite;
    pointer-events: none;
}
.ug-orbit--1 {
    border-top-color: rgba(124,58,237,.8);
    border-right-color: rgba(124,58,237,.3);
    animation-duration: 2.5s;
}
.ug-orbit--2 {
    inset: 12px;
    border-bottom-color: rgba(181,123,255,.6);
    border-left-color: rgba(181,123,255,.2);
    animation-direction: reverse;
    animation-duration: 3.5s;
}
.ug-orbit--3 {
    inset: 24px;
    border-top-color: rgba(240,192,64,.5);
    border-right-color: rgba(240,192,64,.2);
    animation-duration: 1.8s;
}
@keyframes ug-orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Nodo de energía por órbita */
.ug-orbit::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    background: var(--purple-glow);
    box-shadow: 0 0 8px var(--purple-glow);
}
.ug-orbit--2::after {
    background: #b57bff;
    box-shadow: 0 0 8px #b57bff;
}
.ug-orbit--3::after {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(240,192,64,.8);
    top: auto;
    bottom: -3px;
}

/* Imagen/placeholder de la skin */
.ug-skin-img-wrap {
    position: absolute;
    inset: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ug-skin-float 3s ease-in-out infinite;
}
@keyframes ug-skin-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-8px) rotate(2deg); }
}
.ug-skin-img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(124,58,237,.5));
    animation: ug-skin-glow 2s ease-in-out infinite;
}
.ug-skin-img-wrap .ug-skin-placeholder {
    font-size: 4rem;
    animation: ug-skin-glow 2s ease-in-out infinite;
}
@keyframes ug-skin-glow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(124,58,237,.5)); }
    50%       {
        filter:
            drop-shadow(0 0 40px rgba(181,123,255,.9))
            drop-shadow(0 0 10px rgba(240,192,64,.3));
    }
}

/* Partículas de forja */
.ug-forge-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    pointer-events: none;
    animation: ug-spark-fly var(--dur) ease-out forwards;
    animation-delay: var(--delay);
    left: var(--x);
    top: var(--y);
}
@keyframes ug-spark-fly {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Animación WIN en la skin */
.ug-forge--win .ug-skin-img-wrap {
    animation: ug-skin-win-flash 1.2s ease forwards;
}
@keyframes ug-skin-win-flash {
    0%   { filter: drop-shadow(0 0 30px #4caf7d); transform: scale(1); }
    20%  {
        filter: drop-shadow(0 0 60px #4caf7d) drop-shadow(0 0 20px #00e676);
        transform: scale(1.2);
    }
    40%  { transform: scale(.95); }
    60%  { transform: scale(1.08); }
    100% {
        filter: drop-shadow(0 0 30px rgba(76,175,125,.7));
        transform: scale(1);
        animation: ug-skin-float 3s ease-in-out infinite;
    }
}

/* Animación LOSE — skin se desintegra */
.ug-forge--lose .ug-skin-img-wrap {
    animation: ug-skin-lose-break .6s ease forwards !important;
}
@keyframes ug-skin-lose-break {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    30%  { transform: scale(1.15) rotate(-5deg); filter: drop-shadow(0 0 20px #f44336); }
    60%  { transform: scale(.8) rotate(8deg); opacity: .6; }
    100% { transform: scale(.5) rotate(-15deg); opacity: .15; filter: drop-shadow(0 0 10px #f44336); }
}

/* Plasma explota al perder */
.ug-forge--lose .ug-plasma-ring {
    animation: ug-plasma-explode .5s ease forwards !important;
}
@keyframes ug-plasma-explode {
    0%   { transform: scale(1); opacity: 1; border-color: rgba(124,58,237,.2); }
    40%  { transform: scale(1.6); opacity: 1; border-color: rgba(244,67,54,.6); box-shadow: 0 0 40px rgba(244,67,54,.4); }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ── Barra Reactor (reemplaza .ug-bar-*) ──────────────────── */
/* Preservamos los IDs actuales para no tocar el JS más que lo mínimo */
.ug-bar-wrap {
    position: relative;
    margin-bottom: 28px;
}

/* Etiquetas de la barra */
.ug-reactor-meta {
    display: flex;
    justify-content: space-between;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 8px;
}

/* Track principal */
.ug-bar-track {
    position: relative;
    height: 8px;
    background: rgba(255,255,255,.06) !important;
    border-radius: 4px;
    overflow: visible;
    border: 1px solid rgba(124,58,237,.2);
}

/* Relleno animado */
.ug-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--purple-accent), var(--purple-bright), var(--purple-glow));
    position: relative;
    transition: width 2.5s cubic-bezier(.4,0,.2,1);
}
/* Nodo cursor en el extremo del fill */
.ug-bar-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translate(50%,-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(181,123,255,.4),
        0 0 20px rgba(181,123,255,.9),
        0 0 40px rgba(124,58,237,.5);
    transition: box-shadow .3s;
    pointer-events: none;
}
/* Cursor original ya no necesita ser visible — ocultamos */
.ug-bar-cursor { display: none; }
/* Línea umbral también oculta (UX limpia) */
.ug-bar-threshold,
.ug-bar-threshold-label { display: none; }

/* Segmentos tipo reactor */
.ug-reactor-segments {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}
.ug-reactor-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(124,58,237,.15);
    transition: background .08s, box-shadow .08s;
}
.ug-reactor-seg.lit {
    background: var(--purple-bright);
    box-shadow: 0 0 6px rgba(168,85,247,.6);
}
.ug-reactor-seg.lit-gold {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(240,192,64,.6);
}

/* Porcentaje label */
.ug-bar-pct {
    font-family: 'Space Mono', monospace;
    font-size: .7rem;
    color: rgba(255,255,255,.35);
    text-align: right;
    margin-top: 4px;
    letter-spacing: 1px;
}

/* ── WIN: barra se vuelve dorada ──────────────────────────── */
.ug-bar--win .ug-bar-fill {
    background: linear-gradient(90deg, #2d7a4f, #4caf7d, #00e676) !important;
    transition: background .4s;
}
.ug-bar--win .ug-bar-fill::after {
    box-shadow:
        0 0 0 3px rgba(76,175,125,.4),
        0 0 20px rgba(76,175,125,.9),
        0 0 40px rgba(0,230,118,.4);
}
.ug-bar--win .ug-reactor-seg.lit {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(240,192,64,.7);
}

/* ── LOSE: barra se vuelve roja y "explota" ───────────────── */
.ug-bar--explode .ug-bar-fill {
    background: linear-gradient(90deg, #7a1f1f, #f44336, #ff7043) !important;
    animation: ug-bar-explode .7s ease forwards;
}
@keyframes ug-bar-explode {
    0%   { transform: scaleY(1); opacity: 1; }
    30%  { transform: scaleY(2.2); }
    60%  { transform: scaleY(.6); opacity: .7; }
    100% { transform: scaleY(1); opacity: .3; }
}
.ug-bar--explode .ug-bar-fill::after {
    box-shadow:
        0 0 0 3px rgba(244,67,54,.5),
        0 0 20px rgba(244,67,54,1),
        0 0 40px rgba(244,67,54,.6);
    animation: ug-cursor-explode .5s ease forwards;
}
@keyframes ug-cursor-explode {
    0%   { transform: translate(50%,-50%) scale(1); opacity: 1; }
    50%  { transform: translate(50%,-50%) scale(2.5); opacity: .6; }
    100% { transform: translate(50%,-50%) scale(0); opacity: 0; }
}

/* ── Resultado y detalle ──────────────────────────────────── */
.cf-modal-resultado {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 10px;
    min-height: 2.4rem;
    letter-spacing: .5px;
    position: relative;
    z-index: 1;
}
/* Entrada del resultado */
.cf-modal-resultado:not(:empty) {
    animation: ug-resultado-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ug-resultado-in {
    from { opacity: 0; transform: scale(.65) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cf-resultado--ganado {
    color: #4caf7d;
    text-shadow: 0 0 30px rgba(76,175,125,.6);
}
.cf-resultado--perdido {
    color: #f44336;
    text-shadow: 0 0 30px rgba(244,67,54,.5);
}

.cf-modal-detalle {
    font-size: .88rem;
    color: var(--gray-light);
    margin-bottom: 24px;
    min-height: 1.2rem;
    position: relative;
    z-index: 1;
}

/* ── Partículas de explosión (explosión al perder) ─────────── */
.ug-particula {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    pointer-events: none;
    animation: ug-particula-fly .8s ease forwards;
}
@keyframes ug-particula-fly {
    0%   { transform: translate(0,0) scale(1.5); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── Botón cerrar ─────────────────────────────────────────── */
#ug-modal-cerrar {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all .2s;
    box-shadow: 0 4px 20px rgba(124,58,237,.3);
    position: relative;
    z-index: 1;
}
#ug-modal-cerrar:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(124,58,237,.5);
}

/* ══════════════════════════════════════════════════════════════════
   UPGRADE REACTOR — Rediseño completo de cards + modal
   Añadir al final de minijuegos.css
   ══════════════════════════════════════════════════════════════════ */

/* ── Intro banner ─────────────────────────────────────────────── */
.ug-intro {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(181,123,255,.06));
    border: 1px solid rgba(124,58,237,.35);
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}
.ug-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(181,123,255,.04), transparent);
    animation: ug-intro-shimmer 3s linear infinite;
}
@keyframes ug-intro-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ug-intro-icon {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(181,123,255,.6));
}
.ug-intro h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}
.ug-intro p { color: var(--gray-light); font-size: .88rem; }

/* ── Sub-grids ────────────────────────────────────────────────── */
.ug-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    width: 100%;
}
.ug-subgrid--ganadores .ug-card { opacity: .75; border-color: rgba(240,192,64,.2); }
.ug-subgrid--ganadores .ug-card:hover { opacity: 1; border-color: rgba(240,192,64,.5); box-shadow: 0 8px 30px rgba(240,192,64,.1); }

/* ── CARD REACTOR ─────────────────────────────────────────────── */
.ug-card {
    background: var(--card-bg);
    border: 1px solid var(--purple-border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
}
.ug-card:not(.ug-card--agotado):hover {
    transform: translateY(-5px);
    border-color: var(--purple-accent);
    box-shadow: 0 16px 50px rgba(124,58,237,.3);
}
.ug-card--agotado { opacity: .65; }

/* Imagen de la skin */
.ug-card-img {
    position: relative;
    width: 100%;
    padding-top: 50%;
    background: linear-gradient(160deg, rgba(124,58,237,.15), rgba(13,10,26,.8));
    overflow: hidden;
}
.ug-skin-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform .3s;
    filter: drop-shadow(0 4px 20px rgba(124,58,237,.4));
}
.ug-card:hover .ug-skin-img { transform: scale(1.06); }
.ug-skin-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: .4;
}

/* Cuerpo */
.ug-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.ug-card-nombre {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
}

/* Stats row */
.ug-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.ug-stat { text-align: center; }
.ug-stat-val { font-size: 1rem; font-weight: 700; color: var(--white); }
.ug-stat-label {
    font-size: .62rem;
    color: var(--gray-mid);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* ── ANILLO DE PROBABILIDAD (nuevo elemento clave) ─────────────── */
.ug-prob-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
}
.ug-prob-ring-svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(124,58,237,.4));
}
.ug-prob-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,.07);
    stroke-width: 7;
}
.ug-prob-ring-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 201;
    stroke-dashoffset: 201;
    transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1), stroke .4s;
}
.ug-prob-ring-center {
    position: relative;
    margin-top: -74px; /* superponer al SVG */
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.ug-prob-ring-pct {
    font-family: 'Space Mono', monospace;
    font-size: .95rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}
.ug-prob-ring-lbl {
    font-size: .52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-mid);
    margin-top: 2px;
}

/* Colores del anillo según dificultad */
.ug-ring--alta  .ug-prob-ring-fill { stroke: #4caf7d; }
.ug-ring--media .ug-prob-ring-fill { stroke: #f0c040; }
.ug-ring--baja  .ug-prob-ring-fill { stroke: #f44336; }

/* Barra de prob clásica (queda bajo el anillo) */
.ug-prob-bar {
    height: 4px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}
.ug-prob-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .8s ease;
}

/* Badge dificultad */
.ug-dif {
    font-size: .75rem !important;
    font-weight: 700 !important;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .4px;
    display: inline-block;
}
.ug-dif--baja  { background: rgba(244,67,54,.15);  border: 1px solid rgba(244,67,54,.4);  color: #f44336; }
.ug-dif--media { background: rgba(240,192,64,.15);  border: 1px solid rgba(240,192,64,.4);  color: #f0c040; }
.ug-dif--alta  { background: rgba(76,175,125,.15);  border: 1px solid rgba(76,175,125,.4);  color: #4caf7d; }

/* Botón intento */
.ug-card-body .mj-btn {
    margin-top: auto;
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 11px 16px;
    border-radius: 10px;
}
.ug-ganado-info {
    font-size: .78rem;
    color: var(--gold);
    text-align: center;
    padding: 10px;
    background: rgba(240,192,64,.08);
    border-radius: 8px;
    border: 1px solid rgba(240,192,64,.25);
}

/* ══════════════════════════════════════════════════════════════════
   MODAL UPGRADE — Animación por fases tipo reactor
   ══════════════════════════════════════════════════════════════════ */

/* Caja del modal */
.cf-modal-box--upgrade {
    max-width: 520px;
    padding: 0;
    background: #0d0a1a;
    border: 1px solid rgba(124,58,237,.45);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(124,58,237,.1), 0 40px 100px rgba(0,0,0,.85), 0 0 80px rgba(124,58,237,.15);
    animation: modal-in .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modal-in {
    from { opacity: 0; transform: scale(.88) translateY(16px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Transición de borde al ganar/perder */
.cf-modal-box--upgrade.ug-state-win {
    border-color: rgba(76,175,125,.6);
    box-shadow: 0 0 0 1px rgba(76,175,125,.2), 0 40px 100px rgba(0,0,0,.85), 0 0 80px rgba(76,175,125,.2);
}
.cf-modal-box--upgrade.ug-state-lose {
    border-color: rgba(244,67,54,.5);
    box-shadow: 0 0 0 1px rgba(244,67,54,.15), 0 40px 100px rgba(0,0,0,.85), 0 0 60px rgba(244,67,54,.15);
}

/* Header del modal */
.ug-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(124,58,237,.2);
    background: rgba(124,58,237,.08);
}
.ug-modal-header-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple-glow);
}
.ug-modal-phase-badge {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(124,58,237,.2);
    border: 1px solid rgba(181,123,255,.3);
    color: var(--purple-glow);
    transition: all .4s;
}
.ug-modal-phase-badge.phase-fusión { background: rgba(240,192,64,.15); border-color: rgba(240,192,64,.4); color: var(--gold); }
.ug-modal-phase-badge.phase-resultado-win { background: rgba(76,175,125,.15); border-color: rgba(76,175,125,.4); color: #4caf7d; }
.ug-modal-phase-badge.phase-resultado-lose { background: rgba(244,67,54,.15); border-color: rgba(244,67,54,.4); color: #f44336; }

/* Cuerpo principal del modal */
.ug-modal-body {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ── REACTOR CENTRAL ────────────────────────────────────────────── */
.ug-reactor-scene {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 24px;
    flex-shrink: 0;
}

/* Anillo externo giratorio */
.ug-reactor-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: ug-ring-spin 3s linear infinite;
}
.ug-reactor-ring--outer {
    border-top-color: rgba(124,58,237,.9);
    border-right-color: rgba(124,58,237,.3);
    animation-duration: 2.8s;
}
.ug-reactor-ring--mid {
    inset: 14px;
    border-bottom-color: rgba(181,123,255,.7);
    border-left-color: rgba(181,123,255,.2);
    animation-direction: reverse;
    animation-duration: 4s;
}
.ug-reactor-ring--inner {
    inset: 28px;
    border-top-color: rgba(240,192,64,.6);
    border-right-color: rgba(240,192,64,.15);
    animation-duration: 1.9s;
}
@keyframes ug-ring-spin {
    to { transform: rotate(360deg); }
}

/* Punto brillante en cada anillo */
.ug-reactor-ring::after {
    content: '';
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    top: -3.5px; left: 50%;
    transform: translateX(-50%);
    background: var(--purple-glow);
    box-shadow: 0 0 10px var(--purple-glow), 0 0 20px rgba(181,123,255,.5);
}
.ug-reactor-ring--mid::after { background: #b57bff; box-shadow: 0 0 10px #b57bff; }
.ug-reactor-ring--inner::after { background: var(--gold); box-shadow: 0 0 10px var(--gold); top: auto; bottom: -3.5px; }

/* Pulso de plasma central */
.ug-reactor-plasma {
    position: absolute;
    inset: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(124,58,237,.18) 0%, transparent 70%);
    border: 1px solid rgba(124,58,237,.25);
    animation: ug-plasma-pulse 2s ease-in-out infinite;
    transition: background .5s, border-color .5s;
}
@keyframes ug-plasma-pulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50%       { transform: scale(1.1); opacity: 1; box-shadow: 0 0 40px rgba(124,58,237,.3), inset 0 0 20px rgba(124,58,237,.1); }
}

/* Imagen de la skin dentro del reactor */
.ug-reactor-skin {
    position: absolute;
    inset: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ug-skin-float 3s ease-in-out infinite;
}
@keyframes ug-skin-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-7px) rotate(2deg); }
}
.ug-reactor-skin img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(124,58,237,.5));
    animation: ug-skin-glow-pulse 2s ease-in-out infinite;
}
.ug-reactor-skin-placeholder {
    font-size: 3.5rem;
    animation: ug-skin-glow-pulse 2s ease-in-out infinite;
}
@keyframes ug-skin-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(124,58,237,.5)); }
    50%       { filter: drop-shadow(0 0 36px rgba(181,123,255,.9)) drop-shadow(0 0 8px rgba(240,192,64,.3)); }
}

/* Sparks de forja */
.ug-reactor-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 50%;
}
.ug-spark-particle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    animation: ug-spark var(--dur) ease-out forwards;
    left: var(--sx); top: var(--sy);
}
@keyframes ug-spark {
    0%   { transform: translate(0,0) scale(1.5); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* WIN — skin brilla verde */
.ug-state-win .ug-reactor-skin {
    animation: ug-skin-win 1.2s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes ug-skin-win {
    0%   { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
    25%  { filter: drop-shadow(0 0 40px #4caf7d); transform: scale(1.25); }
    50%  { transform: scale(.92); }
    70%  { transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 20px rgba(76,175,125,.7)); transform: scale(1); }
}
.ug-state-win .ug-reactor-plasma {
    background: radial-gradient(circle at center, rgba(76,175,125,.2) 0%, transparent 70%);
    border-color: rgba(76,175,125,.4);
    box-shadow: 0 0 40px rgba(76,175,125,.25);
    animation: none;
}

/* LOSE — skin se desintegra */
.ug-state-lose .ug-reactor-skin {
    animation: ug-skin-lose .7s ease forwards !important;
}
@keyframes ug-skin-lose {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    30%  { transform: scale(1.15) rotate(-6deg); filter: drop-shadow(0 0 20px #f44336); }
    65%  { transform: scale(.75) rotate(10deg); opacity: .55; }
    100% { transform: scale(.4) rotate(-18deg); opacity: .1; }
}
.ug-state-lose .ug-reactor-plasma {
    animation: ug-plasma-explode .55s ease forwards !important;
}
@keyframes ug-plasma-explode {
    0%   { transform: scale(1); opacity: 1; border-color: rgba(124,58,237,.25); }
    45%  { transform: scale(1.7); opacity: 1; border-color: rgba(244,67,54,.7); box-shadow: 0 0 50px rgba(244,67,54,.4); }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ── FASE STEPPER ────────────────────────────────────────────────── */
.ug-phase-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 22px;
    width: 100%;
}
.ug-phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    position: relative;
    opacity: .3;
    transition: opacity .4s;
}
.ug-phase-step.active { opacity: 1; }
.ug-phase-step.done   { opacity: .6; }
.ug-phase-step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(124,58,237,.15);
    border: 1.5px solid rgba(124,58,237,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    transition: all .4s;
    position: relative;
    z-index: 1;
}
.ug-phase-step.active .ug-phase-step-dot {
    background: var(--purple-accent);
    border-color: var(--purple-bright);
    box-shadow: 0 0 16px rgba(124,58,237,.6);
    animation: ug-dot-pulse 1s ease-in-out infinite;
}
@keyframes ug-dot-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(124,58,237,.6); }
    50%       { box-shadow: 0 0 28px rgba(181,123,255,.9); }
}
.ug-phase-step.done .ug-phase-step-dot {
    background: rgba(76,175,125,.2);
    border-color: rgba(76,175,125,.5);
}
.ug-phase-step-label {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-mid);
    text-align: center;
    line-height: 1.2;
}
.ug-phase-step.active .ug-phase-step-label { color: var(--purple-glow); }
.ug-phase-step.done   .ug-phase-step-label { color: rgba(76,175,125,.7); }

/* Línea conectora entre pasos */
.ug-phase-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 1px;
    background: rgba(124,58,237,.2);
    transition: background .4s;
}
.ug-phase-step.done:not(:last-child)::after { background: rgba(76,175,125,.35); }

/* ── BARRA REACTOR MEJORADA ─────────────────────────────────────── */
.ug-reactor-bar-wrap {
    width: 100%;
    margin-bottom: 20px;
}
.ug-reactor-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.22);
    margin-bottom: 8px;
}
.ug-reactor-bar-track {
    position: relative;
    height: 10px;
    background: rgba(255,255,255,.05);
    border-radius: 5px;
    overflow: visible;
    border: 1px solid rgba(124,58,237,.18);
}
.ug-reactor-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--purple-accent), var(--purple-bright), var(--purple-glow));
    position: relative;
    transition: none;
}
.ug-reactor-bar-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translate(50%, -50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(181,123,255,.4),
        0 0 18px rgba(181,123,255,.9),
        0 0 36px rgba(124,58,237,.5);
    transition: box-shadow .3s;
}
.ug-reactor-bar-segs {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}
.ug-reactor-bar-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(124,58,237,.12);
    transition: background .08s, box-shadow .08s;
}
.ug-reactor-bar-seg.lit {
    background: var(--purple-bright);
    box-shadow: 0 0 6px rgba(168,85,247,.6);
}
.ug-reactor-bar-seg.lit-win {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(240,192,64,.7);
}
.ug-reactor-bar-seg.lit-lose {
    background: #f44336;
    box-shadow: 0 0 6px rgba(244,67,54,.5);
}

/* WIN — fill verde */
.ug-state-win .ug-reactor-bar-fill {
    background: linear-gradient(90deg, #2d7a4f, #4caf7d, #00e676) !important;
}
.ug-state-win .ug-reactor-bar-fill::after {
    box-shadow: 0 0 0 3px rgba(76,175,125,.4), 0 0 18px rgba(76,175,125,.9), 0 0 36px rgba(0,230,118,.4);
}
/* LOSE — fill rojo + tiembla */
.ug-state-lose .ug-reactor-bar-fill {
    background: linear-gradient(90deg, #7a1f1f, #f44336, #ff7043) !important;
    animation: ug-bar-explode .65s ease forwards;
}
@keyframes ug-bar-explode {
    0%   { transform: scaleY(1); }
    30%  { transform: scaleY(2.5); }
    60%  { transform: scaleY(.5); }
    100% { transform: scaleY(1); opacity: .35; }
}
.ug-state-lose .ug-reactor-bar-fill::after {
    box-shadow: 0 0 0 3px rgba(244,67,54,.5), 0 0 20px rgba(244,67,54,1), 0 0 40px rgba(244,67,54,.6);
    animation: ug-cursor-explode .5s ease forwards;
}
@keyframes ug-cursor-explode {
    0%   { transform: translate(50%,-50%) scale(1); opacity: 1; }
    50%  { transform: translate(50%,-50%) scale(2.8); opacity: .6; }
    100% { transform: translate(50%,-50%) scale(0); opacity: 0; }
}

/* ── RESULTADO ─────────────────────────────────────────────────── */
.cf-modal-resultado {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 8px;
    min-height: 2.4rem;
    position: relative;
    z-index: 1;
    text-align: center;
}
.cf-modal-resultado:not(:empty) {
    animation: ug-resultado-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ug-resultado-pop {
    from { opacity: 0; transform: scale(.6) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cf-resultado--ganado { color: #4caf7d; text-shadow: 0 0 30px rgba(76,175,125,.6); }
.cf-resultado--perdido { color: #f44336; text-shadow: 0 0 30px rgba(244,67,54,.5); }
.cf-modal-detalle {
    font-size: .88rem;
    color: var(--gray-light);
    margin-bottom: 22px;
    min-height: 1.2rem;
    text-align: center;
}

/* Partículas de explosión */
.ug-particula {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    pointer-events: none;
    animation: ug-particula-fly .85s ease forwards;
}
@keyframes ug-particula-fly {
    0%   { transform: translate(0,0) scale(1.5); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Botón continuar */
#ug-modal-cerrar {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-bright));
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all .2s;
    box-shadow: 0 4px 20px rgba(124,58,237,.3);
}
#ug-modal-cerrar:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(124,58,237,.55);
}

/* Footer del modal (padding interno) */
.ug-modal-footer {
    padding: 0 28px 28px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ug-subgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .ug-reactor-scene { width: 180px; height: 180px; }
    .cf-modal-box--upgrade { border-radius: 18px; }
    .ug-phase-step-label { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   UPGRADE — Cards Premium v2
   Añadir al final de minijuegos.css.
   Sobreescribe todo lo relacionado con .ug-card, .ug-skin-*, etc.
   ══════════════════════════════════════════════════════════════════ */

/* ── Grid de eventos ───────────────────────────────────────────── */
.ug-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

/* ── Card base ─────────────────────────────────────────────────── */
.ug-card {
    background: #120e22;
    border: 1px solid rgba(124,58,237,.25);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .28s cubic-bezier(.34,1.2,.64,1), border-color .25s, box-shadow .25s;
    position: relative;
}
.ug-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(124,58,237,.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.ug-card:not(.ug-card--agotado):not(.ug-card--ganada):hover {
    transform: translateY(-6px);
    border-color: rgba(124,58,237,.7);
    box-shadow: 0 20px 60px rgba(124,58,237,.28);
}
.ug-card--agotado,
.ug-card--ganada { opacity: .72; }
.ug-card--ganada {
    border-color: rgba(240,192,64,.2);
}
.ug-card--ganada:hover {
    border-color: rgba(240,192,64,.5);
    box-shadow: 0 16px 50px rgba(240,192,64,.1);
    transform: translateY(-4px);
}
.ug-card--admin { border-color: rgba(240,192,64,.2); }

/* ── Línea de acento superior (color = dificultad) ────────────── */
.ug-card-accent {
    height: 2px;
    width: 100%;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.ug-card--baja  .ug-card-accent { background: linear-gradient(90deg, transparent, #f44336, transparent); }
.ug-card--media .ug-card-accent { background: linear-gradient(90deg, transparent, #f0c040, transparent); }
.ug-card--alta  .ug-card-accent { background: linear-gradient(90deg, transparent, #4caf7d, transparent); }
.ug-card--ganada .ug-card-accent { background: linear-gradient(90deg, transparent, #f0c040, transparent); }

/* ── Zona imagen ──────────────────────────────────────────────── */
.ug-card-img {
    position: relative;
    width: 100%;
    padding-top: 54%;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(124,58,237,.12), #0a0614 80%);
    flex-shrink: 0;
}
.ug-card--baja  .ug-card-img { background: linear-gradient(160deg, rgba(244,67,54,.08),  #0a0614 80%); }
.ug-card--media .ug-card-img { background: linear-gradient(160deg, rgba(240,192,64,.07), #0a0614 80%); }
.ug-card--ganada .ug-card-img { background: linear-gradient(160deg, rgba(240,192,64,.06), #0a0614 80%); }

.ug-skin-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .35s cubic-bezier(.34,1.2,.64,1), filter .35s;
    filter: drop-shadow(0 6px 24px rgba(124,58,237,.35));
}
.ug-card:not(.ug-card--agotado):not(.ug-card--ganada):hover .ug-skin-img {
    transform: scale(1.08) translateY(-3px);
    filter: drop-shadow(0 10px 32px rgba(124,58,237,.55));
}
.ug-skin-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: .18;
}

/* Badge de dificultad — sobre la imagen */
.ug-dif-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    z-index: 2;
}
.ug-card--baja  .ug-dif-badge { background: rgba(244,67,54,.18);  border: 1px solid rgba(244,67,54,.5);  color: #f44336; }
.ug-card--media .ug-dif-badge { background: rgba(240,192,64,.18); border: 1px solid rgba(240,192,64,.5); color: #f0c040; }
.ug-card--alta  .ug-dif-badge { background: rgba(76,175,125,.18); border: 1px solid rgba(76,175,125,.5); color: #4caf7d; }
.ug-card--ganada .ug-dif-badge { background: rgba(240,192,64,.15); border: 1px solid rgba(240,192,64,.4); color: #f0c040; }

/* Puntos de energía — sustituyen el % (top-right) */
.ug-energy-dots {
    position: absolute;
    top: 11px;
    right: 11px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.ug-energy-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}
/* Alta: 3 puntos verdes */
.ug-card--alta .ug-energy-dot { background: #4caf7d; box-shadow: 0 0 6px rgba(76,175,125,.6); }
/* Media: 2 puntos dorados, 1 apagado */
.ug-card--media .ug-energy-dot:nth-child(1),
.ug-card--media .ug-energy-dot:nth-child(2) { background: #f0c040; box-shadow: 0 0 6px rgba(240,192,64,.5); }
.ug-card--media .ug-energy-dot:nth-child(3)  { background: rgba(255,255,255,.1); }
/* Baja: 1 punto rojo, 2 apagados */
.ug-card--baja .ug-energy-dot:nth-child(1) { background: #f44336; box-shadow: 0 0 6px rgba(244,67,54,.5); }
.ug-card--baja .ug-energy-dot:nth-child(2),
.ug-card--baja .ug-energy-dot:nth-child(3) { background: rgba(255,255,255,.1); }

/* ── Cuerpo ─────────────────────────────────────────────────────── */
.ug-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
    gap: 0;
}

.ug-card-nombre {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
    letter-spacing: .2px;
    margin-bottom: 12px;
}

/* Separador con gradiente */
.ug-card-sep {
    height: 1px;
    background: linear-gradient(90deg, rgba(124,58,237,.3), rgba(124,58,237,.05));
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* Stats en 2 columnas */
.ug-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.ug-stat { display: flex; flex-direction: column; gap: 2px; }
.ug-stat-val {
    font-family: 'Space Mono', monospace;
    font-size: .9rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}
.ug-stat-label {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-top: 0;
}

/* ── Botón intento ──────────────────────────────────────────────── */
.ug-card-body .mj-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    color: #fff;
    transition: all .22s;
    position: relative;
    overflow: hidden;
    margin-top: auto;
}
.ug-card-body .mj-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.ug-card-body .mj-btn:hover::after { opacity: 1; }
.ug-card-body .mj-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(124,58,237,.5); }
.ug-card-body .mj-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Botón por dificultad */
.ug-card--alta  .ug-card-body .mj-btn--primary { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.ug-card--media .ug-card-body .mj-btn--primary { background: linear-gradient(135deg, #4a3800, #7a6000); }
.ug-card--baja  .ug-card-body .mj-btn--primary { background: linear-gradient(135deg, #5a1a1a, #8b2020); }

/* Precio dentro del botón */
.ug-btn-price {
    font-family: 'Space Mono', monospace;
    font-size: .72rem;
    opacity: .8;
    white-space: nowrap;
    margin-left: auto;
}

/* ── Ganado info ─────────────────────────────────────────────────── */
.ug-ganado-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(240,192,64,.07);
    border: 1px solid rgba(240,192,64,.2);
    border-radius: 10px;
    font-size: .78rem;
    color: #f0c040;
    margin-top: auto;
}
.ug-ganado-info strong {
    display: block;
    color: var(--white);
    font-size: .85rem;
    font-weight: 700;
}
.ug-ganado-info small { color: rgba(255,255,255,.4); font-size: .7rem; }

/* ── Admin card ─────────────────────────────────────────────────── */
.ug-card--admin {
    border-color: rgba(240,192,64,.2);
    cursor: default;
}
.ug-card--admin:hover { transform: none; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ug-subgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .ug-card-nombre { font-size: .92rem; }
}
@media (max-width: 420px) {
    .ug-subgrid { grid-template-columns: 1fr 1fr; }
}