/* /party/ — Doodlebug Parties. A children's party entertainer: crayons on paper, bunting, a party floor.
   This file loads before demo.css, so rules that must beat `.dm-page h2` etc. start with `.db-page`. */
@font-face { font-family: "Gluten"; src: url(/assets/fonts/gluten-normal-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url(/assets/fonts/quicksand-normal-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url(/assets/fonts/patrick-hand-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

.db-page {
  --f-display: "Gluten", "Comic Sans MS", system-ui, sans-serif; --f-body: "Quicksand", system-ui, sans-serif; --f-mono: "Patrick Hand", "Comic Sans MS", cursive; --h-weight: 700;
  --pg-bg: #fff8e8; --pg-ink: #2b1a4a; --grape: #2b1a4a; --pink: #ff4f8b; --pink-d: #d92f6d; --sun: #ffd23f; --sky: #4cc3ff; --mint: #3ccf91;
  --muted: #6a5a86; --line: rgba(43, 26, 74, .13);
  --bar-bg: #2b1a4a; --bar-fg: #fff8e8; --tag: #ffd23f; --btn-bg: #ff4f8b; --btn-fg: #fff; --order-bg: #2b1a4a;
  font-weight: 500;
}
.db-page h1, .db-page h2, .db-page h3 { letter-spacing: -.01em; line-height: 1.02; }
.db-page .dm-bar__name { font: 700 1.25rem var(--f-display); }
.db-page .dm-eyebrow { font: 400 1.05rem/1.2 var(--f-mono); letter-spacing: .02em; text-transform: none; color: var(--pink-d); }
.db-page b { font-weight: 700; }

.db-sound { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid rgba(255, 248, 232, .45);
  background: none; color: inherit; font: 400 1rem var(--f-mono); cursor: pointer; white-space: nowrap; }
.db-sound[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--grape); }

/* ---------- hero: copy + paper on top, the party floor along the bottom ---------- */
.db-hero {
  --floor: 186px;
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.2rem, 3vh, 2.4rem) max(16px, (100vw - 1160px) / 2) var(--floor);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 210, 63, .7) 0 4px, transparent 5px) 0 0 / 260px 230px,
    radial-gradient(circle at 70% 60%, rgba(76, 195, 255, .55) 0 3.5px, transparent 4.5px) 0 0 / 310px 270px,
    radial-gradient(circle at 40% 85%, rgba(255, 79, 139, .5) 0 3.5px, transparent 4.5px) 0 0 / 290px 330px,
    var(--pg-bg);
}
.db-world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.db-hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }

.db-kick { margin: 0 0 .8rem; font: 400 1.15rem var(--f-mono); color: var(--pink-d); }
.db-page .db-copy h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); color: var(--grape); margin: 0 0 1.1rem; }
.db-copy h1 span { display: block; color: var(--pink); }
.db-lead { margin: 0 0 .8rem; font-size: 1.2rem; max-width: 30rem; }
.db-small { margin: 0 0 1.6rem; max-width: 30rem; color: var(--muted); font-size: 1rem; }
.db-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.db-page .db-cta .dm-btn { font: 700 1.15rem var(--f-display); padding-top: .2rem; background: var(--sun); color: var(--grape); box-shadow: 0 4px 0 #d9a90f; }
.db-page .db-cta .dm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9a90f; }
.db-link { font-weight: 700; text-underline-offset: 4px; }

