@font-face{font-family:Oswald;src:url('fonty/oswald-ext.woff2') format('woff2');font-weight:200 700;unicode-range:U+0100-02FF}@font-face{font-family:Oswald;src:url('fonty/oswald.woff2') format('woff2');font-weight:200 700}@font-face{font-family:Barlow;src:url('fonty/barlow.woff2') format('woff2');font-weight:400 800}
:root{color-scheme:dark;--red:#ff382e;--cream:#fff0cf;--ink:#080e14;--muted:#98a6aa}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream);font:14px Barlow,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f9c862;outline-offset:5px}button{border:0}a{color:inherit}button:disabled{cursor:wait}::selection{background:var(--red);color:white}[hidden]{display:none!important}
.arcade{height:100svh;min-height:760px;max-height:1200px;position:relative;overflow:hidden;isolation:isolate;background:#080e14}.scene,.shade,.scanlines,#weather{position:absolute;inset:0;pointer-events:none}.scene{z-index:-4;overflow:hidden}.street{position:absolute;inset:-1%;background:url('grafika/osiedle.webp') center/cover no-repeat;image-rendering:pixelated;transform:translate(var(--px,0px),var(--py,0px));transition:transform .4s ease-out}.shade{z-index:-2;background:linear-gradient(90deg,#050a12e6 0%,#050a12aa 29%,#050a120d 60%),linear-gradient(0deg,#040912 0%,transparent 32%,#050a1288 100%)}#weather{width:100%;height:100%;z-index:-1;image-rendering:pixelated}.scanlines{z-index:8;opacity:.12;background:repeating-linear-gradient(0deg,#000 0px,#000 1px,transparent 1px,transparent 4px)}.shop-glow{position:absolute;left:52%;top:42%;width:24%;height:33%;background:#ffaa3022;mix-blend-mode:screen;box-shadow:0 0 100px #ff981017;transition:opacity .3s}.neon-off .shop-glow{opacity:0}.car-glow{position:absolute;left:76%;top:65%;width:10%;height:10%;background:radial-gradient(ellipse,#ff9f3588,transparent 65%);opacity:0}.alarming .car-glow{animation:alarm 1s steps(2,end) 3}
header{position:absolute;top:30px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:10}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font:600 11px/1.2 Oswald;letter-spacing:.12em}.brand>b{font:700 30px Oswald;border:2px solid var(--cream);width:44px;height:44px;display:grid;place-items:center;transform:rotate(-7deg);position:relative}.brand>b span{position:absolute;right:-6px;bottom:-7px;color:var(--red);font-size:30px;text-shadow:2px 2px #080e14}.night{font:11px monospace;letter-spacing:.12em;color:#b0bcb8;display:flex;align-items:center;gap:12px}.night i{width:5px;height:5px;background:#bcdd81;box-shadow:0 0 14px #b5d973}.night>span{color:var(--cream);border-left:1px solid #6b767a;padding-left:14px}.top-actions{display:flex;gap:14px;align-items:center}.top-actions button{background:#08101966;padding:10px 12px;border:1px solid #53616b66;font:10px monospace;letter-spacing:.08em}.top-actions b{color:var(--red)}#fullscreen{font-size:24px;padding:3px 10px}
.identity{position:absolute;left:7.5%;top:17%;width:39%;z-index:2}.edition{font:9px monospace;letter-spacing:.15em;display:flex;justify-content:space-between;max-width:310px;color:#acb3ae;border-top:1px solid #6c7b794a;padding-top:12px}h1{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(90px,10.2vw,174px);line-height:.88;letter-spacing:-.065em;margin:28px 0 18px;transform:skewY(-4deg);transform-origin:left center;text-shadow:3px 3px #090c10,6px 6px #090c10}h1>span{display:block;color:var(--cream)}h1 strong{display:block;font-weight:700;color:var(--red);text-shadow:2px 2px #851713,4px 4px #851713,6px 6px #851713,9px 9px #03080d}.dot{color:var(--cream)}.subtitle{display:flex;align-items:center;gap:12px;font:600 12px Oswald;letter-spacing:.45em;margin:30px 0 0;max-width:320px;white-space:nowrap}.subtitle>span{height:2px;background:var(--red);flex:1}.motto{font:10px monospace;color:#96a4aa;letter-spacing:.13em;margin:15px 0 0}
.fighter{position:absolute;right:1%;bottom:3%;height:87%;aspect-ratio:640/768;z-index:1;pointer-events:none;transform:translateY(0);animation:breathe 4s steps(4) infinite}.fighter:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080e14 0%,transparent 24%);pointer-events:none}#hero-sprite{width:100%;height:100%;background:url('grafika/lysy.webp') 0 0/400% 200% no-repeat;image-rendering:pixelated;filter:drop-shadow(-8px 4px 0 #080e1499)}.fighter-tag{position:absolute;right:7%;bottom:15%;z-index:3;border-left:5px solid var(--red);padding:12px 24px;transform:rotate(-4deg);background:#090e14d9;min-width:230px}.fighter-tag small{font:10px monospace;color:#adbbb9;letter-spacing:.12em}.fighter-tag>b{display:block;font:700 60px/.98 Oswald;letter-spacing:-.04em;margin:8px 0}.fighter-tag>b span{color:var(--red);font:400 32px Oswald;margin-left:65px}.fighter-tag p{font:10px monospace;letter-spacing:.03em;margin:8px 0 0}
.choices{position:absolute;left:7.5%;bottom:14%;width:34%;max-width:470px;z-index:5;display:flex;flex-direction:column;gap:2px}.choice{position:relative;display:flex;align-items:center;text-align:left;gap:17px;background:#08121a88;min-height:45px;padding:10px 18px;border-bottom:1px solid #5d6b713d;transition:background .15s,transform .15s}.choice .num{font:10px monospace;color:#8a9a9f}.choice strong{font:600 19px Oswald;letter-spacing:.035em}.choice .arrow{margin-left:auto;color:#8a9a9f;font-size:23px}.choice:hover,.choice:focus-visible{background:#172733e8;transform:translateX(6px)}.choice.primary{background:var(--red);color:#fff4dc;min-height:82px;margin-bottom:8px;border:1px solid #ff736344;box-shadow:5px 5px 0 #571813;clip-path:polygon(0 0,100% 0,100% 78%,96% 100%,0 100%);padding-bottom:24px}.primary strong{font-size:clamp(20px,1.9vw,29px);letter-spacing:0}.primary .num,.primary .arrow{color:var(--cream)}.primary small{position:absolute;left:45px;bottom:10px;font:8px monospace;letter-spacing:.13em;color:#ffc3a8}.primary:hover,.primary:focus-visible{background:#ff5140;transform:translateX(6px)}
.hotspot{position:absolute;z-index:4;background:#080e14b0;color:#ecd6a8;font:9px monospace;letter-spacing:.1em;padding:8px;display:flex;gap:8px;align-items:center}.hotspot span{display:grid;place-items:center;border:1px solid #c6a56b80;width:22px;height:22px;color:#ffc75a;font-size:17px}.hotspot:hover{background:#433323}.neon{top:47%;left:52%}.alarm{bottom:26%;right:3%}.remark{position:absolute;z-index:7;right:7%;top:21%;max-width:280px;font:600 22px/1.2 Oswald;transform:rotate(3deg);background:var(--cream);color:#10141a;box-shadow:5px 5px var(--red);padding:16px 20px;opacity:0;transition:opacity .2s;pointer-events:none}.remark.visible{opacity:1}.remark small{display:block;color:#9e352b;font:10px monospace;margin-bottom:6px}.remark:after{content:'';position:absolute;bottom:-12px;right:20px;border-top:13px solid var(--cream);border-left:15px solid transparent}
footer{position:absolute;bottom:24px;left:4%;right:4%;z-index:6;border-top:1px solid #9babab38;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:9px monospace;color:#9aa6a9;letter-spacing:.06em}footer p{margin:0}.life{color:var(--red);font-size:16px;letter-spacing:3px;margin-right:16px}.divider{color:#45545c;margin:0 9px}kbd{font:10px monospace;border:1px solid #5c6b76;padding:3px 5px;margin:0 4px}.version{font-size:8px}
/* Cien scrolla: gradienty `local` jada z trescia, `scroll` stoja - dzieki temu
   ciemna smuga pojawia sie TYLKO gdy jest jeszcze co przewinac. Bez tego panel
   po prostu urywal sterowanie i nic tego nie sygnalizowalo. Zero JS. */
dialog{border:1px solid #6a7477;background:linear-gradient(#0e1820 30%,#0e182000) top/100% 26px no-repeat local,linear-gradient(#0e182000,#0e1820 70%) bottom/100% 26px no-repeat local,radial-gradient(farthest-side at 50% 0,#0009,#0000) top/100% 13px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,#0009,#0000) bottom/100% 13px no-repeat scroll,#0e1820;color:var(--cream);width:min(850px,92vw);max-height:94svh;padding:clamp(14px,2.4svh,28px) clamp(18px,3vw,34px);box-shadow:12px 12px 0 #0008;overflow:auto}dialog::backdrop{background:#02060ce8;backdrop-filter:blur(5px)}.panel-top,.panel-bottom{display:flex;align-items:center;justify-content:space-between;font:9px monospace;letter-spacing:.09em;color:#8d9ca3}.panel-top{border-bottom:1px solid #39464b;padding-bottom:14px}.panel-top button{font-size:30px;background:transparent;line-height:1}.panel-bottom{border-top:1px solid #39464b;padding-top:clamp(8px,1.6svh,16px);margin-top:clamp(10px,2.4svh,25px)}h2{font:700 clamp(28px,4.4vw,60px)/1 Oswald;letter-spacing:-.035em;margin:clamp(10px,2.4svh,26px) 0;color:var(--cream)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}.control-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #35424d;padding:clamp(5px,1.3svh,12px) 0;font:clamp(14px,1.6svh,16px) Oswald}.control-row kbd{font-size:12px;color:#f9b47d}.panel-note{color:#a5b1b4;font:14px/1.7 Barlow,Arial}.cast-tabs{display:flex;gap:6px;flex-wrap:wrap}.cast-tabs button{font:12px Oswald;background:#1b2c38;border:1px solid #3d5260;padding:clamp(4px,1svh,8px) 12px}.cast-tabs button[aria-pressed=true]{background:var(--red);border-color:var(--red)}.cast-view{display:grid;grid-template-columns:45% 55%;align-items:center;min-height:clamp(150px,27svh,340px);overflow:hidden;background:radial-gradient(ellipse at 30% 70%,#304348,transparent 70%)}.cast-sprite{aspect-ratio:640/768;width:100%;background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated}.cast-quote{font:700 clamp(20px,3.2svh,42px)/1.1 Oswald;padding:0 20px}.cast-quote small{display:block;color:var(--red);font:11px monospace;margin-bottom:12px}.setting{display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid #34434e;padding:clamp(7px,1.8svh,18px) 0}.setting b{font:500 21px Oswald}.setting p{font:12px/1.5 Barlow,Arial;color:#8f9fa7;margin:clamp(2px,.6svh,5px) 0}.setting input{width:22px;height:22px;accent-color:var(--red)}
#transition{position:fixed;inset:0;z-index:100;background:var(--red);display:grid;place-content:center;transform:translateY(110%);transition:transform .45s cubic-bezier(.7,0,.2,1);color:#0b0e14}#transition.on{transform:translateY(0)}.transition-word{font:700 clamp(70px,13vw,190px)/.9 Oswald;letter-spacing:-.07em;transform:rotate(-5deg)}.transition-word span{display:block;color:var(--cream)}#transition small{font:12px monospace;margin-top:35px;letter-spacing:.3em}#game-shell{position:fixed;inset:0;z-index:50;background:#070b10;display:flex;flex-direction:column}.game-bar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:11px monospace;gap:20px}.game-bar button{background:var(--red);padding:9px 14px;font:11px monospace}.game-bar a{font-size:10px}#game-mount{flex:1}#game-mount iframe{width:100%;height:100%;border:0}.reduced *{animation:none!important;transition:none!important}.reduced .street{transform:none!important}
@keyframes breathe{50%{transform:translateY(-3px)}}@keyframes alarm{0%,50%{opacity:.9}51%,100%{opacity:0}}
@media(min-width:1600px){.identity{left:10%;top:18%}.choices{left:10%}.fighter{right:5%}.fighter-tag{right:12%}.neon{left:54%}}
@media(max-width:1000px){.arcade{min-height:700px}.identity{left:6%;top:18%;width:45%}h1{font-size:13vw}.choices{left:6%;width:43%;bottom:14%}.fighter{right:-11%;height:80%}.fighter-tag{right:5%;min-width:180px;bottom:17%;padding:12px 16px}.fighter-tag>b{font-size:47px}.fighter-tag>b span{margin-left:40px}.fighter-tag p{font-size:8px}.neon{left:54%}.night{display:none}.version{display:none}}
@media(max-width:600px){.arcade{height:100svh;min-height:820px;max-height:none}header{top:22px;left:6%;right:6%}.brand{font-size:9px;gap:9px}.brand>b{width:33px;height:33px;font-size:24px}.top-actions{gap:7px}.top-actions button{font-size:9px;padding:9px 7px}.identity{left:8%;top:14%;width:80%}.edition{font-size:8px;max-width:245px}h1{font-size:25vw;max-width:350px;margin-top:24px}.subtitle{max-width:245px;font-size:10px;margin-top:24px;letter-spacing:.36em}.motto{font-size:8px}.fighter{height:57%;right:-26%;bottom:27%;opacity:.85}.fighter-tag{right:7%;bottom:42%;min-width:110px;padding:8px 12px}.fighter-tag small{font-size:7px}.fighter-tag>b{font-size:33px}.fighter-tag>b span{font-size:20px;margin-left:20px}.fighter-tag p{display:none}.choices{left:8%;width:84%;max-width:none;bottom:12%}.choice{background:#0a1522eb;min-height:44px}.choice strong{font-size:17px}.choice.primary{min-height:76px}.primary strong{font-size:23px}.shade{background:linear-gradient(90deg,#050a12dd,transparent),linear-gradient(0deg,#050a12 10%,#050a1210 70%)}.street{background-position:65% center}.hotspot{display:none}.remark{top:36%;right:8%;font-size:18px;max-width:220px}footer{left:8%;right:8%;bottom:24px;display:block;font-size:8px;line-height:1.5;padding-top:13px}.life{font-size:13px;margin-right:7px}.divider{margin:0 5px}.key-hint{display:none}dialog{padding:20px}.control-grid{grid-template-columns:1fr}.control-row{font-size:15px;padding:8px 0}.cast-view{grid-template-columns:45% 55%;min-height:240px}.cast-quote{padding:0 8px;font-size:25px}.cast-tabs button{font-size:11px;padding:7px 9px}.game-bar{padding:0 10px;gap:8px}.game-bar>span{display:none}}
@media(max-height:700px) and (min-width:700px){.arcade{min-height:620px}.identity{top:17%}h1{font-size:112px}.choices{bottom:13%}.choice{min-height:36px;padding:6px 14px}.choice.primary{min-height:65px}.subtitle{margin-top:20px}.motto{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(min-width:601px){.arcade{min-height:700px}.identity{top:14%}h1{font-size:clamp(82px,min(10.2vw,13.5vh),160px);margin-top:20px;margin-bottom:12px}.subtitle{margin-top:16px}.motto{display:none}}
#hero-sprite{background-image:url('grafika/lysy-menu-detail.webp');image-rendering:auto}
.brand img{display:block;width:auto;height:66px;object-fit:contain;image-rendering:auto}@media(max-width:600px){.brand img{height:54px}}

/* New reaction cells are 768 square; preserve the old 640x768 silhouette scale. */
#hero-sprite{width:120%;margin-left:-10%;background-image:url('reakcje/idle.webp');background-size:100% 100%;image-rendering:auto}
.fighter{animation:none}
.panel-reaction{display:flex;align-items:center;gap:12px;margin:0 0 clamp(8px,1.8svh,18px);background:linear-gradient(100deg,#243441,#111b23);border-left:3px solid var(--red);min-height:clamp(84px,13svh,144px);padding-right:18px;overflow:hidden}
#panel-reaction-sprite{flex:0 0 clamp(88px,13.5svh,148px);height:clamp(88px,13.5svh,148px);background-repeat:no-repeat;image-rendering:auto;align-self:flex-end}
.panel-reaction small{font:9px monospace;letter-spacing:.1em;color:#e8ad71}.panel-reaction p{font:600 clamp(18px,2.6svh,24px)/1.2 Oswald;margin:clamp(4px,1svh,10px) 0}
@media(max-width:600px){#panel-reaction-sprite{flex-basis:104px;height:104px}.panel-reaction{min-height:104px;padding-right:10px;gap:4px}.panel-reaction p{font-size:19px}}

/* Ramka gry ma proporcje 16:9, wiec przy waskim oknie panel ma ~200 px wysokosci.
   Blok reakcji oddaje wtedy portret, a sterowanie wraca na wierzch. */
@media(max-height:560px){#panel-reaction-sprite{display:none}.setting{padding:6px 0}.panel-reaction{min-height:0;padding:10px 14px;margin-bottom:10px}.panel-reaction p{font-size:17px;margin:3px 0}h2{margin:8px 0;font-size:clamp(24px,3.4svh,34px)}.control-row{padding:4px 0}.panel-bottom{margin-top:10px;padding-top:8px}}

/* Galeria ma juz wlasny duzy sprite postaci i jej cytat, wiec dodatkowy blok
   z portretem Lysego tylko rozpycha panel - przy ramce 1323x743 wypychal
   tresc 108 px poza kadr. W pozostalych panelach zostaje. */
#panel:has(.cast-view) .panel-reaction{display:none}

/* Telefon w poziomie: ramka gry ma 340-430 px wysokosci, a menu bylo skladane
   na `min-height` 700-760 px. Efekt: przycisk "WCHODZE NA ULICE" wypadal pod
   krawedz ramki i gracz na telefonie nie mial czym zaczac gry. Tu menu schodzi
   do wysokosci, ktora naprawde ma: bohater po prawej, wybor po lewej, reszta
   ozdob znika. */
@media (max-height:540px){
  .arcade{min-height:0;height:100svh;max-height:none}
  header{top:9px;left:4%;right:4%}
  .brand img{height:34px}
  .night{display:none}
  .top-actions button{font-size:8px;padding:0 8px;min-height:30px}
  .identity{left:5%;top:8%;width:54%}
  .edition{font-size:7px;max-width:none}
  h1{font-size:clamp(38px,11.5vh,76px);margin:4px 0 0;max-width:none}
  .subtitle{margin-top:6px;font-size:8px;letter-spacing:.26em;max-width:none}
  .motto{display:none}
  .choices{left:5%;width:47%;max-width:none;bottom:6%;gap:2px}
  .choice{min-height:32px;padding:4px 12px;gap:10px}
  .choice strong{font-size:13px}
  .choice .num{font-size:8px}
  .choice small{display:none}
  .choice.primary{min-height:42px;margin-bottom:5px;padding-bottom:10px;box-shadow:3px 3px 0 #571813}
  .primary strong{font-size:16px}
  .fighter{height:92%;right:-4%;bottom:0}
  .fighter-tag,.hotspot,footer{display:none}
  .remark{top:12%;right:4%;font-size:14px;max-width:180px}
}

/* 8 pozycji menu (etapy 2-3, nadgodziny, ranking): ciasniej, zeby nie wchodzic na tytul. */
.choice{min-height:30px;padding:3px 12px}.choice.locked{opacity:.55}.choice.locked strong{text-decoration:line-through;text-decoration-color:#e5202088}
@media(max-height:700px) and (min-width:700px){.choice{min-height:26px;padding:2px 10px}.choice strong{font-size:12px}}
/* Srednia ramka (laptop, 540-800 px): tytul wyzej i mniejszy, lista ciasniej - osiem pozycji bez wchodzenia na BRAWL. */
@media (min-height:541px) and (max-height:800px){
  .identity{top:9%}
  h1{font-size:clamp(56px,12vh,96px);margin:8px 0 6px}
  .choices{bottom:8%;gap:1px}
  .choice{min-height:30px;padding:3px 12px}
  .choice strong{font-size:14px}
  .choice.primary{min-height:50px;padding-bottom:12px;margin-bottom:5px}
  .choice small{display:none}
}
/* Niska ramka (telefon w poziomie, ramka 342 px): osiem pozycji w dwoch kolumnach, glowna na cala szerokosc. */
@media (max-height:540px){
  .choices{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;width:60%;bottom:4%}
  .choice{min-height:26px;padding:2px 8px;gap:6px}
  .choice strong{font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .choice .arrow{display:none}
  .choice.primary{grid-column:1/-1;min-height:40px;margin-bottom:3px}
  .primary strong{font-size:15px}
}

/* === Poprawki 2026-09-29 (Claude): menu ma sie miescic w ramce gry === */
@media(min-width:601px){.arcade{min-height:0!important;height:100svh!important;max-height:none!important}}
/* Srednie ramki (541-720 px): 1366x768 daje ramke ~608 px, 1280x720 ~560 px - ucinalo 07/08. */
@media(min-width:601px) and (min-height:541px) and (max-height:720px){
  header{top:10px}
  .brand img{height:44px}
  .night{font-size:9px}
  .identity{top:11%!important}
  .edition{padding-top:8px;font-size:8px}
  h1{font-size:clamp(46px,11vh,80px)!important;margin:8px 0 6px!important}
  .subtitle{margin-top:8px!important;font-size:9px}
  .motto{display:none}
  .choices{bottom:10%!important;gap:1px!important}
  .choice{min-height:28px!important;padding:2px 12px!important;gap:10px}
  .choice.primary{min-height:40px!important}
  .choice strong{font-size:13px!important}
  .choice .num{font-size:8px}
  .choice small{display:none}
  .choice .arrow{font-size:17px}
  .fighter-tag{bottom:12%}
  .alarm{display:none}
  footer{bottom:10px;padding-top:9px}
}
/* Logo nie zaslania napisu EST. NA OSIEDLU. */
@media(min-width:601px) and (min-height:721px){.identity{top:max(14%,120px)}}
/* Dopoki modul menu nie wstanie, przyciski sa wyszarzone i nieklikalne. */
body:not(.gotowe) .choice{opacity:.45;pointer-events:none}