/* gravityharp.css — Gravity Harp
   Cosmic gravity well. Void / Nebula / Quasar skins. */

/* === SKIN VARIABLES === */
.skin-void {
  --gh-bg: #050508;
  --gh-stage: #040406;
  --gh-accent: #b0b8d0;
  --gh-string: rgba(170, 180, 200, 0.6);
  --gh-string-glow: #c0c8e0;
  --gh-particle: #d0d8f0;
  --gh-text: #607088;
  --gh-text-bright: #a0b0c8;
  --gh-toolbar: #08080c;
  --gh-toolbar-border: #16182a;
  --gh-btn: #0c0e18;
  --gh-btn-hover: #141828;
}

.skin-nebula {
  --gh-bg: #080604;
  --gh-stage: #060503;
  --gh-accent: #dcb050;
  --gh-string: rgba(220, 175, 70, 0.6);
  --gh-string-glow: #f0c060;
  --gh-particle: #ffd880;
  --gh-text: #907848;
  --gh-text-bright: #c8a868;
  --gh-toolbar: #0c0a06;
  --gh-toolbar-border: #281e0c;
  --gh-btn: #181208;
  --gh-btn-hover: #241c10;
}

.skin-quasar {
  --gh-bg: #040508;
  --gh-stage: #030407;
  --gh-accent: #608cf0;
  --gh-string: rgba(70, 140, 240, 0.6);
  --gh-string-glow: #80a0ff;
  --gh-particle: #b080ff;
  --gh-text: #506090;
  --gh-text-bright: #8098c0;
  --gh-toolbar: #06080e;
  --gh-toolbar-border: #101830;
  --gh-btn: #0a1020;
  --gh-btn-hover: #121c30;
}

/* === BODY === */
#gravityharp-body {
  background: var(--gh-bg);
  display: flex;
  flex-direction: column;
  min-height: 520px;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
}

/* === TOOLBAR === */
.gh-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--gh-toolbar);
  border-bottom: 1px solid var(--gh-toolbar-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.gh-brand {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gh-accent);
  text-transform: uppercase;
  white-space: nowrap;
}

.gh-toolbar-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gh-label {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gh-text);
  text-transform: uppercase;
  white-space: nowrap;
}

.gh-toolbar select {
  background: var(--gh-btn);
  color: var(--gh-text-bright);
  border: 1px solid var(--gh-toolbar-border);
  border-radius: 3px;
  padding: 3px 6px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 10px;
  cursor: pointer;
  outline: none;
}

.gh-toolbar select:focus {
  border-color: var(--gh-accent);
}

.gh-toolbar input[type="range"] {
  width: 60px;
  height: 4px;
  accent-color: var(--gh-accent);
  cursor: pointer;
}

.gh-toolbar-spacer {
  flex: 1;
}

.gh-clear-btn {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gh-text);
  background: var(--gh-btn);
  border: 1px solid var(--gh-toolbar-border);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gh-clear-btn:hover {
  background: var(--gh-btn-hover);
  color: var(--gh-text-bright);
}

/* === SKIN SELECTOR === */
.gh-skin-selector {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gh-skin-label {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gh-text);
  text-transform: uppercase;
}

.gh-skin-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}

.gh-skin-btn[data-skin="void"] { background: #b0b8d0; }
.gh-skin-btn[data-skin="nebula"] { background: #dcb050; }
.gh-skin-btn[data-skin="quasar"] { background: #608cf0; }

.gh-skin-btn.active {
  border-color: rgba(255,255,255,0.5);
}

.gh-skin-btn:hover {
  border-color: rgba(255,255,255,0.3);
}

/* === STAGE (canvas area) === */
.gh-stage {
  flex: 1;
  position: relative;
  background: var(--gh-stage);
  cursor: crosshair;
  min-height: 460px;
  overflow: hidden;
}

#gh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* === MOBILE === */
@media (max-width: 768px) {
  .gh-toolbar {
    padding: 6px 10px;
    gap: 8px;
  }

  .gh-brand {
    font-size: 10px;
  }

  .gh-toolbar-group {
    gap: 3px;
  }

  .gh-toolbar input[type="range"] {
    width: 44px;
  }

  .gh-stage {
    min-height: 300px;
  }

  .gh-skin-selector {
    display: none;
  }
}