/* BREAKTHROUGH landing v2: jezyk wizualny gry (gazeta Front Line Times, promienie AZURE/CRIMSON, raster, twarde cienie).
   Mobile first (390 px). Naglowki czytelne, branding jako warstwa. Fonty: Press Start 2P + VT323 (self). */
@font-face{font-family:"PS2P";src:url(../assets/fonts/press-start-2p.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT";src:url(../assets/fonts/vt323.woff2) format("woff2");font-display:swap}
:root{
  --ink:#0b0b0e;--night:#0a0f1e;--navy:#14224a;--navy2:#1c2e66;
  --cream:#efe0b4;--paper:#e6d3a0;--brown:#2a2018;
  --gold:#f5c542;--gold-d:#9a6b12;--amber:#f2a93b;
  --azure:#2a5fb0;--azure-l:#8fb8ff;--crim:#b83228;--crim-l:#ff6a5c;--red-d:#7d1f17;
  --tx:#e9efff;--mut:#97a3bd
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--tx);font:22px/1.35 "VT",ui-monospace,monospace;-webkit-font-smoothing:none;
  background:var(--night) radial-gradient(rgba(143,184,255,.07) 1px,transparent 1.4px) 0 0/5px 5px}
a{color:inherit}img,video{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#000;padding:8px;z-index:9}
h1,h2,h3,.btn,.tag,.lbl{font-family:"PS2P",monospace;font-weight:400;text-transform:uppercase}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}
.lbl{display:inline-block;background:var(--ink);color:var(--amber);font-size:10px;letter-spacing:2px;padding:7px 10px;border:2px solid var(--amber)}
.tag{color:var(--amber);font-size:11px;letter-spacing:2px;text-shadow:2px 2px 0 var(--ink)}

/* HERO: tlo i wideo bez zmian, napisy w stylu naglowka gazety */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,15,30,.1) 0%,rgba(10,15,30,.5) 55%,rgba(10,15,30,.95) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.hero .wrap{position:relative;z-index:2;padding-bottom:30px;padding-top:80px;width:100%}
.hero h1{margin:12px 0 16px;font-size:clamp(20px,6.4vw,58px);line-height:1.15;letter-spacing:3px;color:var(--gold);
  text-shadow:3px 3px 0 var(--red-d),6px 6px 0 var(--ink)}
.hero .line{display:inline-block;background:var(--navy);border:3px solid var(--cream);box-shadow:4px 4px 0 var(--ink);
  font-family:"PS2P",monospace;color:var(--gold);font-size:clamp(10px,2.9vw,16px);line-height:1.7;text-transform:uppercase;margin:0 0 12px;padding:10px 14px}
