*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#070707;color:#eee;font-family:Arial,Helvetica,sans-serif;overflow:hidden}body{display:grid;place-items:center}
#app{position:relative;width:100vw;height:100vh;overflow:hidden;background:#070707}
#scene{position:absolute;inset:0;overflow:hidden;z-index:1;transform:scale(1.03);transform-origin:center;transition:transform .18s ease}
.room{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;user-select:none}
.screen{position:absolute;left:34.688995%;top:27.630181%;width:29.904306%;height:32.518597%;overflow:hidden;border-radius:2.5%;z-index:3;background:#050607}
#player{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#050607}
#screenFade{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.08) 74%,rgba(0,0,0,.32) 92%,rgba(0,0,0,.72) 100%);mix-blend-mode:multiply}
#tint,#reflection{position:absolute;inset:0;pointer-events:none;z-index:5;transition:opacity .2s}
#tint{background:rgba(18,27,30,.16);mix-blend-mode:color}
#reflection{background:linear-gradient(135deg,rgba(255,255,255,.075),transparent 24%,transparent 68%,rgba(255,255,255,.025));mix-blend-mode:screen}
.brand{position:absolute;z-index:20;top:18px;left:36px;width:188px;height:auto;pointer-events:none}.brand img{display:block;width:100%;height:auto;object-fit:contain}
.visual-controls{position:absolute;z-index:50;right:28px;top:13.5%;width:228px;display:grid;gap:8px;pointer-events:auto}
.control-row{height:46px;border:1px solid #454957;border-radius:9px;background:rgba(8,10,17,.88);display:flex;align-items:center;gap:10px;padding:0 12px;font-size:12.5px;font-weight:900;letter-spacing:.4px;pointer-events:auto}
.control-row span{white-space:nowrap}
.control-row input[type=range]{display:block;width:90px;height:24px;margin:0;accent-color:#ef3aa0;cursor:pointer;pointer-events:auto;touch-action:none}
.control-row b{margin-left:auto;font-size:11px;color:#ffe43b;min-width:35px;text-align:right}
.toggle{margin-left:auto;width:39px;height:21px;flex:0 0 39px;cursor:pointer;pointer-events:auto;border:0;border-radius:20px;background:#59606b;position:relative;padding:0}
.toggle:after{content:"";position:absolute;width:17px;height:17px;top:2px;left:2px;border-radius:50%;background:#fff;transition:.15s}
.toggle.on{background:#43c7ed}.toggle.on:after{left:20px}
.now-playing{position:absolute;z-index:20;left:3.5%;bottom:14.5%;width:375px;text-shadow:0 2px 10px #000}
.eyebrow{font-size:14px;letter-spacing:2px;font-weight:900;margin-bottom:6px}
.now-playing h1{font-size:31px;line-height:1;margin:0 0 7px;text-transform:uppercase}
#songArtist{font-size:18.75px;line-height:1.2;letter-spacing:1.5px;color:#ddd;font-weight:800}
.transport{position:absolute;z-index:20;left:50%;bottom:13.3%;transform:translateX(-50%);display:flex;gap:14px}
.transport button{border:2px solid #111;border-radius:9px;box-shadow:0 3px 0 rgba(0,0,0,.55);font-weight:900;cursor:pointer}
.square{width:55px;height:49px;font-size:20px}.play{width:79px;height:66px;font-size:24px;background:#ef3297}.yellow{background:#f4d72f}.cyan{background:#43c7ed}
.eras{position:absolute;z-index:20;left:50%;bottom:7.2%;transform:translateX(-50%);display:flex;padding:5px;border:2px solid #363944;border-radius:10px;background:rgba(7,8,13,.78)}
.eras button{height:39px;min-width:63px;border:0;border-radius:6px;background:#10121a;color:#eee;font-weight:900;font-size:12.5px;cursor:pointer;pointer-events:auto}
.eras button.active{background:#ef3297}.eras button:nth-child(3){border:2px solid #f1dd35}.eras button:nth-child(4){border:2px solid #43c7ed}.eras button:nth-child(5){border:2px solid #9d72ff}
.volume{position:absolute;z-index:20;right:3.5%;bottom:9.2%;display:flex;gap:10px;align-items:center;font-size:15px}.volume input{width:100px;height:22px;cursor:pointer;pointer-events:auto;accent-color:#43c7ed}.volume b{font-size:11px;color:#aaa}
.coffee{position:absolute;z-index:20;left:50%;bottom:1.7%;transform:translateX(-50%);min-width:190px;height:44px;padding:0 20px;display:flex;align-items:center;justify-content:center;border:2px solid #f4d72f;border-radius:9px;background:#ef3297;color:#fff;text-decoration:none;font-size:14px;font-weight:1000;letter-spacing:.8px;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 18px rgba(239,50,151,.22);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.coffee:hover{color:#fff;filter:saturate(1.15) brightness(1.08);transform:translateX(-50%) translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.5),0 0 22px rgba(239,50,151,.34)}
@media(max-width:800px){.visual-controls{right:10px;width:160px}.now-playing{left:20px;bottom:18%;width:230px}.transport{bottom:13%;gap:5px}.square{width:37px}.play{width:53px}.eras{bottom:7%}}

.visual-controls,.visual-controls *,.volume,.volume *{pointer-events:auto}
.visual-controls{isolation:isolate}
#lightsOffToggle{background:#f4d72f;color:#111;justify-content:center;cursor:pointer}
#lightsOffToggle.active{background:#ef3297;color:#fff}
#lightsOut{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6;transition:opacity .18s}
#app.lights-off #lightsOut{opacity:1}
#app.lights-off .now-playing .eyebrow,
#app.lights-off .now-playing #songArtist,
#app.lights-off .now-playing .song-info{display:none}
#app.lights-off .now-playing h1{margin:0}


/* Reliable native slider interaction */
.visual-controls{z-index:50;pointer-events:auto}
.control-row{pointer-events:auto}
.control-row input[type=range]{display:block;position:relative;z-index:60;width:90px;height:24px;margin:0;cursor:pointer;pointer-events:auto;touch-action:none;accent-color:#ef3aa0}
.toggle{position:relative;z-index:60;cursor:pointer;pointer-events:auto}
.volume{z-index:50;pointer-events:auto}
.volume input[type=range]{position:relative;z-index:60;cursor:pointer;pointer-events:auto;touch-action:none}

/* Lights-off fade: everything disappears except the song title. */
#lightsOut{
  position:absolute;inset:0;z-index:80;
  background:#000;opacity:0;pointer-events:none;
  transition:opacity 900ms cubic-bezier(.4,0,.2,1);
}
#app.lights-off #lightsOut{opacity:1}
#app.lights-off #scene,
#app.lights-off .brand,
#app.lights-off .visual-controls,
#app.lights-off .transport,
#app.lights-off .eras,
#app.lights-off .volume,
#app.lights-off .coffee,
#app.lights-off .timeline,
#app.lights-off #songArtist,
#app.lights-off .song-info{
  opacity:0;
  transition:opacity 700ms cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
#app.lights-off .now-playing{
  z-index:100;
  pointer-events:none;
}
#app.lights-off .now-playing .eyebrow,
#app.lights-off .now-playing #songArtist,
#app.lights-off .now-playing .timeline{
  display:none;
}
#app.lights-off .now-playing h1{
  opacity:1;
  color:#fff;
  text-shadow:0 2px 18px rgba(255,255,255,.16),0 2px 10px #000;
}
#lightsOffToggle{
  height:46px;border:1px solid #454957;border-radius:9px;
  background:#f4d72f;color:#111;font-size:12.5px;font-weight:900;
  cursor:pointer;pointer-events:auto;
}
#lightsOffToggle.active{background:#ef3297;color:#fff}

/* Lights ON remains visible while the rest of the controls are hidden. */
#app.lights-off .visual-controls{
  opacity:1;
  pointer-events:none;
}
#app.lights-off .visual-controls .control-row{
  opacity:0;
  pointer-events:none;
}
#app.lights-off #lightsOffToggle{
  opacity:1;
  pointer-events:auto;
  position:relative;
  z-index:100;
  transition:opacity 700ms ease, background-color 180ms ease;
}

/* 10s: move only the player screen upward by ~1 cm equivalent on the reference canvas. */
#scene.era10-player-up .screen{
  transform:translateY(-37.8px);
}

/* Era-specific logo mounted in the top-right corner of the TV/player. */
.player-era-logo{
  position:absolute;
  top:14px;
  right:16px;
  width:114px;
  height:auto;
  max-height:81px;
  object-fit:contain;
  z-index:7;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
  transition:opacity .18s ease;
}

/* Song title and artist fade/slide in whenever a new track is loaded. */
.track-fade-in{
  animation:trackFadeIn .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes trackFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Song info card: floats above the title and grows with the text. */
.song-info{
  position:absolute;
  left:0;
  bottom:calc(100% + 14px);
  width:430px;
  max-height:170px;
  overflow:hidden;
  padding:13px 15px 14px;
  border-left:3px solid #ef3297;
  border-top:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  border-radius:2px 8px 8px 2px;
  background:rgba(5,7,12,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  text-shadow:0 1px 5px #000;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease, max-height .35s ease;
}
.song-info.visible{
  opacity:1;
  transform:translateY(0);
}
.song-info[hidden]{display:none}
.song-info-label{font-size:10px;letter-spacing:1.8px;font-weight:900;color:#f4d72f;margin-bottom:7px}
#songInfoText{font-size:13px;line-height:1.42;color:#ddd;font-weight:600}
#songInfoText a{color:#43c7ed;text-decoration:none;font-weight:900;white-space:nowrap}
@media(max-width:800px){
  .song-info{width:calc(100vw - 40px);max-width:430px;max-height:150px;left:0}
}