/* ASÕNIQ — LUX3 Therapy Suite. Onyx / molten-gold / sapphire / platinum. Cinzel + Inter. */
:root{
  --onyx:#0A0A0A; --onyx-2:#101218; --sapphire:#0F52BA; --sapphire-glow:#2a72e6;
  --gold:#D4AF37; --gold-soft:#e7c964; --platinum:#E5E4E2; --ink:#cdd3df;
  --lock:#5a5f6b; --panel:rgba(10,12,18,.72); --panel-line:rgba(212,175,55,.35);
  --shadow:0 10px 40px rgba(0,0,0,.6);
  --cinzel:'Cinzel',Georgia,serif; --inter:'Inter',system-ui,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--platinum);font-family:var(--inter);overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ---------- ROOM ---------- */
#room{position:fixed;inset:0;overflow:hidden}
#room-bg{position:absolute;inset:0;background:#000 center/cover no-repeat;
  background-image:url('/assets/img/room_wraparound.png');
  filter:saturate(1.05) brightness(.9);transform:scale(1.04);transition:filter .6s}
#room.playing #room-bg{filter:saturate(1.1) brightness(.62)}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%,transparent 40%,rgba(0,0,0,.55) 100%)}

/* ---------- DOME (270° upper arc visual band) ---------- */
#dome{position:absolute;top:0;left:0;right:0;height:30vh;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(150% 120% at 50% 120%,#000 55%,transparent 78%);
          mask-image:radial-gradient(150% 120% at 50% 120%,#000 55%,transparent 78%)}
#dome video{position:absolute;left:-25%;top:-30%;width:150%;height:200%;object-fit:cover;
  transform:perspective(900px) rotateX(28deg);opacity:0;transition:opacity .8s;filter:saturate(1.2) blur(.4px)}
#dome.on video{opacity:.6}
#dome-rib{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(212,175,55,.07) 38px 40px);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 120%,#000 60%,transparent 80%)}

/* ---------- FRONT SCREEN ---------- */
#front{position:absolute;top:11vh;left:50%;transform:translateX(-50%);
  width:min(46vw,640px);aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1px solid var(--panel-line);box-shadow:0 0 60px rgba(15,82,186,.35),var(--shadow);
  background:linear-gradient(160deg,#05070d,#0b1020)}
#front video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
#front.on video{opacity:1}
#front-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.5rem;padding:1rem}
#front.on #front-idle{display:none}
#front-idle .brandline{font-family:var(--cinzel);letter-spacing:.32em;color:var(--gold-soft);font-size:.7rem}
#front-idle .exp{font-family:var(--cinzel);font-size:1.15rem;letter-spacing:.18em;color:var(--platinum)}
#front-idle .tag{font-size:.62rem;color:var(--ink);letter-spacing:.22em;opacity:.8}
#front .now{position:absolute;left:0;right:0;bottom:0;padding:.5rem .8rem;font-size:.7rem;
  background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;justify-content:space-between;align-items:center}
#front .now .hz{font-family:var(--cinzel);color:var(--gold-soft);letter-spacing:.1em}
#front .eq{display:flex;gap:2px;align-items:flex-end;height:14px}
#front .eq i{width:3px;height:4px;background:var(--sapphire-glow);animation:eq 1s infinite ease-in-out}
#front .eq i:nth-child(2){animation-delay:.15s}#front .eq i:nth-child(3){animation-delay:.3s}
#front .eq i:nth-child(4){animation-delay:.45s}#front .eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* brand marks flanking front screen */
.brand-tab{position:absolute;top:9vh;font-family:var(--cinzel);color:var(--gold-soft);
  letter-spacing:.2em;font-size:.66rem;text-align:center;opacity:.85}
#brand-left{left:5vw}#brand-right{right:5vw}
.brand-tab .lux{font-size:1.4rem;color:var(--platinum);letter-spacing:.34em}

/* ---------- CONSOLES (armrest touchscreens) ---------- */
.console{position:absolute;bottom:3vh;width:min(27vw,360px);max-height:62vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  box-shadow:var(--shadow),inset 0 0 30px rgba(15,82,186,.12);backdrop-filter:blur(7px);
  padding:.7rem .7rem .55rem;transform:perspective(1100px)}
#console-left{left:3.5vw;transform:perspective(1100px) rotateY(11deg)}
#console-right{right:3.5vw;transform:perspective(1100px) rotateY(-11deg)}
.console h2{font-family:var(--cinzel);font-size:.74rem;letter-spacing:.22em;margin:.1rem .2rem .5rem;
  color:var(--gold);display:flex;justify-content:space-between;align-items:center}
.console h2 .dot{width:7px;height:7px;border-radius:50%;background:var(--sapphire-glow);box-shadow:0 0 8px var(--sapphire-glow)}
.console .scroll{overflow-y:auto;overflow-x:hidden;padding-right:3px}
.console .scroll::-webkit-scrollbar{width:5px}
.console .scroll::-webkit-scrollbar-thumb{background:rgba(212,175,55,.4);border-radius:3px}
.cat-label{font-size:.56rem;letter-spacing:.28em;color:var(--ink);opacity:.7;margin:.5rem .2rem .3rem;text-transform:uppercase}

/* tiles */
.tile{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;border:1px solid rgba(212,175,55,.18);
  background:linear-gradient(135deg,rgba(20,24,34,.85),rgba(10,12,18,.85));border-radius:11px;
  padding:.5rem .6rem;margin-bottom:.4rem;transition:transform .15s,box-shadow .25s,border-color .25s;position:relative}
