* {
      box-sizing: border-box;
    }

    :root {
      --bg: #090d12;
      --surface: rgba(255,255,255,0.045);
      --surface-strong: rgba(255,255,255,0.07);
      --line: rgba(255,255,255,0.11);
      --text: #ffffff;
      --muted: rgba(255,255,255,0.58);
      --track: rgba(255,255,255,0.11);

      --home: #3979d8;
      --away: #c94b4b;
      --scoreboard-number-font: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(70, 90, 120, 0.18),
          transparent 42%
        ),
        linear-gradient(
          180deg,
          #111821 0%,
          var(--bg) 55%,
          #070a0e 100%
        );

      color: var(--text);
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    }

    body {
      min-height: 100vh;
    }

    button,
    input {
      font: inherit;
    }

    .hidden {
      display: none !important;
    }

    /* STARTSIDA */

    .start-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 32px;
    }

    .start-box {
      width: min(520px, 100%);
      text-align: center;
    }

    .app-name {
      margin: 0 0 12px;
      font-size: clamp(34px, 6vw, 54px);
      font-weight: 850;
      letter-spacing: -0.04em;
    }

    .intro {
      margin: 0 auto 32px;
      max-width: 440px;
      color: var(--muted);
      line-height: 1.5;
    }

    .match-form {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    .match-input {
      flex: 1;
      min-width: 0;
      padding: 15px 17px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255,255,255,0.06);
      color: white;
      outline: none;
    }

    .match-input:focus {
      border-color: rgba(255,255,255,0.35);
    }

    .primary-button {
      border: 0;
      border-radius: 7px;
      padding: 0 20px;
      background: white;
      color: #0a0e13;
      font-weight: 750;
      cursor: pointer;
    }

    .help-text {
      margin-top: 16px;
      color: rgba(255,255,255,0.4);
      font-size: 13px;
    }

    .message {
      margin-top: 18px;
      min-height: 22px;
      color: rgba(255,255,255,0.72);
    }

    html.match-link #startScreen {
      display: none;
    }

    .waiting-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 32px;
      text-align: center;
    }

    .waiting-title {
      margin: 0 0 20px;
      font-size: clamp(30px, 5vw, 64px);
    }

    .waiting-message {
      color: var(--muted);
      font-size: clamp(18px, 2vw, 28px);
    }



    .controls {
      position: fixed;
      top: 15px;
      right: 15px;

      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: calc(100vw - 30px);
      gap: 8px;

      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease;
      z-index: 20;
    }

    body.show-controls .controls,
    .controls:focus-within {
      opacity: 1;
      pointer-events: auto;
    }

    .control-button {
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 6px;
      background: rgba(8,12,17,0.82);
      color: rgba(255,255,255,0.8);
      padding: 9px 12px;
      cursor: pointer;
      backdrop-filter: blur(10px);
    }

    .flash {
      animation: valueFlash 900ms ease;
    }

    @keyframes valueFlash {
      0% {
        text-shadow: 0 0 0 rgba(255,255,255,0);
      }

      30% {
        text-shadow: 0 0 18px rgba(255,255,255,0.75);
      }

      100% {
        text-shadow: 0 0 0 rgba(255,255,255,0);
      }
    }


@media(max-width:720px) { .match-form { flex-direction:column; } .primary-button { min-height:50px; } }