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

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

}

.skill-window {
  width: 720px;
  max-height: 810px;
  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 {
  font-family: var(--font-accent);
  margin: 0;
}

.skill-hero-copy h2,
.recipe-detail h3,
.view-hero-copy h2,
.city-scene-header h2,
.city-scene-kicker,
.location-scene-skill-level,
.location-scene-drawer-head-copy h3,
.location-scene-drawer-copy h3,
.location-scene-drawer-kicker {
  font-family: var(--font-accent);
}

.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;
}

.fishing-bait-reminder {
  color: rgba(235, 207, 143, 0.86);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
}

.fishing-bait-reminder.is-visible {
  animation: fishingBaitReminderFade 10s ease forwards;
}

@keyframes fishingBaitReminderFade {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  16%,
  72% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px);
  }
}

.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);
  }

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

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

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

.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 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


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

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

.processing-shell-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.processing-shell-actions .processing-tab-rail {
  min-width: 0;
  flex: 1 1 auto;
}

.processing-station-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.processing-station-layout.has-repair-sidecar {
  grid-template-columns: minmax(0, 1fr) 270px;
}

.processing-station-main {
  min-width: 0;
}

.processing-repair-sidecar {
  position: sticky;
  top: 0;
  max-height: min(510px, 670px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(212, 177, 114, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(48, 39, 24, 0.72), rgba(18, 14, 9, 0.78)),
    rgba(22, 18, 12, 0.72);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.24),
    inset 1px 0 0 rgba(255, 239, 190, 0.04);
}

.processing-repair-sidecar .repair-item-grid {
  grid-template-columns: 1fr;
}

.processing-repair-sidecar .repair-bay {
  gap: 10px;
}

.processing-repair-sidecar .repair-bay-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 177, 114, 0.12);
}

.processing-repair-sidecar .repair-bay-heading h3 {
  font-size: 20px;
  line-height: 1.05;
}

.processing-repair-sidecar .repair-item-card {
  min-height: 54px;
}

@media (max-width: 700px) {
  .processing-station-layout.has-repair-sidecar {
    grid-template-columns: 1fr;
  }

  .processing-repair-sidecar {
    position: static;
    max-height: 300px;
  }
}

.repair-bay {
  display: grid;
  gap: 14px;
}

.repair-bay-heading h3,
.repair-bay-group h4 {
  margin: 0;
}

.repair-bay-heading p {
  margin: 3px 0 0;
  color: rgba(245, 229, 197, 0.66);
  font-size: 12px;
}

.repair-bay-group {
  display: grid;
  gap: 7px;
}

.repair-bay-group h4 {
  color: rgba(239, 207, 137, 0.82);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.repair-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.repair-item-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 8px;
  overflow: visible;
  border: 1px solid rgba(219, 181, 104, 0.24);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(52, 35, 17, 0.92), rgba(25, 16, 8, 0.94));
  color: #f8ecd4;
  text-align: left;
}

.repair-item-card.is-repairable:hover,
.repair-item-card.is-repairable:focus-visible {
  border-color: rgba(241, 202, 119, 0.72);
  background: linear-gradient(180deg, rgba(75, 50, 22, 0.96), rgba(35, 21, 10, 0.98));
  transform: translateY(-1px);
}

.repair-item-card.is-missing-materials {
  border-color: rgba(174, 86, 65, 0.32);
}

.repair-item-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
}

.repair-item-image {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.repair-item-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.repair-item-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.repair-item-copy small {
  color: rgba(244, 225, 187, 0.68);
}

.repair-item-action {
  position: static;
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: -4px;
  color: rgba(239, 207, 137, 0.86);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
}

.repair-item-card.is-missing-materials .repair-item-action {
  color: rgba(241, 151, 127, 0.82);
}

.repair-item-cost-template {
  display: none !important;
}

.repair-cost-tooltip {
  min-width: 168px;
  max-width: 240px;
  color: var(--ui-text, #f0e5cf);
}

.repair-cost-tooltip .repair-cost-list {
  gap: 4px;
}

.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);
}

.smithing-tab.is-unavailable,
.smithing-tab.is-unavailable:hover {
  color: rgba(205, 196, 174, 0.42);
  background: rgba(28, 24, 18, 0.42);
  border-color: rgba(159, 132, 82, 0.16);
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(0.75);
}

.smithing-tab.is-unavailable::before {
  content: '\1F512';
  margin-right: 5px;
  font-size: 0.82em;
  opacity: 0.7;
}

.processing-tab-feedback {
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(159, 132, 82, 0.3);
  border-radius: 7px;
  color: var(--ui-text-muted);
  background: rgba(24, 19, 13, 0.58);
  font-size: 12px;
  line-height: 1.35;
}


/* =========================
   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: translateX(2px) translateY(1px);
}

.processing-recipe-firewood-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}


/* =========================
   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;
}

.crafting-needle-selector {
  display: grid;
  gap: 6px;
}

.crafting-needle-selector > span {
  color: var(--ui-text-muted);
  font-size: 12px;
}

.crafting-needle-selector select {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--ui-text);
  font: inherit;
}

.crafting-needle-selector select:disabled {
  color: var(--ui-danger);
  opacity: 0.8;
}


/* =========================
   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;
}

.processing-quantity-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.processing-quantity-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.recipe-detail .processing-quantity-input {
  width: 104px;
  min-width: 0;
  height: 42px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  color: #fff;
  font: inherit;
}

.recipe-detail .processing-quantity-input::-webkit-outer-spin-button,
.recipe-detail .processing-quantity-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.recipe-detail .processing-quantity-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.processing-qty-btn {
  min-width: 42px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
}

.processing-quantity-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.processing-qty-preset {
  min-width: 42px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(232, 194, 111, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(125, 83, 31, 0.94), rgba(76, 47, 17, 0.96));
  color: #fff4dd;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.processing-qty-preset:hover,
.processing-qty-preset:focus-visible {
  border-color: rgba(255, 224, 145, 0.9);
  background: linear-gradient(180deg, rgba(167, 116, 45, 0.98), rgba(101, 62, 22, 0.98));
}

.processing-qty-preset.is-max {
  border-color: rgba(174, 208, 113, 0.46);
  background: linear-gradient(180deg, rgba(94, 116, 60, 0.96), rgba(48, 70, 31, 0.98));
  color: #d9f0b8;
  font-weight: 700;
}

.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 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.78;
}

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

.crafting-duration-estimate-hint,
.recipe-detail button.crafting-duration-estimate-hint {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(214, 187, 106, 0.45);
  border-radius: 50%;
  color: rgba(240, 223, 176, 0.92);
  background: rgba(42, 34, 20, 0.72);
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: help;
  flex: 0 0 auto;
}

.crafting-duration-estimate-hint:hover,
.crafting-duration-estimate-hint:focus-visible,
.recipe-detail button.crafting-duration-estimate-hint:hover,
.recipe-detail button.crafting-duration-estimate-hint:focus-visible {
  border-color: rgba(240, 223, 176, 0.75);
  color: #fff6d8;
  background: rgba(62, 50, 28, 0.92);
  outline: none;
}

.processing-failure-estimate {
  border-color: rgba(211, 111, 88, 0.22);
}

.processing-failure-estimate.is-safe {
  color: rgba(216, 240, 184, 0.82);
  border-color: rgba(174, 208, 113, 0.2);
}

.processing-failure-estimate small {
  color: rgba(245, 229, 197, 0.62);
  font-size: 11px;
}

.processing-activity-status {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(219, 181, 104, 0.22);
  border-radius: 9px;
  background: rgba(20, 13, 7, 0.42);
}

.processing-progress-header,
.processing-time-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: rgba(245, 229, 197, 0.72);
  font-size: 12px;
}

.processing-time-row > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.processing-progress-header strong,
.processing-time-row strong {
  color: #fff0c9;
}

.processing-bulk-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(145, 187, 91, 0.42);
  border-radius: 6px;
  background: rgba(74, 105, 38, 0.2);
  color: rgba(224, 241, 191, 0.86);
  font-size: 11px;
}

.processing-bulk-notice strong {
  color: #dff3b8;
  font-size: 12px;
}

.processing-bulk-notice span {
  text-align: right;
}

.processing-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(5, 4, 2, 0.66);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.52);
}

.processing-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8db55c, #d1b76f);
  box-shadow: 0 0 10px rgba(213, 191, 110, 0.42);
  transition: width 360ms ease;
}

.processing-session-warning,
.crafting-session-warning {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-left: 2px solid rgba(235, 171, 86, 0.9);
  background: rgba(104, 58, 18, 0.18);
  color: rgba(255, 221, 160, 0.92);
  font-size: 11px;
  line-height: 1.35;
}

.processing-session-warning span {
  color: rgba(245, 229, 197, 0.68);
}

.crafting-duration-estimate {
  display: grid;
  gap: 3px;
}

.repair-detail select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ui-text);
}

/* Banking sim during non-stack batch crafting (gray/blur progress, prominent bar) */
.processing-activity-status.is-banking .processing-progress-header,
.processing-activity-status.is-banking .processing-progress-track {
  filter: grayscale(0.65) blur(0.8px);
  opacity: 0.5;
  pointer-events: none;
}
.banking-sim {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(40, 30, 18, 0.85);
  border: 1px solid #5c4630;
  border-radius: 4px;
}
.banking-label {
  font-size: 12px;
  color: #d4af7a;
  margin-bottom: 4px;
}
.processing-activity-status .banking-track {
  height: 8px;
  background: #3a2f22;
  border-radius: 999px;
  overflow: hidden;
}
.processing-activity-status .banking-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8a6f3f, #d4af7a);
}
.banking-time {
  font-size: 11px;
  color: #c9a16e;
  text-align: right;
  margin-top: 2px;
}

.repair-cost-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.repair-cost-list .ingredient {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 224, 170, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.repair-cost-list .ingredient.missing {
  color: #f0a898;
  border-color: rgba(240, 120, 100, 0.35);
}

.repair-empty {
  margin: 0;
  color: var(--ui-text-muted);
}


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

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

  font-size: 13px;

  transition: all 0.15s ease;
}

.mysticism-binding {
  display: grid;
  gap: 14px;
}

.mysticism-binding-intro {
  padding: 12px 14px;
  border-left: 3px solid rgba(200, 171, 92, 0.8);
  background: rgba(18, 14, 8, 0.52);
}

.mysticism-binding-intro h3,
.mysticism-binding-intro p,
.mysticism-binding-card h4 {
  margin: 0;
}

.mysticism-binding-intro p {
  margin-top: 5px;
  color: var(--text-muted, #c2b59b);
}

.mysticism-binding-preparations {
  display: grid;
  gap: 7px;
}

.mysticism-binding-preparations h4 {
  margin: 0 0 2px;
}

.mysticism-binding-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mysticism-binding-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(171, 138, 62, 0.42);
  background: rgba(14, 11, 7, 0.72);
}

.mysticism-binding-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mysticism-binding-heading > div {
  min-width: 0;
}

.mysticism-binding-heading h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mysticism-binding-heading span {
  color: #c9b470;
  font-size: 12px;
}

.mysticism-binding-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}

