/* ===== Site intro / loading overlay ===== */
#introOverlay{
  position:fixed;inset:0;z-index:99999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#introOverlay.intro-hide{
  opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
#introVideo{
  width:100%;height:100%;object-fit:cover;
  background:#000;
}
/* white flash layer for the door-open / star transition */
#introFlash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
}
#introFlash.flash-on{animation:introFlashAnim .9s ease-out forwards}
@keyframes introFlashAnim{
  0%{opacity:0}
  55%{opacity:1}
  100%{opacity:0}
}
/* twinkling stars burst on transition */
#introStars{position:absolute;inset:0;pointer-events:none;opacity:0}
#introStars.stars-on{animation:introStarsAnim 1s ease-out forwards}
@keyframes introStarsAnim{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
#introStars .s{position:absolute;background:#fff;box-shadow:0 0 8px #fff,0 0 16px #cfe0ff;animation:introTwk .5s steps(2) infinite}
@keyframes introTwk{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.4);opacity:1}}
/* bottom-right controls: sound toggle + skip, kept consistent in size */
#introControls{
  position:absolute;right:18px;bottom:18px;z-index:5;
  display:flex;align-items:stretch;gap:10px;
}
#introControls button{
  font-family:'Zpix','Press Start 2P',monospace;font-size:11px;
  color:#fff;background:rgba(0,0,0,.45);
  border:2px solid #fff;cursor:pointer;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
  letter-spacing:1px;line-height:1;
}
#introControls button:hover{background:#fff;color:#000}
/* skip: text pill */
#introSkip{padding:9px 14px;}
/* sound: square, same height as skip */
#introSound{
  width:38px;padding:0;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:640px){
  #introControls{right:12px;bottom:12px;gap:8px;}
  #introSkip{font-size:9px;padding:8px 10px;}
  #introSound{width:32px;font-size:14px;}
}

/* ===== password login gate ===== */
#introGate{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,5,10,.92);
  backdrop-filter:blur(2px);
}
#introGate.gate-hide{opacity:0;visibility:hidden;transition:opacity .4s ease, visibility 0s linear .4s;}
#introGateBox{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  background:rgba(10,9,14,.85);
  border:3px solid #fff;box-shadow:6px 6px 0 rgba(0,0,0,.6);
  padding:34px 30px;max-width:90vw;
}
#introGateTitle{
  font-family:'Zpix','Press Start 2P',monospace;font-size:18px;color:#fff;
  letter-spacing:2px;text-shadow:3px 3px 0 #c8102e;
}
#introGateSub{font-family:'Zpix','VT323',monospace;font-size:15px;color:#cfcfe0;letter-spacing:1px;}
#introPw{
  font-family:'Zpix','VT323',monospace;font-size:16px;
  width:240px;max-width:74vw;padding:11px 12px;
  color:#fff;background:rgba(0,0,0,.55);
  border:2px solid #fff;outline:none;letter-spacing:1px;text-align:center;
}
#introPw:focus{border-color:#c8102e;box-shadow:0 0 0 2px rgba(200,16,46,.4);}
#introLogin{
  font-family:'Zpix','Press Start 2P',monospace;font-size:13px;
  color:#fff;background:#c8102e;border:2px solid #fff;cursor:pointer;
  padding:11px 26px;letter-spacing:2px;box-shadow:3px 3px 0 rgba(0,0,0,.6);
}
#introLogin:hover{background:#fff;color:#c8102e;}
#introLogin:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.6);}
#introGateErr{font-family:'Zpix','VT323',monospace;font-size:13px;color:#ff6b6b;min-height:16px;letter-spacing:1px;}
#introGate.gate-shake #introGateBox{animation:introShake .4s;}
@keyframes introShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media(max-width:640px){
  #introGateTitle{font-size:14px;}
  #introGateBox{padding:26px 20px;gap:13px;}
}

/* password show/hide eye + caps lock indicator */
#introPwWrap{position:relative;display:flex;align-items:center;}
#introPwWrap #introPw{width:240px;max-width:74vw;padding-right:42px;}
#introPwEye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;
  font-size:17px;line-height:1;padding:4px;color:#fff;
}
#introPwEye:hover{filter:brightness(1.3);}
#introCaps{
  display:none;
  font-family:'Zpix','VT323',monospace;font-size:12px;color:#ffd23f;
  letter-spacing:1px;
}