Horion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horion</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600&family=JetBrains+Mono:wght@300;700&display=swap" rel="stylesheet">
    <style>
        /* --- ROOT VARIABLES --- */
:root {
    --hacker-blue: #0070FF;
    --neon-blue: #00E5FF;
    --bg-dark: #000000;
    --text-grey: #445566;
    --warning-gold: #FFC107;
    --heart-red: #FF0050; /* Deeper, TikTok-style red */
}

/* --- BODY --- */
body {
    margin: 0;
    background-color: var(--bg-dark);
    font-family: 'Inter', sans-serif;
    color: white;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* --- BOOTUP OVERLAY --- */
#boot-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #020205;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.boot-text {
    font-family: 'JetBrains Mono', monospace;
    color: var(--neon-blue);
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-transform: uppercase;
    animation: pulseText 2s infinite;
}

@keyframes pulseText {
    0% { opacity: 0.7; }
    50% { opacity: 1; text-shadow: 0 0 10px var(--neon-blue); }
    100% { opacity: 0.7; }
}

.progress-container {
    width: 300px;
    height: 3px;
    background: rgba(0, 112, 255, 0.15);
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--neon-blue);
    box-shadow: 0 0 20px var(--neon-blue);
    transition: width 0.1s linear;
}

/* --- NAVBAR --- */
.hud-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
    background: rgba(0, 5, 15, 0.8);
    border-bottom: 1px solid rgba(0, 112, 255, 0.15);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(5px);
}

.nav-logo {
    font-size: 3rem;
    font-weight: 100;
    letter-spacing: 12px;
    text-decoration: none;
    color: white;
    transition: 0.4s ease;
}

.nav-logo:hover { color: var(--neon-blue); cursor: pointer; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.taskbar-pins {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-item.pinned-app-btn {
    color: #07c8d9 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px rgba(154, 247, 255, 0.55);
}

.nav-item {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 4px;
    transition: 0.3s;
    padding: 10px 20px;
    display: inline-block;
}

.nav-item.more {
    font-size: 11px;
    color: var(--text-grey);
    letter-spacing: 2px;
}

.nav-item:hover { color: var(--neon-blue); cursor: pointer;}
.nav-item.active { color: var(--hacker-blue); border-bottom: 1px solid var(--hacker-blue); }
.nav-item.more.active { color: var(--hacker-blue); border-bottom: 1px solid var(--hacker-blue); }
.nav-item.hidden { display: none; }

/* --- CONTENT CONTAINER --- */
.content-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 112, 255, 0.1);
    border-radius: 4px;
    backdrop-filter: blur(2px);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

/* --- HOMEPAGE SPECIFICS --- */
.home-title {
    font-size: 4rem;
    font-weight: 100;
    letter-spacing: 15px;
    color: var(--neon-blue);
    margin: 0;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.home-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: #334455;
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 30px;
    letter-spacing: 2px;
    transition: 0.3s;
    cursor: pointer;
}

.home-subtitle:hover {
    color: var(--hacker-blue);
    text-decoration: underline;
    text-shadow: 0 0 5px var(--hacker-blue);
}

/* --- DISCLAIMER BOX --- */
.disclaimer-box {
    background: rgba(255, 193, 7, 0.05);
    border: 1px solid rgba(255, 193, 7, 0.4);
    padding: 25px;
    margin-bottom: 40px;
    border-radius: 6px;
    max-width: 650px;
    width: 90%;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.disclaimer-text {
    color: var(--warning-gold);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.doc-btn {
    display: inline-block;
    padding: 10px 25px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning-gold);
    color: var(--warning-gold);
    font-family: 'JetBrains Mono', monospace;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: 0.3s;
    border-radius: 2px;
}

.doc-btn:hover {
    background: var(--warning-gold);
    color: black;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
    transform: translateY(-2px);
}

/* --- BUTTONS --- */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 50px;
}

.btn-row {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.action-btn {
    flex: 1;
    padding: 15px 0;
    background: rgba(0, 112, 255, 0.1);
    border: 1px solid var(--hacker-blue);
    color: white;
    font-family: 'JetBrains Mono', monospace;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 0.9rem;
    transition: 0.3s;
    text-align: center;
}

.action-btn:hover {
    background: var(--hacker-blue);
    color: white;
    box-shadow: 0 0 15px var(--hacker-blue);
    cursor: pointer;
}

.secondary-btn {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: 1px solid #334455;
    color: #667788;
    font-family: 'JetBrains Mono', monospace;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 0.8rem;
    transition: 0.3s;
    text-align: center;
    cursor: pointer;
}

.secondary-btn:hover {
    border-color: var(--hacker-blue);
    color: var(--neon-blue);
}

/* --- DESCRIPTION & RECENT CHANGES --- */
.description-area {
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
    max-width: 600px;
    margin-bottom: 50px;
    font-weight: 300;
}

.recent-changes-container {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: left;
}

.recent-label {
    color: var(--neon-blue);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.change-log {
    color: #8899aa;
    font-size: 0.9rem;
    font-weight: 300;
}

/* --- SEARCH BAR --- */
#searchBar {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 5, 15, 0.8);
    border: 1px solid var(--hacker-blue);
    padding: 20px;
    margin-bottom: 30px;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    outline: none;
    border-radius: 4px;
    font-size: 1rem;
}

#searchBar:focus {
    box-shadow: 0 0 15px rgba(0, 112, 255, 0.2);
    border-color: var(--neon-blue);
}

/* --- GAME GRID --- */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

.game-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 112, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.game-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}

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

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 10px;
    box-sizing: border-box;
}

.game-title {
    color: var(--neon-blue);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.game-card:hover img {
    filter: brightness(0.3) blur(2px);
    transform: scale(1.1);
    cursor: pointer;
}

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

/* --- FAV HEART (FEATURED) --- */
.fav-star-featured {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 32px;       /* Fixed size for SVG */
    height: 32px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, filter 0.2s;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

.special-web-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 18;
    display: block;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 0.85;
    transform: scaleX(1.24);
    transform-origin: top left;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.45);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* SVG Styling inside the container */
.fav-star-featured path {
    fill: rgba(0, 0, 0, 0.3); /* Semi-transparent dark fill by default */
    stroke: white;            /* White outline to be visible on images */
    stroke-width: 2px;
    transition: fill 0.2s, stroke 0.2s;
}

.game-card:hover .fav-star-featured {
    opacity: 1;
}

.fav-star-featured:hover {
    transform: scale(1.2);
}

/* ACTIVE (LIKED) STATE */
.fav-star-featured.active {
    opacity: 1;
    transform: scale(1.1);
    /* The glow effect around the whole shape */
    filter: drop-shadow(0 0 10px var(--heart-red)); 
}

.fav-star-featured.active path {
    fill: var(--heart-red);   /* The Red Fill */
    stroke: black;            /* The Black Outline requested */
    stroke-width: 1.5px;
}

/* --- MORE PAGE --- */
.section-header {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 8px;
    color: white;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--hacker-blue);
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    margin-bottom: 40px;
}

.info-card {
    background: rgba(0, 112, 255, 0.05);
    border: 1px solid rgba(0, 112, 255, 0.2);
    padding: 20px;
    text-align: left;
    transition: 0.3s;
}

.info-card:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
}

.card-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-grey);
    display: block;
    margin-bottom: 5px;
}

.card-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    color: var(--neon-blue);
}

.text-block {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #cccccc;
    max-width: 600px;
    margin-bottom: 30px;
    font-weight: 300;
    text-align: left;
    width: 100%;
}

.credits-section {
    width: 100%;
    max-width: 600px;
    text-align: left;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}

.credits-title {
    color: white;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.credit-link {
    display: block;
    color: var(--hacker-blue);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 10px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.credit-link:hover {
    color: var(--neon-blue);
    padding-left: 10px;
}

/* --- EXTENSIONS PAGE --- */
.extensions-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.extension-banner {
    width: 100%;
    min-height: 240px;
    background: rgba(0, 112, 255, 0.08);
    border: 1px solid rgba(0, 112, 255, 0.25);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 320px 1fr;
    overflow: hidden;
}

.extension-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid rgba(0, 112, 255, 0.2);
}

.extension-banner-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    text-align: left;
}

.extension-banner-title {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: var(--neon-blue);
    margin: 0;
}

.extension-banner-desc {
    margin: 0;
    color: #bcc8d4;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 680px;
}

.extension-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.extension-action-btn {
    padding: 10px 20px;
    border: 1px solid var(--hacker-blue);
    color: white;
    background: rgba(0, 112, 255, 0.15);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.25s;
}

.extension-action-btn:hover {
    background: var(--hacker-blue);
    box-shadow: 0 0 14px rgba(0, 112, 255, 0.4);
}

.extension-action-btn.secondary {
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    font-weight: 700;
    background: transparent;
}

.extension-action-btn.secondary:hover {
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    background: rgba(0, 229, 255, 0.14);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}

@media (max-width: 900px) {
    .extension-banner {
        grid-template-columns: 1fr;
    }

.extension-banner-image {
        height: 220px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 112, 255, 0.2);
    }
}

/* --- GENERIC BUTTONS GRID --- */
.buttons-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.db-item-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    transition: transform 0.2s ease;
}

.db-item-wrapper:hover {
    transform: translateY(-2px);
}

.db-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #ccc;
    padding: 14px 40px 14px 14px; /* Right padding for heart */
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    border-radius: 2px;
    text-transform: capitalize;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.db-item-wrapper:hover .db-btn {
    background: rgba(0, 112, 255, 0.1);
    color: var(--neon-blue);
    border-color: var(--hacker-blue);
}

.fav-star-db {
    position: absolute;
    right: 15px; 
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s;
}

.fav-star-db path {
    fill: transparent;
    stroke: #666;
    stroke-width: 2px;
    transition: all 0.2s;
}

.fav-star-db:hover {
    transform: translateY(-50%) scale(1.2);
}
.fav-star-db:hover path {
    stroke: white;
}

.fav-star-db.active path {
    fill: var(--heart-red);
    stroke: black; /* Outline */
    stroke-width: 1.5px;
}
.fav-star-db.active {
    filter: drop-shadow(0 0 8px var(--heart-red));
}

/* --- SECTION VIEW CONTROL --- */
.view-section {
    display: none; /* hide all sections by default */
}

.view-section.active {
    display: block; /* only the active section is visible */
}

/* --- SEARCH BARS --- */
#searchFeatured,
#searchDatabase {
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    background: rgba(0, 5, 15, 0.8);
    border: 1px solid var(--hacker-blue);
    padding: 15px 20px;
    margin: 0 auto 30px;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    outline: none;
    border-radius: 4px;
    font-size: 1rem;
    display: block;
}

.featured-note {
    width: 100%;
    margin: -8px 0 20px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 112, 255, 0.32);
    background: rgba(0, 112, 255, 0.08);
    color: #d7f7ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.45;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(0, 112, 255, 0.12);
}

#featured-grid, #favorites-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    width: 100%;
}

#sections-container, #favorites-database-list {
    width: 100%;
    max-width: 1200px;
}

/* --- CANVAS --- */
canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.sort-button {
    padding: 8px 16px;
    margin-bottom: 20px;
    background-color: #333; /* Dark background */
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.sort-button:hover {
    background-color: #555; /* Lighter on hover */
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--hacker-blue); }
::-webkit-scrollbar-track { background: #000; }
</style>
</head>
<body>

<div id="boot-overlay">
    <div class="boot-text">Booting HORION...</div>
    <div class="progress-container">
        <div id="bootBar" class="progress-bar"></div>
    </div>
</div>

<nav class="hud-nav">
    <div class="nav-left">
        <span onclick="switchView('home')" class="nav-logo">HORION</span>
    </div>
    <div class="nav-right">
        <div id="taskbar-pins" class="taskbar-pins"></div>
        <span onclick="switchView('favorites')" id="btn-favorites" class="nav-item hidden">FAVORITES</span>
        <span onclick="switchView('featured')" id="btn-featured" class="nav-item">FEATURED</span>
        <span onclick="switchView('database')" id="btn-database" class="nav-item">DATABASE</span>
       
        <span onclick="switchView('more')" id="btn-more" class="nav-item more">MORE</span>
    </div>
</nav>
<div id="view-home" class="view-section active">
    <div class="content-container">
        <h1 class="home-title">HORION</h1>
        <a href="https://sites.google.com/view/cmakesgames/my-sites-home" target="_blank" class="home-subtitle">Made By CMG</a>

<div class="disclaimer-box">
            <p class="disclaimer-text">
                Go to the Google Doc to find the Portal and other Horion apps.
            </p>
            <a href="https://docs.google.com/document/d/e/2PACX-1vS7zNM-V5HT60eoCjMcBXUL9oeXFQRWDeCW2wxKtCp5zlxjM2VhqhsipZLXXZ51q-HWi48ti90deumm/pub" target="_blank" class="doc-btn">Google Doc</a>
        </div>

<div class="description-area">
            Welcome to Horion, the best game website and database for any game you would ever want to play. 
            
        </div>

<div class="button-group">
            <div class="btn-row">
                <span onclick="switchView('featured')" class="action-btn">FEATURED</span>
                <span onclick="switchView('database')" class="action-btn">DATABASE</span>
            </div>
            <span onclick="switchView('more')" class="secondary-btn">MORE OPTIONS</span>
        </div>

<div class="recent-changes-container">
            <div class="recent-label">RECENT CHANGES: (1.7)</div>
            <div class="change-log">
                > BIG Bug Fixes / QOL<br>
                > I looked at all the form responses and added what i could<br>
                > New featured games and a new system for 'special' web games<br>
                > Fixed GN-Math and removed the Extensions page.
            </div>
        </div>
    </div>
</div>

<div id="view-favorites" class="view-section">
    <div class="content-container">
        <h2 class="section-header">YOUR FAVORITES</h2>
        
        <h3 class="recent-label" style="width:100%; text-align:left; margin-top:20px;">FEATURED GAMES</h3>
        <div id="favorites-featured-grid" class="game-grid">
            
        </div>

<h3 class="recent-label" style="width:100%; text-align:left; margin-top:40px;">DATABASE</h3>
        <div id="favorites-database-list" class="buttons-container">
             
        </div>
    </div>
</div>

<div id="view-featured" class="view-section">
    <div class="content-container">
        <input type="text" id="searchFeatured" placeholder="SEARCH FEATURED..." autocomplete="off" spellcheck="false">
        <h3 class="featured-note">Featured games with a W in the top left are web games and may not work if your teacher is watching you on Securly/GoGuardian.</h3>
        <button id="sort-btn" class="sort-button" onclick="toggleSort()">
            Sort: A-Z
        </button>

<div id="view-extensions" class="view-section">
    <div class="content-container">
        <h2 class="section-header">EXTENSIONS</h2>
        <div id="extensions-grid" class="extensions-grid">
            
        </div>
    </div>
</div>

<div id="view-more" class="view-section">
    <div class="content-container">
    <h2 class="section-header">HORION INFO</h2>

<div class="info-grid">
        <div class="info-card">
            <span class="card-label">CURRENT BUILD</span>
            <span class="card-value">v1.7</span>
        </div>
        <div class="info-card">
            <span class="card-label">SELECTED SERVER</span>
            <span class="card-value">NETLIFY</span>
        </div>
        <div class="info-card">
            <span class="card-label">DATABASE ENTRIES</span>
            <span class="card-value">2200</span>
        </div>
        <div class="info-card">
            <span class="card-label">LAST UPDATE</span>
            <span class="card-value">2026.3.27</span>
        </div>
    </div>

<div class="text-block">
        <p>
            Horion is a comprehensive database designed to catalog and feature the best games available. Website is created by CMG to ensure fun and provide a streamlined user experience. 
        </p>
        <p>
            If you encounter bugs, broken links, or visual glitches, please refer to the Google Doc for links and status, or request a bug fix through the form.
        </p>
    </div>

<div class="credits-section">
        <div class="credits-title">CREDITS & LINKS</div>
        <p> <b>Developed By:</b><br> CMG</p>
        </p><br><br>
        <a href="https://sites.google.com/view/cmakesgames/my-sites-home" target="_blank" class="credit-link">> CMG Home</a>
        <a href="https://docs.google.com/document/d/e/2PACX-1vS7zNM-V5HT60eoCjMcBXUL9oeXFQRWDeCW2wxKtCp5zlxjM2VhqhsipZLXXZ51q-HWi48ti90deumm/pub" target="_blank" class="credit-link">> Links Document</a>
        <a href="https://docs.google.com/forms/d/e/1FAIpQLSfB9PSqEptKQutHkIWXa8QjFNBELP1fGXX-q5lzFFelRvGqIg/viewform?usp=publish-editor" class="credit-link">> Report an Issue or Request a Featured Game</a>
    </div>
</div>
</div>

];

