/* ============================================================
   🌙 SUPRA ORÁCULO — DREAM ORACLE CSS v1.0
   Premium styling for Galactic Dream Reading
   Mobile-first · Large readable fonts · Premium cards
   ============================================================ */

/* ── Dream Section Hero ── */
.op-hero-dream { background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(129,140,248,0.05) 100%); }
.op-ring-dream { box-shadow: 0 0 30px rgba(129,140,248,0.3), inset 0 0 15px rgba(129,140,248,0.1); border-color: rgba(129,140,248,0.3); }
.op-card-dream { border-left-color: #818cf8 !important; }
.op-card-dream .op-pcard-title { color: #818cf8 !important; }

/* ── Locked State ── */
.dream-locked-container {
    text-align: center; padding: 48px 24px;
    background: rgba(129,140,248,0.03); border-radius: 16px;
    border: 1px solid rgba(129,140,248,0.1);
}
.dream-lock-icon { font-size: 4rem; margin-bottom: 16px; filter: grayscale(0.5); }
.dream-lock-title {
    font-family: var(--font-heading, Cinzel, serif);
    font-size: 1.3rem; color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
}
.dream-lock-text {
    font-size: 1rem; color: var(--light-dim, #a0a0a0);
    line-height: 1.8; max-width: 500px; margin: 0 auto 20px;
}
.dream-lock-progress {
    width: 200px; height: 8px; margin: 0 auto 10px;
    background: rgba(129,140,248,0.1); border-radius: 4px; overflow: hidden;
}
.dream-lock-fill {
    height: 100%; background: linear-gradient(90deg, #818cf8, #a78bfa);
    border-radius: 4px; transition: width 1s ease;
}
.dream-lock-count {
    font-size: 0.9rem; color: #818cf8; font-weight: 600;
}

/* ── Unlock Animation ── */
.dream-unlock-anim {
    position: relative; text-align: center; padding: 80px 24px;
    min-height: 300px; display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease;
}
.dream-stars-container {
    position: absolute; top: 50%; left: 50%;
    width: 0; height: 0;
}
.dream-star-particle {
    position: absolute; border-radius: 50%;
    width: var(--size, 6px); height: var(--size, 6px);
    animation: dreamStarExplode 2s var(--delay, 0s) ease-out forwards;
    opacity: 0;
}
@keyframes dreamStarExplode {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    20% { opacity: 1; transform: translate(0, 0) scale(1.5); }
    100% {
        opacity: 0;
        transform: translate(
            calc(cos(var(--angle)) * var(--distance)),
            calc(sin(var(--angle)) * var(--distance))
        ) scale(0.3);
    }
}
/* Fallback for browsers without cos/sin in calc */
@supports not (transform: translate(calc(cos(0deg) * 1px), 0)) {
    .dream-star-particle {
        animation: dreamStarFallback 2s var(--delay, 0s) ease-out forwards;
    }
    @keyframes dreamStarFallback {
        0% { transform: translate(0, 0) scale(0); opacity: 0; }
        20% { opacity: 1; transform: translate(0, 0) scale(1.5); }
        100% { opacity: 0; transform: translate(var(--distance), var(--distance)) scale(0.3); }
    }
}
.dream-unlock-text {
    position: relative; z-index: 2;
}
.dream-unlock-icon {
    font-size: 4rem; margin-bottom: 16px;
    animation: dreamPulseGlow 1.5s ease-in-out infinite;
}
@keyframes dreamPulseGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(129,140,248,0.3)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 30px rgba(129,140,248,0.8)); transform: scale(1.1); }
}
.dream-unlock-text h2 {
    font-family: var(--font-heading, Cinzel, serif);
    font-size: 2rem; color: #818cf8; letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(129,140,248,0.5);
    animation: dreamFadeUp 1s 0.5s ease forwards;
    opacity: 0; transform: translateY(20px);
}
.dream-unlock-text p {
    font-size: 1.1rem; color: var(--light-dim, #ccc);
    animation: dreamFadeUp 1s 1s ease forwards;
    opacity: 0; transform: translateY(20px);
}
@keyframes dreamFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Dream Form ── */
.dream-form-container {
    max-width: 600px; margin: 0 auto;
    padding: 24px; background: rgba(129,140,248,0.03);
    border: 1px solid rgba(129,140,248,0.1);
    border-radius: 16px;
}
.dream-form-field { margin-bottom: 18px; }
.dream-label {
    display: block; margin-bottom: 8px;
    font-size: 1.05rem; font-weight: 600;
    color: var(--light, #eee);
}
.dream-select, .dream-input {
    width: 100%; padding: 14px 16px;
    font-size: 1.05rem; color: var(--light, #eee);
    background: rgba(15,15,35,0.7); border: 1px solid rgba(129,140,248,0.2);
    border-radius: 10px; outline: none; transition: border-color 0.3s;
    -webkit-appearance: none; appearance: none;
}
.dream-select:focus, .dream-input:focus, .dream-textarea:focus {
    border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}
.dream-textarea {
    width: 100%; padding: 14px 16px;
    font-size: 1.05rem; color: var(--light, #eee);
    background: rgba(15,15,35,0.7); border: 1px solid rgba(129,140,248,0.2);
    border-radius: 10px; outline: none; resize: vertical;
    font-family: inherit; line-height: 1.6;
    transition: border-color 0.3s;
}

/* ── Dream Buttons ── */
.btn-dream-interpret {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 16px 24px;
    font-size: 1.1rem; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #6366f1, #818cf8);
    border: none; border-radius: 12px; cursor: pointer;
    transition: all 0.3s; margin-top: 12px;
}
.btn-dream-interpret:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,0.3); }

.dream-action-buttons {
    display: flex; flex-direction: column; gap: 14px;
    margin-top: 24px;
}
.btn-dream-advanced, .btn-dream-universal {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 18px 24px;
    font-size: 1.1rem; font-weight: 700;
    color: #fff; border: none; border-radius: 14px;
    cursor: pointer; transition: all 0.3s;
}
.btn-dream-advanced {
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
}
.btn-dream-advanced:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(167,139,250,0.3); }
.btn-dream-universal {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.btn-dream-universal:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,0.3); }

.btn-dream-advanced small, .btn-dream-universal small {
    display: block; font-size: 0.8rem; font-weight: 400; opacity: 0.8; margin-top: 4px;
}

.btn-dream-share, .btn-dream-export {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; font-size: 0.95rem; font-weight: 600;
    color: var(--light, #eee); background: rgba(129,140,248,0.1);
    border: 1px solid rgba(129,140,248,0.2);
    border-radius: 10px; cursor: pointer; transition: all 0.3s;
}
.btn-dream-share:hover, .btn-dream-export:hover {
    background: rgba(129,140,248,0.2); border-color: #818cf8;
}
.btn-dream-share { color: #25D366; border-color: rgba(37,211,102,0.3); }
.btn-dream-share:hover { background: rgba(37,211,102,0.1); }

/* ── Dream Section Titles ── */
.dream-section-title {
    font-family: var(--font-heading, Cinzel, serif);
    font-size: 1.2rem; color: #818cf8;
    margin: 28px 0 12px; text-align: center;
}
.dream-section-desc {
    font-size: 1rem; color: var(--light-dim, #aaa);
    line-height: 1.8; text-align: center; margin-bottom: 20px;
}

/* ── Dream Journal Progress ── */
.dream-journal-progress {
    text-align: center; margin: 20px 0;
    padding: 16px; background: rgba(129,140,248,0.03);
    border: 1px solid rgba(129,140,248,0.1); border-radius: 12px;
}
.dream-jp-label { font-size: 1.1rem; font-weight: 700; color: #818cf8; margin-bottom: 10px; }
.dream-jp-bar {
    width: 100%; height: 10px; background: rgba(129,140,248,0.1);
    border-radius: 5px; overflow: hidden; margin-bottom: 8px;
}
.dream-jp-fill {
    height: 100%; background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 5px; transition: width 0.5s ease;
}
.dream-jp-hint { font-size: 0.85rem; color: var(--light-dim, #aaa); }

/* ── Dream Journal Entries ── */
.dream-journal-entries { margin-top: 20px; }
.dream-journal-entries h4 {
    font-size: 1rem; color: #818cf8;
    margin-bottom: 12px; text-align: center;
}
.dream-je-card {
    padding: 14px 16px; margin-bottom: 10px;
    background: rgba(129,140,248,0.03); border: 1px solid rgba(129,140,248,0.08);
    border-left: 3px solid #818cf8; border-radius: 10px;
}
.dream-je-day {
    font-size: 0.85rem; font-weight: 700;
    color: #818cf8; margin-bottom: 4px;
}
.dream-je-date { font-size: 0.8rem; color: var(--light-dim, #888); margin-bottom: 6px; }
.dream-je-text { font-size: 0.95rem; color: var(--light, #ddd); line-height: 1.6; }

/* ── Palmistry Pro Enhancements ── */
.pp-origins-block {
    margin: 18px 0; padding: 20px;
    background: rgba(240,180,41,0.03); border: 1px solid rgba(240,180,41,0.1);
    border-radius: 14px;
}
.pp-origins-text {
    font-size: 1.05rem; line-height: 1.9;
    color: var(--light, #ddd); text-align: justify;
}
.pp-origins-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-top: 14px;
}
.pp-otag {
    display: inline-block; padding: 6px 14px;
    font-size: 0.85rem; color: var(--cosmic-gold, #f0b429);
    background: rgba(240,180,41,0.06); border: 1px solid rgba(240,180,41,0.15);
    border-radius: 20px; font-weight: 600;
}

/* ── Discard (X) Button on photo preview ── */
.pp-discard-btn {
    position: absolute; top: 8px; right: 8px; z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(239,68,68,0.9); color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
    font-size: 1.3rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; box-shadow: 0 4px 15px rgba(239,68,68,0.4);
}
.pp-discard-btn:hover {
    background: #ef4444; transform: scale(1.15);
    box-shadow: 0 6px 25px rgba(239,68,68,0.6);
}

/* ── Hand Outline SVG in upload areas ── */
.pp-hand-outline {
    color: var(--light-dim, #666);
}

/* ── Dream Register Section ── */
.dream-register-section {
    margin-top: 24px; padding: 24px;
    background: rgba(129,140,248,0.03);
    border: 1px solid rgba(129,140,248,0.1);
    border-radius: 16px;
}

/* ── Universal Result ── */
.dream-universal-result {
    margin-top: 24px;
}

/* ══════════════════════════
   RESPONSIVE — MOBILE FIRST
   ══════════════════════════ */
@media (max-width: 768px) {
    .dream-locked-container { padding: 32px 16px; }
    .dream-lock-title { font-size: 1.15rem; }
    .dream-lock-text { font-size: 0.95rem; }
    .dream-form-container { padding: 16px; }
    .dream-label { font-size: 1rem; }
    .dream-select, .dream-input, .dream-textarea { font-size: 1rem; padding: 12px 14px; }
    .btn-dream-interpret { font-size: 1.05rem; padding: 14px 20px; }
    .btn-dream-advanced, .btn-dream-universal { font-size: 1.05rem; padding: 15px 20px; }
    .dream-section-title { font-size: 1.1rem; }
    .dream-unlock-text h2 { font-size: 1.6rem; letter-spacing: 2px; }
    .pp-origins-text { font-size: 1rem; }
    .pp-origins-tags { gap: 6px; }
    .pp-otag { font-size: 0.8rem; padding: 5px 10px; }
}

@media (max-width: 480px) {
    .dream-locked-container { padding: 24px 12px; }
    .dream-lock-icon { font-size: 3rem; }
    .dream-lock-title { font-size: 1.05rem; }
    .dream-form-container { padding: 12px; }
    .btn-dream-interpret, .btn-dream-advanced, .btn-dream-universal { font-size: 1rem; }
    .dream-unlock-text h2 { font-size: 1.3rem; }
    .pp-discard-btn { width: 40px; height: 40px; font-size: 1.1rem; }
}