.sight-word-flipper-card {
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: linear-gradient(145deg, #fff7ed 0%, #fdf2f8 48%, #ede9fe 100%);
    color: #312e81;
    box-shadow: 0 20px 45px rgba(49, 46, 129, 0.24);
    container-type: size;
}

.swf-canvas-root {
    display: flex;
    flex-direction: column;
    gap: clamp(0.45rem, 2cqh, 1rem);
    height: 100%;
    min-height: 0;
    padding: clamp(0.75rem, 3cqw, 1.5rem);
    container-type: size;
}

.swf-header,
.swf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.swf-kicker {
    margin: 0;
    color: #7c3aed;
    font-size: clamp(0.9rem, 4cqw, 1.45rem);
    font-weight: 900;
}

.swf-band-label,
.swf-progress {
    margin: 0.15rem 0 0;
    color: #6b7280;
    font-size: clamp(0.68rem, 2.2cqw, 0.95rem);
    font-weight: 800;
}

.swf-bank-control {
    display: grid;
    gap: 0.2rem;
    color: #6b7280;
    font-size: clamp(0.62rem, 1.8cqw, 0.78rem);
    font-weight: 900;
}

.swf-bank-select {
    max-width: 14rem;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    padding: clamp(0.35rem, 1.4cqw, 0.45rem) clamp(1.45rem, 4cqw, 2rem) clamp(0.35rem, 1.4cqw, 0.45rem) clamp(0.55rem, 2cqw, 0.75rem);
    color: #4c1d95;
    font-weight: 800;
}

.swf-word-card {
    display: grid;
    min-height: 0;
    flex: 1;
    place-items: center;
    width: 100%;
    border: 4px solid rgba(255, 255, 255, 0.92);
    border-radius: clamp(1rem, 5cqw, 2.5rem);
    background: linear-gradient(135deg, #f472b6 0%, #8b5cf6 55%, #2563eb 100%);
    box-shadow: 0 16px 35px rgba(76, 29, 149, 0.24);
    color: #fff;
    cursor: pointer;
    touch-action: pan-y;
    transform-origin: center;
}

.swf-word-card.flipping-next {
    animation: swf-card-jiggle-next 0.34s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

.swf-word-card.flipping-prev {
    animation: swf-card-jiggle-prev 0.34s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

@keyframes swf-card-jiggle-next {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    28% { transform: translateX(-26px) rotate(-2deg) scale(0.97); }
    62% { transform: translateX(12px) rotate(1deg) scale(1.025); }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes swf-card-jiggle-prev {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    28% { transform: translateX(26px) rotate(2deg) scale(0.97); }
    62% { transform: translateX(-12px) rotate(-1deg) scale(1.025); }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}

.swf-word {
    padding: 1rem;
    font-size: clamp(2.4rem, min(17cqw, 26cqh), 8rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 4px 12px rgba(30, 41, 59, 0.22);
}

.swf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.swf-actions button {
    min-height: clamp(2.15rem, 6cqh, 2.65rem);
    border: 0;
    border-radius: 999px;
    padding: clamp(0.42rem, 1.7cqw, 0.55rem) clamp(0.65rem, 2.6cqw, 1rem);
    background: #fff;
    color: #5b21b6;
    font-size: clamp(0.76rem, 2cqw, 0.95rem);
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.14);
}

.swf-actions .swf-next {
    background: #7c3aed;
    color: #fff;
}

@container (max-width: 560px) {
    .swf-header,
    .swf-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .swf-bank-control {
        max-width: 14rem;
    }

    .swf-actions {
        justify-content: flex-start;
    }
}

@container (max-height: 430px) {
    .swf-canvas-root {
        gap: 0.42rem;
        padding-block: 0.65rem;
    }

    .swf-header {
        align-items: center;
    }

    .swf-footer {
        gap: 0.45rem;
    }

    .swf-word {
        font-size: clamp(2.1rem, min(16cqw, 22cqh), 6rem);
    }
}