/*
  style.css - page layout and canvas scaling.
  Course concept: none; presentation only.
  Used by: index.html.

  The canvas always draws at 1152x768 pixels internally (96x64 tiles of 12px).
  CSS only stretches that picture to fit the window. Game logic never sees the
  CSS size, so the simulation is identical on every screen. src/core/input.js
  converts mouse positions from CSS pixels back to canvas pixels.
*/

html,
body {
  margin: 0;
  height: 100%;
  background: #15181d;
  color: #e8e8e8;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

#game-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#game-canvas {
  /*
    The canvas is 3:2 (1152 / 768 = 1.5). It may be as wide as the window,
    but never wider than 1.5 x the window height, otherwise it would overflow
    vertically. height: auto keeps the 3:2 aspect ratio.
  */
  width: min(100vw, calc(100vh * 1.5));
  height: auto;
  display: block;
  /* Keep tile edges crisp when scaled instead of blurring them. */
  image-rendering: pixelated;
  cursor: crosshair;
}

/*
  The browser's built-in [hidden] rule is weak: any "display: ..." rule would
  override it. This makes hidden always win, so scenes can show/hide panels
  just by setting element.hidden = true / false.
*/
[hidden] {
  display: none !important;
}

/* ---- Side panels (AI Lab controls; menus in later phases) ------------------ */

.panel {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 260px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(20, 24, 30, 0.92);
  border: 1px solid #3a4250;
  border-radius: 6px;
  font-size: 13px;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.panel button {
  padding: 5px 6px;
  background: #2b3240;
  color: #e8e8e8;
  border: 1px solid #485266;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}

.panel button:hover {
  background: #36405a;
}

.panel button.active {
  background: #3d6fb6;
  border-color: #6d9be0;
}

.panel button.wide {
  width: 100%;
  margin: 6px 0;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.slider {
  display: block;
  margin: 6px 0;
}

.slider input {
  width: 100%;
}

#behavior-explanation {
  line-height: 1.4;
  color: #c9d1dc;
}

.tab-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.hint {
  margin: 8px 0 0;
  color: #8a93a3;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
}

.stats-table th,
.stats-table td {
  padding: 3px 4px;
  border-bottom: 1px solid #343b48;
  text-align: right;
  vertical-align: top;
}

.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
}

/* ---- Menus and screens ------------------------------------------------------ */

.panel.centered {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 340px;
  text-align: left;
}

.panel.wide-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: 88vh;
  line-height: 1.45;
}

.panel h1 {
  margin: 0 0 4px;
  font-size: 26px;
}

.panel h3 {
  margin: 14px 0 4px;
  font-size: 14px;
  color: #ffd84d;
}

.panel .tagline,
.panel .note {
  color: #c9d1dc;
}

.panel .note {
  font-size: 12px;
  margin: 6px 0 0;
}

.panel button.primary {
  background: #3d6fb6;
  border-color: #6d9be0;
  font-weight: bold;
}

.difficulty {
  border: 1px solid #3a4250;
  border-radius: 4px;
  margin: 10px 0;
}

.difficulty label {
  margin-right: 10px;
}

.seed-row button {
  margin-left: 8px;
}

#game-toolbar {
  position: fixed;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}

#game-toolbar button {
  padding: 5px 8px;
  background: rgba(20, 24, 30, 0.85);
  color: #e8e8e8;
  border: 1px solid #485266;
  border-radius: 4px;
  cursor: pointer;
  font: 12px system-ui, sans-serif;
}