/* vr.css */
:root{--bg0:#050711;--bg1:#070A14;--txt:rgba(255,255,255,.92);--muted:rgba(255,255,255,.72);--muted2:rgba(255,255,255,.56);--stroke:rgba(255,255,255,.12);--card:rgba(255,255,255,.06);--shadow:0 18px 70px rgba(0,0,0,.55);--shadow2:0 12px 38px rgba(0,0,0,.45);--r:18px;--max:1140px;--mx:.5;--my:.5;--rx:0;--ry:0}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--txt);background:radial-gradient(1200px 900px at 25% 10%, rgba(140,220,255,.10), transparent 62%),radial-gradient(900px 700px at 85% 50%, rgba(200,150,255,.08), transparent 60%),linear-gradient(180deg,var(--bg0),var(--bg1));overflow:hidden}

/* FX canvas */
.fxCanvas{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.92;filter:saturate(1.22) contrast(1.06)}
@media (prefers-reduced-motion:reduce){.fxCanvas{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:10px 14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--txt);font-weight:700;font-size:13px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}.btn:active{transform:translateY(0)}
.btn--solid{background:linear-gradient(90deg, rgba(140,220,255,.20), rgba(200,150,255,.16));border-color:rgba(255,255,255,.18);box-shadow:var(--shadow2)}
.btn--ghost{background:rgba(255,255,255,.03)}.btn--sm{padding:8px 10px;font-size:12px}

/* HUD */
.hud{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;pointer-events:none}
.hud__left,.hud__right{pointer-events:auto}.hud__right{display:flex;gap:10px;align-items:center}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:34px;height:34px;border-radius:12px;background:radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),radial-gradient(22px 22px at 65% 60%, rgba(140,220,255,.85), rgba(140,220,255,0) 65%),radial-gradient(26px 26px at 55% 45%, rgba(200,150,255,.70), rgba(200,150,255,0) 70%),rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow2)}
.brand__name{font-weight:800;letter-spacing:.16em;font-size:13px}.brand__tag{font-size:12px;color:var(--muted2)}
.status{margin-top:10px;display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(255,255,255,.74);font-size:12px}

/* Elevator */
.elevator{position:fixed;left:14px;top:92px;z-index:55;width:132px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(8,10,18,.56);backdrop-filter:blur(16px);box-shadow:var(--shadow2);padding:12px}
.elevator__title{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.elevator__panel{display:grid;gap:8px;margin-top:10px}
.floorBtn{border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);padding:10px;font-weight:800;letter-spacing:.08em;cursor:pointer}
.floorBtn.is-active{background:linear-gradient(90deg, rgba(140,220,255,.22), rgba(200,150,255,.16));border-color:rgba(255,255,255,.20)}
.elevator__hint{margin-top:10px;color:rgba(255,255,255,.56);font-size:11px;line-height:1.35}

/* Viewport / Scenes */
.viewport{position:fixed;inset:0;transform:perspective(1100px) translateZ(0)}
.scene{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .35s ease,transform .45s ease;pointer-events:none}
.scene.is-active{opacity:1;transform:scale(1);pointer-events:auto}
.scene__bg{position:absolute;inset:-20px}
.bg-lobby{background:radial-gradient(1200px 700px at 20% 15%, rgba(140,220,255,.14), transparent 60%),radial-gradient(900px 600px at 80% 60%, rgba(200,150,255,.10), transparent 60%),linear-gradient(180deg, rgba(10,16,34,.70), rgba(5,7,17,.92))}
.bg-galeria{background:radial-gradient(1000px 650px at 25% 20%, rgba(200,150,255,.12), transparent 60%),radial-gradient(900px 650px at 75% 70%, rgba(140,220,255,.10), transparent 60%),linear-gradient(180deg, rgba(8,14,30,.75), rgba(5,7,17,.94))}
.bg-sala{background:radial-gradient(1000px 650px at 20% 30%, rgba(140,220,255,.12), transparent 60%),radial-gradient(900px 650px at 80% 35%, rgba(200,150,255,.12), transparent 60%),linear-gradient(180deg, rgba(10,14,28,.74), rgba(5,7,17,.95))}
.scene__layers{position:absolute;inset:0;pointer-events:none}
.layer{position:absolute;inset:-50px;opacity:.16;background:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);background-size:66px 66px;mask-image:radial-gradient(closest-side, rgba(0,0,0,.9), transparent 72%)}
.layer--far{transform:perspective(900px) rotateX(56deg) translateY(-120px)}
.layer--mid{transform:perspective(900px) rotateX(58deg) translateY(-70px);opacity:.12}
.layer--near{transform:perspective(900px) rotateX(60deg) translateY(-20px);opacity:.10}

