/*!
 * Pip Survivors — stylesheet
 * A warm, low-fi look: lemon yellows over cream, soft shadows, paper grain.
 * Colours live in custom properties so the whole game can be re-themed here.
 *
 * Copyright (c) 2026 Lemon. MIT licensed (see LICENSE).
 */

/* ------------------------------------------------------------------ theme */

:root {
  /* palette */
  --lemon: #f7d94c;
  --lemon-bright: #ffe66d;
  --lemon-pale: #fff4b8;
  --cream: #fff9e6;
  --warm-white: #fffcf2;
  --charcoal: #29261f;
  --brown: #6f654f;
  --green: #8fae65;
  --rind: #e0b93c;

  /* roles */
  --bg: var(--cream);
  --bg-soft: var(--warm-white);
  --surface: var(--warm-white);
  --surface-2: #fff6d9;
  --ink: var(--charcoal);
  --ink-soft: var(--brown);
  --ink-faint: #9a8f75;
  --line: #ece0bb;
  --line-strong: #ddcd9d;
  --accent: var(--lemon);
  --accent-deep: var(--rind);
  --accent-ink: var(--charcoal);
  --good: #5d9a3f;
  --warn: #c9771f;
  --bad: #d64545;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(41, 38, 31, 0.06), 0 2px 8px -4px rgba(41, 38, 31, 0.15);
  --shadow: 0 2px 4px rgba(41, 38, 31, 0.05), 0 12px 28px -16px rgba(41, 38, 31, 0.35);
  --shadow-lift: 0 4px 8px rgba(41, 38, 31, 0.07), 0 20px 40px -20px rgba(41, 38, 31, 0.45);

  --font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1040px;
  color-scheme: light;
}

/* An optional night mode. Same lemon identity, dimmed for late sessions. */
:root[data-theme="dark"] {
  --bg: #1e1c17;
  --bg-soft: #24211a;
  --surface: #2b271f;
  --surface-2: #332e24;
  --ink: #fdf6df;
  --ink-soft: #cdbf9c;
  --ink-faint: #9b8f74;
  --line: #3b3529;
  --line-strong: #4a4232;
  --accent: var(--lemon);
  --accent-deep: #ffd84a;
  --accent-ink: #201d16;
  --good: #8fc46a;
  --warn: #e9a04d;
  --bad: #f07070;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px -4px rgba(0, 0, 0, 0.6);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.45), 0 24px 44px -22px rgba(0, 0, 0, 1);
  color-scheme: dark;
}

/* The eight rarities. --rar is the pure colour; tiles and labels mix it
   with the surface or the ink so it reads in both themes. */
.r0 { --rar: #9aa1a9; }
.r1 { --rar: #5db661; }
.r2 { --rar: #3f8fe4; }
.r3 { --rar: #a45de6; }
.r4 { --rar: #f2a31b; }
.r5 { --rar: #e5484d; }
.r6 { --rar: #17b8c4; }
.r7 { --rar: #8e7bff; }

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  background-color: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Paper grain + two soft lemon glows, painted behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60vw 50vh at 12% -10%, rgba(255, 230, 109, 0.55), transparent 65%),
    radial-gradient(50vw 45vh at 92% 8%, rgba(143, 174, 101, 0.22), transparent 60%),
    var(--bg);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] body::before {
  background:
    radial-gradient(60vw 50vh at 12% -10%, rgba(247, 217, 76, 0.12), transparent 65%),
    radial-gradient(50vw 45vh at 92% 8%, rgba(143, 174, 101, 0.1), transparent 60%),
    var(--bg);
}

:root[data-theme="dark"] body::after {
  mix-blend-mode: screen;
  opacity: 0.12;
}

button,
input {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ico {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -0.18em;
}

.art {
  display: block;
  width: 100%;
  height: 100%;
}

.noscript {
  position: fixed;
  inset: auto 0 0 0;
  padding: 16px;
  text-align: center;
  background: var(--lemon);
  color: var(--charcoal);
  font-weight: 700;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  cursor: default;
  opacity: 0.5;
  box-shadow: none;
}

.btn--primary {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border-color: var(--rind);
  color: var(--charcoal);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff0a0, var(--lemon-bright));
}

.btn--danger {
  border-color: var(--bad);
  color: var(--bad);
}

.btn--sm {
  padding: 8px 14px;
  font-size: 14px;
}

.btn--xl {
  padding: 16px 44px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--rind), var(--shadow);
}

.btn--xl:hover:not(:disabled) {
  box-shadow: 0 6px 0 var(--rind), var(--shadow-lift);
}

.btn--xl:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--rind), var(--shadow-sm);
}

.btn--icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
}

/* the little red dot that says "something is waiting here" */
.has-badge::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bad);
  border: 2px solid var(--surface);
}

.price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.price + .price {
  margin-left: 10px;
}

/* ------------------------------------------------------------------ shell */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  max-width: var(--wrap);
  margin-inline: auto;
}

/* the announcement strip above the top bar (the owner sets it in the admin
   menu; until then it is the text in index.html) */
.status {
  margin: 0;
  padding: 7px clamp(12px, 3vw, 24px);
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border-bottom: 1px solid var(--rind);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.status:empty {
  display: none;
}

/* the admin menu's preview of it */
.devbanner {
  margin: 4px 0 12px;
  border: 1px solid var(--rind);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.devbanner__note {
  margin-top: 8px;
}

.devbanner__field label {
  flex: 1 1 100%;
  min-width: 0;
}

.devbanner__field input[type="text"] {
  width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(12px, 3vw, 24px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  animation: lemon-bob 6s ease-in-out infinite;
  transform-origin: 50% 60%;
}

@keyframes lemon-bob {
  0%,
  100% {
    transform: rotate(-6deg) translateY(0);
  }
  50% {
    transform: rotate(6deg) translateY(-3px);
  }
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 3px;
}

.topbar__stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}

.pill--power {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border-color: var(--rind);
  color: var(--charcoal);
}

.screen {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px clamp(12px, 3vw, 24px) 24px;
  outline: none;
  scrollbar-width: thin;
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  padding: 8px clamp(8px, 2vw, 20px) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(41, 38, 31, 0.4);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-faint);
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tab .ico {
  width: 26px;
  height: 26px;
}

.tab:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.tab.is-active {
  color: var(--ink);
  background: var(--lemon-pale);
}

:root[data-theme="dark"] .tab.is-active {
  background: #4a4020;
}

.tab--main {
  margin-top: -18px;
  padding-top: 12px;
  color: var(--charcoal);
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border: 1px solid var(--rind);
  box-shadow: 0 4px 0 var(--rind), var(--shadow);
}

.tab--main .ico {
  width: 32px;
  height: 32px;
}

.tab--main:hover,
.tab--main.is-active,
:root[data-theme="dark"] .tab--main.is-active {
  color: var(--charcoal);
  background: linear-gradient(180deg, #fff0a0, var(--lemon-bright));
}

.tab.has-badge::after {
  top: 4px;
  right: calc(50% - 22px);
}

/* ------------------------------------------------------------ common bits */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(14px, 2.4vw, 22px);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.panel__head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.hint {
  color: var(--ink-faint);
  font-size: 13.5px;
}

.lead {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--ink-faint);
}

.section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 22px;
  margin: 22px 0 10px;
}

.section small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.facts > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.facts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.facts dd {
  font-weight: 800;
  font-size: 15px;
}

.facts--tight {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.bar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rind), var(--lemon-bright));
  transition: width 0.3s ease;
}

/* a rarity or grade written out in its colour */
.rname {
  color: color-mix(in srgb, var(--rar) 72%, var(--ink));
  font-weight: 800;
}

.rlist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.rname.g-S {
  color: color-mix(in srgb, #e39a12 80%, var(--ink));
}

.rname.g-SS {
  color: color-mix(in srgb, #e0529a 80%, var(--ink));
}

/* ------------------------------------------------------------------ tiles */
/* A square picture of an item on its rarity colour. */

.tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--rar) 82%, #2a2418);
  border-radius: 16px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--rar) 78%, var(--surface)), color-mix(in srgb, var(--rar) 38%, var(--surface)));
  /* the glow grows with rarity (--glow), and S / SS gear gets a coloured ring (--ring) */
  --ring: 0 0 0 0 transparent;
  --glow: 0;
  --breathe: 1;
  --shine: var(--ring), 0 0 calc(var(--glow) * var(--breathe) * 1px) calc(var(--glow) * var(--breathe) * 0.25px) color-mix(in srgb, var(--rar) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -12px 16px -12px rgba(0, 0, 0, 0.25), var(--shine), var(--shadow-sm);
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

@property --breathe {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.tile.r1 { --glow: 5; }
.tile.r2 { --glow: 9; }
.tile.r3 { --glow: 14; border-width: 3px; }
.tile.r4 { --glow: 18; border-width: 3px; animation: breathe 2.4s ease-in-out infinite; }
.tile.r5 { --glow: 22; border-width: 3px; animation: breathe 2s ease-in-out infinite; }
.tile.r6 { --glow: 26; border-width: 3px; animation: breathe 1.7s ease-in-out infinite; }
.tile.r7 { --glow: 32; }

@keyframes breathe {
  0%,
  100% {
    --breathe: 0.7;
  }
  50% {
    --breathe: 1.5;
  }
}

.tile.gr-S {
  --ring: 0 0 0 2px #f6c244, 0 0 12px 2px rgba(246, 194, 68, 0.75);
}

.tile.gr-SS {
  --ring: 0 0 0 2px #ff7ab8, 0 0 0 4px rgba(122, 215, 255, 0.85), 0 0 16px 4px rgba(255, 122, 184, 0.7);
}

button.tile {
  cursor: pointer;
}

button.tile:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--shine), var(--shadow);
}

.tile__art {
  position: absolute;
  inset: 11%;
  filter: drop-shadow(0 2px 1.5px rgba(41, 38, 31, 0.3));
}

/* Surpass: beyond the ordinary colours, so it gets a sheen of its own */
.tile.r6 {
  background: linear-gradient(140deg, #18c3cf, #5d8df0 55%, #b06cf0);
  border-color: #0e8792;
  overflow: hidden;
}

.tile.r6::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  animation: sheen 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sheen {
  0%,
  55% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(60%);
  }
}

/* ???: nobody knows what colour this is */
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.tile.r7 {
  border-color: transparent;
  background:
    radial-gradient(circle at 50% 40%, #3a2c6b, #120d22 72%) padding-box,
    conic-gradient(from var(--spin), #ff5e7a, #ffd166, #6ee7b7, #60a5fa, #c084fc, #ff5e7a) border-box;
  box-shadow: var(--ring), 0 0 calc(var(--glow) * 1px) 2px rgba(160, 130, 255, 0.85), var(--shadow-sm);
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to {
    --spin: 360deg;
  }
}

.tile__grade {
  position: absolute;
  left: -2px;
  top: -2px;
  z-index: 1;
  padding: 2px 9px 1px;
  border-radius: 14px 0 12px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  color: #3a2a00;
  background: linear-gradient(180deg, #fff08a, #f2a31b);
  box-shadow: 0 0 8px rgba(246, 194, 68, 0.9);
}

.tile__grade.g-SS {
  color: #2a1838;
  background: linear-gradient(120deg, #ff8fb5, #ffd98a, #8fe6ff, #ff8fb5);
  background-size: 300% 100%;
  animation: badge 3s linear infinite;
  box-shadow: 0 0 10px rgba(255, 122, 184, 0.9);
}

@keyframes badge {
  to {
    background-position: -300% 0;
  }
}

.tile__mark {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  border: 2px solid var(--surface);
  background: var(--good);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
}

.tile__mark .ico {
  width: 11px;
  height: 11px;
}

.tile.is-new .tile__mark {
  background: var(--bad);
}

.tile.is-dim {
  opacity: 0.38;
}

.tile.is-ready,
.tile.is-picked {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
}

.tile--empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--ink-faint);
}

.tile--empty .ico {
  width: 46%;
  height: 46%;
  opacity: 0.6;
}

.tile--ask i {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}

.tile--big {
  width: 96px;
  flex: none;
}

.tile--pop {
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-8deg);
  }
}

/* ------------------------------------------------------------ battle tab */

.home {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 720px);
  margin-inline: auto;
  text-align: center;
}

.chapter__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.chapter__title {
  flex: 1;
  min-width: 0;
}

.chapter__title h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.05;
}

/* you on the left, the boss on the right, on that chapter's ground */
.stage {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  width: 100%;
  padding: 18px 12px 14px;
  border-radius: var(--radius);
  color: #fffcf2;
  background:
    radial-gradient(circle, rgba(255, 252, 242, 0.1) 1.5px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(180deg, color-mix(in srgb, var(--floor) 80%, var(--zone)), var(--floor));
}

.stage__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stage__hero,
.stage__boss {
  position: relative;
  width: clamp(76px, 16vw, 112px);
  aspect-ratio: 1 / 1;
  animation: bob 3.4s ease-in-out infinite;
}

.stage__boss {
  width: clamp(92px, 20vw, 136px);
  animation-duration: 4.2s;
  animation-direction: reverse;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.stage__weapon {
  position: absolute;
  right: -34%;
  bottom: -6%;
  width: 62%;
  height: 62%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

.stage__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
}

.stage__vs {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--lemon-bright);
  opacity: 0.9;
}

.power {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--lemon-bright);
}

.power--warn {
  color: #ffb45e;
}

.power--bad {
  color: #ff8a8a;
}

.verdict {
  font-weight: 800;
}

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

.verdict--warn {
  color: var(--warn);
}

.verdict--bad {
  color: var(--bad);
}

.chapter .facts {
  width: 100%;
  text-align: left;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 720px);
  margin: auto auto 0;
  padding-top: 6px;
  color: var(--ink-faint);
  font-size: 13px;
}

.foot__secret {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.foot__secret:hover {
  color: var(--ink);
  border-color: var(--accent-deep);
}

/* ---------------------------------------------------------- equipment tab */

.gear {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.gear__me {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gear__lemon {
  width: 68px;
  height: 68px;
  flex: none;
}

.bigpower {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
}

.bigpower .ico {
  color: var(--rind);
}

.gear__buttons {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chipstats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.chipstat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.chipstat em {
  font-style: normal;
  color: var(--ink-soft);
}

.chipstat .ico {
  color: var(--ink-faint);
}

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.slot {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas: "tile text" "tile up";
  align-items: center;
  gap: 4px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.slot .tile {
  grid-area: tile;
}

.slot__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.slot__text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot__text span {
  color: var(--ink-soft);
  font-size: 13px;
}

.slot__up {
  grid-area: up;
  justify-self: start;
  padding: 5px 11px;
  font-size: 13px;
}

.slot--empty {
  grid-template-areas: "tile text";
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.filter {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 13px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.filter:hover {
  color: var(--ink);
  border-color: var(--accent-deep);
}

.filter[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border-color: var(--rind);
  color: var(--charcoal);
}

.bag {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 10px;
}

/* ------------------------------------------------------------------ forge */

.forge {
  text-align: center;
}

.forge .panel__head h2 {
  flex: 1;
  text-align: left;
}

.forge__rule,
.forge__note {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.forge__note {
  font-weight: 700;
  color: var(--ink);
}

.bench {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 16px);
  padding: 16px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.bench__in {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 10px);
}

.bench .tile {
  width: clamp(52px, 13vw, 78px);
}

.bench__out .tile {
  width: clamp(64px, 16vw, 96px);
}

.bench__sign,
.bench__arrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink-faint);
}

.tile--result {
  opacity: 0.55;
}

.tile--result.is-ready {
  opacity: 1;
  animation: glow 1.4s ease-in-out infinite;
}

.tile--result.is-fresh {
  animation: forged 0.6s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rar) 70%, transparent);
  }
  50% {
    box-shadow: 0 0 0 9px transparent;
  }
}

@keyframes forged {
  0% {
    transform: scale(0.4) rotate(-20deg);
    filter: brightness(3);
  }
  60% {
    transform: scale(1.25);
    filter: brightness(1.6);
  }
}

.forge__gain {
  margin-top: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.forge__gain .ico {
  width: 0.85em;
  height: 0.85em;
  color: var(--ink-faint);
}

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

.forge__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

/* ------------------------------------------------------------------- shop */

.gift {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gift.is-ready {
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-pale), var(--surface));
}

:root[data-theme="dark"] .gift.is-ready {
  background: linear-gradient(180deg, #4a4020, var(--surface));
}

.gift__art {
  width: 60px;
  height: 60px;
  flex: none;
}

.gift.is-ready .gift__art {
  animation: wiggle 1.8s ease-in-out infinite;
}

@keyframes wiggle {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  70% {
    transform: rotate(-9deg);
  }
  80% {
    transform: rotate(8deg);
  }
  90% {
    transform: rotate(-5deg);
  }
}

.gift__body {
  flex: 1;
  min-width: 0;
}

.gift__body h3,
.chest__body h3,
.talent h3,
.quest h3 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
}

.gift__body p,
.chest__body p,
.talent p,
.quest p {
  color: var(--ink-soft);
  font-size: 14.5px;
}

.gift__wait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.chests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.chest {
  display: flex;
  gap: 14px;
}

.chest--gilded {
  border-color: var(--rind);
}

.chest__art {
  width: 84px;
  height: 84px;
  flex: none;
}

.chest__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oddsrow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.odds {
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--rar) 55%, var(--line));
  background: color-mix(in srgb, var(--rar) 16%, var(--surface));
  color: color-mix(in srgb, var(--rar) 60%, var(--ink));
}

.odds.g-S {
  --rar: #e39a12;
}

.odds.g-SS {
  --rar: #e0529a;
}

.pity {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}

.chest__buy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.deal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  text-align: center;
  line-height: 1.25;
}

.deal .tile {
  width: 68px;
  margin-bottom: 4px;
}

.deal > span {
  color: var(--ink-soft);
  font-size: 13px;
}

.deal .btn {
  margin-top: 6px;
}

.deal.is-sold {
  opacity: 0.55;
}

.deal__sold {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------- talents, quests */

.talentgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.talent,
.quest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.talent__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--lemon-pale);
  border: 1px solid var(--rind);
  color: var(--charcoal);
  font-size: 22px;
}

.talent__body,
.quest__body {
  flex: 1;
  min-width: 0;
}

.talent__now {
  font-weight: 700;
  margin-bottom: 6px;
}

.talent .talent__now {
  color: var(--ink);
  font-size: 13.5px;
}

.talent__done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  color: var(--good);
}

.quests {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 760px);
  margin-inline: auto;
}

.quest .bar {
  margin-top: 8px;
}

.quest__num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}

.quest.is-ready {
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-pale), var(--surface));
}

:root[data-theme="dark"] .quest.is-ready {
  background: linear-gradient(180deg, #4a4020, var(--surface));
}

.quest.is-done {
  opacity: 0.6;
}

/* ---------------------------------------------------------------- pop-ups */

.modal {
  width: min(94vw, 480px);
  max-height: min(92vh, 760px);
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow-y: auto;
}

.modal::backdrop {
  background: rgba(41, 38, 31, 0.55);
}

.modal[open] {
  animation: rise 0.2s ease both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.modal h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
}

.modal h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 16px 0 6px;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
}

.modal__close:hover {
  color: var(--ink);
  background: var(--lemon-pale);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.itemsheet__head {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-right: 30px;
}

.itemsheet__kind {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

.itemsheet__stat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  font-size: 15px;
}

.itemsheet__stat b {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.delta {
  font-weight: 800;
  font-size: 14px;
}

.delta--up {
  color: var(--good);
}

.delta--down {
  color: var(--bad);
}

.itemsheet__blurb {
  margin: 14px 0 10px;
  color: var(--ink-soft);
  font-style: italic;
}

.perks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perk {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.35;
  opacity: 0.55;
}

.perk.is-on {
  opacity: 1;
}

.perk__when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.perk__when .ico {
  width: 10px;
  height: 10px;
  margin-left: 4px;
}

.itemsheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
}

.loot {
  text-align: center;
}

.loot__money {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 10px 0;
  font-family: var(--font-display);
  font-size: 22px;
}

.loot__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px 8px;
  margin: 14px 0 4px;
}

.loot__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  font-size: 13px;
}

