/* dellymeowmeow.com: the home of the Delly Meow Meow series (Hurst Interactive). Plain HTML and CSS, no build step. */
:root {
  --ink: #3b2b4a; --soft: #6b6880; --card: #fffaf0; --line: #eadfca; --cream: #fff6e6;
  --sky: #cfeaff; --sky2: #eaf6ff; --grass: #8fd06a;
  --orange: #ff7a45; --orangeDk: #e05a26; --teal: #2fa79d; --purple: #9b6ad6; --gold: #e0b020; --goldDk: #b88a12; --pink: #ff7eb6;
  --radius: 22px; --shadow: 0 3px 0 var(--line);
  --head: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--orangeDk); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(36px, 6vw, 60px); }
h2 { font-size: clamp(30px, 4.6vw, 44px); }
h3 { font-size: clamp(21px, 2.6vw, 26px); }
p { margin: 0; }
.wrap { width: min(1160px, 100%); margin: 0 auto; padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--soft); max-width: 62ch; }
.small { font-size: 15px; color: var(--soft); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; border-radius: 10px; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--head); font-weight: 600; font-size: 18px; text-decoration: none; border-radius: 999px; padding: 12px 22px; border: 0; cursor: pointer; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line); transition: transform .12s ease; }
.btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line); }
.btn.go { background: var(--orange); color: #fff; box-shadow: 0 4px 0 var(--orangeDk); }
.btn.gold { background: var(--gold); color: #fff; box-shadow: 0 4px 0 var(--goldDk); }
.btn.teal { background: var(--teal); color: #fff; box-shadow: 0 4px 0 #1f7f77; }
.btn.small { font-size: 16px; padding: 9px 16px; }
.btn.is-soon { opacity: .75; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 246, 230, .92); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { font-family: var(--head); font-weight: 600; font-size: 22px; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { font-family: var(--head); font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 12px; }
.nav a:hover { background: #fff; }
@media (max-width: 760px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* the bouncy logo (same as the game's title screen) */
.logo { font-family: var(--head); font-weight: 700; line-height: .95; --ink2: #3b2b4a; --o: .05em; }
.logo .w1, .logo .w2 { display: flex; flex-wrap: wrap; }
.logo .w1 { font-size: clamp(64px, 12vw, 128px); }
.logo .w2 { font-size: clamp(38px, 7vw, 74px); margin-top: .04em; }
.logo .sp { width: .28em; }
.logo .c { display: inline-block; color: var(--c); transform: rotate(var(--r)); animation: bob 2.8s ease-in-out infinite; animation-delay: var(--dl);
  text-shadow: calc(-1*var(--o)) 0 var(--ink2), var(--o) 0 var(--ink2), 0 calc(-1*var(--o)) var(--ink2), 0 var(--o) var(--ink2), calc(-.72*var(--o)) calc(-.72*var(--o)) var(--ink2), calc(.72*var(--o)) calc(-.72*var(--o)) var(--ink2), calc(-.72*var(--o)) calc(.72*var(--o)) var(--ink2), calc(.72*var(--o)) calc(.72*var(--o)) var(--ink2), 0 .09em 0 var(--ink2), 0 .12em .1em rgba(30, 20, 60, .3); }
.logo .w2 .c { color: #fff; }
@keyframes bob { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) * -.6)) translateY(-.06em); } }
@media (prefers-reduced-motion: reduce) { .logo .c { animation: none; } html { scroll-behavior: auto; } }

/* hero */
.hero { background: linear-gradient(#a8dcff, var(--sky2) 70%, var(--cream)); overflow: hidden; position: relative; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; padding-top: 48px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 10px; }
.hero .lede { color: #4a4660; }
.screens { position: relative; aspect-ratio: 1180 / 900; }
.screens .shot { position: absolute; width: 82%; }
.screens .shot:nth-child(1) { left: 0; top: 0; transform: rotate(-2.5deg); }
.screens .shot:nth-child(2) { right: 0; bottom: 0; transform: rotate(2deg); }
.shot { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, 0 14px 36px rgba(59, 43, 74, .22); }
.shot img { width: 100%; height: auto; aspect-ratio: 1180 / 820; object-fit: cover; }
.ribbon { display: inline-block; align-self: flex-start; background: var(--orange); color: #fff; font-family: var(--head); font-weight: 600; padding: 6px 18px; border-radius: 8px; box-shadow: 0 3px 0 var(--orangeDk); }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; padding-top: 32px; } }

/* sections */
.band { padding: 72px 0; }
.band.alt { background: #fff; }
.band.sky { background: linear-gradient(var(--sky2), #fff); }
.band.night { background: linear-gradient(#1d2a4a, #2b3a6a); color: #fff; }
.band.night .lede { color: #dbe6ff; }
.band.gold { background: linear-gradient(#fff7da, var(--cream)); }
.head { margin-bottom: 30px; }

/* games shelf */
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.gamecard { background: var(--card); border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line); padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.gamecard .shot { box-shadow: none; border-radius: 14px; }
.gamecard .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 6px; }
.chip { font-family: var(--head); font-weight: 600; font-size: 14px; padding: 4px 12px; border-radius: 999px; background: #e9f7ee; color: #2e7d46; }
.chip.n { background: #fff0d6; color: #a0620d; }
.gamecard h3, .gamecard p, .gamecard .btns { padding: 0 6px; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.tile { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: inset 0 0 0 2px var(--line); }
.tile .ic { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.tile h3 { font-size: 21px; margin-bottom: 6px; }
.tile p { color: var(--soft); font-size: 17px; }

/* game sections */
.game { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.game .story { font-size: 20px; }
@media (max-width: 880px) { .game { grid-template-columns: 1fr; } }
.inside { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.inside li { padding-left: 34px; position: relative; }
.inside li::before { content: '⭐'; position: absolute; left: 0; top: 0; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 34%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 6px 18px; margin-top: 30px; }
.strip figure { margin: 0; scroll-snap-align: start; }
.strip figcaption { font-family: var(--head); font-weight: 500; font-size: 17px; margin-top: 12px; text-align: center; }
@media (max-width: 640px) { .strip { grid-auto-columns: 82%; } }
.places { display: flex; flex-wrap: wrap; gap: 8px; }
.places span { background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 2px var(--line); }
.places span b { color: var(--gold); font-family: var(--head); margin-right: 4px; }

/* curriculum tabs */
.years { margin-top: 18px; background: var(--card); border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--line); padding: 16px; }
.ytabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ytabs button { font-family: var(--head); font-weight: 600; font-size: 16px; border: 0; border-radius: 12px; padding: 8px 12px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.ytabs button[aria-selected="true"] { background: var(--teal); color: #fff; box-shadow: none; }
.ypanel ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 17px; }
.ypanel b { font-family: var(--head); font-weight: 600; }

/* Adele */
.adele { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: center; }
.adele video { width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; background: #000; box-shadow: 0 0 0 5px #fff, 0 14px 40px rgba(0, 0, 0, .4); }
@media (max-width: 760px) { .adele { grid-template-columns: 1fr; } .adele video { max-width: 320px; margin: 0 auto; } }

/* prices */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.price { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line); display: flex; flex-direction: column; gap: 12px; }
.price.school { box-shadow: inset 0 0 0 4px var(--teal), 0 4px 0 #bfe3df; }
.price .amt { font-family: var(--head); font-weight: 600; font-size: 46px; line-height: 1; }
.price .amt small { font-size: 18px; color: var(--soft); font-weight: 500; }
.price ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 17px; flex: 1; align-content: start; }
.price .btns { margin-top: 6px; }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 2px var(--line); padding: 4px 20px; }
.faq summary { font-family: var(--head); font-weight: 600; font-size: 20px; padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--orange); font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 16px; color: #4a4660; }

/* footer */
footer { background: var(--ink); color: #e9e4f2; padding: 40px 0; font-size: 16px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
footer a { color: #ffd34d; }
footer .cols { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* simple content pages (schools, privacy, terms) */
.page { padding: 56px 0 80px; }
.page .wrap { max-width: 860px; }
.page h2 { font-size: clamp(26px, 3.6vw, 34px); margin-top: 34px; margin-bottom: 10px; }
.page p, .page li { color: #4a4660; }
.page p + p { margin-top: 12px; }
.page ul { padding-left: 22px; display: grid; gap: 6px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }