:root {
  --grid-size: min(90vw, 90vh, 500px);
  --border-thin: 1px solid #c8b060;
  --border-thick-size: 3px;
  --border-thick-color: #222;
}

#grid-container {
  width: var(--grid-size);
  height: var(--grid-size);
  display: grid;
  background: #fff8e1;
  border: var(--border-thick-size) solid var(--border-thick-color);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.cell {
  position: relative;
  border-right: var(--border-thin);
  border-bottom: var(--border-thin);
  border-top: none;
  border-left: none;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  /* Tamanho fixo garantido pelo CSS Grid — não cresce com conteúdo */
  min-width: 0;
  min-height: 0;
}

.cell:hover { background: rgba(245, 200, 66, 0.25); }

/* Area borders — thick sides */
.cell.bt { border-top: var(--border-thick-size) solid var(--border-thick-color); }
.cell.br { border-right: var(--border-thick-size) solid var(--border-thick-color); }
.cell.bb { border-bottom: var(--border-thick-size) solid var(--border-thick-color); }
.cell.bl { border-left: var(--border-thick-size) solid var(--border-thick-color); }