* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    svg {
      display: block;
    }

    .game {
      min-width: 575px;
      height: 100vh;
      background: #2f4274;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .game__cards {
      width: 720px;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: 100px;
      grid-gap: 20px;
      padding: 0 20px;
    }

    .game__cards.no-event {
      pointer-events: none;
    }

    .game__card {
      position: relative;
      cursor: pointer;
      perspective: 700px;
    }

    .game__card.flipped,
    .game__card.has-match {
      pointer-events: none;
    }

    .game__card.flipped .game__back-card,
    .game__card.has-match .game__back-card {
      transform: rotateY(180deg);
    }

    .game__card.flipped .game__front-card,
    .game__card.has-match .game__front-card {
      transform: rotateY(360deg);
    }

    .game__back-card,
    .game__front-card {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: #f27922;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transition: transform 400ms;
    }

    .game__back-card {
      z-index: 1;
    }

    .game__front-card {
      transform: rotateY(180deg);
    }

    .footer {
      text-align: center;
      padding: 5px 0;
      color: #ccc;
      background: #333;
    }

    .footer a {
      color: #21a1e1;
      text-decoration: none;
    }

    .game__card.matched { pointer-events: none; }

    /* ========== SCOREBOARD ========== */
:root{
  --sb-bg: rgba(255,255,255,0.08);
  --sb-border: rgba(255,255,255,0.18);
  --sb-text: #fff;
  --sb-muted: #cdd3df;
  --sb-accent: #8ef0ff; /* istersen override et */
}

.scoreboard{
  display: grid;
  place-items: start;
  margin: 16px auto 24px;
  padding: 0 12px;
  width: min(920px, 100%);
}

.scorecard{
  width: 100%;
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--sb-text);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.25);
}

.scorecard__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.scorecard__history{ margin-top: 10px; grid-template-columns: 1fr; }

.scorecard__block{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  padding: 12px 14px;
}

.scorecard__label{
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--sb-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.scorecard__value{
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 800;
  line-height: 1;
}

.scorecard__best .scorecard__value{ color: var(--sb-accent); }

.scorecard__list{
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0; margin: 0;
}

.scorecard__list li{
  min-width: 52px;
  text-align: center;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 8px 10px;
}