html, body {
  margin: 0;
  padding: 0;
}

:root {
  --z-game: 10;
  --z-sidebar: 20;
  --z-shop: 30;
  --z-tutorial: 40;
  --z-pause: 50;
  --z-system-fade: 2000;
  --z-system-loading: 2100;
  --z-system-fade-top: 3000;
}

@font-face {
  font-family: 'UIFont1';
  src: url('assets/SpecialElite-Regular.ttf');
}

@font-face {
  font-family: 'boom1';
  src: url('assets/RubikBurned-Regular.ttf');
}

@font-face {
  font-family: 'boom2';
  src: url('assets/RubikPuddles-Regular.ttf');
}

#canvas-container {
  position: relative;
  isolation: isolate;
}

.layer-root {
  position: absolute;
  inset: 0;
}

#layer-game {
  z-index: var(--z-game);
}

#layer-sidebar {
  z-index: var(--z-sidebar);
  pointer-events: none;
}

#layer-shop {
  z-index: var(--z-shop);
  pointer-events: none;
}

#layer-tutorial {
  z-index: var(--z-tutorial);
  pointer-events: none;
}

#layer-pause {
  z-index: var(--z-pause);
  pointer-events: none;
}

#layer-system {
  z-index: var(--z-system-fade);
  pointer-events: none;
}

/* Background for the simulation area (matches `waterColor` in sketch.js) */
#canvas-container {
  background: rgb(0, 0, 0);
}

canvas {
  display: block;
}

#gameCanvas {
  position: absolute;
  left: 0;
  top: 0;
}

/* UI Overlay Styles */
#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to canvas */
  display: flex;
}

#ui-sidebar {
  /* Width set by JS to match simulated sidebar width */
  height: 100%;
  background-color: rgba(50, 50, 50, 0.95); /* Dark gray background */
  pointer-events: auto; /* Catch clicks on sidebar */
  border-right: 2px solid #555;
  color: white;
  font-family: 'UIFont1', monospace;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}

#ui-sidebar button {
  background: #444;
  color: white;
  border: 1px solid #777;
  margin: 5px 0;
  padding: 10px;
  cursor: pointer;
  font-family: 'UIFont1', monospace;
  font-size: 16px;
  width: 100%;
  transition: background 0.2s;
}

#ui-sidebar button:hover {
  background: #666;
}

#ui-pause-menu,
#ui-settings-menu,
#ui-slot-menu {
  font-family: 'UIFont1', monospace;
}

/* Shop Overlay */
#ui-shop-overlay {
  position: absolute;
  top: 50px; /* Offset from top */
  left: 0; /* JS will align to sidebar width */
  width: 60%;
  max-height: 80%;
  background-color: rgba(40, 40, 40, 0.85);
  border: 2px solid #888;
  color: white;
  padding: 20px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  font-family: 'UIFont1', monospace;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Menu slider color */
#ui-layer input[type="range"] {
  accent-color: #90EE90;
}


/* SCRAM button - increase specificity to override generic sidebar/button rules */
#ui-sidebar button.scram-btn,
#ui-sidebar .controls-panel button.scram-btn {
  background: #660000 !important;
  color: white;
  border: 1px solid #440000;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
}

#ui-sidebar button.scram-btn:hover,
#ui-sidebar .controls-panel button.scram-btn:hover {
  background: #880000 !important;
}

#ui-sidebar button.scram-btn.scram-active,
#ui-sidebar .controls-panel button.scram-btn.scram-active {
  background: #ff0000 !important;
  border-color: #ff5555;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
  animation: scram-blink 0.5s steps(20, start) infinite;
}

@keyframes scram-blink {
  50% { 
    background-color: #660000;
    border-color: #440000;
    box-shadow: none;
    color: #ffd;
  }
}

#ui-settings-menu,
#ui-slot-menu {
  pointer-events: auto;
}

#ui-shop-overlay.hidden, #ui-pause-menu.hidden {
  display: none;
}

/* Generic hidden utility */
.hidden {
  display: none !important;
}

/* Force the offscreen UI canvas hidden so it's only visible when composited into WebGL */
#UI-Canvas {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#ui-shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

/* Title / Start button style used on title screen and slot but1tons */
.title-button {
  background: #2a2;
  color: white;
  border: 1px solid #6b6;
  padding: 12px 28px;
  font-family: 'UIFont1', monospace;
  font-size: 18px;
  cursor: pointer;
  width: auto;
}
.title-button:ho1ver { background: #3c3; }
.title-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
}

