/* The Wanderer's Table (duel). Was injected at runtime by ensureDuelStyles() in src/duel/duelView.js;
   linked last in <head>, where that \3c style> tag used to end up, so the cascade is unchanged. */

.duel-card-face {
    width: 100%; height: 100%; border-radius: 8px; position: relative; overflow: hidden;
    background-size: cover; background-position: center; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.duel-card-scrim {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px 5px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 20%, rgba(0,0,0,0.55) 65%, transparent 100%);
}
.duel-card-name { font-size: 10.5px; color: #e8e8e8; line-height: 1.2; text-shadow: 0 1px 2px #000; }
.duel-card-value {
    position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; padding: 0 5px;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; color: #fff; background: rgba(0,0,0,0.65);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.duel-card-tier-tag {
    position: absolute; top: 5px; right: 5px; font-size: 8px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,0.55);
}
.duel-card-back {
    width: 100%; height: 100%; border-radius: 8px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; background: repeating-linear-gradient(135deg, #14171c, #14171c 6px, #1a1e26 6px, #1a1e26 12px);
}
.duel-hand-card { width: 92px; min-width: 92px; height: 130px; cursor: pointer; transition: transform 0.15s ease; }
.duel-hand-card:active { transform: scale(0.94); }
.duel-arena-slot { width: 84px; height: 118px; perspective: 800px; }
.duel-flip-inner {
    width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(.4,.2,.2,1);
}
.duel-flip-inner.is-flipped { transform: rotateY(180deg); }
.duel-flip-front, .duel-flip-back {
    position: absolute; inset: 0; backface-visibility: hidden;
}
.duel-flip-back { transform: rotateY(180deg); }
.duel-fly-left { animation: duelFlyLeft 0.8s ease-out; }
.duel-fly-right { animation: duelFlyRight 0.8s ease-out; }
@keyframes duelFlyLeft { from { transform: translateX(-90px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes duelFlyRight { from { transform: translateX(90px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.duel-winner-glow { animation: duelGlow 0.9s ease-in-out; box-shadow: 0 0 16px 4px var(--accent-gold, var(--gold-brass)); border-radius: 8px; }
@keyframes duelGlow { 0% { box-shadow: 0 0 0 0 var(--accent-gold, var(--gold-brass)); } 50% { box-shadow: 0 0 20px 6px var(--accent-gold, var(--gold-brass)); } 100% { box-shadow: 0 0 16px 4px var(--accent-gold, var(--gold-brass)); } }
.duel-loser-fade { opacity: 0.65; filter: grayscale(0.5); transition: opacity 0.5s ease, filter 0.5s ease; }
.duel-result-banner { animation: duelPop 0.35s ease-out; }
@keyframes duelPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }