/* Board Container */
.board {
  --tile-size: clamp(36px, 4.2vw, 62px);
  --tile-gap: clamp(3px, 0.3vw, 5px);

  position: relative;
  background: #1A1A1A;
  border-radius: 16px;
  padding: 28px 48px 40px;
  width: 100%;
  box-shadow:
    0 -4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Tile Grid */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 22), var(--tile-size));
  grid-template-rows: repeat(var(--grid-rows, 5), var(--tile-size));
  gap: var(--tile-gap);
  justify-content: center;
}

/* Accent Squares — small stacked blocks in top corners */
.accent-bar {
  position: absolute;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 5;
}

.accent-bar-left {
  left: 18px;
}

.accent-bar-right {
  right: 18px;
}

.accent-segment {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  transition: background-color 0.5s ease;
}