body {
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  background: linear-gradient(135deg, #22223b 0%, #4a4e69 100%);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  transition: background 0.6s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.max-w-md {
  box-shadow: 0 12px 40px 0 rgba(40, 42, 80, 0.28);
  border-radius: 1.2rem !important;
  border: 2.5px solid #2d314d;
  background: rgba(36, 37, 63, 0.97);
  backdrop-filter: blur(6px);
  padding-top: 1.3rem !important;
}

h1 {
  letter-spacing: 1.5px;
  text-shadow: 0 3px 18px #20204099;
  font-size: 2.2rem;
  font-weight: 900;
}

#turno {
  transition: color 0.4s;
  font-weight: bold;
  font-size: 1.22rem;
  letter-spacing: 0.1px;
}

.celda-gato {
  height: 96px;
  width: 96px;
  font-size: 2.7rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: 1rem;
  background: linear-gradient(120deg, #e0e7ff 50%, #e4d0fa 100%);
  color: #2a2550;
  box-shadow: 
    0 4px 30px 0 #5f6df04d,
    0 2.5px 8px #aaa8ff33,
    0 0.5px 1.5px #b8b4f7a2;
  border: 2.5px solid #a5adf8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
    background 0.23s cubic-bezier(0.4,0.0,0.2,1),
    color 0.16s,
    box-shadow 0.21s,
    transform 0.13s;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  position: relative;
  z-index: 1;
}

.celda-gato:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  box-shadow: 0 0 0 0 #fff3, 0 0 0 0 #a89cff66;
  pointer-events: none;
  transition: box-shadow 0.23s cubic-bezier(0.4,0.0,0.2,1);
  z-index: 2;
}

.celda-gato:hover:not([aria-disabled="true"]), 
.celda-gato:focus:not([aria-disabled="true"]) {
  background: linear-gradient(120deg, #b6b5f6 40%, #f2eafa 100%);
  color: #7c3aed;
  transform: scale(1.11);
  box-shadow: 0 0 18px 4px #c8b7ff99, 0 6px 24px #433e6133;
  z-index: 4;
}
.celda-gato:hover:not([aria-disabled="true"]):after,
.celda-gato:focus:not([aria-disabled="true"]):after {
  box-shadow: 0 0 20px 7px #a89cffcc, 0 0 5px 1.5px #fff9;
}

.celda-gato[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.68;
  filter: grayscale(0.1) brightness(0.98);
}

.celda-victoria {
  animation: glow-victory 1.12s alternate infinite;
  background: linear-gradient(120deg, #fff8dc 40%, #ffe7e3 100%) !important;
  color: #e97700 !important;
  border-color: #ffe6a6 !important;
  box-shadow: 0 0 28px 10px #ffe6a6bb, 0 0 15px 5px #fff4e6;
  z-index: 9;
}

@keyframes glow-victory {
  from {
    box-shadow: 0 0 18px 8px #ffe7c0, 0 0 10px 3px #fff6e6;
    filter: brightness(1.13);
  }
  to {
    box-shadow: 0 0 38px 22px #fff8dc, 0 0 28px 13px #fff4e6;
    filter: brightness(1.28);
  }
}

/* Botones y controles */
button, .celda-gato {
  outline: none;
}

#reiniciarBtn,
#resetHistorial,
#cambiarModoJuego,
#modoBtn {
  box-shadow: 0 2.5px 10px rgba(70, 63, 130, 0.13);
  font-family: inherit;
  border-radius: 0.75rem;
  padding: 0.46rem 1.1rem;
  margin: 2px 1px;
}

#reiniciarBtn {
  background: linear-gradient(90deg, #6466f1 0%, #98a6fa 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .7px;
  transition: background 0.18s;
}

#reiniciarBtn:disabled {
  background: #444a6d !important;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

#resetHistorial {
  background: linear-gradient(90deg, #ff6b6b 0%, #ff8b94 100%) !important;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  transition: background 0.2s, color 0.13s;
}

#resetHistorial:hover {
  background: linear-gradient(90deg, #d32f2f 0%, #ff8b94 100%) !important;
  color: #fff !important;
}

#cambiarModoJuego {
  background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 100%);
  border: none;
  font-weight: 500;
  font-size: 0.93rem;
  color: #fff;
  box-shadow: 0 2px 6px #3c366b29;
  transition: background 0.14s, color 0.15s;
}

#cambiarModoJuego:hover {
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
  color: #fff !important;
}

#modoBtn {
  background: none !important;
  font-size: 1.55rem;
  color: #ffe066;
  transition: color 0.18s;
}

#modoBtn:hover {
  color: #fff176;
}

/* Mensajes y historial */
#mensaje {
  margin-top: 1.25rem;
  min-height: 2.1rem;
  font-size: 1.19rem;
  font-weight: 700;
  color: #ffe066;
  letter-spacing: .7px;
  text-shadow: 0 2px 11px #1a1e35;
  padding-bottom: 2px;
  transition: color 0.2s;
  border-radius: 0.35em;
}

details summary {
  font-weight: 700;
  color: #b1b7f7;
  letter-spacing: .4px;
  padding: 2px 0 2px 2px;
  cursor: pointer;
}

details[open] summary {
  color: #6246ea;
  background: #ededfa22;
}

#historialPartidas li {
  margin-bottom: 0.13rem;
  font-size: 1.04rem;
  color: #d1d5f0;
}

::-webkit-scrollbar-thumb {
  background: #393b56;
  border-radius: 1em;
}
::-webkit-scrollbar {
  background: #232946;
  width: 7px;
}

/* Responsive mobile */
@media (max-width: 600px) {
  .celda-gato {
    height: 60px;
    width: 60px;
    font-size: 1.5rem;
    border-radius: 0.68rem;
  }
  .max-w-md {
    padding: 1.1rem !important;
  }
  h1 { font-size: 1.2rem; }
  #mensaje { font-size: 0.98rem;}
}

@media (max-width: 400px) {
  .celda-gato { height: 38px; width: 38px; font-size: 1.0rem; }
  .max-w-md { padding: 0.45rem !important;}
}