/* --- Base & Typography --- */

/* NEW VIBRANT COLOR SCHEME VARIABLES (Purple/Yellow/Pink) */

:root {

    --primary-color: #7c3aed; /* violet-600 (Main Action, Headers) */

    --primary-hover-color: #6d28d9; /* violet-700 */

    --accent-color: #f59e0b; /* amber-500 (Secondary/Share Link) */

    --accent-hover-color: #d97706; /* amber-600 */

    --back-color: #4b5563; /* gray-600 (Still good for neutral 'Leave') */

    --back-hover-color: #374151; /* gray-700 */

    --text-color: #1f2937;

    --header-color: #7c3aed; /* violet-600 */

    --bg-color: #f3f4f6; /* light gray for background */

    --card-border-color: #8b5cf6; /* violet-500 for card border */

    --card-marked-color: #ec4899; /* pink-500 (Marked cells & BINGO button) */

    --card-marked-hover-color: #db2777; /* pink-600 */

    --game-ref-bg: #ede9fe; /* violet-100 */

    /* NEW: Modal Overlay Background */

    --modal-overlay-color: rgba(17, 24, 39, 0.8); /* gray-900 with opacity */

    

    /* NEW AUTH PAGE COLORS */

    --toggle-btn-bg: #e5e7eb; /* light gray for toggle background */

    --toggle-btn-text: #374151; /* dark gray text */

}



body {

    font-family: 'Inter', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    background-color: var(--bg-color); 

    margin: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    /* CRITICAL FIX: Use 100vh and Flex direction to force content to fit viewport */

    min-height: 100vh;

    padding: 0.5rem; 

    box-sizing: border-box;

    flex-direction: column; /* Allows content to stack */

}



h1 {

    font-size: 2.25rem; /* text-4xl - Slightly smaller for mobile fit */

    font-weight: 800; /* font-extrabold */

    color: var(--header-color); 

    margin-bottom: 1rem; /* Reduced margin */

}



h2 {

    font-size: 1.5rem; /* text-2xl - Slightly smaller for mobile fit */

    font-weight: 700; /* font-bold */

    color: var(--primary-color); 

    margin-bottom: 1rem; /* Reduced margin */

}



label {

    display: block;

    text-align: left;

    font-weight: 600;

    color: #4b5563; /* gray-600 */

    margin-top: 0.5rem; /* Reduced margin */

    margin-bottom: 0.25rem; /* Reduced margin */

}



/* --- Main Container & Views --- */

.container {

    background: white;

    /* Increased padding on right to make space for the "Leave" button */

    padding: 1.5rem; /* Increased padding */

    border-radius: 1rem; 

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */

    text-align: center;

    width: 100%;

    /* Slightly increased max-width for wider inputs */

    max-width: 550px; 

    box-sizing: border-box;

    position: relative; 

    /* CRITICAL FIX: Allows container to shrink vertically to fit content within viewport */

    height: auto; 

    max-height: calc(100vh - 1rem); /* 100vh minus body padding (0.5rem top/bottom) */

    display: flex; /* Use flex to manage inner vertical space */

    flex-direction: column;

    justify-content: flex-start;

}



/* --- IMPROVED INSTRUCTIONS STYLING --- */

.instructions {

    color: var(--text-color);

    margin-bottom: 1.5rem;

    text-align: left; 

    /* NEW: Constrain width for better readability on large screens */

    max-width: 90%; 

    margin-left: auto;

    margin-right: auto;

}



/* Ensure the initial intro text's bolding is standard */

.instructions strong:first-of-type {

    display: inline;

    color: var(--text-color);

    font-weight: 800;

}



/* Style for the "How to Start Your Game:" header (This is the third strong element in the HTML) */

.instructions strong:nth-child(3) {

    display: block; 

    margin-top: 1rem;

    margin-bottom: 0.5rem;

    color: var(--primary-color); /* Apply primary color for clear section break */

    font-size: 1.1rem; 

}





/* Fix list spacing and alignment */

.instructions ul {

    list-style-type: none;

    padding-left: 0;

    margin: 0.5rem 0 0.5rem 0; 

}



.instructions ul li {

    position: relative;

    padding-left: 1.5rem;

    margin-bottom: 0.8rem; /* INCREASED vertical space between bullets */

    line-height: 1.4;

}



/* Add a custom, stylish bullet point (using the primary color) */

.instructions ul li::before {

    content: '•'; 

    position: absolute;

    left: 0;

    color: var(--primary-color);

    font-size: 1.25rem;

    font-weight: 800;

    line-height: 1;

    top: 0;

}



/* Ensure the key phrases inside the list items (e.g., 'To Host:') are bold and distinct */

.instructions ul li strong {

    font-weight: 800;

    color: var(--text-color); 

    display: inline; 

}

/* --- END IMPROVED INSTRUCTIONS STYLING --- */





.hidden {

    display: none;

}



.error {

    color: #b91c1c; 

    background-color: #fef2f2; 

    border: 1px solid #f87171; 

    padding: 0.75rem;

    border-radius: 0.5rem;

    margin-top: 1rem;

    font-weight: 600;

}



/* --- Buttons (Enhanced) --- */

button {

    width: 100%;

    padding: 0.75rem 1rem;

    border-radius: 0.5rem; 

    border: none;

    font-weight: 700; 

    cursor: pointer;

    transition: all 0.2s ease-in-out;

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); 

}



/* FIX: Apply margin to the primary action groups instead */

#home-view .form-group button, 

#create-game-step-1 button,

#create-game-step-2 button,

#join-game-view button {

    margin-bottom: 0.75rem;

}



button:hover {

    transform: translateY(-2px); 

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}



button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}



.btn-primary {

    background-color: var(--primary-color);

    color: white;

}



.btn-primary:hover {

    background-color: var(--primary-hover-color);

}



.btn-secondary {

    background-color: var(--accent-color); 

    color: var(--text-color); 

}



.btn-secondary:hover {

    background-color: var(--accent-hover-color); 

}



.btn-back {

    background-color: var(--back-color); 

    color: white;

    margin-top: 0.5rem; 

}



.btn-back:hover {

    background-color: var(--back-hover-color); 

}



/* --- AUTH PAGE SPECIFIC STYLING (Simplified View) --- */



/* Full Primary Button for Sign In/Sign Up (Main Form Action) */

.btn-full-primary {

    background-color: var(--card-marked-color); /* Pink/Red color */

    color: white;

    font-size: 1.1rem;

    padding: 0.9rem 1rem;

    margin-top: 1.5rem !important; /* Extra spacing above the main action button */

    border-radius: 0.5rem;

    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.5);

}

.btn-full-primary:hover {

    background-color: var(--card-marked-hover-color);

}



/* Text Link Toggle Button */

.text-link {

    width: auto;

    background: none;

    color: var(--primary-color);

    font-weight: 600;

    padding: 0.5rem;

    box-shadow: none;

    transform: none;

    margin: 0 auto;

    display: block;

    font-size: 0.95rem;

}



.text-link:hover {

    text-decoration: underline;

    background: none;

    color: var(--primary-hover-color);

}





/* --- CORNER BUTTON (Leave Game) --- */

.top-right-corner-btn {

    position: absolute;

    top: 10px; 

    right: 15px; 

    width: auto !important; 

    padding: 0.3rem 0.6rem !important; 

    font-size: 0.7rem; 

    z-index: 50; 

    background-color: var(--back-color);

    color: white;

    box-shadow: none;

    border-radius: 0.3rem; 

    margin: 0 !important; 

}



.top-right-corner-btn:hover {

    transform: none;

    background-color: var(--back-hover-color);

}



/* --- Option Group Buttons (Game Creation - using existing option-group) --- */

.option-group {

    display: flex;

    flex-wrap: wrap; 

    gap: 6px; 

    margin-top: 0.5rem;

    margin-bottom: 0.5rem; 

    justify-content: center;

}



.option-group button {

    flex-grow: 1;

    min-width: 70px; 

    padding: 0.4rem 0.6rem; 

    background-color: #f3f4f6; 

    color: var(--text-color);

    border: 1px solid #d1d5db; 

    font-weight: 600;

    transition: all 0.15s;

    box-shadow: none; 

    transform: none; 

    margin: 0; /* Specific override to remove general button margin */

}



.option-group button.selected {

    background-color: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3); 

}



/* --- Forms (Ensuring 100% width) --- */

