/* static/css/styles.css */

/* Make sure [hidden] truly hides everywhere */
[hidden] { display: none !important; }

/* ----------------------------- */
/* Global / root                 */
/* ----------------------------- */

/* Prevent background scrolling and rubber-banding */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;            /* stop page scroll */
  overscroll-behavior: none;   /* prevent bounce on mobile */
  background: #0a0b0f;
  color: #d9d9e3;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------- */
/* Phone-like frame              */
/* ----------------------------- */

.phone-shell {
  position: relative;          /* containing block for .fog */
  overflow: hidden;            /* clip animated fog so it can't cause page scroll */
  min-height: 100svh;          /* stable against mobile address bar changes */
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);
}

/* Screen box – compact, self-contained */
.screen {
  width: min(360px, 95%);        /* narrower so it feels smaller on phones */
  max-height: 90svh;             /* never taller than viewport */
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, #121523 0%, #0a0b0f 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;              /* clip internal overflow */
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;  /* header + body */
}

/* ----------------------------- */
/* Mysterious drifting fog       */
/* ----------------------------- */

.fog {
  position: absolute;
  inset: -8% -6%;               /* reduced from -20% -10% to avoid overflow */
  pointer-events: none;
  filter: blur(24px);
  opacity: 0.08;
}
.fg1 { background: radial-gradient(50% 40% at 20% 30%, #7aa2ff, transparent 60%); animation: drift 28s linear infinite; }
.fg2 { background: radial-gradient(40% 50% at 80% 70%, #b17aff, transparent 60%); animation: drift 36s linear infinite reverse; }
@keyframes drift { from { transform: translateX(-6%) translateY(-4%); } to { transform: translateX(6%) translateY(4%); } }

/* ----------------------------- */
/* Header                        */
/* ----------------------------- */

.site-header {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.header-title {
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #cfd6ff;
}

/* ----------------------------- */
/* Gate (entry overlay)          */
/* ----------------------------- */

.gate {
  display: grid;
  place-items: center;
  padding: 24px;
  gap: 10px;
}
.gate.active {
  backdrop-filter: blur(6px);
  height: calc(100% - 52px); /* minus header height */
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  grid-row: 2 / -1;
}
.enter {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  color: #e6e6f0;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, background .2s;
  box-shadow: inset 0 0 14px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.4);
}
.enter:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.enter:active { transform: translateY(0); }
.note { margin: 2px 0 0; opacity: 0.8; font-size: 13px; }

/* ----------------------------- */
/* Stage area (under header)     */
/* ----------------------------- */

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;       /* top align content */
  justify-items: center;      /* center horizontally */
  gap: 16px;
  padding: 16px 16px 24px;
  height: calc(100% - 52px);  /* fill remaining space below header */
  overflow: hidden;           /* don't allow inner scrollbars */
}

/* Hide audio element */
#mystAudio { display: none; }

/* Sound wave GIF at the top-center when visible */
.viz-gif {
  width: min(70%, 320px);
  max-width: 320px;
  min-width: 180px;
  height: auto;
  display: block;
  margin-top: 6px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
  opacity: 0.95;
}

/* Replay button */
.replay {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  color: #e6e6f0;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 14px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.4);
  transition: transform .08s ease, background .2s;
}
.replay:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.replay:active { transform: translateY(0); }

/* Reveal text */
.reveal {
  margin: 0;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}
.reveal.show { opacity: 1; transform: translateY(0); filter: blur(0); }