* { border-radius: 0px !important; outline: none; box-sizing: border-box; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--main-purple, #9d00ff); opacity: 0.4; }
:root { --main-purple: #9d00ff; --main-pink: #ff00bd; --main-red: #ff003c; --main-blue: #3b82f6; --hud-glow: 0 0 15px rgba(0,0,0,1), 0 0 20px rgba(157, 0, 255, 0.6); }
body { overflow: hidden; background-color: #000; font-family: "Orbitron", "JetBrains Mono", sans-serif; color: #fff; font-size: 14px; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; perspective: 2000px; }
#license-guard { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2000000; }
.login-card { width: 90%; max-width: 520px; padding: 40px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(20px); }
#stage-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
#bg-layer { position: absolute; inset: 0; z-index: 5; background-size: cover; background-position: center; transition: 1s; background-color: #050505; }
#bg-overlay { position: absolute; inset: 0; z-index: 6; background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.85) 100%); pointer-events: none; }
#video-frame { position: relative; z-index: 10; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; display: flex; align-items: center; justify-content: center; background: transparent !important; overflow: hidden; box-shadow: 0 0 150px rgba(0,0,0,1); transition: transform 0.1s linear; transform-style: preserve-3d; will-change: transform; }
#main-video { width: 100%; height: 100%; display: block; z-index: 11; transition: filter 0.3s; object-fit: contain; background: transparent; cursor: pointer; }
.overlay-canvas, #game-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 20; width: 100%; height: 100%; }
#game-canvas { z-index: 100; }
#draw-canvas { position: absolute; inset: 0; z-index: 600; width: 100%; height: 100%; cursor: crosshair; }

/* 摄像头拖拽容器与控制柄 */
#webcam-container { 
    position: absolute; top: 20px; right: 20px; width: 320px; height: 180px; 
    z-index: 900; /* 把层级提高到900，超过画板的600 */
    border: 2px solid var(--main-purple); box-shadow: 0 0 15px var(--main-purple); 
    background: #000; display: none; overflow: hidden; 
    resize: both; 
    transition: opacity 0.3s;
}
#webcam-drag-handle { 
    width: 100%; height: 25px; background: rgba(157, 0, 255, 0.6); cursor: move; 
    position: absolute; top: 0; left: 0; 
    z-index: 901; /* 拖拽条层级901 */
    display: flex; align-items: center; justify-content: center;
}
#webcam-drag-handle::before {
    content: "|| DRAG TO MOVE ||"; font-size: 8px; color: #fff; letter-spacing: 2px;
}
#webcam-video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 900; pointer-events: none; }

