:root {
  color-scheme: dark;
  --cyan: #78eaff;
  --amber: #ff8b21;
  --panel: rgba(2, 9, 13, .88);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #02070b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#game-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 44%, rgba(20, 75, 91, .2), transparent 52%), #02070b;
}

#unity-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #02070b;
  outline: none;
}

#loading-screen,
#fatal-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #dffaff;
  background: linear-gradient(rgba(4, 18, 24, .95), rgba(1, 6, 9, .99)), repeating-linear-gradient(90deg, transparent 0 79px, rgba(116, 234, 255, .06) 80px), #02070b;
  transition: opacity .5s ease, visibility .5s ease;
}

#loading-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px);
}

#loading-screen.is-complete { opacity: 0; visibility: hidden; }
#loading-screen[hidden], #fatal-screen[hidden] { display: none; }

.loading-brand { text-align: center; letter-spacing: .16em; }
.loading-kicker { color: #6b9eaa; font-size: clamp(.6rem, 1vw, .76rem); font-weight: 700; }
.loading-brand h1 { margin: .65rem 0 0; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: .9; letter-spacing: .04em; }
.loading-brand p { margin: .6rem 0 2.5rem; color: var(--amber); font-size: clamp(.75rem, 1.4vw, 1.05rem); font-weight: 800; }

.loading-track {
  width: min(420px, 70vw);
  height: 3px;
  overflow: hidden;
  background: rgba(121, 234, 255, .12);
  box-shadow: 0 0 24px rgba(76, 219, 255, .12);
}

.loading-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #0ba9c9, #a0f4ff);
  box-shadow: 0 0 16px #59e7ff;
  transition: width .15s linear;
}

#loading-status { margin-top: 1rem; color: #749ba4; font: 700 .62rem/1 monospace; letter-spacing: .14em; }
#loading-profile { margin-top: .55rem; color: #416873; font: 600 .54rem/1 monospace; letter-spacing: .1em; }

.exit-control,
.fullscreen-control {
  position: fixed;
  z-index: 10;
  top: max(10px, env(safe-area-inset-top));
  display: grid;
  place-items: center;
  height: 34px;
  border: 1px solid rgba(120,234,255,.18);
  color: rgba(209,247,255,.64);
  background: rgba(2,10,14,.62);
  backdrop-filter: blur(12px);
  text-decoration: none;
  font: 700 .66rem/1 system-ui, sans-serif;
  letter-spacing: .08em;
  opacity: .25;
  transition: opacity .2s, border-color .2s, color .2s;
}

.exit-control { left: max(10px, env(safe-area-inset-left)); grid-auto-flow: column; gap: .45rem; padding: 0 .7rem; }
.fullscreen-control { right: max(10px, env(safe-area-inset-right)); width: 38px; padding: 0; cursor: pointer; }
.exit-control:hover, .fullscreen-control:hover { opacity: 1; color: var(--cyan); border-color: rgba(120,234,255,.56); }

#fatal-screen { gap: 1rem; padding: 2rem; text-align: center; }
#fatal-screen strong { color: #ff725e; letter-spacing: .12em; }
#fatal-screen p { max-width: 40rem; color: #a9c1c7; }
#fatal-screen button { padding: .7rem 1.4rem; border: 1px solid #ff725e; color: white; background: #61160d; cursor: pointer; }

@media (max-width: 720px) {
  .exit-control span { display: none; }
  .exit-control { width: 38px; padding: 0; }
}