@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

body {
  background-color: #1a1c1d;
  color: #e0e0e0;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

#content {
  background: linear-gradient(145deg, #232729, #1a1c1d);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid #3d4143;
  max-width: 340px;
  text-align: center;
}

/* パズルグリッドの整形 */
.puzzle-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.row {
  display: flex;
}

.panel {
  width: 95px;
  height: 95px;
  background: #1a1c1d;
  color: #00f2ff !important; 
  font-family: 'Orbitron', sans-serif;
  font-size: 55px;
  border: 1px solid #00f2ff;
  border-radius: 4px;
  margin: 4px;
  cursor: pointer;
  text-shadow: 0 0 10px #00f2ff, 0 0 20px #00f2ff;
  box-shadow: 0 0 5px rgba(0, 242, 255, 0.2), inset 0 0 10px rgba(0, 242, 255, 0.1);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center; /* 中心を軸に弾ませる */
  will-change: transform, opacity; /* パフォーマンス向上 */
}

.panel:active {
  transform: scale(0.95);
  background: #00f2ff;
  color: #1a1c1d !important;
  text-shadow: none;
}

/* 操作パネル */
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button-group {
  display: flex;
  gap: 5px;
}

.bot {
  flex: 1;
  height: 50px;
  background: #4a4e50;
  color: #ffffff !important;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

#tebo {
  background: #e74c3c; /* 印象的な赤 */
  color: #ffffff !important; /* 文字を白に強制 */
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ラベルと英文のスタイル */
.label {
  color: #4da6ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  margin-bottom: 5px;
}

.en {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* 解答エリアの演出 */
#kotae {
  width: 100%;
  height: 50px;
  background: #000;
  color: #2ecc71 !important;
  border: 1px dashed #2ecc71;
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  margin-top: 10px;
  cursor: default;
}

#hyouji {
  width: 100%;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: 'Orbitron', sans-serif;
  font-size: 34px;        /* さらに少しだけ大きく */
  /* 発色の良い赤。影を濃くして浮き立たせます */
  color: #ff0033;         
  text-shadow: 
    0 0 5px #000,         /* 文字の輪郭を黒で引き締める */
    0 0 10px #ff0033, 
    0 0 20px #ff0033;
    
  margin: 20px 0;
  font-weight: 700;       /* 太めに設定 */
  background: rgba(0,0,0,0.3); /* 背景を少しだけ暗くして文字を浮かせる */
  border-radius: 8px;
}

/* クリア時の特別な演出 */
.complete-glow {
  animation: flash-neon 0.5s ease-in-out infinite alternate !important;
}

@keyframes flash-neon {
  from { text-shadow: 0 0 10px #2ecc71, 0 0 20px #2ecc71; color: #2ecc71; }
  to { text-shadow: 0 0 30px #2ecc71, 0 0 50px #2ecc71, 0 0 70px #2ecc71; color: #fff; }
}

/* 背景が動く演出（contentに付与） */
.victory-bg {
  background: linear-gradient(270deg, #1a1c1d, #2ecc71, #1a1c1d) !important;
  background-size: 400% 400% !important;
  animation: gradient-move 3s ease infinite !important;
}

@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 1. 親要素を「舞台」にする設定 */
.puzzle-grid {
  position: relative; /* 子要素（パネル）を自由な位置に置くための基準 */
  width: 310px;        /* パネル3枚分(95px*3) + 隙間を考慮したサイズ */
  height: 310px;
  margin: 0 auto 15px; /* 中央寄せ */
}

/* 2. 行（row）の制限を解除 */
.row {
  display: block;      /* 元のflexを解除して、重なりを防ぐ */
  height: 0;           /* 高さをなくして、パネルの配置に干渉させない */
}

/* 3. パネルを「座標指定」できる状態にする */
.panel {
  position: absolute;  /* これで top/left ではなく JSの x/y で動かせるようになります */
  margin: 0 !important; /* JSで位置制御するため、CSSのマージンは邪魔になります */
  top: 0;              /* 基準点を左上に固定 */
  left: 0;
  transition: none !important; /* CSSのアニメーションはGSAPと競合するのでオフ */
}