/* styles.css */
/* Import Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Minimal Tailwind build for used classes */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
:root {
    /* Base Theme Inspired by skin.club and xxxxxx.png */
    --primary-bg: #141225; /* Very dark purple/blue - Main page background */
    --secondary-bg: #1E1C30; /* Darker elements, cards, header/footer background */
    --tertiary-bg: #23203C; /* Inputs, slightly lighter dark elements, nav items */
    --primary-text: #BEBBDA; /* Light purple/gray text */
    --secondary-text: #716D9E; /* Dimmer text, icons, inactive elements */
    --tertiary-text: #FFFFFF; /* Pure white for highlights or important text */

    /* Accents */
    --accent-purple: #5C49D0;
    --accent-purple-hover: #8471F7;
    --accent-purple-active: #5543C1;
    --accent-pink: #CF3464; /* Vibrant pink for highlights, CTAs */
    --accent-pink-hover: #E04A78;
    --accent-gold: #FFD700; /* Existing gold, use for highlights */
    --accent-green: #26C897; /* skin.club green */
    --accent-green-hover: #1DB384;
    --accent-red: #EF4444; /* Existing red */
    --accent-red-hover: #DC2626;
    --accent-blue: #3B82F6; /* Existing blue */

    /* Borders & Shadows */
    --border-color: #2E2A4C; /* Subtle border for dark elements */
    --border-color-light: #4A456C; /* Slightly lighter border */
    --shadow-color-soft: rgba(0, 0, 0, 0.2);
    --shadow-color-medium: rgba(0, 0, 0, 0.3);

    /* Clip Paths for skin.club style buttons/elements */
    --clip-path-button: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    --clip-path-button-sm: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
    --clip-path-nav-item: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); /* More rectangular for nav items */
    --clip-path-octagon: var(--clip-path-button); /* Alias for general octagonal shape */

    /* Original theme colors - for reference or specific overrides if needed */
    --gold: #FFD700; /* Keep for direct use if needed */
    --purple-start: #2b004e; /* Deprecated by new theme */
    --purple-end: #6a0dad;   /* Deprecated by new theme */
    --green-start: #10B981; /* Use --accent-green */
    --green-end: #059669;   /* Use --accent-green-hover */
    --red-start: #EF4444;   /* Use --accent-red */
    --red-end: #DC2626;     /* Use --accent-red-hover */
    --yellow-purple-start: #F59E0B; /* Consider replacing with new accents */
    --yellow-purple-end: #D946EF;   /* Consider replacing with new accents */
    --plinko-bg: var(--tertiary-bg); /* Update plinko bg */

    /* RGB versions for rgba() usage */
    --primary-bg-rgb: 20, 18, 37;
    --secondary-bg-rgb: 30, 28, 48;
    --accent-purple-rgb: 92, 73, 208;
    --accent-blue-rgb: 59, 130, 246;
    --border-color-rgb: 46, 42, 76; /* Added for border transparency */
    --tertiary-bg-rgb: 35, 32, 60; /* Added for bio transparency */
}

/* Profile page container adjustments when custom background is active */
#profile-container.profile-background-active {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Crashpoints icon styling */
.crashpoints-icon {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.7)) drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
}

/* Chat specific styles */
.chat-box {
    transition: height 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.chat-content.hidden + .chat-box {
    height: auto;
}

/* Custom color classes */
.text-gold-500 {
    color: var(--gold);
}

.bg-gold-500 {
    background-color: var(--gold);
}

.bg-gold-600 {
    background-color: #DAA520;
}

.border-gold-500 {
    border-color: var(--gold);
}

/* Reusable utility classes for casino theme */
.casino-container {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color-soft);
    padding: 20px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.casino-title {
    color: var(--primary-text);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-weight: 700;
}

.casino-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px; /* skin.club uses subtle radius or none */
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    box-shadow: 0 2px 8px var(--shadow-color-soft);
    color: var(--primary-text);
    text-align: center;
}

.casino-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color-medium);
    border-color: var(--accent-purple);
}

.casino-card-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--accent-gold); /* Gold for card titles, or var(--primary-text) */
}

.casino-card-text {
    margin: 5px 0;
    font-size: 0.9rem;
    color: var(--secondary-text); /* Dimmer text for descriptions */
}

.casino-button {
    width: 100%;
    padding: 10px 25px; /* Adjusted padding for clip-path */
    border-radius: 0; /* clip-path handles shape */
    font-weight: 700; /* Bolder */
    color: var(--tertiary-text); /* White text on buttons */
    transition: background-color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    margin-top: 5px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    clip-path: var(--clip-path-button);
    position: relative; 
    background-color: var(--accent-purple); /* Default button color */
    display: inline-flex; /* For centering content if needed */
    align-items: center;
    justify-content: center;
}