input, textarea, select {

    width: 100%; 

    padding: 0.8rem; 

    margin: 0.5rem 0; 

    border-radius: 0.75rem; /* Larger radius for the clean look */

    box-sizing: border-box;

    font-size: 1rem; 

    background-color: #f9fafb; 

    /* NEW: Remove border and simplify box shadow for the cleaner look */

    border: none;

    box-shadow: none; 

}



input:focus, textarea:focus, select:focus {

    outline: none;

    /* Use the primary color as a subtle shadow focus effect */

    box-shadow: 0 0 0 2px var(--primary-color); 

    background-color: white; 

}



.form-group {

    margin-bottom: 1rem; 

}



/* --- Game Page Elements (Omitted for brevity) --- */

.game-header {

    margin-bottom: 0.5rem; 

    padding: 0.75rem; 

    background-color: white;

    border-radius: 0.75rem;

    /* NEW: Add top padding to clear the space for the button */

    padding-top: 2rem; 

    flex-shrink: 0; 

}



/* Ensures Game Title is not too large when Winner banner is visible */

#game-title {

    font-size: 1.75rem; 

    margin-bottom: 0.25rem;

}



#game-info p {

    margin: 0.1rem 0; 

    font-size: 0.75rem; 

}



#game-info .share-group {

    margin-top: 0.4rem; 

}



.bingo-grid {

    display: grid;

    gap: 3px; 

    aspect-ratio: 1 / 1;

    border: 4px solid var(--card-border-color); 

    border-radius: 0.5rem;

    box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.1);

    padding: 3px; 

    /* CRITICAL FIX: Takes up remaining vertical space */

    flex-grow: 1; 

    min-height: 0; 

}



.bingo-cell {

    font-size: clamp(0.5rem, 1.8vw, 0.8rem); 

    border: 1px solid #f3e8ff; 

    background-color: #ffffff;

}



.bingo-cell.marked {

    background-color: var(--card-marked-color); 

    color: white;

    transform: scale(1.03); 

    box-shadow: 0 0 10px rgba(236, 72, 153, 0.5); 

}



/* --- BINGO WINNER NOTIFICATION (Fixing Overlap) --- */

@keyframes bingo-flash {

    0%, 100% { background-color: #fef3c7; } 

    50% { background-color: #fcd34d; } 

}

#winner-notification {

    animation: bingo-flash 0.5s infinite;

    padding: 0.75rem 1rem; 

    border-radius: 0.5rem;

    border: 3px solid var(--accent-color); 

    margin-bottom: 0.75rem !important; 

    /* NEW: Add top padding to visually clear the space where the Leave button sits */

    padding-top: 2rem; 

    position: relative; 

    flex-shrink: 0; 

}



#winner-notification h2 {

    color: var(--primary-color);

    font-size: 1.25rem; 

    margin: 0;

    line-height: 1.2;

}



/* FIX: Ensure the button inside the banner uses the correct back style */

#winner-notification button {

    width: auto;

    padding: 0.4rem 0.8rem; 

    font-size: 0.75rem;

    margin-top: 0.5rem;

    /* Default primary button color */

    background-color: var(--card-marked-color); 

}



/* When the winner notification is visible, style the button inside it */

#winner-notification #leave-game-btn {

    top: 5px; /* Adjust vertical position */

    right: 5px; /* Pull it 5px from the right edge of the banner */

    transform: none; /* Do not use translate-Y on the button inside the banner */

    /* FIX: Explicitly enforce the gray back color */

    background-color: var(--back-color);

    color: white;

}

#winner-notification #leave-game-btn:hover {

    background-color: var(--back-hover-color);

}



/* Visibility management for the single leave button (now handled by #winner-notification itself) */

#winner-notification:not(.hidden) ~ #leave-game-btn {

    display: none;

}

#winner-notification.hidden ~ #leave-game-btn {

    display: block;

}





/* --- MODAL FIX --- */

/* This style block ensures the overlay works correctly */

#new-player-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--modal-overlay-color); 

    justify-content: center;

    align-items: center;

    z-index: 1000;

    padding: 0.5rem; 

}



#new-player-modal:not(.hidden) {

    display: flex;

}



.modal-content {

    background: white;

    padding: 1.5rem; 

    border-radius: 0.75rem;

    text-align: center;

    width: 90%;

    max-width: 400px;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 10px, 10px, 0.04);

}



.font-mono {

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}