/* Palette taken from the game's own setup screen: a deep midnight starfield,
   panels outlined in thin gold, azure for anything active, warm cream text.
   Parchment appears only where the game uses it too — the template preview
   card — so the generator's renders sit in the interface the way they do
   in-game. */
:root {
  --night-0: #08101f;
  --night-1: #0e1a2e;
  --night-2: #16243d;
  --night-3: #1e3355;
  --line: rgba(201, 169, 97, 0.34);
  --line-strong: rgba(201, 169, 97, 0.7);
  --gold: #c9a961;
  --gold-bright: #e6ce8e;
  --azure: #3fa9dd;
  --azure-bright: #7cd3f7;
  --cream: #e9e4d6;
  --muted: #8fa0bc;
  --danger: #e08a8e;
  --parchment: #cbb795;
}

html {
  background: var(--night-0);
  color-scheme: dark;
}

body {
  position: relative;
  background:
    radial-gradient(90% 60% at 50% 0%, #1a2c4c 0%, transparent 62%),
    radial-gradient(70% 50% at 85% 90%, #142b4a 0%, transparent 60%),
    var(--night-0);
}

/* A sparse starfield, like the setup screen's backdrop. Fixed and behind
   everything so scrolling does not drag it around. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(233, 228, 214, 0.7), transparent),
    radial-gradient(1px 1px at 27% 62%, rgba(233, 228, 214, 0.5), transparent),
    radial-gradient(1px 1px at 41% 9%, rgba(233, 228, 214, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 58% 34%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 66% 78%, rgba(233, 228, 214, 0.45), transparent),
    radial-gradient(1px 1px at 79% 22%, rgba(233, 228, 214, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 94% 84%, rgba(233, 228, 214, 0.4), transparent),
    radial-gradient(1px 1px at 6% 88%, rgba(233, 228, 214, 0.5), transparent),
    radial-gradient(1px 1px at 35% 92%, rgba(233, 228, 214, 0.35), transparent);
  background-size: 100% 100%;
}

body > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------- surfaces */

/* Panels are translucent navy with a single gold hairline, as in-game. */
.panel {
  background: linear-gradient(180deg, rgba(22, 36, 61, 0.92), rgba(14, 26, 46, 0.92));
  border: 1px solid var(--line);
  border-radius: 6px;
}

.hairline {
  border-color: var(--line);
}

/* Section headings in the game are gold, uppercase and widely tracked. */
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
}

/* The one parchment surface, matching the game's template preview card. */
.parchment {
  background-color: var(--parchment);
  background-image:
    radial-gradient(60% 45% at 22% 18%, rgba(255, 248, 230, 0.24), transparent 70%),
    radial-gradient(55% 40% at 78% 82%, rgba(70, 55, 42, 0.14), transparent 70%);
  color: #2e2418;
  border: 1px solid var(--line-strong);
}

/* -------------------------------------------------------------- controls */

/* In-game buttons are horizontal gradient bars with a gold edge. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream);
  background: linear-gradient(90deg, rgba(30, 51, 85, 0.2), rgba(30, 51, 85, 0.95), rgba(30, 51, 85, 0.2));
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
  cursor: pointer;
}

.btn:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--gold-bright);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(90deg, #2a2416 0%, #6e5626 50%, #2a2416 100%);
  border-color: var(--gold);
  color: #f4e9c9;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(90deg, #352d1b 0%, #8a6c2f 50%, #352d1b 100%);
  color: #fff6dd;
}

/* Reserved for actions that throw work away. */
.btn-danger {
  background: linear-gradient(90deg, rgba(90, 26, 30, 0.25), #7a2226 50%, rgba(90, 26, 30, 0.25));
  border-color: #a34a4e;
  color: #f3d7d8;
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(110, 32, 36, 0.4), #9c2c31 50%, rgba(110, 32, 36, 0.4));
  color: #ffffff;
}

.field {
  background: rgba(8, 16, 31, 0.75);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: var(--cream);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85rem;
}

.field:focus {
  outline: none;
  border-color: var(--azure);
  box-shadow: 0 0 0 1px var(--azure);
}

input[type='range'] {
  accent-color: var(--azure);
}

input[type='checkbox'] {
  accent-color: var(--azure);
}

:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- topology */

.topology-tile img {
  transition: transform 260ms ease;
}

/* Every tile puts its preview flush against the top edge and reserves the same
   room for the title and description, so the text lines up across the whole
   gallery no matter how long an individual name or description is. */
.tile-title {
  min-height: 3.25rem;
}

.tile-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 3.4rem;
}

.topology-tile:hover img,
.topology-tile:focus-visible img {
  transform: scale(1.03);
}

.topology-tile[aria-pressed='true'] {
  border-color: var(--azure);
  box-shadow: 0 0 0 1px var(--azure), 0 0 24px -6px rgba(63, 169, 221, 0.6);
}

.topology-tile[data-available='false'] {
  opacity: 0.34;
}

/* -------------------------------------------------------- variant code */

/* The code bar sticks to the bottom of the wizard while there is wizard left
   to scroll, then gives way to the footer instead of covering it. It needs an
   opaque background of its own — the page scrolls underneath it. */
.spec-bar {
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.97), rgba(8, 16, 31, 0.99));
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 28px -12px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
}

/* Signature: the code assembles as you choose, and a segment that just
   changed lights up in the game's azure before settling. */
.seg {
  border-radius: 3px;
  padding: 1px 2px;
  transition: color 460ms ease, background-color 460ms ease;
}

.seg-changed {
  color: #04121d;
  background-color: var(--azure-bright);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}