/* ============================================================
   MindMine — スタイルシート
   PixiJS が生成する <canvas> を背景に固定し、
   HTML の UI 要素（スコア・ゲームオーバー等）を最前面に重ねる
   ============================================================ */

/* --- 全要素の余白リセット --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- ページ全体 --- */
body {
  background: #000;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  user-select: none;
}

/* PixiJS が body 直下に挿入する <canvas> を画面全体に固定する */
canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}


/* ============================================================
   左上UI（スコア・コンボ・敵数・Wave）
   ============================================================ */
#ui {
  position: fixed;
  top: 12px;
  left: 12px;
  color: #0f0;
  font-size: 14px;
  pointer-events: none;
  text-shadow: 0 0 6px #0f0;
  z-index: 10;
}

#ui div {
  margin-bottom: 5px;
}

#combo {
  color: #f0f;
  text-shadow: 0 0 8px #f0f;
  font-size: 16px;
}

#msg {
  color: #ff0;
  height: 20px;
  font-size: 13px;
}

/* ランク判定リアルタイムメーター */
#rank-meter {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

#rank-meter-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: #222;
  border: 1px solid #444;
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}

#rank-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #0f0;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
}

#rank-meter-hint {
  font-size: 10px;
  font-weight: bold;
}

/* ランク表示 */
#rank-display {
  font-size: 15px;
  color: #aaa;
  text-shadow: none;
  transition: color 0.3s, text-shadow 0.3s;
}

#rank-label {
  font-size: 20px;
  font-weight: bold;
}

/* ランク変動アニメーション用クラス（JS で付け外しする） */
#rank-display.rank-up {
  color: #0ff;
  text-shadow: 0 0 12px #0ff;
}

#rank-display.rank-down {
  color: #f44;
  text-shadow: 0 0 12px #f44;
}


/* ============================================================
   ゲームオーバー画面
   ============================================================ */
#gameover {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  color: #f00;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 100;
}

#gameover h1 {
  font-size: 64px;
  text-shadow: 0 0 24px #f00;
  letter-spacing: 4px;
}

#gameover .reason {
  font-size: 16px;
  color: #f88;
  margin-top: 8px;
}

#result-table {
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 18px;
}

#result-table th {
  color: #888;
  font-size: 13px;
  padding: 4px 20px;
  border-bottom: 1px solid #333;
}

#result-table td {
  padding: 6px 20px;
  text-align: center;
}

#result-table td:first-child {
  text-align: left;
  color: #888;
  font-size: 14px;
}

#result-table tr:nth-child(1) td:nth-child(2) { color: #ff0; }   /* スコア 今回 */
#result-table tr:nth-child(2) td:nth-child(2) { color: #f0f; }   /* コンボ 今回 */
#result-table tr:nth-child(3) td:nth-child(2) { color: #0ff; text-shadow: 0 0 8px #0ff; } /* ランク 今回 */
#result-table tr:nth-child(4) td:nth-child(2) { color: #0ff; text-shadow: 0 0 8px #0ff; } /* 撃破速度 今回 */

#result-table td:nth-child(3) { color: #555; font-size: 15px; }  /* 自己ベスト列 */

#gameover button {
  margin-top: 28px;
  padding: 12px 40px;
  font-size: 20px;
  background: #c00;
  color: #fff;
  border: 2px solid #f55;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  text-shadow: 0 0 6px #f00;
  transition: background 0.2s;
}

#gameover button:hover {
  background: #e00;
}


/* ============================================================
   画面下のキーマップインジケーター
   ============================================================ */
#version {
  position: fixed;
  bottom: 8px;
  right: 8px;
  color: #333;
  font-size: 10px;
  pointer-events: none;
  z-index: 10;
}

#keymap {
  position: fixed;
  bottom: 8px;
  left: 8px;
  font-size: 11px;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 660px;
  z-index: 10;
}

.ki {
  padding: 2px 5px;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  font-size: 10px;
  transition: all 0.15s;
  color: #333;
}

.ki.active {
  border-color: #09f;
  color: #09f;
  text-shadow: 0 0 5px #09f;
}

.ki.ready {
  border-color: #f80;
  color: #f80;
  text-shadow: 0 0 5px #f80;
}

.ki.dud {
  border-color: #444;
  color: #444;
}


/* ============================================================
   右上の操作ヒント
   ============================================================ */
#help {
  position: fixed;
  top: 12px;
  right: 12px;
  color: #333;
  font-size: 11px;
  line-height: 1.7;
  pointer-events: none;
  text-align: right;
  z-index: 10;
}


/* ============================================================
   右下の進化段階インジケーター
   ============================================================ */
#evo-bar {
  position: fixed;
  bottom: 44px;
  right: 12px;
  pointer-events: none;
  z-index: 10;
  text-align: right;
}

#evo-bar .evo-label {
  color: #555;
  font-size: 11px;
  margin-bottom: 3px;
}

#evo-track {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.evo-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #333;
  background: #222;
  transition: all 0.3s;
}

.evo-dot.lit {
  border-color: #f55;
  background: #c00;
  box-shadow: 0 0 6px #f00;
}

.evo-dot.final {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 12px #fff;
}


/* ============================================================
   カウントダウンオーバーレイ（3・2・1・START）
   ============================================================ */
#countdown-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 200;
  pointer-events: none;
}

#countdown-overlay.active {
  display: flex;
}

#countdown-num {
  font-size: 160px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #fff;
  text-shadow: 0 0 40px #0ff, 0 0 80px #0ff;
  text-align: center;
  white-space: pre;   /* \n で改行できるようにする */
}

/* 「PRESS ANY KEY」は文字が多いので小さくする */
#countdown-num.small {
  font-size: 48px;
  letter-spacing: 2px;
}