*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html,body{height:100%;width:100%;background:#000;overflow:hidden;color:#fff}

#stage{
  position:relative;
  width:100vw;
  height:calc(100vw * 1080 / 1920);
  max-height:100vh;
  max-width:calc(100vh * 1920 / 1080);
  margin:0 auto;
  background:#0a0420;
  overflow:hidden;
  top:50%;
  transform:translateY(-50%);
}

#scene-host{
  position:absolute;
  inset:0;
}
@keyframes sceneIn{from{opacity:0}to{opacity:1}}

/* HEADER */
#header-bar{position:absolute;top:0;left:0;right:0;height:8%;background:#5D2E8F;display:flex;align-items:center;padding:0 1.5%;z-index:200;gap:1.5%}
.hdr-logo-link{display:flex;margin-right:auto;height:78%;flex:0 0 auto}
.hdr-logo{height:100%;width:auto;display:block}
.hdr-stat{display:flex;align-items:center;gap:6px;color:#fff;font-weight:700;font-size:1.3vw}
.hdr-stat svg{width:1.8vw;height:1.8vw;flex:0 0 auto}
.hdr-hearts{display:flex;gap:.4vw}
.hdr-heart{width:1.8vw;height:1.8vw;transition:opacity .3s}
.hdr-heart svg{width:100%;height:100%}
.hdr-heart.lost{opacity:.15}
.btn-icon{width:2.6vw;height:2.6vw;min-width:38px;min-height:38px;border-radius:50%;background:transparent;border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,transform .12s}
.btn-icon:hover{background:rgba(255,255,255,.18)}
.btn-icon:active{transform:scale(.92)}
.btn-icon svg{width:55%;height:55%;fill:#fff}

/* PRIMARY BUTTON */
.btn-primary{
  padding:1.4vw 4.5vw;
  font-size:1.8vw;
  font-weight:800;
  background:linear-gradient(180deg,#F39C12 0%,#E67E22 100%);
  color:#fff;
  border:1px solid #fff;
  border-radius:12px;
  cursor:pointer;
  letter-spacing:2px;
  transition:filter .15s,transform .12s;
  white-space:nowrap;
}
.btn-primary:hover{filter:brightness(1.1)}
.btn-primary:active{transform:scale(.97);filter:brightness(.95)}

/* MENU */
#menu-overlay{position:absolute;inset:0;background:rgba(45,27,94,.97);z-index:300;display:none;flex-direction:column;padding:4% 6%}
#menu-overlay.open{display:flex}
.menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5%}
.menu-title{font-size:3vw;font-weight:800;color:#F2D811;letter-spacing:3px;text-shadow:2px 2px 0 #2A1145}
.menu-items{display:flex;flex-direction:column;gap:1.5vw;margin-top:2%;max-width:600px}
.btn-menu{background:transparent;border:none;color:#fff;font-size:2vw;font-weight:600;text-align:left;padding:.8vw 0;cursor:pointer;transition:color .2s,transform .2s}
.btn-menu:hover{color:#F2D811;transform:translateX(10px)}

button{font-family:inherit}

/* TAP-TO-START OVERLAY */
#tap-overlay{
  position:absolute;
  inset:0;
  z-index:400;
  background:rgba(10,4,32,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#tap-overlay.hidden{display:none}
.tap-content{text-align:center}
.tap-text{
  font-family:'Sora',sans-serif;
  font-size:2.4vw;
  font-weight:700;
  color:#F2D811;
  letter-spacing:3px;
  text-shadow:2px 2px 0 #2A1145, 0 0 40px rgba(242,216,17,.4);
  animation:tap-pulse 2s ease-in-out infinite;
}
@keyframes tap-pulse{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}