/*
Theme Name: Worm Clash Home
Description: Home Worm Clash con CSS encapsulado y cache-busting.
Version: 13.3.0
Author: Worm Clash
*/

html, body {
  margin: 0 !important;
  width: 100%;
  min-height: 100%;
  background: #001307;
}

body {
  overflow: hidden;
}

#wa-home-v7,
#wa-home-v7 * {
  box-sizing: border-box;
}

#wa-home-v7 {
  --green: #35f64b;
  --green2: #74ff7f;
  --dark: #00180b;
  --panel: rgba(0, 30, 14, .84);
  width: 100vw;
  height: 100vh;
  min-height: 680px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background:
    radial-gradient(circle at 50% 26%, rgba(35,255,80,.22), transparent 33%),
    radial-gradient(circle at 12% 24%, rgba(0,255,110,.08), transparent 25%),
    linear-gradient(180deg,#003719 0%,#001307 100%);
}

#wa-home-v7::before {
  content: "";
  position: absolute;
  inset: -80px;
  opacity: .34;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(65,255,100,.22) 49%, rgba(65,255,100,.22) 51%, transparent 53%),
    linear-gradient(-30deg, transparent 47%, rgba(65,255,100,.22) 49%, rgba(65,255,100,.22) 51%, transparent 53%);
  background-size: 74px 74px;
  pointer-events: none;
}

#wa-home-v7 .wa7-orb {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--orb,#50ff6c);
  box-shadow: 0 0 18px var(--orb,#50ff6c), 0 0 36px var(--orb,#50ff6c);
  opacity: .95;
  z-index: 1;
}

#wa-home-v7 .wa7-o1 { left: 8%; top: 25%; --orb:#ffcc34; }
#wa-home-v7 .wa7-o2 { left: 20%; top: 50%; --orb:#50edff; }
#wa-home-v7 .wa7-o3 { right: 12%; top: 30%; --orb:#ff4ac8; }
#wa-home-v7 .wa7-o4 { right: 22%; top: 55%; --orb:#7cff54; }
#wa-home-v7 .wa7-o5 { left: 12%; bottom: 20%; --orb:#9b5cff; }

#wa-home-v7 .wa7-main {
  position: relative;
  z-index: 5;
  width: min(620px, 90vw);
  text-align: center;
  transform: translateY(-72px);
}

#wa-home-v7 .wa7-logo {
  margin: 0;
  font-weight: 1000;
  line-height: .76;
  letter-spacing: 3px;
  font-size: clamp(68px, 8vw, 118px);
  color: #48ff59;
  text-shadow:
    0 3px 0 #0d8c2a,
    0 0 20px rgba(45,255,75,.9),
    0 0 55px rgba(45,255,75,.55);
}

#wa-home-v7 .wa7-logo span {
  display: block;
  margin-top: 8px;
  font-size: .61em;
  color: #eaffed;
  text-shadow:
    0 3px 0 #14682c,
    0 0 18px rgba(67,255,90,.75);
}

#wa-home-v7 .wa7-subtitle {
  margin: 22px 0 18px;
  font-size: 20px;
  font-weight: 700;
  color: #d8ffe0;
}

#wa-home-v7 .wa7-name {
  display: block;
  width: min(370px, 88vw);
  height: 56px;
  margin: 0 auto;
  padding: 0 28px;
  border: 0 !important;
  border-radius: 999px !important;
  outline: none;
  background: #fff !important;
  color: #222 !important;
  text-align: center;
  font-size: 21px !important;
  font-weight: 700;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.15);
}

#wa-home-v7 .wa7-play,
#wa-home-v7 .wa7-friend {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(370px, 88vw);
  margin: 16px auto 0 !important;
  border-radius: 999px !important;
  font-family: inherit;
  cursor: pointer;
  text-transform: none;
}

#wa-home-v7 .wa7-play {
  height: 72px;
  border: 0 !important;
  background: linear-gradient(180deg,#55ff65 0%,#12ca37 100%) !important;
  color: #fff !important;
  font-size: 29px !important;
  font-weight: 1000 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.46),
    0 0 0 4px rgba(43,255,76,.18),
    0 0 28px rgba(43,255,76,.55);
}

#wa-home-v7 .wa7-play:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#wa-home-v7 .wa7-friend {
  height: 52px;
  border: 2px solid #39f65a !important;
  background: rgba(0,31,12,.78) !important;
  color: #63ff7c !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(50,255,84,.17);
}

#wa-home-v7 .wa7-links {
  margin-top: 16px;
  color: #d8ffe0;
  font-size: 14px;
  letter-spacing: .6px;
}

#wa-home-v7 .wa7-links a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 760px) {
  #wa-home-v7 {
    min-height: 640px;
  }
  #wa-home-v7 .wa7-main {
    transform: translateY(-82px);
  }
  #wa-home-v7 .wa7-logo {
    font-size: 66px;
  }
  #wa-home-v7 .wa7-subtitle {
    font-size: 16px;
    margin: 16px 0 14px;
  }
  #wa-home-v7 .wa7-name {
    height: 50px;
    font-size: 18px !important;
  }
  #wa-home-v7 .wa7-play {
    height: 60px;
    font-size: 24px !important;
  }
  #wa-home-v7 .wa7-friend {
    height: 46px;
    font-size: 13px !important;
  }
#wa-home-v7 .wa7-skin-icon {
    font-size: 34px;
  }
}

/* ===== v7.1: selector inferior responsive ===== */
@media (max-height: 820px) and (min-width: 761px){
  #wa-home-v7 .wa7-main{
    transform: translateY(-92px);
  }

  #wa-home-v7 .wa7-logo{
    font-size: clamp(60px, 6.7vw, 90px);
  }

  #wa-home-v7 .wa7-logo span{
    margin-top: 5px;
  }

  #wa-home-v7 .wa7-subtitle{
    margin: 16px 0 14px;
    font-size: 18px;
  }

  #wa-home-v7 .wa7-name{
    height: 50px;
  }

  #wa-home-v7 .wa7-play{
    height: 62px;
    margin-top: 13px !important;
    font-size: 26px !important;
  }

  #wa-home-v7 .wa7-friend{
    height: 46px;
    margin-top: 12px !important;
  }

  #wa-home-v7 .wa7-links{
    margin-top: 10px;
  }

#wa-home-v7 .wa7-skin-icon{
    font-size: 34px;
  }

}

@media (max-width: 1100px) and (min-width: 761px){
}

@media (max-width: 760px){
  body{
    overflow: auto;
  }

  #wa-home-v7{
    min-height: 100svh;
    height: auto;
    padding: 24px 10px 176px;
    overflow: hidden;
  }

  #wa-home-v7 .wa7-main{
    width: 100%;
    transform: none;
    margin-top: 0;
  }

}


/* ===== v7.2: mini renders CSS de personajes ===== */
/* ojos base */
/* clásico */
#wa-home-v7 .wa7-classic{
  --c1:#7cff84;--c2:#20c943;--glow:#50ff6d;
}

/* vampiro */
#wa-home-v7 .wa7-vamp{
  --c1:#ff4057;--c2:#630014;--glow:#ff365a;
}
#wa-home-v7 .wa7-vamp b{
  background:linear-gradient(145deg,#2a0b18,#7d0d2a);
}
#wa-home-v7 .wa7-vamp b::before,
#wa-home-v7 .wa7-vamp b::after{
  background:#ffefef;
  box-shadow:inset 0 -4px 0 #ff244c;
}

/* dragón */
#wa-home-v7 .wa7-dragon{
  --c1:#ffb13b;--c2:#ef421b;--glow:#ff7b24;
}
#wa-home-v7 .wa7-dragon::after{
  content:"";
  position:absolute;
  right:5px;top:-4px;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:12px solid #ffd45a;
  transform:rotate(20deg);
}

