body {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 修正点1: 背景画像を設定 */
    background-color: #f0f0f0;
    background-image: url('bg.png'); /* 画像のURLを設定 */
    background-repeat: repeat;
    background-size: cover; /* 画面全体にフィットさせる */
    background-attachment: fixed; /* 画像を固定 */
    font-family: Arial, sans-serif;
    
    /* 修正点2: 文字色を白、影をつけて可読性を上げる */
    color: #FFFFFF;
    text-shadow: 1px 1px 3px #000000;
  }
  
  /* タイトル文字を強調 */
  h1 {
      color: #FFD700; /* 金色 */
      text-shadow: 2px 2px 4px #000000;
  }
  
  h2 {
      color: #FFFFFF; /* スクリーン内の見出しも白に */
      text-shadow: 1px 1px 3px #000000;
  }
  
  canvas {
    /* ★修正点3: 枠線を削除し、背景を透明に */
    /* border: 4px solid #FFD700; ← この行を削除/コメントアウトしました */
    background-color: transparent; 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* 影は維持 */
  }
  
  #message-area {
    height: 120px; /* メッセージ表示領域を拡張 */
    margin-top: 10px;
    text-align: center;
    width: 600px;
    /* 修正点4: 背景を透明にする */
    background-color: transparent; 
    border-radius: 8px;
    padding: 5px;
  }
  
  .message-line {
    padding: 2px 0;
    font-size: 18px;
    color: #FFFFFF; /* メッセージの文字色も白に */
  }
  
  /* ボタンのスタイル */
  .game-button {
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    margin: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000000;
  }
  .mode-button {
    width: 280px; /* モードボタンの幅を統一 */
    color: white;
    font-weight: bold;
  }
  #modeSoloButton { background-color: #4CAF50; }
  #modeAiButton { background-color: #007bff; }
  #modeTwoPButton { background-color: #FF4500; }
  #modeThreePButton { background-color: #8A2BE2; }
  #modeFourPButton { background-color: #DAA520; }
  #modeMultiPButton { background-color: #32CD32; }
  
  /* --- 画面制御 CSS --- */
  .screen {
    display: none; /* 初期状態では全ての画面を非表示にする */
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    /* 修正点5: メニュー画面の背景を透明にする */
    background-color: transparent; 
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 650px; /* 画面の最大幅を設定 */
  }
  #mode-screen button, #display-screen button, #level-screen button {
    margin: 10px;
    padding: 15px 30px;
    font-size: 24px;
  }
  #name-input-screen input {
    padding: 8px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 150px;
    color: #000000; /* 入力文字は黒 */
  }
  #name-input-screen label {
      color: #FFFFFF;
      text-shadow: 1px 1px 2px #000000;
  }
  #name-input-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 500px;
    background-color: transparent; /* 入力エリアの背景も透明に */
  }
  #confirmNames {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    margin-top: 20px;
  }