<style>
    * {
      user-select: none;
      touch-action: manipulation;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, 'Roboto', sans-serif;
      transition: background 0.3s, color 0.2s;
      padding: 16px;
    }

    /* Light / Dark themes */
    body.light {
      background: linear-gradient(145deg, #b7d968 0%, #8bc34a 100%);
      color: #1e2f1c;
    }

    body.dark {
      background: linear-gradient(145deg, #1a3c1a 0%, #0e2a0a 100%);
      color: #f0f7e6;
    }

    /* main game container */
    .game-container {
      max-width: 1200px;
      width: 100%;
      background: rgba(0, 20, 0, 0.4);
      border-radius: 64px 64px 48px 48px;
      backdrop-filter: blur(2px);
      padding: 16px 20px 24px;
      box-shadow: 0 25px 40px rgba(0,0,0,0.3);
      transition: all 0.2s;
    }

    /* scoreboard + theme toggle + timer */
    .score-panel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(8px);
      border-radius: 100px;
      padding: 8px 24px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .score-box {
      font-size: 2rem;
      font-weight: bold;
      background: #00000066;
      padding: 8px 20px;
      border-radius: 60px;
      letter-spacing: 2px;
      display: flex;
      gap: 20px;
      align-items: baseline;
    }

    .timer-box {
      background: #000000aa;
      padding: 8px 20px;
      border-radius: 60px;
      font-family: monospace;
      font-size: 1.7rem;
      font-weight: bold;
      letter-spacing: 2px;
      color: #f9f3b0;
    }

    .theme-toggle {
      background: #ffd966;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 50px;
      padding: 8px 20px;
      font-weight: bold;
      transition: 0.1s linear;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* canvas field */
    .canvas-wrapper {
      background: #2e7d32;
      border-radius: 48px;
      box-shadow: 0 20px 30px rgba(0,0,0,0.4);
      padding: 8px;
      border: 4px solid #f9e0a0;
    }

    canvas {
      display: block;
      width: 100%;
      height: auto;
      background: #3c9e3c;
      border-radius: 40px;
      cursor: pointer;
      touch-action: none;
    }

    /* control info + substitutions & referee log */
    .info-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 20px;
      gap: 12px;
    }

    .controls-panel {
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      border-radius: 48px;
      padding: 10px 20px;
      font-size: 0.85rem;
      flex: 2;
      min-width: 150px;
    }

    .referee-log {
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      border-radius: 48px;
      padding: 10px 20px;
      font-size: 0.8rem;
      flex: 3;
      font-weight: bold;
      max-height: 80px;
      overflow-y: auto;
    }

    .sub-status {
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      border-radius: 48px;
      padding: 10px 20px;
      font-size: 0.9rem;
      flex: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    button {
      background: #f5b042;
      border: none;
      border-radius: 40px;
      padding: 6px 16px;
      font-weight: bold;
      cursor: pointer;
      font-size: 0.8rem;
      transition: 0.1s;
    }

    button:active {
      transform: scale(0.96);
    }

    @media (max-width: 700px) {
      .score-box { font-size: 1.2rem; padding: 4px 12px; gap: 8px; }
      .timer-box { font-size: 1.2rem; padding: 4px 12px; }
      .controls-panel, .referee-log, .sub-status { font-size: 0.7rem; }
      .theme-toggle { padding: 4px 12px; font-size: 1rem; }
    }
  </style>
</head>