/* RETRO PRL :: emalia, neon Pewex, odbiornik UKF. Bez złota, bez szeryfów, bez kursywy. */
:root {
  --akcent: #c41e2a; --tlo: #f1e8d4; --tekst: #1d2b4c; --na-akcencie: #fff;
  --navy: #1d2b4c; --navy-2: #13203b; --mint: #2f8f74; --enamel: #fbf7ee; --cream-2: #e6dbc2;
  --neon-a: #ff4f9a; --neon-b: #3be0f0;
  --display: 'Bungee', 'Rubik', system-ui, sans-serif; --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1); --focus: #0b6bcb;
  --plate-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 0 rgba(0,0,0,.08) inset, 0 2px 0 rgba(29,43,76,.12), 0 10px 24px -12px rgba(29,43,76,.45);
}
body {
  font-family: var(--body); font-size: 17px; line-height: 1.55;
  background-color: var(--tlo);
  background-image:
    radial-gradient(rgba(29,43,76,.09) 1px, transparent 1.4px),
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.55), transparent 70%);
  background-size: 10px 10px, 100% 100%;
}
h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--display); letter-spacing: .01em; line-height: 1.05; }
p { margin: 0; }

/* ---------- pasek ---------- */
.bar { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--enamel); border-bottom: 4px solid var(--akcent); }
.bar-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 24px; }
.plate-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; background: var(--enamel); color: var(--navy); border: 3px solid var(--akcent); border-radius: 10px; text-decoration: none; box-shadow: var(--plate-shadow); font-family: var(--display); font-size: 15px; white-space: nowrap; max-width: 52vw; overflow: hidden; }
.plate-logo img { width: 30px; height: 30px; object-fit: contain; }
.plate-logo-txt { overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 10px 12px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: background .18s, color .18s; }
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.langs { display: flex; gap: 6px; }
.langs button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(251,247,238,.5); background: transparent; color: var(--enamel); font-weight: 800; font-size: 13px; transition: transform .2s var(--ease), background .2s; }
.langs button:hover { transform: translateY(-2px); }
.langs button.is-on { background: var(--enamel); color: var(--navy); border-color: var(--enamel); }

/* ---------- hero ---------- */
.hero { max-width: 1240px; margin: 0 auto; padding: 56px 24px 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero-sign { position: relative; padding: 40px 32px 44px; background: linear-gradient(180deg, #172440, #0f1a30); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(15,26,48,.8), inset 0 0 0 6px #22325a, inset 0 0 0 8px #0b1324; overflow: hidden; }
.hero-sign::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 92px); pointer-events: none; }
.sign-kicker { position: relative; display: inline-flex; align-items: center; gap: 10px; color: #cfd8ef; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.neon { position: relative; margin: 20px 0 24px; font-size: clamp(44px, 7.4vw, 104px); color: #fff4fa; overflow-wrap: anywhere; hyphens: auto;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--neon-a), 0 0 26px var(--neon-a), 0 0 52px var(--neon-a), 0 0 90px rgba(255,79,154,.6);
  animation: flicker 7s infinite steps(1); }
html.party .neon { animation: party-hue 2s linear infinite, flicker 7s infinite steps(1); }
@keyframes party-hue { to { filter: hue-rotate(360deg); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; } 44% { opacity: .7; } 45% { opacity: 1; } 78% { opacity: 1; } 79% { opacity: .82; } 80% { opacity: 1; } }
html.rm .neon { animation-duration: 14s; }
.tape { position: relative; display: inline-block; padding: 8px 16px; background: var(--neon-b); color: #062a30; font-weight: 800; font-size: clamp(15px, 1.6vw, 19px); transform: rotate(-1.5deg); box-shadow: 0 6px 0 rgba(0,0,0,.25); text-shadow: none; }
.lamp { width: 12px; height: 12px; border-radius: 50%; background: #5d2329; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); flex: none; transition: background .3s, box-shadow .3s; }
html.is-live .lamp { background: #ff3b3b; box-shadow: 0 0 0 3px rgba(255,59,59,.25), 0 0 14px #ff3b3b; animation: lamp 1.6s var(--ease) infinite; }
@keyframes lamp { 50% { box-shadow: 0 0 0 6px rgba(255,59,59,.1), 0 0 22px #ff3b3b; } }

/* odbiornik */
.receiver { --lvl: .1; position: relative; background: linear-gradient(180deg, #fffaf0, #eee3cb); border-radius: 22px; padding: 18px 20px 16px; border: 3px solid var(--navy); box-shadow: 0 2px 0 #fff inset, 0 24px 50px -24px rgba(29,43,76,.7), 8px 8px 0 var(--navy); }
.rcv-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 12px; letter-spacing: .2em; }
.rcv-onair { display: inline-flex; gap: 8px; align-items: center; color: var(--akcent); }
.dial { position: relative; margin: 12px 0 16px; height: 58px; border-radius: 10px; background: linear-gradient(180deg, #1c2a49, #101a31); box-shadow: inset 0 3px 10px rgba(0,0,0,.6); overflow: hidden; }
.dial-scale { position: absolute; inset: 0 14px; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 8px; color: #f3d9a6; font-weight: 700; font-size: 12px; background: repeating-linear-gradient(90deg, rgba(243,217,166,.7) 0 1px, transparent 1px 10px) top 8px left 0 / 100% 14px no-repeat; }
.dial-scale span { font-variant-numeric: tabular-nums; }
.dial-needle { position: absolute; top: 4px; bottom: 4px; left: 0; width: 3px; background: var(--akcent); box-shadow: 0 0 10px var(--akcent); border-radius: 2px; transform: translateX(var(--needle, 20px)); transition: transform 2.2s cubic-bezier(.34, 1.2, .4, 1); }
.rcv-body { display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; }
.cover { margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 3px solid var(--navy); background: var(--navy); box-shadow: 4px 4px 0 var(--akcent); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
html.is-playing .cover img { transform: scale(calc(1 + var(--lvl) * .03)); }
.np { min-width: 0; }
.np-label { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--akcent); }
.np-title { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; margin: 4px 0 2px; overflow-wrap: anywhere; }
.np-artist { font-weight: 500; font-size: 17px; }
.progress { height: 6px; margin: 12px 0 8px; background: var(--cream-2); border-radius: 6px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 100%; background: var(--navy); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1s linear; }
.np-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rcv-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 2px dashed rgba(29,43,76,.25); }
.knob-play { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ff5a62, var(--akcent) 55%, #8d1019); color: #fff; box-shadow: 0 6px 0 #6d0c14, 0 14px 24px -8px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.4); display: grid; place-items: center; transition: transform .15s var(--ease), box-shadow .15s; }
.knob-play::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--navy); opacity: .9; }
.knob-play:hover { transform: translateY(-2px); }
.knob-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #6d0c14, 0 6px 12px -6px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3); }
.knob-play svg { width: 36px; height: 36px; fill: currentColor; }
.i-pause, html.is-playing .i-play, html.is-loading .i-play { display: none; }
html.is-playing .i-pause, html.is-loading .i-pause { display: block; }
html.is-loading .knob-play { animation: knob-load 1s var(--ease) infinite; }
@keyframes knob-load { 50% { transform: scale(.94); } }
.ctl-col { display: grid; gap: 2px; min-width: 0; }
.ctl-label { font-family: var(--display); font-size: 18px; }
.vol { display: flex; align-items: center; gap: 8px; }
.vol svg { width: 22px; height: 22px; fill: var(--navy); flex: none; }
.vol input { width: 100%; --track-h: 10px; --track-on: var(--navy); --track-off: var(--cream-2); --thumb: var(--akcent); }
.status { font-size: 13px; color: var(--akcent); font-weight: 700; min-height: 1em; }
.vu { width: 96px; }
.vu-face { position: relative; height: 64px; border-radius: 8px 8px 4px 4px; background: radial-gradient(120% 140% at 50% 120%, #fff6d9, #f1dfae); border: 3px solid var(--navy); overflow: hidden; }
.vu-face::before { content: ''; position: absolute; left: 10%; right: 10%; top: 12px; height: 60px; border-radius: 50% 50% 0 0; border-top: 3px solid var(--navy); border-image: linear-gradient(90deg, var(--navy) 70%, var(--akcent) 70%) 1; }
.vu-face b { position: absolute; left: 8px; bottom: 4px; font-size: 10px; letter-spacing: .1em; }
.vu-needle { position: absolute; left: 50%; bottom: -6px; width: 2px; height: 58px; background: var(--navy); transform-origin: 50% 100%; transform: rotate(calc(-48deg + var(--lvl) * 96deg)); transition: transform .08s linear; }
.rcv-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.rcv-foot b { font-weight: 700; }

/* ---------- ticker ---------- */
.ticker { background: var(--akcent); color: var(--na-akcencie); border-block: 4px solid var(--navy); overflow: hidden; transform: rotate(-1deg); margin: 12px -10px 0; }
.ticker-in { display: flex; width: max-content; gap: 48px; padding: 12px 0; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; animation: ticker 36s linear infinite; }
.ticker-in > span { white-space: nowrap; }
.ticker-in > span::after { content: '★'; margin-left: 48px; }
html.rm .ticker-in { animation-duration: 90s; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- sekcje ---------- */
.sec { max-width: 1240px; margin: 0 auto; padding: 88px 24px 24px; }
.sec-head { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; margin-bottom: 32px; }
.sec-num { grid-row: span 2; font-family: 'Bungee Shade', var(--display); font-size: clamp(56px, 8vw, 96px); line-height: .9; color: var(--akcent); }
.sec-head h2 { font-size: clamp(36px, 5vw, 60px); }
.sec-sub { font-weight: 500; font-size: 18px; }

/* Top 20: tabliczki emaliowane */
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; counter-reset: p; }
.plate { --i: 0; display: grid; grid-template-columns: 56px 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: var(--enamel); border: 3px solid var(--navy); border-radius: 12px; box-shadow: var(--plate-shadow); opacity: 0; transform: translateY(18px) rotate(-.6deg); transition: transform .28s var(--ease), box-shadow .28s; }
.chart.in-view .plate { animation: plate-in .7s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes plate-in { to { opacity: 1; transform: none; } }
.plate:hover { transform: translateY(-3px) rotate(.4deg); box-shadow: var(--plate-shadow), 6px 6px 0 var(--akcent); }
.plate-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--enamel); font-family: var(--display); font-size: 22px; box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px var(--navy); font-variant-numeric: tabular-nums; }
.plate:nth-child(-n+3) .plate-num { background: var(--akcent); color: #fff; box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 5px var(--akcent); }
.plate-cover { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--cream-2); }
.plate-txt { min-width: 0; display: grid; }
.plate-txt b { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-txt span { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-move { min-width: 52px; text-align: center; padding: 4px 8px; border-radius: 6px; font-weight: 800; font-size: 13px; background: var(--cream-2); font-variant-numeric: tabular-nums; }
.plate[data-ruch="up"] .plate-move { background: var(--mint); color: #fff; }
.plate[data-ruch="down"] .plate-move { background: var(--navy); color: #fff; }
.plate[data-ruch="new"] .plate-move { background: var(--akcent); color: #fff; }

/* Czat: telegram */
.tg { position: relative; background: #fffdf6; border: 3px solid var(--navy); border-radius: 6px; box-shadow: 10px 10px 0 var(--navy); padding: 0 0 18px; }
.tg::before, .tg::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 6px 5px, var(--tlo) 3px, transparent 3.5px) 0 0 / 14px 10px repeat-x; }
.tg::before { top: -3px; } .tg::after { bottom: -3px; }
.tg-head { display: flex; justify-content: space-between; padding: 22px 24px 14px; border-bottom: 3px double var(--navy); font-family: var(--display); font-size: 22px; color: var(--akcent); }
.tg-list { max-height: 360px; padding: 12px 24px; display: grid; gap: 4px; align-content: start; }
.tg-msg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed rgba(29,43,76,.3); text-transform: uppercase; font-weight: 500; letter-spacing: .03em; animation: np-swap .5s var(--ease); }
.tg-msg b { color: var(--akcent); font-weight: 800; }
.tg-msg.is-studio b { background: var(--navy); color: var(--enamel); padding: 0 6px; border-radius: 4px; }
.tg-time { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.tg-txt { flex: 1 1 200px; }
.stop { font-weight: 800; font-size: 12px; opacity: .6; }
.tg-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px 24px 0; }
.tg-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; flex: 0 1 200px; }
.tg-form label.grow { flex: 1 1 280px; }
.tg-form input { min-height: 48px; padding: 0 14px; border: 3px solid var(--navy); border-radius: 8px; background: var(--enamel); font-size: 16px; }
.tg-form input:focus-visible { outline-offset: 1px; }
.btn-red { min-height: 48px; padding: 0 24px; border: 3px solid var(--navy); border-radius: 8px; background: var(--akcent); color: var(--na-akcencie); font-family: var(--display); font-size: 16px; box-shadow: 0 4px 0 var(--navy); transition: transform .12s var(--ease), box-shadow .12s; }
.btn-red:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.form-status { flex-basis: 100%; color: var(--akcent); font-weight: 700; }

/* Ramówka: tablica dworcowa */
.board { list-style: none; margin: 0; padding: 12px; background: var(--navy); border-radius: 14px; box-shadow: inset 0 0 0 4px #2b3d68, 0 20px 40px -24px rgba(0,0,0,.6); color: #f4ecd8; }
.row { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(244,236,216,.15); }
.row:last-child { border-bottom: 0; }
.row-time { font-family: var(--display); font-size: 18px; color: var(--neon-b); font-variant-numeric: tabular-nums; }
.row b { font-weight: 700; font-size: 18px; }
.row.is-now { background: var(--akcent); color: #fff; border-radius: 8px; }
.row.is-now .row-time { color: #fff; }
.row.is-now b::after { content: ' ●'; animation: lamp 1.4s infinite; }

/* O nas: emaliowany szyld */
.enamel { position: relative; padding: 48px clamp(24px, 5vw, 64px); background: var(--enamel); border: 6px solid var(--akcent); border-radius: 22px; box-shadow: var(--plate-shadow), 0 0 0 4px var(--enamel), 0 0 0 7px var(--navy); }
.enamel h2 { font-size: clamp(32px, 4vw, 48px); color: var(--akcent); margin-bottom: 18px; }
.about-txt { max-width: 68ch; font-size: 19px; display: grid; gap: 14px; }
.rivet { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9aa3b5 60%, #5c667c); }
.r1 { top: 14px; left: 14px; } .r2 { top: 14px; right: 14px; } .r3 { bottom: 14px; left: 14px; } .r4 { bottom: 14px; right: 14px; }
.social-wrap { margin-top: 32px; }
.social-wrap h3 { font-size: 18px; margin-bottom: 12px; }
.social { display: flex; flex-wrap: wrap; gap: 12px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; border-radius: 99px; background: var(--navy); color: var(--enamel); text-decoration: none; font-weight: 700; transition: transform .2s var(--ease), background .2s; }
.social-link svg { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--enamel); fill: var(--navy); }
.social-link:hover { transform: translateY(-3px) rotate(-2deg); background: var(--akcent); }

/* stopka */
.foot { margin-top: 96px; background: var(--navy); color: var(--enamel); border-top: 6px solid var(--akcent); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 32px 24px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; font-size: 15px; }
.sig a { font-weight: 800; color: var(--neon-b); }
.btn-ghost { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 2px solid var(--enamel); background: transparent; font-weight: 700; }

/* easter egg */
.rl-konami { background: rgba(13,21,40,.92); }
.rl-konami-in .pewex { font-family: var(--display); font-size: clamp(56px, 14vw, 140px); color: #fff; text-shadow: 0 0 8px #fff, 0 0 24px var(--neon-a), 0 0 60px var(--neon-a); animation: flicker 3s infinite steps(1); }
.rl-konami-in p { font-size: 20px; font-weight: 700; color: var(--neon-b); }

/* ---------- responsywność ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .nav { display: none; }
  .langs { margin-left: auto; }
}
@media (max-width: 820px) {
  .plates { grid-template-columns: 1fr; }
  .row { grid-template-columns: 110px 1fr; }
  .row > span:last-child { grid-column: 2; font-size: 14px; opacity: .85; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .bar-in { padding: 8px 16px; gap: 12px; }
  .langs button { width: 40px; height: 40px; }
  .hero { padding: 28px 16px 32px; }
  .hero-sign { padding: 28px 20px 32px; }
  .receiver { padding: 14px; box-shadow: 0 2px 0 #fff inset, 5px 5px 0 var(--navy); }
  .rcv-body { grid-template-columns: 96px 1fr; gap: 14px; }
  .rcv-controls { grid-template-columns: auto 1fr; }
  .vu { display: none; }
  .knob-play { width: 72px; height: 72px; }
  .sec { padding: 64px 16px 16px; }
  .plate { grid-template-columns: 44px 44px 1fr auto; gap: 10px; padding: 8px 10px 8px 8px; }
  .plate-num { width: 44px; height: 44px; font-size: 17px; }
  .plate-cover { width: 44px; height: 44px; }
  .plate-move { min-width: 40px; padding: 4px 6px; }
  .tg-head, .tg-list, .tg-form { padding-left: 16px; padding-right: 16px; }
  .tg { box-shadow: 5px 5px 0 var(--navy); }
  .row { grid-template-columns: 1fr; gap: 2px; }
  .row > span:last-child { grid-column: 1; }
  .enamel { box-shadow: var(--plate-shadow); }
}