*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,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}}

[data-depth]{transition:transform .3s ease-out;will-change:transform}

/* 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:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,transform .12s}
@media (hover:hover) and (pointer:fine){.btn-icon:hover{background:rgba(255,255,255,.18)}}
.btn-icon:active{transform:scale(.92)}
.btn-icon svg{width:55%;height:55%;fill:#fff}

/* FULLSCREEN BUTTON — bottom-right corner */
#btn-fullscreen{
  position:absolute;
  bottom:2.5%;
  right:1.5%;
  z-index:190;
  opacity:.45;
  transition:opacity .3s,background .2s,transform .12s;
}
@media (hover:hover) and (pointer:fine){#btn-fullscreen:hover{opacity:1;background:rgba(255,255,255,.18)}}

/* PRIMARY BUTTON — unified animated style */
.btn-primary{
  --btn-delay:.5s;
  padding:1.4vw 4.5vw;
  font-size:1.8vw;
  font-weight:800;
  background:linear-gradient(135deg,#C400FF,#FF007B,#C400FF);
  background-size:200% 200%;
  color:#fff;
  border:2px solid rgba(255,255,255,.5);
  border-radius:.65vw;
  cursor:pointer;
  letter-spacing:2px;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(40px) scale(.9);
  animation:
    btn-in .7s cubic-bezier(.34,1.56,.64,1) var(--btn-delay) forwards,
    btn-pulse 2.2s ease-in-out calc(var(--btn-delay) + .7s) infinite,
    btn-gradient 3s ease infinite;
}
.btn-primary::before{
  content:"";
  position:absolute;
  top:-50%;left:-60%;
  width:40%;height:200%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:skewX(-20deg);
  animation:btn-shine 3s ease-in-out infinite;
  pointer-events:none;
}
.btn-primary:active{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{animation-play-state:paused;filter:brightness(1.15)}
}
.btn-primary:active{transform:scale(.96);filter:brightness(.95)}
@keyframes btn-in{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes btn-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes btn-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,0,255,.5)}
  50%{transform:scale(1.05);box-shadow:0 0 0 22px rgba(255,0,123,0)}
}
@keyframes btn-shine{0%,100%{left:-60%}50%{left:120%}}

/* 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;gap:1vw;margin-bottom:5%}
.menu-header .menu-title{margin-right:auto}

/* Кнопка «звук вкл/выкл» */
.btn-sound{
  position:relative;
  transition:background .2s ease,transform .1s cubic-bezier(0.23, 1, 0.32, 1);
}
/* зона нажатия добивается до 44×44, не раздувая шапку */
.btn-sound::before{content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.btn-sound .ico-off{display:none}
.btn-sound.is-muted .ico-on{display:none}
.btn-sound.is-muted .ico-off{display:block}
.btn-sound.is-muted svg{opacity:.55}
.btn-sound:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .btn-sound:hover{background:rgba(255,255,255,.18)}
}
@media (prefers-reduced-motion:reduce){
  .btn-sound{transition:background .2s ease}
  .btn-sound:active{transform:none}
}
.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}
@media (hover:hover) and (pointer:fine){.btn-menu:hover{color:#F2D811;transform:translateX(10px)}}

button{font-family:inherit}

/* TAP-TO-START OVERLAY */
#tap-overlay{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:99999;
  background:rgba(10,4,32,.97);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:opacity .3s ease;
}
.tap-content{text-align:center;padding:5vw}
.tap-text{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:5vw;
  font-weight:800;
  color:#F2D811;
  letter-spacing:4px;
  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)}
}

/* FORCE LANDSCAPE ON MOBILE */
@media (orientation:portrait) and (max-width:1024px){
  #rotate-notice{display:flex !important}
  #stage{display:none}
  #tap-overlay .tap-text{font-size:8vw}
}
#rotate-notice{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:#0a0420;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4vh;
  text-align:center;
  padding:10vw;
}
.rotate-icon{
  font-size:15vw;
  animation:rotate-phone 2s ease-in-out infinite;
}
@keyframes rotate-phone{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(90deg)}
}
.rotate-text{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:5vw;
  font-weight:700;
  color:#F2D811;
  letter-spacing:2px;
  text-shadow:2px 2px 0 #2A1145;
}