/* Custom styles for LuckPlaySpace website */

/* Apply Oswald font for all text to achieve a gaming feel */
body {
    font-family: 'Oswald', sans-serif; /* Set Oswald as the primary font */
    background-color: #0d1117; /* Deep dark background for a premium casino feel */
    color: #e2e8f0; /* Light text color for contrast and readability */
    line-height: 1.6; /* Improved line spacing for readability */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
}

/* Central container for content to control width and apply consistent padding */
.container {
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
    padding: 0 1rem; /* Add some horizontal padding on smaller screens */
}

/* Base section styling for consistent vertical spacing */
section {
    padding: 3rem 1rem; /* Consistent vertical padding across sections */
}

/* General styling for content blocks like cards and containers */
.rounded-lg {
    border-radius: 0.75rem; /* Standard rounded corners */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Headings styles: Apply Oswald for a distinct, bold look with vibrant green */
h1, h2, h3 {
    font-family: 'Oswald', sans-serif; /* Oswald for all primary headings */
    font-weight: 700; /* Bold weight */
    color: #4ADE80; /* Vibrant green for headings, inspired by screenshot */
    letter-spacing: 0.05em; /* A little letter spacing for better appearance */
    text-transform: uppercase; /* Uppercase for a stronger gaming look */
}
h1 { font-size: 3.5rem; /* Larger font size for main hero heading */ }
h2 { font-size: 2.75rem; /* Standard font size for section headings */ }
h3 { font-size: 2.25rem; /* Font size for sub-headings/feature titles */ }

/* Text paragraph styles: Consistent sizing and color for body text */
p {
    font-size: 1.1rem;
    color: #cbd5e0; /* Slightly darker grey for body text to differentiate from headings */
}

/* Styling for feature section icons (SVG) */
.feature-icon svg {
    color: #4ADE80; /* Vibrant green for icons */
    width: 3.5rem; /* Size of the icon */
    height: 3.5rem;
    margin-bottom: 1rem; /* Space below the icon */
}

/* Specific styling for the 18+ Disclaimer section to make it stand out */
.bg-red-900.bg-opacity-70 {
    background-color: rgba(153, 27, 27, 0.7); /* More muted red with transparency */
    border: 1px solid rgba(220, 38, 38, 0.5); /* Subtle red border */
}

/* Slot machine canvas styling */
canvas {
    background-color: #1a202c; /* Dark background for the slot machine reels */
    display: block; /* Ensures it takes up full width and no extra space below */
    border-radius: 0.75rem; /* Match other rounded-lg elements */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Stronger shadow for the game area */
}

/* --- Global Button Styles --- */

/* Primary Button (used for general actions like 'Close' in message box, 'Play Now') */
.primary-button {
    background-color: #4ADE80; /* Vibrant green for primary buttons */
    color: #1A202C; /* Dark text for contrast on green */
    padding: 0.75rem 1.5rem; /* Vertical and horizontal padding */
    border-radius: 0.5rem; /* Rounded corners */
    font-weight: 600; /* Semi-bold text */
    transition: background-color 0.2s ease-in-out; /* Smooth transition on hover */
    cursor: pointer; /* Pointer cursor on hover */
    border: none; /* Remove default button border */
    display: inline-block; /* Allows for proper padding and sizing */
    text-decoration: none; /* Remove underline for anchor buttons */
    text-transform: uppercase; /* Uppercase for buttons */
}

.primary-button:hover {
    background-color: #36C36A; /* Darker green on hover */
}

/* Spin Button: Prominent red button for the main action */
.spin-button {
    background-color: #EF4444; /* Tailwind Red-500 */
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.25rem; /* Larger font size */
    font-weight: 700; /* Boldest weight */
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    min-width: 150px; /* Ensure a consistent width for the button */
    text-transform: uppercase;
}

.spin-button:hover:not(:disabled) {
    background-color: #DC2626; /* Darker red on hover */
}

.spin-button:disabled {
    background-color: #9CA3AF; /* Gray out when disabled */
    cursor: not-allowed;
    opacity: 0.7; /* Slightly dim */
}

/* Bet Button Group: Buttons for selecting bet amounts */
.bet-button {
    background-color: #4A5568; /* Tailwind Gray-700 */
    color: #CBDBF0; /* Tailwind Gray-300 */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out; /* Transition for all properties including border/shadow */
    cursor: pointer;
    border: 2px solid transparent; /* Transparent border for selected state */
    text-transform: uppercase;
}

.bet-button:hover:not(.selected) {
    background-color: #6D7688; /* Slightly lighter gray on hover */
    color: #F7FAFC; /* Lighter text on hover */
}

.bet-button.selected {
    background-color: #10B981; /* Tailwind Green-500 for active/selected state */
    border: 2px solid #059669; /* Darker green border */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5); /* Glowing effect */
    color: #fff; /* White text for selected state */
}

/* Autoplay Button: Green/Red for enabling/disabling autoplay */
.autoplay-button {
    background-color: #4ADE80; /* Vibrant green for primary buttons */
    color: #1A202C; /* Dark text for contrast on green */
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
}

.autoplay-button:hover:not(:disabled) {
    background-color: #36C36A; /* Darker green on hover */
}

.autoplay-button.bg-red-600 { /* For active autoplay state (indicating it's running) */
    background-color: #DC2626; /* Red when active */
    color: #fff;
}
.autoplay-button.bg-red-600:hover:not(:disabled) {
    background-color: #B91C1C; /* Darker red on hover when active */
}


/* Quick Spin Button: Blue for toggling quick spin mode */
.quick-spin-button {
    background-color: #3B82F6; /* Tailwind Blue-500 */
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
}

.quick-spin-button:hover:not(.bg-green-700) {
    background-color: #2563EB; /* Darker blue on hover */
}

.quick-spin-button.bg-green-700 { /* Active quick spin state (indicating it's on) */
    background-color: #047857; /* Darker green when active */
}
.quick-spin-button.bg-green-700:hover {
    background-color: #065F46; /* Even darker green on hover when active */
}

/* Max Bet Button: Amber/yellow for the max bet action */
.max-bet-button {
    background-color: #EAB308; /* Tailwind Amber-500 */
    color: #1F2937; /* Dark text for contrast against yellow */
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
}
.max-bet-button:hover:not(:disabled) {
    background-color: #D99706; /* Darker amber on hover */
}
.max-bet-button:disabled {
    background-color: #9CA3AF;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Paytable Button: Light blue for opening the paytable modal */
.paytable-button {
    background-color: #60A5FA; /* Tailwind Blue-400 */
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
}

.paytable-button:hover {
    background-color: #3B82F6; /* Darker blue on hover */
}

/* --- Paytable Modal Specific Styles --- */
/* These styles ensure the paytable modal is a prominent, well-formatted overlay. */
#paytableModal {
    position: fixed; /* Fixed position relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */
    /* REMOVED: display: flex; from previous versions - now handled by Tailwind classes in HTML */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 1000; /* Ensure it's on top of all other content */
    /* The 'hidden' class from Tailwind controls visibility via 'display: none !important;' */
}

#paytableModal > div {
    background-color: #1A202C; /* Dark background for the modal content area */
    padding: 2rem;
    border-radius: 1rem; /* More rounded corners */
    max-width: 90%; /* Max width relative to viewport */
    max-height: 90vh; /* Max height relative to viewport */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Stronger shadow for the modal */
    color: #E2E8F0; /* Light text color */
    position: relative; /* Needed for absolute positioning of close button */
}