.mysticism-binding-copy {
  min-height: 38px;
  margin: 10px 0 7px;
  color: var(--text-muted, #c2b59b);
  font-size: 13px;
}

.mysticism-binding-effects,
.mysticism-binding-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.mysticism-binding-effects span,
.mysticism-binding-requirements span {
  padding: 3px 6px;
  border: 1px solid rgba(148, 174, 94, 0.28);
  background: rgba(52, 68, 30, 0.28);
  font-size: 11px;
}

.mysticism-binding-action {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}

.mysticism-binding-requirements {
  min-width: 0;
  flex: 1;
}

.mysticism-binding-requirements small {
  flex-basis: 100%;
  color: var(--text-muted, #c2b59b);
}

.mysticism-binding-action button {
  flex: 0 0 auto;
}

.mysticism-binding-complete {
  color: #a9ca68;
}

.mysticism-binding-empty {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
  color: var(--text-muted, #c2b59b);
  background: rgba(14, 11, 7, 0.55);
}

@media (max-width: 1180px) {
  .mysticism-binding-list {
    grid-template-columns: 1fr;
  }
}

#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 {
  position: relative;
  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;
}

.unlock-item .item-icon-badge {
  left: 13px;
  right: auto;
  top: -3px;
}

.unlock-item.passive-health-regen-unlock {
  border-color: rgba(245, 202, 91, 0.18);
  background: rgba(245, 202, 91, 0.055);
}

.unlock-item.passive-health-regen-unlock .unlock-item-icon {
  filter: sepia(0.35) saturate(1.35) brightness(1.08) drop-shadow(0 0 7px rgba(245, 202, 91, 0.28));
}

.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;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  /* Keep labels readable without letting their enlarged layout boxes make
     nearby scene pins collide on compact screens. */
  --scene-ui-scale: var(--ui-user-scale, 1);
}

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

.city-scene-header {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  zoom: var(--scene-ui-scale);
  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 {
  left: -16px;
  width: 54px;
  max-width: 54px;
  min-height: 120px;
  box-sizing: border-box;
  padding: 10px 8px;
  overflow: hidden;
  cursor: pointer;
  transform: none;
  opacity: 0.82;
  justify-content: center;
  align-items: center;
  border-left: 0;
  border-radius: 0 18px 18px 0;
}

.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 {
  width: 100%;
  align-items: center;
  justify-content: center;
}

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

.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-local-tools {
  position: absolute;
  z-index: 30;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.city-scene-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 184, 116, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  min-height: 34px;
  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;
  line-height: 1;
  text-align: center;
  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-district-transition {
  position: absolute;
  z-index: 24;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
  padding: 8px 12px;
  border: 1px solid rgba(214, 184, 116, 0.3);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(27, 21, 14, 0.8);
  color: #f4e7c6;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  cursor: pointer;
}

.city-district-transition::before {
  content: "";
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  opacity: 0.82;
}

.city-district-transition.is-left {
  transform: translateY(-50%);
}

.city-district-transition.is-left::before {
  transform: rotate(180deg);
}

.city-district-transition.is-right {
  transform: translate(-100%, -50%);
}

.city-district-transition.is-top {
  transform: translateX(-50%);
}

.city-district-transition.is-top::before {
  transform: rotate(-90deg);
}

.city-district-transition.is-bottom {
  transform: translate(-50%, -100%);
}

.city-district-transition.is-bottom::before {
  transform: rotate(90deg);
}

.city-district-transition:hover {
  border-color: rgba(224, 199, 135, 0.56);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05)),
    rgba(50, 38, 22, 0.9);
}

.city-scene-overlay.is-district-transitioning .city-scene-map {
  filter: brightness(0.72);
  pointer-events: none;
}

.city-district-travel-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(10, 8, 5, 0.24), rgba(0, 0, 0, 0.48));
  animation: city-district-transition-fade 1.25s ease both;
}

.city-district-travel-card {
  min-width: 240px;
  padding: 14px 18px;
  border: 1px solid rgba(224, 190, 112, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(48, 38, 23, 0.92), rgba(18, 14, 9, 0.92)),
    rgba(18, 14, 9, 0.92);
  color: #f5e7c8;
  text-align: center;
  box-shadow: 0 20px 42px rgba(0,0,0,0.42);
}

