html, body {
  margin: 0;
  height: 100%;
  background: #0a0c12;
  color: #c8d0e0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
}

/* Hidden until client.js decides launcher vs. game (bundle.js is a blocking, undeferred
   script at the end of body, so without this the parsed-but-not-yet-scripted splash can
   flash for a frame while the script downloads/runs). */
body { visibility: hidden; }
body.ready { visibility: visible; }

canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  /* sized to the full window in JS; 1:1 pixels, no scaling */
}

/* brush-size cursor overlay sits on top and must not eat mouse events */
#cursor {
  pointer-events: none;
}

/* diamond-explosion particle overlay, topmost layer, also must not eat mouse events */
#explosion {
  pointer-events: none;
}

body.started #c {
  cursor: none;
}

#hud, #help {
  position: fixed;
  left: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #8a94ab;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}

#hud  { top: 10px; }
#help { bottom: 10px; }

#help b { color: #b9c4dc; }

/* Heat/cold brush capacity bars: mirrored around bottom-center, growing outward as they fill.
   Anchored by left/right (not transform) so the gradient always shows its brightest stop at
   the current tip, dimmest at the center -- reads as "how full" without extra JS. */
#capBars {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
}
.capBar {
  position: fixed;
  bottom: 10px;
  height: 16px;
  width: 0; /* set live in JS from the capacity value */
}
#heatCapBar { right: calc(50% + 3px); }
#coldCapBar { left: calc(50% + 3px); }

.view-human #heatCapBar { background: linear-gradient(to left,  #0a3d12, #b6ff4d); }
.view-human #coldCapBar { background: linear-gradient(to right, #0a3d12, #4dffe0); }

.view-night #heatCapBar { background: linear-gradient(to left,  #041a08, #7dffa0); box-shadow: 0 0 6px #4dff5e; }
.view-night #coldCapBar { background: linear-gradient(to right, #041a08, #7dffe0); box-shadow: 0 0 6px #4dffe0; }

.view-thermal #heatCapBar { background: linear-gradient(to left,  #3a1410, #ffcf40); }
.view-thermal #coldCapBar { background: linear-gradient(to right, #10203a, #4696e6); }

/* ruby/sapphire regen buff: pulsing glow layered on top of the bar's existing per-view gradient */
.capBar.buffed {
  animation: capBuffPulse 0.6s ease-in-out infinite alternate;
}
@keyframes capBuffPulse {
  from { filter: brightness(1)   drop-shadow(0 0 0 #fff); }
  to   { filter: brightness(1.6) drop-shadow(0 0 8px #fff); }
}

/* Anchored to a fixed distance from the top instead of vertically centered on every panel, so
   toggling content that changes a panel's height (e.g. gemMode adding/removing the legend)
   doesn't shift it up and down -- only an actual window resize moves it. */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}

.divider {
  border-top: 1px solid #1c4a20;
  width: 100%;
}

/* Replaces the old <hr/> separators: a soft top border on each section instead of a hard rule. */
.splashSection {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid #1c4a20;
  text-align: left;
}

.splashSection:first-of-type {
  padding-top: 0;
  border-top: none;
}

/* Label + control row (room panel): aligns every row's label into the same column width.
   width:100% is required -- .panel centers each row on its own content width otherwise,
   so rows of different lengths would each center independently instead of sharing a column. */
.formRow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  height: 40px
}
.formRow label,
.switchGroupLabel {
  min-width: 140px;
  flex: none;
}

.alertError {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #ffd0c8;
  background: rgba(255, 70, 40, 0.12);
  border: 1px solid #c83e2c;
  border-radius: 4px;
}

/* Shared row layout for any group of buttons inside a panel. */
.buttonRow {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#gameOverLayer { display: none; }

#finalScores {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

#finalScores li {
  white-space: nowrap;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: #0d1710;
  border: 1px solid #1c4a20;
  border-radius: 6px;
  padding: 24px 32px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Launch screen: same panel look, just sized to fill most of the window. */
.launcherPanel {
  width: 90vw;
  height: 90vh;
  max-width: none;
  justify-content: center;
  box-sizing: border-box;
}

.launcherPanel p {
  max-width: 60ch;
}

.launcherPreview {
  max-width: 90%;
  max-height: 55vh;
  border: 1px solid #1c4a20;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.panel h1 {
  margin: 0;
  color: #4dff5e;
  text-shadow: 0 0 8px #086810;
}

.panel p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a94ab;
}

.panel p b { color: #b9c4dc; }

#gemLegend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: fit-content;
  text-align: left; /* keeps swatch+label rows aligned as a column; centering comes from the auto margins above */
  font-size: 11px;
  line-height: 1.4;
  color: #8a94ab;
}

#gemLegend li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

#gemLegend b { color: #b9c4dc; }

.gemSwatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Form labels: shared across splash, room-creation, and any future panel form. */
.panel label {
  font-size: 12px;
  color: #b9c4dc;
}

.panel input[type="text"] {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  background: #0a0c12;
  color: #c8d0e0;
  border: 1px solid #2c5a30;
  border-radius: 4px;
  outline: none;
}
.panel input[type="text"]:focus {
  border-color: #4dff5e;
  box-shadow: 0 0 6px rgba(77, 255, 94, 0.4);
}
.panel input[type="text"]::placeholder {
  color: #55607a;
}

/* Native theming for radio/checkbox -- covers it in one line, no custom-appearance markup needed. */
.panel input[type="radio"],
.panel input[type="checkbox"] {
  accent-color: #4dff5e;
}

/* Range slider: neutral green track by default; #difficulty overrides just the gradient below. */
.panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #0a3d12, #4dff5e);
  outline: none;
  vertical-align: middle;
}
.panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0d1710;
  cursor: pointer;
}
.panel input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #0a3d12, #4dff5e);
}
.panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0d1710;
  cursor: pointer;
}

