/* =========================================================
   PORADNIKI: ramki, os czasu i makiety ekranow (Discord / Steam)
   Uzycie w tresci wpisu blokiem HTML. Makiety odtwarzaja to, co czytelnik zobaczy,
   zeby wiedzial, w co kliknac; zlota obwodka + "kliknij" = miejsce do klikniecia.
   ========================================================= */
.dl-artykul .dl-ramka { position: relative; margin: 28px 0; padding: 18px 20px 18px 56px; background: rgba(238, 187, 96, .06); border: 1px solid rgba(238, 187, 96, .28); border-left: 3px solid #eebb60; }
.dl-artykul .dl-ramka::before { content: "i"; position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; border-radius: 50%; font: 800 15px/24px 'Rajdhani', sans-serif; text-align: center; color: #0a0a0c; background: #eebb60; }
.dl-artykul .dl-ramka.uwaga { background: rgba(255, 123, 123, .06); border-color: rgba(255, 123, 123, .3); border-left-color: #ff7b7b; }
.dl-artykul .dl-ramka.uwaga::before { content: "!"; background: #ff7b7b; }
.dl-artykul .dl-ramka.ok { background: rgba(111, 224, 163, .06); border-color: rgba(111, 224, 163, .3); border-left-color: #6fe0a3; }
.dl-artykul .dl-ramka.ok::before { content: "\2713"; background: #6fe0a3; }
.dl-artykul .dl-ramka p { margin: 0; }
.dl-artykul .dl-ramka p + p { margin-top: 8px; }
.dl-artykul .dl-ramka strong { color: #fff !important; }

/* os czasu: kroki w poziomie (na telefonie w pionie) */
.dl-artykul ol.dl-os { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 30px 0; padding: 0; list-style: none; }
.dl-artykul ol.dl-os > li { position: relative; margin: 0; padding: 52px 8px 0; text-align: center; font-size: 14.5px; line-height: 1.35; color: #cdcdcd; }
.dl-artykul ol.dl-os > li::before { content: attr(data-nr); position: absolute; top: 0; left: 50%; z-index: 1; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; font: 800 18px/38px 'Rajdhani', sans-serif; text-align: center; color: #0a0a0c; background: #eebb60; box-shadow: 0 0 0 5px #0f0f13; transform: none; }
.dl-artykul ol.dl-os > li::after { content: ""; position: absolute; top: 18px; left: 50%; width: 100%; height: 2px; background: rgba(238, 187, 96, .35); }
.dl-artykul ol.dl-os > li:last-child::after { display: none; }
.dl-artykul .dl-os b { display: block; color: #fff; }
.dl-artykul .dl-os i { display: block; margin-top: 2px; font-size: 13px; font-style: normal; color: #eebb60; }

/* lista z ptaszkami */
.dl-artykul ul.dl-lista-ok { margin: 18px 0; padding: 0; list-style: none; }
.dl-artykul ul.dl-lista-ok > li { position: relative; padding-left: 34px; }
.dl-artykul ul.dl-lista-ok > li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; font: 800 13px/22px 'Rajdhani', sans-serif; text-align: center; color: #0a0a0c; background: #6fe0a3; transform: none; }

/* makieta: "ekran" z podpisem */
.dl-artykul figure.dl-ui { margin: 26px 0 30px; }
.dl-artykul .dl-ui-ekran { position: relative; overflow: visible; padding: 18px; border-radius: 8px; font-family: 'Noto Sans', 'Segoe UI', system-ui, sans-serif; font-size: 14.5px; line-height: 1.45; color: #dbdee1; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.dl-artykul figure.dl-ui figcaption { margin-top: 10px; font-size: 13.5px; color: #8f8f9b; text-align: center; }
.dl-artykul .dl-ui-klik { position: relative; display: inline-flex; align-items: center; }
.dl-artykul .dl-ui-klik::after {
	content: "kliknij"; position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
	padding: 3px 9px 3px 14px; font: 800 12px/1.4 'Rajdhani', sans-serif; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
	color: #0a0a0c; background: #eebb60; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.dl-artykul .dl-ui-klik > span { box-shadow: 0 0 0 3px rgba(0, 0, 0, .6), 0 0 0 5px #eebb60; animation: dl-ui-puls 1.8s ease-in-out infinite; }
@keyframes dl-ui-puls { 50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .6), 0 0 0 8px rgba(238, 187, 96, .5); } }

/* Discord */
.dl-artykul .dl-ui-discord { background: #313338; }
.dl-artykul .dl-ui-kanal { display: inline-block; margin-bottom: 12px; padding: 2px 8px; border-radius: 4px; font-size: 13.5px; font-weight: 600; color: #c9cdfb; background: rgba(88, 101, 242, .3); }
.dl-artykul .dl-ui-wiad { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.dl-artykul .dl-ui-wiad > img { width: 40px; height: 40px; margin: 0; border: 0 !important; border-radius: 50%; }
.dl-artykul .dl-ui-autor { font-weight: 600; color: #f2f3f5; }
.dl-artykul .dl-ui-autor em { margin-left: 6px; padding: 1px 5px; border-radius: 3px; font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 1px; color: #fff !important; background: #5865f2; }
.dl-artykul .dl-ui-embed { max-width: 520px; margin-top: 6px; padding: 12px 16px 14px; border-left: 4px solid #eebb60; border-radius: 4px; background: #2b2d31; }
.dl-artykul .dl-ui-embed b { display: block; margin-bottom: 6px; font-size: 15.5px; color: #f2f3f5 !important; }
.dl-artykul .dl-ui-embed p { margin: 0; font-size: 14px; color: #dbdee1; }
.dl-artykul .dl-ui-embed code { padding: 1px 6px; font-size: 13.5px; color: #f2f3f5; background: #1e1f22; }
.dl-artykul .dl-ui-guzik { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 16px; border-radius: 4px; font-size: 14px; font-weight: 600; color: #fff; background: #248046; }
.dl-artykul .dl-ui-guzik.niebieski { background: #5865f2; }
.dl-artykul .dl-ui-guzik.szary { background: #4e5058; }

/* Steam */
.dl-artykul .dl-ui-steam { background: linear-gradient(180deg, #1b2838, #171a21); color: #c6d4df; font-family: 'Motiva Sans', 'Noto Sans', Arial, sans-serif; }
.dl-artykul .dl-ui-adres { margin: -18px -18px 16px; padding: 8px 14px; border-bottom: 1px solid #2a3542; border-radius: 8px 8px 0 0; font-family: Consolas, monospace; font-size: 12.5px; color: #8f98a0; background: #0e1116; }
.dl-artykul .dl-ui-steam-tytul { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8f98a0; }
.dl-artykul .dl-ui-pole { padding: 10px 12px; border: 1px solid #3a4a5c; border-radius: 3px; color: #c6d4df; background: #0f141a; }
.dl-artykul .dl-ui-pole mark { padding: 2px 6px; font-weight: 700; color: #0a0a0c; background: #eebb60; }
.dl-artykul .dl-ui-steam-guzik { display: inline-flex; align-items: center; margin-top: 12px; padding: 7px 18px; border-radius: 2px; font-size: 14px; color: #d2efa9; background: linear-gradient(90deg, #75b022 5%, #588a1b 95%); }
.dl-artykul .dl-ui-steam-guzik.szary { color: #c6d4df; background: #3d4450; }
.dl-artykul .dl-ui-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dl-artykul .dl-ui-wiersz > img { width: 48px; height: 48px; margin: 0; border: 0 !important; border-radius: 3px; }
.dl-artykul .dl-ui-tekst { flex: 1 1 200px; min-width: 0; }
.dl-artykul .dl-ui-tekst b { display: block; color: #fff !important; }
.dl-artykul .dl-ui-tekst span { font-size: 13.5px; color: #8f98a0; }
.dl-artykul .dl-ui-wiersz .dl-ui-steam-guzik { margin-top: 0; }
.dl-artykul .dl-ui-okladka { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; font: 700 17px 'Cinzel', Georgia, serif; letter-spacing: 1px; color: #eebb60; border: 1px solid #3a4a5c; background: #0a0a0c; }

@media (max-width: 760px) {
	.dl-artykul ol.dl-os { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.dl-artykul ol.dl-os > li { min-height: 38px; padding: 0 0 0 54px; text-align: left; }
	.dl-artykul ol.dl-os > li::before { left: 0; margin-left: 0; }
	.dl-artykul ol.dl-os > li::after { top: 40px; left: 18px; width: 2px; height: calc(100% - 22px); }
	.dl-artykul .dl-ui-klik { margin-bottom: 34px; }
	.dl-artykul .dl-ui-klik::after { content: "\2191  kliknij"; left: 0; top: calc(100% + 10px); transform: none; padding: 3px 9px; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) { .dl-artykul .dl-ui-klik > span { animation: none; } }

/* Steam: strona zaproszen do testow (Playtest Invites), jak na prawdziwej stronie */
.dl-artykul .dl-ui-playtest { padding-bottom: 20px; color: #c7d5e0; background: #1b2838; font-family: 'Motiva Sans', 'Noto Sans', Arial, sans-serif; }
.dl-artykul .dl-ui-pt-glowka { margin: 0 -18px 16px; padding: 9px 18px; font-size: 17px; color: #fff; background: linear-gradient(90deg, #2a475e, #1f3e58 60%, #2a475e); }
.dl-artykul .dl-ui-pt-karta { margin: 0 4px; padding: 14px 16px 16px; background: #16202d; }
.dl-artykul .dl-ui-pt-kto { margin: 0 0 12px; font-size: 15px; color: #c7d5e0; }
.dl-artykul .dl-ui-pt-kto b { color: #fff !important; }
.dl-artykul .dl-ui-playtest .dl-ui-wiersz > img.dl-ui-pt-okladka { width: 150px; height: 56px; object-fit: cover; border-radius: 0; }
.dl-artykul .dl-ui-playtest .dl-ui-tekst span { color: #8f98a0; }
.dl-artykul .dl-ui-pt-guzik { display: inline-flex; align-items: center; padding: 8px 22px; border-radius: 2px; font-size: 15px; color: #fff; background: linear-gradient(90deg, #47bfff 5%, #1a44c2 60%); }
.dl-artykul .dl-ui-pt-guzik.szary { color: #dfe3e6; background: #3d4450; }