* { 
    box-sizing: border-box; 
} 

body { 
    font-family: Arial, sans-serif; 
    background: #f2f2f2; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; /* Optional: prevent accidental horizontal scroll */
    /*background: url('fundo.png') no-repeat center center fixed; background-size: cover;*/ 
} 

h1 { 
    margin-bottom: 2rem; 
} 

.card-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    /*justify-content: center; /* Center cards horizontally */ 
    gap: 0; /* Optional: spacing between cards */ 
    max-width: 100vw; /* Prevents overflow */ 
    padding: 0; 
} 

.card { 
    width: 100%; 
    height: 100%; 
    perspective: 1000px; 
    border: 1px solid #000; /* Thin light gray border */ 
    overflow: hidden;
    position:relative;
} 

.card::after {
    content: "";
    position: absolute;
    top: -12px;      /* moves it a bit upward */
    right: -50px;    /* moves it to the right for a clean diagonal */
    width: 100px;
    height: 40px;
    transform: rotate(45deg);
    background: transparent; /* default, color added by classes below */
    z-index: 10;
}


.card-link, .card { 
    width: 100%; 
    aspect-ratio: 1 / 1; /* Maintain perfect square */ 
    height: auto; 
    margin: 0; 
    max-width: 400px; 
} 

.card-inner { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    transition: transform 0.6s; 
    transform-style: preserve-3d;

} 

.card-front, .card-back { 
    position: absolute;
    inset: 0;       /* fill padded area */
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    box-shadow: none;
} 

.card-front img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.card-link { 
    display: block; 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    text-decoration: none; 
    margin: 0; 
}

.card-back h2, .card-back p { 
    margin: 0.5rem 0; 
    text-align: center; 
} 

@media (max-width: 700px) { 
    .card-grid { 
        grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); 
    } 
} 

.card-inner.flipped { 
    transform: rotateY(180deg); 
}

.card-back { 
    background: #fff; 
    color: #333; 
    padding: 1rem; 
    transform: rotateY(180deg); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    justify-content: flex-start; 
}

.card-back-thumb { 
    width: 30%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 6px; 
    margin-bottom: 0.5rem; 
}

.card-back-title { 
    font-size: 0.8rem; 
    margin: 0.5rem 0; 
} 

.card-back-desc { 
    font-size: 0.95rem; 
    line-height: 1.4; 
    margin: 0; 
    padding: 0 0.5rem; 
    text-align: left; 
    width: 100%; 
}

.filter-container { 
    margin: 1rem auto; 
    text-align: center; 
}

#tagFilter { 
    padding: 0.5rem; 
    font-size: 1rem; 
    border-radius: 4px; 
}

.top-bar { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    align-items: center; 
    justify-content: space-between; 
    padding: 1rem; 
    width: 100%;
} 

.left-title { 
    justify-self: start;
}

.right-filter { 
    justify-self: end;
}

.right-filter label, .right-filter select { 
    font-size: 1rem; 
}

/* corrida = yellow */
.tag-corrida .card::after {
    background: yellow;
}

/* filmes = pink */
.tag-filmes .card::after {
    background: pink;
}

/* jogos = brown */
.tag-jogos .card::after {
    background: purple;
}

/* links = gray */
.tag-links .card::after {
    background: gray;
}

/* livros = green */
.tag-livros .card::after {
    background: green;
}

/* programas = orange */
.tag-programas .card::after {
    background: orange;
}

/* series = red */
.tag-series .card::after {
    background: red;
}

/* futebol = blue */
.tag-futebol .card::after {
    background: blue;
}



@media (max-width: 375px) {
    .card-back-title {
        font-size: 0.75rem !important;
    }
    .card-back-desc {
        font-size: 0.7rem !important;
    }
}

/* Landscape small screens (height becomes 375px) */
@media (max-height: 375px) {
    .card-back-title {
        font-size: 0.75rem !important;
    }
    .card-back-desc {
        font-size: 0.7rem !important;
    }
}