/*
 * ARCADEVIBECODE
 * STAGE 2 — ICE BLUE HOMEPAGE
 *
 * Homepage appearance only.
 * No changes to JavaScript or Supabase.
 * Requires Stage 1 styles.css.
 */

/* =====================================
   HOMEPAGE FOUNDATION
===================================== */

#arcade-tab {
    background: #F2F9FF;
    color: #071B34;
    min-height: 100vh;
    padding-bottom: 60px;
}

#arcade-tab h2,
#arcade-tab h3,
#arcade-tab h4 {
    color: #071B34;
    letter-spacing: -0.025em;
}

#arcade-tab section {
    position: relative;
}

#arcade-tab section > div > div h3 {
    line-height: 1.3;
}

/* =====================================
   HOMEPAGE HERO
===================================== */

#arcade-tab .hero-bg {
    min-height: 470px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: #071B34;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 27, 52, 0.92),
            rgba(7, 27, 52, 0.76)
        ),
        url(
            '../images/arcade-hero.jpg'
        );

    background-position: center;
    background-size: cover;

    border-bottom: 4px solid #1598E6;
}

/* Hero headline */

#arcade-tab .hero-bg h2 {
    color: #FFFFFF;

    font-size: clamp(2.5rem, 5.5vw, 5rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;

    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

    text-shadow: none;
}

/* Ice Blue headline accents */

#arcade-tab .hero-bg h2 span {
    color: #A8DFFF !important;
    text-shadow: none !important;
    filter: none;
}

/* Hero description */

#arcade-tab .hero-bg > p {
    color: #E0EDFA !important;

    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.65;
    max-width: 640px;
}

/* Hero Explore Games button */

#arcade-tab .hero-bg button {
    background: #1467B3 !important;
    color: #FFFFFF !important;

    border: 1px solid #3587CF;
    border-radius: 9px;

    padding: 14px 30px;
    font-weight: 800;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

#arcade-tab .hero-bg button:hover {
    background: #0D548F !important;
    transform: translateY(-2px);
}

/* =====================================
   HOMEPAGE SECTIONS
===================================== */

#arcade-tab section:not(.hero-bg) {
    color: #071B34;
}

#arcade-tab section:not(.hero-bg) h3 {
    color: #071B34;
    font-weight: 800;
}

#arcade-tab section:not(.hero-bg)
> div p.text-gray-400 {
    color: #526E89 !important;
}

/* Section backgrounds */

#fresh-arcade-section,
#recently-updated-section,
#hidden-gems-section {
    background: transparent;
}

/* =====================================
   GAME GRIDS
===================================== */

#game-grid,
#fresh-arcade-grid,
#recently-updated-grid,
#hidden-gems-grid {
    align-items: stretch;
}

/* =====================================
   GAME CARDS
===================================== */

#arcade-tab
[class*="bg-white/5"][class*="rounded-xl"][class*="border"],
#arcade-tab
[class*="bg-black/50"][class*="rounded-xl"][class*="border"] {
    background: #FFFFFF !important;

    border: 1px solid #D8E7F3 !important;
    border-radius: 13px !important;

    box-shadow: 0 2px 12px rgba(7, 27, 52, 0.045);

    overflow: hidden;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}

#arcade-tab
[class*="bg-white/5"][class*="rounded-xl"][class*="border"]:hover,
#arcade-tab
[class*="bg-black/50"][class*="rounded-xl"][class*="border"]:hover {
    border-color: #A8DFFF !important;

    box-shadow: 0 8px 25px rgba(7, 27, 52, 0.10);

    transform: translateY(-3px);
}

/* =====================================
   GAME CARD TITLES
===================================== */

#game-grid h4,
#fresh-arcade-grid h4,
#recently-updated-grid h4,
#hidden-gems-grid h4 {
    color: #071B34 !important;

    font-weight: 800;
    letter-spacing: -0.02em;
}

/* =====================================
   GAME ARTWORK
===================================== */

#game-grid img,
#fresh-arcade-grid img,
#recently-updated-grid img,
#hidden-gems-grid img {
    object-fit: cover;
    max-width: 100%;
}

#game-grid > div > img,
#fresh-arcade-grid > div > img,
#hidden-gems-grid > article > img {
    display: block;
    width: 100%;
}

/* =====================================
   CARD DESCRIPTIONS
===================================== */

#game-grid .text-gray-400,
#fresh-arcade-grid .text-gray-400,
#recently-updated-grid .text-gray-400,
#hidden-gems-grid .text-gray-400 {
    color: #6689A8 !important;
}

/* =====================================
   STUDIO LINKS
===================================== */

