body {
  font-family: sans-serif;
  
  
}




/* ボード */
.board {
  display: grid;
  grid-template-columns: repeat(5, 60px);
  grid-template-rows: repeat(4, 60px);
  gap: 8px;
  justify-content: center;

    margin-top: 20px;
    
  
}

.cell {
  background: #f8f3d4;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  border: 1px solid #ccc;
}

/* 入力履歴の・を消す */
#historyList {
  list-style: none;
  padding-left: 0;
}

/*入力文字のハイライト*/
.highlight {
  background-color: #ffe08c !important;
  border: 2px solid #ff9f1c !important;
}

/* ==========================
   結果表示パネル
========================== */
.result {
  margin: 30px auto;
  padding: 20px;
  width: 300px;
  background: #e6f7ff;
  border: 2px solid #6cb2eb;
  border-radius: 12px;
  text-align: center;
}

.result h2 {
  margin-top: 0;
}

.result button {
  margin-top: 15px;
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  background: #6cb2eb;
  color: white;
  cursor: pointer;
}

.result button:hover {
  background: #4a9bdc;
}




/* 文字盤＋履歴の横並び */
#gameArea {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin-top: 20px; /* ★ ここでまとめて調整 */
}



/* 入力履歴 */
#history {
    margin-top: 60px;  /* ← キャラ分の余白 */
  width: 180px;
  max-height: 320px;
  overflow-y: auto;
  border: 2px solid #ccc;
  padding: 10px;
  background: #fafafa;
  font-size: 14px;
}

/* 結果表示中は入力履歴をコンパクトに */
#history.result-mode {
  max-height: 180px;   /* ← 好みで 150〜220 */
  margin-top: 20px;    /* 上も詰める */
}


#history h3 {
  margin-top: 0;
  text-align: center;
  font-size: 14px;
}

#historyList {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#historyList li {
  padding: 2px 0;
  border-bottom: 1px dotted #ccc;
}




#roundBoards {
  width: 190;
  max-height: 220px;   /* ← 縦を短く */
  overflow-y: auto;
  margin-right: 12px;
  margin-top: 50px  /**/
}


.roundBoard {
  margin-bottom: 12px;
}

.roundBoard h4 {
  margin: 4px 0;
  font-size: 13px;
}

.roundGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.roundCell {
  border: 1px solid #aaa;
  text-align: center;
  padding: 4px 0;
  font-size: 14px;
}

/*スタートメニュー画面*/
.screen {
  text-align: center;
  margin-top: 60px;
}

.hidden {
  display: none !important;
}


.volumeBox {
  margin-top: 20px;
}

/* ==========================
   遊び方スライドパネル
   ========================== */


/*
=========================
中央固定
=========================
*/

/* 画面全体 */
#appRoot {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #9de76b; /* 外側は余白 */
}

#centerWrapper {
  display: flex;
  align-items: flex-start;
}


/* 広告枠 */
#adArea {
  width: 300px;
  min-height: 600px;
  margin-left: 40px;   /* ←「少し右」はここ */
  background: #f0f0f0;
  border-radius: 12px;
  padding: 8px;
  font-size: 14px;
  color: #666;
}

#adContainer {
  min-height: 250px;
}


/* ゲーム枠 */
#gameContainer {
  width: 600px;        /* ←寿司打感の要 */
  height: 610px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 16px;
  position: relative;


}

#titleLogo {
  width: 240px;
  margin: 0 auto 16px;
  display: block;
}


#titleLogo.logo-top-right {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 120px;
}

/* ロゴ分の上余白 */
.with-logo-offset {
  padding-top: 80px; /* ロゴ高さ + 余裕 */
}


#statusArea {
  position: absolute;
  top: 50px;
  right: 60px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}


/* キャラサイズ */
#character {
  width: 90px;
}

/* 吹き出し */
#speechBubble {
  position: relative;   /* ← これ超重要 */
  background: #fff;
  border: 2px solid #333;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
}

/* 吹き出しのしっぽ */
#speechBubble::before {
  content: "";
  position: absolute;
  left: -12px;          /* ← 吹き出し左側に密着 */
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 12px 8px 0;
  border-style: solid;
  border-color: transparent #333 transparent transparent;
}

#speechBubble::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 10px 6px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}


#boardArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;/* 吹き出しとの余白 */
}

/* プレイ中だけ下にずらす */
/* プレイ中のみ上に余白を作る */
#gameArea.playing-offset {
  margin-top: 160px  /* ← 好みで調整（120〜160px） */
}

#bonusMessage {
  position: absolute;
  top: 100%;            /* 吹き出しの真下 */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;

  font-size: 14px;
  font-weight: bold;
  color: #ff6b00;
  white-space: nowrap;
  pointer-events: none;

  animation: fadeUp 1.5s ease forwards;
}



