/* ============================================================================
   Doodle Defender — flagship product page
   A living notebook sheet: Skip holds the center, the swarm closes in,
   the page tears open for the MEGA DOODLE.
   Scoped under .dd-main so nothing collides with site.css (nav + footer
   stay shared). Display face = Patrick Hand (the in-game font); body = Nunito.
   ============================================================================ */

:root {
  --dd-red:     #ef4a3c;  /* the threat — swarm + boss only            */
  --dd-gold:    #f2b330;
  --dd-diamond: #2b6ef0;
  --dd-tri:     #3aa860;
  --dd-purple:  #b45ce0;
  --dd-indigo:  #6a5cf0;
  --dd-sheet:   #fffdf6;  /* whiter than the page — a fresh sheet      */
  --dd-banner:  #fdfbf2;  /* the paper baked into assets/banner.png    */
  --dd-ink:     #2b2a33;  /* the marker outline colour                 */
  --dd-faint:   rgba(43, 42, 51, 0.60);
  --dd-shadow:  4px 4px 0 rgba(43, 42, 51, 0.16);
  --dd-shadow-lg: 7px 8px 0 rgba(43, 42, 51, 0.15);
  --dd-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- shell -------------------------------------------------------------- */
/* one <main> carries the flex + type; .dd-wrap is the centered column.
   the boss band lives inside main so it inherits Nunito and full-bleeds. */
.dd-main {
  flex: 1 0 auto;
  width: 100%;
  overflow-x: clip;            /* safety net against any stray horizontal overflow */
  font-family: var(--dd-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--dd-ink);
}
.dd-wrap {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 6px 22px 40px;
}
.dd-main strong { font-weight: 800; }
.dd-main a { color: var(--blue); }

.dd-section { margin-top: 84px; }
.dd-section--tight { margin-top: 56px; }

/* eyebrow + section heading ------------------------------------------------ */
.dd-eyebrow {
  font-family: var(--hand);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 6px;
}
.dd-h2 {
  font-family: var(--hand);
  font-weight: 400;
  color: var(--blue);
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.04;
  margin: 0 0 14px;
}
.dd-h2 .accent { color: var(--pink); }
.dd-lead {
  font-size: clamp(18px, 2.3vw, 21px);
  max-width: 60ch;
  margin: 0 0 8px;
}
.dd-lead--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   HERO — the hand-drawn banner
   The banner is the sheet: it carries its own ruled lines, red margin rule
   and the whole cast, so the card behind it is plain paper in the banner's
   own cream (--dd-banner) and the seam under the art is invisible.
   ========================================================================== */
.dd-hero {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  border: 2.5px solid var(--dd-ink);
  border-radius: 20px;
  background: var(--dd-banner);
  box-shadow: var(--dd-shadow-lg);
  text-align: center;
}
.dd-hero__banner { position: relative; z-index: 1; margin: 0; line-height: 0; }
/* the art sits between 22% and 77% of the file's height — crop the dead paper
   off the top and bottom (leaving a margin) rather than re-exporting the png.
   The bottom edge is feathered away with a mask instead of being cut straight
   across, so the banner's ruled lines and drawn margin rule dissolve into the
   card's plain paper rather than stopping at a hard seam. The card background
   IS the banner's cream (--dd-banner), so what shows through the fade matches. */
.dd-hero__banner img {
  width: 100%;
  aspect-ratio: 2048 / 745;
  object-fit: cover;
  object-position: 50% 48%;
  /* Fully opaque until 91%: the crowned doodle's frame ends at 86.3% of the
     displayed crop and its drop shadow at 90.6% (measured off banner.png
     through this same cover/object-position crop), so the fade must start
     below both or it washes the character out. */
  -webkit-mask-image: linear-gradient(to bottom, #000 91%, rgba(0,0,0,0.5) 96%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 91%, rgba(0,0,0,0.5) 96%, transparent 100%);
}

.dd-hero__inner {
  max-width: 620px;
  margin: 0 auto;
  padding: 6px 26px 32px;
}
.dd-hero__tag {
  font-family: var(--hand);
  font-size: clamp(19px, 3vw, 24px);
  color: var(--dd-faint);
  margin: 0 0 10px;
}
.dd-hero__hook {
  font-size: clamp(17px, 2.4vw, 20px);
  max-width: 46ch;
  margin: 0 auto;
  color: var(--dd-ink);
}
.dd-hero__hook strong { color: var(--blue); }
.dd-hero__hook .danger { color: var(--dd-red); font-weight: 800; white-space: nowrap; }

/* store badges + trust row (reuses .stores/.btn-badge from site.css) */
.dd-hero .stores { margin-top: 22px; }
.dd-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 16px 0 2px;
}
/* Uppercased here rather than typed in caps in the HTML, so assistive tech
   still reads real words. Patrick Hand's caps sit tight, so they get a little
   tracking and a nudge more side padding to keep the pills from looking
   cramped. */
.dd-trust .pill {
  background: var(--dd-sheet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 16px;
}

/* ==========================================================================
   PITCH — what is this
   ========================================================================== */
.dd-pitch {
  border-left: 3px solid var(--pink);
  padding: 2px 0 2px 22px;
  max-width: 64ch;
}
.dd-pitch p { margin: 0 0 14px; font-size: clamp(18px, 2.3vw, 21px); }
.dd-pitch p:last-child { margin-bottom: 0; }
.dd-pitch .lift { font-family: var(--hand); font-size: 1.16em; color: var(--blue); }

/* ==========================================================================
   RUN — one run, start to finish (a real sequence → earned numbers)
   ========================================================================== */
.dd-run { display: grid; gap: 20px; margin-top: 26px; }
.dd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  align-items: start;
  border: 2px solid var(--dd-ink);
  border-radius: 16px;
  background: var(--dd-sheet);
  box-shadow: var(--dd-shadow);
  padding: 20px 22px;
}
.dd-step__no {
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1;
  color: var(--pink);
  border: 2.5px solid var(--dd-ink);
  border-radius: 50%;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--dd-sheet);
  transform: rotate(-4deg);
  flex: none;
}
.dd-step__body { min-width: 0; }
.dd-step__title {
  font-family: var(--hand);
  font-size: clamp(22px, 3vw, 27px);
  color: var(--blue);
  margin: 2px 0 4px;
}
.dd-step__body p { margin: 0; color: var(--dd-ink); }
.dd-step__shot {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 250px;
  border: 2px solid var(--dd-ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--dd-shadow);
  background: #f0ead6;
  transform: rotate(-1deg);
}
.dd-step__shot img { width: 100%; display: block; }

