/* ============================================================
   Letter Boxed Solver — Card-Only Design
   Matches reference: centered card, colored circle inputs,
   result blocks with word pills + arrows, completion badge.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Main card ──────────────────────────────────────────────── */
.lbs-card {
    width: 100%;
    box-sizing: border-box;
    margin: 2.5em auto;
    padding: 2em 2em 1.75em;
    background: #fffbf6;
    border: 1px solid #f0e8df;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(180, 160, 130, 0.10), 0 2px 8px rgba(180, 160, 130, 0.06);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a1a2e;
}

.lbs-card-title {
    font-size: 1.2em;
    font-weight: 800;
    text-align: center;
    margin: 0 0 1.5em 0;
    color: #1a1a2e;
    font-style: italic;
    letter-spacing: -0.02em;
}

/* ── Sides grid ─────────────────────────────────────────────── */
.lbs-card-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.1em;
    margin-bottom: 1.25em;
}

.lbs-card-side-group {
    background: #ffffff;
    border: 1px solid #f0ebe4;
    border-radius: 14px;
    padding: 0.85em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lbs-card-side-label {
    display: block;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7a6f5f;
    margin-bottom: 0.6em;
    text-align: center;
}

.lbs-card-circles {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ── Circle inputs ──────────────────────────────────────────── */
.lbs-circle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    text-align: center !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    outline: none !important;
    cursor: text !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
}

.lbs-circle:focus {
    transform: scale(1.08);
}

/* Green – Top side */
.lbs-circle-green {
    background: #e0f5e3 !important;
    color: #2d7a3e !important;
    border-color: #c4e8cb !important;
}
.lbs-circle-green:focus {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18) !important;
}

/* Pink – Right side */
.lbs-circle-pink {
    background: #fde4e9 !important;
    color: #c0274d !important;
    border-color: #f5c0cc !important;
}
.lbs-circle-pink:focus {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15) !important;
}

/* Amber – Bottom side */
.lbs-circle-amber {
    background: #fef1da !important;
    color: #8a5e1e !important;
    border-color: #f0d9a8 !important;
}
.lbs-circle-amber:focus {
    border-color: #f9a825 !important;
    box-shadow: 0 0 0 3px rgba(249, 168, 37, 0.18) !important;
}

/* Grey – Left side */
.lbs-circle-grey {
    background: #eeeff3 !important;
    color: #3d3d56 !important;
    border-color: #d8d9e0 !important;
}
.lbs-circle-grey:focus {
    border-color: #8b8fa6 !important;
    box-shadow: 0 0 0 3px rgba(139, 143, 166, 0.18) !important;
}

/* ── Error ──────────────────────────────────────────────────── */
.lbs-card-error {
    background: #fef2f2;
    color: #c0274d;
    border: 1px solid #f5c0cc;
    border-radius: 10px;
    padding: 0.55em 0.85em;
    margin-bottom: 1em;
    font-size: 0.84em;
    font-weight: 500;
}

/* ── Action buttons ─────────────────────────────────────────── */
.lbs-card-actions {
    display: flex;
    gap: 0.6em;
    margin-bottom: 1.25em;
}

.lbs-card-btn {
    padding: 0.6em 1.3em;
    border: none;
    border-radius: 10px;
    font-size: 0.88em;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}

.lbs-card-btn-solve {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    color: #fff;
    flex: 1;
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.2);
}
.lbs-card-btn-solve:hover {
    background: linear-gradient(135deg, #2d2d44 0%, #3a3a58 100%);
    box-shadow: 0 4px 14px rgba(26, 26, 46, 0.3);
}
.lbs-card-btn-solve:disabled {
    opacity: 0.5;
    cursor: wait;
}

.lbs-card-btn-clear {
    background: #fff;
    color: #7a6f5f;
    border: 1px solid #e8e0d6;
}
.lbs-card-btn-clear:hover {
    background: #f9f5f0;
}

/* ── Result block ───────────────────────────────────────────── */
.lbs-result-block {
    background: #fef9f3;
    border: 1px solid #ede6dc;
    border-radius: 14px;
    padding: 1em 1.15em;
    margin-bottom: 0.7em;
}

.lbs-result-curated {
    background: #f5fbf7;
    border-color: #c4e8cb;
}

.lbs-result-label {
    display: block;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7a6f5f;
    margin-bottom: 0.55em;
}

.lbs-result-chain {
    display: flex;
    align-items: center;
    gap: 0.55em;
    flex-wrap: wrap;
    margin-bottom: 0.65em;
}

.lbs-result-word {
    display: inline-block;
    background: #ffffff;
    border: 1.5px solid #e0dbd3;
    border-radius: 8px;
    padding: 0.3em 0.8em;
    font-size: 1.05em;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    color: #1a1a2e;
    letter-spacing: 0.3px;
}

.lbs-result-arrow {
    color: #c4b8a8;
    font-size: 1.15em;
}

.lbs-result-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.78em;
    font-weight: 600;
    font-style: italic;
    background: #e0f5e3;
    color: #2d7a3e;
    padding: 0.3em 0.7em;
    border-radius: 6px;
}

.lbs-check {
    font-weight: 800;
    font-style: normal;
}

/* ── Empty state (before Solve) ─────────────────────────────── */
#lbs-results.lbs-results-empty {
    margin-top: 1em;
    padding: 0.5em 0;
}

.lbs-card-hint {
    margin: 0;
    text-align: center;
    font-size: 0.88em;
    font-weight: 500;
    color: #8a7f70;
    line-height: 1.45;
}

/* ── More solutions ─────────────────────────────────────────── */
.lbs-card-more {
    text-align: center;
    color: #a09580;
    font-size: 0.82em;
    font-weight: 500;
    margin: 0.5em 0 0;
}

/* ── Loading ────────────────────────────────────────────────── */
.lbs-loading {
    text-align: center;
    padding: 1.5em;
    color: #7a6f5f;
    font-size: 0.88em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
}

.lbs-spinner {
    width: 17px;
    height: 17px;
    border: 3px solid #e8e0d6;
    border-top-color: #1a1a2e;
    border-radius: 50%;
    animation: lbs-spin 0.6s linear infinite;
}

@keyframes lbs-spin {
    to { transform: rotate(360deg); }
}

/* ── Empty / no solutions ───────────────────────────────────── */
.lbs-card-empty {
    text-align: center;
    padding: 1em;
    background: #fef8ee;
    border: 1px solid #f0d9a8;
    border-radius: 10px;
    color: #8a5e1e;
    font-size: 0.86em;
    font-weight: 500;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lbs-card {
        margin: 1em 0.5em;
        padding: 1.2em 1em;
        border-radius: 14px;
    }
    .lbs-card-title {
        font-size: 1.1em;
        margin-bottom: 1.2em;
    }
    .lbs-card-sides {
        grid-template-columns: 1fr 1fr;
        gap: 0.6em;
    }
    .lbs-card-side-group {
        padding: 0.6em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .lbs-card-side-label {
        font-size: 0.6em;
        margin-bottom: 0.4em;
        letter-spacing: 1px;
    }
    .lbs-card-circles {
        gap: 4px;
    }
    .lbs-circle {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.05em !important;
        border-radius: 8px !important;
    }
    .lbs-result-word {
        font-size: 0.9em;
        padding: 0.25em 0.6em;
    }
    .lbs-result-chain {
        gap: 0.4em;
    }
    .lbs-result-arrow {
        font-size: 1em;
    }
    .lbs-card-actions {
        flex-direction: column;
        gap: 0.8em;
    }
    .lbs-card-btn {
        width: 100%;
        padding: 0.8em 1.2em;
    }
}