/* ---- Mouse pointer: PAC's (app/public/src/style/cursor.css): its arrow everywhere, its hand on
   anything clickable, its grab hands while dragging. ---- */
:root {
  --cursor-primary: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto;
  --cursor-hover: url("assets/ui/cursor-hover.png") 14 0, pointer;
  --cursor-grab: url("assets/ui/cursor-grab.png") 14 8, grab;
  --cursor-grabbing: url("assets/ui/cursor-grabbing.png") 14 8, grabbing;
}
html {
  cursor: var(--cursor-primary);
}
button:not([disabled]),
a[href],
select,
summary,
label:has(> input[type="checkbox"]),
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  cursor: var(--cursor-hover);
}
button[disabled] {
  cursor: var(--cursor-primary);
}
body.grab {
  cursor: var(--cursor-grab);
}
body.grab.grabbing {
  cursor: var(--cursor-grabbing);
}

/* Theme values follow pokemonAutoChess (app/public/src/style/colors.css, index.css, container.css, buttons.css). */
@font-face {
  font-family: Jost;
  src: url("assets/ui/Jost-VF.ttf") format("truetype");
}

:root {
  --color-fg-green: #8ede1d;
  --color-bg-primary: #61738a;
  --color-bg-secondary: #54596b;
  --color-bg-tertiary: #464c5c;
  --color-bg-accent: #1195ec;
  --color-bg-input: #262626;
  --color-fg-primary: #ffffff;
  --color-fg-secondary: #c3cddf;
  --color-fg-gold: #ffc107;
  --color-fg-red: #f74f4f;
  --color-shadow: #2d334b;
  --border-thick: 4px solid black;
  --border-thin: 2px solid black;
  --shadow-clickable: #2d334b 2px 2px 0px;
}

html {
  font-family: Jost, sans-serif;
  font-weight: 600;
  font-size: 16px;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--color-fg-primary);
  /* PAC's checkerboard (app/public/src/style/index.css) */
  background-color: var(--color-bg-primary);
  background-image:
    linear-gradient(45deg, var(--color-bg-secondary) 25%, transparent 25%, transparent 74.9%, var(--color-bg-secondary) 75%, var(--color-bg-secondary)),
    linear-gradient(45deg, var(--color-bg-secondary) 25%, transparent 25%, transparent 74.9%, var(--color-bg-secondary) 75%, var(--color-bg-secondary));
  background-size: 240px 240px;
  background-position:
    0 0,
    120px 120px;
}

button {
  font-family: inherit;
}

.my-container {
  border-radius: 12px;
  background-color: var(--color-bg-primary);
  border: var(--border-thick);
  padding: 0.25em 0.5em;
  color: var(--color-fg-primary);
}

.my-box {
  background-color: var(--color-bg-secondary);
  border-radius: 12px;
  border: var(--border-thin);
  color: var(--color-fg-primary);
}

.my-input {
  font: inherit;
  background: var(--color-bg-input);
  color: var(--color-fg-primary);
  border: var(--border-thin);
  border-radius: 8px;
  padding: 0.4em 0.6em;
}

.bubbly {
  position: relative;
  padding: 0.15em calc(0.5em + 3px) calc(0.15em + 3px) 0.5em;
  background: var(--color-bg-secondary);
  color: white;
  border-radius: 12px;
  font-size: 120%;
  border: var(--border-thin);
  text-shadow: 2px 2px 2px #00000040;
  box-shadow:
    inset -6px -6px 0px 0px var(--color-bg-tertiary),
    var(--shadow-clickable);
  cursor: var(--cursor-hover);
  user-select: none;
}
.bubbly:not([disabled]):active {
  box-shadow:
    inset 6px 6px 0px 0px var(--color-bg-tertiary),
    var(--shadow-clickable);
}
.bubbly.green {
  background: #92cc41;
  box-shadow:
    inset -6px -6px 0px 0px #65a013,
    var(--shadow-clickable);
}
.bubbly.green:not([disabled]):hover {
  background: #76c442;
}
.bubbly.orange {
  background: #f7d51d;
  color: black;
  box-shadow:
    inset -6px -6px 0px 0px #c9ae17,
    var(--shadow-clickable);
}
.bubbly.orange:not([disabled]):hover {
  background: #e7c819;
}
.bubbly.blue {
  background: #209cee;
  color: white;
  box-shadow:
    inset -6px -6px 0px 0px #006bb3,
    var(--shadow-clickable);
}
.bubbly.blue:not([disabled]):hover {
  background: #108de0;
}

.error {
  color: var(--color-fg-red);
  margin: 0;
}

/* ---- Game: full-window canvas; the HUD scales with the fitted 16:9 design viewport ---- */
.game-frame {
  position: absolute;
  inset: 0;
}
.game-canvas,
.game-hud {
  position: absolute;
  inset: 0;
}
.game-hud {
  pointer-events: none;
  font-size: min(0.85vw, 1.51vh);
}
.game-hud > * {
  pointer-events: auto;
}

.game-stage-info {
  position: absolute;
  top: 0.4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.1em 0.8em;
  white-space: nowrap;
}
.game-stage-info .phase {
  color: var(--color-fg-gold);
}
.game-stage-info .fast-forward {
  color: var(--color-fg-red);
}
.game-stage-info .fast-forward.paused {
  color: #7dc8ff;
}

/* Bottom row: tower panel | deck bar (centred) | Ditto + money. Empty space stays click-through. */
.game-bottom {
  position: absolute;
  bottom: 0.4%;
  left: 0.5%;
  right: 0.5%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5em;
  pointer-events: none;
}
.game-bottom-side {
  display: flex;
  align-items: stretch;
  gap: 0.5em;
  min-width: 0;
}
.game-bottom-side.left {
  position: relative;
}
.game-bottom > .deck-bar,
.game-bottom-side > * {
  pointer-events: auto;
}
.deck-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 0.6em;
}
.deck-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  font: inherit;
  padding: 0.2em 0.5em;
  cursor: var(--cursor-hover);
}
.deck-card img {
  width: 3em;
  height: 3em;
  image-rendering: pixelated;
  border-radius: 8px;
}
.deck-card.selected {
  border-color: var(--color-fg-gold);
  background-color: var(--color-bg-accent);
}
.deck-card[disabled],
.deck-card.off {
  opacity: 0.5;
  cursor: var(--cursor-primary);
}
.deck-bar .hint {
  color: var(--color-fg-secondary);
  font-size: 80%;
  max-width: 14em;
}

.game-toast {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  animation: toast-fade 2.5s forwards;
  pointer-events: none;
}
@keyframes toast-fade {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hp-bar {
  position: relative;
  height: 1.1em;
  margin: 0.15em 0;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  font-size: 80%;
}
.hp-bar .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #ff6fae;
  transition: width 0.2s;
}
.hp-bar span {
  position: relative;
  padding-left: 0.4em;
}
.game-final-rank {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 1em 2em;
  font-size: 140%;
}
.game-final-rank h2 {
  margin: 0 0 0.3em;
  color: var(--color-fg-gold);
}

.deck-card .cost {
  color: var(--color-fg-gold);
  font-size: 85%;
}
.tower-detail .small {
  font-size: 80%;
  color: var(--color-fg-secondary);
}
/* Selected tower: docked left of the money box, as tall as the bottom row, as wide as the space to the
   screen's left edge (capped). Columns: who + Sell / Target | stats, LVL UP, next | skill (scrolls). */
/* Anchored to the bottom of its cell: at least the row's height, taller only when the stats need it,
   so it never stretches the deck bar. */
.tower-detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 56em;
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 10.5em auto minmax(0, 1fr);
  gap: 0.6em;
  padding: 0.3em 0.5em;
  font-size: 92%;
}
.tower-detail .td-id {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  min-height: 0;
}
.tower-detail .td-title {
  min-width: 0;
}
.tower-detail .head {
  display: flex;
  gap: 0.4em;
  align-items: center;
}
.tower-detail .head img {
  width: 2.6em;
  height: 2.6em;
  image-rendering: pixelated;
  border-radius: 8px;
}
.tower-detail .name {
  font-size: 110%;
  line-height: 1.1;
}
.tower-detail .td-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tower-detail .evolves {
  color: var(--color-fg-gold);
}
.tower-detail .actions {
  margin-top: auto;
  display: flex;
  gap: 0.3em;
}
.tower-detail .actions .bubbly {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-size: 85%;
  padding-top: 0.1em;
  white-space: nowrap;
}
.tower-detail .actions .bubbly .small {
  font-size: 75%;
}
.bubbly[disabled] {
  opacity: 0.5;
  cursor: var(--cursor-primary);
}

/* ---- Lobby & preparation ---- */
.lobby {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  box-sizing: border-box;
}
.prep-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 1.2em 1.6em;
  width: min(36em, 100%);
}
.prep-panel {
  width: min(48em, 100%);
}
.prep-panel h1 {
  margin: 0;
}
.lobby-row {
  display: flex;
  gap: 0.5em;
}
.lobby-row .my-input {
  flex: 1;
}
.muted {
  color: var(--color-fg-secondary);
  font-size: 90%;
  margin: 0;
}
.room-list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  max-height: 16em;
  overflow-y: auto;
}
.room-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4em 0.6em;
}
.room-name {
  font-size: 110%;
}
.prep-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.prep-head .bubbly {
  font-size: 85%;
}
.seat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}
.seat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 0.6em;
  min-height: 3.5em;
}
.seat.empty {
  color: var(--color-fg-secondary);
  opacity: 0.6;
  justify-content: center;
  align-items: center;
}
.seat.me {
  border-color: var(--color-fg-gold);
}
.badge {
  font-size: 75%;
  color: var(--color-fg-secondary);
}
.badge.ready {
  color: #8ede1d;
}
.badge.host {
  color: var(--color-fg-gold);
}
.kick {
  position: absolute;
  top: 0.2em;
  right: 0.3em;
  background: none;
  border: none;
  color: var(--color-fg-red);
  cursor: var(--cursor-hover);
  font: inherit;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.5em;
}
.chat-log {
  height: 8em;
  overflow-y: auto;
  font-size: 90%;
}
.prep-actions {
  justify-content: space-between;
}
.floating-error {
  position: fixed;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Game: sends, target, after-game ---- */
.send-panel {
  position: absolute;
  width: 31em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.5em;
  animation: send-panel-in 0.12s ease-out;
}
@keyframes send-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* V-shaped pointer on the panel's top edge, aimed at the Duskull shop (border + fill). */
.send-arrow,
.send-arrow::after {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 16px solid black;
}
.send-arrow {
  top: -16px;
  transform: translateX(-50%);
}
.send-arrow::after {
  content: "";
  left: -9px;
  top: 6px;
  border-left-width: 9px;
  border-right-width: 9px;
  border-bottom: 11px solid var(--color-bg-primary);
}
.send-panel .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-fg-gold);
}
.send-panel .close {
  font: inherit;
  font-size: 130%;
  line-height: 1;
  padding: 0 0.3em;
  color: var(--color-fg-primary);
  background: none;
  border: none;
  cursor: var(--cursor-hover);
}
.send-panel .title .queued {
  margin-left: auto;
  margin-right: 0.4em;
  padding: 0 0.5em;
  font-size: 80%;
  color: var(--color-fg-primary);
  background: var(--color-bg-accent);
  border: var(--border-thin);
  border-radius: 8px;
}
.send-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  font-size: 72%;
  color: var(--color-fg-secondary);
}
.send-foot kbd {
  padding: 0 0.3em;
  font: inherit;
  color: var(--color-fg-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid black;
  border-radius: 4px;
}
.send-body {
  display: flex;
  gap: 0.4em;
}
.send-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  align-content: start;
  gap: 0.3em;
}
/* Page arrows (greyed out on the first / last page), page count and dots, right of the grid. */
.send-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.3em;
  padding: 0.1em 0;
}
.send-pager .page-arrow {
  font: inherit;
  font-size: 110%;
  line-height: 1;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  color: var(--color-fg-gold);
  background-color: var(--color-bg-secondary);
  border: var(--border-thin);
  border-radius: 6px;
  box-shadow: var(--shadow-clickable);
  cursor: var(--cursor-hover);
}
.send-pager .page-arrow:not([disabled]):hover {
  background-color: var(--color-bg-accent);
  color: var(--color-fg-primary);
}
.send-pager .page-arrow[disabled] {
  color: #8a8f9c;
  background-color: var(--color-bg-tertiary);
  box-shadow: none;
  opacity: 0.5;
  cursor: var(--cursor-primary);
}
.send-pager .page-count {
  font-size: 80%;
  color: var(--color-fg-primary);
}
.send-pager .page-dots {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.send-pager .page-dot {
  width: 0.5em;
  height: 0.5em;
  padding: 0;
  border: 1px solid black;
  border-radius: 50%;
  background-color: var(--color-bg-tertiary);
  cursor: var(--cursor-hover);
}
.send-pager .page-dot.active {
  background-color: var(--color-fg-gold);
}
/* Compact shop card (WC3 / Legion TD shop): portrait with stock count and restock sweep, cost +
   income, tags (the Income / Power tag shows the kind). The name is on the hover card. */
.send-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  padding: 0.3em 0.2em 0.35em;
  font-size: 95%;
  cursor: var(--cursor-hover);
  user-select: none;
}
.send-card:not(.disabled):hover {
  background-color: var(--color-bg-tertiary);
}
.send-card.disabled {
  cursor: var(--cursor-primary);
}
.send-card.disabled .send-portrait img,
.send-card.disabled .price {
  opacity: 0.5;
}
/* Not enough gold: the portrait goes black and white and dark (instead of only faded). */
.send-card.poor .send-portrait img {
  opacity: 1;
  filter: grayscale(1) brightness(0.45);
}
.send-card.filler {
  visibility: hidden;
}
/* Touch: the ×5 switch in the footer (there is no Shift). */
.send-foot .batch-toggle {
  padding: 0.1em 0.6em;
  font: inherit;
  font-weight: 700;
  color: var(--color-fg-primary);
  background: var(--color-bg-tertiary);
  border: var(--border-thin);
  border-radius: 6px;
  cursor: var(--cursor-hover);
}
.send-foot .batch-toggle.on {
  color: black;
  background: var(--color-fg-gold);
}
.send-portrait {
  position: relative;
  width: 3.4em;
  height: 3.4em;
  border: var(--border-thin);
  border-radius: 8px;
  overflow: hidden;
}
.send-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* Restock clock sweep: the dark part shrinks clockwise as the next unit comes back. */
.send-portrait .sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(transparent 0 var(--p), rgba(0, 0, 0, 0.6) var(--p) 100%);
  transition: background 0.2s linear;
}
.send-portrait .wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-weight: 700;
  text-shadow: 1px 1px 0 black;
}
.send-portrait .stock {
  position: absolute;
  right: 0.1em;
  bottom: 0;
  font-size: 80%;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
.send-portrait .stock.out {
  color: var(--color-fg-red);
}
.send-card .price {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 90%;
}
.send-card .price .money-value {
  color: var(--color-fg-gold);
}
.send-card .price .inc {
  font-size: 85%;
  color: var(--color-fg-green);
}
.send-card .tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15em;
}
/* Tags (shop cards and the send's hover card), coloured by what they do. */
.tag {
  display: inline-block;
  padding: 0 0.35em;
  font-size: 62%;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  color: white;
  border-radius: 5px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.tag.kind-income {
  color: black;
  text-shadow: none;
  background: var(--color-fg-gold);
}
.tag.kind-power {
  background: #c8323c;
}
.tag.move {
  background: #2f80c9;
}
.tag.aura {
  background: #1f9a86;
}
.tag.tough {
  background: #5d8a2e;
}
.tag.trick {
  background: #8a4fc2;
}
.tag.gate {
  background: #b0602a;
}
.merc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}
.merc-tags .tag {
  font-size: 80%;
}
/* ---- Draft ---- */
.deck-card.locked {
  justify-content: center;
  color: var(--color-fg-secondary);
  opacity: 0.6;
  min-width: 4.5em;
  font-size: 85%;
  cursor: var(--cursor-primary);
}
.deck-card.locked.drafting {
  opacity: 1;
  color: var(--color-fg-gold);
  border-color: var(--color-fg-gold);
  cursor: var(--cursor-hover); /* opens the draft window at this slot */
}
.deck-card.locked.drafting:hover {
  background-color: var(--color-bg-accent);
  color: var(--color-fg-primary);
}
.deck-card .slot-no {
  font-size: 80%;
}
.draft-modal {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 0.8em 1em 0.7em;
}
.draft-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.draft-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.draft-title h2 {
  margin: 0;
  font-size: 140%;
  text-shadow: 2px 2px 0 black;
}
.draft-slot {
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: var(--color-fg-gold);
  color: black;
  font-size: 85%;
  font-weight: 700;
}
.draft-head .bubbly {
  font-size: 75%;
}
/* Several open drafts (D50): one tab per slot */
.draft-tabs {
  display: flex;
  gap: 4px;
}
.draft-tabs .bubbly.active {
  background: var(--color-bg-accent);
}
.draft-cards {
  display: flex;
  gap: 0.8em;
}
.draft-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  width: 11em;
  padding: 0.8em 0.7em 0;
  overflow: hidden;
  font: inherit;
  color: inherit;
  cursor: var(--cursor-hover);
  transition: transform 0.1s, border-color 0.1s;
}
.draft-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-fg-gold);
}
.draft-portrait {
  width: 4.6em;
  height: 4.6em;
  image-rendering: pixelated;
  border-radius: 10px;
  border: 3px solid black;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.draft-card .name {
  font-size: 125%;
  font-weight: 700;
  line-height: 1;
}
/* Evolution line: small portraits joined by chevrons */
.draft-evo {
  display: flex;
  align-items: center;
  gap: 0.1em;
}
.evo-step {
  display: flex;
  align-items: center;
  gap: 0.1em;
}
.evo-step img {
  width: 1.7em;
  height: 1.7em;
  image-rendering: pixelated;
  border-radius: 6px;
  background: var(--color-bg-secondary);
}
.evo-step:first-child img {
  outline: 2px solid var(--color-fg-gold);
}
.evo-arrow {
  color: var(--color-fg-secondary);
  font-size: 110%;
  line-height: 1;
}
/* Stats as icon tiles */
.draft-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25em;
  width: 100%;
}
.draft-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.15em 0;
  border-radius: 6px;
  background: var(--color-bg-secondary);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.25);
  font-size: 85%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.draft-stat img {
  width: 1.5em;
  height: 1.5em;
}
.draft-skill {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 80%;
  color: var(--color-fg-secondary);
}
.draft-skill img {
  width: 1.3em;
  height: 1.3em;
}
/* The price as the card's footer */
.draft-cost {
  align-self: stretch;
  margin: 0.15em -0.7em 0;
  padding: 0.3em 0;
  text-align: center;
  font-size: 120%;
  color: var(--color-fg-gold);
  background: rgba(0, 0, 0, 0.3);
  border-top: 2px solid rgba(0, 0, 0, 0.45);
}
.draft-card:hover .draft-cost {
  background: rgba(247, 213, 29, 0.18);
}
.draft-hint {
  font-size: 75%;
  color: var(--color-fg-secondary);
  text-align: center;
}
.draft-reopen {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 95%;
}

