/* =========================
   SKILL OVERLAY
========================= */

#skillOverlay {
  width: auto;
  background: var(--ui-bg-panel);

}

.skill-window {
  width: 720px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(65, 61, 51, 0.863);
  background: rgba(0,0,0,0.25);
}

.skill-header h2 {
  margin: 0;
}

.skill-hero {
  gap: 16px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at left center, rgba(171, 200, 128, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
}

.skill-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.skill-hero-icon-wrap {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(211, 225, 177, 0.16), rgba(78, 96, 55, 0.22));
  border: 1px solid rgba(191, 209, 154, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 26px rgba(0,0,0,0.24);
}

.skill-hero-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.skill-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.skill-hero-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.skill-hero-copy h2 {
  margin: 0;
  line-height: 1.05;
}

.skill-overview-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}

.skill-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.skill-stat-pill {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-stat-pill strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
}

.skill-stat-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.fishing-personal-best-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fishing-personal-best-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

.fishing-personal-best-row img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.fishing-personal-best-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fishing-personal-best-row strong {
  color: #f1d38a;
  font-size: 13px;
}

.fishing-personal-best-row.no-best strong {
  color: var(--ui-text-muted);
  font-weight: 600;
}

.skill-xp-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  position: relative;
  overflow: visible;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.06);
}

.skill-xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #90bc4f, #bfd96f);
  box-shadow: 0 0 14px rgba(173, 219, 91, 0.18);
}

.xp-bar-gain {
  position: absolute;
  right: 4px;
  top: -28px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(178, 222, 94, 0.18);
  border: 1px solid rgba(196, 237, 116, 0.42);
  color: #d8ff8d;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: xpBarGainFloat 1.15s ease-out forwards;
}

@keyframes xpBarGainFloat {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  18% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  72% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
  }
}

.skill-close {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.skill-close:hover {
  color: #fff;
}

.skill-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.skill-location-row {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
}

.location-skill-switcher {
  position: absolute;
  right: -60px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-switch-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 20px;
  color: #f7e8c0;
}

.skill-switch-btn:hover {
  color: #fff3cf;
}

.skill-switch-btn.active {
  color: #112015;
  border-color: rgba(173, 205, 151, 0.44);
  background:
    linear-gradient(180deg, #c7d4a4, #88a56f 54%, #5f7d4e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 12px 24px rgba(52, 81, 42, 0.24);
}
.game-window {
  position: relative;
}

.no-resources-box {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
}

/* =========================
   SMITHING UI ROOT
========================= */

.smithing-ui {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================
   TABS
========================= */

.processing-tab-rail {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 6px;
}

.processing-tab-rail.has-overflow-controls {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
}

.smithing-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.smithing-tabs::-webkit-scrollbar {
  display: none;
}

.processing-tab-arrow {
  width: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 8px;
  align-self: stretch;
  font-size: 15px;
  line-height: 1;
}

.smithing-tab {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
  border-bottom: 1px solid transparent;
}

.smithing-tab:hover {
  color: var(--ui-text);
}

.smithing-tab.active {
  color: #112015;
  border-color: rgba(173, 205, 151, 0.44);
  border-bottom-color: transparent;
  background:
    linear-gradient(180deg, #c7d4a4, #88a56f 54%, #5f7d4e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 10px 20px rgba(52, 81, 42, 0.22);
}


/* =========================
   CONTENT AREA
========================= */

.smithing-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smithing-recipe-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.smithing-recipe-picker label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-text-muted);
}

.smithing-recipe-picker select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(214, 184, 116, 0.18);
  background: rgba(14, 12, 9, 0.86);
  color: var(--ui-text);
  font: inherit;
  font-weight: 700;
}


/* =========================
   RECIPE LIST ITEM
========================= */

.recipe {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 8px;

  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;

  cursor: pointer;

  transition: all 0.15s ease;
}

.recipe:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--ui-border);
  transform: translateX(2px);
}

.recipe:active {
  transform: scale(0.98);
}


/* =========================
   RECIPE TEXT
========================= */

.recipe strong {
  font-weight: 500;
}

.recipe small {
  color: var(--ui-text-muted);
  font-size: 12px;
}


/* =========================
   DETAIL VIEW
========================= */

.recipe-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 12px;
  border-radius: 10px;

  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ui-border);
}

.recipe-detail h3 {
  margin: 0;
  font-size: 16px;
}


/* =========================
   INPUT FIELD
========================= */

.recipe-detail input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--ui-border);

  background: rgba(0,0,0,0.4);
  color: var(--ui-text);

  width: 80px;
}

.crafting-duration-estimate {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 224, 170, 0.16);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 13px;
}

.crafting-duration-estimate span {
  opacity: 0.78;
}

.crafting-duration-estimate strong {
  text-align: right;
}


/* =========================
   BUTTONS
========================= */

.recipe-detail button {
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;

  font-size: 13px;

  transition: all 0.15s ease;
}

#startCraftBtn {
  background: var(--ui-accent);
  color: #000;
  font-weight: 600;
}

#startCraftBtn:hover {
  background: var(--ui-accent-soft);
}

#backToList {
  background: rgba(255,255,255,0.05);
  color: var(--ui-text-muted);
}

#backToList:hover {
  background: rgba(255,255,255,0.08);
  color: var(--ui-text);
}


/* =========================
   SCROLL FEEL (optional nice)
========================= */

.smithing-content::-webkit-scrollbar {
  width: 6px;
}

.smithing-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.ingredient {
  font-size: 13px;
  opacity: 0.8;
}

.ingredient.missing {
  color: #ff6b6b;
}


.unlock-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unlock-item-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  display: block;
  filter: var(--item-extra-filter, none) drop-shadow(0 2px 4px rgba(0,0,0,0.24));
}

.unlock-item-icon.is-locked {
  opacity: 0.9;
  filter: grayscale(0.1) drop-shadow(0 2px 4px rgba(0,0,0,0.22));
}

.unlock-item-text {
  min-width: 0;
}

.error-text {
  color: #ff6b6b;
  font-size: 13px;
}




.view-hero {
  gap: 16px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at left center, rgba(171, 200, 128, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
}

.view-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.view-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.view-hero-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.view-hero-copy h2 {
  margin: 0;
  line-height: 1.05;
}

.view-overview-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}

.view-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.view-stat-pill {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.view-stat-pill strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
}

.view-stat-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.city-hub-window,
.city-scene-window,
.location-view-window {
  display: flex;
  flex-direction: column;
}

.city-hub-body,
.location-view-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.city-location-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.city-location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
}

.city-location-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.city-location-copy small {
  color: var(--ui-text-muted);
}

.city-location-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.skill-view-city-scene {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.city-scene-overlay {
  position: relative;
  min-height: calc(100vh - 170px);
  overflow: hidden;
}

.city-scene-header {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-direction: column;
  max-width: 320px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(39, 33, 22, 0.88), rgba(18, 15, 10, 0.8)),
    rgba(20, 18, 10, 0.92);
  border: 1px solid rgba(212, 177, 114, 0.18);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255, 244, 214, 0.04);
  transition: transform 0.55s ease, opacity 0.35s ease, max-width 0.45s ease, padding 0.45s ease;
}

.location-scene-header.is-collapsed {
  width: 54px;
  max-width: 54px;
  min-height: 112px;
  padding: 10px 8px;
  overflow: hidden;
  cursor: pointer;
  transform: translateX(calc(-100% + 42px));
  opacity: 0.82;
}

.location-scene-header.is-collapsed .city-scene-header-copy p,
.location-scene-header.is-collapsed .city-scene-header-copy h2,
.location-scene-header.is-collapsed .city-scene-tools {
  display: none;
}

.location-scene-header.is-collapsed .city-scene-header-copy {
  align-items: center;
}

.location-scene-header.is-collapsed .city-scene-kicker {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.12em;
}

.location-scene-header.is-collapsed h2 {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.city-scene-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.city-scene-header h2 {
  margin: 0;
  line-height: 1;
}

.city-scene-header p {
  margin: 0;
  color: var(--ui-text-muted);
}

.city-scene-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(228, 194, 132, 0.82);
}

.city-scene-tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.city-scene-tool-btn {
  border: 1px solid rgba(214, 184, 116, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(28, 24, 18, 0.9);
  color: #f3e6c5;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 20px rgba(0,0,0,0.24);
}

.city-scene-tool-btn.danger {
  background: rgba(150, 58, 58, 0.24);
}

.city-scene-map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.city-scene-node {
  position: absolute;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
  text-align: left;
  border: none;
  box-shadow: none;
  transition: none;
  max-width: min(220px, calc(100vw - 32px));
}

.city-scene-node.is-near-right {
  transform: translate(-100%, -50%);
}

.city-scene-node.is-near-left {
  transform: translateY(-50%);
}

.city-scene-node.is-near-top {
  transform: translateY(0);
}

.city-scene-node.is-near-right.is-near-top {
  transform: translateX(-100%);
}

.city-scene-node.is-near-bottom {
  transform: translateY(-100%);
}

.city-scene-node.is-near-right.is-near-bottom {
  transform: translate(-100%, -100%);
}

.skill-view-city-scene [data-scene-draggable] {
  touch-action: none;
}

.skill-view-city-scene [data-scene-draggable] .city-scene-node-card,
.skill-view-city-scene [data-scene-draggable] .city-gate-button {
  cursor: grab;
}

.city-scene-node-dot {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.86);
  box-shadow:
    0 0 0 6px rgba(0,0,0,0.24),
    0 0 18px rgba(214, 184, 116, 0.22);
  background: #d9bf86;
}

.city-scene-node-card {
  min-width: 172px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(37, 31, 21, 0.92), rgba(16, 14, 10, 0.82)),
    rgba(20, 18, 10, 0.92);
  border: 1px solid rgba(212, 177, 114, 0.14);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255, 244, 214, 0.03);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

.city-scene-node-card strong {
  font-size: 14px;
  line-height: 1.1;
}

