:root {
    --van-gogh-blue: #1e3a5f;
    --night-indigo: #050b1a;
    --star-gold: #f5e050;
    --window-light: #87ceeb;
}

body, html {
    margin: 0; padding: 0;
    height: 100%; overflow-x: hidden;
    background-color: var(--night-indigo);
    color: white; font-family: 'Cairo', sans-serif;
    scroll-behavior: smooth;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' style='font-size:24px'><text y='1.1em'>⭐</text></svg>"), auto;
}

.vg-font {
    font-family: 'Reenie Beanie', cursive;
    color: var(--star-gold);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    text-shadow: 0 0 15px var(--star-gold);
    margin: 0;
}

.scene { width: 100vw; min-height: 100vh; position: relative; transition: opacity 1s; }
.hidden { display: none !important; }
.active { display: block; animation: fadeIn 1s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 🏠 تصميم البوابة (غرفة فان جوخ المبسطة) */
#portal-scene {
    background-color: var(--van-gogh-blue);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.portal-header { text-align: center; margin-bottom: 30px; }

.bedroom-container {
    position: relative; width: 300px; height: 300px;
    background: #d2b48c; border: 5px solid #8b4513; /* ألوان خشبية */
    border-radius: 10px;
}

/* النافذة التفاعلية (البوابة) */
.window {
    position: absolute; top: 50px; left: 100px;
    width: 100px; height: 120px;
    background-color: var(--window-light);
    border: 4px solid #8b4513;
    cursor: pointer; overflow: hidden;
    transition: 0.3s;
}

.window:hover {
    box-shadow: 0 0 30px var(--star-gold);
    transform: scale(1.05);
}

.swirl-inside-window {
    width: 200%; height: 200%;
    position: absolute; top: -50%; left: -50%;
    background: repeating-radial-gradient(circle, rgba(245, 224, 80, 0.2) 0, transparent 20px);
    animation: rotate 10s linear infinite;
}

/* عناصر إضافية للغرفة */
.bed { position: absolute; bottom: 10px; right: 10px; width: 150px; height: 60px; background: #8b4513; border-radius: 5px; }
.painting-on-wall { position: absolute; top: 60px; right: 30px; width: 50px; height: 70px; background: #b22222; border: 2px solid black; }

/* 🌌 تصميم العالم الداخلي (Starry Night World) */
#inner-world { background-color: var(--night-indigo); }

.world-bg {
    position: fixed; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #112d4e 0%, #050b1a 100%);
    z-index: -2;
}

.vortex {
    position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
    background: repeating-radial-gradient(circle, rgba(245, 224, 80, 0.03) 0, rgba(5, 11, 26, 0.1) 80px);
    animation: rotate 150s linear infinite; z-index: -1;
}

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

.world-content {
    display: flex; flex-direction: column; align-items: center;
    padding: 50px 20px; z-index: 1;
}

section { width: 100%; max-width: 900px; text-align: center; margin-bottom: 80px; }

/* النجوم التفاعلية */
.star-field { position: relative; width: 100%; height: 40vh; margin-top: 20px; }

.star {
    position: absolute; background: white; border-radius: 50%;
    box-shadow: 0 0 10px white, 0 0 15px var(--star-gold);
    cursor: pointer; transition: 0.3s;
}

.star:hover { transform: scale(2); background: var(--star-gold); }

.quote-box, .reply-text {
    margin-top: 20px; padding: 20px;
    background: rgba(255, 255, 255, 0.05); border-radius: 15px;
    backdrop-filter: blur(5px); color: var(--star-gold); font-size: 1.4rem;
}

/* المعرض */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; margin-top: 30px;
}

.frame {
    background: #d2b48c; padding: 15px;
    border: 8px solid #8b4513; /* إطار خشبي */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transition: 0.3s;
}

.frame img { width: 100%; height: auto; filter: sepia(20%); }

.frame:hover { transform: rotate(3deg) scale(1.02); }

/* الأزرار */
.choice-btn, .back-btn {
    background: none; border: 1px solid var(--star-gold);
    color: var(--star-gold); padding: 12px 30px;
    border-radius: 30px; cursor: pointer;
    font-family: 'Cairo'; margin: 10px; transition: 0.4s;
}

.choice-btn:hover, .back-btn:hover { background: var(--star-gold); color: black; }