:root{
  --hexsweeper-cell-fill: rgba(255,255,255,0.06);
  --hexsweeper-cell-fill-revealed: rgba(255,255,255,0.90);
  --hexsweeper-cell-stroke: rgba(230,237,246,0.14);
  --hexsweeper-flag: #ff4d6d;
  --hexsweeper-mine: #ffcc00;
}

.hexsweeper-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  flex-wrap:wrap;
}

.hexsweeper-controls{
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

@media (max-width: 640px){
  .hexsweeper-header{
    flex-direction:column;
    align-items:stretch;
  }
  .hexsweeper-controls{
    justify-content:flex-start;
  }
  /* Make button rows distribute across the screen instead of bunching on the right */
  .hexsweeper-controls .btn{
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
  .hexsweeper-controls .pill{
    flex: 1 1 100%;
  }
}

.hexsweeper-board{
  width: 100%;
  display: flex;
  justify-content: center;
}

.hexsweeper-board svg{
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Desktop: constrain height so large boards don't run off-screen */
@media (min-width: 720px){
  .hexsweeper-board svg{
    width: auto;
    height: 70vh;
    max-height: 70vh;
  }
}

.hex-svg-cell{
  fill: var(--hexsweeper-cell-fill);
  stroke: var(--hexsweeper-cell-stroke);
  stroke-width: 0.035;
}

.hex-svg-cell.revealed{
  fill: var(--hexsweeper-cell-fill-revealed);
}

.hex-svg-cell.rock{
  fill: rgba(255,255,255,0.10);
  stroke: rgba(230,237,246,0.20);
}

.hex-svg-cell.hit{
  stroke: rgba(255,255,255,0.75);
  fill: #ff0000;
}

.hexsweeper-text{
  font-family: var(--mono);
  font-size: 0.55px;
  font-weight: 800;
  fill: rgba(255,255,255,0.92);
  pointer-events: none;
  user-select: none;
}

/* More saturated / darker (higher contrast) clue colours */
.hexsweeper-text.m0{ fill: rgba(255,255,255,0.45); }
.hexsweeper-text.m1{ fill: #3b82f6; } /* blue-500 */
.hexsweeper-text.m2{ fill: #0f766e; } /* teal-700 */
.hexsweeper-text.m3{ fill: #d97706; } /* amber-600 */
.hexsweeper-text.m4{ fill: #e11d48; } /* rose-600 */
.hexsweeper-text.m5{ fill: #7c3aed; } /* violet-600 */
.hexsweeper-text.m6{ fill: #db2777; } /* pink-600 */

.hexsweeper-icon{
  font-size: 0.60px;
  pointer-events: none;
  user-select: none;
}