@font-face{font-family:Fredoka;src:url(assets/fonts/Fredoka.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url(assets/fonts/Nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}

:root{
  --bg:#f7ecd8; --panel:#fdf5e4; --border:#e0c99e;
  --text:#5a5348; --muted:#9a8f7c;
  --green:#a4b971; --green-dark:#8fa463;
  --tan:#f0c583; --brown:#a17a4e; --blue:#b1cbd2; --pink:#f5b8a5;
  --logo:#e1a754; --logo-ink:#533811;
  --shadow:0 6px 0 rgba(90,83,72,.10);
  --radius:22px;
  --pad:clamp(20px,5vw,40px);
  /* Fredoka has no Cyrillic: without this fallback chain Ukrainian text
     dropped to the system Times instead of the game's second font */
  --f-display:Fredoka,Nunito,system-ui,sans-serif;
  --f-body:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
/* mobile browsers paint a translucent blue square on tap; the site has
   its own hover and active states, so the extra flash only gets in the way */
a,button,label,input,summary{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.f{font-family:var(--f-display);font-weight:600;line-height:1.15;margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--brown)}
.wrap{width:min(1120px,100% - var(--pad)*2);margin-inline:auto}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(247,236,216,.88);backdrop-filter:blur(8px);border-bottom:1px solid rgba(224,201,158,.6)}
.bar{position:relative;display:flex;align-items:center;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:38px;height:38px;border-radius:11px}
.brand span{font-family:var(--f-display);font-size:1.25rem;font-weight:600;color:var(--logo-ink)}
.langs{margin-left:auto;display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:4px}
.langs a{
  /* Nunito, not Fredoka: Fredoka has no Cyrillic, so the Ukrainian label
     next to EN/DE rendered in a different face — thinner and differently shaped */
  font-family:var(--f-body);font-size:.84rem;font-weight:700;letter-spacing:.02em;text-decoration:none;
  border:0;background:transparent;color:var(--muted);
  padding:5px 12px;border-radius:999px;cursor:pointer;transition:.15s;
}
.langs a:hover{color:var(--text)}
.langs a[aria-current="true"]{background:var(--green);color:#fbf6ec}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-size:1.02rem;font-weight:500;text-decoration:none;
  padding:14px 26px;border-radius:16px;border:0;cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .15s;
  box-shadow:0 4px 0 rgba(90,83,72,.14);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(90,83,72,.16)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(90,83,72,.14)}
.btn-primary{background:var(--green);color:#fbf6ec}
.btn-primary:hover{background:#b4c88a}
.btn-secondary{background:var(--panel);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:#f0e3ce}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;box-shadow:none}
.btn .soon{font-size:.72rem;background:var(--tan);color:var(--logo-ink);padding:2px 8px;border-radius:999px}

/* the game's main-menu card — ThemeManager.translucent_card():
   PANEL_BG a=.82 · CORNER_RADIUS*2=28 · PANEL_BORDER a=.7 2px · PANEL_MARGIN*2=40 */
.plate{
  background:rgba(253,245,228,.82);
  border:2px solid rgba(224,201,158,.7);
  border-radius:28px;
  padding:clamp(24px,3.4vw,40px);
  box-shadow:0 10px 30px rgba(90,83,72,.22);
}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(76vh,660px);display:grid;align-items:center;
  padding:clamp(40px,6vw,72px) 0;
}
.hero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:76% 50%;
}
.hero::after{ /* a light scrim so the card does not blend into the sky */
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(26,50,68,.14);
}
.hero-txt{max-width:30ch;margin-left:clamp(0px,2vw,40px)}

.hero h1{
  font-size:clamp(2.8rem,6vw,4.4rem);font-weight:600;color:var(--logo);
  letter-spacing:.01em;
  -webkit-text-stroke:clamp(2px,.5vw,4px) var(--logo-ink); paint-order:stroke fill;
}
.tagline{
  font-family:var(--f-display);font-size:clamp(1.1rem,2vw,1.42rem);font-weight:400;
  color:var(--text);margin:.5em 0 0;line-height:1.35;
}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:1.5em 0 .8em}
.cta-note{font-size:.86rem;color:var(--muted)}
.shot{border-radius:var(--radius);border:3px solid var(--panel);box-shadow:0 14px 40px rgba(90,83,72,.16);overflow:hidden;background:var(--panel)}

/* ---------- sections ---------- */
section{padding:clamp(46px,7vw,86px) 0}
.sec-head{text-align:center;max-width:44ch;margin:0 auto clamp(30px,4vw,50px)}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--logo-ink)}
.sec-head p{color:var(--muted);margin:.6em 0 0}

