:root{
  --bg-dark:#0d0221;
  --bg-darker:#08011a;
  --pink:#ff2e63;
  --cyan:#08f7fe;
  --yellow:#f6f925;
  --green:#00ff9d;
  --purple:#7b2ff7;
  --white:#f5f5f5;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Press Start 2P', monospace;
  background:var(--bg-dark);
  color:var(--white);
  overflow-x:hidden;
  image-rendering:auto;
}

h1,h2{line-height:1.5;}

/* ---------- TECH BACKGROUND CANVAS ---------- */
#tech-bg-canvas{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.18;
}

/* ---------- NAV ---------- */
.pixel-nav{
  position:fixed;top:0;left:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-darker);
  border-bottom:4px solid var(--pink);
  padding:14px 20px;
  z-index:100;
}
.logo{font-size:clamp(10px,2.5vw,14px);color:var(--cyan);}
.logo span{color:var(--pink);}
.pixel-nav ul{list-style:none;display:flex;gap:20px;}
.pixel-nav a{
  color:var(--white);text-decoration:none;font-size:clamp(8px,1.8vw,10px);
  padding:8px 10px;transition:.2s;
}
.pixel-nav a:hover{color:var(--yellow);}
.nav-celebrar{color:var(--green)!important;}
.menu-toggle{
  display:none;background:none;border:none;color:var(--white);
  font-size:22px;cursor:pointer;
}

/* ---------- SECTIONS ---------- */
.section{
  position:relative;
  min-height:100vh;
  padding:120px clamp(16px,5vw,60px) 80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  z-index:1;
}
.alt-bg{background:var(--bg-darker);}
.section-title{
  font-size:clamp(14px,3.5vw,20px);color:var(--yellow);margin-bottom:40px;
  text-shadow:3px 3px 0 var(--pink);
}

/* ---------- HERO ---------- */
.hero{position:relative;background:radial-gradient(circle at center,#1a0533,var(--bg-dark));}
.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,rgba(255,255,255,0.03) 0px,rgba(255,255,255,0.03) 1px,
    transparent 1px,transparent 3px
  );
  z-index:1;
}
.hero-content{position:relative;z-index:2;max-width:700px;width:100%;padding:0 16px;}
.avatar-frame{
  width:clamp(100px,22vw,160px);height:clamp(100px,22vw,160px);
  margin:0 auto 30px;overflow:hidden;
  border:4px solid var(--cyan);
}
.avatar-frame img{width:100%;height:100%;object-fit:cover;}

.glitch{
  font-size:clamp(13px,4vw,22px);color:var(--white);position:relative;
  animation:glitchAnim 2.5s infinite;
  word-break:break-word;
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
  overflow:hidden;
}
.glitch::before{color:var(--pink);left:2px;animation:glitchTop 2.5s infinite;}
.glitch::after{color:var(--cyan);left:-2px;animation:glitchBottom 2.5s infinite;}

@keyframes glitchAnim{0%,90%,100%{transform:translate(0)}92%{transform:translate(-2px,2px)}94%{transform:translate(2px,-2px)}}
@keyframes glitchTop{0%,90%,100%{clip-path:inset(0 0 90% 0)}92%{clip-path:inset(10% 0 60% 0)}}
@keyframes glitchBottom{0%,90%,100%{clip-path:inset(90% 0 0 0)}92%{clip-path:inset(60% 0 10% 0)}}

.hero h2{font-size:clamp(9px,2.5vw,12px);color:var(--cyan);margin:16px 0;}
.subtitle{font-size:clamp(8px,2vw,10px);color:var(--green);margin-bottom:30px;line-height:2;}

.pixel-btn{
  display:inline-block;font-family:inherit;font-size:clamp(8px,2vw,10px);
  background:var(--pink);color:var(--white);text-decoration:none;
  padding:clamp(12px,3vw,16px) clamp(14px,3vw,20px);border:none;cursor:pointer;
  box-shadow:4px 4px 0 var(--purple);
  transition:.15s;
}
.pixel-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--purple);}
.big-btn{
  font-size:clamp(11px,2.5vw,14px);
  padding:clamp(16px,4vw,22px) clamp(20px,4vw,30px);
  background:var(--green);color:var(--bg-darker);
  box-shadow:4px 4px 0 var(--pink);
}