/* Smaller slot-style button used next to Start on title screen */
.title-slot-button {
  background: #2a2;
  color: white;
  border: 1px solid #6b6;
  padding: 8px 12px;
  font-family: 'UIFont1', monospace;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
  text-align: center;
}
.title-slot-button:hover { background: #3c3; }

/* Selected slot shows the button-down visual persistently */
.title-slot-button.selected-down {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45);
  border-color: #4d4;
}

/* Toast styles */
#ui-toast-container {
  pointer-events: none;
}
.ui-toast {
  background: rgba(20,20,20,0.95);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  font-family: 'UIFont1', monospace;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: auto;
}
.ui-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.shop-item {
  background: #333;
  border: 1px solid #555;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.shop-item button {
  margin-top: 10px;
  align-self: flex-end;
  background: #2a2;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.shop-item button:disabled {
  background: #555;
  cursor: not-allowed;
}

.shop-item button.btn-disabled {
  background: #555;
  cursor: not-allowed;
  opacity: 0.8;
}

.shop-item h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.shop-item p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

/* Pause Menu */
#ui-pause-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);
  padding: 40px;
  border: 2px solid white;
  color: white;
  text-align: center;
  font-family: 'UIFont1', monospace;
  pointer-events: auto;
}

#ui-slot-menu,
#ui-settings-menu {
  pointer-events: auto;
}

#loading-screen {
  z-index: var(--z-system-loading);
  pointer-events: auto;
}

#fade-overlay {
  z-index: var(--z-system-fade);
}

#ui-pause-menu h2 {
  margin-top: 0;
  font-size: 32px;
  margin-bottom: 20px;
}

.pause-buttons button {
  display: block;
  width: 200px;
  margin: 10px auto;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  background: #444;
  color: white;
  border: 1px solid #777;
  font-family: inherit;
}

.pause-buttons button:hover {
  background: #666;
}

#ui-settings-menu button,
#ui-slot-menu button {
  display: block;
  width: 200px;
  margin: 10px auto;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  background: #444;
  color: white;
  border: 1px solid #777;
  font-family: 'UIFont1', monospace;
}

#ui-settings-menu button:hover,
#ui-slot-menu button:hover {
  background: #666;
}

#dev-tools-panel {
  width: 1067px;
  box-sizing: border-box;
  background: #141414;
  color: #fff;
  border-top: 1px solid #444;
  padding: 10px;
  font-family: 'UIFont1', monospace;
}

#dev-tools-panel h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

/* Loading animation: 2x2 invisible grid and a rolling unfilled green square */
#loading-anim {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.loader-grid {
  position: relative;
  width: 88px; /* doubled size */
  height: 88px; /* doubled size */
}
.loader-cube {
  position: absolute;
  width: 36px; /* doubled from 18 */
  height: 36px; /* doubled from 18 */
  box-sizing: border-box;
  border: 3px solid #66ff88; /* green border, transparent inside */
  background: transparent;
  top: 0;
  left: 0;
  transform-origin: center;
  /* Duration chosen to allow a short pause on each corner */
  animation: rollSquare 2.25s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes rollSquare {
  0%   { transform: translate(0,0) rotate(0deg); }
  18%  { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(52px,0) rotate(180deg); }
  43%  { transform: translate(52px,0) rotate(180deg); }
  50%  { transform: translate(52px,52px) rotate(360deg); }
  68%  { transform: translate(52px,52px) rotate(360deg); }
  75%  { transform: translate(0,52px) rotate(540deg); }
  93%  { transform: translate(0,52px) rotate(540deg); }
  100% { transform: translate(0,0) rotate(720deg); }
}

/* Make animation subtle on dark backgrounds */
#loading-anim .loader-cube {
  filter: drop-shadow(0 0 4px rgba(102,255,136,0.18));
}

.dev-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dev-tools-check {
  margin-bottom: 12px;
}

.dev-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.dev-tools-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

#dev-tools-panel input,
#dev-tools-panel button {
  font-family: 'UIFont1', monospace;
}

#dev-tools-panel input[type="number"] {
  background: #222;
  color: #fff;
  border: 1px solid #555;
  padding: 4px 6px;
}

#dev-tools-panel button {
  background: #333;
  color: #fff;
  border: 1px solid #666;
  padding: 6px 10px;
  cursor: pointer;
}

#dev-tools-panel button:hover {
  background: #4a4a4a;
}