/* ============================================================================
   CRT LOGIN BOX — on the dev site since 2026-09-23 (built on branch crt-look)

   Patrick's calls, 2026-09-23:
   - The site-wide terminal restyle is dropped; the rest of the site is back
     to its original look. Only the login box is restyled.
   - Animated hologram effects (power-on flash, glitch, pulsing glow,
     sweeping band) and added sound effects were "cheesy" and are gone.
   - Then: make the box itself more CRT and more hologram, STILL, in Command
     Center's style: see-through with a glow, phosphor text that glows in its
     own colour, heavier type (the field labels "look kind of thin"), terminal
     fields instead of plain website boxes. js/crt-login.js adds the text
     descramble he kept.

   Every rule is scoped to the login box. NOT touched: .login-gate (the
   full-screen layer), the vault background video, and the intro's opacity
   and timing classes (no rule here sets opacity, a transition or an
   animation on the card). Delete this file, the font links and the
   crt-login.js script tag in index.html, and the login box is back too.

   Palette = Command Center's: green #7dff9b main, cyan #89ddff labels,
   blue #82aaff for the welcome message, red stays for errors only.
   ========================================================================= */

/* ---- 0. Fonts, served by the site itself -----------------------------------
   Latin-only copies of IBM Plex Mono and VT323 (both open-licensed), in
   public/fonts. Loading them from Google held up the page's first frame by
   ~100 ms on every load, which added to the reload lag Patrick saw. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexMono-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexMono-700.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/VT323-400.woff2") format("woff2"); }

/* ---- 1. The box: a see-through phosphor pane with a double monitor frame --
   Slightly transparent so a hint of the vault shows through, lit from inside
   with a green glow, and framed twice: an outer bright line and an inner dim
   one, like the bezel of an old terminal.
   ⛔ NO BACKDROP BLUR (removed 2026-09-23). The vault background is a 4K
   video paused on frame 1. A backdrop blur makes Safari re-read that frame to
   blur what sits behind the box, and every time the box changes size or
   shape (opening, messages swapping) it redoes that from the 4K frame, frame
   after frame. Patrick saw the background black out mid-animation on the dev
   site; this is the prime suspect. The site's own box has a blur too, but it
   never moves. Do not put the blur back without re-testing in his Safari. */
.login-gate-card,
.crt-auth-modal {
  --crt-green: #7dff9b;
  --crt-green-soft: #b4ffc6;
  --crt-cyan: #89ddff;
  --crt-blue: #82aaff;
  --crt-dim: #8fbfa0;
  --crt-ink: #050806;
  --crt-glow: 0 0 6px rgba(125, 255, 155, 0.55);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(125, 255, 155, 0.10), transparent 70%),
    rgba(4, 14, 9, 0.7);
  backdrop-filter: none;           /* overrides the site's blur(12px); see the note above */
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(125, 255, 155, 0.75);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 3px rgba(4, 14, 9, 0.55),
    inset 0 0 0 4px rgba(125, 255, 155, 0.22),
    inset 0 0 40px rgba(125, 255, 155, 0.10),
    0 0 18px rgba(125, 255, 155, 0.35),
    0 0 60px rgba(125, 255, 155, 0.12),
    0 12px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Scan lines inside the box only (never over the vault background). */
.login-gate-card::after,
.crt-auth-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 3px);
}

/* ---- 2. Title bar: the box's own heading, shown as a terminal title -----
   Its text already changes per mode (VERIFY IDENTITY, RESET PASSWORD, NEW
   PASSWORD), and the site hides it with an inline style once the status
   messages start, which still wins over this rule. The box keeps 24px of
   padding at every screen size (measured), so the -24px bleed fits. */
