/* [project]/public/css/forge-chamber.css [app-client] (css) */
.fc-forge {
  --fc-wall: #2c2021;
  --fc-surface: #17100ef0;
  --fc-surface-lit: #261a16f5;
  --fc-gold: #f5be4e;
  --fc-gold-dim: #f5be4e61;
  --fc-ember: #ff7a2f;
  --fc-ash: #e2d4c4b8;
  color: var(--fc-ash);
  font-family: Special Elite, system-ui, sans-serif;
}

.fc-panel {
  background: var(--fc-surface);
  border: 2px solid var(--fc-gold-dim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  box-shadow: inset 0 1px #f5be4e29, 0 18px 44px #0000008c;
}

.fc-panel--lit {
  background: var(--fc-surface-lit);
  border-color: var(--fc-gold);
}

.fc-slot {
  background: #00000047;
  border: 1px solid #f5be4e38;
  border-radius: 8px;
  transition: border-color .14s, background-color .14s, transform .14s;
  position: relative;
}

.fc-slot:hover:not(.fc-slot--locked) {
  border-color: var(--fc-gold-dim);
  transform: translateY(-1px);
}

.fc-slot--filled {
  border-color: var(--fc-gold);
  background: #f5be4e12;
  animation: .22s cubic-bezier(.22, 1.2, .36, 1) fc-seat;
}

.fc-slot--locked {
  opacity: .4;
  cursor: not-allowed;
}

@keyframes fc-seat {
  0% {
    transform: translateY(-7px)scale(1.02);
  }

  70% {
    transform: translateY(1px)scale(.995);
  }

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

.fc-slot--wanted:after {
  content: "";
  border: 1px solid var(--fc-gold);
  opacity: 0;
  pointer-events: none;
  border-radius: 8px;
  animation: 2.4s ease-in-out infinite fc-wanted;
  position: absolute;
  inset: -1px;
}

@keyframes fc-wanted {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }
}

.fc-hearth {
  letter-spacing: .06em;
  color: #e2d4c480;
  background: #00000059;
  border: 2px solid #f5be4e33;
  border-radius: 10px;
  font-family: inherit;
  transition: color .2s, border-color .2s, background-color .2s;
  position: relative;
}

.fc-hearth--ready {
  color: #1b1210;
  background: linear-gradient(180deg, var(--fc-gold) 0%, #d99a2b 100%);
  border-color: var(--fc-gold);
  animation: 3.2s ease-in-out infinite fc-ember;
}

.fc-hearth--ready:hover {
  filter: brightness(1.08);
}

@keyframes fc-ember {
  0%, 100% {
    box-shadow: 0 0 18px 2px #ff7a2f47;
  }

  50% {
    box-shadow: 0 0 30px 6px #ff7a2f80;
  }
}

.fc-stage {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.fc-stage--forging:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(0deg, #ff7a2f38 0%, #ff7a2f0d 45%, #0000 75%);
  animation: 2.6s ease-in-out infinite fc-heat;
  position: absolute;
  inset: 0;
}

@keyframes fc-heat {
  0%, 100% {
    opacity: .45;
    transform: translateY(6%);
  }

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

.fc-spark {
  width: var(--spark-size, 3px);
  height: var(--spark-size, 3px);
  background: var(--fc-ember);
  animation: fc-spark-rise var(--spark-life, 1.5s) cubic-bezier(.15, .6, .4, 1)
    infinite;
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 6px 1px #ff7a2fe6, 0 0 14px 3px #ff7a2f59;
}

@keyframes fc-spark-rise {
  0% {
    opacity: 0;
    transform: translate(0)scale(.4);
  }

  10% {
    opacity: 1;
    transform: translate(calc(var(--spark-drift, 0px) * .2), -12%) scale(1);
  }

  70% {
    opacity: .85;
  }

  100% {
    opacity: 0;
    transform: translate(var(--spark-drift, 0px), -190px) scale(.15);
  }
}

.fc-stage--forging {
  animation: 1.5s ease-out infinite fc-anvil;
}

@keyframes fc-anvil {
  0%, 100% {
    transform: translateY(0);
  }

  4% {
    transform: translateY(3px)scaleY(.994);
  }

  12% {
    transform: translateY(-1px);
  }

  22% {
    transform: translateY(0);
  }
}

.fc-stage--forging:after {
  content: "";
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 100%, #ffd68cd9 0%, #ff7a2f80 35%, #0000 70%);
  animation: 1.5s ease-out infinite fc-anvil-flare;
  position: absolute;
  inset: 0;
}

@keyframes fc-anvil-flare {
  0% {
    opacity: .7;
  }

  30% {
    opacity: .05;
  }

  100% {
    opacity: 0;
  }
}

.fc-arrival {
  z-index: 4;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.fc-flash {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, #fff 0%, #ffe2a8e6 25%, #ff7a2f80 45%, #0000 70%);
  animation: 1.1s cubic-bezier(.1, .8, .2, 1) fc-flash;
  position: absolute;
  inset: 0;
}

@keyframes fc-flash {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  6% {
    opacity: 1;
    transform: scale(1.1);
  }

  30% {
    opacity: .5;
    transform: scale(1);
  }

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

.fc-shock {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  border: 3px solid #ffd68ce6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  animation: 1.2s cubic-bezier(.12, .7, .2, 1) fc-shock;
  position: absolute;
  top: 55%;
  left: 50%;
}

.fc-shock--late {
  border-color: #ff7a2fbf;
  animation-delay: .16s;
}

@keyframes fc-shock {
  0% {
    opacity: 0;
    border-width: 5px;
    transform: scale(.2);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    border-width: 1px;
    transform: scale(9);
  }
}

.fc-hero-reveal {
  animation: 2.4s cubic-bezier(.16, 1, .3, 1) fc-hero-reveal;
}

@keyframes fc-hero-reveal {
  0% {
    opacity: 0;
    filter: brightness(5) saturate(0) blur(10px);
    transform: scale(.72);
  }

  12% {
    opacity: 1;
    filter: brightness(4) saturate(.1) blur(6px);
  }

  38% {
    filter: brightness(1.9) saturate(.6) blur(1px);
    transform: scale(1.08);
  }

  62% {
    filter: brightness(1.25) saturate(.9) blur();
    transform: scale(.985);
  }

  100% {
    opacity: 1;
    filter: brightness() saturate() blur();
    transform: scale(1);
  }
}

.fc-burst {
  z-index: 6;
  pointer-events: none;
  position: absolute;
  top: 55%;
  left: 50%;
}

.fc-burst span {
  opacity: 0;
  width: 4px;
  height: 4px;
  animation: 1.5s cubic-bezier(.1, .7, .25, 1) fc-burst;
  animation-delay: var(--ember-delay, 0s);
  background: #ffd68c;
  border-radius: 50%;
  margin: -2px 0 0 -2px;
  position: absolute;
  box-shadow: 0 0 8px 2px #ff7a2fe6;
}

@keyframes fc-burst {
  0% {
    opacity: 0;
    transform: rotate(var(--ember-angle, 0deg)) translateX(0) scale(.5);
  }

  8% {
    opacity: 1;
    transform: rotate(var(--ember-angle, 0deg)) translateX(10px) scale(1.3);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--ember-angle, 0deg))
      translateX(var(--ember-reach, 150px)) scale(.2);
  }
}

.fc-strike {
  animation: .9s cubic-bezier(.2, .9, .2, 1) fc-strike;
}

@keyframes fc-strike {
  0% {
    opacity: 0;
    filter: brightness(3);
    transform: scale(1.14);
  }

  18% {
    opacity: 1;
    filter: brightness(1.6);
    transform: scale(.99);
  }

  40% {
    filter: brightness();
    transform: scale(1.01);
  }

  100% {
    opacity: 1;
    filter: brightness();
    transform: scale(1);
  }
}

.fc-awaiting {
  animation: 1.8s ease-in-out infinite fc-breathe;
}

@keyframes fc-breathe {
  0%, 100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }
}

.fc-forge {
  z-index: 20;
  width: min(520px, 66vw - 24px);
  position: fixed;
  top: 108px;
  bottom: clamp(12px, 3vh, 32px);
  left: 33.333vw;
}

.fc-panel {
  flex-direction: column;
  max-height: 100%;
  display: flex;
  overflow: hidden;
}

.fc-handle {
  z-index: 20;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: #f5be4e;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  background: #17100ef0;
  border: 2px solid #f5be4e61;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: min(520px, 66vw - 24px);
  padding: 12px 16px;
  font-family: Special Elite, system-ui, sans-serif;
  font-size: 1.05rem;
  transition: border-color .16s, background-color .16s;
  display: flex;
  position: fixed;
  top: 108px;
  left: 33.333vw;
  box-shadow: inset 0 1px #f5be4e29, 0 18px 44px #0000008c;
}

.fc-handle:hover {
  background: #261a16f5;
  border-color: #f5be4e;
}

.fc-handle:after {
  content: "⌄";
  opacity: .8;
  font-size: 1.2rem;
  line-height: .6;
}

@media (max-width: 640px) {
  .fc-handle {
    width: auto;
    left: 8px;
    right: 8px;
  }
}

.fc-head {
  border-bottom: 1px solid #f5be4e2e;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.fc-head h2 {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fc-gold);
  margin: 0;
  font-size: 1.05rem;
}

.fc-close {
  color: var(--fc-ash);
  cursor: pointer;
  opacity: .7;
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
}

.fc-close:hover {
  opacity: 1;
}

.fc-body {
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  display: flex;
  overflow-y: auto;
}

.fc-empty {
  text-align: center;
  align-items: center;
  gap: 14px;
  padding: 26px 18px;
}

.fc-stage {
  aspect-ratio: 1;
  background: #00000052;
  border: 1px solid #f5be4e29;
  flex-shrink: 0;
  place-items: center;
  display: grid;
  position: relative;
}

.fc-hero {
  position: absolute;
  inset: 0;
}

.fc-hero img {
  object-fit: contain;
  image-rendering: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.fc-factions {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.fc-faction {
  letter-spacing: .06em;
  color: var(--fc-ash);
  cursor: pointer;
  background: #0000004d;
  border: 1px solid #f5be4e38;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: .72rem;
  transition: color .14s, border-color .14s;
}

.fc-faction--on {
  color: #1b1210;
  background: var(--fc-gold);
  border-color: var(--fc-gold);
}

.fc-slots {
  flex-shrink: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
  overflow-x: hidden;
}

:root {
  --fc-slot-h: 37px;
  --fc-select-h: calc(3 * var(--fc-slot-h) + 2 * 8px);
}

.fc-slot {
  min-height: var(--fc-slot-h);
  cursor: pointer;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 6px;
  min-width: 0;
  padding: 4px 6px;
  display: grid;
}

.fc-slot-art {
  object-fit: contain;
  flex-shrink: 0;
  grid-area: 1 / 1 / -1;
  width: 26px;
  height: 26px;
}

.fc-slot-count {
  grid-area: 1 / 2;
}

.fc-slot-label {
  grid-area: 2 / 2;
}

.fc-slot-count, .fc-slot-label {
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.fc-slot-label {
  letter-spacing: .04em;
  opacity: .85;
  font-size: .6rem;
  line-height: 1.15;
}

.fc-slot-count {
  font-variant-numeric: tabular-nums;
  color: var(--fc-gold);
  opacity: .75;
  font-size: .62rem;
}

.fc-actions {
  flex-shrink: 0;
  gap: 8px;
  display: flex;
}

.fc-result {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 4px;
  display: flex;
}

.fc-result-title {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fc-gold);
  margin: 0;
  font-size: 1.05rem;
}

.fc-result-sub {
  opacity: .7;
  margin: 0;
  font-size: .76rem;
}

.fc-result .fc-hearth {
  flex: none;
  margin-top: 4px;
  padding: 9px 22px;
}

.fc-forge [hidden] {
  display: none !important;
}

.fc-secondary {
  letter-spacing: .05em;
  color: var(--fc-ash);
  cursor: pointer;
  background: #00000057;
  border: 1px solid #f5be4e33;
  border-radius: 10px;
  flex: none;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .78rem;
}

.fc-secondary:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.fc-hearth {
  cursor: pointer;
  flex: 1;
  padding: 9px 14px;
}

.fc-hearth:disabled {
  cursor: not-allowed;
}

.fc-note, .fc-hint, .fc-error, .fc-awaiting {
  margin: 0;
  font-size: .76rem;
  line-height: 1.45;
}

.fc-hint {
  opacity: .6;
  text-align: center;
}

.fc-note {
  color: var(--fc-gold);
}

.fc-error {
  color: #ff8a7a;
}

@media (max-width: 640px) {
  .fc-forge {
    width: auto;
    left: 8px;
    right: 8px;
  }
}

.fc-picker {
  --fc-gold: #f5be4e;
  --fc-gold-dim: #f5be4e61;
  --fc-ash: #e2d4c4b8;
  z-index: 30;
  width: min(640px, 66vw - 24px);
  color: var(--fc-ash);
  border: 2px solid var(--fc-gold);
  background: #1a1210;
  border-radius: 12px;
  flex-direction: column;
  font-family: Special Elite, system-ui, sans-serif;
  display: flex;
  position: fixed;
  top: 108px;
  bottom: clamp(12px, 3vh, 32px);
  left: 33.333vw;
  box-shadow: inset 0 1px #f5be4e29, 0 18px 44px #0009;
}

@media (max-width: 640px) {
  .fc-picker {
    width: auto;
    left: 8px;
    right: 8px;
  }
}

.fc-picker-head {
  border-bottom: 1px solid #f5be4e2e;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.fc-picker-title {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fc-gold);
  font-size: .95rem;
}

.fc-picker-tools {
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}

.fc-picker-search {
  color: var(--fc-ash);
  background: #00000059;
  border: 1px solid #f5be4e38;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: .8rem;
}

.fc-picker-search:focus-visible {
  outline: 2px solid var(--fc-gold);
  outline-offset: 1px;
}

.fc-picker-sorts {
  gap: 6px;
  display: flex;
}

.fc-chip {
  letter-spacing: .06em;
  color: var(--fc-ash);
  cursor: pointer;
  background: #0000004d;
  border: 1px solid #f5be4e38;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: .68rem;
}

.fc-chip--on {
  color: #1b1210;
  background: var(--fc-gold);
  border-color: var(--fc-gold);
}

.fc-picker-list {
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 14px;
  display: flex;
  overflow-y: auto;
}

.fc-picker-clear {
  color: var(--fc-ash);
  cursor: pointer;
  background: #0000004d;
  border: 1px dashed #f5be4e4d;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 7px;
  font-family: inherit;
  font-size: .72rem;
}

.fc-card {
  text-align: left;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 10px;
  flex-shrink: 0;
  gap: 8px;
  padding: 6px;
  transition: border-color .14s, background-color .14s;
  display: flex;
}

.fc-card:hover {
  border-color: var(--fc-gold-dim);
}

.fc-card:focus-visible {
  outline: 2px solid var(--fc-gold);
  outline-offset: 1px;
}

.fc-card--on {
  border-color: var(--fc-gold);
  background: #f5be4e12;
}

.fc-card-art {
  background: #00000059;
  border: 1px solid #ffffff0f;
  border-radius: 8px;
  flex: 0 0 56px;
  place-items: center;
  height: 56px;
  display: grid;
}

.fc-card-art img {
  object-fit: contain;
  width: 50px;
  height: 50px;
}

.fc-card-panel {
  flex: 1;
  min-width: 0;
}

.fc-affixes {
  border-top: 1px solid #ffffff14;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 4px;
  display: flex;
}

.fc-affix {
  white-space: nowrap;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
}

.fc-affix--none {
  color: #ffffff1f;
  border: 1px solid #ffffff0f;
}

.fc-card-tags, .fc-stat-line {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.fc-tag {
  white-space: nowrap;
  background: #f5be4e1a;
  border: 1px solid #f5be4e33;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .62rem;
}

.fc-tag--skill {
  background: #78b4ff1f;
  border-color: #78b4ff4d;
}

.fc-tag--affix {
  background: #be82ff1f;
  border-color: #be82ff4d;
}

.fc-tag--visual {
  background: #ff7a2f29;
  border-color: #ff7a2f66;
}

.fc-q {
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .68rem;
}

.fc-q--common {
  color: #a8a29a;
}

.fc-q--uncommon {
  color: #7fc98a;
}

.fc-q--rare {
  color: #6ab0f3;
}

.fc-q--epic {
  color: #c084fc;
}

.fc-q--legendary {
  color: #f5be4e;
}

.fc-stats {
  background: #00000042;
  border: 1px solid #f5be4e29;
  border-radius: 8px;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  padding: 10px;
  display: flex;
}

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

.fc-stat {
  background: #0000004d;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 2px;
  display: flex;
}

.fc-stat-name {
  letter-spacing: .06em;
  opacity: .6;
  font-size: .58rem;
}

.fc-stat-value {
  color: var(--fc-gold);
  font-variant-numeric: tabular-nums;
  font-size: .98rem;
}

.fc-stat-delta {
  opacity: .75;
  font-size: .55rem;
}

.fc-stat-delta--up {
  color: #7fc98a;
}

.fc-stat-block {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.fc-stat-label {
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  margin-right: 2px;
  font-size: .6rem;
}

.fc-stat-line {
  margin: 0;
  font-size: .7rem;
}

.fc-dim {
  opacity: .6;
}

.fc-stats--compact .fc-stat-line {
  font-size: .66rem;
}

.fc-crucible {
  --fc-forge-scale: 1.75;
  z-index: 120;
  pointer-events: auto;
  --fc-fusion-duration: calc(12.6s * var(--fc-forge-scale, 1));
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.fc-forging-active .main {
  z-index: 120;
}

body:has(.fc-crucible) .main {
  z-index: 120;
}

.fc-room-scrim {
  animation: fc-fusion-scrim var(--fc-fusion-duration) ease-out both;
  background: radial-gradient(60% 56% at 50% 58%, #99431224, #0000 52%), #080504e0;
  position: absolute;
  inset: 0;
}

@keyframes fc-fusion-scrim {
  0% {
    opacity: 0;
  }

  8%, 100% {
    opacity: 1;
  }
}

.fc-forge-stage {
  aspect-ratio: 1484 / 1060;
  isolation: isolate;
  --fc-hero-size: 27%;
  --fc-hero-radius: 14%;
  --fc-hero-final-scale: .94;
  filter: drop-shadow(0 30px 46px #000000b3);
  width: min(92vw, 1180px);
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.fc-forge-painting {
  z-index: 1;
  object-fit: cover;
  filter: brightness(.58) saturate(.72);
  width: 100%;
  height: 100%;
  animation: fc-forge-awaken var(--fc-fusion-duration) ease-out both;
  position: absolute;
  inset: 0;
}

@keyframes fc-forge-awaken {
  0%, 12% {
    filter: brightness(.5) saturate(.62);
  }

  52% {
    filter: brightness(.68) saturate(.86);
  }

  66% {
    filter: brightness(1.14) saturate(1.16);
  }

  74%, 100% {
    filter: brightness(.84) saturate(.98);
  }
}

.fc-forge-vignette {
  z-index: 2;
  background: linear-gradient(#07040338, #0000 24% 76%, #0704036b), radial-gradient(70% 70% at 50% 58%, #0000 38%, #0704038a 100%);
  position: absolute;
  inset: -1px;
}

.fc-painted-slot-flame, .fc-painted-furnace-flame {
  background-image: var(--fc-forge-art);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, filter, opacity;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  inset: 0;
}

.fc-painted-slot-flame {
  z-index: 3;
  clip-path: ellipse(var(--painted-flame-radius-x) var(--painted-flame-radius-y) at var(--socket-x) var(--socket-y));
  opacity: var(--painted-flame-opacity);
  transform-origin: var(--socket-x) var(--socket-y);
  animation: fc-painted-flame-flicker var(--painted-flame-speed) ease-in-out var(--painted-flame-delay) infinite alternate;
}

.fc-painted-furnace-flame {
  z-index: 4;
  clip-path: ellipse(6.6% 13.5% at 50% 63%);
  opacity: .28;
  transform-origin: 50% 72%;
  animation: .82s ease-in-out -360ms infinite alternate fc-painted-furnace-flicker;
}

@keyframes fc-painted-flame-flicker {
  0% {
    opacity: calc(var(--painted-flame-opacity) * .58);
    filter: brightness(.92) saturate(.96);
    transform: scale(1, .975)translateY(0);
  }

  38% {
    opacity: var(--painted-flame-opacity);
    transform: scale(1.001, var(--painted-flame-stretch)) translateY(var(--painted-flame-lift));
    filter: brightness(1.13) saturate(1.08);
  }

  72% {
    opacity: calc(var(--painted-flame-opacity) * .76);
    transform: scale(.999, calc(var(--painted-flame-stretch) - .012)) translateY(-0.04%);
    filter: brightness(1.02) saturate(1.02);
  }

  100% {
    opacity: calc(var(--painted-flame-opacity) * 1.08);
    transform: scale(1.002, calc(var(--painted-flame-stretch) + .035)) translateY(calc(var(--painted-flame-lift) - 0.04%));
    filter: brightness(1.2) saturate(1.12);
  }
}

@keyframes fc-painted-furnace-flicker {
  0% {
    opacity: .18;
    filter: brightness(.94) saturate(.96);
    transform: scale(1, .98)translateY(0);
  }

  42% {
    opacity: .34;
    filter: brightness(1.12) saturate(1.08);
    transform: scale(1.002, 1.045)translateY(-.08%);
  }

  76% {
    opacity: .25;
    filter: brightness(1.02) saturate(1.02);
    transform: scale(.999, 1.018)translateY(-.03%);
  }

  100% {
    opacity: .4;
    filter: brightness(1.2) saturate(1.12);
    transform: scale(1.003, 1.082)translateY(-.13%);
  }
}

.fc-forge-socket {
  left: var(--socket-x);
  top: var(--socket-y);
  z-index: 5;
  aspect-ratio: 1;
  width: clamp(30px, 6vw, 78px);
  box-shadow: none;
  opacity: 1;
  background: none;
  border: 0;
  border-radius: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}

.fc-forge-flow {
  width: var(--flow-length);
  opacity: 0;
  height: clamp(3px, .45vw, 7px);
  transform: rotate(var(--flow-angle)) scaleX(0);
  transform-origin: 0;
  animation: fc-runic-flow calc(1.55s * var(--fc-forge-scale, 1)) cubic-bezier(.2, .76, .2, 1) var(--flow-delay) both;
  background: linear-gradient(90deg, #ffe292f2, #ff881dd1 56%, #0000);
  border-radius: 999px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 10px #ff8118cc, 0 0 22px #ff4c0c70;
}

@keyframes fc-runic-flow {
  0% {
    opacity: 0;
    transform: rotate(var(--flow-angle)) scaleX(0);
  }

  18% {
    opacity: 1;
  }

  72% {
    opacity: .9;
    transform: rotate(var(--flow-angle)) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--flow-angle)) scaleX(1);
  }
}

.fc-fusion-part {
  left: var(--start-x);
  top: var(--start-y);
  z-index: 7;
  aspect-ratio: 1;
  opacity: 0;
  will-change: left, top, transform, opacity, filter;
  width: clamp(46px, 6.8vw, 88px);
  animation: fc-relic-to-socket calc(7.8s * var(--fc-forge-scale, 1)) cubic-bezier(.32, .04, .18, 1) var(--part-delay) both;
  position: absolute;
  transform: translate(-50%, -50%)scale(.58)rotate(-68deg);
}

.fc-part-seal {
  background: radial-gradient(circle, #5d3018f5, #120b09fa 72%);
  border: clamp(1px, .18vw, 3px) solid #e1a03de0;
  border-radius: 16%;
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #ffdc861f, 0 0 14px #ff7d1e8a, 0 8px 18px #00000094;
}

.fc-part-seal:before {
  content: "";
  z-index: 2;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: fc-relic-heat calc(7.8s * var(--fc-forge-scale, 1)) ease-in-out var(--part-delay) both;
  background: radial-gradient(circle at 50% 60%, #fff6c5e0, #ff96276b 52%, #0000 78%);
  position: absolute;
  inset: 0;
}

.fc-part-seal:after {
  content: "";
  z-index: 3;
  animation: fc-relic-glint calc(2.2s * var(--fc-forge-scale, 1)) ease-in-out var(--part-delay) both;
  background: linear-gradient(115deg, #0000 34%, #ffe4a057 49%, #0000 64%);
  position: absolute;
  inset: -20%;
  transform: translateX(-100%);
}

.fc-part-seal img, .fc-fusion-placeholder {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.fc-part-seal img {
  filter: sepia(.18) contrast(1.08) saturate(.86);
}

.fc-fusion-part[data-part-type="Background"] .fc-part-seal img {
  filter: sepia(.24) contrast(1.12) saturate(.9) brightness(.56);
}

.fc-fusion-placeholder {
  background: linear-gradient(135deg, #0000 45%, #f5be4e8c 47%, #0000 52%), linear-gradient(45deg, #0000 45%, #f5be4e8c 47%, #0000 52%);
}

@keyframes fc-relic-glint {
  0%, 30% {
    transform: translateX(-100%);
  }

  66%, 100% {
    transform: translateX(100%);
  }
}

@keyframes fc-relic-heat {
  0%, 50% {
    opacity: 0;
  }

  68% {
    opacity: .08;
  }

  84% {
    opacity: .24;
  }

  100% {
    opacity: .46;
  }
}

@keyframes fc-relic-to-socket {
  0%, 5% {
    left: var(--start-x);
    top: var(--start-y);
    opacity: 0;
    transform: translate(-50%, -50%)scale(.58)rotate(-68deg);
  }

  13%, 22% {
    left: var(--start-x);
    top: var(--start-y);
    opacity: 1;
    transform: translate(-50%, -50%)scale(1)rotate(24deg);
  }

  36% {
    left: var(--mid-x);
    top: var(--mid-y);
    opacity: 1;
    transform: translate(-50%, -50%)scale(.9)rotate(196deg);
  }

  51% {
    left: var(--socket-x);
    top: var(--socket-y);
    opacity: 1;
    filter: brightness(1.45) saturate(1.14);
    transform: translate(-50%, -50%)scale(.6)rotate(388deg);
  }

  68% {
    left: var(--approach-x);
    top: var(--approach-y);
    opacity: .9;
    filter: brightness(1.5) saturate(1.18);
    transform: translate(-50%, -50%)scale(.5)rotate(474deg);
  }

  82% {
    opacity: .48;
    filter: brightness(1.72) saturate(1.24);
    top: 61.8%;
    left: 50%;
    transform: translate(-50%, -50%)scale(.32)rotate(552deg);
  }

  92% {
    opacity: .16;
    filter: brightness(1.9) saturate(1.3) blur(.25px);
    top: 62.6%;
    left: 50%;
    transform: translate(-50%, -50%)scale(.2)rotate(606deg);
  }

  100% {
    opacity: 0;
    filter: brightness(2) saturate(1.34) blur(.7px);
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%)scale(.1)rotate(648deg);
  }
}

.fc-fusion-reaction {
  z-index: 9;
  clip-path: polygon(22% 0, 78% 0, 89% 9%, 95% 21%, 96% 100%, 4% 100%, 5% 21%, 11% 9%);
  isolation: isolate;
  mix-blend-mode: screen;
  pointer-events: none;
  width: 18.2%;
  height: 28.5%;
  animation: fc-reaction-chamber-jolt var(--fc-fusion-duration) linear both;
  border-radius: 46% 46% 8% 8% / 25% 25% 7% 7%;
  position: absolute;
  top: 62.3%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.fc-fusion-reaction i {
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
  display: block;
  position: absolute;
}

.fc-fusion-reaction i[data-reaction-layer="undertow"], .fc-fusion-reaction i[data-reaction-layer="counterflow"] {
  z-index: 2;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
}

.fc-fusion-reaction i[data-reaction-layer="undertow"] {
  background: conic-gradient(from -18deg,
    transparent 0 5%, #ff640ad6 7% 10%, transparent 12% 21%,
    #ffe68ff5 23% 26%, transparent 29% 45%,
    #ff7e0de0 47% 51%, transparent 54% 67%,
    #fff6bdfa 69% 72%, transparent 75% 88%,
    #ff5407cc 90% 94%, transparent 97%);
  filter: blur(.45px) drop-shadow(0 0 7px #ff4a05e6);
  width: 148%;
  animation: fc-reaction-undertow var(--fc-fusion-duration) cubic-bezier(.26, .66, .2, 1) both;
  top: 73%;
  -webkit-mask: radial-gradient(circle, #0000 0 50%, #000 53% 58%, #0000 62%);
  mask: radial-gradient(circle, #0000 0 50%, #000 53% 58%, #0000 62%);
}

.fc-fusion-reaction i[data-reaction-layer="counterflow"] {
  background: conic-gradient(from 31deg,
    transparent 0 11%, #fff5c2fa 13% 17%, transparent 20% 36%,
    #ff6608e6 38% 43%, transparent 46% 61%,
    #ffd65bf2 63% 67%, transparent 70% 85%,
    #ff5005d6 87% 91%, transparent 94%);
  filter: blur(.35px) drop-shadow(0 0 6px #ffb128eb);
  width: 112%;
  animation: fc-reaction-counterflow var(--fc-fusion-duration) cubic-bezier(.26, .66, .2, 1) both;
  top: 69%;
  -webkit-mask: radial-gradient(circle, #0000 0 41%, #000 45% 51%, #0000 55%);
  mask: radial-gradient(circle, #0000 0 41%, #000 45% 51%, #0000 55%);
}

.fc-fusion-reaction i[data-reaction-layer="core"] {
  z-index: 3;
  width: 34%;
  height: 16%;
  animation: fc-reaction-core var(--fc-fusion-duration) cubic-bezier(.22, .7, .16, 1) both;
  background: radial-gradient(#fff 0 13%, #fffbd7 26%, #ffd55f 48%, #ff4a04b8 70%, #0000 82%);
  border-radius: 50%;
  top: 72%;
  left: 50%;
  box-shadow: 0 0 9px 3px #ffffd9eb, 0 0 24px 8px #ff7a0cd1;
}

.fc-fusion-reaction i[data-reaction-layer="burst"] {
  z-index: 4;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 7deg,
    #fffcd7fa 0 2deg,
    #ff5b06db 2deg 5deg,
    transparent 5deg 13deg);
  mix-blend-mode: normal;
  filter: blur(.35px) drop-shadow(0 0 8px #ff7a12f5);
  width: 138%;
  animation: fc-reaction-burst var(--fc-fusion-duration) cubic-bezier(.16, .72, .18, 1) both;
  border-radius: 50%;
  top: 69%;
  left: 50%;
  -webkit-mask: radial-gradient(circle, #0000 0 8%, #000 13% 54%, #0000 78%);
  mask: radial-gradient(circle, #0000 0 8%, #000 13% 54%, #0000 78%);
}

.fc-fusion-reaction i[data-reaction-layer="flare"] {
  z-index: 1;
  filter: blur(1.2px) drop-shadow(0 -8px 12px #ff5b08db);
  transform-origin: 50% 100%;
  height: 88%;
  animation: fc-reaction-flare var(--fc-fusion-duration) cubic-bezier(.2, .7, .18, 1) both;
  background: radial-gradient(at 50% 91%, #ffffe3fa 0 10%, #ffd045e6 24%, #0000 51%), radial-gradient(at 31% 69%, #fff4b2f0 0 8%, #ff690abd 25%, #0000 47%), radial-gradient(at 69% 60%, #fff5b4eb 0 7%, #ff5707b3 24%, #0000 45%);
  border-radius: 48% 48% 12% 12% / 62% 62% 10% 10%;
  bottom: 4%;
  left: 13%;
  right: 13%;
}

@keyframes fc-reaction-undertow {
  0%, 44% {
    opacity: 0;
    transform: translate(-50%, -50%)rotate(-40deg)scale(.7, .48);
  }

  53% {
    opacity: .35;
    transform: translate(-50%, -50%)rotate(88deg)scale(.9, .56);
  }

  63% {
    opacity: .92;
    transform: translate(-50%, -50%)rotate(338deg)scale(1, .62);
  }

  71% {
    opacity: .82;
    transform: translate(-50%, -50%)rotate(654deg)scale(.78, .5);
  }

  77% {
    opacity: 1;
    transform: translate(-50%, -50%)rotate(976deg)scale(.55, .38);
  }

  84% {
    opacity: .24;
    transform: translate(-50%, -50%)rotate(1240deg)scale(.2);
  }

  88%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%)rotate(1360deg)scale(.08);
  }
}

@keyframes fc-reaction-chamber-jolt {
  0%, 56% {
    transform: translate(-50%, -50%);
  }

  59% {
    transform: translate(calc(1px - 50%), calc(-50% - 1px));
  }

  62% {
    transform: translate(calc(-50% - 1px), calc(1px - 50%));
  }

  65% {
    transform: translate(calc(2px - 50%), -50%);
  }

  68% {
    transform: translate(calc(-50% - 1px), calc(-50% - 2px));
  }

  71% {
    transform: translate(calc(2px - 50%), calc(1px - 50%));
  }

  74% {
    transform: translate(calc(-50% - 2px), -50%);
  }

  77% {
    transform: translate(calc(1px - 50%), calc(-50% - 2px));
  }

  80% {
    transform: translate(calc(-50% - 1px), calc(1px - 50%));
  }

  84%, 100% {
    transform: translate(-50%, -50%);
  }
}

@keyframes fc-reaction-counterflow {
  0%, 47% {
    opacity: 0;
    transform: translate(-50%, -50%)rotate(58deg)scale(.58, .42);
  }

  56% {
    opacity: .48;
    transform: translate(-50%, -50%)rotate(-126deg)scale(.86, .58);
  }

  65% {
    opacity: .96;
    transform: translate(-50%, -50%)rotate(-408deg)scale(.94, .63);
  }

  72% {
    opacity: .7;
    transform: translate(-50%, -50%)rotate(-694deg)scale(.66, .47);
  }

  78% {
    opacity: 1;
    transform: translate(-50%, -50%)rotate(-988deg)scale(.5, .36);
  }

  84% {
    opacity: .2;
    transform: translate(-50%, -50%)rotate(-1210deg)scale(.18);
  }

  88%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%)rotate(-1300deg)scale(.08);
  }
}

@keyframes fc-reaction-core {
  0%, 48% {
    opacity: 0;
    filter: brightness(.8) blur(4px);
    transform: translate(-50%, -50%)scale(1.8, .44);
  }

  57% {
    opacity: .38;
    filter: brightness(1.1) blur(2px);
    transform: translate(-50%, -50%)scale(1.1, .74);
  }

  66% {
    opacity: .9;
    filter: brightness(1.55) blur(.8px);
    transform: translate(-50%, -50%)scale(.58, 1.45);
  }

  70% {
    opacity: 1;
    filter: brightness(2.35) blur();
    transform: translate(-50%, -50%)scale(.28, .55);
  }

  73% {
    opacity: .72;
    filter: brightness(1.65) blur(1px);
    transform: translate(-50%, -50%)scale(2.5, 1.55);
  }

  76% {
    opacity: 1;
    filter: brightness(2.65) blur();
    transform: translate(-50%, -50%)scale(.34, .68);
  }

  80% {
    opacity: .9;
    filter: brightness(2.05) blur(1.6px);
    transform: translate(-50%, -50%)scale(2.8, 2);
  }

  86% {
    opacity: .18;
    filter: brightness(1.2) blur(4px);
    transform: translate(-50%, -50%)scale(3.4, 3.1);
  }

  90%, 100% {
    opacity: 0;
    filter: brightness(.9) blur(7px);
    transform: translate(-50%, -50%)scale(3.7);
  }
}

@keyframes fc-reaction-burst {
  0%, 64% {
    opacity: 0;
    transform: translate(-50%, -50%)rotate(-24deg)scale(.08);
  }

  70% {
    opacity: .86;
    transform: translate(-50%, -50%)rotate(32deg)scale(.58);
  }

  73% {
    opacity: .16;
    transform: translate(-50%, -50%)rotate(68deg)scale(1.02);
  }

  76% {
    opacity: 1;
    transform: translate(-50%, -50%)rotate(104deg)scale(.34);
  }

  81% {
    opacity: .7;
    transform: translate(-50%, -50%)rotate(166deg)scale(1.16);
  }

  87%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%)rotate(214deg)scale(1.5);
  }
}

@keyframes fc-reaction-flare {
  0%, 52% {
    opacity: 0;
    transform: scale(.46, .12)translateY(24%);
  }

  62% {
    opacity: .46;
    transform: scale(.72, .5)translateY(11%);
  }

  70% {
    opacity: .88;
    transform: scale(.92)translateY(2%);
  }

  73% {
    opacity: .38;
    transform: scale(1.08, .64)translateY(8%);
  }

  77% {
    opacity: 1;
    transform: scale(1.08, 1.2)translateY(-7%);
  }

  82% {
    opacity: .62;
    transform: scale(.88, 1.48)translateY(-15%);
  }

  88%, 100% {
    opacity: 0;
    transform: scale(.62, 1.72)translateY(-24%);
  }
}

.fc-forge-flash {
  z-index: 8;
  clip-path: polygon(22% 0, 78% 0, 89% 9%, 95% 21%, 96% 100%, 4% 100%, 5% 21%, 11% 9%);
  mix-blend-mode: screen;
  opacity: 0;
  width: 18.2%;
  height: 28.5%;
  animation: fc-forge-flash var(--fc-fusion-duration) ease-in-out both;
  background: radial-gradient(at 50% 74%, #ffffdde0, #ffbe4280 32%, #ff4c0b1f 68%, #0000 82%);
  border-radius: 46% 46% 8% 8% / 25% 25% 7% 7%;
  position: absolute;
  top: 62.3%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

@keyframes fc-forge-flash {
  0%, 64% {
    opacity: 0;
    filter: blur(7px) brightness(.8);
  }

  70% {
    opacity: .72;
    filter: blur(2px) brightness(1.75);
  }

  73% {
    opacity: .18;
    filter: blur(5px) brightness(1.08);
  }

  76% {
    opacity: .9;
    filter: blur(1px) brightness(2.15);
  }

  80% {
    opacity: .58;
    filter: blur(3px) brightness(1.6);
  }

  86% {
    opacity: .16;
    filter: blur(7px) brightness();
  }

  90%, 100% {
    opacity: 0;
    filter: blur(10px) brightness(.86);
  }
}

.fc-forge-embers {
  z-index: 9;
  position: absolute;
  top: 64%;
  left: 50%;
}

.fc-forge-embers > span {
  aspect-ratio: 1;
  opacity: 0;
  width: clamp(3px, .35vw, 6px);
  animation: fc-forge-ember calc(1.35s * var(--fc-forge-scale, 1)) ease-out calc(8.15s + var(--ember-delay)) both;
  background: #ffe8a1;
  border-radius: 50% 0 50% 50%;
  position: absolute;
  box-shadow: 0 0 9px #ff7a19;
}

@keyframes fc-forge-ember {
  0% {
    opacity: 0;
    transform: translate(0)rotate(45deg)scale(.4);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--ember-x), var(--ember-y)) rotate(135deg) scale(.1);
  }
}

.fc-forged-hero-echo {
  z-index: 9;
  width: var(--fc-hero-size);
  aspect-ratio: 1;
  clip-path: polygon(35% 5%, 65% 5%, 74% 23%, 86% 44%, 79% 100%, 21% 100%, 14% 44%, 26% 23%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(10px) drop-shadow(0 0 24px #ff7b18d6);
  animation: fc-soul-condense var(--fc-fusion-duration) ease-out both;
  background: radial-gradient(circle at 50% 17%, #fffad9e6 0 8%, #ffb8416b 17%, #0000 30%), radial-gradient(at 50% 67%, #ffd782bd 0 20%, #ff731847 48%, #0000 71%);
  border-radius: 18%;
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translate(-50%, -18%)scale(.12);
}

@keyframes fc-soul-condense {
  0%, 69% {
    opacity: 0;
    transform: translate(-50%, -18%)rotate(-180deg)scale(.08);
  }

  75% {
    opacity: .24;
    transform: translate(-50%, -30%)rotate(-118deg)scale(.24);
  }

  83% {
    opacity: .64;
    transform: translate(-50%, -63%)rotate(-48deg)scale(.6);
  }

  91% {
    opacity: .28;
    transform: translate(-50%, -91%)rotate(-8deg)scale(.9);
  }

  97%, 100% {
    opacity: 0;
    transform: translate(-50%, -96%)rotate(0)scale(.98);
  }
}

.fc-forged-hero {
  z-index: 10;
  width: var(--fc-hero-size);
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: var(--fc-hero-radius);
  opacity: 0;
  clip-path: inset(0 round var(--fc-hero-radius));
  filter: blur(8px) sepia(.48) brightness(2) drop-shadow(0 0 10px #ffe7a6eb) drop-shadow(0 0 28px #ff7417b8);
  animation: fc-hero-grow-from-fire var(--fc-fusion-duration) cubic-bezier(.22, .68, .18, 1) both;
  background: linear-gradient(145deg, #3a1c12f5, #0d0807fa);
  border: 0;
  position: absolute;
  top: 61%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -16%)rotate(-520deg)scale(.08);
}

.fc-forged-hero img {
  object-fit: contain;
  opacity: 0;
  width: 100%;
  height: 100%;
  transform: rotate(var(--hero-layer-turn)) scale(.68);
  transform-origin: 50% 58%;
  filter: blur(10px) brightness(2.4) saturate(.12);
  animation: fc-hero-layer-resolve calc(3.1s * var(--fc-forge-scale, 1)) cubic-bezier(.18, .66, .18, 1) calc(8.45s * var(--fc-forge-scale, 1) + var(--hero-layer-delay)) both;
  position: absolute;
  inset: 0;
}

@keyframes fc-hero-grow-from-fire {
  0%, 69% {
    opacity: 0;
    clip-path: inset(0 round var(--fc-hero-radius));
    filter: blur(9px) sepia(.55) brightness(2.2) drop-shadow(0 0 24px #ff7417ad);
    transform: translate(-50%, -16%)rotate(-520deg)scale(.08);
  }

  75% {
    opacity: .18;
    transform: translate(-50%, -27%)rotate(-348deg)scale(.2);
  }

  81% {
    opacity: .42;
    filter: blur(4px) sepia(.42) brightness(1.75) drop-shadow(0 0 24px #ff7417b8);
    transform: translate(-50%, -49%)rotate(-214deg)scale(.4);
  }

  87% {
    opacity: .68;
    filter: blur(1px) sepia(.3) brightness(1.4) drop-shadow(0 0 24px #ff7417ad);
    transform: translate(-50%, -72%)rotate(-104deg)scale(.62);
  }

  93% {
    opacity: .9;
    transform: translate(-50%, -89%)rotate(-28deg)scale(.82);
  }

  97% {
    opacity: .98;
    transform: translate(-50%, -96%)rotate(4deg)scale(.92);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 round var(--fc-hero-radius));
    transform: translate(-50%, -96%) rotate(0) scale(var(--fc-hero-final-scale));
    filter: blur() sepia(.03) brightness(1.03) drop-shadow(0 0 14px #ff741780);
  }
}

@keyframes fc-hero-layer-resolve {
  0% {
    opacity: 0;
    transform: rotate(var(--hero-layer-turn)) scale(.68);
    filter: blur(10px) brightness(2.4) saturate(.12);
  }

  30% {
    opacity: .2;
    transform: rotate(var(--hero-layer-turn)) scale(.78);
    filter: blur(7px) brightness(2.05) saturate(.28);
  }

  68% {
    opacity: .76;
    filter: blur(1.8px) brightness(1.32) saturate(.76);
    transform: rotate(-4deg)scale(.95);
  }

  100% {
    opacity: 1;
    filter: blur() brightness() saturate();
    transform: rotate(0)scale(1);
  }
}

.fc-hero-frame {
  z-index: 11;
  width: var(--fc-hero-size);
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: var(--fc-hero-radius);
  opacity: 0;
  filter: drop-shadow(0 0 8px #ffb93ad1);
  animation: fc-hero-frame-arrive .7s ease-out calc(11.9s * var(--fc-forge-scale, 1)) both;
  border: clamp(4px, .72vw, 8px) solid #f4c45b;
  position: absolute;
  top: 61%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -96%)scale(.9);
  box-shadow: inset 0 0 0 1px #fff4bceb, inset 0 0 17px #ffcc5f94, 0 0 8px #ffc64bb8, 0 0 22px #ff7e186b;
}

.fc-hero-frame:before, .fc-hero-frame:after {
  content: none;
}

.fc-hero-frame i {
  background: linear-gradient(90deg, #83501d, #ffe29a 42%, #b87424 72%, #ffe29a);
  border-radius: 999px;
  display: block;
  position: absolute;
  box-shadow: 0 0 10px #ffb93ae6, inset 0 0 3px #fff4c9;
}

.fc-hero-frame i[data-frame-edge="top"], .fc-hero-frame i[data-frame-edge="bottom"] {
  height: clamp(3px, .48vw, 6px);
  animation: fc-frame-draw-x .62s cubic-bezier(.3, .72, .18, 1) calc(11.92s * var(--fc-forge-scale, 1)) both;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.fc-hero-frame i[data-frame-edge="top"] {
  transform-origin: 0;
  top: 0;
}

.fc-hero-frame i[data-frame-edge="bottom"] {
  transform-origin: 100%;
  bottom: 0;
}

.fc-hero-frame i[data-frame-edge="left"], .fc-hero-frame i[data-frame-edge="right"] {
  width: clamp(3px, .48vw, 6px);
  animation: fc-frame-draw-y .62s cubic-bezier(.3, .72, .18, 1) calc(11.98s * var(--fc-forge-scale, 1)) both;
  top: 0;
  bottom: 0;
  transform: scaleY(0);
}

.fc-hero-frame i[data-frame-edge="left"] {
  transform-origin: bottom;
  left: 0;
}

.fc-hero-frame i[data-frame-edge="right"] {
  transform-origin: top;
  right: 0;
}

@keyframes fc-hero-frame-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, -96%)scale(.9);
  }

  36% {
    opacity: .88;
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -96%) scale(var(--fc-hero-final-scale));
  }
}

@keyframes fc-frame-draw-x {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes fc-frame-draw-y {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.fc-fusion-copy {
  z-index: 12;
  color: #e8b659;
  text-align: center;
  text-shadow: 0 2px 18px #000000f5;
  opacity: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: Special Elite, system-ui, sans-serif;
  animation: .9s ease-out .45s both fc-fusion-copy-in;
  display: flex;
  position: absolute;
  bottom: clamp(18px, 4.5vh, 52px);
  left: 16px;
  right: 16px;
}

.fc-fusion-copy span {
  letter-spacing: .28em;
  font-size: clamp(.7rem, 1.5vw, .88rem);
}

.fc-fusion-copy p {
  color: #ffebc7c2;
  letter-spacing: .08em;
  margin: 0;
  font-size: clamp(.76rem, 1.8vw, .95rem);
}

@keyframes fc-fusion-copy-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@media (max-width: 900px) {
  .fc-forge-stage {
    width: min(112vw, 900px);
  }
}

@media (max-width: 640px) {
  .fc-forge-stage {
    --fc-hero-size: 29%;
    width: min(152vw, 720px);
    top: 48%;
  }

  .fc-fusion-part {
    width: clamp(44px, 13vw, 58px);
  }

  .fc-forge-socket {
    width: clamp(26px, 8vw, 36px);
  }

  .fc-fusion-copy {
    bottom: max(18px, env(safe-area-inset-bottom));
  }

  .fc-fusion-copy span {
    letter-spacing: .16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-slot--filled, .fc-slot--wanted:after, .fc-hearth--ready, .fc-stage--forging, .fc-stage--forging:before, .fc-stage--forging:after, .fc-spark, .fc-flash, .fc-shock, .fc-burst span, .fc-strike, .fc-hero-reveal, .fc-awaiting, .fc-fusion-part, .fc-part-seal, .fc-part-seal img, .fc-fusion-placeholder, .fc-part-seal:before, .fc-part-seal:after, .fc-forge-socket, .fc-painted-slot-flame, .fc-painted-furnace-flame, .fc-forge-flow, .fc-forge-painting, .fc-fusion-reaction, .fc-fusion-reaction i, .fc-forge-flash, .fc-forge-embers > span, .fc-forged-hero-echo, .fc-forged-hero, .fc-forged-hero img, .fc-hero-frame, .fc-hero-frame:before, .fc-hero-frame:after, .fc-hero-frame i, .fc-fusion-copy, .fc-room-scrim, .fc-room-spark {
    animation: none;
  }

  .fc-fusion-part {
    left: var(--socket-x);
    top: var(--socket-y);
    opacity: 1;
    transform: translate(-50%, -50%)scale(.52);
  }

  .fc-forge-painting {
    filter: brightness(.8) saturate(.92);
  }

  .fc-forge-socket {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .fc-forged-hero {
    opacity: 1;
    clip-path: inset(0 round var(--fc-hero-radius));
    transform: translate(-50%, -96%) rotate(0) scale(var(--fc-hero-final-scale));
  }

  .fc-forged-hero-echo {
    display: none;
  }

  .fc-forged-hero img {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .fc-hero-frame {
    opacity: 1;
    transform: translate(-50%, -96%) scale(var(--fc-hero-final-scale));
  }

  .fc-hero-frame i[data-frame-edge="top"], .fc-hero-frame i[data-frame-edge="bottom"] {
    transform: scaleX(1);
  }

  .fc-hero-frame i[data-frame-edge="left"], .fc-hero-frame i[data-frame-edge="right"] {
    transform: scaleY(1);
  }

  .fc-fusion-copy {
    opacity: 1;
    transform: none;
  }

  .fc-room-scrim {
    opacity: .8;
  }

  .fc-flash, .fc-shock, .fc-burst, .fc-spark, .fc-forge-flow, .fc-forge-flash, .fc-fusion-reaction, .fc-painted-slot-flame, .fc-painted-furnace-flame, .fc-forge-embers {
    display: none;
  }

  .fc-stage--forging {
    transform: none;
  }

  .fc-slot, .fc-hearth {
    transition: none;
  }

  .fc-hearth--ready {
    box-shadow: 0 0 18px 2px #ff7a2f52;
  }
}

.fc-browser {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.fc-browser-row {
  background: #00000047;
  border: 1px solid #ffc85a29;
  border-radius: .55rem;
  padding: .5rem .6rem .6rem;
}

.fc-browser-head {
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  display: flex;
}

.fc-browser-slot {
  letter-spacing: .06em;
  color: #f0d9a8;
  font-size: .82rem;
}

.fc-browser-count {
  color: #f0d9a880;
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
}

.fc-browser-clear {
  color: #f0d9a8;
  cursor: pointer;
  font: inherit;
  opacity: .75;
  background: none;
  border: 1px solid #ffc85a47;
  border-radius: .3rem;
  margin-left: auto;
  padding: .16rem .4rem;
  font-size: .68rem;
  line-height: 1;
}

.fc-browser-clear:hover:not(:disabled) {
  opacity: 1;
}

.fc-browser-cards {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .45rem;
  display: grid;
  overflow-x: hidden;
}

.fc-bcard {
  min-width: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: #0000004d;
  border: 1px solid #ffc85a33;
  border-radius: .45rem;
  grid-template-columns: auto 1fr;
  place-items: center start;
  gap: 0 .4rem;
  padding: .3rem .35rem;
  transition: border-color .15s, background .15s, transform .15s;
  display: grid;
}

.fc-bcard:hover:not(:disabled):not(.fc-bcard--blank):not(.fc-bcard--empty) {
  border-color: #ffc85a8c;
  transform: translateY(-1px);
}

.fc-bcard--on {
  background: #ffc85a1a;
  border-color: #ffc85a;
  box-shadow: inset 0 0 0 1px #ffc85a59;
}

.fc-bcard:disabled {
  cursor: default;
  opacity: .55;
}

.fc-bcard-art {
  grid-area: 1 / 1 / -1;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  overflow: hidden;
}

.fc-bcard-id, .fc-bcard-quality, .fc-bcard-stat {
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.fc-bcard-art img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.fc-bcard-id {
  color: #f0d9a8;
  font-variant-numeric: tabular-nums;
  font-size: .66rem;
}

.fc-bcard-quality {
  letter-spacing: .03em;
  font-size: .6rem;
}

.fc-bcard-stat {
  color: #f0d9a8b8;
  white-space: nowrap;
  font-size: .58rem;
}

.fc-bcard--empty {
  cursor: default;
  background: #00000024;
  border-style: dashed;
  border-color: #ffc85a24;
  grid-column: 1 / -1;
  grid-template-columns: auto;
  justify-content: center;
  justify-items: center;
  gap: .4rem;
  min-height: 0;
  padding: .35rem;
}

.fc-bcard--empty .fc-bcard-id, .fc-bcard--empty .fc-bcard-quality {
  grid-column: 1;
}

.fc-bcard--empty .fc-bcard-art {
  display: none;
}

.fc-bcard--empty .fc-bcard-id {
  color: #f0d9a859;
}

.fc-bcard--empty .fc-bcard-quality {
  color: #f0d9a866;
}

@media (max-width: 480px) {
  .fc-bcard-stat {
    display: none;
  }

  .fc-browser-row {
    padding: .4rem .45rem .5rem;
  }
}

.fc-viewswitch {
  gap: .35rem;
  margin-bottom: .6rem;
  display: flex;
}

.fc-viewswitch button {
  font: inherit;
  letter-spacing: .05em;
  color: #f0d9a899;
  cursor: pointer;
  background: #00000047;
  border: 1px solid #ffc85a2e;
  border-radius: .35rem;
  flex: 1;
  padding: .3rem .5rem;
  font-size: .74rem;
}

.fc-viewswitch button.on {
  color: #1a1206;
  background: #ffc85a;
  border-color: #ffc85a;
}

.fc-body .fc-stage {
  width: 60%;
  margin-inline: auto;
}

.fc-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.fc-controls > * {
  flex-grow: 1;
}

.fc-controls .fc-actions {
  border-left: 1px solid #f5be4e2e;
  flex: auto;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 4px;
  padding-left: 10px;
  display: flex;
}

.fc-controls .fc-actions > button {
  border-radius: 8px;
  min-height: 0;
  padding: 4px 12px;
  font-size: .72rem;
  line-height: 1.2;
}

.fc-controls .fc-actions .fc-hearth {
  flex: auto;
  padding-inline: 26px;
}

.fc-controls .fc-actions .fc-secondary {
  flex: none;
}

.fc-slot-quality {
  letter-spacing: .05em;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .9;
  grid-area: 3 / 2;
  min-width: 0;
  max-width: 100%;
  font-size: .55rem;
  overflow: hidden;
}

.fc-picker--wide {
  width: auto;
  left: clamp(12px, 6vw, 80px);
  right: clamp(12px, 6vw, 80px);
}

@media (max-width: 640px) {
  .fc-picker--wide {
    left: 8px;
    right: 8px;
  }
}

.fc-crucible--paused, .fc-crucible--paused *, .fc-crucible--paused :before, .fc-crucible--paused :after {
  animation-play-state: paused !important;
}

.fc-crucible:not(.fc-crucible--settled) .fc-forged-hero img, .fc-crucible:not(.fc-crucible--settled) .fc-forged-hero-echo, .fc-crucible:not(.fc-crucible--settled) .fc-hero-frame, .fc-crucible:not(.fc-crucible--settled) .fc-hero-frame:before, .fc-crucible:not(.fc-crucible--settled) .fc-hero-frame:after {
  animation-play-state: paused;
}

.fc-crucible--settled .fc-forged-hero img {
  animation-delay: var(--hero-layer-delay, 0s);
}