/* style.css — AMR Factory Game  (Game Boy–inspired palette) */

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

:root {
  --gb-dark:   #0f380f;
  --gb-mid:    #306230;
  --gb-light:  #8bac0f;
  --gb-bright: #9bbc0f;
  --gb-pale:   #c4cfa1;
}

body {
  background: #0a1a0a;
  color: var(--gb-bright);
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 12px 8px 32px;
  user-select: none;
}

h1 {
  font-size: 1.3rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 12px #9bbc0f44;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

button {
  background: var(--gb-dark);
  color: var(--gb-bright);
  border: 2px solid var(--gb-mid);
  padding: 5px 14px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.08s;
  outline: none;
}
button:hover  { background: #1a3a1a; }
button:active { background: var(--gb-mid); }
button.primary { border-color: var(--gb-bright); background: var(--gb-mid); }
button.primary:hover { background: #3a7a3a; }
button:disabled { opacity: 0.45; cursor: default; }

/* ── Screens ──────────────────────────────────────────────────────────────*/
#game-screen, #leaderboard-screen {
  width: 640px;
  max-width: 100%;
}
#leaderboard-screen { display: none; }

/* ── Canvas ───────────────────────────────────────────────────────────────*/
canvas {
  display: block;
  border: 3px solid var(--gb-mid);
  box-shadow: 0 0 24px #9bbc0f22;
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}

/* ── HUD strip ────────────────────────────────────────────────────────────*/
#hud {
  background: var(--gb-dark);
  border: 2px solid var(--gb-mid);
  border-top: none;
  padding: 6px 12px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.hud-item { display: flex; flex-direction: column; min-width: 60px; }
.hud-label { color: var(--gb-mid); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; }
.hud-value { color: var(--gb-bright); font-size: 0.9rem; font-weight: bold; }

/* ── Job list ─────────────────────────────────────────────────────────────*/
#job-list {
  margin-top: 6px;
  background: var(--gb-dark);
  border: 2px solid var(--gb-mid);
  padding: 5px 10px;
  font-size: 0.7rem;
  line-height: 1.7;
}
.job-row { display: flex; gap: 8px; align-items: center; }

/* ── Controls hint ────────────────────────────────────────────────────────*/
#controls-hint {
  margin-top: 5px;
  font-size: 0.62rem;
  color: var(--gb-mid);
  letter-spacing: 1px;
}

/* ── Submit overlay ───────────────────────────────────────────────────────*/
#submit-overlay,
#start-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#submit-overlay.active,
#start-overlay.active { display: flex; }

#submit-box {
  background: var(--gb-dark);
  border: 3px solid var(--gb-bright);
  padding: 26px 32px;
  width: 360px;
  max-width: 94vw;
  text-align: center;
}
#submit-box h2   { margin-bottom: 14px; font-size: 1.15rem; }
.result-row      { margin-bottom: 6px; font-size: 0.88rem; color: var(--gb-pale); }
.result-big      { font-size: 1.5rem; color: var(--gb-bright); font-weight: bold; margin: 10px 0 18px; }

#submit-box input {
  display: block;
  width: 100%;
  background: #1a3a1a;
  border: 1px solid var(--gb-mid);
  color: var(--gb-bright);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  padding: 7px 10px;
  margin-bottom: 8px;
}
#submit-box input::placeholder { color: var(--gb-mid); }
#submit-box input:focus { outline: none; border-color: var(--gb-bright); }

.btn-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ── Leaderboard ──────────────────────────────────────────────────────────*/
#leaderboard-screen h2 { margin-bottom: 10px; font-size: 1.1rem; letter-spacing: 2px; }

#lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 10px;
}
#lb-table th {
  background: #1a3a1a;
  color: var(--gb-bright);
  padding: 5px 8px;
  text-align: left;
  border-bottom: 2px solid var(--gb-mid);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 1px;
}
#lb-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #1a3a1a;
  color: var(--gb-pale);
}
#lb-table tbody tr:nth-child(1) td { color: var(--gb-bright); font-weight: bold; }
#lb-table tbody tr:nth-child(2) td { color: var(--gb-light); }
#lb-table tbody tr:nth-child(3) td { color: var(--gb-light); }

.lb-msg { text-align: center; padding: 20px; color: var(--gb-mid); }
.lb-err { text-align: center; padding: 20px; color: #ff6666; }

/* ── Comments ─────────────────────────────────────────────────────────────*/
#comments-section {
  margin-top: 24px;
  border-top: 2px solid var(--gb-mid);
  padding-top: 14px;
}
#comments-section h3 {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
#comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
#comment-form input,
#comment-form textarea {
  background: #1a3a1a;
  border: 1px solid var(--gb-mid);
  color: var(--gb-bright);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  padding: 6px 9px;
  outline: none;
  resize: vertical;
}
#comment-form input:focus,
#comment-form textarea:focus { border-color: var(--gb-bright); }
#comment-form textarea { min-height: 56px; }
#comment-form button   { align-self: flex-start; }

.comment-card {
  background: #0a1a0a;
  border: 1px solid var(--gb-mid);
  padding: 7px 10px;
  margin-bottom: 6px;
  font-size: 0.72rem;
}
.comment-meta { color: var(--gb-mid); margin-bottom: 3px; }
.comment-body { color: var(--gb-pale); line-height: 1.5; word-break: break-word; }

/* ── D-pad mobile controls ────────────────────────────────────────────────*/
#dpad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows:    repeat(3, 54px);
  gap: 5px;
  margin: 14px auto 0;
  touch-action: none;
}
.dpad-btn {
  width: 54px;
  height: 54px;
  font-size: 1.3rem;
  padding: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dpad-btn:active,
.dpad-btn.pressed { background: var(--gb-mid); border-color: var(--gb-bright); }
.dpad-center {
  background: #0a1a0a;
  border: 2px solid #1a3a1a;
  border-radius: 8px;
}

/* ── Canvas touch handling ────────────────────────────────────────────────*/
canvas { touch-action: none; }

/* ── Mobile ───────────────────────────────────────────────────────────────*/
@media (max-width: 660px) {
  #game-screen, #leaderboard-screen { width: 100%; }
  #hud { gap: 10px; flex-wrap: wrap; }
  h1   { font-size: 1rem; }

  /* D-pad fixed at bottom so it's always reachable without scrolling */
  #dpad {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(10, 26, 10, 0.88);
    border: 1px solid var(--gb-mid);
    border-radius: 14px;
    padding: 8px;
    grid-template-columns: repeat(3, 68px);
    grid-template-rows:    repeat(3, 68px);
    gap: 6px;
  }
  .dpad-btn { width: 68px; height: 68px; font-size: 1.6rem; border-radius: 10px; }

  /* Prevent body scroll while touching d-pad area */
  body { touch-action: pan-y; }

  /* Add bottom padding so game content isn't hidden behind fixed d-pad */
  #game-screen { padding-bottom: 240px; }

  /* Hide keyboard hint on mobile — replaced by d-pad */
  #controls-hint { display: none; }
}