/*
 * ArcadeVibeCode — Ice Blue Arcade
 * STAGE 3: Discover, PC Games & Mobile
 * Styles only: existing IDs, markup, JavaScript, Supabase and Theater unchanged.
 * Load AFTER styles.css and homepage.css.
 */

/* Page foundations */
#discover-tab, #pc-tab, #mobile-tab {
    background: #F2F9FF;
    color: #071B34;
    min-height: 75vh;
}
#discover-tab h2, #discover-tab h3, #discover-tab h4,
#pc-tab h2, #pc-tab h3, #pc-tab h4,
#mobile-tab h2, #mobile-tab h3, #mobile-tab h4 {
    color: #071B34 !important;
    letter-spacing: -.025em;
}
#discover-tab .text-neoncyan, #pc-tab .text-neoncyan, #mobile-tab .text-neoncyan,
#discover-tab .text-neonmagenta, #pc-tab .text-neonmagenta, #mobile-tab .text-neonmagenta {
    color: #1467B3 !important;
}
#discover-tab .text-neonorange, #pc-tab .text-neonorange, #mobile-tab .text-neonorange {
    color: #1467B3 !important;
}
#discover-tab .text-gray-300, #pc-tab .text-gray-300, #mobile-tab .text-gray-300,
#discover-tab .text-gray-400, #pc-tab .text-gray-400, #mobile-tab .text-gray-400 {
    color: #526E89 !important;
}
#discover-tab .text-gray-500, #pc-tab .text-gray-500, #mobile-tab .text-gray-500 {
    color: #6689A8 !important;
}

/* White panels and catalog cards; keep gold Hall-of-Fame accents */
#discover-tab [class*="bg-white/5"][class*="border"],
#discover-tab [class*="bg-black/50"][class*="border"],
#pc-tab [class*="bg-white/5"][class*="border"],
#mobile-tab [class*="bg-white/5"][class*="border"] {
    background: #FFFFFF !important;
    border-color: #D8E7F3 !important;
    box-shadow: 0 3px 14px rgba(7,27,52,.05);
}
#discover-tab [class*="bg-black/60"][class*="border"] {
    background: #FFFFFF !important;
    border-color: #E7D497 !important;
}
#discover-tab [class*="from-yellow-900"] {
    background: #FFFDF5 !important;
    border-color: #E7D497 !important;
    box-shadow: 0 3px 14px rgba(7,27,52,.04);
}
#discover-tab [class*="from-yellow-900"] .text-yellow-500,
#discover-tab [class*="from-yellow-900"] .text-yellow-400 {
    color: #986400 !important;
}
#discover-tab [class*="bg-white/5"][class*="border"]:hover,
#pc-tab [class*="bg-white/5"][class*="border"]:hover,
#mobile-tab [class*="bg-white/5"][class*="border"]:hover {
    border-color: #8FCEF4 !important;
    box-shadow: 0 8px 24px rgba(7,27,52,.09);
}

/* Ensure originally-white hardcoded text becomes readable on white panels */
#discover-tab .text-white, #pc-tab .text-white, #mobile-tab .text-white {
    color: #071B34 !important;
}

/* Discover search */
#discover-tab input[type="text"],
#discover-tab input[type="search"] {
    background: #FFFFFF !important;
    color: #071B34 !important;
    border: 1px solid #BDDBEE !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 9px rgba(7,27,52,.04) !important;
}
#discover-tab input[type="text"]::placeholder,
#discover-tab input[type="search"]::placeholder { color: #6689A8; opacity: 1; }
#discover-tab input[type="text"]:focus,
#discover-tab input[type="search"]:focus {
    border-color: #1598E6 !important;
    outline: 3px solid rgba(21,152,230,.18) !important;
    outline-offset: 1px;
}