/* ---- Map editor (dev only, ?editor) ---- */
.editor {
  display: grid;
  grid-template-columns: min(640px, 42vw) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  height: 100vh;
  padding: 6px;
  box-sizing: border-box;
}
.editor .bubbly {
  font-size: 95%;
  text-decoration: none;
}
.editor .bubbly.active {
  background: var(--color-bg-accent);
  box-shadow:
    inset -6px -6px 0px 0px #0b6fb1,
    var(--shadow-clickable);
}
.editor .bubbly.active .muted {
  color: white;
}
.editor-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.editor-bar select,
.editor-title select {
  padding: 0.1em 0.3em;
}
.editor-sep {
  width: 2px;
  align-self: stretch;
  background: var(--color-bg-tertiary);
}
.editor-dirty {
  color: var(--color-fg-gold);
}
.editor-side {
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.editor-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-fg-secondary);
}
.editor-layer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 2px 6px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: var(--cursor-hover);
}
.editor-layer.active {
  background: var(--color-bg-secondary);
  border-color: black;
}
.editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.editor-stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
}
.editor-stamp canvas,
.editor-palette canvas,
.editor-canvas canvas {
  image-rendering: pixelated;
}
.editor-palette-panel {
  flex: 1;
  min-height: 0;
}
.editor-palette {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--color-bg-input);
  border-radius: 8px;
}
.editor-palette canvas {
  display: block;
  cursor: crosshair;
}
.editor-palette-info {
  font-size: 85%;
}
.editor-view {
  overflow: auto;
  border: var(--border-thick);
  border-radius: 12px;
  background: repeating-conic-gradient(#3a3f4f 0% 25%, #2d334b 0% 50%) 0 0 / 24px 24px;
}
.editor-canvas {
  position: relative;
}
.editor-canvas canvas {
  position: absolute;
  left: 0;
  top: 0;
}
.editor-canvas canvas:last-child {
  cursor: crosshair;
  touch-action: none;
}
.editor-status {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 90%;
}

/* ---- Balance editor (dev only, ?balance) ---- */
.balance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100vh;
  padding: 6px;
  box-sizing: border-box;
}
.balance .bubbly {
  font-size: 95%;
  text-decoration: none;
}
.balance .bubbly.active {
  background: var(--color-bg-accent);
  box-shadow:
    inset -6px -6px 0px 0px #0b6fb1,
    var(--shadow-clickable);
}
.balance h2 {
  margin: 0;
  font-size: 120%;
}
.balance h3 {
  margin: 0.4em 0 0;
  font-size: 105%;
  color: var(--color-fg-gold);
}
.balance code {
  background: var(--color-bg-input);
  border-radius: 4px;
  padding: 0 0.3em;
}
.balance-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.balance-tab {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.balance-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}
.balance-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 6px;
  align-items: start;
}
.balance-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.5em 0.75em;
  min-width: 0;
}
.balance-list {
  position: sticky;
  top: 0;
}
.balance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.balance-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 6px 14px;
}
.balance-field {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  align-items: center;
  align-content: start;
  gap: 2px 8px;
}
.balance-label {
  color: var(--color-fg-secondary);
}
.balance-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.balance-hint {
  grid-column: 2;
  font-size: 80%;
  color: var(--color-fg-secondary);
  font-weight: 500;
}
.balance-num {
  padding: 0.15em 0.35em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.balance-num.invalid {
  border-color: var(--color-fg-red);
  color: var(--color-fg-red);
}
.balance-text {
  width: 100%;
  padding: 0.2em 0.4em;
}
.balance select.my-input {
  padding: 0.15em 0.3em;
}
.balance-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.balance-table th,
.balance-table td {
  padding: 2px 6px;
  text-align: right;
  white-space: nowrap;
}
.balance-table th {
  font-size: 80%;
  color: var(--color-fg-secondary);
  text-transform: uppercase;
  border-bottom: var(--border-thin);
}
.balance-table .l {
  text-align: left;
}
.balance-table td.nowrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.balance-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.08);
}
.balance-table tr.evolves {
  box-shadow: inset 0 2px 0 var(--color-fg-gold);
}
.balance-table.selectable tbody tr {
  cursor: var(--cursor-hover);
}
.balance-table.selectable tbody tr:hover {
  background: rgba(255, 255, 255, 0.08);
}
.balance-table.selectable tbody tr.active {
  background: var(--color-bg-accent);
}
.balance .calc {
  color: var(--color-fg-secondary);
}
.balance .hi {
  color: var(--color-fg-green);
}
.balance .lo {
  color: var(--color-fg-red);
}
.balance-pill {
  display: inline-block;
  min-width: 3em;
  text-align: center;
  border-radius: 999px;
  padding: 0 0.4em;
  color: white;
}
.balance-pill.ok {
  background: #3b8a3e;
}
.balance-pill.lo {
  background: #a33a3a;
  color: white !important;
}
.balance-pill.warn {
  background: #b7791f;
}
.balance-derived {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 0.4em 0.7em;
  align-items: center;
}
.balance-derived > div {
  display: flex;
  flex-direction: column;
}
.balance-derived b {
  font-size: 120%;
}
.balance-portrait {
  image-rendering: pixelated;
  border-radius: 6px;
  background: var(--color-bg-input);
  flex: none;
}
.balance-portrait.missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-gold);
  border: 1px dashed var(--color-fg-gold);
  box-sizing: border-box;
}
.balance-species {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  color: inherit;
  background: var(--color-bg-input);
  border: var(--border-thin);
  border-radius: 8px;
  padding: 1px 6px 1px 2px;
  cursor: var(--cursor-hover);
  min-width: 9em;
}
.balance-species.compact {
  min-width: 0;
}
.balance-species.warn {
  border-color: var(--color-fg-gold);
}
.balance-caret {
  margin-left: auto;
  color: var(--color-fg-secondary);
}
.balance-warn-icon {
  color: var(--color-fg-gold);
}
.balance-warning {
  color: var(--color-fg-gold);
  margin: 0;
}
.balance-popover {
  position: fixed;
  z-index: 50;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  box-sizing: border-box;
}
.balance-popover-list {
  overflow: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.balance-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: inherit;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 1px 4px;
  cursor: var(--cursor-hover);
  text-align: left;
}
.balance-option > span:nth-child(2) {
  flex: 1;
}
.balance-option:hover {
  background: var(--color-bg-secondary);
}
.balance-option.active {
  border-color: black;
  background: var(--color-bg-accent);
}
.balance-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.balance-dialog {
  width: min(720px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.8em 1em;
}
.balance-pac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  overflow: auto;
  min-height: 0;
  max-height: 50vh;
}
.balance-add-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.balance-tower-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.balance-skill {
  padding: 0.4em 0.7em;
  border-style: dashed;
}
.balance-skill p {
  margin: 0.2em 0 0;
}
.balance-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.4em 0.6em;
}
.balance-costs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
}
.balance-costs label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 90%;
}
.balance-abilities {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.balance-ability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0.35em 0.6em;
  width: 100%;
  box-sizing: border-box;
}
.balance-ability .balance-hint {
  flex-basis: 100%;
}
.balance-statuses {
  display: flex;
  gap: 10px;
}
.balance .bubbly.balance-x {
  padding: 0 0.5em 3px 0.4em;
  font-size: 85%;
}
.balance-link {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-fg-gold);
  cursor: var(--cursor-hover);
  text-decoration: underline;
}
.balance-problems {
  max-height: 25vh;
  overflow: auto;
  font-size: 90%;
}
.balance-problems-toggle {
  font: inherit;
  border: var(--border-thin);
  border-radius: 8px;
  padding: 0.1em 0.5em;
  cursor: var(--cursor-hover);
  color: white;
}
.balance-problems-toggle.ok {
  background: #3b8a3e;
}
.balance-problems-toggle.warn {
  background: #8a6a1f;
}
.balance-problems-toggle.bad {
  background: #a33a3a;
}
.balance-status {
  padding: 0 4px;
}
@media (max-width: 1100px) {
  .balance-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .balance-list {
    position: static;
  }
}

/* Sound settings (speaker button + popover) */
.audio-settings {
  position: relative;
  display: inline-flex;
}
.audio-settings.floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
}
/* The lobby's music player, with the settings button at its end */
.music-player {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.5em;
}
.music-player .bubbly {
  padding: 0.15em 0.5em;
  font-size: 0.8em;
}
.music-divider {
  align-self: stretch;
  width: 2px;
  margin: 0.15em 0.1em;
  border-radius: 1px;
  background: var(--color-bg-tertiary);
}
.music-title {
  min-width: 11em;
  max-width: 16em;
  text-align: center;
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-popover {
  position: absolute;
  top: calc(100% + 0.4em);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.6em 0.8em;
  min-width: 15em;
  white-space: nowrap;
}
.audio-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: var(--cursor-hover);
}
.audio-row span:first-child {
  width: 4em;
}
.audio-row input[type="range"] {
  flex: 1;
  accent-color: var(--color-bg-accent);
}
.audio-value {
  width: 2em;
  text-align: right;
  color: var(--color-fg-secondary);
}

/* Wave type badge and recommended army hint */
.wave-type {
  margin-left: 0.5em;
  padding: 0 0.4em;
  border-radius: 4px;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
  font-size: 85%;
}
.wave-type.mini_boss,
.wave-type.elite {
  color: var(--color-fg-gold);
}
.wave-type.boss,
.wave-type.final_boss {
  color: var(--color-fg-red);
}
/* Overtime (D49): HP and gate damage double every wave */
.wave-type.overtime {
  color: #1d1a10;
  background: #ffd23c;
  font-weight: bold;
}

/* Timer bar under the stage info, like PAC's game-timer-bar */
.game-stage-info.timed {
  padding-bottom: 0.8em; /* room for the bar inside the box's bottom edge */
}
/* Inside the box, flush with its border: the box's rounded corners clip the bar's ends. */
.timer-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.55em;
  background: black;
  border-top: var(--border-thin);
  border-radius: 0 0 8px 8px; /* the box's 12px radius minus its 4px border */
  overflow: hidden;
}
.timer-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #f7d51d;
  transition: width linear 0.2s;
}
.timer-bar-inner.battle {
  background: #f0923a;
}
.timer-bar-inner.fast {
  background: var(--color-fg-red);
}

/* Top-left corner: sound settings and Leave (the bottom-left is the tower panel's) */
.game-corner {
  position: absolute;
  left: 0.5%;
  top: 0.8%;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.game-corner .bubbly {
  font-size: 100%;
}
/* In the top-left corner the settings popover opens to the right (right-aligned it ran off the left edge) */
.game-corner .audio-popover {
  left: 0;
  right: auto;
  max-width: calc(100vw - 1em);
  max-height: calc(100vh - 4em);
  overflow-y: auto;
}
.audio-settings.up .audio-popover {
  top: auto;
  bottom: calc(100% + 0.4em);
  left: 0;
  right: auto;
}

/* ---- Poké coin (PAC icons/money.css): every amount is a number + this icon, never "$" ---- */
.money {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  white-space: nowrap;
  vertical-align: middle;
}
.money-value {
  font-weight: 600;
}
/* .money .icon-money beats card rules like ".deck-card img" that size portraits */
.icon-money,
.money .icon-money {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  border: none;
  border-radius: 0;
  image-rendering: auto;
  filter: drop-shadow(1px 1px 0px #505261);
}

/* ---- Ditto box, after PAC's level box (game-experience) ---- */
.ditto-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* portrait and name on top, the upgrade buttons on the bottom edge */
  gap: 0.3em;
  padding: 0.3em 0.6em 0.35em;
  min-width: 11em;
}
/* Portrait and name on top, the cost of an upgrade beside them; the three buttons centered below */
.ditto-box .ditto-head {
  align-self: stretch; /* portrait on the box's left edge, the text beside it */
  display: grid;
  grid-template: auto auto auto / auto 1fr;
  align-items: center;
  column-gap: 0.5em;
}
.ditto-box .portrait {
  grid-row: span 3;
  width: 4em;
  height: 4em;
  image-rendering: pixelated;
  border-radius: 8px;
  border: 2px solid var(--color-bg-tertiary);
}
.ditto-box .title {
  font-size: 115%;
  font-weight: 600;
  line-height: 1.1;
  align-self: end;
}
.ditto-box .income {
  font-size: 75%;
  line-height: 1.25;
  color: var(--color-fg-secondary);
  white-space: nowrap;
}
.ditto-box .income.gain {
  align-self: start;
  font-weight: 600;
  color: var(--color-fg-green);
}
/* Three small upgrade buttons inside the box (Attack, Regen, Jump Slam; D71): icon + 2x5 gold pips */
.ditto-upgrades {
  display: flex;
  justify-content: center;
  gap: 0.25em;
}
.ditto-upgrades .bubbly {
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.3em 0.25em;
  min-height: 0;
}
.ditto-upgrades .bubbly.maxed {
  cursor: var(--cursor-primary);
}
.ditto-upgrades img {
  width: 1.1em;
  height: 1.1em;
  image-rendering: pixelated;
}
.ditto-upgrades .pips {
  display: grid;
  grid-template-columns: repeat(5, 0.32em);
  gap: 1.5px;
  padding: 1.5px;
  border-radius: 3px;
  background: var(--color-bg-input);
  border: 1px solid #000;
}
.ditto-upgrades .pips i {
  height: 0.28em;
  border-radius: 1px;
  background: #3a3f4f;
}
.ditto-upgrades .pips i.on {
  background: var(--color-fg-gold);
}
.ditto-upgrades .pips.max i.on {
  background: #ffe066;
}

/* ---- Stat icons in the tower panel and draft cards ---- */
.tower-detail .stat-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}
.icon-stats {
  font-size: 85%;
  white-space: nowrap;
}
.icon-stats img {
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
}

/* ---- Detail card (PAC game-pokemon-detail) and the hover card ---- */
.hover-detail {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  padding: 5px;
}
.detail-card {
  color: var(--color-fg-primary);
  font-size: 15px;
  display: grid;
  position: relative;
  width: 300px;
  gap: 5px;
  grid-template-columns: 72px 1fr;
}
.detail-card p {
  margin: 0;
}
.detail-portrait {
  width: 64px;
  height: 64px;
  border: 4px solid var(--color-bg-secondary);
  border-radius: 8px;
  image-rendering: pixelated;
  box-sizing: content-box;
}
.detail-entry {
  display: flex;
  flex-direction: column;
  justify-content: start;
  min-width: 0;
}
.detail-name {
  font-size: 1.2em;
  font-weight: 600;
}
.detail-subtitle {
  font-size: 80%;
  color: var(--color-fg-secondary);
}
.detail-stars img {
  height: 14px;
}
.detail-bars {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
}
.detail-bar {
  position: relative;
}
.detail-bar-text {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.detail-bar-outer {
  position: relative;
  height: 16px;
  background: var(--color-bg-secondary);
  overflow: hidden;
  border: 1px solid #00000080;
}
.detail-bar-inner {
  height: 100%;
  transition: width 0.3s;
}
.detail-bar-graduation {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #0004;
}
.detail-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.detail-stats.three {
  grid-template-columns: repeat(3, 1fr);
}
.detail-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  box-shadow: 1px 1px 0 #00000080;
}
.detail-stat img {
  width: 28px;
  height: 28px;
  margin: 2px 0 2px 2px;
}
.detail-stat span {
  font-weight: 500;
  font-size: 95%;
}
.detail-text {
  grid-column: 1 / -1;
  background-color: var(--color-bg-secondary);
  padding: 0.25em 5px;
  margin: 0 -5px;
  font-size: 90%;
  display: grid;
  gap: 0.2em;
}
.detail-text:last-child {
  margin-bottom: -5px;
  border-radius: 0 0 8px 8px;
}
.detail-text .inline-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
}

