/* Variant: Flapboard — a split-flap departure board. Dark. */
:root {
  --bg: #101114; --surface: #18191e; --muted: #131418; --ink: #f2f2f2; --ink-2: #9a9ca5; --line: #26282f;
  --accent: #ffd23f; --accent-ink: #141414; --accent-soft: #2e2a14; --green-soft: #1c1d22; --amber-soft: #2e2a14;
  --night: #18191e; --night-2: #202128; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #f2f2f2; --night-ink-2: #9a9ca5;
  --ui-bg: #1e1f25; --ui-line: #2b2d35; --ui-fill: #383a44; --ui-fill-2: #24252c; --ui-strong: #f2f2f2; --ui-accent: #ffd23f; --ui-img: #2e2a14;
  --ui-tint-a: #3a3416; --ui-tint-b: #2a2a3a; --ui-tint-c: #3a2a1a;
  color-scheme: dark;
}
.fb { --cw: clamp(0.95rem, 1.45vw, 1.3rem); min-width: 0; padding: clamp(14px, 2vw, 22px); border-radius: 18px; background: #0a0a0c; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px #24252b; overflow-x: auto; }
.fb-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; color: var(--accent); font-weight: 700; }
.fb-top b { font-size: 1.25rem; letter-spacing: 0.02em; }
.fb-head, .fb-row { display: grid; grid-template-columns: auto auto auto; justify-content: start; column-gap: clamp(10px, 1.6vw, 20px); }
.fb-head { margin-bottom: 6px; font-size: 0.6875rem; font-weight: 600; color: #8a8c94; }
.fb-row + .fb-row { margin-top: 6px; }
.fb-w { display: flex; gap: 2px; }
.fb-c {
  position: relative; display: grid; place-items: center; width: var(--cw); height: clamp(1.45rem, 2.2vw, 1.95rem);
  border-radius: 3px; background: linear-gradient(#26272c 50%, #1d1e22 50%); color: #f5f5f0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(0.75rem, 1.1vw, 1rem); font-weight: 700;
}
.fb-c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #050506; }
.fb-w--s .fb-c { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .fb-c { animation: fb-flip 0.5s steps(3) both; }
  .fb-row:nth-of-type(3) .fb-c { animation-delay: 0.15s; } .fb-row:nth-of-type(4) .fb-c { animation-delay: 0.3s; }
  .fb-row:nth-of-type(5) .fb-c { animation-delay: 0.45s; } .fb-row:nth-of-type(6) .fb-c { animation-delay: 0.6s; }
  @keyframes fb-flip { 0% { transform: rotateX(90deg); color: transparent; } 100% { transform: none; } }
}
.tile--dark { background: linear-gradient(160deg, #2e2a14, #18191e 70%); }
.fb-head span:nth-child(1) { width: calc(12 * var(--cw) + 22px); }
.fb-head span:nth-child(2) { width: calc(var(--cw) + 2.4rem); margin-right: calc(-2.4rem); }
@media (max-width: 40em) { .fb-head { display: none; } }