:root {
  --hud-safe-width: 100%;
  --ui-scale: 1;
  --card-category-fallback: #9b9688;
  --card-category-person: #b78359;
  --card-category-source: #87955f;
  --card-category-resource: #c39a49;
  --card-category-food: #d1757d;
  --card-category-action: #74949b;
  --card-category-tool: #91968f;
  --card-category-structure: #c77b50;
  --card-category-enemy: #963f39;
  --card-category-trophy: #a087a4;
  --card-category-title: #303129;
  --card-category-title-inverse: #f7eed6;

  color: #292a22;
  background: #56604d;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

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

body {
  user-select: none;
  -webkit-user-select: none;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
}

[data-dev-only][hidden] {
  display: none !important;
}

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 32%),
    #66745a;
}

.game-shell::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(205 218 177 / 30%), transparent 48%),
    repeating-linear-gradient(9deg, rgb(40 46 34 / 4%) 0 1px, transparent 1px 9px);
  content: "";
  pointer-events: none;
}

.hud-safe-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 90;
  width: min(100%, var(--hud-safe-width));
  pointer-events: none;
  transform: translateX(-50%);
}

.game-header {
  position: absolute;
  top: calc(24px * var(--ui-scale));
  left: calc(30px * var(--ui-scale));
  z-index: 100;
  color: #f3ead3;
  text-shadow: 0 2px 0 rgb(30 33 26 / 35%);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 2px;
  color: #d8cc9c;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 900;
  letter-spacing: 0.24em;
}

.game-header h1 {
  margin: 0;
  font-size: calc(30px * var(--ui-scale));
  font-weight: 900;
  letter-spacing: -0.04em;
}

.day-cycle-hud {
  position: absolute;
  top: calc(18px * var(--ui-scale));
  left: 50%;
  z-index: 120;
  display: grid;
  grid-template-columns: calc(48px * var(--ui-scale)) minmax(190px, calc(252px * var(--ui-scale))) auto;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
  min-height: calc(64px * var(--ui-scale));
  padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border: 2px solid rgb(47 48 40 / 88%);
  border-radius: calc(13px * var(--ui-scale));
  background:
    repeating-linear-gradient(7deg, rgb(85 72 45 / 3%) 0 1px, transparent 1px 8px),
    rgb(241 228 198 / 94%);
  box-shadow: calc(4px * var(--ui-scale)) calc(6px * var(--ui-scale)) 0 rgb(39 41 33 / 20%);
  color: #303129;
  pointer-events: auto;
  transform: translateX(-50%);
}

.day-cycle-hud__sky {
  position: relative;
  width: calc(44px * var(--ui-scale));
  height: calc(44px * var(--ui-scale));
  overflow: hidden;
  border: 2px solid #303129;
  border-radius: 50%;
  background: linear-gradient(180deg, #94b6ba, #e6bd67);
  box-shadow: inset 0 0 0 3px rgb(255 245 214 / 18%);
  transition: background 320ms ease;
}

.day-cycle-hud[data-phase="dusk"] .day-cycle-hud__sky {
  background: linear-gradient(180deg, #897487, #e59058);
}

.day-cycle-hud[data-phase="night"] .day-cycle-hud__sky {
  background: linear-gradient(180deg, #27354e, #576178);
}

.day-cycle-hud__sun,
.day-cycle-hud__moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(19px * var(--ui-scale));
  height: calc(19px * var(--ui-scale));
  border: 2px solid #303129;
  border-radius: 50%;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.24, 1);
}

.day-cycle-hud__sun {
  background: #f2bf4f;
  box-shadow: 0 0 0 4px rgb(242 191 79 / 24%);
  opacity: 1;
  transform: translate(-50%, -50%);
}

.day-cycle-hud__moon {
  border-color: #e5ddbf;
  background: #e5ddbf;
  box-shadow: -5px 1px 0 #34415b inset;
  opacity: 0;
  transform: translate(38%, 72%);
}

.day-cycle-hud[data-phase="dusk"] .day-cycle-hud__sun {
  transform: translate(-50%, -18%);
}

.day-cycle-hud[data-phase="night"] .day-cycle-hud__sun {
  opacity: 0;
  transform: translate(-130%, 75%);
}

.day-cycle-hud[data-phase="night"] .day-cycle-hud__moon {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.day-cycle-hud__readout { min-width: 0; }

.day-cycle-hud__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale));
}

.day-cycle-hud__heading strong {
  font-size: calc(15px * var(--ui-scale));
  font-weight: 950;
}

.day-cycle-hud__heading span,
.day-cycle-hud__readout small {
  color: #665f4f;
  font-size: calc(11px * var(--ui-scale));
  font-weight: 850;
}

.day-cycle-hud__track {
  position: relative;
  height: calc(8px * var(--ui-scale));
  margin: calc(5px * var(--ui-scale)) 0 calc(3px * var(--ui-scale));
  overflow: hidden;
  border: 1px solid #303129;
  border-radius: 999px;
  background: #403f34;
}

.day-cycle-hud__track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, #edc75f 0 70%, #d9825a 70% 80%, #50617b 80% 100%);
  transform: scaleX(var(--day-cycle-progress, 0));
  transform-origin: left center;
}

.day-cycle-hud__track > i {
  position: absolute;
  top: -1px;
  bottom: -1px;
  z-index: 1;
  width: 1px;
  background: rgb(48 49 41 / 72%);
}

.day-cycle-hud__dusk-mark { left: 70%; }
.day-cycle-hud__night-mark { left: 80%; }

.day-cycle-hud__controls {
  display: flex;
  gap: calc(4px * var(--ui-scale));
}

.day-cycle-hud__controls button {
  display: grid;
  min-width: calc(34px * var(--ui-scale));
  min-height: calc(36px * var(--ui-scale));
  padding: 0 calc(6px * var(--ui-scale));
  border: 2px solid #303129;
  border-radius: calc(7px * var(--ui-scale));
  background: #e4d2aa;
  color: #303129;
  font-size: calc(11px * var(--ui-scale));
  font-weight: 950;
  cursor: pointer;
  place-items: center;
}

.day-cycle-hud__controls button[aria-pressed="true"] {
  background: #f2bf4f;
  box-shadow: 0 0 0 3px rgb(242 191 79 / 18%);
}

.day-cycle-hud__lighting-preview {
  position: absolute;
  top: calc(100% + 6px * var(--ui-scale));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(3px * var(--ui-scale));
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: calc(4px * var(--ui-scale));
  border: 2px solid rgb(47 48 40 / 82%);
  border-radius: calc(9px * var(--ui-scale));
  background: rgb(241 228 198 / 94%);
  box-shadow: calc(3px * var(--ui-scale)) calc(4px * var(--ui-scale)) 0 rgb(39 41 33 / 16%);
  transform: translateX(-50%);
}

.day-cycle-hud__lighting-preview > span {
  padding: 0 calc(5px * var(--ui-scale));
  color: #6c624f;
  font-size: calc(10px * var(--ui-scale));
  font-weight: 900;
}

.day-cycle-hud__lighting-preview button {
  min-height: calc(26px * var(--ui-scale));
  padding: 0 calc(8px * var(--ui-scale));
  border: 1px solid #3f4036;
  border-radius: calc(6px * var(--ui-scale));
  background: #e4d2aa;
  color: #303129;
  font-size: calc(10px * var(--ui-scale));
  font-weight: 900;
  cursor: pointer;
}

.day-cycle-hud__lighting-preview button[aria-pressed="true"] {
  background: #7895bd;
  box-shadow: 0 0 0 2px rgb(70 99 139 / 18%);
  color: #f8f1dc;
}

.day-cycle-hud__lighting-scrubber {
  display: grid;
  grid-template-columns: calc(170px * var(--ui-scale)) calc(82px * var(--ui-scale));
  align-items: center;
  gap: calc(6px * var(--ui-scale));
  margin-left: calc(5px * var(--ui-scale));
}

.day-cycle-hud__lighting-scrubber input {
  width: 100%;
  height: calc(22px * var(--ui-scale));
  margin: 0;
  accent-color: #29466f;
  cursor: ew-resize;
}

.day-cycle-hud__lighting-scrubber output {
  color: #3e4653;
  font-size: calc(10px * var(--ui-scale));
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.world {
  --day-cycle-dusk: 0;
  --day-cycle-night: 0;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(205 218 177 / 3%);
  box-shadow: 0 0 0 var(--world-outside-margin, 0) rgb(35 41 31 / 11%);
  isolation: isolate;
  transform-origin: 0 0;
  will-change: transform;
}

.day-cycle-lighting {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.day-cycle-lighting::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgb(250 184 91 / 24%) 0,
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgb(110 61 77 / 32%),
      rgb(66 42 48 / 18%)
    );
  content: "";
  mix-blend-mode: soft-light;
  opacity: var(--day-cycle-dusk);
  pointer-events: none;
  transition: opacity 220ms linear;
}

.day-cycle-lighting::after {
  position: absolute;
  inset: 0;
  background: rgb(27 49 86);
  content: "";
  mix-blend-mode: color;
  opacity: calc(var(--day-cycle-night) * 0.64);
  pointer-events: none;
  transition: opacity 220ms linear;
}

.terrain-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    brightness(calc(1 - var(--day-cycle-night) * 0.23))
    saturate(calc(1 - var(--day-cycle-night) * 0.16))
    contrast(calc(1 + var(--day-cycle-night) * 0.08));
  pointer-events: none;
  shape-rendering: geometricPrecision;
  transition: filter 220ms linear;
}

.terrain-map--raster {
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.world.has-baked-forest .forest-edge {
  display: none;
}

body.is-world-object-tool .world.has-baked-forest .forest-edge {
  display: block;
}

.terrain-map__sea {
  fill: #72a5b3;
}

.terrain-map__sea-ripples {
  fill: url("#terrain-water-ripples");
  opacity: 0.62;
}

#terrain-water-ripples path {
  fill: none;
  stroke: #d8e4d5;
  stroke-linecap: round;
  stroke-width: 5px;
  opacity: 0.66;
}

.terrain-map__coast-bank,
.terrain-map__coast-line,
.terrain-map__river-outline,
.terrain-map__river-bank,
.terrain-map__river-water,
.terrain-map__water-mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.terrain-map__coast-bank {
  stroke: #9b9369;
  stroke-width: 34px;
}

.terrain-map__coast-line {
  stroke: #4a5547;
  stroke-width: 3px;
  opacity: 0.72;
}