/* A skill's level-dependent values: bold, kept on one line with their stat icon. */
.detail-text .skill-value {
  white-space: nowrap;
}

.detail-text .skill-value .inline-icon {
  margin-left: 2px;
}
.detail-text .muted {
  color: var(--color-fg-secondary);
}

/* A wave's flight route (D61): mini-map of the board, portal left, Ditto right. */
.flight-sketch {
  width: 100%;
  max-width: 240px;
  justify-self: center;
  display: block;
}
.flight-sketch .fs-board {
  fill: rgba(112, 168, 96, 0.35);
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 0.15;
}
.flight-sketch .fs-lane {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.15;
  stroke-dasharray: 0.6 0.6;
}
.flight-sketch .fs-route {
  fill: none;
  stroke: #8fd3ff;
  stroke-width: 0.55;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.flight-sketch .fs-portal {
  fill: #7b4fa8;
  stroke: #d6b8ff;
  stroke-width: 0.2;
}
.flight-sketch .fs-ditto {
  fill: #c9a0dc;
  stroke: #fff;
  stroke-width: 0.2;
}

/* ---- Main lobby (PAC-style: logo, trainer + announcements, rooms) ---- */
.main-lobby {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.5vh 2vw 2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vh;
}
.lobby-logo {
  height: clamp(90px, 20vh, 190px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}
.lobby-columns {
  flex: 1;
  min-height: 0;
  width: min(1200px, 100%);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.6fr);
  gap: 1.2vw;
}
.lobby-side {
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
  min-height: 0;
}
/* Boxes show the lobby art at 75% over the panel colour, continuous across boxes like PAC. */
.lobby-box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 0.8em 1em;
  min-height: 0;
}
.lobby-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/ui/lobby-bg.webp");
  /* One 16:9 picture behind the panels together (src/client/lobby-backdrop.ts measures them; before the first
     measure, the window): as small as it can be while it covers them in width and height, centred on them. Every
     panel is a window onto its part. --bg-w is the picture's width. */
  --bg-x: var(--lobby-bg-x, 0px);
  --bg-y: var(--lobby-bg-y, 0px);
  --bg-area-w: var(--lobby-bg-w, 100vw);
  --bg-area-h: var(--lobby-bg-h, 100vh);
  --bg-w: max(var(--bg-area-w), var(--bg-area-h) * 16 / 9);
  background-size: var(--bg-w) auto;
  background-position:
    calc(var(--bg-x) + (var(--bg-area-w) - var(--bg-w)) / 2)
    calc(var(--bg-y) + (var(--bg-area-h) - var(--bg-w) * 9 / 16) / 2);
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* the panel's slate shows through: the art stays a muted backdrop behind the text */
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.lobby-box > * {
  position: relative;
  z-index: 1;
}
.lobby-box h2 {
  margin: 0;
  text-align: center;
  font-size: 1.35em;
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.45);
}
.lobby-box .muted {
  color: #f0f4ff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* ---- The Ditto's Playground box (src/common/site-panel.tsx, D135): logo, buttons, fan line ---- */
.site-panel {
  flex: 1;
}
.site-panel > * {
  flex: none;
}
/* The logo fills what the buttons and the fan line leave (a tall window shows it big, a phone small) */
.site-panel > .site-logo {
  flex: 1 1 0;
  min-height: 44px;
  max-height: 150px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  user-select: none;
}
/* Logo and buttons centred in a tall box, the fan line at its foot */
.site-panel > .site-logo,
.site-panel > .lobby-fanline {
  margin-top: auto;
}
.site-news-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 78%;
  font-weight: 400;
  color: #d8def0;
}
.site-chip {
  padding: 0 0.45em;
  border-radius: 6px;
  font-weight: 600;
  color: white;
  background: #8a5aa8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
.site-chip.legions {
  background: #4f9a3a;
}
.site-chip.allstars {
  background: #d9792a;
}
.site-chip.adventure {
  background: #2f7fc4;
}
.site-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45em;
  container-type: inline-size;
}
.site-buttons .bubbly {
  font-size: 95%;
  white-space: nowrap;
}
/* A narrow left column (small windows, tablets): smaller labels so "How to play" stays on one line */
@container (max-width: 250px) {
  .site-buttons .bubbly {
    font-size: 80%;
    padding-left: 0.3em;
    padding-right: calc(0.3em + 3px);
  }
}
/* Install the app (src/common/install-guide.tsx): above the portrait "turn your phone" overlay, which it may be read over */
.account-overlay.install-overlay {
  z-index: 1100;
}
.install-overlay .account-panel {
  font-size: 18px;
}
.install-steps {
  margin: 0.4em 0;
  padding-left: 1.4em;
  line-height: 1.5;
}
.install-steps li {
  margin-bottom: 0.4em;
}
.install-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
}
.install-go,
.install-close {
  display: block;
  width: 100%;
  margin-top: 0.6em;
}
.site-install {
  width: 100%;
}
/* A note above a lobby's rooms on a touch screen: Legions is rough there, Pimp my Pokémon not playable */
.mobile-note {
  margin: 0 0 0.5em;
  padding: 0.4em 0.7em;
  border-radius: 8px;
  border-left: 5px solid #f2cf3a;
  background: rgba(24, 22, 32, 0.88);
  color: #fff;
  text-shadow: 1px 1px 0 black;
}
.mobile-note.blocked {
  border-left-color: #e05050;
}
.site-panel .lobby-credits {
  font-size: 100%;
}
.site-wiki {
  align-self: flex-start;
  font-size: 100%;
}
.site-mail {
  align-self: center;
  font-size: 110%;
}
/* Privacy Policy and Terms (src/common/legal.tsx) */
.legal {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  line-height: 1.45;
}
.legal p,
.legal ul,
.legal ol {
  margin: 0;
}
.legal ul,
.legal ol {
  padding-left: 1.4em;
}
.legal-part {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.legal h3 {
  margin: 0.4em 0 0;
  font-size: 1.1em;
}
.legal h4 {
  margin: 0.2em 0 0;
  font-size: 1em;
}
.legal a {
  color: #9fd3ff;
}
/* Narrow popups: the New / Changes / Fixes tag above its lines instead of beside them */
@media (max-width: 560px) {
  .site-news-part {
    flex-direction: column;
    gap: 0.3em;
  }
}
a.bubbly {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.bubbly.site-discord {
  background: #5865f2;
  box-shadow:
    inset -6px -6px 0px 0px #3c45a5,
    var(--shadow-clickable);
}
.bubbly.site-discord:not([disabled]):hover {
  background: #4752c4;
}
.bubbly.site-discord[disabled] {
  opacity: 0.6;
  cursor: default;
}
.site-discord-icon {
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  color: white;
  filter: drop-shadow(2px 2px 2px #00000040);
}
/* An entry this browser has not opened yet: a dot on What's new, like PokeSurvivor's */
.bubbly.site-unseen::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: #e8423f;
  border: 2px solid white;
}
/* What's new / How to play / Contact popups (the account overlay's frame) */
.site-news-day,
.site-rule {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em 0.8em;
}
.site-news-day h3,
.site-rule h3 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2em 0.8em;
  font-size: 1.1em;
}
.site-rule p {
  margin: 0;
  line-height: 1.4;
}
.site-news-part {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}
.site-news-part ul {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  line-height: 1.35;
}
.site-tag {
  flex: none;
  min-width: 5.2em;
  text-align: center;
  padding: 0.05em 0.4em;
  border-radius: 6px;
  font-size: 80%;
  font-weight: 600;
  color: white;
}
.site-tag.new {
  background: #4f9a3a;
}
.site-tag.changes {
  background: #2f7fc4;
}
.site-tag.fixes {
  background: #d9792a;
}
.site-tabs {
  flex-wrap: wrap;
}
.rooms-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rooms-header h2 {
  font-size: 1.9em;
}
.main-lobby .room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 8em;
  max-height: none;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  grid-auto-rows: min-content;
  gap: 8px;
}
.main-lobby .room-entry {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.6em;
}
/* The host's level badge where the room's icon was */
.main-lobby .room-rank {
  margin-right: 0;
  font-size: 150%;
}
.main-lobby .room-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-count {
  font-variant-numeric: tabular-nums;
}
.room-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2em 1em;
  background: rgba(45, 51, 75, 0.72);
  border-radius: 8px;
}
.rooms-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6em 1em;
  padding-top: 0.4em;
}
.rooms-cta {
  font-size: 1.35em;
  font-weight: 600;
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.45);
}
.rooms-actions {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.rooms-actions .my-input {
  width: 12em;
}
.bubbly.create {
  min-width: 10em;
}
.rooms-footer .error {
  flex-basis: 100%;
  text-align: center;
  margin: 0;
}
/* Short windows, and every phone (touch.ts lays the page out 600px tall): a smaller logo and a tighter trainer card,
   so the news, Credits and the fan line fit (Log in is disabled until accounts exist). */
@media (max-height: 650px) {
  .game-switch .game-logo,
  .main-lobby .lobby-logo {
    height: 72px;
  }
  .lobby-box {
    padding: 0.6em 0.9em;
  }
  .prep-page .lobby-logo {
    height: 60px;
  }
}
@media (max-width: 760px) {
  .lobby-columns {
    grid-template-columns: 1fr;
  }
  .rooms-actions {
    flex-wrap: wrap;
  }
}

/* ---- Ditto player icons (players.ts colours) ---- */
.ditto-icon {
  display: inline-block;
  image-rendering: pixelated;
  vertical-align: middle;
}
.color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.color-swatch {
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(45, 51, 75, 0.6);
  cursor: var(--cursor-hover);
  line-height: 0;
}
.color-swatch:hover {
  background: rgba(45, 51, 75, 0.9);
}
.color-swatch.picked {
  background: rgba(255, 255, 255, 0.18);
}
/* Round with a black outline, like the in-game player avatars. */
.color-swatch .ditto-icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 0.1em black;
}
.color-note {
  font-size: 82%;
}
.seat-ditto {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: var(--border-thin);
  flex: none;
}
.seat.my-box:not(.empty) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55em;
  align-items: center;
  border-width: 3px;
  border-style: solid;
}
.seat.my-box:not(.empty) .seat-ditto {
  grid-row: span 2;
}
.seat.me {
  box-shadow: 0 0 0 2px var(--color-fg-gold);
}
.ditto-box .ditto-icon.portrait {
  border-radius: 50%;
}
.main-lobby .room-entry {
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.main-lobby .room-entry:hover {
  transform: translateY(-2px);
  background-color: var(--color-bg-primary);
}
@media (prefers-reduced-motion: reduce) {
  .main-lobby .room-entry { transition: none; }
}

/* ---- Wave path in the top bar (PAC game-stage-path): current wave + the next ones ---- */
.wave-path {
  display: flex;
  align-items: center;
}
.wave-step {
  position: relative;
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
  border: 3px solid transparent;
  cursor: var(--cursor-primary);
}
.wave-step.current {
  background-color: var(--color-bg-accent);
}
/* The little arrow above the current wave, like PAC's current stage */
.wave-step.current::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(50% - 6px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid black;
}
.wave-step.type-heavy {
  border-color: #cc6a28;
}
.wave-step.type-elite,
.wave-step.type-mini_boss {
  border-color: var(--color-fg-gold);
}
.wave-step.type-boss,
.wave-step.type-final_boss {
  border-color: var(--color-fg-red);
}
.wave-step.type-overtime {
  border-color: #ffd23c;
  box-shadow: 0 0 6px #ffd23c;
}
.wave-step img {
  display: block;
  width: 1.6em;
  height: 1.6em;
  image-rendering: pixelated;
  border-radius: 5px;
}
.wave-step .count {
  position: absolute;
  right: -0.35em;
  bottom: -0.35em;
  font-size: 65%;
  font-weight: 700;
  line-height: 1;
  padding: 0.1em 0.25em;
  border-radius: 4px;
  background: black;
  color: white;
}
.wave-dash {
  color: var(--color-fg-secondary);
  margin: 0 0.1em;
}

/* ---- Preparation room: the main lobby's look (logo, lobby art behind the box) ---- */
.prep-page .prep-panel {
  width: min(56em, 100%);
  flex: 0 1 auto;
  gap: 0.8em;
}
.prep-page .prep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.prep-title {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.prep-page .prep-title h2 {
  text-align: left;
}
.room-code {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 0.8em 0.3em 0.35em;
  font: inherit;
  color: inherit;
  cursor: var(--cursor-hover);
}
.room-code:hover {
  filter: brightness(1.1);
}
.room-code img {
  width: 2.6em;
  height: 2.6em;
  image-rendering: pixelated;
  border-radius: 8px;
  border: 2px solid var(--color-fg-gold);
}
.code-text {
  display: flex;
  flex-direction: column;
  align-items: start;
  line-height: 1.1;
}
.code-label {
  font-size: 70%;
  color: var(--color-fg-secondary);
}
.code-name {
  font-size: 120%;
  letter-spacing: 0.05em;
  color: var(--color-fg-gold);
}
.code-copy {
  font-size: 80%;
  padding: 0.2em 0.6em;
  border-radius: 8px;
  background: var(--color-bg-accent);
}
.prep-page .seat {
  flex-direction: row;
  align-items: center;
  gap: 0.6em;
  min-height: 3.6em;
  background-color: rgba(84, 89, 107, 0.85);
}
.prep-page .seat.empty {
  flex-direction: row;
  border-style: dashed;
  opacity: 0.7;
}
.seat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.seat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prep-page .seat-ditto {
  width: 2.6em;
  height: 2.6em;
  flex: none;
}
.seat-ditto.ghost {
  filter: grayscale(1) brightness(0.8);
  opacity: 0.5;
}
.prep-page .chat {
  background-color: rgba(70, 76, 92, 0.85);
}
.prep-page .chat-log {
  height: 7em;
}
.prep-page .prep-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.prep-status {
  flex: 1;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* Leave and the room settings (private, beginner) on the left of the bottom bar. Every button in the
   bar has the same height. */
.prep-actions-side {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.prep-page .prep-actions .bubbly {
  box-sizing: border-box;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.prep-page .prep-actions .bubbly.lock-toggle {
  padding: 0 calc(0.45rem + 3px) 3px 0.45rem;
}
.prep-page .prep-actions .lock-toggle img {
  width: 1.5rem;
  height: 1.5rem;
}
.prep-page .prep-actions .private-lock {
  width: 1.7rem;
  height: 1.7rem;
}
.prep-page .prep-actions .beginner-tag {
  margin-left: 0;
  font-size: 0.95rem;
  padding: 0.2em 0.6em;
}
/* Room notes in the chat (settings the host changed), and the pinned beginner note above it. */
.chat-note {
  color: var(--color-fg-gold);
  font-style: italic;
}
.chat-pinned {
  margin-bottom: 0.4em;
  padding: 0.35em 0.6em;
  border-radius: 8px;
  background: rgba(62, 226, 62, 0.14);
  border: 1px solid rgba(62, 226, 62, 0.45);
  font-size: 90%;
}
.chat-pinned .beginner-tag {
  margin: 0 0.3em 0 0;
}

/* Private rooms: PAC's lock (assets/ui/lock.svg) as a bubbly toggle, blue while private */
.prep-name {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.bubbly.lock-toggle,
.prep-head .bubbly.lock-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 100%;
  padding: 0.25em calc(0.35em + 3px) calc(0.25em + 3px) 0.35em;
}
.lock-toggle img {
  width: 1.6em;
  height: 1.6em;
  opacity: 0.45;
}
.lock-toggle.on img {
  opacity: 1;
}
.private-lock {
  width: 1.8em;
  height: 1.8em;
}
/* Beginner rooms (D78): a text toggle beside the lock for the host, a small green tag elsewhere */
.prep-head .bubbly.beginner-toggle {
  font-size: 85%;
  padding: 0.25em calc(0.5em + 3px) calc(0.25em + 3px) 0.5em;
}
.bubbly.beginner-toggle:not(.on) {
  color: var(--color-fg-secondary);
}
.beginner-tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  font-size: 75%;
  font-weight: 600;
  vertical-align: middle;
  color: #1d2a0a;
  background: var(--color-fg-green);
}
/* The secret code's "Dev mode" tag in the preparation room. */
.beginner-tag.dev-tag {
  color: #fff;
  background: #b45fd6;
}

/* ---- Tower buffs / debuffs and skill charge (hover card + tower panel) ---- */
.buff {
  color: #77e07a;
}
.debuff {
  color: #ff7b6e;
}
.effects-list p {
  margin: 0;
}
.tower-detail .td-skill {
  position: relative;
  min-width: 0;
}
.tower-detail .td-skill-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding-right: 0.3em;
  font-size: 90%;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-tertiary) transparent;
}
.tower-detail .td-skill-scroll > * {
  flex-shrink: 0;
}
.tower-detail .td-skill p {
  margin: 0;
}
.tower-detail .td-skill .detail-text {
  margin: 0;
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-size: 92%;
}
.tower-detail .skill-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tower-detail .pp-bar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  height: 14px;
  background: var(--color-bg-secondary);
  border: 1px solid #00000080;
  overflow: hidden;
}
.tower-detail .pp-bar div {
  height: 100%;
  background: #5f9ff9;
  transition: width 0.2s;
}
.tower-detail .pp-bar span {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


/* ---- Players (PAC game-players): avatars with a life ring down the right edge ---- */
.game-players {
  position: absolute;
  top: 1%;
  right: 0.5%;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
/*
 * The avatar is one badge (an SVG, 100 x 120 units): a disc with a rounded HP tab under it, one
 * continuous black outline around both, the life arc inside the disc and the HP low in the tab.
 * The portrait sits on top of the disc. A soft shadow lifts it off the map.
 */
.game-player-avatar {
  position: relative;
  width: 4.4em;
  height: 5.28em; /* 4.4em x 120/100 */
  filter: drop-shadow(0 0.15em 0.15em rgba(0, 0, 0, 0.45));
}
.game-player-avatar .badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.badge-outline > * {
  fill: black;
  stroke: black;
  stroke-width: 8;
  stroke-linejoin: round;
}
.badge-fill > * {
  fill: #2d334b;
}
.game-player-avatar .trail,
.game-player-avatar .path {
  fill: none;
  stroke-width: 10;
}
.game-player-avatar .trail {
  stroke: rgba(0, 0, 0, 0.45);
}
.game-player-avatar .path {
  stroke: #f7d51d;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s, stroke 0.3s;
}
.game-player-avatar.self .path {
  stroke: #3ee23e;
}
.game-player-avatar.target .path {
  stroke: #ff9f3a;
}
.badge-hp {
  font-family: Jost, sans-serif;
  font-size: 22px;
  font-weight: 700;
  fill: white;
  font-variant-numeric: tabular-nums;
}
.game-player-avatar.low .badge-hp {
  fill: var(--color-fg-red);
}
/* The portrait over the disc: centre (50, 50) of the 100 x 120 box, 56 units wide. */
.game-player-avatar .avatar-ditto {
  position: absolute;
  left: 22%;
  top: 18.33%;
  width: 56%;
  height: 46.67%;
  border-radius: 50%;
  image-rendering: pixelated;
  box-shadow: 0 0 0 0.12em black;
}
.game-player-avatar.dead {
  filter: grayscale(1) brightness(0.55);
}
.avatar-badge {
  position: absolute;
  right: -0.15em;
  top: -0.15em;
  z-index: 2;
  font-size: 85%;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 black);
}
.avatar-badge.placement {
  color: var(--color-fg-gold);
  font-weight: 700;
}

/* ---- Damage meter (PAC game-dps-meter): portrait, damage, thin bar ---- */
.game-dps-meter {
  position: absolute;
  top: 1%;
  right: calc(0.5% + 5.2em);
  width: 10.5em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.4em 0.5em;
}
.game-dps-meter .title {
  display: flex;
  align-items: center;
  gap: 0.3em;
  color: var(--color-fg-gold);
}
.game-dps-meter .title img {
  width: 1.3em;
  height: 1.3em;
}
.dps-row {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.dps-portrait {
  width: 2.2em;
  height: 2.2em;
  image-rendering: pixelated;
  border-radius: 6px;
}
.dps-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.dps-wrapper p {
  margin: 0;
  font-size: 85%;
  line-height: 1.1;
}
.dps-kills {
  color: var(--color-fg-secondary);
  font-size: 85%;
}
.dps-progress {
  position: relative;
  height: 0.55em;
  background: var(--color-bg-secondary);
  border: var(--border-thin);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 1px 1px 0 #00000060;
}
.dps-progress .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #e76e55;
  transition: width 0.3s;
}
.player-card .detail-portrait {
  border-radius: 50%;
}

/* ---- Tower panel: current stats | one arrow | next upgrade in a rounded box ---- */
.tower-stats {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  align-content: center;
  gap: 0.4em;
}
.tower-stats.with-next {
  grid-template-columns: 1fr auto auto;
}
.stats-now,
.stats-next {
  display: flex;
  flex-direction: column;
}
.stat-line {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 1.75em;
  font-weight: 600;
}
.tower-detail .stat-line {
  height: 1.45em;
}
.tower-detail .stat-icon {
  width: 1.25em;
  height: 1.25em;
}
.stats-next {
  padding: 0 0.6em;
  border-radius: 8px;
  background: var(--color-bg-secondary);
  box-shadow: inset 1px 1px 0 #00000040;
  text-align: right;
}
.stats-next .stat-line {
  justify-content: flex-end;
  color: var(--color-fg-secondary);
}
.stats-next .stat-line.up {
  color: var(--color-fg-green);
}
/* LVL UP: the upgrade button between the current and the next stats */
.tower-detail .bubbly.level-up {
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  padding: 0.3em calc(0.35em + 3px) calc(0.3em + 3px) 0.35em;
  font-size: 85%;
  line-height: 1.05;
}
.tower-detail .level-up .arrow {
  font-size: 140%;
}
.tower-detail .level-up .money {
  margin-top: 0.2em;
}
/* LVL UP with this prep's Undo under it (100% back); key badges in the corner */
.tower-detail .level-up-col {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.tower-detail .level-up-col .level-up {
  flex: 1;
}
/* A branch level-up (D57): two evolve buttons, each with the form's portrait */
.tower-detail .bubbly.level-up.branch {
  flex-direction: row;
  gap: 0.3em;
  padding: 0.2em 0.4em;
  font-size: 85%;
}
.tower-detail .level-up.branch img {
  width: 1.8em;
  height: 1.8em;
  image-rendering: pixelated;
}
.tower-detail .level-up.branch .money {
  margin-top: 0;
}
.tower-stats.with-undo {
  grid-template-columns: 1fr auto;
}
.tower-detail .bubbly.level-up,
.tower-detail .bubbly.undo-level {
  position: relative;
}
.tower-detail .bubbly kbd {
  position: absolute;
  top: 0.15em;
  left: 0.2em;
  padding: 0 0.2em;
  font: inherit;
  font-size: 65%;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-fg-primary);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
}
.tower-detail .bubbly.undo-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0.15em 0.4em 0.15em 1.1em;
  font-size: 75%;
  line-height: 1.1;
}
.tower-detail .bubbly.undo-level kbd {
  top: 50%;
  transform: translateY(-50%);
}
/* Header: level + one pip per upgrade step */
.tower-detail .level-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.tower-detail .step-pips {
  display: flex;
  align-self: flex-start; /* as wide as its pips, not the column */
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: var(--color-bg-input);
  border: 1px solid #000;
}
.tower-detail .step-pips span {
  width: 0.6em;
  height: 0.5em;
  border-radius: 2px;
  background: #3a3f4f;
}
.tower-detail .step-pips span.stage {
  background: #5d6478;
}
.tower-detail .step-pips span.next {
  box-shadow: 0 0 0 1.5px var(--color-fg-green);
}
.tower-detail .step-pips span.on {
  background: var(--color-fg-gold);
}
.tower-detail .step-pips.max span.on {
  background: #ffe066;
}
.tower-detail .max-tag {
  font-size: 75%;
  color: var(--color-fg-gold);
}
.tower-detail .targeting .small {
  margin-right: 0.15em;
}
.tower-stats .buff {
  color: var(--color-fg-green);
}
.tower-stats .debuff {
  color: var(--color-fg-red);
}
.pp-rate {
  line-height: 1.25;
}

/* ---- After-game (after PAC's after-menu): header band with the medal and your result, then one
   row per player: rank | player card | stats | towers | maze mini map | Ditto ---- */
.after-game {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80em, 94%);
  max-height: 92%;
  box-sizing: border-box;
  padding: 0 0 1.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  overflow: hidden;
}
.after-head {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 1.2em;
  min-height: 5.6em;
  padding: 0.4em 2em;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 3px solid rgba(0, 0, 0, 0.35);
}
.after-medal {
  height: 6.6em;
  margin: 0.2em 0 -1.6em; /* hangs below the band, like PAC */
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.5));
}
.after-medal.fainted {
  width: 4.4em;
  height: 4.4em;
  margin: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0.15em black;
  image-rendering: pixelated;
  filter: grayscale(1) brightness(0.85);
}
.after-title {
  display: flex;
  flex-direction: column;
}
.after-title .kicker {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.after-title h2 {
  margin: 0;
  font-size: 2.4em;
  line-height: 1.05;
  text-shadow: 3px 3px 0 black;
}
.after-note {
  margin-left: 0.6em;
  font-size: 110%;
  color: var(--color-fg-secondary);
}
.after-table {
  /* One grid for all rows (rows are subgrids), so every column lines up. */
  display: grid;
  grid-template-columns: 3em 17em auto auto auto auto;
  justify-content: space-between; /* spread the columns over the panel, like PAC */
  column-gap: 1.6em;
  row-gap: 0.6em;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6em 2em 0;
  overflow-y: auto;
}
.after-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}
.after-labels > span {
  justify-self: center;
  font-weight: 700;
  text-shadow: 2px 2px 0 black;
}
.after-labels > span:nth-child(2) {
  justify-self: start;
  padding-left: 0.4em;
}
.after-rank {
  justify-self: center;
  font-size: 2em;
  font-weight: 700;
  text-shadow: 3px 3px 0 black;
}
.after-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.7em;
  height: 3.4em;
  padding-right: 0.9em;
  background: var(--color-bg-tertiary);
  border: var(--border-thin);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.after-row.me .after-player {
  border-color: var(--color-fg-gold);
  box-shadow: 0 0 0 2px var(--color-fg-gold), 0 3px 0 rgba(0, 0, 0, 0.45);
}
.after-avatar {
  width: 2.8em;
  height: 2.8em;
  margin: 0.3em;
  border-radius: 50%;
  box-shadow: 0 0 0 0.12em black;
  image-rendering: pixelated;
}
.after-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.after-hp {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-weight: 600;
}
.after-hp img {
  width: 1.4em;
  height: 1.4em;
}
.after-hp small {
  color: var(--color-fg-secondary);
  font-weight: normal;
}
.after-stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 1.1em;
  row-gap: 0.1em;
  font-size: 92%;
  font-variant-numeric: tabular-nums;
}
.after-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}
.after-stat .label {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.after-towers {
  display: flex;
  gap: 0.3em;
}
.after-portrait {
  width: 2.8em;
  height: 2.8em;
  image-rendering: pixelated;
  border: var(--border-thin);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.after-maze {
  display: block;
  width: 9em;
  height: 5.8em;
}
.after-maze .tile {
  fill: rgba(255, 255, 255, 0.1);
}
.after-maze .tower {
  fill: #e9c98a;
}
.after-maze .grass {
  fill: #5fbf3a;
}
.after-maze .path {
  fill: none;
  stroke: var(--color-fg-red);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.after-ditto {
  display: flex;
  flex-direction: column;
  font-size: 92%;
  color: var(--color-fg-secondary);
  white-space: nowrap;
}
.after-ditto b {
  color: var(--color-fg-primary);
}

/* Next-level skill change in the tower panel (learn / replace / improve) */
.skill-change {
  padding: 0.3em 0.5em;
  border-radius: 8px;
  background: rgba(142, 222, 29, 0.15);
  border: 1px solid var(--color-fg-green);
}
.skill-change p {
  margin: 0;
}
.skill-change b {
  color: var(--color-fg-green);
}

/* ---- Money box in the bottom row: gold now → next payout, as base + income, then the
   army hint. Hover (or click to pin) opens the breakdown popover above it. ---- */
.game-money {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
  padding: 0.3em 0.6em;
  min-width: 14em;
  box-sizing: border-box;
  cursor: var(--cursor-hover);
}
.game-money.pinned {
  border-color: var(--color-fg-gold);
}
.game-money .caption {
  font-size: 62%;
  line-height: 1.1;
  color: var(--color-fg-secondary);
  white-space: nowrap;
}
.money-path {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.money-now,
.money-next {
  display: flex;
  flex-direction: column;
}
.money-now .money {
  font-size: 150%;
  color: var(--color-fg-gold);
}
.money-next {
  align-items: flex-end;
}
.money-next .money {
  font-size: 125%;
  color: var(--color-fg-green);
}
.money-arrow {
  position: relative;
  flex: 1;
  min-width: 1.2em;
  height: 0.22em;
  margin: 0 0.45em 0.8em 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-fg-gold), var(--color-fg-green));
}
.money-arrow::after {
  content: "";
  position: absolute;
  right: -0.45em;
  top: 50%;
  transform: translateY(-50%);
  border-left: 0.55em solid var(--color-fg-green);
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
}
.money-sum {
  display: flex;
  align-items: center;
  gap: 0.15em;
  padding: 0.15em 0.3em 0.35em;
  background: var(--color-bg-secondary);
  border: var(--border-thin);
  border-radius: 8px;
}
.money-sum .op {
  color: var(--color-fg-secondary);
  font-weight: 600;
  font-size: 85%;
}
.sum-part {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 88%;
}
.sum-part.income .money-value {
  color: var(--color-fg-green);
}
.sum-part.income.bump {
  animation: income-bump 0.5s 2;
}
@keyframes income-bump {
  50% {
    transform: scale(1.25);
  }
}
/* The army hint is not part of the money path: a separate pill under it. */
.money-army {
  align-self: center;
  padding: 0 0.5em;
  font-size: 75%;
  color: var(--color-fg-secondary);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  white-space: nowrap;
}
.money-army .rec {
  color: var(--color-fg-red);
}
.money-army.ok .rec {
  color: var(--color-fg-secondary);
}
.money-change-tag {
  position: absolute;
  bottom: calc(100% + 0.3em);
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.6em 0.15em 0.3em;
  color: var(--color-fg-green);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-bg-primary);
  border: var(--border-thin);
  border-radius: 10px;
  pointer-events: none;
  animation: income-tag 3.5s forwards;
}
.money-change-tag .change-portrait {
  width: 1.7em;
  height: 1.7em;
  image-rendering: pixelated;
  border-radius: 6px;
}
@keyframes income-tag {
  0% {
    opacity: 0;
    transform: translateY(0.6em);
  }
  10%,
  75% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-0.6em);
  }
}
.money-popover {
  position: absolute;
  bottom: calc(100% + 0.4em);
  right: 0; /* the box sits at the screen's right edge */
  width: 23em;
  z-index: 20;
  font-size: 85%;
  cursor: var(--cursor-primary);
}
.money-popover h3 {
  margin: 0 0 0.3em;
  font-size: 110%;
}
.money-popover h3 .when {
  font-size: 80%;
  font-weight: normal;
  color: var(--color-fg-secondary);
}
.money-popover table {
  width: 100%;
  border-collapse: collapse;
}
.money-popover td {
  padding: 0.05em 0;
}
.money-popover td.num {
  text-align: right;
  white-space: nowrap;
}
.money-popover tr.sub td {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.money-popover tr.sub td:first-child {
  padding-left: 1em;
}
.money-popover tr.total td {
  border-top: 2px solid #0005;
  padding-top: 0.15em;
  font-weight: 600;
  color: var(--color-fg-green);
}
.money-popover .hint {
  font-size: 80%;
  color: var(--color-fg-secondary);
}
.money-popover .note {
  margin: 0.35em 0 0;
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.money-popover .note.last {
  color: var(--color-fg-green);
}
.money-popover .note.army {
  padding-top: 0.3em;
  border-top: 2px solid #0003;
}
.money-popover .note.dim {
  opacity: 0.7;
  font-size: 75%;
}

/* ---- Skill overview (dev only, ?skills) ---- */
.skills-page .skills-search {
  min-width: 220px;
}
.skills-chips {
  display: flex;
  gap: 4px;
}
.skills-level {
  display: flex;
  align-items: center;
  gap: 6px;
}
.skills-table {
  width: 100%;
  border-collapse: collapse;
}
.skills-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-secondary);
  text-align: left;
  padding: 6px 8px;
}
.skills-table td {
  vertical-align: top;
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.skills-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}
.skills-table .skills-desc {
  min-width: 320px;
  max-width: 560px;
}
.skills-table .skills-desc .detail-text p {
  margin: 0 0 4px;
}
.skills-forms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skills-form {
  display: flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  padding: 2px 6px 2px 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.skills-form:hover {
  background: rgba(255, 255, 255, 0.12);
}
.skills-form img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  border-radius: 6px;
}
.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skills-tag {
  font: inherit;
  font-size: 85%;
  color: inherit;
  cursor: var(--cursor-hover);
  border: none;
  border-radius: 6px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.12);
}
.skills-tag.active,
.skills-tag:hover {
  background: var(--color-bg-accent);
}