/* robot */
#wa-home-v7 .wa7-robot{
  --c1:#dce9f5;--c2:#6d879e;--glow:#59dfff;
}
#wa-home-v7 .wa7-robot b{
  border-radius:10px;
  background:linear-gradient(145deg,#a7b7c8,#40505f);
}
#wa-home-v7 .wa7-robot b::before{
  left:5px;right:5px;width:auto;height:8px;
  border-radius:7px;
  background:#2cecff;
  box-shadow:0 0 7px #2cecff;
}
#wa-home-v7 .wa7-robot b::after{display:none}

/* ángel */
#wa-home-v7 .wa7-angel{
  --c1:#fffdf2;--c2:#e7ddb5;--glow:#fff2a0;
}
#wa-home-v7 .wa7-angel::after{
  content:"";
  position:absolute;
  right:3px;top:-8px;
  width:26px;height:8px;
  border:3px solid #ffd950;
  border-radius:50%;
  box-shadow:0 0 7px #ffd950;
}

/* hielo */
#wa-home-v7 .wa7-ice{
  --c1:#ddfbff;--c2:#4dcdf5;--glow:#83efff;
}
#wa-home-v7 .wa7-ice::after{
  content:"✦";
  position:absolute;
  right:5px;top:-4px;
  color:#efffff;
  font-size:18px;
  text-shadow:0 0 8px #8ef7ff;
}

/* alien */
#wa-home-v7 .wa7-alien{
  --c1:#b1ff64;--c2:#3acb58;--glow:#8dff6b;
}
#wa-home-v7 .wa7-alien b::before,
#wa-home-v7 .wa7-alien b::after{
  width:10px;height:14px;top:7px;
  background:#17231d;
  box-shadow:none;
}

/* zombie */
#wa-home-v7 .wa7-zombie{
  --c1:#b8d46f;--c2:#586b31;--glow:#9ee85a;
}
#wa-home-v7 .wa7-zombie b{
  background:linear-gradient(145deg,#aec96b,#46532a);
}
#wa-home-v7 .wa7-zombie::after{
  content:"×";
  position:absolute;
  right:11px;bottom:6px;
  color:#4f2c18;
  font-size:14px;
  font-weight:900;
}

/* skeleton */
#wa-home-v7 .wa7-skeleton{
  --c1:#fffbe8;--c2:#cbbd96;--glow:#f5edbd;
}
#wa-home-v7 .wa7-skeleton i{
  background:linear-gradient(145deg,#fffbe8,#cbbd96);
  outline:2px solid rgba(75,65,45,.35);
}
#wa-home-v7 .wa7-skeleton b{
  background:#f5edcf;
}
#wa-home-v7 .wa7-skeleton b::before,
#wa-home-v7 .wa7-skeleton b::after{
  width:9px;height:11px;
  background:#1b1914;
  box-shadow:none;
}

/* cyber */
#wa-home-v7 .wa7-cyber{
  --c1:#712cff;--c2:#19152c;--glow:#7bf6ff;
}
#wa-home-v7 .wa7-cyber i{
  outline:1px solid rgba(100,245,255,.72);
}
#wa-home-v7 .wa7-cyber b{
  border-radius:10px;
  background:linear-gradient(145deg,#251b4b,#0e1020);
}
#wa-home-v7 .wa7-cyber b::before{
  left:5px;right:5px;width:auto;height:8px;
  border-radius:7px;
  background:#63f5ff;
  box-shadow:0 0 8px #63f5ff;
}
#wa-home-v7 .wa7-cyber b::after{display:none}

@media (max-height:820px) and (min-width:761px){
}

@media (max-width:760px){
}


/* ===== v7.3: logo gráfico + gusanos decorativos ===== */
#wa-home-v7 .wa7-logo{
  display:none;
}

#wa-home-v7 .wa7-logo-graphic{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:2px;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.34));
}

#wa-home-v7 .wa7-logo-word{
  display:flex;
  align-items:flex-end;
  gap:2px;
  line-height:.78;
  transform:perspective(700px) rotateX(4deg);
}

#wa-home-v7 .wa7-letter{
  position:relative;
  display:inline-block;
  font-size:clamp(68px,7.4vw,112px);
  font-weight:1000;
  letter-spacing:-7px;
  color:#62ff63;
  -webkit-text-stroke:2px #0d8d29;
  text-shadow:
    0 4px 0 #0e7d28,
    0 8px 0 #075c1d,
    0 0 15px rgba(96,255,99,.95),
    0 0 38px rgba(53,255,78,.6);
}

#wa-home-v7 .wa7-o{
  color:#72ff65;
  padding:0 .03em;
}

#wa-home-v7 .wa7-eye{
  position:absolute;
  top:31%;
  width:.12em;
  height:.15em;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 -.045em 0 #111,0 0 4px rgba(255,255,255,.9);
}
#wa-home-v7 .wa7-eye.e1{ left:35%; }
#wa-home-v7 .wa7-eye.e2{ left:51%; }

#wa-home-v7 .wa7-logo-arena{
  position:relative;
  margin-top:8px;
  padding:3px 24px 7px;
  font-size:clamp(40px,4.8vw,69px);
  line-height:.9;
  font-weight:1000;
  letter-spacing:2px;
  color:#f4fff4;
  -webkit-text-stroke:1px rgba(13,91,35,.7);
  text-shadow:
    0 4px 0 #168235,
    0 8px 0 #095b25,
    0 0 15px rgba(84,255,108,.65);
}
#wa-home-v7 .wa7-logo-arena::before,
#wa-home-v7 .wa7-logo-arena::after{
  content:"";
  position:absolute;
  top:54%;
  width:42px;
  height:4px;
  border-radius:999px;
  background:#59ff76;
  box-shadow:0 0 10px #59ff76;
}
#wa-home-v7 .wa7-logo-arena::before{
  right:100%;
  transform:rotate(-18deg);
}
#wa-home-v7 .wa7-logo-arena::after{
  left:100%;
  transform:rotate(18deg);
}

/* más pellets */
#wa-home-v7 .wa7-o6{left:32%;top:18%;--orb:#74ff57;width:10px;height:10px}
#wa-home-v7 .wa7-o7{right:29%;top:19%;--orb:#ffd24f;width:11px;height:11px}
#wa-home-v7 .wa7-o8{left:8%;bottom:28%;--orb:#ff5b62;width:12px;height:12px}
#wa-home-v7 .wa7-o9{right:7%;bottom:27%;--orb:#5fdcff;width:14px;height:14px}

/* gusanos decorativos */
#wa-home-v7 .wa7-decor-worm{
  position:absolute;
  z-index:2;
  width:245px;
  height:95px;
  pointer-events:none;
  opacity:.96;
  filter:drop-shadow(0 0 13px var(--wg));
}
#wa-home-v7 .wa7-decor-worm span,
#wa-home-v7 .wa7-decor-worm b{
  position:absolute;
  display:block;
  border-radius:50%;
  background:linear-gradient(145deg,var(--w1),var(--w2));
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.26),
    inset -3px -4px 5px rgba(0,0,0,.2);
}
#wa-home-v7 .wa7-decor-worm span:nth-child(1){width:60px;height:60px;left:0;top:18px}
#wa-home-v7 .wa7-decor-worm span:nth-child(2){width:64px;height:64px;left:39px;top:14px}
#wa-home-v7 .wa7-decor-worm span:nth-child(3){width:67px;height:67px;left:82px;top:11px}
#wa-home-v7 .wa7-decor-worm span:nth-child(4){width:70px;height:70px;left:127px;top:8px}
#wa-home-v7 .wa7-decor-worm span:nth-child(5){width:73px;height:73px;left:174px;top:5px}
#wa-home-v7 .wa7-decor-worm b{
  width:82px;height:82px;right:-24px;top:0;
}

