/**
 * Стили фронтенда плагина AI Tarot Cards 🔮
 * Премиальный дизайн: Космический темно-фиолетовый, сусальное золото, глассморфизм, 3D-анимации
 */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Сброс и глобальные стили для изолированного контейнера Таро */
#tarot-app.tarot-container-outer,
#dream-app.tarot-container-outer {
	--bg-dark: #0a0813;
	--bg-panel: rgba(16, 12, 33, 0.75);
	--gold: #d4af37;
	--gold-light: #f3e098;
	--gold-dark: #aa7c11;
	--gold-gradient: linear-gradient(135deg, #f3e098, #d4af37, #aa7c11);
	--cosmic-purple: #7a4fc1;
	--cosmic-glow: rgba(122, 79, 193, 0.4);
	--glass-border: rgba(212, 175, 55, 0.15);
	--text-light: #f4f3f7;
	--text-muted: #a3a1b8;
	
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--bg-dark);
	background-image: 
		radial-gradient(circle at 10% 20%, rgba(35, 11, 84, 0.3) 0%, transparent 40%),
		radial-gradient(circle at 90% 80%, rgba(20, 10, 50, 0.4) 0%, transparent 45%);
	color: var(--text-light);
	border-radius: 20px;
	padding: 30px;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
	margin: 20px auto;
	max-width: 1100px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

#tarot-app *,
#dream-app * {
	box-sizing: border-box;
}

/* Эффект мерцающего звездного неба сзади */
#tarot-app::before,
#dream-app::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: 
		radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
		radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
		radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px);
	background-size: 550px 550px, 350px 350px, 250px 250px;
	background-position: 0 0, 40px 60px, 130px 270px;
	opacity: 0.12;
	pointer-events: none;
	animation: tarotStars 120s linear infinite;
}

@keyframes tarotStars {
	from { background-position: 0 0, 40px 60px, 130px 270px; }
	to { background-position: 550px 550px, 390px 410px, 380px 820px; }
}

/* Хелпер скрытия */
.tarot-hidden {
	display: none !important;
}

/* Вкладки переключения (Табы) */
.tarot-tabs {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
	border-bottom: 1.5px solid var(--glass-border);
	padding-bottom: 15px;
}

.tarot-tab-btn {
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-muted);
	font-family: 'Marcellus', serif;
	font-size: 16px;
	padding: 10px 24px;
	cursor: pointer;
	border-radius: 30px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-tab-btn:hover {
	color: var(--gold-light);
	background: rgba(255, 255, 255, 0.04);
}

.tarot-tab-btn.active {
	color: var(--text-light);
	background: var(--gold-gradient);
	border: none;
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
	font-weight: 500;
}

/* Стили вкладок контента */
.tarot-tab-content {
	display: none;
}

.tarot-tab-content.active {
	display: block;
	animation: tarotFadeIn 0.5s ease-out;
}

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

/* Премиальная Глассморфизм Панель */
.tarot-glass-panel {
	background: var(--bg-panel);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	border: 1.5px solid var(--glass-border);
	border-radius: 18px;
	padding: 40px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	position: relative;
	z-index: 1;
}

/* Типографика */
#tarot-app.tarot-container-outer .tarot-title,
#dream-app.tarot-container-outer .tarot-title,
.tarot-title {
	font-family: 'Marcellus', Georgia, serif;
	font-size: 32px;
	text-align: center;
	margin-top: 0;
	margin-bottom: 8px;
	color: #f3e098 !important; /* Премиальное светлое золото, защищенное от прозрачности */
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: none !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
	-webkit-text-fill-color: #f3e098 !important;
	letter-spacing: 1.5px;
	text-shadow: 0 0 12px rgba(212, 175, 55, 0.75), 0 2px 4px rgba(0,0,0,0.5) !important;
}