#video-controls-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); z-index: 700; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 25px 15px; opacity: 0; transition: 0.5s; pointer-events: auto; }
#video-controls-overlay.visible { opacity: 1; }
.v-progress-container { width: 100%; height: 4px; background: rgba(255,255,255,0.1); cursor: pointer; margin-bottom: 12px; position: relative; }
.v-prog-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--main-purple), var(--main-pink)); box-shadow: 0 0 15px var(--main-purple); transition: width 0.1s linear; }
.v-seek-side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 701; opacity: 0; transition: 0.4s; cursor: pointer; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); padding: 25px 12px; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.v-seek-side.visible { opacity: 0.7; }
.v-seek-left { left: 10px; } .v-seek-right { right: 10px; }
.hud-panel { position: absolute; z-index: 800; pointer-events: none; text-shadow: var(--hud-glow); transition: 0.3s; }
#hud-top-left { top: 30px; left: 30px; } #hud-top-right { top: 30px; right: 30px; text-align: right; } #hud-bottom-left { bottom: 40px; left: 30px; } #hud-bottom-right { bottom: 40px; right: 30px; text-align: right; }
.hud-label { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 2px; text-transform: uppercase; font-weight: 800; margin-bottom: 2px; }
.hud-value-box { background: rgba(0,0,0,0.2); padding: 6px 12px; border-left: 2px solid var(--main-purple); display: flex; flex-direction: column; backdrop-filter: blur(10px); }
.dynamic-val { color: var(--main-pink); font-family: 'Orbitron'; font-weight: 900; }
.side-panel { position: fixed; top: 0; height: 100%; width: 420px; background: rgba(12, 6, 18, 0.98); backdrop-filter: blur(40px); z-index: 20000; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(0,0,0,0.7); }
#floating-panel { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); transform: translateX(-100%); } #floating-panel.active { transform: translateX(0); }
#draw-panel { right: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); transform: translateX(100%); } #draw-panel.active { transform: translateX(0); }
.panel-toggle { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.05); width: 30px; height: 140px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.3s; z-index: 20001; }
#panel-toggle { left: 100%; border-left: none; } #draw-toggle { right: 100%; border-right: none; }
.setting-group { padding: 18px 25px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.u-label { font-size: 11px; color: var(--main-purple); font-weight: 900; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 18px; display: block; border-left: 2px solid var(--main-purple); padding-left: 12px; }
.u-input { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15) !important; padding: 12px; color: #fff; font-size: 11px; width: 100%; font-family: 'JetBrains Mono'; transition: 0.3s; margin-bottom: 8px; }
.u-select { background: #0d0615 !important; border: 1px solid rgba(255,255,255,0.15) !important; padding: 10px !important; color: #fff !important; width: 100% !important; font-size: 11px !important; margin-bottom: 12px !important; cursor: pointer !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 15px center !important; }
.slider-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; margin-bottom: 8px; }
.slider-row span.label-text { font-size: 11px; color: #bbb; text-transform: uppercase; width: 110px; flex-shrink: 0; font-weight: 800; }
.val-display { font-family: 'JetBrains Mono'; color: var(--main-purple); width: 60px; text-align: right; font-weight: 800; font-size: 13px; text-shadow: 0 0 8px rgba(255,255,255,0.3); }
input[type=range] { flex: 1; -webkit-appearance: none; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255,255,255,0.1); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; background: #fff; border: 2px solid var(--main-purple); margin-top: -7px; box-shadow: 0 0 10px var(--main-purple); }
.defense-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.defense-btn { padding: 12px 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 10px; display: flex; justify-content: space-between; align-items: center; color: #777; transition: 0.3s; font-weight: 900; }
.defense-btn.active { border-color: var(--main-purple); color: #fff; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 10px rgba(255,255,255,0.1); }
.ceremony-overlay { position: fixed; inset: 0; z-index: 50000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: 1.5s; pointer-events: none; }
.ceremony-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
#ceremony-bg-takeover { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; transition: 1s; opacity: 0.85; display: none; }
.ceremony-overlay.active #ceremony-bg-takeover { display: block; }
#ceremony-dimmer { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle, transparent 0%, rgba(0,0,0,0.6) 100%); }
.ceremony-content { position: relative; z-index: 10; text-align: center; width: 550px; }
#ceremony-title-display { font-size: 1.2rem; letter-spacing: 0.5em; font-weight: 500; color: rgba(255,255,255,0.9); margin-bottom: 30px; text-transform: uppercase; font-family: "JetBrains Mono"; text-shadow: 0 0 15px rgba(255,255,255,0.4); }
#ceremony-countdown-val { font-size: 5.5rem; font-weight: 900; line-height: 1; font-family: "Orbitron"; letter-spacing: 0.2em; color: #fff; margin-bottom: 35px; text-shadow: 0 0 30px var(--main-purple); transition: transform 0.1s; }
.progress-game-container { width: 100%; height: 2px; background: rgba(255,255,255,0.1); margin-top: 20px; position: relative; overflow: hidden; }
#ceremony-progress-fill { height: 100%; width: 0%; background: var(--main-purple); box-shadow: 0 0 15px var(--main-purple); transition: width 0.3s ease; }
.loading-pct { font-family: 'JetBrains Mono'; font-size: 28px; color: var(--main-purple); letter-spacing: 2px; font-weight: 800; display: block; margin-bottom: 12px; text-shadow: 0 0 10px var(--main-purple); }
#ad-window { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: 45vw; max-width: 1080px; max-height: 607.5px; z-index: 55000; background: #000; border: 1px solid rgba(255,255,255,0.1); display: none; box-shadow: 0 0 100px rgba(0,0,0,1); }
#ad-window.active { display: block; } #ad-video-element { width: 100%; height: 100%; object-fit: cover; }
.ad-border-progress { position: absolute; inset: -4px; pointer-events: none; } .ad-border-progress svg { width: 100%; height: 100%; }
.ad-border-progress rect { fill: none; stroke: var(--main-purple); stroke-width: 4; stroke-dasharray: 3125; stroke-dashoffset: 3125; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 8px var(--main-purple)); }
.skip-btn-main { position: absolute; top: 40px; right: 40px; z-index: 60000; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.4); color: #fff; padding: 10px 24px; font-family: "Orbitron"; letter-spacing: 3px; font-size: 11px; cursor: pointer; transition: 0.3s; pointer-events: auto; }
#media-modal, #info-modal { position: fixed; inset: 0; z-index: 1000001; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(8px); }
#media-modal.visible, #info-modal.visible { display: flex; }
#info-modal { z-index: 2000001; background: rgba(0,0,0,0.8); }
.vault-window { width: 95%; max-width: 1200px; height: 80vh; background: rgba(12, 6, 18, 0.95); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 50px 100px rgba(0,0,0,0.8); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.vault-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 15px; height: 100%; width: 100%; }
@media (min-width: 1024px) { .vault-grid { grid-template-columns: repeat(5, 1fr) !important; } }
.vault-col { display: flex; flex-direction: column; background: rgba(255,255,255,0.02); padding: 15px; border: 1px solid rgba(255,255,255,0.08); height: 100%; overflow: hidden; }
.asset-list { flex: 1; overflow-y: auto; padding-right: 5px; }
.asset-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.2); margin-bottom: 5px; white-space: nowrap; overflow: hidden; transition: 0.2s; cursor: pointer; }
.asset-item.dragging { opacity: 0.4; }
.asset-name { flex: 1; font-size: 11px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.asset-name.is-active { color: var(--main-red) !important; text-shadow: 0 0 10px var(--main-red); font-weight: 900; }
.action-ico { font-size: 18px !important; cursor: pointer; opacity: 0.4; color: #fff; transition: 0.2s; }
.action-ico:hover { opacity: 1; transform: scale(1.2); } .action-ico.active { color: var(--main-purple); opacity: 1; }
#global-spectrum { position: fixed; bottom: 0; left: 0; width: 100vw; height: 120px; z-index: 60000; pointer-events: none; opacity: 0.85; }
.color-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.color-node { height: 35px; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); transition: 0.2s; position: relative; }
.color-node:hover { transform: scale(1.05); border-color: #fff; }
.color-node.active::after { content: ""; position: absolute; inset: 0; border: 2px solid #fff; box-shadow: 0 0 10px #fff; }
#toast-notice { border-radius: 0px !important; }