/* Beagle Bedlam: one pixel material for menus, HUD and touch controls.
   Frames, discs and textures are drawn by src/art.js and handed over as CSS variables
   (--fr-*, --disc-*, --tex-*); --u is one art pixel and --t* are pixel-font sizes, both
   snapped to whole device pixels by src/main.js. */
:root {
  --ink: #2b1d2e;
  --ink2: #4b3445;
  --plum: #3c2e4b;
  --cream: #fffaf0;
  --paper2: #fbecd2;
  --sun: #f5b53d;
  --gold-hi: #ffdb6e;
  --gold-dk: #8f5a12;
  --mint: #38c785;
  --red: #ec5a50;
  --purple: #6249a6;
  --green-dk: #2a7a45;
  --font: 'BB Pixel', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #17101f;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Fixed, padded by the device safe areas; main.js fits the game inside the padding. */
body {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-color: #17101f;
  background-image: var(--tex-dither);
}

button {
  touch-action: manipulation;
  font-family: var(--font);
}

/* Input-method specific text: #app.touch-ui is set by touch.js. */
#app.touch-ui .kb-only,
#app.touch-ui kbd {
  display: none !important;
}
#app:not(.touch-ui) .touch-only {
  display: none !important;
}

#app {
  position: relative;
  container-type: size;
  box-shadow: 0 0 0 3px #0e0913, 0 10px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  font-size: var(--t15);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

canvas {
  image-rendering: pixelated;
}

/* ---------- pixel frames (9-slice images from art.js) ---------- */
.panel,
.char,
.card,
.btn,
.mute,
kbd,
.phone,
.facts div,
.callout,
.kit .chip,
.snack,
.anai-info,
.visit-info,
.shop,
.card .key,
.tb .cnt,
.tb.anai .tag,
.tb.pause,
#rotate {
  border-style: solid;
  image-rendering: pixelated;
  background-clip: padding-box;
}
/* A: lip 0 + drop shadow */
.panel {
  border-width: calc(3 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u)) calc(3 * var(--u));
  border-image: var(--fr-panel) 3 4 5 3 stretch;
}
/* B: 2 px lip + drop shadow */
.char,
.card,
.btn,
.mute,
.tb.pause,
#rotate {
  border-width: calc(3 * var(--u)) calc(4 * var(--u)) calc(7 * var(--u)) calc(3 * var(--u));
  border-image: var(--fr-btn) 3 4 7 3 stretch;
  background-color: #ffffff;
}
/* C: flat info frames */
.phone,
.facts div,
.callout,
.kit .chip,
.snack,
.anai-info,
.visit-info,
.shop,
.card .key,
.tb .cnt,
.tb.anai .tag {
  border-width: calc(3 * var(--u));
  border-image: var(--fr-tint-gold) 3 stretch;
}

/* ---------- overlay screens ---------- */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t15);
  line-height: 1.3;
  background-color: rgba(24, 14, 34, 0.5);
  background-image: var(--tex-dither);
  background-size: calc(2 * var(--u)) calc(2 * var(--u));
  image-rendering: pixelated;
}
#overlay.hidden {
  display: none;
}
#overlay > .panel {
  animation: panel-in 0.18s steps(3) both;
}
@keyframes panel-in {
  from {
    transform: translateY(calc(8 * var(--u)));
  }
}

.panel {
  position: relative;
  background-color: var(--cream);
  background-image: var(--img-clip), var(--tex-paper);
  background-repeat: no-repeat, repeat;
  background-position: top center, 0 0;
  background-size: calc(30 * var(--u)) calc(10 * var(--u)), calc(16 * var(--u)) calc(16 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u));
  width: 62%;
  max-height: 94%;
  overflow: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
