/* Autoloo game screens. The stage is a fixed 16:9 board (like Unity's
   1920x1080 camera) that scales to the window: 1em = 1% of its width. */

:root {
  --field: #fffad6;
  --field-2: #f3e7b8;
  --ground: #d9c98f;
  --ink: #2a2017;
  --ink-soft: #5d4d3b;
  --gold: #b38a2d;
  --france: #1d3b8b;
  --britain: #a3171c;
  --atk: #39404d;
  --hp: #9e1b1f;
  --good: #2f6a3a;
  --frost: #7fb8e6;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

/* The board scales itself, so phone browsers must not enlarge its text
   (Android Chrome's text autosizing swelled everything sized in em). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #2a2017;
  color: var(--ink);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
}

.stage-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
}

.stage {
  position: relative;
  width: min(100vw, 177.78vh);
  /* On phones, only the height not covered by the browser's toolbars. */
  width: min(100vw, 177.78dvh);
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(255, 255, 255, 0.6), transparent 70%),
    linear-gradient(var(--field), var(--field-2));
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.boot,
.boot-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font: 2cqw "Alfa Slab One", Georgia, serif;
  color: var(--ink-soft);
  text-align: center;
  padding: 2cqw;
}

.screen {
  position: absolute;
  inset: 0;
  font-size: 1cqw;
}

.screen[data-nation="france"] {
  --nation: var(--france);
}

.screen[data-nation="britain"] {
  --nation: var(--britain);
}

h1,
h2 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
}

/* Buttons --------------------------------------------------------------- */

/* Game buttons: chunky ink-outlined plates in the board's slab lettering. */
.gbtn {
  --plate: #3d4a8f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  height: 2.5em;
  padding: 0 0.8em;
  border: 0.1em solid var(--ink);
  border-radius: 0.45em;
  font: 2.1em/1 "Alfa Slab One", Georgia, serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%), var(--plate);
  box-shadow: 0 0.14em 0 var(--ink), inset 0 -0.12em 0 rgba(0, 0, 0, 0.22);
  text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.gbtn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-0.05em);
}

.gbtn:active:not(:disabled) {
  transform: translateY(0.1em);
  box-shadow: 0 0.04em 0 var(--ink), inset 0 -0.12em 0 rgba(0, 0, 0, 0.22);
}

.gbtn:disabled {
  filter: grayscale(1) opacity(0.5);
  cursor: default;
}

.gbtn__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* The price, on a parchment chip: "1" to roll, "+1" when selling. */
.gbtn__cost {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  margin-left: 0.15em;
  padding: 0.12em 0.4em 0.12em 0.15em;
  border-radius: 99em;
  font-size: 0.85em;
  color: var(--ink);
  text-shadow: none;
  background: var(--field);
}

.gbtn__cost img {
  width: 1.1em;
  height: 1.1em;
}

.gbtn--quit {
  --plate: #6b5844;
  height: 2.2em;
  padding: 0 0.7em 0 0.45em;
  font-size: 1.6em;
}

.gbtn--roll {
  --plate: #3d4a8f;
}

.gbtn--reserve {
  --plate: #8a6a1f;
}

.gbtn--reserve[aria-pressed="true"] {
  --plate: #5d4d3b;
}

.gbtn--sell {
  --plate: var(--good);
}

.gbtn--battle {
  --plate: #a3171c;
  height: 2.4em;
  padding: 0 0.7em 0 0.9em;
  font-size: 2.7em;
}

.gbtn:focus-visible,
.btn:focus-visible,
.token:focus-visible,
.slot__empty:focus-visible,
.side__flag:focus-visible {
  outline: 0.35em solid var(--gold);
  outline-offset: 0.2em;
}

.btn {
  padding: 0.6em 1.6em;
  border: 0.25em solid var(--ink);
  border-radius: 0.8em;
  font: 1.9em "Alfa Slab One", Georgia, serif;
  color: #fff;
  background: #3d4a8f;
  box-shadow: 0 0.25em 0 var(--ink);
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.1);
}

.btn:active {
  transform: translateY(0.15em);
  box-shadow: 0 0.1em 0 var(--ink);
}

/* HUD -------------------------------------------------------------------- */

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6.5em;
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 0.8em 2em;
}

.hud__stats {
  display: flex;
  align-items: center;
  gap: 2.4em;
  font: 2.6em "Alfa Slab One", Georgia, serif;
}

.hud__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.hud__stat img {
  height: 1.3em;
}

.hud__stat small {
  font-size: 0.55em;
  color: var(--ink-soft);
}

.hud__turn {
  font-size: 0.75em;
  color: var(--ink-soft);
}