/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.feat:last-child{margin-bottom:0}
.feat:nth-of-type(even) .feat-txt{order:2}
.feat h3{font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--logo-ink)}
.feat p{margin:.7em 0 0}
.pill{display:inline-block;font-family:var(--f-display);font-size:.78rem;font-weight:500;padding:4px 12px;border-radius:999px;background:var(--blue);color:#3f4d52;margin-bottom:.8em}

/* worlds */
.worlds{background:var(--panel);border-block:1px solid var(--border)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card img{width:100%}
.card .body{padding:20px 22px 24px}
.card h3{font-size:1.2rem;color:var(--logo-ink)}
.card p{margin:.5em 0 0;font-size:.94rem;color:var(--muted)}

/* parents */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fact{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 18px}
.fact .tick{flex:none;width:26px;height:26px;border-radius:8px;background:var(--green);color:#fbf6ec;display:grid;place-items:center;font-size:.9rem;font-weight:700}
.fact b{font-family:var(--f-display);font-weight:500;display:block;color:var(--logo-ink)}
.fact span.d{font-size:.88rem;color:var(--muted)}

/* about — the game main-menu card: ThemeManager.translucent_card() */
.about-sec{position:relative;isolation:isolate;overflow:hidden}
.about-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:18% 62%}
.about{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  max-width:820px;margin-inline:auto;
}
.about img{width:120px;height:120px;border-radius:28px}
.about h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--logo-ink)}

/* final cta */
.final{text-align:center}
.final .cta{justify-content:center}
.final h2{font-size:clamp(1.9rem,4.4vw,2.9rem);color:var(--logo-ink)}
.final p{color:var(--muted);margin:.7em auto 0;max-width:44ch}

footer{border-top:1px solid var(--border);padding:34px 0 46px;font-size:.88rem;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.foot nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--text);border-color:var(--border)}


