/* GiftBullseye. One light "party" look: lilac ground, indigo outlines, sticker shadows. */
:root {
  --bg: #f4efff; --card: #ffffff; --ink: #1c1340; --muted: #554e78;
  --violet: #6d3bf5; --violet-deep: #3a1ea8; --violet-soft: #e6dcff; --pink: #ee2f6b; --pink-deep: #ad1247; --pink-soft: #ffdfe9;
  --yellow: #ffc928; --yellow-soft: #fff0b8; --yellow-ink: #5c3f00; --mint: #2fd39a; --mint-soft: #d3f6e7; --mint-ink: #0b6245;
  --bw: 2.5px; --pop: 5px 5px 0 var(--ink); --pop-sm: 3px 3px 0 var(--ink);
  --display: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --dw: 700; --dls: -0.015em;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--violet-deep); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

.wrap { max-width: 480px; margin: 0 auto; padding-inline: 18px; padding-block: calc(18px + env(safe-area-inset-top, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 28px; }
main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font: var(--dw) 26px var(--display); letter-spacing: var(--dls); text-decoration: none; color: var(--ink); }
.logo svg { width: 44px; height: 44px; flex: none; transform: rotate(-8deg); overflow: visible; }
.logo .g { color: var(--violet); } .logo .b { color: var(--pink); }
.top-nav a { font-weight: 800; font-size: 14.5px; color: var(--ink); text-decoration: none; border: 2px solid var(--ink); border-radius: 99px; padding: 6px 13px; background: #fff; white-space: nowrap; }

.hero { position: relative; }
.confetti { position: absolute; top: -6px; right: -8px; width: 120px; height: 120px; pointer-events: none; }
.kicker { display: inline-block; background: var(--yellow); border: var(--bw) solid var(--ink); border-radius: 99px; padding: 3px 12px; font-weight: 800; font-size: 13px; transform: rotate(-2deg); box-shadow: var(--pop-sm); }
h1 { font: var(--dw) clamp(36px, 10.5vw, 48px)/1.02 var(--display); letter-spacing: var(--dls); margin: 14px 0 12px; text-wrap: balance; }
h1 em { font-style: normal; color: var(--pink); display: inline-block; padding-bottom: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9C60 3 120 3 170 6s90 3 126-1' fill='none' stroke='%23ffc928' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .24em; }
.lede { margin: 0; color: var(--muted); font-size: 17.5px; max-width: 34ch; }

.card { background: var(--card); border: var(--bw) solid var(--ink); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--pop); }
.lbl { display: block; font: var(--dw) 17px var(--display); letter-spacing: var(--dls); margin: 0 0 8px; }
textarea { width: 100%; min-height: 96px; resize: vertical; border: var(--bw) solid var(--ink); border-radius: 18px; padding: 12px 14px; font: 16px/1.4 var(--body); color: var(--ink); background: #fbf9ff; }
textarea::placeholder { color: var(--muted); }
textarea:focus { outline: 4px solid var(--violet-soft); border-color: var(--violet); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { border: 2px solid var(--ink); background: #fff; border-radius: 99px; padding: 8px 15px; font-weight: 800; font-size: 14.5px; transition: transform .08s; }
.chip:active { transform: translate(2px, 2px); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--yellow); }
.chip.try { border: 0; background: var(--violet-soft); color: var(--violet-deep); }
.chip.try:nth-child(4n+2) { background: var(--pink-soft); color: var(--pink-deep); }
.chip.try:nth-child(4n+3) { background: var(--mint-soft); color: var(--mint-ink); }
.chip.try:nth-child(4n+4) { background: var(--yellow-soft); color: var(--yellow-ink); }
.go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--violet); color: #fff; font: var(--dw) 22px var(--display); letter-spacing: var(--dls); padding: 15px 20px; box-shadow: var(--pop); transition: transform .08s, box-shadow .08s; text-decoration: none; }
.go:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.go[disabled] { opacity: .75; cursor: progress; }
.go svg { width: 24px; height: 24px; flex: none; }
.go.busy svg { animation: wob .7s ease-in-out infinite alternate; }
@keyframes wob { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.go.alt { background: #fff; color: var(--ink); font-size: 19px; padding: 12px 18px; box-shadow: var(--pop-sm); }
.hint { margin: -8px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

.results { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 14px; }
.for { display: flex; gap: 12px; align-items: center; background: var(--yellow); border: var(--bw) solid var(--ink); border-radius: 20px; padding: 12px 14px; transform: rotate(-1deg); }
.for svg { width: 34px; height: 34px; flex: none; }
.for small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.for b { display: block; font: var(--dw) 18px/1.2 var(--display); letter-spacing: var(--dls); overflow-wrap: anywhere; }
.picks { display: grid; gap: 34px; padding-top: 18px; }
.pick { position: relative; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 24px; box-shadow: var(--pop); padding: 30px 16px 18px; display: grid; grid-template-columns: 1fr 92px; column-gap: 10px; row-gap: 12px; align-items: center; }
.tab { position: absolute; top: -20px; left: 14px; display: flex; align-items: center; gap: 7px; border: var(--bw) solid var(--ink); border-radius: 14px; padding: 5px 14px 5px 11px; font: var(--dw) 19px var(--display); letter-spacing: var(--dls); box-shadow: var(--pop-sm); transform: rotate(-4deg); }
.tab svg { width: 19px; height: 19px; flex: none; }
.t-safe { background: var(--violet); color: #fff; } .t-heart { background: var(--pink); color: #fff; } .t-wow { background: var(--yellow); color: var(--ink); }
.txt { min-width: 0; }
.txt small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pick h3 { margin: 0; font: var(--dw) 24px/1.12 var(--display); letter-spacing: var(--dls); overflow-wrap: anywhere; }
.art { width: 92px; height: 92px; border-radius: 20px; display: grid; place-items: center; }
.art svg { width: 68px; height: 68px; overflow: visible; }
.a-safe { background: var(--violet-soft); } .a-heart { background: var(--pink-soft); } .a-wow { background: var(--yellow-soft); }
.pick p, .pick .see { grid-column: 1 / -1; }
.pick p { margin: 0; color: var(--muted); font-size: 15.5px; }
.see { display: flex; align-items: center; justify-content: center; gap: 8px; border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--pink); color: #fff; font: var(--dw) 18px var(--display); padding: 12px 16px; width: 100%; box-shadow: var(--pop-sm); transition: transform .08s, box-shadow .08s; text-decoration: none; }
.see:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.after { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 6px; }
.again { align-self: center; background: none; border: 0; color: var(--violet-deep); font-weight: 800; padding: 8px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.disclose { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0; }
.oops { background: var(--pink-soft); border: var(--bw) solid var(--ink); border-radius: 18px; padding: 14px 16px; font-weight: 700; margin: 0; }

h2.pill { display: inline-block; font: var(--dw) 22px/1.1 var(--display); letter-spacing: var(--dls); margin: 0 0 18px; padding: 7px 18px 8px; background: var(--violet); color: #fff; border: var(--bw) solid var(--ink); border-radius: 99px; box-shadow: var(--pop-sm); transform: rotate(-2deg); }
.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide { min-width: 0; display: block; text-align: left; text-decoration: none; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 20px; padding: 14px; font: var(--dw) 18px/1.15 var(--display); letter-spacing: var(--dls); box-shadow: var(--pop-sm); background: var(--violet-soft); }
.guide:nth-child(4n+2) { background: var(--pink-soft); } .guide:nth-child(4n+3) { background: var(--mint-soft); } .guide:nth-child(4n+4) { background: var(--yellow-soft); }
.guide:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.guide small { display: block; font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; opacity: .75; }
.all-guides { margin-top: 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 46px; height: 46px; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--violet); color: #fff; font: var(--dw) 22px/1 var(--display); box-shadow: var(--pop-sm); transform: rotate(-6deg); }
.steps li:nth-child(2)::before { background: var(--pink); transform: rotate(5deg); } .steps li:nth-child(3)::before { background: var(--yellow); color: var(--ink); }
.steps b { display: block; font: var(--dw) 18px/1.25 var(--display); letter-spacing: var(--dls); } .steps span { color: var(--muted); font-size: 15px; }

footer { border-top: 2px dashed #b9acdf; padding-top: 14px; color: var(--muted); font-size: 12.5px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
footer nav a { font-weight: 800; font-size: 14px; color: var(--ink); }
footer p { margin: 0 0 6px; }

/* Text pages and gift guides */
.page { max-width: 640px; }
.page h1 { font-size: clamp(32px, 8.5vw, 42px); margin: 6px 0 8px; }
.page main { gap: 14px; }
.page main > p { margin: 0; }
.page h2 { font: var(--dw) 22px/1.2 var(--display); letter-spacing: var(--dls); margin: 14px 0 0; }
.updated { color: var(--muted); font-size: 13.5px; }
.crumbs { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.back { font-weight: 800; margin-top: 10px; }
.g-lede { font-size: 17.5px; color: var(--muted); }
.page .picks { padding-top: 26px; margin-bottom: 6px; }
.g-cta { background: var(--yellow); border: var(--bw) solid var(--ink); border-radius: 24px; padding: 18px; box-shadow: var(--pop); display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.g-cta b { font: var(--dw) 22px/1.15 var(--display); letter-spacing: var(--dls); }
.g-cta span { font-size: 15.5px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 12px 14px; }
.faq summary { font-weight: 800; cursor: pointer; }
.faq p { margin: 8px 0 0; color: var(--muted); }
.tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (min-width: 560px) { .hub { grid-template-columns: 1fr 1fr 1fr; } }
.sub { font: var(--dw) 20px var(--display); margin: 16px 0 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }