.gate-stage .font-halloween {
    font-family: 'Eater', 'Creepster', cursive !important;
}

.gate-stage .gate-wrap {
    width: min(520px, 100%);
}

.gate-card {
    text-align: center;
}

.gate-card .pumpkin {
    margin-bottom: 6px;
}

.gate-whisper {
    font-family: 'Griffy', cursive;
    font-size: 18px;
    color: #e8d2a6;
    margin: 0 0 16px;
}

.gate-card .field-block {
    text-align: left;
}

.gate-card .btn-haunt {
    margin-top: 6px;
}

.gate-error {
    margin: 12px 0 0;
    font-family: 'Griffy', cursive;
    font-size: 16px;
    color: #ff8a8a;
}

.gate-card.is-wrong {
    animation: gate-shake 0.45s ease-in-out;
    box-shadow:
        0 0 0 1px rgba(160, 20, 40, 0.7),
        0 18px 50px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(255, 40, 40, 0.28);
}

.gate-card.is-opening {
    filter: brightness(1.08);
}

@keyframes gate-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}