/* The public pages of the game: paper, ink and the game's hand-drawn font (Neucha), like the game itself */
@font-face{font-family:'Neucha';font-display:swap;src:url(fonts/neucha-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Neucha';font-display:swap;src:url(fonts/neucha-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'PT Mono';font-display:swap;src:url(fonts/pt-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Mono';font-display:swap;src:url(fonts/pt-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
:root{
  --paper:#f5f5f1;--card:#fbfbf8;--ink:#151515;--graphite:#6b6b66;--faint:#d9d9d0;--moss:#4f8a4b;--honey:#d9a62b;--blue:#5b7fb3;--red:#c0503a;--violet:#7a62a8;
  --hand:'Neucha','Comic Sans MS',cursive;--mono:'PT Mono',ui-monospace,monospace;--text:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:16px;--sh:4px 5px 0;color-scheme:light}
:root[data-theme=dark]{--paper:#121211;--card:#1a1a18;--ink:#eeeee8;--graphite:#9b9b94;--faint:#34342f;--moss:#7cb877;--honey:#e2b54a;--blue:#86a5d6;--red:#de7a62;--violet:#a690d0;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--text);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--moss);text-underline-offset:3px}
h1,h2,h3{font-family:var(--hand);font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
p,ul,ol,figure{margin:0}
.muted{color:var(--graphite)}
.page{max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:28px/1 var(--hand)}
.logo img{width:40px;height:40px;border-radius:11px}
.lang{display:flex;border:1.6px solid var(--ink);border-radius:999px;overflow:hidden}
.lang button{font:14px/1 var(--mono);letter-spacing:.06em;background:none;color:var(--ink);border:0;padding:9px 13px;cursor:pointer;min-width:44px;min-height:38px}
.lang button+button{border-left:1.6px solid var(--ink)}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.lang button:focus-visible{outline:3px solid var(--moss);outline-offset:-4px}
.tools{display:flex;align-items:center;gap:10px}
.theme{width:40px;height:40px;border:1.6px solid var(--ink);border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.theme svg{width:22px;height:22px}
.theme:focus-visible{outline:3px solid var(--moss);outline-offset:2px}
.theme .sun{display:none}:root[data-theme=dark] .theme .sun{display:block}:root[data-theme=dark] .theme .moon{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr;grid-template-areas:"text" "stage" "about" "stores";gap:20px;padding:10px 0 40px}
.hero .text{grid-area:text;display:flex;flex-direction:column;gap:14px;padding-left:58px;min-height:150px}
.kicker{font:13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.hero h1{font-size:clamp(64px,15vw,124px);letter-spacing:-.01em;margin-top:-4px}
.lead{font:clamp(24px,5.4vw,34px)/1.15 var(--hand);text-wrap:balance}
.hero .about{grid-area:about;color:var(--graphite);max-width:34em}
.hero .stores{grid-area:stores}
@media (min-width:860px){
  .hero{grid-template-columns:1.02fr .98fr;grid-template-areas:"text stage" "about stage" "stores stage" ". stage";grid-template-rows:auto auto auto 1fr;align-items:start;column-gap:48px;row-gap:22px;padding:30px 0 70px}
  .hero .text{padding-top:40px;padding-left:72px}
  .hero .about,.hero .stores{padding-left:72px}
  .hero .stores{margin-top:10px}
}

/* ---------- store buttons ---------- */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{position:relative;display:inline-flex;align-items:center;gap:12px;flex:0 1 210px;min-width:0;padding:11px 18px 11px 16px;border-radius:14px;background:var(--ink);color:var(--paper);text-decoration:none;border:1.8px solid var(--ink);transition:transform .15s}
.store svg{width:30px;height:30px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.1}
.store small{font:12px/1.2 var(--text);opacity:.8}
.store b{font:500 21px/1.15 var(--text);letter-spacing:-.01em}
.store:not(.off):hover{transform:translateY(-2px)}
.store.off{background:var(--card);color:var(--ink);cursor:default;box-shadow:var(--sh) var(--ink)}
@media (max-width:480px){.stores{flex-wrap:nowrap;gap:10px}.store{flex:1 1 0;gap:9px;padding:10px 10px 10px 11px}.store svg{width:24px;height:24px}.store b{font-size:17px;white-space:nowrap}.store small{font-size:11px}}

/* ---------- sections ---------- */
section.block{padding:46px 0;border-top:1.6px solid var(--ink)}
section.block>h2{font-size:clamp(38px,8vw,56px);margin-bottom:26px}
.steps{display:grid;gap:18px;grid-template-columns:1fr;counter-reset:st}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:1.6px solid var(--ink);border-radius:var(--r);padding:20px 20px 22px;box-shadow:var(--sh) var(--c,var(--moss));display:flex;flex-direction:column;gap:10px}
.step svg{width:64px;height:64px;color:var(--ink)}
.step h3{font-size:32px;display:flex;align-items:baseline;gap:10px}
.step h3::before{counter-increment:st;content:counter(st);font:14px/1 var(--mono);border:1.6px solid var(--ink);border-radius:50%;width:26px;height:26px;display:inline-grid;place-items:center;flex:none;transform:translateY(-4px)}
.step p{color:var(--graphite);font-size:16px}

/* screenshots in phone frames: a strip that scrolls sideways on a phone, a row on a computer */
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 20px;margin:0 -16px;scrollbar-width:thin}
.shots figure{flex:0 0 min(62vw,230px);scroll-snap-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.phone{border:2px solid #151515;border-radius:30px;padding:7px;background:#151515;box-shadow:var(--sh) var(--faint);width:100%}
.phone img{border-radius:23px;aspect-ratio:360/780;width:100%;height:auto;background:var(--paper)}
.shots figcaption{font:20px/1.2 var(--hand);text-align:center}
@media (min-width:1000px){.shots{overflow:visible;margin:0;padding:6px 0 10px;justify-content:space-between}.shots figure{flex:1 1 0;max-width:200px}}

.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:720px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{border:1.6px solid var(--ink);border-radius:var(--r);padding:16px 18px;background:var(--card);display:flex;flex-direction:column;gap:2px}
.fact b{font:400 clamp(48px,10vw,64px)/1 var(--hand)}
.fact span{color:var(--graphite);font-size:15px;line-height:1.3}
.fact:nth-child(1) b{color:var(--moss)}.fact:nth-child(2) b{color:var(--blue)}.fact:nth-child(3) b{color:var(--honey)}.fact:nth-child(4) b{color:var(--red)}
.more{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px 26px;grid-template-columns:1fr}
@media (min-width:720px){.more{grid-template-columns:repeat(2,1fr)}}
.more li{display:flex;gap:12px;align-items:baseline;font-size:17px}
.more li::before{content:'';flex:none;width:12px;height:12px;border:1.6px solid var(--ink);border-radius:50%;background:var(--moss);transform:translateY(1px)}

.meet h3{font:13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:4px 0 12px}
.bugs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px}
@media (min-width:600px){.bugs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.bugs{grid-template-columns:repeat(6,1fr)}}
.bug{border:1.6px solid var(--ink);border-radius:14px;overflow:hidden;background:#f5f5f1}
.bug img{width:100%;aspect-ratio:8/5;object-fit:cover}
.bug figcaption{font:19px/1.2 var(--hand);padding:6px 10px 8px;background:var(--card);color:var(--ink);border-top:1.6px solid var(--ink)}
.bug figcaption i{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;background:var(--red);color:#fff;border-radius:999px;padding:3px 6px;vertical-align:3px;margin-left:4px}
:root[data-theme=dark] .bug{background:#121211}:root[data-theme=dark] .bug img{filter:invert(1) hue-rotate(180deg)}
.meet .muted{font:20px/1.2 var(--hand)}

.soonbox{border:1.8px dashed var(--ink);border-radius:22px;padding:28px 22px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--card)}
.soonbox h2{font-size:clamp(36px,7vw,50px)}
.soonbox p{color:var(--graphite);max-width:36em}
.soonbox .stores{width:100%}

/* ---------- footer ---------- */
footer{border-top:1.6px solid var(--ink);padding:24px 0 max(30px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;margin-top:20px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer nav a{color:var(--ink);font-size:15px}
footer .made{font:18px/1.2 var(--hand);color:var(--graphite)}

/* ---------- document pages (privacy, terms, delete) ---------- */
.doc{max-width:720px;margin:0 auto;padding:10px 0 40px;display:flex;flex-direction:column;gap:16px}
.doc section{display:flex;flex-direction:column;gap:16px}
.doc h1{font-size:clamp(36px,10vw,64px);margin-top:10px;overflow-wrap:break-word;hyphens:auto}
.doc h2{font-size:28px;margin-top:12px}
.doc ul,.doc ol{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.draft{border:1.6px dashed var(--ink);border-radius:12px;padding:12px 16px;font-size:15px;background:var(--card)}
.doc .back{font:15px/1.2 var(--mono)}
.stub{border:1.6px solid var(--ink);border-radius:var(--r);padding:28px 22px;background:var(--card);box-shadow:var(--sh) var(--honey);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.stub h2{margin:0}

/* ---------- the spider of the top bar (pet.js): over the page, lets every tap through ---------- */
#sky{position:absolute;top:0;left:0;pointer-events:none;z-index:5}

/* ---------- the mini-game: level 1 of the real game in a phone (play.js, play/ — scripts/build-play.mjs) ---------- */
.stage{grid-area:stage;display:flex;justify-content:center}
.gphone{width:min(330px,84vw);border:2px solid #151515;background:#151515;border-radius:38px;padding:9px;box-shadow:var(--sh) var(--faint)}
.screen{position:relative;aspect-ratio:360/740;border-radius:30px;overflow:hidden;background:#f5f5f1;color:#151515;color-scheme:light}
.screen .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:22px 20px 24px;background:linear-gradient(rgba(245,245,241,0) 30%,rgba(245,245,241,.94) 62%,#f5f5f1)}
.ctitle{font:34px/1.05 var(--hand)}
.cover p:not(.ctitle),.endcard p:not(.ctitle){font-size:15px;line-height:1.45;color:#4a4a46}
.play{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:16px;border:0;background:#151515;color:#f5f5f1;font:26px/1 var(--hand);cursor:pointer;box-shadow:3px 4px 0 var(--moss);transition:transform .15s}
.play:hover{transform:translateY(-2px)}.play:focus-visible{outline:3px solid var(--moss);outline-offset:3px}
.play svg{width:22px;height:22px}
.screen iframe{position:absolute;left:0;right:0;bottom:0;top:0;width:100%;height:100%;border:0;background:#f5f5f1}
.endcard{position:absolute;inset:0;z-index:3;background:rgba(245,245,241,.97);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:26px;gap:10px}
.screen .bar{display:none}
/* a phone or a small tablet: the game opens over the whole screen, with a «Close» bar on top */
.screen.full{position:fixed;inset:0;z-index:60;border-radius:0;aspect-ratio:auto}
.screen.full .bar{display:flex;position:absolute;top:0;left:0;right:0;height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;align-items:center;justify-content:space-between;background:#151515;color:#f5f5f1;z-index:4}
.screen.full .bar b{font:22px/1 var(--hand);font-weight:400}
.screen.full iframe,.screen.full .endcard{top:calc(48px + env(safe-area-inset-top));height:auto}
.close{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font:15px/1 var(--text);padding:10px 6px;cursor:pointer}
.close svg{width:20px;height:20px}
body.playing{overflow:hidden}

/* ---------- 404 ---------- */
.nf{align-items:center;text-align:center;padding:30px 0 60px}
.nfweb{width:min(240px,64vw);height:auto;color:var(--ink)}
.nfcode{font:15px/1 var(--mono);letter-spacing:.3em;color:var(--graphite);margin-top:6px}
.nf h1{margin-top:0}
.nfhome{display:inline-block;margin-top:8px;padding:12px 24px;border-radius:14px;background:var(--ink);color:var(--paper);text-decoration:none;font:24px/1 var(--hand);box-shadow:3px 4px 0 var(--moss)}