.city-scene-node-card span,
.city-scene-node-card small {
  color: rgba(243, 234, 214, 0.68);
}

.city-scene-node-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.city-scene-node-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.city-scene-node-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.city-scene-skill-icon {
  padding: 2px;
}

.city-scene-quest-icon {
  width: 24px;
  height: 24px;
  padding: 1px;
  background: rgba(255, 224, 136, 0.1);
  border-color: rgba(255, 224, 136, 0.24);
}

.city-scene-quest-icon.is-turn-in {
  background: rgba(146, 219, 118, 0.12);
  border-color: rgba(146, 219, 118, 0.3);
}

.city-scene-coords {
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 228, 181, 0.88);
}

.city-scene-node.is-activity .city-scene-node-dot {
  background: #a3c75e;
}

.city-scene-node.is-crafting .city-scene-node-dot {
  background: #c99958;
}

.city-scene-node.is-social .city-scene-node-dot {
  background: #b97860;
}

.city-scene-node.is-npc .city-scene-node-dot {
  background: #8db7d4;
}

.city-scene-node.is-poi .city-scene-node-dot {
  background: #b49c74;
}

.city-scene-node:hover .city-scene-node-card,
.city-scene-node:focus-visible .city-scene-node-card {
  transform: translateY(-1px);
  border-color: rgba(214, 184, 116, 0.28);
  background:
    linear-gradient(180deg, rgba(49, 39, 25, 0.96), rgba(24, 20, 14, 0.9)),
    rgba(28, 24, 18, 0.94);
  box-shadow: 0 16px 30px rgba(0,0,0,0.26);
  filter: brightness(1.04);
}

.city-scene-node:hover,
.city-scene-node:focus-visible,
.city-scene-node:active {
  transform: translateY(-50%);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.city-scene-node.is-near-right:hover,
.city-scene-node.is-near-right:focus-visible,
.city-scene-node.is-near-right:active {
  transform: translate(-100%, -50%);
}

.city-scene-node.is-near-left:hover,
.city-scene-node.is-near-left:focus-visible,
.city-scene-node.is-near-left:active {
  transform: translateY(-50%);
}

.city-scene-node.is-near-top:hover,
.city-scene-node.is-near-top:focus-visible,
.city-scene-node.is-near-top:active {
  transform: translateY(0);
}

.city-scene-node.is-near-right.is-near-top:hover,
.city-scene-node.is-near-right.is-near-top:focus-visible,
.city-scene-node.is-near-right.is-near-top:active {
  transform: translateX(-100%);
}

.city-scene-node.is-near-bottom:hover,
.city-scene-node.is-near-bottom:focus-visible,
.city-scene-node.is-near-bottom:active {
  transform: translateY(-100%);
}

.city-scene-node.is-near-right.is-near-bottom:hover,
.city-scene-node.is-near-right.is-near-bottom:focus-visible,
.city-scene-node.is-near-right.is-near-bottom:active {
  transform: translate(-100%, -100%);
}

.city-scene-node:hover .city-scene-node-dot,
.city-scene-node:focus-visible .city-scene-node-dot {
  box-shadow:
    0 0 0 6px rgba(0,0,0,0.24),
    0 0 14px rgba(255, 214, 129, 0.22);
}

.city-scene-node:focus-visible {
  outline: none;
}

.city-scene-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 240px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(16, 21, 27, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

.city-gate-anchor {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: block;
}

.city-gate-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 164px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(35, 29, 21, 0.86), rgba(24, 19, 14, 0.76));
  color: var(--ui-text);
  box-shadow: 0 14px 28px rgba(0,0,0,0.26);
  backdrop-filter: blur(8px);
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.city-gate-button:hover,
.city-gate-button:focus-visible,
.city-gate-button:active {
  transform: none;
}

.city-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(186, 150, 88, 0.92), rgba(128, 96, 44, 0.88));
  color: #1d140b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.city-gate-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.city-gate-copy small {
  color: var(--ui-text-muted);
}

.city-gate-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  max-width: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(16, 21, 27, 0.9);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 34px rgba(0,0,0,0.34);
  backdrop-filter: blur(10px);
}

.city-gate-anchor.menu-left .city-gate-menu {
  right: 0;
  left: auto;
}

.city-gate-anchor.menu-right .city-gate-menu {
  left: 0;
  right: auto;
}

.city-gate-anchor.menu-up .city-gate-menu {
  top: auto;
  bottom: calc(100% + 10px);
}

.city-gate-anchor.menu-down .city-gate-menu {
  top: calc(100% + 10px);
  bottom: auto;
}

.city-gate-menu.hidden {
  display: none;
}

.city-gate-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: var(--ui-text);
  text-align: left;
}

.city-gate-menu-item span,
.city-gate-menu-item small {
  color: var(--ui-text-muted);
}

.city-gate-menu-item .city-scene-node-meta {
  margin-top: 4px;
}

.location-overview-card {
  margin-bottom: 2px;
}

.location-scene-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.location-scene-overlay {
  position: relative;
  min-height: calc(100vh - 170px);
  overflow: hidden;
}

.location-scene-header {
  max-width: 360px;
}

.location-scene-map {
  position: absolute;
  inset: 0;
}

.location-scene-skill-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(212, 177, 114, 0.1);
}

.location-scene-skill-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.location-scene-skill-topline strong {
  font-size: 1rem;
  line-height: 1.1;
}

.location-scene-skill-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  font-size: 10px;
  color: var(--ui-text-muted);
  min-width: 0;
}

.location-scene-skill-level {
  font-size: 0.92rem;
  color: var(--ui-text);
  font-weight: 700;
  white-space: nowrap;
}

.location-scene-skill-tool {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.location-scene-skill-bar {
  height: 8px;
  margin-top: 2px;
}

.location-scene-node.is-selected .city-scene-node-card {
  border-color: rgba(255, 228, 181, 0.34);
  box-shadow: 0 16px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(255, 228, 181, 0.08);
  filter: brightness(1.08);
}

.location-scene-node.is-running .city-scene-node-dot {
  box-shadow:
    0 0 0 6px rgba(0,0,0,0.24),
    0 0 18px rgba(146, 219, 118, 0.42);
}

.location-scene-node.is-running .city-scene-node-card {
  border-color: rgba(146, 219, 118, 0.28);
}

.location-scene-map.is-activity-running .location-scene-node:not(.is-running) {
  pointer-events: none;
  animation: locationSceneInactiveNodeFade 2.6s ease forwards;
}

.location-scene-map.is-activity-running .location-scene-node.is-running {
  z-index: 3;
}

@keyframes locationSceneInactiveNodeFade {
  from {
    opacity: 1;
    transform: translateY(-50%);
    filter: blur(0) saturate(1);
  }

  to {
    opacity: 0;
    transform: translateY(calc(-50% + 4px)) scale(0.98);
    filter: blur(1px) saturate(0.75);
  }
}

.location-scene-utilities {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.location-scene-utility-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(214, 184, 116, 0.14);
  background:
    linear-gradient(180deg, rgba(39, 33, 22, 0.92), rgba(18, 15, 10, 0.84)),
    rgba(20, 18, 10, 0.92);
  color: #f4ead3;
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
  backdrop-filter: blur(8px);
}

.location-scene-utility-btn:hover,
.location-scene-utility-btn.is-active {
  background:
    linear-gradient(180deg, rgba(55, 44, 28, 0.98), rgba(26, 21, 14, 0.9)),
    rgba(28, 24, 18, 0.94);
  border-color: rgba(214, 184, 116, 0.24);
  filter: brightness(1.03);
}

.location-scene-utility-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.34));
}

.location-scene-status-anchor {
  position: absolute;
  left: 20px;
  bottom: 94px;
  z-index: 4;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.location-scene-status-panel {
  width: 340px;
  max-width: min(calc(100vw - 40px), 340px);
  flex: 0 0 auto;
  padding: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(39, 33, 22, 0.94), rgba(18, 15, 10, 0.86)),
    rgba(20, 18, 10, 0.92);
  border: 1px solid rgba(212, 177, 114, 0.16);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.location-scene-status-panel .location-scene-skill-summary {
  border: none;
  background: transparent;
  padding: 10px 12px;
}

.location-scene-drawer {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  --location-scene-drawer-width: min(420px, calc(100vw - 48px));
  --location-scene-drawer-max-height: min(680px, calc(100dvh - 48px));
  width: var(--location-scene-drawer-width);
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.location-scene-drawer.is-station {
  --location-scene-drawer-width: min(560px, calc(100vw - 48px));
  --location-scene-drawer-max-height: min(720px, calc(100dvh - 48px));
  width: var(--location-scene-drawer-width);
}

.location-scene-drawer.is-compact {
  bottom: auto;
  max-height: var(--location-scene-drawer-max-height);
}

.location-scene-drawer.is-running-activity {
  bottom: auto;
  --location-scene-drawer-max-height: min(420px, calc(100dvh - 48px));
  max-height: var(--location-scene-drawer-max-height);
}

.location-scene-drawer.is-anchored {
  left: clamp(12px, calc(var(--location-scene-drawer-x) + 236px), calc(100% - var(--location-scene-drawer-width) - 12px));
  top: clamp(12px, calc(var(--location-scene-drawer-y) - 44px), calc(100% - var(--location-scene-drawer-max-height) - 12px));
  right: auto;
  bottom: auto;
  max-height: var(--location-scene-drawer-max-height);
  justify-content: flex-start;
}

.location-scene-drawer-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(39, 33, 22, 0.96), rgba(18, 15, 10, 0.92)),
    rgba(20, 18, 10, 0.92);
  border: 1px solid rgba(212, 177, 114, 0.18);
  box-shadow:
    0 26px 52px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255, 244, 214, 0.04);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  overflow: hidden;
  animation: locationSceneDrawerIn 0.22s ease-out;
}

.location-scene-drawer-shell.is-station {
  max-width: 100%;
}

.location-scene-drawer-shell.is-running-activity {
  max-height: inherit;
  border-color: rgba(168, 194, 126, 0.22);
  box-shadow:
    0 26px 52px rgba(0,0,0,0.32),
    0 0 0 1px rgba(168, 194, 126, 0.08);
}

.location-scene-drawer-shell.is-compact {
  max-height: inherit;
}

.location-scene-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(212, 177, 114, 0.12);
}

.location-scene-drawer-head-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-scene-drawer-head-copy h3,
.location-scene-drawer-copy h3 {
  margin: 0;
}

.location-scene-drawer-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(228, 194, 132, 0.82);
}

.location-scene-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 18px;
}

.location-scene-drawer-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.location-scene-drawer-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-scene-drawer-copy p {
  margin: 0;
  color: var(--ui-text-muted);
}

@keyframes locationSceneDrawerIn {
  from {
    opacity: 0;
    transform: translateX(22px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.location-view-window {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
}

.location-view-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
}

.location-view-main {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

.location-view-main::-webkit-scrollbar {
  width: 6px;
}

.location-view-main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}

.location-session-loot {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}

.location-focus-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.location-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.location-focus-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-focus-copy h4 {
  margin: 0;
}

.location-focus-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.location-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.location-mode-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
  color: var(--ui-text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.location-mode-btn:hover {
  color: var(--ui-text);
  background: rgba(255,255,255,0.06);
}

.location-mode-btn.active {
  color: #201b11;
  background: linear-gradient(180deg, rgba(244, 224, 177, 0.96), rgba(217, 185, 121, 0.92));
  box-shadow: 0 10px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4);
}

.location-focus-content {
  min-height: 180px;
}

.location-npc-panel,
.location-active-activity {
  min-height: 0;
}

.skill-activity-animation {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.location-scene-activity-animation-anchor {
  position: absolute;
  right: 32px;
  top: 548px;
  z-index: 2;
  width: min(360px, calc(100vw - 48px));
  max-width: 360px;
  pointer-events: none;
  transition: left 0.28s ease, right 0.28s ease, top 0.28s ease, bottom 0.28s ease, width 0.28s ease;
}

@media (max-width: 920px) {
  .city-scene-node-card {
    min-width: 132px;
    max-width: min(180px, calc(100vw - 28px));
    padding: 8px 10px;
  }

  .city-gate-button {
    min-width: 132px;
  }

  .city-gate-menu {
    min-width: min(230px, calc(100vw - 28px));
    max-width: min(260px, calc(100vw - 28px));
  }

  .location-scene-drawer.is-anchored {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

.location-scene-activity-animation-anchor .skill-activity-animation {
  box-shadow: none;
  backdrop-filter: none;
}

.skill-activity-stage {
  position: relative;
  min-height: 260px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.skill-activity-stage::before {
  display: none;
}

.skill-activity-scene-object {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
  left: 50%;
  bottom: var(--skill-activity-object-bottom, 6px);
  width: var(--skill-activity-object-width, min(340px, 82%));
  transform: var(--skill-activity-object-transform, translateX(-50%));
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28));
}

.skill-activity-aura,
.skill-activity-detail {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
}

.skill-activity-aura {
  left: 50%;
  bottom: 30px;
  width: 220px;
  height: 64px;
  transform: translateX(-50%);
  opacity: 0;
}

.skill-activity-detail {
  opacity: 0;
}

.skill-activity-scene-tree {
  --skill-activity-object-width: min(340px, 82%);
}

.skill-activity-scene-pond {
  --skill-activity-object-bottom: -4px;
  --skill-activity-object-width: min(320px, 84%);
}

.skill-activity-scene-bush {
  --skill-activity-object-bottom: 8px;
  --skill-activity-object-width: min(264px, 68%);
}

.skill-activity-scene-rock {
  --skill-activity-object-bottom: 4px;
  --skill-activity-object-width: min(274px, 70%);
}

.skill-activity-scene-anvil {
  --skill-activity-object-bottom: 22px;
  --skill-activity-object-width: min(196px, 52%);
}

.skill-activity-scene-workbench {
  --skill-activity-object-bottom: 10px;
  --skill-activity-object-width: min(252px, 66%);
}

.skill-activity-scene-cookingpot {
  --skill-activity-object-bottom: 18px;
  --skill-activity-object-width: min(212px, 56%);
}

.skill-activity-tool {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  transform-origin: 72% 76%;
  left: var(--skill-activity-tool-left, calc(50% - 124px));
  bottom: var(--skill-activity-tool-bottom, 94px);
}

.skill-activity-tool-woodcutting {
  --skill-activity-tool-left: calc(50% - 124px);
  --skill-activity-tool-bottom: 94px;
  transform-origin: 28% 76%;
}

.skill-activity-tool-fishing {
  --skill-activity-tool-left: calc(50% - 132px);
  --skill-activity-tool-bottom: 104px;
  width: 132px;
  height: 132px;
  transform-origin: 22% 84%;
}

.skill-activity-tool-survival {
  --skill-activity-tool-left: calc(50% - 118px);
  --skill-activity-tool-bottom: 92px;
  transform-origin: 24% 78%;
}

.skill-activity-tool-survival .skill-activity-tool-image {
  transform: rotate(180deg);
}

.skill-activity-tool-mining {
  --skill-activity-tool-left: calc(50% - 100px);
  --skill-activity-tool-bottom: 102px;
  transform-origin: 74% 78%;
}

.skill-activity-tool-smithing {
  --skill-activity-tool-left: calc(50% - 100px);
  --skill-activity-tool-bottom: 175px;
  transform-origin: 68% 78%;
}

.skill-activity-tool-crafting {
  --skill-activity-tool-left: calc(50% + 34px);
  --skill-activity-tool-bottom: 65px;
  transform-origin: 26% 82%;
}

.skill-activity-tool-cooking {
  --skill-activity-tool-left: calc(50% + 22px);
  --skill-activity-tool-bottom: 124px;
  transform-origin: 26% 82%;
}

.skill-activity-tool-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 12px rgba(0, 0, 0, 0.24))
    drop-shadow(0 1px 0 rgba(255,255,255,0.12));
}

.skill-activity-impact-ring {
  position: absolute;
  left: var(--skill-activity-impact-left, calc(50% - 18px));
  bottom: var(--skill-activity-impact-bottom, 116px);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(233, 209, 145, 0.62);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}

.skill-activity-particle {
  position: absolute;
  left: var(--skill-activity-particle-left, calc(50% - 24px));
  bottom: var(--skill-activity-particle-bottom, 126px);
  width: 10px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(204, 164, 97, 0.94), rgba(150, 106, 52, 0.72));
  box-shadow: 0 0 8px rgba(212, 166, 92, 0.16);
  opacity: 0;
}

.skill-activity-animation-fishing {
  --skill-activity-impact-left: calc(50% + 10px);
  --skill-activity-impact-bottom: 94px;
  --skill-activity-particle-left: calc(50% + 2px);
  --skill-activity-particle-bottom: 106px;
}

.skill-activity-animation-survival {
  --skill-activity-impact-left: calc(50% - 6px);
  --skill-activity-impact-bottom: 104px;
  --skill-activity-particle-left: calc(50% - 18px);
  --skill-activity-particle-bottom: 114px;
}

.skill-activity-animation-mining {
  --skill-activity-impact-left: calc(50% - 2px);
  --skill-activity-impact-bottom: 112px;
  --skill-activity-particle-left: calc(50% - 14px);
  --skill-activity-particle-bottom: 122px;
}

.skill-activity-animation-smithing {
  --skill-activity-impact-left: calc(50% + 12px);
  --skill-activity-impact-bottom: 175px;
  --skill-activity-particle-left: calc(50% + 2px);
  --skill-activity-particle-bottom: 134px;
}

.skill-activity-animation-crafting {
  --skill-activity-impact-left: calc(50% + 20px);
  --skill-activity-impact-bottom: 116px;
  --skill-activity-particle-left: calc(50% + 10px);
  --skill-activity-particle-bottom: 126px;
}

.skill-activity-animation-cooking {
  --skill-activity-impact-left: calc(50% + 8px);
  --skill-activity-impact-bottom: 215px;
  --skill-activity-particle-left: calc(50% - 2px);
  --skill-activity-particle-bottom: 215px;
}

.skill-activity-animation-woodcutting .skill-activity-tool-woodcutting {
  animation: woodcuttingToolSwing 1.85s ease-in-out infinite;
}

.skill-activity-animation-woodcutting .skill-activity-impact-ring {
  animation: woodcuttingImpactPulse 1.85s ease-out infinite;
}

.skill-activity-animation-woodcutting .skill-activity-particle-one {
  animation: woodcuttingChipOne 1.85s ease-out infinite;
}

.skill-activity-animation-woodcutting .skill-activity-particle-two {
  animation: woodcuttingChipTwo 1.85s ease-out infinite;
}

.skill-activity-animation-woodcutting .skill-activity-particle-three {
  animation: woodcuttingChipThree 1.85s ease-out infinite;
}

.skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-scene-object {
  animation: woodcuttingTreeRewardPulse 0.48s ease-out;
}

.skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-tool {
  animation: woodcuttingRewardHit 0.48s ease-out;
}

.skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-impact-ring {
  animation: woodcuttingRewardImpact 0.48s ease-out;
}

.skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-particle-one {
  animation: woodcuttingRewardChipLeft 0.5s ease-out;
}

.skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-particle-two {
  animation: woodcuttingRewardChipRight 0.5s ease-out;
}

.skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-particle-three {
  animation: woodcuttingRewardChipUp 0.5s ease-out;
}

@keyframes woodcuttingToolSwing {
  0%,
  100% {
    transform: rotate(-20deg) translate3d(0, 0, 0);
  }

  18% {
    transform: rotate(24deg) translate3d(6px, -14px, 0);
  }

  32% {
    transform: rotate(-12deg) translate3d(-2px, 0, 0);
  }

  72% {
    transform: rotate(-20deg) translate3d(0, 0, 0);
  }
}

@keyframes woodcuttingImpactPulse {
  0%,
  19%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }

  24% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
  }

  40% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes woodcuttingChipOne {
  0%,
  20%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  24% {
    opacity: 1;
    transform: translate3d(4px, -2px, 0) rotate(12deg);
  }

  52% {
    opacity: 0;
    transform: translate3d(-24px, -28px, 0) rotate(-36deg);
  }
}