.terrain-map__river-outline {
  stroke: #4a5547;
  stroke-width: 58px;
  opacity: 0.68;
}

.terrain-map__river-bank {
  stroke: #9b9369;
  stroke-width: 54px;
}

.terrain-map__river-water {
  stroke: #739fa8;
  stroke-width: 44px;
}

.terrain-map__water-mark {
  stroke: #d7dfd1;
  stroke-width: 3.5px;
  opacity: 0.58;
}

.world-guides {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.world-guides__boundary,
.world-guides__region,
.world-guides__starting-area {
  position: absolute;
  display: block;
}

.world-guides__boundary {
  inset: 1px;
  border: 2px solid rgb(43 48 38 / 58%);
  box-shadow: inset 0 0 0 1px rgb(225 215 173 / 10%);
}

.world-guides__region {
  border-right: 2px dashed rgb(43 48 38 / 46%);
  border-bottom: 2px dashed rgb(43 48 38 / 46%);
}

.world-guides__starting-area {
  top: calc(var(--starting-area-y) + 12px);
  left: calc(var(--starting-area-x) + 12px);
  width: calc(var(--starting-area-width) - 24px);
  height: calc(var(--starting-area-height) - 24px);
  border: 3px dashed rgb(225 211 151 / 88%);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgb(43 48 38 / 16%),
    inset 0 0 28px rgb(216 204 156 / 4%);
}

.world-guides__label {
  position: absolute;
  top: 10px;
  left: 14px;
  padding: 5px 8px;
  border: 1px solid rgb(43 48 38 / 24%);
  border-radius: 999px;
  background: rgb(55 62 47 / 90%);
  color: #f3ead3;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.fog-frontier-pulse {
  position: absolute;
  z-index: 7;
  width: 150px;
  height: 104px;
  border: 5px solid rgb(244 202 77 / 88%);
  border-radius: 48% 52% 45% 55% / 54% 44% 56% 46%;
  box-shadow: 0 0 0 5px rgb(248 224 132 / 18%);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg);
  animation: fog-frontier-guide 1.15s ease-out both;
}

.forest-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* 기존 배치 데이터는 보존하고, 교체용 아트가 준비될 때까지 게임에서만 숨긴다. */
body:not(.is-world-object-tool) .forest-edge {
  display: none;
}

.forest-edge__tree {
  position: absolute;
  display: block;
  width: calc(var(--tree-size) * var(--forest-scale, 1));
  height: auto;
  filter: none;
  opacity: 0.96;
  transform: translate(-50%, -100%) rotate(var(--tree-rotation));
  transform-origin: center bottom;
}

.forest-edge__tree--secondary {
  filter: none;
  opacity: 0.82;
}

.exploration-fog {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  filter:
    url("#exploration-fog-wobble")
    brightness(calc(1 - var(--day-cycle-night) * 0.1))
    saturate(calc(1 - var(--day-cycle-night) * 0.36))
    hue-rotate(calc(var(--day-cycle-night) * 148deg));
  pointer-events: none;
  transition: filter 220ms linear;
}

.fog-filter-definitions {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.exploration-fog__map,
.exploration-fog__wisps {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  pointer-events: none;
}

.exploration-fog__map {
  z-index: 0;
}

.exploration-fog__wisps {
  z-index: 1;
  opacity: 1;
  mix-blend-mode: normal;
}

body.is-world-object-tool .exploration-fog {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .exploration-fog {
    filter: none;
  }
}

.board.is-panning,
.board.is-panning * {
  cursor: grabbing !important;
}

.hud-controls {
  position: absolute;
  top: calc(96px * var(--ui-scale));
  right: calc(30px * var(--ui-scale));
  z-index: 100;
  display: grid;
  justify-items: end;
  gap: calc(8px * var(--ui-scale));
  pointer-events: auto;
}

.challenge-panel {
  position: absolute;
  top: calc(108px * var(--ui-scale));
  left: calc(30px * var(--ui-scale));
  z-index: 110;
  width: calc(390px * var(--ui-scale));
  padding: calc(18px * var(--ui-scale));
  border: 2px solid rgb(47 48 40 / 88%);
  border-radius: calc(13px * var(--ui-scale));
  background:
    repeating-linear-gradient(7deg, rgb(85 72 45 / 3%) 0 1px, transparent 1px 8px),
    rgb(241 228 198 / 94%);
  box-shadow: calc(4px * var(--ui-scale)) calc(6px * var(--ui-scale)) 0 rgb(39 41 33 / 20%);
  color: #303129;
  pointer-events: auto;
}

.challenge-panel__eyebrow,
.challenge-complete__eyebrow {
  margin: 0 0 calc(3px * var(--ui-scale));
  color: #8a7442;
  font-size: calc(12px * var(--ui-scale));
  font-weight: 950;
  letter-spacing: 0.16em;
}

.challenge-panel h2,
.challenge-complete h2 {
  margin: 0;
  font-size: calc(24px * var(--ui-scale));
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.challenge-panel__summary {
  margin: calc(8px * var(--ui-scale)) 0 calc(11px * var(--ui-scale));
  color: #665f4f;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 750;
  line-height: 1.45;
}

.challenge-stage[hidden] {
  display: none;
}

.challenge-recipe {
  display: grid;
  grid-template-columns: auto auto 10px auto 1fr;
  align-items: center;
  gap: calc(5px * var(--ui-scale));
  margin: calc(10px * var(--ui-scale)) 0 0;
  padding: calc(7px * var(--ui-scale));
  border: 1px dashed #6d6858;
  border-radius: calc(7px * var(--ui-scale));
  background: rgb(204 178 111 / 18%);
  color: #4d4a3e;
  font-size: calc(9px * var(--ui-scale));
  font-style: normal;
  font-weight: 900;
}

.challenge-recipe b {
  color: #303129;
  font-size: calc(11px * var(--ui-scale));
}

.challenge-recipe i {
  font-style: normal;
  text-align: center;
}

.challenge-recipe em {
  color: #9c4e3c;
  font-style: normal;
  text-align: right;
}

.challenge-steps {
  display: grid;
  gap: calc(8px * var(--ui-scale));
  margin: 0;
  padding: 0;
  list-style: none;
}

.challenge-steps li {
  display: grid;
  grid-template-columns: calc(30px * var(--ui-scale)) 1fr;
  align-items: center;
  min-height: calc(34px * var(--ui-scale));
  color: #746c5a;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 850;
  line-height: 1.25;
  transition: color 150ms ease, transform 150ms ease;
}

.challenge-steps li > span {
  display: grid;
  width: calc(26px * var(--ui-scale));
  height: calc(26px * var(--ui-scale));
  border: 2px solid #77715e;
  border-radius: 50%;
  font-size: calc(12px * var(--ui-scale));
  place-items: center;
}

.challenge-steps li.is-current {
  color: #303129;
}

.challenge-steps li.is-current > span {
  border-color: #303129;
  background: #f2bf4f;
  box-shadow: 0 0 0 3px rgb(242 191 79 / 18%);
}

.challenge-steps li.is-complete {
  color: #667c49;
}

.challenge-steps li.is-complete > span {
  position: relative;
  border-color: #556a3c;
  background: #8ea461;
  color: transparent;
}

.challenge-steps li.is-complete > span::after {
  position: absolute;
  inset: 0;
  display: grid;
  color: #f5efd9;
  content: "✓";
  font-size: calc(14px * var(--ui-scale));
  font-weight: 1000;
  line-height: 1;
  place-items: center;
  -webkit-text-stroke: calc(0.65px * var(--ui-scale)) currentColor;
}

.challenge-progress {
  height: calc(7px * var(--ui-scale));
  margin: calc(12px * var(--ui-scale)) 0 calc(10px * var(--ui-scale));
  overflow: hidden;
  border: 1px solid #303129;
  border-radius: 99px;
  background: #403f34;
}

.challenge-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #d99a36, #f2bf4f);
  transition: width 240ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.challenge-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(9px * var(--ui-scale));
}

.challenge-panel button,
.challenge-complete button {
  min-height: calc(42px * var(--ui-scale));
  padding: 0 calc(14px * var(--ui-scale));
  border: 2px solid #303129;
  border-radius: calc(7px * var(--ui-scale));
  background: #e4d2aa;
  color: #303129;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 950;
  cursor: pointer;
}

#show-expedition {
  background: #f2bf4f;
}

.display-panel {
  display: grid;
  justify-items: end;
}