#bubbleWrapper {
  position: relative;   /* ← これが超重要 */
}


#gameArea.playing-offset #wordInput {
  margin-top:30px;
  width: 260px;
  height: 40px;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 8px;
}



/* プレイ中：文字盤の背景 */
#gameArea.playing-offset #boardArea {
  position: relative;
}

#gameArea.playing-offset #boardArea::before {
  content: "";
  position: absolute;
  inset: -10px;              /* 文字盤より少し広め */
  background-image: url("../img/shichirin.jpg"); /* ← 使いたい画像 */
  background-size: cover;
 background-position: calc(50% + 5px)-30px;
  background-repeat: no-repeat;
  opacity: 0.8;             /* 薄くする（重要） */
  border-radius: 16px;
  z-index: 0;
  
}

/* 文字盤と入力欄を前面に */
#gameArea.playing-offset #board,
#gameArea.playing-offset #wordInput,
#gameArea.playing-offset #error {
  position: relative;
  z-index: 1;
}


#scoreSummary {
  margin: 12px auto 20px;
   margin-top: -50px;  /* ← 数値は好みで調整 */
  width: 90%;
  background: #fff8dc;
  border: 2px solid #e6c55b;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
}

#scoreSummary h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

#scoreSummary hr {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 8px 0;
}






/* ふわっと出る */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}


/* ==========================
   🖥 PC専用UI（固定）
========================== */
@media (min-width: 769px) {

  #appRoot {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9de76b;
  }

  #centerWrapper {
    display: flex;
    align-items: flex-start;
  }

  #gameContainer {
    width: 600px;
    height: 610px;
  }

  #adArea {
    width: 300px;
    min-height: 600px;
    margin-left: 40px;
    position: static;
  }
}



/* ==========================
   📱 スマホUI（確定・完全版）
   ========================== */
@media (max-width: 768px) {

  /* 横スクロール完全防止 */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
  }

  /* ===== 全体 ===== */
  #appRoot {
    display: block;
    width: 100%;
    min-height: 100dvh;
    background: #9de76b;
  }

  #centerWrapper {
    display: block;
    width: 100%;
  }

  /* ===== ヘッダー ===== */
  header {
    position: fixed;
    top: 0;
    left: 0;
    height: 56px;
    width: 100%;
    z-index: 1000;
  }

  /* ===== ゲーム枠 ===== */
  #gameContainer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 64px 8px 100px; /* 上:ヘッダー 下:広告 */
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    box-sizing: border-box;
     padding-bottom: 100px; /* ← 広告90px + 余白 */
  }

  /* ===== ロゴ ===== */
  #titleLogo {
    width: 160px;
    margin: 8px auto;
    display: block;
  }

  #titleLogo.logo-top-right {
    position: static;
  }

  /* ===== キャラ・吹き出し ===== */
  #statusArea {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
  }

  #character {
    width: 60px;
  }

  #speechBubble {
    font-size: 12px;
    padding: 8px 10px;
  }

  /* ===== ゲームエリア ===== */
  #gameArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  #gameArea.playing-offset {
    margin-top: 0;
  }

  /* ===== 文字盤 ===== */
  .board {
    width: 100%;
    max-width: 340px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .cell {
    height: 52px;
    font-size: 22px;
  }

  /* ===== 入力欄 ===== */
  #wordInput {
    width: 90%;
    height: 44px;
    font-size: 18px;
  }

  /* ===== ラウンド盤 ===== */
  #roundBoards {
    width: 100%;
    max-width: 360px;
    max-height: 180px;
    overflow-y: auto;
  }

  /* ===== 履歴 ===== */
  #history {
    width: 100%;
    max-width: 360px;
    max-height: 160px;
    font-size: 13px;
    margin: 0 auto;
  }

  /* ===== 文字数内訳 ===== */
  #lengthStats {
    width: 100%;
    max-width: 360px;
    margin: 8px auto;
  }

  /* ===== 結果画面 ===== */
  #resultPanel {
    width: 100%;
    max-width: 360px;
    max-height: calc(100dvh - 56px - 90px);
    overflow-y: auto;
    margin: 0 auto;
  }

  /* ===== 広告（常時表示） ===== */
  #adArea {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    border-radius: 0;
    z-index: 999;
    background: #f0f0f0;
  }

  /* ===== ハンバーガー ===== */
  .header-nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    width: 100%;
    background: #eee;
    flex-direction: column;
  }

  .header-nav.open {
    display: flex;
  }

  .hamburger {
    font-size: 24px;
    cursor: pointer;
  }
}