/* ============================================================
   UNTITLED — waitlist control unit
   Rebuilt to the reference screenshot's language: a single
   centered CRT screen. Near-black plum glass, dusty-pink
   striped mark + wordmark, bracket menu, classified footer.
   Type: VT323 (self-hosted). Motion token: .14s
   cubic-bezier(.23,1,.32,1), active translateY(1px).
   Focus ring token: rgb(255,76,152) 3px / 2px offset.
   ============================================================ */

@font-face {
  font-family: "VT323";
  src: url("fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --glass: #0a0409;
  --ink: #f5e3ec;
  --pink: #d98cb3;
  --pink-deep: #b96f92;
  --primary: #d30b5d;
  --dim: #9b7484;
  --line: rgba(217, 140, 179, 0.35);
  --error: #ff6b9d;

  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 0.14s;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--glass);
  color: var(--ink);
  font-family: "VT323", "Courier New", monospace;
  font-size: 20px;
  line-height: 1.35;
  overflow-x: hidden;
}

/* --- CRT glass: scanlines + vignette over everything --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

::selection { background: var(--pink); color: var(--glass); }

:focus-visible {
  outline: rgb(255, 76, 152) solid 3px;
  outline-offset: 2px;
}

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

.screen {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: var(--s12) var(--s6);
  animation: power-on 0.5s var(--ease) both;
}
@keyframes power-on {
  from { opacity: 0; transform: scale(0.995); }
  to { opacity: 1; transform: scale(1); }
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 640px;
}

/* ---------- mark + wordmark ---------- */

.mark {
  width: clamp(150px, 26vw, 220px);
  height: auto;
  filter: drop-shadow(0 0 14px rgba(211, 11, 93, 0.35));
}

.wordmark {
  margin: var(--s4) 0 0;
  font-size: clamp(76px, 15vw, 132px);
  font-weight: 700;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: 0.01em;
  transform: skewX(-4deg);
  background: repeating-linear-gradient(
    180deg,
    #e7aec9 0px, #e7aec9 4px,
    #c07b9c 4px, #c07b9c 8px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.tagline {
  margin: var(--s3) 0 0;
  color: var(--dim);
  font-size: clamp(15px, 2.6vw, 19px);
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* optically re-centers letterspaced text */
}

/* ---------- bracket menu / buttons ---------- */

.menu {
  margin-top: var(--s12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

.bracket {
  font: inherit;
  font-size: clamp(20px, 3.4vw, 26px);
  letter-spacing: 0.1em;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bracket:hover {
  background: var(--pink);
  color: #160509;
}
.bracket:active { transform: translateY(1px); }
.bracket-dim { color: var(--dim); }
.bracket-dim:hover { color: #160509; }
.bracket-small { font-size: 20px; }

.menu-note {
  margin: var(--s2) 0 0;
  color: var(--error);
  font-size: 19px;
  letter-spacing: 0.08em;
}
.menu-note[hidden] { display: none; }

/* ---------- join form ---------- */

.join, .success {
  margin-top: var(--s12);
  width: 100%;
  max-width: 520px;
}
.join[hidden], .success[hidden] { display: none; }

.join-label {
  display: block;
  color: var(--dim);
  font-size: 19px;
  letter-spacing: 0.3em;
  margin-bottom: var(--s3);
}

.prompt-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  border-bottom: 2px solid var(--line);
  padding-bottom: var(--s2);
}
.prompt-row:focus-within { border-color: var(--pink); }
.prompt-sign { color: var(--pink); font-size: 26px; }

.prompt-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 26px;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  caret-color: var(--pink);
}
.prompt-row input::placeholder { color: rgba(155, 116, 132, 0.6); }

.form-error {
  margin: var(--s3) 0 0;
  color: var(--error);
  font-size: 19px;
  letter-spacing: 0.06em;
}
.form-error[hidden] { display: none; }

.join-actions, .success-actions {
  margin-top: var(--s6);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3);
}

.join-note {
  margin: var(--s4) 0 0;
  color: var(--dim);
  font-size: 18px;
}

/* ---------- success ---------- */

.success-big {
  margin: 0;
  font-size: clamp(32px, 6vw, 44px);
  letter-spacing: 0.04em;
  color: var(--pink);
}
.success-meta {
  margin: var(--s3) 0 var(--s6);
  color: var(--dim);
  font-size: 21px;
}
.success-meta strong { color: var(--ink); font-weight: 400; }

.ref-label {
  display: block;
  color: var(--dim);
  font-size: 17px;
  letter-spacing: 0.3em;
  margin-bottom: var(--s2);
}
.ref-row {
  display: flex;
  gap: var(--s3);
  align-items: stretch;
}
.ref-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 19px;
  color: var(--ink);
  background: rgba(217, 140, 179, 0.07);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
}

/* ---------- footer ---------- */

.foot {
  margin-top: var(--s12);
}
.foot p { margin: 0; }
.foot-line {
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.foot-dim {
  color: var(--dim);
  font-size: 18px;
}

/* ---------- sound chip ---------- */

.sound-chip {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  font: inherit;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--dim);
  background: rgba(16, 6, 12, 0.88);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sound-chip:hover { color: var(--ink); border-color: var(--pink); }
.sound-chip:active { transform: translateY(1px); }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .screen { padding: var(--s8) var(--s4); }
  .menu, .join, .success, .foot { margin-top: var(--s8); }
  .ref-row { flex-direction: column; }
  .ref-row .bracket { align-self: center; }
  .sound-chip { left: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  * { transition: none !important; }
}