:root{
    --bg:#060909; --phosphor:#A9C5AF; --bright:#EAFFEF; --rhea:#56D9EB;
    --amber:#F5B95C; --alert:#F0564A; --dim:#4A5A50; --scanline:rgba(0,0,0,0.18);
    --glow-ph:0 0 6px rgba(169,197,175,0.3); --glow-br:0 0 8px rgba(234,255,239,0.35);
    --glow-cy:0 0 6px rgba(86,217,235,0.35); --glow-am:0 0 6px rgba(245,185,92,0.4);
    --glow-al:0 0 6px rgba(240,86,74,0.4);
    --ok:#63E68B; --glow-ok:0 0 7px rgba(99,230,139,0.45);
    --mono:'VT323',ui-monospace,Menlo,monospace;
    --pix:'Silkscreen','VT323',monospace;
    --sans:'Roboto',system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html,body{margin:0;height:100%}
  body{background:var(--bg);font-family:var(--mono);overflow:hidden}
  button,a{touch-action:manipulation}
  button{font:inherit}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

  /* ---------- stage & starfield ---------- */
  #stage{position:fixed;inset:0;background:var(--bg)}
  html:not(.js) #stage{display:none}
  html.static #stage{display:none}
  html:not(.js) body,html.static body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  #stars{position:absolute;inset:-40px;pointer-events:none}
  #stars i{position:absolute;background:rgba(169,197,175,0.14)}
  #stars i.tw{animation:tw 3s steps(1) infinite}
  @keyframes tw{0%,60%{opacity:1}61%,100%{opacity:0.25}}

  /* ---------- terminal (acts 0–3) ---------- */
  #terminal{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}
  #tty{max-width:72ch;margin:0 auto;padding:clamp(24px,8vh,96px) 24px 120px;
       font-size:clamp(18px,2vw,22px);line-height:1.55;letter-spacing:0}
  @media (max-width:599px){#tty{padding-left:16px;padding-right:16px;font-size:clamp(14px,4vw,18px)}}
  #tty .line{min-height:1.55em;white-space:pre-wrap;overflow-wrap:break-word}
  #tty button.line{width:100%;border:0;background:transparent;font:inherit;padding:0}
  #tty .ph{color:var(--phosphor);text-shadow:var(--glow-ph)}
  #tty .br{color:var(--bright);text-shadow:var(--glow-br)}
  #tty .cy{color:var(--rhea);text-shadow:var(--glow-cy)}
  #tty .am{color:var(--amber);text-shadow:var(--glow-am)}
  #tty .al{color:var(--alert);text-shadow:var(--glow-al)}
  #tty .dim{color:var(--dim);text-shadow:none}
  #tty .ok{color:var(--ok);text-shadow:var(--glow-ok)}
  .blink-soft{animation:blinksoft 1.1s steps(1) infinite}
  @keyframes blinksoft{0%,54%{opacity:1}55%,100%{opacity:0.45}}
  #tty .gap{height:0.9em}
  #tty .banner{white-space:pre;line-height:0.95;font-size:clamp(11px,1.4vw,17px);overflow-x:auto;min-height:0}
  #tty .banner2{white-space:pre;line-height:0.95;font-size:clamp(13px,2.4vw,30px);text-align:left;
                width:fit-content;margin:0 auto;min-height:0}
  #tty .stampline{font-family:var(--mono);letter-spacing:0.06em;
                  font-size:clamp(22px,3.2vw,38px);text-align:center;margin-top:0.9em}
  #tty .promptline{margin-top:1.1em;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
  #tty .gateline{margin-top:0.6em;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.75}
  #tty .taphint{color:var(--dim);font-size:0.85em;text-align:center}
  .cursor{display:inline-block;width:0.5em;height:1em;vertical-align:text-bottom;background:var(--phosphor)}
  .cursor.blink{animation:blink 1.06s steps(1) infinite}
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  #skip,#jump{position:absolute;right:24px;color:var(--dim);font-size:clamp(15px,1.6vw,18px);
              cursor:pointer;user-select:none;padding:8px;min-width:44px;min-height:44px;display:flex;align-items:center;
              max-width:calc(100% - 32px);justify-content:flex-end;text-align:right;white-space:normal;
              border:0;background:transparent;font-family:var(--mono);transition:scale 120ms ease-out}
  #skip{bottom:16px}
  #jump{bottom:60px}
  #skip:active,#jump:active,#notif:active,#tty button:active,.cta:active{scale:0.96}
  .scanlines{position:absolute;inset:0;pointer-events:none;
             background:repeating-linear-gradient(0deg,var(--scanline) 0 2px,transparent 2px 5px)}
  .vignette{position:absolute;inset:0;pointer-events:none;
            background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.35) 100%)}

  /* ---------- phone (acts 4–5) ---------- */
  #phone-scene{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;
               font-family:var(--sans);perspective:1600px}
  #phone-scene .roomglow{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 50% 55%,rgba(86,217,235,0.05),transparent 60%)}
  /* one uniform scale keeps the 356:750 proportion at ANY pane size — a
     max-height clamp squashed only the height and made the phone stubby.
     Fit the TOP 480px (clock + notification + tap hint), not the whole body:
     the lower half is empty screen, so a short pane crops the bottom below
     the fold instead of shrinking the phone. The margin centers it when the
     full body fits and top-anchors it (2vh headroom) when it cannot. */
  #phonefit{--pscale:min(1, calc((100vw - 24px) / 356px), calc(92vh / 480px));
            transform-origin:top center;perspective:1600px;
            transform:scale(var(--pscale));
            margin-top:max(2vh, calc((100vh - 750px * var(--pscale)) / 2))}
  #phone{position:relative;width:356px;height:750px;background:#1a2020;
         border-radius:30px;padding:10px;transform-style:preserve-3d;
         box-shadow:0 0 70px rgba(86,217,235,0.14),0 24px 80px rgba(0,0,0,0.6)}
  #powerbtn{position:absolute;right:-3px;top:216px;width:3px;height:64px;border-radius:2px;background:#2a3434}
  #screen{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;
          background:linear-gradient(180deg,#0a1216 0%,#081014 100%);opacity:0;
          backface-visibility:hidden}
  /* the Seeker's back — built to match the official render: bare lenses
     top-left (round + pill), flash dot, Seed Vault plate off the left edge
     with vertical SEED VAULT text, small tone-on-tone Solana glyph low center.
     No wordmark, no branding beyond what the real device carries. */
  #phoneback{position:absolute;inset:0;border-radius:30px;overflow:hidden;
             background:linear-gradient(180deg,#2b353c 0%,#1b242a 38%,#141b20 100%);
             transform:rotateY(180deg);backface-visibility:hidden}
  #lens1{position:absolute;top:40px;left:52px;width:48px;height:48px;border-radius:50%;
         background:radial-gradient(circle at 38% 32%,#3a464e 0%,#10161a 45%,#05080a 100%);
         box-shadow:0 0 0 4px rgba(8,12,14,0.9),inset 0 0 0 2px rgba(255,255,255,0.06),0 2px 6px rgba(0,0,0,0.5)}
  #lenspill{position:absolute;top:112px;left:49px;width:54px;height:126px;border-radius:27px;
            background:linear-gradient(180deg,#232d33,#12191d);
            box-shadow:inset 0 0 0 2px rgba(255,255,255,0.05),0 3px 8px rgba(0,0,0,0.5)}
  #lenspill i{position:absolute;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;
              background:radial-gradient(circle at 38% 32%,#2c363c 0%,#0b1114 50%,#030507 100%);
              box-shadow:inset 0 0 0 2px rgba(255,255,255,0.07)}
  #lenspill i:first-child{top:11px}
  #lenspill i:last-child{bottom:11px}
  #flashdot{position:absolute;top:98px;left:126px;width:13px;height:13px;border-radius:50%;
            background:radial-gradient(circle at 40% 35%,#dfe9ec,#96a6ad 60%,#5c6a70);opacity:0.9}
  #svplate{position:absolute;left:0;top:280px;width:128px;height:188px;border-radius:0 10px 10px 0;
           background:linear-gradient(160deg,#232a30 0%,#0d1215 55%,#161d22 100%);
           box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),2px 3px 10px rgba(0,0,0,0.45)}
  #svlogo{position:absolute;top:15px;left:15px;width:22px;height:22px;border-radius:50%;
          border:1.5px solid rgba(235,240,242,0.75)}
  #svlogo::before{content:'';position:absolute;inset:3px;border-radius:50%;
                  border:1.5px solid rgba(235,240,242,0.5)}
  #svlogo::after{content:'';position:absolute;inset:7px;border-radius:50%;
                 background:rgba(235,240,242,0.7)}
  #svtext{position:absolute;left:13px;bottom:14px;writing-mode:vertical-rl;transform:rotate(180deg);
          font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:4px;
          color:rgba(235,240,242,0.65)}
  .sglyph{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
          display:flex;flex-direction:column;gap:4px;opacity:0.6}
  .sglyph i{width:26px;height:5px;background:#cfd8db}
  .sglyph i:nth-child(odd){clip-path:polygon(15% 0,100% 0,85% 100%,0 100%)}
  .sglyph i:nth-child(2){clip-path:polygon(0 0,85% 0,100% 100%,15% 100%)}
  #cam{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:12px;height:12px;
       border-radius:50%;background:#030607}
  #camring{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:16px;height:16px;
           border-radius:50%;box-shadow:0 0 0 2px rgba(86,217,235,0.55),0 0 12px rgba(86,217,235,0.5);opacity:0.15}
  #clock{margin-top:132px;text-align:center;font-weight:300;font-size:64px;color:#E8F4F6;letter-spacing:1px}
  #date{margin-top:6px;text-align:center;font-size:14px;color:rgba(232,244,246,0.6);letter-spacing:3px}
  #notif{display:block;width:calc(100% - 32px);min-height:72px;margin:48px 16px 0;
         background:rgba(255,255,255,0.08);border:0;border-radius:16px;padding:14px;
         color:inherit;text-align:left;cursor:pointer;opacity:0;transition:scale 120ms ease-out}
  .n-head{display:flex;align-items:center;gap:8px}
  .n-icon{width:24px;height:24px;border-radius:6px;background:var(--rhea);
          display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .n-app{font-weight:500;font-size:14px;color:#E8F4F6;letter-spacing:0.5px;flex-grow:1}
  .n-time{font-size:12px;color:rgba(232,244,246,0.5)}
  .n-body{margin-top:8px;font-size:14px;line-height:1.45;color:rgba(232,244,246,0.92)}
  #tap-hint{margin-top:20px;text-align:center;font-size:12px;color:rgba(255,255,255,0.5);opacity:0}
  @media (max-width:599px){
    /* the visitor's own phone IS the phone: no scaling, and no transform on the
       wrapper — a transformed ancestor would capture position:fixed below */
    #phonefit{transform:none;perspective:none;margin-top:0}
    #phone{position:fixed;inset:0;width:auto;height:auto;max-height:none;border-radius:0;padding:0;
           background:transparent;box-shadow:none}
    #powerbtn{display:none}
    #cam,#camring{display:none}
    #phoneback{display:none}
    #screen{border-radius:0}
    #clock{margin-top:22vh}
  }

  /* ---------- connecting (act 5) ---------- */
  #connecting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
              background:radial-gradient(circle at 50% 45%,rgba(86,217,235,0.10),transparent 55%),var(--bg);
              font-family:var(--mono);font-size:clamp(18px,2vw,23px);
              color:var(--rhea);text-shadow:0 0 8px rgba(86,217,235,0.45);opacity:0}
  #connecting .cursor{background:var(--rhea)}
  #connecting .stack{display:flex;flex-direction:column;align-items:center;gap:28px}
  #confallback{font-size:0.85em;color:var(--amber);text-decoration:none;text-shadow:0 0 6px rgba(245,185,92,0.4);
               border:1px solid rgba(245,185,92,0.5);padding:10px 22px;min-height:44px;
               display:flex;align-items:center;transition:scale 120ms ease-out}
  #confallback:active{scale:0.96}

  /* ---------- static fallback (no JS / load failure / reduced motion) ---------- */
  #static-fallback{max-width:72ch;margin:0 auto;padding:48px 24px 96px;
                   font-size:clamp(17px,2vw,21px);line-height:1.55}
  html.js:not(.static) #static-fallback{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    clip-path:inset(50%);overflow:hidden;white-space:nowrap}
  html.js:not(.static) #static-fallback:focus-within{position:fixed;z-index:20;top:12px;left:12px;
    width:min(560px,calc(100% - 24px));height:auto;margin:0;padding:16px;border:1px solid var(--amber);
    clip-path:none;overflow:auto;white-space:normal;background:var(--bg);color:var(--phosphor)}
  #static-fallback .ph{color:var(--phosphor)} #static-fallback .br{color:var(--bright)}
  #static-fallback .cy{color:var(--rhea)} #static-fallback .am{color:var(--amber)}
  #static-fallback .al{color:var(--alert)} #static-fallback .dim{color:var(--dim)}
  #static-fallback pre{white-space:pre;line-height:0.95;font-family:var(--mono);
                       font-size:clamp(11px,2.6vw,21px);overflow-x:auto;margin:1.2em 0}
  #static-fallback p{margin:1em 0}
  #static-fallback .static-status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;
    margin:1.2em 0;font-family:var(--mono)}
  #static-fallback .static-status dt::after{content:' ................................';content:' ................................' / '';color:var(--dim)}
  #static-fallback .static-status dd{margin:0;text-align:right}
  #static-fallback .stamp{font-family:var(--mono);font-size:clamp(22px,3.2vw,38px);letter-spacing:0.06em;margin:1.4em 0}
  #static-fallback .static-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}
  #static-fallback a.cta{display:inline-flex;min-height:44px;align-items:center;padding:12px 22px;
    border:2px solid var(--amber);color:var(--amber);text-decoration:none;font-size:1.1em;
    transition:background-color 120ms ease-out,color 120ms ease-out,scale 120ms ease-out}
  #static-fallback a.cta:hover{background:var(--amber);color:var(--bg)}
  #static-fallback a.cta.secondary{border-color:var(--dim);color:var(--phosphor);font-size:0.95em}
  #static-fallback a.cta.secondary:hover{background:var(--phosphor);color:var(--bg)}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important}
  }