.city-district-travel-card span {
  display: block;
  margin-bottom: 4px;
  color: rgba(224, 190, 112, 0.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.city-district-travel-card strong {
  display: block;
  font-size: 18px;
}

@keyframes city-district-transition-fade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

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

.location-arrival-toast {
  position: absolute;
  z-index: 32;
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid rgba(214, 184, 116, 0.28);
  border-radius: 999px;
  background: rgba(20, 16, 10, 0.74);
  color: rgba(245, 229, 190, 0.9);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
  animation: location-arrival-toast 2.4s ease-out both;
}

@keyframes location-arrival-toast {
  0% {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  18%,
  72% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
}

.chronicle-board-node .chronicle-board-sign {
  display: grid;
  place-items: center;
  width: 34px;
  height: 42px;
  color: #dfc889;
  font: 700 22px/1 serif;
  background: linear-gradient(90deg, #3d2b18, #674827 50%, #352313);
  border: 2px solid #8d6b36;
  box-shadow: 0 5px 12px #0009;
}

.chronicle-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #080603bf;
  backdrop-filter: blur(3px);
}

.chronicle-overlay.hidden { display: none; }

.chronicle-board-panel {
  width: min(760px, 94vw);
  max-height: min(720px, 88vh);
  color: #392b1d;
  background: #e5cc91;
  background-image: linear-gradient(#ffffff12 1px, transparent 1px);
  background-size: 100% 30px;
  border: 4px solid #6f4c27;
  border-radius: 7px;
  box-shadow: 0 20px 60px #000d, inset 0 0 40px #8a632a40;
  overflow: hidden;
}

.chronicle-board-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid #795b3180;
}

.chronicle-board-panel header span,
.chronicle-traces > span {
  color: #806333;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.chronicle-board-panel h2,
.chronicle-board-panel h3 { margin: 3px 0 0; }
.chronicle-board-scroll { padding: 10px 22px 24px; overflow: auto; max-height: calc(88vh - 85px); }
.chronicle-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 10px 0 22px; }
.chronicle-stat { padding: 11px 12px; background: #c7a96855; border: 1px solid #896b3c66; border-radius: 6px; }
.chronicle-stat strong { display: block; font-size: 1.2rem; }
.chronicle-stat span { font-size: .78rem; opacity: .8; }
.chronicle-board-entries { display: grid; gap: 8px; }
.chronicle-board-entries p { margin: 0; padding: 9px 12px; background: #fff3; border-left: 3px solid #896b3c; }
.chronicle-board-entries .is-muted { opacity: .65; font-style: italic; }

.chronicle-board-panel { display: flex; flex-direction: column; }
.chronicle-board-panel > header, .notice-board-tabs { flex-shrink: 0; }
.chronicle-board-panel .chronicle-board-scroll { min-height: 0; max-height: none; }
.chronicle-board-scroll[hidden] { display: none; }
.notice-board-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 22px; border-bottom: 1px solid #795b3180; }
.notice-board-intro { font-style: italic; opacity: .8; }
.notice-board-note { padding: 12px 14px; margin: 10px 0; background: #fff3; border-left: 3px solid #896b3c; overflow-wrap: anywhere; }
.notice-board-note p { margin: 7px 0 0; line-height: 1.5; }
.chronicle-board-node.has-unread-notices .chronicle-board-sign { outline: 2px solid #f5d780; box-shadow: 0 0 14px #efc25da0; animation: notice-board-glow 2.6s ease-in-out infinite; }
@keyframes notice-board-glow { 50% { box-shadow: 0 0 23px #efc25ddd; } }
@media (prefers-reduced-motion: reduce) { .chronicle-board-node.has-unread-notices .chronicle-board-sign { animation: none; } }
@media (max-width: 560px) { .chronicle-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .notice-board-tabs { padding-inline: 12px; } }

.chronicle-traces {
  position: absolute;
  z-index: 18;
  left: auto;
  right: 18px;
  bottom: 18px;
  width: min(390px, calc(100% - 36px));
  padding: 10px 13px;
  color: #ded1b4;
  background: #0d0a07c9;
  border: 1px solid #82653366;
  border-radius: 6px;
  pointer-events: auto;
  box-shadow: 0 8px 22px #0007;
}

.chronicle-traces.is-minimized {
  width: auto;
  padding: 7px 9px 7px 12px;
}

.location-scene-overlay.has-running-agility .chronicle-traces.is-activity-compact {
  right: 18px;
  bottom: 16px;
  width: auto;
  max-width: min(260px, calc(100% - 36px));
}

.chronicle-traces header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.chronicle-traces-toggle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  color: #ded1b4;
  background: #332718cc;
  border: 1px solid #82653388;
  border-radius: 4px;
  font: 700 16px/1 sans-serif;
  cursor: pointer;
}

.chronicle-traces-toggle:hover,
.chronicle-traces-toggle:focus-visible {
  color: #fff4d5;
  border-color: #b9904f;
}

.chronicle-traces p { margin: 4px 0 0; font-size: .78rem; font-style: italic; opacity: .9; }
.chronicle-rumor-card .chronicle-board-entries p { color: #ddd0b5; background: #100d0870; }

@media (max-width: 680px) {
  .chronicle-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chronicle-overlay { padding: 10px; }
  .chronicle-traces { bottom: 10px; left: 10px; right: 10px; width: auto; }
}

.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(var(--canvas-visible-width, 1920px) - 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,
.skill-view-city-scene .city-district-transition[data-scene-draggable] {
  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;
}

/* Landmark locations use a proper place icon and a light wayfinder strip
   instead of the old closed "speech bubble" treatment. POIs and raw skill
   spots keep the small map dot above. */
.city-scene-location-landmark {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.86);
  background: #d9bf86;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.24), 0 0 18px rgba(214, 184, 116, 0.22);
}

.city-scene-location-landmark-icon {
  display: none;
}

.city-scene-node.has-location-landmark {
  gap: 9px;
}

.city-scene-node.has-location-landmark .city-scene-location-landmark {
  width: 54px;
  height: 54px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.city-scene-node.has-location-landmark .city-scene-location-landmark-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.city-scene-node.has-location-landmark .city-scene-node-card {
  min-width: 148px;
  padding: 6px 24px 6px 3px;
  gap: 1px;
  border-left-color: rgba(222, 187, 115, 0.34);
}

.city-scene-node.has-location-landmark .city-scene-node-card strong {
  color: #fff0d0;
}

.city-scene-node.has-location-landmark .city-scene-node-meta {
  margin-top: 3px;
}

.city-scene-node.has-location-landmark .city-scene-node-icon {
  width: 18px;
  height: 18px;
}

.city-scene-node-card {
  min-width: 172px;
  max-width: 220px;
  /* Scale the label paint only. `zoom` changes the flex item's measured
     width, which moves the whole pin away from its authored scene position. */
  zoom: 1;
  transform: scale(var(--scene-ui-scale));
  transform-origin: left center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 24px 5px 8px;
  border: 0;
  border-left: 1px solid rgba(222, 187, 115, 0.3);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(42, 30, 17, 0.9) 0%, rgba(35, 25, 15, 0.82) 38%, rgba(25, 18, 11, 0.48) 64%, rgba(15, 12, 8, 0) 100%) !important;
  box-shadow: none;
  backdrop-filter: blur(5px);
  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.is-near-right .city-scene-node-card {
  transform-origin: right center;
}

.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: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.city-scene-skill-icon {
  padding: 0;
}

.city-scene-quest-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.city-scene-quest-icon.is-turn-in {
  background: transparent;
  border: 0;
}

.city-scene-quest-icon.is-daily {
  filter:
    drop-shadow(0 0 6px rgba(94, 179, 247, 0.7))
    hue-rotate(165deg)
    saturate(1.15);
}

.location-scene-return-menu-item .quest-marker-inline,
.map-label .quest-marker-inline,
.greenford-pilot-destinations .quest-marker-inline,
.greenford-pilot-travel .quest-marker-inline {
  display: inline-flex;
  flex-direction: row;
  flex: 0 0 auto;
  vertical-align: middle;
  margin-inline-start: 5px;
}

.location-scene-return-menu-item .quest-marker-inline img,
.map-label .quest-marker-inline img,
.greenford-pilot-destinations .quest-marker-inline img,
.greenford-pilot-travel .quest-marker-inline img {
  width: 18px;
  height: 20px;
}

.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-hidden-discovery .city-scene-node-dot {
  border-color: #e4bf58;
  background: radial-gradient(circle, #fff2aa 0%, #b78725 62%, #60400f 100%);
  box-shadow: 0 0 0 4px rgba(213, 164, 49, 0.2), 0 0 18px rgba(244, 199, 82, 0.72);
}

.city-scene-node.is-hidden-discovery .city-scene-node-card {
  border-color: rgba(211, 166, 60, 0.76);
}

.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: scale(var(--scene-ui-scale));
  border-left-color: rgba(238, 207, 132, 0.66);
  background: linear-gradient(90deg, rgba(54, 39, 21, 0.94) 0%, rgba(43, 31, 18, 0.84) 38%, rgba(29, 21, 12, 0.5) 64%, rgba(15, 12, 8, 0) 100%) !important;
  box-shadow: none;
  filter: brightness(1.04);
}

.city-scene-node.is-locked .city-scene-node-dot {
  border-color: rgba(178, 178, 168, 0.62);
  background: #77766f;
  box-shadow: 0 0 0 4px rgba(125, 125, 118, 0.15);
}

.city-scene-node.is-locked .city-scene-node-card,
.city-scene-node.is-locked:hover .city-scene-node-card,
.city-scene-node.is-locked:focus-visible .city-scene-node-card {
  position: relative;
  opacity: 0.76;
  filter: grayscale(0.82) saturate(0.2) brightness(0.86);
  border-left-color: rgba(171, 169, 157, 0.42);
}

.location-scene-node-lock {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 13px;
  line-height: 1;
  color: rgba(226, 224, 211, 0.92) !important;
  filter: grayscale(1);
}

.location-scene-locked-node-copy p {
  margin: 0;
  color: rgba(243, 234, 214, 0.8);
}

.location-scene-locked-node-copy small {
  color: rgba(224, 199, 145, 0.84);
}

.city-scene-node.has-location-landmark:hover .city-scene-node-card,
.city-scene-node.has-location-landmark:focus-visible .city-scene-node-card {
  transform: scale(var(--scene-ui-scale));
  border-color: rgba(238, 207, 132, 0.66);
  background: linear-gradient(90deg, rgba(54, 39, 21, 0.94) 0%, rgba(43, 31, 18, 0.84) 38%, rgba(29, 21, 12, 0.5) 64%, rgba(15, 12, 8, 0) 100%) !important;
  box-shadow: none;
}

.city-scene-node.has-location-landmark:hover .city-scene-location-landmark,
.city-scene-node.has-location-landmark:focus-visible .city-scene-location-landmark {
  border-color: rgba(255, 225, 151, 0.9);
  filter: brightness(1.08);
}

.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%);
  /* Scene menus must be able to extend across the persistent bottom chrome.
     Keep them below modal overlays (1000+) and the top bar (3200). */
  z-index: 900;
  display: block;
}

.city-gate-button {
  zoom: var(--scene-ui-scale);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
  box-shadow: none;
  backdrop-filter: none;
  transition: filter 0.14s ease;
}

.city-gate-button:hover,
.city-gate-button:focus-visible,
.city-gate-button:active {
  transform: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.city-gate-icon {
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.city-gate-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 146px;
  padding: 4px 14px 6px;
  text-align: center;
  border-left: 0;
  border-top: 1px solid rgba(222, 187, 115, 0.3);
  background: linear-gradient(90deg, rgba(15, 12, 8, 0), rgba(31, 22, 13, 0.72) 24%, rgba(42, 30, 17, 0.82) 50%, rgba(31, 22, 13, 0.72) 76%, rgba(15, 12, 8, 0));
  backdrop-filter: blur(5px);
}

.city-gate-button:hover .city-gate-copy,
.city-gate-button:focus-visible .city-gate-copy {
  border-top-color: rgba(238, 207, 132, 0.66);
  background: linear-gradient(90deg, rgba(15, 12, 8, 0), rgba(38, 27, 15, 0.76) 24%, rgba(54, 39, 21, 0.9) 50%, rgba(38, 27, 15, 0.76) 76%, rgba(15, 12, 8, 0));
}

.city-gate-button:hover .city-gate-icon,
.city-gate-button:focus-visible .city-gate-icon {
  filter: brightness(1.1) drop-shadow(0 4px 7px rgba(0, 0, 0, 0.44));
}

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

.city-gate-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  transform: translateX(var(--city-gate-menu-shift-x, 0px));
  zoom: var(--scene-ui-scale);
  min-width: 240px;
  max-width: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(216, 177, 103, 0.42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0%, rgba(210, 166, 84, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(57, 39, 19, 0.97), rgba(25, 16, 8, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 231, 174, 0.1);
  backdrop-filter: blur(8px);
}

.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;
  width: 100%;
  min-width: 0;
  gap: 1px;
  padding: 8px 10px;
  border: 0;
  border-left: 2px solid rgba(219, 181, 104, 0.18);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 235, 187, 0.07), rgba(255, 235, 187, 0.02) 62%, transparent);
  color: #f7ebd0;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, filter 140ms ease;
}

.city-gate-menu-item:hover,
.city-gate-menu-item:focus-visible {
  transform: none;
  border-left-color: rgba(245, 208, 130, 0.82);
  background: linear-gradient(90deg, rgba(255, 227, 164, 0.16), rgba(255, 227, 164, 0.05) 62%, transparent);
  box-shadow: none;
  filter: brightness(1.06);
}

.city-gate-menu-item span,
.city-gate-menu-item small {
  color: rgba(242, 225, 190, 0.62);
}

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

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

.location-scene-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  /* Override the generic .game-window 864px cap. The cap is measured against
     the physical browser viewport while this scene lives in the scaled game
     canvas, so it compresses node percentage coordinates vertically. */
  max-height: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.location-scene-overlay {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: visible;
  --scene-ui-scale: var(--ui-user-scale, 1);
}

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

.location-scene-return-anchor {
  position: absolute;
  left: 18px;
  top: 22px;
  z-index: 4;
  zoom: var(--scene-ui-scale);
  width: 138px;
}

.location-scene-return-door {
  position: relative;
  z-index: 2;
  width: clamp(112px, 173px, 138px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: none !important;
  background-color: transparent !important;
  cursor: pointer;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
  filter: none;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.location-scene-return-door-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.16s ease, transform 0.18s ease, filter 0.18s ease;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.46));
}

.location-scene-return-door .is-open {
  opacity: 0;
  transform: scale(1.01);
}

.location-scene-return-door:hover .is-closed,
.location-scene-return-door:focus-visible .is-closed {
  opacity: 0;
}

.location-scene-return-door:hover .is-open,
.location-scene-return-door:focus-visible .is-open {
  opacity: 1;
  transform: scale(1.035);
  filter: brightness(1.08);
}

.location-scene-return-door:focus-visible {
  outline: 2px solid rgba(241, 209, 128, 0.85);
  outline-offset: 3px;
  border-radius: 10px;
}

.location-scene-return-door:hover,
.location-scene-return-door:active,
.location-scene-return-door:disabled {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.location-scene-return-menu {
  position: absolute;
  left: 100%;
  top: 12px;
  z-index: 5;
  width: 310px;
  max-height: min(520px, calc(var(--canvas-visible-height, 1080px) - 128px));
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(216, 177, 103, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0%, rgba(210, 166, 84, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(57, 39, 19, 0.97), rgba(25, 16, 8, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 231, 174, 0.1);
  overflow-y: auto;
}

.location-scene-return-anchor:hover .location-scene-return-menu,
.location-scene-return-anchor:focus-within .location-scene-return-menu,
.location-scene-return-menu.is-open {
  display: flex;
}

.location-scene-return-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-left: 2px solid rgba(219, 181, 104, 0.18);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 235, 187, 0.07), rgba(255, 235, 187, 0.02) 62%, transparent);
  color: #f7ebd0;
  text-align: left;
}

.location-scene-return-menu-item.is-outskirts {
  border-left-color: rgba(142, 175, 103, 0.34);
}

.location-scene-return-menu-item:hover,
.location-scene-return-menu-item:focus-visible {
  transform: none;
  border-left-color: rgba(245, 208, 130, 0.82);
  background: linear-gradient(90deg, rgba(255, 227, 164, 0.16), rgba(255, 227, 164, 0.05) 62%, transparent);
  box-shadow: none;
}

.location-scene-return-menu-item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.location-scene-return-menu-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-scene-return-menu-item small {
  color: rgba(242, 225, 190, 0.62);
}

.location-scene-return-menu-item em {
  flex: 0 0 auto;
  font-style: normal;
  color: rgba(198, 225, 148, 0.86);
}

.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-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-gathering-running .location-scene-node.is-running {
  pointer-events: none;
  animation: locationSceneInactiveNodeFade 2.6s ease forwards;
}

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

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

.location-scene-utilities {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 4;
  zoom: var(--scene-ui-scale);
  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;
  zoom: var(--scene-ui-scale);
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.location-scene-status-panel {
  width: 340px;
  max-width: min(calc(var(--canvas-visible-width, 1920px) - 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(var(--canvas-visible-width, 1920px) - 48px));
  --location-scene-drawer-max-height: min(680px, calc(var(--canvas-visible-height, 1080px) - 48px));
  width: var(--location-scene-drawer-width);
  max-height: min(
    var(--location-scene-drawer-max-height),
    var(--location-scene-drawer-available-height, calc(100% - 48px))
  );
  z-index: 120;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.location-scene-drawer.is-station {
  --location-scene-drawer-width: min(560px, calc(var(--canvas-visible-width, 1920px) - 48px));
  --location-scene-drawer-max-height: min(720px, calc(var(--canvas-visible-height, 1080px) - 48px));
  width: var(--location-scene-drawer-width);
}

.location-scene-drawer.is-cooking-station,
.location-scene-drawer.is-processing-station {
  --location-scene-drawer-width: min(860px, calc(var(--canvas-visible-width, 1920px) - 48px));
}

.location-scene-drawer.is-farming {
  --location-scene-drawer-width: min(1240px, calc(var(--canvas-visible-width, 1920px) - 48px));
  --location-scene-drawer-max-height: min(760px, calc(var(--canvas-visible-height, 1080px) - 48px));
}

.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(var(--canvas-visible-height, 1080px) - 48px));
  max-height: var(--location-scene-drawer-max-height);
}

.location-scene-drawer.is-anchored {
  /* The drawer is positioned inside the main scene already. Adding the
     sidebar width here a second time pushed every gathering interaction
     roughly 236px to the right of its scene node. */
  left: clamp(12px, var(--location-scene-drawer-x), 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 {
  zoom: var(--scene-ui-scale);
  width: 100%;
  max-height: var(--location-scene-drawer-available-height, 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 {
  height: 100%;
  max-width: 100%;
}

.location-scene-drawer-shell.is-cooking-station,
.location-scene-drawer-shell.is-processing-station {
  max-height: var(--location-scene-drawer-available-height, 100%);
  overflow: hidden;
}

/* Unified desktop processing workbench (Smithing, Crafting, Cooking, Mysticism). */
.location-scene-drawer.processing-workbench-window {
  position: absolute;
  right: auto;
  width: min(1380px, calc(100% - 36px));
  height: min(790px, calc(var(--canvas-visible-height, 1080px) - 176px));
  max-width: calc(100% - 36px);
  max-height: none;
  box-sizing: border-box;
  z-index: 340;
  overflow: visible;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.processing-window-shell {
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #e9ddc4;
  border: 1px solid rgba(184, 139, 70, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 25, 19, 0.99), rgba(13, 13, 11, 0.99)),
    radial-gradient(circle at 50% 0%, rgba(134, 96, 42, 0.16), transparent 50%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72), inset 0 0 0 3px rgba(232, 190, 112, 0.035);
}

.processing-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 16px 10px 22px;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid rgba(184, 139, 70, 0.42);
  background: linear-gradient(180deg, rgba(33, 30, 23, 0.98), rgba(20, 19, 15, 0.98));
}

.processing-window-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.processing-window-title img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}

.processing-window-title h3 {
  margin: 0;
  font-family: var(--font-accent);
  color: #f0e3c8;
  font-size: 28px;
  letter-spacing: 0.02em;
}

.processing-window-body,
.processing-window-body > div,
.processing-window-body .processing-ui {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.processing-workbench {
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(300px, 1.52fr) minmax(330px, 1.35fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.processing-workbench-sidebar,
.processing-workbench-recipes,
.processing-workbench-detail {
  min-width: 0;
  min-height: 0;
}

.processing-workbench-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px 16px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border-right: 1px solid rgba(163, 124, 64, 0.28);
  background: rgba(12, 12, 10, 0.38);
}

.processing-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(160, 125, 71, 0.42);
  border-radius: 5px;
  background: rgba(8, 8, 7, 0.7);
}

.processing-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #eadfc9;
  background: transparent;
}

.processing-filter-list,
.processing-category-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.processing-filter-list button,
.processing-category-list button {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 37px;
  padding: 7px 10px;
  color: #ded2bc;
  text-align: left;
  border: 1px solid rgba(134, 106, 65, 0.33);
  border-radius: 4px;
  background: rgba(48, 42, 32, 0.55);
}

.processing-filter-list button {
  grid-template-columns: minmax(0, 1fr);
}

.processing-filter-list button:hover,
.processing-category-list button:hover,
.processing-filter-list button.active,
.processing-category-list button.active {
  color: #fff1c9;
  border-color: rgba(201, 157, 75, 0.72);
  background: linear-gradient(90deg, rgba(103, 119, 38, 0.82), rgba(54, 62, 26, 0.72));
}

.processing-category-list button.is-unavailable {
  opacity: 0.42;
}

.processing-category-list small {
  color: #cbbb9d;
}

.processing-category-icon {
  color: #c9a864;
  font-size: 18px;
  text-align: center;
}

.processing-workbench-sidebar h4 {
  margin: 6px 4px 0;
  color: #bfa66f;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.processing-workbench-recipes {
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  border-right: 1px solid rgba(163, 124, 64, 0.28);
}

.processing-workbench-recipes > header,
.processing-queue-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  color: #cfad68;
  border-bottom: 1px solid rgba(163, 124, 64, 0.24);
  background: rgba(26, 24, 19, 0.72);
}

.processing-workbench-recipes select {
  width: auto;
  min-width: 110px;
  height: 30px;
  padding: 3px 28px 3px 8px;
}

.processing-recipe-list {
  min-height: 0;
  padding: 7px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.processing-recipe-list-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px;
  margin-bottom: 5px;
  border: 1px solid rgba(129, 104, 67, 0.3);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(40, 36, 29, 0.86), rgba(23, 22, 18, 0.84));
}

.processing-recipe-list-row:hover,
.processing-recipe-list-row.is-selected {
  border-color: rgba(201, 156, 73, 0.76);
  background: linear-gradient(90deg, rgba(88, 66, 31, 0.8), rgba(37, 32, 23, 0.9));
}

.processing-recipe-list-row.is-locked {
  opacity: 0.48;
}

.processing-recipe-list-row.is-missing:not(.is-selected) {
  filter: saturate(0.72);
}

.processing-recipe-button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 55px;
  margin: 0;
  padding: 5px 8px;
  color: #eadfc9;
  text-align: left;
  border: 0;
  background: transparent;
}

.processing-recipe-icon,
.processing-queue-row-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.processing-result-icon {
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
}

/* Processing recipes use the same item presentation pipeline as inventory,
   journal and shops. Plain images need the shared material tint explicitly;
   composite icons tint their individual layers instead. */
.processing-result-icon:not(.item-composite-icon) {
  filter: var(--item-extra-filter, none);
}

.processing-result-icon.item-composite-icon {
  width: 42px;
  height: 42px;
}

.processing-recipe-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.processing-recipe-copy strong,
.processing-recipe-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-recipe-copy small {
  color: #aa9d86;
  font-size: 12px;
}

.processing-favorite {
  align-self: stretch;
  margin: 0;
  padding: 0;
  color: #d0ac60;
  font-size: 22px;
  border: 0;
  background: transparent;
}

.processing-workbench-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(10, 10, 9, 0.2);
}

.processing-detail-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px 15px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.processing-detail-scroll.has-fitted-detail {
  padding: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.processing-recipe-detail-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.processing-detail-fixed-header {
  min-width: 0;
  padding: 10px 10px 0;
  background: linear-gradient(180deg, rgba(29, 25, 19, 0.98), rgba(14, 13, 11, 0.94));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  z-index: 2;
}

.processing-detail-fixed-header .processing-recipe-hero {
  margin: 0;
  padding-bottom: 10px;
}

.processing-detail-fixed-header .processing-recipe-hero h3 {
  margin-bottom: 7px;
  font-size: 20px;
}

.processing-detail-fixed-header .processing-recipe-hero-main {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
}

.processing-detail-fixed-header .processing-recipe-hero-icon {
  min-height: 78px;
}

.processing-detail-fixed-header .processing-recipe-hero-icon .processing-result-icon {
  max-width: 62px;
  max-height: 62px;
}

.processing-detail-fixed-header .processing-recipe-hero-icon .processing-result-icon.item-composite-icon {
  width: 62px;
  height: 62px;
}

.processing-detail-fixed-header .processing-recipe-hero-copy p {
  display: -webkit-box;
  margin-bottom: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.processing-detail-fixed-header .processing-recipe-hero-copy dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  font-size: 11px;
}

.processing-detail-fixed-header .processing-recipe-hero-copy dl > div {
  min-width: 0;
}

.processing-detail-fixed-header .processing-recipe-hero-copy dt,
.processing-detail-fixed-header .processing-recipe-hero-copy dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-detail-config-scroll {
  min-height: 0;
  min-width: 0;
  padding: 8px 10px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.processing-detail-section + .processing-detail-section {
  margin-top: 8px;
}

.processing-detail-section > h4 {
  margin: 0 0 5px;
  color: #c7a761;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.processing-detail-options > label,
.processing-option-field label {
  display: block;
  margin: 7px 0 4px;
  color: #d4b77d;
  font-size: 12px;
  font-weight: 700;
}

.processing-detail-options > select,
.processing-option-field select {
  width: 100%;
  min-width: 0;
  margin-bottom: 5px;
}

.processing-detail-options .smithing-detail-material-selector {
  margin-bottom: 0;
}

.processing-detail-options .crafting-needle-selector,
.processing-detail-options .processing-bulk-options,
.processing-detail-options .cooking-station-firewood-panel,
.processing-detail-options .camp-firewood-panel {
  margin-top: 9px;
}

.processing-detail-ingredients .ingredients {
  display: grid;
  gap: 3px;
}

.processing-detail-ingredients .ingredient {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid rgba(255, 224, 170, 0.11);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0.9;
}

.processing-detail-ingredients .ingredient.missing {
  border-color: rgba(240, 107, 107, 0.3);
  background: rgba(105, 30, 25, 0.18);
}

.processing-detail-action-dock {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px 10px 9px;
  border-top: 1px solid rgba(184, 139, 70, 0.38);
  background: linear-gradient(180deg, rgba(28, 25, 19, 0.98), rgba(13, 13, 11, 0.99));
  box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.processing-detail-quantity-line {
  display: grid;
  gap: 4px;
}

.processing-detail-quantity-line > label {
  color: #c7a761;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.processing-detail-action-dock .processing-quantity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.processing-detail-action-dock .processing-quantity-controls,
.processing-detail-action-dock .processing-quantity-presets {
  gap: 4px;
  flex-wrap: nowrap;
}

.processing-detail-action-dock .processing-qty-btn {
  min-width: 34px;
  min-height: 34px;
  padding: 5px 8px;
}

.processing-detail-action-dock .processing-quantity-input {
  width: 76px;
  height: 34px;
  padding: 5px 8px;
}

.processing-detail-action-dock .processing-qty-preset {
  min-width: 34px;
  min-height: 29px;
  padding: 4px 6px;
  font-size: 11px;
}

.processing-detail-action-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.processing-detail-action-summary .crafting-duration-estimate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  padding: 5px 7px;
  font-size: 11px;
}

.processing-detail-action-summary .crafting-duration-estimate small {
  grid-column: 1 / -1;
}

.processing-detail-action-dock > button[id^="start"] {
  width: 100%;
  min-height: 38px;
  margin: 0;
  color: #f3ead2;
  border: 1px solid rgba(145, 174, 101, 0.48);
  background: linear-gradient(180deg, #657949, #4c6339 58%, #33472b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 18px rgba(31, 53, 27, 0.22);
  font-weight: 800;
}

.processing-detail-action-dock > button[id^="start"]:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.smithing-detail-material-selector {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(195, 151, 73, 0.38);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(69, 51, 25, 0.56), rgba(20, 18, 14, 0.82));
}

.smithing-detail-material-selector label {
  color: #d4b77d;
  font-weight: 800;
}

.smithing-detail-material-selector select {
  width: 100%;
  min-width: 0;
}

.processing-detail-scroll .recipe-detail {
  max-width: none;
}

.processing-recipe-hero {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(165, 125, 65, 0.32);
}

.processing-recipe-hero h3 {
  margin: 0 0 10px;
  color: #f0e2c4;
  font-size: 23px;
}

.processing-recipe-hero-main {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
}

.processing-recipe-hero-icon {
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 1px solid rgba(182, 137, 64, 0.5);
  border-radius: 5px;
  background: radial-gradient(circle, rgba(86, 67, 36, 0.42), rgba(10, 10, 9, 0.72));
}

.processing-recipe-hero-icon[data-processing-result-item]:not([data-processing-result-item=""]) {
  cursor: help;
}

.processing-recipe-hero-icon .processing-result-icon {
  max-width: 88px;
  max-height: 88px;
}

.processing-recipe-hero-icon .processing-result-icon.item-composite-icon {
  width: 88px;
  height: 88px;
}

.processing-recipe-hero-copy p {
  margin: 0 0 8px;
  color: #bdb19c;
  line-height: 1.35;
}

.processing-recipe-hero-copy dl {
  display: grid;
  gap: 3px;
  margin: 0;
}

.processing-recipe-hero-copy dl > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.processing-recipe-hero-copy dt {
  color: #bb9857;
}

.processing-recipe-hero-copy dd {
  margin: 0;
  color: #e2d6bd;
  text-align: right;
}

.processing-detail-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: #897e6b;
}

.processing-queue-panel {
  max-height: 275px;
  min-height: 0;
  border-top: 1px solid rgba(184, 139, 70, 0.42);
  background: rgba(14, 14, 12, 0.92);
}

.processing-queue-panel.is-expanded {
  min-height: 116px;
}

.processing-queue-panel > header {
  min-height: 40px;
  padding: 0;
}

.processing-queue-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 7px 12px;
  color: #cfad68;
  text-align: left;
  border: 0;
  background: transparent;
}

.processing-queue-toggle:hover {
  color: #f0d38e;
  background: rgba(101, 77, 39, 0.18);
}

.processing-queue-toggle span {
  font-size: 18px;
  line-height: 1;
}

.processing-queue-panel.is-collapsed .processing-queue-body {
  display: none;
}

.processing-queue-list {
  max-height: 175px;
  padding: 5px 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.processing-queue-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 3px 4px;
  border-bottom: 1px solid rgba(116, 94, 62, 0.24);
}

.processing-queue-row.is-active {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.processing-queue-row.is-blocked {
  color: #df9181;
}

.processing-queue-row-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.processing-queue-row-copy strong,
.processing-queue-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-queue-progress {
  height: 5px;
  margin: 3px 0;
  overflow: hidden;
  border-radius: 4px;
  background: #080907;
}

.processing-queue-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #70852e, #c2b85f);
}

.processing-queue-remove {
  width: 28px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.processing-queue-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.processing-queue-retry {
  min-height: 28px;
  margin: 0;
  padding: 3px 7px;
  font-size: 11px;
}

.processing-queue-stop {
  min-width: 58px;
  min-height: 28px;
  margin: 0;
  padding: 3px 9px;
  border-color: rgba(190, 76, 62, 0.7);
  color: #f0c0b8;
  font-size: 11px;
}

.processing-queue-stop:hover:not(:disabled) {
  border-color: #d56b5b;
  background: rgba(137, 47, 37, 0.42);
  color: #fff0ec;
}

.processing-queue-clear {
  display: block;
  width: 160px;
  min-height: 30px;
  margin: 5px auto 7px;
  padding: 4px 10px;
}

.processing-detail-scroll .cooking-station-firewood-panel,
.processing-detail-scroll .camp-firewood-panel {
  margin-top: 14px;
}

@media (max-width: 1180px) {
  .processing-workbench {
    grid-template-columns: minmax(150px, 0.7fr) minmax(230px, 1.25fr) minmax(270px, 1.2fr);
  }

  .location-scene-drawer.processing-workbench-window {
    width: calc(100% - 36px);
  }
}

.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-shell.is-farming {
  height: 100%;
  overflow: hidden;
}

.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.is-gathering-window .location-scene-drawer-head {
  cursor: move;
  user-select: none;
}

.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;
}

.farming-panel {
  gap: 12px;
  width: 100%;
  max-width: none;
}

.farming-panel select {
  width: 100%;
}

.farming-crop-picker {
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg-panel);
}
.farming-crop-picker summary { padding: 10px 12px; cursor: pointer; }
.farming-crop-picker-options {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}
.farming-crop-picker-options button { text-align: left; white-space: normal; }
.farming-crop-picker-options button[aria-pressed="true"] { border-color: var(--ui-border-strong); background: #70572b; }

.farming-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.88fr) minmax(0, 0.92fr);
  gap: 14px;
  align-items: start;
}

.farming-plot-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.farming-plot-section + .farming-plot-section {
  margin-top: 0;
}

.farming-plot-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(245, 229, 191, 0.82);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.farming-plot-list {
  display: grid;
  gap: 8px;
}

.farming-plot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 70px;
  padding: 8px 10px;
  border: 1px solid rgba(197, 154, 72, 0.28);
  border-radius: 8px;
  background: rgba(10, 7, 3, 0.38);
}

.farming-plot-row.is-ready {
  border-color: rgba(171, 228, 92, 0.58);
  background: rgba(64, 92, 24, 0.24);
}

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

.farming-plot-main > div {
  min-width: 0;
}

.farming-plot-main strong,
.farming-plot-main span {
  display: block;
}

.farming-plot-main span {
  color: rgba(245, 229, 191, 0.72);
  font-size: 12px;
}

.farming-plot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  color: rgba(245, 229, 191, 0.64);
}

.farming-plot-tags b {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(197, 154, 72, 0.14);
  color: rgba(245, 229, 191, 0.78);
  font-size: 11px;
  font-weight: 700;
}

.farming-plot-tags b.is-warning {
  color: #ffd28a;
  background: rgba(140, 65, 25, 0.34);
}

.farming-plot-tags .farming-care-status.is-active {
  color: rgba(204, 235, 147, 0.92);
  background: rgba(84, 119, 39, 0.3);
  border: 1px solid rgba(149, 194, 82, 0.24);
}

.farming-plot-tags .farming-care-status.is-inactive {
  color: rgba(245, 229, 191, 0.48);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.farming-plot-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.farming-plot-icon.is-empty {
  display: inline-block;
  border: 1px dashed rgba(197, 154, 72, 0.36);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}

.farming-plot-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 360px;
}

.farming-plot-action-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.farming-fertilizer-select,
.farming-herbicide-select {
  width: 160px;
  min-width: 160px;
  height: 34px;
}

.farming-plot-row[data-plot-type="mushroom"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  padding-block: 10px;
}

.farming-plot-row[data-plot-type="mushroom"] .farming-plot-main {
  align-items: flex-start;
}

.farming-plot-row[data-plot-type="mushroom"] .farming-plot-actions {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  border-top: 1px solid rgba(197, 154, 72, 0.16);
  padding-top: 8px;
}

.farming-plot-row[data-plot-type="mushroom"] .farming-plot-action-group {
  width: 100%;
}

.farming-plot-row[data-plot-type="mushroom"] .farming-fertilizer-select,
.farming-plot-row[data-plot-type="mushroom"] .farming-herbicide-select {
  width: 100%;
  min-width: 0;
}

.farming-compost-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(197, 154, 72, 0.24);
  border-radius: 10px;
  background: rgba(10, 7, 3, 0.28);
}

.farming-compost-panel p {
  margin: 0;
  color: rgba(245, 229, 191, 0.68);
  font-size: 13px;
  line-height: 1.35;
}

.farming-apiary-panel.is-ready {
  border-color: rgba(224, 185, 72, 0.58);
  background: rgba(106, 77, 18, 0.24);
}

.farming-apiary-panel.is-locked {
  opacity: 0.7;
}

.farming-apiary-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.farming-apiary-requirements span,
.farming-apiary-forage {
  padding: 4px 7px;
  border: 1px solid rgba(197, 154, 72, 0.2);
  border-radius: 999px;
  color: rgba(245, 229, 191, 0.76);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
}

.farming-apiary-requirements .is-met {
  color: rgba(204, 235, 147, 0.92);
}

.farming-apiary-requirements .is-missing {
  color: rgba(255, 174, 138, 0.92);
}

.farming-apiary-storage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.farming-apiary-storage span,
.farming-compost-preview {
  padding: 6px 8px;
  border: 1px solid rgba(197, 154, 72, 0.2);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(245, 229, 191, 0.82);
  font-size: 12px;
}

.farming-compost-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 3px;
}

.farming-compost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(197, 154, 72, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.farming-compost-row strong,
.farming-compost-row small {
  display: block;
}

.farming-compost-row small,
.farming-compost-row em {
  color: rgba(245, 229, 191, 0.56);
  font-size: 11px;
  font-style: normal;
}

.farming-compost-row input {
  min-width: 0;
  height: 30px;
}

.farming-compost-output {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(171, 228, 92, 0.24);
  border-radius: 8px;
  background: rgba(64, 92, 24, 0.18);
}

.farming-compost-empty {
  color: rgba(245, 229, 191, 0.58);
  font-size: 13px;
}

.journal-farming-notes {
  margin-top: 16px;
}

.journal-farming-notes h4 {
  margin: 0 0 8px;
  color: rgba(83, 59, 35, 0.78);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camp-firewood-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.camp-firewood-action-row input {
  min-width: 0;
}

/* Camp interactions use the available scene width and scroll inside the window. */
.location-scene-drawer.is-camp {
  --location-scene-drawer-width: min(680px, calc(100% - 24px));
  width: var(--location-scene-drawer-width);
  max-width: calc(100% - 24px);
  max-height: min(var(--location-scene-drawer-max-height), var(--location-scene-drawer-available-height, calc(100% - 24px)));
}

.location-scene-drawer.is-camp .location-scene-drawer-shell {
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  max-height: calc(var(--location-scene-drawer-available-height, 680px) / var(--scene-ui-scale, 1));
  container: camp-panel / inline-size;
}

.location-scene-drawer.is-camp .location-scene-drawer-head { flex: 0 0 auto; padding: 12px 14px; }
.location-scene-drawer.is-camp .location-scene-drawer-body { padding: 12px 14px 14px; overscroll-behavior: contain; }
.location-scene-drawer.is-camp .location-scene-drawer-card { min-width: 0; gap: 12px; }
.location-scene-drawer.is-camp .camp-scene-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.location-scene-drawer.is-camp .camp-scene-actions > button {
  flex: 0 1 auto;
  width: auto;
  min-width: min(150px, 100%);
  max-width: 100%;
  margin: 0;
}
.location-scene-drawer.is-camp :is(button, select, input) { min-width: 0; max-width: 100%; white-space: normal; }
.location-scene-drawer.is-camp .ingredients { margin: 0; flex-wrap: wrap; }
.location-scene-drawer.is-camp .ingredient { min-width: 0; overflow-wrap: anywhere; }

.camp-firewood-workspace.location-scene-drawer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.camp-panel-overview, .camp-panel-controls { display: grid; gap: 10px; min-width: 0; }
.camp-panel-controls label { font-size: 13px; }
.camp-panel-controls select { width: 100%; }
.camp-panel-controls [data-auto-firewood] { min-width: 0; margin-top: 4px; }

@container camp-panel (max-width: 500px) {
  .camp-firewood-workspace.location-scene-drawer-card { grid-template-columns: 1fr; gap: 14px; }
}

.cooking-station-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  align-items: start;
  gap: 12px;
}

.cooking-station-main {
  min-width: 0;
}

.cooking-station-sidecar {
  position: sticky;
  top: 0;
  align-self: start;
}

.cooking-station-firewood-panel {
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(212, 177, 114, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(48, 39, 24, 0.72), rgba(18, 14, 9, 0.78)),
    rgba(22, 18, 12, 0.72);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.24),
    inset 1px 0 0 rgba(255, 239, 190, 0.04);
}

.cooking-station-firewood-panel .location-scene-drawer-copy {
  gap: 3px;
}

.cooking-station-firewood-panel .location-scene-drawer-copy h3 {
  font-size: 20px;
  line-height: 1.05;
}

.cooking-station-firewood-panel .location-scene-drawer-copy p {
  font-size: 12px;
  line-height: 1.35;
}

.cooking-station-firewood-panel .location-scene-drawer-copy .cooking-station-firewood-efficiency {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(113, 201, 138, 0.24);
  border-radius: 999px;
  background: rgba(52, 108, 68, 0.18);
  color: rgba(190, 235, 199, 0.9);
  font-size: 11px;
}

.cooking-station-firewood-panel .ingredients {
  margin: 0;
}

.cooking-station-firewood-credit {
  align-items: baseline;
  border-color: rgba(224, 190, 108, 0.2);
  background:
    linear-gradient(180deg, rgba(83, 62, 29, 0.34), rgba(21, 16, 10, 0.42)),
    rgba(0, 0, 0, 0.16);
}

.cooking-station-firewood-credit strong {
  color: #f4d37c;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(244, 188, 88, 0.18);
}

.cooking-station-firewood-credit span {
  color: rgba(244, 232, 206, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.cooking-station-firewood-credit.is-critical {
  border-color: rgba(238, 92, 74, 0.72);
  background:
    linear-gradient(180deg, rgba(118, 35, 27, 0.5), rgba(35, 13, 10, 0.55)),
    rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 1px rgba(238, 92, 74, 0.14), 0 0 18px rgba(214, 54, 42, 0.12);
}

.cooking-station-firewood-credit.is-critical strong,
.cooking-station-firewood-credit.is-critical span {
  color: #ff7466;
  text-shadow: 0 0 10px rgba(255, 71, 55, 0.28);
}

.quantity-stepper {
  display: grid;
  grid-template-columns: 34px minmax(54px, 1fr) 34px;
  min-width: 130px;
}

.cooking-station-firewood-panel .quantity-stepper-button {
  min-width: 34px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
}

.cooking-station-firewood-panel .quantity-stepper input {
  min-width: 0;
  text-align: center;
  -moz-appearance: textfield;
}

.cooking-station-firewood-panel .quantity-stepper input::-webkit-inner-spin-button,
.cooking-station-firewood-panel .quantity-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.cooking-station-firewood-panel label {
  font-size: 12px;
  color: rgba(244, 232, 206, 0.82);
}

.cooking-station-firewood-panel select,
.cooking-station-firewood-panel input,
.cooking-station-firewood-panel button {
  width: 100%;
  min-height: 30px;
  font-size: 12px;
}

.cooking-station-firewood-panel .camp-firewood-action-row {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.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);
  }

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

.location-view-window {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--canvas-visible-height, 1080px) - 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;
}

.location-active-activity.is-compact-running {
  gap: 8px;
  padding: 14px 16px;
}

.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(var(--canvas-visible-width, 1920px) - 48px));
  max-width: 360px;
  min-height: 260px;
  pointer-events: none;
  /* Relocation must never sweep through a window or expose a stale measured box. */
  transition: none;
}

