justbean/beango/css/beango.css

/* Basic styling for the board */
.centered h1 {
    margin-bottom: 0px;
}

html,
body {
    min-height: 100vh;
    /* background: linear-gradient(135deg, #ff7e5f, #feb47b); */ /* Modern gradient background */
}

.bingo-board {
    display: grid;
    gap: 4px; /* Adjust gap as needed */
}
.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
#bean {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
}
#bean:hover {
    transform: scale(1.1); /* Slightly enlarge the bean on hover */
}
.bingo-cell {
    border-width: 1px; /* Keep border width */
    border-style: solid; /* Keep border style */
    /* border-color will be set by JS */
    /* background-color or background-image will be set by JS */
    text-align: center; /* Keep for potential fallback/spacing */
    padding: 8px; /* Keep padding on the main cell */
    /* REMOVED text styling from here */
    /* word-wrap: break-word; */
    /* overflow-wrap: break-word; */
    /* hyphens: auto; */
    /* font-size: 1.5rem; */
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, filter 0.15s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    position: relative; /* Ensure stacking context for z-index */
    overflow: hidden; /* Hide potential image overflow */
}

/* NEW: Pseudo-element for background image layer */
.bingo-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--bg-image-url, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1; /* Place ABOVE the text content */
    opacity: var(--bg-image-opacity, 1); /* NEW: Use variable for opacity */
    /* Inherit border radius if needed */
    /* border-radius: inherit; */
}

/* NEW: Styles for the text span inside the cell */
.bingo-cell-text {
    display: inline-block; /* Or block, depending on desired wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 1.5rem; /* Moved font size here */
    color: #000; /* Default text color (can be customized later if needed) */
    position: relative; /* Needed for z-index */
    z-index: 0; /* Place BELOW the pseudo-element */
    /* Remove background to allow parent background to show */
    background: transparent;
    /* Max width to help with wrapping within padding */
    max-width: 100%;
}

/* NEW: Style for highlighted search results */
.bingo-cell.highlighted {
    border-color: #3b82f6; /* Tailwind blue-500 */
    border-width: 3px;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); /* Stronger blue glow */
    z-index: 10; /* Ensure highlighted cells are visually on top if overlapping happens during scale */
}

/* Add darken filter on hover */
.bingo-cell:hover {
    filter: brightness(85%);
}

/* Style for when a cell is actively being clicked */
.bingo-cell:active {
    transform: scale(0.95); /* Scale down slightly */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle inset shadow */
    background-color: #e0e0d1; /* Slightly darker beige */
}

/* Style for permanently marked cells */
.bingo-cell.marked {
    /* background-color: #fde047; */ /* REMOVED - Handled by JS */
    /* Optional: Add other persistent styles like a stronger border */
    /* border-color: #ca8a04; */ /* Tailwind yellow-600 */
    /* Styles like background-image, background-size, background-position, background-repeat, and opacity will be added by JS */
}

/* Style for when a MARKED cell is actively being clicked */
.bingo-cell.marked:active {
    transform: scale(0.95); /* Keep the same transform */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Keep the same shadow */
    background-color: #facc15; /* Slightly darker yellow (Tailwind yellow-400) */
}

.config-pane {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 500px; /* Adjust as needed */
    overflow: hidden;
    opacity: 1;
}
.config-pane.minimized {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
}

/* Configuration Pane Styling */
.config-pane-closed {
    transform: translateX(100%); /* Hide off-screen to the right */
}

.config-pane-open {
    transform: translateX(0); /* Slide in from the right */
}

/* Ensure transition is applied (already added in HTML via Tailwind classes) */
/* #config-pane {
    transition: transform 0.3s ease-in-out;
} */

/* Basic styling for the board */
#bingo-board-container {
    /* Background color/image/opacity set by JS */
}

/* Styling for config pane sections */
.config-section {
    border-bottom: 1px solid #e5e7eb; /* Tailwind gray-200 */
    padding-bottom: 0.75rem; /* pb-3 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.config-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.config-summary {
    cursor: pointer;
    font-weight: 600; /* semibold */
    color: #1f2937; /* gray-800 */
    padding: 0.5rem 0; /* py-2 */
    list-style: none; /* Remove default marker */
    position: relative;
    padding-left: 1.5rem; /* Make space for custom marker */
}

/* Custom arrow marker */
.config-summary::before {
    content: '';
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #6b7280; /* gray-500 */
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    position: absolute;
    left: 0.25rem;
    top: 0.85rem; /* Adjust vertical alignment */
    transition: transform 0.2s ease-in-out;
}

/* Rotate arrow when section is open */
details[open] > .config-summary::before {
    transform: rotate(-135deg);
    top: 1rem; /* Adjust vertical alignment for open state */
}

/* Hide default <details> marker */
.config-summary::-webkit-details-marker {
    display: none;
}

.config-content {
    padding-left: 1.5rem; /* Indent content */
}