.static-content-panel { height: 100%;}

.youtube-link  {
    color:#ffd700;
}

.youtube-link:hover {
    color:#fff;
}
.panel-scroll-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent scroll - content must fit */
}

/* Layout Container */
.bingo-main-layout {
    display: flex;
    flex-direction: row;
    align-items: center; /* Changed from stretch to center */
    justify-content: center;
    gap: 30px;
    width: 100%;
    height: 100%; /* Fill available height */
    padding: 20px;
    box-sizing: border-box;
}

.bingo-col-left, .bingo-col-right {
    flex: 1;
    min-width: 200px;
    /* Vertically center the wrapper/content within the column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    gap: 15px;
}

/* 
   New Anchor in the Left Column 
   Holds the box in the flow (centered vertically), 
   while allowing buttons to float relative to it.
*/
.bingo-left-anchor {
    position: relative;
    width: 100%;
}

/* Wrapper for the buttons */
.bingo-buttons-wrapper {
    /* Absolute positioning removes buttons from height calc */
    position: absolute;
    bottom: 100%; /* Sits directly atop the anchor (text box) */
    left: 0;
    width: 100%;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px; /* Visual spacing between buttons and text box */
}

.bingo-col-center {
    flex: 2;
    /* Added min-width to prevent the card from being crushed to 0 on resize */
    min-width: 320px; 
    max-width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Take full height of parent */
}

.bingo-page-title {
    margin-top: 0 !important;
    line-height: 1.1;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.bingo-page-title-logo
{
    width: 100%;
    max-width: 512px;
    height: auto;
    object-fit: contain;
}

/* Controls */
.bingo-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

/* Square Button overrides */
.bingo-square-btn {
    width: 60px !important;
    height: 60px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
}

.bingo-square-btn svg,
.bingo-square-btn img {
    width: 28px;
    height: 28px;
    pointer-events: none;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Spinner animation for loading state */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

.bingo-square-btn.active {
    background-color: var(--highlight-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transform: translateY(-1px);
    border: 2px solid #fff;
    box-sizing: border-box;
}

.bingo-square-btn.active img {
    filter: brightness(0) invert(1);
}

.bingo-square-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Capture Wrapper (The Card) */
.bingo-capture-wrapper {
    background-image: url('public/bingo/bingo-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 2.5%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
    /* Make it square, constrained by BOTH width and height */
    width: min(520px, 100%);
    max-height: 100%; /* Don't exceed parent height */
    aspect-ratio: 1 / 1;
    
    /* Use container query for sizing based on smallest dimension */
    container-type: size;

    /* Center children to handle the scaled-down grid */
    align-items: center;
}

/* GRID CONTAINER QUERY SETUP */
.bingo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5%;
    
    /* Grid Scaling Logic */
    width: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;

    flex: 1; /* Fill available space */
    box-sizing: border-box;
    background-color: transparent;
    padding: 1.5%;
    border-radius: 4px;
    container-type: inline-size; 
}

.bingo-slot {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: relative;
    font-size: 2.75cqi; 
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    border-radius: 3px;
    user-select: none;
    cursor: default;
    isolation: isolate; 
    z-index: 1;
    transition: transform 0.1s, filter 0.2s;
    min-width: 0;
    min-height: 0;
    touch-action: none; 
}

/* Background Layer */
.bingo-card-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 3px;
    background-color: var(--card-color, rgba(255,255,255,0.5));
    -webkit-mask-image: url('public/bingo/card.webp');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    mask-image: url('public/bingo/card.webp');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    transform: rotate(var(--card-rotation, 0deg));
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: filter 0.2s ease, background-color 0.2s ease;
}

/* Highlight / Drag Over Effect */
.bingo-slot:hover .card-highlight,
.bingo-slot.highlighted .card-highlight,
.bingo-slot.drag-over .card-highlight { 
    background-color: #ffffff;
    opacity: 0.9;
}

.bingo-slot.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.bingo-slot.drag-over .bingo-card-bg {
    filter: brightness(0.6);
}

.bingo-slot.free-space .bingo-card-bg {
    opacity: 0;
}
.bingo-slot.free-space {
    background: transparent;
    color: #4a148c;
    font-weight: 900;
    font-size: 3.75cqi; 
}

.bingo-slot .tile-label {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.bingo-slot.editable:hover {
    transform: scale(1.05);
    z-index: 10;
}
.bingo-slot.editable { cursor: grab; }
.bingo-slot.locked { cursor: pointer; }

.bingo-slot.grayed-out { opacity: 0.35; filter: grayscale(0.7); }

.card-highlight {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-color: rgba(0,0,0,0.95);
    -webkit-mask-image: url('public/bingo/card-highlight.webp');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-image: url('public/bingo/card-highlight.webp');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
}

.tile-stamp {
    position: absolute;
    inset: 0;
    background-image: url('public/bingo/stamp.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    transform-origin: center center;
    transform: scale(1.5) var(--stamp-offset, none);
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
    will-change: transform, opacity;
}

.tile-stamp.applied {
    transform: scale(1) var(--stamp-offset, none);
    opacity: 1;
}

.bingo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.bingo-footer-container {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.bingo-footer-text-2 {
    font-size: 0.8em;
    color: black;
    font-weight: bold;
    letter-spacing: 1px;
}

.bingo-footer-text-1 {
    font-size: 0.7em;
    color: #525252;
    font-weight: bold;
    letter-spacing: 1px;
}

.bingo-footer-logo {
    height: 40px;
    width: auto;
    max-width: 100px;
}

#export-status {
    font-weight: bold;
    min-height: 1.2em;
    font-size: 0.9em;
    margin-top: 5px;
    text-align: center;
}

/* Shared styles for both boxes */
.bingo-instructions-box, .bingo-competition-box {
    background-color: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.bingo-competition-box p {
    text-align: left;
}

.bingo-instructions-box h3, .bingo-competition-box h3 {
    margin-top: 0;
    color: var(--highlight-primary);
    margin-bottom: 10px;
}

/* Specific styling for the competition box on the right */
.bingo-competition-box {
    border: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.05);
}
.bingo-competition-box h3 {
    color: #ffd700;
}

.bingo-instructions-box ul, .bingo-competition-box ol {
    padding-left: 20px;
    margin-bottom: 0;
}

.bingo-instructions-box li, .bingo-competition-box li {
    margin-bottom: 8px;
    color: var(--text-primary);
}

/* Updated media query breakpoint from 900px to 1200px to include tablets */
@media (max-width: 1200px) {
    .panel-scroll-wrapper {
        overflow: auto; /* Allow scrolling on mobile */
    }
    
    .bingo-main-layout {
        flex-direction: column;
        align-items: center;
        height: auto; /* Let content determine height on mobile */
        padding: 10px;
    }
    
    .bingo-col-left, .bingo-col-right, .bingo-col-center {
        width: 100%;
        max-width: 500px;
        height: auto; /* Reset height constraint */
        min-width: 0; /* Allow shrinking below the desktop 200px/320px limits in column mode */
    }
    
    .bingo-capture-wrapper {
        max-height: none; /* Remove height constraint on mobile */
    }

    /* Reordering items for mobile view */
    .bingo-col-center { order: 1; }
    .bingo-col-left { order: 2; }
    .bingo-col-right { order: 3; }

    /* Reset absolute positioning for mobile vertical stack */
    .bingo-buttons-wrapper {
        position: static;
        bottom: auto;
        justify-content: center;
        margin-bottom: 0;
    }
    /* The anchor now provides even spacing for its children */
    .bingo-left-anchor {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .static-content-panel {
        flex: 1;
        min-height: 0;
    }

    .panel-scroll-wrapper {
        min-height: 0;
    }

    .bingo-grid {
        padding: 2px;
    }
    
    .bingo-slot {
        padding: 4px;
    }

    .bingo-footer-text-2 {
        font-size: 0.5em;
    }

    .bingo-footer-text-1 {
        font-size: 0.45em;
    }

    .bingo-footer-logo {
        height: 25px;
    }
    
}

.bingo-slot.export-flattened {
    overflow: visible !important;
}