:root{
  --gap:8px;
  --cell:36px;
  --border:#ddd;
  --accent:#222;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--accent);
}

*{box-sizing:border-box}
body{margin:16px;background:#fff;color:var(--accent)}
h1,h2{margin:8px 0}
.row{display:flex;gap:var(--gap);align-items:center;margin:8px 0;flex-wrap:wrap}
#controls{max-width:780px;margin-bottom:12px}
#gridContainer, #gameContainer{
  display:grid;
  gap:2px;
  background:#eee;
  padding:6px;
  max-width:100%;
  overflow:auto;
  border:1px solid var(--border);
}
.cell{
  width:var(--cell);
  height:var(--cell);
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(0,0,0,0.05);
  cursor:pointer;
  outline:none;
}
.cell:focus{box-shadow:0 0 0 3px rgba(0,120,212,0.15)}
.cell[data-type="wall"]{background:#bbb}
.cell[data-type="door"]{background:#ffd}
.cell[data-type="trap"]{background:#fbb}
.cell[data-player]{background:#4a90e2;color:white;font-weight:700}

button.tool[aria-pressed="true"]{outline:2px solid #000;box-shadow:0 2px 0 rgba(0,0,0,0.1)}
button, input[type="number"]{padding:6px 8px;border:1px solid #ccc;background:#fff;border-radius:4px}

/* Enhance professionalism for standard buttons */
button {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow */
    font-weight: 500;
}
button:hover {
    background-color: #f5f5f5;
    border-color: #bbb;
}
button:active {
    background-color: #e0e0e0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Style for the new menu lists (replacing ULs) */
.menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    list-style: none; 
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-item:hover {
    border-color: #4a90e2; /* Highlight border on hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.menu-item .game-select-button,
.menu-item .map-select-button {
    flex-grow: 1;
    text-align: left;
    font-size: 1.1em;
    padding: 12px 15px; /* Bigger touch target */
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-weight: 600;
    color: var(--accent);
}
.menu-item .game-select-button:hover,
.menu-item .map-select-button:hover {
    background: transparent;
    color: #4a90e2; 
}

.map-count-indicator {
    font-size: 0.9em;
    color: #777;
    padding-right: 15px;
    white-space: nowrap;
}

/* Ensure tool buttons still look like toggles */
button.tool{
    box-shadow: none;
}
button.tool:hover{
    background-color: #f5f5f5;
}
button.tool[aria-pressed="true"]{
    outline:2px solid #4a90e2; /* Use accent color for pressed state */
    box-shadow:0 0 0 1px #4a90e2;
    background: #e6f0ff;
}

#previewArea{margin-top:12px}

.sr-only{
  position: absolute!important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* High contrast / forced-colors support for Windows High Contrast mode */
@media (forced-colors: active) {
  :root {
    color-scheme: dark light;
  }

  /* Use system colors to guarantee visibility */
  body {
    background: Window;
    color: WindowText;
  }

  #gridContainer, #gameContainer {
    background: Window;
    border: 2px solid WindowText;
    padding: 6px;
  }

  .cell {
    background: Field;
    color: FieldText;
    border: 2px solid WindowText;
    min-width: var(--cell);
    min-height: var(--cell);
    box-shadow: none !important;
  }

  /* Make types clearly distinguished with forced-color-adjust off and explicit combos:
     walls -> use WindowText solid; doors -> invert to highlight; traps -> use HighlightText on Highlight */
  .cell[data-type="wall"] {
    background: Window;
    forced-color-adjust: none;
    outline: 3px solid WindowText;
  }
  .cell[data-type="door"] {
    background: Window;
    forced-color-adjust: none;
    outline: 3px dashed Highlight;
  }
  .cell[data-type="trap"] {
    background: Window;
    forced-color-adjust: none;
    outline: 3px solid Highlight;
  }

  .cell[data-player] {
    background: Highlight !important;
    color: HighlightText !important;
    font-weight: 700;
    outline: 3px solid WindowText;
  }

  /* Ensure focus is very visible */
  .cell:focus, button:focus, input:focus {
    outline: 4px solid Highlight;
    box-shadow: none;
  }

  /* Toolbar and controls */
  button.tool[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    outline: 2px solid WindowText;
    box-shadow: none;
  }
  button, input[type="number"]{
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid WindowText;
  }

  /* Ensure sr-only remains accessible to screen readers but not visually intrusive */
  .sr-only {
    clip: rect(1px, 1px, 1px, 1px);
  }
}

.az-overlay { /* minimal class fallback if module-created overlay needs styling via CSS */
  font-family: inherit;
}
.az-panel button.primary {
  background:#0b74de;color:#fff;border:none;padding:8px 12px;border-radius:6px;
}
.az-panel button { padding:8px 10px;border-radius:6px;border:1px solid #ccc;background:#fff; }
.az-panel input[type="range"] { width:100%; }