/* Game Modal Styles */
/* Use higher specificity or !important to override potential theme conflicts */
#gameModal {
    display: none;
    position: fixed;
    z-index: 9999;
    /* Ensure it's on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    font-family: 'Poppins', sans-serif;
    /* Match theme font */
}

#gameModal .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 450px;
    border-radius: 15px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#gameModal .close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

#gameModal .close-btn:hover {
    color: #333;
}

#gameModal h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/* Puzzle Grid */
#puzzle-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 350px;
    /* Limit size on desktop */
    aspect-ratio: 1 / 1;
    margin: 20px auto;
    border: 4px solid #2c3e50;
    background-color: #ecf0f1;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 15px;
    /* Add padding so tabs don't get cut off */
    gap: 0;
    /* No gap because pieces overlap */
}

/* New Container for Z-index staking */
.tile-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.tile-container.empty-slot {
    z-index: 0;
}

.puzzle-piece {
    width: 142.86%;
    /* 100% / 0.7 (visible area) */
    height: 142.86%;
    position: absolute;
    top: -21.43%;
    /* -15% * 1.4286 */
    left: -21.43%;
    background-size: 210% 210%;
    /* Pre-set for JS */
    cursor: grab;
    box-sizing: border-box;
    transition: transform 0.1s, filter 0.2s;
    background-repeat: no-repeat;
    z-index: 20;

    /* Base Clipv Path - Square fallback */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

    /* Stronger shadow for outline effect */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* Pseudo-element for inner bevel/highlight simulation */
.puzzle-piece::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
    /* Use same clip-path usually? Parent clip-path clips children too. */
}