#wa-home-v7 .wa7-decor-worm b::before,
#wa-home-v7 .wa7-decor-worm b::after{
  content:"";
  position:absolute;
  top:20px;
  width:18px;height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 -7px 0 #111;
}
#wa-home-v7 .wa7-decor-worm b::before{left:18px}
#wa-home-v7 .wa7-decor-worm b::after{right:17px}

#wa-home-v7 .wa7-decor-green{
  --w1:#76ff65;--w2:#1fc43d;--wg:#44ff5f;
  left:-88px;top:105px;
  transform:rotate(15deg);
}
#wa-home-v7 .wa7-decor-red{
  --w1:#ff4559;--w2:#680017;--wg:#ff3856;
  right:-94px;top:115px;
  transform:scaleX(-1) rotate(11deg);
}
#wa-home-v7 .wa7-decor-red b{
  background:linear-gradient(145deg,#3b0a18,#8a112d);
}
#wa-home-v7 .wa7-decor-red b::before,
#wa-home-v7 .wa7-decor-red b::after{
  background:#fff;
  box-shadow:inset 0 -7px 0 #ff2547;
}
#wa-home-v7 .wa7-decor-blue{
  --w1:#7df6ff;--w2:#1d7bea;--wg:#55dfff;
  right:-110px;bottom:178px;
  transform:scaleX(-1) rotate(-14deg) scale(.83);
  opacity:.9;
}

/* animación muy suave */
@keyframes wa7FloatLeft{
  from{transform:rotate(15deg) translateY(0)}
  to{transform:rotate(12deg) translateY(-9px)}
}
@keyframes wa7FloatRight{
  from{transform:scaleX(-1) rotate(11deg) translateY(0)}
  to{transform:scaleX(-1) rotate(14deg) translateY(-8px)}
}
#wa-home-v7 .wa7-decor-green{animation:wa7FloatLeft 3.2s ease-in-out infinite alternate}
#wa-home-v7 .wa7-decor-red{animation:wa7FloatRight 3.5s ease-in-out infinite alternate}

/* Evita competir con el menú en pantallas medianas */
@media (max-width:1100px){
  #wa-home-v7 .wa7-decor-worm{opacity:.45;transform:scale(.72)}
  #wa-home-v7 .wa7-decor-red{transform:scaleX(-1) scale(.72)}
  #wa-home-v7 .wa7-decor-blue{display:none}
}
@media (max-width:760px){
  #wa-home-v7 .wa7-decor-worm{display:none}
  #wa-home-v7 .wa7-letter{font-size:62px;letter-spacing:-5px}
  #wa-home-v7 .wa7-logo-arena{font-size:39px;margin-top:3px}
}


/* ===== v7.4: barra lateral ===== */
#wa-home-v7 .wa7-sidebar{
  position:absolute;
  z-index:12;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:74px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:9px;
  border:1px solid rgba(64,255,96,.55);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(0,42,20,.88),rgba(0,20,10,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 24px rgba(38,255,72,.14);
  backdrop-filter:blur(12px);
}

#wa-home-v7 .wa7-side-btn{
  width:56px !important;
  min-width:56px !important;
  height:58px !important;
  margin:0 !important;
  padding:5px !important;
  border:1px solid rgba(92,255,115,.18) !important;
  border-radius:15px !important;
  background:rgba(7,58,28,.74) !important;
  color:#dcffe2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

#wa-home-v7 .wa7-side-btn:hover{
  transform:translateX(3px);
  background:rgba(12,89,39,.92) !important;
  border-color:rgba(105,255,128,.7) !important;
}

#wa-home-v7 .wa7-side-btn.is-active{
  background:
    linear-gradient(180deg,rgba(41,225,74,.95),rgba(18,155,49,.95)) !important;
  border-color:#79ff8b !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 17px rgba(61,255,92,.34) !important;
  color:#fff !important;
}

#wa-home-v7 .wa7-side-icon{
  display:block;
  font-size:22px;
  line-height:1;
}

#wa-home-v7 .wa7-side-label{
  display:block;
  max-width:100%;
  font-size:9px;
  line-height:1;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}

#wa-home-v7 .wa7-sidebar::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width:30px;
  height:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#4cff68;
  box-shadow:0 0 12px #4cff68;
}

/* Mini panel emergente preparado para ranking/ajustes */
#wa-home-v7 .wa7-side-panel{
  position:absolute;
  z-index:11;
  left:104px;
  top:50%;
  transform:translateY(-50%) translateX(-10px);
  width:230px;
  padding:15px;
  border:1px solid rgba(63,255,96,.55);
  border-radius:18px;
  background:rgba(0,25,12,.94);
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.18s ease;
  box-shadow:0 0 24px rgba(47,255,80,.15);
}

#wa-home-v7 .wa7-side-panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}

#wa-home-v7 .wa7-side-panel h3{
  margin:0 0 10px;
  color:#71ff87;
  font-size:15px;
}

#wa-home-v7 .wa7-side-panel p{
  margin:0;
  color:#c8ffd1;
  font-size:12px;
  line-height:1.45;
}

/* responsive */
@media (max-width:1100px){
  #wa-home-v7 .wa7-sidebar{
    left:10px;
    width:64px;
    padding:8px 6px;
  }
  #wa-home-v7 .wa7-side-btn{
    width:50px !important;
    min-width:50px !important;
    height:52px !important;
  }
  #wa-home-v7 .wa7-side-icon{
    font-size:19px;
  }
  #wa-home-v7 .wa7-side-label{
    font-size:8px;
  }
  #wa-home-v7 .wa7-side-panel{
    left:84px;
  }
}

@media (max-width:760px){
  #wa-home-v7 .wa7-sidebar{
    position:fixed;
    left:50%;
    top:auto;
    bottom:168px;
    transform:translateX(-50%);
    width:auto;
    max-width:calc(100vw - 16px);
    height:56px;
    padding:5px 7px;
    flex-direction:row;
    gap:6px;
    border-radius:18px;
  }
  #wa-home-v7 .wa7-sidebar::before{
    display:none;
  }
  #wa-home-v7 .wa7-side-btn{
    width:48px !important;
    min-width:48px !important;
    height:44px !important;
    border-radius:12px !important;
  }
  #wa-home-v7 .wa7-side-label{
    display:none;
  }
  #wa-home-v7 .wa7-side-panel{
    display:none;
  }
}


/* ===== v7.7: scroll vertical de TODA la página ===== */
/* Mantiene la barra lateral igual; solo permite bajar la página completa. */

html{
  min-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

body{
  min-height:100%;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Antes la home quedaba forzada a 100vh y recortaba lo de abajo. */
#wa-home-v7{
  height:auto !important;
  min-height:100vh !important;
  overflow:visible !important;
  padding-bottom:210px;
}

/* El selector sigue visualmente abajo, pero ahora forma parte de una página
   suficientemente alta para poder llegar hasta él haciendo scroll. */
/* En pantallas con poca altura, damos más altura al documento para que
   JUGAR, LOGIN y el selector puedan verse completos desplazándose. */
@media (max-height:760px) and (min-width:761px){
  #wa-home-v7{
    min-height:820px !important;
  }

  #wa-home-v7 .wa7-main{
    transform:translateY(-70px);
  }
}

@media (max-height:650px) and (min-width:761px){
  #wa-home-v7{
    min-height:900px !important;
  }
}