.panel.small {
  width: 42%;
}
.panel.wide {
  width: 84%;
}
.panel h2 {
  margin: calc(1 * var(--u)) 0 calc(3 * var(--u));
  font-size: var(--t3);
  font-weight: normal;
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 var(--u) 0 #efd5aa;
}
.panel h2.win {
  color: var(--green-dk);
  text-shadow: 0 var(--u) 0 #b7e2c0;
}
.panel h2.lose {
  color: #bd3a45;
  text-shadow: 0 var(--u) 0 #f3bcae;
}
.kicker {
  font-size: var(--t15);
  letter-spacing: var(--u);
  text-transform: uppercase;
  color: var(--gold-dk);
}
.blurb,
.sub,
.quip {
  margin: var(--u) 0 calc(4 * var(--u));
}
.quip {
  font-size: var(--t15);
  color: #6b4f62;
}
/* pixel "bold": the glyph doubled one font pixel (0.1em) to the right */
b {
  font-weight: normal;
  text-shadow: 0.1em 0 0 currentColor;
  letter-spacing: 0.1em;
}

kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 calc(1 * var(--u));
  margin: 0 calc(0.5 * var(--u));
  border-width: calc(3 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u));
  border-image: var(--fr-key) 3 3 4 stretch;
  background-color: #ffffff;
  font-family: var(--font);
  font-size: var(--t1);
  line-height: 1.2;
  vertical-align: middle;
  color: var(--ink);
}

.btn {
  display: block;
  margin: calc(4 * var(--u)) auto 0;
  min-width: 13em;
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  font-size: var(--t2);
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
}
.btn.primary {
  border-image-source: var(--fr-gold);
  background-color: #f5b53d;
  text-shadow: 0 var(--u) 0 #ffdb6e;
}
.btn:active,
.btn.down {
  border-image-source: var(--fr-btn-down);
}
.btn.primary:active {
  border-image-source: var(--fr-gold-down);
}
@media (hover: hover) {
  .btn:hover,
  .char:hover,
  .card:hover {
    filter: brightness(1.06);
  }
}

.mute {
  margin-top: calc(4 * var(--u));
  padding: var(--u) calc(4 * var(--u));
  font-size: var(--t15);
  color: #5c4a66;
  cursor: pointer;
}
#app.touch-ui .mute {
  min-height: 44px;
}

/* title */
.title-panel {
  width: 76%;
  padding-top: calc(10 * var(--u));
}
.title-panel .controls {
  margin-top: calc(4 * var(--u));
  line-height: 1.5;
}
.title-panel .foot {
  margin-top: var(--u);
}
.logo {
  font-size: var(--t5);
  line-height: 1;
  margin: 0 0 calc(2 * var(--u));
  white-space: nowrap;
}
.logo span {
  display: inline-block;
  text-shadow:
    var(--u) 0 0 var(--ink),
    calc(-1 * var(--u)) 0 0 var(--ink),
    0 var(--u) 0 var(--ink),
    0 calc(-1 * var(--u)) 0 var(--ink),
    var(--u) var(--u) 0 var(--ink),
    calc(-1 * var(--u)) var(--u) 0 var(--ink),
    var(--u) calc(-1 * var(--u)) 0 var(--ink),
    calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--ink),
    0 calc(3 * var(--u)) 0 var(--ink),
    var(--u) calc(3 * var(--u)) 0 var(--ink),
    calc(-1 * var(--u)) calc(3 * var(--u)) 0 var(--ink);
}
.logo .l1 {
  color: #f0a75a;
}
.logo .l2 {
  color: #ff6b5e;
  margin-left: 0.25em;
  transform: rotate(-4deg);
  animation: logo-bob 1.6s steps(2) infinite;
}
@keyframes logo-bob {
  50% {
    transform: rotate(-4deg) translateY(calc(-1 * var(--u)));
  }
}
.tag {
  margin: calc(2 * var(--u)) 0 calc(4 * var(--u));
  font-size: var(--t15);
}
.chars {
  display: flex;
  gap: calc(10 * var(--u));
  justify-content: center;
  padding-top: calc(4 * var(--u));
  margin-top: calc(8 * var(--u));
}
.char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9em;
  padding: var(--u) calc(2 * var(--u)) calc(3 * var(--u));
  font-size: var(--t15);
  color: var(--ink);
  cursor: pointer;
}
.char canvas {
  width: 6.2em;
  height: 6.2em;
}
.char b {
  font-size: var(--t2);
}
.char span {
  color: #7a6a5a;
}
.char.selected {
  border-image-source: var(--fr-card-on);
  background-color: #fff1c4;
  transform: translateY(calc(-2 * var(--u)));
}
.char.selected::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-11 * var(--u));
  width: calc(11 * var(--u));
  height: calc(9 * var(--u));
  margin-left: calc(-5.5 * var(--u));
  background: var(--img-arrow) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: arrow-bob 0.8s steps(2) infinite;
}
@keyframes arrow-bob {
  50% {
    transform: translateY(calc(2 * var(--u)));
  }
}
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u) calc(8 * var(--u));
  margin: calc(6 * var(--u)) auto var(--u);
  max-width: 44em;
  font-size: var(--t15);
  text-align: left;
  color: #4b3445;
}
.controls.compact {
  display: block;
  text-align: center;
}
.foot {
  margin-top: calc(3 * var(--u));
  font-size: var(--t15);
  color: #6b5b7b;
}