/* ---------- PIXEL FRAME (bordes pixelados) ---------- */
.pixel-frame{
  clip-path:polygon(
    0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 8px),0 calc(100% - 8px)
  );
  background:var(--bg-darker);
}

/* ---------- GALERIA ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(16px,3vw,28px);
  max-width:1100px;
  width:100%;
}

/* Wrapper para foto + botón VER */
.gallery-item-wrap{
  display:flex;flex-direction:column;align-items:center;gap:0;
  width:100%;
}

.gallery-item{
  border:4px solid var(--cyan);
  aspect-ratio:1/1;
  overflow:hidden;
  width:100%;
  cursor:pointer;
  position:relative;
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;transition:.35s;
  display:block;
}
.gallery-item:hover img{transform:scale(1.08);}

/* Overlay hover en galería */
.gallery-item::after{
  content:'🔍';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  background:rgba(7,2,30,0.55);
  opacity:0;
  transition:.3s;
}
.gallery-item:hover::after{opacity:1;}

/* ---------- BOTÓN VER (pixel animado) ---------- */
.btn-ver{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(7px,1.8vw,9px);
  background:var(--cyan);
  color:var(--bg-darker);
  border:none;
  cursor:pointer;
  padding:10px 18px;
  width:100%;
  position:relative;
  box-shadow:4px 4px 0 var(--purple), -2px -2px 0 var(--pink);
  transition:.12s;
  letter-spacing:1px;
  animation:btnVerPulse 1.6s infinite alternate;
  clip-path:polygon(
    0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,
    100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,
    6px 100%,6px calc(100% - 6px),0 calc(100% - 6px)
  );
}
.btn-ver:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--purple);
  background:var(--yellow);
  animation:none;
}
.btn-ver:active{
  transform:translate(4px,4px);
  box-shadow:none;
}
@keyframes btnVerPulse{
  0%{box-shadow:4px 4px 0 var(--purple), -2px -2px 0 var(--pink); background:var(--cyan);}
  50%{box-shadow:4px 4px 0 var(--pink), -2px -2px 0 var(--cyan); background:var(--green);}
  100%{box-shadow:4px 4px 0 var(--yellow), -2px -2px 0 var(--purple); background:var(--cyan);}
}

/* ---------- LIGHTBOX ---------- */
.lightbox-overlay{
  position:fixed;inset:0;
  background:rgba(4,0,15,0.97);
  display:none;
  align-items:center;justify-content:center;
  z-index:2000;
  padding:20px;
  animation:fadeInLB .25s ease;
}
.lightbox-overlay.active{display:flex;}
@keyframes fadeInLB{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.lightbox-inner{
  position:relative;
  max-width:min(90vw, 900px);
  max-height:90vh;
  border:4px solid var(--cyan);
  box-shadow:0 0 40px var(--cyan), 0 0 80px var(--purple);
  clip-path:polygon(
    0 12px,12px 12px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,
    100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,
    12px 100%,12px calc(100% - 12px),0 calc(100% - 12px)
  );
  background:var(--bg-darker);
}
.lightbox-inner img{
  display:block;
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  width:100%;
}
.lightbox-close{
  position:absolute;top:-16px;right:-16px;
  background:var(--pink);border:none;color:var(--white);
  font-family:'Press Start 2P',monospace;font-size:12px;
  width:36px;height:36px;cursor:pointer;
  z-index:10;
  box-shadow:3px 3px 0 var(--purple);
  transition:.12s;
}
.lightbox-close:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--purple);}
.lightbox-caption{
  font-family:'Press Start 2P',monospace;
  font-size:8px;
  color:var(--yellow);
  text-align:center;
  padding:10px 16px;
  background:var(--bg-darker);
}
/* Prev/Next lightbox */
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(7,2,30,0.85);border:2px solid var(--cyan);
  color:var(--cyan);font-size:18px;
  width:36px;height:48px;cursor:pointer;z-index:10;
  font-family:'Press Start 2P',monospace;
  transition:.15s;
  display:flex;align-items:center;justify-content:center;
}
.lb-nav:hover{background:var(--cyan);color:var(--bg-darker);}
.lb-prev{left:-48px;}
.lb-next{right:-48px;}
@media(max-width:600px){
  .lb-prev{left:0;}
  .lb-next{right:0;}
}