#game-grid .text-neoncyan,
#fresh-arcade-grid .text-neoncyan,
#recently-updated-grid .text-neoncyan,
#hidden-gems-grid .text-neoncyan {
    color: #1467B3 !important;
}

/* =====================================
   GENRE LABELS
===================================== */

#game-grid .text-neonorange,
#fresh-arcade-grid .text-neonorange,
#recently-updated-grid .text-neonorange,
#hidden-gems-grid .text-neonorange {
    color: #1467B3 !important;
}

/* =====================================
   PLAY GAME BUTTONS
===================================== */

#game-grid button[class*="bg-neonorange"],
#fresh-arcade-grid button[class*="bg-neonorange"],
#recently-updated-grid button[class*="bg-neonorange"],
#hidden-gems-grid button[class*="bg-neonorange"] {
    background: #1467B3 !important;
    color: #FFFFFF !important;

    border: 1px solid #1467B3;
    border-radius: 8px;

    box-shadow: none !important;

    font-size: 14px;
    font-weight: 800;
    padding: 11px 16px;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

#game-grid button[class*="bg-neonorange"]:hover,
#fresh-arcade-grid button[class*="bg-neonorange"]:hover,
#recently-updated-grid button[class*="bg-neonorange"]:hover,
#hidden-gems-grid button[class*="bg-neonorange"]:hover {
    background: #0D548F !important;
    transform: translateY(-1px);
}

/* =====================================
   SECTION BADGES
===================================== */

#fresh-arcade-section span[class*="rounded-full"],
#recently-updated-section span[class*="rounded-full"],
#hidden-gems-section span[class*="rounded-full"] {
    color: #1467B3 !important;

    background: #E1F2FF !important;

    border: 1px solid #C4E4FA !important;

    box-shadow: none !important;
}

/* =====================================
   RECENTLY UPDATED
===================================== */

#recently-updated-grid .text-neoncyan,
#recently-updated-grid .text-neonorange {
    color: #1467B3 !important;
}

/* =====================================
   HIDDEN GEMS
===================================== */

#hidden-gems-grid button:disabled {
    opacity: 0.6;
}

/* =====================================
   HOMEPAGE BUTTON FOUNDATION
===================================== */

#arcade-tab button {
    font-weight: 700;
}

/*
 * Recolour remaining orange homepage
 * buttons, including Surprise Me,
 * without changing their click handlers.
 */

#arcade-tab button[class*="bg-neonorange"],
#arcade-tab button[class*="bg-orange-"],
#arcade-tab button[class*="bg-[#ff8c00]"] {
    background-color: #1467B3 !important;
    color: #FFFFFF !important;
    border-color: #1467B3 !important;
    box-shadow: none !important;
}

#arcade-tab button[class*="bg-neonorange"]:hover,
#arcade-tab button[class*="bg-orange-"]:hover {
    background-color: #0D548F !important;
    color: #FFFFFF !important;
}

/* =====================================
   HOMEPAGE EMPTY / LOADING STATES
===================================== */

#arcade-tab .text-gray-500 {
    color: #6689A8 !important;
}

/* =====================================
   GENRE FILTER BASE STYLING
===================================== */

/*
 * Covers genre controls when their
 * container uses an established ID.
 */

#arcade-tab #genre-filters button,
#arcade-tab #genreFilters button {
    background: #E4F2FD !important;
    color: #071B34 !important;

    border: 1px solid #C8E2F4 !important;
    border-radius: 8px;

    padding: 9px 15px;
    font-size: 12px;
    font-weight: 700;

    opacity: 1 !important;
    box-shadow: none !important;
}

#arcade-tab #genre-filters button:hover,
#arcade-tab #genreFilters button:hover {
    background: #CBEAFF !important;
    color: #1467B3 !important;
}

#arcade-tab #genre-filters button.active,
#arcade-tab #genreFilters button.active,
#arcade-tab #genre-filters button[aria-pressed="true"],
#arcade-tab #genreFilters button[aria-pressed="true"] {
    background: #1467B3 !important;
    color: #FFFFFF !important;
    border-color: #1467B3 !important;
}

/* =====================================
   EXTRA GENRE BUTTON SUPPORT
===================================== */

#arcade-tab button[onclick*="filterGenre"],
#arcade-tab button[onclick*="filterByGenre"],
#arcade-tab button[onclick*="setGenre"],
#arcade-tab button[onclick*="selectGenre"],
#arcade-tab button[onclick*="filterGames"] {
    background-color: #E4F2FD !important;
    color: #071B34 !important;

    border: 1px solid #C8E2F4 !important;
    border-radius: 8px !important;

    opacity: 1 !important;
    box-shadow: none !important;
}