#paytableModal h2 {
    font-family: 'Oswald', sans-serif; /* Consistent heading font */
    color: #4ADE80; /* Vibrant green for modal headings */
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#paytableModal h3 { /* For "Special Symbols" heading inside modal */
    font-family: 'Oswald', sans-serif;
    color: #FACC15; /* Yellow/amber for special headings */
    font-size: 1.75rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#paytableModal table {
    width: 100%;
    border-collapse: collapse; /* Collapse borders for a clean table */
    margin-top: 1rem;
}

#paytableModal th,
#paytableModal td {
    padding: 0.75rem;
    border: 1px solid #4A5568; /* Borders for table cells */
    text-align: left;
}

#paytableModal thead th {
    background-color: #2D3748; /* Darker background for table headers */
    font-weight: 700;
    color: #CBD5E0;
}

#paytableModal tbody tr {
    background-color: #1F2937; /* Slightly lighter background for table rows */
}

#paytableModal tbody tr:nth-child(even) {
    background-color: #1A202C; /* Alternate row color for readability */
}

#paytableModal .symbol-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between image and text */
}

#paytableModal .symbol-img {
    width: 40px; /* Smaller images in paytable for compactness */
    height: 40px;
    object-fit: contain; /* Ensure image fits without distortion */
    border-radius: 0.25rem; /* Slight rounding for symbols */
}

/* --- Result Display Text Colors --- */
/* These classes are applied to the #gameResult element by JavaScript */
.text-green-400 { color: #4ADE80; } /* Bright green for successful wins or free spin awards */
.text-red-400 { color: #F87171; } /* Light red for no-win messages */

/* --- FAQ Section Styling --- */
/* Provides an accordion-like visual for the FAQ questions and answers */
.faq-question {
    background-color: #2D3748; /* Darker background for FAQ question bars */
    color: #F7FAFC; /* Near-white text for questions */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    width: 100%; /* Ensure button takes full width */
    text-align: left; /* Align text to the left */
    display: flex; /* Use flex for icon alignment */
    justify-content: space-between; /* Push icon to the right */
    align-items: center;
}
.faq-question:hover {
    background-color: #4A5568; /* Lighter on hover */
}
.faq-question svg {
    transition: transform 0.2s ease-in-out; /* Smooth rotation for the icon */
}
.faq-question svg.rotate-180 {
    transform: rotate(180deg); /* Rotate icon when answer is open */
}

.faq-answer {
    background-color: #1A202C; /* Even darker background for answers */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem; /* Small space between question and answer */
    border-left: 4px solid #4ADE80; /* Vibrant green border for visual emphasis */
}
/* The 'hidden' class from Tailwind will control its visibility initially */