/* Godlike sends (overtime, D49) */
.godlike-note {
  margin: 2px 0 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffd23c;
  color: #1d1a10;
  font-size: 85%;
}
.send-card.godlike {
  border-color: #ffd23c;
  box-shadow: 0 0 8px rgba(255, 210, 60, 0.7);
}

/* Dev tools in the game (dev builds only, ?dev) */
.dev-toggle {
  opacity: 0.75;
}
.dev-panel {
  position: absolute;
  top: calc(100% + 0.4em);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.5em 0.7em;
  min-width: 260px;
  z-index: 20;
}
.dev-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dev-head .close {
  background: none;
  border: none;
  color: inherit;
  font-size: 130%;
  cursor: var(--cursor-hover);
}
.dev-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dev-row .my-input {
  width: 5em;
}
.dev-panel .bubbly {
  font-size: 85%;
}
/* Dev tower picker: every tower line by slot, click to build it (in the deck or not) */
.dev-towers {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.dev-tower-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.dev-slot {
  width: 1.1em;
  text-align: right;
  opacity: 0.7;
}
.dev-tower {
  width: 34px;
  height: 34px;
  padding: 1px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  cursor: var(--cursor-hover);
}
.dev-tower img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 4px;
}
.dev-tower:hover:not(:disabled) {
  border-color: #ffffff88;
}
.dev-tower.on {
  border-color: #ffc107;
}
.dev-tower:disabled {
  opacity: 0.45;
  cursor: var(--cursor-primary);
}