.login-gate-heading,
.crt-auth-heading {
  display: block;
  align-self: stretch;
  margin: -24px -24px 20px;
  padding: 8px 12px 7px;
  /* Warning red (Patrick, 2026-09-23: red, then blue, then red again; the
     links stay blue): "verify your identity or you're gonna be in trouble". */
  background: rgba(255, 59, 78, 0.16);
  border-bottom: 1px solid rgba(255, 59, 78, 0.6);
  font-family: "VT323", "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #ff5d6e;
  text-shadow: 0 0 8px rgba(255, 59, 78, 0.8), 0 0 18px rgba(255, 59, 78, 0.35);
  text-align: left;
}

.login-gate-heading::before, .crt-auth-heading::before { content: "> "; color: #c7727d; }
.login-gate-heading::after, .crt-auth-heading::after { content: "_"; animation: crtCaret 1.1s steps(1) infinite; }
@keyframes crtCaret { 50% { opacity: 0; } }

/* ---- 3. Field labels: heavier, brighter, glowing ------------------------- */
.login-gate .auth-field label,
.crt-auth-modal .auth-field label {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--crt-cyan);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-shadow: 0 0 6px rgba(137, 221, 255, 0.6);
}

.login-gate .auth-field label::before,
.crt-auth-modal .auth-field label::before { content: "> "; color: var(--crt-dim); text-shadow: none; }

/* ---- 4. Fields: see-through terminal input lines, glowing green type ----- */
.login-gate .auth-field input,
.crt-auth-modal .auth-field input {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  background: rgba(125, 255, 155, 0.06);
  border: 1px solid rgba(125, 255, 155, 0.4);
  border-radius: 0;
  color: var(--crt-green-soft);
  text-shadow: var(--crt-glow);
  caret-color: var(--crt-green);
  box-shadow: inset 0 0 12px rgba(125, 255, 155, 0.06);
}

.login-gate .auth-field input::placeholder,
.crt-auth-modal .auth-field input::placeholder {
  color: rgba(125, 255, 155, 0.42);
  text-shadow: none;
}

.login-gate .auth-field input:focus,
.crt-auth-modal .auth-field input:focus {
  border-color: var(--crt-green);
  background: rgba(125, 255, 155, 0.09);
  box-shadow: 0 0 0 1px var(--crt-green), 0 0 16px rgba(125, 255, 155, 0.3), inset 0 0 12px rgba(125, 255, 155, 0.1);
  outline: none;
}

/* ---- 5. Buttons: the two he liked, a touch more lit --------------------- */
.login-gate .auth-guest-btn,
.crt-auth-modal .auth-guest-btn {
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(125, 255, 155, 0.07);
  border: 1px solid var(--crt-green);
  border-radius: 0;
  color: var(--crt-green);
  text-shadow: var(--crt-glow);
  box-shadow: 0 0 12px rgba(125, 255, 155, 0.25), inset 0 0 12px rgba(125, 255, 155, 0.08);
}

.login-gate .auth-guest-btn:hover:not(:disabled),
.crt-auth-modal .auth-guest-btn:hover:not(:disabled) {
  background: var(--crt-green);
  color: var(--crt-ink);
  text-shadow: none;
  box-shadow: 0 0 20px rgba(125, 255, 155, 0.55);
}

.login-gate .auth-submit-btn,
.crt-auth-modal .auth-submit-btn {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--crt-green);
  border: 1px solid var(--crt-green);
  border-radius: 0;
  color: var(--crt-ink);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(125, 255, 155, 0.45);
}

.login-gate .auth-submit-btn:hover:not(:disabled),
.crt-auth-modal .auth-submit-btn:hover:not(:disabled) {
  background: var(--crt-green-soft);
  box-shadow: 0 0 26px rgba(125, 255, 155, 0.65);
}

