/* Deliberately minimal: native form controls, a full-viewport canvas, and just
   enough layout to float the controls over it. The only "design" here is a small
   set of color variables so the 2D canvas (which reads them via getComputedStyle)
   tracks the OS light/dark scheme. Everything else leans on browser defaults. */

:root {
  color-scheme: light dark;
  --bg-base: #f4f3ee;
  --border-subtle: #d9d7cb;
  --accent-primary: #1f7a5a;
  --accent-danger: #c23a4b;
  --accent-success: #1f8f88;
  --text-main: #22221d;
  --text-dim: #85847a;
  --bg-surface-elevated: #ffffff;
  --panel: #ffffffee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #16171d;
    --border-subtle: #2c2f3b;
    --accent-primary: #35a37c;
    --accent-danger: #ef5568;
    --accent-success: #2aa8a0;
    --text-main: #e8e9f0;
    --text-dim: #7b8099;
    --bg-surface-elevated: #22242e;
    --panel: #1b1d25ee;
  }
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-base);
  color: var(--text-main);
}

/* Canvas layers fill the viewport; UI floats above them. */
#canvas-wrap, #canvas3d-wrap { position: fixed; inset: 0; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#canvas3d-wrap canvas { cursor: grab; }
#canvas3d-wrap.dragging canvas { cursor: grabbing; }
#canvas3d-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2rem; text-align: center; color: var(--text-dim); pointer-events: none;
}

/* Native controls, just sized for touch. */
button, input, select { font: inherit; color: inherit; }
button { min-height: 40px; padding: 0 12px; cursor: pointer; }
button.active { outline: 2px solid var(--accent-primary); font-weight: 600; }

/* Floating affordances -- plain buttons pinned to the corners. */
.fab {
  position: fixed; z-index: 20;
  background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle);
  border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#view-toggle-fab { top: max(0.6rem, env(safe-area-inset-top)); right: 0.6rem; }
#settings-fab { bottom: max(0.6rem, env(safe-area-inset-bottom)); right: 0.6rem; width: 44px; }
#fps-counter {
  position: fixed; top: max(0.6rem, env(safe-area-inset-top)); left: 0.6rem; z-index: 20;
  padding: 4px 8px; background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle);
  border-radius: 6px; font-variant-numeric: tabular-nums; pointer-events: none;
}

/* Bottom controls: a simple centered column of native control rows. */
#bottom-bar {
  position: fixed; left: 50%; bottom: max(0.6rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: calc(100vw - 5rem);
}
.btn-group, #bottom-bar-2d, #bottom-bar-3d-actions {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  background: var(--panel); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 4px;
}
#steepness-inline {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 4px 10px;
}
#steepness-inline input[type="range"] { flex: 1; min-width: 110px; }
#steepness-inline .value { font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }

/* Settings: a plain scrollable bottom sheet, shown when .open. */
#settings-backdrop {
  position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,0.4);
  display: none;
}
#settings-backdrop.open { display: block; }
#settings-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
  max-height: 82vh; display: none; flex-direction: column;
  background: var(--bg-base); border-top: 1px solid var(--border-subtle);
  border-radius: 12px 12px 0 0;
}
#settings-panel.open { display: flex; }
#settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-subtle);
}
#settings-header h2 { margin: 0; font-size: 1rem; }
#settings-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
#settings-body h3 { margin: 1.1rem 0 0.4rem; font-size: 0.85rem; color: var(--text-dim); }
#settings-body p, #settings-body li { color: var(--text-dim); line-height: 1.5; font-size: 0.85rem; }
.stat-row { display: flex; justify-content: space-between; padding: 4px 0; }
.stat-row span:last-child { color: var(--text-dim); }
label.check { display: flex; align-items: center; gap: 0.5rem; min-height: 36px; }
label.check input { width: 18px; height: 18px; }
.btn-group { width: 100%; }
.btn-group button { flex: 1; }
.btn-plain, .btn-danger { width: 100%; margin: 0.3rem 0; }
.btn-danger { color: var(--accent-danger); }
input[type="range"] { width: 100%; }