/* style.css — minimal overrides on top of Tailwind */
:root {
    --brand: #6366F1;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* String list items */
.str-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    transition: background 0.15s;
}

.str-item.match-ok {
    background: rgba(74, 222, 128, 0.1);
}

.str-item.match-fail {
    background: rgba(248, 113, 113, 0.1);
}

.str-item.reject-ok {
    background: rgba(74, 222, 128, 0.1);
}

.str-item.reject-fail {
    background: rgba(248, 113, 113, 0.1);
}

.str-icon {
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Highlight match */
.str-text mark {
    background: rgba(99, 102, 241, 0.3);
    color: inherit;
    border-radius: 2px;
}

/* Level row */
.level-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.level-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.level-row.active {
    background: rgba(99, 102, 241, 0.12);
}

.level-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid;
}

.level-num.solved {
    border-color: #4ADE80;
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.1);
}

.level-num.current {
    border-color: #6366F1;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.15);
}

.level-num.locked {
    border-color: #374151;
    color: #6B7280;
    background: transparent;
}

.level-name {
    font-size: 0.8rem;
    color: #D1D5DB;
}

.level-score {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6B7280;
    font-family: 'JetBrains Mono', monospace;
}

/* Score color */
.score-par {
    color: #4ADE80 !important;
}

.score-good {
    color: #A3E635 !important;
}

.score-ok {
    color: #FACC15 !important;
}

.score-over {
    color: #FB923C !important;
}

/* Animations */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    20%,
    60% {
        transform: translateX(-5px)
    }

    40%,
    80% {
        transform: translateX(5px)
    }
}

.shake {
    animation: shake 0.35s ease;
}

@keyframes pop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.04)
    }

    100% {
        transform: scale(1)
    }
}

.pop {
    animation: pop 0.25s ease;
}