.display-panel > summary {
  padding: calc(7px * var(--ui-scale)) calc(11px * var(--ui-scale));
  border: 1px solid rgb(243 234 211 / 38%);
  border-radius: 999px;
  background: rgb(43 48 38 / 42%);
  color: #f3ead3;
  font-size: calc(12px * var(--ui-scale));
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.display-panel > summary::-webkit-details-marker {
  display: none;
}

.display-panel[open] > summary {
  margin-bottom: calc(7px * var(--ui-scale));
  background: rgb(43 48 38 / 72%);
}

.display-panel .display-controls,
.display-panel .tool-links {
  max-width: calc(620px * var(--ui-scale));
}

.display-panel .tool-links {
  justify-content: flex-end;
  margin-top: calc(7px * var(--ui-scale));
}

.challenge-complete {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 420;
  width: min(calc(430px * var(--ui-scale)), calc(100% - 40px));
  padding: calc(22px * var(--ui-scale));
  border: 3px solid #303129;
  border-radius: calc(15px * var(--ui-scale));
  background:
    radial-gradient(circle at 50% 0, rgb(255 222 113 / 28%), transparent 45%),
    #f1e4c6;
  box-shadow:
    calc(7px * var(--ui-scale)) calc(9px * var(--ui-scale)) 0 rgb(39 41 33 / 25%),
    0 0 0 9999px rgb(35 40 31 / 16%);
  color: #303129;
  text-align: center;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: challenge-complete-arrive 360ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.challenge-complete p:not(.challenge-complete__eyebrow) {
  margin: calc(10px * var(--ui-scale)) 0 calc(16px * var(--ui-scale));
  color: #675f4d;
  font-size: calc(13px * var(--ui-scale));
  font-weight: 750;
  line-height: 1.5;
}

.game-over {
  background:
    radial-gradient(circle at 50% 0, rgb(185 79 69 / 24%), transparent 46%),
    #ead8bd;
}

.game-over .challenge-complete__eyebrow {
  color: #a3493f;
}

.camera-help {
  margin: 0;
  padding: calc(7px * var(--ui-scale)) calc(11px * var(--ui-scale));
  border: 1px solid rgb(243 234 211 / 32%);
  border-radius: 999px;
  background: rgb(43 48 38 / 18%);
  color: rgb(243 234 211 / 82%);
  font-size: calc(14px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.display-controls,
.tool-links {
  display: flex;
  gap: calc(7px * var(--ui-scale));
}

.display-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: calc(7px * var(--ui-scale));
  border: 1px solid rgb(243 234 211 / 28%);
  border-radius: calc(9px * var(--ui-scale));
  background: rgb(43 48 38 / 28%);
  box-shadow: 2px 3px 0 rgb(39 41 33 / 12%);
}

.display-controls label {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale));
  color: #f3ead3;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 900;
}

.display-controls select {
  min-height: calc(29px * var(--ui-scale));
  padding: 0 calc(7px * var(--ui-scale));
  border: 1px solid #303129;
  border-radius: calc(6px * var(--ui-scale));
  background: #f1e4c6;
  color: #303129;
  font: 900 calc(14px * var(--ui-scale)) / 1 "Avenir Next", Avenir, sans-serif;
  cursor: pointer;
}

.card {
  --card-art-scale: 1;
  --card-art-x: 0px;
  --card-art-y: 0px;
  --card-art-facing: 1;
  --collection-stack-x: 0px;
  --collection-stack-y: 0px;

  position: absolute;
  width: 128px;
  height: 176px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: grab;
  transform: translate(-50%, -50%)
    rotate(var(--card-rotation, 0deg))
    scale(var(--card-display-scale, 1));
  transform-origin: center;
  translate: var(--collection-stack-x) var(--collection-stack-y);
  touch-action: none;
}

.card:focus-visible .card__paper {
  outline: 4px solid rgb(249 224 117 / 84%);
  outline-offset: 4px;
}

.card.is-pack:focus-visible .pack-deck__card--top {
  outline: 4px solid rgb(249 224 117 / 84%);
  outline-offset: 4px;
}

.card.is-pack {
  cursor: pointer;
  animation: pack-breathe 2.2s ease-in-out infinite;
}

.card.is-dragging {
  z-index: var(--drag-z-index, 10000) !important;
  cursor: grabbing;
  transform: translate(-50%, -54%)
    rotate(calc(var(--card-rotation, 0deg) - 1.5deg))
    scale(var(--card-display-scale, 1))
    scale(1.045);
}

.card.is-rebounding {
  z-index: 9800 !important;
  pointer-events: none;
  animation: invalid-drop-rebound 230ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

.card.is-impact-nudged {
  animation: invalid-target-nudge 210ms ease-out both;
}

.card.is-relationship-bonding {
  z-index: 9900 !important;
  pointer-events: none;
}

.card.is-relationship-event-active {
  z-index: 9900 !important;
  pointer-events: none;
}

.card.is-relationship-bonding .card__paper {
  animation: relationship-card-bond 720ms cubic-bezier(0.2, 0.72, 0.24, 1) 3 both;
}

.card.is-relationship-forming {
  z-index: 9850 !important;
  pointer-events: none;
  transition:
    left 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    top 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card.is-relationship-releasing {
  pointer-events: none;
  transition:
    left 360ms cubic-bezier(0.18, 0.82, 0.22, 1),
    top 360ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.relationship-heart-burst {
  position: absolute;
  z-index: 20000;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: scale(var(--card-display-scale, 1));
  transform-origin: center;
}

.relationship-heart-burst i {
  --heart-x: 0px;
  --heart-mid-x: 0px;
  --heart-delay: 0ms;

  position: absolute;
  top: 0;
  left: 0;
  color: #df675f;
  font: 1000 28px / 1 "Avenir Next", Avenir, sans-serif;
  opacity: 0;
  text-shadow:
    -2px 0 #303129,
    0 2px #303129,
    2px 0 #303129,
    0 -2px #303129,
    2px 3px 0 rgb(48 49 41 / 22%);
  transform: translate(-50%, -50%);
  animation: relationship-heart-rise 820ms cubic-bezier(0.12, 0.82, 0.2, 1) var(--heart-delay) both;
}

.relationship-heart-burst i:nth-child(1) {
  --heart-x: -34px;
  --heart-mid-x: -12px;
  --heart-delay: 90ms;

  font-size: 17px;
}

.relationship-heart-burst i:nth-child(2),
.relationship-heart-burst i:nth-child(5),
.relationship-heart-burst i:nth-child(8) {
  animation-name: relationship-heart-pulse;
  animation-duration: 640ms;
}

.relationship-heart-burst i:nth-child(2) {
  --heart-delay: 0ms;
}

.relationship-heart-burst i:nth-child(3) {
  --heart-x: 32px;
  --heart-mid-x: 10px;
  --heart-delay: 210ms;

  font-size: 19px;
}

.relationship-heart-burst i:nth-child(4) {
  --heart-x: -44px;
  --heart-mid-x: -15px;
  --heart-delay: 520ms;

  font-size: 20px;
}

.relationship-heart-burst i:nth-child(5) {
  --heart-delay: 560ms;
}

.relationship-heart-burst i:nth-child(6) {
  --heart-x: 43px;
  --heart-mid-x: 15px;
  --heart-delay: 720ms;

  font-size: 16px;
}

.relationship-heart-burst i:nth-child(7) {
  --heart-x: -30px;
  --heart-mid-x: -9px;
  --heart-delay: 1s;

  font-size: 18px;
}

.relationship-heart-burst i:nth-child(8) {
  --heart-delay: 1.08s;
}

.relationship-heart-burst i:nth-child(9) {
  --heart-x: 35px;
  --heart-mid-x: 11px;
  --heart-delay: 1.22s;

  font-size: 18px;
}

.relationship-heart-burst i:nth-child(10) {
  --heart-x: -48px;
  --heart-mid-x: -16px;
  --heart-delay: 1.44s;

  font-size: 15px;
}

.relationship-heart-burst i:nth-child(11) {
  --heart-x: 47px;
  --heart-mid-x: 16px;
  --heart-delay: 1.52s;

  font-size: 16px;
}

.card.is-revealing {
  z-index: 9000 !important;
  pointer-events: none;
  animation: reveal-card-travel 640ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
  perspective: 700px;
}

.card.is-revealing .card__flip {
  animation: reveal-card-flip 640ms cubic-bezier(0.22, 0.72, 0.25, 1) both;
}

.card.is-work-output {
  pointer-events: none;
}

.card.is-daily-food-consumed {
  z-index: 9600 !important;
  pointer-events: none;
}

.card.is-daily-food-consumed .card__paper {
  animation: daily-food-consumed 680ms cubic-bezier(0.18, 0.74, 0.22, 1)
    calc(var(--daily-food-order, 0) * 34ms) both;
}

.card.is-work-output-peeking {
  z-index: 35 !important;
}

.card.is-work-output-sliding {
  z-index: 9200 !important;
}

.card.is-action-returning {
  z-index: 9100 !important;
  pointer-events: none;
  animation: action-card-return 320ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-threat-entering {
  z-index: 9300 !important;
  pointer-events: none;
  animation: threat-card-enter 620ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.card.is-equipment-equipped .card__paper {
  animation: equipment-card-equip 460ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.card.is-handaxe-equipped .card__paper {
  animation: handaxe-person-equip 480ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.card.is-handaxe-attaching .card__paper {
  animation: handaxe-tool-attach 480ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.card.is-handaxe-detaching .card__paper {
  animation: handaxe-tool-detach 360ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

.card__stat--combat {
  position: relative;
}

.card.is-handaxe-equipped .card__stat--combat,
.card.is-handaxe-unequipped .card__stat--combat {
  animation: handaxe-combat-stat-change 480ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.card.is-handaxe-equipped .card__stat--combat::after {
  position: absolute;
  right: -9px;
  bottom: 14px;
  color: #d99a36;
  content: var(--equipment-bonus-label, "+2");
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
  text-shadow:
    -1px 0 #f7eccf,
    0 1px #f7eccf,
    1px 0 #f7eccf,
    0 -1px #f7eccf;
  animation: handaxe-combat-bonus 480ms ease-out both;
}

.combat-arena {
  position: absolute;
  z-index: 7;
  border: 2px dashed rgb(103 60 42 / 38%);
  border-radius: 48% 52% 45% 55% / 54% 46% 56% 44%;
  background:
    radial-gradient(ellipse at center, rgb(143 64 45 / 9%), transparent 68%),
    rgb(74 53 40 / 3%);
  box-shadow: 0 0 0 5px rgb(244 224 183 / 8%) inset;
  opacity: 0.9;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-0.5deg);
}

.combat-arena__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #764a37;
  box-shadow: 0 0 0 2px rgb(244 224 183 / 72%);
  opacity: 0.62;
  transform: translate(-50%, -50%) rotate(var(--combat-line-rotation));
}

.card.is-combat-card {
  filter: drop-shadow(0 3px 0 rgb(74 45 35 / 17%));
}

.card.is-combat-attacking,
.card.is-combat-countering {
  z-index: 9400 !important;
}

.card.is-combat-attacking .card__paper {
  animation: combat-card-lunge 300ms cubic-bezier(0.18, 0.76, 0.24, 1) both;
}

.card.is-combat-countering .card__paper {
  animation: combat-card-lunge 300ms cubic-bezier(0.18, 0.76, 0.24, 1) both;
}

.card.is-combat-hit .card__paper {
  animation: combat-enemy-hit 300ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.card.is-combat-struck .card__paper {
  animation: combat-person-hit 300ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.combat-damage {
  position: absolute;
  z-index: 198;
  min-width: 34px;
  padding: 3px 7px 4px;
  border: 2px solid #2f2d27;
  border-radius: 999px;
  background: #f4e8c7;
  box-shadow: 2px 3px 0 rgb(47 45 39 / 22%);
  color: #a53e36;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: combat-damage-float 560ms cubic-bezier(0.16, 0.78, 0.22, 1)
    var(--combat-damage-delay, 0ms) both;
}

.combat-damage--ally {
  color: #553c32;
}

.card.is-combat-defeated {
  z-index: 9200 !important;
  pointer-events: none;
  animation: combat-card-defeat 500ms cubic-bezier(0.3, 0.05, 0.5, 1) both;
}

.card.is-enemy-defeated {
  z-index: 9300 !important;
  pointer-events: none;
  animation: combat-enemy-defeat 820ms cubic-bezier(0.2, 0.62, 0.28, 1) both;
}

.card.is-trophy-emerging {
  z-index: 9350 !important;
  pointer-events: none;
  animation: trophy-card-emerge 980ms cubic-bezier(0.16, 0.78, 0.2, 1) both;
  perspective: 700px;
}

.card.is-trophy-emerging .card__flip {
  animation: trophy-card-reveal-flip 980ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.card.is-trophy-emerging::after {
  position: absolute;
  top: -28px;
  left: 50%;
  padding: 4px 9px 5px;
  border: 2px solid #303129;
  border-radius: 999px;
  background: #f4d26d;
  box-shadow: 2px 3px 0 rgb(48 49 41 / 22%);
  color: #303129;
  content: "전리품!";
  font-size: 12px;
  font-weight: 950;
  opacity: 0;
  transform: translateX(-50%);
  animation: trophy-label-arrive 980ms ease-out both;
}

.combat-victory-burst {
  position: absolute;
  z-index: 189;
  width: 18px;
  height: 18px;
  border: 3px solid #f1d26d;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgb(244 226 169 / 28%),
    0 0 18px rgb(244 200 87 / 50%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: combat-victory-ring 760ms ease-out both;
}

.combat-victory-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 13px;
  border-radius: 999px;
  background: #f0bd4e;
  box-shadow: 0 0 0 2px rgb(68 54 39 / 18%);
  transform-origin: 50% 0;
  animation: combat-victory-ray 720ms cubic-bezier(0.16, 0.72, 0.22, 1) both;
}

.combat-arena.is-victory-impact {
  animation: combat-arena-victory 820ms ease-out both;
}

.card.is-work-output .collection-count {
  opacity: 0;
}

.card.is-source-producing .card__paper {
  animation: source-release-pulse 220ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-worker-finishing .card__paper {
  animation: worker-finish-release 220ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-handaxe-crafting .card__paper {
  filter: brightness(1.025) saturate(1.04);
}

.card.is-knapping-impact[data-knapping-role="stone"] .card__paper {
  animation: handaxe-stone-impact 190ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.card.is-knapping-impact[data-knapping-role="worker"] .card__paper {
  animation: handaxe-worker-impact 190ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.card.is-knapping-final .card__paper {
  animation: handaxe-final-impact 180ms cubic-bezier(0.14, 0.86, 0.2, 1) both;
}

.card.is-handaxe-forged {
  z-index: 9250 !important;
  pointer-events: none;
}

.card.is-handaxe-forged .card__flip {
  animation: handaxe-result-flip 560ms cubic-bezier(0.17, 0.78, 0.2, 1) both;
}

.card.is-handaxe-forged .card__paper {
  animation: handaxe-result-pulse 560ms cubic-bezier(0.17, 0.78, 0.2, 1) both;
}

.handaxe-impact-burst {
  position: absolute;
  z-index: 174;
  width: 18px;
  height: 18px;
  border: 3px solid #f0cd74;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(58 57 49 / 16%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--handaxe-impact-scale, 1));
  animation: handaxe-impact-ring 360ms ease-out both;
}

.handaxe-impact-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 4px;
  border: 1.5px solid #303129;
  border-radius: 48% 58% 44% 62%;
  background: #aaa399;
  box-shadow: 1px 1px 0 rgb(255 245 221 / 30%) inset;
  transform-origin: 0 50%;
  animation: handaxe-shard-flight 410ms cubic-bezier(0.12, 0.7, 0.2, 1) both;
}

.card.is-source-producing .work-gauge {
  animation: work-gauge-complete 220ms ease-out both;
}

.card.is-source-producing .work-gauge__fill {
  animation: work-gauge-fill-release 220ms ease-out both;
}

.card.is-collection-receiving .collection-count {
  animation: collection-count-receive 360ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-collection-receiving .card__paper {
  animation: collection-stack-receive 240ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-collection-placed .card__paper {
  animation: collection-card-place 320ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-collection-placed .collection-count {
  animation: collection-count-receive 320ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.card.is-drop-compatible .card__paper {
  outline: 5px solid rgb(210 232 118 / 90%);
  outline-offset: 5px;
  filter: drop-shadow(0 0 10px rgb(210 232 118 / 42%));
}

.card.is-drop-incompatible .card__paper {
  outline: 4px solid rgb(211 112 88 / 70%);
  outline-offset: 4px;
}

.card[data-stack-kind="collection"] {
  transition:
    opacity 100ms ease-out,
    translate 150ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.card.is-collection-buried {
  opacity: 0;
  pointer-events: none;
}

.card__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.card__back,
.card__paper {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back-surface {
  background: url("../assets/card-backs/concepts/c-new-world.svg") center / 100% 100% no-repeat;
}

.card__back {
  position: absolute;
  inset: 0;
  display: block;
  filter: drop-shadow(3px 5px 0 rgb(41 42 34 / 24%));
  transform: rotateY(180deg);
}

.card__paper {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 27px 1fr 27px;
  overflow: hidden;
  border: 2px solid #2f3028;
  border-radius: 7px;
  background:
    repeating-linear-gradient(6deg, rgb(85 72 45 / 2%) 0 1px, transparent 1px 7px),
    #f1e4c6;
  box-shadow:
    3px 5px 0 rgb(41 42 34 / 24%),
    inset 0 0 0 3px rgb(255 255 255 / 20%);
  transform: rotateY(0deg);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.card__category-line {
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
  z-index: 1;
  height: 22px;
  border-radius: 4px 4px 2px 2px;
  background: var(--card-identity-color, var(--card-category-fallback));
  box-shadow: inset 0 -1px 0 rgb(47 48 40 / 16%);
  opacity: 0.88;
}

.card[data-category="person"] {
  --card-identity-color: var(--card-category-person);
}

.card[data-category="source"] {
  --card-identity-color: var(--card-category-source);
}

.card[data-category="resource"] {
  --card-identity-color: var(--card-category-resource);
}

.card[data-category="food"] {
  --card-identity-color: var(--card-category-food);
}

.card[data-category="action"] {
  --card-identity-color: var(--card-category-action);
}

.card[data-category="tool"],
.card[data-category="equipment"] {
  --card-identity-color: var(--card-category-tool);
}

.card[data-category="structure"] {
  --card-identity-color: var(--card-category-structure);
}

.card[data-category="enemy"] {
  --card-identity-color: var(--card-category-enemy);
  --card-identity-title-color: var(--card-category-title-inverse);
}

.card[data-category="trophy"] {
  --card-identity-color: var(--card-category-trophy);
}

.card__title {
  z-index: 2;
  align-self: center;
  padding: 3px 8px 0;
  overflow: hidden;
  color: var(--card-identity-title-color, var(--card-category-title));
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__art-wrap {
  display: grid;
  min-height: 0;
  margin: 1px 8px 0;
  place-items: center;
}

.card__art {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 111px;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgb(45 46 39 / 14%));
  transform:
    translate(var(--card-art-x), var(--card-art-y))
    scale(var(--card-art-scale))
    scaleX(var(--card-art-facing));
  transform-origin: center bottom;
}

.card__equipment {
  position: absolute;
  top: 36px;
  right: 7px;
  z-index: 4;
  display: grid;
  width: 29px;
  height: 29px;
  border: 2px solid #303129;
  border-radius: 50%;
  background: #e7d5aa;
  box-shadow: 2px 2px 0 rgb(41 42 34 / 22%);
  place-items: center;
  transform: rotate(8deg);
}

.card__equipment img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}

.card__equipment b {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  min-width: 15px;
  height: 15px;
  border: 1.5px solid #303129;
  border-radius: 50%;
  background: #f2bf4f;
  color: #303129;
  font-size: 8px;
  place-items: center;
}

.card__footer {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: space-between;
  padding: 0 9px 3px;
  color: #857b63;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}

.card__stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 29px;
  color: #303129;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.card__stat-icon {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
}

.card__stat--health .card__stat-icon path {
  fill: #d96f61;
  stroke: #303129;
  stroke-linejoin: round;
  stroke-width: 2.7px;
}

.production-count {
  pointer-events: none;
}

.production-count b {
  font: inherit;
  transform: translateX(-2px);
}

.production-count .production-icon {
  transform: translateY(-1px);
}

.production-icon {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.production-icon circle {
  fill: #d96f61;
  stroke: #303129;
  stroke-width: 2.7px;
}

.production-icon__leaf {
  fill: #78874f;
  stroke: #303129;
  stroke-linejoin: round;
  stroke-width: 2.7px;
}

.production-icon--firewood path,
.production-icon--firewood circle {
  fill: #b77a43;
  stroke: #303129;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2px;
}

.production-icon--firewood circle {
  fill: #dfae64;
}

.card[data-definition-id="campfire"] .card__art-wrap {
  position: relative;
  isolation: isolate;
}

.card[data-definition-id="campfire"] .card__art-wrap::before {
  position: absolute;
  z-index: -1;
  width: 98px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 184 72 / 34%), rgb(237 117 49 / 10%) 54%, transparent 72%);
  content: "";
  animation: campfire-glow-pulse 1.4s ease-in-out infinite alternate;
}

.card[data-definition-id="campfire"] .card__art {
  animation: campfire-art-breathe 1.05s ease-in-out infinite alternate;
}

.card.has-work[data-job-definition^="build_campfire"] .card__art-wrap {
  position: relative;
  isolation: isolate;
}

.card.has-work[data-job-definition^="build_campfire"] .card__art-wrap::after {
  position: absolute;
  left: 50%;
  z-index: 3;
  content: "";
  pointer-events: none;
}

.card.has-work[data-job-definition^="build_campfire"] .card__art-wrap::after {
  bottom: 40px;
  width: 13px;
  height: 24px;
  border-radius: 52% 48% 58% 42%;
  background: rgb(223 218 197 / 68%);
  box-shadow: 13px -9px 0 -3px rgb(235 229 208 / 48%), -10px -16px 0 -4px rgb(206 204 190 / 42%);
  filter: blur(2.2px);
  animation: firemaking-smoke-build var(--work-duration, 3600ms) ease-in-out both;
}

.card.is-chopping {
  filter: saturate(1.04);
}

.card.is-chopping-impact[data-chopping-role="wood"] .card__paper {
  animation: chopping-wood-impact 240ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.card.is-chopping-impact[data-chopping-role="worker"] .card__paper {
  animation: chopping-worker-swing 240ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.card.is-campfire-emerging {
  z-index: 9250 !important;
}

.card.is-campfire-emerging .card__paper {
  animation: campfire-result-emerge 820ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.material-impact-burst,
.firemaking-stage-burst {
  position: absolute;
  z-index: 9400;
  pointer-events: none;
}

.material-impact-burst {
  width: 22px;
  height: 22px;
  border: 3px solid #f0cd74;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--material-impact-scale, 1));
  animation: material-impact-ring 480ms ease-out both;
}

.material-impact-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 4px;
  border: 1.5px solid #303129;
  border-radius: 65% 18% 70% 24%;
  background: #b87a43;
  box-shadow: 1px 1px 0 rgb(255 235 190 / 30%) inset;
  transform-origin: 0 50%;
  animation: material-shard-flight 540ms cubic-bezier(0.12, 0.7, 0.2, 1) both;
}

.material-impact-burst--wood {
  border-color: #e0ae61;
  box-shadow: 0 0 0 6px rgb(96 65 38 / 18%);
}

.firemaking-stage-burst {
  transform: translate(-50%, -50%);
}

.firemaking-stage-burst--smoke {
  width: 58px;
  height: 62px;
}

.firemaking-stage-burst--smoke i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(231 225 206 / 78%);
  filter: blur(2px);
  animation: firemaking-smoke-puff 960ms ease-out both;
}

.firemaking-stage-burst--smoke i:nth-child(2) {
  animation-delay: 90ms;
  left: 27%;
}

.firemaking-stage-burst--smoke i:nth-child(3) {
  animation-delay: 170ms;
  left: 73%;
}

.firemaking-stage-burst--smoke.is-dense {
  width: 82px;
  height: 78px;
}

.firemaking-stage-burst--smoke.is-dense i {
  width: 40px;
  height: 40px;
  background: rgb(235 229 211 / 88%);
}

.firemaking-stage-burst--smoke.is-dense i:nth-child(4) { left: 12%; animation-delay: 220ms; }
.firemaking-stage-burst--smoke.is-dense i:nth-child(5) { left: 88%; animation-delay: 270ms; }
.firemaking-stage-burst--smoke.is-dense i:nth-child(6) { left: 50%; animation-delay: 330ms; }

.card__combat-sword path {
  fill: #8b8b7c;
  stroke: #303129;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15px;
}

.pack-count {
  position: absolute;
  right: -19px;
  bottom: -16px;
  z-index: 7;
  display: grid;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  border: 2.5px solid #2d3234;
  border-radius: 999px;
  background: #e8d7a9;
  box-shadow: 3px 4px 0 rgb(41 42 34 / 22%);
  color: #2d3234;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  place-items: center;
}

.collection-count {
  position: absolute;
  right: -13px;
  bottom: -12px;
  z-index: 8;
  display: grid;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border: 2px solid #2d3234;
  border-radius: 999px;
  background: #e8d7a9;
  box-shadow: 2px 3px 0 rgb(41 42 34 / 22%);
  color: #2d3234;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.collection-count.is-split-selecting {
  min-width: 58px;
  background: #f2bf4f;
  box-shadow:
    2px 3px 0 rgb(41 42 34 / 24%),
    0 0 0 4px rgb(242 191 79 / 22%);
  transform: translateY(-2px) scale(1.04);
}

.collection-count[hidden] {
  display: none;
}

.pack-count[hidden] {
  display: none;
}

.pack-deck {
  position: absolute;
  inset: 0;
  display: block;
}

.pack-deck__card {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  filter: drop-shadow(3px 5px 0 rgb(41 42 34 / 22%));
  transition: opacity 90ms ease, transform 120ms ease;
}

.pack-deck__card--bottom {
  transform: translate(-6px, 8px) rotate(-3deg);
}

.pack-deck__card--middle {
  transform: translate(5px, 4px) rotate(2.4deg);
}

.pack-deck__card--top {
  transform: rotate(-0.6deg);
}

.card.is-pack[data-pack-depth="1"] .pack-deck__card--bottom,
.card.is-pack[data-pack-depth="1"] .pack-deck__card--middle,
.card.is-pack[data-pack-depth="2"] .pack-deck__card--bottom {
  opacity: 0;
}

.work-gauge {
  position: absolute;
  top: -17px;
  left: 0;
  z-index: 8;
  display: none;
  width: 128px;
  height: 11px;
  overflow: hidden;
  border: 2px solid #1f201a;
  border-radius: 999px;
  background: linear-gradient(180deg, #303129, #24251f);
  box-shadow:
    0 1px 0 rgb(255 244 205 / 13%) inset,
    0 -1px 2px rgb(0 0 0 / 24%) inset,
    1px 2px 0 rgb(41 42 34 / 22%);
}

.card.has-work .work-gauge {
  display: block;
}

.card.has-exploration-stack .work-gauge {
  top: -43px;
}

.card.has-exploration-stack.has-equipped-handaxe .work-gauge {
  top: -69px;
}

.work-gauge::after {
  position: absolute;
  inset: -21px 0 auto;
  color: #f3ead3;
  content: var(--work-percent);
  font-size: 8px;
  font-weight: 900;
  text-align: center;
}

.work-gauge__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d99a36, #f2bf4f 72%, #ffda68);
  box-shadow:
    0 1px 0 rgb(255 241 176 / 42%) inset,
    3px 0 5px rgb(255 205 88 / 28%);
  transform: scaleX(0);
  transform-origin: left center;
}

.work-gauge__production {
  position: absolute;
  top: 0;
  right: 3px;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  min-width: 9px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: #f5e8c8;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow:
    -1px 0 #292a24,
    0 1px #292a24,
    1px 0 #292a24,
    0 -1px #292a24;
}

.card[data-job-kind="combat"] .work-gauge {
  display: none;
}

.card.is-source-depleting {
  z-index: 165 !important;
  pointer-events: none;
  animation: source-depletion-separate
    var(--source-depletion-separation-duration, 520ms)
    cubic-bezier(0.16, 0.82, 0.22, 1)
    both;
}

.card.is-source-depleting .production-count {
  opacity: 0;
}

.card.is-source-depleting .card__paper {
  transform-origin: center bottom;
  animation: source-depletion 620ms cubic-bezier(0.18, 0.72, 0.2, 1) 520ms both;
}

.card.is-source-depleting .work-gauge {
  display: block;
  animation: source-depletion-gauge 260ms ease-out both;
}

.card.is-source-depleting::before,
.card.is-source-depleting::after {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 12;
  width: 9px;
  height: 5px;
  border: 1.5px solid #303129;
  border-radius: 90% 20% 90% 20%;
  background: #78874f;
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: source-depletion-leaf-left 560ms ease-out 540ms both;
}

.card[data-definition-id="fallen_deadwood"].is-source-depleting::before,
.card[data-definition-id="fallen_deadwood"].is-source-depleting::after {
  width: 10px;
  height: 4px;
  border-radius: 2px 70% 2px 70%;
  background: #bd7c43;
}

.card[data-definition-id="dry_grass"].is-source-depleting::before,
.card[data-definition-id="dry_grass"].is-source-depleting::after {
  width: 10px;
  height: 3px;
  border-radius: 80% 10% 80% 10%;
  background: #c79a4a;
}

@keyframes campfire-glow-pulse {
  from { opacity: 0.62; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.08); }
}

@keyframes campfire-art-breathe {
  from {
    filter: drop-shadow(0 2px 0 rgb(45 46 39 / 14%)) brightness(0.98);
    transform: translate(var(--card-art-x), var(--card-art-y)) scale(var(--card-art-scale));
  }
  to {
    filter: drop-shadow(0 2px 0 rgb(45 46 39 / 14%)) brightness(1.07);
    transform: translate(var(--card-art-x), calc(var(--card-art-y) - 1px)) scale(var(--card-art-scale));
  }
}

@keyframes firemaking-smoke-build {
  0%, 18% { opacity: 0; transform: translate(-50%, 5px) scale(0.65); }
  36% { opacity: 0.38; }
  76% { opacity: 0.78; transform: translate(-50%, -7px) scale(1.12); }
  100% { opacity: 0.18; transform: translate(-50%, -17px) scale(1.32); }
}

@keyframes chopping-wood-impact {
  0%, 100% { filter: brightness(1); transform: translate(0, 0) rotate(0) scale(1); }
  30% { filter: brightness(1.22); transform: translate(6px, 5px) rotate(2.6deg) scale(0.965); }
  62% { transform: translate(-4px, -2px) rotate(-1.4deg) scale(1.02); }
}

@keyframes chopping-worker-swing {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  24% { transform: translate(-5px, -8px) rotate(-2.8deg) scale(1.02); }
  52% { transform: translate(5px, 5px) rotate(2.2deg) scale(0.975); }
  74% { transform: translate(-2px, -1px) rotate(-0.6deg) scale(1.006); }
}

@keyframes material-impact-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--material-impact-end-scale, 3.1)); }
}

@keyframes material-shard-flight {
  0% { opacity: 0; transform: rotate(var(--material-angle)) translateX(3px) rotate(var(--material-counter-angle)) scale(0.55); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--material-angle)) translateX(var(--material-distance)) rotate(calc(var(--material-counter-angle) + 92deg)) scale(0.9); }
}

@keyframes firemaking-smoke-puff {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.45); }
  30% { opacity: 0.88; }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(1.45); }
}

@keyframes campfire-result-emerge {
  0% { filter: blur(2px) brightness(1.08); opacity: 0; transform: translateY(18px) scale(0.72); }
  44% { filter: blur(0) brightness(1.12); opacity: 1; transform: translateY(-8px) scale(1.08); }
  72% { transform: translateY(3px) scale(0.98); }
  100% { filter: brightness(1); opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes daily-food-consumed {
  0% { filter: brightness(1); opacity: 1; transform: translate(0, 0) rotateY(0) scale(1); }
  24% { filter: brightness(1.18); transform: translate(0, -12px) rotateY(-8deg) scale(1.04); }
  64% { opacity: 0.88; transform: translate(0, -28px) rotateY(16deg) scale(0.72); }
  100% { filter: brightness(0.82); opacity: 0; transform: translate(0, -42px) rotateY(28deg) scale(0.2); }
}

.card.is-source-depleting::after {
  width: 7px;
  height: 4px;
  background: #9a8152;
  animation-name: source-depletion-leaf-right;
}

.game-status {
  position: absolute;
  top: var(--game-status-top, calc(116px * var(--ui-scale)));
  bottom: auto;
  left: 50%;
  z-index: 300;
  max-width: min(calc(430px * var(--ui-scale)), calc(100% - 36px));
  margin: 0;
  padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale));
  border: 2px solid #303129;
  border-radius: 999px;
  background: rgb(242 231 205 / 96%);
  box-shadow: 3px 4px 0 rgb(39 41 33 / 20%);
  color: #303129;
  font-size: calc(15px * var(--ui-scale));
  font-weight: 800;
  text-align: center;
  transform: translateX(-50%);
}

.is-developer-mode .game-status {
  top: auto;
  bottom: calc(24px * var(--ui-scale));
  max-width: min(calc(620px * var(--ui-scale)), calc(100% - 36px));
}

.card-art-tool-link {
  padding: calc(7px * var(--ui-scale)) calc(11px * var(--ui-scale));
  border: 1px solid rgb(243 234 211 / 38%);
  border-radius: 999px;
  background: rgb(242 231 205 / 92%);
  box-shadow: 2px 3px 0 rgb(39 41 33 / 18%);
  color: #303129;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 900;
  text-decoration: none;
}

.card-art-tool-link:hover {
  background: #fff3d9;
}

.world-object-tool-link {
  padding: calc(7px * var(--ui-scale)) calc(11px * var(--ui-scale));
  border: 1px solid rgb(243 234 211 / 38%);
  border-radius: 999px;
  background: rgb(242 231 205 / 92%);
  box-shadow: 2px 3px 0 rgb(39 41 33 / 18%);
  color: #303129;
  font-size: calc(14px * var(--ui-scale));
  font-weight: 900;
  text-decoration: none;
}

.world-object-tool-link:hover {
  background: #fff3d9;
}

.world-object-tool {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 600;
  width: min(310px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  overflow: auto;
  padding: 18px;
  border: 2px solid #303129;
  border-radius: 14px;
  background: rgb(241 228 198 / 97%);
  box-shadow: 6px 8px 0 rgb(39 41 33 / 24%);
  color: #303129;
}

.world-object-tool__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.world-object-tool__header h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.world-object-tool__header .eyebrow {
  color: #877548;
}

.world-object-tool__back {
  flex: none;
  padding: 7px 11px;
  border: 2px solid #303129;
  border-radius: 999px;
  background: #d9c9a7;
  color: #303129;
  font-size: 10px;
  font-weight: 950;
  text-decoration: none;
}

.world-object-tool__label,
.world-object-tool__control-title label {
  font-size: 11px;
  font-weight: 950;
}

.world-object-tool__select {
  width: 100%;
  margin: 7px 0 10px;
  padding: 8px 9px;
  border: 2px solid #4a4b40;
  border-radius: 7px;
  background: #fff3d9;
  color: #303129;
  font-size: 12px;
  font-weight: 900;
}

.world-object-tool__coordinates {
  display: flex;
  gap: 16px;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgb(74 75 64 / 8%);
  color: #6d644f;
  font-size: 10px;
  font-weight: 900;
}

.world-object-tool__control {
  padding: 13px 0;
  border-bottom: 1px solid rgb(48 49 41 / 16%);
}

.world-object-tool__control-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.world-object-tool__control-title output {
  color: #8f5435;
  font-size: 11px;
  font-weight: 950;
}

.world-object-tool__inputs {
  display: grid;
  grid-template-columns: 1fr 62px;
  gap: 8px;
  align-items: center;
}

.world-object-tool__inputs input[type="range"] {
  width: 100%;
  accent-color: #78874f;
}

.world-object-tool__inputs input[type="number"] {
  width: 62px;
  padding: 5px;
  border: 1px solid #777260;
  border-radius: 5px;
  background: #fff8e8;
  color: #303129;
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.world-object-tool__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 14px;
}

.world-object-tool__actions button {
  padding: 8px;
  border: 2px solid #45463c;
  border-radius: 7px;
  background: #d9c9a7;
  color: #303129;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.world-object-tool__actions [data-action="reset"] {
  grid-column: 1 / -1;
}

.world-object-tool__help {
  margin: 14px 0 0;
  color: #655f50;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.world-object-tool__status {
  min-height: 15px;
  margin: 8px 0 0;
  color: #8f5435;
  font-size: 10px;
  font-weight: 900;
}

body.is-world-object-tool .card-art-tool-link,
body.is-world-object-tool .world-object-tool-link,
body.is-world-object-tool .camera-help,
body.is-world-object-tool .display-controls {
  display: none;
}

body.is-world-object-tool .forest-edge,
body.is-world-object-tool .forest-edge__tree {
  pointer-events: auto;
}

body.is-world-object-tool .forest-edge__tree {
  cursor: grab;
}

body.is-world-object-tool .forest-edge__tree.is-world-object-selected {
  filter:
    saturate(1.05)
    contrast(1.03)
    drop-shadow(0 0 2px #f7da76)
    drop-shadow(0 0 7px rgb(247 218 118 / 86%));
}

body.is-world-object-tool .forest-edge__tree.is-world-object-dragging {
  cursor: grabbing;
}

body.is-world-object-tool .card {
  opacity: 0.5;
  pointer-events: none;
}

.card-art-tool {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 720px;
  min-height: 620px;
  overflow: auto;
  background:
    radial-gradient(circle at 65% 42%, rgb(205 218 177 / 24%), transparent 44%),
    repeating-linear-gradient(9deg, rgb(40 46 34 / 4%) 0 1px, transparent 1px 9px),
    #59664f;
  color: #303129;
  user-select: none;
}

.card-art-tool__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  padding: 20px 28px;
  border-bottom: 1px solid rgb(243 234 211 / 18%);
  color: #f3ead3;
}

.card-art-tool__header h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.card-art-tool__back {
  padding: 9px 14px;
  border: 2px solid #303129;
  border-radius: 999px;
  background: #f1e4c6;
  box-shadow: 3px 4px 0 rgb(39 41 33 / 22%);
  color: #303129;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.card-art-tool__workspace {
  display: grid;
  grid-template-columns: 320px minmax(640px, 1fr);
  gap: 22px;
  min-height: 0;
  padding: 22px 28px 28px;
}

.card-art-tool__panel,
.card-art-tool__stage {
  border: 2px solid #303129;
  border-radius: 14px;
  background: rgb(241 228 198 / 96%);
  box-shadow: 5px 7px 0 rgb(39 41 33 / 22%);
}

.card-art-tool__panel {
  align-self: start;
  padding: 20px;
}

.card-art-tool__select-label,
.card-art-tool__control-title label {
  font-size: 12px;
  font-weight: 950;
}

.card-art-tool__select {
  width: 100%;
  margin: 7px 0 22px;
  padding: 9px 10px;
  border: 2px solid #4a4b40;
  border-radius: 7px;
  background: #fff3d9;
  color: #303129;
  font-size: 14px;
  font-weight: 900;
}

.card-art-tool__control {
  padding: 13px 0;
  border-top: 1px solid rgb(48 49 41 / 18%);
}

.card-art-tool__control-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-art-tool__control-title output {
  color: #8f5435;
  font-size: 13px;
  font-weight: 950;
}

.card-art-tool__inputs {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 9px;
  align-items: center;
}

.card-art-tool__inputs input[type="range"] {
  width: 100%;
  accent-color: #a96f3e;
}

.card-art-tool__inputs input[type="number"] {
  width: 64px;
  padding: 6px;
  border: 1px solid #777260;
  border-radius: 5px;
  background: #fff8e8;
  color: #303129;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.card-art-tool__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.card-art-tool__actions button {
  padding: 8px 7px;
  border: 2px solid #45463c;
  border-radius: 7px;
  background: #d9c9a7;
  color: #303129;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.card-art-tool__actions button:hover {
  background: #eadbb9;
}

.card-art-tool__actions [data-action="reset-all"] {
  grid-column: 1 / -1;
}

.card-art-tool__help {
  margin: 18px 0 0;
  color: #655f50;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
}

.card-art-tool__status {
  min-height: 16px;
  margin: 10px 0 0;
  color: #8f5435;
  font-size: 10px;
  font-weight: 900;
}

.card-art-tool__stage {
  min-height: 506px;
  overflow: hidden;
  padding: 18px 22px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 20%), transparent 35%),
    #d8cfb4;
}

.card-art-tool__legend {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 30px;
  color: #6b6657;
  font-size: 10px;
  font-weight: 850;
}

.card-art-tool__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.card-art-tool__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #303129;
  border-radius: 50%;
  background: #a7a18e;
}

.card-art-tool__dot--active {
  background: #d79d42;
}

.card-art-tool__baseline-label {
  margin-left: auto;
  color: #a2473c;
}

.card-art-tool__preview-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-content: center;
  height: 410px;
  padding-top: 14px;
}

.card-art-tool__preview-slot {
  display: grid;
  width: 300px;
  height: 396px;
  place-items: start center;
}

.card-art-tool__shared-baseline {
  position: absolute;
  top: 313px;
  right: 22px;
  left: 22px;
  z-index: 40;
  height: 12px;
  cursor: ns-resize;
  outline: 0;
  transform: translateY(-6px);
  touch-action: none;
}

.card-art-tool__shared-baseline::before {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  border-top: 2px dashed rgb(173 70 58 / 84%);
  content: "";
}

.card-art-tool__shared-baseline:focus-visible::before,
.card-art-tool__shared-baseline.is-adjusting::before {
  border-top-style: solid;
  filter: drop-shadow(0 0 2px rgb(255 248 220 / 90%));
}

.card-art-preview-card {
  position: relative;
  top: auto;
  left: auto;
  z-index: 5;
  flex: none;
  cursor: move;
  transform: scale(2.2);
  transform-origin: top center;
}

.card-art-preview-card:focus-visible .card__paper {
  outline-color: #d79d42;
}

.card-art-preview-card.is-adjusting {
  cursor: grabbing;
}

.card-art-preview-card--comparison {
  cursor: pointer;
  opacity: 0.48;
}

.card-art-preview-card .card__art-wrap {
  cursor: inherit;
}

@keyframes pack-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-1deg) scale(var(--card-display-scale, 1));
  }
  50% {
    transform: translate(-50%, -53%) rotate(1deg) scale(var(--card-display-scale, 1));
  }
}

@keyframes reveal-card-travel {
  0% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--reveal-dx)),
        calc(-50% + var(--reveal-dy))
      )
      rotate(calc(var(--card-rotation, 0deg) - 1deg))
      scale(var(--card-display-scale, 1))
      scale(1);
  }
  45% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--reveal-dx) * 0.36),
        calc(-72% + var(--reveal-dy) * 0.36)
      )
      rotate(calc(var(--card-rotation, 0deg) + 3deg))
      scale(var(--card-display-scale, 1))
      scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1))
      scale(1);
  }
}

