:root {
    --bg-color: #0d0914;
    --card-bg: #1a1525;
    --primary-color: #d4af37; /* Gold */
    --primary-hover: #f1c453;
    --text-main: #e0d8f0;
    --text-muted: #8c82a0;
    --accent: #5e35b1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: radial-gradient(circle at center, #1b0e2b 0%, #080310 100%);
    color: var(--text-main);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Звездный фон */
#stars, #stars2, #stars3 {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    background: transparent;
}
#stars { animation: animStar 50s linear infinite; }
#stars2 { animation: animStar 100s linear infinite; }
#stars3 { animation: animStar 150s linear infinite; }

@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

/* Generate simple box-shadow stars via JS or just CSS fallback */
#stars {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        15px 43px #fff, 84px 92px #fff, 230px 150px #fff, 430px 200px #fff, 120px 350px #fff, 
        280px 480px #fff, 510px 320px #fff, 70px 550px #fff, 390px 600px #fff, 210px 720px #fff,
        450px 800px #fff, 150px 920px #fff, 340px 980px #fff, 50px 1100px #fff, 260px 1200px #fff,
        490px 1050px #fff, 90px 1300px #fff, 320px 1450px #fff, 180px 1600px #fff, 420px 1750px #fff,
        300px 1900px #fff, 80px 2000px #fff;
    opacity: 0.8;
}
#stars2 {
    width: 1.5px;
    height: 1.5px;
    background: transparent;
    box-shadow: 
        50px 80px rgba(255,255,255,0.6), 180px 220px rgba(255,255,255,0.6), 340px 40px rgba(255,255,255,0.6), 
        490px 310px rgba(255,255,255,0.6), 270px 520px rgba(255,255,255,0.6), 110px 650px rgba(255,255,255,0.6),
        400px 840px rgba(255,255,255,0.6), 230px 950px rgba(255,255,255,0.6), 50px 1250px rgba(255,255,255,0.6),
        310px 1150px rgba(255,255,255,0.6), 460px 1380px rgba(255,255,255,0.6), 190px 1500px rgba(255,255,255,0.6),
        380px 1650px rgba(255,255,255,0.6), 100px 1850px rgba(255,255,255,0.6), 250px 1980px rgba(255,255,255,0.6);
    opacity: 0.6;
}
#stars3 {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        100px 150px rgba(255,255,255,0.4), 250px 300px rgba(255,255,255,0.4), 450px 90px rgba(255,255,255,0.4),
        150px 490px rgba(255,255,255,0.4), 380px 580px rgba(255,255,255,0.4), 480px 720px rgba(255,255,255,0.4),
        300px 880px rgba(255,255,255,0.4), 120px 1020px rgba(255,255,255,0.4), 420px 1220px rgba(255,255,255,0.4),
        220px 1350px rgba(255,255,255,0.4), 80px 1550px rgba(255,255,255,0.4), 350px 1780px rgba(255,255,255,0.4),
        270px 1880px rgba(255,255,255,0.4), 460px 1950px rgba(255,255,255,0.4);
    opacity: 0.4;
}

/* Vintage Moon and Stars Decorations */
.vintage-decor {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    opacity: 0.15; /* subtle blending with the background */
    filter: drop-shadow(0 0 15px rgba(226, 186, 63, 0.25));
}
.moon-decor {
    top: 5%;
    right: -10%;
    width: 250px;
    height: 250px;
    background-image: url('/images/vintage_moon.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: floatMoon 15s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.45;
}
.star-decor {
    background-image: url('/images/vintage_star.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(0.85);
    opacity: 0.35;
}
.star-1 {
    top: 20%;
    left: 5%;
    width: 80px;
    height: 80px;
    animation: spinStar 25s linear infinite;
}
.star-2 {
    bottom: 15%;
    right: 5%;
    width: 110px;
    height: 110px;
    animation: spinStarReverse 30s linear infinite;
}
.star-3 {
    top: 55%;
    left: -5%;
    width: 70px;
    height: 70px;
    animation: floatMoon 10s ease-in-out infinite;
}

@keyframes floatMoon {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-15px) rotate(3deg); }
}
@keyframes spinStar {
    100% { transform: rotate(360deg); }
}
@keyframes spinStarReverse {
    100% { transform: rotate(-360deg); }
}

