*{margin:0;padding:0;box-sizing:border-box}
html,body{
width:100%;
height:100%;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
background:
radial-gradient(circle at 10% 20%, rgba(32,184,208,.12) 0%, transparent 22%),
radial-gradient(circle at 85% 15%, rgba(255,79,160,.10) 0%, transparent 25%),
radial-gradient(circle at 50% 90%, rgba(182,39,216,.08) 0%, transparent 28%),
linear-gradient(180deg,#e9fbff,#dff6ff)
}

body{
padding:10px;
position:relative;
}
.desktop-layout{width:100%;height:100dvh;display:grid;grid-template-columns:minmax(220px,310px) auto minmax(220px,310px);gap:22px;align-items:center;justify-content:center}
.side-art{height:min(92dvh,780px);border-radius:30px;padding:24px 22px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));box-shadow:0 15px 45px rgba(6,76,134,.16);border:2px solid rgba(32,184,208,.18);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.side-art:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(255,79,160,.16);right:-70px;top:-50px}
.side-art:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(32,184,208,.18);left:-90px;bottom:-80px}
.side-content{position:relative;z-index:1;text-align:center}
.side-promo{width:100%;height:100%;object-fit:cover;border-radius:24px;display:block}
.side-kicker{display:inline-block;background:#ff4fa0;color:#fff;font:900 12px Arial;padding:8px 14px;border-radius:999px;margin-bottom:16px;box-shadow:0 8px 18px rgba(255,79,160,.25)}
.side-title{color:#064c86;font:900 30px/1.05 Arial;margin-bottom:14px}
.side-text{color:#124366;font:800 16px/1.35 Arial;margin-bottom:14px}
.side-list{display:grid;gap:10px;margin-top:16px}
.side-item{background:rgba(255,255,255,.86);border:1px solid rgba(32,184,208,.22);border-radius:16px;padding:12px;color:#064c86;font:800 14px/1.25 Arial}
.side-big{font:900 42px Arial;color:#ff4fa0;text-shadow:0 4px 0 rgba(255,207,51,.55);margin:14px 0}
.side-badge{background:linear-gradient(90deg,#20b8d0,#1976d2);color:#fff;border-radius:22px;padding:18px 14px;font:900 18px/1.2 Arial;box-shadow:0 12px 26px rgba(25,118,210,.25)}
.side-small{font:800 13px/1.3 Arial;color:#1976d2;margin-top:12px}
.game-wrap{display:flex;align-items:center;justify-content:center}
#game{display:block;background:#fff;touch-action:none;width:min(100vw - 20px,430px);height:min(100dvh - 20px,780px);aspect-ratio:430/780;border-radius:24px;box-shadow:0 15px 50px rgba(0,0,0,.25);object-fit:contain}
.help{position:fixed;top:0;left:50%;transform:translateX(-50%);background:#fff;color:#064c86;font:700 12px Arial;padding:5px 14px;border-radius:0 0 12px 12px;box-shadow:0 8px 22px rgba(0,0,0,.08);z-index:2}
@media(max-width:1024px){
 .help{display:none}
 body{display:flex;align-items:center;justify-content:center;padding:10px}
 .desktop-layout{display:block;width:auto;height:auto}
 .side-art{display:none}
 .game-wrap{display:flex;align-items:center;justify-content:center}
 #game{width:min(100vw - 20px,430px);height:min(100dvh - 20px,780px)}
}

/* =========================
FONDO GAMER / MÉDICO
========================= */

.bg-deco{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:0;
}

.bg-virus{
position:absolute;
opacity:.06;
filter:blur(.3px);
animation:floatVirus 18s ease-in-out infinite;
}

.virus-a{
width:180px;
left:2%;
top:10%;
}

.virus-b{
width:140px;
right:5%;
top:32%;
animation-delay:4s;
}

.virus-c{
width:200px;
left:10%;
bottom:6%;
animation-delay:8s;
}

.bg-shield{
position:absolute;
opacity:.05;
animation:pulseShield 12s ease-in-out infinite;
}

.shield-a{
width:230px;
right:4%;
bottom:8%;
}

.shield-b{
width:170px;
left:5%;
top:58%;
animation-delay:4s;








}

.bg-cross{
position:absolute;
color:#20b8d0;
opacity:.04;
font:900 110px Arial;
animation:rotateCross 30s linear infinite;
}

.cross-a{
left:42%;
top:14%;
}

.cross-b{
right:12%;
bottom:16%;
font-size:150px;
}

.bg-particles{
position:absolute;
inset:0;
background-image:
radial-gradient(rgba(32,184,208,.18) 2px, transparent 2px),
radial-gradient(rgba(255,79,160,.12) 2px, transparent 2px);
background-size:120px 120px;
background-position:0 0,60px 60px;
opacity:.18;
animation:moveParticles 30s linear infinite;
}

@keyframes floatVirus{
0%{transform:translateY(0px) rotate(0deg)}
50%{transform:translateY(-18px) rotate(8deg)}
100%{transform:translateY(0px) rotate(0deg)}
}

@keyframes pulseShield{
0%{transform:scale(1)}
50%{transform:scale(1.08)}
100%{transform:scale(1)}
}

@keyframes rotateCross{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

@keyframes moveParticles{
from{transform:translateY(0px)}
to{transform:translateY(-120px)}
}

.desktop-layout,
.help{
position:relative;
z-index:2;
}