/* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  overflow: hidden;
}

#container {
  width: 90%;
  max-width: 600px;
  height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

/* タイトルの文字サイズを小さく調整 */
h1 {
  font-size: 24px; /* 適宜調整してください */
  margin-bottom: 10px; /* 余白も調整 */
  text-align: center;
}

#info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#info span {
  margin: 0 5px;
  line-height: 1;
  font-size: 16px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  flex-grow: 1;
  max-height: 100%; 
  aspect-ratio: 1 / 1;
}

.grid-button {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 24px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  border: 2px solid transparent; /* 初期状態は枠線なし */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* クリック後の枠線を黒に */
.grid-button.clicked {
  border-color: black !important;
}

/* /\* 0点および取得済みのマス *\/ */
/* .grid-button.zero, .grid-button.collected { */
/*   background-color: #d4f7c5; /\* 黄緑色 *\/ */
/*   color: transparent; /\* 数字を非表示 *\/ */
/* } */



.grid-button.visited {
    background-image: repeating-linear-gradient(
	45deg,
	#d3d3d3 0,
	#d3d3d3 1px,
	transparent 1px,
	transparent 7px
    );
    border-color: #d3d3d3; 
  /* background-color: gray !important; /\* 元いたマスを灰色に *\/ */
}

/* 0点のマス */
.grid-button.no-food {
  background-color: #fffdd0; /* 黄緑色 */
  color: transparent; /* 数字を非表示 */
}

/* 非0点マスの基本クラス */
.grid-button.food-patch {
  font-weight: bold;
  color: black;
}

/* /\* 1点のマス (黄緑色) *\/ */
/* .grid-button.thv { */
/*   background-color: #98FB98; /\* 黄緑色 *\/ */
/* } */

.grid-button.savanna {
  background-color: #f0e68c; /* 薄い黄色 (サバンナ) */
  color: transparent; /* フォントの色を透明にして表示を隠す */
}

.grid-button.forest {
  background-color: #77DD77; /* 黄緑色 (森林) */
}

.grid-button.thv-forest {
  background-color: #66CDAA; /* 濃い緑 (高品質THV森林) */
}

.grid-button.small-food-tree {
  background-color: #FFA07A; /* サーモン色 (小型食物樹) */
}

.grid-button.large-food-tree {
  background-color: #FF6347; /* トマト色 (大型食物樹) */
}


.grid-button.eaten {
  color: white; /* 食べたマスの数字を赤に */
}

.grid-button.start {
  border-color: red !important; /* 枠の色を赤に設定 */
}

.grid-button.ended {
  /* background-color: gray; /\* 灰色 *\/ */
  border-color: blue !important; /* 枠を青に設定 */
}

/* 無効化されたマス */
.grid-button.disabled {
    background-color: white; !important;
  cursor: not-allowed;
}


.neighbor-highlight {
  border: 2px dashed black; /* 点線の枠線 */
}



#message {
  font-size: 18px;
  color: green;
  font-weight: bold;
  height: 24px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#score-board, #ten-points, #five-points, #one-point, #timer {
  margin: 5px 0;
}