:root { --neon: #ffaa00; --bg: #000; }
* { margin: 0; padding: 0; box-sizing: border-box; touch-action: none; user-select: none; font-family: 'Courier New', monospace; }
body, html { width: 100%; height: 100%; background-color: var(--bg); overflow: hidden; color: #fff; }

#webgl-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

.fullscreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 50; }
#intro { background: radial-gradient(circle, #111 0%, #000 100%); transition: opacity 0.5s; backdrop-filter: blur(10px); }

h1 { font-weight: 300; letter-spacing: 10px; color: var(--neon); margin-bottom: 20px; text-shadow: 0 0 20px rgba(255,170,0,0.4); text-align: center;}
p { color: #888; font-size: 0.85rem; text-align: center; max-width: 320px; line-height: 1.5; margin-bottom: 40px; }

button { background: rgba(0,0,0,0.5); border: 1px solid var(--neon); color: var(--neon); padding: 15px 30px; letter-spacing: 3px; cursor: pointer; outline: none; transition: 0.2s; font-weight: bold; backdrop-filter: blur(5px); }
button:active { background: var(--neon); color: #000; box-shadow: 0 0 20px var(--neon); }

#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; z-index: 5; pointer-events: none; transition: 0.2s; }
#crosshair::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background: rgba(255,255,255,0.5); transform: translate(-50%, -50%); }

#hud { position: absolute; top: 20px; left: 20px; z-index: 10; pointer-events: none; text-shadow: 0 0 5px #000; }
.hud-line { font-size: 0.8rem; margin-bottom: 8px; color: #aaa; letter-spacing: 2px; }
.highlight { color: #fff; font-weight: bold; font-size: 1.0rem; }
.data-tag { color: var(--neon); }

#instruction { position: absolute; top: 20px; right: 20px; z-index: 10; color: rgba(255,255,255,0.5); font-size: 0.7rem; text-align: right; max-width: 150px; pointer-events: none; }

#settings-toggle-btn { position: absolute; top: 20px; right: 20px; padding: 8px 12px; font-size: 0.7rem; border: 1px solid #555; background: rgba(0,0,0,0.7); z-index: 30; border-radius: 4px;}
#settings-panel { position: absolute; top: 60px; right: 20px; background: rgba(10, 10, 15, 0.9); border: 1px solid var(--neon); padding: 15px; border-radius: 8px; backdrop-filter: blur(8px); display: none; z-index: 30; flex-direction: column; gap: 10px;}
#settings-panel h3 { font-size: 0.8rem; color: var(--neon); margin-bottom: 5px; text-align: center; }
#settings-panel label { font-size: 0.75rem; color: #ddd; display: flex; align-items: center; gap: 8px; cursor: pointer; }

#controls-wrapper { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 20; display: none; width: 95%; max-width: 500px; }
.tc-grid { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; justify-content: center; }
.tc-btn { padding: 10px 5px; font-size: 0.75rem; border-radius: 4px; border: 1px solid #444; color: #fff; background: rgba(0,0,0,0.6); flex: 1 1 18%; text-align: center; }
.tc-btn.active { background: var(--neon); color: #000; border-color: var(--neon); box-shadow: 0 0 10px var(--neon); }

#glasses-btn { font-size: 0.85rem; padding: 12px 40px; border-color: #ff5500; color: #ff5500; border-radius: 4px; width: 100%; }
.glasses-active { background: #ff5500; color: #000 !important; box-shadow: 0 0 15px #ff5500; border-color: #ff5500; }

#real-walk-btn { font-size: 0.85rem; padding: 12px 40px; border-color: #00ffcc; color: #00ffcc; border-radius: 4px; width: 100%; }
.rw-active { background: #00ffcc; color: #000 !important; box-shadow: 0 0 15px #00ffcc; }

#zoom-container { position: absolute; right: 20px; top: 30%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 20; display: none; background: rgba(0,0,0,0.4); padding: 15px 10px; border-radius: 8px; backdrop-filter: blur(5px); border: 1px solid rgba(255,170,0,0.3); }
#zoom-container label { font-size: 0.6rem; color: var(--neon); letter-spacing: 2px; }
.slider-wrapper { height: 150px; display: flex; align-items: center; justify-content: center; width: 20px; }
#zoom-slider { -webkit-appearance: none; appearance: none; width: 150px; height: 8px; background: rgba(255,255,255,0.1); outline: none; border-radius: 4px; transform: rotate(-90deg); margin: 0; }
#zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--neon); cursor: pointer; }

.indicator { position: absolute; padding: 5px 10px; border-radius: 20px; font-size: 0.65rem; font-weight: bold; pointer-events: none; transition: opacity 0.3s ease; transform: translate(-50%, -50%); backdrop-filter: blur(4px); z-index: 15; opacity: 0; }
#sun-indicator { background: rgba(255, 170, 0, 0.1); border: 1px solid rgba(255, 170, 0, 0.4); color: #ffaa00; }
#moon-indicator { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.4); color: #aaaaaa; }
#cat-indicator { background: rgba(0, 255, 204, 0.1); border: 1px solid rgba(0, 255, 204, 0.4); color: #00ffcc; }