/* THE GOD TERMINAL — base: reset, type scale, layers, layout grid, shared components.
 * Colour tokens (--bg, --text, --syn-kw, …) are written to :root by js/palettes.js.
 * The defaults below are Phosphor so the page never flashes unstyled. */

:root {
  --bg: #010603; --bg-2: #031209;
  --panel: rgba(3, 18, 9, 0.66); --panel-strong: rgba(2, 14, 7, 0.92);
  --line: rgba(61, 255, 122, 0.26); --line-bright: rgba(110, 255, 150, 0.85);
  --glow: rgba(61, 255, 122, 0.55); --glow-k: 1;
  --text: #3dff7a; --text-bright: #d2ffe0; --dim: #27a852; --faint: #1a6e36;
  --accent: #b4ff4d; --accent-2: #4dffe1; --accent-3: #fff27a;
  --good: #3dff7a; --warn: #ffd84d; --bad: #ff5f4d; --cursor: #c8ffd8;

  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --font-display: 'VT323', 'JetBrains Mono', ui-monospace, monospace;

  /* Layout (reference: 200px / flexible / 240px at a 16px root). */
  --gap: 0.5rem;
  --left-w: 13.5rem;
  --right-w: 15.5rem;
  --top-h: 2.75rem;
  --bottom-h: 2.75rem;
  --radius: 6px;

  /* Glow helpers — scale with the palette's glow strength. */
  --text-glow: 0 0 calc(7px * var(--glow-k)) var(--glow);
  --box-glow: 0 0 calc(22px * var(--glow-k)) calc(-6px * var(--glow-k)) var(--glow);

  /* z-order of the page layers */
  --z-ambient: 0; --z-rain: 1; --z-app: 10; --z-windows: 30; --z-stage: 40;
  --z-modal: 50; --z-fx: 60; --z-crt: 70; --z-costume: 80; --z-boot: 90; --z-hint: 95;

  color-scheme: dark;
}

/* Touch screens get a taller shortcut strip so its buttons are comfortable tap targets. */
@media (pointer: coarse) { :root { --bottom-h: 3.25rem; } }

/* Root size scales gently with the viewport so a 2560px screen isn't a postage stamp. */
html { font-size: clamp(15px, 0.3vw + 10.5px, 20px); }
@media (max-width: 599px) { html { font-size: 15px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--line-bright); color: var(--bg); }

/* ───────── layers ───────── */
.layer { position: fixed; inset: 0; }
.layer-ambient { z-index: var(--z-ambient); width: 100%; height: 100%; pointer-events: none; }
.layer-rain { z-index: var(--z-rain); width: 100%; height: 100%; pointer-events: none; }
.layer-windows { z-index: var(--z-windows); pointer-events: none; }
.layer-stage { z-index: var(--z-stage); pointer-events: none; }
.layer-modal { z-index: var(--z-modal); pointer-events: none; }
.layer-fx { z-index: var(--z-fx); width: 100%; height: 100%; pointer-events: none; }
.layer-crt { z-index: var(--z-crt); pointer-events: none; }
.layer-costume { z-index: var(--z-costume); }
.layer-boot { z-index: var(--z-boot); }
.layer-hint { z-index: var(--z-hint); pointer-events: none; }
/* Children of pass-through layers opt back in to pointer events. */
.layer-windows > *, .layer-modal > * { pointer-events: auto; }

/* ───────── dashboard grid ───────── */
.app {
  position: fixed; inset: 0;
  z-index: var(--z-app);
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right))
           max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left));
  grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
  grid-template-rows: var(--top-h) minmax(0, 1fr) var(--bottom-h);
  grid-template-areas:
    "top top top"
    "left main right"
    "bottom bottom bottom";
}
.topbar { grid-area: top; min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.sidebar-left { grid-area: left; min-height: 0; }
.main { grid-area: main; min-width: 0; min-height: 0; }
.sidebar-right { grid-area: right; min-height: 0; }
.bottombar { grid-area: bottom; min-width: 0; }

@media (max-width: 899px) {
  .app {
    grid-template-columns: minmax(0, 1fr) var(--right-w);
    grid-template-areas: "top top" "main right" "bottom bottom";
  }
  .sidebar-left { display: none; }
}
@media (max-width: 599px) {
  :root { --gap: 0.375rem; --top-h: 2.5rem; --bottom-h: 3.25rem; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "main" "bottom";
  }
  .sidebar-right { display: none; }
}

/* ───────── panel: translucent glass, thin lit border, HUD corner brackets ───────── */
.panel {
  position: relative;
  /* A faint top-lit sheen makes the glass read as a surface, not a hole. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 2.5rem), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--box-glow), inset 0 0 calc(36px * var(--glow-k)) calc(-18px * var(--glow-k)) var(--glow);
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
  backdrop-filter: blur(5px) saturate(1.15);
}
.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid var(--line-bright);
  pointer-events: none;
  opacity: 0.85;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }
@media (max-width: 599px) {
  .panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Small uppercase section label used inside panels. */
.label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ───────── button: scales up on press (class added by js/main.js on pointerdown) ───────── */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 2.25rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms cubic-bezier(.2, 1.6, .4, 1), border-color 120ms, background-color 120ms, box-shadow 160ms, color 120ms;
  touch-action: manipulation;
}
/* Hover only where a pointer can hover: on touch screens it would stick after every tap. */
@media (hover: hover) {
  .btn:hover { border-color: var(--line-bright); color: var(--text-bright); box-shadow: 0 0 14px -4px var(--glow); }
}
.btn:focus-visible { outline: 2px solid var(--line-bright); outline-offset: 2px; }
.btn.is-pressed, .btn:active {
  transform: scale(1.08);
  border-color: var(--line-bright);
  background: color-mix(in srgb, var(--text) 22%, var(--panel-strong));
  color: var(--text-bright);
  box-shadow: 0 0 22px -2px var(--glow), inset 0 0 12px -4px var(--glow);
}
.btn[aria-pressed="true"], .btn.is-on {
  border-color: var(--line-bright);
  color: var(--text-bright);
  background: color-mix(in srgb, var(--text) 14%, var(--panel-strong));
  box-shadow: 0 0 16px -4px var(--glow);
}
[data-press] { transition: transform 120ms cubic-bezier(.2, 1.6, .4, 1); }
[data-press].is-pressed { transform: scale(1.06); }

/* Keyboard key cap, e.g. <kbd>TAB</kbd> in the shortcut strip. Never below the 0.75rem legibility floor. */
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--line-bright);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: max(0.75rem, 0.8em);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  color: var(--text-bright);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 16%, var(--panel-strong)), color-mix(in srgb, var(--panel-strong) 85%, transparent));
  box-shadow: 0 0 10px -4px var(--glow), inset 0 1px 0 color-mix(in srgb, var(--text-bright) 18%, transparent);
  text-shadow: 0 0 6px var(--glow);
}

/* Visually hidden but available to screen readers / mobile keyboards. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Thin themed scrollbars where scrolling is visible. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Reduced motion: kill decorative loops; components keep short fades. */
@media (prefers-reduced-motion: reduce) {
  .btn, [data-press] { transition-duration: 1ms; }
}
html[data-reduced-motion="on"] .btn.is-pressed { transform: scale(1.04); }