body.word-merge-active #screen-mocks .word-merge-screen {
  width: min(100% - 28px, 820px);
}

.word-merge-top {
  padding: 4px 2px 0;
}

.word-merge-top h2 {
  color: #17212b;
  text-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.word-merge-actions button,
.word-merge-back,
.word-merge-result button {
  background:
    linear-gradient(180deg, #ffffff, #eef5fa);
  box-shadow:
    0 10px 18px rgba(20, 40, 60, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.word-merge-actions button:hover,
.word-merge-result button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 24px rgba(20, 40, 60, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.word-merge-stats {
  gap: 12px;
}

.word-merge-stats div {
  position: relative;
  overflow: hidden;
  padding: 15px 17px;
  border: 1px solid rgba(20, 40, 60, 0.06);
  background:
    linear-gradient(145deg, #ffffff, #edf5fa);
  box-shadow:
    0 12px 22px rgba(20, 40, 60, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.word-merge-stats div:hover {
  transform: translateY(-2px);
  box-shadow:
    0 15px 26px rgba(20, 40, 60, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.word-merge-stats span {
  letter-spacing: 0;
}

.word-merge-stats strong {
  color: #17212b;
}

.word-merge-family-strip {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 12px;
}

.word-merge-family-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--wm-family-mid);
  color: #ffffff;
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  font-size: 12px;
  font-weight: 950;
}

.word-merge-board {
  position: relative;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 40, 60, 0.08);
  background:
    linear-gradient(145deg, #dcebf4, #c8dce9);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -10px 20px rgba(15,23,42,0.07);
}

.word-merge-board::before {
  content: none;
}

.word-merge-cell {
  background:
    linear-gradient(145deg, #b7cedd, #e3eff6);
  box-shadow:
    inset 0 2px 5px rgba(15, 23, 42, 0.08),
    inset 0 -1px 0 rgba(255,255,255,0.5);
}

.word-merge-hint {
  color: #728195;
}

@media (max-width: 620px) {
  body.word-merge-active #screen-mocks .word-merge-screen {
    width: min(100% - 18px, 520px);
  }

  .word-merge-family-strip {
    margin-bottom: 8px;
  }

  .word-merge-board {
    gap: 8px;
    padding: 9px;
  }
}