/* intro */
.phone {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin: calc(2 * var(--u)) auto calc(4 * var(--u));
  max-width: 30em;
  padding: var(--u) calc(4 * var(--u));
  border-image-source: var(--fr-tint-blue);
  background-color: #e3f0ff;
  text-align: left;
}
.phone .mom {
  flex: none;
  width: 2.6em;
  height: 2.6em;
  border: var(--u) solid var(--ink);
  background: #ffa8c6;
  color: #ffffff;
  font-size: var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset var(--u) var(--u) 0 #ffe0ea, inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 #ec6f9f;
}
.facts {
  display: flex;
  justify-content: center;
  gap: calc(3 * var(--u));
  flex-wrap: wrap;
}
.facts div {
  border-image-source: var(--fr-tint-gold);
  background-color: #fff1c4;
  padding: 0 calc(4 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 5.5em;
}
.facts b {
  font-size: var(--t1);
  color: var(--gold-dk);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) / 2);
  text-shadow: none;
}
.facts span {
  font-size: var(--t2);
}
.callout {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin: calc(4 * var(--u)) auto var(--u);
  max-width: 36em;
  padding: var(--u) calc(4 * var(--u));
  border-image-source: var(--fr-tint-coral);
  background-color: #ffe6de;
  text-align: left;
}
.callout.gold {
  border-image-source: var(--fr-tint-gold);
  background-color: #fff1c4;
}
.callout canvas {
  flex: none;
  width: 5.6em;
  height: 4.4em;
}
.kit {
  margin: calc(4 * var(--u)) auto var(--u);
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--u));
  justify-content: center;
  align-items: center;
  font-size: var(--t15);
}
.kit.muted {
  color: #8a7a6a;
}
.kit .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--u);
  padding: 0 calc(3 * var(--u)) 0 0;
  border-image-source: var(--fr-tint-blue);
  background-color: #e3f0ff;
}
.kit .chip canvas {
  width: 1.8em;
  height: 1.8em;
}
.scoring {
  margin-top: calc(4 * var(--u));
  font-size: var(--t1);
  color: #6b5b7b;
}
.snacks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--u) calc(3 * var(--u));
  margin: calc(3 * var(--u)) auto 0;
  max-width: 50em;
  font-size: var(--t15);
}
.snacks-title {
  color: var(--green-dk);
}
.snack {
  display: inline-flex;
  align-items: center;
  padding: 0 calc(4 * var(--u)) 0 0;
  border-image-source: var(--fr-tint-green);
  background-color: #e4f7e7;
}
.snack canvas {
  width: 2em;
  height: 2em;
}
.anai-info,
.visit-info,
.shop {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin: calc(3 * var(--u)) auto 0;
  max-width: 44em;
  padding: var(--u) calc(4 * var(--u));
  font-size: var(--t15);
  text-align: left;
}
.anai-info,
.shop {
  border-image-source: var(--fr-tint-gold);
  background-color: #fff1c4;
}
.visit-info {
  border-image-source: var(--fr-tint-purple);
  background-color: #f1e5ff;
}
.anai-info canvas,
.visit-info canvas,
.shop canvas {
  flex: none;
  width: 2.4em;
  height: 2.4em;
}
.shop-text {
  flex: 1;
}
.shop-why {
  margin-top: var(--u);
  color: #b0402f;
}
.btn.shop-btn {
  flex: none;
  min-width: 0;
  margin: 0;
  font-size: var(--t15);
  padding: var(--u) calc(5 * var(--u));
}
.btn.shop-btn:not(:disabled) {
  border-image-source: var(--fr-gold);
  background-color: #f5b53d;
}
#app.touch-ui .btn.shop-btn {
  min-height: 44px; /* Apple HIG touch target, even on the smallest iPads */
}
.btn.shop-btn:disabled {
  border-image-source: var(--fr-off);
  background-color: #fbecd2;
  color: #8a7a6a;
  cursor: default;
}

