/* 모든 요소 초기화 */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, html { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: #000; /* 이미지 로드 전 검은색 유지 */
    font-family: 'Segoe UI', sans-serif;
}

/* 1. 배경 이미지 설정 (가장 중요) */
.bg-img {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100vw !important; 
    height: 100vh !important;
    object-fit: cover !important; 
    z-index: -1; /* 다른 요소보다 뒤로 */
    filter: brightness(0.4); /* 글자가 잘 보이게 어둡게 */
    display: block !important; /* 화면에 무조건 표시 */
}

/* 2. 왼쪽 상단 볼륨 조절 */
.audio-controls {
    position: fixed; 
    top: 20px; 
    left: 20px; 
    z-index: 100;
    display: flex; 
    align-items: center; 
    background: rgba(0,0,0,0.6);
    padding: 10px 15px; 
    border-radius: 30px; 
    border: 1px solid rgba(255,255,255,0.1);
}

#play-btn { 
    background: none; 
    border: none; 
    color: white; 
    cursor: pointer; 
    margin-right: 10px; 
    font-size: 16px; 
}

#volume-slider { 
    width: 80px; 
    accent-color: white; 
    cursor: pointer; 
}

/* 3. 중앙 유리창 카드 디자인 */
.container { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.glass-card {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px; 
    padding: 40px; 
    width: 350px; 
    text-align: center; 
    color: white;
}

.avatar-wrapper { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 0 auto 15px; 
}

#discord-avatar { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 2px solid rgba(255,255,255,0.2); 
}

#status-dot {
    position: absolute; 
    bottom: 5px; 
    right: 5px; 
    width: 20px; 
    height: 20px;
    border-radius: 50%; 
    background: #43b581; 
    border: 3px solid #1a1a1a; 
}

#username { 
    font-size: 24px; 
    margin-bottom: 5px; 
}

.discord-box { 
    background: rgba(0,0,0,0.3); 
    padding: 15px; 
    border-radius: 15px; 
    margin: 20px 0; 
}

#discord-tag { 
    font-size: 14px; 
    opacity: 0.6; 
    margin-bottom: 5px; 
}

.roblox-btn {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    background: rgba(255,255,255,0.1); 
    color: white; 
    text-decoration: none;
    padding: 12px; 
    border-radius: 12px; 
    transition: 0.3s;
}

.roblox-btn:hover { 
    background: rgba(255,255,255,0.2); 
    transform: translateY(-2px); 
}

.footer { 
    margin-top: 20px; 
    font-size: 12px; 
    opacity: 0.4; 
}