/* hyatts.cc: phosphor-terminal theme layered over Bootstrap 5 (CSS only) */

:root,
[data-bs-theme="dark"] {
  --phosphor: #33ff66;
  --phosphor-dim: #1f9e44;
  --amber: #ffb000;
  --crt-bg: #0a0f0a;
  --crt-panel: #0f170f;

  --bs-body-bg: var(--crt-bg);
  --bs-body-color: #c8f7d0;
  --bs-body-font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --bs-link-color: var(--phosphor);
  --bs-link-color-rgb: 51, 255, 102;
  --bs-link-hover-color: var(--amber);
  --bs-link-hover-color-rgb: 255, 176, 0;
  --bs-border-color: #1d3a22;
  --bs-secondary-color: #7fae88;
}

body {
  background-color: var(--crt-bg);
}

/* Faint scanlines; purely decorative and ignored by pointer events. */
.crt::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  z-index: 1000;
}

.text-amber { color: var(--amber) !important; }
.border-phosphor { border-color: var(--phosphor-dim) !important; }

.brand {
  color: var(--phosphor);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

.nav-link { color: var(--bs-body-color); }
.nav-link:hover,
.nav-link:focus-visible { color: var(--amber); }

.glow {
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.6), 0 0 18px rgba(51, 255, 102, 0.25);
  letter-spacing: 0.04em;
}

.hero-lead { max-width: 42rem; }

.score {
  letter-spacing: 0.2em;
  font-size: 0.9rem;
}

.cursor {
  display: inline-block;
  margin-left: 0.1em;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

.section-title {
  color: var(--phosphor);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--phosphor-dim);
}

.card {
  --bs-card-bg: var(--crt-panel);
  --bs-card-border-color: var(--bs-border-color);
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--phosphor-dim); }

.card-title { color: var(--amber); }

.formula {
  font-size: 1.35rem;
  color: var(--phosphor);
  margin: 0.5rem 0 0.75rem;
}

.terminal {
  background: #000;
  color: var(--phosphor);
  border: 1px solid var(--phosphor-dim);
  border-radius: var(--bs-border-radius);
  padding: 1.25rem;
  overflow-x: auto;
  text-shadow: 0 0 4px rgba(51, 255, 102, 0.5);
}
.terminal code { color: inherit; }

.tips {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--bs-border-color);
}
.tips strong { color: var(--amber); }

/* Resistor bands 0-9 */
.band {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 0.2rem;
  border: 1px solid #333;
}
.b0 { background: #000;    color: #fff; }
.b1 { background: #7b3f00; color: #fff; }
.b2 { background: #d0021b; color: #fff; }
.b3 { background: #f5a623; color: #000; }
.b4 { background: #f8e71c; color: #000; }
.b5 { background: #2e8b2e; color: #fff; }
.b6 { background: #1e5bd6; color: #fff; }
.b7 { background: #8b3fd6; color: #fff; }
.b8 { background: #8e8e8e; color: #000; }
.b9 { background: #fff;    color: #000; }

.quote p {
  font-size: 1.5rem;
  color: var(--amber);
}

.egg {
  max-width: 48rem;
  border: 1px dashed var(--phosphor-dim);
  border-radius: var(--bs-border-radius);
  padding: 1rem 1.25rem;
}
.egg summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
}
.egg summary:hover,
.egg[open] summary { color: var(--phosphor); }

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