.loot__item .tile {
  width: 66px;
  margin-bottom: 6px;
}

.loot__item span {
  color: var(--ink-soft);
  font-size: 12px;
}

.loot .modal__actions {
  justify-content: center;
}

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-weight: 700;
}

.settings__danger {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.howto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.secret__input {
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.secret__input:focus {
  outline: none;
  border-color: var(--accent-deep);
}

.secret__error {
  min-height: 22px;
  margin-top: 6px;
  color: var(--warn);
  font-size: 14px;
  font-weight: 700;
}

.secret p {
  margin-top: 10px;
  color: var(--ink-soft);
}

.dev {
  position: relative;
  padding-right: 24px;
}

.dev select {
  font: inherit;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
}

.dev__give {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.dev__give label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 13px;
}

.dev input[type="number"] {
  font: inherit;
  width: 9.5em;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
}

/* quick forge */
.quick__sum {
  margin: 10px 0 8px;
  color: var(--ink-soft);
}

.quick__sum b {
  color: var(--ink);
}

.quick__steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.quick__steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-weight: 700;
  font-size: 14px;
}

.quick__steps li b {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 17px;
}

.quick__steps .ico {
  width: 0.85em;
  height: 0.85em;
  color: var(--ink-faint);
}

.quick__label {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.quick__made {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.quick__made .tile {
  width: 46px;
}

.quick__keep {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.quick__keep input {
  margin-top: 3px;
  accent-color: var(--accent-deep);
}

.forge__warn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px auto 0;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid var(--bad);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
  font-weight: 700;
  font-size: 14px;
  animation: nudge-warn 0.35s ease;
}

.forge__warn strong {
  color: var(--bad);
}

@keyframes nudge-warn {
  30% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
}

.btn[data-armed] {
  border-color: var(--bad);
  background: var(--bad);
  color: #fff;
}

.dev__grant {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.dev__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
}

.dev__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14px;
}

.dev__row .btn {
  margin-left: auto;
}

/* ----------------------------------------------------------------- battle */

.battle {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #14120e;
  color: #fffcf2;
  user-select: none;
  -webkit-user-select: none;
}

.battle__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 0; /* its own layer, so nothing in it shows through the cards and the pause box */
  pointer-events: none;
  font-weight: 800;
  --hud-glass: rgba(24, 20, 14, 0.66);
  --hud-line: rgba(255, 240, 200, 0.16);
  --hud-pad: clamp(8px, 2vw, 16px);
}

/* experience: a glowing strip along the whole top edge */
.hud__xp {
  height: 8px;
  background: rgba(14, 12, 9, 0.72);
  box-shadow: inset 0 -1px 0 rgba(255, 240, 200, 0.1);
}

.hud__xp i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(180deg, #fff3a6, var(--lemon) 55%, var(--rind));
  box-shadow: 0 0 12px rgba(255, 230, 109, 0.75);
  transition: width 0.15s ease;
}

/* three groups: the lemon on the left, the clock in the middle, counters and buttons on the right */
.hud__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px var(--hud-pad) 0;
}

.hud__me,
.hud__side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hud__me {
  justify-self: start;
}

.hud__side {
  justify-self: end;
  gap: 8px;
}

.hud__btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--hud-line);
  border-radius: 50%;
  background: var(--hud-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #fffcf2;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--soft-ease, ease);
}

.hud__btn:hover {
  background: rgba(20, 18, 14, 0.88);
  border-color: var(--lemon);
  transform: scale(1.06);
}

/* the level: a lemon-yellow badge on the end of the health bar */
.hud__lvl {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid #fff3a6;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff6b8, var(--lemon) 46%, var(--rind));
  box-shadow: 0 0 0 3px rgba(24, 20, 14, 0.72), 0 6px 14px -6px rgba(0, 0, 0, 0.85), inset 0 -3px 0 rgba(150, 100, 10, 0.35);
  color: #3b2a05;
  line-height: 1;
}

.hud__lvl small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.hud__lvl b {
  margin-top: -1px;
  font-family: var(--font-display);
  font-size: 19px;
}

.hud__lvl.is-up {
  animation: hud-hop 0.6s var(--soft-ease, ease) both;
}

@keyframes hud-hop {
  35% {
    transform: scale(1.3) rotate(-8deg);
    box-shadow: 0 0 0 3px rgba(24, 20, 14, 0.72), 0 0 26px 8px rgba(255, 230, 109, 0.85);
  }
}

/* health: a chunky bar tucked under the badge; a pale strip shows what a hit just took */
.hud__hp {
  flex: 0 1 auto;
  width: clamp(130px, 26vw, 270px);
  min-width: 64px;
  height: 30px;
  margin-left: -14px;
  padding: 3px 3px 3px 16px;
  border: 1px solid var(--hud-line);
  border-radius: 0 99px 99px 0;
  background: var(--hud-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hud__hp-track {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.hud__hp-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
}

.hud__hp-fill {
  background: linear-gradient(180deg, #c8ec92, #8cc35a 48%, #5b9634);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: width 0.12s linear;
}

.hud__hp-fill.is-low {
  background: linear-gradient(180deg, #ffab86, #e5604a 48%, #b53a2c);
}

.hud__hp-lag {
  background: #fff0c4;
  opacity: 0.85;
  transition: width 0.45s ease 0.3s;
}

.hud__hp-track .hud__hp-shield {
  top: auto;
  height: 5px;
  background: linear-gradient(90deg, #bfe6ff, #6ec1ff);
  box-shadow: 0 0 6px rgba(110, 193, 255, 0.9);
}

.hud__heart {
  position: absolute;
  left: 7px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  color: #fffcf2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.hud__heart .ico {
  width: 14px;
  height: 14px;
}

.hud__hp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 14px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}

/* low on health: the bar's frame glows red */
.hud__me.is-low .hud__hp {
  border-color: rgba(255, 120, 100, 0.8);
  animation: hud-warn 0.8s ease-in-out infinite alternate;
}

@keyframes hud-warn {
  to {
    box-shadow: 0 0 18px 2px rgba(229, 72, 77, 0.65);
  }
}

/* the counters on the right */
.hud__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--hud-line);
  border-radius: 99px;
  background: var(--hud-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hud__pill .ico {
  width: 18px;
  height: 18px;
}

.hud__kills .ico {
  color: #f3e6cf;
}

.hud__coins .ico {
  color: var(--lemon);
  filter: drop-shadow(0 0 4px rgba(247, 217, 76, 0.5));
}

/* the clock: a plate in the middle; warm in the last ten seconds, red for the boss */
.hud__time {
  justify-self: center;
  min-width: 92px;
  padding: 2px 16px 3px;
  border: 1px solid rgba(255, 230, 140, 0.35);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(44, 36, 22, 0.88), rgba(20, 17, 12, 0.88));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--lemon-bright);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 214, 90, 0.35);
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* in a chapter the plate counts pests to the boss, with a bar filling along its foot;
   the kills pill on the right would only say the same thing */
.hud__time {
  position: relative;
  overflow: hidden;
}

.hud__goal-ico,
.hud__time small {
  display: none;
}

.hud.is-counting .hud__goal-ico {
  display: inline-grid;
  vertical-align: -2px;
  margin-right: 6px;
  color: #f3e6cf;
}

.hud.is-counting .hud__goal-ico .ico {
  width: 18px;
  height: 18px;
}

.hud.is-counting .hud__time small {
  display: inline;
  color: rgba(255, 240, 200, 0.6);
  font-size: 0.68em;
}

.hud.is-counting .hud__time::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--prog, 0) * 100%);
  background: linear-gradient(90deg, var(--rind), var(--lemon-bright));
  box-shadow: 0 0 8px rgba(255, 214, 90, 0.8);
  transition: width 0.2s ease;
}

.hud.is-counting .hud__kills {
  display: none;
}

.hud__time[data-mood="soon"] {
  border-color: rgba(255, 170, 80, 0.7);
  color: #ffb84a;
}

.hud__time[data-mood="boss"] {
  border-color: rgba(255, 120, 100, 0.75);
  background: linear-gradient(180deg, rgba(90, 24, 20, 0.9), rgba(40, 12, 10, 0.9));
  color: #ffd0c8;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(255, 90, 80, 0.8);
  animation: hud-warn 1s ease-in-out infinite alternate;
}

/* the boss: its name with a skull, and a big segmented bar */
.hud__boss {
  position: absolute;
  top: 64px;
  left: 50%;
  width: min(64%, 520px);
  transform: translateX(-50%);
  text-align: center;
}

.hud__boss p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: #ffe6e0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(229, 72, 77, 0.6);
}

.hud__boss p .ico {
  width: 18px;
  height: 18px;
  color: #ff8a80;
}

.hud__boss-bar {
  position: relative;
  height: 16px;
  border: 1px solid rgba(255, 138, 128, 0.5);
  border-radius: 99px;
  background: rgba(20, 12, 10, 0.82);
  box-shadow: 0 0 18px -4px rgba(229, 72, 77, 0.6), 0 6px 14px -8px rgba(0, 0, 0, 0.85), inset 0 2px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.hud__boss-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.hud__boss-fill {
  background: linear-gradient(180deg, #ff9f90, #e5484d 50%, #a3222a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transition: width 0.12s linear;
}

.hud__boss-lag {
  background: #ffe3a8;
  opacity: 0.85;
  transition: width 0.5s ease 0.3s;
}

/* a mark every tenth of its health */
.hud__boss-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.35) calc(10% - 1px) 10%);
  pointer-events: none;
}

.hud__toast {
  position: absolute;
  top: 126px;
  left: 50%;
  transform: translate(-50%, -8px) scale(0.96);
  padding: 7px 20px;
  border: 1px solid rgba(255, 230, 140, 0.55);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(48, 39, 22, 0.88), rgba(22, 18, 12, 0.88));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 22px -6px rgba(255, 214, 90, 0.55), 0 8px 18px -10px rgba(0, 0, 0, 0.8);
  color: var(--lemon-bright);
  font-family: var(--font-display);
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.25;
  text-align: center;
  width: max-content;
  max-width: calc(100% - 24px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.35s var(--soft-ease, ease);
}

.hud__toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hud__build {
  position: absolute;
  left: var(--hud-pad);
  right: var(--hud-pad);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* a phone: smaller badge and clock, and the bar shrinks before anything falls off */
@media (max-width: 640px) {
  .hud__top {
    gap: 6px;
  }

  .hud__side {
    gap: 6px;
  }

  .hud__lvl {
    width: 40px;
    height: 40px;
  }

  .hud__lvl b {
    font-size: 16px;
  }

  .hud__hp {
    width: clamp(90px, 30vw, 170px);
    height: 26px;
  }

  .hud__hp-text {
    font-size: 11.5px;
  }

  .hud__btn {
    width: 36px;
    height: 36px;
  }

  .hud__pill {
    height: 30px;
    padding: 0 9px 0 6px;
    font-size: 13px;
  }

  .hud__time {
    min-width: 0;
    padding: 1px 10px 2px;
    font-size: 19px;
  }

  /* no room for "/ 1,200" on a phone: the bar along the foot shows how far */
  .hud.is-counting .hud__time small {
    display: none;
  }

  .hud.is-counting .hud__goal-ico .ico {
    width: 15px;
    height: 15px;
  }

  .hud__boss {
    top: 58px;
    width: calc(100% - 24px);
  }

  .hud__boss p {
    font-size: 15px;
  }
}

/* one upgrade taken this battle: its icon, and how many times */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 9px;
  background: rgba(20, 18, 14, 0.7);
  border: 1.5px solid var(--tier, #9aa1a9);
  color: #fffcf2;
  font-size: 15px;
}

.chip b {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--tier, #9aa1a9);
  color: #14120e;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

.chip em {
  font-style: normal;
  font-size: 13.5px;
}

/* things that cover the battle: level-up cards, pause, results */
.sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(20, 18, 14, 0.74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade 0.18s ease both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.choose {
  width: min(100%, 780px);
  text-align: center;
}

.choose__title {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--lemon-bright);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.choose__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.upcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 14px 16px;
  border: 0;
  border-top: 6px solid var(--tier);
  border-radius: var(--radius);
  background: #fff9e6;
  color: #29261f;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  animation: deal 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.upcard:nth-child(2) {
  animation-delay: 0.06s;
}

.upcard:nth-child(3) {
  animation-delay: 0.12s;
}

@keyframes deal {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.92);
  }
}

.upcard:hover,
.upcard:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px var(--tier), 0 16px 34px -12px rgba(0, 0, 0, 0.9);
}

.upcard__key {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #ddcd9d;
  background: #fffcf2;
  color: #6f654f;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
}

.upcard__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier) 22%, #fffcf2);
  border: 2px solid var(--tier);
  color: color-mix(in srgb, var(--tier) 70%, #29261f);
  font-size: 28px;
}

.upcard__tier {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tier) 75%, #29261f);
}

.upcard__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.1;
}

.upcard__text {
  color: #6f654f;
  font-size: 14.5px;
  line-height: 1.35;
}

.upcard__level {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9a8f75;
  min-height: 24px;
}

.choose__reroll {
  margin-top: 16px;
}

.pausebox,
.results {
  width: min(100%, 520px);
  color: var(--ink);
  text-align: center;
}

.pausebox h2,
.results h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
}

.pausebox__where {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.pausebox__build {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-bottom: 18px;
}

.pausebox__build .chip {
  background: var(--surface-2);
  color: var(--ink);
  padding: 5px 12px 5px 8px;
}

.pausebox__empty {
  color: var(--ink-faint);
}

.pausebox__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.results--win h2 {
  color: var(--good);
}

.results--loss h2 {
  color: var(--bad);
}

.results__sub {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.results .facts {
  text-align: left;
}

.results .hint {
  margin: 10px 0;
}

.results__unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-weight: 800;
  color: var(--good);
}

.results .modal__actions {
  justify-content: center;
}

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 104px;
  z-index: 80;
  transform: translate(-50%, 16px);
  max-width: 92vw;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--warm-white);
  font-weight: 700;
  font-size: 14.5px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

:root[data-theme="dark"] .toast {
  background: var(--lemon);
  color: var(--charcoal);
}

/* ------------------------------------------------------------- animation */
/* Screens ripple in, numbers bump, the Battle stage plays out a little
   fight, and chests shake before they open. Everything here is skipped
   by the reduced-motion rule at the bottom of this file. */

.is-entering section > *,
.is-entering .chapter > *,
.is-entering .gear__hero > *,
.is-entering .bag > *,
.is-entering .slots > *,
.is-entering .chests > *,
.is-entering .deals > *,
.is-entering .talentgrid > *,
.is-entering .facts > * {
  animation: rise-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}

.tab.is-active .ico {
  animation: tab-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes tab-pop {
  0% {
    transform: scale(0.6) rotate(-14deg);
  }
  60% {
    transform: scale(1.25) rotate(6deg);
  }
}

/* the top bar numbers */
.pill.is-bump {
  animation: bump 0.5s cubic-bezier(0.2, 1.7, 0.4, 1);
}

@keyframes bump {
  40% {
    transform: scale(1.18);
    box-shadow: 0 0 0 4px rgba(247, 217, 76, 0.55), var(--shadow);
  }
}

.slot,
.talent {
  position: relative;
}

.is-pulse {
  animation: pulse-ring 0.8s ease-out;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(247, 217, 76, 0.9);
    transform: scale(1);
  }
  25% {
    transform: scale(1.04);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(247, 217, 76, 0);
    transform: scale(1);
  }
}

.floater {
  position: absolute;
  right: 14px;
  top: 4px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--good);
  text-shadow: 0 1px 0 var(--surface), 0 0 6px var(--surface);
  pointer-events: none;
  animation: float-up 0.9s ease-out both;
}

@keyframes float-up {
  from {
    opacity: 1;
    transform: translateY(8px) scale(0.8);
  }
  to {
    opacity: 0;
    transform: translateY(-34px) scale(1.2);
  }
}

/* the Battle button: a glint now and then, and it breathes */
.btn--xl {
  overflow: hidden;
  animation: breathe-btn 2.8s ease-in-out infinite;
}

.btn--xl::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-18deg);
  animation: glint 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glint {
  0%,
  55% {
    left: -60%;
  }
  85%,
  100% {
    left: 130%;
  }
}

@keyframes breathe-btn {
  50% {
    transform: scale(1.035);
  }
}

.tab--main {
  animation: breathe-btn 2.8s ease-in-out infinite;
}

/* the chapter title slides in from the side you came from */
.chapter__title.slide-left {
  animation: slide-from-left 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.chapter__title.slide-right {
  animation: slide-from-right 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes slide-from-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes slide-from-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* the Battle stage: floating specks, and every few seconds the lemon
   lunges at the boss, the boss reels back, and a spark pops between them */
.stage {
  position: relative;
  overflow: hidden;
}

.stage__side,
.stage__vs {
  position: relative;
  z-index: 1;
}

.stage__hero {
  animation: hero-fight 5.2s ease-in-out infinite;
}

.stage__boss {
  animation: boss-fight 5.2s ease-in-out infinite;
}

.stage__weapon {
  transform-origin: 20% 80%;
  animation: weapon-swing 5.2s ease-in-out infinite;
}

.stage__vs {
  animation: vs-flash 5.2s ease-in-out infinite;
}

@keyframes hero-fight {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(0);
  }
  74% {
    transform: translate(-10px, -3px) scale(0.96);
  }
  80% {
    transform: translate(52px, -4px) scale(1.08);
  }
  90% {
    transform: translate(6px, 0);
  }
}

@keyframes boss-fight {
  0%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-5px);
  }
  70% {
    transform: translateY(0);
  }
  80% {
    transform: translate(14px, 0) rotate(7deg) scale(0.93);
  }
  90% {
    transform: translate(-4px, 0) rotate(-2deg);
  }
}

@keyframes weapon-swing {
  0%,
  70%,
  100% {
    transform: rotate(0);
  }
  76% {
    transform: rotate(-38deg);
  }
  82% {
    transform: rotate(48deg);
  }
  92% {
    transform: rotate(8deg);
  }
}

@keyframes vs-flash {
  0%,
  76%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  82% {
    transform: scale(1.5) rotate(-6deg);
    opacity: 1;
    text-shadow: 0 0 14px var(--lemon-bright);
  }
}

.stage__spark {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  color: var(--lemon-bright);
  opacity: 0;
  pointer-events: none;
  animation: spark-pop 5.2s ease-out infinite;
}

.stage__spark .ico {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px var(--lemon-bright));
}

@keyframes spark-pop {
  0%,
  79% {
    opacity: 0;
    transform: scale(0.2) rotate(0);
  }
  83% {
    opacity: 1;
    transform: scale(1.3) rotate(25deg);
  }
  92%,
  100% {
    opacity: 0;
    transform: scale(1.9) rotate(60deg);
  }
}

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

.stage__motes i {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zone);
  opacity: 0;
  animation: mote 8s linear infinite;
}

.stage__motes i:nth-child(1) { left: 8%; animation-duration: 7s; }
.stage__motes i:nth-child(2) { left: 22%; animation-duration: 9s; animation-delay: -3s; width: 4px; height: 4px; }
.stage__motes i:nth-child(3) { left: 38%; animation-duration: 8s; animation-delay: -5s; }
.stage__motes i:nth-child(4) { left: 55%; animation-duration: 10s; animation-delay: -1s; width: 8px; height: 8px; }
.stage__motes i:nth-child(5) { left: 70%; animation-duration: 7.5s; animation-delay: -6s; width: 4px; height: 4px; }
.stage__motes i:nth-child(6) { left: 84%; animation-duration: 9.5s; animation-delay: -2s; }
.stage__motes i:nth-child(7) { left: 93%; animation-duration: 8.5s; animation-delay: -4s; width: 5px; height: 5px; }

@keyframes mote {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15% {
    opacity: 0.8;
  }
  50% {
    transform: translate(14px, -90px);
  }
  100% {
    opacity: 0;
    transform: translate(-10px, -190px);
  }
}

/* new things in the bag nod for attention */
.tile.is-new .tile__mark {
  animation: nudge 1.4s ease-in-out infinite;
}

@keyframes nudge {
  50% {
    transform: scale(1.25);
  }
}