/* En móvil también permitimos scroll natural de página. */
@media (max-width:760px){
  html,body{
    overflow-y:auto !important;
  }

  #wa-home-v7{
    min-height:900px !important;
    padding-bottom:190px;
  }

}


/* ===== v7.8: HOME -> JUEGO en la misma URL ===== */
#wa-live-game{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  background:#001007;
}

body.wa-game-open{
  overflow:hidden !important;
}

body.wa-game-open #wa-home-v7{
  display:none !important;
}

body.wa-game-open #wa-live-game{
  display:block;
}

#wa-live-game .wa-live-game-inner{
  position:absolute;
  inset:0;
}

#wa-live-game .wa-game-root{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#wa-live-game .wa-start{
  /* The Home already selected the skin/name. JS hides this when starting. */
}

#wa-back-home{
  position:absolute;
  z-index:100010;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  margin:0 !important;
  padding:8px 15px !important;
  border:1px solid rgba(100,255,130,.65) !important;
  border-radius:999px !important;
  background:rgba(0,25,12,.78) !important;
  color:#dffff0 !important;
  font:800 12px/1 Arial,sans-serif !important;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 0 14px rgba(45,255,80,.15) !important;
  backdrop-filter:blur(7px);
}

#wa-back-home:hover{
  background:rgba(15,105,43,.92) !important;
}

#wa-live-game .wa-game-missing{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(520px,90vw);
  padding:28px;
  border:1px solid #45ff65;
  border-radius:20px;
  background:#00200d;
  color:#eaffee;
  text-align:center;
  font:16px/1.5 Arial,sans-serif;
}

@media(max-width:760px){
  #wa-back-home{
    top:6px;
    padding:7px 12px !important;
    font-size:10px !important;
  }
}


/* ===== v7.9: una sola barra de scroll ===== */
/* El doble scroll venía de permitir scroll tanto en <html> como en <body>. */
html{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  min-height:100%;
}

body{
  overflow-x:hidden !important;
  overflow-y:visible !important;
  min-height:100%;
}

/* Cuando el juego está abierto no debe existir scroll de página. */
body.wa-game-open{
  overflow:hidden !important;
}

body.wa-game-open #wa-live-game{
  overflow:hidden !important;
}

/* Evita que contenedores generales generen una segunda barra vertical. */
#wa-home-v7{
  overflow-x:hidden !important;
  overflow-y:visible !important;
}


/* ===== v8.0: sidebar fijada al VIEWPORT, no al alto extendido de la Home ===== */
/* La Home puede medir 820/900px para permitir scroll, pero la barra lateral
   ahora toma como referencia la ventana visible y no ese contenedor alto. */
#wa-home-v7 .wa7-sidebar{
  position:fixed !important;
  left:18px !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}

#wa-home-v7 .wa7-side-panel{
  position:fixed !important;
  left:104px !important;
  top:50% !important;
  transform:translateY(-50%) translateX(-10px) !important;
}

#wa-home-v7 .wa7-side-panel.is-open{
  transform:translateY(-50%) translateX(0) !important;
}

@media (max-width:1100px) and (min-width:761px){
  #wa-home-v7 .wa7-sidebar{
    left:10px !important;
  }
  #wa-home-v7 .wa7-side-panel{
    left:84px !important;
  }
}

@media (max-width:760px){
  #wa-home-v7 .wa7-sidebar{
    position:fixed !important;
    left:50% !important;
    top:auto !important;
    bottom:168px !important;
    transform:translateX(-50%) !important;
  }
}


/* ===== v8.1: personalización completa del Clásico ===== */
/* La fila gana un poco de espacio sin romper el layout. */
@media (max-height:820px) and (min-width:761px){
}

@media (max-width:760px){
}


/* ===== v8.2: subir selector de SKINS ===== */
/* Mantiene el diseño actual, solo eleva la caja de skins para que no quede pegada/cortada abajo. */

/* Pantallas con poca altura: sube un poco más para asegurar que todo el panel sea visible. */
@media (max-height:820px) and (min-width:761px){
}

@media (max-height:700px) and (min-width:761px){
}

/* Móvil: dejar espacio sobre el borde inferior y controles del navegador. */
@media (max-width:760px){
}


/* ===== v8.3: acercar SKINS al menú central ===== */
/* El bloque estaba demasiado abajo y dejaba demasiado vacío entre Login y las skins. */

/* En pantallas algo más bajas lo acercamos igualmente, sin que se corte. */
@media (max-height:820px) and (min-width:761px){
}

@media (max-height:700px) and (min-width:761px){
}

@media (max-width:760px){
}


/* ===== v8.4: aprovechar el espacio libre y subir SKINS bastante más ===== */
/* El bloque de skins entra ahora en la zona vacía debajo de LOGIN. */

/* Pantallas medianas */
@media (max-height:820px) and (min-width:761px){
}

/* Pantallas más bajas */
@media (max-height:700px) and (min-width:761px){
}

/* Móvil */
@media (max-width:760px){
}


/* ===== v8.5: skins sin tapar el gusano azul ===== */
/* Reducimos el ancho del selector y lo desplazamos un poco a la izquierda
   para dejar una zona libre visual en el lado derecho. */

/* Ajuste fino de las tarjetas para que las 10 sigan cabiendo bien. */
/* El gusano azul queda más visible y separado del selector. */
#wa-home-v7 .wa7-decor-blue{
  right:-72px !important;
  bottom:155px !important;
  z-index:3 !important;
}

/* Pantallas medianas: mantenemos margen de seguridad a ambos lados. */
@media (max-width:1180px) and (min-width:761px){
#wa-home-v7 .wa7-decor-blue{
    opacity:.68 !important;
    right:-105px !important;
  }
}

/* Pantallas bajas */
@media (max-height:820px) and (min-width:761px){
}

@media (max-height:700px) and (min-width:761px){
}

/* Móvil: usar todo el ancho y ocultar la decoración azul para evitar solapes. */
@media (max-width:760px){
#wa-home-v7 .wa7-decor-blue{
    display:none !important;
  }
}


/* ===== v9.5: SKINS como pantalla SPA en el dominio principal ===== */
#wa-home-v7 .wa-skins-view{
  position:absolute;
  inset:0;
  z-index:80;
  display:none;
  overflow:auto;
  padding:18px 26px 28px;
  color:#fff;
  background:
    radial-gradient(circle at 50% 26%, rgba(65,255,100,.13), transparent 34%),
    radial-gradient(circle at 15% 30%, rgba(0,255,120,.07), transparent 25%),
    linear-gradient(180deg,rgba(0,42,20,.98),rgba(0,15,8,.995));
}

#wa-home-v7 .wa-skins-view::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  pointer-events:none;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(70,255,110,.25) 49%, rgba(70,255,110,.25) 51%, transparent 53%),
    linear-gradient(-30deg, transparent 47%, rgba(70,255,110,.25) 49%, rgba(70,255,110,.25) 51%, transparent 53%);
  background-size:82px 82px;
}

body.wa-skins-open{
  overflow:hidden !important;
}

body.wa-skins-open #wa-home-v7 .wa7-main,
body.wa-skins-open #wa-home-v7 .wa7-sidebar,
body.wa-skins-open #wa-home-v7 .wa7-side-panel,
body.wa-skins-open #wa-home-v7 .wa7-decor-worm,
body.wa-skins-open #wa-home-v7 > .wa7-orb{
  visibility:hidden !important;
  pointer-events:none !important;
}

body.wa-skins-open #wa-home-v7 .wa-skins-view{
  display:block;
  visibility:visible !important;
  pointer-events:auto !important;
}

#wa-home-v7 .wa-skins-topbar{
  position:relative;
  z-index:2;
  min-height:64px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  max-width:1220px;
  margin:0 auto;
}

