/* ═══════════════════════════════════
   STYLE.CSS · Military Birthday V6
═══════════════════════════════════ */
:root{
  --ol:#4a6028;--dol:#2a3c10;--dk:#0c1507;
  --gd:#c8a84b;--gdh:#f0c84a;--gdl:#7a6020;
  --cr:#f0e8c8;--ag:#e8d898;--rd:#8b1a1a;--ink:#1c1608;
  --fT:'Black Ops One',sans-serif;
  --fB:'Rajdhani',sans-serif;
  --fL:'Special Elite',cursive;
  --eB:cubic-bezier(.18,.9,.24,1.4);
  --eS:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#070d04;cursor:crosshair}
button{cursor:pointer;font-family:var(--fB)}

/* ── Screens ── */
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--dk);overflow:hidden}
.screen.active{display:flex}
.screen::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(ellipse 200px 150px at 8% 20%,#2a3c10 0%,transparent 70%),
    radial-gradient(ellipse 280px 200px at 76% 8%,#1e2e0c 0%,transparent 65%),
    radial-gradient(ellipse 160px 220px at 45% 66%,#2a3c10 0%,transparent 60%),
    radial-gradient(ellipse 240px 180px at 92% 82%,#1e2e0c 0%,transparent 65%),
    radial-gradient(ellipse 180px 140px at 60% 35%,#324018 0%,transparent 60%)}

.scanlines{position:absolute;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0)0px,rgba(0,0,0,0)2px,rgba(0,0,0,.07)2px,rgba(0,0,0,.07)4px)}

.c{position:absolute;z-index:60;pointer-events:none;width:30px;height:30px;
  border-color:var(--gd);border-style:solid;opacity:.6}
.c.tl{top:16px;left:16px;border-width:2px 0 0 2px}
.c.tr{top:16px;right:16px;border-width:2px 2px 0 0}
.c.bl{bottom:26px;left:16px;border-width:0 0 2px 2px}
.c.br{bottom:26px;right:16px;border-width:0 2px 2px 0}

.hud{position:absolute;left:0;right:0;z-index:55;display:flex;align-items:center;
  justify-content:space-between;padding:6px 50px;background:rgba(0,0,0,.55);
  border-color:var(--gdl);border-style:solid;font-family:var(--fB);font-size:.68rem;
  letter-spacing:2px;color:var(--gd);backdrop-filter:blur(2px)}
.hud.t{top:0;border-width:0 0 1px 0}
.hud.b{bottom:18px;border-width:1px 0 0 0}
.ht{opacity:.85}
.blink{animation:blk 1.4s step-end infinite}
@keyframes blk{0%,100%{opacity:1}50%{opacity:.18}}
.green{color:#4aff60!important}

/* ════════════════
   PANTALLA 1
════════════════ */
.s1-wrap{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:56px 20px 68px}

.classified{font-family:var(--fT);font-size:clamp(.9rem,2.5vw,1.6rem);color:var(--rd);
  border:2.5px solid var(--rd);padding:6px 28px;letter-spacing:8px;transform:rotate(-1.5deg);
  box-shadow:0 0 20px rgba(139,26,26,.45);text-shadow:0 0 10px rgba(139,26,26,.6);
  animation:stmp .5s var(--eB) both}
@keyframes stmp{from{transform:rotate(-1.5deg)scale(2.2);opacity:0}to{transform:rotate(-1.5deg)scale(1);opacity:1}}

/* Modal carta */
.lbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.lbackdrop.show{opacity:1;pointer-events:all}

.lmodal{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.88);
  z-index:81;width:min(520px,90vw);max-height:82vh;
  background:var(--ag);border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 2px rgba(200,168,75,.3);
  opacity:0;pointer-events:none;
  transition:opacity .42s ease,transform .42s var(--eB);
  display:flex;flex-direction:column;overflow:hidden;
}
.lmodal.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all}
.lmod-scroll{padding:26px 30px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:82vh}
.lm-stamp{font-family:var(--fT);font-size:.65rem;letter-spacing:4px;color:var(--rd);
  border:1.5px solid var(--rd);padding:3px 10px;display:inline-block;transform:rotate(-1.2deg)}
.lm-title{font-family:var(--fT);font-size:clamp(1rem,2.8vw,1.5rem);letter-spacing:3px;color:var(--ink)}
.lm-rule{border:none;border-top:1.5px solid rgba(42,60,16,.3);margin:2px 0}
.lm-body{font-family:var(--fL);font-size:.9rem;color:var(--ink);line-height:1.85;white-space:pre-wrap}
.lm-footer{font-family:var(--fT);font-size:.62rem;letter-spacing:3px;color:var(--dol);
  border-top:1px dashed var(--dol);padding-top:8px;text-align:center}
.lm-cta{font-family:var(--fT);font-size:.9rem;letter-spacing:4px;color:var(--cr);
  background:linear-gradient(135deg,var(--ol),var(--dol));border:2px solid var(--gd);
  padding:13px 28px;border-radius:2px;box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:all .22s var(--eS);margin-top:4px;align-self:center}
.lm-cta:hover{transform:translateY(-3px);border-color:var(--gdh);box-shadow:0 8px 24px rgba(200,168,75,.35)}

/* Sobre */
.env-box{display:flex;flex-direction:column;align-items:center;gap:16px}
.envelope{position:relative;width:min(420px,88vw);height:265px;cursor:pointer;
  filter:drop-shadow(0 20px 44px rgba(0,0,0,.7));transition:transform .3s var(--eS)}
.envelope:hover{transform:scale(1.02) translateY(-4px)}
.env-flap{position:absolute;top:0;left:0;right:0;height:0;
  border-left:210px solid transparent;border-right:210px solid transparent;
  border-top:148px solid #8ea050;transform-origin:top center;
  transition:transform .9s cubic-bezier(.4,0,.2,1);z-index:4;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.4))}