.tarot-subtitle {
	font-size: 15px;
	color: var(--text-muted);
	text-align: center;
	margin-bottom: 35px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

/* Поля Ввода */
.tarot-input-group {
	margin-bottom: 30px;
}

.tarot-input-group label {
	display: block;
	font-family: 'Marcellus', serif;
	color: var(--gold-light);
	font-size: 16px;
	margin-bottom: 10px;
	letter-spacing: 0.5px;
}

.tarot-input-group textarea {
	width: 100%;
	background: rgba(10, 8, 19, 0.6);
	border: 1.5px solid var(--glass-border);
	border-radius: 12px;
	padding: 15px 18px;
	color: var(--text-light);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
	transition: all 0.3s ease;
}

.tarot-input-group textarea:focus {
	outline: none;
	border-color: var(--cosmic-purple);
	box-shadow: 0 0 12px var(--cosmic-glow);
	background: rgba(10, 8, 19, 0.85);
}

/* Выбор типа расклада */
.tarot-layout-selector {
	margin-bottom: 35px;
}

.selector-label {
	display: block;
	font-family: 'Marcellus', serif;
	color: var(--gold-light);
	font-size: 16px;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
}

.tarot-layout-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.layout-option-card {
	border: 1.5px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.02);
	padding: 20px;
	border-radius: 14px;
	cursor: pointer;
	display: flex;
	gap: 15px;
	align-items: flex-start;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.layout-option-card:hover {
	border-color: rgba(212, 175, 55, 0.4);
	background: rgba(255, 255, 255, 0.04);
}

.layout-option-card.active {
	border-color: var(--cosmic-purple);
	background: rgba(122, 79, 193, 0.08);
	box-shadow: 0 0 15px rgba(122, 79, 193, 0.15);
}

.layout-option-card.active::after {
	content: '✓';
	position: absolute;
	top: 12px; right: 12px;
	color: var(--cosmic-purple);
	font-weight: bold;
	font-size: 14px;
}

.option-icon {
	font-size: 26px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.option-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.option-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-light);
}

.option-desc {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.4;
}

/* Премиум Кнопки */
.tarot-actions {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.tarot-btn-primary {
	background: var(--gold-gradient);
	border: none;
	color: #0a0813;
	font-family: 'Marcellus', serif;
	font-size: 18px;
	font-weight: 600;
	padding: 14px 44px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
	letter-spacing: 1px;
}

.tarot-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
	filter: brightness(1.1);
}

.tarot-btn-primary:active {
	transform: translateY(1px);
}

