* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020610;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #eaf6ff;
}

body {
  background:
    radial-gradient(circle at 50% 50%, rgba(24, 70, 150, 0.10) 0%, rgba(11, 34, 76, 0.05) 24%, transparent 42%),
    linear-gradient(180deg, rgb(5, 12, 28), rgb(2, 6, 16));
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#bg,
#fx {
  z-index: 1;
}

#coreTrigger {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(28vw, 260px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

#coreOverlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 280ms ease;
}

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

#coreOverlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(16, 38, 86, 0.30), rgba(4, 10, 22, 0.10) 34%, rgba(4, 10, 22, 0.44) 100%);
  z-index: 0;
}

.reactor-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(68vw, 920px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.reactor-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(72, 156, 255, 0.10));
}

.ring,
.tick-ring,
.crosshair,
.side-emitter,
.side-bracket,
.axis-dot {
  position: absolute;
  border-radius: 50%;
}

.ring,
.tick-ring,
.crosshair {
  inset: 0;
}

.ring-outer {
  border: 2px solid rgba(210, 240, 255, 0.62);
  box-shadow:
    0 0 22px rgba(120, 194, 255, 0.16),
    0 0 44px rgba(72, 156, 255, 0.10);
}

.ring-outer-2 {
  inset: 4.5%;
  border: 2px solid rgba(140, 210, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 20px rgba(72, 156, 255, 0.06);
}

.ring-mid {
  inset: 14%;
  border: 1px solid rgba(120, 194, 255, 0.10);
}

.ring-inner {
  inset: 27%;
  border: 1px solid rgba(120, 194, 255, 0.08);
}

.ring-core {
  inset: 38%;
  border: 1px solid rgba(120, 194, 255, 0.06);
}

.tick-ring-a {
  inset: 1.5%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 6deg,
      rgba(170, 225, 255, 0.22) 6deg 9deg,
      transparent 9deg 16deg,
      rgba(170, 225, 255, 0.22) 16deg 19deg,
      transparent 19deg 28deg,
      rgba(170, 225, 255, 0.22) 28deg 31deg,
      transparent 31deg 40deg,
      rgba(170, 225, 255, 0.22) 40deg 43deg,
      transparent 43deg 52deg,
      rgba(170, 225, 255, 0.22) 52deg 55deg,
      transparent 55deg 360deg
    );
  mask: radial-gradient(circle, transparent 0 84%, black 84% 88%, transparent 88% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 84%, black 84% 88%, transparent 88% 100%);
  opacity: 1;
}

.tick-ring-b {
  inset: 6.5%;
  background:
    conic-gradient(
      from 5deg,
      transparent 0deg 10deg,
      rgba(120, 194, 255, 0.16) 10deg 12deg,
      transparent 12deg 22deg,
      rgba(120, 194, 255, 0.16) 22deg 24deg,
      transparent 24deg 34deg,
      rgba(120, 194, 255, 0.16) 34deg 36deg,
      transparent 36deg 46deg,
      rgba(120, 194, 255, 0.16) 46deg 48deg,
      transparent 48deg 360deg
    );
  mask: radial-gradient(circle, transparent 0 87%, black 87% 90%, transparent 90% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 87%, black 87% 90%, transparent 90% 100%);
  opacity: 0.95;
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.crosshair::before {
  width: 54%;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 194, 255, 0), rgba(120, 194, 255, 0.42), rgba(120, 194, 255, 0));
}

.crosshair::after {
  width: 1px;
  height: 54%;
  background: linear-gradient(180deg, rgba(120, 194, 255, 0), rgba(120, 194, 255, 0.42), rgba(120, 194, 255, 0));
}

.axis-dot {
  width: 10px;
  height: 10px;
  background: rgba(198, 238, 255, 0.95);
  box-shadow: 0 0 12px rgba(91, 175, 255, 0.55);
}

.axis-top {
  left: 50%;
  top: 6.5%;
  transform: translateX(-50%);
}

.axis-right {
  right: 6.5%;
  top: 50%;
  transform: translateY(-50%);
}

.axis-bottom {
  left: 50%;
  bottom: 6.5%;
  transform: translateX(-50%);
}