/* Grass mode hint (D51): under the stage info while planting grass blocks */
.grass-hint {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.8em;
  border-color: #5cff6a;
  box-shadow: 0 0 10px rgba(92, 255, 106, 0.5);
  max-width: min(92%, 760px);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.grass-hint .close {
  background: none;
  border: none;
  color: inherit;
  font-size: 130%;
  cursor: var(--cursor-hover);
}

/* Balance editor: a slot pool entry with its remove button (pools can be bigger than a hand) */
.balance-pool-entry {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.balance-pool-entry .bubbly.small {
  padding: 0 0.45em;
  font-size: 85%;
}

/* ---- Pixel editor (dev only, ?pixel, D53) ---- */
.pixel-editor {
  display: grid;
  grid-template-columns: minmax(240px, 36vw) minmax(300px, 1fr) minmax(220px, 280px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  height: 100vh;
  padding: 6px;
  box-sizing: border-box;
}
.pixel-editor .editor-bar {
  grid-column: 1 / -1;
}
.pixel-editor .bubbly {
  font-size: 95%;
  text-decoration: none;
}
.pixel-editor .bubbly.active {
  background: var(--color-bg-accent);
}
.pixel-palette {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.pixel-sheet {
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.pixel-sheet canvas {
  display: block;
  image-rendering: pixelated;
  cursor: var(--cursor-hover);
}
.pixel-canvas-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: auto;
  min-height: 0;
}
.pixel-info {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pixel-canvas {
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;
}
.pixel-tools {
  overflow: auto;
  min-height: 0;
}
.pixel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pixel-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.pixel-swatch {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  cursor: var(--cursor-hover);
  padding: 0;
}
.pixel-swatch.picked {
  border-color: #ffc107;
}
.pixel-preview {
  image-rendering: pixelated;
  max-width: 100%;
}

/* Map editor with the pixel panel (P, D53): a third column next to the map */
.editor.with-pixel {
  grid-template-columns: min(560px, 34vw) minmax(0, 1fr) minmax(280px, 340px);
}
.editor .pixel-panel {
  grid-column: 3;
  grid-row: 2 / 4;
  overflow: auto;
  min-height: 0;
  gap: 6px;
}
.pixel-panel .close {
  background: none;
  border: none;
  color: inherit;
  font-size: 130%;
  cursor: var(--cursor-hover);
}
.editor .editor-view {
  grid-column: 2;
  grid-row: 2;
}
.editor .editor-status {
  grid-column: 2;
  grid-row: 3;
}

/*
 * Spectating (D55): watching another trainer's board. HUD-only cues in one colour (purple, used
 * nowhere else on the HUD): a frame round the game view, the banner under the stage info and a
 * ring on the watched portrait. The board itself stays untouched.
 */
.game-frame {
  --spectate: #b36bff;
}
.spectate-frame {
  position: absolute;
  inset: 0;
  border: max(0.6em, 5px) solid var(--spectate);
  box-shadow: inset 0 0 1.5em rgba(179, 107, 255, 0.55);
  pointer-events: none !important;
}
.spectate-banner {
  position: absolute;
  top: 6.2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.35em 0.9em;
  max-width: min(92%, 860px);
  white-space: nowrap;
}
.spectate-banner.watching {
  border-color: var(--spectate);
  box-shadow: 0 0 12px rgba(179, 107, 255, 0.7);
  font-size: 115%;
}
.spectate-banner .spectate-ditto {
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  image-rendering: pixelated;
  box-shadow: 0 0 0 0.15em var(--spectate);
}
.spectate-banner .spectate-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.spectate-banner .spectate-text b {
  color: #e2c6ff;
}
.spectate-banner .spectate-text .spectate-out {
  color: var(--color-fg-red);
}
.spectate-banner small {
  color: var(--color-fg-secondary);
  font-size: 75%;
}
.spectate-banner .bubbly {
  font-size: 90%;
}
.game-hud:has(.spectate-banner) .game-toast,
.game-hud:has(.spectate-banner) .draft-reopen {
  top: 14%; /* below the banner */
}
.game-player-avatar {
  cursor: var(--cursor-hover);
}
.game-player-avatar.watched .badge-outline > * {
  stroke: var(--spectate);
  fill: var(--spectate);
}
.game-player-avatar.watched {
  filter: drop-shadow(0 0 0.35em var(--spectate));
}
.game-player-avatar.watched.dead {
  filter: grayscale(1) brightness(0.55) drop-shadow(0 0 0.35em var(--spectate));
}
/* "Watching" across the bottom of the portrait (inside the avatar column, clear of the damage meter). */
.avatar-watching {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.05em 0.35em;
  border-radius: 0.5em;
  background: var(--spectate);
  color: white;
  font-size: 62%;
  font-weight: 700;
  box-shadow: 0 0 0 0.12em black;
  white-space: nowrap;
  pointer-events: none;
}
/* Building is off on a watched board: the deck bar steps back. */
.spectating .deck-bar {
  opacity: 0.55;
}
.after-actions {
  display: flex;
  gap: 0.8em;
}
/* A full table on a short screen (a phone's 600px layout): the rows scroll, the band and the buttons always show. */
.after-head,
.after-actions {
  flex: none;
}
.after-table {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- Touch screens (phones, tablets: html.touch, src/client/touch.ts) ----
   The page is the PC layout scaled to the screen; these rules only add what fingers need:
   a bigger in-game HUD, no keyboard hints, no page zoom / selection / callouts, and the
   "turn your phone" overlay in portrait. */
html.touch,
html.touch body {
  overscroll-behavior: none;
  touch-action: manipulation; /* no double-tap zoom */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.touch input,
html.touch textarea {
  -webkit-user-select: text;
  user-select: text;
}
html.touch img {
  -webkit-user-drag: none;
}
/* The board takes every gesture itself (taps, drags, pinches). */
html.touch .game-canvas,
html.touch .game-canvas canvas {
  touch-action: none;
}
/* Fingers need bigger targets than a mouse: the whole in-game HUD scales up (it is all in em). */
html.touch .game-hud {
  font-size: min(calc(0.85vw * var(--touch-hud)), calc(1.51vh * var(--touch-hud)));
}
html.touch {
  --touch-hud: 1.6;
}
html.touch .detail-card {
  font-size: 17px;
  width: 320px;
}
/* No keyboard: hide the hotkey hints. */
html.touch kbd {
  display: none;
}

#rotate-hint {
  display: none;
}
@media (orientation: portrait) {
  html.touch #rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    font-size: 20px;
    background: var(--color-bg-tertiary);
  }
  html.touch #rotate-hint img {
    width: 96px;
    height: 96px;
  }
}
/* With the bigger HUD the bottom-left cell is too narrow for the tower panel: it stands on top of
   the bottom row instead, at its full width (only while a tower is selected). */
/* Fingers: every button in the HUD is at least ~6mm tall, the main ones taller. */
html.touch .game-hud button,
html.touch .game-hud .bubbly {
  min-height: 2.9em;
}
/* The bottom row: the side cells are only as wide as their content (the money box was clipped). */
html.touch .game-bottom {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
/* The selected tower's panel is a sheet down the side of the board away from the tower (data-side),
   above the bottom row, with the stats, LVL UP, Sell / Target and the skill stacked in one column. */
html.touch .game-bottom-side.left {
  position: static;
}
html.touch .tower-detail {
  left: auto;
  right: 0;
  bottom: calc(100% + 0.5em);
  width: 22em;
  max-width: 34vw;
  max-height: 58vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.5em 0.6em;
  font-size: 100%;
  overflow: hidden;
}
html.touch .tower-detail[data-side="left"] {
  left: 0;
  right: auto;
}
html.touch .tower-detail .td-id,
html.touch .tower-detail .tower-stats {
  flex: none;
}
html.touch .tower-detail .td-skill {
  flex: 1 1 0;
  min-height: 6em;
}
html.touch .tower-detail .td-role {
  white-space: normal;
}
html.touch .tower-detail .actions .bubbly {
  min-height: 3.9em;
  font-size: 95%;
}
html.touch .tower-detail .bubbly.level-up {
  min-height: 4em;
  min-width: 4.5em;
}
html.touch .tower-detail .bubbly.undo-level {
  min-height: 2.6em;
}
html.touch .tower-detail .bubbly.unleash {
  min-height: 3.2em;
}
/* Readable on the real screen: the page is drawn at ~0.6-0.7 on phones, so the HUD's small print gets a floor of 13
   layout px (~8-9 real px) instead of its PC percentage. */
html.touch .game-money .caption,
html.touch .money-army,
html.touch .ditto-box .income,
html.touch .deck-card .slot-no,
html.touch .deck-card > span,
html.touch .wave-step .count,
html.touch .draft-hint,
html.touch .draft-skill {
  font-size: max(13px, 75%);
}
/* The corner buttons (sound, Leave, Dev) are the ones a thumb hunts for: ~30 real px tall. */
html.touch .game-corner .bubbly {
  min-height: 3.4em;
  min-width: 3.4em;
}
/* Notches and rounded corners (viewport-fit=cover, index.html): the HUD keeps clear of the safe-area insets. The board
   still runs edge to edge under it, and touchHud() measures the HUD where it now is, so the camera fit follows. */
html.touch .game-hud {
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
html.touch .main-lobby {
  padding-left: max(2vw, env(safe-area-inset-left, 0px));
  padding-right: max(2vw, env(safe-area-inset-right, 0px));
  padding-bottom: max(2vh, env(safe-area-inset-bottom, 0px));
}
/* The scaled page is 600px tall: a shorter chat log keeps Leave / Start on screen. */
html.touch .prep-page .chat-log {
  height: 4.5em;
}
html.touch .prep-page .lobby-logo {
  height: 10vh;
}

/* ---- Loading screen (pages/loading-screen.tsx) ---- */
.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 60;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(70, 76, 92, 0.55), rgba(20, 22, 30, 0.92) 70%),
    url("assets/ui/lobby-bg.webp") center / max(100vw, calc(100vh * 16 / 9)) auto;
  transition: opacity 0.5s ease;
}
.loading-screen.done {
  opacity: 0;
  pointer-events: none;
}
.loading-card {
  width: min(26em, calc(100vw - 2em));
  padding: 1.4em 1.6em 1.2em;
  text-align: center;
  animation: loading-card-in 0.35s ease-out;
}
@keyframes loading-card-in {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
}
.loading-card h2 {
  margin: 0.4em 0 0.1em;
  color: var(--color-fg-gold);
}
.loading-sub {
  margin: 0 0 0.9em;
  color: var(--color-fg-secondary);
}
.loading-emblem {
  position: relative;
  width: 9.5em;
  height: 9.5em;
  margin: 0 auto;
}
/* Everything that moves is a transform, so the compositor keeps it moving while loading blocks the main thread. */
.loading-layer {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  will-change: transform;
}
.loading-layer.shine {
  animation: loading-spin 9s linear infinite;
}
.loading-layer.ditto {
  animation: loading-hop 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.loading-layer.pink {
  transform-origin: 35% 58%; /* its feet */
}
.loading-layer.blue {
  transform-origin: 64% 97%;
  animation-delay: -0.8s;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
@keyframes loading-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.06, 0.92); }
  40% { transform: translateY(-9%) scale(0.96, 1.05); }
  62% { transform: translateY(0) scale(1.07, 0.91); }
  76% { transform: translateY(0) scale(0.99, 1.02); }
}
/* The overall ring: two half rings that turn (right half 0-50%, left half 50-100%). */
.loading-ring,
.loading-ring-track,
.loading-ring-half,
.loading-ring-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
}
.loading-ring-track {
  border: 0.45em solid rgba(0, 0, 0, 0.3);
}
.loading-ring-half.right {
  clip-path: inset(0 0 0 50%);
}
.loading-ring-half.left {
  clip-path: inset(0 50% 0 0);
}
.loading-ring-arc {
  border: 0.45em solid #f5ba1c;
  will-change: transform;
}
.loading-ring-half.right .loading-ring-arc {
  clip-path: inset(0 50% 0 0);
}
.loading-ring-half.left .loading-ring-arc {
  clip-path: inset(0 0 0 50%);
}
.loading-percent {
  position: absolute;
  left: 50%;
  bottom: -0.35em;
  transform: translateX(-50%);
  padding: 0 0.5em;
  border-radius: 1em;
  background: #4f3010;
  color: #ffe8a9;
  font-weight: bold;
  font-size: 0.85em;
}
.loading-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  text-align: left;
}
.loading-row {
  display: grid;
  grid-template-columns: 2em minmax(3em, 8em) minmax(5em, 1fr) 4.6em;
  align-items: center;
  gap: 0.6em;
}
/* Round like the in-game player avatars (.game-player-avatar .avatar-ditto): a black outline and a
   soft shadow; it gets the "you" green ring once that trainer is ready. */
.loading-row .ditto-icon {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0 0 0 0.12em black;
  filter: drop-shadow(0 0.1em 0.1em rgba(0, 0, 0, 0.45));
  transition: box-shadow 0.25s;
}
.loading-row.ready .ditto-icon {
  box-shadow: 0 0 0 0.12em black, 0 0 0 0.24em #3ee23e;
}
.loading-row.joining .ditto-icon {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.loading-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loading-you {
  color: var(--color-fg-secondary);
}
.loading-bar {
  position: relative;
  height: 0.6em;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/* Full width, slid in from the left (translateX, set by the glide): the stripes stay undistorted. */
.loading-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  transform: translateX(-100%);
  will-change: transform;
}
.loading-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -34px;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0 6px, transparent 6px 12px);
  animation: loading-stripes 0.7s linear infinite;
  will-change: transform;
}
.loading-row.ready .loading-bar-fill::after {
  display: none;
}
@keyframes loading-stripes {
  to { transform: translateX(17px); }
}
.loading-status {
  text-align: right;
  font-size: 0.9em;
  color: var(--color-fg-secondary);
  white-space: nowrap;
}
.loading-row.ready .loading-status {
  color: #8fe388;
  font-weight: bold;
  animation: loading-pop 0.35s ease-out;
}
@keyframes loading-pop {
  50% { transform: scale(1.25); }
}
.loading-hint {
  margin: 1em 0 0;
  font-size: 0.85em;
  color: var(--color-fg-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .loading-bar-fill::after, .loading-card, .loading-row.ready .loading-status, .loading-layer { animation: none; }
}

/* ---- Lobby: rejoin your running game (pages/rejoin-banner.tsx) ---- */
.rejoin-banner {
  display: flex;
  margin: 0 auto 0.8em;
  width: fit-content;
  align-items: center;
  gap: 1em;
  padding: 0.6em 0.9em;
  max-width: calc(100vw - 2em);
  box-sizing: border-box;
  animation: rejoin-in 0.3s ease-out;
}
@keyframes rejoin-in {
  from { transform: translateY(-8px); opacity: 0; }
}
.rejoin-text {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.rejoin-text b {
  color: var(--color-fg-gold);
}
.rejoin-time {
  font-size: 0.85em;
  color: var(--color-fg-secondary);
}
.rejoin-actions {
  display: flex;
  gap: 0.4em;
}

/* ---- Kecleon's gift pick (D87, pages/kecleon-panel.tsx): reuses the draft window's cards ---- */
.kecleon-modal {
  top: 16%;
  max-width: min(96vw, 44em);
}
.kecleon-card {
  width: 12.5em;
}
.kecleon-icon {
  width: 3.4em;
  height: 3.4em;
  image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.35));
}
.kecleon-kind {
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  color: var(--color-fg-secondary);
  font-size: 75%;
  font-weight: 700;
}
.kecleon-text {
  flex: 1;
  font-size: 82%;
  line-height: 1.25;
  text-align: center;
}
.kecleon-reopen {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 95%;
}
.kecleon-reopen img,
.kecleon-hint img {
  width: 1.8em;
  height: 1.8em;
  image-rendering: pixelated;
}
.kecleon-hint {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.8em;
  max-width: min(92%, 640px);
  border-color: var(--color-fg-gold);
  box-shadow: 0 0 10px rgba(247, 213, 29, 0.45);
}
@media (max-width: 700px) {
  .kecleon-modal .draft-cards {
    flex-direction: column;
  }
  .kecleon-card {
    width: auto;
  }
}

