/* FLARE — the only styled surface is the start screen. In play the DOM carries
   three elements and none of them contain a word. CONTRACT §6. */

:root {
  --ink: #050608;
  --bone: #d9d2c4;
  --amber: #ffb347;
  --dim: #6d7078;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- in-play overlay: three elements, no text ---- */

#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

#reticle {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: rgba(217, 210, 196, .62);
  box-shadow: 0 0 3px rgba(0, 0, 0, .9);
  transition: none;
}

/* Damage. NOT screen-blend: screen lifts blacks and destroys the contrast the
   whole game depends on (CRITIQUES, readability #7). Multiply darkens the edges
   and leaves the centre readable. */
#frost {
  position: absolute; inset: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 1) 34%,
    rgba(150, 170, 190, .82) 66%,
    rgba(90, 115, 140, .6) 100%);
}

#vignette {
  position: absolute; inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .85) 100%);
}

/* ---- start screen ---- */

#start, #fail {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 44%, #0c0e12 0%, #050608 62%);
}
#start[hidden], #fail[hidden] { display: none; }

.plate { max-width: 46rem; padding: 2rem; text-align: center; }

h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--amber);
  text-shadow: 0 0 42px rgba(255, 179, 71, .30);
}

h2 { margin: 0 0 1rem; font-weight: 600; letter-spacing: .08em; }

.line { margin: 0 0 .7rem; font-size: 1.05rem; line-height: 1.65; }
.dim { color: var(--dim); }

#begin {
  margin: 1.8rem 0 1.2rem;
  padding: .78rem 3.2rem;
  font: inherit; font-size: 1rem; letter-spacing: .22em; text-indent: .22em;
  color: var(--ink); background: var(--bone);
  border: 0; border-radius: 2px; cursor: pointer;
}
#begin:hover { background: var(--amber); }
#begin:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.opt {
  display: block; margin: 0 auto 1.6rem; width: fit-content;
  font-size: .86rem; color: var(--dim); cursor: pointer;
}
.opt input { margin-right: .5rem; accent-color: var(--amber); }

.keys { margin: .5rem 0 0; font-size: .8rem; line-height: 1.9; color: var(--dim); }
.keys b { color: var(--bone); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  h1 { text-shadow: none; }
}