.axis-left {
  left: 6.5%;
  top: 50%;
  transform: translateY(-50%);
}

.side-emitter {
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    rgba(230, 245, 255, 0.98) 0%,
    rgba(120, 205, 255, 0.88) 28%,
    rgba(44, 122, 255, 0.32) 60%,
    rgba(44, 122, 255, 0) 100%
  );
  filter: blur(1px);
  box-shadow:
    0 0 18px rgba(120, 205, 255, 0.38),
    0 0 34px rgba(72, 156, 255, 0.24);
}

.emitter-left {
  left: 13.5%;
}

.emitter-right {
  right: 13.5%;
}

.side-bracket {
  top: 50%;
  width: 78px;
  height: 28px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(132, 205, 255, 0.30);
  border-bottom: 1px solid rgba(132, 205, 255, 0.30);
  background: linear-gradient(90deg, rgba(91, 170, 255, 0.12), rgba(255, 255, 255, 0.02), rgba(91, 170, 255, 0.12));
  box-shadow: 0 0 18px rgba(50, 124, 255, 0.10);
}

.bracket-left {
  left: 4.5%;
}

.bracket-right {
  right: 4.5%;
}

.telemetry-label {
  position: absolute;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(189, 231, 255, 0.78);
  text-shadow: 0 0 12px rgba(67, 143, 255, 0.20);
  padding: 0 10px;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}

.telemetry-label::before,
.telemetry-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(118, 194, 255, 0), rgba(118, 194, 255, 0.40), rgba(118, 194, 255, 0));
  transform: translateY(-50%);
}

.telemetry-label::before {
  right: 100%;
  margin-right: 8px;
}

.telemetry-label::after {
  left: 100%;
  margin-left: 8px;
}

.tl-1 {
  left: 8%;
  top: 24%;
}

.tl-2 {
  right: 8%;
  top: 24%;
}

.tl-3 {
  left: 8%;
  bottom: 25%;
}

.tl-4 {
  right: 8%;
  bottom: 25%;
}

.reactor-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(38vw, 470px);
  display: grid;
  gap: 10px;
  text-align: center;
  z-index: 4;
  pointer-events: auto;
}

.reactor-panel h1 {
  margin: 0;
  font-size: clamp(40px, 4.2vw, 58px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 18px rgba(74, 166, 255, 0.18);
}

.subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(229, 241, 255, 0.82);
  position: relative;
  display: inline-block;
}

.subtitle::before,
.subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 112px;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 194, 255, 0), rgba(120, 194, 255, 0.34), rgba(120, 194, 255, 0));
}

.subtitle::before {
  right: 100%;
  margin-right: 12px;
}

.subtitle::after {
  left: 100%;
  margin-left: 12px;
}

.reactor-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 0 22px;
  justify-items: center;
}

.reactor-input {
  width: 100%;
  max-width: 360px;
  border-radius: 0;
  border: 1px solid rgba(141, 210, 255, 0.24);
  background: linear-gradient(180deg, rgba(10, 25, 52, 0.86), rgba(7, 16, 34, 0.62));
  color: #eff8ff;
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 16px rgba(40, 112, 214, 0.08);
}

.reactor-input::placeholder {
  color: rgba(213, 233, 255, 0.46);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

.reactor-submit {
  appearance: none;
  border: 1px solid rgba(141, 210, 255, 0.26);
  border-radius: 0;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(29, 65, 120, 0.74), rgba(12, 28, 56, 0.72));
  color: #eff8ff;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  min-width: 170px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 16px rgba(72, 156, 255, 0.12);
}

.reactor-submit:hover {
  transform: translateY(-1px);
  background: rgba(20, 48, 96, 0.84);
  border-color: rgba(140, 214, 255, 0.34);
}

.login-message {
  min-height: 1.4em;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(177, 228, 255, 0.72);
}

@media (max-width: 900px) {
  #coreTrigger {
    width: min(42vw, 220px);
  }

  .reactor-shell {
    width: min(90vw, 720px);
  }

  .reactor-panel {
    width: min(88vw, 440px);
  }

  .telemetry-label {
    display: none;
  }

  .subtitle::before,
  .subtitle::after {
    width: 64px;
  }
}