/* Custom Fonts (Placeholder - Use a geometric/blocky font like 'Bebas Neue' or 'Orbitron' if available) */
@font-face {
    font-family: 'RobloxUI';
    /* Add src link to actual font files here */
    font-weight: 400;
}

:root {
    /* Deeper, more saturated colors for high contrast */
    --color-darkest-bg: #000000; /* Base background (white/light) */
    --color-medium-bg: #12122A; /* Sidebar/Card base background */
    --color-neon-blue: #008CFF; /* Bright blue for highlights/glow */
    --color-text-light: #C0C0D0;
    --color-text-accent: #FFFFFF;
    --color-red-code: #FF6961; /* Soft red for code blocks */
    --color-orange-status: #FF9800;
    
    /* 🚀 LUA SYNTAX/CODE BLOCK COLORS */
    --color-code-bg: #282c34;       /* Base background */
    --color-code-text: #f8f8f2;     /* Default text (White) */
    --color-lua-keyword: #f92672;   /* Keywords (local, if, else) */
    --color-lua-string: #e6db74;    /* Strings ("text") */
    --color-lua-function: #a6e22e;  /* Functions (print, pairs) */
    --color-lua-global: #66d9ef;    /* Globals/Variables (game, selection) */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'RobloxUI', sans-serif; /* Use the placeholder font */
    line-height: 1.4;
}

body {
    background-color: var(--color-darkest-bg);
    color: var(--color-text-light);
    min-height: 100vh;
}

/* Background Effect */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2;
}

.background-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1.0; /* Set to 1.0 to remove dark overlay */
}

/* --- Layout & Centering --- */
.container {
    width: 90%;
    /* Allowing content to spread much wider on large monitors */
    max-width: 1920px; 
    margin: 0 auto;
    padding: 20px 0;
}

/* --- Header & Navigation --- */
.header-top {
    display: flex;
    align-items: center;
    padding: 30px 0 10px;
}

.logo-section {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.logo-section img {
    height: 120px;
    margin-right: 15px;
}

.logo-section h1 {
    font-size: 28px;
    color: var(--color-text-accent);
    letter-spacing: 1px;
}

.logo-section span {
    color: var(--color-neon-blue);
    font-size: 18px;
    margin-left: 10px;
}

/* Nav Container with Transparency */
.nav-bar-container {
    background-color: rgba(18, 18, 42, 0.4); 
    padding: 0 5%;
    /* Must match .container max-width */
    max-width: 1920px; 
    margin: 0 auto;
    border-radius: 5px; 
    margin-bottom: 20px;
}

.nav-links {
    list-style: none;
    display: flex;
    padding: 10px 0;
}

.nav-links li {
    margin-right: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text-light);
    font-size: 16px;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

/* Highlight hover links */
.nav-links a:hover {
    color: var(--color-neon-blue);
}

/* Only highlight "Home" link (the first one) */
.nav-links li:first-of-type > a {
    position: relative;
    color: var(--color-neon-blue);
}

/* Underline ONLY for "Home" (first link) */
.nav-links li:first-of-type > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background-color: var(--color-neon-blue);
    box-shadow: 0 0 5px var(--color-neon-blue);
}

/* KILL all pseudo-elements on ALL links except the first one */
.nav-links li:not(:first-of-type) a::after,
.nav-links li:not(:first-of-type) a::before {
    content: none !important;
    display: none !important;
}

/* Outer main container, full width */
.main-content {
  width: 95%;           /* slightly less than 100% to avoid overflow */
  max-width: 1920px;    /* optional max width for big screens */
  margin: 0 auto;       /* center horizontally */
  padding-top: 20px;
  box-sizing: border-box; /* include padding/border in width */
  display: block;       /* use normal flow or set to flex/grid as needed */
}

/* Inner specific grid container */
.grid-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    width: 100%;    /* full width inside main-content */
    box-sizing: border-box;
}

/* --- Left Column: Dashboard Archives --- */
.dashboard-archives h2 {
    font-size: 24px; /* UPDATED SIZE */
    margin-bottom: 20px;
    color: var(--color-text-accent);
}

.dashboard-container {
    background-color: rgba(18, 18, 42, 0.6); /* Transparent container */
    padding: 20px;
    border-radius: 8px;
}

