/* lockcoin — black terminal minimalism (fartcoin school).
   One color pair: near-pure white on pure black. One font: the system mono.
   No images, no webfonts, no gradients. The ASCII is the design. */

:root {
  --bg: #000;
  --fg: #f2f2f2;
  --dim: #5c5c5c;
  --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 lock ---- */

/* lift the lock + wordmark a touch above true center (the hint stays pinned
   to the bottom edge). HEIGHT IS PINNED to exactly one viewport: if the lock +
   wordmark ever overflow, the section must NOT grow — a grown section pushes
   the absolute-bottom hint below the fold (that's how "scroll" went missing). */
#p1 {
  padding-bottom: 16vh;
  height: 100dvh;
  overflow: hidden;
}

#lock {
  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(9px, 2.4vw, 24px);
  line-height: 1.05;
  color: var(--fg);
  white-space: pre;
  user-select: none;
}

/* the music toggle — bare text pinned to the top-right, the brackets ARE the frame */
#sound {
  position: fixed;
  top: 2.5vh;
  right: 2.5vw;
  z-index: 45;
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vw, 13px);
  color: var(--dim);
  background: none;
  border: none;
  padding: 0.3em 0.2em;
  cursor: pointer;
  transition: color 0.15s;
}
#sound:hover { color: var(--fg); }

/* steady label — only the caret (.blink) inside it blinks */
.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 ---- */

#p2 {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 9vh 7vw;
}

#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 .forever { font-weight: 700; color: #2bff66; }   /* terminal green */
#statbox .calink, #statbox .eslink, #statbox .sflink { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#statbox .calink:hover, #statbox .eslink:hover, #statbox .sflink:hover { color: var(--fg); }
/* the terminal cursor's blink is JS-driven (innerHTML rebuilds would restart a
   CSS animation and freeze it in the on-phase); .blink is for STATIC carets
   that are never rebuilt (the scroll hint) */
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }


/* click-ripple rings: each ring char carries a black backing so it COVERS the
   page text it crosses; the text is back as soon as the ring moves on */
#ripples .rip { background: #000; }

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