/* Code Lock */
.code-lock {
    width: 100%;
}

.code-inputs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 1rem;
}

.code-digit {
    width: 38px;
    height: 50px;
    background: var(--bg-secondary);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    color: var(--white);
    font-size: 1.3rem;
    text-align: center;
    outline: none;
    transition: border-color var(--transition-fast);
    caret-color: var(--gold);
}

.code-digit:focus {
    border-color: var(--gold);
}

.code-digit.correct {
    border-color: var(--success);
    background: rgba(78, 205, 196, 0.1);
}

.code-digit.wrong {
    border-color: var(--error);
    animation: shake 0.4s ease;
}

.code-error {
    font-size: 0.8rem;
    color: var(--error);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.code-error.visible {
    opacity: 1;
}

/* Choice Cards */
.choice-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}

.choice-card {
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px 20px;
    color: var(--white-soft);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.choice-card:active {
    transform: scale(0.98);
}

.choice-card.selected-correct {
    border-color: var(--success);
    background: rgba(78, 205, 196, 0.1);
}

.choice-card.selected-wrong {
    border-color: var(--error);
    background: rgba(255, 107, 107, 0.1);
    animation: shake 0.4s ease;
}

/* Jigsaw */
.jigsaw-board {
    width: 280px;
    height: 280px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: 4px;
    padding: 2px;
    margin: 0 auto;
    touch-action: none;
}

.jigsaw-piece {
    background-size: 400% 400%;
    border-radius: 2px;
    cursor: grab;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    position: relative;
}

.jigsaw-piece:active {
    cursor: grabbing;
    transform: scale(1.05);
    z-index: 10;
}

.jigsaw-piece.dragging {
    opacity: 0.7;
    z-index: 10;
}

.jigsaw-piece.placed {
    opacity: 1;
    cursor: default;
}

.jigsaw-complete {
    border: 2px solid var(--gold);
    border-radius: 4px;
}