.app-content--replay {
  padding-bottom: 0;
}

.game-screen--replay {
  grid-template-rows: auto 10px minmax(0, 1fr);
}

.replay__hud {
  width: var(--mobile-panel-width);
  justify-self: center;
}

.replay__control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .84);
  color: #314564;
  border: 3px solid rgba(255,255,255,.74);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.38), inset 0 -5px 0 rgba(36, 51, 70, .08), 0 11px 22px rgba(42, 63, 98, .14);
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.replay__home {
  background: rgba(255,255,255,.78);
}

.replay__title strong {
  font-size: clamp(16px, 4.4vw, 20px);
}

.replay__hud-pills {
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.replay__timer-pill {
  min-width: 76px;
}

.replay__badge {
  color: #255071;
}

.replay__badge .game__hud-value {
  font-size: 14px;
}

.replay__word-pill {
  color: #255071;
}

.replay__word-counter {
  font-size: 16px;
}

.replay__progress {
  height: 10px;
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 2px 4px rgba(38, 63, 92, .16), 0 5px 12px rgba(43, 61, 91, .08);
}

.replay__progress-fill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  transition: none;
}

.replay__playfield {
  grid-template-rows: auto auto auto auto minmax(clamp(150px, 30dvh, 340px), 1fr);
  align-content: start;
  padding-top: clamp(8px, 1.8dvh, 18px);
}

.replay__controls-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: var(--mobile-panel-width);
}

.replay__control-btn {
  min-width: 0;
  font-size: clamp(.82rem, 3.4vw, 1rem);
}

.replay__control-btn--primary {
  color: #ffffff;
  background: linear-gradient(180deg, #ff6a59 0%, #ea3347 100%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.36), inset 0 -4px 0 rgba(124, 27, 44, .24), 0 10px 22px rgba(161, 74, 43, .18);
}

.replay__control-btn:not(.replay__control-btn--primary):nth-child(2) {
  background: var(--gradient-menu-blue);
  color: #fff;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.26), inset 0 -5px 0 rgba(27, 75, 138, .22), 0 11px 22px rgba(42, 63, 98, .14);
}

.replay__control-btn:not(.replay__control-btn--primary):nth-child(3) {
  background: var(--gradient-action-alt);
  color: #5b3712;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.36), inset 0 -5px 0 rgba(132, 80, 22, .16), 0 11px 22px rgba(42, 63, 98, .14);
}

.replay__control-btn:hover {
  transform: translateY(-2px);
}

.replay__finished-panel {
  width: var(--mobile-panel-width);
  min-height: clamp(130px, 22dvh, 210px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: clamp(20px, 4dvh, 32px);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  border: var(--surface-border);
  box-shadow: var(--shadow-game-panel);
}

.replay__finished-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 9vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  color: #ffe15c;
  -webkit-text-stroke: 2px #d64e25;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #ff8b33, 0 10px 18px rgba(55, 72, 104, .18);
}

.replay__finished-score {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 18vw, 7rem);
  font-weight: 900;
  line-height: .9;
  color: #21314a;
}

.replay__empty {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  width: var(--mobile-panel-width);
  margin: 0 auto;
  padding-top: clamp(44px, 16vh, 120px);
  text-align: center;
}

.replay__empty-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: #1d2a41;
}

.replay__empty-text {
  max-width: min(100%, 22.5rem);
  color: #314564;
  font-weight: 700;
}

@media (max-width: 24.375rem) {
  .replay__badge {
    display: none;
  }

  .replay__control-btn {
    padding-inline: 8px;
  }
}