/* Come Back Alive theme (guild wood + gold) + hero/screens art. Layout lives in ../app-page.css. */
:root { --bg: #2f231d; --ink: #f3e3c3; --muted: #c9b38c; --accent: #e9c04c; --button-bg: #e9c04c; --button-ink: #2a2233; --line: rgba(243,227,195,.22); --section-bg: #f3e3c3; --section-ink: #2a2233; --section-muted: #7a6850; --section-accent: #a8432f; --card-bg: #fbf3e2; --card-line: rgba(42,34,51,.14); --closing-glow: #5a3a2a; }
.wordmark { font-size: 18px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; }
.wordmark img { width: 30px; height: 30px; border-radius: 9px; image-rendering: pixelated; }
.store-link.is-pending { border-color: rgba(243,227,195,.4); }
.quiet-link { border-bottom-color: var(--muted); }

.phone-shot { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.4); image-rendering: pixelated; }
.hero-art .phone-main { position: relative; width: min(100%, 300px); z-index: 2; transform: rotate(-2deg); }
.hero-art .phone-back { position: absolute; width: min(44%, 220px); right: 2%; top: 8%; transform: rotate(7deg); opacity: .96; z-index: 1; }

.screens { padding: 0 5vw 140px; background: var(--section-bg); color: var(--section-ink); }
.screens .section-intro { margin-bottom: 48px; }
.screen-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; }
.screen-row figure { margin: 0; }
.screen-row img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 34px rgba(42,34,51,.22); image-rendering: pixelated; }
.screen-row figcaption { margin-top: 14px; color: var(--section-muted); font-size: 13px; line-height: 1.6; text-align: center; word-break: keep-all; }

.closing-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.closing .closing-icon { width: 96px; height: 96px; margin-bottom: 26px; border-radius: 26px; box-shadow: 0 14px 34px rgba(0,0,0,.35); image-rendering: pixelated; }

@media (max-width: 900px) {
  .hero-art .phone-back { width: min(40%, 190px); }
}
@media (max-width: 600px) {
  .screens { padding-left: 22px; padding-right: 22px; padding-bottom: 95px; }
  .screen-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero-art .phone-main { width: min(78%, 270px); }
  .hero-art .phone-back { width: 36%; right: 0; }
}