/* wider layout: the shot is real game footage, so give it enough width to
   actually read, and alternate sides so four steps don't march in lockstep */
@media (min-width: 720px) {
  .dd-step {
    grid-template-columns: auto minmax(0, 1fr) 260px;
    align-items: center;
    padding: 26px 30px;
    gap: 18px 28px;
  }
  .dd-step__shot { grid-column: 3; max-width: 260px; justify-self: end; }

  .dd-step:nth-child(even) { grid-template-columns: 260px auto minmax(0, 1fr); }
  .dd-step:nth-child(even) .dd-step__shot { grid-column: 1; justify-self: start; transform: rotate(1deg); }
  .dd-step:nth-child(even) .dd-step__no   { grid-column: 2; }
  .dd-step:nth-child(even) .dd-step__body { grid-column: 3; }
}

/* ==========================================================================
   CAST — meet the doodles
   ========================================================================== */
/* nine doodles — a deliberate 3x3, not an auto-fill that orphans a row of 3 */
.dd-cast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.dd-doodle {
  border: 2px solid var(--dd-ink);
  border-radius: 16px;
  background: var(--dd-sheet);
  box-shadow: var(--dd-shadow);
  padding: 16px 14px 15px;
  text-align: center;
  transition: transform .13s ease, box-shadow .13s ease;
}
.dd-doodle:hover { transform: translate(-1px, -3px); box-shadow: var(--dd-shadow-lg); }
.dd-doodle__art {
  height: 96px;
  display: grid; place-items: center;
  margin-bottom: 13px;
}
.dd-doodle__art img {
  max-height: 96px; width: auto;
  filter: drop-shadow(2px 3px 0 rgba(43, 42, 51, 0.14));
}
.dd-doodle__name {
  font-family: var(--hand);
  font-size: 24px;
  line-height: 1;
  color: var(--blue);
  margin: 0 0 3px;
}
.dd-doodle__tag { font-size: 14px; line-height: 1.4; color: var(--dd-faint); margin: 0; }
/* the doodle's actual starting weapon, straight off its character card */
.dd-doodle__wep {
  font-family: var(--hand);
  font-size: 16px;
  line-height: 1.2;
  color: var(--blue);
  margin: 7px 0 0;
}
/* three across means wider cards — scale the doodle up to fill them */
@media (min-width: 720px) {
  .dd-cast { gap: 20px; }
  .dd-doodle { padding: 22px 20px 20px; }
  .dd-doodle__art { height: 132px; margin-bottom: 15px; }
  .dd-doodle__art img { max-height: 132px; }
  .dd-doodle__name { font-size: 28px; }
  .dd-doodle__tag { font-size: 15.5px; }
}
.dd-doodle__flag {
  display: inline-block;
  font-family: var(--hand);
  font-size: 13px;
  color: var(--pink);
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  padding: 0 9px;
  margin-top: 8px;
}

/* ==========================================================================
   BOSS — the page tears open (the one dark, dramatic band)
   ========================================================================== */