#wa-home-v7 .wa-skins-back{
  justify-self:start;
  min-width:104px;
  height:42px;
  padding:0 17px;
  border:1px solid rgba(89,255,122,.72);
  border-radius:999px;
  background:rgba(0,27,12,.72);
  color:#e8ffed;
  font-weight:900;
  letter-spacing:.5px;
  cursor:pointer;
}

#wa-home-v7 .wa-skins-brand{
  text-align:center;
  font-weight:1000;
  line-height:.83;
  filter:drop-shadow(0 0 14px rgba(61,255,86,.5));
}
#wa-home-v7 .wa-skins-brand span{
  display:block;
  color:#4cff60;
  font-size:30px;
  letter-spacing:3px;
}
#wa-home-v7 .wa-skins-brand strong{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:22px;
  letter-spacing:5px;
}

#wa-home-v7 .wa-skins-testing{
  justify-self:end;
  padding:9px 13px;
  border:1px solid rgba(106,255,139,.28);
  border-radius:999px;
  background:rgba(0,20,9,.58);
  color:#8aff9d;
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
}

#wa-home-v7 .wa-skins-stage{
  position:relative;
  z-index:2;
  width:min(1180px,96%);
  margin:8px auto 0;
  text-align:center;
}

#wa-home-v7 .wa-skins-title{
  margin:12px 0 10px;
  color:#caffd4;
  font-size:14px;
  font-weight:900;
  letter-spacing:2.3px;
}

#wa-home-v7 .wa-skin-preview-wrap{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 72px;
  align-items:center;
  gap:14px;
  max-width:1000px;
  margin:0 auto;
}

#wa-home-v7 .wa-skin-arrow{
  width:58px;
  height:58px;
  border:2px solid rgba(79,255,94,.72);
  border-radius:50%;
  background:rgba(0,28,10,.72);
  color:#6fff72;
  font:900 42px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 0 18px rgba(59,255,80,.13);
}

#wa-home-v7 .wa-skin-preview-card{
  min-height:390px;
  padding:24px 28px 22px;
  border:1px solid rgba(78,255,108,.32);
  border-radius:32px;
  background:
    radial-gradient(circle at 50% 30%,rgba(67,255,98,.08),transparent 42%),
    rgba(0,21,10,.68);
  box-shadow:
    inset 0 0 40px rgba(40,255,80,.035),
    0 18px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(7px);
}

#wa-home-v7 .wa-skin-worm{
  --skin1:#61ff57;
  --skin2:#19a737;
  --skin3:#d7ffd3;
  --skin-glow:#55ff66;
  position:relative;
  width:min(720px,88%);
  height:135px;
  margin:18px auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 0 12px var(--skin-glow));
}

#wa-home-v7 .wa-skin-worm > span{
  flex:0 0 60px;
  height:60px;
  margin-left:-22px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.55),transparent 18%),
    radial-gradient(circle at 42% 38%,var(--skin1),var(--skin2) 72%);
  border:2px solid color-mix(in srgb,var(--skin2) 75%,#001107);
  box-shadow:
    inset -8px -8px 14px rgba(0,0,0,.22),
    inset 8px 7px 12px rgba(255,255,255,.06);
}

#wa-home-v7 .wa-skin-worm > span:first-child{
  margin-left:0;
}

#wa-home-v7 .wa-skin-worm > b{
  position:relative;
  flex:0 0 78px;
  height:78px;
  margin-left:-18px;
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.58),transparent 20%),
    radial-gradient(circle at 45% 45%,var(--skin1),var(--skin2) 76%);
  border:2px solid color-mix(in srgb,var(--skin2) 75%,#001107);
  box-shadow:inset -10px -10px 17px rgba(0,0,0,.25);
}

#wa-home-v7 .wa-skin-worm > b i{
  position:absolute;
  top:19px;
  width:17px;
  height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 -4px 4px rgba(0,0,0,.12);
}
#wa-home-v7 .wa-skin-worm > b i::after{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  width:7px;
  height:8px;
  border-radius:50%;
  background:#07120c;
}
#wa-home-v7 .wa-skin-worm > b i:first-child{ left:19px; }
#wa-home-v7 .wa-skin-worm > b i:last-child{ right:15px; }

/* Skin palettes */
#wa-home-v7 .wa-skin-worm.skin-classic{--skin1:#68ff5a;--skin2:#159d35;--skin-glow:#4dff62}
#wa-home-v7 .wa-skin-worm.skin-vampire{--skin1:#ff3650;--skin2:#560713;--skin-glow:#ff183a}
#wa-home-v7 .wa-skin-worm.skin-dragon{--skin1:#ffb13d;--skin2:#cc4014;--skin-glow:#ff762e}
#wa-home-v7 .wa-skin-worm.skin-robot{--skin1:#9be8ff;--skin2:#2c6c8d;--skin-glow:#45d8ff}
#wa-home-v7 .wa-skin-worm.skin-angel{--skin1:#fff6bc;--skin2:#d7b447;--skin-glow:#ffe57a}
#wa-home-v7 .wa-skin-worm.skin-ice{--skin1:#d1fbff;--skin2:#3ca9db;--skin-glow:#78efff}
#wa-home-v7 .wa-skin-worm.skin-alien{--skin1:#9dff42;--skin2:#26761e;--skin-glow:#9cff3e}
#wa-home-v7 .wa-skin-worm.skin-zombie{--skin1:#9cab52;--skin2:#445322;--skin-glow:#89a84e}
#wa-home-v7 .wa-skin-worm.skin-skeleton{--skin1:#f5f4dc;--skin2:#7d8177;--skin-glow:#efefd9}
#wa-home-v7 .wa-skin-worm.skin-ghost{--skin1:#eefeff;--skin2:#7ab9c7;--skin-glow:#bdfcff}
#wa-home-v7 .wa-skin-worm.skin-lava{--skin1:#4a2822;--skin2:#1a1110;--skin-glow:#ff6a24}
#wa-home-v7 .wa-skin-worm.skin-bee{--skin1:#ffd72d;--skin2:#161616;--skin-glow:#fff16a}
#wa-home-v7 .wa-skin-worm.skin-ninja{--skin1:#24272d;--skin2:#0b0c0f;--skin-glow:#d52d42}
#wa-home-v7 .wa-skin-worm.skin-mummy{--skin1:#ead9b6;--skin2:#9d845b;--skin-glow:#f2d38a}
#wa-home-v7 .wa-skin-worm.skin-cyber{--skin1:#c65dff;--skin2:#5512a4;--skin-glow:#a326ff}
#wa-home-v7 .wa-skin-worm.skin-shark{--skin1:#82d9ff;--skin2:#1d628a;--skin-glow:#5dd7ff}
#wa-home-v7 .wa-skin-worm.skin-cow{--skin1:#f5f5f0;--skin2:#313333;--skin-glow:#dffff7}
#wa-home-v7 .wa-skin-worm.skin-abyss{--skin1:#7cff39;--skin2:#0c771f;--skin-glow:#52ff4b}
#wa-home-v7 .wa-skin-worm.skin-pacman{--skin1:#fff02d;--skin2:#d28d00;--skin-glow:#ffe82b}

#wa-home-v7 .wa-skin-meta{
  margin-top:2px;
}

#wa-home-v7 .wa-skin-rarity{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#92ffa2;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
}

#wa-home-v7 .wa-skin-meta h2{
  margin:9px 0 4px;
  font-size:30px;
}

#wa-home-v7 .wa-skin-meta p{
  min-height:24px;
  margin:0;
  color:#bde9c7;
  font-size:14px;
}