/* intro: wide layout; the start button stays visible even if the panel scrolls */
.panel.intro {
  padding-top: calc(11 * var(--u));
}
.panel.intro h2 {
  margin: 0 0 var(--u);
}
.intro-top {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(4 * var(--u));
}
.intro-top .phone {
  flex: 1;
  max-width: 28em;
  margin: 0;
}
.dogs-line {
  margin-top: calc(3 * var(--u));
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(3 * var(--u));
  margin-top: calc(3 * var(--u));
  text-align: left;
}
.info-grid.n2 {
  grid-template-columns: 1fr 1fr;
}
.info-grid.n1 {
  grid-template-columns: 1fr;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}
.info-grid > * {
  margin: 0 !important;
  max-width: none !important;
}
.info-grid .callout canvas {
  width: 4.2em;
  height: 3.3em;
}
.go-bar {
  position: sticky;
  bottom: calc(-7 * var(--u));
  margin: calc(2 * var(--u)) calc(-10 * var(--u)) calc(-7 * var(--u));
  padding: calc(3 * var(--u)) 0 calc(6 * var(--u));
  background: linear-gradient(rgba(255, 250, 240, 0), var(--cream) 35%);
}
.go-bar .btn {
  margin-top: 0;
}

/* results */
.stars {
  font-size: var(--t5);
  line-height: 1;
}
.star {
  display: inline-block;
  color: #e2d6c4;
  margin: 0 calc(1 * var(--u));
  text-shadow: var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 var(--ink), 0 calc(-1 * var(--u)) 0 var(--ink), 0 calc(2 * var(--u)) 0 var(--ink);
}
.star.on {
  color: #ffdb6e;
  animation: star-pop 0.5s steps(3) both;
}
.star.on:nth-child(2) {
  animation-delay: 0.18s;
}
.star.on:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes star-pop {
  from {
    transform: scale(0.4) translateY(calc(4 * var(--u)));
  }
  60% {
    transform: scale(1.3);
  }
}
.breakdown {
  margin: calc(3 * var(--u)) auto calc(3 * var(--u));
  border-collapse: collapse;
  min-width: 62%;
  font-size: var(--t15);
}
.breakdown td {
  padding: calc(1 * var(--u)) calc(4 * var(--u));
  text-align: left;
  background: linear-gradient(90deg, #d6ae7b 50%, transparent 0) bottom left / calc(4 * var(--u)) var(--u) repeat-x;
}
.breakdown td:not(:first-child) {
  text-align: right;
}
.breakdown .n {
  color: #8a7a6a;
  font-size: var(--t1);
}
.breakdown .pos {
  color: #23946a;
}
.breakdown .neg {
  color: #c2413b;
}
.breakdown tr.total td {
  border-top: var(--u) solid var(--ink);
  background: #fff1c4;
  font-size: var(--t2);
}
/* Rows tally in one after another, then the total lands (opacity only: no layout or
   scroll-size change while animating). */
.breakdown tr {
  animation: row-in 0.24s steps(3) both;
}
.breakdown tr:nth-child(2) {
  animation-delay: 0.1s;
}
.breakdown tr:nth-child(3) {
  animation-delay: 0.2s;
}
.breakdown tr:nth-child(4) {
  animation-delay: 0.3s;
}
.breakdown tr:nth-child(5) {
  animation-delay: 0.4s;
}
.breakdown tr:nth-child(n + 6) {
  animation-delay: 0.5s;
}
.breakdown tr.total {
  animation: total-in 0.36s steps(3) 0.6s both;
}
@keyframes row-in {
  from {
    opacity: 0;
  }
}
@keyframes total-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: brightness(1.18);
  }
}

