:root{
--bg-top: #0b2138;
--bg-bottom: #070814;
--gold-1: #00bec2;
--gold-2: #46f9ff;
--muted: #9aa6b3;
--glass: rgba(255,255,255,0.03);
--glass-strong: rgba(255,255,255,0.06);
--accent-cyan: rgba(94,234,255,0.9);
--ui-radius: 12px;
--text-grad-start: #38d1ff;
--text-grad-end: #7ff7ff;
--winter-cyan: #7ff7ff;
--winter-gold: #51ffee;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background: linear-gradient(180deg, var(--bg-top) 0%, #071428 35%, var(--bg-bottom) 100%);
color: #eaf4ff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow:hidden;
transition: background 0.8s ease;
}

/* SPLASH SCREEN */
#splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000a1a; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; transition: opacity 1.2s cubic-bezier(.2,.9,.2,1);
}

#splash-screen.fade-out { opacity: 0; pointer-events: none;
}

.loader-container { width: 80%; max-width: 400px; text-align: center;
}

.splash-logo { width: clamp(200px, 30vw, 400px); height: auto; filter: drop-shadow(0 0 20px rgba(0,200,255,0.8)); animation: floatingPulse 2s ease-in-out infinite alternate;
}

@keyframes floatingPulse { 0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 15px rgba(0,200,255,0.5)); } 100% { transform: translateY(-8px) scale(1.02); filter: drop-shadow(0 0 30px rgba(0,200,255,1)); }
}

.loader-text { font-family: 'Poppins', monospace; font-size: 16px; margin-top: 20px; letter-spacing: 2px; opacity: 0.8; animation: pulse 1.5s infinite alternate;
}
@keyframes pulse { from { opacity: 0.6; } to { opacity: 1; }
}

/* Estilos Invernales Globales */
body.christmas-mode { filter: brightness(1.1) saturate(1.1);
}

.christmas-mode .ip-value.grad-text { background: linear-gradient(90deg, #fff, var(--winter-cyan)); -webkit-background-clip: text; background-clip: text;
}
.christmas-mode .ring-fg { stroke: var(--winter-cyan); filter: drop-shadow(0 0 10px var(--winter-cyan));
}
.christmas-mode .players-count.grad-text { background: linear-gradient(90deg, #fff, var(--winter-cyan)); -webkit-background-clip: text; background-clip: text;
}

.christmas-control.active { color: var(--winter-cyan); background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); border-color: rgba(255,255,255,0.2);
}
.christmas-control.active i { color: var(--winter-cyan); text-shadow: 0 0 8px var(--winter-cyan);
}

/* ANIMACIÓN DE RENOS (GIFs) */
#christmas-decorations { position: fixed; bottom: 0; left: 0; width: 100%; height: 150px; z-index: 50; pointer-events: none; overflow: hidden;
}
.reindeer-gif { position: absolute; bottom: 0; height: 100px; width: auto; transform: translateX(0); will-change: transform;
}

@keyframes walkReindeer { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(calc(100vw + 200px)); opacity: 1; }
}


/* Snow canvas (behind everything) */
canvas#snow {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
mix-blend-mode: screen; filter: blur(6px) saturate(1.03); opacity: 0.92;
}

/* Snow canvas en modo invernal (Ajuste de filtro para LUCES) */
.christmas-mode canvas#snow { filter: blur(2px) saturate(1.2) drop-shadow(0 0 8px rgba(255,255,255,0.4)); opacity: 1;
}

.stage {
position: relative; z-index: 5; min-height:100vh;
display:flex; align-items:center; justify-content:center; padding: 48px 20px;
}

