/* --- Base --- */
:root{
  --maxw: 1180px;
  --radius: 18px;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --hotspot-glow: rgba(255,255,255,.16);
  --hotspot-purple: rgba(186, 137, 255, .22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 900px at 50% 20%, #120c24 0%, #07070f 55%, #04040a 100%);
  color:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

/* --- Stage --- */
.page{ width:100%; display:flex; justify-content:center; }
.stage{
  position:relative;
  width:min(var(--maxw), 100%);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#000;
}

.bg{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Subtle vignette */
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(0,0,0,.04), rgba(0,0,0,.30) 65%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(10,8,18,.18), rgba(0,0,0,0) 30%);
  z-index:1;
}

/* --- Hotspots --- */
.hotspot{
  position:absolute;
  display:block;
  border-radius: 14px;
  text-decoration:none;
  outline:none;
  z-index:3;
}

.hotspot::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 18px;
  background: radial-gradient(closest-side, var(--hotspot-glow), rgba(0,0,0,0));
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
  transform: scale(.98);
}

.hotspot:hover::before,
.hotspot:focus-visible::before{
  opacity:1;
  transform: scale(1);
}

/* Hotspot placement */
.window{
  left: 20%;
  top: 1.5%;
  width: 59%;
  height: 61%;
  border-radius: 18px;
}
.window::before{
  background: radial-gradient(closest-side, var(--hotspot-purple), rgba(0,0,0,0));
}

.bookshelf{
  left: 0%;
  top: 0%;
  width: 20%;
  height: 78%;
}

.headphones{
  left: 62%;
  top: 68%;
  width: 24%;
  height: 20%;
  border-radius: 18px;
}

.journal{
  left: 33%;
  top: 82%;
  width: 38%;
  height: 16%;
  border-radius: 18px;
}

/* --- Label pills (clean, no blur blocks) --- */
.pill{
  position:absolute;
  z-index:4;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.55); /* darker so it fully covers old text */
  color: rgba(255,255,255,.92);
  user-select:none;
  white-space: nowrap;
}

/* Carefully placed + oversized to cover the baked-in wrong labels completely */
.pill-theatre{
  left: 55%;
  top: 57.6%;
  padding: 10px 18px;
}

.pill-music{
  left: 85.5%;
  top: 75.2%;
  padding: 10px 18px;
}

.pill-journal{
  left: 48%;
  top: 92.0%;
  padding: 10px 16px;
}

/* Hint */
.hint{
  position:absolute;
  left: 16px;
  bottom: 14px;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity:.55;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  z-index:4;
}

@media (max-width: 640px){
  body{ padding: 10px; }
  .hint{ display:none; }
  .window{ left: 18%; width: 62%; height: 60%; }
  .bookshelf{ width: 22%; }
  .headphones{ left: 58%; width: 30%; top: 68%; }
  .journal{ left: 26%; width: 48%; }
  .pill-theatre{ left: 52%; }
  .pill-music{ left: 80%; }
  .pill-journal{ left: 40%; }
}


.stage.debug .hotspot{ outline: 2px dashed rgba(255,255,255,.65); background: rgba(255,255,255,.06); }