const databaseFiles = [
       'cl1',
'cl10bullets',
'cl10minutestildawn',
'cl10morebullets',
'cl12minibattles',
'cl1on1soccer',
'cl1v1lol',
'cl1v1tennis',
'cl2048',
'cl2048cupcakes',
'cl20smallmazes',
'cl234playergame',
'cl2doom',
'cl2Dshooting',
'cl3dash',
'cl3dasheditor',
'cl3pandas',
'cl3pandasbrazil',
'cl3pandasfantasy',
'cl3pandasjapan',
'cl3pandasnight',
'cl3slices2',
'cl40xescape',
'cl4thandgoal',
'cl500calibercontractz',
'cl60secondsburgerrun',
'cl60secondssantarun',
'cl64in1nes',
'cl8ballclassic',
'cl8ballpool',
'cl9007199254740992',
'cl99balls',
'cl99nightsitf',
'clabandoned3',
'clabsolutemadness',
'clacecombat2',
'clacecombat3',
'clacegangstertaxi',
'clachievementunlocked',
'clachievmentunlocked',
'clachievmentunlocked2',
'clachievmentunlocked3',
'clachillies',
'clachillies2',
'clADarkRoom',
'cladatewithdeath',
'cladayintheoffice',
'cladifferentsnowgrave',
'clADOFAI',
'cladvancewars',
'cladvancewars2',
'cladventneon',
'clAdventureCapatalist',
'cladventurecapitalist',
'clagariolite',
'clageofwar',
'clageofwar2',
'clagesofconflict',
'clahoysurvival',
'clai',
'clairlinetycoonidle',
'clakoopasrevenge',
'clakoopasrevenge2',
'clakumanorgaiden',
'clalienhominid',
'clalienhominidgba',
'clalienskyinvasion',
'clalientransporter',
'clalienvspredator',
'clallbossesin1',
'clallocation',
'clamaze',
'clamidstthesky',
'clamigopancho',
'clamigopancho2',
'clamigopancho3',
'clamigopancho4',
'clamigopancho5',
'clamigopancho6',
'clamigopancho7',
'clamongus',
'clamorphous',
'clancientsins',
'clangry-birdsspace',
'clangrybirds-space',
'clangrybirds',
'clangrybirdsshowdown',
'clangrybirdsspace',
'clanimalcrossingwildworld',
'clanotherworld',
'clantimatterdimensions',
'clapotris',
'clappleshooter',
'clappleworm',
'claquaparkio',
'clarceuslegend',
'clarcheryworldtour',
'clarchimedesclient',
'clarena',
'clarmormayhem2',
'clarsonate',
'clarthursnightmare',
'clascent',
'clasmallworldcup',
'classesmentexaminationque',
'clasteroids',
'clasteroidsALT',
'clastraclient',
'clastrawasm',
'clatariadventure',
'clattackhole',
'clavalanche',
'claviamasters',
'claviamastersbuggy',
'clAwesomePirates',
'clawesomeplanes',
'clawesometanks',
'clawesometanks2',
'clB3313',
'clbabeltower',
'clbabychiccoadventure',
'clbabykaizo',
'clbabysniperinvietnam',
'clbackrooms',
'clbackrooms2D',
'clbackyardbaseball',
'clbackyardbaseball09',
'clbackyardbaseball10',
'clbackyardfootball',
'clbackyardsoccer',
'clbaconmaydie',
'clbadbodyguards',
'clbadicecream',
'clbadicecream2',
'clbadicecream3',
'clbadmondaysimulator',
'clbadparenting',
'clbadpiggies',
'clbadtimesim',
'clbadtimesimulator',
'clbalatrogba',
'clbaldidecomp',
'clbaldisbasics',
'clbaldisbasicsremaster',
'clbaldisfunnewschoolultimate',
'clballblast',
'clballsandbricks',
'clballsandbricksgood',
'clballz',
'clbananasimulator',
'clbanditgunslingers',
'clbanjokazooie',
'clbanjotooie',
'clbankbreakout2',
'clbankrobbery2',
'clbarryhasasecret',
'clbas',
'clbaseballbros',
'clbasketballfrvr',
'clbasketballlegends(1)',
'clbasketballlegends',
'clbasketballstars',
'clbasketballsuperstars',
'clbasketbattle',
'clbasketbros',
'clbasketrandom',
'clbasketrandomgood',
'clbasketslamdunk2',
'clbatterup',
'clbattlekarts',
'clbattles',
'clbattlesim',
'clbattlezone',
'clbazookaboy',
'clbballlegend',
'clbeachboxingsim',
'clbeamrider',
'clbearbarians',
'clbearsus',
'clben10alienforce',
'clben10omniverse',
'clben10protector',
'clben10racing',
'clben10ultimatealien',
'clbergentruck201x',
'clbfdia5b',
'clBFDIBranches',
'clbigflappytowertinysquare',
'clbigicetowertinysquare',
'clbigneontowertinysquare',
'clbigshotboxing2',
'clbigtowertinysquare',
'clbigtowertinysquare2',
'clbigtowertinysquare2good',
'clBig_Time_Butter_Baron',
'clbindingofisaccsheeptime',
'clbioevil4',
'clbitlife',
'clbitlifeencrypted',
'clbitplanes',
'clblackjack',
'clblackjackbattle',
'clblackjackhhhh',
'clblackknight',
'clblacksmithlab',
'clblastronaut',
'clblazedrifter',
'clbleachvsnaruto',
'clblightborne',
'clblobsstory2',
'clblockblast',
'clblockblastv2',
'clblockcraftparkour',
'clblockcraftshooter',
'clblockpost',
'clblockthepig',
'clblockydemolitionderby',
'clblockysnakes',
'clblood',
'clbloodmoney',
'clbloodtournament',
'clbloons',
'clbloons2',
'clbloonspp1',
'clbloonspp2',
'clbloonspp3',
'clbloonspp4',
'clbloonspp5',
'clbloonsTD1',
'clbloonsTD2',
'clbloonsTD3',
'clbloonsTD4',
'clbloonsTD5',
'clbloonsTD6scratch',
'clbloxorz',
'clblumgiracers',
'clblumgirocket',
'clBMX2',
'clbntts',
'clbobtherobber',
'clbobtherobber2',
'clbobtherobber5',
'clbollybeat',
'clbomberman',
'clbomberman2',
'clbombermanhero',
'clbombermanworld',
'clboomslingers',
'clbottlecracks',
'clbottleflip3d',
'clbounceback',
'clbouncemasters',
'clbouncybasketball',
'clbouncymotors',
'clBountyOfOne',
'clbowlalt',
'clbowmaster',
'clboxhead2playrooms',
'clboxheadnightmare',
'clboxinglive-2',
'clboxinglive2',
'clboxingrandom',
'clbrainrot',
'clBrawlstars',
'clbridgerace',
'clBTD1',
'clbtd5',
'clbtts',
'clbtts2',
'clbubbleshooter',
'clbubbleshooterpirate',
'clbubbletanks',
'clbubbletanks2',
'clbubbletanks3',
'clbubbletanksarenas',
'clbubbletankstd',
'clbubsy',
'clbuckshotroulette',
'clbuildnowgg',
'clbulletforce',
'clbunnyland',
'clburgerandfrights',
'clburritobison',
'clburritobison2',
'clburritobisonlaunchalibre',
'clburritobisonrevenge',
'clbushidoblade',
'clBusterJam',
'clcactusmccoy',
'clcactusmccoy2(1)',
'clcactusmccoy2',
'clcannonballs3d',
'clcannonfodder',
'clcaptainlang',
'clcapybaraclicker',
'clcarcrash3',
'clcardrawing',
'clcareatscar2deluxe',
'clcarkingarena',
'clcarmods',
'clcarstuntsdriving',
'clCartoonNetworkTableTennisUltimateTournament',
'clcastlebloodline',
'clcastlecircleofmoon',
'clcastlevania',
'clcastlevania2',
'clcastlevania3',
'clcastlevaniaariaofsorrow',
'clcastlevaniadawnofsorrow',
'clcastlevanianes',
'clcastlewarsmodern',
'clcatmario',
'clcatmariogood',
'clcatslovecake2',
'clcavecrawler',
'clcavestory',
'clceleste',
'clceleste2',
'clcellardoor',
'clCellToSingularity',
'clchainofmemories',
'clchaosfaction2',
'clcheckers',
'clcheesechompers3d',
'clcheshireinachatroom',
'clchess',
'clchessclassic',
'clchibiknight',
'clchickenscream',
'clchickenwar',
'clchipschallenge',
'clchoppyorc',
'clchronotrigger',
'clchuzzle',
'clCircloO2',
'clciviballs',
'clciviballs2',
'clclashofvikings',
'clclassof09',
'clclayuncraft',
'clcleanupio',
'clclearvision',
'clclearvision2',
'clclearvision3',
'clclearvision4',
'clclearvision5',
'clclmadnessambulation',
'clclubbytheseal',
'clclusterrush',
'clcoalllcdemo',
'clcod4',
'clcodblackopp',
'clcoddefiance',
'clcodenamegordon',
'clcodercraft',
'clcodmodernwarfare',
'clcodworldatwar',
'clcoffeemaker',
'clColorboxmustard',
'clcolorburst3d',
'clcolormatch',
'clcolorwatersort3d',
'clcombopool',
'clcommandandconquer',
'clcommanderkeen4',
'clcommanderkeen5',
'clcommanderkeen6',
'clconkersbadfurday',
'clcontra',
'clcontra3',
'clcookie-clicker',
'clcookieclicker',
'clcookieclickercool',
'clcookieclickergood',
'clcookingmama',
'clcookingmama2',
'clcookingmama3',
'clcoreball',
'clcoryinthehouse',
'clcotlk',
'clcountmastersstickmangames',
'clcoverorange',
'clcoverorange2',
'clcoverorangejourneygangsters',
'clcoverorangejourneyknights',
'clcoverorangejourneypirates',
'clcoverorangejourneyspace',
'clcoverorangeplayerspack',
'clcoverorangeplayerspack2',
'clcoverorangeplayerspack3',
'clcrankit!',
'clcrashbandicoot',
'clcrashbandicoot2',
'clcrashteamracing',
'clcrazycars',
'clcrazycattle3d',
'clcrazychicken3D',
'clcrazyfrogracer',
'clcrazymotorcycle',
'clcrazypenguincatapult',
'clcrazyplanelanding',
'clcrazytaxigba',
'clcreaturecardidle',
'clcreeperworld2',
'clcrossyroad',
'clcrunchball3000',
'clCrystalCastles',
'clcs16',
'clcsds',
'clcsgoclicker',
'clctgpnitro',
'clcurveball',
'clcuttherope',
'clcuttheropetimetravel',
'clcyberbungracing',
'clcybersensation',
'cldadgame',
'cldadnme',
'cldaggerfall',
'cldandysworldclicker',
'cldanktomb',
'cldashio',
'cldborigins',
'cldborigins2',
'cldbsniper',
'cldbzattacksaiyans',
'cldbzdevolution',
'cldbzsuperwarriorssonic',
'cldbzwarriors2',
'cldeadestate',
'cldeadlydescent',
'cldeadplate',
'cldeadzed',
'cldeadzed2',
'cldeathchase',
'cldeblob2',
'cldecision',
'cldecision2',
'cldecision3',
'cldecisionmedieval',
'cldeepersleep',
'cldeepestsword',
'cldeepsleep',
'cldefendyourcastle',
'cldefendyournuts',
'cldefendyournuts2',
'cldeltarune',
'cldeltatraveler',
'cldementium',
'cldemolitionderbycrashracing',
'cldemonbluff',
'cldiablo',
'cldiamondhollow',
'cldiamondhollow2',
'cldiddykong-racing',
'cldieinthedungeon',
'cldigdeep',
'cldigdug',
'cldigdug2',
'cldigdug26',
'cldigtochina',
'cldinodudes',
'cldiredecks',
'cldoblox',
'cldogeminer',
'cldogeminer2',
'cldokidokiliteratureclub',
'cldonkeykong',
'cldonkeykong64',
'cldonkeykongcountry',
'cldonkeykongcountry2',
'cldonkeykongcountry3',
'cldonkeykongnes',
'cldontescape',
'cldontescape2',
'cldontescape3',
'cldoodlejump',
'cldoodlejumpgoober',
'cldoom',
'cldoom2',
'cldoom2d',
'cldoom2dDOS',
'cldoom2dos',
'cldoom3pack',
'cldoom64',
'cldoomdos',
'cldoomemscripten',
'cldoomps',
'cldoompsalt',
'cldoomzio',
'cldoswasmx',
'cldouchebaglife',
'cldouchebagworkout',
'cldownthemountain',
'cldragonballadvance',
'clDragonBallZTheLegacyofGoku',
'clDragonQuestIX',
'cldrawclimber',
'cldrawntolife',
'cldrawntolife2',
'cldrawtheline',
'cldreader',
'cldreadheadparkour',
'cldriftboss',
'cldrifthuntersmerge',
'cldrivemady',
'cldrivenwild',
'cldrmario',
'cldrweedgaster',
'cldubstep',
'clduckhunt',
'clducklfe5',
'clducklife',
'clducklife2',
'clducklife3',
'clducklife4',
'clducklifebattle',
'clducklifespace',
'clducklingsio',
'clducktales',
'clducktales2',
'cldud',
'cldukenukem3d',
'cldumpling',
'cldungeondeck',
'cldungeonraid',
'cldungeonsanddegenerategamblers',
'cldunkshot',
'clduskchild',
'cldyingdreams',
'cldynamiteheaddy',
'cleaglercraftlite',
'cleaglercraftmagic',
'cleaglercraftnebula',
'cleaglercraftshadow',
'cleaglercraftsky',
'clEaglerCraftTech',
'cleaglerforge',
'cleagleride',
'cleaglerultimate',
'clearntodie',
'clearntodie2',
'clearthbound',
'clearthbound3',
'clearthboundsnes',
'clearthtaken',
'clearthtaken2',
'clearthtaken3',
'clearthwormjim',
'clearthwormjim2',
'cledelweiss',
'cledyscarsimulator',
'cleffinghail',
'cleffingmachines',
'cleffingworms',
'cleffingzombies',
'clegg',
'cleggycar',
'clelasticface',
'clelectricman2',
'clelevatoraction',
'clemujs',
'clenchain',
'clendlesswar4',
'clendlesswar5',
'clendlesswar5wow',
'clendlesswar7',
'clenduro',
'clepicbattlefantasy5',
'clescalatingduel',
'clescaperoad-2',
'clescaperoad',
'clet',
'cletrianoddyssey',
'clevilglitch',
'clevolution',
'clexcitebike64',
'clexitpath',
'clexoobservation',
'clexploremodpack',
'clextremerun3d',
'clfactoryballs',
'clfactoryballs2',
'clfactoryballs3',
'clfactoryballs4',
'clfairytalevsonepiece',
'clfallguys',
'clfallout',
'clfamidash',
'clfancypantsadventure',
'clfancypantsadventure2',
'clfancypantsadventure3',
'clfancysnowboarding',
'clfashionbattle',
'clfattygenius',
'clfearstofathomhomealone',
'clfeedus',
'clfeedus2',
'clfeedus3',
'clfeedus4',
'clfeedus5',
'clFF3',
'clff6',
'clffmysticquest',
'clFFsonic1',
'clFFsonic2',
'clFFsonic3',
'clFFsonic4',
'clFFsonic5',
'clFFsonic61',
'clFFsonic62',
'clFIFA07',
'clFIFA10',
'clFIFA11',
'clFIFA2000(1)',
'clfifa2000',
'clFIFA99',
'clFIFAinternationalsoccer',
'clFIFAroadtoworldcup98',
'clFIFAsoccer06',
'clFIFAsoccer95',
'clFIFAsoccer96',
'clFIFAsoccer97',
'clFIFAstreet2',
'clfinalearth2',
'clfinalfantasy',
'clfinalfantasyII',
'clfinalfantasytactics',
'clfinalfantasyVI',
'clfinalfantasyVII',
'clfinalfantasyVIId2',
'clfinalfantasyVIId3',
'clfinalfantasyVIItheothertetrr',
'clfinalninja',
'clfindthealien',
'clfireblob',
'clfireboyandwatergirl',
'clfireboyandwatergirl2',
'clfireboyandwatergirl3',
'clfireboyandwatergirl5',
'clfireboyandwatergirl6',
'clfireemblem',
'clfisheatgettingbig',
'clfisquarium',
'clfivenightsatbaldisredone',
'clfivenightsatshrekshotel',
'clflappybird',
'clflashsonic',
'clfloodrunner',
'clfloodrunner2',
'clfloodrunner4',
'clfluidism',
'clfnac1',
'clfnac2',
'clFNAF',
'clFNAF2',
'clFNAF3',
'clFNAF4',
'clfnaf4halloween',
'clfnafanimatronics',
'clfnafps',
'clfnafsl',
'clfnafucn',
'clfnafworldd',
'clfnaw',
'clfnfagoti',
'clfnfakage',
'clfnfanimation',
'clfnfannie',
'clfnfbelowdepths',
'clfnfbfdi26',
'clfnfblackbetrayal',
'clfnfbside',
'clfnfcamelliarudeblaster',
'clfnfcandycarrier',
'clfnfchara',
'clfnfclassified',
'clfnfcorrosion',
'clfnfcory',
'clfnfcrunchin',
'clfnfdeciever',
'clfnfdesolation',
'clfnfdokitakeoverplus',
'clfnfdropandroll',
'clfnfdustin',
'clfnffleetway',
'clfnffnaf1',
'clfnffnaf2',
'clfnffnaf3',
'clfnfgamebreakerbundle',
'clfnfgoldenapple',
'clfnfhank',
'clfnfheartbreakhavoc',
'clfnfherobrine',
'clfnfhex',
'clfnfholiday',
'clfnfhorkglorpgloop',
'clfnfhotline',
'clfnfhypnoslullaby',
'clfnfimposter3',
'clfnfimposterv4',
'clfnfindiecross',
'clfnfinfernalbout',
'clfnfironlung',
'clfnfmadnesspoop',
'clfnfmariomadnessdside',
'clfnfmarioport',
'clfnfmcmadness',
'clfnfmidfight',
'clfnfmiku',
'clfnfmobmod',
'clfnfneo',
'clfnfpiggyfield',
'clfnfplutoshi',
'clfnfpokepastaperdition',
'clfnfqt',
'clfnfrevmixed',
'clfnfrewrite',
'clfnfselfpaced',
'clfnfshaggy4keys',
'clfnfshaggyxmatt',
'clfnfshucks-v2',
'clfnfshucksv2',
'clfnfsky',
'clfnfsoft',
'clfnfsonicexe',
'clfnfsonicexe4',
'clfnftailsgetstrolled',
'clfnftricky',
'clfnfTWIDDLEFINGER',
'clfnfundertale',
'clfnfvoid',
'clfnfvstabi',
'clfnfwednesday-infedility',
'clfnfwhitty',
'clfnfzardy',
'clfocus',
'clfolderdungeon',
'clfootballbros',
'clfootballlegends',
'clforknsausage',
'clfortzone',
'clfpa4p1',
'clfpa4p2',
'clfreegemas',
'clfreerider',
'clfreerider2',
'clfreerider3',
'clfridaynightfunkin',
'clfromrusttoash',
'clfruitninja',
'clfunnybattle',
'clfunnybattle2',
'clfunnymadracing',
'clfunnyshooter2',
'clfunnyshooter22',
'clfzero',
'clfzerox',
'clgachaverse',
'clgalaga',
'clgameandwatchcollection',
'clgangstabean',
'clgangstabean2',
'clgangsterbros',
'clgarcello',
'clgdlite',
'clgdsubzero',
'clgdwaveover100mb',
'clgeneralchaos',
'clgenericfightermaybe',
'clgeometrydashscratch',
'clgeometryvibes',
'clgeorgeandtheprinter',
'clgetawayshootout',
'clgetontop',
'clGettothetopalthoughthereisnotop',
'clgetyoked',
'clggshinobi',
'clghosttrick',
'clgimmietheairpod',
'clgladdihoppers',
'clglfighters',
'clgloryhunters',
'clglover',
'clgoalsouthafrica',
'clgobble',
'clgoingballs',
'clgolddiggerfrvr',
'clgoldeneye007',
'clgoldensun',
'clgoldensunnds',
'clGoldenSunTheLostAge',
'clgoldminer',
'clgolfbattle',
'clgolforbit',
'clgolfsunday',
'clgoodbigtowertinysquare',
'clgoodbigtowertinysquare2',
'clgoodboygalaxy',
'clgoodmonkeymart',
'clgooglebaseball',
'clgoogledino',
'clgorescriptclassic',
'clgrandactionsimulator-ny',
'clgranddad',
'clgrandtheftautoadvance',
'clgranny',
'clgranny2',
'clgranny22',
'clgranny3',
'clgrannycreepy',
'clgrannyy',
'clgranturismo',
'clgranturismo2',
'clgrassmowing',
'clgravity',
'clgravitymod',
'clgrey-box-testing',
'clgrimacebirthday',
'clgrindcraft',
'clgrn',
'clgrowagarden',
'clgrowdenio',
'clgrowyourgarden',
'clgta',
'clgta2',
'clgta22',
'clgta2alt',
'clgtaalt',
'clgtaalty',
'clgtachina',
'clguesstheiranswer',
'clgun-spin',
'clgunblood',
'clguncho',
'clgunknight',
'clgunmayhem',
'clgunmayhem2',
'clgunmayhem2goof',
'clgunmayhemredux',
'clgunnight',
'clgunsmoke',
'clGXclient',
'clgymstack',
'clhacx',
'clhajimeippo',
'clhalflife',
'clhalocombatdevolved',
'clhandshakes',
'clhandsofwar (1)',
'clhandsofwar(1)',
'clhandsofwar(2)',
'clhandsofwar',
'clhandulum',
'clhanger2',
'clhappyroom',
'clhappywheels',
'clhardwaretycoon',
'clHaroldsbadday',
'clharvestio',
'clharvestmoon',
'clharvestmoon64',
'clhauntedschool',
'clhauntthehouse',
'clheartandsoul',
'clhei$t',
'clhelixjump',
'clhellron',
'clhelpnobrakes',
'clheretic',
'clhero3flyingrobot',
'clhextris',
'clhighstakes',
'clhighwayracer2',
'clhighwaytraffic3d',
'clHil climbRacing2',
'clhillclimbracinglite',
'clHiNoHomo',
'clhipsterkickball',
'clhit8ox',
'clhitsinglereal',
'clhitstunfly',
'clhl2doom',
'clhobo',
'clhobo2',
'clhobo3',
'clhobo4',
'clhobo5',
'clhobo6',
'clhobo7',
'clhobovszombies',
'clholebattle',
'clholeio',
'clhollowknight',
'clhomesheephome',
'clhotwax',
'clhouseofhazards',
'clhoverracerdrive',
'clhumanexpenditureprogram',
'clhungryknight',
'clhungrylamu',
'clhyppersandbox',
'clicantbelievegoogleflaggedmeforthenameofthefilelol',
'clice age baby',
'clicedodo',
'clicefishing',
'clicypurplehead',
'clidlebreakout',
'clidledice',
'clidleidlegamedev',
'clidleminertycoon',
'clidleminorzamnshes12',
'climpossiblequiz (1)',
'climpossiblequiz',
'climpossiblequiz2',
'clinclementemerald',
'clindiantrucksimiulator',
'clinfinitecraft',
'clinkgame',
'clinnkeeper',
'clinsidestory',
'clintellisphere',
'clinteractivebuddy',
'clintoruins',
'clintospace',
'clintospace2',
'clintospace3',
'clintothedeepweb',
'clintrusion',
'cliqball',
'clironsnout',
'clironsoldier',
'clitgetssolonelyhere',
'cliwbtg',
'cljacksmith',
'cljacksmithencryptedorsmthn',
'cljailbreakobbbobob',
'cljefflings',
'cljellydadhero',
'cljellydrift',
'cljellytruck',
'cljellytruckgood',
'cljetforcegemini',
'cljetpackjoyride',
'cljetrush',
'cljetskiracing',
'cljmocraft',
'cljohnnytrigger',
'cljohnnyupgrade',
'cljourneyarcade',
'cljourneydownhill',
'cljsvecx',
'clJUMP',
'cljumpingshell',
'cljustfalllol',
'cljusthitthebutton',
'cljustinclient',
'cljustoneboss',
'clkaizomarioworld',
'clkalikan',
'clkapi',
'clkaratebros',
'clkarlson',
'clkartbros',
'clKenGriffeyJrPresentsMajorLeagueBaseball',
'clkeroseneclient',
'clkillerinstinct',
'clkillover',
'clkilltheiceagebabyadventure',
'clkingdomheartsdays',
'clkingdomheartsrecoded',
'clkingdomheartsrecodedalt',
'clkirby64',
'clkirbyandtheamzingmirror',
'clkirbysadventure',
'clkirbysdreamland',
'clkirbysdreamland3',
'clkirbysoftandwet',
'clkirbysqueaksquad',
'clkirbysuperstar',
'clkirbysuperstarultra',
'clkittencannon',
'clklifur',
'clknifehit',
'clknightmaretower',
'clkonkrio',
'clkoopasrevenge',
'clkourio',
'cllaceysflashgames',
'cllambdaclient',
'cllastfirered',
'cllasthorizon',
'cllaststand',
'cllaststand2',
'clleaderstrike',
'clleapandavoid2',
'cllearntofly',
'cllearntofly2',
'cllearntofly3',
'cllearntoflyidle',
'cllegobatman',
'cllegobatman2superheroes',
'cllegoindianajones',
'cllegoindianajones2',
'cllegoninjago',
'cllegostarwars',
'cllegostarwars2gba',
'cllegostarwarsgba',
'cllemmings',
'clleveldevil',
'clleverwarriors',
'cllightitup',
'cllilrunmo',
'cllinerider',
'cllinktothepast',
'cllittlealchemy2',
'cllittlerunmo',
'cllockthedoor',
'clloderunner',
'cllonewolf',
'cllosangelesshark',
'cllowknight',
'clloz1',
'cllozlinkawakening',
'cllozminishcap',
'cllozoracleofseasons',
'cllozspirittracks',
'clluckyblocks',
'cllummm',
'clmadalinstuntcars',
'clmadalinstuntcarsgood',
'clmadalinstuntcarsmultiplayerfixed',
'clmadden93',
'clmadden94',
'clmadden95',
'clmadden96',
'clmadden99',
'clmaddenfootball',
'clmaddenfootball64',
'clmaddennfl',
'clmaddennfl2000',
'clmaddennfl2001',
'clmaddennfl2002',
'clmaddy98',
'clmadness-retaliation',
'clmadnessaccelerant',
'clmadnesscombatdefense',
'clmadnesscombatnexus',
'clmadnessgemini',
'clmadnesshydraulic',
'clmadnessinteractive',
'clmadnessoffcolor',
'clmadnesspremediation',
'clmadnessretaliation',
'clmadnesss2010',
'clmadnessstand',
'clmadskillsmotocross2',
'clmadstick',
'clmadstuntcars2',
'clmagetoweridle',
'clmagictiles3',
'clmajorasmask',
'clmakesureitsclosed',
'clmanagod',
'clmari0',
'clmario3',
'clmario64webgl',
'clmarioandluigisuperstarsaga',
'clmariocombat',
'clmariogolf',
'clMarioisMissingDoneRight',
'clmariokart64',
'clmariokartds',
'clmariokartsupercircuit',
'clmariolostlevels',
'clmariomadness',
'clmariominusrabbids',
'clmariopaint',
'clmarioparty',
'clmarioparty2',
'clmarioparty3',
'clmariopartyds',
'clmariosmysterymeat',
'clmariotennis',
'clmariovsluigi',
'clMarvelSuperHeroesArcade',
'clMarvelVsCapcomPS1',
'clMarvelVsStreetFighter',
'clmarvelvsstreetfighterjp',
'clmaskedforcesunlimited',
'clmastermindworldconquerer',
'clmatrixrampage',
'clmattv2',
'clmaxpayne',
'clmcfpsfbhd',
'clmcraerally',
'clmeatboy',
'clmeatboyflash',
'clmedalofhonor',
'clmedievalshark',
'clmedievil',
'clmegachess',
'clmegaclient',
'clmegaman',
'clmegaman2',
'clmegaman2gba',
'clmegaman3',
'clmegaman4',
'clmegaman5',
'clmegaman6',
'clmegaman7',
'clmegaman8',
'clmegamanlegends',
'clmegamanlegends2',
'clmegamanx',
'clmegamanx2',
'clmegamanx3',
'clmegamanx4',
'clmegamanzero',
'clmegamanzx',
'clmegaminer',
'clmelonplayground',
'clmeowuwu',
'clmergeroundracers',
'clmetalgear',
'clmetalgearsolid',
'clmetalgearsolidps',
'clmetalslug',
'clmetalslug2',
'clmetalslugadvance',
'clmetalslugmission1',
'clmetalslugmission2',
'clMetalSonicHyperdrive',
'clmetroid',
'clmetroid2',
'clmetroidfusion',
'clmetroidzeromission',
'clmiamishark',
'clmicromages',
'clmightyknight',
'clmightyknight2',
'clmimic',
'clmindscape',
'clminecraft1-8-8',
'clminecraftshooter',
'clmineshooter',
'clminesweeperplus',
'clminhero',
'clminicrossword',
'clminimart',
'clminishooters',
'clminitooth',
'clmiraginewar',
'clmisslecommand',
'clmk4ampedup',
'clmktrilogyps1',
'clmmwilywars',
'clmobcontrolhtml5',
'clmobiusrevolution',
'clmomoscrushers',
'clmoneyrush',
'clmonkeymart',
'clmonkeymartenc',
'clmonsterderby',
'clmonstertracks',
'clmonstertruckportstunt',
'clmortalkombat',
'clmortalkombat2',
'clmortalkombat2a',
'clmortalkombat3',
'clmortalkombat3a',
'clmortalkombata',
'clmortalkombatadvance',
'clmortkom4',
'clmotherload',
'clmotoroadrash',
'clmotox3m2',
'clmotox3m3',
'clmotox3mm',
'clmotox3mpoolparty',
'clmotox3mspookyland',
'clmotox3mwinter',
'clmountainbikeracer',
'clmrracer',
'clmspacman(1)',
'clmspacman',
'clmultitask',
'clmutilate-a-doll',
'clmxoffroadmaster',
'clmyfriendpedro',
'clmyfriendpedroarena',
'clmyteardrop',
'cln',
'clnarc',
'clnaturalselection',
'clNBAhangtime',
'clNBAjam',
'clnbajamTE',
'clnbalive2000',
'clnbalive2003',
'clnblox',
'clneonblaster',
'clneonrider',
'clnesworldchampion',
'clnetattack',
'clneverendinglegacy',
'clnewgroundsrumble',
'clnewsupermariobros',
'clNewSuperMarioWorld2AroundtheWorld',
'clnewyorkshark',
'clnextdoor',
'clnflblitz',
'clnfscarbonowncity',
'clnfsmostwanted',
'clnfsporcheunleashed',
'clnfsunderground',
'clnfsunderground2',
'clngon(1)',
'clngon',
'clnhl2002',
'clnhl98',
'clnhlhitz2003',
'clnickelodeonsuperbrawl2',
'clNicktoonsFreezeFrameFrenzy',
'clnightclubshowdown',
'clnightfire',
'clnightshade',
'clnimrods',
'clninjabrawl',
'clninjaobbyparkor',
'clnintendogslab',
'clnintendoworldcup',
'clnitclient',
'clnitromemustdie',
'clnomoregameasdsadfagfggdfs',
'clnoobminer',
'clnotyourpawn',
'clnovaclient',
'clnplus',
'clnubbysnumberfactory',
'clnullkevin',
'clNutsandBoltsScrewingPuzzle',
'clnzp',
'clobby-99-will-lose',
'clobby1jumpperclick',
'clobbybike',
'clobbyonlyup',
'clobbyslide',
'clobeythegame',
'clocarinaoftime',
'cloddfuture',
'clofflineparadise',
'clomeganuggetclicker',
'clonebitadventure',
'clonenightasfreddy',
'clonepiece',
'clonepiecefighting',
'cloneshotold',
'clonlyup',
'cloperius',
'cloppositeday',
'clopposumcountry',
'clOrangeRoulette',
'clorbofcreation',
'clordinarysonicromhack',
'cloregontrail',
'clormmimastickwithclsoitcanberememberedoyeahclalienhominid',
'closu',
'clourpleguy',
'clovo',
'clovo2',
'clovodimensions',
'clovofixed',
'clpacman',
'clpacmana',
'clpacmansuperfast',
'clpacmanworld3',
'clpacmanworldg',
'clpacmanworldpsx',
'clpapabakeria',
'clpapadonut',
'clpapalouienighthunt2',
'clpapalouiewhenburgersattack',
'clpapalouiewhenpizzasattack',
'clpapalouiewhensundaesattack',
'clpapapizzagood',
'clpapapizzagoody',
'clpapapizzamamamia',
'clpapasburgerIIIAAAAA',
'clpapascheeseria',
'clpapascupcakeria',
'clpapasfreezeria',
'clpapashotdoggeria',
'clpapaspancakeria',
'clpapaspastaria',
'clpapasscooperia',
'clpapassushiria',
'clpapastacomia',
'clpapaswingeria',
'clpaperio',
'clpaperio3d',
'clpaperiomania',
'clpapermario',
'clPaperMarioDSE',
'clpapermariopromode',
'clpapermariottyd',
'clparappatherapper',
'clparappatherapperalt',
'clparkingfury',
'clparkingfury2',
'clparkingfury3',
'clparkingrush',
'clpartnersintime',
'clpeacekeeper',
'clpeggle',
'clpenaltykicks',
'clpenguindiner',
'clpenguinpass',
'clpepsiman',
'clpepsimanalt',
'clpereelous',
'clperfectdark',
'clperfecthotel',
'clpersona',
'clpersona2',
'clpersona2alt',
'clpersonaalt',
'clpetworld',
'clphasma',
'clpheonixjusticeforall',
'clpheonixrightaceattorny',
'clpheonixtrialsandyear',
'clpheonixtrialsandyeartrhfasd',
'clpibbyapocalypse',
'clpiclient',
'clpico8',
'clpico8edu',
'clpicodriller',
'clpicohot',
'clpicolife',
'clpiconightpunkin',
'clpicosschool',
'clpicovsbeardx',
'clpiecesofcake',
'clpikwip',
'clpingpongchaos',
'clpinkbike',
'clpitfall',
'clpitof100trials',
'clpixelbattlegroundsio',
'clpixelclient',
'clpixelcombat2',
'clpixelquestlostidols',
'clpixelshooter',
'clpixelspeedrun',
'clpixelwarfare',
'clpizzapapa',
'clpizzatower',
'clplangman',
'clplantsvszombies',
'clplazmaburst',
'clplinko',
'clplonky',
'clpogo3D',
'clpokeallin',
'clpokebattlefact',
'clpokeblack',
'clpokeblack2',
'clpokeblack2alt',
'clpokeblackalt',
'clpokeblazeblack2redux',
'clpokeblue',
'clpokeclassic',
'clpokecrown',
'clpokecrystaladvanceredux',
'clpokecrystalclear',
'clpokediamond',
'clpokedreamstone',
'clpokeeliteredux',
'clpokeelysiuma',
'clpokeelysiumb',
'clpokeemeraldenhanced',
'clpokeemeraldexceeded',
'clpokeemeraldhorizons',
'clpokeemeraldimperium',
'clpokeemeraldrandom',
'clpokeemeraldrogue',
'clpokeemeraldz',
'clpokefiregold',
'clpokeflora',
'clpokefuseddimension',
'clpokegaia',
'clpokegschronicles',
'clpokeheartgold',
'clpokelightplatinum',
'clpokeliquidcrysta',
'clpokemegamoemon',
'clpokemonamnesia',
'clpokemonclover',
'clpokemoncrystal',
'clpokemonemerald',
'clpokemonemeraldcrest',
'clpokemonemeraldimperium',
'clpokemonemeraldkaizo',
'clpokemonemeraldmini',
'clPokemonemeraldrouge',
'clpokemonemeraldseaglass',
'clpokemonenergizedemerald',
'clpokemonevolvedsfdgsdfs',
'clpokemonfirered',
'clpokemonfireredandleafgreenplusedition',
'clpokemonfireredrandomized',
'clpokemongold',
'clpokemonkaizoironfirered',
'clpokemonlazarus',
'clpokemonleafgreen',
'clpokemonmodernemerald',
'clpokemonmysterydungeon',
'clpokemonquetzal',
'clpokemonroaringred',
'clPokemonrocketedition',
'clpokemonruby',
'clpokemonsapphire',
'clpokemonshinsigma',
'clpokemonsilver',
'clpokemonsnap',
'clpokemonstadium',
'clpokemontowerdefense',
'clpokemonultimatefusion',
'clpokemonunbound',
'clpokemysteryexplorersofsky',
'clpokenameless',
'clpokeodyssey',
'clpokepath',
'clpokepearl',
'clpokeperfectfirered',
'clpokepisces',
'clpokeplatinum',
'clpokeplatinumrandomized',
'clpokerechargedpink',
'clpokerechargedyellow',
'clpokerecordkeepers',
'clpokered',
'clpokerocketedition',
'clpokerowe',
'clpokeruby',
'clpokerunandbun',
'clpokescorchedsilver',
'clpokesoulsilver',
'clpokethepit',
'clPokeThetaEmeraldEX',
'clpoketoomanytypes2',
'clpoketourmaline',
'clpokeultraviolet',
'clpokeunovaemerald',
'clpokevega',
'clpokevoltwhite2redux',
'clpokevoyager',
'clpokewhite',
'clpokewhite2',
'clpokewhite2alt',
'clpokeyellow',
'clPok monstunningsteel',
'clpolicepursuit2',
'clpolishedcrystal',
'clpomgetsinternet',
'clpoorbunny',
'clpopeyepapi',
'clporklike',
'clportal',
'clportal2d',
'clportaldefendersfastbreak',
'clportaldefendersTD',
'clportalflash',
'clporter',
'clpossessquest',
'clpostal',
'clpotatomanseeksthetroof',
'clpou',
'clpowerslave',
'clpraxisfighterx',
'clprebronzeage',
'clprecisionclient',
'clprecivilationbronzeage',
'clprehistoricshark',
'clprimary',
'clprismclient',
'clpuckman',
'clpullfrog',
'clpunchout',
'clpunchthedrump',
'clpunchthetrump',
'clpuppethockey',
'clpuppetmaster',
'clpushyourluck',
'clpuyopuyofever',
'clpvz',
'clpvz2',
'clpvz2gardenless',
'clpyrotoad',
'clqbert',
'clquake2',
'clquake3',
'clquake64',
'clquickieworld',
'clqwop',
'clracemaster3d',
'clracingarena',
'clradicalred',
'clradracer',
'clraftwars',
'clraftwars2',
'clragdoll-io',
'clragdollachivement',
'clragdollarchers',
'clragdolldrop',
'clragdollhit',
'clragdollrunners',
'clragdollsoccer',
'clragollhit',
'clrainbowsix',
'clrainbowsixalt',
'clravenbase',
'clray1',
'clray2',
'clrayman',
'clraze',
'clraze2',
'clraze3',
'clre3',
'clreachthecore',
'clrealflightsim',
'clrebornclient',
'clrebuild',
'clrebuild2',
'clrecoil',
'clredalert',
'clredball',
'clredball2',
'clredball3',
'clredball4(1)',
'clRedBall4',
'clredball4vol2',
'clredball4vol3',
'clredhanded',
'clredtierunner',
'clredvsblue2',
'clredvsbluewar',
'clreignofcentipede',
'clrenegades',
'clresentclient',
'clresidentevil',
'clresidentevil2',
'clresidentevil2d1',
'clresidentevil2d2',
'clresizer',
'clresortempire',
'clretrobowl',
'clretrobowlcollege',
'clretrohighway',
'clretropingpong',
'clreturnman',
'clreturnman2',
'clreturntoriddleschool',
'clrevolutionidle',
'clrhythmheaven',
'clrhythymymheaven',
'clricochetkills2',
'clriddlemiddleschool',
'clriddleschool',
'clriddleschool2',
'clriddleschool3',
'clriddleschool445544444$$444$444',
'clriddletransfer',
'clriddletransfer2',
'clridgeracer',
'clristar',
'clroadfighter',
'clroadoffury',
'clroadofthedead',
'clroadofthedead2',
'clrocketjump',
'clrocketknightadventures',
'clrocketleague',
'clrocketpult',
'clrocketsoccerderby',
'clrodha',
'clroguesoul',
'clroguesoul2',
'clrollerballer',
'clrollingsky',
'clrollyvortex',
'clrolypolymonster',
'clrooftopsnipers',
'clrooftopsnipers2',
'clroomclicker',
'clrotate',
'clrouletteknight',
'clruffle',
'clrun-2',
'clrun',
'clrun2',
'clrun3',
'clrunningfred',
'clrussiancardriver',
'clrussiansandbox',
'clsandboxcity',
'clsandboxels',
'clsandsofthecoliseum',
'clsandtris',
'clsantarun',
'clsanty',
'clsaszombieassault2',
'clsatryn',
'clsaulgoodmanrun',
'clsausageflip',
'clScamptonTheGreatFightRecreate',
'clscarletshift',
'clscarymazegame',
'clscaryteacher3d',
'clscrapmetal3',
'clscrapyarddog',
'clscribblenauts',
'clscubabear',
'clseamongrel',
'clsecretofmana',
'clsega2gg',
'clself',
'clsentryfortress',
'clserenitrove',
'clserioussamadvance',
'clservingupmadness',
'clsfk',
'clsfk2',
'clsfklaststand',
'clsfkleague',
'clshaggy',
'clshc1',
'clshc2',
'clshc3',
'clshift',
'clshift2',
'clshift3',
'clshinmegamitenseidevilsurvivor',
'clshortlife',
'clshotout4',
'clshredmill',
'clshredsauce',
'clshrek-2',
'clshrubnaut',
'clshwultimatem',
'clsideeffects',
'clsidepocket',
'clsierra7',
'clsilenthill',
'clsilenthillalt',
'clsilk',
'clsiloshowdow',
'clSINGLEFILE',
'clsixwaystodie',
'clskateit',
'clskibididibidygyattohiorizzingallovertheplacestillwatermangotheoryfemboydrool',
'clskibidiinthebackrooms',
'clskibidishooter',
'clskong',
'clskyfactory',
'clskyrace-3d',
'clSkyRiders',
'clskywire',
'clskywire2',
'clsliceitall',
'clslideinthewoods',
'clslimelabratory',
'clslipways',
'clslitherio',
'clslope',
'clslope2player',
'clslope3',
'clslopeplus',
'clslotornot',
'clslowroads',
'clsm63redux',
'clsm64hiddenstars',
'clSM64Land',
'clsm64lastimpact',
'clsmadvance2',
'clsmadvance3',
'clsmashkarts',
'clsmashkartsworking',
'clsmashremix',
'clsmbc',
'clsmbcrossover',
'clsmbgameover',
'clsmgds',
'clsnailbob',
'clsnailbob2',
'clsnailbob3',
'clsnailbob4space',
'clsnailbob5lovestory',
'clsnakeis',
'clsnakelike',
'clsnipershot',
'clsniperv2',
'clsnowballio',
'clsnowbrothers',
'clsnowdrift',
'clsnowrid',
'clsnowrideee',
'clsnowrider',
'clsnowridergoodygumdrops',
'clsnowriderrrr',
'clsnowroad',
'clsoccerbros',
'clsoccerrandom',
'clsoccerrandomgood',
'clsolarclient',
'clsolarsandbox',
'clsolarsmash',
'clsolatrobo',
'clsolitaire',
'clsonic1contemporary',
'clSonic1ScoreRush',
'clsonic2pinkedition',
'clSonic2ScoreRush',
'clsonic2timeandplace',
'clsonic3andknuckles',
'clsonic3andsally',
'clsonic3complete',
'clsonic3dblastdx',
'clsonicadvance',
'clsonicadvance2',
'clsonicadvance2sp',
'clsonicadvance3',
'clsonicandashuro',
'clsonicandfallingstar',
'clsonicandknuckles',
'clsonicbattle',
'clsoniccd',
'clsonicclassiccollection',
'clsonicclassicheroes',
'clsoniccolors',
'clsonicdeltaorigins',
'clsoniceexeog',
'clsonicerazor',
'clsonicgg',
'clSonicHellfireSaga',
'clsonicjam',
'clsonicmegamix',
'clsonicr',
'clsonicralt',
'clsonicrevert',
'clsonicrush',
'clsonicrushadventure',
'clsonicscorchedquest',
'clsonicspinball',
'clsonicthehedgehog',
'clsonicthehedgehog2',
'clsonicthehedgehog3',
'clsonny2',
'clsotn',
'clsouljumper',
'clspacebarclicker',
'clspacecompany',
'clspaceinvaders',
'clspaceiskey',
'clspaceiskey2',
'clspaceiskeyxmas',
'clspacewarsbattleground',
'clspacewaves',
'clspeedperclick',
'clspeedstars',
'clspelunky',
'clspewer',
'clspiralroll',
'clSpongebobPowerKartGrandPrix',
'clsprunked',
'clsprunki',
'clsprunkiclicker',
'clsquidplayground',
'clSSF2Arcade',
'clSSF2TArcade',
'clstackballio',
'clstacktris',
'clstackydash',
'clstarfox',
'clstarfox64',
'clstarlike',
'clstarraiders',
'clstateio',
'clstation141',
'clstationmeltdown',
'clstationsaturn',
'clsteakandjake',
'clstealbrainrot',
'clstealbrainrotonline',
'clstealthassassin',
'clstealthmaster',
'clsteelempire',
'clsteelsurge',
'clstickarchersbattle',
'clstickdefenders',
'clstickfighter',
'clstickjetchallenge',
'clstickmanandguns',
'clstickmanclash',
'clstickmanduel',
'clstickmangtacity',
'clstickmanhook',
'clStickmanKingdomclash',
'clstickmankombat2d',
'clstickmanstealingdiamond',
'clstickmerge',
'clstickminairship',
'clstickminbreakingbank',
'clstickminescapingprison',
'clstickminfleecomplex',
'clstickrpgcomplete',
'clstickslasher',
'clstickwar',
'clstickwar2',
'clstormthehouse',
'clstormthehouse2',
'clstormthehouse3',
'clstrangejournet',
'clstreangeropepolice',
'clStreetFighter1Arcade',
'clstreetfighter2',
'clStreetFighter2Arcade',
'clStreetFighter2CEArcade',
'clStreetFighter2HFArcade',
'clstreetfighter2turbo',
'clstreetfighteralpha3',
'clstreetfighterumuhsomething',
'clstreetofrage',
'clstreetofrage2',
'clstreetofrage3',
'clstrikeforceheroes',
'clstrikeforceheroes2',
'clstrikeforceheroes3',
'clstrikerdummies',
'clstylesavvy',
'clsubwaysurfersbarcelona',
'clsubwaysurfersbeijing',
'clsubwaysurfersberlin',
'clsubwaysurfersbuenosaires',
'clsubwaysurfershavana',
'clsubwaysurfershouston',
'clsubwaysurfersiceland',
'clsubwaysurferslondon',
'clsubwaysurfersmexico',
'clsubwaysurfersmiami',
'clsubwaysurfersmonaco',
'clsubwaysurfersneworeleans',
'clsubwaysurfersneworleans',
'clsubwaysurferssanfrancisco (1)',
'clsubwaysurferssanfrancisco(1)',
'clsubwaysurferssanfrancisco',
'clsubwaysurfersstpetersburg',
'clsubwaysurferswinterholiday',
'clsubwaysurferszurich',
'clsugarsugar',
'clsuika',
'clsuikapico',
'clsunandmoon',
'clsuperbomberman',
'clsuperbomberman2',
'clsuperbomberman3',
'clsuperbomberman4',
'clsuperbomberman5',
'clsuperc',
'clsupercarrush',
'clsupercastlevaniaVI',
'clsuperchibiknight',
'clsupercold',
'clsuperdarkdeception',
'clsuperdiagonalmario2',
'clsuperfallingfred',
'clsuperfighters',
'clsuperhot',
'clsuperhotlinemiami',
'clsuperhouseofdeadninjas',
'clsuperislandadventure',
'clsuperkidadventure',
'clsuperliquidsoccer',
'clsupermario',
'clsupermario63',
'clsupermario64',
'clsupermario64ds',
'clsupermarioallstars',
'clsupermariobros',
'clsupermariobros2',
'clsupermariobros2us',
'clsupermariobros3',
'clsupermariobros3real',
'clsupermariokart',
'clsupermarioland',
'clsupermarioland2',
'clsupermariomon',
'clsupermariorpg',
'clsupermarioworld',
'clsupermarioworld2',
'clSuperMarioWorldThe SecretOfThe7GoldenStatues',
'clsupermetroid',
'clsupermonkeyballjr',
'clsupernoahsark3D',
'clsuperoliverworld',
'clsuperpickleballadventure',
'clsuperpunchout',
'clsuperpuzzlefighter2turbo',
'clsuperpuzzlefighter2turboalt',
'clsuperscribblenauts',
'clsupersmashbros',
'clsupersmashflash',
'clsupersmashflash08',
'clsupersmashflash2',
'clsupersmashflash2butdifversion',
'clsupertiltbros',
'clsupitdept',
'clsupremeduelist',
'clsurvevio',
'clsurvivalracev2',
'clsushicat',
'clsushicat2',
'clsushiunroll',
'clswerve',
'clswitchblade',
'clswordandshieldultimateplus',
'clswordfight',
'clswordplay',
'clswordsandsandals',
'clswordsandsandals2',
'clswordsandsouls',
'clsydneyshark',
'cltabletanks',
'cltabletennisworldtour',
'cltag-',
'cltagc3',
'clTaikonoTatsujin',
'cltaisei',
'cltakeover',
'cltallio',
'cltallmanrun',
'cltankmayhem',
'cltankpixel',
'cltanukisunset',
'cltanukisunsetuhhhhhhhh',
'cltapper',
'cltaproad',
'cltastyplanet',
'cltboilambeternal',
'cltecmobowl',
'cltelephonetrouble',
'cltelocation',
'cltempest2000',
'cltempleofboom',
'cltemplerun2',
'cltempoverdose',
'clteod',
'clterra',
'clterritorialio',
'clterritorywar',
'cltetris',
'cltetrisattack',
'cltetrisgba',
'cltetrisgrandmaster2',
'clthanksforremindingmeihadtofixthis',
'cltheclassroom',
'cltheclassroom2',
'cltheclassroom3',
'clthedeadseat',
'clthedeepestsleep',
'clthedude',
'cltheenchantedcave2',
'cltheimpossiblegame',
'cltheincrediblemachine',
'clthelaststand',
'clthelaststandunioncity (1)',
'clthelaststandunioncity',
'clthemaninthewindow',
'clthemepark',
'clthepit',
'clthereisnofile',
'clthermomorph',
'clthesodorrace',
'cltheyarecoming',
'clthisistheonlylevel',
'clthisistheonlylevel2',
'clthisistheonlyleveltoo',
'clthreegoblets',
'clthrowapotato',
'clthrowapotatoagain',
'clthwack',
'cltiberiandawn',
'cltimeshooter2',
'cltimeshooter3',
'cltimewarriors',
'cltinyfishing',
'cltmnt',
'cltoastarling',
'cltoasterball',
'cltombofthemass',
'cltommorowandyesterday',
'cltomodachicollection',
'cltonyhawkskater2',
'cltonyhawkskater4',
'cltonyhawksunderground',
'cltoomanytypes',
'cltopspeedracing3d',
'cltosstheturtle',
'cltotm',
'cltouhou',
'cltouhou2',
'cltouhou3',
'cltouhou4',
'cltouhou5',
'cltowerblocks',
'cltowercrash3d',
'cltowerwizard',
'cltownscraper',
'cltrace',
'cltrafficjam3d',
'cltralalerotralalaescapetungtungtungsahur',
'cltrapthecat',
'cltrechoroustrials',
'cltrechoroustrialspart2',
'cltriachnid',
'cltripleplay2000',
'cltriviacrack',
'cltrollfacequest1',
'cltrollfacequest10',
'cltrollfacequest11',
'cltrollfacequest12',
'cltrollfacequest13',
'cltrollfacequest2',
'cltrollfacequest3',
'cltrollfacequest4',
'cltrollfacequest5',
'cltrollfacequest6',
'cltrollfacequest7',
'cltrollfacequest8',
'cltrollfacequest9',
'cltrucksim',
'cltubejumpers',
'cltungtungtungsahurobby',
'cltunnelrush',
'cltunnelrushbetter',
'clturbostars',
'clturokdinosaurhunter',
'cltwinshot (1)',
'cltwinshot(1)',
'cltwinshot',
'cltwistedmetal',
'cltwistedmetal2',
'cltwoball3d',
'clucds',
'cluckyblockobbyEUOPHRATESRIVER',
'clufoswampoddysey',
'clultimateassassian2',
'clultimateassassian3',
'clUltimatecardrivingsimulator',
'clultimatemortalkombat',
'clultimatemortalkombat3',
'clultrakill',
'clumjammerlammy',
'clumstickmangameidkiforgor',
'cluncannycatgolf',
'clunderneath',
'clundertaler',
'clundertaleyellow',
'clunfairmario',
'clunfairmarioworkquestionmark',
'clunfairundyne',
'clunicyclehero',
'clunitresdreams',
'cluno',
'clunonomercy',
'cluntime',
'clupgradecomplete',
'clupgradecomplete2',
'clupslash',
'cluwuclient',
'clUZG',
'clvampiresurvivors',
'clvanguard',
'clvaportrails',
'clvex',
'clvex2',
'clvex3',
'clvex3xmas',
'clvex4',
'clvex5',
'clvex6',
'clvex7',
'clvex8',
'clvexchallenges',
'clvexx3m',
'clvexx3m2',
'clvillager',
'clvincentmansionofthedead',
'clvisitor',
'clvolleyrandom',
'clvollyballchallenge',
'clvortex',
'clvsnonsense',
'clvvvvvv',
'clwaluigitacostand',
'clwarfare1944',
'clwarioland4',
'clwariowarediy',
'clwariowareinc',
'clwartheknight',
'clwaterpoolio',
'clwavedash',
'clwaverace64',
'clwaverun',
'clwebecomewhatwebehold',
'clwebfishing',
'clweltling',
'clwermhole',
'clwhackthetheif',
'clwhackyourboss',
'clwhackyourcomputer',
'clwheeliebike',
'clwheely',
'clwheely2',
'clwheely3',
'clwheely4',
'clwheely5',
'clwheely6',
'clwheely7',
'clwheely8',
'clwindowsdoors',
'clwinterfalling',
'clwipeout2097',
'clwipeout2097alt',
'clwitchcrafttd',
'clwolfenstein',
'clwolfenstein3d',
'clwoodworm',
'clwordle',
'clworldcup98',
'clworldshardestgame',
'clworldshardestgame2',
'clworldshardestgame3',
'clworldshardestgame4',
'clwrassling',
'clwrestlebros',
'clwurstclient',
'clXevious',
'clXMenChildrenOfTheAtomArcade',
'clXMenVSStreetFighter',
'clyanderesimulator',
'clyarsrevenge',
'clyellow',
'clyohohoio',
'clYoshisStrangeQuest',
'clyouarelucky',
'clyouvs100skibidi(1)',
'clyouvs100skibidi',
'clyumenikki',
'clzdoom',
'clzelda2thelegendoflink',
'clzeldaminishcap',
'clzenword',
'clZetaclient',
'clzoinkz',
'clzombieexploder',
'clzombieroad',
'clzombierush',
'clzombiesatemyneighboors',
'clzombopaclypse2',
'clzombotron',
'clzombotron2',
'clzombotronreboot',
'clzrist',
'clzuma',
'clzumashooter',
'cl oo',
'cl?',
'clEaglercraft-Beta-13-Offline',
'clEaglercraft-Indev-Offline (1)',
'clEaglercraft-Indev-Offline',
'clEaglercraftL_19_v0_7_0_Offline_Signed',
'clEaglercraftX-188',
'clEaglercraftZ_1112',
'clHelios-Offline (1)',
'clmarbleracer',
'clmariobuilder64',
'clMinceraft-I-NotMine_V6',
'clmortalkombat4',
'clNautilusOS',
'clpolytrackbutnotflagged',
'clrocketknight2',
'clsandstone',
'clsdf',
'clsnowbros',
'clsuperdromebugs',
'clTuff_Client_Offline_WASM',
'clundertale-gameboy',
'clvvvvvv',
'clwilywars',
    ];