/* ---------- VIDEOS ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(16px,3vw,28px);
  max-width:1100px;
  width:100%;
}
.video-frame{border:4px solid var(--pink);width:100%;overflow:hidden;}
.video-frame video{
  width:100%;
  display:block;
  max-height:400px;
  object-fit:contain;
  background:#000;
}

/* ---------- CELEBRAR SECTION ---------- */
.celebrar-section{background:linear-gradient(180deg,var(--bg-dark),#1a0533);}
.celebrar-text{font-size:clamp(9px,2vw,11px);margin-bottom:30px;color:var(--white);line-height:2;}

.footer{
  text-align:center;padding:24px;font-size:clamp(7px,1.5vw,8px);color:var(--cyan);
  background:var(--bg-darker);position:relative;z-index:1;
}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(4,0,15,.96);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  z-index:1000;padding:20px;overflow:hidden;
}
.modal-overlay.active{display:flex;}
.modal-content{
  position:relative;text-align:center;
  max-width:min(520px,95vw);width:100%;
  overflow:visible;
}
.modal-title{
  font-size:clamp(10px,2.8vw,15px);
  color:var(--yellow);
  margin-bottom:16px;
}
.close-btn{
  position:absolute;top:-40px;right:0;background:var(--pink);border:none;
  color:var(--white);font-size:16px;width:40px;height:40px;cursor:pointer;
}

/* ---------- PIXEL CAKE ---------- */
.pixel-cake{position:relative;width:220px;height:220px;margin:0 auto;}
.cake-layer{position:absolute;left:50%;transform:translateX(-50%);}
.layer-top{width:110px;height:40px;bottom:130px;background:var(--white)!important;border:4px solid var(--pink);}
.layer-mid{width:150px;height:50px;bottom:80px;background:var(--pink)!important;border:4px solid var(--yellow);}
.layer-base{width:190px;height:60px;bottom:20px;background:var(--yellow)!important;border:4px solid var(--purple);}
.plate{width:210px;height:14px;bottom:6px;background:var(--cyan)!important;border:4px solid var(--white);}
/* Candle row (3 velas) */
.candle-row{
  position:absolute;
  bottom:170px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:20px;
  align-items:flex-end;
  z-index:5;
}
.cr-candle{
  position:relative;
  bottom:auto;
  left:auto;
  transform:none;
  width:10px;
  height:36px;
  background:var(--purple);
}
.cr-candle.c-tall{
  height:46px;
  background:var(--pink);
}
/* Estrella arriba del pastel */
.cake-star-top{
  position:absolute;
  bottom:216px;
  left:50%;
  transform:translateX(-50%);
  font-size:22px;
  color:var(--yellow);
  z-index:10;
  animation:starPulse .7s ease-in-out infinite alternate;
  text-shadow:0 0 10px var(--yellow),0 0 20px var(--pink);
  line-height:1;
}
@keyframes starPulse{
  from{text-shadow:0 0 8px var(--yellow);transform:translateX(-50%) scale(1) rotate(0deg);}
  to{text-shadow:0 0 24px var(--yellow),0 0 40px var(--pink);transform:translateX(-50%) scale(1.25) rotate(20deg);}
}
/* Decoraciones en capas */
.cake-layer-deco{
  display:block;
  color:var(--pink);
  font-size:12px;
  line-height:40px;
  text-shadow:0 0 8px var(--pink);
  letter-spacing:6px;
}
.cake-stripe-mid{
  position:absolute;
  top:50%;left:8px;right:8px;
  transform:translateY(-50%);
  height:5px;
  background:repeating-linear-gradient(
    90deg,var(--purple) 0,var(--purple) 10px,
    transparent 10px,transparent 20px
  );
}
.cake-stripe-base{
  position:absolute;
  top:50%;left:10px;right:10px;
  transform:translateY(-50%);
  height:6px;
  background:repeating-linear-gradient(
    90deg,var(--bg-darker) 0,var(--bg-darker) 8px,
    var(--pink) 8px,var(--pink) 16px
  );
}
.flame{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:12px;height:16px;background:var(--yellow);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:0 0 12px 4px var(--yellow), 0 0 20px 8px var(--pink);
  animation:flicker .3s infinite alternate;
}
@keyframes flicker{
  0%{transform:translateX(-50%) scale(1);}
  100%{transform:translateX(-52%) scale(0.9,1.1);}
}

/* ---------- CONFETI ---------- */
.confetti-container{position:absolute;inset:0;pointer-events:none;overflow:visible;}
.confetti{
  position:absolute;top:-20px;width:8px;height:8px;opacity:.9;
  animation:fall linear forwards;
}
@keyframes fall{
  to{transform:translateY(110vh) rotate(720deg);opacity:0;}
}

/* ---------- FIREWORKS CANVAS ---------- */
#fireworks-canvas{
  position:fixed;inset:0;pointer-events:none;z-index:999;display:none;
}
#fireworks-canvas.active{display:block;}