/* bunting along the top of the floor zone, the floor itself along the bottom */
.db-hero::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(var(--floor) - 6px); height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34'%3E%3Cpath d='M0 3 Q120 13 240 3' fill='none' stroke='%232b1a4a' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M8 5 L32 6 L20 30z' fill='%23ff4f8b'/%3E%3Cpath d='M68 8 L92 9 L80 33z' fill='%23ffd23f'/%3E%3Cpath d='M128 9 L152 9 L140 33z' fill='%234cc3ff'/%3E%3Cpath d='M188 7 L212 6 L200 30z' fill='%233ccf91'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 34px;
  opacity: .75;
}
.db-floor { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 40px;
  background: repeating-linear-gradient(90deg, #e9ddff 0 80px, #dfd0fb 80px 160px); box-shadow: inset 0 3px 0 rgba(43, 26, 74, .12); }

/* disco lights during Party time */
.db-lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(28vmax 22vmax at 20% 30%, rgba(255, 79, 139, .35), transparent 70%), radial-gradient(26vmax 22vmax at 80% 40%, rgba(76, 195, 255, .35), transparent 70%),
    radial-gradient(30vmax 20vmax at 50% 90%, rgba(255, 210, 63, .4), transparent 70%), rgba(43, 26, 74, .18); }
.db-hero.is-disco .db-lights { opacity: 1; }
.db-move .db-hero.is-disco .db-lights { animation: db-disco 1.82s linear infinite; }
@keyframes db-disco { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } }

/* ---------- the drawing pad ---------- */
/* paper size follows the screen height so the party floor stays in view */
.db-pad { --paper: clamp(300px, calc(100svh - 74px - 52px - var(--floor) - 190px), 500px);
  display: grid; grid-template-columns: auto var(--paper); grid-template-areas: "x tools" "cray paper" "x2 btns" "x3 msg"; gap: .6rem .5rem; }
.db-tools { display: contents; }
.db-toolrow { grid-area: tools; }
.db-paper { grid-area: paper; }
.db-padbtns { grid-area: btns; }
.db-msg { grid-area: msg; }
.db-crayons { grid-area: cray; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
/* each crayon points at the paper (right); on phones they stand in a row above it, pointing down */
.db-crayon {
  --c: #333; width: 62px; height: min(38px, calc(var(--paper) / 9.6)); border: 0; padding: 0; cursor: pointer; background: none; position: relative; transform: translateX(-14px);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.db-crayon::before { content: ""; position: absolute; top: 24%; bottom: 24%; right: 0; width: 30%; background: var(--c); clip-path: polygon(100% 50%, 0 0, 0 100%); filter: brightness(.92); }
.db-crayon::after { content: ""; position: absolute; top: 24%; bottom: 24%; left: 0; right: 29%; border-radius: 2px 0 0 2px; background:
  linear-gradient(90deg, transparent 22%, rgba(0, 0, 0, .18) 22% 27%, transparent 27% 70%, rgba(0, 0, 0, .18) 70% 75%, transparent 75%), linear-gradient(rgba(255, 255, 255, .35), transparent 45%), var(--c); }
.db-crayon:hover { transform: translateX(-7px); }
.db-crayon[aria-checked="true"] { transform: translateX(0); }
.db-crayon:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
.db-toolrow { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.db-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.db-seg button { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: 0 .75rem; border: 0; border-radius: 999px; background: none; color: var(--grape);
  font: 700 .86rem var(--f-body); cursor: pointer; }
.db-seg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.db-seg button[aria-checked="true"] { background: var(--grape); color: #fff; }
.db-sizes button { width: 38px; padding: 0; justify-content: center; }
.db-sizes i { width: var(--s); height: var(--s); border-radius: 50%; background: currentColor; }

.db-paper { position: relative; width: var(--paper); aspect-ratio: 1; border-radius: 6px; background: #fff; rotate: -1.2deg;
  box-shadow: 0 1px 0 rgba(43, 26, 74, .06), 0 18px 34px -18px rgba(43, 26, 74, .45), 0 0 0 1px rgba(43, 26, 74, .06); }
.db-paper::before, .db-paper::after { content: ""; position: absolute; z-index: 2; top: -12px; width: 92px; height: 26px; background: rgba(255, 210, 63, .55); pointer-events: none; }
.db-paper::before { left: -18px; rotate: -32deg; } .db-paper::after { right: -18px; rotate: 30deg; }
.db-padcanvas { display: block; width: 100%; height: 100%; border-radius: 6px; touch-action: none; cursor: crosshair; }
.db-paperhint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none; font: 400 1.6rem var(--f-mono); color: rgba(43, 26, 74, .25); transition: opacity .3s; }
.db-paper.has-ink .db-paperhint { opacity: 0; }
.db-paper.is-peel .db-padcanvas { opacity: 0; }
.db-padbtns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.db-btn { min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--grape); font: 700 .9rem var(--f-body); cursor: pointer; }
.db-btn:hover { border-color: var(--grape); }
.db-btn:focus-visible, .db-seg button:focus-visible, .db-opt button:focus-visible, .db-who button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.db-page .db-life { margin-left: auto; font: 700 1.15rem var(--f-display); padding-top: .2rem; box-shadow: 0 4px 0 var(--pink-d); }
.db-page .db-life:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 0 4px 0 var(--pink-d); }
.db-move .db-life.is-ready { animation: db-nudge 2.4s ease-in-out infinite; }
@keyframes db-nudge { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-4deg) scale(1.05); } 84% { transform: rotate(4deg) scale(1.05); } 90% { transform: none; } }
.db-msg { min-height: 1.4em; margin: 0; font: 400 1.15rem var(--f-mono); color: var(--pink-d); }

