/* Theme System - Each player can choose their own theme */

/* Theme 1: Modern Gradient (Default) */
body[data-theme="modern-gradient"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Theme 2: Minimalist White */
body[data-theme="minimalist-white"] {
  background: #f5f5f5;
}

body[data-theme="minimalist-white"] .screen {
  background: white;
  border: 2px solid #000;
  border-radius: 0;
}

body[data-theme="minimalist-white"] h1 {
  letter-spacing: -1px;
}

body[data-theme="minimalist-white"] label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body[data-theme="minimalist-white"] input[type="text"],
body[data-theme="minimalist-white"] input[type="number"] {
  border: 1px solid #000;
  border-radius: 0;
}

body[data-theme="minimalist-white"] button {
  background: #000;
  border: 2px solid #000;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

body[data-theme="minimalist-white"] button:hover {
  background: white;
  color: #000;
}

body[data-theme="minimalist-white"] .cell:hover {
  fill: rgba(0, 0, 0, 0.05);
}

/* Theme 3: Neon Dark */
body[data-theme="neon-dark"] {
  background: #0d0d1a;
}

body[data-theme="neon-dark"] .screen {
  background: #1a1a2e;
  color: #00ffaa;
  box-shadow: 0 0 30px rgba(0, 255, 170, 0.3);
}

body[data-theme="neon-dark"] h1 {
  color: #00ffaa;
  text-shadow: 0 0 10px #00ffaa;
}

body[data-theme="neon-dark"] label {
  color: #00ffaa;
}

body[data-theme="neon-dark"] input[type="text"],
body[data-theme="neon-dark"] input[type="number"] {
  border: 2px solid #00ffaa;
  background: rgba(0, 255, 170, 0.05);
  color: #00ffaa;
}

body[data-theme="neon-dark"] input::placeholder {
  color: rgba(0, 255, 170, 0.6);
}

body[data-theme="neon-dark"] button {
  background: transparent;
  border: 2px solid #00ffaa;
  color: #00ffaa;
}

body[data-theme="neon-dark"] button:hover {
  background: #00ffaa;
  color: #000;
  box-shadow: 0 0 20px #00ffaa;
}

body[data-theme="neon-dark"] .game-code-display,
body[data-theme="neon-dark"] .player-name-edit,
body[data-theme="neon-dark"] .player-name,
body[data-theme="neon-dark"] .turn-indicator {
  color: #00ffaa;
}

body[data-theme="neon-dark"] .game-code-display span,
body[data-theme="neon-dark"] #currentPlayerName {
  background: rgba(0, 255, 170, 0.15);
  border: 2px solid #00ffaa;
  color: #00ffaa;
}

body[data-theme="neon-dark"] .turn-indicator {
  background: rgba(0, 255, 170, 0.15);
  border: 2px solid #00ffaa;
}

body[data-theme="neon-dark"] .cell:hover {
  fill: rgba(0, 255, 170, 0.15);
}

body[data-theme="neon-dark"] .divider {
  color: #00ffaa;
}

body[data-theme="neon-dark"] .name-hint {
  color: rgba(0, 255, 170, 0.7);
}

/* Theme 4: Pastel Soft */
body[data-theme="pastel-soft"] {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

body[data-theme="pastel-soft"] .screen {
  border-radius: 24px;
}

body[data-theme="pastel-soft"] h1 {
  color: #8b4f3f;
}

body[data-theme="pastel-soft"] label {
  color: #8b4f3f;
}

body[data-theme="pastel-soft"] input[type="text"],
body[data-theme="pastel-soft"] input[type="number"] {
  border: none;
  border-radius: 12px;
}

body[data-theme="pastel-soft"] button {
  background: white;
  color: #8b4f3f;
  border-radius: 12px;
}

body[data-theme="pastel-soft"] button:hover {
  transform: scale(1.02);
}

body[data-theme="pastel-soft"] .cell:hover {
  fill: rgba(139, 79, 63, 0.1);
}

/* Theme 5: Retro Terminal */
body[data-theme="retro-terminal"] {
  background: #000;
  font-family: 'Courier New', monospace;
}

body[data-theme="retro-terminal"] .screen {
  background: #0a0e27;
  border: 3px solid #33ff33;
  color: #33ff33;
  border-radius: 0;
}

body[data-theme="retro-terminal"] h1 {
  color: #33ff33;
  border-bottom: 2px solid #33ff33;
  padding-bottom: 10px;
}

body[data-theme="retro-terminal"] h1::before {
  content: '> ';
}

body[data-theme="retro-terminal"] label {
  color: #33ff33;
}

body[data-theme="retro-terminal"] label::before {
  content: '$ ';
}

body[data-theme="retro-terminal"] input[type="text"],
body[data-theme="retro-terminal"] input[type="number"] {
  border: 1px solid #33ff33;
  background: #0a0e27;
  color: #33ff33;
  border-radius: 0;
}

body[data-theme="retro-terminal"] button {
  background: #33ff33;
  color: #0a0e27;
  border: 2px solid #33ff33;
  border-radius: 0;
}

body[data-theme="retro-terminal"] button:hover {
  background: transparent;
  color: #33ff33;
}

body[data-theme="retro-terminal"] .game-code-display,
body[data-theme="retro-terminal"] .player-name-edit,
body[data-theme="retro-terminal"] .player-name,
body[data-theme="retro-terminal"] .turn-indicator {
  color: #33ff33;
}

body[data-theme="retro-terminal"] .game-code-display span,
body[data-theme="retro-terminal"] #currentPlayerName {
  background: transparent;
  border: 1px solid #33ff33;
}

body[data-theme="retro-terminal"] .turn-indicator {
  background: transparent;
  border: 2px solid #33ff33;
}

body[data-theme="retro-terminal"] .divider {
  color: #33ff33;
}

/* Theme 6: Glass Morphism */
body[data-theme="glass-morphism"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body[data-theme="glass-morphism"] .screen {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body[data-theme="glass-morphism"] h1 {
  color: white;
}

body[data-theme="glass-morphism"] label {
  color: white;
}

body[data-theme="glass-morphism"] input[type="text"],
body[data-theme="glass-morphism"] input[type="number"] {
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
  color: white;
  backdrop-filter: blur(5px);
}

body[data-theme="glass-morphism"] input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

body[data-theme="glass-morphism"] .name-hint {
  color: rgba(255, 255, 255, 0.9);
}

body[data-theme="glass-morphism"] button {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  backdrop-filter: blur(5px);
  font-weight: 600;
}

body[data-theme="glass-morphism"] button:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.7);
}

body[data-theme="glass-morphism"] .game-code-display,
body[data-theme="glass-morphism"] .player-name-edit,
body[data-theme="glass-morphism"] .player-name,
body[data-theme="glass-morphism"] .turn-indicator {
  color: white;
}

body[data-theme="glass-morphism"] .game-code-display span,
body[data-theme="glass-morphism"] #currentPlayerName {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

body[data-theme="glass-morphism"] .turn-indicator {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

body[data-theme="glass-morphism"] .cell:hover {
  fill: rgba(255, 255, 255, 0.2);
}

body[data-theme="glass-morphism"] .divider {
  color: rgba(255, 255, 255, 0.8);
}

/* Theme 7: Material Design */
body[data-theme="material-design"] {
  background: #fafafa;
}

body[data-theme="material-design"] .screen {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}

body[data-theme="material-design"] h1 {
  color: #1976d2;
  font-weight: 500;
}

body[data-theme="material-design"] label {
  color: #666;
  font-size: 12px;
}

body[data-theme="material-design"] input[type="text"],
body[data-theme="material-design"] input[type="number"] {
  border: none;
  border-bottom: 2px solid #e0e0e0;
  border-radius: 0;
}

body[data-theme="material-design"] input:focus {
  border-bottom-color: #1976d2;
}

body[data-theme="material-design"] button {
  background: #1976d2;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

body[data-theme="material-design"] button:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

body[data-theme="material-design"] .cell:hover {
  fill: rgba(25, 118, 210, 0.1);
}

body[data-theme="material-design"] .action-card {
  background: #1976d2;
}

body[data-theme="material-design"] .card-title {
  color: white;
  font-weight: 500;
}

body[data-theme="material-design"] .card-input input {
  background: white;
  color: #333;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}

body[data-theme="material-design"] .card-input input:focus {
  border-bottom-color: white;
}

body[data-theme="material-design"] .card-button {
  background: white;
  color: #1976d2;
  font-weight: 500;
  text-transform: uppercase;
}

body[data-theme="material-design"] .card-button:hover {
  background: #f5f5f5;
}

/* Theme 8: Neumorphic */
body[data-theme="neumorphic"] {
  background: #e0e5ec;
}

body[data-theme="neumorphic"] .screen {
  background: #e0e5ec;
  border-radius: 24px;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}

body[data-theme="neumorphic"] h1 {
  color: #6b7688;
}

body[data-theme="neumorphic"] label {
  color: #6b7688;
}

body[data-theme="neumorphic"] input[type="text"],
body[data-theme="neumorphic"] input[type="number"] {
  background: #e0e5ec;
  color: #6b7688;
  border: none;
  border-radius: 12px;
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
}

body[data-theme="neumorphic"] button {
  background: #e0e5ec;
  color: #6b7688;
  border: none;
  border-radius: 12px;
  box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.5);
}

body[data-theme="neumorphic"] button:active {
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
}

body[data-theme="neumorphic"] .game-code-display,
body[data-theme="neumorphic"] .player-name-edit,
body[data-theme="neumorphic"] .player-name,
body[data-theme="neumorphic"] .turn-indicator {
  color: #6b7688;
}

body[data-theme="neumorphic"] .game-code-display span,
body[data-theme="neumorphic"] #currentPlayerName {
  background: #e0e5ec;
  box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.4);
}

body[data-theme="neumorphic"] .turn-indicator {
  background: #e0e5ec;
  box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.4);
}

