/* =============================================================================
   Starfield Atlas — page chrome
   The game itself lives inside the canvas; this styles only what surrounds it:
   the loading plate, the VR entry button, the desktop key hints, the goodbye.
   Palette matches js/ui.js so the 2D page and the 3D panels feel like one thing.
   ============================================================================= */

:root {
  --ink:        #05070f;
  --panel:      rgba(14, 20, 40, 0.82);
  --edge:       rgba(120, 190, 220, 0.28);
  --accent:     #5ad2e6;
  --accent-dim: rgba(90, 210, 230, 0.55);
  --amber:      #f0b858;
  --text:       #dbe7f2;
  --dim:        #7f93ab;
  --font:       'Exo 2', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#view {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* --------------------------------------------------------------- plates -- */
/* The notched corner is the signature shape of this project — it repeats on
   every panel inside the 3D scene, so the page wears it too.                  */

.plate {
  position: relative;
  padding: 44px 56px 40px;
  background: var(--panel);
  border: 1px solid var(--edge);
  clip-path: polygon(
    18px 0, 100% 0, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 0 100%, 0 18px
  );
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  text-align: center;
  max-width: 90vw;
}

.plate h1 {
  margin: 0;
  font-size: clamp(26px, 5.2vw, 44px);
  font-weight: 200;
  letter-spacing: 0.30em;
  text-indent: 0.30em;      /* balances the trailing letter-space */
  color: #eaf4fa;
}

.plate .tag {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--accent-dim);
}

#boot-status {
  margin: 26px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ------------------------------------------------------------- loading --- */

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 42%, #101a33 0%, #070a16 55%, #04050c 100%);
  z-index: 30;
  transition: opacity 0.7s ease;
}

/* A slow sweep, like a planisphere turning. Nothing hurried. */
.mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 26px;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  position: relative;
  animation: sweep 14s linear infinite;
}
.mark::before,
.mark::after {
  content: '';
  position: absolute;
  background: var(--accent-dim);
}
.mark::before { left: 50%; top: 6px; bottom: 6px; width: 1px; transform: translateX(-50%); }
.mark::after  { top: 50%; left: 6px; right: 6px; height: 1px; transform: translateY(-50%); }

@keyframes sweep { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mark { animation: none; }
}

/* --------------------------------------------------------- desktop chrome */

#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* the sky must stay draggable underneath */
  z-index: 20;
}

#xr-button {
  pointer-events: auto;
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 13px 26px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  background: rgba(12, 20, 38, 0.72);
  border: 1px solid var(--edge);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
#xr-button:hover:not(.disabled) {
  color: #eafaff;
  border-color: var(--accent);
  background: rgba(24, 44, 74, 0.85);
}
#xr-button.disabled {
  color: var(--dim);
  border-color: rgba(120, 150, 180, 0.18);
  cursor: default;
  /* Genuinely inert, so a greyed-out button never silently swallows a press. */
  pointer-events: none;
}

/* Why VR could not start. Empty, and invisible, unless there is bad news. */
#xr-status {
  pointer-events: none;
  position: absolute;
  top: 122px;
  right: 22px;
  max-width: min(420px, 70vw);
  text-align: right;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--amber);
}

#hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(150, 178, 200, 0.62);
}
#hint b {
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.10em;
}

/* --------------------------------------------------------------- goodbye - */

#farewell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #0d1630 0%, #05070f 70%);
  z-index: 40;
}
#farewell button {
  margin-top: 30px;
  padding: 12px 28px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--edge);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
}
#farewell button:hover { color: #eafaff; border-color: var(--accent); }

/* ----------------------------------------------------------------- utils - */

.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* On a headset the browser draws its own chrome; hide ours once immersed. */
@media (display-mode: fullscreen) {
  #hint { display: none; }
}

/* So you can tell at a glance whether the browser is showing you a cached
   copy of an older upload. */
#build-stamp {
  pointer-events: none;
  position: absolute;
  top: 74px;
  right: 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--amber);
  opacity: 0.9;
}

/* Build number on the loading plate too, where it cannot be missed. */
.plate .build {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--amber);
}

/* Plain facts about WebXR on this device, always on screen while out of VR. */
#xr-diag {
  pointer-events: none;
  position: absolute;
  top: 96px;
  right: 22px;
  max-width: min(460px, 78vw);
  text-align: right;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(150, 178, 200, 0.75);
}