.location-scene-activity-animation-anchor.is-agility-course {
  top: auto;
  bottom: 76px;
  min-height: 390px;
}

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

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

  .city-gate-menu {
    min-width: min(230px, calc(var(--canvas-visible-width, 1920px) - 28px));
    max-width: min(260px, calc(var(--canvas-visible-width, 1920px) - 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;
}

@media (max-height: 860px) {
  .location-scene-activity-animation-anchor {
    top: auto;
    bottom: 18px;
  }

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

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

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

/* Remaining work on trees/rocks; deliberately quieter than loot and XP. */
.resource-work-feedback {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}
.resource-work-feedback[hidden],
.resource-work-damage[hidden] { display: none; }
.resource-work-bar {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: min(124px, 40cqw);
  height: 10px;
  box-sizing: border-box;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(171, 137, 82, .68);
  border-radius: 2px;
  background: rgba(37, 29, 20, .62);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.resource-work-fill,
.resource-work-trail {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: transform 150ms ease-out;
}
.resource-work-fill { background: linear-gradient(#a2a376, #727c4d); }
.skill-activity-animation-mining .resource-work-fill {
  background: linear-gradient(#b7ad98, #8d8777);
}
.resource-work-trail {
  background: rgba(222, 200, 150, .72);
  transition: transform 340ms ease-out 150ms;
}
.resource-work-feedback.is-reset :is(.resource-work-fill, .resource-work-trail) {
  transition: none;
}
.resource-work-damage {
  position: absolute;
  left: var(--skill-activity-particle-left, 50%);
  bottom: calc(var(--skill-activity-particle-bottom, 100px) + 8px);
  color: #e4d3ac;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(26, 17, 8, .95);
  transform: translateX(-50%);
}
.resource-work-damage.is-impact { animation: resourceWorkImpact 700ms ease-out both; }
@keyframes resourceWorkImpact {
  0% { opacity: 0; transform: translate(-50%, 2px); }
  12%, 40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -25px); }
}
@media (prefers-reduced-motion: reduce) {
  .resource-work-fill, .resource-work-trail { transition: none; }
  .resource-work-damage { display: none; animation: none !important; }
}

.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(var(--woodcutting-contact-left) - 84px);
  --skill-activity-tool-bottom: calc(var(--woodcutting-contact-bottom) - 46px);
  transform-origin: 18% 82%;
}

.skill-activity-tool-woodcutting .skill-activity-tool-image {
  /* Metal axe icons have the blade on the left, away from the trunk.
     Mirror the complete item/composite so its cutting edge points inward. */
  transform: scaleX(-1);
}

.skill-activity-tool-woodcutting.is-stone-axe {
  --skill-activity-tool-left: calc(var(--woodcutting-contact-left) - 74px);
  --skill-activity-tool-bottom: calc(var(--woodcutting-contact-bottom) - 48px);
}

.skill-activity-tool-woodcutting.is-stone-axe .skill-activity-tool-image {
  transform: none;
}

.skill-activity-animation-woodcutting .skill-activity-stage {
  container-type: inline-size;
}

.skill-activity-animation-woodcutting .skill-activity-stage > * {
  --woodcutting-tree-width: min(340px, 82cqw);
  --woodcutting-contact-left: calc(50% - var(--woodcutting-tree-width) * 0.02);
  --woodcutting-contact-bottom: calc(6px + var(--woodcutting-tree-width) * 0.18);
  --skill-activity-impact-left: var(--woodcutting-contact-left);
  --skill-activity-impact-bottom: calc(var(--woodcutting-contact-bottom) - 18px);
  --skill-activity-particle-left: var(--woodcutting-contact-left);
  --skill-activity-particle-bottom: var(--woodcutting-contact-bottom);
}

.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(var(--mining-contact-left) - 3px);
  --skill-activity-tool-bottom: calc(var(--mining-contact-bottom) - 6px);
  --mining-rest-angle: 2deg;
  --mining-lift-angle: 22deg;
  --mining-strike-angle: -30deg;
  --mining-rebound-angle: -16deg;
  transform-origin: 82% 84%;
}

.skill-activity-tool-mining.is-stone-pickaxe {
  --skill-activity-tool-left: calc(var(--mining-contact-left) - 8px);
  --skill-activity-tool-bottom: calc(var(--mining-contact-bottom) + 20px);
  --mining-rest-angle: -24deg;
  --mining-lift-angle: -4deg;
  --mining-strike-angle: -60deg;
  --mining-rebound-angle: -46deg;
}

.skill-activity-tool-mining.is-stone-pickaxe .skill-activity-tool-image {
  transform: scaleX(-1);
}

.skill-activity-tool-smithing {
  /* New icons: broad face at (20,50), grip pivot at (105,108) on 128px.
     At -45deg the broad face points down and touches the anvil, while the
     handle extends to the right. Anchor both to the scaled anvil surface. */
  --skill-activity-tool-left: calc(var(--smithing-contact-left) - 3px);
  --skill-activity-tool-bottom: calc(var(--smithing-contact-bottom) - 1px);
  transform-origin: 82% 84%;
}

.skill-activity-tool-smithing.is-stone-hammer .skill-activity-tool-image {
  /* The older stone icon has its handle on the opposite side. */
  transform: scaleX(-1);
}

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

.skill-activity-tool-crafting-saw {
  --skill-activity-tool-left: calc(50% + 18px);
  --skill-activity-tool-bottom: 70px;
  transform-origin: 50% 55%;
}

.skill-activity-tool-crafting-glass {
  --skill-activity-tool-left: calc(50% + 28px);
  --skill-activity-tool-bottom: 88px;
  transform-origin: 18% 55%;
}

.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;
  /* Keep inventory metal tints (e.g. iron/mithril glassblowing pipe) while
     still applying the scene drop-shadow. A bare filter: list was wiping
     --item-extra-filter from getItemIconPresentation. */
  filter:
    var(--item-extra-filter, none)
    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-stage {
  container-type: inline-size;
}

.skill-activity-animation-mining .skill-activity-stage > * {
  --mining-rock-width: min(274px, 70cqw);
  --mining-contact-left: calc(50% - var(--mining-rock-width) * 0.08);
  --mining-contact-bottom: calc(4px + var(--mining-rock-width) * 0.78);
  --skill-activity-impact-left: var(--mining-contact-left);
  --skill-activity-impact-bottom: calc(var(--mining-contact-bottom) - 18px);
  --skill-activity-particle-left: var(--mining-contact-left);
  --skill-activity-particle-bottom: var(--mining-contact-bottom);
}

.skill-activity-animation-smithing .skill-activity-stage {
  container-type: inline-size;
}

.skill-activity-animation-smithing .skill-activity-stage > * {
  /* cqw keeps vertical contact aligned when the anvil shrinks on mobile. */
  --smithing-anvil-width: min(196px, 52cqw);
  --smithing-contact-left: calc(50% + var(--smithing-anvil-width) * 0.06);
  --smithing-contact-bottom: calc(22px + var(--smithing-anvil-width) * 0.9);
  --skill-activity-impact-left: var(--smithing-contact-left);
  --skill-activity-impact-bottom: calc(var(--smithing-contact-bottom) - 9px);
  --skill-activity-particle-left: var(--smithing-contact-left);
  --skill-activity-particle-bottom: var(--smithing-contact-bottom);
}

.skill-activity-animation-crafting,
.skill-activity-animation-crafting-saw,
.skill-activity-animation-crafting-glass {
  --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-crafting-glass {
  --skill-activity-impact-left: calc(50% - 8px);
  --skill-activity-impact-bottom: 132px;
}

.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-agility .skill-activity-stage {
  min-height: 380px;
}

.agility-course-visual {
  position: absolute;
  inset: 10px 0 auto 0;
  min-height: 365px;
  border: 1px solid rgba(190, 154, 80, 0.56);
  border-radius: 8px;
  background: var(--material-wood-deep);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 230, 160, 0.08);
  overflow: hidden;
}

.agility-course-visual-header {
  position: absolute;
  left: 16px;
  top: 14px;
  right: 152px;
  z-index: 2;
  display: grid;
  gap: 2px;
  pointer-events: none;
}

.agility-course-visual-header span {
  color: #d6b66e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.agility-course-visual-header strong {
  color: #fff1c7;
  font-size: 17px;
  line-height: 1.05;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.62);
}

.agility-course-map {
  position: absolute;
  left: 12px;
  right: 152px;
  bottom: 24px;
  width: calc(100% - 160px);
  height: 248px;
  overflow: visible;
}

.agility-course-path-shadow,
.agility-course-path-base,
.agility-course-segment {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agility-course-path-shadow {
  stroke: rgba(0, 0, 0, 0.62);
  stroke-width: 14;
}

.agility-course-path-base {
  stroke: rgba(104, 81, 42, 0.82);
  stroke-width: 6;
}

.agility-course-segment {
  stroke: rgba(222, 184, 98, 0.74);
  stroke-width: 5;
  stroke-dasharray: 9 7;
  animation: agilityCoursePathMarch 2.4s linear infinite;
}

.agility-course-station {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.76;
}

.agility-course-segment.is-active {
  opacity: 1;
  stroke: #caff7f;
  stroke-width: 7;
}

.agility-course-station.is-active {
  opacity: 1;
  transform: scale(1.08);
}

.agility-course-station circle {
  fill: #2b2317;
  stroke: #ead08b;
  stroke-width: 3;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

.agility-course-station text {
  fill: #ddcfaa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(10, 8, 5, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.agility-course-stage-list {
  position: absolute;
  top: 66px;
  right: 10px;
  bottom: 14px;
  width: 138px;
  display: grid;
  grid-template-rows: repeat(var(--agility-stage-count, 5), minmax(0, 1fr));
  gap: 7px;
}

.agility-course-visual.has-many-stages .agility-course-stage-list {
  gap: 5px;
}

.agility-course-visual.has-many-stages .agility-course-stage-row {
  min-height: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

.agility-course-stage-row {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto 3px;
  column-gap: 7px;
  row-gap: 2px;
  align-content: center;
  align-items: start;
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px 6px;
  border: 1px solid rgba(174, 132, 64, 0.28);
  border-radius: 6px;
  background: rgba(8, 7, 5, 0.36);
  color: #d5c6a4;
  overflow: hidden;
}

.agility-course-stage-row.is-active {
  border-color: rgba(185, 255, 120, 0.58);
  background: rgba(58, 82, 30, 0.5);
  box-shadow: inset 0 0 0 1px rgba(209, 255, 142, 0.1);
}

.agility-course-stage-number {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(214, 182, 110, 0.16);
  border: 1px solid rgba(238, 207, 138, 0.42);
  color: #f5e7bf;
  font-size: 10px;
  font-weight: 900;
}

.agility-course-stage-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  align-self: start;
}

.agility-course-stage-copy strong,
.agility-course-stage-copy em,
.agility-course-stage-purpose {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agility-course-stage-copy strong {
  color: #fff0c2;
  font-size: 10px;
  line-height: 1.1;
}

.agility-course-stage-copy em {
  color: #a99b78;
  font-size: 8.5px;
  font-style: normal;
  line-height: 1.1;
}

.agility-course-stage-purpose {
  grid-column: 1 / -1;
  color: #b8aa84;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.agility-course-stage-meter {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  overflow: hidden;
}

.agility-course-stage-meter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #86e769, #e4ff9c);
  transform-origin: left center;
  transform: scaleX(0);
}

.agility-course-runner-glow {
  fill: rgba(143, 232, 98, 0.22);
  filter: blur(1px) drop-shadow(0 0 10px rgba(148, 242, 93, 0.65));
}

.agility-course-runner {
  fill: #96f25f;
  stroke: #f4ffdb;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(141, 255, 95, 0.86)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.skill-activity-animation-agility.is-reward-pulse .agility-course-segment {
  stroke: #caff7f;
  stroke-width: 7;
}

.skill-activity-animation-agility.is-reward-pulse .agility-course-station circle {
  fill: #475f24;
  stroke: #d9ff93;
}

.skill-activity-animation-agility.is-reward-pulse .agility-course-runner {
  animation: agilityRunnerRewardPulse 0.52s ease-out;
}

.agility-course-station.is-event-station circle {
  fill: #966538;
  stroke: #ffe09a;
  animation: agilityEventStationPulse 0.9s ease-in-out infinite alternate;
}

.agility-course-stage-row.is-event-station {
  border-color: rgba(225, 183, 87, 0.72);
  background: rgba(92, 66, 29, 0.62);
  box-shadow: inset 3px 0 0 rgba(236, 194, 95, 0.78);
}

.agility-course-event-overlay {
  position: absolute;
  z-index: 520;
  left: 50%;
  top: 48%;
  width: min(560px, calc(100% - 48px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(210, 176, 89, 0.72);
  border-radius: 8px;
  background: var(--material-wood-deep);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 230, 160, 0.1);
  pointer-events: auto;
}

.agility-course-event-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #d4c49e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agility-course-event-timer strong {
  color: #fff0c2;
  font-size: 14px;
}

.agility-course-event-overlay.is-quick-window .agility-course-event-timer span {
  color: #b9ed77;
}

.agility-course-event-progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  overflow: hidden;
}

.agility-course-event-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ec956, #e7cc72);
  transform-origin: left center;
  will-change: transform;
}

.agility-course-event-copy {
  display: grid;
  gap: 5px;
}

.agility-course-event-copy strong {
  color: #fff0c2;
  font-size: 20px;
  line-height: 1.1;
}

.agility-course-event-copy span {
  color: #cdbd93;
  font-size: 13px;
  line-height: 1.35;
}

.agility-course-event-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agility-course-event-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  min-width: 0;
  padding: 12px 13px;
  text-align: left;
  border: 1px solid rgba(207, 178, 111, 0.32);
  border-radius: 7px;
  background: rgba(8, 7, 5, 0.46);
  color: #eadcb7;
}

.agility-course-event-choice:hover:not(:disabled) {
  border-color: rgba(232, 204, 137, 0.72);
  background: rgba(85, 67, 34, 0.54);
}

.agility-course-event-choice.is-risky {
  border-color: rgba(197, 92, 65, 0.48);
}

.agility-course-event-choice.is-safe {
  border-color: rgba(142, 182, 87, 0.46);
}

.agility-course-event-choice-kind {
  grid-column: 1 / -1;
  color: #bdab84;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agility-course-event-choice.is-risky .agility-course-event-choice-kind {
  color: #e79375;
}

.agility-course-event-choice.is-safe .agility-course-event-choice-kind {
  color: #b7d981;
}

.agility-course-event-choice > strong {
  overflow: hidden;
  color: #fff0c2;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agility-course-event-choice-meta {
  display: flex;
  gap: 8px;
  color: #d4c49e;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.agility-course-event-choice:disabled {
  cursor: default;
  opacity: 0.48;
}

@keyframes agilityEventStationPulse {
  from {
    filter: drop-shadow(0 0 2px rgba(255, 214, 126, 0.35));
  }
  to {
    filter: drop-shadow(0 0 8px rgba(255, 214, 126, 0.9));
  }
}

.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;
}

