@import "../fonts/fonts.css";

@view-transition {
    navigation: auto;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #FAF8F5;
    color: #1C1815;
    -webkit-font-smoothing: antialiased;
}

/* Modern top-layer dialog transitions with @starting-style */
dialog {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                display 0.22s allow-discrete,
                overlay 0.22s allow-discrete;
}

dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.97) translateY(6px);
    }
}

dialog::backdrop {
    background-color: rgba(28, 24, 21, 0);
    backdrop-filter: blur(0px);
    transition: background-color 0.22s ease-out,
                backdrop-filter 0.22s ease-out,
                display 0.22s allow-discrete,
                overlay 0.22s allow-discrete;
}

dialog[open]::backdrop {
    background-color: rgba(28, 24, 21, 0.35);
    backdrop-filter: blur(4px);
}

@starting-style {
    dialog[open]::backdrop {
        background-color: rgba(28, 24, 21, 0);
        backdrop-filter: blur(0px);
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog, dialog::backdrop {
        transform: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Duel Arena & Name Selection Interactivity ────────────── */
.duel-card {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.duel-card:focus {
    outline: none !important;
}

.duel-card:focus-visible {
    outline: 2px solid #1c1815 !important;
    outline-offset: 3px;
}

/* Instant tactile feedback when a name is chosen */
.duel-card.is-selected {
    background-color: #1c1815 !important;
    border-color: #1c1815 !important;
    transform: scale(1.015);
    box-shadow: 0 10px 25px -5px rgba(28, 24, 21, 0.25) !important;
}

.duel-card.is-selected .duel-card-name {
    color: #FAF8F5 !important;
}

.duel-card.is-selected .duel-card-label {
    color: #a89b8c !important;
}

.duel-card.is-dimmed {
    opacity: 0.3 !important;
    transform: scale(0.985);
}

.duel-card.is-discarded {
    opacity: 0 !important;
    transform: scale(0.92) translateY(6px);
    border-color: #f43f5e !important;
}

/* Silky smooth transition when next pair arrives */
.arena-refresh {
    animation: duelCardIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes duelCardIn {
    0% {
        opacity: 0.35;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .duel-card.is-selected,
    .duel-card.is-dimmed,
    .duel-card.is-discarded,
    .arena-refresh {
        transform: none !important;
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}