/* =========================================================
   MOBILE LAYER — compatibility + performance only.
   Desktop rules are untouched; everything here is gated
   behind touch / narrow-viewport media queries.
   ========================================================= */

/* Modern viewport height with graceful fallbacks.
   --vph is written by script.js from visualViewport when available. */
:root {
  --vph: 100vh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

@supports (height: 100svh) {
  :root {
    --vph: 100svh;
  }
}

html,
body {
  height: var(--vph);
  min-height: var(--vph);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* ---------------------------------------------------------
   TOUCH DEVICES — no mouse, so no custom cursor
   --------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  body {
    cursor: auto;
  }

  #cursor {
    display: none !important;
  }

  #sigil,
  .win__close {
    cursor: pointer;
  }

  /* hover-only flourishes never stick on touch */
  #sigil:hover .sigil__t {
    animation: none;
  }

  /* the access control gets a generous invisible hit area,
     but keeps exactly its designed visual size */
  #sigil::after {
    content: "";
    position: absolute;
    inset: -16px -14px;
  }

  #sigil {
    position: fixed;
    right: calc(3.2vmin + var(--safe-r));
    bottom: calc(3.4vmin + var(--safe-b));
  }

  /* the centre light is a comfortable tap target for the clue */
  #core::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
  }

  .win__close {
    width: 30px;
    height: 26px;
    font-size: 12px;
  }

  .win__bar {
    align-items: center;
  }
}

/* ---------------------------------------------------------
   PHONES — reflow, not a scaled-down desktop
   --------------------------------------------------------- */
@media (max-width: 820px) {
  /* the world keeps its bleed, but never overflows sideways */
  #world {
    inset: -6vmax;
  }

  /* composition stays centred inside the *visible* area,
     clear of notches and browser UI */
  #center {
    top: calc(50% + (var(--safe-t) - var(--safe-b)) / 2);
    padding: 0 6vw;
    width: 100%;
    max-width: 100%;
  }

  #legend {
    margin-top: clamp(52px, 9vh, 96px);
    font-size: clamp(0.56rem, 3vw, 0.72rem);
    letter-spacing: 0.62em;
    text-indent: 0.62em;
    white-space: nowrap;
  }

  @keyframes legendReveal {
    from {
      opacity: 0;
      filter: blur(6px);
      letter-spacing: 0.86em;
    }
    to {
      opacity: 1;
      filter: blur(0);
      letter-spacing: 0.62em;
    }
  }

  /* creatures: readable in portrait, and they stay on screen
     (their flight bounds are clamped in script.js) */
  #moth {
    width: min(30vw, 22vmax);
  }

  #butterfly {
    width: min(21vw, 15vmax);
  }

  /* cheaper glows: the same look, far less GPU */
  #moth {
    filter: brightness(0.4) contrast(1.12) saturate(0.42) blur(var(--haze, 0.5px));
  }

  #butterfly {
    filter: brightness(1.3) saturate(0.32) blur(var(--haze, 0.35px));
  }

  /* fog: fewer, softer blurs — mobile GPUs hate 150px radii */
  .fog-layer {
    filter: blur(42px);
  }
  .fog-layer--b {
    filter: blur(54px);
  }
  .fog-layer--c {
    filter: blur(66px);
  }
  .fog-layer--d {
    filter: blur(72px);
  }
  .fog-layer--e,
  .fog-layer--f {
    filter: blur(34px);
  }

  .ambient {
    filter: blur(72px);
  }

  .core__bloom {
    filter: blur(20px);
  }

  /* the two thinnest rays are dropped; the shafts stay */
  #rays span:nth-child(4),
  #rays span:nth-child(2) {
    display: none;
  }

  /* grain is the single most expensive full-screen paint */
  #grain {
    inset: -20%;
    opacity: 0.03;
    animation-duration: 12s;
    filter: none;
  }

  /* ---------- the hidden terminal ---------- */
  #terminal {
    width: min(86vw, 320px);
    padding: 20px 18px 16px;
    margin-bottom: env(keyboard-inset-height, 0px);
  }

  #terminal p {
    font-size: 10px;
    letter-spacing: 0.34em;
  }

  /* 16px keeps iOS from zooming the whole page on focus */
  #pw {
    font-size: 16px;
    letter-spacing: 0.3em;
    min-width: 0;
    padding: 6px 0;
  }

  .term-line {
    padding-bottom: 8px;
  }

  /* ---------- the recovered window ---------- */
  #artifact {
    width: min(90vw, 340px);
    max-height: calc(var(--vph) - var(--safe-t) - var(--safe-b) - 32px);
    top: calc(50% + (var(--safe-t) - var(--safe-b)) / 2);
  }

  .win__body {
    padding: 6px;
  }

  .frame img {
    object-fit: contain;
  }

  /* backdrop-filter is expensive and often unsupported in
     in-app browsers — the tear still reads without it */
  .frame__tear {
    backdrop-filter: none;
    background: linear-gradient(rgba(226, 216, 255, 0.16), rgba(226, 216, 255, 0));
  }

  .frame__noise {
    inset: -30%;
    opacity: 0.18;
    animation-duration: 1.1s;
  }

  /* the clue column, safely inside the screen */
  #whisper {
    left: calc(5vw + var(--safe-l));
    gap: 6px;
    font-size: 8.5px;
    letter-spacing: 0.3em;
  }
}

/* short viewports (landscape phones, Instagram chrome) */
@media (max-height: 520px) {
  #legend {
    margin-top: clamp(34px, 8vh, 60px);
  }

  #artifact {
    width: min(64vw, 300px);
  }

  #whisper {
    font-size: 7.5px;
    gap: 4px;
  }
}

/* ---------------------------------------------------------
   WEAK DEVICES — script.js adds .is-lite
   --------------------------------------------------------- */
body.is-lite .fog-layer--e,
body.is-lite .fog-layer--f {
  display: none;
}

body.is-lite #grain {
  display: none;
}

body.is-lite .fog-layer {
  filter: blur(30px);
}

body.is-lite .ambient {
  filter: blur(56px);
}

/* ---------------------------------------------------------
   FALLBACKS — an unsupported effect must never break a layout
   --------------------------------------------------------- */
@supports not (aspect-ratio: 4 / 3) {
  .frame {
    height: 0;
    padding-bottom: 75%;
  }
}

@supports not (mix-blend-mode: screen) {
  .fog-layer--e,
  .fog-layer--f,
  #rays span {
    opacity: 0.5;
  }
}