/* Theme 9: Playful Colorful */
body[data-theme="playful-colorful"] {
  background: #f5f5f5;
}

body[data-theme="playful-colorful"] .screen {
  border: 4px solid #ff6b9d;
  border-radius: 32px;
  box-shadow: 8px 8px 0 #ff6b9d;
}

body[data-theme="playful-colorful"] h1 {
  color: #ff6b9d;
  font-weight: 800;
}

body[data-theme="playful-colorful"] label {
  color: #333;
  font-weight: 700;
}

body[data-theme="playful-colorful"] input[type="text"],
body[data-theme="playful-colorful"] input[type="number"] {
  border: 3px solid #333;
  border-radius: 12px;
}

body[data-theme="playful-colorful"] button {
  background: #ffd93d;
  color: #333;
  border: 3px solid #333;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #333;
}

body[data-theme="playful-colorful"] button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #333;
}

body[data-theme="playful-colorful"] .game-code-display span,
body[data-theme="playful-colorful"] #currentPlayerName {
  background: white;
  color: #333;
  border: 3px solid #333;
  box-shadow: 3px 3px 0 #333;
}

body[data-theme="playful-colorful"] .turn-indicator {
  background: #ff6b9d;
  color: white;
  border: 3px solid #333;
  box-shadow: 4px 4px 0 #333;
}

