/* Scena w stylu grunge + neon (10.11.2026). Ładowana po site.css na każdej stronie. */
:root { --kond: "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace; --ciezki: Impact, Haettenschweiler, "Arial Black", "Black Ops One", sans-serif; }

.nag { padding: 14px clamp(16px, 4vw, 56px); gap: 10px 28px; background: rgba(7,8,7,.92); }
.nag-logo { gap: 12px; color: var(--tekst); font: 700 30px var(--kond); letter-spacing: .01em; transform: none; }
.nag-logo svg { width: 46px; height: 46px; }
.nag nav { margin: 0 auto; gap: 4px clamp(16px, 3vw, 44px); }
.nag nav a { font: 600 15px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tekst); padding: 6px 4px 10px; }
.nag nav a:hover { color: var(--c1); border-color: transparent; }
.nag nav a[aria-current] { color: var(--tekst); border-color: var(--c1); }
.nag-ikony { display: flex; gap: 18px; align-items: center; }
.nag-ikony a { display: grid; color: var(--tekst); }
.nag-ikony a:hover { color: var(--c1); }
.nag-ikony svg { width: 24px; height: 24px; }

.scena { position: relative; isolation: isolate; overflow: hidden; min-height: min(100vh, 1000px); padding-bottom: 96px; background: #080908; }
.scena-tlo { position: absolute; inset: 0; z-index: -3; background: url("grunge.png") 0 0 / 700px repeat, radial-gradient(ellipse 60% 70% at 72% 38%, #1d211c, transparent 70%), radial-gradient(ellipse 40% 50% at 10% 85%, #141713, transparent 70%), #070807; }
.scena-prawa { position: absolute; z-index: -2; top: 0; right: 0; bottom: 60px; width: 62%; pointer-events: none; }
.scena-cma { position: absolute; right: -4%; top: 2%; width: min(56vw, 860px); transform: rotate(-9deg); opacity: .92; filter: drop-shadow(0 0 46px color-mix(in srgb, var(--c1) 30%, transparent)); -webkit-mask: url("maska-logo.png") 0 0 / 520px auto; mask: url("maska-logo.png") 0 0 / 900px auto; }
.scena-cma svg { display: block; width: 100%; height: auto; }
.scena-foto { position: absolute; right: 12%; bottom: 0; height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 35%), linear-gradient(to top, transparent, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 35%), linear-gradient(to top, transparent, #000 22%); mask-composite: intersect; }

.rog { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(238,244,228,.45); z-index: 2; }
.r1 { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.r2 { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.r3 { bottom: 104px; left: 22px; border-right: 0; border-top: 0; }
.r4 { bottom: 104px; right: 22px; border-left: 0; border-top: 0; }

.scena-w { width: min(1480px, 100%); margin: 0 auto; padding: clamp(48px, 9vh, 110px) clamp(20px, 6vw, 96px) 0; display: flex; flex-direction: column; gap: clamp(48px, 9vh, 100px); }
.etykieta { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; font: 500 15px var(--mono); text-transform: uppercase; letter-spacing: .38em; color: #d3d9cc; }
.etykieta::after { content: ""; width: 72px; height: 1px; background: currentColor; opacity: .55; }
.logo-g { position: relative; display: inline-block; margin: 0; line-height: 1; }
.logo-napis { display: block; padding: 0 .1em; font: clamp(78px, 13vw, 214px)/.86 var(--ciezki); letter-spacing: .005em; color: #e8ebe4; transform: skewX(-11deg); -webkit-mask: url("maska-logo.png") center / 100% 100%; mask: url("maska-logo.png") center / 100% 100%; }
.korona { position: absolute; width: clamp(70px, 9vw, 132px); left: 64%; top: -40%; transform: rotate(7deg); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c1) 55%, transparent)); }
.zacieki { position: absolute; left: 3%; top: 84%; width: 94%; height: clamp(40px, 7vw, 110px); }
.gatunki { margin: clamp(30px, 4.5vw, 56px) 0 36px; font: 500 clamp(14px, 1.6vw, 20px) var(--mono); text-transform: uppercase; letter-spacing: .45em; color: #d3d9cc; }
.btn-ramka { display: inline-flex; align-items: center; gap: 18px; min-height: 52px; padding: 12px 22px; font: 600 15px var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--tekst); text-decoration: none; background: rgba(7,9,7,.65); border: 2px solid var(--c1); box-shadow: 0 0 20px color-mix(in srgb, var(--c1) 32%, transparent), inset 0 0 14px color-mix(in srgb, var(--c1) 14%, transparent); }
.btn-ramka:hover { background: color-mix(in srgb, var(--c1) 14%, #070907); color: var(--tekst); }
.btn-tr { color: var(--c1); font-size: 20px; }

.najn-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: clamp(20px, 3vw, 46px); align-items: center; }
.odtw-karta { display: grid; grid-template-columns: clamp(150px, 15vw, 240px) minmax(0, 1fr); background: rgba(11,13,11,.85); border: 1px solid #22271f; }
.okladka { aspect-ratio: 1; display: grid; place-items: center; background: url("grunge.png") 0 0 / 360px, radial-gradient(circle, #1f251d, #0a0b0a 72%); border: 1px solid #3b4238; }
.okladka svg { width: 80%; height: auto; -webkit-mask: url("maska-logo.png") 0 0 / 360px auto; mask: url("maska-logo.png") 0 0 / 360px auto; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c1) 40%, transparent)); }
.odtw-srodek { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2.4vw, 34px) clamp(18px, 3vw, 44px); }
.odtw-art { margin: 0 0 6px; font: 500 14px var(--mono); text-transform: uppercase; letter-spacing: .3em; color: var(--cichy); }
.scena .odtw-tyt { margin: 0 0 22px; font: 700 clamp(30px, 3.6vw, 48px)/1 var(--kond); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0; color: var(--tekst); overflow-wrap: anywhere; }
.kontrolki { display: flex; align-items: center; gap: 16px; }
.k-graj { flex: none; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; font-size: 20px; color: #070907; background: #f1f4ec; border: 0; border-radius: 50%; }
.najnowszy.gra .k-graj { background: var(--c1); box-shadow: 0 0 22px color-mix(in srgb, var(--c1) 50%, transparent); }
.k-mal { flex: none; width: 34px; height: 34px; padding: 5px; color: var(--tekst); background: none; border: 0; }
.k-mal:hover { color: var(--c1); }
.k-mal svg { width: 100%; height: 100%; }
.fala { flex: 1; min-width: 90px; height: 50px; display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.fala i { flex: 1; min-height: 3px; height: calc(var(--h) * 100%); background: #5e645a; border-radius: 1px; }
.fala i.on { background: var(--c1); box-shadow: 0 0 6px color-mix(in srgb, var(--c1) 55%, transparent); }
.czas { flex: none; margin-left: 10px; font: 500 14px var(--mono); color: var(--cichy); }
.platformy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.platformy a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 18px; font: 600 18px var(--kond); color: var(--tekst); text-decoration: none; background: rgba(7,9,7,.78); border: 1px solid #3b4238; }
.platformy a.pierwsza, .platformy a:hover { border-color: var(--c1); color: var(--c1); }
.platformy svg { flex: none; width: 24px; height: 24px; }
.platformy i { margin-left: auto; font-style: normal; font-size: 19px; }
.krawedz { position: absolute; left: 0; bottom: -1px; width: 100%; height: 92px; z-index: 1; }

@media (max-width: 980px) {
  .nag nav { order: 3; width: 100%; margin: 0; }
  .nag-ikony { margin-left: auto; }
  .scena-prawa { width: 100%; opacity: .3; }
  .scena-cma { width: 110vw; right: -30%; top: 4%; }
  .najn-uklad { grid-template-columns: 1fr; }
  .platformy { display: grid; grid-template-columns: 1fr 1fr; }
  .r3, .r4 { display: none; }
}
@media (max-width: 620px) {
  .etykieta { letter-spacing: .24em; font-size: 13px; }
  .gatunki { letter-spacing: .22em; }
  .btn-ramka { letter-spacing: .1em; gap: 12px; }
  .odtw-karta { grid-template-columns: 1fr; }
  .okladka { display: none; }
  .kontrolki { flex-wrap: wrap; }
  .fala { order: 5; flex-basis: 100%; margin: 6px 0 0; }
  .platformy { grid-template-columns: 1fr; }
  .rog { display: none; }
}