.tile .ico{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--cinzel);font-size:.6rem;color:var(--onyx);background:linear-gradient(135deg,var(--gold),var(--gold-soft));font-weight:700}
.tile .meta{min-width:0;flex:1}
.tile .name{font-size:.78rem;font-weight:600;color:var(--platinum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .sub{font-size:.6rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.tile .badge{font-size:.5rem;letter-spacing:.1em;padding:2px 5px;border-radius:5px;border:1px solid var(--lock);color:var(--lock)}

/* unlocked = gold-lit */
.tile.unlocked{cursor:pointer;border-color:rgba(212,175,55,.45);box-shadow:0 0 0 0 rgba(212,175,55,0)}
.tile.unlocked:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:0 0 16px rgba(212,175,55,.35)}
.tile.active{border-color:var(--sapphire-glow);box-shadow:0 0 18px rgba(42,114,230,.55)}
.tile.active .ico{background:linear-gradient(135deg,var(--sapphire-glow),var(--sapphire))}

/* locked = dimmed + lock icon */
.tile.locked{cursor:not-allowed;opacity:.5;filter:grayscale(.6)}
.tile.locked .ico{background:linear-gradient(135deg,#2a2d36,#1a1c22);color:var(--lock)}
.tile.locked .name{color:var(--ink)}
.tile.locked .lockicon{margin-left:auto;color:var(--gold);opacity:.8}
.tile.locked .badge{border-color:var(--gold-soft);color:var(--gold-soft)}

/* ---------- HUD top bar ---------- */
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:.6rem 1rem;font-size:.62rem;letter-spacing:.18em;z-index:5}
#hud .l{display:flex;align-items:center;gap:.6rem}
#hud .logo{font-family:var(--cinzel);letter-spacing:.34em;color:var(--platinum)}
#hud .logo b{color:var(--gold)}
.pill{border:1px solid var(--panel-line);background:var(--panel);border-radius:20px;padding:.3rem .7rem;color:var(--ink)}
#tierSwitch{display:flex;gap:.25rem;align-items:center}
#tierSwitch select{background:#0b0e15;color:var(--gold-soft);border:1px solid var(--panel-line);border-radius:8px;padding:.25rem .4rem;font-family:var(--inter);font-size:.62rem}
#tierSwitch .demo{color:var(--lock);font-size:.5rem;letter-spacing:.1em}

/* ---------- transport / now-playing dock ---------- */
#dock{position:absolute;bottom:1vh;left:50%;transform:translateX(-50%);display:flex;gap:.8rem;align-items:center;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:30px;padding:.4rem .8rem;backdrop-filter:blur(6px);
  box-shadow:var(--shadow);max-width:92vw}
#dock.hidden{display:none}
#dock .tnow{font-size:.66rem;min-width:0;max-width:34vw}
#dock .tnow .n{font-family:var(--cinzel);color:var(--gold-soft);letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dock .tnow .s{color:var(--ink);font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dock button.t{width:34px;height:34px;border-radius:50%;border:1px solid var(--panel-line);background:#0b0e15;display:grid;place-items:center}
#dock button.play{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--onyx);border:none}
#dock .pan{display:flex;align-items:center;gap:.35rem;font-size:.55rem;color:var(--ink)}
#dock input[type=range]{width:90px;accent-color:var(--gold)}

/* ---------- enter overlay (needed for audio autoplay gesture) ---------- */
#enter{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;background:radial-gradient(120% 100% at 50% 40%,#0b1020,#000);text-align:center;transition:opacity .8s}
#enter.gone{opacity:0;pointer-events:none}
#enter .lux{font-family:var(--cinzel);font-size:clamp(2.4rem,9vw,5rem);letter-spacing:.3em;color:var(--platinum);
  text-shadow:0 0 40px rgba(15,82,186,.5)}
#enter .lux b{color:var(--gold)}
#enter .sub{font-family:var(--cinzel);letter-spacing:.32em;color:var(--gold-soft);font-size:.8rem}
#enter .tag{color:var(--ink);font-size:.7rem;letter-spacing:.18em;max-width:30rem;padding:0 1rem}
#enter button{margin-top:.6rem;font-family:var(--cinzel);letter-spacing:.24em;font-size:.8rem;color:var(--onyx);
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));border:none;border-radius:30px;padding:.85rem 2.4rem;
  box-shadow:0 0 30px rgba(212,175,55,.5)}
#enter .legal{position:absolute;bottom:1rem;font-size:.52rem;color:var(--lock);letter-spacing:.1em;max-width:40rem;padding:0 1rem}

/* roadmap chip */
#roadmap{position:absolute;bottom:1vh;right:1vw;font-size:.5rem;letter-spacing:.1em;color:var(--lock);
  border:1px dashed rgba(212,175,55,.25);border-radius:8px;padding:.25rem .5rem;background:rgba(0,0,0,.4);max-width:30vw}

/* ---------- MOBILE ---------- */
@media (max-width:820px){
  #room-bg{background-position:50% 30%}
  #front{width:84vw;top:8vh}
  .brand-tab{display:none}
  #dome{height:22vh}
  .console{position:relative;width:auto;max-height:none;bottom:auto;left:auto !important;right:auto !important;
    transform:none !important;margin:.5rem;border-radius:14px}
  #consoles-mobile{position:absolute;left:0;right:0;bottom:0;top:42vh;overflow-y:auto;padding-bottom:6rem;z-index:4}
  #dock .tnow{max-width:40vw}#dock input[type=range]{width:60px}
  #roadmap{display:none}
}