/*HTML*/
* {
    box-sizing: border-box;
}

:root {
    --bg-color: #000000;
    --bg-gradient: linear-gradient(180deg, #16222A 0%, #3A6073 0%, #000000 100%);
    /* Strong Blue to Black */
    /* Dark background default */
    --text-color: rgb(33, 92, 148);
    /* Dark Blue like cards */
    --card-bg: rgb(33, 92, 148);
    --header-bg: rgba(33, 92, 148, 0.3);
    /* Transparent for Header */
    --border-color: #00d2ff;
    --glow-color: rgba(0, 210, 255, 0.3);
    --title-stroke: #ffffff;
    /* White stroke for visibility in dark mode */
    --item-bg: #1a1b26;
    /* Subtle dark blue-grey for sections */

    /* Title Customization */
    --title-color: rgb(33, 92, 148);
    /* Dark Blue like cards */

    /* Form Customization (Dark Mode) */
    --form-text-color: #ffffff;
    /* White text requested */
    --input-bg-gradient: linear-gradient(135deg, #dcd0ff 0%, #b39ddb 100%);
    /* Lilac gradient */
}

.light-mode {
    --bg-color: #f0f0f0;
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #c4cbd6 50%, #b39ddb 100%);
    /* Stronger Lilac/Gray */
    --text-color: #5a024c;
    --card-bg: #e0d0ff;
    /* Lilac for cards/footer */
    --header-bg: rgba(224, 208, 255, 0.85);
    /* Transparent Lilac for Header */
    --border-color: #8C0375;
    --glow-color: rgba(140, 3, 117, 0.3);
    --title-stroke: black;
    /* Black stroke for light mode */
    --item-bg: #e0e0e0;

    /* Title Customization */
    --title-color: #8C0375;
    /* Purple for Light Mode */

    /* Form Customization (Light Mode) */
    --form-text-color: #5a024c;
    /* Keep dark text for readability */
    --input-bg-gradient: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%);
    /* Blue gradient */
}

.title_section {
    grid-column: 1 / -1;
    width: 100%;
}

.title_container {
    background-image: url("../img/ui/web_developer_wallpaper__code__by_plusjack_d7bmt54-fullview.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    object-fit: contain;
}

/*layout*/
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: start;
    gap: 2rem;
    padding: 2rem;
    background-image: url("../img/ui/");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    object-fit: contain;
}





/* Completed games span full width */
.juegos_terminados {
    grid-column: 1 / -1;
    width: 100%;
}

/* Left column */
.games {
    grid-column: 1;
    width: 100%;
    margin-right: 0;
    padding: 1.5rem;
}

/* Right column */
.agregar_juegos {
    grid-column: 2;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    /* Ensure full viewport height */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    background: var(--bg-gradient);
    /* Use gradient instead of solid color */
    background-attachment: fixed;
    /* Keep gradient fixed while scrolling */
    color: var(--text-color);
    transition: background 0.3s, color 0.3s;
}

/*header*/
/*header*/
header {
    background-color: var(--header-bg);
    /* Use transparent theme color */
    padding: 0 1rem;
    /* Minimize vertical padding */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px);
    /* Strong blur for glass effect */
    border-bottom: 1px solid var(--glow-color);
    /* Add subtle border for definition */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Left container handles flex for Home button + Logo */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-edrav {
    height: 90px;
    /* Reduced from 120px to make header slimmer */
    width: auto;
    object-fit: contain;
}

.logo-property {
    height: 40px;
    /* Keep center logo standard */
    width: auto;
    object-fit: contain;
}

.header-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}

.control-btn img {
    width: 50px;
    /* Increased from 35px for Sun/Moon/Home */
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px var(--glow-color));
}

/*web titulo*/
.web_titulo {
    font-size: 5rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
    color: var(--title-color);
    /* Updated to use variable */
    font-family: 'Bungee Shade', cursive;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: var(--title-stroke);
}