const extensions = [
        {
            id: 'gnmath',
            name: 'GN-Math',
            description: 'GN-Math has lots of games, especially ports of real games.',
            image: 'https://lh3.googleusercontent.com/Mxl8996vzcWWRU5RyKdTDA76GEPj9jQpuYc02nPgtwKgdqpWidM5YVqu8DHBd-D1sZ3sP1AOYB-DlNhMEpaLJxQcTQ=s128-rj-sc0x00ffffff',
            launch: () => openGNMath()
        },
        {
            id: 'testing',
            name: 'Testing Extension',
            description: 'IN DEVELOPMENT DONT USE',
            launch: () => openTestingExtension()
        }
    ];

const TASKBAR_TARGET_KEY = 'horion_taskbar_gnmath_target';
    const defaultTaskbarTarget = 'gnmath';
    let taskbarTarget = localStorage.getItem(TASKBAR_TARGET_KEY) || defaultTaskbarTarget;

// ==========================================
    // 2. FAVORITES LOGIC (LOCAL STORAGE)
    // ==========================================
    let favorites = JSON.parse(localStorage.getItem('horion_favorites')) || [];

function saveFavorites() {
        localStorage.setItem('horion_favorites', JSON.stringify(favorites));
        checkFavoritesVisibility();
        updateFavoritesView(); // Refresh the fav tab if open
    }

