/* Flip-It's own identity, "Pop Studio", taken from the app and its store screenshots
   (heads-up-android: app/src/main/res/values/colors.xml and screenshots/en/template-*.html,
   checked 2026-10-20): violet to cyan gradient, deep violet ink, mint and yellow accents.
   Yellow is an accent only, never a button. Boogaloo is for the "Flip-It!" wordmark only,
   Fredoka for headings, Quicksand for text.
   Loaded after /style.css, which gives the reset, --pad and the img reset. */
:root{
  --fi-violet:#6F3FF5; --fi-cyan:#00D4FF; --fi-cyan-ink:#00B8E5;
  --fi-grad:linear-gradient(120deg,#6F3FF5,#00D4FF);
  --fi-ink:#1A0B36; --fi-muted:#5A4E78; --fi-line:#E6E1FB;
  --fi-paper:#FFFFFF; --fi-lav:#F7F5FF;
  --fi-mint:#11D9B0; --fi-yellow:#FFC634;
  --fi-deep:#0E0428; --fi-deeper:#06021A; --fi-card:#1B0F45; --fi-on-deep:#E8E4FF; --fi-dim:#A9A1D6;
}
body{
  background:var(--fi-paper);color:var(--fi-ink);
  font-family:'Quicksand',system-ui,sans-serif;font-weight:500;
  font-size:clamp(17px,1.9vw,19px);line-height:1.6;min-height:100vh;
}
.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--pad)}
a{color:var(--fi-violet)}
h1,h2,h3{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;line-height:1.2;overflow-wrap:break-word}
p{overflow-wrap:break-word}
.wm{font-family:'Boogaloo',cursive;font-weight:400;letter-spacing:.01em}
:focus-visible{outline:3px solid var(--fi-violet);outline-offset:3px}

/* ---------- top of page: Pop Studio gradient behind the bar and the hero ---------- */
.top{background:var(--fi-grad);color:#FFFFFF}
.top :focus-visible{outline-color:#FFFFFF}

/* studio bar: KosmoGames signs it, language menu on the right */
.bar{padding-block:clamp(12px,2.6vw,20px) 0;display:flex;align-items:center;
  justify-content:space-between;gap:12px;position:relative;z-index:5}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;
  color:#FFFFFF;font-weight:700;font-size:clamp(16px,2vw,18px)}
.brand img{width:clamp(28px,4.5vw,34px);height:auto;aspect-ratio:1;border-radius:50%;flex:none}
/* small phones: the longest menu labels ("Français (Québec)", "Bahasa Indonesia") need the
   room, so the "KosmoGames" word is hidden visually but kept as the link's accessible name,
   and the menu button may wrap onto two lines rather than push the page wider */
@media (max-width:419px){
  .brand{flex:none}
  .brand span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .langs{min-width:0}
  .langs summary{white-space:normal;line-height:1.2;max-width:100%}
}

/* ---------- language menu: native <details>, real links, no script ---------- */
.langs{position:relative}
.langs summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.2);
  color:#FFFFFF;font-weight:700;font-size:clamp(15px,1.8vw,17px);white-space:nowrap;
  -webkit-user-select:none;user-select:none}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover,.langs details[open] summary{background:rgba(255,255,255,.3)}
.langs .panel{position:absolute;right:0;top:calc(100% + 8px);z-index:10;
  width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow-y:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 8px;
  padding:12px;border-radius:16px;background:#FFFFFF;color:var(--fi-ink);
  box-shadow:0 14px 40px rgba(26,11,54,.3)}