/* ========== RESPONSIVE ========== */

/* Navbar mobile */
@media (max-width:768px){
  .menu-toggle{display:block;}
  .pixel-nav ul{
    position:fixed;top:57px;right:-100%;flex-direction:column;
    background:var(--bg-darker);width:min(72%,280px);height:100vh;
    padding:30px 20px;gap:26px;transition:.3s;border-left:4px solid var(--pink);
    z-index:99;
  }
  .pixel-nav ul.open{right:0;}

  /* Galería 2 columnas en tablet */
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:1fr;}
}

/* Celulares medianos */
@media (max-width:480px){
  .section{padding:100px 14px 60px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .video-grid{grid-template-columns:1fr;}
  .pixel-cake{transform:scale(0.75);transform-origin:center top;}
  .modal-content{padding:0 8px;}
  .logo{font-size:10px;}
  .lb-prev,.lb-next{width:28px;height:40px;font-size:14px;}
}

/* Celulares pequeños */
@media (max-width:360px){
  .pixel-cake{transform:scale(0.6);transform-origin:center top;}
  .pixel-nav{padding:10px 12px;}
  .logo{font-size:9px;}
  .avatar-frame{width:88px;height:88px;}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:8px;}
}

/* Landscape mobile */
@media (max-height:450px) and (orientation:landscape){
  .section{min-height:auto;padding:90px 20px 40px;}
  .pixel-cake{transform:scale(0.55);transform-origin:center top;}
}

/* Tablets grandes / PC */
@media (min-width:769px) and (max-width:1100px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .video-grid{grid-template-columns:repeat(2,1fr);}
}

/* Pantallas anchas */
@media (min-width:1400px){
  .gallery-grid{grid-template-columns:repeat(4,1fr);max-width:1300px;}
  .video-grid{max-width:1300px;}
  .section{max-width:1300px;margin:0 auto;}
}

/* ===== PANTALLA DE CARGA ===== */
#loadingScreen{
  position:fixed;inset:0;
  background:var(--bg-darker);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  transition:opacity .6s ease, visibility .6s ease;
}
#loadingScreen.hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}
.load-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,rgba(255,255,255,0.025) 0px,rgba(255,255,255,0.025) 1px,
    transparent 1px,transparent 4px
  );
}
.load-content{
  position:relative;z-index:1;
  text-align:center;font-family:'Press Start 2P',monospace;
  padding:0 20px;
}
.load-logo{
  font-size:clamp(20px,5vw,38px);
  color:var(--cyan);
  text-shadow:4px 4px 0 var(--pink);
  margin-bottom:14px;
  animation:loadFlicker 1.4s infinite alternate;
}
.load-logo span{color:var(--pink);}
@keyframes loadFlicker{
  0%{opacity:1;text-shadow:4px 4px 0 var(--pink);}
  85%{opacity:1;}
  100%{opacity:.65;text-shadow:4px 4px 0 var(--purple);}
}
.load-subtitle{
  font-size:clamp(7px,1.8vw,10px);
  color:var(--green);
  margin-bottom:40px;
  letter-spacing:2px;
}
.load-bar-wrap{
  width:clamp(200px,60vw,400px);
  height:22px;
  border:4px solid var(--cyan);
  background:var(--bg-dark);
  margin:0 auto 14px;
  clip-path:polygon(
    0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,
    100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,
    4px 100%,4px calc(100% - 4px),0 calc(100% - 4px)
  );
}
.load-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--green), var(--yellow));
  transition:width .08s linear;
  position:relative;
}
.load-bar::after{
  content:'';position:absolute;
  right:0;top:0;bottom:0;width:6px;
  background:var(--white);opacity:.85;
  animation:barScan .45s infinite alternate;
}
@keyframes barScan{from{opacity:.4}to{opacity:1}}
.load-percent{
  font-size:clamp(9px,2vw,12px);
  color:var(--yellow);
  margin-bottom:18px;
}
.load-text{
  font-size:clamp(8px,1.8vw,10px);
  color:var(--white);
}
.blink-text{animation:blinkLoad .75s step-start infinite;}
@keyframes blinkLoad{50%{opacity:0}}

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.gallery-item-wrap:nth-child(1).reveal{transition-delay:.05s;}
.gallery-item-wrap:nth-child(2).reveal{transition-delay:.18s;}
.gallery-item-wrap:nth-child(3).reveal{transition-delay:.31s;}

/* ===== BOTÓN COMPARTIR ===== */
.share-btn{
  background:var(--purple);
  color:var(--white);
  box-shadow:4px 4px 0 var(--cyan);
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.share-btn:hover{
  box-shadow:2px 2px 0 var(--cyan);
  background:var(--pink);
}

/* Toast enlace copiado */
.share-toast{
  position:fixed;
  bottom:36px;left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--green);
  color:var(--bg-darker);
  font-family:'Press Start 2P',monospace;
  font-size:clamp(7px,1.8vw,9px);
  padding:12px 22px;
  z-index:5000;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  clip-path:polygon(
    0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,
    100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,
    4px 100%,4px calc(100% - 4px),0 calc(100% - 4px)
  );
  pointer-events:none;
}
.share-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ===== ETIQUETA VIDEO ===== */
.video-label{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(8px,2vw,11px);
  color:var(--pink);
  text-shadow:2px 2px 0 var(--purple);
  margin-bottom:18px;
  letter-spacing:1px;
}

