/* Only background fills are translucent; gameplay content stays fully opaque. */
.sudoku-controls {
  grid-template-columns: max-content minmax(170px, 1fr) max-content minmax(0, 1.5fr);
}
.sudoku-controls select { min-width: 0; width: 100%; }
.sudoku-controls #sudoku-note { grid-column: 1 / -1; }
.sudoku-controls { align-items: center; }
.sudoku-controls label { margin: 0; line-height: 1.3; text-align: left; }
.sudoku-controls select { line-height: normal; padding-block: 10px; }
@media (max-width: 760px) {
  .sudoku-page .map-intro { padding-inline: 8px; }
  .sudoku-controls { gap: 6px; padding: 12px; }
  .sudoku-controls select { margin-bottom: 6px; }
}
.sudoku-play-panel { position: relative; isolation: isolate; overflow: hidden; }
.sudoku-road-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}
.sudoku-road-backdrop[hidden] { display: none; }
.sudoku-board-header {
  display: block;
  background: rgba(255, 249, 239, 0.88);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.sudoku-board-header h2 { line-height: 1.15; }
.sudoku-theme-states {
  margin: 6px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 65ch;
}
.sudoku-status { text-align: left; max-width: none; margin-top: 8px; }
.sudoku-instructions { background: rgba(255, 249, 239, 0.94); padding: 8px; }
.sudoku-board { background: transparent; }
.sudoku-cell:not(.is-related):not(.is-selected):not(.has-conflict) {
  background-color: rgba(255, 249, 239, 0.50);
}
.sudoku-cell.is-given:not(.is-related):not(.is-selected):not(.has-conflict) {
  background-color: rgba(255, 249, 239, 0.55);
}
.sudoku-cell.is-related:not(.is-selected):not(.has-conflict) {
  background-color: rgba(236, 240, 228, 0.65);
}
.sudoku-cell.is-selected:not(.has-conflict) {
  background-color: rgba(219, 232, 213, 0.82);
}
.sudoku-board::before, .sudoku-board::after { display: none; }
.sudoku-road-sign {
  border: 2px solid #173f36;
  border-radius: 8px;
  padding: 20px 12px 12px;
  background: linear-gradient(155deg, #2c6555, #1e5146 55%);
  box-shadow: inset 0 0 0 2px #fff9ef, 0 4px 0 rgba(10, 49, 97, 0.18);
  gap: 8px;
}
.sudoku-road-sign .eyebrow {
  color: #fff9ef;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}
.sudoku-road-sign h2 {
  color: #fff9ef;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 4px;
}
.sudoku-road-sign p:last-child {
  background: #fff9ef;
  color: var(--ink);
  border-radius: 3px;
  margin-top: 0;
  padding: 12px;
  font-weight: 500;
  line-height: 1.6;
}
/* Two small fasteners suggest a roadside marker without extra markup. */
.sudoku-road-sign::before, .sudoku-road-sign::after {
  top: 9px;
  bottom: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d9ded4;
  box-shadow: inset 0 -1px 1px #6f8076;
  pointer-events: none;
}
.sudoku-road-sign::before { left: 12px; }
.sudoku-road-sign::after { right: 12px; }
@media (max-width: 700px) {
  .sudoku-controls { grid-template-columns: 1fr; }
  .sudoku-board { width: 88%; }
}