/* ============================================================
   Nighttime Nathan — Community Character Creator
   A homepage growth mechanism: kids design a character, drop
   an email for a chance to see it in an episode, and share to
   Instagram. Reuses the night-sky tokens from styles.css.
   ============================================================ */

/* ---------- Homepage launcher (the prominent invite) ---------- */
/* extra top room + the site's squiggle divider so the bold card reads as a
   fresh section instead of crowding the one above it */
/* Top spacing is a MARGIN, not padding: this section jumps straight to the
   bold card (no heading to fill the space), so if the gap lived inside the
   section's box, an anchor jump from the menu would strand the card below a big
   empty band under the nav. As margin it sits OUTSIDE the scroll-anchor box, so
   the jump lands on the card while normal scrolling keeps the separation. */
.create-invite { position: relative; text-align: center; margin-top: clamp(64px, 8vw, 104px); padding-top: 0; }
/* corner-star charm straddling the create card's top edge. The card itself is
   overflow:hidden (and its ::after is the sparkle wash), so the star hangs off
   the section wrapper instead: top = section padding − half the star; left
   tracks the centered 920px card's right corner, clamping to 78% on narrow
   screens. */
.create-invite::after {
  content: ""; position: absolute;
  top: -13px; /* straddles the card's top edge (card now sits at the section top) */
  left: min(78%, calc(50% + 380px));
  width: 26px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.2 5.8 11.3 12 12-6.2.7-11.3 5.8-12 12-.7-6.2-5.8-11.3-12-12C6.2 11.3 11.3 6.2 12 0z' fill='%23ffd54a'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none; filter: drop-shadow(0 3px 6px rgba(2, 8, 26, 0.6));
  transform: rotate(12deg);
}
.create-card {
  position: relative; overflow: hidden;
  max-width: 920px; margin: 0 auto;
  /* header (top-left) + body (bottom-left), preview spanning the right. On
     mobile it stacks header → preview → body so the heading leads and it's
     clear what the little card is. */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas: "head peek" "body peek";
  align-items: center; align-content: center;
  column-gap: clamp(20px, 4vw, 48px); row-gap: clamp(10px, 2vw, 16px);
  padding: clamp(26px, 4vw, 46px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 120% at 15% 0%, #16305f 0%, transparent 55%),
    linear-gradient(180deg, #12305f, #0b1d40);
  border: 3px solid var(--gold-deep);
  box-shadow: 0 0 0 2px var(--navy-900), var(--shadow-pop);
}
.create-card::after { /* faint sparkle wash */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(2px 2px at 12% 30%, #fff 60%, transparent),
    radial-gradient(2px 2px at 82% 20%, var(--gold-soft) 60%, transparent),
    radial-gradient(2px 2px at 68% 78%, #cfe2ff 60%, transparent),
    radial-gradient(2px 2px at 30% 84%, #fff 60%, transparent);
}
.create-head { grid-area: head; align-self: end; position: relative; z-index: 1; text-align: left; min-width: 0; }
/* the room's squiggle lives inside the card, above its heading — same mark and
   size as every other room (the card's gold border is what makes it special) */
.create-head::before {
  content: ""; display: block; width: 118px; height: 14px; margin: 0 0 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7 q 7 -9 14 0 t 14 0 t 14 0 t 14 0 t 14 0 t 14 0 t 14 0 t 14 0' fill='none' stroke='%238fd0ff' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.create-body { grid-area: body; align-self: start; position: relative; z-index: 1; text-align: left; min-width: 0; }
.create-eyebrow {
  display: inline-block; font-weight: 800; font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sky-blue); background: rgba(143, 208, 255, 0.12);
  border: 1.5px solid rgba(143, 208, 255, 0.35); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}
.create-head h2 { font-size: clamp(1.5rem, 4vw, 2.15rem); color: var(--gold); line-height: 1.05; margin: 0; }
.create-body p { color: var(--muted); max-width: 42ch; margin-bottom: 22px; }
/* this CTA label is long — let it wrap on narrow screens instead of forcing
   the whole card wider than the phone (the default .btn is white-space:nowrap) */
.create-open { font-size: 1.08rem; padding: 15px 30px; white-space: normal; max-width: 100%; }

/* the little tilted "peek" card on the right */
.create-peek {
  grid-area: peek;
  position: relative; z-index: 1; justify-self: center; align-self: center; min-width: 0;
  width: min(240px, 60vw); aspect-ratio: 88 / 130;
  border-radius: 20px; padding: 16px 14px;
  background: linear-gradient(180deg, #14336a, #0b1d40);
  border: 3px solid var(--gold-deep); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  transform: rotate(4deg); transition: transform 0.25s ease;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.create-card:hover .create-peek { transform: rotate(0deg) scale(1.02); }
.create-peek .pk-win {
  width: 82%; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; font-size: clamp(48px, 12vw, 74px);
  background: radial-gradient(circle at 42% 36%, #20386e, #0a1a3a 74%); border: 2px solid rgba(255, 213, 74, 0.4);
}
.create-peek .pk-name { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; letter-spacing: 0.03em; }
.create-peek .pk-pill {
  font-weight: 800; font-size: 0.72rem; color: var(--sky-blue);
  background: rgba(143, 208, 255, 0.12); border: 1.5px solid rgba(143, 208, 255, 0.4);
  border-radius: 999px; padding: 5px 12px;
}

@media (max-width: 620px) {
  /* keep the whole invite close to one phone screen: shrink the preview
     and tighten the copy (top divide comes from the base padding above) */
  .create-card {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "peek" "body";  /* header first, THEN the preview */
    text-align: center; row-gap: 12px; padding: 20px 18px;
  }
  .create-head, .create-body { text-align: center; align-self: auto; }
  .create-head::before { margin: 0 auto 12px; } /* squiggle centers with the stacked layout */
  .create-eyebrow { margin-bottom: 8px; }
  .create-head h2 { font-size: 1.45rem; }
  .create-peek { transform: rotate(-3deg); width: min(132px, 40vw); padding: 12px 10px; gap: 7px; }
  .create-peek .pk-win { font-size: clamp(38px, 11vw, 50px); }
  .create-peek .pk-name { font-size: 0.92rem; }
  .create-peek .pk-pill { font-size: 0.66rem; padding: 4px 10px; }
  .create-body p { margin: 0 auto 14px; font-size: 0.92rem; }
  .create-open { font-size: 1rem; padding: 12px 22px; }
}

/* ============================================================
   The full-screen creator overlay
   ============================================================ */
.cc-overlay {
  position: fixed; inset: 0; z-index: 200;
  touch-action: manipulation; /* no accidental double-tap-to-zoom while creating */
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 8%, #12294f, #050d20 82%);
  animation: cc-fade 0.28s ease both;
}
.cc-overlay[hidden] { display: none; }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
.cc-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* top bar with a close button — a solid header BAND so the card scrolls
   clearly underneath it instead of blending into it */
.cc-bar {
  position: relative; z-index: 3; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px clamp(14px, 4vw, 30px);
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 22px rgba(2, 8, 26, 0.55);
}
.cc-bar-title { font-family: var(--font-display); color: var(--gold); font-size: 1.2rem; letter-spacing: 0.05em; }
.cc-close {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, 0.08); transition: background 0.2s, transform 0.15s;
}
.cc-close:hover { background: rgba(255, 255, 255, 0.16); transform: scale(1.06); }
.cc-close svg { width: 22px; height: 22px; }

/* overscroll containment: over-scrolling the editor must never chain into the
   homepage underneath (iOS lets it, even with the body locked) */
.cc-scroll { position: relative; z-index: 2; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cc-inner {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  /* vh-aware spacing so the whole editor tends to fit one phone screen without
     scrolling; creator.js zooms it to fit if a tall name still overflows */
  gap: clamp(8px, 1.5vh, 14px); padding: 4px clamp(14px, 4vw, 24px) clamp(12px, 2vh, 24px);
}

/* ---------- The editable card (mirrors the Community Character Card) ---------- */
.cc-card {
  position: relative; width: min(440px, 92vw);
  border-radius: 30px; padding: clamp(16px, 4.5vw, 34px) clamp(18px, 5vw, 34px);
  background:
    radial-gradient(1.5px 1.5px at 14% 16%, rgba(255,255,255,.55) 50%, transparent),
    radial-gradient(1.5px 1.5px at 78% 11%, rgba(255,233,163,.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 61% 29%, rgba(143,208,255,.45) 50%, transparent),
    radial-gradient(1.5px 1.5px at 31% 44%, rgba(255,255,255,.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 86% 52%, rgba(255,255,255,.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 19% 63%, rgba(255,233,163,.45) 50%, transparent),
    radial-gradient(1.5px 1.5px at 72% 73%, rgba(143,208,255,.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 45% 84%, rgba(255,255,255,.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 88%, rgba(255,233,163,.4) 50%, transparent),
    linear-gradient(180deg, #12305f, #0b1d40);
  border: 4px solid var(--gold-deep);
  box-shadow: 0 0 0 2px var(--navy-900), 0 26px 60px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 14px);
  margin-top: clamp(6px, 1.2vh, 16px);
}
.cc-ribbon {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.11em; color: var(--navy-900);
  background: var(--gold); padding: 9px 26px 7px; border-radius: 0 0 14px 14px; box-shadow: 0 5px 13px rgba(0, 0, 0, 0.35);
}

/* portrait window — wrapped so the picture prompt can float over its top edge
   (the window itself is overflow:hidden). The wrap's top margin also keeps the
   COMMUNITY COLLECTION ribbon from bumping into the image. */
.cc-win-wrap { position: relative; margin-top: clamp(16px, 2.4vh, 26px); }
.cc-win {
  position: relative; width: min(220px, 54vw, 26vh); aspect-ratio: 1; overflow: hidden; border-radius: 20px;
  border: 3px solid rgba(255, 213, 74, 0.4); background: #fff8e7; flex-shrink: 0;
}
/* "What does your pal look like?" — a soft prompt banner over the top of the
   empty picture window, dismissed as soon as a picture is chosen */
.cc-pic-tip {
  /* left:0/right:0 + auto margins center it reliably even under the fit-to-screen
     zoom (a translateX(-50%) mis-centers when an ancestor is zoomed) */
  position: absolute; top: 12px; left: 0; right: 0; margin-inline: auto;
  width: max-content; max-width: 92%;
  z-index: 3; pointer-events: none; text-align: center;
  font-family: var(--font-body); font-weight: 800; font-size: 0.76rem; line-height: 1.2;
  color: var(--ink); background: rgba(6, 15, 36, 0.85);
  border: 1.5px solid rgba(143, 208, 255, 0.55); border-radius: 999px; padding: 7px 15px;
  box-shadow: 0 6px 18px rgba(2, 8, 26, 0.55);
  animation: cc-tip-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}
.cc-pic-tip[hidden] { display: none; }
.cc-win.is-emoji { background: radial-gradient(circle at 42% 36%, #20386e, #0a1a3a 74%); }
.cc-win .cc-portrait {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 0 4%; box-sizing: border-box; line-height: 1; white-space: nowrap; overflow: hidden;
  /* height-capped (20vh) so a wide emoji glyph can't overflow the height-limited
     window when the phone is landscape; multi-emoji get an inline size in setEmoji */
  font-size: clamp(64px, min(34vw, 20vh), 168px);
}
.cc-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-win .cc-sparkle {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 22px 34px, #fff 60%, transparent),
    radial-gradient(2px 2px at 84% 24%, var(--gold-soft) 60%, transparent),
    radial-gradient(2px 2px at 24% 86%, #cfe2ff 60%, transparent),
    radial-gradient(2px 2px at 86% 82%, #fff 60%, transparent);
}
.cc-win.is-emoji .cc-sparkle { opacity: 1; }
.cc-win:not(.is-emoji) .cc-sparkle { opacity: 0; }

/* image-tool buttons under the window — a fixed 4-up tab bar, same width as
   the portrait window above so it reads as one unit. All tools are always
   visible: no sideways scrolling, no scroll-cue arrow. */
.cc-imgtools-wrap { width: min(260px, 68vw); position: relative; }
.cc-imgtools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* "Snap a photo of your drawing" nudge — a gold bubble above the tool row with
   a caret pointing at the Camera button (the first of the four columns) */
.cc-tool-tip {
  position: absolute; left: 0; bottom: calc(100% + 11px); z-index: 4;
  max-width: 100%; box-sizing: border-box; pointer-events: none;
  font-family: var(--font-body); font-weight: 800; font-size: 0.8rem; line-height: 1.25;
  color: var(--navy-900); background: var(--gold);
  padding: 9px 13px; border-radius: 13px; text-align: left;
  box-shadow: 0 9px 24px rgba(2, 8, 26, 0.5);
  animation: cc-tip-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}
.cc-tool-tip[hidden] { display: none; }
.cc-tool-tip::after {
  content: ""; position: absolute; top: 100%; left: 12.5%; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom: 0; border-top-color: var(--gold);
}
@keyframes cc-tip-pop { from { opacity: 0; transform: translateY(7px) scale(0.95); } to { opacity: 1; transform: none; } }
/* the Camera tool softly pulses while the tip is showing */
.cc-tool.cc-tool-hot { border-color: var(--gold); color: var(--gold-soft); animation: cc-tool-pulse 1.5s ease-in-out infinite; }
@keyframes cc-tool-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 213, 74, 0.3); }
}
.cc-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; min-width: 0;
  font-family: var(--font-body); font-weight: 800; font-size: 0.72rem; color: var(--ink);
  background: rgba(255, 255, 255, 0.07); border: 1.5px solid var(--card-border); border-radius: 14px;
  padding: 8px 2px 7px; transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.cc-tool:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
.cc-tool.is-on { background: rgba(255, 213, 74, 0.16); border-color: var(--gold); color: var(--gold-soft); }
.cc-tool .cc-tool-emoji { font-size: 1.3rem; line-height: 1; }

/* editable name */
.cc-name {
  font-family: var(--font-display); font-weight: normal; color: var(--gold); line-height: 1.02;
  text-align: center; font-size: clamp(1.35rem, 5.5vw, 1.85rem); margin: 0 clamp(12px, 4vw, 22px); max-width: 100%;
  text-shadow: 0 3px 0 rgba(148, 96, 12, 0.4), 0 0 30px rgba(255, 213, 74, 0.18);
  outline: none; border-radius: 12px; padding: 2px 10px; min-width: 40px;
  transition: background 0.18s, box-shadow 0.18s;
  /* the font auto-grows to fill up to 2 lines (see fitPreviewName); a normal
     multi-word name wraps at spaces, and only a single too-long word breaks */
  overflow-wrap: break-word; word-break: normal; white-space: normal;
}
.cc-name:hover { background: rgba(255, 255, 255, 0.04); }
.cc-name:focus { background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.45); }
.cc-name:empty::before { content: attr(data-placeholder); color: rgba(255, 233, 163, 0.4); }

/* lives-in */
.cc-liveblock { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cc-mini-label { font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--sky-blue); font-size: 0.72rem; }
.cc-world-wrap { position: relative; max-width: 100%; }
.cc-world-wrap::after { /* dropdown chevron */
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--sky-blue); border-bottom: 2px solid var(--sky-blue);
  transform: translateY(-70%) rotate(45deg);
}
.cc-world {
  appearance: none; -webkit-appearance: none; max-width: 100%; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 1rem; text-align: center; text-align-last: center;
  color: var(--sky-blue); background: rgba(143, 208, 255, 0.12);
  border: 2px solid rgba(143, 208, 255, 0.4); border-radius: 999px; padding: 10px 40px 10px 22px;
}
.cc-world:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(143, 208, 255, 0.6); }
.cc-world option { color: #0a1a3a; font-weight: 700; }
/* custom-world text field, revealed when "make one up" is chosen */
.cc-world-custom {
  display: none; width: min(320px, 80vw); text-align: center; margin-top: 4px;
  font-family: var(--font-body); font-weight: 800; font-size: 1rem; color: var(--sky-blue);
  background: rgba(143, 208, 255, 0.1); border: 2px solid rgba(143, 208, 255, 0.4); border-radius: 999px; padding: 9px 18px;
}
.cc-world-custom::placeholder { color: rgba(143, 208, 255, 0.55); }
.cc-world-custom.show { display: block; }

/* plaque / credit line */
.cc-plaque {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vh, 10px);
  padding-top: clamp(8px, 1.4vh, 14px); border-top: 2px dashed rgba(255, 255, 255, 0.14);
}
.cc-squiggle {
  width: 130px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7 q 7 -9 14 0 t 14 0 t 14 0 t 14 0 t 14 0 t 14 0 t 14 0 t 14 0' fill='none' stroke='%238fd0ff' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cc-credit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  font-weight: 800; font-size: 0.95rem; color: var(--gold-soft); text-align: center;
}
.cc-credit .cc-lead { color: var(--gold-soft); }
/* each label + its field stays together on one line; the row wraps BETWEEN
   these groups (so "age" never gets separated from its input) */
.cc-credit-part { display: inline-flex; align-items: center; gap: 6px; }
.cc-field {
  font-family: var(--font-body); font-weight: 800; font-size: 0.95rem; color: var(--ink); text-align: center;
  /* opaque so the card's decorative background sparkles can't show through and
     look like a stray dot/decimal inside a field (esp. the little age box) */
  background: #172c53; border: 1.5px solid var(--card-border); border-radius: 10px; padding: 4px 8px;
  transition: background 0.18s, box-shadow 0.18s;
  /* keep the placeholder from being clipped: never shrink below the set width in
     the flex plaque line — it wraps to the next line instead */
  flex-shrink: 0; box-sizing: border-box;
}
.cc-field::placeholder { color: rgba(238, 243, 255, 0.4); font-weight: 700; }
/* focus stays OPAQUE (same lift as the old translucent white, pre-blended over
   #172c53) — a see-through focus box lets background stars peek through and
   read as a stray period inside the field */
.cc-field:focus { outline: none; background: #334568; box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.4); }
.cc-field-name { width: 7em; }
.cc-field-age { width: 3.2em; text-align: center; }
.cc-field-state { width: 7em; }

/* iOS Safari zooms the whole page in — and stays stuck zoomed — the moment you
   focus a field whose font is under 16px. Pin every editable field to exactly
   16px so it never triggers. (The big name is a contenteditable, already >16px.) */
.cc-world, .cc-world-custom, .cc-field, .cc-email-input { font-size: 16px; }

.cc-wordmark { height: 30px; width: auto; opacity: 0.92; margin-top: 2px; }
.cc-url { font-family: var(--font-body); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--gold-soft); opacity: 0.82; }

/* submit + hint */
.cc-submit { font-size: 1.1rem; padding: 15px 40px; }
.cc-hint { color: var(--muted); font-size: 0.9rem; text-align: center; max-width: 40ch; }

/* transient message for image failures (bad file, camera warming up, save hiccup) —
   sits above the sheets so it's visible whatever's open */
.cc-toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  z-index: 30; max-width: 88%; pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: var(--font-body); font-weight: 800; font-size: 0.92rem; line-height: 1.3; color: var(--ink);
  background: var(--navy-900); border: 1.5px solid var(--gold-deep); border-radius: 14px;
  padding: 12px 18px; box-shadow: var(--shadow-pop); text-align: center;
}
.cc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .cc-toast { transition: opacity 0.2s ease; } }

/* ============================================================
   Sub-sheets (emoji picker, doodle pad, camera)
   ============================================================ */
.cc-sheet {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 20px clamp(14px, 4vw, 24px);
  background: rgba(5, 13, 32, 0.86); backdrop-filter: none;
  animation: cc-fade 0.2s ease both;
}
.cc-sheet[hidden] { display: none; }
.cc-sheet-panel {
  width: min(520px, 94vw); max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #12305f, #0b1d40);
  border: 3px solid var(--gold-deep); border-radius: 26px; box-shadow: var(--shadow-pop);
  padding: clamp(18px, 4vw, 28px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cc-sheet-title { font-family: var(--font-display); color: var(--gold); font-size: 1.25rem; text-align: center; letter-spacing: 0.04em; }
.cc-sheet-sub { color: var(--muted); font-size: 0.9rem; text-align: center; margin-top: -8px; }
.cc-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* doodle Save/Cancel: equal width, side by side */
.cc-doodle-sheet .cc-sheet-actions { flex-wrap: nowrap; width: 100%; max-width: 320px; margin: 0 auto; }
.cc-doodle-sheet .cc-sheet-actions > button { flex: 1 1 0; padding: 12px 0; font-size: 1rem; }

/* emoji sheet: the panel itself never scrolls — the grid is the scroll region,
   so the title, "type your own" input, Done button and X stay pinned in view */
.cc-emoji-sheet .cc-sheet-panel { overflow: hidden; position: relative; }
.cc-sheet-x {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, 0.08); transition: background 0.2s, transform 0.15s;
}
.cc-sheet-x:hover { background: rgba(255, 255, 255, 0.16); transform: scale(1.06); }
.cc-sheet-x svg { width: 20px; height: 20px; }

/* emoji grid */
.cc-emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; width: 100%;
  overflow-y: auto; min-height: 0; overscroll-behavior: contain;
}
.cc-emoji-btn {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 1.7rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1.5px solid var(--card-border); border-radius: 14px;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.cc-emoji-btn:hover { transform: scale(1.12); background: rgba(255, 255, 255, 0.14); }
.cc-emoji-btn.is-on { border-color: var(--gold); background: rgba(255, 213, 74, 0.18); }
.cc-emoji-custom {
  width: 100%; text-align: center; font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.06); border: 1.5px solid var(--card-border); border-radius: 12px; padding: 8px;
  color: var(--ink);
}
.cc-emoji-custom::placeholder { font-size: 0.9rem; color: rgba(238, 243, 255, 0.45); }

/* doodle pad */
/* canvas + its floating undo/redo buttons */
.cc-doodle-stage { position: relative; width: min(360px, 80vw); }
.cc-doodle-canvas {
  width: 100%; aspect-ratio: 1; border-radius: 18px; background: #fff8e7;
  border: 3px solid rgba(255, 213, 74, 0.4); touch-action: none; cursor: crosshair; display: block;
}
.cc-canvas-btn {
  position: absolute; top: 8px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 12px; cursor: pointer; font-size: 1.15rem; line-height: 1;
  background: rgba(10, 26, 58, 0.72); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background 0.15s, transform 0.12s, opacity 0.15s;
}
.cc-canvas-btn:hover:not(:disabled) { background: rgba(10, 26, 58, 0.92); transform: scale(1.06); }
.cc-canvas-btn:disabled { opacity: 0.32; cursor: default; }
.cc-canvas-undo { left: 8px; }
.cc-canvas-redo { right: 8px; }

/* emoji stickers layered over the canvas (move / resize / rotate) */
.cc-sticker-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cc-sticker { position: absolute; pointer-events: auto; touch-action: none; cursor: move; display: grid; place-items: center; }
.cc-sticker-face { line-height: 1; user-select: none; }
.cc-sticker.sel { outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 6px; }
.cc-sticker-del, .cc-sticker-handle { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0; display: none; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.cc-sticker.sel .cc-sticker-del, .cc-sticker.sel .cc-sticker-handle { display: grid; }
.cc-sticker-del { top: -13px; left: -13px; background: #e23b5a; color: #fff; font-size: 0.72rem; }
.cc-sticker-handle { bottom: -13px; right: -13px; background: var(--gold); color: var(--navy-900); font-weight: 900; }
.cc-sticker-handle::before { content: "⤡"; font-size: 0.85rem; }

/* "More tools" drawer */
.cc-drawer-toggle {
  font-family: var(--font-body); font-weight: 800; font-size: 0.9rem; color: var(--sky-blue); cursor: pointer;
  background: rgba(143, 208, 255, 0.1); border: 1.5px solid rgba(143, 208, 255, 0.35);
  border-radius: 999px; padding: 8px 18px; transition: background 0.18s;
}
.cc-drawer-toggle:hover { background: rgba(143, 208, 255, 0.18); }
.cc-caret { display: inline-block; font-size: 0.7rem; }
.cc-doodle-drawer { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cc-doodle-drawer[hidden] { display: none; }
.cc-dtool-wide { min-width: auto; gap: 4px; font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; }
.cc-pens { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.cc-pen {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.35); transition: transform 0.12s, border-color 0.15s;
}
.cc-pen:hover { transform: scale(1.12); }
.cc-pen.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); transform: scale(1.12); }
/* eraser drawn inline so it always shows (blue body, pink top, cream bottom) */
.cc-pen-eraser { display: grid; place-items: center; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.cc-pen-eraser svg { width: 24px; height: 24px; }
.cc-pen-stamps { display: grid; place-items: center; background: rgba(255,255,255,0.1); font-size: 1.1rem; }
/* standalone "Clear all" above the colours */
.cc-clear-btn { align-self: center; padding: 8px 18px; font-size: 0.85rem; }

/* rainbow dot = the custom colour picker trigger */
.cc-pen-rainbow { background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); border-color: rgba(255,255,255,0.5); }
.cc-pen-rainbow.is-on { box-shadow: 0 0 0 2px var(--gold); border-color: #fff; transform: scale(1.12); }

/* the expanding colour-picker panel */
.cc-colorpop {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin: 0 auto;
  padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1.5px solid var(--card-border);
}
.cc-colorpop[hidden] { display: none; }
.cc-sv {
  position: relative; width: 100%; height: 130px; border-radius: 10px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue, 210), 100%, 50%));
}
.cc-sv-knob {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); transform: translate(-50%, -50%); pointer-events: none;
}
.cc-hue {
  width: 100%; height: 18px; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
.cc-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.4); cursor: pointer; }
.cc-hue::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.4); cursor: pointer; }
.cc-sample-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; color: var(--ink);
  background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); border-radius: 999px; padding: 9px 14px;
}
.cc-sample-btn:hover { background: rgba(255,255,255,0.16); }
.cc-sample-btn svg { width: 16px; height: 16px; }
.cc-stamps-toggle { margin-top: 2px; }
.cc-brush-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; font-size: 0.82rem; }
.cc-brush-row input[type="range"] { accent-color: var(--gold); flex: 1; min-width: 120px; height: 26px; }

/* custom colour picker (native, styled as a round swatch) */
.cc-color-custom {
  width: 34px; height: 34px; padding: 0; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%;
  cursor: pointer; background: none; -webkit-appearance: none; appearance: none; flex-shrink: 0;
}
.cc-color-custom::-webkit-color-swatch-wrapper { padding: 0; }
.cc-color-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.cc-color-custom::-moz-color-swatch { border: none; border-radius: 50%; }
.cc-color-custom.is-on { box-shadow: 0 0 0 2px var(--gold); border-color: #fff; }

/* doodle tool buttons (fill · shapes · undo · redo · clear) */
.cc-doodle-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cc-dtool {
  min-width: 42px; height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; color: var(--ink);
  background: rgba(255,255,255,0.07); border: 1.5px solid var(--card-border); border-radius: 12px;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.cc-dtool:hover:not(:disabled) { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.cc-dtool:disabled { opacity: 0.35; cursor: default; }
.cc-dtool.is-on { background: rgba(255,213,74,0.18); border-color: var(--gold); color: var(--gold-soft); }

/* emoji stamp strip */
/* stamps open in a panel (😀 dot) — a 4-row grid that scrolls side to side */
.cc-stamp-row {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 40px); grid-auto-columns: 40px;
  gap: 6px; width: 100%; max-width: 340px; margin: 0 auto; height: 198px; box-sizing: border-box; flex-shrink: 0;
  padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1.5px solid var(--card-border);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.cc-stamp-row[hidden] { display: none; }
.cc-stamp-row .cc-stamp-btn { width: 40px; height: 40px; }
.cc-stamp-row::-webkit-scrollbar { display: none; }
.cc-stamp-btn {
  flex-shrink: 0; width: 42px; height: 42px; font-size: 1.5rem; cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1.5px solid var(--card-border); border-radius: 12px;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.cc-stamp-btn:hover { transform: scale(1.1); background: rgba(255,255,255,0.14); }
.cc-stamp-btn.is-on { border-color: var(--gold); background: rgba(255,213,74,0.18); }

/* camera */
.cc-camera-stage {
  position: relative; width: min(360px, 80vw); aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  background: #0a1a3a; border: 3px solid rgba(255, 213, 74, 0.4); display: grid; place-items: center;
}
/* contain (not cover) so the square preview shows the WHOLE frame the kid is
   about to capture — snapPhoto keeps the whole frame, so a cover-cropped preview
   would misrepresent what they get */
.cc-camera-stage video { width: 100%; height: 100%; object-fit: contain; }
.cc-camera-stage video.cc-cam-mirror { transform: scaleX(-1); } /* selfie cams only */
.cc-camera-msg { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 20px; }

/* small ghost/secondary button used inside sheets */
.cc-btn-ghost {
  font-family: var(--font-display); letter-spacing: 0.04em; font-size: 0.98rem;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1.5px solid var(--card-border); color: var(--ink);
  transition: background 0.18s, transform 0.12s;
}
.cc-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }

/* ============================================================
   Success / email-capture modal
   ============================================================ */
.cc-done {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center; padding: 20px clamp(14px, 4vw, 24px);
  background: rgba(5, 13, 32, 0.9); animation: cc-fade 0.25s ease both; overflow-y: auto; overscroll-behavior: contain;
}
.cc-done[hidden] { display: none; }
.cc-done-panel {
  position: relative;
  width: min(460px, 94vw); text-align: center; margin: auto;
  background: linear-gradient(180deg, #12305f, #0b1d40);
  border: 3px solid var(--gold-deep); border-radius: 26px; box-shadow: var(--shadow-pop);
  padding: clamp(20px, 4.5vw, 28px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cc-done-x {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, 0.08); transition: background 0.2s, transform 0.15s;
}
.cc-done-x:hover { background: rgba(255, 255, 255, 0.16); transform: scale(1.06); }
.cc-done-x svg { width: 20px; height: 20px; }
.cc-done-emoji { font-size: 2.4rem; line-height: 1; }
.cc-done-panel h3 { font-family: var(--font-display); color: var(--gold); font-size: 1.5rem; letter-spacing: 0.03em; line-height: 1.25; }
.cc-done-panel p { color: var(--muted); font-size: 0.94rem; line-height: 1.45; }

/* two steps inside the done panel: email capture, then the card reveal */
.cc-done-view { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cc-done-view[hidden] { display: none; }
.cc-reveal-note { color: var(--muted); font-size: 0.85rem; margin-top: -4px; }
/* the finished card, revealed after opt-in */
.cc-done-card {
  display: block; margin: 2px auto 4px; width: auto;
  max-width: min(300px, 72vw); max-height: 48vh;
  border-radius: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.cc-done-panel .cc-ig-note {
  color: var(--gold-soft); font-weight: 800; font-size: 0.9rem;
  /* hairline divider separates "enter the contest" from "share / save" so the
     two halves read as sections rather than floating in blank space */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px; margin-top: 4px; width: 100%;
}

.cc-email-form { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
/* field on top, submit button stacked full-width underneath it */
.cc-email-row { display: flex; flex-direction: column; gap: 10px; }
.cc-email-row .btn { width: 100%; }
.cc-email-input {
  width: 100%; min-width: 0; font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--ink);
  background: rgba(255, 255, 255, 0.08); border: 1.5px solid var(--card-border); border-radius: 14px; padding: 13px 16px;
}
.cc-email-input::placeholder { color: rgba(238, 243, 255, 0.45); }
.cc-email-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.45); }
.cc-email-fine { color: var(--muted); font-size: 0.78rem; }
.cc-status { font-weight: 800; font-size: 0.92rem; color: var(--sky-blue); min-height: 1.2em; }
/* reclaim the reserved line while there's no status to show */
.cc-status:empty { min-height: 0; }
.cc-status.bad { color: #ff9db0; }
/* honeypot */
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* stacked full-width buttons — mirrors the email section's rhythm above */
.cc-share-row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cc-share-row .btn, .cc-share-row .cc-btn-ghost { width: 100%; }
.cc-btn-insta {
  background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); color: #fff;
  box-shadow: 0 6px 22px rgba(220, 39, 67, 0.35);
}
.cc-done-close { background: none; border: 0; color: var(--muted); font-weight: 800; cursor: pointer; font-size: 0.88rem; padding: 6px; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(238, 243, 255, 0.35); }
.cc-done-close:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .cc-overlay, .cc-sheet, .cc-done, .cc-tool-tip, .cc-pic-tip, .cc-tool.cc-tool-hot { animation: none; }
}