.game-cards-wrapper {
    display: flex;
    gap: 20px;
}

.game-card {
    background: none; /* Removed background here */
    border-radius: 8px;
    overflow: hidden;
    width: 50%;
}

.game-card-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
}

.game-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card Content Containers */
.card-top-text {
    background-color: rgba(18, 18, 42, 0.5); /* More transparent background for titles */
    padding: 15px 20px;
}

.card-bottom-info {
    background-color: rgba(18, 18, 42, 0.8); /* Less transparent background for info/button */
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* New Styles for Dynamic Stats Text */
.card-bottom-info p {
    font-size: 14px;
    color: var(--color-text-light); /* Ensures stat lines are visible */
    margin-bottom: 5px;
}
.stat-label {
    font-weight: bold;
    color: var(--color-neon-blue);
}

.game-card-content h3 {
    font-size: 20px;
    color: var(--color-text-accent);
    margin-bottom: 5px;
}

.game-card-content p {
    font-size: 16px; /* UPDATED SIZE */
    color: var(--color-text-light);
    margin-bottom: 5px;
}

/* New Styles for Button Group (Side-by-Side Links) */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Play Now Button (Dark background, bright border/glow) */
.play-button {
    display: flex;  
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1; /* Ensures buttons take up equal space */
    padding: 8px 18px;
    background-color: var(--color-medium-bg); /* Dark background */
    color: var(--color-neon-blue);
    text-decoration: none;
    border: 2px solid var(--color-neon-blue); /* Neon blue border */
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 5px rgba(0, 140, 255, 0.5); /* Subtle glow */
}

.play-button:hover {
    background-color: rgba(0, 140, 255, 0.1);
    box-shadow: 0 0 10px var(--color-neon-blue);
}

.status-tag {
    display: inline-block;
    background-color: var(--color-orange-status);
    /* For high contrast text, ensure this uses a dark color */
    color: #000000; /* Force black text for contrast against bright orange/white background */
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Coastal Conflict specific text styling (normal text, not in a special box) */
.coastal-info p:last-child {
    font-size: 13px;
    margin-top: 5px;
    color: var(--color-text-light);
}

/* --- Right Column: Dev Arsenal Sidebar --- */
.dev-arsenal-container {
    background-color: rgba(18, 18, 42, 0.6); /* Transparent container */
    padding: 20px;
    border-radius: 8px;
}

.sidebar-box {
    background: none; /* No internal box background */
    margin-bottom: 25px;
}

.sidebar-box h3 {
    font-size: 16px;
    color: var(--color-text-accent); /* White/Light Blue color */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-list {
    list-style: none;
}

.sidebar-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.sidebar-list li::before {
    content: '⚙️'; /* Placeholder for custom icon */
    color: var(--color-neon-blue);
    margin-right: 10px;
}

.sidebar-list small {
    display: block;
    color: var(--color-text-light);
    font-size: 12px;
    margin-top: 2px;
}

/* --- ABOUT PAGE STYLES --- */
.about-container {
    padding: 30px;
    background-color: rgba(18, 18, 42, 0.7); /* Match card/sidebar background transparency */
    border-radius: 8px;
    margin-top: 20px;
}

.section-title {
    font-size: 24px;
    color: var(--color-text-accent);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--color-neon-blue);
    padding-bottom: 10px;
}

.about-content p {
    font-size: 18px; /* UPDATED SIZE */
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--color-text-light);
}

.contact-info {
    margin: 30px 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--color-neon-blue);
    border-radius: 4px;
}

.contact-info h3 {
    color: var(--color-text-accent);
    font-size: 18px;
    margin-bottom: 10px;
}