/* upgrade cards: helper badges */
.cards {
  display: flex;
  gap: calc(6 * var(--u));
  justify-content: center;
  margin: calc(4 * var(--u)) 0 calc(2 * var(--u));
}
.card {
  position: relative;
  flex: 1;
  max-width: 15em;
  padding: calc(3 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  font-size: var(--t15);
  color: var(--ink);
  border-image-source: var(--fr-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card canvas {
  width: 5.5em;
  height: 5.5em;
  margin-bottom: var(--u);
}
.card b {
  font-size: var(--t2);
  line-height: 1.1;
}
.card .lvl {
  margin-top: var(--u);
  font-size: var(--t1);
  color: var(--gold-dk);
  text-transform: uppercase;
  letter-spacing: calc(var(--u) / 2);
}
.card p {
  margin: calc(2 * var(--u)) 0 0;
}
.card .key {
  position: absolute;
  top: calc(-5 * var(--u));
  left: calc(-5 * var(--u));
  width: 1.8em;
  height: 1.8em;
  border-image-source: var(--fr-night);
  background-color: #33263f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app:not(.touch-ui) .card.focused,
.card:active {
  border-image-source: var(--fr-card-on);
  background-color: #fff1c4;
  transform: translateY(calc(-2 * var(--u)));
}
#app:not(.touch-ui) .card.focused::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-12 * var(--u));
  width: calc(11 * var(--u));
  height: calc(9 * var(--u));
  margin-left: calc(-5.5 * var(--u));
  background: var(--img-arrow) center / 100% 100% no-repeat;
  transform: rotate(180deg);
  image-rendering: pixelated;
}

/* ---------- touch controls (positions in % of the 1024x640 game, sizes in cqw) ---------- */
#touch {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
#app.touch-ui[data-screen='play'] #touch {
  display: block;
}
#touch [hidden] {
  display: none !important;
}
.tb {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  border: none;
  background: transparent center top / 100% 100% no-repeat;
  image-rendering: pixelated;
  color: #fff;
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
}
.tb:active,
.tb.held {
  transform: translateY(0.25cqw);
}
/* In the HUD bar between the score and the clock (x 820-870, y 4-54). */
.tb.pause {
  left: 80.08%;
  top: 0.6%;
  width: 4.9cqw;
  height: 4.9cqw;
  border-width: calc(3 * var(--u));
  border-image: var(--fr-night) 3 stretch;
  background-color: #33263f;
  flex-direction: row;
  gap: 0.55cqw;
}
.tb.pause i {
  display: block;
  width: 0.7cqw;
  height: 2.2cqw;
  background: #fff;
  box-shadow: 0 calc(var(--u)) 0 #9e83a8;
}
/* Big context button: centre (928, 546), diameter 132. */
.tb.action {
  left: 84.18%;
  top: 75%;
  width: 12.9cqw;
  height: 12.9cqw;
  background-image: var(--disc-action);
  opacity: 0.78;
}
.tb.action.ready {
  background-image: var(--disc-action-ready);
  opacity: 1;
  animation: tb-pulse 0.8s steps(1) infinite;
}
.tb.action.held,
.tb.action:active {
  background-image: var(--disc-action-down);
}
.tb.action .lbl {
  font-size: 2cqw;
  line-height: 1.05;
  margin-top: -0.6cqw;
  text-shadow: 0 0.2cqw 0 #1d5c3c, 0.2cqw 0 0 #1d5c3c, -0.2cqw 0 0 #1d5c3c, 0 -0.2cqw 0 #1d5c3c;
}
.tb.action .sub {
  margin-top: 0.3cqw;
  font-size: 1.1cqw;
  opacity: 0.92;
  text-shadow: 0 0.15cqw 0 #1d5c3c;
}
@keyframes tb-pulse {
  50% {
    background-image: var(--disc-action-glow);
  }
}
/* Gadgets on an arc around the action button (diameter 76). */
.tb.gadget {
  width: 7.4cqw;
  height: 7.4cqw;
  background-image: var(--disc-gadget);
}
.tb.gadget.held,
.tb.gadget:active {
  background-image: var(--disc-gadget-down);
}
.tb.gadget canvas,
.tb.anai canvas {
  width: 4.4cqw;
  height: 4.4cqw;
  margin-top: -0.4cqw;
}
.tb .cnt {
  position: absolute;
  top: -0.6cqw;
  right: -0.6cqw;
  min-width: 2.6cqw;
  height: 2.6cqw;
  padding: 0 0.2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-image-source: var(--fr-night);
  background-color: #33263f;
  color: #ffffff;
  font-size: 1.4cqw;
  line-height: 1;
}
.tb.gadget.empty {
  opacity: 0.45;
}
.tb.g1 {
  left: 75.78%;
  top: 79.38%;
}
.tb.g2 {
  left: 79%;
  top: 66.72%;
}
.tb.g3 {
  left: 86.91%;
  top: 61.56%;
}
/* Anai to the Rescue: gold special button left of the gadget arc, centre (739, 460). */
.tb.anai {
  left: 68.5%;
  top: 66%;
  width: 7.4cqw;
  height: 7.4cqw;
  background-image: var(--disc-anai);
}
.tb.anai.held,
.tb.anai:active {
  background-image: var(--disc-anai-down);
}
.tb.anai .tag {
  position: absolute;
  bottom: -1.2cqw;
  padding: 0 0.5cqw;
  border-image-source: var(--fr-gold-tag);
  background-color: #d0891f;
  color: #ffffff;
  font-size: 1.2cqw;
  line-height: 1.3;
  letter-spacing: 0.1cqw;
}
.tb.anai .cnt {
  border-image-source: var(--fr-gold-tag);
  background-color: #d0891f;
}
.tb.anai.empty {
  opacity: 0.55;
  filter: grayscale(0.75);
}
/* A visit was just spent: the badge pops and "-1" floats off the button. */
.tb.anai.spend .cnt {
  animation: cnt-pop 0.5s steps(4);
}
.tb.anai.spend::after {
  content: '-1';
  position: absolute;
  top: -1cqw;
  left: 50%;
  margin-left: -1.2cqw;
  font-size: 1.8cqw;
  color: #ffdb6e;
  text-shadow: 0.2cqw 0 0 #2b1d2e, -0.2cqw 0 0 #2b1d2e, 0 0.2cqw 0 #2b1d2e, 0 -0.2cqw 0 #2b1d2e;
  animation: spend-float 0.8s steps(6) forwards;
  pointer-events: none;
}
@keyframes cnt-pop {
  50% {
    transform: scale(1.6);
  }
}
@keyframes spend-float {
  to {
    transform: translateY(-3cqw);
    opacity: 0;
  }
}

/* Portrait hint for touch devices (the game is landscape-first). */
#rotate {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%);
  max-width: 90vw;
  padding: 6px 14px;
  border-width: 6px 8px 14px 6px;
  border-image: var(--fr-gold) 3 4 7 3 stretch;
  background-color: #f5b53d;
  font-size: 20px;
  text-align: center;
}
@media (orientation: portrait) {
  html.touch-ui #rotate {
    display: block;
  }
}

/* Less motion when the system asks for it. */
@media (prefers-reduced-motion: reduce) {
  #overlay > .panel,
  .logo .l2,
  .char.selected::before,
  .star.on,
  .breakdown tr,
  .tb.action.ready {
    animation: none;
  }
}