/* ============================================================================
   DIRECTION 7 - "BASIC"
   Not a look. A chassis.
   Every visual decision in the overlay is a CSS custom property, so the
   streamer's choices ARE the design: typeface, three colours, corner radius,
   size, layout. The default is deliberately neutral - it is the thing you
   customise away from, not a style competing with the other six.
   Reference world: control surfaces that get out of the way. OBS source
   properties, Figma's inspector, a product's "appearance" pane.
   ========================================================================== */

/* Bundled faces. The default (Inter) plus the three used by the worked
   examples, so those render identically with or without a network. Everything
   else in the picker is fetched from Google Fonts at runtime. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: "Creepster";
  src: url("/fonts/creepster-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-900.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("/fonts/sairacond-900.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

/* ============================================================================
   THE BASE COMPONENT
   Eight tokens. Nothing in here is hard-coded that a streamer can change.
   ========================================================================== */

.rig {
  --b-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --b-weight: 600;
  --b-text: #f2f3f5;
  --b-accent: #5b8cff;
  --b-bg: #141517;
  --b-radius: 12px;
  --b-scale: 1;
  --b-pad: calc(20px * var(--b-scale));

  display: inline-flex;
  align-items: center;
  gap: calc(22px * var(--b-scale));
  box-sizing: border-box;
  padding: var(--b-pad) calc(var(--b-pad) * 1.4);
  border-radius: var(--b-radius);
  background: var(--b-bg);
  color: var(--b-text);
  font-family: var(--b-font);
  font-weight: var(--b-weight);
  /* One structural line in the accent. The only decoration in the base. */
  border-left: calc(4px * var(--b-scale)) solid var(--b-accent);
}

.rig[data-layout="stack"] {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6px * var(--b-scale));
}

.rig[data-bg="transparent"] {
  background: transparent;
  /* With no plate behind it the type needs its own contrast against the game,
     so the one concession is a hard shadow - not a glow. */
  text-shadow: 0 calc(2px * var(--b-scale)) calc(5px * var(--b-scale)) rgba(0, 0, 0, 0.85);
}

.rig__clock {
  font-size: calc(76px * var(--b-scale));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.rig__meta {
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--b-scale));
  min-width: 0;
}

.rig__label {
  font-size: calc(13px * var(--b-scale));
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

.rig__delta {
  font-size: calc(26px * var(--b-scale));
  line-height: 1.1;
  color: var(--b-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rig__who {
  font-size: calc(13px * var(--b-scale));
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.72;
  white-space: nowrap;
}

/* --- the three worked examples ------------------------------------------- */

/* A horror streamer. */
.rig[data-preset="horror"] {
  --b-font: "Creepster", fantasy, serif;
  --b-weight: 400;
  --b-text: #e9e3da;
  --b-accent: #d8452f;
  --b-bg: #0b0b0c;
  --b-radius: 0px;
  --b-scale: 1.1;
}

/* A cozy streamer. */
.rig[data-preset="cozy"] {
  --b-font: "Fraunces", Georgia, serif;
  --b-weight: 900;
  --b-text: #3b2b20;
  --b-accent: #a8512c;
  --b-bg: #f7efe4;
  --b-radius: 22px;
  --b-scale: 0.95;
}

/* A sporty streamer. */
.rig[data-preset="sporty"] {
  --b-font: "Saira Condensed", "Arial Narrow", sans-serif;
  --b-weight: 900;
  --b-text: #ffffff;
  --b-accent: #00d977;
  --b-bg: #0e1a24;
  --b-radius: 3px;
  --b-scale: 1;
}

/* --- motion -------------------------------------------------------------- */

/* Minimal on purpose, and the only direction where that is the point: a
   chassis must not have a signature gesture, or it stops being neutral. The
   delta arrives and that is all. transform and opacity only. */
@keyframes rig-delta-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.state-added .rig__delta,
.state-added .rig__who {
  animation: rig-delta-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.state-added .rig__who {
  animation-delay: 70ms;
}

.state-idle .rig__delta,
.state-idle .rig__who {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .state-added .rig__delta,
  .state-added .rig__who {
    animation: none;
  }
}

/* --- overlay placement --------------------------------------------------- */

.slot {
  position: absolute;
  top: 72px;
  left: 78px;
}