ui_frontend/style.css

body {
    background: #000;
    color: #fff;
    font-family: 'Courier New', monospace;
    margin: 0;
    overflow: hidden;
    position: relative;
    height: 100vh;
}

/* 1. 终极影厅 CSS 样式 */
#shensist-logo { position: fixed; top: 20px; left: 20px; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #ff0000; box-shadow: 0 0 15px #ff0000; cursor: pointer; transition: 0.3s; z-index: 1000; overflow: hidden; }
#shensist-logo:hover { transform: scale(1.1); box-shadow: 0 0 25px #ff00ff; border-color: #ff00ff; }
#shensist-logo img { width: 100%; height: 100%; object-fit: cover; }

/* 5. 顶端虚空标题：中英双层架构 */
#header-container {
    position: absolute;
    top: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}
#main-title-cn {
    font-size: 3.2em;
    font-weight: 900;
    color: #fff;
    letter-spacing: 12px;
    text-shadow: 0 0 20px #ff0000;
    margin: 0;
    margin-bottom: 0;
    filter: drop-shadow(0 0 10px #000);
}
#sub-title-en {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #ff0000;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 5px; /* 紧贴大字下方 */
    opacity: 0.8;
}

/* 2. 电影厅观众席背景 (强化 3D 物理纵深) */
#cinema-hall {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 35%; /* 物理比例核心 */
    perspective: 1500px;
    background: #000;
    z-index: 10;
}
.seats-row {
    width: 140%;
    height: 40px;
    background: linear-gradient(to top, #050505, #151515);
    margin: 15px -20%;
    transform: rotateX(65deg); /* 💡 关键：没有人看不出这是影院 */
    border-top: 1px solid #222;
    box-shadow: 0 15px 40px #000;
    border-radius: 8px;
}

/* 大屏幕居中并增加荧光 (Bloom) */
#cinema-screen-container { position: fixed; top: 90px; width: 100%; height: 52%; display: flex; justify-content: center; align-items: center; z-index: 20; }
#cinema-screen {
    width: 80%;
    height: 90%;
    background: #050505;
    border: 3px solid #111;
    border-radius: 8px;
    box-shadow: 0 0 100px rgba(255, 0, 0, 0.25), /* 屏幕对环境的红漫反射 */
                inset 0 0 50px #000;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle, #1a0000 0%, #000 80%);
}

#actors-matrix { display: flex; justify-content: space-around; align-items: center; height: 60%; }
.actor { transition: 0.4s; }
.actor img { width: 260px; height: 260px; border-radius: 50%; border: 3px solid #1a1a1a; filter: grayscale(100%) opacity(0.3); transition: 0.5s; object-fit: cover; }
.actor.active img { filter: grayscale(0%) opacity(1) drop-shadow(0 0 20px #ff0000); transform: scale(1.05); }
#right.active img { filter: grayscale(0%) opacity(1) drop-shadow(0 0 20px #ff00ff); }

/* 字幕：加大电影质感 */
#subtitle { position: absolute; bottom: 20px; width: 80%; left: 10%; text-align: center; font-size: 2.2em; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; z-index: 30; }

/* 底部控制台：上移并压紧 */
#director-console {
    position: fixed;
    bottom: 75px;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.8));
}

.mode-selector { display: flex; justify-content: center; gap: 20px; margin-bottom: 2px; }
.mode-btn { padding: 4px 12px; background: #111; border: 1px solid #333; color: #666; cursor: pointer; transition: 0.3s; border-radius: 4px; font-size: 0.8em; font-family: 'Courier New', monospace; }
.mode-btn.active#btn-normal { color: #00f2ff; border-color: #00f2ff; box-shadow: 0 0 10px #00f2ff; }
.mode-btn.active#btn-factory { color: #ff0000; border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }

#director-params { 
    display: none; 
    opacity: 0; 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
    gap: 20px; 
    padding: 12px 25px; 
    background: rgba(10,10,10,0.8); 
    backdrop-filter: blur(10px);
    border: 1px solid #333; 
    border-radius: 8px; 
    align-items: center; 
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.1);
}
#director-params.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
.param-item { display: flex; align-items: center; gap: 12px; color: #eee; font-size: 0.9em; }
#model-select, #user-api-key { 
    background: #000; 
    border: 1px solid #444; 
    color: #ff0000; 
    padding: 8px 12px; 
    font-family: 'Courier New', monospace; 
    outline: none; 
    border-radius: 4px;
    transition: 0.3s;
}
#model-select:focus, #user-api-key:focus {
    border-color: #ff0000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}
#user-api-key { width: 250px; }

.input-group { display: flex; justify-content: center; gap: 10px; }
#input-topic { width: 400px; padding: 10px; background: #111; border: 1px solid #ff0000; color: #0f0; text-align: center; font-family: 'Courier New', monospace; }
#action-btn { background: #ff0000; color: #fff; font-weight: bold; padding: 10px 30px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
#action-btn:hover { background: #b30000; transform: scale(1.05); }
#action-btn:disabled { background: #333; cursor: not-allowed; }

/* 底部版权与版本号 */
footer { position: fixed; bottom: 0; width: 100%; text-align: center; color: #333; font-size: 0.8em; padding: 10px; background: rgba(0,0,0,0.9); z-index: 1000; border-top: 1px solid #111;}
footer p { margin: 0; }
footer a { color: #333; text-decoration: none; }
footer a:hover { color: #ff0000; }