/*Polished UI for Orbs.cure — HUD, menu overlay (glassy gradient), toast, AR/VR controls.*/

html, body, a-scene, canvas {
  background: transparent !important;
}

:root{
  --bg:#030911;
  --glass-1: rgba(255,255,255,0.035);
  --glass-2: rgba(255,255,255,0.01);
  --panel-bg: rgba(12,16,22,0.55);
  --accent: #1f9cff;
  --accent-2: #6ec1ff;
  --muted: rgba(255,255,255,0.12);
}

/* Base page */
html,body{
  height:100%;
  margin:0;
  background: linear-gradient(180deg, #020512 0%, #030911 55%, #051225 100%);
  color:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* Make the A-Frame canvas full screen */
a-scene{ display:block; width:100vw; height:100vh; }

/* HUD - top-left */
#hud{
  position:fixed;
  left:12px; top:12px;
  z-index:110;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13px;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  padding:8px 10px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.28));
  box-shadow: 0 6px 18px rgba(0,0,0,0.48);
}
#hud button{
  margin-left:6px;
  padding:4px 8px;
  border-radius:8px;
  border:1px solid var(--muted);
  background: rgba(6,18,28,0.6);
  color: #cfe9ff;
  cursor:pointer;
  font-weight:700;
  font-size:11px;
}

/* Toast (center bottom) */
#toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:120;
  background: rgba(0,0,0,0.65);
  padding:8px 12px;
  border-radius:10px;
  display:none;
  font-size:13px;
}

/* ===== Menu overlay (center) =====
   Glassy gradient panel. Visible by default; when aria-hidden="true" it fades and becomes non-interactive.
*/
#menuOverlay{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:200;
  width:360px;
  max-width:92vw;
  padding:18px;
  border-radius:14px;
  color:#fff;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.03);
  transition: opacity .22s ease, transform .22s ease;
  display:block;
  pointer-events:auto;
}

/* Explicit visible state (helps when JS toggles aria-hidden only) */
#menuOverlay[aria-hidden="false"]{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}


/* Decorative subtle radial glow for the overlay (gives a neon grid feel) */
#menuOverlay::before{
  content:'';
  position:absolute;
  left:-30%;
  top:-30%;
  width:160%;
  height:160%;
  pointer-events:none;
  background: radial-gradient(circle at 10% 20%, rgba(31,156,255,0.06), transparent 12%),
              radial-gradient(circle at 90% 80%, rgba(110,193,255,0.04), transparent 10%);
  mix-blend-mode: screen;
  border-radius:20px;
}

/* When hidden via aria-hidden, make it non-blocking and transparent */
#menuOverlay[aria-hidden="true"]{
  opacity:0;
  pointer-events:none;
  transform: translate(-50%,-48%) scale(.995);
  display:block; /* keep in DOM for a11y, but visually hidden */
}

/* menu content */
#menuOverlay h2{
  margin:0 0 10px 0;
  font-size:18px;
  letter-spacing:0.3px;
}
.field{ margin-bottom:8px; }
.field label{ display:block; font-size:13px; margin-bottom:6px; color: #dbefff; }
.field input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(6,12,18,0.45);
  color:#fff;
  box-sizing:border-box;
  font-size:13px;
}

/* Buttons row */
.buttons-row{
  display:flex;
  gap:10px;
  margin-top:8px;
}
button.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 22px rgba(31,156,255,0.14);
  border:none;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  flex:1 1 auto;
}
#menuOverlay button{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(12,18,26,0.45);
  color:#dff6ff;
  cursor:pointer;
  font-weight:700;
  flex:1 1 auto;
  min-width:86px;
}

/* small utilities for buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* Music controls small styles (menu overlay) */
.menu-btn.small {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
  background: rgba(12,18,26,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.04);
}
#menuOverlay hr { opacity: 0.06; margin: 12px 0; }

/* small status line for AR status */
.status-line{
  margin-top:10px;
  font-size:13px;
  color:#bff5ff;
  opacity:0.95;
}

/* AR/VR controls container adjustments (redundant safe styles) */
#enterARBtn, #enterVRBtn{
  padding:10px 12px;
  border-radius:10px;
  border:none;
  background: var(--accent);
  color:#fff;
  cursor:pointer;
  font-weight:700;
}

/* AR button hidden by default until JS reveals it */
#enterARBtn{ display:none; }

/* Small utilities */
hr{ border:0; height:1px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); margin:12px 0; }

/* Small VR in-head HUD panel styling fallback (visible only in VR) */
a-entity[ui-panel]{ pointer-events:none; }

/* responsive tweaks */
@media (max-width:480px){
  #menuOverlay{ width:94vw; padding:14px; }
  #hud{ font-size:12px; padding:6px 8px; }
  .buttons-row{ flex-direction:column; }
}

/* Focus states for keyboard accessibility */
button:focus, input:focus{
  outline: 2px solid rgba(31,156,255,0.42);
  outline-offset:2px;
  box-shadow: 0 0 0 6px rgba(31,156,255,0.04);
}

/* Make A-Frame interactable elements show pointer cursor on desktop */
.interactable{ cursor:pointer; }

/* === Music Player Premium Styling (added) === */
.music-panel {
  margin-top: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(6px) saturate(1.05);
}
.music-title {
  font-size: 14px;
  font-weight: 700;
  color: #dff6ff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.music-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.music-btn {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(31,156,255,0.18);
  transition: transform 0.18s ease;
}
.music-btn:hover {
  transform: scale(1.06);
}
.music-nowplaying {
  text-align: center;
  font-size: 13px;
  color: #bff5ff;
  opacity: 0.95;
}

/* Ensure overlays sit above canvas; allow canvas to be interactive only when needed */
a-scene, a-scene .a-canvas, a-scene canvas {
  position: fixed !important;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none; /* DOM overlays receive pointer events by default */
}

/* Allow enabling canvas interactions when necessary via `.scene-interactive` on body */
.scene-interactive a-scene, .scene-interactive a-scene canvas { pointer-events: auto; }

/* Toast top */
#toast { z-index: 10002; }