.scene__content{position:relative;max-width:var(--max);margin:0 auto;padding:120px 22px 40px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.kicker:before{content:"";width:18px;height:1px;background:rgba(255,255,255,.28)}
h1{margin:14px 0 12px;font-size:clamp(34px,4.4vw,54px);letter-spacing:-.03em;line-height:1.02}
.lead{margin:0;color:var(--muted);max-width:72ch;line-height:1.55;font-size:16px}

/* Tiles / Panels / Cards */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.tile{text-align:left;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:var(--shadow2);padding:14px;cursor:pointer;display:flex;gap:12px;align-items:center;transition:transform .16s ease,border-color .16s ease}
.tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.tile__logo{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:900;letter-spacing:.06em}
.tile__t{font-weight:800}.tile__d{margin-top:4px;color:var(--muted2);font-size:12px;line-height:1.35}
.micro{display:flex;align-items:center;gap:10px;margin-top:16px;color:rgba(255,255,255,.68);font-size:12px}
.micro__dot{width:8px;height:8px;border-radius:999px;background:rgba(140,220,255,.85);box-shadow:0 0 18px rgba(140,220,255,.45)}
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.metalPanel{border-radius:18px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow:var(--shadow2);padding:14px;position:relative;overflow:hidden}
.metalPanel:before{content:"";position:absolute;inset:-120px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(140,220,255,.18), transparent 55%);pointer-events:none;opacity:.9}
.metalPanel__hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logoMini{width:28px;height:28px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-weight:900}
.metalPanel__ttl{font-weight:900}.metalPanel__tag{margin-left:auto;color:rgba(255,255,255,.55);font-size:12px}
.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:10px 0}
.bar span{display:block;height:100%;background:linear-gradient(90deg, rgba(140,220,255,.70), rgba(200,150,255,.62));border-radius:999px}
.tiny{margin-top:10px;color:rgba(255,255,255,.58);font-size:12px;line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:6px 10px;color:rgba(255,255,255,.74);font-size:12px}
.score{display:flex;align-items:baseline;gap:12px}
.score__n{font-size:44px;font-weight:900;letter-spacing:-.02em}
.score__d{color:rgba(255,255,255,.62);font-size:13px;line-height:1.35}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.glassCard{border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(12,16,32,.52);backdrop-filter:blur(18px);box-shadow:var(--shadow2);padding:14px}
.glassCard__n{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-weight:900}
.glassCard__t{margin-top:10px;font-weight:900}
.glassCard__d{margin-top:6px;color:rgba(255,255,255,.62);font-size:13px;line-height:1.45}

/* Modal */
.modal{position:absolute;inset:0;z-index:70}.hidden{display:none!important}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px)}
.modal__card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 44px));border-radius:22px;border:1px solid rgba(255,255,255,.16);background:rgba(10,14,28,.78);backdrop-filter:blur(18px);box-shadow:var(--shadow);overflow:hidden}
.modal__hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.modal__ttl{font-weight:900}.modal__body{padding:14px}
.x{width:34px;height:34px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);cursor:pointer}
.x--sm{width:30px;height:30px;border-radius:12px}

/* VR visor */
.vr-frame{position:fixed;inset:0;pointer-events:none;z-index:90}
.vr-frame__vignette{position:absolute;inset:-2px;background:radial-gradient(circle at 50% 45%, transparent 42%, rgba(0,0,0,.52) 76%, rgba(0,0,0,.78) 100%)}
.vr-frame__rim{position:absolute;background:rgba(0,0,0,.22);filter: drop-shadow(0 18px 50px rgba(0,0,0,.75))}
.vr-frame__rim--top{top:0;left:0;right:0;height:38px;border-bottom:1px solid rgba(255,255,255,.08)}
.vr-frame__rim--bottom{bottom:0;left:0;right:0;height:38px;border-top:1px solid rgba(255,255,255,.08)}
.vr-frame__rim--left{left:0;top:0;bottom:0;width:34px;border-right:1px solid rgba(255,255,255,.08)}
.vr-frame__rim--right{right:0;top:0;bottom:0;width:34px;border-left:1px solid rgba(255,255,255,.08)}
.vr-frame__glass{position:absolute;inset:38px;border-radius:44px;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 0 60px rgba(0,0,0,.35);
  background:
    radial-gradient(240px 240px at 22% 28%, rgba(140,220,255,.13), transparent 62%),
    radial-gradient(360px 360px at 78% 70%, rgba(200,150,255,.11), transparent 64%),
    radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.07), transparent 62%);
  opacity:.95;
  mix-blend-mode: screen;
}

