/*
  Stack to the Stars (叠出文明): a card table under the site bar. The HUD runs along the top
  (stages, the cycle clock, food, card count, money, controls), the board fills the middle,
  packs and the sell box sit along the bottom. Quests float top left, card details top right.
  Placeholder look for the rules prototype: paper cards with a coloured band and an emoji.
*/

html,
body {
  height: 100%;
}

body.es-body {
  margin: 0;
  overflow: hidden;
  background: #0b1118;
  color: var(--gh-ink);
  font-family: var(--gh-font-body);
  overscroll-behavior: none;
}

.es-stage {
  --es-glass: rgba(12, 17, 24, 0.82);
  --es-line: rgba(220, 235, 255, 0.14);
  --es-text: #eef3f7;
  --es-dim: #9fb0bf;
  --es-gold: #ffd25c;
  --es-ok: #7fd87a;
  --es-warn: #ffb547;
  --es-bad: #ff6b5b;
  --es-board-a: #0d4a5c;
  --es-board-b: #072a38;
  --es-board-dot: rgba(160, 230, 255, 0.07);
  position: fixed;
  inset: 56px 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  color: var(--es-text);
}

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

.es-stage button {
  font: inherit;
  color: inherit;
}

.es-stage[data-stage="ocean"] { --es-board-a: #1d5872; --es-board-b: #0a2232; --es-board-dot: rgba(170, 235, 255, 0.07); }
.es-stage[data-stage="creature"] { --es-board-a: #3f6b2f; --es-board-b: #1f3d1c; --es-board-dot: rgba(220, 255, 180, 0.06); }
.es-stage[data-stage="tribe"] { --es-board-a: #6b5532; --es-board-b: #362916; --es-board-dot: rgba(255, 230, 170, 0.06); }
.es-stage[data-stage="civ"] { --es-board-a: #4b5a6b; --es-board-b: #252e3a; --es-board-dot: rgba(220, 235, 255, 0.07); }
.es-stage[data-stage="space"] { --es-board-a: #1b1840; --es-board-b: #06060f; --es-board-dot: rgba(255, 255, 255, 0.5); }

/* ---------- HUD ---------- */

.es-hud {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--es-glass);
  border-bottom: 1px solid var(--es-line);
  position: relative;
  z-index: 20;
}

.es-track {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-track li {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 17px;
  opacity: 0.45;
  position: relative;
}

.es-track li.is-done { opacity: 0.8; }
.es-track li.is-done::after {
  content: "✓";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--es-ok);
  color: #0b1a0a;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.es-track li.is-now {
  opacity: 1;
  border-color: var(--es-gold);
  box-shadow: 0 0 0 2px rgba(255, 210, 92, 0.25);
  background: rgba(255, 210, 92, 0.12);
}

.es-cycle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  flex: 1 1 220px;
  max-width: 360px;
}

.es-cycle-name {
  font-family: var(--gh-font-display);
  font-size: 1.05rem;
  white-space: nowrap;
}

.es-cycle-bar {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.es-cycle-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6fd6ff, #ffd25c);
  border-radius: inherit;
}

.es-cycle.is-late .es-cycle-bar i { background: linear-gradient(90deg, #ffb547, #ff6b5b); }
.es-cycle-left { font-variant-numeric: tabular-nums; color: var(--es-dim); font-size: 0.9rem; min-width: 3ch; }

.es-stats {
  display: flex;
  gap: 6px;
}

.es-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.es-stat i { font-style: normal; }
.es-stat b { font-weight: 700; }
.es-stat.is-bad { border-color: rgba(255, 107, 91, 0.6); background: rgba(255, 107, 91, 0.16); }
.es-stat.is-bad b { color: #ffb3a8; }

.es-ctrl {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
}

.es-ctrl button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.es-ctrl button:hover { background: rgba(255, 255, 255, 0.12); }
.es-ctrl button em { font-style: normal; font-size: 0.9rem; }
.es-ctrl svg { width: 18px; height: 18px; }
.es-ctrl [data-act="pause"] .es-i-play { display: none; }
.es-ctrl [data-act="pause"][aria-pressed="true"] .es-i-play { display: inline; }
.es-ctrl [data-act="pause"][aria-pressed="true"] .es-i-pause { display: none; }
.es-ctrl [data-act="pause"][aria-pressed="true"] { background: rgba(255, 210, 92, 0.2); border-color: var(--es-gold); }
.es-ctrl [data-act="sound"] .es-mute { display: none; }
.es-ctrl [data-act="sound"][aria-pressed="false"] .es-mute { display: inline; }
.es-ctrl [data-act="sound"][aria-pressed="false"] .es-wave { display: none; }
.es-ctrl [data-act="sound"][aria-pressed="false"] { color: var(--es-dim); }

/* ---------- Board ---------- */

.es-view {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(circle at 50% 45%, var(--es-board-a), var(--es-board-b) 75%);
}

.es-view.is-panning { cursor: grabbing; }

.es-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border-radius: 28px;
  background-color: rgba(0, 0, 0, 0.08);
  background-image: radial-gradient(var(--es-board-dot) 1.6px, transparent 1.8px);
  background-size: 34px 34px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 80px rgba(0, 0, 0, 0.35);
}

.es-world.has-art {
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 120px rgba(0, 0, 0, 0.55);
}

.es-stage[data-stage="space"] .es-world:not(.has-art) {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1.4px),
    radial-gradient(rgba(180, 200, 255, 0.4) 1px, transparent 1.4px);
  background-size: 97px 89px, 53px 61px;
  background-position: 0 0, 23px 31px;
}

.es-paused {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 16px;
  border-radius: 99px;
  background: rgba(255, 210, 92, 0.92);
  color: #2a1d00;
  font-weight: 700;
  pointer-events: none;
  z-index: 5;
}

/* ---------- Cards ---------- */

.es-card {
  --band: #c9a66b;
  --ink: #20272d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 136px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf8 0%, #f5eddd 100%);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 16px -8px rgba(0, 0, 0, 0.55);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overflow: hidden;
  transition: translate 140ms ease, rotate 160ms ease, scale 160ms ease, box-shadow 160ms ease, filter 120ms ease;
}

.es-card.is-new { animation: es-born 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }

.es-card[data-kind="unit"] { --band: #5aa7ff; }
.es-card[data-kind="food"] { --band: #84cf72; }
.es-card[data-kind="resource"] { --band: #d8b57a; }
.es-card[data-kind="source"] { --band: #a4c470; }
.es-card[data-kind="location"] { --band: #56bdb0; }
.es-card[data-kind="building"] { --band: #ae92e0; }
.es-card[data-kind="equip"] { --band: #b6c4ce; }
.es-card[data-kind="enemy"] { --band: #ee6a64; }
.es-card[data-kind="wild"] { --band: #f0aa52; }
.es-card[data-kind="faction"] { --band: #7b8cf0; }
.es-card[data-kind="goal"] { --band: #f6d058; }
/* Random events: red for a disaster, gold for good news, with a slow pulse so they are noticed. */
.es-card[data-kind="event"] { --band: #e2584f; animation: es-event-pulse 2.4s ease-in-out infinite; }
.es-card[data-kind="event"].is-good { --band: #f3c24b; }
@keyframes es-event-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--band) 0%, transparent), 0 10px 22px -12px rgba(0, 0, 0, 0.7); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--band) 35%, transparent), 0 10px 22px -12px rgba(0, 0, 0, 0.7); }
}
.es-stage.is-shaking .es-world { animation: es-shake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes es-shake {
  10%, 90% { translate: -2px 1px; }
  20%, 80% { translate: 4px -2px; }
  30%, 50%, 70% { translate: -7px 3px; }
  40%, 60% { translate: 7px -3px; }
}
.es-cycle.has-event .es-cycle-name { color: var(--es-gold); }
.es-calm .es-card[data-kind="event"] { animation: none; }
.es-card[data-kind="special"] { --band: #eca8da; }
.es-card[data-kind="remains"] { --band: #a5a5a5; }
.es-card[data-kind="pack"] { --band: #ffcf5a; background: linear-gradient(160deg, #fff6d6, #ffd06a); }
.es-card.is-mine { --band: var(--species, #5aa7ff); }

@media (pointer: fine) {
  .es-card:hover:not(.is-lifted) {
    translate: 0 -3px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 14px 22px -10px rgba(0, 0, 0, 0.6);
  }
}

.es-c-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: 28px;
  padding: 0 5px 0 7px;
  background: var(--band);
  background: linear-gradient(180deg, color-mix(in srgb, var(--band) 72%, #fff) 0%, var(--band) 70%);
  border-bottom: 2px solid var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.es-c-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.es-c-val {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 3px;
  border-radius: 99px;
  background: radial-gradient(circle at 35% 30%, #fff6c4 0%, #ffd23f 55%, #d99a00 100%);
  border: 1.5px solid var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  text-shadow: none;
}

.es-c-art {
  --well: color-mix(in srgb, var(--band) 20%, #fffaf0);
  position: absolute;
  left: 5px;
  right: 5px;
  top: 32px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #fffdf6 0%, var(--well) 75%);
  box-shadow: inset 0 0 0 1px rgba(32, 39, 45, 0.16), inset 0 -6px 12px -8px rgba(32, 39, 45, 0.25);
  font-size: 42px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.es-c-art > span { filter: drop-shadow(0 3px 0 rgba(32, 39, 45, 0.16)); }

.es-c-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.es-card.is-big .es-c-art { font-size: 48px; }

.es-c-sub,
.es-c-lv {
  position: absolute;
  top: 35px;
  max-width: 64%;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.88);
  color: #3a454f;
  box-shadow: 0 1px 0 rgba(32, 39, 45, 0.15);
  z-index: 1;
}

.es-c-sub { left: 8px; }
.es-c-lv { right: 8px; background: #ffe28a; color: #3a2a00; }

.es-c-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 27px;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.es-st {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.es-i {
  width: 11px;
  height: 11px;
  flex: none;
  fill: currentColor;
}

.es-st.is-hp { color: #c33a33; }
.es-st.is-hp.is-hurt { color: #e0261b; }
.es-st.is-atk { color: #4b5a66; }
.es-st.is-eat { color: #c97a12; }
.es-st.is-food { color: #2f8a3a; }
.es-st.is-uses { color: #6f7a3a; }
.es-st.is-text { color: #3a454f; font-weight: 700; font-size: 10.5px; }

.es-c-eq {
  position: absolute;
  right: 8px;
  bottom: 31px;
  display: flex;
  gap: 2px;
  font-size: 14px;
  line-height: 1;
  z-index: 1;
}

.es-c-eq img,
.es-c-eq span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1.5px var(--ink);
  object-fit: cover;
}

.es-c-tag {
  position: absolute;
  z-index: 1;
  right: 8px;
  top: 35px;
  padding: 1px 5px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(32, 39, 45, 0.08);
}

.es-c-tag.is-ally { background: #c9f2c1; }
.es-c-tag.is-conquer { background: #ffd2c7; }

/* A worker with nothing to do. */
.es-c-idle {
  position: absolute;
  z-index: 1;
  left: 8px;
  bottom: 31px;
  display: none;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 800;
  line-height: 13px;
  color: #fff;
  background: #6b7c8a;
  letter-spacing: 0.04em;
}

.es-card.is-idle .es-c-idle { display: block; animation: es-doze 2.4s ease-in-out infinite; }

.es-c-meter {
  position: absolute;
  z-index: 1;
  left: 9px;
  right: 9px;
  bottom: 30px;
  height: 4px;
  border-radius: 99px;
  background: rgba(32, 39, 45, 0.14);
  overflow: hidden;
}

.es-c-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #56bdb0, #8fe0c8);
}

.es-card.is-lifted {
  rotate: -2.5deg;
  scale: 1.05;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 22px 30px -8px rgba(0, 0, 0, 0.55);
  cursor: grabbing;
}

.es-card.is-target { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--plan, #9fb0bf), 0 10px 22px -8px rgba(0, 0, 0, 0.6); }
.es-card.is-target[data-plan="recipe"] { --plan: #7fd87a; }
.es-card.is-target[data-plan="equip"] { --plan: #6fd6ff; }
.es-card.is-target[data-plan="fight"],
.es-card.is-target[data-plan="hunt"],
.es-card.is-target[data-plan="siege"],
.es-card.is-target[data-plan="join"] { --plan: #ff6b5b; }
.es-card.is-target[data-plan="none"] { --plan: #555; }

.es-card.is-selected { box-shadow: 0 0 0 3px #ffd25c, 0 2px 0 rgba(0, 0, 0, 0.35), 0 10px 18px -8px rgba(0, 0, 0, 0.55); }
.es-card.is-hit { animation: es-shake 220ms ease; }
.es-card.is-lunge-up { animation: es-lunge-up 260ms ease; }
.es-card.is-lunge-down { animation: es-lunge-down 260ms ease; }
.es-card.is-gone { animation: es-gone 260ms ease forwards; pointer-events: none; }
.es-card.is-busy .es-c-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 0 12px);
  background-size: 34px 34px;
  animation: es-busy 1s linear infinite;
  pointer-events: none;
}

.es-card[data-kind="pack"] { cursor: pointer; }
.es-card[data-kind="pack"] .es-c-art { font-size: 50px; background: radial-gradient(ellipse at 50% 40%, #fffbe8 0%, #ffe39a 80%); }
.es-card[data-kind="pack"]:hover { filter: brightness(1.05); }
.es-card[data-kind="pack"] .es-c-foot { color: #5a3d00; }

@keyframes es-born {
  0% { opacity: 0; scale: 0.45; }
  60% { opacity: 1; scale: 1.07; }
  100% { opacity: 1; scale: 1; }
}

@keyframes es-gone {
  to { opacity: 0; scale: 0.6; translate: 0 -10px; }
}

@keyframes es-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -5px 0; }
  75% { translate: 5px 0; }
}

@keyframes es-lunge-up {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -14px; }
}

@keyframes es-lunge-down {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 14px; }
}

@keyframes es-busy {
  to { background-position: 34px 0; }
}

@keyframes es-doze {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Work progress over a stack. */
.es-prog {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 18px;
  pointer-events: none;
}

.es-prog span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.es-prog b {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 6px;
  height: 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid #fff;
  overflow: hidden;
}

.es-prog b i {
  display: block;
  height: 100%;
  width: 0;
  background: #7fd87a;
}

.es-prog.is-social b i { background: #ff9ec7; }
.es-prog.is-evolve b i { background: #ffd25c; }

/* Battles. */
.es-fight {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 16px;
  border: 3px dashed rgba(255, 107, 91, 0.85);
  background: rgba(120, 10, 10, 0.25);
  pointer-events: none;
}

.es-fight::before {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 99px;
  background: #ff6b5b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Floating numbers. */
.es-float {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  animation: es-rise 1.1s ease-out forwards;
  z-index: 999999;
}

.es-float.is-dmg { color: #ffb3a8; }
.es-float.is-miss { color: #cfd8df; font-size: 15px; }
.es-float.is-money { color: #ffe28a; }

@keyframes es-rise {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 0 -46px; }
}

/* ---------- Side panels ---------- */

.es-quests,
.es-info,
.es-banner,
.es-dialog,
.es-toasts li {
  border: 1px solid var(--es-line);
  background: var(--es-glass);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--es-text);
}

.es-quests {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 260px;
  max-height: calc(100% - 20px);
  overflow: auto;
  border-radius: 14px;
  padding: 10px 12px;
  z-index: 15;
  font-size: 0.88rem;
}

.es-quests header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.es-quests h2 {
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: 1rem;
}

.es-quests header button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
  color: var(--es-dim);
}

.es-goal {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 210, 92, 0.12);
  border: 1px solid rgba(255, 210, 92, 0.35);
  line-height: 1.45;
}

.es-goal b { color: var(--es-gold); }

.es-quests ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.es-quests li {
  display: flex;
  gap: 7px;
  line-height: 1.4;
  color: var(--es-dim);
}

.es-quests li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
}

.es-quests li.is-done { text-decoration: line-through; opacity: 0.55; }
.es-quests li.is-done::before { content: "✓"; display: grid; place-items: center; font-size: 10px; background: var(--es-ok); color: #0b1a0a; border-color: var(--es-ok); }
.es-quests li.is-now { color: var(--es-text); font-weight: 600; }
.es-quests li.is-now::before { border-color: var(--es-gold); box-shadow: 0 0 0 2px rgba(255, 210, 92, 0.3); }
.es-quests li small { display: block; color: var(--es-gold); font-weight: 400; font-size: 0.8rem; }

.es-quests.is-folded .es-goal,
.es-quests.is-folded li:not(.is-now) { display: none; }
.es-quests.is-folded header { margin-bottom: 2px; }

.es-info {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 290px;
  max-height: 58%;
  overflow: auto;
  border-radius: 14px;
  padding: 12px 14px;
  z-index: 15;
  font-size: 0.88rem;
  line-height: 1.5;
}

.es-info h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-family: var(--gh-font-display);
  font-size: 1.15rem;
}

.es-info h3 span { font-size: 1.5rem; }
.es-info .es-kind { margin: 0 0 6px; color: var(--es-dim); font-size: 0.8rem; }
.es-info p { margin: 0 0 8px; }
.es-info h4 { margin: 10px 0 4px; font-size: 0.82rem; color: var(--es-dim); font-weight: 600; }
.es-info .es-statline { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.es-info .es-statline span { padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.es-info .es-slots { display: grid; gap: 4px; }
.es-info .es-slots button,
.es-info .es-slots span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.05);
  text-align: start;
}

.es-info .es-slots button { cursor: pointer; }
.es-info .es-slots button:hover { background: rgba(255, 107, 91, 0.18); }
.es-info .es-slots small { margin-inline-start: auto; color: var(--es-dim); }
.es-info .es-close {
  position: absolute;
  right: 6px;
  top: 6px;
  border: 0;
  background: transparent;
  color: var(--es-dim);
  font-size: 18px;
  cursor: pointer;
}

.es-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
  margin: 0 0 5px;
  font-size: 0.82rem;
}

.es-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px 1px 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  white-space: nowrap;
}

.es-chip.is-out { background: rgba(127, 216, 122, 0.2); }
.es-op { color: var(--es-dim); }

/* ---------- Shop ---------- */

.es-shop {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  background: var(--es-glass);
  border-top: 1px solid var(--es-line);
  position: relative;
  z-index: 20;
}

.es-packs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: thin;
}

.es-pack {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 150px;
  padding: 7px 12px 7px 9px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 210, 92, 0.55);
  background: linear-gradient(160deg, rgba(255, 210, 92, 0.18), rgba(255, 160, 60, 0.08));
  text-align: start;
  cursor: pointer;
}

.es-pack:hover:not(:disabled) { background: linear-gradient(160deg, rgba(255, 210, 92, 0.32), rgba(255, 160, 60, 0.14)); }
.es-pack > span { grid-row: 1 / 3; font-size: 26px; }
.es-pack > img { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.es-pack.is-locked > img { filter: grayscale(1); opacity: 0.5; }
.es-pack b { font-size: 0.95rem; }
.es-pack small { color: var(--es-gold); font-weight: 700; }
.es-pack:disabled { cursor: default; border-color: var(--es-line); background: rgba(255, 255, 255, 0.04); }
.es-pack:disabled small { color: var(--es-dim); font-weight: 400; }
.es-pack.is-locked > span { filter: grayscale(1); opacity: 0.5; }
.es-pack.is-poor small { color: var(--es-bad); }

.es-sell {
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  width: 120px;
  border-radius: 12px;
  border: 2px dashed rgba(255, 210, 92, 0.6);
  background: rgba(255, 210, 92, 0.06);
  text-align: center;
  line-height: 1.2;
}

.es-sell span { font-size: 20px; }
.es-sell small { color: var(--es-dim); font-size: 0.72rem; }
.es-sell.is-hot { background: rgba(255, 210, 92, 0.3); border-style: solid; transform: scale(1.04); }

/* ---------- Banner, toasts, modal ---------- */

.es-banner {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 25;
  max-width: min(560px, calc(100% - 24px));
  padding: 10px 16px;
  border-radius: 12px;
  text-align: center;
  border-color: rgba(255, 107, 91, 0.6);
  background: rgba(70, 14, 10, 0.9);
  line-height: 1.45;
}

.es-toasts {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  width: min(380px, calc(100% - 24px));
}

.es-toasts li {
  padding: 7px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  animation: es-toast 4.2s ease forwards;
}

.es-toasts li[data-tone="good"] { border-color: rgba(127, 216, 122, 0.6); }
.es-toasts li[data-tone="warn"] { border-color: rgba(255, 181, 71, 0.7); }
.es-toasts li[data-tone="bad"] { border-color: rgba(255, 107, 91, 0.8); background: rgba(70, 14, 10, 0.9); }
.es-toasts li[data-tone="idea"] { border-color: rgba(255, 210, 92, 0.8); background: rgba(60, 46, 6, 0.92); }
.es-toasts li[data-tone="quest"] { border-color: rgba(111, 214, 255, 0.7); }

@keyframes es-toast {
  0% { opacity: 0; transform: translateY(8px); }
  6% { opacity: 1; transform: none; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

.es-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 8, 12, 0.6);
}

.es-modal[hidden] { display: none; }

.es-dialog {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  border-radius: 18px;
  padding: 20px 22px;
  line-height: 1.6;
}

.es-dialog.is-wide { width: min(760px, 100%); }
.es-scene {
  display: block;
  width: calc(100% + 44px);
  max-width: none;
  margin: -20px -22px 14px;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid var(--es-line);
}
.es-dialog h2 { margin: 0 0 4px; font-family: var(--gh-font-display); font-size: 1.5rem; }
.es-dialog .es-eyebrow { margin: 0; color: var(--es-gold); font-size: 0.85rem; font-weight: 600; }
.es-dialog p { margin: 0 0 10px; }
.es-dialog h3 { margin: 14px 0 6px; font-size: 1rem; }
.es-dialog ul { margin: 0 0 10px; padding-inline-start: 1.2em; }
.es-dialog li { margin-bottom: 4px; }

.es-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.es-btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  font-weight: 600;
}

.es-btn:hover { background: rgba(255, 255, 255, 0.14); }
.es-btn.is-primary { background: var(--es-gold); color: #2a1d00; border-color: var(--es-gold); }
.es-btn.is-primary:hover { background: #ffdf85; }
.es-btn.is-danger { border-color: rgba(255, 107, 91, 0.7); color: #ffb3a8; }

.es-trait {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 210, 92, 0.1);
  border: 1px solid rgba(255, 210, 92, 0.4);
  margin: 10px 0;
}

.es-trait > span { font-size: 30px; line-height: 1; }
.es-trait b { display: block; color: var(--es-gold); }

.es-field { display: grid; gap: 6px; margin: 12px 0; }
.es-field label { font-weight: 600; font-size: 0.9rem; }
.es-field input {
  font: inherit;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--es-text);
}

.es-hues { display: flex; gap: 8px; flex-wrap: wrap; }
.es-hues button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
}

.es-hues button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--es-gold); }

.es-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.es-levels button {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 9px 8px;
  border: 1px solid var(--es-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  cursor: pointer;
}
.es-levels button b { font-size: 0.95rem; }
.es-levels button small { color: var(--es-dim); font-size: 0.74rem; line-height: 1.3; }
.es-levels button:hover { background: rgba(255, 255, 255, 0.09); }
.es-levels button[aria-pressed="true"] { border-color: var(--es-gold); background: rgba(255, 210, 92, 0.14); box-shadow: inset 0 0 0 1px var(--es-gold); }
.es-settings-level { display: grid; gap: 8px; }
.es-settings-level > span { color: var(--es-dim); font-size: 0.9rem; }

.es-book-list { display: grid; gap: 6px; }
.es-book-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.es-book-row b { min-width: 7em; margin-inline-end: 4px; font-size: 0.9rem; }
.es-book-row.is-unknown { opacity: 0.5; font-style: italic; }
.es-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 10px; }
.es-tabs button { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--es-line); background: transparent; cursor: pointer; }
.es-tabs button[aria-pressed="true"] { background: var(--es-gold); color: #2a1d00; border-color: var(--es-gold); }

.es-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.es-summary div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.es-summary small { display: block; color: var(--es-dim); font-size: 0.78rem; }
.es-summary b { font-size: 1.15rem; }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .es-hud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 6px 8px;
  }
  .es-track { display: none; }
  .es-stats { grid-column: 1; grid-row: 1; gap: 4px; min-width: 0; }
  .es-ctrl { grid-column: 2; grid-row: 1; margin: 0; gap: 3px; }
  .es-ctrl [data-act="help"] { display: none; }
  .es-cycle { grid-column: 1 / -1; grid-row: 2; max-width: none; min-width: 0; }
  .es-track li { width: 24px; height: 24px; font-size: 13px; }
  .es-ctrl em { display: none; }
  .es-ctrl button { min-width: 32px; height: 30px; padding: 0 6px; }
  .es-stat { padding: 2px 6px; font-size: 0.8rem; gap: 3px; }
  .es-cycle-name { font-size: 0.95rem; }
  .es-cycle-left { display: none; }
  .es-toasts { top: 74px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); align-items: center; flex-direction: column; }
  .es-quests.is-folded { width: auto; max-width: calc(100% - 20px); }
  .es-quests { width: min(250px, calc(100% - 20px)); top: 10px; max-height: 45%; }
  .es-info { left: 10px; right: 10px; top: auto; bottom: 8px; width: auto; max-height: 50%; }
  .es-pack { min-width: 120px; padding: 6px 10px 6px 8px; }
  .es-pack > span { font-size: 20px; }
  .es-sell { width: 86px; }
}

/* ---------- Drop hint and the ideas badge ---------- */

.es-hint {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  z-index: 26;
  margin: 0;
  padding: 6px 16px;
  border-radius: 99px;
  border: 1px solid var(--es-line);
  background: rgba(12, 17, 24, 0.92);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  pointer-events: none;
}

.es-hint[data-kind="recipe"] { border-color: var(--es-ok); color: #c9f2c1; }
.es-hint[data-kind="equip"] { border-color: #6fd6ff; color: #c8efff; }
.es-hint[data-kind="fight"],
.es-hint[data-kind="hunt"],
.es-hint[data-kind="siege"],
.es-hint[data-kind="join"] { border-color: var(--es-bad); color: #ffc2b9; }
.es-hint[data-kind="none"] { color: var(--es-dim); }

.es-ctrl button { position: relative; }
.es-ctrl button.has-new::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--es-gold);
  box-shadow: 0 0 0 2px rgba(12, 17, 24, 0.9);
}

/* ---------- ?gallery: every card and picture on one page ---------- */

body.es-gallery-body { overflow: auto; }
.es-gallery {
  padding: 24px clamp(16px, 4vw, 40px) 60px;
  color: #eef3f7;
}

.es-gallery-head h1 { margin: 0 0 6px; font-family: var(--gh-font-display); }
.es-gallery-head p { margin: 0 0 18px; color: #9fb0bf; }
.es-gallery h2 { margin: 26px 0 12px; font-family: var(--gh-font-display); }
.es-gallery-cards { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.es-gallery-cards figure { margin: 0; width: 100px; }
.es-gallery-cards .es-card { position: relative; transform: none; }
.es-gallery figcaption { margin-top: 4px; font-size: 11px; color: #9fb0bf; word-break: break-all; }
.es-gallery figcaption b { color: #ff8f80; }
.es-gallery-wide { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.es-gallery-wide figure { margin: 0; width: min(360px, 100%); }
.es-gallery-wide img,
.es-gallery-wide span {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #ff8f80;
}

/* ---------- Quest hints ("show me") and tidying ---------- */

.es-show {
  display: inline-block;
  margin: 4px 0 0;
  padding: 2px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255, 210, 92, 0.6);
  background: rgba(255, 210, 92, 0.12);
  color: var(--es-gold);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.es-show:hover { background: rgba(255, 210, 92, 0.25); }
.es-quests li .es-show { display: block; width: fit-content; }

.es-card.is-hint,
.es-sell.is-hint,
.es-pack.is-hint {
  animation: es-hint 0.9s ease-in-out 4;
}

@keyframes es-hint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 92, 0); }
  50% { box-shadow: 0 0 0 6px #ffd25c, 0 0 26px 8px rgba(255, 210, 92, 0.6); }
}

.es-tidy {
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  width: 64px;
  border-radius: 12px;
  border: 1px solid var(--es-line);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  line-height: 1.2;
  font-size: 0.78rem;
}

.es-tidy span { font-size: 18px; }
.es-tidy:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 760px) {
  .es-tidy { width: 52px; }
}

/* ---------- Effects ---------- */

.es-fx {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.es-fx::before,
.es-fx::after {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.es-fx.is-spark::before {
  background: radial-gradient(circle, rgba(255, 240, 170, 0.95) 0 10%, rgba(255, 210, 92, 0.6) 25%, transparent 60%);
  animation: es-fx-flash 520ms ease-out forwards;
}

.es-fx.is-spark::after {
  box-shadow:
    0 -30px 0 -26px #ffe28a, 21px -21px 0 -26px #fff, 30px 0 0 -26px #ffe28a, 21px 21px 0 -26px #fff,
    0 30px 0 -26px #ffe28a, -21px 21px 0 -26px #fff, -30px 0 0 -26px #ffe28a, -21px -21px 0 -26px #fff;
  animation: es-fx-burst 620ms ease-out forwards;
}

.es-fx.is-poof::before {
  background: radial-gradient(circle, rgba(220, 225, 230, 0.85) 0 30%, rgba(160, 170, 180, 0.4) 50%, transparent 70%);
  animation: es-fx-poof 700ms ease-out forwards;
}

@keyframes es-fx-flash {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(1.4); opacity: 0; }
}

@keyframes es-fx-burst {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

@keyframes es-fx-poof {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(1.8) translateY(-14px); opacity: 0; }
}

.es-ghost { pointer-events: none; animation: none !important; transition: none !important; }
.es-ghost.is-demo { box-shadow: 0 0 0 3px rgba(255, 210, 92, 0.9), 0 16px 26px rgba(0, 0, 0, 0.45); }

.es-hand {
  position: absolute;
  right: -8px;
  bottom: -14px;
  font-size: 34px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

.es-sell.is-paid { animation: es-paid 520ms ease; }

@keyframes es-paid {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); background: rgba(255, 210, 92, 0.45); }
  100% { transform: scale(1); }
}

.es-stat.is-alarm { animation: es-alarm 0.8s ease-in-out infinite; }

@keyframes es-alarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 91, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 107, 91, 0.45); }
}

/* ---------- Ambient layer ---------- */

.es-ambient {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Title screen ---------- */

.es-modal.is-title {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 210, 92, 0.12), transparent 60%),
    rgba(4, 8, 12, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.es-dialog.is-title {
  width: min(520px, 100%);
  text-align: center;
  padding-top: 26px;
}

.es-title h1 {
  margin: 6px 0 4px;
  font-family: var(--gh-font-display);
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff6d6 10%, #ffd25c 60%, #ff9f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}

.es-title-sub { margin: 0 0 8px; color: var(--es-dim); }
.es-title-save {
  display: inline-block;
  margin: 4px 0 0;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--es-line);
  font-size: 0.88rem;
}

.es-title-road {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.es-title-road span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--es-line);
  animation: es-bob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}

.es-title-road span + span { position: relative; }
.es-title-road span + span::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: rgba(255, 210, 92, 0.5);
}

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

.es-dialog.is-title .es-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 320px;
  margin: 18px auto 4px;
}

.es-dialog.is-title .es-btn { padding: 11px 18px; font-size: 1rem; }
.es-dialog.is-title .es-scene { aspect-ratio: 16 / 7; }

/* ---------- Settings ---------- */

.es-settings { display: grid; gap: 14px; margin: 14px 0 4px; }
.es-settings label { display: grid; grid-template-columns: 7em 1fr 2.5em; align-items: center; gap: 10px; }
.es-settings input[type="range"] { width: 100%; accent-color: var(--es-gold); }
.es-settings output { text-align: right; font-variant-numeric: tabular-nums; color: var(--es-dim); }
.es-settings .es-check { grid-template-columns: auto 1fr; align-items: start; line-height: 1.45; }
.es-settings .es-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--es-gold); }

/* ---------- Evolution interstitial ---------- */

.es-evofx {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 210, 92, 0.35), rgba(4, 8, 12, 0.85) 60%);
  animation: es-evofx-bg 2.1s ease forwards;
  pointer-events: all;
}

.es-evofx > * { grid-area: 1 / 1; }
.es-evofx span,
.es-evofx b { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

.es-evofx-rays {
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 138, 0.28) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%);
  mask: radial-gradient(circle, #000 0 30%, transparent 70%);
  animation: es-evofx-spin 2.1s linear forwards;
}

.es-evofx-from,
.es-evofx-to { font-size: 120px; line-height: 1; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)); }
.es-evofx-from { animation: es-evofx-out 1s ease-in forwards; }
.es-evofx-to { opacity: 0; animation: es-evofx-in 1.1s 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }

.es-evofx b {
  align-self: end;
  margin-bottom: 18vh;
  font-family: var(--gh-font-display);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: #ffe28a;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: es-evofx-in 0.8s 1.1s ease forwards;
}

@keyframes es-evofx-bg {
  0% { opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes es-evofx-spin {
  from { transform: rotate(0deg) scale(0.6); }
  to { transform: rotate(60deg) scale(1.2); }
}

@keyframes es-evofx-out {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.25); opacity: 1; filter: brightness(2.2); }
  100% { transform: scale(0.2); opacity: 0; filter: brightness(4); }
}

@keyframes es-evofx-in {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Reduced motion ---------- */

.es-calm .es-card,
.es-calm .es-card.is-new,
.es-calm .es-card.is-hit,
.es-calm .es-card.is-lunge-up,
.es-calm .es-card.is-lunge-down,
.es-calm .es-title-road span,
.es-calm .es-card.is-busy .es-c-head::after { animation: none; transition: none; }
.es-calm .es-card.is-lifted { rotate: 0deg; scale: 1; }

.es-stat.is-bump { animation: es-bump 420ms ease; }

@keyframes es-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); border-color: var(--es-gold); }
  100% { transform: scale(1); }
}

.es-pack.is-ready:not(:disabled) {
  border-color: var(--es-gold);
  box-shadow: 0 0 0 1px rgba(255, 210, 92, 0.4), 0 0 18px -4px rgba(255, 210, 92, 0.7);
}