/* --- БАЗОВЫЕ НАСТРОЙКИ --- */
body, html {
    margin: 0; padding: 0; height: 100%;
    background-color: #0d1117; 
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; 
    font-family: 'Segoe UI', Tahoma, sans-serif;
    user-select: none; 
    -webkit-user-select: none; 
}

/* --- КОНТЕЙНЕР КОМНАТЫ --- */
.room-container {
    position: relative; 
    width: 100vw; max-width: 177.78vh; 
    height: 56.25vw; max-height: 100vh;
    background-image: url('img/fon_stol.png'); 
    background-size: cover; background-position: center;
    box-shadow: 0 0 50px rgba(0,0,0,0.8); overflow: hidden;
    aspect-ratio: 16 / 9; 
}

/* --- АНИМАЦИИ И ЭФФЕКТЫ (Звезды, самолет, волны, гирлянда) --- */
.bright-star { position: absolute; background-color: white; border-radius: 50%; width: 3px; height: 3px; box-shadow: 0 0 6px 2px rgba(255,255,255,0.8); animation: twinkleBright 3s infinite alternate; pointer-events: none; }
.star { position: absolute; background-color: rgba(255,255,255,0.7); border-radius: 50%; width: 1.5px; height: 1.5px; animation: twinkle infinite alternate; pointer-events: none; }
.airplane-path { position: absolute; top: 18%; pointer-events: none; animation: flyby 45s linear infinite; }
.airplane-dot { width: 2px; height: 2px; background-color: rgba(255, 50, 50, 0.8); border-radius: 50%; box-shadow: 0 0 4px red; animation: airplaneBlink 1.5s infinite alternate; }
.wave-glare { position: absolute; height: 1.5px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; filter: blur(1px); pointer-events: none; animation: waveShore infinite ease-in; }
.light-bulb { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 210, 120, 0.9); animation: flicker infinite alternate; pointer-events: none; }

@keyframes twinkleBright { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }
@keyframes twinkle { 0% { opacity: 0.1; } 100% { opacity: 0.8; } }
@keyframes flyby { 0% { left: 20%; opacity: 0; } 10% { opacity: 1; } 40% { opacity: 1; } 50%, 100% { left: 60%; opacity: 0; } }
@keyframes airplaneBlink { 0% { opacity: 0.2; } 100% { opacity: 1; } }
@keyframes waveShore { 0% { width: 5px; opacity: 0; transform: rotate(8deg) translate(0, 0) scaleX(1); } 30% { opacity: 0.4; } 100% { width: 25px; opacity: 0; transform: rotate(7.8deg) translate(-40px, 20px) scaleX(1.5); } }
@keyframes flicker { 0% { opacity: 0.1; transform: scale(0.8); box-shadow: 0 0 2px 0px rgba(255, 180, 50, 0.2); } 100% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 12px 4px rgba(255, 180, 50, 0.8); } }

/* --- ИНТЕРАКТИВНЫЕ ЗОНЫ КОМНАТЫ --- */
.zone-notebook { position: absolute; top: 90%; left: 15%; width: 20%; cursor: pointer; }
.zone-notebook img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 0px transparent); transition: filter 0.3s ease; }
.zone-notebook:hover img { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)); }

#youtube-player { position: absolute; top: -9999px; opacity: 0; }

/* --- РАДИО И ПОЛЗУНОК --- */
.zone-radio { position: absolute; top: 6.8%; left: 86.2%; width: 10%; height: 12%; }
.radio-dial {
    position: absolute; top: 15%; right: -32%; width: 40%; aspect-ratio: 1 / 1; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer; transition: all 0.3s ease;
}
.radio-dial:hover { border: 2px solid #b36a7e; box-shadow: 0 0 25px rgba(179, 106, 126, 0.6); }
.radio-dial.active { background-color: rgba(179, 106, 126, 0.3); border: 2px solid #b36a7e; box-shadow: 0 0 15px #b36a7e; }

#volume-slider {
    position: absolute; bottom: 20%; left: 40.12%; width: 50%;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; outline: none;
}
#volume-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; background: rgba(0,0,0,0.5); border-radius: 2px; }
#volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #b36a7e; margin-top: -4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); transition: transform 0.1s; }
#volume-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
#volume-slider::-moz-range-track { width: 100%; height: 4px; background: rgba(0,0,0,0.5); border-radius: 2px; }
#volume-slider::-moz-range-thumb { height: 12px; width: 12px; border-radius: 50%; background: #b36a7e; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.5); }

/* --- МОДАЛЬНОЕ ОКНО ДНЕВНИКА --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.close-btn { position: absolute; top: 30px; right: 40px; font-size: 40px; color: white; background: none; border: none; cursor: pointer; transition: transform 0.2s; }
.close-btn:hover { transform: scale(1.2); }
.notebook-container { width: 800px; height: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); background: #2a2a2a; }

/* --- ПАНЕЛЬ ЗАКЛАДОК --- */
.bookmarks-panel { position: absolute; left: 5%; background: rgba(253, 246, 227, 0.95); padding: 20px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); border: 1px solid #ddd; }
.bookmarks-panel h3 { margin: 0 0 15px 0; color: #b36a7e; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 18px; border-bottom: 1px dashed #ccc; padding-bottom: 5px; }
.bookmarks-panel ul { list-style: none; padding: 0; margin: 0; }
.bookmarks-panel li { cursor: pointer; padding: 8px 0; color: #4a4a4a; font-family: 'Georgia', serif; font-size: 15px; transition: all 0.2s ease; }
.bookmarks-panel li:hover { color: #b36a7e; transform: translateX(5px); }

/* --- СТИЛИ СТРАНИЦ ДНЕВНИКА И КОНТЕНТА --- */
.page { background-color: #fdf6e3; border: 1px solid #ddd; padding: 34px 25px; box-sizing: border-box; background-image: linear-gradient(transparent 95%, #ccc 95%); background-size: 100% 30px; line-height: 30px; color: #4a4a4a; font-family: 'Georgia', 'Times New Roman', serif; font-size: 14px; }
.page h2 { margin-top: 0; margin-bottom: 10px; color: #2c3e50; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 20px; line-height: 1.2; }
.page p { margin-top: 0; margin-bottom: 15px; font-size: 15px; }

.polaroid { display: block; width: 75%; margin: 15px auto; background: #fff; padding: 10px 10px 40px 10px; box-shadow: 2px 4px 8px rgba(0,0,0,0.3); --tilt: -3deg; transform: rotate(var(--tilt)); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.polaroid:hover { transform: rotate(0deg) scale(1.05); box-shadow: 3px 6px 12px rgba(0,0,0,0.4); z-index: 10; }
.doodle { position: absolute; max-width: 45%; opacity: 0.85; mix-blend-mode: multiply; z-index: 5; pointer-events: none; }

.sticker-box { position: absolute; z-index: 6; --tilt: 0deg; transform: rotate(var(--tilt)); }
.sticker-box img { width: 100%; height: auto; display: block; filter: drop-shadow(2px 4px 5px rgba(0,0,0,0.3)); }
.sticker-text { position: absolute; z-index: 7; color: #333; line-height: 1.3; }

/* --- ЗАГЛУШКА ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ --- */
.mobile-stub { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #0d1117; color: #fdf6e3; z-index: 9999; justify-content: center; align-items: center; text-align: center; padding: 30px; box-sizing: border-box; font-size: 18px; line-height: 1.6; }

@media (max-width: 850px) {
    .room-container { display: none !important; }
    .mobile-stub { display: flex !important; }
}