/* Scanlines overlay */
.scanlinesOverlay{
  position:absolute; inset:0;
  opacity:.00;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    );
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:2;
}
.scanlines .scanlinesOverlay{opacity:.28; animation:scanMove 1.2s linear infinite;}
@keyframes scanMove{0%{transform:translateY(0)}100%{transform:translateY(18px)}}

/* subtle glow pulse when holoGlow enabled */
.holoGlow .vr-frame__glass{animation:glowPulse 2.6s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{opacity:.72}50%{opacity:.92}}

/* LUMEN */
.lumen{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.lumen__toggle{border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(8,10,18,.56);backdrop-filter:blur(14px);box-shadow:var(--shadow2);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;color:rgba(255,255,255,.90);font-weight:900}
.lumen__dot{width:10px;height:10px;border-radius:999px;background:rgba(140,220,255,.85);box-shadow:0 0 18px rgba(140,220,255,.55);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.55}}
.lumen__label{letter-spacing:.10em;font-size:12px}
.lumen__panel{width:min(360px,calc(100vw - 40px));border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,28,.78);backdrop-filter:blur(18px);box-shadow:var(--shadow);overflow:hidden}
.lumen__hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid rgba(255,255,255,.10)}
.lumen__name{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.lumen__sub{margin-top:6px;color:rgba(255,255,255,.62);font-size:12px;line-height:1.35}
.lumen__msgs{padding:12px;max-height:240px;overflow:auto}
.msg{padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.86);font-size:13px;line-height:1.45;margin-bottom:10px}
.msg--me{background:rgba(140,220,255,.07);border-color:rgba(140,220,255,.14)}
.lumen__row{display:flex;gap:10px;padding:10px 12px 12px}
.lumen__input{flex:1;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:rgba(255,255,255,.90);padding:10px;outline:none}
.lumen__actions{display:flex;gap:8px;padding:0 12px 12px}
.chipBtn{border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);padding:8px 10px;cursor:pointer;font-weight:800;font-size:12px}

/* Elevator FX overlay */
.elevatorFX{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(0,0,0,.38);backdrop-filter:blur(10px)}
.elevatorFX__doors{position:absolute;inset:0;display:flex}
.elevatorFX__door{flex:1;background:linear-gradient(180deg, rgba(10,12,20,.98), rgba(0,0,0,.92));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.elevatorFX__door--left{transform:translateX(-55%)}
.elevatorFX__door--right{transform:translateX(55%)}
.elevatorFX.is-closing .elevatorFX__door--left{animation:doorCloseL .42s ease forwards}
.elevatorFX.is-closing .elevatorFX__door--right{animation:doorCloseR .42s ease forwards}
.elevatorFX.is-opening .elevatorFX__door--left{animation:doorOpenL .46s ease forwards}
.elevatorFX.is-opening .elevatorFX__door--right{animation:doorOpenR .46s ease forwards}
@keyframes doorCloseL{to{transform:translateX(0)}}
@keyframes doorCloseR{to{transform:translateX(0)}}
@keyframes doorOpenL{to{transform:translateX(-55%)}}
@keyframes doorOpenR{to{transform:translateX(55%)}}

.elevatorFX__hud{position:relative;z-index:2;width:min(520px,calc(100vw - 60px));border-radius:22px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,28,.70);backdrop-filter:blur(18px);box-shadow:var(--shadow);padding:16px}
.elevatorFX__label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.elevatorFX__floor{margin-top:8px;font-size:38px;font-weight:900;letter-spacing:-.02em}
.elevatorFX__bar{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:10px}
.elevatorFX__barFill{height:100%;width:0%;background:linear-gradient(90deg, rgba(140,220,255,.70), rgba(200,150,255,.62))}
.elevatorFX__sub{margin-top:10px;color:rgba(255,255,255,.60);font-size:12px}

.elevatorFX.is-riding .elevatorFX__hud{animation:ride 180ms ease-in-out infinite}
@keyframes ride{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}

@media (max-width:980px){.tiles,.panels,.cards3{grid-template-columns:1fr}.elevator{top:auto;bottom:92px}}
@media (prefers-reduced-motion:reduce){
  .scanlinesOverlay{animation:none}
  .holoGlow .vr-frame__glass{animation:none}
  .elevatorFX.is-riding .elevatorFX__hud{animation:none}
}