:root {
  --ink: #ffe9d0;
  --dim: #c89a6e;
  --line: rgba(255, 180, 100, .30);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #241205 0%, #120a04 58%, #060302 100%);
  font: 500 14px/1.4 ui-monospace, "Cascadia Mono", "Courier New", monospace;
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
#view { position: fixed; inset: 0; }
#view canvas { display: block; touch-action: none; }

#vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 50% 45%, transparent 55%, rgba(6, 3, 1, .55) 100%);
}

#boot {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; text-align: center;
  letter-spacing: .34em; font-size: 15px;
  background: radial-gradient(120% 90% at 50% 38%, #241205 0%, #120a04 58%, #060302 100%);
  transition: opacity .7s ease;
}
#boot.off { opacity: 0; pointer-events: none; }
#boot span { letter-spacing: .12em; font-size: 11px; color: var(--dim); }
.sigil {
  width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid var(--line); position: relative;
  animation: spin 2.6s linear infinite;
}
.sigil::before, .sigil::after {
  content: ''; position: absolute; border-radius: 50%; inset: 9px;
  border: 1px dashed rgba(255, 200, 140, .55);
}
.sigil::after { inset: 26px; border-style: solid; border-color: rgba(255, 215, 160, .9); animation: spin 1.4s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(rgba(16, 8, 3, .82), rgba(16, 8, 3, 0));
  pointer-events: none;
}
#brand { letter-spacing: .22em; font-size: 13px; }
#brand span { display: block; letter-spacing: .08em; font-size: 10px; color: var(--dim); }
#xrbtns { margin-left: auto; display: flex; gap: 6px; pointer-events: auto; flex-wrap: wrap; justify-content: flex-end; }
#xrbtns button {
  font: 600 10px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .12em; color: var(--ink);
  background: rgba(70, 40, 14, .55); border: 1px solid var(--line);
  border-radius: 4px; padding: 8px 10px; cursor: pointer;
}
#xrbtns button:disabled { opacity: .35; cursor: default; }
#xrbtns button:not(:disabled):hover { border-color: rgba(255, 205, 140, .8); background: rgba(110, 62, 20, .6); }

#hint {
  position: fixed; bottom: 12px; left: 0; right: 0; z-index: 20;
  text-align: center; letter-spacing: .14em; font-size: 10px;
  color: var(--dim); pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

body.xr #hud, body.xr #hint, body.xr #vignette { display: none; }

/* still=1 — clean capture: no chrome, no boot veil, no vignette */
body.still #hud,
body.still #hint,
body.still #boot,
body.still #vignette { display: none !important; }