/* ============================================================================
   The "check back soon" pages: SOUND, GAMES, BOOK/BUY.
   The same black bar as the homepage and the forum (same sizes, same spacing,
   so it never moves when you go from one to the other), and under it a page
   in the statement page's style: one solid colour, picked fresh on every
   visit (the little script in each page's <head>), big pixel type on top.
   ========================================================================== */

/* Pixel font served from this site; "block" = never show the fallback first. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p.woff2') format('woff2');
  font-weight: 400; font-style: normal;
  font-display: block;
}

/* Page-to-page blend, the same as the homepage and forum: the bar is its own
   layer and swaps instantly, so it looks like it never moves. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
::view-transition-group(rr-bar) { animation: none; }
::view-transition-old(rr-bar) { display: none; }
::view-transition-new(rr-bar) { animation: none; }

:root {
  /* The page's colours. These are only the fallback: the script in <head>
     deals a new grey (and a green to go with it) on every visit. */
  --bg: #7a7a7a;
  --fg: #fff;
  --go: hsl(120, 60%, 68%);
  /* Same measures as the statement page on the homepage. */
  --title: 4.7vmin;
  --small: max(1.7vmin, 12px);
  --gap: 2.3vmin;
}
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------- the bar ---------------------------------- */
/* A copy of the homepage's bar. Keep the two in step. */
.rr-mark { display: block; height: 30px; width: auto; image-rendering: pixelated; }   /* 24px drawing + 3px of air, kept sharp */
#topbar {
  view-transition-name: rr-bar;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px 20px;
  box-sizing: border-box;
  min-height: 42px;
  padding: max(6px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           6px max(14px, env(safe-area-inset-left));
  background: #000;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  line-height: 1.5;
  cursor: default;
}
#topbar .tb-name {
  display: block;
  align-self: center;
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
}
#topbar .tb-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 4px 20px;
  font-size: 11px;
  line-height: 1.5;
}
#topbar .tb-links a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#topbar .tb-links a:hover,
#topbar .tb-links a:focus-visible,
#topbar .tb-links a[aria-current="page"] { text-decoration: underline; }   /* the page you're on */
@media (max-width: 640px) {
  #topbar { gap: 4px 14px; }
  #topbar .tb-name { font-size: 9px; }
  #topbar .tb-links { font-size: 9px; gap: 4px 14px; }
}

/* ------------------------------- the page --------------------------------- */
main {
  box-sizing: border-box;
  /* clear of the bar (the script measures it; 42px until then) */
  padding: calc(var(--barh, 42px) + var(--gap))
           max(var(--gap), env(safe-area-inset-right))
           max(calc(var(--gap) * 2), env(safe-area-inset-bottom))
           max(var(--gap), env(safe-area-inset-left));
}
.big {
  margin: 0 0 calc(var(--gap) * 2);
  font-size: var(--title);
  font-weight: normal;
  line-height: 1.15;
}
.small {
  max-width: 72ch;
  margin: calc(var(--gap) * 2.5) 0 0;
  font-size: var(--small);
  line-height: 1.7;
}
[lang="es"] { opacity: 0.72; }            /* Spanish a step quieter, as on the homepage */
.big[lang="es"] { opacity: 1; }           /* ...except in the big type */

/* --------------------------- the email form ------------------------------- */
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 72ch;
  margin: calc(var(--gap) * 1.5) 0 0;
}
.signup[hidden] { display: none; }
.signup input[type="email"] {
  flex: 1 1 20ch;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.75em 0.8em;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 16px/1.2 'Press Start 2P', 'Courier New', monospace;   /* 16px: phones don't zoom in */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.signup input[type="email"]::placeholder { color: #8a8a8a; opacity: 1; }
.signup input[type="email"]:focus-visible { box-shadow: 0 0 0 3px var(--go); }
.signup button {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.9em 1.1em;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font: 12px/1.2 'Press Start 2P', 'Courier New', monospace;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.signup button:hover,
.signup button:focus-visible { background: var(--go); color: #000; outline: none; }
.signup button[disabled] { opacity: 0.6; cursor: wait; }
/* What comes back after you press it: thanks, or what to fix. */
.signup-msg {
  max-width: 72ch;
  margin: calc(var(--gap) * 1.5) 0 0;
  font-size: var(--small);
  line-height: 1.7;
}
.signup-msg:empty { display: none; }
.signup-msg.ok { color: var(--go); }
.fine {
  max-width: 72ch;
  margin: calc(var(--gap) * 1.5) 0 0;
  font-size: calc(var(--small) * 0.85);
  line-height: 1.7;
  opacity: 0.7;
}
.fine [lang="es"] { opacity: 1; }
/* Bots fill in every box; people never see this one. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* For screen readers only. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A phone held sideways: tighten up, like the statement page does. */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --gap: 12px; --title: 20px; --small: 11px; }
}