/* ================= BODY & TŁO ================= */
body{
    margin:0;
    font-family:'Courier New', monospace;
    background:
        radial-gradient(circle at 20% 30%, #0ff2 0px, transparent 2px),
        radial-gradient(circle at 80% 70%, #a0f2 0px, transparent 2px),
        radial-gradient(circle at 50% 50%, #0ff1 0px, transparent 1px),
        #050508;
    background-size: 3px 3px, 4px 4px, 2px 2px;
    color:#fff;
    overflow-x:hidden;
}

/* pixel grid zamiast blur linii */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        linear-gradient(#0ff2 1px, transparent 1px),
        linear-gradient(90deg, #a0f2 1px, transparent 1px);
    background-size: 20px 20px;
    opacity:0.15;
    image-rendering: pixelated;
    pointer-events:none;
}

/* ================= HEADER ================= */
header{
    text-align:center;
    padding:40px 10px;
}
header h1{
    font-size:3em;
    color:#0ff;
    text-shadow:
        2px 2px #a0f,
        -2px -2px #0ff;
    letter-spacing:2px;
}
header p{
    color:#aaa;
    text-shadow:0 0 3px #0ff;
}

/* ================= SEARCH & SORT ================= */
.search-sort-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:20px;
    width:100%;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

/* search */
.search-form{
    display:flex;
    align-items:center;
    flex:none;
}
.search-form input{
    padding:10px;
    border-radius:0;
    border:2px solid #0ff;
    background:#050508;
    color:#fff;
}
.search-form button{
    padding:10px 15px;
    background:#0ff;
    color:black;
    border:none;
    border-radius:0;
    cursor:pointer;
    font-weight:bold;
    box-shadow:0 0 5px #0ff, inset 0 0 5px #a0f;
}
.search-form button:hover{
    background:#a0f;
    color:white;
    box-shadow:0 0 10px #a0f, 0 0 20px #0ff;
}

/* sort - po prawej w linii */
.sort-form{
    margin-left:auto;
    flex:none;
}
.sort-form select{
    padding:10px;
    border-radius:0;
    border:2px solid #0ff;
    background:#050508;
    color:#fff;
    cursor:pointer;
}

/* ================= CONTAINER ================= */
.repo-container{
    width:80%;
    margin:auto;
}

/* ================= FILE CARD ================= */
.file-card{
    display:flex;
    align-items:center;
    background:#0a0a12;
    margin:20px 0;
    padding:20px;
    border-radius:0;
    border:1px solid #0ff;
    transition:0.15s;
    box-shadow:0 0 5px #0ff, 0 0 10px #a0f inset;
}

/* HOVER EFFECT */
.file-card:hover {
    transform: translateY(-2px);
    box-shadow:0 0 2px #0ff, 0 0 15px #0ff, 0 0 25px #a0f;
}

/* ================= FILE LEFT ================= */
.file-left{
    width:100px;
    text-align:center;
}
.file-icon{
    width:60px;
    filter:drop-shadow(0 0 5px cyan);
}

/* ================= FILE MIDDLE ================= */
.file-middle{
    flex:1;
}
.file-middle h2{
    color:#0ff;
    margin:0;
}
.file-middle h2 small{
    font-size:0.6em;
    color:#a0f;
    margin-left:8px;
}

/* glitch nazwy */
.file-card:hover .file-middle h2{
    animation: glitch 0.1s linear infinite; /* szybki glitch powtarzany */
    animation-iteration-count: 3; /* 10 powtórzeń = ok. 2 sekundy */
}

@keyframes glitch{
    0%{ transform:translate(0); }
    20%{ transform:translate(-2px, 2px); }
    40%{ transform:translate(2px, -2px); }
    60%{ transform:translate(-1px, 1px); }
    80%{ transform:translate(1px, -1px); }
    100%{ transform:translate(0); }
}

.file-middle p{
    color:#ccc;
}
.meta{
    font-size:0.85em;
    color:#aaa;
    margin-top:5px;
}
.screenshot{
    width:200px;
    margin-top:10px;
    border-radius:0;
    box-shadow:0 0 10px #a0f;
}

/* lists */
.file-middle ul{
    list-style:none;
    padding-left:0;
    color:#fff;
}
.file-middle ul li{
    color:#fff;
    position:relative;
    padding-left:20px;
    margin:5px 0;
}
.file-middle ul li::before{
    content:"▸";
    position:absolute;
    left:0;
    color:cyan;
    text-shadow:0 0 5px cyan;
}
.file-middle small{
    color:#aaa;
}

/* ================= FILE RIGHT ================= */
.file-right{
    width:200px;
    text-align:center;
}
.download-btn{
    display:inline-block;
    padding:12px 25px;
    background:#0ff;
    color:black;
    text-decoration:none;
    font-weight:bold;
    border-radius:0;
    border:2px solid #a0f;
    box-shadow:0 0 5px #0ff, inset 0 0 5px #a0f;
    transition:0.1s;
}
.download-btn:hover{
    background:#a0f;
    color:white;
    box-shadow:0 0 10px #a0f, 0 0 20px #0ff;
    transform:scale(1.05);
}

/* ================= TAGS ================= */
.tags span{
    background:#0ff1;
    color:#050508;
    padding:2px 5px;
    margin:0 3px;
    border-radius:0;
    font-size:0.8em;
}

/* ================= FOOTER ================= */
footer{
    text-align:center;
    padding:30px;
    color:#555;
}

/* ================= MOBILE ================= */
@media (max-width: 768px){
    .repo-container{ width:95%; }
    .file-card{ flex-direction:column; align-items:flex-start; }
    .file-left{ width:100%; text-align:left; margin-bottom:10px; }
    .file-icon{ width:50px; }
    .file-middle{ width:100%; }
    .screenshot{ width:100%; max-width:100%; }
    .file-right{
        width:100%;
        margin-top:15px;
        text-align:left;
    }

    .download-btn{
        display:block;
        width:100%;
        box-sizing:border-box; /* KLUCZOWE */
        text-align:center; /* ← TO DODAJE CENTROWANIE NAPISU */
    }
    header h1{ font-size:2em; }
    .search-sort-wrapper{ flex-direction:column; gap:10px; }
    .sort-form{ margin-left:0; width:100%; text-align:center; }
    .search-form{ width:100%; justify-content:center; }
    .search-form input{ width:70%; }
}

.tags-wrapper {
    margin: 10px 0;
}

.tag-btn {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px;
    background: #eee;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
}

.tag-btn.active {
    background: #333;
    color: #fff;
}

.repo-container{
    overflow-x:hidden;
}