*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:100dvh;background:#0b1020;color:#eee;font-family:system-ui,sans-serif;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
#wrap{position:fixed;inset:0}   /* the whole screen, whatever iOS thinks 100vh is after a rotation (home-screen apps kept a status-bar gap) */
button,#dpad{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game{position:absolute;inset:0}
#game canvas{display:block}
.hidden{display:none!important}

/* the HUD: framed plates like the boss bar, the level name on a paper strip */
#hud{position:absolute;top:calc(.3rem + env(safe-area-inset-top));left:max(.4rem,env(safe-area-inset-left));right:max(.4rem,env(safe-area-inset-right));height:2.1rem;
  display:flex;align-items:center;gap:1rem;padding:0 3rem 0 .7rem;pointer-events:none;font:800 1.05rem/1 system-ui,sans-serif;color:#fff3dc;
  background:#3b1d38;border:2px solid #fff0cf;border-radius:.45rem;box-shadow:0 0 0 2px #2a0f12,0 4px 0 2px rgba(0,0,0,.35)}   /* one panel, framed like the boss bar */
#hud .chip{display:inline-flex;align-items:center;gap:.35rem;text-shadow:2px 2px 0 #1a0d22}
#hud .chip:empty{display:none}
#hud .chip img{height:1.25em;image-rendering:pixelated}
#hud .money b{color:#ffd84a}#hud .subs b{color:#ff9cc8}#hud .power b{color:#ffb070}
#hud .subIcon{display:inline-block;width:.74em;height:1.25em;background:url(assets/subs.png) 0 0/600% 100% no-repeat;image-rendering:pixelated}
#hud .lives{gap:.15rem;padding:0 .4rem}#hud .lives img{height:1.15em}#hud .lives img.empty{filter:grayscale(1) brightness(.35)}
#hud .lives .half{position:relative;display:inline-flex}#hud .lives .half img:last-child{position:absolute;left:0;top:0;clip-path:inset(0 50% 0 0)}
#hud .title{position:absolute;left:50%;transform:translateX(-50%) rotate(-.6deg);max-width:34vw;padding:.3rem 1.1rem .38rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(#fbf0d6,#e8d1a2);color:#3a1d12;font-size:.98rem;clip-path:polygon(0 8%,4% 0,22% 6%,41% 0,63% 5%,82% 0,100% 7%,98% 52%,100% 94%,79% 100%,58% 94%,37% 100%,18% 95%,0 100%,2% 48%);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
#hud .title:empty{display:none}
#hud .time{margin-left:auto}#hud .time svg{width:1em;height:1em;fill:#fff0cf;shape-rendering:crispEdges}#hud .time b{min-width:2.2em;text-align:right}
@media (max-width:720px){#hud .title{display:none}#hud{gap:.6rem;padding-right:2.7rem}}
#hud .test{color:#111;background:#7cf27c;padding:.15rem .4rem;border:2px solid #1a3a1a;border-radius:.2rem;font-size:.8rem;display:none}
body.test-mode #hud .test{display:inline}
#testHelp{display:none;color:#7cf27c}
body:not(.dev) #testBtn,body:not(.dev) [data-act=test],body:not(.dev) #sandboxBtn,body:not(.dev) #pickLevelBtn,body:not(.dev) #editorBtn,body:not(.dev) #demosBtn{display:none!important}
/* Полігон control panel */
#sbPanel{position:absolute;left:.5rem;top:2.6rem;z-index:5;max-width:min(24rem,70vw);font-size:.8rem}
#sbPanel #sbToggle{background:rgba(0,0,0,.55);color:#fff;border:1px solid #7cf27c;border-radius:.4rem;padding:.2rem .45rem;cursor:pointer;font-size:1rem}
#sbBody{margin-top:.3rem;background:rgba(5,10,30,.82);border:1px solid #7cf27c;border-radius:.5rem;padding:.5rem .6rem;display:flex;flex-direction:column;gap:.25rem;color:#cfe}
#sbPanel.collapsed #sbBody{display:none}
.sbRow{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.2rem}
.sbRow button{font:inherit;padding:.25rem .5rem;border:0;border-radius:.3rem;background:#1f2a4a;color:#fff;cursor:pointer}
.sbRow button:hover{background:#2c3d6b}.sbRow button.on{background:#2b7a3b}
body.test-mode #testHelp{display:block}
#bossbar{position:absolute;top:calc(3.1rem + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(40rem,88vw);text-align:left;pointer-events:none}
#bossName{font:700 2rem/1 Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#ffe7bf;padding-left:.5rem;
  text-shadow:3px 0 #3a1410,-3px 0 #3a1410,0 3px #3a1410,0 -3px #3a1410,3px 3px #3a1410,-3px 3px #3a1410,3px -3px #3a1410,-3px -3px #3a1410,0 6px 0 #1a0806}
#bossTitle{display:inline-block;margin:.25rem 0 .1rem .3rem;padding:.25rem 1rem .35rem;background:linear-gradient(#fbf0d6,#e8d1a2);color:#3a1d12;
  font:800 1rem/1.1 system-ui,sans-serif;clip-path:var(--torn);transform:rotate(-1deg);filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
#bossbar .bar{position:relative;margin-top:.45rem;height:1.85rem;padding:3px;background:#3b1d38;border:3px solid #fff0cf;border-radius:.45rem;
  box-shadow:0 0 0 3px #2a0f12,0 6px 0 3px rgba(0,0,0,.35)}
#bossFill{height:100%;width:100%;border-radius:.15rem;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px),linear-gradient(#ff6a4f,#e3392b 55%,#c52a22);
  box-shadow:inset -7px 0 0 #ff8a2a;transition:width .25s}
#bossTicks i{position:absolute;top:-9px;width:8px;height:15px;margin-left:-3px;background:#fff0cf;border:2px solid #2a0f12;box-sizing:border-box}
@media (pointer:coarse),(max-height:500px){#bossbar{top:2.2rem;width:min(30rem,70vw)}#bossName{font-size:1.25rem}#bossTitle{font-size:.75rem;padding:.15rem .7rem .25rem}#bossbar .bar{height:.9rem}}
#menuBtn{position:absolute;top:calc(.3rem + 2px + env(safe-area-inset-top));right:calc(max(.4rem,env(safe-area-inset-right)) + 2px);width:2.4rem;height:2.1rem;background:none;border:0;border-left:2px solid rgba(255,240,207,.3);border-radius:0 .3rem .3rem 0;color:#fff0cf;font:800 1.2rem/1 system-ui,sans-serif;cursor:pointer;text-shadow:2px 2px 0 #1a0d22}   /* the panel's right end */
#menuBtn:hover{background:#55284f}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;background:rgba(5,10,30,.78);text-align:center;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* title screen: layered art (sky, bank district, rooftop with the live hero sprite, logo) */
#overlay.title-screen{background:#0b1040 url(assets/title_bg.png) center bottom/cover no-repeat;image-rendering:pixelated;justify-content:flex-start;padding-top:3vh;gap:.7rem}
.title-screen > *{position:relative;z-index:1}
.title-screen .t-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.t-art img{image-rendering:pixelated}
.t-tower{position:absolute;right:0;bottom:0;height:min(66vh,50vw)}
.t-roof{position:absolute;left:0;bottom:0;height:min(40vh,30vw);aspect-ratio:1100/771}
.t-roof img{width:100%;height:100%;display:block}
.t-hero{position:absolute;left:24%;bottom:47.3%;height:105%;aspect-ratio:1;background:url(assets/idle.png) 0 0/600% 100% no-repeat;image-rendering:pixelated;animation:heroIdle 1.2s steps(6) infinite}
@keyframes heroIdle{to{background-position:120% 0}}
.t-logo{width:min(70vw,100vh);max-height:32vh;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.title-screen .tagline{font-size:.95rem;text-shadow:1px 1px 0 #000,0 0 6px #000}
.title-screen .keys:not(.controls){text-shadow:1px 1px 0 #000;background:rgba(10,12,35,.72);padding:.25rem .7rem;border-radius:.4rem;opacity:.9}
@media (max-aspect-ratio:3/4){                     /* upright phone */
  .t-logo{width:92vw;max-height:24vh}
  .t-tower{height:36vh}.t-roof{height:24vh}
  #overlay.title-screen{padding-top:5vh}
}
@media (max-height:520px){.t-logo{max-height:28vh}.title-screen .tagline{display:none}}
.screen h2{font-size:2rem;color:#ffd84a}
#card.finale{background:none;pointer-events:none;gap:1.2rem}   /* the end: words over the celebration */
#card.finale button{pointer-events:auto}
/* the Gallery: paper cards, a found one with its picture and story, the rest a dark shape */
#gallery{z-index:15;background:rgba(5,10,30,.94);justify-content:flex-start;padding:1.2rem 1rem;gap:.5rem}   /* the title and «Назад» stay, the cards scroll */
#galCards{flex:0 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,9.5rem);grid-auto-rows:1fr;gap:1.1rem;justify-content:center;width:100%;max-width:66rem;padding:.6rem .8rem 1rem}   /* every card the same size */
.gcard{width:9.5rem;box-sizing:border-box;padding:.6rem .6rem .7rem;background:#f1ddb2 var(--paper-tex);color:#1d1b1a;border:3px solid #2a2422;
  box-shadow:6px 6px 0 #2a2422;transform:rotate(var(--tilt,0deg));text-align:center}
.gcard img{display:block;width:100%;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.gcard h3{overflow-wrap:anywhere;hyphens:auto;margin:.4rem 0 .2rem;font:800 .92rem/1.2 system-ui,sans-serif;color:#b5321f}
.gcard p{margin:0;font-size:.76rem;line-height:1.3}
.gcard:focus{outline:4px solid #ffd84a;outline-offset:3px;transform:rotate(0) scale(1.04)}   /* the card chosen with the gamepad */
.gcard:not(.locked){cursor:zoom-in}.gcard:not(.locked):hover{transform:rotate(0) scale(1.04)}
#galZoom{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(5,10,30,.85);cursor:zoom-out}
.gz-card{width:min(30rem,88vw);max-height:92vh;display:flex;flex-direction:column;align-items:center;padding:1rem 1.2rem 1.1rem;background:#f1ddb2 var(--paper-tex);color:#1d1b1a;
  border:4px solid #2a2422;box-shadow:10px 10px 0 #2a2422;text-align:center;cursor:default}
.gz-card img{width:100%;max-height:58vh;object-fit:contain;image-rendering:pixelated}
.gz-card h3{margin:.6rem 0 .3rem;font:800 1.4rem/1.2 system-ui,sans-serif;color:#b5321f}
.gz-card p{margin:0;font-size:1rem;line-height:1.4}.gz-card small{margin-top:.7rem;opacity:.55;font-size:.72rem}
.gcard.locked{background:#cdb994 var(--paper-tex)}
.gcard.locked .qm{width:100%;aspect-ratio:1;border:2px dashed #a8936f;box-sizing:border-box}   /* a card not found yet: an empty frame, no silhouette that gives it away */
.gcard.locked h3{color:#5a4a3a}
/* the statistics screen: what was collected, who was defeated, the score */
#card .tally{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.5rem;max-width:min(58rem,94vw);max-height:46vh;overflow:auto;
  padding:.8rem 1.4rem;border-radius:.6rem;background:rgba(8,6,20,.66);color:#fff;font:600 1rem/1.35 system-ui,sans-serif;text-align:left}
#card .tally h3{margin:0 0 .3rem;color:#ffd84a;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}
#card .tally ul{list-style:none;margin:0;padding:0;columns:2;column-gap:1.6rem}
#card .tally li{display:flex;justify-content:space-between;gap:1rem;break-inside:avoid}
#card .tally li b,#card .tally-sum b{color:#ffd84a}
#card .tally .none{margin:0;opacity:.7;font-size:inherit}
#card .tally li.wide{display:block;column-span:all;color:#ffcfc4}
#card .cert{display:block;max-width:min(44rem,88vw);max-height:58vh;margin:0 auto;border:3px solid #2a2422;box-shadow:6px 6px 0 #2a2422}
#card .tally-sum{color:#fff;font:600 1rem/1.35 system-ui,sans-serif;text-align:center;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.9)}
#card .tally-sum .score{margin-top:.1rem;font:700 clamp(1.4rem,3vw,2.1rem)/1.1 Oswald,Impact,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.03em}
@media (max-height:520px){#card .tally{font-size:.8rem;line-height:1.25;max-height:52vh;padding:.4rem .9rem}#card .tally-sum{font-size:.8rem}#card .tally-sum .score{font-size:1.3rem}}
#card.finale h2{font:700 clamp(3rem,10vw,7.5rem)/1 Oswald,Impact,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#ffd84a;
  text-shadow:0 5px 0 #7a2412,0 0 30px rgba(0,0,0,.7)}
#card.finale #cardText{max-width:50rem;font:700 clamp(1.1rem,2.6vw,2rem)/1.35 system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.85)}
.screen p{max-width:36rem;line-height:1.5}
#cardText{max-width:min(58rem,94vw);line-height:1.5}   /* holds the stats, the certificate, lists: its own width, not a paragraph's */
.screen .keys{opacity:.75;font-size:.85rem}
:root{--paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* menu buttons as stamped paper slips (owner's pick, design B): a torn cream slip on a dark offset shadow, each tilted a
   little; the main one red like «Вперед!». The face and the shadow are ::after / ::before under the label; the tears
   (--torn) and the tilt (--tilt) are set per button by ui.js. */
.screen button,#intro button{position:relative;isolation:isolate;font:800 1.08rem/1.2 system-ui,sans-serif;min-width:min(16rem,80vw);padding:.65rem 1.3rem;
  border:0;border-radius:0;background:none;color:#1d1b1a;cursor:pointer;box-shadow:none;transform:rotate(var(--tilt,0deg))}
.screen button::before,.screen button::after,#intro button::before,#intro button::after{content:'';position:absolute;inset:0;z-index:-1;clip-path:var(--torn,none)}
.screen button::before,#intro button::before{background:#2a2422;transform:translate(6px,6px)}
.screen button::after,#intro button::after{background:#f1ddb2 var(--paper-tex)}
.screen button.primary,#intro button.primary{color:#f6e6c4;font-size:1.25rem}
.screen button.primary::after,#intro button.primary::after{background:#d63a26 radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.5px) 0 0/6px 6px}
.screen button:hover::after,#intro button:hover::after{filter:brightness(1.07)}
.screen button:active,#intro button:active{transform:rotate(var(--tilt,0deg)) translate(3px,3px)}
.screen button:active::before,#intro button:active::before{transform:translate(3px,3px)}
.screen button:disabled{opacity:.45;cursor:default}
.screen button:focus-visible,#intro button:focus-visible{outline:2px dashed #ffd84a;outline-offset:6px}
/* v1.1: with the gamepad in hand the chosen button always shows (the browser marks focus-visible only after keys) */
body.pad-nav .screen button:focus,body.pad-nav #intro button:focus{outline:2px dashed #ffd84a;outline-offset:6px}
#story .story-go::before,#story .story-go::after{display:none}   /* the story card's «Вперед!» has its own stamp */
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.9rem}
/* the pause menu's «Підказки»: the hints shown so far, each a paper strip like the hint itself */
#menu:has(#hintLog:not(.hidden)) .controls{display:none}   /* the list takes the whole pause screen */
#hintList{list-style:none;margin:0;padding:0 .4rem;display:flex;flex-direction:column;gap:.5rem;width:min(44rem,92vw);max-height:min(58vh,30rem);overflow-y:auto}
#hintList .hl{display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;background:linear-gradient(#f6e7c6,#ecd7ad);color:#2a1410;font:700 1rem/1.3 system-ui,sans-serif;text-align:left}
#hintList .hl .hk{display:flex;align-items:center;gap:.3rem;padding-right:.8rem;border-right:3px solid #c8372d;white-space:nowrap;color:#5a2a1a}
#hintList .hl .hm{flex:1}
#hintList .none{color:#f1ddb2;opacity:.8}

#levelPick{display:flex;flex-direction:column;gap:.7rem}
#levelPick button{text-align:left;min-width:min(17rem,80vw)}
#levelPick button .n{display:inline-block;width:1.6rem;color:#d63a26;font-weight:800}
@media (max-height:520px){#levelPick{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}#levelPick button{min-width:min(13rem,40vw)}}
#cardButtons{display:flex;flex-direction:column;gap:.9rem}

/* touch controls: only on touch screens and only while playing */
#touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;padding:0 max(1rem,env(safe-area-inset-right)) max(.8rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));pointer-events:none}
@media (pointer:coarse){body.playing #touch{display:flex}}
#dpad{pointer-events:auto;touch-action:none;width:10.5rem;height:5rem;border-radius:2.5rem;border:2px solid rgba(255,255,255,.45);background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:space-around;color:#fff;font-size:1.7rem;user-select:none}
#dpad span{opacity:.55;transition:opacity .08s}
#dpad.left span:first-child,#dpad.right span:last-child{opacity:1;text-shadow:0 0 8px #fff}
#touch .pad{display:flex;gap:.7rem;align-items:flex-end;pointer-events:auto}
#touch .pad button{touch-action:none;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:rgba(0,0,0,.3);color:#fff;user-select:none}
#jumpBtn{width:5.4rem;height:5.4rem;font-size:2rem}
#jumpBtn.on{background:rgba(255,255,255,.3)}
#rewindBtn{width:3.4rem;height:3.4rem;font-size:1.4rem;display:none}
#shoutBtn{width:4.4rem;height:4.4rem;font-size:1.8rem;display:none;background:rgba(224,58,47,.55)!important}
body.has-power #shoutBtn{display:block}
body.test-mode #rewindBtn{display:block}
/* phones held upright: a square game view under the HUD, big controls below it (handheld-console layout) */
@media (orientation:portrait) and (pointer:coarse){
  #game{top:calc(2.6rem + env(safe-area-inset-top));bottom:auto;height:min(100vw,calc(100dvh - 15rem))}
  #hud{top:calc(.15rem + env(safe-area-inset-top));height:1.9rem}#menuBtn{top:calc(.15rem + 2px + env(safe-area-inset-top));height:1.9rem}
  #touch{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
  #dpad{width:11.5rem;height:5.6rem;font-size:2rem}
  #jumpBtn{width:6rem;height:6rem}
}
/* short landscape screens (phones): compact menus, no keyboard hints */
@media (pointer:coarse){.screen .keys:not(#testHelp){display:none}#testHelp{font-size:.8rem}}
@media (max-height:520px){
  .screen{gap:.45rem;justify-content:flex-start;overflow-y:auto;padding-top:max(.7rem,env(safe-area-inset-top))}
  .screen h2{font-size:1.5rem}.screen p{font-size:.9rem;line-height:1.35}
  .screen button{padding:.45rem 1rem;font-size:.95rem}.screen button.primary{font-size:1.05rem}
  #hud{height:1.8rem;font-size:.85rem;gap:.6rem}#menuBtn{height:1.8rem;width:2.1rem}#hud .title{font-size:.8rem;padding:.22rem .8rem .3rem}
}

/* level results, stall, intro, pause sliders */
.stars{list-style:none;display:flex;flex-direction:column;gap:.35rem;text-align:left;margin:0 auto;font-size:1.05rem}
.stars li{opacity:.75}.stars li.ok{opacity:1}
.stars .star{display:inline-block;width:1.6rem;color:#ffd84a;font-size:1.25rem}
#card .totals{margin-top:.5rem}#card .best{opacity:.75;font-size:.9rem}
#levelPick .rec{float:right;margin-left:1rem;color:#b5321f;font-size:.9rem}
#levelPick button.primary .n,#levelPick button.primary .rec{color:#fff}   /* readable on the red slip */
#levelPick.withCps{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.6rem}   /* test mode: checkpoints beside each level */
#levelPick .cpRow{display:flex;flex-wrap:wrap;gap:.35rem}
#levelPick .cpRow button{min-width:0;padding:.2rem .55rem;font-size:.78rem}
#options .vol{display:flex;align-items:center;gap:.8rem;width:min(16rem,80vw);justify-content:space-between;
  padding:.45rem .9rem;background:rgba(10,14,32,.78);border-radius:.4rem;box-shadow:0 3px 0 rgba(0,0,0,.35);text-shadow:1px 1px 0 #000}
#options .vol input{flex:1;min-width:0;accent-color:#e03a2f}
/* on/off switch inside a button (Повний екран): grey knob left = off, red track + knob right = on */
.screen button.toggle{display:flex;align-items:center;justify-content:center;gap:.8rem}
.toggle .sw{position:relative;flex:none;width:2.4em;height:1.3em;border-radius:1em;background:#0d1328;box-shadow:inset 0 0 0 2px #3a4a78;transition:background .15s}
.toggle .sw::after{content:'';position:absolute;top:.2em;left:.2em;width:.9em;height:.9em;border-radius:50%;background:#7c87a8;transition:left .15s,background .15s}
.toggle.on .sw{background:#e03a2f;box-shadow:inset 0 0 0 2px #8c1f17}
.toggle.on .sw::after{left:1.3em;background:#fff}
#options .vol label{width:4.2em;text-align:left}   /* equal label widths: both sliders start and end at the same place */
#options button.danger{color:#b5321f}
#options .pad-name{margin:0;font:600 .85rem system-ui,sans-serif;color:#f1ddb2;opacity:.8}#options .pad-name:empty{display:none}
#options button.danger.armed{color:#fff}#options button.danger.armed::after{background:#e03a2f}   /* the second press wipes the saved game: a red slip (the slip is ::after) */
#overlay:has(#options:not(.hidden)) .controls{display:none}   /* title-screen options: the controls panel would not fit under them */
#intro{position:absolute;inset:0;z-index:20;background:#0b1020;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1rem}
#introImg{max-width:min(96vw,150vh);max-height:68vh;border:3px solid #000;border-radius:.4rem;image-rendering:pixelated;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.4)}
#introText{max-width:40rem;text-align:center;font-size:1.15rem;line-height:1.45;text-shadow:1px 1px 0 #000;white-space:pre-line}
.intro-btns{display:flex;gap:.8rem}
@media (max-height:520px){#introImg{max-height:58vh}#introText{font-size:.95rem}}

/* hint line: bottom centre, above the touch controls */
/* hints: a torn cream paper strip like the story card — key caps on the left behind a red bar, bold words, a red line */
#hint{position:absolute;left:50%;bottom:1.4rem;transform:translate(-50%,.6rem);max-width:min(72rem,94vw);padding:.95rem 2rem 1.3rem;
  display:flex;align-items:center;gap:1rem;background:linear-gradient(#f6e7c6,#ecd7ad);color:#2a1410;clip-path:var(--torn);
  font:800 clamp(1.05rem,2.2vw,1.65rem)/1.25 system-ui,sans-serif;text-align:left;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;z-index:4}
#hint::after{content:'';position:absolute;left:1.6rem;right:1.6rem;bottom:.5rem;height:2px;background:#c8372d}
#hint .hk{display:flex;align-items:center;gap:.35rem;padding-right:1rem;border-right:3px solid #c8372d;white-space:nowrap;color:#5a2a1a;font-weight:700}
#hint .hm{flex:1}
#hint kbd,#hintList kbd,.screen .controls kbd{display:inline-block;min-width:1.7em;padding:.08em .45em;margin:0 .06em;border:2px solid #3a1d12;border-radius:.35em;
  background:linear-gradient(#fff8e6,#efdcb2);box-shadow:0 3px 0 #3a1d12;font:800 .9em/1.25 system-ui,sans-serif;color:#2a1410;text-align:center;vertical-align:.08em}
#hint kbd.arr svg,#hintList kbd.arr svg,.screen .controls kbd.arr svg{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;fill:currentColor;shape-rendering:crispEdges}   /* drawn arrows: big and centred */
#hint kbd.pad,#hintList kbd.pad,.screen .controls kbd.pad{min-width:0;width:1.6em;height:1.6em;padding:0;border-radius:50%;line-height:1.35em;color:#fff;text-shadow:0 1px 0 #0006}   /* gamepad buttons: round, in the Xbox colours */
#hint kbd.pad-a,#hintList kbd.pad-a,.screen .controls kbd.pad-a{background:radial-gradient(circle at 40% 35%,#7fd06a,#2f8a2a)}
#hint kbd.pad-b,#hintList kbd.pad-b,.screen .controls kbd.pad-b{background:radial-gradient(circle at 40% 35%,#f07a6a,#b8261e)}
#hint kbd.pad-x,#hintList kbd.pad-x,.screen .controls kbd.pad-x{background:radial-gradient(circle at 40% 35%,#7fb0f5,#2560c0)}
#hint kbd.pad-y,#hintList kbd.pad-y,.screen .controls kbd.pad-y{background:radial-gradient(circle at 40% 35%,#ffd86a,#c99510)}
#hint kbd.pad-m,#hintList kbd.pad-m,.screen .controls kbd.pad-m{width:auto;padding:0 .5em;border-radius:.8em;background:linear-gradient(#5a5a5a,#2c2c2c)}
#hint.on{opacity:1;transform:translate(-50%,0)}
@media (pointer:coarse){#hint{bottom:auto;top:calc(3rem + env(safe-area-inset-top));font-size:1.05rem;padding:.65rem 1.3rem .95rem}
  body:has(#bossbar:not(.hidden)) #hint{top:calc(7.2rem + env(safe-area-inset-top))}}   /* a boss fight: under the boss bar, not over it */
@media (max-width:640px){#hint .hk{white-space:normal;flex-wrap:wrap}}   /* narrow screens: the key caps may take two lines */
body.paused #hint{display:none}

/* level editor panel (owner only) */
#editor{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;pointer-events:none;font-size:.8rem;color:#dfe8ff}
#editor .ed-top,#editor .ed-side{pointer-events:auto;background:rgba(8,12,30,.93)}
.ed-top{border-bottom:1px solid #2c3d6b;padding:.35rem .5rem .2rem}
.ed-bar{display:flex;flex-wrap:wrap;gap:.35rem .7rem;align-items:center}
.ed-grp{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}.ed-grp i{font-style:normal;opacity:.6;margin:0 .1rem 0 .2rem}
.ed-right{margin-left:auto}.ed-meta{opacity:.75;white-space:nowrap}
.ed-title{font-size:1rem}
.ed-bar select{min-width:0;max-width:9rem;font:inherit;background:#1f2a4a;color:#fff;border:1px solid #3a4c80;border-radius:.3rem;padding:.15rem .3rem}
#login{z-index:20;background:rgba(5,10,30,.94)}#loginPw{font:inherit;font-size:1.1rem;padding:.5rem .7rem;border-radius:.4rem;border:2px solid #2a2422;width:min(16rem,80vw)}#loginErr{color:#ff8a7a;min-height:1.2em;margin:.2rem 0}
#edStatus{color:#7cf27c;min-height:1em;margin:.2rem 0 0}
#edNewer{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.25rem 0 .1rem;padding:.35rem .5rem;border-radius:.4rem;background:#3b2a12;color:#ffd84a}#edNewer span{flex:1 1 20rem}
.ed-main{flex:1;min-height:0;display:flex;justify-content:flex-end}
.ed-side{width:min(19rem,80vw);overflow-y:auto;border-left:1px solid #2c3d6b;padding:.5rem .6rem;display:flex;flex-direction:column;gap:.45rem}
#editor.collapsed .ed-side{display:none}
.ed-group summary{cursor:pointer;color:#9fb4e8;font-weight:600;margin:.1rem 0 .3rem;list-style:none;user-select:none}
.ed-group summary::before{content:'▸';display:inline-block;width:1em;transition:transform .15s}.ed-group[open] summary::before{transform:rotate(90deg)}
.ed-group summary small{opacity:.6;font-weight:400}
.ed-row{display:flex;flex-wrap:wrap;gap:.3rem}
#editor button{font:inherit;padding:.28rem .5rem;border:0;border-radius:.3rem;background:#1f2a4a;color:#fff;cursor:pointer}
#editor [data-tool]{display:inline-flex;align-items:center;gap:.3rem}
#editor .ed-ic{height:1.5em;width:auto;max-width:2.2em;object-fit:contain;image-rendering:pixelated;flex:none;font-weight:800;text-align:center}
#editor button:hover{background:#2c3d6b}#editor button.on{background:#2b7a3b;box-shadow:0 0 0 2px #7cf27c inset}
#editor .ed-count{min-width:1.3em;padding:0 .3em;border-radius:.6em;background:#2c3d6b;color:#ffd84a;font-size:.72em;font-weight:700;text-align:center}
#editor .ed-where{opacity:.7;font-size:.72em;margin-left:.2rem;color:#9fe0a8}#editor .ed-where.none{color:#9aa3b5}#editor .ed-where.twice{color:#ff8a7a;opacity:1}
#editor .ed-chk{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;margin-right:.3rem}
#editor .ed-layers{margin-bottom:.35rem;padding-bottom:.35rem;border-bottom:1px dashed #2c3d6b}
#editor .ed-test{background:#8c1f17}#editor .ed-test.on{background:#e03a2f}
#edProps{display:grid;grid-template-columns:1fr 5rem;gap:.25rem .4rem;align-items:center;background:#111a36;border-radius:.4rem;padding:.4rem}
#edProps:empty{display:none}#edProps b,#edProps small{grid-column:1/-1}
#edProps input{font:inherit;width:100%;background:#1f2a4a;color:#fff;border:1px solid #3a4c80;border-radius:.25rem;padding:.15rem .3rem}
#edLevelSet{display:grid;grid-template-columns:auto 1fr;gap:.3rem .5rem;align-items:center}
#edLevelSet input,#edLevelSet select{font:inherit;background:#1f2a4a;color:#fff;border:1px solid #3a4c80;border-radius:.3rem;padding:.2rem .35rem;min-width:0}
.ed-help p{opacity:.65;line-height:1.4;margin:0}
body.editing #hud,body.editing #menuBtn{display:none!important}
#overlay.loading .keys{display:none!important}   /* the hints wait for the buttons: nothing jumps down while loading */
/* the controls panel (title screen, pause menu): pixel style — golden pixel key caps, a pixel font, the moves on the
   left and the menu keys on the right behind a red bar */
.screen .controls{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:1.1rem;padding:.4rem 1rem;
  font:800 1.15rem/1.2 system-ui,sans-serif;opacity:1;color:#fff3dc;
  text-shadow:2px 0 #1a0d22,-2px 0 #1a0d22,0 2px #1a0d22,0 -2px #1a0d22,2px 2px #1a0d22,-2px 2px #1a0d22,2px -2px #1a0d22,-2px -2px #1a0d22,0 4px 0 rgba(0,0,0,.5)}
.screen .controls .cgroup{display:grid;grid-template-columns:auto auto;gap:.55rem 1rem;align-items:center}
.screen .controls .cgroup + .cgroup{border-left:4px solid #d0382b;padding-left:1.6rem;box-shadow:-2px 0 0 #1a0d22}
.screen .controls .ctl{display:contents}
.screen .controls .caps{display:inline-flex;align-items:center;justify-content:flex-end;gap:.32rem}
.screen .controls b{font-weight:800;text-align:left}
.screen .controls i{font-style:normal}
.screen .controls .note{font-weight:700;opacity:.8;font-size:.85em}
.screen .controls kbd{text-shadow:none}   /* the key caps themselves: the same as in the hints (#hint kbd) */
@media (max-width:640px){.screen .controls{flex-direction:column;gap:.5rem}.screen .controls .cgroup + .cgroup{border-left:0;border-top:3px solid #d0382b;padding:.5rem 0 0}}
@media (max-height:820px){   /* short screens (laptops too): four menu buttons and all seven control rows still fit */
  .screen .controls{font-size:1rem;margin-top:.4rem;padding:.5rem 1.1rem}.screen .controls .cgroup{gap:.25rem .7rem}
  #overlay .t-logo{max-height:19vh}#overlay.title-screen{gap:.45rem;padding-top:2vh}
  #overlay .menu-col{gap:.45rem}#overlay .menu-col button{padding:.42rem 1.2rem}
}
@media (max-height:820px) and (min-width:700px){   /* the owner's title menu (eleven buttons, with Досягнення) in two columns: it fits */
  body.dev #overlay #mainMenu:not(.hidden){display:grid;grid-template-columns:repeat(2,auto);justify-content:center}
}
#menu.in-prologue [data-act=checkpoint],#menu.in-prologue [data-act=restart],#menu.in-edtest [data-act=checkpoint],#menu.in-edtest [data-act=restart]{display:none}   /* the prologue
   has no checkpoints or level to restart; an editor test restarts from the editor (they would load the published level) */
/* pause menu: buttons on the left, the controls in a column beside them (both fit on short screens) */
@media (min-width:700px){
  #menu{display:grid;grid-template-columns:auto auto;column-gap:3rem;row-gap:.8rem;align-content:center;justify-content:center;justify-items:center}
  #menu > *{grid-column:1;grid-row:2}
  #menu > h2{grid-column:1 / -1;grid-row:1}
  #menu .controls.in-menu{grid-column:2;align-self:center;margin-top:0}
}
@media (min-width:700px) and (max-height:700px){   /* a short screen: the buttons (ten, with Досягнення) in two columns, the controls under them */
  #menu{grid-template-columns:auto;row-gap:.6rem}
  #menu #pauseMain{display:grid;grid-template-columns:repeat(2,auto);gap:.45rem .7rem}#menu #pauseMain button{padding:.42rem 1.2rem}
  #menu .controls.in-menu{grid-column:1;grid-row:3}
  #cardButtons:has(> :nth-child(5)){display:grid;grid-template-columns:repeat(2,auto);gap:.45rem .7rem;justify-content:center}   /* a level's results (six buttons): two columns */
  #cardButtons:has(> :nth-child(5)) button{padding:.42rem 1.2rem}
}

/* Oswald 700 (SIL Open Font License), the level-card titles; self-hosted: cyrillic + latin */
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/oswald-700-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/oswald-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/oswald-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* the level's story before play: a torn poster on the frozen level — cream paper with red halftone corners, a black
   strip with the level's white pixel icon, the name in Oswald with a red brush stroke, a stamped «Вперед! →».
   The torn edges are clip-paths made in ui.js (the same tears every time per level). */
#story{background:rgba(5,10,30,.55)}
#story .story-card{filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));width:min(58rem,94vw)}
#story .story-paper{position:relative;display:flex;min-height:clamp(15rem,52vh,22rem);color:#1d1b1a;text-align:left;
  background-color:#f1ddb2;
  background-image:var(--paper-tex)}
#story .story-paper::before,#story .story-paper::after{content:'';position:absolute;pointer-events:none;width:42%;height:60%;
  background:radial-gradient(circle,#d8452f 1.3px,transparent 1.8px) 0 0/7px 7px}
#story .story-paper::before{top:0;right:0;-webkit-mask-image:radial-gradient(ellipse at 100% 0,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 100% 0,#000 10%,transparent 70%)}
#story .story-paper::after{bottom:0;left:15%;width:40%;height:40%;-webkit-mask-image:radial-gradient(ellipse at 30% 100%,#000 5%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 100%,#000 5%,transparent 70%)}
#story .story-strip{flex:none;width:clamp(5.5rem,11vw,8rem);display:flex;align-items:center;justify-content:center;margin:1.1rem 0 1.1rem 1.1rem;
  background:#191716 radial-gradient(circle,rgba(255,255,255,.18) .8px,transparent 1.2px) 0 0/9px 11px}
#story .story-strip svg{width:62%;height:auto;max-height:84%}
#story .story-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:1.4rem 2rem 1.6rem 1.8rem;z-index:1}
#story h2{margin:0;font:700 clamp(2.6rem,9vh,4.6rem)/1 'Oswald',Impact,'Arial Narrow',sans-serif;color:#1d1b1a;letter-spacing:.5px}
#story .story-rule{width:min(24rem,70%);height:.6rem;margin:.6rem 0 1rem;background:#d63a26;transform:rotate(-.6deg)}
#story p{margin:0;max-width:36rem;font:800 clamp(1.2rem,4.2vh,1.9rem)/1.32 system-ui,sans-serif;color:#1d1b1a;text-shadow:none}
#story .story-plus{position:absolute;left:1.8rem;bottom:1.2rem;font:900 1.6rem/1 system-ui;color:#1d1b1a}
#story .story-go{position:relative;align-self:flex-end;margin-top:auto;min-width:0;padding:0;background:none;box-shadow:none;border:0;transform:rotate(-1.2deg)}
#story .story-go .go-face{position:relative;display:flex;align-items:center;gap:.7rem;padding:.55rem 1.4rem .6rem;background:#d63a26;color:#f6e6c4;
  font:800 clamp(1.3rem,4vh,2rem)/1 system-ui,sans-serif;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:6px 6px}
#story .story-go .go-face svg{height:.95em}
#story .story-go .go-shadow{position:absolute;inset:0;transform:translate(7px,7px);background:#2a2422}
#story .story-go:hover .go-face{background-color:#e44a35}
#story .story-go:active{transform:rotate(-1.2deg) translate(4px,4px)}
#story .story-go:active .go-shadow{transform:translate(3px,3px)}
@media (max-height:520px){#story .story-paper{min-height:0}#story .story-body{padding:1rem 1.4rem 1.1rem 1.3rem}#story .story-plus{display:none}}

body:not(.test-mode) [data-act=cps]{display:none}   /* the checkpoint picker is a test-mode tool (where it cannot work: main.js pause()) */

/* v1.1: the controls panel speaks the device in hand: the gamepad's set while it is used (body.pad-nav, main.js) */
.screen .controls .cset{display:contents}
.screen .controls .cset.pad,body.pad-nav .screen .controls .cset.desk{display:none}
body.pad-nav .screen .controls .cset.pad{display:contents}

/* the version, small, in a corner of the title screen */
.title-screen .version{position:absolute;right:max(.8rem,env(safe-area-inset-right));bottom:max(.5rem,env(safe-area-inset-bottom));margin:0;font:600 .72rem/1 system-ui,sans-serif;color:#fff;opacity:.55;text-shadow:1px 1px 0 #000;pointer-events:none}
/* Налаштування → Клавіші: the panel in place of the options (the controls panel steps aside as for the options) */
#overlay:has(#keysPanel:not(.hidden)) .controls,#menu:has(#keysPanel:not(.hidden)) .controls{display:none}
#keysPanel button kbd{display:inline-block;min-width:1.6em;padding:0 .4em;border:2px solid #3a1d12;border-radius:.3em;background:#fff8e6;color:#2a1410;font:800 .85em/1.3 system-ui,sans-serif;box-shadow:0 2px 0 #3a1d12}

/* PlayStation's buttons: dark caps with the coloured shapes; Nintendo's: plain dark letters */
#hint kbd.pad-ps-x,#hint kbd.pad-ps-o,#hint kbd.pad-ps-s,#hint kbd.pad-ps-t,#hintList kbd.pad-ps-x,#hintList kbd.pad-ps-o,#hintList kbd.pad-ps-s,#hintList kbd.pad-ps-t,
.screen .controls kbd.pad-ps-x,.screen .controls kbd.pad-ps-o,.screen .controls kbd.pad-ps-s,.screen .controls kbd.pad-ps-t{background:radial-gradient(circle at 40% 35%,#4a4f5c,#1c1f26);text-shadow:none;font-size:1em}
#hint kbd.pad-ps-x,#hintList kbd.pad-ps-x,.screen .controls kbd.pad-ps-x{color:#8fb4ff}
#hint kbd.pad-ps-o,#hintList kbd.pad-ps-o,.screen .controls kbd.pad-ps-o{color:#ff7a7a}
#hint kbd.pad-ps-s,#hintList kbd.pad-ps-s,.screen .controls kbd.pad-ps-s{color:#ff9ad8}
#hint kbd.pad-ps-t,#hintList kbd.pad-ps-t,.screen .controls kbd.pad-ps-t{color:#7fe0b0}
#hint kbd.pad-sw,#hintList kbd.pad-sw,.screen .controls kbd.pad-sw{background:radial-gradient(circle at 40% 35%,#5a5a5a,#262626)}

/* the load bar on the title screen, where the menu comes (gone with the «loading» state) */
#loadBar{display:none;position:relative;width:min(18rem,80vw);height:1.6rem;margin:1.2rem auto 0;border:2px solid #3a1d12;border-radius:.4rem;background:rgba(10,12,35,.72);overflow:hidden}
#overlay.loading #loadBar{display:block}
#loadBar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#e8543f,#b8261e);transition:width .15s}
#loadBar span{position:relative;display:block;text-align:center;font:700 .85rem/1.6rem system-ui,sans-serif;color:#fff;text-shadow:1px 1px 0 #000}

/* the achievements (1.3): a card is [picture] title / what was done — on its screen, and sliding in when earned */
#achievements{z-index:15;background:rgba(5,10,30,.94);justify-content:flex-start;padding:1.2rem 1rem;gap:.6rem;overflow-y:auto}
#achievements h2{margin:.2rem 0 0}
.ach-count{margin:0;color:#f1ddb2;font-weight:700}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.9rem;width:min(64rem,100%);padding:.4rem}
.ach-card{display:flex;align-items:flex-start;gap:.9rem;padding:.7rem .9rem .7rem .7rem;background:#f1ddb2 var(--paper-tex);color:#1d1b1a;border:3px solid #2a2422;border-radius:.3rem;
  box-shadow:0 4px 0 #2a2422;text-align:left}
.ach-card img{flex:none;width:5.5rem;height:5.5rem;border:3px solid #2a2422;border-radius:.25rem;background:#1c1a24}
.ach-text{min-width:0;padding-top:.15rem}   /* every title on the same line as the top of its picture */
.ach-text b{display:block;font:800 1.05rem/1.2 system-ui,sans-serif;color:#b5321f}
.ach-text p{margin:.25rem 0 0;font-size:.85rem;line-height:1.3}
.ach-text time{display:block;margin-top:.3rem;font-size:.72rem;color:#6a5a4a}
.ach-card.locked{background:#cbbd9c;filter:saturate(.3)}
.ach-card.locked .ach-text b{color:#5a4a3a;letter-spacing:.2em}
.ach-toast{position:fixed;left:50%;top:max(.8rem,env(safe-area-inset-top));z-index:40;width:min(26rem,calc(100vw - 2rem));transform:translate(-50%,-140%);
  transition:transform .35s ease;pointer-events:none}
.ach-toast.on{transform:translate(-50%,0)}
.ach-toast .ach-kicker{display:inline-block;margin:0 0 -.2rem .6rem;padding:.15rem .6rem;background:#c8372d;color:#fff;font:800 .72rem/1.2 system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;border-radius:.2rem .2rem 0 0;position:relative;z-index:1}
body:has(#achievements:not(.hidden)) .controls{display:none}   /* the controls panel steps aside, as for the Gallery */