@keyframes reveal-card-flip {
  0%,
  18% {
    transform: rotateY(180deg);
  }
  62% {
    transform: rotateY(54deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes source-release-pulse {
  0%,
  100% {
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }
  32% {
    filter: brightness(1.02);
    transform: translateY(3px) scale(0.992) rotate(0.25deg);
  }
  64% {
    filter: brightness(1.09);
    transform: translateY(-6px) scale(1.03) rotate(-0.6deg);
  }
  82% {
    filter: brightness(1.02);
    transform: translateY(1px) scale(0.99) rotate(0.3deg);
  }
}

@keyframes source-depletion {
  0% {
    filter: brightness(1) saturate(1);
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
  20% {
    filter: brightness(1.12) saturate(1.05);
    transform: translateY(-7px) rotate(-1.4deg) scale(1.025);
  }
  38% {
    transform: translateY(2px) rotate(1.1deg) scale(0.99);
  }
  58% {
    filter: brightness(0.96) saturate(0.62);
    opacity: 0.94;
    transform: translateY(3px) rotate(-0.5deg) scale(0.96);
  }
  100% {
    filter: brightness(0.88) saturate(0.15);
    opacity: 0;
    transform: translateY(15px) rotate(1.8deg) scale(0.78, 0.68);
  }
}

@keyframes source-depletion-separate {
  0% {
    transform: translate(-50%, -50%)
      rotate(calc(var(--card-rotation, 0deg) + 3deg))
      scale(var(--card-display-scale, 1));
  }
  58% {
    transform: translate(
        calc(-50% + var(--source-depletion-push-x)),
        calc(-50% + var(--source-depletion-push-y) - 6px)
      )
      rotate(calc(var(--card-rotation, 0deg) - 1.2deg))
      scale(calc(var(--card-display-scale, 1) * 1.02));
  }
  100% {
    transform: translate(
        calc(-50% + var(--source-depletion-push-x)),
        calc(-50% + var(--source-depletion-push-y))
      )
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1));
  }
}

@keyframes source-depletion-gauge {
  0%, 28% { filter: brightness(1.5); opacity: 1; }
  100% { filter: brightness(0.8); opacity: 0; transform: translateY(-5px) scaleX(0.92); }
}

@keyframes source-depletion-leaf-left {
  0%, 16% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(0.5); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-46px, 54px) rotate(-165deg) scale(0.9); }
}

