/* =========================================================
   SCRIPTNIGHT // SHARED VISUAL SYSTEM
   Canonical tokens and application-mode primitives
   ========================================================= */

:root {
  color-scheme: dark;

  --sn-bg: #000302;
  --sn-bg-deep: #000100;
  --sn-surface: rgba(3, 17, 13, 0.88);
  --sn-surface-strong: rgba(4, 25, 19, 0.96);
  --sn-surface-soft: rgba(7, 31, 24, 0.62);

  --sn-green: #00ff9d;
  --sn-green-soft-solid: #59ffc0;
  --sn-green-soft: rgba(89, 255, 192, 0.88);
  --sn-green-dim: rgba(0, 255, 157, 0.34);
  --sn-green-faint: rgba(0, 255, 157, 0.1);
  --sn-cyan: #00fff9;
  --sn-cyan-soft: rgba(0, 255, 249, 0.68);
  --sn-cyan-faint: rgba(0, 255, 249, 0.1);
  --sn-pink: #ff2e9e;
  --sn-pink-soft: #ff8ac6;
  --sn-pink-faint: rgba(255, 46, 158, 0.1);
  --sn-danger: #ff4f83;

  --sn-text: #dcfff4;
  --sn-muted: rgba(220, 255, 244, 0.72);
  --sn-faint: rgba(220, 255, 244, 0.55);
  --sn-border: rgba(0, 255, 157, 0.16);
  --sn-border-strong: rgba(0, 255, 157, 0.32);
  --sn-border-cyan: rgba(0, 255, 249, 0.26);

  --sn-radius-sm: 8px;
  --sn-radius: 14px;
  --sn-radius-lg: 22px;
  --sn-font-display: "Orbitron", system-ui, sans-serif;
  --sn-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sn-text-micro: 0.625rem;
  --sn-text-label: 0.6875rem;
  --sn-touch-target: 44px;
  --sn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sn-shadow-panel: 0 28px 90px rgba(0, 0, 0, 0.46);
  --sn-shadow-focus: 0 0 0 1px rgba(0, 255, 249, 0.18), 0 0 30px rgba(0, 255, 249, 0.08);

  /* Permanent project-shell measurements shared by Nova and Signal Grid. */
  --sn-header-height: 76px;
  --sn-header-content-width: 1200px;
  --sn-header-gutter: 24px;
  --sn-header-background: rgba(0, 5, 4, 0.76);

  /* Compatibility aliases used by the existing public, game, and console modes. */
  --bg: var(--sn-bg);
  --bg-deep: var(--sn-bg-deep);
  --void: var(--sn-bg);
  --ink: var(--sn-bg);
  --surface: var(--sn-surface);
  --surface-strong: var(--sn-surface-strong);
  --surface-soft: var(--sn-surface-soft);
  --panel: var(--sn-surface);
  --panel-strong: var(--sn-surface-strong);
  --green: var(--sn-green);
  --green-soft: var(--sn-green-soft);
  --green-dim: var(--sn-green-dim);
  --green-faint: var(--sn-green-faint);
  --cyan: var(--sn-cyan);
  --cyan-soft: var(--sn-cyan-soft);
  --cyan-faint: var(--sn-cyan-faint);
  --pink: var(--sn-pink);
  --pink-soft: var(--sn-pink-soft);
  --pink-faint: var(--sn-pink-faint);
  --danger: var(--sn-danger);
  --text: var(--sn-text);
  --muted: var(--sn-muted);
  --faint: var(--sn-faint);
  --line: var(--sn-border);
  --line-strong: var(--sn-border-strong);
  --border: var(--sn-border);
  --border-strong: var(--sn-border-strong);
  --radius-sm: var(--sn-radius-sm);
  --radius: var(--sn-radius);
  --radius-lg: var(--sn-radius-lg);
  --display: var(--sn-font-display);
  --mono: var(--sn-font-mono);
  --font-display: var(--sn-font-display);
  --font-mono: var(--sn-font-mono);
  --ease-out: var(--sn-ease-out);
  --shadow: var(--sn-shadow-panel);
}