/* the forge flashes when something comes out */
.bench {
  position: relative;
  overflow: hidden;
}

.bench.is-forged::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 50%, rgba(255, 244, 184, 0.95), rgba(255, 190, 80, 0.5) 40%, transparent 70%);
  animation: forge-flash 0.9s ease-out both;
  pointer-events: none;
}

@keyframes forge-flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* chests: the box shakes, flashes, and the finds pop out one by one */
.loot {
  position: relative;
}

.loot--reveal .loot__box {
  position: absolute;
  left: 50%;
  top: 52px;
  z-index: 4;
  width: 104px;
  height: 104px;
  margin-left: -52px;
  pointer-events: none;
  animation: chest-shake 0.75s ease-in both;
}

@keyframes chest-shake {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-9deg) translateY(2px);
  }
  22% {
    transform: rotate(9deg);
  }
  34% {
    transform: rotate(-11deg) translateY(2px);
  }
  46% {
    transform: rotate(11deg);
  }
  58% {
    transform: rotate(-6deg) scale(1.05);
  }
  72% {
    transform: scale(1.3);
    filter: brightness(1.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.9);
    filter: brightness(3);
    opacity: 0;
  }
}

.loot__flash {
  position: absolute;
  inset: -22px;
  z-index: 3;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rar) 80%, #fff), transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: reveal-flash 0.9s ease-out 0.62s both;
}

@keyframes reveal-flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

.loot--reveal .loot__item {
  animation: item-reveal 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(0.7s + var(--i, 0) * 80ms);
}

.loot--reveal .tile--pop {
  animation: none;
}

/* a hundred chests at once: a tally, then a compact scrolling grid, best first */
.loot__tally {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 12px;
  margin: 4px 0 0;
  font-size: 14px;
}

.loot--many .loot__items {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
  max-height: 44vh;
  overflow-y: auto;
  padding: 6px 4px;
}

.loot--many .loot__item > strong,
.loot--many .loot__item > span:not(.tile) {
  display: none;
}

.loot--many .loot__item {
  display: block;
}

.loot--many .loot__item .tile {
  display: grid;
  width: 100%;
  margin: 0;
}

.loot--many.loot--reveal .loot__item {
  animation-delay: calc(0.7s + var(--i, 0) * 25ms);
}

@keyframes item-reveal {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.4) rotate(-12deg);
  }
}
/* the damage meter: who is doing the damage, ranked, in the corner */
.hud__meter {
  position: absolute;
  left: clamp(8px, 2vw, 16px);
  top: 72px;
  width: 214px;
  padding: 7px 8px 6px;
  border-radius: 14px;
  background: rgba(24, 20, 14, 0.6);
  border: 1px solid rgba(255, 240, 200, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.8);
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
}

.meter__head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 252, 242, 0.7);
}

.meter__head b {
  color: var(--lemon-bright);
}

.meter__head span {
  text-transform: none;
}

.meter__row {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 5px;
  height: 21px;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, transparent) var(--w), rgba(255, 252, 242, 0.06) var(--w));
}

.meter__row.is-weapon {
  box-shadow: inset 0 0 0 1px rgba(247, 217, 76, 0.55);
}

.meter__ico {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #fffcf2;
}

.meter__ico .ico,
.meter__ico .art {
  width: 15px;
  height: 15px;
}

.meter__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.meter__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 252, 242, 0.85);
}

.meter__pct {
  text-align: right;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--lemon-bright);
}

.hud__btn[aria-pressed="false"] {
  opacity: 0.6;
}

/* with the meter open and a narrow screen, the boss bar moves to make room */
@media (max-width: 900px) {
  .hud.has-meter .hud__boss {
    left: 236px;
    right: 12px;
    width: auto;
    transform: none;
  }
}

@media (max-width: 640px) {
  .hud__meter {
    width: 168px;
    font-size: 11px;
  }

  .meter__row {
    grid-template-columns: 15px minmax(0, 1fr) auto 32px;
    height: 20px;
  }
}

/* ------------------------------------------------------------ responsive */

@media (min-width: 900px) {
  /* room for the bag beside the lemon */
  .gear {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }

  .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabbar {
    margin: 0 clamp(12px, 3vw, 24px) 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 640px) {
  .brand__text {
    display: none;
  }

  .pill {
    padding: 6px 10px 6px 8px;
    font-size: 14px;
  }

  .btn--icon {
    width: 38px;
    height: 38px;
  }

  .choose__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .upcard {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: "icon name" "icon text" "icon level";
    column-gap: 12px;
    padding: 12px 14px 10px 36px;
    text-align: left;
  }

  .upcard__icon {
    grid-area: icon;
    width: 52px;
    height: 52px;
    align-self: center;
  }

  .upcard__tier {
    display: none;
  }

  .upcard__name {
    grid-area: name;
    font-size: 18px;
  }

  .upcard__text {
    grid-area: text;
  }

  .upcard__level {
    grid-area: level;
    padding-top: 2px;
    min-height: 0;
  }

  .hud__kills {
    display: none;
  }

  .chest {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .oddsrow,
  .chest__buy {
    justify-content: center;
  }

  .perk {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

@media (max-width: 400px) {
  .topbar {
    gap: 6px;
    padding-inline: 8px;
  }

  .topbar__stats {
    gap: 5px;
  }

  .brand__mark {
    width: 30px;
    height: 30px;
  }

  .pill {
    gap: 4px;
    padding: 5px 8px 5px 6px;
    font-size: 13px;
  }

  .btn--icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .tab {
    font-size: 11px;
  }

  .gift {
    flex-wrap: wrap;
  }
}

/* People who prefer less movement get a calm, still page. Settings has an
   Animations switch (data-motion on <html>): "on" overrides the device
   setting, "off" turns movement off even if the device allows it. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *,
  :root:not([data-motion="on"]) *::before,
  :root:not([data-motion="on"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* -------------------------------------------------------------- dev menus */

.modal--secret {
  width: min(94vw, 600px);
}

.devtabs,
.devbox__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 4px;
}

.devtabs__tab,
.devbox__tab {
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.devtabs__tab:hover,
.devbox__tab:hover {
  color: var(--ink);
}

.devtabs__tab.is-active,
.devbox__tab.is-active {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border-color: var(--rind);
  color: var(--charcoal);
}

.dev__body {
  min-height: 150px;
}

.dev__save {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  resize: vertical;
}

/* the dev panel inside a battle */
.hud__btn--dev {
  width: auto;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 12px;
  border-color: var(--lemon);
  color: var(--lemon-bright);
}

.choose__dev {
  margin: 16px 0 0 8px;
}

.devsheet {
  z-index: 5;
  place-items: start center;
}

.devbox {
  width: min(100%, 640px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  margin-block: auto;
}

.devbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.devbox__head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
}

.devbox__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px 2px;
}

.devbox__label {
  margin: 14px 0 6px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-soft);
}

.devbox__label small {
  font-weight: 600;
  color: var(--ink-faint);
}

.devbox__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.devbox__toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.devbox__toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 56px 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.devbox__toggle b {
  font-family: var(--font-display);
  font-size: 17px;
}

.devbox__toggle span {
  color: var(--ink-soft);
  font-size: 13px;
}

.devbox__toggle i {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.devbox__toggle.is-on {
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-pale), var(--surface-2));
}

:root[data-theme="dark"] .devbox__toggle.is-on {
  background: linear-gradient(180deg, #4a4020, var(--surface-2));
}

.devbox__toggle.is-on i {
  background: var(--lemon);
  border-color: var(--rind);
  color: var(--charcoal);
}

.devbox__ups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.devup {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tier);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.devup.is-full {
  opacity: 0.6;
}

.devup__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier) 22%, var(--surface));
  color: var(--ink);
}

.devup__icon .ico {
  width: 22px;
  height: 22px;
}

.devup__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.devup__body b {
  font-size: 14.5px;
}

.devup__body em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.devup__body small {
  color: var(--ink-soft);
  font-size: 12.5px;
}

@media (max-width: 520px) {
  .devup__body small {
    display: none;
  }
}

/* ------------------------------------------------------------ polish pass */
/* Looks only: nothing here changes sizes enough to move a button or hide
   anything, and deleting this whole block puts the old look back. */

.status {
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 14px -10px rgba(41, 38, 31, 0.55);
}

.screen {
  scrollbar-color: var(--line-strong) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}

.modal::backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* a soft top edge on cards in the day theme, and a gentle lift under a pointer */
:root:not([data-theme="dark"]) .panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-sm);
}

.talent,
.quest,
.chest,
.deal,
.gift {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

@media (hover: hover) {
  .talent:hover,
  .quest:hover,
  .chest:hover,
  .deal:hover,
  .gift:hover {
    transform: translateY(-2px);
    border-color: var(--rind);
    box-shadow: 0 10px 22px -14px rgba(41, 38, 31, 0.5);
  }
}

/* price buttons share a width, so every talent's bar lines up */
.talent .btn,
.talent__done {
  min-width: 88px;
  justify-content: center;
}

.talent__done {
  display: inline-flex;
}

/* a line running out from each section heading */
.section::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* a small marker over the tab you are on */
.tab:not(.tab--main).is-active::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 3px;
  background: var(--rind);
}

/* the four facts on the battle screen read as one tidy row */
.facts > div {
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

@media (hover: hover) {
  .facts > div:hover {
    border-color: var(--rind);
    background: var(--lemon-pale);
  }

  :root[data-theme="dark"] .facts > div:hover {
    background: #3a331c;
  }
}

/* ----------------------------------------------------------- chest contents */

.chest {
  position: relative;
}

.chest__info {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chest__info:hover {
  background: var(--lemon-pale);
  border-color: var(--rind);
  color: var(--ink);
}

.modal--chestinfo {
  width: min(94vw, 540px);
}

.chestinfo h4 {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-soft);
}

.chestinfo__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}

.chestinfo__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.chestinfo__item .tile {
  width: 40px;
  height: 40px;
  flex: none;
}

.chestinfo__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.chestinfo__text small {
  color: var(--ink-soft);
  font-size: 12px;
}

.chestinfo__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chestinfo__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 12px;
  border: 2px solid color-mix(in srgb, var(--rar) 45%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: color-mix(in srgb, var(--rar) 70%, var(--ink));
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.chestinfo__tab small {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}

.chestinfo__tab.is-active {
  border-color: var(--rar);
  background: color-mix(in srgb, var(--rar) 16%, var(--surface));
}

/* ------------------------------------------------------- collection book */

.modal--book {
  width: min(94vw, 560px);
}

.book__progress {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.book__count {
  font-size: 15px;
}

.book__count b {
  font-family: var(--font-display);
  font-size: 22px;
}

.book__bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.book__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lemon, #ffd54a), var(--rind, #f2a31b));
}

.book__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}

.book__next .ico {
  width: 16px;
  height: 16px;
  color: var(--good);
}

.book__tabs .chestinfo__tab {
  --rar: var(--rind);
}

.book__caption {
  min-height: 2.6em;
  margin: 10px 0 8px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.3;
}

.book__caption b {
  color: var(--ink);
}

.book__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.book__grid .tile {
  border-radius: 12px;
  cursor: pointer;
}

.book__grid .tile.is-picked {
  outline: 3px solid var(--rind, #f2a31b);
  outline-offset: 1px;
}

/* not found yet: just its shadow */
.book__grid .book__unseen {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

.book__unseen .tile__art {
  filter: brightness(0);
  opacity: 0.18;
}

/* ------------------------------------------------------- dev menu (lobby) */

.modal--secret {
  width: min(96vw, 880px);
  max-height: min(94vh, 820px);
}

.devshell__main {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.devnav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  position: sticky;
  top: 0;
}

.devnav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.devnav__item .ico {
  width: 20px;
  height: 20px;
  flex: none;
}

.devnav__item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.devnav__item.is-active {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  border-color: var(--rind);
  color: var(--charcoal);
}

.devpane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.devcard {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.devcard h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
}

.devcard .devfacts {
  margin-bottom: 4px;
}

.devcard .dev__give:first-of-type,
.devcard .dev__grant:first-of-type {
  margin-top: 8px;
}

.devcard .devbox__toggles {
  margin-top: 4px;
}

.devcard .devbox__label {
  margin-top: 12px;
}

.devcard .dev__list {
  max-height: 38vh;
}

@media (max-width: 640px) {
  .devshell__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .devnav {
    flex-direction: row;
    overflow-x: auto;
    position: static;
    padding-bottom: 4px;
  }

  .devnav__item {
    flex: none;
    padding: 8px 12px;
  }
}

/* -------------------------------------------------------------- ascension */

.ascend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.ascend.is-ready {
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-pale), var(--surface));
}

:root[data-theme="dark"] .ascend.is-ready {
  background: linear-gradient(180deg, #4a4020, var(--surface));
}

.ascend__art {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--lemon-pale);
  border: 1px solid var(--rind);
  color: var(--charcoal);
}

.ascend__art .ico {
  width: 26px;
  height: 26px;
}

.ascend.is-ready .ascend__art {
  animation: wiggle 1.8s ease-in-out infinite;
}

.ascend__body {
  flex: 1;
  min-width: 0;
}

.ascend__body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
}

.ascend__body p {
  color: var(--ink-soft);
  font-size: 14.5px;
}

.ascend__body .bar {
  margin-top: 8px;
}

.section small {
  font-family: var(--font-body, inherit);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------- pets */

.pets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 980px);
  margin-inline: auto;
}

.pethero {
  display: flex;
  align-items: center;
  gap: 18px;
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-pale), var(--surface));
}

:root[data-theme="dark"] .pethero {
  background: linear-gradient(180deg, #4a4020, var(--surface));
}

.pethero__art {
  width: 96px;
  height: 96px;
  flex: none;
}

.pethero__body {
  min-width: 0;
}

.pethero__body h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
}

.pethero__body p {
  color: var(--ink-soft);
}

.petgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.pet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.pet.is-eq {
  border-color: var(--rind);
}

.pet__art {
  width: 64px;
  height: 64px;
  flex: none;
}

.pet__body {
  flex: 1;
  min-width: 0;
}

.pet__body h3 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
}

.pet__body p {
  color: var(--ink-soft);
  font-size: 14px;
}

.pet__lv {
  font-family: var(--font-mono);
  font-size: 12px;
}

.pet__body .bar {
  margin-top: 6px;
}

.pet__acts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.pet__tile {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: none;
  border: 0;
  box-shadow: none;
}

.pettags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pet__tag {
  gap: 6px;
  opacity: 0.55;
}

.pet__tag.is-have {
  opacity: 1;
}

.pet__tag svg {
  width: 28px;
  height: 28px;
}

.pet__tag em {
  font-style: normal;
}

@media (max-width: 520px) {
  .pet {
    flex-wrap: wrap;
  }

  .pet__acts {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }

  .pethero {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------------------------------------------------------------- pet team */

.petteam {
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-pale), var(--surface));
}

:root[data-theme="dark"] .petteam {
  background: linear-gradient(180deg, #4a4020, var(--surface));
}

.petslots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
}

.petslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 150px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.petslot svg.art {
  width: 64px;
  height: 64px;
}

.petslot b {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
}

.petslot span {
  color: var(--ink-soft);
  font-size: 13px;
}

.petslot.is-empty {
  border-style: dashed;
  opacity: 0.75;
}

.petslot.is-locked {
  background: var(--surface-2);
  color: var(--ink-faint);
}

.petslot.is-locked svg.ico {
  width: 28px;
  height: 28px;
}

@media (max-width: 520px) {
  .petslot {
    min-height: 130px;
    padding: 8px 4px;
  }

  .petslot b {
    font-size: 13px;
  }
}

/* =========================================================================
   REVAMP
   One design layer over everything above: a sunnier backdrop, glassy bars,
   candy buttons, a floating dock, glossier cards and bars. It only changes
   how things look (colours, borders, shadows, small spacing). Delete this
   whole block and the old look is back exactly.
   ========================================================================= */

:root {
  --sun: #ffd23f;
  --sun-deep: #f2a31b;
  --leaf: #7fb069;
  --glass: rgba(255, 252, 242, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --card-top: #fffdf6;
  --card-bottom: #fff6d6;
  --press: #c99a1c;
}

:root[data-theme="dark"] {
  --glass: rgba(43, 39, 31, 0.72);
  --glass-edge: rgba(255, 244, 184, 0.1);
  --card-top: #332e24;
  --card-bottom: #29251d;
  --press: #8a6a10;
}

/* ------------------------------------------------------------- backdrop */

body::before {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(255, 210, 63, 0.55), transparent 62%),
    radial-gradient(760px 480px at 100% 4%, rgba(127, 176, 105, 0.3), transparent 60%),
    radial-gradient(900px 600px at 50% 112%, rgba(255, 226, 120, 0.4), transparent 62%),
    linear-gradient(180deg, #fffbe8 0%, #fff3c2 100%);
}

:root[data-theme="dark"] body::before {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(247, 217, 76, 0.16), transparent 62%),
    radial-gradient(760px 480px at 100% 4%, rgba(127, 176, 105, 0.12), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(247, 217, 76, 0.1), transparent 62%),
    linear-gradient(180deg, #221f18 0%, #1a1812 100%);
}

/* ------------------------------------------------------------- the bars */

.status {
  margin: 8px clamp(12px, 3vw, 24px) 0;
  padding: 8px 16px;
  border: 1px solid var(--rind);
  border-radius: 14px;
  background:
    repeating-linear-gradient(-45deg, rgba(41, 38, 31, 0.06) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--lemon-bright), var(--sun));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 14px -10px rgba(120, 90, 0, 0.7);
  font-weight: 700;
}

.topbar {
  margin: 8px clamp(12px, 3vw, 24px) 0;
  padding: 8px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
}