.casino-button:hover {
    background-color: var(--accent-purple-hover);
    filter: brightness(1.1); /* skin.club often uses brightness change */
    transform: translateY(-1px);
}
.casino-button:active {
    background-color: var(--accent-purple-active);
    filter: brightness(0.95);
    transform: translateY(0px);
}

.casino-button-green {
    background-color: var(--accent-green);
}
.casino-button-green:hover {
    background-color: var(--accent-green-hover);
    filter: brightness(1.1);
}

.casino-button-red {
    background-color: var(--accent-red);
}
.casino-button-red:hover {
    background-color: var(--accent-red-hover);
    filter: brightness(1.1);
}

.casino-button-yellow-purple,
.casino-button.casino-button-yellow { /* Target existing yellow class */
    background-color: var(--accent-pink); /* Use vibrant pink for this */
}
.casino-button-yellow-purple:hover,
.casino-button.casino-button-yellow:hover {
    background-color: var(--accent-pink-hover);
    filter: brightness(1.1);
}

/* Small icon buttons like #toggle-mode, #new-card */
#toggle-mode, #new-card {
    clip-path: var(--clip-path-button-sm);
    padding: 8px; 
    background-color: var(--tertiary-bg);
    color: var(--secondary-text);
    width: 40px; /* Fixed width for icon buttons */
    height: 40px; /* Fixed height for icon buttons */
}
#toggle-mode:hover, #new-card:hover {
    background-color: var(--accent-purple);
    color: var(--tertiary-text);
    filter: brightness(1.1);
}


.casino-modal { /* This is the overlay */
    transition: opacity 0.3s ease-in-out;
    background: rgba(var(--primary-bg-rgb), 0.85); 
    border: none; 
    box-shadow: none; 
}

.casino-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.casino-input {
    background: var(--tertiary-bg); 
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    padding: 10px 12px; /* skin.club like padding */
    border-radius: 4px; 
    width: 100%; 
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 14px;
}

.casino-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 2px rgba(var(--accent-purple-rgb), 0.3);
}

/* Dropdown selection styling */
select.casino-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFD700'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.casino-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
}

.styled-dropdown {
    background-color: var(--tertiary-bg); /* Use defined theme variable */
    border: 1px solid var(--gold);
    color: var(--primary-text);
    transition: box-shadow 0.2s ease-in-out;
    position: relative;
}

.styled-dropdown:hover {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
}

body {
    background: url('https://ctrl8.davidv053.nl/bg.png') center center / cover no-repeat fixed;
    font-family: 'Poppins', sans-serif; /* Font is preserved */
    color: var(--primary-text); 
    background-color: var(--primary-bg); 
    
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures body takes at least full viewport height */
    
    padding-top: 70px; /* Add padding to body to offset fixed header height */
    /* padding-bottom: 150px; /* Removed this to allow footer to stick to bottom */
}

.main-content-area {
    flex-grow: 1; /* Allows this area to expand and push the footer down */
}

/* Ensure custom backgrounds from JS take precedence and can set their own blur */
body.custom-background {
    /* backdrop-filter is now set by JS for custom backgrounds */
}

/* Header styles - skin.club inspired */
header {
    position: fixed; /* Fixed header */
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--secondary-bg); 
    box-shadow: 0 2px 5px var(--shadow-color-soft); 
    border-bottom: 1px solid var(--border-color); 
    z-index: 1000; /* High z-index for fixed header */
    padding: 0 20px; /* Horizontal padding */
    height: 70px; /* Fixed height like skin.club */
    display: flex;
    align-items: center;
}

.header-container { /* Replaces .max-w-7xl for header structure */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1880px; /* skin.club max width */
    margin: 0 auto;
    height: 100%;
}

.header-logo a {
    display: flex;
    align-items: center;
}
.header-logo img {
    height: 40px; /* Adjust as needed */
    width: auto;
    object-fit: contain; /* Ensure logo isn't squished */
}

header nav {
    display: flex;
    align-items: center;
    gap: 6px; /* Gap between nav items */
    height: 100%;
}

header nav a.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* Horizontal padding */
    height: 48px; /* skin.club nav item height */
    background-color: var(--tertiary-bg);
    color: var(--secondary-text);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: var(--clip-path-nav-item); /* More rectangular clip-path */
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative; /* For pseudo-elements like borders or glows */
}
header nav a.nav-item:before { /* Inner border effect */
    content: "";
    position: absolute;
    top: 1px; right: 1px; bottom: 1px; left: 1px;
    background-color: transparent;
    clip-path: var(--clip-path-nav-item);
    border: 1px solid var(--border-color); /* Subtle inner border */
    pointer-events: none;
    z-index: 0;
    transition: border-color 0.2s ease;
}


header nav a.nav-item:hover,
header nav a.nav-item.active { /* Style for active/hovered nav item */
    background-color: var(--accent-purple);
    color: var(--tertiary-text);
}
header nav a.nav-item:hover:before,
header nav a.nav-item.active:before {
    border-color: var(--accent-purple-hover);
}

header nav a.nav-item i {
    margin-right: 8px;
    font-size: 16px; /* Icon size */
}

/* Header User Info Section (Right Side) */
.header-user-info {
    display: flex;
    align-items: center;
    gap: 15px; /* Gap between user info elements */
    color: var(--primary-text);
}

.user-stat-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: var(--tertiary-bg);
    border-radius: 4px; /* skin.club uses rounded rects for these */
    font-size: 13px;
    font-weight: 500;
}
.user-stat-item img, .user-stat-item i { /* Ensure i tags for icons are also styled */
    height: 20px; /* Adjust icon/image size */
    width: 20px; /* Fixed width for icons */
    object-fit: contain;
    margin-right: 6px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); /* Subtle shadow for icons */
}
.user-stat-item span { /* Text part of the stat */
    color: var(--tertiary-text); /* Brighter text for values */
}
#multiplier-info span#multiplier-value { color: var(--accent-green); } /* Green for multiplier */


.dropdown { /* General dropdown container, used for profile */
    position: relative;
}
.profile-dropdown-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    background-color: var(--tertiary-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}
.profile-picture {
    width: 32px; /* Smaller avatar */
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--accent-purple);
    margin-right: 8px;
}
.profile-name {
    color: var(--primary-text);
    font-weight: 500;
    font-size: 13px;
    margin-right: 5px;
}
.dropdown-arrow { /* Simple chevron */
    font-size: 10px;
    color: var(--secondary-text);
    margin-left: 5px;
}

.header-login-button a {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    background-color: var(--accent-green); /* skin.club uses green for Steam login */
    color: var(--tertiary-text);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    clip-path: var(--clip-path-button-sm); /* Apply clip-path */
}
.header-login-button a:hover {
    background-color: var(--accent-green-hover);
}

/* Loading Spinner */
.loading-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--secondary-bg-rgb), 0.75); /* Use theme variable with opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Ensure it's above content */
    border-radius: 8px; /* Match casino-container radius if used within */
    transition: opacity 0.3s ease-in-out;
}

.loading-spinner {
    border: 5px solid var(--border-color-light); /* Light border for the track */
    border-top: 5px solid var(--accent-purple); /* Accent color for the spinner part */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure .hidden class is available and effective */
.hidden {
    display: none !important;
}
.header-login-button img {
    height: 20px; /* Adjust Steam logo size */
    margin-right: 8px;
}


/* Dropdown content for header profile */
.dropdown-content { 
    display: none;
    position: absolute;
    background-color: var(--secondary-bg); 
    min-width: 220px; /* Wider dropdown */
    box-shadow: 0 8px 16px var(--shadow-color-medium); 
    border-radius: 4px;
    top: 100%; /* Remove the 5px gap */
    z-index: 1010; /* Ensure it's above other header elements */
    border: 1px solid var(--border-color); 
    animation: dropdownFadeIn 0.2s ease-out;
}
.profile-dropdown-toggle + .dropdown-content { /* Specific for profile */
    right: 0; /* Align to the right */
    left: auto;
}

.dropdown-content a, .dropdown-content button {
    color: var(--primary-text);
    padding: 10px 15px; 
    text-decoration: none;
    display: flex; /* Align icon and text */
    align-items: center;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-content a i, .dropdown-content button i {
    margin-right: 10px;
    width: 16px; /* Fixed width for icons */
    color: var(--secondary-text); /* Dimmer icon color */
    transition: color 0.2s ease;
}

.dropdown-content a:hover, .dropdown-content button:hover {
    background-color: var(--accent-purple); 
    color: var(--tertiary-text); 
}
.dropdown-content a:hover i, .dropdown-content button:hover i {
    color: var(--tertiary-text);
}

.dropdown:hover > .dropdown-content { /* Show on hover - direct child */
    display: block;
}

.dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    overflow: hidden;
    background-color: var(--border-color); /* Use existing border color variable */
    border: 0;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Blackjack Table Styles */
.blackjack-table {
    background: linear-gradient(135deg, #0a3d0f, #145214); /* Dark green casino felt */
    border: 4px solid #8B4513; /* Dark wood border */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.blackjack-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        transparent,
        transparent 20px,
        rgba(255, 255, 255, 0.05) 20px,
        rgba(255, 255, 255, 0.05) 22px
    );
    pointer-events: none;
}

.card {
    width: 60px;
    height: 90px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.6);
}

.chip {
    font-weight: bold;
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chip:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

/* Notification styles */
#notification-container {
    max-width: 320px;
}

.notification {
    position: relative;
    transition: transform 0.3s ease-in-out;
    background-color: #4B5563; /* Default Gray-600 */
}

.notification.success {
    background-color: #10B981; /* Green-500 */
}

.notification.error {
    background-color: #EF4444; /* Red-500 */
}

.notification h3 {
    margin-bottom: 0.25rem;
}

.notification p {
    line-height: 1.25;
}

.loading-bar {
    position: relative;
    margin-top: 0.5rem;
    height: 0.25rem;
    background-color: #6B7280; /* Gray-500 */
    border-radius: 9999px;
    overflow: hidden;
}

.loading-bar-progress {
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.7);
    transition: width 7s linear;
}

/* Bingo card styles */
#bingo-card .pointer-events-none {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

#bingo-card div {
    user-select: none;
}

#bingo-card .cell-locked {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    background-color: #100E1C !important; /* Even darker for locked */
    border-color: #0A0912 !important; /* Darker border for locked */
}

#bingo-card .power-up-cell {
    background-color: var(--accent-gold) !important; /* Gold for power-ups */
    color: var(--primary-bg) !important; /* Dark text on gold */
    box-shadow: 0 0 10px var(--accent-gold), 0 0 20px var(--accent-gold);
    animation: pulseGold 1.5s infinite ease-in-out;
}
@keyframes pulseGold {
    0% { box-shadow: 0 0 5px var(--accent-gold), 0 0 10px var(--accent-gold); }
    50% { box-shadow: 0 0 15px var(--accent-gold), 0 0 25px var(--accent-gold); }
    100% { box-shadow: 0 0 5px var(--accent-gold), 0 0 10px var(--accent-gold); }
}

/* Video prompt and game ID display */
#video-prompt,
#game-id-display {
    font-weight: 700;
    text-align: center;
}

/* Lookup bingo card and video container */
#lookup-bingo-card {
    margin-bottom: 1rem;
}

#lookup-bingo-card div {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.25rem;
    transition: all 200ms ease-in-out;
}

#lookup-video-container {
    margin-left: auto;
}

/* Inventory page styles */
#inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 10px;
}

#inventory-grid div {
    @apply casino-card;
}

#inventory-grid div h3 {
    @apply casino-card-title;
}

#inventory-grid div p {
    @apply casino-card-text;
}

#inventory-grid .activate-item,
#inventory-grid .deactivate-item,
#inventory-grid .sell-item {
    @apply casino-button;
}

#inventory-grid .activate-item {
    @apply casino-button-green;
}

#inventory-grid .deactivate-item {
    @apply casino-button-red;
}

#inventory-grid .sell-item {
    @apply casino-button-yellow-purple;
}

/* Inventory modal styles */
#inventory-modal {
    @apply casino-modal;
}

/* Trade page styles */
#pending-trades, #trade-history {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding: 10px;
    width: 100%;
}

#pending-trades div, #trade-history div {
    @apply casino-card;
    padding: 15px;
}

#pending-trades h3, #trade-history h3 {
    @apply casino-card-title;
}

#pending-trades p, #trade-history p {
    @apply casino-card-text;
}

#pending-trades button, #trade-history button {
    @apply casino-button;
}

#pending-trades .accept-trade {
    @apply casino-button-green;
}

#pending-trades .decline-trade, #pending-trades .cancel-trade {
    @apply casino-button-red;
}

#pending-trades .flag-trade, #pending-trades .post-comment {
    @apply casino-button-yellow-purple;
}

#pending-trades textarea {
    @apply casino-input;
    margin-top: 5px;
}

#refresh-trades {
    @apply casino-button casino-button-green;
    margin-top: 10px;
}

#propose-trade {
    @apply casino-button casino-button-green;
    margin-bottom: 10px;
}

/* Trade modal styles */
#trade-proposal-modal {
    @apply casino-modal;
}

#trade-proposal-modal > div {
    animation: popup 0.3s ease-out forwards;
    max-height: 80vh;
    overflow: hidden;
    padding: 1.5rem;
}

/* Trade-up modal styles */
#tradeup-modal {
    @apply casino-modal;
}

#tradeup-modal > div {
    animation: popup 0.3s ease-out forwards;
}

/* Trade confirmation modal styles */
#trade-confirmation-modal {
    @apply casino-modal;
}

#trade-confirmation-modal > div {
    animation: popup 0.3s ease-out forwards;
    max-height: 80vh;
    overflow: hidden;
    padding: 1.5rem;
}

/* Achievements page styles */
#achievements-grid div {
    @apply casino-card;
    padding: 10px;
}

#achievements-grid div h3 {
    @apply casino-card-title;
    margin-bottom: 5px;
}

#achievements-grid div p {
    margin: 3px 0;
    font-size: 0.85rem;
}

#pagination-controls button {
    @apply casino-button casino-button-green;
    margin: 0 5px;
}

#pagination-controls button:disabled {
    background: linear-gradient(135deg, #4B5563, #374151); /* Gray gradient for disabled */
    cursor: not-allowed;
}

#offer-grid, #request-grid {
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

#offer-grid div, #request-grid div {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
    border-radius: 0.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
}

#offer-grid div:hover, #request-grid div:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.offer-item.selected, .request-item.selected {
    background-color: #3B82F6; /* Blue-500 */
    transform: scale(1.02);
    color: #FFFFFF;
}

/* Item tooltip styles */
.item-tooltip {
    position: absolute;
    z-index: 1000;
    max-width: 200px;
    pointer-events: none;
}

/* Pending trades and history */
#pending-trades div, #trade-history div {
    transition: transform 0.2s ease-in-out;
}

#pending-trades div:hover, #trade-history div:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.accept-trade, .decline-trade, .cancel-trade, .flag-trade, .post-comment {
    transition: transform 0.2s ease-in-out;
}

.accept-trade:hover, .decline-trade:hover, .cancel-trade:hover, .flag-trade:hover, .post-comment:hover {
    transform: scale(1.05);
}

/* Flagged trades admin UI */
#flagged-trades div {
    transition: transform 0.2s ease-in-out;
}

#flagged-trades div:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.reverse-trade, .resolve-flag {
    transition: transform 0.2s ease-in-out;
}

.reverse-trade:hover, .resolve-flag:hover {
    transform: scale(1.05);
}

/* Rarity-based border colors */
#inventory-grid .rarity-common,
#possible-items .rarity-common,
.unbox-item.rarity-common,
#offer-grid .rarity-common,
#request-grid .rarity-common {
    border: 2px solid #4CAF50; /* Green */
}

#inventory-grid .rarity-rare,
#possible-items .rarity-rare,
.unbox-item.rarity-rare,
#offer-grid .rarity-rare,
#request-grid .rarity-rare {
    border: 2px solid #2196F3; /* Blue */
}

#inventory-grid .rarity-epic,
#possible-items .rarity-epic,
.unbox-item.rarity-epic,
#offer-grid .rarity-epic,
#request-grid .rarity-epic {
    border: 2px solid #9C27B0; /* Purple */
}

#inventory-grid .rarity-legendary,
#possible-items .rarity-legendary,
.unbox-item.rarity-legendary,
#offer-grid .rarity-legendary,
#request-grid .rarity-legendary {
    border: 2px solid #FFD700; /* Gold */
}

/* Inventory grid buttons */
#inventory-grid .activate-item,
#inventory-grid .deactivate-item,
#inventory-grid .sell-item {
    width: 100%;
}

/* Unboxing grid styles */
#unboxing-grid div {
    transition: transform 0.2s ease-in-out;
}

#unboxing-grid div:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#unboxing-grid .open-unbox-modal {
    width: 100%;
}

/* Box-specific border colors */
.border-common { border-color: #4CAF50; }
.border-rare { border-color: #2196F3; }
.border-epic { border-color: #9C27B0; }
.border-legendary { border-color: #FFD700; }

/* Unbox modal styles */
#unbox-modal .unbox-modal-content { /* Target the inner content div */
    animation: popup 0.3s ease-out forwards;
    overflow-x: hidden; /* Prevent horizontal scrollbars on the modal content */
    /* max-height: 90vh; */
    /* overflow-y: auto; */
}

@keyframes popup {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Unbox animation styles */
/* #spinner-container holds #animation-box and the marker */
#animation-box {
    /* height: 100%; */ /* Set by Tailwind h-32 sm:h-36 */
    /* overflow: hidden; */ /* Set by Tailwind */
    /* position: relative; */ /* Set by Tailwind */
    /* border: 2px solid var(--gold); */ /* Set by Tailwind */
    /* border-radius: 8px; */ /* Set by Tailwind */
    /* background-color: var(--gray-900); */ /* Set by Tailwind */
}

/* Central marker for the spinner */
#animation-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px; /* Slightly thicker marker */
    height: 100%;
    background: var(--accent-gold); /* Use accent gold */
    transform: translateX(-50%);
    z-index: 5; /* Ensure it's above the strip but below modal controls */
    box-shadow: 0 0 8px var(--accent-gold); /* Add a subtle glow to the marker */
}

/* Fade edges of the animation-box */
#animation-box::before { /* Left fade */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px; /* Width of the fade effect */
    height: 100%;
    background: linear-gradient(to right, var(--secondary-bg), transparent); /* Match modal bg */
    z-index: 4; /* Above strip, below marker */
    pointer-events: none;
}
/* The duplicated ::after block that was here has been removed. */
/* The correct ::after rule for the central marker is defined earlier in the file. */

#unbox-items-strip {
    display: flex;
    z-index: 3; /* Ensure strip is below marker and fades */
    /* height: 100%; */ /* Set by Tailwind on parent */
    /* position: absolute; left: 0; top: 0; */ /* Set by Tailwind */
    white-space: nowrap; /* Prevents items from wrapping */
    will-change: transform; /* Performance hint for animation */
    /* min-width is set dynamically by JS or by having many items */
}

.unbox-item {
    flex: 0 0 auto; /* Prevent shrinking/growing */
    width: 100px; /* Slightly wider items in spinner */
    height: 100%; /* Fill the height of the strip */
    margin: 0 5px; /* Spacing between items */
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--tertiary-bg); /* Slightly lighter than animation-box bg */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; /* Clip content like long names */
}

.unbox-item:hover { /* Subtle hover effect for items if strip is static */
    /* transform: scale(1.05); */
    /* box-shadow: 0 0 10px var(--accent-purple); */
}

.unbox-item-image {
    width: 50px; /* Adjust image size */
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
}

.unbox-item-name {
    width: 100%;
    font-size: 0.75rem; /* Small but readable */
    font-weight: 600;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.unbox-item-rarity {
    width: 100%;
    font-size: 0.65rem;
    color: var(--secondary-text);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rarity coloring for unbox-item text or border (optional) */
.unbox-item.rarity-common .unbox-item-name { color: #4CAF50; }
.unbox-item.rarity-rare .unbox-item-name { color: #2196F3; }
.unbox-item.rarity-epic .unbox-item-name { color: #9C27B0; }
.unbox-item.rarity-legendary .unbox-item-name { color: var(--accent-gold); }


/* Unbox result display */
#unbox-result-display {
    animation: fadeIn 0.5s ease-in-out; /* Keep existing fadeIn */
}
#unbox-result-item-details {
    /* background-color: var(--tertiary-bg); */ /* Set by Tailwind */
    /* border: 2px solid var(--accent-gold); */ /* Add a gold border to result */
    /* box-shadow: 0 0 15px var(--accent-gold); */ /* Glow for the result */
}
#unbox-result-item-details img {
    /* width: 100px; height: 100px; */ /* Set by Tailwind */
    /* border: 1px solid var(--border-color-light); */
}


/* Possible Items Grid (inside <details>) */
#possible-items-grid {
    /* background-color: var(--secondary-bg); */ /* Darker than modal content for contrast */
    /* border: 1px solid var(--border-color); */
}
.unbox-item-preview { /* Styling for items in the "Possible Items" grid */
    background-color: var(--tertiary-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.unbox-item-preview:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.item-preview-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 8px auto;
}
.item-preview-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 3px;
    word-break: break-word; /* Allow long names to wrap */
    white-space: normal;
    line-height: 1.2;
    min-height: 1.2em * 2; /* Approx 2 lines */
}
.item-preview-rarity, .item-preview-value, .item-preview-chance {
    font-size: 0.7rem;
    color: var(--secondary-text);
    margin-bottom: 2px;
}
.item-preview-chance {
    color: var(--accent-green); /* Highlight chance */
}

/* Rarity border colors for casino-card on main unboxing page */
.casino-card.rarity-common { border-left: 4px solid #4CAF50; }
.casino-card.rarity-rare { border-left: 4px solid #2196F3; }
.casino-card.rarity-epic { border-left: 4px solid #9C27B0; }
.casino-card.rarity-legendary { border-left: 4px solid var(--accent-gold); }

/* Ensure glow effects from effects.css apply correctly */
.casino-card.shadow-glow-common { box-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50, 0 4px 12px var(--shadow-color-soft); }
.casino-card.shadow-glow-rare { box-shadow: 0 0 10px #2196F3, 0 0 20px #2196F3, 0 4px 12px var(--shadow-color-soft); }
.casino-card.shadow-glow-epic { box-shadow: 0 0 10px #9C27B0, 0 0 20px #9C27B0, 0 4px 12px var(--shadow-color-soft); }
.casino-card.shadow-glow-legendary { box-shadow: 0 0 10px var(--accent-gold), 0 0 20px var(--accent-gold), 0 4px 12px var(--shadow-color-soft); }

/* Ensure the main unboxing grid uses the casino-card styles properly */
#unboxing-grid .casino-card {
    /* Most styles inherited from .casino-card */
    /* Specific overrides if needed */
    padding: 1rem; /* Tailwind p-4 */
}
#unboxing-grid .casino-card-title {
    font-size: 1.125rem; /* Tailwind text-lg */
    margin-bottom: 0.25rem; /* Tailwind mb-1 */
}
#unboxing-grid .casino-card-text {
    font-size: 0.75rem; /* Tailwind text-xs */
    margin-bottom: 0.25rem; /* Tailwind mb-1 */
}
#unboxing-grid .casino-button {
    margin-top: 0.75rem; /* Tailwind mt-3 */
    width: 100%;
}
#unboxing-grid .crashpoints-icon {
    height: 1.25rem; /* Tailwind h-5 */
}

/* Style for the new "Sell Item" button in the unbox modal */
#sell-won-item-btn {
    @apply casino-button casino-button-yellow; /* Or another distinct color */
    /* Add any specific margin or width adjustments if needed */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Possible items grid */
#possible-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-height: 384px;
    overflow-y: auto;
}

#possible-items div {
    @apply casino-card;
    width: 120px;
    height: 160px;
    padding: 8px;
    box-sizing: border-box;
}

/* Dropdown menu styles */
#profile-dropdown {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transform-origin: top right;
}

#profile-dropdown.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Modal styles for consistency */
.casino-modal {
    background: rgba(31, 41, 55, 0.8);
    border: 3px solid var(--gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    transition: opacity 0.3s ease-in-out;
}

.casino-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.casino-modal > div {
    background: linear-gradient(135deg, var(--purple-start), var(--purple-end));
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 20px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalPopup 0.3s ease-out forwards;
}

@keyframes modalPopup {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.casino-modal h2 {
    color: var(--gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
    font-weight: 700;
    margin-bottom: 15px;
}

.casino-modal label {
    color: var(--primary-text);
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.casino-modal input, .casino-modal select, .casino-modal textarea {
    background: linear-gradient(145deg, var(--dark-gradient-start), var(--dark-gradient-end));
    border: 1px solid var(--gold);
    color: var(--primary-text);
    padding: 10px;
    border-radius: 5px;
    transition: box-shadow 0.2s ease-in-out;
}

.casino-modal input:focus, .casino-modal select:focus, .casino-modal textarea:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    border-color: var(--gold);
}

.casino-modal button:not(.modal-close) {
    background: linear-gradient(135deg, var(--green-start), var(--green-end));
    color: var(--primary-text);
    font-weight: 600;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.3s ease;
    margin-top: 10px;
}

.casino-modal button:not(.modal-close):hover {
    background: linear-gradient(135deg, var(--green-end), #047857);
    transform: scale(1.05);
}

.casino-modal button.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    transition: color 0.2s ease-in-out;
}

.casino-modal button.modal-close:hover {
    color: #ff6b6b;
}

.casino-modal .team-list, .casino-modal #active-team-games {
    background: linear-gradient(145deg, var(--dark-gradient-start), var(--dark-gradient-end));
    border: 1px solid var(--gold);
    padding: 10px;
    border-radius: 5px;
    max-height: 300px;
    overflow-y: auto;
}

.casino-modal .team-item, .casino-modal .team-game-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease-in-out;
}

.casino-modal .team-item:hover, .casino-modal .team-game-item:hover {
    background: rgba(255, 215, 0, 0.1);
}

.casino-modal .team-item button, .casino-modal .team-game-item button {
    padding: 5px 10px;
    font-size: 0.75rem;
    margin-top: 0;
}

/* Specific styling for randomize and shuffle buttons */
#randomize-entries, #shuffle-entries {
    background: linear-gradient(135deg, var(--yellow-purple-start), var(--yellow-purple-end));
}

#randomize-entries:hover, #shuffle-entries:hover {
    background: linear-gradient(135deg, var(--yellow-purple-end), #B45309);
    transform: scale(1.05);
}

/* Flag button */
.flag-btn {
    transition: transform 0.2s ease-in-out;
}

.flag-btn:hover {
    transform: scale(1.2);
}

/* Admin page flag queue */
#flag-queue div {
    transition: background-color 0.2s ease-in-out;
}

#flag-queue div:hover {
    background-color: #4B5563; /* Gray-600 */
}

#flag-queue .approve-flag,
#flag-queue .deny-flag {
    transition: transform 0.2s ease-in-out;
}

#flag-queue .approve-flag:hover,
#flag-queue .deny-flag:hover {
    transform: scale(1.05);
}

/* Plinko Game Styles */
.plinko-board-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    min-height: 400px; /* Adjust as needed */
    background-color: var(--plinko-bg); /* Use existing variable */
    border-radius: 10px;
    padding: 20px;
    border: 2px solid var(--gold);
}

#plinko-canvas {
    /* Styles for the canvas element where the game will be rendered */
}

.plinko-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 15px;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    border: 1px solid var(--gold);
}

.plinko-controls label {
    font-weight: 600;
    color: var(--gold);
}

.plinko-controls input[type="number"],
.plinko-controls select {
    @apply casino-input; /* Use existing casino input style */
    width: 100%;
}

.plinko-controls .bet-type-selector button {
    @apply casino-button;
    background: linear-gradient(135deg, var(--purple-start), var(--purple-end));
    margin: 0 5px;
    width: auto;
    padding: 8px 15px;
}

.plinko-controls .bet-type-selector button.active {
    background: linear-gradient(135deg, var(--gold), #DAA520);
    color: var(--primary-bg);
}

#drop-ball-button {
    @apply casino-button casino-button-green;
}

#double-or-nothing-button {
    @apply casino-button casino-button-yellow-purple;
}

.plinko-slots-container {
    display: flex;
    justify-content: center;
    gap: 5px; /* Adjust gap between slots */
    margin-top: 10px;
}

.plinko-slot {
    padding: 5px 10px;
    background-color: var(--dark-gradient-end);
    color: var(--gold);
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
    border: 1px solid var(--gold);
}

.plinko-mode-button {
    /* Uses .casino-button and .casino-button-yellow-purple from existing styles */
    /* Additional specificity for active state */
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.plinko-mode-button.active {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--gold);
}

.plinko-mode-button:not(.active):hover {
    opacity: 0.9;
}

.casino-button-blue {
    background: linear-gradient(135deg, #3B82F6, #2563EB); /* Tailwind blue-500 to blue-600 */
    color: var(--primary-text);
}

.casino-button-blue:hover {
    background: linear-gradient(135deg, #2563EB, #1D4ED8); /* Tailwind blue-600 to blue-700 */
    color: var(--primary-text);
    transform: scale(1.05);
}

/* Settings Page Toggle Switch */
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4B5563; /* gray-600 */ transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--gold); }
input:focus + .slider { box-shadow: 0 0 1px var(--gold); }
input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Checkbox for reset options */
.casino-input-checkbox { 
    margin-right: 0.5rem; 
    accent-color: var(--accent-purple); 
    width: 1.15em; 
    height: 1.15em; 
    vertical-align: middle;
    border-radius: 3px;
    border: 1px solid var(--border-color);
}
.casino-input-checkbox:checked {
    background-color: var(--accent-purple);
}

/* Tab styles for Game Controls (index.php data-tab) and Settings page (.settings-tab) */
/* Base style for tab buttons */
.data-tab-button, /* New class for index.php tabs */
.settings-tab {
    padding: 8px 18px; /* skin.club like padding */
    background-color: var(--tertiary-bg);
    color: var(--secondary-text);
    border: 1px solid var(--border-color); 
    clip-path: var(--clip-path-button-sm); /* Use smaller button clip-path */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem; /* Smaller font for tabs */
    outline: none;
    margin: 0 2px 5px 2px; /* Margin for spacing, bottom margin for content */
    cursor: pointer;
}

.data-tab-button:hover, 
.settings-tab:hover {
    color: var(--primary-text);
    background-color: var(--accent-purple-hover);
    border-color: var(--accent-purple);
}

/* Active tab style */
.data-tab-button.active-tab, 
.settings-tab.active-tab {
    background-color: var(--accent-purple); 
    color: var(--tertiary-text); 
    border-color: var(--accent-purple-active);
    font-weight: 700; 
}

/* Footer Styles */
.site-footer {
    background-color: var(--secondary-bg);
    color: var(--secondary-text);
    padding: 40px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    line-height: 1.6;
    position: relative; /* Changed from fixed to relative to flow with content */
    width: 100%;
    margin-top: 30px; /* Added specific top margin for a visible gap */
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.footer-column {
    flex: 1;
    min-width: 200px;
}
.footer-column.logo-column {
    flex-basis: 100%; /* Full width on small screens */
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .footer-column.logo-column {
        flex-basis: auto; /* Auto width on larger screens */
        margin-bottom: 0;
    }
}
.footer-logo img {
    height: 30px; /* Smaller logo for footer */
    margin-bottom: 10px;
    object-fit: contain;
}
.footer-column h4 {
    color: var(--primary-text);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 15px;
    text-transform: uppercase;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li a {
    color: var(--secondary-text);
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    padding: 4px 0;
}
.footer-column ul li a:hover {
    color: var(--primary-text);
}
.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}
.footer-socials a {
    color: var(--secondary-text);
    font-size: 18px;
    transition: color 0.2s ease;
}
.footer-socials a:hover {
    color: var(--primary-text);
}
.footer-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-payment-methods img {
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.footer-payment-methods img:hover {
    opacity: 1;
}
.footer-language-selector { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 5px;}
.footer-language-selector img {
    height: 18px;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.footer-language-selector img:hover {
    opacity: 1;
}
.footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 12px;
}

/* Chat specific styles to align with new theme */
#chat-container .casino-card { /* Target chat's casino-card */
    background-color: var(--secondary-bg); /* Match new card background */
    border: 1px solid var(--border-color);
    clip-path: none; /* Chat usually doesn't have complex clip-paths */
    border-radius: 6px; /* Consistent radius */
}
#chat-header-toggle h2.casino-title {
    color: var(--primary-text); /* Brighter title for chat */
}
#chat-header-toggle .fa-comment-alt {
    color: var(--accent-purple); /* Use accent for icon */
}
#chat-header-toggle .w-px.h-6 { /* Separator line */
    background-color: var(--accent-purple);
}
#chat-messages.casino-input {
    background-color: var(--primary-bg); /* Darker background for message area */
    border: 1px solid var(--border-color-light);
}
#chat-input.casino-input {
    background-color: var(--tertiary-bg); /* Match other inputs */
}
#chat-form button.casino-button {
    background-color: var(--accent-green); /* Green send button */
    clip-path: var(--clip-path-button-sm); /* Consistent button shape */
}
#chat-form button.casino-button:hover {
    background-color: var(--accent-green-hover);
}