/* =====================================================
   BADLANDS — estilos del juego
   ===================================================== */

/* hidden manda siempre (los display:flex de abajo no deben anularlo) */
#juego [hidden],
.fin-partida[hidden]{display:none!important}

.panel-juego{display:flex;flex-direction:column;align-items:center;gap:5vh;width:100%;margin-top:4vh}

/* botón JUGAR de la portada */
.btn-jugar{
  display:inline-block;margin-top:6vh;
  font-family:'Anton',sans-serif;font-size:clamp(1.4rem,4.5vw,2.4rem);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--blanco);background:var(--rojo-vivo);
  padding:.5em 1.4em;
  border:4px solid var(--negro);
  box-shadow:6px 8px 0 rgba(0,0,0,.55);
  transform:rotate(-1.5deg);
  transition:transform .18s cubic-bezier(.3,1.4,.4,1);
  position:relative;
}
.btn-jugar:hover,.btn-jugar:focus-visible{
  transform:rotate(1deg) scale(1.06);
  animation:sacudida .3s ease;
  background:var(--sangre-brillo);
}
.btn-jugar::after{
  content:"";position:absolute;left:20%;top:100%;
  width:8px;height:10px;
  background:var(--sangre-brillo);
  border-radius:50% 50% 55% 55% / 40% 40% 60% 60%;
  opacity:0;
}
.btn-jugar:hover::after{animation:gota-boton .6s ease-in forwards}

/* tarjetas de papel */
.tarjeta-papel{
  background:var(--papel);color:#1c1c1c;
  width:100%;max-width:460px;
  padding:34px 30px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transform:rotate(-.4deg);
  clip-path:polygon(1% 2%,8% 0%,18% 2%,30% 0%,42% 2%,54% 0%,66% 2%,78% 0%,90% 2%,99% 1%,100% 12%,98% 28%,100% 44%,98% 60%,100% 76%,98% 92%,99% 98%,90% 100%,78% 98%,66% 100%,54% 98%,42% 100%,30% 98%,18% 100%,8% 98%,1% 99%,0% 86%,2% 70%,0% 54%,2% 38%,0% 22%,2% 10%);
  text-align:center;
}
.tarjeta-papel.ancha{max-width:720px}
.tarjeta-papel h3{
  font-family:'Anton',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  margin:1.4em 0 .6em;border-bottom:2px solid var(--negro);
  display:inline-block;padding-bottom:2px;
}

/* pestañas + formularios */
.pestanas{display:flex;gap:8px;justify-content:center;margin-bottom:22px}
.pestana{
  background:none;border:0;cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;
  font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.4em .8em;color:#555;
}
.pestana.activa{background:var(--negro);color:var(--papel);box-shadow:3px 3px 0 rgba(0,0,0,.35)}

.tarjeta-papel form{display:flex;flex-direction:column;gap:16px;align-items:center}
.tarjeta-papel label{
  display:flex;flex-direction:column;gap:6px;width:100%;max-width:300px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;text-align:left;
}
.tarjeta-papel input{
  background:#fff;border:3px solid var(--negro);
  padding:.55em .8em;font-family:'Courier Prime',monospace;font-weight:700;
  font-size:1rem;box-shadow:3px 4px 0 rgba(0,0,0,.25);
}
.tarjeta-papel input:focus{outline:3px solid var(--rojo-vivo)}
.in-codigo{text-transform:uppercase;letter-spacing:.3em;text-align:center;width:180px}

.btn-rojo{
  background:var(--rojo-vivo);color:var(--blanco);
  border:3px solid var(--negro);cursor:pointer;
  font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.55em 1.3em;box-shadow:4px 5px 0 rgba(0,0,0,.4);
  transition:transform .15s;
  /* como enlace <a> es en linea: sin esto el relleno pisa el texto de arriba */
  display:inline-block;line-height:1.15;text-decoration:none;
  margin:6px 0;vertical-align:middle;
}
.btn-rojo:hover{animation:sacudida .3s ease;background:var(--sangre-brillo)}
.btn-rojo:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.btn-rojo.grande{font-size:1.2rem;padding:.6em 1.6em}

.enlace{background:none;border:0;cursor:pointer;color:var(--sangre);
  font-family:inherit;font-size:.85rem;text-decoration:underline;margin-top:10px}