/* ===== PREFERS REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
  #loadingScreen{ display:none !important; }
}

/* ===== ACHIEVEMENT BANNER ===== */
.achievement-banner{
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(90deg,#2a004a,var(--bg-darker) 90%);
  border:3px solid var(--yellow);
  padding:10px 14px;
  margin-bottom:14px;
  opacity:0;
  transform:translateX(60px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  clip-path:polygon(
    0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,
    100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,
    5px 100%,5px calc(100% - 5px),0 calc(100% - 5px)
  );
  text-align:left;
}
.achievement-banner.show{
  opacity:1;
  transform:translateX(0);
}
.ach-icon{
  font-size:clamp(24px,5vw,32px);
  flex-shrink:0;
  animation:achSpin 4s linear infinite;
}
@keyframes achSpin{
  0%,90%{transform:rotate(0deg)}
  95%{transform:rotate(-15deg)}
  100%{transform:rotate(0deg)}
}
.ach-text{display:flex;flex-direction:column;gap:4px;}
.ach-label{
  font-size:clamp(6px,1.5vw,8px);
  color:var(--yellow);
  letter-spacing:2px;
  animation:achBlink 1.1s step-start infinite;
}
@keyframes achBlink{50%{opacity:.4}}
.ach-title{
  font-size:clamp(8px,2.2vw,11px);
  color:var(--white);
  text-shadow:2px 2px 0 var(--purple);
}

/* ===== STATS RPG BOX ===== */
.stats-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(8,1,26,0.9);
  border:3px solid var(--purple);
  padding:10px 16px;
  margin-bottom:16px;
  clip-path:polygon(
    0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,
    100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,
    5px 100%,5px calc(100% - 5px),0 calc(100% - 5px)
  );
}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.stat-label{
  font-size:clamp(6px,1.4vw,7px);
  color:var(--cyan);
  letter-spacing:1px;
}
.stat-value{
  font-size:clamp(9px,2.2vw,13px);
  color:var(--green);
  text-shadow:0 0 8px var(--green);
  animation:statGlow .9s ease-in-out infinite alternate;
}
.stat-legend{
  color:var(--yellow)!important;
  text-shadow:0 0 8px var(--yellow)!important;
  animation:legendBlink .5s step-start infinite!important;
}
@keyframes statGlow{
  from{text-shadow:0 0 6px var(--green);}
  to{text-shadow:0 0 18px var(--green),0 0 30px var(--cyan);}
}
@keyframes legendBlink{
  0%,100%{color:var(--yellow);text-shadow:0 0 8px var(--yellow);}
  50%{color:var(--pink);text-shadow:0 0 8px var(--pink);}
}
.stat-sep{
  font-size:20px;
  color:var(--purple);
  opacity:.7;
}

/* ===== PIXEL BALLOONS ===== */
.balloons-container{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.balloon{
  position:absolute;
  bottom:-60px;
  width:18px;height:22px;
  border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;
  animation:balloonRise linear forwards;
}
.balloon::after{
  content:'';
  position:absolute;
  bottom:-8px;left:50%;
  transform:translateX(-50%);
  width:1px;height:8px;
  background:rgba(255,255,255,0.4);
}
@keyframes balloonRise{
  to{transform:translateY(-120vh) rotate(20deg);opacity:0;}
}

/* ===== SECCIÓN MENSAJE ===== */
.mensaje-section{
  background:linear-gradient(180deg,var(--bg-dark) 0%,#0a011f 100%);
  min-height:auto;
  padding-top:130px;
  padding-bottom:80px;
}
.mensaje-card{
  max-width:min(720px,95vw);
  width:100%;
  background:rgba(8,1,26,0.95);
  border:4px solid var(--cyan);
  box-shadow:0 0 24px rgba(8,247,254,0.2),0 0 60px rgba(123,47,247,0.15);
  clip-path:polygon(
    0 10px,10px 10px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,
    100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,
    10px 100%,10px calc(100% - 10px),0 calc(100% - 10px)
  );
  overflow:hidden;
}
.mensaje-header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  background:linear-gradient(90deg,var(--purple),#1a004a);
  padding:12px 20px;
  border-bottom:3px solid var(--cyan);
}
.msg-from,.msg-to{
  font-size:clamp(6px,1.5vw,8px);
  color:var(--cyan);
  letter-spacing:1px;
}
.msg-to{color:var(--green);}
.mensaje-divider{
  height:3px;
  background:repeating-linear-gradient(
    90deg,var(--cyan) 0,var(--cyan) 8px,
    transparent 8px,transparent 16px
  );
  margin:0 16px;
  opacity:.5;
}
.mensaje-body{
  padding:24px 28px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.mensaje-p{
  font-size:clamp(8px,1.8vw,10px);
  color:var(--white);
  line-height:2.2;
  font-family:'Press Start 2P',monospace;
}
.highlight-line{
  font-size:clamp(11px,2.8vw,15px)!important;
  color:var(--yellow);
  text-shadow:3px 3px 0 var(--pink);
  animation:msgPulse 2s ease-in-out infinite alternate;
}
@keyframes msgPulse{
  from{text-shadow:3px 3px 0 var(--pink);}
  to{text-shadow:3px 3px 0 var(--purple),0 0 20px var(--yellow);}
}
.mensaje-firma{
  font-size:clamp(7px,1.6vw,9px);
  color:var(--green);
  text-align:right;
  padding:14px 24px 20px;
  letter-spacing:1px;
}
@media(max-width:480px){
  .mensaje-body{padding:16px 14px;gap:14px;}
  .mensaje-header-bar{flex-direction:column;align-items:flex-start;}
  .stats-box{gap:8px;padding:8px 10px;}
  .achievement-banner{padding:8px 10px;gap:8px;}
  .ach-icon{font-size:22px;}
}