/* ============================================================
   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-head h2 { font-size: clamp(1.5rem, 4vw, 2.15rem); color: var(--gold); line-height: 1.05; margin: 0; }
/* A quiet line under the headline, not a badge over it. This was a sky-blue
   uppercase pill sitting ABOVE the h2, which read as a label stuck on the card
   rather than as the card's own voice — and it made the eye stop twice before
   reaching the actual headline. */
.create-subhead {
  display: block; margin: 9px 0 0;
  font-size: clamp(0.92rem, 2vw, 1.02rem); font-weight: 600;
  color: var(--sky-blue); line-height: 1.35;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}

/* ---------- "Made by you": the rail of real community cards ---------- */
/* Only ever on a build that found cards — js/creator.js unhides the rail and
   puts .has-rail on the card together — so none of this is a layout the empty
   state has to survive. Without it the section is byte-for-byte what it was.

   The stack is the phone layout promoted to every width: head → rail → body,
   so the evidence sits between the pitch and the button rather than after it.
   Two columns can't hold a rail AND stay readable at 920px, and the mock peek
   was only ever standing in for exactly these cards, so it steps aside. */
.create-card.has-rail {
  grid-template-columns: 1fr;
  grid-template-areas: "head" "rail" "body";
  text-align: center;
}
.create-card.has-rail .create-head,
.create-card.has-rail .create-body { text-align: center; align-self: auto; }
.create-card.has-rail .create-head::before { margin: 0 auto 12px; }
.create-card.has-rail .create-peek { display: none; }
/* With real cards on show, the pitch is the cards. The heading says what this
   is and the button says what to do — a paragraph in between is just something
   to read past. It stays in the markup because the no-cards fallback below
   still needs it; it's only this layout that does without. */
.create-card.has-rail .create-body p { display: none; }

.create-rail { grid-area: rail; position: relative; z-index: 1; min-width: 0; }
/* THE RAIL IS A SHOWCASE, NOT A CONTROL. Nothing in it can be touched: it
   drifts on its own and the button underneath is the only thing in this module
   that answers to a finger.

   It used to be a real swipeable scroller, and that is what produced the bug
   reported twice as "tapping a card freezes the scroll" — creator.js paused the
   drift for seven seconds the moment a pointer went down on it, which included
   every tap AND every vertical page swipe that happened to start over this
   section. Making it untouchable deletes the whole class of problem rather than
   tuning when to pause.

   The two lines that do it:
   - pointer-events: none — a finger passes straight THROUGH to the page, so
     scrolling past the rail is exactly as if it weren't there. (Belt: it also
     stops wheel and drag from ever reaching it.)
   - overflow: hidden — braces. Hidden still permits PROGRAMMATIC scrolling, so
     creator.js's scrollLeft drift is untouched; it only takes away the user's.
   Snapping went with them: it exists to land a human's swipe on a card
   boundary, and there are no human swipes here any more.

   Vertical padding is NOT decoration — it's the room the tilted cards need to
   lean without clipping their corners. */