/* Theme 10: Corporate Professional */
body[data-theme="corporate-professional"] {
  background: #f8f9fa;
}

body[data-theme="corporate-professional"] .screen {
  border-radius: 8px;
  border: 1px solid #d0d0d0;
}

body[data-theme="corporate-professional"] h1 {
  color: #2c3e50;
  font-weight: 600;
  font-size: 2em;
}

body[data-theme="corporate-professional"] label {
  color: #5a6c7d;
  font-size: 14px;
}

body[data-theme="corporate-professional"] input[type="text"],
body[data-theme="corporate-professional"] input[type="number"] {
  border: 1px solid #d0d0d0;
  background: #fafafa;
  border-radius: 4px;
}

body[data-theme="corporate-professional"] input:focus {
  border-color: #3498db;
}

body[data-theme="corporate-professional"] button {
  background: #3498db;
  border-radius: 4px;
  font-weight: 500;
  font-size: 15px;
}

body[data-theme="corporate-professional"] button:hover {
  background: #2980b9;
}

body[data-theme="corporate-professional"] .game-code-display span {
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
}

body[data-theme="corporate-professional"] .turn-indicator {
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
}

body[data-theme="corporate-professional"] .action-card {
  background: #2c3e50;
}

body[data-theme="corporate-professional"] .card-title {
  color: white;
  font-weight: 600;
}

body[data-theme="corporate-professional"] .card-input input {
  background: white;
  color: #2c3e50;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

body[data-theme="corporate-professional"] .card-input input:focus {
  border-color: white;
}

body[data-theme="corporate-professional"] .card-button {
  background: white;
  color: #2c3e50;
  font-weight: 600;
}

body[data-theme="corporate-professional"] .card-button:hover {
  background: #f8f9fa;
}

/* Theme Selector Styles */
.theme-selector {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.theme-toggle-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  border: 2px solid #667eea;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
}

.theme-menu {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: white;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-width: 220px;
  max-height: 400px;
  overflow-y: auto;
}

.theme-menu.hidden {
  display: none;
}

.theme-option {
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-option:hover {
  background: #f0f0f0;
}

.theme-option.active {
  background: #667eea;
  color: white;
}

.theme-preview {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
}

.theme-name {
  font-size: 14px;
  font-weight: 500;
}

/* Theme preview colors */
.theme-option[data-theme="modern-gradient"] .theme-preview {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.theme-option[data-theme="minimalist-white"] .theme-preview {
  background: white;
  border: 2px solid #000;
}

.theme-option[data-theme="neon-dark"] .theme-preview {
  background: #1a1a2e;
  border: 2px solid #00ff88;
}

.theme-option[data-theme="pastel-soft"] .theme-preview {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.theme-option[data-theme="retro-terminal"] .theme-preview {
  background: #0a0e27;
  border: 2px solid #33ff33;
}

.theme-option[data-theme="glass-morphism"] .theme-preview {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.5;
}

.theme-option[data-theme="material-design"] .theme-preview {
  background: #1976d2;
}

.theme-option[data-theme="neumorphic"] .theme-preview {
  background: #e0e5ec;
  box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.theme-option[data-theme="playful-colorful"] .theme-preview {
  background: #ffd93d;
  border: 2px solid #333;
}

.theme-option[data-theme="corporate-professional"] .theme-preview {
  background: #3498db;
}