@media (max-width:760px){
  /* portrait: Svitko sits behind the text, so the card takes the full width */
  .hero{min-height:auto;text-align:center}
  .hero-img{object-position:72% 42%}
  .hero-txt{max-width:none}
  .cta{justify-content:center}
  .feat{grid-template-columns:1fr}
  .feat:nth-of-type(even) .feat-txt{order:0}
  .foot nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- privacy.html ---------- */
.doc{font-size:17px;line-height:1.7}
.doc .wrap{width:min(720px,100% - 44px)}
.doc header{position:static;backdrop-filter:none;background:var(--panel)}
.doc main{padding:44px 0 70px}
.doc main p{margin:0 0 1.25em}
.doc h1{font-size:clamp(1.9rem,5vw,2.6rem);color:var(--logo-ink);margin:0 0 .2em}
.doc h2{font-size:1.25rem;color:var(--logo-ink);margin:2.2em 0 .4em}
.doc .meta{color:var(--muted);font-size:.92rem;margin:0 0 2em}
.doc .lede{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px 26px;font-size:1.05rem}
.doc .lede strong{color:var(--logo-ink)}
.doc ul{padding-left:1.2em}
.doc li{margin:.35em 0}
.doc hr{border:0;border-top:1px solid var(--border);margin:2.6em 0}
.doc footer{padding:26px 0 40px}

/* ---------- MVP badge in the hero ---------- */
.badge{
  display:inline-block;font-family:var(--f-display);font-size:.8rem;font-weight:500;
  letter-spacing:.02em;color:var(--logo-ink);background:var(--tan);
  padding:4px 13px;border-radius:999px;margin:.7em 0 0;
}


/* ---------- two columns: works / not yet ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,44px);margin:1.6em 0 0}
.col-h{font-size:1.1rem;margin:0 0 .6em;display:flex;align-items:center;gap:9px}
.col-h::before{
  content:"";width:22px;height:22px;border-radius:7px;flex:none;
  display:inline-block;
}
.col-h.ok{color:#5f7038}
.col-h.ok::before{background:var(--green)}
.col-h.todo{color:#8a6a3a}
.col-h.todo::before{background:var(--tan)}
.list{list-style:none;padding:0;margin:0}
.list li{position:relative;padding-left:26px;margin:.55em 0;line-height:1.55}
.list li::before{position:absolute;left:0;top:0;font-weight:700}
.list.ok li::before{content:"✓";color:var(--green)}
.list.todo li::before{content:"•";color:#c99a52;font-size:1.3em;line-height:1.1}

/* ---------- contact card ---------- */
.contact{text-align:center;max-width:640px;margin:clamp(30px,4vw,48px) auto 0}
.contact h3{font-size:1.25rem;color:var(--logo-ink)}
.contact p{margin:.6em 0 0}
.contact .btn{margin-top:1.2em}
.contact-addr{margin-top:1.1em;font-family:var(--f-display);font-size:1.25rem}
.contact-addr a{color:var(--brown);text-decoration:none;border-bottom:2px solid var(--border)}
.contact-addr a:hover{border-color:var(--brown)}
.contact-note{font-size:.85rem;color:var(--muted);margin-top:1.1em}


/* ---------- development page ---------- */
.doc .langs{margin-left:auto}
.doc .spec{
  display:grid;grid-template-columns:auto 1fr;gap:.1em 1.4em;
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:22px 26px;margin:1.2em 0 0;
}
.doc .spec dt{font-family:var(--f-display);font-weight:500;color:var(--logo-ink);padding:.35em 0}
.doc .spec dd{margin:0;padding:.35em 0;color:var(--text)}
.doc .two{margin-top:1.4em}
.doc .contact{margin-top:2.4em}


@media (max-width:760px){
  .two{grid-template-columns:1fr;gap:26px}
  .doc .spec{grid-template-columns:1fr;gap:0;padding:18px 20px}
  .doc .spec dt{padding-bottom:0}
  .doc .spec dd{padding-top:.15em;padding-bottom:.8em;color:var(--muted)}
}

/* ---------- full-column prose blocks ---------- */
.prose{max-width:62ch;margin-inline:auto}
.prose p{margin:0 0 1.25em}
.prose p:last-child{margin-bottom:0}
.prose-cta{text-align:center;margin:2em 0 0}

/* ---------- "what is implemented" tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.tile{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:20px 22px}
.tile h3{font-size:1.05rem;color:var(--logo-ink);margin:0 0 .45em}
.tile p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.55}

/* ---------- screenshots ---------- */
.wide{margin:0 0 22px}
.wide img{width:100%;border-radius:var(--radius)}
.wide figcaption{margin-top:.7em;text-align:center;font-size:.9rem;color:var(--muted)}
.card figcaption b{font-family:var(--f-display);font-weight:500;color:var(--logo-ink);display:block;font-size:1.05rem}
.card figcaption span{display:block;margin-top:.35em;font-size:.92rem;color:var(--muted);line-height:1.5}
figure{margin:0}

/* ---------- full-size screenshot ----------
   No JavaScript and no anchors: a hidden radio button does the switching.
   A radio rather than a checkbox, so "next" clears the current frame by itself;
   closing moves the selection to the spare lb-none button. */
.lb-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.zoom{display:block;cursor:zoom-in;border-radius:inherit;overflow:hidden}
.zoom img{transition:transform .18s}
.zoom:hover img{transform:scale(1.02)}

.lightbox{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:clamp(12px,3vw,32px)}
#lb0:checked ~ .wrap .lb0-box{display:grid}
#lb1:checked ~ .wrap .lb1-box{display:grid}
#lb2:checked ~ .wrap .lb2-box{display:grid}
#lb3:checked ~ .wrap .lb3-box{display:grid}
#lb4:checked ~ .wrap .lb4-box{display:grid}
#lb5:checked ~ .wrap .lb5-box{display:grid}
#lb6:checked ~ .wrap .lb6-box{display:grid}
.lb-back{position:absolute;inset:0;background:rgba(20,38,52,.88);cursor:zoom-out}

.lb-fig{
  position:relative;z-index:1;margin:0;
  display:grid;justify-items:center;gap:14px;
  max-width:min(1200px,100% - 2*clamp(56px,7vw,104px));
}
.lb-fig img{
  max-width:100%;max-height:calc(100vh - 230px);width:auto;height:auto;
  border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lb-cap{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:14px 22px;max-width:72ch;text-align:center;
}
.lb-cap b{font-family:var(--f-display);font-weight:500;color:var(--logo-ink);display:block;font-size:1.05rem}
.lb-cap span{display:block;margin-top:.3em;font-size:.92rem;color:var(--muted);line-height:1.5}
.lb-cap b + span{margin-top:.35em}

.lb-nav,.lb-close{
  position:absolute;z-index:2;cursor:pointer;
  display:grid;place-items:center;line-height:1;
  color:var(--text);background:var(--panel);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:background .15s,color .15s;
}
.lb-nav:hover,.lb-close:hover{background:#fff;color:var(--logo-ink)}
.lb-close{top:14px;right:16px;width:44px;height:44px;font-size:1.2rem}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem;padding-bottom:6px}
.lb-prev{left:clamp(8px,2vw,26px)}
.lb-next{right:clamp(8px,2vw,26px)}

/* keyboard: the radios stay in the tab order, arrows page through the gallery */
#lb0:focus-visible ~ .wrap label[for="lb0"],
#lb1:focus-visible ~ .wrap label[for="lb1"],
#lb2:focus-visible ~ .wrap label[for="lb2"],
#lb3:focus-visible ~ .wrap label[for="lb3"],
#lb4:focus-visible ~ .wrap label[for="lb4"],
#lb5:focus-visible ~ .wrap label[for="lb5"],
#lb6:focus-visible ~ .wrap label[for="lb6"]{outline:3px solid var(--green);outline-offset:3px;border-radius:14px}

@media (max-width:700px){
  .lb-fig{max-width:calc(100% - 16px);gap:10px}
  .lb-fig img{max-height:calc(100vh - 260px)}
  .lb-nav{width:44px;height:44px;font-size:1.6rem;top:auto;bottom:16px;transform:none}
  .lb-cap{padding:12px 16px;font-size:.95rem}
}

/* ---------- video ---------- */
.embed{
  position:relative;aspect-ratio:16/9;max-width:960px;margin-inline:auto;
  border-radius:var(--radius);overflow:hidden;
  border:3px solid var(--panel);box-shadow:0 18px 44px rgba(18,36,50,.35);
  background:#1a2634;
}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ---------- cursor companion (mascot.js) ----------
   Static rules live here, the motion lives in the script: it only sets
   transform, so no inline styles appear in the markup and the CSP stays strict. */
#svitko-buddy{
  position:fixed;left:0;top:0;z-index:60;   /* below the lightbox (70) */
  pointer-events:none;                       /* never blocks clicks on the page */
  will-change:transform;
  transition:filter .18s ease;
}
#svitko-buddy img{
  display:block;width:34px;height:auto;
  filter:drop-shadow(0 6px 10px rgba(20,38,52,.28));
}
#svitko-buddy.is-hover img{
  filter:drop-shadow(0 0 12px rgba(255,196,92,.75)) drop-shadow(0 6px 10px rgba(20,38,52,.3));
}
#svitko-buddy.is-idle img{opacity:.92}

