/* The roster editor's Generic token look: the icon button (on its color), the color input, and the grid of icons */
.RosterEditor .TokenLookPicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.RosterEditor .TokenLookPicker button.tokenIconButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
}

.RosterEditor .TokenLookPicker input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.RosterEditor .TokenLookPicker .iconGrid {
  position: absolute;
  top: 42px;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(10, 34px);
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: #222;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.RosterEditor .TokenLookPicker .iconGrid button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
}

.RosterEditor .TokenLookPicker .iconGrid button.chosen {
  outline: 2px solid #ffc107;
}

/* The roster editor page: a toolbar, then each character with its deck, one row per card (fields, then a preview) */
.RosterEditor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  color: white;
}

/* Stays at the top while the page scrolls, lined up with the characters below (the full width, like them) */
.RosterEditor .toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  background: black;
}

.RosterEditor .toolbar .name {
  font-size: 18px;
  font-weight: bold;
}

.RosterEditor .toolbar .deckSize {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Every button on the page has the same compact shape, square-ish like the fields */
.RosterEditor button {
  height: 32px;
  margin: 0;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 13px;
}

/* The full width of the screen; never narrower than its content, so the longest effect criteria sentence (a Character
   Effect with Select, How Many, In and Of) stays on one line beside the card preview, even with larger fonts (the page
   scrolls sideways instead) */
.RosterEditor .characters {
  min-width: min-content;
  margin: 0;
  padding: 0 16px 40px;
  box-sizing: border-box;
}

.RosterEditor .character {
  margin-top: 24px;
  padding-bottom: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.RosterEditor .characterHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.RosterEditor .characterHeader img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
}

.RosterEditor .characterHeader > div {
  flex: 1;
}

.RosterEditor .characterName {
  font-size: 18px;
  font-weight: bold;
}

.RosterEditor .characterStats,
.RosterEditor .noCards {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.RosterEditor .noCards {
  padding: 12px 16px;
}

/* Each card on a darker panel of its own, with a thick border and space between them, so neighbouring cards don't run
   together */
.RosterEditor .CardEditor {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 16px;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.RosterEditor .CardEditor + .CardEditor {
  margin-top: 20px;
}

.RosterEditor .CardEditor .fields {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.RosterEditor .CardEditor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Takes the rest of its line (the name, beside the copies) */
.RosterEditor .CardEditor label.grow {
  flex: 1 1 auto;
}

/* Health and range, in the character's header */
.RosterEditor .CharacterStatsEditor {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.RosterEditor .CharacterStatsEditor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Undo the global input style (rounded left end, purple border, fixed width) */
.RosterEditor .CharacterStatsEditor input,
.RosterEditor .CardEditor input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.RosterEditor .CardEditor select {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 14px;
}

/* Effects: a header, then each effect on a panel of its own (its criteria line, then its sub-effect lines, then the
   buttons that add sub-effects), then the buttons that add effects */
.RosterEditor .CardEditor .effectsHeader {
  flex: 1 1 100%;
  margin-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.RosterEditor .CardEditor .effect {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.RosterEditor .CardEditor .effect .criteria,
.RosterEditor .CardEditor .effect .subEffect,
.RosterEditor .CardEditor .effect .addSubEffect,
.RosterEditor .CardEditor .addEffect {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.RosterEditor .CardEditor .addEffect {
  flex: 1 1 100%;
}

/* An Add Token's removal: its own list of effects, indented under the token's line with a rule on the left */
.RosterEditor .CardEditor .tokenRemoval {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 40px;
  padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.RosterEditor .CardEditor .tokenRemoval .effectsHeader {
  font-size: 13px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}

.RosterEditor .CardEditor .tokenRemoval .effect {
  background: rgba(0, 0, 0, 0.25);
}

/* The criteria and each sub-effect read as one sentence: the words inline around their fields, never wrapping (the page
   is wide enough for the longest criteria, Select + How Many + In + Of) */
.RosterEditor .CardEditor .effect .criteria,
.RosterEditor .CardEditor .effect .subEffect {
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

/* A bespoke effect's panel: what it does (its card text; the rule is written in code), indented like a sub-effect */
.RosterEditor .CardEditor .effect.bespoke .bespokeDescription {
  margin: 6px 0 0 40px;
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.RosterEditor .CardEditor .effect .criteria label,
.RosterEditor .CardEditor .effect .subEffect label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.RosterEditor .CardEditor .effect .criteria input,
.RosterEditor .CardEditor .effect .subEffect input {
  width: 56px;
}

/* Move up / down, then remove: pushed to the end of the criteria line */
.RosterEditor .CardEditor .effect .criteria .moveButtons {
  margin-left: auto;
}

.RosterEditor .CardEditor .effect .moveButtons {
  display: flex;
  gap: 4px;
}

.RosterEditor .CardEditor .effect .moveButtons button {
  width: 28px;
  padding: 0;
}

.RosterEditor .CardEditor .effect .moveButtons button:disabled {
  opacity: 0.3;
  cursor: default;
}

.RosterEditor .CardEditor .effect .effectType {
  align-self: center;
  font-size: 13px;
  font-weight: bold;
  color: white;
}

/* An Add button with a dropdown of what it adds (AddMenu): the options in a column under the button, over what's below */
.RosterEditor .AddMenu {
  position: relative;
}

.RosterEditor .AddMenu .options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: 6px;
  border-radius: 10px;
  background: #2a2140;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.RosterEditor .AddMenu .options button {
  margin: 0;
  padding: 8px 14px;
  border-radius: 6px;
  background: none;
  text-align: left;
  font-size: 16px;
  transition: none;
}

.RosterEditor .AddMenu .options button:hover {
  background-color: #764ba2;
}

/* Sub-effects sit under their criteria, indented */
.RosterEditor .CardEditor .effect .subEffect,
.RosterEditor .CardEditor .effect .addSubEffect {
  margin-left: 40px;
}

.RosterEditor .CardEditor .effect button.removeEffect {
  width: 32px;
  padding: 0;
  background-color: #dc3545;
}

.RosterEditor .CardEditor label.grow input {
  width: 100%;
}

/* The generated description, read only: a label, then the text as it will be on the card */
.RosterEditor .CardEditor .descriptionPreview {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.RosterEditor .CardEditor .descriptionLabel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.RosterEditor .CardEditor .descriptionText {
  padding: 8px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  line-height: 1.4;
  color: white;
}

.RosterEditor .CardEditor .buttons {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
}

/* Save: green when there are changes to save, faded when there aren't */
.RosterEditor button.save {
  background-color: #28a745;
  color: white;
  font-weight: bold;
}

.RosterEditor button.save:hover:not(:disabled) {
  background-color: #218838;
}

.RosterEditor button.save:disabled {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

/* The card preview keeps the hand's card size */
.RosterEditor .CardEditor .HandCard {
  flex: 0 0 auto;
  margin: 0;
}

/* The map editor page: a toolbar, then the map (the game's map styles, taking the rest of the page) */
.MapEditor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.MapEditor .toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 16px;
  box-sizing: border-box;
  color: white;
}

.MapEditor .toolbar .name {
  font-size: 18px;
  font-weight: bold;
}

/* The author, for credit: beside the name */
.MapEditor .toolbar .AuthorField,
.RosterEditor .toolbar .AuthorField {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.MapEditor .toolbar .AuthorField input,
.RosterEditor .toolbar .AuthorField input {
  width: 240px;
  padding: 6px 8px;
  font-size: 14px;
}

.MapEditor .toolbar button,
.RosterEditor .toolbar button {
  margin: 0;
  padding: 8px 20px;
  font-size: 14px;
}

.MapEditor .MapArea {
  top: 60px;
  right: 0;
  bottom: 0;
}