/* -------------------------------------------------------------
   Sichtbare Strukturen bleiben unverändert.  
   Alle neuen Klassen / Hover‑Effekte & Variablen sind unten definiert. 
   ------------------------------------------------------------- */

/* Lokale Fonts (kein externer Request). */
@font-face{
  font-family:'UiDisplay';
  src:url('./fonts/UiDisplay-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'UiDisplay';
  src:url('./fonts/UiDisplay-Bold.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:'UiMono';
  src:url('./fonts/UiMono-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'UiMono';
  src:url('./fonts/UiMono-Bold.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

/* ---- Display-Schriften (lokal, fuer Shift+X Toggle) ---- */
@font-face{font-family:'Audiowide';src:url('./fonts/Audiowide-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Russo One';src:url('./fonts/RussoOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Black Ops One';src:url('./fonts/BlackOpsOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Bungee';src:url('./fonts/Bungee-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Bowlby One SC';src:url('./fonts/BowlbyOneSC-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Michroma';src:url('./fonts/Michroma-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Major Mono Display';src:url('./fonts/MajorMonoDisplay-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Press Start 2P';src:url('./fonts/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'VT323';src:url('./fonts/VT323-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('./fonts/BebasNeue-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Anton';src:url('./fonts/Anton-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Orbitron';src:url('./fonts/Orbitron-VF.ttf') format('truetype-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('./fonts/SpaceGrotesk-VF.ttf') format('truetype-variations');font-weight:300 700;font-display:swap}
@font-face{font-family:'Saira';src:url('./fonts/Saira-VF.ttf') format('truetype-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'Teko';src:url('./fonts/Teko-VF.ttf') format('truetype-variations');font-weight:300 700;font-display:swap}
@font-face{font-family:'Tourney';src:url('./fonts/Tourney-VF.ttf') format('truetype-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono-VF.ttf') format('truetype-variations');font-weight:100 800;font-display:swap}

/* -------- Ausblendung aller originalen Styles -------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;min-height:calc(var(--app-vh, 1vh) * 100);overflow:hidden;background:#000;font-family:'UiDisplay','Arial Black',Arial,sans-serif}
body{cursor:none}

/* ---- Neue CSS‑Variablen für Farben (leicht änderbar) ---- */
:root {
  --c-primary   : #ff00ff;
  --c-secondary : #00ffff;
  --c-accent    : #ff6aff;
  --c-bg        : #000000;
  --display-font: 'Bebas Neue';
  --word-y-offset: 0px;
  --safe-bottom : env(safe-area-inset-bottom, 0px);
}

/* ---- Loading Overlay ---- */
#loadingOverlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:#000;z-index:90;display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity 0.6s ease;pointer-events:all;
}
#loadingOverlay.hidden{opacity:0;pointer-events:none}
.loading-text{
  font-family:'UiMono','Courier New',monospace;color:#0ff;font-size:14px;letter-spacing:6px;
  text-shadow:0 0 10px #0ff;animation:loadingPulse 1.5s infinite ease-in-out;
}
@keyframes loadingPulse{
  0%,100%{opacity:0.3}
  50%{opacity:0.9}
}

/* ---- Logo fade-in ---- */
#logoWrap{opacity:0;transition:opacity 1s ease 0.2s}
#logoWrap.ready{opacity:1}
#hint{opacity:0;transition:opacity 0.6s ease}
#hint.show{opacity:0.7}

/* ---- Accessibility: screen-reader-only utility ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Focus-visible ring for keyboard nav ---- */
:focus-visible{outline:2px solid var(--c-secondary);outline-offset:3px}

/* ---- Reduced motion: respect OS preference ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  body{cursor:auto!important}
  #cursor{display:none!important}
  #cursor.idle{opacity:1!important}
  #hint,#trackLabel,#sceneLabel,.word,.loading-text{animation:none!important;text-shadow:none!important}
  #logoWrap{filter:none!important}
  #controls button:hover,#controls button:focus{transform:none!important}
  .eye-portal__bolt--halo{filter:none!important;opacity:0.78!important}
  .eye-portal__bolt--core{filter:none!important;opacity:1!important}
  .eye-portal__link:hover,
  .eye-portal__link:focus-visible{
    transform:translate(-50%,-50%)!important;
  }
} 
/* ---- Touch device: restore native cursor, hide custom cursor ---- */
@media (pointer: coarse) {
  body { cursor: auto }
  #cursor { display: none }
}
#cursor{
  position:fixed;width:30px;height:30px;
  border:2px solid var(--c-primary);
  border-radius:50%;pointer-events:none;z-index:100;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  left:-50px;top:-50px;
  box-shadow: 0 0 15px 5px var(--c-primary);
  animation: pulseGlow 2.5s infinite ease-in-out;
}
#cursor.idle{
  opacity:0 !important;
  animation-play-state:paused;
}
@keyframes pulseGlow{
  0%,100%{opacity:0.7;}
  50%{opacity:1;}
}

/* ---- Logo‑Text‑Glow (spürbarer Puls) ---- */
.word{
  font-size:clamp(36px,9vw,140px);font-weight:900;letter-spacing:6px;
  color:#fff;text-shadow:0 0 15px var(--c-primary),0 0 30px var(--c-secondary),0 0 60px var(--c-primary);
  mix-blend-mode:screen;white-space:nowrap;
  animation:textGlow 4s infinite ease-in-out;
}
@keyframes textGlow{
  0%,100%{text-shadow:0 0 12px var(--c-primary);}
  50%{text-shadow:0 0 25px var(--c-secondary);}
}

/* ---- Button‑Hover‑Glow ---- */
/* Apple Liquid Glass — Control-Buttons */
#controls button{
  background:rgba(0,0,0,0.10);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    inset 1px 0 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(255,255,255,0.10),
    0 8px 32px rgba(0,0,0,0.28),
    0 2px 8px rgba(0,0,0,0.18);
  backdrop-filter:blur(24px) brightness(1.08) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) brightness(1.08) saturate(1.5);
  color:#fff;
  font-family:'UiMono','Courier New',monospace;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
  transition:transform 0.22s ease;
  -webkit-tap-highlight-color:rgba(0,255,255,0.12);
}
#controls button:hover,
#controls button:focus{
  transform:scale(1.06);
  filter:none;
}
#controls button:active{
  transform:scale(0.97);
  filter:none;
}

/* Hintergrund-Overlay entfernt auf Wunsch. */

/* ---- Partikel‑Canvas Blend‑Mode ---- */
#fx2{mix-blend-mode:screen;}

/* ---- Rest des bestehenden CSS unverändert ---- */
canvas{position:fixed;top:0;left:0;width:100%;height:100%;display:block}
#gl{z-index:1}
#fx{z-index:2;pointer-events:none}
#fx2{z-index:4;pointer-events:none;mix-blend-mode:screen}
#logoWrap{
  position:fixed;top:calc(var(--app-vh, 1vh) * 50);left:50%;transform:translate(-50%,-50%);
  z-index:5;pointer-events:none;width:min(1400px,95vw);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  margin:0;
}
.word{
  font-family:var(--display-font),'Arial Black',Arial,sans-serif;
  font-size:clamp(36px,9vw,140px);font-weight:900;letter-spacing:6px;
  color:#fff;
  text-shadow:0 0 15px #ff00ff,0 0 30px #00ffff,0 0 60px #ff00ff;
  mix-blend-mode:screen;white-space:nowrap;line-height:1;display:block;
  transform:translateY(var(--word-y-offset));
}
.word:first-child{justify-self:end;padding-right:clamp(2px,0.4vw,7px)}
.word:last-child{justify-self:start;padding-left:clamp(2px,0.4vw,7px)}
#pyramidSlot{
  width:clamp(115px,16vw,260px);height:clamp(115px,16vw,260px);
  margin:0;position:relative;justify-self:center;
  display:flex;align-items:center;justify-content:center;
}
#pyramidSlot canvas{position:absolute;z-index:1;width:100%!important;height:100%!important;top:0;left:0}
#cursor{
  position:fixed;width:30px;height:30px;border:2px solid #ff00ff;
  border-radius:50%;pointer-events:none;z-index:100;
transform:translate(-50%,-50%);mix-blend-mode:difference;
  left:-50px;top:-50px;
}
#controls{
  position:fixed;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;gap:12px;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.5s;
  touch-action:manipulation;
  bottom:calc(30px + var(--safe-bottom, 0px));
}
#controls.show{opacity:0.9}
#playBtn,#focusBtn{
  border:none;padding:12px 24px;border-radius:30px;
  cursor:pointer;font-size:12px;
  touch-action:manipulation;
  min-width:44px;
  min-height:44px;
}
/* Touch targets: minimum 44×44px (WCAG 2.5.8) */
#prevBtn,#nextBtn{
  border:none;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:14px;
}
#prevBtn .icon,#nextBtn .icon{
  display:inline-block;
}
#prevBtn .label,#nextBtn .label{
  display:none;
}
.hiddenSecret{
  display:none !important;
}
#focusBtn.active{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 8px 32px rgba(0,0,0,0.28),
    0 0 18px rgba(100,255,100,0.35);
  border-color:rgba(100,255,100,0.4);
}
#controls.hidden{
  display:none;
}
body.focus-only .word{visibility:hidden}
@media(min-width:601px){
  body.focus-only #pyramidSlot{
    width:clamp(160px,22vw,360px);
    height:clamp(160px,22vw,360px);
  }
}
#playBtn.show{opacity:1}
#hint{
  position:fixed;top:30px;left:50%;transform:translateX(-50%);
  color:#0ff;letter-spacing:4px;font-size:11px;z-index:20;
  text-shadow:0 0 10px #0ff;font-family:'UiMono','Courier New',monospace;
  transition:opacity 1s;text-align:center;white-space:nowrap;
  pointer-events:none;
}
#sceneLabel{
  position:fixed;bottom:20px;right:20px;color:#ff00ff;
  font-family:'UiMono','Courier New',monospace;font-size:10px;letter-spacing:2px;
  z-index:20;opacity:0.5;text-shadow:0 0 8px #ff00ff;
  cursor:pointer;user-select:none;transition:opacity 0.3s;
}
#sceneLabel.off{opacity:0.2;text-shadow:none;color:#666}
#sceneLabel:hover{opacity:0.9}
#trackLabel{
  position:fixed;bottom:20px;left:20px;color:#00ffff;
  font-family:'UiMono','Courier New',monospace;font-size:10px;letter-spacing:2px;
  z-index:20;opacity:0.5;text-shadow:0 0 8px #00ffff;
  max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}

