/* Import Avenir fonts */
@import url('https://fonts.googleapis.com/css2?family=Avenir:wght@400;500;550;700;750;900&display=swap');

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    background-color: #fbfcfd;
    height: 100vh;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #fbfcfd;
}

/* Header Styles */
.header {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 1392px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.menu-btn, .settings-btn {
    background: white;
    border: 1px solid #edeeee;
    border-radius: 12px;
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-btn:hover, .settings-btn:hover {
    background-color: #f8f9fa;
}

.menu-btn {
    width: 105px;
    justify-content: center;
}

.settings-btn {
    width: 124px;
    justify-content: center;
}

.menu-icon, .settings-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.667px;
    height: 16.667px;
}

.menu-btn span, .settings-btn span {
    font-family: 'Avenir', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #444d56;
    line-height: 0;
}

.header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.subtitle {
    font-family: 'Avenir', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #6a737d;
    text-align: center;
    line-height: 20px;
}

.progress-bar {
    display: flex;
    gap: 10px;
    width: 1115px;
    height: 8px;
}

.progress-segment {
    background-color: #e3e5e7;
    border-radius: 10px;
    height: 8px;
    flex: 1;
}

.progress-segment:first-child {
    flex: 0 0 270.4px;
}

.progress-segment:nth-child(2) {
    flex: 0 0 201.15px;
}

/* Main Content */
.main-content {
    position: absolute;
    top: 71px;
    left: 50%;
    transform: translateX(-50%);
    width: 1392px;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #edeeee;
    border-radius: 12px 12px 0 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 32px;
    min-height: 0;
}

.game-container {
    background-color: white;
    margin: 0 auto;
    max-width: 700px;
    border-radius: 12px 12px 0 0;
    padding: 0;
    min-height: 800px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: auto;
    margin-bottom: auto;
}

/* When content overflows, align to top */
.main-content.overflow .game-container {
    margin-top: 0;
    margin-bottom: 0;
}

/* Instructions */
.instructions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.instruction-label {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #2872dc;
    line-height: 20px;
    text-align: left;
    width: 100%;
}

.instruction-title {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 750;
    font-size: 24px;
    color: #171c21;
    line-height: normal;
    letter-spacing: -0.24px;
    width: 100%;
}

.instruction-subtitle {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 550;
    font-size: 16px;
    color: #171c21;
    line-height: 24px;
    width: 100%;
}

/* Categories Container */
.categories-container {
    display: flex;
    gap: 24px;
    height: 364px;
    width: 100%;
    justify-content: flex-start;
}

.category-box {
    flex: 1;
    background-color: #f3f4f5;
    border-radius: 12px;
    padding: 24px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 364px;
}

.category-header {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.category-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-title {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #171c21;
    line-height: normal;
}

.category-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    background-color: transparent;
}

/* Ensure category-items has no visual effects, even with drag-over class */
.category-items.drag-over {
    background-color: transparent !important;
    background-image: none !important;
    animation: none !important;
    border: none !important;
}

/* Draggable Items Container */
.items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    justify-content: flex-start;
}

.draggable-item {
    background: white;
    border: 1px solid #cccfd3;
    border-radius: 8px;
    padding: 10px;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
}

.draggable-item:hover {
    border-color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.draggable-item:active {
    cursor: grabbing;
}

.draggable-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.item-content {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 550;
    font-size: 16px;
    color: #444d56;
    line-height: 24px;
    white-space: nowrap;
}

/* Category Items (dropped items) */
.category-item {
    background: white;
    border: 1px solid #24292e;
    border-radius: 8px;
    padding: 10px;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
}

.category-item:active {
    cursor: grabbing;
}

.category-item .item-content {
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 550;
    font-size: 16px;
    color: #444d56;
    line-height: 24px;
    white-space: normal;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Validation States */
.category-item.correct {
    background-color: #e6f7f0;
    border-color: #008665;
    border-width: 2px;
}

.category-item.incorrect {
    background-color: #fef0f0;
    border-color: #CA4846;
    border-width: 2px;
}

.validation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}


/* Drop Zone Highlight */
.category-box.drag-over {
    outline: 1px solid #cccfd3;
    outline-offset: 0;
    background: #EDEDED;
}


/* Empty State */
.category-box:empty::after {
    content: '';
}

/* Responsive adjustments */
@media (max-width: 1440px) {
    .header {
        width: 90%;
        max-width: 1392px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .main-content {
        width: 90%;
        max-width: 1392px;
        left: 50%;
        transform: translateX(-50%);
    }

    .instructions {
        width: 100%;
    }
}

/* Submit Button */
.submit-btn {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2872dc;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-family: 'Avenir', 'Avenir LT Pro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(40, 114, 220, 0.3);
}

.submit-btn:hover {
    background-color: #1e5fb8;
    box-shadow: 0 6px 16px rgba(40, 114, 220, 0.4);
}

.submit-btn:active {
    background-color: #174fa0;
    transform: translateX(-50%) translateY(1px);
}