.card {
width: min(980px, 94vw);
text-align:center;
background: linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.01));
border: 1px solid var(--glass);
border-radius: 14px;
padding: 48px 36px;
box-shadow: 0 14px 80px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
backdrop-filter: blur(8px) saturate(1.03);
transform: translateY(8px);
opacity: 0; 
position: relative;
}
@keyframes cardEnter {
from { opacity: 0; transform: translateY(20px) scale(.995); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo area */
.logo-wrap{
position: relative;
display:flex; align-items:center; justify-content:center;
margin-top: 0;
margin-bottom: 0;
pointer-events:none;
}
.logo-glow {
position: absolute;
left: 50%; top: 50%;
width: min(1100px, 86vw);
height: min(560px, 46vh);
transform: translate(-50%,-50%);
background: radial-gradient(ellipse at center, rgba(120,235,255,0.95) 0%, rgba(120,235,255,0.35) 20%, rgba(120,235,255,0.08) 40%, transparent 70%);
filter: blur(48px) saturate(1.2);
border-radius: 50%;
z-index: 0;
pointer-events:none;
opacity: 0.45;
will-change: opacity, transform;
}

/* Logo sizing */
img#falion {
position: absolute;
top: -92px;
left: 50%;
transform: translateX(-50%) translateZ(0);
z-index: 1;
width: clamp(640px, 68vw, 1400px);
max-width: 100%;
height: auto;
display:block;
image-rendering: auto;
filter: drop-shadow(0 26px 48px rgba(0,0,0,0.65));
transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 420ms;
will-change: transform, filter;
}
img#falion:hover {
transform: translateX(-50%) translateY(-12px) scale(1.04);
filter: drop-shadow(0 44px 84px rgba(0,0,0,0.72));
}

.subtitle { color: var(--muted); font-size: clamp(14px,1.6vw,18px); margin-bottom: 12px; opacity: .95; margin-top: 300px;
}
.small { color: var(--muted); font-size: 13px; margin-top:6px; }

/* JUGADORES CIRCULAR INDICATOR */

.players-center-wrap { position: absolute; top: 300px; right: 100px; z-index: 10;
}

.players-wrap {
--size: 88px;
width: var(--size); min-width: var(--size); height: var(--size);
display:flex; align-items:center; justify-content:center; position: relative;
}
.ring {
width: 88px; height: 88px; transform: rotate(-90deg); overflow: visible;
}
.ring-bg { stroke: rgba(255,255,255,0.04); }
.ring-fg {
stroke-dasharray: 276.46;
stroke-dashoffset: 276.46;
transition: stroke-dashoffset 900ms cubic-bezier(.2,.9,.2,1), stroke 0.4s;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
}
.players-info {
position: absolute;
display:flex; flex-direction:column; align-items:center; justify-content:center;
pointer-events:none;
}
.players-count {
font-family: 'Poppins', Inter, sans-serif;
font-weight:800; color: var(--text-grad-end);
font-size: 20px; letter-spacing: 0.6px;
transform-origin: center; transition: transform 220ms ease;
}
.players-label {
font-size: 11px; color: var(--muted); margin-top: 2px;
}
.players-wrap.online .players-count { animation: popPulse 1200ms ease-in-out infinite; }
@keyframes popPulse {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}

/* UI pieces (rest) */

.ip-box {
margin: 28px auto; max-width: 820px;
display:flex; gap: 16px; align-items:center; justify-content:space-between;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius: var(--ui-radius); padding: 18px 20px;
border: 1px solid rgba(255,255,255,0.03);
box-shadow: 0 12px 40px rgba(3,8,20,0.6);
transform-origin: center;
transition: transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms;
opacity: 0;
}
.ip-box:active { transform: translateY(1px) }
.ip-box:hover { transform: translateY(-6px); box-shadow: 0 22px 80px rgba(3,8,20,0.7); }

.ip-label { font-size:12px; color:var(--muted); margin-bottom:6px; letter-spacing:0.06em; text-transform:uppercase }
.ip-value {
font-family: 'Poppins', Inter, monospace; font-weight:700;
font-size: clamp(18px, 3.2vw, 30px); letter-spacing: 1px;
user-select: all; display:inline-block;
}
.ip-value.grad-text { padding: 0 2px; }

.ip-actions { 
display: flex;
justify-content: center;
align-items: center;
gap: 0; 
padding-left: 10px; 
}
#copy-ip {
min-width: 150px;
}

.btn {
display:inline-flex; align-items:center; gap:.6rem;
background: linear-gradient(180deg,var(--gold-1),var(--gold-2));
color: #081022; padding: 12px 18px; border-radius: 12px; text-decoration:none;
font-weight:700; box-shadow: 0 14px 44px rgba(241,183,43,0.12); border:none; cursor:pointer;
transition: transform .14s cubic-bezier(.2,.9,.2,1), box-shadow .14s, background 0.4s;
font-family: 'Poppins', Inter, sans-serif;
}
.btn:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(241,183,43,0.18) }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,0.04); box-shadow:none; font-weight:600; }

.cta-row { display:flex; gap:16px; justify-content:center; margin-top:18px; flex-wrap:wrap; opacity: 0;
}

footer { margin-top:28px; color: var(--muted); font-size: 13px; opacity:.9 }