function isFavorite(id) {
        return favorites.some(f => f.id === id);
    }

function getTaskbarTargetExtension() {
        if (!taskbarTarget) return null;
        const extension = extensions.find(ext => ext.id === taskbarTarget);
        return extension || null;
    }

function setTaskbarTarget(extensionId) {
        if (!extensions.some(ext => ext.id === extensionId)) return;
        taskbarTarget = taskbarTarget === extensionId ? null : extensionId;
        saveTaskbarTarget();
    }

function renderTaskbarPins() {
        const pinContainer = document.getElementById('taskbar-pins');
        if (!pinContainer) return;

pinContainer.innerHTML = '';

const extension = getTaskbarTargetExtension();
        if (!extension) return;

const btn = document.createElement('span');
        btn.id = 'btn-gnmath';
        btn.className = 'nav-item pinned-app-btn';
        btn.innerText = 'GN-MATH';
        btn.onclick = () => extension.launch();
        pinContainer.appendChild(btn);
    }

function setGamesTaskbarHighlight(buttonId) {
        document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
        const targetBtn = document.getElementById(buttonId);
        if (targetBtn) targetBtn.classList.add('active');
    }

function generateExtensionsView() {
        const container = document.getElementById('extensions-grid');
        if (!container) return;
        container.innerHTML = '';

extensions.forEach(extension => {
            const card = document.createElement('div');
            card.className = 'extension-banner';

const image = document.createElement('img');
            image.className = 'extension-banner-image';
            image.src = extension.image;
            image.alt = extension.name;
            image.onerror = function() {
                this.src = 'https://placehold.co/1200x500/000000/0070FF?text=No+Image';
            };

const content = document.createElement('div');
            content.className = 'extension-banner-content';

const title = document.createElement('h3');
            title.className = 'extension-banner-title';
            title.innerText = extension.name;

const description = document.createElement('p');
            description.className = 'extension-banner-desc';
            description.innerText = extension.description;

const actions = document.createElement('div');
            actions.className = 'extension-banner-actions';

const launchButton = document.createElement('button');
            launchButton.className = 'extension-action-btn';
            launchButton.innerText = 'LAUNCH';
            launchButton.onclick = () => extension.launch();

const pinButton = document.createElement('button');
            pinButton.className = 'extension-action-btn secondary';
            pinButton.dataset.pinId = extension.id;
            pinButton.onclick = () => setTaskbarTarget(extension.id);

actions.appendChild(launchButton);
            actions.appendChild(pinButton);
            content.appendChild(title);
            content.appendChild(description);
            content.appendChild(actions);
            card.appendChild(image);
            card.appendChild(content);
            container.appendChild(card);
        });

updateExtensionPinButtons();
    }