/* ---- Dev hub (pages/dev-hub.tsx, ?tools) ---- */
.dev-tools-link {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  text-decoration: none;
  font-size: 100%;
}
.dev-hub {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 1.5em max(16px, 4vw) 3em;
  color: white;
}
.dev-hub-head {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
}
.dev-hub-head img {
  width: 4em;
  height: 4em;
}
.dev-hub-head h1 {
  margin: 0;
  color: var(--color-fg-gold);
}
.dev-hub-head p {
  margin: 0.2em 0 0;
}
.dev-hub-search {
  margin-left: auto;
  width: min(24em, 100%);
}
.dev-hub-section {
  margin-top: 1.4em;
}
.dev-hub-section h2 {
  margin: 0 0 0.5em;
  font-size: 1.25em;
}
.dev-hub-section h2 .muted {
  font-size: 0.7em;
  font-weight: normal;
  margin-left: 0.5em;
}
.dev-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20em), 1fr));
  gap: 0.8em;
}
.dev-hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.8em 1em;
}
.dev-hub-card p {
  margin: 0;
  font-size: 0.95em;
}
.dev-hub-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
.dev-hub-card-head h3 {
  margin: 0;
  font-size: 1.1em;
}
.dev-hub-card-head .bubbly {
  text-decoration: none;
  font-size: 100%;
}
.dev-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}
.dev-hub-links a {
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #cfe3ff;
  text-decoration: none;
  font-size: 0.85em;
}
.dev-hub-links a:hover {
  background: rgba(0, 0, 0, 0.45);
}
.dev-hub-commands {
  list-style: none;
  margin: 0.2em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.dev-hub-commands li {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.dev-hub-cmd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  width: 100%;
  padding: 0.3em 0.55em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: #f0f4ff;
  text-align: left;
}
.dev-hub-cmd code {
  font-size: 0.85em;
  overflow-wrap: anywhere;
}
.dev-hub-cmd:hover {
  background: rgba(0, 0, 0, 0.5);
}
.dev-hub-url {
  margin-top: auto;
}
.dev-hub-empty {
  margin-top: 2em;
}

/* ---- Lobby logo with the game switch (src/common/game-switch.tsx, D91) ---- */
/* A rounded triangle on each side of the logo. A click slides the logo out to the other side, and the
   other game's lobby opens with its logo sliding in from the arrow's side. */
.main-lobby {
  overflow-x: hidden; /* the sliding logo leaves the screen sideways */
}
/* Below this width the logo row runs under the floating music player (top right): start the lobby
   below the player instead, so both arrows stay clickable. */
@media (max-width: 1600px) {
  .main-lobby {
    padding-top: 58px;
  }
}
.game-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8em, 4vw, 4em);
  max-width: 100%;
}
.game-logo {
  height: clamp(90px, 20vh, 190px);
  aspect-ratio: 2522 / 765; /* the Legions logo: every game's logo gets the same box */
  max-width: calc(100vw - 2 * clamp(28px, 5vh, 48px) - 2 * clamp(0.8em, 4vw, 4em) - 4vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}
/* A game without its logo yet shows its name in the logo's place. */
.game-logo-text {
  font-size: clamp(2em, 8vh, 4.4em);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color-fg-gold);
  text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.45);
}
.game-logo.leave-left { animation: game-logo-leave-left 0.26s ease-in forwards; }
.game-logo.leave-right { animation: game-logo-leave-right 0.26s ease-in forwards; }
.game-logo.enter-left { animation: game-logo-enter-left 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
.game-logo.enter-right { animation: game-logo-enter-right 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes game-logo-leave-left { to { transform: translateX(-60vw); opacity: 0; } }
@keyframes game-logo-leave-right { to { transform: translateX(60vw); opacity: 0; } }
@keyframes game-logo-enter-left { from { transform: translateX(-60vw); opacity: 0; } }
@keyframes game-logo-enter-right { from { transform: translateX(60vw); opacity: 0; } }
.game-arrow {
  flex: none;
  width: clamp(28px, 5vh, 48px);
  height: clamp(28px, 5vh, 48px);
  padding: 0;
  border: none;
  background: none;
  cursor: var(--cursor-hover);
  opacity: 0.8;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.45));
  transition: opacity 0.15s, transform 0.15s;
}
.game-arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.game-arrow polygon {
  fill: #fff;
  stroke: #fff;
  stroke-width: 5;
  stroke-linejoin: round;
}
.game-arrow.left svg {
  transform: scaleX(-1);
}
.game-arrow:hover,
.game-arrow:focus-visible {
  opacity: 1;
  transform: scale(1.12);
}
.game-arrow:active {
  transform: scale(0.95);
}
/* The lobby panels below the logo fade with the slide (the rejoin banner keeps its own entry). */
.game-switch.switching-out ~ .lobby-columns { animation: game-panels-out 0.26s ease-in forwards; }
.game-switch.switching-in ~ .lobby-columns { animation: game-panels-in 0.34s ease-out; }
@keyframes game-panels-out { to { opacity: 0; } }
@keyframes game-panels-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .game-logo,
  .game-switch ~ .lobby-columns { animation: none !important; }
  .game-arrow { transition: none; }
}

/* ---- Pokémon Allstars lobby (src/allstars/client/allstars-app.tsx) ---- */
/* The Allstars background behind the lobby and room panels: Legion's .lobby-box::before, another picture. */
.allstars-lobby .lobby-box::before,
.allstars-prep .lobby-box::before {
  background-image: url("assets/allstars/ui/lobby-bg.webp");
  /* Legion's cover above, against the panels' right edge (the Pokémon are on the art's right), centred vertically */
  background-position-x: calc(var(--bg-x) + var(--bg-area-w) - var(--bg-w));
}
.allstars-play {
  justify-content: space-between;
}
/* Same dark panel as the Legions "No open rooms" row, centred in the play box. */
.allstars-soon {
  margin: auto;
  max-width: 32em;
  padding: 1.6em 2.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  text-align: center;
  background: rgba(45, 51, 75, 0.72);
  border-radius: 8px;
}
.allstars-soon p {
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.allstars-play-footer {
  display: flex;
  justify-content: flex-end;
}

/* Kecleon's gift (D87) on a player's hover card: their pick's item and text */
.kecleon-pick-line .kecleon-pick-icon {
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: middle;
}

/* ---- AFK warning on the room screens (src/client/pages/afk-guard.tsx, both games) ---- */
.afk-warning {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.6em;
  text-align: center;
}
.afk-warning h2 {
  margin: 0;
}
.afk-warning p {
  margin: 0;
}

/* ---- Lobby: credits button, fan-game disclaimer and the credits page (PAC-style) ---- */
/* Credits and the fan-game disclaimer side by side under the news (Legion and Allstars lobbies) */
.lobby-fanline {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.lobby-credits {
  flex: none;
}
.lobby-disclaimer {
  margin: 0;
  font-size: 75%;
  line-height: 1.35;
}
.legion-credits-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(10, 8, 12, 0.45);
}
.legion-credits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(52em, calc(100vw - 2em));
  max-height: calc(100% - 2em);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.5em 1em 0.8em;
  user-select: text;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.legion-credits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.4em;
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}
.legion-credits-head h2 {
  margin: 0;
  font-size: 1.6em;
  text-shadow: 2px 2px 0 black;
}
.legion-credits-body {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.4em;
  font-weight: 500;
  line-height: 1.35;
}
.legion-credits-body h3 {
  margin: 0.9em 0 0.3em;
  font-size: 1.1em;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.legion-credits-body p {
  margin: 0.3em 0;
}
.legion-credits-body a {
  color: #9fd3ff;
}
.legion-credits-list {
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr));
  gap: 0.4em;
}
.legion-credits-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6em;
  align-content: center;
  padding: 0.35em 0.5em;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.legion-credits-list img {
  grid-row: 1 / 5;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.legion-credits-body a.legion-credits-name {
  color: var(--color-fg-primary);
  font-weight: 700;
  text-decoration: none;
}
.legion-credits-role {
  font-size: 85%;
}
.legion-credits-list li > * {
  min-width: 0;
}
.legion-credits-body a.legion-licence {
  white-space: nowrap;
}
.legion-credits-body a.legion-licence {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.4em;
  font-size: 78%;
  font-weight: 600;
  line-height: 1.45;
  vertical-align: 0.08em;
  color: #9fd3ff;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}
.legion-credits-legal {
  margin-top: 1em !important;
  font-size: 78%;
  color: var(--color-fg-secondary);
}

/* ---- Wiki (pages/wiki, D131): PAC's wiki as a window over the lobby / preparation room ---- */
.wiki-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 100%;
}
.wiki-link img {
  width: 1.3em;
  height: 1.3em;
}
.wiki-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  box-sizing: border-box;
  background: rgba(10, 8, 12, 0.45);
}
.wiki {
  width: min(1400px, 100%);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.5em 0.9em 0.7em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.wiki-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}
.wiki-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1.6em;
  text-shadow: 2px 2px 0 black;
}
.wiki-title img {
  width: 1.2em;
  height: 1.2em;
}
.wiki-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.wiki-tabs .bubbly {
  font-size: 100%;
}
.wiki-tabs .bubbly.active {
  background: var(--color-bg-accent);
}
.wiki-search {
  flex: 1;
  min-width: 9em;
  max-width: 22em;
}
.wiki-close {
  margin-left: auto;
  font-size: 100%;
}
.wiki-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.4em;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-tertiary) transparent;
  font-weight: 500;
  line-height: 1.35;
  user-select: text;
}
.wiki-body p {
  margin: 0;
}
.wiki-body h3 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.5em;
  font-size: 1.1em;
  text-shadow: 1px 1px 0 black;
}
.wiki-body h3 .muted {
  font-weight: 500;
  text-shadow: none;
}
.wiki-body a {
  color: #9fd3ff;
}
.wiki-intro {
  margin-bottom: 0.6em !important;
  color: var(--color-fg-secondary);
}
.wiki-portrait {
  width: 40px;
  height: 40px;
  flex: none;
  border: 3px solid var(--color-bg-tertiary);
  border-radius: 8px;
  image-rendering: pixelated;
  background: var(--color-bg-tertiary);
}

/* Index: a grid of entries per slot / kind */
.wiki-group {
  margin-bottom: 0.9em;
}
.wiki-grid {
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
  gap: 6px;
}
.wiki-entry {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.5em;
  font: inherit;
  text-align: left;
  cursor: var(--cursor-hover);
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.wiki-entry:hover {
  transform: translateY(-2px);
  background-color: var(--color-bg-primary);
}
.wiki-entry-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wiki-entry-name {
  font-weight: 600;
}
.wiki-entry-sub {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.wiki-entry-sub .icon-money {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.wiki-entry-evo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  font-size: 80%;
  color: var(--color-fg-secondary);
}
.wiki-entry-evo img {
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  image-rendering: pixelated;
  border-radius: 3px;
}
.wiki-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
  margin-top: 0.15em;
}
.wiki-entry-tags .tag {
  font-size: 72%;
}

/* Detail page: the in-game card on the left, the manual text on the right */
.wiki-pager {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.6em;
}
.wiki-pager .bubbly {
  font-size: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wiki-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1em;
  align-items: start;
}
.wiki-card-col {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 316px;
}
.wiki-card {
  padding: 5px 5px 0;
  overflow: hidden;
}
.wiki-card .detail-card {
  width: auto;
}
.wiki-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wiki-chip {
  font: inherit;
  font-size: 85%;
  color: var(--color-fg-primary);
  background: var(--color-bg-tertiary);
  border: var(--border-thin);
  border-radius: 8px;
  padding: 0.05em 0.45em;
  cursor: var(--cursor-hover);
}
.wiki-chip:hover {
  background: var(--color-bg-secondary);
}
.wiki-chip.active {
  background: var(--color-bg-accent);
}
.wiki-note {
  font-size: 85%;
}
.wiki-text-col {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  min-width: 0;
}
.wiki-name {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.6em;
  font-size: 1.5em;
  text-shadow: 2px 2px 0 black;
}
.wiki-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  font-size: 1.1rem;
  text-shadow: none;
}
.wiki-badges .tag {
  font-size: 75%;
}
.tag.kind-slot {
  background: var(--color-bg-tertiary);
}
.wiki-section {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.wiki-tips {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 0.25em;
}
.wiki-evo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wiki-evo-form {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.7em 0.3em 0.3em;
  font: inherit;
  text-align: left;
  cursor: var(--cursor-hover);
}
.wiki-evo-form > span {
  display: flex;
  flex-direction: column;
}
.wiki-evo-form .muted {
  font-size: 80%;
}
.wiki-evo-form.active {
  border-color: var(--color-fg-gold);
  background: var(--color-bg-primary);
}
.wiki-evo-skill {
  font-size: 85%;
  color: #9fd3ff;
}
.wiki-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.wiki-table {
  border-collapse: collapse;
  font-size: 90%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wiki-table th,
.wiki-table td {
  padding: 0.15em 0.55em;
  text-align: center;
}
.wiki-table th img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.wiki-table thead th {
  background: var(--color-bg-tertiary);
}
.wiki-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.12);
}
.wiki-table tbody tr {
  cursor: var(--cursor-hover);
}
.wiki-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.1);
}
.wiki-table tbody tr.active {
  background: var(--color-bg-accent);
}
.wiki-table-form {
  display: flex;
  align-items: center;
  gap: 0.3em;
  text-align: left !important;
}
.wiki-table-form img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  border-radius: 4px;
}
.wiki-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2em 1em;
}
.wiki-facts dt {
  color: var(--color-fg-secondary);
}
.wiki-facts dd {
  margin: 0;
}
.wiki-section .icon-money,
.wiki-basic .icon-money {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
}

/* How to play / Statuses: one box per topic */
.wiki-basics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26em), 1fr));
  gap: 8px;
  align-items: start;
}
.wiki-basic {
  padding: 0.55em 0.8em 0.7em;
}
.wiki-section-icon {
  width: 1.6em;
  height: 1.6em;
  border-radius: 6px;
  image-rendering: pixelated;
}
.wiki-basic > .muted {
  font-size: 92%;
}
.wiki-draft td {
  text-align: left;
}
.wiki-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.wiki-mini img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 2px solid var(--color-bg-tertiary);
  image-rendering: pixelated;
}
.wiki-mini:hover img {
  border-color: var(--color-fg-gold);
}
.wiki-gifts,
.wiki-bosses,
.wiki-statuses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45em;
}
.wiki-gifts li,
.wiki-bosses li,
.wiki-statuses li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 92%;
}
.wiki-gifts img {
  width: 32px;
  height: 32px;
  flex: none;
  image-rendering: pixelated;
}
.wiki-bosses p {
  margin-top: 0.15em;
  font-size: 95%;
}
.wiki-statuses li {
  padding: 0.35em 0.6em;
  align-items: center;
  background: var(--color-bg-tertiary);
}
.wiki-statuses img {
  width: 26px;
  height: 26px;
  flex: none;
}

/* Small screens (phones sideways): the window edge to edge; narrow ones put the card above the text */
@media (max-width: 760px), (max-height: 520px) {
  .wiki-modal {
    padding: 0;
  }
  .wiki {
    border-radius: 0;
    border-width: 0;
  }
}
@media (max-width: 760px) {
  .wiki-detail {
    grid-template-columns: 1fr;
  }
  .wiki-card-col {
    width: min(316px, 100%);
    justify-self: center;
  }
}
/* Artists: the credits page's rows (.legion-credits-*), inside the page's own scroll */
.wiki-credits.legion-credits-body {
  overflow: visible;
  padding-right: 0;
}
.wiki-credits .legion-credits-list {
  margin: 0;
}

/* Phones draw the page as a 600px-tall PC window (touch.ts): a little bigger text, like the detail cards */
html.touch .wiki-body {
  font-size: 17px;
}
@media (prefers-reduced-motion: reduce) {
  .wiki-entry {
    transition: none;
  }
}

