.UpdateNickname, .JoinCode {
  display: inline-block;
}

.LoggedInMainPage input {
  padding: 12px 20px;
  font-size: 16px;
  vertical-align: top;
}

.LoggedInMainPage button {
  padding: 12px 24px;
  font-size: 19px;
}

.LoggedInMainPage input + button {
  border-radius: 0 25px 25px 0;
}

.LoggedInMainPage input::placeholder {
  color: #999;
}

/* Every section's heading is centered over it (Choose a Game, Settings, Donate, Admin), though the sections' contents are
   left aligned */
.LoggedInMainPage h2 {
  text-align: center;
}

/* Settings and Donate side by side, each up to 560px wide, centered; one above the other when there isn't room. Their
   cards stretch to the same height */
.LoggedInMainPage .settingsAndDonate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1136px; /* two 560px sections and the gap, like the admin columns */
  margin: 40px auto 0;
}

.LoggedInMainPage .Settings,
.LoggedInMainPage .Donate {
  display: flex;
  flex-direction: column;
  flex: 1 1 360px;
  min-width: 0;
  max-width: 560px;
  text-align: left;
  color: white;
}

.LoggedInMainPage .Settings .settingsCard,
.LoggedInMainPage .Donate .donateCard {
  flex: 1;
}

.LoggedInMainPage .Settings .settingsCard {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.LoggedInMainPage .Settings .setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

.LoggedInMainPage .Settings .setting + .setting {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* A checkbox drawn as an on/off switch, purple when on */
.LoggedInMainPage .Settings .switch,
.GameSetup .switch {
  appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none; /* the global input style has a border */
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.LoggedInMainPage .Settings .switch::after,
.GameSetup .switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
}

.LoggedInMainPage .Settings .switch:checked,
.GameSetup .switch:checked {
  background: #764ba2;
}

.LoggedInMainPage .Settings .switch:checked::after,
.GameSetup .switch:checked::after {
  left: 21px;
}

/* Donating (once the user has joined a game): a note, then PayPal's yellow Donate button, beside the settings, in a
   card like theirs */
.LoggedInMainPage .Donate .donateCard {
  font-size: 16px;
  line-height: 1.5;
  padding: 16px 20px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.LoggedInMainPage .Donate .donateCard p {
  margin: 0 0 8px;
}

/* PayPal's yellow Donate button (DonateButton: the main page's Donate section, the donate page) */
.DonateButton {
  display: inline-block;
  margin: 8px 0 0;
  padding: 12px 32px;
  border: none;
  border-radius: 25px;
  background-color: #ffc439;
  color: #003087;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.DonateButton:hover {
  background-color: #f2ba36;
}

button.DonateButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.LoggedInMainPage .Admin {
  max-width: 1136px; /* two 560px columns and the gap */
  margin: 40px auto 0;
  text-align: left;
  color: white;
}

.LoggedInMainPage .Admin .adminColumns {
  display: flex;
  flex-wrap: wrap; /* one column when there isn't room for two */
  gap: 16px;
}

.LoggedInMainPage .Admin .adminColumn {
  flex: 1 1 360px;
  min-width: 0;
}

.LoggedInMainPage .Admin .thumbnail.portrait {
  width: 40px;
  background: rgba(255, 255, 255, 0.1);
}

.LoggedInMainPage .Admin h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.LoggedInMainPage .Admin .settingsCard {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.LoggedInMainPage .Admin .adminMap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.LoggedInMainPage .Admin .adminMap + .adminMap {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.LoggedInMainPage .Admin .adminMap.empty {
  color: rgba(255, 255, 255, 0.6);
}

/* The contact email in it */
.LoggedInMainPage .Admin .adminMap.empty a {
  color: #b39ddb;
}

.LoggedInMainPage .Admin .thumbnail {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.LoggedInMainPage .Admin .name {
  flex: 1;
  font-size: 16px;
}

.LoggedInMainPage .Admin .adminMap button {
  padding: 6px 16px;
  font-size: 14px;
}

/* A draft's status tag ("Published", "Unpublished changes" or "Not published"), on the admin list and the map and roster
   editors, and an in-game map's admin controls ("Draft" for admins who aren't the superadmin, or the version the game
   is on) */
.LoggedInMainPage .Admin .status,
.MapEditor .toolbar .status,
.RosterEditor .toolbar .status,
.MapArea .controls .mapAdmin .status {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 12px;
}

.LoggedInMainPage .Admin .status.published,
.MapEditor .toolbar .status.published,
.RosterEditor .toolbar .status.published,
.MapArea .controls .mapAdmin .status.published {
  background: #28a745;
}

.LoggedInMainPage .Admin .status.changed,
.MapEditor .toolbar .status.changed,
.RosterEditor .toolbar .status.changed {
  background: #d98b00;
}

/* Under the first rows of games (see gameCardLayout): the rest, or back to those rows */
.ChooseGame .showMoreGames {
  margin: 0 auto 10px;
  padding: 10px 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  font-size: 16px;
}

.ChooseGame .showMoreGames:hover {
  border-color: #764ba2;
  background: rgba(118, 75, 162, 0.35);
}

/* White like the other sections (it was black on the black page) */
.ChooseGame {
  color: white;
}

/* The games, as cards in rows: each card is one button. Dark like the settings' cards, all the same size: the map on
   top (cropped to a fixed frame, or a blank one), the roster's main character on its corner, then the name and date */
.ChooseGame .gameCards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.ChooseGame .gameSelect,
.ChooseGame .newGameCard {
  display: flex;
  flex-direction: column;
  width: var(--card-width, 420px); /* sized from the window: see gameCardLayout */
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 16px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.ChooseGame .gameSelect:hover:not(:disabled),
.ChooseGame .gameSelect:focus-visible,
.ChooseGame .newGameCard:hover,
.ChooseGame .newGameCard:focus-visible {
  transform: translateY(-3px);
  border-color: #764ba2;
  box-shadow: 0 6px 20px rgba(118, 75, 162, 0.45);
  outline: none;
}

.ChooseGame .gameSelect .picture,
.ChooseGame .newGameCard .picture {
  position: relative;
  flex: 0 0 auto;
  height: var(--picture-height, 270px);
  background: rgba(0, 0, 0, 0.35);
}

.ChooseGame .gameSelect .battleMapImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ChooseGame .gameSelect .noMap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
}

/* The New Game card: a big + where a game's map would be, in the game's purple */
.ChooseGame .newGameCard .picture {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(118, 75, 162, 0.35);
}

.ChooseGame .newGameCard .plus {
  width: calc(var(--picture-height, 270px) * 0.45);
  height: calc(var(--picture-height, 270px) * 0.45);
  overflow: visible;
  transition: transform 150ms ease;
}

.ChooseGame .newGameCard .plus circle {
  fill: #764ba2;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 3;
  transition: fill 150ms ease;
}

.ChooseGame .newGameCard .plus path {
  fill: none;
  stroke: white;
  stroke-width: 9;
  stroke-linecap: round;
}

/* The plus grows a little and brightens with the card */
.ChooseGame .newGameCard:hover .plus,
.ChooseGame .newGameCard:focus-visible .plus {
  transform: scale(1.06);
}

.ChooseGame .newGameCard:hover .plus circle,
.ChooseGame .newGameCard:focus-visible .plus circle {
  fill: #8a5cc0;
}

/* The rolled roster's main character, on the map's bottom left corner */
.ChooseGame .gameSelect .rosterPortrait {
  position: absolute;
  left: 14px;
  /* Half of it hangs below the map, but never past the bottom of the card (the caption is 68px) */
  bottom: max(calc(var(--portrait, 134px) / -2), -58px);
  width: var(--portrait, 134px);
  height: var(--portrait, 134px);
  box-sizing: border-box;
  border: 4px solid #2b2b2b;
  border-radius: 50%;
  background: #444;
  object-fit: cover;
}

.ChooseGame .gameSelect .caption,
.ChooseGame .newGameCard .caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: 68px; /* with the card's border, gameCardLayout's CAPTION_HEIGHT */
  padding: 0 16px;
}

/* Room for the portrait that hangs below the map (14px in, then a gap) */
.ChooseGame .gameSelect .caption.withPortrait {
  padding-left: calc(var(--portrait, 134px) + 26px);
}

.ChooseGame .gameSelect .gameName,
.ChooseGame .newGameCard .gameName {
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChooseGame .gameSelect .created,
.ChooseGame .newGameCard .created {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* New Maps and Rosters, under the games: one row of tiles, centered. Each tile's picture is square, unless its title
   needs the tile wider (then the picture widens with it, cropped to fill); all the same height, and they wrap like words in a box exactly one tile tall: a tile that doesn't fit the
   first line wraps below it and is clipped, so a narrow window shows fewer, never part of one */
.NewContent {
  margin-top: 30px;
  color: white;
}

.NewContent .newItems {
  --picture-size: 150px;
  --tile-height: 230px; /* a tile: the picture, the caption (name, author, about), and the border */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  height: var(--tile-height);
  overflow: hidden;
  margin: 20px 0;
}

.NewContent .newItem {
  display: flex;
  text-align: center;
  flex-direction: column;
  box-sizing: border-box;
  min-width: calc(var(--picture-size) + 2px); /* its border: a square picture */
  max-width: 100%;
  height: var(--tile-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

/* A tile opens its popup: a map's picture, a roster's deck */
.NewContent .newItem {
  cursor: pointer;
}

.NewContent .newItem:hover {
  border-color: #667eea;
  background: rgba(255, 255, 255, 0.14);
}

.NewContent .newItem .picture {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--picture-size);
  background: rgba(0, 0, 0, 0.35);
}

/* Maps and rosters alike: the picture fills the picture area, cropped to it (a map's, or the roster's main character's
   portrait). Out of the flow, so a wide map doesn't widen the tile: only the title does */
.NewContent .newItem .picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.NewContent .newItem .caption {
  padding: 10px 8px;
}

/* The whole title: the tile widens for it */
.NewContent .newItem .name {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

/* Its width comes from the tile (the title's), never the other way: a long author is cut short */
.NewContent .newItem .author {
  width: 0;
  min-width: 100%;
  height: 17px;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.NewContent .newItem .about {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  white-space: nowrap;
}