/* 2.1. Colores de KINT */
:root {
    --kint-dark: #002D4F;   /* azul oscuro */
    --kint-light: #00C2F3;  /* azul claro */
    --white-trans: rgba(255,255,255,0.15);
  }
  
  /* 2.2. Layout y fondo */
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kint-light), var(--kint-dark));
    font-family: 'Segoe UI', sans-serif;
    color: #FFFFFF;
  }
  
  /* 2.3. Header con logo */
  header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .logo-mini {
    width: 50px;
    height: auto;
    filter: drop-shadow(0 0 5px var(--kint-dark));
  }
  header h1 {
    font-size: 2rem;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px var(--kint-dark);
  }
  
  /* 2.4. Tablero */
  #game {
    display: grid;
    grid-template: repeat(3, 100px) / repeat(3, 100px);
    gap: 8px;
    padding: 12px;
    background: var(--white-trans);
    border: 4px solid var(--kint-light);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  
  /* 2.5. Celdas */
  .cell {
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s, transform 0.1s;
  }
  .cell:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-2px);
  }
  .cell.disabled { cursor: default; }
  
  /* 2.6. Colores de X y O */
  .cell.X { color: var(--kint-dark); }
  .cell.O { color: var(--kint-light); }
  
  /* 2.7. Mensajes */
  #message {
    margin: 1rem 0;
    font-size: 1.2rem;
    min-height: 1.4em;
    text-align: center;
    text-shadow: 1px 1px 2px var(--kint-dark);
  }
  
  /* 2.8. Botón Reiniciar */
  #restartBtn {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border: none;
    border-radius: 20px;
    background: var(--kint-light);
    color: #FFF;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 0.3s, transform 0.1s;
  }
  #restartBtn:hover {
    background: var(--kint-dark);
    transform: translateY(-2px);
  }


  #discount-form {
    margin-top: 1rem;
    background: var(--white-trans);
    padding: 1rem;
    border-radius: 8px;
  }
  #discount-form h2 { margin-top: 0; }
  #discount-form label {
    display: block;
    margin-bottom: 0.5rem;
  }
  #discount-form input {
    width: 100%;
    padding: 0.4rem;
    margin-top: 0.2rem;
    border: 1px solid var(--kint-light);
    border-radius: 4px;
  }
  
  /* Cupón */
  #coupon {
    margin-top: 1rem;
    background: var(--white-trans);
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
  }
  #coupon-code {
    margin: 0.5rem 0;
    font-size: 2rem;
    letter-spacing: 4px;
    font-weight: bold;
    color: var(--kint-dark);
  }
  
  @media (max-width: 400px) {
    #game {
      grid-template: repeat(3, 80px) / repeat(3, 80px);
      gap: 5px;
    }
    .cell { font-size: 2.5rem; }
  }