/* phones: two columns, so the 25 links stay short and the panel fits the screen at 320 px */
@media (max-width:519px){.langs .panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.langs .panel a{display:flex;align-items:center;min-height:44px;padding:4px 10px;border-radius:10px;
  color:var(--fi-ink);text-decoration:none;font-size:15px;line-height:1.25;font-weight:600}
.langs .panel a:hover{background:var(--fi-lav)}
.langs .panel a[aria-current=page]{font-weight:700;color:var(--fi-violet);background:var(--fi-lav)}

/* ---------- hero: text then capture on phones, side by side from 834 px ---------- */
.hero{display:grid;gap:clamp(24px,4vw,48px);align-items:center;
  padding-block:clamp(24px,4.5vw,52px) clamp(40px,6vw,72px);grid-template-areas:"text" "shot"}
.hero-text{grid-area:text;text-align:center}
.hero-shot{grid-area:shot;display:flex;justify-content:center}
/* hero illustration (540 by 968): a picture, not a capture, so no phone frame */
.hero-shot img{width:min(100%,clamp(260px,70vw,340px));height:auto;aspect-ratio:540/968;
  border-radius:clamp(22px,3.2vw,34px);box-shadow:0 22px 50px rgba(26,11,54,.3),0 4px 12px rgba(26,11,54,.14)}
@media (min-width:834px){
  .hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"text shot"}
  .hero-text{text-align:left}
  .hero-shot img{width:min(100%,clamp(300px,30vw,380px))}
  .hero .stores,.hero .trust{justify-content:flex-start}
  .hero .lede{margin-inline:0}
}
.icon{width:clamp(64px,10vw,84px);height:auto;aspect-ratio:1;border-radius:22%;
  box-shadow:0 6px 18px rgba(26,11,54,.28)}
.hero h1{color:#FFFFFF;font-weight:700;font-size:clamp(32px,5.6vw,56px);line-height:1.1;
  margin-top:clamp(12px,2vw,18px);text-shadow:0 2px 10px rgba(26,11,54,.18)}
.hero h1 .wm{display:block;font-size:1.22em;line-height:1}
.hero h1 .sub{display:block;font-size:.6em;font-weight:600;line-height:1.15;margin:.1em 0 .35em}
.lede{margin:clamp(14px,2.4vw,22px) auto 0;max-width:44ch;color:#FFFFFF;font-weight:600;
  font-size:clamp(18px,2.2vw,22px);line-height:1.55;text-shadow:0 1px 3px rgba(26,11,54,.3)}

/* store buttons: white on the gradient; the App Store one is not on sale yet */
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(22px,3.4vw,30px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 24px;border-radius:14px;background:#FFFFFF;color:var(--fi-ink);
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,19px);
  text-decoration:none;line-height:1.2;box-shadow:0 6px 18px rgba(26,11,54,.2)}
.btn:hover{background:var(--fi-lav)}
.soon{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:14px;
  border:2px dashed rgba(255,255,255,.7);color:#FFFFFF;font-weight:600;
  font-size:clamp(16px,1.8vw,18px);line-height:1.3}
.soon b{font-weight:700;margin-right:.4em}

/* trust line under the buttons: white text, a yellow star before each item (accent only) */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:clamp(16px,2.4vw,20px);
  list-style:none;font-weight:700;font-size:clamp(15px,1.7vw,17px);color:#FFFFFF}
.trust li{display:inline-flex;align-items:center}
.trust li::before{content:"\2726";color:var(--fi-yellow);margin-right:7px;font-size:.8em}

/* ---------- blocks: text and capture, white and pale lavender in turn ---------- */
.blk{padding-block:clamp(40px,6.5vw,80px)}
.blk.alt{background:var(--fi-lav)}
.blk h2{font-size:clamp(26px,3.8vw,38px);color:var(--fi-ink);margin-bottom:clamp(12px,2.2vw,18px)}
.blk p{color:var(--fi-ink)}
.blk p + p{margin-top:.8em}
.feature{display:grid;gap:clamp(24px,4.5vw,64px);align-items:center;grid-template-areas:"text" "shot"}
.feature > div{grid-area:text;max-width:36em}
.feature > .shot{grid-area:shot;justify-self:center}
@media (min-width:760px){
  .feature{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"text shot"}
  .feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"shot text"}
}
/* text only blocks: one centred column */
.solo{max-width:48em;margin-inline:auto;text-align:center}
.solo p{max-width:38em;margin-inline:auto}

