/* ============ FRIENDS FOR LIFE — glossy teen-zine ============ */
:root{
  --pink:#ff2e88; --cherry:#e8083e; --cream:#fff4ec; --ink:#1a0a12;
  --lemon:#ffd84d; --mint:#7df0c4; --lav:#c9b8ff;
  --display:'Shrikhand',cursive; --body:'Bricolage Grotesque',sans-serif; --hand:'Caveat',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--ink);overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hl{background:linear-gradient(transparent 55%,var(--lemon) 55%);padding:0 .1em}

/* ---------- GATE ---------- */
.gate{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:24px;position:relative;
  background:radial-gradient(120% 90% at 50% 0%,var(--pink) 0%,var(--cherry) 70%,#a3052c 100%)}
.gate-stickers .stk{position:absolute;font-size:2.2rem;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25));animation:bob 4s ease-in-out infinite}
.s1{top:8%;left:10%;rotate:-12deg}.s2{top:14%;right:12%;rotate:9deg;animation-delay:.6s}
.s3{bottom:22%;left:8%;rotate:8deg;animation-delay:1.1s}.s4{bottom:12%;right:10%;rotate:-9deg;animation-delay:.3s}
.s5{top:42%;left:4%;rotate:5deg;animation-delay:1.5s}.s6{top:48%;right:5%;rotate:-6deg;animation-delay:.9s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.gate-kicker{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--lemon);
  border:2px dashed var(--lemon);border-radius:999px;padding:.45em 1.1em;animation:pop .5s .1s}
.gate-title{font-family:var(--display);font-size:clamp(3.4rem,14vw,7rem);line-height:.92;color:var(--cream);
  margin:.35em 0 .25em;text-shadow:4px 5px 0 var(--ink);rotate:-2deg;animation:pop .55s .25s}
.gate-title em{color:var(--lemon);font-style:normal}
.gate-sub{color:#ffd6e6;font-weight:600;max-width:34ch;font-size:1.05rem;animation:pop .5s .4s}
#gateForm{margin-top:2.2rem;animation:pop .5s .55s}
.gate-label{display:block;font-family:var(--hand);font-size:1.5rem;color:var(--cream);rotate:-2deg;margin-bottom:.5rem}
.code-row{display:flex;gap:.5rem}
#code{width:11.5rem;font-size:1.6rem;letter-spacing:.35em;text-align:center;padding:.5em .4em;
  border:3px solid var(--ink);border-radius:16px;background:var(--cream);font-family:var(--body);font-weight:700;
  box-shadow:5px 6px 0 var(--ink);outline:none}
#code:focus{box-shadow:5px 6px 0 var(--ink),0 0 0 4px var(--lemon)}
.code-row button{font-family:var(--display);font-size:1.15rem;color:var(--cream);background:var(--ink);
  border:3px solid var(--ink);border-radius:16px;padding:0 1.1em;cursor:pointer;box-shadow:5px 6px 0 rgba(0,0,0,.35);
  transition:translate .12s,box-shadow .12s}
