/* style.css */

/* ---------------------------------- */
/* BODY STYLES (Top-to-Bottom Flow) */
/* ---------------------------------- */
body {
    margin: 0; 
    
    font-family: "Hammersmith One", sans-serif;
    color: hsl(0, 0%, 90%); /* #CCCCCC */
    background-color: hsl(217, 82%, 4%); /* #020914 */
    font-size: 22px;
    line-height: 1.6;
}

html, body {
    overflow-x: hidden;
}

/* ---------------------------------- */
/* TOP BANNER STYLES (Updated for Full-Bleed Background and Content Centering) */
/* ---------------------------------- */
.top-banner{
    width: 100vw;
    padding: 0; /* Vertical padding moved to inner content */
    text-align: center;
    font-size: 28px;
    color: hsl(0, 0%, 90%); /* #FFFFFF */

    /* Container for the Full-Bleed Pseudo-Element */
    position: relative; 
    
    /* Flex container to center the constrained content wrapper */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75px; /* Ensure some minimum height since padding is dynamic */
    
    /* Background properties moved to ::before */
    background-color: transparent; 
    box-shadow: none; 
}

/* Pseudo-element for the full-width background and shadow */
.top-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Appearance */
    background-color: hsl(0, 0%, 1%); /* #030303 */
    box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.4); 
    z-index: -1;
}

/* Inner wrapper for constrained width and layout */
.banner-content-wrapper {
    /* Constraints */
    width: 80vw;
    max-width: 800px; 
    min-width: 300px;
    
    /* Internal Layout: Text hugs left, Button hugs right */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Vertical Spacing */
    padding: 10px 0; /* Restore vertical padding */
}

/* ---------------------------------- */
/* BASE STRUCTURAL STYLES (Shared by all content boxes) */
/* ---------------------------------- */
.content-box {
    /* Responsive Width Constraints (60vw, min-300px, max-800px) */
    width: 60vw;
    min-width: 300px; 
    max-width: 800px; 
    
    /* Centering and Spacing */
    margin: 0px auto; /* Centers horizontally and adds vertical space */
    padding: 20px; 
    
    /* Clean Aesthetic */
    border-radius: 12px;
    text-align: center; 
    position: relative; /* REQUIRED for the ::before pseudo-element positioning */
}

/* ---------------------------------- */
/* BUTTON BASE STYLES (New Default Button Class) */
/* ---------------------------------- */
.btn-base {
    /* Default Dimensions */
    width: 120px;
    height: 45px;
    
    /* Default Appearance */
    background-color: hsl(345, 70%, 45%);
    color: hsl(0, 0%, 100%); /* #FFFFFF */
    border: none;
    border-radius: 10px; /* Required radius */
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.15s ease;
}


.btn-base:hover { 	
background-color: hsl(345, 65%, 50%);    
transform: scale(1.05);
}

.btn-base:active { 	
background-color: hsl(0, 0%, 100%);    
transform: scale(0.95);
    transition: background-color 0.05s ease, transform 0.05s ease;

}

/* ---------------------------------- */
/* LIGHT THEME (White Background, Dark Text) */
/* ---------------------------------- */
.light-theme {
    /* Keeps the color/text rules */
    color: hsl(217, 82%, 4%); /* Target Dark Color for text and SVG: #020914 */

    /* === REVERTED STRUCTURE === */
    background-color: transparent; 
    box-shadow: none; 
    border: none; 
}

/* PSEUDO-ELEMENT FOR FULL-WIDTH BACKGROUND */
.light-theme::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    
    /* === FULL-BLEED HACK === */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; 

    /* === APPEARANCE === */
    background-color: hsl(0, 0%, 90%); /* The required full-width background color: #FFFFFF */
    box-shadow: 0 6px 15px hsla(0, 0%, 0%, 0.08); /* rgba(0, 0, 0, 0.08) */
    z-index: -1; 
    border-radius: 12px; 
}

/* ---------------------------------- */
/* DARK THEME (Dark Background, Light Text) */
/* ---------------------------------- */
.dark-theme {
    background-color: transparent; 
    color: hsl(0, 0%, 90%); /* #F0F0F0 */
    border: none; 
    box-shadow: none; 
}

/* ---------------------------------- */
/* CUSTOM HEADER STYLES (.header) */
/* ---------------------------------- */
.header{
    font-size: 36px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------------------------------- */
/* DECORATIVE DIVIDER STYLES (Targets the <div> wrapping the SVG) */
/* ---------------------------------- */
.header-divider {
    width: 30%; 
    max-width: 200px; 
    
    display: block;
    margin: 10px auto 25px auto; 
}

/* Style the SVG itself within the divider container */
.header-divider svg {
    width: 100%; 
    height: auto;
}

/* CRITICAL FIX: Explicitly set the SVG colors to match the theme */
.light-theme .header-divider svg * {
    stroke: hsl(217, 82%, 4%); /* #020914 */
    fill: hsl(217, 82%, 4%); /* #020914 */
}

.dark-theme .header-divider svg * {
    stroke: hsl(0, 0%, 90%); /* #F0F0F0 */
    fill: hsl(0, 0%, 90%); /* #F0F0F0 */
}



/* ===== MODAL (dark background) ===== */
.modal {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;

    background: rgba(0,0,0,0); /* start invisible */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;

    opacity: 0;                    /* start transparent */
    pointer-events: none;          /* prevent clicks before visible */
    transition: opacity 0.1s ease; /* fade in/out */
}

/* When modal is active */
.modal.show {
    opacity: 1;
    background: rgba(0,0,0,0.65);
    pointer-events: all;
}


/* ===== LOGIN BOX ANIMATION ===== */
.modal-content {
    background: hsl(0, 0%, 10%);
    padding: 30px;
    width: 90%;
    max-width: 400px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    text-align: center;
    color: white;

    /* Start off-screen (above top) */
    transform: translateY(-40px);
    opacity: 0;

    /* Smooth drop-down + fade */
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Active animation state */
.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}


/* Inputs */
.modal-content input {
    width: 90%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    font-size: 16px;
}

/* Close button */
.close-btn {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

input, textarea, select {
    font-family: "Hammersmith One", sans-serif;
}

/* Button layout with icon */
.btn-base {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* space between icon and text */
}


/* Icon inside button */
.btn-base .btn-icon {
    width: 28px;
    height: 28px;
    pointer-events: none; /* prevents click blocking */
}

/* ===== TOAST STYLING ===== */
.toast {
    position: fixed;
    left: 50%;
    top: 70vh; /* exactly 30% from bottom, always consistent */
    transform: translateX(-50%);

    background: hsl(0, 0%, 10%);
    color: white;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 18px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

/* Hide fully (display off) */
.toast.hidden {
    display: none;
}

.game-buttons {
    display: flex;
    justify-content: center;  /* center horizontally */
    flex-wrap: wrap;          /* wrap to next line on small screens */
    gap: 20px;                /* spacing between cards */
    margin-top: 20px;
}

.game-card {
    position: relative;
    width: 300px;             /* image width */
    height: 225px;            /* image height */
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.game-card:hover img {
    transform: scale(1.05); /* slight zoom on hover */
}

/* Title overlay */
.game-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-family: "Hammersmith One", sans-serif;
    font-size: 24px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card:hover .game-title {
    opacity: 1;
}