@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Pixelify+Sans:wght@400;500;600;700&display=swap&subset=latin-ext');

:root {
    --black: #0d0d0f;
    --black-2: #131316;
    --panel: #19191d;
    --panel-2: #222126;
    --line: #3b343a;
    --line-bright: #64515b;
    --white: #f4f0f2;
    --gray: #a9a1a6;
    --gray-dark: #6b646a;
    --red: #d9274c;
    --red-light: #ff5b78;
    --red-dark: #74162d;
    --purple: #6556c8;
    --purple-dark: #39317e;
    --pixel: 'Pixelify Sans', 'Courier New', monospace;
    --sans: Inter, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { min-height: 100vh; overflow-x: hidden; color: var(--white); background: var(--black); font-family: var(--sans); image-rendering: pixelated; }
a { color: inherit; }

body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 48px 48px; }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 70% 38%, rgba(130,20,46,.16), transparent 30%), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.pixel-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .42; background-image: radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1px), radial-gradient(circle, rgba(227,52,69,.8) 0 1px, transparent 1px); background-size: 131px 109px, 197px 173px; background-position: 17px 26px, 80px 71px; }
.cursor-light { position: fixed; z-index: 8; top: 0; left: 0; width: 280px; height: 280px; pointer-events: none; opacity: 0; transform: translate(calc(var(--mx, -50%) - 50%), calc(var(--my, -50%) - 50%)); background: radial-gradient(circle, rgba(227,52,69,.18), rgba(227,52,69,.05) 45%, transparent 72%); filter: blur(4px); transition: opacity .25s ease; }
.cursor-active .cursor-light { opacity: 1; }

.topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 34px; min-height: 86px; padding: 0 clamp(16px, 5vw, 82px); background: rgba(13,13,15,.94); border-bottom: 2px solid #292529; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-icon { display: grid; place-items: center; width: 52px; height: 52px; background: var(--panel-2); border: 2px solid var(--line-bright); box-shadow: inset 0 0 0 2px var(--black), 4px 4px 0 #080809; }
.brand-icon img { width: 42px; height: 42px; object-fit: contain; }
.brand-text { color: var(--white); font-family: var(--pixel); font-size: 21px; font-weight: 700; letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }
.brand-text span { color: var(--red-light); }
.nav { display: flex; align-items: center; gap: 5px; height: 100%; }
.nav-item { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 17px; color: var(--gray); border: 2px solid transparent; font-family: var(--pixel); font-size: 15px; font-weight: 600; text-decoration: none; transition: .18s ease; }
.nav-item:hover, .nav-item.active { color: var(--white); background: var(--panel); border-color: var(--line); box-shadow: 3px 3px 0 #080809; }
.nav-item.active { color: var(--red-light); border-color: var(--red-dark); background: rgba(227,52,69,.1); }
.nav-item i { font-size: 19px; transition: transform .18s ease; }
.tools-menu { position: relative; display: flex; align-items: center; height: 100%; }
.tools-menu:hover .tools-trigger i, .tools-menu:focus-within .tools-trigger i, .hero-tools:hover > .red-button i { transform: rotate(180deg); }
.discord { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 152px; height: 45px; margin-left: auto; color: #fff; background: var(--purple); border: 2px solid #8d80ee; border-bottom-color: var(--purple-dark); box-shadow: 3px 3px 0 #14112e; font-family: var(--pixel); font-size: 15px; text-decoration: none; transition: .18s ease; }
.discord:hover { background: #7769dd; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #14112e; }
.discord i { font-size: 20px; }

.tools-panel { position: absolute; top: 100%; left: 0; z-index: 200; display: flex; gap: 12px; width: 670px; padding: 13px; background: var(--black-2); border: 2px solid var(--line-bright); border-top: 3px solid var(--red); box-shadow: 6px 7px 0 #060607; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.tools-menu:hover .tools-panel, .tools-menu:focus-within .tools-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.tools-group { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 9px; }
.tools-group h2 { padding: 8px 9px; color: var(--red-light); background: rgba(227,52,69,.12); border: 2px solid var(--red-dark); text-align: center; font-family: var(--pixel); font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.tool-row { display: block; padding: 5px 7px; color: var(--gray); font-family: var(--pixel); font-size: 15px; line-height: 1.35; text-decoration: none; transition: .15s ease; }
.tool-row[href]:hover { color: #fff; background: rgba(227,52,69,.12); transform: translateX(4px); }
.tool-row.disabled { color: var(--gray-dark); }
.tool-row.soon::after { content: ' WKRÓTCE'; color: var(--red-light); font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: .3px; }

.home { position: relative; min-height: calc(100vh - 86px); display: grid; place-items: center; padding: clamp(36px, 6vw, 88px) clamp(16px, 5vw, 82px); overflow: hidden; }
.home::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.012) 4px 5px); }
.scanline { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--red); box-shadow: 0 0 18px var(--red); opacity: .22; animation: scan 7s linear infinite; }
.home-layout { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(100%, 1380px); min-height: 620px; padding: clamp(36px, 6vw, 85px) clamp(27px, 7vw, 110px); background: rgba(19,19,22,.82); border: 2px solid var(--line); box-shadow: 8px 8px 0 #060607, inset 0 0 0 2px rgba(255,255,255,.025); }
.home-layout::before, .home-layout::after { content: ''; position: absolute; width: 42px; height: 42px; border-color: var(--red); border-style: solid; opacity: .8; }
.home-layout::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.home-layout::after { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; }
.corner { position: absolute; width: 15px; height: 15px; border: 2px solid var(--line-bright); }
.corner-tl { top: 15px; left: 15px; border-right: 0; border-bottom: 0; }
.corner-br { right: 15px; bottom: 15px; border-left: 0; border-top: 0; }
.intro { position: relative; z-index: 3; max-width: 700px; }
.pixel-label { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--red-light); font-family: var(--pixel); font-size: 15px; letter-spacing: 2px; }
.label-dot { width: 9px; height: 9px; background: var(--red); box-shadow: 3px 3px 0 var(--red-dark), 0 0 12px var(--red); }
.intro h1 { color: var(--white); font-family: var(--pixel); font-size: clamp(46px, 6vw, 84px); font-weight: 700; line-height: .98; letter-spacing: 1px; text-shadow: 4px 4px 0 #000; }
.intro h1 span { color: #ded9dd; }
.intro h1 b { color: var(--red); font-weight: 700; text-shadow: 4px 4px 0 #410e1b; }
.intro p { max-width: 550px; margin-top: 28px; color: var(--gray); font-size: 15px; line-height: 1.8; }
.actions { display: flex; align-items: center; gap: 14px; margin-top: 35px; }
.hero-tools { position: relative; }
.minecraft-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 175px; height: 49px; padding: 0 18px; color: #fff; border: 2px solid; box-shadow: 4px 4px 0 #080809; font-family: var(--pixel); font-size: 15px; font-weight: 700; text-decoration: none; transition: .16s ease; }
.minecraft-button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #080809; }
.red-button { background: var(--red); border-color: #ff7a91; border-bottom-color: #691226; }
.purple-button { background: var(--purple); border-color: #9a8ff2; border-bottom-color: var(--purple-dark); }
.minecraft-button i { font-size: 19px; transition: transform .18s ease; }
.hero-panel { top: calc(100% + 10px); }

.logo-stage { position: relative; z-index: 2; display: grid; place-items: center; width: clamp(350px, 40vw, 570px); height: clamp(350px, 40vw, 570px); flex-shrink: 0; }
.logo-stage img { position: relative; z-index: 4; width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(9px 12px 0 rgba(0,0,0,.45)); animation: float 5s ease-in-out infinite; }
.red-aura { position: absolute; width: 54%; height: 54%; background: rgba(200,20,55,.22); filter: blur(40px); }
.pixel-frame { position: absolute; inset: 7%; border: 2px solid rgba(227,52,69,.34); box-shadow: inset 0 0 0 6px rgba(227,52,69,.045), 0 0 35px rgba(227,52,69,.08); transform: rotate(3deg); }
.stage-grid { position: absolute; inset: 10%; opacity: .55; background: linear-gradient(90deg, transparent 48%, rgba(227,52,69,.22) 49% 51%, transparent 52%), linear-gradient(transparent 48%, rgba(227,52,69,.22) 49% 51%, transparent 52%); background-size: 34px 34px; transform: perspective(500px) rotateX(56deg) rotateZ(-10deg); }
.block { position: absolute; z-index: 3; width: 16px; height: 16px; background: var(--red); box-shadow: 4px 4px 0 var(--red-dark), 0 0 16px rgba(227,52,69,.7); }
.block-one { top: 13%; right: 12%; }
.block-two { bottom: 15%; left: 10%; width: 10px; height: 10px; opacity: .7; }
.block-three { top: 29%; left: 5%; width: 7px; height: 7px; opacity: .55; }
.empty-anchor { min-height: 100px; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }

@media (max-width: 1050px) { .topbar { gap: 15px; padding-inline: 3%; } .nav-item { padding-inline: 10px; } .home-layout { padding-inline: 5%; } .logo-stage { width: 390px; height: 390px; } }
@media (max-width: 780px) { .topbar { flex-wrap: wrap; justify-content: center; padding-block: 12px; } .nav { order: 3; width: 100%; justify-content: center; height: 40px; } .discord { margin-left: 0; } .tools-panel { width: min(670px, calc(100vw - 24px)); } .home { padding: 25px 12px 55px; } .home-layout { flex-direction: column; min-height: 0; gap: 40px; padding: 48px 23px; text-align: center; } .intro { display: flex; flex-direction: column; align-items: center; } .intro h1 { font-size: clamp(43px, 11vw, 65px); } .intro p { font-size: 14px; } .actions { justify-content: center; flex-wrap: wrap; } .logo-stage { width: min(78vw, 350px); height: min(78vw, 350px); } }
@media (max-width: 520px) { .brand-text { display: none; } .topbar { gap: 9px; } .nav-item { padding-inline: 7px; font-size: 13px; } .discord { min-width: 125px; font-size: 13px; } .tools-panel { gap: 6px; padding: 9px; } .tools-group h2 { font-size: 12px; } .tool-row { padding-inline: 3px; font-size: 12px; } .hero-panel { left: 50%; transform: translate(-50%, 8px); } .hero-tools:hover .hero-panel, .hero-tools:focus-within .hero-panel { transform: translate(-50%, 0); } .minecraft-button { min-width: 150px; } .cursor-light { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }


/* FOOTER */
.site-footer {
    position: relative;
    z-index: 2;
    padding: 56px clamp(16px, 5vw, 82px) 24px;
    background: #0a0a0c;
    border-top: 2px solid #322a30;
    box-shadow: inset 0 4px 0 rgba(227,52,69,.08);
}

.footer-inner {
    width: min(100%, 1380px);
    margin: 0 auto;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 48px;
}

.footer-brand-block {
    flex: 0 1 330px;
}

.footer-brand-block img {
    width: min(100%, 360px);
    height: auto;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(4px 4px 0 #050506);
}

.footer-brand-block p {
    color: var(--gray);
    font-family: var(--pixel);
    font-size: 14px;
    line-height: 1.3;
}

.footer-brand-block p:first-of-type { margin-top: 10px; }

.socials {
    display: flex;
    gap: 9px;
    margin-top: 22px;
}

.social {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    color: var(--gray);
    background: var(--panel);
    border: 2px solid var(--line);
    box-shadow: 3px 3px 0 #050506;
    font-size: 20px;
    text-decoration: none;
    transition: .16s ease;
}

.social:hover {
    color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #050506;
}

.social.youtube:hover {
    color: #fff;
    background: #ff0000;
    border-color: #ff6666;
    box-shadow: 5px 5px 0 #650000, 0 0 18px rgba(255,0,0,.3);
}

.social.tiktok:hover {
    color: #25f4ee;
    background: #050505;
    border-color: #fe2c55;
    box-shadow: -3px 3px 0 #25f4ee, 3px -3px 0 #fe2c55, 0 0 14px rgba(37,244,238,.25);
    text-shadow: 2px 2px 0 #fe2c55;
}

.social.discord-social:hover {
    color: #fff;
    background: #5865f2;
    border-color: #aeb5ff;
    box-shadow: 5px 5px 0 #292f8f, 0 0 18px rgba(88,101,242,.38);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(125px, 1fr));
    gap: 28px;
    flex: 1;
    max-width: 760px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-title {
    display: inline-block;
    width: 100%;
    padding: 8px 9px;
    color: var(--red-light);
    background: rgba(227,52,69,.1);
    border: 2px solid var(--red-dark);
    text-align: center;
    font-family: var(--pixel);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
}

.footer-link {
    padding: 3px 5px;
    color: var(--gray);
    font-family: var(--pixel);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    transition: .15s ease;
}

.footer-link[href]:hover {
    color: #fff;
    background: rgba(227,52,69,.12);
    transform: translateX(4px);
}

.footer-link.disabled { color: var(--gray-dark); }
.footer-link.soon::after { content: ' WKRÓTCE'; color: var(--red-light); font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: .3px; }

.footer-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 22px;
    border-top: 2px solid #29242a;
}

.footer-bottom > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.copyright-bright, .copyright-dim {
    font-family: var(--pixel);
    font-size: 12px;
}

.copyright-bright { color: var(--gray); }
.copyright-dim { color: #59545a; }

.back-top {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--red-light);
    font-family: var(--pixel);
    font-size: 13px;
    text-decoration: none;
    transition: .16s ease;
}

.back-top:hover { color: #fff; transform: translateY(-3px); }
.back-top i { font-size: 18px; }

@media (max-width: 900px) {
    .footer-main { flex-direction: column; gap: 38px; }
    .footer-brand-block { flex-basis: auto; }
    .footer-links { max-width: none; }
}

@media (max-width: 560px) {
    .site-footer { padding: 42px 18px 22px; }
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 12px; }
    .footer-title { font-size: 12px; }
    .footer-link { font-size: 11px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .back-top { align-self: flex-end; }
    .copyright-bright, .copyright-dim { font-size: 10px; }
}


/* TEAM / FOUNDER CARD */
.team {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 560px;
    padding: 86px clamp(16px, 5vw, 82px);
    overflow: hidden;
    background: #101014;
    border-top: 2px solid #30282e;
    border-bottom: 2px solid #30282e;
}

.team::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .4;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, black, transparent 78%);
}

.team > h2,
.team > .red-line,
.zalozyciele {
    position: relative;
    z-index: 1;
}

.team > h2,
.zalozyciele > h2 {
    color: var(--white);
    font-family: var(--pixel);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 3px 3px 0 #000;
}

.team > h2 { width: auto; font-size: clamp(26px, 4vw, 42px); }
.team > .red-line { flex: 1 1 150px; max-width: 260px; }

.red-line {
    height: 3px;
    background: var(--red);
    box-shadow: 0 0 12px rgba(227,52,69,.55), 4px 3px 0 var(--red-dark);
}

.zalozyciele {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    align-items: center;
    gap: 16px 22px;
    width: min(100%, 760px);
    margin-top: 12px;
}

.zalozyciele > h2 {
    grid-column: 2;
    grid-row: 1;
    color: var(--red-light);
    font-size: clamp(20px, 3vw, 30px);
    white-space: nowrap;
}

.zalozyciele > .red-line:first-child { grid-column: 1; grid-row: 1; }
.zalozyciele > .red-line:nth-child(3) { grid-column: 3; grid-row: 1; }

.panel-gracz {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 22px;
    width: min(100%, 520px);
    margin: 14px auto 0;
    padding: 18px;
    background: linear-gradient(135deg, #1d1a1f, #111114);
    border: 2px solid var(--line-bright);
    box-shadow: 6px 6px 0 #060607, inset 0 0 0 2px rgba(255,255,255,.025);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.panel-gracz:hover {
    transform: translate(-3px, -3px);
    border-color: var(--red);
    box-shadow: 9px 9px 0 #060607, 0 0 24px rgba(227,52,69,.13);
}

.panel-gracz .icon {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    background: #08080a;
    border: 3px solid var(--red);
    box-shadow: 4px 4px 0 var(--red-dark);
    overflow: hidden;
}

.panel-gracz .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.panel-gracz .info { min-width: 0; }
.nick {
    margin-bottom: 13px;
    color: var(--white);
    font-family: var(--pixel);
    font-size: clamp(21px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 3px 3px 0 #000;
}

.rola { display: flex; flex-wrap: wrap; gap: 7px; }
.rola > div {
    padding: 6px 8px;
    border: 2px solid;
    font-family: var(--pixel);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.zalozyciel-czerwony { color: #ff6b83; background: rgba(227,52,69,.16); border-color: var(--red-dark); }
.bot-dev-fioletowy { color: #b4adff; background: rgba(101,86,200,.16); border-color: #514899; }
.txtmaker-zolty { color: #ffe47a; background: rgba(229,181,45,.12); border-color: #9b7a29; }

@media (max-width: 620px) {
    .team { min-height: 520px; padding: 64px 16px; }
    .team > .red-line { flex-basis: 60px; }
    .zalozyciele { grid-template-columns: minmax(25px, 1fr) auto minmax(25px, 1fr); gap: 16px 10px; }
    .panel-gracz { align-items: flex-start; gap: 15px; padding: 14px; }
    .panel-gracz .icon { width: 78px; height: 78px; flex-basis: 78px; }
    .nick { font-size: 21px; }
    .rola { gap: 5px; }
    .rola > div { padding: 5px 6px; font-size: 9px; }
}


/* TEAM REFERENCE LAYOUT */
.team {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 690px;
    padding-top: 82px;
    padding-bottom: 92px;
    background: #0b0b0e;
}

.team > h2 {
    width: auto;
    margin: 0 18px 48px;
    color: #f4f0f2;
    font-size: clamp(31px, 4.5vw, 58px);
    letter-spacing: 3px;
}

.team > .red-line {
    position: absolute;
    top: 168px;
    width: min(31vw, 410px);
    max-width: none;
    height: 2px;
    flex: none;
    opacity: .72;
}

.team > .red-line:first-child { left: max(16px, calc(50% - 540px)); }
.team > .red-line:nth-of-type(2) { right: max(16px, calc(50% - 540px)); }

.zalozyciele {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    width: min(100%, 760px);
    margin: 0;
    gap: 17px 22px;
}

.zalozyciele > h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 9px 26px;
    color: #fff;
    background: var(--red);
    border: 2px solid #ff6975;
    box-shadow: 5px 5px 0 #5f1327, 0 0 18px rgba(227,52,69,.24);
    font-size: 20px;
    letter-spacing: 1px;
}

.zalozyciele > .red-line:first-child,
.zalozyciele > .red-line:nth-child(3) {
    width: 100%;
    height: 2px;
    max-width: none;
    background: rgba(227,52,69,.55);
    box-shadow: 0 0 10px rgba(227,52,69,.25);
}

.panel-gracz {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 268px;
    min-height: 340px;
    margin: 28px auto 0;
    padding: 42px 24px 27px;
    background: #151518;
    border: 2px solid #2b292e;
    box-shadow: 8px 8px 0 #050506, inset 0 0 0 2px rgba(255,255,255,.02);
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.panel-gracz:hover {
    transform: translateY(-5px);
    border-color: #6b3a45;
    box-shadow: 8px 13px 0 #050506, 0 0 25px rgba(227,52,69,.16);
}

.panel-gracz .icon {
    width: 122px;
    height: 122px;
    flex: 0 0 122px;
    border: 3px solid var(--red);
    box-shadow: 5px 5px 0 #691226;
}

.panel-gracz .info { width: 100%; }
.nick { margin-bottom: 17px; font-size: 21px; letter-spacing: 1px; }
.rola { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.rola > div { padding: 8px 7px; font-size: 11px; box-shadow: 3px 3px 0 rgba(0,0,0,.65); }

@media (max-width: 620px) {
    .team { min-height: 650px; padding-top: 66px; }
    .team > h2 { margin-bottom: 45px; font-size: 34px; }
    .team > .red-line { top: 140px; width: 24vw; }
    .zalozyciele { width: calc(100% - 16px); gap: 14px 10px; }
    .zalozyciele > h2 { padding-inline: 16px; font-size: 16px; }
    .panel-gracz { width: min(268px, 100%); }
}


/* TEAM CATEGORIES */
.team-categories {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: min(100%, 820px);
    margin: -22px auto 34px;
}

.team-category {
    position: relative;
    min-width: 132px;
    height: 43px;
    padding: 0 16px;
    color: #c4bdc2;
    background: #19191e;
    border: 2px solid #3b363c;
    box-shadow: 3px 3px 0 #060607;
    cursor: pointer;
    font-family: var(--pixel);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.team-category:hover,
.team-category.active {
    color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #060607;
}

.team-category.active::after {
    content: '';
    position: absolute;
    right: 7px;
    bottom: 5px;
    width: 5px;
    height: 5px;
    background: currentColor;
    box-shadow: 2px 2px 0 rgba(0,0,0,.55);
}

.category-all:hover, .category-all.active { background: #f05b98; border-color: #ff929b; }
.category-management:hover, .category-management.active { background: #d9274c; border-color: #ff7188; }
.category-admin:hover, .category-admin.active { background: #7357d8; border-color: #afa0ff; }
.category-team:hover, .category-team.active { color: #081516; background: #30c9c1; border-color: #94fff8; }

@media (max-width: 620px) {
    .team-categories { gap: 7px; margin-top: -18px; margin-bottom: 28px; }
    .team-category { min-width: 0; flex: 1 1 calc(50% - 7px); height: 39px; padding-inline: 8px; font-size: 11px; }
}


/* RANK SYSTEM */
.rank {
    --rank-color: #bcb5bb;
    --rank-border: #625962;
    --rank-shadow: #17151a;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 29px;
    padding: 6px 8px;
    color: var(--rank-color) !important;
    background: rgba(255,255,255,.035);
    border: 2px solid var(--rank-border) !important;
    box-shadow: 3px 3px 0 var(--rank-shadow);
    font-family: var(--pixel) !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: .3px;
    white-space: nowrap;
}

.rank::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--rank-color);
    box-shadow: 2px 2px 0 rgba(0,0,0,.55), 0 0 7px color-mix(in srgb, var(--rank-color) 60%, transparent);
}

.rank-owner { --rank-color: #ff566d; --rank-border: #a5263d; --rank-shadow: #450d1a; }
.rank-txt-maker { --rank-color: #ffd34e; --rank-border: #a98224; --rank-shadow: #49380c; }
.rank-bot-developer { --rank-color: #b16cff; --rank-border: #6436a8; --rank-shadow: #281346; }
.rank-pack-maker { --rank-color: #169cff; --rank-border: #236eaa; --rank-shadow: #0c2d49; }
.rank-java-developer { --rank-color: #00f477; --rank-border: #159956; --rank-shadow: #064c2c; }
.rank-web-developer { --rank-color: #09a850; --rank-border: #13713f; --rank-shadow: #063a23; }
.rank-grafik { --rank-color: #d59a18; --rank-border: #89651b; --rank-shadow: #43300b; }
.rank-budowniczy { --rank-color: #24f1c8; --rank-border: #138d79; --rank-shadow: #06483e; }
.rank-montazysta { --rank-color: #b900ff; --rank-border: #72229a; --rank-shadow: #3c084e; }
.rank-senior-admin, .rank-admin, .rank-junior-admin { --rank-color: #ff382f; --rank-border: #a72a25; --rank-shadow: #4a0f0d; }
.rank-senior-moderator, .rank-moderator, .rank-junior-moderator { --rank-color: #00f477; --rank-border: #159956; --rank-shadow: #064c2c; }
.rank-senior-helper, .rank-helper, .rank-junior-helper { --rank-color: #169cff; --rank-border: #236eaa; --rank-shadow: #0c2d49; }

@media (max-width: 620px) {
    .rank { font-size: 10px !important; }
}


/* EXTENDED TEAM CATEGORIES */
.category-developers:hover, .category-developers.active { color: #fff; background: #315ed2; border-color: #79a0ff; }
.category-graphics:hover, .category-graphics.active { color: #fff; background: #a249d0; border-color: #dc9aff; }
.category-support:hover, .category-support.active { color: #07180e; background: #25c978; border-color: #8dffbd; }

.group-management > h2 { background: #d9274c; border-color: #ff7188; }
.group-admin > h2 { background: #df382f; border-color: #ff8982; }
.group-developers > h2 { background: #315ed2; border-color: #79a0ff; }
.group-graphics > h2 { background: #a249d0; border-color: #dc9aff; }
.group-support > h2 { color: #07180e; background: #25c978; border-color: #8dffbd; }

.rank-support { --rank-color: #25c978; --rank-border: #15824e; --rank-shadow: #063b24; }


/* FULL RANK LIST */
.panel-gracz {
    width: min(100%, 460px);
    min-height: 0;
}

.panel-gracz .info { width: 100%; }
.rola {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
}

.rank {
    min-width: 0;
    min-height: 31px;
    padding: 7px 6px;
    font-size: 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-pack-maker { --rank-color: #159cff; --rank-border: #236eaa; --rank-shadow: #0c2d49; }
.rank-java-developer { --rank-color: #00f477; --rank-border: #159956; --rank-shadow: #064c2c; }
.rank-web-developer { --rank-color: #08a850; --rank-border: #13713f; --rank-shadow: #063a23; }
.rank-grafik { --rank-color: #d59a18; --rank-border: #89651b; --rank-shadow: #43300b; }
.rank-budowniczy { --rank-color: #24f1c8; --rank-border: #138d79; --rank-shadow: #06483e; }
.rank-montazysta { --rank-color: #b900ff; --rank-border: #72229a; --rank-shadow: #3c084e; }
.rank-admin, .rank-junior-admin { --rank-color: #ff382f; --rank-border: #a72a25; --rank-shadow: #4a0f0d; }
.rank-senior-moderator, .rank-moderator, .rank-junior-moderator { --rank-color: #00f477; --rank-border: #159956; --rank-shadow: #064c2c; }
.rank-senior-pomocnik, .rank-pomocnik, .rank-junior-pomocnik { --rank-color: #169cff; --rank-border: #236eaa; --rank-shadow: #0c2d49; }

@media (max-width: 620px) {
    .panel-gracz { width: min(100%, 330px); }
    .rola { grid-template-columns: 1fr; gap: 7px; }
}


/* CATEGORY BAR REDESIGN */
.team-categories {
    width: min(100%, 900px);
    margin: -20px auto 48px;
    padding: 11px;
    gap: 9px;
    background: rgba(16,16,20,.92);
    border: 2px solid #312c32;
    box-shadow: 6px 6px 0 #050506, inset 0 0 0 2px rgba(255,255,255,.025);
}

.team-category {
    flex: 1 1 0;
    min-width: 145px;
    height: 47px;
    border-width: 2px;
    box-shadow: 3px 3px 0 #050506;
    font-size: 14px;
}

.team-category:hover { transform: translateY(-3px); }
.team-category.active { transform: translateY(-2px); box-shadow: 4px 5px 0 #050506; }
.team-category.active::after { right: 10px; bottom: 8px; }

.category-all:hover, .category-all.active { background: linear-gradient(135deg, #d82f43, #922235); }
.category-management:hover, .category-management.active { background: linear-gradient(135deg, #ec334f, #a91d37); }
.category-admin:hover, .category-admin.active { background: linear-gradient(135deg, #8164e7, #5140a9); }
.category-team:hover, .category-team.active { background: linear-gradient(135deg, #2dd7ce, #138b9b); }

.team-group {
    width: min(100%, 900px);
    margin-top: 18px;
    margin-bottom: 24px;
}

.team-group > h2 {
    min-width: 180px;
    margin-inline: 12px;
    padding: 9px 24px;
}

.group-team > h2 { color: #071516; background: #2dd7ce; border-color: #98fff8; }
.group-team > .red-line { background: rgba(45,215,206,.56); box-shadow: 0 0 10px rgba(45,215,206,.24); }

@media (max-width: 620px) {
    .team-categories { margin-top: -16px; margin-bottom: 35px; padding: 8px; }
    .team-category { min-width: 0; height: 43px; font-size: 11px; }
    .team-group { margin-top: 12px; margin-bottom: 20px; }
    .team-group > h2 { min-width: 130px; padding-inline: 13px; }
}


.team-group.is-hidden,
.team-group[hidden] {
    display: none !important;
}


/* PLAYER CARDS */
.players-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 900px);
    margin-top: 8px;
}

.players-grid .panel-gracz {
    width: 100%;
    margin: 20px 0 0;
}

.players-grid .panel-gracz:hover {
    transform: translateY(-6px);
}

@media (max-width: 760px) {
    .players-grid {
        grid-template-columns: 1fr;
        width: min(100%, 460px);
    }
}


/* FOUR PLAYERS PER ROW */
.players-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    width: min(100%, 1000px);
}

.players-grid .panel-gracz {
    flex: 0 1 calc((100% - 72px) / 4);
    width: auto;
    min-width: 190px;
    max-width: 220px;
    margin: 20px 0 0;
}

@media (max-width: 900px) {
    .players-grid .panel-gracz {
        flex-basis: calc((100% - 24px) / 2);
        max-width: 260px;
    }
}

@media (max-width: 560px) {
    .players-grid {
        gap: 16px;
    }

    .players-grid .panel-gracz {
        flex-basis: 100%;
        max-width: 330px;
    }
}


/* VERTICAL RANKS */
.rola {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 9px;
    width: 100%;
}

.rank {
    width: 100%;
    min-height: 31px;
}


/* IMAGE RANK BADGES */
.rank.rank-image,
.rank:has(.rank-image) {
    min-height: 0;
    padding: 0;
    border: 0 !important;
    background: transparent;
    box-shadow: none;
}

.rank:has(.rank-image)::before {
    display: none;
}

.rank-image {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}


.rank-image {
    width: auto;
    max-width: 100%;
    height: auto;
}


/* GRADIENT GENERATOR */
.gradient-page-section {
    position: relative;
    min-height: calc(100vh - 86px);
    padding: clamp(46px, 7vw, 94px) clamp(16px, 5vw, 82px) 90px;
    overflow: hidden;
}

.gradient-page-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 75% 25%, rgba(124,77,255,.15), transparent 28%), radial-gradient(circle at 18% 75%, rgba(227,52,69,.12), transparent 30%);
}

.gradient-shell { position: relative; z-index: 1; width: min(100%, 1240px); margin: 0 auto; }
.gradient-heading { margin-bottom: 34px; }
.gradient-heading .pixel-label { margin-bottom: 13px; }
.gradient-heading h1 { color: var(--white); font-family: var(--pixel); font-size: clamp(34px, 5vw, 66px); line-height: 1; letter-spacing: 2px; text-shadow: 4px 4px 0 #000; }
.gradient-heading h1 b { color: var(--red-light); font-weight: 700; }
.gradient-heading p { max-width: 620px; margin-top: 17px; color: var(--gray); font-size: 14px; line-height: 1.7; }
.gradient-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 22px; align-items: start; }
.gradient-controls, .gradient-preview-column { display: flex; flex-direction: column; gap: 18px; }
.gradient-card, .gradient-preview-card, .gradient-code-card { background: rgba(19,19,22,.92); border: 2px solid #352f36; box-shadow: 6px 6px 0 #060607, inset 0 0 0 2px rgba(255,255,255,.02); }
.gradient-card { padding: 22px; }
.gradient-card-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.gradient-card-title strong { display: block; color: var(--white); font-family: var(--pixel); font-size: 17px; letter-spacing: .6px; }
.gradient-card-title small { display: block; margin-top: 4px; color: var(--gray-dark); font-size: 11px; }
.card-index { display: grid; place-items: center; width: 35px; height: 35px; color: var(--red-light); background: rgba(227,52,69,.13); border: 2px solid var(--red-dark); font-family: var(--pixel); font-size: 12px; }
.gradient-text-input { width: 100%; height: 52px; padding: 0 15px; color: var(--white); background: #0c0c0f; border: 2px solid #423943; outline: none; font: 600 14px var(--sans); transition: border-color .16s ease, box-shadow .16s ease; }
.gradient-text-input:focus { border-color: var(--red-light); box-shadow: 0 0 0 3px rgba(227,52,69,.12); }
.format-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.format-button, .mode-button, .copy-button, .add-color, .remove-color { cursor: pointer; font-family: var(--pixel); transition: .16s ease; }
.format-button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; color: var(--gray); background: #17161b; border: 2px solid #38323a; font-size: 11px; }
.format-button > span:last-child { font-family: var(--sans); font-size: 10px; }
.format-button:hover, .format-button.active { color: #fff; background: rgba(227,52,69,.2); border-color: var(--red); transform: translateY(-2px); }
.color-list { display: flex; flex-direction: column; gap: 9px; }
.color-row { display: grid; grid-template-columns: 33px 42px minmax(0,1fr) 35px; align-items: center; gap: 9px; }
.color-number { color: var(--gray-dark); font: 700 11px var(--pixel); }
.color-picker { width: 42px; height: 35px; padding: 2px; cursor: pointer; background: #0c0c0f; border: 2px solid #423943; }
.color-hex { width: 100%; height: 35px; padding: 0 10px; color: var(--white); background: #0c0c0f; border: 2px solid #423943; outline: none; font: 600 12px var(--pixel); text-transform: uppercase; }
.color-hex:focus { border-color: var(--red-light); }
.remove-color { width: 35px; height: 35px; color: #ff6a7f; background: rgba(227,52,69,.1); border: 2px solid var(--red-dark); font-size: 18px; }
.remove-color:hover { color: #fff; background: var(--red); }
.add-color { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 9px 12px; color: var(--red-light); background: rgba(227,52,69,.1); border: 2px solid var(--red-dark); font-size: 11px; }
.add-color:hover { color: #fff; background: var(--red); transform: translateY(-2px); }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mode-button { min-height: 42px; color: var(--gray); background: #121216; border: 2px solid #39333a; font-size: 11px; }
.mode-button:hover, .mode-button.active { color: #fff; background: var(--purple); border-color: #a092ff; box-shadow: 3px 3px 0 #17113f; }
.gradient-preview-card { min-height: 260px; padding: 22px; background: linear-gradient(145deg, rgba(30,25,38,.95), rgba(16,16,20,.97)); }
.preview-topline, .code-heading { display: flex; align-items: center; justify-content: space-between; color: var(--gray); font: 11px var(--pixel); letter-spacing: .7px; }
.preview-topline i, .code-heading i { margin-right: 6px; color: var(--red-light); font-size: 17px; vertical-align: middle; }
.preview-dot { width: 8px; height: 8px; background: #48ef8c; box-shadow: 0 0 10px #48ef8c; }
.gradient-preview { display: flex; align-items: center; justify-content: center; min-height: 155px; padding: 24px 12px; color: #fff; font-family: var(--pixel); font-size: clamp(24px, 3vw, 42px); font-weight: 700; line-height: 1.25; letter-spacing: 1px; text-align: center; text-shadow: 3px 3px 0 rgba(0,0,0,.55); overflow-wrap: anywhere; }
.gradient-preview span { transition: color .15s ease; }
.preview-caption { padding-top: 14px; color: var(--gray-dark); border-top: 1px solid #2d2930; font-size: 11px; text-align: center; }
.gradient-code-card { padding: 18px; }
.copy-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; color: #fff; background: var(--red); border: 2px solid #ff737d; box-shadow: 3px 3px 0 #551022; font-size: 10px; }
.copy-button:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #551022; }
.copy-button.is-copied { background: #22a86a; border-color: #7dffc0; box-shadow: 3px 3px 0 #0b4e31; }
.gradient-code { min-height: 100px; max-height: 190px; margin-top: 15px; padding: 14px; color: #f3d9ff; background: #0a0a0d; border: 2px solid #302936; font: 12px/1.65 var(--sans); white-space: pre-wrap; overflow: auto; overflow-wrap: anywhere; }

@media (max-width: 900px) { .gradient-layout { grid-template-columns: 1fr; } .gradient-preview-column { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .gradient-preview-card { min-height: 100%; } }
@media (max-width: 620px) { .gradient-page-section { padding-inline: 14px; } .gradient-card, .gradient-preview-card, .gradient-code-card { padding: 16px; } .gradient-heading h1 { font-size: 37px; } .gradient-preview-column { display: flex; } .gradient-preview { min-height: 125px; font-size: 27px; } .color-row { grid-template-columns: 28px 38px minmax(0,1fr) 32px; gap: 6px; } .color-picker { width: 38px; } .remove-color { width: 32px; } }


.color-hex.invalid { color: #ff7188; border-color: #ff3d5d; box-shadow: 0 0 0 2px rgba(255,61,93,.12); }
.add-color:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.remove-color:disabled { opacity: .3; cursor: not-allowed; }


/* GRADIENT PRESETS AND SETTINGS */
.preset-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.preset-button { min-height: 42px; padding: 0 7px; color: #fff; border: 2px solid rgba(255,255,255,.55); box-shadow: 3px 3px 0 rgba(0,0,0,.65); cursor: pointer; font: 700 10px var(--pixel); transition: transform .16s ease, filter .16s ease; }
.preset-button:hover { filter: brightness(1.2); transform: translateY(-3px); }
.preset-sunset { background: linear-gradient(135deg, #ff1744, #ff8a00); }
.preset-ocean { background: linear-gradient(135deg, #00e5ff, #2979ff); }
.preset-toxic { color: #08120b; background: linear-gradient(135deg, #00f477, #d4ff00); }
.preset-candy { background: linear-gradient(135deg, #ff4dce, #7c4dff); }
.preset-fire { color: #241000; background: linear-gradient(135deg, #ffd34e, #ff1744); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 58px; padding: 12px 14px; background: #0d0d10; border: 2px solid #39333a; cursor: pointer; }
.setting-copy strong { display: block; color: var(--white); font: 700 12px var(--pixel); letter-spacing: .5px; }
.setting-copy small { display: block; margin-top: 5px; color: var(--gray-dark); font-size: 10px; }
.setting-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.setting-switch { position: relative; display: block; width: 48px; height: 25px; flex: 0 0 48px; background: #29252c; border: 2px solid #554956; box-shadow: inset 2px 2px 0 rgba(0,0,0,.35); transition: .16s ease; }
.setting-switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 13px; height: 13px; background: #8b818b; box-shadow: 2px 2px 0 #080809; transition: .16s ease; }
.setting-checkbox:checked + .setting-switch { background: var(--red); border-color: #ff737d; }
.setting-checkbox:checked + .setting-switch::after { left: 27px; background: #fff; }
.setting-row:has(.setting-checkbox:checked) { border-color: var(--red-dark); box-shadow: 3px 3px 0 #4d1020; }

@media (max-width: 620px) { .preset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .preset-button:last-child { grid-column: 1 / -1; } .setting-copy small { max-width: 190px; line-height: 1.35; } }


/* GRADIENT STOP POSITION EDITOR */
.stop-editor { position: relative; margin: 22px 7px 16px; padding: 12px 0 0; }
.stop-track { position: relative; height: 18px; background: #0b0b0e; border: 2px solid #5a515c; box-shadow: 3px 3px 0 #080809; }
.stop-gradient { position: absolute; inset: 2px; background: linear-gradient(90deg, #ff1744 0%, #7c4dff 100%); }
.stop-handles { position: absolute; top: 0; left: 0; right: 0; height: 36px; pointer-events: none; }
.stop-handle { position: absolute; top: 0; width: 18px; height: 18px; padding: 0; transform: translateX(-50%); background: var(--stop-color); border: 2px solid #0a0a0c; box-shadow: 0 0 0 2px var(--stop-color), 3px 3px 0 rgba(0,0,0,.7); cursor: ew-resize; pointer-events: auto; }
.stop-handle::before { content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--stop-color); }
.stop-handle:hover, .stop-handle:focus-visible { z-index: 3; filter: brightness(1.25); outline: none; }
.stop-scale { display: flex; justify-content: space-between; margin-top: 11px; color: var(--gray-dark); font: 9px var(--pixel); }


.stop-handle { touch-action: none; }


/* SETTINGS PANEL UNDER OUTPUT */
.gradient-settings-panel { padding: 20px; background: rgba(13,13,16,.96); border: 2px solid #352f36; box-shadow: 6px 6px 0 #060607, inset 0 0 0 2px rgba(255,255,255,.02); }
.settings-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; color: var(--white); border-bottom: 2px solid #2e2930; font: 700 17px var(--pixel); letter-spacing: 1px; }
.settings-marker { width: 5px; height: 17px; background: var(--red-light); box-shadow: 2px 2px 0 var(--red-dark); }
.settings-block { margin-top: 17px; }
.settings-label { display: block; margin-bottom: 9px; color: var(--red-light); font: 700 10px var(--pixel); letter-spacing: .8px; }
.gradient-settings-panel .preset-list { display: flex; flex-wrap: wrap; gap: 9px; }
.gradient-settings-panel .preset-button { width: 43px; min-height: 29px; padding: 0; border: 2px solid #0a0a0c; box-shadow: 0 0 0 1px #655861, 3px 3px 0 rgba(0,0,0,.7); }
.gradient-settings-panel .preset-button:hover { transform: translateY(-2px) scale(1.04); }
.gradient-settings-panel .mode-switch { grid-template-columns: 1fr; }
.gradient-settings-panel .setting-row { margin-top: 17px; }
@media (max-width: 620px) { .gradient-settings-panel { padding: 16px; } .gradient-settings-panel .preset-button { width: 38px; } }


.decode-block { margin-top: 18px; padding-top: 17px; border-top: 2px solid #2e2930; }
.decode-input { display: block; width: 100%; min-height: 74px; resize: vertical; padding: 10px; color: #e9d7f2; background: #09090c; border: 2px solid #3b323f; outline: none; font: 11px/1.55 var(--sans); }
.decode-input:focus { border-color: var(--red-light); box-shadow: 0 0 0 3px rgba(227,52,69,.11); }
.decode-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 39px; margin-top: 9px; color: #fff; background: linear-gradient(135deg, #d82f43, #922235); border: 2px solid #ff929b; box-shadow: 3px 3px 0 #5c1838; cursor: pointer; font: 700 11px var(--pixel); transition: .16s ease; }
.decode-button:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #5c1838; }
.decode-button i { font-size: 17px; }
.decode-status { display: block; min-height: 15px; margin-top: 8px; color: #64f1a1; font-size: 10px; line-height: 1.4; }
.decode-status.error { color: #ff7188; }


/* UNIFIED GENERATOR WORKSPACE */
.gradient-workspace { position: relative; padding: 22px; background: rgba(10,10,13,.72); border: 2px solid #39323a; box-shadow: 8px 8px 0 #050506, inset 0 0 0 2px rgba(255,255,255,.025); }
.gradient-workspace::before { content: ''; position: absolute; top: -2px; left: 20px; width: 190px; height: 3px; background: var(--red-light); box-shadow: 0 0 14px rgba(227,52,69,.55); }
.gradient-workspace .gradient-layout { position: relative; }
.format-button { position: relative; }
.format-button.active { color: #fff; background: linear-gradient(135deg, rgba(227,52,69,.58), rgba(101,86,200,.42)); border-color: #ff737d; box-shadow: 3px 3px 0 #4e1122; }
.format-button.active::after { content: ''; position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; background: #64f1a1; box-shadow: 1px 1px 0 #0c3c25; }
.gradient-preview { font-weight: 500; }
.setting-state { margin-left: auto; padding: 5px 7px; color: #77717a; background: #1b181e; border: 1px solid #3e3641; font: 700 9px var(--pixel); white-space: nowrap; }
.setting-checkbox:checked ~ .setting-state { color: #64f1a1; background: rgba(34,168,106,.15); border-color: #267e54; }
.setting-row:has(.setting-checkbox:checked) .setting-state { color: #64f1a1; background: rgba(34,168,106,.15); border-color: #267e54; }
@media (max-width: 620px) { .gradient-workspace { padding: 12px; } .setting-state { display: none; } }


.setting-state.is-on { color: #64f1a1; background: rgba(34,168,106,.15); border-color: #267e54; }


/* SCREEN-MATCHED GENERATOR LAYOUT */
.generator-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 5px 7px 18px; border-bottom: 2px solid #302a31; }
.generator-toolbar .pixel-label { margin: 0 0 7px; color: #e9dce4; font-size: 13px; letter-spacing: 1px; }
.generator-toolbar .label-dot { display: none; }
.generator-toolbar h1 { color: var(--white); font: 700 clamp(25px, 3vw, 39px)/1 var(--pixel); letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
.generator-toolbar h1 b { color: var(--red-light); }
.generator-toolbar .format-toolbar { justify-content: flex-end; margin: 0; }
.generator-toolbar .format-button { min-width: 38px; width: 38px; height: 31px; min-height: 31px; padding: 0; justify-content: center; font-size: 14px; }
.generator-toolbar .format-button span { display: none; }
.generator-wide-card { margin-top: 16px; padding: 15px; background: #0c0c0f; border: 2px solid #2e2930; box-shadow: inset 0 0 0 2px rgba(255,255,255,.02); }
.generator-section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #817681; font: 700 12px var(--pixel); letter-spacing: .8px; }
.generator-section-label > span { width: 4px; height: 13px; background: var(--red-light); box-shadow: 2px 2px 0 var(--red-dark); }
.generator-wide-card .gradient-text-input { height: 68px; padding-inline: 17px; font: 700 20px var(--pixel); }
.wide-stop-editor { margin: 14px 7px 28px; }
.generator-columns { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.35fr) minmax(250px, 1fr); gap: 20px; align-items: stretch; }
.generator-columns > .gradient-card, .gradient-result-panel, .generator-columns > .gradient-settings-panel { min-width: 0; }
.colors-card { padding: 18px 16px; }
.colors-card .color-list { padding: 7px 0; background: #09090b; border: 2px solid #29242b; }
.colors-card .color-row { grid-template-columns: 27px 35px minmax(0,1fr) 70px; gap: 6px; padding: 7px 8px; border-left: 3px solid #ff929b; }
.colors-card .color-picker { width: 35px; height: 31px; }
.colors-card .color-hex { height: 31px; padding-inline: 7px; font-size: 10px; }
.colors-card .remove-color { width: 70px; height: 31px; font-size: 9px; }
.colors-card .remove-color i { font-size: 13px; }
.colors-card .add-color { width: 100%; justify-content: center; margin-top: 16px; color: #fff; background: linear-gradient(135deg, #d82f43, #922235); border-color: #ff929b; box-shadow: 3px 3px 0 #5c1838; }
.gradient-result-panel { display: flex; flex-direction: column; min-height: 370px; padding: 18px 16px; background: #0c0c0f; border: 2px solid #352f36; box-shadow: 6px 6px 0 #060607, inset 0 0 0 2px rgba(255,255,255,.02); }
.result-preview { display: flex; align-items: center; min-height: 80px; padding: 14px; color: #fff; background: #07070a; border: 2px solid #242027; font: 700 clamp(18px, 2vw, 28px) var(--pixel); line-height: 1.25; overflow-wrap: anywhere; }
.result-preview span { transition: color .15s ease; }
.gradient-result-panel .gradient-code { flex: 1; min-height: 130px; max-height: 250px; margin-top: 14px; }
.result-copy { width: 100%; justify-content: center; margin-top: 10px; background: #f2f2f2; color: #161318; border-color: #fff; box-shadow: 3px 3px 0 #79757a; }
.result-copy:hover { background: #fff; }
.generator-columns .gradient-settings-panel { padding: 18px 16px; }
.generator-columns .settings-heading { display: none; }
.generator-columns .settings-block:first-of-type { margin-top: 0; }
.generator-columns .setting-row { align-items: center; }
.generator-columns .decode-input { min-height: 60px; }

@media (max-width: 1050px) { .generator-columns { grid-template-columns: 1fr 1.25fr; } .generator-columns .gradient-settings-panel { grid-column: 1 / -1; } }
@media (max-width: 680px) { .gradient-workspace { padding: 12px; } .generator-toolbar { flex-direction: column; } .generator-toolbar .format-toolbar { justify-content: flex-start; } .generator-columns { grid-template-columns: 1fr; } .generator-columns .gradient-settings-panel { grid-column: auto; } .generator-wide-card .gradient-text-input { height: 58px; font-size: 17px; } .colors-card .color-row { grid-template-columns: 24px 35px minmax(0,1fr) 62px; } .colors-card .remove-color { width: 62px; } }


/* COLOR X BUTTONS AND POSITION LABELS */
.colors-card .color-row { grid-template-columns: 27px 35px minmax(0,1fr) 34px; }
.colors-card .remove-color { width: 34px; padding: 0; font-size: 0; }
.colors-card .remove-color i { margin: 0; font-size: 17px; }
.stop-value { position: absolute; left: 50%; bottom: 19px; transform: translateX(-50%); color: var(--stop-color); font: 700 9px var(--pixel); text-shadow: 1px 1px 0 #050506; white-space: nowrap; }


.result-preview { white-space: pre-wrap; }


/* SMALL CAPS GENERATOR */
.smallcaps-page-section { position: relative; min-height: calc(100vh - 86px); padding: clamp(42px, 6vw, 78px) clamp(16px, 5vw, 82px) 90px; overflow: hidden; }
.smallcaps-page-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 20%, rgba(227,52,69,.1), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.012), transparent 42%); }
.smallcaps-shell { position: relative; z-index: 1; width: min(100%, 1200px); margin: 0 auto; }
.smallcaps-workspace { padding: 11px 14px 16px; background: rgba(12,12,15,.95); border: 2px solid #302a31; box-shadow: 8px 8px 0 #050506, inset 0 0 0 2px rgba(255,255,255,.025); }
.smallcaps-title { padding: 8px 0 12px; border-bottom: 2px solid #29242b; }
.smallcaps-title h1 { display: inline-block; padding-bottom: 9px; color: var(--white); border-bottom: 3px solid var(--red-light); font: 700 clamp(23px, 3vw, 37px)/1 var(--pixel); letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
.smallcaps-card { margin-top: 14px; padding: 14px 12px 16px; background: #0b0b0e; border: 2px solid #302a31; box-shadow: inset 0 0 0 2px rgba(255,255,255,.018); }
.smallcaps-card .generator-section-label { margin-bottom: 12px; }
.smallcaps-input { display: block; width: 100%; min-height: 116px; resize: vertical; padding: 17px; color: #827a84; background: #07070a; border: 2px solid #252128; outline: none; font: 600 17px/1.55 var(--pixel); }
.smallcaps-input:focus { color: var(--white); border-color: var(--red-light); box-shadow: 0 0 0 3px rgba(227,52,69,.1); }
.smallcaps-preview { display: flex; align-items: flex-start; min-height: 116px; padding: 19px 17px; color: var(--white); background: #07070a; border: 2px solid #252128; font: 700 19px/1.6 var(--pixel); white-space: pre-wrap; overflow-wrap: anywhere; }
.smallcaps-copy { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 43px; margin-top: 14px; color: #17151a; background: #f0f0f0; border: 2px solid #fff; box-shadow: 4px 4px 0 #777277; cursor: pointer; font: 700 13px var(--pixel); transition: .16s ease; }
.smallcaps-copy:hover { background: #fff; transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #777277; }
.smallcaps-copy.is-copied { color: #fff; background: #20a56a; border-color: #8dffc0; box-shadow: 4px 4px 0 #0b4e31; }
@media (max-width: 620px) { .smallcaps-page-section { padding-inline: 12px; } .smallcaps-workspace { padding: 8px; } .smallcaps-input, .smallcaps-preview { min-height: 130px; font-size: 15px; } }


/* SHARED CARD LANGUAGE FOR SMALL CAPS */
.smallcaps-eyebrow { display: block; margin-bottom: 7px; color: #8a7d87; font: 700 10px var(--pixel); letter-spacing: 1.2px; }
.smallcaps-title h1 { margin-bottom: 8px; }
.smallcaps-title p { color: #776d77; font: 500 12px var(--sans); letter-spacing: .2px; }
.smallcaps-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.smallcaps-card-heading .card-index { display: grid; place-items: center; flex: 0 0 32px; height: 32px; color: var(--red-light); background: #21131a; border: 1px solid #753044; font: 700 12px var(--pixel); }
.smallcaps-card-heading strong { display: block; color: #e7dce4; font: 700 14px var(--pixel); letter-spacing: .3px; }
.smallcaps-card-heading small { display: block; margin-top: 4px; color: #766d76; font: 500 11px var(--sans); }
.smallcaps-card .generator-section-label { padding-top: 11px; border-top: 2px solid #28232a; }


/* REGULAMIN */
.rules-page-section { position: relative; min-height: calc(100vh - 86px); padding: clamp(42px, 6vw, 82px) clamp(16px, 5vw, 82px) 90px; overflow: hidden; }
.rules-page-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 10%, rgba(227,52,69,.11), transparent 28%), radial-gradient(circle at 88% 36%, rgba(105,74,160,.08), transparent 30%); }
.rules-shell { position: relative; z-index: 1; width: min(100%, 1120px); margin: 0 auto; }
.rules-hero { padding: 26px 28px 24px; background: linear-gradient(110deg, rgba(25,20,25,.96), rgba(12,12,15,.94)); border: 2px solid #39313a; box-shadow: 8px 8px 0 #050506, inset 0 0 0 2px rgba(255,255,255,.025); }
.rules-eyebrow { color: var(--red-light); font: 700 11px var(--pixel); letter-spacing: 1.2px; }
.rules-hero h1 { margin-top: 10px; color: var(--white); font: 700 clamp(30px, 5vw, 54px)/1 var(--pixel); letter-spacing: 1px; text-shadow: 4px 4px 0 #000; }
.rules-hero p { max-width: 620px; margin-top: 13px; color: #9b8e9b; font: 500 14px/1.65 var(--sans); }
.rules-date { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 8px 11px; color: #bdb1ba; background: #141116; border-left: 4px solid var(--red-light); font: 500 11px var(--sans); }
.rules-date i { color: var(--red-light); font-size: 16px; }
.rules-date strong { color: #f0dce5; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; align-items: start; }
.rules-card { background: rgba(12,12,15,.96); border: 2px solid #39323a; box-shadow: 7px 7px 0 #050506, inset 0 0 0 2px rgba(255,255,255,.02); overflow: hidden; }
.rules-card-header { display: flex; align-items: center; gap: 13px; padding: 20px 19px; background: linear-gradient(100deg, rgba(54,23,34,.75), rgba(20,16,22,.45)); border-bottom: 2px solid #302932; }
.rules-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: #fff; background: var(--red-light); border: 2px solid #ff858e; box-shadow: 3px 3px 0 #64152c; font: 700 14px var(--pixel); }
.rules-number-gold { color: #231b09; background: #f4bc4d; border-color: #ffe5a2; box-shadow: 3px 3px 0 #6b4a14; }
.rules-card-header h2 { color: #eee4eb; font: 700 16px/1.35 var(--pixel); letter-spacing: .5px; }
.rules-card-header p { margin-top: 5px; color: #877b87; font: 500 11px var(--sans); }
.rules-list { padding: 10px 18px 18px; }
.rule-item { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid #29242b; }
.rule-item:last-child { border-bottom: 0; }
.rule-item b { color: var(--red-light); font: 700 12px var(--pixel); }
.rule-item p { color: #b6abb5; font: 500 12px/1.65 var(--sans); }
.rule-goodbye { margin: 7px -7px -3px; padding: 14px 7px; background: rgba(227,52,69,.07); border-left: 3px solid var(--red-light); border-bottom: 0; }
.rule-goodbye p { color: #e3cbd6; }
@media (max-width: 820px) { .rules-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rules-page-section { padding: 28px 12px 60px; } .rules-hero { padding: 21px 17px; } .rules-card-header { padding: 16px 14px; } .rules-card-header h2 { font-size: 13px; } .rules-list { padding-inline: 13px; } .rule-item { grid-template-columns: 29px 1fr; gap: 7px; } .rule-item p { font-size: 11px; } }


/* Odświeżenie wizualne DogCode — inspiracja catcode.cat.
   Oryginalna struktura, selektory interakcji i logika pozostają bez zmian. */
:root {
    --black: #08080a;
    --black-2: #0d0d0d;
    --panel: #151518;
    --panel-2: #1b1b22;
    --line: #29292e;
    --line-bright: #47434a;
    --white: #fff;
    --gray: #c1bfc3;
    --gray-dark: #8b878d;
    --red: #e33445;
    --red-light: #ff6b78;
    --red-dark: #8e202b;
    --purple: #5865f2;
    --purple-dark: #3b45c9;
}
html { scroll-padding-top: 82px; }
body {
    background: #08080a;
    color: #fff;
    image-rendering: auto;
}
body::before {
    background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, rgba(0,0,0,.55) 70%, transparent 96%);
}
body::after {
    background: radial-gradient(ellipse at 75% 45%, rgba(227,52,69,.055), transparent 38%);
}
.pixel-stars {
    opacity: .24;
    background-image: radial-gradient(circle at 1px 1px, rgba(227,52,69,.4) 1px, transparent 1.5px);
    background-size: 38px 38px;
    background-position: 0 0;
}
.cursor-light {
    background: radial-gradient(circle, rgba(227,52,69,.13), rgba(227,52,69,.03) 45%, transparent 72%);
}
:focus-visible { outline: 2px solid #ff6b78; outline-offset: 4px; }

/* Nawigacja i dwukolumnowe menu narzędzi. */
.topbar {
    min-height: 72px;
    gap: 24px;
    padding: 0 40px;
    background: #0d0d0d;
    border-bottom: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 -1px rgba(255,255,255,.04), 0 6px 20px rgba(0,0,0,.45);
}
.brand { flex: 0 0 auto; gap: 9px; }
.brand-icon {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.brand-icon img { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)); }
.brand-text { font-size: 18px; letter-spacing: .5px; text-shadow: 2px 2px #000; }
.brand-text span { color: var(--red-light); }
.nav { gap: 10px; }
.nav-item {
    position: relative;
    height: 40px;
    padding: 0 12px;
    border: 2px solid transparent;
    color: rgba(255,255,255,.84);
    font-size: 15px;
    letter-spacing: .5px;
    text-shadow: 2px 2px rgba(0,0,0,.85);
}
.nav-item:hover, .nav-item.active {
    color: var(--red-light);
    background: rgba(227,52,69,.12);
    border-color: #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.12), inset -2px -2px rgba(0,0,0,.65);
}
.nav-item::after {
    content: '';
    position: absolute;
    right: 11px;
    bottom: 3px;
    left: 11px;
    height: 2px;
    background: var(--red);
    box-shadow: 0 0 8px rgba(227,52,69,.6);
    transform: scaleX(0);
    transition: transform .2s ease;
}
.nav-item:hover::after, .nav-item.active::after { transform: scaleX(1); }
.discord, .minecraft-button {
    border: 2px solid #000;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 2px 2px rgba(0,0,0,.65);
}
.discord {
    min-width: 144px;
    height: 44px;
    background: #5865f2;
    box-shadow: inset 2px 2px #9aa4ff, inset -2px -2px #3b45c9, inset 0 -6px #3b45c9;
}
.discord:hover {
    background: #6d78f7;
    transform: none;
    box-shadow: inset 2px 2px #b1b9ff, inset -2px -2px #3b45c9, inset 0 -6px #3b45c9;
}
.discord:active, .minecraft-button:active { transform: translateY(2px); }
.tools-panel {
    top: 100%;
    width: 520px;
    gap: 10px;
    padding: 10px;
    background: #0d0d0d;
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.08), inset -2px -2px rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.75);
}
.tools-group { gap: 4px; }
.tools-group h2 {
    margin-bottom: 4px;
    padding: 8px 10px;
    color: var(--red-light);
    background: rgba(227,52,69,.1);
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.06), inset -2px -2px rgba(0,0,0,.5);
    font-size: 13px;
    letter-spacing: 1.5px;
}
.tool-row { padding: 8px 10px; color: rgba(255,255,255,.8); font-size: 13px; }
.tool-row[href]:hover { color: var(--red-light); background: rgba(227,52,69,.1); transform: none; }
.tool-row.disabled { color: #77727a; }

/* Hero bez ramki: przestrzeń, siatka i duże logo jak we wzorze. */
.home {
    min-height: calc(100vh - 72px);
    padding: 100px 40px 110px;
    overflow: visible;
}
.home::before { display: none; }
.scanline, .corner { display: none; }
.home-layout {
    width: min(100%, 1160px);
    min-height: 0;
    padding: 0;
    gap: 48px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.home-layout::before, .home-layout::after { display: none; }
.intro { flex: 1 1 0; max-width: 700px; }
.pixel-label { margin-bottom: 14px; color: var(--red-light); font-size: 13px; letter-spacing: 1.5px; }
.label-dot { background: var(--red); box-shadow: 2px 2px var(--red-dark), 0 0 10px rgba(227,52,69,.45); }
.intro h1 {
    color: #fff;
    font-size: clamp(38px, 4.15vw, 56px);
    line-height: 1.14;
    letter-spacing: .5px;
    text-shadow: none;
}
.intro h1 span { color: #fff; }
.intro h1 b { color: var(--red-light); text-shadow: none; }
.intro p {
    max-width: 550px;
    margin-top: 24px;
    color: rgba(255,255,255,.82);
    font-family: var(--pixel);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: .3px;
}
.actions { gap: 16px; margin-top: 32px; }
.minecraft-button { min-width: 172px; height: 48px; padding: 0 24px 5px; font-size: 15px; }
.minecraft-button:hover { transform: none; }
.red-button {
    background: #e33445;
    box-shadow: inset 2px 2px #ff9aa4, inset -2px -2px #8e202b, inset 0 -6px #8e202b;
}
.red-button:hover { background: #f04b58; box-shadow: inset 2px 2px #ffc0c4, inset -2px -2px #8e202b, inset 0 -6px #8e202b; }
.purple-button {
    background: #5865f2;
    box-shadow: inset 2px 2px #9aa4ff, inset -2px -2px #3b45c9, inset 0 -6px #3b45c9;
}
.purple-button:hover { background: #6d78f7; box-shadow: inset 2px 2px #b1b9ff, inset -2px -2px #3b45c9, inset 0 -6px #3b45c9; }
.hero-panel { top: calc(100% + 10px); }
.hero-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.logo-stage { width: min(38vw, 450px); height: min(38vw, 450px); }
.logo-stage img { width: 100%; height: 100%; filter: drop-shadow(0 20px 35px rgba(0,0,0,.85)); animation: none; }
.red-aura, .pixel-frame, .stage-grid, .block { display: none; }

/* Zespół: czytelne karty i zachowane kategorie filtrowania. */
.team {
    min-height: 0;
    padding: 95px 32px 100px;
    background: rgba(8,8,10,.84);
    border-color: rgba(255,255,255,.07);
}
.team::before { opacity: .45; background-size: 38px 38px; }
.team > h2 { margin-bottom: 48px; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: 1px; }
.team > .red-line { top: 172px; height: 1px; background: rgba(227,52,69,.45); box-shadow: none; }
.red-line { background: var(--red); box-shadow: 0 0 10px rgba(227,52,69,.2); }
.team-categories {
    width: min(100%, 900px);
    padding: 10px;
    background: #101012;
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
}
.team-category {
    color: rgba(255,255,255,.76);
    background: #1b1b22;
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.1), inset -2px -2px rgba(0,0,0,.6);
}
.team-category:hover, .team-category.active,
.category-all:hover, .category-all.active,
.category-management:hover, .category-management.active,
.category-admin:hover, .category-admin.active,
.category-team:hover, .category-team.active {
    color: #fff;
    background: #e33445;
    border-color: #000;
    box-shadow: inset 2px 2px #ff9aa4, inset -2px -2px #8e202b, inset 0 -5px #8e202b;
    transform: none;
}
.team-category.active::after { display: none; }
.team-group > h2, .group-management > h2, .group-admin > h2, .group-team > h2 {
    color: #fff;
    background: #e33445;
    border: 2px solid #000;
    box-shadow: inset 2px 2px #ff9aa4, inset -2px -2px #8e202b, inset 0 -5px #8e202b;
}
.team-group > .red-line, .group-team > .red-line { background: rgba(227,52,69,.42); box-shadow: none; }
.players-grid .panel-gracz {
    max-width: 255px;
    min-width: 210px;
    padding: 28px 20px 24px;
    background: #151518;
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.08), inset -2px -2px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.4);
}
.players-grid .panel-gracz:hover {
    border-color: #e33445;
    transform: translateY(-4px);
    box-shadow: inset 2px 2px rgba(255,255,255,.12), 0 0 25px rgba(227,52,69,.18), 0 14px 40px rgba(0,0,0,.6);
}
.panel-gracz .icon { border-color: #e33445; box-shadow: 4px 4px 0 #8e202b; }
.panel-gracz .icon img, .rank-image { image-rendering: pixelated; }

/* Wspólne panele narzędzi i regulaminu — bez zmian w kontrolkach. */
.gradient-page-section::before, .smallcaps-page-section::before, .rules-page-section::before {
    background: radial-gradient(ellipse at 80% 15%, rgba(227,52,69,.07), transparent 38%);
}
.gradient-workspace, .smallcaps-workspace, .rules-hero, .rules-card {
    background: rgba(21,21,24,.96);
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.08), inset -2px -2px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.35);
}
.gradient-workspace::before { background: #e33445; box-shadow: 0 0 14px rgba(227,52,69,.4); }
.gradient-card, .generator-wide-card, .gradient-result-panel, .gradient-settings-panel, .smallcaps-card {
    background: #101012;
    border: 2px solid #000;
    box-shadow: inset 2px 2px rgba(255,255,255,.06), inset -2px -2px rgba(0,0,0,.6);
}
.generator-toolbar, .smallcaps-title { border-color: rgba(255,255,255,.09); }
.generator-section-label, .smallcaps-eyebrow { color: #c7b5be; }
.smallcaps-title p, .smallcaps-card-heading small, .rules-card-header p { color: #a9a2aa; }
.gradient-text-input, .color-hex, .decode-input, .smallcaps-input, .smallcaps-preview, .result-preview, .gradient-code {
    color: #f5f3f5;
    background: #09090b;
    border-color: #302d32;
}
.gradient-text-input:focus, .color-hex:focus, .decode-input:focus, .smallcaps-input:focus {
    border-color: #ff6b78;
    box-shadow: 0 0 0 3px rgba(227,52,69,.18);
}
.format-button.active, .mode-button.active { background: #8e202b; border-color: #ff6b78; }
.colors-card .add-color, .decode-button {
    color: #fff;
    background: #e33445;
    border: 2px solid #000;
    box-shadow: inset 2px 2px #ff9aa4, inset -2px -2px #8e202b, inset 0 -5px #8e202b;
}
.colors-card .add-color:hover, .decode-button:hover { background: #f04b58; transform: none; }
.rules-card-header { background: rgba(227,52,69,.08); border-color: rgba(255,255,255,.08); }
.rules-number, .rules-number-gold { color: #fff; background: #e33445; border-color: #000; box-shadow: inset 2px 2px #ff9aa4, inset -2px -2px #8e202b; }
.rule-goodbye { background: rgba(227,52,69,.08); }

/* Stopka. */
.site-footer {
    padding: 64px 40px 24px;
    background: #0d0d0d;
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: none;
}
.footer-inner { width: min(100%, 1200px); }
.footer-main { gap: 48px; }
.footer-brand-block { flex-basis: 300px; }
.footer-brand-block img { width: min(100%, 240px); height: 60px; object-fit: contain; }
.footer-brand-block p { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; }
.footer-title { padding: 0; color: #ff6b78; background: none; border: 0; text-align: left; font-size: 13px; letter-spacing: 1.2px; }
.footer-link { padding: 0; color: rgba(255,255,255,.7); font-size: 13px; }
.footer-link[href]:hover { color: #e33445; background: none; transform: translateX(3px); }
.social { color: #ddd; background: #151518; border-color: #000; box-shadow: inset 2px 2px rgba(255,255,255,.08), inset -2px -2px rgba(0,0,0,.7); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.back-top { color: rgba(255,255,255,.7); }
.back-top:hover { color: #e33445; }

@media (max-width: 1050px) {
    .topbar { gap: 14px; padding-inline: 24px; }
    .nav { gap: 3px; }
    .nav-item { padding-inline: 9px; }
    .home-layout { padding: 0; gap: 28px; }
    .logo-stage { width: 36vw; height: 36vw; }
}
@media (max-width: 780px) {
    html { scroll-padding-top: 130px; }
    .topbar { min-height: 0; padding: 10px 18px; gap: 10px; justify-content: space-between; }
    .brand-text { display: inline; }
    .nav { order: 3; width: 100%; height: 40px; justify-content: center; }
    .discord { margin-left: auto; }
    .home { min-height: 0; padding: 68px 22px 82px; }
    .home-layout { flex-direction: column; gap: 26px; text-align: center; }
    .intro { align-items: center; }
    .intro h1 { font-size: clamp(36px, 8vw, 52px); }
    .intro p { font-size: 15px; }
    .actions { justify-content: center; }
    .logo-stage { width: min(76vw, 350px); height: min(76vw, 350px); }
    .team { padding: 72px 18px 80px; }
    .team > .red-line { top: 138px; }
    .site-footer { padding-inline: 22px; }
}
@media (max-width: 520px) {
    .topbar { gap: 8px; }
    .brand-icon, .brand-icon img { width: 42px; height: 42px; }
    .brand-text { font-size: 16px; }
    .discord { min-width: 118px; height: 40px; padding: 0 12px 4px; font-size: 13px; }
    .nav-item { padding-inline: 9px; font-size: 13px; }
    .nav .tools-panel { left: auto; right: -12px; width: min(520px, calc(100vw - 24px)); }
    .tools-panel { gap: 6px; padding: 8px; }
    .tools-group h2 { padding: 7px 3px; font-size: 11px; letter-spacing: .6px; }
    .tool-row { padding: 7px 4px; font-size: 11px; }
    .home { padding: 55px 16px 70px; }
    .home-layout { padding: 0; }
    .intro h1 { font-size: clamp(33px, 9vw, 43px); }
    .minecraft-button { min-width: 145px; height: 45px; padding-inline: 14px; font-size: 13px; }
    .hero-panel { left: 50%; right: auto; width: min(520px, calc(100vw - 24px)); transform: translate(-50%, 8px); }
    .hero-tools:hover .hero-panel, .hero-tools:focus-within .hero-panel { transform: translate(-50%, 0); }
    .team-categories { padding: 8px; }
    .team-category { min-width: 0; flex: 1 1 calc(50% - 9px); }
    .players-grid .panel-gracz { min-width: 0; max-width: 300px; }
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Zachowaj widoczny znak istniejącego przycisku ukrywania tekstu. */
.generator-toolbar .format-button[data-format="obfuscated"] > span:first-child { display: inline; }

@media (max-width: 520px) {
    .nav { position: relative; }
    .nav .tools-menu { position: static; }
    .nav .tools-panel { left: 0; right: 0; width: 100%; }
    .intro { width: 100%; }
    .actions { position: relative; width: 100%; }
    .hero-tools { position: static; }
    .hero-panel { left: 0; right: 0; width: 100%; transform: translateY(8px); }
    .hero-tools:hover .hero-panel, .hero-tools:focus-within .hero-panel { transform: translateY(0); }
}

@media (max-width: 780px) {
    .logo-stage { order: -1; }
}
@media (max-width: 520px) {
    .actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .actions .minecraft-button { width: 100%; }
}

.setting-checkbox:focus-visible + .setting-switch { outline: 2px solid #ff6b78; outline-offset: 4px; }

@media (max-width: 520px) {
    .actions { flex-wrap: nowrap; }
    .hero-tools { display: block; width: 100%; height: auto; }
}


/* Animowany czerwony pasek z hasłami pod sekcją główną. */
.offer-marquee {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    padding: 17px 0 19px;
    color: #fff;
    background: linear-gradient(180deg, #e33445 0%, #c92538 100%);
    border-top: 2px solid #ff6b78;
    border-bottom: 4px solid #8e202b;
    box-shadow: inset 0 2px rgba(255,255,255,.2), inset 0 -2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.28);
}
.offer-marquee__track {
    display: flex;
    width: max-content;
    animation: offer-marquee-scroll 28s linear infinite;
    will-change: transform;
}
.offer-marquee__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(38px, 5vw, 78px);
    padding-right: clamp(38px, 5vw, 78px);
}
.offer-marquee__group span {
    position: relative;
    flex: 0 0 auto;
    color: #fff;
    font-family: var(--pixel);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #751723, 3px 3px 0 rgba(0,0,0,.55);
}
.offer-marquee__group span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(-1 * clamp(21px, 2.5vw, 39px));
    width: 7px;
    height: 7px;
    background: #ffb2b8;
    box-shadow: 2px 2px 0 #8e202b;
    transform: translateY(-50%);
}
.offer-marquee:hover .offer-marquee__track,
.offer-marquee:focus-within .offer-marquee__track {
    animation-play-state: paused;
}
@keyframes offer-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 520px) {
    .offer-marquee { padding-block: 14px 16px; }
    .offer-marquee__track { animation-duration: 23s; }
    .offer-marquee__group { gap: 34px; padding-right: 34px; }
    .offer-marquee__group span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .offer-marquee__track { animation: none; }
    .offer-marquee__group[aria-hidden="true"] { display: none; }
    .offer-marquee__group { flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding: 0 16px; }
}
/* Dodatkowe kontrolki generatora QR — zgodne z oryginalnym pikselowym motywem DogCode. */
.qr-builder-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:18px; align-items:start; margin-top:18px; }
.qr-builder-grid>.smallcaps-card { margin-top:0; }
.qr-controls-card { padding:16px; }
.qr-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.qr-field { display:block; min-width:0; }
.qr-field-label { display:block; margin:12px 0 8px; color:#817681; font:700 11px var(--pixel); letter-spacing:.5px; }
.qr-select { width:100%; min-height:44px; padding:0 12px; color:#e7dce4; background:#07070a; border:2px solid #302a31; border-radius:0; font:600 12px var(--pixel); }
.qr-select:focus { outline:0; border-color:var(--red-light); box-shadow:0 0 0 3px rgba(227,52,69,.1); }
.qr-color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.qr-color-control { display:flex; align-items:center; gap:10px; min-width:0; padding:9px 12px; background:#0b0b0e; border:2px solid #302a31; border-radius:0; }
.qr-color-control input[type="color"] { width:38px; height:34px; padding:2px; background:#07070a; border:2px solid #4b3a45; border-radius:0; cursor:pointer; }
.qr-color-control span { color:#c8bac5; font:600 11px var(--pixel); }
.qr-preset-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:9px; }
.qr-preset { display:flex; align-items:center; gap:7px; min-width:0; padding:8px 7px; color:#c8bac5; background:#0b0b0e; border:2px solid #302a31; border-radius:0; cursor:pointer; font:600 9px var(--pixel); transition:.16s ease; }
.qr-preset:hover,.qr-preset.is-selected { color:#fff; background:rgba(227,52,69,.12); border-color:var(--red-light); box-shadow:3px 3px 0 #080809; }
.qr-preset-swatch { flex:0 0 18px; height:18px; border:1px solid #888; border-radius:0; }
.qr-preset[data-qr-preset="classic"] .qr-preset-swatch { background:linear-gradient(135deg,#151a2b 50%,#fff 50%); }
.qr-preset[data-qr-preset="red"] .qr-preset-swatch { background:linear-gradient(135deg,#b92b49 50%,#fff0f2 50%); }
.qr-preset[data-qr-preset="ocean"] .qr-preset-swatch { background:linear-gradient(135deg,#087c9d 50%,#e9faff 50%); }
.qr-preset[data-qr-preset="forest"] .qr-preset-swatch { background:linear-gradient(135deg,#176b52 50%,#effbf4 50%); }
.qr-template-heading { margin-top:20px; }
.qr-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:9px; }
.qr-template { display:flex; align-items:center; gap:11px; min-width:0; min-height:63px; padding:10px; color:#c8bac5; text-align:left; background:#0b0b0e; border:2px solid #302a31; border-radius:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); cursor:pointer; transition:.16s ease; }
.qr-template:hover { color:#fff; background:#171014; border-color:#70404e; transform:translate(-1px,-1px); }
.qr-template.is-selected { color:#fff; background:rgba(227,52,69,.11); border-color:var(--red-light); box-shadow:3px 3px 0 #080809; }
.qr-template>span:last-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.qr-template strong { color:#f4eaf0; font:700 11px var(--pixel); }
.qr-template small { color:#8a7d87; font:500 9px var(--sans); }
.qr-template-sample { position:relative; display:block; flex:0 0 36px; width:36px; height:36px; overflow:hidden; background-color:#fff0f2; border:4px solid #b92b49; border-radius:0; }
.qr-template-sample::before { content:''; position:absolute; inset:4px; background-image:radial-gradient(circle,#b92b49 0 2px,transparent 2.4px); background-size:8px 8px; }
.sample-ruby { background:#fff0f2; border-color:#b92b49; }
.sample-dots { background:#fff7f8; border-color:#741c38; }
.sample-dots::before { background-image:radial-gradient(circle,#741c38 0 2px,transparent 2.4px); }
.sample-signature { background:#fff; border-color:#ef5369; box-shadow:3px 3px 0 #64152c; }
.sample-signature::after { content:'DC'; position:absolute; inset:10px 4px auto; color:#fff; background:#b92b49; font:700 7px/13px var(--pixel); text-align:center; }
.sample-ocean { background:#e9faff; border-color:#087c9d; }
.sample-ocean::before { background-image:radial-gradient(circle,#087c9d 0 2px,transparent 2.4px); }
.sample-heart { background:#fff0f2; border:4px double #b92b49; }
.sample-heart::after { content:'♥'; position:absolute; inset:6px 0 auto; color:#b92b49; font:800 14px/18px Arial,sans-serif; text-align:center; }
.qr-customize-heading { display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:16px; border-top:2px solid #28232a; }
.qr-customize-heading .card-index { display:grid; place-items:center; flex:0 0 34px; height:34px; color:var(--red-light); background:#21131a; border:1px solid #753044; border-radius:0; font:700 12px var(--pixel); }
.qr-customize-heading>div { display:flex; flex-direction:column; gap:3px; }
.qr-customize-heading strong { color:#e7dce4; font:700 13px var(--pixel); }
.qr-customize-heading small { color:#766d76; font:500 10px var(--sans); }
.qr-detail-grid { margin-top:2px; }
.qr-logo-upload { margin-top:13px; padding:13px; background:#0b0b0e; border:2px solid #302a31; border-radius:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); }
.qr-logo-upload>.qr-field-label { margin:0 0 10px; }
.qr-logo-actions { display:flex; align-items:center; gap:9px; }
.qr-logo-actions input[type="file"] { flex:1 1 auto; width:100%; min-width:0; padding:7px; color:#c8bac5; background:#07070a; border:2px solid #302a31; border-radius:0; font:500 10px var(--sans); }
.qr-logo-actions input[type="file"]::file-selector-button { margin-right:9px; padding:8px 11px; color:#fff; background:#21131a; border:2px solid #753044; border-radius:0; cursor:pointer; font:600 9px var(--pixel); }
.qr-logo-remove { flex:0 0 auto; padding:8px 11px; color:#e7dce4; background:#21131a; border:2px solid #753044; border-radius:0; cursor:pointer; font:600 9px var(--pixel); }
.qr-logo-remove:hover { color:#fff; background:#451522; }
.qr-logo-name { display:block; margin-top:8px; overflow:hidden; color:#8a7d87; font:500 10px var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.qr-preview-card { display:flex; flex-direction:column; }
.qr-preview-surface { display:grid; place-items:center; min-height:340px; margin-top:13px; padding:20px; overflow:auto; background:#07070a; border:2px solid #302a31; border-radius:0; box-shadow:inset 0 0 0 2px rgba(255,255,255,.018); }
.qr-preview-surface canvas,.qr-preview-surface svg { display:block; max-width:100%; height:auto; padding:10px; background:#fff; border:0; border-radius:0; box-shadow:4px 4px 0 #050506; }
.qr-output-frame { display:grid; place-items:center; max-width:100%; padding:0; background:transparent; border:0; border-radius:0; }
.qr-output-frame.qr-frame-red { padding:10px; background:rgba(227,52,69,.08); border:4px solid var(--red-light); border-radius:0; box-shadow:4px 4px 0 #080809; }
.qr-output-frame.qr-frame-double { padding:10px; background:rgba(227,52,69,.05); border:6px double var(--red); border-radius:0; box-shadow:4px 4px 0 #080809; }
.qr-output-frame.qr-frame-glow { padding:11px; background:#100b0e; border:2px solid #ff586f; border-radius:0; box-shadow:0 0 18px rgba(242,65,91,.3),4px 4px 0 #080809; }
.qr-canvas-host { display:grid; place-items:center; min-width:0; max-width:100%; }
.qr-output-frame .qr-canvas-host canvas { display:block; max-width:100%; height:auto; padding:10px; background:#fff; border:0; border-radius:0; box-shadow:4px 4px 0 #050506; }
.qr-placeholder { display:flex; flex-direction:column; align-items:center; gap:9px; max-width:260px; color:#9b8e9b; text-align:center; }
.qr-placeholder-icon { display:grid; place-items:center; width:56px; height:56px; color:#fff; background:var(--red); border:2px solid #ff7a91; border-radius:0; box-shadow:4px 4px 0 #64152c; font-size:28px; }
.qr-placeholder strong { color:#e7dce4; font:700 14px var(--pixel); }
.qr-placeholder small { color:#8a7d87; font:500 11px/1.6 var(--sans); }
.qr-status { min-height:20px; margin-top:13px; color:#9b8e9b; font:500 11px/1.6 var(--sans); }
.qr-status.is-error { color:#ff929b; }
.qr-preview-card .smallcaps-copy { margin-top:12px; }
.qr-helper-note { margin-top:12px; padding:12px 13px; color:#9b8e9b; background:#0b0b0e; border:2px solid #302a31; border-radius:0; font:500 11px/1.6 var(--sans); }
.qr-helper-note strong { color:#e3cbd6; }
@media (max-width:900px) { .qr-builder-grid { grid-template-columns:1fr; } .qr-preview-surface { min-height:300px; } }
@media (max-width:700px) { .qr-template-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .qr-control-grid { grid-template-columns:1fr; gap:4px; } .qr-preset-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .qr-preview-surface { min-height:260px; padding:12px; } .qr-preview-surface canvas,.qr-preview-surface svg { width:min(100%,280px); height:auto; } .qr-logo-actions { align-items:stretch; flex-direction:column; } .qr-logo-remove { align-self:flex-start; } .smallcaps-workspace { padding:8px; } .rules-card-header { padding:15px; } }
/* Studio QR — ten sam język kart i paneli co generator gradientów. */
.qr-builder-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.86fr); gap:18px; align-items:start; margin-top:18px; }
.qr-editor-form { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; min-width:0; align-items:start; }
.qr-editor-form>.smallcaps-card,.qr-builder-grid>.qr-preview-card { min-width:0; margin-top:0; padding:16px; background:#101012; border:2px solid #000; box-shadow:inset 2px 2px rgba(255,255,255,.06),inset -2px -2px rgba(0,0,0,.6); }
.qr-editor-form>.smallcaps-card { height:100%; }
.qr-editor-form .smallcaps-card-heading { gap:10px; margin-bottom:14px; }
.qr-editor-form .smallcaps-card-heading .card-index { flex:0 0 32px; width:32px; height:32px; }
.qr-content-card,.qr-style-card { padding:16px; }
.qr-content-card .qr-field-label,.qr-style-card .qr-field-label { color:#c7b5be; }
.qr-content-card .smallcaps-input { min-height:130px; padding:14px; color:#f5f3f5; background:#09090b; border:2px solid #302d32; font:600 14px/1.55 var(--sans); }
.qr-content-card .smallcaps-input:focus { border-color:#ff6b78; box-shadow:0 0 0 3px rgba(227,52,69,.18); }
.qr-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.qr-field { display:block; min-width:0; }
.qr-field-label { display:block; margin:10px 0 7px; color:#c7b5be; font:700 10px var(--pixel); letter-spacing:.5px; }
.qr-select { width:100%; min-height:39px; padding:0 9px; color:#f5f3f5; background:#09090b; border:2px solid #302d32; border-radius:0; font:600 11px var(--pixel); }
.qr-select:focus { outline:0; border-color:#ff6b78; box-shadow:0 0 0 3px rgba(227,52,69,.18); }
.qr-color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.qr-color-control { display:flex; align-items:center; gap:8px; min-width:0; padding:8px; background:#09090b; border:2px solid #302d32; border-radius:0; }
.qr-color-control input[type="color"] { flex:0 0 32px; width:32px; height:30px; padding:2px; background:#09090b; border:2px solid #423943; border-radius:0; cursor:pointer; }
.qr-color-control span { color:#ddd2da; font:600 10px var(--pixel); line-height:1.35; }
.qr-preset-heading { margin-top:15px; }
.qr-preset-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:7px; }
.qr-preset { display:flex; align-items:center; gap:7px; min-width:0; padding:7px; color:#d8ced7; background:#151518; border:2px solid #302d32; border-radius:0; cursor:pointer; font:600 9px var(--pixel); transition:.16s ease; }
.qr-preset:hover,.qr-preset.is-selected { color:#fff; background:rgba(227,52,69,.12); border-color:#ff6b78; box-shadow:3px 3px 0 #050506; }
.qr-preset-swatch { flex:0 0 17px; height:17px; border:1px solid #888; border-radius:0; }
.qr-preset[data-qr-preset="classic"] .qr-preset-swatch { background:linear-gradient(135deg,#151a2b 50%,#fff 50%); }
.qr-preset[data-qr-preset="red"] .qr-preset-swatch { background:linear-gradient(135deg,#b92b49 50%,#fff0f2 50%); }
.qr-preset[data-qr-preset="ocean"] .qr-preset-swatch { background:linear-gradient(135deg,#087c9d 50%,#e9faff 50%); }
.qr-preset[data-qr-preset="forest"] .qr-preset-swatch { background:linear-gradient(135deg,#176b52 50%,#effbf4 50%); }
.qr-style-divider { display:flex; align-items:center; gap:8px; margin:18px 0 8px; padding-top:10px; border-top:2px solid #29242b; }
.qr-style-divider .generator-section-label { margin:0; font-size:10px; }
.qr-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:7px; }
.qr-template { display:flex; align-items:center; gap:8px; min-width:0; min-height:54px; padding:7px; color:#d8ced7; text-align:left; background:#0b0b0e; border:2px solid #302d32; border-radius:0; cursor:pointer; transition:.16s ease; }
.qr-template:hover { color:#fff; background:#1a1116; border-color:#70404e; transform:translate(-1px,-1px); }
.qr-template.is-selected { color:#fff; background:rgba(227,52,69,.11); border-color:#ff6b78; box-shadow:3px 3px 0 #080809; }
.qr-template>span:last-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.qr-template strong { color:#f4eaf0; font:700 9px var(--pixel); }
.qr-template small { color:#8a7d87; font:500 8px var(--sans); }
.qr-template-sample { position:relative; display:block; flex:0 0 31px; width:31px; height:31px; overflow:hidden; background:#fff0f2; border:3px solid #b92b49; border-radius:0; }
.qr-template-sample::before { content:''; position:absolute; inset:3px; background-image:radial-gradient(circle,#b92b49 0 1.5px,transparent 1.8px); background-size:7px 7px; }
.sample-ruby { background:#fff0f2; border-color:#b92b49; }
.sample-dots { background:#fff7f8; border-color:#741c38; }
.sample-dots::before { background-image:radial-gradient(circle,#741c38 0 1.5px,transparent 1.8px); }
.sample-signature { background:#fff; border-color:#ef5369; box-shadow:2px 2px 0 #64152c; }
.sample-signature::after { content:'DC'; position:absolute; inset:8px 3px auto; color:#fff; background:#b92b49; font:700 6px/11px var(--pixel); text-align:center; }
.sample-ocean { background:#e9faff; border-color:#087c9d; }
.sample-ocean::before { background-image:radial-gradient(circle,#087c9d 0 1.5px,transparent 1.8px); }
.sample-heart { background:#fff0f2; border:3px double #b92b49; }
.sample-heart::after { content:'♥'; position:absolute; inset:4px 0 auto; color:#b92b49; font:800 12px/15px Arial,sans-serif; text-align:center; }
.qr-screen-reader-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.qr-frame-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.qr-frame-choice { display:flex; align-items:center; gap:8px; min-width:0; min-height:53px; padding:7px; color:#d8ced7; text-align:left; background:#0b0b0e; border:2px solid #302d32; border-radius:0; cursor:pointer; transition:.16s ease; }
.qr-frame-choice:hover { color:#fff; border-color:#70404e; background:#171014; }
.qr-frame-choice.is-selected { color:#fff; background:rgba(227,52,69,.1); border-color:var(--qr-frame-accent,#d9274c); box-shadow:3px 3px 0 #050506; }
.qr-frame-choice>span:last-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.qr-frame-choice strong { font:700 9px var(--pixel); }
.qr-frame-choice small { color:#8a7d87; font:500 8px var(--sans); }
.qr-frame-sample { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; color:#fff; background:#0a0a0c; border:3px solid var(--qr-frame-accent,#d9274c); border-radius:0; }
.qr-frame-sample .bx { font-size:20px; }
.frame-sample-none { border:1px dashed #62565e; color:#8a7d87; }
.frame-sample-double { border-style:double; border-width:5px; }
.frame-sample-glow { box-shadow:0 0 8px var(--qr-frame-accent,#d9274c); }
.qr-accent-colors { margin-top:9px; }
.qr-icon-colors { margin-top:10px; }
.qr-icon-toolbar { display:flex; gap:7px; margin:8px 0; }
.qr-icon-search-wrap { display:flex; align-items:center; gap:7px; flex:1; min-width:0; padding:0 8px; color:#90858f; background:#09090b; border:2px solid #302d32; }
.qr-icon-search-wrap:focus-within { border-color:#ff6b78; box-shadow:0 0 0 3px rgba(227,52,69,.14); }
.qr-icon-search-wrap>.bx { flex:0 0 auto; font-size:16px; }
.qr-icon-search-wrap input { width:100%; min-width:0; height:34px; color:#fff; background:transparent; border:0; outline:0; font:500 10px var(--sans); }
.qr-icon-search-wrap input::placeholder { color:#77717a; }
.qr-clear-icon { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:0 8px; color:#d8ced7; background:#171116; border:2px solid #3b2d36; border-radius:0; cursor:pointer; font:600 8px var(--pixel); white-space:nowrap; }
.qr-clear-icon:hover { color:#fff; border-color:#ff6b78; }
.qr-icon-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; max-height:248px; padding:5px; overflow:auto; background:#09090b; border:2px solid #302d32; scrollbar-color:#8e202b #111114; scrollbar-width:thin; }
.qr-icon-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:54px; padding:5px 2px; color:#cfc5ce; background:#121216; border:1px solid #332d34; border-radius:0; cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.qr-icon-option:hover { color:#fff; background:#20141a; border-color:#945060; transform:translateY(-1px); }
.qr-icon-option.is-selected { color:#fff; background:rgba(227,52,69,.18); border:2px solid #ff6b78; box-shadow:2px 2px 0 #050506; }
.qr-icon-option .bx { color:var(--qr-icon-accent,#fff); font-size:22px; line-height:1; }
.qr-icon-option span { max-width:100%; overflow:hidden; color:#a9a2aa; font:600 8px var(--pixel); text-overflow:ellipsis; white-space:nowrap; }
.qr-icon-option.is-selected span { color:#fff; }
.qr-icon-option[hidden] { display:none!important; }
.qr-icon-option:focus-visible,.qr-frame-choice:focus-visible { outline:2px solid #ff6b78; outline-offset:2px; }
.qr-logo-field { margin-top:12px; padding:10px; background:#0b0b0e; border:2px solid #302d32; }
.qr-logo-actions { display:flex; align-items:center; gap:7px; }
.qr-logo-actions input[type="file"] { flex:1 1 auto; width:100%; min-width:0; padding:6px; color:#c8bac5; background:#07070a; border:2px solid #302a31; font:500 9px var(--sans); }
.qr-logo-actions input[type="file"]::file-selector-button,.qr-logo-remove { margin-right:6px; padding:7px; color:#fff; background:#21131a; border:2px solid #753044; border-radius:0; cursor:pointer; font:600 8px var(--pixel); }
.qr-logo-remove { flex:0 0 auto; margin:0; }
.qr-logo-name { display:block; margin-top:7px; overflow:hidden; color:#8a7d87; font:500 9px var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.qr-boxicons-link { display:inline-flex; align-items:center; gap:5px; margin:10px 0; color:#ff8b9b; font:600 9px var(--pixel); text-decoration:none; }
.qr-boxicons-link:hover { color:#fff; text-decoration:underline; }
.qr-generate-button { margin-top:10px; }
.qr-preview-card { position:sticky; top:96px; display:flex; flex-direction:column; }
.qr-preview-card .smallcaps-card-heading { margin-bottom:14px; }
.qr-preview-surface { display:grid; place-items:center; min-height:330px; margin-top:0; padding:16px; overflow:auto; background:#07070a; border:2px solid #302d32; border-radius:0; box-shadow:inset 0 0 0 2px rgba(255,255,255,.018); }
.qr-preview-surface canvas,.qr-preview-surface svg { display:block; max-width:100%; height:auto; padding:10px; background:#fff; border:0; border-radius:0; box-shadow:4px 4px 0 #050506; }
.qr-output-frame { display:grid; place-items:center; max-width:100%; padding:0; background:transparent; border:0; }
.qr-output-frame.qr-frame-red { padding:10px; background:rgba(227,52,69,.08); border:4px solid var(--qr-frame-color,var(--qr-frame-accent,#d9274c)); box-shadow:4px 4px 0 #080809; }
.qr-output-frame.qr-frame-double { padding:10px; background:rgba(227,52,69,.05); border:6px double var(--qr-frame-color,var(--qr-frame-accent,#d9274c)); box-shadow:4px 4px 0 #080809; }
.qr-output-frame.qr-frame-glow { padding:11px; background:#100b0e; border:2px solid var(--qr-frame-color,var(--qr-frame-accent,#d9274c)); box-shadow:0 0 18px var(--qr-frame-color,var(--qr-frame-accent,#d9274c)),4px 4px 0 #080809; }
.qr-canvas-host { display:grid; place-items:center; min-width:0; max-width:100%; }
.qr-output-frame .qr-canvas-host canvas { display:block; max-width:100%; height:auto; padding:10px; background:#fff; border:0; border-radius:0; box-shadow:4px 4px 0 #050506; }
.qr-placeholder { display:flex; flex-direction:column; align-items:center; gap:9px; max-width:260px; color:#9b8e9b; text-align:center; }
.qr-placeholder-icon { display:grid; place-items:center; width:56px; height:56px; color:#fff; background:var(--red); border:2px solid #ff7a91; border-radius:0; box-shadow:4px 4px 0 #64152c; font-size:28px; }
.qr-placeholder strong { color:#e7dce4; font:700 14px var(--pixel); }
.qr-placeholder small { color:#8a7d87; font:500 11px/1.6 var(--sans); }
.qr-status { min-height:20px; margin-top:12px; color:#9b8e9b; font:500 10px/1.6 var(--sans); }
.qr-status.is-error { color:#ff929b; }
.qr-preview-card .smallcaps-copy { margin-top:10px; }
.qr-helper-note { margin-top:10px; padding:11px; color:#9b8e9b; background:#0b0b0e; border:2px solid #302a31; font:500 10px/1.6 var(--sans); }
.qr-helper-note strong { color:#e3cbd6; }

/* Animowana plakietka NEW przy Kreatorze QR w menu i stopce. */
.tools-panel .tool-row[href="/kreator-qr-kodow.html"]::after,
.footer-column .footer-link[href="/kreator-qr-kodow.html"]::after {
    content:"NEW";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:8px;
    padding:2px 5px;
    vertical-align:middle;
    color:#fff;
    background:var(--red);
    border:1px solid #ff7a91;
    box-shadow:2px 2px 0 #64152c;
    font:700 8px/1.35 var(--pixel);
    letter-spacing:.4px;
    animation:qr-new-bounce 1.7s ease-in-out infinite;
}
@keyframes qr-new-bounce {
    0%,100% { transform:translateY(0) scale(1); box-shadow:2px 2px 0 #64152c,0 0 0 rgba(255,91,120,0); }
    50% { transform:translateY(-2px) scale(1.06); box-shadow:2px 2px 0 #64152c,0 0 10px rgba(255,91,120,.45); }
}
@media (max-width:1050px) { .qr-builder-grid { grid-template-columns:1fr; } .qr-preview-card { position:static; } }
@media (max-width:760px) { .qr-editor-form { grid-template-columns:1fr; } .qr-preview-card { position:static; } }
@media (max-width:520px) { .qr-builder-grid { gap:12px; } .qr-editor-form>.smallcaps-card,.qr-builder-grid>.qr-preview-card { padding:12px; } .qr-icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:220px; } .qr-icon-toolbar { flex-direction:column; } .qr-clear-icon { min-height:32px; } .qr-logo-actions { align-items:stretch; flex-direction:column; } .qr-logo-remove { align-self:flex-start; } }
@media (prefers-reduced-motion:reduce) { .tools-panel .tool-row[href="/kreator-qr-kodow.html"]::after,.footer-column .footer-link[href="/kreator-qr-kodow.html"]::after { animation:none; } }
/* Mobilne dopracowanie — zachowuje pikselowy motyw i nie zmienia wyglądu desktopu. */
@media (max-width: 780px) {
    .site-footer { padding: 40px 20px 22px; }
    .footer-main { flex-direction: column; gap: 26px; padding-bottom: 28px; }
    .footer-brand-block { flex: 0 1 auto; width: min(100%, 360px); }
    .footer-brand-block img { width: min(100%, 250px); }
    .footer-links { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
    .footer-column { min-width: 0; gap: 8px; }
    .footer-title { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .footer-link { min-height: 30px; padding-block: 5px; line-height: 1.45; overflow-wrap: anywhere; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; }
    .footer-bottom > div { width: 100%; }
    .copyright-bright, .copyright-dim { font-size: 10px; line-height: 1.55; }
    .back-top { align-self: flex-end; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); }
    .qr-builder-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .qr-preview-card { position: static; }
    .qr-preview-surface { min-height: 300px; }
}

@media (max-width: 760px) {
    .qr-editor-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .qr-editor-form > .smallcaps-card { height: auto; }
    .qr-editor-form .smallcaps-card-heading { margin-bottom: 12px; }
    .qr-content-card .smallcaps-input { min-height: 112px; }
    .qr-preview-card { max-width: none; }
}

@media (max-width: 520px) {
    .topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 9px 13px 8px; }
    .brand { gap: 8px; }
    .brand-icon, .brand-icon img { width: 40px; height: 40px; }
    .brand-text { font-size: 15px; }
    .discord { min-width: 112px; min-height: 42px; margin-left: auto; font-size: 12px; }
    .nav { display: flex; order: 3; width: 100%; height: 46px; justify-content: center; gap: 4px; }
    .nav-item { min-height: 44px; padding-inline: 11px; font-size: 13px; }
    .nav .tools-panel { max-height: calc(100dvh - 126px); overflow-y: auto; overscroll-behavior: contain; }

    .qr-builder-grid { gap: 12px; margin-top: 12px; }
    .qr-editor-form { gap: 11px; }
    .qr-editor-form > .smallcaps-card, .qr-builder-grid > .qr-preview-card { padding: 13px; }
    .qr-content-card .smallcaps-input { min-height: 112px; padding: 13px; font-size: 16px; }
    .qr-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .qr-select { min-height: 46px; padding-inline: 8px; font-size: 14px; }
    .qr-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .qr-color-control { min-height: 48px; padding: 7px; gap: 7px; }
    .qr-color-control span { font-size: 9px; }
    .qr-preset-list, .qr-template-grid, .qr-frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .qr-preset { min-height: 42px; padding: 7px 6px; font-size: 8px; }
    .qr-template { min-height: 58px; padding: 7px 6px; gap: 6px; }
    .qr-template strong { font-size: 8px; }
    .qr-template small { font-size: 8px; }
    .qr-frame-choice { min-height: 58px; padding: 7px 6px; gap: 6px; }
    .qr-frame-choice strong { font-size: 8px; }
    .qr-icon-toolbar { flex-direction: column; gap: 7px; }
    .qr-icon-search-wrap input { height: 42px; font-size: 16px; }
    .qr-clear-icon { min-height: 42px; font-size: 9px; }
    .qr-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 230px; gap: 6px; padding: 5px; -webkit-overflow-scrolling: touch; }
    .qr-icon-option { min-height: 58px; }
    .qr-icon-option .bx { font-size: 22px; }
    .qr-icon-option span { font-size: 8px; }
    .qr-logo-actions { align-items: stretch; flex-direction: column; gap: 8px; }
    .qr-logo-actions input[type="file"] { min-height: 44px; font-size: 13px; }
    .qr-logo-actions input[type="file"]::file-selector-button, .qr-logo-remove { min-height: 38px; }
    .qr-logo-remove { align-self: flex-start; }
    .qr-boxicons-link { min-height: 38px; }
    .qr-generate-button, .qr-preview-card .smallcaps-copy { width: 100%; min-height: 48px; justify-content: center; }
    .qr-preview-surface { min-height: 282px; padding: 10px; }
    .qr-output-frame .qr-canvas-host canvas { width: min(100%, 256px); }
    .qr-status { font-size: 11px; }
    .qr-helper-note { font-size: 11px; }

    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 14px; }
    .footer-link { font-size: 11px; }
    .footer-bottom { gap: 12px; }
}

@media (max-width: 370px) {
    .topbar { padding-inline: 10px; }
    .brand-text { font-size: 13px; }
    .discord { min-width: 100px; padding-inline: 7px; font-size: 11px; }
    .nav-item { padding-inline: 8px; font-size: 12px; }
    .qr-editor-form > .smallcaps-card, .qr-builder-grid > .qr-preview-card { padding: 10px; }
    .qr-control-grid { gap: 6px; }
    .qr-select { padding-inline: 6px; font-size: 13px; }
    .qr-frame-choice { gap: 5px; }
    .qr-frame-sample { flex-basis: 30px; width: 30px; height: 30px; }
    .qr-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-links { gap: 16px 10px; }
}

/* Panel Klienta — lustrzany styl Discorda, tylko jasna paleta. */
.header-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; margin-left:auto; }
.header-actions .discord { margin-left:0; }
.client-panel-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:152px; height:45px; padding:0; color:#111114; background:#f4f0f2; border:2px solid #fff; border-bottom-color:#c6c0c5; box-shadow:3px 3px 0 #14112e; font-family:var(--pixel); font-size:15px; text-decoration:none; white-space:nowrap; transition:.18s ease; }
.client-panel-button .bx { font-size:20px; }
.client-panel-button:hover { color:#111114; background:#fff; transform:translate(-1px,-1px); box-shadow:5px 5px 0 #14112e; }
.client-panel-button:focus-visible { outline:2px solid #ff6b78; outline-offset:3px; }
@media (max-width:780px) {
    .header-actions { order:2; gap:8px; margin-left:auto; }
}
@media (max-width:520px) {
    .header-actions { gap:8px; }
    .header-actions .discord, .client-panel-button { min-width:112px; height:42px; padding-inline:8px; font-size:11px; }
    .client-panel-button { gap:8px; }
    .client-panel-button .bx { font-size:18px; }
}
@media (max-width:440px) {
    .brand-text { display:none; }
}
@media (max-width:370px) {
    .header-actions { gap:5px; }
    .header-actions .discord, .client-panel-button { min-width:92px; height:39px; padding-inline:6px; font-size:10px; }
    .client-panel-button .bx { font-size:16px; }
    .brand-icon,.brand-icon img { width:36px; height:36px; }
}