.sn-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Canonical close control for ScriptNight side drawers. */
.sn-drawer-close {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: var(--sn-touch-target);
  min-width: var(--sn-touch-target);
  height: var(--sn-touch-target);
  min-height: var(--sn-touch-target);
  flex: 0 0 var(--sn-touch-target);
  padding: 0;
  appearance: none;
  border: 1px solid rgba(0, 255, 157, 0.22);
  border-radius: var(--sn-radius-sm);
  color: var(--sn-green-soft-solid);
  background: rgba(0, 255, 157, 0.04);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.sn-drawer-close:hover,
.sn-drawer-close:focus-visible {
  border-color: rgba(0, 255, 249, 0.48);
  color: var(--sn-cyan);
  background: rgba(0, 255, 249, 0.055);
  box-shadow: var(--sn-shadow-focus);
}

.sn-drawer-close:focus-visible {
  outline: 2px solid var(--sn-cyan);
  outline-offset: 2px;
}

.sn-drawer-close > .sn-drawer-close-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  color: inherit;
}

.sn-drawer-close-icon::before,
.sn-drawer-close-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.sn-drawer-close-icon::before { transform: rotate(45deg); }
.sn-drawer-close-icon::after { transform: rotate(-45deg); }

@media (forced-colors: active) {
  .sn-drawer-close {
    border-color: ButtonText;
    color: ButtonText;
  }
}

/* Compact project navigation for focused game screens. */
.sn-mode-nav {
  position: relative;
  flex: 0 0 auto;
}

.sn-mode-nav > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-sm);
  color: var(--sn-muted);
  background: rgba(0, 255, 157, 0.035);
  font-family: var(--sn-font-mono);
  font-size: var(--sn-text-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  list-style: none;
  cursor: pointer;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.sn-mode-nav > summary::-webkit-details-marker { display: none; }

.sn-mode-nav > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--sn-green);
  box-shadow: 0 0 10px var(--sn-green);
}

.sn-mode-nav > summary:hover,
.sn-mode-nav > summary:focus-visible,
.sn-mode-nav[open] > summary {
  color: var(--sn-cyan);
  border-color: rgba(0, 255, 249, 0.46);
  background: rgba(0, 255, 249, 0.055);
  box-shadow: var(--sn-shadow-focus);
}

.sn-mode-nav > summary:focus-visible {
  outline: 2px solid var(--sn-cyan);
  outline-offset: 3px;
}

.sn-mode-nav-panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(250px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--sn-border-strong);
  border-radius: var(--sn-radius);
  background:
    linear-gradient(145deg, rgba(9, 38, 29, 0.58), rgba(0, 7, 5, 0.98)),
    var(--sn-surface-strong);
  box-shadow: var(--sn-shadow-panel);
  backdrop-filter: blur(22px) saturate(130%);
}

.sn-mode-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--sn-radius-sm);
  color: var(--sn-muted);
  font-family: var(--sn-font-mono);
  font-size: var(--sn-text-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}

.sn-mode-nav-panel a::before {
  content: "//";
  margin-right: 9px;
  color: var(--sn-green);
}

.sn-mode-nav-panel a:hover,
.sn-mode-nav-panel a:focus-visible,
.sn-mode-nav-panel a[aria-current="page"] {
  color: var(--sn-text);
  background: rgba(0, 255, 157, 0.07);
}

.sn-mode-nav-panel a:focus-visible {
  outline: 2px solid var(--sn-cyan);
  outline-offset: -2px;
}

@media (max-width: 520px) {
  .sn-mode-nav > summary {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .sn-mode-nav > summary::before {
    width: 15px;
    height: 10px;
    margin: 0;
    border: solid var(--sn-green);
    border-width: 1px 0;
    border-radius: 0;
    background: linear-gradient(var(--sn-green), var(--sn-green)) center / 100% 1px no-repeat;
    box-shadow: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .sn-mode-nav > summary,
  .sn-mode-nav-panel a {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  .sn-mode-nav > summary,
  .sn-mode-nav-panel,
  .sn-mode-nav-panel a {
    border-color: CanvasText;
  }

  .sn-mode-nav > summary:focus-visible,
  .sn-mode-nav-panel a:focus-visible {
    outline-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-mode-nav *,
  .sn-mode-nav *::before,
  .sn-mode-nav *::after {
    transition-duration: 0.001ms !important;
  }
}