@keyframes woodcuttingChipTwo {
  0%,
  20%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    opacity: 0.92;
    transform: translate3d(1px, -1px, 0) rotate(18deg);
  }

  54% {
    opacity: 0;
    transform: translate3d(26px, -20px, 0) rotate(46deg);
  }
}

@keyframes woodcuttingChipThree {
  0%,
  20%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  26% {
    opacity: 0.88;
    transform: translate3d(3px, 0, 0) rotate(-10deg);
  }

  48% {
    opacity: 0;
    transform: translate3d(8px, -34px, 0) rotate(-58deg);
  }
}

@keyframes woodcuttingTreeRewardPulse {
  0% {
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28));
  }

  35% {
    transform: translateX(-50%) scale(1.035);
    filter:
      drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28))
      drop-shadow(0 0 18px rgba(216, 197, 114, 0.24));
  }

  100% {
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28));
  }
}

@keyframes woodcuttingRewardHit {
  0% {
    transform: rotate(-20deg) translate3d(0, 0, 0) scale(1);
  }

  35% {
    transform: rotate(34deg) translate3d(10px, -18px, 0) scale(1.06);
  }

  100% {
    transform: rotate(-18deg) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes woodcuttingRewardImpact {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  24% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.4);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.6);
  }
}

@keyframes woodcuttingRewardChipLeft {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
  }

  18% {
    opacity: 1;
    transform: translate3d(-6px, -8px, 0) rotate(-12deg) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate3d(-52px, -46px, 0) rotate(-90deg) scale(0.9);
  }
}

@keyframes woodcuttingRewardChipRight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
  }

  16% {
    opacity: 1;
    transform: translate3d(8px, -6px, 0) rotate(18deg) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate3d(44px, -34px, 0) rotate(84deg) scale(0.9);
  }
}

@keyframes woodcuttingRewardChipUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
  }

  22% {
    opacity: 0.92;
    transform: translate3d(0, -10px, 0) rotate(-20deg) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate3d(12px, -58px, 0) rotate(-110deg) scale(0.88);
  }
}

.skill-activity-animation-fishing .skill-activity-aura {
  bottom: 44px;
  width: 240px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 188, 224, 0.28) 0%, rgba(91, 188, 224, 0.1) 42%, rgba(91, 188, 224, 0) 72%);
  opacity: 0.2;
  animation: fishingWaterGlow 4.8s ease-in-out infinite;
}

.skill-activity-animation-fishing .skill-activity-detail-one {
  display: none;
}

.skill-activity-animation-fishing .skill-activity-detail-two {
  display: none;
}

.skill-activity-bobber {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
}

.skill-activity-bobber {
  left: calc(50% + 6px);
  bottom: 96px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.14));
  opacity: 0.92;
  z-index: 3;
  animation: fishingBobberFloat 4.8s ease-in-out infinite;
}

.skill-activity-animation-fishing .skill-activity-impact-ring {
  border-color: rgba(120, 208, 239, 0.72);
  animation: fishingRippleRing 4.8s ease-out infinite;
}

.skill-activity-animation-fishing .skill-activity-tool {
  animation: fishingRodLift 2.7s ease-in-out infinite;
}