.tarot-btn-secondary {
	background: transparent;
	border: 1.5px solid var(--gold);
	color: var(--gold-light);
	font-family: 'Marcellus', serif;
	font-size: 15px;
	padding: 10px 26px;
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tarot-btn-secondary:hover {
	background: rgba(212, 175, 55, 0.08);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}

.tarot-btn-glowing {
	background: linear-gradient(135deg, #7a4fc1, #542ca0);
	border: 1.5px solid var(--gold-light);
	color: var(--text-light);
	font-family: 'Marcellus', serif;
	font-size: 18px;
	padding: 15px 35px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 0 25px rgba(122, 79, 193, 0.5);
	animation: tarotBtnPulse 2s infinite alternate;
}

.tarot-btn-glowing:hover {
	transform: scale(1.03);
	box-shadow: 0 0 35px rgba(122, 79, 193, 0.8), 0 0 15px rgba(212, 175, 55, 0.4);
}

@keyframes tarotBtnPulse {
	from { box-shadow: 0 0 15px rgba(122, 79, 193, 0.4); }
	to { box-shadow: 0 0 25px rgba(122, 79, 193, 0.7), 0 0 10px rgba(212, 175, 55, 0.3); }
}

.tarot-btn-back-arrow {
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 14px;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.tarot-btn-back-arrow:hover {
	color: var(--text-light);
	background: rgba(255,255,255,0.05);
}

/* Нотис на фронтенде */
.tarot-login-notice {
	text-align: center;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 25px;
}

/* ---------------------------------------------------- */
/* ЭКРАН СТОЛА ГАДАНИЯ */
/* ---------------------------------------------------- */
.tarot-board {
	min-height: 450px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.tarot-board-question-preview {
	background: rgba(0,0,0,0.3);
	border: 1px dashed var(--glass-border);
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 14px;
	margin: 15px 0 35px;
	max-width: 80%;
	text-align: center;
}

.tarot-board-question-preview .q-label {
	color: var(--gold-light);
	margin-right: 5px;
	font-weight: 500;
}

.tarot-board-question-preview .q-text {
	font-style: italic;
	color: var(--text-light);
}

/* Колода, которая тасуется */
.tarot-deck-container {
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.tarot-deck {
	position: relative;
	width: 90px;
	height: 140px;
}

.tarot-deck-card {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	border: 1px solid var(--gold);
	background-color: #110d29;
	/* Спиральный узор рубашки карты на чистом CSS */
	background-image: 
		radial-gradient(circle at center, transparent 0, #110d29 70%),
		repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.15) 0, rgba(212, 175, 55, 0.15) 1px, transparent 0, transparent 8px),
		repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.15) 0, rgba(212, 175, 55, 0.15) 1px, transparent 0, transparent 8px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.4);
	transition: all 0.5s ease;
}

/* Карты ложатся слоями для объема колоды */
.tarot-deck-card.back-1 { transform: rotate(2deg) translate(2px, 1px); }
.tarot-deck-card.back-2 { transform: rotate(-3deg) translate(-2px, -2px); }
.tarot-deck-card.back-3 { transform: rotate(1deg) translate(1px, 2px); }
.tarot-deck-card.back-4 { transform: rotate(-1deg) translate(-1px, 0); }
.tarot-deck-card.back-5 { transform: rotate(0) translate(0, 0); z-index: 5; }

/* Анимация тасования (shuffling) */
.tarot-deck.shuffling .tarot-deck-card.back-1 { animation: shuffleCard1 0.7s infinite alternate; }
.tarot-deck.shuffling .tarot-deck-card.back-2 { animation: shuffleCard2 0.7s infinite alternate; }
.tarot-deck.shuffling .tarot-deck-card.back-3 { animation: shuffleCard3 0.7s infinite alternate; }
.tarot-deck.shuffling .tarot-deck-card.back-4 { animation: shuffleCard4 0.7s infinite alternate; }
.tarot-deck.shuffling .tarot-deck-card.back-5 { animation: shuffleCard5 0.7s infinite alternate; }

@keyframes shuffleCard1 {
	0% { transform: rotate(2deg) translate(2px, 1px); }
	100% { transform: rotate(15deg) translate(-45px, -5px); z-index: 10; }
}
@keyframes shuffleCard2 {
	0% { transform: rotate(-3deg) translate(-2px, -2px); }
	100% { transform: rotate(-12deg) translate(40px, 3px); z-index: 9; }
}
@keyframes shuffleCard3 {
	0% { transform: rotate(1deg) translate(1px, 2px); }
	100% { transform: rotate(8deg) translate(-35px, 8px); z-index: 8; }
}
@keyframes shuffleCard4 {
	0% { transform: rotate(-1deg) translate(-1px, 0); }
	100% { transform: rotate(-10deg) translate(30px, -7px); z-index: 7; }
}
@keyframes shuffleCard5 {
	0% { transform: rotate(0) translate(0, 0); }
	100% { transform: rotate(3deg) translate(-10px, -12px); z-index: 6; }
}

.tarot-deck-status {
	font-size: 13px;
	color: var(--gold-light);
	font-style: italic;
	animation: tarotPulse 1.5s infinite alternate;
}

@keyframes tarotPulse {
	from { opacity: 0.6; }
	to { opacity: 1; text-shadow: 0 0 5px rgba(212, 175, 55, 0.4); }
}

/* Стол со слотами для раздачи */
.tarot-slots-table {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin: 30px 0;
	width: 100%;
}

.tarot-slot-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.tarot-slot-title {
	font-family: 'Marcellus', serif;
	font-size: 14px;
	color: var(--gold-light);
	letter-spacing: 0.5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 3D КАРТА (flip effect) */
.tarot-card-3d {
	width: 90px;
	height: 140px;
	perspective: 1000px;
	cursor: pointer;
}

.tarot-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2);
	transform-style: preserve-3d;
}

/* Состояние: Перевернуто лицевой стороной */
.tarot-card-3d.flipped .tarot-card-inner {
	transform: rotateY(180deg);
}

/* Поддержка перевернутых карт в таро (Reversed orientation) */
.tarot-card-3d.flipped.reversed-card .tarot-card-inner {
	transform: rotateY(180deg) rotate(180deg);
}

.tarot-card-front, .tarot-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Рубашка карты (слот) */
.tarot-card-back {
	background-color: #110d29;
	border: 1.5px dashed rgba(212, 175, 55, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.tarot-card-back::before {
	content: '?';
	font-family: 'Marcellus', serif;
	font-size: 26px;
	color: rgba(212, 175, 55, 0.35);
}

.tarot-card-3d:not(.disabled):hover .tarot-card-back {
	border-color: var(--gold);
	box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
	transform: translateY(-5px);
}

.tarot-card-3d:not(.disabled):hover .tarot-card-back::before {
	color: var(--gold-light);
	text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* Лицевая сторона карты */
.tarot-card-front {
	background-color: #0d0b1d;
	border: 1.5px solid var(--gold);
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 8px 5px;
	overflow: hidden;
}

/* Стилизация SVG внутри карты фронта */
.tarot-card-front svg {
	width: 100%;
	height: 80%;
	display: block;
}

.tarot-card-front svg .card-border {
	stroke: var(--gold);
	stroke-width: 1;
	fill: none;
}

.tarot-card-front svg .gold-stroke {
	stroke: var(--gold);
	fill: none;
}

.tarot-card-front svg .gold-stroke-thin {
	stroke: rgba(212, 175, 55, 0.4);
	fill: none;
	stroke-width: 0.8;
}

.tarot-card-front svg .gold-stroke-glow {
	stroke: var(--gold-light);
	fill: none;
	filter: drop-shadow(0 0 2px var(--gold));
}

.tarot-card-front svg .gold-fill {
	fill: var(--gold);
}

.tarot-card-front svg .gold-fill-semi {
	fill: rgba(212, 175, 55, 0.2);
}

.tarot-card-front svg .gold-fill-glow {
	fill: var(--gold-light);
	filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.6));
}

.tarot-card-front svg .gold-text {
	fill: var(--gold-light);
}

/* Название карты внизу */
.tarot-card-name {
	font-family: 'Marcellus', serif;
	font-size: 8px;
	color: var(--gold-light);
	text-align: center;
	letter-spacing: 0.5px;
	margin-top: 2px;
	white-space: nowrap;
}

.tarot-card-name.reversed-text {
	color: #e57373;
}

/* Кнопка толкований */
.tarot-board-actions {
	margin-top: 30px;
	animation: tarotFadeIn 0.8s ease-out;
}

/* ---------------------------------------------------- */
/* ВЕЕР КАРТ ДЛЯ ВЫБОРА ПОЛЬЗОВАТЕЛЕМ */
/* ---------------------------------------------------- */
.tarot-spread-deck-container {
	margin-top: 40px;
	text-align: center;
	width: 100%;
	animation: tarotFadeIn 0.6s ease-out;
}

.tarot-spread-instruction {
	font-family: 'Marcellus', serif;
	font-size: 15px;
	color: var(--gold-light);
	margin-bottom: 25px;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.tarot-spread-instruction span {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-light);
	background: rgba(212, 175, 55, 0.15);
	padding: 2px 10px;
	border-radius: 20px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.tarot-spread-deck {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 920px;
	margin: 0 auto;
	padding: 15px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px dashed var(--glass-border);
	border-radius: 14px;
}

.tarot-spread-card {
	width: 60px;
	height: 95px;
	border-radius: 6px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	background-color: #110d29;
	/* Спиральный узор рубашки карты на чистом CSS */
	background-image: 
		radial-gradient(circle at center, transparent 0, #110d29 70%),
		repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.12) 0, rgba(212, 175, 55, 0.12) 1px, transparent 0, transparent 6px),
		repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.12) 0, rgba(212, 175, 55, 0.12) 1px, transparent 0, transparent 6px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
}

.tarot-spread-card:hover {
	border-color: var(--gold);
	box-shadow: 0 0 18px rgba(212, 175, 55, 0.6);
	transform: translateY(-10px) scale(1.1);
	z-index: 10;
}

.tarot-spread-card.drawn {
	opacity: 0.15;
	transform: translateY(15px) scale(0.85);
	pointer-events: none;
	border-color: rgba(255,255,255,0.05);
	box-shadow: none;
}

/* Настройки для пустых неактивных слотов */
.tarot-card-3d.disabled-slot {
	cursor: default;
	pointer-events: none;
}

.tarot-card-3d.disabled-slot .tarot-card-back {
	border-style: dashed;
	background-color: rgba(10, 8, 19, 0.4);
}

.tarot-card-3d.disabled-slot .tarot-card-back::before {
	content: '✦';
	color: rgba(212, 175, 55, 0.15);
}


/* ---------------------------------------------------- */
/* МИСТИЧЕСКИЙ ЛОАДЕР (Хрустальный шар) */
/* ---------------------------------------------------- */
.tarot-mystic-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50px 20px;
	text-align: center;
}

