/* The maps (maps.js): the difficulty screen's row of map tiles, the lobby's
   select. */
.rg-mappick {
  position: absolute; z-index: 6; left: 96px; bottom: 26px; display: flex; align-items: center; gap: 12px;
  pointer-events: auto;
}
.rg-mappick-title { font: 700 13px var(--cx-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cx-muted); writing-mode: vertical-rl; transform: rotate(180deg); }
.rg-maps { display: flex; gap: 10px; }
.rg-map {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 196px; height: 112px; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(214, 164, 65, 0.3); border-radius: 0; background: #0b0a08; opacity: 0.62; filter: saturate(0.6);
  transition: opacity 0.15s, filter 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.rg-map:hover:not(:disabled) { opacity: 0.9; filter: none; }
.rg-map.on { opacity: 1; filter: none; border-color: var(--cx-gold-hi, #f6d98a); box-shadow: inset 0 0 0 1px rgba(246, 217, 138, 0.55), 0 0 20px rgba(246, 217, 138, 0.28); }
.rg-map:disabled { cursor: default; }
.rg-map-pic { position: absolute; inset: 0; background: center / cover no-repeat; }
.rg-map-name {
  position: relative; padding: 16px 8px 6px; font: 700 12px/1.15 var(--cx-display); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); text-shadow: 0 1px 2px #000;
}
.rg-map.won::after {
  content: '✔'; position: absolute; right: 6px; top: 4px; font: 700 15px var(--cx-display); color: #7fdf8a; text-shadow: 0 1px 3px #000;
}