.skill-activity-animation-fishing .skill-activity-particle {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(132, 214, 240, 0.9) 52%, rgba(132, 214, 240, 0.25) 100%);
  box-shadow: 0 0 10px rgba(104, 191, 227, 0.3);
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-aura {
  animation: fishingRewardGlow 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-bobber {
  animation: fishingRewardBobber 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-scene-object {
  animation: fishingRewardPond 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-tool {
  animation: fishingRewardRod 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-impact-ring {
  animation: fishingRewardRipple 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-particle-one {
  animation: fishingRewardBubbleLeft 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-particle-two {
  animation: fishingRewardBubbleRight 0.55s ease-out;
}

.skill-activity-animation-fishing.is-reward-pulse .skill-activity-particle-three {
  animation: fishingRewardBubbleTop 0.55s ease-out;
}

.skill-activity-animation-survival .skill-activity-aura {
  bottom: 54px;
  width: 180px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 178, 97, 0.22) 0%, rgba(122, 178, 97, 0.08) 50%, rgba(122, 178, 97, 0) 76%);
  animation: survivalRustleGlow 2.35s ease-in-out infinite;
}

.skill-activity-animation-survival .skill-activity-detail-one,
.skill-activity-animation-survival .skill-activity-detail-two {
  width: 16px;
  height: 10px;
  border-radius: 100% 0;
  background: linear-gradient(135deg, rgba(196, 233, 124, 0.95), rgba(80, 128, 55, 0.9));
  box-shadow: 0 0 10px rgba(104, 170, 78, 0.18);
}

.skill-activity-animation-survival .skill-activity-detail-one {
  left: calc(50% - 12px);
  bottom: 116px;
  animation: survivalLeafDriftOne 2.35s ease-in-out infinite;
}

.skill-activity-animation-survival .skill-activity-detail-two {
  left: calc(50% + 18px);
  bottom: 108px;
  animation: survivalLeafDriftTwo 2.35s ease-in-out infinite;
}

.skill-activity-animation-survival .skill-activity-scene-object {
  animation: survivalBushRustle 2.35s ease-in-out infinite;
}

.skill-activity-animation-survival .skill-activity-tool {
  animation: survivalForageReach 2.35s ease-in-out infinite;
}

.skill-activity-animation-survival .skill-activity-impact-ring {
  border-color: rgba(159, 206, 112, 0.66);
  animation: survivalSearchPulse 2.35s ease-out infinite;
}

.skill-activity-animation-survival .skill-activity-particle {
  width: 12px;
  height: 6px;
  background: linear-gradient(90deg, rgba(198, 227, 113, 0.94), rgba(89, 128, 63, 0.74));
  box-shadow: 0 0 8px rgba(142, 186, 103, 0.2);
}

.skill-activity-animation-survival .skill-activity-particle-one {
  animation: survivalLeafBurstOne 2.35s ease-out infinite;
}

.skill-activity-animation-survival .skill-activity-particle-two {
  animation: survivalLeafBurstTwo 2.35s ease-out infinite;
}

.skill-activity-animation-survival .skill-activity-particle-three {
  animation: survivalLeafBurstThree 2.35s ease-out infinite;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-aura {
  animation: survivalRewardGlow 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-detail-one,
.skill-activity-animation-survival.is-reward-pulse .skill-activity-detail-two {
  animation: survivalRewardLeaf 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-scene-object {
  animation: survivalRewardBush 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-tool {
  animation: survivalRewardReach 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-impact-ring {
  animation: survivalRewardPulse 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-particle-one {
  animation: survivalRewardBurstLeft 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-particle-two {
  animation: survivalRewardBurstRight 0.52s ease-out;
}

.skill-activity-animation-survival.is-reward-pulse .skill-activity-particle-three {
  animation: survivalRewardBurstTop 0.52s ease-out;
}

.skill-activity-animation-mining .skill-activity-aura {
  bottom: 42px;
  width: 200px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 168, 168, 0.22) 0%, rgba(168, 168, 168, 0.08) 48%, rgba(168, 168, 168, 0) 72%);
  animation: miningDustGlow 2.1s ease-in-out infinite;
}

.skill-activity-animation-mining .skill-activity-detail-one,
.skill-activity-animation-mining .skill-activity-detail-two {
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(109, 109, 109, 0.12));
  transform-origin: bottom center;
}

.skill-activity-animation-mining .skill-activity-detail-one {
  left: calc(50% - 4px);
  bottom: 112px;
  height: 34px;
  animation: miningCrackOne 2.1s ease-in-out infinite;
}

.skill-activity-animation-mining .skill-activity-detail-two {
  left: calc(50% + 16px);
  bottom: 106px;
  height: 28px;
  animation: miningCrackTwo 2.1s ease-in-out infinite;
}

.skill-activity-animation-mining .skill-activity-scene-object {
  animation: miningRockTremor 2.1s ease-in-out infinite;
}

.skill-activity-animation-mining .skill-activity-tool {
  animation: miningPickStrike 2.1s ease-in-out infinite;
}

.skill-activity-animation-mining .skill-activity-impact-ring {
  border-color: rgba(214, 214, 214, 0.58);
  animation: miningShockPulse 2.1s ease-out infinite;
}

.skill-activity-animation-mining .skill-activity-particle {
  width: 12px;
  height: 5px;
  background: linear-gradient(90deg, rgba(211, 211, 211, 0.95), rgba(124, 124, 124, 0.72));
  box-shadow: 0 0 8px rgba(180, 180, 180, 0.16);
}

.skill-activity-animation-mining .skill-activity-particle-one {
  animation: miningShardOne 2.1s ease-out infinite;
}

.skill-activity-animation-mining .skill-activity-particle-two {
  animation: miningShardTwo 2.1s ease-out infinite;
}

.skill-activity-animation-mining .skill-activity-particle-three {
  animation: miningDustPlume 2.1s ease-out infinite;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-aura {
  animation: miningRewardGlow 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-detail-one,
.skill-activity-animation-mining.is-reward-pulse .skill-activity-detail-two {
  animation: miningRewardCrack 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-scene-object {
  animation: miningRewardRock 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-tool {
  animation: miningRewardStrike 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-impact-ring {
  animation: miningRewardShock 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-particle-one {
  animation: miningRewardShardLeft 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-particle-two {
  animation: miningRewardShardRight 0.48s ease-out;
}

.skill-activity-animation-mining.is-reward-pulse .skill-activity-particle-three {
  animation: miningRewardDust 0.48s ease-out;
}

.skill-activity-animation-smithing .skill-activity-aura {
  bottom: 48px;
  width: 208px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 156, 67, 0.24) 0%, rgba(255, 156, 67, 0.08) 48%, rgba(255, 156, 67, 0) 74%);
  opacity: 0.24;
  animation: smithingForgeGlow 3.2s ease-in-out infinite;
}

.skill-activity-animation-smithing .skill-activity-detail-one,
.skill-activity-animation-smithing .skill-activity-detail-two {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 241, 187, 1), rgba(255, 153, 71, 0.92));
  box-shadow: 0 0 10px rgba(255, 160, 76, 0.36);
}

.skill-activity-animation-smithing .skill-activity-detail-one {
  left: calc(50% + 10px);
  bottom: 142px;
  opacity: 0;
}

.skill-activity-animation-smithing .skill-activity-detail-two {
  left: calc(50% + 24px);
  bottom: 136px;
  opacity: 0;
}

.skill-activity-animation-smithing .skill-activity-tool {
  animation: smithingHammerIdle 1.55s cubic-bezier(.36, .02, .28, 1) infinite;
}

.skill-activity-animation-smithing .skill-activity-impact-ring {
  border-color: rgba(255, 181, 88, 0.72);
}

.skill-activity-animation-smithing .skill-activity-particle {
  width: 12px;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 250, 190, 1), rgba(255, 160, 74, 0.8));
  box-shadow: 0 0 10px rgba(255, 162, 76, 0.28);
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-aura {
  animation: smithingRewardGlow 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-detail-one,
.skill-activity-animation-smithing.is-reward-pulse .skill-activity-detail-two {
  animation: smithingRewardEmber 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-scene-object {
  animation: smithingRewardAnvil 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-tool {
  animation: smithingRewardHammer 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-impact-ring {
  animation: smithingRewardFlash 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-particle-one {
  animation: smithingRewardSparkLeft 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-particle-two {
  animation: smithingRewardSparkRight 0.46s ease-out;
}

.skill-activity-animation-smithing.is-reward-pulse .skill-activity-particle-three {
  animation: smithingRewardSparkTop 0.46s ease-out;
}

.skill-activity-animation-crafting .skill-activity-aura {
  bottom: 52px;
  width: 204px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 156, 108, 0.2) 0%, rgba(192, 156, 108, 0.07) 48%, rgba(192, 156, 108, 0) 74%);
  animation: craftingBenchGlow 2.25s ease-in-out infinite;
}

.skill-activity-animation-crafting .skill-activity-detail-one,
.skill-activity-animation-crafting .skill-activity-detail-two {
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244, 218, 171, 0.98), rgba(170, 126, 74, 0.82));
  box-shadow: 0 0 8px rgba(183, 138, 88, 0.18);
}

.skill-activity-animation-crafting .skill-activity-detail-one {
  left: calc(50% + 10px);
  bottom: 122px;
  animation: craftingShavingOne 2.45s ease-out infinite;
}

.skill-activity-animation-crafting .skill-activity-detail-two {
  left: calc(50% + 22px);
  bottom: 116px;
  animation: craftingShavingTwo 2.45s ease-out infinite;
}

.skill-activity-animation-crafting .skill-activity-scene-object {
  animation: craftingBenchShift 2.45s ease-in-out infinite;
}

.skill-activity-animation-crafting .skill-activity-tool {
  animation: craftingWorkStroke 2.45s cubic-bezier(.42, 0, .28, 1) infinite;
}

.skill-activity-animation-crafting .skill-activity-impact-ring {
  border-color: rgba(218, 184, 136, 0.68);
  animation: craftingTapPulse 2.45s ease-out infinite;
}

.skill-activity-animation-crafting .skill-activity-particle {
  width: 12px;
  height: 4px;
  background: linear-gradient(90deg, rgba(242, 222, 170, 0.94), rgba(178, 132, 76, 0.72));
  box-shadow: 0 0 8px rgba(192, 150, 97, 0.18);
}

.skill-activity-animation-crafting .skill-activity-particle-one {
  animation: craftingChipOne 2.45s ease-out infinite;
}

.skill-activity-animation-crafting .skill-activity-particle-two {
  animation: craftingChipTwo 2.45s ease-out infinite;
}

.skill-activity-animation-crafting .skill-activity-particle-three {
  animation: craftingChipThree 2.45s ease-out infinite;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-aura {
  animation: craftingRewardGlow 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-detail-one,
.skill-activity-animation-crafting.is-reward-pulse .skill-activity-detail-two {
  animation: craftingRewardShaving 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-scene-object {
  animation: craftingRewardBench 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-tool {
  animation: craftingRewardStroke 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-impact-ring {
  animation: craftingRewardTap 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-particle-one {
  animation: craftingRewardChipLeft 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-particle-two {
  animation: craftingRewardChipRight 0.5s ease-out;
}

.skill-activity-animation-crafting.is-reward-pulse .skill-activity-particle-three {
  animation: craftingRewardChipTop 0.5s ease-out;
}

.skill-activity-animation-cooking .skill-activity-aura {
  bottom: 50px;
  width: 188px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 66%, rgba(255, 182, 110, 0.18) 0%, rgba(255, 182, 110, 0.08) 44%, rgba(255, 182, 110, 0) 76%);
  animation: cookingSteamGlow 2.4s ease-in-out infinite;
}

.skill-activity-animation-cooking .skill-activity-detail-one,
.skill-activity-animation-cooking .skill-activity-detail-two {
  width: 22px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
  filter: blur(1px);
}

.skill-activity-animation-cooking .skill-activity-detail-one {
  left: calc(50% - 6px);
  bottom: 120px;
  animation: cookingSteamOne 2.4s ease-in-out infinite;
}

.skill-activity-animation-cooking .skill-activity-detail-two {
  left: calc(50% + 18px);
  bottom: 126px;
  animation: cookingSteamTwo 2.4s ease-in-out infinite;
}

.skill-activity-animation-cooking .skill-activity-scene-object {
  animation: cookingPotBob 2.4s ease-in-out infinite;
}

.skill-activity-animation-cooking .skill-activity-tool {
  animation: cookingStirMotion 2.4s ease-in-out infinite;
}

.skill-activity-animation-cooking .skill-activity-impact-ring {
  border-color: rgba(255, 201, 152, 0.66);
  animation: cookingSimmerPulse 2.4s ease-out infinite;
}

.skill-activity-animation-cooking .skill-activity-particle {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255, 194, 121, 0.88) 52%, rgba(255, 194, 121, 0.2) 100%);
  box-shadow: 0 0 10px rgba(255, 184, 108, 0.24);
}

.skill-activity-animation-cooking .skill-activity-particle-one {
  animation: cookingBubbleOne 2.4s ease-out infinite;
}

.skill-activity-animation-cooking .skill-activity-particle-two {
  animation: cookingBubbleTwo 2.4s ease-out infinite;
}

.skill-activity-animation-cooking .skill-activity-particle-three {
  animation: cookingBubbleThree 2.4s ease-out infinite;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-aura {
  animation: cookingRewardGlow 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-detail-one,
.skill-activity-animation-cooking.is-reward-pulse .skill-activity-detail-two {
  animation: cookingRewardSteam 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-scene-object {
  animation: cookingRewardPot 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-tool {
  animation: cookingRewardStir 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-impact-ring {
  animation: cookingRewardSimmer 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-particle-one {
  animation: cookingRewardBubbleLeft 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-particle-two {
  animation: cookingRewardBubbleRight 0.54s ease-out;
}

.skill-activity-animation-cooking.is-reward-pulse .skill-activity-particle-three {
  animation: cookingRewardBubbleTop 0.54s ease-out;
}

@keyframes fishingWaterGlow {
  0%, 100% { opacity: 0.14; transform: translateX(-50%) scale(0.97); }
  50% { opacity: 0.26; transform: translateX(-50%) scale(1.01); }
}

@keyframes fishingBobberFloat {
  0%, 100% { opacity: 0.92; transform: translate3d(0, 0, 0) scale(1); }
  28% { opacity: 1; transform: translate3d(-2px, -8px, 0) scale(1.05); }
  60% { transform: translate3d(3px, -2px, 0) scale(0.96); }
}

@keyframes fishingPondDrift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  42% { transform: translateX(-50%) translateY(-3px); }
  72% { transform: translateX(calc(-50% + 2px)) translateY(-1px); }
}

@keyframes fishingRodLift {
  0%, 100% { transform: rotate(8deg) translate3d(0, 0, 0); }
  22% { transform: rotate(-9deg) translate3d(-3px, -5px, 0); }
  50% { transform: rotate(10deg) translate3d(3px, 0, 0); }
  78% { transform: rotate(6deg) translate3d(1px, -2px, 0); }
}

@keyframes fishingRippleRing {
  0%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  34% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.92); }
  62% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes fishingBubbleOne {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  34% { opacity: 0.92; transform: translate3d(-6px, -8px, 0) scale(1); }
  64% { opacity: 0; transform: translate3d(-18px, -38px, 0) scale(0.65); }
}

@keyframes fishingBubbleTwo {
  0%, 20%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  30% { opacity: 0.8; transform: translate3d(4px, -6px, 0) scale(0.94); }
  62% { opacity: 0; transform: translate3d(18px, -30px, 0) scale(0.62); }
}

@keyframes fishingBubbleThree {
  0%, 28%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  38% { opacity: 0.72; transform: translate3d(2px, -4px, 0) scale(0.88); }
  68% { opacity: 0; transform: translate3d(6px, -44px, 0) scale(0.58); }
}

@keyframes fishingRewardGlow {
  0% { opacity: 0.22; transform: translateX(-50%) scale(0.95); }
  40% { opacity: 0.75; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
}

@keyframes fishingRewardBobber {
  0% { opacity: 0.9; transform: translate3d(0, 0, 0) scale(1); }
  36% { opacity: 1; transform: translate3d(-6px, -16px, 0) scale(1.18); }
  100% { opacity: 0; transform: translate3d(8px, -26px, 0) scale(0.76); }
}

@keyframes fishingRewardPond {
  0% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28)); }
  35% { transform: translateX(-50%) scale(1.05); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 18px rgba(116, 204, 236, 0.22)); }
  100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28)); }
}

@keyframes fishingRewardRod {
  0% { transform: rotate(8deg) translate3d(0, 0, 0); }
  34% { transform: rotate(-14deg) translate3d(-5px, -8px, 0) scale(1.03); }
  100% { transform: rotate(10deg) translate3d(3px, 0, 0); }
}

@keyframes fishingRewardRipple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
}

@keyframes fishingRewardBubbleLeft {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
  18% { opacity: 1; transform: translate3d(-8px, -10px, 0) scale(1.2); }
  100% { opacity: 0; transform: translate3d(-30px, -52px, 0) scale(0.55); }
}

@keyframes fishingRewardBubbleRight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
  20% { opacity: 0.94; transform: translate3d(8px, -8px, 0) scale(1.14); }
  100% { opacity: 0; transform: translate3d(28px, -40px, 0) scale(0.56); }
}

@keyframes fishingRewardBubbleTop {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
  18% { opacity: 0.9; transform: translate3d(0, -12px, 0) scale(1.08); }
  100% { opacity: 0; transform: translate3d(8px, -60px, 0) scale(0.48); }
}

@keyframes survivalRustleGlow {
  0%, 100% { opacity: 0.16; transform: translateX(-50%) scale(0.94); }
  42% { opacity: 0.42; transform: translateX(-50%) scale(1.03); }
}

@keyframes survivalLeafDriftOne {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-18deg); }
  28% { opacity: 0.84; transform: translate3d(-6px, -12px, 0) rotate(-38deg); }
  64% { opacity: 0; transform: translate3d(-26px, -28px, 0) rotate(-72deg); }
}

@keyframes survivalLeafDriftTwo {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg); }
  34% { opacity: 0.76; transform: translate3d(10px, -8px, 0) rotate(36deg); }
  70% { opacity: 0; transform: translate3d(22px, -26px, 0) rotate(66deg); }
}

@keyframes survivalBushRustle {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  24% { transform: translateX(calc(-50% - 3px)) rotate(-2.2deg); }
  46% { transform: translateX(calc(-50% + 4px)) rotate(2.6deg); }
  68% { transform: translateX(calc(-50% - 2px)) rotate(-1.2deg); }
}

@keyframes survivalForageReach {
  0%, 100% { transform: rotate(-14deg) translate3d(0, 0, 0); }
  30% { transform: rotate(18deg) translate3d(12px, -10px, 0); }
  54% { transform: rotate(-10deg) translate3d(-4px, 4px, 0); }
}

@keyframes survivalSearchPulse {
  0%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  30% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  54% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

@keyframes survivalLeafBurstOne {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-20deg); }
  32% { opacity: 1; transform: translate3d(-6px, -6px, 0) rotate(-40deg); }
  66% { opacity: 0; transform: translate3d(-28px, -24px, 0) rotate(-88deg); }
}

@keyframes survivalLeafBurstTwo {
  0%, 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(14deg); }
  30% { opacity: 0.9; transform: translate3d(6px, -5px, 0) rotate(34deg); }
  62% { opacity: 0; transform: translate3d(30px, -20px, 0) rotate(74deg); }
}

@keyframes survivalLeafBurstThree {
  0%, 28%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(4deg); }
  34% { opacity: 0.76; transform: translate3d(0, -6px, 0) rotate(-12deg); }
  58% { opacity: 0; transform: translate3d(8px, -34px, 0) rotate(-42deg); }
}

@keyframes survivalRewardGlow {
  0% { opacity: 0.18; transform: translateX(-50%) scale(0.96); }
  38% { opacity: 0.62; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.22); }
}

@keyframes survivalRewardLeaf {
  0% { opacity: 0.2; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8); }
  26% { opacity: 1; transform: translate3d(0, -14px, 0) rotate(-26deg) scale(1.14); }
  100% { opacity: 0; transform: translate3d(24px, -42px, 0) rotate(80deg) scale(0.86); }
}

@keyframes survivalRewardBush {
  0% { transform: translateX(-50%) scale(1); }
  34% { transform: translateX(calc(-50% - 2px)) scale(1.04) rotate(-3deg); }
  66% { transform: translateX(calc(-50% + 2px)) scale(1.03) rotate(2.2deg); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes survivalRewardReach {
  0% { transform: rotate(-14deg) translate3d(0, 0, 0); }
  36% { transform: rotate(28deg) translate3d(14px, -12px, 0) scale(1.06); }
  100% { transform: rotate(-8deg) translate3d(-2px, 2px, 0); }
}

@keyframes survivalRewardPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.14); }
  24% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

@keyframes survivalRewardBurstLeft {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-18deg) scale(0.8); }
  18% { opacity: 1; transform: translate3d(-10px, -8px, 0) rotate(-32deg) scale(1.2); }
  100% { opacity: 0; transform: translate3d(-42px, -34px, 0) rotate(-112deg) scale(0.92); }
}

@keyframes survivalRewardBurstRight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(12deg) scale(0.8); }
  16% { opacity: 0.95; transform: translate3d(10px, -8px, 0) rotate(30deg) scale(1.15); }
  100% { opacity: 0; transform: translate3d(40px, -30px, 0) rotate(98deg) scale(0.9); }
}

