.App-background {                 /* Background styling for the app wrapper */
    background-color: #121212;  /* Dark background */
}

/* To prevent page content from being hidden behind header/footer */
body {
    background-color: #121212; /* Match app background */
    padding-top: 5px;            /* Small space under header */
    padding-bottom: 10px;        /* Small space above footer */
}

/**************************************************************************
* HEADER VIEW 
**************************************************************************/
/* HEADER BAR */
.header-bar {
    top: 0;                             /* Align to very top of page */
    left: 0;                            /* Align to left edge */
    width: 100%;                        /* Full screen width */
    min-height: 60px;                   /* Minimum height */
    height: auto;                       /* Allow it to expand with content */
    background-color: #121212;        /* Dark background */
    display: flex;                      /* Enable flexbox layout */
    align-items: center;                /* Vertically center children */
    justify-content: space-between;     /* Spread left/center/right sections */
    padding-top: 8px;                   /* Top padding */
    padding-bottom: 8px;                /* Bottom padding */
    box-sizing: border-box;             /* Include padding in total height */
    border-bottom: 1px solid #1f1f1f; /* Subtle bottom border */
    z-index: 1000;                      /* Keep header above page content */
}

/* LEFT SIDE */
.header-left {
    display: flex;                 /* Horizontal alignment of children */
    align-items: center;           /* Vertically center them */
    gap: 14px;                     /* Space between logo and title */
    cursor: pointer;               /* Makes entire left header clickable */
    padding-left: 16px;
}

.header-logo {
    height: 42px;                  /* Logo height */
    width: 42px;                   /* Logo width */
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.header-left:hover .header-logo {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(182, 115, 255, 0.35);
}

.header-title {
    font-size: 26px;               /* Header title font size */
    font-weight: 700;              /* Make it bold */
    letter-spacing: 0.4px;
    color: #b673ff;              /* softer than pure purple */
    line-height: 1;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.header-left:hover .header-title {
    color: #9b4dff;
    text-shadow: 0 0 10px rgba(182, 115, 255, 0.35);
}

.header-title::after {
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #b673ff, #9b4dff);
    margin-top: 4px;
    transition: width 0.25s ease;
}

.header-left:hover .header-title::after {
    width: 100%;
}

/* CENTER SEARCH BAR */
.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    min-width: 280px;
}

/* SEARCH INPUT + BUTTON ROW */
.search-row {
    display: flex;
    width: 100%;
    max-width: 650px;
    align-items: center;
}

.header-search-input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 30px;
    border: 1px solid #2b2b2b;
    background-color: #1d1d1d;
    color: white;
    font-size: 14px;
    outline: none;
    transition: border 0.2s, background-color 0.2s;
}

.header-search-input::placeholder {
    color: #888;
}

.header-search-input:focus {
    border-color: #9b4dff;
    background-color: #2b2b2b;
}

/* SEARCH BUTTON */
.header-search-button {
    width: 42px;
    height: 42px;
    margin-left: 8px;
    border-radius: 50%;
    border: 1px solid #2b2b2b;
    background-color: #1d1d1d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.header-search-button i {
    color: #9b4dff;
    font-size: 18px;
}

.header-search-button:hover {
    border-color: #9b4dff;
    background-color: #2b2b2b;
}

.header-search-button:hover i {
    color: #bb80ff;
}

/* FILTERS */
.search-filters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.search-filters select {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 120px;           /* uniform minimum width */
    height: 36px;               /* uniform height */
    border-radius: 6px;
    border: 1px solid #2b2b2b;
    background-color: #1d1d1d;
    color: white;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.2s;

    flex: 1 1 auto;             /* allow them to shrink/grow equally */
    max-width: 150px;        
}

.search-filters select:hover,
.search-filters select:focus {
    border-color: #9b4dff;
    background-color: #2b2b2b;
    color: #bb80ff;
}

/* RIGHT SIDE LOGIN/PROFILE BUTTON */
.header-right {
    display: flex;                 /* Align right-side buttons horizontally */
    align-items: center;
}

.profile-button {
    background-color: #1d1d1d;     /* Button background */
    border: 1px solid #2d2d2d;     /* Subtle border */
    color: #d0d0d0;                /* Light gray text */
    padding: 7px 16px;               /* Button padding */
    border-radius: 6px;              /* Rounded corners */
    font-size: 13px;                 /* Button text size */
    cursor: pointer;                 /* Clickable */
    transition: 0.2s;                /* Smooth hover */
    margin-right: 10px;              /* Spacing before edge */
}