/* The axe keeps its continuous swing when reward effects pulse. */

.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;
}

/* Contact at 22% (407 ms): the tree starts reacting on this same frame. */
@keyframes woodcuttingToolSwing {
  0%, 100% { transform: rotate(-28deg); }
  16% { transform: rotate(-62deg); animation-timing-function: cubic-bezier(.55,0,1,.5); }
  22%, 25% { transform: rotate(10deg); animation-timing-function: ease-in-out; }
  32% { transform: rotate(-4deg); }
  52%, 80% { transform: rotate(-28deg); }
}

.skill-activity-animation-woodcutting .skill-activity-scene-tree {
  transform-origin: 50% 94%;
  animation: woodcuttingTreeHit 1.85s ease-out infinite;
}

/* Anchoring near the roots makes the crown move most while the trunk stays planted. */
@keyframes woodcuttingTreeHit {
  0%, 22%, 64%, 100% { transform: translateX(-50%) rotate(0deg) skewX(0deg); }
  25% { transform: translateX(-50%) rotate(-1.1deg) skewX(-1.5deg); }
  32% { transform: translateX(-50%) rotate(.7deg) skewX(1deg); }
  41% { transform: translateX(-50%) rotate(-.4deg) skewX(-.6deg); }
  51% { transform: translateX(-50%) rotate(.2deg) skewX(.25deg); }
}