.env-flap.open{transform:perspective(600px) rotateX(-178deg)}
.env-seal{position:absolute;top:24px;left:50%;
  transform:translateX(-50%) translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle,#d4b040 0%,#a07820 60%,#7a5810 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;border:2.5px solid #c8a84b;
  box-shadow:0 0 16px rgba(200,168,75,.6);transition:transform .4s,box-shadow .4s;cursor:pointer}
.env-seal:hover{transform:translateX(-50%) translateY(-50%) scale(1.12) rotate(18deg);
  box-shadow:0 0 28px rgba(200,168,75,1)}
.env-body{position:absolute;inset:0;background:linear-gradient(165deg,#7e9040 0%,#4e6228 100%);
  border-radius:4px 4px 10px 10px;border:1.5px solid #3a5018;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:18px 22px 22px}
.env-body::before,.env-body::after{content:'';position:absolute;bottom:0;border-style:solid}
.env-body::before{left:0;border-width:0 0 130px 210px;border-color:transparent transparent #5a7030 transparent;opacity:.5}
.env-body::after{right:0;border-width:0 210px 130px 0;border-color:transparent transparent #5a7030 transparent;opacity:.5}
.env-lines{position:absolute;top:20px;left:28px;right:80px;display:flex;flex-direction:column;gap:8px}
.el{height:2px;background:rgba(200,168,75,.22);border-radius:1px}
.el.s{width:55%}
.env-rec{display:flex;flex-direction:column;gap:3px;z-index:1}
.env-to{font-family:var(--fT);font-size:.6rem;letter-spacing:3px;color:var(--gdl)}
.env-name{font-family:var(--fT);font-size:clamp(1.3rem,3.8vw,2.2rem);color:var(--gd);
  text-shadow:0 0 12px rgba(200,168,75,.5);letter-spacing:2px}
.env-stamp{position:absolute;right:22px;top:18px;display:flex;flex-direction:column;
  align-items:center;border:1.5px dashed var(--gd);padding:6px 10px;opacity:.8;z-index:1;
  font-size:20px;color:var(--gd)}
.est{font-family:var(--fT);font-size:.55rem;letter-spacing:3px;color:var(--gd)}
.cta-btn{position:relative;overflow:hidden;font-family:var(--fT);font-size:1rem;
  letter-spacing:5px;color:var(--cr);background:linear-gradient(135deg,#3a5018,#1e2e0c);
  border:2px solid var(--gd);padding:14px 40px;display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);transition:all .25s var(--eS);
  animation:ctaP 3s ease-in-out infinite;border-radius:2px}
@keyframes ctaP{0%,100%{box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 38px rgba(200,168,75,.1)}
  50%{box-shadow:0 8px 38px rgba(0,0,0,.6),0 0 55px rgba(200,168,75,.25)}}
.cta-btn:hover{transform:translateY(-4px) scale(1.02);border-color:var(--gdh)}
.cta-btn:active{transform:translateY(0)}
.hint{font-family:var(--fL);font-size:.75rem;color:rgba(200,168,75,.4);letter-spacing:2px;
  animation:hF 3s ease-in-out infinite}
@keyframes hF{0%,100%{opacity:.6}50%{opacity:.2}}

/* ════════════════
   PANTALLA 2
════════════════ */
#bgC,#fxC{position:absolute;inset:0;pointer-events:none}
#fxC{z-index:20}#bgC{z-index:1}

/* CAMIONETA */
.truck-wrap{position:absolute;bottom:16px;left:-8px;z-index:15;
  width:min(600px,60vw);
  opacity:0;transform:translateX(-80px);
  transition:opacity .9s var(--eS),transform 1s var(--eB)}
.truck-wrap.in{opacity:1;transform:translateX(0)}
#trk{width:70%;height:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.65))}
@keyframes tBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tCeleb{
  0%,100%{transform:translateY(0) rotate(0)}
  15%{transform:translateY(-14px) rotate(-2deg)}
  35%{transform:translateY(-7px) rotate(1.5deg)}
  55%{transform:translateY(-16px) rotate(-1.5deg)}
  75%{transform:translateY(-6px) rotate(1deg)}
}
.truck-wrap{animation:tBob 4.5s ease-in-out infinite}
.truck-wrap.celeb{animation:tCeleb .55s ease-in-out 6!important}

/* Barra de luces */
.lbar{position:absolute;top:-8px;left:26%;right:20%;height:11px;background:#1a1a1a;
  border-radius:3px;border:1.5px solid #333;display:flex;align-items:center;
  justify-content:space-evenly;padding:0 3px;opacity:0;transition:opacity .4s;z-index:16}
.lbar.on{opacity:1}
.lb{width:12px;height:6px;border-radius:2px;opacity:.25}
.lr{background:#ff1818}.lb2{background:#1848ff}
.lb.lit{opacity:1}
.lr.lit{box-shadow:0 0 10px #ff1818,0 0 22px #ff181866}
.lb2.lit{box-shadow:0 0 10px #1848ff,0 0 22px #1848ff66}

/* Flash */
.mflash{position:absolute;top:2px;left:10%;width:0;height:0;border-radius:50%;
  opacity:0;z-index:17;pointer-events:none;transform:translate(-50%,-50%)}
.mflash.bang{width:70px;height:70px;opacity:1;
  background:radial-gradient(circle,#fff 0%,#ffdd20 30%,#ff8800 65%,transparent 100%);
  animation:mBng .28s ease-out forwards}
@keyframes mBng{0%{opacity:1;transform:translate(-50%,-50%)scale(.4)}
  50%{opacity:.9;transform:translate(-50%,-50%)scale(1.3)}
  100%{opacity:0;transform:translate(-50%,-50%)scale(.7)}}

/* Humo */
.smoke{position:absolute;top:-12px;left:76%;display:flex;flex-direction:column-reverse;gap:2px}
.smoke span{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle,rgba(160,158,148,.7),transparent);
  animation:smk 2.5s ease-in-out infinite;animation-delay:var(--d);transform:translateX(var(--ox))}
@keyframes smk{0%{opacity:.6;transform:translateY(0)scale(1)}100%{opacity:0;transform:translateY(-60px)scale(2.5)}}

/* SOLDADO */
.sol-wrap{position:absolute;bottom:0;right:0;z-index:25;
  width:min(220px,27vw);
  opacity:0;transform:translateX(65px);
  transition:opacity .8s var(--eS) .3s,transform .9s var(--eB) .3s}
.sol-wrap.in{opacity:1;transform:translateX(0)}
#solSVG{width:100%;height:auto;cursor:pointer;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.65));transition:filter .3s}
#solSVG:hover{filter:drop-shadow(0 10px 22px rgba(200,168,75,.5)) drop-shadow(0 0 30px rgba(200,168,75,.28))}

/* Burbuja */
.burbuja{position:absolute;bottom:65%;right:100%;min-width:128px;max-width:196px;z-index:30;
  opacity:0;transform:scale(.6) translateY(14px);
  transition:opacity .3s var(--eB),transform .3s var(--eB);pointer-events:none}
.burbuja.show{opacity:1;transform:scale(1) translateY(0)}
.bur-in{background:var(--cr);border:2px solid var(--gd);border-radius:14px 14px 2px 14px;
  padding:9px 13px;font-family:var(--fL);font-size:.84rem;color:var(--ink);line-height:1.45;
  box-shadow:0 5px 18px rgba(0,0,0,.4)}
.bur-tail{position:absolute;right:-10px;bottom:12px;border:8px solid transparent;border-left:10px solid var(--gd)}

/* Animaciones soldado */
@keyframes saluteA{
  0%,100%{transform:rotate(0deg) translate(0,0)}
  20%,80%{transform:rotate(-58deg) translate(-16px,-28px)}
}
@keyframes celebA{
  0%,100%{transform:translateY(0) rotate(0)}
  20%{transform:translateY(-20px) rotate(-4deg)}
  40%{transform:translateY(-12px) rotate(3deg)}
  60%{transform:translateY(-22px) rotate(-3deg)}
  80%{transform:translateY(-10px) rotate(2deg)}
}
@keyframes shimmyA{
  0%,100%{transform:rotate(0) translateX(0)}
  25%{transform:rotate(-4deg) translateX(-5px)}
  75%{transform:rotate(4deg) translateX(5px)}
}
#aR.saluting{animation:saluteA 2.2s ease-in-out}
.sol-wrap.celebrating #solSVG{animation:celebA .52s ease-in-out 5}
.sol-wrap.happy #solSVG{animation:shimmyA .42s ease-in-out 5}

/* CONTENIDO CENTRAL */
.centro{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:56px min(240px,30vw) 65px min(240px,30vw);text-align:center;gap:13px}

.rank-row{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-16px);
  transition:opacity .6s,transform .6s var(--eB)}
.rank-row.in{opacity:1;transform:translateY(0)}
.rs{font-size:1.2rem;color:var(--gd);animation:starP 2.2s ease-in-out infinite;
  text-shadow:0 0 10px rgba(200,168,75,.8)}
.rs.big{font-size:2rem;animation-delay:.35s}
.rb{flex:1;height:2px;min-width:36px;background:linear-gradient(90deg,transparent,var(--gd),transparent);opacity:.6}
@keyframes starP{0%,100%{transform:scale(1)}50%{text-shadow:0 0 22px rgba(200,168,75,1);transform:scale(1.2)}}

.tblock{opacity:0;transform:translateY(24px);transition:opacity .7s ease .2s,transform .7s var(--eB) .2s}
.tblock.in{opacity:1;transform:translateY(0)}
.tsub{font-family:var(--fT);font-size:.7rem;letter-spacing:6px;color:var(--gdl);margin-bottom:3px}
.ttitle{font-family:var(--fT);font-size:clamp(2rem,5vw,4.5rem);line-height:1;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.tw{display:block;color:var(--cr);letter-spacing:4px;text-shadow:0 2px 8px rgba(0,0,0,.5);
  opacity:0;transform:translateX(-24px);transition:opacity .5s ease,transform .5s var(--eB)}
.tw.in{opacity:1;transform:translateX(0)}
.tw.gold{color:var(--gd);font-size:1.18em;text-shadow:0 0 28px rgba(200,168,75,.5),0 2px 8px rgba(0,0,0,.5)}
.tname{font-family:var(--fT);font-size:clamp(1.3rem,3.2vw,2.4rem);color:var(--gdh);
  letter-spacing:6px;text-shadow:0 0 18px rgba(200,168,75,.6);margin-top:4px;
  opacity:0;transition:opacity .6s ease .8s}
.tname.in{opacity:1}

/* MENSAJE PERSONAL */
.msg-card{position:relative;background:rgba(0,0,0,.4);border:1px solid rgba(200,168,75,.3);
  padding:14px 18px;max-width:820px;backdrop-filter:blur(4px);
  opacity:0;transform:scale(.96);transition:opacity .6s ease 1s,transform .6s var(--eB) 1s}
.msg-card.in{opacity:1;transform:scale(1)}
.mc{position:absolute;font-size:.9rem;color:var(--gd);opacity:.55;line-height:1}
.mc.tl{top:4px;left:6px}.mc.tr{top:4px;right:6px}
.mc.bl{bottom:4px;left:6px}.mc.br{bottom:4px;right:6px}
#mTxt{font-family:var(--fL);font-size:.86rem;color:#d0d09a;line-height:1.85}

/* BOTONES */
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;
  opacity:0;transform:translateY(15px);transition:opacity .6s ease 1.4s,transform .6s var(--eB) 1.4s}
.btns.in{opacity:1;transform:translateY(0)}

.mbtn{position:relative;overflow:hidden;font-family:var(--fT);font-size:.84rem;letter-spacing:3px;
  color:var(--cr);background:linear-gradient(135deg,var(--ol),var(--dol));
  border:2px solid var(--gd);border-radius:2px;padding:13px 22px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:all .2s var(--eS)}
.mbtn::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,168,75,.18)0%,transparent 50%);
  opacity:0;transition:opacity .2s}
.mbtn:hover::before{opacity:1}
.mbtn:hover{transform:translateY(-5px) scale(1.05);border-color:var(--gdh);
  box-shadow:0 10px 28px rgba(200,168,75,.4),0 0 0 2px var(--gd)}
.mbtn:active{transform:translateY(0) scale(.97)}
.mbtn:active::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(200,168,75,.4) 0%,transparent 70%);
  animation:rip .4s ease-out}
@keyframes rip{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(2)}}
.bsh{position:absolute;top:0;left:-110%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-20deg);transition:left .5s ease}
.mbtn:hover .bsh{left:160%}
.pulse{animation:btnP 2.4s ease-in-out infinite}
@keyframes btnP{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4)}
  50%{box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 0 4px rgba(200,168,75,.5),0 0 20px rgba(200,168,75,.2)}}