.code-row button:active{translate:3px 4px;box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.gate-err{margin-top:1rem;font-weight:700;color:var(--cream);background:var(--ink);display:inline-block;
  padding:.5em 1em;border-radius:12px;rotate:-1deg;animation:shake .4s}
.gate-err[hidden]{display:none}
@keyframes pop{from{opacity:0;scale:.85;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
@keyframes shake{20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:4px 0}}

/* ---------- HOME ---------- */
.home{max-width:720px;margin:0 auto;padding:28px 18px 60px}
.masthead{text-align:center;padding:1.6rem 0 1rem}
.issue{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;font-weight:700;color:var(--cherry)}
.logo{font-family:var(--display);font-size:clamp(2.6rem,10vw,4.6rem);line-height:.95;rotate:-1.5deg;
  color:var(--cherry);text-shadow:3px 4px 0 var(--lemon)}
.logo em{font-style:normal;color:var(--pink)}
.tag{margin:.9rem auto 0;max-width:42ch;font-weight:600;color:#5c2740}
.progress-pill{display:inline-block;margin-top:1rem;font-weight:800;background:var(--ink);color:var(--cream);
  padding:.45em 1.2em;border-radius:999px;rotate:1deg;box-shadow:3px 4px 0 var(--pink)}
.rules{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:1.1rem 1.3rem;margin:1.4rem 0 2rem;
  rotate:-.6deg;box-shadow:6px 7px 0 var(--lav)}
.rules-title{font-family:var(--display);font-size:1.25rem;color:var(--cherry);margin-bottom:.3rem}

.pillar{margin-bottom:2.4rem}
.pillar-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1rem;rotate:-1deg}
.pillar-num{font-family:var(--display);font-size:2.4rem;color:var(--pink);text-shadow:2px 3px 0 var(--ink)}
.pillar-name{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.pillar-why{font-family:var(--hand);font-size:1.25rem;color:#7a3a56;margin:-.4rem 0 1rem;rotate:-.5deg}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.card{position:relative;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:18px;
  padding:1rem 1rem 1.1rem;cursor:pointer;font-family:var(--body);
  box-shadow:5px 6px 0 var(--ink);transition:translate .14s,box-shadow .14s,rotate .14s}
.card:nth-child(odd){rotate:-1.2deg}.card:nth-child(even){rotate:1deg}
.card:hover{translate:-2px -4px;box-shadow:8px 10px 0 var(--ink);rotate:0deg}
.card:active{translate:2px 3px;box-shadow:2px 2px 0 var(--ink)}
.card .dnum{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cherry)}
.card h3{font-family:var(--display);font-size:1.05rem;line-height:1.15;margin:.25rem 0 .35rem}
.card .tease{font-size:.85rem;font-weight:600;color:#6b3550;line-height:1.3}
.card .spicy{position:absolute;top:-12px;right:-8px;background:var(--lemon);border:2.5px solid var(--ink);
  border-radius:999px;font-size:.66rem;font-weight:800;padding:.3em .7em;rotate:8deg}
.card.done{background:var(--mint)}
.card.done::after{content:"done ✓";position:absolute;bottom:-11px;right:10px;background:var(--ink);color:var(--mint);
  font-size:.66rem;font-weight:800;padding:.28em .8em;border-radius:999px;rotate:-4deg}
.p5 .card{background:#1f0b16;color:var(--cream);border-color:var(--pink);box-shadow:5px 6px 0 var(--pink)}
.p5 .card .tease{color:#ffb8d4}.p5 .card h3{color:var(--cream)}
.p5 .card.done{background:#0d3b2b}
.foot{text-align:center;margin-top:3rem;font-family:var(--hand);font-size:1.3rem;color:#7a3a56}
.reset{margin-top:.8rem;font-family:var(--body);font-size:.75rem;font-weight:700;background:none;
  border:2px solid #c98aa6;color:#a05c7c;border-radius:999px;padding:.4em 1em;cursor:pointer}

/* ---------- DAY ---------- */
.day{max-width:640px;margin:0 auto;padding:24px 18px 80px}
.back{font-family:var(--body);font-weight:800;font-size:.95rem;background:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:.5em 1.2em;cursor:pointer;box-shadow:4px 5px 0 var(--ink);margin-bottom:1.4rem}
.day-kicker{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cherry)}
.day-title{font-family:var(--display);font-size:clamp(1.9rem,7.5vw,2.8rem);line-height:1.02;color:var(--ink);
  margin:.3rem 0 1rem;rotate:-1deg;text-shadow:2px 3px 0 var(--lemon)}
.day-intro{background:#fff;border-left:6px solid var(--pink);border-radius:0 16px 16px 0;padding:.9rem 1.1rem;
  font-weight:600;color:#5c2740;margin-bottom:1.6rem}
.qlist{display:flex;flex-direction:column;gap:.9rem;counter-reset:q}
.q{position:relative;background:#fff;border:3px solid var(--ink);border-radius:18px 18px 18px 4px;
  padding:1rem 1.1rem 1rem 3.4rem;font-weight:600;line-height:1.4;box-shadow:4px 5px 0 var(--lav)}
.q::before{counter-increment:q;content:counter(q);position:absolute;left:.9rem;top:.95rem;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;background:var(--pink);color:#fff;font-family:var(--display);font-size:.95rem;
  border:2.5px solid var(--ink);border-radius:50%}
.scoring,.pact{border:3px solid var(--ink);border-radius:18px;padding:1rem 1.2rem;margin-top:1.4rem;font-weight:600}
.scoring{background:var(--lemon);rotate:-.7deg;box-shadow:5px 6px 0 var(--ink)}
.pact{background:var(--ink);color:var(--cream);rotate:.6deg;box-shadow:5px 6px 0 var(--pink)}
.pact b{color:var(--lemon)}
.label{font-family:var(--display);display:block;font-size:1rem;margin-bottom:.3rem}
.deep{margin-top:1.6rem;font-family:var(--hand);font-size:1.55rem;line-height:1.25;color:var(--cherry);rotate:-1deg;
  padding-left:1rem;border-left:4px solid var(--pink)}
.deep b{font-family:inherit}
.q.big{font-size:1.25rem;line-height:1.45;padding:1.6rem 1.4rem 1.6rem 3.6rem;min-height:9rem;display:flex;align-items:center}
.answerbox{margin-top:1rem}
.answerbox textarea{width:100%;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.45;
  border:3px solid var(--ink);border-radius:16px;padding:.85rem 1rem;background:#fff;color:var(--ink);
  box-shadow:4px 5px 0 var(--mint);resize:vertical;outline:none}
.answerbox textarea:focus{box-shadow:4px 5px 0 var(--mint),0 0 0 4px var(--lemon)}
.ansrow{display:flex;align-items:center;gap:.8rem;margin-top:.7rem;flex-wrap:wrap}
.micbtn{font-family:var(--body);font-weight:800;font-size:.95rem;background:var(--lemon);border:3px solid var(--ink);
  border-radius:999px;padding:.55em 1.2em;cursor:pointer;box-shadow:4px 5px 0 var(--ink)}
.micbtn.rec{background:var(--cherry);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{scale:1.06}}
.ansrow audio{height:2.4rem;max-width:100%}
.day.dark .answerbox textarea{background:#2e1322;color:#ffe9f2;border-color:var(--pink);box-shadow:4px 5px 0 var(--cherry)}
.steprow{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:.8rem}
.steprow .back{margin-bottom:0}
.dots{display:flex;gap:.45rem;margin:.2rem 0 1.2rem}
.dot{width:.65rem;height:.65rem;border-radius:50%;border:2px solid var(--ink);background:#fff}
.dot.on{background:var(--pink)}
.day.dark .dot{border-color:var(--pink);background:#2e1322}
.day.dark .dot.on{background:var(--lemon)}
.copybar{position:sticky;bottom:14px;margin-top:2.2rem;display:flex;justify-content:center}
.copybtn{font-family:var(--display);font-size:1.1rem;background:var(--pink);color:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:.7em 1.6em;cursor:pointer;box-shadow:5px 6px 0 var(--ink);
  transition:translate .12s,box-shadow .12s}
.copybtn:active{translate:3px 4px;box-shadow:1px 1px 0 var(--ink)}
.donebtn{display:block;margin:1.2rem auto 0;font-family:var(--body);font-weight:800;background:var(--mint);
  border:3px solid var(--ink);border-radius:999px;padding:.6em 1.4em;cursor:pointer;box-shadow:4px 5px 0 var(--ink)}
.day.dark{background:#1f0b16;min-height:100svh}
.day.dark .day-title{color:var(--cream);text-shadow:2px 3px 0 var(--cherry)}
.day.dark .back{background:var(--cream)}
.day.dark .day-intro{background:#2e1322;color:#ffd6e6;border-color:var(--lemon)}
.day.dark .q{background:#2e1322;color:#ffe9f2;box-shadow:4px 5px 0 var(--cherry);border-color:var(--pink)}
.day.dark .deep{color:var(--lemon)}
@media(max-width:480px){.cards{grid-template-columns:1fr 1fr}}