/* ---- Accounts (src/common/accounts/client/ui.tsx): rank badge, trainer card row, account windows ---- */
.bubbly.red {
  background: #e76e55;
  box-shadow:
    inset -6px -6px 0px 0px #8c2022,
    var(--shadow-clickable);
}
.bubbly.red:not([disabled]):hover {
  background: #ce372b;
}
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  margin-right: 0.3em;
  vertical-align: middle;
  font-weight: 700;
  font-size: 90%;
  line-height: 1;
  color: var(--color-fg-primary);
  text-shadow: 1px 1px 0 black;
}
.rank-badge img {
  width: 1.3em;
  height: 1.3em;
}
.account-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-weight: 700;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.account-gold img {
  width: 1.1em;
  height: 1.1em;
}
.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 8, 12, 0.45);
}
.account-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(30em, calc(100vw - 2em));
  max-height: calc(100% - 2em);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.5em 1em 0.8em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding-bottom: 0.4em;
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}
.account-head h2 {
  margin: 0;
  font-size: 1.5em;
  text-shadow: 2px 2px 0 black;
  overflow-wrap: anywhere;
}
.account-close {
  font-size: 100%;
}
.account-body {
  overflow-y: auto;
  padding: 0.5em 0.2em 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.account-tabs {
  display: flex;
  gap: 4px;
}
.account-tabs .bubbly {
  font-size: 100%;
}
.account-tabs .bubbly.active {
  background: var(--color-bg-accent);
}
.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.account-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-weight: 500;
}
.account-form .my-input {
  width: 100%;
  box-sizing: border-box;
}
.account-form > .bubbly {
  align-self: flex-start;
}
.account-inline {
  display: flex;
  gap: 0.4em;
  align-items: center;
}
.account-inline .my-input {
  flex: 1;
  min-width: 0;
}
.account-inline .bubbly {
  font-size: 100%;
  flex: none;
}
.account-hint {
  font-size: 85%;
  font-weight: 400;
}
.account-note {
  margin: 0;
  font-size: 90%;
}
.account-error {
  margin: 0;
  color: var(--color-fg-red);
  font-weight: 600;
}
.account-saved {
  margin: 0;
  color: var(--color-fg-green);
  font-weight: 600;
}
.account-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #9fd3ff;
  text-decoration: underline;
  cursor: var(--cursor-hover);
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
}
.account-row .bubbly {
  font-size: 100%;
}
.account-delete summary {
  cursor: var(--cursor-hover);
  color: var(--color-fg-red);
}
.account-delete p {
  margin: 0.3em 0;
  font-size: 90%;
}
.account-rank {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6em;
}
.account-rank > img {
  width: 3.2em;
  height: 3.2em;
}
.account-rank-name {
  font-size: 115%;
  font-weight: 700;
  text-shadow: 1px 1px 0 black;
}
.account-progress {
  height: 0.5em;
  margin: 0.25em 0;
  border-radius: 6px;
  border: var(--border-thin);
  background: var(--color-bg-secondary);
  overflow: hidden;
}
.account-progress span {
  display: block;
  height: 100%;
  background: var(--color-fg-gold);
}
.account-stats {
  border-collapse: collapse;
  width: 100%;
}
.account-stats th,
.account-stats td {
  padding: 0.2em 0.4em;
  text-align: right;
}
.account-stats th:first-child,
.account-stats td:first-child {
  text-align: left;
}
.account-stats tbody tr {
  background: rgba(0, 0, 0, 0.15);
}
.account-you {
  margin: 0;
  font-weight: 700;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
/* The games side by side, then Ranked / Wins (the profile's switch, in the lobby's colours) with your place */
.leaderboard-games {
  flex-wrap: wrap;
}
.leaderboard-games .bubbly {
  flex: 1 1 auto;
  white-space: nowrap;
}
.leaderboard-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em 0.8em;
}
.leaderboard-bar .account-you {
  margin-left: auto;
}
.pokedex-tabs.leaderboard-kind {
  margin-left: 0;
}
.pokedex-tabs.leaderboard-kind button {
  background: var(--color-bg-secondary);
  color: white;
}
.pokedex-tabs.leaderboard-kind button.on {
  background: var(--color-bg-accent);
  color: white;
}
.leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.leaderboard li {
  display: grid;
  grid-template-columns: 2em auto 1fr auto;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.5em;
}
.leaderboard-place {
  font-weight: 700;
  text-align: right;
}
.leaderboard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-wins {
  font-weight: 600;
}
.account-privacy h3 {
  margin: 0.6em 0 0.2em;
  font-size: 1.05em;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.account-privacy p {
  margin: 0.25em 0;
  line-height: 1.35;
}
.account-reward {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  margin: 0.3em 0;
  font-size: 120%;
}
/* Legions ranked (src/common/accounts/client/ui.tsx) */
.beginner-tag.ranked-tag {
  background: #2f6f3e;
  color: white;
}
.beginner-tag.unranked-tag {
  background: #4a4f5e;
  color: #dfe3ec;
}
.account-ranked {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25em 0.8em;
  margin: 0.2em 0 0.4em;
}
.account-ranked b {
  font-size: 120%;
  text-shadow: 1px 1px 0 black;
}
.account-ranked .ranked-up {
  color: var(--color-fg-green);
}
.account-ranked .ranked-down {
  color: var(--color-fg-red, #ff6b6b);
}
.ranked-now {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-weight: 700;
}
.ranked-now img {
  width: 1.4em;
  height: 1.4em;
}
.ranked-rules {
  padding: 0.3em 0.6em;
  margin-bottom: 0.4em;
}
.ranked-rules summary {
  cursor: pointer;
  font-weight: 700;
}
.ranked-rules p {
  margin: 0.4em 0;
}
.ranked-rules ul {
  margin: 0.4em 0;
  padding-left: 1.2em;
  line-height: 1.35;
}
.ranked-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
  justify-content: center;
}
.ranked-balls img {
  width: 1.6em;
  height: 1.6em;
}
.ranked-places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.8em, 1fr));
  gap: 0.2em;
  margin-top: 0.4em;
  text-align: center;
}
.ranked-places span {
  display: flex;
  flex-direction: column;
}
.account-win {
  font-weight: 700;
  color: var(--color-fg-green);
  text-shadow: 1px 1px 0 black;
}
/* Shop, collections, exploration (src/common/accounts/client/shop-ui.tsx, collection-ui.tsx, explore-ui.tsx) */
.account-panel.wide {
  width: min(46em, calc(100vw - 2em));
}
.account-avatar {
  width: 1.5em;
  height: 1.5em;
  border-radius: 4px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.2);
}
.account-avatar.big {
  width: 3.2em;
  height: 3.2em;
  border-radius: 8px;
}
.account-rank-ball {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}
.shop-sub {
  margin: 0.3em 0 0;
  font-size: 1em;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.lottery-window {
  position: relative;
  overflow: hidden;
  height: 84px;
  border-radius: 10px;
  border: var(--border-thin);
  background: rgba(0, 0, 0, 0.3);
}
.lottery-marker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1px;
  background: var(--color-fg-gold);
  box-shadow: 0 0 6px var(--color-fg-gold);
  z-index: 1;
}
.lottery-track {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  will-change: transform;
}
.lottery-card {
  flex: none;
  width: 60px;
  height: 60px;
  border: 2px solid;
  border-radius: 8px;
  background: var(--color-bg-secondary);
}
.lottery-card img,
.lottery-prize img,
.collection-icon img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 6px;
}
.lottery-card.won {
  box-shadow: 0 0 12px 3px var(--color-fg-gold);
}
.lottery-prize {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em;
  border: 2px solid;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.lottery-prize img {
  width: 64px;
  height: 64px;
}
.lottery-prize-name {
  font-size: 120%;
  font-weight: 700;
  text-shadow: 1px 1px 0 black;
}
.lottery-prize .bubbly {
  font-size: 100%;
}
.dispenser-canvas {
  width: 352px;
  max-width: 100%;
  aspect-ratio: 176 / 170;
  image-rendering: pixelated;
  border-radius: 10px;
}
.ball-bag,
.shop-got {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
  margin: 0;
}
.ball-count {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
.ball-count img,
.ball-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  vertical-align: middle;
}
.collection-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  margin-top: 0.4em;
}
.collection-icon {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  background: var(--color-bg-secondary);
  cursor: var(--cursor-hover);
}
.collection-icon.picked {
  box-shadow: 0 0 0 2px white, 0 0 10px var(--color-fg-gold);
}
.collection-icon.shiny::after {
  content: "★";
  position: absolute;
  top: -4px;
  right: -2px;
  color: #ffe36e;
  font-size: 12px;
  text-shadow: 1px 1px 0 black;
}
.explore-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.explore-map {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: var(--border-thin);
}
.explore-map img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  user-select: none;
}
.explore-spot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  padding: 0;
  border: 2px solid #4a2a10;
  border-radius: 50%;
  background: #ffe95a;
  box-shadow: 0 0 0 0 rgba(255, 233, 90, 0.7);
  animation: explore-spot-pulse 2s infinite;
  cursor: var(--cursor-hover);
}
.explore-spot:hover,
.explore-spot.picked {
  transform: scale(1.5);
  background: white;
}
@keyframes explore-spot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 233, 90, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 233, 90, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 233, 90, 0);
  }
}
.explore-bar .bubbly,
.encounter .bubbly {
  font-size: 100%;
}
.encounter {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.encounter-canvas {
  width: 100%;
  max-width: 640px;
  align-self: center;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  border-radius: 10px;
  touch-action: none;
}
.encounter-msg {
  margin: 0;
  min-height: 1.3em;
  text-align: center;
  font-weight: 600;
}
.encounter-balls {
  display: flex;
  justify-content: center;
  gap: 0.3em;
  flex-wrap: wrap;
}
.ball-pick {
  display: inline-flex;
  align-items: center;
  padding: 0 0.3em 0 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--color-bg-secondary);
  color: var(--color-fg-primary);
  font: inherit;
  font-weight: 700;
  cursor: var(--cursor-hover);
}
.ball-pick img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.ball-pick.picked {
  border-color: var(--color-fg-gold);
}
/* Betting rooms (BetControl, BetTag) */
.bet-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-left: 0.3em;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  background: rgba(45, 51, 75, 0.8);
  font-size: 85%;
  white-space: nowrap;
}
.bet-control {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 90%;
}
.bet-control select {
  padding: 0.2em 0.3em;
}

/* ---- Kecleon's shop (src/common/accounts/client/shop-ui.tsx): keeper and wallet, shelf, counters ---- */
.shop {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.shop-keeper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7em;
}
.shop-kecleon {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  border: 3px solid black;
  border-radius: 12px;
  background: var(--color-bg-secondary);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.shop-bubble {
  position: relative;
  margin: 0;
  padding: 0.55em 0.8em;
  border: 2px solid black;
  border-radius: 12px;
  background: #fffbea;
  color: #2d334b;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: center;
}
.shop-bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right: 10px solid black;
  border-left: 0;
}
.shop-bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right: 8px solid #fffbea;
  border-left: 0;
}
.shop-wallet {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.7em;
  border: 2px solid black;
  border-radius: 12px;
  background: var(--color-bg-tertiary);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.shop-wallet img {
  width: 1.5em;
  height: 1.5em;
}
.shop-wallet-amount {
  min-width: 2.5em;
  font-size: 140%;
  font-weight: 700;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
  font-variant-numeric: tabular-nums;
}
.shop-dev {
  margin-left: 0.2em;
  padding: 0.1em 0.4em;
  border: 1px dashed var(--color-fg-secondary);
  border-radius: 6px;
  background: none;
  color: var(--color-fg-secondary);
  font: inherit;
  font-size: 75%;
  cursor: var(--cursor-hover);
}
/* The shelf: three goods side by side, each a card with its art, name, what it does, price and what you own. */
.shop-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7em;
  padding: 0.7em;
  border-radius: 12px;
  background: linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary) 70%, #3a3f4d 70%);
  border: 2px solid black;
}
.shop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 0.7em 0.6em 0.6em;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: var(--cursor-hover);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.1s, border-color 0.1s;
}
.shop-item:hover,
.shop-item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-fg-gold);
}
.shop-item-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
}
.shop-art {
  max-height: 88px;
  max-width: 100%;
}
.shop-art-balls {
  position: relative;
  display: block;
  width: 120px;
  height: 88px;
}
/* Positions and turns come from BALL_PILE (shop-ui.tsx), in % of the pile, so it scales with the card. */
.shop-art-balls img {
  position: absolute;
  width: 40%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35));
}
.shop-art-map img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  transform: rotate(-8deg);
}
.shop-item-name {
  font-size: 125%;
  font-weight: 700;
  text-shadow: 1px 1px 0 black;
}
.shop-item-pitch {
  flex: 1;
  font-size: 88%;
  font-weight: 500;
  color: var(--color-fg-secondary);
  line-height: 1.3;
}
.shop-item-foot {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
}
.shop-item-per {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.shop-item-have {
  font-size: 80%;
  color: var(--color-fg-secondary);
}
/* A price tag: gold on a dark label; red when you can't afford it. */
.shop-price {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.05em 0.5em 0.05em 0.35em;
  border: 2px solid black;
  border-radius: 8px;
  background: #2d334b;
  color: var(--color-fg-gold);
  font-weight: 700;
  text-shadow: 1px 1px 0 black;
}
.shop-price img {
  width: 1.1em;
  height: 1.1em;
}
.shop-price.short {
  color: var(--color-fg-red);
}
.shop-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.5em;
  border: none;
  background: none;
  color: var(--color-fg-secondary);
  font: inherit;
  cursor: var(--cursor-hover);
}
.shop-back img {
  width: 1em;
  height: 1em;
}
.shop-back:hover {
  color: white;
}
.shop-counter-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
/* A counter: the machine (stage) on the left, the buy box on the right. */
.shop-counter {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(13em, 1fr);
  gap: 0.8em;
  align-items: start;
}
.shop-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
}
.shop-stage .lottery-window {
  align-self: stretch;
}
.shop-buy {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.7em;
}
.shop-qty {
  display: flex;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
}
.shop-qty button {
  flex: 1;
  padding: 0.3em;
  border: none;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
  font: inherit;
  font-weight: 700;
  cursor: var(--cursor-hover);
}
.shop-qty button.on {
  background: var(--color-bg-accent);
  color: white;
}
.shop-buy-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 130%;
}
.shop-buy-button .shop-price {
  font-size: 80%;
}
.shop-short {
  margin: 0;
  color: var(--color-fg-red);
  font-weight: 600;
  font-size: 90%;
}
.shop-have {
  margin: 0;
  font-size: 90%;
  font-weight: 500;
}
.shop-equipped {
  color: var(--color-fg-green);
  font-weight: 700;
}
.shop-explore {
  font-size: 110%;
}
.shop-got {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
}
.shop-map-stage {
  position: relative;
}
.shop-map-preview {
  width: 100%;
  border: 2px solid black;
  border-radius: 10px;
  image-rendering: pixelated;
}
.shop-map-ticket {
  position: absolute;
  right: 4%;
  bottom: -10px;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  transform: rotate(-10deg);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.5));
}
/* Phones: one column everywhere, Kecleon smaller. */
@media (max-width: 640px) {
  .shop-shelf,
  .shop-counter {
    grid-template-columns: 1fr;
  }
  .shop-keeper {
    grid-template-columns: auto 1fr;
  }
  .shop-wallet {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .shop-kecleon {
    width: 56px;
    height: 56px;
  }
  .shop-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    text-align: left;
    align-items: center;
    column-gap: 0.6em;
  }
  .shop-item-art {
    grid-row: span 4;
    height: 64px;
  }
  .shop-art-balls {
    width: 72px;
    height: 53px;
  }
  .shop-art-map img {
    width: 64px;
    height: 64px;
  }
}
/* Short screens (phones in landscape): Kecleon and the art shrink, the pitch goes, so every price shows at once. */
@media (max-height: 520px) {
  .shop {
    gap: 0.4em;
  }
  .shop-kecleon {
    width: 44px;
    height: 44px;
  }
  .shop-bubble {
    min-height: 0;
    padding: 0.3em 0.6em;
    font-size: 90%;
  }
  .shop-shelf {
    padding: 0.4em;
    gap: 0.4em;
  }
  .shop-item {
    padding: 0.4em;
    gap: 0.2em;
  }
  .shop-item-art {
    height: 48px;
  }
  .shop-art {
    max-height: 48px;
  }
  .shop-art-balls {
    width: 66px;
    height: 48px;
  }
  .shop-art-map img {
    width: 48px;
    height: 48px;
  }
  .shop-item-pitch {
    display: none;
  }
  .dispenser-canvas {
    width: 264px;
  }
}
.encounter-warn {
  color: var(--color-fg-red);
  font-weight: 700;
}
/* The shop's odds lists: icon, name with a small second line, the chance in a fixed right column. */
.shop-odds {
  border: 2px solid black;
  border-radius: 10px;
  background: var(--color-bg-tertiary);
  overflow: hidden;
}
.shop-odds-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.3em 0.6em;
  background: #2d334b;
  color: var(--color-fg-secondary);
  font-size: 75%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shop-odds ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-odds li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5em;
  padding: 0.3em 0.6em;
}
.shop-odds li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}
.shop-odds-ball {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.shop-odds-dot {
  justify-self: center;
  width: 12px;
  height: 12px;
  border: 2px solid black;
  border-radius: 50%;
}
.shop-odds-dot.shiny {
  width: auto;
  height: auto;
  border: none;
  color: #ffe36e;
  text-shadow: 1px 1px 0 black;
}
.shop-odds-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 700;
  line-height: 1.15;
}
.shop-odds-name small {
  font-size: 75%;
  font-weight: 500;
  color: var(--color-fg-secondary);
}
.shop-odds-pct {
  min-width: 3.4em;
  text-align: right;
  font-weight: 700;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Exploration: the throw's quality pops over the Pokémon (crisp HTML, not canvas text); the result card at the end. */
.encounter-stage {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 640px;
}
.encounter-stage .encounter-canvas {
  display: block;
  width: 100%;
}
.encounter-label {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  font-size: clamp(22px, 4.5vw, 40px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffd23f;
  text-shadow:
    -2px -2px 0 black,
    2px -2px 0 black,
    -2px 2px 0 black,
    2px 2px 0 black,
    0 4px 0 black;
  animation: encounter-label-pop 1.6s ease-out forwards;
}
.encounter-label.nice {
  color: #b9f56b;
}
.encounter-label.great {
  color: #6cc4ff;
}
.encounter-label.excellent {
  color: #ffd23f;
}
.encounter-label.curve {
  color: #e9a6ff;
}
@keyframes encounter-label-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
  }
  25% {
    transform: translateX(-50%) scale(1);
  }
  75% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(1);
  }
}
.encounter-result {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 0.4em 0.8em;
  padding: 0.6em 0.8em;
}
.encounter-result.caught {
  border-color: var(--color-fg-gold);
}
.encounter-result-mon {
  width: 64px;
  height: 64px;
  border: 2px solid black;
  border-radius: 10px;
  image-rendering: pixelated;
  background: var(--color-bg-tertiary);
}
.encounter-result.fled .encounter-result-mon {
  filter: grayscale(1) opacity(0.6);
}
.encounter-result-text {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.encounter-result-text strong {
  font-size: 125%;
  text-shadow: 1px 1px 0 black;
}
.encounter-new {
  color: var(--color-fg-green);
  font-weight: 700;
}
.encounter-partner {
  font-weight: 700;
  color: var(--color-fg-gold);
}
.encounter-result-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4em;
}
.encounter-result-actions .bubbly {
  font-size: 100%;
}

