/* Central drop zone: amber means merge, lime side rails still mean reorder. */
.layer-rails.is-dragging .vault-card:hover {
  width: min(255px, 67vw);
  transform: none;
}

.vault-card.merge-target {
  z-index: 24;
  border-color: #ff9e45;
  background: #ff9e4514;
  box-shadow: 0 0 0 3px #ff9e4533, 0 0 38px #ff7a2947;
  transform: translateY(-5px) scale(1.018) !important;
}

.vault-card.merge-target::before {
  content: '';
  position: absolute;
  z-index: 8;
  inset: -9px;
  width: auto;
  background: transparent;
  border: 2px solid #ff9e45;
  box-shadow: inset 0 0 25px #ff9e4524, 0 0 22px #ff9e4538;
  pointer-events: none;
  animation: mergeTargetPulse .72s ease-in-out infinite alternate;
}

.vault-card.merge-target::after {
  content: 'MERGE / 合并素材';
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 9px 13px;
  border: 1px solid #ff9e45;
  background: #171717df;
  color: #ffb66f;
  font: 10px 'DM Mono';
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 6px 6px 0 #ff9e4545;
  pointer-events: none;
}

.vault-card.merge-target .drag-frame {
  opacity: 0;
}

.merge-modal {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: #0d0d0dde;
  backdrop-filter: blur(13px);
}

.merge-modal.show {
  display: grid;
  animation: fade .25s;
}

.merge-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 92dvh;
  overflow: hidden auto;
  padding: 34px;
  border: 1px solid #ff9e45;
  background: #f2f0eb;
  box-shadow: 15px 15px 0 #ff9e45;
  animation: mergePanelIn .48s cubic-bezier(.16, 1, .3, 1);
}

.merge-orbit {
  position: absolute;
  right: -63px;
  top: -78px;
  width: 205px;
  height: 205px;
  border: 1px solid #ff9e4570;
  border-radius: 50%;
  box-shadow: inset 0 0 0 31px #ff9e4526;
  pointer-events: none;
}

.merge-close {
  position: absolute;
  z-index: 2;
  right: 17px;
  top: 11px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

.merge-signal {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a55012;
  font: 10px 'DM Mono';
  letter-spacing: .09em;
}

.merge-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9e45;
  box-shadow: 0 0 0 0 #ff9e4588;
  animation: mergeBeacon 1.5s infinite;
}

.merge-panel h2 {
  margin: 15px 0 7px;
  font-size: 34px;
  letter-spacing: -.06em;
}

.merge-panel h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
}

.merge-question {
  max-width: 580px;
  margin: 0 0 20px;
  color: #69665f;
  font-size: 13px;
  line-height: 1.7;
}

.merge-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 13px;
  align-items: center;
}

.merge-pair > b {
  font: 300 25px 'DM Mono';
  color: #a55012;
}

.merge-pair article {
  min-width: 0;
  padding: 8px;
  border: 1px solid #c9c5bc;
  background: #e8e5de;
}

.merge-thumb {
  height: 105px;
  position: relative;
  overflow: hidden;
  background: #151515;
}

.merge-thumb img,
.merge-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merge-pair small,
.merge-pair code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-pair small {
  margin: 8px 0 4px;
  color: #77736c;
  font: 9px 'DM Mono';
}

.merge-pair code {
  color: #8d440e;
  font: 10px 'DM Mono';
}

.collision-stage {
  position: relative;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  background: #141414;
  color: #f2f0eb;
  opacity: 0;
  transition: height .45s cubic-bezier(.16, 1, .3, 1), margin .45s, opacity .3s;
}

.merge-panel.is-forging .merge-pair,
.merge-panel.is-forging .merge-question {
  display: none;
}

.merge-panel.is-forging .collision-stage {
  height: 228px;
  margin-top: 20px;
  opacity: 1;
}

.collision-line {
  position: absolute;
  top: 47px;
  color: #ffb366;
  font: 12px 'DM Mono';
  letter-spacing: .04em;
  white-space: nowrap;
}

.collision-a { left: 25px; }
.collision-b { right: 25px; }

.collision-core {
  position: absolute;
  left: 50%;
  top: 37px;
  width: 48px;
  height: 48px;
  transform: translateX(-50%) scale(.7);
  display: grid;
  place-items: center;
  border: 1px solid #ff9e4588;
  border-radius: 50%;
}

.collision-core i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9e45;
}

.collision-core span {
  position: absolute;
  top: 54px;
  color: #75726d;
  font: 8px 'DM Mono';
  letter-spacing: .12em;
}

.collision-stage.colliding .collision-a { animation: collideA .68s cubic-bezier(.7, 0, .3, 1) forwards; }
.collision-stage.colliding .collision-b { animation: collideB .68s cubic-bezier(.7, 0, .3, 1) forwards; }
.collision-stage.colliding .collision-core { animation: coreImpact .7s .48s both; }

.rolling-hash {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  width: max-content;
  color: #c9f44b;
  font: 500 clamp(18px, 4vw, 31px) 'DM Mono';
  letter-spacing: .04em;
  text-shadow: 0 0 18px #c9f44b4a;
}

.rolling-hash span.locked {
  color: #fff;
  text-shadow: 0 0 11px #fff8;
}

.collision-stage > small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  text-align: center;
  color: #8d8a84;
  font: 9px 'DM Mono';
  letter-spacing: .1em;
}

.merge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.merge-actions button {
  height: 44px;
  padding: 0 17px;
  font: 600 13px 'Noto Sans SC';
  cursor: pointer;
}

.merge-cancel {
  border: 1px solid #151515;
  background: transparent;
}

.merge-confirm {
  border: 0;
  background: #151515;
  color: #fff;
  box-shadow: 5px 5px 0 #ff9e45;
}

.merge-confirm b { color: #ffb366; }
.merge-confirm:disabled,
.merge-cancel:disabled,
.merge-close:disabled { opacity: .38; cursor: wait; }

.merge-panel.is-complete {
  border-color: #c9f44b;
  box-shadow: 15px 15px 0 #c9f44b;
}

@keyframes mergeTargetPulse { to { box-shadow: inset 0 0 38px #ff9e453b, 0 0 34px #ff9e4555; } }
@keyframes mergeBeacon { 50% { box-shadow: 0 0 0 7px #ff9e4500; } }
@keyframes mergePanelIn { from { opacity: 0; transform: translateY(22px) scale(.96); } }
@keyframes collideA { 70% { left: calc(50% - 117px); opacity: 1; } 100% { left: calc(50% - 28px); opacity: 0; filter: blur(4px); } }
@keyframes collideB { 70% { right: calc(50% - 117px); opacity: 1; } 100% { right: calc(50% - 28px); opacity: 0; filter: blur(4px); } }
@keyframes coreImpact { 50% { transform: translateX(-50%) scale(2.5); box-shadow: 0 0 60px #ff9e45; } 100% { transform: translateX(-50%) scale(.75); border-color: #c9f44b; } }

@media (max-width: 700px) {
  .merge-panel { padding: 25px 18px; box-shadow: 7px 7px 0 #ff9e45; }
  .merge-panel h2 { font-size: 28px; }
  .merge-thumb { height: 82px; }
  .collision-line { font-size: 8px; }
  .merge-actions { flex-direction: column-reverse; }
  .merge-actions button { width: 100%; }
}