/* The first wrong-level warning in a game (BattleMap): a popup over the page, closed with OK or a click outside it */
.LevelWarning {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.LevelWarning .box {
  max-width: 420px;
  margin: 16px;
  padding: 24px 28px;
  border-radius: 12px;
  background: #2a2140;
  color: white;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.LevelWarning h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.LevelWarning p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.4;
}

.LevelWarning p.hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}

.LevelWarning button {
  margin: 8px 0 0;
  min-width: 100px;
}

/* The map top left, the event log beside it on the right, the action bar across the bottom of both. The action bar's row is exactly as tall as
   what it shows (up to half the screen, then it scrolls), and the map takes the rest, so the bar resizes whenever its
   content changes */
.Game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 450px; /* = .EventLog width */
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "map log"
    "bar bar";
  width: 100%;
  height: 100%;
}

.Game .MapArea {
  position: relative;
  grid-area: map;
  inset: auto;
}

.MapArea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.MapArea .BattleMap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  /* A trackpad scroll that reaches the map's edge stops there: it isn't passed on to the page, where a sideways
     swipe is the browser's back / forward */
  overscroll-behavior: none;
}
.MapArea .BattleMap img {
  position: absolute;
  top: 0;
  left: 0;
}

.MapArea .BattleMap * {
  transition: all 500ms linear;
}

.MapArea .BattleMap.loading * {
  transition: none;
}

.MapArea button {
  margin: 20px auto;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 30px;
}

.MapArea .grid {
  position: absolute;
}

.MapArea .grid .CharacterIcon  {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
}

.MapArea .grid .CharacterIcon img {
  width: 100%;
  height: 100%;
}

/* Fog of war: out of my characters' sight, shown where it was last seen */
.MapArea .grid.lastSeen .CharacterIcon {
  opacity: 0.4;
}

.MapArea .grid.lastSeen .lastSeenLabel {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  pointer-events: none;
}

.MapArea .grid.canMove {
  background-color: green;
  cursor: pointer;
  opacity: .2;
}

.MapArea .grid.canTarget {
  background-color: red;
  opacity: .25;
  pointer-events: none;
}

/* An opponent's character in range: clickable to attack it */
.MapArea .grid.canTarget.opponent {
  box-sizing: border-box;
  background-color: rgba(255, 0, 0, 0.35);
  border: 3px solid red;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.MapArea .grid.canTarget.opponent:hover {
  background-color: rgba(255, 0, 0, 0.5);
}

.MapArea .grid.fogOfWar {
  background-color: black;
}

.MapArea .unpublishedGrid {
  position: absolute;
  border: 1px solid black;
  transition: all 0ms none;
}

.MapArea .wallToggle {
  position: absolute;
  padding: 0px;
  margin: 0px;
  border: none;
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0);
}

.MapArea .wallToggle:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

/* The setup's map choices fill the map's part of the screen and scroll inside it */
.MapArea .ChooseMap {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px 20px;
  box-sizing: border-box;
}

.MapArea .ChooseMap h2 {
  margin: 0 0 14px;
  color: white;
  text-align: center;
}

.MapArea .ChooseMap .maps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* A map to choose: a dark card like the main page's game cards, lifting with a purple border on hover */
.MapArea .selectMap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  margin: 0;
  padding: 10px 10px 12px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-color: #1d1d1d;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.MapArea .selectMap:hover {
  transform: translateY(-3px);
  border-color: #9370db;
  background-color: #262626;
}

.MapArea .selectMap img {
  height: 300px;
  max-width: 100%;
  margin-bottom: 6px;
  border-radius: 6px;
  object-fit: contain;
}

.MapArea .selectMap .mapName {
  color: white;
  font-size: 16px;
  font-weight: 600;
}

/* Who made the map, cut short under the picture's width */
.MapArea .selectMap .author {
  max-width: 100%;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A draft offered to its admin to try out */
.MapArea .selectMap .draft {
  font-weight: bold;
  color: #b9a3f5;
}

.MapArea .controls {
  position: absolute;
  bottom: 10px;
  right: 25px;
  z-index: 1000;
}

.MapArea .controls div {
  display: inline-block;
}

.MapArea .controls button {
  margin: 3px;
  min-width: 55px;
}

.MapArea .controls .mapAdmin {
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom;
}

.MapArea .controls .mapAdmin .status {
  margin: 3px;
  text-align: center;
}