.profile-button:hover {
    border-color: #9b4dff;         /* Purple border on hover */
    color: #bb80ff;                /* Purple text on hover */
}

/* Move logo + title + profile button slightly up */
.header-left,
.header-right {
    margin-top: -45px;   /* adjust this value to fine-tune alignment */
}

/* MOBILE / SMALL SCREENS */
@media (max-width: 768px) {

    /* Stack main sections vertically */
    .header-bar {
        flex-direction: column;
        align-items: center;
        padding: 16px 8px;
        gap: 16px;
    }

    /* Logo + Title */
    .header-left {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .header-logo {
        height: 60px;  /* bigger logo */
        width: 60px;
    }

    .header-title {
        font-size: 36px;  /* bigger title */
        font-weight: 700;
        letter-spacing: 0.6px;
    }

    /* Search row */
    .header-center .search-row {
        width: 100%;
        max-width: 500px;
        gap: 12px;
    }

    .header-search-input {
        flex: 1;
        min-width: 0;
        font-size: 16px;        /* bigger text */
        padding: 14px 18px;     /* more padding */
        border-radius: 35px;    /* slightly bigger rounding */
    }

    .header-search-button {
        width: 50px;  /* bigger button */
        height: 50px;
        border-radius: 50%;
    }

    .header-search-button i {
        font-size: 20px;  /* bigger icon */
    }

    /* Filters layout */
    .search-filters {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        gap: 12px;
        width: 100%;
        max-width: 500px;
        margin-top: 12px;
    }

    .search-filters select {
        width: 100%;
        font-size: 14px;    /* bigger text */
        padding: 10px 14px; /* more padding */
        text-align: center;
        border-radius: 8px;
    }

    /* Profile button below filters */
    .header-right {
        width: 100%;
        max-width: 500px;
    }

    .profile-button {
        width: 100%;
        font-size: 16px;    /* bigger text */
        padding: 12px 16px; /* bigger padding */
        margin-top: 10px;
        border-radius: 8px; /* slightly more rounded */
    }

    .header-left,
    .header-right {
        margin-top: 0;      /* adjust this value to fine-tune alignment */
    }
}

/************************************************************************** 
* FOOTER VIEW 
**************************************************************************/
/* FOOTER BAR */
.footer-bar {
    bottom: 0;                         /* Align to bottom of page */
    left: 0;                           /* Align to left edge */
    width: 100%;                       /* Full width */
    min-height: 80px;                  /* Footer height */
    background-color: #121212;       /* Dark background */
    display: flex;                     /* Enable flexbox */
    flex-direction: column;            /* Stack logo above text */
    align-items: center;               /* Center horizontally */
    justify-content: center;           /* Center vertically */
    border-top: 1px solid #1f1f1f;   /* Subtle top border */
    padding: 10px 0;                   /* Vertical padding */
    box-sizing: border-box;            /* Include padding in height */
    text-align: center;                /* Center footer text */
    z-index: 1000;                     /* Keep above content */
    transition: background-color 0.25s ease;
}

.footer-logo {
    cursor: pointer;               /* Logo is clickable */
    margin-bottom: 6px;            /* Small spacing under logo */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-logo-img {
    height: 42px;                  /* Size of logo image */
    width: 42px;
    border-radius: 10px; 
    display: block;                /* Prevent inline spacing issues */
}

.footer-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(182, 115, 255, 0.35); /* subtle glow like header */
}

/* TEXT */
.footer-text {
    display: flex;                 /* Vertical stack of texts */
    flex-direction: column;
    align-items: center;
    gap: 2px;                        /* No extra spacing */
    line-height: 1.2;
}

.footer-text span {
    font-size: 12px;
    color: white;
}

.footer-text p {
    margin: 0;                     /* Remove default spacing */
    padding: 0;
    font-size: 14px;               /* Text size */
    font-weight: 600;              /* Bold */
    color: #b673ff;              /* Purple highlight */
    letter-spacing: 0.3px;         /* Compact line spacing */
}

/* Hover effects on text */
.footer-bar:hover .footer-text p {
    color: #bb80ff;
    text-shadow: 0 0 8px rgba(182, 115, 255, 0.3);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

/************************************************************************** 
* MAIN PAGE VIEW 
**************************************************************************/
.main-page {
    display: flex;                 /* Main layout uses flexbox */
    flex-direction: column;        /* Stack rows vertically */
    gap: 40px;                     /* Space between sections */
    padding: 20px 20px 40px 20px;  /* Page padding */
}

/* WELCOME BANNER */
.welcome-banner {
    margin: 24px auto 20px;              /* Reduced outer empty space */
    padding: 40px 44px;                  /* Bigger inner presence */
    max-width: 1100px;                   /* Wider */
    background: linear-gradient(145deg, #1b1b22, #16161c);
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(182,115,255,0.18);
}

/* TITLE */
.welcome-title {
    margin: 0;
    font-size: 36px;                     /* Bigger */
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #b673ff;
    text-shadow: 0 0 14px rgba(182,115,255,0.45);
}

/* TEXT */
.welcome-text {
    margin-top: 16px;
    font-size: 18px;                     
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* CONTAINER FOR FIXED TOP-RIGHT BUTTONS */
.top-buttons {
    position: fixed;       /* Fix container to viewport */
    top: 200px;            /* Adjust starting point */
    right: 0;              /* Stick to right edge */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    z-index: 2000;
}

/* TOP BUTTON: Sidebar */
.sidebar-button {
    background-color: #1d1d1d; 
    border: 1px solid #2d2d2d; 
    color: #d0d0d0; 
    padding: 10px 16px; 
    border-radius: 8px 0 0 0;  /* Round top-left corner */
    font-size: 13px; 
    cursor: pointer; 
    transition: 0.2s; 
    border-bottom: 1px solid #2d2d2d;        
}

/* BOTTOM BUTTON: Leaderboard */
.leaderboard-button {
    background-color: #1d1d1d; 
    border: 1px solid #2d2d2d; 
    color: #d0d0d0; 
    padding: 10px 16px; 
    border-radius: 0 0 0 8px;  /* Round bottom-left corner */
    font-size: 13px; 
    cursor: pointer; 
    transition: 0.2s; 
    border-top: 1px solid #2d2d2d;  /* connect seamlessly with top button */
}

/* Hover effect for both buttons */
.sidebar-button:hover,
.leaderboard-button:hover {
    border-color: #9b4dff; 
    color: #bb80ff; 
    background-color: #2a2a2a; 
}

/* TOOLTIP BASE */
.tooltip {
    position: relative;
}

/* TOOLTIP TEXT */
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(28, 28, 34, 0.95);
    color: #eae6ff;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2000;
}

/* TOOLTIP ARROW */
.tooltip::before {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(28,28,34,0.95) transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* SHOW ON HOVER */
.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* LEFT-ALIGNED TOOLTIP (for right-edge buttons) */
.tooltip-left::after {
    left: auto;
    right: 0;
    transform: translateY(8px);
}

.tooltip-left::before {
    left: auto;
    right: 16px;
    transform: translateY(8px);
}

/* SHOW ON HOVER */
.tooltip-left:hover::after,
.tooltip-left:hover::before {
    transform: translateY(0);
}

/* Row container */
.row-container {
    display: flex;                 /* Stack title + scroll area */
    flex-direction: column;
    padding: 20px 0 15px 0;        /* Top/bottom spacing */
    position: relative;            
    overflow: visible;             /* Prevent clipping */
    z-index: 1;                    /* Ensure visibility */
}

/* Title */
.row-title {
    font-size: 34px;               /* Section title size */
    font-weight: 600;              /* Bold */
    color: #b673ff;              /* Purple highlight */
    margin-bottom: 12px;           /* Spacing under title */
    margin-top: 0;                 /* Remove default margin */
    z-index: 0;                    /* Behind hovered cards */
    position: relative;            /* Needed for layering */
}

/* Horizontal scroll */
.row-scroll {
    display: flex;                 /* Horizontal container */
    overflow-x: auto;              /* Allow horizontal scrolling */
    gap: 16px;                     /* Space between cards */
    padding-left: 10px;            /* Side padding */
    padding-right: 10px;
    padding-top: 10px;             /* Top padding */
    padding-bottom: 20px;          /* Space under cards */
    scroll-behavior: smooth;       /* Smooth scrolling */
    scrollbar-width: none;         /* Hide scrollbar */
}


/* STREAMING-APP POSTER CARD */
.row-item {
    width: 250px;                  /* Card width */
    flex: 0 0 auto;                /* Prevent stretching */
    cursor: pointer;               /* Clickable cards */
    border-radius: 10px;           /* Rounded corners */
    background-color: #1d1d1d;   /* Card background */
    padding: 8px;                  /* Inner padding */
    margin-top: 10px;              /* Space above card */
    box-sizing: border-box;        /* Include padding in size */
    display: flex;                 /* Layout card vertically */
    flex-direction: column;
    align-items: center;           /* Center content */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* Hover animation */
    overflow: visible;             /* Prevent clipping during hover */
}

.row-item:hover {
    transform: scale(1.05);          /* Enlarge card on hover */
    box-shadow: 0 0 15px #9b4dff;  /* Purple glow */
    z-index: 10;                     /* Bring forward to avoid clipping */
}

.row-item-img {
    width: 100%;                   /* Image spans full width */
    aspect-ratio: 2/3;             /* Classic poster ratio */
    max-height: 300px;             /* Height limit */
    object-fit: cover;             /* Crop image nicely */
    border-radius: 8px;            /* Slight rounding */
    margin-bottom: 8px;            /* Space under image */
}

.row-item-title {
    color: white;                /* Card title color */
    font-size: 18px;               /* Text size */
    line-height: 1.2em;            /* Slight spacing */
    text-align: center;            /* Center the title */
    display: -webkit-box;          /* Enable line-clamping */
    -webkit-box-orient: vertical;
    overflow: hidden;              /* Hide overflowing text */
    text-overflow: ellipsis;       /* Add "..." truncation */
    margin-bottom: 2px;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, auto)); /* fixed card width */
  justify-content: center;       /* center the cards horizontally */
  gap: 16px 24px;               /* vertical + horizontal spacing */
  padding: 10px 0;              /* vertical padding */
}

.row-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;

    font-size: 0.75rem;                 /* smaller than title */
    letter-spacing: 0.02em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Base pill (shared by type, year, rating) */
.meta-pill {
    padding: 2px 6px;
    border-radius: 4px;

    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;

    display: inline-flex;
    align-items: center;

    background-color: rgba(182, 115, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
}

/* Hover polish */
.row-item:hover .meta-pill{
    background-color: rgba(182, 115, 255, 0.3);
}

/************************************************************************** 
* ANIME DETAILS VIEW POPUP 
**************************************************************************/
/* MODAL OVERLAY + BLUR */
.modal-overlay {
    position: fixed;               /* Keep overlay in place relative to viewport */
    top: 0;                        /* Start at the very top */
    left: 0;                       /* Start at the very left */
    width: 100vw;                   /* Full viewport width */
    height: 100vh;                  /* Full viewport height */
    background-color: rgba(0,0,0,0.6); /* Semi-transparent black overlay */
    backdrop-filter: blur(8px);    /* Blur background content behind modal */
    display: flex;                  /* Use flexbox for centering content */
    justify-content: center;        /* Center horizontally */
    align-items: center;            /* Center vertically */
    z-index: 5000;                  /* Ensure overlay is above all other content */
    animation: fadeInOverlay 0.25s ease forwards;
}

@keyframes fadeInOverlay {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* MODAL CARD (FULL-WIDTH) */
.modal-card {
    background-color: #1c1c1c;     /* Dark background for the modal card */
    color: white;                   /* Default text color inside modal */
    width: 85vw;                    /* Make modal occupy 85% of viewport width */
    max-width: 900px;               /* Limit maximum width */
    padding: 36px;                  /* Inner spacing inside modal */
    border-radius: 20px;            /* Rounded corners */
    position: relative;             /* Needed for absolute positioning of close button */
    box-shadow: 0 0 35px rgba(182, 115, 255, 0.3);  /* Subtle purple glow */
    transform: translateY(-20px);
    opacity: 0;
    animation: slideInCard 0.3s ease forwards;
}

@keyframes slideInCard {
    to {transform: translateY(0); opacity: 1;}
}

/* TITLE */
.modal-title {
    margin: 0;                      /* Remove default margins */
    font-size: 38px;                 
    font-weight: 700;
    color: #b673ff;                 /* Purple accent color */
    letter-spacing: 0.8px;
    text-align: center;
    text-shadow: 0 0 8px rgba(182,115,255,0.35); /* Glow effect */
    position: relative;            
    display: inline-block;
}

.modal-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;                   /* Slightly below the text */
    width: 0%;
    height: 3px;
    background-color: #9b4dff;      /* Slightly lighter purple */
    border-radius: 2px;
    transition: width 0.25s ease;
}

/* Hover effect */
.modal-title:hover::after {
    width: 100%;                    /* Full underline on hover */
}

/* Make the link inside modal-title look like plain text */
.modal-title a {
    color: inherit;                 /* Inherit the purple color */
    text-decoration: none;          /* Remove underline */
    transition: color 0.25s ease;
}

/* Hover effect */
.modal-title a:hover {
    color: #9b4dff;                 
    text-shadow: 0 0 10px rgba(182,115,255,0.4);
}

/* CLOSE BUTTON */
.modal-close-button {
    position: absolute;             /* Position relative to modal-card */
    top: 20px;                      /* 20px from top of modal */
    right: 20px;                    /* 20px from right of modal */
    background: #2b2b2b;               /* Dark gray background */
    color: #d2d2d2;                 /* Light gray text color */
    border: none;                   /* Remove default button border */
    font-size: 15px;                /* Font size of X button */
    padding: 6px 14px;              /* Inner spacing inside button */
    border-radius: 24px;            /* Rounded pill-like button */
    cursor: pointer;                /* Pointer cursor on hover */
    transition: all 0.2s;               /* Smooth transition for hover effects */
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.modal-close-button:hover {
    background-color: #333;         /* Slightly lighter background on hover */
    color: #bb80ff;                    /* Purple text on hover */
    transform: scale(1.05);
}

/* GRID LAYOUT (3 COLUMNS) */
.details-grid {
    display: grid;                  
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;                      /* Space between columns */
    margin-top: 30px;               /* Space above the grid */
}

.details-column {
    display: flex;                  /* Use flexbox inside each column */
    flex-direction: column;         /* Stack items vertically */
    padding-right: 16px;
}

.details-column:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.details-heading {
    font-size: 20px;                /* Heading font size */
    font-weight: 600;               /* Semi-bold font */
    color: #b673ff;                 /* Purple accent */
    margin-bottom: 12px;             /* Space below heading */
    border-bottom: 1px solid #444;  /* Underline with subtle line */
    padding-bottom: 6px;            /* Padding for underline spacing */
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* RADIO OPTION */
.radio-option {
    display: flex;
    align-items: center;
    background: #2a2a3d;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.radio-option:hover {
    background: #3a2a5c;
}
.radio-option input[type="radio"] {
    display: none;
}
.radio-label {
    color: #fff;
    font-weight: 500;
}
.radio-option.selected {
    background: #6c4cff;
    box-shadow: 0 0 12px rgba(108, 76, 255, 0.5);
}
.radio-option.selected .radio-label {
    color: #fff;
    font-weight: 700;
}

/* PLAY BUTTON */
.play-button-container {
    display: flex;                  /* Flex container for centering */
    justify-content: center;        /* Center button horizontally */
    margin-top: 40px;               /* Space above button */
}

.play-button {
    background-color: #424242;        /* Dark gray button background */
    color: #cfcfcf;                   /* Light gray text */ 
        border: none;                   /* Remove default border */
        padding: 14px 50px;             /* Vertical + horizontal padding */
        border-radius: 28px;            /* Rounded pill-style button */
        cursor: pointer;                /* Pointer cursor on hover */
    font-weight: 600;
    transition: all 0.25s;
    box-shadow: 0 0 12px rgba(182,115,255,0.3);
}

.play-button:hover {
    background-color: #333;      /* Lighter gray on hover */
    color: #bb80ff;              /* Purple text on hover */
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(182,115,255,0.45);
}

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

    .details-heading {
        font-size: 16px;
    }
}

/**************************************************************************
* SIDEBAR VIEW POPUP
**************************************************************************/
/* SIDEBAR OVERLAY */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: flex-end;
    z-index: 5000;
    animation: fadeIn 0.2s ease-out;
    overflow: hidden; /* no scrolling anywhere */
}

/* Overlay fade-in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* SIDEBAR PANEL */
.sidebar-panel {
    width: 350px;
    max-width: 90%;
    height: 100%;
    background-color: #1c1c1e;               /* Dark modal background */
    color: #eee;                             /* Default text color */
    padding: 32px 28px 16px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #2b2b2f;
    box-shadow: -8px 0 25px rgba(0,0,0,0.45);
    border-radius: 0 18px 18px 0;
    transform: translateX(100%);
    animation: slideIn 0.3s forwards ease-out;
    overflow: hidden;
    box-sizing: border-box; /* include padding in width */
}

/* SLIDE-IN ANIMATION */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* CLOSE BUTTON */
.sidebar-close-button {
    position: absolute;
    top: 5px;
    right: 22px;
    background: #29292d;
    color: #dcdcdc;
    border: none;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.sidebar-close-button:hover {
    background-color: #3a3a3e;
    color: #bb80ff;  /* Purple hover accent */
}

/* TITLE */
.sidebar-title {
    margin-top: 1.75rem;
    font-weight: 700;
    color: #b673ff;
    letter-spacing: 0.8px;
    margin-top: 10px;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 8px rgba(182,115,255,0.35);
    cursor: default;
}

.sidebar-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 3px;
    background-color: #9b4dff;
    border-radius: 2px;
    transition: width 0.25s ease;
}

.sidebar-title:hover::after {
    width: 100%;
}

/* QUIZ LIST */
.sidebar-list {
    display: flex;
    flex-direction: column;
    padding-top: 8px; /* give space for hover lift */
    gap: 16px;
    margin-bottom: 0;
    overflow: hidden;
    flex: 1;
}

.sidebar-empty {
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f2c94c;           /* Bright gold/yellow to stand out */
    background-color: rgba(255, 255, 255, 0.05); /* subtle highlight */
    padding: 12px 14px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* QUIZ CARD FLIP */
/* PARENT CONTAINER */
.quiz-item {
    perspective: 1000px;
    min-height: 80px;       /* front/back same height */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* FRONT AND BACK SIDES */
.quiz-front,
.quiz-back {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    padding: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backface-visibility: hidden;
    cursor: pointer;
}

/* FRONT SIDE */
.quiz-front {
    background: linear-gradient(145deg, #2c2c34, #1b1b23);
    color: #e0dfff;
    font-weight: 600;
}

/* Front hover lift */
.quiz-front:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.55);
}

.quiz-front-content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.quiz-front-content p {
    font-size: 0.95rem;
    line-height: 1.3rem;
}

/* BACK SIDE */
.quiz-back {
    background: linear-gradient(135deg, #1c1c22, #2f2b38);
    color: #f2f2f2;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backface-visibility: hidden;
}

/* Back hover lift */
.quiz-back:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.quiz-back-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* BACK CONTENT DETAILS */
.quiz-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.2rem;
}

.quiz-info p {
    margin: 2px 0;
}

.quiz-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.quiz-date {
    font-size: 0.7rem;
    color: #b1a8ff;
}

/* RANDOM NEKO CONTAINER */
.neko-random {
    display: flex;
    justify-content: center;
    margin: 2px 0 20px; /* slightly more bottom spacing */
    position: relative;
    perspective: 1500px; /* stronger 3D depth */
}

/* IMAGE FRAME */
.neko-frame {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(145deg, #2c2c34, #1b1b23);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 18px rgba(182,115,255,0.25);
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
    cursor: pointer;
    animation: nekoPulse 3s ease-in-out infinite;
}

/* HOVER DYNAMICS */
.neko-frame:hover {
    transform: rotateY(10deg) rotateX(5deg) scale(1.1);
    box-shadow: 0 12px 35px rgba(0,0,0,0.75), 0 0 25px rgba(182,115,255,0.6), 0 0 60px rgba(182,115,255,0.15) inset;
}

/* NEKO IMAGE */
.neko-random-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    backface-visibility: hidden;
    transition: transform 0.5s ease;
}

/* GLIMMER HALOS */
.neko-frame::before,
.neko-frame::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    border-radius: 22px;
    pointer-events: none;
    z-index: 0;
    border: 2px solid transparent;
    background: radial-gradient(circle at center, rgba(182,115,255,0.15), transparent 70%);
    filter: blur(14px);
    opacity: 0.7;
}

.neko-frame::after {
    background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.08), transparent 70%);
    filter: blur(8px);
    transform: rotate(15deg);
}

/* PULSE ANIMATION */
@keyframes nekoPulse {
    0%, 100% { transform: scale(1) rotateY(0deg) rotateX(0deg); }
    50% { transform: scale(1.02) rotateY(2deg) rotateX(1deg); }
}

/**************************************************************************
* LEADERBOARD VIEW POPUP
**************************************************************************/
/* LEADERBOARD CARD SPECIFIC */
.leaderboard-card {
    display: flex;
    flex-direction: column;
    gap: 16px;            
    max-height: 70vh;         /* limit total modal height */
    overflow: visible; 
}

/* TABLE CONTAINER */
.leaderboard-table-container {
    overflow-x: auto;
    border-radius: 12px;
    max-height: 50vh;         /* shrink table height */

    /* Hide scrollbar for all browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.leaderboard-table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* LEADERBOARD TABLE */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse; /* Remove double borders */
    background-color: #2a2a2a; /* Slightly lighter than modal background */
    border-radius: 12px;
    overflow: hidden; /* Clip rounded corners */
    box-shadow: 0 0 10px rgba(0,0,0,0.4); /* Subtle table shadow */
    font-size: 13px;          /* smaller font to reduce size */
}

/* TABLE HEAD */
.leaderboard-table th {
    background-color: #3b3b3b; /* Darker header */
    color: #b673ff; /* Purple accent */
    font-weight: 700;
    font-size: 14px;
    padding: 8px 12px;
    text-align: left;
}

/* TABLE ROWS */
.leaderboard-table td {
    padding: 6px 12px;
    font-size: 13px;
    color: #ddd;
    border-bottom: 1px solid #444;
}

/* HOVER EFFECT ON ROWS */
.leaderboard-table tbody tr:hover {
    background-color: #3a1dff1a; /* Soft purple hover */
}

/* STRIPED EFFECT */
.leaderboard-table tbody tr:nth-child(even) {
    background-color: #222;
}

/* USERS STANDING SECTION */
.your-standing-container {
    background-color: #2c2c2c;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.your-standing-container h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #b673ff;
    font-size: 20px;
}

.your-standing-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.your-standing-label {
    font-weight: 600;
    color: #ccc;
}

.your-standing-value {
    color: #fff;
}

/**************************************************************************
* GAME VIEW 
**************************************************************************/
.game-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    background-color: #121212;
    color: white;
    min-height: 100vh;
    position: relative;
}

/* TOP BAR */
.top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #1f1f1f;
    background-color: #121212;
    position: relative;
    top: 0;
    z-index: 1000;
}

/* LOGO + TITLE CONTAINER */
.logo-title {
    display: flex;
    align-items: center;
    gap: 14px;                 /* Same spacing as header */
    cursor: pointer;           /* Makes entire area clickable */
}

/* LOGO */
.logo {
    width: 42px;               /* Same as header */
    height: 42px;
    border-radius: 10px;       /* Rounded corners like header */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.logo-title:hover .logo {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(182, 115, 255, 0.35); /* Purple glow */
}

/* TITLE */
.title {
    font-size: 26px;           /* Match header size */
    font-weight: 700;          /* Bold */
    letter-spacing: 0.4px;     /* Same as header */
    color: #b673ff;          /* Purple accent color */
    line-height: 1;
    position: relative;
    display: inline-block;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.logo-title:hover .title {
    color: #9b4dff;            /* Hover color */
    text-shadow: 0 0 10px rgba(182, 115, 255, 0.35); /* Glow on hover */
}

/* UNDERLINE ANIMATION */
.title::after {
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #b673ff, #9b4dff);
    margin-top: 4px;
    transition: width 0.25s ease;
}

.logo-title:hover .title::after {
    width: 100%;               /* Animate full underline on hover */
}

/* SCORE & TIMER */
.score-area, .versus-score {
    font-family: "Arial", sans-serif;
    display: flex;
    gap: 20px;
}

.solo-score, .player-box {
    padding: 10px 18px;
    border-radius: 12px;
    text-align: center;
    min-width: 90px;
    background-color: #1d1d1d;
    color: white;
    box-shadow: 0 0 8px #00000080;
    transition: all 0.3s;
    font-weight: 600;
}

.solo-score.active,
.player-box.active {
    box-shadow: 0 0 15px #9b4dff;
    background-color: #2b2b2b;
    transform: scale(1.05);
}

.player-box.inactive {
    opacity: 0.5;
    background-color: #1d1d1d;
}

.left-info {
    font-family: "Arial", sans-serif;
    position: absolute;
    left: 20px;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-number {
    font-size: 30px;
    font-weight: 600;
    color: #bb80ff;
}

.timer-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.timer-text.flash-red {
    animation: flashTimer 0.6s infinite;
}

@keyframes flashTimer {
    0% { color: #bb80ff; }
    50% { color: #ff3b3b; }
    100% { color: #bb80ff; }
}

.timer-text {
    font-size: 22px;
    color: #bb80ff;
    font-weight: bold;
    text-shadow: 0 0 8px #9b4dff66;
    transition: color 0.3s;
}

/* CENTER INFO */
.center-info {
    font-family: "Arial", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.question-img {
    width: 200px;
    max-width: 75vw;
    height: 270px;
    object-fit: cover;
    border-radius: 16px;
    margin: 15px 0;
    box-shadow: 0 0 20px #9b4dff66;
}

.question-prompt {
    margin: 20px 0 25px;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
    color: #d0d0d0;
}

/* ANSWERS GRID */
.answers-grid {
    font-family: "Arial", sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 60%;
    max-width: 700px;
    justify-items: stretch;
}

.answer-btn {
    width: 100%;
    min-height: 72px;
    padding: 16px 12px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s;
    background-color: #1d1d1d;
    color: white;
    border: 2px solid #2b2b2b;
    box-shadow: 0 0 8px #00000080;
}

.answer-btn:hover {
    background-color: #2b2b2b;
    border-color: #9b4dff;
    transform: scale(1.03);
}

/* FLASH ANIMATIONS FOR ANSWERS */
.answer-btn.flash-green { animation: flashCorrect 0.4s forwards; }
.answer-btn.flash-red   { animation: flashWrong 0.4s forwards; }

@keyframes flashCorrect {
    0% { background-color: #14d914; border-color: #14d914; color: white; }
    100% { background-color: #1d1d1d; border-color: #2b2b2b; color: white; }
}

@keyframes flashWrong {
    0% { background-color: #ff3b3b; border-color: #ff3b3b; color: white; }
    100% { background-color: #1d1d1d; border-color: #2b2b2b; color: white; }
}

.cancel-btn {
  font-family: "Arial", sans-serif;
  position: fixed;
  bottom: 24px;
  right: 24px;

  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;

  background-color: transparent;
  color: #bbb;
  border: 2px solid #555;
  border-radius: 10px;

  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background-color: #ff4d4d;
  color: white;
  border-color: #ff4d4d;
}

/* Move left-info content below top-bar on mobile */
@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .score-area {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
  }

  /* Move question number & timer below top-bar */
  .left-info {
    position: static;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin: 10px 0;
    gap: 10px;
  }

  .question-number {
    font-size: 20px;
  }

  .timer-wrapper {
    width: 80px !important;
    height: 80px !important;
  }

  .timer-wrapper svg {
    width: 80px !important;
    height: 80px !important;
  }

  .timer-text {
    font-size: 14px !important;
  }

  .timer-text {
    font-size: 16px;
  }

  /* Center image & prompt */
  .center-info {
    margin: 10px 0;
  }

  .question-img {
    width: 60vw;
    height: auto;
  }

  .question-prompt {
    font-size: 18px;
    margin: 12px 0 16px;
  }

  /* Stack answers vertically */
  .answers-grid {
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 12px;
  }

  .answer-btn {
    min-height: 60px;
    font-size: 16px;
  }

  /* Move cancel button slightly up for mobile */
  .cancel-btn {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

/**************************************************************************
* GAME SCORE VIEW
**************************************************************************/
.score-screen {
  position: fixed;       /* stays in place, covers everything */
  top: 0;
  left: 0;
  width: 100vw;          /* full viewport width */
  height: 100vh;         /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at top, #1a1a2e, #0f0f1a);
  color: white;
  z-index: 9999;         /* make sure it overlays everything else */
  overflow: hidden;      /* prevent scrollbars */
}

.app-title {
  font-size: 48px;
  margin-bottom: 24px;
  color: #bb80ff;
  text-shadow: 0 0 12px #9b4dff99;
}

.score-box {
  background: linear-gradient(145deg, #1e1e1e, #161616);
  padding: 36px 52px;
  border-radius: 22px;
  box-shadow:
    0 0 30px #000000cc,
    inset 0 0 20px #9b4dff22;
  text-align: center;
  min-width: 380px;
  border: 1px solid #2b2b2b;
}

.score-title {
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9b4dff;
  margin-bottom: 12px;
  opacity: 0.9;
}

.score-main {
  font-size: 52px;
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    0 0 12px #9b4dff88,
    0 0 24px #9b4dff44;
  margin: 16px 0;
}

.score-players {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 18px;
  color: #ddd;
}

.score-player {
  flex: 1;
}

.score-player span {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #9b4dff;
}

.score-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #9b4dff66, transparent);
  margin: 20px 0;
}

.score-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 28px;
}

/* SHARED BASE STYLE */
.play-again-btn,
.return-btn {
  margin-top: 18px;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}

/* PLAY AGAIN = primary */
.play-again-btn {
  background: #9b4dff;
  color: black;
  box-shadow: 0 0 14px #9b4dff88;
}

.play-again-btn:hover {
  background: #b77dff;
  box-shadow: 0 0 22px #9b4dffaa;
  transform: scale(1.07);
}

/* RETURN = secondary */
.return-btn {
  background: transparent;
  color: #9b4dff;
  border: 1px solid #9b4dff66;
}

.return-btn:hover {
  background: #9b4dff22;
  box-shadow: 0 0 12px #9b4dff66;
  transform: scale(1.05);
}

@media (max-width: 480px) {
  .score-box {
    padding: 24px 20px;
    min-width: 90%;
    border-radius: 16px;
  }

  .app-title {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .score-main {
    font-size: 36px;
    margin: 12px 0;
  }

  .score-players {
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }

  .score-player span {
    font-size: 20px;
  }

  .score-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }

  .play-again-btn,
  .return-btn {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
  }
}