body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden;
    background-color: #0d0e15; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex; flex-direction: column; justify-content: flex-end;
    cursor: none; /* 隐藏系统默认鼠标 */
}

/* 星空背景 */
#stars {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 85% 70%, rgba(255,255,255,0.5), transparent);
    background-size: 400px 400px; z-index: 0;
}

#twinkling-stars {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.star {
    position: absolute; background-color: #fff; border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
    animation: twinkle infinite alternate ease-in-out;
}
@keyframes twinkle {
    0% { opacity: 0.1; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* 移除了 title-container 的相关样式 */

/* 手部指示箭头 */
#hand-cursor {
    position: absolute; width: 24px; height: 24px; top: 0; left: 0;
    pointer-events: none; z-index: 100; opacity: 0; 
    transition: opacity 0.3s ease, transform 0.1s ease-out;
    margin-left: -6px; margin-top: -6px; transform-origin: top left;
}
#hand-cursor svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
    fill: #fff; transition: all 0.2s ease;
}
#hand-cursor.pinching { transform: scale(0.8); }
#hand-cursor.pinching svg {
    fill: #ffd166; filter: drop-shadow(0 0 10px #ffd166);
}

/* ================= 建筑群容器 ================= */
#buildings-container {
    position: relative; width: 100%; height: 80vh; 
    display: flex; justify-content: center; align-items: flex-end;
    z-index: 1; padding-bottom: 0; gap: 2px;
}
#buildings-container::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px;
    background: linear-gradient(to top, #050508 0%, transparent 100%);
    z-index: 5; pointer-events: none;
}

/* 基础楼房样式 */
.building {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding-top: 20px;
    box-shadow: 
        inset 3px 0 8px rgba(255,255,255,0.08),
        inset -6px 0 15px rgba(0,0,0,0.6), 
        inset 0 -20px 30px rgba(0,0,0,0.7),
        8px 0 15px -5px rgba(0,0,0,0.9);
    overflow: hidden; 
    z-index: 2;
}
.building::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; z-index: 1;
}
.building::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.12) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
    z-index: 1; pointer-events: none;
}

/* 7栋楼配色与高度 */
.b1 { width: 14%; height: 55%; background: linear-gradient(180deg, #5c6b8c 0%, #2b3242 100%); }
.b2 { width: 14%; height: 65%; background: linear-gradient(180deg, #6f5b73 0%, #362b3a 100%); }
.b3 { width: 14%; height: 45%; background: linear-gradient(180deg, #4f6d73 0%, #243133 100%); }
.b4 { width: 14%; height: 85%; background: linear-gradient(180deg, #545c85 0%, #25283a 100%); }
.b5 { width: 14%; height: 60%; background: linear-gradient(180deg, #8a6271 0%, #402b33 100%); }
.b6 { width: 14%; height: 75%; background: linear-gradient(180deg, #4e6b61 0%, #23312c 100%); }
.b7 { width: 14%; height: 62%; background: linear-gradient(180deg, #8c5b4f 0%, #412924 100%); }

/* 黑色大门 */
.door {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 46px; 
    background: #0a0a0c; border-radius: 16px 16px 0 0; 
    border: 1px solid rgba(255,255,255,0.05); border-bottom: none;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.9), 0 -2px 5px rgba(0,0,0,0.6);
    z-index: 3; 
}

/* 窗户网格区域 */
.windows-wrapper {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    justify-items: center; align-items: center; 
    column-gap: 0px; 
    row-gap: 14px;
    width: 100%; 
    margin-top: 15px; 
    padding-bottom: 60px; 
    z-index: 2;
}

/* 细长拱形窗户 */
.window {
    width: 28px; 
    height: 54px; 
    background-color: #08080a; 
    border-radius: 14px 14px 0 0; 
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.95), 0 1px 2px rgba(255,255,255,0.05); 
    border: 2px solid rgba(0,0,0,0.8); 
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: relative;
    overflow: hidden; 
}

/* 内部十字窗格 */
.window::before {
    content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
    background-color: transparent; z-index: 5; transform: translateY(-50%);
    transition: background-color 0.3s;
}
.window::after {
    content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    background-color: transparent; z-index: 5; transform: translateX(-50%);
    transition: background-color 0.3s;
}

/* 点亮状态 */
.window.on {
    background-color: currentColor;
    box-shadow: 0 0 15px currentColor, inset 0 0 8px rgba(255,255,255,0.7);
    border-color: #000; 
    transform: scale(1.05);
}

/* 点亮后显示深灰十字窗格 */
.window.on::before, 
.window.on::after {
    background-color: #222;
}

/* 呼吸变暗动画 (去除透明，改亮度) */
.blinking { animation: blinkAnim 0.8s infinite alternate ease-in-out; }
@keyframes blinkAnim {
    0% { filter: brightness(0.2); transform: scale(0.98); }  
    100% { filter: brightness(1.2); transform: scale(1.05); } 
}

/* ================= UI 区域 ================= */
#video-container {
    position: absolute; top: 20px; right: 20px;
    width: 220px; height: 160px;
    border-radius: 12px; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.15);
    z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.input_video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

#gesture-hint {
    position: absolute; bottom: 30px; left: 30px;
    color: rgba(255,255,255,0.5); font-size: 13px; line-height: 2;
    z-index: 10; text-shadow: 0 2px 4px #000; pointer-events: none;
}
#gesture-hint b { color: rgba(255,255,255,0.9); font-weight: 500; }

.output_canvas { display: none; }