@keyframes source-depletion-leaf-right {
  0%, 20% { opacity: 0; transform: translate(-50%, -50%) rotate(18deg) scale(0.5); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translate(42px, 46px) rotate(172deg) scale(0.86); }
}

@keyframes worker-finish-release {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0);
  }
  32% {
    transform: translateY(-5px) scale(0.99) rotate(-0.5deg);
  }
  64% {
    transform: translateY(4px) scale(1.02) rotate(0.65deg);
  }
  82% {
    transform: translateY(-1px) scale(0.995) rotate(-0.2deg);
  }
}

@keyframes handaxe-stone-impact {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  34% { filter: brightness(1.2); transform: translate(-5px, 3px) rotate(-2.8deg) scale(0.975); }
  66% { transform: translate(3px, -2px) rotate(1.4deg) scale(1.018); }
}

@keyframes handaxe-worker-impact {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  30% { transform: translateY(-7px) rotate(-1.8deg) scale(1.015); }
  58% { transform: translateY(3px) rotate(1deg) scale(0.992); }
}

@keyframes handaxe-final-impact {
  0% { filter: brightness(1); transform: translateY(0) scale(1); }
  36% { filter: brightness(1.35); transform: translateY(5px) scale(0.965, 0.94); }
  72% { filter: brightness(1.08); transform: translateY(-4px) scale(1.025, 1.04); }
  100% { filter: brightness(1); transform: translateY(0) scale(1); }
}

