/* 'Press Start 2P' is a free, genuinely retro pixel font from Google Fonts -
   no licensing to sort out, and it loads straight from the CDN below.
   Falls back to a plain monospace stack if the import ever fails to load. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --si-bg: #121547;       /* site navy background */
  --si-panel: #1a1f5c;    /* slightly lighter navy for the play-field */
  --si-gold: #f9ec3a;     /* primary accent - matches the site's "PLAY" yellow */
  --si-gold-bright: #fff37a;
  --si-cream: #eef1ff;    /* body text - pale, cool white to suit the navy */
  --si-muted: #7b83b8;
  --si-cyan: #5ec8ff;     /* secondary accent, from the site's neon shapes */
  --si-pink: #ff5ec4;     /* secondary accent, from the site's neon shapes */
}

#si-overlay {
  font-family: 'Press Start 2P', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--si-bg);
}

#si-overlay {
  display: flex;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--si-cream);
}

#si-card {
  width: 100%;
  max-width: 700px;
  background: var(--si-bg);
  border: 3px solid var(--si-gold);
  border-radius: 16px;
  padding: 16px 20px 14px;
  box-sizing: border-box;
  box-shadow: 0 0 30px rgba(0,0,0,0.4), 0 0 22px rgba(249,236,58,0.15);
  text-align: center;
}

#si-title-row {
  text-align: center;
  font-size: 18px;
  color: var(--si-gold);
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(249,236,58,0.4);
}

#si-topbar {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(249,236,58,0.35);
  border-radius: 8px;
}
#si-hud { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; }
.si-hud-item label { color: var(--si-gold); font-size: 9px; letter-spacing: 1px; margin-right: 4px; }
#si-hud b { color: var(--si-cream); }
.si-hud-cyan label { color: var(--si-cyan); }
.si-hud-pink label { color: var(--si-pink); }

#si-game-area {
  position: relative;
  display: block;
  width: 100%;
}

#si-canvas {
  background: var(--si-panel);
  border: 2px solid rgba(249,236,58,0.6);
  border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  display: block;
}

#si-message {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  min-height: 26px;
  letter-spacing: 2px;
  color: var(--si-gold-bright);
  text-shadow: 0 0 6px #000, 0 0 6px #000;
}

#si-powerup-status {
  margin-top: 4px;
  font-size: 9px;
  color: var(--si-gold);
  letter-spacing: 1px;
  min-height: 12px;
  text-align: center;
  text-shadow: 0 0 4px #000;
}

#si-startscreen {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  background: rgba(18, 21, 71, 0.35);
  overflow-y: auto;
  box-sizing: border-box;
}
#si-startscreen.active { display: flex; }

#si-start-title {
  font-size: 17px;
  color: var(--si-gold);
  letter-spacing: 2px;
  margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(249,236,58,0.5), 0 0 6px #000, 0 0 6px #000;
}

#si-start-blurb {
  font-size: 10px;
  color: var(--si-cream);
  letter-spacing: 0.5px;
  line-height: 2.1;
  margin-bottom: 22px;
  text-shadow: 0 0 5px #000, 0 0 5px #000;
  max-width: 90%;
}

#si-start-btn, #si-retry-btn, .si-primary-btn {
  background: var(--si-gold);
  color: #12154a;
  border: none;
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-block;
}
#si-start-btn:hover, #si-retry-btn:hover, .si-primary-btn:hover { background: var(--si-gold-bright); }

#si-gameover {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  background: rgba(8, 9, 30, 0.94);
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 4px;
}
#si-gameover.active { display: flex; }

#si-gameover-title {
  font-size: 16px;
  color: var(--si-pink);
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(255,94,196,0.5);
}

#si-highscore-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--si-gold);
  margin-top: 4px;
}
#si-highscore-value {
  font-size: 30px;
  color: var(--si-gold-bright);
  line-height: 1.3;
  margin: 8px 0 14px;
  text-shadow: 0 0 10px rgba(249,236,58,0.6);
}

#si-finalscore-label {
  font-size: 9px;
  color: var(--si-gold);
  margin-bottom: 18px;
  letter-spacing: 1px;
  line-height: 1.6;
}
#si-finalscore-value { color: var(--si-cream); }

#si-submit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}

#si-submit-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-align: left;
  color: var(--si-cream);
}

#si-email-input {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--si-gold);
  color: var(--si-cream);
  font-family: inherit;
  font-size: 11px;
  padding: 10px;
  border-radius: 4px;
  outline: none;
}
#si-email-input:focus { box-shadow: 0 0 6px rgba(249,236,58,0.6); }

#si-consent-label {
  font-size: 8px;
  color: var(--si-muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  line-height: 1.6;
}
#si-consent-label input { margin-top: 2px; }

#si-submit-btn {
  background: var(--si-gold);
  color: #12154a;
  border: none;
  font-family: inherit;
  font-weight: bold;
  font-size: 10px;
  padding: 12px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 1px;
  margin-top: 6px;
}
#si-submit-btn:hover { background: var(--si-gold-bright); }
#si-submit-btn:disabled { background: #333; color: #777; cursor: not-allowed; }

#si-submit-status {
  margin-top: 10px;
  font-size: 9px;
  min-height: 16px;
  letter-spacing: 1px;
  line-height: 1.5;
}
#si-submit-status.ok { color: #6f6; }
#si-submit-status.err { color: #f55; }

#si-restart-hint {
  margin-top: 16px;
  font-size: 9px;
  color: var(--si-muted);
  letter-spacing: 1px;
}

#si-connlost {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  background: rgba(8, 9, 30, 0.94);
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 4px;
  gap: 10px;
}
#si-connlost.active { display: flex; }
#si-connlost-title {
  font-size: 16px;
  color: var(--si-pink);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(255,94,196,0.5);
}
#si-connlost-reason {
  font-size: 10px;
  color: var(--si-cream);
  line-height: 1.8;
  max-width: 90%;
  margin-bottom: 10px;
}

#si-touch-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
#si-touch-move { display: flex; gap: 10px; }
.si-touch-btn {
  background: transparent;
  border: 2px solid var(--si-gold);
  color: var(--si-gold);
  font-family: inherit;
  font-size: 18px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.si-touch-btn:active,
.si-touch-btn.si-pressed {
  background: rgba(249,236,58,0.25);
}
.si-touch-fire {
  width: auto;
  padding: 0 24px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

#si-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 9px;
  color: var(--si-muted);
  letter-spacing: 0.5px;
}
#si-sound-toggle { cursor: pointer; text-decoration: underline; }
#si-sound-toggle:hover { color: var(--si-gold); }