/* テーマスタイル */

:root {
  /* デフォルトテーマ */
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --accent-primary: #0f3460;
  --accent-secondary: #e94560;
  --text-primary: #ffffff;

  /* ゲーム要素色 */
  --paddle-color: #e94560;
  --ball-color: #ffffff;

  /* ブロック色 */
  --block-normal: var(--accent-secondary);
  --block-strong: #ffa500;
  --block-super: #ff4444;
  --block-unbreakable: #666666;
  --block-bomb: #ff0000;

  /* パワーアップ色 */
  --powerup-expand: #00ff00;
  --powerup-shrink: #ffff00;
  --powerup-slow: #00ffff;
  --powerup-multiball: #ff00ff;

  /* UI色 */
  --ui-background: rgba(0, 0, 0, 0.8);
  --ui-border: #e94560;
  --button-primary: #e94560;
  --button-secondary: #0f3460;
}

/* 宇宙テーマ */
.theme-space {
  --bg-primary: #0f0c29;
  --bg-secondary: #302b63;
  --accent-primary: #24243e;
  --accent-secondary: #11998e;
  --text-primary: #ffffff;

  --paddle-color: #11998e;
  --ball-color: #38ef7d;

  --block-normal: #11998e;
  --block-strong: #ff6b6b;
  --block-super: #4ecdc4;
  --block-unbreakable: #556270;
  --block-bomb: #ff6b6b;

  --powerup-expand: #38ef7d;
  --powerup-shrink: #f7ff00;
  --powerup-slow: #00d2ff;
  --powerup-multiball: #ff00ff;

  --ui-background: rgba(15, 12, 41, 0.9);
  --ui-border: #11998e;
  --button-primary: #11998e;
  --button-secondary: #24243e;
}

/* オーシャンテーマ */
.theme-ocean {
  --bg-primary: #1a2980;
  --bg-secondary: #26d0ce;
  --accent-primary: #2b32b2;
  --accent-secondary: #1488cc;
  --text-primary: #ffffff;

  --paddle-color: #1488cc;
  --ball-color: #ffffff;

  --block-normal: #1488cc;
  --block-strong: #ff8c00;
  --block-super: #00b4db;
  --block-unbreakable: #2b32b2;
  --block-bomb: #ff416c;

  --powerup-expand: #7fff00;
  --powerup-shrink: #ffd700;
  --powerup-slow: #00ffff;
  --powerup-multiball: #ff00ff;

  --ui-background: rgba(26, 41, 128, 0.9);
  --ui-border: #26d0ce;
  --button-primary: #26d0ce;
  --button-secondary: #2b32b2;
}

/* フォレストテーマ */
.theme-forest {
  --bg-primary: #134e5e;
  --bg-secondary: #71b280;
  --accent-primary: #2c3e50;
  --accent-secondary: #27ae60;
  --text-primary: #ffffff;

  --paddle-color: #27ae60;
  --ball-color: #ffffff;

  --block-normal: #27ae60;
  --block-strong: #f39c12;
  --block-super: #e74c3c;
  --block-unbreakable: #34495e;
  --block-bomb: #c0392b;

  --powerup-expand: #2ecc71;
  --powerup-shrink: #f1c40f;
  --powerup-slow: #3498db;
  --powerup-multiball: #9b59b6;

  --ui-background: rgba(19, 78, 94, 0.9);
  --ui-border: #71b280;
  --button-primary: #71b280;
  --button-secondary: #2c3e50;
}

/* レトロテーマ */
.theme-retro {
  --bg-primary: #2d1b69;
  --bg-secondary: #1f0c3d;
  --accent-primary: #8a2be2;
  --accent-secondary: #ff00ff;
  --text-primary: #00ff00;

  --paddle-color: #ff00ff;
  --ball-color: #00ff00;

  --block-normal: #ff00ff;
  --block-strong: #ffff00;
  --block-super: #ff0000;
  --block-unbreakable: #4b0082;
  --block-bomb: #ff4500;

  --powerup-expand: #00ff00;
  --powerup-shrink: #ffff00;
  --powerup-slow: #00ffff;
  --powerup-multiball: #ff00ff;

  --ui-background: rgba(45, 27, 105, 0.9);
  --ui-border: #ff00ff;
  --button-primary: #ff00ff;
  --button-secondary: #8a2be2;
}

/* テーマモーダルのスタイル */
.theme-modal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-modal-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.theme-modal[style*="display: flex"] {
  opacity: 1;
}

.theme-modal[style*="display: flex"] .theme-modal-content {
  transform: scale(1);
}

.close-theme-modal:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* テーマセレクターのスタイル */
.theme-selector {
  background: var(--ui-background);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  margin: 20px 0;
}

.theme-selector-header h3 {
  margin: 0 0 15px 0;
  color: var(--text-primary);
  text-align: center;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.theme-option {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-primary);
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.theme-option.active {
  border-color: var(--accent-secondary);
  background: rgba(255, 255, 255, 0.15);
}

.theme-preview {
  width: 40px;
  height: 20px;
  border-radius: 4px;
  margin: 0 auto 8px auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.theme-option span {
  font-size: 12px;
  font-weight: bold;
}

/* テーマモーダルのボタンスタイル */
#theme-back-to-title {
  width: 100%;
  max-width: 200px;
  margin: 10px auto !important;
}

#game-container {
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
  transition: background 0.5s ease;
}