/* Filters generated by current or later discovery scripts */
#discover-tab button[aria-pressed],
#discover-tab button[data-genre],
#discover-tab button[data-category],
#discover-tab button[data-filter],
#discover-tab button[class*="filter-chip"] {
    background: #E4F2FD !important;
    color: #071B34 !important;
    border: 1px solid #C8E2F4 !important;
    border-radius: 8px;
    font-weight: 700;
    opacity: 1 !important;
}
#discover-tab button[aria-pressed="true"],
#discover-tab button[data-genre].active,
#discover-tab button[data-category].active,
#discover-tab button[data-filter].active,
#discover-tab button[class*="filter-chip"].active {
    background: #1467B3 !important;
    color: #FFFFFF !important;
    border-color: #1467B3 !important;
}

/* Action buttons: recolour old orange controls while preserving click handlers */
#discover-tab button[class*="bg-neonorange"],
#pc-tab button[class*="bg-neonorange"],
#mobile-tab button[class*="bg-neonorange"] {
    background: #1467B3 !important;
    border-color: #1467B3 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    border-radius: 8px;
}
#discover-tab button[class*="bg-neonorange"]:hover,
#pc-tab button[class*="bg-neonorange"]:hover,
#mobile-tab button[class*="bg-neonorange"]:hover { background: #0D548F !important; }

/* Neutral buttons inside these tabs must retain readable text */
#discover-tab button[class*="bg-white/10"],
#pc-tab button[class*="bg-white/10"],
#mobile-tab button[class*="bg-white/10"] {
    background: #E4F2FD !important;
    color: #0B416A !important;
    border: 1px solid #C8E2F4 !important;
    box-shadow: none !important;
}
#discover-tab button[class*="bg-white/10"]:hover,
#pc-tab button[class*="bg-white/10"]:hover,
#mobile-tab button[class*="bg-white/10"]:hover {
    background: #CBEAFF !important;
    color: #071B34 !important;
}

/* Developer directory inserted by studio.js */
#discover-tab #studio-directory-list > div {
    background: #FFFFFF !important;
    border-color: #D8E7F3 !important;
}
#discover-tab #studio-directory-list h4 { color: #071B34 !important; }
#discover-tab #studio-directory-list p { color: #6689A8 !important; }

/* Image presentation; do not distort mobile portraits */
#pc-tab img, #mobile-tab img, #discover-tab img { max-width: 100%; }
#pc-tab img, #discover-tab img { object-fit: cover; }
#mobile-tab img { object-fit: cover; }

/* Keyboard and mobile */
#discover-tab button:focus-visible, #pc-tab button:focus-visible,
#mobile-tab button:focus-visible {
    outline: 3px solid #1598E6;
    outline-offset: 3px;
}
@media (max-width: 767px) {
    #discover-tab, #pc-tab, #mobile-tab { padding: 28px 16px; }
    #discover-tab h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
    #pc-tab > h2, #mobile-tab > h2 { font-size: 1.65rem; }
    #pc-tab .flex.gap-4 { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #discover-tab *, #pc-tab *, #mobile-tab * { transition: none !important; }
}

/* ==========================================
   FAME PROMENADE — ICE BLUE & GOLD
========================================== */

/* Main achievement section */
#discover-tab [class*="from-yellow-900"] {
    background: #FFFCF2 !important;
    border: 1px solid #EACB77 !important;
    box-shadow: none !important;
}

/* Inner achievement panel */
#discover-tab [class*="from-yellow-900"] [class*="bg-black"],
#discover-tab [class*="from-yellow-900"] [class*="bg-gray"],
#discover-tab [class*="from-yellow-900"] [class*="bg-white"] {
    background: #FFF5D7 !important;
    border-color: #EACB77 !important;
}

/* Headings */
#discover-tab [class*="from-yellow-900"] h3,
#discover-tab [class*="from-yellow-900"] h4 {
    color: #071B34 !important;
}

/* Descriptions */
#discover-tab [class*="from-yellow-900"] p,
#discover-tab [class*="from-yellow-900"] .text-gray-400 {
    color: #526E89 !important;
}

/* Gold achievement accents */
#discover-tab [class*="from-yellow-900"] .text-yellow-400,
#discover-tab [class*="from-yellow-900"] .text-yellow-500 {
    color: #A76D0B !important;
}