@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;max-width:100vw;max-height:100vh;overflow:hidden !important;background:#000;color:#eee;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}
body{touch-action:manipulation}
#app{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden !important;background:#000;isolation:isolate;overscroll-behavior:none;touch-action:manipulation}
#container{
  position:absolute;inset:0;width:100%;height:100%;z-index:60;display:block;pointer-events:none;
  mix-blend-mode:screen;
  filter:grayscale(1) brightness(.8) contrast(1.28);
}
.overlay-scene{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.mobile-seam-fix{position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.99) 10%,rgba(0,0,0,.92) 20%,rgba(0,0,0,.72) 32%,rgba(0,0,0,.34) 45%,rgba(0,0,0,0) 58%)}
.arch{
  position:absolute;left:50%;top:8%;transform:translateX(-50%);z-index:8;
  width:106vw;height:92vh;border:1px solid rgba(255,255,255,.08);border-bottom:0;
  border-radius:50% 50% 0 0 / 29% 29% 0 0;
  box-shadow:0 0 0 16px rgba(255,255,255,.01),0 0 0 32px rgba(255,255,255,.006)
}
.castle{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);width:min(55vw,430px);height:auto;z-index:8;display:block;opacity:.20;filter:grayscale(1) contrast(1.38) brightness(1.02) drop-shadow(0 0 20px rgba(255,255,255,.04));pointer-events:none;-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 8%, rgba(0,0,0,.45) 16%, rgba(0,0,0,.78) 26%, rgba(0,0,0,1) 36%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 8%, rgba(0,0,0,.45) 16%, rgba(0,0,0,.78) 26%, rgba(0,0,0,1) 36%)}
.angel{position:absolute;bottom:10%;width:29vw;max-width:125px;height:34vh;background:center/contain no-repeat url("../assets/images/angel.png");opacity:.16;filter:grayscale(1) contrast(1.4)}
.angel.l{left:-2%} .angel.r{right:-2%;transform:scaleX(-1)}
.dagger{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:27vw;max-width:120px;height:58vh;z-index:10;background:center/contain no-repeat url("../assets/images/sword.png");filter:drop-shadow(0 0 18px rgba(255,255,255,.28));animation:float 4s ease-in-out infinite}
.noise,.vignette,.scan{position:absolute;inset:0;pointer-events:none}
.noise{z-index:22;opacity:.06;mix-blend-mode:screen;background-image:url("../assets/textures/noise.svg")}
.scan{z-index:21;opacity:.035;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.08) 3px,transparent 4px)}
.vignette{z-index:20;background:radial-gradient(circle at 50% 45%,transparent 34%,rgba(0,0,0,.30) 67%,rgba(0,0,0,.90) 100%)}
.ui{position:absolute;inset:0;z-index:30;pointer-events:none}
.name-logo{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 1.2vh);transform:translateX(-50%);width:min(66vw,360px);height:auto;z-index:12;pointer-events:none;opacity:.98;mix-blend-mode:screen;filter:drop-shadow(0 0 12px rgba(255,255,255,.08));}
.socials{position:absolute;left:50%;top:84.5%;transform:translateX(-50%);width:min(86vw,420px);pointer-events:auto}
.social{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);backdrop-filter:blur(8px)}.social .ig-word{font-family:"UnifrakturMaguntia","Old English Text MT","Blackletter",serif;font-size:clamp(20px,5.2vw,29px);font-weight:400;line-height:1;color:#fff;letter-spacing:.01em}.social .ig-arrow{font-size:11px;font-weight:800;letter-spacing:.22em;color:#fff;transform:translateY(1px)}
#status{display:none!important}
@keyframes float{50%{transform:translate(-50%,-50%) translateY(-7px) scale(1.018)}}
@keyframes floatHorizontal{0%,100%{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(1)}50%{transform:translate3d(-50%,calc(-50% - 10px),0) rotate(90deg) scale(1.02)}}
@media(max-width:699px){
  /*
    Reference composition stays fixed.
    Only element sizes are allowed to shrink when the visible screen is shorter.
  */
  .name-logo{
    top:calc(env(safe-area-inset-top) + 1.2vh);
    width:min(66vw,30svh,360px);
  }

  .dagger{
    left:50%;
    top:34.8%;
    width:min(84vw,540px);
    max-width:540px;
    height:min(23svh,49vw,210px);
    transform:translate3d(-50%,-50%,0) rotate(90deg);
    will-change:transform;
    animation:floatHorizontal 4s cubic-bezier(0.42,0,0.58,1) infinite
  }

  .castle{
    bottom:17%;
    width:min(55vw,24.5svh,430px);
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 6%, rgba(0,0,0,.34) 13%, rgba(0,0,0,.68) 23%, rgba(0,0,0,.92) 31%, rgba(0,0,0,1) 39%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 6%, rgba(0,0,0,.34) 13%, rgba(0,0,0,.68) 23%, rgba(0,0,0,.92) 31%, rgba(0,0,0,1) 39%)
  }

  .angel{
    width:min(29vw,13.5svh,125px);
  }

  .socials{
    top:84.5%;
  }
}@media(min-width:700px){.mobile-seam-fix{display:none}.angel{width:min(22vw,240px);max-width:240px;height:49vh}.angel.l{left:4%}.angel.r{right:4%}.castle{width:min(38vw,470px);bottom:9%}.dagger{left:50%;top:31.6%;width:min(68vw,980px);max-width:980px;height:min(30vh,320px);transform:translate3d(-50%,-50%,0) rotate(90deg);will-change:transform;animation:floatHorizontal 4s cubic-bezier(0.42,0,0.58,1) infinite}.name-logo{width:min(28vw,360px);top:calc(env(safe-area-inset-top) + 2.2vh)}.socials{top:80%;width:320px}.social .ig-word{font-size:27px}.social .ig-arrow{font-size:12px}}


#soundToggle{
  position:absolute;
  right:14px;
  bottom:calc(max(14px,env(safe-area-inset-bottom)) + 28px);
  z-index:40;
  width:46px;
  height:46px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.34);
  color:#eee;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
#soundToggle::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(255,255,255,.035);
  border-radius:50%;
}
.sound-bars{
  display:flex;
  align-items:center;
  gap:2px;
  height:15px;
}
.sound-bars i{
  display:block;
  width:2px;
  height:5px;
  background:currentColor;
  animation:soundBar .8s ease-in-out infinite alternate;
}
.sound-bars i:nth-child(2){height:12px;animation-delay:.15s}
.sound-bars i:nth-child(3){height:8px;animation-delay:.3s}
#soundToggle.muted .sound-bars i{
  height:2px!important;
  animation:none;
  opacity:.45;
}
@keyframes soundBar{to{height:15px}}


/* iPhone / iOS Safari renders this rain overlay darker than desktop.
   Keep desktop untouched and soften only on iOS. */
@supports (-webkit-touch-callout: none) {
  #container{
    opacity:.28 !important;
    filter:grayscale(1) brightness(.98) contrast(1.06) !important;
  }
}


/* One-screen viewport: no document scroll; percentage anchors remain unchanged. */
@supports (height:100dvh){
  html,body{height:100dvh;max-height:100dvh}
  #app{height:100dvh;max-height:100dvh}
}