/* ===============================
   基本設定（全要素に適用）
   =============================== */

/* paddingやborderを含めてサイズ計算する設定
   レイアウト崩れ防止の超重要設定 */
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  height: 100vh;          /* 画面の高さを使う */

  font-family: sans-serif;
  background: #f2f2f2;

  display: flex;          /* 中央配置 */
  justify-content: center;
  align-items: center;
}

/* ===============================
   外枠（ゲーム全体）
   高さ540px固定レイアウト
   =============================== */

.container {
  margin: 0 auto;         /* 中央寄せ */
  background: #ffffff;
  border: 2px solid #333;

  width: 100%;
  max-width: 1196px;
  height: 540px;          /* ゲーム総高さ固定 */

  display: flex;          /* 縦レイアウトを作るための土台 */
  flex-direction: column; /* 子要素を縦に並べる */
}


/* ===============================
   ヘッダー（高さ固定）
   =============================== */

.game-header {
  height: 50px;           /* 見た目の高さ */
  padding: 10px;
  background: #ffffff;

  /* flex: grow shrink basis
     grow:広がらない
     shrink:縮まない
     basis:50px固定 */
  flex: 0 0 50px;

  display: flex;
  align-items: center;    /* 縦中央 */
}


/* ===============================
   情報表示エリア
   =============================== */

.info {
  display: flex;
  justify-content: space-between; /* 左右に広げる */
  gap: 10px;
  font-weight: bold;
  flex-wrap: wrap;               /* 画面が狭い時は折り返す */
  width: 100%;
}


/* ===============================
   メインゲームエリア
   残り高さすべて使う
   =============================== */

.game-main {
  position: relative;     /* absolute配置の基準になる */
  background: #ffffff;

  flex: 1;                /* ★残りの高さを全部使う（超重要） */

  overflow: hidden;       /* はみ出し防止 */

  display: grid;
  place-items: center;    /* 中央配置のショート記法 */
}


/* ===============================
   ボタン共通デザイン
   =============================== */

.btn {
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #333;
  background: #fff;
  cursor: pointer;        /* マウスカーソル変更 */
  border-radius: 10px;

  /* なめらかな変化を作る */
  transition: background-color 0.15s ease,
              transform 0.05s ease;
}

/* マウスを乗せた時 */
.btn:hover {
  background: #d6f0ff;
}

/* 押した瞬間 */
.btn:active {
  transform: scale(0.98); /* 少し縮めて押し感を出す */
}


/* ===============================
   ねずみ（クリック対象）
   =============================== */

.mouse {
  position: absolute;     /* 画面内を自由に動かすため */
  width: 100px;
  height: 100px;

  background-image: url("mouse.png");
  background-size: cover;
  background-position: center;

  display: none;          /* 初期状態は非表示 */

  cursor: pointer;

  /* スマホのダブルタップ拡大防止 */
  touch-action: manipulation;
}


/* ===============================
   結果表示オーバーレイ
   =============================== */

.result {
  position: absolute;
  inset: 0;               /* top/right/bottom/left:0 の省略形 */

  display: none;          /* 初期は非表示 */

  /* 中央寄せ用flex */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;

  background: rgba(255, 255, 255, 0.9); /* 半透明 */
  text-align: center;
}


/* 結果タイトル */
.result-title {
  margin: 0;
  font-size: 22px;
}

/* 得点表示 */
.result-text {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

/* 新記録表示（JSで表示切替） */
.new-record {
  display: none;
  font-size: 20px;
  font-weight: bold;
}