:root {
  --legacy-purple: #4B296B;
  --monty-blue: #52FFFF;
  --mission-charcoal: #222222;
  --freedom-white: #FFFFFF;
  --silver: #C0C0C0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--mission-charcoal); }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--freedom-white);
  overscroll-behavior-x: none;
}

.viewer {
  width: min(100%, 1600px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.comic-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.comic-image {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}

.comic-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 10px;
  width: min(100%, 900px);
  margin: 0 auto;
}

.nav-button {
  min-height: 44px;
  border: 2px solid var(--monty-blue);
  border-radius: 8px;
  background: transparent;
  color: var(--freedom-white);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}
.nav-button:last-child { justify-self: stretch; }
.nav-button:disabled { opacity: .35; cursor: default; }
.nav-primary { background: var(--legacy-purple); }
.nav-button:focus-visible { outline: 3px solid var(--monty-blue); outline-offset: 2px; }

.page-counter {
  min-width: 64px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.swipe-hint {
  margin: -2px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--silver);
}

@media (max-width: 600px) {
  .viewer { gap: 7px; }
  .comic-image { max-height: calc(100svh - 88px); }
  .comic-nav { gap: 7px; }
  .nav-button { font-size: 14px; min-height: 42px; }
  .swipe-hint { display: none; }
}

/* ---------- Page 21: MyProfitCards-inspired decision / handoff ---------- */

.decision-page {
  width: min(100%, 980px);
  max-height: calc(100svh - 96px);
  overflow-y: auto;
  margin: auto;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(82,255,255,.12), transparent 32%),
    linear-gradient(180deg, #f5f5f5 0%, #d7d7d7 100%);
  color: var(--mission-charcoal);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  text-align: center;
}

.decision-page[hidden] { display: none; }

.decision-panel {
  padding: clamp(22px, 4vw, 38px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(82,255,255,.16), transparent 44%),
    #0d1520;
  color: var(--freedom-white);
  border: 2px solid rgba(82,255,255,.45);
  box-shadow: inset 0 0 28px rgba(82,255,255,.08);
}

.decision-eyebrow {
  margin: 0 0 8px;
  color: var(--monty-blue);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: clamp(12px, 1.8vw, 16px);
}

.decision-panel h1 {
  margin: 0;
  color: var(--freedom-white);
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1.02;
}

.decision-copy {
  margin: 14px auto 22px;
  max-width: 650px;
  color: #e8e8e8;
  font-size: clamp(16px, 2.2vw, 22px);
}

.decision-tagline {
  margin: 16px 0 0;
  color: var(--monty-blue);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
}

.decision-section {
  padding: clamp(22px, 4vw, 38px) clamp(8px, 2vw, 20px) 0;
}

.decision-section h2 {
  margin: 0 0 12px;
  color: var(--legacy-purple);
  font-size: clamp(24px, 4.5vw, 42px);
  line-height: 1.05;
  text-shadow: 1px 1px 0 rgba(82,255,255,.65);
}

.decision-section p {
  margin: 0 auto 20px;
  max-width: 790px;
  font-size: clamp(16px, 2.25vw, 21px);
  line-height: 1.45;
  font-weight: 600;
}

.decision-button {
  width: min(100%, 650px);
  min-height: 64px;
  margin: 0 auto;
  padding: 16px 22px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  font-size: clamp(17px, 2.5vw, 24px);
  line-height: 1.15;
  border: 3px solid var(--legacy-purple);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  touch-action: manipulation;
}

.decision-button-purple {
  background: var(--legacy-purple);
  color: var(--freedom-white);
  border-color: var(--monty-blue);
}

.decision-button-cyan {
  background: var(--monty-blue);
  color: var(--mission-charcoal);
  border-color: var(--legacy-purple);
}

.decision-button:focus-visible {
  outline: 4px solid var(--monty-blue);
  outline-offset: 4px;
}

.decision-footer {
  margin: 34px 0 6px;
  color: var(--legacy-purple);
  font-size: clamp(12px, 1.7vw, 16px);
  font-weight: 700;
}

/* Portrait/mobile artwork is already designed for a narrow screen.
   Keep the image large enough to remain readable. */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1180px) {
  .viewer {
    justify-content: flex-start;
  }

  .comic-image {
    width: 100%;
    max-width: 100%;
    max-height: calc(100svh - 88px);
    object-fit: contain;
  }

  .decision-page {
    max-height: none;
    width: 100%;
    border-radius: 12px;
    padding: 14px;
  }

  .decision-panel {
    padding: 24px 16px;
  }

  .decision-section {
    padding-top: 28px;
  }

  .decision-button {
    min-height: 58px;
  }
}