.tarot-mystic-loader h3 {
	font-family: 'Marcellus', serif;
	color: var(--gold-light);
	font-size: 22px;
	margin-top: 25px;
	letter-spacing: 0.5px;
}

.tarot-mystic-loader p {
	color: var(--text-muted);
	font-size: 14px;
	max-width: 450px;
	line-height: 1.5;
}

.crystal-ball-container {
	position: relative;
	width: 120px;
	height: 120px;
}

.crystal-ball {
	position: absolute;
	width: 100px;
	height: 100px;
	left: 10px; top: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), rgba(122, 79, 193, 0.4) 40%, rgba(10, 8, 19, 0.8) 80%);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	overflow: hidden;
	box-shadow: 
		inset 0 0 20px rgba(122, 79, 193, 0.5),
		0 0 25px rgba(122, 79, 193, 0.3);
	z-index: 2;
}

.crystal-ball-glow {
	position: absolute;
	width: 140px;
	height: 140px;
	left: -10px; top: -20px;
	background: radial-gradient(circle, rgba(122, 79, 193, 0.4) 0%, rgba(122, 79, 193, 0) 70%);
	border-radius: 50%;
	z-index: 1;
	animation: tarotLoaderGlow 2.5s infinite alternate;
}

.ball-waves {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%; left: -50%;
	background-image: 
		radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.15), transparent 60%),
		linear-gradient(45deg, rgba(122,79,193,0.3) 20%, rgba(35,11,84,0.4) 80%);
	border-radius: 38%;
	animation: tarotLoaderRotate 6s linear infinite;
}