.cr-track {
  display: flex; gap: clamp(10px, 1.6vw, 16px);
  /* Two or three cards should sit in the middle of the card, not hug its left
     edge. `safe` is the whole point of writing it this way: plain
     `justify-content: center` pushes the first items off the starting edge once
     the row DOES overflow, and with overflow hidden nothing can bring them
     back. safe centering falls back to flex-start exactly then. */
  justify-content: safe center;
  overflow: hidden;
  pointer-events: none;
  /* auto, NOT smooth. The flow in creator.js writes scrollLeft every frame in
     third-of-a-pixel steps; with smooth here the browser turns each of those
     writes into its own easing animation, they trip over each other, and the
     rail sits perfectly still. */
  scroll-behavior: auto;
  padding: 12px 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cr-track::-webkit-scrollbar { display: none; }
.cr-item {
  flex: 0 0 auto;
  /* These are children's drawings with a name, a world and a "dreamed up by"
     line on them — at 164px (the old cap) none of that was legible and the rail
     read as a strip of thumbnails. Worse, 19vw never reached its own cap until
     ~860px while the phone rule below hands out 190px, so DESKTOP CARDS CAME
     OUT SMALLER THAN PHONE ONES. The floor is now the phone's 190px, so the two
     rules meet continuously at the 620px breakpoint instead of stepping down as
     the screen gets wider. At 1440 this shows ~3.5 cards in the 822px rail —
     three whole ones and the edge of a fourth, which is what says the set keeps
     going. */
  width: clamp(190px, 24vw, 220px);
  aspect-ratio: 1080 / 1440;        /* the card canvas's own proportions */
  border-radius: 14px; overflow: hidden;
  border: 2px solid var(--gold-deep);
  background: linear-gradient(180deg, #14336a, #0b1d40);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  /* a slight alternating lean, set per card in creator.js — a row of squared-up
     rectangles reads like a product grid; these are drawings on a fridge */
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cr-item:hover { transform: rotate(0deg) scale(1.04); }
}
.cr-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  /* creator.js already declines to run the flow; this covers any snap the
     browser would animate on its own */
  .cr-track { scroll-behavior: auto; }
  .cr-item, .cr-item:hover { transition: none; }
}

@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-subhead { margin-top: 6px; font-size: 0.9rem; }
  .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; }
  /* Run the rail out to the card's edges. Stopping it at the padding leaves a
     tidy margin either side, which reads as "that's all of them" — bleeding it
     off both edges is what says the set keeps going. */
  .create-card.has-rail .cr-track {
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
  }
  /* BIGGER ON PHONES. The base width is clamp(112px, 19vw, 164px), and 19vw of
     a phone is far below the 112px floor — so every phone got the smallest card
     the rail can draw, about 149px tall. The module read as a thin strip of
     thumbnails under the heading rather than the thing the section is about.
     Scaled to the viewport instead: ~172px wide / ~230px tall at 375px, which
     still shows two whole cards plus the edge of a third, so it stays obvious
     that the set continues past the frame. */
  .create-card.has-rail .cr-item { width: min(190px, 46vw); }
  .create-card.has-rail .cr-track { gap: 14px; padding-top: 16px; padding-bottom: 16px; }
}

/* ============================================================
   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 character 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 — the single most important field on the card, so it is drawn
   as an obvious "type here" well rather than a heading. Empty, it's a dashed
   gold box with a pencil and a slow beckon; once it holds a name the border
   settles back so the card reads as a card and not as a form. */
.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; padding: 7px 16px; min-width: min(13ch, 74vw); box-sizing: border-box;
  border: 2.5px dashed rgba(255, 213, 74, 0.55); border-radius: 16px;
  background: rgba(4, 11, 30, 0.5);
  transition: background 0.18s, box-shadow 0.18s, border-color 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.06); }
.cc-name:empty::before {
  content: "✏️ " attr(data-placeholder);
  /* no drop shadow on the prompt: the shadow is for a real name, and on the
     pencil it just makes the glyph look smudged */
  color: rgba(255, 233, 163, 0.92); text-shadow: none;
}
/* Tapping in clears the prompt so the child types into an empty field instead
   of over the top of "TAP TO NAME". The zero-width space is load-bearing: with
   `content: ""` the pseudo-element makes no line box, so the empty field
   collapses to a sliver the moment it's focused. It comes back on blur if
   nothing was typed. */
.cc-name:empty:focus::before { content: "\200B"; }
.cc-name:empty { animation: cc-name-beckon 2.4s ease-in-out infinite; }
@keyframes cc-name-beckon {
  0%, 100% { border-color: rgba(255, 213, 74, 0.42); box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); }
  50% { border-color: rgba(255, 213, 74, 0.95); box-shadow: 0 0 0 5px rgba(255, 213, 74, 0.13); }
}
/* named → the well recedes to a quiet keyline (still clearly tappable) */
.cc-name:not(:empty) { border-style: solid; border-color: rgba(255, 213, 74, 0.2); background: rgba(255, 255, 255, 0.03); }
.cc-name:focus {
  animation: none; border-style: solid; border-color: var(--gold);
  background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 4px rgba(255, 213, 74, 0.22);
}

/* 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; }
/* (no free-text world field: "Lives in" offers the show's own worlds only) */

/* 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: 8em; }

/* Age — a swipeable strip of tappable chips, not a number field. The numeric
   keyboard is the one keyboard a five-year-old can't drive, and the strip
   doubles as the bit of the card that's fun to fiddle with. */
