body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #1f4037, #99f2c8);
      text-align: center;
      color: white;
      margin: 0;
      padding: 0;
      user-select: none;
      overflow-x: hidden;
    }

    h2 {
      margin-top: 15px;
      font-size: 2.8rem;
      font-weight: 700;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    }

    h3 {
      color: #000;
    }

    p.intro {
      max-width: 400px;
      margin: 0 auto 15px auto;
      font-size: 1.1rem;
      font-weight: 500;
      color: #f0f0f0dd;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
      text-align: justify;
    }

    #compartir {
      background-color: #ff4444;
      max-width: 600px;
      width: 90%;
      padding: 20px 10px;
      margin: 20px auto 30px auto;
      text-align: center;
      border-radius: 20px;
    }

    #game-container {
      width: 90vw;
      max-width: 400px;
      margin: 10px auto;
      position: relative;
      box-shadow: 0 0 20px rgba(0,0,0,0.4);
      border-radius: 10px;
      background: #000;
      border: 4px solid #00ff88;
    }

    #game-board {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
    }

    #scoreboard {
      margin-top: 15px;
      font-size: 1.4rem;
      font-weight: 600;
      text-shadow: 1px 1px 3px #000000cc;
      border: 3px solid #00ff88;
      border-radius: 7px;
      width: 90%;
      max-width: 400px;
      margin: 20px auto;
      background-color: #000;
      padding: 8px;
    }

    .controls {
      margin: 10px auto;
      display: grid;
      grid-template-columns: repeat(3, 60px);
      grid-template-rows: repeat(3, 60px);
      gap: 5px;
      justify-content: center;
    }

    .btn {
      background: #008000cc;
      color: white;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 4px 8px #004400aa;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background: #00ff00cc;
      box-shadow: 0 6px 12px #00ff00ee;
    }

    .btn:active {
      background: #005500cc;
      box-shadow: inset 0 2px 5px #003300aa;
    }

    #reiniciar {
      display: none;
      margin: 15px auto;
      padding: 12px 24px;
      font-size: 20px;
      background: #cc0000;
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 4px 10px #990000cc;
      transition: background 0.3s ease;
    }

    #reiniciar:hover {
      background: #ff4444;
      box-shadow: 0 6px 12px #ff6666cc;
    }

    @media (max-width: 500px) {
      h2 {
        font-size: 1.8rem;
      }

      p.intro {
        font-size: 0.95rem;
        padding: 0 10px;
      }

      .controls {margin-top: 3px;
        grid-template-columns: repeat(3, 40px);
        grid-template-rows: repeat(3, 40px);
        gap: 4px;
      }

      .btn {
        font-size: 20px;
      }

      #scoreboard {
        font-size: 1.1rem;
        margin-top: 0;
      }

      #game-container {
        width: 90vw;
        max-width: 350px;
      }
    }