/* === ТЕМЫ РУБАШЕК КАРТ === */

/* Классическая синяя (по умолчанию) */
#app .back-classic-blue .card.back {
    background: linear-gradient(135deg, #1a3a6a, #2a5a9a);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

#app .back-classic-blue .card.back::before {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.04) 8px, rgba(255, 255, 255, 0.04) 16px),
        repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.04) 8px, rgba(255, 255, 255, 0.04) 16px);
}

#app .back-classic-blue .card.back::after {
    content: '♠';
    color: rgba(255, 255, 255, 0.6);
}

/* Королевская красная */
#app .back-royal-red .card.back {
    background: linear-gradient(135deg, #8b0000, #dc143c);
    border: 2px solid rgba(255, 215, 0, 0.4);
}

#app .back-royal-red .card.back::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.15) 0%, transparent 40%),
        repeating-linear-gradient(60deg, transparent, transparent 10px, rgba(255, 215, 0, 0.08) 10px, rgba(255, 215, 0, 0.08) 12px);
}

#app .back-royal-red .card.back::after {
    content: '♛';
    color: rgba(255, 215, 0, 0.8);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Изумрудная */
#app .back-emerald .card.back {
    background: linear-gradient(135deg, #064e3b, #10b981);
    border: 2px solid rgba(255, 255, 255, 0.25);
}

#app .back-emerald .card.back::before {
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.05) 0deg 30deg, transparent 30deg 60deg);
}

#app .back-emerald .card.back::after {
    content: '❧';
    color: rgba(255, 255, 255, 0.7);
    font-size: 32px;
}

/* Чёрная с золотом */
#app .back-midnight .card.back {
    background: linear-gradient(135deg, #000000, #1a1a1a);
    border: 2px solid rgba(255, 215, 0, 0.6);
}

#app .back-midnight .card.back::before {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 215, 0, 0.05) 5px, rgba(255, 215, 0, 0.05) 6px),
        repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255, 215, 0, 0.05) 5px, rgba(255, 215, 0, 0.05) 6px);
}

#app .back-midnight .card.back::after {
    content: '♛';
    color: rgba(255, 215, 0, 0.9);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    font-size: 34px;
}

/* Фиолетовая магическая */
#app .back-purple-magic .card.back {
    background: linear-gradient(135deg, #4c1d95, #a855f7);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#app .back-purple-magic .card.back::before {
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.15) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.15) 2px, transparent 2px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 3px, transparent 3px);
    background-size: 30px 30px, 30px 30px, 50px 50px;
}

#app .back-purple-magic .card.back::after {
    content: '✦';
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
    font-size: 30px;
}

/* Радужная */
#app .back-rainbow .card.back {
    background: linear-gradient(135deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
    border: 2px solid rgba(255, 255, 255, 0.4);
    background-size: 200% 200%;
    animation: rainbowShift 5s ease infinite;
}

@keyframes rainbowShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

#app .back-rainbow .card.back::before {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 12px);
}

#app .back-rainbow .card.back::after {
    content: '★';
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Океан */
#app .back-ocean .card.back {
    background: linear-gradient(135deg, #0c4a6e, #0ea5e9);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#app .back-ocean .card.back::before {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(255, 255, 255, 0.05) 15px, rgba(255, 255, 255, 0.05) 17px);
}

#app .back-ocean .card.back::after {
    content: '≋';
    color: rgba(255, 255, 255, 0.7);
    font-size: 36px;
}

/* Закат */
#app .back-sunset .card.back {
    background: linear-gradient(135deg, #f97316, #ec4899, #8b5cf6);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#app .back-sunset .card.back::before {
    background:
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
        repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(255, 255, 255, 0.05) 8px, rgba(255, 255, 255, 0.05) 10px);
}

#app .back-sunset .card.back::after {
    content: '☀';
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.8);
    font-size: 32px;
}

/* === ТЕМЫ ЛИЦЕВОЙ СТОРОНЫ === */

/* Классическая (по умолчанию) */
#app .face-classic .card.face-up {
    background: #ffffff;
    color: inherit;
}

#app .face-classic .card.face-up.red {
    color: #d40000;
}

#app .face-classic .card.face-up.black {
    color: #1a1a1a;
}

/* Золотая */
#app .face-golden .card.face-up {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #d4af37;
}

#app .face-golden .card.face-up.red {
    color: #b91c1c;
}

#app .face-golden .card.face-up.black {
    color: #1f2937;
}

#app .face-golden .card.face-up .card-corner {
    text-shadow: 0 1px 2px rgba(212, 175, 55, 0.3);
}

/* Тёмная */
#app .face-dark .card.face-up {
    background: linear-gradient(135deg, #1f2937, #111827);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#app .face-dark .card.face-up.red {
    color: #f87171;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

#app .face-dark .card.face-up.black {
    color: #e5e7eb;
    text-shadow: 0 0 8px rgba(229, 231, 235, 0.3);
}

