/* Turbo Spring — il sito. Gli stessi colori e lo stesso carattere del gioco: il rosso della
   copertina, l'ambra dei tempi, Barlow Condensed corsivo. */

@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/BarlowCondensed-BlackItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/BarlowCondensed-BoldItalic.ttf") format("truetype");
}

:root {
  --bg: #07070b;
  --panel: #14141c;
  --panel-border: #2a2a36;
  --red: #de2a20;
  --red-deep: #7c1612;
  --amber: #ffc53d;
  --text: #f4f4f6;
  --text-dim: #a7a7b3;
  --text-faint: #6b6b78;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* L'illustrazione della copertina, come nel gioco: in alto, e sfuma nel nero. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 40px;
  overflow: hidden;
}
.hero__art {
  position: absolute;
  inset: 0 0 auto 0;
  height: 78vh;
  background: url("../img/cover@sm.webp") center 30% / cover no-repeat;
}
@media (min-width: 700px) {
  .hero__art { background-image: url("../img/cover.webp"); }
}
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7,7,11,.9) 0%, rgba(7,7,11,0) 22%,
                                         rgba(7,7,11,0) 55%, var(--bg) 96%);
}
.hero__content {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.logo { width: min(78%, 360px); margin: 0 0 8px -4px; }
.tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 28px;
}

.caption {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

/* Il pannello della sfida: il tabellone del gioco. */
.card {
  background: rgba(20, 20, 28, .92);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 22px 20px 20px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.card__who {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 6px 0 14px;
  overflow-wrap: anywhere;
}
.card__time {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--amber);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.card__time[hidden] { display: none; }
.card__track {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 6px 0 0;
}
.card__line { color: var(--text-dim); margin: 18px 0 0; font-size: 15px; }

/* I pulsanti del gioco: pieno rosso per l'azione, bordo per le alternative. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 16px 22px;
  border-radius: 16px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--red);
  box-shadow: 0 4px 22px rgba(222, 42, 32, .45);
  border: 0;
}
.button--secondary {
  background: transparent;
  color: var(--red);
  border: 1.5px solid rgba(222, 42, 32, .75);
  box-shadow: none;
}
.button[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

.hint { color: var(--text-faint); font-size: 13px; text-align: center; margin: 16px 0 0; }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px 36px;
  color: var(--text-faint);
  font-size: 13px;
}
.footer img { width: 22px; opacity: .8; }