.cc-agerow { display: flex; align-items: center; gap: 10px; width: 100%; }
.cc-age-label { flex-shrink: 0; font-weight: 800; font-size: 0.95rem; color: var(--gold-soft); }
.cc-ages-wrap { position: relative; flex: 1; min-width: 0; }
.cc-ages {
  display: flex; gap: 7px; padding: 6px 16px;
  /* Both ends fade out so the strip reads as scrollable. The mask sits on the
     SCROLLER, not on the wrapper — a mask on the wrapper would fade the nav
     arrows out along with the chips underneath them. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* No scroll-snap and no `scroll-behavior: smooth` on purpose. The arrows and
     centerAgeChip tween scrollLeft frame by frame (see scrollAges in
     creator.js); snap re-targets after every one of those writes and fights
     the tween, and CSS smooth would animate them a second time. */
}
.cc-ages::-webkit-scrollbar { display: none; }
.cc-age {
  flex: 0 0 auto; cursor: pointer;
  min-width: 40px; height: 40px; padding: 0 11px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 800; font-size: 16px; color: var(--ink);
  background: #172c53; border: 1.5px solid var(--card-border);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.14s, box-shadow 0.15s;
}
.cc-age:hover { background: #24406f; }
.cc-age:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.5); }
/* the ring is a spread shadow, not a blurred one, so it can't be clipped by the
   scroller's own overflow the way a soft drop shadow would be */
.cc-age.is-on {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-color: var(--gold);
  color: var(--navy-900); transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.26);
}
/* nudge arrows, parked on the faded ends so they cost the strip no width */
.cc-age-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; color: var(--gold); background: var(--navy-900);
  border: 1.5px solid rgba(255, 213, 74, 0.45);
  box-shadow: 0 3px 10px rgba(2, 8, 26, 0.7);
  transition: background 0.15s, transform 0.12s, border-color 0.15s;
}
.cc-age-nav[hidden] { display: none; }
.cc-age-nav svg { width: 15px; height: 15px; }
.cc-age-nav:hover { background: #16264a; border-color: var(--gold); }
.cc-age-nav:active { transform: translateY(-50%) scale(0.92); }
.cc-age-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.5); }
.cc-age-prev { left: -3px; }
.cc-age-next { right: -3px; }

/* 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-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 — deliberately brighter than the shared .btn-gold. That gradient's
   dull amber bottom half under dark-navy type reads as a DISABLED button on a
   phone at anything less than full brightness, and this is the one control on
   the screen that has to look pressable.

   It used to say that with a pulsing ring and a 10px-down gold bloom, and get
   its full brightness only on hover. The bloom sat under the pill like a cast
   shadow, and a button that brightens when you point at it is a button that was
   dimmer before you did. So: the hover brightness is simply ON, always, the
   outer glow is gone (only the inset top light stays, which is what makes it
   look lit rather than flat), and the one thing that moves is the press. */
.cc-submit {
  font-size: 1.1rem; padding: 15px 40px;
  background: linear-gradient(180deg, #fff2ba 0%, #ffd54a 48%, #f8c03c 100%);
  color: #0a1020;
  filter: brightness(1.07);              /* what .btn:hover used to add */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75);
  /* overshoot on the way back up, so releasing it feels like a button springing
     back rather than a panel sliding home */
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Nothing left for hover to do — it is already at its brightest, and the lift
   .btn hands out would be movement with no click behind it. */
.cc-submit:hover { filter: brightness(1.07); transform: none; }
.cc-submit:active { transform: scale(0.955); }
/* mid-render the button really IS disabled — let it look it, and stop reacting */
.cc-submit:disabled,
.cc-submit:disabled:hover,
.cc-submit:disabled:active {
  cursor: default; filter: saturate(0.55) brightness(0.82); box-shadow: none; transform: none;
}
.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; }
  /* the "come and touch me" loop goes away, but its *lit* end state stays: the
     name well keeps its gold dash, so it doesn't lose the affordance the
     animation was carrying. (Submit no longer needs a line here — it stopped
     breathing and is simply bright all the time.) */
  .cc-name:empty { animation: none; border-color: rgba(255, 213, 74, 0.8); }
  .cc-submit { transition: none; }
}

