/* =====================================================
   色を変数でまとめて定義
   後でデザインを変更しやすくするために使う
===================================================== */
:root {
  --color-bg-page: #f2f2f2;
  --color-bg-main: #ffffff;
  --color-text: #333;
  --color-accent: #4da6ff;
  --color-accent-shadow: #2d7cd3;
  --color-result: #ff6f61;
}

/* すべての要素で box-sizing を border-box にする
   padding や border を含めたサイズ計算になり、レイアウトが扱いやすくなる */
* {
  box-sizing: border-box;
}

/* html 全体の高さと余白設定 */
html {
  height: 100%;
  margin: 0;
}

/* body 全体の見た目と中央配置設定 */
body {
  min-height: 100vh; /* 画面の高さ以上にする */
  margin: 0;
  display: flex;
  align-items: center;     /* 縦方向中央 */
  justify-content: center; /* 横方向中央 */
  font-family: sans-serif;
  background: var(--color-bg-page);
}

/* アプリ全体を包む枠 */
.container {
  width: 100%;
  max-width: 960px;
  height: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* 上から下に並べる */
  background: var(--color-bg-main);
  border: 2px solid var(--color-text);
}

/* ヘッダー部分 */
.game-header {
  flex: 0 0 50px; /* 高さ50px固定 */
  height: 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background: var(--color-bg-main);
}

/* ヘッダー内の情報エリア */
.info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右に広げる */
  gap: 10px;
  font-weight: bold;
}

/* 右側スペース用 */
.info-right {
  min-width: 1px;
}

/* ゲームのメイン表示領域 */
.game-main {
  position: relative; /* 結果表示や正解マークを重ねるため */
  flex: 1;
  display: grid;
  place-items: center; /* 中央配置 */
  overflow: hidden;
  background: var(--color-bg-main);
}

/* 非表示にしたい要素用クラス */
.is-hidden {
  display: none;
}

/* 共通ボタンデザイン */
.btn {
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background: #fff;
  border: 2px solid var(--color-text);
  border-radius: 10px;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

/* マウスを乗せたときの見た目 */
.btn:hover {
  background: #d6f0ff;
}

/* 押した瞬間の見た目 */
.btn:active {
  transform: scale(0.98);
}

/* 結果表示オーバーレイ
   画面全体に重ねて表示する */
.result {
  position: absolute;
  inset: 0; /* top/right/bottom/left を全部0にする省略記法 */
  z-index: 20;
  display: none; /* 初期は非表示 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
}

/* 結果タイトル */
.result-title {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--color-text);
}

/* 結果本文 */
.result-text {
  font-size: 22px;
  font-weight: bold;
  color: var(--color-text);
}

/* 新記録メッセージ
   初期状態は非表示 */
.new-record {
  display: none;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-result);
}

/* クイズ表示エリア */
.quiz-area {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* お題の絵文字表示 */
.quiz-emoji {
  margin-bottom: 34px;
  font-size: 72px;
  line-height: 1;
}

/* 文字ボックスを並べる親要素 */
.letter-container {
  display: flex;
  flex-wrap: wrap; /* 画面幅に応じて折り返す */
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* 1文字ずつのボックス */
.letter-box {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab; /* ドラッグできる見た目 */
  user-select: none; /* 文字選択を防ぐ */
  font-size: 46px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  background: var(--color-accent);
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--color-accent-shadow);
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}

/* ホバー時に少し浮かせる */
.letter-box:hover {
  transform: translateY(-3px);
}

/* 押したときに少し沈む */
.letter-box:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--color-accent-shadow);
}

/* ドラッグ中の見た目 */
.letter-box.dragging {
  opacity: 0.75;
  transform: scale(1.08);
}

/* 正解時に表示する丸印 */
.correct-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  font-size: 120px;
  opacity: 0.9;
  pointer-events: none; /* 操作を邪魔しない */
  transform: translate(-50%, -50%) scale(1);
}