body {
    background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.card {
    background: #1a2a45;
    border: 1px solid #2c5364;
    border-radius: 0.5rem;
}

.card-header {
    background: #203a43;
    border-bottom: 1px solid #2c5364;
}

.deck {
    margin-left: 2rem;
    position: relative;
}

.deck-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.deck-name {
    background: linear-gradient(to right, #2c3e50, #34495e);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #46637f;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.deck-name:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.deck-name .text-yellow-300 {
    color: #facc15;
}

.deck-name .text-yellow-100 {
    color: #fef08a;
}

.words {
    margin-left: 2rem;
    margin-bottom: 1rem;
    display: none; /* Initially hidden */
}

.word {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0.5rem;
}

.word-connector {
    position: absolute;
    left: -1.5rem;
    top: 50%;
    width: 1rem;
    height: 1px;
    background-color: rgba(70, 99, 127, 0.5);
}

.word-content {
    background: linear-gradient(to right, rgba(44, 62, 80, 0.8), rgba(52, 73, 94, 0.8));
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(70, 99, 127, 0.5);
    transition: all 0.3s ease;
}

.word-content:hover {
    border-color: rgba(250, 204, 21, 0.5);
}

.word .text-yellow-400 {
    color: #fbbf24;
}

.word .text-yellow-100-80 {
    color: rgba(254, 240, 138, 0.8);
}

.chevron {
    background-color: #34495e;
    border-radius: 50%;
    padding: 0.25rem;
    transition: transform 0.3s ease;
}
.chevron.expanded {
    transform: rotate(90deg);
}