/* style.css */
@charset "UTF-8";

body {
  background: darkslategray;
}

}

/* 全体のコンテナ */
.container {
  max-width: 90vw;
  margin: 0 auto;
  padding: 10px;
}
@media (min-width: 768px) {
  .container {
    max-width: 600px;  /* デスクトップ用 */
    margin: 0 auto;
    padding: 20px;
   }
}

/* ヘッダー */
.title {
  margin: 0 auto;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: 2rem;
  color: #fff;
  line-height: 3rem;
}
.exp {
  color: white;
  text-align: center;
}


/* テーブル（海域図） */
table {
  margin: 0 auto;
  width: 70%;
  border-collapse: collapse;
}

/* 各エリア */
td label {
  display: block;
  width: 100%;        /* テーブル幅に連動 */
  aspect-ratio: 1 / 1;  /* 正方形 */
  background: steelblue;
  border: 1px solid darkslateblue;
  cursor: crosshair;
}

/* チェックボックス非表示 */
input[type="checkbox"] {
  display: none;
}

/* 当たり・外れ */
#A1:checked + label {
  background: crimson;
}
#A2:checked + label {
  background: crimson;
}
#A3:checked + label {
  background: crimson;
}
#A4:checked + label {
  background: crimson;
} 
#A5:checked + label {
  background: crimson;
} 


/* 勝利判定 */
.win {
  opacity: 0;
}
table:has(#A1:checked):has(#A2:checked):has(#A3:checked):has(#A4:checked):has(#A5:checked)+ .win {
  opacity: 1;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: 3rem;
  color: springgreen;
  line-height: 4rem;
  text-shadow:
    0 0 5px mediumspringgreen,
    0 0 10px mediumspringgreen,
    0 0 20px mediumspringgreen;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}