/* quant canary — black terminal minimalism (Lockcoin lineage).
   One color family: blue and light blue on pure black. One font: the system mono.
   No images, no webfonts, no gradients. The ASCII is the design. */

:root {
  --bg: #000;
  --fg: #4fa8ff;       /* saturated light blue: every symbol on the page */
  --dim: #2d6fc4;      /* deep blue: keys, comments, chrome */
  --hot: #8fd6ff;      /* brightest blue: the one emphasised value */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

html {
  scroll-snap-type: y mandatory;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  overflow-x: hidden;
}

.page {
  min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4vh 2vw;
}

/* ---- page 1: the atom ---- */

/* height pinned to one viewport: the section must never grow, or the
   absolute-bottom hint slides below the fold */
#p1 {
  padding-bottom: 16vh;
  height: 100dvh;
  overflow: hidden;
}

#atom {
  font-family: var(--mono);
  font-size: clamp(5px, 1.15vw, 11px);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--fg);
  user-select: none;
  white-space: pre;
}

#wordmark {
  margin-top: 3.5vh;
  font-family: var(--mono);
  font-size: clamp(7px, 1.2vw, 16px);
  line-height: 1.05;
  color: var(--fg);
  white-space: pre;
  user-select: none;
}

.hint {
  position: absolute;
  bottom: 3.5vh;
  color: var(--fg);
  font-size: clamp(10px, 1.2vw, 13px);
  user-select: none;
}

/* ---- page 2: a terminal session typed from the top-left corner ---- */

/* pages 2 and 3 are pinned to one viewport each: the text is fitted by JS, never scrolled */
#p2, #p3, #p4 {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8vh 7vw;
  height: 100dvh;
  overflow: hidden;
}
#p3 { padding-top: 4vh; padding-bottom: 4vh; }

/* the history sits at the bottom edge of page 2 */
#history {
  margin-top: auto;
  font-family: var(--mono);
  font-size: clamp(10px, 1.45vw, 16px);
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  text-align: left;
}
#history .lbl, #history .dim { color: var(--dim); }
#history .winlink, #history .paylink { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#history .winlink:hover, #history .paylink:hover { color: var(--hot); }

#statbox {
  font-family: var(--mono);
  font-size: clamp(10px, 1.45vw, 16px);
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  user-select: text;
  text-align: left;
}

#statbox .lbl, #statbox .dim { color: var(--dim); }
#statbox .hot { font-weight: 700; color: var(--hot); }
#statbox .calink, #statbox .canlink, #statbox .explink, #statbox .winlink { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#statbox .calink:hover, #statbox .canlink:hover, #statbox .explink:hover, #statbox .winlink:hover { color: var(--hot); }
/* the terminal cursor blink is JS-driven (innerHTML rebuilds restart CSS
   animations); .blink is for static carets that are never rebuilt */
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- page 3: the explainer, same terminal, typed in on first view ---- */

#explain {
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vw, 16px);
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  width: 100%;
  max-width: 1040px;
  user-select: text;
  text-align: left;
}
#explain .h { color: var(--hot); font-weight: 700; }
#explain .dim { color: var(--dim); }

/* ---- page 4: the lock in numbers, same transcript as the status page ---- */
#puzzle {
  font-family: var(--mono);
  font-size: clamp(10px, 1.45vw, 16px);
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  user-select: text;
  text-align: left;
}
#puzzle .lbl, #puzzle .dim { color: var(--dim); }
#puzzle .hot { font-weight: 700; color: var(--hot); }
#puzzle .val { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#puzzle .val:hover { color: var(--hot); }

/* the claim form: the same transcript, with two input lines */
#claim {
  margin-top: 1.55em;
  font-family: var(--mono);
  font-size: clamp(10px, 1.45vw, 16px);
  line-height: 1.55;
  color: var(--fg);
  width: 100%;
  max-width: 980px;
}
#claim .row { display: flex; align-items: baseline; gap: 0; white-space: pre; }
#claim .lbl, #claim .dim { color: var(--dim); }
#claim .lbl { display: inline-block; width: 14ch; }
#claim input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dim);
  outline: none;
  padding: 0 0 2px;
  caret-color: var(--hot);
}
#claim input::placeholder { color: var(--dim); opacity: 1; }
#claim input:focus { border-bottom-color: var(--fg); }
#claim button {
  font: inherit;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-right: 2ch;
}
#claim button:hover { color: var(--hot); }
#claim button:disabled { color: var(--dim); cursor: default; }
#claim .ok { color: var(--hot); }

/* phones: let the text pages grow and scroll normally instead of shrinking to nothing */
@media (max-width: 700px) {
  html { scroll-snap-type: none; }
  #p2, #p3, #p4 { height: auto; min-height: 100dvh; overflow: visible; }
  #history { margin-top: 2em; }
}

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