#arcade-tab button[onclick*="filterGenre"]:hover,
#arcade-tab button[onclick*="filterByGenre"]:hover,
#arcade-tab button[onclick*="setGenre"]:hover,
#arcade-tab button[onclick*="selectGenre"]:hover,
#arcade-tab button[onclick*="filterGames"]:hover {
    background-color: #CBEAFF !important;
    color: #1467B3 !important;
}

#arcade-tab button[onclick*="filterGenre"].active,
#arcade-tab button[onclick*="filterByGenre"].active,
#arcade-tab button[onclick*="setGenre"].active,
#arcade-tab button[onclick*="selectGenre"].active,
#arcade-tab button[onclick*="filterGames"].active {
    background-color: #1467B3 !important;
    color: #FFFFFF !important;
    border-color: #1467B3 !important;
}

/* =====================================
   LIGHT HOMEPAGE FILTER CONTRAST
===================================== */

/*
 * Improve visibility of pale text
 * on non-active homepage buttons.
 */

#arcade-tab section:not(.hero-bg)
button.text-gray-300,
#arcade-tab section:not(.hero-bg)
button.text-gray-400,
#arcade-tab section:not(.hero-bg)
button.text-white\/30,
#arcade-tab section:not(.hero-bg)
button.text-white\/40,
#arcade-tab section:not(.hero-bg)
button.text-white\/50 {
    color: #254867 !important;
    opacity: 1 !important;
}

/* =====================================
   ACTIVE FILTER COLOURS
===================================== */

#arcade-tab section:not(.hero-bg)
button.bg-neoncyan,
#arcade-tab section:not(.hero-bg)
button[class*="bg-neoncyan"] {
    background: #1467B3 !important;
    color: #FFFFFF !important;
    border-color: #1467B3 !important;
}

/* =====================================
   SURPRISE ME BUTTON
===================================== */

#arcade-tab button[onclick*="surprise"],
#arcade-tab button[onclick*="Surprise"],
#arcade-tab #surpriseMeBtn,
#arcade-tab #surprise-me-btn {
    background-color: #1467B3 !important;
    color: #FFFFFF !important;

    border: 1px solid #1467B3 !important;
    border-radius: 8px !important;

    box-shadow: none !important;
    opacity: 1 !important;
}

#arcade-tab button[onclick*="surprise"]:hover,
#arcade-tab button[onclick*="Surprise"]:hover,
#arcade-tab #surpriseMeBtn:hover,
#arcade-tab #surprise-me-btn:hover {
    background-color: #0D548F !important;
    color: #FFFFFF !important;
}

/* =====================================
   RESPONSIVE LAYOUT
===================================== */

@media (max-width: 768px) {

    #arcade-tab .hero-bg {
        min-height: 390px;
        padding: 65px 20px;
    }

    #arcade-tab .hero-bg h2 {
        font-size: clamp(2.3rem, 9vw, 3.5rem);
        line-height: 1.12;
    }

    #arcade-tab .hero-bg > p {
        font-size: 15px;
        line-height: 1.65;
    }

    #arcade-tab .hero-bg button {
        padding: 12px 24px;
        font-size: 15px;
    }

    #arcade-tab section:not(.hero-bg) {
        padding-left: 18px;
        padding-right: 18px;
    }

    #arcade-tab section:not(.hero-bg) h3 {
        font-size: 22px;
    }
}

/* =====================================
   ACCESSIBILITY
===================================== */

#arcade-tab button:focus-visible {
    outline: 3px solid #1598E6;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    #arcade-tab button,
    #arcade-tab [class*="rounded-xl"] {
        transition: none !important;
    }

    #arcade-tab [class*="rounded-xl"]:hover,
    #arcade-tab button:hover {
        transform: none !important;
    }
}


/* =====================================
   FINAL ARCADE BRAND POLISH
   Replaces residual orange labels and
   corrects Discover search icon spacing.
===================================== */

/* Game genres and tags on homepage: Ice Blue, not orange. */
#arcade-tab .text-neonorange,
#arcade-tab [class*="text-orange-"] {
    color: #1467B3 !important;
}

/* Discover search icon: move 10px left and give text clear spacing. */
#discover-tab input[placeholder^="Search games"] + span {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#discover-tab input[placeholder^="Search games"] + span img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

#discover-tab input[placeholder^="Search games"] {
    padding-left: 46px !important;
}


/* =====================================
   CARD DESCRIPTION REFINEMENT
   Readable ice-blue / steel-blue ink on white.
===================================== */
#arcade-tab section:not(.hero-bg) p.text-gray-400,
#arcade-tab #game-grid .text-gray-400,
#arcade-tab #fresh-arcade-grid .text-gray-400,
#arcade-tab #recently-updated-grid .text-gray-400,
#arcade-tab #hidden-gems-grid .text-gray-400,
#arcade-tab #rising-games-grid .text-gray-400 {
    color: #376889 !important;
}

