/* The last call to play, and the footer. */

.final { padding-block: 96px; }
.final-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 200px;
  padding: 32px 44px;
  background: radial-gradient(ellipse 40% 90% at 12% 60%, #ffa43a24, transparent 70%), #1a1d24;
  box-shadow: inset 0 0 0 2px #5a4b33, inset 0 0 0 6px #1a1d24, inset 0 0 0 7px #3a3429;
  clip-path: var(--corners);
}
.final-art { display: flex; align-items: flex-end; flex: none; }
.final-art .hero-sprite { --scale: 5; margin-inline: -9px; animation: hero-idle 3.2s steps(16) infinite; }
.final-art .spearman { --scale: 6; animation-delay: -1s; }
.final-art .archer { animation-delay: -2s; }
.final-copy h2 { margin-bottom: 10px; font-size: 56px; }
.final-copy p { color: var(--muted); }
.final-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-block: 28px 36px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.footer-brand { font-size: 28px; color: #b9c0cc; gap: 0; }
.footer-brand .brand-accent { color: #c99a5f; }
.footer-copyright { margin-left: auto; }
/* The pixel fonts have no copyright sign. */
.footer-copyright span { font-family: "Trebuchet MS", sans-serif; }
.back-to-top { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.back-to-top:hover { color: var(--torch); }

@media (max-width: 959px) {
  .final-art { display: none; }
  .final-copy h2 { font-size: 48px; }
}
@media (max-width: 719px) {
  .final { padding-block: 56px; }
  .final-banner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px 24px; }
  .final-actions { flex-wrap: wrap; margin-left: 0; width: 100%; }
  .final-actions .button { flex: 1 1 160px; }
  .site-footer > p { display: none; }
  .back-to-top { flex-basis: 100%; }
}