:root{--gold: #FFD700;--gold-dim: #8a7020;--glass-bg: rgba(10, 10, 10, .65);--glass-border: rgba(255, 215, 0, .3);--text-main: #f0f0f0}body{margin:0;overflow:hidden;background-color:#000;font-family:Cinzel,serif;color:var(--text-main);-webkit-user-select:none;user-select:none}#canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}#ui-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;opacity:0;transition:opacity 2s ease}#loader{position:fixed;bottom:10%;left:0;width:100%;text-align:center;z-index:100;pointer-events:none;transition:opacity 1s ease}#loader p{color:var(--gold);font-size:1.2rem;letter-spacing:4px;text-shadow:0 0 15px var(--gold);animation:textPulse 2s infinite;margin:0}@keyframes textPulse{0%{opacity:.3;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}to{opacity:.3;transform:scale(.95)}}.spinner{display:none}.hud-element{pointer-events:auto;position:absolute;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:0 4px 30px #00000080;color:var(--gold);text-transform:uppercase;letter-spacing:2px;transition:all .3s ease}#title-overlay{position:absolute;top:15%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity 2s ease;text-shadow:0 0 30px rgba(255,215,0,.8);z-index:5;pointer-events:none}#title-overlay h1{font-family:Great Vibes,cursive;font-size:6rem;color:var(--gold);margin:0;line-height:1}#controls{bottom:30px;left:30px;display:flex;gap:15px;padding:20px;border-radius:4px}#cam-preview{bottom:30px;right:30px;width:240px;height:180px;border:2px solid var(--gold);border-radius:4px;overflow:hidden;background:#000}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}button.lux-btn{background:#ffffff0d;border:1px solid var(--gold);color:var(--gold);padding:10px 20px;font-family:Cinzel,serif;cursor:pointer;transition:.3s;text-transform:uppercase;font-size:12px}button.lux-btn:hover{background:var(--gold);color:#000;box-shadow:0 0 20px var(--gold)}#photo-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:800px;height:60%;background:#000000f2;border:1px solid var(--gold);z-index:50;display:none;flex-direction:column;padding:20px}#photo-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;overflow-y:auto;margin-top:20px}.photo-item{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--gold-dim);background-size:cover;background-position:center}.delete-btn{position:absolute;top:-5px;right:-5px;background:#800;color:#fff;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}input[type=file]{display:none}#gesture-status{position:absolute;top:30px;left:50%;transform:translate(-50%);font-size:14px;color:#ffffff80;text-align:center}#gesture-status span{color:var(--gold);font-weight:700;text-shadow:0 0 10px var(--gold-dim)}#top-controls{position:absolute;top:30px;right:30px;pointer-events:auto}.status-dot{position:absolute;top:10px;right:10px;width:10px;height:10px;background:red;border-radius:50%;box-shadow:0 0 5px red}.status-dot.active{background:#0f0;box-shadow:0 0 8px #0f0}@media (max-width:600px){#cam-preview{width:100px;height:75px;bottom:100px;right:15px;border-width:1px}#cam-preview div{font-size:8px!important}.status-dot{width:6px;height:6px;top:5px;right:5px}}