/*seccion cards*/
/*JUegos pendientes(card titutlo)*/
/*JUegos pendientes(card titutlo)*/
.card_titulos {
    font-size: 2.5rem;
    /* Reduced from 3.5rem */
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
    color: var(--title-color);
    /* Updated to use variable */
    font-family: 'Bungee Shade', cursive;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: var(--title-stroke);
    /* Use variable for contrast */
}




.cards_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    /* Smaller minimum width for more columns */
    gap: 0.8rem;
    background-color: var(--item-bg);
    padding: 1rem;
    border-radius: 10px;

    /* Scrollbar implementation */
    max-height: 500px;
    /* Adjust height as needed */
    overflow-y: auto;

    /* Optional: Custom scrollbar styling for Webkit browsers */
    scrollbar-width: thin;
    scrollbar-color: #8C0375 #1a1a1a;
}

/* Custom scrollbar for Webkit */
.cards_grid::-webkit-scrollbar {
    width: 8px;
}

.cards_grid::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.cards_grid::-webkit-scrollbar-thumb {
    background-color: #8C0375;
    border-radius: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--card-bg);
    padding: 0.5rem;
    /* Reduced padding */
    border-radius: 12px;
    /* Slightly smaller radius */
    gap: 0.3rem;
    /* Reduced gap */

    /* New Card Border/Outline */
    border: 2px solid var(--border-color);
    /* Cyan border for "tech/game" look */
    box-shadow: 0 0 10px var(--glow-color);
    /* Glow effect */
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s, border-color 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6);
}

.card img {
    width: 100%;
    /* Take full width of the card container */
    height: 120px;
    /* Fixed height for uniformity */
    object-fit: cover;
    /* Cover helps fill the space without distortion */
    border-radius: 8px;
}

.card_info {
    display: flow-root;
    align-items: center;
    background-color: var(--card-bg);
    padding: 0.5px;
    border-radius: 4rem;
    gap: 0.2rem;
    font-size: 12px;
    /* Smaller font */
    text-align: center;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    /* User requested white text for card info/title */
}

.card_info p {
    margin: 2px 0;
}

.terminado-label {
    color: #00ff00;
    font-weight: bold;
    font-size: 0.8rem;
}

.btn-eliminar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    margin-top: 5px;
    transition: transform 0.2s;
}

.btn-eliminar:hover {
    transform: scale(1.2);
}











/*seccion formulario*/


/*agregar juegos(fromulario)*/
/*agregar juegos(fromulario)*/
.agregar_juegos__titulo {
    font-size: 2.5rem;
    /* Reduced from 3.5rem */
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
    color: var(--title-color);
    /* Updated to use variable */
    font-family: 'Bungee Shade', cursive;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: var(--title-stroke);
}

.agregar_juegos {
    width: 100%;
}

.agregar_juegos__container form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}




.agregar_juegos__container label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    color: var(--form-text-color);
    /* Applied custom color */
}

.agregar_juegos__container input {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-family: 'Poppins', sans-serif;
    background: var(--input-bg-gradient);
    /* Applied gradient */
    color: #000;
    /* Ensure text is readable on light gradients */
}

.agregar_juegos__container button {
    margin-top: 1rem;
    padding: 0.6rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 20px;
    /* More rounded */
    background: linear-gradient(90deg, #90caf9 0%, #b39ddb 100%);
    /* Blue to Lilac gradient */
    border: none;
    color: #fff;
    /* White text for better contrast */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* Slight shadow for readability */
    transition: transform 0.2s, box-shadow 0.2s;
}

.agregar_juegos__container button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(179, 157, 219, 0.6);
    /* Lilac glow on hover */
}

.agregar_juegos__container select {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: var(--input-bg-gradient);
    /* Applied gradient */
    color: black;
    font-family: 'Poppins', sans-serif;
}

.hidden-input {
    display: none;
    margin-top: 0.5rem;
}

.visible-input {
    display: block;
}









/*seccion juegos termiados*/


/*juegos terminados(card titutlo)*/
/*juegos terminados(card titutlo)*/
.juegos_terminados__titulo {
    color: var(--title-color);
    /* Updated to use variable */
    font-family: 'Bungee Shade', cursive;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: var(--title-stroke);
    font-size: 2.5rem;
    /* Reduced from 4.2rem */
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
}

.juegos_terminados__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.8rem;
    background-color: var(--item-bg);
    padding: 1rem;
    border-radius: 10px;
    max-height: 300px;
    overflow-y: auto;

    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #8C0375 #1a1a1a;
}





















































/*seccion FOOTER*/

/*footer*/
.container__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 0.5rem;
    /* Reduced from 1rem */
    background-color: var(--card-bg);
    /* Match header/theme */
    height: 80px;
    /* Reduced from 100px */
}

/* Specific sizes for footer logos */
.footer-link:nth-child(1) img {
    /* Alura */
    height: 30px;
    /* Smaller */
}

.footer-link:nth-child(2) img {
    /* ChatGPT */
    height: 60px;
    /* Reduced from 80px */
}

.footer-link:nth-child(3) img {
    /* GitHub */
    height: 60px;
    /* Reduced from 80px */
}

.footer-link img {
    height: 60px;
    /* Fixed height for uniformity */
    width: auto;
    object-fit: contain;
    transition: transform 0.2s;
}

.footer-link:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px var(--glow-color));
}

/* Footer spans full width */
footer {
    grid-column: 1 / -1;
    width: 100%;
}



/* Mobile Responsiveness */
@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        /* Stack columns */
        padding: 1rem;
    }

    .agregar_juegos {
        grid-column: 1;
        /* Reset to single column */
    }

    .games {
        grid-column: 1;
    }

    .web_titulo,
    .juegos_terminados__titulo {
        font-size: 2.5rem;
        /* Smaller titles on mobile */
    }

    .container__footer {
        flex-direction: row;
        /* Changed from column to row */
        flex-wrap: wrap;
        /* Allow wrapping if needed */
        justify-content: center;
        gap: 1.5rem;
        text-align: center;
        height: auto;
        /* Allow auto height for stacked column */
        padding: 1rem;
        /* Restore padding for mobile */
    }

    .footer-link img {
        width: 100%;
        max-width: 150px;
        /* Limit size on mobile */
        height: auto;
        /* Let height adjust naturally */
        margin: 0;
    }

    /* Override sticky header on mobile/tablet portrait so it scrolls away */
    header {
        position: relative !important;
        /* Force override */
        top: auto !important;
    }
}

/* Specific Phone Optimizations (iPhone/Android) */
@media (max-width: 480px) {

    /* Header: Scale down elements to fit tight width and remove sticky behavior */
    .header-container {
        padding: 0 0.5rem;
    }

    /* Header: Scale down elements to fit tight width */
    .header-container {
        padding: 0 0.5rem;
    }





    .logo-edrav {
        height: 50px;
        /* Significantly smaller */
    }

    .logo-property {
        height: 25px;
        /* Smaller middle logo */
    }

    .control-btn img {
        width: 35px;
        height: 35px;
        /* Smaller buttons */
    }

    .header-left,
    .header-right {
        gap: 8px;
        /* Tighter spacing */
    }

    /* Titles: Prevent overflow and wrapping issues */
    .web_titulo,
    .juegos_terminados__titulo,
    .card_titulos,
    .agregar_juegos__titulo {
        font-size: 1.8rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* Footer: More compact vertical stack */
    .container__footer {
        gap: 1rem;
        padding: 1rem;
        height: auto;
    }

    .footer-link img {
        max-width: 100px;
        /* Smaller footer logos */
    }

    /* Layout: Reduce padding for maximum space */
    .layout {
        padding: 0.5rem;
        gap: 1rem;
    }
}