/* Picking cards to discard (DiscardSelection), in place of the action bar: what to pick and Confirm, then the hand,
   both centered (the hand scrolling sideways when it doesn't fit); a chosen card is outlined red */
.ActionBar .DiscardSelection {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 6px 10px 0;
  box-sizing: border-box;
  text-align: left;
}

.ActionBar .DiscardSelection .prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: bold;
}

.ActionBar .DiscardSelection .picked {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
}

.ActionBar .DiscardSelection .Hand {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 4px;
  min-height: 0;
  overflow-x: auto;
  overscroll-behavior: none;
}

.ActionBar .HandCard.discarding .face {
  outline: 3px solid #dc3545;
}

/* Taking cards from my discard pile (TakeSelection, laid out like DiscardSelection): a chosen card is outlined green */
.ActionBar .HandCard.taking .face {
  outline: 3px solid #28a745;
}

/* Choosing the characters for a card's effects (TargetSelection), in place of the action bar: the card, then each
   choice's possible characters above the chosen ones, then Confirm. The choices fill the bar beside the card: its width,
   and its height, each choice's rows sharing what's left after its prompt. Everything in them is centered */
.ActionBar .TargetSelection {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: left;
}

.ActionBar .TargetSelection .choices {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  padding: 10px 0;
  overflow-y: auto;
}

.ActionBar .TargetSelection .choice {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.ActionBar .TargetSelection .prompt {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.ActionBar .TargetSelection .picked {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
}

/* One line of characters each, scrolling sideways when they don't fit (safe: centered until then, so none are cut off) */
.ActionBar .TargetSelection .targets {
  display: flex;
  justify-content: safe center;
  align-items: center;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  min-height: fit-content; /* never squeezed below its characters: the choices scroll instead */
  margin-top: 6px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.ActionBar .TargetSelection .targets.chosen {
  background: rgba(40, 167, 69, 0.2);
}

.ActionBar .TargetSelection .none {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.ActionBar .TargetSelection button.target {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border-radius: 6px;
  background: transparent;
}

.ActionBar .TargetSelection button.target:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.ActionBar .TargetSelection button.target .CharacterIcon {
  width: 64px;
  height: 64px;
}

.ActionBar .TargetSelection .targetName {
  font-size: 13px;
}

.ActionBar .TargetSelection .buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ActionBar .TargetSelection button.save {
  background-color: #28a745;
}

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

/* In the action bar, a column is as tall as the portrait beside it (4 badges) */
.ActionBar .PlayPhase .CharacterControls .TokenBadges {
  height: 239px;
}

/* Moving a card's characters (MoveSelection), in place of the action bar: the card, then the characters left to move
   (the one being moved outlined), each with Skip; it shares the target picker's look, filling the bar beside the card
   with everything centered, each row of characters scrolling sideways when they don't fit */
.ActionBar .MoveSelection,
.ActionBar .AdjacentMoveSelection {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: left;
}

.ActionBar .MoveSelection .choices,
.ActionBar .AdjacentMoveSelection .choices {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  overflow-y: auto;
  text-align: center;
}

.ActionBar .MoveSelection .prompt,
.ActionBar .AdjacentMoveSelection .prompt {
  font-size: 18px;
  font-weight: bold;
}

.ActionBar .MoveSelection .picked,
.ActionBar .AdjacentMoveSelection .picked,
.ActionBar .MoveSelection .hint,
.ActionBar .AdjacentMoveSelection .hint {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
}

.ActionBar .MoveSelection .hint,
.ActionBar .AdjacentMoveSelection .hint {
  font-size: 15px;
}

.ActionBar .MoveSelection .targets,
.ActionBar .AdjacentMoveSelection .targets {
  display: flex;
  flex: 1;
  justify-content: safe center;
  align-items: center;
  gap: 8px;
  min-height: fit-content; /* never squeezed below its characters: the choices scroll instead */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.ActionBar .MoveSelection .mover {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
}

.ActionBar .MoveSelection .mover.moving {
  outline: 2px solid #28a745;
  background: rgba(40, 167, 69, 0.2);
}

.ActionBar .MoveSelection button.target,
.ActionBar .AdjacentMoveSelection button.target {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border-radius: 6px;
  background: transparent;
}

.ActionBar .MoveSelection button.target:hover,
.ActionBar .AdjacentMoveSelection button.target:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* One row of movers here, so bigger than the Move Adjacent picker's two rows (movers, then who to go next to) */
.ActionBar .MoveSelection button.target .CharacterIcon {
  width: 128px;
  height: 128px;
}

.ActionBar .AdjacentMoveSelection button.target .CharacterIcon {
  width: 64px;
  height: 64px;
}

.ActionBar .MoveSelection .targetName,
.ActionBar .AdjacentMoveSelection .targetName {
  font-size: 13px;
}

.ActionBar .MoveSelection button.skip {
  margin: 0;
  padding: 3px 14px;
  font-size: 13px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* The Move Adjacent picker (like the Move picker): the character being moved outlined, a character out of sight
   dashed (picking it shows where it is), and Back */
.ActionBar .AdjacentMoveSelection button.target.moving {
  outline: 2px solid #ffc107;
}

.ActionBar .AdjacentMoveSelection button.target.unseen {
  border: 2px dashed rgba(255, 255, 255, 0.5);
}

.ActionBar .AdjacentMoveSelection .buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.ActionBar {
  grid-area: bar;
  max-height: 50vh;
  padding: 10px;
  box-sizing: border-box;
  background-color: #000000;
  overflow: auto;
  overscroll-behavior: none; /* like the map: a sideways scroll past its edge isn't the browser's back / forward swipe */
  color: white;
  text-align: center;
}

.ActionBar label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.ActionBar input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.ActionBar input[type="number"] {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #333;
  color: white;
  font-size: 18px;
}

.ActionBar input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #333;
  color: white;
}

.ActionBar button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

/* Everyone's placed: the one thing to do */
.ActionBar button.startGame {
  margin: 0;
  padding: 24px 80px;
  border-radius: 8px;
  font-size: 36px;
  font-weight: bold;
}

.ActionBar input + button {
  margin-right: 0px;
}

.ActionBar .PlaceCharacters {
  text-align: center;
  padding: 15px;
}

.ActionBar .PlaceCharacters span {
  display:inline-block;
  padding: 50px;
  font-size: 50px;
  font-weight: 400;
}

.ActionBar .PlaceCharacters .CharacterIcon {
  width: 150px;
  height: 150px;
}

/* One row: the characters (portrait, tokens, Move, Center In Map), the turn controls, then the hand, from the left, so the buttons stay put as cards come and
   go. max-content lets the ActionBar scroll sideways when it doesn't fit */
.ActionBar .PlayPhase {
  display: flex;
  align-items: flex-start;
  width: max-content;
  height: 100%;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.ActionBar .PlayPhase .TurnControls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 240px;
  margin: 5px;
  font-size: 30px;
}

/* As wide as the column; their height is every action bar button's */
.ActionBar .PlayPhase .TurnControls button {
  display: block;
  width: 100%;
  margin: 0;
}

/* Attack in progress: attacker, attack card, defender, then the response (defense cards or waiting + cancel) */
.ActionBar .AttackPanel {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: max-content;
  min-width: 100%;
  justify-content: safe center;
  height: 100%;
  margin: 0 auto;
  padding: 0 5px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 600;
}

.ActionBar .AttackPanel .side,
.ActionBar .AttackPanel .response,
.ActionBar .AttackPanel .versus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.ActionBar .AttackPanel .side .CharacterIcon {
  width: 140px;
  height: 140px;
}

/* The portrait with its token badges beside it, a column as tall as the portrait (2 badges) */
.ActionBar .AttackPanel .side .portrait {
  display: flex;
  align-items: flex-start;
}

.ActionBar .AttackPanel .side .TokenBadges {
  height: 140px;
  margin: 0 0 0 6px;
}

.ActionBar .AttackPanel .versus {
  color: #ff6b6b;
  text-transform: uppercase;
}

.ActionBar .AttackPanel .response button {
  width: 160px;
}

.ActionBar .AttackPanel .HandCard {
  margin: 5px 0;
}

/* Several attacks aimed at me: a box headed Incoming Attacks with a column of entries (attacker's nickname and portrait,
   an arrow, my character's portrait), the selected one outlined, a lighter background under the mouse, scrolling when
   there are more than fit; its defenses are beside it */
.ActionBar .AttackPanel .incoming {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 6px;
  max-height: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.ActionBar .AttackPanel .incoming h3 {
  margin: 0;
  color: #ff6b6b;
  font-size: 15px;
  text-transform: uppercase;
}

.ActionBar .AttackPanel .incoming .entries {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 8px;
  min-height: 0;
  padding: 2px;
  overflow-y: auto;
}

.ActionBar .AttackPanel .incoming .entry {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ActionBar .AttackPanel .incoming .entry:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ActionBar .AttackPanel .incoming .entry.selected {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.2);
}

.ActionBar .AttackPanel .incoming .entry.selected:hover {
  background: rgba(255, 107, 107, 0.3);
}

.ActionBar .AttackPanel .incoming .entry .CharacterIcon {
  width: 56px;
  height: 56px;
}

.ActionBar .AttackPanel .incoming .entry .arrow {
  color: #ff6b6b;
  font-size: 22px;
}

/* Cards in draw order, left to right, never wrapping */
.ActionBar .PlayPhase .Hand {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0 5px;
}

.ActionBar .PlayPhase .TurnControls .actionsLeft {
  font-size: 24px;
}

/* "Rolled:" and the die, centered across the column (as wide as its buttons) */
.ActionBar .PlayPhase .TurnControls .movementRoll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
  font-size: 24px;
}

/* A bigger die here than elsewhere */
.ActionBar .PlayPhase .TurnControls .movementRoll .MovementDie {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}

.ActionBar .PlayPhase .TurnControls .movementRoll .MovementDie .amount {
  font-size: 32px;
}

.ActionBar .PlayPhase .TurnControls .movementRoll .MovementDie .allLabel {
  font-size: 15px;
}

.ActionBar .PlayPhase .TurnControls .discardPile {
  font-size: 20px;
  font-weight: normal;
}

.ActionBar .PlayPhase .CharacterControls {
  display: inline-block;
  height: 100%;
}

/* The portrait with its token badges in a column beside it */
.ActionBar .PlayPhase .CharacterControls .portrait {
  display: flex;
  align-items: flex-start;
}

/* Square, and as tall as the hand beside it: 239px, its margins and border (14px) and the two buttons below (93px) make
   a card's 346px (336px and its margins). Fixed rather than a percentage of the bar, which would grow the bar with it */
.ActionBar .PlayPhase .CharacterControls .CharacterIcon {
  display: block;
  height: 239px;
  width: 239px;
  margin: 5px;
}

/* Center In Map and Move (not the token badges, which are buttons too), as wide as the portrait with its border */
.ActionBar .PlayPhase .CharacterControls > button {
  display: block;
  width: 243px;
  margin: 5px;
}