const viewTitleMap = {
            home: 'Horion',
            featured: 'Horion - Featured',
            database: 'Horion - Database',
            favorites: 'Horion - Favorites',
            extensions: 'Horion - Extensions',
            more: 'Horion - More'
        };
        document.title = viewTitleMap[viewName] || 'Horion';

if (shouldNotifyParent) {
            try {
                if (window.parent && window.parent !== window && typeof window.parent.onGamesViewChange === 'function') {
                    window.parent.onGamesViewChange(viewName);
                }
            } catch (err) {
                // Ignore parent messaging errors.
            }
        }
    }

// ==========================================
    // 4. GENERATION LOGIC
    // ==========================================
    // Global state to track sort order
    let isAscending = true;

function toggleSort() {
        isAscending = !isAscending; // Flip the state
        generateFeaturedGrid();     // Re-run the generation
    }

function generateFeaturedGrid() {
        const container = document.getElementById('featured-grid');
        const sortBtn = document.getElementById('sort-btn');
        
        container.innerHTML = '';

if (sortBtn) {
            sortBtn.innerText = isAscending ? "Sort: A-Z" : "Sort: Z-A";
        }

const sortedGames = [...featuredGames].sort((a, b) => {
            return isAscending 
                ? a.displayname.localeCompare(b.displayname) 
                : b.displayname.localeCompare(a.displayname);
        });

sortedGames.forEach(game => {
            const card = createGameCard(game);
            container.appendChild(card);
        });
    }

// Add this new routing function right here
    function handleGameClick(game) {
        if (game.type === 'special') {
            const isSkribbl = String(game.filename || '').toLowerCase().includes('skribbl.io');
            if (isSkribbl) {
                openSkribblLobbyPopup(game.filename, game.displayname);
            } else {
                openSpecial(game.filename, game.displayname);
            }
        } else {
            openGame(game.filename); 
        }
    }
    // Update your existing createGameCard function
    function createGameCard(game) {
        // Create Card Wrapper
        const card = document.createElement('div');
        card.className = 'game-card';
        card.dataset.name = game.displayname.toLowerCase();
        
        // UPDATE: Point the click event to our new routing function
        card.onclick = () => handleGameClick(game);

// SVG Heart Icon
        const star = document.createElement('div');
        star.className = 'fav-star-featured';
        // Using an SVG path that matches the image shape (rounded top, pointed bottom)
        star.innerHTML = `<svg viewBox="0 0 24 24" width="100%" height="100%" overflow="visible">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
        </svg>`;
        
        star.dataset.id = game.filename;
        if(isFavorite(game.filename)) star.classList.add('active');
        star.onclick = (e) => toggleFavorite(game.filename, 'featured', e);

// Create Image
        const img = document.createElement('img');
        img.src = game.image;
        img.alt = game.displayname;
        img.onerror = function() { 
            this.src = 'https://placehold.co/400x400/000000/0070FF?text=No+Image'; 
        };

// Create Overlay
        const overlay = document.createElement('div');
        overlay.className = 'card-overlay';
        
        const title = document.createElement('div');
        title.className = 'game-title';
        title.innerText = game.displayname;

if (game.type === 'special') {
            const webBadge = document.createElement('div');
            webBadge.className = 'special-web-badge';
            webBadge.innerText = 'W';
            card.appendChild(webBadge);
        }

// Assemble
        card.appendChild(star);
        overlay.appendChild(title);
        card.appendChild(img);
        card.appendChild(overlay);
        
        return card;
    }

function generateDatabaseList() {
        const container = document.getElementById('sections-container');
        const buttonsWrapper = document.createElement('div');
        buttonsWrapper.className = 'buttons-container';
        
        databaseFiles.forEach(f => {
            const el = createDatabaseElement(f);
            buttonsWrapper.appendChild(el);
        });
        container.appendChild(buttonsWrapper);
    }

function createDatabaseElement(filename) {
        const displayName = filename.startsWith('cl') ? filename.slice(2) : filename;
        
        const wrapper = document.createElement('div');
        wrapper.className = 'db-item-wrapper';

const btn = document.createElement('input');
        btn.type = 'button';
        btn.className = 'db-btn';
        btn.value = displayName;
        btn.dataset.filename = filename; // for search
        btn.onclick = () => openGame(filename);
        
        const star = document.createElement('div');
        star.className = 'fav-star-db';
        star.innerHTML = `<svg viewBox="0 0 24 24" width="100%" height="100%" overflow="visible">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
        </svg>`;
        star.dataset.id = filename;
        if(isFavorite(filename)) star.classList.add('active');
        star.onclick = (e) => toggleFavorite(filename, 'database', e);

wrapper.appendChild(btn);
        wrapper.appendChild(star);
        return wrapper;
    }

function updateFavoritesView() {
        const featContainer = document.getElementById('favorites-featured-grid');
        const dbContainer = document.getElementById('favorites-database-list');
        
        featContainer.innerHTML = '';
        dbContainer.innerHTML = '';
        
        if(favorites.length === 0) {
            featContainer.innerHTML = '<p style="color:#666; width:100%;">No favorites yet.</p>';
            return;
        }

// Render Featured Favorites
        const favFeatured = favorites.filter(f => f.type === 'featured');
        if(favFeatured.length > 0) {
            favFeatured.forEach(fav => {
                // Find game data
                const gameData = featuredGames.find(g => g.filename === fav.id);
                if(gameData) {
                    const card = createGameCard(gameData);
                    featContainer.appendChild(card);
                }
            });
        } else {
             featContainer.innerHTML = '<p style="color:#444; font-size:0.8rem;">No featured games favorited.</p>';
        }

// Render Database Favorites
        const favDb = favorites.filter(f => f.type === 'database');
        if(favDb.length > 0) {
            favDb.forEach(fav => {
                const el = createDatabaseElement(fav.id);
                dbContainer.appendChild(el);
            });
        } else {
             dbContainer.innerHTML = '<p style="color:#444; font-size:0.8rem; grid-column: 1 / -1;">No database entries favorited.</p>';
        }
    }

const sanitizedHtml = String(html)
            .replace(/<meta[^>]*http-equiv=["']content-security-policy["'][^>]*>/gi, '')
            .replace(/<meta[^>]*http-equiv=["']x-content-security-policy["'][^>]*>/gi, '')
            .replace(/<base[^>]*>/gi, '');

const isSpecialHref = function (href) {
        if (!href) return true;
        const lower = String(href).trim().toLowerCase();
        return (
            lower.startsWith('#') ||
            lower.startsWith('javascript:') ||
            lower.startsWith('mailto:') ||
            lower.startsWith('tel:')
        );
    };

const navigateInsideAboutBlank = function (url) {
        if (!url || typeof window.__horionNavigate !== 'function') return;
        window.__horionNavigate(url);
    };

const forceSameTabTargets = function () {
        document.querySelectorAll('a[target], form[target]').forEach(function (node) {
            node.setAttribute('target', '_self');
        });
    };

const originalOpen = window.open;
    window.open = function (url) {
        const resolved = toAbsoluteUrl(url || '');
        if (resolved) {
            navigateInsideAboutBlank(resolved);
            return window;
        }
        return originalOpen ? originalOpen.apply(window, arguments) : window;
    };

patchLocationMethod('assign');
    patchLocationMethod('replace');

document.addEventListener('click', function (event) {
        const target = event.target && event.target.closest ? event.target.closest('a[href], button[data-href], [data-href]') : null;
        if (!target) return;

const href = target.getAttribute('href') || target.getAttribute('data-href');
        if (isSpecialHref(href)) return;

const resolved = toAbsoluteUrl(href);
        if (!resolved) return;

event.preventDefault();
        navigateInsideAboutBlank(resolved);
    }, true);

document.addEventListener('submit', function (event) {
        const form = event.target;
        if (!form || !form.getAttribute) return;

const method = (form.getAttribute('method') || 'get').toLowerCase();
        const action = form.getAttribute('action') || window.location.href;
        const resolvedAction = toAbsoluteUrl(action);
        if (!resolvedAction) return;

if (method === 'get') {
            event.preventDefault();
            const formData = new FormData(form);
            const params = new URLSearchParams(formData);
            const nextUrl = new URL(resolvedAction);
            params.forEach(function (value, key) {
                nextUrl.searchParams.set(key, value);
            });
            navigateInsideAboutBlank(nextUrl.href);
        }
    }, true);

forceSameTabTargets();
    const observer = new MutationObserver(forceSameTabTargets);
    observer.observe(document.documentElement, { childList: true, subtree: true });
})();
<\/script>`;

if (/<head[^>]*>/i.test(sanitizedHtml)) {
        return sanitizedHtml.replace(/<head[^>]*>/i, function (match) {
            return match + baseTag + navigationGuard;
        });
    }

return baseTag + navigationGuard + sanitizedHtml;
}

function launchSite(targetUrl, pageTitle) {
    const normalizedUrl = String(targetUrl || '').trim();
    if (!normalizedUrl) {
        return false;
    }
    const safeTitle = String(pageTitle || 'Horion Game')
        .replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
        .replace(/"/g, '"');

let hostname = '';
    try {
        hostname = new URL(normalizedUrl).hostname.toLowerCase();
    } catch (error) {
        hostname = '';
    }

// Some canvas-heavy games (like diep.io) freeze inside our sandboxed iframe.
    const shouldOpenDirect = hostname === 'diep.io' || hostname.endsWith('.diep.io');

// 1. Open the new window
    const win = window.open('about:blank', '_blank');
    
    if (!win) {
        alert("Popup blocked! Please allow popups for this site.");
        return false;
    }

if (shouldOpenDirect) {
        win.location.replace(normalizedUrl);
        return true;
    }

// 2. Define the content to inject
    const htmlContent = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>${safeTitle}</title>
            <base target="_self">
            <style>
                body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
                iframe { border: none; width: 100%; height: 100%; }
            </style>
        </head>
        <body>
            <iframe 
                src="${normalizedUrl}" 
                allow="autoplay; fullscreen; xr-spatial-tracking; encrypted-media; clipboard-read; clipboard-write; display-capture"
                allowfullscreen
            ></iframe>
        </body>
        </html>
    `;

// 3. Write to the new window
    win.document.open();
    win.document.write(htmlContent);
    win.document.close();
    
    return true;
}

function openInlinePage(targetUrl, titleText) {
    const normalizedUrl = String(targetUrl || '').trim();
    if (!normalizedUrl) return false;

const existing = document.getElementById('horion-inline-page');
    if (existing) existing.remove();

const host = document.createElement('section');
    host.id = 'horion-inline-page';
    host.style.position = 'fixed';
    host.style.left = '0';
    host.style.right = '0';
    host.style.bottom = '0';
    host.style.zIndex = '9990';
    host.style.background = '#000';
    host.style.borderTop = '1px solid rgba(0, 112, 255, 0.25)';

host.innerHTML = `
        <iframe
            id="horion-inline-host-frame"
            src="about:blank"
            allow="autoplay; fullscreen; xr-spatial-tracking; encrypted-media; clipboard-read; clipboard-write; display-capture"
            allowfullscreen
            style="border:none;width:100%;height:100%;background:#000;"
        ></iframe>
    `;

const applyOffset = function () {
        const nav = document.querySelector('.hud-nav');
        const top = nav ? Math.max(0, Math.round(nav.getBoundingClientRect().bottom)) : 0;
        host.style.top = top + 'px';
    };

const closeInlineView = function () {
        window.removeEventListener('resize', applyOffset);
        document.removeEventListener('keydown', onKeydown);
        host.remove();
    };

const onKeydown = function (event) {
        if (event.key === 'Escape') closeInlineView();
    };

applyOffset();
    window.addEventListener('resize', applyOffset);
    document.addEventListener('keydown', onKeydown);

return true;
}

// Ensure these functions use the correct variable names
function openTestingExtension() {
    setGamesTaskbarHighlight('btn-gnmath');
    openInlinePage('https://gn-math.dev/', 'GN-Math');
}

function openSkribblLobbyPopup(defaultUrl, titleText) {
        const safeDefault = String(defaultUrl || 'https://skribbl.io/').trim() || 'https://skribbl.io/';
    const safeTitle = String(titleText || 'skribbl.io');
        const existingOverlay = document.getElementById('skribbl-lobby-overlay');
        if (existingOverlay) existingOverlay.remove();

const overlay = document.createElement('div');
        overlay.id = 'skribbl-lobby-overlay';
        overlay.style.position = 'fixed';
        overlay.style.inset = '0';
        overlay.style.background = 'rgba(0, 0, 0, 0.78)';
        overlay.style.backdropFilter = 'blur(4px)';
        overlay.style.zIndex = '99999';
        overlay.style.display = 'flex';
        overlay.style.alignItems = 'center';
        overlay.style.justifyContent = 'center';
        overlay.style.padding = '16px';

overlay.innerHTML = `
            <div id="skribbl-lobby-panel" style="width:min(460px,100%);border:1px solid rgba(80,180,255,0.35);background:rgba(8,20,34,0.95);border-radius:12px;padding:16px;box-shadow:0 0 24px rgba(0,149,255,0.2);font-family:Inter,sans-serif;color:#eaf6ff;">
                <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;">
                    <h2 style="margin:0;font-size:1.05rem;letter-spacing:0.04em;">skribbl.io Lobby Options</h2>
                    <button id="skribbl-close-btn" type="button" style="border:1px solid rgba(120,160,190,0.5);border-radius:8px;background:rgba(5,10,16,0.8);color:#d6ecff;width:34px;height:34px;cursor:pointer;font-size:1rem;line-height:1;">x</button>
                </div>
                <p style="margin:0 0 14px;font-size:0.85rem;color:#9dc3dc;line-height:1.5;">Create a new lobby, or paste a lobby invite link with a join code.</p>
                <button id="skribbl-create-btn" type="button" style="width:100%;border:1px solid rgba(78,208,255,0.55);border-radius:10px;background:linear-gradient(135deg,rgba(0,123,255,0.28),rgba(0,218,255,0.16));color:#e8fbff;padding:11px 12px;font-weight:700;cursor:pointer;margin-bottom:12px;">Create Lobby</button>
                <div style="height:1px;background:rgba(160,208,235,0.22);margin:10px 0 12px;"></div>
                <label for="skribbl-join-link" style="display:block;margin-bottom:6px;font-size:0.78rem;color:#9fc4db;letter-spacing:0.04em;">Join Lobby Link</label>
                <input id="skribbl-join-link" type="url" placeholder="https://skribbl.io/?abcd1234" autocomplete="off" style="width:100%;box-sizing:border-box;padding:10px;border-radius:10px;border:1px solid rgba(128,174,202,0.45);background:rgba(0,0,0,0.34);color:#eef8ff;outline:none;margin-bottom:10px;" />
                <button id="skribbl-continue-btn" type="button" disabled style="width:100%;border-radius:10px;padding:11px 12px;font-weight:700;margin-bottom:0;opacity:0.5;cursor:not-allowed;border:1px solid rgba(121,121,121,0.45);background:rgba(80,80,80,0.28);color:#e8fbff;">Continue to Lobby</button>
                <div style="margin-top:8px;font-size:0.75rem;color:#7ea3bb;">Example: https://skribbl.io/?roomCode</div>
            </div>
        `;

const normalizeJoinLink = function (value) {
            try {
                const url = new URL(String(value || '').trim());
                const host = url.hostname.toLowerCase();
                if (!(host === 'skribbl.io' || host.endsWith('.skribbl.io'))) return null;

const hasCode =
                    (url.search && url.search.length > 1) ||
                    (url.hash && url.hash.length > 1) ||
                    (url.pathname && url.pathname !== '/' && url.pathname.replace(/\//g, '').length > 0);

return hasCode ? url.toString() : null;
            } catch (err) {
                return null;
            }
        };

document.body.appendChild(overlay);

const panel = document.getElementById('skribbl-lobby-panel');
        const closeBtn = document.getElementById('skribbl-close-btn');
        const createBtn = document.getElementById('skribbl-create-btn');
        const continueBtn = document.getElementById('skribbl-continue-btn');
        const joinInput = document.getElementById('skribbl-join-link');

const closeModal = function () {
            document.removeEventListener('keydown', keyHandler);
            overlay.remove();
        };

const keyHandler = function (event) {
            if (event.key === 'Escape') closeModal();
            if (event.key === 'Enter' && document.activeElement === joinInput && !continueBtn.disabled) {
                event.preventDefault();
                continueBtn.click();
            }
        };

closeBtn.addEventListener('click', closeModal);
        createBtn.addEventListener('click', function () {
            closeModal();
            launchSite(safeDefault, safeTitle);
        });
        continueBtn.addEventListener('click', function () {
            const target = continueBtn.dataset.targetUrl;
            if (!target) return;
            closeModal();
            launchSite(target, safeTitle);
        });
        joinInput.addEventListener('input', refreshContinueState);
        overlay.addEventListener('click', function (event) {
            if (event.target === overlay) closeModal();
        });
        panel.addEventListener('click', function (event) {
            event.stopPropagation();
        });
        document.addEventListener('keydown', keyHandler);

refreshContinueState();
        joinInput.focus();
}

function openSpecial(gamelink, gameTitle) {
    const rawLink = String(gamelink || '').trim();
    if (!rawLink) return;

if (/^https?:\/\//i.test(rawLink)) {
        launchSite(rawLink, gameTitle);
        return;
    }

for (const base of baseCandidates) {
        if (!base || /^about:/i.test(base)) continue;
        try {
            const absoluteLink = new URL(rawLink, base).href;
            launchSite(absoluteLink, gameTitle);
            return;
        } catch (err) {
            // Try next base candidate.
        }
    }

alert('Unable to resolve web game path: ' + rawLink);
}

// ==========================================
    // 5. PARTICLE SYSTEM
    // ==========================================
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
    let particles = [];
    const mouse = { x: null, y: null, radius: 100 };
    window.addEventListener('mousemove', (e) => { mouse.x = e.x; mouse.y = e.y; });

class Particle {
        constructor(x, y) {
            this.x = x; this.y = y; this.baseX = x; this.baseY = y;
            this.size = 1.5; this.density = (Math.random() * 20) + 2;
        }
        draw() {
            ctx.fillStyle = 'rgba(0, 229, 255, 0.8)';
            ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
        }
        update() {
            let dx = mouse.x - this.x; let dy = mouse.y - this.y;
            let distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < mouse.radius) {
                const force = (mouse.radius - distance) / mouse.radius;
                const directionX = (dx / distance) * force * this.density;
                const directionY = (dy / distance) * force * this.density;
                this.x -= directionX; this.y -= directionY;
            } else {
                if (this.x !== this.baseX) this.x -= (this.x - this.baseX) / 10;
                if (this.y !== this.baseY) this.y -= (this.y - this.baseY) / 10;
            }
        }
    }

function initParticles() {
        canvas.width = window.innerWidth; canvas.height = window.innerHeight;
        particles = [];
        for (let i = 0; i < 180; i++) {
            particles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height));
        }
    }

window.addEventListener('resize', () => { initParticles(); });
    initParticles(); animateParticles();

// ==========================================
    // 6. INITIALIZATION & SEARCH
    // ==========================================
    document.addEventListener('DOMContentLoaded', () => {
        if (taskbarTarget && !extensions.some(ext => ext.id === taskbarTarget)) {
            taskbarTarget = defaultTaskbarTarget;
        }
        saveTaskbarTarget();

checkFavoritesVisibility();
        generateFeaturedGrid();
        generateDatabaseList();
        generateExtensionsView();
        switchView('home', { notifyParent: false });

document.getElementById('searchFeatured').addEventListener('input', e => {
            const search = e.target.value.toLowerCase();
            document.querySelectorAll('#featured-grid .game-card').forEach(card => {
                card.style.display = card.dataset.name.includes(search) ? 'block' : 'none';
            });
        });

document.getElementById('searchDatabase').addEventListener('input', e => {
            const search = e.target.value.toLowerCase();
            document.querySelectorAll('#sections-container .db-btn').forEach(btn => {
                const wrapper = btn.parentElement;
                wrapper.style.display = btn.value.toLowerCase().includes(search) ? 'flex' : 'none';
            });
        });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horion TV</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600&family=JetBrains+Mono:wght@300;700&display=swap" rel="stylesheet">
    <style>
        /* --- ROOT VARIABLES (HORION THEME) --- */
        :root {
            --hacker-blue: #0070FF;
            --neon-blue: #00E5FF;
            --bg-dark: #000000;
            --text-grey: #445566;
            --warning-gold: #FFC107;
            --heart-red: #FF0050;
        }

/* --- BODY --- */
        body {
            margin: 0;
            background-color: var(--bg-dark);
            font-family: 'Inter', sans-serif;
            color: white;
            overflow-x: hidden;
            overflow-y: scroll;
            scroll-behavior: smooth;
        }

/* --- BOOTUP OVERLAY --- */
        #boot-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #020205;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease, visibility 0.5s;
        }

.boot-text {
            font-family: 'JetBrains Mono', monospace;
            color: var(--neon-blue);
            letter-spacing: 4px;
            margin-bottom: 20px;
            font-size: 0.9rem;
            text-transform: uppercase;
            animation: pulseText 2s infinite;
        }

@keyframes pulseText {
            0% { opacity: 0.7; }
            50% { opacity: 1; text-shadow: 0 0 10px var(--neon-blue); }
            100% { opacity: 0.7; }
        }

.progress-container {
            width: 300px;
            height: 3px;
            background: rgba(0, 112, 255, 0.15);
            position: relative;
            border-radius: 2px;
            overflow: hidden;
        }

.progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: var(--neon-blue);
            box-shadow: 0 0 20px var(--neon-blue);
            transition: width 0.1s linear;
        }

/* --- NAVBAR --- */
        .hud-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 60px;
            background: rgba(0, 5, 15, 0.8);
            border-bottom: 1px solid rgba(0, 112, 255, 0.15);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(5px);
        }

.nav-logo {
            font-size: 2.5rem;
            font-weight: 100;
            letter-spacing: 8px;
            text-decoration: none;
            color: white;
            transition: 0.4s ease;
        }
        .nav-logo span { color: var(--hacker-blue); font-weight: 400; }
        .nav-logo:hover { text-shadow: 0 0 15px var(--hacker-blue); cursor: pointer; }

.nav-right { display: flex; align-items: center; gap: 10px; }

.nav-item {
            text-decoration: none;
            color: white;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 4px;
            transition: 0.3s;
            padding: 10px 20px;
            cursor: pointer;
        }

.nav-item:hover { color: var(--neon-blue); }
        .nav-item.active { color: var(--hacker-blue); border-bottom: 1px solid var(--hacker-blue); }
        .nav-item.youtube-btn { color: #00ccd0ff; }
        .nav-item.youtube-btn:hover { color: #00e8ed; }

.nav-item.sports-btn { color: #2e8b57; }
        .nav-item.sports-btn:hover { color: #3cb371; }

/* --- CONTENT CONTAINER --- */
        .content-container {
            max-width: 1400px;
            margin: 40px auto;
            padding: 40px;
            position: relative;
            z-index: 1;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(0, 112, 255, 0.1);
            border-radius: 4px;
            backdrop-filter: blur(2px);
            min-height: 80vh;
            box-sizing: border-box;
        }

/* --- TV GRIDS & CARDS --- */
        .tv-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

.tv-card {
            position: relative;
            aspect-ratio: 2 / 3;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(0, 112, 255, 0.15);
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.tv-card:hover {
            transform: translateY(-10px);
            border-color: var(--neon-blue);
            box-shadow: 0 0 25px rgba(0, 112, 255, 0.2);
        }

.tv-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            box-sizing: border-box;
            opacity: 1;
        }

.tv-title {
            color: white;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.tv-meta {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            color: var(--neon-blue);
        }

/* --- HERO SECTION --- */
        .hero-banner {
            width: 100%;
            height: 500px;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 112, 255, 0.2);
        }

.hero-bg {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            filter: brightness(0.6);
        }

.hero-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 60px;
            background: linear-gradient(to top, black 10%, transparent);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

.hero-title {
            font-size: 4rem;
            font-weight: 800;
            margin: 0 0 10px 0;
            text-shadow: 0 0 20px rgba(0,0,0,0.8);
            line-height: 1;
        }

.hero-desc {
            max-width: 600px;
            color: #ccc;
            margin-bottom: 20px;
            font-size: 1rem;
            line-height: 1.5;
            text-shadow: 0 0 5px black;
        }

/* --- SEARCH PROMPT BOX --- */
        .search-prompt {
            background: rgba(0, 112, 255, 0.05);
            border: 1px solid rgba(0, 112, 255, 0.2);
            border-radius: 4px;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            backdrop-filter: blur(2px);
        }
        
        .search-prompt span {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.1rem;
            color: white;
            letter-spacing: 1px;
        }

@media (max-width: 600px) {
            .search-prompt { flex-direction: column; gap: 15px; text-align: center; }
        }

/* --- HOME FOOTER --- */
        .home-footer {
            margin-top: 60px;
            padding-top: 30px;
            border-top: 1px solid rgba(0, 112, 255, 0.15);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .footer-version {
            color: var(--neon-blue);
            font-size: 1.1rem;
            font-weight: bold;
            letter-spacing: 2px;
        }

.footer-changes {
            color: var(--text-grey);
            font-size: 0.85rem;
            max-width: 500px;
        }

.footer-changes span {
            color: white;
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

.footer-changes ul {
            margin: 0;
            padding-left: 15px;
            list-style-type: square;
        }

.footer-changes li {
            margin-bottom: 5px;
            line-height: 1.4;
        }

@media (max-width: 768px) {
            .home-footer {
                flex-direction: column;
                gap: 20px;
            }
        }

/* --- PLAYER & DETAILS --- */
        .details-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            transition: all 0.3s ease;
        }

@media (max-width: 900px) {
            .details-layout { grid-template-columns: 1fr !important; }
        }

.video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            background: #000;
            border: 1px solid var(--hacker-blue);
            box-shadow: 0 0 30px rgba(0, 112, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }

.video-container iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
        }

.server-bar {
            background: rgba(0, 112, 255, 0.05);
            border: 1px solid rgba(0, 112, 255, 0.1);
            padding: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 2px;
        }

.episode-list-container {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 600px;
            display: flex;
            flex-direction: column;
        }

.season-header {
            padding: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.season-select {
            background: black;
            color: white;
            border: 1px solid var(--hacker-blue);
            padding: 5px;
            font-family: 'JetBrains Mono', monospace;
        }

.episodes-scroll {
            overflow-y: auto;
            flex: 1;
            padding: 10px;
        }

.episode-item {
            display: flex;
            gap: 15px;
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: 0.2s;
        }

.episode-item:hover {
            background: rgba(0, 112, 255, 0.1);
            padding-left: 15px;
        }

.episode-item.active {
            background: rgba(0, 112, 255, 0.2);
            border-left: 3px solid var(--neon-blue);
        }

.ep-num { font-family: 'JetBrains Mono'; color: var(--text-grey); }
        .ep-title { color: white; font-weight: 500; font-size: 0.9rem; }

/* --- BUTTONS --- */
        .btn-action {
            background: var(--hacker-blue);
            color: white;
            border: none;
            padding: 15px 25px;
            font-family: 'JetBrains Mono', monospace;
            font-weight: bold;
            font-size: 1rem;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: 0.3s;
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

.btn-action:hover {
            background: var(--neon-blue);
            color: black;
            box-shadow: 0 0 15px var(--neon-blue);
        }
        
        .btn-secondary {
            background: transparent;
            border: 1px solid var(--text-grey);
            color: #ccc;
            padding: 8px 15px;
            font-family: 'JetBrains Mono';
            font-size: 0.8rem;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-secondary:hover { border-color: white; color: white; }
        .btn-secondary.active { border-color: var(--neon-blue); color: var(--neon-blue); }

/* --- SEARCH & INPUTS --- */
        .search-input {
            width: 100%;
            background: rgba(0, 5, 15, 0.8);
            border: 1px solid var(--hacker-blue);
            padding: 15px;
            color: white;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1rem;
            margin-bottom: 20px;
            outline: none;
            box-sizing: border-box;
            transition: all 0.3s;
        }
        .search-input:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }

/* --- YOUTUBE DOWNLOAD WIDGET SECTION --- */
        .yt-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        
        .widget-container {
            background: rgba(0, 5, 15, 0.6);
            border: 1px solid rgba(0, 112, 255, 0.3);
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
            width: 100%;
            max-width: 700px;
            margin: 20px auto;
            backdrop-filter: blur(5px);
        }

.widget-controls {
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

#yt-status-text {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-grey);
            min-height: 20px;
            font-family: 'JetBrains Mono', monospace;
            text-transform: uppercase;
        }

/* Modal Styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

.modal-content {
            background: rgba(0, 5, 15, 0.95);
            padding: 40px;
            border: 1px solid var(--warning-gold);
            border-radius: 4px;
            max-width: 450px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 20px rgba(255, 193, 7, 0.1);
            font-family: 'Inter', sans-serif;
        }

.modal-text {
            color: white;
            margin-bottom: 30px;
            line-height: 1.6;
            font-size: 1.1rem;
        }

.modal-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

/* --- VIEW CONTROL --- */
        .view-section { display: none; opacity: 0; transition: opacity 0.5s; }
        .view-section.active { display: block; opacity: 1; }

/* --- PARTICLES --- */
        canvas#bg-canvas {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-thumb { background: var(--hacker-blue); }
        ::-webkit-scrollbar-track { background: #000; }
    </style>
</head>
<body>

<div id="boot-overlay">
    <div class="boot-text">BOOTING HORION TV...</div>
    <div class="progress-container">
        <div id="bootBar" class="progress-bar"></div>
    </div>
</div>

<nav class="hud-nav">
    <div class="nav-left">
        <div onclick="router('home')" class="nav-logo">HORION <span>TV</span></div>
    </div>
    <div class="nav-right">
        <span onclick="router('home')" id="nav-home" class="nav-item">HOME</span>
        <span onclick="router('browse')" id="nav-browse" class="nav-item">BROWSE</span>
        <span onclick="launchYoutubeTool()" id="nav-youtube" class="nav-item youtube-btn">YOUTUBE</span>
        <span onclick="launchSportsTool()" id="nav-sports" class="nav-item sports-btn">LIVE SPORTS</span>
        <span onclick="router('continue')" id="nav-continue" class="nav-item">CONTINUE WATCHING</span>
    </div>
</nav>

<div class="content-container">
    
    
    <div id="view-home" class="view-section">
        <div id="hero-container">
            
        </div>

<div class="search-prompt">
            <span>Don't see what you're looking for?</span>
            <button onclick="router('browse')" class="btn-action">SEARCH DATABASE</button>
        </div>

<h2 style="font-weight:300; letter-spacing:4px; border-bottom:1px solid #333; padding-bottom:10px; margin-top:20px;">Featured</h2>
        <div id="trending-grid" class="tv-grid">
            
        </div>

<div class="home-footer">
            <div class="footer-version">v1.5.0 - HORION TV</div>
            <div class="footer-changes">
                <span>RECENT CHANGES:</span>
                <ul>
                    <li>Added Live Sports page</li>
                    <li>Bug fixes</li>
                </ul>
            </div>
        </div>
    </div>

<div id="view-browse" class="view-section">
        <input type="text" id="browse-search" class="search-input" placeholder="SEARCH DATABASE (MOVIES OR TV)... | If you can't find a show or movie, try typing the exact name." autocomplete="off">
        <div id="browse-grid" class="tv-grid">
            
        </div>
    </div>

<div id="view-continue" class="view-section">
        <h2 style="font-weight:300; letter-spacing:4px; border-bottom:1px solid #333; padding-bottom:10px; margin-top:0;">CONTINUE WATCHING</h2>
        <div id="continue-grid" class="tv-grid">
            
        </div>
    </div>

<div id="view-details" class="view-section">
        
    </div>

</div>

class Particle {
        constructor(x, y) {
            this.x = x; this.y = y; this.baseX = x; this.baseY = y;
            this.size = 1.5; this.density = (Math.random() * 20) + 2;
        }
        draw() {
            tvCtx.fillStyle = 'rgba(0, 112, 255, 0.5)';
            tvCtx.beginPath(); tvCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2); tvCtx.fill();
        }
        update() {
            let dx = tvMouse.x - this.x; let dy = tvMouse.y - this.y;
            let distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < tvMouse.radius) {
                const force = (tvMouse.radius - distance) / tvMouse.radius;
                const directionX = (dx / distance) * force * this.density;
                const directionY = (dy / distance) * force * this.density;
                this.x -= directionX; this.y -= directionY;
            } else {
                if (this.x !== this.baseX) this.x -= (this.x - this.baseX) / 10;
                if (this.y !== this.baseY) this.y -= (this.y - this.baseY) / 10;
            }
        }
    }

function initParticles() {
        tvCanvas.width = window.innerWidth; tvCanvas.height = window.innerHeight;
        tvParticles = [];
        for (let i = 0; i < 150; i++) {
            tvParticles.push(new Particle(Math.random() * tvCanvas.width, Math.random() * tvCanvas.height));
        }
    }

// Boot Sequence
    document.addEventListener('DOMContentLoaded', () => {
        const bar = document.getElementById('bootBar');
        const overlay = document.getElementById('boot-overlay');
        let width = 0;
        
        // Start preloading data in background
        initHome(); 
        
        const interval = setInterval(() => {
            if (width >= 100) {
                clearInterval(interval);
                overlay.style.opacity = '0';
                setTimeout(() => { 
                    overlay.style.visibility = 'hidden'; 
                    if (!document.querySelector('.view-section.active')) {
                        router('home');
                    }
                }, 500);
            } else {
                width += Math.random() * 10; 
                if(width > 100) width = 100;
                bar.style.width = width + '%';
            }
        }, 50);
    });

// ==========================================
    // 2. STREAMVAULT & STATE LOGIC (TMDB Integration)
    // ==========================================
const TMDB_API_KEY = '15d2ea6d0dc1d476efbca3eba2b9bbfb'; // Public demo key
    const TMDB_BASE = 'https://api.themoviedb.org/3';
    const IMG_BASE = 'https://image.tmdb.org/t/p/w500';
    const IMG_ORIGINAL = 'https://image.tmdb.org/t/p/original';

const state = {
        currentShow: null,
        currentSeason: 1,
        currentEpisode: null,
        currentServer: 'server1', 
        trending: [],
        browseDefault: [], // Used for top 50 TMDB items
        posterFallback: 'https://via.placeholder.com/300x450/000000/0070FF?text=No+Poster',
        heroFallback: 'https://via.placeholder.com/1200x600/000000/0070FF?text=No+Image'
    };

// --- Utility Method to Randomize Arrays ---
    function shuffleList(array) {
        const shuffled = [...array]; 
        for (let i = shuffled.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
        return shuffled;
    }

const ShowService = {
        fetchHomeData: async () => {
            const myFeaturedList = [
    // --- Your Original List ---
    { id: 1434, type: 'tv' },       // Family Guy
    { id: 66732, type: 'tv' },      // Stranger Things
    { id: 1396, type: 'tv' },       // Breaking Bad
    { id: 97546, type: 'tv' },      // Ted Lasso
    { id: 507089, type: 'movie' },  // Five Nights at Freddy's
    { id: 1405, type: 'tv' },       // Dexter
    { id: 95557, type: 'tv' },      // Invincible
    { id: 2604, type: 'tv' },       // The Boondocks

{ id: 1408, type: 'tv' },       // House M.D.
    { id: 1402, type: 'tv' },       // The Walking Dead
    { id: 245927, type: 'tv' },     // Paradise
    { id: 1317288, type: 'movie' }, // Marty Supreme

{ id: 100088, type: 'tv' },     // The Last of Us
    { id: 76479, type: 'tv' },      // The Boys
    { id: 60059, type: 'tv' },      // Better Call Saul
    { id: 106379, type: 'tv' },     // Fallout
    { id: 105248, type: 'tv' },     // Cyberpunk: Edgerunners

{ id: 60625, type: 'tv' },      // Rick and Morty
    { id: 1100, type: 'tv' }        // How I Met Your Mother
];
            // 1. Randomize the list
            const randomizedList = shuffleList(myFeaturedList);
            
            // 2. Create an array of pending promises
            const fetchPromises = randomizedList.map(item => 
                ShowService.getDetails(item.id, item.type)
            );
            
            // 3. Wait for all of them to finish at the same time
            const results = await Promise.all(fetchPromises);
            
            return results;
        },

fetchTopContent: async () => {
            const promises = [1, 2, 3].map(page => 
                fetch(`${TMDB_BASE}/trending/all/week?api_key=${TMDB_API_KEY}&page=${page}`).then(r=>r.json())
            );
            const results = await Promise.all(promises);
            const combined = results.flatMap(res => res.results);
            
            return combined.map(normalizeTMDB).filter(i => i !== null).slice(0, 50);
        },

searchShows: async (query) => {
            if(!query) return [];
            const res = await fetch(`${TMDB_BASE}/search/multi?api_key=${TMDB_API_KEY}&query=${encodeURIComponent(query)}&include_adult=false`);
            const data = await res.json();
            return data.results
                .filter(item => item.adult !== true)
                .map(normalizeTMDB)
                .filter(i => i !== null);
        },
        getDetails: async (id, type) => {
            const res = await fetch(`${TMDB_BASE}/${type}/${id}?api_key=${TMDB_API_KEY}&append_to_response=external_ids`);
            const data = await res.json();
            const year = (data.release_date || data.first_air_date || '').split('-')[0] || '';
            const hasRating = typeof data.vote_average === 'number' && data.vote_average > 0;
            
            const normalized = {
                id: data.id,
                type: type,
                imdbId: data.external_ids?.imdb_id || null,
                tmdbId: data.id,
                title: data.title || data.name,
                rating: hasRating ? data.vote_average.toFixed(1) : '',
                year,
                description: data.overview || 'No description available.',
                poster: data.poster_path ? `${IMG_BASE}${data.poster_path}` : state.posterFallback,
                backdrop: data.backdrop_path ? `${IMG_ORIGINAL}${data.backdrop_path}` : state.heroFallback,
                totalSeasons: data.number_of_seasons || 1,
                episodes: {}
            };
            return normalized;
        },
        getSeasonEpisodes: async (tvId, seasonNumber) => {
            const res = await fetch(`${TMDB_BASE}/tv/${tvId}/season/${seasonNumber}?api_key=${TMDB_API_KEY}`);
            const data = await res.json();
            if (!data.episodes) return [];
            return data.episodes.map(ep => ({
                number: ep.episode_number,
                title: ep.name,
                overview: ep.overview,
                image: ep.still_path ? `${IMG_BASE}${ep.still_path}` : null
            }));
        }
    };
    // ==========================================
    // 3. LOCAL STORAGE SAVE LOGIC
    // ==========================================
    
    window.addEventListener('beforeunload', saveProgress);

function saveProgress() {
        if (!state.currentShow) return;
        if (state.currentShow.type === 'tv' && !state.currentEpisode) return;

try {
            const cw = JSON.parse(localStorage.getItem('horion_cw') || '[]');
            const record = {
                id: state.currentShow.id,
                type: state.currentShow.type,
                title: state.currentShow.title,
                poster: state.currentShow.poster,
                season: state.currentShow.type === 'tv' ? state.currentSeason : null,
                episodeNumber: state.currentShow.type === 'tv' ? state.currentEpisode.number : null,
                timestamp: Date.now()
            };

const filtered = cw.filter(item => item.id !== record.id);
            filtered.unshift(record);
            if (filtered.length > 20) filtered.pop();

localStorage.setItem('horion_cw', JSON.stringify(filtered));
        } catch (e) {
            console.warn("Local storage save failed.", e);
        }
    }

function getContinueWatching() {
        try {
            return JSON.parse(localStorage.getItem('horion_cw') || '[]');
        } catch (e) {
            return [];
        }
    }

// ==========================================
    // 4. CONTROLLER & ROUTER
    // ==========================================
    
    function router(viewName, param) {
        const inlinePage = document.getElementById('horion-tv-inline-page');
        if (inlinePage) inlinePage.remove();

if (viewName !== 'details' && state.currentShow) {
            saveProgress();
            state.currentShow = null; 
            state.currentEpisode = null;
        }

document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
        
        const target = document.getElementById(`view-${viewName}`);
        if(target) target.classList.add('active');

const navBtn = document.getElementById(`nav-${viewName}`);
        if(navBtn) navBtn.classList.add('active');

window.scrollTo(0,0);

if(viewName === 'home') {
            if(state.trending.length === 0) initHome();
        } else if(viewName === 'browse') {
            document.getElementById('browse-search').focus();
            const grid = document.getElementById('browse-grid');
            
            // Generate Top 50 default list instead of featured list
            if(state.browseDefault.length === 0) {
                grid.innerHTML = '<div style="color:var(--neon-blue); font-family:\'JetBrains Mono\'; grid-column: 1/-1;">LOADING TOP 50 DATABASE...</div>';
                ShowService.fetchTopContent().then(results => {
                    state.browseDefault = results;
                    if(document.getElementById('browse-search').value.trim() === '') {
                        renderGrid(state.browseDefault, 'browse-grid');
                    }
                });
            } else if (document.getElementById('browse-search').value.trim() === '') {
                renderGrid(state.browseDefault, 'browse-grid');
            }
            
        } else if(viewName === 'continue') {
            renderContinueWatching();
        } else if(viewName === 'details' && param) {
            loadMedia(param);
        }

const viewTitleMap = {
            home: 'Horion TV',
            browse: 'Horion TV - Browse',
            continue: 'Horion TV - Continue Watching',
            details: 'Horion TV'
        };
        if (viewName !== 'details') {
            document.title = viewTitleMap[viewName] || 'Horion TV';
        }

try {
            if (window.parent && window.parent !== window && typeof window.parent.onTvViewChange === 'function') {
                window.parent.onTvViewChange(viewName, param || null);
            }
        } catch (err) {
            // Ignore parent messaging errors.
        }
    }

function setTvTaskbarHighlight(buttonId) {
        document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
        const targetBtn = document.getElementById(buttonId);
        if (targetBtn) targetBtn.classList.add('active');
    }

async function initHome() {
        try {
            const shows = await ShowService.fetchHomeData();
            state.trending = shows;
            renderHero(shows[0]);
            renderGrid(shows.slice(1), 'trending-grid');
        } catch (e) {
            console.error(e);
        }
    }

async function loadMedia({ id, type, season, epNumber }) {
        document.getElementById('view-details').innerHTML = '<div style="text-align:center; padding:50px; color:var(--neon-blue);">ACCESSING DATA...</div>';
        
        try {
            state.currentShow = await ShowService.getDetails(id, type);
            
            if (type === 'tv') {
                const targetSeason = season || 1;
                state.currentSeason = targetSeason;
                
                const eps = await ShowService.getSeasonEpisodes(id, targetSeason);
                state.currentShow.episodes[targetSeason] = eps;

if (epNumber) {
                    state.currentEpisode = eps.find(e => e.number === epNumber) || eps[0];
                } else {
                    state.currentEpisode = eps[0] || { number: 1, title: 'Unavailable' };
                }
            } else {
                saveProgress();
            }
            
            renderDetailsView();

if (state.currentShow && state.currentShow.title) {
                document.title = `${state.currentShow.title} - Horion TV`;
            } else {
                document.title = 'Horion TV';
            }

try {
                if (window.parent && window.parent !== window && typeof window.parent.onTvViewChange === 'function') {
                    window.parent.onTvViewChange('details', {
                        id: state.currentShow.id,
                        type: state.currentShow.type,
                        season: state.currentShow.type === 'tv' ? state.currentSeason : null,
                        epNumber: state.currentShow.type === 'tv' && state.currentEpisode ? state.currentEpisode.number : null,
                        title: state.currentShow.title || ''
                    });
                }
            } catch (err) {
                // Ignore parent messaging errors.
            }
        } catch(e) {
             document.getElementById('view-details').innerHTML = '<div style="text-align:center; padding:50px; color:red;">DATA CORRUPTED. RETRY.</div>';
        }
    }

// ==========================================
    // 5. RENDERERS
    // ==========================================

function renderContinueWatching() {
        const container = document.getElementById('continue-grid');
        const cwList = getContinueWatching();
        
        if (cwList.length === 0) {
            container.innerHTML = `
                <div style="color:var(--text-grey); font-family:'JetBrains Mono'; grid-column: 1 / -1; padding: 40px 0;">
                    Start watching a show or movie to add it to Continue Watching.
                </div>`;
            return;
        }

container.innerHTML = '';
        cwList.forEach(item => {
            const card = document.createElement('div');
            card.className = 'tv-card';
            card.onclick = () => router('details', { id: item.id, type: item.type, season: item.season, epNumber: item.episodeNumber });
            
            const metaText = item.type === 'movie' ? 'MOVIE' : `S${item.season}:E${item.episodeNumber}`;
            
            card.innerHTML = `
                <img src="${item.poster}" loading="lazy">
                <div class="card-overlay">
                    <div class="tv-title">${item.title}</div>
                    <div class="tv-meta" style="color: var(--neon-blue);">${metaText} | RESUME</div>
                </div>
            `;
            container.appendChild(card);
        });
    }

${isMovie ? '' : `
                <div class="episode-list-container">
                    <div class="season-header">
                        <span style="font-family:'JetBrains Mono'; font-weight:bold;">EPISODES</span>
                        <select id="season-select" class="season-select" onchange="changeSeason(this.value)">
                            ${Array.from({length: show.totalSeasons}, (_, i) => i + 1).map(s => 
                                `<option value="${s}" ${s == state.currentSeason ? 'selected' : ''}>SEASON ${s}</option>`
                            ).join('')}
                        </select>
                    </div>
                    <div id="episodes-scroll" class="episodes-scroll">
                        
                    </div>
                </div>
                `}
            </div>
        `;
        
        if (!isMovie) renderEpisodeList();
    }

function renderEpisodeList() {
        const container = document.getElementById('episodes-scroll');
        const episodes = state.currentShow.episodes[state.currentSeason] || [];
        
        if(episodes.length === 0) {
            container.innerHTML = '<div style="padding:20px; color:grey; text-align:center;">NO DATA AVAILABLE</div>';
            return;
        }

container.innerHTML = episodes.map((ep, idx) => {
            const isActive = (ep.number === state.currentEpisode?.number);
            return `
                <div class="episode-item ${isActive ? 'active' : ''}" onclick="playEpisode(${state.currentSeason}, ${idx})">
                    <div class="ep-num">${ep.number}</div>
                    <div class="ep-title">${ep.title}</div>
                </div>
            `;
        }).join('');
    }

// ==========================================
    // 6. PLAYER LOGIC
    // ==========================================

async function changeSeason(season) {
        state.currentSeason = parseInt(season);
        
        if (!state.currentShow.episodes[state.currentSeason]) {
            const container = document.getElementById('episodes-scroll');
            container.innerHTML = '<div style="padding:20px; color:var(--neon-blue); text-align:center; font-family:\'JetBrains Mono\';">LOADING...</div>';
            
            const eps = await ShowService.getSeasonEpisodes(state.currentShow.id, state.currentSeason);
            state.currentShow.episodes[state.currentSeason] = eps;
        }
        renderEpisodeList();

try {
            if (window.parent && window.parent !== window && typeof window.parent.onTvViewChange === 'function' && state.currentShow) {
                window.parent.onTvViewChange('details', {
                    id: state.currentShow.id,
                    type: state.currentShow.type,
                    season: state.currentSeason,
                    epNumber: state.currentEpisode ? state.currentEpisode.number : null,
                    title: state.currentShow.title || ''
                });
            }
        } catch (err) {
            // Ignore parent messaging errors.
        }
    }

function playEpisode(season, index) {
        state.currentSeason = season;
        state.currentEpisode = state.currentShow.episodes[season][index];
        saveProgress(); 
        renderDetailsView(); 
        window.scrollTo(0,0);

function switchServer(server) {
        state.currentServer = server;
        renderDetailsView();
    }

// ========================================== 
    // 7. YOUTUBE NAV LAUNCHER LOGIC
    // ==========================================

function launchSite(targetUrl) {
    // 1. Open the new window
    const win = window.open('about:blank', '_blank');
    
    if (!win) {
        alert("Popup blocked! Please allow popups for this site.");
        return false;
    }

// 2. Define the content to inject
    // The <base target="_self"> ensures all clicks stay inside the iframe's context
    const htmlContent = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>Horion TV</title>
            <style>
                body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #   000; }
                iframe { border: none; width: 100%; height: 100%; }
            </style>
        </head>
        <body>
            <iframe src="${targetUrl}" allow="autoplay; encrypted-media; fullscreen"></iframe>
            <script>
            <\/script>
        </body>
        </html>
    `;

// 3. Write to the new window
    win.document.open();
    win.document.write(htmlContent);
    win.document.close();
    
    return true;
}

function openInlineTvPage(targetUrl, titleText) {
    const normalizedUrl = String(targetUrl || '').trim();
    if (!normalizedUrl) return false;

const existing = document.getElementById('horion-tv-inline-page');
    if (existing) existing.remove();

const host = document.createElement('section');
    host.id = 'horion-tv-inline-page';
    host.style.position = 'fixed';
    host.style.left = '0';
    host.style.right = '0';
    host.style.bottom = '0';
    host.style.zIndex = '9990';
    host.style.background = '#000';
    host.style.borderTop = '1px solid rgba(0, 112, 255, 0.25)';

host.innerHTML = `
        <iframe
            id="horion-tv-inline-host-frame"
            src="about:blank"
            allow="autoplay; encrypted-media; fullscreen"
            allowfullscreen
            style="border:none;width:100%;height:100%;background:#000;"
        ></iframe>
    `;

const closeInlineView = function () {
        window.removeEventListener('resize', applyOffset);
        document.removeEventListener('keydown', onKeydown);
        host.remove();
    };

const onKeydown = function (event) {
        if (event.key === 'Escape') closeInlineView();
    };

applyOffset();
    window.addEventListener('resize', applyOffset);
    document.addEventListener('keydown', onKeydown);

return true;
}

// Ensure these functions use the correct variable names
function launchYoutubeTool() {
    setTvTaskbarHighlight('nav-youtube');
    try {
        if (window.parent && window.parent !== window && typeof window.parent.onTvViewChange === 'function') {
            window.parent.onTvViewChange('youtube');
        }
    } catch (err) {
        // Ignore parent messaging errors.
    }
    openInlineTvPage('https://fastytm.com/', 'YouTube');
}

// ==========================================
    // 8. BROWSE / SEARCH LOGIC
    // ==========================================
    const searchInput = document.getElementById('browse-search');
    let debounceTimer;
    
    searchInput.addEventListener('input', (e) => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(async () => {
            const query = e.target.value.trim();
            const container = document.getElementById('browse-grid');
            
            // Revert back to top 50 default list if search is empty
            if(!query) {
                renderGrid(state.browseDefault, 'browse-grid');
                return;
            }
            
            container.innerHTML = '<div style="color:var(--neon-blue); font-family:\'JetBrains Mono\'; grid-column: 1/-1;">SCANNING DATABASE...</div>';
            const results = await ShowService.searchShows(query);
            
            if (results.length === 0) {
                 container.innerHTML = '<div style="color:var(--text-grey); font-family:\'JetBrains Mono\'; grid-column: 1/-1;">No results found in database.</div>';
            } else {
                 renderGrid(results, 'browse-grid');
            }
        }, 600);
    });

</script>
</body>
</html>