.separador{
  margin:22px 0 14px;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:#666;
  display:flex;align-items:center;gap:12px;
}
.separador::before,.separador::after{content:"";flex:1;border-top:1px dashed #999}

.hola{margin-bottom:20px}
.msg{min-height:1.4em;margin-top:14px;font-weight:700;color:#2c6e2c}
.msg.error{color:var(--sangre-brillo)}
.nota{font-size:.8rem;color:#555;margin:10px 0 6px}
.codigo-sala{margin-bottom:14px}
.codigo-sala b{
  display:inline-block;margin-bottom:4px;
  font-family:'Courier Prime',monospace;font-size:1.6rem;letter-spacing:.35em;
  background:var(--negro);color:#ffd34d;padding:.15em .5em;margin-left:.3em;
  box-shadow:3px 4px 0 rgba(0,0,0,.35);
}

/* sala */
.lista-jugadores{list-style:none;margin:6px 0 4px}
.lista-jugadores li{
  display:flex;justify-content:space-between;gap:14px;
  padding:.45em 0;border-bottom:1px dashed rgba(0,0,0,.25);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.95rem;
}
.rejilla-villanos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-top:8px;
}
.carta-villano{
  background:#fff;border:3px solid var(--negro);cursor:pointer;
  padding:14px 12px;text-align:left;
  display:flex;flex-direction:column;gap:5px;
  box-shadow:4px 5px 0 rgba(0,0,0,.3);
  border-top:8px solid var(--cv,#d92323);
  transition:transform .15s;
  font-family:'Courier Prime',monospace;
}
.carta-villano:hover{transform:translateY(-3px) rotate(-.5deg)}
.carta-villano.elegido{outline:4px solid var(--cv);background:#fff8ea}
.carta-villano b{font-family:'Anton',sans-serif;letter-spacing:.05em;font-size:1.05rem}
.carta-villano i{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#666;font-style:normal}
.carta-villano span{font-size:.85rem;font-weight:700}
.carta-villano small{font-size:.72rem;color:#444;line-height:1.4}
.botonera{margin-top:24px;display:flex;flex-direction:column;gap:8px;align-items:center}


/* ===== partida v2: tablero anillo ===== */
.mesa{display:flex;gap:26px;width:100%;max-width:1100px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.zona-tablero{display:flex;flex-direction:column;align-items:center;gap:14px}

.turno-actual{
  font-family:'Anton',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--papel);text-shadow:1px 2px 3px rgba(0,0,0,.6);font-size:1.1rem;
}
.turno-actual.mio{color:#ffd34d;animation:parpadeo-turno 1.6s ease-in-out infinite}
@keyframes parpadeo-turno{0%,100%{opacity:1}50%{opacity:.55}}

.marco-tablero{position:relative;width:min(94vw,720px)}
.tablero-anillo{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(6,1fr);
  gap:0;
  background:var(--negro);
  border:4px solid var(--negro);
  box-shadow:0 16px 40px rgba(0,0,0,.65);
  aspect-ratio:10/6;
}
.casilla{
  position:relative;border:2px solid var(--sangre-brillo);cursor:pointer;padding:0;
  background:#0e0e0e;
  background-image:linear-gradient(135deg,rgba(255,255,255,.045),rgba(0,0,0,.25));
  transition:background .15s;
}
.casilla:hover{background-color:#1c1414}
.hueco-centro{
  grid-column:2 / 10;grid-row:2 / 6;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#160202,#000);
  color:rgba(217,35,35,.16);
  font-family:'Anton',sans-serif;font-size:clamp(1.6rem,6vw,3.4rem);letter-spacing:.3em;
  border:2px solid var(--sangre-brillo);
  user-select:none;
}
.casilla.pista-mover{box-shadow:inset 0 0 0 4px #ffd34d;background-color:#241c08}
.casilla.pista-atacar{box-shadow:inset 0 0 0 4px var(--rojo-vivo);background-color:#2a0a0a;animation:late-pista 1s ease-in-out infinite}
.casilla.pista-casilla{box-shadow:inset 0 0 0 4px #3aa0d9;background-color:#0a1a24}
@keyframes late-pista{0%,100%{box-shadow:inset 0 0 0 4px var(--rojo-vivo)}50%{box-shadow:inset 0 0 0 6px var(--rojo-vivo)}}
.objeto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(.8rem,2.4vw,1.3rem);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}

/* fichas: imágenes de cuerpo entero */
.capa-fichas{position:absolute;inset:0;pointer-events:none}
.ficha-pj{
  position:absolute;width:9%;z-index:10;
  transform:translate(-50%,-88%);
  transition:left .45s cubic-bezier(.3,1.2,.4,1), top .45s cubic-bezier(.3,1.2,.4,1);
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.65));
  display:flex;flex-direction:column;align-items:center;
}
.ficha-pj img{order:1;width:100%;height:auto;display:block}
/* El nick va DEBAJO, dentro de su propia casilla: encima se metía
   en la casilla de arriba y se pisaba con la ficha de al lado. */
.ficha-pj .eti{
  position:static;order:3;margin-top:1px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.52rem;
  color:#fff;padding:.05em .35em;border-radius:3px;
  border:1px solid rgba(0,0,0,.5);text-shadow:1px 1px 1px rgba(0,0,0,.6);
  white-space:nowrap;max-width:190%;overflow:hidden;text-overflow:ellipsis;
  opacity:.92;
}
.ficha-pj .mini-vida{
  order:2;width:110%;height:6px;margin-top:2px;
  background:rgba(0,0,0,.75);border:1px solid rgba(0,0,0,.9);border-radius:3px;overflow:hidden;
}
.ficha-pj .mini-vida i{display:block;height:100%;transition:width .5s ease}
.ficha-pj.mia{z-index:3}
.ficha-pj.turno::before{
  content:"";position:absolute;bottom:-6%;left:50%;transform:translateX(-50%);
  width:120%;aspect-ratio:3/1;border-radius:50%;
  border:3px dashed rgba(255,211,77,.9);
  animation:gira-suelo 5s linear infinite;
}
@keyframes gira-suelo{to{transform:translateX(-50%) rotate(360deg)}}
.ficha-pj.gigante{width:13%;filter:drop-shadow(0 0 14px rgba(217,35,35,.9)) drop-shadow(0 6px 8px rgba(0,0,0,.65))}
.ficha-pj.muerta{opacity:0;transition:opacity 1s ease}
.ficha-pj.golpe{animation:golpe .45s ease}
@keyframes golpe{
  0%,100%{transform:translate(-50%,-88%) rotate(0)}
  25%{transform:translate(-54%,-88%) rotate(-7deg)}
  55%{transform:translate(-46%,-87%) rotate(6deg)}
}

/* capa de efectos */
.capa-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:5}
.fx-dano{
  position:absolute;transform:translate(-50%,-140%);
  font-family:'Anton',sans-serif;font-size:clamp(1.1rem,3.4vw,1.9rem);
  color:#ff4040;-webkit-text-stroke:1.5px #200;
  text-shadow:0 0 10px rgba(255,40,40,.8);
  animation:sube-dano 1.3s ease-out forwards;
}
@keyframes sube-dano{
  0%{opacity:0;transform:translate(-50%,-110%) scale(.6)}
  15%{opacity:1;transform:translate(-50%,-150%) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-320%) scale(1)}
}
.fx-proyectil{
  position:absolute;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-90%);
  background:radial-gradient(circle at 35% 35%,#fff,#ffb74d 45%,var(--rojo-vivo));
  box-shadow:0 0 12px rgba(255,120,40,.95);
  transition:left .4s ease-in, top .4s ease-in;
}
.fx-explosion{
  position:absolute;width:16%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-70%);
  background:radial-gradient(circle,#fff6c8,#ffab40 35%,var(--rojo-vivo) 65%,transparent 72%);
  animation:boom .7s ease-out forwards;
}
.fx-explosion.lluvia{background:radial-gradient(circle,#fff,#ffd34d 30%,var(--rojo-vivo) 60%,transparent 70%)}
.fx-explosion.pisoton{background:radial-gradient(circle,rgba(255,255,255,.9),rgba(120,60,20,.9) 40%,transparent 70%)}
@keyframes boom{
  0%{opacity:0;transform:translate(-50%,-70%) scale(.2)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-70%) scale(1.7)}
}
.fx-texto{
  position:absolute;transform:translate(-50%,-160%);
  font-family:'Anton',sans-serif;font-size:clamp(.85rem,2.6vw,1.3rem);letter-spacing:.06em;
  color:#fff;text-shadow:0 0 8px rgba(0,0,0,.9);
  animation:sube-dano 1.2s ease-out forwards;
}
.fx-texto.esq{color:#8fd3ff}
.fx-texto.tajo{color:#ffd34d;font-size:clamp(1.2rem,4vw,2rem)}
.fx-texto.muerte{color:var(--rojo-vivo);font-size:clamp(1.3rem,4.4vw,2.2rem)}

/* anuncios (tal le quitó X de vida a cual) */
.anuncios{
  position:absolute;top:8px;left:0;right:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
}
.anuncio{
  max-width:92%;
  background:rgba(10,0,0,.85);color:var(--papel);
  border-left:5px solid var(--rojo-vivo);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:clamp(.7rem,2.2vw,.9rem);
  padding:.45em .9em;box-shadow:0 6px 16px rgba(0,0,0,.6);
  animation:entra-anuncio .3s cubic-bezier(.3,1.4,.4,1);
}
.anuncio.fuera{animation:sale-anuncio .4s ease forwards}
@keyframes entra-anuncio{0%{opacity:0;transform:translateY(-14px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes sale-anuncio{to{opacity:0;transform:translateY(-10px)}}

/* acciones */
.acciones{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn-accion{
  background:var(--negro);color:var(--papel);
  border:3px solid var(--papel);cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.5em .8em;box-shadow:3px 4px 0 rgba(0,0,0,.45);
}
.btn-accion small{color:#ffd34d;margin-left:4px}
.btn-accion.activo{background:var(--rojo-vivo);border-color:var(--negro)}
.btn-accion.pasar{background:var(--papel);color:var(--negro);border-color:var(--negro)}
.btn-accion.extra{border-color:#ffd34d}
.btn-accion:hover{animation:sacudida .3s ease}

/* retrato en la carta de villano */
.carta-villano .retrato{width:54px;height:auto;align-self:center;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.4))}

.lateral{
  background:rgba(14,14,14,.82);color:var(--papel);
  padding:20px 22px;width:300px;max-width:92vw;
  box-shadow:0 14px 36px rgba(0,0,0,.5);
}
.lateral h3{
  font-family:'Anton',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  font-size:.95rem;margin-bottom:10px;color:#ffd34d;
}
.lateral h3+*{margin-bottom:18px}
.lista-estado{list-style:none}
.lista-estado li{padding:.35em 0;font-family:'Courier Prime',monospace;font-weight:700;font-size:.78rem}
.lista-estado li.muerto{opacity:.45}
.cab-estado{display:flex;justify-content:space-between;gap:10px;margin-bottom:3px}
.barra-vida{height:9px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden}
.barra-vida span{display:block;height:100%;transition:width .5s ease}
.cronica{
  max-height:200px;overflow-y:auto;
  font-family:'Special Elite',monospace;font-size:.76rem;line-height:1.6;
  border-left:3px solid var(--sangre);padding-left:10px;
}
.cronica p{margin-bottom:.4em}

@media (max-width:900px){
  .mesa{flex-direction:column;align-items:center}
  .lateral{width:min(94vw,720px)}
  .ficha-pj .eti{font-size:.5rem}
}

/* ===== banner de cambio de turno ===== */
.banner-turno{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.banner-turno::before{
  content:"";position:absolute;left:-10%;right:-10%;height:34%;
  background:linear-gradient(100deg,transparent 0%,rgba(10,0,0,.94) 12%,rgba(61,5,5,.96) 50%,rgba(10,0,0,.94) 88%,transparent 100%);
  border-top:3px solid var(--sangre-brillo);border-bottom:3px solid var(--sangre-brillo);
  transform:skewY(-3deg);
  animation:banda-turno 2.1s cubic-bezier(.2,1,.3,1) forwards;
}
.banner-turno span{
  position:relative;
  font-family:'Anton',sans-serif;
  font-size:clamp(1.6rem,6vw,3.4rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--papel);text-shadow:3px 3px 0 var(--sangre-brillo),0 0 24px rgba(217,35,35,.7);
  transform:skewY(-3deg);
  animation:texto-turno 2.1s cubic-bezier(.2,1,.3,1) forwards;
}
.banner-turno.propio span{
  color:#ffd34d;text-shadow:3px 3px 0 var(--negro),0 0 30px rgba(255,211,77,.9);
}
@keyframes banda-turno{
  0%{transform:skewY(-3deg) translateX(-105%)}
  16%,82%{transform:skewY(-3deg) translateX(0)}
  100%{transform:skewY(-3deg) translateX(105%)}
}
@keyframes texto-turno{
  0%{opacity:0;transform:skewY(-3deg) translateX(-60vw) scale(1.4)}
  18%{opacity:1;transform:skewY(-3deg) translateX(0) scale(1)}
  24%{transform:skewY(-3deg) translateX(0) scale(1.06)}
  30%,80%{opacity:1;transform:skewY(-3deg) translateX(0) scale(1)}
  100%{opacity:0;transform:skewY(-3deg) translateX(60vw) scale(1.2)}
}
.marco-tablero.tiembla{animation:tiembla-marco .5s ease}
@keyframes tiembla-marco{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-5px,3px)}
  40%{transform:translate(5px,-3px)}
  60%{transform:translate(-4px,-2px)}
  80%{transform:translate(3px,2px)}
}
.btn-accion.sonido{border-color:#8fd3ff;min-width:2.8em}

/* tooltip de habilidades */
.tooltip-juego{
  position:fixed;z-index:300;width:260px;
  background:var(--papel);color:#1c1c1c;
  font-family:'Courier Prime',monospace;font-weight:700;
  font-size:.72rem;line-height:1.5;
  padding:.6em .8em;
  border:3px solid var(--negro);
  box-shadow:4px 5px 0 rgba(0,0,0,.45);
  pointer-events:none;
}
.tooltip-juego::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-7px;
  border:7px solid transparent;border-top-color:var(--negro);
}
.tooltip-juego[hidden]{display:none}

/* fin de partida */
.fin-partida{
  position:fixed;inset:0;z-index:210;
  background:rgba(10,0,0,.75);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
}
.fin-partida .tarjeta-papel{max-width:380px;display:flex;flex-direction:column;gap:20px;align-items:center}
.fin-partida .ransom{font-size:2.4rem}

@media (max-width:900px){
  .mesa{flex-direction:column;align-items:center}
  .lateral{width:min(92vw,640px)}
}

/* esquiva declarada */
.ficha-pj.esquivando img{filter:drop-shadow(0 0 7px #7fe3ff) drop-shadow(0 0 14px rgba(127,227,255,.6))}
.ficha-pj.esquivando .eti::after{content:" 💨"}

/* ===== panel de usuario ===== */
.stats-panel{display:flex;gap:26px;justify-content:center;margin:14px 0 8px;flex-wrap:wrap}
.stats-panel div{display:flex;flex-direction:column;align-items:center}
.stats-panel b{font-family:'Anton',sans-serif;font-size:1.8rem;color:var(--sangre)}
.stats-panel span{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#666}

.rejilla-skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:12px}
.carta-skin{
  background:#fff;border:3px solid var(--negro);cursor:pointer;
  padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:4px 5px 0 rgba(0,0,0,.3);transition:transform .15s;
  font-family:'Courier Prime',monospace;
}
.carta-skin:hover{transform:translateY(-3px)}
.carta-skin .aura{
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--cs) 55%);
  box-shadow:0 0 12px var(--cs),0 0 26px var(--cs);
}
.carta-skin b{font-family:'Anton',sans-serif;letter-spacing:.05em}
.carta-skin i{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#666;font-style:normal;min-height:1em}
.carta-skin small{font-size:.7rem;color:#444;line-height:1.4}
.carta-skin.equipada{outline:4px solid var(--cs);background:#fff8ea}
.carta-skin.bloqueada{opacity:.55;cursor:default}
.carta-skin.bloqueada:hover{transform:none}
.carta-skin.cromatica .aura{animation:croma 4s linear infinite}
@keyframes croma{to{filter:hue-rotate(360deg)}}

/* aura de skin en partida */
.ficha-pj{--aura:transparent}
.ficha-pj img{filter:drop-shadow(0 0 6px var(--aura)) drop-shadow(0 0 14px var(--aura))}
.ficha-pj.esquivando img{filter:drop-shadow(0 0 7px #7fe3ff) drop-shadow(0 0 14px rgba(127,227,255,.6))}
.ficha-pj.skin-cromatica img{animation:croma 4s linear infinite}

/* enlace de usuario en la cabecera */
.usuario-mini{
  margin-right:2px;flex-shrink:0;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase;
  color:#ffd34d;text-decoration:none;white-space:nowrap;
  padding:.32em .55em;border:2px solid rgba(255,211,77,.5);
  max-width:170px;overflow:hidden;text-overflow:ellipsis;
}
.usuario-mini:hover{background:rgba(255,211,77,.15);animation:sacudida .3s ease}
.usuario-mini ~ .menu{margin-left:auto}
@media (max-width:960px){
  .usuario-mini{margin-right:6px}
  .hamburguesa{margin-left:auto}
  .usuario-mini ~ .hamburguesa{margin-left:0}
}

.ficha-pj.defensa img{filter:drop-shadow(0 0 7px #ffd34d) drop-shadow(0 0 14px rgba(255,211,77,.55))}
.ficha-pj.defensa .eti::after{content:" 🛡"}

/* ===== economía: tienda / inventario / progreso / colecciones ===== */
.saldo-eco{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:1rem;
  color:var(--papel);text-shadow:1px 2px 3px rgba(0,0,0,.6)}
.saldo-eco b{color:#ffd34d}
.cuerpo-eco{width:100%;max-width:880px;display:flex;flex-direction:column;gap:5vh;align-items:center}
.bloque-eco{width:100%;text-align:center}
.bloque-eco h3{
  font-family:'Anton',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--papel);text-shadow:1px 2px 3px rgba(0,0,0,.6);
  font-size:1.05rem;margin-bottom:16px;
}
.rejilla-eco{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.rejilla-eco.mini{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.carta-eco{
  position:relative;
  background:var(--papel);color:#1c1c1c;
  padding:18px 14px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:4px 5px 0 rgba(0,0,0,.35);
  border:3px solid var(--negro);
  font-family:'Courier Prime',monospace;
}
.carta-eco .icono{font-size:1.9rem;line-height:1}
.carta-eco b{font-family:'Anton',sans-serif;letter-spacing:.04em;font-size:.92rem;line-height:1.35}
.carta-eco small{font-size:.7rem;line-height:1.45;color:#444;min-height:2.2em}
.carta-eco .cantidad{
  position:absolute;top:-10px;right:-8px;
  background:var(--rojo-vivo);color:#fff;
  font-weight:700;font-size:.78rem;padding:.2em .5em;
  border:2px solid var(--negro);box-shadow:2px 3px 0 rgba(0,0,0,.4);
  transform:rotate(6deg);
}
.precios{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.btn-precio{
  background:var(--rojo-vivo);color:#fff;border:2px solid var(--negro);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.78rem;
  padding:.35em .7em;cursor:pointer;box-shadow:2px 3px 0 rgba(0,0,0,.4);
}
.btn-precio.bad{background:#b8860b}
.btn-precio:hover{animation:sacudida .3s ease}
.btn-precio:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.carta-eco.coleccion{padding:20px 14px 18px;gap:10px}
.carta-eco.coleccion b{
  font-size:.8rem;line-height:1.4;
  white-space:normal;overflow-wrap:break-word;hyphens:auto;
}
.carta-eco.coleccion.bloqueada{opacity:.5;filter:grayscale(.6)}
.aura-mini{width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--cs) 55%);
  box-shadow:0 0 10px var(--cs)}
.msg-eco{color:#ffd34d;text-shadow:1px 1px 2px rgba(0,0,0,.6);max-width:720px}
.msg-eco.error{color:#ff8080}
.nota-eco{color:rgba(245,242,236,.75);font-size:.85rem}
.nota-eco a{color:#ffd34d}

/* camino de progreso */
.camino{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;width:100%}
.cofre{
  background:rgba(14,14,14,.8);color:var(--papel);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.45);
  border:2px solid transparent;
}
.cofre b{font-family:'Anton',sans-serif;font-size:.9rem;color:#ffd34d}
.cofre .caja{font-size:1.7rem;line-height:1}
.cofre small{font-size:.66rem;text-align:center;line-height:1.3;
  font-family:'Courier Prime',monospace;color:rgba(239,232,216,.85)}
.cofre.abierto{opacity:.55}
.cofre.abierto .caja{filter:none}
.cofre.siguiente{border-color:#ffd34d;box-shadow:0 0 14px rgba(255,211,77,.4);animation:latido-cofre 2.4s ease-in-out infinite}
@keyframes latido-cofre{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.compra-niveles{max-width:480px;margin:0 auto}

/* casilla del botin: la X marca el tesoro (50 bloodpoints) */
.objeto.casilla_bp{
  font-family:'Anton',sans-serif;font-size:1.9em;line-height:1;
  color:#ff2b2b;-webkit-text-stroke:1px #7a0d0d;
  text-shadow:0 0 6px rgba(255,255,255,.9), 1px 2px 2px rgba(0,0,0,.55);
  transform:rotate(-8deg);
  animation:brilla-botin 2s ease-in-out infinite;
  z-index:2;
}
@keyframes brilla-botin{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-8deg) scale(1.2)}}

/* trampilla del asesino: rejilla de conductos */
.objeto.trampilla{
  width:64%;height:46%;
  background:
    repeating-linear-gradient(0deg,#0b0b0b 0 3px,#3d4348 3px 6px);
  border:2px solid #14171a;border-radius:4px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.6);
}
/* villano con el hacha clavada */
.ficha-pj.con-hacha::after{
  content:"🪓";position:absolute;top:-8px;right:-6px;font-size:.85em;
  transform:rotate(35deg);filter:drop-shadow(1px 2px 2px rgba(0,0,0,.6));
}
/* carta de villano bloqueada (no lo tienes) */
.carta-villano.bloqueada{opacity:.45;filter:grayscale(.8);cursor:not-allowed}
.carta-villano.bloqueada::after{content:"🔒";position:absolute;top:8px;right:10px;font-size:1.2rem}
.carta-villano{position:relative}
/* seleccion del primer villano */
.aviso-inicial{
  grid-column:1/-1;text-align:center;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.9rem;
  color:#1c1c1c;background:#ffd34d;border:3px solid var(--negro);
  padding:.7em 1em;box-shadow:4px 5px 0 rgba(0,0,0,.35);transform:rotate(-.5deg);
}
.carta-villano.inicial{outline:3px dashed rgba(255,211,77,.0)}
.carta-villano.inicial:hover{outline-color:#ffd34d}

/* ===== destacados de tienda: marcos de periodico ===== */
.fila-destacados{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.marco-periodico{
  background:var(--papel);color:#1c1c1c;
  border:3px double var(--negro);outline:3px solid var(--papel);
  padding:14px 14px 16px;
  box-shadow:6px 8px 0 rgba(0,0,0,.45);
  transform:rotate(-.6deg);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background-image:repeating-linear-gradient(0deg,transparent 0 25px,rgba(0,0,0,.04) 25px 26px);
  font-family:'Courier Prime',monospace;
}
.marco-periodico:nth-child(even){transform:rotate(.6deg)}
.cabecera-periodico{
  font-size:.6rem;letter-spacing:.3em;border-bottom:2px solid var(--negro);
  padding-bottom:3px;width:100%;text-align:center;
}
.marco-periodico h4{
  font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;
  text-align:center;
}
.marco-periodico p{font-size:.72rem;color:#444;text-align:center}
.fotos-periodico{position:relative;display:flex;gap:4px;align-items:flex-end;justify-content:center;min-height:110px;margin:4px 0}
.fotos-periodico img{height:110px;width:auto;filter:grayscale(.25) contrast(1.05) drop-shadow(2px 3px 3px rgba(0,0,0,.35))}
.fotos-periodico img.mini{height:74px}
.rejilla-conducto{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:84px;height:26px;
  background:repeating-linear-gradient(0deg,#0b0b0b 0 3px,#3d4348 3px 6px);
  border:2px solid #14171a;border-radius:4px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.5);
}
.marco-periodico.con-trampilla .fotos-periodico img{height:96px;margin-bottom:14px}
/* inventario: villanos y picker */
.carta-eco img.pj-inv{height:92px;width:auto;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.3))}
.carta-eco.carta-inicial{cursor:pointer;border-top:8px solid var(--cs,#d92323)}
.carta-eco.carta-inicial:hover{transform:translateY(-4px) rotate(-.6deg)}
.camino-bundle{margin-top:1vh;padding-top:3vh;border-top:2px dashed rgba(239,232,216,.35)}
.acciones-panel{margin-bottom:14px}

/* zona de administracion */
.tabla-admin{width:100%;border-collapse:collapse;font-family:'Courier Prime',monospace;font-size:.75rem}
.tabla-admin th{border-bottom:2px solid var(--negro);padding:.3em .35em;text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.tabla-admin td{border-bottom:1px dashed rgba(0,0,0,.2);padding:.35em}
.nick-admin{cursor:pointer;font-weight:700;text-decoration:underline}
.btn-borrar{background:var(--rojo-vivo);color:#fff;border:2px solid var(--negro);cursor:pointer;
  font-size:.7rem;font-weight:700;padding:.2em .5em;box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.titulo-detalle{font-family:'Anton',sans-serif;letter-spacing:.05em;margin:14px 0 6px}
.detalle-lineas{white-space:pre-line;font-family:'Courier Prime',monospace;font-size:.78rem;text-align:left}

/* selector de modo de partida */
.selector-modo{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.pildora-modo{
  background:#fff;border:3px solid var(--negro);cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.45em .8em;box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.pildora-modo.activa{background:var(--rojo-vivo);color:#fff}
.pildora-modo:hover{animation:sacudida .3s ease}
.modo-sala{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:#555;margin-bottom:8px;
}

.btn-rojo.debug-on{background:#111;color:#7CFC00;border-color:#7CFC00;text-shadow:none}

/* lapicito de admin en la tienda */
.btn-lapiz{
  background:#111;color:#ffd34d;border:2px solid var(--negro);cursor:pointer;
  font-size:.8rem;padding:.3em .5em;box-shadow:2px 3px 0 rgba(0,0,0,.4);
}
.editor-precio{
  flex-basis:100%;display:flex;gap:6px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:2px dashed rgba(0,0,0,.25);
}
.editor-precio label{
  display:flex;align-items:center;gap:4px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.8rem;
}
.input-precio{
  width:5.5em;padding:.25em .35em;border:2px solid var(--negro);
  font-family:'Courier Prime',monospace;font-size:.78rem;
}
.btn-precio.cancelar{background:#555}
.aviso-oculto{
  font-family:'Courier Prime',monospace;font-size:.66rem;color:#8a6d0b;
  background:#ffd34d;padding:.15em .5em;margin-top:6px;
}

/* editor de recompensas del admin */
.rejilla-economia{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0 14px}
.campo-eco{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:'Courier Prime',monospace;font-size:.76rem;font-weight:700}

/* zona peligrosa del admin */
.zona-peligro{border:3px dashed #b30000;padding:12px;margin-top:8px;background:rgba(179,0,0,.06)}
.btn-peligro{
  background:#b30000;color:#fff;border:3px solid var(--negro);cursor:pointer;
  font-family:'Anton',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-size:.8rem;padding:.5em .9em;box-shadow:3px 4px 0 rgba(0,0,0,.4);
}
.btn-peligro:hover{animation:sacudida .3s ease}
.input-precio.ancho{width:11em;text-transform:uppercase;letter-spacing:.15em}
#cajaReset{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* cerrar sesion */
.salir-sesion{
  flex-shrink:0;
  background:transparent;color:var(--papel);border:2px solid rgba(245,242,236,.5);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  padding:.3em .55em;margin-left:8px;white-space:nowrap;
}
.salir-sesion:hover{border-color:#ffd34d;color:#ffd34d}
.tarjeta-papel.centrada{text-align:center}
@media (max-width:720px){
  .salir-sesion{margin-left:6px;font-size:.62rem;padding:.25em .45em}
}

/* separacion minima entre el aviso y su boton */
.tarjeta-papel p + p{margin-top:14px}
.tarjeta-papel p{line-height:1.6}

/* la cabecera, SIEMPRE en una sola linea */
@media (min-width:961px){
  .nav-principal{flex-wrap:nowrap !important;max-width:1600px;padding-right:34px}
  .menu{flex-wrap:nowrap !important;flex-shrink:1;min-width:0}
  .menu li{flex-shrink:1;min-width:0}
  .menu a{
    white-space:nowrap;
    /* la letra se ajusta al hueco disponible: nunca salta de linea */
    font-size:clamp(.78rem, .95vw, .95rem);
    padding:.55em clamp(.5em, .75vw, 1em);
    letter-spacing:.04em;
  }
  /* aire entre el ultimo boton y el borde de la pantalla */
  .menu{margin-right:26px}
  .usuario-mini{flex-shrink:1;min-width:0}
  .logo{flex-shrink:0}
}
@media (min-width:961px) and (max-width:1250px){
  .usuario-mini{max-width:110px;font-size:.68rem;margin-left:8px}
  .nav-principal{gap:8px;padding:0 12px}
}


/* colecciones: conseguido, pendiente y solo informativo */
.carta-eco.coleccion{position:relative}
.carta-eco.coleccion.conseguida{border-color:#1f7a1f;box-shadow:4px 5px 0 rgba(31,122,31,.35)}
.carta-eco.coleccion .tick{
  position:absolute;top:-10px;right:-8px;
  background:#1f7a1f;color:#fff;font-weight:700;font-size:.8rem;
  width:1.55em;height:1.55em;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--negro);box-shadow:2px 3px 0 rgba(0,0,0,.4);
  transform:rotate(6deg);
}
.carta-eco.coleccion.info{opacity:.92;border-style:dashed}
.carta-eco.coleccion.bloqueada{opacity:.5;filter:grayscale(.7)}

/* colecciones: cartas mas anchas y con aire */
.rejilla-eco.mini{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:18px}
.carta-eco.coleccion .icono{margin-bottom:2px}
.bloque-eco h3 + .nota-eco{margin:-6px 0 16px}

/* ===== caminata de los villanos =====
   La ficha da un saltito inclinado hacia donde avanza y se aplasta al caer
   (squash & stretch). Se puede apagar desde el panel de administración. */
.ficha-pj .sombra-pj{
  position:absolute;bottom:-4%;left:50%;width:60%;height:10%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  pointer-events:none;
}
.ficha-pj.anda img{animation:anda-derecha .6s ease-in-out}
.ficha-pj.anda-atras img{animation:anda-izquierda .6s ease-in-out}
.ficha-pj.anda .sombra-pj,
.ficha-pj.anda-atras .sombra-pj{animation:sombra-salto .6s ease-in-out}

@keyframes anda-derecha{
  0%   {transform:translateY(0)      rotate(0deg)   scale(1,1)}
  12%  {transform:translateY(2%)     rotate(2deg)   scale(1.06,.94)}
  32%  {transform:translateY(-14%)   rotate(7deg)   scale(.95,1.06)}
  52%  {transform:translateY(0)      rotate(3deg)   scale(1.05,.95)}
  70%  {transform:translateY(-8%)    rotate(-4deg)  scale(.97,1.03)}
  88%  {transform:translateY(0)      rotate(1deg)   scale(1.03,.97)}
  100% {transform:translateY(0)      rotate(0deg)   scale(1,1)}
}
@keyframes anda-izquierda{
  0%   {transform:translateY(0)      rotate(0deg)   scale(1,1)}
  12%  {transform:translateY(2%)     rotate(-2deg)  scale(1.06,.94)}
  32%  {transform:translateY(-14%)   rotate(-7deg)  scale(.95,1.06)}
  52%  {transform:translateY(0)      rotate(-3deg)  scale(1.05,.95)}
  70%  {transform:translateY(-8%)    rotate(4deg)   scale(.97,1.03)}
  88%  {transform:translateY(0)      rotate(-1deg)  scale(1.03,.97)}
  100% {transform:translateY(0)      rotate(0deg)   scale(1,1)}
}
@keyframes sombra-salto{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.55}
  32%    {transform:translateX(-50%) scaleX(.6);opacity:.25}
  70%    {transform:translateX(-50%) scaleX(.8);opacity:.4}
}

/* interruptor apagado: sin saltos ni sombra viva */
body.sin-animaciones .ficha-pj img{animation:none !important}
body.sin-animaciones .ficha-pj .sombra-pj{animation:none !important;opacity:.45}
/* quien no quiere movimiento en su dispositivo, tampoco lo sufre */
@media (prefers-reduced-motion: reduce){
  .ficha-pj.anda img,.ficha-pj.anda-atras img{animation:none}
}

/* ===== la ceremonia del arbol (apertura de brotes) ===== */
.capa-arbol{
  position:fixed;inset:0;z-index:900;
  background:radial-gradient(circle at 50% 62%, #2a0b0b 0%, #120404 60%, #050101 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer;
}
.capa-arbol.sacudida{animation:sacude-capa .45s ease}
@keyframes sacude-capa{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)}
  45%{transform:translate(5px,-4px)}
  70%{transform:translate(-3px,2px)}
}
.cielo-arbol{position:absolute;inset:0;pointer-events:none}
.flash-arbol{position:absolute;inset:0;opacity:0}
.flash-arbol.flash-oro{background:radial-gradient(circle at 50% 55%, rgba(255,211,77,.95), transparent 62%)}
.flash-arbol.flash-rojo{background:radial-gradient(circle at 50% 55%, rgba(255,60,60,.95), transparent 66%)}
.flash-arbol.brilla{animation:destella-arbol .5s ease-out}
@keyframes destella-arbol{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

.pista-arbol{
  position:absolute;top:8%;left:0;right:0;text-align:center;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.9rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:#ffd34d;text-shadow:1px 2px 4px rgba(0,0,0,.8);
}
/* el arbol entero crece desde el suelo: nunca se recorta */
.zona-arbol{
  position:absolute;bottom:20%;left:50%;transform:translateX(-50%);
  width:min(70vw,340px);height:min(52vh,360px);
}
.img-arbol{
  position:absolute;bottom:0;left:50%;
  width:100%;height:auto;display:block;
  transform:translateX(-50%) scale(.06);
  transform-origin:bottom center;
  filter:drop-shadow(0 -6px 14px rgba(0,0,0,.6));
}
.img-arbol.temblando{animation:tiembla-arbol .16s ease-in-out infinite}
@keyframes tiembla-arbol{
  0%,100%{transform:translateX(-50%) rotate(0) scale(var(--e,1))}
  30%{transform:translateX(calc(-50% - 2px)) rotate(-1deg) scale(var(--e,1))}
  70%{transform:translateX(calc(-50% + 2px)) rotate(1deg) scale(var(--e,1))}
}
.suelo-arbol{
  position:absolute;bottom:calc(20% - 14px);left:0;right:0;height:28px;
  background:linear-gradient(180deg,#3a2a1c,#1d1209);
  box-shadow:0 -6px 18px rgba(0,0,0,.7);
}
.suelo-arbol::before{
  content:"";position:absolute;top:-6px;left:0;right:0;height:10px;
  background:repeating-linear-gradient(90deg,#4a3524 0 14px,#3a2a1c 14px 26px);
  clip-path:polygon(0 60%,4% 20%,9% 70%,14% 25%,20% 65%,26% 15%,32% 70%,38% 30%,45% 60%,52% 20%,58% 68%,65% 28%,72% 62%,79% 22%,86% 66%,93% 26%,100% 60%,100% 100%,0 100%);
}
.loot-arbol{
  position:absolute;bottom:4%;left:0;right:0;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 12px;
}
.carta-loot{
  background:var(--papel);color:#1c1c1c;border:3px solid var(--negro);
  padding:12px 10px;min-width:104px;text-align:center;
  box-shadow:4px 5px 0 rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:'Courier Prime',monospace;
  animation:cae-loot .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes cae-loot{
  0%{transform:translateY(-70px) scale(.5) rotate(-12deg);opacity:0}
  65%{transform:translateY(8px) scale(1.12) rotate(3deg);opacity:1}
  100%{transform:translateY(0) scale(1) rotate(0);opacity:1}
}
.carta-loot .icono{font-size:2rem;line-height:1}
.carta-loot b{font-family:'Anton',sans-serif;font-size:.85rem;letter-spacing:.04em;line-height:1.3}
.carta-loot small{font-size:.66rem;color:#555}
.carta-loot .pj-loot{width:74px;height:auto;filter:drop-shadow(2px 3px 4px rgba(0,0,0,.4))}
.carta-loot.rara{border-color:#b8860b;box-shadow:4px 5px 0 rgba(184,134,11,.6)}
.carta-loot.epica{
  border-color:#ffd34d;min-width:132px;
  box-shadow:0 0 0 4px rgba(255,211,77,.35), 4px 6px 0 rgba(0,0,0,.5);
  animation:cae-loot .5s cubic-bezier(.2,1.5,.4,1) both, palpita-epica 1.2s ease-in-out .5s 3;
}
@keyframes palpita-epica{
  0%,100%{box-shadow:0 0 0 4px rgba(255,211,77,.35), 4px 6px 0 rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 16px rgba(255,211,77,0), 4px 6px 0 rgba(0,0,0,.5)}
}

/* boton de silencio dentro de la ceremonia del arbol */
.mudo-arbol{
  position:absolute;top:14px;right:14px;z-index:5;
  background:rgba(0,0,0,.5);color:#ffd34d;border:2px solid rgba(255,211,77,.5);
  font-size:1.1rem;cursor:pointer;padding:.25em .5em;
}

/* aviso de barra libre en modo debug */
.aviso-debug{
  background:#111;color:#7CFC00;border:3px solid #7CFC00;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.8rem;
  padding:.6em 1em;text-align:center;letter-spacing:.05em;
}

/* ===== parte de bugs ===== */
.seccion-bugs{margin-top:6vh;display:flex;flex-direction:column;align-items:center;gap:4vh}
.area-bug{
  width:100%;box-sizing:border-box;margin-top:10px;
  background:#fffdf6;color:#1c1c1c;border:3px solid var(--negro);
  font-family:'Courier Prime',monospace;font-size:.92rem;line-height:1.5;
  padding:12px;resize:vertical;
}
.pie-bug{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.cuenta-bug{font-family:'Courier Prime',monospace;font-size:.72rem;color:#666}

/* cartita del admin, esquina inferior derecha */
.carta-bugs{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:118px;height:96px;cursor:pointer;
  background:var(--papel);border:3px solid var(--negro);
  box-shadow:4px 6px 0 rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .22s cubic-bezier(.3,1.4,.4,1);
}
.carta-bugs:hover,.carta-bugs:focus-visible{transform:translateY(-6px) rotate(2deg) scale(1.05)}
.carta-bugs .sello-bugs{font-size:1.9rem;line-height:1}
.carta-bugs .texto-bugs{
  font-family:'Anton',sans-serif;font-size:.72rem;letter-spacing:.14em;color:#1c1c1c;
}
.carta-bugs .contador-bugs{
  position:absolute;top:-12px;right:-10px;
  background:var(--rojo-vivo);color:#fff;border:3px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.82rem;
  min-width:1.9em;height:1.9em;display:flex;align-items:center;justify-content:center;
  transform:rotate(8deg);
}
.modal-bugs{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center}
/* sin esto, el display:flex de arriba pisa al atributo hidden y no se cierra nunca */
.modal-bugs[hidden]{display:none}
body.sin-scroll{overflow:hidden}
.hoja-bugs{
  position:relative;z-index:2;background:var(--papel);color:#1c1c1c;
  border:4px solid var(--negro);box-shadow:8px 10px 0 rgba(0,0,0,.5);
  width:min(92vw,720px);max-height:86vh;overflow:auto;padding:24px 22px;
}
.cuerpo-bugs{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.parte-bug{border:3px solid var(--negro);background:#fffdf6;padding:12px 14px}
.parte-bug.premiado{border-color:#b8860b;box-shadow:3px 4px 0 rgba(184,134,11,.45)}
.cab-bug{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cab-bug b{font-family:'Anton',sans-serif;letter-spacing:.04em}
.cab-bug small{font-family:'Courier Prime',monospace;font-size:.68rem;color:#777}
.texto-bug{
  font-family:'Courier Prime',monospace;font-size:.86rem;line-height:1.55;
  margin:8px 0 10px;white-space:pre-wrap;overflow-wrap:break-word;
}
.acciones-bug{display:flex;gap:8px;flex-wrap:wrap}
.acciones-bug .btn-precio:disabled{opacity:.5;cursor:default}
@media (max-width:600px){
  .carta-bugs{width:92px;height:78px;right:12px;bottom:12px}
  .carta-bugs .sello-bugs{font-size:1.5rem}
}

/* ===== confirmación de compra ===== */
.modal-compra{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-compra[hidden]{display:none}
.hoja-compra{
  position:relative;z-index:2;text-align:center;
  background:var(--papel);color:#1c1c1c;
  border:4px solid var(--negro);box-shadow:8px 10px 0 rgba(0,0,0,.55);
  width:min(92vw,380px);padding:22px 20px 20px;
  animation:cae-compra .28s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes cae-compra{
  0%{transform:translateY(-24px) scale(.9) rotate(-1.5deg);opacity:0}
  100%{transform:translateY(0) scale(1) rotate(0);opacity:1}
}
.cabecera-mini-compra{
  display:block;font-family:'Courier Prime',monospace;font-weight:700;
  font-size:.6rem;letter-spacing:.28em;color:#6b6b6b;
  border-bottom:2px solid var(--negro);padding-bottom:7px;margin-bottom:12px;
}
.hoja-compra h2{
  font-family:'Anton',sans-serif;font-size:1.25rem;letter-spacing:.03em;
  margin:0 0 14px;text-transform:uppercase;
}
.articulo-compra{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:3px dashed rgba(0,0,0,.3);padding:12px 10px;margin-bottom:12px;
}
.articulo-compra .icono{font-size:2.1rem;line-height:1}
.articulo-compra b{font-family:'Anton',sans-serif;font-size:.98rem;letter-spacing:.03em;line-height:1.3}
.precio-compra{
  font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.04em;
  margin:0 0 4px;color:var(--rojo);
}
.resto-compra{
  font-family:'Courier Prime',monospace;font-size:.72rem;color:#555;margin:0 0 16px;min-height:1em;
}
.resto-compra.no-llega{color:var(--rojo-vivo);font-weight:700}
.acciones-compra{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.acciones-compra .btn-rojo{font-size:.9rem;padding:.5em 1.1em}

/* ===== aviso flotante de bug nuevo ===== */
.aviso-bug{
  position:fixed;right:18px;bottom:18px;z-index:400;
  display:flex;flex-direction:column;gap:3px;
  width:min(84vw,290px);padding:12px 14px;text-decoration:none;
  background:var(--papel);color:#1c1c1c;
  border:3px solid var(--negro);box-shadow:5px 6px 0 rgba(0,0,0,.55);
  animation:entra-aviso .4s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes entra-aviso{
  0%{transform:translateX(120%) rotate(4deg);opacity:0}
  100%{transform:translateX(0) rotate(-1deg);opacity:1}
}
.aviso-bug.yendose{animation:sale-aviso .6s ease forwards}
@keyframes sale-aviso{to{transform:translateX(120%) rotate(4deg);opacity:0}}
.aviso-bug b{font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.03em}
.aviso-bug small{
  font-family:'Courier Prime',monospace;font-size:.72rem;line-height:1.4;color:#444;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pie-aviso-bug{
  font-family:'Courier Prime',monospace;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rojo);border-top:2px solid rgba(0,0,0,.2);
  padding-top:5px;margin-top:3px;
}
/* la cartita da un respingo cuando entra un parte estando en la página */
.carta-bugs.llama{animation:respingo-bug .7s cubic-bezier(.3,1.5,.4,1) 2}
@keyframes respingo-bug{
  0%,100%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-10px) rotate(-4deg) scale(1.08)}
  60%{transform:translateY(0) rotate(3deg) scale(1.03)}
}

/* ===== skins ===== */
.titulo-bloque-skins{
  font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.05em;
  color:var(--papel);text-shadow:2px 3px 0 rgba(0,0,0,.5);
  margin:26px 0 4px;text-align:center;text-transform:uppercase;
}
.bloque-skins{border-left:6px solid var(--cv,#a31515)}
.rejilla-skins-v{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px;margin-top:12px;
}
.carta-skin-v{
  position:relative;background:var(--papel);color:#1c1c1c;
  border:3px solid var(--negro);box-shadow:4px 5px 0 rgba(0,0,0,.45);
  padding:14px 10px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.carta-skin-v img{
  width:100%;max-width:110px;height:120px;object-fit:contain;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,.35));
}
.carta-skin-v b{font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.03em;line-height:1.25}
.carta-skin-v small{font-family:'Courier Prime',monospace;font-size:.68rem;color:#666}
.carta-skin-v.bloqueada img{filter:brightness(0) opacity(.35)}
.carta-skin-v.bloqueada b{color:#8a8a8a}
.carta-skin-v.conseguida{border-color:#1f7a1f;box-shadow:4px 5px 0 rgba(31,122,31,.35)}
.carta-skin-v .tick{
  position:absolute;top:-10px;right:-8px;
  background:#1f7a1f;color:#fff;font-weight:700;font-size:.8rem;
  width:1.55em;height:1.55em;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--negro);box-shadow:2px 3px 0 rgba(0,0,0,.4);transform:rotate(6deg);
}
.carta-skin-v.puesta{border-color:#ffd34d;box-shadow:0 0 0 3px rgba(255,211,77,.35),4px 5px 0 rgba(0,0,0,.45)}
.carta-skin-v.sin-villano img{opacity:.55}
.carta-skin-v .aviso-skin{
  background:#ffd34d;color:#6b5200;font-family:'Courier Prime',monospace;
  font-size:.62rem;padding:.15em .5em;
}
.carta-skin-v .btn-precio{width:100%}
.carta-skin-v .btn-precio:disabled{opacity:.55;cursor:default}
.btn-precio.regalo{background:#6b4ea3}

/* carta de skin nueva y regalo */
.pj-skin-grande{width:150px;height:170px;object-fit:contain;margin:4px auto 8px;display:block;
  filter:drop-shadow(3px 4px 6px rgba(0,0,0,.4))}
.pj-regalo{width:96px;height:110px;object-fit:contain;margin:0 auto 10px;display:block}
.campo-regalo{
  display:flex;flex-direction:column;gap:4px;text-align:left;margin-bottom:10px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.74rem;
}
.campo-regalo .input-precio.ancho{width:100%;box-sizing:border-box}
.hoja-compra select.input-precio{background:#fffdf6}

/* mensaje del administrador */
.icono-mensaje{font-size:2.6rem;line-height:1;margin:6px 0 10px}
.texto-mensaje{
  font-family:'Courier Prime',monospace;font-size:.86rem;line-height:1.6;
  margin:0 0 16px;
}

/* ===== subir y administrar skins ===== */
.subir-skin{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;align-items:end;margin:10px 0 16px;
}
.subir-skin .campo-eco{flex-direction:column;align-items:stretch;gap:4px}
.subir-skin .campo-eco span{font-size:.72rem}
.subir-skin .input-precio.ancho{width:100%;box-sizing:border-box}
.subir-skin input[type=file]{padding:.3em;font-size:.7rem;background:#fffdf6}
.rejilla-skins-admin{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;margin-bottom:16px;
}
.skin-admin{
  position:relative;background:#fffdf6;border:3px solid var(--negro);
  padding:10px 8px;text-align:center;box-shadow:3px 4px 0 rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.skin-admin img{width:100%;max-width:88px;height:96px;object-fit:contain}
.skin-admin b{font-family:'Anton',sans-serif;font-size:.82rem;letter-spacing:.03em}
.skin-admin small{font-family:'Courier Prime',monospace;font-size:.62rem;color:#666;line-height:1.3}
.skin-admin .cuantos{color:#8a6d0b}
.skin-admin.oculta{opacity:.55;border-style:dashed}
.acciones-skin{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.acciones-skin .btn-precio{font-size:.62rem;padding:.3em .45em}
.btn-precio.borrar{background:#b30000}
.editor-nombre{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.editor-nombre .input-precio{width:6.5em}

/* skins del inventario, agrupadas por villano */
.grupo-skins-inv{
  border-left:5px solid var(--cv,#a31515);
  padding:6px 0 6px 12px;margin:14px 0;
}
.grupo-skins-inv h4{
  font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.05em;
  color:var(--papel);margin:0 0 8px;text-transform:uppercase;
}
.carta-skin-v.original .icono-original{font-size:2.6rem;line-height:1;height:120px;
  display:flex;align-items:center;justify-content:center}
.carta-skin-v .etiqueta-puesta{
  position:absolute;top:8px;left:-6px;
  background:#ffd34d;color:#3a2c00;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.6rem;letter-spacing:.1em;
  padding:.1em .45em;transform:rotate(-6deg);
}

/* ===== hemeroteca: pasar de noticia como una página ===== */
.pila-noticias{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;
  perspective:1500px;
}
.noticia[hidden]{display:none}
.noticia{will-change:transform,opacity}

/* la hoja actual se dobla y se va */
.noticia.cierra-izq{
  transform-origin:left center;
  animation:hoja-cierra-izq .32s cubic-bezier(.5,0,.75,0) forwards;
}
.noticia.cierra-dcha{
  transform-origin:right center;
  animation:hoja-cierra-dcha .32s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes hoja-cierra-izq{
  0%  {transform:rotate(-.4deg) rotateY(0);opacity:1}
  100%{transform:rotate(-.4deg) rotateY(-88deg) translateX(-4%);opacity:0}
}
@keyframes hoja-cierra-dcha{
  0%  {transform:rotate(-.4deg) rotateY(0);opacity:1}
  100%{transform:rotate(-.4deg) rotateY(88deg) translateX(4%);opacity:0}
}

/* y la nueva se despliega desde el lado contrario */
.noticia.abre-dcha{
  transform-origin:right center;
  animation:hoja-abre-dcha .36s cubic-bezier(.25,1,.4,1) both;
}
.noticia.abre-izq{
  transform-origin:left center;
  animation:hoja-abre-izq .36s cubic-bezier(.25,1,.4,1) both;
}
@keyframes hoja-abre-dcha{
  0%  {transform:rotate(-.4deg) rotateY(88deg) translateX(4%);opacity:0}
  100%{transform:rotate(-.4deg) rotateY(0) translateX(0);opacity:1}
}
@keyframes hoja-abre-izq{
  0%  {transform:rotate(-.4deg) rotateY(-88deg) translateX(-4%);opacity:0}
  100%{transform:rotate(-.4deg) rotateY(0) translateX(0);opacity:1}
}

/* mando para pasar de hoja */
.mando-noticias{
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin-bottom:-2vh;
}
.hoja-btn{
  background:var(--papel);color:#1c1c1c;border:3px solid var(--negro);
  box-shadow:3px 4px 0 rgba(0,0,0,.5);cursor:pointer;
  font-size:1rem;line-height:1;padding:.45em .8em;
  transition:transform .18s;
}
.hoja-btn:hover:not(:disabled){transform:translateY(-3px)}
.hoja-btn:disabled{opacity:.35;cursor:default;box-shadow:2px 3px 0 rgba(0,0,0,.3)}
.cual-noticia{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--papel);
  text-shadow:1px 2px 3px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion: reduce){
  .noticia.cierra-izq,.noticia.cierra-dcha,
  .noticia.abre-izq,.noticia.abre-dcha{animation:none}
}

.nota-debug{
  display:block;flex-basis:100%;
  font-family:'Courier Prime',monospace;font-size:.66rem;color:#8a6d0b;
  background:#ffd34d;padding:.3em .6em;margin-top:4px;
}

/* ===== easter egg de los cuchillos ===== */
.logo.temblor-logo{animation:tiembla-logo .25s ease-in-out infinite}
@keyframes tiembla-logo{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-2px,1px) rotate(-1.5deg)}
  75%{transform:translate(2px,-1px) rotate(1.5deg)}
}
.capa-secreta{
  position:fixed;inset:0;z-index:500;
  background:rgba(5,0,0,.86);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.caja-secreta{
  background:#0b0b0b;border:3px solid #2fbf2f;
  box-shadow:0 0 40px rgba(47,191,47,.25);
  padding:22px 20px;width:min(92vw,420px);text-align:center;
}
.caja-secreta.niega{animation:niega-caja .35s ease}
@keyframes niega-caja{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-9px)}
  75%{transform:translateX(9px)}
}
.linea-secreta{
  font-family:'Courier Prime',monospace;font-weight:700;color:#2fbf2f;
  font-size:.86rem;letter-spacing:.08em;margin:0 0 12px;
}
.campo-secreto{
  width:100%;box-sizing:border-box;background:#000;color:#2fbf2f;
  border:2px solid #2fbf2f;padding:.6em .7em;
  font-family:'Courier Prime',monospace;font-size:1rem;letter-spacing:.22em;
  text-align:center;outline:none;
}
.campo-secreto:focus{box-shadow:0 0 0 3px rgba(47,191,47,.25)}
.pie-secreto{
  display:block;margin-top:10px;color:#1f7a1f;
  font-family:'Courier Prime',monospace;font-size:.64rem;letter-spacing:.1em;
}
.capa-cuchillos{position:fixed;inset:0;z-index:600;background:#2a0303}
.marco-cuchillos{width:100%;height:100%;border:0;display:block}

/* el logo, a prueba de toques rápidos (sin zoom ni selección) */
.logo{touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}

/* la consola secreta solo se cierra con su X */
.caja-secreta{position:relative}
.cerrar-secreta{
  position:absolute;top:-14px;right:-14px;
  width:38px;height:38px;cursor:pointer;
  background:#0b0b0b;color:#2fbf2f;border:2px solid #2fbf2f;border-radius:6px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:1.3rem;line-height:1;
  box-shadow:0 0 14px rgba(47,191,47,.35);
}
.cerrar-secreta:hover{background:#2fbf2f;color:#0b0b0b}

/* ===== editar a un jugador desde el panel ===== */
.sub-admin{
  font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;margin:16px 0 6px;color:#1c1c1c;
  border-bottom:2px solid rgba(0,0,0,.2);padding-bottom:4px;
}
.casillas-admin{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 12px}
.casilla-admin{
  display:flex;align-items:center;gap:6px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.74rem;
}
.casilla-admin input{width:auto;height:auto}
.marcables{display:flex;flex-wrap:wrap;gap:6px}
.marcable{
  background:#e8e2d4;color:#555;border:2px solid rgba(0,0,0,.35);cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.7rem;
  padding:.35em .6em;
}
.marcable.si{background:#1f7a1f;color:#fff;border-color:var(--negro)}
.marcable:hover{transform:translateY(-2px)}

/* ===== barra de experiencia ===== */
.barra-xp{
  position:relative;flex-basis:100%;
  height:16px;background:rgba(0,0,0,.45);
  border:2px solid var(--negro);overflow:hidden;margin-top:6px;
}
.relleno-xp{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#ffd34d,#ffb300);
  transition:width .5s cubic-bezier(.3,1,.4,1);
  box-shadow:0 0 10px rgba(255,211,77,.55);
}
.texto-xp{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;
  letter-spacing:.1em;color:var(--papel);text-shadow:1px 1px 2px rgba(0,0,0,.9);
}

/* ===== salas abiertas ===== */
.tipo-sala{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 14px}
.titulo-salas{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 8px;
}
.titulo-salas .btn-precio{font-size:.9rem;padding:.2em .5em}
.lista-salas{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sala{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fffdf6;border:3px solid var(--negro);
  padding:10px 12px;box-shadow:3px 4px 0 rgba(0,0,0,.35);
}
.sala.mia{border-color:#b8860b;box-shadow:3px 4px 0 rgba(184,134,11,.5)}
.sala-datos{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px;text-align:left}
.sala-datos b{font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.03em}
.sala-datos small{font-family:'Courier Prime',monospace;font-size:.68rem;color:#666}
.sala-huecos{
  font-family:'Anton',sans-serif;font-size:1.1rem;color:var(--rojo);
  background:#efe8d8;border:2px solid var(--negro);padding:.15em .5em;
}
#btnPublica{margin-bottom:10px}

/* píldoras de modo: dos líneas, con las plazas bien claras */
.selector-modo{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.selector-modo .pildora-modo{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  line-height:1.2;padding:.5em .9em;min-width:118px;
}
.selector-modo .pildora-modo b{
  font-family:'Anton',sans-serif;font-size:.82rem;letter-spacing:.03em;
}
.selector-modo .pildora-modo small{
  font-family:'Courier Prime',monospace;font-size:.62rem;
  letter-spacing:.04em;opacity:.75;text-transform:none;
}
.selector-modo .pildora-modo.activa small{opacity:.95}

/* villano elegido: que se vea SIEMPRE, aunque el villano sea negro */
.carta-villano.elegido{
  outline:4px solid #ffd34d !important;
  background:#fff8ea !important;
  box-shadow:0 0 0 3px rgba(255,211,77,.35), 5px 6px 0 rgba(0,0,0,.45) !important;
  transform:translateY(-3px);
}
.cinta-elegido{
  position:absolute;top:10px;left:-8px;z-index:3;
  background:#ffd34d;color:#3a2c00;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.66rem;letter-spacing:.1em;
  padding:.15em .55em;transform:rotate(-7deg);
  box-shadow:2px 3px 0 rgba(0,0,0,.4);
}

/* el botón de abrir/cerrar sala, sin comerse el título */
#btnPublica{display:block;margin:10px auto 18px}
.panel-juego h3{clear:both}

/* ===== reloj del turno ===== */
.reloj-turno{
  display:inline-block;margin-left:10px;
  font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.06em;
  background:rgba(0,0,0,.55);color:var(--papel);
  border:2px solid rgba(245,242,236,.4);padding:.1em .5em;
}
.reloj-turno.mio{border-color:#ffd34d;color:#ffd34d}
.reloj-turno.apurado{
  background:var(--rojo-vivo);color:#fff;border-color:#fff;
  animation:late-reloj .6s ease-in-out infinite;
}
@keyframes late-reloj{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
/* aviso al abandonar */
.lista-abandono{
  list-style:none;margin:0 0 14px;padding:0;text-align:left;
  font-family:'Courier Prime',monospace;font-size:.76rem;line-height:1.5;
}
.lista-abandono li{padding-left:1.2em;position:relative;margin-bottom:5px}
.lista-abandono li::before{content:"✖";position:absolute;left:0;color:var(--rojo-vivo)}


/* ===== regalar: un botón y una ventana con tres pasos ===== */
.barra-regalo{display:flex;justify-content:center;margin:0 0 18px}
.barra-regalo .btn-rojo{background:#6b4ea3}
.hoja-regalo{width:min(94vw,520px);max-height:88vh;overflow:auto;text-align:left}
.hoja-regalo h2{text-align:center}
.paso-regalo{
  font-family:'Anton',sans-serif;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;margin:14px 0 6px;
  border-bottom:2px solid rgba(0,0,0,.25);padding-bottom:4px;
}
.rejilla-regalo{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:8px;max-height:34vh;overflow:auto;padding:2px;
}
.cosa-regalo{
  position:relative;cursor:pointer;text-align:center;
  background:#efe8d8;border:3px solid rgba(0,0,0,.35);
  padding:10px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.cosa-regalo .ic{font-size:1.5rem;line-height:1}
.cosa-regalo b{font-family:'Courier Prime',monospace;font-size:.68rem;line-height:1.25;font-weight:700}
.cosa-regalo .cuantos-tengo{
  position:absolute;top:-8px;right:-6px;
  background:var(--rojo);color:#fff;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.66rem;padding:.05em .35em;
}
.cosa-regalo .motivo-bloqueo{
  font-family:'Courier Prime',monospace;font-size:.58rem;color:#8a6d0b;
  background:#ffd34d;padding:.1em .3em;margin-top:2px;
}
.cosa-regalo.marcada{
  border-color:#6b4ea3;background:#fff;
  box-shadow:0 0 0 3px rgba(107,78,163,.35);transform:translateY(-2px);
}
.cosa-regalo.bloqueada{opacity:.55;cursor:not-allowed}
.caja-cantidad{display:flex;gap:6px;align-items:center;justify-content:center}
.caja-cantidad .input-precio{width:5em;text-align:center;font-size:1rem}
.caja-cantidad .btn-precio{font-size:1rem;padding:.3em .7em}
.hoja-regalo select.input-precio{width:100%;box-sizing:border-box;background:#fffdf6}

.recado-regalo{
  font-family:'Courier Prime',monospace;font-size:.74rem;font-weight:700;
  text-align:center;margin:0 0 10px;padding:.4em .6em;
  background:#efe8d8;border:2px dashed rgba(0,0,0,.3);color:#444;
}
.recado-regalo.malo{background:var(--rojo-vivo);color:#fff;border-color:var(--negro);border-style:solid}

/* recargas en la barra de acciones */
.btn-accion.recarga{background:#1f5e8a;color:#fff}
.btn-accion.recarga:disabled{opacity:.45;cursor:default}

/* artículo apagado, visto por el admin en la tienda */
.carta-eco.apagada{opacity:.6;border-style:dashed}

/* marca de tiempo en la tienda */
.queda-tiempo{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:#ffd34d;color:#3a2c00;border:2px solid var(--negro);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;
  letter-spacing:.05em;padding:.15em .55em;white-space:nowrap;
  box-shadow:2px 3px 0 rgba(0,0,0,.35);
}

.marco-periodico{position:relative}

/* ===== funciones en pruebas ===== */
.chapa-pruebas{
  display:inline-block;margin-left:8px;flex-shrink:0;
  background:#6b4ea3;color:#fff;border:2px solid var(--negro);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.6rem;
  letter-spacing:.1em;padding:.2em .45em;white-space:nowrap;
  animation:late-pruebas 2.5s ease-in-out infinite;
}
@keyframes late-pruebas{0%,100%{opacity:1}50%{opacity:.55}}
.lista-funciones{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.funcion-fila{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fffdf6;border:3px solid var(--negro);padding:10px 12px;
  box-shadow:3px 4px 0 rgba(0,0,0,.3);
}
.funcion-fila.estado-off{opacity:.65;border-style:dashed}
.funcion-fila.estado-admin{border-color:#6b4ea3}
.funcion-fila.estado-probadores{border-color:#1f5e8a}
.funcion-fila.estado-todos{border-color:#1f7a1f}
.funcion-datos{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px}
.funcion-datos b{font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.03em}
.funcion-datos small{font-family:'Courier Prime',monospace;font-size:.64rem;color:#666}
.estados-funcion{display:flex;gap:4px;flex-wrap:wrap}
.pildora-estado{
  background:#e8e2d4;color:#555;border:2px solid rgba(0,0,0,.3);cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;padding:.3em .5em;
}
.pildora-estado.activa{background:#6b4ea3;color:#fff;border-color:var(--negro)}

.hoja-datos .extra-villano{border-left:4px solid #ffd34d;padding-left:10px}

.cinta-pruebas-villano{
  position:absolute;top:10px;right:-8px;z-index:3;
  background:#6b4ea3;color:#fff;border:2px solid var(--negro);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.58rem;
  letter-spacing:.08em;padding:.15em .45em;transform:rotate(6deg);
  box-shadow:2px 3px 0 rgba(0,0,0,.4);
}

/* verity en forma de caja: el mismo cofre del camino, plantado en el tablero */
.ficha-caja{
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;line-height:1;width:100%;height:100%;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));
  animation:respira-caja 3s ease-in-out infinite;
}
@keyframes respira-caja{
  0%,100%{transform:scale(1) rotate(-2deg)}
  50%{transform:scale(1.06) rotate(2deg)}
}

.ficha-pj.es-caja .eti{background:#8a6d0b !important}

.btn-accion.caja{background:#8a6d0b;color:#fff}
.btn-accion.caja:disabled{opacity:.5;cursor:default}

/* panel de verity para elegir el regalo */
.hoja-verity{width:min(94vw,520px)}
.rejilla-verity{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;margin-top:12px;
}
.rejilla-verity .cosa-regalo:hover{border-color:#8a6d0b;background:#fff}

/* verity no tiene barra de vida: se marca con su sonrisa */
.mini-vida.sin-vida i{width:100% !important;background:#f2c200 !important}
.mini-vida.sin-vida::after{
  content:"∞";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:.6rem;color:#3a2c00;
}
.mini-vida.sin-vida{position:relative}

/* el nick de tu propia ficha, más visible que el de los demás */
.ficha-pj.mia .eti{opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
/* y que nunca tape a otra ficha */
.ficha-pj .eti{position:relative;z-index:0}

/* ===== "Something is coming in 3 days" ===== */
.susto-verity{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(circle at 50% 45%, rgba(120,0,0,.35), rgba(0,0,0,.92) 70%);
  animation:susto-entra .5s ease-out, susto-late 1.1s ease-in-out infinite .5s;
}
.susto-verity.llego{
  background:radial-gradient(circle at 50% 45%, rgba(200,0,0,.55), rgba(0,0,0,.96) 65%);
  animation:susto-entra .28s ease-out, susto-tiembla .12s linear infinite .28s;
}
@keyframes susto-entra{from{opacity:0}to{opacity:1}}
@keyframes susto-late{
  0%,100%{background-size:100% 100%}
  50%{background-size:112% 112%}
}
@keyframes susto-tiembla{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-4px,2px)}
  75%{transform:translate(4px,-2px)}
}
.cara-susto{
  font-size:clamp(4rem,22vw,10rem);line-height:1;
  filter:drop-shadow(0 0 30px rgba(255,60,60,.85));
  animation:cara-crece 2.2s ease-in forwards;
}
.susto-verity.llego .cara-susto{animation:cara-encima 1.6s ease-in forwards}
@keyframes cara-crece{from{transform:scale(.55);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes cara-encima{from{transform:scale(.8)}to{transform:scale(2.6)}}
.texto-susto{
  font-family:'Anton',sans-serif;letter-spacing:.14em;
  font-size:clamp(1.1rem,5.5vw,2.4rem);color:#fff;
  text-shadow:0 0 18px rgba(255,0,0,.9);text-align:center;
}
.dias-susto{
  font-family:'Anton',sans-serif;font-size:clamp(2rem,11vw,5rem);
  color:#ff3b3b;text-shadow:0 0 26px rgba(255,0,0,.8);
  animation:dias-pulso .7s ease-in-out infinite;
}
@keyframes dias-pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* la caja de Huggy en el tablero */
.obj-caja_huggy::before{content:"📦";font-size:1.5rem;line-height:1}
.obj-caja_huggy{filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}

.cinta-pillado{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);
  background:var(--rojo);color:#fff;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.66rem;letter-spacing:.08em;
  padding:.2em .5em;white-space:nowrap;z-index:4;
}

/* Mahoraga con su estampa */
.img-mahoraga{
  width:150%;max-width:none;height:auto;display:block;
  transform:translateY(-18%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.65));
}
.objeto.mahoraga{overflow:visible;display:flex;align-items:flex-end;justify-content:center}

/* interruptor de ocultar en la tienda */
.btn-ojo{
  background:#efe8d8;border:2px solid var(--negro);cursor:pointer;
  font-size:.85rem;line-height:1;padding:.2em .4em;margin-left:4px;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.btn-ojo.apagado{background:#b30000;color:#fff}
.marco-periodico.apagada{opacity:.55;border-style:dashed}


/* ===== registro de compras ===== */
.totales-compras{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.chip-total{
  background:#1c1c1c;color:var(--papel);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.72rem;
  padding:.3em .6em;border:2px solid var(--negro);
}
.lista-compras{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;margin-bottom:14px}
.compra-fila{
  background:#fffdf6;border:2px solid rgba(0,0,0,.35);border-left:5px solid var(--rojo);
  padding:7px 10px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;
}
.compra-fila.gratis{border-left-color:#6b4ea3;opacity:.75}
.compra-fila.resumen{border-left-color:#1f7a1f;grid-template-columns:1fr}
.compra-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.compra-cab b{font-family:'Anton',sans-serif;font-size:.86rem;letter-spacing:.02em}
.nick-compra{
  background:#efe8d8;border:2px solid rgba(0,0,0,.35);cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.66rem;padding:.1em .4em;
}
.nick-compra:hover{background:#ffd34d}
.precio-compra{
  font-family:'Anton',sans-serif;font-size:.86rem;white-space:nowrap;color:var(--rojo);
  text-align:right;align-self:center;
}
.entrega-compra{
  grid-column:1 / -1;
  font-family:'Courier Prime',monospace;font-size:.66rem;color:#555;line-height:1.35;
}
.cuando-compra{
  grid-column:1 / -1;
  font-family:'Courier Prime',monospace;font-size:.6rem;color:#999;
}

.compra-fila.devuelta{opacity:.6;border-left-color:#8a6d0b;background:#f4efe2}
.compra-fila.devuelta .precio-compra{text-decoration:line-through;color:#999}
.nota-devolucion{
  grid-column:1 / -1;
  font-family:'Courier Prime',monospace;font-size:.64rem;font-weight:700;color:#8a6d0b;
}
.btn-precio.devolver{grid-column:2;justify-self:end;background:#8a6d0b;font-size:.62rem}

/* ===== colocar la tienda arrastrando ===== */
.ordenable > *{position:relative;transition:transform .18s ease}
.asa-orden{
  position:absolute;top:-11px;right:-11px;z-index:6;
  width:34px;height:34px;cursor:grab;touch-action:none;user-select:none;
  display:flex;align-items:center;justify-content:center;
  background:#1c1c1c;color:#efe8d8;border:2px solid var(--papel);
  font-size:1rem;line-height:1;border-radius:5px;
  box-shadow:2px 3px 0 rgba(0,0,0,.55);
}
.asa-orden:active{cursor:grabbing;background:#6b4ea3}

/* mientras colocas */
.ordenable.colocando{outline:3px dashed rgba(255,211,77,.55);outline-offset:8px}
.ordenable.colocando > *:not(.hueco-orden){opacity:.92}
.hueco-orden{
  opacity:.35 !important;
  outline:3px dashed rgba(0,0,0,.45);outline-offset:-4px;
  filter:grayscale(1);
}
.hueco-orden *{visibility:hidden}

/* la carta que sigue al dedo */
.fantasma-orden{
  position:fixed !important;z-index:999;pointer-events:none;margin:0 !important;
  transform:rotate(-2deg) scale(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.65);
  opacity:.95;transition:none !important;
}
.recien-colocada{animation:asienta-carta .6s ease-out}
@keyframes asienta-carta{
  0%{transform:scale(1.06);box-shadow:0 0 0 3px #ffd34d}
  100%{transform:scale(1);box-shadow:none}
}

/* el fantasma nunca debe tapar ni robar toques */
.fantasma-orden{pointer-events:none !important;opacity:.88 !important}
.fantasma-orden .btn-precio,.fantasma-orden .btn-lapiz,
.fantasma-orden .btn-ojo,.fantasma-orden .asa-orden{display:none !important}

/* salida del árbol, siempre a mano */
.capa-arbol{touch-action:none}
.salir-arbol{
  position:absolute;top:14px;left:16px;z-index:20;
  width:46px;height:46px;cursor:pointer;
  background:rgba(10,4,4,.75);color:#efe8d8;border:2px solid rgba(239,232,216,.7);
  border-radius:8px;font-size:1.5rem;line-height:1;
  font-family:'Courier Prime',monospace;font-weight:700;
}
.salir-arbol:hover{background:var(--rojo)}
.salir-arbol.destacado{
  border-color:#ffd34d;color:#ffd34d;
  animation:late-salir 1.2s ease-in-out infinite;
}
@keyframes late-salir{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ===== tira de "ver como jugador" ===== */
.tira-modo-jugador{
  position:sticky;top:0;z-index:400;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:#6b4ea3;color:#fff;border-bottom:3px solid var(--negro);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.72rem;
  letter-spacing:.06em;padding:.5em .8em;text-align:center;
}
.tira-modo-jugador button{
  background:#fff;color:#3a2c00;border:2px solid var(--negro);cursor:pointer;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.7rem;padding:.25em .6em;
}
.tira-modo-jugador button:hover{background:#ffd34d}

/* elegir skin con el ticket */
.rejilla-ticket{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;margin-top:12px;max-height:46vh;overflow:auto;padding:2px;
}
.rejilla-ticket .cosa-regalo img{width:100%;max-width:74px;height:88px;object-fit:contain}
.rejilla-ticket .cosa-regalo small{
  font-family:'Courier Prime',monospace;font-size:.6rem;color:#666;
}

.btn-accion.efecto{background:#6b4ea3;color:#fff}

/* ===== historial general ===== */
.filtros-registro{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.lista-registro{display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow:auto;margin-bottom:14px}
.linea-registro{
  background:#fffdf6;border-left:5px solid #999;padding:5px 9px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.linea-registro b{font-family:'Courier Prime',monospace;font-weight:700;font-size:.72rem;line-height:1.35}
.linea-registro.tipo-regalo{border-left-color:#6b4ea3}
.linea-registro.tipo-apertura{border-left-color:#1f5e8a}
.linea-registro.tipo-partida{border-left-color:var(--rojo)}
.linea-registro.tipo-cuenta{border-left-color:#1f7a1f}
.linea-registro.tipo-admin{border-left-color:#8a6d0b}

/* ===== sección VIP, en amarillo ===== */
.seccion-vip{padding:0 4vw 6vh}
.marco-vip{
  position:relative;max-width:640px;margin:0 auto;
  background:linear-gradient(160deg,#fff6d5,#ffe98a 55%,#f5c400);
  border:4px solid var(--negro);
  box-shadow:8px 10px 0 rgba(0,0,0,.55);
  padding:34px 22px 22px;color:#2a2200;
}
.cinta-vip{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  background:#2a2200;color:#ffd34d;border:3px solid #ffd34d;
  font-family:'Anton',sans-serif;letter-spacing:.18em;font-size:.86rem;
  padding:.3em .9em;white-space:nowrap;
  box-shadow:3px 4px 0 rgba(0,0,0,.5);
}
.estado-vip{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.82rem;
  text-align:center;background:rgba(0,0,0,.08);padding:.6em;margin:6px 0 18px;
  border:2px dashed rgba(0,0,0,.35);
}
.estado-vip.es-vip{background:#2a2200;color:#ffd34d;border-style:solid}
.lote-vip h3{
  font-family:'Anton',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-size:1rem;margin:0 0 10px;border-bottom:3px solid rgba(0,0,0,.35);padding-bottom:5px;
}
.lista-vip{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.lista-vip li{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.55);border:2px solid rgba(0,0,0,.3);padding:.45em .6em;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.78rem;
}
.ic-vip{font-size:1.3rem;line-height:1}
.nota-vip{font-family:'Courier Prime',monospace;font-size:.72rem;margin:0 0 16px}
.acciones-vip{display:flex;justify-content:center;margin-bottom:14px}
.btn-vip{
  background:#2a2200;color:#ffd34d;border:3px solid var(--negro);cursor:pointer;
  font-family:'Anton',sans-serif;letter-spacing:.06em;font-size:.95rem;
  padding:.6em 1.2em;box-shadow:4px 5px 0 rgba(0,0,0,.5);
  transition:transform .15s;
}
.btn-vip:hover:not(:disabled){transform:translateY(-3px)}
.btn-vip:disabled{opacity:.45;cursor:default}
.btn-vip.cancelar-vip{background:#7a1010;color:#fff}
.letra-pequena-vip{
  font-family:'Courier Prime',monospace;font-size:.66rem;line-height:1.5;
  text-align:center;opacity:.8;margin:0;
}
/* la chapa VIP delante del nombre */
.chapa-vip{
  display:inline-block;background:#ffd34d;color:#2a2200;
  border:1px solid #2a2200;border-radius:3px;
  font-family:'Anton',sans-serif;font-size:.55rem;letter-spacing:.08em;
  padding:0 .25em;margin-right:.3em;vertical-align:middle;
}
/* lote marcado como extra VIP */
.marca-vip-lote{
  position:absolute;top:-10px;left:-8px;z-index:5;
  background:#ffd34d;color:#2a2200;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.6rem;letter-spacing:.08em;
  padding:.1em .4em;transform:rotate(-8deg);
}
.btn-vip-lote{
  background:#2a2200;color:#ffd34d;border:2px solid var(--negro);cursor:pointer;
  font-size:.7rem;line-height:1;padding:.25em .45em;margin-left:4px;
}
.btn-vip-lote.puesto{background:#ffd34d;color:#2a2200}

/* la carta del Club VIP en la tienda */
.marco-periodico.es-vip{
  background:linear-gradient(160deg,#fff6d5,#ffe98a 60%,#f5c400);
  border-color:#2a2200;
  box-shadow:6px 8px 0 rgba(0,0,0,.5), 0 0 22px rgba(255,211,77,.45);
}
.marco-periodico.es-vip h3,.marco-periodico.es-vip p{color:#2a2200}
.marco-periodico.es-vip .btn-rojo{background:#2a2200;color:#ffd34d}

/* ===== botón flotante de Discord ===== */
.flotante-discord{
  position:fixed;right:16px;bottom:16px;z-index:350;
  display:flex;align-items:center;gap:0;
  background:#5865F2;color:#fff;text-decoration:none;
  border:3px solid var(--negro);border-radius:50px;
  padding:12px;box-shadow:4px 5px 0 rgba(0,0,0,.55);
  transition:padding .25s ease, transform .2s ease;
}
.flotante-discord svg{width:30px;height:23px;display:block;flex:0 0 auto}
.flotante-discord .texto-discord{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:'Anton',sans-serif;letter-spacing:.06em;font-size:.82rem;
  transition:max-width .25s ease, margin .25s ease;
}
.flotante-discord:hover{transform:translateY(-3px)}
.flotante-discord:hover .texto-discord{max-width:190px;margin-left:9px}
@media (max-width:640px){
  .flotante-discord{right:12px;bottom:12px;padding:11px}
  .flotante-discord svg{width:26px;height:20px}
}

/* ===== Skins de la Comunidad ===== */
.seccion-comunidad{padding:0 4vw 6vh}
.form-subida{display:flex;flex-direction:column;gap:10px;max-width:460px}
.previo-skin{
  border:3px dashed rgba(0,0,0,.4);background:rgba(0,0,0,.05);
  padding:8px;display:flex;justify-content:center;
}
.previo-skin img{max-height:200px;width:auto;display:block}
.rejilla-comunidad{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;margin-top:10px;
}
.carta-skin-com{
  position:relative;background:var(--papel);border:3px solid var(--negro);
  box-shadow:4px 5px 0 rgba(0,0,0,.45);padding:8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
}
.carta-skin-com img{width:100%;max-width:110px;height:150px;object-fit:contain;display:block}
.carta-skin-com b{font-family:'Anton',sans-serif;font-size:.8rem;letter-spacing:.02em;line-height:1.15}
.carta-skin-com small{font-family:'Courier Prime',monospace;font-size:.63rem;color:#555}
.carta-skin-com.mi-voto{border-color:#6b4ea3;box-shadow:4px 5px 0 rgba(107,78,163,.55)}
.carta-skin-com.ganadora{border-color:#f5c400;box-shadow:0 0 22px rgba(255,211,77,.7)}
.carta-skin-com.rev-pendiente{border-style:dashed}
.carta-skin-com.rev-rechazada{opacity:.5}
.carta-skin-com.elegible{cursor:pointer}
.carta-skin-com.marcada{border-color:var(--rojo);box-shadow:0 0 0 3px var(--rojo)}
.cinta-ganadora{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  background:#f5c400;color:#2a2200;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.6rem;letter-spacing:.08em;padding:.1em .45em;
}
.pie-voto{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;margin-top:2px}
.contador-votos{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.66rem;
  background:#1c1c1c;color:var(--papel);padding:.15em .45em;
}
.btn-precio.votada{background:#6b4ea3;color:#fff}
.bloque-eco.votacion.viva{border-left:6px solid #6b4ea3}
.linea-mia{
  display:flex;align-items:center;gap:10px;margin-top:6px;
  background:#fffdf6;border:2px solid rgba(0,0,0,.3);border-left:5px solid #999;padding:6px 9px;
}
.linea-mia img{width:34px;height:46px;object-fit:contain}
.linea-mia b{font-family:'Anton',sans-serif;font-size:.8rem}
.linea-mia small{font-family:'Courier Prime',monospace;font-size:.66rem;color:#555;margin-left:auto}
.linea-mia.estado-aprobada{border-left-color:#1f7a1f}
.linea-mia.estado-rechazada{border-left-color:var(--rojo)}
.linea-mia.estado-pendiente{border-left-color:#8a6d0b}

/* la ruleta del empate */
.hoja-ruleta{width:min(96vw,620px)}
.pista-ruleta{
  position:relative;overflow:hidden;margin:14px 0;
  border:3px solid var(--negro);background:#1c1c1c;padding:10px 0;
}
.carril-ruleta{display:flex;gap:10px;padding:0 10px;will-change:transform}
.casilla-ruleta{
  flex:0 0 120px;background:var(--papel);border:3px solid var(--negro);
  padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.casilla-ruleta img{width:78px;height:104px;object-fit:contain}
.casilla-ruleta b{font-family:'Anton',sans-serif;font-size:.68rem;text-align:center;line-height:1.1}
.casilla-ruleta.elegida{
  border-color:#f5c400;box-shadow:0 0 20px rgba(255,211,77,.9);
  animation:brilla-ruleta .5s ease-in-out 3;
}
@keyframes brilla-ruleta{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.flecha-ruleta{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:3;
  color:#ffd34d;font-size:1.5rem;line-height:1;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}

.fila-duracion{display:flex;gap:8px;align-items:flex-end}
.trozo-duracion{display:flex;flex-direction:column;gap:2px;flex:1}
.trozo-duracion input{width:100%}
.trozo-duracion small{font-family:'Courier Prime',monospace;font-size:.64rem;color:#555;text-align:center}
.nota.cuenta-atras{font-weight:700;color:var(--rojo)}

.linea-votacion{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;
  background:#fffdf6;border:2px solid rgba(0,0,0,.3);border-left:5px solid #999;padding:6px 9px;
}
.linea-votacion.viva{border-left-color:#6b4ea3}
.linea-votacion b{font-family:'Anton',sans-serif;font-size:.82rem}
.linea-votacion small{font-family:'Courier Prime',monospace;font-size:.66rem;color:#555}
.linea-votacion button{margin-left:auto}

.acciones-votacion{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.dar-tiempo{display:flex;align-items:center;gap:5px}
.dar-tiempo input{width:70px}
.dar-tiempo small{font-family:'Courier Prime',monospace;font-size:.66rem}
.aviso-cerrada{font-family:'Courier Prime',monospace;font-size:.7rem;color:#8a6d0b;font-weight:700}
.aviso-relojes{background:#fff3cd;border:2px dashed #8a6d0b;padding:.5em;color:#5a4700}

.btn-precio.mini{padding:.15em .4em;font-size:.66rem}

.es-tuya{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.64rem;
  background:#efe8d8;border:2px solid rgba(0,0,0,.35);padding:.15em .45em;color:#555;
}
.carta-skin-com.skin-mia{border-style:double;border-width:5px}

/* ===== bichito de los bugs, justo encima del de Discord ===== */
.flotante-bicho{
  position:fixed;right:16px;bottom:78px;z-index:350;
  display:flex;align-items:center;gap:0;
  background:#1c1c1c;color:#ffd34d;text-decoration:none;
  border:3px solid var(--negro);border-radius:50px;
  padding:12px;box-shadow:4px 5px 0 rgba(0,0,0,.55);
  transition:padding .25s ease, transform .2s ease;
}
.flotante-bicho .bicho{
  font-size:1.5rem;line-height:1;width:30px;text-align:center;flex:0 0 auto;
  animation:anda-bicho 3.5s ease-in-out infinite;
}
@keyframes anda-bicho{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(8deg) translateY(-2px)}
}
.flotante-bicho .texto-discord{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:'Anton',sans-serif;letter-spacing:.06em;font-size:.82rem;
  transition:max-width .25s ease, margin .25s ease;
}
.flotante-bicho:hover{transform:translateY(-3px);background:var(--rojo);color:#fff}
.flotante-bicho:hover .texto-discord{max-width:190px;margin-left:9px}
@media (max-width:640px){
  .flotante-bicho{right:12px;bottom:70px;padding:11px}
  .flotante-bicho .bicho{font-size:1.3rem;width:26px}
}

/* Deadpool */
.chapa-dp{
  display:block;width:100%;margin-top:6px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:.68rem;
  background:#1c1c1c;color:#ffd34d;padding:.3em .5em;border:2px solid var(--negro);
}
.btn-accion.robado{
  opacity:.4;text-decoration:line-through;cursor:not-allowed;
  background:#555 !important;
}
.fila-caja{flex-direction:column;align-items:flex-start;text-align:left}
.fila-caja small{color:#666;font-family:'Courier Prime',monospace;font-size:.62rem}

/* Deadpool hecho una cabeza: más pequeño y dando botes */
.ficha-pj.solo-cabeza{width:6.5%}
.ficha-pj.solo-cabeza img{animation:rueda-cabeza 1.8s ease-in-out infinite}
@keyframes rueda-cabeza{
  0%,100%{transform:rotate(-9deg) translateY(0)}
  50%{transform:rotate(9deg) translateY(-3px)}
}
.ficha-pj.solo-cabeza .eti{background:#7a1010 !important}

/* villanos retirados del juego */
.carta-perfil.retirado{opacity:.55;filter:grayscale(.7)}
.retrato-perfil{position:relative}
.btn-ojo-villano{
  position:absolute;top:6px;right:6px;z-index:5;
  background:#efe8d8;border:2px solid var(--negro);cursor:pointer;
  font-size:1rem;line-height:1;padding:.25em .45em;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.btn-ojo-villano.apagado{background:#b30000;color:#fff}
.cinta-retirado{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-10deg);
  background:#b30000;color:#fff;border:2px solid var(--negro);
  font-family:'Anton',sans-serif;font-size:.8rem;letter-spacing:.1em;
  padding:.2em .6em;white-space:nowrap;z-index:4;
}

/* artículos con imagen propia y packs */
.imagen-articulo{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.previo-art{max-height:110px;width:auto;border:2px solid rgba(0,0,0,.35);background:rgba(0,0,0,.05);padding:4px}
.lista-pack{
  display:flex;flex-direction:column;gap:4px;max-height:34vh;overflow:auto;
  border:2px solid rgba(0,0,0,.3);padding:6px;background:rgba(0,0,0,.03);
}
.fila-pack{display:flex;align-items:center;gap:8px}
.fila-pack span{flex:1;font-family:'Courier Prime',monospace;font-size:.72rem}
.fila-pack input{width:64px}
.fila-pack.metido{background:#ffd34d;padding:2px 4px}
.lleva-dentro{
  display:block;font-family:'Courier Prime',monospace;font-size:.64rem;
  color:#444;line-height:1.35;margin-top:4px;
}
.icono-art-img{width:44px;height:44px;object-fit:contain;display:block;margin:0 auto}

.pestanas-pack{display:flex;gap:5px;margin-bottom:6px;flex-wrap:wrap}
.cuerpo-pack{display:flex;flex-direction:column;gap:4px;max-height:30vh;overflow:auto}

/* ===== vigilancia ===== */
.chip-total.chip-malo{background:var(--rojo)}
.linea-registro.aviso-g3{border-left-color:var(--rojo);background:#fff0ee}
.linea-registro.aviso-g2{border-left-color:#e07b00;background:#fff7ec}
.linea-registro.aviso-g1{border-left-color:#8a6d0b}
.linea-registro.visto{opacity:.5}
.acciones-aviso{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hoja-historia{width:min(96vw,720px)}
.hoja-historia .lista-registro{max-height:55vh}

.nota.voto-libre{color:#1f7a1f;font-weight:700}
.btn-precio.votada{background:#6b4ea3;color:#fff}
.btn-precio:disabled{opacity:.45;cursor:default}

.carta-skin.retirada{opacity:.75;border-style:dashed}

.carta-skin-v.retirada{border-style:dashed}

.elegir-skin-bug{
  border-top:3px dashed rgba(0,0,0,.3);margin-top:10px;padding-top:10px;
}

.interruptor-lote{
  display:flex !important;flex-direction:row !important;align-items:center;gap:8px;
  background:#ffd34d;border:3px solid var(--negro);padding:.5em .6em;
  font-family:'Anton',sans-serif;letter-spacing:.03em;color:#2a2200;cursor:pointer;
}
.interruptor-lote input{width:20px;height:20px}