/* El Eco de las estrellas - Custom Premium Design Tokens & Styles */
:root {
--bg-color: #080711;
--panel-bg: rgba(13, 11, 26, 0.65);
--border-color: rgba(212, 175, 55, 0.2);
--border-hover: rgba(212, 175, 55, 0.6);
--gold-color: #e5c158;
--gold-glow: rgba(229, 193, 88, 0.45);
--purple-color: #8b5cf6;
--purple-glow: rgba(139, 92, 246, 0.3);
--text-main: #f3f4f6;
--text-muted: #9ca3af;
--success-color: #10b981;
--success-glow: rgba(16, 185, 129, 0.4);
--error-color: #ef4444;
--error-glow: rgba(239, 68, 68, 0.4);
--neutral-color: #6b7280;
--neutral-glow: rgba(107, 114, 128, 0.4);
--font-serif: 'Cinzel', serif;
--font-sans: 'Outfit', sans-serif;
--transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
--card-ratio-width: 170px;
--card-ratio-height: 280px;
}
/* Base resets and animations setup */
.hidden {
display: none !important;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: var(--font-sans);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Mystical Twinkling Stars Background */
.stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, #130f2b 0%, #06050b 100%);
}
.stars-container::after {
content: '';
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background:
radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(229, 193, 88, 0.08) 0%, transparent 60%);
z-index: -3;
pointer-events: none;
mix-blend-mode: screen;
animation: nebula-drift 35s ease-in-out infinite alternate;
}
@keyframes nebula-drift {
0% {
transform: scale(1) translate(0px, 0px) rotate(0deg);
}
50% {
transform: scale(1.1) translate(30px, -15px) rotate(2deg);
}
100% {
transform: scale(1) translate(-15px, 20px) rotate(-2deg);
}
}
#constellations-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
opacity: 0.8;
}
.stars, .twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url('data:image/svg+xml;utf8,') repeat;
opacity: 0.6;
}
.twinkling {
background: transparent url('data:image/svg+xml;utf8,') repeat;
animation: move-twink-back 40s linear infinite;
opacity: 0.3;
}
@keyframes move-twink-back {
from { background-position: 0 0; }
to { background-position: -1000px 500px; }
}
/* App Layout */
.app-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1rem;
}
/* Header */
.app-header {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
}
.logo {
width: 100px;
height: 100px;
margin: 0 auto 1.25rem auto;
filter: drop-shadow(0 0 14px rgba(229, 193, 88, 0.5)) drop-shadow(0 0 30px rgba(139, 92, 246, 0.2));
animation: logo-moon-float 7s ease-in-out infinite;
}
@keyframes logo-moon-float {
0% { transform: translateY(0px) rotate(0deg); filter: drop-shadow(0 0 12px rgba(229,193,88,0.45)) drop-shadow(0 0 24px rgba(139,92,246,0.15)); }
33% { transform: translateY(-5px) rotate(3deg); filter: drop-shadow(0 0 20px rgba(229,193,88,0.7)) drop-shadow(0 0 40px rgba(139,92,246,0.3)); }
66% { transform: translateY(-2px) rotate(-2deg); filter: drop-shadow(0 0 16px rgba(229,193,88,0.55)) drop-shadow(0 0 32px rgba(139,92,246,0.2)); }
100% { transform: translateY(0px) rotate(0deg); filter: drop-shadow(0 0 12px rgba(229,193,88,0.45)) drop-shadow(0 0 24px rgba(139,92,246,0.15)); }
}
.logo-svg,
.logo-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.main-title {
font-family: var(--font-serif);
font-size: 2.5rem;
letter-spacing: 0.28em;
color: var(--gold-color);
text-shadow: 0 0 20px var(--gold-glow), 0 0 40px rgba(229, 193, 88, 0.2);
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #f0d060 0%, #e5c158 40%, #c8a030 70%, #e5c158 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
font-size: 1rem;
color: var(--text-muted);
letter-spacing: 0.08em;
font-style: italic;
}
/* Main Layout Grid */
.main-layout {
display: grid;
grid-template-columns: 420px 1fr;
gap: 2rem;
margin-bottom: 2rem;
align-items: start;
}
@media (max-width: 1024px) {
.main-layout {
grid-template-columns: 1fr;
}
}
/* Glassmorphism Containers */
.glass-card {
background: linear-gradient(135deg, rgba(13, 11, 26, 0.72) 0%, rgba(8, 7, 17, 0.85) 100%);
border: 1px solid rgba(229, 193, 88, 0.12);
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 0 0 1px rgba(139, 92, 246, 0.06);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(229, 193, 88, 0.35), transparent);
pointer-events: none;
}
.glass-card:hover {
border-color: rgba(229, 193, 88, 0.35);
box-shadow: 0 18px 48px 0 rgba(0, 0, 0, 0.8),
0 0 30px rgba(139, 92, 246, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Form Styles */
.panel-title {
font-family: var(--font-serif);
font-size: 1.4rem;
letter-spacing: 0.1em;
color: var(--gold-color);
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.75rem;
}
.form-group {
margin-bottom: 1.75rem;
}
.form-group label {
display: block;
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
letter-spacing: 0.05em;
}
/* Input Styles */
#question-input,
#num-name-input,
#num-birth-input {
width: 100%;
background: rgba(8, 7, 17, 0.7);
border: 1.5px solid var(--border-color);
border-radius: 8px;
padding: 0.9rem 1.2rem;
color: var(--text-main);
font-family: var(--font-sans);
font-size: 0.95rem;
transition: var(--transition-smooth);
}
#question-input:focus,
#num-name-input:focus,
#num-birth-input:focus {
outline: none;
border-color: var(--gold-color);
box-shadow: 0 0 10px rgba(229, 193, 88, 0.25);
}
#num-birth-input::-webkit-calendar-picker-indicator {
filter: invert(1) sepia(50%) saturate(1000%) hue-rotate(330deg) brightness(1.2);
cursor: pointer;
}
/* Category Grid */
.category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.category-btn {
background: rgba(255, 255, 255, 0.03);
border: 1.5px solid var(--border-color);
border-radius: 8px;
padding: 0.8rem;
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.category-btn svg {
transition: var(--transition-smooth);
}
.category-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--purple-color);
color: var(--text-main);
}
.category-btn.active {
background: rgba(139, 92, 246, 0.15);
border-color: var(--purple-color);
color: var(--text-main);
box-shadow: 0 0 12px var(--purple-glow);
}
.category-btn.active svg {
stroke: var(--purple-color);
filter: drop-shadow(0 0 4px var(--purple-glow));
}
/* Spread Options */
.spread-options {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.spread-option-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1.5px solid var(--border-color);
border-radius: 10px;
padding: 1rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.spread-option-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(229, 193, 88, 0.4);
}
.spread-option-card.active {
background: rgba(229, 193, 88, 0.06);
border-color: var(--gold-color);
box-shadow: 0 0 12px rgba(229, 193, 88, 0.15);
}
.spread-option-card input[type="radio"] {
accent-color: var(--gold-color);
margin-top: 0.25rem;
width: 16px;
height: 16px;
}
.option-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.option-content strong {
font-size: 0.95rem;
color: var(--text-main);
}
.option-content span {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Buttons */
.consult-button {
width: 100%;
background: linear-gradient(135deg, #f0d060 0%, #e5c158 35%, #c8952a 70%, #e5c158 100%);
border: none;
border-radius: 12px;
padding: 1rem 1.5rem;
color: #0b091a;
font-family: var(--font-serif);
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.12em;
cursor: pointer;
box-shadow: 0 4px 20px rgba(229, 193, 88, 0.4), 0 0 0 1px rgba(229, 193, 88, 0.3);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.consult-button::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 40%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: skewX(-20deg);
animation: btn-shimmer 3s infinite;
}
@keyframes btn-shimmer {
0% { left: -60%; }
100% { left: 120%; }
}
.consult-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(229, 193, 88, 0.6), 0 0 20px rgba(229, 193, 88, 0.25);
background: linear-gradient(135deg, #f8e070 0%, #e5c158 35%, #d4a030 70%, #f0d060 100%);
}
.consult-button:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(229, 193, 88, 0.4);
}
/* Reading Table (Tapete) */
.reading-table {
min-height: 580px;
display: flex;
flex-direction: column;
}
.tapete-mat {
flex: 1;
background: radial-gradient(ellipse at 50% 30%, rgba(35, 28, 75, 0.85) 0%, rgba(20, 16, 45, 0.9) 50%, rgba(8, 6, 18, 0.98) 100%);
border: 1.5px solid rgba(212, 175, 55, 0.18);
border-radius: 24px;
padding: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(139, 92, 246, 0.05);
position: relative;
overflow: hidden;
}
.tapete-mat::before {
content: '';
position: absolute;
top: -30%;
left: -20%;
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.tapete-mat::after {
content: '';
position: absolute;
bottom: -20%;
right: -10%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(229, 193, 88, 0.03) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.tapete-header {
text-align: center;
margin-bottom: 2rem;
z-index: 2;
}
.tapete-header h2 {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--text-main);
letter-spacing: 0.05em;
margin-bottom: 0.4rem;
}
.tapete-header p {
font-size: 0.85rem;
color: var(--text-muted);
}
/* Cards Board */
.cards-board {
display: flex;
justify-content: center;
align-items: center;
gap: 2.5rem;
flex-wrap: wrap;
width: 100%;
margin: auto 0;
min-height: var(--card-ratio-height);
z-index: 2;
}
.cards-board.layout-cross {
display: grid;
grid-template-columns: repeat(3, var(--card-ratio-width));
grid-template-rows: repeat(3, auto);
gap: 1.5rem 2.5rem;
justify-content: center;
align-content: center;
}
.cards-board.layout-houses {
position: relative;
width: 620px;
height: 620px;
margin: 3rem auto;
display: block;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
.cards-board.layout-houses > .card-wrapper {
position: absolute;
width: 110px;
height: 180px;
margin: 0;
transition: transform 0.5s ease;
}
.cards-board.layout-houses > .card-wrapper .card-inner {
width: 110px;
height: 180px;
}
.cards-board.layout-houses > .card-wrapper .placeholder-label {
font-size: 0.68rem !important;
line-height: 1.2;
margin-top: 0.4rem !important;
white-space: nowrap;
}
/* Grid Cross placements */
.layout-cross > .card-wrapper:nth-child(1) {
grid-column: 1;
grid-row: 2;
}
.layout-cross > .card-wrapper:nth-child(2) {
grid-column: 3;
grid-row: 2;
}
.layout-cross > .card-wrapper:nth-child(3) {
grid-column: 2;
grid-row: 1;
}
.layout-cross > .card-wrapper:nth-child(4) {
grid-column: 2;
grid-row: 3;
}
.layout-cross > .card-wrapper:nth-child(5) {
grid-column: 2;
grid-row: 2;
}
/* Card Placeholders */
.card-placeholder {
width: var(--card-ratio-width);
height: var(--card-ratio-height);
border: 1.5px dashed rgba(229, 193, 88, 0.25);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(229, 193, 88, 0.35);
font-family: var(--font-serif);
font-size: 0.9rem;
position: relative;
transition: var(--transition-smooth);
}
.card-placeholder::after {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px dashed rgba(229, 193, 88, 0.1);
border-radius: 8px;
}
.placeholder-label {
margin-top: 0.5rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Mystical Deck Container */
.deck-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
z-index: 2;
}
.mystical-deck {
position: relative;
width: 120px;
height: 197px; /* Scaled card back */
margin-bottom: 0.5rem;
}
.deck-card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('assets/card_back.png');
background-size: cover;
background-position: center;
border-radius: 8px;
border: 1px solid rgba(229, 193, 88, 0.4);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
}
.deck-card:nth-child(2) { transform: translate(-3px, -3px); }
.deck-card:nth-child(3) { transform: translate(-6px, -6px); }
.deck-card:nth-child(4) { transform: translate(-9px, -9px); }
/* Shuffling Animation */
.mystical-deck.shuffling .deck-card:nth-child(odd) {
animation: shuffle-odd 0.6s ease-in-out 3;
}
.mystical-deck.shuffling .deck-card:nth-child(even) {
animation: shuffle-even 0.6s ease-in-out 3;
}
@keyframes shuffle-odd {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(-90px) rotate(-15deg); z-index: 5; }
}
@keyframes shuffle-even {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(90px) rotate(15deg); z-index: 5; }
}
.shuffle-button {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-muted);
border-radius: 20px;
padding: 0.5rem 1.5rem;
font-size: 0.85rem;
cursor: pointer;
font-family: var(--font-sans);
letter-spacing: 0.05em;
transition: var(--transition-smooth);
}
.shuffle-button:hover {
border-color: var(--gold-color);
color: var(--text-main);
box-shadow: 0 0 8px rgba(229, 193, 88, 0.15);
}
.card-wrapper {
perspective: 1000px;
width: var(--card-ratio-width);
height: var(--card-ratio-height);
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-wrapper:hover {
transform: translateY(-8px) scale(1.04);
}
.card-wrapper:hover .card-front {
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.85), 0 0 24px rgba(229, 193, 88, 0.35);
border-color: rgba(229, 193, 88, 0.9);
}
.card-wrapper:hover .card-back {
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.85), 0 0 24px rgba(139, 92, 246, 0.3);
border-color: rgba(139, 92, 246, 0.5);
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
will-change: transform;
}
.card-wrapper.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
border: 2px solid var(--border-color);
}
.card-back {
background-image: url('assets/card_back.png');
background-size: cover;
background-position: center;
z-index: 2;
}
.card-front {
transform: rotateY(180deg);
border-color: var(--gold-color);
box-shadow: 0 0 20px rgba(229, 193, 88, 0.2);
background-size: cover;
background-position: center;
}
/* Procedural Card Art (Modern Abstract Esoteric Layout) */
.card-symbol {
width: 100%;
height: 50%;
border: 1px solid rgba(229, 193, 88, 0.15);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: rgba(255, 255, 255, 0.01);
margin-bottom: 0.5rem;
overflow: hidden;
}
/* Starburst background in card art */
.card-symbol::before {
content: '';
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(229, 193, 88, 0.06) 0%, transparent 70%);
}
.card-art-svg {
width: 70px;
height: 70px;
filter: drop-shadow(0 0 6px var(--gold-glow));
}
.card-title-box {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(229, 193, 88, 0.2);
border-radius: 4px;
padding: 0.4rem 0.25rem;
text-align: center;
margin-top: auto;
}
.card-roman-num {
font-family: var(--font-serif);
font-size: 0.75rem;
color: var(--gold-color);
letter-spacing: 0.1em;
display: block;
}
.card-name-label {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
color: #fff;
letter-spacing: 0.05em;
margin-top: 0.15rem;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Results Panel Details */
.results-panel {
margin-top: 2rem;
scroll-margin-top: 2rem;
}
.results-panel.hidden {
display: none;
}
.result-container {
border-color: rgba(229, 193, 88, 0.35);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(229, 193, 88, 0.08);
}
.result-header {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
}
.category-badge {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(109, 62, 216, 0.9) 100%);
color: #fff;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.18em;
padding: 0.4rem 1.25rem;
border-radius: 20px;
display: inline-block;
margin-bottom: 0.85rem;
box-shadow: 0 0 14px var(--purple-glow), 0 0 0 1px rgba(139, 92, 246, 0.3);
}
.result-title {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--gold-color);
letter-spacing: 0.12em;
margin-bottom: 0.5rem;
text-shadow: 0 0 16px rgba(229, 193, 88, 0.3);
background: linear-gradient(135deg, #f0d060 0%, #e5c158 50%, #c8a030 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.user-question-text {
font-size: 1.05rem;
font-style: italic;
color: var(--text-muted);
}
/* Yes/No display */
.yesno-verdict-section {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.yesno-verdict-section.hidden {
display: none;
}
.verdict-display {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.verdict-label {
font-size: 0.95rem;
color: var(--text-muted);
}
.verdict-badge {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 800;
padding: 0.4rem 1.75rem;
border-radius: 6px;
letter-spacing: 0.1em;
}
.verdict-badge.si {
background: rgba(16, 185, 129, 0.15);
border: 2px solid var(--success-color);
color: var(--success-color);
box-shadow: 0 0 20px var(--success-glow);
}
.verdict-badge.no {
background: rgba(239, 68, 68, 0.15);
border: 2px solid var(--error-color);
color: var(--error-color);
box-shadow: 0 0 20px var(--error-glow);
}
.verdict-badge.neutro {
background: rgba(107, 114, 128, 0.15);
border: 2px solid var(--neutral-color);
color: var(--neutral-color);
box-shadow: 0 0 20px var(--neutral-glow);
}
.verdict-explanation {
font-size: 1rem;
line-height: 1.6;
text-align: center;
max-width: 700px;
}
/* Narrative box */
.destiny-synthesis-section {
margin-bottom: 2.5rem;
}
.destiny-synthesis-section.hidden {
display: none;
}
.section-title {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--gold-color);
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
text-shadow: 0 0 8px rgba(229, 193, 88, 0.2);
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(229, 193, 88, 0.35) 0%, transparent 100%);
}
.narrative-box {
background: linear-gradient(135deg, rgba(20, 14, 48, 0.75) 0%, rgba(13, 10, 30, 0.85) 100%);
border: 1px solid rgba(229, 193, 88, 0.25);
border-radius: 14px;
padding: 1.75rem 2rem;
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.05);
line-height: 1.7;
position: relative;
}
.narrative-box::before {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
border: 1px solid transparent;
background: linear-gradient(135deg, rgba(229, 193, 88, 0.08), rgba(139, 92, 246, 0.06)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
}
#destiny-synthesis-text {
font-size: 1.1rem;
line-height: 1.8;
color: #f0f0f8;
text-align: justify;
}
#destiny-synthesis-text p {
margin-bottom: 1rem;
}
#destiny-synthesis-text p:last-child {
margin-bottom: 0;
}
/* Cards Breakdown */
.breakdown-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.card-breakdown-card {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1.75rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
align-items: center;
}
@media (max-width: 640px) {
.card-breakdown-card {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.card-info-header {
justify-content: center;
align-items: center;
flex-direction: column;
gap: 0.35rem;
text-align: center;
width: 100%;
}
.card-info-title {
text-align: center;
width: 100%;
}
.card-info-header .position-tag {
border-left: none;
padding-left: 0;
}
}
.card-mini-view {
width: 120px;
height: 197px; /* Mini scaled card */
border-radius: 8px;
border: 1.5px solid var(--gold-color);
box-shadow: 0 0 10px rgba(229, 193, 88, 0.15);
background-size: cover;
background-position: center;
}
.card-mini-view .card-symbol {
height: 48%;
}
.card-mini-view .card-art-svg {
width: 48px;
height: 48px;
}
.card-mini-view .card-name-label {
font-size: 0.75rem;
}
.card-mini-view .card-roman-num {
font-size: 0.6rem;
}
.card-info-content {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.card-info-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.card-info-title {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--text-main);
}
.position-tag {
font-family: var(--font-serif);
font-size: 0.8rem;
color: var(--gold-color);
text-transform: uppercase;
letter-spacing: 0.1em;
border-left: 2px solid var(--gold-color);
padding-left: 0.5rem;
}
.card-info-themes {
font-size: 0.85rem;
font-weight: 500;
color: var(--gold-color);
margin-bottom: 0.25rem;
}
.card-info-meaning {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted);
}
/* Reset / Repeat Actions */
.reset-container {
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
.reset-button {
background: transparent;
border: 2px solid var(--gold-color);
color: var(--gold-color);
border-radius: 8px;
padding: 0.9rem 2rem;
font-family: var(--font-serif);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: var(--transition-smooth);
}
.reset-button:hover {
background: rgba(229, 193, 88, 0.08);
box-shadow: 0 0 15px rgba(229, 193, 88, 0.2);
}
/* Animations for dealt cards on tapete */
@keyframes deal-card-1 {
0% { transform: scale(0.2) translate(-200px, 200px); opacity: 0; }
100% { transform: scale(1) translate(0, 0); opacity: 1; }
}
.card-wrapper.dealt {
animation: deal-card-1 0.7s cubic-bezier(0.25, 0.8, 0.25, 1.1) forwards;
}
/* Toggle Switch Styles */
.toggle-switch input:checked + .toggle-slider {
background-color: var(--gold-color);
box-shadow: 0 0 10px rgba(229, 193, 88, 0.4);
}
.toggle-switch input:focus + .toggle-slider {
box-shadow: 0 0 1px var(--gold-color);
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(20px);
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background-color: var(--text-main);
transition: .4s;
border-radius: 50%;
}
/* 180-degree rotation in Z-axis for reversed card fronts and mini views */
.card-wrapper.reversed .card-front {
transform: rotateY(180deg) rotate(180deg);
}
.card-mini-view.reversed {
transform: rotate(180deg);
}
/* Pyramid Spread Layout (6 cards) */
.cards-board.layout-pyramid {
display: grid;
grid-template-columns: repeat(6, var(--card-ratio-width));
grid-template-rows: repeat(3, auto);
gap: 2rem 1.25rem;
justify-content: center;
align-content: center;
}
.layout-pyramid > .card-wrapper:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1;
}
.layout-pyramid > .card-wrapper:nth-child(2) {
grid-column: 3 / span 2;
grid-row: 1;
}
.layout-pyramid > .card-wrapper:nth-child(3) {
grid-column: 5 / span 2;
grid-row: 1;
}
.layout-pyramid > .card-wrapper:nth-child(4) {
grid-column: 2 / span 2;
grid-row: 2;
}
.layout-pyramid > .card-wrapper:nth-child(5) {
grid-column: 4 / span 2;
grid-row: 2;
}
.layout-pyramid > .card-wrapper:nth-child(6) {
grid-column: 3 / span 2;
grid-row: 3;
}
@media (max-width: 1150px) {
.cards-board.layout-pyramid {
grid-template-columns: repeat(6, 120px);
gap: 1.5rem 1rem;
}
.cards-board.layout-pyramid > .card-wrapper {
width: 120px;
height: 197px;
}
}
@media (max-width: 768px) {
.cards-board.layout-pyramid {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.cards-board.layout-pyramid > .card-wrapper {
width: var(--card-ratio-width);
height: var(--card-ratio-height);
grid-column: auto !important;
grid-row: auto !important;
}
}
/* Reading History Panel Styles */
.history-panel {
margin-top: 3rem;
margin-bottom: 2rem;
}
.history-list {
display: flex;
flex-direction: column;
gap: 1rem;
max-height: 400px;
overflow-y: auto;
padding-right: 0.5rem;
}
.history-list::-webkit-scrollbar {
width: 6px;
}
.history-list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.01);
}
.history-list::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.history-list::-webkit-scrollbar-thumb:hover {
background: var(--gold-color);
}
.history-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.5rem;
align-items: center;
background: rgba(255, 255, 255, 0.015);
border: 1.5px solid var(--border-color);
border-radius: 10px;
padding: 1rem 1.5rem;
transition: var(--transition-smooth);
cursor: pointer;
}
.history-item:hover {
background: rgba(229, 193, 88, 0.04);
border-color: var(--gold-color);
box-shadow: 0 4px 12px rgba(229, 193, 88, 0.08);
}
.history-item-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 140px;
}
.history-item-date {
font-size: 0.75rem;
color: var(--text-muted);
}
.history-item-badge-row {
display: flex;
gap: 0.5rem;
}
.history-item-badge {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-weight: 600;
}
.history-item-badge.category {
background: rgba(139, 92, 246, 0.15);
color: var(--purple-color);
border: 1px solid rgba(139, 92, 246, 0.3);
}
.history-item-badge.spread {
background: rgba(229, 193, 88, 0.12);
color: var(--gold-color);
border: 1px solid rgba(229, 193, 88, 0.25);
}
.history-item-content {
display: flex;
flex-direction: column;
gap: 0.35rem;
overflow: hidden;
}
.history-item-question {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-item-summary {
font-size: 0.8rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-item-cards {
display: flex;
gap: 0.5rem;
align-items: center;
}
.history-item-mini-card {
width: 24px;
height: 39px;
border-radius: 3px;
border: 1px solid var(--border-color);
background-size: cover;
background-position: center;
}
.history-item-mini-card.reversed {
transform: rotate(180deg);
}
.clear-history-button:hover {
background: var(--error-color) !important;
color: #fff !important;
box-shadow: 0 0 10px var(--error-glow);
}
@media (max-width: 640px) {
.history-item {
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 1rem;
}
.history-item-meta {
flex-direction: row;
justify-content: space-between;
min-width: unset;
width: 100%;
}
.history-item-cards {
justify-content: flex-start;
width: 100%;
}
}
/* Custom Premium Select Dropdowns */
.select-wrapper {
position: relative;
width: 100%;
}
.select-wrapper::after {
content: '▼';
font-size: 0.7rem;
color: var(--gold-color);
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: var(--transition-smooth);
}
.select-wrapper:hover::after {
text-shadow: 0 0 8px var(--gold-glow);
}
.premium-select {
width: 100%;
background: rgba(8, 7, 17, 0.8);
border: 1.5px solid var(--border-color);
border-radius: 8px;
padding: 0.9rem 2.5rem 0.9rem 1.2rem;
color: var(--text-main);
font-family: var(--font-sans);
font-size: 0.95rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: var(--transition-smooth);
}
.premium-select:hover {
border-color: rgba(229, 193, 88, 0.5);
}
.premium-select:focus {
outline: none;
border-color: var(--gold-color);
box-shadow: 0 0 10px rgba(229, 193, 88, 0.25);
}
.premium-select option {
background-color: #0b091a;
color: var(--text-main);
padding: 0.75rem;
}
/* Real-time Moon Phase Widget */
.moon-phase-widget {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, rgba(20, 16, 45, 0.75) 0%, rgba(13, 11, 26, 0.85) 100%);
border: 1px solid rgba(229, 193, 88, 0.15);
border-radius: 20px;
padding: 1.25rem 1.85rem;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
margin: 1.5rem auto 0 auto;
max-width: 650px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 25px rgba(139, 92, 246, 0.06);
transition: var(--transition-smooth);
cursor: pointer;
position: relative;
overflow: hidden;
}
.moon-phase-widget::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.moon-phase-widget::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(229, 193, 88, 0.3), transparent);
pointer-events: none;
}
.moon-phase-widget:hover {
transform: translateY(-4px);
border-color: rgba(229, 193, 88, 0.45);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8),
0 0 35px rgba(229, 193, 88, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.moon-phase-main {
display: flex;
align-items: center;
gap: 1rem;
}
.moon-phase-description {
font-size: 0.82rem;
line-height: 1.55;
color: var(--text-muted);
text-align: center;
margin-top: 0.15rem;
border-top: 1px dashed rgba(212, 175, 55, 0.18);
padding-top: 0.5rem;
width: 100%;
}
.moon-icon {
font-size: 2.2rem;
filter: drop-shadow(0 0 6px var(--gold-glow));
user-select: none;
line-height: 1;
}
.moon-text-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.moon-label {
font-size: 0.65rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.moon-name {
font-size: 1rem;
font-weight: 700;
color: var(--gold-color);
letter-spacing: 0.04em;
text-shadow: 0 0 10px rgba(229, 193, 88, 0.4);
}
/* Lunar Influence Section */
.lunar-influence-section {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.07) 0%, rgba(229, 193, 88, 0.03) 100%);
border: 1px dashed rgba(139, 92, 246, 0.4);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
transition: var(--transition-smooth);
}
.lunar-influence-section.hidden {
display: none;
}
.lunar-influence-header {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.lunar-influence-header h4 {
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--gold-color);
letter-spacing: 0.08em;
margin: 0;
}
.lunar-symbol {
font-size: 1.5rem;
filter: drop-shadow(0 0 6px var(--purple-glow));
user-select: none;
}
#lunar-influence-text {
font-size: 0.95rem;
line-height: 1.6;
color: #f3f4f6;
text-align: justify;
}
#lunar-influence-text strong {
color: var(--gold-color);
}
/* Astrological Regent Badges on Cards */
.card-astro-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(229, 193, 88, 0.06);
border: 1px solid rgba(229, 193, 88, 0.2);
color: var(--gold-color);
font-size: 0.75rem;
font-weight: 500;
padding: 0.25rem 0.75rem;
border-radius: 20px;
margin: 0.35rem 0 0.5rem 0;
width: fit-content;
letter-spacing: 0.04em;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: var(--transition-smooth);
}
.card-astro-badge:hover {
background: rgba(229, 193, 88, 0.1);
border-color: rgba(229, 193, 88, 0.45);
box-shadow: 0 2px 8px rgba(229, 193, 88, 0.15);
}
.card-astro-symbol {
font-size: 0.85rem;
filter: drop-shadow(0 0 3px var(--gold-glow));
}
/* Tab Navigation */
.app-nav {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0;
z-index: 5;
position: relative;
flex-wrap: wrap;
}
.nav-tab {
background: transparent;
border: none;
color: var(--text-muted);
font-family: var(--font-serif);
font-size: 1rem;
letter-spacing: 0.06em;
padding: 0.65rem 1.25rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition-smooth);
position: relative;
border-radius: 12px 12px 0 0;
margin-bottom: -1px;
}
.nav-tab:hover {
color: var(--gold-color);
text-shadow: 0 0 8px var(--gold-glow);
background: rgba(229, 193, 88, 0.04);
}
.nav-tab.active {
color: var(--gold-color);
text-shadow: 0 0 12px var(--gold-glow);
background: rgba(229, 193, 88, 0.06);
border: 1px solid var(--border-color);
border-bottom: 1px solid var(--bg-color);
}
.nav-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--gold-color) 50%, transparent 100%);
box-shadow: 0 0 10px var(--gold-glow);
}
.tab-icon {
font-size: 1.2rem;
}
.tab-content.hidden {
display: none !important;
}
/* Book Grid Layout */
.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.book-card-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.book-card-item:hover {
transform: translateY(-6px);
}
.book-card-art {
width: 130px;
height: 214px;
border-radius: 8px;
border: 1.5px solid var(--border-color);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
background-size: cover;
background-position: center;
transition: var(--transition-smooth);
}
.book-card-item:hover .book-card-art {
border-color: var(--gold-color);
box-shadow: 0 0 15px rgba(229, 193, 88, 0.25);
}
.book-card-name {
font-family: var(--font-serif);
font-size: 0.85rem;
color: var(--text-main);
text-align: center;
letter-spacing: 0.05em;
transition: var(--transition-smooth);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.book-card-item:hover .book-card-name {
color: var(--gold-color);
text-shadow: 0 0 5px var(--gold-glow);
}
/* Mystical Modal */
.mystical-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
transition: var(--transition-smooth);
}
.mystical-modal.hidden {
display: none !important;
opacity: 0;
pointer-events: none;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(4, 3, 10, 0.82);
backdrop-filter: blur(8px);
}
.modal-content {
position: relative;
width: 90%;
max-width: 820px;
max-height: 85vh;
overflow-y: auto;
border-color: rgba(229, 193, 88, 0.35);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(229, 193, 88, 0.1);
animation: modal-zoom-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15);
z-index: 1001;
padding: 2.5rem;
}
@keyframes modal-zoom-in {
from { transform: scale(0.93); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.close-modal-btn {
position: absolute;
top: 1rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 2.2rem;
cursor: pointer;
line-height: 1;
transition: var(--transition-smooth);
z-index: 10;
}
.close-modal-btn:hover {
color: var(--gold-color);
text-shadow: 0 0 5px var(--gold-glow);
}
/* Grimorio Detail in Modal */
.grimorio-detail {
display: flex;
flex-direction: column;
gap: 2rem;
}
.grimorio-header {
display: grid;
grid-template-columns: 160px 1fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 600px) {
.grimorio-header {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.grimorio-meta {
display: flex;
flex-direction: column;
align-items: center;
}
}
.grimorio-card-art {
width: 160px;
height: 263px;
border-radius: 12px;
border: 2px solid var(--gold-color);
box-shadow: 0 0 20px rgba(229, 193, 88, 0.2);
background-size: cover;
background-position: center;
}
.grimorio-meta {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.grimorio-number {
font-family: var(--font-serif);
font-size: 0.9rem;
color: var(--text-muted);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.grimorio-title {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--gold-color);
text-shadow: 0 0 10px var(--gold-glow);
margin: 0;
}
.grimorio-themes {
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-main);
margin-top: 0.5rem;
}
.grimorio-meanings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
border-top: 1px solid var(--border-color);
padding-top: 1.5rem;
}
@media (max-width: 768px) {
.grimorio-meanings {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.grimorio-section {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.grimorio-section-title {
font-family: var(--font-serif);
font-size: 1.15rem;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
margin-bottom: 0.25rem;
}
.grimorio-section-title.upright {
color: var(--gold-color);
}
.grimorio-section-title.reversed {
color: var(--purple-color);
}
.grimorio-grid-meanings {
display: flex;
flex-direction: column;
gap: 0.85rem;
font-size: 0.92rem;
line-height: 1.6;
color: var(--text-muted);
text-align: justify;
}
.grimorio-grid-meanings strong {
color: var(--text-main);
display: inline-block;
min-width: 70px;
}
/* 3D Card Tilt and Reactive Sheen Physics */
.card-wrapper.tilting .card-inner {
transition: transform 0.08s ease-out !important;
}
.card-front::after, .card-back::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: 10px;
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 5;
}
.card-front::after {
background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.3) 0%, transparent 60%);
}
.card-back::after {
background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 223, 128, 0.2) 0%, transparent 55%);
}
.card-wrapper:hover .card-front::after,
.card-wrapper:hover .card-back::after {
opacity: 1;
}
/* Premium Button Shimmer Effects */
.consult-button, .reset-button {
position: relative;
overflow: hidden;
}
.consult-button::before, .reset-button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 45%,
rgba(255, 255, 255, 0.1) 48%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0.1) 52%,
transparent 55%
);
transform: rotate(-15deg);
animation: btn-shimmer 6s infinite ease-in-out;
pointer-events: none;
}
@keyframes btn-shimmer {
0% {
left: -120%;
top: -120%;
}
15%, 100% {
left: 120%;
top: 120%;
}
}
/* Mystical Star Dividers */
.mystical-divider {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 2rem 0;
opacity: 0.8;
}
.divider-svg {
width: 100%;
max-width: 320px;
height: 16px;
filter: drop-shadow(0 0 5px var(--gold-glow));
}
/* Horoscope Astrological Tab Styles */
.astro-climate-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2.5rem;
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
}
@media (max-width: 768px) {
.astro-climate-card {
grid-template-columns: 1fr;
}
}
.climate-col {
background: rgba(8, 7, 17, 0.45);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 10px;
padding: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: var(--transition-smooth);
}
.climate-col:hover {
border-color: rgba(229, 193, 88, 0.25);
transform: translateY(-2px);
}
.climate-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.climate-icon {
font-size: 1.5rem;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}
.climate-col.sun-transit-info .climate-icon {
filter: drop-shadow(0 0 8px rgba(229, 193, 88, 0.5));
}
.climate-col.moon-transit-info .climate-icon {
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}
.climate-header h4 {
font-family: var(--font-serif);
font-size: 0.95rem;
letter-spacing: 0.05em;
color: var(--text-muted);
text-transform: uppercase;
}
.climate-subtitle {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--gold-color);
font-weight: 600;
margin-bottom: 0.75rem;
text-shadow: 0 0 8px var(--gold-glow);
}
.climate-desc {
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-muted);
}
.climate-desc strong {
color: var(--text-main);
}
/* Special Alignment and Synastry Section */
.astro-special-section {
margin-bottom: 2.5rem;
}
.special-box {
display: flex;
flex-direction: column;
gap: 1rem;
}
.astro-synergy-badge, .tarot-couple-card {
background: rgba(229, 193, 88, 0.05);
border: 1.5px solid var(--gold-color);
border-radius: 8px;
padding: 1.25rem;
display: flex;
align-items: flex-start;
gap: 1rem;
animation: border-glow-pulse 4s infinite ease-in-out;
}
.tarot-couple-card {
background: rgba(139, 92, 246, 0.05);
border-color: var(--purple-color);
animation: border-glow-pulse-purple 4s infinite ease-in-out;
}
.synergy-icon, .couple-icon {
font-size: 2rem;
}
.synergy-text-content h4, .couple-text-content h4 {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--gold-color);
margin-bottom: 0.4rem;
letter-spacing: 0.05em;
}
.tarot-couple-card .couple-text-content h4 {
color: #c084fc;
}
.synergy-text-content p, .couple-text-content p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-main);
}
@keyframes border-glow-pulse {
0%, 100% {
box-shadow: 0 0 8px rgba(229, 193, 88, 0.15);
border-color: rgba(229, 193, 88, 0.4);
}
50% {
box-shadow: 0 0 16px rgba(229, 193, 88, 0.35);
border-color: rgba(229, 193, 88, 0.95);
}
}
@keyframes border-glow-pulse-purple {
0%, 100% {
box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.4);
}
50% {
box-shadow: 0 0 16px rgba(139, 92, 246, 0.35);
border-color: rgba(139, 92, 246, 0.95);
}
}
/* ==========================================================================
Numerology Compatibility (Synastry) Styles
========================================================================== */
/* Mode Toggle Pill */
.numerology-mode-toggle {
display: flex;
background: rgba(8, 7, 17, 0.65);
border: 1.5px solid var(--border-color);
border-radius: 24px;
padding: 4px;
margin-bottom: 2rem;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
}
.mode-btn {
flex: 1;
background: transparent;
border: none;
color: var(--text-muted);
padding: 0.6rem 1rem;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
border-radius: 20px;
cursor: pointer;
transition: var(--transition-smooth);
text-align: center;
}
.mode-btn:hover {
color: var(--text-main);
}
.mode-btn.active {
background: rgba(229, 193, 88, 0.15);
color: var(--gold-color);
border: 1px solid var(--gold-color);
font-weight: 600;
box-shadow: 0 0 12px rgba(229, 193, 88, 0.2);
}
/* Form Sections */
.form-section-title {
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
margin: 1.5rem 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 1.5px dashed rgba(255, 255, 255, 0.08);
}
.form-section-title.gold {
color: var(--gold-color);
border-color: rgba(229, 193, 88, 0.15);
}
.form-section-title.purple {
color: #c084fc;
border-color: rgba(139, 92, 246, 0.15);
}
/* Small Inputs for stacked forms */
.small-input {
width: 100%;
background: rgba(8, 7, 17, 0.7);
border: 1.5px solid var(--border-color);
border-radius: 8px;
padding: 0.8rem 1.1rem;
color: var(--text-main);
font-family: var(--font-sans);
font-size: 0.95rem;
transition: var(--transition-smooth);
}
.small-input:focus {
outline: none;
border-color: var(--gold-color);
box-shadow: 0 0 10px rgba(229, 193, 88, 0.25);
}
#num-name-input-p2:focus,
#num-birth-input-p2:focus {
border-color: var(--purple-color);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
.small-input::-webkit-calendar-picker-indicator {
filter: invert(1) sepia(50%) saturate(1000%) hue-rotate(330deg) brightness(1.2);
cursor: pointer;
}
/* Margin Helpers */
.form-group.small-margin {
margin-bottom: 1rem;
}
.form-group.medium-margin {
margin-bottom: 1.25rem;
}
.form-group.large-margin {
margin-bottom: 2rem;
}
/* Purple Theme Button */
.consult-button.purple-theme {
background: linear-gradient(135deg, var(--purple-color) 0%, #6d28d9 100%);
color: #ffffff;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
.consult-button.purple-theme:hover {
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5), 0 0 15px rgba(139, 92, 246, 0.2);
}
/* Circular Compatibility Scorecard */
.compat-score-wrapper {
background: rgba(13, 11, 26, 0.45);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 2.25rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
backdrop-filter: blur(12px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
margin-bottom: 0.5rem;
border-image: linear-gradient(135deg, var(--border-color), rgba(139, 92, 246, 0.2)) 1;
}
.compat-score-circle {
width: 140px;
height: 140px;
border-radius: 50%;
position: relative;
background: linear-gradient(135deg, var(--gold-color), var(--purple-color));
padding: 3px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 25px rgba(139, 92, 246, 0.2), inset 0 0 15px rgba(229, 193, 88, 0.1);
animation: circle-glow-pulse 4s infinite ease-in-out;
}
.compat-score-circle::before {
content: '';
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
background: radial-gradient(circle, rgba(13, 11, 26, 0.9) 0%, rgba(8, 7, 17, 0.98) 100%);
border-radius: 50%;
z-index: 1;
}
.compat-score-circle span {
position: relative;
z-index: 2;
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 800;
color: var(--gold-color);
text-shadow: 0 0 10px rgba(229, 193, 88, 0.5);
letter-spacing: -0.02em;
}
.compat-score-wrapper h4 {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--gold-color);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
.compat-score-wrapper p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-main);
max-width: 500px;
margin: 0;
}
/* Two-column responsive grid */
.two-col-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 768px) {
.two-col-grid {
grid-template-columns: 1fr !important;
}
}
@keyframes circle-glow-pulse {
0%, 100% {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2), inset 0 0 10px rgba(229, 193, 88, 0.05);
}
50% {
box-shadow: 0 0 35px rgba(229, 193, 88, 0.4), inset 0 0 20px rgba(139, 92, 246, 0.15);
}
}
/* ==========================================================================
Lunar Details Tab Styles
========================================================================== */
.lunar-widget-display {
display: flex;
align-items: center;
gap: 1.75rem;
background: linear-gradient(135deg, rgba(18, 14, 40, 0.7) 0%, rgba(8, 7, 17, 0.8) 100%);
border: 1px solid rgba(139, 92, 246, 0.15);
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}
.lunar-widget-display::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.lunar-tab-emoji-container {
width: 110px;
height: 110px;
border-radius: 50%;
background: radial-gradient(circle, rgba(20, 16, 45, 0.9) 0%, rgba(8, 7, 17, 0.98) 100%);
border: 1px solid rgba(229, 193, 88, 0.2);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(229, 193, 88, 0.2), 0 0 60px rgba(139, 92, 246, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.4);
position: relative;
flex-shrink: 0;
animation: lunar-float 6s ease-in-out infinite;
}
@keyframes lunar-float {
0%, 100% { transform: translateY(0px); box-shadow: 0 0 30px rgba(229, 193, 88, 0.2), 0 0 60px rgba(139, 92, 246, 0.1); }
50% { transform: translateY(-6px); box-shadow: 0 6px 40px rgba(229, 193, 88, 0.3), 0 0 80px rgba(139, 92, 246, 0.15); }
}
.lunar-tab-emoji {
font-size: 3.5rem;
line-height: 1;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
transition: var(--transition-smooth);
}
.lunar-quick-info {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.lunar-quick-info h3 {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--gold-color);
margin-bottom: 0.15rem;
letter-spacing: 0.05em;
}
.lunar-info-detail {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
.lunar-info-detail span {
color: var(--text-main);
font-weight: 500;
}
.lunar-quick-stats {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.lunar-stat-item {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 0.75rem 1rem;
transition: var(--transition-smooth);
}
.lunar-stat-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(229, 193, 88, 0.15);
}
.lunar-stat-item .stat-icon {
font-size: 1.5rem;
}
.lunar-stat-item .stat-content {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.lunar-stat-item .stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.lunar-stat-item .stat-value {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-main);
}
/* ==========================================================================
Tarot New Spreads Layouts
========================================================================== */
/* 1. Celtic Cross (10 Cards) Layout */
.cards-board.layout-celtic {
display: grid;
grid-template-columns: repeat(5, var(--card-ratio-width));
grid-template-rows: repeat(4, auto);
gap: 1.5rem 1.5rem;
justify-content: center;
align-content: center;
}
.layout-celtic > .card-wrapper:nth-child(1) {
grid-column: 2;
grid-row: 3;
z-index: 5;
}
.layout-celtic > .card-wrapper:nth-child(2) {
grid-column: 2;
grid-row: 3;
z-index: 6;
transform: rotate(90deg);
margin-top: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
.layout-celtic > .card-wrapper:nth-child(3) {
grid-column: 2;
grid-row: 1;
}
.layout-celtic > .card-wrapper:nth-child(4) {
grid-column: 2;
grid-row: 4;
}
.layout-celtic > .card-wrapper:nth-child(5) {
grid-column: 1;
grid-row: 3;
}
.layout-celtic > .card-wrapper:nth-child(6) {
grid-column: 3;
grid-row: 3;
}
.layout-celtic > .card-wrapper:nth-child(7) {
grid-column: 5;
grid-row: 4;
}
.layout-celtic > .card-wrapper:nth-child(8) {
grid-column: 5;
grid-row: 3;
}
.layout-celtic > .card-wrapper:nth-child(9) {
grid-column: 5;
grid-row: 2;
}
.layout-celtic > .card-wrapper:nth-child(10) {
grid-column: 5;
grid-row: 1;
}
/* 2. Relational Mirror (4 Cards) Layout */
.cards-board.layout-mirror {
display: grid;
grid-template-columns: repeat(2, var(--card-ratio-width));
grid-template-rows: repeat(2, auto);
gap: 2rem 3rem;
justify-content: center;
align-content: center;
}
/* 3. Clarity Spell (4 Cards) Layout */
.cards-board.layout-clarity {
display: grid;
grid-template-columns: repeat(3, var(--card-ratio-width));
grid-template-rows: repeat(2, auto);
gap: 1.5rem 2.5rem;
justify-content: center;
align-content: center;
}
.layout-clarity > .card-wrapper:nth-child(1) {
grid-column: 1;
grid-row: 2;
}
.layout-clarity > .card-wrapper:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.layout-clarity > .card-wrapper:nth-child(3) {
grid-column: 3;
grid-row: 2;
}
.layout-clarity > .card-wrapper:nth-child(4) {
grid-column: 2;
grid-row: 1;
}
/* Responsiveness for New Layouts */
@media (max-width: 1024px) {
.cards-board.layout-celtic {
grid-template-columns: repeat(5, 120px);
gap: 1rem 0.5rem;
}
.cards-board.layout-celtic > .card-wrapper {
width: 120px;
height: 197px;
}
}
@media (max-width: 768px) {
.cards-board.layout-celtic,
.cards-board.layout-mirror,
.cards-board.layout-clarity,
.cards-board.layout-houses {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
height: auto !important;
width: 100% !important;
background: none !important;
}
.cards-board.layout-celtic > .card-wrapper,
.cards-board.layout-mirror > .card-wrapper,
.cards-board.layout-clarity > .card-wrapper,
.cards-board.layout-houses > .card-wrapper {
width: var(--card-ratio-width) !important;
height: var(--card-ratio-height) !important;
position: static !important;
grid-column: auto !important;
grid-row: auto !important;
transform: none !important;
z-index: 1 !important;
}
.cards-board.layout-houses > .card-wrapper .card-inner {
width: var(--card-ratio-width) !important;
height: var(--card-ratio-height) !important;
}
.cards-board.layout-houses > .card-wrapper .placeholder-label {
font-size: 0.75rem !important;
margin-top: 0.75rem !important;
}
}
/* ==========================================================================
Carta del Día Express Widget Styles
========================================================================== */
.daily-card-express-container {
transition: var(--transition-smooth);
}
.daily-express-card {
width: 110px !important;
height: 180px !important;
margin: 0 auto;
cursor: pointer;
position: relative;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
/* Glowing Pulse effect for un-flipped express card */
.daily-express-card:not(.flipped) {
animation: daily-express-pulse 2.5s infinite ease-in-out;
box-shadow: 0 0 10px rgba(229, 193, 88, 0.2), 0 0 20px rgba(131, 56, 236, 0.1);
}
.daily-express-card:not(.flipped):hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 0 15px rgba(229, 193, 88, 0.4), 0 0 25px rgba(131, 56, 236, 0.2);
}
@keyframes daily-express-pulse {
0% {
box-shadow: 0 0 8px rgba(229, 193, 88, 0.2), 0 0 15px rgba(131, 56, 236, 0.1);
}
50% {
box-shadow: 0 0 18px rgba(229, 193, 88, 0.55), 0 0 30px rgba(131, 56, 236, 0.3);
}
100% {
box-shadow: 0 0 8px rgba(229, 193, 88, 0.2), 0 0 15px rgba(131, 56, 236, 0.1);
}
}
.daily-express-info {
animation: daily-express-fade-in 0.6s ease-out forwards;
}
@keyframes daily-express-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Interactive redraw button hover effect */
.daily-express-redraw:hover {
background: var(--gold-color) !important;
color: var(--bg-dark) !important;
box-shadow: 0 0 15px var(--gold-glow) !important;
}
/* ==========================================================================
Mystical SVG Moon Styles — Premium Edition
========================================================================== */
.moon-icon-container {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 8px rgba(229, 193, 88, 0.5));
user-select: none;
transition: var(--transition-smooth);
animation: moon-pulse-header 4s ease-in-out infinite;
}
@keyframes moon-pulse-header {
0%, 100% { filter: drop-shadow(0 0 6px rgba(229, 193, 88, 0.4)); }
50% { filter: drop-shadow(0 0 14px rgba(229, 193, 88, 0.7)) drop-shadow(0 0 20px rgba(139, 92, 246, 0.3)); }
}
.moon-icon-container:hover {
filter: drop-shadow(0 0 14px rgba(229, 193, 88, 0.9));
transform: scale(1.08);
}
.lunar-tab-moon-svg-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 20px rgba(229, 193, 88, 0.6));
transition: var(--transition-smooth);
}
.lunar-tab-moon-svg-container:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 30px rgba(229, 193, 88, 0.9)) drop-shadow(0 0 50px rgba(139, 92, 246, 0.4));
}
.climate-moon-svg-container {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 6px rgba(229, 193, 88, 0.4));
transition: var(--transition-smooth);
}
.climate-moon-svg-container:hover {
filter: drop-shadow(0 0 10px rgba(229, 193, 88, 0.7));
transform: scale(1.08);
}
.mystical-moon-svg {
width: 100%;
height: 100%;
display: block;
}
/* ==========================================================================
Lunar Image Gallery — Premium Moon Photo Display
========================================================================== */
.lunar-image-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 0.5rem;
}
.lunar-image-card {
position: relative;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(229, 193, 88, 0.12);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
transition: var(--transition-smooth);
aspect-ratio: 1 / 1;
}
.lunar-image-card:first-child {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
.lunar-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.lunar-image-card:hover {
border-color: rgba(229, 193, 88, 0.45);
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(229, 193, 88, 0.15);
transform: translateY(-3px);
}
.lunar-image-card:hover img {
transform: scale(1.06);
}
.lunar-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(6, 4, 18, 0.92) 0%, rgba(6, 4, 18, 0.4) 60%, transparent 100%);
padding: 1.5rem 1.25rem 1.25rem;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: var(--transition-smooth);
}
.lunar-image-card:first-child .lunar-image-overlay {
padding: 2rem 1.5rem 1.5rem;
}
.lunar-image-overlay h4 {
font-family: var(--font-serif);
font-size: 0.95rem;
color: var(--gold-color);
letter-spacing: 0.06em;
margin: 0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.lunar-image-card:first-child .lunar-image-overlay h4 {
font-size: 1.15rem;
}
.lunar-image-overlay p {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.75);
margin: 0.35rem 0 0;
line-height: 1.45;
opacity: 0;
transform: translateY(12px);
max-height: 0;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.lunar-image-card:hover .lunar-image-overlay {
background: linear-gradient(to top, rgba(13, 11, 26, 0.98) 0%, rgba(13, 11, 26, 0.7) 70%, rgba(13, 11, 26, 0.1) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lunar-image-card:hover .lunar-image-overlay p {
opacity: 1;
transform: translateY(0);
max-height: 100px;
}
/* Responsive Lunar Image Gallery Media Queries */
@media (max-width: 1024px) {
.lunar-image-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.lunar-image-gallery {
grid-template-columns: 1fr;
}
}
/* Modal Místico de Luna */
.lunar-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1.5rem;
}
.lunar-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(4, 3, 10, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.lunar-modal-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 750px;
max-height: 85vh;
overflow-y: auto;
animation: modal-zoom-in 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
background: linear-gradient(135deg, rgba(16, 12, 36, 0.92) 0%, rgba(9, 7, 20, 0.97) 100%) !important;
border: 1px solid rgba(229, 193, 88, 0.25) !important;
border-radius: 24px !important;
padding: 2.5rem !important;
}
@keyframes modal-zoom-in {
from {
opacity: 0;
transform: scale(0.92) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.lunar-modal-close {
position: absolute;
top: 1rem;
right: 1.25rem;
background: transparent;
border: none;
font-size: 2.2rem;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition-smooth);
z-index: 5;
line-height: 1;
}
.lunar-modal-close:hover {
color: var(--gold-color);
transform: rotate(90deg);
}
.lunar-modal-header-layout {
display: flex;
align-items: center;
gap: 1.75rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.lunar-modal-image-container {
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 25px rgba(229, 193, 88, 0.35);
border: 1.5px solid rgba(229, 193, 88, 0.4);
}
.lunar-modal-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lunar-modal-title-container {
flex: 1;
}
.lunar-modal-title-container h2 {
font-family: var(--font-serif);
font-size: 1.85rem;
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
background: linear-gradient(135deg, #f0d060 0%, #e5c158 50%, #c8a030 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lunar-modal-title-container p {
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--purple-color);
text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}
.lunar-modal-info-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
text-align: left;
}
.lunar-modal-section h4 {
font-family: var(--font-serif);
font-size: 1.1rem;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gold-color);
border-bottom: 1px solid rgba(229, 193, 88, 0.15);
padding-bottom: 0.35rem;
}
.lunar-modal-section p {
font-size: 0.9rem;
color: rgba(243, 244, 246, 0.9);
line-height: 1.6;
margin: 0;
}
/* Galería de Luna para Barra Lateral */
.lunar-image-gallery.sidebar-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 0.5rem;
}
.lunar-image-gallery.sidebar-gallery .lunar-image-card {
aspect-ratio: 1 / 1;
border-radius: 12px;
border: 1px solid rgba(229, 193, 88, 0.12);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.lunar-image-gallery.sidebar-gallery .lunar-image-card:first-child {
grid-column: 1 / -1;
aspect-ratio: 2.1 / 1; /* banner lateral */
}
.lunar-image-gallery.sidebar-gallery .lunar-image-overlay {
padding: 0.65rem 0.5rem 0.5rem 0.5rem;
background: linear-gradient(to top, rgba(6, 4, 18, 0.95) 0%, rgba(6, 4, 18, 0.3) 70%, transparent 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.lunar-image-gallery.sidebar-gallery .lunar-image-card:hover .lunar-image-overlay {
background: linear-gradient(to top, rgba(13, 11, 26, 0.98) 0%, rgba(13, 11, 26, 0.8) 80%, rgba(13, 11, 26, 0.2) 100%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.lunar-image-gallery.sidebar-gallery .lunar-image-overlay h4 {
font-size: 0.76rem;
letter-spacing: 0.03em;
}
.lunar-image-gallery.sidebar-gallery .lunar-image-card:first-child .lunar-image-overlay h4 {
font-size: 0.92rem;
letter-spacing: 0.05em;
}
.lunar-image-gallery.sidebar-gallery .lunar-image-overlay p {
font-size: 0.68rem;
line-height: 1.35;
color: rgba(255, 255, 255, 0.75);
margin-top: 0.25rem;
}
/* ==========================================================================
Grimorio 3D Book Styles
========================================================================== */
#card-detail-modal.book-mode .modal-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
max-width: 900px;
width: 95%;
padding: 0;
}
#card-detail-modal.book-mode .close-modal-btn {
top: -30px;
right: 10px;
color: var(--gold-color);
font-size: 2rem;
}
.grimorio-book-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 1.5rem;
}
.grimorio-book {
position: relative;
width: 820px;
height: 560px;
display: flex;
background: #3e2a18; /* Leather back cover */
border: 6px solid #281b0f;
border-radius: 12px;
box-shadow: 0 30px 60px rgba(0,0,0,0.85), 0 0 50px rgba(139, 92, 246, 0.2);
transition: transform 0.4s ease-in-out;
perspective: 1500px;
overflow: hidden;
}
.book-spine {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 20px;
background: linear-gradient(to right, #1a110a, #302013 30%, #302013 70%, #1a110a);
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.book-page {
width: 50%;
height: 100%;
background-color: #f7eed4;
background-image: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.03) 100%);
color: #2e2116;
padding: 2.5rem 2.25rem;
position: relative;
display: flex;
flex-direction: column;
z-index: 2;
box-shadow: inset 0 0 30px rgba(75, 56, 42, 0.15);
}
.book-page.left-page {
border-radius: 6px 0 0 6px;
border-right: 1px solid rgba(40, 27, 15, 0.25);
padding-right: 2.75rem;
}
.book-page.right-page {
border-radius: 0 6px 6px 0;
border-left: 1px solid rgba(40, 27, 15, 0.25);
padding-left: 2.75rem;
}
.page-ornament {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
border: 1px solid rgba(184, 134, 11, 0.25);
pointer-events: none;
border-radius: 4px;
}
.book-page.left-page .page-ornament {
margin-right: 0.5rem;
}
.book-page.right-page .page-ornament {
margin-left: 0.5rem;
}
.grimorio-book .grimorio-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 0.25rem !important;
width: 100% !important;
margin-bottom: 1rem !important;
}
.grimorio-book .grimorio-number {
font-family: var(--font-sans);
font-size: 0.78rem;
color: #b8860b;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
display: block;
text-align: center;
margin-bottom: 0.25rem;
}
.grimorio-book .grimorio-title {
font-family: 'Garamond', 'Georgia', serif;
font-size: 1.85rem;
color: #2b1f13;
margin: 0 !important;
font-weight: bold;
text-shadow: none !important;
text-align: center !important;
width: 100% !important;
}
.grimorio-book .grimorio-card-art-wrapper {
margin: 0 auto 1.25rem auto;
border: 3px solid #2b1f13;
border-radius: 6px;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
overflow: hidden;
background: #080711;
display: inline-block;
}
.grimorio-book .grimorio-card-art {
width: 140px !important;
height: 230px !important;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.grimorio-book .grimorio-card-art-wrapper:hover .grimorio-card-art {
transform: scale(1.05);
}
.grimorio-book .grimorio-astro-details {
margin-top: auto;
border-top: 1px solid rgba(43, 31, 19, 0.15);
padding-top: 0.75rem;
width: 100%;
}
.grimorio-book .grimorio-astro-details .card-astro-badge {
background: rgba(43, 31, 19, 0.08);
border: 1px solid rgba(43, 31, 19, 0.2);
color: #2e2116;
padding: 0.3rem 0.6rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.grimorio-book .grimorio-astro-details .card-astro-symbol {
color: #b8860b;
font-size: 1rem;
}
.grimorio-book .grimorio-themes {
font-size: 0.82rem !important;
color: #4b382a !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* Page Navigation Buttons */
.book-nav-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(229, 193, 88, 0.1);
border: 1.5px solid rgba(229, 193, 88, 0.4);
color: var(--gold-color);
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: var(--transition-smooth);
z-index: 100;
outline: none;
}
.book-nav-btn:hover {
background: var(--gold-color);
color: #080711;
box-shadow: 0 0 15px rgba(229, 193, 88, 0.6);
transform: scale(1.1);
}
/* Right Page Tabs */
.grimorio-tabs {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-bottom: 1.25rem;
border-bottom: 1.5px solid rgba(43, 31, 19, 0.15);
padding-bottom: 0.5rem;
}
.grimorio-tab {
background: transparent;
border: 1.5px solid rgba(43, 31, 19, 0.3);
color: #4b382a;
padding: 0.35rem 0.85rem;
border-radius: 14px;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition-smooth);
outline: none;
}
.grimorio-tab.active {
background: #4b382a;
color: #f7eed4;
border-color: #4b382a;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
/* Meanings Scroll Area */
.grimorio-meanings-scroll {
flex: 1;
overflow-y: auto;
padding-right: 0.5rem;
scrollbar-width: thin;
scrollbar-color: rgba(43, 31, 19, 0.3) transparent;
}
.grimorio-meanings-scroll::-webkit-scrollbar {
width: 4px;
}
.grimorio-meanings-scroll::-webkit-scrollbar-thumb {
background: rgba(43, 31, 19, 0.3);
border-radius: 4px;
}
.grimorio-content-section p {
font-size: 0.88rem;
line-height: 1.55;
color: #2e2116;
margin: 0 0 0.85rem 0;
}
.grimorio-content-section p strong {
color: #2b1f13;
font-weight: 700;
}
.grimorio-section-title {
font-size: 1rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 0.75rem;
font-family: 'Garamond', 'Georgia', serif;
}
.grimorio-section-title.upright {
color: #2b1f13;
}
.grimorio-section-title.reversed {
color: #723e20;
}
.grimorio-footer-sigil {
text-align: center;
font-size: 1.25rem;
color: rgba(184, 134, 11, 0.35);
margin-top: 1.5rem;
letter-spacing: 8px;
user-select: none;
}
/* Page flip 3D animation visual triggers */
.page-turning-next {
transform: rotateY(-12deg) scale(0.97);
}
.page-turning-prev {
transform: rotateY(12deg) scale(0.97);
}
/* Media Query Grimorio */
@media (max-width: 900px) {
#card-detail-modal.book-mode .modal-content {
max-width: 500px;
width: 90%;
}
.grimorio-book-container {
flex-direction: column;
gap: 1.5rem;
padding-bottom: 5rem;
}
.grimorio-book {
width: 100%;
height: auto;
flex-direction: column;
background: #f7eed4;
border: 4px solid var(--gold-color);
}
.book-spine {
display: none;
}
.book-page {
width: 100%;
height: auto;
border-radius: 6px !important;
padding: 1.75rem;
box-shadow: none;
}
.book-page.left-page {
border-bottom: 2px dashed rgba(43, 31, 19, 0.2);
border-right: none;
padding-right: 1.75rem;
align-items: center;
text-align: center;
}
.book-page.right-page {
border-left: none;
padding-left: 1.75rem;
}
.page-ornament {
margin: 0 !important;
}
.book-nav-btn {
width: 44px;
height: 44px;
font-size: 1.5rem;
position: absolute;
bottom: 0;
}
.book-nav-btn.prev-btn {
left: 20%;
}
.book-nav-btn.next-btn {
right: 20%;
}
}
/* ==========================================================================
Year Cycle (Personal Year) Numerology Styles
========================================================================== */
.year-cycle-timeline-wrapper {
margin: 1rem 0 2rem 0;
width: 100%;
}
.year-timeline {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
margin: 3.5rem 0;
padding: 0 1rem;
}
.timeline-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 3px;
background: rgba(229, 193, 88, 0.15);
transform: translateY(-50%);
z-index: 1;
}
.timeline-node {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(8, 7, 17, 0.85);
border: 2px solid var(--border-color);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: default;
}
.timeline-node.active {
width: 46px;
height: 46px;
background: var(--gold-color);
border-color: var(--gold-color);
box-shadow: 0 0 25px rgba(229, 193, 88, 0.7);
transform: scale(1.15);
animation: yearPulse 2s infinite;
}
@keyframes yearPulse {
0% { box-shadow: 0 0 15px rgba(229, 193, 88, 0.5); }
50% { box-shadow: 0 0 30px rgba(229, 193, 88, 0.9); }
100% { box-shadow: 0 0 15px rgba(229, 193, 88, 0.5); }
}
.timeline-node.active .node-number {
color: #080711;
font-weight: 800;
font-size: 1.2rem;
}
.node-number {
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 600;
font-family: var(--font-sans);
}
.node-label {
position: absolute;
top: 46px;
left: 50%;
transform: translateX(-50%);
font-size: 0.65rem;
color: var(--text-muted);
white-space: nowrap;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.timeline-node.active .node-label {
color: var(--gold-color);
font-size: 0.7rem;
}
@media (max-width: 600px) {
.year-timeline {
flex-wrap: wrap;
gap: 1.5rem 0.5rem;
justify-content: center;
margin: 2rem 0;
}
.timeline-track {
display: none;
}
.timeline-node {
width: 30px;
height: 30px;
}
.timeline-node.active {
width: 36px;
height: 36px;
}
.node-label {
display: none;
}
}
/* ==========================================================================
Real-Time Astrological Transit Engine Styles
========================================================================== */
.transits-dashboard {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
.transits-dashboard {
grid-template-columns: 1.2fr 1.8fr;
}
}
.transits-wheel-section,
.transits-grid-section {
background: rgba(13, 11, 26, 0.4);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
}
.transits-wheel-section {
display: flex;
flex-direction: column;
align-items: center;
}
.section-subtitle {
font-size: 0.85rem;
color: var(--text-muted);
text-align: center;
margin-top: -0.25rem;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.aspects-wheel-container {
position: relative;
width: 320px;
height: 320px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle, rgba(139, 92, 246, 0.03) 0%, transparent 70%);
border-radius: 50%;
margin-bottom: 1rem;
}
.aspects-wheel-dial {
width: 100%;
height: 100%;
animation: slowWheelSpin 240s linear infinite;
}
@keyframes slowWheelSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.aspects-wheel-dial:hover {
animation-play-state: paused;
}
.aspects-legend {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
font-size: 0.8rem;
color: var(--text-muted);
border-top: 1px dashed rgba(255, 255, 255, 0.08);
padding-top: 1rem;
margin-top: 0.5rem;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.legend-dot.conjunction { background-color: var(--gold-color); box-shadow: 0 0 6px var(--gold-color); }
.legend-dot.sextile { background-color: #10b981; box-shadow: 0 0 6px #10b981; }
.legend-dot.square { background-color: #ef4444; box-shadow: 0 0 6px #ef4444; }
.legend-dot.trine { background-color: #06b6d4; box-shadow: 0 0 6px #06b6d4; }
.legend-dot.opposition { background-color: #8b5cf6; box-shadow: 0 0 6px #8b5cf6; }
/* Planetary Grid & Cards */
.transits-planets-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-height: 480px;
overflow-y: auto;
padding-right: 0.5rem;
}
@media (min-width: 600px) {
.transits-planets-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Custom Scrollbar for planetary grid */
.transits-planets-grid::-webkit-scrollbar {
width: 4px;
}
.transits-planets-grid::-webkit-scrollbar-track {
background: transparent;
}
.transits-planets-grid::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 2px;
}
.planet-transit-card {
background: rgba(13, 11, 26, 0.55);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1rem;
transition: var(--transition-smooth);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.planet-transit-card:hover {
transform: translateY(-2px);
background: rgba(13, 11, 26, 0.75);
}
/* Elements color coding & glows */
.planet-transit-card.element-fuego {
border-color: rgba(239, 68, 68, 0.35);
box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.05);
}
.planet-transit-card.element-fuego:hover {
box-shadow: 0 0 15px rgba(239, 68, 68, 0.25), inset 0 0 12px rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.75);
}
.planet-transit-card.element-tierra {
border-color: rgba(16, 185, 129, 0.35);
box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.05);
}
.planet-transit-card.element-tierra:hover {
box-shadow: 0 0 15px rgba(16, 185, 129, 0.25), inset 0 0 12px rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.75);
}
.planet-transit-card.element-aire {
border-color: rgba(6, 182, 212, 0.35);
box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.05);
}
.planet-transit-card.element-aire:hover {
box-shadow: 0 0 15px rgba(6, 182, 212, 0.25), inset 0 0 12px rgba(6, 182, 212, 0.1);
border-color: rgba(6, 182, 212, 0.75);
}
.planet-transit-card.element-agua {
border-color: rgba(139, 92, 246, 0.35);
box-shadow: inset 0 0 10px rgba(139, 92, 246, 0.05);
}
.planet-transit-card.element-agua:hover {
box-shadow: 0 0 15px rgba(139, 92, 246, 0.25), inset 0 0 12px rgba(139, 92, 246, 0.1);
border-color: rgba(139, 92, 246, 0.75);
}
.planet-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
padding-bottom: 0.5rem;
}
.planet-symbol {
font-size: 1.5rem;
color: var(--text-main);
filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
}
.planet-name-wrap {
display: flex;
flex-direction: column;
}
.planet-name {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--text-main);
font-weight: 600;
margin: 0;
}
.planet-keyword {
font-size: 0.7rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.planet-position {
font-size: 0.9rem;
color: var(--text-main);
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.element-badge {
font-size: 0.75rem;
color: var(--text-muted);
background: rgba(255, 255, 255, 0.04);
padding: 0.15rem 0.4rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.planet-aspect-line {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.aspect-badge {
font-size: 0.75rem;
padding: 0.15rem 0.4rem;
border-radius: 6px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.aspect-conjunction { background: rgba(229, 193, 88, 0.12); color: var(--gold-color); border: 1px solid rgba(229, 193, 88, 0.25); }
.aspect-trine { background: rgba(6, 182, 212, 0.12); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.25); }
.aspect-sextile { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.aspect-square { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.aspect-opposition { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.25); }
.aspect-none { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); }
.planet-influence-desc {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.4;
margin: 0.5rem 0 0 0;
font-style: italic;
}
/* Transits Narratives */
.transits-narratives {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1rem;
}
.narrative-card {
background: rgba(13, 11, 26, 0.45);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1.25rem 1.5rem;
transition: var(--transition-smooth);
}
.narrative-card:hover {
border-color: var(--border-hover);
background: rgba(13, 11, 26, 0.65);
}
.narrative-card.general { border-left: 4px solid var(--gold-color); }
.narrative-card.love { border-left: 4px solid #8b5cf6; }
.narrative-card.career { border-left: 4px solid #10b981; }
.narrative-card.mind { border-left: 4px solid #06b6d4; }
.narrative-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.narrative-icon {
font-size: 1.25rem;
}
.narrative-header h4 {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--text-main);
margin: 0;
font-weight: 600;
letter-spacing: 0.02em;
}
.narrative-body p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-main);
margin: 0;
}
/* ==========================================================================
MEJORA 8: Tab Fade Transitions
========================================================================== */
.tab-content {
animation: tabFadeIn 0.25s ease forwards;
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
MEJORA 9: Oracle Synthesis Loader
========================================================================== */
#oracle-loader-overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 3rem 2rem;
text-align: center;
}
.oracle-loader-stars {
position: relative;
width: 80px;
height: 80px;
}
.oracle-loader-stars::before,
.oracle-loader-stars::after {
content: '✦';
position: absolute;
font-size: 1.5rem;
color: var(--gold-color);
animation: orbit-star 2.4s linear infinite;
}
.oracle-loader-stars::before {
top: 0; left: 50%;
transform-origin: 0 40px;
}
.oracle-loader-stars::after {
top: 0; left: 50%;
transform-origin: 0 40px;
animation-delay: -1.2s;
}
@keyframes orbit-star {
from { transform: rotate(0deg) translateX(30px); }
to { transform: rotate(360deg) translateX(30px); }
}
.oracle-loader-crystal {
font-size: 3rem;
animation: crystal-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes crystal-pulse {
from { transform: scale(0.9); filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4)); }
to { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(229, 193, 88, 0.7)); }
}
.oracle-loader-text {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--gold-color);
letter-spacing: 0.1em;
animation: text-shimmer 2s ease-in-out infinite alternate;
}
@keyframes text-shimmer {
from { opacity: 0.6; }
to { opacity: 1; }
}
.oracle-loader-dots {
display: inline-block;
width: 1.5rem;
overflow: hidden;
vertical-align: bottom;
animation: dots-expand 1.5s steps(4, end) infinite;
}
@keyframes dots-expand {
0% { width: 0; }
100%{ width: 1.5rem; }
}
/* ==========================================================================
MEJORA 1: Daily Card Mejorada
========================================================================== */
.daily-full-reading {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1rem;
}
.daily-affirmation-box {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(229, 193, 88, 0.08));
border: 1px solid rgba(139, 92, 246, 0.3);
border-left: 4px solid var(--purple-color);
border-radius: 12px;
padding: 1.25rem 1.5rem;
font-size: 1.05rem;
font-style: italic;
color: var(--text-main);
line-height: 1.7;
position: relative;
}
.daily-affirmation-box::before {
content: '✨';
font-size: 1.2rem;
margin-right: 0.5rem;
}
.daily-ritual-box {
background: linear-gradient(135deg, rgba(229, 193, 88, 0.06), rgba(16, 185, 129, 0.04));
border: 1px solid rgba(229, 193, 88, 0.2);
border-radius: 12px;
padding: 1.25rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.daily-ritual-icon {
font-size: 1.75rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.daily-ritual-content h4 {
font-family: var(--font-serif);
color: var(--gold-color);
font-size: 0.9rem;
letter-spacing: 0.08em;
margin-bottom: 0.4rem;
}
.daily-ritual-content p {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
}
.daily-archetype-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.35);
border-radius: 20px;
padding: 0.35rem 0.9rem;
font-size: 0.82rem;
color: var(--purple-color);
font-weight: 500;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
/* ==========================================================================
MEJORA 3: Notas en Historial
========================================================================== */
.history-note-area {
margin-top: 0.6rem;
display: none;
}
.history-note-area.visible {
display: block;
}
.history-note-input {
width: 100%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-main);
font-family: var(--font-sans);
font-size: 0.85rem;
line-height: 1.5;
padding: 0.6rem 0.85rem;
resize: vertical;
min-height: 70px;
transition: border-color 0.2s;
}
.history-note-input:focus {
outline: none;
border-color: var(--gold-color);
}
.history-note-input::placeholder {
color: var(--text-muted);
font-style: italic;
}
.history-note-saved {
font-size: 0.8rem;
color: var(--success-color);
margin-top: 0.3rem;
display: none;
}
.history-note-text-display {
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-muted);
font-style: italic;
padding: 0.5rem 0.75rem;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid var(--gold-color);
border-radius: 0 6px 6px 0;
margin-top: 0.5rem;
}
.history-note-btn {
background: none;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-muted);
cursor: pointer;
font-size: 0.78rem;
padding: 0.25rem 0.6rem;
transition: all 0.2s;
margin-top: 0.4rem;
}
.history-note-btn:hover {
border-color: var(--gold-color);
color: var(--gold-color);
}
/* ==========================================================================
MEJORA 4: Pregunta Guiada
========================================================================== */
.guided-questions-panel {
margin-top: 0.75rem;
display: none;
flex-direction: column;
gap: 0.4rem;
}
.guided-questions-panel.visible {
display: flex;
}
.guided-q-title {
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
}
.guided-q-chip {
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: 20px;
color: var(--text-main);
cursor: pointer;
font-size: 0.82rem;
padding: 0.3rem 0.75rem;
transition: all 0.2s;
text-align: left;
font-family: var(--font-sans);
}
.guided-q-chip:hover {
background: rgba(139, 92, 246, 0.2);
border-color: var(--purple-color);
color: #fff;
transform: translateX(4px);
}
/* ==========================================================================
MEJORA 5: Tirada de 12 Meses
========================================================================== */
.yearly-spread-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem;
}
@media (max-width: 900px) {
.yearly-spread-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.yearly-spread-grid { grid-template-columns: repeat(2, 1fr); }
}
.yearly-month-card {
background: rgba(13, 11, 26, 0.7);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 0.85rem;
transition: all 0.3s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.yearly-month-card:hover {
border-color: var(--gold-color);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(229, 193, 88, 0.1);
}
.yearly-month-card.current-month {
border-color: var(--purple-color);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}
.yearly-month-label {
font-size: 0.72rem;
color: var(--gold-color);
font-family: var(--font-serif);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.5rem;
display: block;
}
.yearly-month-mini-card {
width: 100%;
aspect-ratio: 2/3.3;
background-size: cover;
background-position: center;
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.yearly-month-mini-card.reversed {
transform: rotate(180deg);
}
.yearly-month-card-name {
font-size: 0.75rem;
color: var(--text-main);
font-weight: 500;
line-height: 1.3;
margin-bottom: 0.3rem;
}
.yearly-month-card-msg {
font-size: 0.7rem;
color: var(--text-muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.yearly-current-badge {
position: absolute;
top: 0.4rem;
right: 0.4rem;
background: var(--purple-color);
color: #fff;
font-size: 0.6rem;
padding: 0.15rem 0.4rem;
border-radius: 10px;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ==========================================================================
MEJORA 6: Carta Natal Personal
========================================================================== */
.natal-card-reveal {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 0;
}
.natal-card-visual {
width: 160px;
aspect-ratio: 2/3.3;
background-size: cover;
background-position: center;
border-radius: 12px;
box-shadow: 0 0 30px rgba(229, 193, 88, 0.3), 0 0 60px rgba(139, 92, 246, 0.15);
border: 1px solid rgba(229, 193, 88, 0.4);
transition: transform 0.4s;
animation: natal-float 4s ease-in-out infinite alternate;
}
@keyframes natal-float {
from { transform: translateY(0px); }
to { transform: translateY(-8px); }
}
.natal-card-info {
text-align: center;
max-width: 500px;
}
.natal-card-number {
font-family: var(--font-serif);
font-size: 2.5rem;
color: var(--gold-color);
line-height: 1;
margin-bottom: 0.25rem;
text-shadow: 0 0 20px var(--gold-glow);
}
.natal-card-title {
font-family: var(--font-serif);
font-size: 1.6rem;
color: var(--text-main);
margin-bottom: 1rem;
}
.natal-card-description {
font-size: 0.95rem;
line-height: 1.75;
color: var(--text-muted);
text-align: left;
}
.natal-numerology-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.75rem;
}
.natal-num-pill {
background: rgba(229, 193, 88, 0.08);
border: 1px solid rgba(229, 193, 88, 0.25);
border-radius: 20px;
padding: 0.3rem 0.85rem;
font-size: 0.8rem;
color: var(--gold-color);
}
/* ==========================================================================
MEJORA 7: Grimorio Mejorado
========================================================================== */
.book-filters-bar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1.25rem;
}
.book-filter-chip {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
border-radius: 20px;
color: var(--text-muted);
cursor: pointer;
font-size: 0.8rem;
padding: 0.3rem 0.85rem;
transition: all 0.2s;
font-family: var(--font-sans);
}
.book-filter-chip:hover,
.book-filter-chip.active {
background: rgba(229, 193, 88, 0.12);
border-color: var(--gold-color);
color: var(--gold-color);
}
.book-view-toggle {
margin-left: auto;
display: flex;
gap: 0.3rem;
}
.book-view-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-muted);
cursor: pointer;
font-size: 1rem;
padding: 0.3rem 0.6rem;
transition: all 0.2s;
}
.book-view-btn.active,
.book-view-btn:hover {
background: rgba(229, 193, 88, 0.1);
border-color: var(--gold-color);
color: var(--gold-color);
}
#book-grid.list-view {
grid-template-columns: 1fr;
}
#book-grid.list-view .book-card-item {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
}
#book-grid.list-view .book-card-img-wrap {
width: 60px;
flex-shrink: 0;
}
#book-grid.list-view .book-card-body {
flex: 1;
}
/* ==========================================================================
MEJORA 2: Compartir Lectura
========================================================================== */
.share-reading-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(229, 193, 88, 0.1));
border: 1px solid rgba(139, 92, 246, 0.4);
border-radius: 10px;
color: var(--text-main);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 500;
padding: 0.6rem 1.1rem;
transition: all 0.25s;
margin-top: 0.75rem;
}
.share-reading-btn:hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(229, 193, 88, 0.15));
border-color: var(--purple-color);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
}
.share-toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: rgba(13, 11, 26, 0.95);
border: 1px solid var(--gold-color);
border-radius: 12px;
color: var(--text-main);
font-size: 0.9rem;
padding: 0.85rem 1.5rem;
z-index: 9999;
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
text-align: center;
backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.share-toast.show {
transform: translateX(-50%) translateY(0);
}
/* ==========================================================================
AJUSTES ASTRALES Y ACCESIBILIDAD (MEJORAS 10, 11, 12, 13)
========================================================================== */
/* 10. Modo Claro (Día) */
body.light-mode {
--bg-color: #f6f3eb;
--panel-bg: rgba(253, 250, 243, 0.95);
--border-color: rgba(163, 121, 26, 0.3);
--border-hover: rgba(163, 121, 26, 0.65);
--gold-color: #8c6411; /* Más oscuro para contraste con fondo crema */
--gold-glow: rgba(140, 100, 17, 0.15);
--purple-color: #5b21b6;
--purple-glow: rgba(91, 33, 182, 0.12);
--text-main: #1d1b22;
--text-muted: #53515a;
}
body.light-mode .stars-container {
background: radial-gradient(circle at 50% 50%, #fcfbf9 0%, #ebe6da 100%);
}
body.light-mode .stars {
filter: invert(0.9) sepia(0.2) saturate(1.8) hue-rotate(330deg);
opacity: 0.3;
}
body.light-mode .twinkling {
filter: invert(0.9) sepia(0.4) saturate(2.2) hue-rotate(340deg);
opacity: 0.18;
}
body.light-mode .stars-container::after {
background:
radial-gradient(circle at 20% 30%, rgba(109, 40, 217, 0.05) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(163, 121, 26, 0.06) 0%, transparent 60%);
}
body.light-mode .glass-card,
body.light-mode .onboarding-content {
background: var(--panel-bg) !important;
border-color: var(--border-color) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 15px rgba(163, 121, 26, 0.03) !important;
}
body.light-mode .settings-panel-content {
background: rgba(253, 250, 243, 0.97) !important;
border-left: 1.5px solid var(--border-color) !important;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.04) !important;
}
body.light-mode .moon-phase-widget {
background: var(--panel-bg) !important;
border-color: var(--border-color) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04) !important;
}
body.light-mode .tapete-mat {
background: rgba(253, 250, 243, 0.7) !important;
border-color: var(--border-color) !important;
box-shadow: inset 0 0 60px rgba(163, 121, 26, 0.08) !important;
}
body.light-mode input[type="text"],
body.light-mode input[type="date"],
body.light-mode select,
body.light-mode textarea,
body.light-mode .premium-select {
background: rgba(0, 0, 0, 0.03) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-main) !important;
}
body.light-mode input[type="text"]:focus,
body.light-mode input[type="date"]:focus,
body.light-mode select:focus,
body.light-mode textarea:focus,
body.light-mode .premium-select:focus {
border-color: var(--gold-color) !important;
background: rgba(255, 255, 255, 0.85) !important;
}
body.light-mode .nav-tab {
color: var(--text-muted) !important;
border-color: var(--border-color) !important;
}
body.light-mode .nav-tab:hover {
color: var(--text-main) !important;
border-color: var(--border-hover) !important;
background: rgba(163, 121, 26, 0.04) !important;
}
body.light-mode .nav-tab.active {
background: var(--gold-color) !important;
color: #f6f3eb !important;
border-color: var(--gold-color) !important;
}
body.light-mode .control-label,
body.light-mode .toggle-label {
color: var(--text-main) !important;
}
body.light-mode .settings-close-btn,
body.light-mode .onboarding-close-btn {
color: var(--text-muted) !important;
}
body.light-mode .settings-close-btn:hover,
body.light-mode .onboarding-close-btn:hover {
color: var(--error-color) !important;
}
body.light-mode .book-filter-chip {
background: rgba(0, 0, 0, 0.03) !important;
border-color: var(--border-color) !important;
color: var(--text-muted) !important;
}
body.light-mode .book-filter-chip.active,
body.light-mode .book-filter-chip:hover {
background: rgba(163, 121, 26, 0.08) !important;
border-color: var(--gold-color) !important;
color: var(--gold-color) !important;
}
body.light-mode .theme-toggle-group,
body.light-mode .font-size-group {
background: rgba(0, 0, 0, 0.03) !important;
border-color: var(--border-color) !important;
}
body.light-mode .theme-btn,
body.light-mode .font-btn {
color: var(--text-muted) !important;
}
body.light-mode .theme-btn.active,
body.light-mode .font-btn.active {
background: var(--gold-color) !important;
color: #f6f3eb !important;
}
body.light-mode .card-back {
background: linear-gradient(135deg, #2b2518 0%, #15110a 100%);
border-color: rgba(163, 121, 26, 0.5);
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
body.light-mode .card-back::after {
border-color: rgba(163, 121, 26, 0.25);
}
body.light-mode .narrative-box {
background: rgba(253, 250, 243, 0.9) !important;
border-left: 4px solid var(--gold-color) !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
/* 13. Modo de Alto Contraste */
body.high-contrast {
--bg-color: #000000 !important;
--panel-bg: #111111 !important;
--border-color: #ffffff !important;
--border-hover: #ffffff !important;
--gold-color: #ffff00 !important;
--gold-glow: none !important;
--purple-color: #00ffff !important;
--purple-glow: none !important;
--text-main: #ffffff !important;
--text-muted: #dddddd !important;
}
body.high-contrast .stars-container {
display: none !important;
}
body.high-contrast.light-mode {
--bg-color: #ffffff !important;
--panel-bg: #ffffff !important;
--border-color: #000000 !important;
--border-hover: #000000 !important;
--gold-color: #8b0000 !important;
--gold-glow: none !important;
--purple-color: #00008b !important;
--purple-glow: none !important;
--text-main: #000000 !important;
--text-muted: #111111 !important;
}
body.high-contrast .glass-card,
body.high-contrast .tapete-mat,
body.high-contrast .book-card-item,
body.high-contrast .narrative-box,
body.high-contrast .settings-panel-content,
body.high-contrast .onboarding-content {
border: 2.5px solid var(--border-color) !important;
background: var(--panel-bg) !important;
box-shadow: none !important;
border-radius: 4px !important;
}
body.high-contrast button,
body.high-contrast select,
body.high-contrast input {
border: 2px solid var(--border-color) !important;
background: var(--panel-bg) !important;
color: var(--text-main) !important;
text-shadow: none !important;
box-shadow: none !important;
border-radius: 4px !important;
}
body.high-contrast button:hover {
background: var(--text-main) !important;
color: var(--bg-color) !important;
border-color: var(--text-main) !important;
}
/* 13. Ajuste del tamaño de letra global */
html[data-font-size="small"] {
font-size: 14px;
}
html[data-font-size="medium"] {
font-size: 16px;
}
html[data-font-size="large"] {
font-size: 18px;
}
/* Botón flotante del Panel Astral */
.astral-settings-btn {
position: fixed;
top: 1.5rem;
right: 1.5rem;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(229, 193, 88, 0.18), rgba(139, 92, 246, 0.18));
border: 1px solid var(--border-color);
color: var(--gold-color);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 999;
transition: var(--transition-smooth);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
outline: none;
}
.astral-settings-btn:hover {
transform: scale(1.1) rotate(30deg);
border-color: var(--gold-color);
box-shadow: 0 0 15px var(--gold-glow);
}
.astral-settings-btn:focus-visible {
outline: 2px solid var(--gold-color);
outline-offset: 3px;
}
/* Panel Deslizable de Ajustes */
.astral-settings-panel {
position: fixed;
top: 0;
right: 0;
width: 380px;
height: 100vh;
z-index: 1000;
transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
transform: translateX(0);
}
.astral-settings-panel.hidden {
display: block !important;
transform: translateX(100%);
pointer-events: none;
}
.settings-panel-content {
height: 100%;
border-radius: 0 !important;
border-left: 1.5px solid var(--border-color);
border-right: none;
border-top: none;
border-bottom: none;
background: rgba(10, 8, 20, 0.94) !important;
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
padding: 2.25rem 2rem !important;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
.settings-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1.5px solid var(--border-color);
padding-bottom: 1rem;
margin-bottom: 1.75rem;
}
.settings-close-btn {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 2.2rem;
cursor: pointer;
line-height: 0.5;
transition: color 0.2s;
padding: 0.5rem;
}
.settings-close-btn:hover {
color: var(--error-color);
}
.settings-panel-body {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2rem;
padding-right: 0.25rem;
}
/* Personalizar barra de scroll del panel */
.settings-panel-body::-webkit-scrollbar {
width: 4px;
}
.settings-panel-body::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 2px;
}
.settings-section {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.settings-section-title {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--gold-color);
letter-spacing: 0.08em;
border-bottom: 1px dashed rgba(229, 193, 88, 0.2);
padding-bottom: 0.4rem;
text-transform: uppercase;
}
.settings-control-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
cursor: pointer;
flex-shrink: 0;
}
.settings-control-row.volume-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.control-label {
font-size: 0.9rem;
color: var(--text-main);
}
/* Grupo de botones selector de temas y fuentes */
.theme-toggle-group,
.font-size-group {
display: flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 3px;
}
.theme-btn,
.font-btn {
background: transparent;
border: none;
color: var(--text-muted);
padding: 0.4rem 0.95rem;
font-size: 0.82rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.25s;
font-family: var(--font-sans);
}
.theme-btn.active,
.font-btn.active {
background: var(--gold-color);
color: #080711 !important;
font-weight: 600;
}
.theme-btn:hover:not(.active),
.font-btn:hover:not(.active) {
color: var(--text-main);
background: rgba(255, 255, 255, 0.02);
}
/* Slider */
.premium-slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: var(--border-color);
outline: none;
cursor: pointer;
}
.premium-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--gold-color);
transition: transform 0.15s;
}
.premium-slider::-webkit-slider-thumb:hover {
transform: scale(1.3);
}
.settings-action-btn {
background: linear-gradient(135deg, rgba(229, 193, 88, 0.12), rgba(139, 92, 246, 0.08));
border: 1px solid var(--border-color);
color: var(--text-main);
border-radius: 8px;
padding: 0.8rem 1rem;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.settings-action-btn:hover {
background: linear-gradient(135deg, rgba(229, 193, 88, 0.22), rgba(139, 92, 246, 0.15));
border-color: var(--gold-color);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(229, 193, 88, 0.1);
}
/* 11. Modal del Onboarding */
.onboarding-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(4, 3, 10, 0.8);
backdrop-filter: blur(8px);
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
transition: opacity 0.3s ease;
}
.onboarding-content {
width: 100%;
max-width: 520px;
background: rgba(12, 10, 24, 0.94) !important;
border: 1.5px solid var(--gold-color) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(229, 193, 88, 0.18) !important;
padding: 2.25rem !important;
border-radius: 20px !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
animation: onboarding-zoom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
}
@keyframes onboarding-zoom {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.onboarding-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.75rem;
}
.onboarding-close-btn {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.8rem;
cursor: pointer;
line-height: 0.5;
transition: color 0.2s;
padding: 0.5rem;
}
.onboarding-close-btn:hover {
color: var(--error-color);
}
.onboarding-body {
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
}
.onboarding-slide {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.onboarding-slide.active {
display: flex;
animation: tabFadeIn 0.35s ease-out;
}
.onboarding-icon {
font-size: 3.8rem;
margin-bottom: 0.25rem;
filter: drop-shadow(0 0 10px rgba(229, 193, 88, 0.3));
animation: logo-moon-float 5s ease-in-out infinite;
}
.onboarding-slide h4 {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--gold-color);
letter-spacing: 0.05em;
}
.onboarding-slide p {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-main);
}
.onboarding-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-color);
padding-top: 1.25rem;
}
.onboarding-nav-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-main);
border-radius: 20px;
padding: 0.45rem 1.35rem;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s;
font-family: var(--font-sans);
}
.onboarding-nav-btn:hover:not(:disabled) {
border-color: var(--gold-color);
color: var(--gold-color);
background: rgba(229, 193, 88, 0.05);
}
.onboarding-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.onboarding-dots {
display: flex;
gap: 0.6rem;
}
.onboarding-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-color);
cursor: pointer;
transition: all 0.2s;
}
.onboarding-dots .dot.active {
background: var(--gold-color);
transform: scale(1.35);
box-shadow: 0 0 8px var(--gold-glow);
}
.onboarding-skip-container {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.82rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.onboarding-dont-show {
display: flex;
align-items: center;
gap: 0.45rem;
cursor: pointer;
user-select: none;
}
.onboarding-dont-show input {
cursor: pointer;
}
.onboarding-skip-btn {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 0.82rem;
transition: color 0.2s;
font-family: var(--font-sans);
}
.onboarding-skip-btn:hover {
color: var(--gold-color);
text-decoration: underline;
}
/* Responsividad general para panel y settings */
@media (max-width: 600px) {
.astral-settings-btn {
top: 0.75rem;
right: 0.75rem;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.astral-settings-panel {
width: 100%;
}
}
/* Sub-navegación de la pestaña diaria */
.daily-sub-nav {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
border-radius: 30px;
padding: 4px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
body.light-mode .daily-sub-nav {
background: rgba(0, 0, 0, 0.02);
}
.daily-sub-tab {
flex: 1;
background: transparent;
border: none;
color: var(--text-muted);
padding: 0.55rem 1rem;
font-size: 0.88rem;
font-weight: 500;
border-radius: 20px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
font-family: var(--font-sans);
text-align: center;
white-space: nowrap;
}
.daily-sub-tab:hover:not(.active) {
color: var(--text-main);
background: rgba(255, 255, 255, 0.03);
}
body.light-mode .daily-sub-tab:hover:not(.active) {
background: rgba(0, 0, 0, 0.02);
}
.daily-sub-tab.active {
background: var(--gold-color);
color: var(--bg-color) !important;
box-shadow: 0 4px 12px var(--gold-glow);
}
body.light-mode .daily-sub-tab.active {
color: #f6f3eb !important;
}
.daily-section-content {
animation: tabFadeIn 0.35s ease-out;
}
.daily-section-content.hidden {
display: none !important;
}
@media (max-width: 480px) {
.daily-sub-nav {
flex-direction: column;
border-radius: 12px;
padding: 6px;
gap: 0.3rem;
}
.daily-sub-tab {
padding: 0.45rem;
font-size: 0.82rem;
}
}
/* ==========================================================================
MEJORA LUNAR: Calendario Lunar Interactivo
========================================================================== */
.lunar-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
margin-top: 1rem;
text-align: center;
}
.lunar-cal-header {
font-family: var(--font-serif);
font-size: 0.82rem;
color: var(--gold-color);
font-weight: 600;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(229, 193, 88, 0.15);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.lunar-cal-day {
background: rgba(13, 11, 26, 0.45);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
padding: 0.6rem 0.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 64px;
position: relative;
}
.lunar-cal-day.empty {
background: transparent;
border: none;
cursor: default;
pointer-events: none;
}
.lunar-cal-day-num {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
line-height: 1;
}
.lunar-cal-day:hover {
transform: scale(1.05);
border-color: rgba(229, 193, 88, 0.45);
background: rgba(139, 92, 246, 0.12);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}
.lunar-cal-day.today {
border-color: var(--purple-color);
background: rgba(139, 92, 246, 0.08);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
.lunar-cal-day.today .lunar-cal-day-num {
color: var(--purple-color);
}
.lunar-cal-day.selected-day {
border-color: var(--gold-color);
background: rgba(229, 193, 88, 0.12);
box-shadow: 0 0 15px rgba(229, 193, 88, 0.3);
}
.lunar-cal-day.selected-day .lunar-cal-day-num {
color: var(--gold-color);
text-shadow: 0 0 8px rgba(229, 193, 88, 0.2);
}
.lunar-cal-day-moon {
width: 22px;
height: 22px;
margin-top: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease;
}
.lunar-cal-day-moon svg {
width: 100%;
height: 100%;
}
.lunar-cal-day:hover .lunar-cal-day-moon {
transform: scale(1.15) rotate(5deg);
}
/* Adaptación del Calendario en Modo Claro (Light Mode) */
body.light-mode .lunar-cal-day {
background: rgba(255, 253, 248, 0.7);
border-color: rgba(13, 11, 26, 0.06);
}
body.light-mode .lunar-cal-day:hover {
background: rgba(229, 193, 88, 0.12);
border-color: rgba(229, 193, 88, 0.5);
box-shadow: 0 0 12px rgba(229, 193, 88, 0.15);
}
body.light-mode .lunar-cal-day.today {
border-color: var(--gold-color);
background: rgba(229, 193, 88, 0.05);
}
body.light-mode .lunar-cal-day.today .lunar-cal-day-num {
color: var(--gold-color);
}
body.light-mode .lunar-cal-day.selected-day {
background: rgba(229, 193, 88, 0.15);
border-color: var(--gold-color);
}
body.light-mode .lunar-cal-day.selected-day .lunar-cal-day-num {
color: var(--gold-color);
}
/* Adaptación en Alto Contraste */
body.high-contrast .lunar-cal-day {
border: 2px solid var(--text-main);
background: transparent;
}
body.high-contrast .lunar-cal-day-num {
color: var(--text-main);
}
body.high-contrast .lunar-cal-day.today {
border: 3px dashed var(--purple-color);
}
body.high-contrast .lunar-cal-day.selected-day {
border: 3px solid var(--gold-color);
background: rgba(229, 193, 88, 0.2);
}
/* Responsividad para móviles */
@media (max-width: 600px) {
.lunar-calendar-grid {
gap: 4px;
}
.lunar-cal-day {
min-height: 52px;
padding: 0.4rem 0.15rem;
border-radius: 6px;
}
.lunar-cal-day-num {
font-size: 0.72rem;
}
.lunar-cal-day-moon {
width: 16px;
height: 16px;
margin-top: 4px;
}
}
/* ==========================================================================
Sección Legal y Cookies
========================================================================== */
/* Footer */
.app-footer {
margin-top: 4rem;
padding: 2rem 1rem;
text-align: center;
border-top: 1px solid rgba(229, 193, 88, 0.15);
background: rgba(10, 8, 20, 0.5);
backdrop-filter: blur(10px);
}
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.legal-link {
color: var(--text-color);
text-decoration: none;
font-size: 0.85rem;
opacity: 0.8;
transition: all 0.3s ease;
}
.legal-link:hover {
color: var(--gold-light);
opacity: 1;
text-shadow: 0 0 8px rgba(229, 193, 88, 0.4);
}
.footer-separator {
color: var(--gold-color);
opacity: 0.5;
}
.footer-copy {
font-size: 0.75rem;
opacity: 0.6;
margin: 0;
}
/* Cookies Banner */
.cookies-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(15, 13, 34, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid var(--gold-color);
z-index: 10000;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
transform: translateY(0);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookies-banner.hidden {
transform: translateY(100%);
pointer-events: none;
}
.cookies-content {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 2rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.cookies-text {
flex: 1;
}
.cookies-actions {
display: flex;
gap: 1rem;
flex-shrink: 0;
}
@media (max-width: 768px) {
.cookies-content {
flex-direction: column;
padding: 1.5rem 1rem;
gap: 1.5rem;
}
.cookies-actions {
width: 100%;
flex-direction: column;
}
.cookies-actions button {
width: 100%;
}
}
/* ==========================================================================
CSS PLACEHOLDERS PARA LOS ARCANOS MENORES
========================================================================== */
.minor-arcana-placeholder {
background: radial-gradient(circle at center, #18152e 0%, #06050e 100%) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
position: relative !important;
overflow: hidden !important;
border: 1.5px solid var(--border-color);
padding: 1rem;
box-sizing: border-box;
}
.minor-arcana-placeholder::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
radial-gradient(rgba(255,255,255,0.3) 1.5px, transparent 1.5px),
radial-gradient(rgba(229,193,88,0.2) 2px, transparent 2px);
background-size: 40px 40px, 60px 60px, 80px 80px;
background-position: 0 0, 20px 30px, 40px 10px;
opacity: 0.45;
pointer-events: none;
}
.minor-arcana-placeholder::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid rgba(229, 193, 88, 0.15);
border-radius: 4px;
pointer-events: none;
}
.minor-arcana-placeholder .suit-symbol {
font-size: 2.2rem;
margin-bottom: 0.5rem;
filter: drop-shadow(0 0 10px rgba(229, 193, 88, 0.6));
transition: transform 0.4s ease;
z-index: 2;
}
.book-card-item:hover .minor-arcana-placeholder .suit-symbol {
transform: scale(1.18) rotate(6deg);
}
.minor-arcana-placeholder .rank-text {
font-family: var(--font-serif);
font-size: 0.65rem;
color: #8a89a0;
text-transform: uppercase;
letter-spacing: 0.12em;
text-align: center;
margin-top: 0.5rem;
z-index: 2;
}
.minor-arcana-placeholder .suit-text {
font-family: var(--font-serif);
font-size: 0.78rem;
color: var(--gold-color);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
text-align: center;
margin-top: 0.2rem;
z-index: 2;
}
/* Ajustes específicos para el modal de grimorio */
.grimorio-book .grimorio-card-art.minor-arcana-placeholder {
width: 140px !important;
height: 230px !important;
}
.grimorio-book .grimorio-card-art.minor-arcana-placeholder .suit-symbol {
font-size: 2.6rem;
margin-bottom: 0.6rem;
}
.grimorio-book .grimorio-card-art.minor-arcana-placeholder .rank-text {
font-size: 0.75rem;
}
.grimorio-book .grimorio-card-art.minor-arcana-placeholder .suit-text {
font-size: 0.88rem;
}