/* ---- 6. Separator, small print and links: terminal, not web ------------- */
.login-gate .gate-separator::before,
.crt-auth-modal .gate-separator::before {
  background: none;
  border-top: 1px dashed rgba(125, 255, 155, 0.4);
  height: 0;
  /* Break the line around the words instead of hiding it behind a solid
     strip, which showed as a dark patch on the see-through box. */
  -webkit-mask: linear-gradient(to right, #000 calc(50% - 64px), transparent calc(50% - 64px), transparent calc(50% + 64px), #000 calc(50% + 64px));
  mask: linear-gradient(to right, #000 calc(50% - 64px), transparent calc(50% - 64px), transparent calc(50% + 64px), #000 calc(50% + 64px));
}

.login-gate .gate-separator span,
.crt-auth-modal .gate-separator span {
  background: none;
  font-weight: 600;
  color: var(--crt-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-shadow: 0 0 5px rgba(125, 255, 155, 0.35);
}

.login-gate .gate-toggle-text,
.crt-auth-modal .gate-toggle-text,
.login-gate .gate-forgot-text,
.crt-auth-modal .gate-forgot-text {
  font-weight: 500;
  color: var(--crt-dim);
  text-shadow: 0 0 5px rgba(125, 255, 155, 0.3);
}

/* Links read as bracketed terminal commands. */
/* Blue, matching the title bar (Patrick, 2026-09-23). */
.login-gate .gate-toggle-link,
.crt-auth-modal .gate-toggle-link {
  font-weight: 600;
  color: var(--crt-blue);
  text-shadow: 0 0 6px rgba(130, 170, 255, 0.65);
  text-decoration: none;
}

.login-gate .gate-toggle-link::before,
.crt-auth-modal .gate-toggle-link::before { content: "[ "; }
.login-gate .gate-toggle-link::after,
.crt-auth-modal .gate-toggle-link::after { content: " ]"; }
.login-gate .gate-toggle-link:hover,
.crt-auth-modal .gate-toggle-link:hover { color: #b3c9ff; text-decoration: none; }

/* Errors keep their red: red only ever means something is wrong. */
.login-gate .auth-error,
.crt-auth-modal .auth-error { border-radius: 0; font-family: inherit; font-weight: 600; }

/* ---- 7. Status messages after entering: square frame, the pixel font ----
   The flicker and pulse animations are the site's own and are kept. */
.login-gate .gate-status,
.login-gate .gate-status::after {
  border-radius: 0;
}

.login-gate .gate-status {
  border-color: var(--crt-green);
  background: rgba(125, 255, 155, 0.07);
  box-shadow: 0 0 14px rgba(125, 255, 155, 0.25), inset 0 0 18px rgba(125, 255, 155, 0.08);
}

.login-gate .gate-status.status-welcome-border {
  border-color: var(--crt-blue);
  background: rgba(130, 170, 255, 0.07);
  box-shadow: 0 0 14px rgba(130, 170, 255, 0.25), inset 0 0 18px rgba(130, 170, 255, 0.08);
}

/* The two messages (option C of three compared side by side, 2026-09-23;
   Patrick found the pixel-font versions "bland" and "wimpy"):
   - a small, widely spaced label line on top ("ARCAMAX LOGIN" / "WELCOME"),
   - one big bold glowing line under it ("CONFIRMED" / "TO THE LODGE"),
   - corner brackets on the frame,
   - a thin bar that fills while the message is on screen.
   The site sends "ARCAMAX LOGIN CONFIRMED" on one line; js/crt-login.js
   breaks it before the last word so both messages have the same two levels.
   Same words, never changed. */
.login-gate .gate-status-line,
.login-gate .gate-tap-prompt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  /* Break only at the line break in the text, never mid-scramble: the
     scramble's symbols give the browser extra places to wrap, which made the
     big line jump between one and two lines while it decoded. */
  white-space: pre !important;   /* the site sets pre-line inline on the welcome line */
}

.login-gate .gate-status-line::first-line {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--crt-cyan);
  text-shadow: 0 0 6px rgba(137, 221, 255, 0.6);
}

.login-gate .gate-status-line {
  color: var(--crt-green);
  text-shadow: 0 0 10px rgba(125, 255, 155, 0.85), 0 0 24px rgba(125, 255, 155, 0.4);
}

.login-gate .gate-status-line.status-welcome {
  color: var(--crt-blue);
  text-shadow: 0 0 10px rgba(130, 170, 255, 0.85), 0 0 24px rgba(130, 170, 255, 0.4);
}

/* The loading bar, under the text: colour stripes racing along while it
   fills over the time each message is on screen (2 s, then 3 s). The
   percentage and data streams around it come from js/crt-login.js. */
.login-gate .gate-status-line::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 12px;
  background: repeating-linear-gradient(90deg, #7dff9b 0 7px, transparent 7px 9px, #89ddff 9px 16px, transparent 16px 18px, #ffcb6b 18px 22px, transparent 22px 24px);
  height: 5px;
  box-shadow: 0 0 10px rgba(125, 255, 155, 0.45);
  /* Fills in chunky steps, like an old segmented loading bar, rather than
     gliding. Measured 2026-09-23: anything inside the see-through box that
     changes every frame makes the browser redraw the whole blurred, glowing
     box every frame; a smooth bar (however it was animated) halved the frame
     rate while the messages were up (53 fps vs 83 without it). So the bar is
     set by js/crt-login.js on the same clock as the data streams (about 12
     changes a second, all in one redraw) through --crt-fill (0 to 1). */
  transform: scaleX(var(--crt-fill, 0));
  transform-origin: 0 50%;
}

.login-gate .gate-status-line.status-welcome::after {
  background: repeating-linear-gradient(90deg, #82aaff 0 7px, transparent 7px 9px, #c792ea 9px 16px, transparent 16px 18px, #ff6ea8 18px 22px, transparent 22px 24px);
  box-shadow: 0 0 10px rgba(130, 170, 255, 0.45);
}

/* The message line spans the window and centres its text. ⚠️ Chrome sizes a
   shrink-to-fit line using its ::first-line font (the small label), so the
   big line came out narrower than its own text and sat off-centre (measured
   2026-09-23: box 228px, text 289px; Safari was right). Stretching sidesteps
   the measurement; the bar below is then set to 74%, its width in Safari. */
.login-gate .gate-status-line { align-self: stretch; text-align: center; }
.login-gate .gate-status-line::after { width: 74%; margin-left: auto; margin-right: auto; }

/* The message window stacks: data stream, text, bar, readout. */
.login-gate .gate-status { flex-direction: column; gap: 6px; }

/* Data streams: tiny hex and symbols scrolling fast in several colours. */
.login-gate .crt-feed {
  align-self: stretch;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  opacity: 0.85;
}

.login-gate .crt-feed span { margin-right: 0.7em; }
.login-gate .crt-c1 { color: #89ddff; }
.login-gate .crt-c2 { color: #ffcb6b; }
.login-gate .crt-c3 { color: #ff6ea8; }
.login-gate .crt-c4 { color: #7dff9b; }
.login-gate .crt-c5 { color: #c792ea; }
.login-gate .crt-c0 { color: #5f7f6d; }

/* The readout under the bar: spinner, percentage, a changing hex code. */
.login-gate .crt-readout { display: flex; gap: 0.8em; font-size: 0.7rem; opacity: 1; }
.login-gate .crt-readout .crt-pct { color: #ffcb6b; font-weight: 700; text-shadow: 0 0 6px rgba(255, 203, 107, 0.7); }
.login-gate .crt-readout .crt-spin { color: #ff6ea8; font-weight: 700; text-shadow: 0 0 6px rgba(255, 110, 168, 0.7); }

/* Corner brackets inside the message frame. */
.login-gate .gate-status::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  color: #b4ffc6;
  background:
    linear-gradient(currentColor, currentColor) top left / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 2px 12px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 2px 12px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 2px 12px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 2px 12px no-repeat;
}

.login-gate .gate-status.status-welcome-border::before { color: #b3c9ff; }

.login-gate .gate-status { padding: 18px 16px 16px; }

@media (max-width: 480px), (max-height: 500px) {
  .login-gate .gate-status-line { font-size: 1.35rem; }
}

/* ---- 7b. The two message windows are ~1.6x bigger ----------------------
   Patrick, 2026-09-23: "those last two cards, the ones that come after you
   log in... need to be significantly bigger. At least 50% bigger." The site
   adds .status-mode to the login screen when the messages start, so this
   only touches the "ARCAMAX LOGIN CONFIRMED" and "WELCOME TO THE LODGE"
   windows, never the login box. Everything scales together: the window,
   both text lines, bar, data rows, readout, corner brackets, padding.
   Phone sizes are capped so "TO THE LODGE" still fits on one line (the big
   line never wraps; see white-space: pre above). */
.login-gate.status-mode .login-gate-card { max-width: 512px; padding: 32px; }
.login-gate.status-mode .gate-status { padding: 28px 26px 24px; gap: 10px; }
.login-gate.status-mode .gate-status-line { font-size: 2.35rem; }
.login-gate.status-mode .gate-status-line::first-line { font-size: 1.25rem; }
.login-gate.status-mode .gate-status-line::after { height: 8px; margin-top: 18px; }
.login-gate.status-mode .crt-feed { font-size: 0.95rem; }
.login-gate.status-mode .crt-readout { font-size: 1.1rem; }
.login-gate.status-mode .gate-status::before {
  inset: 8px;
  background-size: 18px 3px, 3px 18px, 18px 3px, 3px 18px, 18px 3px, 3px 18px, 18px 3px, 3px 18px;
}

@media (max-width: 480px) and (orientation: portrait) {
  .login-gate.status-mode { padding-left: 6px; padding-right: 6px; }   /* room for the full 1.5x on a phone */
  .login-gate.status-mode .login-gate-card { max-width: 384px; padding: 20px 16px; }
  .login-gate.status-mode .gate-status { padding: 22px 16px 18px; }
  .login-gate.status-mode .gate-status-line { font-size: 2.05rem; }
  .login-gate.status-mode .gate-status-line::first-line { font-size: 1.1rem; }
}

@media (max-height: 500px) {
  .login-gate.status-mode .login-gate-card { max-width: 352px; padding: 14px 16px; }
  .login-gate.status-mode .gate-status { padding: 16px 16px 14px; gap: 6px; }
  .login-gate.status-mode .gate-status-line { font-size: 2.05rem; }
  .login-gate.status-mode .gate-status-line::first-line { font-size: 1.05rem; }
  .login-gate.status-mode .gate-status-line::after { margin-top: 10px; }
}

/* ---- 8. Windows open from their centre line; every close is a fade ------
   Opening (Patrick liked it, 2026-09-23): a thin line opens up and down with
   a small glitch, while the site's own 0.8 s opacity fade-in runs.
   Closing (Patrick, 2026-09-23: "have it just sort of dissolve, fade off...
   with the same speed that the first one fades on"): a plain 0.8 s fade, for
   the box after "Enter as Guest", for the first message as the second
   replaces it, and for the last message as the video starts. The TV
   switch-off, the white beam and the collapsing message frame are gone.
   The site hides or covers each window instantly, so js/crt-login.js fades
   stand-in copies: .crt-ghost (the box) and .crt-status-ghost (a message). */
.login-gate-card.card-entering {
  animation: crtOpen 0.36s linear both;
}

.login-gate-card.crt-ghost,
.login-gate .gate-status.crt-status-ghost {
  animation: crtFadeOut 0.8s ease both;
}

/* A copy waiting at full strength (js/crt-login.js holdThenFade): its fade
   is paused on its first frame until the script releases it. */
.login-gate-card.crt-ghost.crt-ghost-held { animation-play-state: paused; }

/* The first message window fades in while the login box's copy fades out
   (cross-dissolve, Patrick 2026-09-23), on top of the usual line opening. */
.login-gate-card.card-entering.crt-status-in {
  animation: crtOpen 0.36s linear both, crtFadeIn 0.8s ease both;
}

/* The new message fades in under the old one's fading copy. */
.login-gate .gate-status.crt-reopen {
  animation: crtFadeIn 0.8s ease both;
}

@keyframes crtFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes crtFadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* "Transmission disrupted" (Patrick, 2026-09-23: the close was "too perfect
   and linear"): quick sideways jolts, a moment where only a torn horizontal
   slice of the window shows. The opening never touches opacity (the
   site's own fade-in stays the site's). */
@keyframes crtOpen {
  0%   { transform: scale(0, 0.006); }
  22%  { transform: scale(1, 0.006); }
  34%  { transform: translateX(-5px) scale(1, 0.35); clip-path: inset(30% 0 40% 0); }
  42%  { transform: translateX(4px) scale(1, 0.7); clip-path: inset(8% 0 70% 0); }
  52%  { transform: translateX(-2px) scale(1, 1.03); clip-path: none; }
  60%  { transform: translateX(1px); clip-path: inset(62% 0 18% 0); }
  64%  { transform: none; clip-path: none; }
  100% { transform: none; }
}

/* The stand-in copy sits exactly where the real box was, and takes no clicks.
   Same background as the box (neither has a blur now), so the swap from the
   real box to its copy cannot show. When the transition video covers the
   screen, the copy is laid over the video instead: fixed, above it. */
.login-gate-card.crt-ghost {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

/* The layer that carries the last window's copy over the transition video
   (js/crt-login.js explains why it must have the .login-gate class). It
   switches off everything .login-gate does as the real login screen: no
   background, no padding, no layout, no clicks. The copy inside is placed
   by its own screen coordinates. */
.login-gate.crt-ghost-layer {
  position: fixed;
  inset: 0;
  z-index: 10002;   /* the video is 10001 */
  display: block;
  padding: 0;
  background: none;
  pointer-events: none;
}

/* ⛔ Nothing INSIDE a fading copy may animate. A copy restarts every
   animation it contains from the beginning: the message's fade-in started
   over at zero (the copy looked empty), and the site's own terminalFlicker
   on the message replayed as a burst of blinking. Patrick saw that as a
   flash of an old login page while the last window faded (2026-09-23).
   The copy's own fade (on the copy itself, not its insides) still runs. */
.crt-ghost *, .crt-ghost *::before, .crt-ghost *::after,
.crt-status-ghost *, .crt-status-ghost *::before, .crt-status-ghost *::after {
  animation: none !important;
}

/* A fading copy of the previous message, laid exactly over the message window. */
.login-gate .gate-status.crt-status-ghost {
  position: absolute;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .login-gate .gate-status-line::after { transform: none; }   /* no clock running: show the bar full */
  .login-gate-card.card-entering,
  .login-gate-card.card-entering.crt-status-in,
  .login-gate-card.crt-ghost,
  .login-gate .gate-status.crt-status-ghost,
  .login-gate .gate-status.crt-reopen {
    animation: none;
  }
}

/* ---- 9. The sign-in box inside the site (Patrick, 2026-10-04) -----------
   Signing in from inside the site (not the landing page) used to open the
   old plain modal. It now wears the login screen's CRT box through the
   .crt-auth-modal twins above, and this section only adds what that box
   needs that the login screen does not: the same size and padding as the
   login box (so the title bar's -24px bleed fits), and a close button in
   the title bar. No guest button: the visitor is already inside. */
.auth-modal.crt-auth-modal {
  max-width: 320px;
  padding: 24px 24px 20px;
  text-align: center;
}

.crt-auth-modal form { text-align: left; }
.crt-auth-modal .auth-submit-btn { margin-top: 8px; }

/* The close button sits on the red title bar, above the scan lines. */
.crt-auth-modal .auth-modal-close {
  top: 0;
  right: 0;
  z-index: 3;
  padding: 3px 12px 5px;
  font-family: "VT323", "IBM Plex Mono", monospace;
  font-size: 1.6rem;
  color: #ff5d6e;
  text-shadow: 0 0 8px rgba(255, 59, 78, 0.8);
}

.crt-auth-modal .auth-modal-close:hover { color: #ffb3bb; }