@font-face {
    font-family: Fredoka;
    src: url(./FredokaOne-Regular.ttf);
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fredoka', Arial, sans-serif;
    background-color: #a5a5bb;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #342559;
    color: #bbb;
    text-align: center;
    justify-content: center;
    padding: 1rem 0;
    padding-bottom: 2.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

#clipboard-popup-container {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#clipboard-popup-container.hidden {
    display: none;
}

#clipboard-popup {
    font-family: 'Fredoka', Arial, sans-serif;
    color: #333;
    font-size: 1rem;
}

.number.blank {
    color: inherit;
    background-color: inherit;
    border: none;
}


/* Tab Styling */
#tab-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    user-select: none;
}

.tab button {
    flex: 1;
    padding: 0.5rem;
    font-size: 1rem;
    text-align: center;
    background-color: #EEF;
    border: 1px solid #000;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    user-select: none;
}
@media (hover: hover) {
    .tab button:hover {
        background-color: #d0d0d0;
    }
}

.tab button.activetab {
    background-color: #342559;
    color: white;
}

#share-button {
    background-color: #ff9800;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
    line-height:0.75em;
}

/* Game Wrapper Styling */
#game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.target {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff0a4;
    -webkit-text-stroke: 1px #342559;
    /* text-stroke: 1px #342559; */
    margin-bottom: 1rem;
    user-select: none;
}

#numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.number {
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #e1e1ff;
    border: 3px dashed #333;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
    user-select: none;
}

@media (hover: hover) {
    .number:hover {
        transform: scale(1.1);
        background-color: #f0f0f0;
    }
}

.number.active {
    color: white;
    background-color: #5f9c49;
    border-color: #5f9c49;
}

#ops {
    display: flex;
    gap: 0.5rem;
}

.op {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    background-color: #333;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
    user-select: none;
}

@media (hover: hover) {
    .op:hover {
        background-color: #342559;
    }
}

.op.active {
    background-color: #5f9c49;
}

.submit {
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    color: white;
    background-color: #342559;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    user-select: none;
}

@media (hover: hover) {
    .submit:hover {
        background-color: #5a56c1;
    }
}

/* Popup Styling */
#won-level-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1.5rem;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;
}

#won-level-popup.hidden {
    display: none;
}

#victory-buttons button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.5rem;
    margin: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

#nextpuzzle {
    background-color: #342559;
    color: white;
}

#continuepuzzle {
    background-color: #a0a0a0;
    color: white;
}

@media (hover: hover) {
    #nextpuzzle:hover {
        background-color: #5a56c1;
    }

    #continuepuzzle:hover {
        background-color: #888;
    }
}

.footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header {
        font-size: 1.2rem;
    }

    #tab-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.3rem;
    }

    .tab button {
        flex: 0 0 15%;
        font-size: 0.8rem;
        padding: 0.4rem;
        white-space: nowrap;
    }
    
    #share-button {
        flex: 0 0 auto; /* Prevent shrinking of the share button */
        padding: 0.4rem 0.8rem; /* Adjust padding for a smaller button */
        font-size: 0.8rem; /* Smaller font size for share button */
    }

    #numbers {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* .number { */
        /* width: 60px; */
        /* height: 60px; */
        /* line-height: 60px; */
        /* font-size: 1.2rem; */
    /* } */

    .submit {
        font-size: 1rem;
        padding: 0.5rem;
    }

    #won-level-popup {
        width: 90%;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .tab button {
        flex: 0 0 18%; /* Slightly larger for better usability */
        font-size: 0.7rem;
        padding: 0.3rem;
    }

    #share-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    /* .number { */
        /* width: 50px; */
        /* height: 50px; */
        /* line-height: 50px; */
        /* font-size: 1rem; */
    /* } */

    .submit {
        font-size: 0.9rem;
        padding: 0.4rem;
    }

    #won-level-popup {
        font-size: 0.9rem;
    }
}