@keyframes survivalRewardBurstTop {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8); }
  22% { opacity: 0.86; transform: translate3d(2px, -10px, 0) rotate(-10deg) scale(1.08); }
  100% { opacity: 0; transform: translate3d(14px, -52px, 0) rotate(-70deg) scale(0.88); }
}

@keyframes miningDustGlow {
  0%, 100% { opacity: 0.12; transform: translateX(-50%) scale(0.94); }
  44% { opacity: 0.38; transform: translateX(-50%) scale(1.02); }
}

@keyframes miningCrackOne {
  0%, 100% { opacity: 0.1; transform: rotate(-12deg) scaleY(0.7); }
  30% { opacity: 0.6; transform: rotate(-18deg) scaleY(1.05); }
  52% { opacity: 0.22; transform: rotate(-8deg) scaleY(0.86); }
}

@keyframes miningCrackTwo {
  0%, 100% { opacity: 0.08; transform: rotate(10deg) scaleY(0.66); }
  34% { opacity: 0.56; transform: rotate(18deg) scaleY(1); }
  58% { opacity: 0.18; transform: rotate(8deg) scaleY(0.82); }
}

@keyframes miningRockTremor {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  28% { transform: translateX(calc(-50% - 2px)) translateY(1px); }
  32% { transform: translateX(calc(-50% + 3px)) translateY(-1px); }
  36% { transform: translateX(calc(-50% - 2px)) translateY(1px); }
  44% { transform: translateX(-50%) translateY(0); }
}

@keyframes miningPickStrike {
  0%, 100% { transform: rotate(18deg) translate3d(0, 0, 0); }
  22% { transform: rotate(-20deg) translate3d(-10px, -12px, 0); }
  32% { transform: rotate(30deg) translate3d(4px, 2px, 0); }
  60% { transform: rotate(18deg) translate3d(0, 0, 0); }
}

@keyframes miningShockPulse {
  0%, 24%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  28% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.92); }
  44% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

@keyframes miningShardOne {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg); }
  30% { opacity: 0.92; transform: translate3d(-6px, -4px, 0) rotate(-28deg); }
  62% { opacity: 0; transform: translate3d(-34px, -20px, 0) rotate(-92deg); }
}

@keyframes miningShardTwo {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg); }
  32% { opacity: 0.84; transform: translate3d(8px, -5px, 0) rotate(24deg); }
  64% { opacity: 0; transform: translate3d(30px, -18px, 0) rotate(86deg); }
}

@keyframes miningDustPlume {
  0%, 26%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); }
  34% { opacity: 0.54; transform: translate3d(0, -4px, 0) scale(1); }
  66% { opacity: 0; transform: translate3d(12px, -28px, 0) scale(1.36); }
}

@keyframes miningRewardGlow {
  0% { opacity: 0.14; transform: translateX(-50%) scale(0.96); }
  30% { opacity: 0.48; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.18); }
}

@keyframes miningRewardCrack {
  0% { opacity: 0.16; transform: rotate(0deg) scaleY(0.8); }
  34% { opacity: 0.92; transform: rotate(18deg) scaleY(1.22); }
  100% { opacity: 0; transform: rotate(-16deg) scaleY(0.92); }
}

@keyframes miningRewardRock {
  0% { transform: translateX(-50%) scale(1); }
  20% { transform: translateX(calc(-50% - 4px)) scale(1.02); }
  30% { transform: translateX(calc(-50% + 5px)) scale(1.04); }
  40% { transform: translateX(calc(-50% - 4px)) scale(1.03); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes miningRewardStrike {
  0% { transform: rotate(18deg) translate3d(0, 0, 0); }
  34% { transform: rotate(-28deg) translate3d(-10px, -14px, 0) scale(1.04); }
  100% { transform: rotate(26deg) translate3d(2px, 2px, 0); }
}

@keyframes miningRewardShock {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

@keyframes miningRewardShardLeft {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-10deg) scale(0.9); }
  18% { opacity: 1; transform: translate3d(-8px, -6px, 0) rotate(-30deg) scale(1.12); }
  100% { opacity: 0; transform: translate3d(-44px, -26px, 0) rotate(-118deg) scale(0.88); }
}

@keyframes miningRewardShardRight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg) scale(0.9); }
  18% { opacity: 0.94; transform: translate3d(10px, -6px, 0) rotate(26deg) scale(1.08); }
  100% { opacity: 0; transform: translate3d(40px, -22px, 0) rotate(106deg) scale(0.86); }
}

@keyframes miningRewardDust {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); }
  24% { opacity: 0.62; transform: translate3d(0, -8px, 0) scale(1.3); }
  100% { opacity: 0; transform: translate3d(12px, -40px, 0) scale(1.64); }
}

