:root {
  /* Monokai Dark Theme Colors */
  --dark-bg: #272822;
  --dark-text: #f8f8f2;
  --dark-primary: #a6e22e;
  --dark-secondary: #66d9ef;
  --dark-accent: #fd971f;
  --dark-border: #49483e;

  /* Monokai Light Theme Colors */
  --light-bg: #fdf6e3;
  --light-text: #272822;
  --light-primary: #4e9a06;
  --light-secondary: #2aa198;
  --light-accent: #cb4b16;
  --light-border: #eee8d5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

body.light-theme {
  background-color: var(--light-bg);
  color: var(--light-text);
}

#app {
  width: 100%;
  max-width: 500px;
  padding: 1rem;
}

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--dark-secondary);
}

.light-theme h1 {
  color: var(--light-secondary);
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1;
}

.cell {
  border: 2px solid var(--dark-border);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  aspect-ratio: 1;
}

.light-theme .cell {
  border-color: var(--light-border);
}

.cell-x {
  color: var(--dark-primary);
}

.light-theme .cell-x {
  color: var(--light-primary);
}

.cell-o {
  color: var(--dark-accent);
}

.light-theme .cell-o {
  color: var(--light-accent);
}

.fading {
  opacity: 0.5;
}

.status {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  height: 1.5rem;
  text-align: center;
}

.controls {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  padding: 0.5rem 1rem;
  background-color: var(--dark-secondary);
  color: var(--dark-bg);
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.2s;
}

.light-theme button {
  background-color: var(--light-secondary);
  color: var(--light-bg);
}

button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

button:active {
  transform: translateY(0);
}

.game-mode-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.game-mode-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.selected {
  background-color: var(--dark-accent);
}

.light-theme .selected {
  background-color: var(--light-accent);
}

.debug {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--dark-secondary);
  text-align: center;
}

.light-theme .debug {
  color: var(--light-secondary);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

@media (max-width: 480px) {
  #app {
    padding: 0.5rem;
  }
  
  .board {
    max-width: 300px;
  }
  
  .cell {
    font-size: 1.5rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
}