html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
}
#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;          
  justify-content: center;      
  gap: 16px;
}


#board {
  display: flex;
  flex-direction: column; 
  gap: 8px;               
}
.row {
  display: flex;        
  gap: 8px;              
}


.cell {
  width: 90px;
  height: 90px;
  border: 2px solid #333;
  background: #fafafa;
  display: flex;             
  align-items: center;
  justify-content: center;
  font-size: 56px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}


#board.disabled .cell {
  pointer-events: none;
  cursor: default;
  opacity: 0.7;
}


.cell.win {
  background: #dfffe3;
  border-color: #2e7d32;
}


.cell:hover { background: #f1f1f1; }

.cell { width: clamp(70px, 18vw, 90px); height: clamp(70px, 18vw, 90px); }


#resetBtn { padding: 8px 14px; font-size: 14px; }
#status   { min-height: 1.2em; }