.dd-boss {
  position: relative;
  margin-top: 40px;
  font-family: var(--dd-body);
  /* full-bleed: a direct child of the padding-less <main> already spans the
     full content width — no 100vw (avoids the scrollbar-overflow bug). */
  background: var(--dd-ink);
  color: #f4efdd;
  padding: 92px 22px 96px;
  /* torn top + bottom edges */
  clip-path: polygon(
    0 26px, 6% 8px, 13% 22px, 21% 5px, 29% 20px, 38% 6px, 47% 21px, 55% 7px,
    64% 22px, 72% 6px, 81% 20px, 90% 7px, 100% 20px,
    100% calc(100% - 20px), 91% calc(100% - 6px), 82% calc(100% - 21px),
    73% calc(100% - 7px), 63% calc(100% - 22px), 54% calc(100% - 6px),
    45% calc(100% - 20px), 36% calc(100% - 6px), 27% calc(100% - 21px),
    19% calc(100% - 7px), 11% calc(100% - 20px), 5% calc(100% - 6px), 0 calc(100% - 22px)
  );
}
.dd-boss__inner { max-width: 1016px; margin: 0 auto; }
.dd-boss__eyebrow {
  font-family: var(--hand);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--dd-gold);
  margin: 0 0 6px;
  text-align: center;
}
.dd-boss__title {
  font-family: var(--hand);
  font-weight: 400;
  /* no floor: a clamp() minimum bigger than the viewport can carry wraps the
     line and orphans the trailing skull. 9.5vw keeps ~12% slack against the
     measured width of the whole string at every size from 320px up, so it
     stays on one line and the skulls keep flanking it. */
  font-size: min(9.5vw, 92px);
  white-space: nowrap;
  line-height: 0.94;
  color: var(--dd-red);
  text-align: center;
  margin: 0 0 14px;
  text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.35);
}
.dd-boss__title .skull { color: #f4efdd; -webkit-text-fill-color: #f4efdd; }
.dd-boss__lead {
  text-align: center;
  max-width: 54ch;
  margin: 0 auto 30px;
  font-size: clamp(18px, 2.4vw, 22px);
  color: #ece4d0;
}
.dd-boss__shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.dd-boss__shot {
  border: 2px solid #f4efdd;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-1.4deg);
  background: #000;
}
.dd-boss__shot:nth-child(even) { transform: rotate(1.6deg); }
.dd-boss__shot img {
  width: 100%; display: block;
  height: clamp(300px, 42vw, 420px);
  object-fit: cover;
  object-position: 50% 42%;
}

/* ==========================================================================
   VALUES — the honest bit (framed as the selling point)
   ========================================================================== */
.dd-values {
  border: 2.5px solid var(--dd-ink);
  border-radius: 18px;
  background: var(--dd-sheet);
  box-shadow: var(--dd-shadow-lg);
  padding: 30px clamp(20px, 4vw, 40px) 32px;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
}
.dd-values__head { text-align: center; margin-bottom: 20px; }
.dd-check { list-style: none; margin: 0; padding: 0; }
.dd-check li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  padding: 15px 4px;
  border-bottom: 1.5px dashed rgba(43, 42, 51, 0.18);
}
.dd-check li:last-child { border-bottom: 0; }
/* the one paid line: a pencil in pink, not a green tick — a checkmark next to
   a price reads as an endorsement in a list whose whole point is candour */
.dd-check li.is-paid { border-top: 1.5px solid rgba(43, 42, 51, 0.18); border-bottom: 0; padding-bottom: 4px; margin-top: 4px; }
.dd-check li.is-paid .dd-check__mark,
.dd-check li.is-note .dd-check__mark { font-family: var(--hand); color: var(--pink); }
/* the "not live yet" rider hangs off the paid line rather than reading as a sixth term */
.dd-check li.is-note { border-top: 0; padding-top: 0; }
.dd-check li.is-note b { font-size: 20px; }
.dd-check__mark {
  font-family: var(--dd-body);
  font-weight: 900;
  font-size: 21px;
  color: var(--green);
  line-height: 1.25;
}
.dd-check b {
  display: block;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 23px;
  color: var(--blue);
  line-height: 1.15;
  margin-bottom: 2px;
}
.dd-check .price { color: var(--pink); }
.dd-check__desc { display: block; color: var(--dd-ink); font-size: 15.5px; line-height: 1.5; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.dd-cta { text-align: center; margin-top: 84px; }
.dd-cta__wordmark {
  width: min(560px, 88%);
  margin: 0 auto 8px;
  filter: drop-shadow(2px 3px 0 rgba(43, 42, 51, 0.10));
}
.dd-cta__line {
  font-size: clamp(18px, 2.5vw, 22px);
  max-width: 42ch;
  margin: 6px auto 0;
}
.dd-cta .stores { margin-top: 20px; }

/* ==========================================================================
   scroll-reveal + motion prefs
   ========================================================================== */
/* JS-gated: without JS (or before it runs) content is fully visible.
   The .dd-js class is added to <html> by an inline script in the head. */
.dd-js .dd-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.dd-js .dd-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dd-js .dd-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 680px) {
  .dd-wrap { padding: 6px 16px 34px; }
  .dd-hero { border-radius: 16px; }
  .dd-hero__inner { padding: 10px 16px 26px; }
  .dd-section { margin-top: 62px; }
  .dd-boss { padding: 74px 18px 78px; }
}
/* force two shrink-to-fit cast columns so the grid never overflows a small phone.
   nine into two leaves a trailing card — span it so it reads as the end of the
   list rather than an orphan. */
@media (max-width: 520px) {
  .dd-cast { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dd-doodle:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .dd-doodle__art { height: 82px; }
  .dd-doodle { padding: 13px 10px 13px; }
}