/* ============================================================
   Fusion Station - "the machine". A collage of four drawn parts
   (processing plant, robot arm, two press bits, motor) mounted on
   a CSS steel body; the three input slots sit in the chamber and
   the output port previews the fusion result.

   Geometry contract: .fusion-machine is a size container and EVERY
   length inside .fusion-frame is cqw (1% of the machine's width),
   with the frame's height fixed by aspect-ratio. The rig therefore
   scales as one picture - identical proportions on every device.
   Respects prefers-reduced-motion.
   ============================================================ */
.fusion-station {
  background: linear-gradient(160deg, #1a1035 0%, #110d25 100%);
  border: 1px solid rgba(168,85,247,0.28);
  border-radius: 12px;
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fusion-station-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fusion-station-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4a8f5;
}

/* ---- Help ("how it works") ---- */
.fusion-help-btn {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,0.5);
  background: transparent;
  color: #c4a8f5;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.fusion-help-btn:hover,
.fusion-help-btn-on {
  background: rgba(168,85,247,0.28);
  color: #ede9fe;
}

.fusion-help {
  background: rgba(124,58,237,0.10);
  border: 1px solid rgba(168,85,247,0.30);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: #d5cbee;
}
.fusion-help-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c4a8f5;
}
.fusion-help-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fusion-help-num {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(168,85,247,0.32);
  color: #ede9fe;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- The machine ---- */
.fusion-machine {
  container-type: inline-size;
  width: 100%;
}

.fusion-frame {
  position: relative;
  aspect-ratio: 100 / 124;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(168,85,247,0.18);
  background: radial-gradient(120% 90% at 50% 8%, #221a45 0%, #120e24 55%, #0b0816 100%);
}

/* Steel body the parts are mounted on. Corner bolts drawn as radial dots. */
.fusion-mbody {
  position: absolute;
  left: 1cqw;
  top: 26cqw;
  width: 98cqw;
  height: 92cqw;
  border-radius: 6cqw;
  border: 0.5cqw solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle 1.4cqw at 4cqw 4cqw,   #6f6796 0 0.9cqw, rgba(0,0,0,0) 1.1cqw),
    radial-gradient(circle 1.4cqw at 94cqw 4cqw,  #6f6796 0 0.9cqw, rgba(0,0,0,0) 1.1cqw),
    radial-gradient(circle 1.4cqw at 4cqw 88cqw,  #55507a 0 0.9cqw, rgba(0,0,0,0) 1.1cqw),
    radial-gradient(circle 1.4cqw at 94cqw 88cqw, #55507a 0 0.9cqw, rgba(0,0,0,0) 1.1cqw),
    linear-gradient(180deg, #2b2547 0%, #1c1834 45%, #131024 100%);
  box-shadow: 0 3cqw 8cqw rgba(0,0,0,0.5), inset 0 0.5cqw 0 rgba(255,255,255,0.06);
}

/* Hazard-striped base plate the motor and output stand on. */
.fusion-base {
  position: absolute;
  left: 3cqw;
  top: 112cqw;
  width: 94cqw;
  height: 5cqw;
  border-radius: 1cqw;
  border: 0.3cqw solid rgba(0,0,0,0.4);
  background: repeating-linear-gradient(-45deg,
    rgba(240,196,25,0.55) 0 3cqw,
    rgba(10,8,18,0.9) 3cqw 6cqw);
  opacity: 0.45;
}

/* Drawn parts. pointer-events off so press bits overlapping the chamber
   never swallow slot clicks/drops. */
.fusion-art {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 1.5cqw 3cqw rgba(0,0,0,0.55));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.fusion-art-plant { left: 4cqw; top: 1cqw; width: 44cqw; }
.fusion-art-robot { right: 2cqw; top: 8cqw; width: 38cqw; transform: scaleX(-1); }
.fusion-art-press { top: 47.5cqw; width: 30cqw; z-index: 3; }
.fusion-art-press-l { left: -19cqw; transform: scaleX(-1); }
.fusion-art-press-r { right: -19cqw; }
.fusion-art-motor { left: 2cqw; top: 84cqw; width: 34cqw; transform: scaleX(-1); z-index: 5; }

/* Duct from the motor to the output port. */
.fusion-pipe {
  position: absolute;
  left: 33cqw;
  top: 98cqw;
  /* Runs under the output tile (output sits at z 6) so the duct visually feeds it. */
  width: 43cqw;
  height: 5cqw;
  border-radius: 2.5cqw;
  border: 0.4cqw solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #4a4368 0%, #282243 60%, #1a1630 100%);
  z-index: 4;
}

/* ---- Chamber (slot row) ---- */
.fusion-chamber {
  position: absolute;
  left: 3cqw;
  top: 46cqw;
  width: 94cqw;
  height: 33cqw;
  border-radius: 3.5cqw;
  border: 0.5cqw solid rgba(168,85,247,0.35);
  background:
    radial-gradient(circle 1.2cqw at 3cqw 3cqw,   #7d74a8 0 0.7cqw, rgba(0,0,0,0) 0.9cqw),
    radial-gradient(circle 1.2cqw at 91cqw 3cqw,  #7d74a8 0 0.7cqw, rgba(0,0,0,0) 0.9cqw),
    radial-gradient(circle 1.2cqw at 3cqw 30cqw,  #5d5585 0 0.7cqw, rgba(0,0,0,0) 0.9cqw),
    radial-gradient(circle 1.2cqw at 91cqw 30cqw, #5d5585 0 0.7cqw, rgba(0,0,0,0) 0.9cqw),
    linear-gradient(180deg, #191430 0%, #0f0c1e 100%);
  box-shadow: inset 0 0 6cqw rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  z-index: 2;
}

.fusion-slot {
  width: 26cqw;
  height: 26cqw;
  border-radius: 3cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 5;
  transition: background 0.15s, border-color 0.15s;
}

.fusion-slot-empty {
  border: 0.7cqw dashed rgba(168,85,247,0.4);
  background: rgba(9,7,18,0.85);
  cursor: default;
}

.fusion-slot-drop-over {
  border-color: rgba(168,85,247,0.95);
  background: rgba(168,85,247,0.16);
  box-shadow: 0 0 4cqw rgba(168,85,247,0.5);
}

.fusion-slot-filled {
  border: 0.8cqw solid;
  background: linear-gradient(180deg, #262041 0%, #161228 100%);
  box-shadow: 0 1cqw 3cqw rgba(0,0,0,0.5);
}

.fusion-slot-ready {
  animation: fusion-pulse 1.4s ease-in-out infinite;
}

@keyframes fusion-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
  50%      { box-shadow: 0 0 3cqw 1.5cqw rgba(168,85,247,0.45); }
}

.fusion-slot-glyph { font-size: 11cqw; line-height: 1; }

.fusion-slot-hint {
  font-size: 4.8cqw;
  text-align: center;
  color: #8b81ad;
  line-height: 1.35;
  padding: 0 2cqw;
}

.fusion-slot-remove {
  position: absolute;
  top: -2.5cqw;
  right: -2.5cqw;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  border: none;
  background: rgba(200,80,80,0.85);
  color: #fff;
  font-size: 3.2cqw;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 6;
}
.fusion-slot-remove:hover { background: rgba(220,60,60,0.95); }

/* Tier-coloured borders for filled slots + the output tile */
.tier-border-common    { border-color: #b8c0cc !important; }
.tier-border-uncommon  { border-color: #4a90d9 !important; }
.tier-border-rare      { border-color: #f0c419 !important; }
.tier-border-epic      { border-color: #e8833a !important; }
.tier-border-legendary { border-color: #e0405a !important; }

/* ---- LED display (slot count / countdown / READY) ---- */
.fusion-led {
  position: absolute;
  left: 42cqw;
  top: 80.5cqw;
  width: 54cqw;
  height: 9.5cqw;
  border-radius: 1.6cqw;
  border: 0.4cqw solid rgba(168,85,247,0.5);
  background: #060410;
  box-shadow: inset 0 0 3cqw rgba(124,58,237,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.fusion-countdown {
  font-family: "Courier New", Courier, monospace;
  font-size: 6cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #e2d4ff;
  text-shadow: 0 0 3cqw rgba(168,85,247,0.9);
}
.fusion-countdown-done {
  color: #ffd700;
  text-shadow: 0 0 3cqw rgba(255,215,0,0.9);
}

.fusion-led-idle {
  font-family: "Courier New", Courier, monospace;
  font-size: 6cqw;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #7d72a5;
}

.fusion-led-ready {
  font-family: "Courier New", Courier, monospace;
  font-size: 5.6cqw;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #ffd700;
  text-shadow: 0 0 3cqw rgba(255,215,0,0.8);
  animation: fusion-led-blink 1s steps(2, jump-none) infinite;
}

@keyframes fusion-led-blink {
  0%   { opacity: 1; }
  100% { opacity: 0.45; }
}

/* ---- Output port (result preview) ---- */
.fusion-output {
  position: absolute;
  left: 56cqw;
  top: 91.5cqw;
  width: 40cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  z-index: 6;
}
.fusion-output-label {
  font-size: 4.6cqw;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b7a8dd;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.fusion-output-tile {
  position: relative;
  width: 15cqw;
  height: 15cqw;
  border-radius: 3cqw;
  border: 0.8cqw solid;
  background: linear-gradient(180deg, #241f3f 0%, #141021 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2cqw 5cqw rgba(0,0,0,0.45);
}
.fusion-output-unknown {
  border: 0.6cqw dashed rgba(168,85,247,0.45);
  color: #8c84a8;
}
.fusion-output-glyph { font-size: 8.5cqw; line-height: 1; }
/* Mixed batch: every distinct staged type side by side + a "?" badge - the
   claim mints ONE of them at the next rarity. */
.fusion-output-glyphs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4cqw;
  max-width: 13cqw;
  flex-wrap: wrap;
}
.fusion-output-glyph-mini { font-size: 5.4cqw; line-height: 1; }
.fusion-output-mystery {
  position: absolute;
  top: -2.6cqw;
  right: -2.6cqw;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  border: 0.4cqw solid rgba(255,255,255,0.25);
  color: #ede9fe;
  font-size: 3.8cqw;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1cqw 2.5cqw rgba(0,0,0,0.5);
}
.fusion-output-rarity {
  font-size: 4.8cqw;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  /* Sits over the hazard base strip - a dark pill keeps it readable. */
  background: rgba(6,4,16,0.75);
  border-radius: 1.2cqw;
  padding: 0.3cqw 2cqw;
}
.fusion-output-rarity-unknown { color: #6c6488; letter-spacing: 0.3em; }

.fusion-output-ready {
  animation: fusion-output-glow 1.2s ease-in-out infinite alternate;
}

@keyframes fusion-output-glow {
  from { box-shadow: 0 2cqw 5cqw rgba(0,0,0,0.45); }
  to   { box-shadow: 0 0 6cqw 2cqw rgba(255,215,0,0.35); }
}

/* ---- Working state: the rig runs ---- */
.fusion-machine-working .fusion-art-press-l { animation: fusion-jab-l 1.2s ease-in-out infinite; }
.fusion-machine-working .fusion-art-press-r { animation: fusion-jab-r 1.2s ease-in-out infinite; }
.fusion-machine-working .fusion-art-robot   { transform-origin: 50% 100%; animation: fusion-robot-work 2.6s ease-in-out infinite; }
.fusion-machine-working .fusion-art-motor   { animation: fusion-motor-hum 0.35s linear infinite; }
.fusion-machine-working .fusion-chamber     { animation: fusion-chamber-glow 1.2s ease-in-out infinite alternate; }

@keyframes fusion-chamber-glow {
  from { box-shadow: inset 0 0 6cqw rgba(0,0,0,0.6); }
  to   { box-shadow: inset 0 0 8cqw rgba(124,58,237,0.5); }
}

/* ---- FX canvas: particle engine layer (Scripts/fusion-fx.ts) ----
   Sparks, smoke, duct energy flow, slot arcs and the ready fountain are drawn
   here at 60fps. Sits above every machine part, never intercepts clicks. */
.fusion-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
}

@keyframes fusion-jab-l {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50%      { transform: scaleX(-1) translateX(-3cqw); }
}
@keyframes fusion-jab-r {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3cqw); }
}
@keyframes fusion-robot-work {
  0%, 100% { transform: scaleX(-1) rotate(0deg); }
  50%      { transform: scaleX(-1) rotate(2.2deg); }
}
@keyframes fusion-motor-hum {
  0%   { transform: scaleX(-1) translate(0, 0); }
  25%  { transform: scaleX(-1) translate(0.35cqw, -0.2cqw); }
  50%  { transform: scaleX(-1) translate(-0.3cqw, 0.25cqw); }
  75%  { transform: scaleX(-1) translate(0.25cqw, 0.3cqw); }
  100% { transform: scaleX(-1) translate(0, 0); }
}

/* ---- Hints + action buttons under the machine ---- */
.fusion-drop-hint {
  font-size: 12px;
  text-align: center;
  color: #8b81ad;
}

.fusion-need-hint {
  font-size: 12px;
  text-align: center;
  color: #8b81ad;
}

.fusion-btn-fuse   { background: linear-gradient(135deg, #7c3aed, #4c1d95); color: #ede9fe; }
.fusion-btn-claim  { background: linear-gradient(135deg, #b45309, #78350f); color: #fef3c7; }
.fusion-btn-cancel { background: rgba(255,255,255,0.07); color: #c8bfe0; border-color: rgba(255,255,255,0.1); }

@media (prefers-reduced-motion: reduce) {
  .fusion-slot-ready,
  .fusion-output-ready,
  .fusion-led-ready,
  .fusion-machine-working .fusion-art-press-l,
  .fusion-machine-working .fusion-art-press-r,
  .fusion-machine-working .fusion-art-robot,
  .fusion-machine-working .fusion-art-motor,
  .fusion-machine-working .fusion-chamber { animation: none; }
  /* fusion-fx.ts also refuses to run under reduced motion - this is belt and braces. */
  .fusion-fx-canvas { display: none; }
  .fusion-slot-drop-over { transition: none; }
}

/* Phase 5: premium locked background presets */
.bg-editor-head-premium { margin-top: 10px; font-size: 11px; color: #c8bfe0; }
.bg-preset-locked {
  position: relative;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, transform 0.1s;
}
.bg-preset-locked:hover:not(:disabled) { opacity: 1; transform: translateY(-2px); }
.bg-preset-locked:disabled { cursor: not-allowed; opacity: 0.4; }
.bg-preset-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  border-radius: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}