.puzzle-piece.selected {
    filter: brightness(1.2) drop-shadow(0 0 5px #f39c12);
    z-index: 30;
}

/* SHAPES DEFINITIONS using polygon approximation for jigsaw curves */
/* Coordinates are relative to the 130% box */
/* Inset is roughly 15% from edges. */
/* Tab/Slot depth is approx 10% */

/* 
   We define 9 specific shapes. 
   Row 0: Top varies (Flat), Bottom varies (Tab/Slot).
   Col 0: Left varies (Flat), Right varies (Tab/Slot).
   
   Approximation of Tab: 35% Flat, Bump Out to 45%..55%, Back to Flat at 65%.
   Coordinates:
   Top Edge (y=15%): x=0..100
   Tab Top: x=40..60, y=5% (sticking up)
   Slot Top: x=40..60, y=25% (sticking down/in)
*/

/* Helper Variables for cleaner reading (conceptual) */
/* Top Line: 15%, Bottom Line: 85%, Left Line: 15%, Right Line: 85% */

/* Shape 0-0: Top-Left (Flat Top, Flat Left, Tab Right, Tab Bottom) */
.shape-0-0 {
    clip-path: polygon(15% 15%, 85% 15%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 85%, 60% 85%, 60% 95%, 40% 95%, 40% 85%, 15% 85%);
}

/* Shape 0-1: Top-Middle (Flat Top, Slot Left, Tab Right, Tab Bottom) */
.shape-0-1 {
    clip-path: polygon(15% 15%, 85% 15%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 85%, 60% 85%, 60% 95%, 40% 95%, 40% 85%, 15% 85%, 15% 60%, 25% 60%, 25% 40%, 15% 40%);
}

/* Shape 0-2: Top-Right (Flat Top, Slot Left, Flat Right, Tab Bottom) */
.shape-0-2 {
    clip-path: polygon(15% 15%, 85% 15%, 85% 85%, 60% 85%, 60% 95%, 40% 95%, 40% 85%, 15% 85%, 15% 60%, 25% 60%, 25% 40%, 15% 40%);
}

/* Shape 1-0: Mid-Left (Flat Left, Slot Top, Tab Right, Slot Bottom) */
.shape-1-0 {
    clip-path: polygon(15% 15%, 40% 15%, 40% 25%, 60% 25%, 60% 15%, 85% 15%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 85%, 60% 85%, 60% 75%, 40% 75%, 40% 85%, 15% 85%);
}

/* Shape 1-1: Center (Tab Top, Slot Left, Tab Right, Slot Bottom) - Full interlocking */
.shape-1-1 {
    clip-path: polygon(15% 15%, 40% 15%, 40% 5%, 60% 5%, 60% 15%, 85% 15%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 85%, 60% 85%, 60% 75%, 40% 75%, 40% 85%, 15% 85%, 15% 60%, 25% 60%, 25% 40%, 15% 40%);
}

/* Shape 1-2: Mid-Right (Tab Top, Slot Left, Flat Right, Slot Bottom) */
.shape-1-2 {
    clip-path: polygon(15% 15%, 40% 15%, 40% 5%, 60% 5%, 60% 15%, 85% 15%, 85% 85%, 60% 85%, 60% 75%, 40% 75%, 40% 85%, 15% 85%, 15% 60%, 25% 60%, 25% 40%, 15% 40%);
}

/* Row 2: Bottoms need to be Flat! So "Slot Bottom" implies internal slot, but bottom edge is puzzle border? No. */
/* Row 2 is the last row. Bottom Edge must be Flat. (15% line) */
/* The piece "above" it (Row 1) had Slot Bottom (Inward). So Row 2 needs Tab Top (Outward) to fit. */

/* Shape 2-0: Bottom-Left (Tab Top, Flat Left, Tab Right, Flat Bottom) */
.shape-2-0 {
    clip-path: polygon(15% 15%, 40% 15%, 40% 5%, 60% 5%, 60% 15%, 85% 15%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 85%, 15% 85%);
}

/* Shape 2-1: Bottom-Mid (Tab Top, Slot Left, Tab Right, Flat Bottom) */
.shape-2-1 {
    clip-path: polygon(15% 15%, 40% 15%, 40% 5%, 60% 5%, 60% 15%, 85% 15%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 85%, 15% 85%, 15% 60%, 25% 60%, 25% 40%, 15% 40%);
}

/* Shape 2-2: Bottom-Right (Tab Top, Slot Left, Flat Right, Flat Bottom) */
.shape-2-2 {
    clip-path: polygon(15% 15%, 40% 15%, 40% 5%, 60% 5%, 60% 15%, 85% 15%, 85% 85%, 15% 85%, 15% 60%, 25% 60%, 25% 40%, 15% 40%);
}

.puzzle-piece:active {
    cursor: grabbing;
    z-index: 50;
    /* Bring to front when dragging */
}

.puzzle-piece:hover {
    filter: brightness(1.1);
    z-index: 30;
}

.puzzle-piece.empty {
    background: none;
    cursor: default;
    background-color: transparent;
    /* Hide empty slot visual but keep space */
    box-shadow: none;
    clip-path: none;
    /* No shape for empty */
}

/* Add an outline or bevel effect wrapper? */
/* Puzzle pieces look better with border. clip-path hides border. */
/* Can use drop-shadow filter on the element */
.puzzle-piece {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

/* Controls */
#controls {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-game {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-game:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-game.secondary {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

#timer {
    font-size: 20px;
    font-weight: bold;
    margin: 10px;
    color: #e74c3c;
    background: #fdf2f0;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid #fab1a0;
}

/* Quiz Section */
#quiz-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 320px;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    display: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    border: 2px solid #3498db;
    z-index: 1000;
    text-align: center;
    /* Center text inside */
}

#question {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1em;
    color: #2c3e50;
    text-align: left;
}

.quiz-option {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 6px 0;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    color: #333;
    font-family: inherit;
    font-size: 0.9em;
}

.quiz-option:hover {
    background-color: #e8f6fd;
    border-color: #3498db;
}

/* Button in Landing Page Hero */
.btn-puzzle {
    background-color: #f39c12;
    color: white;
}

.btn-puzzle:hover {
    background-color: #e67e22;
}

/* Media Queries for Mobile */
@media screen and (max-width: 600px) {
    #gameModal .modal-content {
        margin: 10% auto;
        padding: 15px;
        width: 95%;
    }

    #puzzle-container {
        max-width: 90vw;
        /* Use viewport width on mobile */
    }

    .btn-game {
        width: 100%;
        /* Full width buttons on very small screens */
        margin-bottom: 5px;
    }

    #controls {
        flex-direction: column;
    }
}