:root{
  --bg: #0b1020;
  --panel: rgba(255,255,255,0.06);
  --accent: #7afcff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:linear-gradient(180deg,#05060a 0%, #0b1020 100%);font-family:Inter,Segoe UI,Roboto,Arial}
#ui{position:fixed;right:18px;top:18px;z-index:30}
#fullscreenBtn{background:var(--panel);color:#fff;border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:10px;backdrop-filter: blur(6px);cursor:pointer}
#fullscreenBtn:hover{transform:translateY(-2px)}

#cam{position:fixed;left:12px;top:12px;width:220px;height:160px;object-fit:cover;border-radius:8px;border:2px solid rgba(255,255,255,0.06);box-shadow:0 6px 20px rgba(0,0,0,0.6);z-index:40}

canvas{display:block}

/* make sure Three canvas sits below UI */
#three-root{position:fixed;inset:0;z-index:10}

#loading {
  position: fixed; inset: 0; z-index: 50;
  background: #0b1020;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
  transition: opacity 0.5s;
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(122,252,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* small responsive tweaks */
@media (max-width:600px){#cam{width:160px;height:120px}}