/* styles.css */
*, *::before, *::after {
    box-sizing: border-box;
}


/* 全体の設定 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ゲームボード */
#game-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* カードの幅に基づいて列を自動調整 */
    justify-items: center;
    align-items: start;
    gap: 10px; /* カード間のギャップ */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    height: auto; /* Grid内のアイテムに基づいて高さを自動調整 */
    border: 1px solid #000;
    padding: 20px; /* Grid内の余白 */
}

/* カードの基本スタイル */
.card {
    width: 90px;
    height: 140px;
    cursor: move;
    user-select: none;
    position: absolute;

    box-sizing: border-box;
}


/* 影のカード　*/
.shadow-card {
    width: 90px; /* カードと同じサイズ */
    height: 140px; /* カードと同じサイズ */
    border: 1px dashed #ccc; /* 影のカードを示すための枠線 */
    box-sizing: border-box;
}





/* その他のスタイリングはそのまま維持 */




.hide {
    display: none; /* 非表示にする */
}

/* styles.cssの既存のコードに追加 */

#discard-zone {
    width: 100%;
    height: 100px;
    border: 2px dashed #aaa;
    position: relative; /* absoluteからrelativeに変更 */
    z-index: 10; /* Any integer value */

    bottom: auto; /* bottomプロパティは削除またはautoに設定 */
    background-color: #f9f9f9;
    text-align: center;
    line-height: 100px;
    color: #aaa;
}

.card.dragging {
    opacity: 0.5;
    z-index: 1000; /* Ensure the dragging card appears above other elements */
}


.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を付ける */
}



/* ドラッグアンドドロップ操作中にドロップゾーンがアクティブな状態を示すスタイル */
#discard-zone.active {
    background-color: #e1e1e1;
    border-color: #000;
    color: #333;
}

.card {
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* 非プレフィックスバージョン */
}

#game-container {
   /* position: relative;  ゲームボードとドロップゾーンのコンテナ */
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
   padding: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   background-color: #fff;

}

.card-front {
    /* Specific styles for the front */
    color: #333; /* Dark text for the front */
    background-color: #a8cff4; /* Light background for the front */
}

.card-back {
    /* Specific styles for the back */
    color: #fff; /* Light text for the back */
    background-color: #787878; /* Dark background for the back */
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    /* その他のスタイル */
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 32px; /* Adjust the font size as needed */
    text-align: center; /* Center the text */
    line-height: 50px; /* Adjust based on card size for vertical alignment */

}

.display-section {
    font-family: 'Arial', sans-serif; /* フォントファミリーを設定 */
  color: #333; /* テキストの色 */
  text-align: center; /* テキストを中央揃え */
  margin: 0 auto; /* 中央に配置 */
  padding: 20px; /* 内側の余白 */
}

/* 'display-section'クラス内の直接の子であるdiv要素に適用するスタイル */
.display-section > div {
    margin-top: 10px;
    font-size: 20px; /* フォントサイズを指定 */
    line-height: 2; /* 行の高さを指定 */
  }
  
  /* 'display-section'クラス内のボタンにも同様のスタイルを適用する */
  .display-section > button {
    margin-left: 10px; /* ボタンの左に隙間を作る */
  }

  /* ボタンの基本スタイル */
button {
    background-color: #f2f2f2; /* 背景色 */
    color: #333; /* 文字色 */
    padding: 10px 20px; /* 内側の余白 */
    border: none; /* 枠線なし */
    border-radius: 5px; /* 角の丸み */
    cursor: pointer; /* ホバー時のカーソルを指マークに */
    transition: background-color 0.3s; /* 背景色の変化を滑らかに */
  }
  
  /* ボタンにマウスを置いたときのスタイル */
  button:hover {
    background-color: #ddd; /* 背景色を少し暗く */
  }
  
  /* ボタンがアクティブ（押されている）状態のスタイル */
  button:active {
    background-color: #ccc; /* 背景色をさらに暗く */
    transform: translateY(2px); /* ボタンを少し下に動かす */
  }


/* appページのスタイル */

  
  
  header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1em 0;
  }
  
  .navigation {
    list-style: none;
    padding: 0;
  }
  .navigation li {
    display: inline;
    margin: 0 10px;
  }
  .navigation a {
    color: white;
    text-decoration: none;
  }
  




  
/* メディアクエリ：幅600px以下のデバイス用 */
@media (max-width: 600px) {
    #game-board {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Adjust to match card size on small screens */
    }

    .card, .shadow-card {
        width: 80px;
        height: 120px;
    }

    .display-section > button {
        margin-left: 5px; /* 小さい画面ではボタン間の隙間を減らす */
        padding: 5px 10px; /* パディングも小さく調整 */
      }
      
      /* ボタンを縦に並べる */
      .display-section {
        display: flex;
        flex-direction: column;
        align-items: center; /* 中央揃え */
      }
    
      button {
        margin-bottom: 5px; /* ボタンの下の隙間を作る */
        width: 100%; /* ボタンの幅を親要素いっぱいに広げる */
      }
}