@keyframes handaxe-result-flip {
  0% { transform: rotateY(92deg) rotateZ(-3deg); }
  42% { transform: rotateY(-12deg) rotateZ(1.2deg); }
  68% { transform: rotateY(5deg) rotateZ(-0.5deg); }
  100% { transform: rotateY(0) rotateZ(0); }
}

@keyframes handaxe-result-pulse {
  0% { filter: brightness(1.38) drop-shadow(0 0 9px rgb(242 203 111 / 66%)); }
  52% { filter: brightness(1.08); transform: translateY(-5px) scale(1.035); }
  78% { transform: translateY(1px) scale(0.992); }
  100% { filter: brightness(1); transform: translateY(0) scale(1); }
}

@keyframes handaxe-impact-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--handaxe-impact-end-scale, 2.8)); }
}

@keyframes handaxe-shard-flight {
  0% { opacity: 0; transform: rotate(var(--shard-angle)) translateX(3px) rotate(var(--shard-counter-angle)) scale(0.55); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--shard-angle)) translateX(var(--shard-distance)) rotate(calc(var(--shard-counter-angle) + 80deg)) scale(0.88); }
}

@keyframes work-gauge-complete {
  0%,
  100% {
    filter: brightness(1);
  }
  32%,
  64% {
    filter: brightness(1.65) drop-shadow(0 0 5px rgb(255 211 103 / 72%));
  }
}