.brand__name {
  background: linear-gradient(180deg, var(--charcoal) 30%, #6b5314 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.06em;
}

:root[data-theme="dark"] .brand__name {
  background: linear-gradient(180deg, #fff6c9 20%, var(--sun) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.pill {
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 var(--line-strong);
}

.pill--power {
  background: linear-gradient(180deg, #fff08a, var(--sun));
  border-color: var(--sun-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 0 #c98a1b, 0 0 18px -4px rgba(255, 190, 40, 0.7);
}

#top-gold {
  background: linear-gradient(180deg, #fffbe9, #ffefb0);
}

#top-gems {
  background: linear-gradient(180deg, #f5fcff, #d9f1ff);
  border-color: #a9d6ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 0 #a9d6ee;
}

:root[data-theme="dark"] #top-gold {
  background: linear-gradient(180deg, #3d3526, #31291a);
}

:root[data-theme="dark"] #top-gems {
  background: linear-gradient(180deg, #243542, #1d2b36);
  border-color: #3b5870;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #3b5870;
}

/* ------------------------------------------------------------- buttons */

.btn {
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--line-strong), 0 8px 14px -10px rgba(41, 38, 31, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 0 var(--line-strong), 0 14px 18px -12px rgba(41, 38, 31, 0.55);
}

.btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 var(--line-strong);
}

.btn--primary {
  border-color: var(--sun-deep);
  background: linear-gradient(180deg, #fff3a0 0%, var(--sun) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 0 var(--press), 0 10px 16px -10px rgba(190, 130, 0, 0.7);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff7bd 0%, #ffdc5a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 0 var(--press), 0 16px 20px -12px rgba(190, 130, 0, 0.8);
}

.btn--primary:active:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 var(--press);
}

.btn--xl {
  padding: 16px 52px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85), 0 6px 0 var(--press), 0 18px 26px -14px rgba(190, 130, 0, 0.85);
}

.btn--xl:hover:not(:disabled) {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 8px 0 var(--press), 0 24px 30px -14px rgba(190, 130, 0, 0.9);
}

.btn--xl:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 var(--press);
}

.btn--danger {
  border-color: color-mix(in srgb, var(--bad) 70%, var(--line-strong));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 0 color-mix(in srgb, var(--bad) 45%, var(--line-strong));
}

.btn:disabled {
  filter: saturate(0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 var(--line);
}

/* ---------------------------------------------------------- the dock */

.tabbar {
  margin: 0 clamp(10px, 3vw, 24px) calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 8px clamp(6px, 1.6vw, 14px);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 18px 34px -18px rgba(41, 38, 31, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.tab {
  border-radius: 20px;
  font-size: 12px;
}

.tab.is-active {
  background: linear-gradient(180deg, rgba(255, 240, 150, 0.9), rgba(255, 224, 90, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(224, 185, 60, 0.45);
}

:root[data-theme="dark"] .tab.is-active {
  background: linear-gradient(180deg, rgba(247, 217, 76, 0.22), rgba(247, 217, 76, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(247, 217, 76, 0.3);
}

.tab--main {
  border: 1px solid var(--sun-deep);
  background: linear-gradient(180deg, #fff3a0, var(--sun));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85), 0 5px 0 var(--press), 0 14px 22px -10px rgba(210, 140, 0, 0.75);
}

.tab--main.is-active,
.tab--main:hover,
:root[data-theme="dark"] .tab--main.is-active {
  background: linear-gradient(180deg, #fff8c4, #ffe066);
}

.tab:not(.tab--main).is-active::before {
  top: 3px;
  width: 22px;
  height: 4px;
  margin-left: -11px;
  background: linear-gradient(90deg, var(--sun), var(--sun-deep));
  box-shadow: 0 0 10px rgba(242, 163, 27, 0.7);
}

/* ------------------------------------------------------------- cards */

.panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--shadow);
}

:root[data-theme="dark"] .panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow);
}

.gift.is-ready,
.quest.is-ready,
.ascend.is-ready,
.pethero,
.petteam {
  border-color: var(--sun-deep);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(255, 224, 90, 0.55), transparent 70%),
    linear-gradient(180deg, #fffbe6, #fff0b0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 210, 63, 0.4), var(--shadow);
}

:root[data-theme="dark"] .gift.is-ready,
:root[data-theme="dark"] .quest.is-ready,
:root[data-theme="dark"] .ascend.is-ready,
:root[data-theme="dark"] .pethero,
:root[data-theme="dark"] .petteam {
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(247, 217, 76, 0.18), transparent 70%),
    linear-gradient(180deg, #403720, #2d2718);
}

.lead {
  font-size: 15.5px;
}

.section {
  font-size: 24px;
}

.section::before {
  content: "";
  flex: none;
  align-self: center;
  width: 10px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sun), var(--sun-deep));
  box-shadow: 0 2px 0 var(--press);
}

.section::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.kicker {
  letter-spacing: 0.14em;
}

/* the chapter card on the Battle screen takes on its zone colour */
.chapter {
  border-color: color-mix(in srgb, var(--zone, var(--rind)) 45%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 24px 44px -28px color-mix(in srgb, var(--zone, var(--rind)) 80%, transparent),
    var(--shadow);
}

.chapter__title h1 {
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .chapter__title h1 {
  text-shadow: 0 2px 12px color-mix(in srgb, var(--zone, #f7d94c) 40%, transparent);
}

.stage {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -30px 40px -30px rgba(0, 0, 0, 0.45);
}

.facts > div {
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf2, #fff3cc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="dark"] .facts > div {
  background: linear-gradient(180deg, #38322a, #2e2920);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.slot,
.deal,
.dev__row {
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-sm);
}

.talent__icon,
.ascend__art {
  background: linear-gradient(180deg, #fff6c2, #ffe36a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 0 var(--press);
}

:root[data-theme="dark"] .talent__icon,
:root[data-theme="dark"] .ascend__art {
  background: linear-gradient(180deg, #4a4020, #3a3118);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #2a2210;
}

/* ------------------------------------------------------ bars and tags */

.bar {
  height: 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line-strong) 55%, var(--surface));
  box-shadow: inset 0 1px 2px rgba(41, 38, 31, 0.18);
}

.bar i {
  position: relative;
  background: linear-gradient(180deg, #ffe97a 0%, var(--sun) 45%, var(--sun-deep) 100%);
  box-shadow: 0 0 10px -2px rgba(255, 190, 40, 0.7);
}

.bar i::after {
  content: "";
  position: absolute;
  inset: 1px 4px auto 4px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}

.odds {
  padding: 3px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.tile {
  border-radius: 18px;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 3px 3px 55% 3px;
  border-radius: 13px 13px 40px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ------------------------------------------------------------ pop-ups */

.modal {
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: 0 40px 80px -30px rgba(41, 38, 31, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.modal::backdrop {
  background: radial-gradient(900px 600px at 50% 40%, rgba(41, 38, 31, 0.45), rgba(20, 18, 12, 0.72));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__close {
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 var(--line-strong);
}

.toast {
  box-shadow: 0 16px 30px -14px rgba(41, 38, 31, 0.7);
}

/* ------------------------------------------------------- small polish */

.screen {
  padding-top: 12px;
}

.screen::-webkit-scrollbar {
  width: 10px;
}

.screen::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: var(--line-strong) padding-box;
}

@media (hover: hover) {
  .talent:hover,
  .quest:hover,
  .chest:hover,
  .deal:hover,
  .gift:hover,
  .pet:hover {
    transform: translateY(-3px);
    border-color: var(--sun-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 30px -20px rgba(150, 100, 0, 0.55);
  }
}

@media (max-width: 520px) {
  .topbar {
    margin-inline: 8px;
    border-radius: 18px;
  }

  .status {
    margin-inline: 8px;
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .tabbar {
    margin-inline: 8px;
    border-radius: 24px;
  }

  .section {
    font-size: 21px;
  }
}

/* a pet in the build bar: its picture, then its name and level */
.chip--pet {
  gap: 5px;
  padding: 3px 9px 3px 4px;
}

.chip--pet svg {
  width: 26px;
  height: 26px;
}

.chip--pet em {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.chip--pet b {
  position: static;
  margin-left: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.85;
}

/* the dev password only gets one section, so there is no list beside it */
.devshell__main--solo {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------- admin panel extras */

/* the lobby menu: title with the Undo button beside it */
.devshell__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 40px;
}

.devshell__head h2 {
  margin: 0;
}

.devshell__head .btn {
  max-width: min(60%, 320px);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* list rows with a name over a small line, and buttons that sit together at the end */
.dev__row {
  flex-wrap: wrap;
}

.dev__name {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
  font-weight: 800;
}

.dev__name small {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
}

.dev__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.dev__row .dev__acts .btn {
  margin-left: 0;
}

.dev__no {
  min-width: 28px;
  font-family: var(--font-mono);
  text-align: center;
}

.dev__row--chapter.is-locked {
  opacity: 0.65;
}

.dev__row--chapter.is-cleared .dev__no {
  color: var(--good, #4c9a3f);
}

.devcard .dev__list.dev__list--tall {
  max-height: 52vh;
}

@media (max-width: 520px) {
  /* on a phone the Undo button is just "Undo"; its title still says what it undoes */
  .devshell__what {
    display: none;
  }
}

.dev__pet {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
}

.dev__pet svg {
  width: 30px;
  height: 30px;
}

.dev__give--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.dev__give--grid label {
  min-width: 0;
}

.dev__give--grid input {
  width: 100%;
}

.dev input[type="text"],
.dev input[type="file"] {
  font: inherit;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
}

/* the DEV panel inside a battle */
.devbox__note {
  margin: 8px 0 0;
  padding: 7px 12px;
  border: 1px solid var(--rind);
  border-radius: var(--radius-sm);
  background: var(--lemon-pale);
  color: var(--charcoal);
  font-size: 13.5px;
  font-weight: 700;
}

:root[data-theme="dark"] .devbox__note {
  background: #4a4020;
  color: var(--ink);
}

.devbox__facts {
  margin-top: 4px;
}

.devbox__field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.devbox__field label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}

.devbox__field input,
.devbox__field select,
.devbox__search {
  font: inherit;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
}

.devbox__field input[type="number"] {
  width: 9.5em;
}

.devbox__search {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.devbox .hint {
  margin-top: 8px;
}

/* =========================================================================
   SOFTNESS PASS
   Rounder corners, light and wide shadows instead of hard bottom edges,
   softer outlines, and slower, smoother movement. It only changes how things
   look. Delete this whole block and the earlier look is back exactly.
   ========================================================================= */

:root {
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 30px;
  --soft-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --line: #f1e8cb;
  --line-strong: #e8dcb4;
  --shadow-sm: 0 2px 6px -2px rgba(41, 38, 31, 0.1), 0 8px 18px -10px rgba(41, 38, 31, 0.2);
  --shadow: 0 4px 10px -4px rgba(41, 38, 31, 0.1), 0 20px 38px -20px rgba(41, 38, 31, 0.28);
  --shadow-lift: 0 6px 14px -6px rgba(41, 38, 31, 0.12), 0 28px 50px -22px rgba(41, 38, 31, 0.34);
}

:root[data-theme="dark"] {
  --line: #373126;
  --line-strong: #453d2e;
  --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.35), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
  --shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35), 0 20px 38px -20px rgba(0, 0, 0, 0.75);
  --shadow-lift: 0 6px 14px -6px rgba(0, 0, 0, 0.4), 0 28px 50px -22px rgba(0, 0, 0, 0.85);
}

/* ------------------------------------------------------------- buttons */

.btn {
  border-color: color-mix(in srgb, var(--line-strong) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px -5px rgba(41, 38, 31, 0.22);
  transition: transform 0.3s var(--soft-ease), box-shadow 0.3s var(--soft-ease), filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 22px -10px rgba(41, 38, 31, 0.3);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: inset 0 1px 3px rgba(41, 38, 31, 0.1), 0 2px 6px -3px rgba(41, 38, 31, 0.2);
}

.btn--primary {
  border-color: color-mix(in srgb, var(--sun-deep) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 6px 14px -6px rgba(214, 150, 10, 0.55);
}

.btn--primary:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 14px 24px -10px rgba(214, 150, 10, 0.6);
}

.btn--primary:active:not(:disabled) {
  box-shadow: inset 0 1px 3px rgba(150, 100, 0, 0.18), 0 2px 6px -3px rgba(214, 150, 10, 0.45);
}

.btn--xl {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 12px 24px -10px rgba(214, 150, 10, 0.6);
}

.btn--xl:hover:not(:disabled) {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 18px 32px -12px rgba(214, 150, 10, 0.65);
}

.btn--xl:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 2px 4px rgba(150, 100, 0, 0.2), 0 4px 10px -5px rgba(214, 150, 10, 0.45);
}

.btn--danger {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px -5px color-mix(in srgb, var(--bad) 40%, transparent);
}

.btn:disabled {
  box-shadow: none;
}

:root[data-theme="dark"] .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 12px -5px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .btn:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 22px -10px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------- bars, pills and the dock */

.pill {
  border-color: color-mix(in srgb, var(--line-strong) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 8px -4px rgba(41, 38, 31, 0.2);
}

.pill--power {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px -4px rgba(255, 190, 40, 0.65);
}

#top-gems {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px -4px rgba(120, 190, 230, 0.55);
}

:root[data-theme="dark"] #top-gems {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px -4px rgba(0, 0, 0, 0.6);
}

.status {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--rind) 60%, transparent);
}

.topbar {
  border-radius: 26px;
}

.tabbar {
  border-radius: 32px;
  box-shadow: 0 20px 40px -22px rgba(41, 38, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tab {
  border-radius: 24px;
  transition: background-color 0.3s var(--soft-ease), box-shadow 0.3s var(--soft-ease), transform 0.3s var(--soft-ease);
}

.tab--main {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 10px 20px -8px rgba(210, 140, 0, 0.6);
}

/* ------------------------------------------------------ cards and panels */

.panel {
  border-radius: 28px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.slot,
.deal,
.dev__row {
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.facts > div {
  border-radius: 18px;
}

.tile {
  border-radius: 22px;
}

.tile::after {
  border-radius: 18px 18px 44px 44px;
}

.devcard {
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.devnav__item,
.devbox__toggle {
  border-radius: 18px;
}

.devbox__tab,
.devtabs__tab {
  transition: background-color 0.25s ease, color 0.25s ease;
}

.section::before {
  border-radius: 8px;
  box-shadow: 0 3px 8px -3px rgba(214, 150, 10, 0.6);
}

.talent__icon,
.ascend__art {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 10px -5px rgba(214, 150, 10, 0.5);
}

:root[data-theme="dark"] .talent__icon,
:root[data-theme="dark"] .ascend__art {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 5px 10px -5px rgba(0, 0, 0, 0.6);
}

.talent,
.quest,
.chest,
.deal,
.gift,
.pet,
.slot {
  transition: transform 0.35s var(--soft-ease), box-shadow 0.35s var(--soft-ease), border-color 0.25s ease;
}

@media (hover: hover) {
  .talent:hover,
  .quest:hover,
  .chest:hover,
  .deal:hover,
  .gift:hover,
  .pet:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--sun-deep) 55%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 36px -22px rgba(150, 100, 0, 0.5);
  }
}

.bar {
  box-shadow: inset 0 1px 3px rgba(41, 38, 31, 0.12);
}

.bar i {
  box-shadow: 0 0 14px -3px rgba(255, 190, 40, 0.6);
}

/* ------------------------------------------------------------- pop-ups */

.modal {
  border-radius: 34px;
  box-shadow: 0 46px 90px -34px rgba(41, 38, 31, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.modal::backdrop {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.modal__close {
  box-shadow: 0 4px 10px -4px rgba(41, 38, 31, 0.3);
  transition: transform 0.3s var(--soft-ease), box-shadow 0.3s var(--soft-ease);
}

.modal__close:hover {
  transform: scale(1.06);
}

.toast {
  border-radius: 99px;
  box-shadow: 0 18px 34px -16px rgba(41, 38, 31, 0.6);
}

/* ------------------------------------------------------ the battle HUD */

.hud__build .chip {
  padding: 6px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tier, #9aa1a9) 34%, rgba(24, 20, 14, 0.82)), rgba(24, 20, 14, 0.82) 72%);
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hud__build .chip .ico {
  width: 18px;
  height: 18px;
}

.chip {
  border-radius: 14px;
  border-width: 1px;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.6);
}

.chip b {
  border-radius: 99px;
}

.sheet {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* level-up cards: a glow of their tier's colour at the top, a tier ribbon, and a pip for each level */
.choose__title {
  text-shadow: 0 0 24px rgba(255, 214, 90, 0.55), 0 3px 0 rgba(120, 80, 0, 0.55);
  animation: deal 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.upcard {
  overflow: hidden;
  padding-top: 22px;
  border-top: 0;
  border-radius: 26px;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tier) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--tier) 10%, #fff9e6), #fff9e6 60%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 35%, transparent), 0 14px 34px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.35s var(--soft-ease), box-shadow 0.35s var(--soft-ease);
}

.upcard:hover,
.upcard:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier) 65%, transparent), 0 0 34px -4px color-mix(in srgb, var(--tier) 65%, transparent), 0 22px 40px -16px rgba(0, 0, 0, 0.8);
}

.upcard__key {
  border-radius: 9px;
}

.upcard__icon {
  width: 64px;
  height: 64px;
  background: radial-gradient(circle at 35% 30%, #fffcf2, color-mix(in srgb, var(--tier) 22%, #fffcf2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tier) 16%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--tier) 80%, transparent);
  transition: transform 0.35s var(--soft-ease);
}

.upcard:hover .upcard__icon,
.upcard:focus-visible .upcard__icon {
  transform: scale(1.08) rotate(-4deg);
}

.upcard__tier {
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--tier);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.upcard__level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.upcard__pips {
  display: flex;
  gap: 4px;
}

.upcard__pips i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(41, 38, 31, 0.13);
}

.upcard__pips .is-had {
  background: color-mix(in srgb, var(--tier) 70%, #29261f);
}

.upcard__pips .is-new {
  background: var(--tier);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier) 30%, transparent);
  animation: pip-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes pip-pulse {
  to {
    transform: scale(1.3);
  }
}

/* a legendary card has a slow shine across it */
.upcard--legend::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: card-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes card-shine {
  from {
    background-position: 130% 0;
  }

  to {
    background-position: -130% 0;
  }
}

/* the pause box: how the battle is going, in four tiles */
.pausebox__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 16px;
}

.pausebox__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.pausebox__stat .ico {
  width: 18px;
  height: 18px;
  color: var(--rind);
}

.pausebox__stat small {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pausebox__stat b {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
}

@media (max-width: 640px) {
  .pausebox__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upcard__level {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud__lvl.is-up,
  .hud__me.is-low .hud__hp,
  .hud__time[data-mood="boss"],
  .upcard__pips .is-new,
  .upcard--legend::after {
    animation: none;
  }
}

/* the battle's own admin panel */

.devup {
  border-radius: 16px;
  border-left-width: 3px;
}

.devbox__note,
.devbox__search,
.devbox__field input,
.devbox__field select,
.dev select,
.dev input[type="number"],
.dev input[type="text"],
.dev input[type="file"] {
  border-radius: 14px;
}

/* ------------------------------------------------------ settings, extra */

.settings h3 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
}

.settings__row > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.settings__row small {
  color: var(--ink-faint);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.settings__range {
  width: min(46%, 220px);
  accent-color: var(--sun-deep);
  cursor: pointer;
}

/* the optional frame-rate counter in a battle */
.hud__fps {
  position: absolute;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(20, 18, 14, 0.6);
  color: #fffcf2;
  font-family: var(--font-mono);
  font-size: 12px;
  pointer-events: none;
}

/* Settings > Glass blur off: no frosted backgrounds anywhere */
:root[data-blur="off"] *,
:root[data-blur="off"] *::before,
:root[data-blur="off"] *::after,
:root[data-blur="off"] .modal::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ------------------------------------------- the admin key pad (phones only) */

.codepad {
  position: fixed;
  right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 44px);
  grid-template-rows: repeat(2, 44px);
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--glass-edge);
  border-radius: 26px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.codepad__key,
.codepad__close {
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.codepad__key:active {
  transform: scale(0.94);
}

.codepad__key--up { grid-column: 2; grid-row: 1; }
.codepad__key--left { grid-column: 1; grid-row: 2; }
.codepad__key--down { grid-column: 2; grid-row: 2; }
.codepad__key--right { grid-column: 3; grid-row: 2; }
.codepad__key--b { grid-column: 4; grid-row: 2; }
.codepad__key--a { grid-column: 5; grid-row: 2; }
.codepad__key--start {
  grid-column: 3 / span 2;
  grid-row: 1;
  height: 30px;
  align-self: center;
  border-radius: 15px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.codepad__close {
  grid-column: 5;
  grid-row: 1;
  width: 30px;
  height: 30px;
  align-self: start;
  justify-self: end;
  font-size: 18px;
  line-height: 1;
}

/* -------------------------------------------------------- endless swarm */

.endless {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
}

.endless__art {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4a3f5e, #2e2740);
  color: #e9dcff;
  box-shadow: 0 6px 14px -6px rgba(46, 39, 64, 0.7);
}

.endless__art .ico {
  width: 28px;
  height: 28px;
}

.endless__body {
  flex: 1;
  min-width: 0;
}

.endless__body h3 {
  font-family: var(--font-display);
  font-size: 19px;
}

.endless__body p {
  color: var(--ink-soft);
  font-size: 14px;
}

.endless__best {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ink) !important;
  font-weight: 800;
}

.endless__best .ico {
  width: 16px;
  height: 16px;
}

.endless.is-locked {
  opacity: 0.7;
}

.endless.is-locked .endless__art {
  background: var(--surface-2);
  color: var(--ink-faint);
  box-shadow: none;
}

/* the daily challenge uses the same card, in warm colours */
.endless--challenge .endless__art {
  background: linear-gradient(180deg, #f2a31b, #d9682a);
  color: #fff8e6;
  box-shadow: 0 6px 14px -6px rgba(217, 104, 42, 0.7);
}

.endless--challenge .kicker {
  margin-bottom: 1px;
}

.endless--challenge.is-done .endless__art {
  background: linear-gradient(180deg, #7cc46a, #4f9a45);
  box-shadow: 0 6px 14px -6px rgba(79, 154, 69, 0.7);
}

.endless__best .price {
  margin: 0 2px;
  vertical-align: -2px;
}

.endless__best .ico {
  flex: none;
}

.results__challenge {
  flex-wrap: wrap;
  color: var(--ink);
}

@media (max-width: 520px) {
  .endless {
    flex-wrap: wrap;
  }

  .endless .btn {
    width: 100%;
  }
}

/* -------------------------------------------------------- daily rewards */

.daily {
  margin-top: 14px;
  padding: 16px 18px 18px;
}

.daily.is-ready {
  border-color: var(--sun-deep);
}

.daily__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.daily__head h3 {
  font-family: var(--font-display);
  font-size: 19px;
}

.daily__head p {
  color: var(--ink-soft);
  font-size: 14px;
}

.daily__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.daily__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
  font-size: 12.5px;
}

.daily__day b {
  color: var(--ink-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.daily__art .ico {
  width: 28px;
  height: 28px;
}

.daily__what {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  line-height: 1.2;
}

.daily__what .price + .price {
  margin-left: 0;
}

.daily__chest {
  font-size: 11.5px;
}

.daily__day.is-today {
  border-color: var(--sun-deep);
  background: linear-gradient(180deg, #fff6c2, #ffe36a);
  box-shadow: 0 8px 18px -10px rgba(214, 150, 10, 0.8);
  animation: dailyGlow 2.2s ease-in-out infinite;
}

.daily__day.is-done {
  opacity: 0.55;
}

.daily__day.is-done .daily__art {
  color: var(--good);
}

.daily__day.is-big:not(.is-done) {
  background: linear-gradient(180deg, #f3ecff, #e2d4ff);
  border-color: #b9a2f5;
}

:root[data-theme="dark"] .daily__day.is-today {
  background: linear-gradient(180deg, #5a4a1c, #443812);
}

:root[data-theme="dark"] .daily__day.is-big:not(.is-done) {
  background: linear-gradient(180deg, #3b3150, #2c2540);
  border-color: #5d4c86;
}

@keyframes dailyGlow {
  50% {
    box-shadow: 0 8px 22px -6px rgba(214, 150, 10, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .daily__day.is-today {
    animation: none;
  }
}

:root[data-motion="off"] .daily__day.is-today {
  animation: none;
}

@media (max-width: 640px) {
  .daily__head {
    flex-wrap: wrap;
  }

  .daily__head .btn {
    width: 100%;
  }

  .daily__days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .daily__day.is-big {
    grid-column: span 1;
  }
}

/* --------------------------------------------------- the combo counter */

.hud__combo {
  position: absolute;
  top: 66px;
  right: clamp(10px, 2vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--lemon-bright);
  font-family: var(--font-display);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.hud__combo b {
  font-size: 30px;
  font-weight: 800;
}

.hud__combo span {
  color: #fffcf2;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hud__combo[data-tier="1"] b {
  color: #ffb84a;
  font-size: 34px;
}

.hud__combo[data-tier="2"] b {
  color: #ff7a5c;
  font-size: 38px;
}

.hud__combo[data-tier="3"] b {
  color: #c49bff;
  font-size: 42px;
  text-shadow: 0 0 16px rgba(196, 155, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* =========================================================================
   MENU BACKDROP (js/scenery.js)
   An orchard behind the menus: sky, sun or moon and stars, drifting clouds,
   two rows of hills with lemon trees, and petals (fireflies at night).
   ========================================================================= */

.scenery {
  --sky-top: rgba(170, 220, 255, 0.55);
  --hill-far: #d3e7ab;
  --hill-near: #b2d488;
  --leaf-far: #a9cb7e;
  --leaf: #7fb069;
  --trunk: #8a6a42;
  --fruit: #f7d94c;
  --cloud: rgba(255, 255, 255, 0.9);
  --petal: #fff1ee;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

:root[data-theme="dark"] .scenery {
  --sky-top: rgba(30, 40, 90, 0.55);
  --hill-far: #232b20;
  --hill-near: #1b2219;
  --leaf-far: #27321f;
  --leaf: #2c3c22;
  --trunk: #3a2c1c;
  --fruit: #b9982f;
  --cloud: rgba(200, 210, 255, 0.07);
}

.scenery__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky-top), transparent 55%);
}

.scenery__sun {
  position: absolute;
  top: 8vh;
  right: 8vw;
  width: 15vmin;
  height: 15vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7cc 0 38%, #ffe066 58%, rgba(255, 224, 102, 0) 71%);
  box-shadow: 0 0 90px 30px rgba(255, 220, 90, 0.3);
  animation: sunGlow 7s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .scenery__sun {
  background:
    radial-gradient(circle at 64% 38%, var(--bg) 0 30%, transparent 31%),
    radial-gradient(circle, #fdf6df 0 46%, rgba(253, 246, 223, 0) 60%);
  box-shadow: 0 0 70px 10px rgba(253, 246, 223, 0.12);
  animation: none;
}

@keyframes sunGlow {
  to {
    box-shadow: 0 0 120px 44px rgba(255, 220, 90, 0.38);
  }
}

/* a field of stars, only at night */
.scenery__stars {
  display: none;
  position: absolute;
  inset: 0 0 45% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 140px 80px, #fdf6df, transparent),
    radial-gradient(1.4px 1.4px at 260px 20px, #fff, transparent),
    radial-gradient(1px 1px at 90px 150px, #fdf6df, transparent),
    radial-gradient(1.8px 1.8px at 330px 120px, #fff, transparent);
  background-size: 360px 180px;
  opacity: 0.7;
  animation: twinkle 4s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .scenery__stars {
  display: block;
}

@keyframes twinkle {
  to {
    opacity: 0.35;
  }
}

.scenery__cloud {
  position: absolute;
  left: 0;
  width: 22vw;
  min-width: 170px;
  animation: cloudDrift 150s linear infinite;
}

.scenery__cloud svg {
  display: block;
  width: 100%;
}

.scenery__cloud path {
  fill: var(--cloud);
}

.scenery__cloud--1 {
  top: 7vh;
  animation-delay: -30s;
}

.scenery__cloud--2 {
  top: 19vh;
  width: 14vw;
  opacity: 0.8;
  animation-duration: 200s;
  animation-delay: -120s;
}

.scenery__cloud--3 {
  top: 31vh;
  width: 27vw;
  opacity: 0.6;
  animation-duration: 260s;
  animation-delay: -200s;
}

@keyframes cloudDrift {
  from {
    transform: translateX(-35vw);
  }
  to {
    transform: translateX(110vw);
  }
}

.scenery__hills {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.scenery__hills--far {
  height: 34vh;
}

.scenery__hills--far path {
  fill: var(--hill-far);
}

.scenery__hills--near {
  height: 22vh;
}

.scenery__hills--near path {
  fill: var(--hill-near);
}

.scenery__trees {
  position: absolute;
  inset: 0;
}

.tree {
  position: absolute;
  width: calc(12vmin * var(--s, 1));
  min-width: 46px;
  transform-origin: 50% 100%;
  animation: treeSway var(--sway, 6s) ease-in-out infinite alternate;
}

.tree svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.tree--far {
  bottom: 17vh;
  opacity: 0.85;
}

.tree--near {
  bottom: 5vh;
}

.tree__trunk {
  fill: var(--trunk);
}

.tree__crown circle {
  fill: var(--leaf);
}

.tree--far .tree__crown circle {
  fill: var(--leaf-far);
}

.tree__shine {
  fill: rgba(255, 255, 255, 0.14);
}

.tree__fruit {
  fill: var(--fruit);
  stroke: rgba(0, 0, 0, 0.12);
  stroke-width: 1;
}

@keyframes treeSway {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}

/* petals by day */
.scenery__float i {
  position: absolute;
  top: -4vh;
  left: var(--x);
  width: 11px;
  height: 7px;
  border-radius: 70% 0 70% 0;
  background: var(--petal);
  box-shadow: 0 1px 2px rgba(150, 110, 60, 0.18);
  opacity: 0.85;
  animation: petalFall var(--d) linear infinite;
  animation-delay: var(--delay);
}

@keyframes petalFall {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(var(--w), 55vh) rotate(220deg);
  }
  100% {
    transform: translate(calc(var(--w) * -0.4), 112vh) rotate(430deg);
  }
}

/* fireflies by night */
:root[data-theme="dark"] .scenery__float i {
  top: auto;
  bottom: 6vh;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe66d;
  box-shadow: 0 0 10px 3px rgba(255, 230, 109, 0.6);
  animation: fireflyRise var(--d) ease-in-out infinite alternate, fireflyBlink 2.6s ease-in-out infinite alternate;
  animation-delay: var(--delay), var(--delay);
}

@keyframes fireflyRise {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--w), -42vh);
  }
}

@keyframes fireflyBlink {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 1;
  }
}

/* still when animations are off (Settings) or the device asks for less motion */
:root[data-motion="off"] .scenery *,
:root[data-motion="off"] .scenery *::before {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .scenery * {
    animation: none !important;
  }
}

/* ---------------------------------------------- power-ups running (HUD) */

.hud__buffs {
  position: absolute;
  top: 116px;
  right: clamp(10px, 2vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.buff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--c) 30%, rgba(20, 18, 14, 0.75));
  box-shadow: 0 0 14px -4px var(--c);
  color: #fffcf2;
  font-family: var(--font-display);
  font-size: 14px;
  animation: buffIn 0.3s var(--soft-ease, ease) both;
}

.buff i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.85;
}

.buff.is-ending {
  animation: buffBlink 0.35s steps(2, jump-none) infinite;
}

@keyframes buffIn {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.9);
  }
}

@keyframes buffBlink {
  50% {
    opacity: 0.4;
  }
}

/* ------------------------------------------------- the guide in Settings */

.guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.guide__part {
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 18px;
  background: var(--surface-2);
  overflow: hidden;
}

.guide__part summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.guide__part summary::-webkit-details-marker {
  display: none;
}

.guide__part summary .ico {
  width: 22px;
  height: 22px;
  flex: none;
}

.guide__part summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2.5px solid var(--ink-faint);
  border-bottom: 2.5px solid var(--ink-faint);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s var(--soft-ease, ease);
}

.guide__part[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.guide__part[open] summary {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.guide__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

.guide__body b {
  color: var(--ink);
}

.guide__body p {
  margin: 0;
}

.guide__sub {
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 700;
}

.guide__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide__list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.guide__badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 14px -2px var(--c);
  color: #fffcf2;
}

.guide__badge .ico {
  width: 18px;
  height: 18px;
}

.guide__boss {
  align-items: flex-start !important;
}

.guide__art {
  flex: none;
  width: 48px;
  height: 48px;
}

.guide__art svg {
  width: 48px;
  height: 48px;
}

.guide__boss small {
  color: var(--ink-faint);
  font-size: 12px;
}

/* the Battle screen's "New here? How to play" */
.home__guide {
  margin: 4px auto 0;
}

/* -------------------------------------- "womp womp" (the dev password trap) */

.womp {
  text-align: center;
}

.womp__art {
  width: 96px;
  height: 96px;
  margin: 0 auto 4px;
  transform: rotate(18deg);
  filter: saturate(0.5) brightness(0.92);
  animation: wompDroop 1.6s ease-in-out infinite alternate;
}

.womp__art svg {
  width: 100%;
  height: 100%;
}

.womp h2 {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.02em;
}

@keyframes wompDroop {
  to {
    transform: rotate(26deg) translateY(4px);
  }
}

/* ----- chest contents: one folding part per slot ----- */
.chestinfo__part {
  margin: 8px 0;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 16px;
  background: var(--surface-2);
  overflow: hidden;
}

.chestinfo__part summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}

.chestinfo__part summary::-webkit-details-marker {
  display: none;
}

.chestinfo__part summary small {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-body, inherit);
  font-size: 12px;
  color: var(--ink-faint);
}

.chestinfo__part summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2.5px solid var(--ink-faint);
  border-bottom: 2.5px solid var(--ink-faint);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s var(--soft-ease, ease);
}

.chestinfo__part[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.chestinfo__part .chestinfo__list {
  padding: 0 8px 8px;
}

.chestinfo__part .chestinfo__item {
  background: var(--surface);
}

/* ----- the dash button: bottom right, sweeping back to full as it recharges ----- */
.hud__dash {
  position: absolute;
  right: clamp(10px, 2vw, 18px);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 2px solid rgba(255, 244, 184, 0.35);
  border-radius: 50%;
  background: rgba(20, 18, 14, 0.62);
  color: var(--lemon-bright, #f7d94c);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.hud__dash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(10, 9, 7, 0.68) calc(var(--left, 0) * 360deg), transparent 0);
  pointer-events: none;
}

.hud__dash .ico {
  position: relative;
  width: 26px;
  height: 26px;
}

.hud__dash small {
  position: relative;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.hud__dash.is-ready {
  border-color: var(--lemon-bright, #f7d94c);
  box-shadow: 0 0 14px rgba(247, 217, 76, 0.45);
}

.hud__dash:active {
  transform: scale(0.94);
}

@media (hover: none) {
  .hud__dash {
    width: 68px;
    height: 68px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .hud__dash .ico {
    width: 30px;
    height: 30px;
  }

  .hud__dash small {
    display: none;
  }
}

/* the upgrade chips along the bottom stop short of the dash button */
.hud__build {
  right: calc(clamp(10px, 2vw, 18px) + 70px);
}

@media (hover: none) {
  .hud__build {
    right: calc(clamp(10px, 2vw, 18px) + 78px);
  }
}

/* ----- awakenings: a gold card, and a gold chip with a star ----- */
.upcard--awaken {
  background: linear-gradient(180deg, #fff1b8, #fff9e6 60%);
  box-shadow: 0 0 0 2px #ffd54a, 0 0 26px rgba(255, 213, 74, 0.55), 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  animation: deal 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both, awakenGlow 1.6s ease-in-out 0.3s infinite;
}

@keyframes awakenGlow {
  50% {
    box-shadow: 0 0 0 2px #ffd54a, 0 0 40px rgba(255, 213, 74, 0.8), 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  }
}

.chip--awake {
  box-shadow: 0 0 10px rgba(255, 213, 74, 0.55);
}

.chip--awake b {
  color: #ffd54a;
}

@media (prefers-reduced-motion: reduce) {
  .upcard--awaken {
    animation: none;
  }
}

/* ------------------------------------------- accounts and the leaderboard */

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, hsl(var(--hue, 45) 62% 56%), hsl(var(--hue, 45) 58% 42%));
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 32px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 8px 18px -10px rgba(41, 38, 31, 0.6);
}

/* the account button at the top right */
.account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 190px;
  padding: 4px 14px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 75%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 8px -4px rgba(41, 38, 31, 0.2);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.account:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -6px rgba(41, 38, 31, 0.3);
}

:root[data-theme="dark"] .account {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 8px -4px rgba(0, 0, 0, 0.6);
}

.account__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account.is-off .avatar {
  background: var(--surface-2);
  color: var(--ink-faint);
  text-shadow: none;
}

@media (max-width: 640px) {
  .account {
    padding: 3px;
  }

  .account__name {
    display: none;
  }
}

@media (max-width: 400px) {
  .account .avatar {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

/* the account window and its leaderboard */
.modal--account {
  width: min(94vw, 560px);
}

.acct__me {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 36px;
}

.acct__who {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

.acct__who h2 {
  overflow-wrap: anywhere;
}

.acct__who p {
  color: var(--ink-soft);
  font-size: 14px;
}

.acct__who b {
  color: var(--ink);
}

.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.modal .board__head h3 {
  margin: 0;
}

.board__by {
  margin-bottom: 10px;
}

.board__by .filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.board__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.board__span {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.board__span button {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.board__span button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.board__search {
  flex: 1 1 140px;
  min-width: 0;
  padding: 8px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.board__search:focus {
  outline: none;
  border-color: var(--accent-deep);
}

.board__what {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 700;
}

.board__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board__list--me {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
}

.board__row {
  display: grid;
  grid-template-columns: 30px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
}

.board__row.is-me {
  border-color: var(--rind);
  background: color-mix(in srgb, var(--lemon) 24%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--rind);
}

.board__rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.board__rank--1 {
  background: linear-gradient(180deg, #ffe680, #f2b93b);
  color: #5a3d00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 #c98a1b;
}

.board__rank--2 {
  background: linear-gradient(180deg, #f1f4f8, #b8c1cf);
  color: #3b4352;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 0 #8d96a8;
}

.board__rank--3 {
  background: linear-gradient(180deg, #f6c79a, #d08a4e);
  color: #4d2a0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #a0663a;
}

.board__who {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.board__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
  font-weight: 800;
  white-space: nowrap;
}

/* tags drop to a second line before the name is cut short */
.board__nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board__name em {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--rind);
  color: var(--charcoal);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.board__name em.is-owner {
  background: linear-gradient(180deg, #ffe680, #f2b93b);
  color: #5a3d00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px #c98a1b;
}

.board__who small {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 600;
}

.board__value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board__ghost {
  border-color: transparent;
  background: var(--surface-2);
  animation: board-ghost 1.1s ease-in-out infinite alternate;
}

@keyframes board-ghost {
  to {
    opacity: 0.4;
  }
}

.board__empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 12px;
  color: var(--ink-soft);
  text-align: center;
}

.board__more {
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 520px) {
  .acct__me {
    gap: 12px;
  }

  .avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }

  .board__row {
    grid-template-columns: 26px 28px minmax(0, 1fr) auto;
    gap: 8px;
    padding-right: 10px;
  }

  .board__row .avatar {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .board__value {
    font-size: 15px;
  }

  .board__span {
    width: 100%;
  }

  .board__span button {
    flex: 1;
  }
}

/* the log-in screen, in front of everything until someone is in */
.gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.gate__card {
  width: min(100%, 400px);
  padding: 26px 24px 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 32px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--glass-edge);
  text-align: center;
  animation: rise 0.35s ease both;
}

.gate__art {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  animation: lemon-bob 6s ease-in-out infinite;
  transform-origin: 50% 60%;
}

.gate__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gate__title {
  margin: 6px 0 0;
  background: linear-gradient(180deg, var(--charcoal) 30%, #6b5314 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

:root[data-theme="dark"] .gate__title {
  background: linear-gradient(180deg, #fff6c9 20%, var(--sun) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.gate__tag {
  margin-top: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gate__checking {
  margin: 26px 0 8px;
  color: var(--ink-soft);
  font-weight: 700;
}

.gate__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 20px 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.gate__tab {
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.gate__tab[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  color: var(--charcoal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 var(--rind);
}

.gate__form {
  display: grid;
  gap: 12px;
  text-align: left;
}

.gate__field {
  display: grid;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.gate__field input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.gate__field input:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lemon) 35%, transparent);
}

.gate__error {
  color: var(--bad);
  font-size: 14px;
  font-weight: 700;
}

.gate__error:empty {
  display: none;
}

.gate__go {
  width: 100%;
  margin-top: 4px;
  padding: 13px 20px;
  font-size: 16px;
}

.gate__note {
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.45;
}

.gate__note b {
  color: var(--ink-soft);
}

.gate__rules {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

.gate__rules .ico {
  margin-top: 2px;
  color: var(--bad);
}

.gate__down {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.gate__downbtns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .gate__art,
  .gate__card,
  .board__ghost {
    animation: none;
  }
}

/* ------------------------------------------------- moderation (admins only) */

.board__mod {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 3 / -1;
}

.board__act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.board__act:hover:not(:disabled),
.board__act[aria-pressed="true"] {
  border-color: var(--accent-deep);
  color: var(--ink);
}

.board__act[aria-pressed="true"] {
  background: color-mix(in srgb, var(--lemon) 30%, var(--surface));
}

.board__act.is-danger {
  border-color: color-mix(in srgb, var(--bad) 55%, var(--line-strong));
  color: var(--bad);
}

.board__act.is-danger[aria-pressed="true"] {
  background: color-mix(in srgb, var(--bad) 14%, var(--surface));
}

.board__act:disabled {
  opacity: 0.5;
  cursor: default;
}

.board__row.is-banned {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
}

.board__row.is-banned .avatar {
  filter: grayscale(1);
  opacity: 0.6;
}

.board__ban {
  color: var(--bad);
  font-weight: 800;
}

.board__name em.is-admin {
  background: var(--surface-2);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.board__bannedbox {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}

.board__bannedbtn {
  justify-self: center;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line-strong));
  border-radius: 999px;
  background: var(--surface);
  color: var(--bad);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.board__bannedbtn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--bad) 10%, var(--surface));
}

.board__form {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.board__field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 800;
}

.board__field textarea,
.board__field select,
.board__field input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.board__field textarea {
  resize: vertical;
}

.board__field textarea:focus,
.board__field select:focus,
.board__field input:focus {
  outline: none;
  border-color: var(--accent-deep);
}

.board__pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px;
}

.board__formerr {
  color: var(--bad);
  font-size: 13px;
  font-weight: 700;
}

.board__formerr:empty {
  display: none;
}

.board__formbtns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 520px) {
  .board__mod {
    grid-column: 1 / -1;
  }

  .board__pair {
    grid-template-columns: 1fr;
  }
}

/* the screen a banned or timed-out player sees */
.ban__art {
  filter: grayscale(0.85);
  opacity: 0.85;
  animation: none;
}

.ban .gate__title {
  background: linear-gradient(180deg, #a83232 20%, #6b1d1d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-theme="dark"] .ban .gate__title {
  background: linear-gradient(180deg, #ffb4b4 20%, #f07070 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.ban__lead {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 800;
}

.ban__msg {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
}

.ban__msg span {
  color: var(--ink-faint);
  font-size: 12.5px;
  font-weight: 800;
}

.ban__msg p {
  margin-top: 4px;
  font-size: 15.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ban__left {
  margin-top: 12px;
  color: var(--ink-soft);
}

.ban .gate__downbtns {
  margin-top: 18px;
}

/* a gift from a moderator */
.giftnote {
  text-align: center;
}

.giftnote__art {
  width: 72px;
  height: 72px;
  margin: 0 auto 6px;
}

.giftnote__art svg {
  width: 100%;
  height: 100%;
}

.giftnote__got {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 6px;
}

.giftnote__item {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 110px;
}

.giftnote__item small {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.giftnote__money {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 18px;
}

.giftnote .modal__actions {
  justify-content: center;
}

.giftnote__msg {
  margin-top: 10px;
  color: var(--ink-soft);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- rank emblems */

.tierdefs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tier {
  display: inline-grid;
  flex: none;
  width: 26px;
  height: 26px;
}

.tier svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(41, 38, 31, 0.28));
}

.tier--lg {
  width: 38px;
  height: 38px;
}

.tier--unranked {
  opacity: 0.85;
}

.tier--citrine svg {
  animation: tier-citrine 3.2s ease-in-out infinite;
}

.tier--zenith svg {
  animation: tier-zenith 2.4s ease-in-out infinite;
}

@keyframes tier-citrine {
  0%,
  100% {
    filter: drop-shadow(0 1px 1px rgba(41, 38, 31, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(255, 214, 58, 0.95));
  }
}

@keyframes tier-zenith {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 170, 40, 0.7));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(255, 190, 60, 1)) drop-shadow(0 0 3px rgba(181, 108, 255, 0.85));
  }
}

.board__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* your rank on every board, under your name */
.ranks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
}

.ranks__cell {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ranks__cell:hover {
  border-color: var(--accent-deep);
}

.ranks__cell.is-on {
  border-color: var(--rind);
  background: color-mix(in srgb, var(--lemon) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--rind);
}

.ranks__cell b {
  font-size: 12px;
  font-weight: 800;
}

.ranks__cell small {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* every rank on the board on show, and what it takes */
.ladder {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  list-style: none;
}

.ladder__step {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  opacity: 0.45;
  filter: grayscale(0.75);
}

.ladder__step.is-got {
  opacity: 1;
  filter: none;
}

.ladder__step.is-now .tier {
  transform: scale(1.2);
}

.ladder__step b {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 800;
}

.ladder__step small {
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ladder__next {
  margin: 6px 0 12px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.ladder__next b {
  color: var(--ink);
}

@media (max-width: 520px) {
  .ranks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ladder {
    grid-template-columns: repeat(7, 52px);
    overflow-x: auto;
  }

  .board__row .tier {
    width: 22px;
    height: 22px;
  }

  .board__value {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tier--citrine svg,
  .tier--zenith svg {
    animation: none;
  }
}

/* ---------------------------------------------------------------- casino */
/* Blackjack and Black & White, in pop-ups from the Shop. The felt and the
   cards keep their colours in both themes, like a real table. */

.casino__rules {
  margin: 6px 34px 14px 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.casino__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface-2);
  font-weight: 800;
  text-align: center;
  animation: rise 0.25s ease both;
}

.casino__result--good {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 16%, var(--surface));
}

.casino__result--bad {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
}

/* --- blackjack */

.felt {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #3f8a55, #24583a);
  color: #f4fbef;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 4px #8b5e34;
}

.felt__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.felt__who b {
  padding: 1px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--font-mono);
  font-size: 13px;
}

.felt__bet {
  margin-left: auto;
  font-size: 13px;
}

.felt__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 76px;
}

.pcard {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 76px;
  border-radius: 9px;
  background: #fffcf2;
  color: #29261f;
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
}

.pcard b {
  position: absolute;
  top: 3px;
  left: 6px;
  font-size: 17px;
  line-height: 1.1;
}

.pcard i {
  margin-top: 8px;
  font-size: 30px;
  font-style: normal;
  line-height: 1;
}

.pcard--red {
  color: #d23b3b;
}

.pcard--back {
  border: 3px solid #fffcf2;
  background: repeating-linear-gradient(45deg, #c8423f 0 5px, #9e2d2b 5px 10px);
}

.pcard.is-new {
  animation: deal 0.35s var(--soft-ease) both;
}

@keyframes deal {
  from {
    opacity: 0;
    transform: translate(34px, -26px) rotate(10deg);
  }
}

/* --- black & white */

.spin {
  position: relative;
  width: min(230px, 64vw);
  aspect-ratio: 1;
  margin: 8px auto 14px;
}

.spin__wheel {
  position: absolute;
  inset: 0;
  border: 8px solid var(--rind);
  border-radius: 50%;
  background: repeating-conic-gradient(#24211b 0deg 22.5deg, #fffcf2 22.5deg 45deg);
  box-shadow: 0 0 0 2px var(--line-strong), var(--shadow);
}

.spin__wheel.is-spinning {
  transition: transform 4.2s cubic-bezier(0.12, 0.65, 0.08, 1);
}

.spin__hub {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lemon-bright), var(--rind));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.spin__pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 1;
  border-top: 26px solid var(--bad);
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.spin__history {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.spin__dot {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}

.spin__dot:first-child {
  width: 16px;
  height: 16px;
  border-color: var(--accent-deep);
}

.spin__dot--black {
  background: #24211b;
}

.spin__dot--white {
  background: #fffcf2;
}

.spin__picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.spin__pick {
  padding: 12px;
  border: 3px solid var(--line-strong);
  border-radius: 16px;
  font: 800 18px/1 var(--font-display);
  cursor: pointer;
  transition: transform 0.2s var(--soft-ease), border-color 0.2s ease, box-shadow 0.2s ease;
}

.spin__pick--black {
  background: #24211b;
  color: #fffcf2;
}

.spin__pick--white {
  background: #fffcf2;
  color: #24211b;
}

.spin__pick.is-on {
  border-color: var(--lemon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lemon) 45%, transparent);
  transform: translateY(-2px);
}

.spin__pick:disabled {
  cursor: default;
  opacity: 0.6;
}

.spin__pick:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
}

/* --- the bet */

.bet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.bet__field {
  display: inline-flex;
  flex: 1 1 130px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-soft);
}

.bet__field:focus-within {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lemon) 40%, transparent);
}

.bet__field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 17px/1.4 var(--font-mono);
  outline: none;
}

.bet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bet__have {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .pcard.is-new,
  .casino__result {
    animation: none;
  }
}

/* ------------------------------------------------------ playing together */

.home__together {
  margin-top: 10px;
}

/* "Play with a friend" and "Trade", side by side under Battle */
.home__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.home__social .btn {
  flex: 1 1 140px;
  margin-top: 0;
}

/* the "Play with a friend" window */
.mp {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mp[hidden] {
  display: none;
}

.mp__box {
  position: relative;
  width: min(100%, 640px);
  color: var(--ink);
}

.mp__box h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  margin-right: 40px;
}

.mp__lead {
  margin: 6px 0 14px;
}

.mp__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.mp__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

.mp__card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 19px;
}

.mp__card h3 .ico {
  width: 20px;
  height: 20px;
}

.mp__card p {
  color: var(--ink-soft);
  font-size: 14.5px;
}

.mp__card .btn {
  margin-top: auto;
}

.mp__seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface);
}

.mp__seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: 99px;
  background: none;
  font: inherit;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
}

.mp__seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  color: var(--charcoal);
}

.mp__join {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
}

.mp__joinrow {
  display: flex;
  gap: 8px;
}

.mp__joinrow input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.mp__joinrow input:focus {
  outline: none;
  border-color: var(--rind);
}

.mp__code {
  margin: 14px 0 6px;
  padding: 14px;
  border: 2px dashed var(--rind);
  border-radius: 16px;
  background: var(--lemon-pale);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-align: center;
}

:root[data-theme="dark"] .mp__code {
  background: #3d3520;
  color: var(--lemon-bright);
}

.mp__copy {
  display: flex;
  margin: 0 auto;
}

.mp__how {
  margin: 12px 0;
  color: var(--ink-soft);
  text-align: center;
}

.mp__who {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-2);
  font-weight: 700;
}

.mp__who.is-in {
  border: 1px solid var(--rind);
}

.mp__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(93, 154, 63, 0.2);
}

.mp__spin {
  width: 16px;
  height: 16px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--rind);
  border-radius: 50%;
  animation: mp-spin 0.9s linear infinite;
}

@keyframes mp-spin {
  to {
    transform: rotate(360deg);
  }
}

.mp__link {
  min-height: 20px;
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
}

.mp__error {
  margin-top: 12px;
  color: var(--bad);
  font-weight: 700;
}

.mp__busy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink-soft);
}

/* in battle: the other lemon's health, a duel's score, and a word while someone waits */
.hud__mate {
  position: absolute;
  top: 116px;
  right: clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "name note" "bar bar";
  gap: 3px 8px;
  width: min(42%, 220px);
  padding: 6px 10px 8px;
  border-radius: 12px;
  background: rgba(20, 18, 14, 0.6);
  border: 1px solid rgba(127, 196, 255, 0.45);
  color: #fffcf2;
}

.hud__mate b {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud__mate small {
  grid-area: note;
  justify-self: end;
  font-size: 12px;
  color: rgba(255, 252, 242, 0.75);
}

.hud__mate-hp {
  grid-area: bar;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 252, 242, 0.15);
  overflow: hidden;
}

.hud__mate-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #8fd16a, #4f9a35);
  transition: width 0.15s linear;
}

.hud__mate.is-down {
  border-color: #e5484d;
}

.hud__mate.is-down small {
  color: #ff9a8a;
  font-weight: 800;
}

.hud__score {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 99px;
  background: rgba(20, 18, 14, 0.72);
  border: 1px solid var(--rind);
  color: var(--lemon-bright);
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
}

.hud__wait {
  position: absolute;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 8px 18px;
  border-radius: 99px;
  background: rgba(20, 18, 14, 0.82);
  border: 1px solid rgba(127, 196, 255, 0.5);
  color: #dff1ff;
  font-weight: 800;
  text-align: center;
}

/* the power-up list moves down out of the partner panel's way */
.hud.has-mate .hud__buffs {
  top: 176px;
}

.hud__mate[data-lag="1"] small {
  color: #ffd166;
}

.hud__mate[data-lag="2"] small {
  color: #ff8a80;
  font-weight: 800;
}

/* ------------------------------------------------------------ trading */
.trade__box {
  width: min(100%, 760px);
}

.trade__how {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.trade__how li + li {
  margin-top: 4px;
}

.trade__state,
.trade__lock {
  margin: 6px 0 12px;
  color: var(--ink-soft);
}

.trade__lock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid var(--rind);
  border-radius: 14px;
  background: var(--lemon-pale);
  color: var(--charcoal);
  font-weight: 700;
}

.trade__lock b {
  font-family: var(--font-mono);
  font-size: 22px;
}

:root[data-theme="dark"] .trade__lock {
  background: #3d3520;
  color: var(--lemon-bright);
}

.trade__sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.trade__side {
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.trade__side + .trade__side {
  margin-top: 0;
}

.trade__box > .trade__side {
  margin-top: 10px;
}

.trade__side h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 17px;
}

.trade__side.is-ok {
  border-color: var(--good);
}

.trade__side.is-changed {
  border-color: #e0a030;
  box-shadow: 0 0 0 4px rgba(224, 160, 48, 0.2);
}

.trade__sides.is-locked .trade__side {
  border-style: dashed;
  border-color: var(--rind);
}

.trade__ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--good);
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 12px;
  font-weight: 800;
}

.trade__ok .ico {
  width: 13px;
  height: 13px;
}

.trade__flash {
  margin: -2px 0 8px;
  color: #b06d00;
  font-size: 13px;
  font-weight: 800;
}

:root[data-theme="dark"] .trade__flash {
  color: #ffcf73;
}

.trade__offer,
.trade__grid,
.inv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.trade__grid {
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
}

.trade__cell,
.inv__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
}

button.trade__cell {
  cursor: pointer;
}

button.trade__cell:hover:not(:disabled),
button.trade__cell:focus-visible {
  border-color: var(--rind);
  background: var(--surface);
}

button.trade__cell:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.trade__cell .tile,
.inv__cell .tile {
  width: 56px;
  height: 56px;
}

.trade__cell small,
.inv__cell small {
  display: block;
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.trade__cell em,
.inv__cell em {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-style: normal;
  font-weight: 600;
}

.trade__cell > i {
  position: absolute;
  top: 2px;
  right: 6px;
  color: var(--bad);
  font-style: normal;
  font-weight: 800;
}

.trade__cell--money {
  justify-content: center;
}

.trade__pet {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
}

.trade__pet .art {
  width: 56px;
  height: 56px;
}

.trade__pet b {
  position: absolute;
  bottom: -4px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--ring, var(--rind));
  color: #fff;
  font-size: 10.5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.trade__unknown {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--ink-faint);
  font-weight: 800;
}

.trade__none {
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-size: 14px;
}

.trade__money {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.trade__money label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 110px;
}

.trade__money input {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

.trade__pick {
  margin-top: 14px;
}

.trade__pick h3 {
  font-family: var(--font-display);
  font-size: 17px;
}

.trade__pick h3 small {
  color: var(--ink-faint);
  font-family: var(--font-body, inherit);
  font-size: 12.5px;
  font-weight: 600;
}

.trade__tabs {
  margin: 8px 0;
}

.trade__more {
  display: flex;
  margin: 10px auto 0;
}

.trade__rules {
  margin-top: 12px;
}

/* ----------------------------------------- an admin's look at an inventory */
.inv {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
}

.inv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.inv__facts {
  margin-bottom: 10px;
}

.inv__label {
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 13.5px;
}

.inv__cell--empty {
  justify-content: center;
  min-height: 72px;
  border: 1px dashed var(--line-strong);
  color: var(--ink-faint);
}

.inv__fold {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.inv__fold > summary {
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

.inv__fold > .inv__grid,
.inv__fold > .hint {
  padding: 0 10px 10px;
}

.inv__fold > .inv__grid {
  max-height: 420px;
  overflow-y: auto;
}

.inv__more {
  grid-column: 1 / -1;
  justify-self: center;
}

/* the in-battle dev menu, playing together: who runs what */
.devbox__shared {
  margin: 6px 0 0;
}

/* for admins: who has the game open (green) and who is offline */
.seen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--ink-faint);
}

.seen i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}

.seen.is-on {
  color: var(--good);
}

.seen.is-on i {
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(93, 154, 63, 0.22);
}

/* an admin taking things away: the player's gear can be pressed */
button.inv__cell {
  cursor: pointer;
}

button.inv__cell:hover,
button.inv__cell:focus-visible {
  border-color: var(--bad);
  background: var(--surface);
}

.inv__take {
  margin: 4px 0 10px;
  border: 2px solid var(--bad);
  border-radius: 14px;
}

.inv__amount {
  align-items: end;
}

.inv__all {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  font-weight: 700;
  font-size: 13.5px;
}

.inv__waiting {
  margin-bottom: 8px;
}

.inv__waiting ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv__waiting li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.inv__waiting em {
  color: var(--ink-faint);
}

.takennote .giftnote__money {
  color: var(--bad);
}

/* removing things, right in an admin's look at an inventory */
.inv__takebar {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
}

.inv__money {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.inv__have {
  min-width: 90px;
  font-weight: 800;
}

.inv__money input {
  width: 110px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

.inv__other {
  padding: 0 10px 10px;
}

.inv__cell .inv__remove {
  margin-top: 2px;
  padding: 3px 10px;
  font-size: 12px;
}

.inv__remove {
  color: var(--bad);
}

.inv__remove.is-sure {
  border-color: var(--bad);
  background: var(--bad);
  color: #fff;
}

/* the Give form: a picture of the item about to be sent, at the left */
.board__giveitem {
  display: flex;
  align-items: center;
  gap: 12px;
}

.board__giveitem .board__pair {
  flex: 1;
  min-width: 0;
}

.board__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 92px;
  flex: none;
  text-align: center;
}

.board__preview .tile {
  width: 64px;
  height: 64px;
}

.board__preview small {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.board__preview b {
  padding: 0 5px;
  border-radius: 6px;
  background: var(--charcoal);
  color: var(--lemon-bright);
  font-size: 10.5px;
}

/* the Give form's item list, with a picture for every item */
.itempick__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.itempick__btn .tile {
  width: 36px;
  height: 36px;
  flex: none;
}

.itempick__btn b {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.itempick__list {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
}

.itempick__list input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

.itempick__scroll {
  max-height: 320px;
  margin-top: 6px;
  overflow-y: auto;
}

.itempick__slot {
  margin: 8px 0 4px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.itempick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 4px;
}

.itempick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.itempick__item[hidden] {
  display: none;
}

.itempick__item:hover,
.itempick__item.is-on {
  border-color: var(--rind);
  background: var(--lemon-pale);
}

.itempick__item .tile {
  width: 46px;
  height: 46px;
}

.itempick__item small {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.board__giveitem .board__pair {
  align-items: end;
}

/* changing your name, in the account window */
.acct__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.acct__rename {
  margin: 6px 0 8px;
}

.devabuse__msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-weight: 700;
  font-size: 13px;
}

.devabuse__msg input {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

.devcard .board__pair label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 13px;
}

/* public chat */
.chat__list {
  height: min(52vh, 380px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
}

.chat__msg {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}

.chat__msg:last-child {
  border-bottom: 0;
}

.chat__who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.chat__who .avatar {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.chat__who small {
  color: var(--ink-faint);
}

.chat__msg.is-mine .chat__who b {
  color: var(--rind);
}

.chat__msg p {
  margin: 2px 0 0 28px;
  overflow-wrap: anywhere;
}

.chat__del {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--bad);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.chat__empty {
  padding: 24px 8px;
  color: var(--ink-faint);
  text-align: center;
}

.chat__form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.chat__form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

/* the chat fills the screen */
.modal--chat {
  display: flex;
  flex-direction: column;
  width: min(98vw, 1200px);
  height: min(96vh, 1000px);
  height: min(96dvh, 1000px);
  max-height: none;
}

.modal--chat .chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.modal--chat .chat__list {
  flex: 1;
  height: auto;
  min-height: 0;
}

.chat__name {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.chat__name:hover {
  text-decoration: underline;
}

.chat__admin {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--charcoal);
  color: var(--lemon-bright);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.chat__msg.is-ping {
  border-radius: 10px;
  background: var(--lemon-pale);
}

/* a mention pops up at the top right, in menus and in battle alike */
.chatnotes {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 230;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(86vw, 320px);
  pointer-events: none;
}

.chatnote {
  padding: 10px 14px;
  border: 2px solid var(--rind);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  pointer-events: auto;
  cursor: pointer;
  animation: chat-slide 0.35s ease-out both;
}

.chatnote.is-all {
  border-color: var(--bad);
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  color: var(--charcoal);
}

.chatnote b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
}

.chatnote p {
  margin: 2px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

@keyframes chat-slide {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* the chat in a battle's pause menu */
.pausebox__chat {
  margin-bottom: 14px;
  text-align: left;
}

.pausebox__label {
  margin-bottom: 4px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-soft);
}

.chat__list--mini {
  height: 170px;
}

.pausebox__chat .chat__name,
.pausebox__chat .chat__who b {
  font-size: 13px;
}

.pausebox {
  max-height: 94vh;
  max-height: 94dvh;
  overflow-y: auto;
}

/* the owner's tag in the chat is gold */
.chat__admin.is-owner {
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  color: var(--charcoal);
  box-shadow: 0 0 0 1px var(--rind);
}

/* a livelier chat: coloured names, messages that pop in, emoji, actions */
.chat__msg .chat__who b,
.chat__msg .chat__name {
  color: hsl(var(--hue, 40) 55% 32%);
}

:root[data-theme="dark"] .chat__msg .chat__who b,
:root[data-theme="dark"] .chat__msg .chat__name {
  color: hsl(var(--hue, 40) 70% 72%);
}

.chat__msg.is-new {
  animation: chat-pop 0.45s ease-out both;
}

@keyframes chat-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

.chat__msg.is-action p {
  font-style: italic;
  color: var(--ink-soft);
}

.chat__msg.is-all {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--lemon-bright), var(--lemon-pale));
  border-left: 4px solid var(--bad);
}

.chat__emoji {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.chat__emoji button {
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
}

.chat__emoji button:hover {
  border-color: var(--rind);
  background: var(--lemon-pale);
}

.chat__tip {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 12px;
}

/* an admin's @everyone: big, pulsing, and it stays */
.chatnote.is-all {
  padding: 16px 18px;
  border-width: 4px;
  animation: chat-slide 0.35s ease-out both, chat-pulse 1s ease-in-out 0.35s infinite;
}

.chatnote.is-all small {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.chatnote.is-all b {
  font-size: 18px;
}

.chatnote.is-all p {
  font-size: 18px;
  font-weight: 800;
}

@keyframes chat-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55), var(--shadow-lift);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(229, 72, 77, 0), var(--shadow-lift);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatnote.is-all {
    animation: none;
  }
}

/* the pop-ups are a popover (top layer): drop the browser's own popover look */
.chatnotes[popover] {
  inset: auto;
  top: 12px;
  right: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  color: inherit;
}

/* the pop-ups live outside <body>, so they bring the game's own text style */
.chatnotes {
  font: 400 16px/1.4 var(--font);
  color: var(--ink);
}

/* ------------------------------------------------------------ admin abuse events */
/* What an event shows goes in .chaos, a popover in the browser's top layer, so
   it shows above an open window too. Nothing in it can be clicked. */
.chaos[popover] {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  font: 400 16px/1.4 var(--font);
}

.chaos__note {
  position: fixed;
  top: 16%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: min(90vw, 640px);
  padding: 14px 28px 12px;
  border: 3px solid var(--charcoal);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff6c2, var(--lemon-bright) 40%, var(--lemon));
  box-shadow: 0 0 0 6px rgba(255, 230, 109, 0.35), 0 18px 50px rgba(0, 0, 0, 0.35);
  color: var(--charcoal);
  text-align: center;
  translate: -50% 0;
  animation: chaos-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both, chaos-float 2.4s ease-in-out 0.6s infinite;
}

.chaos__icons {
  font-size: clamp(26px, 6vw, 44px);
  line-height: 1.1;
  letter-spacing: 4px;
}

.chaos__text {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 40px);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.chaos__text:empty {
  display: none;
}

/* the time left, running down */
.chaos__time {
  display: block;
  width: 100%;
  min-width: 160px;
  height: 6px;
  margin-top: 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.chaos__time i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rind), #e5484d);
  transform-origin: left;
  animation: chaos-time linear both;
}

@keyframes chaos-time {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes chaos-pop {
  from {
    opacity: 0;
    scale: 0.3;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes chaos-float {
  0%,
  100% {
    rotate: -1.5deg;
  }
  50% {
    rotate: 1.5deg;
  }
}

/* falling things: lemons, coins, gems, confetti, snow; hearts rise */
.chaos__bit {
  position: fixed;
  top: -60px;
  width: 38px;
  height: 38px;
  animation: chaos-fall linear both;
}

.chaos__bit > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chaos__bit.is-small {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.chaos__bit.is-confetti {
  width: 10px;
  height: 16px;
  border-radius: 2px;
}

.chaos__bit.is-snow {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 1px rgba(60, 100, 150, 0.9);
  animation-name: chaos-snow;
}

.chaos__bit.is-up {
  top: auto;
  bottom: -60px;
  width: auto;
  height: auto;
  font-size: 32px;
  animation-name: chaos-rise;
}

@keyframes chaos-fall {
  to {
    transform: translateY(115vh) rotate(540deg);
  }
}

@keyframes chaos-snow {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(24px, 30vh);
  }
  50% {
    transform: translate(-18px, 60vh);
  }
  75% {
    transform: translate(20px, 90vh);
  }
  100% {
    transform: translate(0, 118vh);
  }
}

@keyframes chaos-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(-20px, -55vh) scale(1);
  }
  100% {
    opacity: 0.2;
    transform: translate(15px, -118vh) scale(1.1);
  }
}

/* the lemon parade along the bottom */
.chaos__walker {
  position: fixed;
  bottom: 6px;
  left: 0;
  width: 64px;
  height: 64px;
  animation: chaos-walk 6.3s linear infinite both, chaos-bob 0.4s ease-in-out infinite alternate;
}

.chaos__walker > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes chaos-walk {
  from {
    translate: -80px 0;
  }
  to {
    translate: calc(100vw + 80px) 0;
  }
}

@keyframes chaos-bob {
  from {
    transform: translateY(0) rotate(-8deg);
  }
  to {
    transform: translateY(-14px) rotate(8deg);
  }
}

/* fireworks: a ring of sparks flying out from a point */
.chaos__burst {
  position: fixed;
  width: 0;
  height: 0;
}

.chaos__burst i {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px 3px currentColor;
  animation: chaos-burst 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes chaos-burst {
  from {
    opacity: 1;
    transform: rotate(var(--a)) translateX(0) scale(1.4);
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: rotate(var(--a)) translateX(160px) scale(0.6);
  }
}

.chaos__dark {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.93);
  animation: chaos-dark 0.4s ease-out both;
}

@keyframes chaos-dark {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chaos__boo {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: min(60vw, 60vh);
  line-height: 1;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.8));
  animation: chaos-boo 0.45s cubic-bezier(0.2, 2, 0.4, 1) both, chaos-shake 0.12s linear infinite;
}

@keyframes chaos-boo {
  from {
    opacity: 0;
    scale: 0.1;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* The page events. Each one moves its own part of the page's look (the
   transform, translate, rotate, scale, or one filter), so any of them can
   play at once. */
@property --chaos-hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html[class*="chaos-"] body {
  animation: var(--chaos-a1, none), var(--chaos-a2, none), var(--chaos-a3, none), var(--chaos-a4, none);
}

html[class*="chaos-flip"] body,
html[class*="chaos-tiny"] body,
html[class*="chaos-mirror"] body,
html[class*="chaos-giant"] body {
  transform: rotate(var(--chaos-r, 0deg)) scale(calc(var(--chaos-s, 1) * var(--chaos-z, 1))) scaleX(var(--chaos-x, 1));
  transition: transform 0.6s;
}

html.chaos-flip {
  --chaos-r: 180deg;
}

html.chaos-tiny {
  --chaos-s: 0.45;
}

html.chaos-giant {
  --chaos-z: 1.45;
}

html.chaos-mirror {
  --chaos-x: -1;
}

html.chaos-wobble {
  --chaos-a1: chaos-shake 0.18s linear infinite;
}

html.chaos-disco {
  --chaos-a2: chaos-disco 1.1s linear infinite;
  --chaos-sat: 1.8;
}

html.chaos-drunk {
  --chaos-a3: chaos-sway 2.2s ease-in-out infinite alternate;
  --chaos-blur: 1.8px;
}

html.chaos-spin {
  --chaos-a3: chaos-spin 4s linear infinite;
}

html.chaos-jelly {
  --chaos-a4: chaos-jelly 0.8s ease-in-out infinite;
}

html.chaos-invert {
  --chaos-inv: 1;
}

html.chaos-oldfilm {
  --chaos-gray: 1;
  --chaos-sepia: 0.4;
  --chaos-con: 1.15;
}

html.chaos-disco body,
html.chaos-drunk body,
html.chaos-invert body,
html.chaos-oldfilm body {
  filter: hue-rotate(var(--chaos-hue)) saturate(var(--chaos-sat, 1)) invert(var(--chaos-inv, 0)) blur(var(--chaos-blur, 0px))
    grayscale(var(--chaos-gray, 0)) sepia(var(--chaos-sepia, 0)) contrast(var(--chaos-con, 1));
}

/* the shake moves with `translate`, so it does not fight the flip's transform */
@keyframes chaos-shake {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: -7px 4px;
  }
  75% {
    translate: 7px -4px;
  }
}

@keyframes chaos-disco {
  to {
    --chaos-hue: 360deg;
  }
}

@keyframes chaos-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes chaos-sway {
  from {
    rotate: -4deg;
  }
  to {
    rotate: 4deg;
  }
}

@keyframes chaos-jelly {
  0%,
  100% {
    scale: 1 1;
  }
  30% {
    scale: 1.08 0.92;
  }
  60% {
    scale: 0.94 1.06;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chaos__note {
    animation: none;
  }
}

/* ------------------------------------------------------------ the Admin abuse tab */
.devnav__item[data-tab-name="abuse"] {
  color: #d9480f;
}

.devnav__item[data-tab-name="abuse"].is-active {
  background: linear-gradient(135deg, #ffb347, #ff5f6d);
  color: #fff;
}

.abuse__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(120deg, #ff5f6d, #ffb347 55%, #ffe66d);
  box-shadow: 0 8px 24px rgba(255, 95, 109, 0.3);
  color: #2b1600;
}

.abuse__hero > div {
  flex: 1;
  min-width: 200px;
}

.abuse__hero h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
}

.abuse__hero p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}

.abuse__flame {
  font-size: 42px;
  animation: abuse-flicker 1.1s ease-in-out infinite alternate;
}

@keyframes abuse-flicker {
  from {
    rotate: -6deg;
    scale: 1;
  }
  to {
    rotate: 6deg;
    scale: 1.15;
  }
}

.abuse__live {
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 800;
}

.abuse .devabuse__msg {
  margin: 12px 0 4px;
}

.abuse .devcard h3 {
  font-size: 18px;
}

.abuse__packs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

.abuse__pack {
  padding: 8px 14px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--h1, #ffb347), var(--h2, #ff5f6d));
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s;
}

.abuse__pack:hover {
  transform: translateY(-2px) scale(1.04);
}

.abuse__pack:active {
  transform: translateY(1px);
}

.abuse__pack:nth-child(1) {
  --h1: #ff6fd8;
  --h2: #845ec2;
}

.abuse__pack:nth-child(2) {
  --h1: #f9b423;
  --h2: #e65c00;
}

.abuse__pack:nth-child(3) {
  --h1: #ff512f;
  --h2: #8e0e00;
}

.abuse__pack:nth-child(4) {
  --h1: #43cea2;
  --h2: #185a9d;
}

.abuse__pack:nth-child(5) {
  --h1: #f6b365;
  --h2: #e8638f;
}

.abuse__pack:nth-child(6) {
  --h1: #6fd6ff;
  --h2: #4f6fe6;
}

.abuse__pack:nth-child(7) {
  --h1: #5b5b6e;
  --h2: #111;
}

.abuse__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 6px 0 4px;
}

.abuse__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.abuse__tile:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.abuse__emoji {
  font-size: 28px;
  line-height: 1.15;
  transition: transform 0.2s;
}

.abuse__tile:hover .abuse__emoji {
  transform: scale(1.2) rotate(-8deg);
}

.abuse__tile b {
  font-size: 13px;
}

.abuse__tile small {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.2;
}

.abuse__tile.is-on {
  border-color: var(--rind);
  background: linear-gradient(180deg, var(--lemon-bright), var(--lemon));
  box-shadow: 0 0 0 3px rgba(242, 185, 59, 0.35);
  color: var(--charcoal);
}

.abuse__tile--sky.is-on {
  border-color: #3f8fe4;
  background: linear-gradient(180deg, #e3f2ff, #a9d4ff);
  box-shadow: 0 0 0 3px rgba(63, 143, 228, 0.3);
}

.abuse__tile--battle.is-on {
  border-color: #e5484d;
  background: linear-gradient(180deg, #ffe0e0, #ffa3a3);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.3);
}

.abuse__tile.is-on small {
  color: rgba(0, 0, 0, 0.6);
}

.abuse__tile.is-on::after {
  position: absolute;
  top: 4px;
  right: 6px;
  content: "\2713";
  font-size: 13px;
  font-weight: 900;
}

.abuse__go {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.abuse__go--small {
  align-items: center;
  margin-top: 8px;
}

.abuse__secs,
.abuse__mins {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}

.abuse__secs input,
.abuse__mins input {
  width: 96px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

.abuse__count {
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 700;
}

.abuse__note {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 700;
}

.abuse__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  margin: 4px 0;
}

.abuse__chip {
  padding: 6px 12px;
  border: 2px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.abuse__chip.is-on {
  border-color: #c98a1b;
  background: linear-gradient(180deg, #ffe08a, #f2b93b);
  color: #3b2500;
}

.abuse__rushpick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 16px;
}

.abuse .devbox__label .ico {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.abuse__rushon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 8px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, #fff1b8, #ffd166);
  color: #3b2500;
  font-weight: 800;
  animation: rush-glow 1.6s ease-in-out infinite alternate;
}

.abuse__rushwhat {
  font-size: 18px;
}

.abuse__rushon .ico,
.rushstrip .ico,
.results__rush .ico {
  width: 1.1em;
  height: 1.1em;
  margin-right: 2px;
  vertical-align: -0.2em;
}

.btn.btn--gold {
  border-color: #c98a1b;
  background: linear-gradient(180deg, #ffe08a, #f2b93b);
  color: #3b2500;
}

@keyframes rush-glow {
  from {
    box-shadow: 0 0 0 0 rgba(242, 185, 59, 0.45);
  }
  to {
    box-shadow: 0 0 18px 4px rgba(242, 185, 59, 0.6);
  }
}

/* the money rush strip at the top of every screen, battles too */
.rushstrip {
  position: fixed;
  top: 6px;
  left: 50%;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 2px solid #c98a1b;
  border-radius: 99px;
  background: linear-gradient(180deg, #fff3c4, #ffd166);
  color: #3b2500;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% 0;
  animation: rush-glow 1.6s ease-in-out infinite alternate;
}

.rushstrip[hidden] {
  display: none;
}

.rushstrip.is-battle {
  top: 74px;
}

.chaos__sub {
  font-size: clamp(15px, 3.6vw, 20px);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rushstrip__tag {
  padding: 2px 10px;
  border-radius: 99px;
  background: #3b2500;
  color: #ffe08a;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rushstrip__left {
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}

.results__rush {
  margin: 4px 0 0;
  color: #b7791f;
  font-weight: 800;
  text-align: center;
}

.rushstrip.is-compact .rushstrip__tag {
  display: none;
}

.rushstrip.is-compact .rushstrip__what {
  padding-left: 6px;
}

/* the seconds left on an event, under its bar */
.chaos__count {
  font-family: var(--font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* the 3, 2, 1 before new events go off */
.chaos__ready {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
  color: var(--lemon-bright);
  text-align: center;
}

.chaos__ready .chaos__icons {
  font-size: clamp(30px, 7vw, 56px);
}

.chaos__ready b {
  font-family: var(--font-display);
  font-size: clamp(120px, 30vw, 260px);
  line-height: 1;
  -webkit-text-stroke: 6px var(--charcoal);
  paint-order: stroke fill;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: chaos-ready 1s ease-out both;
}

@keyframes chaos-ready {
  from {
    opacity: 0;
    scale: 2.2;
  }
  20% {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0.85;
    scale: 0.85;
  }
}

.abuse__ready {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abuse__readylabel {
  font-size: 13px;
  font-weight: 700;
}

/* ------------------------------------------------------------ invites */
/* the "Players online" list in the Trade and Play-with-a-friend windows */
.invite {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

.invite__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
}

.invite__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.invite__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--surface);
}

.invite__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(93, 154, 63, 0.2);
}

.invite__dot.is-busy {
  background: #e0a03c;
  box-shadow: 0 0 0 3px rgba(224, 160, 60, 0.22);
}

.invite__name {
  overflow-wrap: anywhere;
}

.invite__busy {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
}

.invite__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.invite__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.invite__state .mp__spin {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.invite__state .ico {
  width: 14px;
  height: 14px;
}

.invite__state.is-yes {
  color: var(--good);
}

.invite__state.is-no {
  color: var(--bad);
}

.invite__empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.invite__typed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.invite__typed input {
  flex: 1;
  min-width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
}

.invite__typednote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 13px;
}

/* the code, now the second way in */
.mp__code.mp__code--small {
  display: inline-block;
  margin: 0;
  padding: 2px 10px;
  border-width: 2px;
  border-radius: 10px;
  font-size: 20px;
  letter-spacing: 0.2em;
  vertical-align: middle;
}

.mp__how .mp__copy {
  display: inline-flex;
  margin: 0 0 0 6px;
  vertical-align: middle;
}

/* an invite to this player: a card at the top, on any screen but a battle */
.invites[popover] {
  position: fixed;
  inset: auto;
  top: 128px;
  left: 50%;
  width: min(92vw, 420px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  color: var(--ink);
  font: 400 16px/1.4 var(--font);
  translate: -50% 0;
}

.invites {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invitecard {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--rind);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7cf, var(--lemon-bright));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  color: var(--charcoal);
  animation: invite-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.invitecard--coop {
  border-color: #3f8fe4;
  background: linear-gradient(180deg, #eef6ff, #c7e2ff);
}

.invitecard--duel {
  border-color: #e5484d;
  background: linear-gradient(180deg, #fff0f0, #ffc9c9);
}

.invitecard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}

.invitecard__icon .ico {
  width: 24px;
  height: 24px;
}

.invitecard__body {
  flex: 1;
  min-width: 0;
}

.invitecard__body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.invitecard__note {
  margin-top: 4px !important;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.8;
}

.invitecard__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.invitecard__left {
  margin-left: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.7;
}

@keyframes invite-in {
  from {
    opacity: 0;
    translate: 0 -16px;
    scale: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invitecard {
    animation: none;
  }
}

/* ------------------------------------------------------------ past ???: Celestial, Cosmic, Infinity */
.r8 { --rar: #e9b949; }
.r9 { --rar: #7b5cff; }
.r10 { --rar: #ff4d9d; }

/* Celestial: a little sun, with rays turning slowly behind the item */
.tile.r8 {
  --glow: 34;
  overflow: hidden;
  border-color: #f7d57a;
  border-width: 3px;
  background: radial-gradient(circle at 50% 38%, #fffbea, #ffe39a 42%, #f0b43c 78%, #c98a1b);
  animation: breathe 2.2s ease-in-out infinite;
}

.tile.r8::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.55) 0deg 8deg, transparent 8deg 30deg);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: rarity-turn 14s linear infinite;
  pointer-events: none;
}

/* Cosmic: a night sky in the tile, its stars twinkling, a violet edge */
.tile.r9 {
  --glow: 38;
  overflow: hidden;
  border-color: #a48cff;
  border-width: 3px;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff 60%, transparent),
    radial-gradient(1px 1px at 72% 18%, #fff 60%, transparent),
    radial-gradient(1.5px 1.5px at 84% 64%, #ffe9a8 60%, transparent),
    radial-gradient(1px 1px at 30% 78%, #fff 60%, transparent),
    radial-gradient(1px 1px at 55% 50%, #cfe3ff 60%, transparent),
    radial-gradient(circle at 60% 35%, rgba(255, 110, 200, 0.45), transparent 45%),
    radial-gradient(circle at 35% 65%, rgba(90, 160, 255, 0.45), transparent 50%),
    radial-gradient(circle at 50% 50%, #2b1d6e, #0b0820 78%);
  animation: breathe 1.9s ease-in-out infinite;
}

.tile.r9::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 40% 30%, #fff 50%, transparent),
    radial-gradient(2px 2px at 65% 75%, #fff 50%, transparent),
    radial-gradient(2px 2px at 22% 55%, #fff 50%, transparent);
  animation: rarity-twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* Infinity: every colour at once, flowing through the tile and round its edge */
.tile.r10 {
  --glow: 44;
  overflow: hidden;
  border-color: transparent;
  border-width: 3px;
  background:
    radial-gradient(circle at 50% 40%, rgba(20, 10, 30, 0.35), rgba(20, 10, 30, 0.85) 75%) padding-box,
    conic-gradient(from var(--spin), #ff4d9d, #ffb84d, #f9f871, #4dffb8, #4dc3ff, #9d4dff, #ff4d9d) padding-box,
    conic-gradient(from var(--spin), #fff, #ff4d9d, #ffd166, #6ee7b7, #60a5fa, #c084fc, #fff) border-box;
  box-shadow: var(--ring), 0 0 calc(var(--glow) * 1px) 4px rgba(255, 77, 157, 0.75), var(--shadow-sm);
  animation: spin 2.6s linear infinite;
}

.tile.r10::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.65) 50%, transparent 60%);
  animation: sheen 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* the item picture stays above the effects */
.tile.r8 .tile__art,
.tile.r9 .tile__art,
.tile.r10 .tile__art {
  z-index: 1;
}

@keyframes rarity-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rarity-twinkle {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

/* the names, written in their colours */
.rname.r9 {
  color: color-mix(in srgb, #7b5cff 80%, var(--ink));
}

.rname.r10 {
  background: linear-gradient(90deg, #ff4d9d, #ff9f43, #f2c94c, #3fcf8e, #4da3ff, #9d6bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tile.r8::before,
  .tile.r9::before,
  .tile.r10::before {
    animation: none;
  }
}

/* the battle admin panel's Abuse tab: the same tiles, smaller */
.abuse__tiles--small {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px;
}

.abuse__tiles--small .abuse__tile {
  padding: 6px 4px 5px;
  border-radius: 12px;
}

.abuse__tiles--small .abuse__emoji {
  font-size: 22px;
}

.abuse__tiles--small .abuse__tile b {
  font-size: 12px;
}

.devbox .abuse__packs {
  margin-top: 10px;
}

/* ------------------------------------------------------------ the enchanting room */
.enchant {
  position: fixed;
  inset: 0;
  z-index: 65;
  overflow-y: auto;
  background: radial-gradient(1200px 700px at 50% 25%, #2a1d52 0%, #140d2b 55%, #07050f 100%);
  color: #e9e2ff;
}

.enchant[hidden] {
  display: none;
}

/* sparks drifting up through the dark */
.enchant__motes {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.enchant__motes i {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c6a6ff;
  box-shadow: 0 0 10px 3px rgba(180, 140, 255, 0.7);
  opacity: 0;
  animation: enchant-rise var(--d) linear var(--w) infinite;
}

@keyframes enchant-rise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(30px, -105vh);
  }
}

.enchant__room {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.enchant__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.enchant__head h2 {
  margin: 0;
  color: #f3e9ff;
  font-family: var(--font-display);
  font-size: 30px;
  text-shadow: 0 0 18px rgba(170, 120, 255, 0.6);
}

.enchant .kicker {
  color: #b9a6e8;
}

.enchant .hint {
  color: #b9a6e8;
}

.enchant .rname {
  color: color-mix(in srgb, var(--rar) 75%, #fff);
}

.enchant__main {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr);
  gap: 18px;
}

@media (max-width: 760px) {
  .enchant__main {
    grid-template-columns: 1fr;
  }
}

.enchant__table,
.enchant__pick,
.enchant__list {
  padding: 18px;
  border: 1px solid rgba(190, 160, 255, 0.25);
  border-radius: 22px;
  background: rgba(30, 20, 60, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.4);
}

.enchant__table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* the table: a magic circle, the gear on it, and the key beside it */
.enchant__altar {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
}

.enchant__circle {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(200, 170, 255, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 90, 255, 0.25), transparent 65%);
  box-shadow: 0 0 40px rgba(150, 100, 255, 0.35), inset 0 0 40px rgba(150, 100, 255, 0.25);
  animation: enchant-turn 30s linear infinite;
}

.enchant__circle::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(200, 170, 255, 0.35);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(200, 170, 255, 0.35) 0deg 4deg, transparent 4deg 30deg);
  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%);
}

.enchant__gear {
  position: relative;
  width: 110px;
}

.enchant__gear .tile {
  width: 110px;
}

.enchant__empty {
  color: #b9a6e8;
  font-weight: 800;
}

.enchant__key {
  position: absolute;
  right: -6px;
  bottom: 8px;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 10px rgba(255, 215, 120, 0.6));
  transition: transform 0.4s ease;
}

.enchant__key svg,
.enchant__keyart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.enchant__table.is-casting .enchant__circle {
  animation-duration: 1.2s;
  box-shadow: 0 0 70px rgba(190, 140, 255, 0.8), inset 0 0 60px rgba(190, 140, 255, 0.6);
}

.enchant__table.is-casting .enchant__key {
  transform: translate(-58px, -62px) rotate(90deg) scale(0.8);
  animation: enchant-shake 0.15s linear infinite;
}

.enchant__table.is-casting .enchant__gear {
  animation: enchant-glow 0.5s ease-in-out infinite alternate;
}

.enchant__table.is-done .enchant__gear {
  animation: enchant-burst 0.8s ease-out both;
}

@keyframes enchant-turn {
  to {
    rotate: 360deg;
  }
}

@keyframes enchant-shake {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 2px -1px;
  }
}

@keyframes enchant-glow {
  from {
    filter: drop-shadow(0 0 6px #b48cff);
  }
  to {
    filter: drop-shadow(0 0 26px #e6d6ff) brightness(1.3);
  }
}

@keyframes enchant-burst {
  0% {
    filter: drop-shadow(0 0 40px #fff) brightness(2);
    scale: 1.15;
  }
  100% {
    filter: drop-shadow(0 0 12px #b48cff);
    scale: 1;
  }
}

.enchant__what {
  margin: 4px 0 0;
  color: #d9ceff;
}

.enchant__name {
  color: #e6c8ff;
}

.enchant__result {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(220, 200, 255, 0.5);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(180, 140, 255, 0.35), rgba(90, 60, 180, 0.35));
  animation: enchant-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.enchant__result h3 {
  margin: 2px 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 26px;
  text-shadow: 0 0 14px rgba(200, 160, 255, 0.9);
}

.enchant__result p {
  margin: 0;
}

@keyframes enchant-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

.enchant__keys {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-weight: 800;
}

.enchant__keyart {
  width: 30px;
  height: 30px;
}

.enchant__gems {
  margin-left: 10px;
}

.btn.enchant__go {
  min-width: 240px;
  border-color: #5b3fd6;
  background: linear-gradient(180deg, #b48cff, #7b5cff);
  box-shadow: 0 0 24px rgba(150, 110, 255, 0.6);
  color: #fff;
}

.enchant__pick h3,
.enchant__list h3 {
  margin: 0 0 8px;
  color: #f3e9ff;
  font-family: var(--font-display);
  font-size: 20px;
}

.enchant__list h3 small {
  color: #b9a6e8;
  font-family: var(--font);
  font-size: 13px;
}

.enchant__label {
  margin: 10px 0 6px;
  color: #a995dd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enchant__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.enchant__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(190, 160, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.enchant__item:hover:not(:disabled) {
  border-color: rgba(210, 185, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.enchant__item.is-on {
  border-color: #c6a6ff;
  background: rgba(160, 120, 255, 0.22);
  box-shadow: 0 0 0 2px rgba(198, 166, 255, 0.4);
}

.enchant__item .tile {
  flex: none;
  width: 44px;
}

.enchant__item span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.enchant__item b {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enchant__item small {
  color: #b9a6e8;
  font-size: 12px;
}

.enchant__list {
  margin-top: 18px;
}

.enchant__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.enchant__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(190, 160, 255, 0.25);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.enchant__chip .ico {
  width: 16px;
  height: 16px;
  color: #c6a6ff;
}

.enchant__chip small {
  color: #b9a6e8;
}

@media (prefers-reduced-motion: reduce) {
  .enchant__motes,
  .enchant__circle {
    animation: none;
  }
  .enchant__motes i {
    animation: none;
  }
}

/* enchanted gear: a small star on its tile, a line on its slot and in its window */
.tile__ench {
  position: absolute;
  top: 1px;
  right: 3px;
  z-index: 2;
  color: #d8c4ff;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 6px #7b5cff, 0 0 2px #000;
  pointer-events: none;
}

.slot__ench {
  display: block;
  color: color-mix(in srgb, #7b5cff 75%, var(--ink));
  font-size: 12px;
  font-weight: 800;
}

.itemsheet__ench {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(123, 92, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(123, 92, 255, 0.18), rgba(123, 92, 255, 0.05));
}

.itemsheet__ench b {
  color: color-mix(in srgb, #7b5cff 80%, var(--ink));
}

.itemsheet__ench p {
  margin: 2px 0;
}

.itemsheet__ench .itemsheet__room {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 12px;
}

/* stacking: the four enchantment spaces on the gear at the table */
.enchant__spaces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 10px 0 4px;
}

@media (max-width: 640px) {
  .enchant__spaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.enchant__space {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 108px;
  padding: 8px 6px;
  border: 1px solid rgba(190, 160, 255, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: center;
}

.enchant__space .ico {
  width: 22px;
  height: 22px;
  color: #c6a6ff;
}

.enchant__space b {
  color: #f3e9ff;
  font-size: 13px;
}

.enchant__space small {
  color: #b9a6e8;
  font-size: 11px;
  line-height: 1.25;
}

.enchant__space.is-filled {
  border-color: rgba(198, 166, 255, 0.55);
  background: linear-gradient(180deg, rgba(180, 140, 255, 0.28), rgba(90, 60, 180, 0.18));
  box-shadow: inset 0 0 14px rgba(180, 140, 255, 0.25);
}

button.enchant__space:not(:disabled) {
  cursor: pointer;
}

button.enchant__space:hover:not(:disabled) {
  border-color: #d8c4ff;
}

button.enchant__space:disabled {
  opacity: 1;
}

.enchant__space.is-target {
  border-color: #ffb0d8;
  box-shadow: 0 0 0 2px rgba(255, 140, 200, 0.55), inset 0 0 14px rgba(255, 140, 200, 0.25);
}

.enchant__swap {
  color: #ffc4e2;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.enchant__space.is-empty {
  border-style: dashed;
  border-color: rgba(198, 166, 255, 0.5);
}

.enchant__space.is-empty.is-target {
  border-style: solid;
  border-color: #ffb0d8;
}

.enchant__space.is-buy {
  border-color: rgba(233, 185, 73, 0.55);
  background: linear-gradient(180deg, rgba(233, 185, 73, 0.16), rgba(233, 185, 73, 0.04));
}

.btn.enchant__buy {
  margin-top: 4px;
  border-color: #a8791b;
  background: linear-gradient(180deg, #f2cf73, #d39a2a);
  max-width: 100%;
  padding-inline: 10px;
  color: #2b1a00;
}

.btn.enchant__buy .price {
  white-space: nowrap;
}

.btn.enchant__buy .ico {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.enchant__space.is-locked {
  opacity: 0.45;
}

.tile__ench {
  white-space: nowrap;
}

.btn.btn--enchant {
  border-color: #4a32b8;
  background: linear-gradient(180deg, #8f74ff, #5b3fd6);
  color: #fff;
}

.btn.btn--enchant .count {
  color: #fff;
  opacity: 0.85;
}

.chest--rune .chest__art {
  filter: drop-shadow(0 0 12px rgba(140, 100, 255, 0.55));
}

/* =========================================================================
   THE CAMP (js/camp.js)
   Your lemon and pets strolling along the top of the tab bar, a speech
   bubble, hearts, and lemons that drop from the trees to be tapped.
   ========================================================================= */

.tabbar {
  position: relative;
}

.camp {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(100% - 3px);
  height: 64px;
  pointer-events: none;
}

.camp__me,
.camp__pet,
.camp__drop {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.camp__me {
  width: 54px;
  height: 54px;
  margin-left: -27px;
}

.camp__pet {
  width: 36px;
  height: 36px;
  margin-left: -18px;
}

/* a soft shadow underneath, so they stand on the bar */
.camp__me::before,
.camp__pet::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -2px;
  height: 6px;
  border-radius: 50%;
  background: rgba(41, 38, 31, 0.2);
}

/* room under each page, so its last buttons scroll clear of the camp */
.screen {
  padding-bottom: 72px;
}

/* the body turns to face where it is going (--face is 1 or -1); hops and the walk move it with
   translate and rotate, so they never undo the turn */
.camp__body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  scale: var(--face, 1) 1;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 2px rgba(41, 38, 31, 0.28));
}

.camp__body > .art {
  display: block;
  width: 100%;
  height: 100%;
}

.camp__weapon {
  position: absolute;
  right: -12px;
  bottom: 5px;
  width: 28px;
  height: 28px;
  rotate: 18deg;
}

.camp__weapon .art {
  width: 100%;
  height: 100%;
}

.camp__me:focus-visible,
.camp__pet:focus-visible,
.camp__drop:focus-visible {
  outline: 2px solid var(--rind);
  outline-offset: 2px;
  border-radius: 50%;
}

.is-walking .camp__body {
  animation: camp-walk 0.42s ease-in-out infinite;
}

@keyframes camp-walk {
  0%,
  100% {
    translate: 0 0;
    rotate: -4deg;
  }

  50% {
    translate: 0 -4px;
    rotate: 4deg;
  }
}

.is-hop .camp__body {
  animation: camp-hop 0.5s var(--soft-ease, ease) both;
}

@keyframes camp-hop {
  40% {
    translate: 0 -12px;
  }
}

.is-jump .camp__body {
  animation: camp-jump 0.6s var(--soft-ease, ease) both;
}

@keyframes camp-jump {
  15% {
    translate: 0 2px;
    scale: calc(var(--face, 1) * 1.12) 0.86;
  }

  45% {
    translate: 0 -26px;
    scale: calc(var(--face, 1) * 0.92) 1.1;
  }

  80% {
    translate: 0 0;
    scale: calc(var(--face, 1) * 1.08) 0.92;
  }
}

.is-spin .camp__body {
  animation: camp-spin 0.7s var(--soft-ease, ease) both;
}

@keyframes camp-spin {
  50% {
    translate: 0 -18px;
    rotate: 360deg;
  }

  100% {
    rotate: 720deg;
  }
}

/* asleep: leaning over, with z's drifting up */
.camp__me.is-asleep .camp__body {
  rotate: -14deg;
  translate: 0 2px;
}

.camp__zzz {
  position: absolute;
  left: 60%;
  bottom: 100%;
  display: none;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.camp__zzz i,
.camp__zzz b {
  font-style: normal;
}

.camp__zzz i {
  font-size: 15px;
}

.camp__zzz b {
  font-size: 18px;
}

.camp__me.is-asleep .camp__zzz {
  display: block;
  animation: camp-zzz 2.4s ease-in-out infinite;
}

@keyframes camp-zzz {
  0% {
    opacity: 0;
    translate: 0 6px;
  }

  30%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 10px -14px;
  }
}

/* what the lemon says */
.camp__say {
  --tail: 50%;
  position: absolute;
  left: 0;
  bottom: 62px;
  max-width: min(260px, 80vw);
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 22px -12px rgba(41, 38, 31, 0.55);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  translate: 0 6px;
  transition: opacity 0.25s ease, translate 0.3s var(--soft-ease, ease);
}

.camp__say::after {
  content: "";
  position: absolute;
  left: var(--tail);
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  rotate: 45deg;
}

.camp__say.is-on {
  opacity: 1;
  translate: 0 0;
}

/* hearts from a petted pet, and "+120 gold" from a picked-up lemon */
.camp__heart,
.camp__float {
  position: absolute;
  bottom: 30px;
  pointer-events: none;
  animation: camp-rise 1.4s ease-out both;
}

.camp__heart {
  color: #ff6f91;
  font-size: 15px;
  margin-left: -6px;
}

.camp__float {
  translate: -50% 0;
  white-space: nowrap;
  color: var(--sun-deep, #b8860b);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 0 var(--surface), 0 0 6px var(--surface);
}

.camp__float.is-golden {
  color: #d4880f;
  font-size: 18px;
}

@keyframes camp-rise {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.6);
  }

  20% {
    opacity: 1;
    transform: translate(0, -6px) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), -46px) scale(1);
  }
}

/* a lemon fallen from the trees: it drops in, bounces, and glints to be noticed */
.camp__drop {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  filter: drop-shadow(0 2px 1px rgba(41, 38, 31, 0.3));
  animation: camp-glint 1.6s ease-in-out 1.1s infinite;
}

.camp__drop .art {
  display: block;
  width: 100%;
  height: 100%;
}

.camp__drop.is-falling {
  animation: camp-fall 1s cubic-bezier(0.5, 0, 0.6, 1) both, camp-glint 1.6s ease-in-out 1.1s infinite;
}

@keyframes camp-fall {
  0% {
    translate: 0 -260px;
    rotate: -120deg;
  }

  60% {
    translate: 0 0;
    rotate: 0deg;
  }

  75% {
    translate: 0 -12px;
  }

  90% {
    translate: 0 0;
  }

  95% {
    translate: 0 -3px;
  }
}

@keyframes camp-glint {
  50% {
    filter: drop-shadow(0 2px 1px rgba(41, 38, 31, 0.3)) drop-shadow(0 0 6px rgba(255, 230, 109, 0.95));
  }
}

.camp__drop.is-golden {
  width: 36px;
  height: 36px;
  margin-left: -18px;
  filter: drop-shadow(0 0 6px rgba(255, 200, 40, 0.9)) saturate(1.5) hue-rotate(-12deg);
}

.camp__drop.is-taken {
  animation: camp-taken 0.4s ease-in both;
  pointer-events: none;
}

@keyframes camp-taken {
  to {
    opacity: 0;
    translate: 0 -30px;
    scale: 1.4;
  }
}

.camp__drop.is-gone {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

@media (max-width: 640px) {
  .camp {
    left: 12px;
    right: 12px;
  }

  .camp__me {
    width: 46px;
    height: 46px;
    margin-left: -23px;
  }

  .camp__pet {
    width: 30px;
    height: 30px;
    margin-left: -15px;
  }

  .camp__say {
    bottom: 52px;
  }
}

/* ---------------------------------------------------- the Discord button */

.discord-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #5865f2;
  box-shadow: 0 6px 14px -8px rgba(88, 101, 242, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s var(--soft-ease, ease), background-color 0.2s ease;
}

.discord-btn .ico {
  width: 22px;
  height: 22px;
}

.discord-btn:hover {
  background: #4752c4;
  transform: scale(1.08) rotate(-6deg);
}

.discord-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, #5865f2 50%, transparent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .discord-btn {
    width: 34px;
    height: 34px;
  }

  .discord-btn .ico {
    width: 20px;
    height: 20px;
  }
}

/* the window with the invite to copy */
.discord {
  text-align: center;
}

.discord__logo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 4px auto 10px;
  border-radius: 24px;
  background: #5865f2;
  box-shadow: 0 12px 24px -12px rgba(88, 101, 242, 0.9);
  color: #fff;
}

.discord__logo .ico {
  width: 42px;
  height: 42px;
}

.discord__invite {
  display: flex;
  gap: 8px;
  margin: 14px 0 6px;
}

.discord__invite input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
}

.discord__invite input:focus {
  outline: 2px solid #5865f2;
  outline-offset: 1px;
}

.discord__invite .btn {
  flex: none;
  white-space: nowrap;
}

/* a phone: the invite on its own line, so all of it shows */
@media (max-width: 480px) {
  .discord__invite {
    flex-direction: column;
  }

  .discord__invite input {
    font-size: 13px;
  }
}

/* a lemon far stronger than the chapter: its pests are weaker, and the chapter screen says so */
.hint.hint--strong {
  margin: -4px 0 10px;
  color: var(--good);
  font-weight: 800;
  text-align: center;
}