:root {
  color-scheme: light;
  font-family: Inter, Montserrat, Avenir, "Segoe UI", sans-serif;
  background: #f1eee9;
  color: #24110b;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body { min-height: 100vh; min-height: 100dvh; }

.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.wallet-ad {
  position: relative;
  width: min(300px, calc(100vw - 28px));
  height: min(600px, calc(100dvh - 28px));
  min-height: 500px;
  overflow: hidden;
  background: #fff7ea;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgb(66 20 4 / 24%);
}

.reveal-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 24px;
  text-align: center;
  background: radial-gradient(circle at 50% 0, #fff, #fff2d8 68%);
}

.brand-logo { width: 64px; height: 64px; border-radius: 50%; }

h1 { margin: 4px 0 0; font-size: 24px; line-height: 1.05; }

.lead { margin: 0; font-size: 14px; line-height: 1.35; }

.desktop-save { display: grid; justify-items: center; gap: 5px; }
.desktop-save p { margin: 0; font-size: 12px; }
.qr { width: 150px; height: 150px; background: #fff; border: 8px solid #fff; border-radius: 10px; }

.wallet-actions { display: none; width: 100%; gap: 10px; flex-direction: column; align-items: center; }
.wallet-link { display: block; width: min(220px, 100%); border-radius: 8px; }
.wallet-link img { display: block; width: 100%; height: 42px; object-fit: contain; }
.wallet-link.is-disabled { opacity: .35; filter: grayscale(1); }

.status-message { min-height: 32px; margin: 0; font-size: 12px; line-height: 1.3; color: #761b11; }
.text-button { border: 0; background: transparent; color: #8e1b12; text-decoration: underline; cursor: pointer; }

.creative {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f8e8ce;
  touch-action: pan-y;
  cursor: grab;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.creative:active { cursor: grabbing; }
.creative > img { width: 100%; height: 100%; display: block; object-fit: cover; }

.swipe-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  color: #fff;
  background: #cc0000;
}

.chevron { font-size: 30px; line-height: 1; animation: nudge 1.5s ease-in-out infinite; }
.swipe-copy { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

.wallet-ad.is-open .creative { transform: translateX(104%); opacity: 0; pointer-events: none; }

@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

@media (pointer: coarse), (max-width: 600px) {
  .desktop-save { display: none; }
  .wallet-actions { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .creative { transition: none; }
  .chevron { animation: none; }
}