@keyframes work-gauge-fill-release {
  0%,
  64% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes collection-count-receive {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-5px) scale(1.24) rotate(5deg);
    background: #ffdc73;
  }
  72% {
    transform: translateY(1px) scale(0.96) rotate(-2deg);
  }
}

@keyframes collection-stack-receive {
  0%,
  100% {
    transform: rotateY(0deg) scale(1);
  }
  38% {
    transform: rotateY(0deg) scale(1.012, 0.984);
  }
  72% {
    transform: rotateY(0deg) scale(0.997, 1.006);
  }
}

@keyframes collection-card-place {
  0% {
    box-shadow:
      7px 12px 0 rgb(41 42 34 / 18%),
      inset 0 0 0 3px rgb(255 255 255 / 20%);
    transform: translateY(-10px) rotateY(0deg) scale(1.018);
  }
  58% {
    box-shadow:
      2px 3px 0 rgb(41 42 34 / 25%),
      inset 0 0 0 3px rgb(255 255 255 / 20%);
    transform: translateY(1.5px) rotateY(0deg) scale(0.994, 1.006);
  }
  100% {
    box-shadow:
      3px 5px 0 rgb(41 42 34 / 24%),
      inset 0 0 0 3px rgb(255 255 255 / 20%);
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@keyframes invalid-drop-rebound {
  0% {
    transform: translate(
        calc(-50% + var(--rebound-dx)),
        calc(-50% + var(--rebound-dy))
      )
      rotate(calc(var(--card-rotation, 0deg) + 1.8deg))
      scale(var(--card-display-scale, 1))
      scale(0.985);
  }
  72% {
    transform: translate(
        calc(-50% + var(--rebound-overshoot-x)),
        calc(-50% + var(--rebound-overshoot-y))
      )
      rotate(calc(var(--card-rotation, 0deg) - 0.7deg))
      scale(var(--card-display-scale, 1))
      scale(1.012);
  }
  100% {
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1))
      scale(1);
  }
}

@keyframes relationship-card-bond {
  0%,
  100% {
    transform: translateY(0) rotateY(0deg) scale(1);
  }
  28% {
    transform: translateY(-5px) rotateY(0deg) scale(1.018, 0.988);
  }
  58% {
    transform: translateY(-2px) rotateY(0deg) scale(0.995, 1.012);
  }
}

@keyframes relationship-heart-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.35) rotate(-7deg);
  }
  24% {
    opacity: 1;
    transform: translate(calc(-50% + var(--heart-mid-x)), -5px) scale(1.08) rotate(3deg);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-x)), -72px) scale(0.82) rotate(-5deg);
  }
}

@keyframes relationship-heart-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.35);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.14);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(0.9);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.2);
  }
  56% {
    opacity: 1;
    transform: translate(-50%, -16px) scale(0.94);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -22px) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48px) scale(0.82);
  }
}

@keyframes invalid-target-nudge {
  0%,
  100% {
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1));
  }
  36% {
    transform: translate(
        calc(-50% + var(--impact-x)),
        calc(-50% + var(--impact-y))
      )
      rotate(calc(var(--card-rotation, 0deg) + 0.8deg))
      scale(var(--card-display-scale, 1))
      scale(0.988);
  }
  70% {
    transform: translate(
        calc(-50% + var(--impact-return-x)),
        calc(-50% + var(--impact-return-y))
      )
      rotate(calc(var(--card-rotation, 0deg) - 0.35deg))
      scale(var(--card-display-scale, 1));
  }
}

@keyframes action-card-return {
  0% {
    transform: translate(
        calc(-50% + var(--action-return-x)),
        calc(-50% + var(--action-return-y))
      )
      rotate(calc(var(--card-rotation, 0deg) - 1deg))
      scale(var(--card-display-scale, 1));
  }
  76% {
    transform: translate(-50%, -50%)
      rotate(calc(var(--card-rotation, 0deg) + 0.35deg))
      scale(var(--card-display-scale, 1))
      scale(1.012);
  }
  100% {
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1));
  }
}

@keyframes fog-frontier-guide {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.72);
  }
  42% {
    opacity: 1;
    filter: drop-shadow(0 0 22px rgb(244 205 82 / 58%));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(2deg) scale(1.28);
  }
}

@keyframes challenge-complete-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(0.96) rotate(-0.5deg);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 3px)) scale(1.01) rotate(0.2deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@keyframes threat-card-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 46px))
      rotate(calc(var(--card-rotation, 0deg) - 7deg))
      scale(calc(var(--card-display-scale, 1) * 0.72));
    filter: blur(4px) drop-shadow(0 12px 5px rgb(41 42 34 / 10%));
  }
  68% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 5px))
      rotate(calc(var(--card-rotation, 0deg) + 1deg))
      scale(calc(var(--card-display-scale, 1) * 1.04));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1));
    filter: none;
  }
}

@keyframes equipment-card-equip {
  0%, 100% { filter: none; transform: rotateY(0deg) scale(1); }
  40% { filter: brightness(1.22) drop-shadow(0 0 10px rgb(242 191 79 / 62%)); transform: rotateY(0deg) scale(1.045) rotate(-1deg); }
  72% { transform: rotateY(0deg) scale(0.992) rotate(0.4deg); }
}