@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 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: var(--smithing-contact-left);
  bottom: var(--smithing-contact-bottom);
  opacity: 0;
}

.skill-activity-animation-smithing .skill-activity-detail-two {
  left: calc(var(--smithing-contact-left) + 5px);
  bottom: var(--smithing-contact-bottom);
  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;
}

/* Saw recipes: one push/pull stroke, then a short rest before the next cut */
.skill-activity-animation-crafting-saw .skill-activity-aura {
  animation: craftingBenchGlow 2.2s ease-in-out infinite;
}

.skill-activity-animation-crafting-saw .skill-activity-detail-one,
.skill-activity-animation-crafting-saw .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-saw .skill-activity-detail-one {
  left: calc(50% + 10px);
  bottom: 122px;
  animation: craftingSawDustOne 2.05s ease-out infinite;
}

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

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

.skill-activity-animation-crafting-saw .skill-activity-tool {
  animation: craftingSawStroke 2.05s ease-in-out infinite;
}

.skill-activity-animation-crafting-saw .skill-activity-impact-ring {
  border-color: rgba(218, 184, 136, 0.55);
  animation: craftingSawPulse 2.05s ease-out infinite;
}

.skill-activity-animation-crafting-saw .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-saw .skill-activity-particle-one {
  animation: craftingChipOne 2.05s ease-out infinite;
}

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

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