/* ---- Trainer Pokédex (src/common/accounts/client/profile-ui.tsx): trainer card + Pokédex device ---- */
.trainer-dex {
  display: grid;
  grid-template-columns: minmax(12em, 15em) minmax(0, 1fr);
  gap: 0.8em;
  align-items: start;
}
.trainer-card-big {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 0.9em 0.8em;
  text-align: center;
  background: linear-gradient(var(--color-bg-secondary), var(--color-bg-tertiary));
}
.trainer-settings {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  width: 1.8em;
  height: 1.8em;
  border: 2px solid black;
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  color: var(--color-fg-secondary);
  font-size: 100%;
  cursor: var(--cursor-hover);
}
.trainer-settings:hover {
  color: white;
}
.trainer-avatar-big {
  padding: 0;
  border: 3px solid black;
  border-radius: 16px;
  background: var(--color-bg-primary);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  cursor: var(--cursor-hover);
}
.account-avatar.huge {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 13px;
  background: none;
}
.trainer-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  font-size: 48px;
  font-weight: 800;
  color: var(--color-fg-secondary);
}
.trainer-name-big {
  margin: 0.2em 0 0;
  font-size: 1.5em;
  text-shadow: 2px 2px 0 black;
  overflow-wrap: anywhere;
}
.trainer-rank {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
}
.trainer-rank img {
  width: 1.6em;
  height: 1.6em;
}
.trainer-progress {
  align-self: stretch;
  height: 0.7em;
  border: 2px solid black;
  border-radius: 8px;
  background: #262b38;
  overflow: hidden;
}
.trainer-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(#ffd75a, var(--color-fg-gold));
}
.trainer-progress.small {
  height: 0.5em;
}
.trainer-next {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
/* One row per ladder, in the stat rows' look: the game is the label, the league the headline */
.trainer-leagues {
  align-self: stretch;
  margin: 0.3em 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.trainer-league {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.5em;
  row-gap: 0.1em;
  padding: 0.3em 0.5em;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  text-align: left;
}
.trainer-league img {
  grid-row: 1 / span 3;
  width: 2.6em;
  height: 2.6em;
}
.trainer-league-game,
.trainer-league-points {
  color: var(--color-fg-secondary);
  font-size: 85%;
}
.trainer-league-name {
  grid-column: 2 / span 2;
  font-size: 110%;
  line-height: 1.15;
}
.trainer-league .trainer-progress {
  grid-column: 2 / span 2;
}
.trainer-stats {
  align-self: stretch;
  margin: 0.3em 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.trainer-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.2em 0.5em;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.trainer-stats dt {
  color: var(--color-fg-secondary);
  font-size: 90%;
}
.trainer-stats dd {
  margin: 0;
  font-weight: 700;
}
.trainer-stats small {
  font-weight: 500;
  color: var(--color-fg-secondary);
}
.trainer-gold {
  display: flex;
  align-items: center;
  gap: 0.2em;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.trainer-gold img {
  width: 1.1em;
  height: 1.1em;
}
.trainer-collections {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-top: 0.3em;
}
.trainer-completion > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 90%;
  margin-bottom: 0.15em;
}
/* The Adventure badge case (A97): a dark velvet tray with the eight gym badges. Won badges catch the light (a gloss
   sweeping over the badge's own shape, staggered per badge) and twinkle now and then; the rest are dark silhouettes. */
.badge-case {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35em;
  margin-top: 0.5em;
  padding: 0.45em;
  border: 2px solid black;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, #3a2c55, #1d1530);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.badge-slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 70%);
}
.badge-slot img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: brightness(0) opacity(0.32);
  -webkit-user-drag: none;
  user-select: none;
}
.badge-slot.won img {
  filter: drop-shadow(0 0 4px rgba(255, 226, 140, 0.55)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
/* The gloss: a white band masked to the badge's shape, sliding across it. */
.badge-slot.won::after {
  content: "";
  position: absolute;
  inset: 7%;
  -webkit-mask: var(--badge) center / contain no-repeat;
  mask: var(--badge) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.35) 53%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  animation: badge-gloss 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
  pointer-events: none;
}
/* A four-point star that pops up at the badge's upper right now and then. */
.badge-slot.won::before {
  content: "";
  position: absolute;
  top: 6%;
  right: 8%;
  width: 26%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  background: #fff;
  opacity: 0;
  transform: scale(0.2);
  animation: badge-twinkle 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * 0.3s + 0.9s);
  filter: drop-shadow(0 0 3px rgba(255, 255, 220, 0.9));
  pointer-events: none;
  z-index: 1;
}
@keyframes badge-gloss {
  0% { background-position: 130% 0; }
  45%, 100% { background-position: -30% 0; }
}
@keyframes badge-twinkle {
  0%, 30%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  38% { opacity: 1; transform: scale(1) rotate(25deg); }
  48% { opacity: 0; transform: scale(0.3) rotate(45deg); }
}
.badge-dev {
  position: absolute;
  top: -0.7em;
  right: 0.4em;
  margin: 0;
  background: #1d1530;
}
@media (prefers-reduced-motion: reduce) {
  .badge-slot.won::after,
  .badge-slot.won::before {
    animation: none;
  }
}
/* The Pokémon Adventure partners under the badge case: small tiles (portrait, level, form, a thin EXP bar), ★ for a
   shiny one, highest level first; a long list scrolls inside the card. */
.partner-case {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin-top: 0.4em;
}
.partner-case-head {
  display: flex;
  justify-content: space-between;
  font-size: 90%;
}
.partner-none {
  margin: 0;
  font-size: 85%;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.2em, 1fr));
  gap: 0.3em;
  max-height: 15em;
  overflow-y: auto;
  padding: 0.3em;
  border: 2px solid black;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}
.partner-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  min-width: 0;
  padding: 0.2em 0.2em 0.3em;
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  font-size: 80%;
}
.partner-tile.shiny {
  box-shadow: inset 0 0 0 2px var(--color-fg-gold);
}
.partner-tile img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
}
.partner-star {
  position: absolute;
  top: 0.1em;
  right: 0.25em;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.partner-lv {
  font-weight: 700;
}
.partner-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-fg-secondary);
}
.partner-exp {
  align-self: stretch;
  height: 4px;
  border-radius: 2px;
  background: #262b38;
  overflow: hidden;
}
.partner-exp span {
  display: block;
  height: 100%;
  background: #5ab4ff;
}
@media (max-height: 520px) {
  .partner-grid {
    max-height: 8em;
  }
}
/* The Pokédex device: a red shell with the big lens and three lights, a dark screen inside. */
.pokedex-device {
  border: 3px solid black;
  border-radius: 16px;
  background: linear-gradient(#e0434a, #b8262e);
  box-shadow:
    0 5px 0 #6e1218,
    0 8px 18px rgba(0, 0, 0, 0.35);
  padding: 0.5em 0.6em 0.7em;
  min-width: 0;
}
.pokedex-top {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.2em 0.5em;
}
.pokedex-lens {
  width: 34px;
  height: 34px;
  border: 3px solid white;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #bfe8ff, #2f9be8 45%, #165a99);
  box-shadow: 0 0 0 2px black;
}
.pokedex-dot {
  width: 12px;
  height: 12px;
  border: 2px solid black;
  border-radius: 50%;
}
.pokedex-dot.red {
  background: #ff6b6b;
}
.pokedex-dot.yellow {
  background: #ffd84a;
}
.pokedex-dot.green {
  background: #6bdc6b;
}
.pokedex-tabs {
  margin-left: auto;
  display: flex;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
}
.pokedex-tabs button {
  padding: 0.25em 0.8em;
  border: none;
  background: #8c1c23;
  color: #ffd0d3;
  font: inherit;
  font-weight: 700;
  cursor: var(--cursor-hover);
}
.pokedex-tabs button.on {
  background: white;
  color: #b8262e;
}
.pokedex-screen {
  border: 3px solid black;
  border-radius: 10px;
  background-color: #263646;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 12px 12px;
  padding: 0.6em;
  min-height: 18em;
  max-height: min(60vh, 34em);
  overflow-y: auto;
}
.dex-page {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.dex-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.dex-count b {
  font-size: 130%;
  color: var(--color-fg-gold);
  text-shadow: 1px 1px 0 black;
}
.dex-shinies {
  margin-left: 0.5em;
  color: #ffe36e;
  font-weight: 700;
}
.dex-filter button {
  padding: 0.2em 0.7em;
  font-size: 90%;
}
.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}
.dex-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  padding: 0.3em 0.2em 0.35em;
  border: 2px solid #121a24;
  border-radius: 10px;
  background: #1b2633;
  color: var(--color-fg-secondary);
  font: inherit;
  cursor: var(--cursor-hover);
  transition:
    transform 0.1s,
    border-color 0.1s;
}
.dex-cell.caught {
  background: #2f4357;
  color: white;
}
.dex-cell:hover,
.dex-cell.open {
  transform: translateY(-2px);
  border-color: var(--color-fg-gold);
}
.dex-cell .dex-no {
  align-self: flex-start;
  font-size: 72%;
  font-weight: 700;
  color: var(--color-fg-secondary);
}
.dex-star {
  position: absolute;
  top: 2px;
  right: 5px;
  color: #ffe36e;
  text-shadow: 1px 1px 0 black;
}
.dex-cell-sprite {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 56px;
}
.dex-sprite {
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
/* Not caught: the silhouette only. */
.dex-sprite.hidden {
  filter: brightness(0) opacity(0.55);
}
.dex-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 80%;
  font-weight: 700;
}
.dex-empty {
  text-align: center;
  padding: 2em 0;
}
.dex-detail {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 0.8em;
  border: 2px solid black;
  border-radius: 12px;
  background: linear-gradient(#3b5168, #2f4357);
}
.dex-detail-sprite {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100px;
  background: radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.35) 0 18%, transparent 19%);
}
.dex-detail-text {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.dex-detail-no {
  font-size: 85%;
  color: var(--color-fg-secondary);
}
.dex-detail-text strong {
  font-size: 150%;
  text-shadow: 2px 2px 0 black;
}
.dex-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.dex-type {
  padding: 0.05em 0.6em;
  border: 2px solid black;
  border-radius: 999px;
  color: white;
  font-size: 85%;
  font-weight: 700;
  text-transform: capitalize;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.dex-type.shiny {
  background: #3a3f4d;
  color: #ffe36e;
}
.dex-detail-close {
  position: absolute;
  top: 0.3em;
  right: 0.4em;
  border: none;
  background: none;
  color: var(--color-fg-secondary);
  font-size: 110%;
  cursor: var(--cursor-hover);
}
.dex-settings {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
/* Narrow windows: the card on top, the Pokédex under it. Short ones (phones in landscape): a slimmer card. */
@media (max-width: 700px) {
  .trainer-dex {
    grid-template-columns: 1fr;
  }
}
@media (max-height: 520px) {
  .trainer-dex {
    grid-template-columns: minmax(10em, 12em) minmax(0, 1fr);
  }
  .account-avatar.huge,
  .trainer-avatar-empty {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  .trainer-name-big {
    font-size: 1.2em;
  }
  .trainer-stats > div {
    padding: 0.1em 0.4em;
  }
  .pokedex-screen {
    min-height: 0;
    max-height: calc(100vh - 140px);
  }
  .trainer-card-big {
    font-size: 85%;
    padding: 0.5em;
    gap: 0.25em;
  }
  .trainer-rank span,
  .trainer-stats dd {
    white-space: nowrap;
  }
  .trainer-stats small {
    display: none;
  }
  .pokedex-lens {
    width: 24px;
    height: 24px;
  }
}

/* ---- The lobby trainer card (src/common/accounts/client/ui.tsx TrainerCard): a quick look at your profile ---- */
.tc {
  gap: 0.55em;
}
.tc-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75em;
  padding: 0.15em 0.1em 0.3em;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.tc-main {
  cursor: var(--cursor-hover);
  border-radius: 12px;
}
button.tc-main:hover .tc-avatar {
  border-color: var(--color-fg-gold);
}
.tc-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 3px solid black;
  border-radius: 16px;
  background: var(--color-bg-secondary);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: border-color 0.1s;
}
.tc-avatar > img:first-child,
.tc-avatar > .ditto-icon {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  image-rendering: pixelated;
}
.tc-rank {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 30px;
  height: 30px;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.6));
}
.tc-id {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
}
.tc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 2px 2px 0 black;
}
.tc-level {
  font-size: 85%;
  color: var(--color-fg-secondary);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.tc-bar {
  height: 0.55em;
  border: 2px solid black;
  border-radius: 6px;
  background: #262b38;
  overflow: hidden;
}
.tc-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(#ffd75a, var(--color-fg-gold));
}
.tc-name-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 110%;
  font-weight: 700;
}
.tc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3em;
}
.tc-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  min-width: 0;
  padding: 0.2em 0.25em;
  border: 2px solid rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  background: rgba(20, 24, 34, 0.55);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 1px 1px 0 black;
}
.tc-stat img {
  width: 1.15em;
  height: 1.15em;
}
.tc-stat.gold {
  color: var(--color-fg-gold);
}
.tc-pitch {
  margin: 0;
  font-size: 88%;
  line-height: 1.3;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.tc-actions {
  display: flex;
  gap: 0.35em;
}
.tc-actions .bubbly {
  flex: 1;
  font-size: 100%;
}
.tc-actions .tc-icon-button {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0.15em 0.55em 0.3em 0.45em;
}
.tc-icon-button img {
  width: 1.35em;
  height: 1.35em;
  filter: brightness(0) invert(1) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5));
}
@media (max-height: 650px) {
  .tc-avatar {
    width: 52px;
    height: 52px;
  }
  .tc-rank {
    width: 24px;
    height: 24px;
    right: -8px;
    bottom: -8px;
  }
  .tc-name {
    font-size: 1.15em;
  }
  .tc-stat {
    padding: 0.1em 0.35em;
    font-size: 88%;
  }
  .tc-pitch {
    display: none;
  }
}
/* The room's Ditto colour row (pages/preparation.tsx): your colour, the ones other trainers have are dimmed. */
.prep-ditto-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.prep-ditto-label {
  flex: none;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.prep-ditto-row .color-picker {
  flex: 1;
  max-width: 26em;
}
.color-swatch.taken {
  opacity: 0.3;
  cursor: not-allowed;
}
/* The icon lottery's red ticket on the shelf (a 32 px sprite, scaled in whole pixels). */
.shop-art-ticket img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  transform: rotate(6deg);
}
@media (max-height: 520px), (max-width: 640px) {
  .shop-art-ticket img {
    width: 48px;
    height: 48px;
  }
}

/* Murkrow line's hire buttons (war-chest-info.tsx) */
.chest-bodies {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.chest-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 3px;
  line-height: 1.1;
}
.chest-body img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.chest-body small {
  font-size: 0.75em;
  opacity: 0.85;
  white-space: nowrap;
}
html.touch .tower-detail .chest-body {
  min-height: 3.6em;
}