#board-container {
  flex-shrink: 0;
}

#board {
  display: grid;
  grid-template-columns: 100px repeat(9, 70px) 100px;
  grid-template-rows: 100px repeat(9, 70px) 100px;
  border: 3px solid #333;
  background: #c8e6c9;
  position: relative;
}

/* Center area */
#board-center {
  grid-column: 2 / 11;
  grid-row: 2 / 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#pot-display {
  font-size: 16px;
  font-weight: 700;
  color: #2e7d32;
  background: rgba(255,255,255,0.7);
  padding: 6px 16px;
  border-radius: 6px;
  border: 2px solid #2e7d32;
}

.center-title {
  font-size: 28px;
  font-weight: 900;
  color: #c0392b;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* Corners */
.space[data-pos="0"]  { grid-column: 11; grid-row: 11; }
.space[data-pos="10"] { grid-column: 1;  grid-row: 11; }
.space[data-pos="20"] { grid-column: 1;  grid-row: 1; }
.space[data-pos="30"] { grid-column: 11; grid-row: 1; }

/* Bottom row: positions 1-9 (right to left) */
.space[data-pos="1"]  { grid-column: 10; grid-row: 11; }
.space[data-pos="2"]  { grid-column: 9;  grid-row: 11; }
.space[data-pos="3"]  { grid-column: 8;  grid-row: 11; }
.space[data-pos="4"]  { grid-column: 7;  grid-row: 11; }
.space[data-pos="5"]  { grid-column: 6;  grid-row: 11; }
.space[data-pos="6"]  { grid-column: 5;  grid-row: 11; }
.space[data-pos="7"]  { grid-column: 4;  grid-row: 11; }
.space[data-pos="8"]  { grid-column: 3;  grid-row: 11; }
.space[data-pos="9"]  { grid-column: 2;  grid-row: 11; }

/* Left column: positions 11-19 (bottom to top) */
.space[data-pos="11"] { grid-column: 1; grid-row: 10; }
.space[data-pos="12"] { grid-column: 1; grid-row: 9; }
.space[data-pos="13"] { grid-column: 1; grid-row: 8; }
.space[data-pos="14"] { grid-column: 1; grid-row: 7; }
.space[data-pos="15"] { grid-column: 1; grid-row: 6; }
.space[data-pos="16"] { grid-column: 1; grid-row: 5; }
.space[data-pos="17"] { grid-column: 1; grid-row: 4; }
.space[data-pos="18"] { grid-column: 1; grid-row: 3; }
.space[data-pos="19"] { grid-column: 1; grid-row: 2; }

/* Top row: positions 21-29 (left to right) */
.space[data-pos="21"] { grid-column: 2;  grid-row: 1; }
.space[data-pos="22"] { grid-column: 3;  grid-row: 1; }
.space[data-pos="23"] { grid-column: 4;  grid-row: 1; }
.space[data-pos="24"] { grid-column: 5;  grid-row: 1; }
.space[data-pos="25"] { grid-column: 6;  grid-row: 1; }
.space[data-pos="26"] { grid-column: 7;  grid-row: 1; }
.space[data-pos="27"] { grid-column: 8;  grid-row: 1; }
.space[data-pos="28"] { grid-column: 9;  grid-row: 1; }
.space[data-pos="29"] { grid-column: 10; grid-row: 1; }

/* Right column: positions 31-39 (top to bottom) */
.space[data-pos="31"] { grid-column: 11; grid-row: 2; }
.space[data-pos="32"] { grid-column: 11; grid-row: 3; }
.space[data-pos="33"] { grid-column: 11; grid-row: 4; }
.space[data-pos="34"] { grid-column: 11; grid-row: 5; }
.space[data-pos="35"] { grid-column: 11; grid-row: 6; }
.space[data-pos="36"] { grid-column: 11; grid-row: 7; }
.space[data-pos="37"] { grid-column: 11; grid-row: 8; }
.space[data-pos="38"] { grid-column: 11; grid-row: 9; }
.space[data-pos="39"] { grid-column: 11; grid-row: 10; }