/* ============================================================
   AGE FINDER ONLINE — shared design system ("CANDY PARTY" v2)
   www.agefinderonline.com
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');
@import url('/assets/css/uicons.css?v=20260808-zodiac');
:root{
  --ink:#452633; --ink-soft:#6b4a58;
  --vanilla:#FFF7EC; --card:#FFFDF6; --cream:#FFEFD3;
  --pink:#CD2E62; --strawb:#D9507B; --yellow:#FFD24C;
  --mint:#2FA983; --blue:#4A67E5;
  /* Text-safe companions keep the brighter brand colors available as surfaces. */
  --pink-text:#B52353; --strawb-text:#A91F4C; --strawb-on-dark:#F28BAD;
  --mint-text:#147355; --blue-text:#3148B4; --yellow-text:#745200;
  --plum1:#3A1F33; --plum2:#22101C;
  --bd:3px solid var(--ink);
  --hard:7px 7px 0 var(--ink);
  --hard-sm:4px 4px 0 var(--ink);
  --header-h:64px;
  --font-display:'Fredoka','Nunito',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:var(--vanilla);overflow-x:hidden;line-height:1.55}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle 3px at 30px 40px, rgba(255,93,143,.30) 97%, transparent),
    radial-gradient(circle 3px at 150px 100px, rgba(89,201,165,.30) 97%, transparent),
    radial-gradient(circle 2.5px at 210px 30px, rgba(255,210,76,.45) 97%, transparent),
    radial-gradient(circle 3px at 85px 190px, rgba(108,139,255,.28) 97%, transparent),
    radial-gradient(circle 2.5px at 240px 215px, rgba(255,143,171,.35) 97%, transparent);
  background-size:270px 270px;animation:drift 90s linear infinite}
@keyframes drift{to{background-position:540px 270px}}
@media(max-width:760px){
  body::before,.hint-chip,#wishBtn,.stage-placeholder span{animation:none!important}
}
::selection{background:var(--yellow)}
/* Readability upgrade: big display headings use rounded Fredoka Bold (easy to read);
   Bungee stays reserved for the brand, small card labels and the number odometers. */
h1,h2,h3{font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:.01em!important}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.container{width:min(1240px,calc(100% - 32px));margin-inline:auto}
.page-pad{padding-top:calc(var(--header-h) + 18px)}

/* ================= FIXED HEADER ================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--plum2);
  border-bottom:var(--bd);box-shadow:0 8px 28px rgba(20,6,14,.4)}
.hd{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--vanilla);text-decoration:none}
.brand b{font-family:'Bungee';font-size:1.18rem;letter-spacing:.5px;white-space:nowrap}
.brand b span{color:var(--yellow)}
.cake-ico{width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:11px;background:var(--yellow);color:var(--plum2);box-shadow:3px 3px 0 var(--pink);font-size:1.2rem;transform:rotate(-2deg);transition:transform .16s cubic-bezier(.25,1,.5,1)}
.cake-ico .ui-icon{font-size:1.25rem}
.brand:hover .cake-ico{transform:translateY(-1px) rotate(2deg)}
.btn .ui-icon,.pill .ui-icon,.tab .ui-icon,.f-btn .ui-icon,.rel-chip .ui-icon{font-size:1em}
.icon-btn .ui-icon{font-size:1.1rem}
.tool-ico .ui-icon,.tile .ico .ui-icon,.flag .ico .ui-icon,.cat-head .blob .ui-icon{color:var(--ink)}
.tile .ico .ui-icon{font-size:1.55rem}
.flag .ico .ui-icon{font-size:2.35rem}
.heading-icon{width:auto;height:auto;margin-right:.42em;border:0;border-radius:0;background:none;box-shadow:none;color:var(--pink);font-size:.94em;line-height:1;vertical-align:-.08em}
.card h3 .heading-icon{margin-right:0;font-size:1.05em}
.card.acc-pink .heading-icon{color:var(--pink)}
.card.acc-strawb .heading-icon{color:var(--strawb-text)}
.card.acc-mint .heading-icon{color:var(--mint-text)}
.card.acc-blue .heading-icon{color:var(--blue-text)}
.card.acc-yellow .heading-icon{color:#916600}
.mchip .ui-icon{margin-right:.25rem;color:var(--pink);font-size:.95em}
.rel-chip .ui-icon{width:auto;height:auto;margin-right:.35rem;border:0;border-radius:0;background:none;color:var(--pink);font-size:1.05rem}
.seo-icon{color:var(--pink)}
@keyframes wob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg) translateY(-3px)}}
.site-nav{display:flex;gap:1.25rem;font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.site-nav a{color:#e9cdd8;text-decoration:none;padding:.35rem .15rem;border-bottom:3px solid transparent;transition:color .15s}
.site-nav a:hover{color:var(--vanilla)}
.site-nav a.on{color:var(--yellow);border-bottom-color:var(--pink)}
.nav-toggle{display:none;width:44px;height:44px;border:3px solid var(--vanilla);border-radius:12px;background:var(--card);box-shadow:3px 3px 0 var(--pink);cursor:pointer;padding:9px;place-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2.5px;border-radius:99px;background:var(--ink);transition:transform .18s cubic-bezier(.25,1,.5,1),opacity .12s ease}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.hd-right{display:flex;gap:.6rem;align-items:center}
.icon-btn{width:42px;height:42px;border:var(--bd);border-radius:12px;background:var(--card);font-size:1.1rem;
  box-shadow:var(--hard-sm);cursor:pointer;transition:transform .15s, box-shadow .15s}
.icon-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.icon-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

/* ================= BUTTONS / INPUTS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;font-family:'Nunito';font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;border:var(--bd);border-radius:14px;
  padding:.8rem 1.4rem;background:var(--card);color:var(--ink);box-shadow:var(--hard-sm);cursor:pointer;
  transition:transform .13s, box-shadow .13s;text-decoration:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px) scale(.98);box-shadow:0 0 0 var(--ink)}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.58;transform:none;box-shadow:2px 2px 0 var(--ink)}
.btn-pink{background:var(--pink);color:#fff}
.btn-yellow{background:var(--yellow)}
.btn-mint{background:var(--mint)}
.btn-big{font-size:1.05rem;padding:1rem 1.6rem;width:100%;border-radius:16px}
input[type=date],input[type=time],input[type=text],input[type=number],input[type=search],input[type=email],select,textarea{font-family:'Nunito';font-weight:800;font-size:1rem;color:var(--ink);
  border:var(--bd);border-radius:14px;padding:.72rem .9rem;background:#fff;width:100%;min-height:48px;outline:none;
  transition:transform .15s, box-shadow .15s}
input:focus,select:focus{box-shadow:var(--hard-sm);transform:translate(-2px,-2px)}
main button{min-height:44px!important}
main input:not([type=checkbox]):not([type=radio]):not([type=range]),main select,main textarea{min-height:48px!important}
input[type=range]{min-height:44px!important;cursor:pointer}
input[type=checkbox],input[type=radio]{width:24px!important;height:24px!important;min-height:24px!important;accent-color:var(--pink);cursor:pointer}
:where(a,button,input,select,textarea,[role="button"]):focus-visible{outline:3px solid var(--blue);outline-offset:3px}
label.lbl{display:block;font-size:.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin:.85rem 0 .35rem}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ================= DRIP / CARDS ================= */
.drip{height:16px;flex:none;background:
  radial-gradient(circle at 12px 0, var(--acc,var(--pink)) 9px, transparent 9.5px) 0 6px/30px 12px repeat-x,
  linear-gradient(var(--acc,var(--pink)),var(--acc,var(--pink))) 0 0/100% 8px no-repeat}
.acc-pink .drip{--acc:var(--pink)}.acc-yellow .drip{--acc:var(--yellow)}
.acc-mint .drip{--acc:var(--mint)}.acc-blue .drip{--acc:var(--blue)}.acc-strawb .drip{--acc:var(--strawb)}
.card{position:relative;background:var(--card);border:var(--bd);border-radius:22px;box-shadow:var(--hard);
  overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;will-change:transform}
.card .in{padding:1.2rem 1.35rem 1.35rem}
.card h3{font-size:1.02rem;line-height:1.25;letter-spacing:.01em;margin-bottom:.75rem;display:flex;align-items:center;gap:.55rem}

/* ================= ODOMETER ================= */
.odo{display:inline-flex;align-items:flex-start;height:1em;overflow:hidden;line-height:1;vertical-align:top}
.odo .col{display:inline-block;height:1em;overflow:hidden;min-width:.72em;text-align:center}
.odo .reel{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.odo .reel b{display:block;height:1em;line-height:1;font-weight:inherit}
.odo .sep{display:inline-block;line-height:1;padding:0 .04em}

/* ================= TOAST ================= */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,190%);z-index:120;
  background:var(--ink);color:var(--vanilla);border:3px solid var(--yellow);border-radius:16px;
  padding:.8rem 1.4rem;font-weight:800;box-shadow:6px 6px 0 rgba(69,38,51,.35);max-width:92vw;text-align:center;
  visibility:hidden;opacity:0;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1), opacity .3s, visibility .3s}
#toast.show{transform:translate(-50%,0);visibility:visible;opacity:1}

/* ================= FOOTER ================= */
.site-footer{position:relative;background:var(--plum2);color:#e9cdd8;margin-top:3.5rem}
.site-footer .drip-top{position:absolute;top:0;left:0;right:0;--acc:var(--pink);transform:rotate(180deg)}
.ft-grid{display:grid;grid-template-columns:1.35fr 2.2fr .75fr 1fr;gap:2.4rem;padding:3.4rem 0 2.2rem}
.ft-brand .logo{display:flex;align-items:center;gap:.55rem;color:var(--vanilla);font-family:'Bungee';font-size:1.15rem}
.ft-brand .logo span{color:var(--yellow)}
.ft-brand p{font-size:.84rem;font-weight:700;margin-top:.8rem;max-width:20rem;color:#c9a3b5}
.ft-col h4{font-family:'Bungee';font-size:.78rem;letter-spacing:.14em;color:var(--yellow);margin-bottom:.95rem}
.ft-col a{display:block;color:#e9cdd8;text-decoration:none;font-weight:800;font-size:.83rem;padding:.22rem 0;transition:color .15s, transform .15s}
.ft-col a:hover{color:var(--yellow);transform:translateX(3px)}
.ft-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1.6rem}
.ft-group{min-width:0;margin-bottom:1rem}
.ft-group h5{font-family:'Nunito';font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--strawb-on-dark);margin:0 0 .35rem;padding-bottom:.3rem;border-bottom:1px solid rgba(255,247,236,.16)}
.ft-group a{line-height:1.35}
.source-card{margin:2rem 0;background:var(--cream);border:var(--bd);border-radius:18px;box-shadow:var(--hard-sm);padding:1.2rem 1.35rem}
.source-card h2{margin-top:0!important}
.source-card p,.source-card li{font-size:.88rem;line-height:1.55}
.source-card ul{padding-left:1.15rem;margin:.7rem 0}
.source-card a{font-weight:900;color:var(--ink)}
.source-card .source-date{font-size:.72rem;color:var(--ink-soft);margin-bottom:0}
.ft-bottom{border-top:2px solid rgba(255,247,236,.14);padding:1.05rem 0 1.25rem;display:flex;justify-content:space-between;
  gap:.8rem 2rem;flex-wrap:wrap;font-size:.74rem;font-weight:800;color:#b98fa3}
.ft-bottom a{color:#e9cdd8;text-decoration:none}
.ft-bottom a:hover{color:var(--yellow)}

/* ================= REVEAL / RESPONSIVE ================= */
.rv{opacity:1;transform:none;transition:transform .2s cubic-bezier(.25,1,.5,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media(max-width:1020px){
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .site-nav{order:3;width:100%;display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:.3rem 0 .15rem}
  .site-nav a{white-space:nowrap}
  .hd{flex-wrap:wrap}
  .js-shell{--header-h:64px}
  .js-shell .hd{flex-wrap:nowrap}
  .js-shell .nav-toggle{display:grid}
  .js-shell .site-nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;width:auto;max-height:calc(100vh - 90px);overflow:auto;flex-direction:column;gap:.2rem;padding:.65rem;background:var(--card);border:var(--bd);border-radius:16px;box-shadow:var(--hard);z-index:70}
  .js-shell .site-nav a{color:var(--ink);padding:.72rem .85rem;border:0;border-radius:10px}
  .js-shell .site-nav a:hover,.js-shell .site-nav a:focus-visible{background:var(--cream);color:var(--ink)}
  .js-shell .site-nav a.on{background:var(--yellow);color:var(--ink)}
  .js-shell .site-header.nav-open .site-nav{display:flex}
}
@media(max-width:640px){
  .container{width:calc(100% - 24px)}
  .ft-grid{grid-template-columns:1fr;gap:1.8rem;padding-top:2.8rem}
  .ft-tools{grid-template-columns:repeat(2,1fr)}
  .brand b{font-size:1rem}
  .brand{gap:.4rem}.cake-ico{width:36px;height:36px;font-size:1.25rem}
  .card{border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
  .card .in{padding:1rem}
  .btn{padding:.72rem 1rem;line-height:1.2;white-space:normal}
  .ft-bottom{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}