@media (prefers-reduced-motion:reduce){#svitko-buddy{display:none}}
@media (pointer:coarse){#svitko-buddy{display:none}}

/* ---------- footer icons ---------- */
.social{display:flex;gap:8px;align-items:center}
.ico{
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--border);border-radius:12px;
  background:var(--panel);color:var(--muted);
  cursor:pointer;text-decoration:none;padding:0;
  transition:color .15s,background .15s,transform .12s;
}
.ico:hover{color:var(--logo-ink);background:#fff;transform:translateY(-2px) scale(1.04)}
.ico:active{transform:translateY(0) scale(.98)}
@media (max-width:760px){.social{width:100%;justify-content:center;margin-top:4px}}

/* ---------- dropdown menu (narrow screens only) ----------
   No JavaScript: the burger is a label for a hidden checkbox.
   Wide screens do not need it — the footer already carries the navigation. */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.burger,.menu{display:none}

@media (max-width:760px){
  .burger{
    display:grid;gap:4px;align-content:center;justify-items:stretch;
    width:38px;height:38px;padding:9px 8px;cursor:pointer;
    border:1px solid var(--border);border-radius:12px;background:var(--panel);
  }
  .burger span{display:block;height:2px;border-radius:2px;background:var(--text)}
  #nav-open:checked ~ .burger{background:#fff}

  #nav-open:checked ~ .menu{
    display:flex;flex-direction:column;
    position:absolute;top:calc(100% + 6px);right:0;z-index:30;
    min-width:min(260px,calc(100vw - 32px));
    background:var(--panel);border:1px solid var(--border);border-radius:18px;
    padding:8px;box-shadow:0 18px 40px rgba(90,83,72,.28);
  }
  .menu a{
    padding:10px 14px;border-radius:12px;
    color:var(--text);text-decoration:none;font-size:.98rem;
  }
  .menu a:hover{background:var(--bg);color:var(--logo-ink)}
  .menu .menu-sep{margin-top:6px;border-top:1px solid var(--border);padding-top:12px;border-radius:0 0 12px 12px}
  /* four items in the bar now: logo, share, languages, burger.
     The switcher gives up its padding first so nothing wraps at 360px. */
  .langs{margin-left:auto;padding:3px}
  .langs a{padding:9px 11px;font-size:.82rem}
  .bar{gap:8px}
  .brand span{font-size:1.1rem}

  /* a finger needs a bigger target than a mouse pointer: the usual
     recommendation is ~44px, so the header controls grow on touch screens */
  .ico{width:44px;height:44px}
  .burger{width:44px;height:44px;padding:12px 10px}
  .lb-close{width:48px;height:48px}
  .menu a{padding:13px 14px}
  #nav-open:focus-visible ~ .burger{outline:3px solid var(--green);outline-offset:2px}
}

/* ---------- credits list ---------- */
.doc .credits{margin:0 0 1.25em;padding-left:1.2em}
.doc .credits li{margin:.4em 0;color:var(--muted);line-height:1.55}

/* itch.io: a word rather than a glyph — the official mark is not ours to redraw */
.ico-text{
  width:auto;padding:0 13px;
  font-family:var(--f-display);font-size:.86rem;font-weight:500;
  letter-spacing:.01em;
}