/* The battle: the HUD (waves, health, XP, mana, boss bars and alerts), the card deck, the battlefield, and the level-up draft, pause and result dialogs. */
@keyframes ready-glow {
  50% {
    filter: brightness(1.2);
  }
}
@keyframes level-tooltip {
  50% {
    translate: 0 -4px;
  }
}
.reward-strip {
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  background: var(--slate-500);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 12px 7px;
  margin: 18px 0;
  color: #fff2cb;
  font-size: 12px;
  font-weight: bold;
}
.reward-strip span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.level-modal {
  background: var(--slate-500);
  border-color: var(--slate-900);
}
.level-modal .modal-body {
  padding: 10px 9px;
}
.level-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--slate-900);
  border-radius: 9px;
  background: var(--slate-200);
  box-shadow:
    inset 0 0 0 2px #eef0e4,
    0 4px var(--slate-800);
  padding: 0 0 8px;
  overflow: hidden;
  color: var(--slate-800);
  transition: transform 0.15s;
}
.choice:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px #eada69,
    0 5px var(--slate-800);
}
.choice-title {
  background: var(--type-unit);
  color: white;
  text-shadow: 1px 1px #7b692f;
  font-size: 10px;
  font-weight: 900;
  width: 100%;
  padding: 7px 1px;
  min-height: 30px;
  text-transform: uppercase;
}
.choice-art {
  width: 100%;
  padding: 8px 0;
  background: repeating-conic-gradient(#fff5 0 15deg,#fff1 15deg 30deg) var(--type-unit-soft);
}
.choice .stars {
  color: #ad871f;
  font-size: 12px;
  margin: 6px 0;
}
.choice p {
  font-size: 10px;
  line-height: 1.4;
  margin: 7px 5px;
  padding: 0;
  height: 3lh;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.choice-cost {
  font-size: 13px;
  font-weight: bold;
  margin-top: auto;
  display: flex;
  gap: 3px;
  align-items: center;
}
.in-battle {
  background: var(--slate-900);
}
.combat-top {
  height: 34px;
  background: var(--slate-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 17px;
  flex-shrink: 0;
}
.combat-top > span {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--slate-900);
  border: 1px solid var(--slate-950);
  min-width: 58px;
  border-radius: 14px;
  height: 20px;
  padding-right: 8px;
  font-size: 11px;
}
.combat-top > strong {
  font-size: 18px;
  letter-spacing: 1px;
}
.combat-info {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: #50b266;
  flex-shrink: 0;
  height: 57px;
  border-bottom: 1px solid #60bc72;
  position: relative;
  z-index: 2;
}
.xp-track {
  height: 9px;
  border: 2px solid #2a4a46;
  background: #334c48;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
}
.xp-track i {
  display: block;
  background: var(--yellow-top);
  height: 100%;
}
.battlefield {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #4db25c;
  overflow: hidden;
}
.battlefield canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  touch-action: none;
}
.accessible-positions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.accessible-positions button {
  position: absolute;
  width: 45px;
  height: 40px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  background: #c7f39244;
}
.accessible-positions button:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.combat-bottom {
  background: var(--slate-900);
  padding: 5px 11px 12px;
  flex-shrink: 0;
  border-top: 3px solid var(--slate-950);
}
.battle-deck {
  display: flex;
  gap: 7px;
  justify-content: center;
  min-height: 110px;
}
.battle-card {
  position: relative;
  flex: 1;
  max-width: 85px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--slate-300);
  border: 2px solid #dce1ce;
  outline: 2px solid var(--slate-950);
  box-shadow:
    inset 0 -4px var(--slate-500),
    0 3px var(--slate-950);
  border-radius: 10px;
  padding: 0 0 7px;
  transition:
    filter 0.15s,
    transform 0.15s;
  margin: 2px 0 7px;
}
.battle-card.selected {
  border-color: #fff887;
  outline-color: #ffd437;
  transform: translateY(-4px);
  box-shadow:
    0 0 14px #fee65a66,
    inset 0 -4px var(--slate-500);
}
.battle-card.unaffordable {
  filter: brightness(0.5) saturate(0.6);
}
.card-image {
  width: 100%;
  background: repeating-conic-gradient(var(--type-unit-soft) 0deg 25deg, var(--type-unit) 25deg 50deg);
  padding: 2px 0;
}
.card-mana {
  position: absolute;
  bottom: -10px;
  display: grid;
  place-items: center;
}
.card-mana b {
  position: absolute;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px #543368;
}
.health-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 20px 1px;
}
.health-track {
  flex: 1;
  height: 12px;
  border: 2px solid var(--slate-950);
  background: var(--slate-800);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.health-track i {
  display: block;
  background: #e6b328;
  height: 100%;
}
@media (max-width: 480px) {
  .combat-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
@media (max-height: 720px) {
  .combat-bottom {
    padding-top: 3px;
    padding-bottom: 6px;
  }
  .battle-deck {
    min-height: 96px;
  }
  .card-image svg {
    width: 39px;
    height: 39px;
  }
}
.passive-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 33px;
  margin: 1px 0 4px;
}
.passive-strip > small {
  font-size: 10px;
  letter-spacing: 1px;
  color: #81c6df;
}
.passive-strip > span {
  display: flex;
  align-items: center;
  background: #274b69;
  border: 1px solid #4c96b2;
  border-radius: 7px;
  padding: 0 4px;
}
.passive-strip b {
  font-size: 10px;
  color: #f5e595;
}
.passive-choice .choice-title {
  background: var(--type-passive);
}
/* Draft art shares the album's look: the category colour under soft white stripes. */
.passive-choice .choice-art {
  background: repeating-conic-gradient(#fff5 0 15deg,#fff1 15deg 30deg) var(--type-passive-soft);
}
.evo-choice {
  border-color: var(--yellow);
  background: var(--type-evo-soft);
  box-shadow: 0 0 14px var(--purple-top);
}
.evo-choice .choice-title {
  background: var(--type-evo);
}
.evo-choice .choice-art {
  background: radial-gradient(var(--yellow-soft), var(--type-evo-soft));
}
.level-ready {
  font-size: 10px;
  min-height: 33px;
  padding: 5px 8px;
  flex-shrink: 0;
  animation: ready-glow 1.5s ease-in-out infinite;
}
.level-ready[hidden] {
  display: none;
}
.battle-card {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 90;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 5px 3px #0008);
  transform: translate(-50%, -75%);
}
.drag-ghost.valid {
  filter: drop-shadow(0 0 6px #b8ff52);
}
.drag-ghost.invalid {
  filter: drop-shadow(0 0 6px #ff4565);
}
@media (prefers-reduced-motion: reduce) {
  .level-ready {
    animation: none;
  }
}
.level-choices:has(.choice:only-child) {
  grid-template-columns: minmax(0, 190px);
  justify-content: center;
}

.deploy-cooldown {
  display: none;
}
.battle-card.cooling .deploy-cooldown {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to top,
    #172032bb var(--cooldown),
    #17203233 var(--cooldown)
  );
  color: white;
  font-weight: 900;
  font-size: 20px;
  -webkit-text-stroke: 2px var(--slate-950);
  paint-order: stroke fill;
  text-shadow: none;
  border-radius: inherit;
  pointer-events: none;
}

.level-modal .modal-body > .btn {
  margin-top: 8px;

}
.new-milestone .painted-stars {
  justify-content: center;
}
.choice-title,
.combat-top {
  font-family: "Lilita One", Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
.combat-round {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  line-height: 1;
  box-shadow: 0 var(--button-depth) var(--button-drop);
}
.combat-round:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px var(--button-drop);
}
.combat-round {
  width: 40px;
  height: 40px;
  background: var(--cream);
  color: var(--disc-glyph);
  font-family: "Lilita One", Arial, sans-serif;
  font-size: 19px;
}
.combat-round.speed {
  background: var(--green-top);
}
.battlefield .level-ready {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  margin: 0;
  min-height: 44px;
  padding: 8px 15px;
  font-size: 23px;
  white-space: nowrap;
  animation: level-tooltip 1.6s ease-in-out infinite;
}

.battlefield .level-ready:active {
  transform: translate(-50%, 2px);
}
@media (prefers-reduced-motion: reduce) {
  .battlefield .level-ready {
    animation: none;
  }
}

.battle-card {
  height: 86px;
  padding-top: 4px;
}
.battle-card .card-image {
  height: 54px;
}
.pause-modal {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: 580px;
}
/* The pause title stays for screen readers only so the panels and buttons sit higher. */
.pause-modal .modal-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pause-modal .modal-body {
  padding: 0;
}
.pause-panel {
  border: 3px solid var(--slate-950);
  border-radius: 20px;
  overflow: hidden;
  background: var(--slate-300);
  margin-bottom: 18px;
  box-shadow: 0 7px var(--ink);
}
.pause-panel h3 {
  background: #ffbd12;
  padding: 10px;
  font-size: 20px;
}
.pause-panel.passive h3 {
  background: #24baf0;
}
.pause-slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 14px 9px;
}
.pause-slot {
  background: #efc632;
  border: 2px solid var(--slate-900);
  border-radius: 10px;
  min-height: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pause-slot.empty {
  background: #9e832c;
  opacity: 0.65;
}
.passive .pause-slot {
  background: #38afd5;
}
.passive .pause-slot.empty {
  background: #24718c;
}
.pause-slot .painted-stars {
  flex-wrap: wrap;
  justify-content: center;
}
.pause-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pause-actions .btn {
  margin: 0;
}
.pause-actions .resume {
  width: 65%;
}

/* Leave room for button depth inside the scrolling pause panel. */
.pause-modal .modal-body {
  padding: 0 6px 18px;
}

.health-track {
  height: 14px;
}

/* Battlefield level-up: a two-tone yellow push button shaped as a speech bubble. The tail is an
   inline SVG (level-up-tail.js) whose ink edges grow out of the bottom border, over a drop that
   matches the button's. */
.battlefield .level-ready {
  min-height: 52px;
  padding: 6px 26px;
  border-radius: 12px;
  bottom: 14%;
  font-size: 26px;
  letter-spacing: 1px;
}
.level-tail {
  position: absolute;
  left: 50%;
  top: calc(100% - 2px);
  width: 28px;
  height: 20px;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.level-tail-drop {fill: var(--button-drop)}
.level-tail-ink {fill: var(--ink)}
.level-tail-fill {fill: var(--yellow)}
.level-ready:active .level-tail-drop {transform: translateY(-2px)}
.battle-deck:empty {
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* Portrait battle cards: bold frame, full artwork, and a stone base. */
.battle-deck {
  align-items: flex-start;
  gap: 9px;
  padding: 4px 4px 14px;
}
.battle-card {
  max-width: 98px;
  height: auto;
  aspect-ratio: 0.7;
  padding: 0;
  border: 3px solid #fff;
  outline: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--type-unit-soft);
  box-shadow: 0 4px var(--ink);
  overflow: visible;
}
.battle-card .card-image {
  height: 70%;
  flex: none;
  padding: 4px 2px 0;
  display: grid;
  place-items: center;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: repeating-conic-gradient(
    from -8deg at 50% 65%,
    var(--type-unit-soft) 0deg 24deg,
    var(--type-unit) 24deg 48deg
  );
}
.battle-card .card-image svg {
  width: 92%;
  height: 100%;
  max-height: 100%;
  filter: drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0);
}
/* The rank sits on a slate strip under the art, "2 ★" style like the draft cards. */
.battle-card .card-stars {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 4px 0 0 7px;
  margin: 0;
  background: var(--slate);
  border-top: 2px solid var(--slate-900);
  border-radius: 0 0 10px 10px;
}
.battle-card .card-stars .card-rank {
  font-size: 14px;
}
.battle-card .card-mana {
  bottom: -15px;
  right: -3px;
  z-index: 4;
  max-width: 50%;
}
/* The droplet's bulb sits a little low in its box, so the number drops a touch to center in it. */
.battle-card .card-mana b {
  font-size: 16px;
  -webkit-text-stroke: 2px #302132;
  paint-order: stroke fill;
  transform: translateY(1px);
}
.battle-card .card-mana svg {
  width: 32px;
  max-width: 100%;
}
.battle-card.cooling .deploy-cooldown {
  border-radius: 10px;
}

/* Reference proportions: seven columns, compact 0.78-aspect cards, more field. */
.battle-deck {
  min-height: 0;
  gap: 6px;
  padding: 3px 2px 13px;
}
.battle-card {
  max-width: 82px;
  aspect-ratio: 0.78;
  border-width: 2px;
  outline: none;
  box-shadow:
    0 0 0 2px var(--ink),
    0 3px var(--ink);
  border-radius: 12px;
}
.battle-card .card-image {
  height: 69%;
  padding: 5px 4px 1px;
  border-radius: 9px 9px 0 0;
}
.battle-card .card-stars {
  padding: 3px 0 8px 6px;
}
.battle-card .card-image svg {
  width: 88%;
  height: 100%;
}
.battle-card .card-type {
  width: 19px;
  height: 22px;
  border-radius: 0 8px 0 3px;
}
.battle-card.unaffordable {
  filter: grayscale(1) brightness(0.7);
}
.battle-card.cooling .deploy-cooldown {
  border-radius: 9px;
  font-size: 16px;
}
.battle-card.selected {
  box-shadow:
    0 0 0 2px #ffd437,
    0 0 12px #ffe558;
}
.passive-strip {
  margin: 1px 0;
  min-height: 0;
  gap: 4px;
}
.passive-strip > small {
  display: none;
}
.passive-strip > span {
  padding: 1px 3px;
}
.passive-strip svg {
  width: 22px;
  height: 22px;
}
.combat-bottom {
  padding-top: 4px;
  padding-bottom: 10px;
}
.battle-card {
  max-width: 20%;
}

.buddy-alert { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; width: 240px; text-align: center; padding: 12px 10px; border: 3px solid var(--slate-900); border-radius: 18px; background: repeating-conic-gradient(from 10deg at 50% 35%, #ffdc58 0deg 15deg, #fff19d 15deg 30deg); box-shadow: 0 4px var(--slate-900); color: var(--slate-900); }
.buddy-alert[hidden] { display: none; }
.buddy-duo { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 8px; }
.buddy-duo > .painted-sprite:last-child { transform: scaleX(-1); }
.buddy-duo b { font-size: 28px; color: #a948ca; }
.buddy-alert strong { display: block; font-size: 23px; color: #fff; -webkit-text-stroke: 1px var(--slate-900); }
.buddy-alert small { display: block; font-size: 11px; }

.health-track[data-affliction="fire"] { box-shadow: 0 0 10px 3px #ff852f; }
.health-track[data-affliction="venom"] { box-shadow: 0 0 10px 3px #94db4b; }
.health-track[data-affliction="chill"] { box-shadow: 0 0 10px 3px #8edfff; }
.pause-slot .card-rank { color: var(--slate-900); text-shadow: none; }
/* EVO cards have no stars; an empty rank row keeps their icon level with the others. */
.pause-slot .rank-spacer { height: 16px; }

.boss-hud { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.boss-hud[hidden] { display:none; }
.boss-emblem { display:flex; align-items:center; flex-shrink:0; }
.boss-health-info { flex:1; min-width:0; }
.boss-health { position:relative; height:22px; border:3px solid var(--slate-900); border-radius:6px; overflow:hidden; background:var(--slate-900); }
#boss-health-fill, .boss-shield i { display:block; height:100%; transition:width .12s linear; }
/* Boss health shares the base health bar's red. */
#boss-health-fill { background:var(--health-fill); box-shadow:inset 0 -4px var(--red); }
@media (prefers-reduced-motion:reduce) { #boss-health-fill, .boss-shield i { transition:none; }
}

/* A held unit that has been picked up shows the pointer wherever it is dragged. */
body.relocating, body.relocating * {cursor:pointer !important}

/* Battle drafts use a floating ribbon and separate, framed choices. */
.level-modal {background:transparent;border:0;box-shadow:none;border-radius:0}
.level-modal .modal-title {position:relative;isolation:isolate;margin:0 18px 14px;border:2px solid var(--slate-900);border-radius:8px;padding:12px 5px;box-shadow:inset 0 4px var(--purple-top),0 5px var(--ink);font-size:24px}
.level-modal .modal-title::before,.level-modal .modal-title::after {content:"";position:absolute;z-index:-1;top:15px;width:26px;height:42px;background:var(--purple);border:2px solid var(--slate-900);box-shadow:0 4px var(--ink)}
.level-modal .modal-title::before {left:-20px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,25% 50%)}
.level-modal .modal-title::after {right:-20px;clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}
.level-modal .modal-body {padding:9px 4px 12px;overflow-y:auto}
.level-choices {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.choice-option {min-width:0;display:flex;flex-direction:column}
.choice-status {height:24px;flex-shrink:0;text-align:center;font-size:17px;line-height:22px;color:#ffdc53;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 2px var(--ink)}
.choice-status.is-new {color:#85ff47}
.level-modal .choice {width:100%;flex:1;min-width:0;border:2px solid #fff9e9;border-radius:13px;background:var(--slate-300);box-shadow:0 0 0 1px var(--slate-900),0 6px var(--ink);padding:0 0 8px;overflow:hidden}
.level-modal .choice:hover,.level-modal .choice:focus-visible {transform:translateY(-2px);outline:2px solid #ffe365;outline-offset:2px}
.level-modal .choice-title {display:flex;align-items:center;justify-content:center;min-height:39px;padding:5px 3px;font-size:12px;line-height:1.05;background:var(--type-unit);border-bottom:3px solid var(--slate-500);color:#fff;-webkit-text-stroke:1.5px var(--slate-950);paint-order:stroke fill;text-shadow:none;overflow-wrap:anywhere}
.level-modal .passive-choice .choice-title {background:var(--type-passive)}
.level-modal .evo-choice .choice-title {background:var(--type-evo)}
/* Long single-word names wrap at their soft hyphen (ELECTRO-/MANCER) instead of shrinking below readable size. */
.level-modal .choice-title.long-name {hyphens:manual;overflow-wrap:normal}
.choice-card-face {position:relative;width:calc(100% - 20px);margin:12px 10px 10px;border:2px solid var(--slate-900);border-radius:10px;background:var(--slate);padding-bottom:5px}
.level-modal .choice-art {border-radius:8px 8px 0 0;padding:8px 0 4px;background:repeating-conic-gradient(#fff5 0 15deg,#fff1 15deg 30deg) var(--type-unit-soft)}
.level-modal .passive-choice .choice-art {background:repeating-conic-gradient(#fff5 0 15deg,#fff1 15deg 30deg) var(--type-passive-soft)}
.level-modal .evo-choice .choice-art {background:radial-gradient(var(--yellow-soft),var(--type-evo-soft))}
.level-modal .choice-art > .painted-sprite {width:100%;max-width:66px;height:66px;filter:drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0)}
/* Draft cards mirror the battle card: rank left of the strip, mana droplet in the bottom-right corner. */
/* Evolved cards have no rank, so the row keeps its height to match the other cards. */
.level-modal .choice .stars {display:flex;align-items:center;justify-content:flex-start;min-height:17px;margin:5px 0 0;padding-left:8px}
.level-modal .choice-cost {position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;line-height:22px;color:white;-webkit-text-stroke:1px var(--slate-900);paint-order:stroke fill;gap:1px;text-shadow:none}
.level-modal .choice-cost.card-mana {bottom:-15px;left:auto;right:-4px;transform:none;display:grid;place-items:center;line-height:1;z-index:4}
.level-modal .choice-cost.card-mana b {position:absolute;font-size:16px;-webkit-text-stroke:2px #302132;paint-order:stroke fill;text-shadow:1px 1px #543368;transform:translateY(1px)}
.level-modal .choice-cost.card-mana svg {width:32px;height:32px}
.level-modal .choice-card-face .card-type {top:-2px;right:-2px;width:21px;height:23px;border-radius:0 9px 0 6px}
.level-modal .choice p {align-self:stretch;background:var(--slate-500);color:white;border-top:3px solid var(--slate-700);border-radius:0;margin:12px 0 0;padding:8px 10px;font-size:11px;line-height:1.35;height:calc(3lh + 20px);text-align:left;-webkit-text-stroke:.3px var(--slate-900);paint-order:stroke fill}
.level-modal .modal-body > .btn {display:block;width:fit-content;min-width:145px;margin:20px auto 0}
/* A lone choice keeps the three-choice card size by sitting in the middle column. */
.level-choices:has(.choice-option:only-of-type) {grid-template-columns:repeat(3,minmax(0,1fr));justify-content:normal}
.level-choices > .choice-option:only-of-type {grid-column:2}
.level-modal .choice p em {font-style:normal;color:#7dff6b}
/* The deck in miniature under the draft: unit slots over passive slots, empty ones dimmed. */
.draft-deck {display:flex;flex-direction:column;align-items:center;gap:5px;margin:18px auto 0;max-width:300px}
.draft-deck > small {font-size:16px;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 2px var(--ink)}
.draft-deck-row {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;width:100%}
.draft-deck-row + .draft-deck-row {margin-top:9px}
.draft-deck-slot {position:relative;aspect-ratio:1;display:grid;place-items:center;border:2px solid #fff9e9;border-radius:9px;background:var(--type-unit-soft);box-shadow:0 0 0 1px var(--slate-900),0 3px var(--ink)}
.draft-deck-slot.passive {background:var(--type-passive-soft)}
.draft-deck-slot.evo {background:var(--type-evo-soft)}
.draft-deck-slot.empty {background:var(--type-unit);border-color:transparent;opacity:.35;box-shadow:inset 0 0 0 2px var(--slate-900)}
.draft-deck-slot.passive.empty {background:var(--type-passive)}
.draft-deck-slot > .painted-sprite {width:78%;height:78%}
.draft-deck-slot .card-rank {position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;font-size:11px;line-height:1;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
@media(max-width:360px){.level-choices{gap:6px}.level-modal .choice-title{font-size:10px}.level-modal .choice p{font-size:10px;padding:6px 8px}.choice-card-face{width:calc(100% - 12px);margin-inline:6px}.level-modal .choice-art > .painted-sprite{height:58px}
}

/* Friend synergies use the same corner badges as equipment tiles. */
.level-modal .choice-friends {position:absolute;top:3px;left:3px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:3px;max-width:calc(100% - 6px);pointer-events:none}
.choice-friend {width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff0ba;border:2px solid var(--slate-800);border-radius:9px;box-shadow:0 2px 0 #26354b55}
.choice-friend > .painted-sprite {width:23px;height:23px}
.level-modal .choice-friends:has(.choice-friend:nth-child(4)) {gap:2px}
.choice-friends:has(.choice-friend:nth-child(4)) .choice-friend {width:18px;height:20px;border-width:1px;border-radius:5px}
.choice-friends:has(.choice-friend:nth-child(4)) .painted-sprite {width:16px;height:18px}
@media(max-width:360px){.choice-friend{width:25px;height:25px}.choice-friend > .painted-sprite{width:20px;height:20px}
}

.xp-orb-layer {position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.xp-magic-orb {position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,white 0 13%,#b8fcff 22%,#42dcff 50%,#2492ef 78%);box-shadow:0 0 5px #b2faff,0 0 11px #35cfff,0 3px 8px #24cfff80}
.xp-track.xp-collecting {box-shadow:0 0 8px #89f8ff,inset 0 0 5px #b8ffff}

button.pause-slot {cursor:pointer;color:inherit;font:inherit;padding:0}
button.pause-slot:focus-visible {outline:3px solid white;outline-offset:3px}
button.pause-slot:active {transform:scale(.95)}

.final-boss-alert {position:absolute;top:38%;left:0;width:100%;z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;text-align:center;filter:drop-shadow(0 4px 0 #281d3870)}
.final-boss-alert[hidden]{display:none}
.final-boss-alert>svg {filter:drop-shadow(0 0 12px #ff414c)}
.final-boss-alert strong {width:100%;padding:10px 0;background:linear-gradient(90deg,transparent,#ef2949e8 20% 80%,transparent);font-size:36px;color:white;-webkit-text-stroke:4px #251d2c;paint-order:stroke fill;line-height:1.15}
.final-boss-alert small {color:#fff2d4;font-size:13px;-webkit-text-stroke:2px #251d2c;paint-order:stroke fill}
@media(max-width:360px){.final-boss-alert strong{font-size:30px}
}

.choice-evo-hint {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;min-height:30px;padding:5px 3px 0;margin-top:auto;color:white;font-size:10px;-webkit-text-stroke:1.5px var(--slate-900);paint-order:stroke fill}
.choice-evo-hint>span {display:flex;align-items:center}
.choice-evo-hint svg {flex-shrink:0}
@media(max-width:360px){.choice-evo-hint{gap:2px;font-size:10px}.choice-evo-hint svg{width:18px;height:18px}
}

/* Chapter clear: ribbon, completed journey, and the rewards actually earned. */
.victory-modal {background:transparent;border:0;box-shadow:none;overflow:visible}
.victory-modal .modal-title {position:relative;z-index:1;align-self:center;width:65%;padding:10px 4px;border:3px solid var(--slate-900);border-radius:9px;background:var(--purple);box-shadow:inset 0 4px var(--purple-top),0 3px var(--slate-950);font-size:30px;color:white;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
.victory-modal .modal-title::before,.victory-modal .modal-title::after {content:"";position:absolute;z-index:-1;top:15px;width:32px;height:45px;background:var(--purple);border:3px solid var(--slate-900);box-shadow:0 3px var(--slate-950)}
.victory-modal .modal-title::before {left:-29px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,25% 50%)}
.victory-modal .modal-title::after {right:-29px;clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}
.victory-modal .modal-body {padding:0 0 8px;margin-top:-18px}
.victory-panel {padding:38px 18px 22px;background:radial-gradient(ellipse at 50% 35%,#c3a0d4 0, var(--slate-300) 65%);border:3px solid var(--slate-900);border-radius:18px;box-shadow:0 6px #14213080}
.victory-panel h3 {margin:0;color:white;font-size:24px;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
/* Same translucent pill as the Starter Pack header. */
.victory-heading {margin:0 0 18px;padding:8px 10px;border-radius:24px;background:#24213666}
.victory-chapter {margin:4px 0 0;font-size:13px;color:#fff}
/* Result summaries reuse the battle HUD's ticked wave track; the skulls perch above it. */
.victory-progress {position:relative;margin-top:40px}
.victory-progress .summary-track {height:25px;gap:2px}
.victory-progress span {position:absolute;bottom:22px;left:48%;transform:translateX(-50%)}
.victory-progress span:last-child {left:94%}
.victory-stats {display:flex;gap:5px;margin:10px 0 16px;font-size:20px;color:white}
.victory-stats>span {display:flex;align-items:center;justify-content:center;gap:6px;flex:1;border:2px solid var(--slate-950);border-radius:24px;background:var(--slate-900)}
.victory-stats b {color:#85ef28}
.victory-rewards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:135px;padding:12px 10px;background:var(--slate-500);border-radius:16px;box-shadow:inset 0 4px var(--slate-700),inset 0 -3px #bfd6e4;align-items:start}
.victory-reward {display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 2px 5px;border:2px solid var(--slate-950);border-radius:10px;background:#10b6ef;color:white;box-shadow:inset 0 3px #77e9ff}
.victory-reward strong {font-size:19px;line-height:1.1;-webkit-text-stroke:2px var(--slate-950);paint-order:stroke fill}
.victory-reward small {font-size:10px;margin-top:5px}
.victory-rewards.has-level {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding-inline:8px}
.victory-rewards.has-level .victory-reward strong {font-size:16px}
.victory-rewards.has-level .victory-reward > svg, .victory-rewards.has-level .victory-reward > .painted-sprite {width:42px;height:42px}
.perfect-victory {margin:0 0 44px;line-height:1;color:#fff2ab;font-size:20px;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
.perfect-victory b {color:#b8e95b}
.victory-milestone {margin-top:14px}.victory-milestone p {font-size:11px;margin:4px 0 0;color:white}
.victory-modal .modal-body>.btn {display:flex;justify-content:center;margin:24px auto 4px;min-width:180px;}
.result-actions {display:flex;gap:10px;margin:24px 14px 4px}
.result-actions .btn {flex:1;display:flex;justify-content:center}
.defeat-modal .modal-title {background:var(--red);box-shadow:inset 0 4px var(--red-top),0 3px var(--slate-950)}
.defeat-modal .modal-title::before,.defeat-modal .modal-title::after {background:var(--red)}
.defeat-modal .victory-panel {background:radial-gradient(ellipse at 50% 35%,#cfa3aa 0,var(--slate-300) 65%)}
/* No cheer line on defeat, so leave room for the skulls perched above the track. */
.defeat-progress {margin-top:34px}
.defeat-modal .victory-rewards {display:flex;justify-content:center;min-height:0}
.defeat-modal .victory-reward {width:26%}
@media(max-width:360px){.victory-panel{padding-inline:12px}.victory-rewards{gap:5px;padding-inline:7px}.victory-reward svg{width:39px;height:39px}.victory-stats{font-size:17px}
}

.boss-shield{margin-top:2px}
.boss-shield i{background:linear-gradient(#8ae9ff 0 22%,#28bde5 22% 75%,#1686b8 75%)}
.boss-shield[hidden]{display:none}

/* Layered canopy behind floating battle controls. */
/* A home-screen install draws under the status bar and Dynamic Island. The
   HUD moves down by that inset and its dark top band fills the strip behind
   them, while the clouds keep their shape below. The inset is 0 in Safari,
   which keeps its own chrome above the page. */
.battle-hud{position:relative;flex-shrink:0;z-index:3;isolation:isolate;padding-top:env(safe-area-inset-top)}
.battle-hud::before{content:"";position:absolute;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--slate-900);z-index:-1}
/* The cloud lobes reach past the drawing's top edge; Safari paints that
   overflow, so clip it and keep the strip above the clouds. */
.battle-hud-clouds{position:absolute;top:env(safe-area-inset-top);left:0;right:0;width:100%;height:calc(100% - env(safe-area-inset-top) + 30px);overflow:hidden;z-index:-2;pointer-events:none}
.battle-hud .combat-top{background:transparent;height:40px;padding:6px 15px 0;position:relative}
.battle-hud .combat-top>strong{font-size:24px;align-self:flex-start;line-height:30px;color:white;-webkit-text-stroke:3px var(--slate-950);paint-order:stroke fill}
.battle-hud .combat-top>span{height:22px;min-width:65px;box-shadow:0 2px #24583d44}
.battle-hud .combat-info{height:66px;background:transparent;border:0;padding:8px 12px 10px;gap:9px}
.battle-hud .xp-track,.combat-bottom .xp-track{height:17px;border-radius:3px;margin-top:3px;border-color:#20333c;background:var(--slate-900);box-shadow:0 3px #24453844}
@media(max-width:360px){.battle-hud .combat-info{gap:7px;padding-inline:9px}.combat-round{width:35px;height:35px}
}

.battle-hud .xp-track,.combat-bottom .xp-track{height:19px;border:3px solid var(--slate-900);border-radius:7px;background:var(--slate-800);box-shadow:0 2px var(--slate-950);position:relative}
.battle-hud .xp-track i,.combat-bottom .xp-track i{background:var(--yellow-top);box-shadow:inset 0 -2px var(--yellow);position:relative}
.battle-hud .xp-track i::after,.combat-bottom .xp-track i::after{content:"";position:absolute;inset:0;background:var(--xp-flash);opacity:0;pointer-events:none;transition:opacity .18s ease-out}
.battle-hud .xp-track.xp-collecting i::after,.combat-bottom .xp-track.xp-collecting i::after{opacity:.85;transition:none}
.battle-hud .xp-track.xp-collecting,.combat-bottom .xp-track.xp-collecting{border-color:var(--slate-900);box-shadow:0 2px var(--slate-950)}
@media(prefers-reduced-motion:reduce){.battle-hud .xp-track i::after,.combat-bottom .xp-track i::after{transition:none}
}

/* The pause glyph keeps its shape; a matching stroke and larger size give it more weight. */
/* Pause: two rounded pills about 40% of the button's height, spaced a little narrower than a pill. */
.battle-hud .pause-symbol{display:block;width:18px;height:18px}
@media(max-width:360px){.battle-hud .pause-symbol{width:16px;height:16px}
}

/* Simple resource silhouettes keep the battle HUD visually consistent. */
.health-row .hud-heart{flex-shrink:0}

/* EVO deck art shares the evolution choice background. */
.battle-card.evo-card{background:var(--type-evo-soft)}
.battle-card.evo-card .card-image{background:radial-gradient(var(--yellow-soft),var(--type-evo-soft))}

.pause-panel.pause-equipment h3 { background: #ba82ed; }
/* Bonus chips sit side by side, one per boosted unit: icon + short stat label. */
.pause-equipment-list { padding: 10px 12px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pause-equipment-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 12px; background: var(--slate-500); }
.pause-equipment-row > svg { flex-shrink: 0; }
.pause-equipment-row span { font-size: 15px; color: #d8ffac; white-space: nowrap; }
/* Builder play-test: a scratch session on a copy of the save. */
.playtest-banner{position:fixed;left:12px;top:12px;z-index:1000;max-width:230px;padding:9px 13px;border-radius:12px;background:#172433ee;border:2px solid #ffcf5a;color:#fff0d0;font:12px/1.45 "Trebuchet MS",sans-serif}
.playtest-banner b{display:block;color:#ffcf5a;letter-spacing:1px}.playtest-banner a,.playtest-banner button{display:block;color:#b4e99a;margin-top:4px}
.playtest-banner button{padding:0;background:none;border:0;font:inherit;text-decoration:underline;cursor:pointer}
/* On phone-width screens the field fills the viewport, so the notice shrinks to a slim top strip. */
@media (max-width:900px){.playtest-banner{left:50%;top:2px;transform:translateX(-50%);max-width:none;white-space:nowrap;padding:2px 10px;border-width:1px;border-radius:999px;font-size:10px;opacity:.9}
 .playtest-banner b,.playtest-banner a,.playtest-banner button{display:inline;margin:0 4px 0 0}.playtest-banner span{display:none}
}

.rune-alert { width: min(310px, 88%); z-index: 8; }
.rune-collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; justify-items: center; width: 210px; margin: 4px auto 10px; }
.battle-gauntlet { position: absolute; z-index: 5; left: 3%; bottom: 2%; width: 60px; height: 60px; padding: 3px; border: 3px solid var(--slate-900); border-radius: 50%; background: #ffda42; box-shadow: 0 0 0 2px #fff6d8, 0 4px var(--slate-900); cursor: pointer; touch-action: manipulation; }
.battle-gauntlet b { position: absolute; bottom: -2px; right: -1px; color: white; font-family: "Lilita One", Arial, sans-serif; font-weight: 400; font-size: 26px; line-height: 1; -webkit-text-stroke: 3px var(--slate-900); paint-order: stroke fill; }
.battle-gauntlet[hidden] { display: none; }
.battle-gauntlet:active { transform: translateY(2px); }
.battle-gauntlet:focus-visible { outline: 3px solid white; outline-offset: 4px; }
/* One row: Resume takes the spare width, the toggles and camp are square icon buttons. */
.pause-actions {flex-wrap:nowrap;gap:10px;width:100%;align-self:stretch}
.pause-actions .resume {width:auto;flex:1;min-width:0}
.pause-actions .pause-icon {flex:none;width:var(--button-height);height:var(--button-height);padding:0;--button-height:56px}
@media(max-width:360px) {
  .pause-actions {gap:7px}
  .pause-actions .pause-icon {--button-height:50px}
}


/* Top HUD: the wave tile (or boss bar), a slash divider, then health stacked over XP. */
.hud-bars{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.hud-bars > .wave-row{flex:0 0 auto}
/* The slash is a darker shade of the chapter's cloud color behind it. */
.hud-divider{flex:0 0 5px;height:17px;border-radius:3px;background:color-mix(in srgb,var(--hud-cloud,#5fb35a) 72%,var(--slate-950));transform:skewX(-16deg)}
.hud-stack{flex:1;min-width:0;transition:flex-grow .35s ease}
/* An active boss takes 60% of the strip; the health/XP stack shrinks to 40% and grows back after. */
.boss-active .hud-stack{flex:4}
@media(prefers-reduced-motion:reduce){.hud-stack{transition:none}
}
.hud-stack{display:flex;flex-direction:column;gap:5px}
.hud-bar-row{display:flex;align-items:center;gap:6px;min-width:0}
.hud-bar-row .xp-track,.hud-bar-row .health-track{flex:1;min-width:0}
.wave-row[hidden]{display:none}
.boss-active .wave-row{display:none}
.hud-bars > .boss-hud{flex:6;min-width:0}
.hud-hidden-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The wave counter is bare HUD lettering, like the timer, so it stays quiet beside the bars. */
.battle-hud .wave-number{min-width:22px;text-align:center;font-family:"Lilita One",Arial,sans-serif;font-size:26px;line-height:1;color:var(--slate-900)}
.battle-hud .health-row{margin:0}
.battle-hud .hud-stack > .hud-bar-row{gap:4px}
.battle-hud .hud-heart{width:16px;height:16px}
.battle-hud .health-track{height:20px;border:3px solid var(--slate-900);border-radius:7px;background:var(--slate-800);box-shadow:0 2px var(--slate-950)}
.battle-hud .health-track i{background:var(--health-fill);box-shadow:inset 0 -4px var(--red)}
.battle-hud .hud-bar-row .xp-track{margin-top:0;height:9px;border-width:2px;border-radius:5px;box-shadow:0 1px var(--slate-950)}
.battle-hud .xp-label{flex:0 0 16px;font-family:"Lilita One",Arial,sans-serif;font-size:10px;line-height:1;text-align:center;color:#fff;-webkit-text-stroke:2px var(--slate-950);paint-order:stroke fill;letter-spacing:.5px}

/* Ticked tracks (wave, mana): cleared ticks fill solid, the current tick fills fractionally. */
.wave-track,.mana-track{flex:1;min-width:0;height:16px;border:3px solid var(--slate-900);border-radius:7px;background:var(--slate-800);box-shadow:0 2px var(--slate-950);display:grid;gap:2px;padding:0 1px;overflow:hidden}
.wave-track{grid-template-columns:repeat(var(--wave-capacity,20),minmax(0,1fr));gap:1px}
.mana-track{grid-template-columns:repeat(var(--mana-capacity,20),minmax(0,1fr))}
.wave-segment,.mana-segment{display:block;height:100%;min-width:0;background:var(--slate-700);position:relative;overflow:hidden;transform-origin:center}
.wave-segment.is-current::after,.mana-segment.is-current::after{content:"";position:absolute;inset:0;width:calc(var(--tick-fraction,0) * 100%);transition:width .25s ease-out}
.wave-segment.is-filled,.wave-segment.is-current::after{background:var(--green-top);box-shadow:inset 0 -3px var(--green)}
/* Mana is pink: the meter rule (top-shade fill, main-shade lip). */
.mana-segment.is-filled,.mana-segment.is-current::after{background:var(--pink-top);box-shadow:inset 0 -3px var(--pink)}
@media(prefers-reduced-motion:reduce){.wave-segment.is-current::after,.mana-segment.is-current::after{transition:none}
}

/* Bottom HUD: mana alone at full width, a droplet beside its ticked track and the regen rate. */
.combat-bottom .mana-row{margin:6px 4px 0;height:40px;gap:8px;position:relative}
.combat-bottom .mana-track{height:24px}
.combat-bottom .mana-segment.is-filled,.combat-bottom .mana-segment.is-current::after{box-shadow:inset 0 -4px var(--pink)}
.combat-bottom .mana-level{position:relative;flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center}
.combat-bottom .mana-level svg{width:40px;height:40px}
.combat-bottom .mana-level b{position:absolute;top:13px;left:0;width:100%;text-align:center;font-size:19px;line-height:23px;color:white;-webkit-text-stroke:2px #302132;paint-order:stroke fill}
.mana-row > small{flex:0 0 auto;font-size:18px;line-height:1;color:var(--pink-soft);text-shadow:1px 1px color-mix(in srgb, var(--pink) 40%, black);padding-left:4px;white-space:nowrap}
@media(max-width:360px){.hud-bars{gap:7px}.hud-bar-row{gap:4px}.mana-row > small{font-size:15px}
}
.card-mana-icon {color:var(--pink-top)}
/* On cards the drop sits over busy art, so it keeps a dark ink edge (drawn under the fill). */
.card-mana .card-mana-icon path {stroke:#302132;stroke-width:3;stroke-linejoin:round;paint-order:stroke fill}
.hud-skull {color:var(--cream)}
/* The boss skull sits on busy battlefield art, so it keeps a dark ink edge (drawn under the fill), like the HUD heart. */
.battle-hud .hud-skull path {stroke:var(--slate-900);stroke-width:3.5;stroke-linejoin:round;paint-order:stroke fill}
.hud-heart {color:#f16d83}
/* The battle HUD heart sits on busy battlefield art, so it keeps a thin ink edge (drawn under the fill). */
.battle-hud .hud-heart path {stroke:var(--slate-900);stroke-width:4.5;stroke-linejoin:round;paint-order:stroke fill}

/* Next-wave call (src/early-wave-hud.js): under the wave number, a dark skull disc whose red ring
   fills clockwise as the wave is killed. After a call, the reward shows briefly in its place. */
.wave-call {
  position: absolute;
  z-index: 5;
  top: calc(var(--field-tuck, 0px) + 4px);
  left: 5px;
  pointer-events: none;
}
.call-wave {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--call-fill, 0) * 1turn), var(--cream) 0);
  box-shadow: 0 var(--button-depth) var(--button-drop);
  color: var(--cream);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.call-wave::before {
  content: "";
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--slate-900);
}
.call-wave-glyph {grid-area: 1 / 1; position: relative}
.call-wave[hidden] {display: none}
.call-wave:active {transform: translateY(2px); box-shadow: 0 1px var(--button-drop)}
.call-wave:focus-visible {outline: 3px solid white; outline-offset: 3px}
.call-wave-reward {
  position: absolute;
  top: 0;
  left: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  animation: call-wave-reward 1.4s ease-out forwards;
}
.call-wave-reward[hidden] {display: none}
.call-wave-reward > span {display: flex; align-items: center; gap: 3px}
.call-wave-reward b {
  color: white;
  font-family: "Lilita One", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
@keyframes call-wave-reward {
  0% {opacity: 0; translate: 0 -6px}
  15% {opacity: 1; translate: 0 0}
  75% {opacity: 1}
  100% {opacity: 0; translate: 0 4px}
}
@media (prefers-reduced-motion: reduce) {
  .call-wave-reward {animation: none}
}

/* First-play hints: a pointing hand (src/tutorial-hints.js) whose fingertip sits on the anchor point. */
.tutorial-hand {
  position: absolute;
  width: 72px;
  height: 91px;
  margin: -5px 0 0 -28px;
  pointer-events: none;
  transform-origin: 28px 5px;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 0 #0006);
}
.tutorial-hand[hidden] {display: none}
.tutorial-hand svg {display: block; width: 100%; height: 100%}
/* Press the card and slide up a little, as if starting a drag; the card itself stays put. */
.place-hint {
  position: fixed;
  z-index: 12;
  animation: place-hint 1.8s ease-in-out infinite;
}
@keyframes place-hint {
  0% {opacity: 0; transform: translate(0, 8px) rotate(-12deg) scale(1)}
  15% {opacity: 1; transform: rotate(-12deg) scale(1)}
  30% {transform: rotate(-12deg) scale(.88)}
  70% {opacity: 1; transform: translate(0, -60px) rotate(-12deg) scale(.88)}
  100% {opacity: 0; transform: translate(0, -60px) rotate(-12deg) scale(.88)}
}
/* Tap the first offered card, glide to the last and tap it. Columns match .level-choices. */
.level-choices {position: relative}
.draft-hint {
  --column: calc((100% - 16px) / 3);
  top: 140px;
  z-index: 5;
  left: calc(var(--hint-from) * (var(--column) + 8px) + var(--column) / 2);
  animation: draft-hint 3.4s ease-in-out infinite;
}
@keyframes draft-hint {
  0%, 8% {left: calc(var(--hint-from) * (var(--column) + 8px) + var(--column) / 2); transform: rotate(-12deg) scale(1)}
  16% {transform: rotate(-12deg) scale(.86)}
  26% {left: calc(var(--hint-from) * (var(--column) + 8px) + var(--column) / 2); transform: rotate(-12deg) scale(1)}
  50%, 58% {left: calc(var(--hint-to) * (var(--column) + 8px) + var(--column) / 2); transform: rotate(-12deg) scale(1)}
  66% {transform: rotate(-12deg) scale(.86)}
  76% {left: calc(var(--hint-to) * (var(--column) + 8px) + var(--column) / 2); transform: rotate(-12deg) scale(1)}
  100% {left: calc(var(--hint-from) * (var(--column) + 8px) + var(--column) / 2)}
}
/* Tapping START on the camp screen: the hand comes in from the left at an angle, index finger
   on top. It stays short below the fingertip, since the camp screen clips whatever hangs past
   its bottom edge and on shorter screens START sits right on that edge. The rotated box's empty
   corners still poke past the START row as the hand taps, which grew and shrank the camp's
   scroll height and flickered its scrollbar; the row clips them (the art itself stays inside). */
.start-button {position: relative}
.lobby-bottom:has(.start-hint) {overflow-y: clip}
.start-hint {
  left: 5%;
  top: 28%;
  z-index: 2;
  animation: start-hint 1.3s ease-in-out infinite;
}
@keyframes start-hint {
  0%, 30%, 100% {transform: translate(-12px, 3px) rotate(76deg) scale(1)}
  55% {transform: rotate(76deg) scale(.88)}
  70% {transform: translate(-4px, 1px) rotate(76deg) scale(.92)}
}
@media (prefers-reduced-motion: reduce) {
  .place-hint, .draft-hint {animation: none}
  .start-hint {animation: none; transform: rotate(76deg)}
}