@keyframes tarotLoaderGlow {
	from { transform: scale(0.9); opacity: 0.6; }
	to { transform: scale(1.15); opacity: 1; }
}

@keyframes tarotLoaderRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Металлическая подставка шара */
.crystal-ball-container::after {
	content: '';
	position: absolute;
	width: 70px;
	height: 22px;
	bottom: 10px; left: 25px;
	background: linear-gradient(90deg, #1a162e, #3a2a61, #1a162e);
	border: 1px solid var(--gold);
	border-radius: 4px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	z-index: 1;
}

/* ---------------------------------------------------- */
/* ЭКРАН РЕЗУЛЬТАТОВ */
/* ---------------------------------------------------- */
.tarot-result-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 40px;
	align-items: start;
}

/* Сетка выпавших карт на экране результатов */
.tarot-result-cards-view {
	background: rgba(0,0,0,0.25);
	border: 1.5px solid var(--glass-border);
	padding: 25px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}

.tarot-res-card-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.tarot-res-card-pos-name {
	font-family: 'Marcellus', serif;
	font-size: 12px;
	color: var(--gold-light);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Текстовое толкование */
.tarot-result-interpretation-view {
	max-height: 700px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tarot-interpretation-title {
	font-family: 'Marcellus', serif;
	font-size: 24px;
	color: var(--gold-light);
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--glass-border);
	padding-bottom: 12px;
	letter-spacing: 0.5px;
}

.tarot-interpretation-text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-light);
	max-height: 480px;
	overflow-y: auto;
	padding-right: 10px;
}

/* Стилизация скроллбара в толковании */
.tarot-interpretation-text::-webkit-scrollbar {
	width: 6px;
}
.tarot-interpretation-text::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.1);
	border-radius: 10px;
}
.tarot-interpretation-text::-webkit-scrollbar-thumb {
	background: var(--glass-border);
	border-radius: 10px;
}
.tarot-interpretation-text::-webkit-scrollbar-thumb:hover {
	background: var(--cosmic-purple);
}

/* Форматирование текста толкования */
.tarot-interpretation-text p {
	margin-top: 0;
	margin-bottom: 15px;
}

.tarot-reading-h3 {
	font-family: 'Marcellus', serif;
	color: var(--gold);
	font-size: 18px;
	margin: 25px 0 10px;
	border-left: 2.5px solid var(--cosmic-purple);
	padding-left: 10px;
}

.tarot-reading-h4 {
	font-family: 'Marcellus', serif;
	color: var(--gold-light);
	font-size: 15px;
	margin: 20px 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tarot-reading-li {
	list-style-type: none;
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	color: var(--text-muted);
}

.tarot-reading-li::before {
	content: '✦';
	position: absolute;
	left: 0;
	color: var(--gold);
	font-size: 10px;
	top: 1px;
}

.tarot-reading-num-li {
	list-style-type: decimal;
	list-style-position: inside;
	padding-left: 0;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.tarot-reading-num-li::before {
	display: none;
}

.tarot-interpretation-text strong {
	color: var(--gold-light);
	font-weight: 500;
}

.tarot-result-actions {
	margin-top: 30px;
	border-top: 1px solid var(--glass-border);
	padding-top: 20px;
	display: flex;
	justify-content: flex-end;
}

/* ---------------------------------------------------- */
/* ВКЛАДКА ИСТОРИИ НА ФРОНТЕНДЕ */
/* ---------------------------------------------------- */
.tarot-history-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: 600px;
	overflow-y: auto;
	padding-right: 10px;
}

.tarot-history-list::-webkit-scrollbar {
	width: 6px;
}
.tarot-history-list::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.1);
}
.tarot-history-list::-webkit-scrollbar-thumb {
	background: var(--glass-border);
	border-radius: 10px;
}

