/* Point mode (ui/field-ui.js): aiming, placed powers, hero moves. */
.app.pointing #game canvas { cursor: crosshair; }

/* Small buttons in the animal panel: aim and move. */
.tp-mini {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--glass); border: 1.5px solid var(--glass-line); color: var(--text);
}
.tp-mini svg { width: 16px; height: 16px; }
.tp-mini[disabled] { opacity: .55; cursor: default; }

/* Replay viewer bar (ui/replay-ui.js) and leaderboard Watch buttons. */
.replay-bar {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--gap) + var(--safe-t) + 52px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 999px;
  background: var(--glass-strong); border: 2px solid var(--glass-line); box-shadow: var(--shadow);
  max-width: calc(100% - 2 * var(--gap));
}
.replay-bar[hidden], .app[data-screen="menu"] .replay-bar { display: none; }
.rp-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #e0533a; box-shadow: 0 0 0 3px rgba(224, 83, 58, .3); }
.rp-text { display: grid; line-height: 1.15; min-width: 0; }
.rp-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-text small { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-btn {
  flex: none; min-width: 44px; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 13px; color: var(--text); background: var(--glass); border: 1.5px solid var(--glass-line);
}
.m-watch {
  flex: none; width: 30px; height: 30px; margin-left: 6px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 0; color: #fff; background: #3f7a2a;
}
.m-watch svg { width: 16px; height: 16px; }

/* Market swatches for pop and planting effects (data/store.js popfx, placefx). */
.m-fx { position: relative; width: 56px; height: 56px; border-radius: 50%; display: block; margin: 0 auto;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%); }
.m-fx i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--f1);
  transform: rotate(calc(var(--k) * 60deg)) translateY(-19px); }
.m-fx i:nth-child(even) { background: var(--f2); width: 7px; height: 7px; }
.m-fx i:nth-child(1) { --k: 0; } .m-fx i:nth-child(2) { --k: 1; } .m-fx i:nth-child(3) { --k: 2; }
.m-fx i:nth-child(4) { --k: 3; } .m-fx i:nth-child(5) { --k: 4; } .m-fx i:nth-child(6) { --k: 5; }
.m-fx-placefx { background: radial-gradient(circle, transparent 46%, var(--f1) 48%, transparent 56%); }