/* Glassblowing: reach toward heat, slow pipe spin, pull back, short rest */
.skill-activity-animation-crafting-glass .skill-activity-aura {
  bottom: 58px;
  width: 210px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 92, 0.28) 0%, rgba(255, 120, 48, 0.1) 46%, rgba(255, 120, 48, 0) 74%);
  animation: craftingGlassGlow 2.4s ease-in-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-detail-one,
.skill-activity-animation-crafting-glass .skill-activity-detail-two {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.95), rgba(255, 140, 60, 0.55));
  box-shadow: 0 0 10px rgba(255, 160, 70, 0.35);
}

.skill-activity-animation-crafting-glass .skill-activity-detail-one {
  left: calc(50% - 6px);
  bottom: 138px;
  animation: craftingGlassSparkOne 2.4s ease-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-detail-two {
  left: calc(50% + 10px);
  bottom: 132px;
  animation: craftingGlassSparkTwo 2.4s ease-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-scene-object {
  animation: craftingGlassHeatShift 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 140, 60, 0.22));
}

.skill-activity-animation-crafting-glass .skill-activity-tool {
  animation: craftingGlassSpin 2.4s ease-in-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-impact-ring {
  border-color: rgba(255, 186, 110, 0.62);
  animation: craftingGlassPulse 2.4s ease-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-particle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.95), rgba(255, 130, 50, 0.55));
  box-shadow: 0 0 8px rgba(255, 150, 70, 0.28);
}

.skill-activity-animation-crafting-glass .skill-activity-particle-one {
  animation: craftingGlassSparkOne 2.4s ease-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-particle-two {
  animation: craftingGlassSparkTwo 2.4s ease-out infinite;
}

.skill-activity-animation-crafting-glass .skill-activity-particle-three {
  animation: craftingGlassSparkThree 2.4s 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 agilityCoursePathMarch {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -36; }
}

@keyframes agilityRunnerRewardPulse {
  0%, 100% { stroke-width: 2; filter: drop-shadow(0 0 8px rgba(141, 255, 95, 0.86)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
  36% { stroke-width: 5; filter: drop-shadow(0 0 14px rgba(196, 255, 145, 1)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
}

@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%, 32%, 100% { transform: translateX(-50%) translateY(0); }
  34% { transform: translateX(calc(-50% - 2px)) translateY(1px); }
  37% { transform: translateX(calc(-50% + 3px)) translateY(-1px); }
  40% { transform: translateX(calc(-50% - 2px)) translateY(1px); }
  44% { transform: translateX(-50%) translateY(0); }
}

@keyframes miningPickStrike {
  0%, 100% { transform: rotate(var(--mining-rest-angle)); }
  22% { transform: rotate(var(--mining-lift-angle)); }
  32% { transform: rotate(var(--mining-strike-angle)); }
  42% { transform: rotate(var(--mining-rebound-angle)); }
  60% { transform: rotate(var(--mining-rest-angle)); }
}

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

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

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

@keyframes miningDustPlume {
  0%, 32%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); }
  38% { 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%, 37.5% { transform: translateX(-50%) scale(1); }
  44% { transform: translateX(calc(-50% - 4px)) scale(1.02); }
  55% { transform: translateX(calc(-50% + 5px)) scale(1.04); }
  68% { transform: translateX(calc(-50% - 4px)) scale(1.03); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes miningRewardStrike {
  0% { transform: rotate(var(--mining-rest-angle)); }
  20% { transform: rotate(var(--mining-lift-angle)); }
  37.5% { transform: rotate(var(--mining-strike-angle)); }
  55% { transform: rotate(var(--mining-rebound-angle)); }
  100% { transform: rotate(var(--mining-rest-angle)); }
}

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

@keyframes miningRewardShardLeft {
  0%, 37.5% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-10deg) scale(0.9); }
  44% { 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%, 37.5% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg) scale(0.9); }
  44% { 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%, 37.5% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); }
  46% { 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(-8deg); }
  24% { transform: rotate(18deg); }
  34% { transform: rotate(-45deg); }
  42% { transform: rotate(-32deg); }
  58% { transform: rotate(-8deg); }
}

@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(-8deg); }
  24% { transform: rotate(24deg); }
  46% { transform: rotate(-45deg); }
  64% { transform: rotate(-30deg); }
  100% { transform: rotate(-8deg); }
}

@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 craftingSawStroke {
  /* Push → pull → short pause before the next cut. Base angle ~75° clockwise. */
  0% { transform: rotate(75deg) translate3d(-22px, 1px, 0); }
  22% { transform: rotate(81deg) translate3d(22px, 3px, 0); }
  44% { transform: rotate(75deg) translate3d(-22px, 1px, 0); }
  58%, 100% { transform: rotate(75deg) translate3d(-22px, 1px, 0); }
}

@keyframes craftingSawPulse {
  0%, 8%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  18% { opacity: 0.28; transform: translate(-50%, -50%) scale(0.72); }
  34% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
  58%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
}

@keyframes craftingSawDustOne {
  0%, 8%, 55%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg) scaleX(0.75); }
  22% { opacity: 0.9; transform: translate3d(-10px, -2px, 0) rotate(-16deg) scaleX(1.05); }
  40% { opacity: 0; transform: translate3d(-24px, -8px, 0) rotate(-28deg) scaleX(0.85); }
}

@keyframes craftingSawDustTwo {
  0%, 12%, 55%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(10deg) scaleX(0.75); }
  28% { opacity: 0.78; transform: translate3d(12px, -2px, 0) rotate(18deg) scaleX(1.05); }
  44% { opacity: 0; transform: translate3d(26px, -8px, 0) rotate(30deg) scaleX(0.85); }
}

@keyframes craftingGlassSpin {
  /* Reach in → slow rotate → pull back → short pause */
  0% { transform: rotate(-28deg) translate3d(4px, 2px, 0); }
  18% { transform: rotate(-12deg) translate3d(-18px, -6px, 0); }
  38% { transform: rotate(18deg) translate3d(-20px, -8px, 0); }
  52% { transform: rotate(-8deg) translate3d(-16px, -5px, 0); }
  66% { transform: rotate(-26deg) translate3d(2px, 2px, 0); }
  78%, 100% { transform: rotate(-28deg) translate3d(4px, 2px, 0); }
}

@keyframes craftingGlassGlow {
  0%, 100% { opacity: 0.22; transform: translateX(-50%) scale(0.96); }
  35% { opacity: 0.42; transform: translateX(-50%) scale(1.04); }
  70% { opacity: 0.28; transform: translateX(-50%) scale(1.01); }
}

@keyframes craftingGlassHeatShift {
  0%, 100% { transform: translateX(-50%) translateY(0); filter: drop-shadow(0 0 10px rgba(255, 140, 60, 0.16)); }
  40% { transform: translateX(calc(-50% - 1px)) translateY(-1px); filter: drop-shadow(0 0 16px rgba(255, 150, 70, 0.28)); }
  70% { transform: translateX(calc(-50% + 1px)) translateY(0); filter: drop-shadow(0 0 12px rgba(255, 140, 60, 0.2)); }
}

@keyframes craftingGlassPulse {
  0%, 12%, 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  28% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.78); }
  48% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes craftingGlassSparkOne {
  0%, 14%, 70%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  28% { opacity: 0.95; transform: translate3d(-6px, -8px, 0) scale(1.05); }
  50% { opacity: 0; transform: translate3d(-14px, -20px, 0) scale(0.7); }
}

@keyframes craftingGlassSparkTwo {
  0%, 20%, 70%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  34% { opacity: 0.85; transform: translate3d(8px, -6px, 0) scale(1); }
  54% { opacity: 0; transform: translate3d(16px, -18px, 0) scale(0.65); }
}

@keyframes craftingGlassSparkThree {
  0%, 24%, 70%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
  40% { opacity: 0.75; transform: translate3d(2px, -10px, 0) scale(1.08); }
  58% { opacity: 0; transform: translate3d(4px, -22px, 0) scale(0.6); }
}

@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(var(--canvas-visible-height, 1080px) - 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(var(--canvas-visible-height, 1080px) - 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: 0;
  }

  .location-scene-overlay {
    min-height: 0;
  }

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

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

  .city-scene-node {
    max-width: min(1382px, 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(520px, calc(100% - 84px));
  }

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

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

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

  .location-scene-activity-animation-anchor {
    right: 12px;
    top: auto;
    bottom: 72px;
    left: auto;
    transform: none;
    width: min(420px, calc(var(--canvas-visible-width, 1920px) - 32px));
    max-width: min(420px, calc(var(--canvas-visible-width, 1920px) - 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 */
.skill-xp-bar {
  margin-top: 8px;
  margin-bottom: 2px;
}
.city-scene-node.has-active-community-project .city-scene-node-card {
  border-color: rgba(238, 193, 91, .92);
  background: linear-gradient(180deg, rgba(74, 52, 22, .94), rgba(34, 27, 18, .94));
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(255, 221, 139, .2),
    0 0 16px rgba(224, 173, 65, .28);
}

.city-scene-node.has-active-community-project .city-scene-node-dot {
  border-color: #f0c765;
  box-shadow: 0 0 0 3px rgba(224, 173, 65, .2), 0 0 14px rgba(238, 193, 91, .55);
}
/* Sickle-only wrist cut; the existing knife reach remains unchanged. */
.skill-activity-animation-survival .skill-activity-tool.skill-activity-tool-sickle {
  /* The hooked blade extends left of the grip during the cut. Anchor the
     grip inside the bush instead of inheriting the knife's outside reach. */
  --skill-activity-tool-left: calc(50% - 52px);
  --skill-activity-tool-bottom: 72px;
  transform-origin: 70% 82%;
  animation: survivalSickleWristCut 2.35s linear infinite;
  will-change: transform;
}
.skill-activity-tool-survival.skill-activity-tool-sickle .skill-activity-tool-image {
  transform: none;
}
@keyframes survivalSickleWristCut {
  0%, 14%, 100% {
    transform: translate3d(0, 0, 0) rotate(12deg);
    animation-timing-function: ease-out;
  }
  25% {
    transform: translate3d(2px, -2px, 0) rotate(38deg);
    animation-timing-function: ease-in;
  }
  34% {
    transform: translate3d(2px, -2px, 0) rotate(44deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  48% {
    transform: translate3d(-3px, 2px, 0) rotate(-54deg);
    animation-timing-function: ease-out;
  }
  58% {
    transform: translate3d(-2px, 3px, 0) rotate(-62deg);
    animation-timing-function: ease-in-out;
  }
  74% {
    transform: translate3d(-1px, 1px, 0) rotate(-16deg);
    animation-timing-function: ease-out;
  }
  88% { transform: translate3d(0, 0, 0) rotate(14deg); }
}

.skill-activity-animation-survival .skill-activity-tool.skill-activity-tool-shovel {
  transform-origin: 55% 88%;
  animation: survivalShovelDig 2.35s ease-in-out infinite;
  will-change: transform;
}
.skill-activity-tool-survival.skill-activity-tool-shovel .skill-activity-tool-image {
  transform: none;
}
@keyframes survivalShovelDig {
  0%, 12%, 100% { transform: translate3d(0, 0, 0) rotate(-18deg); }
  32% { transform: translate3d(4px, 5px, 0) rotate(18deg); }
  48% { transform: translate3d(5px, 8px, 0) rotate(28deg); }
  66% { transform: translate3d(-2px, -4px, 0) rotate(-34deg); }
  82% { transform: translate3d(-1px, -2px, 0) rotate(-24deg); }
}

/* Gathering setup scrolls independently of its always-visible start action. */
.location-scene-drawer.is-gathering-window {
  bottom: auto;
  right: auto;
  width: var(--location-scene-drawer-width);
  max-width: calc(100% - 24px);
  max-height: min(var(--location-scene-drawer-max-height), var(--location-scene-drawer-available-height, calc(100% - 24px)));
  min-height: 0;
}
.location-scene-drawer.is-gathering-window .location-scene-drawer-shell {
  min-height: 0;
  max-height: calc(var(--location-scene-drawer-available-height, 680px) / var(--scene-ui-scale, 1));
}
.location-scene-drawer.is-gathering-window .location-scene-drawer-head {
  flex-shrink: 0;
}
.location-scene-drawer.is-gathering-window .location-scene-drawer-body:has(.location-scene-activity-settings) {
  display: flex;
  overflow: hidden;
  padding: 0;
}
.location-scene-drawer.is-gathering-window .location-scene-drawer-card:has(.location-scene-activity-settings) {
  flex: 1;
  min-height: 0;
  min-width: 0;
  gap: 0;
}
.location-scene-activity-settings {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}
.location-scene-activity-settings > * { flex-shrink: 0; }
.location-scene-activity-actions {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid rgba(212, 177, 114, 0.12);
}
.location-scene-activity-actions .activity-start-btn { width: 100%; }
@media (max-height: 480px) {
  .location-scene-drawer.is-gathering-window .location-scene-drawer-head { padding: 10px 14px 8px; }
  .location-scene-activity-settings { padding: 8px 14px; }
  .location-scene-activity-actions { padding: 8px 14px; }
}

.processing-tool-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.processing-tool-choices button { padding: 7px 10px; border: 1px solid #655334; border-radius: 4px; background: #211c14; color: #dacbaa; cursor: pointer; }
.processing-tool-choices button[aria-pressed="true"] { border-color: #c7a45c; background: #3b3020; }
.processing-tool-choices button:disabled { opacity: .45; cursor: default; }

/* Keep long variant lists cheap to paint without hiding rows from search. */
.processing-recipe-list-row { content-visibility: auto; contain-intrinsic-size: auto 62px; }

.auto-firewood { border-top: 1px solid #685331; margin-top: 14px; padding-top: 14px; }
.auto-firewood fieldset { max-height: 220px; overflow-y: auto; border: 1px solid #685331; margin: 10px 0; }
.auto-firewood label { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.auto-firewood input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.auto-firewood input[type="number"] { width: 90px; }
.auto-firewood p { font-size: 12px; color: #b8ab91; }



/* The open hub reuses the city gate, including its normal scene scaling. */
.open-hub-outskirts .location-scene-return-menu {
  left: auto;
  right: 100%;
  top: auto;
  bottom: 0;
  zoom: var(--scene-ui-scale);
}
.open-hub-outskirts:hover .location-scene-return-menu,
.open-hub-outskirts:focus-within .location-scene-return-menu {
  display: flex;
}

/* Keep editor gestures on the marker; coordinate text must not resize it. */
[data-scene-draggable="location-node"],
.skill-view-city-scene [data-scene-draggable]:not([data-scene-draggable=""]) {
  touch-action: none;
  user-select: none;
  cursor: grab;
}
[data-scene-draggable] .city-scene-coords {
  min-width: 14ch;
  font-variant-numeric: tabular-nums;
}
[data-scene-draggable].is-layout-dragging {
  cursor: grabbing;
  z-index: 100;
}
[data-scene-draggable].is-layout-dragging .city-scene-node-card {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .skill-activity-animation-woodcutting .skill-activity-scene-tree,
  .skill-activity-animation-woodcutting .skill-activity-tool,
  .skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-scene-tree,
  .skill-activity-animation-woodcutting.is-reward-pulse .skill-activity-tool {
    animation: none;
  }
}

/* The forge coal node opens the same storage window layout as cooking firewood. */
.location-scene-drawer.is-fuel-storage .location-scene-drawer-shell {
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  max-height: calc(var(--location-scene-drawer-available-height, 680px) / var(--scene-ui-scale, 1));
}
.location-scene-drawer.is-fuel-storage .location-scene-drawer-head { flex: 0 0 auto; }
.smithing-coal-panel { min-width: 0; color: #ded0ad; }
.smithing-coal-panel p { margin: 0; font-size: 12px; color: #bcaa87; line-height: 1.4; }
.smithing-coal-panel :is(input, select, button) { min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 12px; }
.smithing-coal-panel label { display: grid; gap: 4px; font-size: 12px; }
.smithing-coal-deposit { display: grid; gap: 8px; }
.smithing-coal-deposit :is(select, input) { width: 100%; }
.smithing-coal-auto { display: grid; gap: 8px; border-top: 1px solid rgba(205, 166, 91, .2); padding-top: 12px; }
.smithing-coal-auto input[type='number'] { width: 90px; }
.smithing-coal-auto fieldset { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 6px; border: 1px solid rgba(205, 166, 91, .25); }
.smithing-coal-auto legend { font-size: 12px; }
.smithing-coal-panel .smithing-coal-toggle { display: flex; align-items: center; gap: 6px; }
.smithing-coal-panel input[type='checkbox'] { width: auto; flex: 0 0 auto; margin: 0; }
.smithing-coal-panel [role='status']:empty { display: none; }
.smithing-coal-panel [hidden], [data-smithing-coal-warning][hidden] { display: none !important; }

/* Wild knowledge stays visible even when no weather bonus is active. */
.wild-conditions-panel{margin:0 0 14px;padding:13px;border:1px solid #6b7250;border-radius:8px;background:linear-gradient(135deg,rgba(61,83,44,.4),rgba(25,28,22,.75));color:#e6e2c7;text-align:left}
.wild-conditions-panel header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.wild-conditions-panel header strong{display:block;font-size:15px;color:#d7e5a8}.wild-conditions-panel header small{display:block;margin-top:3px;color:#b6c29c;font-size:11px}.wild-conditions-emblem{font-size:30px;color:#b2d475}.wild-condition{display:flex;gap:10px;padding:9px 0;border-top:1px solid rgba(169,190,122,.2)}.wild-condition>span{font-size:23px;color:#b9d4ac;min-width:26px}.wild-condition strong{font-size:13px}.wild-condition p,.wild-conditions-neutral{margin:5px 0 0;font-size:12px;line-height:1.5;color:#c6c9b6}.wild-conditions-finds{border-top:1px solid rgba(169,190,122,.2);padding-top:10px;font-size:12px}.wild-conditions-find-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px;margin-top:8px}.wild-conditions-find{padding:8px;background:rgba(14,23,11,.5);border:1px solid #59683e;border-radius:5px}.wild-conditions-find>span{display:block;color:#edf1d4;font-size:12px}.wild-conditions-find small{display:block;color:#b8d98e;margin-top:4px;font-size:11px}.wild-conditions-find em{display:block;font-style:normal;color:#d6c590;margin-top:3px}.wild-conditions-note{font-size:10px;line-height:1.5;color:#aeb69b;margin:9px 0 0}.wild-conditions-panel.is-neutral{border-color:#625d4b;background:rgba(32,33,26,.6)}
.peat-camp-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.peat-camp-panel > img {
  align-self: center;
  object-fit: contain;
}
.peat-camp-panel p { margin: 0; }
.peat-camp-panel input { width: 100%; box-sizing: border-box; }
.peat-camp-panel .recipe-ingredients { display: grid; gap: 8px; }

.cooking-mobile-back { display:none; }
.processing-workbench[data-processing-skill="COOKING"] .processing-detail-config-scroll { display:flex; flex-direction:column; }
.processing-workbench[data-processing-skill="COOKING"] .processing-detail-config-scroll > section { flex:0 0 auto; }
.processing-workbench[data-processing-skill="COOKING"] .processing-detail-ingredients { order:0; }
.processing-workbench[data-processing-skill="COOKING"] .processing-detail-options { order:1; }
.processing-workbench[data-processing-skill="COOKING"] .processing-detail-utility { order:2; }
@media (max-width: 900px) {
  .location-scene-drawer[data-processing-window="COOKING"] { height:min(790px, calc(var(--canvas-visible-height, 1080px) - 100px)); }
  .processing-workbench[data-processing-skill="COOKING"] { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
  .processing-workbench[data-processing-skill="COOKING"] .processing-workbench-detail { display:none; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-workbench-sidebar { flex:0 0 auto; gap:7px; padding:10px; max-height:150px; overflow-y:auto; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-workbench-sidebar h4 { display:none; }
  .processing-workbench[data-processing-skill="COOKING"] :is(.processing-filter-list, .processing-category-list) { display:flex; flex-wrap:wrap; gap:5px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-category-list button { width:auto; }
  .processing-workbench[data-processing-skill="COOKING"][data-cooking-selection="true"] { grid-template-rows:minmax(0, 1fr); }
  .processing-workbench[data-processing-skill="COOKING"][data-cooking-selection="true"] :is(.processing-workbench-sidebar, .processing-workbench-recipes) { display:none; }
  .processing-workbench[data-processing-skill="COOKING"][data-cooking-selection="true"] .processing-workbench-detail { display:flex; }
  .processing-workbench[data-processing-skill="COOKING"] .cooking-mobile-back { display:block; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-scroll .processing-recipe-detail-layout { padding:0; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero-main { grid-template-columns:56px minmax(0, 1fr); }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero-icon { min-height:56px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero-icon .processing-result-icon { max-width:44px; max-height:44px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero-copy p { display:none; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero-copy dl { margin:0; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:4px; padding:6px 10px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock > :is(.processing-detail-quantity-line, .processing-detail-action-summary, .error-text, .activity-session-selector) { grid-column:1 / -1; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock .error-text { margin:3px 0; font-size:12px; line-height:1.2; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock > :is(#startCookingBtn, .cooking-mobile-back) { min-height:36px; padding:5px 8px; margin:0; font-size:12px; }
}
@media (max-width: 900px) and (max-height: 520px) {
  .location-scene-drawer[data-processing-window="COOKING"] { height:calc(var(--canvas-visible-height, 520px) - 80px); }
  .location-scene-drawer[data-processing-window="COOKING"] .processing-window-shell { grid-template-rows:42px minmax(0, 1fr); }
  .location-scene-drawer[data-processing-window="COOKING"] .processing-window-head { padding:5px 10px; }
  .location-scene-drawer[data-processing-window="COOKING"] .processing-window-title h3 { font-size:20px; }
  .location-scene-drawer[data-processing-window="COOKING"] .processing-window-title img { width:28px; height:28px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-fixed-header { padding:5px 10px 0; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero { padding-bottom:5px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero h3 { margin:0; font-size:17px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-recipe-hero-main { display:none; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:3px; padding:4px 10px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-summary .crafting-duration-estimate { padding:3px 5px; font-size:10px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock > :is(.processing-detail-quantity-line, .processing-detail-action-summary, .error-text, .activity-session-selector) { grid-column:1 / -1; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-quantity-line > label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock .error-text { margin:0; font-size:11px; line-height:1.2; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock > :is(#startCookingBtn, .cooking-mobile-back) { min-height:34px; padding:4px 8px; margin:0; font-size:12px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-action-dock .processing-quantity-input { min-height:34px; max-height:34px; }
  .processing-workbench[data-processing-skill="COOKING"] .processing-detail-section > h4 { display:none; }
  .processing-workbench[data-processing-skill="COOKING"] .mysticism-ingredient-property { max-width:92px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .processing-workbench[data-processing-skill="COOKING"] .mysticism-ingredient-slot { width:48px; height:48px; padding:4px; }
  .processing-workbench[data-processing-skill="COOKING"] .mysticism-ingredient-slot :is(img, .item-composite-icon) { width:32px; height:32px; }
}