:root {
  --ink: #173046;
  --blue: #168bd4;
  --blue-dark: #0f5f93;
  --gold: #ffd94a;
  --gold-dark: #ff9f28;
  --soil: #963b2d;
  --cave: #244d5f;
  --panel: #ffeaa8;
  --panel-deep: #e7a746;
  font-family: "Trebuchet MS", Inter, ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(135, 232, 255, 0.5), transparent 320px),
    linear-gradient(180deg, #13486b, #071824);
  color: var(--ink);
}

button {
  border: 0;
  padding: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.62;
}

.phone-shell {
  position: relative;
  width: min(430px, 100vw);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mine-sky, #58bdf8), transparent 78%), color-mix(in srgb, var(--mine-cave, #4b2d31), transparent 78%)),
    url("/assets/pro-mine-background-live33-no-hut.png?v=live33-no-hut") 46% center / auto 100% no-repeat,
    linear-gradient(180deg, var(--mine-sky, #4ec2fb) 0 20%, #51d471 20% 27%, var(--mine-ground, #7f392e) 27% 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 18px 58px rgba(0, 0, 0, 0.38);
  isolation: isolate;
}

.phone-shell::before {
  content: "";
  display: none;
}

.phone-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 47%, color-mix(in srgb, var(--mine-crystal, #50ff78), transparent 60%) 0 18px, transparent 54px),
    radial-gradient(circle at 87% 58%, rgba(255, 80, 80, 0.25) 0 16px, transparent 50px),
    radial-gradient(circle at 86% 70%, rgba(80, 230, 255, 0.28) 0 18px, transparent 54px),
    radial-gradient(circle at 86% 83%, rgba(213, 85, 255, 0.24) 0 18px, transparent 56px),
    linear-gradient(105deg, transparent 0 48%, rgba(255, 255, 255, 0.18) 51%, transparent 55% 100%);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: art-glow 2.4s ease-in-out infinite;
}

.currency-bar {
  position: absolute;
  top: max(7px, env(safe-area-inset-top));
  left: 6px;
  right: 6px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.currency-chip {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: center;
  min-height: 39px;
  overflow: hidden;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #46baf5, #1078be);
  box-shadow: 0 4px 0 rgba(5, 59, 94, 0.45), 0 10px 18px rgba(5, 36, 62, 0.24);
  text-shadow: 0 2px 0 rgba(4, 54, 92, 0.42);
}

.currency-chip > * {
  position: relative;
  z-index: 1;
}

.currency-chip.idle::after {
  content: "";
  position: absolute;
  right: 25px;
  bottom: -8px;
  z-index: 0;
  width: 36px;
  height: 36px;
  background: url("/assets/ui-offline2-vault.png") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 225, 75, 0.58));
  transform: translateY(8px) scale(0.68);
  transition: opacity 220ms ease, transform 220ms ease;
}

.phone-shell.offline-ready .currency-chip.idle {
  border-color: rgba(255, 239, 93, 0.86);
  box-shadow: 0 4px 0 rgba(5, 59, 94, 0.45), 0 0 18px rgba(255, 224, 72, 0.68);
}

.phone-shell.offline-ready .currency-chip.idle::after {
  opacity: 0.48;
  transform: translateY(0) scale(0.8);
  animation: offline-chip-vault 1.25s ease-in-out infinite;
}

.currency-chip small,
.mine-title small,
.selected-card small,
.transport-pill small,
.upgrade-button small {
  display: block;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.currency-chip strong {
  display: block;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currency-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #8dff77, #169e43);
  box-shadow: 0 2px 0 rgba(0, 83, 33, 0.5);
  font-weight: 900;
}

.coin-badge {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #b36a14;
  border-radius: 50%;
  color: #9c5a12;
  background: radial-gradient(circle at 35% 26%, #fff8a6, var(--gold) 58%, var(--gold-dark));
  font-size: 0.78rem;
  font-weight: 900;
  text-shadow: none;
}

.coin-badge.zzz {
  border-color: #7146c9;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #ffe8ff, #8d62ff 54%, #5535b8);
  font-size: 0.62rem;
}

.coin-badge.gem {
  border-color: #0f71a2;
  background: linear-gradient(135deg, #bdfaff 0 20%, #22d3ee 21% 58%, #0f8ed2 59% 100%);
  border-radius: 7px;
  rotate: 45deg;
}

.mine-title {
  position: absolute;
  top: max(53px, calc(env(safe-area-inset-top) + 53px));
  left: 46px;
  right: 6px;
  z-index: 14;
  display: grid;
  grid-template-columns: 33px 33px minmax(0, 1fr) 33px 33px;
  gap: 5px;
  align-items: center;
  min-height: 35px;
  padding: 3px 5px;
  border: 2px solid rgba(4, 48, 75, 0.34);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #2e7896, #17475d);
  box-shadow: 0 4px 0 rgba(1, 32, 51, 0.45);
  text-shadow: 0 2px 0 rgba(1, 35, 51, 0.45);
}

.mine-title strong,
.mine-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-title strong {
  font-size: 0.92rem;
  line-height: 1;
}

.quest-strip {
  position: absolute;
  top: max(94px, calc(env(safe-area-inset-top) + 94px));
  left: 50px;
  right: 7px;
  z-index: 16;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 58px;
  gap: 6px;
  align-items: center;
  min-height: 45px;
  padding: 5px 6px;
  border: 2px solid rgba(216, 244, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, rgba(55, 143, 181, 0.96), rgba(19, 75, 99, 0.95));
  box-shadow: 0 4px 0 rgba(3, 41, 62, 0.42), 0 10px 20px rgba(5, 26, 39, 0.2);
  text-shadow: 0 2px 0 rgba(0, 42, 67, 0.5);
}

.quest-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffdc55, #ff9a23);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), 0 3px 0 rgba(128, 79, 11, 0.52);
}

.quest-icon::before {
  content: "";
  width: 19px;
  height: 19px;
  background: #fff6a8;
  clip-path: polygon(50% 0, 62% 34%, 98% 36%, 69% 57%, 79% 93%, 50% 72%, 20% 93%, 31% 57%, 2% 36%, 38% 34%);
}

.quest-copy {
  min-width: 0;
}

.quest-copy strong,
.quest-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-copy strong {
  font-size: 0.76rem;
  line-height: 1.05;
}

.quest-copy small {
  margin-top: 1px;
  font-size: 0.6rem;
  font-weight: 900;
  opacity: 0.92;
}

.quest-copy i {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(4, 33, 51, 0.54);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
}

.quest-copy em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff16a, #ff9e29);
  box-shadow: 0 0 9px rgba(255, 220, 64, 0.78);
}

.quest-strip button {
  min-height: 30px;
  padding: 0 6px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #66d5ff, #147cc4);
  box-shadow: 0 3px 0 rgba(5, 64, 100, 0.52);
  font-size: 0.66rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.45);
}

.quest-strip button:disabled {
  opacity: 1;
  filter: none;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, #7898aa, #425f70);
}

.tutorial-coach {
  position: absolute;
  top: max(143px, calc(env(safe-area-inset-top) + 143px));
  left: 64px;
  right: 62px;
  z-index: 17;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 38px;
  padding: 5px 7px;
  border: 2px solid rgba(255, 246, 178, 0.8);
  border-radius: 8px;
  color: #55330d;
  background: linear-gradient(180deg, rgba(255, 244, 178, 0.96), rgba(238, 177, 74, 0.94));
  box-shadow: 0 4px 0 rgba(116, 70, 23, 0.34), 0 0 18px rgba(255, 230, 98, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
}

.tutorial-coach.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tutorial-coach span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, #6ad6ff, #1379bc);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 rgba(0, 55, 84, 0.35);
}

.tutorial-coach span::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff36e, #ff9f2a);
  clip-path: polygon(50% 0, 100% 42%, 72% 42%, 72% 100%, 28% 100%, 28% 42%, 0 42%);
}

.tutorial-coach strong,
.tutorial-coach small {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tutorial-coach strong {
  font-size: 0.72rem;
  font-weight: 900;
}

.tutorial-coach small {
  font-size: 0.57rem;
  font-weight: 900;
}

.title-icon {
  position: relative;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: linear-gradient(180deg, #5cc5ff, #1474b6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), 0 2px 0 rgba(0, 53, 82, 0.45);
}

.title-icon::before,
.title-icon::after {
  content: "";
  position: absolute;
}

.title-icon.star::before {
  inset: 6px;
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 56%, 81% 94%, 50% 70%, 19% 94%, 31% 56%, 0 35%, 38% 35%);
  background: linear-gradient(180deg, #fff77a, #ffaf29);
}

.title-icon.crew::before {
  left: 8px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffd0a4;
}

.title-icon.crew::after {
  left: 6px;
  bottom: 5px;
  width: 17px;
  height: 10px;
  border-radius: 10px 10px 4px 4px;
  background: #ffd84c;
}

.title-icon.profile {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%),
    url("/assets/ui-profile-badge.png") center / 150% auto no-repeat,
    linear-gradient(180deg, #60d8ff, #1378bd);
  animation: title-profile-pulse 1.9s ease-in-out infinite;
}

.title-icon.profile::before {
  inset: 3px;
  border: 2px solid rgba(255, 238, 96, 0.82);
  border-radius: 8px;
  box-shadow: 0 0 11px rgba(84, 223, 255, 0.55);
}

.title-icon.cog::before {
  inset: 7px;
  border: 4px solid #dff6ff;
  border-radius: 50%;
}

.mine-screen {
  position: absolute;
  top: max(91px, calc(env(safe-area-inset-top) + 91px));
  left: 0;
  right: 0;
  bottom: calc(158px + env(safe-area-inset-bottom));
  z-index: 5;
  overflow: hidden;
  overflow-x: hidden;
  padding-bottom: 8px;
  pointer-events: none;
}

.shaft-list {
  display: none;
}

.motion-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  pointer-events: auto;
}

.motion-layer::-webkit-scrollbar {
  display: none;
}

.motion-world {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  background:
    var(--mine-world-image, url("/assets/pro-mine-world-coal-20-meta-v26.png?v=meta-v26-clean-ore-wall")) 46% top / auto var(--mine-world-height, 285.586vh) no-repeat,
    linear-gradient(
      180deg,
      var(--mine-sky, #4ec2fb) 0 var(--sky-end, 20vh),
      #51d471 var(--sky-end, 20vh) var(--grass-end, 27vh),
      var(--mine-ground, #7f392e) var(--grass-end, 27vh) var(--scene-height, 100vh),
      var(--mine-cave, #4b2d31) var(--scene-height, 100vh) 100%
    );
}


.surface-world {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: var(--scene-height, 100vh);
  pointer-events: none;
}

.elevator-world,
.motion-floors {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.elevator-world {
  z-index: 7;
}

.motion-floors {
  z-index: 5;
}

.elevator-positioner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  width: 100%;
  height: 0;
  pointer-events: none;
  transform: translate3d(0, var(--lift-y, 23.6vh), 0);
  transition: transform 160ms linear;
  will-change: transform;
}

.surface-3d-canvas {
  position: absolute;
  left: 0;
  top: 15.3%;
  z-index: 18;
  display: block;
  width: 100%;
  height: 23.6%;
  pointer-events: none;
  opacity: 0;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 10px 9px rgba(0, 0, 0, 0.2));
  animation: real3d-surface-enter 360ms ease-out 120ms both;
}

.phone-shell.real3d-surface-active .surface-worker,
.phone-shell.real3d-surface-active .surface-loader-ramp,
.phone-shell.real3d-surface-active .surface-transfer-cart,
.phone-shell.real3d-surface-active .surface-loader-vehicle,
.phone-shell.real3d-surface-active .surface-truck-load-fx,
.phone-shell.real3d-surface-active .sprite-truck {
  display: none !important;
}

.phone-shell.real3d-surface-active .surface-warehouse-dock {
  opacity: 0.24;
}

.camera-rail {
  position: absolute;
  left: 5px;
  top: 39%;
  z-index: 20;
  display: grid;
  gap: 6px;
  justify-items: center;
  width: 38px;
  padding: 5px 4px;
  border: 2px solid rgba(205, 238, 255, 0.42);
  border-radius: 9px;
  color: #eafbff;
  background: linear-gradient(180deg, rgba(37, 72, 91, 0.88), rgba(13, 31, 44, 0.9));
  box-shadow: 0 5px 0 rgba(0, 14, 25, 0.45), 0 0 16px rgba(70, 208, 255, 0.16);
  pointer-events: auto;
}

.camera-rail button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #68d6ff, #147ab9);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32), 0 3px 0 rgba(0, 47, 75, 0.48);
  font-size: 0.78rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 48, 76, 0.44);
}

.camera-rail button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 1px 0 rgba(0, 47, 75, 0.48);
}

.camera-rail strong {
  width: 100%;
  padding: 3px 0;
  border-radius: 7px;
  background: rgba(6, 22, 35, 0.52);
  font-size: 0.62rem;
  line-height: 1;
  text-align: center;
}

.motion-layer::before {
  content: "";
  display: none;
  position: absolute;
  inset: 96px 0 150px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 37%, rgba(255, 255, 255, 0.18) 40%, transparent 44% 100%),
    linear-gradient(112deg, transparent 0 62%, rgba(98, 223, 255, 0.13) 65%, transparent 69% 100%);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: mine-shine 5.5s ease-in-out infinite;
}

.fx-mine-pickaxe-hit {
  --fx-image: url("/assets/fx-mine-pickaxe-hit.png");
}

.fx-mine-ore-pile {
  --fx-image: url("/assets/fx-mine-ore-pile.png");
}

.fx-mine-ore-stream {
  --fx-image: url("/assets/fx-mine-ore-stream.png");
}

.fx-mine-elevator-cargo {
  --fx-image: url("/assets/fx-mine-elevator-cargo.png");
}

.fx-mine-depot-sell {
  --fx-image: url("/assets/fx-mine-depot-sell.png");
}

.fx-mine-level-up {
  --fx-image: url("/assets/fx-mine-level-up.png");
  --manager-fx-image: url("/assets/fx-mine-level-up.png");
}

.fx-live12-unlock-burst {
  --fx-image: url("/assets/fx-live12-unlock-burst.png?v=live12-unlock");
}

.fx-manager-skill-mining {
  --manager-fx-image: url("/assets/fx-manager-skill-mining.png");
  --shop-premium-image: url("/assets/fx-manager-skill-mining.png");
  --shop-reveal-image: url("/assets/fx-manager-skill-mining.png");
}

.fx-manager-skill-elevator {
  --manager-fx-image: url("/assets/fx-manager-skill-elevator.png");
  --shop-premium-image: url("/assets/fx-manager-skill-elevator.png");
  --shop-reveal-image: url("/assets/fx-manager-skill-elevator.png");
}

.fx-manager-skill-depot {
  --manager-fx-image: url("/assets/fx-manager-skill-depot.png");
  --shop-premium-image: url("/assets/fx-manager-skill-depot.png");
  --shop-reveal-image: url("/assets/fx-manager-skill-depot.png");
}

.fx-manager-assign-puff {
  --manager-fx-image: url("/assets/fx-manager-assign-puff.png");
  --shop-premium-image: url("/assets/fx-manager-assign-puff.png");
  --shop-reveal-image: url("/assets/fx-manager-assign-puff.png");
}

.fx-manager-shop-purchase {
  --manager-fx-image: url("/assets/fx-manager-shop-purchase.png");
  --shop-premium-image: url("/assets/fx-manager-shop-purchase.png");
  --shop-reveal-image: url("/assets/fx-manager-shop-purchase.png");
}

.fx-manager-server-token {
  --manager-fx-image: url("/assets/fx-manager-server-token.png");
  --shop-premium-image: url("/assets/fx-manager-server-token.png");
  --shop-reveal-image: url("/assets/fx-manager-server-token.png");
}

.live28-skill-mining {
  --live28-skill-image: url("/assets/motion-live28-manager-skill-drone-mining.png?v=live28-skill");
}

.live28-skill-elevator {
  --live28-skill-image: url("/assets/motion-live28-manager-skill-drone-elevator.png?v=live28-skill");
}

.live28-skill-depot {
  --live28-skill-image: url("/assets/motion-live28-manager-skill-drone-depot.png?v=live28-skill");
}

.live28-skill-burst {
  --live28-skill-image: url("/assets/motion-live28-manager-skill-drone-burst.png?v=live28-skill");
  --action-image: url("/assets/motion-live28-manager-skill-drone-burst.png?v=live28-skill");
  --manager-fx-image: url("/assets/motion-live28-manager-skill-drone-burst.png?v=live28-skill");
}

.motion-floor {
  position: absolute;
  left: 9%;
  right: 4%;
  top: var(--floor-y);
  height: var(--floor-height, 11vh);
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 100% var(--floor-height, 11vh);
  pointer-events: none;
}

.motion-floor:not(.in-view),
.motion-floor:not(.in-view) *,
.motion-layer.motion-paused .motion-world * {
  animation-play-state: paused !important;
}

.motion-layer.scrolling .motion-world * {
  animation: none !important;
  transition: none !important;
}

.floor-tap {
  position: absolute;
  inset: -10px 0;
  z-index: 10;
  background: transparent;
  pointer-events: auto;
  touch-action: pan-y;
}

.motion-floor.selected::before {
  content: "";
  position: absolute;
  inset: -3px 4px 6px 50px;
  z-index: 16;
  border: 3px solid rgba(255, 245, 89, 0.92);
  border-radius: 10px;
  box-shadow: 0 0 22px rgba(255, 224, 63, 0.58);
  pointer-events: none;
  animation: selected-glow 1.2s ease-in-out infinite;
}

.motion-floor.state-full .stock-badge {
  border-color: rgba(255, 238, 96, 0.95);
  box-shadow: 0 3px 0 rgba(0, 28, 43, 0.42), 0 0 18px rgba(255, 226, 75, 0.75);
}

.motion-floor.state-idle .sprite-miner {
  animation-duration: 1.7s, 860ms;
  filter: grayscale(0.08) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.28));
}

.motion-floor.state-walk_to_rock .sprite-cart,
.motion-floor.state-idle .sprite-cart {
  background-image: url("/assets/motion-live26-shaft-cart-empty.png?v=live26-cart");
  animation:
    live26-cart-idle 1.45s ease-in-out infinite,
    live26-cart-empty-frame 1.45s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.motion-floor.state-mining .sprite-cart,
.motion-floor.state-pickup .sprite-cart {
  background-image: url("/assets/motion-live26-shaft-cart-loading.png?v=live26-cart");
  animation:
    live26-cart-load 1.08s ease-in-out infinite,
    live26-cart-loading-frame 1.08s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.motion-floor.state-carry .sprite-cart,
.motion-floor.state-drop .sprite-cart,
.motion-floor.state-full .sprite-cart {
  background-image: url("/assets/motion-live26-shaft-cart-full.png?v=live26-cart");
  animation:
    live26-cart-roll 1.24s ease-in-out infinite,
    live26-cart-full-frame 1.24s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.motion-floor.state-mining .shaft-sparks,
.motion-floor.state-mining .shaft-dust,
.motion-floor.state-pickup .shaft-dust,
.motion-floor.state-loading .shaft-sparks {
  opacity: 1;
}

.motion-floor.state-mining .pickaxe-hit-fx,
.motion-floor.state-loading .pickaxe-hit-fx {
  opacity: 1;
  animation: fx-pickaxe-hit 760ms ease-out infinite;
  animation-delay: var(--delay);
}

.motion-floor.state-mining .floor-ore-pile,
.motion-floor.state-full .floor-ore-pile,
.motion-floor.state-loading .floor-ore-pile {
  opacity: 0.78;
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--ore), #fff 26%))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.24));
}

.motion-floor.manager-skill-income .floor-manager-skill-fx {
  opacity: 0.56;
  animation: manager-skill-floor-aura 1.45s ease-in-out infinite;
  animation-delay: var(--delay);
}

.motion-floor.manager-skill-income .shaft-skill-drone {
  opacity: 0.96;
  animation:
    live28-skill-hover 1.12s ease-in-out infinite,
    live28-skill-mining-work 1.12s ease-in-out infinite;
  animation-delay: var(--delay), var(--delay);
}

.motion-floor.manager-skill-income .shaft-skill-drone::before,
.motion-floor.manager-skill-income .shaft-skill-drone::after {
  opacity: 1;
}

.motion-floor.manager-skill-income .sprite-miner,
.motion-floor.manager-skill-income .sprite-drill {
  filter:
    drop-shadow(0 0 12px rgba(255, 224, 78, 0.72))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.motion-floor.state-carry .sprite-miner.carrier,
.motion-floor.state-drop .sprite-miner.loader {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ore), #fff 30%)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
}

.motion-floor.state-loading .sprite-cart {
  left: 15%;
  bottom: 0;
  width: 122px;
  height: 69px;
  background-image: url("/assets/motion-live26-shaft-cart-dump.png?v=live26-cart");
  animation:
    live26-cart-dump 1.08s ease-in-out infinite,
    live26-cart-dump-frame 1.08s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
  filter: drop-shadow(0 0 13px color-mix(in srgb, var(--ore), #fff 35%)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.motion-floor.tier-steel .sprite-miner,
.motion-floor.tier-gold .sprite-miner {
  filter: drop-shadow(0 0 11px rgba(80, 220, 255, 0.58)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.motion-floor.tier-crystal .sprite-miner {
  width: 69px;
  height: 85px;
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--ore), #fff 36%)) drop-shadow(0 8px 7px rgba(0, 0, 0, 0.34));
}

.shaft-structure {
  position: absolute;
  left: 9%;
  right: 2%;
  bottom: -18%;
  z-index: 3;
  display: block;
  height: 138%;
  pointer-events: none;
  background-image: url("/assets/motion-live14-shaft-structure-bronze.png?v=live14-structure");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.74;
  transform-origin: 50% 84%;
  filter:
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 8px rgba(255, 190, 71, 0.12));
  animation: shaft-structure-idle 3.2s ease-in-out infinite;
  animation-delay: var(--delay);
}

.motion-floor.tier-basic .shaft-structure,
.motion-floor.tier-bronze .shaft-structure {
  background-image: url("/assets/motion-live14-shaft-structure-bronze.png?v=live14-structure");
}

.motion-floor.tier-steel .shaft-structure {
  background-image: url("/assets/motion-live14-shaft-structure-steel.png?v=live14-structure");
  opacity: 0.82;
  filter:
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 10px rgba(84, 215, 255, 0.16));
}

.motion-floor.tier-gold .shaft-structure {
  background-image: url("/assets/motion-live14-shaft-structure-gold.png?v=live14-structure");
  opacity: 0.86;
  filter:
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 12px rgba(255, 217, 82, 0.2));
}

.motion-floor.tier-crystal .shaft-structure {
  background-image: url("/assets/motion-live14-shaft-structure-crystal.png?v=live14-structure");
  opacity: 0.9;
  filter:
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.27))
    drop-shadow(0 0 16px color-mix(in srgb, var(--ore), #fff 28%));
}

.motion-floor.state-mining .shaft-structure,
.motion-floor.state-loading .shaft-structure {
  opacity: 0.92;
  animation-duration: 2.25s;
}

.motion-floor.selected .shaft-structure {
  filter:
    drop-shadow(0 0 10px rgba(255, 238, 99, 0.28))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.26));
}


.shaft-structure-lamp,
.shaft-structure-energy,
.shaft-structure-track,
.shaft-structure-track i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.shaft-structure-lamp {
  left: 7%;
  right: 8%;
  top: 21%;
  z-index: 2;
  height: 55%;
  border-radius: 40%;
  background:
    radial-gradient(circle at 18% 44%, rgba(255, 229, 111, 0.58) 0 4%, rgba(255, 170, 51, 0.2) 13%, transparent 30%),
    radial-gradient(circle at 84% 42%, rgba(255, 229, 111, 0.54) 0 4%, rgba(255, 170, 51, 0.18) 13%, transparent 29%),
    radial-gradient(ellipse at 50% 86%, rgba(255, 208, 92, 0.18), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.56;
  animation: shaft-structure-lamp 1.45s ease-in-out infinite;
  animation-delay: var(--delay);
}

.shaft-structure-energy {
  right: 10%;
  top: 22%;
  z-index: 3;
  width: 20%;
  height: 54%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 52%, color-mix(in srgb, var(--ore), #fff 26%) 0 8%, rgba(89, 230, 255, 0.26) 18%, transparent 56%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.8);
  animation: shaft-structure-energy 2.05s ease-in-out infinite;
  animation-delay: calc(var(--delay) + 0.18s);
}

.motion-floor.tier-gold .shaft-structure-energy,
.motion-floor.tier-crystal .shaft-structure-energy,
.motion-floor.state-loading .shaft-structure-energy {
  opacity: 0.62;
}

.shaft-structure-track {
  left: 18%;
  right: 18%;
  bottom: 14%;
  z-index: 4;
  height: 18%;
  overflow: hidden;
}

.shaft-structure-track i {
  left: -28%;
  bottom: 34%;
  width: 30%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 150, 0.82), rgba(94, 228, 255, 0.38), transparent);
  opacity: 0;
  transform: skewX(-18deg);
  animation: shaft-track-glint 2.25s linear infinite;
  animation-delay: var(--delay);
}

.shaft-structure-track i:nth-child(2) {
  bottom: 53%;
  animation-delay: calc(var(--delay) + 0.62s);
}

.shaft-structure-track i:nth-child(3) {
  bottom: 23%;
  animation-delay: calc(var(--delay) + 1.18s);
}

.tier-prop,
.tier-burst,
.tier-chip {
  position: absolute;
  pointer-events: none;
}

.tier-prop {
  right: 9%;
  bottom: 7%;
  z-index: 7;
  width: 44px;
  height: 44px;
  background: var(--live3-image) center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 4px 0 rgba(0, 23, 38, 0.24)) drop-shadow(0 0 12px rgba(255, 224, 74, 0.62));
}

.tier-burst {
  right: 9%;
  bottom: 8%;
  z-index: 6;
  width: 54px;
  height: 48px;
  background: var(--live3-image) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.72);
  filter: drop-shadow(0 0 14px rgba(255, 224, 74, 0.72));
}

.tier-chip {
  right: 10%;
  bottom: 3%;
  z-index: 13;
  min-width: 42px;
  padding: 2px 5px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, rgba(28, 110, 145, 0.9), rgba(13, 62, 88, 0.92));
  box-shadow: 0 3px 0 rgba(0, 27, 42, 0.38);
  font-size: 0.44rem;
  font-weight: 1000;
  text-align: center;
  opacity: 0;
  text-shadow: 0 2px 0 rgba(0, 44, 66, 0.42);
}

.motion-floor.tier-bronze .tier-prop,
.motion-floor.tier-steel .tier-prop,
.motion-floor.tier-gold .tier-prop,
.motion-floor.tier-crystal .tier-prop,
.motion-floor.tier-bronze .tier-chip,
.motion-floor.tier-steel .tier-chip,
.motion-floor.tier-gold .tier-chip,
.motion-floor.tier-crystal .tier-chip {
  opacity: 0.96;
}

.motion-floor.tier-gold .tier-burst,
.motion-floor.tier-crystal .tier-burst {
  opacity: 0.88;
  animation: milestone-burst-pulse 980ms ease-in-out infinite;
}

.motion-floor.tier-crystal .level-pop {
  border-color: rgba(255, 244, 113, 0.98);
  background: linear-gradient(180deg, #82eeff, #328ee5 52%, #7b5cff);
  box-shadow: 0 4px 0 #164f89, 0 0 21px color-mix(in srgb, var(--ore), #fff 36%);
}

.phone-shell.boost-income .ore-pulse {
  animation-duration: 720ms;
  opacity: 0.95;
}

.phone-shell.boost-income .shaft-sparks,
.phone-shell.boost-elevator .elevator-load-sparks,
.phone-shell.boost-warehouse .surface-ore-burst {
  opacity: 1;
}

.phone-shell.boost-elevator .sprite-elevator {
  filter: drop-shadow(0 0 16px rgba(84, 214, 255, 0.82)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.phone-shell.boost-warehouse .surface-haul-track,
.phone-shell.boost-warehouse .surface-depot-badge {
  box-shadow: 0 0 18px rgba(255, 221, 74, 0.62), 0 4px 0 rgba(0, 33, 52, 0.42);
}

.surface-worker.manager-skill-warehouse,
.surface-transfer-cart.manager-skill-warehouse,
.surface-loader-ramp.manager-skill-warehouse,
.sprite-truck.manager-skill-warehouse {
  filter:
    drop-shadow(0 0 15px rgba(122, 255, 89, 0.8))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
}

.motion-floor.state-loading .shaft-loader,
.motion-floor.state-loading .load-stream {
  opacity: 1;
}

.motion-floor.state-loading .shaft-loading-arm {
  opacity: 0;
}

.depth-marker {
  position: absolute;
  left: -31px;
  top: 25%;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 32px;
  height: 38px;
  border: 2px solid rgba(213, 239, 255, 0.45);
  border-radius: 8px;
  color: #eaf8ff;
  background: linear-gradient(180deg, #587184, #263947 52%, #16242e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.23), 0 4px 0 rgba(0, 15, 25, 0.48), 0 0 12px rgba(66, 199, 255, 0.14);
  font-size: 0.88rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.motion-floor.selected .depth-marker {
  border-color: rgba(160, 255, 125, 0.75);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26), 0 4px 0 rgba(0, 15, 25, 0.48), 0 0 18px rgba(112, 255, 105, 0.55);
}

.motion-floor.selected .depth-marker::after {
  content: "";
  position: absolute;
  right: -12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7cff4d;
  box-shadow: 0 0 14px rgba(124, 255, 77, 0.82);
}

.income-badge {
  position: absolute;
  left: 16%;
  top: 10%;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  background: rgba(9, 56, 78, 0.72);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 0.73rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 38, 62, 0.5);
}

.income-badge::before {
  content: "$";
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #94570f;
  background: radial-gradient(circle at 35% 28%, #fff8a5, #ffd640 58%, #ff9828);
  text-shadow: none;
}

.stock-badge {
  position: absolute;
  left: 21%;
  top: 5%;
  z-index: 12;
  min-width: 48px;
  padding: 2px 5px;
  border: 2px solid rgba(190, 242, 255, 0.58);
  border-radius: 7px;
  color: #effcff;
  background: linear-gradient(180deg, rgba(26, 92, 116, 0.9), rgba(15, 54, 75, 0.88));
  box-shadow: 0 3px 0 rgba(0, 28, 43, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  opacity: 0.92;
  text-shadow: 0 2px 0 rgba(0, 29, 44, 0.48);
}

.stock-badge small,
.stock-badge strong {
  display: block;
  line-height: 1;
}

.stock-badge small {
  color: #baf3ff;
  font-size: 0.38rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stock-badge strong {
  margin-top: 1px;
  font-size: 0.58rem;
  font-weight: 900;
}

.stock-badge i {
  display: block;
  height: 2px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(5, 25, 38, 0.6);
}

.stock-badge b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ore), #fff679);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ore), transparent 20%);
}

.level-pop {
  position: absolute;
  right: 3%;
  top: 3%;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 54px;
  min-height: 56px;
  padding: 5px 3px;
  border: 3px solid #eafbff;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(180deg, #5fcaff, #177bc3);
  box-shadow: 0 4px 0 #0b527e, 0 0 17px rgba(84, 206, 255, 0.5);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.48);
  animation: level-pop 1.6s ease-in-out infinite;
  animation-delay: var(--delay);
}

.motion-floor.selected .level-pop {
  transform-origin: 50% 60%;
  animation-name: level-pop-selected;
}

.level-pop::before {
  content: "";
  width: 22px;
  height: 18px;
  margin-bottom: -1px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffba2, #ffad27);
  clip-path: polygon(50% 0, 100% 42%, 75% 42%, 75% 100%, 25% 100%, 25% 42%, 0 42%);
}

.level-pop small,
.level-pop strong {
  display: block;
  line-height: 1;
}

.level-pop small {
  font-size: 0.62rem;
  font-weight: 900;
}

.level-pop strong {
  font-size: 0.84rem;
}

.unlock-label {
  position: absolute;
  left: 38%;
  top: 3%;
  z-index: 14;
  display: grid;
  min-width: 116px;
  padding: 5px 9px 6px;
  border: 2px solid rgba(255, 239, 136, 0.82);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(36, 119, 152, 0.95), rgba(14, 56, 74, 0.96)),
    radial-gradient(circle at 18% 20%, rgba(255, 231, 86, 0.45), transparent 48%);
  box-shadow: 0 4px 0 rgba(3, 31, 44, 0.46), 0 0 16px rgba(255, 196, 54, 0.38);
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  animation: unlock-label-pulse 1.45s ease-in-out infinite;
}

.unlock-label small,
.unlock-label strong {
  display: block;
}

.unlock-label small {
  color: #ffe777;
  font-size: 0.47rem;
  text-transform: uppercase;
}

.unlock-label strong {
  margin-top: 2px;
  max-width: 118px;
  overflow: hidden;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-floor.locked {
  filter: saturate(0.9);
}

.motion-floor.locked::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 7%;
  bottom: 7%;
  z-index: 2;
  height: 70%;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(9, 19, 25, 0.48), rgba(13, 47, 56, 0.16) 42%, rgba(8, 14, 22, 0.38)),
    radial-gradient(circle at 72% 42%, color-mix(in srgb, var(--ore), #40d8ff 38%) 0 7%, transparent 35%);
  opacity: 0.62;
  pointer-events: none;
}

.locked-shaft-gate {
  left: 28%;
  bottom: -42%;
  z-index: 7;
  width: min(58%, 218px);
  min-width: 166px;
  height: 140%;
  background-image: url("/assets/motion-live27-locked-gate-closed.png?v=live27-gate");
  opacity: 0.98;
  transform-origin: 50% 82%;
  filter:
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 10px color-mix(in srgb, var(--ore), #fff 18%));
  animation:
    live27-gate-breathe 2.4s ease-in-out infinite,
    live27-gate-locked-frames 3.4s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.locked-gate-glow,
.locked-gate-scan,
.locked-gate-dust,
.locked-shaft-beacon,
.unlock-light-sweep {
  position: absolute;
  display: block;
  pointer-events: none;
}

.locked-gate-glow {
  left: 38%;
  top: 22%;
  z-index: 2;
  width: 24%;
  height: 35%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 232, 91, 0.8) 0 18%, rgba(255, 146, 37, 0.4) 42%, transparent 72%),
    radial-gradient(circle at 20% 30%, rgba(84, 224, 255, 0.46), transparent 58%);
  mix-blend-mode: screen;
  animation: locked-gate-lamp 1.15s ease-in-out infinite;
}

.locked-gate-scan {
  left: 34%;
  top: 24%;
  z-index: 3;
  width: 34%;
  height: 54%;
  border-radius: 40%;
  background: linear-gradient(90deg, transparent, rgba(109, 239, 255, 0.58), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-38%) skewX(-9deg);
  animation: locked-gate-scan 2.2s ease-in-out infinite;
}

.locked-gate-dust {
  left: 13%;
  right: 10%;
  bottom: 9%;
  z-index: 4;
  height: 24%;
}

.locked-gate-dust i {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 35% 12% 42% 18%;
  background: linear-gradient(180deg, #ffe384, #b87c33 55%, #71461f);
  filter: drop-shadow(0 0 5px rgba(255, 220, 95, 0.58));
  opacity: 0;
  transform: rotate(44deg);
  animation: locked-dust-rise 2s ease-in-out infinite;
}

.locked-gate-dust i:nth-child(1) {
  left: 14%;
  animation-delay: calc(var(--delay) + 0.1s);
}

.locked-gate-dust i:nth-child(2) {
  left: 42%;
  width: 6px;
  height: 6px;
  animation-delay: calc(var(--delay) + 0.45s);
}

.locked-gate-dust i:nth-child(3) {
  left: 66%;
  width: 10px;
  height: 10px;
  animation-delay: calc(var(--delay) + 0.72s);
}

.locked-gate-dust i:nth-child(4) {
  left: 82%;
  width: 5px;
  height: 5px;
  animation-delay: calc(var(--delay) + 1s);
}

.locked-shaft-beacon {
  right: 16%;
  bottom: 19%;
  z-index: 9;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 242, 156, 0.68);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%, #fff4a5 0 10%, #ffbc2e 18% 34%, rgba(255, 122, 30, 0.36) 48%, transparent 72%);
  box-shadow: 0 0 18px rgba(255, 190, 51, 0.62);
  animation: locked-gate-lamp 1.15s ease-in-out infinite;
  animation-delay: calc(var(--delay) + 0.35s);
}

.locked-shaft-beacon i {
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(255, 219, 82, 0.28);
  border-radius: 50%;
  animation: action-ring 1.4s ease-out infinite;
}

.unlock-reveal-fx {
  left: 18%;
  bottom: -30%;
  z-index: 18;
  width: 72%;
  height: 165%;
  background-image: var(--fx-image);
  opacity: 0;
  transform-origin: 50% 86%;
  filter:
    drop-shadow(0 0 20px rgba(255, 222, 74, 0.88))
    drop-shadow(0 0 15px color-mix(in srgb, var(--ore), #55e8ff 40%));
  animation: unlock-reveal-pop 1.65s ease-out forwards;
}

.unlock-gate-stage {
  position: absolute;
  left: 25%;
  bottom: -34%;
  z-index: 6;
  display: block;
  width: min(62%, 232px);
  min-width: 176px;
  height: 158%;
  pointer-events: none;
  background: url("/assets/motion-live27-locked-gate-opening.png?v=live27-gate") center / contain no-repeat;
  opacity: 0.92;
  transform-origin: 50% 86%;
  filter:
    drop-shadow(0 0 17px color-mix(in srgb, var(--ore), #fff 30%))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
  animation:
    live27-unlock-gate-pop 3.4s ease-out both,
    live27-unlock-gate-frames 3.4s steps(1, end) both;
}

.unlock-light-sweep {
  left: 9%;
  right: 4%;
  bottom: 5%;
  z-index: 17;
  height: 92%;
  border-radius: 11px;
  background:
    linear-gradient(98deg, transparent 0 18%, rgba(255, 247, 151, 0.82) 35%, rgba(90, 231, 255, 0.48) 46%, transparent 66% 100%),
    radial-gradient(circle at 36% 70%, rgba(255, 215, 69, 0.52), transparent 45%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: unlock-light-sweep 1.2s ease-out forwards;
}

.motion-floor.just-unlocked .sprite-miner {
  animation-duration: 720ms, 720ms;
  filter:
    drop-shadow(0 0 13px rgba(255, 231, 95, 0.82))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.collect-chip {
  position: absolute;
  left: auto;
  right: 21%;
  top: 6%;
  z-index: 13;
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 27px;
  padding: 2px 5px;
  border: 2px solid rgba(255, 249, 185, 0.95);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #59d0ff, #1278bf);
  box-shadow: 0 3px 0 rgba(5, 66, 101, 0.48), 0 0 13px rgba(255, 230, 85, 0.38);
  opacity: 0.94;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.42);
  animation: collect-ready 1.15s ease-in-out infinite;
}

.collect-chip::before {
  content: "";
  position: absolute;
  top: -8px;
  width: 13px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fffba1, #ffab27);
  clip-path: polygon(50% 0, 100% 44%, 75% 44%, 75% 100%, 25% 100%, 25% 44%, 0 44%);
  filter: drop-shadow(0 2px 0 rgba(122, 79, 14, 0.38));
}

.collect-chip small,
.collect-chip strong {
  display: block;
  line-height: 1;
}

.collect-chip small {
  font-size: 0.38rem;
  font-weight: 900;
  text-transform: uppercase;
}

.collect-chip strong {
  max-width: 45px;
  overflow: hidden;
  font-size: 0.56rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collect-chip.cooling {
  border-color: rgba(203, 231, 245, 0.62);
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #718d9d, #354d5a);
  box-shadow: 0 4px 0 rgba(12, 35, 48, 0.5);
  animation: none;
}

.collect-chip.cooling::before {
  opacity: 0.45;
}

.motion-floor.ready .floor-tap {
  cursor: pointer;
}

.reward-float {
  position: absolute;
  left: 43%;
  top: 8%;
  z-index: 30;
  padding: 4px 9px;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #ffd84a, #ff912b);
  box-shadow: 0 4px 0 rgba(137, 72, 9, 0.45), 0 0 18px rgba(255, 211, 61, 0.78);
  font-size: 0.88rem;
  font-weight: 900;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(105, 58, 8, 0.45);
  animation: reward-rise 1.05s ease-out forwards;
}

.reward-float.cash-sale {
  left: auto;
  right: 11%;
  top: 26.8%;
  min-width: 58px;
  padding: 3px 8px 3px 25px;
  text-align: center;
  background: linear-gradient(180deg, #61ec7c, #11a84a);
  box-shadow: 0 4px 0 rgba(5, 92, 39, 0.45), 0 0 18px rgba(97, 236, 124, 0.78);
  font-size: 0.64rem;
  white-space: nowrap;
}

.reward-float.ore-reward {
  padding-left: 31px;
}

.reward-float.ore-reward::before,
.reward-float.cash-sale::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -10px;
  width: 38px;
  height: 36px;
  background: var(--fx-image) center / contain no-repeat;
  filter: drop-shadow(0 0 9px rgba(255, 242, 120, 0.72));
  animation: fx-reward-icon-pop 640ms ease-out infinite alternate;
}

.reward-float.ore-reward::before {
  --fx-image: url("/assets/fx-mine-ore-pile.png");
}

.reward-float.cash-sale::before {
  left: 3px;
  top: 4px;
  width: 17px;
  height: 17px;
  border: 2px solid #b36a14;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff8a6, #ffd640 58%, #ff9828);
  filter: drop-shadow(0 0 7px rgba(255, 242, 120, 0.62));
}

.sprite-miner,
.sprite-cart,
.sprite-elevator,
.surface-worker,
.surface-unload-hopper,
.surface-loader-ramp,
.surface-transfer-cart,
.surface-warehouse-dock,
.surface-loader-vehicle,
.sprite-truck,
.sprite-manager-foreman,
.sprite-drill,
.locked-shaft-gate,
.unlock-reveal-fx {
  position: absolute;
  z-index: 9;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.sprite-elevator[role="button"],
.surface-worker[role="button"] {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sprite-elevator[role="button"]:focus-visible,
.surface-worker[role="button"]:focus-visible,
.sprite-elevator.manual-ready,
.surface-worker.manual-ready {
  outline: 3px solid rgba(255, 237, 84, 0.92);
  outline-offset: -5px;
  border-radius: 18px;
}

.sprite-elevator.manual-ready {
  filter: drop-shadow(0 0 16px rgba(255, 234, 82, 0.8)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.surface-worker.manual-ready {
  filter: drop-shadow(0 0 16px rgba(255, 234, 82, 0.86)) drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
}

.surface-manager-slot {
  position: absolute;
  z-index: 28;
  display: block;
  width: 54px;
  height: 62px;
  pointer-events: auto;
}

.elevator-manager-slot {
  left: 2.3%;
  top: 18.7%;
}

.warehouse-manager-slot {
  right: 1.7%;
  top: 19.8%;
}

.surface-manager-button {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 3px;
  border: 2px solid rgba(219, 248, 255, 0.82);
  border-radius: 9px;
  color: #effcff;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 238, 134, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(43, 133, 166, 0.96), rgba(13, 54, 78, 0.98));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    0 4px 0 rgba(0, 31, 48, 0.52),
    0 0 14px rgba(78, 217, 255, 0.26);
  font: inherit;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 39, 58, 0.56);
  cursor: pointer;
}

.surface-manager-button:disabled {
  cursor: default;
  filter: saturate(0.86);
  opacity: 0.86;
}

.surface-manager-button:focus-visible,
.surface-manager-button:not(:disabled):hover,
.surface-manager-button.ability-ready {
  outline: 3px solid rgba(255, 237, 84, 0.92);
  outline-offset: 1px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    0 4px 0 rgba(0, 31, 48, 0.52),
    0 0 20px rgba(255, 230, 72, 0.58);
}

.surface-manager-frame {
  position: absolute;
  inset: 4px 5px 16px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(180deg, rgba(15, 95, 138, 0.48), rgba(5, 27, 43, 0.72));
  box-shadow: inset 0 0 0 2px rgba(8, 32, 46, 0.28);
}

.surface-manager-plus {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 5px;
  border-radius: 50%;
  color: #173a45;
  background: radial-gradient(circle at 35% 30%, #fffbd0, #ffdd4b 62%, #f29a22);
  box-shadow: 0 2px 0 rgba(120, 66, 12, 0.46), 0 0 12px rgba(255, 226, 76, 0.72);
  font-size: 1.32rem;
  font-weight: 1000;
  line-height: 1;
}

.surface-manager-avatar.portrait.asset-portrait {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 45px;
  margin-top: 1px;
  border-radius: 8px;
  background-size: 158% auto;
  background-position: 50% 9%;
  animation: manager-portrait-breathe 1.65s ease-in-out infinite;
}

.surface-manager-copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: 100%;
  min-width: 0;
  line-height: 1;
}

.surface-manager-copy b,
.surface-manager-copy em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-manager-copy b {
  font-size: 0.48rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.surface-manager-copy em {
  margin-top: 1px;
  color: #ffe972;
  font-size: 0.45rem;
  font-style: normal;
  font-weight: 900;
}

.surface-manager-name {
  position: absolute;
  left: 50%;
  bottom: -22px;
  z-index: 8;
  max-width: 92px;
  padding: 3px 5px;
  border-radius: 6px;
  color: #eafbff;
  background: rgba(6, 28, 43, 0.86);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.24);
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1.05;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.surface-manager-button:hover .surface-manager-name,
.surface-manager-button:focus-visible .surface-manager-name {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sprite-miner {
  left: var(--x);
  bottom: 10%;
  width: 62px;
  height: 78px;
  background-image: url("/assets/motion-live9-worker-walk-1.png");
  transform-origin: 50% 92%;
  animation:
    miner-pro 980ms ease-in-out infinite,
    live9-worker-walk-frames 900ms steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.sprite-miner .action-pick,
.sprite-miner .action-cargo,
.sprite-miner .action-hit,
.shaft-loader .action-pick,
.shaft-loader .action-cargo {
  position: absolute;
  display: none;
  pointer-events: none;
}

.sprite-miner .action-pick,
.shaft-loader .action-pick {
  left: 10px;
  top: 28px;
  z-index: 4;
  width: 5px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5a30, #4d2d18);
  box-shadow: 0 1px 0 rgba(255, 230, 157, 0.48);
  transform-origin: 50% 88%;
}

.sprite-miner .action-pick::before,
.shaft-loader .action-pick::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -3px;
  width: 25px;
  height: 7px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #e9f6ff, #7f9cab 58%, #455966);
  box-shadow: 0 2px 0 rgba(16, 41, 54, 0.45);
}

.sprite-miner .action-cargo,
.shaft-loader .action-cargo {
  right: 4px;
  top: 43px;
  z-index: 5;
  width: 23px;
  height: 18px;
  border: 2px solid rgba(255, 247, 166, 0.72);
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 45%, #fff8a6 0 3px, transparent 4px),
    radial-gradient(circle at 62% 30%, var(--ore) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 70%, #5ee9ff 0 3px, transparent 4px),
    linear-gradient(180deg, #ffc24c, #9f5c20);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ore), #fff 30%), 0 3px 0 rgba(62, 32, 14, 0.38);
}

.sprite-miner .action-hit {
  right: -7px;
  top: 30px;
  z-index: 2;
  width: 34px;
  height: 28px;
  background:
    radial-gradient(circle at 9px 10px, #fff7a8 0 3px, transparent 4px),
    radial-gradient(circle at 20px 17px, var(--ore) 0 4px, transparent 5px),
    radial-gradient(circle at 29px 8px, #ff9f28 0 3px, transparent 4px);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ore), #fff 24%));
}

.sprite-miner.digging {
  bottom: 5%;
  z-index: 11;
  width: 118px;
  height: 89px;
  background-image: url("/assets/motion-live22-miner-dig-windup.png?v=live22-miners");
  transform-origin: 38% 92%;
  animation:
    live22-miner-dig-body 1.34s ease-in-out infinite,
    live22-miner-dig-frames 1.34s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.sprite-miner.digging .action-pick {
  display: none;
  animation: pickaxe-swing 1180ms cubic-bezier(0.38, 0.02, 0.22, 1) infinite;
  animation-delay: var(--delay);
}

.sprite-miner.digging .action-hit {
  display: none;
}

.sprite-miner.carrier {
  bottom: 7%;
  z-index: 12;
  width: 82px;
  height: 86px;
  background-image: url("/assets/motion-live22-miner-carry-walk-1.png?v=live22-miners");
  transform-origin: 50% 92%;
  animation:
    live22-miner-carry-path 4.25s cubic-bezier(0.38, 0.02, 0.22, 1) infinite,
    live22-miner-carry-frames 4.25s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.sprite-miner.carrier .action-cargo {
  display: none;
}

.sprite-miner.loader {
  bottom: 7%;
  z-index: 10;
  width: 72px;
  height: 82px;
  background-image: url("/assets/motion-live22-miner-carry-walk-1.png?v=live22-miners");
  opacity: 0.86;
  animation:
    live22-miner-helper-path 3.35s ease-in-out infinite,
    live22-miner-helper-frames 3.35s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.sprite-miner.loader .action-cargo {
  display: none;
}

.sprite-miner.loader .action-pick {
  display: none;
  animation: shovel-tilt 1.45s ease-in-out infinite;
}

.sprite-miner.lead {
  filter: drop-shadow(0 0 12px rgba(255, 225, 61, 0.68)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
}

.sprite-miner.digging.lead {
  width: 123px;
  height: 92px;
}

.sprite-miner.carrier.lead,
.sprite-miner.loader.lead {
  width: 86px;
  height: 90px;
  filter: drop-shadow(0 0 12px rgba(255, 225, 61, 0.68)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
}

.sprite-manager-foreman {
  left: 40.5%;
  bottom: 11%;
  z-index: 10;
  width: 54px;
  height: 78px;
  background-image: url("/assets/motion-live11-manager-foreman-1.png?v=live11-manager");
  opacity: 0.96;
  transform-origin: 50% 94%;
  filter:
    drop-shadow(0 0 10px rgba(94, 224, 255, 0.34))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
  animation:
    manager-foreman-command 2.4s ease-in-out infinite,
    live11-manager-foreman-frames 2.4s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
}

.motion-floor.state-loading .sprite-manager-foreman {
  left: 30%;
}

.motion-floor.manager-skill-income .sprite-manager-foreman {
  filter:
    drop-shadow(0 0 15px rgba(255, 233, 92, 0.84))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.34));
  animation-duration: 1.55s, 1.55s;
}

.manager-command-wave {
  position: absolute;
  right: -9px;
  top: 20px;
  width: 32px;
  height: 28px;
  border: 2px solid rgba(100, 230, 255, 0.68);
  border-left: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(81, 221, 255, 0.75));
  animation: manager-command-wave 1.2s ease-out infinite;
  animation-delay: var(--delay);
}

.manager-command-wave::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 4px;
  width: 22px;
  height: 18px;
  border: 2px solid rgba(255, 232, 83, 0.62);
  border-left: 0;
  border-radius: 50%;
}

.sprite-cart {
  left: 20%;
  bottom: 2%;
  z-index: 7;
  width: 108px;
  height: 61px;
  background-image: url("/assets/motion-live26-shaft-cart-empty.png?v=live26-cart");
  transform-origin: 50% 100%;
  animation:
    live26-cart-idle 1.45s ease-in-out infinite,
    live26-cart-empty-frame 1.45s steps(1, end) infinite;
  animation-delay: var(--delay), var(--delay);
  filter:
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 7px color-mix(in srgb, var(--ore), #fff 18%));
}

.sprite-drill {
  right: 12%;
  bottom: 11%;
  width: 98px;
  height: 60px;
  z-index: 8;
  background-image: url("/assets/sprite-drill.png");
  opacity: 0.96;
  transform-origin: 50% 80%;
  animation: drill-rumble 460ms ease-in-out infinite;
  animation-delay: var(--delay);
}

.motion-floor.tier-bronze .sprite-drill,
.motion-floor.tier-steel .sprite-drill,
.motion-floor.tier-gold .sprite-drill,
.motion-floor.tier-crystal .sprite-drill {
  right: 16%;
  bottom: 1%;
  z-index: 6;
  width: 146px;
  height: 78px;
  background-image: url("/assets/motion-live11-shaft-rig.png?v=live11-rig");
  opacity: 0.88;
  transform-origin: 47% 78%;
  filter:
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 10px color-mix(in srgb, var(--ore), #fff 20%));
  animation:
    shaft-rig-idle 1.45s ease-in-out infinite,
    shaft-rig-light 940ms ease-in-out infinite;
  animation-delay: var(--delay), var(--delay);
}

.motion-floor.state-mining .sprite-drill,
.motion-floor.state-loading .sprite-drill {
  opacity: 1;
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--ore), #fff 34%))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
  animation-duration: 520ms, 520ms;
}

.motion-floor.tier-steel .sprite-drill,
.motion-floor.tier-gold .sprite-drill,
.motion-floor.tier-crystal .sprite-drill {
  right: 14.5%;
  width: 154px;
  height: 82px;
}

.motion-floor.tier-gold .sprite-drill,
.motion-floor.tier-crystal .sprite-drill {
  right: 13.5%;
  bottom: -1%;
  width: 164px;
  height: 88px;
}

.motion-floor.tier-crystal .sprite-drill {
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--ore), #fff 42%))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.34));
}

.sprite-drill::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 20px;
  width: 28px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 227, 75, 0.86) 0 28%, rgba(255, 116, 32, 0.42) 44%, transparent 70%);
  mix-blend-mode: screen;
  animation: drill-glow 620ms ease-in-out infinite;
}

.motion-floor.tier-bronze .sprite-drill::before,
.motion-floor.tier-steel .sprite-drill::before,
.motion-floor.tier-gold .sprite-drill::before,
.motion-floor.tier-crystal .sprite-drill::before {
  right: -8px;
  top: 32%;
  width: 40px;
  height: 28px;
  background:
    radial-gradient(circle at 72% 52%, rgba(255, 248, 159, 0.95) 0 11%, rgba(255, 175, 47, 0.62) 32%, transparent 68%),
    radial-gradient(circle at 32% 50%, color-mix(in srgb, var(--ore), #fff 22%) 0 18%, transparent 64%);
  animation: shaft-rig-bit-glow 480ms ease-in-out infinite;
}

.sprite-drill::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 22px;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 222, 75, 0.88);
  border-left-color: rgba(255, 118, 37, 0.12);
  border-radius: 50%;
  animation: drill-spin 420ms linear infinite;
}

.motion-floor.tier-bronze .sprite-drill::after,
.motion-floor.tier-steel .sprite-drill::after,
.motion-floor.tier-gold .sprite-drill::after,
.motion-floor.tier-crystal .sprite-drill::after {
  right: 0;
  top: 35%;
  width: 24px;
  height: 24px;
  border-width: 4px;
  box-shadow: 0 0 14px rgba(255, 180, 48, 0.72);
  animation: drill-spin 260ms linear infinite;
}

.sprite-drill.loading {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ore), #fff 26%)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
}

.shaft-dust,
.shaft-sparks {
  position: absolute;
  right: 12%;
  bottom: 39%;
  z-index: 13;
  pointer-events: none;
}

.shaft-dust {
  width: 62px;
  height: 34px;
  opacity: 0.74;
  background:
    radial-gradient(circle at 8px 25px, rgba(182, 136, 94, 0.75) 0 5px, transparent 7px),
    radial-gradient(circle at 28px 14px, rgba(214, 170, 121, 0.56) 0 7px, transparent 10px),
    radial-gradient(circle at 50px 23px, rgba(122, 91, 72, 0.56) 0 6px, transparent 9px);
  filter: blur(0.4px);
  animation: shaft-dust 1.05s ease-out infinite;
  animation-delay: var(--delay);
}

.shaft-sparks {
  width: 78px;
  height: 34px;
  background:
    radial-gradient(circle at 9px 11px, #fff6a7 0 2px, transparent 3px),
    radial-gradient(circle at 25px 21px, #ffb329 0 2px, transparent 3px),
    radial-gradient(circle at 45px 8px, #fff6a7 0 2px, transparent 3px),
    radial-gradient(circle at 66px 17px, #ff7c28 0 2px, transparent 3px);
  filter: drop-shadow(0 0 7px rgba(255, 190, 55, 0.85));
  animation: shaft-sparks 620ms linear infinite;
  animation-delay: var(--delay);
}

.floor-ore-pile {
  position: absolute;
  left: 39%;
  bottom: 8%;
  z-index: 6;
  width: 72px;
  height: 52px;
  pointer-events: none;
  background: var(--fx-image) center / contain no-repeat;
  opacity: 0.58;
  transform: translateX(-50%) scale(var(--pile, 0.6));
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--ore), #fff 14%))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.22));
  animation: fx-ore-pile-breathe 1.35s ease-in-out infinite;
  animation-delay: var(--delay);
}

.floor-manager-skill-fx {
  position: absolute;
  right: 3%;
  bottom: 0;
  z-index: 7;
  width: 112px;
  height: 86px;
  pointer-events: none;
  background: var(--manager-fx-image) center / contain no-repeat;
  opacity: 0;
  transform: translateY(4px) scale(0.72);
  transform-origin: 50% 88%;
  filter:
    drop-shadow(0 0 18px rgba(255, 229, 79, 0.54))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.23));
  mix-blend-mode: screen;
}

.live28-skill-drone {
  --live28-x: 0px;
  --live28-y: 5px;
  --live28-scale: 0.6;
  --live28-scale-hi: 0.64;
  position: absolute;
  display: block;
  pointer-events: none;
  background: var(--live28-skill-image) center / contain no-repeat;
  opacity: 0;
  transform-origin: 50% 88%;
  transform: translate(var(--live28-x), var(--live28-y)) scale(var(--live28-scale));
  filter:
    drop-shadow(0 0 13px rgba(92, 222, 255, 0.58))
    drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
}

.live28-skill-drone::before,
.live28-skill-drone::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.live28-skill-drone::before {
  left: 28%;
  right: 27%;
  bottom: 1%;
  height: 34%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 232, 82, 0.78) 0 13%, rgba(74, 224, 255, 0.34) 38%, transparent 68%),
    linear-gradient(180deg, rgba(91, 228, 255, 0.24), transparent);
  mix-blend-mode: screen;
  transform: translateY(9px) scaleX(0.88);
  animation: live28-skill-thruster 660ms ease-in-out infinite;
}

.live28-skill-drone::after {
  left: 14%;
  right: 13%;
  bottom: -5%;
  height: 26%;
  border: 2px solid rgba(104, 228, 255, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 86, 0.18), transparent 64%);
  mix-blend-mode: screen;
  transform: rotate(-4deg) scale(0.72);
  animation: live28-skill-ring 1.05s ease-in-out infinite;
}

.shaft-skill-drone {
  --live28-x: -50%;
  --live28-y: 5px;
  --live28-scale: 0.64;
  --live28-scale-hi: 0.68;
  left: 47%;
  bottom: 8%;
  z-index: 13;
  width: 96px;
  height: 88px;
}

.shaft-depth-props {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
}

.shaft-prop {
  position: absolute;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.prop-support {
  --prop-flip: 1;
  left: 18%;
  bottom: -8%;
  z-index: 3;
  width: 154px;
  height: 112px;
  background-image: url("/assets/motion-live19-shaft-props-support.png?v=live19-shaft-props");
  opacity: 0.34;
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 9px rgba(255, 183, 72, 0.14));
  animation: live19-support-breathe 2.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.prop-lamps {
  left: 47%;
  top: 1.5%;
  z-index: 8;
  width: 92px;
  height: 50px;
  background-image: url("/assets/motion-live19-shaft-props-lamps.png?v=live19-shaft-props");
  opacity: 0.76;
  filter:
    drop-shadow(0 0 11px rgba(255, 192, 74, 0.42))
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2));
  animation: live19-lamp-sway 2.35s ease-in-out infinite;
  animation-delay: calc(var(--delay) * 0.5);
}

.prop-lamps i,
.prop-lamps b,
.prop-crystals i,
.prop-crystals b,
.prop-pipes i {
  position: absolute;
  content: "";
  pointer-events: none;
}

.prop-lamps i {
  left: 11px;
  right: 10px;
  top: 16px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 206, 78, 0.62), rgba(255, 174, 55, 0.24) 44%, transparent 72%);
  mix-blend-mode: screen;
  animation: live19-lamp-glow 1.1s ease-in-out infinite;
}

.prop-lamps b {
  left: 38px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 236, 137, 0.72);
  filter: blur(2px);
  animation: live19-lamp-flicker 620ms steps(2, end) infinite;
}

.prop-pipes {
  --pipe-flip: 1;
  left: 5.8%;
  bottom: 2.8%;
  z-index: 4;
  width: 102px;
  height: 78px;
  background-image: url("/assets/motion-live19-shaft-props-pipes.png?v=live19-shaft-props");
  opacity: 0.36;
  transform-origin: 42% 86%;
  filter:
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 8px rgba(77, 211, 255, 0.13));
  animation: live19-pipes-hum 2s ease-in-out infinite;
  animation-delay: var(--delay);
}

.prop-pipes i {
  left: 50px;
  top: 25px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 111, 48, 0.88), rgba(255, 210, 77, 0.85), rgba(81, 221, 255, 0.74), rgba(255, 111, 48, 0.88));
  opacity: 0.6;
  filter: drop-shadow(0 0 8px rgba(255, 210, 76, 0.48));
  animation: live19-pipe-gauge 1.5s linear infinite;
}

.prop-crystals {
  right: 5%;
  bottom: -4%;
  z-index: 5;
  width: 88px;
  height: 64px;
  background-image: url("/assets/motion-live19-shaft-props-crystals.png?v=live19-shaft-props");
  opacity: 0.72;
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--ore), #fff 16%))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.24));
  animation: live19-crystal-breathe 1.55s ease-in-out infinite;
  animation-delay: var(--delay);
}

.prop-crystals i {
  left: 22px;
  top: 15px;
  width: 42px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ore), #fff 30%), transparent 68%);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: live19-crystal-glow 1.2s ease-in-out infinite;
}

.prop-crystals b {
  left: 12px;
  right: 12px;
  top: 12px;
  height: 14px;
  background:
    radial-gradient(circle at 18% 52%, #fff7a6 0 2px, transparent 3px),
    radial-gradient(circle at 48% 28%, var(--ore) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 54%, #ffdf4b 0 2px, transparent 3px);
  opacity: 0.82;
  filter: drop-shadow(0 0 7px rgba(255, 225, 75, 0.58));
  animation: live19-crystal-spark 840ms ease-in-out infinite;
}

.live19-props.props-b .prop-support {
  --prop-flip: -1;
  left: 11%;
  width: 132px;
  height: 100px;
  opacity: 0.3;
}

.live19-props.props-b .prop-lamps {
  left: 35%;
  top: 0.5%;
}

.live19-props.props-b .prop-pipes {
  --pipe-flip: -1;
  left: auto;
  right: 10%;
  bottom: 0.6%;
  width: 86px;
  height: 66px;
  opacity: 0.28;
}

.live19-props.props-b .prop-crystals {
  right: 18%;
  width: 74px;
  height: 54px;
  opacity: 0.64;
}

.live19-props.props-c .prop-support {
  left: 33%;
  bottom: -11%;
  width: 124px;
  height: 92px;
  opacity: 0.24;
}

.live19-props.props-c .prop-lamps {
  left: 56%;
  width: 74px;
  height: 42px;
}

.live19-props.props-c .prop-pipes {
  left: 3%;
  width: 80px;
  height: 62px;
  opacity: 0.25;
}

.live19-props.props-c .prop-crystals {
  right: 2%;
  bottom: -7%;
  width: 104px;
  height: 72px;
}

.live19-props.depth-1 .prop-lamps,
.live19-props.depth-3 .prop-lamps {
  animation-duration: 2.75s;
}

.live19-props.depth-2 .prop-pipes {
  opacity: 0.46;
}

.live19-props.loading .prop-lamps,
.motion-floor.selected .prop-lamps {
  opacity: 0.9;
  filter:
    drop-shadow(0 0 15px rgba(255, 202, 83, 0.58))
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2));
}

.motion-floor.selected .prop-crystals,
.motion-floor.loading .prop-crystals {
  opacity: 0.88;
  animation-duration: 1.05s;
}

.motion-floor.tier-gold .prop-crystals,
.motion-floor.tier-crystal .prop-crystals {
  opacity: 0.92;
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--ore), #fff 28%))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.25));
}

.pickaxe-hit-fx {
  position: absolute;
  right: 6%;
  bottom: 29%;
  z-index: 14;
  width: 70px;
  height: 60px;
  pointer-events: none;
  background: var(--fx-image) center / contain no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 13px rgba(255, 234, 94, 0.92));
  transform-origin: 46% 70%;
}

.automation-badge {
  position: absolute;
  left: 47%;
  top: 5%;
  z-index: 12;
  padding: 3px 7px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #48d8ff, #1179c2);
  box-shadow: 0 3px 0 rgba(5, 58, 92, 0.5), 0 0 12px rgba(63, 209, 255, 0.45);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 49, 85, 0.45);
  animation: auto-pulse 1.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.surface-haul-track {
  position: absolute;
  left: 9%;
  right: 12%;
  top: 36.2%;
  z-index: 7;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(86, 51, 23, 0.16), rgba(255, 231, 112, 0.65) 14%, rgba(75, 49, 30, 0.44) 48%, rgba(255, 231, 112, 0.58) 82%, rgba(86, 51, 23, 0.14)),
    linear-gradient(180deg, rgba(255, 245, 149, 0.26), rgba(43, 34, 28, 0.34));
  box-shadow: 0 2px 0 rgba(60, 32, 19, 0.24), 0 0 10px rgba(255, 216, 66, 0.16);
  opacity: 0.74;
}

.surface-haul-track i {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  animation: surface-rail-light 1.7s linear infinite;
}

.surface-warehouse-dock {
  left: 37.6%;
  top: 19.1%;
  z-index: 6;
  width: 178px;
  height: 178px;
  background-image: url("/assets/motion-live18-surface-depot-dock.png?v=live18-surface");
  background-size: contain;
  opacity: 0.9;
  transform-origin: 50% 88%;
  filter:
    drop-shadow(0 9px 8px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 10px rgba(82, 214, 255, 0.18));
  animation: live18-dock-idle 2.2s ease-in-out infinite;
}

.surface-warehouse-dock.active {
  opacity: 0.98;
}

.surface-warehouse-dock.receiving,
.surface-warehouse-dock.selling {
  filter:
    drop-shadow(0 0 15px rgba(255, 223, 72, 0.42))
    drop-shadow(0 9px 8px rgba(0, 0, 0, 0.25));
}

.surface-warehouse-dock.tier-gold,
.surface-warehouse-dock.tier-crystal {
  width: 190px;
  height: 190px;
  left: 35.8%;
  top: 18.4%;
  filter:
    drop-shadow(0 0 15px rgba(255, 226, 72, 0.46))
    drop-shadow(0 9px 8px rgba(0, 0, 0, 0.25));
}

.warehouse-dock-glow,
.warehouse-dock-belt,
.warehouse-dock-lamp {
  position: absolute;
  display: block;
  pointer-events: none;
}

.warehouse-dock-glow {
  left: 14%;
  top: 42%;
  width: 44%;
  height: 30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 62%, rgba(255, 217, 72, 0.52), transparent 62%),
    radial-gradient(circle at 74% 30%, rgba(70, 220, 255, 0.38), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: warehouse-dock-glow 1.6s ease-in-out infinite;
}

.warehouse-dock-belt {
  left: 14%;
  top: 63%;
  width: 45%;
  height: 18%;
  transform: rotate(-16deg);
  opacity: 0.2;
}

.warehouse-dock-belt i {
  position: absolute;
  top: 28%;
  width: 10px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff0a6, #ffb632);
  filter: drop-shadow(0 0 7px rgba(255, 221, 85, 0.68));
  animation: warehouse-belt-crate 1.25s linear infinite;
}

.warehouse-dock-belt i:nth-child(1) {
  animation-delay: 0s;
}

.warehouse-dock-belt i:nth-child(2) {
  animation-delay: 0.4s;
}

.warehouse-dock-belt i:nth-child(3) {
  animation-delay: 0.82s;
}

.surface-warehouse-dock.active .warehouse-dock-belt {
  opacity: 0.9;
}

.warehouse-dock-lamp {
  left: 6%;
  top: 31%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 158, 0.96) 0 30%, rgba(255, 169, 39, 0.52) 52%, transparent 74%);
  mix-blend-mode: screen;
  animation: warehouse-lamp-pulse 1.2s ease-in-out infinite;
}

.surface-haul-cargo {
  --haul-x: min(47vw, 190px);
  position: absolute;
  left: 20%;
  top: 30.4%;
  z-index: 13;
  display: none;
  width: 38px;
  height: 24px;
  border: 2px solid rgba(255, 247, 166, 0.7);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffc24c, #8e5526);
  box-shadow: 0 4px 0 rgba(67, 35, 16, 0.32), 0 0 13px rgba(255, 213, 69, 0.4);
  opacity: 0;
  pointer-events: none;
}

.surface-haul-cargo.active {
  opacity: 1;
  animation: surface-cargo-haul 3.35s cubic-bezier(0.32, 0.02, 0.18, 1) infinite;
}

.surface-haul-cargo.receiving {
  animation-name: surface-cargo-receive;
  animation-duration: 1.05s;
}

.surface-haul-cargo i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 5px 5px 4px 4px;
  background: var(--mine-crystal, #68d8ff);
  box-shadow: 0 0 9px color-mix(in srgb, var(--mine-crystal, #68d8ff), #fff 30%);
  transform: rotate(45deg);
  animation: cargo-gem-pulse 780ms ease-in-out infinite;
}

.surface-haul-cargo i:nth-child(1) {
  left: 9px;
  top: 13px;
}

.surface-haul-cargo i:nth-child(2) {
  left: 22px;
  top: 6px;
  animation-delay: 0.14s;
}

.surface-haul-cargo i:nth-child(3) {
  left: 35px;
  top: 14px;
  animation-delay: 0.28s;
}

.surface-haul-cargo i:nth-child(4) {
  left: 44px;
  top: 7px;
  background: #ffdc4a;
  animation-delay: 0.39s;
}

.surface-worker {
  display: none;
  --haul-x: min(21vw, 82px);
  --haul-mid-x: min(14vw, 58px);
  left: 3.2%;
  top: 28.35%;
  width: 124px;
  height: 86px;
  z-index: 16;
  background-image: url("/assets/motion-live25-surface-hauler-push-1.png?v=live25-hauler");
  transform-origin: 50% 92%;
  animation:
    live25-hauler-idle 1.3s ease-in-out infinite,
    live25-hauler-idle-frames 1.15s steps(1, end) infinite;
  filter:
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 8px rgba(255, 220, 72, 0.22));
}

.surface-worker::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 45px;
  z-index: 5;
  width: 21px;
  height: 17px;
  border: 2px solid rgba(255, 247, 166, 0.72);
  border-radius: 6px;
  background:
    radial-gradient(circle at 24% 42%, #fff8a6 0 3px, transparent 4px),
    radial-gradient(circle at 62% 28%, var(--mine-crystal, #68d8ff) 0 5px, transparent 6px),
    linear-gradient(180deg, #ffc24c, #9f5c20);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mine-crystal, #68d8ff), #fff 30%), 0 3px 0 rgba(62, 32, 14, 0.36);
  opacity: 0;
}

.surface-worker.active {
  display: block;
  animation:
    live25-hauler-haul 4.8s cubic-bezier(0.32, 0.02, 0.18, 1) infinite,
    live25-hauler-haul-frames 4.8s steps(1, end) infinite;
}

.surface-worker.active::after {
  opacity: 0;
  animation: none;
}

.surface-worker.receiving {
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 224, 69, 0.82)) drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
  animation:
    live25-hauler-receive 1.35s ease-in-out infinite,
    live25-hauler-receive-frames 1.35s steps(1, end) infinite;
}

.surface-worker.tier-gold,
.surface-worker.tier-crystal {
  filter: drop-shadow(0 0 13px rgba(255, 226, 72, 0.68)) drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
}

.surface-unload-hopper {
  left: 1.2%;
  top: 25.15%;
  z-index: 10;
  width: 108px;
  height: 112px;
  background-image: url("/assets/motion-live10-surface-unload-hopper.png?v=live11-clean");
  background-size: contain;
  opacity: 0.78;
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 7px 6px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 8px rgba(84, 214, 255, 0.2));
  animation: surface-hopper-idle 1.8s ease-in-out infinite;
}

.surface-unload-hopper.active {
  opacity: 0.9;
}

.surface-unload-hopper.receiving {
  opacity: 1;
  filter:
    drop-shadow(0 0 12px rgba(255, 224, 69, 0.46))
    drop-shadow(0 7px 6px rgba(0, 0, 0, 0.24));
  animation: surface-hopper-work 1.05s ease-in-out infinite;
}

.surface-loader-ramp {
  left: 31.4%;
  top: 25.75%;
  z-index: 11;
  display: none;
  width: 172px;
  height: 110px;
  background-image: url("/assets/motion-live25-depot-loader-ramp.png?v=live25-hauler");
  background-size: contain;
  opacity: 0;
  transform-origin: 47% 88%;
  filter:
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 8px rgba(255, 220, 72, 0.18));
}

.surface-loader-ramp.active {
  display: block;
  opacity: 0.95;
  animation: live25-loader-ramp-work 1.25s ease-in-out infinite;
}

.surface-loader-ramp.receiving {
  opacity: 0.86;
}

.surface-loader-ramp.selling {
  animation-duration: 980ms;
}

.surface-loader-ramp::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 41px;
  width: 96px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 60%, #fff6a6 0 3px, transparent 4px),
    radial-gradient(circle at 37% 38%, var(--mine-crystal, #57dfff) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 62%, #ffcf43 0 4px, transparent 5px),
    radial-gradient(circle at 82% 34%, #ee67ff 0 4px, transparent 5px);
  opacity: 0;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mine-crystal, #57dfff), #fff 24%));
  transform: rotate(-26deg);
  animation: live25-loader-ramp-ore 1.04s linear infinite;
}

.surface-loader-ramp.active::before {
  opacity: 0.74;
}

.surface-transfer-cart {
  --surface-haul-x: min(27vw, 112px);
  left: 14%;
  top: 29.55%;
  z-index: 13;
  width: 88px;
  height: 88px;
  background-image: url("/assets/motion-live18-surface-depot-handcart.png?v=live18-surface");
  background-size: contain;
  opacity: 0.9;
  transform-origin: 42% 92%;
  filter:
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 8px rgba(255, 221, 77, 0.16));
}

.surface-transfer-cart.active {
  opacity: 1;
  animation: live18-handcart-run 5.8s cubic-bezier(0.3, 0.02, 0.18, 1) infinite;
}

.surface-transfer-cart.receiving {
  filter:
    drop-shadow(0 0 11px rgba(255, 224, 69, 0.42))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.24));
}

.surface-transfer-cart.selling {
  animation-duration: 5.25s;
}

.surface-transfer-cart.active,
.surface-transfer-cart.receiving,
.surface-transfer-cart.selling {
  display: none;
}

.surface-transfer-cart::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  width: 28px;
  height: 21px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 58%, #fff6a6 0 4px, transparent 5px),
    radial-gradient(circle at 48% 22%, var(--mine-crystal, #56ddff) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 56%, #ffde4c 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mine-crystal, #56ddff), #fff 22%));
  animation: live18-handcart-gems 720ms ease-in-out infinite;
}

.surface-loader-vehicle {
  left: 33%;
  top: 27.7%;
  z-index: 17;
  display: none;
  width: 116px;
  height: 86px;
  background-image: url("/assets/motion-live13-loader-vehicle-1.png?v=live13-loader");
  opacity: 0;
  transform-origin: 48% 90%;
  filter:
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 9px rgba(255, 217, 72, 0.24));
}

.surface-loader-vehicle.active {
  display: none;
  opacity: 0;
  animation: none;
}

.surface-loader-vehicle.receiving {
  filter:
    drop-shadow(0 0 14px rgba(255, 224, 69, 0.52))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
}

.surface-loader-vehicle.selling {
  animation-duration: 5.25s, 5.25s;
}

.surface-loader-vehicle.tier-steel,
.surface-loader-vehicle.tier-gold,
.surface-loader-vehicle.tier-crystal {
  left: 32.2%;
  top: 27.3%;
  width: 124px;
  height: 92px;
}

.loader-ore-fall {
  position: absolute;
  right: -1px;
  top: 31%;
  display: block;
  width: 38px;
  height: 54px;
  opacity: 0;
  pointer-events: none;
  animation: loader-ore-fall 5.8s ease-in-out infinite;
}

.surface-loader-vehicle.selling .loader-ore-fall {
  animation-duration: 5.25s;
}

.loader-ore-fall i {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 38% 12% 34% 18%;
  background: linear-gradient(180deg, #fff3a4, #ffb632 56%, #a35c22);
  filter: drop-shadow(0 0 7px rgba(255, 218, 72, 0.72));
  transform: rotate(45deg);
  animation: loader-ore-piece 520ms ease-in infinite;
}

.loader-ore-fall i:nth-child(1) {
  left: 5px;
  animation-delay: 0ms;
}

.loader-ore-fall i:nth-child(2) {
  left: 16px;
  background: linear-gradient(180deg, #baf7ff, #30c7ff 56%, #1c678e);
  animation-delay: 110ms;
}

.loader-ore-fall i:nth-child(3) {
  left: 25px;
  width: 7px;
  height: 7px;
  animation-delay: 230ms;
}

.loader-ore-fall i:nth-child(4) {
  left: 11px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: linear-gradient(180deg, #d9fbff, #57ddff 56%, #277798);
  animation-delay: 340ms;
}

.surface-truck-load-fx {
  position: absolute;
  left: 53.5%;
  top: 19.7%;
  z-index: 15;
  display: none;
  width: 98px;
  height: 112px;
  pointer-events: none;
  background: url("/assets/motion-live18-surface-depot-chute.png?v=live18-surface") center / contain no-repeat;
  opacity: 0;
  transform-origin: 34% 82%;
  filter:
    drop-shadow(0 0 12px rgba(255, 224, 82, 0.72))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.18));
}

.surface-truck-load-fx.show {
  display: none;
  animation: none;
}

.surface-truck-load-fx.selling {
  animation-duration: 5.25s;
}

.surface-transfer-cart.tier-steel,
.surface-transfer-cart.tier-gold,
.surface-transfer-cart.tier-crystal {
  width: 96px;
  height: 96px;
  top: 29.1%;
}

.sprite-truck {
  left: 51%;
  top: 24.4%;
  width: 178px;
  height: 124px;
  z-index: 8;
  background-image: url("/assets/motion-live24-depot-truck-idle.png?v=live24-truck");
  background-size: contain;
  opacity: 0.96;
  transform: scale(1);
  transform-origin: 50% 91%;
  animation:
    live24-truck-idle 1.5s ease-in-out infinite,
    live24-truck-idle-frame 1.5s steps(1, end) infinite;
}

.sprite-truck.active {
  opacity: 1;
  animation:
    live24-truck-full-idle 1.35s ease-in-out infinite,
    live24-truck-full-frame 1.35s steps(1, end) infinite;
}

.sprite-truck.receiving {
  background-image: url("/assets/motion-live24-depot-truck-loading.png?v=live24-truck");
  animation:
    live24-truck-loading-work 1.18s ease-in-out infinite,
    live24-truck-loading-frame 1.18s steps(1, end) infinite;
}

.sprite-truck.loaded {
  background-image: url("/assets/motion-live24-depot-truck-full.png?v=live24-truck");
  animation:
    live24-truck-full-idle 1.35s ease-in-out infinite,
    live24-truck-full-frame 1.35s steps(1, end) infinite;
}

.sprite-truck.selling {
  background-image: url("/assets/motion-live24-depot-truck-drive.png?v=live24-truck");
  animation:
    live24-truck-sell-cycle 5.2s cubic-bezier(0.28, 0.02, 0.2, 1) infinite,
    live24-truck-drive-frame 520ms steps(1, end) infinite;
  filter: drop-shadow(0 0 14px rgba(255, 222, 71, 0.72)) drop-shadow(0 8px 7px rgba(0, 0, 0, 0.28));
}

.sprite-truck.tier-steel,
.sprite-truck.tier-gold,
.sprite-truck.tier-crystal {
  left: 50.2%;
  top: 24.05%;
  width: 188px;
  height: 130px;
  filter: drop-shadow(0 0 13px rgba(83, 221, 255, 0.52)) drop-shadow(0 8px 7px rgba(0, 0, 0, 0.28));
}

.sprite-truck.tier-gold,
.sprite-truck.tier-crystal {
  animation-duration: 5.2s;
}

.sprite-truck::before,
.sprite-truck::after,
.surface-truck-load-fx i,
.surface-truck-load-fx b {
  position: absolute;
  content: "";
  pointer-events: none;
}

.sprite-truck::before {
  left: 87px;
  top: 39px;
  width: 58px;
  height: 36px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 64%, #fff5a6 0 4px, transparent 5px),
    radial-gradient(circle at 48% 26%, var(--mine-crystal, #55ddff) 0 6px, transparent 7px),
    radial-gradient(circle at 74% 56%, #ffdd4a 0 5px, transparent 6px),
    radial-gradient(circle at 91% 32%, #f56cff 0 4px, transparent 5px);
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(255, 225, 75, 0.72));
  display: none;
  animation: none;
}

.sprite-truck.active::before,
.sprite-truck.selling::before {
  opacity: 0;
}

.sprite-truck::after {
  left: 35px;
  right: 23px;
  bottom: 15px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 52%, rgba(255, 225, 75, 0.28), transparent 18px),
    radial-gradient(circle at 80% 48%, rgba(83, 221, 255, 0.18), transparent 20px);
  opacity: 0.45;
  filter: blur(1px);
  animation: live18-truck-shadow 1.4s ease-in-out infinite;
}

.surface-truck-load-fx i {
  left: 38px;
  top: 46px;
  width: 10px;
  height: 10px;
  border-radius: 34% 12% 34% 18%;
  background: linear-gradient(180deg, #fff3a4, #ffb632 56%, #a35c22);
  filter: drop-shadow(0 0 8px rgba(255, 218, 72, 0.82));
  transform: rotate(45deg);
  animation: live18-chute-gem 760ms ease-in infinite;
}

.surface-truck-load-fx i:nth-child(2) {
  left: 50px;
  width: 8px;
  height: 8px;
  background: linear-gradient(180deg, #c9fbff, #36c9ff 58%, #1f719f);
  animation-delay: 120ms;
}

.surface-truck-load-fx i:nth-child(3) {
  left: 59px;
  top: 52px;
  width: 9px;
  height: 9px;
  background: linear-gradient(180deg, #ffc2f4, #f05dcb 58%, #943081);
  animation-delay: 220ms;
}

.surface-truck-load-fx i:nth-child(4) {
  left: 45px;
  top: 56px;
  width: 7px;
  height: 7px;
  background: linear-gradient(180deg, #b8ffbf, #52ef78 58%, #279849);
  animation-delay: 320ms;
}

.surface-truck-load-fx i:nth-child(5) {
  left: 54px;
  top: 42px;
  width: 7px;
  height: 7px;
  animation-delay: 420ms;
}

.surface-truck-load-fx i:nth-child(6) {
  left: 64px;
  top: 47px;
  width: 6px;
  height: 6px;
  background: linear-gradient(180deg, #c9fbff, #36c9ff 58%, #1f719f);
  animation-delay: 520ms;
}

.surface-truck-load-fx b {
  left: 28px;
  top: 30px;
  width: 82px;
  height: 72px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 55% 64%, rgba(255, 227, 91, 0.56), transparent 62%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: live18-chute-glow 5.8s ease-in-out infinite;
}

.surface-depot-badge.tier-gold,
.surface-depot-badge.tier-crystal {
  border-color: rgba(255, 234, 91, 0.82);
  box-shadow: 0 4px 0 rgba(0, 33, 52, 0.42), 0 0 18px rgba(255, 226, 74, 0.68);
}

.truck-dust {
  position: absolute;
  left: 8px;
  bottom: 13px;
  width: 54px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 7px 11px, rgba(215, 177, 119, 0.5) 0 5px, transparent 7px),
    radial-gradient(circle at 23px 7px, rgba(175, 129, 87, 0.44) 0 6px, transparent 8px);
  filter: blur(1px);
  opacity: 0;
  animation: truck-dust 620ms ease-out infinite;
}

.sprite-truck.selling .truck-dust {
  opacity: 0.85;
}

.surface-worker-shadow {
  position: absolute;
  left: 16%;
  right: 11%;
  bottom: 2%;
  z-index: -1;
  height: 14px;
  border-radius: 50%;
  background: rgba(32, 30, 18, 0.24);
  filter: blur(2px);
}

.surface-depot-badge {
  position: absolute;
  right: 10%;
  top: 20.5%;
  z-index: 12;
  min-width: 76px;
  padding: 4px 7px;
  border: 2px solid rgba(210, 246, 255, 0.72);
  border-radius: 9px;
  color: #effcff;
  background: linear-gradient(180deg, rgba(43, 133, 166, 0.94), rgba(14, 62, 84, 0.92));
  box-shadow: 0 4px 0 rgba(0, 33, 52, 0.45), 0 0 17px rgba(82, 216, 255, 0.34);
  text-align: left;
  text-shadow: 0 2px 0 rgba(0, 41, 64, 0.5);
}

.surface-depot-badge::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff8a5, #ffd640 58%, #ff9828);
  vertical-align: -2px;
}

.surface-depot-badge small,
.surface-depot-badge strong {
  display: inline-block;
  max-width: 48px;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-depot-badge small {
  display: block;
  color: #bff5ff;
  font-size: 0.5rem;
  font-weight: 900;
  text-transform: uppercase;
}

.surface-depot-badge strong {
  font-size: 0.78rem;
  font-weight: 900;
}

.surface-depot-badge i {
  display: block;
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(5, 24, 38, 0.55);
}

.surface-depot-badge b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4de3ff, #f4a3ff, #ffdc4a);
  transition: width 420ms ease;
}

.surface-ore-burst {
  position: absolute;
  left: 12%;
  top: 29%;
  z-index: 13;
  display: none;
  width: 135px;
  height: 38px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 12px 21px, #ffdc4a 0 4px, transparent 5px),
    radial-gradient(circle at 38px 14px, #50e8ff 0 5px, transparent 6px),
    radial-gradient(circle at 66px 24px, #f4a3ff 0 5px, transparent 6px),
    radial-gradient(circle at 96px 13px, #fff8a5 0 4px, transparent 5px),
    radial-gradient(circle at 122px 21px, #52ef78 0 4px, transparent 5px);
  filter: drop-shadow(0 0 8px rgba(255, 223, 72, 0.8));
}

.surface-ore-burst.show {
  animation: surface-ore-burst 680ms ease-out infinite;
}

.surface-sell-fx {
  position: absolute;
  right: 8.5%;
  top: 29.6%;
  z-index: 10;
  width: 38px;
  height: 28px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 58%, #fff8a5 0 4px, transparent 5px),
    radial-gradient(circle at 42% 32%, #ffdc4a 0 6px, transparent 7px),
    radial-gradient(circle at 66% 54%, #50e8ff 0 5px, transparent 6px),
    radial-gradient(circle at 82% 26%, #52ef78 0 4px, transparent 5px),
    radial-gradient(circle at 50% 60%, rgba(255, 216, 63, 0.28) 0 20px, transparent 21px);
  opacity: 0;
  filter:
    drop-shadow(0 0 13px rgba(255, 224, 76, 0.55))
    drop-shadow(0 9px 7px rgba(0, 0, 0, 0.25));
  transform: translateY(6px) scale(0.82);
}

.surface-sell-fx.show {
  opacity: 0;
  animation: none;
}

.surface-sell-fx.selling {
  filter:
    drop-shadow(0 0 18px rgba(255, 231, 86, 0.9))
    drop-shadow(0 9px 7px rgba(0, 0, 0, 0.25));
}

.surface-manager-skill-fx {
  position: absolute;
  right: 9%;
  top: 29.2%;
  z-index: 9;
  width: 66px;
  height: 44px;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 55%, rgba(131, 255, 104, 0.42) 0 18px, transparent 21px),
    conic-gradient(from 20deg, transparent 0 20%, rgba(120, 255, 105, 0.78) 22% 28%, transparent 31% 54%, rgba(93, 224, 255, 0.58) 57% 64%, transparent 67% 100%);
  opacity: 0;
  transform: translateY(5px) scale(0.52);
  transform-origin: 50% 82%;
  filter:
    drop-shadow(0 0 12px rgba(121, 255, 91, 0.48))
    drop-shadow(0 6px 4px rgba(0, 0, 0, 0.18));
}

.surface-manager-skill-fx.show {
  opacity: 0;
  animation: none;
}

.surface-skill-drone {
  --live28-y: 6px;
  --live28-scale: 0.48;
  --live28-scale-hi: 0.52;
  right: 3.4%;
  top: 25.4%;
  z-index: 25;
  width: 90px;
  height: 78px;
}

.surface-skill-drone.show {
  opacity: 0.98;
  animation: live28-depot-route 3.15s ease-in-out infinite;
}

.surface-skill-drone.show::before,
.surface-skill-drone.show::after {
  opacity: 1;
}

.surface-skill-drone.receiving {
  animation-duration: 920ms, 2.35s;
}

.surface-skill-drone.selling {
  animation-duration: 880ms, 1.8s;
  filter:
    drop-shadow(0 0 17px rgba(255, 233, 94, 0.82))
    drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
}
.sprite-elevator {
  left: -0.6%;
  top: 0;
  width: 86px;
  height: 126px;
  z-index: 15;
  pointer-events: auto;
  background-image: url("/assets/motion-live23-elevator-pod-closed.png?v=live23-elevator");
  background-size: contain;
  transition: none;
  animation: live23-elevator-machine 880ms ease-in-out infinite;
}

.sprite-elevator.moving_down,
.sprite-elevator.waiting {
  background-image: url("/assets/motion-live23-elevator-pod-closed.png?v=live23-elevator");
}

.sprite-elevator.moving_up.cargo-low,
.sprite-elevator.moving_up.cargo-half,
.sprite-elevator.moving_up.cargo-full {
  background-image: url("/assets/motion-live23-elevator-pod-full.png?v=live23-elevator");
}

.sprite-elevator.loading {
  background-image: url("/assets/motion-live23-elevator-pod-loading.png?v=live23-elevator");
}

.sprite-elevator.unloading {
  background-image: url("/assets/motion-live23-elevator-pod-full.png?v=live64-elevator-cycle-cart-hit");
}

.sprite-elevator.cargo-low {
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 9px rgba(255, 218, 75, 0.26));
}

.sprite-elevator.cargo-half {
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 13px rgba(255, 218, 75, 0.36));
}

.sprite-elevator.cargo-full {
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 17px rgba(255, 218, 75, 0.5));
}

.sprite-elevator::before {
  display: none;
}

.elevator-operator {
  position: absolute;
  left: 27px;
  bottom: 35px;
  z-index: 3;
  width: 25px;
  height: 34px;
  display: none;
  background: url("/assets/motion-live9-worker-carry-1.png") center / contain no-repeat;
  opacity: 0;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.28));
}

.elevator-hatch {
  display: none;
  position: absolute;
  left: 51px;
  bottom: 43px;
  z-index: 4;
  width: 16px;
  height: 20px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 28%, #fff6a7 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(96, 222, 255, 0.9), rgba(17, 99, 149, 0.9));
  box-shadow: 0 0 13px rgba(83, 215, 255, 0.66);
  opacity: 0;
}

.elevator-load-sparks {
  position: absolute;
  right: -5px;
  bottom: 50px;
  z-index: 5;
  width: 30px;
  height: 23px;
  opacity: 0;
  background:
    radial-gradient(circle at 8px 14px, #fff8a6 0 3px, transparent 4px),
    radial-gradient(circle at 21px 7px, var(--mine-crystal, #68d8ff) 0 4px, transparent 5px),
    radial-gradient(circle at 34px 17px, #ffdc4a 0 3px, transparent 4px);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mine-crystal, #68d8ff), #fff 24%));
}

.sprite-elevator.loading,
.sprite-elevator.unloading {
  animation:
    live23-elevator-dock 820ms ease-in-out infinite,
    live23-elevator-loading-frames 1.12s steps(1, end) infinite;
}

.sprite-elevator.unloading {
  animation:
    live23-elevator-dock 820ms ease-in-out infinite,
    live23-elevator-unloading-frames 1.18s steps(1, end) infinite;
}

.sprite-elevator.tier-steel::after,
.sprite-elevator.tier-gold::after,
.sprite-elevator.tier-crystal::after {
  content: "";
  position: absolute;
  left: -37px;
  bottom: -16px;
  z-index: -1;
  width: 122px;
  height: 118px;
  pointer-events: none;
  background: url("/assets/ui-live3-elevator-engine.png") center / contain no-repeat;
  opacity: 0.72;
  filter: drop-shadow(0 0 15px rgba(83, 220, 255, 0.62)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.24));
  animation: elevator-engine-pulse 1.12s ease-in-out infinite;
}

.sprite-elevator.tier-crystal::after {
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(255, 230, 78, 0.72)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.24));
}

.elevator-manager-skill-fx {
  position: absolute;
  left: -17px;
  bottom: -4px;
  z-index: 1;
  width: 106px;
  height: 104px;
  pointer-events: none;
  background: var(--manager-fx-image) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.7) translateY(5px);
  transform-origin: 50% 82%;
  filter:
    drop-shadow(0 0 18px rgba(75, 223, 255, 0.75))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.22));
}

.elevator-motion-lines,
.elevator-door-sheen,
.elevator-load-funnel,
.elevator-unload-chute {
  position: absolute;
  display: block;
  pointer-events: none;
}

.elevator-motion-lines {
  left: 10px;
  right: 8px;
  top: -18px;
  bottom: -18px;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  mix-blend-mode: screen;
}

.elevator-motion-lines i {
  position: absolute;
  left: 14%;
  width: 5px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(84, 231, 255, 0.82), rgba(255, 221, 76, 0.45), transparent);
  filter: drop-shadow(0 0 8px rgba(84, 231, 255, 0.72));
  animation: elevator-motion-streak 680ms linear infinite;
}

.elevator-motion-lines i:nth-child(2) {
  left: 52%;
  height: 42px;
  animation-delay: 0.16s;
}

.elevator-motion-lines i:nth-child(3) {
  left: 82%;
  height: 28px;
  animation-delay: 0.31s;
}

.sprite-elevator.moving_down .elevator-motion-lines,
.sprite-elevator.moving_up .elevator-motion-lines {
  opacity: 0.8;
}

.sprite-elevator.moving_up .elevator-motion-lines i {
  animation-name: elevator-motion-streak-up;
}

.elevator-door-sheen {
  left: 21px;
  top: 27px;
  z-index: 6;
  width: 35px;
  height: 62px;
  border-radius: 11px;
  background: linear-gradient(96deg, transparent 0 12%, rgba(255, 255, 255, 0.42) 24%, rgba(80, 231, 255, 0.24) 38%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-24px) skewX(-9deg);
  mix-blend-mode: screen;
}

.sprite-elevator.loading .elevator-door-sheen,
.sprite-elevator.unloading .elevator-door-sheen {
  opacity: 0.75;
  animation: elevator-door-sheen 1.1s ease-in-out infinite;
}

.elevator-load-funnel {
  left: 19px;
  top: 32px;
  z-index: 7;
  width: 38px;
  height: 54px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 52% 15%, rgba(255, 244, 145, 0.82) 0 7%, rgba(255, 165, 44, 0.32) 18%, transparent 34%),
    linear-gradient(180deg, rgba(255, 210, 67, 0), rgba(255, 172, 44, 0.72), rgba(83, 226, 255, 0.24), transparent);
  display: none;
  opacity: 0;
  transform-origin: 50% 10%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(255, 212, 68, 0.72));
}

.sprite-elevator.loading .elevator-load-funnel {
  opacity: 0.88;
  animation: elevator-load-funnel 660ms ease-in-out infinite;
}

.elevator-unload-chute {
  right: -13px;
  bottom: 43px;
  z-index: 8;
  width: 40px;
  height: 33px;
  border-radius: 11px 15px 18px 9px;
  background:
    radial-gradient(circle at 78% 70%, #ffdc4a 0 4px, transparent 5px),
    radial-gradient(circle at 58% 46%, var(--mine-crystal, #68d8ff) 0 4px, transparent 5px),
    linear-gradient(145deg, rgba(41, 126, 186, 0.94), rgba(13, 54, 86, 0.98) 64%, rgba(255, 167, 46, 0.92));
  border: 2px solid rgba(255, 217, 91, 0.58);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 0 13px rgba(255, 202, 62, 0.44);
  display: none;
  opacity: 0;
  transform: translateX(-8px) rotate(7deg) scale(0.72);
  transform-origin: 0 60%;
}

.sprite-elevator.unloading .elevator-unload-chute {
  opacity: 0.92;
  animation: elevator-unload-chute 780ms ease-in-out infinite;
}

.sprite-elevator.manager-skill-elevator .elevator-manager-skill-fx {
  opacity: 0.72;
  animation: manager-skill-elevator-aura 1.2s ease-in-out infinite;
}

.elevator-skill-drone {
  --live28-y: 5px;
  --live28-scale: 0.58;
  --live28-scale-hi: 0.62;
  right: -48px;
  top: -42px;
  z-index: 12;
  width: 88px;
  height: 90px;
}

.sprite-elevator.manager-skill-elevator .elevator-skill-drone {
  opacity: 0.98;
  animation: live28-elevator-scan 1.22s ease-in-out infinite;
}

.sprite-elevator.manager-skill-elevator .elevator-skill-drone::before,
.sprite-elevator.manager-skill-elevator .elevator-skill-drone::after {
  opacity: 1;
}

.sprite-elevator.loading .elevator-operator,
.sprite-elevator.unloading .elevator-operator {
  opacity: 0;
}

.sprite-elevator.loading .elevator-operator {
  animation:
    elevator-operator-load 1040ms ease-in-out infinite,
    live9-worker-load-frames 1040ms steps(1, end) infinite;
}

.sprite-elevator.unloading .elevator-operator {
  animation:
    elevator-operator-unload 1120ms ease-in-out infinite,
    live9-worker-carry-frames 1040ms steps(1, end) infinite;
}

.sprite-elevator.loading .elevator-hatch,
.sprite-elevator.unloading .elevator-hatch,
.sprite-elevator.loading .elevator-load-sparks,
.sprite-elevator.unloading .elevator-load-sparks {
  opacity: 1;
}

.sprite-elevator.loading .elevator-load-sparks {
  animation: elevator-load-sparks 560ms linear infinite;
}

.sprite-elevator.unloading .elevator-load-sparks {
  animation: elevator-unload-sparks 740ms linear infinite;
}

.elevator-status {
  position: absolute;
  left: 18px;
  top: 12px;
  z-index: 3;
  min-width: 34px;
  padding: 2px 4px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #56cbff, #126fae);
  box-shadow: 0 3px 0 rgba(0, 48, 78, 0.48), 0 0 12px rgba(81, 203, 255, 0.42);
  font-size: 0.48rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 45, 70, 0.48);
}

.sprite-elevator.loading .elevator-status {
  background: linear-gradient(180deg, #ffde59, #ff9028);
}

.sprite-elevator.unloading .elevator-status {
  background: linear-gradient(180deg, #68ef7e, #16a84c);
}

.elevator-cargo {
  position: absolute;
  left: 26px;
  bottom: 31px;
  z-index: 7;
  width: 31px;
  height: 25px;
  pointer-events: none;
  opacity: 0;
}

.elevator-cargo-fx {
  position: absolute;
  left: 24px;
  bottom: 31px;
  z-index: 8;
  width: 34px;
  height: 30px;
  pointer-events: none;
  background: var(--fx-image) center bottom / contain no-repeat;
  opacity: 0;
  transform: translateY(7px) scale(var(--cargo-scale, 0.46));
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 0 11px color-mix(in srgb, var(--mine-crystal, #68d8ff), #fff 20%))
    drop-shadow(0 6px 4px rgba(0, 0, 0, 0.28));
  transition: opacity 220ms ease, transform 260ms ease;
}

.elevator-cargo-fx.active {
  opacity: 0.34;
  transform: translateY(0) scale(var(--cargo-scale, 0.62));
  animation: fx-elevator-cargo-bob 940ms ease-in-out infinite;
}

.sprite-elevator.loading .elevator-cargo-fx {
  animation-name: fx-elevator-cargo-load;
}

.elevator-cargo::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
  height: 12px;
  border-radius: 5px 5px 10px 10px;
  background: linear-gradient(180deg, rgba(12, 39, 62, 0.45), rgba(3, 16, 28, 0.82));
  box-shadow: inset 0 2px 0 rgba(148, 230, 255, 0.28), 0 0 10px rgba(83, 215, 255, 0.4);
}

.elevator-cargo i {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 3px;
  opacity: 0;
  background:
    radial-gradient(circle at 35% 28%, #fff 0 12%, transparent 14%),
    linear-gradient(135deg, #ffdc4a, var(--mine-crystal, #68d8ff) 54%, #f4a3ff);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mine-crystal, #68d8ff), #fff 30%);
  transform: rotate(45deg) translateY(9px) scale(0.35);
}

.elevator-cargo i.filled {
  opacity: 1;
  transform: rotate(45deg) translateY(0) scale(1);
  transition: opacity 220ms ease var(--d), transform 260ms ease var(--d);
}

.sprite-elevator.loading .elevator-cargo i.filled,
.sprite-elevator.unloading .elevator-cargo i.filled {
  animation: elevator-gem-bob 620ms ease-in-out infinite;
  animation-delay: var(--d);
}

.load-stream {
  position: absolute;
  left: 4.4%;
  top: 49%;
  z-index: 14;
  width: 68px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ore), #fff 20%));
  animation: load-stream 620ms ease-in-out infinite;
  opacity: 0;
}

.ore-stream-fx {
  position: absolute;
  left: 13px;
  top: 0;
  z-index: 1;
  width: 56px;
  height: 36px;
  pointer-events: none;
  background: var(--fx-image) center / contain no-repeat;
  opacity: 0.5;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ore), #fff 24%));
  animation: fx-ore-stream 620ms ease-in-out infinite;
}

.load-stream i {
  position: absolute;
  left: 12px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: var(--ore);
  box-shadow: 0 0 9px color-mix(in srgb, var(--ore), #fff 32%);
  transform: rotate(45deg);
  animation: ore-to-elevator 760ms linear infinite;
}

.load-stream i:nth-child(2) {
  animation-delay: 0.12s;
  background: #ffdc4a;
}

.load-stream i:nth-child(3) {
  animation-delay: 0.24s;
}

.load-stream i:nth-child(4) {
  animation-delay: 0.36s;
  background: #5ee9ff;
}

.load-stream i:nth-child(5) {
  animation-delay: 0.48s;
}

.shaft-loader {
  position: absolute;
  left: 5.6%;
  bottom: -1%;
  z-index: 11;
  width: 112px;
  height: 97px;
  background: url("/assets/motion-live21-shaft-loader-ready.png?v=live21-loader") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 11px color-mix(in srgb, var(--ore), #fff 25%)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.34));
  transform-origin: 42% 92%;
  animation:
    live21-shaft-loader-work 1280ms ease-in-out infinite,
    live21-shaft-loader-frames 1280ms steps(1, end) infinite;
}

.shaft-loading-arm {
  position: absolute;
  left: 2.5%;
  bottom: 4%;
  z-index: 15;
  width: 34px;
  height: 36px;
  pointer-events: none;
  background: url("/assets/motion-live9-machine-loader-arm-1.png") center / contain no-repeat;
  opacity: 0;
  transform-origin: 42% 82%;
  filter:
    drop-shadow(0 0 13px color-mix(in srgb, var(--ore), #fff 22%))
    drop-shadow(0 9px 7px rgba(0, 0, 0, 0.3));
  animation:
    live9-loader-arm-work 1120ms ease-in-out infinite,
    live9-loader-arm-frames 1120ms steps(1, end) infinite;
}

.shaft-loader .action-pick,
.shaft-loader .action-cargo {
  display: block;
}

.shaft-loader .action-pick {
  display: none;
  left: 33px;
  top: 25px;
  animation: shovel-tilt 680ms ease-in-out infinite;
}

.shaft-loader .action-cargo {
  display: none;
}

.loader-callout {
  position: absolute;
  left: 6%;
  top: 19%;
  z-index: 17;
  display: none;
  padding: 3px 8px;
  border: 2px solid rgba(255, 248, 175, 0.86);
  border-radius: 999px;
  color: #603607;
  background: linear-gradient(180deg, #fff3b5, #e7ad4f);
  box-shadow: 0 3px 0 rgba(82, 42, 18, 0.28), 0 0 14px rgba(255, 223, 75, 0.42);
  font-size: 0.58rem;
  font-weight: 900;
  opacity: 0;
  transform-origin: 20% 100%;
  animation: loader-callout-pop 1.1s ease-in-out infinite;
}

.ore-pulse {
  position: absolute;
  right: 6%;
  top: 11%;
  z-index: 7;
  width: 68px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ore), #fff 35%) 0 8%, color-mix(in srgb, var(--ore), transparent 35%) 28%, transparent 70%);
  mix-blend-mode: screen;
  animation: ore-heartbeat 1.45s ease-in-out infinite;
  animation-delay: var(--delay);
}

.coin-stream {
  position: absolute;
  z-index: 13;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8a5, #ffd640 58%, #ff9828);
  box-shadow: 0 0 6px rgba(255, 215, 66, 0.55);
  opacity: 0.46;
  animation: coin-float 2.6s ease-in-out infinite;
}

.coin-stream.coin-a {
  left: 15%;
  top: 35%;
}

.coin-stream.coin-b {
  left: 64%;
  top: 62%;
  animation-delay: 0.9s;
}

.coin-burst {
  position: absolute;
  left: 50%;
  bottom: 235px;
  z-index: 18;
  width: 0;
  height: 0;
  pointer-events: none;
}

.coin-burst i {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8a5, #ffd640 58%, #ff9828);
  box-shadow: 0 0 6px rgba(255, 215, 66, 0.62);
  animation: burst-coin 900ms ease-out forwards;
  transform: rotate(calc(var(--i) * 40deg)) translateY(-8px);
}

.action-burst {
  --burst-a: #fff16a;
  --burst-b: #51d6ff;
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 18;
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.action-burst::before,
.action-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: action-ring 980ms ease-out forwards;
}

.action-burst::before {
  border: 3px solid color-mix(in srgb, var(--burst-a), transparent 18%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--burst-b), transparent 20%);
}

.action-burst::after {
  width: 110px;
  height: 110px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 8%, transparent 34%),
    conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--burst-b), transparent 24%) 10% 14%, transparent 16% 25%);
  mix-blend-mode: screen;
  animation-duration: 740ms;
}

.action-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, var(--burst-a));
  box-shadow: 0 0 12px var(--burst-b);
  transform: rotate(calc(var(--i) * 30deg)) translateY(-14px);
  animation: action-spark 940ms ease-out forwards;
}

.burst-level-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 126px;
  height: 92px;
  pointer-events: none;
  background: var(--fx-image) center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--burst-b), #fff 18%));
  transform: translate(-50%, -50%) scale(0.46) rotate(-4deg);
  animation: fx-level-burst 1.05s ease-out forwards;
}

.action-burst.mine .burst-level-fx {
  --fx-image: url("/assets/fx-mine-pickaxe-hit.png");
  width: 104px;
  height: 84px;
}

.action-burst.reward .burst-level-fx,
.action-burst.boost .burst-level-fx {
  --fx-image: url("/assets/fx-mine-depot-sell.png");
}

.action-burst.mine {
  --burst-a: #ffd24a;
  --burst-b: var(--mine-crystal, #68d8ff);
  left: 38%;
  top: 48%;
}

.action-burst.unlock {
  --burst-a: #72f07d;
  --burst-b: #5ee7ff;
}

.action-burst.boost {
  --burst-a: #f5a3ff;
  --burst-b: #64f0ff;
}

.action-burst.reward {
  --burst-a: #ffe86d;
  --burst-b: #39e87d;
}

.action-burst.prestige {
  --burst-a: #f4a3ff;
  --burst-b: #8f7cff;
}

.shaft-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 43px;
  border-left: 3px solid #151d22;
  border-right: 3px solid #151d22;
  background:
    linear-gradient(90deg, #303940, #222b31 45%, #151c22),
    repeating-linear-gradient(180deg, transparent 0 94px, rgba(255, 255, 255, 0.08) 94px 98px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.07), 3px 0 0 rgba(0, 0, 0, 0.24);
}

.shaft-row {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  min-height: 112px;
  isolation: isolate;
}

.floor-cell {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.floor-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 36px;
  border: 2px solid rgba(226, 242, 250, 0.4);
  border-radius: 8px;
  color: #e7f9ff;
  background: linear-gradient(180deg, #58717d, #2a3941);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  font-weight: 900;
}

.floor-cell .rail-light {
  position: absolute;
  right: 2px;
  bottom: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #d7ff7b 0 28%, #37b858 32% 58%, #126534 62% 100%);
  box-shadow: 0 0 14px rgba(134, 255, 108, 0.72);
}

.shaft-room {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 5px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border-top: 8px solid #8f382b;
  border-bottom: 8px solid #451e25;
  border-radius: 0 7px 7px 0;
  background:
    linear-gradient(180deg, #84372b 0 8px, var(--cave) 8px 78px, #173746 78px 86px, #4b2025 86px 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -10px 0 rgba(0, 0, 0, 0.18);
}

.shaft-room::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 7px;
  background:
    linear-gradient(90deg, transparent 0 5%, #11303d 5% 95%, transparent 95%),
    repeating-linear-gradient(90deg, #d8a93c 0 28px, transparent 28px 46px);
  opacity: 0.9;
}

.shaft-row.selected .shaft-room {
  outline: 4px solid rgba(255, 245, 115, 0.78);
  outline-offset: -4px;
}

.shaft-row.locked .shaft-room {
  filter: saturate(0.52) brightness(0.78);
}

.shaft-row.locked .worker-zone,
.shaft-row.locked .mine-cart {
  opacity: 0.22;
}

.shaft-income {
  position: absolute;
  left: 9px;
  top: 27px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(3, 38, 53, 0.5);
}

.shaft-income::before {
  content: "$";
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #956017;
  background: radial-gradient(circle at 35% 30%, #fff69b, #ffd23d 58%, #ff9922);
  text-shadow: none;
}

.role-bubble {
  position: absolute;
  left: 76px;
  top: 7px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 29px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #51c8ff, #1378bc);
  box-shadow: 0 3px 0 rgba(0, 61, 96, 0.45);
  font-weight: 900;
}

.role-bubble.auto {
  background: linear-gradient(180deg, #ffdf59, #ee9e22);
}

.mine-cart {
  position: absolute;
  left: 13px;
  bottom: 25px;
  z-index: 4;
  width: 58px;
  height: 32px;
}

.mine-cart::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 10px;
  height: 16px;
  border: 2px solid #1e5064;
  border-radius: 4px 4px 8px 8px;
  background: linear-gradient(180deg, #9ed2dc, #5e8994);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.25);
}

.mine-cart::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #17242b;
  box-shadow: 27px 0 0 #17242b;
}

.cart-gems {
  position: absolute;
  left: 11px;
  right: 10px;
  top: 2px;
  height: 16px;
}

.cart-gems i,
.ore-wall i {
  position: absolute;
  display: block;
  background: var(--ore);
  box-shadow: 0 0 9px color-mix(in srgb, var(--ore), #fff 50%);
}

.cart-gems i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  transform: rotate(45deg);
}

.worker-zone {
  position: absolute;
  left: 86px;
  right: 66px;
  bottom: 13px;
  z-index: 5;
  height: 72px;
}

.miner {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: 39px;
  height: 64px;
  animation: miner-bob 900ms ease-in-out infinite;
  animation-delay: var(--delay);
}

.miner.manager {
  width: 43px;
  height: 68px;
  filter: drop-shadow(0 0 8px rgba(255, 226, 60, 0.45));
}

.miner span {
  position: absolute;
  display: block;
}

.helmet {
  left: 4px;
  top: 3px;
  width: 31px;
  height: 18px;
  border-radius: 17px 17px 6px 6px;
  background: linear-gradient(180deg, #fff072, #f5b31c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.helmet::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff8a8;
}

.head {
  left: 8px;
  top: 15px;
  width: 23px;
  height: 24px;
  border-radius: 50%;
  background: #ffc49b;
  box-shadow: inset -3px -2px 0 rgba(172, 92, 59, 0.18);
}

.head::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #18384e;
  box-shadow: 10px 0 0 #18384e;
}

.head::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 5px;
  width: 9px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: #833d32;
}

.body {
  left: 9px;
  top: 37px;
  width: 22px;
  height: 22px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, #f4f9ff 0 44%, #28a8df 45% 100%);
  box-shadow: inset -3px 0 0 rgba(0, 65, 105, 0.18);
}

.miner.manager .body {
  background: linear-gradient(180deg, #fff1aa 0 44%, #f2bd22 45% 100%);
}

.arm {
  top: 42px;
  width: 7px;
  height: 22px;
  border-radius: 7px;
  background: #ffc49b;
  transform-origin: 50% 2px;
}

.arm.left {
  left: 5px;
  rotate: 24deg;
}

.arm.right {
  right: 5px;
  rotate: -28deg;
  animation: arm-swing 700ms ease-in-out infinite;
}

.leg {
  top: 56px;
  width: 8px;
  height: 14px;
  border-radius: 5px;
  background: #12384a;
}

.leg.left {
  left: 12px;
  rotate: 8deg;
}

.leg.right {
  right: 10px;
  rotate: -8deg;
}

.tool {
  right: 1px;
  top: 43px;
  width: 4px;
  height: 28px;
  border-radius: 4px;
  background: #a66a3f;
  rotate: -34deg;
  transform-origin: top center;
  animation: pick-hit 760ms ease-in-out infinite;
}

.tool::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 1px;
  width: 22px;
  height: 5px;
  border-radius: 5px;
  background: #d8eff9;
}

.sack-line {
  position: absolute;
  right: 44px;
  bottom: 22px;
  z-index: 5;
  display: flex;
  gap: 1px;
  animation: sack-pulse 1.6s ease-in-out infinite;
}

.sack {
  width: 30px;
  height: 38px;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(180deg, #b98543, #6d4427);
  box-shadow: inset 4px 0 0 rgba(255, 216, 124, 0.2), 0 4px 0 rgba(0, 0, 0, 0.2);
}

.ore-wall {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 58px;
  border-left: 3px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.26), transparent 18px),
    linear-gradient(180deg, color-mix(in srgb, var(--ore), #4b1119 30%), #8d1123);
  box-shadow: inset 8px 0 0 rgba(0, 0, 0, 0.18), 0 0 18px color-mix(in srgb, var(--ore), transparent 30%);
}

.ore-wall i {
  width: var(--s);
  height: var(--s);
  left: var(--x);
  top: var(--y);
  border-radius: 30% 12% 34% 12%;
  transform: rotate(45deg);
  animation: gem-glow 1.7s ease-in-out infinite;
  animation-delay: var(--delay);
}

.level-badge {
  position: absolute;
  right: 8px;
  top: 28px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 58px;
  min-height: 56px;
  padding: 5px 3px;
  border: 3px solid #e9fbff;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #59c7ff, #1678bd);
  box-shadow: 0 4px 0 #0b527e, 0 0 0 2px rgba(0, 56, 87, 0.2);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.48);
}

.level-badge::before {
  content: "";
  width: 22px;
  height: 18px;
  margin-bottom: -1px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffba2, #ffad27);
  clip-path: polygon(50% 0, 100% 42%, 75% 42%, 75% 100%, 25% 100%, 25% 42%, 0 42%);
}

.level-badge small,
.level-badge strong {
  display: block;
  line-height: 1;
}

.level-badge small {
  font-size: 0.64rem;
  font-weight: 900;
}

.level-badge strong {
  font-size: 0.86rem;
}

.lock-cover {
  position: absolute;
  inset: 8px 58px 8px 0;
  z-index: 7;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(90deg, rgba(20, 31, 39, 0.72), rgba(20, 31, 39, 0.28));
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.action-tray {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: calc(49px + env(safe-area-inset-bottom));
  z-index: 18;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 3px solid rgba(119, 72, 25, 0.45);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff3b5, #e7b054);
  box-shadow: 0 6px 0 rgba(72, 38, 19, 0.35), 0 14px 26px rgba(0, 0, 0, 0.25);
}

.selected-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 6px;
  align-items: center;
}

.selected-card strong,
.selected-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-card strong {
  font-size: 1rem;
  line-height: 1;
}

.selected-card span {
  color: #523d25;
  font-size: 0.76rem;
  font-weight: 900;
}

.transport-pill {
  min-height: 50px;
  padding: 5px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #43a7eb, #116ea9);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 62, 99, 0.45);
}

.transport-pill strong {
  display: block;
}

.transport-pill i {
  display: block;
  height: 8px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
}

.transport-pill b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #53e56a, #ffe34a, #ff8624);
}

.milestone-panel {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(126px, 42%);
  gap: 7px;
  align-items: center;
  min-height: 62px;
  overflow: hidden;
  padding: 5px 6px;
  border: 2px solid rgba(255, 250, 191, 0.78);
  border-radius: 8px;
  color: #163249;
  background:
    radial-gradient(circle at 13% 22%, rgba(255, 237, 88, 0.42), transparent 56px),
    radial-gradient(circle at 85% 36%, rgba(83, 220, 255, 0.42), transparent 70px),
    linear-gradient(180deg, rgba(255, 252, 222, 0.97), rgba(173, 230, 243, 0.9));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.58), 0 4px 0 rgba(128, 77, 18, 0.3);
}

.milestone-panel::before {
  content: "";
  position: absolute;
  inset: -55px;
  background: conic-gradient(from 0deg, transparent, rgba(255, 226, 69, 0.38), transparent, rgba(78, 220, 255, 0.38), transparent);
  opacity: 0.58;
  animation: milestone-aura-spin 5.6s linear infinite;
}

.milestone-panel > * {
  position: relative;
  z-index: 1;
}

.milestone-art {
  width: 58px;
  height: 58px;
  background: var(--live3-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(96, 50, 12, 0.22)) drop-shadow(0 0 13px rgba(255, 224, 75, 0.68));
  animation: milestone-forge-work 1.2s ease-in-out infinite;
}

.milestone-copy {
  min-width: 0;
}

.milestone-copy small {
  display: block;
  color: #0c79a2;
  font-size: 0.56rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.milestone-copy strong,
.milestone-copy p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.milestone-copy strong {
  display: block;
  color: #153750;
  font-size: 0.82rem;
  font-weight: 1000;
  line-height: 1;
}

.milestone-copy p {
  margin: 3px 0 0;
  color: #3d654f;
  font-size: 0.58rem;
  font-weight: 900;
}

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

.milestone-card {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 52px;
  overflow: hidden;
  padding: 3px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(83, 191, 228, 0.38));
  box-shadow: inset 0 -2px 0 rgba(7, 73, 108, 0.12);
}

.milestone-card i {
  width: 27px;
  height: 24px;
  background: var(--live3-image) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(10, 72, 93, 0.18));
  animation: milestone-icon-pop 1.1s ease-in-out infinite;
}

.milestone-card b,
.milestone-card em {
  max-width: 100%;
  overflow: hidden;
  color: #16405a;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.milestone-card em {
  color: #6b5021;
  font-size: 0.44rem;
}

.milestone-card u {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(5, 48, 72, 0.24);
  text-decoration: none;
}

.milestone-card s {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fe7ff, #ffe54a, #ff9a2b);
  box-shadow: 0 0 8px rgba(255, 228, 77, 0.72);
}

.milestone-card.tier-gold,
.milestone-card.tier-crystal {
  border-color: rgba(255, 230, 77, 0.92);
  box-shadow: inset 0 -2px 0 rgba(7, 73, 108, 0.12), 0 0 11px rgba(255, 226, 72, 0.5);
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.upgrade-button {
  display: grid;
  grid-template-rows: 20px 12px 18px;
  place-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 5px 3px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #42b6ee, #0f6da9);
  box-shadow: 0 4px 0 rgba(13, 79, 118, 0.65);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.45);
}

.upgrade-button.main {
  color: #653909;
  background: linear-gradient(180deg, #ffe86b, #ff9f2a);
  box-shadow: 0 4px 0 rgba(183, 96, 12, 0.62);
  text-shadow: none;
}

.upgrade-button.tier-steel,
.upgrade-button.tier-gold,
.upgrade-button.tier-crystal {
  box-shadow: 0 4px 0 rgba(13, 79, 118, 0.65), 0 0 14px rgba(83, 222, 255, 0.48);
}

.upgrade-button.tier-gold,
.upgrade-button.tier-crystal {
  background: linear-gradient(180deg, #77e8ff, #1f8fd0 52%, #176099);
}

.upgrade-button.main.tier-gold,
.upgrade-button.main.tier-crystal {
  color: #57330a;
  background: linear-gradient(180deg, #fff892, #ffbf32 58%, #ff8526);
  box-shadow: 0 4px 0 rgba(183, 96, 12, 0.62), 0 0 16px rgba(255, 226, 74, 0.68);
}

.upgrade-button strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 20px;
}

.button-icon.pick::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 1px;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #8a5428;
  rotate: 38deg;
}

.button-icon.pick::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 22px;
  height: 5px;
  border-radius: 5px;
  background: #ffffff;
}

.button-icon.manager::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffd1a7;
}

.button-icon.manager::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 19px;
  height: 10px;
  border-radius: 10px 10px 4px 4px;
  background: #ffe15d;
}

.button-icon.lift::before,
.button-icon.depot::before {
  content: "";
  position: absolute;
  inset: 3px 5px;
  border-radius: 4px;
  background: #dff7ff;
  box-shadow: inset 0 -5px 0 #7db7c9;
}

.button-icon.depot::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 2px;
  height: 7px;
  background: #ffba34;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.bottom-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 19;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  min-height: 45px;
  padding: 4px 6px 6px;
  background: linear-gradient(180deg, #2093d6, #09649d);
  box-shadow: 0 -4px 0 rgba(0, 56, 91, 0.36);
}

.bottom-dock button {
  display: grid;
  place-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 37px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #6ccaff, #1579b9);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 2px 0 rgba(0, 49, 78, 0.45);
  font-size: 0.62rem;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.42);
}

.bottom-dock b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.54rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-dock button.active {
  background: linear-gradient(180deg, #fff07d, #ff9f29);
  color: #613406;
  text-shadow: none;
}

.nav-icon {
  position: relative;
  display: block;
  width: 19px;
  height: 18px;
}

.nav-icon.cashbag::before,
.nav-icon.hardhat::before,
.nav-icon.chest::before,
.nav-icon.season::before,
.nav-icon.prestige::before,
.nav-icon.world::before,
.nav-icon.star::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff36b, #ff9d27);
}

.nav-icon.star::before {
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 70% 58%, 82% 100%, 50% 74%, 18% 100%, 30% 58%, 0 35%, 38% 35%);
}

.nav-icon.world::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #57e27d 0 18%, transparent 19%),
    radial-gradient(circle at 66% 62%, #45b7ff 0 22%, transparent 23%),
    linear-gradient(180deg, #a7f3ff, #1482cf);
}

.nav-icon.season::before {
  border-radius: 4px;
  background:
    radial-gradient(circle at 52% 35%, #fff 0 8%, transparent 9%),
    linear-gradient(135deg, #ffe76a 0 38%, #33c4ff 39% 100%);
  box-shadow: 0 0 9px rgba(255, 222, 74, 0.58);
  transform: rotate(-10deg);
}

.nav-icon.prestige::before {
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 13%, transparent 14%),
    conic-gradient(from 20deg, #55e5ff, #fff06d, #36df8a, #55e5ff);
  box-shadow: 0 0 10px rgba(82, 221, 255, 0.62);
  transform: rotate(45deg) scale(0.82);
}

.drawer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(205px + env(safe-area-inset-bottom));
  z-index: 22;
  display: none;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.46);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff3be, #efd38d);
  box-shadow: 0 8px 0 rgba(83, 45, 21, 0.28), 0 18px 34px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

.drawer.open {
  display: block;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  color: #fff;
  background: linear-gradient(180deg, #339fe2, #14689f);
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.42);
}

.drawer-head button {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  color: #fff;
  background: rgba(0, 45, 75, 0.28);
  font-weight: 900;
}

.drawer-body {
  display: grid;
  gap: 7px;
  max-height: min(360px, 48vh);
  overflow: auto;
  padding: 8px;
  background: linear-gradient(180deg, #fff3be, #efd38d);
}

.drawer-section-title {
  padding: 2px 4px;
  border-radius: 6px;
  color: #70522b;
  background: linear-gradient(180deg, rgba(255, 246, 202, 0.98), rgba(239, 211, 141, 0.96));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.drawer-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  animation: drawer-row-enter 180ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.drawer-row strong,
.drawer-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-row small {
  color: #70522b;
  font-size: 0.68rem;
  font-weight: 800;
}

.drawer-row button {
  min-width: 66px;
  min-height: 34px;
  border-radius: 7px;
  color: #603607;
  background: linear-gradient(180deg, #ffeb6a, #ff9d26);
  font-weight: 900;
}

.academy-panel {
  position: relative;
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 214px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 230, 82, 0.5), transparent 82px),
    radial-gradient(circle at 86% 20%, rgba(86, 222, 255, 0.42), transparent 100px),
    linear-gradient(180deg, #f9fdff 0%, #c4f1fb 52%, #568dcf 100%);
  box-shadow: 0 8px 0 rgba(18, 77, 116, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.academy-panel::before {
  content: "";
  position: absolute;
  inset: -76px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.46), transparent, rgba(84, 222, 255, 0.5), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: academy-aura-spin 6s linear infinite;
}

.academy-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.5) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.8s ease-in-out infinite;
}

.academy-panel > * {
  position: relative;
  z-index: 1;
}

.academy-hero {
  align-self: center;
  justify-self: center;
  display: block;
  width: 104px;
  height: 104px;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(18, 68, 104, 0.24)) drop-shadow(0 0 22px rgba(255, 224, 75, 0.64));
  animation: academy-hero-float 1.55s ease-in-out infinite;
}

.academy-hero i,
.academy-hero b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.academy-hero i {
  left: 12px;
  right: 10px;
  bottom: 9px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 56%, #54e0ff 0 4px, transparent 5px),
    radial-gradient(circle at 52% 30%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 76% 62%, #77f08a 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  opacity: 0.72;
  animation: academy-gems-rise 880ms ease-in-out infinite;
}

.academy-hero b {
  right: 8px;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.8);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.academy-copy {
  min-width: 0;
  align-self: center;
}

.academy-copy small {
  display: block;
  color: #075d8a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.academy-copy strong {
  display: block;
  overflow: hidden;
  color: #14364e;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.academy-copy p {
  margin: 4px 0 0;
  color: #386070;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.academy-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
}

.academy-progress span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.academy-progress b,
.academy-progress em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-progress b {
  color: #15364e;
  font-size: 0.76rem;
  font-weight: 1000;
}

.academy-progress em {
  color: #684a17;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.academy-progress i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(19, 57, 78, 0.22);
  box-shadow: inset 0 2px 2px rgba(2, 24, 39, 0.22);
}

.academy-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54ddff, #fff06d, #55e27d);
  background-size: 180% 100%;
  box-shadow: 0 0 12px rgba(84, 221, 255, 0.68);
  animation: prestige-progress-flow 1.2s linear infinite;
}

.academy-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.academy-stats span {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.academy-stats b,
.academy-stats em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-stats b {
  color: #14364e;
  font-size: 0.75rem;
  font-weight: 1000;
}

.academy-stats em {
  color: #684a17;
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.academy-panel button {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 116px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.42);
}

.academy-panel.ready {
  border-color: rgba(255, 225, 77, 0.95);
  box-shadow: 0 8px 0 rgba(112, 68, 15, 0.34), 0 0 24px rgba(255, 222, 74, 0.46);
}

.academy-stage-panel {
  position: relative;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 318px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 238, 94, 0.54), transparent 92px),
    radial-gradient(circle at 85% 24%, rgba(82, 224, 255, 0.48), transparent 110px),
    linear-gradient(180deg, #fdfad0 0%, #bff0f9 52%, #348fc2 100%);
  box-shadow: 0 8px 0 rgba(18, 77, 116, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.academy-stage-panel::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.52), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.58), transparent, rgba(84, 222, 255, 0.54), transparent);
  opacity: 0.66;
  mix-blend-mode: screen;
  animation: academy-aura-spin 5.7s linear infinite;
}

.academy-stage-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.52) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 3.1s ease-in-out infinite;
}

.academy-stage-panel > * {
  position: relative;
  z-index: 1;
}

.academy-stage-scene {
  position: relative;
  grid-row: span 3;
  min-height: 208px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 238, 109, 0.48), transparent 56px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(26, 126, 170, 0.22));
  box-shadow: inset 0 -5px 0 rgba(11, 84, 119, 0.14);
}

.academy-stage-hall,
.academy-stage-pod,
.academy-stage-board,
.academy-stage-burst {
  position: absolute;
  display: block;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 7px 0 rgba(9, 72, 102, 0.18)) drop-shadow(0 0 18px rgba(255, 225, 76, 0.5));
}

.academy-stage-hall {
  left: -14px;
  right: -14px;
  top: 3px;
  height: 128px;
  opacity: 0.96;
  animation: academy-stage-hall-float 2.8s ease-in-out infinite;
}

.academy-stage-pod {
  left: 17px;
  top: 91px;
  width: 104px;
  height: 102px;
  animation: academy-stage-pod-glow 1.45s ease-in-out infinite;
}

.academy-stage-pod i {
  position: absolute;
  inset: 16px 28px 18px;
  border-radius: 999px;
  border: 2px solid rgba(83, 229, 255, 0.72);
  box-shadow: 0 0 22px rgba(83, 229, 255, 0.72);
  animation: academy-pod-ring 920ms ease-in-out infinite;
}

.academy-stage-pod b {
  position: absolute;
  left: 35px;
  right: 34px;
  bottom: 12px;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 64%, #54e0ff 0 4px, transparent 5px),
    radial-gradient(circle at 56% 36%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 78% 68%, #77f08a 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  opacity: 0.78;
  animation: academy-gems-rise 780ms ease-in-out infinite;
}

.academy-stage-board {
  right: 2px;
  bottom: 6px;
  width: 70px;
  height: 70px;
  opacity: 0.92;
  animation: academy-row-bob 1.7s ease-in-out infinite;
}

.academy-stage-burst {
  left: 8px;
  bottom: 4px;
  width: 78px;
  height: 76px;
  opacity: 0.9;
  animation: academy-skill-burst-pulse 1.05s ease-in-out infinite;
}

.academy-stage-trainee.asset-portrait {
  position: absolute;
  left: 44px;
  top: 115px;
  z-index: 2;
  width: 50px;
  height: 66px;
  border-radius: 10px;
  background-size: cover;
  box-shadow: 0 4px 0 rgba(11, 67, 95, 0.3), 0 0 16px rgba(80, 221, 255, 0.58);
  animation: academy-trainee-train 1.18s ease-in-out infinite;
}

.academy-stage-copy {
  align-self: end;
  min-width: 0;
}

.academy-stage-copy small {
  display: block;
  color: #075d8a;
  font-size: 0.65rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.academy-stage-copy strong {
  display: block;
  overflow: hidden;
  color: #14364e;
  font-size: 1.02rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.academy-stage-copy p {
  margin: 4px 0 0;
  color: #386070;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
}

.academy-stage-meter {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
}

.academy-stage-meter span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.academy-stage-meter b,
.academy-stage-meter em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-stage-meter b {
  color: #15364e;
  font-size: 0.72rem;
  font-weight: 1000;
}

.academy-stage-meter em {
  color: #684a17;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.academy-stage-meter i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(19, 57, 78, 0.2);
  box-shadow: inset 0 2px 2px rgba(2, 24, 39, 0.2);
}

.academy-stage-meter i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54ddff, #fff06d, #55e27d);
  background-size: 180% 100%;
  box-shadow: 0 0 12px rgba(84, 221, 255, 0.68);
  animation: prestige-progress-flow 1.2s linear infinite;
}

.academy-class-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.academy-class-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-width: 0;
  min-height: 104px;
  padding: 7px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  color: #15364e;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 241, 98, 0.48), transparent 50px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(151, 220, 246, 0.78));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 rgba(10, 80, 116, 0.22);
  text-align: left;
  animation: academy-card-rise 260ms cubic-bezier(0.2, 1.06, 0.28, 1) both;
  animation-delay: calc(var(--row-index, 0) * 55ms);
}

.academy-class-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(116deg, transparent 0 42%, rgba(255, 255, 255, 0.58) 48%, transparent 57% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.4s ease-in-out infinite;
}

.academy-class-card > * {
  position: relative;
  z-index: 1;
}

.academy-class-card.active,
.academy-class-card.complete {
  border-color: rgba(255, 225, 77, 0.96);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.54), 0 5px 0 rgba(120, 74, 15, 0.28), 0 0 18px rgba(255, 225, 77, 0.44);
}

.academy-class-card.rarity-epicki {
  background:
    radial-gradient(circle at 24% 16%, rgba(189, 119, 255, 0.44), transparent 50px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(218, 194, 255, 0.82));
}

.academy-class-card.rarity-legendarny,
.academy-class-card.rarity-mityczny {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 225, 77, 0.52), transparent 54px),
    linear-gradient(180deg, rgba(255, 252, 208, 0.95), rgba(239, 195, 88, 0.84));
}

.academy-class-art {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 44px;
  height: 44px;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10, 72, 102, 0.16)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.48));
  opacity: 0.86;
  animation: academy-row-bob 1.25s ease-in-out infinite;
}

.academy-class-art i {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 9px;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 9px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
}

.academy-class-card .portrait.asset-portrait {
  grid-row: span 2;
  width: 44px;
  height: 58px;
  border-radius: 10px;
  background-size: cover;
  animation: manager-portrait-breathe 1.9s ease-in-out infinite;
}

.academy-class-copy {
  min-width: 0;
  padding-right: 28px;
}

.academy-class-copy strong,
.academy-class-copy small,
.academy-class-card > b {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-class-copy strong {
  color: #14364e;
  font-size: 0.64rem;
  font-weight: 1000;
}

.academy-class-copy small {
  color: #386070;
  font-size: 0.52rem;
  font-weight: 900;
}

.academy-class-card > b {
  grid-column: 2;
  justify-self: start;
  min-width: 58px;
  padding: 4px 7px;
  border-radius: 7px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.35);
  font-size: 0.58rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.academy-class-card:disabled {
  opacity: 1;
  filter: none;
}

.academy-class-card:disabled > b {
  color: #60717d;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.35);
}

.academy-row {
  grid-template-columns: 46px minmax(0, 1fr) 42px 66px;
  min-height: 74px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 13% 50%, rgba(84, 222, 255, 0.28), transparent 58px),
    linear-gradient(180deg, #ffffff, #dff4ff);
}

.academy-row.ready {
  border-color: rgba(255, 224, 79, 0.86);
  box-shadow: 0 0 17px rgba(255, 222, 74, 0.34);
}

.academy-row.active {
  border-color: rgba(84, 222, 255, 0.9);
  background:
    radial-gradient(circle at 14% 50%, rgba(84, 222, 255, 0.38), transparent 60px),
    linear-gradient(180deg, #eafeff, #b8e7ff);
}

.academy-row.rarity-epicki {
  background:
    radial-gradient(circle at 13% 50%, rgba(178, 107, 255, 0.34), transparent 58px),
    linear-gradient(180deg, #fbf2ff, #e3c8fb);
}

.academy-row.rarity-legendarny,
.academy-row.rarity-mityczny {
  background:
    radial-gradient(circle at 13% 50%, rgba(255, 222, 74, 0.42), transparent 62px),
    linear-gradient(180deg, #fff9cb, #efcb72);
}

.academy-row .portrait.asset-portrait {
  z-index: 1;
  width: 46px;
  height: 54px;
  border-radius: 10px;
  background-size: cover;
}

.academy-row-copy {
  min-width: 0;
}

.academy-row-copy strong em {
  color: #0a78a8;
  font-style: normal;
}

.academy-row-copy small {
  white-space: normal;
  line-height: 1.08;
}

.academy-row-art {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.5));
  animation: academy-row-bob 1.25s ease-in-out infinite;
}

.academy-row-art i {
  position: absolute;
  right: -2px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 10px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.academy-row button {
  min-width: 62px;
}

.academy-row button:disabled {
  opacity: 1;
  filter: none;
  color: #61717c;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.42);
}

.academy-row.active button:disabled {
  color: #68512a;
  background: linear-gradient(180deg, #f3e9bf, #c8ba8e);
}

.academy-row .progress-line span {
  background: linear-gradient(90deg, #54ddff, #fff06d, #55e27d);
  background-size: 180% 100%;
  animation: prestige-progress-flow 1.2s linear infinite;
}

.academy-mini {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.48));
  vertical-align: middle;
  animation: academy-row-bob 1.45s ease-in-out infinite;
}

.crew-command-panel {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px;
  overflow: hidden;
  min-height: 352px;
  padding: 8px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 233, 82, 0.52), transparent 82px),
    radial-gradient(circle at 86% 18%, rgba(89, 223, 255, 0.44), transparent 108px),
    linear-gradient(180deg, #f9fdff 0%, #bdeef8 50%, #4f9bcc 100%);
  box-shadow: 0 8px 0 rgba(13, 74, 108, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.68);
  isolation: isolate;
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.crew-command-panel::before {
  content: "";
  position: absolute;
  inset: -86px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.44), transparent, rgba(82, 222, 255, 0.5), transparent, rgba(95, 238, 132, 0.34), transparent);
  opacity: 0.74;
  mix-blend-mode: screen;
  animation: crew-command-aura 6.2s linear infinite;
}

.crew-command-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.52) 47%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.9s ease-in-out infinite;
}

.crew-command-panel > * {
  position: relative;
  z-index: 1;
}

.crew-command-hero {
  align-self: center;
  justify-self: center;
  display: block;
  width: 88px;
  height: 88px;
  background: var(--crew-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(12, 70, 102, 0.24)) drop-shadow(0 0 23px rgba(255, 224, 74, 0.64));
  animation: crew-hero-float 1.55s ease-in-out infinite;
}

.crew-command-board,
.crew-command-conveyor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--live-panel-image) center / contain no-repeat;
}

.crew-command-board {
  right: -26px;
  top: 48px;
  width: 162px;
  height: 136px;
  opacity: 0.24;
  filter: drop-shadow(0 0 22px rgba(68, 218, 255, 0.55));
  animation: live-board-scan 2.1s ease-in-out infinite;
}

.crew-command-conveyor {
  left: 2px;
  bottom: 65px;
  width: 148px;
  height: 106px;
  opacity: 0.32;
  transform: rotate(-3deg);
  filter: drop-shadow(0 6px 0 rgba(12, 70, 102, 0.14)) drop-shadow(0 0 16px rgba(255, 224, 74, 0.42));
  animation: live-conveyor-push 1.35s ease-in-out infinite;
}

.crew-command-hero i,
.crew-command-hero b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.crew-command-hero i {
  left: 18px;
  right: 16px;
  bottom: 12px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 54%, #54e0ff 0 4px, transparent 5px),
    radial-gradient(circle at 52% 30%, #ffdf45 0 5px, transparent 6px),
    radial-gradient(circle at 76% 62%, #65ec80 0 4px, transparent 5px);
  opacity: 0.7;
  filter: drop-shadow(0 0 12px rgba(255, 225, 72, 0.7));
  animation: crew-gems-rise 920ms ease-in-out infinite;
}

.crew-command-hero b {
  right: 6px;
  top: 10px;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 14px rgba(255, 226, 76, 0.82);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.crew-command-copy {
  min-width: 0;
  align-self: center;
}

.crew-command-copy small {
  display: block;
  color: #07618a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.crew-command-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 0.96rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.crew-command-copy p {
  margin: 4px 0 0;
  color: #2d5a70;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.08;
}

.crew-command-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.crew-command-stats span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 34px;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.crew-command-stats b,
.crew-command-stats em {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-command-stats b {
  color: #14364e;
  font-size: 0.7rem;
  font-weight: 1000;
}

.crew-command-stats em {
  color: #2e6175;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.crew-mini {
  grid-row: 1 / 3;
  display: block;
  width: 24px;
  height: 24px;
  background: var(--crew-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.48));
  animation: crew-mini-pop 1.45s ease-in-out infinite;
}

.crew-slot-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
}

.crew-slot-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 34px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 5px;
  min-height: 62px;
  overflow: hidden;
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  background:
    radial-gradient(circle at 13% 24%, rgba(255, 255, 255, 0.72), transparent 50px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(212, 239, 250, 0.78));
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26);
  animation: crew-slot-enter 300ms cubic-bezier(0.2, 1.15, 0.3, 1) both;
  animation-delay: calc(var(--row-index, 0) * 54ms);
}

.crew-slot-card.target-elevator {
  background:
    radial-gradient(circle at 13% 24%, rgba(255, 255, 255, 0.72), transparent 50px),
    radial-gradient(circle at 92% 30%, rgba(82, 214, 255, 0.28), transparent 70px),
    linear-gradient(180deg, rgba(234, 250, 255, 0.84), rgba(177, 225, 244, 0.82));
}

.crew-slot-card.target-warehouse {
  background:
    radial-gradient(circle at 13% 24%, rgba(255, 255, 255, 0.72), transparent 50px),
    radial-gradient(circle at 92% 30%, rgba(255, 220, 74, 0.34), transparent 70px),
    linear-gradient(180deg, rgba(255, 248, 206, 0.86), rgba(229, 235, 190, 0.82));
}

.crew-slot-card.assigned {
  border-color: rgba(101, 236, 125, 0.86);
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26), 0 0 16px rgba(101, 236, 125, 0.34);
}

.crew-slot-card.ability-ready,
.crew-slot-card.ability-active {
  border-color: rgba(255, 224, 77, 0.94);
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26), 0 0 22px rgba(255, 222, 74, 0.46);
}

.crew-slot-skill-fx {
  position: absolute;
  right: 38px;
  top: -13px;
  z-index: 0;
  width: 78px;
  height: 70px;
  pointer-events: none;
  background: var(--manager-fx-image) center / contain no-repeat;
  opacity: 0;
  transform: rotate(-6deg) scale(0.68);
  filter: drop-shadow(0 0 14px rgba(255, 224, 77, 0.72));
}

.crew-slot-card.ability-ready .crew-slot-skill-fx {
  opacity: 0.42;
  animation: crew-slot-skill-ready 1.35s ease-in-out infinite;
}

.crew-slot-card.ability-active .crew-slot-skill-fx {
  opacity: 0.72;
  animation: crew-slot-skill-active 900ms ease-in-out infinite;
}

.crew-slot-card.ability-active .crew-slot-art {
  filter:
    drop-shadow(0 5px 0 rgba(9, 70, 102, 0.18))
    drop-shadow(0 0 18px rgba(255, 224, 77, 0.88));
}

.crew-slot-art {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  background: var(--crew-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(9, 70, 102, 0.18)) drop-shadow(0 0 12px rgba(84, 221, 255, 0.38));
  animation: crew-slot-art-bob 1.32s ease-in-out infinite;
}

.crew-slot-art i {
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 230, 79, 0.56), transparent, rgba(89, 224, 255, 0.5), transparent);
  opacity: 0.62;
  animation: skill-orb-spin 2.6s linear infinite;
}

.crew-slot-worker.asset-portrait {
  width: 34px;
  height: 40px;
  border-radius: 10px;
  background-size: cover;
  animation: manager-portrait-breathe 1.8s ease-in-out infinite;
}

.crew-slot-card.empty .crew-slot-worker.asset-portrait {
  filter: saturate(0.72);
  opacity: 0.72;
}

.crew-slot-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.crew-slot-copy small,
.crew-slot-copy strong,
.crew-slot-copy em,
.crew-slot-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-slot-copy small {
  color: #08628b;
  font-size: 0.54rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.crew-slot-copy strong {
  color: #173046;
  font-size: 0.7rem;
  font-weight: 1000;
}

.crew-slot-copy em {
  color: #476a78;
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 900;
}

.crew-slot-copy b {
  justify-self: start;
  min-height: 14px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #58cbff, #167cc2);
  box-shadow: 0 2px 0 rgba(0, 58, 92, 0.32);
  font-size: 0.5rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.crew-slot-card.ability-ready .crew-slot-copy b,
.crew-slot-card.ability-active .crew-slot-copy b {
  color: #5b3207;
  background: linear-gradient(180deg, #fff275, #ff9f28);
  box-shadow: 0 2px 0 rgba(126, 67, 8, 0.35), 0 0 12px rgba(255, 223, 75, 0.62);
}

.crew-slot-progress {
  position: absolute;
  left: 58px;
  right: 68px;
  bottom: 4px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(24, 52, 70, 0.16);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.crew-slot-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54ddff, #fff06d, #65ec80);
  background-size: 180% 100%;
  box-shadow: 0 0 10px rgba(84, 221, 255, 0.6);
  animation: prestige-progress-flow 1.2s linear infinite;
}

.crew-slot-card button {
  min-width: 56px;
  min-height: 28px;
  padding: 0 4px;
  overflow: hidden;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.45), 0 0 12px rgba(255, 221, 74, 0.4);
  font-size: 0.6rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-slot-card button:disabled {
  color: #65747d;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.42);
  opacity: 1;
}

.manager-spotlight-panel {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 7px;
  min-height: 346px;
  overflow: hidden;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  color: #12364d;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 234, 89, 0.58), transparent 86px),
    radial-gradient(circle at 86% 20%, rgba(78, 220, 255, 0.46), transparent 108px),
    radial-gradient(circle at 78% 92%, rgba(180, 111, 255, 0.22), transparent 88px),
    linear-gradient(180deg, #f5fdff 0%, #c6f1ff 48%, #4ba1ce 100%);
  box-shadow: 0 8px 0 rgba(13, 74, 108, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  isolation: isolate;
  animation: drawer-row-enter 250ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.manager-spotlight-panel::before {
  content: "";
  position: absolute;
  inset: -84px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.5), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 74, 0.58), transparent, rgba(76, 222, 255, 0.54), transparent, rgba(180, 111, 255, 0.36), transparent);
  opacity: 0.74;
  mix-blend-mode: screen;
  animation: manager-spotlight-aura 6s linear infinite;
}

.manager-spotlight-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.54) 47%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-82%);
  animation: shop-card-shine 2.8s ease-in-out infinite;
}

.manager-spotlight-panel > * {
  position: relative;
  z-index: 1;
}

.manager-spotlight-frame,
.manager-spotlight-holo,
.manager-spotlight-dial,
.manager-spotlight-clock,
.manager-spotlight-actions i {
  display: block;
  background: var(--live6-image) center / contain no-repeat;
}

.manager-spotlight-frame {
  position: absolute;
  left: -28px;
  bottom: 32px;
  z-index: 0;
  width: 162px;
  height: 152px;
  opacity: 0.22;
  filter: drop-shadow(0 0 24px rgba(255, 224, 74, 0.6));
  animation: manager-spotlight-frame-glow 1.65s ease-in-out infinite;
}

.manager-spotlight-holo {
  align-self: center;
  justify-self: center;
  width: 106px;
  height: 132px;
  filter: drop-shadow(0 8px 0 rgba(7, 62, 96, 0.22)) drop-shadow(0 0 24px rgba(76, 222, 255, 0.72));
  animation: manager-spotlight-holo-float 1.5s ease-in-out infinite;
}

.manager-spotlight-holo .portrait.asset-portrait {
  position: absolute;
  left: 28px;
  top: 32px;
  width: 50px;
  height: 66px;
  border-radius: 12px;
  background-size: cover;
  box-shadow: 0 0 18px rgba(83, 229, 255, 0.72);
  animation: manager-portrait-breathe 1.25s ease-in-out infinite;
}

.manager-spotlight-holo i,
.manager-spotlight-holo b,
.manager-spotlight-dial i,
.manager-spotlight-dial b,
.manager-spotlight-clock i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.manager-spotlight-holo i {
  inset: 24px 18px 20px;
  border-radius: 22px;
  border: 2px solid rgba(83, 229, 255, 0.74);
  box-shadow: 0 0 18px rgba(83, 229, 255, 0.62), inset 0 0 18px rgba(83, 229, 255, 0.28);
  animation: academy-pod-ring 820ms ease-in-out infinite;
}

.manager-spotlight-holo b {
  right: 21px;
  top: 17px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.manager-spotlight-dial {
  position: absolute;
  right: -18px;
  top: 42px;
  z-index: 0;
  width: 128px;
  height: 110px;
  opacity: 0.48;
  filter: drop-shadow(0 0 24px rgba(76, 222, 255, 0.7));
  animation: manager-spotlight-dial-pulse 1.22s ease-in-out infinite;
}

.manager-spotlight-dial i {
  left: 36px;
  top: 32px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(255, 230, 79, 0.84);
  border-left-color: rgba(78, 222, 255, 0.92);
  box-shadow: 0 0 16px rgba(255, 222, 74, 0.72);
  animation: season-ring-spin 1.45s linear infinite;
}

.manager-spotlight-dial b {
  left: 59px;
  top: 55px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff275;
  box-shadow:
    -24px 0 0 #55dcff,
    24px 0 0 #ff8f4e,
    0 0 14px rgba(255, 226, 74, 0.8);
  animation: live4-route-blips 1s ease-in-out infinite;
}

.manager-spotlight-clock {
  position: absolute;
  right: 18px;
  top: 114px;
  z-index: 0;
  width: 82px;
  height: 82px;
  opacity: 0.36;
  filter: drop-shadow(0 0 18px rgba(84, 222, 255, 0.56));
  animation: manager-spotlight-clock-tick 1.5s ease-in-out infinite;
}

.manager-spotlight-clock i {
  left: 38px;
  top: 21px;
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: #fff06d;
  transform-origin: 50% 20px;
  box-shadow: 0 0 10px rgba(255, 226, 74, 0.78);
  animation: manager-spotlight-clock-hand 2.2s linear infinite;
}

.manager-spotlight-copy {
  min-width: 0;
  align-self: center;
  padding-right: 58px;
}

.manager-spotlight-copy small {
  display: block;
  color: #06729b;
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.manager-spotlight-copy strong {
  display: block;
  overflow: hidden;
  color: #12364d;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.54);
}

.manager-spotlight-copy p {
  max-height: 2.35em;
  overflow: hidden;
  margin: 4px 0 0;
  color: #38606f;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.12;
}

.manager-spotlight-tags,
.manager-spotlight-skill,
.manager-spotlight-progress,
.manager-spotlight-actions {
  grid-column: 1 / -1;
}

.manager-spotlight-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.manager-spotlight-tags span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 25px;
  overflow: hidden;
  padding: 0 5px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  color: #12364d;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
  font-size: 0.58rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.manager-spotlight-panel.rarity-epicki .manager-spotlight-tags span:nth-child(1),
.manager-spotlight-panel.rarity-legendarny .manager-spotlight-tags span:nth-child(1),
.manager-spotlight-panel.rarity-mityczny .manager-spotlight-tags span:nth-child(1) {
  color: #603607;
  background: linear-gradient(180deg, #fff1a1, #ffb034);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.34), 0 0 13px rgba(255, 224, 75, 0.56);
}

.manager-spotlight-skill {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(76px, 90px);
  gap: 7px;
  align-items: center;
  min-height: 64px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.manager-spotlight-skill > i {
  width: 52px;
  height: 52px;
  background: var(--manager-fx-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(9, 61, 91, 0.2)) drop-shadow(0 0 14px rgba(255, 226, 74, 0.52));
  animation: manager-spotlight-skill-fx 1.1s ease-in-out infinite;
}

.manager-spotlight-skill span {
  min-width: 0;
  text-align: left;
}

.manager-spotlight-skill b,
.manager-spotlight-skill em,
.manager-spotlight-skill strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-spotlight-skill b {
  color: #12364d;
  font-size: 0.78rem;
  font-weight: 1000;
}

.manager-spotlight-skill em {
  color: #496471;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
}

.manager-spotlight-skill strong {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.4), 0 0 13px rgba(255, 221, 74, 0.44);
  font-size: 0.58rem;
  font-weight: 1000;
}

.manager-spotlight-progress {
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.64);
  border-radius: 9px;
  background: rgba(16, 70, 101, 0.18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.manager-spotlight-progress span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.manager-spotlight-progress b,
.manager-spotlight-progress em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-spotlight-progress b {
  color: #12364d;
  font-size: 0.68rem;
  font-weight: 1000;
}

.manager-spotlight-progress em {
  color: #5c4b21;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
}

.manager-spotlight-progress i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(24, 52, 70, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

.manager-spotlight-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #52d9ff, #fff06d, #65ec80);
  background-size: 180% 100%;
  box-shadow: 0 0 10px rgba(84, 213, 255, 0.6);
  animation: prestige-progress-flow 1.1s linear infinite;
}

.manager-spotlight-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.manager-spotlight-actions button {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  overflow: hidden;
  padding: 4px 6px 4px 4px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.42), 0 0 13px rgba(255, 221, 74, 0.42);
  font-size: 0.58rem;
  font-weight: 1000;
}

.manager-spotlight-actions button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 32%, rgba(255, 255, 255, 0.5) 43%, transparent 54% 100%);
  opacity: 0;
  transform: translateX(-80%);
}

.manager-spotlight-actions button:not(:disabled)::after {
  animation: shop-card-shine 2s ease-in-out infinite;
}

.manager-spotlight-actions button.skill {
  color: #06395d;
  background: linear-gradient(180deg, #a7f4ff, #35a9ff);
  box-shadow: 0 4px 0 rgba(0, 68, 118, 0.34), 0 0 16px rgba(76, 213, 255, 0.52);
}

.manager-spotlight-actions button.level {
  color: #fff;
  background: linear-gradient(180deg, #8ee58c, #20a957);
  box-shadow: 0 4px 0 rgba(13, 94, 43, 0.42), 0 0 14px rgba(90, 226, 111, 0.42);
}

.manager-spotlight-actions button:disabled {
  color: #65747d;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.42);
  opacity: 1;
}

.manager-spotlight-actions i {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 0 rgba(20, 70, 92, 0.2));
  animation: manager-spotlight-action-bob 1.2s ease-in-out infinite;
}

.manager-spotlight-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-ops-panel {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 292px;
  overflow: hidden;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 10px;
  color: #13364d;
  background:
    radial-gradient(circle at 78% 18%, rgba(74, 222, 255, 0.45), transparent 118px),
    radial-gradient(circle at 14% 50%, rgba(255, 226, 72, 0.4), transparent 108px),
    linear-gradient(180deg, #effbff 0%, #a9def2 48%, #3a9bc2 100%);
  box-shadow: 0 8px 0 rgba(11, 79, 111, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.64);
  isolation: isolate;
}

.manager-ops-panel::before {
  content: "";
  position: absolute;
  inset: -78px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.46), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 74, 0.5), transparent, rgba(74, 222, 255, 0.44), transparent);
  opacity: 0.62;
  mix-blend-mode: screen;
  animation: manager-ops-aura 6.4s linear infinite;
}

.manager-ops-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.32) 43%, transparent 51% 100%),
    linear-gradient(180deg, transparent 0 68%, rgba(6, 56, 86, 0.16));
  opacity: 0.72;
  pointer-events: none;
}

.manager-ops-panel > * {
  position: relative;
  z-index: 1;
}

.manager-ops-desk,
.manager-ops-console,
.manager-ops-card-art,
.shop-checkout-counter,
.shop-checkout-receipt,
.shop-checkout-conveyor,
.shop-checkout-card-art,
.manager-reveal-dispatch,
.manager-reveal-receipt,
.shop-reveal-receipt {
  display: block;
  background: var(--live4-image) center / contain no-repeat;
}

.manager-ops-desk {
  position: absolute;
  right: -10px;
  top: 2px;
  width: 168px;
  height: 142px;
  filter: drop-shadow(0 9px 0 rgba(8, 65, 95, 0.18)) drop-shadow(0 0 20px rgba(78, 221, 255, 0.54));
  animation: live4-desk-float 1.75s ease-in-out infinite;
}

.manager-ops-desk i,
.manager-ops-desk b,
.manager-ops-console i {
  position: absolute;
  pointer-events: none;
}

.manager-ops-desk i {
  left: 42px;
  right: 38px;
  top: 54px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(77, 225, 255, 0.58), transparent, rgba(255, 226, 74, 0.58), transparent);
  opacity: 0.7;
  animation: skill-orb-spin 2.8s linear infinite;
}

.manager-ops-desk b {
  left: 58px;
  top: 62px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff05d;
  box-shadow:
    32px 14px 0 #52e2ff,
    52px -9px 0 #72ed88,
    13px 31px 0 #ff9944,
    0 0 16px rgba(255, 226, 74, 0.76);
  animation: live4-route-blips 1.25s ease-in-out infinite;
}

.manager-ops-console {
  position: absolute;
  left: -18px;
  top: 56px;
  width: 106px;
  height: 102px;
  opacity: 0.94;
  filter: drop-shadow(0 8px 0 rgba(8, 65, 95, 0.18)) drop-shadow(0 0 20px rgba(255, 226, 74, 0.48));
  animation: live4-console-pulse 1.18s ease-in-out infinite;
}

.manager-ops-console i {
  left: 29px;
  right: 24px;
  top: 4px;
  height: 84px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 244, 122, 0.85), rgba(80, 221, 255, 0.1));
  opacity: 0.62;
  filter: blur(1px);
  animation: live4-energy-rise 900ms ease-in-out infinite;
}

.manager-ops-worker.asset-portrait {
  position: absolute;
  right: 121px;
  top: 81px;
  width: 48px;
  height: 62px;
  border-radius: 10px;
  background-size: cover;
  box-shadow: 0 0 16px rgba(255, 231, 90, 0.58);
  animation: manager-portrait-breathe 1.45s ease-in-out infinite;
}

.manager-ops-copy {
  display: grid;
  max-width: 58%;
  min-height: 108px;
  align-content: start;
  gap: 3px;
}

.manager-ops-copy small,
.manager-ops-card-copy small,
.shop-checkout-copy small,
.shop-checkout-card-copy small {
  color: #066f99;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.manager-ops-copy strong,
.shop-checkout-copy strong {
  color: #13364d;
  font-size: 1.04rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.48);
}

.manager-ops-copy p,
.shop-checkout-copy p {
  margin: 0;
  color: #38606f;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.08;
}

.manager-ops-route {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 30px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(11, 73, 103, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.manager-ops-route i {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #51dcff, #fff05d, #66ec83);
  box-shadow: 0 0 10px rgba(82, 220, 255, 0.6);
  transform-origin: left center;
  animation: live4-route-fill 1.1s ease-in-out infinite;
}

.manager-ops-route i:nth-child(2) {
  animation-delay: 90ms;
}

.manager-ops-route i:nth-child(3) {
  animation-delay: 180ms;
}

.manager-ops-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.manager-ops-card {
  position: relative;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) 24px;
  justify-items: center;
  min-width: 0;
  min-height: 120px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  color: #12364d;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 -3px 0 rgba(9, 80, 114, 0.16);
  text-align: center;
  animation: crew-slot-enter 300ms cubic-bezier(0.2, 1.15, 0.3, 1) both;
  animation-delay: calc(var(--row-index) * 50ms);
}

.manager-ops-card.ready {
  border-color: rgba(255, 239, 112, 0.9);
  background: linear-gradient(180deg, rgba(255, 252, 205, 0.84), rgba(144, 236, 255, 0.72));
  box-shadow: inset 0 -3px 0 rgba(9, 80, 114, 0.14), 0 0 14px rgba(255, 226, 74, 0.52);
}

.manager-ops-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, 0.45) 43%, transparent 54% 100%);
  opacity: 0;
  transform: translateX(-80%);
}

.manager-ops-card.ready::before {
  animation: shop-card-shine 1.9s ease-in-out infinite;
}

.manager-ops-card > * {
  position: relative;
  z-index: 1;
}

.manager-ops-card-art {
  position: relative;
  width: 54px;
  height: 50px;
  filter: drop-shadow(0 4px 0 rgba(8, 65, 95, 0.16)) drop-shadow(0 0 12px rgba(82, 220, 255, 0.44));
  animation: live4-card-bob 1.25s ease-in-out infinite;
}

.manager-ops-card-art i,
.shop-checkout-card-art i {
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 226, 74, 0.58), transparent, rgba(82, 220, 255, 0.5), transparent);
  opacity: 0.74;
  animation: reward-aura-spin 3.2s linear infinite;
}

.manager-ops-card-copy,
.shop-checkout-card-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 2px;
}

.manager-ops-card-copy strong,
.manager-ops-card-copy em,
.shop-checkout-card-copy strong,
.shop-checkout-card-copy em {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-ops-card-copy em,
.shop-checkout-card-copy em {
  color: #51717e;
  font-size: 0.49rem;
}

.manager-ops-card > b,
.shop-checkout-card > b {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 22px;
  overflow: hidden;
  border-radius: 7px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.35);
  font-size: 0.56rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-ops-card:disabled,
.shop-checkout-card:disabled {
  cursor: default;
  filter: saturate(0.74);
  opacity: 0.82;
}

.manager-ops-card:disabled > b,
.shop-checkout-card:disabled > b {
  color: #667983;
  background: linear-gradient(180deg, #e6f2f7, #afc6d0);
}

.manager-album-panel {
  position: relative;
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 231, 82, 0.46), transparent 82px),
    radial-gradient(circle at 86% 16%, rgba(87, 218, 255, 0.38), transparent 100px),
    linear-gradient(180deg, #f7fdff 0%, #c2effa 54%, #579fcc 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.64);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.manager-album-panel::before {
  content: "";
  position: absolute;
  inset: -74px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.42), transparent, rgba(84, 222, 255, 0.48), transparent, rgba(168, 111, 255, 0.32), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 5.6s linear infinite;
}

.manager-album-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.48) 47%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.7s ease-in-out infinite;
}

.manager-album-panel > * {
  position: relative;
  z-index: 1;
}

.manager-album-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: 112px;
}

.manager-album-copy small {
  color: #07618a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.manager-album-copy strong {
  color: #12384f;
  font-size: 1.05rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.manager-album-copy p {
  margin: 0;
  color: #2d5a70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.manager-album-stats {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  gap: 5px;
}

.manager-album-stats span {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 38px;
  padding: 4px 6px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
}

.manager-album-stats b {
  color: #173046;
  font-size: 0.78rem;
  font-weight: 1000;
}

.manager-album-stats em {
  color: #2e6175;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.manager-album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding-top: 4px;
}

.manager-album-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 92px;
  padding: 5px 3px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.55), transparent 34px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(56, 155, 205, 0.34));
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26);
  animation: manager-album-pop 320ms cubic-bezier(0.2, 1.15, 0.3, 1) both;
  animation-delay: calc(var(--row-index, 0) * 42ms);
}

.manager-album-card.locked {
  filter: saturate(0.58);
  opacity: 0.72;
}

.manager-album-card.owned {
  border-color: rgba(101, 236, 125, 0.86);
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26), 0 0 14px rgba(101, 236, 125, 0.35);
}

.manager-album-card.rarity-epicki {
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26), 0 0 16px rgba(180, 111, 255, 0.44);
}

.manager-album-card.rarity-legendarny,
.manager-album-card.rarity-mityczny {
  box-shadow: 0 4px 0 rgba(0, 67, 105, 0.26), 0 0 20px rgba(255, 220, 74, 0.54);
}

.manager-album-card .portrait.asset-portrait {
  width: 54px;
  height: 56px;
  border-radius: 10px;
  background-size: cover;
  animation: manager-portrait-breathe 2.1s ease-in-out infinite;
}

.manager-album-card b,
.manager-album-card em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-album-card b {
  color: #173046;
  font-size: 0.62rem;
  font-weight: 1000;
}

.manager-album-card em {
  min-width: 26px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #5b3207;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 2px 0 rgba(126, 67, 8, 0.32);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
}

.manager-card {
  grid-template-columns: 50px minmax(0, 1fr) 72px;
  min-height: 104px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.94), transparent 42px),
    radial-gradient(circle at 92% 24%, rgba(92, 215, 255, 0.2), transparent 58px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(215, 238, 250, 0.78));
}

.manager-card.target-elevator {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.94), transparent 42px),
    radial-gradient(circle at 88% 22%, rgba(82, 214, 255, 0.3), transparent 62px),
    linear-gradient(180deg, rgba(230, 248, 255, 0.94), rgba(181, 226, 244, 0.78));
}

.manager-card.target-warehouse {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.94), transparent 42px),
    radial-gradient(circle at 88% 22%, rgba(255, 220, 74, 0.32), transparent 62px),
    linear-gradient(180deg, rgba(255, 248, 202, 0.94), rgba(225, 232, 190, 0.76));
}

.manager-card.assigned {
  border-color: rgba(101, 236, 125, 0.82);
}

.manager-card.ability-ready {
  box-shadow: 0 0 18px rgba(84, 214, 255, 0.36);
}

.manager-card.ability-active {
  border-color: rgba(255, 224, 77, 0.96);
  box-shadow: 0 0 24px rgba(255, 220, 74, 0.48);
}

.manager-card strong {
  color: #173046;
}

.manager-card strong em {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #5a3208;
  background: linear-gradient(180deg, #fff171, #ffad2d);
  font-size: 0.65rem;
  font-style: normal;
  vertical-align: 1px;
}

.manager-card small {
  white-space: normal;
  line-height: 1.1;
}

.manager-copy {
  min-width: 0;
  padding-right: 30px;
}

.manager-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.manager-badges b {
  display: inline-grid;
  place-items: center;
  min-height: 17px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #59ccff, #167cc2);
  box-shadow: 0 2px 0 rgba(0, 58, 92, 0.34);
  font-size: 0.58rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 43, 70, 0.45);
}

.manager-card.ability-active .manager-badges b:last-child,
.manager-card.ability-ready .manager-badges b:last-child {
  color: #5b3207;
  background: linear-gradient(180deg, #fff275, #ff9f28);
  box-shadow: 0 2px 0 rgba(126, 67, 8, 0.35), 0 0 12px rgba(255, 223, 75, 0.62);
}

.manager-card button,
.shop-row button,
.contract-offer-row button,
.event-objective-row button,
.event-milestone-row button,
.league-reward-row button,
.achievement-row button,
.prestige-row button {
  font-size: 0.72rem;
}

.manager-card.rarity-rzadki {
  border-color: rgba(70, 214, 255, 0.82);
  box-shadow: 0 0 14px rgba(70, 214, 255, 0.24);
}

.manager-card.rarity-epicki {
  border-color: rgba(180, 111, 255, 0.82);
  box-shadow: 0 0 18px rgba(180, 111, 255, 0.34);
}

.manager-card.rarity-legendarny,
.manager-card.rarity-mityczny {
  border-color: rgba(255, 220, 74, 0.92);
  box-shadow: 0 0 22px rgba(255, 220, 74, 0.44);
}

.manager-actions {
  display: grid;
  gap: 5px;
}

.manager-actions button {
  min-width: 70px;
  min-height: 30px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-actions .ability-button {
  color: #fff;
  background: linear-gradient(180deg, #8bdeff, #197dc1);
  box-shadow: 0 3px 0 rgba(0, 55, 88, 0.46), 0 0 12px rgba(79, 209, 255, 0.42);
}

.manager-actions .level-button {
  color: #fff;
  background: linear-gradient(180deg, #8ddf88, #22a755);
  box-shadow: 0 3px 0 rgba(13, 94, 43, 0.42), 0 0 12px rgba(90, 226, 111, 0.36);
}

.manager-actions .ability-button.active {
  color: #5b3207;
  background: linear-gradient(180deg, #fff275, #ff9f28);
  box-shadow: 0 3px 0 rgba(130, 73, 12, 0.48), 0 0 16px rgba(255, 226, 75, 0.62);
}

.manager-actions .ability-button.active:disabled {
  filter: none;
  opacity: 1;
}

.manager-skill-orb {
  position: absolute;
  right: 84px;
  top: 8px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.38), transparent 28px),
    var(--skill-image) center / 132% auto no-repeat,
    linear-gradient(180deg, #4fcfff, #157bc1);
  box-shadow: 0 3px 0 rgba(0, 52, 83, 0.35), 0 0 13px rgba(80, 209, 255, 0.34);
  pointer-events: none;
}

.manager-skill-orb i {
  position: absolute;
  inset: -5px;
  border-radius: 14px;
  background: conic-gradient(from 0deg, transparent, rgba(255, 230, 79, 0.76), transparent, rgba(89, 224, 255, 0.58), transparent);
  opacity: 0;
  z-index: -1;
}

.manager-card.ability-ready .manager-skill-orb,
.manager-card.ability-active .manager-skill-orb {
  animation: skill-orb-ready 1.05s ease-in-out infinite;
}

.manager-card.ability-ready .manager-skill-orb i,
.manager-card.ability-active .manager-skill-orb i {
  opacity: 0.9;
  animation: skill-orb-spin 2.1s linear infinite;
}

.manager-card-progress {
  position: absolute;
  left: 66px;
  right: 86px;
  bottom: 5px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(24, 52, 70, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.manager-card-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #52d9ff, #fff06d);
  box-shadow: 0 0 9px rgba(84, 213, 255, 0.58);
  animation: progress-glow 1.4s ease-in-out infinite;
}

.manager-card.rarity-epicki .manager-card-progress span {
  background: linear-gradient(90deg, #a970ff, #ff8ff2);
}

.manager-card.rarity-legendarny .manager-card-progress span,
.manager-card.rarity-mityczny .manager-card-progress span {
  background: linear-gradient(90deg, #fff06d, #ff9d28);
}

.achievement-row.complete {
  border: 2px solid rgba(255, 219, 75, 0.78);
  box-shadow: 0 0 16px rgba(255, 218, 74, 0.32);
}

.mission-row,
.achievement-row {
  min-height: 66px;
  background:
    radial-gradient(circle at 14% 50%, rgba(78, 210, 255, 0.24), transparent 56px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(224, 243, 255, 0.74));
}

.mission-row.ready,
.achievement-row.complete:not(.claimed) {
  border-color: rgba(255, 219, 75, 0.86);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.34);
}

.mission-row.claimed,
.achievement-row.claimed {
  opacity: 0.76;
}

.mission-ops-panel,
.achievement-hall-panel {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 218px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 229, 80, 0.54), transparent 84px),
    radial-gradient(circle at 86% 18%, rgba(78, 222, 255, 0.42), transparent 102px),
    linear-gradient(180deg, #f4fdff 0%, #c5f3ff 52%, #5fa8d0 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.achievement-hall-panel {
  min-height: 174px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 226, 74, 0.6), transparent 88px),
    radial-gradient(circle at 84% 20%, rgba(129, 97, 255, 0.32), transparent 104px),
    linear-gradient(180deg, #fff9d2 0%, #d7f2ff 54%, #579ed0 100%);
}

.mission-ops-panel::before,
.achievement-hall-panel::before {
  content: "";
  position: absolute;
  inset: -78px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.48), transparent, rgba(82, 222, 255, 0.5), transparent, rgba(101, 236, 128, 0.34), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 6s linear infinite;
}

.mission-ops-panel::after,
.achievement-hall-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.52) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.7s ease-in-out infinite;
}

.mission-ops-panel > *,
.achievement-hall-panel > * {
  position: relative;
  z-index: 2;
}

.mission-ops-art,
.achievement-hall-art {
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 108px;
  height: 108px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 24px rgba(255, 224, 75, 0.64));
  animation: live-meta-float 1.45s ease-in-out infinite;
}

.achievement-hall-art {
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 26px rgba(255, 224, 75, 0.78));
}

.mission-ops-art i,
.mission-ops-art b,
.achievement-hall-art i,
.achievement-hall-art b {
  position: absolute;
  pointer-events: none;
}

.mission-ops-art i,
.achievement-hall-art i {
  left: 50%;
  top: 52%;
  width: 96px;
  height: 44px;
  border: 4px solid rgba(86, 222, 255, 0.78);
  border-left-color: rgba(255, 230, 78, 0.9);
  border-right-color: rgba(255, 230, 78, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
  animation: season-ring-spin 1.65s linear infinite;
}

.mission-ops-art b,
.achievement-hall-art b {
  right: 15px;
  top: 14px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bddff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.mission-ops-trophy,
.achievement-hall-board {
  position: absolute;
  right: -14px;
  top: 6px;
  z-index: 1;
  display: block;
  width: 98px;
  height: 98px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(255, 224, 75, 0.62));
  opacity: 0.36;
  transform: rotate(5deg);
  animation: live-meta-pulse 1.55s ease-in-out infinite;
  --live-pulse-min: 0.28;
  --live-pulse-max: 0.48;
}

.mission-ops-copy,
.achievement-hall-copy {
  align-self: end;
  min-width: 0;
}

.mission-ops-copy small,
.achievement-hall-copy small {
  display: block;
  color: #075f92;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-ops-copy strong,
.achievement-hall-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1.03rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.mission-ops-copy p,
.achievement-hall-copy p {
  margin: 4px 0 0;
  color: #2d5a70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.mission-ops-progress,
.achievement-hall-progress {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.achievement-hall-progress {
  grid-column: 1 / -1;
}

.mission-ops-progress span,
.achievement-hall-progress span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #13435a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-ops-progress em,
.achievement-hall-progress em {
  color: #5b3207;
  font-style: normal;
}

.mission-ops-progress i,
.achievement-hall-progress i {
  height: 13px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(20, 72, 94, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 34, 56, 0.2);
}

.mission-ops-progress i b,
.achievement-hall-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55e1ff, #fff06d, #55e27d);
  background-size: 180% 100%;
  box-shadow: 0 0 16px rgba(84, 221, 255, 0.7);
  animation: prestige-progress-flow 1.15s linear infinite;
}

.mission-ops-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mission-ops-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.mission-ops-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.76rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-ops-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #2e6175;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mission-mini {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.56));
  vertical-align: middle;
}

.event-row {
  min-height: 62px;
  border: 2px solid rgba(255, 255, 255, 0.56);
  background:
    radial-gradient(circle at 86% 24%, rgba(255, 224, 75, 0.22), transparent 46px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(224, 243, 255, 0.72));
}

.event-row small {
  white-space: normal;
  line-height: 1.08;
}

.event-row.ready {
  border-color: rgba(255, 219, 75, 0.86);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.38);
}

.event-row.live-row {
  color: #fff;
  background:
    radial-gradient(circle at 82% 28%, rgba(94, 231, 255, 0.38), transparent 54px),
    linear-gradient(135deg, #266f9e, #2d2948 62%, #6b3e28);
  text-shadow: 0 2px 0 rgba(0, 28, 45, 0.46);
}

.event-row.live-row small {
  color: rgba(236, 251, 255, 0.92);
}

.event-row.claimed {
  opacity: 0.82;
}

.daily-streak-track {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 98px;
  overflow: hidden;
  padding: 8px 8px 8px 72px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 238, 111, 0.46), transparent 62px),
    radial-gradient(circle at 92% 18%, rgba(93, 220, 255, 0.36), transparent 58px),
    linear-gradient(180deg, rgba(255, 247, 193, 0.95), rgba(181, 228, 242, 0.82));
  box-shadow: 0 5px 0 rgba(75, 55, 23, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  animation: drawer-row-enter 180ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
  animation-delay: calc(var(--row-index, 0) * 34ms);
}

.daily-streak-chest {
  position: absolute;
  left: -2px;
  top: 12px;
  z-index: 0;
  display: block;
  width: 76px;
  height: 76px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 7px 0 rgba(91, 54, 9, 0.22)) drop-shadow(0 0 18px rgba(255, 224, 75, 0.72));
  pointer-events: none;
  animation: live-meta-float 1.35s ease-in-out infinite;
}

.daily-streak-track::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.45) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: streak-shine 2.6s ease-in-out infinite;
}

.daily-streak-track.ready {
  border-color: rgba(255, 217, 68, 0.88);
  box-shadow: 0 5px 0 rgba(113, 73, 11, 0.24), 0 0 20px rgba(255, 220, 74, 0.42);
}

.daily-streak-copy {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.daily-streak-copy strong {
  color: #173046;
  font-size: 0.82rem;
  font-weight: 1000;
}

.daily-streak-copy small {
  color: #6d4d24;
  font-size: 0.66rem;
  font-weight: 900;
}

.daily-streak-cells {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.streak-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 42px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.48), transparent 18px),
    linear-gradient(180deg, #6fcdf4, #197fc0);
  box-shadow: 0 3px 0 rgba(0, 54, 86, 0.32);
}

.streak-cell b {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0, 51, 84, 0.46);
}

.streak-cell i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fff7a4, #ffbd2d);
  box-shadow: 0 0 10px rgba(255, 221, 74, 0.7);
  transform: translate(-50%, -50%) rotate(45deg) scale(0.64);
}

.streak-cell.done {
  background:
    radial-gradient(circle at 46% 24%, rgba(255, 248, 150, 0.52), transparent 20px),
    linear-gradient(180deg, #79ed88, #1ca65b);
}

.streak-cell.active {
  border-color: rgba(255, 239, 117, 0.94);
}

.streak-cell.ready {
  animation: streak-ready 1.15s ease-in-out infinite;
}

.streak-cell.ready i {
  background: linear-gradient(135deg, #87f5ff, #32a4ff 48%, #fff070);
  animation: streak-gem 800ms ease-in-out infinite;
}

.profile-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px;
  overflow: hidden;
  min-height: 228px;
  padding: 8px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12364e;
  background:
    radial-gradient(circle at 20% 18%, rgba(86, 226, 255, 0.54), transparent 86px),
    radial-gradient(circle at 83% 24%, rgba(255, 225, 76, 0.54), transparent 104px),
    linear-gradient(180deg, #f3feff 0%, #b7f0ff 50%, #43a5d4 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.68);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.profile-hero-panel::before {
  content: "";
  position: absolute;
  inset: -76px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.38), transparent 24%),
    conic-gradient(from 20deg, transparent, rgba(74, 224, 255, 0.52), transparent, rgba(255, 224, 74, 0.5), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 6.2s linear infinite;
}

.profile-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.48) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.6s ease-in-out infinite;
}

.profile-hero-panel > * {
  position: relative;
  z-index: 1;
}

.profile-aura {
  position: absolute;
  left: 17px;
  top: 17px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 236, 83, 0.86), rgba(77, 224, 255, 0.7), rgba(255, 255, 255, 0.34), rgba(255, 236, 83, 0.86));
  filter: blur(0.4px);
  opacity: 0.75;
  animation: season-aura-spin 4.6s linear infinite;
}

.profile-hero-art {
  position: relative;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 92px;
  height: 92px;
  background: var(--profile-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 25px rgba(82, 221, 255, 0.68));
  animation: season-ticket-float 1.48s ease-in-out infinite;
}

.profile-hero-art i,
.profile-reveal-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 102px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid rgba(91, 226, 255, 0.84);
  border-left-color: rgba(255, 230, 82, 0.94);
  border-right-color: rgba(255, 230, 82, 0.94);
  transform: translate(-50%, -50%) rotate(-12deg);
  filter: drop-shadow(0 0 10px rgba(83, 223, 255, 0.72));
  animation: season-ring-spin 1.65s linear infinite;
}

.profile-hero-art b,
.profile-reveal-art b {
  position: absolute;
  right: 16px;
  top: 13px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #46ddff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.profile-hero-art i {
  width: 82px;
  height: 42px;
  border-width: 3px;
}

.profile-hero-art b {
  right: 12px;
  top: 10px;
}

.profile-copy {
  min-width: 0;
  align-self: end;
}

.profile-copy small {
  display: block;
  color: #07618a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.profile-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.profile-copy p {
  margin: 3px 0 0;
  color: #2d5d70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.profile-name-edit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.profile-name-edit span {
  grid-column: 1 / -1;
  color: #0b628d;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.profile-name-edit input {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 2px solid rgba(29, 125, 166, 0.42);
  border-radius: 8px;
  color: #14364d;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 2px 4px rgba(0, 50, 80, 0.1);
  font-size: 0.82rem;
  font-weight: 1000;
}

.profile-name-edit button,
.profile-sync-row button,
.profile-avatar-row button {
  min-height: 32px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.4);
  font-size: 0.72rem;
  font-weight: 1000;
}

.profile-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-progress span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #13435a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.profile-progress em {
  color: #5b3207;
  font-style: normal;
}

.profile-progress i {
  height: 13px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(20, 72, 94, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 34, 56, 0.2);
}

.profile-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4bdcff, #fff06d, #38df88);
  background-size: 180% 100%;
  box-shadow: 0 0 16px rgba(84, 221, 255, 0.74);
  animation: prestige-progress-flow 1.15s linear infinite;
}

.profile-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.profile-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.profile-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.78rem;
  font-weight: 1000;
  text-overflow: ellipsis;
}

.profile-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #2e6175;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-mini {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: var(--profile-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(80, 221, 255, 0.55));
  vertical-align: middle;
}

.profile-avatar-row,
.profile-sync-row {
  min-height: 70px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--avatar-color, #55dfff), transparent 62%), transparent 58px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(224, 243, 255, 0.78));
}

.profile-avatar-row.active,
.profile-sync-row.ready {
  border-color: rgba(255, 219, 75, 0.9);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.35);
}

.profile-sync-row.claimed {
  opacity: 0.82;
}

.profile-avatar-row .portrait.asset-portrait,
.profile-sync-row .portrait.asset-portrait {
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-left: -3px;
  background-size: 132% auto;
}

.profile-avatar-row.active .portrait.asset-portrait,
.profile-sync-row.ready .portrait.asset-portrait {
  animation: season-ticket-float 1s ease-in-out infinite;
}

.profile-avatar-row > span:not(.portrait),
.profile-avatar-row button,
.profile-sync-row > span:not(.portrait),
.profile-sync-row button,
.profile-sync-row .progress-line {
  z-index: 1;
}

.profile-avatar-row small,
.profile-sync-row small {
  white-space: normal;
  line-height: 1.08;
}

.profile-sync-row .progress-line span {
  background: linear-gradient(90deg, #53dcff, #fff06d, #55e27d);
  background-size: 180% 100%;
  animation: prestige-progress-flow 1.2s linear infinite;
}

.season-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 246px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  color: #13334b;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 231, 81, 0.62), transparent 82px),
    radial-gradient(circle at 86% 18%, rgba(74, 217, 255, 0.5), transparent 100px),
    linear-gradient(180deg, #effdff 0%, #a8e6f7 54%, #5aa9d0 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.season-hero-panel::before {
  content: "";
  position: absolute;
  inset: -72px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 76, 0.46), transparent, rgba(70, 221, 255, 0.5), transparent);
  opacity: 0.74;
  mix-blend-mode: screen;
  animation: season-aura-spin 6s linear infinite;
}

.season-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.48) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.9s ease-in-out infinite;
}

.season-hero-panel > * {
  position: relative;
  z-index: 1;
}

.season-hero-art {
  position: relative;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 108px;
  height: 108px;
  background: var(--season-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 25px rgba(255, 223, 74, 0.74));
  animation: season-ticket-float 1.45s ease-in-out infinite;
}

.season-hero-art i,
.season-reveal-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 230, 80, 0.82);
  border-left-color: rgba(88, 222, 255, 0.92);
  border-right-color: rgba(88, 222, 255, 0.92);
  transform: translate(-50%, -50%) rotate(-12deg);
  filter: drop-shadow(0 0 10px rgba(255, 223, 74, 0.74));
  animation: season-ring-spin 1.7s linear infinite;
}

.season-hero-art b,
.season-reveal-art b {
  position: absolute;
  right: 18px;
  top: 15px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #eaffff, #4bddff 48%, #1269d8);
  box-shadow: 0 0 12px rgba(78, 222, 255, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.season-copy {
  min-width: 0;
  align-self: end;
}

.season-copy small {
  display: block;
  color: #07618a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-copy strong {
  display: block;
  color: #12384f;
  font-size: 1.04rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.season-copy p {
  margin: 3px 0 0;
  color: #2d5a70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.season-progress {
  align-self: start;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-progress span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #13435a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-progress em {
  color: #5b3207;
  font-style: normal;
}

.season-progress i {
  height: 13px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(20, 72, 94, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 34, 56, 0.2);
}

.season-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4bdcff, #fff06d, #38df88);
  background-size: 180% 100%;
  box-shadow: 0 0 16px rgba(84, 221, 255, 0.74);
  animation: prestige-progress-flow 1.15s linear infinite;
}

.season-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.season-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.season-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.78rem;
  font-weight: 1000;
  text-overflow: ellipsis;
}

.season-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #2e6175;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.season-mini {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: var(--season-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.56));
  vertical-align: middle;
}

.season-track {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  min-height: 52px;
}

.season-track::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #46d9ff, #fff06d, #34de88);
  box-shadow: 0 0 13px rgba(87, 222, 255, 0.68);
  transform: translateY(-50%);
}

.season-node {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  background-image: var(--season-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 132% auto;
  box-shadow: 0 4px 0 rgba(0, 71, 112, 0.38), 0 0 14px rgba(84, 221, 255, 0.46);
  animation: prestige-node-bob 1.35s ease-in-out infinite;
  animation-delay: calc(var(--node, 0) * 120ms);
}

.season-node i {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 16px;
  background: conic-gradient(from 0deg, transparent, rgba(255, 230, 82, 0.76), transparent, rgba(86, 222, 255, 0.62), transparent);
  opacity: 0.72;
  animation: season-aura-spin 2.4s linear infinite;
}

.season-tier-row {
  min-height: 70px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 14% 50%, rgba(78, 210, 255, 0.28), transparent 56px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(224, 243, 255, 0.78));
}

.season-tier-row::before {
  content: "";
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 24%, rgba(255, 222, 75, 0.28), transparent 54px),
    conic-gradient(from 0deg, transparent, rgba(88, 220, 255, 0.14), transparent, rgba(255, 220, 74, 0.2), transparent);
  opacity: 0.6;
  mix-blend-mode: screen;
  animation: season-aura-spin 7s linear infinite;
}

.season-tier-row.can-claim {
  border-color: rgba(255, 219, 75, 0.88);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.36);
}

.season-tier-row.claimed {
  opacity: 0.78;
}

.season-tier-row .portrait.asset-portrait {
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-left: -3px;
  background-size: 132% auto;
}

.season-tier-row.can-claim .portrait.asset-portrait {
  animation: season-ticket-float 1s ease-in-out infinite;
}

.season-tier-row > span:not(.portrait),
.season-tier-row button,
.season-tier-row .progress-line {
  z-index: 1;
}

.season-tier-row small {
  white-space: normal;
  line-height: 1.08;
}

.season-tier-row button {
  min-width: 72px;
  font-size: 0.7rem;
}

.season-tier-row .progress-line span {
  background: linear-gradient(90deg, #53dcff, #fff06d, #55e27d);
  background-size: 180% 100%;
  animation: prestige-progress-flow 1.2s linear infinite;
}

.league-panel {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 214px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 224, 75, 0.52), transparent 84px),
    radial-gradient(circle at 82% 20%, rgba(68, 220, 255, 0.5), transparent 102px),
    linear-gradient(180deg, #f8fdff 0%, #b5efff 52%, #557bd8 100%);
  box-shadow: 0 8px 0 rgba(18, 67, 132, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.68);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.league-panel::before {
  content: "";
  position: absolute;
  inset: -72px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.48), transparent, rgba(68, 222, 255, 0.54), transparent, rgba(117, 94, 255, 0.4), transparent);
  opacity: 0.76;
  mix-blend-mode: screen;
  animation: season-aura-spin 5.4s linear infinite;
}

.league-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 47%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.55s ease-in-out infinite;
}

.league-panel > * {
  position: relative;
  z-index: 1;
}

.league-panel-art {
  position: relative;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 104px;
  height: 104px;
  background: var(--league-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(18, 66, 130, 0.22)) drop-shadow(0 0 25px rgba(255, 224, 74, 0.68));
  animation: league-trophy-float 1.35s ease-in-out infinite;
}

.league-panel-art i,
.league-reveal-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 230, 80, 0.85);
  border-left-color: rgba(77, 224, 255, 0.94);
  border-right-color: rgba(77, 224, 255, 0.94);
  transform: translate(-50%, -50%) rotate(-12deg);
  filter: drop-shadow(0 0 10px rgba(255, 223, 74, 0.74));
  animation: season-ring-spin 1.55s linear infinite;
}

.league-panel-art b,
.league-reveal-art b {
  position: absolute;
  right: 13px;
  top: 12px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #54ddff 42%, #ffd94a);
  box-shadow: 0 0 13px rgba(255, 225, 75, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 900ms ease-in-out infinite;
}

.league-copy {
  min-width: 0;
  align-self: end;
}

.league-copy small {
  display: block;
  color: #075f92;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.league-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.league-copy p {
  margin: 3px 0 0;
  color: #2d5a70;
  font-size: 0.67rem;
  font-weight: 900;
  line-height: 1.08;
}

.league-progress {
  align-self: start;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.league-progress span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  color: #13435a;
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.league-progress em {
  overflow: hidden;
  color: #5b3207;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-progress i {
  height: 13px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(20, 72, 94, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 34, 56, 0.2);
}

.league-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54ddff, #fff06d, #b76dff);
  background-size: 180% 100%;
  box-shadow: 0 0 16px rgba(84, 221, 255, 0.74);
  animation: prestige-progress-flow 1.05s linear infinite;
}

.league-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.league-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  border: 2px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.league-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.76rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #2e6175;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.league-mini {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: var(--league-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.56));
  vertical-align: middle;
}

.league-panel button {
  grid-column: 1 / -1;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff275, #ff9f28);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.38), 0 0 14px rgba(255, 222, 74, 0.55);
  font-weight: 1000;
}

.league-reward-row {
  min-height: 74px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 224, 74, 0.38), transparent 58px),
    radial-gradient(circle at 88% 18%, rgba(84, 222, 255, 0.25), transparent 68px),
    linear-gradient(180deg, rgba(255, 250, 214, 0.95), rgba(201, 231, 255, 0.82));
}

.league-reward-row.ready {
  border-color: rgba(255, 219, 75, 0.9);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.38);
}

.league-reward-row.claimed {
  opacity: 0.8;
}

.league-reward-row .portrait.asset-portrait {
  z-index: 1;
  width: 50px;
  height: 50px;
  margin-left: -3px;
  background-size: 132% auto;
}

.league-reward-row.ready .portrait.asset-portrait {
  animation: league-trophy-float 1s ease-in-out infinite;
}

.league-reward-row > span:not(.portrait),
.league-reward-row button,
.league-reward-row .progress-line {
  z-index: 1;
}

.league-reward-row small {
  white-space: normal;
  line-height: 1.08;
}

.league-reward-row .progress-line span {
  background: linear-gradient(90deg, #54ddff, #fff06d, #b76dff);
  background-size: 180% 100%;
  animation: prestige-progress-flow 1.2s linear infinite;
}

.season-leaderboard {
  display: grid;
  gap: 6px;
}

.season-rank {
  position: relative;
  display: grid;
  grid-template-columns: 30px 38px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 50px;
  overflow: hidden;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 223, 75, 0.28), transparent 48px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(213, 238, 248, 0.74));
  animation: drawer-row-enter 180ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
  animation-delay: calc(var(--row-index, 0) * 34ms);
}

.season-rank.player {
  border-color: rgba(255, 219, 75, 0.88);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 223, 75, 0.42), transparent 52px),
    linear-gradient(180deg, rgba(255, 248, 190, 0.95), rgba(157, 229, 242, 0.82));
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.34);
}

.season-rank-place {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(180deg, #44cfff, #167cc4);
  box-shadow: 0 2px 0 rgba(0, 66, 106, 0.34);
  font-size: 0.74rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 34, 54, 0.42);
}

.season-rank.player .season-rank-place {
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 2px 0 rgba(126, 67, 8, 0.42);
}

.season-rank-avatar {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: url("/assets/ui-season-badge.png") center / 138% auto no-repeat;
  box-shadow: 0 3px 0 rgba(0, 54, 86, 0.34);
}

.league-rank-avatar {
  background: var(--league-image) center / 136% auto no-repeat;
}

.season-rank-avatar.top {
  background-image: url("/assets/ui-season-trophy.png");
  animation: season-ticket-float 1.35s ease-in-out infinite;
}

.season-rank-avatar.top.league-rank-avatar {
  background-image: var(--league-image);
}

.season-rank-avatar i {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.5) 42%, transparent 62%);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateX(-45%) rotate(8deg);
  animation: portrait-shine 2.8s ease-in-out infinite;
}

.season-rank strong,
.season-rank small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-rank strong {
  color: #173046;
  font-size: 0.82rem;
  font-weight: 1000;
}

.season-rank small {
  color: #70522b;
  font-size: 0.68rem;
  font-weight: 900;
}

.season-rank em {
  display: grid;
  place-items: center;
  min-height: 24px;
  min-width: 58px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #59ccff, #167cc2);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 43, 70, 0.45);
}

.season-rank.player em {
  color: #5b3207;
  background: linear-gradient(180deg, #fff275, #ff9f28);
  text-shadow: none;
}

.event-center-panel {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 206px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 20% 18%, rgba(130, 82, 255, 0.36), transparent 86px),
    radial-gradient(circle at 84% 24%, rgba(75, 223, 255, 0.5), transparent 104px),
    linear-gradient(180deg, #f3fdff 0%, #baeefe 48%, #5b9fd4 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.event-center-panel::before {
  content: "";
  position: absolute;
  inset: -76px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.38), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(116, 93, 255, 0.42), transparent, rgba(78, 224, 255, 0.52), transparent, rgba(255, 224, 74, 0.44), transparent);
  opacity: 0.74;
  mix-blend-mode: screen;
  animation: season-aura-spin 5.4s linear infinite;
}

.event-center-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.52) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.5s ease-in-out infinite;
}

.event-center-panel > * {
  position: relative;
  z-index: 1;
}

.event-center-art {
  position: relative;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 100px;
  height: 100px;
  background: var(--event-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 25px rgba(88, 221, 255, 0.68));
  animation: event-portal-float 1.45s ease-in-out infinite;
}

.event-center-art i,
.event-reveal-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(99, 225, 255, 0.82);
  border-left-color: rgba(255, 229, 78, 0.94);
  border-right-color: rgba(175, 104, 255, 0.9);
  transform: translate(-50%, -50%) rotate(-12deg);
  filter: drop-shadow(0 0 10px rgba(93, 223, 255, 0.72));
  animation: season-ring-spin 1.6s linear infinite;
}

.event-center-art b,
.event-reveal-art b {
  position: absolute;
  right: 13px;
  top: 12px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #54ddff 42%, #b86dff);
  box-shadow: 0 0 13px rgba(90, 226, 255, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 900ms ease-in-out infinite;
}

.event-center-copy {
  min-width: 0;
  align-self: end;
}

.event-center-copy small {
  display: block;
  color: #0a638d;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.event-center-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1.05rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.event-center-copy p {
  margin: 3px 0 0;
  color: #315d72;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.event-progress {
  align-self: start;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.event-progress span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #13435a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.event-progress em {
  color: #54308b;
  font-style: normal;
}

.event-progress i {
  height: 13px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(20, 72, 94, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 34, 56, 0.2);
}

.event-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55e1ff, #b76dff, #fff06d);
  background-size: 180% 100%;
  box-shadow: 0 0 16px rgba(110, 120, 255, 0.68);
  animation: prestige-progress-flow 1.15s linear infinite;
}

.event-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.event-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.event-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.78rem;
  font-weight: 1000;
  text-overflow: ellipsis;
}

.event-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #3f5a75;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.event-mini {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--event-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(105, 224, 255, 0.55));
  vertical-align: middle;
}

.event-objective-row,
.event-milestone-row {
  min-height: 76px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 14% 50%, rgba(86, 222, 255, 0.32), transparent 58px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(223, 241, 255, 0.78));
}

.event-objective-row.ready,
.event-milestone-row.ready {
  border-color: rgba(255, 219, 75, 0.9);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.35);
}

.event-objective-row.claimed,
.event-milestone-row.claimed {
  opacity: 0.8;
}

.event-milestone-row {
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 224, 74, 0.38), transparent 58px),
    radial-gradient(circle at 88% 18%, rgba(162, 100, 255, 0.24), transparent 68px),
    linear-gradient(180deg, rgba(255, 250, 214, 0.95), rgba(201, 231, 255, 0.8));
}

.event-objective-row .portrait.asset-portrait,
.event-milestone-row .portrait.asset-portrait {
  z-index: 1;
  width: 50px;
  height: 50px;
  margin-left: -3px;
  background-size: 132% auto;
}

.event-objective-row.ready .portrait.asset-portrait,
.event-milestone-row.ready .portrait.asset-portrait {
  animation: event-portal-float 1s ease-in-out infinite;
}

.event-objective-row > span:not(.portrait),
.event-objective-row button,
.event-objective-row .progress-line,
.event-milestone-row > span:not(.portrait),
.event-milestone-row button,
.event-milestone-row .progress-line {
  z-index: 1;
}

.event-objective-row small,
.event-milestone-row small {
  white-space: normal;
  line-height: 1.08;
}

.event-objective-row .progress-line span,
.event-milestone-row .progress-line span {
  background: linear-gradient(90deg, #54ddff, #b76dff, #fff06d);
  background-size: 180% 100%;
  animation: prestige-progress-flow 1.2s linear infinite;
}

.contract-deal-panel {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 326px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 227, 77, 0.55), transparent 84px),
    radial-gradient(circle at 86% 18%, rgba(87, 219, 255, 0.46), transparent 106px),
    linear-gradient(180deg, #fff5c7 0%, #c4f1ff 50%, #479bd0 100%);
  box-shadow: 0 8px 0 rgba(93, 55, 18, 0.36), inset 0 2px 0 rgba(255, 255, 255, 0.68);
  isolation: isolate;
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.contract-deal-panel::before {
  content: "";
  position: absolute;
  inset: -86px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 225, 74, 0.54), transparent, rgba(80, 222, 255, 0.5), transparent, rgba(180, 111, 255, 0.34), transparent);
  opacity: 0.74;
  mix-blend-mode: screen;
  animation: contract-deal-aura 6s linear infinite;
}

.contract-deal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 47%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.75s ease-in-out infinite;
}

.contract-deal-panel > * {
  position: relative;
  z-index: 1;
}

.contract-deal-kiosk {
  align-self: center;
  justify-self: center;
  display: block;
  width: 96px;
  height: 96px;
  background: var(--contract2-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(91, 56, 15, 0.22)) drop-shadow(0 0 22px rgba(255, 223, 76, 0.7));
  animation: contract-kiosk-float 1.55s ease-in-out infinite;
}

.contract-deal-kiosk.live-art-contract-desk {
  width: 108px;
  height: 108px;
  margin-left: -8px;
}

.contract-deal-board {
  position: absolute;
  right: -28px;
  top: 44px;
  z-index: 0;
  width: 164px;
  height: 132px;
  pointer-events: none;
  background: var(--live-panel-image) center / contain no-repeat;
  opacity: 0.2;
  filter: drop-shadow(0 0 22px rgba(83, 224, 255, 0.48));
  animation: live-board-scan 2.25s ease-in-out infinite;
}

.contract-deal-kiosk i,
.contract-deal-kiosk b,
.contract-deal-loot i,
.contract-reveal-frame i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.contract-deal-kiosk i {
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 56%, #53e5ff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 30%, #ffdc47 0 5px, transparent 6px),
    radial-gradient(circle at 75% 60%, #f29cff 0 4px, transparent 5px);
  opacity: 0.7;
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  animation: contract-gems-rise 860ms ease-in-out infinite;
}

.contract-deal-kiosk b {
  right: 8px;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #45dfff);
  box-shadow: 0 0 12px rgba(255, 226, 76, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.contract-deal-copy {
  min-width: 0;
  align-self: center;
}

.contract-deal-copy small {
  display: block;
  color: #8a550f;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-deal-copy strong {
  display: block;
  overflow: hidden;
  color: #12364e;
  font-size: 1.05rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.contract-deal-copy p {
  margin: 4px 0 0;
  color: #386070;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.08;
}

.contract-deal-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.contract-deal-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto 30px;
  gap: 2px 6px;
  align-items: center;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  color: #12364e;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.7), transparent 58px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(211, 239, 250, 0.84));
  box-shadow: 0 4px 0 rgba(91, 56, 15, 0.28);
  text-align: left;
  animation: contract-card-deal-in 320ms cubic-bezier(0.2, 1.15, 0.3, 1) both;
  animation-delay: calc(var(--row-index, 0) * 72ms);
}

.contract-deal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.56) 46%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.4s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 150ms);
}

.contract-deal-card.ready {
  border-color: rgba(255, 224, 79, 0.94);
  box-shadow: 0 4px 0 rgba(128, 78, 13, 0.34), 0 0 18px rgba(255, 222, 74, 0.5);
}

.contract-deal-card.sold {
  filter: saturate(0.72);
  opacity: 0.82;
}

.contract-deal-card.rarity-rzadki {
  background:
    radial-gradient(circle at 18% 20%, rgba(76, 219, 255, 0.36), transparent 58px),
    linear-gradient(180deg, #f2fdff, #bce7f9);
}

.contract-deal-card.rarity-epicki {
  background:
    radial-gradient(circle at 18% 20%, rgba(184, 111, 255, 0.38), transparent 58px),
    linear-gradient(180deg, #fbf2ff, #dac2f8);
}

.contract-deal-card.rarity-legendarny,
.contract-deal-card.rarity-mityczny {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 223, 74, 0.48), transparent 60px),
    linear-gradient(180deg, #fff8cb, #eec875);
}

.contract-deal-frame {
  position: relative;
  display: grid;
  grid-row: 1 / 4;
  place-items: center;
  width: 58px;
  height: 78px;
  background: var(--contract2-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(74, 42, 20, 0.2)) drop-shadow(0 0 12px rgba(255, 224, 75, 0.42));
  animation: contract-card-frame-bob 1.35s ease-in-out infinite;
}

.contract-deal-frame .portrait.asset-portrait,
.contract-reveal-frame .portrait.asset-portrait {
  z-index: 2;
  width: 35px;
  height: 38px;
  border-radius: 8px;
  background-size: cover;
  animation: manager-portrait-breathe 1.7s ease-in-out infinite;
}

.contract-deal-frame i,
.contract-reveal-frame i {
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 230, 79, 0.58), transparent, rgba(89, 224, 255, 0.52), transparent);
  opacity: 0.62;
  animation: skill-orb-spin 2.7s linear infinite;
}

.contract-deal-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.contract-deal-text small,
.contract-deal-text strong,
.contract-deal-text em,
.contract-deal-card b {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-deal-text small {
  color: #8a550f;
  font-size: 0.52rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-deal-text strong {
  color: #12364e;
  font-size: 0.7rem;
  font-weight: 1000;
}

.contract-deal-text em {
  color: #4f6570;
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 900;
}

.contract-deal-loot {
  position: absolute;
  right: 54px;
  bottom: 6px;
  display: block;
  width: 34px;
  height: 34px;
  background: var(--contract2-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(74, 42, 20, 0.18)) drop-shadow(0 0 10px rgba(255, 224, 75, 0.5));
  animation: contract-loot-hop 1.1s ease-in-out infinite;
}

.contract-deal-loot i {
  right: -2px;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #45dfff);
  box-shadow: 0 0 11px rgba(255, 226, 76, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.contract-deal-card b {
  align-self: end;
  justify-self: end;
  min-width: 58px;
  min-height: 27px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 7px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.42), 0 0 12px rgba(255, 221, 74, 0.42);
  font-size: 0.6rem;
  font-weight: 1000;
}

.contract-deal-card:disabled b {
  color: #65747d;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.42);
}

.contract-scanner-panel {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 324px;
  padding: 8px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 225, 77, 0.58), transparent 86px),
    radial-gradient(circle at 88% 18%, rgba(77, 220, 255, 0.5), transparent 96px),
    radial-gradient(circle at 74% 92%, rgba(182, 107, 255, 0.26), transparent 86px),
    linear-gradient(180deg, #fff6c9 0%, #bdeefe 48%, #3f9dd0 100%);
  box-shadow: 0 8px 0 rgba(93, 55, 18, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.68);
  isolation: isolate;
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.contract-scanner-panel::before {
  content: "";
  position: absolute;
  inset: -82px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.44), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 225, 74, 0.54), transparent, rgba(76, 222, 255, 0.52), transparent, rgba(178, 107, 255, 0.36), transparent);
  opacity: 0.76;
  mix-blend-mode: screen;
  animation: contract-deal-aura 6s linear infinite;
}

.contract-scanner-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 47%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: shop-card-shine 3s ease-in-out infinite;
}

.contract-scanner-panel > * {
  position: relative;
  z-index: 1;
}

.contract-scanner-broker {
  align-self: center;
  justify-self: center;
  display: block;
  width: 88px;
  height: 88px;
  background: var(--live5-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(91, 56, 15, 0.23)) drop-shadow(0 0 22px rgba(255, 223, 76, 0.7));
  animation: live5-broker-float 1.55s ease-in-out infinite;
}

.contract-scanner-broker i,
.contract-scanner-broker b,
.contract-scanner-machine i,
.contract-scanner-machine b,
.contract-scanner-card-art i,
.contract-scanner-card-art b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.contract-scanner-broker i {
  left: 19px;
  bottom: 13px;
  width: 24px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 60%, #4fe4ff 0 4px, transparent 5px),
    radial-gradient(circle at 52% 32%, #ffdd4b 0 5px, transparent 6px),
    radial-gradient(circle at 80% 64%, #b66cff 0 4px, transparent 5px);
  filter: drop-shadow(0 0 9px rgba(255, 225, 75, 0.8));
  animation: contract-gems-rise 920ms ease-in-out infinite;
}

.contract-scanner-broker b {
  right: 18px;
  top: 17px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #45dfff);
  box-shadow: 0 0 12px rgba(255, 226, 76, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 960ms ease-in-out infinite;
}

.contract-scanner-machine {
  position: absolute;
  right: -11px;
  top: 50px;
  z-index: 0;
  display: block;
  width: 94px;
  height: 94px;
  background: var(--live5-image) center / contain no-repeat;
  opacity: 0.36;
  filter: drop-shadow(0 0 22px rgba(74, 222, 255, 0.7));
  animation: live5-scanner-pulse 1.4s ease-in-out infinite;
}

.contract-scanner-machine i {
  left: 21px;
  top: 45px;
  width: 53px;
  height: 4px;
  border-radius: 999px;
  background: #54e5ff;
  box-shadow: 0 0 14px rgba(84, 229, 255, 0.9);
  animation: live5-scan-beam 880ms ease-in-out infinite;
}

.contract-scanner-machine b {
  left: 39px;
  top: 18px;
  width: 16px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff1a9, #ffb334);
  box-shadow: 0 0 14px rgba(255, 226, 75, 0.8);
  transform: rotate(-8deg);
  animation: live5-contract-stamp 1.2s ease-in-out infinite;
}

.contract-scanner-podium {
  position: absolute;
  left: 2px;
  top: 76px;
  z-index: 0;
  display: block;
  width: 102px;
  height: 86px;
  background: var(--live5-image) center / contain no-repeat;
  opacity: 0.28;
  filter: drop-shadow(0 0 22px rgba(255, 224, 75, 0.58));
  animation: live5-podium-glow 1.7s ease-in-out infinite;
}

.contract-scanner-copy {
  min-width: 0;
  align-self: center;
  padding-right: 28px;
}

.contract-scanner-copy small {
  display: block;
  color: #8a550f;
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-scanner-copy strong {
  display: block;
  overflow: hidden;
  color: #12364e;
  font-size: 1.03rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.contract-scanner-copy p {
  max-height: 2.2em;
  overflow: hidden;
  margin: 4px 0 0;
  color: #386070;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.08;
}

.contract-scanner-stats,
.contract-scanner-cards {
  grid-column: 1 / -1;
}

.contract-scanner-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.contract-scanner-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.contract-scanner-stats b,
.contract-scanner-stats em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-scanner-stats b {
  color: #12364e;
  font-size: 0.78rem;
  font-weight: 1000;
}

.contract-scanner-stats em {
  color: #654615;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-scanner-stats .shop-mini {
  width: 24px;
  height: 24px;
}

.contract-scanner-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) minmax(60px, 76px);
  gap: 7px;
  align-items: center;
  min-height: 54px;
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.contract-scanner-feature .portrait {
  width: 42px;
  height: 42px;
  background-size: cover;
  filter: drop-shadow(0 4px 0 rgba(9, 61, 91, 0.22));
  animation: manager-portrait-breathe 1.6s ease-in-out infinite;
}

.contract-scanner-feature span:not(.portrait) {
  min-width: 0;
  text-align: left;
}

.contract-scanner-feature b,
.contract-scanner-feature em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-scanner-feature b {
  color: #14374d;
  font-size: 0.78rem;
  font-weight: 1000;
}

.contract-scanner-feature em {
  color: #6a4d1b;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.contract-scanner-feature strong {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 7px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.38), 0 0 14px rgba(255, 221, 74, 0.44);
  font-size: 0.62rem;
  font-weight: 1000;
}

.contract-scanner-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.contract-scanner-card {
  position: relative;
  display: grid;
  grid-template-rows: 44px minmax(22px, 1fr) 22px;
  justify-items: center;
  min-width: 0;
  min-height: 92px;
  overflow: hidden;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 9px;
  color: #12364e;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 255, 255, 0.74), transparent 58px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(211, 239, 250, 0.84));
  box-shadow: 0 4px 0 rgba(91, 56, 15, 0.28);
  text-align: center;
  animation: live5-card-in 320ms cubic-bezier(0.2, 1.15, 0.3, 1) both;
  animation-delay: calc(var(--row-index, 0) * 78ms);
}

.contract-scanner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.55) 46%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-82%);
  animation: shop-card-shine 2.45s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 160ms);
}

.contract-scanner-card.ready {
  border-color: rgba(255, 224, 79, 0.94);
  box-shadow: 0 4px 0 rgba(128, 78, 13, 0.34), 0 0 18px rgba(255, 222, 74, 0.5);
}

.contract-scanner-card.sold,
.contract-scanner-card:disabled {
  filter: saturate(0.78);
}

.contract-scanner-card.rarity-rzadki {
  background:
    radial-gradient(circle at 50% 17%, rgba(76, 219, 255, 0.38), transparent 58px),
    linear-gradient(180deg, #f2fdff, #bce7f9);
}

.contract-scanner-card.rarity-epicki {
  background:
    radial-gradient(circle at 50% 17%, rgba(184, 111, 255, 0.4), transparent 58px),
    linear-gradient(180deg, #fbf2ff, #dac2f8);
}

.contract-scanner-card.rarity-legendarny,
.contract-scanner-card.rarity-mityczny {
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 223, 74, 0.52), transparent 62px),
    linear-gradient(180deg, #fff8cb, #eec875);
}

.contract-scanner-card-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 42px;
  background: var(--live5-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(74, 42, 20, 0.18)) drop-shadow(0 0 14px rgba(255, 224, 75, 0.44));
  animation: live5-card-hover 1.32s ease-in-out infinite;
}

.contract-scanner-card-art i {
  left: 50%;
  top: 50%;
  width: 36px;
  height: 18px;
  border: 3px solid rgba(255, 227, 77, 0.82);
  border-left-color: rgba(78, 222, 255, 0.92);
  border-right-color: rgba(78, 222, 255, 0.92);
  border-radius: 50%;
  filter: drop-shadow(0 0 9px rgba(255, 222, 74, 0.72));
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: season-ring-spin 1.65s linear infinite;
}

.contract-scanner-card-art b {
  right: 7px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #45dfff);
  box-shadow: 0 0 10px rgba(255, 226, 76, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.contract-scanner-card .portrait {
  position: absolute;
  left: 50%;
  top: 32px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background-size: cover;
  transform: translateX(-50%);
  box-shadow: 0 4px 0 rgba(0, 54, 86, 0.26), 0 0 14px rgba(255, 224, 75, 0.45);
  animation: manager-portrait-breathe 1.7s ease-in-out infinite;
}

.contract-scanner-card-copy {
  display: grid;
  align-self: end;
  gap: 1px;
  min-width: 0;
  padding-top: 3px;
}

.contract-scanner-card-copy small,
.contract-scanner-card-copy strong,
.contract-scanner-card-copy em,
.contract-scanner-card > b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-scanner-card-copy small {
  color: #8a550f;
  font-size: 0.5rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-scanner-card-copy strong {
  color: #12364e;
  font-size: 0.6rem;
  font-weight: 1000;
}

.contract-scanner-card-copy em {
  color: #4f6570;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 900;
}

.contract-scanner-card > b {
  align-self: end;
  min-width: 60px;
  min-height: 21px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 7px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.42), 0 0 12px rgba(255, 221, 74, 0.42);
  font-size: 0.5rem;
  font-weight: 1000;
}

.contract-scanner-card:disabled > b {
  color: #65747d;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.42);
}

.contract-market-panel {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 168px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  color: #173046;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 224, 77, 0.52), transparent 78px),
    radial-gradient(circle at 84% 18%, rgba(88, 222, 255, 0.46), transparent 94px),
    linear-gradient(180deg, #fff7c8 0%, #bfeeff 54%, #4fa1d0 100%);
  box-shadow: 0 8px 0 rgba(83, 45, 21, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.contract-market-panel::before {
  content: "";
  position: absolute;
  inset: -74px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 225, 74, 0.5), transparent, rgba(81, 220, 255, 0.48), transparent);
  opacity: 0.68;
  mix-blend-mode: screen;
  animation: season-aura-spin 6s linear infinite;
}

.contract-market-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.5) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.7s ease-in-out infinite;
}

.contract-market-panel > * {
  position: relative;
  z-index: 1;
}

.contract-market-art {
  position: relative;
  align-self: center;
  justify-self: center;
  display: block;
  width: 92px;
  height: 92px;
  background: var(--contract-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(83, 45, 21, 0.22)) drop-shadow(0 0 20px rgba(255, 223, 76, 0.66));
  animation: season-ticket-float 1.45s ease-in-out infinite;
}

.contract-market-art i,
.contract-reveal-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 45px;
  border: 4px solid rgba(255, 227, 77, 0.84);
  border-left-color: rgba(78, 222, 255, 0.92);
  border-right-color: rgba(78, 222, 255, 0.92);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(255, 222, 74, 0.72));
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: season-ring-spin 1.7s linear infinite;
}

.contract-market-art b,
.contract-reveal-art b {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.contract-market-copy {
  min-width: 0;
  align-self: center;
}

.contract-market-copy small {
  display: block;
  color: #8b540b;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-market-copy strong {
  display: block;
  overflow: hidden;
  color: #15364e;
  font-size: 1.05rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.contract-market-copy p {
  margin: 3px 0 0;
  color: #386070;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.contract-market-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.contract-market-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.contract-market-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.78rem;
  font-weight: 1000;
  text-overflow: ellipsis;
}

.contract-market-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #654615;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.contract-mini {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--contract-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.5));
  vertical-align: middle;
}

.contract-offer-row {
  min-height: 78px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 225, 74, 0.32), transparent 58px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(228, 242, 255, 0.78));
}

.contract-offer-row.ready {
  border-color: rgba(255, 219, 75, 0.88);
  box-shadow: 0 0 18px rgba(255, 218, 74, 0.34);
}

.contract-offer-row.sold {
  opacity: 0.78;
}

.contract-offer-row.rarity-rzadki {
  background:
    radial-gradient(circle at 14% 50%, rgba(79, 218, 255, 0.34), transparent 58px),
    linear-gradient(180deg, rgba(232, 249, 255, 0.94), rgba(188, 228, 248, 0.78));
}

.contract-offer-row.rarity-epicki {
  background:
    radial-gradient(circle at 14% 50%, rgba(178, 107, 255, 0.34), transparent 58px),
    linear-gradient(180deg, rgba(247, 236, 255, 0.94), rgba(219, 191, 248, 0.78));
}

.contract-offer-row.rarity-legendarny {
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 219, 74, 0.44), transparent 62px),
    linear-gradient(180deg, rgba(255, 247, 192, 0.96), rgba(236, 199, 102, 0.82));
}

.contract-offer-row .portrait.asset-portrait {
  z-index: 1;
  width: 50px;
  height: 50px;
  margin-left: -3px;
  background-size: 132% auto;
}

.contract-offer-row.ready .portrait.asset-portrait {
  animation: season-ticket-float 1s ease-in-out infinite;
}

.contract-offer-row > span:not(.portrait),
.contract-offer-row button,
.contract-offer-row .progress-line {
  z-index: 1;
}

.contract-offer-row small {
  white-space: normal;
  line-height: 1.08;
}

.contract-tag {
  display: inline-grid;
  place-items: center;
  min-height: 17px;
  width: max-content;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #62d5ff, #1682c8);
  box-shadow: 0 2px 0 rgba(0, 57, 91, 0.34);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 47, 75, 0.45);
}

.contract-offer-row .progress-line span {
  background: linear-gradient(90deg, #53dcff, #fff06d, #55e27d);
  background-size: 180% 100%;
  animation: prestige-progress-flow 1.2s linear infinite;
}

.premium-store-panel {
  position: relative;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 306px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 10px;
  color: #12354d;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 226, 77, 0.58), transparent 88px),
    radial-gradient(circle at 84% 20%, rgba(76, 220, 255, 0.48), transparent 104px),
    linear-gradient(180deg, #fff6bf 0%, #bff4ff 48%, #3997ce 100%);
  box-shadow: 0 8px 0 rgba(92, 55, 19, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.premium-store-panel::before {
  content: "";
  position: absolute;
  inset: -78px;
  z-index: 0;
  background:
    radial-gradient(circle at 52% 52%, rgba(255, 255, 255, 0.42), transparent 24%),
    conic-gradient(from 0deg, transparent, rgba(255, 225, 75, 0.58), transparent, rgba(78, 221, 255, 0.48), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: shop-showcase-aura 5.8s linear infinite;
}

.premium-store-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.52) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 2.65s ease-in-out infinite;
}

.premium-store-panel > * {
  position: relative;
  z-index: 1;
}

.premium-store-hero {
  align-self: center;
  justify-self: center;
  display: block;
  width: 108px;
  height: 108px;
  background: var(--premium-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(78, 42, 18, 0.24)) drop-shadow(0 0 22px rgba(255, 224, 75, 0.72));
  animation: shop-showcase-float 1.55s ease-in-out infinite;
}

.premium-store-hero.live-art-premium-vault {
  width: 94px;
  height: 94px;
  margin-left: -6px;
}

.premium-store-machine {
  position: absolute;
  right: -28px;
  top: 36px;
  z-index: 0;
  width: 172px;
  height: 142px;
  pointer-events: none;
  background: var(--live-panel-image) center / contain no-repeat;
  opacity: 0.26;
  filter: drop-shadow(0 0 24px rgba(79, 224, 255, 0.48));
  animation: premium-machine-idle 1.65s ease-in-out infinite;
}

.premium-store-hero i,
.premium-store-hero b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.premium-store-hero i {
  left: 10px;
  right: 8px;
  bottom: 8px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 56%, #53e5ff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 30%, #ffdc47 0 5px, transparent 6px),
    radial-gradient(circle at 75% 60%, #f29cff 0 4px, transparent 5px);
  opacity: 0.7;
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  animation: shop-showcase-gems 820ms ease-in-out infinite;
}

.premium-store-hero b {
  right: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 12px rgba(255, 226, 76, 0.82);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.premium-store-copy {
  align-self: center;
  min-width: 0;
}

.premium-store-copy small,
.premium-store-stats em {
  color: #8a550f;
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.premium-store-copy strong {
  display: block;
  overflow: hidden;
  color: #12364e;
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.premium-store-copy p {
  margin: 4px 0 0;
  color: #386070;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.premium-store-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.premium-store-stats span {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 58px;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.premium-store-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #14374f;
  font-size: 0.75rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-mini {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--premium-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.54));
  animation: shop-product-bounce 1.35s ease-in-out infinite;
}

.premium-core-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 72px;
  gap: 7px;
  align-items: center;
  min-height: 72px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 50%, rgba(80, 224, 255, 0.32), transparent 56px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(194, 238, 255, 0.7));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48), 0 0 18px rgba(86, 222, 255, 0.22);
}

.premium-core-art {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  background: var(--premium-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 16px rgba(86, 222, 255, 0.66));
  animation: premium-core-pulse 1.35s ease-in-out infinite;
}

.premium-core-art i {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 235, 86, 0.64), transparent, rgba(80, 220, 255, 0.6), transparent);
  animation: reward-aura-spin 2.7s linear infinite;
}

.premium-core-copy {
  min-width: 0;
}

.premium-core-copy strong,
.premium-core-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-core-copy strong {
  color: #14364e;
  font-size: 0.82rem;
  font-weight: 1000;
}

.premium-core-copy small {
  color: #70522b;
  font-size: 0.62rem;
  font-weight: 900;
}

.premium-progress {
  display: block;
  height: 8px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(28, 69, 88, 0.2);
  box-shadow: inset 0 2px 2px rgba(2, 24, 39, 0.22);
}

.premium-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54ddff, #fff06d, #55e27d);
  background-size: 180% 100%;
  box-shadow: 0 0 12px rgba(84, 221, 255, 0.68);
  animation: prestige-progress-flow 1.2s linear infinite;
}

.premium-core-row button {
  min-width: 68px;
  min-height: 36px;
}

.premium-bundle-row {
  grid-template-columns: 52px minmax(0, 1fr) 28px 72px;
  min-height: 74px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.64);
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 224, 75, 0.38), transparent 62px),
    radial-gradient(circle at 86% 18%, rgba(75, 222, 255, 0.24), transparent 70px),
    linear-gradient(180deg, rgba(255, 251, 220, 0.96), rgba(201, 236, 255, 0.84));
  animation-delay: calc(var(--row-index, 0) * 36ms);
}

.premium-bundle-row.ready {
  border-color: rgba(255, 224, 79, 0.92);
  box-shadow: 0 0 18px rgba(255, 222, 74, 0.38);
}

.premium-bundle-row .portrait.asset-portrait {
  z-index: 1;
  width: 52px;
  height: 52px;
  margin-left: -4px;
  background-size: 132% auto;
  filter: drop-shadow(0 4px 0 rgba(74, 42, 20, 0.2)) drop-shadow(0 0 14px rgba(255, 224, 75, 0.52));
  animation: shop-product-bounce 1.3s ease-in-out infinite;
}

.premium-bundle-copy {
  z-index: 1;
  min-width: 0;
}

.premium-bundle-copy small {
  white-space: normal;
  line-height: 1.08;
}

.premium-server-pill {
  display: inline-grid;
  grid-template-columns: 18px auto;
  gap: 3px;
  align-items: center;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #33b4f0, #1377b7);
  box-shadow: 0 2px 0 rgba(0, 58, 90, 0.34);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.premium-server-pill .premium-mini {
  width: 17px;
  height: 17px;
}

.premium-bundle-glow {
  z-index: 1;
  display: block;
  width: 24px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 20%, #fff 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(84, 224, 255, 0.95), rgba(255, 224, 75, 0.48));
  filter: drop-shadow(0 0 12px rgba(84, 224, 255, 0.64));
  animation: premium-token-rise 1.05s ease-in-out infinite;
}

.premium-bundle-row button {
  z-index: 1;
  min-width: 70px;
  font-size: 0.68rem;
}

.shop-checkout-panel {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 316px;
  overflow: hidden;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 10px;
  color: #12354d;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 230, 80, 0.58), transparent 92px),
    radial-gradient(circle at 85% 22%, rgba(78, 221, 255, 0.44), transparent 122px),
    linear-gradient(180deg, #fff9c7 0%, #bff5ff 48%, #35a0cf 100%);
  box-shadow: 0 8px 0 rgba(92, 55, 19, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  isolation: isolate;
}

.shop-checkout-panel::before {
  content: "";
  position: absolute;
  inset: -82px;
  z-index: 0;
  background:
    radial-gradient(circle at 46% 46%, rgba(255, 255, 255, 0.42), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 74, 0.56), transparent, rgba(84, 222, 255, 0.44), transparent);
  opacity: 0.68;
  mix-blend-mode: screen;
  animation: manager-ops-aura 6s linear infinite;
}

.shop-checkout-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.34) 44%, transparent 54% 100%),
    linear-gradient(180deg, transparent 0 69%, rgba(92, 56, 18, 0.15));
  opacity: 0.76;
}

.shop-checkout-panel > * {
  position: relative;
  z-index: 1;
}

.shop-checkout-counter {
  position: absolute;
  left: -12px;
  top: 4px;
  width: 156px;
  height: 140px;
  filter: drop-shadow(0 8px 0 rgba(91, 50, 18, 0.2)) drop-shadow(0 0 22px rgba(255, 226, 74, 0.62));
  animation: live4-desk-float 1.8s ease-in-out infinite;
}

.shop-checkout-counter i,
.shop-checkout-counter b {
  position: absolute;
  pointer-events: none;
}

.shop-checkout-counter i {
  left: 61px;
  top: 47px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 60%, #fff06d 0 5px, transparent 6px),
    radial-gradient(circle at 62% 34%, #5be7ff 0 6px, transparent 7px),
    radial-gradient(circle at 74% 72%, #f79cff 0 4px, transparent 5px);
  opacity: 0.82;
  filter: drop-shadow(0 0 12px rgba(255, 226, 74, 0.78));
  animation: live4-register-gems 920ms ease-in-out infinite;
}

.shop-checkout-counter b {
  left: 43px;
  right: 28px;
  top: 31px;
  height: 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(82, 225, 255, 0.7), rgba(35, 124, 178, 0.28));
  box-shadow: 0 0 16px rgba(82, 225, 255, 0.55);
  animation: live4-scan-line 1.18s ease-in-out infinite;
}

.shop-checkout-receipt {
  position: absolute;
  right: -4px;
  top: 8px;
  width: 88px;
  height: 86px;
  opacity: 0.96;
  filter: drop-shadow(0 6px 0 rgba(91, 50, 18, 0.16)) drop-shadow(0 0 16px rgba(82, 225, 255, 0.45));
  animation: live4-receipt-stamp 1.28s ease-in-out infinite;
}

.shop-checkout-conveyor {
  position: absolute;
  right: 0;
  top: 76px;
  width: 124px;
  height: 110px;
  filter: drop-shadow(0 7px 0 rgba(91, 50, 18, 0.2)) drop-shadow(0 0 20px rgba(255, 226, 74, 0.55));
  animation: live4-conveyor-roll 1.45s ease-in-out infinite;
}

.shop-checkout-copy {
  display: grid;
  max-width: 58%;
  min-height: 118px;
  margin-left: 128px;
  align-content: start;
  gap: 3px;
}

.shop-checkout-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}

.shop-checkout-stats span {
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 -3px 0 rgba(9, 80, 114, 0.14);
}

.shop-checkout-stats b,
.shop-checkout-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #14374f;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-checkout-stats em {
  color: #71551b;
  font-size: 0.5rem;
  text-transform: uppercase;
}

.shop-checkout-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.shop-checkout-card {
  position: relative;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) 24px;
  justify-items: center;
  min-width: 0;
  min-height: 120px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  color: #12364d;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 -3px 0 rgba(128, 72, 12, 0.16);
  text-align: center;
  animation: shop-card-in 280ms cubic-bezier(0.2, 1.1, 0.28, 1) both;
  animation-delay: calc(var(--row-index) * 55ms);
}

.shop-checkout-card.ready {
  border-color: rgba(255, 239, 112, 0.9);
  background: linear-gradient(180deg, rgba(255, 252, 205, 0.86), rgba(128, 230, 255, 0.68));
  box-shadow: inset 0 -3px 0 rgba(128, 72, 12, 0.14), 0 0 14px rgba(255, 226, 74, 0.52);
}

.shop-checkout-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, 0.46) 43%, transparent 54% 100%);
  opacity: 0;
  transform: translateX(-80%);
}

.shop-checkout-card.ready::before {
  animation: shop-card-shine 1.8s ease-in-out infinite;
}

.shop-checkout-card > * {
  position: relative;
  z-index: 1;
}

.shop-checkout-card-art {
  position: relative;
  width: 56px;
  height: 50px;
  filter: drop-shadow(0 4px 0 rgba(91, 50, 18, 0.16)) drop-shadow(0 0 12px rgba(255, 226, 74, 0.48));
  animation: live4-card-bob 1.25s ease-in-out infinite;
}

.shop-showcase-panel {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 296px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #13354d;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 225, 74, 0.5), transparent 82px),
    radial-gradient(circle at 86% 16%, rgba(73, 216, 255, 0.42), transparent 96px),
    linear-gradient(180deg, #fff8c9 0%, #c8f0ff 48%, #4ea1d1 100%);
  box-shadow: 0 8px 0 rgba(91, 54, 20, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.shop-showcase-panel::before {
  content: "";
  position: absolute;
  inset: -76px;
  z-index: 0;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.35) 48%, transparent 55% 100%),
    conic-gradient(from 0deg, transparent, rgba(255, 225, 74, 0.48), transparent, rgba(80, 222, 255, 0.42), transparent);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: shop-showcase-aura 6.4s linear infinite;
}

.shop-showcase-panel::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 145px;
  z-index: 0;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #87532a, #4e2b18);
  box-shadow: 0 6px 0 rgba(47, 24, 12, 0.34), inset 0 2px 0 rgba(255, 220, 140, 0.24);
}

.shop-showcase-panel > * {
  position: relative;
  z-index: 1;
}

.shop-showcase-merchant {
  align-self: center;
  justify-self: center;
  display: block;
  width: 104px;
  height: 104px;
  background: var(--shop-premium-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(78, 42, 18, 0.24)) drop-shadow(0 0 20px rgba(255, 224, 75, 0.66));
  animation: shop-showcase-float 1.7s ease-in-out infinite;
}

.shop-showcase-merchant.live-art-shop-merchant {
  width: 112px;
  height: 112px;
  margin-left: -6px;
}

.shop-showcase-counter {
  position: absolute;
  left: 6px;
  bottom: 102px;
  z-index: 0;
  width: 154px;
  height: 94px;
  pointer-events: none;
  background: var(--live-panel-image) center / contain no-repeat;
  opacity: 0.24;
  transform: rotate(-2deg);
  filter: drop-shadow(0 5px 0 rgba(64, 35, 15, 0.13)) drop-shadow(0 0 14px rgba(255, 224, 75, 0.46));
  animation: live-conveyor-push 1.45s ease-in-out infinite;
}

.shop-showcase-merchant i,
.shop-showcase-merchant b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.shop-showcase-merchant i {
  left: 5px;
  right: 7px;
  bottom: 9px;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 21% 48%, #51dfff 0 4px, transparent 5px),
    radial-gradient(circle at 47% 34%, #ffdb4a 0 5px, transparent 6px),
    radial-gradient(circle at 71% 56%, #73f083 0 4px, transparent 5px);
  filter: drop-shadow(0 0 9px rgba(255, 226, 78, 0.72));
  animation: shop-showcase-gems 900ms ease-in-out infinite;
}

.shop-showcase-merchant b {
  right: 8px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #45dfff);
  box-shadow: 0 0 12px rgba(255, 226, 76, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.shop-showcase-copy {
  min-width: 0;
  align-self: center;
}

.shop-showcase-copy small {
  display: block;
  color: #8a550f;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.shop-showcase-copy strong {
  display: block;
  overflow: hidden;
  color: #12364e;
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.shop-showcase-copy p {
  margin: 4px 0 0;
  color: #386070;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.shop-showcase-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.shop-showcase-stats span {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 58px;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.shop-showcase-stats b,
.shop-showcase-stats em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-showcase-stats b {
  color: #14374f;
  font-size: 0.76rem;
  font-weight: 1000;
}

.shop-showcase-stats em {
  color: #684a17;
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.shop-showcase-shelf {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  padding: 7px;
  border-radius: 10px;
  background: rgba(16, 84, 120, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), inset 0 -3px 0 rgba(27, 91, 126, 0.18);
}

.shop-showcase-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 2px 6px;
  align-items: center;
  justify-items: start;
  min-width: 0;
  min-height: 62px;
  overflow: hidden;
  padding: 5px 7px 6px 5px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  color: #13354d;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(214, 244, 255, 0.92));
  box-shadow: 0 4px 0 rgba(22, 79, 104, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.62), 0 0 0 1px rgba(29, 94, 130, 0.12);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: shop-card-in 280ms cubic-bezier(0.2, 1.1, 0.28, 1) both;
  animation-delay: calc(var(--row-index, 0) * 70ms);
}

.shop-showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.55) 46%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.4s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 120ms);
}

.shop-showcase-card.ready {
  border-color: rgba(255, 224, 79, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 246, 0.99), rgba(218, 249, 255, 0.94));
  box-shadow: 0 4px 0 rgba(128, 78, 13, 0.34), 0 0 17px rgba(255, 222, 74, 0.46);
}

.shop-card-purchase-fx {
  position: absolute;
  right: -15px;
  bottom: -18px;
  z-index: 0;
  width: 78px;
  height: 64px;
  pointer-events: none;
  background: var(--manager-fx-image) center / contain no-repeat;
  opacity: 0;
  transform: translateY(8px) scale(0.58) rotate(7deg);
  filter: drop-shadow(0 0 14px rgba(255, 224, 77, 0.68));
}

.shop-showcase-card.ready .shop-card-purchase-fx,
.chest-pack-card.ready .shop-card-purchase-fx {
  opacity: 0.44;
  animation: shop-purchase-card-pulse 1.55s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 100ms);
}

.shop-showcase-card.ready:hover .shop-card-purchase-fx,
.chest-pack-card.ready:hover .shop-card-purchase-fx {
  opacity: 0.76;
  transform: translateY(0) scale(0.72) rotate(4deg);
}

.shop-showcase-card > * {
  position: relative;
  z-index: 1;
}

.shop-showcase-card > .shop-card-purchase-fx,
.chest-pack-card > .shop-card-purchase-fx {
  position: absolute;
  z-index: 0;
}

.chest-pack-ramp {
  position: absolute;
  right: 58px;
  bottom: -14px;
  z-index: 0;
  width: 92px;
  height: 70px;
  background: var(--live7-image) center / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255, 224, 75, 0.46));
  animation: live7-ramp-pour 1.4s ease-in-out infinite;
}

.chest-pack-card.ready .chest-pack-ramp {
  opacity: 0.36;
}

.shop-showcase-card.type-booster {
  background:
    radial-gradient(circle at 20% 50%, rgba(81, 220, 255, 0.32), transparent 54px),
    linear-gradient(180deg, rgba(239, 252, 255, 0.98), rgba(179, 229, 255, 0.88));
}

.shop-showcase-card.type-manager_chest {
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 221, 76, 0.42), transparent 54px),
    linear-gradient(180deg, rgba(255, 249, 202, 0.98), rgba(239, 190, 90, 0.88));
}

.shop-showcase-card.type-offline_cap {
  background:
    radial-gradient(circle at 20% 50%, rgba(75, 220, 255, 0.28), transparent 54px),
    linear-gradient(180deg, rgba(239, 251, 255, 0.98), rgba(188, 216, 255, 0.88));
}

.shop-showcase-card.type-shaft {
  background:
    radial-gradient(circle at 20% 50%, rgba(107, 240, 134, 0.3), transparent 54px),
    linear-gradient(180deg, rgba(237, 255, 237, 0.98), rgba(145, 226, 169, 0.84));
}

.shop-showcase-art {
  position: relative;
  display: block;
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  background: var(--shop-premium-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(74, 42, 20, 0.2)) drop-shadow(0 0 10px rgba(255, 224, 75, 0.48));
  animation: shop-product-bounce 1.35s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 90ms);
}

.shop-showcase-art i {
  position: absolute;
  right: -3px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 11px rgba(255, 226, 76, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 980ms ease-in-out infinite;
}

.shop-showcase-card b,
.shop-showcase-card em {
  max-width: 100%;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-showcase-card b {
  align-self: end;
  color: #10374f;
  font-size: 0.72rem;
  font-weight: 1000;
}

.shop-showcase-card em {
  align-self: start;
  color: #684a17;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
}

.shop-mini {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--shop-premium-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.5));
  vertical-align: middle;
  animation: shop-mini-pop 1.4s ease-in-out infinite;
}

.shop-utility-panel {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 256px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 18%, rgba(83, 226, 255, 0.52), transparent 86px),
    radial-gradient(circle at 84% 22%, rgba(255, 226, 75, 0.48), transparent 104px),
    linear-gradient(180deg, #f3fdff 0%, #c8f3ff 50%, #4e9ccd 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.shop-utility-panel::before {
  content: "";
  position: absolute;
  inset: -78px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(83, 223, 255, 0.5), transparent, rgba(255, 226, 75, 0.5), transparent, rgba(101, 236, 128, 0.32), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 5.6s linear infinite;
}

.shop-utility-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.52) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.55s ease-in-out infinite;
}

.shop-utility-panel > * {
  position: relative;
  z-index: 2;
}

.boost-reactor-panel {
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 386px;
  scroll-margin-top: 58px;
  background:
    radial-gradient(circle at 19% 20%, rgba(83, 226, 255, 0.7), transparent 96px),
    radial-gradient(circle at 82% 24%, rgba(255, 226, 75, 0.6), transparent 112px),
    radial-gradient(circle at 78% 86%, rgba(100, 236, 128, 0.28), transparent 116px),
    linear-gradient(180deg, #eefdff 0%, #b4ecff 45%, #2f88bd 100%);
}

.shop-utility-art {
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 108px;
  height: 108px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 24px rgba(80, 222, 255, 0.7));
  animation: live-boost-machine 1.28s ease-in-out infinite;
}

.boost-reactor-panel .shop-utility-art {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 8px 0 rgba(10, 67, 103, 0.22)) drop-shadow(0 0 30px rgba(80, 222, 255, 0.82));
  animation: live8-reactor-pulse 1.08s ease-in-out infinite;
}

.shop-utility-art i,
.shop-utility-art b {
  position: absolute;
  pointer-events: none;
}

.shop-utility-art i {
  left: 50%;
  top: 52%;
  width: 96px;
  height: 44px;
  border: 4px solid rgba(86, 222, 255, 0.78);
  border-left-color: rgba(255, 230, 78, 0.9);
  border-right-color: rgba(255, 230, 78, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
  animation: season-ring-spin 1.4s linear infinite;
}

.shop-utility-art b {
  right: 13px;
  top: 14px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bddff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 840ms ease-in-out infinite;
}

.shop-utility-vault,
.shop-utility-drill {
  position: absolute;
  display: block;
  background: var(--live-panel-image) center / contain no-repeat;
  pointer-events: none;
}

.shop-utility-vault {
  right: -18px;
  top: 3px;
  z-index: 1;
  width: 98px;
  height: 98px;
  filter: drop-shadow(0 0 20px rgba(255, 224, 75, 0.58));
  opacity: 0.34;
  transform: rotate(3deg);
  animation: live-meta-pulse 1.6s ease-in-out infinite;
  --live-pulse-min: 0.28;
  --live-pulse-max: 0.48;
}

.shop-utility-drill {
  right: -22px;
  bottom: 42px;
  z-index: 1;
  width: 106px;
  height: 106px;
  filter: drop-shadow(0 0 18px rgba(255, 224, 75, 0.58));
  opacity: 0.36;
  transform: rotate(-4deg);
  animation: live-drill-rumble 820ms ease-in-out infinite;
}

.boost-reactor-timer,
.boost-reactor-conduit {
  position: absolute;
  display: block;
  pointer-events: none;
  background: var(--live8-image) center / contain no-repeat;
}

.boost-reactor-timer {
  right: -14px;
  top: 4px;
  z-index: 1;
  width: 104px;
  height: 104px;
  opacity: 0.42;
  filter: drop-shadow(0 0 22px rgba(255, 226, 75, 0.66));
  animation: live8-timer-tick 1.2s ease-in-out infinite;
}

.boost-reactor-timer i {
  position: absolute;
  left: 48px;
  top: 27px;
  width: 5px;
  height: 33px;
  border-radius: 999px;
  background: #fff06d;
  transform-origin: 50% 24px;
  box-shadow: 0 0 10px rgba(255, 226, 75, 0.82);
  animation: manager-spotlight-clock-hand 2s linear infinite;
}

.boost-reactor-conduit {
  right: 34px;
  bottom: 80px;
  z-index: 0;
  width: 150px;
  height: 112px;
  opacity: 0.34;
  filter: drop-shadow(0 0 20px rgba(255, 226, 75, 0.62));
  animation: live8-conduit-flow 1.05s ease-in-out infinite;
}

.boost-reactor-panel .shop-utility-vault {
  right: 8px;
  top: 86px;
  width: 94px;
  height: 94px;
  opacity: 0.36;
  animation: live8-offline-capsule 1.45s ease-in-out infinite;
}

.boost-reactor-panel .shop-utility-drill {
  right: -22px;
  bottom: 124px;
  width: 88px;
  height: 88px;
  opacity: 0.24;
}

.shop-utility-copy {
  align-self: end;
  min-width: 0;
}

.boost-reactor-panel .shop-utility-copy {
  align-self: center;
  padding-right: 56px;
}

.shop-utility-copy small {
  display: block;
  color: #075f92;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.shop-utility-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1.04rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.shop-utility-copy p {
  margin: 4px 0 0;
  color: #2d5a70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.boost-reactor-stats,
.boost-reactor-lanes {
  grid-column: 1 / -1;
}

.boost-reactor-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.boost-reactor-stats span,
.boost-reactor-lanes span {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.boost-reactor-stats span {
  justify-items: center;
  gap: 1px;
  min-height: 58px;
  padding: 5px 4px;
}

.boost-mini {
  display: block;
  width: 28px;
  height: 28px;
  background: var(--live8-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.5));
  animation: live8-mini-pop 1.15s ease-in-out infinite;
}

.boost-reactor-stats b,
.boost-reactor-stats em,
.boost-reactor-lanes b,
.boost-reactor-lanes em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boost-reactor-stats b {
  color: #12384f;
  font-size: 0.72rem;
  font-weight: 1000;
}

.boost-reactor-stats em {
  color: #705017;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.boost-reactor-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.boost-reactor-lanes span {
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 4px;
  align-items: center;
  min-height: 42px;
  padding: 4px 5px;
  opacity: 0.82;
}

.boost-reactor-lanes span.active {
  border-color: rgba(255, 224, 79, 0.92);
  background: linear-gradient(180deg, rgba(255, 249, 178, 0.72), rgba(122, 239, 255, 0.48));
  box-shadow: 0 0 15px rgba(255, 226, 75, 0.46), inset 0 2px 0 rgba(255, 255, 255, 0.46);
  opacity: 1;
}

.boost-reactor-lanes i {
  grid-row: 1 / 3;
  display: block;
  width: 30px;
  height: 30px;
  background: var(--live8-image, var(--live6-image, var(--live4-image))) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.16));
  animation: live8-mini-pop 1.2s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 110ms);
}

.boost-reactor-lanes b {
  color: #12384f;
  font-size: 0.58rem;
  font-weight: 1000;
}

.boost-reactor-lanes em {
  color: #705017;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.shop-utility-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

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

.shop-utility-grid button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 88px;
  overflow: hidden;
  padding: 6px 4px 7px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  color: #12384f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(207, 237, 248, 0.84));
  box-shadow: 0 4px 0 rgba(22, 79, 104, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  font-weight: 1000;
}

.boost-reactor-grid button {
  grid-template-columns: 54px minmax(0, 1fr);
  justify-items: stretch;
  align-items: center;
  min-height: 76px;
  padding: 6px;
  text-align: left;
}

.shop-utility-grid button.ready {
  border-color: rgba(255, 224, 79, 0.9);
  box-shadow: 0 4px 0 rgba(128, 78, 13, 0.3), 0 0 17px rgba(255, 222, 74, 0.42);
}

.boost-reactor-grid button.active {
  color: #603607;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 240, 106, 0.64), transparent 58px),
    linear-gradient(180deg, #fff8be, #69ddff);
  box-shadow: 0 4px 0 rgba(14, 91, 124, 0.34), 0 0 20px rgba(255, 226, 75, 0.6);
}

.shop-utility-grid button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.52) 46%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.25s ease-in-out infinite;
}

.shop-utility-grid button i {
  display: block;
  width: 45px;
  height: 45px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(74, 42, 20, 0.18)) drop-shadow(0 0 10px rgba(255, 224, 75, 0.48));
  animation: shop-product-bounce 1.35s ease-in-out infinite;
}

.boost-reactor-grid button i {
  position: relative;
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  background: var(--live8-image, var(--live-panel-image)) center / 138% auto no-repeat;
  animation: live8-booster-cell 1.18s ease-in-out infinite;
}

.boost-reactor-grid button i b {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff06d;
  box-shadow: 0 0 12px rgba(255, 226, 75, 0.8);
  animation: chest-gems-pop 780ms ease-in-out infinite;
}

.shop-utility-grid button b,
.shop-utility-grid button em {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-utility-grid button b {
  font-size: 0.66rem;
  line-height: 1;
}

.boost-reactor-grid button b {
  align-self: end;
  color: #12384f;
  font-size: 0.68rem;
  line-height: 1.02;
  white-space: normal;
}

.shop-utility-grid button em {
  color: #5b3207;
  font-size: 0.58rem;
  font-style: normal;
}

.boost-reactor-grid button em {
  align-self: start;
  color: #5b4d1e;
  font-size: 0.54rem;
  font-weight: 1000;
  line-height: 1.05;
  white-space: normal;
}

.shop-utility-grid button:disabled {
  opacity: 0.82;
  filter: grayscale(0.12);
}

.chest-shop-panel {
  position: relative;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 8px;
  min-height: 326px;
  overflow: hidden;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  color: #14364e;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 231, 79, 0.72), transparent 92px),
    radial-gradient(circle at 84% 22%, rgba(172, 107, 255, 0.4), transparent 108px),
    linear-gradient(180deg, #fff0a8 0%, #ccf0fb 50%, #3f95c5 100%);
  box-shadow: 0 8px 0 rgba(89, 52, 16, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.chest-shop-panel::before {
  content: "";
  position: absolute;
  inset: -72px;
  z-index: 0;
  background:
    radial-gradient(circle at 48% 50%, rgba(255, 255, 255, 0.5), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.62), transparent, rgba(169, 96, 255, 0.48), transparent, rgba(84, 222, 255, 0.48), transparent);
  opacity: 0.68;
  mix-blend-mode: screen;
  animation: chest-aura-spin 5.2s linear infinite;
}

.chest-shop-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 39%, rgba(255, 255, 255, 0.54) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 2.9s ease-in-out infinite;
}

.chest-shop-panel > * {
  position: relative;
  z-index: 1;
}

.chest-shop-kiosk {
  align-self: center;
  justify-self: center;
  display: block;
  width: 134px;
  height: 140px;
  background: var(--chest-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(88, 42, 18, 0.24)) drop-shadow(0 0 26px rgba(255, 224, 75, 0.74));
  animation: chest-kiosk-float 1.55s ease-in-out infinite;
}

.chest-shop-turbine,
.chest-shop-laser,
.chest-shop-gem-slot,
.chest-shop-ramp {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: var(--live7-image) center / contain no-repeat;
}

.chest-shop-turbine {
  right: -18px;
  top: 18px;
  width: 152px;
  height: 152px;
  opacity: 0.64;
  filter: drop-shadow(0 0 24px rgba(84, 222, 255, 0.68));
  animation: live7-turbine-spin 1.36s ease-in-out infinite;
}

.chest-shop-turbine i {
  position: absolute;
  left: 48px;
  top: 34px;
  width: 48px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 246, 126, 0.85), rgba(84, 224, 255, 0.24), transparent);
  opacity: 0.72;
  filter: blur(0.2px) drop-shadow(0 0 14px rgba(255, 226, 75, 0.74));
  animation: live7-card-fountain 780ms ease-in-out infinite;
}

.chest-shop-laser {
  right: 28px;
  top: 108px;
  width: 112px;
  height: 112px;
  opacity: 0.36;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px rgba(212, 89, 255, 0.62));
  animation: live7-laser-scan 1.18s ease-in-out infinite;
}

.chest-shop-gem-slot {
  left: 82px;
  bottom: 92px;
  width: 70px;
  height: 70px;
  opacity: 0.72;
  filter: drop-shadow(0 0 16px rgba(255, 224, 75, 0.62));
  animation: live7-gem-slot-pay 1.05s ease-in-out infinite;
}

.chest-shop-gem-slot i {
  position: absolute;
  left: 31px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff06d;
  box-shadow:
    -15px 12px 0 #5be9ff,
    17px 10px 0 #d76dff,
    0 0 13px rgba(255, 226, 75, 0.82);
  animation: chest-gems-pop 820ms ease-in-out infinite;
}

.chest-shop-ramp {
  right: 74px;
  bottom: 96px;
  width: 104px;
  height: 104px;
  opacity: 0.44;
  filter: drop-shadow(0 0 18px rgba(255, 224, 75, 0.52));
  animation: live7-ramp-pour 1.28s ease-in-out infinite;
}

.chest-shop-burst {
  position: absolute;
  right: -24px;
  top: 34px;
  z-index: 0;
  width: 176px;
  height: 142px;
  pointer-events: none;
  background: var(--live-panel-image) center / contain no-repeat;
  opacity: 0.26;
  filter: drop-shadow(0 0 24px rgba(255, 224, 77, 0.54));
  animation: live-chest-burst-pulse 1.28s ease-in-out infinite;
}

.chest-shop-panel.ready .chest-shop-burst {
  opacity: 0.4;
}

.chest-shop-kiosk i,
.chest-shop-kiosk b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.chest-shop-kiosk i {
  left: 17px;
  right: 16px;
  bottom: 15px;
  height: 36px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 66%, #5ee9ff 0 4px, transparent 5px),
    radial-gradient(circle at 44% 30%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 72% 62%, #c06dff 0 5px, transparent 6px),
    radial-gradient(circle at 88% 32%, #69f083 0 4px, transparent 5px);
  filter: drop-shadow(0 0 12px rgba(255, 225, 72, 0.72));
  opacity: 0.72;
  animation: chest-gems-pop 820ms ease-in-out infinite;
}

.chest-shop-kiosk b {
  right: 10px;
  top: 12px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.8);
  transform: rotate(45deg);
  animation: prestige-glint 1s ease-in-out infinite;
}

.chest-shop-copy {
  min-width: 0;
  align-self: center;
  padding-right: 84px;
}

.chest-shop-copy small {
  display: block;
  color: #8a5a13;
  font-size: 0.65rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.chest-shop-copy strong {
  display: block;
  overflow: hidden;
  color: #14364e;
  font-size: 1.06rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.chest-shop-copy p {
  max-height: 2.35em;
  overflow: hidden;
  margin: 4px 0 0;
  color: #42606f;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
}

.chest-shop-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-self: start;
}

.chest-shop-stats span {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.chest-shop-stats b,
.chest-shop-stats em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-shop-stats b {
  color: #14374f;
  font-size: 0.74rem;
  font-weight: 1000;
}

.chest-shop-stats em {
  color: #684a17;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.chest-pack-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.chest-pack-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 88px;
  gap: 7px;
  align-items: center;
  min-height: 96px;
  overflow: hidden;
  padding: 7px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 9px;
  color: #14364e;
  background:
    radial-gradient(circle at 17% 50%, rgba(255, 226, 75, 0.44), transparent 58px),
    linear-gradient(180deg, rgba(255, 254, 226, 0.96), rgba(190, 236, 255, 0.84));
  box-shadow: 0 5px 0 rgba(88, 42, 18, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.48);
  text-align: left;
  animation: chest-pack-in 300ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
  animation-delay: calc(var(--row-index, 0) * 80ms);
}

.chest-pack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 0 39%, rgba(255, 255, 255, 0.54) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 2.2s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 160ms);
}

.chest-pack-card > * {
  position: relative;
  z-index: 1;
}

.chest-pack-card > .shop-card-purchase-fx {
  position: absolute;
  z-index: 0;
}

.chest-pack-card > .chest-pack-ramp {
  position: absolute;
  right: 76px;
  bottom: -12px;
  z-index: 0;
  width: 86px;
  height: 66px;
  pointer-events: none;
  background: var(--live7-image) center / contain no-repeat;
  opacity: 0.16;
  filter: drop-shadow(0 0 14px rgba(255, 224, 75, 0.42));
  animation: live7-ramp-pour 1.4s ease-in-out infinite;
}

.chest-pack-card.ready > .chest-pack-ramp {
  opacity: 0.3;
}

.chest-pack-card.elite {
  background:
    radial-gradient(circle at 17% 50%, rgba(188, 92, 255, 0.48), transparent 60px),
    radial-gradient(circle at 92% 22%, rgba(255, 226, 75, 0.42), transparent 70px),
    linear-gradient(180deg, rgba(255, 241, 255, 0.98), rgba(218, 185, 255, 0.84));
}

.chest-pack-card.ready {
  border-color: rgba(255, 224, 79, 0.94);
  box-shadow: 0 5px 0 rgba(128, 78, 13, 0.32), 0 0 18px rgba(255, 222, 74, 0.46);
}

.chest-pack-art {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  background: var(--chest-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(88, 42, 18, 0.18)) drop-shadow(0 0 14px rgba(255, 224, 75, 0.58));
  animation: chest-pack-bounce 1.35s ease-in-out infinite;
}

.chest-pack-art i {
  position: absolute;
  right: -2px;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bdcff);
  box-shadow: 0 0 10px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 980ms ease-in-out infinite;
}

.chest-pack-copy {
  min-width: 0;
}

.chest-pack-copy small,
.chest-pack-copy strong,
.chest-pack-copy em,
.chest-pack-card > b {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-pack-copy small {
  color: #8a5a13;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.chest-pack-copy strong {
  color: #14364e;
  font-size: 0.8rem;
  font-weight: 1000;
  line-height: 1.02;
  white-space: normal;
}

.chest-pack-copy em {
  max-height: 2.1em;
  color: #42606f;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.05;
  white-space: normal;
}

.chest-pack-card > b {
  justify-self: end;
  min-width: 84px;
  padding: 6px 5px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.42);
  font-size: 0.56rem;
  line-height: 1;
  text-align: center;
}

.chest-pack-card > b i {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--live7-image) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(84, 222, 255, 0.62));
  animation: live7-gem-slot-pay 1.15s ease-in-out infinite;
}

.chest-pack-card:disabled {
  opacity: 1;
  filter: grayscale(0.08);
}

.chest-pack-card:disabled > b {
  color: #60717d;
  background: linear-gradient(180deg, #dcecf2, #a9beca);
  box-shadow: 0 3px 0 rgba(91, 113, 124, 0.35);
}

.premium-store-panel::before,
.shop-showcase-panel::before,
.chest-shop-panel::before,
.contract-deal-panel::before,
.crew-command-panel::before {
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 246, 142, 0.42), transparent 112px),
    radial-gradient(circle at 72% 18%, rgba(84, 224, 255, 0.34), transparent 126px),
    radial-gradient(circle at 76% 74%, rgba(101, 236, 128, 0.18), transparent 132px),
    linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.22) 48%, transparent 58% 100%);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: live-panel-aura-breathe 2.4s ease-in-out infinite;
}

.boost-row.active {
  border: 2px solid rgba(97, 236, 124, 0.72);
  background: linear-gradient(180deg, rgba(218, 255, 225, 0.92), rgba(147, 228, 165, 0.78));
}

.boost-row small,
.shop-row small,
.contract-offer-row small {
  white-space: normal;
  line-height: 1.08;
}

.shop-row {
  min-height: 62px;
  overflow: hidden;
}

.shop-row .portrait.asset-portrait {
  width: 46px;
  height: 46px;
  margin-left: -2px;
  background-size: cover;
  filter: drop-shadow(0 3px 0 rgba(5, 58, 88, 0.24)) drop-shadow(0 0 12px rgba(255, 224, 75, 0.42));
}

.shop-row.type-booster {
  background:
    radial-gradient(circle at 14% 50%, rgba(81, 223, 255, 0.34), transparent 52px),
    linear-gradient(180deg, rgba(221, 245, 255, 0.94), rgba(184, 224, 255, 0.78));
}

.shop-row.type-manager_chest {
  background:
    radial-gradient(circle at 13% 50%, rgba(255, 220, 74, 0.38), transparent 56px),
    linear-gradient(180deg, rgba(255, 246, 185, 0.94), rgba(237, 191, 102, 0.78));
}

.shop-row.type-offline_cap {
  background:
    radial-gradient(circle at 14% 50%, rgba(143, 226, 255, 0.34), transparent 56px),
    linear-gradient(180deg, rgba(241, 232, 255, 0.94), rgba(212, 191, 248, 0.76));
}

.shop-row.ready {
  border: 2px solid rgba(255, 219, 75, 0.72);
  box-shadow: 0 0 15px rgba(255, 221, 74, 0.24);
}

.deep-shaft-row {
  min-height: 72px;
  overflow: hidden;
  border: 2px solid rgba(255, 224, 79, 0.72);
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 224, 79, 0.4), transparent 58px),
    radial-gradient(circle at 86% 18%, rgba(83, 226, 255, 0.28), transparent 70px),
    linear-gradient(180deg, rgba(255, 250, 214, 0.96), rgba(201, 231, 255, 0.82));
  box-shadow: 0 0 17px rgba(255, 222, 74, 0.26);
}

.deep-shaft-row .portrait.asset-portrait {
  width: 50px;
  height: 50px;
  background-size: 132% auto;
  animation: live-drill-rumble 900ms ease-in-out infinite;
}

.deep-shaft-row button {
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.42);
}

.shop-tag {
  display: inline-grid;
  place-items: center;
  min-height: 17px;
  width: max-content;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #62d5ff, #1682c8);
  box-shadow: 0 2px 0 rgba(0, 57, 91, 0.34);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 47, 75, 0.45);
}

.shop-sparkle {
  position: absolute;
  right: 78px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 24% 70%, #5ee9ff 0 3px, transparent 4px),
    radial-gradient(circle at 52% 30%, #ffdc4a 0 4px, transparent 5px),
    radial-gradient(circle at 76% 60%, #71f08b 0 3px, transparent 4px);
  filter: drop-shadow(0 0 10px rgba(255, 221, 74, 0.62));
  opacity: 0.55;
  pointer-events: none;
  animation: shop-sparkle-pop 1.35s ease-in-out infinite;
}

.shop-row.locked .shop-sparkle {
  opacity: 0.22;
  animation: none;
}

.prestige-row.core-row {
  min-height: 72px;
  overflow: hidden;
  border: 2px solid rgba(88, 220, 255, 0.58);
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 235, 86, 0.48), transparent 62px),
    radial-gradient(circle at 88% 18%, rgba(82, 216, 255, 0.42), transparent 70px),
    linear-gradient(180deg, rgba(230, 249, 255, 0.95), rgba(164, 223, 238, 0.78));
  box-shadow: 0 5px 0 rgba(15, 76, 102, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.55);
}

.prestige-row.core-row::before {
  content: "";
  position: absolute;
  inset: -24px;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 46%, rgba(255, 240, 110, 0.42), transparent 32px),
    conic-gradient(from 0deg, transparent, rgba(67, 214, 255, 0.26), transparent, rgba(255, 220, 74, 0.34), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: prestige-aura-spin 6s linear infinite;
}

.prestige-row.core-row.ready {
  border-color: rgba(255, 224, 80, 0.92);
  box-shadow: 0 5px 0 rgba(130, 76, 13, 0.34), 0 0 22px rgba(255, 221, 74, 0.38);
}

.prestige-row.core-row .portrait.asset-portrait {
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-left: -3px;
  background-size: 135% auto;
  animation: prestige-core-float 1.6s ease-in-out infinite;
}

.prestige-row.core-row > span:not(.portrait),
.prestige-row.core-row button,
.prestige-row.core-row .progress-line {
  z-index: 1;
}

.prestige-row.core-row button {
  min-width: 74px;
  color: #083f63;
  background: linear-gradient(180deg, #d9fbff, #49c9ff);
  box-shadow: 0 3px 0 rgba(0, 70, 112, 0.42);
}

.prestige-row.core-row.ready button {
  color: #5a3208;
  background: linear-gradient(180deg, #fff575, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.46), 0 0 16px rgba(255, 221, 74, 0.6);
}

.prestige-row.core-row .progress-line span {
  background: linear-gradient(90deg, #54e2ff, #fff06d, #35df8b);
  background-size: 180% 100%;
  box-shadow: 0 0 12px rgba(84, 221, 255, 0.7);
  animation: prestige-progress-flow 1.2s linear infinite;
}

.prestige-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 252px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  color: #113246;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 232, 84, 0.58), transparent 78px),
    radial-gradient(circle at 88% 24%, rgba(74, 219, 255, 0.48), transparent 96px),
    linear-gradient(180deg, #e9fbff 0%, #9bdff1 52%, #4fa8cf 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.prestige-hero-panel::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 76, 0.42), transparent, rgba(70, 221, 255, 0.5), transparent);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: prestige-aura-spin 7s linear infinite;
}

.prestige-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.48) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.8s ease-in-out infinite;
}

.prestige-hero-panel > * {
  position: relative;
  z-index: 1;
}

.prestige-aura {
  position: absolute;
  left: 24px;
  top: 22px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 246, 141, 0.6), transparent 48%),
    conic-gradient(from 0deg, rgba(255, 224, 72, 0.75), transparent, rgba(78, 220, 255, 0.78), transparent, rgba(255, 224, 72, 0.75));
  filter: blur(1px);
  opacity: 0.82;
  animation: prestige-aura-spin 4.8s linear infinite;
}

.prestige-orbit {
  position: relative;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 112px;
  height: 112px;
  background: var(--prestige-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 26px rgba(255, 223, 74, 0.72));
  animation: prestige-core-float 1.55s ease-in-out infinite;
}

.prestige-orbit i,
.prestige-reveal-art i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 50px;
  border: 4px solid rgba(255, 230, 80, 0.84);
  border-left-color: rgba(88, 222, 255, 0.9);
  border-right-color: rgba(88, 222, 255, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  filter: drop-shadow(0 0 10px rgba(255, 223, 74, 0.74));
  animation: prestige-ring-spin 1.7s linear infinite;
}

.prestige-orbit b,
.prestige-reveal-art b {
  position: absolute;
  left: 52%;
  top: 18%;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #eaffff, #48dcff 48%, #1269d8);
  box-shadow: 0 0 12px rgba(78, 222, 255, 0.76);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.prestige-copy {
  min-width: 0;
  align-self: end;
}

.prestige-copy small {
  display: block;
  color: #07618a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.prestige-copy strong {
  display: block;
  color: #12384f;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.prestige-copy p {
  margin: 3px 0 0;
  color: #2d5a70;
  font-size: 0.74rem;
  font-weight: 900;
}

.prestige-progress {
  align-self: start;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.prestige-progress span,
.prestige-run {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #13435a;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.prestige-progress em,
.prestige-run span:last-child {
  color: #5b3207;
  font-style: normal;
}

.prestige-progress i {
  height: 13px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(20, 72, 94, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 34, 56, 0.2);
}

.prestige-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4bdcff, #fff06d, #37e385);
  background-size: 180% 100%;
  box-shadow: 0 0 16px rgba(84, 221, 255, 0.74);
  animation: prestige-progress-flow 1.15s linear infinite;
}

.prestige-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.prestige-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.prestige-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.84rem;
  font-weight: 1000;
  text-overflow: ellipsis;
}

.prestige-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #2e6175;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.prestige-mini {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: var(--prestige-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.56));
  vertical-align: middle;
}

.prestige-track {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  min-height: 54px;
}

.prestige-track::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #46d9ff, #fff06d, #34de88);
  box-shadow: 0 0 13px rgba(87, 222, 255, 0.68);
  transform: translateY(-50%);
}

.prestige-node {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 241, 115, 0.34), transparent 24px),
    linear-gradient(180deg, #44cfff, #167cc4);
  background-image: var(--prestige-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 132% auto;
  box-shadow: 0 4px 0 rgba(0, 71, 112, 0.38), 0 0 14px rgba(84, 221, 255, 0.46);
  animation: prestige-node-bob 1.35s ease-in-out infinite;
  animation-delay: calc(var(--node, 0) * 120ms);
}

.prestige-node i {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 16px;
  background: conic-gradient(from 0deg, transparent, rgba(255, 230, 82, 0.76), transparent, rgba(86, 222, 255, 0.62), transparent);
  opacity: 0.72;
  animation: prestige-aura-spin 2.4s linear infinite;
}

.prestige-run {
  grid-column: 1 / -1;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
}

.world-overview-panel {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 238px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--world-crystal), transparent 42%), transparent 94px),
    radial-gradient(circle at 88% 18%, rgba(255, 226, 76, 0.44), transparent 108px),
    linear-gradient(180deg, color-mix(in srgb, var(--world-sky), #fff 32%) 0%, #c7eff7 50%, color-mix(in srgb, var(--world-cave), #348bc2 28%) 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.world-overview-panel::before {
  content: "";
  position: absolute;
  inset: -84px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(80, 221, 255, 0.54), transparent, rgba(255, 226, 75, 0.48), transparent, color-mix(in srgb, var(--world-crystal), transparent 38%), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 6.4s linear infinite;
}

.world-overview-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.5) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-80%);
  animation: reward-card-shine 2.8s ease-in-out infinite;
}

.world-overview-panel > * {
  position: relative;
  z-index: 2;
}

.world-overview-map {
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 132px;
  height: 132px;
  background: var(--world-live-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(9, 66, 91, 0.22)) drop-shadow(0 0 26px color-mix(in srgb, var(--world-crystal), #fff 24%));
  animation: live-meta-float 1.6s ease-in-out infinite;
}

.world-overview-map i,
.world-overview-map b {
  position: absolute;
  pointer-events: none;
}

.world-overview-map i {
  left: 50%;
  top: 54%;
  width: 108px;
  height: 44px;
  border: 4px solid rgba(87, 221, 255, 0.78);
  border-left-color: rgba(255, 230, 78, 0.9);
  border-right-color: rgba(255, 230, 78, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-16deg);
  animation: season-ring-spin 1.7s linear infinite;
}

.world-overview-map b {
  right: 19px;
  top: 20px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, var(--world-crystal));
  box-shadow: 0 0 13px color-mix(in srgb, var(--world-crystal), #fff 20%);
  transform: rotate(45deg);
  animation: prestige-glint 920ms ease-in-out infinite;
}

.world-overview-portal {
  position: absolute;
  right: -20px;
  top: 10px;
  z-index: 1;
  width: 96px;
  height: 96px;
  background: var(--live-panel-image) center / contain no-repeat;
  --live-pulse-min: 0.26;
  --live-pulse-max: 0.42;
  filter: drop-shadow(0 0 22px rgba(84, 224, 255, 0.62));
  opacity: 0.32;
  transform: rotate(4deg);
  animation: live-meta-pulse 1.55s ease-in-out infinite;
}

.world-overview-copy {
  align-self: end;
  min-width: 0;
}

.world-overview-copy small {
  display: block;
  color: #075f92;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.world-overview-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.world-overview-copy p {
  margin: 4px 0 0;
  color: #2d5a70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.world-overview-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.world-overview-stats span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.world-overview-stats b {
  max-width: 100%;
  overflow: hidden;
  color: #15364e;
  font-size: 0.76rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-overview-stats em {
  max-width: 100%;
  overflow: hidden;
  color: #2e6175;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-mini {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(84, 221, 255, 0.55));
  vertical-align: middle;
}

.world-route-track {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  min-height: 42px;
}

.world-route-track::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4bdcff, #fff06d, var(--world-crystal));
  box-shadow: 0 0 13px rgba(86, 222, 255, 0.66);
  transform: translateY(-50%);
}

.world-route-track span {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  background: linear-gradient(180deg, #48d3ff, #137dc0);
  box-shadow: 0 3px 0 rgba(0, 62, 96, 0.34);
  animation: prestige-node-bob 1.35s ease-in-out infinite;
  animation-delay: calc(var(--node, 0) * 120ms);
}

.world-route-track span.locked {
  background: linear-gradient(180deg, #9aafb8, #4c6674);
  opacity: 0.72;
  animation: none;
}

.world-route-track span.active {
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.38), 0 0 15px color-mix(in srgb, var(--world-crystal), #fff 18%);
}

.world-route-track span i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, var(--world-crystal));
  box-shadow: 0 0 9px color-mix(in srgb, var(--world-crystal), #fff 20%);
  transform: rotate(45deg);
}

.world-grid {
  display: grid;
  gap: 8px;
}

.world-card {
  position: relative;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
  min-height: 102px;
  overflow: hidden;
  padding: 8px;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 22%, color-mix(in srgb, var(--world-crystal), transparent 30%) 0 16px, transparent 54px),
    linear-gradient(135deg, var(--world-sky), var(--world-cave));
  box-shadow: 0 5px 0 rgba(38, 31, 42, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 2px 0 rgba(0, 30, 48, 0.46);
  animation: drawer-row-enter 180ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.world-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.22) 48%, transparent 55% 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-70%);
  animation: world-card-shine 3.8s ease-in-out infinite;
}

.world-card.locked {
  filter: grayscale(0.28) saturate(0.76);
}

.world-card.locked .world-scene::after {
  opacity: 0.92;
  background:
    radial-gradient(circle at 50% 42%, #ffe47a 0 5px, transparent 6px),
    linear-gradient(180deg, transparent 0 32%, rgba(22, 31, 40, 0.9) 33% 100%);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  clip-path: none;
}

.world-card.active {
  border-color: rgba(255, 241, 95, 0.92);
  box-shadow: 0 5px 0 rgba(38, 31, 42, 0.32), 0 0 18px color-mix(in srgb, var(--world-crystal), transparent 25%);
}

.world-scene {
  position: relative;
  display: block;
  width: 94px;
  height: 76px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(140deg, transparent 0 44%, rgba(255, 255, 255, 0.28) 45% 53%, transparent 54%),
    var(--world-art),
    linear-gradient(180deg, var(--world-sky) 0 46%, var(--world-ground) 47% 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover, cover;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.24), 0 3px 0 rgba(0, 34, 54, 0.28);
}

.world-scene::before,
.world-scene::after {
  content: "";
  position: absolute;
}

.world-scene::before {
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 18px;
  background:
    radial-gradient(circle at 18% 58%, var(--world-crystal) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 34%, #ffdc4a 0 4px, transparent 5px),
    radial-gradient(circle at 76% 55%, #5ee9ff 0 3px, transparent 4px);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--world-crystal), #fff 20%));
  opacity: 0.95;
  animation: world-scene-gems 1.4s ease-in-out infinite;
}

.world-scene::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(125deg, transparent 0 46%, rgba(255, 255, 255, 0.38) 51%, transparent 56% 100%);
  opacity: 0.42;
}

.world-scene i {
  position: absolute;
  left: 12px;
  bottom: 10px;
  width: 16px;
  height: 12px;
  border-radius: 4px 4px 2px 2px;
  background:
    radial-gradient(circle at 18% 38%, #ffdc4a 0 2px, transparent 3px),
    radial-gradient(circle at 54% 30%, var(--world-crystal) 0 3px, transparent 4px),
    linear-gradient(180deg, #50342c, #221820);
  box-shadow: 18px -4px 0 -4px color-mix(in srgb, var(--world-crystal), #fff 20%), 0 0 9px rgba(255, 223, 75, 0.48);
  transform: translateX(0);
  animation: world-cart-pulse 1.9s ease-in-out infinite;
}

.world-card.mine-coal {
  --world-art: url("/assets/world-coal.png");
}

.world-card.mine-copper {
  --world-art: url("/assets/world-copper.png");
}

.world-card.mine-gold {
  --world-art: url("/assets/world-gold.png");
}

.world-card.mine-crystal {
  --world-art: url("/assets/world-crystal.png");
}

.world-card strong,
.world-card small,
.world-card p {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-card strong {
  align-self: end;
  font-size: 0.86rem;
  line-height: 1;
  white-space: nowrap;
}

.world-card small {
  align-self: start;
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
}

.world-card p {
  display: none;
}

.world-card em {
  grid-column: 2 / 4;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(4, 28, 43, 0.48);
}

.world-card em b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff16a, var(--world-crystal));
}

.world-card button {
  grid-column: 3;
  grid-row: 1 / 3;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 3px 0 rgba(126, 67, 8, 0.45);
  font-size: 0.72rem;
  font-weight: 900;
}

.world-card button:disabled {
  color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(180deg, #8faabc, #426072);
}

.manager-portrait::before,
.boost-portrait::before,
.shop-portrait::before,
.chest-portrait::before,
.trophy-portrait::before,
.prestige-portrait::before,
.shaft-portrait::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #ffd0a4;
}

.manager-portrait::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 28px;
  height: 15px;
  border-radius: 15px 15px 5px 5px;
  background: linear-gradient(180deg, #fff270, #e9a81f);
}

.boost-portrait::before {
  border-radius: 6px;
  background: linear-gradient(135deg, #a78bfa, #34d399, #ffdc4a);
  transform: rotate(45deg) scale(0.86);
}

.shop-portrait::before {
  border-radius: 8px;
  background: linear-gradient(180deg, #ffeb6a, #ff9d26);
  box-shadow: inset 0 -8px 0 rgba(98, 55, 16, 0.22);
}

.chest-portrait::before {
  border-radius: 7px;
  background:
    radial-gradient(circle at 68% 28%, #fff7a2 0 4px, transparent 5px),
    linear-gradient(180deg, #fff071 0 24%, #b56a2a 25% 65%, #7b3d20 66% 100%);
  box-shadow: inset 0 -6px 0 rgba(76, 36, 17, 0.22);
}

.chest-portrait::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: #ffe369;
}

.trophy-portrait::before {
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #fff47d, #f7a629);
  clip-path: polygon(18% 0, 82% 0, 82% 46%, 65% 46%, 65% 68%, 84% 68%, 84% 100%, 16% 100%, 16% 68%, 35% 68%, 35% 46%, 18% 46%);
}

.prestige-portrait::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 12%, transparent 13%),
    conic-gradient(from 20deg, #4de3ff, #f4a3ff, #ffdc4a, #4de3ff);
}

.shaft-portrait::before {
  border-radius: 7px;
  background:
    radial-gradient(circle at 65% 28%, #fff7a2 0 5px, transparent 6px),
    linear-gradient(180deg, #5aa8c2, #27495b);
}

.drawer-row.dev-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(224, 243, 255, 0.7));
}

.drawer-row.dev-row .portrait {
  background: linear-gradient(180deg, #6be3ff, #2a7bc7);
}

.drawer-row.dev-row.danger {
  background: linear-gradient(180deg, rgba(255, 225, 219, 0.92), rgba(255, 197, 178, 0.86));
}

.drawer-row.dev-row.danger button {
  color: #fff;
  background: linear-gradient(180deg, #ff7c72, #cf3146);
}

.portrait {
  position: relative;
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 9px;
  background: linear-gradient(180deg, #46baf5, #1178bc);
  box-shadow: 0 3px 0 rgba(0, 60, 94, 0.4);
}

.portrait::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffc49b;
}

.portrait::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 25px;
  height: 13px;
  border-radius: 13px 13px 4px 4px;
  background: linear-gradient(180deg, #fff270, #e9a81f);
}

.portrait.calendar-portrait::before,
.portrait.online-portrait::before,
.portrait.event-portrait::before,
.portrait.chest-portrait::before {
  left: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
}

.portrait.calendar-portrait::after,
.portrait.online-portrait::after,
.portrait.event-portrait::after {
  display: none;
}

.portrait.calendar-portrait::before {
  background:
    linear-gradient(180deg, #ff6f5f 0 26%, transparent 27%),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.42) 8px 10px),
    linear-gradient(180deg, #fff3b5, #ffcf63);
  box-shadow: inset 0 -7px 0 rgba(123, 75, 20, 0.18);
}

.portrait.online-portrait::before {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, #67f286 0 34%, #14a64c 35% 54%, transparent 55%),
    linear-gradient(180deg, #74d8ff, #147cc1);
}

.portrait.event-portrait::before {
  background:
    radial-gradient(circle at 50% 50%, #fff8a6 0 12%, transparent 13%),
    conic-gradient(from 0deg, #ffdc4a, #5ee7ff, #f4a3ff, #65f07f, #ffdc4a);
  animation: event-icon-spin 3s linear infinite;
}

.portrait.chest-portrait::before {
  background:
    radial-gradient(circle at 68% 28%, #fff7a2 0 4px, transparent 5px),
    linear-gradient(180deg, #fff071 0 24%, #b56a2a 25% 65%, #7b3d20 66% 100%);
  box-shadow: inset 0 -6px 0 rgba(76, 36, 17, 0.22);
}

.portrait.chest-portrait::after {
  left: 9px;
  top: 20px;
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: #ffe369;
}

.portrait.boost-portrait::before,
.portrait.shop-portrait::before,
.portrait.trophy-portrait::before,
.portrait.prestige-portrait::before,
.portrait.shaft-portrait::before {
  left: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
}

.portrait.boost-portrait::after,
.portrait.shop-portrait::after,
.portrait.trophy-portrait::after,
.portrait.prestige-portrait::after,
.portrait.shaft-portrait::after {
  display: none;
}

.portrait.boost-portrait::before {
  border-radius: 6px;
  background: linear-gradient(135deg, #a78bfa, #34d399, #ffdc4a);
  transform: rotate(45deg) scale(0.86);
}

.portrait.shop-portrait::before {
  border-radius: 8px;
  background: linear-gradient(180deg, #ffeb6a, #ff9d26);
  box-shadow: inset 0 -8px 0 rgba(98, 55, 16, 0.22);
}

.portrait.trophy-portrait::before {
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #fff47d, #f7a629);
  clip-path: polygon(18% 0, 82% 0, 82% 46%, 65% 46%, 65% 68%, 84% 68%, 84% 100%, 16% 100%, 16% 68%, 35% 68%, 35% 46%, 18% 46%);
}

.portrait.prestige-portrait::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 12%, transparent 13%),
    conic-gradient(from 20deg, #4de3ff, #f4a3ff, #ffdc4a, #4de3ff);
}

.portrait.shaft-portrait::before {
  border-radius: 7px;
  background:
    radial-gradient(circle at 65% 28%, #fff7a2 0 5px, transparent 6px),
    linear-gradient(180deg, #5aa8c2, #27495b);
}

.portrait.audio-portrait::before,
.portrait.music-portrait::before,
.portrait.speaker-portrait::before {
  left: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
}

.portrait.audio-portrait::after,
.portrait.music-portrait::after,
.portrait.speaker-portrait::after {
  display: none;
}

.portrait.audio-portrait::before {
  background:
    radial-gradient(circle at 67% 50%, #fff6a8 0 5px, transparent 6px),
    linear-gradient(90deg, #ffcc3d 0 40%, #ff8f2f 41% 100%);
  clip-path: polygon(0 34%, 35% 34%, 72% 7%, 72% 93%, 35% 66%, 0 66%);
}

.portrait.music-portrait::before {
  background:
    radial-gradient(circle at 30% 76%, #fff7a5 0 4px, transparent 5px),
    radial-gradient(circle at 75% 70%, #fff7a5 0 4px, transparent 5px),
    linear-gradient(90deg, transparent 0 28%, #ffdc4a 29% 40%, transparent 41% 66%, #ff8aef 67% 79%, transparent 80%),
    linear-gradient(180deg, #67e8f9, #2f8be8);
}

.portrait.speaker-portrait::before {
  background:
    radial-gradient(circle at 67% 50%, transparent 0 28%, #fff7a5 29% 35%, transparent 36% 46%, #fff7a5 47% 52%, transparent 53%),
    linear-gradient(90deg, #ffdc4a 0 38%, #ff9d26 39% 64%, transparent 65%);
  clip-path: polygon(0 38%, 34% 38%, 58% 18%, 58% 82%, 34% 62%, 0 62%, 0 38%, 100% 0, 100% 100%, 0 100%);
}

.audio-console-panel {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  min-height: 156px;
  padding: 9px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: #12384f;
  background:
    radial-gradient(circle at 18% 18%, rgba(83, 226, 255, 0.48), transparent 82px),
    radial-gradient(circle at 86% 18%, rgba(255, 226, 75, 0.42), transparent 100px),
    linear-gradient(180deg, #f3fdff 0%, #c8f3ff 50%, #4e9ccd 100%);
  box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.66);
  isolation: isolate;
  animation: drawer-row-enter 220ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.audio-console-panel::before {
  content: "";
  position: absolute;
  inset: -70px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.38), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(83, 223, 255, 0.46), transparent, rgba(255, 226, 75, 0.42), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 5.4s linear infinite;
}

.audio-console-panel > * {
  position: relative;
  z-index: 2;
}

.audio-console-art {
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 108px;
  height: 108px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 24px rgba(80, 222, 255, 0.62));
  animation: live-sync-bob 1.45s ease-in-out infinite;
}

.audio-console-art i,
.audio-console-art b {
  position: absolute;
  pointer-events: none;
}

.audio-console-art i {
  left: 50%;
  top: 52%;
  width: 96px;
  height: 44px;
  border: 4px solid rgba(86, 222, 255, 0.76);
  border-left-color: rgba(255, 230, 78, 0.9);
  border-right-color: rgba(255, 230, 78, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
  animation: season-ring-spin 1.55s linear infinite;
}

.audio-console-art b {
  right: 13px;
  top: 14px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #fff06d 42%, #4bddff);
  box-shadow: 0 0 13px rgba(255, 226, 76, 0.78);
  transform: rotate(45deg);
  animation: prestige-glint 900ms ease-in-out infinite;
}

.audio-console-copy {
  align-self: end;
  min-width: 0;
}

.audio-console-copy small {
  display: block;
  color: #075f92;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.audio-console-copy strong {
  display: block;
  overflow: hidden;
  color: #12384f;
  font-size: 1.04rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.audio-console-copy p {
  margin: 4px 0 0;
  color: #2d5a70;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
}

.audio-console-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: end;
  min-height: 34px;
  align-self: end;
}

.audio-console-bars i {
  display: block;
  height: calc(10px + var(--bar, 0) * 4px);
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #fff06d, #4bdcff);
  box-shadow: 0 0 10px rgba(83, 224, 255, 0.68);
  animation: audio-bar-dance 760ms ease-in-out infinite;
  animation-delay: calc(var(--bar, 0) * 80ms);
}

.portrait.audio-portrait.live2-art-audio-console {
  background: var(--portrait-image) center / 136% auto no-repeat, linear-gradient(180deg, #52ccff, #1376bd);
  filter: drop-shadow(0 3px 0 rgba(5, 58, 88, 0.22)) drop-shadow(0 0 13px rgba(84, 222, 255, 0.5));
}

.portrait.audio-portrait.live2-art-audio-console::before,
.portrait.audio-portrait.live2-art-audio-console::after {
  display: none;
}

.audio-row,
.audio-control {
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(234, 249, 255, 0.94), rgba(184, 225, 244, 0.82));
}

.audio-control {
  cursor: pointer;
}

.audio-slider {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 86px;
}

.audio-slider b {
  color: #173046;
  font-size: 0.7rem;
  font-weight: 900;
}

.audio-slider input {
  width: 92px;
  accent-color: #ffb22e;
  cursor: pointer;
}

.portrait.asset-portrait {
  overflow: visible;
  border-color: rgba(255, 255, 255, 0.88);
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 247, 166, 0.36), transparent 33px),
    linear-gradient(180deg, #52ccff, #1376bd);
  background-image: var(--portrait-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 118% auto;
  box-shadow: 0 3px 0 rgba(0, 54, 86, 0.44), 0 0 13px rgba(85, 212, 255, 0.36);
  animation: portrait-idle 2.5s ease-in-out infinite;
}

.portrait.asset-portrait::before {
  display: none !important;
}

.portrait.asset-portrait::after {
  content: "";
  position: absolute;
  inset: -4px;
  display: block !important;
  border-radius: 12px;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.48) 42%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-45%) rotate(8deg);
  animation: portrait-shine 2.8s ease-in-out infinite;
}

.manager-card .portrait.asset-portrait {
  width: 48px;
  height: 58px;
  align-self: stretch;
  border-radius: 10px;
  background-size: cover;
  animation-name: manager-portrait-breathe;
}

.portrait.asset-portrait.live16-manager-art {
  background-size: 138% auto;
  background-position: 50% 16%;
  background-color: #1b95d5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 3px 0 rgba(0, 54, 86, 0.44),
    0 0 15px rgba(85, 212, 255, 0.46);
  animation: live16-manager-breathe 2.15s ease-in-out infinite;
}

.portrait.asset-portrait.live16-manager-art::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  display: block !important;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(255, 229, 84, 0), rgba(255, 229, 84, 0.74), rgba(82, 225, 255, 0.46), rgba(178, 114, 255, 0.52), rgba(255, 229, 84, 0));
  opacity: 0.36;
  filter: blur(0.4px);
  animation: live16-manager-rarity-scan 2.8s linear infinite;
}

.manager-spotlight-holo .portrait.asset-portrait.live16-manager-art {
  left: 20px;
  top: 18px;
  width: 66px;
  height: 88px;
  background-size: 164% auto;
  background-position: 50% 8%;
  border-radius: 15px;
  animation: live16-manager-spotlight 1.45s ease-in-out infinite;
}

.crew-slot-worker.asset-portrait.live16-manager-art {
  background-size: 152% auto;
  background-position: 50% 11%;
}

.manager-card .portrait.asset-portrait.live16-manager-art,
.academy-row .portrait.asset-portrait.live16-manager-art,
.academy-class-card .portrait.asset-portrait.live16-manager-art,
.manager-album-card .portrait.asset-portrait.live16-manager-art,
.chest-drop .portrait.asset-portrait.live16-manager-art {
  background-size: 146% auto;
  background-position: 50% 12%;
}

.manager-card.ability-ready .portrait.asset-portrait.live16-manager-art,
.manager-card.ability-active .portrait.asset-portrait.live16-manager-art,
.crew-slot-card.ability-ready .portrait.asset-portrait.live16-manager-art,
.crew-slot-card.ability-active .portrait.asset-portrait.live16-manager-art,
.manager-spotlight-panel.ability-ready .portrait.asset-portrait.live16-manager-art,
.manager-spotlight-panel.ability-active .portrait.asset-portrait.live16-manager-art {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 3px 0 rgba(0, 54, 86, 0.44),
    0 0 20px rgba(255, 226, 74, 0.72),
    0 0 16px rgba(85, 212, 255, 0.52);
  animation-duration: 1.05s;
}

.chest-drop .portrait.asset-portrait {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background-size: cover;
}

.manager-art-shaft {
  --portrait-image: url("/assets/motion-live16-manager-portrait-shaft.png?v=live16-managers");
}

.manager-art-elevator {
  --portrait-image: url("/assets/motion-live16-manager-portrait-elevator.png?v=live16-managers");
}

.manager-art-warehouse {
  --portrait-image: url("/assets/motion-live16-manager-portrait-depot.png?v=live16-managers");
}

.manager-art-mila {
  --portrait-image: url("/assets/motion-live16-manager-portrait-shaft.png?v=live16-managers");
}

.manager-art-bruno {
  --portrait-image: url("/assets/motion-live16-manager-portrait-shaft.png?v=live16-managers");
}

.manager-art-ivo {
  --portrait-image: url("/assets/motion-live16-manager-portrait-elevator.png?v=live16-managers");
}

.manager-art-nora {
  --portrait-image: url("/assets/motion-live16-manager-portrait-depot.png?v=live16-managers");
}

.manager-art-tara {
  --portrait-image: url("/assets/motion-live16-manager-portrait-shaft.png?v=live16-managers");
}

.manager-art-kuba {
  --portrait-image: url("/assets/motion-live16-manager-portrait-elevator.png?v=live16-managers");
}

.manager-art-lena {
  --portrait-image: url("/assets/motion-live16-manager-portrait-depot.png?v=live16-managers");
}

.manager-art-astra {
  --portrait-image: url("/assets/motion-live16-manager-portrait-mythic.png?v=live16-managers");
}

.manager-action-contract {
  --action-image: url("/assets/ui-manager2-contract.png");
}

.manager-action-levelup {
  --action-image: url("/assets/ui-manager2-levelup.png");
}

.crew-art-hq {
  --crew-image: url("/assets/ui-crew-hq.png");
  --portrait-image: url("/assets/ui-crew-hq.png");
}

.crew-art-shaft-slot {
  --crew-image: url("/assets/ui-crew-shaft-slot.png");
  --portrait-image: url("/assets/ui-crew-shaft-slot.png");
}

.crew-art-elevator-slot {
  --crew-image: url("/assets/ui-crew-elevator-slot.png");
  --portrait-image: url("/assets/ui-crew-elevator-slot.png");
}

.crew-art-depot-slot {
  --crew-image: url("/assets/ui-crew-depot-slot.png");
  --portrait-image: url("/assets/ui-crew-depot-slot.png");
}

.crew-art-level-burst {
  --crew-image: url("/assets/ui-crew-level-burst.png");
  --portrait-image: url("/assets/ui-crew-level-burst.png");
  --action-image: url("/assets/ui-crew-level-burst.png");
}

.crew-art-assign-badge {
  --crew-image: url("/assets/ui-crew-assign-badge.png");
  --portrait-image: url("/assets/ui-crew-assign-badge.png");
  --action-image: url("/assets/ui-crew-assign-badge.png");
}

.skill-art-mining {
  --skill-image: url("/assets/ui-manager2-skill-mining.png");
  --action-image: url("/assets/ui-manager2-skill-mining.png");
}

.skill-art-elevator {
  --skill-image: url("/assets/ui-manager2-skill-elevator.png");
  --action-image: url("/assets/ui-manager2-skill-elevator.png");
}

.skill-art-depot {
  --skill-image: url("/assets/ui-manager2-skill-depot.png");
  --action-image: url("/assets/ui-manager2-skill-depot.png");
}

.live-art-shop-merchant {
  --live-panel-image: url("/assets/ui-live-shop-merchant.png");
  --shop-premium-image: url("/assets/ui-live-shop-merchant.png");
  --portrait-image: url("/assets/ui-live-shop-merchant.png");
  --shop-reveal-image: url("/assets/ui-live-shop-merchant.png");
}

.live-art-manager-board {
  --live-panel-image: url("/assets/ui-live-manager-board.png");
  --crew-image: url("/assets/ui-live-manager-board.png");
  --contract2-image: url("/assets/ui-live-manager-board.png");
  --portrait-image: url("/assets/ui-live-manager-board.png");
  --action-image: url("/assets/ui-live-manager-board.png");
}

.live-art-premium-vault {
  --live-panel-image: url("/assets/ui-live-premium-vault.png");
  --premium-image: url("/assets/ui-live-premium-vault.png");
  --manager-fx-image: url("/assets/ui-live-premium-vault.png");
  --portrait-image: url("/assets/ui-live-premium-vault.png");
  --shop-premium-image: url("/assets/ui-live-premium-vault.png");
  --shop-reveal-image: url("/assets/ui-live-premium-vault.png");
}

.live-art-contract-desk {
  --live-panel-image: url("/assets/ui-live-contract-desk.png");
  --contract2-image: url("/assets/ui-live-contract-desk.png");
  --contract-image: url("/assets/ui-live-contract-desk.png");
  --portrait-image: url("/assets/ui-live-contract-desk.png");
  --shop-reveal-image: url("/assets/ui-live-contract-desk.png");
}

.live-art-crew-conveyor {
  --live-panel-image: url("/assets/ui-live-crew-conveyor.png");
  --crew-image: url("/assets/ui-live-crew-conveyor.png");
  --portrait-image: url("/assets/ui-live-crew-conveyor.png");
  --shop-premium-image: url("/assets/ui-live-crew-conveyor.png");
}

.live-art-chest-burst {
  --live-panel-image: url("/assets/ui-live-chest-burst.png");
  --shop-premium-image: url("/assets/ui-live-chest-burst.png");
  --shop-reveal-image: url("/assets/ui-live-chest-burst.png");
  --manager-fx-image: url("/assets/ui-live-chest-burst.png");
  --portrait-image: url("/assets/ui-live-chest-burst.png");
}

.live-art-world-map {
  --live-panel-image: url("/assets/ui-live-world-map.png");
  --portrait-image: url("/assets/ui-live-world-map.png");
  --world-live-image: url("/assets/ui-live-world-map.png");
  --world-travel-art: url("/assets/ui-live-world-map.png");
}

.live-art-event-portal {
  --live-panel-image: url("/assets/ui-live-event-portal.png");
  --event-image: url("/assets/ui-live-event-portal.png");
  --portrait-image: url("/assets/ui-live-event-portal.png");
  --world-live-image: url("/assets/ui-live-event-portal.png");
}

.live-art-season-podium {
  --live-panel-image: url("/assets/ui-live-season-podium.png");
  --season-image: url("/assets/ui-live-season-podium.png");
  --league-image: url("/assets/ui-live-season-podium.png");
  --portrait-image: url("/assets/ui-live-season-podium.png");
}

.live-art-profile-sync {
  --live-panel-image: url("/assets/ui-live-profile-sync.png");
  --profile-image: url("/assets/ui-live-profile-sync.png");
  --portrait-image: url("/assets/ui-live-profile-sync.png");
}

.live-art-prestige-reactor {
  --live-panel-image: url("/assets/ui-live-prestige-reactor.png");
  --prestige-image: url("/assets/ui-live-prestige-reactor.png");
  --portrait-image: url("/assets/ui-live-prestige-reactor.png");
}

.live-art-daily-chest {
  --live-panel-image: url("/assets/ui-live-daily-chest.png");
  --event-image: url("/assets/ui-live-daily-chest.png");
  --season-image: url("/assets/ui-live-daily-chest.png");
  --league-image: url("/assets/ui-live-daily-chest.png");
  --portrait-image: url("/assets/ui-live-daily-chest.png");
}

.prestige-portrait {
  --portrait-image: url("/assets/ui-prestige2-core.png");
}

.prestige-art-core {
  --prestige-image: url("/assets/ui-prestige2-core.png");
}

.prestige-art-portal {
  --prestige-image: url("/assets/ui-prestige2-portal.png");
}

.prestige-art-forge {
  --prestige-image: url("/assets/ui-prestige2-forge.png");
}

.prestige-art-shards {
  --prestige-image: url("/assets/ui-prestige2-shards.png");
}

.prestige-art-reset {
  --prestige-image: url("/assets/ui-prestige2-reset.png");
}

.prestige-art-crown {
  --prestige-image: url("/assets/ui-prestige2-crown.png");
}

.season-art-ticket {
  --season-image: url("/assets/ui-season-ticket.png");
  --portrait-image: url("/assets/ui-season-ticket.png");
}

.season-art-trophy {
  --season-image: url("/assets/ui-season-trophy.png");
  --portrait-image: url("/assets/ui-season-trophy.png");
}

.season-art-podium {
  --season-image: url("/assets/ui-season-podium.png");
  --portrait-image: url("/assets/ui-season-podium.png");
}

.season-art-chest {
  --season-image: url("/assets/ui-season-chest.png");
  --portrait-image: url("/assets/ui-season-chest.png");
}

.season-art-badge {
  --season-image: url("/assets/ui-season-badge.png");
  --portrait-image: url("/assets/ui-season-badge.png");
}

.season-art-calendar {
  --season-image: url("/assets/ui-season-calendar.png");
  --portrait-image: url("/assets/ui-season-calendar.png");
}

.profile-art-badge {
  --profile-image: url("/assets/ui-profile-badge.png");
  --portrait-image: url("/assets/ui-profile-badge.png");
}

.profile-art-cloud {
  --profile-image: url("/assets/ui-profile-cloud.png");
  --portrait-image: url("/assets/ui-profile-cloud.png");
}

.profile-art-nameplate {
  --profile-image: url("/assets/ui-profile-nameplate.png");
  --portrait-image: url("/assets/ui-profile-nameplate.png");
}

.profile-art-keycard {
  --profile-image: url("/assets/ui-profile-keycard.png");
  --portrait-image: url("/assets/ui-profile-keycard.png");
}

.profile-art-sync {
  --profile-image: url("/assets/ui-profile-sync.png");
  --portrait-image: url("/assets/ui-profile-sync.png");
}

.profile-art-medal {
  --profile-image: url("/assets/ui-profile-medal.png");
  --portrait-image: url("/assets/ui-profile-medal.png");
}

.contract-art-market {
  --contract-image: url("/assets/ui-contract-market.png");
  --portrait-image: url("/assets/ui-contract-market.png");
}

.contract-art-rare {
  --contract-image: url("/assets/ui-contract-rare.png");
  --portrait-image: url("/assets/ui-contract-rare.png");
}

.contract-art-epic {
  --contract-image: url("/assets/ui-contract-epic.png");
  --portrait-image: url("/assets/ui-contract-epic.png");
}

.contract-art-cards {
  --contract-image: url("/assets/ui-contract-cards.png");
  --portrait-image: url("/assets/ui-contract-cards.png");
}

.contract-art-vault {
  --contract-image: url("/assets/ui-contract-vault.png");
  --portrait-image: url("/assets/ui-contract-vault.png");
}

.contract-art-refresh {
  --contract-image: url("/assets/ui-contract-refresh.png");
  --portrait-image: url("/assets/ui-contract-refresh.png");
}

.contract2-art-kiosk {
  --contract2-image: url("/assets/ui-contract2-kiosk.png");
  --contract-image: url("/assets/ui-contract2-kiosk.png");
  --portrait-image: url("/assets/ui-contract2-kiosk.png");
}

.contract2-art-rare-card {
  --contract2-image: url("/assets/ui-contract2-rare-card.png");
  --contract-image: url("/assets/ui-contract2-rare-card.png");
  --portrait-image: url("/assets/ui-contract2-rare-card.png");
}

.contract2-art-epic-card {
  --contract2-image: url("/assets/ui-contract2-epic-card.png");
  --contract-image: url("/assets/ui-contract2-epic-card.png");
  --portrait-image: url("/assets/ui-contract2-epic-card.png");
}

.contract2-art-legendary-card {
  --contract2-image: url("/assets/ui-contract2-legendary-card.png");
  --contract-image: url("/assets/ui-contract2-legendary-card.png");
  --portrait-image: url("/assets/ui-contract2-legendary-card.png");
}

.contract2-art-refresh-ticket {
  --contract2-image: url("/assets/ui-contract2-refresh-ticket.png");
  --contract-image: url("/assets/ui-contract2-refresh-ticket.png");
  --portrait-image: url("/assets/ui-contract2-refresh-ticket.png");
}

.contract2-art-reward-pile {
  --contract2-image: url("/assets/ui-contract2-reward-pile.png");
  --contract-image: url("/assets/ui-contract2-reward-pile.png");
  --portrait-image: url("/assets/ui-contract2-reward-pile.png");
}

.academy-art-hall {
  --academy-image: url("/assets/ui-academy-hall.png");
  --portrait-image: url("/assets/ui-academy-hall.png");
}

.academy-art-lesson {
  --academy-image: url("/assets/ui-academy-lesson.png");
  --portrait-image: url("/assets/ui-academy-lesson.png");
}

.academy-art-timer {
  --academy-image: url("/assets/ui-academy-timer.png");
  --portrait-image: url("/assets/ui-academy-timer.png");
}

.academy-art-certificate {
  --academy-image: url("/assets/ui-academy-certificate.png");
  --portrait-image: url("/assets/ui-academy-certificate.png");
}

.academy2-art-hall {
  --academy-image: url("/assets/ui-academy2-hall.png");
  --portrait-image: url("/assets/ui-academy2-hall.png");
  --action-image: url("/assets/ui-academy2-hall.png");
}

.academy2-art-lesson {
  --academy-image: url("/assets/ui-academy2-lesson.png");
  --portrait-image: url("/assets/ui-academy2-lesson.png");
  --action-image: url("/assets/ui-academy2-lesson.png");
}

.academy2-art-pod {
  --academy-image: url("/assets/ui-academy2-pod.png");
  --portrait-image: url("/assets/ui-academy2-pod.png");
  --action-image: url("/assets/ui-academy2-pod.png");
}

.academy2-art-certificate {
  --academy-image: url("/assets/ui-academy2-certificate.png");
  --portrait-image: url("/assets/ui-academy2-certificate.png");
  --action-image: url("/assets/ui-academy2-certificate.png");
}

.academy2-art-board {
  --academy-image: url("/assets/ui-academy2-board.png");
  --portrait-image: url("/assets/ui-academy2-board.png");
  --action-image: url("/assets/ui-academy2-board.png");
}

.academy2-art-skill-burst {
  --academy-image: url("/assets/ui-academy2-skill-burst.png");
  --portrait-image: url("/assets/ui-academy2-skill-burst.png");
  --action-image: url("/assets/ui-academy2-skill-burst.png");
}

.event-art-portal {
  --event-image: url("/assets/ui-event-portal.png");
  --portrait-image: url("/assets/ui-event-portal.png");
}

.event-art-storm {
  --event-image: url("/assets/ui-event-storm.png");
  --portrait-image: url("/assets/ui-event-storm.png");
}

.event-art-chest {
  --event-image: url("/assets/ui-event-chest.png");
  --portrait-image: url("/assets/ui-event-chest.png");
}

.event-art-pass {
  --event-image: url("/assets/ui-event-pass.png");
  --portrait-image: url("/assets/ui-event-pass.png");
}

.event-art-objective {
  --event-image: url("/assets/ui-event-objective.png");
  --portrait-image: url("/assets/ui-event-objective.png");
}

.event-art-medal {
  --event-image: url("/assets/ui-event-medal.png");
  --portrait-image: url("/assets/ui-event-medal.png");
}

.league-art-leaderboard {
  --league-image: url("/assets/ui-league-leaderboard.png");
  --portrait-image: url("/assets/ui-league-leaderboard.png");
}

.league-art-podium {
  --league-image: url("/assets/ui-league-podium.png");
  --portrait-image: url("/assets/ui-league-podium.png");
}

.league-art-rival {
  --league-image: url("/assets/ui-league-rival.png");
  --portrait-image: url("/assets/ui-league-rival.png");
}

.league-art-reward {
  --league-image: url("/assets/ui-league-reward.png");
  --portrait-image: url("/assets/ui-league-reward.png");
}

.league-art-promotion {
  --league-image: url("/assets/ui-league-promotion.png");
  --portrait-image: url("/assets/ui-league-promotion.png");
}

.league-art-medal {
  --league-image: url("/assets/ui-league-medal.png");
  --portrait-image: url("/assets/ui-league-medal.png");
}

.premium-art-vault {
  --premium-image: url("/assets/ui-premium-vault.png");
  --portrait-image: url("/assets/ui-premium-vault.png");
  --shop-premium-image: url("/assets/ui-premium-vault.png");
  --shop-reveal-image: url("/assets/ui-premium-vault.png");
}

.premium-art-starter {
  --premium-image: url("/assets/ui-premium-starter.png");
  --portrait-image: url("/assets/ui-premium-starter.png");
  --shop-premium-image: url("/assets/ui-premium-starter.png");
  --shop-reveal-image: url("/assets/ui-premium-starter.png");
}

.premium-art-income-core {
  --premium-image: url("/assets/ui-premium-income-core.png");
  --portrait-image: url("/assets/ui-premium-income-core.png");
  --shop-premium-image: url("/assets/ui-premium-income-core.png");
  --shop-reveal-image: url("/assets/ui-premium-income-core.png");
}

.premium-art-manager-pack {
  --premium-image: url("/assets/ui-premium-manager-pack.png");
  --portrait-image: url("/assets/ui-premium-manager-pack.png");
  --shop-premium-image: url("/assets/ui-premium-manager-pack.png");
  --shop-reveal-image: url("/assets/ui-premium-manager-pack.png");
}

.premium-art-server-token {
  --premium-image: url("/assets/ui-premium-server-token.png");
  --portrait-image: url("/assets/ui-premium-server-token.png");
  --shop-premium-image: url("/assets/ui-premium-server-token.png");
  --shop-reveal-image: url("/assets/ui-premium-server-token.png");
}

.premium-art-offline-boost {
  --premium-image: url("/assets/ui-premium-offline-boost.png");
  --portrait-image: url("/assets/ui-premium-offline-boost.png");
  --shop-premium-image: url("/assets/ui-premium-offline-boost.png");
  --shop-reveal-image: url("/assets/ui-premium-offline-boost.png");
}

.chest-art-foreman {
  --chest-image: url("/assets/ui-chestfx-open-stage.png");
  --portrait-image: url("/assets/ui-chestfx-open-stage.png");
  --shop-premium-image: url("/assets/ui-chestfx-open-stage.png");
  --shop-reveal-image: url("/assets/ui-chestfx-open-stage.png");
}

.chest-art-elite {
  --chest-image: url("/assets/ui-chestfx-elite-chest.png");
  --portrait-image: url("/assets/ui-chestfx-elite-chest.png");
  --shop-premium-image: url("/assets/ui-chestfx-elite-chest.png");
  --shop-reveal-image: url("/assets/ui-chestfx-elite-chest.png");
}

.chest-art-card {
  --chest-image: url("/assets/ui-chestfx-card-frame.png");
  --portrait-image: url("/assets/ui-chestfx-card-frame.png");
  --shop-premium-image: url("/assets/ui-chestfx-card-frame.png");
  --shop-reveal-image: url("/assets/ui-chestfx-card-frame.png");
}

.chest-art-beam {
  --chest-image: url("/assets/ui-chestfx-reward-beam.png");
  --portrait-image: url("/assets/ui-chestfx-reward-beam.png");
  --shop-premium-image: url("/assets/ui-chestfx-reward-beam.png");
  --shop-reveal-image: url("/assets/ui-chestfx-reward-beam.png");
}

.chest-art-loot {
  --chest-image: url("/assets/ui-chestfx-loot-pile.png");
  --portrait-image: url("/assets/ui-chestfx-loot-pile.png");
  --shop-premium-image: url("/assets/ui-chestfx-loot-pile.png");
  --shop-reveal-image: url("/assets/ui-chestfx-loot-pile.png");
}

.chest-art-badge {
  --chest-image: url("/assets/ui-chestfx-rarity-badge.png");
  --portrait-image: url("/assets/ui-chestfx-rarity-badge.png");
  --shop-premium-image: url("/assets/ui-chestfx-rarity-badge.png");
  --shop-reveal-image: url("/assets/ui-chestfx-rarity-badge.png");
}

.chest2-art-kiosk {
  --chest-image: url("/assets/ui-chest2-kiosk.png");
  --portrait-image: url("/assets/ui-chest2-kiosk.png");
  --shop-premium-image: url("/assets/ui-chest2-kiosk.png");
  --shop-reveal-image: url("/assets/ui-chest2-kiosk.png");
}

.chest2-art-foreman {
  --chest-image: url("/assets/ui-chest2-foreman.png");
  --portrait-image: url("/assets/ui-chest2-foreman.png");
  --shop-premium-image: url("/assets/ui-chest2-foreman.png");
  --shop-reveal-image: url("/assets/ui-chest2-foreman.png");
}

.chest2-art-elite {
  --chest-image: url("/assets/ui-chest2-elite.png");
  --portrait-image: url("/assets/ui-chest2-elite.png");
  --shop-premium-image: url("/assets/ui-chest2-elite.png");
  --shop-reveal-image: url("/assets/ui-chest2-elite.png");
}

.chest2-art-portal {
  --chest-image: url("/assets/ui-chest2-portal.png");
  --portrait-image: url("/assets/ui-chest2-portal.png");
  --shop-premium-image: url("/assets/ui-chest2-portal.png");
  --shop-reveal-image: url("/assets/ui-chest2-portal.png");
}

.chest2-art-card-frame {
  --chest-image: url("/assets/ui-chest2-card-frame.png");
  --portrait-image: url("/assets/ui-chest2-card-frame.png");
  --shop-premium-image: url("/assets/ui-chest2-card-frame.png");
  --shop-reveal-image: url("/assets/ui-chest2-card-frame.png");
}

.chest2-art-loot-pile {
  --chest-image: url("/assets/ui-chest2-loot-pile.png");
  --portrait-image: url("/assets/ui-chest2-loot-pile.png");
  --shop-premium-image: url("/assets/ui-chest2-loot-pile.png");
  --shop-reveal-image: url("/assets/ui-chest2-loot-pile.png");
}

.boost-portrait {
  --portrait-image: url("/assets/ui-live8-turbo-reactor.png");
}

.shop-offline-portrait {
  --portrait-image: url("/assets/ui-live8-offline-capsule.png");
}

.chest-portrait {
  --portrait-image: url("/assets/ui-shop-premium-chest.png");
}

.task-portrait {
  --portrait-image: url("/assets/ui-reward-mission.png");
}

.trophy-portrait {
  --portrait-image: url("/assets/ui-reward-trophy.png");
}

.calendar-portrait {
  --portrait-image: url("/assets/ui-reward-daily.png");
}

.online-portrait {
  --portrait-image: url("/assets/ui-reward-online.png");
}

.event-portrait {
  --portrait-image: url("/assets/ui-reward-cash.png");
}

.shop-portrait {
  --portrait-image: url("/assets/ui-shop-premium-gems.png");
}

.shaft-portrait {
  --portrait-image: url("/assets/ui-shaft.png");
}

.shop-premium-stall {
  --shop-premium-image: url("/assets/ui-shop-premium-stall.png");
  --portrait-image: url("/assets/ui-shop-premium-stall.png");
  --shop-reveal-image: url("/assets/ui-shop-premium-stall.png");
}

.shop-premium-boost {
  --shop-premium-image: url("/assets/ui-shop-premium-boost.png");
  --portrait-image: url("/assets/ui-shop-premium-boost.png");
  --shop-reveal-image: url("/assets/ui-shop-premium-boost.png");
}

.shop-premium-chest {
  --shop-premium-image: url("/assets/ui-shop-premium-chest.png");
  --portrait-image: url("/assets/ui-shop-premium-chest.png");
  --shop-reveal-image: url("/assets/ui-shop-premium-chest.png");
}

.shop-premium-offline {
  --shop-premium-image: url("/assets/ui-shop-premium-offline.png");
  --portrait-image: url("/assets/ui-shop-premium-offline.png");
  --shop-reveal-image: url("/assets/ui-shop-premium-offline.png");
}

.shop-premium-gems,
.shop-premium-bundle {
  --shop-premium-image: url("/assets/ui-shop-premium-gems.png");
  --portrait-image: url("/assets/ui-shop-premium-gems.png");
  --shop-reveal-image: url("/assets/ui-shop-premium-gems.png");
}

.shop-premium-refresh {
  --shop-premium-image: url("/assets/ui-shop-premium-refresh.png");
  --portrait-image: url("/assets/ui-shop-premium-refresh.png");
  --shop-reveal-image: url("/assets/ui-shop-premium-refresh.png");
}

.shop-premium-shaft {
  --shop-premium-image: url("/assets/ui-shaft.png");
  --portrait-image: url("/assets/ui-shaft.png");
  --shop-reveal-image: url("/assets/ui-shaft.png");
}

.manager-card.rarity-rzadki .portrait.asset-portrait {
  box-shadow: 0 3px 0 rgba(0, 54, 86, 0.44), 0 0 16px rgba(66, 217, 255, 0.62);
}

.manager-card.rarity-epicki .portrait.asset-portrait {
  box-shadow: 0 3px 0 rgba(67, 35, 110, 0.44), 0 0 18px rgba(182, 109, 255, 0.68);
}

.manager-card.rarity-legendarny .portrait.asset-portrait,
.manager-card.rarity-mityczny .portrait.asset-portrait {
  box-shadow: 0 3px 0 rgba(102, 58, 11, 0.44), 0 0 22px rgba(255, 221, 74, 0.74);
  animation-name: portrait-legendary;
}

.shop-row.type-booster .portrait.asset-portrait,
.boost-row.active .portrait.asset-portrait {
  animation: booster-icon-pulse 1.35s ease-in-out infinite;
}

.shop-row.type-manager_chest .portrait.asset-portrait,
.chest-portrait.asset-portrait {
  animation: chest-icon-bounce 1.55s ease-in-out infinite;
}

.event-row.ready .portrait.asset-portrait,
.achievement-row.complete .portrait.asset-portrait {
  animation: reward-icon-ready 1.05s ease-in-out infinite;
}

.progress-line {
  position: absolute;
  left: 56px;
  right: 8px;
  bottom: 0;
  height: 5px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: rgba(31, 64, 82, 0.16);
}

.progress-line span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #53dc65, #ffe048);
}

.world-travel {
  position: absolute;
  inset: 0;
  z-index: 44;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mine-crystal, #68d8ff), transparent 45%) 0 82px, transparent 230px),
    rgba(4, 24, 41, 0.34);
  animation: world-travel-fade 1.45s ease-out both;
}

.world-travel-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(320px, 88vw);
  padding: 12px 12px 14px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 239, 107, 0.38), transparent 96px),
    linear-gradient(180deg, rgba(28, 108, 151, 0.96), rgba(15, 48, 78, 0.96));
  box-shadow: 0 9px 0 rgba(1, 27, 46, 0.42), 0 24px 42px rgba(0, 0, 0, 0.34);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 40, 66, 0.5);
  animation: world-travel-card 1.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.world-travel-art {
  position: relative;
  display: block;
  width: 196px;
  height: 116px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background:
    linear-gradient(125deg, transparent 0 46%, rgba(255, 255, 255, 0.34) 51%, transparent 56% 100%),
    var(--world-travel-art),
    linear-gradient(180deg, #49b8f4, #24435a);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover, cover;
  box-shadow: 0 5px 0 rgba(0, 40, 66, 0.36), 0 0 26px color-mix(in srgb, var(--mine-crystal, #68d8ff), transparent 44%);
}

.world-travel-art::before,
.world-travel-art::after,
.world-travel-art i {
  content: "";
  position: absolute;
  pointer-events: none;
}

.world-travel-art::before {
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
  mix-blend-mode: screen;
  transform: translateX(-72%);
  animation: world-travel-scan 980ms ease-in-out infinite;
}

.world-travel-art::after {
  left: 20px;
  right: 20px;
  bottom: 12px;
  height: 18px;
  background:
    radial-gradient(circle at 16% 50%, #ffdc4a 0 4px, transparent 5px),
    radial-gradient(circle at 48% 30%, var(--mine-crystal, #68d8ff) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 56%, #f4a3ff 0 4px, transparent 5px);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mine-crystal, #68d8ff), #fff 30%));
  animation: world-scene-gems 980ms ease-in-out infinite;
}

.world-travel-art i {
  left: 18px;
  bottom: 16px;
  width: 28px;
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffc74a, #704121);
  box-shadow: 0 0 10px rgba(255, 223, 75, 0.58);
  animation: world-travel-cart 1.05s ease-in-out infinite;
}

.world-travel.mine-coal {
  --world-travel-art: url("/assets/world-coal.png");
}

.world-travel.mine-copper {
  --world-travel-art: url("/assets/world-copper.png");
}

.world-travel.mine-gold {
  --world-travel-art: url("/assets/world-gold.png");
}

.world-travel.mine-crystal {
  --world-travel-art: url("/assets/world-crystal.png");
}

.world-travel small {
  color: #c9f4ff;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.world-travel strong {
  font-size: 1.25rem;
  font-weight: 1000;
}

.world-travel em {
  color: #fff4a5;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
}

.chest-reveal {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 27, 46, 0.52);
  animation: reveal-fade 180ms ease-out both;
}

.chest-card {
  display: grid;
  gap: 8px;
  width: min(360px, 92vw);
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 12px;
  color: #173046;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 241, 113, 0.62), transparent 72px),
    linear-gradient(180deg, #fff7bf, #f7d780 55%, #e8a94f);
  box-shadow: 0 10px 0 rgba(104, 61, 18, 0.46), 0 24px 42px rgba(0, 0, 0, 0.36);
  text-align: center;
  animation: chest-pop 340ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.chest-card > small {
  color: #7c5420;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.chest-card > strong {
  font-size: 1.18rem;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}

.chest-lid {
  position: relative;
  justify-self: center;
  width: 126px;
  height: 108px;
  margin-bottom: 2px;
  border-radius: 16px;
  background: url("/assets/ui-shop-chest.png") center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(88, 42, 18, 0.28)) drop-shadow(0 0 28px rgba(255, 223, 76, 0.72));
  animation: chest-hero-bounce 1.45s ease-in-out infinite;
}

.chest-lid::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 250, 146, 0.62), transparent 34%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.64), transparent, rgba(92, 230, 255, 0.42), transparent);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: -1;
  animation: chest-aura-spin 2.7s linear infinite;
}

.chest-lid i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 52px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 66%, #5ee9ff 0 4px, transparent 5px),
    radial-gradient(circle at 43% 28%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 70% 58%, #f4a3ff 0 5px, transparent 6px),
    radial-gradient(circle at 86% 25%, #69f083 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  transform: translate(-50%, -50%);
  animation: chest-gems-pop 860ms ease-in-out infinite;
}

.chest-drops {
  display: grid;
  gap: 6px;
}

.chest-drop {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 50px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  text-align: left;
  animation: drop-card-in 420ms ease-out both;
  animation-delay: calc(var(--row-index, 0) * 90ms);
}

.chest-drop:nth-child(2) {
  animation-delay: 90ms;
}

.chest-drop:nth-child(3) {
  animation-delay: 180ms;
}

.chest-drop b,
.chest-drop small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-drop b {
  font-weight: 1000;
}

.chest-drop small {
  color: #6c4b20;
  font-size: 0.72rem;
  font-weight: 900;
}

.chest-drop.rarity-epicki {
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.32);
}

.chest-drop.rarity-legendarny,
.chest-drop.rarity-mityczny {
  box-shadow: 0 0 22px rgba(255, 214, 64, 0.45);
}

.chest-card p {
  margin: 0;
  color: #6c4b20;
  font-size: 0.82rem;
  font-weight: 900;
}

.chest-card button {
  justify-self: center;
  min-width: 128px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45);
  font-weight: 1000;
}

.chest-reveal {
  z-index: 84;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 226, 84, 0.28), transparent 176px),
    radial-gradient(circle at 50% 58%, rgba(78, 221, 255, 0.16), transparent 210px),
    rgba(4, 24, 41, 0.72);
}

.chest-card-deluxe {
  position: relative;
  width: min(382px, 94vw);
  max-height: min(720px, 92vh);
  overflow: auto;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 9%, rgba(255, 248, 138, 0.72), transparent 94px),
    radial-gradient(circle at 82% 38%, rgba(85, 222, 255, 0.3), transparent 124px),
    linear-gradient(180deg, #fff9c9, #f7d77f 54%, #e69a41);
}

.chest-card-deluxe::before {
  content: "";
  position: absolute;
  inset: -72px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.52), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.68), transparent, rgba(88, 225, 255, 0.48), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: chest-aura-spin 4.2s linear infinite;
}

.chest-card-deluxe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 39%, rgba(255, 255, 255, 0.52) 48%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.55s ease-out 220ms both;
}

.chest-card-deluxe > * {
  position: relative;
  z-index: 2;
}

.chest-card-2 {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 248, 138, 0.72), transparent 98px),
    radial-gradient(circle at 78% 28%, rgba(178, 88, 255, 0.34), transparent 130px),
    radial-gradient(circle at 22% 42%, rgba(84, 222, 255, 0.28), transparent 126px),
    linear-gradient(180deg, #fff9c9, #f3d679 54%, #d98742);
}

.chest-opening-machine {
  position: relative;
  justify-self: center;
  display: block;
  width: min(326px, 100%);
  height: 168px;
  margin-bottom: -2px;
}

.chest-live-burst {
  position: absolute;
  left: 72px;
  top: -16px;
  z-index: 0;
  display: block;
  width: 206px;
  height: 176px;
  pointer-events: none;
  background: var(--live-panel-image) center / contain no-repeat;
  opacity: 0.46;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 26px rgba(255, 224, 77, 0.7));
  animation: live-chest-burst-pulse 1.05s ease-in-out infinite;
}

.chest-machine-kiosk,
.chest-card-stream,
.chest-card-turbine,
.chest-rarity-laser,
.chest-payment-slot {
  position: absolute;
  display: block;
  background: var(--chest-image, var(--live7-image)) center / contain no-repeat;
  pointer-events: none;
}

.chest-machine-kiosk {
  left: 0;
  top: 15px;
  width: 138px;
  height: 132px;
  opacity: 0.86;
  filter: drop-shadow(0 8px 0 rgba(88, 42, 18, 0.2)) drop-shadow(0 0 20px rgba(255, 224, 75, 0.56));
  animation: chest-kiosk-float 1.7s ease-in-out infinite;
}

.chest-machine-kiosk i {
  position: absolute;
  left: 22px;
  right: 18px;
  bottom: 17px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 66%, #5ee9ff 0 4px, transparent 5px),
    radial-gradient(circle at 44% 30%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 72% 62%, #c06dff 0 5px, transparent 6px);
  opacity: 0.7;
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  animation: chest-gems-pop 780ms ease-in-out infinite;
}

.chest-card-turbine {
  left: 92px;
  top: -8px;
  z-index: 3;
  width: 156px;
  height: 148px;
  opacity: 0.92;
  filter: drop-shadow(0 0 26px rgba(84, 222, 255, 0.74));
  animation: live7-turbine-spin 1.12s ease-in-out infinite;
}

.chest-card-turbine i,
.chest-card-turbine b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.chest-card-turbine i {
  left: 55px;
  top: 32px;
  width: 38px;
  height: 74px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 245, 111, 0.92), rgba(84, 222, 255, 0.3), transparent);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(255, 225, 76, 0.72));
  animation: live7-card-fountain 680ms ease-in-out infinite;
}

.chest-card-turbine b {
  left: 70px;
  top: 36px;
  width: 12px;
  height: 18px;
  border-radius: 3px;
  background: #fff06d;
  box-shadow:
    -34px 18px 0 #5be9ff,
    34px 13px 0 #d76dff,
    0 0 13px rgba(255, 226, 75, 0.86);
  animation: live7-card-blips 760ms ease-in-out infinite;
}

.chest-rarity-laser {
  right: 6px;
  top: 10px;
  z-index: 2;
  width: 136px;
  height: 136px;
  opacity: 0.76;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(210, 90, 255, 0.66));
  animation: live7-laser-scan 980ms ease-in-out infinite;
}

.chest-payment-slot {
  left: 16px;
  bottom: 4px;
  z-index: 4;
  width: 82px;
  height: 82px;
  opacity: 0.82;
  filter: drop-shadow(0 0 18px rgba(255, 226, 75, 0.64));
  animation: live7-gem-slot-pay 1s ease-in-out infinite;
}

.chest-payment-slot i {
  position: absolute;
  left: 35px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff06d;
  box-shadow:
    -16px 12px 0 #5ee9ff,
    17px 9px 0 #d76dff,
    0 0 13px rgba(255, 226, 75, 0.86);
  animation: chest-gems-pop 760ms ease-in-out infinite;
}

.chest-card-2 .chest-stage {
  position: absolute;
  left: 108px;
  top: 18px;
  z-index: 2;
  width: 132px;
  height: 118px;
}

.chest-card-2 .chest-stage-beam {
  left: 16px;
  top: -32px;
  width: 118px;
  height: 156px;
  opacity: 0.7;
}

.chest-card-2 .chest-stage-loot {
  right: -42px;
  bottom: -16px;
  width: 90px;
  height: 78px;
}

.chest-card-stream {
  right: -3px;
  top: 3px;
  z-index: 1;
  width: 138px;
  height: 144px;
  opacity: 0.86;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(84, 222, 255, 0.64));
  animation: chest-card-stream-rise 1.2s ease-in-out infinite;
}

.chest-card-stream.live7-art-card-turbine {
  right: 12px;
  top: 74px;
  width: 96px;
  height: 88px;
  opacity: 0.42;
}

.chest-rarity-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  min-height: 14px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(92, 55, 18, 0.18);
  box-shadow: inset 0 2px 2px rgba(75, 38, 9, 0.2);
}

.chest-rarity-track span {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dcfff, #b6e8ff);
  opacity: 0.36;
  box-shadow: 0 0 0 rgba(255, 225, 76, 0);
  animation: chest-rarity-light 1.6s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 120ms);
}

.chest-rarity-track span.rarity-rzadki {
  background: linear-gradient(90deg, #5be7ff, #32a8ff);
}

.chest-rarity-track span.rarity-epicki {
  background: linear-gradient(90deg, #d77dff, #8c52ff);
}

.chest-rarity-track span.rarity-legendarny {
  background: linear-gradient(90deg, #fff06d, #ff9f29);
}

.chest-rarity-track span.lit {
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 225, 76, 0.66);
}

.chest-stage {
  position: relative;
  justify-self: center;
  display: block;
  width: 168px;
  height: 142px;
  background: var(--chest-image) center / contain no-repeat;
  filter: drop-shadow(0 10px 0 rgba(88, 42, 18, 0.24)) drop-shadow(0 0 30px rgba(255, 223, 76, 0.74));
  animation: chest-stage-pop 1.35s ease-in-out infinite;
}

.chest-stage-beam,
.chest-stage-loot {
  position: absolute;
  display: block;
  pointer-events: none;
}

.chest-stage-beam {
  left: 28px;
  top: -12px;
  z-index: -1;
  width: 112px;
  height: 150px;
  background: var(--chest-image) center / contain no-repeat;
  opacity: 0.66;
  mix-blend-mode: screen;
  filter: blur(0.2px) drop-shadow(0 0 18px rgba(92, 230, 255, 0.72));
  animation: chest-beam-pulse 920ms ease-in-out infinite;
}

.chest-stage-loot {
  right: -18px;
  bottom: -8px;
  width: 78px;
  height: 66px;
  background: var(--chest-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(95, 55, 18, 0.16)) drop-shadow(0 0 14px rgba(255, 226, 75, 0.6));
  animation: chest-loot-bounce 980ms ease-in-out infinite;
}

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

.chest-summary span {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 56px;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.chest-mini {
  display: block;
  width: 27px;
  height: 27px;
  background: var(--chest-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 10px rgba(255, 225, 76, 0.5));
  animation: shop-product-bounce 1.35s ease-in-out infinite;
}

.chest-summary b,
.chest-summary em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-summary b {
  color: #14374f;
  font-size: 0.72rem;
  font-weight: 1000;
}

.chest-summary em {
  color: #684a17;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.chest-card-deluxe .chest-drops {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.chest-card-deluxe .chest-drop {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 2px 6px;
  min-height: 78px;
  overflow: hidden;
  padding: 7px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.78), transparent 42px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(205, 238, 255, 0.68));
  box-shadow: 0 4px 0 rgba(15, 72, 102, 0.16);
  animation: chest-card-flip 520ms cubic-bezier(0.16, 1.05, 0.28, 1) both;
  animation-delay: calc(var(--row-index, 0) * 105ms + 120ms);
}

.chest-card-deluxe .chest-drop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.54) 46%, transparent 59% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 2.2s ease-in-out infinite;
  animation-delay: calc(var(--row-index, 0) * 130ms + 540ms);
}

.chest-card-deluxe .chest-drop.rarity-rzadki {
  background:
    radial-gradient(circle at 18% 24%, rgba(82, 221, 255, 0.46), transparent 48px),
    linear-gradient(180deg, rgba(235, 252, 255, 0.96), rgba(168, 229, 255, 0.78));
}

.chest-card-deluxe .chest-drop.rarity-epicki {
  background:
    radial-gradient(circle at 18% 24%, rgba(182, 110, 255, 0.5), transparent 48px),
    linear-gradient(180deg, rgba(252, 241, 255, 0.98), rgba(221, 184, 255, 0.78));
}

.chest-card-deluxe .chest-drop.rarity-legendarny,
.chest-card-deluxe .chest-drop.rarity-mityczny {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 224, 75, 0.58), transparent 50px),
    linear-gradient(180deg, rgba(255, 249, 204, 0.98), rgba(238, 194, 94, 0.82));
}

.chest-drop-frame {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 58px;
  height: 64px;
  background: var(--chest-image) center / contain no-repeat;
  opacity: 0.72;
  filter: drop-shadow(0 3px 0 rgba(91, 52, 18, 0.14));
}

.chest-card-deluxe .chest-drop .portrait.asset-portrait {
  z-index: 2;
  grid-row: 1 / 3;
  width: 48px;
  height: 56px;
  border-radius: 9px;
  background-size: cover;
  filter: drop-shadow(0 3px 0 rgba(4, 54, 82, 0.2)) drop-shadow(0 0 12px rgba(255, 224, 75, 0.42));
  animation: manager-portrait-breathe 1.7s ease-in-out infinite;
}

.chest-drop-count {
  z-index: 3;
  position: absolute;
  left: 33px;
  top: 45px;
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 20px;
  padding: 0 4px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  color: #5b3207;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 2px 0 rgba(126, 67, 8, 0.32), 0 0 10px rgba(255, 223, 75, 0.5);
  font-size: 0.58rem;
  font-weight: 1000;
}

.chest-drop-copy {
  z-index: 2;
  min-width: 0;
  align-self: center;
}

.chest-card-deluxe .chest-drop b,
.chest-card-deluxe .chest-drop small {
  white-space: normal;
  line-height: 1.05;
}

.chest-card-deluxe .chest-drop b {
  color: #173046;
  font-size: 0.7rem;
}

.chest-card-deluxe .chest-drop small {
  color: #6c4b20;
  font-size: 0.58rem;
}

.chest-card-deluxe .chest-drop.new {
  border-color: rgba(255, 224, 79, 0.94);
  box-shadow: 0 4px 0 rgba(127, 75, 13, 0.28), 0 0 18px rgba(255, 222, 74, 0.48);
}

.chest-card-deluxe .chest-drop.new::before {
  content: "NOWY";
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 3;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #35d97a, #159758);
  box-shadow: 0 2px 0 rgba(0, 74, 42, 0.34);
  font-size: 0.52rem;
  font-weight: 1000;
}

.chest-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.chest-sparks i {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffdf4a 54%, #5ee9ff);
  box-shadow: 0 0 13px rgba(255, 225, 72, 0.78);
  transform: rotate(calc(var(--i) * 15deg)) translateY(-18px);
  animation: chest-spark-fly 1180ms ease-out forwards;
  animation-delay: calc(var(--i) * 12ms);
}

.reward-reveal {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 231, 98, 0.22), transparent 170px),
    rgba(4, 24, 41, 0.68);
  animation: reward-reveal-fade 180ms ease-out both;
}

.reward-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(356px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #173046;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 247, 136, 0.72), transparent 82px),
    linear-gradient(180deg, #fff8c4, #f6cf74 58%, #e89542);
  box-shadow: 0 10px 0 rgba(104, 61, 18, 0.48), 0 24px 44px rgba(0, 0, 0, 0.38);
  text-align: center;
  animation: reward-card-pop 340ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.reward-card::before {
  content: "";
  position: absolute;
  inset: -65px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.54), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 227, 75, 0.62), transparent, rgba(85, 222, 255, 0.46), transparent);
  opacity: 0.75;
  mix-blend-mode: screen;
  animation: reward-aura-spin 4.2s linear infinite;
}

.reward-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.5) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 260ms both;
}

.reward-card > * {
  position: relative;
  z-index: 2;
}

.reward-card > small {
  color: #795220;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.reward-card > strong {
  max-width: 100%;
  color: #163249;
  font-size: 1.18rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}

.reward-hero {
  position: relative;
  display: block;
  width: 142px;
  height: 124px;
  margin-bottom: 2px;
  background: var(--reward-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(88, 42, 18, 0.24)) drop-shadow(0 0 28px rgba(255, 223, 76, 0.72));
  animation: reward-hero-bob 1.35s ease-in-out infinite;
}

.reward-hero i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 58px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 62%, #5ee9ff 0 4px, transparent 5px),
    radial-gradient(circle at 43% 26%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 70% 58%, #f4a3ff 0 5px, transparent 6px),
    radial-gradient(circle at 86% 24%, #69f083 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  transform: translate(-50%, -50%);
  animation: reward-gems-pop 760ms ease-in-out infinite;
}

.reward-art-cash {
  --reward-image: url("/assets/ui-reward-cash.png");
}

.reward-art-gems {
  --reward-image: url("/assets/ui-reward-gems.png");
}

.reward-art-daily {
  --reward-image: url("/assets/ui-reward-daily.png");
}

.reward-art-online {
  --reward-image: url("/assets/ui-reward-online.png");
}

.reward-art-mission {
  --reward-image: url("/assets/ui-reward-mission.png");
}

.reward-art-trophy {
  --reward-image: url("/assets/ui-reward-trophy.png");
}

.reward-payouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.reward-pill {
  display: inline-grid;
  grid-template-columns: 22px auto;
  gap: 5px;
  align-items: center;
  min-height: 34px;
  padding: 5px 10px 5px 6px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2a4, #ffb333);
  box-shadow: 0 4px 0 rgba(116, 67, 8, 0.34), 0 0 16px rgba(255, 218, 75, 0.5);
  color: #613607;
  font-weight: 1000;
  animation: reward-pill-in 360ms ease-out both;
}

.reward-pill:nth-child(2) {
  animation-delay: 90ms;
}

.reward-pill i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fff7a5, #ffd744 48%, #fb9d25);
  box-shadow: inset 0 -3px 0 rgba(140, 76, 8, 0.28);
}

.reward-pill.gems {
  color: #07395f;
  background: linear-gradient(180deg, #a7f4ff, #35a9ff);
  box-shadow: 0 4px 0 rgba(0, 68, 118, 0.34), 0 0 16px rgba(76, 213, 255, 0.52);
}

.reward-pill.gems i {
  border-radius: 6px;
  background: linear-gradient(135deg, #d8ffff, #42d9ff 42%, #2c7dff 72%, #1260c7);
  transform: rotate(45deg) scale(0.78);
}

.reward-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45);
  font-weight: 1000;
}

.reward-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.reward-sparks i {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffdf4a);
  box-shadow: 0 0 12px rgba(255, 225, 72, 0.72);
  transform: rotate(calc(var(--i) * 20deg)) translateY(-12px);
  animation: reward-spark-fly 1050ms ease-out forwards;
}

.manager-reveal,
.shop-reveal,
.academy-reveal {
  position: absolute;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(88, 218, 255, 0.24), transparent 168px),
    rgba(4, 24, 41, 0.68);
  animation: reward-reveal-fade 180ms ease-out both;
}

.manager-reveal {
  pointer-events: none;
}

.manager-reveal-card,
.shop-reveal-card,
.academy-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(360px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #173046;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 248, 138, 0.64), transparent 88px),
    linear-gradient(180deg, #e9f8ff, #aee1f2 58%, #55a8cc);
  box-shadow: 0 10px 0 rgba(13, 68, 93, 0.5), 0 24px 44px rgba(0, 0, 0, 0.38);
  text-align: center;
  animation: manager-reveal-pop 340ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.manager-reveal-card {
  pointer-events: auto;
}

.shop-reveal-card {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 248, 138, 0.7), transparent 88px),
    linear-gradient(180deg, #fff7bf, #f6d170 58%, #e89542);
  box-shadow: 0 10px 0 rgba(111, 65, 18, 0.48), 0 24px 44px rgba(0, 0, 0, 0.38);
}

.academy-reveal-card {
  background:
    radial-gradient(circle at 48% 12%, rgba(255, 242, 130, 0.7), transparent 88px),
    radial-gradient(circle at 74% 68%, rgba(76, 221, 255, 0.38), transparent 116px),
    linear-gradient(180deg, #f9f6c8, #a5e5f0 55%, #40a5c7);
  box-shadow: 0 10px 0 rgba(11, 83, 110, 0.48), 0 24px 44px rgba(0, 0, 0, 0.38);
}

.manager-reveal-card::before,
.shop-reveal-card::before,
.academy-reveal-card::before {
  content: "";
  position: absolute;
  inset: -70px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.48), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 227, 75, 0.62), transparent, rgba(85, 222, 255, 0.46), transparent);
  opacity: 0.74;
  mix-blend-mode: screen;
  animation: reward-aura-spin 4s linear infinite;
}

.manager-reveal-card::after,
.shop-reveal-card::after,
.academy-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.52) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.manager-reveal-card > *,
.shop-reveal-card > *,
.academy-reveal-card > * {
  position: relative;
  z-index: 2;
}

.manager-reveal-stage {
  position: relative;
  display: grid;
  grid-template-columns: 92px 128px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 132px;
}

.manager-reveal-dispatch {
  position: absolute;
  left: -10px;
  top: 2px;
  z-index: 0;
  width: 118px;
  height: 106px;
  opacity: 0.56;
  filter: drop-shadow(0 0 18px rgba(78, 221, 255, 0.5));
  transform: rotate(-5deg);
  animation: live4-desk-float 1.8s ease-in-out infinite;
}

.manager-reveal-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 184px;
  height: 154px;
  pointer-events: none;
  background: var(--manager-fx-image) center / contain no-repeat;
  opacity: 0.72;
  transform: translate(-50%, -52%) scale(0.74);
  filter: drop-shadow(0 0 24px rgba(255, 225, 76, 0.76));
  animation: manager-reveal-fx-pop 1.25s ease-in-out infinite;
}

.manager-reveal.mode-hire .manager-reveal-fx {
  opacity: 0.64;
}

.manager-reveal.mode-ability .manager-reveal-fx {
  opacity: 0.82;
  animation-duration: 920ms;
}

.manager-reveal-receipt {
  position: absolute;
  right: -12px;
  bottom: 2px;
  z-index: 3;
  width: 58px;
  height: 56px;
  opacity: 0.92;
  filter: drop-shadow(0 0 14px rgba(255, 226, 74, 0.54));
  animation: live4-receipt-stamp 1.15s ease-in-out infinite;
}

.manager-reveal-stage .portrait.asset-portrait {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 118px;
  border-radius: 14px;
  background-size: cover;
  animation: manager-reveal-worker 1.35s ease-in-out infinite;
}

.academy-reveal-stage {
  display: grid;
  grid-template-columns: 94px 142px;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 138px;
}

.academy-reveal-stage .portrait.asset-portrait {
  width: 94px;
  height: 122px;
  border-radius: 14px;
  background-size: cover;
  animation: manager-reveal-worker 1.22s ease-in-out infinite;
}

.academy2-reveal-stage {
  grid-template-columns: 138px 136px;
  gap: 2px;
}

.academy-reveal-pod {
  position: relative;
  display: block;
  width: 138px;
  height: 132px;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(10, 72, 102, 0.2)) drop-shadow(0 0 26px rgba(76, 222, 255, 0.72));
  animation: academy-stage-pod-glow 1.25s ease-in-out infinite;
}

.academy-reveal-pod .portrait.asset-portrait {
  position: absolute;
  left: 45px;
  top: 40px;
  width: 49px;
  height: 63px;
  border-radius: 10px;
  background-size: cover;
  box-shadow: 0 0 18px rgba(83, 229, 255, 0.72);
  opacity: 0.96;
  animation: academy-trainee-train 1.05s ease-in-out infinite;
}

.academy-reveal-pod i {
  position: absolute;
  inset: 31px 39px 23px;
  border-radius: 999px;
  border: 2px solid rgba(83, 229, 255, 0.78);
  box-shadow: 0 0 24px rgba(83, 229, 255, 0.78), inset 0 0 18px rgba(83, 229, 255, 0.38);
  animation: academy-pod-ring 820ms ease-in-out infinite;
}

.manager-reveal-action,
.shop-reveal-art,
.academy-reveal-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 128px;
  height: 112px;
  background: var(--action-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(10, 53, 80, 0.22)) drop-shadow(0 0 26px rgba(255, 221, 74, 0.66));
  animation: manager-action-bob 1.18s ease-in-out infinite;
}

.shop-reveal-stage {
  position: relative;
  display: grid;
  grid-template-columns: 132px 104px;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 138px;
}

.shop-reveal-receipt {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 4;
  width: 58px;
  height: 56px;
  opacity: 0.94;
  filter: drop-shadow(0 0 14px rgba(255, 226, 74, 0.58));
  animation: live4-receipt-stamp 1.16s ease-in-out infinite;
}

.shop-reveal-purchase-fx {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 0;
  width: 206px;
  height: 160px;
  pointer-events: none;
  background: var(--manager-fx-image) center / contain no-repeat;
  opacity: 0.74;
  transform: translate(-50%, -50%) scale(0.7);
  filter: drop-shadow(0 0 24px rgba(255, 223, 76, 0.82));
  animation: shop-purchase-reveal-pop 1.1s ease-in-out infinite;
}

.premium-reveal .shop-reveal-purchase-fx {
  width: 226px;
  height: 176px;
  opacity: 0.54;
  transform: translate(-50%, -50%) scale(0.68) rotate(-2deg);
}

.manager-reveal-action i,
.shop-reveal-art i,
.academy-reveal-art i {
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 235, 88, 0.65), transparent, rgba(80, 220, 255, 0.5), transparent);
  opacity: 0.82;
  animation: reward-aura-spin 3.1s linear infinite;
}

.manager-reveal-card > small,
.shop-reveal-card > small,
.academy-reveal-card > small {
  color: #07587c;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.shop-reveal-card > small {
  color: #795220;
}

.academy-reveal-card > small {
  color: #087197;
}

.manager-reveal-card > strong,
.shop-reveal-card > strong,
.academy-reveal-card > strong {
  max-width: 100%;
  color: #163249;
  font-size: 1.15rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}

.manager-reveal-card p,
.shop-reveal-card p,
.academy-reveal-card p {
  max-width: 290px;
  margin: 0;
  color: #294a5f;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.14;
}

.shop-reveal-card p {
  color: #6c4b20;
}

.manager-reveal-card button,
.shop-reveal-card button,
.academy-reveal-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45);
  font-weight: 1000;
}

.manager-reveal-sparks,
.academy-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.manager-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #60dfff);
  box-shadow: 0 0 12px rgba(83, 216, 255, 0.72);
  transform: rotate(calc(var(--i) * 22.5deg)) translateY(-18px);
  animation: manager-spark-fly 1050ms ease-out forwards;
}

.academy-reveal-art {
  width: 142px;
  height: 122px;
  background: var(--academy-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(10, 72, 102, 0.2)) drop-shadow(0 0 26px rgba(255, 225, 76, 0.72));
  animation: academy-certificate-pop 1.15s ease-in-out infinite;
}

.academy-reveal-art b {
  position: absolute;
  left: 18px;
  right: 16px;
  bottom: 13px;
  height: 36px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 58%, #4ee7ff 0 4px, transparent 5px),
    radial-gradient(circle at 46% 30%, #ffde43 0 5px, transparent 6px),
    radial-gradient(circle at 74% 61%, #77f08a 0 4px, transparent 5px);
  opacity: 0.75;
  filter: drop-shadow(0 0 12px rgba(255, 230, 75, 0.72));
  animation: academy-gems-rise 820ms ease-in-out infinite;
}

.academy-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(306px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -3px 0 rgba(9, 89, 119, 0.14);
}

.academy-reveal-strip b {
  min-width: 0;
  color: #155067;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
}

.academy-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #ffe34a 54%, #54dfff);
  box-shadow: 0 0 13px rgba(255, 225, 72, 0.78);
  transform: rotate(calc(var(--i) * 17deg)) translateY(-18px);
  animation: academy-spark-fly 1180ms ease-out forwards;
}

.shop-reveal-art {
  width: 150px;
  height: 128px;
  background: var(--shop-reveal-image) center / contain no-repeat;
}

.shop-reveal-pack {
  position: relative;
  z-index: 2;
  display: block;
  width: 104px;
  height: 100px;
  background: var(--shop-premium-image) center / contain no-repeat;
  filter: drop-shadow(0 8px 0 rgba(111, 65, 18, 0.2)) drop-shadow(0 0 22px rgba(255, 224, 74, 0.58));
  animation: shop-pack-pop 1.12s ease-in-out infinite;
}

.shop-reveal-pack i {
  position: absolute;
  left: 15px;
  right: 12px;
  bottom: 12px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 60%, #5ee9ff 0 4px, transparent 5px),
    radial-gradient(circle at 50% 30%, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 76% 62%, #f4a3ff 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px rgba(255, 225, 72, 0.72));
  opacity: 0.72;
  animation: chest-gems-pop 820ms ease-in-out infinite;
}

.shop-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.shop-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #684a17;
  font-size: 0.72rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.shop-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffdf4a 55%, #5ee9ff);
  box-shadow: 0 0 13px rgba(255, 225, 72, 0.78);
  transform: rotate(calc(var(--i) * 18deg)) translateY(-18px);
  animation: shop-spark-fly 1100ms ease-out forwards;
  animation-delay: calc(var(--i) * 13ms);
}

.upgrade-reveal {
  position: absolute;
  inset: 0;
  z-index: 86;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 28, 43, 0.62);
  backdrop-filter: blur(2px);
}

.upgrade-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(358px, 100%);
  overflow: hidden;
  padding: 19px 17px 16px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;
  color: #14334c;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 244, 112, 0.76), transparent 118px),
    radial-gradient(circle at 14% 84%, rgba(83, 224, 255, 0.52), transparent 104px),
    linear-gradient(180deg, #fff8bd 0%, #ffd76a 52%, #f3a04a 100%);
  box-shadow: 0 7px 0 rgba(105, 55, 10, 0.52), 0 20px 42px rgba(0, 0, 0, 0.38);
  text-align: center;
  animation: modal-pop 240ms cubic-bezier(0.22, 1.08, 0.28, 1) both;
}

.upgrade-reveal-card::before {
  content: "";
  position: absolute;
  inset: -70px;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.4), transparent, rgba(83, 224, 255, 0.36), transparent);
  opacity: 0.65;
  animation: reward-aura-spin 4.4s linear infinite;
}

.upgrade-reveal-card > * {
  position: relative;
  z-index: 2;
}

.upgrade-reveal-stage {
  position: relative;
  display: grid;
  grid-template-columns: 144px 112px;
  align-items: end;
  justify-content: center;
  min-height: 145px;
  margin-bottom: 2px;
}

.upgrade-reveal-art,
.upgrade-reveal-side,
.upgrade-reveal-burst {
  position: relative;
  display: block;
  background: var(--upgrade-image) center / contain no-repeat;
  pointer-events: none;
}

.upgrade-reveal-art {
  width: 150px;
  height: 132px;
  filter: drop-shadow(0 8px 0 rgba(92, 49, 13, 0.24)) drop-shadow(0 0 22px rgba(255, 230, 80, 0.72));
  animation: milestone-forge-work 1.08s ease-in-out infinite;
}

.upgrade-reveal-side {
  width: 118px;
  height: 120px;
  margin-left: -14px;
  filter: drop-shadow(0 7px 0 rgba(18, 75, 95, 0.2)) drop-shadow(0 0 19px rgba(83, 224, 255, 0.62));
  animation: milestone-side-pop 1.18s ease-in-out infinite;
}

.upgrade-reveal-side i,
.upgrade-reveal-art i {
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 236, 82, 0.58), transparent, rgba(84, 224, 255, 0.5), transparent);
  opacity: 0.72;
  animation: reward-aura-spin 2.8s linear infinite;
}

.upgrade-reveal-burst {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 176px;
  height: 122px;
  opacity: 0.78;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 24px rgba(255, 224, 74, 0.78));
  animation: upgrade-reveal-burst-pulse 900ms ease-in-out infinite;
}

.upgrade-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.upgrade-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffe54a 55%, #5be6ff);
  box-shadow: 0 0 13px rgba(255, 225, 72, 0.78);
  transform: rotate(calc(var(--i) * 16.4deg)) translateY(-18px);
  animation: upgrade-spark-fly 1150ms ease-out forwards;
  animation-delay: calc(var(--i) * 14ms);
}

.upgrade-reveal-card small {
  color: #7a541c;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.upgrade-reveal-card strong {
  max-width: 100%;
  color: #14334c;
  font-size: 1.18rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}

.upgrade-reveal-card p {
  max-width: 300px;
  margin: 7px 0 10px;
  color: #604217;
  font-size: 0.82rem;
  font-weight: 900;
}

.upgrade-reveal-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45);
  font-weight: 1000;
}

.shop-action-boost {
  --shop-reveal-image: url("/assets/ui-live8-turbo-reactor.png");
}

.shop-action-offline {
  --shop-reveal-image: url("/assets/ui-live8-offline-capsule.png");
}

.shop-action-chest {
  --shop-reveal-image: url("/assets/ui-shop-premium-chest.png");
}

.shop-action-bundle {
  --shop-reveal-image: url("/assets/ui-shop-premium-gems.png");
}

.live2-art-mission-board {
  --live-panel-image: url("/assets/ui-live2-mission-board.png");
  --portrait-image: url("/assets/ui-live2-mission-board.png");
  --reward-image: url("/assets/ui-live2-mission-board.png");
  --shop-reveal-image: url("/assets/ui-live2-mission-board.png");
}

.live2-art-achievement-hall {
  --live-panel-image: url("/assets/ui-live2-achievement-hall.png");
  --portrait-image: url("/assets/ui-live2-achievement-hall.png");
  --reward-image: url("/assets/ui-live2-achievement-hall.png");
}

.live2-art-boost-lab {
  --live-panel-image: url("/assets/ui-live2-boost-lab.png");
  --portrait-image: url("/assets/ui-live2-boost-lab.png");
  --shop-premium-image: url("/assets/ui-live2-boost-lab.png");
  --shop-reveal-image: url("/assets/ui-live2-boost-lab.png");
  --reward-image: url("/assets/ui-live2-boost-lab.png");
}

.live2-art-offline-vault {
  --live-panel-image: url("/assets/ui-live2-offline-vault.png");
  --portrait-image: url("/assets/ui-live2-offline-vault.png");
  --shop-premium-image: url("/assets/ui-live2-offline-vault.png");
  --shop-reveal-image: url("/assets/ui-live2-offline-vault.png");
  --reward-image: url("/assets/ui-live2-offline-vault.png");
}

.live2-art-deep-drill {
  --live-panel-image: url("/assets/ui-live2-deep-drill.png");
  --portrait-image: url("/assets/ui-live2-deep-drill.png");
  --shop-premium-image: url("/assets/ui-live2-deep-drill.png");
  --shop-reveal-image: url("/assets/ui-live2-deep-drill.png");
}

.live2-art-audio-console {
  --live-panel-image: url("/assets/ui-live2-audio-console.png");
  --portrait-image: url("/assets/ui-live2-audio-console.png");
}

.live3-art-upgrade-forge {
  --live3-image: url("/assets/ui-live3-upgrade-forge.png");
  --upgrade-image: url("/assets/ui-live3-upgrade-forge.png");
  --reward-image: url("/assets/ui-live3-upgrade-forge.png");
}

.live3-art-miner-advanced {
  --live3-image: url("/assets/ui-live3-miner-advanced.png");
  --upgrade-image: url("/assets/ui-live3-miner-advanced.png");
  --reward-image: url("/assets/ui-live3-miner-advanced.png");
}

.live3-art-miner-elite {
  --live3-image: url("/assets/ui-live3-miner-elite.png");
  --upgrade-image: url("/assets/ui-live3-miner-elite.png");
  --reward-image: url("/assets/ui-live3-miner-elite.png");
}

.live3-art-elevator-engine {
  --live3-image: url("/assets/ui-live3-elevator-engine.png");
  --upgrade-image: url("/assets/ui-live3-elevator-engine.png");
  --reward-image: url("/assets/ui-live3-elevator-engine.png");
}

.live3-art-warehouse-loader {
  --live3-image: url("/assets/ui-live3-warehouse-loader.png");
  --upgrade-image: url("/assets/ui-live3-warehouse-loader.png");
  --reward-image: url("/assets/ui-live3-warehouse-loader.png");
}

.live3-art-milestone-burst {
  --live3-image: url("/assets/ui-live3-milestone-burst.png");
  --upgrade-image: url("/assets/ui-live3-milestone-burst.png");
  --reward-image: url("/assets/ui-live3-milestone-burst.png");
}

.offline2-art-vault {
  --offline2-image: url("/assets/motion-live17-offline-reward-cache.png?v=live17-offline");
}

.offline2-art-server-clock {
  --offline2-image: url("/assets/ui-offline2-server-clock.png");
}

.offline2-art-ore-cart {
  --offline2-image: url("/assets/motion-live17-offline-reward-cart.png?v=live17-offline");
}

.offline2-art-bonus-projector {
  --offline2-image: url("/assets/motion-live17-offline-reward-projector.png?v=live17-offline");
}

.offline2-art-server-shield {
  --offline2-image: url("/assets/ui-offline2-server-shield.png");
}

.offline2-art-rest-camp {
  --offline2-image: url("/assets/motion-live17-offline-reward-camp.png?v=live17-offline");
}

.live4-art-dispatch-desk {
  --live4-image: url("/assets/ui-live4-dispatch-desk.png");
  --manager-fx-image: url("/assets/ui-live4-dispatch-desk.png");
  --action-image: url("/assets/ui-live4-dispatch-desk.png");
  --shop-premium-image: url("/assets/ui-live4-dispatch-desk.png");
  --shop-reveal-image: url("/assets/ui-live4-dispatch-desk.png");
  --portrait-image: url("/assets/ui-live4-dispatch-desk.png");
}

.live4-art-skill-console {
  --live4-image: url("/assets/ui-live4-skill-console.png");
  --manager-fx-image: url("/assets/ui-live4-skill-console.png");
  --action-image: url("/assets/ui-live4-skill-console.png");
  --shop-premium-image: url("/assets/ui-live4-skill-console.png");
  --shop-reveal-image: url("/assets/ui-live4-skill-console.png");
  --portrait-image: url("/assets/ui-live4-skill-console.png");
}

.live4-art-hire-contract {
  --live4-image: url("/assets/ui-live4-promotion-manual.png");
  --manager-fx-image: url("/assets/ui-live4-promotion-manual.png");
  --action-image: url("/assets/ui-live4-promotion-manual.png");
  --shop-premium-image: url("/assets/ui-live4-promotion-manual.png");
  --shop-reveal-image: url("/assets/ui-live4-promotion-manual.png");
  --portrait-image: url("/assets/ui-live4-promotion-manual.png");
}

.live4-art-promotion-manual {
  --live4-image: url("/assets/ui-live4-promotion-manual.png");
  --manager-fx-image: url("/assets/ui-live4-promotion-manual.png");
  --action-image: url("/assets/ui-live4-promotion-manual.png");
  --shop-premium-image: url("/assets/ui-live4-promotion-manual.png");
  --shop-reveal-image: url("/assets/ui-live4-promotion-manual.png");
  --portrait-image: url("/assets/ui-live4-promotion-manual.png");
}

.live4-art-shop-counter {
  --live4-image: url("/assets/ui-live4-shop-counter.png");
  --manager-fx-image: url("/assets/ui-live4-shop-counter.png");
  --action-image: url("/assets/ui-live4-shop-counter.png");
  --shop-premium-image: url("/assets/ui-live4-shop-counter.png");
  --shop-reveal-image: url("/assets/ui-live4-shop-counter.png");
  --portrait-image: url("/assets/ui-live4-shop-counter.png");
}

.live4-art-server-receipt {
  --live4-image: url("/assets/ui-live4-server-receipt.png");
  --manager-fx-image: url("/assets/ui-live4-server-receipt.png");
  --action-image: url("/assets/ui-live4-server-receipt.png");
  --shop-premium-image: url("/assets/ui-live4-server-receipt.png");
  --shop-reveal-image: url("/assets/ui-live4-server-receipt.png");
  --portrait-image: url("/assets/ui-live4-server-receipt.png");
}

.live4-art-offer-conveyor {
  --live4-image: url("/assets/ui-live4-offer-conveyor.png");
  --manager-fx-image: url("/assets/ui-live4-offer-conveyor.png");
  --action-image: url("/assets/ui-live4-offer-conveyor.png");
  --shop-premium-image: url("/assets/ui-live4-offer-conveyor.png");
  --shop-reveal-image: url("/assets/ui-live4-offer-conveyor.png");
  --portrait-image: url("/assets/ui-live4-offer-conveyor.png");
}

.live5-art-contract-broker {
  --live5-image: url("/assets/ui-live5-contract-broker.png");
  --shop-premium-image: url("/assets/ui-live5-contract-broker.png");
  --contract-image: url("/assets/ui-live5-contract-broker.png");
  --contract2-image: url("/assets/ui-live5-contract-broker.png");
  --portrait-image: url("/assets/ui-live5-contract-broker.png");
}

.live5-art-card-scanner {
  --live5-image: url("/assets/ui-live5-card-scanner.png");
  --shop-premium-image: url("/assets/ui-live5-card-scanner.png");
  --contract-image: url("/assets/ui-live5-card-scanner.png");
  --contract2-image: url("/assets/ui-live5-card-scanner.png");
  --portrait-image: url("/assets/ui-live5-card-scanner.png");
}

.live5-art-rarity-podium {
  --live5-image: url("/assets/ui-live5-rarity-podium.png");
  --shop-premium-image: url("/assets/ui-live5-rarity-podium.png");
  --contract-image: url("/assets/ui-live5-rarity-podium.png");
  --contract2-image: url("/assets/ui-live5-rarity-podium.png");
  --portrait-image: url("/assets/ui-live5-rarity-podium.png");
}

.live5-art-stamped-contract {
  --live5-image: url("/assets/ui-live5-stamped-contract.png");
  --shop-premium-image: url("/assets/ui-live5-stamped-contract.png");
  --contract-image: url("/assets/ui-live5-stamped-contract.png");
  --contract2-image: url("/assets/ui-live5-stamped-contract.png");
  --portrait-image: url("/assets/ui-live5-stamped-contract.png");
}

.live5-art-card-stack {
  --live5-image: url("/assets/ui-live5-card-stack.png");
  --shop-premium-image: url("/assets/ui-live5-card-stack.png");
  --contract-image: url("/assets/ui-live5-card-stack.png");
  --contract2-image: url("/assets/ui-live5-card-stack.png");
  --portrait-image: url("/assets/ui-live5-card-stack.png");
}

.live5-art-deal-vault {
  --live5-image: url("/assets/ui-live5-deal-vault.png");
  --shop-premium-image: url("/assets/ui-live5-deal-vault.png");
  --contract-image: url("/assets/ui-live5-deal-vault.png");
  --contract2-image: url("/assets/ui-live5-deal-vault.png");
  --portrait-image: url("/assets/ui-live5-deal-vault.png");
}

.live6-art-manager-holo {
  --live6-image: url("/assets/ui-live6-manager-holo.png");
  --manager-fx-image: url("/assets/ui-live6-manager-holo.png");
  --action-image: url("/assets/ui-live6-manager-holo.png");
  --portrait-image: url("/assets/ui-live6-manager-holo.png");
}

.live6-art-skill-dial {
  --live6-image: url("/assets/ui-live6-skill-dial.png");
  --manager-fx-image: url("/assets/ui-live6-skill-dial.png");
  --action-image: url("/assets/ui-live6-skill-dial.png");
  --portrait-image: url("/assets/ui-live6-skill-dial.png");
}

.live6-art-cooldown-clock {
  --live6-image: url("/assets/ui-live6-cooldown-clock.png");
  --manager-fx-image: url("/assets/ui-live6-cooldown-clock.png");
  --action-image: url("/assets/ui-live6-cooldown-clock.png");
  --portrait-image: url("/assets/ui-live6-cooldown-clock.png");
}

.live6-art-rarity-frame {
  --live6-image: url("/assets/ui-live6-rarity-frame.png");
  --manager-fx-image: url("/assets/ui-live6-rarity-frame.png");
  --action-image: url("/assets/ui-live6-rarity-frame.png");
  --portrait-image: url("/assets/ui-live6-rarity-frame.png");
}

.live6-art-upgrade-forge {
  --live6-image: url("/assets/ui-live6-upgrade-forge.png");
  --manager-fx-image: url("/assets/ui-live6-upgrade-forge.png");
  --action-image: url("/assets/ui-live6-upgrade-forge.png");
  --portrait-image: url("/assets/ui-live6-upgrade-forge.png");
}

.live6-art-assign-terminal {
  --live6-image: url("/assets/ui-live6-assign-terminal.png");
  --manager-fx-image: url("/assets/ui-live6-assign-terminal.png");
  --action-image: url("/assets/ui-live6-assign-terminal.png");
  --portrait-image: url("/assets/ui-live6-assign-terminal.png");
}

.live7-art-chest-vault {
  --live7-image: url("/assets/ui-live7-chest-vault.png");
  --chest-image: url("/assets/ui-live7-chest-vault.png");
  --shop-premium-image: url("/assets/ui-live7-chest-vault.png");
  --shop-reveal-image: url("/assets/ui-live7-chest-vault.png");
  --portrait-image: url("/assets/ui-live7-chest-vault.png");
}

.live7-art-card-turbine {
  --live7-image: url("/assets/ui-live7-card-turbine.png");
  --chest-image: url("/assets/ui-live7-card-turbine.png");
  --shop-premium-image: url("/assets/ui-live7-card-turbine.png");
  --shop-reveal-image: url("/assets/ui-live7-card-turbine.png");
  --portrait-image: url("/assets/ui-live7-card-turbine.png");
}

.live7-art-rarity-laser {
  --live7-image: url("/assets/ui-live7-rarity-laser.png");
  --chest-image: url("/assets/ui-live7-rarity-laser.png");
  --shop-premium-image: url("/assets/ui-live7-rarity-laser.png");
  --shop-reveal-image: url("/assets/ui-live7-rarity-laser.png");
  --portrait-image: url("/assets/ui-live7-rarity-laser.png");
}

.live7-art-elite-pack {
  --live7-image: url("/assets/ui-live7-elite-pack.png");
  --chest-image: url("/assets/ui-live7-elite-pack.png");
  --shop-premium-image: url("/assets/ui-live7-elite-pack.png");
  --shop-reveal-image: url("/assets/ui-live7-elite-pack.png");
  --portrait-image: url("/assets/ui-live7-elite-pack.png");
}

.live7-art-gem-slot {
  --live7-image: url("/assets/ui-live7-gem-slot.png");
  --chest-image: url("/assets/ui-live7-gem-slot.png");
  --shop-premium-image: url("/assets/ui-live7-gem-slot.png");
  --shop-reveal-image: url("/assets/ui-live7-gem-slot.png");
  --portrait-image: url("/assets/ui-live7-gem-slot.png");
}

.live7-art-reward-ramp {
  --live7-image: url("/assets/ui-live7-reward-ramp.png");
  --chest-image: url("/assets/ui-live7-reward-ramp.png");
  --shop-premium-image: url("/assets/ui-live7-reward-ramp.png");
  --shop-reveal-image: url("/assets/ui-live7-reward-ramp.png");
  --portrait-image: url("/assets/ui-live7-reward-ramp.png");
}

.live8-art-turbo-reactor {
  --live8-image: url("/assets/ui-live8-turbo-reactor.png");
  --live-panel-image: url("/assets/ui-live8-turbo-reactor.png");
  --shop-premium-image: url("/assets/ui-live8-turbo-reactor.png");
  --shop-reveal-image: url("/assets/ui-live8-turbo-reactor.png");
  --portrait-image: url("/assets/ui-live8-turbo-reactor.png");
}

.live8-art-boost-cell {
  --live8-image: url("/assets/ui-live8-boost-cell.png");
  --live-panel-image: url("/assets/ui-live8-boost-cell.png");
  --shop-premium-image: url("/assets/ui-live8-boost-cell.png");
  --shop-reveal-image: url("/assets/ui-live8-boost-cell.png");
  --portrait-image: url("/assets/ui-live8-boost-cell.png");
}

.live8-art-overload-core {
  --live8-image: url("/assets/ui-live8-overload-core.png");
  --live-panel-image: url("/assets/ui-live8-overload-core.png");
  --shop-premium-image: url("/assets/ui-live8-overload-core.png");
  --shop-reveal-image: url("/assets/ui-live8-overload-core.png");
  --portrait-image: url("/assets/ui-live8-overload-core.png");
}

.live8-art-server-timer {
  --live8-image: url("/assets/ui-live8-server-timer.png");
  --live-panel-image: url("/assets/ui-live8-server-timer.png");
  --shop-premium-image: url("/assets/ui-live8-server-timer.png");
  --shop-reveal-image: url("/assets/ui-live8-server-timer.png");
  --portrait-image: url("/assets/ui-live8-server-timer.png");
}

.live8-art-energy-conduit {
  --live8-image: url("/assets/ui-live8-energy-conduit.png");
  --live-panel-image: url("/assets/ui-live8-energy-conduit.png");
  --shop-premium-image: url("/assets/ui-live8-energy-conduit.png");
  --shop-reveal-image: url("/assets/ui-live8-energy-conduit.png");
  --portrait-image: url("/assets/ui-live8-energy-conduit.png");
}

.live8-art-offline-capsule {
  --live8-image: url("/assets/ui-live8-offline-capsule.png");
  --live-panel-image: url("/assets/ui-live8-offline-capsule.png");
  --shop-premium-image: url("/assets/ui-live8-offline-capsule.png");
  --shop-reveal-image: url("/assets/ui-live8-offline-capsule.png");
  --portrait-image: url("/assets/ui-live8-offline-capsule.png");
}

.event-reveal {
  position: absolute;
  inset: 0;
  z-index: 83;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(130, 92, 255, 0.26), transparent 178px),
    radial-gradient(circle at 50% 48%, rgba(84, 222, 255, 0.28), transparent 230px),
    rgba(4, 24, 41, 0.72);
  animation: reward-reveal-fade 180ms ease-out both;
}

.event-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(372px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(95, 226, 255, 0.74), transparent 90px),
    radial-gradient(circle at 78% 26%, rgba(179, 111, 255, 0.48), transparent 98px),
    linear-gradient(180deg, #f5fdff, #b3eaff 56%, #527bd0);
  box-shadow: 0 10px 0 rgba(33, 57, 113, 0.48), 0 24px 44px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.event-reveal-card::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.54), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(90, 225, 255, 0.72), transparent, rgba(177, 105, 255, 0.62), transparent, rgba(255, 226, 75, 0.52), transparent);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: season-aura-spin 4.1s linear infinite;
}

.event-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.56) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.event-reveal-card > * {
  position: relative;
  z-index: 2;
}

.event-reveal-art {
  position: relative;
  display: block;
  width: 166px;
  height: 140px;
  background: var(--event-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(22, 49, 102, 0.24)) drop-shadow(0 0 30px rgba(88, 222, 255, 0.74));
  animation: event-portal-pop 1.25s ease-in-out infinite;
}

.event-reveal-card > small {
  color: #08628d;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.event-reveal-card > strong {
  max-width: 100%;
  color: #15364e;
  font-size: 1.2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.event-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.event-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #164158;
  font-size: 0.72rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-reveal-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.48);
  font-weight: 1000;
}

.event-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.event-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #54ddff 50%, #b76dff);
  box-shadow: 0 0 13px rgba(88, 225, 255, 0.78);
  transform: rotate(calc(var(--i) * 15deg)) translateY(-20px);
  animation: event-spark-fly 1100ms ease-out forwards;
  animation-delay: calc(var(--i) * 16ms);
}

.contract-reveal {
  position: absolute;
  inset: 0;
  z-index: 83;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 225, 77, 0.28), transparent 178px),
    radial-gradient(circle at 50% 48%, rgba(82, 218, 255, 0.26), transparent 230px),
    rgba(4, 24, 41, 0.72);
  animation: reward-reveal-fade 180ms ease-out both;
}

.contract-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(372px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 239, 113, 0.74), transparent 90px),
    radial-gradient(circle at 78% 26%, rgba(77, 220, 255, 0.46), transparent 98px),
    linear-gradient(180deg, #fff9d6, #b9ecff 56%, #3d9ed0);
  box-shadow: 0 10px 0 rgba(93, 58, 14, 0.44), 0 24px 44px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.contract-reveal-card::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.52), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 75, 0.72), transparent, rgba(72, 220, 255, 0.62), transparent);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: season-aura-spin 4.1s linear infinite;
}

.contract-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.56) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.contract-reveal-card > * {
  position: relative;
  z-index: 2;
}

.contract-reveal-stage {
  position: relative;
  display: grid;
  grid-template-columns: 112px 142px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 142px;
}

.contract-reveal-desk {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  display: block;
  width: 238px;
  height: 174px;
  pointer-events: none;
  background: var(--live5-image, var(--live-panel-image)) center / contain no-repeat;
  opacity: 0.22;
  transform: translate(-50%, -50%) scale(0.82);
  filter: drop-shadow(0 0 26px rgba(255, 224, 77, 0.58));
  animation: contract-desk-glow 1.45s ease-in-out infinite;
}

.contract-reveal-broker,
.contract-reveal-scanner,
.contract-reveal-stamp {
  position: absolute;
  display: block;
  pointer-events: none;
  background: var(--live5-image) center / contain no-repeat;
}

.contract-reveal-broker {
  left: -56px;
  top: -16px;
  z-index: 1;
  width: 106px;
  height: 106px;
  filter: drop-shadow(0 8px 0 rgba(91, 56, 15, 0.2)) drop-shadow(0 0 20px rgba(255, 223, 76, 0.62));
  animation: live5-broker-float 1.5s ease-in-out infinite;
}

.contract-reveal-scanner {
  right: -62px;
  top: -14px;
  z-index: 1;
  width: 126px;
  height: 126px;
  filter: drop-shadow(0 7px 0 rgba(12, 64, 98, 0.2)) drop-shadow(0 0 23px rgba(76, 224, 255, 0.72));
  animation: live5-scanner-pulse 1.18s ease-in-out infinite;
}

.contract-reveal-scanner i,
.contract-reveal-scanner b {
  position: absolute;
  display: block;
  pointer-events: none;
}

.contract-reveal-scanner i {
  left: 28px;
  top: 60px;
  width: 70px;
  height: 4px;
  border-radius: 999px;
  background: #54e5ff;
  box-shadow: 0 0 14px rgba(84, 229, 255, 0.9);
  animation: live5-scan-beam 760ms ease-in-out infinite;
}

.contract-reveal-scanner b {
  left: 52px;
  top: 21px;
  width: 22px;
  height: 28px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff1a9, #ffb334);
  box-shadow: 0 0 14px rgba(255, 226, 75, 0.8);
  transform: rotate(-8deg);
  animation: live5-contract-stamp 1s ease-in-out infinite;
}

.contract-reveal-stamp {
  right: 2px;
  bottom: 0;
  z-index: 3;
  width: 66px;
  height: 66px;
  filter: drop-shadow(0 5px 0 rgba(91, 56, 15, 0.18)) drop-shadow(0 0 16px rgba(255, 224, 75, 0.66));
  animation: live5-contract-stamp 1.15s ease-in-out infinite;
}

.contract-reveal-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 136px;
  z-index: 2;
  background: var(--live5-image, var(--contract2-image)) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(91, 56, 15, 0.22)) drop-shadow(0 0 26px rgba(255, 223, 74, 0.66));
  animation: contract-card-frame-bob 1.16s ease-in-out infinite;
}

.contract-reveal-frame .portrait.asset-portrait {
  width: 64px;
  height: 72px;
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 54, 86, 0.38), 0 0 17px rgba(255, 224, 75, 0.5);
}

.contract-reveal-art {
  position: relative;
  display: block;
  width: 142px;
  height: 124px;
  z-index: 2;
  background: var(--live5-image, var(--contract2-image, var(--contract-image))) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(91, 56, 15, 0.22)) drop-shadow(0 0 30px rgba(255, 223, 74, 0.72));
  animation: contract-reward-pile-pop 1.12s ease-in-out infinite;
}

.contract-reveal-card > small {
  color: #8b540b;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.contract-reveal-card > strong {
  max-width: 100%;
  color: #15364e;
  font-size: 1.2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.contract-reveal-manager {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 62px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
  text-align: left;
}

.contract-reveal-manager .portrait {
  width: 48px;
  height: 48px;
}

.contract-reveal-manager .portrait.asset-portrait {
  background-size: cover;
}

.contract-reveal-manager b,
.contract-reveal-manager em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-reveal-manager b {
  color: #173046;
  font-size: 0.85rem;
  font-weight: 1000;
}

.contract-reveal-manager em {
  color: #70522b;
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 900;
}

.contract-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.contract-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #164158;
  font-size: 0.72rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-reveal-card button {
  min-width: 150px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.48);
  font-weight: 1000;
}

.contract-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.contract-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffdf4a 58%, #54ddff);
  box-shadow: 0 0 13px rgba(255, 225, 76, 0.78);
  transform: rotate(calc(var(--i) * 16.36deg)) translateY(-20px);
  animation: season-spark-fly 1100ms ease-out forwards;
  animation-delay: calc(var(--i) * 16ms);
}

.profile-reveal {
  position: absolute;
  inset: 0;
  z-index: 83;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(82, 220, 255, 0.26), transparent 178px),
    radial-gradient(circle at 50% 48%, rgba(255, 226, 80, 0.25), transparent 230px),
    rgba(4, 24, 41, 0.7);
  animation: reward-reveal-fade 180ms ease-out both;
}

.profile-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(372px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(109, 235, 255, 0.72), transparent 88px),
    radial-gradient(circle at 78% 26%, rgba(255, 226, 75, 0.48), transparent 98px),
    linear-gradient(180deg, #f5fdff, #a8edff 56%, #3d9ed0);
  box-shadow: 0 10px 0 rgba(13, 68, 93, 0.52), 0 24px 44px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.profile-reveal-card::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.54), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(72, 221, 255, 0.7), transparent, rgba(255, 226, 75, 0.66), transparent);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: season-aura-spin 4.1s linear infinite;
}

.profile-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.56) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.profile-reveal-card > * {
  position: relative;
  z-index: 2;
}

.profile-reveal-art {
  position: relative;
  display: block;
  width: 166px;
  height: 140px;
  background: var(--profile-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(10, 63, 91, 0.22)) drop-shadow(0 0 30px rgba(82, 221, 255, 0.74));
  animation: season-chest-pop 1.25s ease-in-out infinite;
}

.profile-reveal-card > small {
  color: #08628d;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.profile-reveal-card > strong {
  max-width: 100%;
  color: #15364e;
  font-size: 1.2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.profile-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.profile-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #164158;
  font-size: 0.72rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-reveal-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.48);
  font-weight: 1000;
}

.profile-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.profile-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #54ddff 58%, #ffdf4a);
  box-shadow: 0 0 13px rgba(88, 225, 255, 0.78);
  transform: rotate(calc(var(--i) * 18deg)) translateY(-20px);
  animation: season-spark-fly 1100ms ease-out forwards;
  animation-delay: calc(var(--i) * 16ms);
}

.league-reveal {
  position: absolute;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 226, 80, 0.27), transparent 178px),
    radial-gradient(circle at 50% 48%, rgba(82, 218, 255, 0.3), transparent 230px),
    rgba(4, 24, 41, 0.72);
  animation: reward-reveal-fade 180ms ease-out both;
}

.league-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(372px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 246, 121, 0.74), transparent 90px),
    radial-gradient(circle at 78% 26%, rgba(67, 218, 255, 0.46), transparent 98px),
    linear-gradient(180deg, #f7fdff, #b2ebff 56%, #5b77d6);
  box-shadow: 0 10px 0 rgba(33, 57, 113, 0.5), 0 24px 44px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.league-reveal-card::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.54), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 227, 75, 0.72), transparent, rgba(72, 220, 255, 0.66), transparent, rgba(141, 101, 255, 0.52), transparent);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: season-aura-spin 4.1s linear infinite;
}

.league-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.58) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.league-reveal-card > * {
  position: relative;
  z-index: 2;
}

.league-reveal-art {
  position: relative;
  display: block;
  width: 166px;
  height: 140px;
  background: var(--league-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(18, 55, 111, 0.24)) drop-shadow(0 0 30px rgba(255, 224, 74, 0.74));
  animation: league-trophy-float 1.2s ease-in-out infinite;
}

.league-reveal-card > small {
  color: #08628d;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.league-reveal-card > strong {
  max-width: 100%;
  color: #15364e;
  font-size: 1.2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.league-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.league-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #164158;
  font-size: 0.72rem;
  font-weight: 1000;
  line-height: 1.05;
  text-wrap: balance;
}

.league-reveal-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.48);
  font-weight: 1000;
}

.league-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.league-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffdf4a 48%, #54ddff);
  box-shadow: 0 0 13px rgba(255, 225, 76, 0.78);
  transform: rotate(calc(var(--i) * 15deg)) translateY(-20px);
  animation: league-spark-fly 1100ms ease-out forwards;
  animation-delay: calc(var(--i) * 15ms);
}

.season-reveal {
  position: absolute;
  inset: 0;
  z-index: 83;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 226, 80, 0.24), transparent 178px),
    radial-gradient(circle at 50% 48%, rgba(82, 218, 255, 0.28), transparent 230px),
    rgba(4, 24, 41, 0.7);
  animation: reward-reveal-fade 180ms ease-out both;
}

.season-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(372px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 246, 121, 0.72), transparent 90px),
    radial-gradient(circle at 78% 26%, rgba(67, 218, 255, 0.44), transparent 98px),
    linear-gradient(180deg, #f3fcff, #a4e5f7 56%, #3b98c7);
  box-shadow: 0 10px 0 rgba(13, 68, 93, 0.52), 0 24px 44px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.season-reveal-card::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.54), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 227, 75, 0.72), transparent, rgba(72, 220, 255, 0.62), transparent);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: season-aura-spin 4.1s linear infinite;
}

.season-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.56) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.season-reveal-card > * {
  position: relative;
  z-index: 2;
}

.season-reveal-art {
  position: relative;
  display: block;
  width: 166px;
  height: 140px;
  background: var(--season-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(10, 63, 91, 0.22)) drop-shadow(0 0 30px rgba(255, 223, 74, 0.74));
  animation: season-chest-pop 1.25s ease-in-out infinite;
}

.season-reveal-card > small {
  color: #08628d;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-reveal-card > strong {
  max-width: 100%;
  color: #15364e;
  font-size: 1.2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.season-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(302px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.season-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #164158;
  font-size: 0.72rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-reveal-card button {
  min-width: 132px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.48);
  font-weight: 1000;
}

.season-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.season-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffdf4a 58%, #54ddff);
  box-shadow: 0 0 13px rgba(255, 225, 76, 0.78);
  transform: rotate(calc(var(--i) * 16.36deg)) translateY(-20px);
  animation: season-spark-fly 1100ms ease-out forwards;
}

.prestige-reveal {
  position: absolute;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(82, 218, 255, 0.28), transparent 170px),
    radial-gradient(circle at 50% 48%, rgba(255, 226, 80, 0.22), transparent 230px),
    rgba(4, 24, 41, 0.72);
  animation: reward-reveal-fade 180ms ease-out both;
}

.prestige-reveal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(372px, 92vw);
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  color: #12384f;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 246, 121, 0.7), transparent 90px),
    radial-gradient(circle at 78% 26%, rgba(67, 218, 255, 0.44), transparent 98px),
    linear-gradient(180deg, #edfaff, #8eddf3 56%, #338fc2);
  box-shadow: 0 10px 0 rgba(13, 68, 93, 0.52), 0 24px 44px rgba(0, 0, 0, 0.42);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.prestige-reveal-card::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55), transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255, 227, 75, 0.72), transparent, rgba(72, 220, 255, 0.62), transparent);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: prestige-aura-spin 4.1s linear infinite;
}

.prestige-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.56) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-78%);
  animation: reward-card-shine 1.45s ease-out 240ms both;
}

.prestige-reveal-card > * {
  position: relative;
  z-index: 2;
}

.prestige-reveal-art {
  position: relative;
  display: block;
  width: 166px;
  height: 142px;
  background: var(--prestige-image) center / contain no-repeat;
  filter: drop-shadow(0 9px 0 rgba(10, 63, 91, 0.22)) drop-shadow(0 0 30px rgba(84, 221, 255, 0.74));
  animation: prestige-portal-pulse 1.25s ease-in-out infinite;
}

.prestige-reveal-art i {
  width: 130px;
  height: 58px;
}

.prestige-reveal-card > small {
  color: #08628d;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.prestige-reveal-card > strong {
  max-width: 100%;
  color: #15364e;
  font-size: 1.35rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.prestige-reveal-card p {
  max-width: 300px;
  margin: 0;
  color: #26566c;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.12;
}

.prestige-reveal-strip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  width: min(292px, 100%);
  min-height: 46px;
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.prestige-reveal-strip b {
  min-width: 0;
  overflow: hidden;
  color: #164158;
  font-size: 0.74rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prestige-reveal-card button {
  min-width: 148px;
  min-height: 38px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff06d, #ff9f29);
  box-shadow: 0 4px 0 rgba(126, 67, 8, 0.45), 0 0 16px rgba(255, 221, 74, 0.48);
  font-weight: 1000;
}

.prestige-reveal-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.prestige-reveal-sparks i {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #54ddff 58%, #ffdb4a);
  box-shadow: 0 0 13px rgba(83, 216, 255, 0.78);
  transform: rotate(calc(var(--i) * 15deg)) translateY(-20px);
  animation: prestige-spark-fly 1100ms ease-out forwards;
}

.event-center-art.live-art-event-portal,
.season-hero-art.live-art-season-podium,
.league-panel-art.live-art-season-podium,
.profile-hero-art.live-art-profile-sync,
.prestige-orbit.live-art-prestige-reactor {
  background: var(--live-panel-image) center / contain no-repeat;
}

.event-live-chest,
.season-live-daily,
.league-live-reward,
.profile-live-terminal,
.prestige-live-reactor,
.event-reveal-card > .event-reveal-live-chest,
.season-reveal-card > .season-reveal-live-chest {
  position: absolute;
  display: block;
  background: var(--live-panel-image) center / contain no-repeat;
  pointer-events: none;
}

.event-live-chest {
  right: -24px;
  bottom: 56px;
  z-index: 0;
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 7px 0 rgba(86, 51, 11, 0.24)) drop-shadow(0 0 20px rgba(255, 224, 75, 0.72));
  opacity: 0.48;
  animation: live-meta-float 1.4s ease-in-out infinite;
}

.season-live-daily {
  right: -7px;
  top: 6px;
  z-index: 0;
  width: 94px;
  height: 94px;
  --live-pulse-min: 0.32;
  --live-pulse-max: 0.5;
  filter: drop-shadow(0 7px 0 rgba(96, 58, 10, 0.22)) drop-shadow(0 0 19px rgba(255, 224, 75, 0.64));
  opacity: 0.44;
  transform: rotate(5deg);
  animation: live-meta-pulse 1.6s ease-in-out infinite;
}

.league-live-reward {
  right: -8px;
  top: 5px;
  z-index: 0;
  width: 90px;
  height: 90px;
  --live-pulse-min: 0.3;
  --live-pulse-max: 0.48;
  filter: drop-shadow(0 7px 0 rgba(96, 58, 10, 0.22)) drop-shadow(0 0 18px rgba(255, 224, 75, 0.62));
  opacity: 0.42;
  transform: rotate(4deg);
  animation: live-meta-pulse 1.55s ease-in-out infinite;
}

.profile-live-terminal {
  right: -10px;
  top: 6px;
  z-index: 1;
  width: 104px;
  height: 98px;
  filter: drop-shadow(0 8px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 22px rgba(82, 221, 255, 0.64));
  opacity: 0.46;
  transform: rotate(4deg);
  animation: live-sync-bob 1.45s ease-in-out infinite;
}

.profile-live-terminal::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 12%;
  top: 28%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  opacity: 0.78;
  animation: live-sync-scan 1.2s ease-in-out infinite;
}

.prestige-live-reactor {
  right: -10px;
  top: 5px;
  z-index: 1;
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 8px 0 rgba(10, 72, 102, 0.18)) drop-shadow(0 0 24px rgba(84, 221, 255, 0.68));
  opacity: 0.52;
  transform: rotate(3deg);
  animation: prestige-portal-pulse 1.35s ease-in-out infinite;
}

.prestige-live-reactor::after {
  content: "";
  position: absolute;
  inset: 24%;
  border: 3px solid rgba(93, 226, 255, 0.76);
  border-left-color: rgba(255, 231, 83, 0.86);
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(83, 223, 255, 0.72));
  animation: prestige-ring-spin 1.25s linear infinite;
}

.event-reveal-card > .event-reveal-live-chest,
.season-reveal-card > .season-reveal-live-chest {
  right: 14px;
  top: 102px;
  z-index: 1;
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 8px 0 rgba(95, 57, 10, 0.24)) drop-shadow(0 0 20px rgba(255, 224, 75, 0.72));
  opacity: 0.82;
  animation: live-meta-float 1.2s ease-in-out infinite;
}

.profile-reveal-art.live-art-profile-sync,
.prestige-reveal-art.live-art-prestige-reactor,
.event-reveal-art.live-art-event-portal,
.season-reveal-art.live-art-season-podium,
.league-reveal-art.live-art-season-podium {
  background: var(--live-panel-image) center / contain no-repeat;
}

@keyframes live-meta-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.025);
  }
}

@keyframes live-meta-pulse {
  0%,
  100% {
    filter: drop-shadow(0 7px 0 rgba(96, 58, 10, 0.22)) drop-shadow(0 0 14px rgba(255, 224, 75, 0.5));
    opacity: var(--live-pulse-min, 0.52);
  }
  50% {
    filter: drop-shadow(0 7px 0 rgba(96, 58, 10, 0.22)) drop-shadow(0 0 27px rgba(255, 240, 110, 0.86));
    opacity: var(--live-pulse-max, 0.78);
  }
}

@keyframes live-sync-bob {
  0%,
  100% {
    transform: translateY(0) rotate(4deg);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}

@keyframes live-sync-scan {
  0% {
    transform: translateY(-12px);
    opacity: 0;
  }
  35%,
  70% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(28px);
    opacity: 0;
  }
}

@keyframes live-boost-machine {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 18px rgba(80, 222, 255, 0.56));
  }
  45% {
    transform: translateY(-3px) scale(1.025);
    filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 30px rgba(80, 222, 255, 0.88));
  }
  58% {
    transform: translateY(-2px) scale(1.01) rotate(-1deg);
  }
}

@keyframes live8-reactor-pulse {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
    filter: drop-shadow(0 8px 0 rgba(10, 67, 103, 0.22)) drop-shadow(0 0 22px rgba(80, 222, 255, 0.68));
  }
  48% {
    transform: translateY(-5px) rotate(1deg) scale(1.05);
    filter: drop-shadow(0 8px 0 rgba(10, 67, 103, 0.22)) drop-shadow(0 0 34px rgba(255, 226, 75, 0.86));
  }
}

@keyframes live8-timer-tick {
  0%,
  100% {
    opacity: 0.34;
    transform: translateY(2px) scale(0.94);
  }
  50% {
    opacity: 0.58;
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes live8-conduit-flow {
  0%,
  100% {
    opacity: 0.24;
    transform: translateX(5px) translateY(4px) rotate(-3deg) scale(0.94);
  }
  50% {
    opacity: 0.52;
    transform: translateX(-5px) translateY(-4px) rotate(2deg) scale(1.05);
  }
}

@keyframes live8-offline-capsule {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(3px) rotate(2deg) scale(0.94);
  }
  50% {
    opacity: 0.48;
    transform: translateY(-4px) rotate(-1deg) scale(1.04);
  }
}

@keyframes live8-mini-pop {
  0%,
  100% {
    transform: translateY(0) scale(0.96);
  }
  50% {
    transform: translateY(-3px) scale(1.08);
  }
}

@keyframes live8-booster-cell {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scale(0.98);
  }
  48% {
    transform: translateY(-4px) rotate(2deg) scale(1.07);
  }
  72% {
    transform: translateY(1px) rotate(0deg) scale(0.99);
  }
}

@keyframes live-drill-rumble {
  0%,
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }
  25% {
    transform: translate(1px, -1px) rotate(-5deg);
  }
  50% {
    transform: translate(-1px, 1px) rotate(-3deg);
  }
  75% {
    transform: translate(1px, 0) rotate(-4.5deg);
  }
}

@keyframes audio-bar-dance {
  0%,
  100% {
    transform: scaleY(0.58);
    opacity: 0.74;
  }
  42% {
    transform: scaleY(1.18);
    opacity: 1;
  }
  68% {
    transform: scaleY(0.86);
    opacity: 0.9;
  }
}

@keyframes milestone-aura-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes milestone-forge-work {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
    filter: drop-shadow(0 5px 0 rgba(96, 50, 12, 0.22)) drop-shadow(0 0 13px rgba(255, 224, 75, 0.68));
  }
  48% {
    transform: translateY(-3px) rotate(1deg);
    filter: drop-shadow(0 5px 0 rgba(96, 50, 12, 0.22)) drop-shadow(0 0 24px rgba(255, 224, 75, 0.92));
  }
}

@keyframes milestone-icon-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.05);
  }
}

@keyframes milestone-burst-pulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.64;
  }
  45% {
    transform: scale(0.92);
    opacity: 0.96;
  }
}

@keyframes upgrade-reveal-burst-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(0.76);
    opacity: 0.6;
  }
  45% {
    transform: translateX(-50%) scale(1);
    opacity: 0.96;
  }
}

@keyframes milestone-side-pop {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

@keyframes elevator-engine-pulse {
  0%,
  100% {
    transform: translateY(0) scale(0.95);
  }
  48% {
    transform: translateY(-2px) scale(1.02);
  }
}

@keyframes upgrade-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 16.4deg)) translateY(-16px) scale(0.5);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 16.4deg)) translateY(-184px) scale(1);
  }
}

.offline-return-modal {
  z-index: 87;
  background: rgba(5, 28, 45, 0.64);
  backdrop-filter: blur(2px);
}

.offline-return-card {
  position: relative;
  width: min(366px, 100%);
  overflow: hidden;
  gap: 8px;
  padding: 16px 14px 14px;
  border-color: rgba(255, 255, 255, 0.86);
  color: #173249;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 242, 101, 0.75), transparent 112px),
    radial-gradient(circle at 14% 84%, rgba(83, 224, 255, 0.48), transparent 118px),
    linear-gradient(180deg, #f9fdff 0%, #caeffc 45%, #ffcf65 100%);
  box-shadow: 0 7px 0 rgba(68, 49, 18, 0.46), 0 22px 44px rgba(0, 0, 0, 0.38);
  isolation: isolate;
}

.offline-return-glow {
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.45), transparent 23%),
    conic-gradient(from 0deg, transparent, rgba(255, 226, 70, 0.48), transparent, rgba(84, 222, 255, 0.42), transparent);
  opacity: 0.66;
  mix-blend-mode: screen;
  animation: offline-return-spin 5s linear infinite;
}

.offline-return-card > * {
  position: relative;
  z-index: 1;
}

.offline-return-card h2 {
  margin: 0;
  color: #12364f;
  font-size: 1.35rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}

.offline-return-body {
  display: grid;
  gap: 8px;
}

.offline-return-stage {
  position: relative;
  min-height: 164px;
  overflow: visible;
}

.offline-hero-art,
.offline-clock-art,
.offline-cart-art,
.offline-return-bonus span,
.offline-stat-grid i {
  display: block;
  background: var(--offline2-image) center / contain no-repeat;
}

.offline-hero-art {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 174px;
  height: 142px;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 0 rgba(91, 56, 14, 0.2)) drop-shadow(0 0 26px rgba(255, 225, 75, 0.78));
  animation: offline-vault-bob 1.35s ease-in-out infinite;
}

.offline-hero-art i,
.offline-hero-art b,
.offline-clock-art i {
  position: absolute;
  pointer-events: none;
}

.offline-hero-art i {
  left: 42px;
  right: 28px;
  bottom: 12px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 58%, #fff5a6 0 5px, transparent 6px),
    radial-gradient(circle at 42% 30%, #54e7ff 0 6px, transparent 7px),
    radial-gradient(circle at 68% 58%, #ffdf4a 0 5px, transparent 6px),
    radial-gradient(circle at 84% 28%, #f04cff 0 5px, transparent 6px);
  opacity: 0.78;
  filter: drop-shadow(0 0 13px rgba(255, 224, 75, 0.72));
  animation: offline-gems-rise 820ms ease-in-out infinite;
}

.offline-hero-art b {
  left: 22px;
  right: 18px;
  top: 12px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 236, 83, 0.55), transparent, rgba(84, 224, 255, 0.48), transparent);
  opacity: 0.58;
  animation: reward-aura-spin 3.4s linear infinite;
}

.offline-clock-art {
  position: absolute;
  left: 8px;
  top: 19px;
  width: 86px;
  height: 92px;
  opacity: 0.96;
  filter: drop-shadow(0 6px 0 rgba(10, 76, 101, 0.16)) drop-shadow(0 0 18px rgba(83, 225, 255, 0.62));
  animation: offline-clock-pulse 1.2s ease-in-out infinite;
}

.offline-clock-art i {
  left: 8px;
  right: 8px;
  top: 9px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(84, 224, 255, 0.58);
  box-shadow: 0 0 18px rgba(84, 224, 255, 0.62);
  animation: offline-clock-ring 1.5s linear infinite;
}

.offline-cart-art {
  position: absolute;
  right: -2px;
  top: 60px;
  width: 106px;
  height: 92px;
  filter: drop-shadow(0 7px 0 rgba(83, 45, 13, 0.18)) drop-shadow(0 0 18px rgba(255, 224, 75, 0.62));
  animation: offline-cart-drive 1.8s cubic-bezier(0.35, 0.02, 0.22, 1) infinite;
}

.live17-offline-stage {
  min-height: 188px;
  margin: -1px -3px 0;
  perspective: 720px;
  isolation: isolate;
}

.live17-offline-stage::before,
.live17-offline-stage::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.live17-offline-stage::before {
  left: 18px;
  right: 18px;
  bottom: 12px;
  z-index: 1;
  height: 48px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 235, 107, 0.5), transparent 56%),
    linear-gradient(90deg, rgba(12, 104, 135, 0.04), rgba(255, 255, 255, 0.5), rgba(11, 87, 123, 0.06));
  filter: blur(1px);
  transform: rotateX(62deg);
}

.live17-offline-stage::after {
  left: 42px;
  right: 42px;
  bottom: 34px;
  z-index: 2;
  height: 7px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(123, 83, 35, 0.9) 0 18px, rgba(255, 214, 87, 0.78) 18px 25px),
    linear-gradient(180deg, #68411f, #2c4655);
  box-shadow: 0 5px 0 rgba(29, 56, 72, 0.2);
}

.offline-live17-rug {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 19px;
  z-index: 2;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 46%, rgba(79, 225, 255, 0.42), transparent 18px),
    radial-gradient(circle at 76% 52%, rgba(255, 221, 62, 0.52), transparent 24px),
    linear-gradient(90deg, rgba(10, 76, 109, 0.14), rgba(255, 255, 255, 0.38), rgba(16, 80, 109, 0.14));
  opacity: 0.9;
  filter: blur(0.6px);
  transform: rotateX(68deg);
  animation: offline-live17-stage-shine 2.6s ease-in-out infinite;
}

.offline-live17-camp,
.offline-live17-projector {
  display: block;
  background: var(--offline2-image) center / contain no-repeat;
}

.live17-offline-stage .offline-live17-cache {
  left: 51%;
  top: 2px;
  z-index: 4;
  width: 198px;
  height: 154px;
  transform-origin: 50% 82%;
  filter: drop-shadow(0 10px 0 rgba(91, 56, 14, 0.19)) drop-shadow(0 0 30px rgba(255, 225, 75, 0.84));
  animation: offline-live17-cache-breathe 1.55s ease-in-out infinite;
}

.live17-offline-stage .offline-live17-cache i {
  left: 50px;
  right: 30px;
  bottom: 19px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 17% 60%, #fff7ae 0 4px, transparent 5px),
    radial-gradient(circle at 38% 24%, #62eaff 0 5px, transparent 6px),
    radial-gradient(circle at 64% 56%, #ffe153 0 4px, transparent 5px),
    radial-gradient(circle at 84% 28%, #f85cff 0 4px, transparent 5px);
  opacity: 0.84;
  filter: drop-shadow(0 0 14px rgba(255, 224, 75, 0.8));
  animation: offline-live17-cache-spark 850ms ease-in-out infinite;
}

.live17-offline-stage .offline-live17-cache b {
  left: 16px;
  right: 16px;
  top: 8px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 238, 104, 0.6), transparent, rgba(84, 224, 255, 0.48), transparent);
  opacity: 0.54;
  animation: reward-aura-spin 3.8s linear infinite;
}

.live17-offline-stage .offline-clock-art {
  left: 10px;
  top: 14px;
  z-index: 5;
  width: 58px;
  height: 62px;
  transform: rotate(-5deg);
  filter: drop-shadow(0 5px 0 rgba(10, 76, 101, 0.16)) drop-shadow(0 0 17px rgba(83, 225, 255, 0.66));
}

.live17-offline-stage .offline-live17-camp {
  position: absolute;
  left: 0;
  bottom: 6px;
  z-index: 3;
  width: 96px;
  height: 78px;
  filter: drop-shadow(0 8px 0 rgba(55, 37, 14, 0.18)) drop-shadow(0 0 14px rgba(255, 205, 76, 0.5));
  animation: offline-live17-camp-breathe 2.2s ease-in-out infinite;
}

.live17-offline-stage .offline-live17-cart {
  right: 20px;
  bottom: 16px;
  top: auto;
  z-index: 5;
  width: 122px;
  height: 88px;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 8px 0 rgba(83, 45, 13, 0.17)) drop-shadow(0 0 18px rgba(255, 224, 75, 0.66));
  animation: offline-live17-cart-run 2.05s cubic-bezier(0.34, 0.02, 0.22, 1) infinite;
}

.live17-offline-stage .offline-live17-cart i {
  position: absolute;
  left: 36px;
  top: 13px;
  width: 43px;
  height: 27px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 54%, rgba(255, 245, 137, 0.9) 0 5px, transparent 6px),
    radial-gradient(circle at 48% 28%, rgba(80, 231, 255, 0.85) 0 5px, transparent 6px),
    radial-gradient(circle at 75% 58%, rgba(255, 91, 205, 0.82) 0 4px, transparent 5px);
  filter: drop-shadow(0 0 10px rgba(255, 225, 75, 0.74));
  animation: offline-live17-cart-gems 640ms ease-in-out infinite;
}

.live17-offline-stage .offline-live17-projector {
  position: absolute;
  right: 0;
  top: 5px;
  z-index: 6;
  width: 80px;
  height: 78px;
  filter: drop-shadow(0 7px 0 rgba(9, 52, 89, 0.14)) drop-shadow(0 0 19px rgba(78, 223, 255, 0.72));
  animation: offline-live17-projector 1.35s ease-in-out infinite;
}

.offline-live17-projector i,
.offline-live17-projector b {
  position: absolute;
  pointer-events: none;
  content: "";
}

.offline-live17-projector i {
  left: -56px;
  top: 20px;
  width: 74px;
  height: 46px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 100% 50%, rgba(255, 233, 91, 0.76), rgba(255, 233, 91, 0.2) 46%, transparent 72%);
  mix-blend-mode: screen;
  transform-origin: 100% 50%;
  animation: offline-live17-projector-cone 760ms ease-in-out infinite;
}

.offline-live17-projector b {
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(88, 235, 255, 0.58);
  opacity: 0.75;
  animation: offline-clock-ring 1.4s linear infinite;
}

.offline-live17-coinflow {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.offline-live17-coinflow i {
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff7a5 0 2px, transparent 3px),
    linear-gradient(135deg, #ffe863, #ffad24 62%, #cb6b17);
  box-shadow: 0 0 12px rgba(255, 225, 75, 0.76);
  opacity: 0;
  animation: offline-live17-coinflow 1.55s cubic-bezier(0.2, 0.04, 0.16, 1) infinite;
  animation-delay: calc(var(--n) * -0.13s);
}

.offline-live17-coinflow i:nth-child(3n + 2) {
  border-radius: 3px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px),
    linear-gradient(135deg, #6ff5ff, #2da9ff 58%, #2460d6);
  clip-path: polygon(50% 0, 100% 48%, 50% 100%, 0 48%);
}

.offline-live17-coinflow i:nth-child(4n) {
  width: 10px;
  height: 10px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8) 0 2px, transparent 3px),
    linear-gradient(135deg, #ff7adc, #f1437b 58%, #a61c4f);
}

.offline-return-copy {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.offline-return-copy small {
  color: #0a719b;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.offline-return-copy strong {
  color: #12364f;
  font-size: 1.44rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.56);
}

.offline-return-copy p {
  margin: 0;
  color: #416172;
  font-size: 0.78rem;
  font-weight: 900;
}

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

.offline-stat-grid span {
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 5px 4px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 -3px 0 rgba(15, 98, 132, 0.12);
}

.offline-stat-grid i {
  width: 34px;
  height: 31px;
  filter: drop-shadow(0 2px 0 rgba(8, 64, 88, 0.16));
  animation: offline-stat-pop 1.1s ease-in-out infinite;
}

.offline-stat-grid b,
.offline-stat-grid em {
  max-width: 100%;
  overflow: hidden;
  color: #16384f;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-stat-grid em {
  color: #6a5620;
  font-size: 0.54rem;
  text-transform: uppercase;
}

.offline-cap-track {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background: rgba(18, 92, 125, 0.15);
}

.offline-cap-track span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #17374e;
  font-size: 0.66rem;
  font-weight: 1000;
}

.offline-cap-track em {
  overflow: hidden;
  color: #6d5621;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-cap-track i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(9, 60, 86, 0.28);
}

.offline-cap-track i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4eea81, #ffe24a, #ff9431);
  box-shadow: 0 0 12px rgba(255, 226, 77, 0.72);
  animation: offline-cap-fill 1.15s ease-out both;
}

.offline-return-bonus {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 5px 8px;
  border: 2px dashed rgba(12, 112, 160, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
  text-align: left;
}

.offline-return-bonus span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 12px rgba(84, 224, 255, 0.58));
  animation: offline-projector-glow 1.08s ease-in-out infinite;
}

.offline-return-bonus b,
.offline-return-bonus em {
  min-width: 0;
  overflow: hidden;
  color: #16405a;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-return-bonus em {
  color: #59717d;
  font-size: 0.58rem;
}

.offline-return-collect {
  animation: offline-button-pulse 1.25s ease-in-out infinite;
}

@keyframes offline-live17-stage-shine {
  0%,
  100% {
    opacity: 0.78;
    transform: rotateX(68deg) translateX(-4px);
  }
  50% {
    opacity: 1;
    transform: rotateX(68deg) translateX(4px);
  }
}

@keyframes offline-live17-cache-breathe {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1) rotateY(-2deg);
  }
  48% {
    transform: translateX(-50%) translateY(-6px) scale(1.035) rotateY(2deg);
  }
}

@keyframes offline-live17-cache-spark {
  0%,
  100% {
    opacity: 0.62;
    transform: translateY(5px) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translateY(-7px) scale(1.08);
  }
}

@keyframes offline-live17-camp-breathe {
  0%,
  100% {
    transform: translateY(0) scale(0.98);
    filter: drop-shadow(0 8px 0 rgba(55, 37, 14, 0.18)) drop-shadow(0 0 12px rgba(255, 205, 76, 0.45));
  }
  50% {
    transform: translateY(-3px) scale(1.01);
    filter: drop-shadow(0 10px 0 rgba(55, 37, 14, 0.14)) drop-shadow(0 0 20px rgba(255, 225, 92, 0.68));
  }
}

@keyframes offline-live17-cart-run {
  0%,
  100% {
    transform: translateX(11px) translateY(0) scale(0.96) rotate(0deg);
  }
  34% {
    transform: translateX(-8px) translateY(-2px) scale(1) rotate(-1.4deg);
  }
  68% {
    transform: translateX(-15px) translateY(1px) scale(0.99) rotate(1.2deg);
  }
}

@keyframes offline-live17-cart-gems {
  0%,
  100% {
    opacity: 0.68;
    transform: translateY(4px) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
  }
}

@keyframes offline-live17-projector {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0) scale(0.98);
  }
  50% {
    transform: rotate(3deg) translateY(-3px) scale(1.06);
  }
}

@keyframes offline-live17-projector-cone {
  0%,
  100% {
    opacity: 0.34;
    transform: scaleX(0.72) rotate(-4deg);
  }
  50% {
    opacity: 0.82;
    transform: scaleX(1.08) rotate(4deg);
  }
}

@keyframes offline-live17-coinflow {
  0% {
    opacity: 0;
    transform: translate(-12px, 0) scale(0.45) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  55% {
    opacity: 1;
    transform: translate(var(--dx), calc(-1 * var(--arc))) scale(1.08) rotate(178deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), -8px) scale(0.7) rotate(340deg);
  }
}

@keyframes offline-chip-vault {
  0%,
  100% {
    transform: translateY(0) scale(0.78) rotate(-2deg);
  }
  50% {
    transform: translateY(-4px) scale(0.86) rotate(2deg);
  }
}

@keyframes offline-return-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes offline-vault-bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  48% {
    transform: translateX(-50%) translateY(-7px) scale(1.035);
  }
}

@keyframes offline-gems-rise {
  0%,
  100% {
    opacity: 0.58;
    transform: translateY(5px) scale(0.88);
  }
  50% {
    opacity: 0.95;
    transform: translateY(-6px) scale(1.06);
  }
}

@keyframes offline-clock-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.04);
  }
}

@keyframes offline-clock-ring {
  0% {
    opacity: 0.72;
    transform: scale(0.78);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes offline-cart-drive {
  0%,
  100% {
    transform: translateX(9px) translateY(0) rotate(0deg);
  }
  45% {
    transform: translateX(-10px) translateY(-3px) rotate(-2deg);
  }
  70% {
    transform: translateX(-2px) translateY(2px) rotate(1deg);
  }
}

@keyframes offline-stat-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.07);
  }
}

@keyframes offline-cap-fill {
  from {
    transform: scaleX(0.08);
    transform-origin: left center;
  }
  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes offline-projector-glow {
  0%,
  100% {
    transform: rotate(-3deg) scale(1);
    filter: drop-shadow(0 0 8px rgba(84, 224, 255, 0.48));
  }
  50% {
    transform: rotate(3deg) scale(1.08);
    filter: drop-shadow(0 0 18px rgba(255, 225, 75, 0.72));
  }
}

@keyframes offline-button-pulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 4px 0 rgba(128, 74, 15, 0.42), 0 0 0 rgba(255, 225, 75, 0);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(128, 74, 15, 0.36), 0 0 18px rgba(255, 225, 75, 0.82);
  }
}

.modal,
.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(8, 35, 55, 0.42);
}

.modal.show,
.loading-screen {
  display: grid;
}

.modal-card {
  display: grid;
  gap: 10px;
  width: min(340px, 100%);
  padding: 16px;
  border: 3px solid rgba(124, 76, 24, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff3b5, #e7ad4f);
  text-align: center;
  box-shadow: 0 7px 0 rgba(81, 42, 18, 0.32);
}

.modal-card h2,
.modal-card p {
  margin: 0;
}

.modal-card button {
  min-height: 42px;
  border-radius: 8px;
  color: #5c3308;
  background: linear-gradient(180deg, #ffed69, #ff9f2a);
  font-weight: 900;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(215px + env(safe-area-inset-bottom));
  z-index: 31;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 9px 12px;
  border-radius: 8px;
  color: #603607;
  background: linear-gradient(180deg, #fff3b5, #e7ad4f);
  box-shadow: 0 5px 0 rgba(82, 42, 18, 0.34);
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

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

.toast.error {
  color: #fff;
  background: linear-gradient(180deg, #ff7a7a, #ca2d47);
}

.loading-screen {
  display: grid;
  color: #fff;
  background: linear-gradient(180deg, #46bdf8, #0c659d 45%, #331821);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 54, 88, 0.45);
}

.loading-screen.hide {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen.hide .loader {
  display: none;
  animation: none;
}

.loader {
  width: 48px;
  height: 48px;
  border: 6px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

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

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

@keyframes arm-swing {
  0%,
  100% {
    rotate: -26deg;
  }
  50% {
    rotate: -54deg;
  }
}

@keyframes pick-hit {
  0%,
  100% {
    rotate: -34deg;
  }
  50% {
    rotate: -78deg;
  }
}

@keyframes sack-pulse {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-5px) translateY(-2px);
  }
}

@keyframes gem-glow {
  0%,
  100% {
    filter: brightness(0.9);
    transform: rotate(45deg) scale(0.92);
  }
  50% {
    filter: brightness(1.35);
    transform: rotate(45deg) scale(1.08);
  }
}

@keyframes art-glow {
  0%,
  100% {
    opacity: 0.56;
    transform: translateY(0);
  }
  50% {
    opacity: 0.88;
    transform: translateY(-5px);
  }
}

@keyframes event-icon-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes selected-glow {
  0%,
  100% {
    opacity: 0.58;
  }
  50% {
    opacity: 1;
  }
}

@keyframes mine-shine {
  0%,
  100% {
    opacity: 0.38;
    transform: translateX(-16px);
  }
  50% {
    opacity: 0.78;
    transform: translateX(18px);
  }
}

@keyframes real3d-surface-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes level-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.04);
  }
}

@keyframes level-pop-selected {
  0%,
  100% {
    transform: translateY(0) scale(1.03);
  }
  50% {
    transform: translateY(-3px) scale(1.1);
  }
}

@keyframes collect-ready {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.06);
  }
}

@keyframes unlock-label-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 4px 0 rgba(3, 31, 44, 0.46), 0 0 12px rgba(255, 196, 54, 0.34);
  }
  50% {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 5px 0 rgba(3, 31, 44, 0.42), 0 0 20px rgba(255, 217, 88, 0.62);
  }
}

@keyframes locked-gate-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 8px 6px rgba(0, 0, 0, 0.36))
      drop-shadow(0 0 8px color-mix(in srgb, var(--ore), #fff 14%));
  }
  50% {
    transform: translateY(-1px) scale(1.012);
    filter:
      drop-shadow(0 9px 7px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 15px color-mix(in srgb, var(--ore), #fff 26%));
  }
}

@keyframes live27-gate-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 8px 6px rgba(0, 0, 0, 0.36))
      drop-shadow(0 0 8px color-mix(in srgb, var(--ore), #fff 14%));
  }
  50% {
    transform: translateY(-1px) scale(1.01);
    filter:
      drop-shadow(0 9px 7px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 16px color-mix(in srgb, var(--ore), #fff 28%));
  }
}

@keyframes live27-gate-locked-frames {
  0%,
  79.9%,
  100% {
    background-image: url("/assets/motion-live27-locked-gate-closed.png?v=live27-gate");
  }
  80%,
  91.9% {
    background-image: url("/assets/motion-live27-locked-gate-cracked.png?v=live27-gate");
  }
  92%,
  99.9% {
    background-image: url("/assets/motion-live27-locked-gate-closed.png?v=live27-gate");
  }
}

@keyframes locked-gate-lamp {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes locked-gate-scan {
  0%,
  20% {
    opacity: 0;
    transform: translateX(-42%) skewX(-9deg);
  }
  38%,
  58% {
    opacity: 0.7;
  }
  82%,
  100% {
    opacity: 0;
    transform: translateX(82%) skewX(-9deg);
  }
}

@keyframes locked-dust-rise {
  0%,
  55%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(44deg) scale(0.7);
  }
  22% {
    opacity: 0.92;
  }
  48% {
    opacity: 0.2;
    transform: translate3d(12px, -26px, 0) rotate(96deg) scale(1.05);
  }
}

@keyframes unlock-reveal-pop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.56);
  }
  16% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }
  64% {
    opacity: 0.82;
    transform: translateY(-8px) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1.38);
  }
}

@keyframes live27-unlock-gate-pop {
  0% {
    opacity: 0.32;
    transform: translateY(10px) scale(0.94);
  }
  12%,
  82% {
    opacity: 0.96;
  }
  100% {
    opacity: 0.24;
    transform: translateY(-6px) scale(1.05);
  }
}

@keyframes live27-unlock-gate-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live27-locked-gate-cracked.png?v=live27-gate");
  }
  25%,
  59.9% {
    background-image: url("/assets/motion-live27-locked-gate-opening.png?v=live27-gate");
  }
  60%,
  100% {
    background-image: url("/assets/motion-live27-locked-gate-open.png?v=live27-gate");
  }
}

@keyframes unlock-light-sweep {
  0% {
    opacity: 0;
    transform: translateX(-28%) scaleX(0.68);
  }
  18%,
  52% {
    opacity: 0.88;
  }
  100% {
    opacity: 0;
    transform: translateX(34%) scaleX(1.08);
  }
}

@keyframes reward-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.84);
  }
  18%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-38px) scale(1.18);
  }
}

@keyframes live9-worker-walk-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live9-worker-walk-1.png");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live9-worker-walk-2.png");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live9-worker-walk-3.png");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live9-worker-walk-4.png");
  }
}

@keyframes live9-worker-mine-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live9-worker-mine-1.png");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live9-worker-mine-2.png");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live9-worker-mine-3.png");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live9-worker-mine-4.png");
  }
}

@keyframes live9-worker-carry-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live9-worker-carry-1.png");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live9-worker-carry-2.png");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live9-worker-carry-3.png");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live9-worker-carry-4.png");
  }
}

@keyframes live9-worker-load-frames {
  0%,
  30% {
    background-image: url("/assets/motion-live9-worker-carry-1.png");
  }
  31%,
  58% {
    background-image: url("/assets/motion-live9-worker-carry-2.png");
  }
  59%,
  78% {
    background-image: url("/assets/motion-live9-worker-carry-4.png");
  }
  79%,
  100% {
    background-image: url("/assets/motion-live9-worker-carry-3.png");
  }
}

@keyframes live22-miner-dig-body {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-0.8deg) scale(1);
  }
  29% {
    transform: translateX(0) translateY(-2px) rotate(1.2deg) scale(1.015);
  }
  54% {
    transform: translateX(2px) translateY(1px) rotate(-2.2deg) scale(1.025);
  }
  76% {
    transform: translateX(0) translateY(0) rotate(0.4deg) scale(1);
  }
}

@keyframes live22-miner-dig-frames {
  0%,
  23.9% {
    background-image: url("/assets/motion-live22-miner-dig-windup.png?v=live22-miners");
  }
  24%,
  45.9% {
    background-image: url("/assets/motion-live22-miner-dig-raise.png?v=live22-miners");
  }
  46%,
  67.9% {
    background-image: url("/assets/motion-live22-miner-dig-hit.png?v=live22-miners");
  }
  68%,
  100% {
    background-image: url("/assets/motion-live22-miner-dig-recover.png?v=live22-miners");
  }
}

@keyframes live22-miner-carry-path {
  0%,
  16% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(-0.4deg);
  }
  38%,
  60% {
    transform: translateX(-54px) translateY(0) scaleX(-1) rotate(0.3deg);
  }
  68% {
    transform: translateX(-50px) translateY(1px) scaleX(1) rotate(-0.2deg);
  }
  88%,
  100% {
    transform: translateX(0) translateY(0) scaleX(1) rotate(0.4deg);
  }
}

@keyframes live22-miner-carry-frames {
  0%,
  21.9% {
    background-image: url("/assets/motion-live22-miner-carry-walk-1.png?v=live22-miners");
  }
  22%,
  39.9% {
    background-image: url("/assets/motion-live22-miner-carry-walk-2.png?v=live22-miners");
  }
  40%,
  61.9% {
    background-image: url("/assets/motion-live22-miner-carry-drop.png?v=live22-miners");
  }
  62%,
  79.9% {
    background-image: url("/assets/motion-live22-miner-carry-walk-3.png?v=live22-miners");
  }
  80%,
  100% {
    background-image: url("/assets/motion-live22-miner-carry-walk-1.png?v=live22-miners");
  }
}

@keyframes live22-miner-helper-path {
  0%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(-0.2deg);
  }
  40% {
    transform: translateX(-25px) translateY(-1px) scaleX(-1) rotate(0.5deg);
  }
  58% {
    transform: translateX(-27px) translateY(1px) scaleX(-1) rotate(-1deg);
  }
}

@keyframes live22-miner-helper-frames {
  0%,
  30% {
    background-image: url("/assets/motion-live22-miner-carry-walk-1.png?v=live22-miners");
  }
  31%,
  54% {
    background-image: url("/assets/motion-live22-miner-carry-walk-2.png?v=live22-miners");
  }
  55%,
  75% {
    background-image: url("/assets/motion-live22-miner-carry-drop.png?v=live22-miners");
  }
  76%,
  100% {
    background-image: url("/assets/motion-live22-miner-carry-walk-3.png?v=live22-miners");
  }
}

@keyframes live11-manager-foreman-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live11-manager-foreman-1.png?v=live11-manager");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live11-manager-foreman-2.png?v=live11-manager");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live11-manager-foreman-3.png?v=live11-manager");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live11-manager-foreman-4.png?v=live11-manager");
  }
}

@keyframes live9-truck-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live9-machine-truck-1.png");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live9-machine-truck-2.png");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live9-machine-truck-3.png");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live9-machine-truck-4.png");
  }
}

@keyframes live10-surface-cart-cycle {
  0%,
  12.4% {
    background-image: url("/assets/motion-live10-surface-cart-loaded-1.png");
  }
  12.5%,
  24.9% {
    background-image: url("/assets/motion-live10-surface-cart-loaded-2.png");
  }
  25%,
  37.4% {
    background-image: url("/assets/motion-live10-surface-cart-loaded-3.png");
  }
  37.5%,
  54.9% {
    background-image: url("/assets/motion-live10-surface-cart-loaded-4.png");
  }
  55%,
  66.9% {
    background-image: url("/assets/motion-live10-surface-cart-empty-1.png");
  }
  67%,
  78.9% {
    background-image: url("/assets/motion-live10-surface-cart-empty-2.png");
  }
  79%,
  89.9% {
    background-image: url("/assets/motion-live10-surface-cart-empty-3.png");
  }
  90%,
  100% {
    background-image: url("/assets/motion-live10-surface-cart-empty-4.png");
  }
}

@keyframes live13-loader-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live13-loader-vehicle-1.png?v=live13-loader");
  }
  25%,
  44.9% {
    background-image: url("/assets/motion-live13-loader-vehicle-2.png?v=live13-loader");
  }
  45%,
  62.9% {
    background-image: url("/assets/motion-live13-loader-vehicle-3.png?v=live13-loader");
  }
  63%,
  100% {
    background-image: url("/assets/motion-live13-loader-vehicle-4.png?v=live13-loader");
  }
}

@keyframes live9-elevator-load-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live9-machine-elevator-empty.png");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live9-machine-elevator-low.png");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live9-machine-elevator-half.png");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live9-machine-elevator-full.png");
  }
}

@keyframes live9-elevator-unload-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live9-machine-elevator-full.png");
  }
  25%,
  49.9% {
    background-image: url("/assets/motion-live9-machine-elevator-half.png");
  }
  50%,
  74.9% {
    background-image: url("/assets/motion-live9-machine-elevator-low.png");
  }
  75%,
  100% {
    background-image: url("/assets/motion-live9-machine-elevator-empty.png");
  }
}

@keyframes live9-loader-arm-frames {
  0%,
  49.9% {
    background-image: url("/assets/motion-live9-machine-loader-arm-1.png");
  }
  50%,
  100% {
    background-image: url("/assets/motion-live9-machine-loader-arm-2.png");
  }
}

@keyframes live9-loader-arm-work {
  0%,
  100% {
    transform: translateX(0) translateY(1px) rotate(-1deg) scale(0.9);
  }
  48% {
    transform: translateX(4px) translateY(-1px) rotate(3deg) scale(0.94);
  }
  72% {
    transform: translateX(7px) translateY(1px) rotate(-2deg) scale(0.92);
  }
}

@keyframes surface-worker-receive {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-1deg) scale(0.96);
  }
  48% {
    transform: translateX(6px) translateY(-1px) rotate(3deg) scale(1);
  }
  72% {
    transform: translateX(10px) translateY(0) rotate(-2deg) scale(0.98);
  }
}

@keyframes miner-pro {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }
  35% {
    transform: translateY(-5px) rotate(3deg) scale(1.03);
  }
  70% {
    transform: translateY(1px) rotate(-4deg) scale(0.99);
  }
}

@keyframes manager-foreman-command {
  0%,
  100% {
    transform: translateY(0) rotate(-0.3deg) scale(1);
  }
  26% {
    transform: translateY(-1px) rotate(1.4deg) scale(1.02);
  }
  52% {
    transform: translateY(0) rotate(-0.8deg) scale(0.995);
  }
  78% {
    transform: translateY(-2px) rotate(1deg) scale(1.025);
  }
}

@keyframes manager-command-wave {
  0% {
    opacity: 0;
    transform: translateX(-4px) scale(0.55);
  }
  34% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateX(18px) scale(1.2);
  }
}

@keyframes miner-digging {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg) scale(1);
  }
  36% {
    transform: translateY(-2px) rotate(4deg) scale(1.02);
  }
  60% {
    transform: translateY(1px) rotate(-5deg) scale(0.99);
  }
}

@keyframes miner-carrying {
  0%,
  14% {
    transform: translateX(0) translateY(0) scaleX(1);
  }
  42%,
  58% {
    transform: translateX(-62px) translateY(0) scaleX(1);
  }
  62% {
    transform: translateX(-62px) translateY(0) scaleX(-1);
  }
  86%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1);
  }
}

@keyframes miner-loading {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  45% {
    transform: translateY(-2px) rotate(5deg);
  }
  70% {
    transform: translateY(1px) rotate(-4deg);
  }
}

@keyframes pickaxe-swing {
  0%,
  100% {
    transform: rotate(-58deg) translateY(0);
  }
  42% {
    transform: rotate(24deg) translateY(-3px);
  }
  56% {
    transform: rotate(38deg) translateY(1px);
  }
}

@keyframes miner-hit-flash {
  0%,
  44% {
    opacity: 0;
    transform: translateX(4px) scale(0.65);
  }
  52% {
    opacity: 1;
    transform: translateX(0) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translateX(-18px) translateY(-8px) scale(0.92);
  }
}

@keyframes cargo-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4px) rotate(4deg);
  }
}

@keyframes loader-cargo-dump {
  0%,
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0);
  }
  45% {
    opacity: 1;
    transform: translateX(-8px) translateY(-4px) rotate(-11deg);
  }
  72% {
    opacity: 0.72;
    transform: translateX(-18px) translateY(-1px) rotate(-22deg);
  }
}

@keyframes shovel-tilt {
  0%,
  100% {
    transform: rotate(-22deg);
  }
  45% {
    transform: rotate(34deg) translateY(-3px);
  }
  72% {
    transform: rotate(52deg) translateY(1px);
  }
}

@keyframes shaft-loader-work {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scaleX(-1);
  }
  44% {
    transform: translateY(-1px) rotate(3deg) scaleX(-1);
  }
  70% {
    transform: translateY(1px) rotate(-3deg) scaleX(-1);
  }
}

@keyframes live21-shaft-loader-work {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-0.6deg) scale(1);
  }
  31% {
    transform: translateX(2px) translateY(-1px) rotate(0.8deg) scale(1.01);
  }
  57% {
    transform: translateX(4px) translateY(1px) rotate(-1.8deg) scale(1.015);
  }
  78% {
    transform: translateX(1px) translateY(0) rotate(0.4deg) scale(1);
  }
}

@keyframes live21-shaft-loader-frames {
  0%,
  24.9% {
    background-image: url("/assets/motion-live21-shaft-loader-ready.png?v=live21-loader");
  }
  25%,
  48.9% {
    background-image: url("/assets/motion-live21-shaft-loader-scoop.png?v=live21-loader");
  }
  49%,
  72.9% {
    background-image: url("/assets/motion-live21-shaft-loader-tip.png?v=live21-loader");
  }
  73%,
  100% {
    background-image: url("/assets/motion-live21-shaft-loader-reset.png?v=live21-loader");
  }
}

@keyframes shaft-structure-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-1px) scale(1.002);
  }
  68% {
    transform: translateY(1px) scale(0.999);
  }
}

@keyframes shaft-structure-lamp {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.98);
  }
  46% {
    opacity: 0.78;
    transform: scale(1.04);
  }
  72% {
    opacity: 0.55;
    transform: scale(1.01);
  }
}

@keyframes shaft-structure-energy {
  0%,
  100% {
    opacity: 0;
    transform: translateY(4px) scale(0.72);
  }
  38% {
    opacity: 0.58;
    transform: translateY(0) scale(1.04);
  }
  66% {
    opacity: 0.28;
    transform: translateY(-3px) scale(0.9);
  }
}

@keyframes shaft-track-glint {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  22% {
    opacity: 0.78;
  }
  64% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    transform: translateX(520%) skewX(-18deg);
  }
}

@keyframes loader-callout-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-3px) scale(1.04);
  }
}

@keyframes drill-rumble {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  32% {
    transform: translateX(1px) rotate(0.7deg);
  }
  68% {
    transform: translateX(-1px) rotate(-0.8deg);
  }
}

@keyframes shaft-rig-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(0) scale(1);
  }
  28% {
    transform: translateX(1px) translateY(-1px) rotate(0.35deg) scale(1.005);
  }
  62% {
    transform: translateX(-1px) translateY(0) rotate(-0.45deg) scale(0.998);
  }
}

@keyframes shaft-rig-light {
  0%,
  100% {
    opacity: 0.86;
  }
  50% {
    opacity: 1;
  }
}

@keyframes shaft-rig-bit-glow {
  0%,
  100% {
    opacity: 0.48;
    transform: translateX(0) scale(0.82);
  }
  45% {
    opacity: 1;
    transform: translateX(4px) scale(1.12);
  }
  70% {
    opacity: 0.72;
    transform: translateX(1px) scale(0.94);
  }
}

@keyframes drill-glow {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

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

@keyframes shaft-dust {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(7px) scale(0.75);
  }
  35%,
  70% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(-25px) translateY(-7px) scale(1.22);
  }
}

@keyframes shaft-sparks {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.82);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-42px) translateY(-9px) scale(1.08);
  }
}

@keyframes auto-pulse {
  0%,
  100% {
    opacity: 0.82;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes live19-support-breathe {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(1px) scaleX(var(--prop-flip, 1)) scaleY(0.98);
  }
  50% {
    opacity: 0.38;
    transform: translateY(-1px) scaleX(var(--prop-flip, 1)) scaleY(1.01);
  }
}

@keyframes live19-lamp-sway {
  0%,
  100% {
    transform: rotate(-1.4deg) translateY(0);
  }
  50% {
    transform: rotate(1.4deg) translateY(1px);
  }
}

@keyframes live19-lamp-glow {
  0%,
  100% {
    opacity: 0.36;
    transform: translateY(0) scale(0.92);
  }
  50% {
    opacity: 0.82;
    transform: translateY(3px) scale(1.08);
  }
}

@keyframes live19-lamp-flicker {
  0%,
  100% {
    opacity: 0.44;
  }
  50% {
    opacity: 0.92;
  }
}

@keyframes live19-pipes-hum {
  0%,
  100% {
    transform: translateY(0) scaleX(var(--pipe-flip, 1)) scaleY(0.98);
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 7px rgba(77, 211, 255, 0.12));
  }
  50% {
    transform: translateY(-1px) scaleX(var(--pipe-flip, 1)) scaleY(1.01);
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 12px rgba(77, 211, 255, 0.22));
  }
}

@keyframes live19-pipe-gauge {
  to {
    transform: rotate(360deg);
  }
}

@keyframes live19-crystal-breathe {
  0%,
  100% {
    transform: translateY(0) scale(0.96);
  }
  50% {
    transform: translateY(-3px) scale(1.035);
  }
}

@keyframes live19-crystal-glow {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.78);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.1);
  }
}

@keyframes live19-crystal-spark {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(2px) scale(0.88);
  }
  50% {
    opacity: 0.96;
    transform: translateY(-3px) scale(1.08);
  }
}

@keyframes live20-transporter-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) scaleX(1) rotate(-0.3deg);
  }
  50% {
    transform: translateX(0) translateY(-1px) scaleX(1) rotate(0.3deg);
  }
}

@keyframes live20-transporter-idle-frames {
  0%,
  49.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-1.png?v=live20-transporter");
  }
  50%,
  100% {
    background-image: url("/assets/motion-live20-transporter-worker-push-2.png?v=live20-transporter");
  }
}

@keyframes live20-transporter-haul {
  0%,
  10% {
    transform: translateX(0) translateY(0) scaleX(1) rotate(-0.5deg);
  }
  33% {
    transform: translateX(var(--haul-mid-x)) translateY(-1px) scaleX(1) rotate(0.4deg);
  }
  45%,
  59% {
    transform: translateX(var(--haul-x)) translateY(0) scaleX(1) rotate(-1deg);
  }
  63% {
    transform: translateX(var(--haul-x)) translateY(1px) scaleX(1) rotate(-2.4deg);
  }
  68% {
    transform: translateX(var(--haul-x)) translateY(0) scaleX(-1) rotate(0);
  }
  88%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(0.4deg);
  }
}

@keyframes live20-transporter-haul-frames {
  0%,
  19.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-1.png?v=live20-transporter");
  }
  20%,
  34.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-2.png?v=live20-transporter");
  }
  35%,
  44.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-3.png?v=live20-transporter");
  }
  45%,
  65.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-4.png?v=live20-transporter");
  }
  66%,
  79.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-2.png?v=live20-transporter");
  }
  80%,
  100% {
    background-image: url("/assets/motion-live20-transporter-worker-push-1.png?v=live20-transporter");
  }
}

@keyframes live20-transporter-receive {
  0%,
  100% {
    transform: translateX(-6px) translateY(1px) scaleX(1) rotate(-0.8deg);
  }
  45% {
    transform: translateX(4px) translateY(-3px) scaleX(1) rotate(1.2deg);
  }
  72% {
    transform: translateX(0) translateY(1px) scaleX(1) rotate(-0.2deg);
  }
}

@keyframes live20-transporter-receive-frames {
  0%,
  36.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-1.png?v=live20-transporter");
  }
  37%,
  66.9% {
    background-image: url("/assets/motion-live20-transporter-worker-push-3.png?v=live20-transporter");
  }
  67%,
  100% {
    background-image: url("/assets/motion-live20-transporter-worker-push-2.png?v=live20-transporter");
  }
}

@keyframes live25-hauler-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-0.3deg);
  }
  50% {
    transform: translateX(0) translateY(-1px) rotate(0.3deg);
  }
}

@keyframes live25-hauler-idle-frames {
  0%,
  49.9% {
    background-image: url("/assets/motion-live25-surface-hauler-push-1.png?v=live25-hauler");
  }
  50%,
  100% {
    background-image: url("/assets/motion-live25-surface-hauler-push-2.png?v=live25-hauler");
  }
}

@keyframes live25-hauler-haul {
  0%,
  8% {
    transform: translateX(0) translateY(0) rotate(-0.35deg);
  }
  28% {
    transform: translateX(var(--haul-mid-x)) translateY(-1px) rotate(0.4deg);
  }
  43%,
  50% {
    transform: translateX(var(--haul-x)) translateY(0) rotate(-0.7deg);
  }
  58% {
    transform: translateX(var(--haul-x)) translateY(2px) rotate(-2.6deg);
  }
  66% {
    transform: translateX(var(--haul-x)) translateY(0) rotate(0);
  }
  86%,
  100% {
    transform: translateX(0) translateY(0) rotate(0.25deg);
  }
}

@keyframes live25-hauler-haul-frames {
  0%,
  17.9% {
    background-image: url("/assets/motion-live25-surface-hauler-push-1.png?v=live25-hauler");
  }
  18%,
  34.9% {
    background-image: url("/assets/motion-live25-surface-hauler-push-2.png?v=live25-hauler");
  }
  35%,
  63.9% {
    background-image: url("/assets/motion-live25-surface-hauler-dump.png?v=live25-hauler");
  }
  64%,
  100% {
    background-image: url("/assets/motion-live25-surface-hauler-return.png?v=live25-hauler");
  }
}

@keyframes live25-hauler-receive {
  0%,
  100% {
    transform: translateX(-4px) translateY(1px) rotate(-0.6deg);
  }
  45% {
    transform: translateX(3px) translateY(-2px) rotate(0.9deg);
  }
  72% {
    transform: translateX(0) translateY(1px) rotate(-0.2deg);
  }
}

@keyframes live25-hauler-receive-frames {
  0%,
  36.9% {
    background-image: url("/assets/motion-live25-surface-hauler-push-1.png?v=live25-hauler");
  }
  37%,
  66.9% {
    background-image: url("/assets/motion-live25-surface-hauler-push-2.png?v=live25-hauler");
  }
  67%,
  100% {
    background-image: url("/assets/motion-live25-surface-hauler-push-1.png?v=live25-hauler");
  }
}

@keyframes live25-loader-ramp-work {
  0%,
  100% {
    transform: translateY(0) rotate(-0.15deg) scale(1);
  }
  44% {
    transform: translateY(-1px) rotate(0.25deg) scale(1.004);
  }
  72% {
    transform: translateY(1px) rotate(-0.3deg) scale(0.998);
  }
}

@keyframes live25-loader-ramp-ore {
  0% {
    opacity: 0;
    transform: translateX(-14px) translateY(16px) rotate(-26deg) scale(0.72);
  }
  18%,
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateX(32px) translateY(-18px) rotate(-26deg) scale(1.04);
  }
}

@keyframes live18-dock-idle {
  0%,
  100% {
    transform: translateY(0) rotate(-0.4deg) scale(1);
  }
  50% {
    transform: translateY(-2px) rotate(0.4deg) scale(1.012);
  }
}

@keyframes live18-handcart-run {
  0%,
  10% {
    transform: translateX(0) translateY(0) scaleX(1) rotate(-0.6deg);
  }
  34%,
  50% {
    transform: translateX(var(--surface-haul-x)) translateY(-1px) scaleX(1) rotate(0.8deg);
  }
  56% {
    transform: translateX(var(--surface-haul-x)) translateY(1px) scaleX(1) rotate(-1.8deg);
  }
  62% {
    transform: translateX(var(--surface-haul-x)) translateY(0) scaleX(-1) rotate(0);
  }
  88%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(0.4deg);
  }
}

@keyframes live18-handcart-gems {
  0%,
  100% {
    opacity: 0.68;
    transform: translateY(2px) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
  }
}

@keyframes live18-chute-work {
  0%,
  18%,
  82%,
  100% {
    opacity: 0;
    transform: translateX(-18px) translateY(12px) scale(0.82) rotate(-4deg);
  }
  30%,
  66% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(1deg);
  }
  72% {
    opacity: 0.9;
    transform: translateX(2px) translateY(1px) scale(0.98) rotate(-2deg);
  }
}

@keyframes live18-chute-gem {
  0% {
    opacity: 0;
    transform: translate3d(-3px, -8px, 0) rotate(45deg) scale(0.62);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(18px, 70px, 0) rotate(150deg) scale(1.08);
  }
}

@keyframes live18-chute-glow {
  0%,
  24%,
  78%,
  100% {
    opacity: 0;
    transform: scale(0.72);
  }
  36%,
  62% {
    opacity: 0.72;
    transform: scale(1.04);
  }
}

@keyframes live18-truck-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1);
  }
  50% {
    transform: translateX(0) translateY(-1px) scale(1.008);
  }
}

@keyframes live18-truck-loading-loop {
  0%,
  58% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  66% {
    transform: translateX(3px) translateY(1px) scale(1.004);
  }
  76% {
    transform: translateX(12px) translateY(0) scale(0.996);
  }
  86% {
    opacity: 0.92;
    transform: translateX(22px) translateY(0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes live18-truck-bed-fill {
  0%,
  28% {
    opacity: 0;
    transform: translateY(9px) scale(0.7);
  }
  38%,
  74% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  86%,
  100% {
    opacity: 0.68;
    transform: translateY(3px) scale(0.88);
  }
}

@keyframes live18-truck-shadow {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleX(0.96);
  }
  50% {
    opacity: 0.55;
    transform: scaleX(1.04);
  }
}

@keyframes live24-truck-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
  50% {
    transform: translateX(0) translateY(-1px) scale(1.006) rotate(0.15deg);
  }
}

@keyframes live24-truck-idle-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live24-depot-truck-idle.png?v=live24-truck");
  }
}

@keyframes live24-truck-loading-work {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1) rotate(-0.15deg);
  }
  34% {
    transform: translateX(0) translateY(1px) scale(1.004) rotate(0.35deg);
  }
  68% {
    transform: translateX(1px) translateY(-1px) scale(1.008) rotate(-0.45deg);
  }
}

@keyframes live24-truck-loading-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live24-depot-truck-loading.png?v=live24-truck");
  }
}

@keyframes live24-truck-full-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
  50% {
    transform: translateX(0) translateY(-1px) scale(1.004) rotate(-0.12deg);
  }
}

@keyframes live24-truck-full-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live24-depot-truck-full.png?v=live24-truck");
  }
}

@keyframes live24-truck-sell-cycle {
  0%,
  48% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
  60% {
    opacity: 1;
    transform: translateX(8px) translateY(0) scale(1.006) rotate(0.25deg);
  }
  76% {
    opacity: 0.98;
    transform: translateX(24px) translateY(0) scale(1) rotate(-0.1deg);
  }
  88% {
    opacity: 0.9;
    transform: translateX(34px) translateY(0) scale(0.992) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0);
  }
}

@keyframes live24-truck-drive-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live24-depot-truck-drive.png?v=live24-truck");
  }
}

@keyframes truck-wait {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.01);
  }
}

@keyframes truck-drive {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  12%,
  62% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  68% {
    opacity: 1;
    transform: translateX(3px) translateY(1px) scale(1.01);
  }
  76% {
    opacity: 1;
    transform: translateX(10px) translateY(0) scale(1);
  }
  86% {
    opacity: 0.82;
    transform: translateX(20px) translateY(0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes truck-dust {
  0% {
    opacity: 0;
    transform: translateX(10px) scale(0.65);
  }
  42% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(-16px) translateY(-5px) scale(1.22);
  }
}

@keyframes warehouse-dock-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.006);
  }
}

@keyframes warehouse-dock-glow {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.66;
    transform: scale(1.05);
  }
}

@keyframes warehouse-belt-crate {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(4px) scale(0.74);
  }
  20%,
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(72px) translateY(-2px) scale(1);
  }
}

@keyframes warehouse-lamp-pulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes surface-loader-work {
  0%,
  15% {
    transform: translateX(-14px) translateY(0) scale(0.96) rotate(-0.8deg);
  }
  26%,
  36% {
    transform: translateX(4px) translateY(0) scale(1) rotate(0.5deg);
  }
  46%,
  58% {
    transform: translateX(26px) translateY(-2px) scale(1.02) rotate(-1.5deg);
  }
  64% {
    transform: translateX(28px) translateY(1px) scale(0.99) rotate(1.4deg);
  }
  78%,
  100% {
    transform: translateX(-14px) translateY(0) scaleX(-0.96) scaleY(0.96) rotate(0.6deg);
  }
}

@keyframes loader-ore-fall {
  0%,
  38%,
  74%,
  100% {
    opacity: 0;
  }
  46%,
  61% {
    opacity: 1;
  }
}

@keyframes loader-ore-piece {
  0% {
    opacity: 0;
    transform: translate3d(0, -6px, 0) rotate(45deg) scale(0.78);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(12px, 42px, 0) rotate(135deg) scale(1.02);
  }
}

@keyframes surface-worker-idle {
  0%,
  100% {
    transform: translateY(0) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-1px) rotate(0.5deg);
  }
}

@keyframes surface-hopper-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.01);
  }
}

@keyframes surface-hopper-work {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  44% {
    transform: translateY(-2px) scale(1.025);
  }
  72% {
    transform: translateY(0) scale(0.995);
  }
}

@keyframes surface-haul {
  0%,
  12% {
    transform: translateX(0) translateY(0) scaleX(1) rotate(-0.5deg);
  }
  38%,
  52% {
    transform: translateX(var(--haul-x)) translateY(0) scaleX(1) rotate(0.5deg);
  }
  58% {
    transform: translateX(var(--haul-x)) translateY(0) scaleX(-1) rotate(0);
  }
  86%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(0.5deg);
  }
}

@keyframes surface-transfer-run {
  0%,
  12% {
    transform: translateX(0) translateY(0) scaleX(1) rotate(0);
  }
  35% {
    transform: translateX(var(--surface-haul-x)) translateY(0) scaleX(1) rotate(0.4deg);
  }
  42% {
    transform: translateX(var(--surface-haul-x)) translateY(1px) scaleX(1) rotate(-1.8deg);
  }
  50% {
    transform: translateX(var(--surface-haul-x)) translateY(2px) scaleX(1) rotate(-3deg);
  }
  56% {
    transform: translateX(var(--surface-haul-x)) translateY(0) scaleX(1) rotate(-0.4deg);
  }
  61% {
    transform: translateX(var(--surface-haul-x)) translateY(0) scaleX(-1) rotate(0);
  }
  88%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(-0.4deg);
  }
}

@keyframes surface-truck-load-arc {
  0%,
  25% {
    opacity: 0;
    transform: translateX(-28px) translateY(22px) scale(0.42) rotate(-18deg);
  }
  32% {
    opacity: 0.82;
    transform: translateX(-8px) translateY(8px) scale(0.58) rotate(-14deg);
  }
  39%,
  48% {
    opacity: 1;
    transform: translateX(14px) translateY(-4px) scale(0.72) rotate(-11deg);
  }
  58% {
    opacity: 0.96;
    transform: translateX(34px) translateY(5px) scale(0.62) rotate(-8deg);
  }
  68% {
    opacity: 0.28;
    transform: translateX(45px) translateY(14px) scale(0.5) rotate(-8deg);
  }
  76%,
  100% {
    opacity: 0;
    transform: translateX(48px) translateY(18px) scale(0.44) rotate(-8deg);
  }
}

@keyframes surface-cargo-haul {
  0%,
  10% {
    opacity: 0;
    transform: translateX(0) translateY(8px) scale(0.78);
  }
  18%,
  35% {
    opacity: 1;
    transform: translateX(18px) translateY(0) scale(0.94);
  }
  52%,
  66% {
    opacity: 1;
    transform: translateX(var(--haul-x)) translateY(-4px) scale(1);
  }
  78% {
    opacity: 0;
    transform: translateX(calc(var(--haul-x) + 28px)) translateY(2px) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translateX(0) translateY(8px) scale(0.78);
  }
}

@keyframes surface-cargo-receive {
  0%,
  100% {
    opacity: 0.82;
    transform: translateX(-8px) translateY(2px) scale(0.88);
  }
  45% {
    opacity: 1;
    transform: translateX(6px) translateY(-5px) scale(1.03);
  }
}

@keyframes cargo-gem-pulse {
  0%,
  100% {
    filter: brightness(0.92);
    transform: rotate(45deg) translateY(0) scale(0.92);
  }
  50% {
    filter: brightness(1.35);
    transform: rotate(45deg) translateY(-2px) scale(1.08);
  }
}

@keyframes worker-cargo-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4px) rotate(5deg);
  }
}

@keyframes surface-rail-light {
  0% {
    opacity: 0.25;
    transform: translateX(-20px) scaleX(0.6);
  }
  50% {
    opacity: 0.85;
  }
  100% {
    opacity: 0.28;
    transform: translateX(28px) scaleX(1);
  }
}

@keyframes surface-ore-burst {
  0% {
    opacity: 0;
    transform: translateX(-14px) scale(0.8);
  }
  30%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(44px) translateY(-6px) scale(1.06);
  }
}

@keyframes elevator-machine {
  0%,
  100% {
    transform: translateX(0);
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
  }
  50% {
    transform: translateX(1px);
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 10px rgba(78, 210, 255, 0.28));
  }
}

@keyframes live23-elevator-machine {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-0.35deg);
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32));
  }
  50% {
    transform: translateX(1px) translateY(-1px) rotate(0.35deg);
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 12px rgba(78, 210, 255, 0.34));
  }
}

@keyframes elevator-dock {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(1px) scale(1.005);
  }
}

@keyframes live23-elevator-dock {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1) rotate(-0.25deg);
  }
  48% {
    transform: translateX(1px) translateY(-1px) scale(1.01) rotate(0.45deg);
  }
}

@keyframes live23-elevator-loading-frames {
  0%,
  35.9% {
    background-image: url("/assets/motion-live23-elevator-pod-loading.png?v=live23-elevator");
  }
  36%,
  64.9% {
    background-image: url("/assets/motion-live23-elevator-pod-full.png?v=live23-elevator");
  }
  65%,
  100% {
    background-image: url("/assets/motion-live23-elevator-pod-loading.png?v=live23-elevator");
  }
}

@keyframes live23-elevator-unloading-frames {
  0%,
  39.9% {
    background-image: url("/assets/motion-live23-elevator-pod-full.png?v=live64-elevator-cycle-cart-hit");
  }
  40%,
  69.9% {
    background-image: url("/assets/motion-live23-elevator-pod-full.png?v=live64-elevator-cycle-cart-hit");
  }
  70%,
  100% {
    background-image: url("/assets/motion-live23-elevator-pod-full.png?v=live64-elevator-cycle-cart-hit");
  }
}

@keyframes elevator-motion-streak {
  0% {
    opacity: 0;
    transform: translateY(-42px) scaleY(0.7);
  }
  28% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateY(148px) scaleY(1.08);
  }
}

@keyframes elevator-motion-streak-up {
  0% {
    opacity: 0;
    transform: translateY(148px) scaleY(0.7);
  }
  28% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateY(-42px) scaleY(1.08);
  }
}

@keyframes elevator-door-sheen {
  0% {
    opacity: 0;
    transform: translateX(-24px) skewX(-9deg);
  }
  38% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateX(25px) skewX(-9deg);
  }
}

@keyframes elevator-load-funnel {
  0%,
  100% {
    opacity: 0.48;
    transform: translateY(-5px) scaleY(0.78);
  }
  46% {
    opacity: 0.92;
    transform: translateY(2px) scaleY(1.08);
  }
}

@keyframes elevator-unload-chute {
  0%,
  100% {
    transform: translateX(-8px) rotate(4deg) scale(0.82);
    filter: drop-shadow(0 0 8px rgba(255, 202, 62, 0.35));
  }
  45% {
    transform: translateX(0) rotate(11deg) scale(1);
    filter: drop-shadow(0 0 14px rgba(255, 222, 82, 0.72));
  }
}

@keyframes elevator-operator-load {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  48% {
    transform: translateY(-1px) rotate(4deg);
  }
  72% {
    transform: translateY(1px) rotate(-4deg);
  }
}

@keyframes elevator-operator-unload {
  0%,
  100% {
    transform: translateX(0) translateY(0) scaleX(-1) rotate(1deg);
  }
  42% {
    transform: translateX(2px) translateY(-1px) scaleX(-1) rotate(-3deg);
  }
  70% {
    transform: translateX(4px) translateY(0) scaleX(-1) rotate(3deg);
  }
}

@keyframes elevator-load-sparks {
  0% {
    opacity: 0;
    transform: translateX(16px) scale(0.72);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-18px) translateY(-5px) scale(1.05);
  }
}

@keyframes elevator-unload-sparks {
  0% {
    opacity: 0;
    transform: translateX(-8px) scale(0.78);
  }
  46% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(24px) translateY(-5px) scale(1.08);
  }
}

@keyframes elevator-gem-bob {
  0%,
  100% {
    filter: brightness(1);
    transform: rotate(45deg) translateY(0) scale(1);
  }
  50% {
    filter: brightness(1.2);
    transform: rotate(45deg) translateY(-3px) scale(1.08);
  }
}

@keyframes load-stream {
  0% {
    opacity: 0.58;
    transform: translateY(1px) rotate(-8deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) rotate(5deg);
  }
  100% {
    opacity: 0.64;
    transform: translateY(1px) rotate(-8deg);
  }
}

@keyframes ore-to-elevator {
  0% {
    opacity: 0;
    transform: translateX(58px) translateY(11px) rotate(45deg) scale(0.45);
  }
  28%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-8px) translateY(-4px) rotate(45deg) scale(1.08);
  }
}

@keyframes fx-ore-pile-breathe {
  0%,
  100% {
    transform: translateX(-50%) scale(var(--pile, 0.6)) translateY(0);
    filter:
      drop-shadow(0 0 8px color-mix(in srgb, var(--ore), #fff 14%))
      drop-shadow(0 7px 5px rgba(0, 0, 0, 0.22));
  }
  50% {
    transform: translateX(-50%) scale(calc(var(--pile, 0.6) + 0.05)) translateY(-2px);
    filter:
      drop-shadow(0 0 15px color-mix(in srgb, var(--ore), #fff 28%))
      drop-shadow(0 7px 5px rgba(0, 0, 0, 0.22));
  }
}

@keyframes fx-pickaxe-hit {
  0% {
    opacity: 0;
    transform: translateX(12px) translateY(8px) scale(0.45) rotate(-14deg);
  }
  18% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1.05) rotate(3deg);
  }
  46% {
    opacity: 0.82;
    transform: translateX(-7px) translateY(-5px) scale(0.94) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-19px) translateY(-11px) scale(0.62) rotate(16deg);
  }
}

@keyframes fx-ore-stream {
  0%,
  100% {
    opacity: 0.56;
    transform: translateX(9px) translateY(5px) scale(0.76) rotate(-8deg);
  }
  45% {
    opacity: 1;
    transform: translateX(-8px) translateY(-4px) scale(1.02) rotate(5deg);
  }
  70% {
    opacity: 0.9;
    transform: translateX(-19px) translateY(-7px) scale(0.96) rotate(2deg);
  }
}

@keyframes fx-elevator-cargo-bob {
  0%,
  100% {
    transform: translateY(0) scale(var(--cargo-scale, 0.8)) rotate(-1deg);
  }
  50% {
    transform: translateY(-3px) scale(calc(var(--cargo-scale, 0.8) + 0.04)) rotate(2deg);
  }
}

@keyframes fx-elevator-cargo-load {
  0%,
  100% {
    opacity: 0.56;
    transform: translateX(-2px) translateY(1px) scale(var(--cargo-scale, 0.62)) rotate(-2deg);
  }
  48% {
    opacity: 0.76;
    transform: translateX(2px) translateY(-1px) scale(calc(var(--cargo-scale, 0.62) + 0.04)) rotate(3deg);
  }
}

@keyframes fx-depot-sell {
  0%,
  100% {
    opacity: 0.58;
    transform: translateY(9px) scale(0.72) rotate(-5deg);
  }
  38%,
  72% {
    opacity: 1;
    transform: translateY(-4px) scale(0.98) rotate(3deg);
  }
}

@keyframes fx-level-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(-10deg);
  }
  25%,
  68% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1) rotate(3deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -78%) scale(1.18) rotate(8deg);
  }
}

@keyframes fx-reward-icon-pop {
  from {
    transform: translateY(1px) scale(0.9) rotate(-5deg);
  }
  to {
    transform: translateY(-3px) scale(1.05) rotate(6deg);
  }
}

@keyframes manager-skill-floor-aura {
  0%,
  100% {
    opacity: 0.14;
    transform: translateY(7px) scale(0.48) rotate(-4deg);
  }
  48% {
    opacity: 0.24;
    transform: translateY(-1px) scale(0.58) rotate(3deg);
  }
}

@keyframes manager-skill-elevator-aura {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.64) translateY(7px) rotate(-3deg);
  }
  50% {
    opacity: 0.82;
    transform: scale(0.78) translateY(-2px) rotate(3deg);
  }
}

@keyframes manager-skill-depot-aura {
  0%,
  100% {
    opacity: 0.24;
    transform: translateY(5px) scale(0.52) rotate(-4deg);
  }
  50% {
    opacity: 0.4;
    transform: translateY(0) scale(0.66) rotate(4deg);
  }
}

@keyframes live28-skill-hover {
  0%,
  100% {
    transform: translate(var(--live28-x), var(--live28-y)) scale(var(--live28-scale)) rotate(-1.5deg);
    filter:
      drop-shadow(0 0 12px rgba(92, 222, 255, 0.52))
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: translate(var(--live28-x), calc(var(--live28-y) - 7px)) scale(var(--live28-scale-hi)) rotate(2deg);
    filter:
      drop-shadow(0 0 18px rgba(255, 225, 86, 0.76))
      drop-shadow(0 9px 8px rgba(0, 0, 0, 0.28));
  }
}

@keyframes live28-skill-mining-work {
  0%,
  100% {
    filter:
      drop-shadow(0 0 13px rgba(92, 222, 255, 0.58))
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
  }
  40%,
  58% {
    filter:
      drop-shadow(0 0 24px rgba(255, 232, 88, 0.96))
      drop-shadow(0 0 18px color-mix(in srgb, var(--ore), #fff 42%))
      drop-shadow(0 9px 8px rgba(0, 0, 0, 0.28));
  }
}

@keyframes live28-elevator-scan {
  0%,
  100% {
    transform: translate(var(--live28-x), var(--live28-y)) scale(var(--live28-scale)) rotate(-3deg);
    filter:
      drop-shadow(0 0 14px rgba(83, 227, 255, 0.6))
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: translate(var(--live28-x), calc(var(--live28-y) - 6px)) scale(var(--live28-scale-hi)) rotate(3deg);
    filter:
      drop-shadow(0 0 21px rgba(83, 227, 255, 0.86))
      drop-shadow(0 0 15px rgba(255, 226, 82, 0.74))
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.28));
  }
}

@keyframes live28-depot-route {
  0%,
  100% {
    transform: translate(var(--live28-x), var(--live28-y)) scale(var(--live28-scale)) rotate(-2deg);
    filter:
      drop-shadow(0 0 13px rgba(92, 222, 255, 0.58))
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
  }
  28% {
    transform: translate(calc(var(--live28-x) - 10px), calc(var(--live28-y) - 7px)) scale(var(--live28-scale-hi)) rotate(3deg);
  }
  52% {
    transform: translate(calc(var(--live28-x) - 22px), calc(var(--live28-y) - 3px)) scale(var(--live28-scale-hi)) rotate(-1deg);
    filter:
      drop-shadow(0 0 22px rgba(255, 232, 86, 0.88))
      drop-shadow(0 0 18px rgba(85, 232, 255, 0.58))
      drop-shadow(0 8px 8px rgba(0, 0, 0, 0.28));
  }
  74% {
    transform: translate(calc(var(--live28-x) - 8px), calc(var(--live28-y) - 9px)) scale(var(--live28-scale-hi)) rotate(2deg);
  }
}

@keyframes live28-skill-thruster {
  0%,
  100% {
    opacity: 0.54;
    transform: translateY(9px) scaleX(0.72);
  }
  50% {
    opacity: 0.94;
    transform: translateY(14px) scaleX(1.05);
  }
}

@keyframes live28-skill-ring {
  0%,
  100% {
    opacity: 0.42;
    transform: rotate(-4deg) scale(0.68);
  }
  50% {
    opacity: 0.82;
    transform: rotate(4deg) scale(1.02);
  }
}

@keyframes crew-slot-skill-ready {
  0%,
  100% {
    transform: rotate(-6deg) scale(0.58) translateY(4px);
  }
  50% {
    transform: rotate(4deg) scale(0.72) translateY(-2px);
  }
}

@keyframes crew-slot-skill-active {
  0%,
  100% {
    transform: rotate(-8deg) scale(0.72) translateY(4px);
  }
  48% {
    transform: rotate(5deg) scale(0.88) translateY(-3px);
  }
}

@keyframes shop-purchase-card-pulse {
  0%,
  100% {
    opacity: 0.32;
    transform: translateY(10px) scale(0.52) rotate(8deg);
  }
  50% {
    opacity: 0.58;
    transform: translateY(1px) scale(0.7) rotate(1deg);
  }
}

@keyframes live7-turbine-spin {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  48% {
    transform: translateY(-5px) rotate(1deg) scale(1.05);
  }
  72% {
    transform: translateY(2px) rotate(0deg) scale(0.98);
  }
}

@keyframes live7-card-fountain {
  0%,
  100% {
    opacity: 0.36;
    transform: translateY(8px) scaleY(0.74);
  }
  50% {
    opacity: 0.92;
    transform: translateY(-8px) scaleY(1.08);
  }
}

@keyframes live7-card-blips {
  0%,
  100% {
    opacity: 0.58;
    transform: translateY(8px) rotate(-8deg) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px) rotate(7deg) scale(1.12);
  }
}

@keyframes live7-laser-scan {
  0%,
  100% {
    opacity: 0.36;
    transform: translateX(4px) translateY(3px) scale(0.94);
  }
  50% {
    opacity: 0.88;
    transform: translateX(-4px) translateY(-5px) scale(1.05);
  }
}

@keyframes live7-gem-slot-pay {
  0%,
  100% {
    transform: translateY(2px) scale(0.96);
  }
  45% {
    transform: translateY(-4px) scale(1.06);
  }
  70% {
    transform: translateY(1px) scale(0.98);
  }
}

@keyframes live7-ramp-pour {
  0%,
  100% {
    opacity: 0.34;
    transform: translateX(3px) translateY(4px) rotate(-2deg) scale(0.94);
  }
  50% {
    opacity: 0.72;
    transform: translateX(-4px) translateY(-5px) rotate(1deg) scale(1.04);
  }
}

@keyframes manager-reveal-fx-pop {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.68) rotate(-4deg);
  }
  50% {
    transform: translate(-50%, -57%) scale(0.84) rotate(4deg);
  }
}

@keyframes shop-purchase-reveal-pop {
  0%,
  100% {
    opacity: 0.56;
    transform: translate(-50%, -48%) scale(0.62) rotate(-5deg);
  }
  50% {
    opacity: 0.86;
    transform: translate(-50%, -55%) scale(0.8) rotate(5deg);
  }
}

@keyframes cart-loop {
  0%,
  100% {
    transform: translateX(-8px) translateY(0) rotate(-1deg);
  }
  45% {
    transform: translateX(34px) translateY(0) rotate(1deg);
  }
  70% {
    transform: translateX(18px) translateY(0) rotate(-1deg);
  }
}

@keyframes live26-cart-idle {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-0.35deg);
  }
  50% {
    transform: translateX(0) translateY(-1px) rotate(0.25deg);
  }
}

@keyframes live26-cart-empty-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live26-shaft-cart-empty.png?v=live26-cart");
  }
}

@keyframes live26-cart-load {
  0%,
  100% {
    transform: translateX(3px) translateY(0) rotate(-0.5deg) scale(1);
  }
  45% {
    transform: translateX(3px) translateY(1px) rotate(0.65deg) scale(1.012);
  }
  72% {
    transform: translateX(2px) translateY(-1px) rotate(-0.25deg) scale(1.006);
  }
}

@keyframes live26-cart-loading-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live26-shaft-cart-loading.png?v=live26-cart");
  }
}

@keyframes live26-cart-roll {
  0%,
  100% {
    transform: translateX(7px) translateY(0) rotate(-0.45deg);
  }
  44% {
    transform: translateX(-7px) translateY(-1px) rotate(0.55deg);
  }
  74% {
    transform: translateX(-2px) translateY(0) rotate(-0.2deg);
  }
}

@keyframes live26-cart-full-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live26-shaft-cart-full.png?v=live26-cart");
  }
}

@keyframes live26-cart-dump {
  0%,
  100% {
    transform: translateX(-7px) translateY(0) rotate(-1deg);
  }
  42% {
    transform: translateX(-10px) translateY(1px) rotate(-2.5deg) scale(1.01);
  }
  70% {
    transform: translateX(-5px) translateY(-1px) rotate(0.8deg);
  }
}

@keyframes live26-cart-dump-frame {
  0%,
  100% {
    background-image: url("/assets/motion-live26-shaft-cart-dump.png?v=live26-cart");
  }
}

@keyframes elevator-run {
  0%,
  8% {
    top: 31%;
  }
  24%,
  32% {
    top: 43%;
  }
  48%,
  56% {
    top: 55%;
  }
  72%,
  80% {
    top: 67%;
  }
  100% {
    top: 31%;
  }
}

@keyframes ore-heartbeat {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.14);
  }
}

@keyframes coin-float {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.7);
  }
  20%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-42px) scale(1.05);
  }
}

@keyframes burst-coin {
  0% {
    opacity: 1;
    transform: rotate(calc(var(--i) * 40deg)) translateY(-6px) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 40deg)) translateY(-82px) scale(1.1);
  }
}

@keyframes action-ring {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.22) rotate(0deg);
  }
  72% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08) rotate(38deg);
  }
}

@keyframes action-spark {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateY(-12px) scale(0.35);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateY(-112px) scale(0.2);
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chest-pop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.82);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chest-lid-open {
  0%,
  100% {
    transform: rotateX(0deg) translateY(0);
  }
  48% {
    transform: rotateX(52deg) translateY(-5px);
  }
}

@keyframes chest-stage-pop {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(-1deg);
  }
  50% {
    transform: translateY(-5px) scale(1.035) rotate(1deg);
  }
}

@keyframes chest-beam-pulse {
  0%,
  100% {
    opacity: 0.48;
    transform: translateY(7px) scaleY(0.92) scaleX(0.9);
  }
  50% {
    opacity: 0.86;
    transform: translateY(-5px) scaleY(1.08) scaleX(1.04);
  }
}

@keyframes chest-loot-bounce {
  0%,
  100% {
    transform: translateY(2px) rotate(-1deg) scale(0.96);
  }
  50% {
    transform: translateY(-4px) rotate(1deg) scale(1.04);
  }
}

@keyframes chest-card-flip {
  0% {
    opacity: 0;
    transform: translateY(20px) rotateY(68deg) scale(0.78);
  }
  62% {
    opacity: 1;
    transform: translateY(-3px) rotateY(-6deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@keyframes chest-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-14px) scale(0.3);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-142px) scale(0.12);
  }
}

@keyframes chest-kiosk-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.025);
  }
}

@keyframes chest-pack-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chest-pack-bounce {
  0%,
  100% {
    filter: drop-shadow(0 5px 0 rgba(88, 42, 18, 0.18)) drop-shadow(0 0 14px rgba(255, 224, 75, 0.58));
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    filter: drop-shadow(0 7px 0 rgba(88, 42, 18, 0.14)) drop-shadow(0 0 24px rgba(255, 224, 75, 0.8));
    transform: translateY(-4px) rotate(1deg) scale(1.035);
  }
}

@keyframes chest-card-stream-rise {
  0%,
  100% {
    opacity: 0.68;
    transform: translateY(8px) scale(0.94) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-6px) scale(1.03) rotate(2deg);
  }
}

@keyframes chest-rarity-light {
  0%,
  100% {
    transform: scaleX(0.92);
  }
  50% {
    transform: scaleX(1);
  }
}

@keyframes drop-card-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes drawer-row-enter {
  0% {
    opacity: 1;
    transform: translateY(9px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes portrait-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
  }
}

@keyframes portrait-shine {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-55%) rotate(8deg);
  }
  72% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(58%) rotate(8deg);
  }
}

@keyframes portrait-legendary {
  0%,
  100% {
    filter: brightness(1) saturate(1.06);
    transform: translateY(0) scale(1);
  }
  50% {
    filter: brightness(1.13) saturate(1.18);
    transform: translateY(-1px) scale(1.035);
  }
}

@keyframes booster-icon-pulse {
  0%,
  100% {
    filter: saturate(1.08) brightness(1);
    transform: rotate(-1deg) scale(1);
  }
  50% {
    filter: saturate(1.26) brightness(1.12);
    transform: rotate(2deg) scale(1.07);
  }
}

@keyframes chest-icon-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  45% {
    transform: translateY(-2px) rotate(-2deg);
  }
  72% {
    transform: translateY(1px) rotate(1deg);
  }
}

@keyframes reward-icon-ready {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.18);
    transform: scale(1.08);
  }
}

@keyframes streak-shine {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-78%);
  }
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateX(78%);
  }
}

@keyframes streak-ready {
  0%,
  100% {
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }
  50% {
    filter: brightness(1.18);
    transform: translateY(-2px) scale(1.06);
  }
}

@keyframes streak-gem {
  0%,
  100% {
    filter: brightness(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(0.72);
  }
  50% {
    filter: brightness(1.28);
    transform: translate(-50%, -58%) rotate(45deg) scale(0.92);
  }
}

@keyframes chest-hero-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes chest-aura-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes manager-album-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.86);
  }
  70% {
    transform: translateY(-2px) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes manager-portrait-breathe {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    transform: translateY(0) scale(1);
  }
  50% {
    filter: brightness(1.08) saturate(1.08);
    transform: translateY(-2px) scale(1.025);
  }
}

@keyframes live16-manager-breathe {
  0%,
  100% {
    filter: brightness(1.02) saturate(1.04);
    transform: translateY(0) scale(1);
  }
  46% {
    filter: brightness(1.12) saturate(1.12);
    transform: translateY(-2px) scale(1.035);
  }
  72% {
    filter: brightness(1.06) saturate(1.08);
    transform: translateY(-1px) scale(1.014);
  }
}

@keyframes live16-manager-spotlight {
  0%,
  100% {
    filter: brightness(1.04) saturate(1.08) drop-shadow(0 0 10px rgba(83, 229, 255, 0.48));
    transform: translateY(0) scale(1);
  }
  42% {
    filter: brightness(1.16) saturate(1.18) drop-shadow(0 0 18px rgba(255, 226, 74, 0.68));
    transform: translateY(-3px) scale(1.045);
  }
}

@keyframes live16-manager-rarity-scan {
  to {
    transform: rotate(360deg);
  }
}

@keyframes title-profile-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(83, 224, 255, 0));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(83, 224, 255, 0.75));
    transform: translateY(-1px);
  }
}

@keyframes event-portal-float {
  0%,
  100% {
    filter: drop-shadow(0 8px 0 rgba(11, 73, 105, 0.22)) drop-shadow(0 0 20px rgba(88, 221, 255, 0.58));
    transform: translateY(0) scale(1);
  }
  50% {
    filter: drop-shadow(0 10px 0 rgba(11, 73, 105, 0.18)) drop-shadow(0 0 30px rgba(177, 105, 255, 0.72));
    transform: translateY(-4px) scale(1.035);
  }
}

@keyframes event-portal-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.05);
  }
}

@keyframes event-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-20px) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-178px) scale(0.08);
  }
}

@keyframes league-trophy-float {
  0%,
  100% {
    filter: drop-shadow(0 8px 0 rgba(18, 66, 130, 0.22)) drop-shadow(0 0 22px rgba(255, 224, 74, 0.62));
    transform: translateY(0) scale(1);
  }
  42% {
    filter: drop-shadow(0 10px 0 rgba(18, 66, 130, 0.18)) drop-shadow(0 0 30px rgba(84, 222, 255, 0.72));
    transform: translateY(-5px) scale(1.04);
  }
  68% {
    transform: translateY(1px) scale(0.995);
  }
}

@keyframes league-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-18px) scale(0.25);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-152px) scale(0.16);
  }
}

@keyframes chest-gems-pop {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -45%) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.1);
  }
}

@keyframes reward-reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes reward-card-pop {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.8);
  }
  72% {
    transform: translateY(-3px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-aura-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes reward-card-shine {
  0% {
    opacity: 0;
    transform: translateX(-78%);
  }
  34% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(78%);
  }
}

@keyframes reward-hero-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-5px) scale(1.045);
  }
}

@keyframes reward-gems-pop {
  0%,
  100% {
    opacity: 0.42;
    transform: translate(-50%, -45%) scale(0.82);
  }
  50% {
    opacity: 0.94;
    transform: translate(-50%, -60%) scale(1.08);
  }
}

@keyframes reward-pill-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 20deg)) translateY(-12px) scale(0.3);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 20deg)) translateY(-142px) scale(0.12);
  }
}

@keyframes progress-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

@keyframes skill-orb-ready {
  0%,
  100% {
    filter: brightness(1) saturate(1.06);
    transform: translateY(0) scale(1);
  }
  50% {
    filter: brightness(1.18) saturate(1.2);
    transform: translateY(-2px) scale(1.08);
  }
}

@keyframes skill-orb-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shop-sparkle-pop {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(0) scale(0.92);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.08);
  }
}

@keyframes shop-showcase-aura {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shop-showcase-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-5px) rotate(1deg) scale(1.035);
  }
}

@keyframes shop-showcase-gems {
  0%,
  100% {
    opacity: 0.54;
    transform: translateY(2px) scale(0.88);
  }
  50% {
    opacity: 0.94;
    transform: translateY(-3px) scale(1.08);
  }
}

@keyframes contract-deal-aura {
  to {
    transform: rotate(360deg);
  }
}

@keyframes contract-kiosk-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-5px) rotate(1deg) scale(1.035);
  }
}

@keyframes contract-gems-rise {
  0%,
  100% {
    opacity: 0.56;
    transform: translateY(3px) scale(0.9);
  }
  50% {
    opacity: 0.96;
    transform: translateY(-3px) scale(1.08);
  }
}

@keyframes contract-card-deal-in {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
  70% {
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes contract-card-frame-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes contract-loot-hop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.06);
  }
}

@keyframes contract-reward-pile-pop {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(1deg);
  }
  50% {
    transform: translateY(-5px) scale(1.045) rotate(-1deg);
  }
}

@keyframes premium-core-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(-1deg);
  }
  50% {
    transform: translateY(-4px) scale(1.045) rotate(1deg);
  }
}

@keyframes premium-token-rise {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(4px) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.08);
  }
}

@keyframes shop-card-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.88);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shop-product-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-4px) scale(1.05);
  }
}

@keyframes shop-mini-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.08);
  }
}

@keyframes shop-pack-pop {
  0%,
  100% {
    transform: translateY(0) rotate(1deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(-1deg) scale(1.055);
  }
}

@keyframes shop-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 18deg)) translateY(-18px) scale(0.28);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 18deg)) translateY(-150px) scale(0.12);
  }
}

@keyframes manager-reveal-pop {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.8);
  }
  72% {
    transform: translateY(-3px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes manager-reveal-worker {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes manager-action-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-5px) scale(1.045);
  }
}

@keyframes crew-command-aura {
  to {
    transform: rotate(360deg);
  }
}

@keyframes crew-hero-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.035);
  }
}

@keyframes crew-gems-rise {
  0%,
  100% {
    opacity: 0.62;
    transform: translateY(4px) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.05);
  }
}

@keyframes crew-mini-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.08);
  }
}

@keyframes crew-slot-enter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  70% {
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes crew-slot-art-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-3px) rotate(1deg);
  }
}

@keyframes academy-aura-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes academy-stage-hall-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.02);
  }
}

@keyframes academy-stage-pod-glow {
  0%,
  100% {
    filter: drop-shadow(0 7px 0 rgba(9, 72, 102, 0.18)) drop-shadow(0 0 18px rgba(84, 222, 255, 0.55));
    transform: translateY(0) scale(1);
  }
  50% {
    filter: drop-shadow(0 9px 0 rgba(9, 72, 102, 0.14)) drop-shadow(0 0 30px rgba(255, 225, 76, 0.8));
    transform: translateY(-3px) scale(1.035);
  }
}

@keyframes academy-pod-ring {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes academy-skill-burst-pulse {
  0%,
  100% {
    opacity: 0.82;
    transform: translateY(0) scale(0.96) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04) rotate(2deg);
  }
}

@keyframes academy-trainee-train {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  45% {
    transform: translateY(-4px) rotate(2deg);
  }
  70% {
    transform: translateY(1px) rotate(-1deg);
  }
}

@keyframes academy-card-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes academy-hero-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.035);
  }
}

@keyframes academy-gems-rise {
  0%,
  100% {
    opacity: 0.62;
    transform: translateY(4px) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) scale(1.05);
  }
}

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

@keyframes academy-certificate-pop {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(-1deg);
  }
  48% {
    transform: translateY(-5px) scale(1.045) rotate(1deg);
  }
}

@keyframes academy-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 17deg)) translateY(-16px) scale(0.3);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 17deg)) translateY(-154px) scale(0.12);
  }
}

@keyframes manager-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 22.5deg)) translateY(-16px) scale(0.3);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 22.5deg)) translateY(-140px) scale(0.14);
  }
}

@keyframes world-card-shine {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-75%);
  }
  72% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(75%);
  }
}

@keyframes world-scene-gems {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 6px color-mix(in srgb, var(--world-crystal, #68d8ff), #fff 20%));
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.22) drop-shadow(0 0 11px color-mix(in srgb, var(--world-crystal, #68d8ff), #fff 35%));
    transform: translateY(-1px);
  }
}

@keyframes world-cart-pulse {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(4px) translateY(-1px);
  }
}

@keyframes world-travel-fade {
  0% {
    opacity: 0;
  }
  14%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes world-travel-card {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.82);
  }
  22%,
  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.04);
  }
}

@keyframes world-travel-scan {
  0% {
    opacity: 0;
    transform: translateX(-82%);
  }
  36%,
  62% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(82%);
  }
}

@keyframes world-travel-cart {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateX(126px) translateY(-4px) rotate(2deg);
  }
}

@keyframes prestige-aura-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes prestige-core-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.04);
  }
}

@keyframes prestige-ring-spin {
  to {
    transform: translate(-50%, -50%) rotate(348deg);
  }
}

@keyframes prestige-glint {
  0%,
  100% {
    opacity: 0.54;
    transform: rotate(45deg) scale(0.82);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.15);
  }
}

@keyframes prestige-progress-flow {
  to {
    background-position: 180% 0;
  }
}

@keyframes prestige-node-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes prestige-card-pop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.78);
  }
  72% {
    transform: translateY(-3px) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes prestige-portal-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.055);
  }
}

@keyframes prestige-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-18px) scale(0.25);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 15deg)) translateY(-152px) scale(0.16);
  }
}

@keyframes season-aura-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes season-ticket-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-5px) rotate(1deg) scale(1.04);
  }
}

@keyframes season-ring-spin {
  to {
    transform: translate(-50%, -50%) rotate(348deg);
  }
}

@keyframes season-chest-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-5px) scale(1.04);
  }
  64% {
    transform: translateY(1px) scale(0.99);
  }
}

@keyframes season-spark-fly {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 16.36deg)) translateY(-18px) scale(0.25);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 16.36deg)) translateY(-146px) scale(0.16);
  }
}

@keyframes live-board-scan {
  0%,
  100% {
    opacity: 0.2;
    transform: translateY(2px) scale(0.98);
    filter: drop-shadow(0 0 14px rgba(68, 218, 255, 0.42));
  }
  50% {
    opacity: 0.34;
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 0 24px rgba(68, 218, 255, 0.64));
  }
}

@keyframes live-panel-aura-breathe {
  0%,
  100% {
    opacity: 0.36;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.62;
    transform: translateY(-4px) scale(1.02);
  }
}

@keyframes live-conveyor-push {
  0%,
  100% {
    opacity: 0.22;
    transform: translateX(-2px) rotate(-3deg) scale(0.96);
  }
  50% {
    opacity: 0.38;
    transform: translateX(5px) rotate(-1deg) scale(1.02);
  }
}

@keyframes premium-machine-idle {
  0%,
  100% {
    opacity: 0.22;
    transform: translateY(3px) scale(0.96);
  }
  50% {
    opacity: 0.34;
    transform: translateY(-4px) scale(1.03);
  }
}

@keyframes live-chest-burst-pulse {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(2px) scale(0.94) rotate(-2deg);
  }
  50% {
    opacity: 0.52;
    transform: translateY(-5px) scale(1.04) rotate(1deg);
  }
}

@keyframes contract-desk-glow {
  0%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.8) rotate(-1deg);
  }
  50% {
    opacity: 0.38;
    transform: translate(-50%, -52%) scale(0.88) rotate(1deg);
  }
}

@keyframes manager-ops-aura {
  to {
    transform: rotate(360deg);
  }
}

@keyframes manager-spotlight-aura {
  to {
    transform: rotate(360deg);
  }
}

@keyframes manager-spotlight-frame-glow {
  0%,
  100% {
    opacity: 0.18;
    transform: translateY(2px) scale(0.96) rotate(-2deg);
  }
  50% {
    opacity: 0.36;
    transform: translateY(-5px) scale(1.04) rotate(1deg);
  }
}

@keyframes manager-spotlight-holo-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(1deg) scale(1.035);
  }
}

@keyframes manager-spotlight-dial-pulse {
  0%,
  100% {
    opacity: 0.38;
    transform: translateY(1px) scale(0.96);
  }
  50% {
    opacity: 0.62;
    transform: translateY(-5px) scale(1.05);
  }
}

@keyframes manager-spotlight-clock-tick {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(2px) scale(0.94);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-3px) scale(1.04);
  }
}

@keyframes manager-spotlight-clock-hand {
  to {
    transform: rotate(360deg);
  }
}

@keyframes manager-spotlight-skill-fx {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }
  45% {
    transform: translateY(-5px) rotate(2deg) scale(1.08);
  }
  72% {
    transform: translateY(2px) rotate(0deg) scale(0.98);
  }
}

@keyframes manager-spotlight-action-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.06);
  }
}

@keyframes live4-desk-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-5px) rotate(1deg) scale(1.025);
  }
}

@keyframes live4-route-blips {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(0) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.12);
  }
}

@keyframes live4-console-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.05);
  }
}

@keyframes live4-energy-rise {
  0%,
  100% {
    opacity: 0.44;
    transform: translateY(8px) scaleY(0.82);
  }
  50% {
    opacity: 0.88;
    transform: translateY(-6px) scaleY(1.08);
  }
}

@keyframes live4-route-fill {
  0%,
  100% {
    opacity: 0.6;
    transform: scaleX(0.42);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes live4-card-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-4px) rotate(1deg) scale(1.06);
  }
}

@keyframes live4-register-gems {
  0%,
  100% {
    opacity: 0.62;
    transform: translateY(5px) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.08);
  }
}

@keyframes live4-scan-line {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(8px) scaleX(0.86);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-5px) scaleX(1.04);
  }
}

@keyframes live4-receipt-stamp {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }
  45% {
    transform: translateY(-5px) rotate(2deg) scale(1.06);
  }
  62% {
    transform: translateY(2px) rotate(0deg) scale(0.98);
  }
}

@keyframes live4-conveyor-roll {
  0%,
  100% {
    transform: translateX(5px) translateY(0) rotate(0deg);
  }
  48% {
    transform: translateX(-7px) translateY(-4px) rotate(-2deg);
  }
  72% {
    transform: translateX(0) translateY(2px) rotate(1deg);
  }
}

@keyframes shop-card-shine {
  0%,
  52% {
    opacity: 0;
    transform: translateX(-82%);
  }
  64% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(82%);
  }
}

@keyframes live5-broker-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-5px) rotate(1deg) scale(1.03);
  }
}

@keyframes live5-scanner-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-4px) scale(1.04);
  }
  72% {
    transform: translateY(1px) scale(0.98);
  }
}

@keyframes live5-scan-beam {
  0%,
  100% {
    opacity: 0.36;
    transform: translateY(-14px) scaleX(0.72);
  }
  50% {
    opacity: 1;
    transform: translateY(13px) scaleX(1.04);
  }
}

@keyframes live5-podium-glow {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(2px) scale(0.96);
  }
  50% {
    opacity: 0.46;
    transform: translateY(-4px) scale(1.03);
  }
}

@keyframes live5-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes live5-card-hover {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-4px) rotate(1deg) scale(1.04);
  }
}

@keyframes live5-contract-stamp {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg) scale(1);
  }
  42% {
    transform: translateY(-6px) rotate(2deg) scale(1.08);
  }
  62% {
    transform: translateY(2px) rotate(0deg) scale(0.96);
  }
}

@media (min-width: 720px) {
  .phone-shell {
    width: 430px;
  }
}

@media (max-width: 360px) {
  .currency-chip {
    grid-template-columns: 23px minmax(0, 1fr) 18px;
  }

  .coin-badge {
    width: 22px;
    height: 22px;
  }

  .shaft-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .worker-zone {
    left: 76px;
    right: 60px;
  }

  .upgrade-button strong {
    font-size: 0.74rem;
  }
}

/* LIVE31: high-polish generated surface assets replace the blocky WebGL prototype by default. */
.phone-shell:not(.real3d-surface-active) .surface-3d-canvas {
  display: none;
}

.phone-shell:not(.real3d-surface-active) .surface-worker {
  --live31-haul-x: min(24vw, 103px);
  left: 4.8%;
  top: 23.05%;
  z-index: 17;
  width: 140px;
  height: 133px;
  background-image: url("/assets/surface-live31-worker-push.png?v=live31-art");
  background-size: contain;
  opacity: 0;
  transform-origin: 50% 92%;
  filter:
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.31))
    drop-shadow(0 0 10px rgba(255, 226, 73, 0.22));
}

.phone-shell:not(.real3d-surface-active) .surface-worker::after {
  display: none;
}

.phone-shell:not(.real3d-surface-active) .surface-worker.active {
  display: block;
  opacity: 1;
  animation:
    live31-worker-route 6.2s cubic-bezier(0.32, 0.02, 0.18, 1) infinite,
    live31-worker-bob 680ms ease-in-out infinite,
    live31-worker-frames 6.2s steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-worker.receiving {
  display: block;
  opacity: 1;
  background-image: url("/assets/surface-live31-worker-push.png?v=live31-art");
  animation:
    live31-worker-receive 1.45s ease-in-out infinite,
    live31-worker-bob 720ms ease-in-out infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-worker.tier-gold,
.phone-shell:not(.real3d-surface-active) .surface-worker.tier-crystal {
  filter:
    drop-shadow(0 0 14px rgba(255, 227, 76, 0.72))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.31));
}

.phone-shell:not(.real3d-surface-active) .surface-transfer-cart,
.phone-shell:not(.real3d-surface-active) .surface-haul-cargo,
.phone-shell:not(.real3d-surface-active) .surface-loader-vehicle {
  display: none !important;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp {
  left: 43.6%;
  top: 22.4%;
  z-index: 13;
  display: none;
  width: 102px;
  height: 100px;
  background-image: url("/assets/surface-live31-loader-ramp.png?v=live31-art");
  background-size: contain;
  opacity: 0;
  transform-origin: 48% 89%;
  filter:
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 9px rgba(255, 225, 75, 0.2));
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp.active {
  display: block;
  opacity: 0.94;
  animation: live31-ramp-work 6.2s ease-in-out infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp.receiving {
  opacity: 0.72;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp::before {
  display: none;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck {
  left: 52.4%;
  top: 20.55%;
  z-index: 9;
  width: 202px;
  height: 157px;
  background-image: url("/assets/surface-live31-truck-empty.png?v=live31-art");
  background-size: contain;
  opacity: 0.98;
  transform-origin: 52% 92%;
  animation: live31-truck-idle 1.4s ease-in-out infinite;
  filter:
    drop-shadow(0 9px 7px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 9px rgba(84, 221, 255, 0.16));
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.active,
.phone-shell:not(.real3d-surface-active) .sprite-truck.receiving,
.phone-shell:not(.real3d-surface-active) .sprite-truck.loaded {
  background-image: url("/assets/surface-live31-truck-empty.png?v=live31-art");
  animation: live31-truck-loaded-idle 1.25s ease-in-out infinite;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.selling {
  background-image: url("/assets/surface-live31-truck-empty.png?v=live31-art");
  animation:
    live31-truck-sell 5.2s cubic-bezier(0.28, 0.02, 0.2, 1) infinite,
    live31-truck-loaded-idle 720ms ease-in-out infinite;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-steel,
.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-gold,
.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-crystal {
  left: 51.2%;
  top: 19.9%;
  width: 212px;
  height: 165px;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck::before {
  left: 10px;
  top: 13px;
  width: 112px;
  height: 80px;
  background-image: url("/assets/surface-live31-ore-pile.png?v=live31-art");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(255, 225, 75, 0.5));
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.loaded::before,
.phone-shell:not(.real3d-surface-active) .sprite-truck.selling::before {
  display: block;
  opacity: 0.82;
  animation: live31-truck-ore-pulse 940ms ease-in-out infinite;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck::after {
  left: 21px;
  right: 15px;
  bottom: 4px;
  height: 19px;
  border-radius: 50%;
  background: rgba(29, 26, 16, 0.25);
  filter: blur(2px);
  opacity: 0.55;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx {
  left: 47.8%;
  top: 22.3%;
  z-index: 18;
  display: none;
  width: 120px;
  height: 132px;
  background: none;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 0 13px rgba(255, 225, 75, 0.66))
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.16));
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx.show {
  display: block;
  opacity: 1;
  animation: live31-load-window 6.2s linear infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx b {
  left: 40px;
  top: 26px;
  width: 78px;
  height: 78px;
  background:
    radial-gradient(ellipse at 55% 62%, rgba(255, 234, 92, 0.54), transparent 60%),
    radial-gradient(circle at 44% 35%, rgba(90, 232, 255, 0.34), transparent 42%);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: live31-load-glow 720ms ease-in-out infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i {
  left: 14px;
  top: 54px;
  width: 15px;
  height: 15px;
  border-radius: 38% 14% 42% 16%;
  opacity: 1;
  animation: live31-crystal-arc 740ms ease-in infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i:nth-child(2) {
  left: 27px;
  top: 46px;
  width: 13px;
  height: 13px;
  animation-delay: 90ms;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i:nth-child(3) {
  left: 38px;
  top: 57px;
  width: 14px;
  height: 14px;
  animation-delay: 180ms;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i:nth-child(4) {
  left: 49px;
  top: 49px;
  width: 12px;
  height: 12px;
  animation-delay: 270ms;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i:nth-child(5) {
  left: 59px;
  top: 60px;
  width: 11px;
  height: 11px;
  animation-delay: 360ms;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i:nth-child(6) {
  left: 70px;
  top: 51px;
  width: 10px;
  height: 10px;
  animation-delay: 450ms;
}

@keyframes live31-worker-route {
  0%,
  10% {
    transform: translate3d(0, 0, 0) scaleX(1);
  }
  45% {
    transform: translate3d(var(--live31-haul-x), 0, 0) scaleX(1);
  }
  49%,
  64% {
    transform: translate3d(var(--live31-haul-x), 0, 0) scaleX(1) rotate(-2deg);
  }
  68% {
    transform: translate3d(var(--live31-haul-x), 0, 0) scaleX(-1);
  }
  96%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(-1);
  }
}

@keyframes live31-worker-frames {
  0%,
  47%,
  67%,
  100% {
    background-image: url("/assets/surface-live31-worker-push.png?v=live31-art");
  }
  48%,
  66% {
    background-image: url("/assets/surface-live31-worker-dump.png?v=live31-art");
  }
}

@keyframes live31-worker-bob {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -4px;
  }
}

@keyframes live31-worker-receive {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(7px, -2px, 0) rotate(2deg);
  }
}

@keyframes live31-ramp-work {
  0%,
  43%,
  69%,
  100% {
    opacity: 0.2;
    transform: translate3d(-5px, 4px, 0) rotate(-6deg) scale(0.94);
  }
  48%,
  64% {
    opacity: 0.98;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes live31-load-window {
  0%,
  46%,
  68%,
  100% {
    opacity: 0;
  }
  49%,
  64% {
    opacity: 1;
  }
}

@keyframes live31-crystal-arc {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(0deg) scale(0.65);
  }
  20% {
    opacity: 1;
  }
  58% {
    transform: translate3d(30px, -18px, 0) rotate(112deg) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate3d(68px, 5px, 0) rotate(220deg) scale(0.82);
  }
}

@keyframes live31-load-glow {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.95;
  }
}

@keyframes live31-truck-idle {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.3deg);
  }
  50% {
    transform: translate3d(0, -2px, 0) rotate(0.4deg);
  }
}

@keyframes live31-truck-loaded-idle {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0.2deg);
  }
  50% {
    transform: translate3d(0, -3px, 0) rotate(-0.4deg);
  }
}

@keyframes live31-truck-sell {
  0%,
  18% {
    translate: 0 0;
    opacity: 1;
  }
  48% {
    translate: 42px 0;
    opacity: 1;
  }
  58% {
    translate: 68px 0;
    opacity: 0;
  }
  68% {
    translate: -24px 0;
    opacity: 0;
  }
  80%,
  100% {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes live31-truck-ore-pulse {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.96;
  }
}

/* LIVE32: smaller staged transport cycle with many rendered frame assets. */
.phone-shell:not(.real3d-surface-active) .surface-worker {
  --live32-haul-x: min(18vw, 76px);
  left: 2.4%;
  top: 25.15%;
  width: 110px;
  height: 98px;
  background-image: url("/assets/surface-live32-worker-01.png?v=live64-elevator-cycle-cart-hit");
}

.phone-shell:not(.real3d-surface-active) .surface-worker.active {
  animation:
    live32-worker-route 8.4s cubic-bezier(0.32, 0.02, 0.18, 1) infinite,
    live32-worker-frames 8.4s steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-worker.receiving {
  background-image: url("/assets/surface-live32-worker-01.png?v=live64-elevator-cycle-cart-hit");
  animation:
    live32-worker-receive 1.55s ease-in-out infinite,
    live32-worker-pickup-frames 1.55s steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-worker.waiting {
  display: block;
  opacity: 0.98;
  background-image: url("/assets/surface-live32-worker-01.png?v=live64-elevator-cycle-cart-hit");
  animation: none;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp {
  left: 47%;
  top: 25.85%;
  width: 88px;
  height: 72px;
  background-image: url("/assets/surface-live63-conveyor-01.png?v=live64-elevator-cycle-cart-hit");
  transform-origin: 50% 88%;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp.active {
  display: block;
  opacity: 1;
  animation:
    live49-conveyor-route 8.4s linear infinite,
    live32-conveyor-frames 860ms steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp.receiving {
  opacity: 1;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp.waiting {
  display: block;
  opacity: 0.94;
  background-image: url("/assets/surface-live63-conveyor-01.png?v=live64-elevator-cycle-cart-hit");
  animation: none;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck {
  left: 64%;
  top: 25.25%;
  width: 136px;
  height: 100px;
  background-image: url("/assets/surface-live32-truck-idle-01.png?v=live44-visible-bedfill");
  animation:
    live32-truck-idle 1.1s ease-in-out infinite,
    live32-truck-idle-frames 780ms steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.active,
.phone-shell:not(.real3d-surface-active) .sprite-truck.receiving,
.phone-shell:not(.real3d-surface-active) .sprite-truck.loaded {
  background-image: url("/assets/surface-live48-truck-load-01.png?v=live48-frontreturn");
  animation:
    live48-truck-load-route 10.4s linear infinite,
    live32-truck-load-frames 10.4s steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.selling {
  background-image: url("/assets/surface-live32-truck-drive-01.png?v=live44-visible-bedfill");
  animation:
    live32-truck-sell-route 5.4s cubic-bezier(0.28, 0.02, 0.2, 1) infinite,
    live32-truck-drive-frames 420ms steps(1, end) infinite;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-steel,
.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-gold,
.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-crystal {
  left: 63.1%;
  top: 24.95%;
  width: 142px;
  height: 104px;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck::before {
  display: none !important;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx {
  left: 48.8%;
  top: 25.35%;
  width: 68px;
  height: 68px;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx.show {
  display: none;
  animation: none;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i {
  top: 45px;
  width: 10px;
  height: 10px;
  animation: live32-crystal-to-conveyor 680ms ease-in infinite;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx b {
  left: 22px;
  top: 18px;
  width: 54px;
  height: 54px;
}

@keyframes live32-worker-route {
  0%,
  16% {
    transform: translate3d(0, 0, 0) scaleX(1);
  }
  18%,
  43% {
    transform: translate3d(var(--live32-haul-x), 0, 0) scaleX(1);
  }
  46%,
  62% {
    transform: translate3d(var(--live32-haul-x), 0, 0) scaleX(1) rotate(-1.5deg);
  }
  65% {
    transform: translate3d(var(--live32-haul-x), 0, 0) scaleX(-1);
  }
  93%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(-1);
  }
}

@keyframes live32-worker-frames {
  0%,
  5% {
    background-image: url("/assets/surface-live32-worker-01.png?v=live64-elevator-cycle-cart-hit");
  }
  6%,
  11% {
    background-image: url("/assets/surface-live32-worker-02.png?v=live64-elevator-cycle-cart-hit");
  }
  12%,
  17% {
    background-image: url("/assets/surface-live32-worker-03.png?v=live64-elevator-cycle-cart-hit");
  }
  18%,
  22% {
    background-image: url("/assets/surface-live32-worker-04.png?v=live64-elevator-cycle-cart-hit");
  }
  23%,
  29% {
    background-image: url("/assets/surface-live32-worker-05.png?v=live64-elevator-cycle-cart-hit");
  }
  30%,
  36% {
    background-image: url("/assets/surface-live32-worker-06.png?v=live64-elevator-cycle-cart-hit");
  }
  37%,
  43% {
    background-image: url("/assets/surface-live32-worker-07.png?v=live64-elevator-cycle-cart-hit");
  }
  44% {
    background-image: url("/assets/surface-live32-worker-08.png?v=live64-elevator-cycle-cart-hit");
  }
  45%,
  49% {
    background-image: url("/assets/surface-live32-worker-09.png?v=live64-elevator-cycle-cart-hit");
  }
  50%,
  54% {
    background-image: url("/assets/surface-live32-worker-10.png?v=live64-elevator-cycle-cart-hit");
  }
  55%,
  59% {
    background-image: url("/assets/surface-live32-worker-11.png?v=live64-elevator-cycle-cart-hit");
  }
  60%,
  64% {
    background-image: url("/assets/surface-live32-worker-12.png?v=live64-elevator-cycle-cart-hit");
  }
  65%,
  73% {
    background-image: url("/assets/surface-live32-worker-13.png?v=live64-elevator-cycle-cart-hit");
  }
  74%,
  82% {
    background-image: url("/assets/surface-live32-worker-14.png?v=live64-elevator-cycle-cart-hit");
  }
  83%,
  91% {
    background-image: url("/assets/surface-live32-worker-15.png?v=live64-elevator-cycle-cart-hit");
  }
  92%,
  100% {
    background-image: url("/assets/surface-live32-worker-16.png?v=live64-elevator-cycle-cart-hit");
  }
}

@keyframes live32-worker-receive {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.35deg);
  }
  50% {
    transform: translate3d(3px, -0.5px, 0) rotate(0.55deg);
  }
}

@keyframes live32-worker-pickup-frames {
  0%,
  24% {
    background-image: url("/assets/surface-live32-worker-01.png?v=live64-elevator-cycle-cart-hit");
  }
  25%,
  49% {
    background-image: url("/assets/surface-live32-worker-02.png?v=live64-elevator-cycle-cart-hit");
  }
  50%,
  74% {
    background-image: url("/assets/surface-live32-worker-03.png?v=live64-elevator-cycle-cart-hit");
  }
  75%,
  100% {
    background-image: url("/assets/surface-live32-worker-04.png?v=live64-elevator-cycle-cart-hit");
  }
}

@keyframes live49-conveyor-route {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes live32-conveyor-frames {
  0% {
    background-image: url("/assets/surface-live63-conveyor-01.png?v=live64-elevator-cycle-cart-hit");
  }
  12.5% {
    background-image: url("/assets/surface-live63-conveyor-02.png?v=live64-elevator-cycle-cart-hit");
  }
  25% {
    background-image: url("/assets/surface-live63-conveyor-03.png?v=live64-elevator-cycle-cart-hit");
  }
  37.5% {
    background-image: url("/assets/surface-live63-conveyor-04.png?v=live64-elevator-cycle-cart-hit");
  }
  50% {
    background-image: url("/assets/surface-live63-conveyor-05.png?v=live64-elevator-cycle-cart-hit");
  }
  62.5% {
    background-image: url("/assets/surface-live63-conveyor-06.png?v=live64-elevator-cycle-cart-hit");
  }
  75% {
    background-image: url("/assets/surface-live63-conveyor-07.png?v=live64-elevator-cycle-cart-hit");
  }
  87.5%,
  100% {
    background-image: url("/assets/surface-live63-conveyor-08.png?v=live64-elevator-cycle-cart-hit");
  }
}

@keyframes live32-truck-idle {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.2deg);
  }
  50% {
    transform: translate3d(0, -1px, 0) rotate(0.2deg);
  }
}

@keyframes live32-truck-running {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0.2deg);
  }
  50% {
    transform: translate3d(0, -2px, 0) rotate(-0.25deg);
  }
}

@keyframes live48-truck-load-route {
  0%,
  18%,
  36%,
  54%,
  58%,
  74% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1) rotate(0.18deg);
  }
  9%,
  27%,
  45%,
  61%,
  72% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scaleX(1) rotate(-0.25deg);
  }
  78% {
    opacity: 1;
    transform: translate3d(22px, -1px, 0) scaleX(1) rotate(0.35deg);
  }
  84% {
    opacity: 1;
    transform: translate3d(108px, 0, 0) scaleX(1) rotate(0.65deg);
  }
  88% {
    opacity: 0.08;
    transform: translate3d(156px, 0, 0) scaleX(1) rotate(0.8deg);
  }
  89% {
    opacity: 0;
    transform: translate3d(172px, 0, 0) scaleX(1) rotate(0.8deg);
  }
  90% {
    opacity: 0;
    transform: translate3d(126px, 0, 0) scaleX(-1) rotate(-0.2deg);
  }
  92% {
    opacity: 1;
    transform: translate3d(110px, 0, 0) scaleX(-1) rotate(-0.12deg);
  }
  96% {
    opacity: 1;
    transform: translate3d(42px, -1px, 0) scaleX(-1) rotate(0.25deg);
  }
  98.4% {
    opacity: 1;
    transform: translate3d(10px, 0, 0) scaleX(-1) rotate(0.12deg);
  }
  99% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(-1) rotate(0.12deg);
  }
  99.35% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(1) rotate(0.18deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1) rotate(0.18deg);
  }
}

@keyframes live32-truck-idle-frames {
  0% {
    background-image: url("/assets/surface-live32-truck-idle-01.png?v=live44-visible-bedfill");
  }
  25% {
    background-image: url("/assets/surface-live32-truck-idle-02.png?v=live44-visible-bedfill");
  }
  50% {
    background-image: url("/assets/surface-live32-truck-idle-03.png?v=live44-visible-bedfill");
  }
  75%,
  100% {
    background-image: url("/assets/surface-live32-truck-idle-04.png?v=live44-visible-bedfill");
  }
}

@keyframes live32-truck-load-frames {
  0%,
  14% {
    background-image: url("/assets/surface-live48-truck-load-01.png?v=live48-frontreturn");
  }
  15%,
  25% {
    background-image: url("/assets/surface-live48-truck-load-02.png?v=live48-frontreturn");
  }
  26%,
  36% {
    background-image: url("/assets/surface-live48-truck-load-03.png?v=live48-frontreturn");
  }
  37%,
  47% {
    background-image: url("/assets/surface-live48-truck-load-04.png?v=live48-frontreturn");
  }
  48%,
  58% {
    background-image: url("/assets/surface-live48-truck-load-05.png?v=live48-frontreturn");
  }
  59%,
  68% {
    background-image: url("/assets/surface-live48-truck-load-06.png?v=live48-frontreturn");
  }
  69%,
  89% {
    background-image: url("/assets/surface-live48-truck-load-07.png?v=live48-frontreturn");
  }
  90%,
  100% {
    background-image: url("/assets/surface-live48-truck-load-01.png?v=live48-frontreturn");
  }
}

@keyframes live32-truck-drive-frames {
  0% {
    background-image: url("/assets/surface-live32-truck-drive-01.png?v=live44-visible-bedfill");
  }
  25% {
    background-image: url("/assets/surface-live32-truck-drive-02.png?v=live44-visible-bedfill");
  }
  50% {
    background-image: url("/assets/surface-live32-truck-drive-03.png?v=live44-visible-bedfill");
  }
  75%,
  100% {
    background-image: url("/assets/surface-live32-truck-drive-04.png?v=live44-visible-bedfill");
  }
}

@keyframes live32-truck-sell-route {
  0%,
  20% {
    translate: 0 0;
    opacity: 1;
  }
  50% {
    translate: 46px 0;
    opacity: 1;
  }
  60% {
    translate: 72px 0;
    opacity: 0;
  }
  70% {
    translate: 72px 0;
    opacity: 0;
  }
  84%,
  100% {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes live32-load-window {
  0%,
  43%,
  68%,
  100% {
    opacity: 0;
  }
  47%,
  64% {
    opacity: 1;
  }
}

@keyframes live32-crystal-to-conveyor {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) rotate(0deg) scale(0.65);
  }
  18% {
    opacity: 1;
  }
  58% {
    transform: translate3d(20px, -16px, 0) rotate(110deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(45px, -2px, 0) rotate(230deg) scale(0.75);
  }
}

/* LIVE33: surface alignment polish after visual QA. */
.phone-shell:not(.real3d-surface-active) .surface-warehouse-dock,
.phone-shell:not(.real3d-surface-active) .surface-loader-vehicle,
.phone-shell:not(.real3d-surface-active) .surface-unload-hopper,
.phone-shell:not(.real3d-surface-active) .surface-transfer-cart,
.phone-shell:not(.real3d-surface-active) .surface-haul-track,
.phone-shell:not(.real3d-surface-active) .surface-haul-cargo {
  display: none !important;
}

.phone-shell:not(.real3d-surface-active) .surface-worker {
  --live32-haul-x: min(10.8vw, 46px);
  left: 13.4%;
  top: 28.72%;
  width: 92px;
  height: 82px;
}

.phone-shell:not(.real3d-surface-active) .surface-loader-ramp {
  left: 37.2%;
  top: 27.02%;
  z-index: 12;
  width: 176px;
  height: 92px;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx {
  left: 51.2%;
  top: 26.85%;
  width: 58px;
  height: 58px;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx.show {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx i {
  top: 34px;
  width: 8px;
  height: 8px;
}

.phone-shell:not(.real3d-surface-active) .surface-truck-load-fx b {
  left: 17px;
  top: 14px;
  width: 44px;
  height: 44px;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck {
  left: 70.2%;
  top: 27.95%;
  z-index: 14;
  width: 116px;
  height: 86px;
}

.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-steel,
.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-gold,
.phone-shell:not(.real3d-surface-active) .sprite-truck.tier-crystal {
  left: 69.6%;
  top: 27.75%;
  z-index: 14;
  width: 120px;
  height: 88px;
}

.phone-shell:not(.real3d-surface-active) .surface-depot-badge {
  right: 1.5%;
  top: 20.15%;
  min-width: 64px;
  padding: 3px 6px;
  transform: scale(0.88);
  transform-origin: top right;
}

.phone-shell:not(.real3d-surface-active) .coin-stream,
.phone-shell:not(.real3d-surface-active) .surface-sell-fx,
.phone-shell:not(.real3d-surface-active) .surface-manager-skill-fx,
.phone-shell:not(.real3d-surface-active) .surface-skill-drone,
.phone-shell:not(.real3d-surface-active) .reward-float.cash-sale {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.phone-shell:not(.real3d-surface-active) .surface-ore-burst {
  left: 5.7%;
  top: 30.9%;
  z-index: 17;
  width: 100px;
  height: 50px;
  background:
    radial-gradient(circle at 7px 20px, #ffdc4a 0 5px, transparent 6px),
    radial-gradient(circle at 25px 24px, #50e8ff 0 5px, transparent 6px),
    radial-gradient(circle at 43px 27px, #f4a3ff 0 5px, transparent 6px),
    radial-gradient(circle at 61px 30px, #fff8a5 0 5px, transparent 6px),
    radial-gradient(circle at 80px 32px, #52ef78 0 5px, transparent 6px),
    radial-gradient(circle at 94px 33px, #ff9f2e 0 4px, transparent 5px);
  filter:
    drop-shadow(0 0 10px rgba(255, 223, 72, 0.9))
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.22));
}

.phone-shell:not(.real3d-surface-active) .surface-ore-burst.show {
  display: block;
  opacity: 1;
  animation: live64-surface-cart-stream 620ms ease-out infinite;
}

@keyframes live64-surface-cart-stream {
  0% {
    opacity: 0.18;
    transform: translate3d(-5px, -2px, 0) rotate(4deg) scale(0.82);
  }
  34%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(13px, 3px, 0) rotate(4deg) scale(1.03);
  }
}

.phone-shell:not(.real3d-surface-active) .elevator-manager-slot {
  left: 2.2%;
  top: 18.9%;
}

.phone-shell:not(.real3d-surface-active) .warehouse-manager-slot {
  right: 1.1%;
  top: 17.8%;
}

@media (max-width: 380px) {
  .surface-manager-slot {
    width: 49px;
    height: 58px;
  }

  .surface-manager-copy b {
    font-size: 0.44rem;
  }

  .surface-manager-copy em {
    font-size: 0.41rem;
  }
}


/* Redesign V1: approved premium 2.5D gameplay actors. */
/* Redesign V1: keep actor motion rich while static decoration stays cheap on mobile. */
.redesign-v1 .motion-floor .shaft-structure,
.redesign-v1 .motion-floor .shaft-structure-lamp,
.redesign-v1 .motion-floor .shaft-structure-energy,
.redesign-v1 .motion-floor .shaft-prop,
.redesign-v1 .motion-floor .level-pop,
.redesign-v1 .motion-floor .collect-chip,
.redesign-v1 .motion-floor .shaft-dust,
.redesign-v1 .motion-floor .shaft-sparks,
.redesign-v1 .motion-floor .ore-pulse,
.redesign-v1 .motion-floor .floor-ore-pile {
  animation: none !important;
}

.redesign-v1 .motion-floor.automated .collect-chip {
  display: none;
}

.redesign-v1 .motion-floor.ready:not(.automated) .collect-chip {
  animation: redesign-v2-ready-pulse 1.15s ease-in-out infinite !important;
}

@keyframes redesign-v2-ready-pulse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
  50% { transform: translate3d(0, -2px, 0) scale(1.06); filter: brightness(1.16); }
}

.redesign-v1 .live28-skill-drone:not(.show),
.redesign-v1 .floor-manager-skill-fx:not(.show),
.redesign-v1 .pickaxe-hit-fx:not(.show) {
  display: none !important;
}

.redesign-v1 .sprite-miner.carrier,
.redesign-v1 .sprite-miner.loader,
.redesign-v1 .sprite-cart,
.redesign-v1 .shaft-structure,
.redesign-v1 .shaft-depth-props,
.redesign-v1 .sprite-drill,
.redesign-v1 .tier-prop,
.redesign-v1 .tier-burst,
.redesign-v1 .floor-ore-pile,
.redesign-v1 .pickaxe-hit-fx,
.redesign-v1 .shaft-dust,
.redesign-v1 .shaft-sparks,
.redesign-v1 .ore-pulse,
.redesign-v1 .surface-transfer-cart,
.redesign-v1 .surface-loader-vehicle,
.redesign-v1 .surface-loader-ramp,
.redesign-v1 .surface-haul-cargo,
.redesign-v1 .surface-haul-track,
.redesign-v1 .surface-unload-hopper,
.redesign-v1 .surface-warehouse-dock,
.redesign-v1 .surface-truck-load-fx,
.redesign-v1 .sprite-truck,
.redesign-v1 .elevator-operator,
.redesign-v1 .elevator-cargo,
.redesign-v1 .elevator-cargo-fx,
.redesign-v1 .elevator-load-funnel,
.redesign-v1 .elevator-unload-chute,
.redesign-v1 .elevator-load-sparks,
.redesign-v1 .shaft-loading-arm,
.redesign-v1 .shaft-loader,
.redesign-v1 .loader-callout,
.redesign-v1 .load-stream {
  display: none !important;
}

.redesign-v1 .motion-floor .level-pop {
  right: 1%;
  width: 46px;
  min-height: 48px;
  padding: 3px 2px;
  border-width: 2px;
}

.redesign-v1 .motion-floor .level-pop::before {
  width: 18px;
  height: 14px;
}

.redesign-v1 .motion-floor .level-pop small {
  font-size: 0.54rem;
}

.redesign-v1 .motion-floor .level-pop strong {
  font-size: 0.72rem;
}

.redesign-v1 .sprite-miner.digging {
  right: 10%;
  bottom: 6%;
  left: auto;
  z-index: 12;
  width: 112px;
  height: 112px;
  background-image: url("/assets/redesign-v2-miner-dig-25.png?v=redesign-v2");
  background-position: 0 0;
  background-size: 500% 500%;
  animation: none;
  animation-delay: 0s;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.28));
}

.redesign-v1 .motion-floor.state-walk_to_rock .sprite-miner.digging,
.redesign-v1 .motion-floor.state-mining .sprite-miner.digging {
  animation: redesign-v2-grid-25 1.35s linear 1 both;
}

.redesign-v1 .motion-floor.state-idle .sprite-miner.digging,
.redesign-v1 .motion-floor.state-full .sprite-miner.digging {
  animation-play-state: paused;
}

.redesign-v1 .motion-floor.state-pickup .sprite-miner.digging,
.redesign-v1 .motion-floor.state-carry .sprite-miner.digging,
.redesign-v1 .motion-floor.state-drop .sprite-miner.digging,
.redesign-v1 .motion-floor.state-loading .sprite-miner.digging {
  opacity: 0;
}

.redesign-underground-hauler {
  position: absolute;
  left: 27%;
  bottom: 3%;
  z-index: 11;
  display: none;
  width: 98px;
  height: 98px;
  pointer-events: none;
  background: url("/assets/redesign-v2-underground-hauler-25.png?v=redesign-v2") 0 0 / 500% 500% no-repeat;
  opacity: 0;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.28));
}

.redesign-v1 .motion-floor.unlocked .redesign-underground-hauler {
  display: block;
  animation: none;
}

.redesign-v1 .motion-floor.state-pickup .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-carry .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-drop .redesign-underground-hauler {
  opacity: 1;
  animation:
    redesign-v2-grid-25 5s linear 1 both,
    redesign-v2-underground-route 5s linear 1 both;
}

.redesign-v1 .motion-floor.state-idle .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-full .redesign-underground-hauler {
  animation-play-state: paused;
}

.redesign-v1 .motion-floor.state-walk_to_rock .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-mining .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-idle .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-full .redesign-underground-hauler,
.redesign-v1 .motion-floor.state-loading .redesign-underground-hauler {
  opacity: 0;
}

@keyframes redesign-v2-underground-route {
  0%, 39.999% { transform: translate3d(clamp(88px, 25vw, 108px), 0, 0) scaleX(1); }
  40% { transform: translate3d(clamp(88px, 25vw, 108px), 0, 0) scaleX(-1); }
  59.999%, 79.999% { transform: translate3d(0, 0, 0) scaleX(-1); }
  80% { transform: translate3d(0, 0, 0) scaleX(1); }
  100% { transform: translate3d(clamp(88px, 25vw, 108px), 0, 0) scaleX(1); }
}

.redesign-surface-hauler {
  position: absolute;
  left: 3%;
  top: 25.5%;
  z-index: 20;
  display: block;
  width: 118px;
  height: 118px;
  pointer-events: none;
  background-position: 0 0;
  background-size: 500% 500%;
  background-repeat: no-repeat;
  opacity: 0.82;
  transform-origin: 42% 88%;
  will-change: transform, background-position, opacity;
  animation-play-state: paused;
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.3));
}

.redesign-surface-hauler.hauler-a {
  background-image: url("/assets/redesign-v2-surface-worker-a-cycle-25.png?v=redesign-v2");
}

.redesign-surface-hauler.hauler-b {
  background-image: url("/assets/redesign-v2-surface-worker-b-cycle-25.png?v=redesign-v2");
  opacity: 0;
}

.redesign-surface-hauler.active,
.redesign-surface-hauler.receiving {
  opacity: 1;
  animation:
    redesign-v2-grid-25 5s linear infinite,
    redesign-v2-surface-travel 5s linear infinite;
  animation-play-state: running;
}

.redesign-surface-hauler.hauler-b.active,
.redesign-surface-hauler.hauler-b.receiving {
  animation-delay: 0s;
}

.redesign-surface-hauler.off-shift {
  z-index: 18;
  opacity: 0.34;
  animation: none;
  filter: saturate(0.62) brightness(0.82) drop-shadow(0 7px 5px rgba(0, 0, 0, 0.26));
  transform: translate3d(18px, 3px, 0) scale(0.82);
}

.redesign-surface-hauler.manual-ready {
  pointer-events: auto;
  cursor: pointer;
  outline: 3px solid rgba(255, 232, 75, 0.96);
  outline-offset: -13px;
  border-radius: 28px;
  filter: drop-shadow(0 0 15px rgba(255, 226, 62, 0.9)) drop-shadow(0 9px 7px rgba(0, 0, 0, 0.3));
}

.redesign-surface-hauler.active:not(.manual-ready)::after,
.redesign-surface-hauler.receiving:not(.manual-ready)::after {
  content: attr(data-stage-label);
  position: absolute;
  left: 50%;
  top: 2px;
  min-width: 58px;
  padding: 3px 6px;
  border: 2px solid rgba(255, 249, 164, 0.94);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(180deg, rgba(41, 207, 255, 0.96), rgba(7, 111, 177, 0.96));
  box-shadow: 0 3px 0 rgba(4, 67, 105, 0.5), 0 0 12px rgba(81, 224, 255, 0.6);
  font-size: 0.43rem;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(2, 56, 91, 0.7);
  white-space: nowrap;
  transform: translateX(-50%);
}

.surface-world[data-haul-stage="loading"] .redesign-surface-hauler.active::after {
  color: #603806;
  background: linear-gradient(180deg, #fff47c, #ffad2d);
  box-shadow: 0 3px 0 rgba(135, 73, 8, 0.45), 0 0 14px rgba(255, 226, 74, 0.72);
}

.surface-world[data-haul-stage="unloading"] .redesign-surface-hauler.active::after {
  background: linear-gradient(180deg, #71ee9d, #15945c);
  box-shadow: 0 3px 0 rgba(7, 91, 50, 0.46), 0 0 14px rgba(89, 239, 145, 0.7);
}

.redesign-surface-hauler.manual-ready::after {
  content: "START";
  position: absolute;
  left: 50%;
  top: 4px;
  padding: 2px 7px;
  border: 2px solid #fff5a0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #35c9ff, #0876bc);
  box-shadow: 0 3px 0 #064b78, 0 0 12px rgba(255, 227, 73, 0.8);
  font-size: 0.48rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 #064b78;
  transform: translateX(-50%);
}

.redesign-surface-hauler.off-shift {
  pointer-events: none;
}

.redesign-v1 .surface-worker {
  display: block !important;
  width: 44%;
  height: 17%;
  background: none !important;
  opacity: 0.001;
  filter: none !important;
  animation: none !important;
}

.redesign-v1 .sprite-elevator {
  width: 82px;
  height: 96px;
  background: none !important;
  animation: none;
}

.elevator-redesign-visual {
  position: absolute;
  inset: -4px;
  display: block;
  pointer-events: none;
  background: url("/assets/redesign-v2-elevator-operator-load-25.png?v=redesign-v2") var(--elevator-load-x, 0%) var(--elevator-load-y, 0%) / 500% 500% no-repeat;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.34));
}

.redesign-v1 .sprite-elevator.waiting .elevator-redesign-visual,
.redesign-v1 .sprite-elevator.moving_down.cargo-empty .elevator-redesign-visual {
  animation: redesign-v2-elevator-idle 2.4s linear infinite;
}

.redesign-v1 .sprite-elevator.moving_up.cargo-half .elevator-redesign-visual {
  animation: redesign-v2-elevator-ride-half 1.8s linear infinite;
}

.redesign-v1 .sprite-elevator.moving_up.cargo-full .elevator-redesign-visual {
  animation: redesign-v2-elevator-ride-full 1.8s linear infinite;
}

.redesign-v1 .sprite-elevator.loading .elevator-redesign-visual {
  animation: redesign-v2-elevator-load 1.8s linear both;
}

.redesign-v1 .sprite-elevator.unloading .elevator-redesign-visual {
  animation: redesign-v2-elevator-unload 1.2s linear both;
}

.redesign-manager {
  position: absolute;
  z-index: 17;
  display: none;
  width: 62px;
  height: 62px;
  pointer-events: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 500% 500%;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
  animation: redesign-v2-grid-25 4.6s linear infinite;
}

.redesign-manager.assigned {
  display: block;
}

.redesign-manager-elevator {
  left: 10.5%;
  top: 24.8%;
  background-image: url("/assets/redesign-v2-manager-warehouse-idle-25.webp?v=meta-v8");
  animation-delay: -0.8s;
}

.redesign-manager-elevator::after {
  content: "";
  position: absolute;
  left: -7px;
  right: 0;
  bottom: -1px;
  z-index: -1;
  height: 6px;
  border: 1px solid #182f41;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(180deg, #d5e8ef 0 22%, #5b788a 23% 52%, #263f51 53% 100%);
  box-shadow: -8px 5px 0 -4px #273f50, 0 3px 4px rgba(0, 0, 0, 0.45);
}

.redesign-manager-warehouse {
  right: 20%;
  top: 29.8%;
  background-image: url("/assets/redesign-v2-manager-elevator-idle-25.webp?v=meta-v8");
  animation-delay: -1.6s;
}

.redesign-v1 .sprite-manager-foreman {
  left: 36%;
  bottom: -4%;
  z-index: 8;
  width: 82px;
  height: 82px;
  background-image: url("/assets/redesign-v2-manager-shaft-idle-25.png?v=redesign-v2");
  background-position: 0 0;
  background-size: 500% 500%;
  animation: redesign-v2-grid-25 4.6s linear infinite;
}

@keyframes redesign-v2-grid-25 {
  0.000%, 3.999% { background-position: 0.000% 0.000%; }
  4.000%, 7.999% { background-position: 25.000% 0.000%; }
  8.000%, 11.999% { background-position: 50.000% 0.000%; }
  12.000%, 15.999% { background-position: 75.000% 0.000%; }
  16.000%, 19.999% { background-position: 100.000% 0.000%; }
  20.000%, 23.999% { background-position: 0.000% 25.000%; }
  24.000%, 27.999% { background-position: 25.000% 25.000%; }
  28.000%, 31.999% { background-position: 50.000% 25.000%; }
  32.000%, 35.999% { background-position: 75.000% 25.000%; }
  36.000%, 39.999% { background-position: 100.000% 25.000%; }
  40.000%, 43.999% { background-position: 0.000% 50.000%; }
  44.000%, 47.999% { background-position: 25.000% 50.000%; }
  48.000%, 51.999% { background-position: 50.000% 50.000%; }
  52.000%, 55.999% { background-position: 75.000% 50.000%; }
  56.000%, 59.999% { background-position: 100.000% 50.000%; }
  60.000%, 63.999% { background-position: 0.000% 75.000%; }
  64.000%, 67.999% { background-position: 25.000% 75.000%; }
  68.000%, 71.999% { background-position: 50.000% 75.000%; }
  72.000%, 75.999% { background-position: 75.000% 75.000%; }
  76.000%, 79.999% { background-position: 100.000% 75.000%; }
  80.000%, 83.999% { background-position: 0.000% 100.000%; }
  84.000%, 87.999% { background-position: 25.000% 100.000%; }
  88.000%, 91.999% { background-position: 50.000% 100.000%; }
  92.000%, 95.999% { background-position: 75.000% 100.000%; }
  96.000%, 99.999% { background-position: 100.000% 100.000%; }
}

@keyframes redesign-v1-grid-30 {
  0.000%, 3.332% { background-position: 0.000% 0.000%; }
  3.333%, 6.666% { background-position: 25.000% 0.000%; }
  6.667%, 9.999% { background-position: 50.000% 0.000%; }
  10.000%, 13.332% { background-position: 75.000% 0.000%; }
  13.333%, 16.666% { background-position: 100.000% 0.000%; }
  16.667%, 19.999% { background-position: 0.000% 20.000%; }
  20.000%, 23.332% { background-position: 25.000% 20.000%; }
  23.333%, 26.666% { background-position: 50.000% 20.000%; }
  26.667%, 29.999% { background-position: 75.000% 20.000%; }
  30.000%, 33.332% { background-position: 100.000% 20.000%; }
  33.333%, 36.666% { background-position: 0.000% 40.000%; }
  36.667%, 39.999% { background-position: 25.000% 40.000%; }
  40.000%, 43.332% { background-position: 50.000% 40.000%; }
  43.333%, 46.666% { background-position: 75.000% 40.000%; }
  46.667%, 49.999% { background-position: 100.000% 40.000%; }
  50.000%, 53.332% { background-position: 0.000% 60.000%; }
  53.333%, 56.666% { background-position: 25.000% 60.000%; }
  56.667%, 59.999% { background-position: 50.000% 60.000%; }
  60.000%, 63.332% { background-position: 75.000% 60.000%; }
  63.333%, 66.666% { background-position: 100.000% 60.000%; }
  66.667%, 69.999% { background-position: 0.000% 80.000%; }
  70.000%, 73.332% { background-position: 25.000% 80.000%; }
  73.333%, 76.666% { background-position: 50.000% 80.000%; }
  76.667%, 79.999% { background-position: 75.000% 80.000%; }
  80.000%, 83.332% { background-position: 100.000% 80.000%; }
  83.333%, 86.666% { background-position: 0.000% 100.000%; }
  86.667%, 89.999% { background-position: 25.000% 100.000%; }
  90.000%, 93.332% { background-position: 50.000% 100.000%; }
  93.333%, 96.666% { background-position: 75.000% 100.000%; }
  96.667%, 99.999% { background-position: 100.000% 100.000%; }
}

@keyframes redesign-v2-elevator-idle {
  0%, 19.999% { background-position: 0% 0%; }
  20%, 39.999% { background-position: 25% 0%; }
  40%, 59.999% { background-position: 50% 0%; }
  60%, 79.999% { background-position: 75% 0%; }
  80%, 99.999% { background-position: 100% 0%; }
}

@keyframes redesign-v2-elevator-ride-half {
  0%, 19.999% { background-position: 0% 50%; }
  20%, 39.999% { background-position: 25% 50%; }
  40%, 59.999% { background-position: 50% 50%; }
  60%, 79.999% { background-position: 75% 50%; }
  80%, 99.999% { background-position: 100% 50%; }
}

@keyframes redesign-v2-elevator-ride-full {
  0%, 19.999% { background-position: 0% 75%; }
  20%, 39.999% { background-position: 25% 75%; }
  40%, 59.999% { background-position: 50% 75%; }
  60%, 79.999% { background-position: 75% 75%; }
  80%, 99.999% { background-position: 100% 75%; }
}

@keyframes redesign-v2-elevator-load {
  0%, 9.999% { background-position: 0% 0%; }
  10%, 19.999% { background-position: 0% 25%; }
  20%, 29.999% { background-position: 25% 25%; }
  30%, 39.999% { background-position: 50% 25%; }
  40%, 49.999% { background-position: 75% 25%; }
  50%, 59.999% { background-position: 100% 25%; }
  60%, 69.999% { background-position: 0% 50%; }
  70%, 79.999% { background-position: 25% 50%; }
  80%, 89.999% { background-position: 50% 50%; }
  90%, 99.999% { background-position: 100% 50%; }
}

@keyframes redesign-v2-elevator-unload {
  0%, 19.999% { background-position: 0% 100%; }
  20%, 39.999% { background-position: 25% 100%; }
  40%, 59.999% { background-position: 50% 100%; }
  60%, 79.999% { background-position: 75% 100%; }
  80%, 99.999% { background-position: 100% 100%; }
}

@keyframes redesign-v1-elevator-load {
  0.000%, 9.999% { background-position: 0.000% 0.000%; }
  10.000%, 19.999% { background-position: 25.000% 0.000%; }
  20.000%, 29.999% { background-position: 50.000% 0.000%; }
  30.000%, 39.999% { background-position: 75.000% 0.000%; }
  40.000%, 49.999% { background-position: 100.000% 0.000%; }
  50.000%, 59.999% { background-position: 0.000% 100.000%; }
  60.000%, 69.999% { background-position: 25.000% 100.000%; }
  70.000%, 79.999% { background-position: 50.000% 100.000%; }
  80.000%, 89.999% { background-position: 75.000% 100.000%; }
  90.000%, 99.999% { background-position: 100.000% 100.000%; }
}

@keyframes redesign-v1-elevator-unload {
  0.000%, 9.999% { background-position: 100.000% 100.000%; }
  10.000%, 19.999% { background-position: 75.000% 100.000%; }
  20.000%, 29.999% { background-position: 50.000% 100.000%; }
  30.000%, 39.999% { background-position: 25.000% 100.000%; }
  40.000%, 49.999% { background-position: 0.000% 100.000%; }
  50.000%, 59.999% { background-position: 100.000% 0.000%; }
  60.000%, 69.999% { background-position: 75.000% 0.000%; }
  70.000%, 79.999% { background-position: 50.000% 0.000%; }
  80.000%, 89.999% { background-position: 25.000% 0.000%; }
  90.000%, 99.999% { background-position: 0.000% 0.000%; }
}

@keyframes redesign-v2-surface-travel {
  0%, 19.999% { transform: translate3d(0, 0, 0); }
  20%, 39.999% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(0, 0, 0); }
  59.999% { transform: translate3d(clamp(184px, 52vw, 220px), 0, 0); }
  60%, 79.999% { transform: translate3d(clamp(184px, 52vw, 220px), 0, 0); }
  80% { transform: translate3d(clamp(184px, 52vw, 220px), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes redesign-v1-manager-idle {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-3px) rotate(0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .redesign-v1 .sprite-miner.digging,
  .redesign-v1 .redesign-underground-hauler,
  .redesign-v1 .redesign-surface-hauler,
  .redesign-v1 .elevator-redesign-visual,
  .redesign-v1 .redesign-manager,
  .redesign-v1 .sprite-manager-foreman {
    animation: none !important;
  }
}


/* Meta V3: full-height destinations with true 25-frame hero atlases. */
.phone-shell.meta-active .quest-strip,
.phone-shell.meta-active .tutorial-coach,
.phone-shell.meta-active .action-tray {
  visibility: hidden;
  pointer-events: none;
}

.phone-shell.meta-active .motion-world *,
.phone-shell.meta-active .surface-world *,
.phone-shell.meta-active .elevator-world * {
  animation-play-state: paused !important;
}

.phone-shell.meta-active .motion-layer {
  pointer-events: none;
  filter: brightness(0.62) saturate(0.72);
}

.phone-shell.meta-active .drawer.open {
  top: max(94px, calc(env(safe-area-inset-top) + 94px));
  bottom: calc(52px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: rgba(225, 250, 255, 0.86);
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 7px 0 rgba(3, 48, 77, 0.36), 0 18px 38px rgba(0, 20, 38, 0.46);
  contain: layout paint;
}

.phone-shell.meta-active .drawer-head {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 11px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.34);
}

.phone-shell.meta-active .drawer-head strong {
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: 0.01em;
}

.phone-shell.meta-active .drawer-body {
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 228, 77, 0.88) rgba(6, 66, 99, 0.18);
  -webkit-overflow-scrolling: touch;
}

.phone-shell[data-active-tab="world"] .drawer-head {
  background: linear-gradient(180deg, #28b8d7, #12699b 58%, #124d73);
}

.phone-shell[data-active-tab="world"] .drawer-body {
  background:
    radial-gradient(circle at 15% 8%, rgba(64, 232, 151, 0.34), transparent 155px),
    radial-gradient(circle at 88% 18%, rgba(75, 221, 255, 0.34), transparent 180px),
    linear-gradient(180deg, #d9f9f3 0%, #a7dfdf 48%, #6ba5b6 100%);
}

.phone-shell[data-active-tab="tasks"] .drawer-head {
  background: linear-gradient(180deg, #37bce7, #176fa7 58%, #72551c);
}

.phone-shell[data-active-tab="tasks"] .drawer-body {
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 226, 74, 0.5), transparent 158px),
    radial-gradient(circle at 88% 16%, rgba(99, 224, 255, 0.38), transparent 174px),
    linear-gradient(180deg, #fff4c8 0%, #b9e9ea 52%, #6aabc1 100%);
}

.phone-shell[data-active-tab="season"] .drawer-head {
  background: linear-gradient(180deg, #4bbcf1, #2454b6 58%, #493a9d);
}

.phone-shell[data-active-tab="season"] .drawer-body {
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 223, 73, 0.42), transparent 156px),
    radial-gradient(circle at 88% 14%, rgba(131, 93, 255, 0.38), transparent 180px),
    linear-gradient(180deg, #e9f8ff 0%, #b9d9f6 45%, #7285d0 100%);
}

.phone-shell[data-active-tab="prestige"] .drawer-head {
  background: linear-gradient(180deg, #36c8e8, #2250a4 54%, #51297f);
}

.phone-shell[data-active-tab="prestige"] .drawer-body {
  grid-auto-rows: max-content;
  background:
    radial-gradient(circle at 18% 10%, rgba(80, 224, 255, 0.46), transparent 158px),
    radial-gradient(circle at 86% 15%, rgba(225, 78, 255, 0.32), transparent 180px),
    linear-gradient(180deg, #dffaff 0%, #a3cfec 43%, #675ea7 100%);
}

.meta-atlas {
  background-position: 0 0;
  background-repeat: no-repeat !important;
  background-size: 500% 500% !important;
  image-rendering: auto;
  will-change: background-position;
  animation: meta-v3-grid-25 3.4s linear infinite !important;
}

.meta-atlas-world {
  background-image: url("/assets/meta-v3-world-map-atlas-25.webp?v=meta-v3") !important;
  animation-duration: 4.2s !important;
}

.meta-atlas-missions {
  background-image: url("/assets/meta-v3-mission-board-atlas-25.webp?v=meta-v3") !important;
  animation-duration: 3.8s !important;
}

.meta-atlas-season {
  background-image: url("/assets/meta-v3-season-podium-atlas-25.webp?v=meta-v3") !important;
  animation-duration: 4s !important;
}

.meta-atlas-prestige {
  background-image: url("/assets/meta-v3-prestige-reactor-atlas-25.webp?v=meta-v3") !important;
  animation-duration: 3.2s !important;
}

@keyframes meta-v3-grid-25 {
  0.000%, 3.999% { background-position: 0% 0%; }
  4.000%, 7.999% { background-position: 25% 0%; }
  8.000%, 11.999% { background-position: 50% 0%; }
  12.000%, 15.999% { background-position: 75% 0%; }
  16.000%, 19.999% { background-position: 100% 0%; }
  20.000%, 23.999% { background-position: 0% 25%; }
  24.000%, 27.999% { background-position: 25% 25%; }
  28.000%, 31.999% { background-position: 50% 25%; }
  32.000%, 35.999% { background-position: 75% 25%; }
  36.000%, 39.999% { background-position: 100% 25%; }
  40.000%, 43.999% { background-position: 0% 50%; }
  44.000%, 47.999% { background-position: 25% 50%; }
  48.000%, 51.999% { background-position: 50% 50%; }
  52.000%, 55.999% { background-position: 75% 50%; }
  56.000%, 59.999% { background-position: 100% 50%; }
  60.000%, 63.999% { background-position: 0% 75%; }
  64.000%, 67.999% { background-position: 25% 75%; }
  68.000%, 71.999% { background-position: 50% 75%; }
  72.000%, 75.999% { background-position: 75% 75%; }
  76.000%, 79.999% { background-position: 100% 75%; }
  80.000%, 83.999% { background-position: 0% 100%; }
  84.000%, 87.999% { background-position: 25% 100%; }
  88.000%, 91.999% { background-position: 50% 100%; }
  92.000%, 95.999% { background-position: 75% 100%; }
  96.000%, 99.999% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .meta-atlas {
    animation: none !important;
    will-change: auto;
  }
}

/* Meta V4: animated operations hubs for Crew and Shop. */
.phone-shell[data-active-tab="crew"] .drawer-head {
  background: linear-gradient(180deg, #2acbe6, #116ca3 58%, #173f6d);
}

.phone-shell[data-active-tab="crew"] .drawer-body {
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 224, 72, 0.48), transparent 158px),
    radial-gradient(circle at 88% 15%, rgba(70, 226, 255, 0.42), transparent 180px),
    linear-gradient(180deg, #e5fbff 0%, #addfec 48%, #568fb4 100%);
}

.phone-shell[data-active-tab="shop"] .drawer-head {
  background: linear-gradient(180deg, #41c8e8, #1979ae 54%, #76501a);
}

.phone-shell[data-active-tab="shop"] .drawer-body {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 225, 77, 0.56), transparent 164px),
    radial-gradient(circle at 87% 16%, rgba(84, 223, 255, 0.42), transparent 184px),
    radial-gradient(circle at 72% 42%, rgba(185, 102, 255, 0.22), transparent 190px),
    linear-gradient(180deg, #fff3b8 0%, #c8edf2 47%, #5b98b6 100%);
}

.meta-atlas-crew {
  background-image: url("/assets/meta-v4-crew-command-atlas-25.webp?v=meta-v4") !important;
  animation-duration: 3.6s !important;
}

.meta-atlas-shop {
  background-image: url("/assets/meta-v4-shop-checkout-atlas-25.webp?v=meta-v4") !important;
  animation-duration: 3.3s !important;
}

.manager-ops-panel,
.shop-checkout-panel {
  min-height: 306px;
  contain: layout paint;
}

.manager-ops-scene,
.shop-checkout-scene {
  position: absolute !important;
  display: block;
  pointer-events: none;
  transform: translateZ(0) scale(1);
  transform-origin: 50% 58%;
  transition: filter 220ms ease, transform 220ms ease;
}

.manager-ops-scene {
  right: -7px;
  top: -3px;
  width: 176px;
  height: 176px;
  filter: drop-shadow(0 9px 0 rgba(8, 65, 95, 0.18)) drop-shadow(0 0 20px rgba(78, 221, 255, 0.54));
}

.shop-checkout-scene {
  left: -10px;
  top: -2px;
  width: 178px;
  height: 178px;
  filter: drop-shadow(0 8px 0 rgba(91, 50, 18, 0.18)) drop-shadow(0 0 22px rgba(255, 226, 74, 0.6));
}

.manager-ops-copy {
  max-width: 50%;
  min-height: 116px;
  padding-top: 8px;
}

.manager-ops-route {
  margin-top: 3px;
}

.shop-checkout-copy {
  max-width: none;
  min-height: 120px;
  margin-left: 145px;
  padding-top: 8px;
}

.shop-checkout-stats {
  margin-top: 2px;
}

.drawer.meta-reacting[data-reaction="crew"] .manager-ops-panel,
.drawer.meta-reacting[data-reaction="shop"] .shop-checkout-panel {
  animation: meta-v4-panel-react 820ms cubic-bezier(0.2, 1.18, 0.3, 1) both;
}

.drawer.meta-reacting[data-reaction="crew"] .manager-ops-scene,
.drawer.meta-reacting[data-reaction="shop"] .shop-checkout-scene {
  animation-duration: 1.15s !important;
  filter: drop-shadow(0 10px 0 rgba(9, 61, 91, 0.18)) drop-shadow(0 0 34px rgba(255, 236, 86, 0.92)) brightness(1.18) saturate(1.14);
  transform: translateZ(0) scale(1.055);
}

@keyframes meta-v4-panel-react {
  0% { box-shadow: 0 8px 0 rgba(11, 79, 111, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.64); }
  42% { box-shadow: 0 8px 0 rgba(11, 79, 111, 0.3), 0 0 28px rgba(255, 231, 79, 0.9), inset 0 0 26px rgba(82, 226, 255, 0.64); }
  100% { box-shadow: 0 8px 0 rgba(11, 79, 111, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.64); }
}

@media (max-width: 380px) {
  .manager-ops-scene {
    right: -12px;
    width: 162px;
    height: 162px;
  }

  .shop-checkout-scene {
    left: -15px;
    width: 164px;
    height: 164px;
  }

  .shop-checkout-copy {
    margin-left: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manager-ops-scene,
  .shop-checkout-scene,
  .drawer.meta-reacting[data-reaction="crew"] .manager-ops-panel,
  .drawer.meta-reacting[data-reaction="shop"] .shop-checkout-panel {
    animation: none !important;
    transform: none;
    transition: none;
  }
}


/* Meta V5: animated online profile and stable touch target. */
.title-icon.profile {
  animation: none;
  touch-action: manipulation;
  transform: none;
}

.title-icon.profile::before {
  animation: meta-v5-profile-button-glow 1.9s ease-in-out infinite;
}

.phone-shell[data-active-tab="profile"] .drawer-head {
  background: linear-gradient(180deg, #35d2ec, #126fa8 56%, #193f72);
}

.phone-shell[data-active-tab="profile"] .drawer-body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 229, 78, 0.5), transparent 160px),
    radial-gradient(circle at 88% 14%, rgba(67, 229, 255, 0.5), transparent 184px),
    radial-gradient(circle at 54% 52%, rgba(91, 124, 255, 0.2), transparent 210px),
    linear-gradient(180deg, #e8fcff 0%, #b4e5f2 48%, #5d91ba 100%);
}

.meta-atlas-profile {
  background-image: url("/assets/meta-v5-profile-sync-atlas-25.webp?v=meta-v5") !important;
  animation-duration: 3.7s !important;
}

.profile-hero-panel {
  grid-template-columns: 1fr;
  contain: layout paint;
  min-height: 286px;
  background:
    radial-gradient(circle at 18% 17%, rgba(58, 222, 255, 0.64), transparent 118px),
    radial-gradient(circle at 86% 22%, rgba(255, 226, 74, 0.58), transparent 132px),
    linear-gradient(180deg, #effeff 0%, #b7eff7 53%, #45a4cf 100%);
}

.profile-sync-scene {
  position: absolute !important;
  left: -12px;
  top: -4px;
  display: block;
  width: 160px;
  height: 160px;
  pointer-events: none;
  filter: drop-shadow(0 9px 0 rgba(8, 65, 95, 0.18)) drop-shadow(0 0 22px rgba(71, 224, 255, 0.64));
  transform: translateZ(0) scale(1);
  transform-origin: 50% 58%;
  transition: filter 220ms ease, transform 220ms ease;
}

.profile-copy {
  grid-column: 1 / -1;
  align-self: start;
  min-height: 116px;
  margin-left: 134px;
  padding: 12px 3px 0 0;
}

.profile-copy p {
  max-height: 2.2em;
  overflow: hidden;
}

.drawer.meta-reacting[data-reaction="profile"] .profile-hero-panel {
  animation: meta-v5-profile-panel-react 820ms cubic-bezier(0.2, 1.18, 0.3, 1) both;
}

.drawer.meta-reacting[data-reaction="profile"] .profile-sync-scene {
  animation-duration: 1.12s !important;
  filter: drop-shadow(0 10px 0 rgba(9, 61, 91, 0.18)) drop-shadow(0 0 36px rgba(255, 237, 84, 0.94)) brightness(1.2) saturate(1.15);
  transform: translateZ(0) scale(1.06);
}

@keyframes meta-v5-profile-button-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(84, 223, 255, 0.42); }
  50% { box-shadow: 0 0 14px rgba(84, 223, 255, 0.9), inset 0 0 8px rgba(255, 236, 96, 0.48); }
}

@keyframes meta-v5-profile-panel-react {
  0% { box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.68); }
  42% { box-shadow: 0 8px 0 rgba(14, 80, 112, 0.3), 0 0 30px rgba(255, 233, 79, 0.92), inset 0 0 28px rgba(76, 226, 255, 0.68); }
  100% { box-shadow: 0 8px 0 rgba(14, 80, 112, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.68); }
}

@media (max-width: 380px) {
  .profile-sync-scene {
    left: -16px;
    width: 152px;
    height: 152px;
  }

  .profile-copy {
    min-height: 108px;
    margin-left: 124px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-icon.profile::before,
  .profile-sync-scene,
  .drawer.meta-reacting[data-reaction="profile"] .profile-hero-panel {
    animation: none !important;
    transform: none;
    transition: none;
  }
}


.profile-reveal-art.meta-atlas-profile {
  width: 176px;
  height: 176px;
  filter: drop-shadow(0 9px 0 rgba(10, 63, 91, 0.2)) drop-shadow(0 0 32px rgba(255, 232, 80, 0.78));
}


/* Meta V6: animated first-shift onboarding. */
.meta-atlas-guide {
  background-image: url("/assets/meta-v6-first-shift-guide-atlas-25.webp?v=meta-v6") !important;
  animation-duration: 3.35s !important;
}

.tutorial-coach {
  left: 48px;
  right: 42px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 3px;
  min-height: 58px;
  padding: 3px 9px 3px 2px;
  overflow: visible;
  border: 3px solid rgba(255, 249, 195, 0.94);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 18%, rgba(78, 222, 255, 0.62), transparent 66px),
    linear-gradient(180deg, rgba(255, 246, 179, 0.98), rgba(239, 178, 70, 0.97));
  box-shadow: 0 5px 0 rgba(111, 66, 18, 0.42), 0 0 22px rgba(255, 229, 83, 0.4);
}

.tutorial-coach.show {
  animation: meta-v6-coach-enter 320ms cubic-bezier(0.2, 1.16, 0.3, 1) both;
}

.tutorial-coach .tutorial-guide {
  grid-row: auto;
  display: block;
  width: 64px;
  height: 64px;
  margin: -9px 0 -7px -10px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 0 rgba(90, 53, 18, 0.2)) drop-shadow(0 0 10px rgba(71, 220, 255, 0.52));
}

.tutorial-coach .tutorial-guide::before {
  display: none;
}

.tutorial-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  line-height: 1;
}

.tutorial-copy em {
  display: block;
  margin-bottom: 1px;
  color: #08709d;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tutorial-copy strong {
  color: #4d2c09;
  font-size: 0.76rem;
}

.tutorial-copy small {
  color: #69431b;
  font-size: 0.58rem;
}

.tutorial-target-ring {
  position: absolute;
  z-index: 72;
  display: block;
  border: 3px solid rgba(255, 244, 82, 0.98);
  border-radius: 13px;
  box-shadow:
    0 0 0 3px rgba(49, 211, 255, 0.58),
    0 0 18px 6px rgba(255, 225, 67, 0.72),
    inset 0 0 12px rgba(73, 222, 255, 0.52);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transform-origin: 50% 50%;
}

.tutorial-target-ring.show {
  opacity: 1;
  animation: meta-v6-target-pulse 900ms ease-in-out infinite;
}

.first-shift-reveal {
  position: absolute;
  inset: 0;
  z-index: 91;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(70, 225, 255, 0.32), transparent 188px),
    radial-gradient(circle at 50% 54%, rgba(255, 222, 68, 0.26), transparent 242px),
    rgba(4, 24, 40, 0.74);
  animation: reward-reveal-fade 180ms ease-out both;
}

.first-shift-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(382px, 94vw);
  overflow: hidden;
  padding: 13px 13px 15px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  color: #133c52;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 10%, rgba(91, 231, 255, 0.7), transparent 110px),
    radial-gradient(circle at 82% 28%, rgba(255, 226, 75, 0.52), transparent 108px),
    linear-gradient(180deg, #f5feff, #a9ebf7 58%, #3e9ac9);
  box-shadow: 0 11px 0 rgba(10, 66, 94, 0.54), 0 26px 48px rgba(0, 0, 0, 0.44);
  text-align: center;
  animation: prestige-card-pop 360ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.first-shift-card::before {
  content: "";
  position: absolute;
  inset: -88px;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent, rgba(73, 224, 255, 0.58), transparent, rgba(255, 226, 72, 0.62), transparent);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: season-aura-spin 4.4s linear infinite;
}

.first-shift-card > * {
  position: relative;
  z-index: 2;
}

.first-shift-guide {
  display: block;
  width: 168px;
  height: 168px;
  margin: -7px 0 -8px;
  filter: drop-shadow(0 9px 0 rgba(10, 65, 91, 0.2)) drop-shadow(0 0 26px rgba(255, 230, 75, 0.72));
}

.first-shift-card > small {
  color: #08709c;
  font-size: 0.7rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.first-shift-card > strong {
  color: #15374d;
  font-size: 1.28rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.66);
}

.first-shift-card > p {
  max-width: 310px;
  margin: 0;
  color: #285c70;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.18;
}

.first-shift-route {
  display: grid;
  grid-template-columns: 1fr 13px 1fr 13px 1fr 13px 1fr;
  gap: 3px;
  align-items: center;
  width: 100%;
  padding: 7px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.46);
}

.first-shift-route span {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.first-shift-route i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #65df87, #1b9b58);
  box-shadow: 0 3px 0 rgba(14, 91, 48, 0.38), 0 0 10px rgba(72, 223, 129, 0.58);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 1000;
}

.first-shift-route b {
  overflow: hidden;
  max-width: 100%;
  color: #17455a;
  font-size: 0.5rem;
  font-weight: 1000;
  text-overflow: ellipsis;
}

.first-shift-route em {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #44d8ff, #ffe34e, #3ddd82);
  box-shadow: 0 0 8px rgba(77, 220, 255, 0.62);
  animation: prestige-progress-flow 1.1s linear infinite;
}

.first-shift-card > button {
  min-width: 156px;
  min-height: 39px;
  border-radius: 9px;
  color: #5b3407;
  background: linear-gradient(180deg, #fff26d, #ff9f28);
  box-shadow: 0 4px 0 rgba(126, 68, 8, 0.46), 0 0 16px rgba(255, 222, 70, 0.52);
  font-size: 0.8rem;
  font-weight: 1000;
}

.first-shift-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.first-shift-sparks i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff, #ffe34f 45%, #45dcff);
  box-shadow: 0 0 10px rgba(255, 226, 74, 0.82);
  opacity: 0;
  transform: rotate(calc(var(--i) * 20deg)) translateY(-28px);
  animation: season-spark-fly 1.15s ease-out forwards;
  animation-delay: calc(var(--i) * 17ms);
}

@keyframes meta-v6-coach-enter {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes meta-v6-target-pulse {
  0%, 100% { filter: brightness(1); transform: scale(0.94); }
  50% { filter: brightness(1.18); transform: scale(1.045); }
}

@media (max-width: 380px) {
  .tutorial-coach {
    left: 42px;
    right: 36px;
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 54px;
  }

  .tutorial-coach .tutorial-guide {
    width: 58px;
    height: 58px;
  }

  .tutorial-copy strong {
    font-size: 0.7rem;
  }

  .tutorial-copy small {
    font-size: 0.54rem;
  }

  .first-shift-guide {
    width: 152px;
    height: 152px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-coach.show,
  .tutorial-target-ring.show,
  .first-shift-guide,
  .first-shift-card::before,
  .first-shift-sparks i {
    animation: none !important;
    transform: none;
  }
}


/* Meta V7: first manager contract and automation runway. */
.meta-atlas-manager-contract {
  background-image: url("/assets/meta-v7-manager-contract-atlas-25.webp?v=meta-v7") !important;
  animation-duration: 4.15s !important;
}

.tutorial-coach.automation {
  min-height: 70px;
  border-color: rgba(197, 250, 255, 0.96);
  background:
    radial-gradient(circle at 12% 18%, rgba(78, 226, 255, 0.78), transparent 72px),
    linear-gradient(180deg, rgba(229, 253, 255, 0.98), rgba(88, 190, 221, 0.97));
  box-shadow: 0 5px 0 rgba(11, 83, 111, 0.48), 0 0 24px rgba(71, 222, 255, 0.5);
}

.tutorial-coach.automation .tutorial-guide {
  width: 70px;
  height: 70px;
  margin: -7px 0 -7px -12px;
  filter: drop-shadow(0 5px 0 rgba(10, 75, 98, 0.22)) drop-shadow(0 0 13px rgba(255, 226, 74, 0.62));
}

.tutorial-coach.automation .tutorial-copy strong {
  color: #123f58;
}

.tutorial-coach.automation .tutorial-copy small {
  color: #19546d;
}

.tutorial-progress {
  display: grid;
  grid-template-columns: minmax(54px, 1fr) auto;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
}

.tutorial-progress > i {
  display: block;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(16, 92, 118, 0.48);
  border-radius: 999px;
  background: rgba(12, 76, 104, 0.26);
  box-shadow: inset 0 1px 2px rgba(8, 49, 68, 0.34);
}

.tutorial-progress > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2bd7ff, #fff05b 72%, #65e78b);
  box-shadow: 0 0 9px rgba(255, 232, 78, 0.74);
  transition: width 260ms ease-out;
}

.tutorial-copy .tutorial-progress > em {
  margin: 0;
  color: #0e5270;
  font-size: 0.47rem;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
}

.manager-reveal.first-contract .manager-reveal-card {
  gap: 6px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 239, 100, 0.76), transparent 120px),
    radial-gradient(circle at 16% 52%, rgba(64, 226, 255, 0.46), transparent 144px),
    linear-gradient(180deg, #f3feff, #aeeaf3 58%, #3395c1);
}

.manager-reveal.first-contract .manager-reveal-stage {
  display: block;
  width: 100%;
  min-height: 190px;
}

.manager-contract-scene {
  position: absolute !important;
  left: 50%;
  top: -8px;
  display: block;
  width: 205px;
  height: 205px;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 0 rgba(11, 73, 96, 0.2)) drop-shadow(0 0 28px rgba(255, 227, 72, 0.74));
}

.manager-contract-stamp {
  position: absolute;
  right: 21px;
  bottom: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 70px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(180deg, #67df82, #15944e);
  box-shadow: 0 5px 0 rgba(11, 91, 49, 0.42), 0 0 18px rgba(79, 229, 126, 0.72);
  transform: rotate(-7deg);
  animation: meta-v7-contract-stamp 4.15s ease-in-out infinite;
}

.manager-contract-stamp i {
  position: absolute;
  left: 6px;
  top: 5px;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 1000;
}

.manager-contract-stamp b {
  margin-left: 18px;
  font-size: 0.72rem;
  font-weight: 1000;
}

.manager-automation-route {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr;
  gap: 3px;
  align-items: center;
  width: min(294px, 100%);
  padding: 6px 8px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
}

.manager-automation-route span {
  display: grid;
  grid-template-columns: 24px auto;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.manager-automation-route i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #37cfff, #0879bc);
  box-shadow: 0 3px 0 rgba(6, 74, 112, 0.42);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 1000;
}

.manager-automation-route b {
  color: #16465c;
  font-size: 0.55rem;
  font-weight: 1000;
}

.manager-automation-route em {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2bd7ff, #fff05b, #5de288);
  box-shadow: 0 0 8px rgba(67, 218, 255, 0.62);
  animation: prestige-progress-flow 1.1s linear infinite;
}

@keyframes meta-v7-contract-stamp {
  0%, 54%, 100% { opacity: 0.72; transform: rotate(-7deg) scale(0.9); }
  66%, 88% { opacity: 1; transform: rotate(-4deg) scale(1.06); }
}

@media (max-width: 380px) {
  .tutorial-coach.automation {
    min-height: 66px;
  }

  .tutorial-coach.automation .tutorial-guide {
    width: 64px;
    height: 64px;
  }

  .tutorial-copy .tutorial-progress > em {
    font-size: 0.43rem;
  }

  .manager-reveal.first-contract .manager-reveal-stage {
    min-height: 174px;
  }

  .manager-contract-scene {
    width: 188px;
    height: 188px;
  }

  .manager-contract-stamp {
    right: 13px;
    bottom: 9px;
    transform: rotate(-7deg) scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .manager-contract-scene,
  .manager-contract-stamp,
  .manager-automation-route em,
  .tutorial-progress > i > b {
    animation: none !important;
    transition: none !important;
  }
}


/* Meta V8: complete shaft -> elevator -> warehouse automation chain. */
.meta-atlas-manager-elevator {
  background-image: url("/assets/redesign-v2-manager-warehouse-idle-25.webp?v=meta-v8") !important;
  animation-duration: 4.6s !important;
}

.meta-atlas-manager-warehouse {
  background-image: url("/assets/redesign-v2-manager-elevator-idle-25.webp?v=meta-v8") !important;
  animation-duration: 4.6s !important;
}

.milestone-panel.automation-panel {
  border-color: rgba(186, 255, 226, 0.94);
  background:
    radial-gradient(circle at 12% 24%, rgba(66, 233, 255, 0.62), transparent 62px),
    radial-gradient(circle at 84% 48%, rgba(89, 240, 137, 0.5), transparent 78px),
    linear-gradient(180deg, rgba(230, 255, 248, 0.98), rgba(91, 202, 203, 0.94));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72), 0 4px 0 rgba(10, 95, 103, 0.42), 0 0 18px rgba(55, 224, 195, 0.34);
}

.milestone-panel.automation-panel::before {
  background: conic-gradient(from 0deg, transparent, rgba(45, 218, 255, 0.48), transparent, rgba(77, 244, 141, 0.52), transparent);
}

.automation-hq-art {
  background: url("/assets/ui-crew-hq.png?v=meta-v8") center / contain no-repeat;
  filter: drop-shadow(0 5px 0 rgba(8, 76, 92, 0.24)) drop-shadow(0 0 13px rgba(86, 242, 204, 0.72));
}

.automation-copy small {
  color: #08758a;
}

.automation-copy strong {
  color: #10495a;
}

.automation-copy p {
  color: #16664e;
}

.automation-cards {
  gap: 3px;
}

.milestone-card.automation-card {
  appearance: none;
  width: 100%;
  margin: 0;
  color: #17445a;
  font-family: inherit;
  cursor: default;
  opacity: 1;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.milestone-card.automation-card.ready {
  cursor: pointer;
  border-color: rgba(255, 240, 93, 0.98);
  background: linear-gradient(180deg, rgba(255, 252, 184, 0.96), rgba(87, 221, 190, 0.82));
  box-shadow: inset 0 -2px 0 rgba(9, 86, 89, 0.16), 0 0 12px rgba(255, 232, 67, 0.72);
  animation: meta-v8-auto-ready 1.05s ease-in-out infinite;
}

.milestone-card.automation-card.ready:active {
  transform: translateY(2px) scale(0.97);
}

.milestone-card.automation-card.assigned {
  border-color: rgba(112, 255, 164, 0.98);
  background: linear-gradient(180deg, rgba(227, 255, 225, 0.98), rgba(54, 196, 131, 0.75));
  box-shadow: inset 0 -2px 0 rgba(7, 92, 62, 0.18), 0 0 10px rgba(68, 237, 139, 0.54);
}

.milestone-card.automation-card.locked {
  filter: saturate(0.68);
}

.automation-card .automation-avatar {
  width: 30px;
  height: 27px;
  background-position: 0 0;
  background-size: 500% 500%;
  background-repeat: no-repeat;
  animation: redesign-v2-grid-25 4.6s linear infinite;
}

.automation-card .automation-avatar.target-shaft {
  background-image: url("/assets/redesign-v2-manager-shaft-idle-25.png?v=meta-v8");
}

.automation-card .automation-avatar.target-elevator {
  background-image: url("/assets/redesign-v2-manager-warehouse-idle-25.webp?v=meta-v8");
  animation-delay: -1.1s;
}

.automation-card .automation-avatar.target-warehouse {
  background-image: url("/assets/redesign-v2-manager-elevator-idle-25.webp?v=meta-v8");
  animation-delay: -2.2s;
}

.automation-card.assigned b,
.automation-card.assigned em {
  color: #0b6443;
}

.automation-card.ready em {
  color: #76590a;
}

.automation-panel.auto-3 {
  border-color: #fff36e;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.76), 0 4px 0 rgba(10, 95, 103, 0.42), 0 0 23px rgba(255, 233, 66, 0.64);
}

.manager-reveal.automation-contract.target-elevator .manager-reveal-card {
  background:
    radial-gradient(circle at 50% 12%, rgba(100, 239, 255, 0.78), transparent 126px),
    radial-gradient(circle at 14% 54%, rgba(255, 224, 78, 0.5), transparent 140px),
    linear-gradient(180deg, #f3feff, #a9e9f5 58%, #258bb8);
}

.manager-reveal.automation-contract.target-warehouse .manager-reveal-card {
  background:
    radial-gradient(circle at 50% 12%, rgba(113, 255, 153, 0.76), transparent 126px),
    radial-gradient(circle at 16% 54%, rgba(255, 221, 73, 0.5), transparent 140px),
    linear-gradient(180deg, #f5fff1, #a8ecd0 58%, #2a9f7b);
}

@keyframes meta-v8-auto-ready {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 -2px 0 rgba(9, 86, 89, 0.16), 0 0 10px rgba(255, 232, 67, 0.58); }
  50% { filter: brightness(1.08); box-shadow: inset 0 -2px 0 rgba(9, 86, 89, 0.16), 0 0 16px rgba(255, 232, 67, 0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-card.automation-card.ready {
    animation: none !important;
  }
}


/* Meta V12: unobstructed mine camera while the player scrolls through depth. */
.quest-strip,
.tutorial-coach,
.action-tray {
  will-change: opacity, transform;
}

.quest-strip,
.action-tray {
  transition: opacity 170ms ease, transform 220ms cubic-bezier(0.2, 0.84, 0.26, 1);
}

.phone-shell.camera-scrolling .quest-strip,
.phone-shell.camera-scrolling .tutorial-coach {
  opacity: 0 !important;
  pointer-events: none;
  transform: translate3d(0, -18px, 0) scale(0.96) !important;
}

.phone-shell.camera-scrolling .action-tray {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(100% + 18px), 0);
}

.camera-depth-hud {
  position: absolute;
  top: max(100px, calc(env(safe-area-inset-top) + 100px));
  left: 50%;
  z-index: 48;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto 5px;
  column-gap: 6px;
  row-gap: 4px;
  align-items: center;
  width: 166px;
  min-height: 47px;
  padding: 5px 7px 6px;
  overflow: hidden;
  border: 2px solid rgba(225, 249, 255, 0.94);
  border-radius: 11px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(83, 225, 255, 0.52), transparent 52px),
    linear-gradient(180deg, rgba(22, 109, 151, 0.96), rgba(7, 52, 78, 0.97));
  box-shadow: 0 4px 0 rgba(2, 31, 49, 0.5), 0 8px 20px rgba(0, 18, 31, 0.28), 0 0 15px rgba(66, 215, 255, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -9px, 0) scale(0.9);
  transition: opacity 130ms ease, transform 190ms cubic-bezier(0.2, 1.24, 0.34, 1);
  visibility: hidden;
  text-shadow: 0 2px 0 rgba(0, 39, 65, 0.54);
}

.phone-shell.camera-scrolling .camera-depth-hud {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  visibility: visible;
}

.camera-depth-icon {
  position: relative;
  grid-row: 1 / span 2;
  width: 29px;
  height: 31px;
  border: 2px solid rgba(209, 246, 255, 0.8);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 23%, #fff279 0 2px, transparent 3px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(4, 46, 70, 0.86) 5px 8px),
    linear-gradient(180deg, #49c9ed, #1276a6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), 0 3px 0 rgba(0, 36, 56, 0.38);
}

.camera-depth-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 4px;
  width: 9px;
  height: 11px;
  background: linear-gradient(180deg, #fff370, #ffb329);
  clip-path: polygon(30% 0, 70% 0, 70% 48%, 100% 48%, 50% 100%, 0 48%, 30% 48%);
  filter: drop-shadow(0 1px 0 rgba(91, 50, 5, 0.55));
}

.camera-depth-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  line-height: 1;
}

.camera-depth-copy small {
  color: #a9efff;
  font-size: 0.47rem;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.camera-depth-copy strong {
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 1000;
  white-space: nowrap;
}

.camera-depth-hud > em {
  color: #fff27b;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
}

.camera-depth-hud > i {
  grid-column: 2 / span 2;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(1, 27, 44, 0.58);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42);
}

.camera-depth-hud > i > b {
  display: block;
  width: var(--camera-depth, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #50ddff, #fff166 62%, #ff9a35);
  box-shadow: 0 0 8px rgba(255, 226, 73, 0.72);
}

@media (max-width: 380px) {
  .camera-depth-hud {
    top: max(96px, calc(env(safe-area-inset-top) + 96px));
    width: 156px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quest-strip,
  .tutorial-coach,
  .action-tray,
  .camera-depth-hud {
    transition: none !important;
  }
}


/* Meta V13: camera settles on the nearest real shaft without snapping the scroll. */
.motion-floor.selected.camera-focus-settled::before {
  animation: meta-v13-focus-lock 760ms cubic-bezier(0.18, 0.86, 0.25, 1) both;
}

.motion-floor.selected.camera-focus-settled .level-pop {
  animation: meta-v13-level-lock 760ms cubic-bezier(0.18, 0.86, 0.25, 1) both;
}

.phone-shell.camera-focus-confirmed .selected-card {
  animation: meta-v13-panel-sync 720ms cubic-bezier(0.18, 0.86, 0.25, 1) both;
}

@keyframes meta-v13-focus-lock {
  0% {
    border-color: rgba(80, 225, 255, 0);
    box-shadow: 0 0 0 rgba(80, 225, 255, 0);
    transform: scale(0.965);
  }
  38% {
    border-color: #fff782;
    box-shadow: 0 0 0 4px rgba(74, 221, 255, 0.62), 0 0 30px 9px rgba(255, 226, 66, 0.78);
    transform: scale(1.018);
  }
  100% {
    border-color: rgba(255, 245, 89, 0.92);
    box-shadow: 0 0 22px rgba(255, 224, 63, 0.58);
    transform: scale(1);
  }
}

@keyframes meta-v13-level-lock {
  0% { filter: brightness(0.9); transform: scale(0.9); }
  42% { filter: brightness(1.28) drop-shadow(0 0 10px rgba(255, 236, 84, 0.86)); transform: scale(1.12); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes meta-v13-panel-sync {
  0% { filter: brightness(0.94); transform: translate3d(0, 7px, 0) scale(0.985); }
  45% { filter: brightness(1.14) drop-shadow(0 0 10px rgba(73, 219, 255, 0.62)); transform: translate3d(0, 0, 0) scale(1.012); }
  100% { filter: brightness(1); transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-floor.selected.camera-focus-settled::before,
  .motion-floor.selected.camera-focus-settled .level-pop,
  .phone-shell.camera-focus-confirmed .selected-card {
    animation: none !important;
  }
}


/* Meta V14: one actionable lock gate, with an explicit depth prerequisite for the rest. */
.motion-floor.next-unlock .unlock-label {
  border-color: rgba(255, 244, 123, 0.98);
  box-shadow: 0 4px 0 rgba(3, 31, 44, 0.46), 0 0 22px rgba(255, 211, 55, 0.68), 0 0 0 2px rgba(68, 219, 255, 0.28);
}

.motion-floor.next-unlock .locked-shaft-gate {
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.36)) drop-shadow(0 0 17px rgba(255, 225, 72, 0.78));
}

.motion-floor.future-locked {
  filter: saturate(0.7) brightness(0.9);
}

.motion-floor.future-locked .unlock-label {
  border-color: rgba(169, 211, 228, 0.56);
  color: rgba(231, 247, 252, 0.92);
  background: linear-gradient(180deg, rgba(45, 76, 91, 0.92), rgba(20, 42, 54, 0.95));
  box-shadow: 0 4px 0 rgba(3, 24, 35, 0.4), 0 0 10px rgba(76, 188, 220, 0.18);
  animation: none;
}

.motion-floor.future-locked .unlock-label small {
  color: #a9cedc;
}

.motion-floor.future-locked .locked-shaft-gate {
  opacity: 0.78;
  filter: grayscale(0.22) drop-shadow(0 7px 5px rgba(0, 0, 0, 0.34));
  animation: live27-gate-breathe 4.8s ease-in-out infinite;
}

.motion-floor.future-locked .locked-gate-scan,
.motion-floor.future-locked .locked-gate-dust {
  display: none;
}

.motion-floor.future-locked .locked-gate-glow,
.motion-floor.future-locked .locked-shaft-beacon {
  opacity: 0.28;
  animation-duration: 3.4s;
}

.milestone-panel.future-lock-panel {
  border-color: rgba(166, 213, 230, 0.72);
  background: linear-gradient(180deg, rgba(222, 241, 245, 0.98), rgba(126, 167, 180, 0.94));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.62), 0 4px 0 rgba(38, 77, 91, 0.38);
}

.upgrade-button[data-lock-state="future"] {
  filter: saturate(0.62) brightness(0.92);
}

/* Meta V15: an honest, game-like prestige briefing instead of an empty reset screen. */
.prestige-balance-panel,
.prestige-plan-panel {
  position: relative;
  min-height: max-content;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  color: #14364f;
  background:
    radial-gradient(circle at 88% 8%, rgba(202, 76, 255, 0.26), transparent 104px),
    radial-gradient(circle at 12% 92%, rgba(64, 222, 255, 0.34), transparent 116px),
    linear-gradient(180deg, rgba(235, 251, 255, 0.98), rgba(157, 209, 235, 0.97));
  box-shadow: 0 6px 0 rgba(21, 61, 109, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.62);
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.prestige-balance-panel > header,
.prestige-plan-panel > header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 7px 9px;
  color: #fff;
  background: linear-gradient(105deg, #145d91, #34308f 64%, #6b288c);
  box-shadow: inset 0 -2px 0 rgba(0, 20, 56, 0.28);
}

.prestige-balance-panel > header > span:not(.prestige-balance-art),
.prestige-plan-panel > header > span {
  display: grid;
  min-width: 0;
}

.prestige-balance-panel header small,
.prestige-plan-panel header small {
  color: #80e9ff;
  font-size: 0.57rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prestige-balance-panel header strong,
.prestige-plan-panel header strong {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 1000;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prestige-balance-panel header em {
  margin-left: auto;
  padding: 5px 7px;
  border: 2px solid rgba(255, 248, 139, 0.82);
  border-radius: 999px;
  color: #5a3305;
  background: linear-gradient(180deg, #fff57b, #ffb834);
  box-shadow: 0 3px 0 rgba(68, 31, 3, 0.34), 0 0 14px rgba(255, 226, 75, 0.46);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
}

.prestige-balance-art,
.prestige-plan-crown {
  flex: 0 0 auto;
  display: block;
  width: 42px;
  height: 42px;
  background: var(--prestige-image) center / contain no-repeat;
  filter: drop-shadow(0 3px 0 rgba(0, 18, 50, 0.3)) drop-shadow(0 0 10px rgba(94, 224, 255, 0.68));
  animation: prestige-core-float 1.7s ease-in-out infinite;
}

.prestige-balance-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
}

.prestige-balance-grid article {
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.prestige-balance-grid article.kept {
  border-color: rgba(87, 228, 162, 0.8);
  background: linear-gradient(180deg, rgba(226, 255, 240, 0.94), rgba(150, 224, 207, 0.86));
}

.prestige-balance-grid article.reset {
  border-color: rgba(115, 196, 241, 0.78);
  background: linear-gradient(180deg, rgba(231, 247, 255, 0.94), rgba(162, 197, 231, 0.88));
}

.prestige-balance-grid article > b {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
  color: #16445e;
  border-bottom: 1px solid rgba(37, 96, 121, 0.18);
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.prestige-balance-grid article > b .prestige-mini {
  width: 26px;
  height: 26px;
}

.prestige-balance-grid ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 2px 5px 5px;
  list-style: none;
}

.prestige-balance-grid li {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 4px 1px;
  border-bottom: 1px solid rgba(26, 82, 105, 0.13);
}

.prestige-balance-grid li:last-child {
  border-bottom: 0;
}

.prestige-balance-grid li span {
  overflow: hidden;
  color: #315e70;
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prestige-balance-grid li strong {
  color: #12364d;
  font-size: 0.66rem;
  font-weight: 1000;
}

.prestige-balance-grid article.kept li strong {
  color: #0d704f;
}

.prestige-balance-grid article.reset li strong {
  color: #31558d;
}

.prestige-balance-panel > footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 7px 7px;
  padding: 6px 7px;
  border-radius: 7px;
  color: #245164;
  background: rgba(255, 255, 255, 0.52);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.15;
}

.prestige-balance-panel > footer i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4be5ae, #0aa477);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.72), 0 0 8px rgba(31, 211, 150, 0.44);
}

.prestige-plan-panel > header {
  justify-content: space-between;
  background: linear-gradient(105deg, #0d7495, #24449a 58%, #6c3a9a);
}

.prestige-plan-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 9px 7px 7px;
}

.prestige-plan-track::before,
.prestige-plan-track::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 47px;
  height: 6px;
  border-radius: 999px;
}

.prestige-plan-track::before {
  right: 12%;
  background: rgba(28, 73, 112, 0.28);
}

.prestige-plan-track::after {
  right: 12%;
  background: linear-gradient(90deg, #48e4b1, #fff06d, #5bdfff);
  box-shadow: 0 0 9px rgba(84, 222, 255, 0.68);
  transform: scaleX(var(--prestige-fill, 0));
  transform-origin: left center;
  transition: transform 500ms ease;
}

.prestige-plan-track article {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 5px 3px 7px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34);
  text-align: center;
}

.prestige-plan-track article.done {
  border-color: rgba(76, 228, 169, 0.9);
  background: rgba(215, 255, 235, 0.72);
}

.prestige-plan-track article.active {
  border-color: rgba(255, 233, 91, 0.94);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 222, 75, 0.5);
}

.prestige-plan-art {
  display: block;
  width: 58px;
  height: 58px;
  background: var(--prestige-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(18, 66, 96, 0.2)) drop-shadow(0 0 9px rgba(74, 218, 255, 0.48));
  animation: prestige-node-bob 1.6s ease-in-out infinite;
}

.prestige-plan-track article:nth-child(2) .prestige-plan-art {
  animation-delay: 120ms;
}

.prestige-plan-track article:nth-child(3) .prestige-plan-art {
  animation-delay: 240ms;
}

.prestige-plan-track article span {
  display: grid;
  min-width: 0;
}

.prestige-plan-track small,
.prestige-plan-track em {
  overflow: hidden;
  color: #376276;
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prestige-plan-track strong {
  color: #123d5a;
  font-size: 0.9rem;
  font-weight: 1000;
}

.prestige-plan-panel > p {
  margin: 0 7px 7px;
  padding: 7px 8px;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  color: #285264;
  background: rgba(255, 255, 255, 0.48);
  font-size: 0.61rem;
  font-weight: 900;
  line-height: 1.18;
}

.prestige-plan-panel > p b {
  color: #174265;
}

.phone-shell[data-active-tab="prestige"] .prestige-row.source-panel {
  position: sticky;
  bottom: 0;
  z-index: 8;
  box-shadow: 0 5px 0 rgba(15, 76, 102, 0.28), 0 -7px 18px rgba(36, 47, 99, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.55);
}

@media (max-width: 380px) {
  .prestige-balance-panel > header,
  .prestige-plan-panel > header {
    padding-inline: 7px;
  }

  .prestige-balance-art,
  .prestige-plan-crown {
    width: 38px;
    height: 38px;
  }

  .prestige-balance-panel header strong,
  .prestige-plan-panel header strong {
    font-size: 0.74rem;
  }

  .prestige-balance-grid li span {
    font-size: 0.51rem;
  }

  .prestige-plan-art {
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prestige-balance-art,
  .prestige-plan-crown,
  .prestige-plan-art {
    animation: none !important;
  }
}

/* Meta V16: fixed expedition route, explicit unlock gates and a real region-to-region trip. */
.world-overview-panel { min-height: 310px; }

.world-route-track {
  min-height: 64px;
  padding-top: 4px;
}

.world-route-track::before {
  top: 29px;
}

.world-route-track span {
  align-self: start;
  width: 38px;
  height: 38px;
}

.world-route-track span > i {
  width: 15px;
  height: 15px;
}

.world-route-track span > b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #103e58;
  font-size: 0.58rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.world-route-track span > em {
  position: absolute;
  left: 50%;
  top: 41px;
  width: 72px;
  overflow: hidden;
  color: #24566c;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.world-card {
  grid-template-columns: 94px minmax(0, 1fr) 76px;
  align-items: center;
  min-height: 150px;
  padding: 8px;
}

.world-card.future {
  filter: grayscale(0.36) saturate(0.66) brightness(0.9);
}

.world-card.active {
  transform: translateZ(0);
}

.world-card .world-scene {
  grid-column: 1;
  grid-row: 1;
  width: 94px;
  height: 112px;
}

.world-scene > b {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 3;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 54, 82, 0.76);
  box-shadow: 0 2px 0 rgba(0, 29, 48, 0.32);
  font-size: 0.48rem;
  font-weight: 1000;
}

.world-card-copy {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
}

.world-card .world-card-copy > *,
.world-card .world-card-copy strong,
.world-card .world-card-copy small {
  grid-column: auto;
  min-width: 0;
}

.world-card-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.world-card-heading > strong {
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-card-heading > b {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  color: #5d3307;
  background: linear-gradient(180deg, #fff575, #ffb12e);
  font-size: 0.59rem;
  font-weight: 1000;
  text-shadow: none;
}

.world-card .world-card-copy > small {
  color: rgba(240, 252, 255, 0.92);
  font-size: 0.56rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-card-stats,
.world-requirements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.world-card-stats > span,
.world-requirements > span {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 43px;
  padding: 4px 2px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 6px;
  background: rgba(3, 42, 65, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-align: center;
}

.world-requirements > span.ready {
  border-color: rgba(99, 239, 171, 0.74);
  background: rgba(9, 110, 80, 0.48);
}

.world-requirements > span.wait {
  border-color: rgba(255, 205, 91, 0.56);
  background: rgba(65, 54, 46, 0.54);
}

.world-card-stats b,
.world-requirements b {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-card-stats em,
.world-requirements em {
  grid-column: auto;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 0;
  color: rgba(224, 246, 255, 0.86);
  background: none;
  font-size: 0.43rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-requirements i {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffc84b;
  box-shadow: 0 0 6px rgba(255, 205, 81, 0.72);
}

.world-requirements .ready i {
  background: #55e2a2;
  box-shadow: 0 0 6px rgba(73, 228, 160, 0.72);
}

.world-card .world-card-progress {
  display: block;
  grid-column: auto;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(2, 29, 48, 0.54);
}

.world-card .world-card-progress > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #50e3a4, #fff06d, var(--world-crystal));
  box-shadow: 0 0 8px color-mix(in srgb, var(--world-crystal), #fff 22%);
}

.world-card > button {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: 50px;
  padding: 5px 3px;
  font-size: 0.57rem;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.world-card:not(.active):not(.future) > button:not(:disabled) {
  animation: world-v16-action-pulse 1.45s ease-in-out infinite;
}

.world-travel {
  z-index: 86;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 44%, rgba(82, 221, 255, 0.38), transparent 210px),
    radial-gradient(circle at 50% 48%, rgba(255, 226, 76, 0.22), transparent 270px),
    rgba(3, 20, 36, 0.76);
  animation: world-v16-travel-fade 2.45s ease-out both;
}

.world-travel-card {
  gap: 9px;
  width: min(390px, 94vw);
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 239, 107, 0.34), transparent 112px),
    radial-gradient(circle at 88% 66%, rgba(92, 83, 255, 0.32), transparent 130px),
    linear-gradient(180deg, rgba(24, 118, 164, 0.98), rgba(16, 44, 78, 0.98));
  animation: world-v16-travel-card 2.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.world-travel-card > header {
  display: grid;
  gap: 2px;
  width: 100%;
}

.world-travel-card > header small {
  color: #78e8ff;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.world-travel-card > header strong {
  overflow: hidden;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-travel-route {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(72px, 0.78fr) minmax(92px, 1fr);
  gap: 5px;
  align-items: center;
  width: 100%;
}

.world-travel-scene {
  position: relative;
  display: block;
  height: 126px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.76);
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 5px 0 rgba(0, 34, 58, 0.38), 0 0 18px rgba(76, 220, 255, 0.28);
}

.world-travel-scene.mine-coal { background-image: url("/assets/world-coal.png"); }
.world-travel-scene.mine-copper { background-image: url("/assets/world-copper.png"); }
.world-travel-scene.mine-gold { background-image: url("/assets/world-gold.png"); }
.world-travel-scene.mine-crystal { background-image: url("/assets/world-crystal.png"); }

.world-travel-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, 0.48) 50%, transparent 58% 100%);
  transform: translateX(-100%);
  animation: world-v16-scene-scan 1.35s ease-in-out infinite;
}

.world-travel-scene > i {
  position: absolute;
  left: 10px;
  bottom: 17px;
  width: 29px;
  height: 16px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, #ffd15d, #9e5528);
  box-shadow: 0 0 10px rgba(255, 222, 84, 0.72);
  animation: world-v16-cart-depart 2.1s ease-in-out both;
}

.world-travel-scene.destination > i {
  left: auto;
  right: 10px;
  animation-name: world-v16-cart-arrive;
}

.world-travel-scene > b {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  overflow: hidden;
  padding: 2px 4px;
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 37, 61, 0.78);
  font-size: 0.5rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-travel-tunnel {
  position: relative;
  display: block;
  height: 54px;
  border: 3px solid rgba(113, 228, 255, 0.74);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 9px, transparent 10px 18px),
    linear-gradient(180deg, #071d35, #174d72 48%, #061827);
  box-shadow: inset 0 0 18px rgba(52, 215, 255, 0.26), 0 0 18px rgba(65, 218, 255, 0.36);
}

.world-travel-tunnel::before,
.world-travel-tunnel::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 3px;
  border-radius: 999px;
  background: rgba(102, 229, 255, 0.52);
  box-shadow: 0 0 7px rgba(84, 222, 255, 0.62);
}

.world-travel-tunnel::before { top: 10px; }
.world-travel-tunnel::after { bottom: 10px; }

.world-travel-tunnel > i {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 3;
  width: 24px;
  height: 18px;
  border: 2px solid #fff68b;
  border-radius: 6px;
  background: linear-gradient(180deg, #54ddff, #126db2);
  box-shadow: 0 0 14px rgba(80, 221, 255, 0.9), 0 0 22px rgba(255, 229, 87, 0.62);
  animation: world-v16-capsule-run 2.15s cubic-bezier(0.22, 0.68, 0.28, 1) both;
}

.world-travel-tunnel > b {
  position: absolute;
  left: 10px;
  top: 50%;
  width: calc(100% - 20px);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4bdcff, #fff06d, #5be5ad);
  box-shadow: 0 0 11px rgba(80, 221, 255, 0.76);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  animation: world-v16-route-fill 2.15s ease-in-out both;
}

.world-travel-tunnel > em {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 30%, #fff575 0 2px, transparent 3px),
    radial-gradient(circle at 52% 72%, #61e5ff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, #b998ff 0 2px, transparent 3px);
  animation: world-v16-tunnel-sparks 720ms linear infinite;
}

.world-travel-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 100%;
}

.world-travel-phases span {
  padding: 5px 3px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #c5efff;
  background: rgba(4, 37, 65, 0.48);
  font-size: 0.53rem;
  font-weight: 1000;
  text-transform: uppercase;
  animation: world-v16-phase 2.1s ease-in-out both;
}

.world-travel-phases span:nth-child(2) { animation-delay: 480ms; }
.world-travel-phases span:nth-child(3) { animation-delay: 1080ms; }

.world-travel-card > em {
  color: #fff4a5;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
}

@keyframes world-v16-action-pulse {
  0%, 100% { filter: brightness(1); transform: translateY(0); }
  50% { filter: brightness(1.14) drop-shadow(0 0 8px rgba(255, 226, 71, 0.62)); transform: translateY(-1px); }
}

@keyframes world-v16-travel-fade {
  0% { opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes world-v16-travel-card {
  0% { opacity: 0; transform: translateY(34px) scale(0.86); }
  12%, 86% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.025); }
}

@keyframes world-v16-scene-scan {
  0% { opacity: 0; transform: translateX(-100%); }
  32%, 64% { opacity: 0.86; }
  100% { opacity: 0; transform: translateX(100%); }
}

@keyframes world-v16-cart-depart {
  0%, 16% { opacity: 1; transform: translateX(0); }
  46%, 100% { opacity: 0; transform: translateX(76px); }
}

@keyframes world-v16-cart-arrive {
  0%, 58% { opacity: 0; transform: translateX(-76px); }
  86%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes world-v16-capsule-run {
  0%, 18% { opacity: 0; transform: translate(0, -50%) scale(0.72); }
  26% { opacity: 1; transform: translate(0, -50%) scale(1); }
  72% { opacity: 1; transform: translate(calc(100% + 28px), -50%) scale(1); }
  82%, 100% { opacity: 0; transform: translate(calc(100% + 36px), -50%) scale(0.72); }
}

@keyframes world-v16-route-fill {
  0%, 18% { transform: translateY(-50%) scaleX(0); }
  72%, 100% { transform: translateY(-50%) scaleX(1); }
}

@keyframes world-v16-tunnel-sparks {
  from { transform: translateX(-8px); opacity: 0.52; }
  to { transform: translateX(8px); opacity: 0.92; }
}

@keyframes world-v16-phase {
  0%, 12% { color: #c5efff; background: rgba(4, 37, 65, 0.48); }
  20%, 42% { color: #5a3206; background: linear-gradient(180deg, #fff575, #ffb12e); box-shadow: 0 0 12px rgba(255, 226, 74, 0.58); }
  52%, 100% { color: #0c6549; background: linear-gradient(180deg, #baffdd, #51dba4); }
}

@media (max-width: 380px) {
  .world-card {
    grid-template-columns: 84px minmax(0, 1fr) 66px;
    gap: 6px;
    min-height: 144px;
    padding: 7px;
  }

  .world-card .world-scene {
    width: 84px;
    height: 106px;
  }

  .world-card-stats b,
  .world-requirements b {
    font-size: 0.52rem;
  }

  .world-card-stats em,
  .world-requirements em {
    font-size: 0.38rem;
  }

  .world-travel-card {
    width: 96vw;
    padding: 10px 8px;
  }

  .world-travel-route {
    grid-template-columns: minmax(82px, 1fr) 64px minmax(82px, 1fr);
    gap: 4px;
  }

  .world-travel-scene {
    height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-card:not(.active):not(.future) > button:not(:disabled),
  .world-travel *,
  .world-travel *::before,
  .world-travel *::after {
    animation: none !important;
  }
}

/* Meta V17: sequential mission runway and hand-off reveal. */
.mission-runway {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 260px;
  overflow: hidden;
  padding: 10px;
  border: 3px solid rgba(126, 224, 255, 0.86);
  border-radius: 11px;
  color: #eafaff;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 221, 70, 0.2), transparent 92px),
    radial-gradient(circle at 92% 30%, rgba(63, 220, 255, 0.24), transparent 116px),
    linear-gradient(155deg, #123852 0%, #09263c 58%, #142d42 100%);
  box-shadow: 0 8px 0 rgba(3, 29, 47, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.14);
  isolation: isolate;
  animation: drawer-row-enter 240ms cubic-bezier(0.2, 1.08, 0.28, 1) both;
}

.mission-runway::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(97, 225, 255, 0.07) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(180deg, transparent 0 70%, rgba(255, 220, 69, 0.08) 100%);
}

.mission-runway.ready {
  border-color: #ffe363;
  box-shadow: 0 8px 0 rgba(72, 43, 5, 0.58), 0 0 22px rgba(255, 221, 73, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.mission-runway > * {
  position: relative;
  z-index: 2;
}

.mission-runway-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.mission-runway-emblem {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(1, 17, 31, 0.44)) drop-shadow(0 0 12px rgba(75, 220, 255, 0.48));
  animation: live-meta-float 1.55s ease-in-out infinite;
}

.mission-runway-emblem i {
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(255, 228, 91, 0.68);
  border-left-color: transparent;
  border-radius: 50%;
  animation: season-ring-spin 1.8s linear infinite;
}

.mission-runway-head span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.mission-runway-head small,
.mission-runway-current small,
.mission-runway-next small {
  color: #7ce5ff;
  font-size: 0.55rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mission-runway-head strong {
  color: #fff4a0;
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
}

.mission-runway-head > em {
  padding: 5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: #563407;
  background: linear-gradient(180deg, #fff68c, #ffbe37);
  box-shadow: 0 3px 0 rgba(81, 46, 4, 0.38);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 1000;
}

.mission-runway-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 3px 6px;
}

.mission-runway-track > span {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.mission-runway-track > span:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% + 15px);
  top: 50%;
  width: calc(100% - 30px);
  height: 5px;
  border-radius: 999px;
  background: rgba(115, 171, 196, 0.34);
  box-shadow: inset 0 1px 2px rgba(0, 18, 34, 0.52);
  transform: translateY(-50%);
}

.mission-runway-track > span.claimed:not(:last-child)::after {
  background: linear-gradient(90deg, #50dca2, #7ce5ff);
  box-shadow: 0 0 9px rgba(82, 224, 187, 0.56);
}

.mission-runway-track i {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  color: #c8e5ef;
  background: linear-gradient(180deg, #37617a, #17384f);
  box-shadow: 0 3px 0 rgba(0, 18, 32, 0.5);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 1000;
}

.mission-runway-track .claimed i {
  color: #093d31;
  background: linear-gradient(180deg, #c2ffe5, #4bd59d);
}

.mission-runway-track .active i {
  color: #5c3404;
  background: linear-gradient(180deg, #fff895, #ffb42f);
  box-shadow: 0 3px 0 rgba(92, 49, 3, 0.5), 0 0 14px rgba(255, 221, 77, 0.76);
  animation: mission-v17-node-pulse 1.1s ease-in-out infinite;
}

.mission-runway-track .locked i {
  opacity: 0.54;
  filter: grayscale(0.7);
}

.mission-runway-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 7px;
  align-items: center;
  min-height: 78px;
  padding: 8px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 9px;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 226, 82, 0.22), transparent 58px),
    linear-gradient(180deg, rgba(239, 251, 255, 0.16), rgba(80, 162, 197, 0.13));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

.mission-runway-current > span {
  display: grid;
  min-width: 0;
}

.mission-runway-current strong,
.mission-runway-next strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-runway-current em {
  margin-top: 3px;
  color: #d1edf6;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}

.mission-runway-current button {
  min-height: 48px;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #24b9e8, #116ba8);
  box-shadow: 0 4px 0 rgba(0, 40, 70, 0.5);
  font-size: 0.62rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.mission-runway.ready .mission-runway-current button:not(:disabled) {
  color: #5d3504;
  background: linear-gradient(180deg, #fff78e, #ffb42d);
  box-shadow: 0 4px 0 rgba(93, 50, 4, 0.52), 0 0 15px rgba(255, 222, 79, 0.52);
  animation: mission-v17-action-pulse 920ms ease-in-out infinite;
}

.mission-runway-progress {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 17, 31, 0.48);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
}

.mission-runway-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #45d9ff, #fff06d, #4be0a0);
  background-size: 180% 100%;
  box-shadow: 0 0 10px rgba(75, 218, 255, 0.72);
  animation: prestige-progress-flow 1.1s linear infinite;
}

.mission-runway-next {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid rgba(116, 219, 251, 0.34);
  border-radius: 8px;
  background: rgba(2, 20, 35, 0.32);
}

.mission-runway-next > i {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(142, 224, 248, 0.62);
  border-radius: 6px;
  background: linear-gradient(135deg, #265978, #132e45);
  transform: rotate(45deg) scale(0.72);
}

.mission-runway-next span {
  display: grid;
  min-width: 0;
}

.mission-runway-next > em {
  grid-column: 2;
  color: #90b9ca;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.08;
}

.mission-chain-reveal {
  position: absolute;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 44%, rgba(87, 224, 255, 0.24), transparent 175px),
    rgba(2, 19, 33, 0.8);
  animation: reward-reveal-fade 180ms ease-out both;
}

.mission-chain-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(366px, 94vw);
  overflow: hidden;
  padding: 14px 12px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 13px;
  color: #eafaff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 230, 82, 0.26), transparent 105px),
    linear-gradient(165deg, #164768, #092a44 56%, #12344d);
  box-shadow: 0 10px 0 rgba(1, 18, 31, 0.62), 0 22px 42px rgba(0, 0, 0, 0.42);
  isolation: isolate;
  text-align: center;
  animation: reward-card-pop 340ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.mission-chain-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, 0.42) 49%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(-90%);
  animation: reward-card-shine 1.65s ease-out 360ms both;
}

.mission-chain-card > * {
  position: relative;
  z-index: 3;
}

.mission-chain-card > small,
.mission-chain-completed small,
.mission-chain-unlocked small {
  color: #7ce6ff;
  font-size: 0.6rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-chain-card > strong {
  color: #fff38f;
  font-size: 1.18rem;
  font-weight: 1000;
  line-height: 1;
}

.mission-chain-route {
  display: grid;
  grid-template-columns: 82px minmax(90px, 1fr) 82px;
  align-items: center;
  width: 100%;
  min-height: 90px;
}

.mission-chain-stop {
  position: relative;
  display: block;
  width: 78px;
  height: 78px;
  background: var(--live-panel-image) center / contain no-repeat;
  filter: drop-shadow(0 6px 0 rgba(0, 16, 28, 0.46));
}

.mission-chain-stop > i {
  position: absolute;
  right: 1px;
  top: 2px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #083b31;
  background: linear-gradient(180deg, #c6ffe6, #4ad59d);
  box-shadow: 0 0 12px rgba(79, 223, 169, 0.74);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 1000;
}

.mission-chain-stop.completed {
  animation: mission-v17-stop-complete 2.3s ease-in-out both;
}

.mission-chain-stop.next {
  opacity: 0.4;
  transform: scale(0.78);
  animation: mission-v17-stop-next 2.3s ease-in-out both;
}

.mission-chain-stop.next > i {
  color: #553105;
  background: linear-gradient(180deg, #fff78f, #ffb52f);
  box-shadow: 0 0 13px rgba(255, 222, 75, 0.76);
}

.mission-chain-rail {
  position: relative;
  height: 30px;
}

.mission-chain-rail::before,
.mission-chain-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(118, 191, 218, 0.42);
}

.mission-chain-rail::before { top: 6px; }
.mission-chain-rail::after { bottom: 6px; }

.mission-chain-rail > b {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4be0aa, #65e4ff, #fff06d);
  box-shadow: 0 0 12px rgba(90, 226, 255, 0.72);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  animation: mission-v17-route-fill 1.25s ease-out 420ms both;
}

.mission-chain-rail > i {
  position: absolute;
  left: -4px;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 22px;
  border: 2px solid #fff68b;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, #52dcff, #1473b5);
  box-shadow: 0 0 13px rgba(83, 222, 255, 0.86);
  animation: mission-v17-cart-run 1.7s cubic-bezier(0.22, 0.68, 0.28, 1) 280ms both;
}

.mission-chain-completed,
.mission-chain-unlocked {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 8px;
}

.mission-chain-completed {
  border: 1px solid rgba(88, 224, 177, 0.46);
  background: rgba(26, 125, 93, 0.24);
  animation: mission-v17-copy-old 2.2s ease-in-out both;
}

.mission-chain-unlocked {
  border: 2px solid rgba(255, 226, 81, 0.66);
  background: rgba(255, 221, 68, 0.12);
  opacity: 0;
  transform: translateY(12px);
  animation: mission-v17-copy-next 460ms ease-out 1.22s forwards;
}

.mission-chain-completed b,
.mission-chain-unlocked b {
  overflow: hidden;
  color: #fff;
  font-size: 0.77rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-chain-completed em,
.mission-chain-unlocked em {
  color: #c4eaf6;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}

.mission-chain-card > button {
  min-width: 178px;
  min-height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 9px;
  color: #5a3205;
  background: linear-gradient(180deg, #fff78d, #ffb22d);
  box-shadow: 0 4px 0 rgba(90, 48, 3, 0.5), 0 0 14px rgba(255, 222, 77, 0.42);
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-chain-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mission-chain-sparks > i {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, #fff06d 54%, #54e0ff);
  box-shadow: 0 0 10px rgba(255, 225, 75, 0.72);
  transform: rotate(calc(var(--i) * 16.36deg)) translateY(-20px);
  animation: chest-spark-fly 1.3s ease-out calc(var(--i) * 14ms) both;
}

@keyframes mission-v17-node-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.16); }
}

@keyframes mission-v17-action-pulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-1px); filter: brightness(1.14); }
}

@keyframes mission-v17-stop-complete {
  0%, 34% { transform: scale(1); filter: brightness(1.16) drop-shadow(0 0 20px rgba(76, 224, 174, 0.7)); }
  64%, 100% { transform: scale(0.86); filter: brightness(0.76); }
}

@keyframes mission-v17-stop-next {
  0%, 50% { opacity: 0.35; transform: scale(0.76); filter: grayscale(0.72); }
  74%, 100% { opacity: 1; transform: scale(1.04); filter: grayscale(0) drop-shadow(0 0 21px rgba(255, 224, 77, 0.74)); }
}

@keyframes mission-v17-route-fill {
  from { transform: translateY(-50%) scaleX(0); }
  to { transform: translateY(-50%) scaleX(1); }
}

@keyframes mission-v17-cart-run {
  0% { opacity: 0; transform: translate(-8px, -50%) scale(0.7); }
  16% { opacity: 1; transform: translate(0, -50%) scale(1); }
  78% { opacity: 1; transform: translate(calc(100% + 8px), -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(100% + 16px), -50%) scale(0.72); }
}

@keyframes mission-v17-copy-old {
  0%, 48% { opacity: 1; }
  72%, 100% { opacity: 0.66; }
}

@keyframes mission-v17-copy-next {
  to { opacity: 1; transform: translateY(0); box-shadow: 0 0 17px rgba(255, 222, 77, 0.26); }
}

@media (max-width: 380px) {
  .mission-runway {
    padding: 8px;
  }

  .mission-runway-current {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .mission-runway-current button {
    font-size: 0.55rem;
  }

  .mission-chain-card {
    padding: 11px 8px;
  }

  .mission-chain-route {
    grid-template-columns: 72px minmax(72px, 1fr) 72px;
  }

  .mission-chain-stop {
    width: 68px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-runway *,
  .mission-runway *::before,
  .mission-runway *::after,
  .mission-chain-reveal *,
  .mission-chain-reveal *::before,
  .mission-chain-reveal *::after {
    animation: none !important;
  }

  .mission-chain-stop.next,
  .mission-chain-unlocked {
    opacity: 1;
    transform: none;
  }
}


/* Meta V18: aligned continuous-work scene and neutral interaction states. */
.redesign-v1 .sprite-elevator {
  left: -14px;
}

.redesign-v1 .redesign-surface-hauler {
  left: 10.5%;
}

.tutorial-target-ring {
  display: none !important;
}

.sprite-elevator.manual-ready,
.surface-worker.manual-ready,
.redesign-surface-hauler.manual-ready {
  outline: none !important;
  cursor: default;
}

.sprite-elevator.manual-ready,
.surface-worker.manual-ready {
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.32)) !important;
}

.redesign-surface-hauler.manual-ready {
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.3)) !important;
}

.redesign-surface-hauler.manual-ready::after {
  display: none !important;
}

.surface-manager-button.ability-ready {
  outline: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), 0 4px 0 rgba(0, 31, 48, 0.52), 0 0 14px rgba(68, 213, 255, 0.42);
}

/* Meta V18: selected shafts stay readable without yellow scene frames. */
.motion-floor.selected::before {
  display: none !important;
}

.motion-floor.selected .shaft-structure {
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.26));
}

.shaft-row.selected .shaft-room {
  outline: none;
}


/* Meta V19: clean shaft presentation with managers placed in the cave depth. */
.redesign-v1 .motion-floor .stock-badge,
.redesign-v1 .motion-floor .automation-badge,
.redesign-v1 .motion-floor .manager-command-wave {
  display: none !important;
}

.redesign-v1 .motion-floor .level-pop {
  right: -1%;
  top: 10%;
}

.redesign-v1 .sprite-manager-foreman,
.redesign-v1 .motion-floor.state-loading .sprite-manager-foreman {
  left: 33.5%;
  bottom: 12%;
  z-index: 2;
  width: 66px;
  height: 66px;
  opacity: 0.86;
  filter:
    brightness(0.82)
    saturate(0.88)
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.3));
}

.motion-floor.selected::before,
.motion-floor.selected.camera-focus-settled::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.floor-tap,
.floor-tap:focus,
.floor-tap:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}


/* Meta V21: focused shaft inspector and an unobstructed mission-only header. */
.mine-title,
.tutorial-coach {
  display: none !important;
}

.quest-strip {
  top: max(53px, calc(env(safe-area-inset-top) + 53px));
  left: 7px;
  right: 7px;
}

.redesign-v1 .motion-floor .level-pop {
  right: 1%;
  top: 10%;
}

.redesign-v1 .sprite-manager-foreman,
.redesign-v1 .motion-floor.state-loading .sprite-manager-foreman {
  bottom: 24%;
  width: 58px;
  height: 58px;
  opacity: 0.82;
}

.action-tray {
  display: grid;
  gap: 7px;
  padding: 11px 8px 8px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(100% + 18px), 0);
  transition:
    opacity 170ms ease,
    visibility 0s linear 220ms,
    transform 220ms cubic-bezier(0.2, 0.84, 0.26, 1);
}

.phone-shell.shaft-panel-open .action-tray {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.shaft-panel-close {
  position: absolute;
  right: 7px;
  top: 6px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #ef6a55, #b42f2b);
  box-shadow: 0 3px 0 rgba(91, 28, 19, 0.46);
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
}

.selected-card {
  display: block;
  min-height: 36px;
  padding-right: 34px;
}

.selected-card span {
  margin-top: 3px;
  white-space: normal;
}

.shaft-production-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  color: #17415a;
  background: linear-gradient(180deg, rgba(238, 253, 255, 0.98), rgba(153, 224, 239, 0.94));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 rgba(58, 119, 140, 0.3);
}

.shaft-production-card span {
  min-width: 0;
  text-align: center;
}

.shaft-production-card small,
.shaft-production-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shaft-production-card small {
  color: #28728b;
  font-size: 0.52rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.shaft-production-card strong {
  margin-top: 2px;
  font-size: 0.83rem;
  font-weight: 1000;
}

.shaft-production-card > i {
  color: #e28a19;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 1000;
  text-align: center;
}

.shaft-upgrade-grid {
  gap: 5px;
}

.shaft-upgrade-grid .upgrade-button {
  grid-template-rows: 15px 19px 13px;
  min-height: 55px;
  padding: 5px 2px;
}

.shaft-upgrade-grid .upgrade-button small {
  font-size: 0.48rem;
}

.shaft-upgrade-grid .upgrade-button strong {
  font-size: 0.72rem;
}

.shaft-upgrade-grid .upgrade-button em {
  overflow: hidden;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.49rem;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shaft-upgrade-grid .upgrade-button.main em {
  color: #71430d;
}

.shaft-upgrade-grid .upgrade-button.max {
  background: linear-gradient(180deg, #76e59a, #168b57);
  box-shadow: 0 4px 0 rgba(10, 91, 53, 0.58);
}

.shaft-upgrade-grid .upgrade-button:disabled {
  opacity: 0.5;
  filter: grayscale(0.25);
}

@media (max-width: 380px) {
  .shaft-upgrade-grid .upgrade-button small {
    font-size: 0.44rem;
  }

  .shaft-upgrade-grid .upgrade-button strong {
    font-size: 0.65rem;
  }
}


/* Meta V22: the elevator shell stays registered while only its interior animates. */
.redesign-v1 .elevator-redesign-visual {
  overflow: hidden;
  background-position: 0 0;
  animation: none !important;
}

.redesign-v1 .elevator-redesign-visual::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 17.2%;
  width: 64%;
  height: 67.2%;
  background: url("/assets/redesign-v3-elevator-operator-interior-25.png?v=meta-v22") var(--elevator-load-x, 0%) var(--elevator-load-y, 0%) / 500% 500% no-repeat;
}

.redesign-v1 .sprite-elevator.waiting .elevator-redesign-visual::after,
.redesign-v1 .sprite-elevator.moving_down.cargo-empty .elevator-redesign-visual::after {
  animation: redesign-v2-elevator-idle 2.4s linear infinite;
}

.redesign-v1 .sprite-elevator.moving_up.cargo-half .elevator-redesign-visual::after {
  animation: redesign-v2-elevator-ride-half 1.8s linear infinite;
}

.redesign-v1 .sprite-elevator.moving_up.cargo-full .elevator-redesign-visual::after {
  animation: redesign-v2-elevator-ride-full 1.8s linear infinite;
}

.redesign-v1 .sprite-elevator.loading .elevator-redesign-visual::after {
  animation: redesign-v2-elevator-load 1.8s linear both;
}

.redesign-v1 .sprite-elevator.unloading .elevator-redesign-visual::after {
  animation: redesign-v2-elevator-unload 1.2s linear both;
}


/* Meta V23: one compact inspector for shafts, elevator, and surface transport. */
.redesign-v1 .redesign-surface-hauler[data-action="select_warehouse"] {
  pointer-events: auto;
  cursor: pointer;
}

.inspector-panel {
  gap: 5px;
  padding-top: 9px;
}

.inspector-metrics span {
  display: grid;
  align-content: center;
}

.inspector-metrics em {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: #35768c;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-manager-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(78px, auto);
  gap: 6px;
  align-items: center;
  min-height: 43px;
  padding: 4px 5px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  color: #173e56;
  background: linear-gradient(180deg, rgba(245, 253, 220, 0.98), rgba(169, 226, 211, 0.95));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 rgba(76, 125, 91, 0.3);
}

.inspector-manager-card.assigned {
  background: linear-gradient(180deg, rgba(255, 248, 188, 0.98), rgba(142, 226, 210, 0.95));
}

.inspector-manager-avatar {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4fcdf3, #197eaf);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72), 0 2px 0 rgba(27, 82, 99, 0.35);
}

.inspector-manager-avatar.empty::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 1000;
}

.inspector-manager-copy,
.inspector-manager-copy small,
.inspector-manager-copy strong,
.inspector-manager-copy em {
  display: block;
  min-width: 0;
}

.inspector-manager-copy small {
  color: #24758b;
  font-size: 0.46rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.inspector-manager-copy strong,
.inspector-manager-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-manager-copy strong {
  font-size: 0.69rem;
  line-height: 1.05;
}

.inspector-manager-copy em {
  margin-top: 2px;
  color: #416557;
  font-size: 0.47rem;
  font-style: normal;
  font-weight: 800;
}

.inspector-manager-card > button {
  min-height: 34px;
  padding: 4px 6px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #3db9ec, #1275af);
  box-shadow: 0 3px 0 rgba(14, 81, 119, 0.55);
  font-size: 0.55rem;
  font-weight: 1000;
  line-height: 1.05;
}

.inspector-manager-card > button:disabled {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.inspector-upgrade-grid .upgrade-button {
  min-height: 52px;
  grid-template-rows: 14px 18px 12px;
}