@keyframes smithingForgeGlow {
  0%, 100% { opacity: 0.18; transform: translateX(-50%) scale(0.97); }
  40% { opacity: 0.38; transform: translateX(-50%) scale(1.035); }
}

@keyframes smithingHammerIdle {
  0%, 100% { transform: rotate(32deg) translate3d(0, 0, 0); }
  24% { transform: rotate(6deg) translate3d(-7px, -18px, 0); }
  34% { transform: rotate(44deg) translate3d(5px, 4px, 0); }
  48% { transform: rotate(28deg) translate3d(1px, 1px, 0); }
}

@keyframes smithingEmberArcOne {
  0%, 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
  32% { opacity: 1; transform: translate3d(8px, -10px, 0) rotate(-10deg); }
  66% { opacity: 0; transform: translate3d(34px, -34px, 0) rotate(-44deg); }
}

@keyframes smithingEmberArcTwo {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-12deg); }
  34% { opacity: 0.92; transform: translate3d(4px, -8px, 0) rotate(24deg); }
  62% { opacity: 0; transform: translate3d(22px, -28px, 0) rotate(58deg); }
}

@keyframes smithingAnvilPulse {
  0%, 100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.28)); }
  26% { transform: translateX(calc(-50% - 1px)) scale(1.012); filter: drop-shadow(0 17px 25px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 10px rgba(255, 158, 71, 0.12)); }
  48% { transform: translateX(calc(-50% + 1.5px)) scale(1.018); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.29)) drop-shadow(0 0 14px rgba(255, 158, 71, 0.16)); }
  68% { transform: translateX(calc(-50% - 0.75px)) scale(1.01); }
}

@keyframes smithingHammerStrike {
  0%, 100% { transform: rotate(-14deg) translate3d(0, 0, 0); }
  20% { transform: rotate(26deg) translate3d(10px, -16px, 0); }
  32% { transform: rotate(-32deg) translate3d(-6px, 4px, 0); }
  58% { transform: rotate(-14deg) translate3d(0, 0, 0); }
}

@keyframes smithingSparkFlash {
  0%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  28% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.06); }
  42% { opacity: 0; transform: translate(-50%, -50%) scale(1.84); }
}

@keyframes smithingSparkOne {
  0%, 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-10deg); }
  28% { opacity: 1; transform: translate3d(-4px, -6px, 0) rotate(-34deg); }
  60% { opacity: 0; transform: translate3d(-20px, -42px, 0) rotate(-84deg); }
}

@keyframes smithingSparkTwo {
  0%, 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(12deg); }
  30% { opacity: 0.96; transform: translate3d(6px, -8px, 0) rotate(30deg); }
  62% { opacity: 0; transform: translate3d(30px, -36px, 0) rotate(96deg); }
}

@keyframes smithingSparkThree {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  32% { opacity: 0.82; transform: translate3d(2px, -12px, 0) rotate(-18deg); }
  64% { opacity: 0; transform: translate3d(10px, -56px, 0) rotate(-74deg); }
}

@keyframes smithingRewardGlow {
  0% { opacity: 0.2; transform: translateX(-50%) scale(0.96); }
  30% { opacity: 0.76; transform: translateX(-50%) scale(1.12); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.24); }
}

@keyframes smithingRewardEmber {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); }
  18% { opacity: 1; transform: translate3d(8px, -10px, 0) rotate(22deg) scale(1.12); }
  100% { opacity: 0; transform: translate3d(42px, -46px, 0) rotate(102deg) scale(0.84); }
}

@keyframes smithingRewardAnvil {
  0% { transform: translateX(-50%) scale(1); }
  24% { transform: translateX(-50%) scale(1.05); }
  40% { transform: translateX(calc(-50% - 2px)) scale(1.04); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes smithingRewardHammer {
  0% { transform: rotate(32deg) translate3d(0, 0, 0); }
  24% { transform: rotate(-2deg) translate3d(-10px, -24px, 0) scale(1.06); }
  46% { transform: rotate(48deg) translate3d(7px, 6px, 0) scale(1.04); }
  100% { transform: rotate(26deg) translate3d(1px, 2px, 0); }
}

@keyframes smithingRewardFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.14); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.32); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

@keyframes smithingRewardSparkLeft {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-12deg) scale(0.8); }
  16% { opacity: 1; transform: translate3d(-8px, -10px, 0) rotate(-30deg) scale(1.14); }
  100% { opacity: 0; transform: translate3d(-38px, -52px, 0) rotate(-100deg) scale(0.86); }
}

@keyframes smithingRewardSparkRight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(12deg) scale(0.8); }
  16% { opacity: 0.96; transform: translate3d(10px, -8px, 0) rotate(24deg) scale(1.12); }
  100% { opacity: 0; transform: translate3d(42px, -40px, 0) rotate(100deg) scale(0.84); }
}

@keyframes smithingRewardSparkTop {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8); }
  18% { opacity: 0.9; transform: translate3d(0, -12px, 0) rotate(-12deg) scale(1.08); }
  100% { opacity: 0; transform: translate3d(12px, -64px, 0) rotate(-82deg) scale(0.82); }
}

@keyframes craftingBenchGlow {
  0%, 100% { opacity: 0.16; transform: translateX(-50%) scale(0.95); }
  46% { opacity: 0.38; transform: translateX(-50%) scale(1.03); }
}

@keyframes craftingShavingOne {
  0%, 18%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg) scaleX(0.8); }
  36% { opacity: 0.92; transform: translate3d(16px, -4px, 0) rotate(-8deg) scaleX(1.12); }
  72% { opacity: 0; transform: translate3d(42px, -10px, 0) rotate(-28deg) scaleX(0.9); }
}

@keyframes craftingShavingTwo {
  0%, 28%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-6deg) scaleX(0.75); }
  46% { opacity: 0.78; transform: translate3d(12px, -3px, 0) rotate(10deg) scaleX(1.08); }
  76% { opacity: 0; transform: translate3d(34px, -9px, 0) rotate(32deg) scaleX(0.88); }
}

@keyframes craftingBenchShift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  34% { transform: translateX(calc(-50% - 1px)) translateY(0); }
  58% { transform: translateX(calc(-50% + 1px)) translateY(-1px); }
}

@keyframes craftingWorkStroke {
  0%, 100% { transform: rotate(-18deg) translate3d(-8px, 2px, 0); }
  18% { transform: rotate(-10deg) translate3d(-3px, 0, 0); }
  42% { transform: rotate(2deg) translate3d(14px, -4px, 0); }
  58% { transform: rotate(-3deg) translate3d(20px, -5px, 0); }
  76% { transform: rotate(-16deg) translate3d(2px, 2px, 0); }
}

@keyframes craftingTapPulse {
  0%, 20%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  42% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.68); }
  68% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}

@keyframes craftingChipOne {
  0%, 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-10deg) scaleX(0.8); }
  40% { opacity: 0.92; transform: translate3d(-8px, -3px, 0) rotate(-18deg) scaleX(1.1); }
  72% { opacity: 0; transform: translate3d(-28px, -10px, 0) rotate(-42deg) scaleX(0.9); }
}

@keyframes craftingChipTwo {
  0%, 30%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg) scaleX(0.8); }
  50% { opacity: 0.8; transform: translate3d(10px, -3px, 0) rotate(16deg) scaleX(1.08); }
  78% { opacity: 0; transform: translate3d(32px, -9px, 0) rotate(38deg) scaleX(0.88); }
}

@keyframes craftingChipThree {
  0%, 34%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scaleX(0.78); }
  54% { opacity: 0.68; transform: translate3d(4px, -5px, 0) rotate(-6deg) scaleX(1.04); }
  80% { opacity: 0; transform: translate3d(18px, -14px, 0) rotate(-26deg) scaleX(0.86); }
}

@keyframes craftingRewardGlow {
  0% { opacity: 0.14; transform: translateX(-50%) scale(0.95); }
  38% { opacity: 0.54; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.22); }
}

@keyframes craftingRewardShaving {
  0% { opacity: 0; transform: translate3d(-4px, 0, 0) rotate(4deg) scaleX(0.78); }
  24% { opacity: 0.96; transform: translate3d(12px, -3px, 0) rotate(-6deg) scaleX(1.16); }
  100% { opacity: 0; transform: translate3d(46px, -10px, 0) rotate(-28deg) scaleX(0.86); }
}

@keyframes craftingRewardBench {
  0% { transform: translateX(-50%) scale(1); }
  32% { transform: translateX(calc(-50% + 2px)) scale(1.04); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes craftingRewardStroke {
  0% { transform: rotate(-18deg) translate3d(-8px, 2px, 0); }
  46% { transform: rotate(1deg) translate3d(22px, -4px, 0) scale(1.04); }
  72% { transform: rotate(-5deg) translate3d(28px, -4px, 0) scale(1.02); }
  100% { transform: rotate(-15deg) translate3d(2px, 2px, 0); }
}

@keyframes craftingRewardTap {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  34% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.58); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes craftingRewardChipLeft {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-10deg) scaleX(0.78); }
  24% { opacity: 0.96; transform: translate3d(-10px, -3px, 0) rotate(-18deg) scaleX(1.12); }
  100% { opacity: 0; transform: translate3d(-34px, -10px, 0) rotate(-44deg) scaleX(0.88); }
}

@keyframes craftingRewardChipRight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg) scaleX(0.78); }
  26% { opacity: 0.9; transform: translate3d(12px, -3px, 0) rotate(16deg) scaleX(1.08); }
  100% { opacity: 0; transform: translate3d(38px, -9px, 0) rotate(40deg) scaleX(0.86); }
}

@keyframes craftingRewardChipTop {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scaleX(0.78); }
  28% { opacity: 0.78; transform: translate3d(4px, -5px, 0) rotate(-6deg) scaleX(1.06); }
  100% { opacity: 0; transform: translate3d(22px, -14px, 0) rotate(-30deg) scaleX(0.84); }
}

