/* /api/core/AllCSS.css */

/* --- GLOBAL RESET & TYPOGRAPHY --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'HCo Gotham SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f2f4f5; /* Light gray Roblox background */
    color: #393b3d;
}

a {
    text-decoration: none;
}

/* --- LAYOUT UTILITIES --- */
.container {
    max-width: 970px;
    margin: 0 auto;
    padding: 20px;
}

/* --- NAVIGATION BAR (.rbx-header) --- */
.rbx-header {
    background-color: #191B1D; /* Roblox Dark Theme */
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    color: white;
    
    /* ADDED: Required to allow the children to center themselves */
    position: relative; 
}

.rbx-nav-links {
    display: flex;
    gap: 0px;
    
    /* ADDED: Absolute centering logic */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Ensure the Right Nav stays pinned to the right */
.rbx-right-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Ensure the Right Nav stays pinned to the right */
.rbx-left-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.rbx-menu-item {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.rbx-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.rbx-btn-logout {
    font-size: 14px;
    background-color: rgba(255,255,255,0.1);
    padding: 6px 12px;
}

.rbx-btn-logout:hover {
    background-color: rgba(255,255,255,0.2);
}

/* --- NAV CURRENCY STATS --- */
.rbx-currency-container {
    display: flex;
    gap: 15px;
    font-size: 14px;
    font-weight: 600;
}

.currency-item {
    cursor: pointer;
}

.robux-val { color: #00b06f; } /* Green */
.tix-val { color: #b8860b; }   /* Gold/Yellow */


/* --- USER PROFILE: HEADER CARD --- */
.profile-header {
    background-color: white;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.header-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 1px solid #ccc;
    overflow: hidden;
    margin-right: 15px;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-username {
    font-size: 30px;
    font-weight: 700;
    color: #393b3d;
}

/* --- USER PROFILE: BODY CARD --- */
.profile-body {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    min-height: 400px;
    overflow: hidden;
}

.body-avatar-view {
    width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e3e3e3;
    padding: 20px;
}

.body-avatar-view img {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
}

.body-info-view {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* --- SECTIONS (About, Stats) --- */
.section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #393b3d;
}

.about-box {
    white-space: pre-wrap;
    color: #555;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 30px;
    overflow-wrap: break-word;
}

/* --- STATISTICS GRID --- */
.stats-container {
    margin-top: auto;
    border-top: 1px solid #e3e3e3;
    padding-top: 15px;
}

.stat-grid {
    display: flex;
    gap: 40px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 14px;
    color: #888;
    font-weight: 500;
}

.stat-value {
    font-size: 18px;
    color: #393b3d;
    font-weight: 400;
    margin-top: 2px;
}

.robux-text { color: #00b06f; font-weight: 600; }
.tix-text { color: #b8860b; font-weight: 600; }

/* --- DASHBOARD SPECIFIC --- */
.avatar-circle {
    border-radius: 50%;
    border: 1px solid #ccc;
    object-fit: cover;
}
/* --- BADGES SECTION --- */
.badges-placeholder {
    padding: 20px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    color: #888; /* Gray text */
    font-size: 14px;
    margin-bottom: 25px; /* Space before statistics */
}
/* --- SEPARATE BADGES CONTAINER --- */
.profile-badges-section {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-top: 20px; /* Space between Main Profile box and Badges box */
}

/* --- AVATAR EDITOR PAGE --- */

/* Main layout wrapper */
.avatar-editor-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
}

/* Left Column: The Avatar */
.editor-left {
    width: 300px;
    background: white;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    position: sticky; /* Keeps avatar in view while scrolling items */
    top: 20px; 
}

/* Right Column: The Items */
.editor-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tabs (Recent, Characters, Clothing...) */
.editor-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.editor-tab {
    font-size: 16px;
    font-weight: 600;
    color: #393b3d;
    cursor: pointer;
    padding-bottom: 5px;
}

.editor-tab:hover {
    color: #000;
}

.editor-tab.active {
    border-bottom: 3px solid #393b3d;
}

/* Toolbar (Dropdowns + Search) */
.editor-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.editor-btn {
    background: white;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.editor-search {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1; /* Takes remaining space */
}

/* Item Grid Area */
.item-grid-container {
    min-height: 400px;
}

/* The box for "You have no items" */
.empty-items-box {
    background-color: white;
    border-radius: 4px;
    padding: 50px;
    text-align: center;
    color: #888;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- BODY COLOR EDITOR --- */

.body-editor-wrapper {
    display: none;
    gap: 30px;
}

/* Updated Paper Doll Layout (4 Columns) */
.paper-doll {
    display: grid;
    /* 4 columns: L-Arm, L-Leg/Torso, R-Leg/Torso, R-Arm */
    grid-template-columns: 50px 50px 50px 50px; 
    /* 3 rows: Head, Torso/Arms, Legs */
    grid-template-rows: 60px 100px 100px; 
    gap: 4px; /* Small gap between parts */
    width: fit-content;
    margin: 0 auto;
}

.doll-part {
    background-color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    
    /* CHANGED: Now has a subtle border (10% opacity black) */
    /* This ensures white limbs are visible against the white page */
    border: 2px solid rgba(0, 0, 0, 0.1); 
    
    border-radius: 4px;
}

/* --- Specific Part Positioning --- */

/* HEAD: Spans middle two columns, centered */
.part-head {
    grid-column: 2 / span 2;
    grid-row: 1;
    width: 50px;
    height: 50px;
    margin: auto; /* Centers it vertically and horizontally in the 60px row */
    border-radius: 12px; /* More rounding for the head */
}

/* LEFT ARM: Column 1 */
.part-larm {
    grid-column: 1;
    grid-row: 2;
}

/* TORSO: Spans middle two columns (Col 2 & 3) */
.part-torso {
    grid-column: 2 / span 2;
    grid-row: 2;
}

/* RIGHT ARM: Column 4 */
.part-rarm {
    grid-column: 4;
    grid-row: 2;
}

/* LEFT LEG: Column 2 (Under left side of torso) */
.part-lleg {
    grid-column: 2;
    grid-row: 3;
}

/* RIGHT LEG: Column 3 (Under right side of torso) */
.part-rleg {
    grid-column: 3;
    grid-row: 3;
}

/* Hover & Selection States */
.doll-part:hover { 
    filter: brightness(0.9); 
}

.doll-part.selected { 
    border-color: #00a2ff; 
    box-shadow: 0 0 10px rgba(0, 162, 255, 0.4);
    z-index: 10;
}

/* The Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 10px;
    margin-top: 20px;
    background: #232527; /* Dark background like screenshot */
    padding: 20px;
    border-radius: 8px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circles */
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s;
}

.color-swatch:hover {
    transform: scale(1.2);
    border-color: white;
}

/* Item Card Styling */
.item-card {
    width: 100px;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    cursor: pointer;
    text-align: center;
     position: relative; /* Needed to position the indicator inside */
}

.wearing-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background-color: #00b06f; /* Roblox Green */
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px; /* Slight rounding like the reference */
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.item-card img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.item-card img:hover {
    border-color: #00a2ff;
}

.item-name {
    font-size: 12px;
    color: #393b3d;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 3D VIEWER CONTAINER --- */
#render-container {
    position: relative;
    width: 100%;
    /* Same height as the editor-left box to fill space */
    min-height: 350px; 
    border-radius: 4px;
    background-color: #e3e3e3; /* Light gray background for 3D area */
    overflow: hidden;
}

#render-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- RENDER BUTTONS --- */
.render-toggle-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.render-toggle-bar button {
    background-color: #393b3d;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.render-toggle-bar button:hover {
    background-color: #55585b;
}

.render-toggle-bar button.active {
    background-color: #00a2ff;
}
/* --- 2016 GAMES PAGE STYLING --- */

.games-page-container {
    background-color: #e3e3e3; /* Slightly darker background to make white cards pop */
}

.games-main-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
}

.games-list-container {
    flex: 1;
}

/* Category Headers */
.games-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.games-filter-header h2 {
    font-size: 20px;
    font-weight: 400;
    color: #393b3d;
    margin: 0;
}

/* Grid Layout */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

/* Game Card */
.game-item-card {
    background: #fff;
    padding: 0;
    border: 1px solid #fff; /* Border hidden until hover */
    text-decoration: none;
    transition: border 0.1s;
    display: block;
}

.game-item-card:hover {
    border: 1px solid #ccc;
}

.game-item-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #f2f2f2;
    overflow: hidden;
    position: relative;
}

.game-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play button overlay on hover (Classic 2016) */
.game-item-card:hover .game-item-thumb::after {
    content: '▶';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.1);
    color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-item-details {
    padding: 8px 5px;
}

.game-item-name {
    font-size: 14px;
    font-weight: 700;
    color: #393b3d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.game-item-creator {
    font-size: 11px;
    color: #888;
    margin-bottom: 5px;
}

.game-item-creator a {
    color: #00a2ff;
}

.game-item-stats {
    font-size: 11px;
    color: #888;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 2016 Green/Red Vote Bar */
.game-vote-bar {
    width: 100%;
    height: 3px;
    background-color: #d32f2f; /* Red (Dislikes) */
    border-radius: 1px;
    overflow: hidden;
    margin-top: 5px;
}

.game-vote-fill {
    height: 100%;
    background-color: #00b06f; /* Green (Likes) */
}

.ad-box {
    width: 300px;
    height: 250px;
    background-color: #e3e3e3;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    position: relative;
}

.ad-img { width: 100%; height: 100%; object-fit: cover; }
.ad-label { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.5); color: white; font-size: 10px; padding: 2px 4px; }

/* Headers */
.game-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    /* Removed padding so it aligns with the left-most card */
}

.game-row-title { font-size: 24px; font-weight: 400; color: #393b3d; }
.see-all-btn { font-size: 14px; color: #00a2ff; text-decoration: none; font-weight: 500; }
.see-all-btn:hover { text-decoration: underline; }

/* --- GRID LAYOUT --- */
.game-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px; /* Space between cards */
    margin-bottom: 30px;
    /* Align content to the left instead of center */
    justify-content: flex-start; 
}

/* --- GAME CARD --- */
.game-card {
    width: 196px; 
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

/* The rest of the CSS (game-thumb-container, etc.) remains the same */

.game-thumb-container {
    width: 196px;
    height: 110px; /* 16:9 Aspect Ratio */
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background: #fff;
    margin-bottom: 5px;
}

.game-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.game-card:hover .game-thumb-container img { opacity: 0.8; }

/* Text Styling */
.game-title {
    font-size: 14px;
    font-weight: 700;
    color: #393b3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    text-align: left; /* Title stays left aligned (standard UI) */
}

.game-card:hover .game-title { color: #00a2ff; text-decoration: underline; }

.game-stats {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
    text-align: left;
}

/* Rating Bar */
.rating-bar-container {
    width: 100%;
    height: 4px;
    background-color: #ccc;
    border-radius: 2px;
    overflow: hidden;
}

.rating-bar-fill { height: 100%; background-color: #555; }

/* --- SECONDARY NAVIGATION (LOGGED IN) --- */
.rbx-subheader {
    background-color: #ffffff;
    border-bottom: 1px solid #dadada;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center; /* Centers the links */
    margin-bottom: 10px;
}

.rbx-sub-nav-links {
    display: flex;
    gap: 25px;
}

.rbx-sub-menu-item {
    text-decoration: none;
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 5px;
    border-bottom: 2px solid transparent; /* Invisible border for hover effect */
    transition: all 0.2s;
}

.rbx-sub-menu-item:hover {
    color: #00a2ff; /* Roblox Blue */
    border-bottom: 2px solid #00a2ff;
}

/* --- CATALOG PAGE --- */
.catalog-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Sidebar */
.catalog-sidebar {
    width: 180px;
    flex-shrink: 0;
    font-size: 14px;
}

.catalog-header {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #393b3d;
}

.filter-group {
    margin-bottom: 20px;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 10px;
}

.filter-header {
    font-weight: 700;
    color: #393b3d;
    margin-bottom: 5px;
    cursor: pointer;
}

.filter-options {
    list-style: none;
    padding-left: 10px;
    margin: 0;
}

.filter-options li a {
    text-decoration: none;
    color: #00a2ff;
    font-size: 13px;
    line-height: 1.8;
}

.filter-options li a:hover { text-decoration: underline; }
.filter-options li a.active { font-weight: bold; color: #333; }

/* Search Box */
.catalog-search {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 15px;
}

/* Catalog Grid */
.catalog-results {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.catalog-card {
    width: 150px;
    background: white;
    border: 1px solid #e3e3e3; /* Subtle border */
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.catalog-card:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.card-thumb {
    width: 150px;
    height: 150px;
    background: #f2f2f2;
    position: relative;
}
.card-thumb img { width: 100%; height: 100%; object-fit: contain; }

.card-info { padding: 8px; font-size: 12px; }

/* Update this section in /api/core/AllCSS.css */

.card-title {
    color: #00a2ff;
    font-weight: 600;
    
    /* REMOVE THIS LINE: white-space: nowrap; */
    
    /* ADD/CHANGE TO THESE: */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 32px; /* Force height for 2 lines so alignment stays neat */
    line-height: 1.3;
    margin-bottom: 2px;
}
.catalog-card:hover .card-title { text-decoration: underline; }

.card-creator { color: #888; margin-bottom: 5px; font-size: 11px; }

.card-price { font-weight: 700; font-size: 12px; }
.price-robux { color: #00b06f; }
.price-tix { color: #b8860b; }
.price-free { color: #393b3d; }

/* --- ITEM DETAILS PAGE (Reusing Profile Styles + New) --- */
.item-purchase-area {
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.buy-btn {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid transparent;
}

.buy-btn-robux { background-color: #00b06f; border-color: #008c59; }
.buy-btn-robux:hover { background-color: #008c59; }

.buy-btn-tix { background-color: #b8860b; border-color: #966e09; }
.buy-btn-tix:hover { background-color: #966e09; }

.item-stat-grid {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
/* --- CATALOG SIDEBAR SUB-MENUS --- */
.sub-options {
    list-style: none;
    padding-left: 15px; /* Indent sub-items */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-options li a {
    font-size: 12px;
    color: #666;
    text-decoration: none;
}

.sub-options li a:hover { color: #00a2ff; text-decoration: underline; }
.sub-options li a.active { color: #393b3d; font-weight: bold; }


/* --- CREATOR MINI-PROFILE ON CARD --- */
.card-creator-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.creator-headshot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ddd;
    object-fit: cover;
}

.creator-link {
    font-size: 11px;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.creator-link:hover { color: #00a2ff; text-decoration: underline; }
/* --- MODAL OVERLAY --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* --- MODAL BOX (Light Theme) --- */
.modal-box {
    background-color: #ffffff; /* White background */
    width: 400px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    overflow: hidden;
    color: #393b3d; /* Dark text */
    font-family: 'HCo Gotham SSm', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border: 1px solid #a3a3a3;
}

/* Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e3e3e3;
    background: #fff;
}
.modal-title { font-size: 22px; font-weight: 400; }
.modal-close { 
    cursor: pointer; font-size: 24px; color: #393b3d; font-weight: bold; line-height: 1;
}
.modal-close:hover { color: #000; }

/* Body */
.modal-body {
    padding: 20px;
    text-align: center;
}

.modal-text {
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Preview Box */
.modal-item-preview {
    width: 110px;
    height: 110px;
    background: #fff;
    border: 1px solid #ccc; /* Light border */
    border-radius: 4px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.modal-item-preview img { width: 100%; height: 100%; object-fit: contain; }

/* Footer / Buttons */
.modal-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-bottom: 5px;
}

/* General Modal Button */
.modal-btn {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 110px;
    color: white;
}

/* Cancel Button */
.modal-btn-cancel {
    background-color: #fff;
    color: #393b3d;
    border: 1px solid #777;
}
.modal-btn-cancel:hover { background-color: #e3e3e3; }

/* Balance Text */
.modal-balance-text {
    font-size: 12px;
    color: #666; /* Light gray text */
    margin-top: 15px;
    font-weight: 500;
}
/* --- MODAL BUTTON COLORS --- */
/* Overrides for the generic modal button */
.modal-btn.btn-robux {
    background-color: #00b06f;
    color: white;
    border-color: #008c59;
}
.modal-btn.btn-robux:hover { background-color: #008c59; }

.modal-btn.btn-tix {
    background-color: #b8860b;
    color: white;
    border-color: #966e09;
}
.modal-btn.btn-tix:hover { background-color: #966e09; }

.modal-btn.btn-free {
    background-color: #00a2ff;
    color: white;
    border-color: #0088cc;
}
.modal-btn.btn-free:hover { background-color: #0088cc; }

/* Disabled state */
.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
/* --- HOME PAGE SPECIFIC --- */
.home-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.home-header {
    display: flex;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    gap: 20px;
}

.home-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #f2f2f2;
}

.home-header h1 {
    margin: 0;
    font-size: 28px;
}

.status-update {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.status-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Home Sections */
.home-content-row {
    display: flex;
    gap: 20px;
}

.home-main-col { flex: 1; }
.home-side-col { width: 300px; }

.home-section {
    background: white;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.home-section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

/* Friends Grid */
.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.friend-card {
    text-align: center;
    text-decoration: none;
}

.friend-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #f8f8f8;
}

.friend-name {
    display: block;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
}

/* --- FRIENDS PAGE STYLES --- */
.friends-content {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.friends-tabs {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 20px;
}

.friends-tab {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.friends-tab:hover {
    color: #000;
}

.friends-tab.active {
    color: #393b3d;
    border-bottom-color: #393b3d;
}

/* User Card Grid */
.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.user-card {
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    background: #fff;
    transition: box-shadow 0.2s;
}

.user-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.user-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.user-card-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.btn-small {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
}

.btn-accept { background-color: #00b06f; color: white; }
.btn-decline { background-color: #fff; border-color: #ccc; color: #333; }
.btn-remove { background-color: #fff; border-color: #ff4b4b; color: #ff4b4b; }
.btn-accept:hover { background-color: #008c59; }
.btn-decline:hover { background-color: #f5f5f5; }

/* --- NAVIGATION DROPDOWN --- */
.rbx-nav-dropdown {
    position: relative;
    display: flex; /* Changed to flex */
    align-items: center; /* Centers the gear vertically */
    height: 40px; /* Match the height of .rbx-header */
}

.rbx-btn-settings {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    padding: 0 10px;
    height: 100%; /* Makes the button itself full height */
    display: flex;
    align-items: center;
}

.rbx-dropdown-content {
    display: none;
    position: absolute;
    top: 40px; /* Forces it to start exactly at the bottom of the nav bar */
    right: 0;
    background-color: #191B1D;
    min-width: 150px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.5);
    z-index: 1000;
    border-radius: 0 0 4px 4px; /* Rounded bottom corners only */
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none; /* Looks cleaner attached to the bar */
}

/* THE INVISIBLE BRIDGE: 
   This ensures that if there's any gap, the hover stays active */
.rbx-dropdown-content::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

.rbx-dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: background 0.2s;
}

.rbx-dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Show dropdown when hovering ANYWHERE on the parent container */
.rbx-nav-dropdown:hover .rbx-dropdown-content {
    display: block;
}

/* --- SETTINGS PAGE STYLES --- */
.settings-box {
    background: white;
    padding: 25px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    max-width: 650px;
    margin: 40px auto;
}

.form-section {
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.form-section:last-child {
    border-bottom: none;
}

.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

/* Make all inputs and textareas look consistent */
.settings-box input[type="text"], 
.settings-box input[type="password"], 
.settings-box textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Important for width */
    font-size: 14px;
    font-family: inherit;
}

.settings-box textarea {
    resize: vertical;
}

/* Style the buttons */
.save-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #00a2ff;
    color: white;
    border: 1px solid #0088cc;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

.save-btn:hover {
    background-color: #0088cc;
}

.save-btn.btn-robux {
    background-color: #00b06f;
    border-color: #008c59;
}
/* --- VIEW TOGGLE BOX (Bottom Right) --- */
.render-controls-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 100;
}

.view-toggle-box {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.1s;
    user-select: none;
}

.view-toggle-box:hover {
    background-color: #ffffff;
    color: #333;
}

/* --- RIG SWITCHER (Below Thumbnail) --- */
.rig-switch-container {
    display: flex;
    background-color: #e3e3e3;
    padding: 3px;
    border-radius: 6px;
    margin-top: 15px;
    width: 100%;
    max-width: 200px;
}

.rig-option {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.rig-option.active {
    background-color: #ffffff;
    color: #00a2ff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* --- GAME DETAIL SPECIFIC --- */
.play-button-container {
    margin-bottom: 20px;
}

.btn-play {
    background-color: #00b06f;
    border: 1px solid #008c59;
    color: white;
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: background-color 0.2s;
}

.btn-play:hover {
    background-color: #008c59;
}

/* Statistics Grid for Games */
.game-stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.game-stat-item {
    flex: 1;
    min-width: 80px;
    text-align: left;
}

.game-stat-label {
    font-size: 12px;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
}

.game-stat-value {
    font-size: 16px;
    color: #393b3d;
    margin-top: 2px;
}
/* --- WINDOWS STYLE INDETERMINATE LOADER --- */
.loader-container {
    width: 100%;
    height: 10px; /* Slimmer, more like a system loader */
    background-color: #e3e3e3;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin: 25px 0;
    border: 1px solid #dcdcdc;
}

.loader-fill {
    width: 40%; /* The size of the sliding block */
    height: 100%;
    background-color: #00b06f; /* Roblox Green */
    position: absolute;
    left: -40%;
    border-radius: 5px;
    animation: slide-loader 1.5s infinite ease-in-out;
}

@keyframes slide-loader {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}
/* --- 2017 GAME PAGE LAYOUT --- */
.game-main-container {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.game-top-section {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.game-media {
    flex: 1.5; /* Larger area for the image */
}

.game-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.game-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-title-header {
    font-size: 32px;
    font-weight: 400;
    color: #393b3d;
    margin: 0;
}

.game-creator-link {
    font-size: 14px;
    color: #888;
    margin: 5px 0 20px 0;
}

.game-creator-link a {
    color: #00a2ff;
    text-decoration: none;
}

/* --- TABS SYSTEM --- */
.game-tabs-container {
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 20px;
    display: flex;
    gap: 40px;
}

.game-tab {
    padding: 10px 5px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.game-tab:hover {
    color: #000;
}

.game-tab.active {
    color: #393b3d;
    border-bottom: 3px solid #00a2ff; /* Active blue line */
}

/* --- DESCRIPTION SECTION --- */
.game-description-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #393b3d;
}

.game-description-text {
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    white-space: pre-wrap;
}

.game-stats-list {
    margin-top: 30px;
    display: flex;
    border-top: 1px solid #eee;
    padding-top: 15px;
    gap: 40px;
}
/* --- PAGINATION STYLES --- */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 10px;
}

.page-btn {
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    color: #393b3d;
}

.page-btn:disabled {
    background-color: #f5f5f5;
    color: #ccc;
    cursor: default;
}

.page-info {
    font-size: 14px;
    color: #666;
}
/* --- LOGIN & REGISTER PAGES --- */
.auth-wrapper {
    max-width: 400px;
    margin: 60px auto;
    background-color: white;
    padding: 35px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.auth-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    color: #393b3d;
}

.auth-form-group {
    margin-bottom: 15px;
}

.auth-label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #393b3d;
    margin-bottom: 5px;
}

.auth-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #c3c3c3;
    border-radius: 3px;
    box-sizing: border-box; /* Prevents input from sticking out */
    font-size: 16px;
}

.auth-input:focus {
    border-color: #00a2ff;
    outline: none;
}

.auth-btn {
    width: 100%;
    background-color: #00a2ff;
    color: white;
    border: 1px solid #0088cc;
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
}

.auth-btn:hover {
    background-color: #0088cc;
}

.auth-message {
    background-color: #fff1f1;
    border: 1px solid #ffcaca;
    color: #d8000c;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.auth-link {
    color: #00a2ff;
    text-decoration: none;
    font-weight: 600;
}

.auth-link:hover {
    text-decoration: underline;
}
/* --- BROWSE / PEOPLE PAGE --- */
.search-container {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.search-input-large {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.browse-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.browse-user-card {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

.browse-user-card:hover {
    background-color: #fdfdfd;
    border-color: #00a2ff;
}

.browse-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #eee;
    margin-right: 20px;
    flex-shrink: 0;
}

.browse-info {
    flex: 1;
    min-width: 0; /* Allows text truncation to work */
}

.browse-username {
    font-size: 18px;
    font-weight: 700;
    color: #393b3d;
    margin: 0;
}

.browse-user-card:hover .browse-username {
    color: #00a2ff;
    text-decoration: underline;
}

.browse-blurb {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-list-item {
    border: 1px solid #e3e3e3;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.server-players {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.server-player-headshot {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #eee;
}