/* ---------- change your monster ---------- */
.db-tweak { background: var(--grape); color: #fff8e8; padding: 1.4rem 0 1.2rem; }
.db-tweak__in { display: grid; gap: .9rem; }
.db-who { display: flex; flex-wrap: wrap; gap: .4rem; }
.db-who button { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: 0 .8rem 0 .35rem; border-radius: 999px; border: 1.5px solid rgba(255, 248, 232, .3);
  background: none; color: inherit; font: 400 1.05rem var(--f-mono); cursor: pointer; }
.db-who img { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; background: #fff8e8; }
.db-who button[aria-checked="true"] { background: #fff8e8; color: var(--grape); border-color: #fff8e8; }
.db-opts { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.db-name { display: inline-flex; align-items: center; gap: .5rem; font: 400 1.05rem var(--f-mono); }
.db-name input { width: 11rem; min-height: 40px; padding: 0 .8rem; border-radius: 10px; border: 0; background: #fff8e8; color: var(--grape); font: 700 1.1rem var(--f-display); padding-top: .15rem; }
.db-btn--icon { min-width: 40px; padding: 0; font-size: 1.1rem; }
.db-opt { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 248, 232, .1); }
.db-opt span { padding: 0 .55rem 0 .6rem; font: 400 1.05rem var(--f-mono); }
.db-opt button { min-height: 34px; min-width: 38px; padding: 0 .7rem; border: 0; border-radius: 999px; background: none; color: inherit; font: 700 .88rem var(--f-body); cursor: pointer; }
.db-opt button[aria-checked="true"] { background: var(--sun); color: var(--grape); }
.db-acts { display: flex; gap: .5rem; margin-left: auto; }
.db-tip { margin: 0; font-size: .88rem; opacity: .7; }

/* the monster you took with you walks along the bottom of the screen */
.db-away { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none; }
.db-awaycanvas { width: 100%; height: 100%; display: block; }
.db-back { position: absolute; right: 14px; bottom: 12px; pointer-events: auto; box-shadow: 0 6px 18px -6px rgba(43, 26, 74, .5); }

/* ---------- parties ---------- */
.db-page .dm-section h2 { color: var(--grape); }
.db-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.db-card { position: relative; padding: 1.6rem 1.5rem 1.4rem; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; align-content: start; gap: .5rem; }
.db-card:nth-child(1) { rotate: -.6deg; } .db-card:nth-child(3) { rotate: .6deg; }
.db-card--pick { box-shadow: inset 0 0 0 3px var(--pink); }
.db-card__flag { position: absolute; top: -14px; left: 1.4rem; padding: .25rem .7rem; border-radius: 999px; background: var(--pink); color: #fff; font: 400 1rem var(--f-mono); }
.db-page .db-card h3 { font-size: 1.75rem; }
.db-card__meta { margin: 0; font: 400 1.1rem var(--f-mono); color: var(--pink-d); }
.db-card p { margin: 0; }
.db-card__price { margin-top: .4rem !important; font: 700 1.6rem var(--f-display); }
.db-card__price small { font: 500 .8rem var(--f-body); color: var(--muted); }

.db-how { background: #fff; }
.db-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; counter-reset: s; }
.db-steps li { counter-increment: s; display: grid; align-content: start; gap: .45rem; }
.db-steps li::before { content: counter(s); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 700 1.4rem var(--f-display); padding-top: .15rem;
  background: var(--c, var(--sun)); color: var(--grape); }
.db-steps li:nth-child(2) { --c: #ffc2d8; } .db-steps li:nth-child(3) { --c: #bfe9ff; } .db-steps li:nth-child(4) { --c: #bff0d9; } .db-steps li:nth-child(5) { --c: #e2d4ff; }
.db-page .db-steps h3 { font-size: 1.3rem; }
.db-steps p { margin: 0; color: var(--muted); font-size: .98rem; }

.db-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 4rem; align-items: start; }
.db-qs details { border-bottom: 1.5px dashed var(--line); padding: 1rem 0; }
.db-qs summary { cursor: pointer; font: 700 1.2rem var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.db-qs summary::-webkit-details-marker { display: none; }
.db-qs summary::after { content: "+"; color: var(--pink); font-size: 1.5rem; line-height: 1; }
.db-qs details[open] summary::after { content: "–"; }
.db-qs p { margin: .6rem 0 0; color: var(--muted); }
.db-book { padding-top: 0; }
.db-page .dm-order h3 { font-size: 1.9rem; }

@media (max-width: 1000px) {
  .db-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-cards { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .db-card { rotate: none !important; }
}
@media (max-width: 860px) {
  .db-hero { --floor: 170px; }
  .db-hero__in { grid-template-columns: minmax(0, 1fr); }
  .db-pad { --paper: min(100%, 520px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "cray" "tools" "paper" "btns" "msg"; max-width: 520px; width: 100%; margin-inline: auto; }
  .db-paper { width: 100%; }
  .db-hero__in { padding-bottom: 1.4rem; }
  .db-crayons { flex-direction: row; justify-content: space-between; padding: 0 4px; }
  .db-crayon { width: auto; flex: 1; max-width: 46px; height: 58px; transform: translateY(14px); }
  .db-crayon::before { top: 0; bottom: auto; left: 22%; right: 22%; width: auto; height: 30%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .db-crayon::after { top: 29%; bottom: 0; left: 22%; right: 22%; border-radius: 2px 2px 0 0;
    background: linear-gradient(transparent 22%, rgba(0, 0, 0, .18) 22% 27%, transparent 27% 70%, rgba(0, 0, 0, .18) 70% 75%, transparent 75%), linear-gradient(90deg, rgba(255, 255, 255, .35), transparent 40%), var(--c); }
  .db-crayon:hover { transform: translateY(8px); }
  .db-crayon[aria-checked="true"] { transform: translateY(0); }
  .db-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .db-acts { margin-left: 0; }
}
@media (max-width: 520px) {
  .db-crayon { height: 50px; }
  .db-seg button { padding: 0 .55rem; font-size: .8rem; }
  .db-sizes button { width: 32px; }
  .db-page .db-life { margin-left: 0; width: 100%; }
  .db-steps { grid-template-columns: minmax(0, 1fr); }
  .db-away { height: 150px; }
  .dm-bar .db-sound .db-sound__t { display: none; }
}
.db-hero.is-grab, .db-hero.is-grab * { cursor: grabbing !important; user-select: none; }