/* The game's display face ("cyber" there too): Orbitron, SIL Open Font License. */
@font-face {
  font-family: "cyber";
  src: url("../fonts/cyber.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Same palette as the game's css/style.css. */
:root {
  --bg: #030309;
  --panel-bg: rgba(10, 10, 28, 0.85);
  --border: rgba(0, 223, 255, 0.25);
  --cyan: #00DFFF;
  --pink: #FF1493;
  --green: #39FF14;
  --gold: #FFB300;
  --red: #FF0000;
  /* the operator's colour: js/site.js changes both when the operator does */
  --op: #FF1493;
  --op-rgb: 255, 20, 147;
  --text: #d1d5eb;
  --text-dim: #737b9e;
  --gutter: clamp(22px, 4vw, 54px);
  --edge: 6px;
  --mono: "Source Code Pro", Consolas, Monaco, monospace;
  --display: "cyber", "Source Code Pro", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* The operator-coloured edge of the game's viewport. The scene is clipped to the same box,
   so nothing is drawn across the line or outside it. */
.frame {
  position: absolute;
  inset: var(--edge);
  border: 1px solid rgba(var(--op-rgb), 0.4);
  border-radius: 8px;
  box-shadow: inset 0 0 26px rgba(var(--op-rgb), 0.10);
  pointer-events: none;
  z-index: 3;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* The words on top, the street below them. The street always has room of its own, so on a short
     screen the page grows a little and scrolls where it would otherwise crush the buildings flat. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

#scene {
  position: absolute;
  inset: var(--edge);
  width: calc(100% - 2 * var(--edge));
  height: calc(100% - 2 * var(--edge));
  display: block;
  border-radius: 8px;
}

/* CRT scan lines over the scene, under the text. */
.hero::after {
  content: "";
  position: absolute;
  inset: var(--edge);
  border-radius: 8px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 1;
}

.bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px var(--gutter) 0;
  text-transform: uppercase;
  pointer-events: none;
}

.brand {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--text);
}

.status {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  white-space: nowrap;
}

.bar-right { display: flex; align-items: center; gap: 18px; }

/* The one control in the bar: the tune plays only once it has been asked for. */
.sound {
  pointer-events: auto;
  padding: 5px 10px;
  background: rgba(3, 3, 9, 0.6);
  border: 1px solid rgba(209, 213, 235, 0.3);
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
}
.sound:hover { color: var(--text); border-color: rgba(209, 213, 235, 0.6); }
.sound:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sound[aria-pressed="true"] { color: var(--op); border-color: var(--op); }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  background: var(--green);
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.7);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(4px, 1.5vh, 16px) var(--gutter) 0;
  /* clicks fall through to the street, except on the words themselves */
  pointer-events: none;
}

.hero-copy > * { pointer-events: auto; }

.scene-room {
  flex: 1 0 auto;
  min-height: max(230px, min(300px, 44vh));
  pointer-events: none;
}

/* Keeps the copy readable where the skyline climbs behind it. */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -40px auto -60px -40px;
  width: min(100vw, 900px);
  background: radial-gradient(ellipse at 30% 45%, rgba(3, 3, 9, 0.82) 0%, rgba(3, 3, 9, 0.55) 45%, rgba(3, 3, 9, 0) 72%);
  z-index: -1;
  pointer-events: none;
}

.boot {
  width: max-content;
  max-width: 100%;
  /* five lines: the four boot lines and the cursor's, so the block never grows as it types */
  min-height: 7em;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.boot .cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--text-dim);
  animation: blink 1.06s steps(1) infinite;
}

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

.wordmark {
  /* As wide as its own text, so the reveal's clip never cuts the title short. */
  width: max-content;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, min(9.5vw, 12.5vh), 7rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: #EAFBFF;
  text-shadow: 0 0 22px rgba(0, 223, 255, 0.55), 0 0 2px rgba(0, 223, 255, 0.9);
  white-space: nowrap;
  /* Negative insets leave room for the glow. */
  clip-path: inset(-0.4em);
  transition: clip-path 0.7s steps(14);
}

.tagline {
  width: max-content;
  max-width: 100%;
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(0.8rem, 1.7vw, 1.05rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--op);
}

.blurb {
  margin-top: 16px;
  max-width: 68ch;
  color: var(--text);
}

.genre {
  width: max-content;
  max-width: 100%;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tagline, .blurb, .genre { transition: opacity 0.5s linear 0.45s; }

/* While the boot lines type, the title waits (js/site.js adds and removes this). */
.hero.booting .wordmark { clip-path: inset(-0.4em 100% -0.4em -0.4em); }
.hero.booting .tagline,
.hero.booting .blurb,
.hero.booting .genre { opacity: 0; }

/* The game's HEAT meter, sitting on the street. */
.hud {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--edge) + 8px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hud-place { color: var(--text); margin-right: 6px; }

.hud-meter {
  width: 96px;
  height: 6px;
  border: 1px solid rgba(209, 213, 235, 0.35);
}

.hud-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold);
}

.hud-seen { color: var(--red); visibility: hidden; }
.hud.seen .hud-seen { visibility: visible; }
.hud.seen .hud-fill { background: var(--red); }

/* ─── Below the fold ───────────────────────────────────────────────────── */
.below {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 88px) var(--gutter);
  display: grid;
  gap: 28px;
}

.cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card,
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 24px;
}

.card h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.card-tag {
  margin: 6px 0 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Each in its own colours from the game: Keystone's red, Overwatch's grey. */
.card-keystone { border-color: rgba(196, 18, 48, 0.55); }
.card-keystone h2 { color: #E0203F; }
.card-overwatch { border-color: rgba(110, 110, 110, 0.7); }
.card-overwatch h2 { color: var(--text); }
.card-nullgrid h2 { color: var(--cyan); }

/* the contact panel takes the operator's colour, like its heading, so it is not a second cyan box */
.panel { border-color: rgba(var(--op-rgb), 0.45); }

.panel h2 {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--op);
}

.dir { margin-top: 14px; display: grid; gap: 8px; }
.dir div { display: flex; flex-wrap: wrap; gap: 4px 20px; }

.dir dt {
  width: 84px;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dir dd { overflow-wrap: anywhere; }

.foot {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) 44px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .status { display: none; }
  .bar { padding-top: 22px; }
  .brand { font-size: 12px; letter-spacing: 0.16em; }
  .status { letter-spacing: 0.1em; }
  .hud-place { display: none; }
}

@media (max-width: 900px) and (min-width: 641px) {
  .cards { grid-template-columns: 1fr; }
}

/* A short screen (a phone on its side): the boot lines go and the copy closes up, so the title and
   the street share the first screen. */
@media (max-height: 560px) {
  .bar { padding-top: 14px; }
  .boot { display: none; }
  .hero-copy { padding-top: 6px; }
  .wordmark { margin-top: 0; font-size: clamp(1.9rem, min(8vw, 15vh), 3.4rem); }
  .tagline { margin-top: 6px; }
  .blurb { margin-top: 8px; max-width: 46ch; font-size: 13px; line-height: 1.5; }
  .genre { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .tagline, .blurb, .genre { transition: none; }
  .boot .cursor { animation: none; }
  .hud { display: none; }
}