#wa-home-v7 .wa-skin-equip{
  min-width:235px;
  height:58px;
  margin-top:17px;
  border:2px solid rgba(130,255,146,.76);
  border-radius:19px;
  background:linear-gradient(180deg,#42ff5e,#0dce3a);
  color:#003313;
  font-size:18px;
  font-weight:1000;
  letter-spacing:.7px;
  cursor:pointer;
  box-shadow:
    0 0 0 7px rgba(46,255,76,.08),
    0 0 28px rgba(41,255,67,.25);
}

#wa-home-v7 .wa-skin-selected-msg{
  height:24px;
  margin-top:10px;
  color:#8cff9c;
  font-size:12px;
  font-weight:800;
}

#wa-home-v7 .wa-skin-strip{
  display:grid;
  grid-template-columns:repeat(12,minmax(60px,1fr));
  gap:9px;
  margin:18px auto 0;
  max-width:1180px;
}

#wa-home-v7 .wa-skin-thumb{
  min-width:0;
  min-height:76px;
  padding:8px 6px;
  border:1px solid rgba(75,255,99,.18);
  border-radius:14px;
  background:rgba(0,28,12,.55);
  color:#d9ffe0;
  cursor:pointer;
  transition:.16s ease;
}
#wa-home-v7 .wa-skin-thumb:hover,
#wa-home-v7 .wa-skin-thumb.is-active{
  border-color:#54ff64;
  background:rgba(15,92,35,.62);
  box-shadow:0 0 18px rgba(57,255,72,.11);
  transform:translateY(-2px);
}
#wa-home-v7 .wa-skin-thumb .mini{
  display:flex;
  justify-content:center;
  align-items:center;
  height:30px;
  margin-bottom:4px;
}
#wa-home-v7 .wa-skin-thumb .mini i{
  width:17px;
  height:17px;
  margin-left:-5px;
  border-radius:50%;
  background:var(--mini,#5cff65);
  box-shadow:0 0 7px var(--mini,#5cff65);
}
#wa-home-v7 .wa-skin-thumb .mini i:first-child{margin-left:0}
#wa-home-v7 .wa-skin-thumb strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}

@media(max-width:900px){
  #wa-home-v7 .wa-skins-testing{display:none}
  #wa-home-v7 .wa-skin-strip{grid-template-columns:repeat(4,minmax(95px,1fr))}
  #wa-home-v7 .wa-skin-preview-wrap{grid-template-columns:52px minmax(0,1fr) 52px}
  #wa-home-v7 .wa-skin-arrow{width:48px;height:48px;font-size:34px}
  #wa-home-v7 .wa-skin-worm{transform:scale(.86)}
}

@media(max-width:600px){
  #wa-home-v7 .wa-skins-view{padding:12px 12px 22px}
  #wa-home-v7 .wa-skins-topbar{grid-template-columns:auto 1fr}
  #wa-home-v7 .wa-skins-brand{justify-self:end}
  #wa-home-v7 .wa-skin-preview-card{padding:15px 12px;min-height:330px}
  #wa-home-v7 .wa-skin-worm{width:115%;margin-left:-7.5%;transform:scale(.72)}
  #wa-home-v7 .wa-skin-strip{grid-template-columns:repeat(3,minmax(88px,1fr))}
}


/* ===== v9.6: flechas centradas + previews más fieles al juego ===== */
#wa-home-v7 .wa-skin-arrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1 !important;
}
#wa-home-v7 .wa-skin-arrow span{
  display:block;
  transform:translateY(-1px);
  line-height:1;
}
#wa-home-v7 #wa-skin-prev,
#wa-home-v7 #wa-skin-next{
  font-family:Arial,sans-serif !important;
}

/* Base skin rendering closer to the actual in-game bodies */
#wa-home-v7 .wa-skin-worm > span,
#wa-home-v7 .wa-skin-worm > b{
  background:
    radial-gradient(circle at 33% 27%,rgba(255,255,255,.70),transparent 14%),
    radial-gradient(circle at 47% 47%,var(--skin1) 0 46%,var(--skin2) 78%,#06140b 100%) !important;
  border-color:color-mix(in srgb,var(--skin2) 72%,#06140b) !important;
}

#wa-home-v7 .wa-skin-worm > span{
  position:relative;
}

/* Vampire: dark red, pale face and fangs */
#wa-home-v7 .wa-skin-worm.skin-vampire > span{
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.35),transparent 14%),
    radial-gradient(circle at 48% 48%,#b51d35 0 38%,#520917 70%,#150106 100%) !important;
}
#wa-home-v7 .wa-skin-worm.skin-vampire > b::before,
#wa-home-v7 .wa-skin-worm.skin-vampire > b::after{
  content:"";
  position:absolute;
  bottom:12px;
  width:9px;height:18px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,50% 100%);
  z-index:3;
}
#wa-home-v7 .wa-skin-worm.skin-vampire > b::before{left:23px}
#wa-home-v7 .wa-skin-worm.skin-vampire > b::after{right:20px}

/* Dragon: orange scales and dorsal spikes */
#wa-home-v7 .wa-skin-worm.skin-dragon > span{
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.35),transparent 13%),
    repeating-radial-gradient(circle at 48% 48%,#ffb238 0 7px,#d24a13 8px 14px,#8c2207 15px 18px) !important;
}
#wa-home-v7 .wa-skin-worm.skin-dragon > span::after{
  content:"";
  position:absolute;
  top:-12px;left:22px;
  width:18px;height:18px;
  background:#f4d12d;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  filter:drop-shadow(0 0 4px #ff762e);
}

/* Robot: metallic panels */
#wa-home-v7 .wa-skin-worm.skin-robot > span,
#wa-home-v7 .wa-skin-worm.skin-robot > b{
  background:
    linear-gradient(135deg,rgba(255,255,255,.55),transparent 25%),
    repeating-linear-gradient(90deg,#9cecff 0 12px,#4e8ca8 13px 18px,#244c61 19px 23px) !important;
  border-color:#7ce8ff !important;
}
#wa-home-v7 .wa-skin-worm.skin-robot > b::before{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:12px;height:8px;
  border-radius:8px;
  background:#19eeff;
  box-shadow:0 0 10px #19eeff;
}

/* Angel: halo and soft gold */
#wa-home-v7 .wa-skin-worm.skin-angel > b::before{
  content:"";
  position:absolute;
  left:13px;right:13px;top:-19px;height:12px;
  border:4px solid #ffe974;
  border-radius:50%;
  box-shadow:0 0 12px #ffe974;
}
#wa-home-v7 .wa-skin-worm.skin-angel > span{
  box-shadow:
    inset -8px -8px 14px rgba(0,0,0,.13),
    0 0 15px rgba(255,236,135,.28) !important;
}

/* Ice: crystalline facets */
#wa-home-v7 .wa-skin-worm.skin-ice > span,
#wa-home-v7 .wa-skin-worm.skin-ice > b{
  background:
    conic-gradient(from 15deg,#e8fdff,#7cecff,#3c9fd3,#d7fbff,#6bdff9,#e8fdff) !important;
  border-color:#9cf2ff !important;
}

/* Alien: neon green with third eye */
#wa-home-v7 .wa-skin-worm.skin-alien > b::before{
  content:"";
  position:absolute;
  left:50%;top:7px;
  transform:translateX(-50%);
  width:11px;height:14px;
  border-radius:50%;
  background:#ecfff0;
  box-shadow:inset 0 -3px 3px rgba(0,0,0,.15),0 0 8px #8cff45;
}
#wa-home-v7 .wa-skin-worm.skin-alien > b::after{
  content:"";
  position:absolute;
  left:50%;top:12px;
  transform:translateX(-50%);
  width:4px;height:5px;border-radius:50%;
  background:#071807;
}