/* store capture (portrait 540 by 960) */
.shot{display:block;width:auto;height:clamp(380px,100vw,500px);aspect-ratio:540/960;max-width:100%;
  border-radius:clamp(18px,2.6vw,26px);border:1px solid var(--fi-line);
  box-shadow:0 14px 36px rgba(26,11,54,.14)}
@media (min-width:760px){.shot{height:clamp(460px,48vw,600px)}}

/* packs for bigger kids: two labelled rows of picture cards, in place of a capture */
/* .feature > .packs, so it beats ".feature > div", which would put it in the text area */
.feature > .packs{grid-area:shot;justify-self:center;width:100%;max-width:520px;display:grid;gap:clamp(18px,3vw,28px)}
.pack figcaption{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;color:var(--fi-ink);
  font-size:clamp(18px,2.2vw,21px);line-height:1.3;margin-bottom:clamp(8px,1.4vw,12px)}
.pack ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6vw,14px)}
.pack img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:clamp(14px,2vw,20px);
  background:#FFFFFF;border:1px solid var(--fi-line);box-shadow:0 8px 22px rgba(26,11,54,.1)}

/* places to play: the game's own picture cards (backgrounds cleaned to pure white),
   two columns on phones, four above 640 px. Not interactive. */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,22px);
  margin-top:clamp(20px,3vw,28px);list-style:none}
.cards li{background:var(--fi-paper);border:1px solid var(--fi-line);border-radius:22px;
  padding:clamp(12px,1.6vw,18px) 10px 16px;box-shadow:0 10px 26px -14px rgba(111,63,245,.35)}
.cards img{display:block;width:100%;max-width:140px;height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 10px}
.cards span{display:block;font-family:'Fredoka',system-ui,sans-serif;font-weight:600;color:var(--fi-ink);
  font-size:clamp(16px,1.7vw,19px);line-height:1.3}
@media (max-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the founder's note, signed with the brand tagline */
.blk .sign{margin-top:clamp(18px,3vw,26px);font-family:'Fredoka',system-ui,sans-serif;font-weight:600;
  font-size:clamp(20px,2.6vw,26px);color:var(--fi-violet)}

/* ---------- FAQ: dark surface, native <details> ---------- */
#faq{background:var(--fi-deep);color:var(--fi-on-deep);padding-block:clamp(44px,7vw,88px)}
#faq h2{color:#FFFFFF;font-size:clamp(26px,3.8vw,38px);margin-bottom:clamp(18px,3vw,28px)}
#faq a{color:var(--fi-mint)}
#faq :focus-visible{outline-color:var(--fi-mint)}
.faq{display:grid;gap:clamp(10px,2vw,20px)}
@media (min-width:900px){
  .faq{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(30px,4vw,60px)}
  .faq > h2{position:sticky;top:24px;align-self:start}
}
.qa{background:var(--fi-card);border-radius:16px;margin-bottom:10px}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:56px;padding:14px clamp(16px,2.6vw,22px)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--fi-mint);
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:22px;line-height:1}
.qa[open] summary::after{content:"\2212"}
.qa h3{font-size:clamp(18px,2.2vw,21px);line-height:1.35;color:#FFFFFF}
.qa p{padding:0 clamp(16px,2.6vw,22px) 0;color:var(--fi-on-deep)}
.qa p:last-child{padding-bottom:clamp(16px,2.6vw,20px)}
.qa p + p{margin-top:8px}

/* ---------- footer ---------- */
footer{background:var(--fi-deeper);color:var(--fi-dim);font-size:clamp(16px,1.8vw,17px)}
footer .wrap{padding-block:clamp(22px,4vw,32px) clamp(30px,5vw,48px);
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:0 22px}
footer a{color:var(--fi-dim);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer a:hover{color:#FFFFFF;text-decoration:underline}
footer :focus-visible{outline-color:var(--fi-mint)}