.hud__turn b {
  font-size: 1.35em;
  color: var(--ink);
}

.hud__opponent {
  margin-left: auto;
  display: grid;
  justify-items: end;
  line-height: 1.1;
}

.hud__opponent span {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hud__opponent b {
  font: 2em "Alfa Slab One", Georgia, serif;
}

/* Board ----------------------------------------------------------------- */

.line {
  position: absolute;
  top: 14.5em;
  left: 2em;
  width: 68em;
}

.line__slots,
.shop__slots {
  display: flex;
  gap: 1.1em;
}

.line__front {
  position: absolute;
  right: -0.5em;
  top: -2.6em;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font: 1.6em "Alfa Slab One", Georgia, serif;
  color: var(--ink-soft);
}

.line__front img {
  height: 1.3em;
}

.shop {
  position: absolute;
  top: 31em;
  left: 2em;
  display: flex;
  align-items: flex-end;
  gap: 1.5em;
}

.shop__sign {
  width: 13em;
  align-self: center;
}

.slot {
  position: relative;
  width: 12em;
  height: 14em;
  display: grid;
  place-items: end center;
  border-radius: 1em;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.slot--line {
  background: linear-gradient(transparent 60%, rgba(150, 120, 60, 0.12));
}

/* Unity's ring marker, flattened into a ground ellipse under the unit's feet. */
.slot__marker {
  position: absolute;
  left: 8%;
  bottom: 0.8em;
  width: 84%;
  height: 3.2em;
  opacity: 0.35;
  pointer-events: none;
}

.slot__empty {
  position: absolute;
  inset: 0;
  border: 0.18em dashed rgba(93, 77, 59, 0.3);
  border-radius: 1em;
  background: none;
  cursor: pointer;
}

.slot.is-target {
  box-shadow: inset 0 0 0 0.3em rgba(179, 138, 45, 0.55);
  background: rgba(255, 236, 170, 0.45);
}

.slot.is-merge {
  box-shadow: inset 0 0 0 0.3em rgba(47, 106, 58, 0.6);
  background: rgba(190, 230, 190, 0.45);
}

.slot.is-over {
  box-shadow: inset 0 0 0 0.45em var(--gold);
}

.slot__hint {
  position: absolute;
  top: -1.4em;
  left: 50%;
  width: 3.2em;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  animation: bob 1s ease-in-out infinite alternate;
}

@keyframes bob {
  to {
    transform: translate(-50%, -0.4em);
  }
}

/* Unit tokens ------------------------------------------------------------ */

.token {
  position: relative;
  width: 12em;
  height: 14em;
  padding: 0;
  border: 0;
  border-radius: 1em;
  background: none;
  font: inherit;
  color: inherit;
  cursor: grab;
  touch-action: none;
}

.token__figure {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.6em;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.token__stage,
.scout__stage {
  position: relative;
  filter: drop-shadow(0 0.25em 0.15em rgba(40, 28, 12, 0.3));
}

.token__stage img,
.scout__stage img {
  position: absolute;
  max-width: none;
}

.token[data-facing="left"] .token__figure {
  transform: scaleX(-1);
}

.token__noart {
  padding: 0 1em 3em;
  font-weight: 700;
  text-align: center;
}

.token:hover .token__figure,
.token.is-selected .token__figure {
  transform: translateY(-0.4em);
}

.token[data-facing="left"]:hover .token__figure {
  transform: scaleX(-1) translateY(-0.4em);
}

.token.is-selected {
  background: rgba(255, 236, 170, 0.6);
  box-shadow: 0 0 0 0.3em var(--gold);
}

.token.is-dragging {
  opacity: 0.35;
}

.token--ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.92;
}

.token__stat {
  position: absolute;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  border: 0.1em solid #e3c36b;
  font: 1.9em/1 "Alfa Slab One", Georgia, serif;
  color: #fff;
  text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0.12em 0.2em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.token__stat--atk {
  left: 0.4em;
  background: radial-gradient(circle at 35% 30%, #5a6475, var(--atk) 70%);
}

.token__stat--hp {
  right: 0.4em;
  background: radial-gradient(circle at 35% 30%, #c8383c, var(--hp) 70%);
}

.token__rank {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  width: 2.6em;
  pointer-events: none;
}

.token__cost {
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  font: 1.6em "Alfa Slab One", Georgia, serif;
  pointer-events: none;
}

.token__cost img {
  width: 1.3em;
}

/* A recruit held in reserve: kept through the next roll and the next turn. */
.token.is-frozen {
  background: linear-gradient(rgba(235, 215, 150, 0.7), rgba(215, 185, 105, 0.5));
  box-shadow: inset 0 0 0 0.25em #b38a2d;
}

.token.is-frozen::after {
  content: "In Reserve";
  white-space: nowrap;
  position: absolute;
  bottom: -1.1em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.1em 0.6em;
  border-radius: 99em;
  font-size: 1.1em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #8a6a1f;
}

/* Scout report ----------------------------------------------------------- */

.scout {
  position: absolute;
  top: 6.4em;
  left: 2em;
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.scout h2 {
  margin: 0;
  font-size: 1.5em;
}

.scout h2 small {
  font: 600 0.7em "Source Sans 3", system-ui, sans-serif;
  color: var(--ink-soft);
}

.scout ol {
  display: flex;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scout li {
  position: relative;
  width: 4.6em;
  height: 4.6em;
  display: grid;
  place-items: center;
  border-radius: 0.6em;
  background: rgba(255, 255, 255, 0.6);
  border: 0.12em solid rgba(93, 77, 59, 0.25);
}

.scout li > .scout__stage {
  transform: scaleX(-1);
}

.scout li > img {
  width: 2.6em;
}

.scout__rank {
  position: absolute;
  right: 0.2em;
  bottom: 0.1em;
  font: 1.1em "Alfa Slab One", Georgia, serif;
}

/* Card place ------------------------------------------------------------- */

/* The card area is a size container, so the card can be as large as fits
   both its width and its height (cards run up to about 1.9 times as tall as
   wide). Container units also keep the card's own em scaling from compounding. */
.card-place {
  position: absolute;
  top: 6.5em;
  right: 2em;
  width: 27em;
  bottom: 1.2em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  container-type: size;
}

.card-place .ucard {
  --ucard-w: min(100cqw, 53cqh);
}

.card-place__hint {
  margin: auto 0;
  padding: 2em;
  font-size: 1.4em;
  text-align: center;
  color: var(--ink-soft);
  border: 0.15em dashed rgba(93, 77, 59, 0.3);
  border-radius: 1em;
}

/* Actions ---------------------------------------------------------------- */

/* Stops short of the card column on the right. */
.actions {
  position: absolute;
  left: 2em;
  right: 30em;
  bottom: 1.2em;
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.actions__battle {
  margin-left: auto;
}

.actions__hint {
  align-self: center;
  max-width: 30em;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Feedback --------------------------------------------------------------- */

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floater {
  position: absolute;
  transform: translate(-50%, 0);
  font: 2.2em "Alfa Slab One", Georgia, serif;
  color: var(--good);
  text-shadow: 0 0.06em 0 #fff, 0 0 0.3em #fff;
  white-space: nowrap;
  animation: float-up 1.2s ease-out forwards;
}

@keyframes float-up {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -3em);
  }
}

.toast {
  position: absolute;
  left: 50%;
  top: 7.5em;
  margin: 0;
  padding: 0.5em 1.2em;
  border-radius: 99em;
  font-size: 1.6em;
  font-weight: 700;
  color: #fff;
  background: rgba(42, 32, 23, 0.9);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.toast.is-on {
  animation: toast 2.6s ease forwards;
}

@keyframes toast {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Menu ------------------------------------------------------------------- */

.menu__head {
  position: absolute;
  top: 2em;
  left: 3em;
  max-width: 36em;
}

.menu__head h1 {
  margin: 0;
  font-size: 6em;
  line-height: 1;
}

.menu__head p {
  margin: 0.3em 0 0;
  font-size: 1.7em;
  color: var(--ink-soft);
}

.menu__head .menu__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em 0.5em;
  width: 40em;
  margin-top: 0.6em;
  font-size: 1.2em;
  color: var(--ink-soft);
}

.btn--small {
  padding: 0.2em 0.8em;
  font-size: 0.9em;
  border-width: 0.18em;
  box-shadow: 0 0.18em 0 var(--ink);
}

.menu__head .menu__message {
  margin-top: 0.4em;
  font-size: 1.2em;
  color: var(--hp);
}

/* First login: choose a player name (MainMenu.SetupNewUser). */
.name-setup {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(42, 32, 23, 0.45);
}

.name-setup form {
  width: 34em;
  padding: 2em 2.4em;
  border: 0.25em solid var(--ink);
  border-radius: 1.2em;
  background: var(--field);
  box-shadow: 0 0.5em 0 var(--ink);
  text-align: center;
}

.name-setup h2 {
  margin: 0;
  font: 2.6em "Alfa Slab One", Georgia, serif;
}

.name-setup p {
  margin: 0.4em 0 1em;
  font-size: 1.4em;
  color: var(--ink-soft);
}

.name-setup input {
  width: 100%;
  padding: 0.4em 0.6em;
  border: 0.15em solid var(--ink-soft);
  border-radius: 0.5em;
  font: 600 1.8em "Source Sans 3", sans-serif;
  color: var(--ink);
  background: #fff;
  user-select: text;
  -webkit-user-select: text;
}

.name-setup .name-setup__error {
  min-height: 1.4em;
  margin: 0.4em 0 0.8em;
  color: var(--hp);
}

/* The login and sign-up form (the same dialog as the name setup). */
.login input + input {
  margin-top: 0.4em;
}

.login .login__note {
  margin: 0 0 0.6em;
  color: var(--good);
}

.login__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.login__actions .btn--small {
  font-size: 1.4em;
}

.login .login__links {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  margin: 1em 0 0;
}

.login__link {
  padding: 0;
  border: 0;
  font: 600 1em "Source Sans 3", sans-serif;
  color: #3d4a8f;
  text-decoration: underline;
  background: none;
  cursor: pointer;
}

.menu__resume {
  position: absolute;
  top: 2.5em;
  left: 42em;
  width: 28em;
  padding: 1em 1.5em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.65);
  border: 0.15em solid rgba(93, 77, 59, 0.25);
}

.menu__resume h2 {
  margin: 0;
  font-size: 1.8em;
}

.menu__resume p {
  margin: 0.3em 0 0.8em;
  font-size: 1.4em;
}

.menu__resume .btn {
  font-size: 1.5em;
}

.menu__sides {
  position: absolute;
  top: 16em;
  left: 3em;
  width: 67em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

.side {
  display: grid;
  gap: 1em;
  justify-items: center;
}

.side__flag {
  display: grid;
  justify-items: center;
  gap: 0.35em;
  padding: 0.6em 1.4em;
  border: 0.25em solid var(--ink);
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.3em 0 var(--ink);
  font: 1.6em "Alfa Slab One", Georgia, serif;
  color: var(--ink);
  cursor: pointer;
}

.side__flag img {
  width: 4.5em;
}

.side__flag:hover {
  transform: translateY(-0.1em);
}

.side__roster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.66em;
}

.menu__version {
  position: absolute;
  left: 3em;
  bottom: 1.2em;
  margin: 0;
  font-size: 1.2em;
  color: var(--ink-soft);
}

.card-place--menu {
  top: 3em;
  bottom: 2em;
  width: 27em;
}

/* Report ----------------------------------------------------------------- */

.report {
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 2em;
  text-align: center;
}

.report__banner {
  height: 12em;
}

.report h1 {
  margin: 0.2em 0 0;
  font-size: 3.6em;
}

.report__vs {
  margin: 0.2em 0 0.6em;
  font-size: 1.6em;
}

.report__armies {
  display: flex;
  align-items: center;
  gap: 2em;
  font-size: 0.7em;
}

.report__army {
  display: flex;
  flex-direction: row-reverse;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report__army--enemy {
  flex-direction: row;
}

.report__swords {
  font-size: 4em;
}

.report .token {
  cursor: default;
}

.recap {
  display: grid;
  gap: 0.6em;
  margin: 1.2em 0 1.6em;
}

.recap__row {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recap__row img {
  height: 3.6em;
}

.recap__row li {
  opacity: 0;
  animation: pop-in 0.25s ease-out forwards;
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Battle ------------------------------------------------------------------ */

.hud--battle .hud__stats {
  font-size: 2.2em;
}

.battle__vs {
  margin: 0 auto;
  font-size: 1.8em;
}

.battle__vs span {
  color: var(--ink-soft);
}

.battle__vs b {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
}

.battle__controls {
  display: flex;
  gap: 0.5em;
}

.chip {
  padding: 0.35em 0.9em;
  border: 0.15em solid var(--ink);
  border-radius: 99em;
  font: 1.5em "Alfa Slab One", Georgia, serif;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  color: #fff;
  background: var(--ink);
}

.chip:disabled {
  opacity: 0.4;
  cursor: default;
}

.chip:focus-visible {
  outline: 0.25em solid var(--gold);
  outline-offset: 0.15em;
}

.field {
  position: absolute;
  inset: 6.5em 0 0;
  background:
    linear-gradient(transparent 58%, rgba(170, 140, 70, 0.18) 58.2%, rgba(150, 120, 55, 0.3) 100%);
}

.field__units,
.field__fx {
  position: absolute;
  inset: 0;
}

.field__fx {
  pointer-events: none;
  overflow: hidden;
}

.bunit {
  position: absolute;
  left: 0;
  bottom: 14em;
  width: 12em;
  transform: translateX(calc(var(--x) * 1em - 6em));
  transition: transform var(--move, 420ms) ease-in-out;
}

.bunit {
  display: flex;
  justify-content: center;
}

.bunit .token {
  font-size: 0.82em;
  cursor: default;
}

.bunit .token:hover .token__figure {
  transform: none;
}

.bunit .token[data-facing="left"]:hover .token__figure {
  transform: scaleX(-1);
}

.bunit__square {
  position: absolute;
  left: 50%;
  bottom: 0.4em;
  width: 13em;
  transform: translateX(-50%) scaleY(0.45);
  transform-origin: bottom center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.bunit.is-square .bunit__square {
  opacity: 0.9;
}

.bunit.is-arriving {
  animation: arrive 0.35s ease-out;
}

@keyframes arrive {
  from {
    opacity: 0;
    filter: brightness(1.6);
  }
}

.bframes {
  position: absolute;
  pointer-events: none;
}

.bball {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(0 0.2em 0.2em rgba(0, 0, 0, 0.35));
}

.bball--rocket {
  filter: sepia(1) saturate(4) hue-rotate(-20deg) drop-shadow(-0.6em 0 0.3em rgba(255, 140, 30, 0.8));
}

.bshard {
  position: absolute;
  pointer-events: none;
}

.bfloat {
  position: absolute;
  transform: translate(-50%, 0);
  font: 2.6em "Alfa Slab One", Georgia, serif;
  white-space: nowrap;
  text-shadow: 0 0.06em 0 #fff, 0 0 0.25em #fff;
  animation: float-up 1.1s ease-out forwards;
}

.bfloat--bad {
  color: #c0181c;
}

.bfloat--good {
  color: var(--good);
}

.bfloat--info {
  font-size: 2em;
  color: var(--ink);
}

.battle__result {
  position: absolute;
  inset: 6.5em 0 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5em;
  background: rgba(255, 250, 214, 0.55);
  animation: pop-in 0.3s ease-out;
}

.battle__result[hidden] {
  display: none;
}

.battle__result-text {
  margin: 0;
  font: 9em "Alfa Slab One", Georgia, serif;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0.05em 0 #fff;
}

.battle__result[data-result="win"] .battle__result-text {
  color: var(--good);
}

.battle__result[data-result="loss"] .battle__result-text {
  color: #9b1c1c;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Small screens held upright: the board needs landscape. */
@media (orientation: portrait) and (max-width: 820px) {
  .stage::after {
    content: "Turn your device sideways to play.";
    position: absolute;
    inset: auto 0 0;
    padding: 0.5em;
    font: 600 3.4cqw "Source Sans 3", system-ui, sans-serif;
    text-align: center;
    color: #fff;
    background: rgba(42, 32, 23, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot__hint,
  .floater,
  .recap__row li {
    animation: none;
    opacity: 1;
  }
}

/* Sound switches ------------------------------------------------------------ */

.sound-toggles {
  display: inline-flex;
  gap: 0.4em;
}

.battle__controls .sound-toggles {
  margin-left: 0.6em;
}

.sound-toggles--small .chip {
  padding: 0.15em 0.7em;
  font-size: 0.85em;
  border-width: 0.12em;
}

/* Victory and defeat (Scenes/*Victory.unity, *Defeat.unity) ------------------ */

.ending {
  background: #000;
  color: #fff;
}

.ending__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* the whole painting, on black, as the Unity scenes show it */
  animation: ending-in 1.6s ease-out both;
}

.ending__text {
  position: absolute;
  top: 4em;
  left: 50%;
  width: 62em;
  transform: translateX(-50%);
  padding: 1.6em 2.4em;
  border-radius: 1em;
  background: rgba(0, 0, 0, 0.62);
  text-align: center;
  animation: ending-in 1.6s 0.8s ease-out both;
}

.ending[data-outcome="victory"][data-nation="france"] .ending__text {
  top: 50%;
  transform: translate(-50%, -50%);
}

.ending__text p {
  margin: 0 0 0.6em;
  font: 2em/1.35 "Alfa Slab One", Georgia, serif;
  text-shadow: 0 0.08em 0.3em #000;
}

.ending__text .ending__headline {
  font-size: 2.6em;
}

.ending__text .ending__record {
  margin: 1em 0 0;
  font: 600 1.5em "Source Sans 3", sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

.ending__done {
  position: absolute;
  right: 1.5em;
  bottom: 1.5em;
  animation: ending-in 1s 2s ease-out both;
}

@keyframes ending-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ending__art,
  .ending__text,
  .ending__done {
    animation: none;
  }
}