.tarot-history-loading {
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	padding: 30px;
}

.tarot-history-item {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	padding: 20px;
	transition: all 0.3s ease;
}

.tarot-history-item:hover {
	border-color: rgba(212,175,55,0.3);
	background: rgba(255, 255, 255, 0.04);
}

.tarot-history-item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
	gap: 15px;
}

.tarot-history-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tarot-history-date {
	font-size: 11px;
	color: var(--text-muted);
}

.tarot-history-type {
	font-size: 12px;
	color: var(--gold-light);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tarot-history-item-question {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-light);
	margin: 0;
	line-height: 1.4;
}

.tarot-btn-delete-history {
	background: transparent;
	border: none;
	color: rgba(229, 115, 115, 0.6);
	font-size: 12px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.tarot-btn-delete-history:hover {
	color: #e57373;
	background: rgba(229, 115, 115, 0.1);
}

.tarot-history-item-cards {
	display: flex;
	gap: 15px;
	margin: 15px 0;
}

.tarot-history-card-mini {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-muted);
}

.tarot-history-card-mini svg {
	width: 22px;
	height: 32px;
	border: 0.5px solid var(--gold);
	border-radius: 2px;
	background: #0d0b1d;
}

.tarot-history-card-mini .card-name.reversed-name {
	color: #e57373;
}

.tarot-history-item-body {
	margin-top: 15px;
	background: rgba(0,0,0,0.2);
	border-radius: 8px;
	padding: 15px;
	font-size: 13.5px;
	line-height: 1.6;
	border-left: 2px solid var(--cosmic-purple);
	display: none; /* Раскрывается по нажатию */
	animation: tarotFadeIn 0.4s ease-out;
}

.tarot-history-item-toggle {
	background: transparent;
	border: none;
	color: var(--gold-light);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 5px;
}

.tarot-history-item-toggle:hover {
	color: var(--text-light);
	text-shadow: 0 0 5px rgba(255,255,255,0.2);
}

/* ---------------------------------------------------- */
/* АДАПТИВНОСТЬ (Responsive) */
/* ---------------------------------------------------- */
@media (max-width: 900px) {
	.tarot-result-layout {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	
	.tarot-result-cards-view {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.tarot-res-card-item {
		width: auto;
	}
}

@media (max-width: 650px) {
	#tarot-app.tarot-container-outer,
	#dream-app.tarot-container-outer {
		padding: 15px;
		margin: 10px;
	}
	
	.tarot-glass-panel {
		padding: 20px;
	}
	
	.tarot-title {
		font-size: 24px;
	}
	
	.tarot-layout-options {
		grid-template-columns: 1fr;
	}
	
	.tarot-slots-table {
		flex-direction: column;
		align-items: center;
		gap: 25px;
	}
	
	.tarot-history-item-cards {
		flex-direction: column;
		gap: 8px;
	}
	
	.tarot-history-item-header {
		flex-direction: column;
		gap: 10px;
	}
	
	.tarot-btn-delete-history {
		align-self: flex-start;
		padding-left: 0;
	}
}

/* Поддержка кастомных изображений лиц карт */
.tarot-card-front .tarot-card-custom-face {
	width: 100%;
	height: 80%;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* Стилизация картинок в истории раскладов */
.tarot-history-card-mini .tarot-card-custom-face {
	width: 22px;
	height: 32px;
	border: 0.5px solid var(--gold);
	border-radius: 2px;
	background: #0d0b1d;
	object-fit: cover;
}

/* Плавный скролл и ограничение по высоте для веера из 78 закрытых карт */
.tarot-spread-deck {
	max-height: 280px;
	overflow-y: auto;
	padding: 20px;
}

/* Дополнительные стили для скроллбара веера выбора карт, чтобы это выглядело ультра-премиально */
.tarot-spread-deck::-webkit-scrollbar {
	width: 6px;
}
.tarot-spread-deck::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}
.tarot-spread-deck::-webkit-scrollbar-thumb {
	background: var(--gold-dark);
	border-radius: 10px;
}
.tarot-spread-deck::-webkit-scrollbar-thumb:hover {
	background: var(--gold);
}