.contact-info a {
    color: var(--color-lua-function); /* Use a bright secondary color for links */
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info a:hover {
    color: var(--color-neon-blue);
}

/* Donate Button Styling */
.support-section {
    margin-top: 40px;
    text-align: center;
    padding: 20px;
    background-color: rgba(18, 18, 42, 0.9);
    border: 1px solid rgba(0, 140, 255, 0.3);
    border-radius: 8px;
}

.donate-button {
    display: inline-block;
    padding: 12px 25px;
    margin: 15px 0;
    background-color: var(--color-neon-blue); /* Neon Blue Fill */
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 10px rgba(0, 140, 255, 0.8); /* Stronger glow */
}

.donate-button:hover {
    background-color: #0077D3;
    box-shadow: 0 0 15px var(--color-neon-blue);
}

.support-section small {
    display: block;
    color: var(--color-text-light);
    font-size: 12px;
}

/* --- DEV ARSENAL PAGE STYLES --- */

.arsenal-page-container {
    padding: 30px;
    background-color: rgba(18, 18, 42, 0.7);
    border-radius: 8px;
    margin-top: 20px;
}

.arsenal-flex-container {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.arsenal-column {
    flex: 1; /* Makes both columns take up equal width */
    min-width: 0; /* Ensures content doesn't force overflow */
}

.arsenal-section h3 {
    font-size: 20px;
    color: var(--color-text-accent);
    margin: 20px 0 15px 0;
    padding-left: 10px;
    border-left: 3px solid var(--color-lua-global);
}

.description-text {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 20px;
    padding-left: 10px;
}

/* Plugin Cards: List display for the side-by-side layout */
.plugin-card-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.plugin-card {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    background-color: var(--color-medium-bg); 
    border-radius: 8px;
    border: 1px solid rgba(0, 140, 255, 0.1);
}

.card-icon {
    font-size: 36px;
    margin-right: 15px;
}

.card-details h4 {
    color: var(--color-neon-blue);
    font-size: 18px;
    margin-bottom: 5px;
}

.card-details p {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 10px;
    line-height: 1.4;
}

.arsenal-flex-container {
    display: flex;
    gap: 25px;
}

.arsenal-column {
    flex: 1;
}

.download-link {
    display: inline-block;
    padding: 6px 15px;
    background-color: var(--color-lua-function);
    color: var(--color-code-bg);
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}

.download-link:hover {
    background-color: #79c03b; 
}

.funding-callout {
    background-color: #0a0a0a;
    border-left: 3px solid #444;
    color: #aaa;
    font-style: italic;
    font-size: 0.8rem;        /* smaller than parent */
    line-height: 1.4;         /* tighter line spacing */
    padding: 0.5rem 0.8rem;   /* smaller box */
    margin: 1rem 2rem;        /* indented */
    border-radius: 6px;
    max-width: 75%;           /* slightly narrower */
    opacity: 0.9;
}
.funding-callout p {
    font-size: 0.8rem; /* override inherited 18px */
    line-height: 1.4;
    margin: 0;
}

/* --- Scripts Dropdown Styles --- */
.scripts-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.script-dropdown-item {
    background-color: var(--color-medium-bg); /* Use medium BG for the item container */
    border-radius: 4px;
    overflow: hidden; /* Important for clean reveal/hide */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2); /* Slight contrast from item BG */
    transition: background-color 0.2s;
}

.dropdown-header:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.script-title {
    font-weight: bold;
    color: var(--color-text-accent);
    flex-grow: 1;
}

.toggle-icon {
    font-weight: bold;
    color: var(--color-neon-blue);
    margin-left: 10px;
}

/* Content visibility classes */
.script-content-hidden {
    display: none; /* Hide the content by default */
    padding: 10px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.script-content-visible {
    display: block; /* Show the content when active */
    padding: 10px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Style for the code block inside the dropdown */
.script-content-visible .code-editor-style {
    /* Override code box styles for dropdown appearance */
    max-height: 150px; /* Give it more room than the sidebar */
    margin: 5px 0 0 0;
    padding: 5px;
    background-color: var(--color-code-bg); /* Dark background for code block */
    border-radius: 4px;
}

/* Ensure the copy button is inside the content, above the code */
.script-content-visible .copy-button {
    margin-bottom: 5px;
}

/* --- CODE EDITOR BLOCK STYLES (FROM SIDEBAR) --- */
.command-script-box {
    background-color: var(--color-code-bg); /* Dark background color */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    position: relative;  
}

.command-script-box::after {
    content: "";
    display: table;
    clear: both;
}

.command-script-box p:first-child {
    font-weight: bold;
    color: var(--color-lua-global);
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;  
}

.copy-button {
    background-color: #555c66;
    color: var(--color-text-accent);
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.3s, transform 0.1s;
    float: right;  
    margin: 0;
}

.copy-button:hover {
    background-color: #6a717c;
    transform: scale(1.05);
}

.code-editor-style {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: var(--color-code-text);
    background-color: transparent;
    margin: 10px 0 0 0;
    padding: 5px 0 0 0;
    overflow-y: auto;
    white-space: pre-wrap;
    max-height: 100px;  
    width: 100%;  
    display: block;
}

/* LUA SYNTAX HIGHLIGHTING CLASSES */
.lua-keyword {
    color: var(--color-lua-keyword); /* Pink/Red for keywords */
}
.lua-string {
    color: var(--color-lua-string); /* Yellow for strings */
}
.lua-function {
    color: var(--color-lua-function); /* Green for function calls */
}
.lua-global {
    color: var(--color-lua-global); /* Blue for global variables/objects */
}

/* --- Footer --- */
.footer {
    text-align: center;
    padding: 20px 0;
    color: var(--color-text-light);
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Make the parent li relative so the dropdown positions correctly */
.dropdown-item {
    position: relative; /* parent for absolute dropdown */
}

/* ===== Dropdown: minimal, overlay, no extra arrow ===== */
.dropdown-item {
    position: relative; /* parent for absolute menu */
}

/* Keep only the arrow you already have in the span; don't create another one here */
.dropdown-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-light);
    user-select: none; /* avoid text selection caret */
}

/* Prevent text I-beam on dropdown links; normal arrow cursor */
.dropdown-toggle,
.dropdown-menu a {
    cursor: pointer;
}

/* Menu overlays and does not push the header */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px); /* small gap below the nav item */
    left: 0;
    min-width: 180px;
    background-color: rgba(18, 18, 42, 0.95);
    border: 1px solid rgba(0, 140, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 12px rgba(0,140,255,0.08);
    display: none;            /* hidden by default */
    flex-direction: column;
    z-index: 1000;
    padding: 6px 0;
    backdrop-filter: blur(6px);
}

/* Respect hidden attribute when present (explicit) */
.dropdown-menu[hidden] {
    display: none !important;
}

/* When JS adds the open class to parent, show it */
.dropdown-item.open .dropdown-menu {
    display: flex;
}

/* Link styling inside the menu */
.dropdown-menu a {
    color: var(--color-text-light);
    text-decoration: none;
    padding: 10px 16px;
    font-size: 14px;
    transition: background-color 0.18s, color 0.18s;
    white-space: nowrap;
}

/* Hover state */
.dropdown-menu a:hover {
    background-color: rgba(0, 140, 255, 0.12);
    color: var(--color-neon-blue);
}

/* Make sure nav container stays above page content */
.nav-bar-container {
    position: relative;
    z-index: 20;
}



/* POLL WIDGET STYLES */

.poll-widget-container {
    max-width: 400px; /* Limits the poll width */
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--color-neon-blue);
    border-radius: 8px;
    background-color: rgba(18, 18, 42, 0.7);
    color: #f0f0f0; /* Light text */
    font-family: Arial, sans-serif;
}

.poll-description {
    font-size: 0.9em;
    color: #bbb;
    margin-bottom: 20px;
}

.poll-option {
    position: relative;
    margin-bottom: 12px;
    height: 35px; /* Height of the bar/button */
    border-radius: 4px;
    background-color: #444; /* Background for the bar */
    overflow: hidden; /* Important for the fill */
}

.poll-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #007bff; /* Blue color for the fill */
    transition: width 0.5s ease;
    z-index: 1; /* Below the button text */
}

.poll-vote-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 35px; /* Vertically centers the text */
    text-align: left;
    padding-left: 15px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    background: none; /* No button background */
    border: none;
    z-index: 2; /* Above the fill bar */
    transition: background-color 0.1s;
}

.poll-vote-button:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight overlay on hover */
}

.poll-stats {
    position: absolute;
    top: 0;
    right: 15px;
    height: 100%;
    line-height: 35px;
    font-size: 0.9em;
    color: #fff;
    font-weight: normal;
    z-index: 3; /* Highest z-index */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Helps readability over the bar */
}

.total-votes-display {
    text-align: right;
    font-size: 0.8em;
    color: #aaa;
    margin-top: 15px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 900px) {
    .scripts-grid {
        grid-template-columns: 1fr;
    }
    
    .category-header {
        padding: 15px 20px;
    }
    
    .scripts-category-title {
        font-size: 20px;
    }
}

@media (max-width: 500px) {
    .scripts-grid {
        padding: 15px;
        gap: 10px;
    }
    
    .script-card-header {
        padding: 10px 12px;
    }
    
    .script-title {
        font-size: 14px;
    }
}

/* --- Tabbed Interface --- */

.shortcut-tabs-container {
    margin-top: 20px;
    background-color: var(--color-darkest-bg);
    border-radius: 8px;
    overflow: hidden;
}

/* Hide radio buttons */
.tab-input {
    display: none;
}

.tab-labels-wrapper {
    display: flex;
    border-bottom: 3px solid var(--color-neon-blue);
}

/* Style the tab buttons */
.tab-label {
    padding: 15px 25px;
    background-color: var(--color-medium-bg);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
    transition: background-color 0.25s, color 0.25s;
}

.tab-label:hover {
    background-color: rgba(18, 18, 42, 0.8);
    color: var(--color-text-accent);
}

/* Correct active tab selector */
#mac-tab:checked ~ .tab-labels-wrapper label[for="mac-tab"],
#windows-tab:checked ~ .tab-labels-wrapper label[for="windows-tab"] {
    background-color: var(--color-neon-blue);
    color: var(--color-darkest-bg);
    box-shadow: 0 0 10px rgba(0, 140, 255, 0.5);
}

/* Content area */
.tab-content {
    padding: 25px 0;
    display: none;
}

/* Show corresponding content */
#mac-tab:checked ~ .tab-content[for="mac"],
#windows-tab:checked ~ .tab-content[for="windows"] {
    display: block;
}

/* Shortcut Tables */
.shortcut-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Header */
.shortcut-table th {
    padding: 12px 15px;
    background-color: rgba(0, 140, 255, 0.1);
    color: var(--color-neon-blue);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cells */
.shortcut-table td {
    padding: 12px 15px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Shortcut key visual */
.shortcut-key {
    background-color: var(--color-code-bg);
    color: var(--color-lua-global);
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    white-space: nowrap;
    display: inline-block;
}

/* ______ CATEGORY HEADER ROW ______ */
.category-row td {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-light);
    font-size: 15px;
    padding: 14px 15px;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ======================================================= */
/* 🚀 MOBILE/RESPONSIVE STYLES (Web Friendly Update) 🚀 */
/* ======================================================= */

@media (max-width: 900px) {
    /* --- General Layout Collapse (Index/Dashboard) --- */
    .main-content {
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
        gap: 20px;
        padding-top: 10px;
    }
    
    /* Move the sidebar content (Dev Arsenal) above the main content on mobile */
    .dashboard-archives {
        order: 2;
    }
    .dev-arsenal-container {
        order: 1;
    }
    
    /* --- Dashboard Card Stacking --- */
    .game-cards-wrapper {
        flex-direction: column; /* Stacks game cards vertically */
    }
    .game-card {
        width: 100%; /* Ensure cards take up full width */
        margin-bottom: 15px;
    }

    /* --- Navigation Collapse --- */
    .header-top {
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative; /* so z-index of children works */
    background: rgba(0,0,0,0.3); /* optional semi-transparent overlay */
    }
    .logo-section h1 {
        font-size: 24px;
    }
    .nav-links {
        justify-content: space-around;
        padding: 10px 0;
        overflow-x: auto; /* Allows scrolling if links get too long */
        -webkit-overflow-scrolling: touch;
    }
    .nav-links li {
        margin-right: 15px;
        flex-shrink: 0; /* Prevents links from shrinking */
    }
    
    /* --- Arsenal Page Stacking --- */
    .arsenal-flex-container {
        flex-direction: column; /* Stacks the Plugin and Script columns vertically */
        gap: 20px;
    }
    
    /* Adjust padding for touch/mobile devices */
    .arsenal-page-container,
    .dashboard-container,
    .dev-arsenal-container,
    .about-container {
        padding: 15px;
    }
}

@media (max-width: 500px) {
    /* Hide the slogan on the smallest devices to save space */
    .logo-section span {
        display: none;
    }
}