* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #1a1a25; font-family: -apple-system, sans-serif; cursor: crosshair; }

#webgl-container, #css3d-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#css3d-container { pointer-events: none; }

.screen-content { width: 1280px; height: 720px; background: linear-gradient(180deg, #1a1500, #0d0a00); display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; overflow: hidden; gap: 60px; backface-visibility: hidden; }
.screen-scanlines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,200,50,0.03) 2px, rgba(255,200,50,0.03) 4px); pointer-events: none; z-index: 100; }
.screen-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 100px rgba(255,200,50,0.15); pointer-events: none; z-index: 99; }

.content-left { display: flex; flex-direction: column; align-items: center; }
.big-404 { font-size: 140px; font-weight: 900; color: #ffc832; text-shadow: 0 0 30px rgba(255,200,50,0.8), 0 0 60px rgba(255,200,50,0.4); letter-spacing: -8px; line-height: 1; position: relative; font-family: 'Courier New', monospace; }
.big-404::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 200px; height: 2px; background: linear-gradient(90deg, transparent, #ffc832, transparent); box-shadow: 0 0 10px rgba(255,200,50,0.8); }

.content-right { display: flex; flex-direction: column; align-items: flex-start; max-width: 350px; }
.content-title { font-size: 32px; font-weight: 700; color: #ffc832; margin-bottom: 16px; font-family: 'Courier New', monospace; text-shadow: 0 0 15px rgba(255,200,50,0.5); }
.content-desc { font-size: 15px; color: #b89a4a; line-height: 1.8; margin-bottom: 32px; font-family: 'Courier New', monospace; }
.home-btn { padding: 16px 48px; background: transparent; color: #ffc832; border: 2px solid #ffc832; border-radius: 2px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: 'Courier New', monospace; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s; align-self: flex-start; box-shadow: 0 0 20px rgba(255,200,50,0.3); }
.home-btn:hover { background: #ffc832; color: #000; box-shadow: 0 0 30px rgba(255,200,50,0.6); }

.error-footer { position: absolute; bottom: 25px; right: 30px; font-size: 13px; color: #8a7a3a; font-family: 'Courier New', monospace; }
.error-footer span { color: #ffc832; font-weight: 700; }

#crosshair { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; pointer-events: none; display: none; }
body.is-locked #crosshair { display: block; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: #ffc832; }
#crosshair::before { top: 50%; left: 50%; width: 24px; height: 2px; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255,200,50,0.8), 0 0 12px rgba(255,200,50,0.3); }
#crosshair::after { top: 50%; left: 50%; width: 2px; height: 24px; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255,200,50,0.8), 0 0 12px rgba(255,200,50,0.3); }
#crosshair-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: #ffc832; box-shadow: 0 0 8px rgba(255,200,50,0.9); }
#crosshair-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border: 1px solid rgba(255,200,50,0.3); border-radius: 50%; }