@media (max-width:720px){
.ip-box{flex-direction:column;align-items:flex-start;padding:14px}
.ip-actions{width:100%;justify-content:center;padding-left:0}
img#falion{ width: min(520px, 86vw); top: -58px;}
.logo-glow{width: min(520px,86vw);height: min(320px,40vh)}
.logo-wrap{margin-top:0}
h1 { top: 60px; }
.subtitle { margin-top: 200px; }
.players-center-wrap { top: 280px; right: 20px; }
}

/* TOAST AND MESSAGES */

.toast {
position: fixed; left: 18px; top: 18px; z-index: 40;
display:flex; align-items:center; gap:12px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.04);
color: #eaf4ff;
padding: 12px 14px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
transform: translate(-8px,-6px) scale(.98); opacity:0;
pointer-events:none;
backdrop-filter: blur(8px) saturate(1.05);
transition: opacity 360ms cubic-bezier(.2,.9,.2,1), transform 360ms cubic-bezier(.2,.9,.2,1);
}
.toast.show { opacity: 1; transform: translate(0,0) scale(1); pointer-events: auto;
}
.toast.hide-left { opacity: 0; transform: translateX(-100px) scale(0.9);
}


.toast .ok {
width:34px; height:34px; border-radius:8px; display:inline-grid; place-items:center;
background: linear-gradient(90deg,var(--accent-cyan), rgba(120,235,255,0.6));
color:#00131a; font-weight:800; box-shadow: 0 10px 30px rgba(94,234,255,0.08);
}
.toast .text { font-weight:700; font-family: 'Poppins', Inter, sans-serif; font-size:14px; }

/* Small message area bottom-center (stack) */
.messages {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
display:flex; flex-direction:column; gap:10px; align-items:center;
}
.msg {
min-width: 220px; max-width: 94vw;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
color:var(--muted); padding: 10px 14px; border-radius: 10px;
border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 12px 40px rgba(2,6,23,0.6);
transform: translateY(8px) scale(.98); opacity:0;
animation: msgIn 380ms cubic-bezier(.2,.9,.2,1) forwards;
font-weight:600;
}
.msg .text-grad { display:inline-block; }

@keyframes msgIn { from { opacity:0; transform: translateY(10px) scale(.98) } to { opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce) {
.logo-glow { animation: none; opacity: .6 }
.toast, .msg, img#falion { transition:none; animation:none }
}


/* CONTROLES SUPERIORES DERECHOS (AUDIO Y NAVIDAD) */
.controls-right { position: fixed; top: 25px; right: 25px; z-index: 100; display: flex; flex-direction: column; gap: 10px; 
}

.control-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: transform 0.2s, box-shadow 0.2s, background 0.4s, color 0.4s; color: var(--gold-2);
}

.control-btn:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

.control-btn:active { transform: scale(0.98);
}

@media (max-width: 400px) { .controls-right { top: 15px; right: 15px; }
}


/* --- NUEVO ESTILO: LAUNCHER DOWNLOAD BOX (Reemplaza el AD POPUP) --- */
#launcher-download-box {
    flex: 1 1 180px; /* Permite que tome espacio junto a los otros botones */
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    border-radius: var(--ui-radius);
    cursor: pointer;
    text-decoration: none;
    
    /* Fondo prominente y brillante (cian/oro) */
    background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
    color: #081022; /* Color de texto oscuro para el contraste */
    border: 1px solid var(--gold-2);
    box-shadow: 0 0 20px rgba(70, 249, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.4);
    
    transition: all 0.25s cubic-bezier(.2,.9,.2,1);
}

#launcher-download-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(70, 249, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.7);
}
#launcher-download-box:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(70, 249, 255, 0.4);
}

.launcher-icon {
    font-size: 28px;
    color: #081022;
    margin-bottom: 4px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

.launcher-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    font-family: 'Poppins', Inter, sans-serif;
}

.launcher-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    opacity: 0.8;
    margin-top: 2px;
}

/* MEDIA QUERY PARA MOVILES (Ajustado para el nuevo Launcher Box) */
@media (max-width: 500px) {
    /* Eliminado el estilo antiguo del #ad-popup */

    /* Asegurar que el launcher box también ocupe todo el ancho en móvil */
    .cta-row {
        flex-direction: column;
    }
    .btn.ghost {
        width: 100%;
        margin-bottom: 10px;
    }
    #launcher-download-box {
        width: 100%;
        flex: 1 1 auto;
        margin-top: 10px; 
    }
}