/* Zombie: infected patches */
#wa-home-v7 .wa-skin-worm.skin-zombie > span{
  background:
    radial-gradient(circle at 68% 30%,#5a3d24 0 8%,transparent 9%),
    radial-gradient(circle at 28% 70%,#2b2d19 0 10%,transparent 11%),
    radial-gradient(circle at 47% 47%,#99a853 0 45%,#435226 78%,#1e2813 100%) !important;
}

/* Skeleton: bone rings */
#wa-home-v7 .wa-skin-worm.skin-skeleton > span{
  background:
    repeating-linear-gradient(90deg,#f3f0d9 0 10px,#85887c 11px 15px,#1b221f 16px 18px) !important;
  border-color:#d8d6c4 !important;
}

/* Cyber: purple core + cyan circuit stripe */
#wa-home-v7 .wa-skin-worm.skin-cyber > span,
#wa-home-v7 .wa-skin-worm.skin-cyber > b{
  background:
    linear-gradient(90deg,transparent 0 43%,#39efff 44% 48%,transparent 49% 100%),
    radial-gradient(circle at 47% 47%,#b858ff 0 42%,#5511a4 74%,#1c043a 100%) !important;
  border-color:#ae4dff !important;
  box-shadow:inset -8px -8px 12px rgba(0,0,0,.28),0 0 14px #8126ff !important;
}

/* Shark: ocean blue body + dorsal fin */
#wa-home-v7 .wa-skin-worm.skin-shark > span,
#wa-home-v7 .wa-skin-worm.skin-shark > b{
  background:
    linear-gradient(180deg,#8bdcff 0 45%,#447f99 46% 69%,#d9edf0 70% 100%) !important;
  border-color:#75cde9 !important;
}
#wa-home-v7 .wa-skin-worm.skin-shark > b::before{
  content:"";
  position:absolute;
  top:-20px;left:28px;
  width:25px;height:25px;
  background:#4f8fa9;
  clip-path:polygon(0 100%,50% 0,100% 100%);
}

/* Cow: actual black/white cow pattern */
#wa-home-v7 .wa-skin-worm.skin-cow > span,
#wa-home-v7 .wa-skin-worm.skin-cow > b{
  background:
    radial-gradient(ellipse at 28% 30%,#252525 0 15%,transparent 16%),
    radial-gradient(ellipse at 68% 65%,#222 0 18%,transparent 19%),
    radial-gradient(circle at 45% 45%,#f6f4ee 0 72%,#c9c6bd 100%) !important;
  border-color:#bcbab4 !important;
}
#wa-home-v7 .wa-skin-worm.skin-cow > b::before,
#wa-home-v7 .wa-skin-worm.skin-cow > b::after{
  content:"";
  position:absolute;
  top:2px;
  width:18px;height:13px;
  background:#e9d7a6;
  border-radius:60% 10% 60% 10%;
}
#wa-home-v7 .wa-skin-worm.skin-cow > b::before{left:6px;transform:rotate(-28deg)}
#wa-home-v7 .wa-skin-worm.skin-cow > b::after{right:6px;transform:scaleX(-1) rotate(-28deg)}

/* Abyss: dark armor + neon toxic energy */
#wa-home-v7 .wa-skin-worm.skin-abyss > span,
#wa-home-v7 .wa-skin-worm.skin-abyss > b{
  background:
    repeating-radial-gradient(ellipse at 45% 45%,#8dff37 0 7px,#1e8e22 8px 14px,#075218 15px 19px) !important;
  border-color:#52c934 !important;
}
#wa-home-v7 .wa-skin-worm.skin-abyss > span::after{
  content:"";
  position:absolute;
  right:6px;top:4px;
  width:16px;height:16px;
  background:#e2262c;
  clip-path:polygon(0 50%,100% 0,75% 100%);
}

/* PacWorm: arcade yellow + mouth */
#wa-home-v7 .wa-skin-worm.skin-pacman > span,
#wa-home-v7 .wa-skin-worm.skin-pacman > b{
  background:
    radial-gradient(circle at 34% 28%,#fff891 0 12%,transparent 13%),
    radial-gradient(circle at 48% 48%,#ffec2f 0 55%,#d99a00 80%,#8d5900 100%) !important;
  border-color:#e9b31d !important;
}
#wa-home-v7 .wa-skin-worm.skin-pacman > b::before{
  content:"";
  position:absolute;
  right:-2px;top:25px;
  width:36px;height:30px;
  background:#03140a;
  clip-path:polygon(0 0,100% 50%,0 100%,22% 50%);
}


/* v9.7: preview generado por EL MISMO renderer del juego */
#wa-home-v7 .wa-exact-preview-stage{
  position:relative;
  width:min(900px,96%);
  height:185px;
  margin:5px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
#wa-home-v7 .wa-skin-exact-preview{
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:none;
}
#wa-home-v7 .wa-exact-preview-stage.has-exact .wa-skin-exact-preview{
  display:block;
}
#wa-home-v7 .wa-exact-preview-stage.has-exact .wa-preview-fallback{
  display:none !important;
}
#wa-home-v7 .wa-exact-preview-stage .wa-skin-worm{
  margin:0 auto !important;
}



/* ===== v9.8: un solo preview, el render exacto del juego ===== */
#wa-home-v7 .wa-skin-preview-card{
  overflow:hidden;
}
#wa-home-v7 .wa-exact-preview-stage{
  width:min(930px,94%) !important;
  height:190px !important;
  margin:8px auto 0 !important;
  overflow:hidden;
}
#wa-home-v7 .wa-skin-exact-preview{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
#wa-home-v7 .wa-skin-preview-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8cff9c;
  font-size:13px;
  font-weight:800;
  letter-spacing:.7px;
}
#wa-home-v7 .wa-exact-preview-stage.has-exact .wa-skin-preview-loading{
  display:none !important;
}
#wa-home-v7 .wa-preview-fallback,
#wa-home-v7 .wa-exact-preview-stage .wa-skin-worm{
  display:none !important;
}


/* Ghost Worm fallback preview */
#wa-home-v7 .wa-skin-worm.skin-ghost{
  opacity:.88;
  filter:drop-shadow(0 0 14px #bdfcff);
}
#wa-home-v7 .wa-skin-worm.skin-ghost > span{
  background:
    radial-gradient(circle at 42% 34%,rgba(255,255,255,.92) 0 18%,transparent 19%),
    radial-gradient(circle at 50% 52%,rgba(225,250,252,.84) 0 45%,rgba(121,185,199,.58) 78%,rgba(44,99,118,.34) 100%) !important;
}
#wa-home-v7 .wa-skin-worm.skin-ghost > b{
  background:
    radial-gradient(circle at 50% 44%,rgba(239,253,254,.92) 0 48%,rgba(113,181,195,.62) 78%,rgba(41,88,105,.38) 100%) !important;
}


/* Lava Worm fallback preview */
#wa-home-v7 .wa-skin-worm.skin-lava{
  filter:drop-shadow(0 0 14px #ff5a1f);
}
#wa-home-v7 .wa-skin-worm.skin-lava > span{
  background:
    linear-gradient(72deg,transparent 42%,rgba(255,108,31,.9) 43% 48%,transparent 49%),
    linear-gradient(118deg,transparent 47%,rgba(255,164,45,.85) 48% 52%,transparent 53%),
    radial-gradient(circle at 38% 35%,#654039 0 16%,#35211e 35%,#160f0e 76%,#0c0909 100%) !important;
}
#wa-home-v7 .wa-skin-worm.skin-lava > b{
  background:
    linear-gradient(35deg,transparent 43%,rgba(255,98,29,.88) 44% 49%,transparent 50%),
    radial-gradient(circle at 42% 38%,#684038 0 18%,#39231f 40%,#140e0d 78%,#090707 100%) !important;
}


