/* Merge screen styles. */

.merge-cell.is-match {
  outline: 3px solid rgba(78, 178, 84, .95);
  background: rgba(96, 205, 105, .16);
  box-shadow: 0 0 12px rgba(71, 173, 80, .62);
  animation: mergeMatchPulse 1.15s ease-in-out infinite alternate;
}

.merge-cell.is-pressure-pair:not(.is-selected):not(.is-match) {
  outline: 2px solid rgba(85, 156, 73, .58);
  background: rgba(99, 181, 83, .08);
}

.merge-cell.is-pressure-sell:not(.is-selected) {
  outline: 2px dashed rgba(184, 134, 54, .78);
  background: rgba(225, 181, 89, .08);
}

.merge-cell.is-chest-blocker {
  outline: 2px solid rgba(202, 91, 61, .92);
  background: rgba(216, 100, 73, .14);
  box-shadow: 0 0 9px rgba(178, 69, 47, .38);
}

.merge-cell.is-drop-target.is-drop-merge {
  outline: 4px solid rgba(79, 190, 89, .98);
  background: rgba(96, 211, 106, .22);
  box-shadow: 0 0 16px rgba(72, 181, 83, .72);
}

.merge-cell.is-drop-target.is-drop-move {
  outline: 3px solid rgba(70, 167, 235, .95);
  background: rgba(76, 176, 242, .16);
}

.merge-cell.is-drop-target.is-drop-blocked {
  outline: 3px solid rgba(200, 86, 64, .92);
  background: rgba(210, 91, 67, .15);
  box-shadow: none;
}

.merge-cell.is-generator-ready .merge-item {
  filter: drop-shadow(0 0 5px rgba(93, 181, 85, .5));
}

.merge-cell.is-generator-cooling .merge-item {
  filter: saturate(.9) brightness(.96);
}

.merge-cell.is-generator-resting .merge-item,
.merge-cell.is-generator-energy .merge-item,
.merge-cell.is-generator-blocked .merge-item {
  filter: saturate(.62) brightness(.88);
}

.merge-generator-badge {
  position: absolute;
  z-index: 5;
  right: -8%;
  bottom: -7%;
  min-width: 24px;
  max-width: 74px;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 2px 5px rgba(33, 23, 14, .3);
  color: #fff;
  background: rgba(67, 119, 63, .94);
  font-size: .48rem;
  line-height: 1.05;
  font-weight: 950;
  white-space: nowrap;
  pointer-events: none;
}

.merge-generator-badge.is-cooling { background: rgba(54, 105, 142, .95); }
.merge-generator-badge.is-resting { background: rgba(151, 104, 44, .96); }
.merge-generator-badge.is-energy { background: rgba(111, 89, 78, .96); }
.merge-generator-badge.is-blocked { background: rgba(145, 71, 56, .96); }

.merge-cell.is-generator-restored .merge-item {
  animation: mergeGeneratorReady .86s ease-out;
}

.merge-board-feedback {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 9%;
  max-width: 78%;
  transform: translate(-50%, 0);
  pointer-events: none;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(45, 92, 54, .94);
  color: white;
  box-shadow: 0 6px 14px rgba(31, 24, 17, .28);
  font-size: .72rem;
  line-height: 1.05;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: mergeInlineFeedback 1.5s ease both;
}

.merge-board-feedback.is-great { background: rgba(132, 91, 25, .95); }
.merge-board-feedback.is-hint { background: rgba(63, 79, 88, .94); }
.merge-board-feedback.is-cell-anchored { transform: translate(-50%, -135%); }

.merge-level-row {
  grid-template-columns: auto minmax(54px, 1fr) auto;
  gap: 6px;
}

.merge-level-help,
.merge-energy-help {
  appearance: none;
  border: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.merge-level-help {
  min-width: 0;
  padding: 2px 4px;
  border-radius: 8px;
  background: transparent;
  display: grid;
  justify-items: start;
  line-height: 1.02;
}

.merge-level-help:hover,
.merge-level-help:focus-visible,
.merge-level-help.is-active,
.merge-energy-help:hover,
.merge-energy-help:focus-visible,
.merge-energy-help.is-active {
  background: rgba(72, 126, 174, .12);
  outline: 1px solid rgba(59, 109, 151, .22);
}

.merge-energy-help {
  min-width: 58px;
  height: 28px;
  padding: 2px 6px 2px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .54);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}

.merge-energy-help img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.merge-energy-help strong { font-size: .7rem; }
.merge-energy-help small { font-size: .52rem; opacity: .62; }
.merge-energy-help.is-empty { background: rgba(158, 91, 70, .13); }

.merge-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.merge-stat-grid > div.is-pressure {
  background: rgba(212, 150, 72, .16);
  color: #6e4823;
}

