/* --- Opponent Selection Card --- */
.opponent-choice-card { position: relative; padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--panel-border); background: rgba(1, 4, 9, 0.7); text-align: center; overflow: hidden; cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 1; opacity: 0; }
@media (min-width: 768px) { .opponent-choice-card { padding: 2rem; } }
.opponent-card-icon-wrapper { height: 64px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; color: var(--accent-cyan); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
@media (min-width: 768px) { .opponent-card-icon-wrapper { height: 80px; margin-bottom: 1.5rem; } }
#opponent-selection-screen.is-visible #opponent-choice-ai {
    animation: slide-in-from-left 0.6s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#opponent-selection-screen.is-visible #opponent-choice-online {
    animation: slide-in-from-right 0.6s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@media (max-width: 767px) {
    #opponent-selection-screen.is-visible .opponent-choice-card {
        animation-name: slide-in-from-bottom;
        animation-duration: 0.6s;
        animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
        animation-fill-mode: forwards;
    }
    #opponent-selection-screen.is-visible #opponent-choice-ai { animation-delay: 0.2s; }
    #opponent-selection-screen.is-visible #opponent-choice-online { animation-delay: 0.3s; }
}
.opponent-card-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); }
.opponent-card-desc { color: var(--text-dark); margin-top: 0.5rem; line-height: 1.5; min-height: 60px; }
.opponent-choice-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease-out; background-position: center; background-repeat: repeat; z-index: -1; }
#opponent-choice-ai::before { background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%2300E5FF" stroke-width="1"><path d="M0 40h20v-20h20v20h20v-20h20 M40 0v20h-20v20h-20v20h20v20h20v-20h20v-20h20"/></g></svg>'); }
#opponent-choice-online::before { background-image: url('data:image/svg+xml;utf8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="p" patternUnits="userSpaceOnUse" width="50" height="50"><path d="M25 0 V50 M0 25 H50" stroke="%2300E5FF" stroke-width="0.5"/><circle cx="25" cy="25" r="1.5" fill="%2300E5FF" opacity="0.3"/><circle cx="0" cy="0" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="50" cy="0" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="0" cy="50" r="1" fill="%2300E5FF" opacity="0.3"/><circle cx="50" cy="50" r="1" fill="%2300E5FF" opacity="0.3"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>'); background-size: 200px 200px; }