@keyframes handaxe-person-equip {
  0%, 100% { filter: brightness(1); transform: translateY(0) rotate(0) scale(1); }
  34% { filter: brightness(1.08); transform: translateY(-5px) rotate(-0.7deg) scale(1.025); }
  68% { transform: translateY(2px) rotate(0.35deg) scale(0.995); }
}

@keyframes handaxe-tool-attach {
  0% { filter: brightness(1.12); transform: translateY(12px) rotate(2.8deg) scale(0.96); }
  62% { transform: translateY(-3px) rotate(-0.8deg) scale(1.02); }
  100% { filter: brightness(1); transform: translateY(0) rotate(0) scale(1); }
}

@keyframes handaxe-tool-detach {
  0% { transform: translateY(-7px) rotate(-1deg) scale(1.015); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

@keyframes handaxe-combat-stat-change {
  0%, 100% { color: #303129; transform: translateY(0) scale(1); }
  38% { color: #b9741f; transform: translateY(-3px) scale(1.28); }
  70% { transform: translateY(1px) scale(0.96); }
}

@keyframes handaxe-combat-bonus {
  0% { opacity: 0; transform: translateY(5px) scale(0.72); }
  30% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.94); }
}

@keyframes combat-card-lunge {
  0%, 100% { filter: none; transform: rotateY(0deg) translateX(0) scale(1); }
  22% { transform: rotateY(0deg) translateX(var(--combat-windup-x)) scale(0.985); }
  58% { filter: brightness(1.1); transform: rotateY(0deg) translateX(var(--combat-lunge-x)) scale(1.025) rotate(1deg); }
  78% { transform: rotateY(0deg) translateX(var(--combat-settle-x)) scale(0.995); }
}

@keyframes combat-enemy-hit {
  0%, 100% { filter: none; transform: rotateY(0deg) translateX(0); }
  34% { filter: brightness(1.3) saturate(0.68); transform: rotateY(0deg) translateX(var(--combat-hit-x)) rotate(1.4deg); }
  68% { transform: rotateY(0deg) translateX(var(--combat-hit-return-x)) rotate(-0.7deg); }
}

@keyframes combat-person-hit {
  0%, 100% { filter: none; transform: rotateY(0deg) translateX(0); }
  35% { filter: brightness(0.78) sepia(0.28); transform: rotateY(0deg) translateX(var(--combat-hit-x)) rotate(-1.5deg); }
  70% { transform: rotateY(0deg) translateX(var(--combat-hit-return-x)) rotate(0.6deg); }
}

@keyframes combat-damage-float {
  0% { opacity: 0; transform: translate(-50%, 7px) scale(0.72) rotate(-3deg); }
  22% { opacity: 1; transform: translate(-50%, -5px) scale(1.12) rotate(1deg); }
  68% { opacity: 1; transform: translate(-50%, -19px) scale(1) rotate(-0.5deg); }
  100% { opacity: 0; transform: translate(-50%, -32px) scale(0.92); }
}

@keyframes combat-card-defeat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--card-rotation, 0deg)) scale(var(--card-display-scale, 1));
  }
  50% {
    opacity: 0.78;
    transform: translate(-50%, calc(-50% + 11px)) rotate(calc(var(--card-rotation, 0deg) + 5deg)) scale(calc(var(--card-display-scale, 1) * 0.96));
    filter: grayscale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 34px)) rotate(calc(var(--card-rotation, 0deg) + 9deg)) scale(calc(var(--card-display-scale, 1) * 0.82));
    filter: grayscale(1);
  }
}

@keyframes combat-enemy-defeat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1));
    filter: none;
  }
  18% {
    opacity: 1;
    transform: translate(calc(-50% + var(--combat-hit-x, 0px)), calc(-50% - 10px))
      rotate(calc(var(--card-rotation, 0deg) - 4deg))
      scale(calc(var(--card-display-scale, 1) * 1.07));
    filter: brightness(1.45) saturate(0.7) drop-shadow(0 0 12px rgb(245 211 111 / 62%));
  }
  42% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 3px))
      rotate(calc(var(--card-rotation, 0deg) + 8deg))
      scale(calc(var(--card-display-scale, 1) * 0.98));
    filter: brightness(0.86) grayscale(0.35);
  }
  72% {
    opacity: 0.78;
    transform: translate(-50%, calc(-50% + 24px))
      rotate(calc(var(--card-rotation, 0deg) + 16deg))
      scale(calc(var(--card-display-scale, 1) * 0.86));
    filter: grayscale(0.78);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 48px))
      rotate(calc(var(--card-rotation, 0deg) + 22deg))
      scale(calc(var(--card-display-scale, 1) * 0.68));
    filter: grayscale(1) blur(1px);
  }
}

@keyframes trophy-card-emerge {
  0% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--trophy-origin-x, 0px)),
        calc(-50% + var(--trophy-origin-y, 0px) + 10px)
      )
      rotate(calc(var(--card-rotation, 0deg) - 9deg))
      scale(calc(var(--card-display-scale, 1) * 0.42));
  }
  14% {
    opacity: 1;
  }
  42% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--trophy-arc-x, 0px)),
        calc(-50% + var(--trophy-arc-y, -42px))
      )
      rotate(calc(var(--card-rotation, 0deg) + 4deg))
      scale(calc(var(--card-display-scale, 1) * 0.84));
  }
  72% {
    transform: translate(-50%, calc(-50% + 8px))
      rotate(calc(var(--card-rotation, 0deg) + 1.5deg))
      scale(calc(var(--card-display-scale, 1) * 1.08));
  }
  88% {
    transform: translate(-50%, calc(-50% - 3px))
      rotate(calc(var(--card-rotation, 0deg) - 0.6deg))
      scale(calc(var(--card-display-scale, 1) * 0.985));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%)
      rotate(var(--card-rotation, 0deg))
      scale(var(--card-display-scale, 1));
  }
}

@keyframes trophy-card-reveal-flip {
  0%, 18% { transform: rotateY(150deg); }
  54%, 100% { transform: rotateY(0deg); }
}

@keyframes trophy-label-arrive {
  0%, 45% { opacity: 0; transform: translate(-50%, 8px) scale(0.82) rotate(-3deg); }
  64% { opacity: 1; transform: translate(-50%, -4px) scale(1.1) rotate(1deg); }
  82%, 100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes combat-victory-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.2); }
}

@keyframes combat-victory-ray {
  0% { opacity: 0; transform: rotate(var(--burst-angle)) translateY(0) scaleY(0.4); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--burst-angle)) translateY(-52px) scaleY(0.9); }
}

@keyframes combat-arena-victory {
  0% { opacity: 0.9; filter: none; }
  22% { opacity: 1; filter: brightness(1.45) drop-shadow(0 0 13px rgb(242 191 79 / 54%)); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-0.5deg) scale(1.08); }
}

@media (max-width: 640px) {
  .forest-edge {
    --forest-scale: 0.72;
  }

  .forest-edge__tree--secondary {
    display: none;
  }

  body.is-world-object-tool .forest-edge__tree--secondary {
    display: block;
  }

  .game-shell {
    min-height: 520px;
  }

  .game-header {
    top: 18px;
    left: 20px;
  }

  .day-cycle-hud {
    top: 12px;
    grid-template-columns: 38px minmax(140px, 1fr) auto;
    width: min(430px, calc(100% - 32px));
  }

  .day-cycle-hud__sky {
    width: 36px;
    height: 36px;
  }

  .game-header {
    display: none;
  }

  .challenge-panel {
    top: 84px;
    left: 20px;
    width: min(300px, calc(100% - 40px));
  }

  .challenge-panel__summary,
  .challenge-steps li:nth-child(2) {
    display: none;
  }

  .camera-help {
    max-width: 150px;
    border-radius: 8px;
    line-height: 1.3;
    text-align: right;
  }

  .game-status {
    top: auto;
    bottom: 16px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-chopping-impact .card__paper,
  .card.is-campfire-emerging .card__paper,
  .material-impact-burst,
  .material-impact-burst i,
  .firemaking-stage-burst,
  .firemaking-stage-burst i,
  .card.has-work[data-job-definition^="build_campfire"] .card__art-wrap::after,
  .card[data-definition-id="campfire"] .card__art-wrap::before,
  .card[data-definition-id="campfire"] .card__art,
  .card.is-pack,
  .card.is-revealing,
  .card.is-revealing .card__flip,
  .card.is-work-output,
  .card.is-source-producing .card__paper,
  .card.is-worker-finishing .card__paper,
  .card.is-knapping-impact .card__paper,
  .card.is-knapping-final .card__paper,
  .card.is-handaxe-forged .card__flip,
  .card.is-handaxe-forged .card__paper,
  .handaxe-impact-burst,
  .handaxe-impact-burst i,
  .card.is-source-producing .work-gauge,
  .card.is-source-producing .work-gauge__fill,
  .card.is-source-depleting,
  .card.is-source-depleting .card__paper,
  .card.is-source-depleting .work-gauge,
  .card.is-source-depleting::before,
  .card.is-source-depleting::after,
  .card.is-action-returning,
  .card.is-threat-entering,
  .card.is-equipment-equipped .card__paper,
  .card.is-handaxe-equipped .card__paper,
  .card.is-handaxe-attaching .card__paper,
  .card.is-handaxe-detaching .card__paper,
  .card.is-handaxe-equipped .card__stat--combat,
  .card.is-handaxe-unequipped .card__stat--combat,
  .card.is-handaxe-equipped .card__stat--combat::after,
  .card.is-combat-attacking .card__paper,
  .card.is-combat-countering .card__paper,
  .card.is-combat-hit .card__paper,
  .card.is-combat-struck .card__paper,
  .combat-damage,
  .card.is-combat-defeated,
  .card.is-enemy-defeated,
  .card.is-trophy-emerging,
  .card.is-trophy-emerging .card__flip,
  .card.is-trophy-emerging::after,
  .combat-victory-burst,
  .combat-victory-burst i,
  .combat-arena.is-victory-impact,
  .card.is-collection-receiving .card__paper,
  .card.is-collection-receiving .collection-count,
  .card.is-collection-placed .card__paper,
  .card.is-collection-placed .collection-count,
  .card.is-rebounding,
  .card.is-impact-nudged,
  .card.is-relationship-bonding .card__paper,
  .relationship-heart-burst i,
  .fog-frontier-pulse,
  .challenge-complete {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }

  .card.is-relationship-forming {
    transition-duration: 1ms;
  }
}