/* ============================================================
   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);
  /* Nearly opaque, not 0.86. iOS Safari tints its bottom toolbar from the page
     pixels behind it, and the gold Submit button showing through the old scrim
     turned the whole browser chrome gold whenever a sheet was open. */
  background: rgba(5, 13, 32, 0.97); 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); }

/* photo adjust — turn & trim. The stage IS the crop frame: what you see in this
   square is exactly what lands on the card, paper-filled edges and all. */
.cc-adjust-stage {
  position: relative; width: min(340px, 76vw, 44vh); aspect-ratio: 1; flex-shrink: 0;
  border-radius: 18px; overflow: hidden; background: #0a1a3a;
  border: 3px solid rgba(255, 213, 74, 0.4);
  touch-action: none; /* the drag/pinch is ours — never the browser's scroll */
  /* a mouse drag across the stage must move the picture, not select the sheet's
     headings on the way past */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.cc-adjust-stage:active { cursor: grabbing; }
.cc-adjust-canvas { width: 100%; height: 100%; display: block; }

/* crop box — the corners pull in to trim an edge (the table either side of a
   photographed sheet of paper). The huge spread shadow is the dimmed surround:
   one element, no four-rectangle scaffolding. */
.cc-crop { position: absolute; inset: 0; pointer-events: none; }
.cc-crop.is-on { box-shadow: 0 0 0 9999px rgba(5, 13, 32, 0.62); outline: 2px dashed rgba(255, 213, 74, 0.85); }
.cc-crop-h {
  position: absolute; width: 30px; height: 30px; pointer-events: auto; touch-action: none;
  cursor: grab; border: 4px solid var(--gold); border-radius: 4px;
  filter: drop-shadow(0 1px 3px rgba(2, 8, 26, 0.75));
}
/* each handle is an L, drawn by dropping the two borders it doesn't need */
.cc-crop-h[data-h="nw"] { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.cc-crop-h[data-h="ne"] { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.cc-crop-h[data-h="sw"] { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cc-crop-h[data-h="se"] { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.cc-adjust-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.cc-adjust-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; color: var(--ink);
  background: rgba(255, 255, 255, 0.07); border: 1.5px solid var(--card-border); border-radius: 999px;
  padding: 10px 15px; transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.cc-adjust-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.cc-adjust-turn { font-size: 1.2rem; line-height: 1; }
/* the rotate pair: arrow only, so keep them a comfortable thumb target */
.cc-adjust-icon { padding: 8px 20px; }
.cc-adjust-icon .cc-adjust-turn { font-size: 1.7rem; }
.cc-zoom-row { width: 100%; max-width: 320px; }
/* Use/Cancel size to their words and wrap if they must — equal-width columns
   clipped "Use this photo" on a 375px phone */
.cc-adjust-sheet .cc-sheet-actions { width: 100%; }
.cc-adjust-sheet .cc-sheet-actions > button { padding: 12px 20px; font-size: 0.98rem; }

/* 🔄 on the portrait window — only there while a PHOTO is on the card, and it
   reopens turn & trim on the original picture */
.cc-win-adjust {
  position: absolute; right: 6px; bottom: 6px; z-index: 4; width: 38px; height: 38px;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1; cursor: pointer;
  color: var(--ink); background: rgba(6, 15, 36, 0.82);
  border: 2px solid rgba(255, 213, 74, 0.65); border-radius: 50%;
  box-shadow: 0 3px 10px rgba(2, 8, 26, 0.5); transition: background 0.15s, transform 0.12s;
}
.cc-win-adjust:hover { background: rgba(6, 15, 36, 0.96); transform: scale(1.07); }
.cc-win-adjust[hidden] { display: none; } /* display:grid would otherwise beat [hidden] */

/* 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; }
/* "we might show your character on our website too" — a promise being made, not
   small print, so it gets the sky-blue chip treatment rather than being tucked
   in with the mailing-list legalese below the button */
.cc-done-panel p.cc-featured-note {
  color: var(--sky-blue); font-size: 0.85rem;
  background: rgba(143, 208, 255, 0.1);
  border: 1.5px solid rgba(143, 208, 255, 0.3);
  border-radius: 999px; padding: 7px 14px; 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; }
}