/* ---- Seek Bar ---- */
#seekBar{
  position:fixed;
  bottom:calc(90px + var(--safe-bottom,0px));
  left:50%;transform:translateX(-50%);
  z-index:19;
  display:flex;align-items:center;gap:12px;
  width:min(600px,85vw);
  opacity:0;visibility:hidden;
  transition:opacity 0.35s,visibility 0.35s;
  touch-action:none;pointer-events:none;
}
#seekBar.active{opacity:1;visibility:visible;pointer-events:auto}
.seek-label{
  font-family:'UiMono','Courier New',monospace;
  font-size:12px;color:#0ff;
  text-shadow:0 0 8px #0ff;
  min-width:45px;text-align:center;
  user-select:none;
}
#seekTrack{
  flex:1;height:6px;
  background:rgba(255,255,255,0.12);
  border-radius:3px;cursor:pointer;
  position:relative;touch-action:none;
}
#seekFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));
  border-radius:3px;
  box-shadow:0 0 10px var(--c-primary);
  pointer-events:none;
}
#seekHandle{
  position:absolute;top:50%;left:0%;
  transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--c-secondary);
  box-shadow:0 0 12px var(--c-secondary);
  pointer-events:none;
}
@media(max-width:600px){
  #seekBar{gap:8px;width:90vw;bottom:calc(82px + var(--safe-bottom,0px))}
  .seek-label{font-size:10px;min-width:35px}
  #seekTrack{height:5px}
  #seekHandle{width:12px;height:12px}
}

