/* =========================================================
   GLOBAL RESET
========================================================= */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   BACKGROUND – ETHEREAL UNDERWATER
========================================================= */

:root{
  --bg-img: url("../Build/WebBuild.jpg");
}

body::before{
  content:"";
  position: fixed;
  inset: -18%;
  z-index: -5;

  background:
    radial-gradient(1200px 900px at 50% 10%, rgba(180,255,255,0.22), transparent 60%),
    radial-gradient(900px 700px at 20% 40%, rgba(80,200,255,0.18), transparent 62%),
    radial-gradient(900px 700px at 80% 55%, rgba(0,255,220,0.10), transparent 62%),
    linear-gradient(180deg, rgba(6,35,55,0.55), rgba(5,22,40,0.78)),
    var(--bg-img);

  background-size: cover;
  background-position: center;
  filter: blur(10px) saturate(1.25) contrast(1.10);
  transform: translate3d(0,0,0) scale(1.10);
  animation: bgDrift 7s ease-in-out infinite;
}

@keyframes bgDrift{
  0%   { transform: translate(-2%, -1%) scale(1.08); }
  50%  { transform: translate( 2%,  1.5%) scale(1.10); }
  100% { transform: translate(-2%, -1%) scale(1.08); }
}

body::after{
  content:"";
  position: fixed;
  inset: -25%;
  z-index: -4;
  pointer-events: none;

  background:
    radial-gradient(520px 420px at 20% 30%, rgba(140,220,255,0.28), transparent 60%),
    radial-gradient(620px 520px at 75% 35%, rgba(80,180,255,0.22), transparent 62%),
    radial-gradient(700px 600px at 55% 70%, rgba(0,255,220,0.14), transparent 65%),
    radial-gradient(520px 520px at 35% 80%, rgba(120,200,255,0.18), transparent 62%);

  mix-blend-mode: screen;
  opacity: 0.65;

  filter: blur(28px) saturate(1.25);
  transform: translate3d(0,0,0);
  animation: lightDrift 5s ease-in-out infinite, lightPulse 6s ease-in-out infinite;
}

@keyframes lightDrift{
  0%   { transform: translate(-2%,  1%) scale(1.03); }
  50%  { transform: translate( 2%, -1%) scale(1.06); }
  100% { transform: translate(-2%,  1%) scale(1.03); }
}

@keyframes lightPulse{
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.78; }
}

/* =========================================================
   VIGNETTE
========================================================= */

.vignette{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(70% 70% at 50% 45%,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.22) 70%,
    rgba(0,0,0,0.38) 100%);
}

/* =========================================================
   LAYOUT – CENTERED DEVICE
========================================================= */

#page-stage{
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
}

.device-frame{
  aspect-ratio: 9 / 16;
  width: min(540px, 92vw, calc((100vh - 48px) * 9 / 16));

  position: relative;
  border-radius: 36px;

  display: grid;
  grid-template-rows: 1fr 44px;  
  overflow: hidden;              
  background: rgba(0,0,0,0.08);  
}

.device-frame::before{
  content:"";
  position: absolute;
  inset: -22px;
  z-index: -1;

  background:
    radial-gradient(520px 820px at 50% 20%, rgba(170,255,255,0.22), transparent 60%),
    radial-gradient(700px 900px at 50% 90%, rgba(60,160,255,0.18), transparent 65%),
    rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 44px;

  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);

  box-shadow:
    0 30px 120px rgba(0,0,0,0.35),
    0 0 90px rgba(120,230,255,0.22);
}

/* =========================================================
   UNITY CONTAINER
========================================================= */

#unity-container{
  width: 100%;
  height: 100%;
  position: relative;

  border-radius: 28px 28px 0 0;
  overflow: hidden;

  transform: none !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}

#unity-canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
  image-rendering: pixelated; 
}

.unity-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  box-sizing: border-box;

  border-radius: 0 0 28px 28px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);

  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;

  pointer-events: auto;
}

#unity-build-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#unity-build-title a {
  color: inherit;
  text-decoration: none;
}

#unity-build-title a:hover {
  text-decoration: underline;
}

/* =========================================================
   UNITY UI OVERLAYS
========================================================= */

.overlay{
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

.overlay-center{
  inset: 0;
  display: grid;
  place-items: center;
}

.overlay-top{
  top: 10px;
  left: 10px;
  right: 10px;
}

#unity-container.unity-mobile{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
}