/* Bee Worm fallback preview */
#wa-home-v7 .wa-skin-worm.skin-bee{
  filter:drop-shadow(0 0 13px rgba(255,215,45,.78));
}
#wa-home-v7 .wa-skin-worm.skin-bee > span{
  background:
    linear-gradient(90deg,
      #ffd72d 0 18%,
      #171717 18% 35%,
      #ffd72d 35% 55%,
      #171717 55% 72%,
      #ffd72d 72% 100%) !important;
}
#wa-home-v7 .wa-skin-worm.skin-bee > b{
  background:
    radial-gradient(circle at 68% 32%,#171717 0 8%,transparent 9%),
    radial-gradient(circle at 68% 68%,#171717 0 8%,transparent 9%),
    radial-gradient(circle at 42% 40%,#fff075 0 18%,#ffd42e 52%,#c78a05 100%) !important;
}


/* Ninja Worm fallback preview */
#wa-home-v7 .wa-skin-worm.skin-ninja{
  filter:drop-shadow(0 0 12px rgba(213,45,66,.62));
}
#wa-home-v7 .wa-skin-worm.skin-ninja > span{
  background:
    linear-gradient(90deg,
      transparent 0 38%,
      rgba(181,32,48,.92) 39% 48%,
      transparent 49% 100%),
    radial-gradient(circle at 38% 35%,#3c4047 0 18%,#202329 48%,#090a0c 100%) !important;
}
#wa-home-v7 .wa-skin-worm.skin-ninja > b{
  background:
    linear-gradient(90deg,
      transparent 0 30%,
      rgba(171,31,46,.95) 31% 40%,
      transparent 41% 100%),
    radial-gradient(circle at 70% 32%,#f0f0ec 0 7%,#1a1a1c 8% 13%,transparent 14%),
    radial-gradient(circle at 70% 68%,#f0f0ec 0 7%,#1a1a1c 8% 13%,transparent 14%),
    radial-gradient(circle at 40% 40%,#353941 0 18%,#1e2025 48%,#090a0c 100%) !important;
}


/* Mummy Worm fallback preview */
#wa-home-v7 .wa-skin-worm.skin-mummy{
  filter:drop-shadow(0 0 12px rgba(242,211,138,.55));
}
#wa-home-v7 .wa-skin-worm.skin-mummy > span{
  background:
    repeating-linear-gradient(22deg,rgba(255,248,226,.85) 0 5px,rgba(168,138,91,.45) 6px 9px),
    radial-gradient(circle at 38% 35%,#f2e6cc 0 18%,#cbb58c 48%,#7f6848 100%) !important;
}
#wa-home-v7 .wa-skin-worm.skin-mummy > b{
  background:
    radial-gradient(circle at 70% 32%,#dfff6e 0 6%,#2b3514 7% 12%,transparent 13%),
    radial-gradient(circle at 70% 68%,#dfff6e 0 6%,#2b3514 7% 12%,transparent 13%),
    repeating-linear-gradient(18deg,rgba(255,248,226,.88) 0 5px,rgba(164,133,86,.48) 6px 9px),
    radial-gradient(circle at 40% 40%,#f2e6cc 0 18%,#cbb58c 48%,#7f6848 100%) !important;
}

/* ===== v11.15.1: 8-skin selector visibility fix ===== */
@media (min-width:901px){
  #wa-home-v7 .wa-skin-strip{
    grid-template-columns:repeat(12,minmax(60px,1fr)) !important;
    max-width:1180px;
    gap:8px;
    margin-top:12px;
  }
  #wa-home-v7 .wa-skin-thumb{
    min-height:70px;
    padding:7px 5px;
  }
  #wa-home-v7 .wa-skin-thumb strong{
    font-size:10px;
  }
}

/* ===== v11.16.0: 9-skin selector visibility fix ===== */
@media (min-width:901px){
  #wa-home-v7 .wa-skin-strip{
    grid-template-columns:repeat(12,minmax(60px,1fr)) !important;
    max-width:1180px;
    gap:7px;
    margin-top:12px;
  }
  #wa-home-v7 .wa-skin-thumb{
    min-height:68px;
    padding:7px 5px;
  }
  #wa-home-v7 .wa-skin-thumb strong{
    font-size:10px;
  }
}

/* v11.17.0: fit 10 skins */
@media (min-width:901px){
  #wa-home-v7 .wa-skin-strip{
    grid-template-columns:repeat(12,minmax(60px,1fr)) !important;
    max-width:1200px;
    gap:6px;
    margin-top:12px;
  }
  #wa-home-v7 .wa-skin-thumb{
    min-height:66px;
    padding:6px 4px;
  }
  #wa-home-v7 .wa-skin-thumb strong{
    font-size:9px;
  }
}

/* ===== v11.18.0: 11-skin selector visibility fix ===== */
@media (min-width:901px){
  #wa-home-v7 .wa-skin-strip{
    grid-template-columns:repeat(12,minmax(60px,1fr)) !important;
    max-width:1240px;
    gap:5px;
    margin-top:12px;
  }
  #wa-home-v7 .wa-skin-thumb{
    min-height:64px;
    padding:6px 3px;
  }
  #wa-home-v7 .wa-skin-thumb strong{
    font-size:9px;
  }
}

/* ===== v11.19.0: 12-skin selector visibility fix ===== */
@media (min-width:901px){
  #wa-home-v7 .wa-skin-strip{
    grid-template-columns:repeat(12,minmax(60px,1fr)) !important;
    max-width:1260px;
    gap:5px;
    margin-top:12px;
  }
  #wa-home-v7 .wa-skin-thumb{
    min-height:62px;
    padding:5px 3px;
  }
  #wa-home-v7 .wa-skin-thumb strong{
    font-size:9px;
  }
}

/* ===== v11.21.0: 14-skin selector visibility fix ===== */
@media (min-width:901px){
  #wa-home-v7 .wa-skin-strip{
    grid-template-columns:repeat(14,minmax(52px,1fr)) !important;
    max-width:1320px;
    gap:4px;
    margin-top:12px;
  }
  #wa-home-v7 .wa-skin-thumb{
    min-height:60px;
    padding:5px 2px;
  }
  #wa-home-v7 .wa-skin-thumb strong{
    font-size:8px;
  }
}


/* ===== v13.0: live Canvas skin preview + 1000-skin catalog window ===== */
#wa-home-v7 canvas.wa-skin-exact-preview{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:initial !important;
  background:transparent;
}
#wa-home-v7 .wa-skin-strip{
  contain:layout style paint;
}
#wa-home-v7 .wa-skin-thumb{
  content-visibility:auto;
  contain-intrinsic-size:110px 86px;
}

#wa-home-v7 .wa-skin-tools{
  width:min(620px,92%);
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
#wa-home-v7 .wa-skin-search{
  flex:1;
  min-width:0;
  height:40px;
  border:1px solid rgba(91,255,112,.34);
  border-radius:999px;
  background:rgba(0,18,8,.72);
  color:#f3fff5;
  padding:0 16px;
  outline:none;
}
#wa-home-v7 .wa-skin-search:focus{border-color:#65ff77;box-shadow:0 0 0 3px rgba(80,255,104,.10)}
#wa-home-v7 .wa-skin-count{min-width:74px;color:#8cff9c;font-size:12px;font-weight:800;text-align:right}
#wa-home-v7 .wa-skin-empty{grid-column:1/-1;padding:22px;color:#9ddda8;text-align:center;font-weight:700}