@media(max-width:600px){
  #logoWrap{
    width:min(98vw,900px);
  }
  .word{letter-spacing:2px;font-size:clamp(34px,14vw,64px)}
  .word:first-child{padding-right:3px}
  .word:last-child{padding-left:3px}
  #pyramidSlot{
    width:clamp(95px,20vw,140px);
    height:clamp(95px,20vw,140px);
  }
  body.focus-only #pyramidSlot{
    width:clamp(143px,30vw,210px);
    height:clamp(143px,30vw,210px);
  }
  #hint{font-size:9px;letter-spacing:2px}
  #trackLabel,#sceneLabel{font-size:9px;bottom:calc(8px + var(--safe-bottom, 0px))}
  #controls{gap:8px;bottom:calc(24px + var(--safe-bottom, 0px))}
  #playBtn,#focusBtn{padding:10px 16px;font-size:11px;letter-spacing:1px}
  #prevBtn,#nextBtn{
    width:44px;
    height:44px;
    min-width:44px;
    font-size:13px;
  }
}

/* ---- Minimal in-page anchors (hash targets) ---- */
.eye-anchor{
  position:fixed;
  left:0;
  top:0;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  pointer-events:none;
}

/* ---- Eye portal menu (under #controls z-index 20; above logo) ---- */
.eye-portal{
  position:fixed;
  inset:0;
  z-index:14;
  pointer-events:none;
  --menu-vision-x:50vw;
  --menu-vision-y:35vh;
  --menu-sound-x:35vw;
  --menu-sound-y:55vh;
  --menu-portal-x:65vw;
  --menu-portal-y:55vh;
}
.eye-portal__beams{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.eye-portal__svg{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.eye-portal__bolt--halo{
  stroke-width:8;
  opacity:0.72;
  filter:url(#eyePortalBoltGlowFilter);
  stroke:#e942ff;
}
.eye-portal__bolt--core{
  stroke-width:2.5;
  stroke:#f2ffff;
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(0,255,255,1)) drop-shadow(0 0 14px rgba(255,0,255,0.65));
}
.eye-portal__bolt--sound.eye-portal__bolt--halo{stroke:#b366ff}
.eye-portal__bolt--portal.eye-portal__bolt--halo{stroke:#ff66e8}
@media (prefers-reduced-motion:no-preference){
  /* Normaler Crawl nur wenn KEIN Intro aktiv */
  .eye-portal--open:not(.eye-portal--intro) .eye-portal__bolt--core{
    stroke-dasharray:32 68;
    animation:eyePortalBoltCrawl 0.95s linear infinite;
  }
  .eye-portal--open:not(.eye-portal--intro) .eye-portal__bolt--halo{
    stroke-dasharray:42 58;
    animation:eyePortalBoltCrawl 1.25s linear infinite reverse;
    animation-delay:-0.12s;
  }
  @keyframes eyePortalBoltCrawl{
    0%{stroke-dashoffset:100}
    100%{stroke-dashoffset:-100}
  }

  /* ===== Intro Reveal Sequence ===== */
  /* Karten und Blitze zu Beginn unsichtbar */
  .eye-portal--intro .eye-portal__link{
    opacity:0;
    transition:none;
  }
  .eye-portal--intro .eye-portal__bolt{
    stroke-opacity:0;
  }

  /* Blitze: normales Crawl + gestaffeltes Einblenden */
  .eye-portal--intro .eye-portal__bolt--core.eye-portal__bolt--vision{
    stroke-dasharray:32 68;
    animation:eyePortalBoltCrawl 0.95s linear infinite,eyePortalBoltFadeIn 0.05s ease-out 0.25s both;
  }
  .eye-portal--intro .eye-portal__bolt--halo.eye-portal__bolt--vision{
    stroke-dasharray:42 58;
    animation:eyePortalBoltCrawl 1.25s linear -0.12s infinite reverse,eyePortalBoltFadeIn 0.05s ease-out 0.25s both;
  }
  .eye-portal--intro .eye-portal__bolt--core.eye-portal__bolt--portal{
    stroke-dasharray:32 68;
    animation:eyePortalBoltCrawl 0.95s linear infinite,eyePortalBoltFadeIn 0.05s ease-out 0.75s both;
  }
  .eye-portal--intro .eye-portal__bolt--halo.eye-portal__bolt--portal{
    stroke-dasharray:42 58;
    animation:eyePortalBoltCrawl 1.25s linear -0.12s infinite reverse,eyePortalBoltFadeIn 0.05s ease-out 0.75s both;
  }
  .eye-portal--intro .eye-portal__bolt--core.eye-portal__bolt--sound{
    stroke-dasharray:32 68;
    animation:eyePortalBoltCrawl 0.95s linear infinite,eyePortalBoltFadeIn 0.05s ease-out 1.25s both;
  }
  .eye-portal--intro .eye-portal__bolt--halo.eye-portal__bolt--sound{
    stroke-dasharray:42 58;
    animation:eyePortalBoltCrawl 1.25s linear -0.12s infinite reverse,eyePortalBoltFadeIn 0.05s ease-out 1.25s both;
  }

  /* Karten: sanftes Einblenden je 0.25s nach dem zugehörigen Blitz */
  .eye-portal--intro .eye-portal__link--vision{
    animation:eyePortalCardSmoothIn 0.3s ease-out both;
    animation-delay:0.5s;
  }
  .eye-portal--intro .eye-portal__link--portal{
    animation:eyePortalCardSmoothIn 0.3s ease-out both;
    animation-delay:1.0s;
  }
  .eye-portal--intro .eye-portal__link--sound{
    animation:eyePortalCardSmoothIn 0.3s ease-out both;
    animation-delay:1.5s;
  }

  @keyframes eyePortalBoltFadeIn{
    from{stroke-opacity:0}
    to{stroke-opacity:1}
  }

  @keyframes eyePortalCardSmoothIn{
    from{opacity:0}
    to{opacity:1}
  }
}
@media (prefers-reduced-motion:reduce){
  .eye-portal__bolt--core,
  .eye-portal__bolt--halo{
    stroke-dasharray:none!important;
    stroke-dashoffset:0!important;
    animation:none!important;
  }
  /* Sofort alles sichtbar bei reduzierter Bewegung */
  .eye-portal--intro .eye-portal__link{
    opacity:1!important;
    animation:none!important;
  }
  .eye-portal--intro .eye-portal__bolt{
    stroke-opacity:1!important;
    animation:none!important;
  }
}
.eye-portal__list{
  list-style:none;
  margin:0;
  padding:0;
  pointer-events:none;
}
.eye-portal__list > li{
  pointer-events:none;
  margin:0;
}
/* Animierbarer Custom-Property für rotierenden Border */
@property --portal-border-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
/* Apple Liquid Glass — Menü-Kacheln */
.eye-portal__link{
  position:fixed;
  transform:translate(-50%,-50%);
  z-index:1;
  pointer-events:auto;
  display:block;
  min-width:140px;
  min-height:44px;
  padding:12px 20px;
  text-decoration:none;
  text-align:center;
  color:#fff;
  font-family:'UiMono','Courier New',monospace;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:18px;
  background:rgba(0,0,0,0.10);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    inset 1px 0 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(255,255,255,0.10),
    0 8px 32px rgba(0,0,0,0.28),
    0 2px 8px rgba(0,0,0,0.18);
  backdrop-filter:blur(24px) brightness(1.08) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) brightness(1.08) saturate(1.5);
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,255,255,0.12);
  transition:transform 0.22s ease;
  isolation:isolate;
}
/* Hover: nur Zoom, kein Glow */
.eye-portal__link:hover,
.eye-portal__link:focus-visible{
  transform:translate(-50%,-50%) scale(1.06);
}
/* Sichtbarer Fokus-Rahmen nur bei Tastatur-Navigation */
.eye-portal__link:focus{outline:none}
.eye-portal__link:focus-visible{
  outline:2px solid rgba(0,255,255,0.6);
  outline-offset:3px;
}
.eye-portal__title{
  display:block;
  font-size:13px;
  font-weight:900;
  letter-spacing:5px;
  color:#fff;
  text-shadow:0 0 15px var(--c-primary),0 0 30px var(--c-secondary),0 0 60px var(--c-primary);
  animation:textGlow 4s infinite ease-in-out;
}
.eye-portal__sub{
  display:block;
  margin-top:6px;
  font-size:10px;
  letter-spacing:2px;
  color:rgba(255,255,255,0.75);
  text-shadow:0 0 10px var(--c-secondary);
  line-height:1.35;
}
/* Menüpunkte: gleicher Abstand von der jeweiligen Pyramidenspitze (gesetzt in app.js) */
.eye-portal__link--vision{
  left:var(--menu-vision-x);
  top:var(--menu-vision-y);
}
.eye-portal__link--sound{
  left:var(--menu-sound-x);
  top:var(--menu-sound-y);
}
.eye-portal__link--portal{
  left:var(--menu-portal-x);
  top:var(--menu-portal-y);
}

@media(max-width:600px){
  .eye-portal__link{
    padding:10px 12px;
    min-width:106px;
    max-width:min(46vw,200px);
  }
  .eye-portal__title{
    font-size:11px;
    letter-spacing:3px;
  }
  .eye-portal__sub{
    font-size:9px;
    letter-spacing:1px;
  }
}

/* ---- Scene Menu (liquid glass wie VISION/SOUND/CONNECT) ---- */
.scene-menu[hidden]{display:none!important}
.scene-menu{
  position:fixed;
  bottom:50px;
  right:20px;
  z-index:60;
  width:min(420px,90vw);
  max-height:min(480px,80vh);
  background:rgba(0,0,0,0.10);
  backdrop-filter:blur(24px) brightness(1.08) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) brightness(1.08) saturate(1.5);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:18px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    inset 1px 0 0 rgba(255,255,255,0.14),
    inset -1px 0 0 rgba(255,255,255,0.10),
    0 8px 32px rgba(0,0,0,0.28),
    0 2px 8px rgba(0,0,0,0.18);
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}
.scene-menu__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.scene-menu__title{
  font-family:'UiMono','Courier New',monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:5px;
  color:#fff;
  text-shadow:0 0 12px var(--c-primary),0 0 24px var(--c-secondary);
}
.scene-menu__header-buttons{display:flex;gap:4px}
.scene-menu__close,.scene-menu__toggle-all{
  background:none;
  border:none;
  color:rgba(255,255,255,0.6);
  font-size:16px;
  cursor:pointer;
  padding:4px 8px;
  border-radius:8px;
  transition:color 0.2s,background 0.2s;
}
.scene-menu__close:hover,.scene-menu__toggle-all:hover{color:#fff;background:rgba(255,255,255,0.10)}
.scene-menu__toggle-all.all-off{color:var(--c-primary);text-shadow:0 0 8px var(--c-primary)}
.scene-menu__list{
  overflow-y:auto;
  padding:6px 0 10px;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,0,255,0.25) transparent;
}
.scene-menu__list::-webkit-scrollbar{width:4px}
.scene-menu__list::-webkit-scrollbar-track{background:transparent}
.scene-menu__list::-webkit-scrollbar-thumb{background:rgba(255,0,255,0.3);border-radius:4px}
.scene-menu__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px;
  cursor:pointer;
  transition:background 0.2s;
  user-select:none;
}
.scene-menu__item:hover{background:rgba(255,255,255,0.05)}
.scene-menu__name{
  font-family:'UiMono','Courier New',monospace;
  font-size:11px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-right:12px;
}
/* Toggle Switch */
.scene-menu__switch{
  position:relative;
  flex-shrink:0;
  width:38px;
  height:20px;
}
.scene-menu__switch input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.scene-menu__slider{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.12);
  border-radius:20px;
  cursor:pointer;
  transition:background 0.25s;
}
.scene-menu__slider::before{
  content:'';
  position:absolute;
  height:14px;width:14px;
  left:3px;bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:transform 0.25s;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.scene-menu__switch input:checked + .scene-menu__slider{
  background:var(--c-primary);
  box-shadow:0 0 8px var(--c-primary);
}
.scene-menu__switch input:checked + .scene-menu__slider::before{
  transform:translateX(18px);
}
@media(max-width:600px){
  .scene-menu{width:92vw;max-height:70vh}
  .scene-menu__item{padding:7px 14px}
  .scene-menu__name{font-size:10px}
}