/* ══════════════════════════════════════════════════════════════════
   ATOMIC VISION · THE PHONE
   © 2026 Apollo (Atomic Apollo). All rights reserved.

   The player's own stylesheet. It knows nothing about the console.
   ══════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}

/* ── the camera, and the piece over it ── */
.stage{position:fixed;inset:0}
.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.stage video{background:#000}

/* ── 1 · THE START PLATE ──
   A switch on a dark field. It exists because iOS will not open a
   camera without a gesture, so rather than apologise for a tap, it
   is the moment the machine is switched on. */
.startPlate{position:fixed;inset:0;z-index:700;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,#13363d,#040c0e 70%);
  transition:opacity .5s,visibility .5s}
.startPlate.gone{opacity:0;visibility:hidden}
.startPlate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,#0000 0 2px,#0000002a 2px 3px)}
.startCore{display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;padding:24px;max-width:360px}
.startAtomWrap{width:190px;height:190px;flex:none;position:relative}
.startAtom{width:190px;height:190px;display:block}

/* the switch: a bakelite bat-handle, thrown to the right */
.bigSwitch{position:relative;width:188px;height:62px;border:0;border-radius:31px;cursor:pointer;
  background:linear-gradient(180deg,#2b2520,#15110e);
  box-shadow:inset 0 2px 5px #000,0 0 0 2px #6d5a3a,0 6px 14px #000a;
  display:flex;align-items:center;justify-content:flex-end;padding:0 18px 0 0}
.bigSwitch b{font-family:var(--f-plate);font-size:15px;letter-spacing:3px;color:var(--mustard);
  text-shadow:0 0 10px #e9b44366}
.bsKnob{position:absolute;left:5px;top:5px;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#fff3c0,#ee6a2f 60%,#8c3410);
  box-shadow:0 0 16px #ee6a2faa,inset 0 -3px 6px #0006;transition:left .18s cubic-bezier(.3,1.4,.5,1)}
.bigSwitch:active .bsKnob{left:131px}
.bigSwitch:active b{color:var(--phosphor);text-shadow:0 0 10px #7dffcf88}
.startNote{font-family:var(--f-mono);font-size:11.5px;letter-spacing:1.2px;line-height:1.6;
  color:#8fb0b6;max-width:260px}

/* ── 3 · THE TARGETING HUD ──
   Over the live camera. Period instrument, not a sci-fi overlay:
   an engraved reticle, corner marks and a slow sweep, in the
   console's own colours. */
.hud{position:fixed;inset:0;z-index:650;pointer-events:none;
  transition:opacity .3s;font-family:var(--f-mono)}
.hud[hidden]{display:none}
.hud.found{opacity:0}
.hudGrid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(125,255,207,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(125,255,207,.06) 1px,transparent 1px);
  background-size:20px 20px}
.hudTop,.hudFoot{position:absolute;left:50%;transform:translateX(-50%);
  padding:8px 14px;white-space:nowrap;
  border:1px solid rgba(125,255,207,.45);background:rgba(4,12,14,.6);
  color:var(--phosphor);letter-spacing:2.2px;text-shadow:0 0 10px #7dffcf66;
  backdrop-filter:blur(2px)}
.hudTop{top:max(22px,env(safe-area-inset-top));font-size:11px}
.hudFoot{bottom:max(24px,env(safe-area-inset-bottom));font-size:9px;
  border-color:rgba(233,180,67,.45);color:var(--mustard);text-shadow:0 0 10px #e9b44366}
.hudRet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(62vw,300px);aspect-ratio:1;
  border:1px solid rgba(125,255,207,.3);box-shadow:inset 0 0 30px rgba(125,255,207,.12);
  overflow:hidden;animation:hudPulse 1.4s ease-in-out infinite alternate}
.hudRet .c{position:absolute;width:28px;height:28px;border:0 solid var(--mustard);opacity:.9}
.hudRet .c.tl{left:-1px;top:-1px;border-width:2px 0 0 2px}
.hudRet .c.tr{right:-1px;top:-1px;border-width:2px 2px 0 0}
.hudRet .c.bl{left:-1px;bottom:-1px;border-width:0 0 2px 2px}
.hudRet .c.br{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.hudScan{position:absolute;left:0;right:0;height:24%;
  background:linear-gradient(to bottom,transparent,rgba(125,255,207,.1),
             rgba(125,255,207,.22),rgba(125,255,207,.1),transparent);
  animation:hudSweep 2.2s linear infinite}
@keyframes hudPulse{from{border-color:rgba(125,255,207,.22)}to{border-color:rgba(125,255,207,.6)}}
@keyframes hudSweep{from{top:-24%}to{top:100%}}

/* ══ FOUND: THE SET SAYS SO, THEN GETS OUT OF THE WAY ══
   Apollo, 2026-11-13: "the HUD has to be removed upon image found.
   so make it disappear in the most retrofuturistic way without being
   annoying."

   Both halves of that sentence are instructions.

   THE RETRO-FUTURISTIC HALF. It leaves the way a cathode ray tube
   switches off, which is the language the warm-up already speaks
   (styles/av-warm.css, avTubeOff). The picture is squeezed to a
   bright horizontal line, the line flares as the last of the charge
   drains through it, then it collapses to a point and dies. Same
   physics as the set coming on, run backwards. Nothing else on this
   platform needs to invent a vocabulary for "a screen stopped".

   THE NOT-ANNOYING HALF, which is the harder one and is why there
   are two exits:

     · the tube cut-out plays ONCE, the first time a painting is
       ever found in this run
     · every later find just fades, in 260 ms, with no flare

   A painting is lost and found again constantly in real use: a hand
   passes, the visitor turns, the phone dips. A dramatic power-down
   on every one of those is a strobe. The first one is an event worth
   marking; the fortieth is furniture.

   And coming BACK is always quiet. No strike, no flare, a plain
   280 ms fade, because the HUD returning means something went wrong
   and the set should not celebrate that. */
.hudTop.lock{border-color:rgba(233,180,67,.8);color:var(--mustard);
  text-shadow:0 0 14px #e9b44399;
  transition:border-color .18s linear,color .18s linear,text-shadow .18s linear}

/* the whole overlay, cut like a tube losing its supply */
.hud.cutting{animation:avHudTubeOff .52s cubic-bezier(.5,0,.75,0) forwards}
@keyframes avHudTubeOff{
  /* a beat of nothing, so the lock legend is actually read */
  0%   {opacity:1;transform:scaleY(1)   scaleX(1);   filter:brightness(1)}
  34%  {opacity:1;transform:scaleY(1)   scaleX(1);   filter:brightness(1)}
  /* squeezed to a line, and the charge piles into it */
  62%  {opacity:1;transform:scaleY(.012) scaleX(1);  filter:brightness(2.6)}
  /* the line drains inward */
  88%  {opacity:.9;transform:scaleY(.012) scaleX(.16);filter:brightness(3.4)}
  100% {opacity:0;transform:scaleY(.012) scaleX(0);  filter:brightness(4)}
}

/* every find after the first: no theatre */
.hud.gone{opacity:0;transition:opacity .26s linear}

/* and the quiet way back */
.hud.returning{animation:avHudReturn .28s ease-out}
@keyframes avHudReturn{from{opacity:0}to{opacity:1}}

/* ⚠️ The cut squeezes the whole overlay toward its middle, so it has
   to have a middle to squeeze toward. Without this the transform
   origin is the top-left and the HUD slides off the corner instead
   of collapsing into itself. */
.hud{transform-origin:50% 50%}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}