.app-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--primary-color);
    text-align: center;
    font-weight: 600;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 30px;
    font-style: italic;
}

.screen {
    display: none;
    animation: fadeIn 0.5s ease;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Карточки выбора расклада */
.spread-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spread-card {
    background: var(--card-bg);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.spread-card:hover, .spread-card:active {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(94, 53, 177, 0.4);
    transform: translateY(-2px);
}

.spread-card .icon {
    font-size: 2.2rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.spread-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spread-card h3 {
    text-align: left;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.spread-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0;
    text-align: left;
}

/* Ввод текста */
.input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

textarea {
    width: 100%;
    height: 120px;
    background: rgba(26, 21, 37, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 15px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    resize: none;
    outline: none;
    transition: border-color 0.3s;
}

textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

/* Кнопки */
.btn {
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    outline: none;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 1px;
}

.btn.primary {
    background: linear-gradient(135deg, #d4af37, #9b7a15);
    color: #000;
}

.btn.primary:active {
    transform: scale(0.98);
}

.btn.primary.glow {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.8); }
    100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
}

.btn.secondary {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

.action-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

/* Сетка карт */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
    perspective: 1000px;
}

.card-wrapper {
    width: 70%;
    margin: 0 auto;
    aspect-ratio: 1 / 1.82;
    animation: dealCard 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Анимация раздачи карт */
@keyframes dealCard {
    from {
        opacity: 0;
        transform: translateY(100px) rotate(10deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}

.tarot-card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-card .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    border: 1.5px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.tarot-card .card-back {
    background-image: url('/images/back.jpg');
}

.tarot-card .card-front {
    transform: rotateY(180deg);
}

/* Выбранная карта (до открытия) */
.tarot-card.selected {
    transform: translateY(-12px) scale(1.03);
}

.tarot-card.selected .card-face {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

/* Номер выбранной карты */
.tarot-card .selected-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #d4af37, #9b7a15);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
    z-index: 10;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tarot-card.selected .selected-badge {
    opacity: 1;
    transform: scale(1);
}

/* Перевернутая карта */
.tarot-card.flipped {
    transform: rotateY(180deg);
}

/* Лоадер */
.mystic-loader {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    animation: rotate 4s linear infinite;
}

.moon {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    box-shadow: inset 15px 0 0 var(--primary-color);
    animation: pulseMoon 2s ease-in-out infinite;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes pulseMoon {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Стили для экрана результатов */
.result-cards-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px auto;
    max-width: 100%;
    perspective: 1000px;
}

.result-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 110px;
    max-width: 30%;
    animation: dealCard 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.result-card-wrapper .tarot-card {
    width: 100%;
    aspect-ratio: 1 / 1.82;
}

.reading-text-container {
    background: rgba(26, 21, 37, 0.65);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    padding: 25px;
    margin-top: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #ebdffc;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: fadeIn 1s ease both;
}

.reading-text-container h2 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin-bottom: 15px;
    text-align: left;
}

.reading-text-container p {
    margin-bottom: 15px;
}

.reading-text-container p:last-child {
    margin-bottom: 0;
}

/* Маленький мистический лоадер для экрана карт */
.mystic-loader-small {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid rgba(212, 175, 55, 0.15);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spinSmall 1s linear infinite;
}

@keyframes spinSmall {
    to { transform: rotate(360deg); }
}

/* Эффект размытия и скрытия невыбранных карт */
.unselected-fade {
    opacity: 0.15 !important;
    filter: blur(2px) !important;
    pointer-events: none;
    transition: all 0.8s ease;
}

/* Выделение колоды Висконти-Сфорцы огоньком/цветом */
.spread-card.visconti-highlight {
    border-color: rgba(235, 94, 40, 0.4);
    box-shadow: 0 4px 15px rgba(235, 94, 40, 0.2);
}

.spread-card.visconti-highlight:hover, .spread-card.visconti-highlight:active {
    border-color: #eb5e28;
    box-shadow: 0 0 20px rgba(235, 94, 40, 0.5);
}