html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: url("chaos.jpg") center center / cover no-repeat fixed;
  transition: opacity 1s ease;
}

/* háttér */
#scene {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.6)
  );
  transition: opacity 1s ease;
}

/* portál */
#portal {
  width: min(40vw, 420px);
  opacity: 0.9;
  cursor: pointer;
  animation: breathe 6s ease-in-out infinite;
  transition: transform 1.2s ease, opacity 1.2s ease, filter 1.2s ease;
}

#portal:hover {
  transform: scale(1.03);
  opacity: 1;
  filter: drop-shadow(0 0 28px rgba(255,180,80,0.55));
}

/* ✨ INDÍTÁSI EFFEKT */
#portal.go {
  transform: scale(1.08);
  opacity: 1;
  filter: drop-shadow(0 0 60px rgba(255,200,120,0.85));
}

/* fade out */
body.fade {
  opacity: 0;
}

@keyframes breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* iframe */
#gameFrame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
  background: #000;
  z-index: 40;
}

/* ikon navigáció */
#navIcons {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: none;
  gap: 10px;
  z-index: 60;
}

#navIcons img {
  width: 42px;
  height: 42px;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
  user-select: none;
}

#navIcons img:hover {
  opacity: 1;
  transform: scale(1.05);
  filter: drop-shadow(0 0 18px rgba(255,180,80,0.45));
}
/* --- CINEMATIC OVERLAY (nem sima opacity) --- */
#warp{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 45; /* a scene fölött, de az iframe alá/fölé majd JS állítja */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,240,220,0.55) 0%,
      rgba(255,190,120,0.22) 18%,
      rgba(0,0,0,0.78) 55%,
      rgba(0,0,0,0.98) 100%);
  backdrop-filter: blur(0px);
  transition: opacity 650ms ease;
}

/* a warp “él” amikor aktív */
#warp.on{
  opacity: 1;
  backdrop-filter: blur(6px);
}

/* --- PORTÁL: erősebb felragyogás + beszippantás --- */
#portal{
  will-change: transform, filter, opacity;
  transform-origin: 50% 50%;
}

#portal.warp-in{
  animation: portalIn 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes portalIn{
  0%{
    transform: scale(1);
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(255,210,140,0.35))
      drop-shadow(0 0 22px rgba(255,180,90,0.25));
  }
  35%{
    transform: scale(1.14);
    filter:
      drop-shadow(0 0 40px rgba(255,230,170,0.75))
      drop-shadow(0 0 85px rgba(255,190,90,0.55))
      drop-shadow(0 0 140px rgba(255,140,60,0.35));
  }
  70%{
    transform: scale(0.92);
    filter:
      drop-shadow(0 0 55px rgba(255,240,210,0.95))
      drop-shadow(0 0 150px rgba(255,200,120,0.65))
      drop-shadow(0 0 220px rgba(255,120,60,0.35));
  }
  100%{
    transform: scale(0.05);
    opacity: 0;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,0.0));
  }
}

/* visszajövetelnél: “újra felnyílik” finoman */
#portal.warp-out{
  animation: portalOut 520ms ease-out forwards;
}

@keyframes portalOut{
  0%{ transform: scale(0.05); opacity: 0; }
  100%{ transform: scale(1); opacity: 0.9; }
}

/* a játék iframe fölé/ alá rétegzés */
#gameFrame{
  z-index: 50;
}
#navIcons{
  z-index: 60;
}


/* main-state navigation */
#chaosMainNav {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
  padding: 8px;
  border: 1px solid rgba(255, 215, 142, 0.32);
  border-radius: 999px;
  background: rgba(17, 19, 28, 0.46);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

#chaosMainNav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 215, 142, 0.24);
  border-radius: 999px;
  color: #fff4dc;
  text-decoration: none;
  font: 800 14px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: rgba(255, 255, 255, 0.08);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

#chaosMainNav a:hover {
  transform: translateY(-1px);
  background: rgba(255, 205, 123, 0.16);
  border-color: rgba(255, 215, 142, 0.5);
}

body:has(#gameFrame[style*="block"]) #chaosMainNav {
  display: none;
}

@media (max-width: 560px) {
  #chaosMainNav {
    width: calc(100% - 28px);
    border-radius: 18px;
  }

  #chaosMainNav a {
    flex: 1;
    padding: 0 10px;
  }

  #portal {
    width: min(72vw, 360px);
  }
}