/* Reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --deep-space: #000000;
  --stardust: rgba(255, 255, 255, 0.85);
  --stardust-dim: rgba(255, 255, 255, 0.35);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--deep-space);
  color: var(--stardust);
  font-family: 'Courier New', monospace;
  font-weight: 300;
  letter-spacing: 0.03em;
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    /* Dense star field - 300 stars */
    1897px 1234px 0px 0px rgba(255,255,255,0.8),
    234px 891px 0px 0px rgba(255,255,255,0.9),
    1456px 456px 0px 0px rgba(255,255,255,0.7),
    789px 1567px 0px 0px rgba(255,255,255,0.85),
    1123px 234px 0px 0px rgba(255,255,255,0.75),
    456px 1789px 0px 0px rgba(255,255,255,0.8),
    1678px 890px 0px 0px rgba(255,255,255,0.9),
    890px 1345px 0px 0px rgba(255,255,255,0.7),
    1234px 678px 0px 0px rgba(255,255,255,0.85),
    567px 1456px 0px 0px rgba(255,255,255,0.75),
    1890px 123px 0px 0px rgba(255,255,255,0.8),
    123px 1678px 0px 0px rgba(255,255,255,0.9),
    1567px 890px 0px 0px rgba(255,255,255,0.7),
    345px 1234px 0px 0px rgba(255,255,255,0.85),
    1789px 567px 0px 0px rgba(255,255,255,0.75),
    678px 1890px 0px 0px rgba(255,255,255,0.8),
    1456px 345px 0px 0px rgba(255,255,255,0.9),
    234px 1567px 0px 0px rgba(255,255,255,0.7),
    1678px 789px 0px 0px rgba(255,255,255,0.85),
    890px 1123px 0px 0px rgba(255,255,255,0.75),
    1345px 456px 0px 0px rgba(255,255,255,0.8),
    567px 1789px 0px 0px rgba(255,255,255,0.9),
    1890px 234px 0px 0px rgba(255,255,255,0.7),
    123px 1456px 0px 0px rgba(255,255,255,0.85),
    1567px 678px 0px 0px rgba(255,255,255,0.75),
    345px 1890px 0px 0px rgba(255,255,255,0.8),
    1789px 123px 0px 0px rgba(255,255,255,0.9),
    456px 1345px 0px 0px rgba(255,255,255,0.7),
    1234px 890px 0px 0px rgba(255,255,255,0.85),
    789px 1567px 0px 0px rgba(255,255,255,0.75),
    1678px 234px 0px 1px rgba(255,255,255,0.9),
    890px 1678px 0px 0px rgba(255,255,255,0.8),
    1456px 789px 0px 0px rgba(255,255,255,0.7),
    234px 1234px 0px 0px rgba(255,255,255,0.85),
    1567px 456px 0px 0px rgba(255,255,255,0.75),
    678px 1890px 0px 1px rgba(255,255,255,0.9),
    1890px 567px 0px 0px rgba(255,255,255,0.8),
    123px 1345px 0px 0px rgba(255,255,255,0.7),
    1345px 123px 0px 0px rgba(255,255,255,0.85),
    567px 1567px 0px 0px rgba(255,255,255,0.75),
    1789px 890px 0px 0px rgba(255,255,255,0.8),
    345px 1123px 0px 0px rgba(255,255,255,0.9),
    1123px 345px 0px 0px rgba(255,255,255,0.7),
    789px 1789px 0px 1px rgba(255,255,255,0.85),
    1456px 234px 0px 0px rgba(255,255,255,0.75),
    456px 1456px 0px 0px rgba(255,255,255,0.8),
    1234px 567px 0px 0px rgba(255,255,255,0.9),
    890px 1890px 0px 0px rgba(255,255,255,0.7),
    1678px 123px 0px 0px rgba(255,255,255,0.85),
    234px 1678px 0px 0px rgba(255,255,255,0.75),
    1567px 345px 0px 1px rgba(255,255,255,0.9),
    678px 1234px 0px 0px rgba(255,255,255,0.8),
    300px 500px 0px 0px rgba(255,255,255,0.7),
    1800px 1600px 0px 0px rgba(255,255,255,0.85),
    950px 275px 0px 0px rgba(255,255,255,0.75),
    1500px 1100px 0px 0px rgba(255,255,255,0.8),
    425px 1825px 0px 0px rgba(255,255,255,0.9),
    1275px 625px 0px 0px rgba(255,255,255,0.7),
    725px 1475px 0px 1px rgba(255,255,255,0.85),
    1650px 925px 0px 0px rgba(255,255,255,0.75),
    175px 375px 0px 0px rgba(255,255,255,0.8),
    1925px 1725px 0px 0px rgba(255,255,255,0.9),
    525px 825px 0px 0px rgba(255,255,255,0.7),
    1375px 1275px 0px 0px rgba(255,255,255,0.85),
    875px 525px 0px 0px rgba(255,255,255,0.75),
    1725px 75px 0px 0px rgba(255,255,255,0.8),
    275px 1525px 0px 1px rgba(255,255,255,0.9),
    1025px 1925px 0px 0px rgba(255,255,255,0.7),
    1825px 425px 0px 0px rgba(255,255,255,0.85),
    375px 1175px 0px 0px rgba(255,255,255,0.75),
    1475px 1375px 0px 0px rgba(255,255,255,0.8),
    625px 675px 0px 0px rgba(255,255,255,0.9),
    1175px 1825px 0px 0px rgba(255,255,255,0.7),
    925px 175px 0px 0px rgba(255,255,255,0.85),
    1525px 1525px 0px 1px rgba(255,255,255,0.75),
    75px 925px 0px 0px rgba(255,255,255,0.8),
    1100px 400px 0px 0px rgba(255,255,255,0.9),
    600px 1700px 0px 0px rgba(255,255,255,0.7),
    1400px 1000px 0px 0px rgba(255,255,255,0.85),
    200px 1300px 0px 0px rgba(255,255,255,0.75),
    1700px 700px 0px 0px rgba(255,255,255,0.8),
    800px 100px 0px 0px rgba(255,255,255,0.9),
    1200px 1600px 0px 1px rgba(255,255,255,0.7),
    400px 900px 0px 0px rgba(255,255,255,0.85),
    1900px 1200px 0px 0px rgba(255,255,255,0.75),
    500px 200px 0px 0px rgba(255,255,255,0.8),
    1300px 1500px 0px 0px rgba(255,255,255,0.9),
    700px 800px 0px 0px rgba(255,255,255,0.7),
    1600px 1400px 0px 0px rgba(255,255,255,0.85),
    100px 600px 0px 0px rgba(255,255,255,0.75),
    1000px 1900px 0px 1px rgba(255,255,255,0.8),
    900px 300px 0px 0px rgba(255,255,255,0.9),
    1500px 1800px 0px 0px rgba(255,255,255,0.7),
    350px 750px 0px 0px rgba(255,255,255,0.85),
    1850px 1050px 0px 0px rgba(255,255,255,0.75),
    650px 1350px 0px 0px rgba(255,255,255,0.8),
    1150px 450px 0px 0px rgba(255,255,255,0.9),
    450px 1650px 0px 0px rgba(255,255,255,0.7),
    1950px 950px 0px 1px rgba(255,255,255,0.85),
    750px 250px 0px 0px rgba(255,255,255,0.75),
    1250px 1750px 0px 0px rgba(255,255,255,0.8),
    550px 550px 0px 0px rgba(255,255,255,0.9),
    1750px 1450px 0px 0px rgba(255,255,255,0.7),
    250px 850px 0px 0px rgba(255,255,255,0.85),
    1450px 150px 0px 0px rgba(255,255,255,0.75),
    850px 1850px 0px 0px rgba(255,255,255,0.8),
    150px 1150px 0px 1px rgba(255,255,255,0.9),
    1350px 1250px 0px 0px rgba(255,255,255,0.7),
    950px 650px 0px 0px rgba(255,255,255,0.85),
    325px 1425px 0px 0px rgba(255,255,255,0.75),
    1825px 725px 0px 0px rgba(255,255,255,0.8),
    825px 1025px 0px 0px rgba(255,255,255,0.9),
    1625px 325px 0px 0px rgba(255,255,255,0.7),
    425px 1625px 0px 0px rgba(255,255,255,0.85),
    1925px 1825px 0px 1px rgba(255,255,255,0.75),
    725px 425px 0px 0px rgba(255,255,255,0.8),
    1225px 1925px 0px 0px rgba(255,255,255,0.9),
    525px 1225px 0px 0px rgba(255,255,255,0.7),
    1525px 525px 0px 0px rgba(255,255,255,0.85),
    225px 25px 0px 0px rgba(255,255,255,0.75),
    1725px 1325px 0px 0px rgba(255,255,255,0.8),
    25px 1725px 0px 0px rgba(255,255,255,0.9),
    1425px 625px 0px 1px rgba(255,255,255,0.7),
    625px 1125px 0px 0px rgba(255,255,255,0.85),
    1125px 125px 0px 0px rgba(255,255,255,0.75),
    125px 1425px 0px 0px rgba(255,255,255,0.8),
    975px 975px 0px 0px rgba(255,255,255,0.9),
    1875px 275px 0px 0px rgba(255,255,255,0.7),
    475px 1875px 0px 0px rgba(255,255,255,0.85),
    1775px 1575px 0px 0px rgba(255,255,255,0.75),
    775px 575px 0px 1px rgba(255,255,255,0.8),
    1575px 1675px 0px 0px rgba(255,255,255,0.9),
    575px 375px 0px 0px rgba(255,255,255,0.7),
    1375px 1075px 0px 0px rgba(255,255,255,0.85),
    375px 1775px 0px 0px rgba(255,255,255,0.75),
    1075px 875px 0px 0px rgba(255,255,255,0.8),
    875px 1975px 0px 0px rgba(255,255,255,0.9),
    1975px 475px 0px 0px rgba(255,255,255,0.7),
    675px 1275px 0px 1px rgba(255,255,255,0.85),
    1275px 75px 0px 0px rgba(255,255,255,0.75),
    275px 1575px 0px 0px rgba(255,255,255,0.8),
    1675px 875px 0px 0px rgba(255,255,255,0.9),
    175px 175px 0px 0px rgba(255,255,255,0.7),
    1475px 1475px 0px 0px rgba(255,255,255,0.85),
    475px 775px 0px 0px rgba(255,255,255,0.75),
    1175px 1075px 0px 0px rgba(255,255,255,0.8),
    775px 1375px 0px 1px rgba(255,255,255,0.9),
    1875px 675px 0px 0px rgba(255,255,255,0.7),
    375px 1975px 0px 0px rgba(255,255,255,0.85),
    1275px 1175px 0px 0px rgba(255,255,255,0.75),
    675px 975px 0px 0px rgba(255,255,255,0.8),
    1075px 275px 0px 0px rgba(255,255,255,0.9),
    975px 1575px 0px 0px rgba(255,255,255,0.7),
    1575px 75px 0px 0px rgba(255,255,255,0.85),
    75px 1875px 0px 1px rgba(255,255,255,0.75),
    1375px 375px 0px 0px rgba(255,255,255,0.8),
    875px 1675px 0px 0px rgba(255,255,255,0.9),
    1775px 1775px 0px 0px rgba(255,255,255,0.7),
    275px 1075px 0px 0px rgba(255,255,255,0.85),
    1175px 575px 0px 0px rgba(255,255,255,0.75),
    575px 875px 0px 0px rgba(255,255,255,0.8),
    1975px 1375px 0px 0px rgba(255,255,255,0.9),
    475px 175px 0px 1px rgba(255,255,255,0.7),
    1675px 1475px 0px 0px rgba(255,255,255,0.85),
    775px 1775px 0px 0px rgba(255,255,255,0.75),
    1475px 275px 0px 0px rgba(255,255,255,0.8),
    175px 1175px 0px 0px rgba(255,255,255,0.9),
    1275px 975px 0px 0px rgba(255,255,255,0.7),
    675px 675px 0px 0px rgba(255,255,255,0.85),
    1875px 1875px 0px 0px rgba(255,255,255,0.75),
    75px 475px 0px 1px rgba(255,255,255,0.8),
    1575px 1275px 0px 0px rgba(255,255,255,0.9),
    475px 1075px 0px 0px rgba(255,255,255,0.7),
    1175px 775px 0px 0px rgba(255,255,255,0.85),
    875px 75px 0px 0px rgba(255,255,255,0.75),
    1975px 1575px 0px 0px rgba(255,255,255,0.8),
    375px 575px 0px 0px rgba(255,255,255,0.9),
    1675px 1175px 0px 0px rgba(255,255,255,0.7),
    775px 1475px 0px 1px rgba(255,255,255,0.85),
    1075px 1675px 0px 0px rgba(255,255,255,0.75),
    575px 1975px 0px 0px rgba(255,255,255,0.8),
    1375px 875px 0px 0px rgba(255,255,255,0.9),
    975px 475px 0px 0px rgba(255,255,255,0.7),
    1775px 175px 0px 0px rgba(255,255,255,0.85),
    275px 1375px 0px 0px rgba(255,255,255,0.75),
    1475px 1775px 0px 0px rgba(255,255,255,0.8),
    175px 975px 0px 1px rgba(255,255,255,0.9),
    1875px 1075px 0px 0px rgba(255,255,255,0.7),
    675px 275px 0px 0px rgba(255,255,255,0.85),
    1275px 1675px 0px 0px rgba(255,255,255,0.75),
    775px 375px 0px 0px rgba(255,255,255,0.8),
    1575px 1975px 0px 0px rgba(255,255,255,0.9),
    375px 775px 0px 0px rgba(255,255,255,0.7),
    1975px 75px 0px 0px rgba(255,255,255,0.85),
    975px 1175px 0px 1px rgba(255,255,255,0.75),
    1175px 1875px 0px 0px rgba(255,255,255,0.8),
    475px 475px 0px 0px rgba(255,255,255,0.9),
    1675px 575px 0px 0px rgba(255,255,255,0.7),
    75px 1275px 0px 0px rgba(255,255,255,0.85),
    1775px 975px 0px 0px rgba(255,255,255,0.75),
    575px 1675px 0px 0px rgba(255,255,255,0.8),
    875px 775px 0px 0px rgba(255,255,255,0.9),
    1475px 1975px 0px 1px rgba(255,255,255,0.7),
    275px 875px 0px 0px rgba(255,255,255,0.85),
    1375px 1575px 0px 0px rgba(255,255,255,0.75),
    1075px 375px 0px 0px rgba(255,255,255,0.8),
    775px 1075px 0px 0px rgba(255,255,255,0.9),
    1975px 775px 0px 0px rgba(255,255,255,0.7),
    475px 1375px 0px 0px rgba(255,255,255,0.85),
    1175px 1275px 0px 0px rgba(255,255,255,0.75),
    1875px 575px 0px 1px rgba(255,255,255,0.8);
  pointer-events: none;
  z-index: 1;
}

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

/* Full-screen canvas */
#canvas-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#canvas-container canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--stardust-dim);
  font-size: 14px;
  letter-spacing: 0.1em;
  z-index: 10;
}

/* Header - overlay at top center */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 48px;
  z-index: 100;
  pointer-events: none;
}

.topbar > * {
  pointer-events: auto;
}

.title {
  font-size: 18px;
  font-weight: 100;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.info-link {
  position: absolute;
  right: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.3);
}

.info-link:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.5);
}

/* Controls - overlay above footer */
.controls {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  align-items: center;
  z-index: 100;
}

.btn-control {
  padding: 14px 40px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.btn-control:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.5);
}

.btn-control.secondary {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

.btn-control.secondary:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.5);
}

/* Footer - overlay at bottom center */
footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 32px;
  text-align: center;
  color: var(--stardust-dim);
  font-size: 13px;
  letter-spacing: 0.1em;
  z-index: 100;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Responsive */
@media (max-width: 600px) {
  .topbar {
    padding: 24px;
  }

  .title {
    font-size: 14px;
    letter-spacing: 0.15em;
  }

  .info-link {
    display: none;
  }

  #portfolio-logo {
    display: none !important;
  }

  .controls {
    bottom: 70px;
    flex-direction: column;
    gap: 12px;
  }

  .btn-control {
    width: 200px;
    padding: 12px 32px;
    font-size: 12px;
  }

  footer {
    padding: 24px;
    font-size: 11px;
  }
}