/* ==========================================================================
   Dead Signal — component & layout styles
   Uses only the custom properties defined in tokens.css (generated from
   tokens/tokens.json). Load tokens.css BEFORE this file.
   ========================================================================== */

/* ===== 2. BASE ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  font-family: var(--font-mono);
  color: var(--text);
  background: var(--bg);
}

#canvas-container {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
}
#canvas-container canvas { display: block; }

.span-full { grid-column: 1 / -1; }

/* ===== 3. BUTTONS — two variants only: .btn-primary and .btn-secondary =====
   Every button uses .btn + one variant. .btn-lg is a size modifier.
*/
.btn {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  padding: 10px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Primary button corner ornaments: top-left (::before) + bottom-right (::after) */
.btn-primary::before,
.btn-primary::after {
  content: "";
  position: absolute;
  width: var(--btn-corner-width);
  height: var(--btn-corner-height);
  background-image: var(--btn-corner-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  pointer-events: none;
}
.btn-primary::before { top: var(--btn-corner-offset); left: var(--btn-corner-offset); }
.btn-primary::after { bottom: var(--btn-corner-offset); right: var(--btn-corner-offset); transform: scale(-1, -1); }

/* Primary: the one main action in a context (Execute, Start, Play Again) */
.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  font-weight: bold;
}
.btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
}

/* Secondary: everything else (moves, clear, reset, close) */
.btn-secondary {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--btn-secondary-hover-accent);
  color: var(--btn-secondary-hover-accent);
}

/* Size modifier */
.btn-lg { font-size: 1rem; padding: 14px 40px; }

/* ===== 4. CONTAINERS ===== */

/* ---- 4a. Panel (base surface: sidebar, modal cards, toast) */
.panel {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
  padding: var(--panel-padding);
}
.panel-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-label);
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Panel corner ornaments (4 spans added to each .panel by panel-corners.js; .panel-no-corners opts out) */
.panel-corner {
  position: absolute;
  width: var(--panel-corner-width);
  height: var(--panel-corner-height);
  background-image: var(--panel-corner-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  pointer-events: none;
}
.panel-corner-tl { top: var(--panel-corner-offset); left: var(--panel-corner-offset); transform: none; }
.panel-corner-tr { top: var(--panel-corner-offset); right: var(--panel-corner-offset); transform: scaleX(-1); }
.panel-corner-bl { bottom: var(--panel-corner-offset); left: var(--panel-corner-offset); transform: scaleY(-1); }
.panel-corner-br { bottom: var(--panel-corner-offset); right: var(--panel-corner-offset); transform: scale(-1, -1); }

/* ---- 4b. Sidebar (the one container: left side, full height) */
.sidebar {
  position: fixed;
  top: var(--sidebar-margin);
  bottom: var(--sidebar-margin);
  left: var(--sidebar-margin);
  width: var(--sidebar-width);
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap);
}
/* Each section inside the sidebar */
.sidebar-section { flex-shrink: 0; }
.sidebar-section-grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- 4c. Header section */
#header-section h1 {
  margin: 0;
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-heading);
  color: var(--accent);
  text-shadow: var(--glow-accent);
}
#header-section .level-label {
  margin: 6px 0 0;
  font-size: var(--fs-small);
  color: var(--accent);
}
#header-section .btn { width: 100%; margin-top: var(--space-3); }
#header-section .subtitle {
  margin: 6px 0 0;
  font-size: var(--fs-h3);
  color: var(--text-dim);
  line-height: 1.4;
}

/* ---- 4d. Command queue section */
#queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
#queue-list:empty::after {
  content: "Empty. Add moves below.";
  color: var(--text-dim);
  font-size: var(--fs-h3);
}
/* Queue item (row inside the queue section) */
.queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-tint);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: var(--fs-small);
}
.queue-item.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow-active);
}
.queue-item .remove {
  cursor: pointer;
  color: var(--text-dim);
  padding: 0 4px;
  border-radius: 3px;
}
.queue-item .remove:hover { color: var(--text); background: var(--danger-hover-bg); }

/* ---- 4e. View section */
#view-section .hint {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-tiny);
  color: var(--text-dim);
}
#view-section .btn { width: 100%; }

/* ---- 4f. Controls section */
#button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* ---- 4g. Toast (top-center of the 3D view) */
.toast {
  position: fixed;
  top: var(--space-6);
  left: calc(var(--sidebar-space) + (100vw - var(--sidebar-space)) / 2);
  z-index: var(--z-toast);
  transform: translate(-50%, -140%);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-toast);
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-small);
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--text);
}

/* ---- 4h. Overlay (full-screen layer, shared by title + success) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.overlay.visible { opacity: 1; pointer-events: auto; }
.overlay-dim {
  background: var(--overlay-bg);
  backdrop-filter: var(--blur-overlay);
}
.overlay-title {
  background: radial-gradient(ellipse at center, var(--c-mars-sky-glow) 0%, var(--bg) 75%);
  transition: opacity 0.4s ease;
}

/* ---- 4i. Title screen content */
.title-content {
  max-width: 620px;
  width: 88vw;
  padding: 0 24px;
  text-align: center;
}
.title-content h1 {
  margin: 0 0 24px;
  font-size: var(--fs-display);
  letter-spacing: var(--ls-heading);
  color: var(--accent);
  text-shadow: var(--glow-accent);
}
.title-content p {
  margin: 0 0 32px;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--text-dim);
  line-height: 1.6;
}

/* ---- 4j. Modal card (success) */
.panel-modal {
  max-width: 380px;
  width: 88vw;
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.25s ease;
}
.overlay.visible .panel-modal { transform: scale(1); }
.panel-modal h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h2);
  color: var(--accent);
  text-shadow: var(--glow-accent);
}
.panel-modal > p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  color: var(--text-dim);
  line-height: 1.5;
}
.modal-stats {
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  color: var(--text);
}
.modal-stats span { color: var(--accent); font-weight: bold; }
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* ---- 4k. Level select list (inside its modal card) */
.level-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
#level-modal .btn { width: 100%; }

/* ===== 5. RESPONSIVE =====
   Token overrides for small screens live in tokens.json ("media").
   Only non-token rule changes belong here.
*/
@media (max-width: 760px) {
  #header-section .subtitle { display: none; }
  #header-section h1 { font-size: 0.9rem; }
}