/* memory.css */

/* コンテナ全体 */
.memory-game-container {
    margin: 1rem auto;
    max-width: 600px;
    text-align: center;
  }
  
  /* カードの配置 */
  .memory-game-grid {
    display: grid;
    gap: 0.5rem;
    margin: 1rem auto;
    justify-content: center;
  }
  
  /* カード1枚の見た目 */
  .card {
    width: 80px;
    height: 80px;
    background-color: #444;
    border: 2px solid #777;
    cursor: pointer;
    position: relative;
  }
  
  /* 裏面（デフォルト）状態だとimgは非表示。
     JS側で .flipped を付与した時にimgを表示 */
  .card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
  }
  
  /* カードがめくられた状態 */
  .card.flipped img {
    display: block;
  }
  
  /* タイマーや結果表示 */
  .game-info {
    margin-bottom: 1rem;
  }
  
  /* スマホ対応 */
  @media (max-width: 480px) {
    .card {
      width: 60px;
      height: 60px;
    }
  }