.merge-guide-copy { min-width: 0; }
.merge-guide-copy p strong { color: #446f36; }

.merge-guide-copy small,
.merge-chain-meta {
  display: block;
  margin-top: 3px;
  font-size: .6rem;
  line-height: 1.15;
  color: rgba(66, 49, 34, .72);
  font-weight: 800;
}

.merge-chain-meta { color: rgba(55, 92, 53, .84); }

.merge-tier-label {
  display: inline-flex;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(75, 126, 57, .13);
  color: #45643a;
  font-size: .56rem;
  line-height: 1.2;
  vertical-align: middle;
}

.merge-chain-track {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
}

.merge-chain-track span {
  width: 17px;
  height: 5px;
  border-radius: 999px;
  background: rgba(93, 79, 62, .17);
  box-shadow: inset 0 0 0 1px rgba(86, 67, 48, .08);
}

.merge-chain-track span.is-discovered { background: rgba(79, 146, 69, .48); }
.merge-chain-track span.is-current {
  background: rgba(66, 126, 191, .85);
  box-shadow: 0 0 0 1px rgba(44, 92, 145, .28), 0 0 6px rgba(55, 122, 188, .32);
}

.merge-detail-actions .ef-button:disabled {
  opacity: .58;
  filter: saturate(.45);
  cursor: default;
}

.merge-detail.is-context-help {
  background: rgba(246, 244, 220, .97);
}

@keyframes mergeMatchPulse {
  from { box-shadow: 0 0 7px rgba(71, 173, 80, .42); }
  to { box-shadow: 0 0 15px rgba(71, 173, 80, .78); }
}

@keyframes mergeGeneratorReady {
  0% { transform: scale(.94); filter: drop-shadow(0 0 0 rgba(93, 181, 85, 0)); }
  48% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(93, 181, 85, .85)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(93, 181, 85, .5)); }
}

@keyframes mergeInlineFeedback {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.94); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -5px) scale(.98); }
}

.merge-board-feedback.is-cell-anchored { animation-name: mergeCellFeedback; }

@keyframes mergeCellFeedback {
  0% { opacity: 0; transform: translate(-50%, -105%) scale(.9); }
  14% { opacity: 1; transform: translate(-50%, -135%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -158%) scale(.98); }
}

@media (max-width: 700px) {
  .merge-cell.is-match { outline-width: 2px; }
  .merge-cell.is-chest-blocker { outline-width: 2px; }
  .merge-cell.is-pressure-pair,
  .merge-cell.is-pressure-sell { outline-width: 1.5px; }

  .merge-generator-badge {
    right: -12%;
    bottom: -8%;
    min-width: 18px;
    max-width: 50px;
    padding: 1px 3px;
    font-size: .39rem;
    border-width: 1px;
  }

  .merge-board-feedback {
    max-width: 86%;
    padding: 5px 8px;
    font-size: .58rem;
  }

  .merge-level-row {
    grid-template-columns: auto minmax(42px, 1fr) auto;
    gap: 3px;
  }

  .merge-level-help {
    padding: 1px 2px;
  }

  .merge-energy-help {
    min-width: 42px;
    width: 42px;
    height: 27px;
    padding: 1px 3px;
  }

  .merge-energy-help img { width: 18px; height: 18px; }
  .merge-energy-help strong { font-size: .58rem; }
  .merge-energy-max { display: none; }

  .merge-guide-copy small,
  .merge-chain-meta { display: none; }

  .merge-chain-track {
    margin-top: 2px;
    gap: 2px;
  }

  .merge-chain-track span { width: 10px; height: 3px; }
  .merge-tier-label { margin-left: 3px; font-size: .45rem; padding: 1px 3px; }
}

@media (max-width: 360px) {
  .merge-level-row { grid-template-columns: auto minmax(32px, 1fr) 38px; }
  .merge-energy-help { width: 38px; min-width: 38px; }
  .merge-energy-help img { width: 16px; height: 16px; }
  .merge-side-panel .merge-detail-actions .ef-button { padding-inline: 5px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .merge-board-feedback {
    padding: 4px 7px;
    font-size: .54rem;
  }

  .merge-level-row { grid-template-columns: auto minmax(36px, 1fr) 42px; }
  .merge-energy-help { min-width: 42px; width: 42px; height: 26px; }
  .merge-energy-help img { width: 17px; height: 17px; }
  .merge-energy-max { display: none; }
  .merge-chain-track { display: none; }
  .merge-tier-label { font-size: .44rem; }
}

body.reduce-motion .merge-cell.is-match,
body.reduce-motion .merge-cell.is-generator-restored .merge-item,
body.reduce-motion .merge-board-feedback {
  animation: none !important;
}

/* Touch GPUs avoid continuously animated shadows and filters. */
@media (hover: none) and (pointer: coarse) {
  .merge-cell.is-match {
    animation: none;
    box-shadow: 0 0 7px rgba(71, 173, 80, .44);
  }

  .merge-cell.is-generator-ready .merge-item,
  .merge-cell.is-generator-cooling .merge-item,
  .merge-cell.is-generator-resting .merge-item,
  .merge-cell.is-generator-energy .merge-item,
  .merge-cell.is-generator-blocked .merge-item {
    filter: none;
  }

  .merge-cell.is-generator-restored .merge-item {
    animation-duration: .5s;
  }
}