/* A character's tokens (TokenBadges): a 50px badge per token, its icon. They fill a column top to bottom (as many as fit
   in the column's height), then start a new column to the left of it (right to left: direction rtl) */
.TokenBadges {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 50px);
  grid-auto-columns: 50px;
  gap: 6px;
  direction: rtl;
  margin: 5px 5px 5px 0;
}

/* Always a 50px square: fixed on both sides, and never stretched or squeezed by a flex or grid around it */
.TokenBadges .token {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  aspect-ratio: 1;
  flex: none;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  direction: ltr;
}

/* My character's token: a button that removes it */
.TokenBadges button.token {
  display: block;
  margin: 0;
  border: none;
  cursor: pointer;
}

.TokenBadges button.token:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.TokenBadges button.token:disabled {
  cursor: default;
  opacity: 1;
}

/* A Generic token's icon, one of /icons/<n>.png (TokenIcon; each file has its icon centered): centered wherever it's
   shown, a token badge or the editor's buttons */
.TokenIcon {
  display: block;
  margin: auto;
}

.CharacterIcon {
  position: relative;
  display:inline-block;
  vertical-align: top;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-align: left;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: wrap;
}

.CharacterIcon img {
  position : absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Out of the game */
.CharacterIcon.defeated {
  filter: grayscale(1);
  opacity: 0.5;
}

/* Its number among the characters of its kind on the map: a badge at the bottom right that scales with the portrait */
.CharacterIcon svg.number {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36%;
  height: 36%;
  max-width: 28px;
  max-height: 28px;
  min-width: 12px;
  min-height: 12px;
  overflow: visible;
  pointer-events: none;
  /* The icon lays its health pips out vertically: not the number ("10" side by side) */
  writing-mode: horizontal-tb;
}

.CharacterIcon svg.number circle {
  fill: white;
  stroke: black;
  stroke-width: 1;
}

.CharacterIcon svg.number text {
  fill: black;
  font-size: 12px;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}

/* Its health pips, above the picture (which is absolutely positioned, so it would cover them: an opaque portrait
   hid them everywhere but on the map), outlined so they read on any picture */
.CharacterIcon .health {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 10%;
  height: 6%;
  min-width: 4px;
  min-height: 3px;
  margin: 1%;
  border-radius: 40%;
  background-color: red;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.HandCard.attacking .face {
  outline: 2px solid red;
}

/* A card face with its buttons (Attack, Play, Discard…) under it, outside the card */
.HandCard {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 216px;
  margin: 5px;
  font-size: 16px;
  text-align: left;
}

/* Every card face the same size, a playing card's shape (216 × 302): a large portrait on the left with the card's name
   over it, attack (red) over defense (blue) on the right, then the description (the rest of the height, scrolling when
   it's longer) */
.HandCard .face {
  display: grid;
  grid-template-columns: 165px 51px; /* portrait column = 82.5 + 82.5, the height of the two stat rows, so it's square */
  grid-template-rows: 82.5px 82.5px 1fr;
  grid-template-areas:
    "portrait    attack"
    "portrait    defense"
    "description description";
  width: 216px; /* 165 + 51: the portrait and the badges fill the top, edge to edge */
  height: 302px; /* a playing card's 5:7 (216 × 7 / 5) */
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden; /* the card's rounded corners clip the portrait and the badges */
  background: rgba(255, 255, 255, 0.1);
  position: relative; /* for the name */
}

/* The card's name over the top of the whole card (from its top-left corner, across the portrait and the badges), black
   on white, its bottom right corner rounded; long names take two lines */
.HandCard .name {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 12px 4px 8px;
  border-radius: 8px 0 8px 0;
  background: white;
  color: black;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.HandCard .name:empty {
  display: none;
}

.HandCard .portrait {
  grid-area: portrait;
  display: block;
  width: 165px; /* always square, at most 165px tall (the two stat rows: 82.5 + 82.5) */
  height: 165px;
  max-height: 165px;
  aspect-ratio: 1;
  object-fit: cover;
}

.HandCard .attack,
.HandCard .defense {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}

.HandCard .attack {
  grid-area: attack;
  background: #b3261e;
}

.HandCard .defense {
  grid-area: defense;
  background: #1f5fbf;
}

/* No attack or defense badges: the portrait is centered across the card (still 165px square) */
.HandCard.noStats .portrait {
  grid-column: 1 / -1;
  justify-self: center;
}

.HandCard .description {
  grid-area: description;
  overflow-y: auto; /* long descriptions scroll instead of resizing the card */
  padding: 8px 10px; /* edge to edge like the rest; only the text is inset */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: normal;
  line-height: 1.3;
}

.HandCard.playing .face {
  outline: 2px solid red;
}

.HandCard .actions {
  display: flex;
  gap: 6px;
  height: 28px;
}

.HandCard .actions button {
  flex: 1;
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
}

/* A face of the movement die: a white die with the number, and "All" under it for an All face */
.MovementDie {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: white;
  color: #222;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.MovementDie .amount {
  font-size: 20px;
  font-weight: bold;
}

.MovementDie .allLabel {
  margin-top: 2px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}