/* Stable, tidy preview rather than a tall, uneven block. */
#arcade-tab .avc-card-description {
    color: #355D7C !important;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: 4.65em;
    overflow-wrap: anywhere;
    margin-bottom: 4px;
}

#arcade-tab .avc-description-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: 0 0 16px;
    padding: 3px 0;
    color: #1467B3 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
}

#arcade-tab .avc-description-link:hover {
    color: #0D548F !important;
    text-decoration: underline;
    transform: none !important;
}

#arcade-tab .avc-description-link[hidden] {
    display: none !important;
}

/* Maintain equal card height and anchor Play Now at the bottom. */
#arcade-tab #hidden-gems-grid article > div,
#arcade-tab #rising-games-grid article > div {
    display: flex;
    flex-direction: column;
}

#arcade-tab .avc-description-link + button {
    margin-top: auto;
}

/* =====================================
   FINAL READABILITY — LIGHT PAGES
   Keep blue headings and readable muted copy.
===================================== */

/* Section introductions, including Hidden Gems. */
#arcade-tab section:not(.hero-bg) > p,
#arcade-tab section:not(.hero-bg) p.text-gray-400,
#arcade-tab section:not(.hero-bg) p.text-gray-500 {
    color: #315B7B !important;
}

/* Consistent descriptions in every homepage game section. */
#arcade-tab #game-grid p,
#arcade-tab #hidden-gems-grid p,
#arcade-tab #rising-games-grid p,
#arcade-tab #fresh-arcade-grid p,
#arcade-tab #recently-updated-grid p,
#arcade-tab .avc-card-description {
    color: #315B7B !important;
}

/* Keep developer names, genre and other interactive blue accents distinct. */
#arcade-tab #game-grid .text-neoncyan,
#arcade-tab #hidden-gems-grid .text-neoncyan,
#arcade-tab #rising-games-grid .text-neoncyan,
#arcade-tab #fresh-arcade-grid .text-neoncyan,
#arcade-tab #recently-updated-grid .text-neoncyan {
    color: #1467B3 !important;
}

/* Readable secondary copy on Discover, PC and Mobile white cards. */
#discover-tab .text-gray-400,
#discover-tab .text-gray-500,
#pc-tab .text-gray-400,
#pc-tab .text-gray-500,
#mobile-tab .text-gray-400,
#mobile-tab .text-gray-500 {
    color: #426987 !important;
}

/* =====================================
   THEATER — GAME DESCRIPTION
   The title is a visual label; #theaterDesc
   remains the actual dynamically loaded text.
===================================== */

#theaterModal #theaterDesc::before {
    content: "About This Game";
    display: block;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}

#theaterModal #theaterDesc {
    color: #CFDEEC !important;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* Preserve a more compact rhythm on phones. */
@media (max-width: 640px) {
    #theaterModal #theaterDesc::before {
        font-size: 15px;
        margin-bottom: 10px;
    }
    #theaterModal #theaterDesc {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =====================================
   FINAL TEXT WEIGHT REFINEMENT
   Clearer copy on pale/white backgrounds.
   Do not alter headings, nav, buttons or hero.
===================================== */

/* Main section explanations: Hidden Gems, Rising, Fresh, Updated. */
#arcade-tab section:not(.hero-bg) > p,
#arcade-tab section:not(.hero-bg) p.text-gray-400,
#arcade-tab section:not(.hero-bg) p.text-gray-500 {
    font-weight: 500 !important;
}

/* Descriptions inside homepage game cards, including carousel cards. */
#arcade-tab #game-grid p,
#arcade-tab #hidden-gems-grid p,
#arcade-tab #rising-games-grid p,
#arcade-tab #fresh-arcade-grid p,
#arcade-tab #recently-updated-grid p,
#arcade-tab .avc-card-description {
    font-weight: 500 !important;
    color: #315B7B !important;
}

/* Muted descriptions and help copy on light catalogue screens. */
#discover-tab p.text-gray-400,
#discover-tab p.text-gray-500,
#pc-tab p.text-gray-400,
#pc-tab p.text-gray-500,
#mobile-tab p.text-gray-400,
#mobile-tab p.text-gray-500,
#trailers-tab p.text-gray-400,
#trailers-tab p.text-gray-500 {
    font-weight: 500 !important;
}

/* Keep the existing cinema panel readable without making it heavy. */
#theaterModal #theaterDesc {
    font-weight: 500 !important;
}