/* Segmented pill switch for a radio group (e.g. viewMode, gemMode). Native radios stay in the DOM
   for click/keyboard semantics, just visually hidden; the option highlights via :has(:checked).
   .switchGroupLabel is the group's caption -- plain text, not a clickable segment. */
.switchGroup {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}
.switchGroupLabel {
  margin: 0;
  cursor: default;
}
.switchOptions {
  display: inline-flex;
  border: 1px solid #2c5a30;
  border-radius: 999px;
  overflow: hidden;
}
.switchOptions label {
  margin: 0;
  padding: 6px 18px;
  cursor: pointer;
  color: #8a94ab;
  transition: background 0.15s, color 0.15s;
}
.switchOptions label:not(:last-child) {
  border-right: 1px solid #2c5a30;
}
.switchOptions label:has(input:checked) {
  background: #12c722;
  color: #eaffee;
}
.switchOptions input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Base Temperature slider: blue (cold) -> red (hot), matching the sim's own thermal-view colours */
#difficulty {
  background: linear-gradient(to right, #4696e6, #c83e2c);
}
#difficulty::-moz-range-track {
  background: linear-gradient(to right, #4696e6, #c83e2c);
}

.panel button {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 24px;
  background: #086810;
  color: #d0ffd6;
  border: 1px solid #4dff5e;
  border-radius: 4px;
  cursor: pointer;
}

.panel button:hover {
  background: #0a7a13;
}

/* Main call-to-action of the panel: brighter fill, glows a bit. */
.panel button.primary {
  background: #12c722;
  border-color: #9dffb5;
  color: #eaffee;
  box-shadow: 0 0 10px rgba(77, 255, 94, 0.5);
}

.panel button.primary:hover {
  background: #16e02a;
  box-shadow: 0 0 14px rgba(77, 255, 94, 0.7);
}

/* Supporting action, de-emphasized relative to the default button. */
.panel button.secondary {
  background: transparent;
  border-color: #2c5a30;
  color: #8a94ab;
}

.panel button.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #4dff5e;
  color: #c8d0e0;
}

/* Destructive/leave action. */
.panel button.warning {
  background: #5a1414;
  border-color: #e0483a;
  color: #ffd6d0;
}

.panel button.warning:hover {
  background: #7a1c1c;
}