/* ============================================================
   CUTLINE — HTML layer.

   Deliberately small. The game's interface is 3D geometry inside the scene,
   because an HTML overlay cannot render inside an immersive WebXR session.
   What remains here is the boot shim and the toast.
   ============================================================ */

:root {
  --void:  #0a0a10;
  --steel: #14151d;
  --line:  #23242f;
  --bone:  #eceef5;
  --ash:   #7b7e94;
  --left:  #ff2e5b;
  --right: #2f7dff;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--void);
  color: var(--bone);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
}

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }

/* ── boot shim ─────────────────────────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 32px;
  overflow-y: auto;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(47,125,255,.12), transparent 55%),
    radial-gradient(120% 90% at 90% 100%, rgba(255,46,91,.12), transparent 55%),
    var(--void);
  transition: opacity .4s ease;
}

.boot[hidden] { display: none; }
.boot.is-leaving { opacity: 0; pointer-events: none; }

.boot-inner { width: min(560px, 100%); }

.boot-eyebrow {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
}

.boot-mark {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(46px, 11vw, 82px);
  line-height: .88;
  letter-spacing: -.045em;
}

.boot-mark span {
  color: transparent;
  -webkit-text-stroke: 2px var(--right);
}

.boot-copy {
  margin: 0 0 32px;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: #b9bccd;
}

.boot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 22px;
}

.boot-status {
  min-height: 20px;
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ash);
}
.boot-status.is-error { color: var(--left); }
.boot-status.is-good  { color: #3ddc97; }

.boot-notes {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.boot-notes summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  list-style: none;
}
.boot-notes summary::-webkit-details-marker { display: none; }
.boot-notes summary::before { content: '+ '; color: var(--right); }
.boot-notes[open] summary::before { content: '− '; }

.boot-notes ul {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.75;
  color: #9ea1b5;
}
.boot-notes code { font-family: var(--mono); font-size: 12px; color: var(--right); }

/* ── buttons ───────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--steel);
  color: var(--bone);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}

.btn:hover:not(:disabled) { border-color: #34364a; transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--right); outline-offset: 3px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--right); border-color: var(--right); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #4289ff; border-color: #4289ff; }

/* ── toast ─────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(560px, calc(100% - 40px));
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #14151d;
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
}
.toast[hidden] { display: none; }
.toast.is-error { border-color: rgba(255,46,91,.5); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}