:root{color-scheme:dark;--paper:#f2ecdf;--muted:#858187;--orange:#ff6535;--ink:#111014} *{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;min-width:320px}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 20%,#46291e22,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}#arcade{max-width:1500px;margin:auto;padding:0 5.2vw}.masthead{height:99px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:900;letter-spacing:-1px}.brand-mark{font-size:40px;font-style:italic;letter-spacing:-6px}.brand-mark span{color:var(--orange);font-size:24px}.brand-small{display:block;font-size:7px;font-weight:500;letter-spacing:2.7px;margin-top:3px}.edition{font:10px monospace;letter-spacing:1px;color:#b4aead;display:flex;gap:12px;align-items:center}.edition i{height:6px;width:6px;background:var(--orange);border-radius:50%;box-shadow:0 0 12px #ff653566}.edition span{border-left:1px solid #413837;padding-left:12px;color:#797477}.utilities{display:flex;gap:10px}.utilities button{color:#b7b2b0;border:1px solid #383135;background:transparent;height:32px;padding:0 12px;font:9px monospace;letter-spacing:1px}.utilities button:last-child{font-size:22px;padding:0 9px}.game-shell{border:1px solid #3a3438;box-shadow:0 35px 90px #0005}.topline{height:31px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:#19161a;font:8px monospace;letter-spacing:1.6px;color:#8f8587}#stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#141520;isolation:isolate}#game{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none;touch-action:none}#stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;opacity:.12;background:repeating-linear-gradient(transparent 0px,transparent 3px,#000 4px);box-shadow:inset 0 0 100px #0006}.overlay{position:absolute;inset:0;z-index:10}#title-screen{background:linear-gradient(90deg,#14151de8 0%,#14151dd9 28%,#15151c42 57%,transparent 77%)}.title-copy{position:absolute;left:6%;top:9%}.eyebrow{font:9px monospace;letter-spacing:2px;color:#c5b9ad;display:flex;align-items:center;gap:9px}.eyebrow span{height:1px;width:24px;background:var(--orange)}h1{position:relative;font-size:clamp(58px,8.5vw,127px);line-height:.79;letter-spacing:-.015em;margin:25px 0 17px;font-weight:1000;font-family:Impact,'Arial Black',sans-serif;transform:skew(-5deg);text-shadow:4px 5px 0 #0004}h1 em{color:var(--orange);font-style:normal}h1 .title-dot{position:absolute;font:16px Arial;letter-spacing:0;top:-3px;right:-22px}.subtitle{font-size:clamp(8px,1.05vw,14px);font-weight:600;letter-spacing:3px;color:#e3c3ab}.title-copy p{font-size:clamp(10px,1vw,14px);line-height:1.7;color:#bbb0ac;margin:20px 0}.primary{background:var(--orange);color:#1b1211;border:0;font-size:11px;font-weight:900;letter-spacing:1px;padding:19px 23px;min-width:230px;display:flex;justify-content:space-between;gap:40px;box-shadow:4px 4px 0 #0004;transition:background .15s,transform .15s}.primary:hover{background:#ff8957;transform:translateY(-2px)}.primary span:last-child{font-size:16px;line-height:12px}.start-note{margin-top:14px;font:8px monospace;letter-spacing:1px;color:#a8978d}.start-note span{color:#70554a;padding:0 7px}.hero-tag{position:absolute;right:7%;bottom:16%;display:flex;flex-direction:column;transform:rotate(-3deg);text-shadow:2px 3px 0 #0008}.hero-tag>span{font:8px monospace;letter-spacing:2px;color:#d6c6b2}.hero-tag>b{font:italic 44px Impact,sans-serif;letter-spacing:1px;color:#fff0d5}.hero-tag>small{font:7px monospace;letter-spacing:1px;background:var(--orange);color:#261712;padding:6px 9px;text-shadow:none}.title-bottom{position:absolute;bottom:5%;left:6%;right:5%;display:flex;justify-content:space-between;font:7px monospace;letter-spacing:1.3px;color:#a5998c}.controls{height:62px;background:#1a171b;display:flex;justify-content:space-evenly;align-items:center;gap:8px}.controls>div{display:flex;align-items:center;gap:8px}.controls span{font:8px monospace;letter-spacing:.8px;color:#9c9294}kbd{border:1px solid #494047;border-bottom:3px solid #494047;border-radius:3px;color:#e1d6cf;padding:6px 8px;font:9px monospace}footer{height:67px;display:flex;align-items:center;justify-content:space-between;font:8px monospace;letter-spacing:1px;color:#736b70}footer b{color:var(--orange);margin-right:9px}footer i{font-style:normal;padding:0 13px;color:#55424a}.footer-credit{color:#a18d80}.hidden{display:none!important}#hud{position:absolute;z-index:4;left:3%;right:3%;top:5%;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.player-panel{display:flex;gap:9px;width:32%}.portrait{width:48px;height:48px;border:1px solid #bc826966;flex-shrink:0;background:#20202ae0;overflow:hidden}.portrait canvas{width:100%;height:100%;image-rendering:pixelated}.vitals{width:100%;text-shadow:1px 2px #000}.label-row{display:flex;justify-content:space-between;align-items:center;font:12px Impact,sans-serif;letter-spacing:1px;margin-bottom:6px}.label-row span{color:var(--orange);font-size:8px;letter-spacing:2px}.health-track{height:10px;background:#210f19;border:1px solid #f1d7a633;transform:skew(-12deg);padding:2px}.health-track div{background:linear-gradient(90deg,#ed7b43,#f0c87e);width:100%;height:100%;transition:width .14s}.rage-track{height:4px;background:#291e38;transform:skew(-12deg);margin-top:4px}.rage-track div{height:100%;width:0;background:#72dedf;box-shadow:0 0 8px #62d5ff}.guard-track{height:3px;background:#20222c;border-radius:3px;margin-top:3px;opacity:0;transition:opacity .18s}.guard-track.widoczny{opacity:1}.guard-track div{height:100%;width:100%;background:linear-gradient(90deg,#7fb2ff,#cfe6ff);border-radius:3px;box-shadow:0 0 7px #7fb2ff88;transition:width .12s}.guard-track.slaba div{background:linear-gradient(90deg,#ff7a4a,#ffc48a);box-shadow:0 0 8px #ff7a4a99}.rage-label{font:6px monospace;letter-spacing:1px;color:#a1c2c8;margin-top:5px}.stage-panel{text-align:center;display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 4px #000}.stage-panel span{font:8px monospace;letter-spacing:1.5px;color:#d1c6b6}.stage-panel b{font:11px Impact,sans-serif;letter-spacing:1px}.score-panel{text-align:right;display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 3px #000}.score-panel span{font:7px monospace;letter-spacing:2px;color:#c1b4a1}.score-panel b{font:24px Impact,sans-serif;letter-spacing:1px}.score-panel small{font:6px monospace;letter-spacing:.8px;color:#ad9a8c}#boss-hud{position:absolute;bottom:6%;left:28%;right:28%;z-index:4}#boss-hud>span{display:flex;justify-content:space-between;font:7px monospace;letter-spacing:1px;text-shadow:0 2px #000}#boss-hud b{color:#ff815e}#boss-hud>div{margin-top:4px;height:6px;border:1px solid #ff895c88;background:#240d19}#boss-health{height:100%;display:block;background:#f15b45;transition:width .1s}.modal{display:grid;place-items:center;text-align:center;background:#11121beb;backdrop-filter:blur(5px)}.modal .eyebrow{justify-content:center;color:var(--orange)}.modal h2{font:clamp(32px,5vw,70px) Impact,sans-serif;letter-spacing:-1px;margin:20px 0 10px}.modal h2 span{color:var(--orange)}.modal p{font-size:12px;color:#b3a8a3;line-height:1.7}.modal .primary{margin:26px auto 0}.secondary{display:block;margin:20px auto;border:0;background:none;color:#b7aaa5;font:9px monospace;letter-spacing:1px}.end-stats{display:flex;justify-content:center;gap:45px;margin-top:25px}.end-stats div{display:flex;flex-direction:column;gap:7px}.end-stats small{font:8px monospace;letter-spacing:1px;color:#a79d9a}.end-stats b{font:28px Impact,sans-serif;color:var(--orange)}#message{position:absolute;z-index:5;top:23%;left:0;right:0;text-align:center;font:italic clamp(22px,4vw,54px) Impact,sans-serif;letter-spacing:1px;color:#fff0cf;text-shadow:3px 3px #37212c;pointer-events:none;opacity:0;transition:opacity .15s}#message.show{opacity:1}#pause-button{position:absolute;bottom:5%;right:3%;z-index:9;border:1px solid #a3a2ae55;background:#17172399;color:#e2d5c4;padding:6px 10px}#arcade:fullscreen{background:var(--ink);padding:0;width:100%;max-width:none;display:flex;flex-direction:column;justify-content:center}#arcade:fullscreen .masthead,#arcade:fullscreen footer,#arcade:fullscreen .topline,#arcade:fullscreen .controls{display:none}#arcade:fullscreen .game-shell{width:min(100vw,177.777vh);margin:auto} @media(min-width:851px){#arcade{max-width:min(1500px,calc((100svh - 218px)*1.77778 + 10.4vw))}.masthead{height:84px}.controls{height:55px}.topline{height:28px}footer{height:48px}#stage{container-type:inline-size}h1{font-size:10.5cqw}.title-copy p{font-size:1.25cqw;margin:1.8cqw 0}.primary{padding:16px 20px}.label-row{font-size:16px}.score-panel b{font-size:28px}.stage-panel span{font-size:9px}.stage-panel b{font-size:13px}.score-panel small{font-size:7px}} @media(min-width:1600px){#arcade{padding:0 60px}}@media(max-width:850px){#arcade{padding:0 20px}.masthead{height:74px}.edition{display:none}.controls{height:55px;gap:4px}.controls>div{gap:5px}.controls span{font-size:6px}kbd{font-size:8px;padding:5px}.title-copy{top:8%}h1{margin:17px 0 14px;font-size:10vw}.title-copy p{margin:12px 0}.primary{padding:13px 17px;min-width:190px;font-size:9px}.start-note{font-size:6px;margin-top:9px}.hero-tag{right:5%;bottom:15%}.hero-tag>b{font-size:32px}.title-bottom{font-size:6px}.eyebrow{font-size:7px}footer>span:nth-child(2){display:none}.portrait{width:35px;height:35px}.score-panel b{font-size:19px}.label-row{font-size:10px}} @media(pointer:coarse){.controls{display:none}} @media(max-width:540px){#arcade{padding:0 10px}.masthead{height:64px}.brand{font-size:18px}.brand-mark{font-size:32px}.utilities button{font-size:7px;padding:0 7px}.topline{font-size:5px;padding:0 8px;height:25px}.title-copy{left:5%;top:8%}h1{margin:12px 0;font-size:10vw}.subtitle{font-size:6px;letter-spacing:1px}.title-copy p{display:none}.primary{margin-top:16px;font-size:7px;min-width:145px;padding:12px}.start-note{font-size:5px;letter-spacing:.3px}.hero-tag>span{font-size:5px}.hero-tag>b{font-size:24px}.hero-tag>small{font-size:4px;padding:5px}.title-bottom{font-size:4px}.eyebrow{font-size:5px;letter-spacing:1px}.title-copy .eyebrow span{width:15px}h1 .title-dot{font-size:10px;right:-13px}.portrait{display:none}.stage-panel span{font-size:5px}.stage-panel b{font-size:7px}.score-panel b{font-size:15px}.score-panel small{font-size:4px}.label-row{font-size:8px}.label-row span{font-size:5px}.health-track{height:8px}.rage-label{font-size:4px}.score-panel span{font-size:5px}.modal h2{font-size:28px;margin:12px 0}.modal p{font-size:8px;margin:0}.modal .primary{margin-top:14px}.end-stats{margin-top:12px;gap:30px}.end-stats b{font-size:19px}.end-stats small{font-size:5px}.secondary{font-size:7px;margin:12px auto}footer{height:38px;font-size:6px}} /* Pixel Studio art direction — sampled from studio-pixel.pl on 2026-09-05. */ @font-face{font-family:Oswald;src:url('./media/oswald.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap} @font-face{font-family:Oswald;src:url('./media/oswald-ext.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF} @font-face{font-family:'Barlow Condensed';src:url('./media/barlow.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Barlow Condensed';src:url('./media/barlow-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF} :root{--paper:#f0f0f0;--muted:#929399;--orange:#e52020;--ink:#08090c} body{font-family:'Barlow Condensed',Arial,sans-serif}body:before{background:radial-gradient(ellipse at 75% 18%,#e520200d,transparent 65%)} .masthead{border-bottom:1px solid #ffffff0a;margin-bottom:12px}.brand{font-family:Oswald,sans-serif;letter-spacing:-.5px}.brand-small{font-family:'Barlow Condensed',sans-serif;letter-spacing:2.1px}.brand-mark{font-style:normal;font-size:33px;letter-spacing:-4px}.brand-mark span{font-size:21px}.edition i{box-shadow:0 0 16px #e52020b0}.edition,.edition span{color:#98999e} .utilities button{border-color:#ffffff1f;background:#ffffff05;border-radius:999px;color:#f0f0f0}.utilities button:last-child{border-radius:50%;width:34px}.game-shell{border-color:#ffffff14;border-radius:14px;overflow:hidden;box-shadow:0 25px 100px #0008,0 0 70px #e5202006}.topline{background:#101114;color:#96979c;border-bottom:1px solid #ffffff0b}#game{image-rendering:auto} #stage:after{opacity:.035;box-shadow:inset 0 0 80px #0004}#title-screen{background:linear-gradient(90deg,#08090cf5 0%,#08090cd1 29%,#08090c3b 61%,transparent 82%)} .title-copy{top:9%}.title-copy .eyebrow{display:inline-flex;background:linear-gradient(100deg,#e5202029,#96100f4d);border:1px solid #ffb3b326;border-radius:999px;padding:8px 13px;font-family:Oswald,sans-serif;font-weight:600;font-size:8px;letter-spacing:1.4px;box-shadow:inset 0 1px #ffffff0b}.eyebrow span{display:none} h1{font-family:Oswald,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:.96;transform:none;margin:18px 0 14px;text-shadow:0 4px 14px #0009}h1 em{color:#e52020}h1 .title-dot{display:none}.subtitle{font-family:Oswald,sans-serif;letter-spacing:2.5px;color:#dedee1;font-weight:500;font-size:10px} .title-copy p{font-family:'Barlow Condensed',sans-serif;color:#c6c7ca;font-size:14px;line-height:1.55;margin:17px 0}.primary{background:linear-gradient(115deg,#ef2828,#b30910);color:#fff;border:1px solid #ffaaaa26;border-radius:14px;box-shadow:0 7px 25px #e5202028,inset 0 1px #ffffff18;font:600 13px Oswald,sans-serif;letter-spacing:.65px;min-width:220px;min-height:48px;align-items:center;gap:24px;padding:14px 21px}.primary:hover{background:linear-gradient(115deg,#ff3636,#d81720);box-shadow:0 9px 30px #e5202044}.primary span:last-child{font-size:18px}.start-note{font-size:7px;color:#aaaab1}.start-note span{color:#e52020} .hero-tag{transform:none;right:5.8%;bottom:11.5%;border-left:2px solid #e52020;padding-left:13px}.hero-tag>span{font:8px Oswald,sans-serif;letter-spacing:2px;color:#c6c7cd}.hero-tag>b{font:700 42px Oswald,sans-serif;letter-spacing:-1px;color:#f0f0f0}.hero-tag>small{background:#e52020;color:white;padding:5px 8px;font:500 7px Oswald,sans-serif;letter-spacing:1px;border-radius:4px}.title-bottom{color:#999aa1}.controls{background:#0e0f12;border-top:1px solid #ffffff0d}.controls span{font-family:Oswald,sans-serif;font-size:9px;color:#a4a5ac;letter-spacing:.6px}kbd{border:1px solid #ffffff21;border-bottom:2px solid #ffffff35;background:#ffffff04;border-radius:5px;color:#efeff2;font-family:Oswald,sans-serif;font-size:10px}footer{font-family:Oswald,sans-serif;color:#73767f}.footer-credit{color:#a2a3aa} .player-panel{background:linear-gradient(90deg,#08090cbf,#08090c00);padding:8px;border-radius:10px}.portrait{border-color:#e5202055;background:#0a0c13;border-radius:7px}.portrait canvas{image-rendering:auto}.label-row,.stage-panel b,.score-panel b{font-family:Oswald,sans-serif;font-weight:700}.label-row{letter-spacing:.5px}.health-track{background:#290c10;border-color:#ffffff22;border-radius:3px;transform:none}.health-track div{background:linear-gradient(90deg,#ba0e18,#ff3737);border-radius:1px;box-shadow:0 0 9px #e5202066}.rage-track{transform:none;background:#2c2026;border-radius:3px}.rage-track div{background:#f1eeee;box-shadow:0 0 8px #f9ccccaa}.rage-label{color:#c5c6cc}.score-panel{padding-top:6px}.stage-panel{padding-top:8px}.stage-panel span,.score-panel span,.score-panel small{color:#dcdee4}.score-panel b{font-weight:600;letter-spacing:.5px}#boss-hud b{color:#ff4d55}#boss-hud>div{border-color:#e5202099;border-radius:3px}#boss-health{background:#e52020} .modal{background:#08090cef}.modal h2,.end-stats b{font-family:Oswald,sans-serif;font-weight:700;letter-spacing:-1.5px}.modal .eyebrow{font:500 9px Oswald,sans-serif;letter-spacing:2px}.modal p{font:400 15px 'Barlow Condensed',sans-serif;color:#c3c4cc}.secondary{font-family:Oswald,sans-serif;color:#a4a4ac}.end-stats b{color:#e52020}#message{font-family:Oswald,sans-serif;font-style:normal;font-weight:700;color:#f0f0f0;letter-spacing:-.5px;text-shadow:0 4px 18px #000,0 0 45px #e5202055}#pause-button{border-radius:50%;background:#0b0c12bb;color:#f0f0f0} @media(min-width:851px){#arcade{max-width:min(1500px,calc((100svh - 233px)*1.77778 + 10.4vw))}h1{font-size:9.2cqw}.title-copy p{font-size:1.65cqw}.title-copy .eyebrow{font-size:.9cqw}.primary{font-size:1.4cqw;padding:1.45cqw 2.3cqw;min-height:0}.title-copy .primary{margin-top:1cqw}.title-copy{top:8%}} @media(max-width:850px){h1{font-size:9vw;margin:13px 0 11px}.title-copy .eyebrow{font-size:6px;padding:6px 9px}.title-copy{top:7%}.title-copy p{font-size:11px;margin:12px 0}.primary{font-size:10px;min-width:185px;min-height:36px;padding:10px 15px;border-radius:10px}.hero-tag>b{font-size:29px}.hero-tag>span{font-size:6px}.hero-tag>small{font-size:5px}.subtitle{font-size:8px}.controls span{font-size:7px}kbd{font-size:8px}.player-panel{padding:4px}.label-row{font-size:12px}} @media(max-width:540px){.masthead{margin-bottom:8px}.title-copy{top:6%}.title-copy .eyebrow{font-size:4px;padding:4px 6px;letter-spacing:1px}h1{font-size:10vw;line-height:.92;margin:9px 0}.subtitle{font-size:6px}.primary{font-size:7px;min-width:135px;min-height:29px;margin-top:13px;padding:8px 11px;border-radius:8px}.primary span:last-child{font-size:12px}.hero-tag{bottom:13%;padding-left:8px}.hero-tag>b{font-size:22px}.hero-tag>span{font-size:4px}.hero-tag>small{font-size:4px;padding:4px}.player-panel{padding:3px}.label-row{font-size:9px}.modal p{font-size:10px}.modal h2{font-size:27px;letter-spacing:-.5px}.start-note{font-size:4px}.controls{display:none}} @media(prefers-reduced-motion:reduce){.primary{transition:none}.primary:hover{transform:none}} /* Wstawki 'Osiedle komentuje'. Portret rysuje canvas, tu jest sam tekst - w DOM-ie, wiec nie rozmywa sie przy skalowaniu kadru. Nakladka nie moze lapac dotyku, bo przykrywa przyciski sterowania. */ #komentarz{position:absolute;left:4%;right:4%;bottom:20%;z-index:6;display:none;pointer-events:none;flex-direction:column;gap:2px;text-shadow:0 3px 10px #000,0 0 22px #0009} #komentarz.show{display:flex} #komentarz b{font:700 clamp(15px,2.6vw,34px)/1.08 Oswald,Impact,sans-serif;letter-spacing:-.5px;color:#f4f0ea;-webkit-text-stroke:0} #komentarz b:first-child{color:var(--akcent,#e52020)} @media(prefers-reduced-motion:reduce){#komentarz{transition:none}} /* menu Nocna zmiana w iframie - caly stage, bez ramki */ #menu-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#080e14;z-index:30} #menu-frame.hidden{display:none} #wyniki-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#080e14;z-index:31} #wyniki-frame.hidden{display:none} /* intro */ #intro{position:absolute;inset:0;background:#000;z-index:32;overflow:hidden} #intro video{width:100%;height:100%;object-fit:cover;display:block} #intro-skip{position:absolute;right:2%;bottom:3%;padding:.5em 1em;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.35);font:700 12px/1 Arial,sans-serif;letter-spacing:.12em;cursor:pointer} /* FINAL - klip po wygranej. Ten sam uklad co intro; dochodzi wygaszenie, zeby raport z osiedla nie wchodzil w polowie ostatniej klatki. */ #final{position:absolute;inset:0;background:#000;z-index:33;overflow:hidden;opacity:1;transition:opacity .3s ease} #final.gasnie{opacity:0} #final video{width:100%;height:100%;object-fit:cover;display:block} #final-skip{position:absolute;right:2%;bottom:3%;padding:.5em 1em;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.35);font:700 12px/1 Arial,sans-serif;letter-spacing:.12em;cursor:pointer} .intro-dymek{position:absolute;left:8%;top:14%;max-width:40%;padding:12px 16px;background:#fff;color:#111;border:3px solid #111;border-radius:14px 14px 14px 2px;font:900 22px/1.15 Impact,'Arial Black',Arial,sans-serif;text-transform:uppercase;opacity:0;transform:scale(.8);transition:opacity .12s,transform .12s;box-shadow:4px 4px 0 #111} .intro-dymek b{display:block;font-size:11px;letter-spacing:.2em;color:#c81a1a;margin-bottom:4px} .intro-dymek.show{opacity:1;transform:scale(1)} #intro-rysy{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.55) 0,rgba(255,255,255,.15) 8%,transparent 30%),repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.7) 0deg,transparent 1.2deg,transparent 17deg);mix-blend-mode:screen} #intro-rysy.show{opacity:1} /* komiks */ #intro.komiks{background:#0a0a0c} .komiks-strona{position:absolute;inset:0;opacity:0;transition:opacity .25s;overflow:hidden} .komiks-strona.show{opacity:1} .komiks-strona.out{opacity:0} .panel{position:absolute;overflow:hidden;border:4px solid #f4f1ea;box-shadow:6px 6px 0 #000;opacity:0;transform:scale(.92) rotate(-1deg);transition:opacity .18s,transform .22s cubic-bezier(.2,1.4,.4,1)} .panel.show{opacity:1;transform:none} .panel .obraz{position:absolute;inset:0;background-size:cover;transform:scale(var(--zoom-od));animation:none} .panel.show .obraz{animation:najazd var(--czas) linear forwards} @keyframes najazd{from{transform:scale(var(--zoom-od))}to{transform:scale(var(--zoom-do))}} .panel .sfx{position:absolute;font:900 clamp(28px,6vw,110px)/1 Impact,'Arial Black',sans-serif;color:#ffd23f;-webkit-text-stroke:3px #111;text-shadow:5px 5px 0 #c81a1a,7px 7px 0 #000;letter-spacing:.02em;opacity:0;transform:scale(.4);transition:opacity .12s .25s,transform .18s .25s cubic-bezier(.2,1.6,.4,1)} .panel.show .sfx{opacity:1;transform:scale(1) rotate(-6deg)} .panel .dymek{position:absolute;max-width:46%;padding:10px 14px;background:#fff;color:#111;border:3px solid #111;border-radius:16px 16px 16px 2px;font:900 clamp(13px,1.6vw,26px)/1.15 Impact,'Arial Black',sans-serif;text-transform:uppercase;box-shadow:4px 4px 0 #111;opacity:0;transform:scale(.8);transition:opacity .12s .5s,transform .12s .5s} .panel .dymek b{display:block;font-size:.55em;letter-spacing:.2em;color:#c81a1a;margin-bottom:3px} .panel.show .dymek{opacity:1;transform:scale(1)} .panel .napis{position:absolute;left:0;top:0;padding:6px 12px;background:#ffd23f;color:#111;border-right:3px solid #111;border-bottom:3px solid #111;font:700 clamp(11px,1.2vw,20px)/1 Georgia,serif;font-style:italic;letter-spacing:.04em} .panel video.obraz{width:100%;height:100%;object-fit:cover} .panel .deszcz{position:absolute;inset:-10% 0 0 0;pointer-events:none;opacity:.35;background:repeating-linear-gradient(115deg,transparent 0 6px,rgba(255,255,255,.18) 6px 7px,transparent 7px 19px);background-size:140px 140px;animation:deszcz .55s linear infinite} @keyframes deszcz{from{background-position:0 0}to{background-position:-70px 140px}} /* ---- EKRAN PAUZY (paczka Pauza-DOM-Patch, reguly wylacznie pod #pause-screen) ---- */ /* Pauza: komponenty DOM nad canvasem. */ #pause-screen{container-type:inline-size;display:block;text-align:left;overflow:hidden;background:linear-gradient(90deg,#11121be8,#11121bc9 58%,#11121b80);color:#f0e6d2} #pause-screen .pause-layout{position:relative;z-index:1;display:grid;grid-template-columns:58% 42%;grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%;padding:6% 5% 2.5%} #pause-screen .pause-copy{align-self:center;position:relative;z-index:2;padding:0 9% 4% 0;min-width:0} #pause-screen .eyebrow{display:block;color:#e5202a;font:600 clamp(8px,1cqw,13px)/1.2 'Barlow Condensed',sans-serif;letter-spacing:.24em} #pause-screen h2{font:700 clamp(42px,10cqw,140px)/1 Oswald,sans-serif;letter-spacing:-.035em;margin:2.2cqw 0 1cqw;color:#f0e6d2} #pause-screen h2 span{color:#e5202a} #pause-screen p{font:400 clamp(12px,1.65cqw,22px)/1.3 'Barlow Condensed',sans-serif;color:#b5b5bc;margin:0 0 3cqw} #pause-screen .pause-actions{display:grid} #pause-screen .pause-actions button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-start;gap:1.4cqw;width:100%;min-width:0;min-height:44px;margin:0;padding:1.5cqw 1.8cqw;border:0;border-bottom:1px solid #f0e6d22b;border-radius:0;background:transparent;box-shadow:none;color:#f0e6d2;font:700 clamp(16px,2.2cqw,30px)/1.2 'Barlow Condensed',sans-serif;letter-spacing:0;text-align:left;transform:none;transition:none;overflow:hidden} #pause-screen .pause-actions button::before{content:"";position:absolute;inset:0;z-index:-2;background:#e5202a;opacity:0;pointer-events:none} #pause-screen .pause-actions button::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#ff604c66,transparent),repeating-linear-gradient(transparent 0 3px,#11121b1c 3px 4px);opacity:0;pointer-events:none} #pause-screen .pause-actions button:is(:focus,:hover)::before{opacity:1} #pause-screen .pause-actions button:is(:focus,:hover)::after{animation:pause-pulse 3s ease-in-out infinite} #pause-screen .pause-actions button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px} #pause-screen .pause-number{font:400 clamp(9px,.85cqw,12px)/1 monospace;opacity:.8} #pause-screen .pause-label{font:inherit;line-height:inherit} #pause-screen .pause-arrow{margin-left:auto;font:400 clamp(18px,2cqw,28px)/1 sans-serif} #pause-screen .pause-portrait{position:relative;align-self:stretch;min-height:0;pointer-events:none;overflow:hidden} #pause-screen .pause-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated} #pause-screen .pause-plaque{position:absolute;bottom:7%;right:0;padding:1.2cqw 1.8cqw;background:#0b111ce8;border-left:4px solid #e5202a;transform:rotate(-4deg)} #pause-screen .pause-plaque b{display:block;font:700 clamp(26px,4.4cqw,62px)/1.15 Oswald,sans-serif;color:#f0e6d2} #pause-screen .pause-plaque small{display:block;margin-top:.6cqw;font:600 clamp(7px,.9cqw,12px)/1.3 'Barlow Condensed',sans-serif;letter-spacing:.08em} #pause-screen .pause-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #f0e6d22b;padding-top:1.4cqw;font:400 clamp(7px,.8cqw,11px)/1.4 monospace;letter-spacing:.08em;color:#adadb5} #pause-screen .pause-crt{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(transparent 44%,#f0e6d20a 49%,#f0e6d216 50%,transparent 56%);animation:pause-scan 6s linear infinite} @keyframes pause-pulse{0%,100%{opacity:.15}50%{opacity:.65}} @keyframes pause-scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}} /* Mala ramka 16:9: przewijanie overlayu zamiast zmniejszania pol dotyku. */ @media(max-width:539px){ #pause-screen{overflow-y:auto;overscroll-behavior:contain} #pause-screen .pause-layout{display:block;height:auto;min-height:100%;padding:16px 18px} #pause-screen .pause-copy{padding:0} #pause-screen .eyebrow{font-size:9px} #pause-screen h2{font-size:42px;margin:8px 0} #pause-screen p{font-size:13px;margin:0 0 12px} #pause-screen .pause-actions button{min-height:48px;padding:12px;gap:12px;font-size:19px} #pause-screen .pause-number{font-size:10px} #pause-screen .pause-portrait{display:none} #pause-screen .pause-footer{margin-top:16px;padding-top:10px;flex-wrap:wrap;font-size:8px} } @media(prefers-reduced-motion:reduce){ #pause-screen .pause-actions button:is(:focus,:hover)::after{animation:none;opacity:.3} #pause-screen .pause-crt{display:none;animation:none} } /* Ramka gry ma proporcje 16:9, wiec na telefonie overlay pauzy ma 190-220 px wysokosci, a nie wysokosc ekranu. Ustawienia z paczki dawaly 312 px tresci - przycisk MENU wypadal pod krawedz i gracz go nie widzial. Sciskamy tak, zeby wszystkie trzy pozycje miescily sie bez przewijania. */ @media(max-width:539px){ #pause-screen .pause-layout{padding:8px 14px} #pause-screen .eyebrow{font-size:8px} #pause-screen h2{font-size:26px;margin:2px 0 4px} #pause-screen p{font-size:11px;margin:0 0 8px} #pause-screen .pause-actions{gap:4px} #pause-screen .pause-actions button{min-height:38px;padding:6px 10px;gap:10px;font-size:15px} #pause-screen .pause-number{font-size:9px} #pause-screen .pause-footer{display:none} } /* Najwezsze telefony (360 px) daja ramke 190 px - trzeba jeszcze 12 px. Scinamy wysokosc przyciskow, a nie tresc: lepiej mniejszy przycisk widoczny niz pelnowymiarowy pod krawedzia. */ @media(max-width:380px){ #pause-screen .pause-actions button{min-height:34px;font-size:14px} } /* ========================================================================== MOBILKA (8.09.2026). Trzy problemy zmierzone na 390x844 i 844x390: - pion: kadr 368x207 px = 23% ekranu, pady 265 px pod krawedzia ekranu, - poziom: masthead + topline zjadaly 118 px, dol kadru wypadal poza ekran (bottom 569 przy 390 px wysokosci), sterowania nie bylo widac wcale, - sterowanie stalo POD kadrem, czyli tam, gdzie w poziomie nie ma miejsca. Odpowiedz: pion zaslonic i zapauzowac, poziom rozciagnac na caly ekran, sterowanie polozyc NA kadrze pod kciuki. ========================================================================== */ /* --- 1. Poziom na telefonie: kadr dostaje caly ekran --- */ @media (pointer:coarse) and (orientation:landscape){ html,body{height:100%;overflow:hidden;overscroll-behavior:none} body{min-width:0} #arcade{padding:0;max-width:none;height:100svh;display:flex;align-items:center;justify-content:center;gap:0} .masthead,footer,.controls,.topline{display:none !important} .game-shell{border:0;box-shadow:none;width:min(100vw,calc(100svh * 16 / 9));margin:auto} #stage{width:100%} } /* Wariant rysowany pelnego ekranu - dla iOS, ktory nie zna Element.requestFullscreen. W ramce na WP dodatkowo prosimy rodzica o rozciagniecie