/* How to Dismantle an Atomic Bomb / Vertigo look, shared by the TV and the phones.
   The signature is the red-and-black slanted hazard stripe; everything else is
   black, bomb red and bone white. Deliberately a single dark theme: it is a stage. */
:root {
  color-scheme: dark;
  --bg: #000000;             /* the black between the cover stripes */
  --screen: #151313;
  --raise: #1e1b1b;
  --line: #322b2a;
  --fg: #f4f0e8;              /* bone white */
  --muted: #a39b97;
  --red: #c8452c;             /* the album cover's brick red */
  --red-deep: #6e1d10;
  --signal: var(--red);
  --ink-on-signal: #fff8f0;
  /* answer channels: red, white, silver, and a hollow fourth */
  --ch1: #c8452c;
  --ch2: #f4f0e8;
  --ch3: #9aa1a8;
  --ch4: transparent;
  --ink-on-ch: #0a0909;
  --good: #5fd38a;
  --bad: #ff5a4f;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", Impact, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --font-serif: "Tinos", "Times New Roman", Times, serif;   /* the album title face */
  /* the slanted stripes; --sw is one stripe's width */
  --sw: 11px;
  --stripes: repeating-linear-gradient(-45deg, var(--red) 0 var(--sw), #000 var(--sw) calc(var(--sw) * 2));
  --stripe-shift: calc(var(--sw) * 2.8284);   /* one full repeat along the x axis at 45° */
  --stripe-speed: 1.6s;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.stencil { font-family: var(--font-stencil); font-weight: 900; font-variant-numeric: tabular-nums; }

/* The album cover: a band of wide brick-red slashes on black with the title set over them in white serif capitals */
.cover {
  --cw: 2.6em;   /* one red slash */
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(-58deg, #000 0 calc(var(--cw) * 1.25), var(--red) calc(var(--cw) * 1.25) calc(var(--cw) * 2.25));
}
.cover .title {
  font-family: var(--font-serif); font-weight: 400; color: #fff; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; text-shadow: 0 0 .5em rgba(0,0,0,.35);
}

/* Anything striped can scroll: add .moving */
.stripes { background: var(--stripes); }
.moving { animation: stripe-run var(--stripe-speed) linear infinite; }
@keyframes stripe-run { from { background-position: 0 0; } to { background-position: var(--stripe-shift) 0; } }

/* A stripe frame: the element gets a striped border of --fw around its own background */
.framed {
  --fw: 10px;
  border: var(--fw) solid transparent;
  background: linear-gradient(var(--frame-fill, var(--screen)), var(--frame-fill, var(--screen))) padding-box, var(--stripes) border-box;
}
.framed.moving { animation-name: stripe-run-border; }
@keyframes stripe-run-border { from { background-position: 0 0, 0 0; } to { background-position: 0 0, var(--stripe-shift) 0; } }

.btn {
  font: 700 1em/1 var(--font-body); cursor: pointer; letter-spacing: .04em; text-transform: uppercase;
  background: var(--red); color: var(--ink-on-signal); border: 0; border-radius: .2em;
  padding: .9em 1.6em; transition: transform .12s, filter .15s, box-shadow .2s;
}
.btn:hover:not(:disabled) {
  --sw: 7px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 var(--sw), var(--red-deep) var(--sw) calc(var(--sw) * 2));
  animation: stripe-run .6s linear infinite;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: default; }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--fg); animation: none; }

/* answer channel badges: the fourth is hollow so all four read apart */
.ch {
  font-family: var(--font-stencil); font-weight: 900; line-height: 1; text-align: center;
  background: var(--c); color: var(--ink-on-ch); border-radius: .15em; padding: .12em .3em .08em; min-width: 1.5em;
}
.ch4 .ch, .ch.ch4 { box-shadow: inset 0 0 0 .12em var(--fg); color: var(--fg); }

/* character avatars: black silhouette on the character's colour */
.av {
  --mc: var(--muted);
  display: inline-grid; place-items: center; aspect-ratio: 1; max-width: 100%;
  border-radius: 50%; background: var(--mc); color: #0a0909; overflow: hidden; flex: none;
}
.av svg { width: 64%; height: 64%; }
.av img { width: 100%; height: 100%; object-fit: cover; }

@keyframes slam { from { transform: scale(1.15); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes rise { from { transform: translateY(1.2em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes thump { 0%, 100% { transform: none; } 40% { transform: scale(1.06); } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 var(--fx, var(--good)); } 100% { box-shadow: 0 0 0 1.2em transparent; } }
@keyframes word { 0% { transform: scale(2.2) skewX(-8deg); opacity: 0; } 18% { transform: skewX(-8deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.92) skewX(-8deg); opacity: 0; } }
@keyframes wipe { from { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); } to { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}