@keyframes cookingSteamGlow {
  0%, 100% { opacity: 0.16; transform: translateX(-50%) scale(0.94); }
  48% { opacity: 0.4; transform: translateX(-50%) scale(1.04); }
}

@keyframes cookingSteamOne {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scaleY(0.8); }
  24% { opacity: 0.34; transform: translate3d(-4px, -8px, 0) scaleY(1); }
  60% { opacity: 0.12; transform: translate3d(8px, -30px, 0) scaleY(1.14); }
  100% { opacity: 0; transform: translate3d(-2px, -52px, 0) scaleY(1.18); }
}

@keyframes cookingSteamTwo {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scaleY(0.8); }
  30% { opacity: 0.28; transform: translate3d(4px, -10px, 0) scaleY(1.02); }
  68% { opacity: 0.1; transform: translate3d(-6px, -34px, 0) scaleY(1.18); }
  100% { opacity: 0; transform: translate3d(4px, -56px, 0) scaleY(1.22); }
}

@keyframes cookingPotBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  32% { transform: translateX(-50%) translateY(-2px); }
  54% { transform: translateX(calc(-50% + 1px)) translateY(0); }
}

@keyframes cookingStirMotion {
  0%, 100% { transform: rotate(-6deg) translate3d(0, 0, 0); }
  24% { transform: rotate(18deg) translate3d(8px, -8px, 0); }
  46% { transform: rotate(-18deg) translate3d(-8px, 4px, 0); }
  72% { transform: rotate(4deg) translate3d(2px, -2px, 0); }
}

@keyframes cookingSimmerPulse {
  0%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  30% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.92); }
  56% { opacity: 0; transform: translate(-50%, -50%) scale(1.86); }
}

@keyframes cookingBubbleOne {
  0%, 28%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.56); }
  36% { opacity: 0.92; transform: translate3d(-4px, -6px, 0) scale(1.02); }
  66% { opacity: 0; transform: translate3d(-16px, -34px, 0) scale(0.64); }
}

@keyframes cookingBubbleTwo {
  0%, 24%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.56); }
  34% { opacity: 0.86; transform: translate3d(6px, -8px, 0) scale(0.96); }
  64% { opacity: 0; transform: translate3d(20px, -28px, 0) scale(0.62); }
}

@keyframes cookingBubbleThree {
  0%, 30%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.56); }
  40% { opacity: 0.72; transform: translate3d(2px, -10px, 0) scale(0.88); }
  70% { opacity: 0; transform: translate3d(10px, -42px, 0) scale(0.56); }
}

@keyframes cookingRewardGlow {
  0% { opacity: 0.16; transform: translateX(-50%) scale(0.96); }
  34% { opacity: 0.58; transform: translateX(-50%) scale(1.12); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.26); }
}

@keyframes cookingRewardSteam {
  0% { opacity: 0.1; transform: translate3d(0, 0, 0) scaleY(0.8); }
  24% { opacity: 0.4; transform: translate3d(0, -12px, 0) scaleY(1.12); }
  100% { opacity: 0; transform: translate3d(10px, -56px, 0) scaleY(1.34); }
}

@keyframes cookingRewardPot {
  0% { transform: translateX(-50%) scale(1); }
  30% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes cookingRewardStir {
  0% { transform: rotate(-6deg) translate3d(0, 0, 0); }
  34% { transform: rotate(24deg) translate3d(10px, -10px, 0) scale(1.06); }
  100% { transform: rotate(-20deg) translate3d(-4px, 2px, 0); }
}

@keyframes cookingRewardSimmer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.14); }
  22% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.24); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

@keyframes cookingRewardBubbleLeft {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
  18% { opacity: 1; transform: translate3d(-8px, -10px, 0) scale(1.16); }
  100% { opacity: 0; transform: translate3d(-24px, -44px, 0) scale(0.54); }
}

@keyframes cookingRewardBubbleRight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
  18% { opacity: 0.92; transform: translate3d(10px, -8px, 0) scale(1.12); }
  100% { opacity: 0; transform: translate3d(28px, -38px, 0) scale(0.52); }
}

@keyframes cookingRewardBubbleTop {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.8); }
  18% { opacity: 0.82; transform: translate3d(2px, -12px, 0) scale(1.06); }
  100% { opacity: 0; transform: translate3d(12px, -54px, 0) scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .skill-activity-tool,
  .skill-activity-impact-ring,
  .skill-activity-particle-one,
  .skill-activity-particle-two,
  .skill-activity-particle-three,
  .skill-activity-aura,
  .skill-activity-detail-one,
  .skill-activity-detail-two,
  .skill-activity-bobber,
  .skill-activity-scene-object {
    animation: none;
  }

  .skill-activity-tool {
    transform: rotate(-12deg);
  }

  .skill-activity-impact-ring,
  .skill-activity-particle {
    display: none;
  }

  .skill-activity-aura,
  .skill-activity-detail {
    display: none;
  }
}

.location-npc-panel .npc-list {
  gap: 10px;
}

.location-npc-panel .npc-entry {
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.06);
}

.location-npc-panel .npc-entry:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.resource-list-section,
.smithing-ui,
.recipe-detail {
  min-height: 0;
}

@media (max-width: 768px) {
  .skill-window {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 22px;
  }

  .skill-hero {
    padding: 14px;
    gap: 12px;
  }

  .skill-hero-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .skill-hero-icon {
    width: 30px;
    height: 30px;
  }

  .skill-overview-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .skill-body {
    padding: 12px;
    gap: 12px;
  }

  .game-window {
    min-height: calc(100dvh - 210px);
  }

  .location-skill-switcher {
    position: static;
    order: 98;
    flex-direction: row;
    gap: 8px;
    margin-top: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .skill-switch-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }

  .smithing-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .smithing-content {
    gap: 10px;
  }

  .smithing-recipe-picker {
    grid-template-columns: 1fr;
  }

  .recipe {
    padding: 12px;
    border-radius: 12px;
  }

  .recipe-detail {
    padding: 12px;
    border-radius: 14px;
  }

  .recipe-detail input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
  }

  .location-view-window {
    max-height: none;
  }

  .city-scene-overlay {
    min-height: calc(100dvh - 220px);
  }

  .location-scene-overlay {
    min-height: calc(100dvh - 220px);
  }

  .city-scene-header {
    left: 12px;
    top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .city-scene-tools {
    width: 100%;
  }

  .city-scene-node {
    max-width: min(72vw, 220px);
  }

  .city-scene-node-card {
    min-width: 138px;
    max-width: 176px;
    padding: 8px 10px;
  }

  .city-scene-node-card strong {
    font-size: 13px;
  }

  .location-scene-utilities {
    left: 12px;
    bottom: 12px;
    gap: 8px;
  }

  .location-scene-status-anchor {
    right: 12px;
    bottom: 12px;
    left: 12px;
    justify-content: flex-end;
  }

  .location-scene-status-panel {
    width: min(100%, 400px);
    max-width: min(100%, 400px);
  }

  .location-scene-skill-topline {
    gap: 10px;
  }

  .location-scene-skill-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .location-scene-skill-tool {
    max-width: none;
    text-align: left;
  }

  .location-scene-utility-btn {
    min-height: 46px;
    padding: 9px 12px;
  }

  .location-scene-utility-icon {
    width: 24px;
    height: 24px;
  }

  .location-scene-drawer {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 72px;
    width: auto;
    max-height: min(58vh, 520px);
  }

  .location-scene-drawer.is-anchored {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 72px;
    width: auto;
    max-height: min(58vh, 520px);
  }

  .location-scene-drawer.is-compact {
    top: auto;
    bottom: 72px;
    max-height: min(420px, 58vh);
  }

  .location-scene-drawer.is-running-activity {
    top: auto;
    bottom: 72px;
    max-height: min(360px, 52vh);
  }

  .location-scene-activity-animation-anchor {
    right: 12px;
    top: auto;
    bottom: 72px;
    left: auto;
    transform: none;
    width: min(420px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
  }

  .skill-activity-stage {
    min-height: 220px;
  }

  .location-view-body {
    gap: 10px;
  }

  .location-view-main {
    padding-right: 2px;
  }

  .location-session-loot {
    padding-top: 10px;
    margin-bottom: 0;
  }
  .location-focus-header {
    align-items: stretch;
  }

  .location-mode-switcher {
    width: 100%;
    justify-content: stretch;
  }

  .location-mode-btn {
    flex: 1 1 0;
    padding: 10px 12px;
  }
}

.location-skill-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.28));
}

.skill-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .location-skill-icon {
    width: 22px;
    height: 22px;
  }
}



/* ==================== FINAL STATUS PANEL FIX ==================== */

.location-scene-status-panel {
  padding: 14px 18px 20px 18px !important;   /* mehr Padding rechts + unten */
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(39, 33, 22, 0.94), rgba(18, 15, 10, 0.86));
  border: 1px solid rgba(212, 177, 114, 0.16);
  box-sizing: border-box;
  min-height: 112px;                         /* verhindert zu starkes Zusammenquetschen */
}

.location-scene-skill-summary {
  padding: 0 !important;                     /* wir machen das Layout selbst sauber */
  margin: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(212, 177, 114, 0.1);
}

.location-scene-skill-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;                                 /* wichtiger Abstand zwischen links und rechts */
}

.location-scene-skill-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  margin-bottom: 10px;
}

.location-scene-skill-level {
  font-weight: 700;
  white-space: nowrap;
}

.location-scene-skill-tool {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;                          /* verhindert zu langes Tool */
}

.location-scene-tool-warning {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(246, 197, 74, 0.72);
  border-radius: 8px;
  background: rgba(246, 197, 74, 0.16);
  color: #ffd978;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(44, 31, 8, 0.18) inset;
}

.location-scene-tool-warning.is-hidden {
  display: none;
}

/* XP-Bar */
.location-scene-skill-bar,
.skill-xp-bar {
  margin-top: 8px;
  margin-bottom: 2px;
}