/* Noirplay Story: kinowa, nocna oprawa dla gier fabularnych */
.story-page{background:
  radial-gradient(50rem 30rem at 80% -10%,rgba(192,201,219,.22),transparent 60%),
  radial-gradient(40rem 30rem at 0% 40%,rgba(99,41,50,.30),transparent 60%),#0a0a0d}
.story-hero{position:relative;padding:70px 0 30px;max-width:860px}
.story-hero h1{font-size:clamp(42px,7vw,82px);line-height:1.02;letter-spacing:-.045em;margin:16px 0 22px}
.story-reel{display:flex;gap:12px;margin-top:22px}
.story-reel span{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-size:22px;color:#1e1e24;
 background:linear-gradient(135deg,#dee3ec,#f6c98b);box-shadow:0 12px 30px -12px rgba(192,201,219,.8)}
.story-reel span:nth-child(2){background:linear-gradient(135deg,#f6d9a8,#9fb6d9)}
.story-reel span:nth-child(3){background:linear-gradient(135deg,#ddd5d5,#eb8391)}
.story-reel span:nth-child(4){background:linear-gradient(135deg,#f6c98b,#a2d0c1)}
.story-list{display:grid;gap:26px;margin:20px 0 50px}
.story-card{display:grid;grid-template-columns:minmax(200px,300px) 1fr;overflow:hidden;border-radius:28px;border:1px solid var(--line-2);
 background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));box-shadow:var(--shadow)}
.story-poster{position:relative;display:grid;place-items:center;min-height:260px;
 background:radial-gradient(circle at 50% 30%,rgba(255,232,190,.35),transparent 55%),linear-gradient(170deg,#25252d,#101013)}
.story-poster span{font-size:96px;line-height:1;color:#ffe7bf;text-shadow:0 0 40px rgba(246,201,139,.6)}
.story-po-godzinach .story-poster{background:radial-gradient(circle at 50% 25%,rgba(211,201,201,.35),transparent 55%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px),linear-gradient(170deg,#212128,#09090c)}
.story-klub-masek .story-poster{background:radial-gradient(circle at 50% 30%,rgba(246,201,139,.4),transparent 55%),linear-gradient(170deg,#282831,#101014)}
.story-malwersacja .story-poster{background:radial-gradient(circle at 50% 30%,rgba(246,201,139,.4),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),linear-gradient(170deg,#1d2a3a,#0b1018)}
.story-malwersacja .story-poster span{font-family:var(--serif);color:#f6d9a8}
.story-czwarty-element .story-poster{background:radial-gradient(circle at 50% 30%,rgba(162,208,193,.35),transparent 55%),linear-gradient(170deg,#162422,#0c1211)}
.story-body{padding:30px 32px}
.story-kicker{margin:0;font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--gold)}
.story-body h2{margin:8px 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,48px);letter-spacing:-.01em}
.story-tagline{margin:0 0 16px;font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--blush)}
.story-meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 16px}
.story-meta li{padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;font-weight:750;color:var(--muted)}
.story-points{margin:0 0 22px;padding-left:20px;color:var(--muted);line-height:1.7}
.story-how{margin:10px 0 50px}
.story-how h2{font-size:clamp(28px,3.4vw,40px);margin:0 0 18px}
@media(max-width:760px){
 .story-card{grid-template-columns:1fr}
 .story-poster{min-height:150px}
 .story-poster span{font-size:70px}
 .story-body{padding:22px 20px}
 .story-hero{padding:40px 0 16px}
}
@media(forced-colors:active){.story-card{border:2px solid CanvasText}}
.story-time-note{margin:18px 0 8px;padding:14px 18px;border-radius:16px;border-left:4px solid var(--gold);background:rgba(246,201,139,.08)}