:root{
  --cream:#FDF4D8; --cream2:#FBE7B0; --yellow:#FEC126; --orange:#F14E23; --orange-d:#C23A12; --aub:#3E1242; --aub2:#5E2E62; --aub-d:#260A29;
  --card:#FFFAEB; --line:#F0D58F;
  --display:"Fredoka","Baloo 2",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--aub);font-family:var(--body);font-size:1.06rem;line-height:1.6;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--aub);text-decoration-color:var(--orange);text-underline-offset:3px}
a:hover{color:var(--orange-d)}
:focus-visible{outline:3px solid var(--aub);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(253,244,216,.93);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--aub)}
.brand img{width:62px;height:auto}
nav{display:flex;gap:4px}
nav a{font-family:var(--display);font-weight:500;text-decoration:none;padding:8px 12px;border-radius:999px}
nav a:hover{background:var(--cream2)}

/* hero */
.hero{position:relative;text-align:center;padding:36px 0 70px;background:
  radial-gradient(circle at 50% 0%,#FFE08A 0,rgba(255,228,154,0) 62%),var(--cream)}
.hero img.logo{width:min(400px,80vw);margin:0 auto;filter:drop-shadow(0 10px 18px rgba(62,18,66,.16))}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,5.6vw,2.6rem);line-height:1.15;margin:18px auto 14px;max-width:18em}
.hero p.sub{max-width:30em;margin:0 auto 26px;color:var(--aub2);font-size:1.12rem}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.2rem;text-decoration:none;color:#fff;background:var(--orange);padding:13px 28px;border-radius:999px;box-shadow:0 5px 0 var(--aub);transition:transform .12s,box-shadow .12s}
.btn:hover{color:#fff;background:var(--orange);transform:translateY(2px);box-shadow:0 3px 0 var(--aub)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--aub)}
.wave{display:block;width:100%;height:36px;position:absolute;left:0;bottom:-1px}

section{padding:64px 0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,5vw,2.3rem);margin:0 0 8px;line-height:1.15}
h2 .dot{color:var(--orange)}
h1,h2,h3{color:var(--aub)}
.lead{color:var(--aub2);margin:0 0 30px;max-width:34em}

/* games */
.grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.grid{grid-template-columns:1.35fr 1fr}}
.card{background:var(--card);border:3px solid var(--aub);border-radius:26px;overflow:hidden;box-shadow:0 7px 0 var(--aub);display:flex;flex-direction:column}
.card .art{background:var(--yellow);border-bottom:3px solid var(--aub)}
.card .art img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-family:var(--display);font-weight:700;font-size:1.6rem;margin:0;line-height:1.1}
.card p{margin:0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:6px}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:.95rem;background:var(--cream2);border:2px dashed var(--orange);color:var(--aub);padding:7px 14px;border-radius:999px}
.badge svg{width:18px;height:18px;flex:none}
.card.next{background:repeating-linear-gradient(135deg,#FFFAEB 0 18px,#FDEBC0 18px 36px);border-style:dashed;box-shadow:none;justify-content:center;text-align:center}
.card.next .body{align-items:center;justify-content:center;padding:34px 22px}
.pot{width:150px;height:auto}
.steam path{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;opacity:.0;animation:steam 2.8s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.9s}.steam path:nth-child(3){animation-delay:1.8s}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-14px)}}
.dots span{animation:blink 1.4s infinite both}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.15}40%{opacity:1}}

/* about */
.about{background:var(--cream2);border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.about .wrap{display:grid;gap:26px;align-items:center;grid-template-columns:1fr}
@media(min-width:760px){.about .wrap{grid-template-columns:230px 1fr}}
.about img{width:190px;margin:0 auto}
.about p{margin:0 0 10px;max-width:36em}

/* contact */
.contact{text-align:center}
.mail{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,5.6vw,2rem);word-break:break-word}

/* footer */
footer{background:var(--aub);color:#FBEFD0;padding:36px 0 44px;font-size:.95rem}
footer a{color:var(--yellow)}
footer .cols{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fill{background:var(--yellow);color:var(--aub);border-radius:6px;padding:1px 7px;font-weight:700;white-space:normal}
.small{opacity:.8;margin-top:22px;font-size:.88rem}

/* privacy page */
.doc{padding:44px 0 64px;max-width:720px}
.doc h1{font-family:var(--display);font-size:clamp(2rem,7vw,2.8rem);margin:0 0 6px}
.doc h2{font-size:1.4rem;margin:30px 0 6px}
.doc ul{padding-left:1.2em}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.steam path,.dots span{animation:none;opacity:.8}.btn{transition:none}}
@media(max-width:420px){nav a{padding:8px 9px;font-size:.95rem}}

/* footer logo */
.flogo{width:min(260px,70vw);height:auto;margin-bottom:22px}
footer strong{color:#fff}
.top{border-bottom-color:var(--aub)}
@media(max-width:420px){.brand img{width:56px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* owner: centre everything on phones */
@media(max-width:759px){
  #games .wrap > h2, #games .wrap > p, #games .wrap > .lead, .about .wrap, .about h2, .about p,
  .card .body, .card .body h3, .card .body p, footer, footer .cols, footer p { text-align:center }
  .card .row { justify-content:center; align-items:center; flex-direction:column }
  .about .wrap { justify-items:center }
  footer .cols, footer .cols > * { justify-items:center; justify-content:center }
  footer .flogo, .about img { margin-left:auto; margin-right:auto; display:block }
}