.camo-strip{position:absolute;bottom:0;left:0;right:0;height:18px;z-index:60;
  background:repeating-linear-gradient(90deg,#4a6028 0,#4a6028 48px,#2a3c10 48px,#2a3c10 96px,
    #6a7c40 96px,#6a7c40 144px,#1e2e0c 144px,#1e2e0c 192px);border-top:2px solid var(--gd)}

.screen.fade-out{animation:sOut .7s var(--eS) forwards}
@keyframes sOut{to{opacity:0;transform:scale(1.05)}}
.screen.fade-in{animation:sIn .7s var(--eS) both}
@keyframes sIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}


@media(max-width:680px){
  /* CONTENIDO CENTRAL - Con scroll y por encima del soldado */
.centro{
  position:relative;
  z-index:20;                    /* ← Aumentado para estar por encima */
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:56px 20px 90px;        /* más espacio abajo */
  text-align:center;
  gap:13px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--gd) var(--dol);
}

/* Scrollbar estilo militar */
.centro::-webkit-scrollbar {
  width: 6px;
}

.centro::-webkit-scrollbar-track {
  background: var(--dol);
  border-radius: 10px;
}

.centro::-webkit-scrollbar-thumb {
  background: var(--gd);
  border-radius: 10px;
}

.centro::-webkit-scrollbar-thumb:hover {
  background: var(--gdh);
}
  .msg-card{
    max-width:94vw;
    padding:14px 16px;
  }

  #mTxt{
    font-size:0.83rem;
    line-height:1.8;
  }

  .mbtn{
    font-size:0.75rem;
    padding:11px 18px;
  }
}