:root{
    --bg:#09090f;
    --cyan: oklch(0.82 0.11 220);
    --violet: oklch(0.80 0.11 320);
    --ink: oklch(0.96 0.005 250);
    --mute: oklch(0.62 0.01 250);
    --txt: oklch(0.83 0.006 250);
    --mono: "DotGothic16", "Space Mono", ui-monospace, monospace;
    --ui: "DotGothic16", "Space Mono", ui-monospace, monospace;
    --pix: "DotGothic16", "Space Mono", monospace;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ background:var(--bg); color:var(--ink); font-family:var(--ui); }
  body{ overflow:hidden; height:100vh; }

  .viewport{ position:fixed; inset:0; overflow:hidden; background:var(--bg); filter:saturate(1.35) contrast(1.17); }
  canvas#wave{ position:absolute; inset:0; width:100%; height:100%; opacity:.9;
    -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 50%, #000 28%, transparent 82%);
    mask-image:radial-gradient(ellipse 72% 58% at 50% 50%, #000 28%, transparent 82%); }

  .scanlines{
    position:absolute; inset:0; pointer-events:none; z-index:5; opacity:.5;
    background:repeating-linear-gradient(to bottom, transparent 0 2px, oklch(0.7 0.02 250 / 0.035) 2px 3px);
    mix-blend-mode:overlay;
  }
  .vignette{ position:absolute; inset:0; pointer-events:none; z-index:6; background:radial-gradient(circle at 50% 46%, transparent 40%, oklch(0 0 0 / 0.55) 100%); }

  /* CRT phosphor mask — flat layers (no isolating wrapper) so MULTIPLY masks against the scene */
  .crt-rgb{ position:absolute; inset:0; pointer-events:none; z-index:8; background:repeating-linear-gradient(to right, rgba(255,0,0,.55) 0 2px, rgba(0,255,0,.55) 2px 4px, rgba(0,0,255,.55) 4px 6px); mix-blend-mode:multiply; }
  .crt-scan{ position:absolute; inset:0; pointer-events:none; z-index:9; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.42) 2px 4px); mix-blend-mode:multiply; animation:crtScroll 6s linear infinite, crtFlicker .12s steps(2) infinite; }
  .crt-roll{ position:absolute; left:0; right:0; top:0; height:24%; pointer-events:none; z-index:10; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.04) 45%, transparent); mix-blend-mode:screen; animation:crtRoll 4.5s linear infinite; }
  .crt-glare{ position:absolute; inset:0; pointer-events:none; z-index:10; background:radial-gradient(ellipse 82% 52% at 50% -12%, rgba(255,255,255,.03), transparent 60%); mix-blend-mode:screen; }
  .crt-glass{ position:absolute; inset:0; pointer-events:none; z-index:11; box-shadow:inset 0 0 120px rgba(0,0,0,.32); }
  @keyframes crtScroll{ from{ background-position:0 0; } to{ background-position:0 4px; } }
  @keyframes crtRoll{ from{ transform:translateY(-30%);} to{ transform:translateY(380%);} }
  @keyframes crtFlicker{ 0%{opacity:.95} 50%{opacity:1} 100%{opacity:.97} }

  .glow{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(70vw,720px); aspect-ratio:1; z-index:2;
    background:radial-gradient(circle, oklch(0.80 0.10 280 / 0.16), transparent 62%);
    filter:blur(44px); will-change:transform;
  }

  .stage{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; display:grid; place-items:center; will-change:transform; }
  .mark{ appearance:none; border:0; background:transparent; cursor:pointer; width:min(44vmin,410px); aspect-ratio:1; display:grid; place-items:center; position:relative; }
  .markwrap{ position:relative; width:100%; height:100%; display:grid; place-items:center; transition:transform .9s cubic-bezier(.16,1,.3,1); will-change:transform; }
  .mark:hover .markwrap{ transform:scale(1.07); }
  .mark:active .markwrap{ transform:scale(1.03); }
  .markwrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
  .mark .logo{
    filter:drop-shadow(0 0 26px oklch(0.82 0.11 270 / 0.3));
    animation:breathe 5s ease-in-out infinite;
  }
  .mark .ghost{ opacity:0; pointer-events:none; filter:drop-shadow(0 0 26px oklch(0.86 0.13 240 / 0.85)) brightness(1.5); }
  .markwrap.pulse .ghost{ animation:shock .8s cubic-bezier(.16,1,.3,1) forwards; }
  .markwrap.pulse .ghost2{ animation:shock .8s .14s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes shock{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } }
  @keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.015)} }
  @keyframes jitter{ 0%,93%,100%{filter:drop-shadow(0 0 26px oklch(0.82 0.11 270 / 0.3))} 95%{filter:drop-shadow(2px 0 0 oklch(0.8 0.18 30 / 0.5)) drop-shadow(-2px 0 0 oklch(0.82 0.14 230 / 0.5)) drop-shadow(0 0 30px oklch(0.82 0.11 270 / 0.4))} }
  .mark:active{ filter:brightness(1.2); }

  .prompt{ position:absolute; left:50%; bottom:11vh; transform:translateX(-50%); z-index:7; font-family:var(--pix); font-size:27px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt); padding-left:.08em; }
  .prompt span{ animation:fade 3.4s ease-in-out infinite; }
  @keyframes fade{ 0%,100%{opacity:.35} 50%{opacity:.9} }

  .id{ position:fixed; top:22px; right:28px; z-index:7; display:flex; align-items:center; gap:9px; font-family:var(--pix); font-size:26px; letter-spacing:.02em; color:var(--txt); user-select:none; }
  .id .dot{ width:6px; height:6px; border-radius:50%; background:oklch(0.5 0.008 250); transition:.5s; }
  .id.live .dot{ background:var(--txt); box-shadow:0 0 10px rgba(255,255,255,.6); animation:beat 1.2s ease-in-out infinite; }
  @keyframes beat{ 0%,100%{transform:scale(1)} 12%{transform:scale(1.7)} 24%{transform:scale(1)} }
  .id .name{ color:var(--txt); opacity:0; max-width:0; overflow:hidden; white-space:nowrap; transition:.6s; }
  .id.live .name{ opacity:1; max-width:240px; }

  .meta{ position:fixed; z-index:7; font-family:var(--pix); font-size:19px; letter-spacing:.05em; color:var(--txt); opacity:.6; text-transform:uppercase; }
  .meta.tr{ top:26px; right:28px; }
  .meta.br{ bottom:24px; right:28px; }
  .chat{ position:fixed; top:22px; left:28px; z-index:7; font-family:var(--pix); font-size:26px; letter-spacing:.02em; color:var(--txt); text-decoration:none; transition:color .3s, text-shadow .3s; }
  .chat:hover{ color:#ffffff; text-shadow:0 0 12px rgba(255,255,255,.45); }
  .welcome-top{ position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:7; font-family:var(--pix); font-size:26px; letter-spacing:.02em; color:var(--txt); white-space:nowrap; }

  .veil{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:oklch(0.02 0 0 / 0.6); backdrop-filter:blur(18px) saturate(120%); opacity:0; pointer-events:none; transition:opacity .7s cubic-bezier(.16,1,.3,1); }
  .veil.open{ opacity:1; pointer-events:auto; }
  .gate{ width:min(92vw,540px); text-align:left; font-family:var(--pix); color:var(--txt); background:oklch(0.2 0 0 / 0.16); border:1px solid oklch(0.62 0.006 250 / 0.45); box-shadow:0 0 30px rgba(255,255,255,.07), inset 0 0 60px rgba(255,255,255,.03); transform:translateY(10px) scale(.98); opacity:0; transition:all .8s cubic-bezier(.16,1,.3,1); }
  .veil.open .gate{ transform:none; opacity:1; }
  .gate .titlebar{ display:flex; justify-content:space-between; align-items:center; padding:7px 12px; font-size:16px; letter-spacing:.04em; color:var(--txt); border-bottom:1px solid oklch(0.62 0.006 250 / 0.4); background:rgba(255,255,255,.05); }
  .gate .titlebar .btns{ letter-spacing:.22em; opacity:.7; white-space:nowrap; padding-left:14px; }
  .gate .body{ padding:22px 16px 22px; }
  .gate .cmdline{ display:flex; align-items:baseline; gap:9px; font-size:25px; }
  .gate .ps{ color:var(--txt); white-space:nowrap; }
  .gate .field{ flex:1; }
  .gate .field input{ width:100%; background:transparent; border:0; outline:0; color:var(--txt); font-family:var(--pix); font-size:25px; letter-spacing:.02em; caret-color:var(--txt); padding:0; }
  .gate .field input::placeholder{ color:oklch(0.83 0.006 250 / 0.3); }
  .gate .hint{ margin-top:18px; font-size:16px; letter-spacing:.04em; color:var(--txt); opacity:.45; }

  .glitchbox{ position:absolute; inset:0; }
  @keyframes logoGlitch{
    0%{ transform:translate(0,0); filter:none; }
    15%{ transform:translate(-3px,2px); filter:drop-shadow(5px 0 0 rgba(255,0,90,.55)) drop-shadow(-5px 0 0 rgba(0,225,255,.55)); }
    30%{ transform:translate(4px,-2px) skewX(-4deg); filter:none; }
    45%{ transform:translate(-2px,-1px); filter:drop-shadow(7px 0 0 rgba(255,0,90,.5)) drop-shadow(-7px 0 0 rgba(0,225,255,.5)); }
    60%{ transform:translate(3px,1px) skewX(3deg); }
    75%{ transform:translate(-4px,0); filter:drop-shadow(4px 0 0 rgba(255,0,90,.45)) drop-shadow(-4px 0 0 rgba(0,225,255,.45)); }
    100%{ transform:none; filter:none; }
  }
  .glitchbox.on{ animation:logoGlitch .2s steps(8) infinite; }
  .glitchbox.on.hard{ animation:logoGlitchHard .1s steps(6) infinite; }
  @keyframes logoGlitchHard{
    0%{ transform:translate(0,0) skewX(0); filter:none; }
    20%{ transform:translate(-8px,4px) skewX(-7deg); filter:drop-shadow(11px 0 0 rgba(255,0,90,.7)) drop-shadow(-11px 0 0 rgba(0,225,255,.7)); }
    40%{ transform:translate(9px,-5px) skewX(6deg); filter:none; }
    60%{ transform:translate(-6px,2px) skewX(-4deg); filter:drop-shadow(14px 0 0 rgba(255,0,90,.6)) drop-shadow(-14px 0 0 rgba(0,225,255,.6)); }
    80%{ transform:translate(7px,3px) skewX(5deg); }
    100%{ transform:none; filter:none; }
  }

  @keyframes surge{
    0%{ filter:none; transform:translateX(0); }
    20%{ filter:hue-rotate(45deg) saturate(2.4) contrast(1.35); transform:translateX(-5px); }
    40%{ filter:hue-rotate(-70deg) saturate(2.8) contrast(1.2); transform:translateX(6px); }
    60%{ filter:invert(0.14) hue-rotate(40deg) saturate(2.2); transform:translateX(-3px); }
    80%{ filter:hue-rotate(-30deg) saturate(2); transform:translateX(3px); }
    100%{ filter:none; transform:translateX(0); }
  }
  .viewport.surge{ animation:surge .42s steps(7) infinite; }

  /* post-login reveal: negative develops from heavy blur to sharp on white */
  .reveal{ position:fixed; inset:0; z-index:120; background:#fff; display:grid; place-items:center; opacity:0; pointer-events:none; }
  .reveal.show{ opacity:1; pointer-events:auto; animation:revealIn .45s cubic-bezier(.4,0,.2,1) both; }
  @keyframes revealIn{ from{opacity:0} to{opacity:1} }
  .reveal.fade{ animation:revealOut 1s ease both; }
  @keyframes revealOut{ from{opacity:1} to{opacity:0} }
  .reveal img{ width:min(52vmin,460px); aspect-ratio:1; object-fit:contain; filter:blur(64px) contrast(.6); transform:scale(1.3); opacity:.25; }
  .reveal.sharp img{ animation:develop 2.6s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes develop{ from{ filter:blur(64px) contrast(.6); transform:scale(1.3); opacity:.25; } 55%{ opacity:1; } to{ filter:blur(0) contrast(1); transform:scale(1); opacity:1; } }
  .reveal .welcome{ position:absolute; bottom:13vh; font-family:var(--pix); font-size:19px; letter-spacing:.08em; text-transform:uppercase; color:#0a0a0a; opacity:0; }
  .reveal.sharp .welcome{ animation:devFade 1.2s ease 1.4s forwards; }
  @keyframes devFade{ from{opacity:0} to{opacity:.65} }
  .reveal .tap{ position:absolute; bottom:7.5vh; font-family:var(--pix); font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#aaa; opacity:0; }
  .reveal.sharp .tap{ animation:devFadeT 1s ease 2.8s forwards; }
  @keyframes devFadeT{ from{opacity:0} to{opacity:1} }

  /* QR canvas replaces logo image in reveal screen */
  #qrCanvas{ width:min(52vmin,460px); aspect-ratio:1; display:block; cursor:pointer; image-rendering:pixelated; }
  #qrCanvas:hover{ opacity:.88; }
  /* session-id reuses .tap slot (positioned at bottom:7.5vh by existing rule) */
  /* status messages reuse .welcome slot (positioned at bottom:13vh by existing rule) */

  .overlay-scan{ position:absolute; inset:0; pointer-events:none; z-index:5; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px), repeating-linear-gradient(to right, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.15) 3px 5px); }
  .overlay-vig{ position:absolute; inset:0; pointer-events:none; z-index:6; background:radial-gradient(circle at 50% 50%, transparent 36%, rgba(0,0,0,.7) 100%); }
  @media (prefers-reduced-motion: reduce){ .mark .logo{ animation:none; } .crt-scan, .crt-roll{ animation:none !important; } }