/* Episode 1 map atlas */

.atlas { padding-bottom: calc(var(--tile) * 3); }

.atlas-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: calc(var(--tile) * 2.5);
}
.atlas-tabs button {
  --s: 2;
  font: inherit;
  cursor: pointer;
  background: var(--ega-black);
  color: var(--ega-gray);
  border: 2px solid var(--ega-dark-gray);
  padding: 8px 10px;
}
.atlas-tabs button .ega { --gs: 2; color: inherit; }
.atlas-tabs button:hover { color: var(--ega-white); }
.atlas-tabs button[aria-selected="true"] {
  color: var(--ega-yellow);
  border-color: var(--ega-yellow);
  background: var(--ega-blue);
}

.atlas-info {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--tile) * 1.5);
  margin-bottom: calc(var(--tile) * 1);
}
@media (max-width: 800px) { .atlas-info { grid-template-columns: 1fr; } }
.atlas-info__main p { margin: 10px 0 0; }

.atlas-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: calc(var(--tile) * 1) 0;
  background: rgb(0 0 0 / 0.86);
  padding: 10px 14px;
}
.toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--ega-yellow); }
.atlas-controls .filter { margin: 0; }
.atlas-controls .filter legend { background: none; padding: 6px 0 0; }

.viewer {
  position: relative;
  margin: 0 var(--gutter);
  height: min(78vh, 900px);
  overflow: auto;
  background: var(--ega-black);
  border: 3px solid var(--ega-gray);
  box-shadow: 0 0 0 3px var(--ega-black), inset 0 0 0 3px var(--ega-dark-gray);
  overscroll-behavior: contain;
}
.viewer:focus-visible { outline: 3px solid var(--ega-yellow); outline-offset: 3px; }

.map {
  --z: 2;
  position: relative;
  width: calc(var(--mw) * var(--z) * 1px);
  height: calc(var(--mh) * var(--z) * 1px);
  background-size: calc(320px * var(--z)) calc(144px * var(--z));
  background-repeat: repeat;
  image-rendering: pixelated;
  overflow: hidden;
}
.map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: none;
}
.map.no-actors .map__actors { display: none; }

.pal-flash { animation: pal-flash 1.2s steps(1) infinite; }
@keyframes pal-flash {
  0% { background-color: #000000; }
  16.6% { background-color: #555555; }
  33.3% { background-color: #aaaaaa; }
  50% { background-color: #ffffff; }
  66.6% { background-color: #aaaaaa; }
  83.3% { background-color: #555555; }
}

.atlas-foot { margin-top: 16px; background: rgb(0 0 0 / 0.86); padding: 10px 14px; max-width: 80ch; }

@media (prefers-reduced-motion: reduce) {
  .pal-flash { animation: none !important; background-color: #000; }
}