body { margin: 0; overflow: hidden; background-color: #0b0e14; color: #fff; font-family: 'Times New Roman', serif; user-select: none; }
#canvas-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }

/* 顶部：0N1 按钮（青字红框） */
.top-symphony-btn {
    position: absolute; 
    top: 15px; 
    left: 50%; 
    transform: translateX(-50%);
    z-index: 999; 
    padding: 10px 40px;
    background: rgba(122, 26, 26, 0.1); 
    border: 2px solid #7a1a1a;
    border-radius: 20px; 
    color: #00f2fe;
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    letter-spacing: 3px;
    box-shadow: 0 0 15px rgba(122, 26, 26, 0.4); 
    transition: all 0.3s;
}
.top-symphony-btn:hover, .top-symphony-btn:active {
    background: rgba(122, 26, 26, 0.4); 
    color: #aaffee;
    box-shadow: 0 0 30px rgba(122, 26, 26, 0.8);
}

/* 底部：Paper 按钮（红字青框，独立居中） */
.bottom-paper-btn {
    position: absolute; 
    bottom: 25px; 
    left: 50%; 
    transform: translateX(-50%);
    z-index: 999; 
    padding: 10px 40px;
    background: rgba(0, 255, 204, 0.1); 
    border: 2px solid #00ffcc;
    border-radius: 20px; 
    color: #7a1a1a;
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    letter-spacing: 2px;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.4); 
    transition: all 0.3s;
}
.bottom-paper-btn:hover, .bottom-paper-btn:active {
    background: rgba(0, 255, 204, 0.3); 
    color: #aa2222;
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.8);
}

/* 四角按钮 */
.corner-btn { position: absolute; width: 20vw; height: 20vw; min-width: 80px; min-height: 80px; z-index: 5; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; }
.corner-btn:hover, .corner-btn:active { opacity: 1; }
.top-left { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(135deg, #7a1a1a, transparent); }
.top-right { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient(225deg, #00f2fe, transparent); }
.bottom-left { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); background: linear-gradient(45deg, #00f2fe, transparent); }
.bottom-right { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: linear-gradient(315deg, #7a1a1a, transparent); }

.center-click { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; z-index: 1000; cursor: pointer; background: transparent; }

/* 弹窗通用样式 */
.formula-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; max-width: 500px; max-height: 80vh; overflow-y: auto; background: rgba(11, 14, 20, 0.95); border: 1px solid #7a1a1a; border-radius: 12px; padding: 25px; z-index: 2000; box-shadow: 0 0 40px rgba(122, 26, 26, 0.4); display: none; scrollbar-width: thin; }
.formula-popup.active { display: block; animation: fadeIn 0.3s ease-out; }
.formula-popup .close-btn { position: absolute; top: 10px; right: 15px; color: #ff1a1a; font-size: 32px; cursor: pointer; font-weight: bold; z-index: 3000; background: transparent; border: none; }
.formula-item { font-size: 15px; color: #ccc; margin-bottom: 18px; line-height: 1.6; border-left: 2px solid #00f2fe; padding-left: 10px; }
.formula-item.red { border-left-color: #7a1a1a; }

#paper-modal { max-width: 700px; }
#paper-modal h1 { font-size: 22px; color: #00ffcc; text-align: center; margin-bottom: 5px; font-weight: bold; }
#paper-modal h2 { font-size: 16px; color: #7a1a1a; margin-top: 25px; border-bottom: 1px dashed #7a1a1a; padding-bottom: 5px; }
#paper-modal p { font-size: 15px; color: #aaffee; line-height: 1.8; text-indent: 2em; margin-bottom: 15px; }
#paper-modal .highlight { color: #7a1a1a; font-style: italic; }

#easteregg-modal { max-width: 600px; text-align: center; padding: 15px; }
#easteregg-modal svg { width: 100%; height: auto; display: block; margin: 0 auto; }

@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }