/* Custom styles to override or enhance Tailwind */
body {
    font-family: 'Inter', sans-serif; /* Default body font */
    background-color: #fce7e7; /* Light reddish background */
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    flex-grow: 1;
}
.header-bg {
    background-color: #f7a0a0; /* Slightly darker reddish for header */
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Stylish and bold font for the main title */
.header-title {
    font-family: 'Dancing Script', cursive;
    font-weight: 700; /* Bold */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Subtle shadow for prominence */
}
.footer-bg {
    background-color: #f7a0a0; /* Match header for footer */
    padding: 1rem 0;
    margin-top: auto; /* Push footer to the bottom */
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}
.main-card {
    background-color: #fff;
    border-radius: 1.5rem; /* More rounded */
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: center;
    width: 100%; /* Ensure it takes full width of its parent */
    margin: 0 auto;
    border: 1px solid #fbdada; /* Light border */
}
.button-primary {
    background-color: #ff6f6f; /* Reddish button */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem; /* Rounded buttons */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.button-primary:hover {
    background-color: #ff4a4a;
    transform: translateY(-2px);
}
.button-secondary {
    background-color: #fbdada; /* Lighter reddish button */
    color: #ff6f6f;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 1px solid #ff6f6f;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.button-secondary:hover {
    background-color: #f9caca;
    transform: translateY(-2px);
}
.ad-box {
    background-color: #ffdcdc; /* Even lighter reddish for ad boxes */
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ff6f6f;
    min-height: 100px; /* Reduced min-height for inline ads */
    border: 1px dashed #ff6f6f;
    margin-bottom: 1.5rem; /* Space below ad boxes */
    margin-top: 0.5rem; /* Space above ad boxes */
    font-size: 0.9rem; /* Smaller font for ad placeholders */
}
/* Specific page display */
.page-section {
    display: none; /* Hidden by default */
}
.page-section.active {
    display: block; /* Show active page */
}
/* Highlight border for selected display boxes */
.highlight-border {
    border: 3px solid #ff6f6f; /* A more prominent reddish border */
    box-shadow: 0 0 15px rgba(255, 111, 111, 0.5); /* Soft glowing effect */
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* New classes for display box styling based on content type */
.default-game-display {
    background-color: #f0f8e9; /* Very light subtle olive green */
    border: 1px solid #a2b98e; /* Muted olive green border */
}
.default-punishment-display {
    background-color: #fff; /* White for default punishment box */
    border: 1px solid #e2e8f0; /* Gray-200 border for default punishment box */
}
.active-truth-display {
    background-color: #fffacd; /* Light yellow */
    border-color: #fce788; /* Yellow border for truth */
}
.active-dare-display {
    background-color: #ffe0e0; /* Light red */
    border-color: #ff6f6f; /* Red border for dare */
}
.active-punishment-display {
    background-color: #ffe0e0; /* Light red for punishment */
    border-color: #ff4a4a; /* Darker red border for punishment */
}

/* Home page content sections styling */
.home-info-section {
    background-color: #fff; /* White background for info sections */
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Space between sections */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #fbdada;
    text-align: left; /* Align text within sections */
}
.home-info-section h2 {
    font-size: 1.8rem; /* Larger heading for sections */
    font-weight: 700; /* Bold */
    color: #d94a4a; /* A darker red for headings */
    margin-bottom: 1rem;
}
.home-info-section h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ef4444;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.home-info-section p, .home-info-section li {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
}
.home-info-section ol li strong, .home-info-section ul li strong {
    color: #d94a4a; /* Highlight strong text in lists */
}


/* Mobile Menu Styles */
/* Hide regular navigation on small screens */
.desktop-nav {
    display: none;
}

/* Show mobile menu toggle on small screens */
.mobile-menu-toggle {
    display: block; /* Hamburger button visible */
}

/* Default hidden mobile navigation */
.mobile-nav {
    display: none;
    width: 100%;
    flex-direction: column; /* Stack links vertically */
    background-color: #f7a0a0; /* Same as header */
    position: absolute; /* Position relative to header */
    top: 100%; /* Below the header */
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding-bottom: 1rem;
}

/* Show mobile navigation when active */
.mobile-nav.is-active {
    display: flex;
}

.mobile-nav a {
    padding: 0.75rem 1rem;
    text-align: center;
    color: white;
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    transition: background-color 0.3s ease;
    display: flex; /* Enable flexbox for icon and text alignment */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center content horizontally */
    gap: 0.5rem; /* Space between icon and text */
}

.mobile-nav a:hover {
    background-color: #ff6f6f; /* Darker on hover */
}

@media (min-width: 768px) { /* md breakpoint */
    /* Hide mobile menu toggle on larger screens */
    .mobile-menu-toggle {
        display: none;
    }
    /* Show regular navigation on larger screens */
    .desktop-nav {
        display: flex;
    }
    /* Hide mobile navigation on larger screens */
    .mobile-nav {
        display: none !important; /* Override .is-active */
    }
}