/* style.css
   盤面グリッド・色分け・Game Over表示・全体レイアウトを定義する。
   ネットワークAPI（fetch/XMLHttpRequest/WebSocket）は使用しない。
*/

:root {
  --cell-size: 24px;
  --board-cols: 10;
  --board-rows: 20;
}

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #1e1e2e;
  color: #f0f0f0;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#game-info {
  display: flex;
  gap: 24px;
  font-size: 1.1rem;
  font-weight: bold;
}

#instructions {
  font-size: 0.85rem;
  color: #aaaaaa;
  text-align: center;
}

/* 盤面: 横10マス x 縦20マスのCSS Grid */
#board {
  display: grid;
  grid-template-columns: repeat(var(--board-cols), var(--cell-size));
  grid-template-rows: repeat(var(--board-rows), var(--cell-size));
  border: 2px solid #555;
  background-color: #111;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border: 1px solid #2a2a2a;
  box-sizing: border-box;
}

.cell-empty {
  background-color: #111;
}

.cell-I {
  background-color: #00f0f0; /* シアン */
}

.cell-O {
  background-color: #f0f000; /* 黄 */
}

.cell-T {
  background-color: #a000f0; /* 紫 */
}

.cell-S {
  background-color: #00f000; /* 緑 */
}

.cell-Z {
  background-color: #f00000; /* 赤 */
}

.cell-J {
  background-color: #0000f0; /* 青 */
}

.cell-L {
  background-color: #f0a000; /* オレンジ */
}

/* Game Over表示: 盤面中央に半透明オーバーレイで重ねて表示する */
#game-over {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7);
}

#game-over[hidden] {
  display: none;
}
</content>