.hero .sub{margin:0 0 22px;color:var(--cream);font-size:26px;text-shadow:2px 2px 0 var(--ink)}
.hero .meta{margin:16px 0 0;color:var(--mut);font-size:20px;text-shadow:1px 1px 0 var(--ink)}
.rise>*{animation:rise .5s steps(6) both}.rise>*:nth-child(2){animation-delay:.08s}.rise>*:nth-child(3){animation-delay:.18s}.rise>*:nth-child(4){animation-delay:.28s}.rise>*:nth-child(5){animation-delay:.4s}.rise>*:nth-child(6){animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* PRZYCISKI: twarda cegla ze zlotym frontem */
.btn{display:inline-block;background:var(--gold);color:#17120a;text-decoration:none;padding:18px 24px;font-size:clamp(11px,3.3vw,15px);line-height:1.3;
  border:3px solid var(--ink);box-shadow:0 5px 0 var(--gold-d),0 5px 0 3px var(--ink);cursor:pointer;transition:transform .07s steps(2),box-shadow .07s steps(2)}
.btn:hover,.btn:focus-visible{background:#ffd966;transform:translateY(3px);box-shadow:0 2px 0 var(--gold-d),0 2px 0 3px var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:none}
.btn.ghost{background:var(--navy);color:var(--gold);border-color:var(--cream);box-shadow:0 5px 0 var(--ink)}
.btn.ghost:hover{background:var(--navy2)}
.row{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
#mobile{display:none;background:var(--navy);border:3px solid var(--cream);box-shadow:4px 4px 0 var(--ink);padding:16px;margin-top:22px}
#mobile.on{display:block}#mobile p{margin:0 0 12px;font-size:23px}

/* TASMA: przewijany napis zamiast linii */
.tape{position:relative;z-index:2;background:var(--ink);border-top:3px solid var(--amber);border-bottom:3px solid var(--amber);overflow:hidden;white-space:nowrap}
.tape span{display:inline-block;padding:9px 0;font-family:"PS2P",monospace;font-size:10px;color:var(--amber);letter-spacing:2px;animation:tape 28s linear infinite}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SEKCJE: pasek rastra zamiast cienkich linii */
section{position:relative;padding:60px 0 56px}
section::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:conic-gradient(var(--ink) 25%,#1a2342 0 50%,var(--ink) 0 75%,#1a2342 0) 0 0/8px 8px}
h2{font-size:clamp(14px,4.2vw,24px);line-height:1.55;margin:0 0 20px;color:var(--gold);letter-spacing:1px;text-shadow:3px 3px 0 var(--red-d)}

/* COMMAND / PUSH / DESTROY: ramki zdjec z gazety */
.steps{display:grid;gap:30px;grid-template-columns:1fr}
.step{background:var(--cream);padding:7px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transition:transform .1s steps(3)}
.step:hover{transform:translate(-2px,-3px)}
.step video{width:100%;aspect-ratio:16/9;object-fit:cover;image-rendering:pixelated;background:#000;border:3px solid var(--ink)}
.step .cap{background:var(--navy);margin:7px -7px -7px;padding:12px 14px 14px;border-top:3px solid var(--ink);display:block}
.step b{display:block;font:400 clamp(13px,3.6vw,17px)/1.3 "PS2P",monospace;color:var(--gold);text-shadow:2px 2px 0 var(--red-d);margin-bottom:6px;text-transform:uppercase}
.step .cap span{color:var(--cream);font-size:23px}

/* HISTORIA: dwa promienie, jedna wojna */
.story{padding-top:64px}
.split{display:grid;grid-template-columns:1fr;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.split>div{padding:26px 18px 28px;font-size:25px;line-height:1.3;position:relative}
.split .az{background:repeating-conic-gradient(from 0deg at 50% 130%,#2a5fb0 0 7deg,#244f96 7deg 14deg);color:#fff}
.split .cr{background:repeating-conic-gradient(from 0deg at 50% 130%,#b83228 0 7deg,#9c2a21 7deg 14deg);color:#fff}
.split .who{display:block;font:400 10px/1.4 "PS2P",monospace;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;text-shadow:2px 2px 0 var(--ink)}
.split p{margin:0;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.fire{background:var(--ink);border:3px solid var(--ink);border-top:0;box-shadow:6px 6px 0 var(--ink);padding:22px 18px 26px;text-align:center}
.fire p{margin:0 0 16px;font-size:26px;color:var(--cream)}
.fire .big{font-family:"PS2P",monospace;font-size:clamp(22px,7vw,44px);color:var(--gold);text-shadow:4px 4px 0 var(--red-d);margin:6px 0 24px;letter-spacing:3px}
.fine{color:var(--mut);font-size:20px;margin:18px 0 0;text-align:center}

/* FIELD TEST: dodatek specjalny */
.ft{background:var(--paper) radial-gradient(rgba(42,32,24,.16) 1.2px,transparent 1.6px) 0 0/6px 6px;color:var(--brown)}
.ft::before{background:conic-gradient(var(--ink) 25%,#d7c28a 0 50%,var(--ink) 0 75%,#d7c28a 0) 0 0/8px 8px}
.ft .mast{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:400 10px/1.5 "PS2P",monospace;letter-spacing:2px;text-transform:uppercase;color:var(--red-d);border-top:3px double var(--brown);border-bottom:3px double var(--brown);padding:9px 0;margin-bottom:22px}
.ft h2{color:var(--brown);text-shadow:none;font-size:clamp(11px,3vw,14px);letter-spacing:3px}
.ft .banner{background:var(--navy);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink),inset 0 0 0 3px var(--navy2);padding:22px 16px;margin:0 0 22px;
  font-family:"PS2P",monospace;font-size:clamp(14px,5vw,34px);line-height:1.55;text-transform:uppercase;color:var(--gold);text-shadow:3px 3px 0 var(--red-d)}
.ft .banner em{font-style:normal;color:var(--crim-l)}.ft .banner i{font-style:normal;color:var(--azure-l)}
.ft p{font-size:25px;max-width:640px}
.ft .banner{max-width:none}
.ft .btn.ghost{background:transparent;color:var(--brown);border-color:var(--brown);box-shadow:0 5px 0 var(--brown)}
.ft .btn.ghost:hover{background:rgba(42,32,24,.1)}

/* YOU PLAY. WE BUILD: depesza */
.change{display:grid;gap:0;grid-template-columns:1fr;max-width:720px}
.change>div{padding:18px 18px 20px;font-size:26px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.change .a{background:var(--ink);color:var(--cream);border-color:var(--amber)}
.change .b{background:var(--gold);color:#17120a;margin-top:30px;position:relative}
.change .b::before{content:"\25BC";position:absolute;left:22px;top:-32px;font-size:22px;color:var(--gold);text-shadow:3px 3px 0 var(--ink)}
.change small{display:block;font:400 10px/1.5 "PS2P",monospace;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;color:var(--amber)}
.change .b small{color:var(--red-d)}

/* FIELD REPORTS: teleks */
.reports a{display:flex;gap:16px;align-items:baseline;padding:16px 16px;background:var(--ink);border:3px solid var(--ink);border-left:6px solid var(--amber);box-shadow:5px 5px 0 #000;text-decoration:none;font-size:25px;color:var(--cream);margin-bottom:14px}
.reports a:hover{background:var(--navy);color:var(--gold)}
.reports small{font:400 11px/1 "PS2P",monospace;color:var(--amber);letter-spacing:2px}

footer{position:relative;padding:44px 0 56px;background:var(--ink);border-top:6px solid var(--amber);color:var(--mut);font-size:21px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 20px;font:400 10px/1.6 "PS2P",monospace;text-transform:uppercase}
footer a{text-decoration:none;color:var(--cream)}footer a:hover{color:var(--gold)}
.brand{font-family:"PS2P",monospace;font-size:14px;color:var(--gold);text-shadow:2px 2px 0 var(--red-d)}

/* PRESS */
.back{max-width:720px;margin:0 auto;padding:60px 18px}
.press{background:var(--paper) radial-gradient(rgba(42,32,24,.14) 1.2px,transparent 1.6px) 0 0/6px 6px;color:var(--brown);margin:30px auto;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.press h1{font-size:clamp(18px,5vw,30px);color:var(--navy);margin:0 0 18px;text-shadow:3px 3px 0 rgba(184,50,40,.4)}
.press h2{margin-top:34px;color:var(--red-d);text-shadow:none;font-size:14px}
.press .tag{color:var(--red-d);text-shadow:none}
.press li{margin:6px 0}.press ul{padding-left:22px}
.press a{color:var(--navy)}
.press .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.press .grid img{border:3px solid var(--ink)}

@media(min-width:760px){
  body{font-size:24px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}.split>div{padding:34px 28px 38px}
  .change{grid-template-columns:1fr 1fr;gap:56px}.change .b{margin-top:0}
  .change .b::before{content:"\25B6";left:-46px;top:50%;margin-top:-14px}
  .hero .wrap{padding-bottom:50px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero video{display:none}.rise>*,.tape span{animation:none}.step:hover{transform:none}}
.btn small{display:block;margin-top:8px;font:400 9px/1.2 "PS2P",monospace;letter-spacing:1px;opacity:.75}
.hero .sub{max-width:620px;font-size:23px;line-height:1.3}
.fire p{max-width:560px;margin-left:auto;margin-right:auto}
/* TRAILER: okladka z przyciskiem play, odtwarzacz YouTube dopiero po kliknieciu */
.watch .yt,.watch iframe{display:block;width:100%;aspect-ratio:16/9;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink),0 0 0 7px var(--cream);background:#000;padding:0;margin:0 0 8px}
.watch .yt{position:relative;cursor:pointer;overflow:hidden}
.watch .yt img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.watch .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--gold);border:4px solid var(--ink);box-shadow:0 5px 0 var(--gold-d),0 5px 0 4px var(--ink);transition:transform .08s steps(2)}
.watch .play::after{content:"";position:absolute;left:30px;top:20px;border-left:30px solid var(--ink);border-top:19px solid transparent;border-bottom:19px solid transparent}
.watch .yt:hover .play,.watch .yt:focus-visible .play{transform:translateY(3px)}