/* Candy Path site. Palette and chunky glossy look follow the app. */
@font-face{font-family:"Fredoka";src:url("/assets/fonts/Fredoka.ttf") format("truetype");font-weight:300 700;font-display:swap}
:root{
  --p900:#25095f;--p800:#33107f;--p700:#4a1db0;--p600:#6130d8;--p500:#7a3cf0;--p300:#b99cff;
  --pink:#ff4fa3;--pink-d:#c42a78;--yellow:#ffc933;--yellow-d:#c98f00;--green:#3fd96b;--green-d:#1f9d46;
  --cream:#fff7ec;--ink:#2b1260;--muted:#6a5a94;--white:#fff;
  --shadow:0 6px 0 rgba(20,5,60,.28);
  --r:26px;
  --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.55;color:var(--white);
  background:var(--p800);background-image:linear-gradient(180deg,#6a35e6 0,#4a1db0 520px,#33107f 1400px,#25095f 100%);background-attachment:scroll;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;font-weight:700;letter-spacing:.2px}
h1{font-size:clamp(2.2rem,7.5vw,3.7rem);text-shadow:0 4px 0 rgba(20,5,60,.3)}
h2{font-size:clamp(1.7rem,5.5vw,2.5rem);text-shadow:0 3px 0 rgba(20,5,60,.25)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;border-radius:12px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:10px}

/* header */
.site-header{position:relative;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:block;line-height:0}
.brand img{width:132px}
.nav{display:flex;gap:2px 14px;flex-wrap:wrap;align-items:center;font-weight:500}
.nav a{text-decoration:none;padding:6px 4px;opacity:.92}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:6px;text-decoration-thickness:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:1.05rem;text-decoration:none;color:#fff;border:0;cursor:pointer;
  padding:13px 26px;border-radius:999px;background:linear-gradient(180deg,#58e784,var(--green));box-shadow:0 5px 0 var(--green-d),0 10px 18px rgba(10,0,40,.3);transition:transform .12s ease,box-shadow .12s ease;text-shadow:0 2px 0 rgba(0,80,20,.35)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--green-d),0 3px 8px rgba(10,0,40,.3)}
.btn.pink{background:linear-gradient(180deg,#ff7cbb,var(--pink));box-shadow:0 5px 0 var(--pink-d),0 10px 18px rgba(10,0,40,.3);text-shadow:0 2px 0 rgba(120,0,60,.35)}
.btn.pink:active{box-shadow:0 1px 0 var(--pink-d),0 3px 8px rgba(10,0,40,.3)}
.btn.ghost{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);text-shadow:none}
.btn.small{padding:9px 18px;font-size:.95rem}
.badge{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#120632;color:#fff;border:2px solid rgba(255,255,255,.55);border-radius:16px;padding:8px 20px;text-decoration:none;line-height:1.15;box-shadow:0 5px 0 rgba(0,0,0,.35);min-width:210px}
.badge small{font-size:.78rem;opacity:.8;font-weight:400;letter-spacing:.3px}
.badge strong{font-size:1.2rem;font-weight:700}
.badge.soon{cursor:default;border-style:dashed}
.badge.soon strong::after{content:"";}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* hero */
.hero{padding:18px 0 56px}
.hero .wrap{display:grid;gap:30px;align-items:center}
.hero-text .lead{font-size:1.25rem;max-width:30em;opacity:.96}
.hero-art{position:relative;display:flex;justify-content:center;min-height:300px}
.hero .jelly{position:absolute;width:84px;filter:drop-shadow(0 8px 0 rgba(20,5,60,.25))}
.hero .j1{left:2%;bottom:6%;transform:rotate(-8deg);animation:bob 4s ease-in-out infinite}
.hero .j2{right:0%;top:8%;transform:rotate(8deg);animation:bob 4.6s ease-in-out -1s infinite}
.hero .j3{right:6%;bottom:2%;animation:bob 5s ease-in-out -2s infinite;width:72px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.phone{position:relative;width:min(270px,66vw);background:#140737;border-radius:44px;padding:11px;box-shadow:0 0 0 3px #3b2a78,0 24px 50px rgba(8,0,40,.55),0 8px 0 rgba(0,0,0,.25)}
.phone img{border-radius:34px;width:100%;aspect-ratio:600/1304;object-fit:cover;background:#2a1070}
.phone::before{content:"";position:absolute;top:19px;left:50%;translate:-50% 0;width:28%;height:20px;border-radius:12px;background:#000;z-index:2}
.phone.tilt{transform:rotate(3deg)}
.tag{display:inline-block;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 14px;font-size:.9rem;font-weight:500;margin-bottom:14px}

/* bands */
.band{padding:64px 0}
.band.cream{background:var(--cream);color:var(--ink);position:relative}
.band.cream h2{text-shadow:none;color:var(--p700)}
.band.cream::before,.band.cream::after{content:"";position:absolute;left:0;right:0;height:26px;background:radial-gradient(circle at 20px 0,var(--cream) 18px,transparent 19px) 0 0/40px 26px repeat-x;pointer-events:none}
.band.cream::before{top:-25px;transform:none}
.band.cream::after{bottom:-25px;transform:rotate(180deg)}
.band.dark{background:rgba(20,5,60,.35)}
.center{text-align:center}
.section-lead{max-width:34em;margin:0 auto 34px;font-size:1.15rem;opacity:.95}
.grid{display:grid;gap:22px}
.card{background:#fff;color:var(--ink);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.card h3{color:var(--p700)}
.card p:last-child{margin-bottom:0}
.band.cream .card{background:#fff;box-shadow:0 6px 0 rgba(74,29,176,.16)}

/* steps */
.step{text-align:center}
.step .num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#8a56ff,var(--p600));color:#fff;font-weight:700;border:3px solid #fff;box-shadow:0 4px 0 rgba(74,29,176,.35);margin-bottom:10px}
.step svg{width:min(190px,60%);height:auto;margin:6px auto 14px;display:block}

/* story */
.story .wrap{display:grid;gap:26px;align-items:center}
.story-art{display:flex;justify-content:center;gap:10px;align-items:flex-end}
.story-art img.book{width:min(300px,62%);filter:drop-shadow(0 10px 0 rgba(20,5,60,.28))}
.story-art img.gran{width:min(170px,36%);filter:drop-shadow(0 10px 0 rgba(20,5,60,.28))}
.note{display:inline-block;background:#f4f9d8;color:#4b6b00;font-weight:600;padding:12px 18px;border-radius:6px 16px 8px 14px;transform:rotate(-2deg);box-shadow:0 4px 0 rgba(0,0,0,.2);font-family:"Fredoka",cursive;margin:6px 0 16px}

/* features */
.feat{display:grid;gap:16px}
.feat .ico{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;color:#fff;margin-bottom:10px;box-shadow:0 4px 0 rgba(0,0,0,.18);font-weight:700}
.ico.y{background:linear-gradient(180deg,#ffe07a,var(--yellow));color:#6a4300}
.ico.pk{background:linear-gradient(180deg,#ff8cc4,var(--pink))}
.ico.g{background:linear-gradient(180deg,#6df09a,var(--green))}
.ico.pu{background:linear-gradient(180deg,#9a6cff,var(--p600))}
.soon-chip{display:inline-block;font-size:.72rem;font-weight:700;background:var(--yellow);color:#6a4300;border-radius:999px;padding:2px 10px;vertical-align:middle;margin-left:6px;letter-spacing:.3px}

/* screenshot strip */
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 26px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.strip figure{margin:0;flex:0 0 auto;width:min(200px,56vw);scroll-snap-align:center;text-align:center}
.strip .phone{width:100%}
.strip figcaption{margin-top:12px;font-weight:500;font-size:.98rem}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
details{background:rgba(255,255,255,.12);border-radius:20px;padding:0;box-shadow:0 4px 0 rgba(0,0,0,.16)}
details summary{cursor:pointer;list-style:none;font-weight:600;padding:16px 56px 16px 20px;position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:#6a4300;display:grid;place-items:center;font-weight:700}
details[open] summary::after{content:"\2212"}
details .a{padding:0 20px 18px;opacity:.96}
details .a p:last-child{margin-bottom:0}
.band.cream details{background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(74,29,176,.14)}

/* article pages */
.page-head{padding:20px 0 10px}
.page-head .lead{font-size:1.2rem;max-width:36em;opacity:.95}
.prose{background:#fff;color:var(--ink);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow);margin:0 0 28px}
.prose h2{color:var(--p700);text-shadow:none;font-size:1.6rem;margin-top:1.3em}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--p600);margin-top:1.3em}
.prose a{color:var(--p600);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose .fig{display:grid;gap:14px;margin:18px 0}
.fig figure{margin:0;text-align:center;background:#f5efff;border-radius:20px;padding:14px}
.fig figcaption{font-size:.95rem;margin-top:6px}
.fig svg{width:min(210px,100%);height:auto;margin:0 auto;display:block}
.ok{color:#14803a;font-weight:700}.no{color:#c4256e;font-weight:700}
.updated{opacity:.8;font-size:.95rem}
.callout{background:linear-gradient(180deg,#ffe9a8,#ffd966);color:#5a3b00;border-radius:22px;padding:20px 22px;box-shadow:0 5px 0 rgba(120,80,0,.3);display:grid;gap:12px;align-items:center;margin:0 0 28px}
.callout h2,.callout h3{color:#5a3b00;text-shadow:none;margin:0}
.callout p{margin:0}

/* footer */
.site-footer{background:#18043f;padding:42px 0 34px;margin-top:40px;font-size:.98rem}
.site-footer .wrap{display:grid;gap:22px}
.site-footer img{width:120px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer a{text-decoration:none;opacity:.9}
.site-footer a:hover{text-decoration:underline}
.site-footer small{opacity:.7;display:block}

/* daily game */
.game{display:grid;gap:22px;justify-items:center}
.hud{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.pill{background:#fff;color:var(--ink);border-radius:999px;padding:6px 18px;font-weight:700;box-shadow:0 4px 0 rgba(20,5,60,.28);min-width:96px;text-align:center}
.board-wrap{width:min(92vw,430px);padding:12px;border-radius:30px;background:#4a1db0;box-shadow:0 0 0 3px rgba(255,255,255,.16),0 10px 0 rgba(0,0,0,.25),0 20px 40px rgba(0,0,0,.25)}
.board{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;cursor:pointer}
.board:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
.cell{aspect-ratio:1;border-radius:16%;background:linear-gradient(180deg,#fff,#e9defc);box-shadow:inset 0 -5px 0 rgba(120,80,220,.28),0 2px 0 rgba(0,0,0,.18);position:relative}
.cell.on{background:linear-gradient(180deg,#ffd5ec,#ff9ccc);box-shadow:inset 0 -5px 0 rgba(200,40,120,.3),0 2px 0 rgba(0,0,0,.18)}
.cell.head{background:linear-gradient(180deg,#ffe48f,#ffc933);box-shadow:inset 0 -5px 0 rgba(200,140,0,.35),0 2px 0 rgba(0,0,0,.18)}
.board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.dot{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.dot span{display:grid;place-items:center;width:62%;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#9a6cff,var(--p600));color:#fff;font-weight:700;font-size:clamp(.95rem,4.4vw,1.35rem);border:3px solid #fff;box-shadow:0 3px 0 rgba(30,10,90,.4)}
.dot.last span{background:linear-gradient(180deg,#6df09a,var(--green-d))}
.board.won{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.win{display:none;max-width:460px;text-align:center}
.win.show{display:block;animation:pop .5s ease}
.win .card{padding:22px}
.win h2{color:var(--pink);text-shadow:none;font-size:2.2rem}
.stars{color:var(--yellow);font-size:2rem;letter-spacing:6px;text-shadow:0 3px 0 rgba(150,100,0,.35)}
.help{font-size:.98rem;opacity:.92;text-align:center;max-width:30em}
.sol-board{--s:6}
.msg{min-height:1.5em;text-align:center;font-weight:500}

/* invite */
.invite{max-width:560px;margin:0 auto;text-align:center}
.code-chip{display:inline-block;font-weight:700;font-size:1.7rem;letter-spacing:3px;background:#fff;color:var(--p700);padding:8px 26px;border-radius:18px;box-shadow:0 5px 0 rgba(20,5,60,.3);margin:8px 0 18px;word-break:break-all}

@media(min-width:760px){
  body{font-size:19px}
  .brand img{width:150px}
  .hero{padding:30px 0 80px}
  .hero .wrap{grid-template-columns:1.1fr .9fr;gap:40px}
  .hero-art{min-height:520px}
  .phone{width:290px}
  .hero .jelly{width:110px}.hero .j3{width:92px}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .grid.four{grid-template-columns:repeat(2,1fr)}
  .story .wrap{grid-template-columns:1fr 1fr;gap:50px}
  .prose{padding:38px 44px}
  .prose .fig.three{grid-template-columns:repeat(3,1fr)}
  .callout{grid-template-columns:1fr auto;padding:24px 30px}
  .site-footer .wrap{grid-template-columns:1fr auto;align-items:start}
  .strip{justify-content:center;overflow:visible}
  .strip figure{width:190px}
}
@media(min-width:1000px){
  .grid.four{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

@media(max-width:420px){.nav{font-size:.92rem;gap:2px 10px}.brand img{width:112px}}