:root { --ui: rgba(0,0,0,.65); --text: #fff; }

html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#000; color:var(--text); }

.shell { max-width: 900px; margin: 0 auto; padding: 24px; }

.btn {
  display:inline-block; padding:12px 16px; border-radius:12px;
  background: #1f6feb; color:#fff; text-decoration:none; font-weight:600;
}

.level {
  position: relative;
  width: min(1100px, 100vw);
  aspect-ratio: 16 / 9; /* match your scene image ratio if possible */
  margin: 0 auto;
  background: #111;
  overflow: hidden;
  border-radius: 16px;
}

.level img.bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  user-select:none; -webkit-user-drag:none;
}

.hud {
  position: absolute; left: 12px; top: 12px;
  background: var(--ui);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.hotspot {
  position: absolute;
  /* left/top/width/height set per level */
  cursor: pointer;
  border-radius: 8px;

  /* make it invisible, but keep it clickable */
  background: rgba(255,255,255,0);
  outline: none;
}

.hotspot:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1f6feb;
}

.toast {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  background: var(--ui);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.toast.show { opacity: 1; }