/* Винтажная */
#app .face-vintage .card.face-up {
    background: linear-gradient(135deg, #f5e6d3, #e8d5b7);
    border: 2px solid #8b7355;
    font-family: 'Georgia', serif;
}

#app .face-vintage .card.face-up.red {
    color: #8b0000;
}

#app .face-vintage .card.face-up.black {
    color: #2c1810;
}

#app .face-vintage .card.face-up::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 5px;
    pointer-events: none;
}

/* Минимализм */
#app .face-minimal .card.face-up {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

#app .face-minimal .card.face-up .card-center {
    display: none;
}

#app .face-minimal .card.face-up .card-corner {
    font-size: 16px;
    font-weight: 500;
}

#app .face-minimal .card.face-up.red {
    color: #ef4444;
}

#app .face-minimal .card.face-up.black {
    color: #111827;
}

/* Неон */
#app .face-neon .card.face-up {
    background: #0a0a0a;
    border: 2px solid;
}

#app .face-neon .card.face-up.red {
    color: #ff0080;
    border-color: #ff0080;
    text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080;
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.3), inset 0 0 15px rgba(255, 0, 128, 0.1);
}

#app .face-neon .card.face-up.black {
    color: #00ffff;
    border-color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 255, 255, 0.1);
}

/* === СТИЛИ ФИГУРНЫХ КАРТ === */

/* Базовые стили для всех фигурных карт */
#app .figure-card, .ace-card {
    position: relative;
}

/* Королевский стиль */
#app .figure-royal .figure-card {
    background: linear-gradient(135deg, #fef3c7, #fbbf24) !important;
    border: 2px solid #d4af37 !important;
}

#app .figure-royal .figure-card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 4px;
    pointer-events: none;
}

#app .figure-royal .figure-card .card-center {
    font-size: 40px !important;
}

#app .figure-royal .figure-jack .card-center::before {
    content: '🃏';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    opacity: 0.3;
}

#app .figure-royal .figure-queen .card-center::before {
    content: '♛';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    opacity: 0.3;
}

#app .figure-royal .figure-king .card-center::before {
    content: '♚';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    opacity: 0.3;
}

#app .figure-royal .ace-card {
    background: linear-gradient(135deg, #fef3c7, #fbbf24) !important;
    border: 2px solid #d4af37 !important;
}

#app .figure-royal .ace-card .card-center {
    font-size: 60px !important;
    text-shadow: 0 0 15px currentColor;
}

/* Современный стиль */
#app .figure-modern .figure-card {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
    border: 2px solid #6b7280 !important;
}

#app .figure-modern .figure-card::before {
    content: '';
    position: absolute;
    inset: 6px;
    background:
        linear-gradient(45deg, transparent 48%, currentColor 48%, currentColor 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, currentColor 48%, currentColor 52%, transparent 52%);
    opacity: 0.1;
    pointer-events: none;
}

#app .figure-modern .figure-card .card-center {
    font-size: 36px !important;
    font-weight: 900;
}

#app .figure-modern .ace-card {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
    border: 2px solid #6b7280 !important;
}

#app .figure-modern .ace-card .card-center {
    font-size: 56px !important;
    font-weight: 900;
}

/* Узорчатый стиль */
#app .figure-ornate .figure-card {
    border: 3px double currentColor !important;
}

#app .figure-ornate .figure-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.2;
    pointer-events: none;
}

#app .figure-ornate .figure-card::after {
    content: '';
    position: absolute;
    inset: 10px;
    background:
        radial-gradient(circle at 20% 20%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 20% 80%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, currentColor 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.15;
    pointer-events: none;
}

#app .figure-ornate .figure-card .card-center {
    font-size: 38px !important;
}

#app .figure-ornate .ace-card {
    border: 3px double currentColor !important;
}

#app .figure-ornate .ace-card .card-center {
    font-size: 64px !important;
}

#app .figure-ornate .ace-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
}

/* Классический стиль фигурных карт (по умолчанию) */
#app .figure-classic .figure-card .card-center {
    font-size: 34px !important;
}

#app .figure-classic .ace-card .card-center {
    font-size: 52px !important;
}

/* Особое оформление тузов */
#app .ace-card .card-center {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Анимация для новых тем */
#app .card {
    transition: all 0.3s ease;
}

/* Превью тем в настройках */
#app .theme-preview {
    width: 60px;
    height: 84px;
    border-radius: 6px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

#app .theme-preview.back-preview {
    background-size: cover;
}

#app .theme-preview.face-preview {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid #ddd;
}

#app .theme-option {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

#app .theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

#app .theme-option.active {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--accent-gold);
}

#app .theme-option-info {
    flex: 1;
}

#app .theme-option-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

#app .theme-option-desc {
    font-size: 11px;
    opacity: 0.7;
}

#app .theme-check {
    font-size: 20px;
    color: var(--accent-gold);
    opacity: 0;
    transition: opacity 0.2s;
}

#app .theme-option.active .theme-check {
    opacity: 1;
}