@font-face {
  font-family: "ScienceGothic Regular";
  src: url("../assets/fonts/ScienceGothic-Regular.ttf") format("truetype");
  font-display: block;
}

html, body {
  margin: 0; padding: 0; background: #000;
  font-family: "ScienceGothic Regular", "Bank Gothic", sans-serif;
  color: #fff;
}

.main {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  background-color: #CCCCCC;
  color: #000000;
  width: 840px;
  margin: 0 auto;
  border: 1px solid #000000;
  padding: 1px;
}
.title {
  background-color: #000000;
  padding: 10px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
}
.title img { max-width: 100%; height: auto; }
.content {
  padding: 8px;
  background-color: #F0F0FF;
  color: #000000;
}
.content a { color: #0066FF; text-decoration: none; }
.content a:hover { color: #00CC99; text-decoration: underline; }
.content h2 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #999;
  padding-bottom: 4px;
  margin-top: 24px;
}
.content h3 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 6px;
}
.helpTable {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 1px;
}
.helpTable td { padding: 4px; vertical-align: top; }
.helpTable td.icon { width: 100px; text-align: center; }
.flash {
  background-color: #020202;
  padding: 10px;
  border: 1px solid #000000;
  margin: 10px auto;
  width: 800px;
  box-sizing: content-box;
}
#stage {
  position: relative;
  width: 800px;
  height: 575px;
  overflow: hidden;
  margin: 0 auto;
}
#stage canvas {
  position: absolute;
  left: 0; top: 0;
}
/* Background and particle layers are bitmap-style — pixelated upscale
   keeps starfield/sprites crisp. The fade canvas (smoke trails) uses
   browser default smoothing to match Flash's bilinear bitmap scaling,
   which softens the dotted trails into the look in MissileDefense.png.
   The UI canvas (with text) deliberately uses smooth scaling because
   its backing is sized to display pixels. */
#bg, #entity { image-rendering: pixelated; }
#fade { /* viewport overlay area only */
  left: 0; top: 0;
  width: 550px; height: 600px;
}

#startOverlay {
  position: absolute;
  left: 0; top: 0;
  width: 800px; height: 575px;
  transform-origin: top left;
  transform: scale(var(--ui-scale, 1));
  background: url("../assets/img/ui/title_space.png") center top no-repeat;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 140px;
  box-sizing: border-box;
  z-index: 10;
  font-family: "ScienceGothic Regular", sans-serif;
  color: #9CCCFF;
}
#startOverlay h1 {
  font-size: 56px;
  margin: 0 0 12px;
  letter-spacing: 4px;
  color: #FFFFFF;
  text-shadow: 0 0 18px #4488FF;
}
#startTitle {
  display: block;
  width: 75%;
  max-width: 620px;
  height: auto;
  margin: 0 0 40px;
  image-rendering: auto;
}
#startOverlay p {
  font-size: 16px;
  color: #FFFFFF;
  margin: 0 0 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#startButtons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
#startButtons button {
  background: #333344;
  border: 1px solid #626787;
  color: #FFFFFF;
  font: 14px "ScienceGothic Regular", sans-serif;
  width: 180px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#startButtons button.apocalypse {
  background: #222233;
}
#startButtons button:hover {
  border-color: #9CCCFF;
  color: #9CCCFF;
}
#startOverlay #startDescription {
  width: 600px;
  min-height: 60px;
  margin: 140px 0 0;
  text-align: center;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.4;
  text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 6px #000;
}
#startCredits {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: #DDE;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 2px #000;
}
#startOverlay.hidden { display: none; }