/* LikePose site — over-the-top cute on purpose. All pictures are the game's own illustrated art. */
:root { --bg:#FFF4EC; --card:#FFFFFF; --pink:#FF5D8F; --gold:#FFC94A; --teal:#5EEAD4; --lilac:#B794F4; --sky:#BFE8F5; --text:#23285A; --muted:#6B6996;
  --rainbow: linear-gradient(90deg,#FF5D8F,#FF9F5A,#FFC94A,#7EE08A,#5EEAD4,#7AB8FF,#B794F4,#FF5D8F); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--text); overflow-x:hidden;
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 10% 10%, #FFE0EC 0 18%, transparent 19%), radial-gradient(circle at 90% 30%, #E4F7FF 0 15%, transparent 16%),
              radial-gradient(circle at 20% 80%, #EFE4FF 0 17%, transparent 18%), var(--bg); }
.rainbow-bar { height:10px; background:var(--rainbow); background-size:200% 100%; animation: slide 6s linear infinite; }
header, main, footer { max-width: 980px; margin: 0 auto; padding: 0 16px; position:relative; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; flex-wrap:wrap; }
header img { height:54px; width:auto; }
nav { display:flex; gap:8px; flex-wrap:wrap; }
nav a { color:var(--text); font-weight:800; text-decoration:none; padding:6px 14px; border-radius:999px; background:#fff; border:2.5px solid var(--sky); }
nav a:hover { border-color:var(--pink); color:var(--pink); }
h1, h2, h3 { line-height:1.15; font-weight:900; }
h1 { font-size: clamp(34px, 7vw, 64px); margin: 8px 0; }
h2 { font-size: clamp(26px, 4.5vw, 40px); margin: 0 0 12px; text-align:center; }
.hero h1 { color:var(--text); text-shadow: 3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff, 0 6px 0 var(--pink); }
.hero .words { display:inline-block; background:rgba(255,255,255,.82); border-radius:28px; padding:8px 20px 14px; }
.shine { background:var(--rainbow); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: slide 5s linear infinite; }
a { color:#C2185B; }
.card { background:var(--card); border:4px solid var(--sky); border-radius:32px; padding:28px; margin:28px 0; box-shadow: 0 8px 0 var(--lilac); }
.card.pink { border-color:var(--pink); box-shadow:0 8px 0 var(--pink); }
.card.gold { border-color:var(--gold); box-shadow:0 8px 0 var(--gold); }
.muted { color:var(--muted); font-size:15px; }
.pill { display:inline-block; background:var(--gold); border:3px solid var(--text); border-radius:999px; padding:10px 22px; font-weight:900; font-size:19px; box-shadow:0 5px 0 var(--text); }

/* Hero: a rainbow bursts behind the logo, glitter twinkles, squishies bob. */
.hero { text-align:center; padding: 40px 12px 20px; position:relative; }
.hero .burst { position:absolute; left:50%; top:-10px; width:min(760px, 110vw); transform:translateX(-50%); opacity:.35; z-index:-1; animation: spin 60s linear infinite; }
.hero .glitter { position:absolute; width:min(560px,80vw); left:50%; top:10px; transform:translateX(-50%); z-index:-1; opacity:.8; animation: twinkle 2.6s ease-in-out infinite; }
.hero .big-logo { width:min(420px, 80vw); height:auto; filter: drop-shadow(0 6px 0 #fff); }
.hero p.lead { font-size: clamp(18px, 2.6vw, 22px); max-width: 640px; margin: 10px auto 22px; font-weight:700; }
.toys { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin: 18px 0 6px; }
.toys img { width:clamp(54px, 9vw, 86px); height:auto; animation: bob 2.4s ease-in-out infinite; }
.toys img:nth-child(2n) { animation-delay: .4s } .toys img:nth-child(3n) { animation-delay: .8s }
.float { position:absolute; pointer-events:none; animation: floaty 7s ease-in-out infinite; }

/* Polaroid looks */
.looks { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:18px; }
.polaroid { background:#fff; padding:10px 10px 14px; border-radius:18px; border:3px solid var(--text); box-shadow:0 6px 0 var(--text); text-align:center; font-weight:900; }
.polaroid img { width:100%; height:auto; border-radius:12px; display:block; margin-bottom:8px; }
.polaroid:nth-child(1) { transform: rotate(-4deg) } .polaroid:nth-child(2) { transform: rotate(3deg) }
.polaroid:nth-child(3) { transform: rotate(-2deg) } .polaroid:nth-child(4) { transform: rotate(4deg) }

.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.step { text-align:center; }
.step img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; height:auto; border-radius:22px; border:3px solid var(--text); box-shadow:0 6px 0 var(--pink); }
.step .n { display:inline-block; width:44px; height:44px; line-height:44px; border-radius:50%; background:var(--pink); color:#fff; font-weight:900; font-size:22px; border:3px solid var(--text); }
.promise { list-style:none; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.promise li { background:#FFF7FB; border:3px dashed var(--pink); border-radius:22px; padding:14px 16px; font-weight:700; }
.legal h1 { font-size: clamp(30px, 5vw, 44px); }
.legal h2 { font-size: 22px; text-align:left; margin: 26px 0 6px; }
footer { padding: 24px 16px 48px; color:var(--muted); font-size:14px; text-align:center; }
footer a { margin: 0 6px; }

@keyframes slide { to { background-position: 200% 0 } }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg) } }
@keyframes twinkle { 50% { opacity:.35; transform: translateX(-50%) scale(1.06) } }
@keyframes bob { 50% { transform: translateY(-10px) } }
@keyframes floaty { 50% { transform: translateY(-18px) rotate(8deg) } }
@media (max-width: 760px) {
  .looks { grid-template-columns: repeat(2, 1fr); }
  .steps, .promise { grid-template-columns: 1fr; }
  .float { display:none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
.hero h1 .shine { text-shadow:none; filter: drop-shadow(0 3px 0 #23285A); }

/* Search landing pages (_src/build.mjs) */
.guide-hero { display:grid; grid-template-columns: 1.3fr 1fr; gap:24px; align-items:center; padding:32px 0 8px; }
.guide-hero h1 { font-size: clamp(32px, 5.5vw, 52px); }
.guide-hero p.lead { font-size: clamp(18px, 2.4vw, 21px); font-weight:700; }
.guide-hero img { width:100%; max-width:340px; height:auto; justify-self:center; border-radius:28px; border:4px solid var(--text); box-shadow:0 8px 0 var(--pink); transform: rotate(2deg); }
.badges { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.badges li { background:#fff; border:3px solid var(--sky); border-radius:999px; padding:6px 14px; font-weight:800; font-size:16px; }
.guide .card h2 { text-align:left; font-size: clamp(24px, 3.6vw, 32px); }
.facts { padding-left: 1.1em; } .facts li { margin: 8px 0; }
details { border-bottom: 2px dashed var(--lilac); padding: 10px 0; }
summary { font-weight:900; cursor:pointer; font-size:18px; }
details p { margin: 8px 0 0; }
.related h2 { font-size: 26px; }
.related div { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.related a { background:#fff; border:3px solid var(--lilac); border-radius:999px; padding:8px 16px; font-weight:800; text-decoration:none; color:var(--text); }
footer .guides { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-bottom:14px; }
footer .guides a { margin:0; }
@media (max-width: 720px) {
  .guide-hero { grid-template-columns: 1fr; }
  .guide-hero img { max-width: 260px; }
}
.guide .card p, .facts li, details p { font-weight:500; } .guide b { font-weight:900; }