@font-face { font-family: "Saira"; src: url("font/Saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("font/IBMPlexMono-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --metallo: #2A2520;
  --pannello: #38312A;
  --pannello-alto: #453C33;
  --osso: #E9E1CC;
  --osso-spento: #B5AB95;
  --blu: #5B8DB8;
  --red: #C0473F;
  --ottone: #B08D57;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--metallo);
  color: var(--osso);
  font: 400 1.0625rem/1.6 "Saira", system-ui, sans-serif;
}
a { color: var(--ottone); text-underline-offset: 3px; }
a:focus-visible, .bottone:focus-visible { outline: 2px solid var(--ottone); outline-offset: 3px; }

.largo { max-width: 68rem; margin: 0 auto; padding: 0 16px; }

.testa { padding: 64px 0 56px; border-bottom: 1px solid var(--pannello-alto); }
.marchio { margin: 0 0 20px; font-weight: 600; font-stretch: 75%; font-size: 1.25rem; color: var(--ottone); }
h1 {
  margin: 0; max-width: 14ch;
  font-weight: 800; font-stretch: 62%; line-height: .95;
  font-size: clamp(3rem, 9vw, 6.5rem); letter-spacing: -.01em;
}
.sotto { max-width: 38rem; margin: 24px 0 0; font-size: 1.1875rem; color: var(--osso); }
.stato { margin: 14px 0 0; color: var(--osso-spento); font-size: .9375rem; }

/* Il tabellone: la striscia di squadra a sinistra è la sola cosa forte, come nell'app. */
.tabellone { margin-top: 44px; display: grid; gap: 8px; }
.tabellone .riga { max-width: 40rem; }
.riga {
  display: flex; align-items: center; gap: 14px;
  background: var(--pannello); padding: 12px 14px 12px 20px;
  border-left: 8px solid var(--osso-spento);
}
.riga.acceso { border-left-color: var(--blu); }
.riga.spento { border-left-color: var(--red); }
.riga img { flex: none; image-rendering: auto; }
.riga b { display: block; font-weight: 600; font-stretch: 85%; font-size: 1.125rem; }
.riga span { display: block; font-size: .875rem; color: var(--osso-spento); }

.blocco { padding-top: 56px; }
h2 { margin: 0 0 20px; font-weight: 700; font-stretch: 70%; font-size: 2.25rem; line-height: 1.05; }
h3 { margin: 0 0 6px; font-weight: 600; font-stretch: 85%; font-size: 1.25rem; line-height: 1.2; }
p { margin: 0; }
.stretto { max-width: 40rem; }

.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 32px 40px; }
.griglia p { color: var(--osso); max-width: 34rem; font-size: 1rem; }

.giochi ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.giochi li {
  display: flex; align-items: center; gap: 10px;
  background: var(--pannello); padding: 8px 14px 8px 10px; font-weight: 500;
}

.bottone {
  display: inline-block; margin-top: 18px; padding: 12px 22px;
  background: var(--blu); color: #fff; font-weight: 600; text-decoration: none;
}
.bottone:hover { background: #4C7BA4; }

.piede { padding-top: 64px; padding-bottom: 40px; color: var(--osso-spento); font-size: .875rem; }
.piede p + p { margin-top: 8px; }

@media (max-width: 600px) {
  .testa { padding: 40px 0 40px; }
  .riga span { font-size: .8125rem; }
}