@import url('https://fonts.googleapis.com/css2?family=gg+sans:wght@400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Fallback if gg sans font doesn't load from local */
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; min-height: 100vh; background: #000; color: #dcddde; overflow: hidden; display: flex; justify-content: center; align-items: center; }

#enter-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; color: #fff; font-size: 1.5rem; letter-spacing: 2px; }
.loading { animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
.video-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; overflow: hidden; }
#video-bg { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.video-background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: -1; }
#snow { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; }

.container { position: relative; z-index: 1; width: 90%; max-width: 360px; }

/* Discord Card Glassmorphism */
.glass-card { background: rgba(17, 18, 20, 0.4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; position: relative; }
.glass-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); }

/* Banner */
.dc-banner { width: 100%; height: 120px; background-color: #2b2d31; background-size: cover; background-position: center; border-radius: 16px 16px 0 0; }

/* Header (Avatar + Badges) */
.dc-header { position: relative; padding: 0 16px; display: flex; justify-content: space-between; align-items: flex-start; height: 64px; }
.dc-avatar-wrapper { position: absolute; top: -60px; left: 16px; width: 120px; height: 120px; border-radius: 50%; background: rgba(17,18,20,0.8); padding: 8px; backdrop-filter: blur(10px); }
.dc-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Status */
.dc-status-indicator { position: absolute; bottom: 6px; right: 6px; width: 28px; height: 28px; background: #111214; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.dc-status-icon { width: 18px; height: 18px; border-radius: 50%; background: #80848e; }
.status-online .dc-status-icon { background: #23a559; box-shadow: 0 0 10px #23a559; }
.status-idle .dc-status-icon { background: #f0b232; box-shadow: 0 0 10px #f0b232;}
.status-dnd .dc-status-icon { background: #f23f42; box-shadow: 0 0 10px #f23f42;}

/* Badges */
.dc-badges { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 6px; border-radius: 8px; margin-top: 12px; margin-left: auto; border: 1px solid rgba(255,255,255,0.05); }
.dc-badge { width: 22px; height: 22px; object-fit: contain; }

/* Body */
.dc-body { background: rgba(17, 18, 20, 0.7); border-radius: 8px; margin: 0 16px 16px 16px; padding: 16px; border: 1px solid rgba(255,255,255,0.05); }

.dc-global-name { font-size: 1.25rem; font-weight: 700; color: #f2f3f5; margin-bottom: 2px; }
.dc-username { font-size: 0.875rem; font-weight: 500; color: #b5bac1; margin-bottom: 12px; }

.dc-custom-status { font-size: 0.875rem; color: #dbdee1; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.dc-custom-status img { width: 20px; height: 20px; }

.dc-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 12px 0; }

.dc-section h3 { font-size: 0.75rem; font-weight: 700; color: #b5bac1; margin-bottom: 8px; text-transform: uppercase; }
.dc-bio { font-size: 0.875rem; color: #dbdee1; line-height: 1.375; white-space: pre-wrap; }

/* Activity */
.dc-activity { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.dc-activity-icon { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.dc-activity-details { display: flex; flex-direction: column; font-size: 0.875rem; }
.dc-activity-details strong { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
.dc-activity-details p { color: #b5bac1; margin: 0; line-height: 1.2; }