* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #03030f;
  color: #00ffff;
  font-family: 'Courier New', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  user-select: none;
  overflow: hidden;
}

/* ============================================================
   DESKTOP GRID: canvas left, panel right
   ============================================================ */
#container {
  display: grid;
  grid-template-columns: auto 190px;
  grid-template-rows: auto;
  grid-template-areas: "canvas panel";
  gap: 12px;
  align-items: start;
}

#top-bar     { display: none; }
#canvasWrapper { grid-area: canvas; position: relative; display: inline-block; }
#panel         { grid-area: panel; }

#gameCanvas {
  display: block;
  border: 2px solid #00ffff55;
  box-shadow: 0 0 24px #00ffff33, 0 0 48px #00ffff11;
  cursor: crosshair;
}

/* CRT scanline overlay */
#scanlines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  border: 2px solid transparent;
}

/* Overlay message */
#message {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(3,3,20,0.92);
  border: 2px solid #00ffff99;
  box-shadow: 0 0 30px #00ffff44;
  padding: 20px 36px;
  text-align: center;
  pointer-events: none;
  display: none;
  min-width: 220px;
}
#msgTitle {
  font-size: 22px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 16px #00ffff;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
#msgText {
  color: #6688aa;
  font-size: 12px;
  line-height: 1.6;
}

/* Side panel */
#panel {
  width: 190px;
  background: #05050f;
  border: 1px solid #00ffff22;
  box-shadow: 0 0 12px #00000066;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.panel-title {
  font-size: 17px;
  font-weight: bold;
  color: #00ffff;
  text-align: center;
  text-shadow: 0 0 12px #00ffff;
  letter-spacing: 2px;
  border-bottom: 1px solid #00ffff33;
  padding-bottom: 8px;
  line-height: 1.3;
}

.sep { border-top: 1px solid #0d1a2a; }

.stat-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.stat-label { color: #6688bb; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.stat-value { color: #00ffff; font-size: 15px; font-weight: bold; text-shadow: 0 0 6px #00ffff88; }
.stat-value.warn { color: #ff8800; text-shadow: 0 0 6px #ff880088; }

.btn {
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: 1px solid #00ffff44;
  color: #00dddd;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}
.btn:hover {
  background: #00ffff18;
  border-color: #00ffff99;
  color: #00ffff;
  box-shadow: 0 0 8px #00ffff33;
}
.btn:active { background: #00ffff33; }
.btn.disabled { opacity: 0.3; cursor: default; }
.btn.disabled:hover { background: transparent; border-color: #00ffff44; box-shadow: none; }

/* Directional pad */
#dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.dpad-btn {
  padding: 5px 0;
  background: transparent;
  border: 1px solid #00ffff33;
  color: #00aaaa;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition: background 0.1s;
}
.dpad-btn:hover { background: #00ffff18; color: #00ffff; border-color: #00ffff77; }
.dpad-btn:active { background: #00ffff33; }
.dpad-btn.center { font-size: 10px; color: #446688; }

.help {
  font-size: 11px;
  color: #4477aa;
  line-height: 1.4;
}
.help b { color: #55aa88; }

.footer {
  font-size: 9px;
  color: #406889;
  line-height: 1.25;
  text-align: center;
  font-family: 'Courier New', monospace;
}

.footer a {
  color: #00ffff;
  text-decoration: none;
}

/* ============================================================
   MOBILE GRID  (≤ 600px)
   top-bar / canvas / panel stacked vertically
   ============================================================ */
@media (max-width: 600px) {
  body {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "canvas"
      "panel";
    width: 100%;
    padding: 8px;
    gap: 6px;
  }

  /* Compact stats strip */
  #top-bar {
    grid-area: topbar;
    display: flex;
    justify-content: space-between;
    background: #05050f;
    border: 1px solid #00ffff22;
    padding: 6px 10px;
  }

  .mob-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .mob-label {
    color: #6688bb;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .mob-value {
    color: #00ffff;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 6px #00ffff88;
  }

  .mob-value.warn { color: #ff8800; text-shadow: 0 0 6px #ff880088; }

  /* Canvas scales to fill width */
  #canvasWrapper { grid-area: canvas; width: 100%; display: block; }
  #gameCanvas { width: 100% !important; height: auto !important; }

  /* Panel: full width below canvas, hide title and stats (covered by top-bar) */
  #panel {
    grid-area: panel;
    width: auto;
  }

  #panel .panel-title,
  #panel .stat-group,
  #panel .stat-sep { display: none; }
}