* { margin:0; padding:0; box-sizing:border-box; }
html, body { 
  width:100%; height:100%; overflow:hidden; 
  background:#0a0a14; color:#c8d6e5; 
  font-family:'Share Tech Mono', monospace;
}

#game-wrapper { position:relative; width:100vw; height:100vh; overflow:hidden; }
#canvas { display:block; width:100%; height:100%; background:#0d0d1a; }
#ui-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }

footer { 
  position:fixed; bottom:0; left:0; width:100%; text-align:center; 
  padding:4px 0; font-size:11px; color:#555; background:rgba(10,10,20,0.9);
  z-index:1000;
}
footer a { color:#e94560; text-decoration:none; }
footer a:hover { text-decoration:underline; }

.hidden { display:none!important; }

/* Title Screen */
#title-screen {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  z-index:100; background:#0a0a14;
}
.title-bg-anim {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(ellipse at 50% 120%, #1a0a0a 0%, #0a0a14 70%);
  overflow:hidden;
}
.title-bg-anim::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,0,0.03) 2px, rgba(255,0,0,0.03) 4px);
  animation: scanlines 0.1s linear infinite;
  pointer-events:none;
}
@keyframes scanlines { 0%{transform:translateY(0)} 100%{transform:translateY(4px)} }

.title-content { position:relative; text-align:center; z-index:2; }
.title-text {
  font-family:'Orbitron', sans-serif; font-size:clamp(32px,8vw,72px); font-weight:900;
  color:#e94560; text-shadow:0 0 20px #e94560, 0 0 60px rgba(233,69,96,0.5);
  animation: glitch 3s infinite;
  letter-spacing:4px;
}
@keyframes glitch {
  0%,90%,100% { text-shadow:0 0 20px #e94560, 0 0 60px rgba(233,69,96,0.5); transform:translate(0); }
  91% { text-shadow:-3px 0 #00ff88, 3px 0 #0088ff; transform:translate(2px,-1px); }
  93% { text-shadow:3px 0 #00ff88, -3px 0 #0088ff; transform:translate(-2px,1px); }
  95% { text-shadow:-1px 0 #e94560, 1px 0 #e94560; transform:translate(0); }
}
.subtitle { 
  font-size:clamp(12px,2.5vw,20px); color:#8899aa; margin-top:8px; 
  animation: flicker 4s infinite; letter-spacing:2px;
}
@keyframes flicker {
  0%,100% { opacity:1; } 50% { opacity:0.7; } 52% { opacity:1; } 54% { opacity:0.6; } 56% { opacity:1; }
}

.menu-buttons { display:flex; flex-direction:column; gap:12px; margin-top:40px; align-items:center; }
.menu-btn {
  font-family:'Share Tech Mono', monospace; font-size:16px;
  padding:12px 32px; border:2px solid #333; border-radius:4px;
  background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
  color:#c8d6e5; cursor:pointer; position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.5);
  transition: all 0.15s; display:flex; align-items:center; gap:10px;
  min-width:200px; justify-content:center; pointer-events:all;
}
.menu-btn:hover { 
  background: linear-gradient(180deg, #3a3a5e 0%, #2a2a4e 100%); 
  border-color:#e94560; transform:translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 12px rgba(0,0,0,0.6), 0 0 15px rgba(233,69,96,0.2);
}
.menu-btn:active { transform:translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }

.led { 
  width:8px; height:8px; border-radius:50%; display:inline-block; 
  box-shadow: 0 0 6px currentColor;
}
.led.green { background:#00ff88; color:#00ff88; }
.led.yellow { background:#ffaa00; color:#ffaa00; }
.led.pink { background:#ff66aa; color:#ff66aa; }
.led.red-led { background:#e94560; color:#e94560; }

.title-bottom-btns { margin-top:24px; display:flex; gap:16px; justify-content:center; }
.icon-btn {
  font-size:24px; background:rgba(30,30,50,0.8); border:1px solid #333;
  border-radius:50%; width:48px; height:48px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all 0.2s; pointer-events:all;
}
.icon-btn:hover { border-color:#e94560; background:rgba(233,69,96,0.15); transform:scale(1.1); }

/* Modal */
.modal {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(5,5,15,0.85); display:flex; align-items:center; justify-content:center;
  z-index:200; backdrop-filter:blur(4px);
}
.modal-content {
  background: linear-gradient(180deg, #1a1a2e 0%, #12121f 100%);
  border:1px solid #333; border-radius:8px; padding:24px;
  max-width:90vw; max-height:85vh; overflow-y:auto;
  box-shadow: 0 0 40px rgba(0,0,0,0.8), 0 0 20px rgba(233,69,96,0.1);
}
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header h2 { font-family:'Orbitron', sans-serif; color:#e94560; font-size:20px; }
.close-btn {
  background:none; border:1px solid #444; color:#888; width:32px; height:32px;
  border-radius:4px; cursor:pointer; font-size:16px; transition: all 0.2s;
}
.close-btn:hover { border-color:#e94560; color:#e94560; }

/* Settings */
.settings-panel { width:500px; }
.settings-tabs, .script-tabs { display:flex; gap:4px; margin-bottom:16px; }
.stab {
  font-family:'Share Tech Mono', monospace; padding:8px 16px; background:#111; 
  border:1px solid #333; border-bottom:none; color:#888; cursor:pointer;
  font-size:12px; border-radius:4px 4px 0 0; transition: all 0.2s;
}
.stab.active { background:#1a1a2e; color:#e94560; border-color:#e94560; }
.stab:hover { color:#c8d6e5; }

.settings-body { min-height:200px; }
.setting-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid #1a1a2e;
}
.setting-row label { font-size:13px; color:#8899aa; }
.setting-row input[type="range"] { width:120px; accent-color:#e94560; }
.setting-row select, .setting-row input[type="checkbox"] { accent-color:#e94560; }
select {
  font-family:'Share Tech Mono', monospace; background:#111; color:#c8d6e5;
  border:1px solid #333; padding:4px 8px; border-radius:4px;
}
.modal-footer { margin-top:16px; text-align:center; }

/* Script Console */
.script-panel { width:700px; max-width:95vw; }
.script-body { display:flex; flex-direction:column; gap:8px; min-height:300px; }
.editor-area { display:flex; background:#0a0a0f; border:1px solid #1a3a1a; border-radius:4px; flex:1; min-height:180px; }
#line-numbers {
  width:36px; padding:8px 4px; text-align:right; color:#3a5a3a; font-size:12px;
  border-right:1px solid #1a3a1a; user-select:none; line-height:1.5; overflow:hidden;
}
#code-editor {
  flex:1; background:transparent; border:none; color:#00ff88; font-family:'Share Tech Mono', monospace;
  font-size:13px; padding:8px; resize:none; outline:none; line-height:1.5;
  min-height:160px;
}
#code-editor::placeholder { color:#1a4a1a; }
#console-output {
  background:#050510; border:1px solid #222; border-radius:4px;
  padding:8px; min-height:80px; max-height:120px; overflow-y:auto; font-size:12px;
}
.console-line { margin:2px 0; }
.console-line.system { color:#666; }
.console-line.success { color:#00ff88; }
.console-line.error { color:#e94560; }
.console-line.info { color:#4488ff; }

.script-toolbar { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.tool-btn {
  font-family:'Share Tech Mono', monospace; padding:6px 14px; background:#1a1a2e;
  border:1px solid #333; color:#c8d6e5; cursor:pointer; border-radius:3px;
  font-size:12px; transition: all 0.15s;
}
.tool-btn:hover { border-color:#e94560; }
.tool-btn.green { border-color:#00ff88; color:#00ff88; }
.tool-btn.green:hover { background:rgba(0,255,136,0.1); }
.tool-btn.red { border-color:#e94560; color:#e94560; }
.tool-btn.red:hover { background:rgba(233,69,96,0.1); }

/* AI Chat */
#ai-chat { flex:1; min-height:200px; max-height:300px; overflow-y:auto; padding:8px; background:#0a0a0f; border:1px solid #222; border-radius:4px; }
.ai-msg { margin:8px 0; padding:8px; border-radius:6px; font-size:13px; }
.ai-msg.user { background:#1a1a3e; text-align:right; }
.ai-msg.assistant { background:#0a1a0a; border-left:3px solid #00ff88; }
.ai-msg .code-block { background:#050510; padding:8px; border-radius:4px; margin:6px 0; font-size:12px; color:#00ff88; white-space:pre-wrap; }
.ai-msg button { margin:4px 2px; }
.ai-input-row { display:flex; gap:6px; margin-top:8px; }
#ai-input { 
  flex:1; font-family:'Share Tech Mono', monospace; background:#111; border:1px solid #333; 
  color:#c8d6e5; padding:8px; border-radius:4px; font-size:13px; outline:none; 
}
#ai-input:focus { border-color:#00ff88; }

/* HUD */
#hud { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:50; padding:12px; }
#hud-left { position:absolute; top:12px; left:12px; }
.bar-container { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.bar-label { font-size:10px; color:#888; width:30px; font-weight:bold; }
.bar-bg { width:140px; height:14px; background:#111; border:1px solid #333; border-radius:2px; overflow:hidden; }
.bar-fill { height:100%; transition: width 0.3s; border-radius:1px; }
.bar-fill.health { background: linear-gradient(90deg, #e94560, #ff6b6b); }
.bar-fill.stamina { background: linear-gradient(90deg, #2266cc, #44aaff); }
#alert-level { display:flex; align-items:center; gap:6px; margin-top:4px; }
.alert-meter { width:100px; height:10px; background:#111; border:1px solid #333; border-radius:2px; overflow:hidden; }
.alert-fill-bar { height:100%; width:0%; background:#00ff88; transition: all 0.5s; }
#alert-text { font-size:10px; color:#00ff88; }

#hud-top { position:absolute; top:12px; left:50%; transform:translateX(-50%); text-align:center; }
#timer { font-family:'Orbitron', sans-serif; font-size:20px; color:#c8d6e5; text-shadow:0 0 10px rgba(200,214,229,0.3); }
#alarm-status { 
  font-size:14px; color:#e94560; font-weight:bold; 
  animation: alarm-blink 0.5s infinite; margin-top:4px;
}
@keyframes alarm-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

#hud-right { position:absolute; top:12px; right:12px; }
#minimap { 
  background:#0a0a14; border:2px solid #333; border-radius:4px; 
  box-shadow: 0 0 10px rgba(0,0,0,0.5); 
}
#keycards-held { margin-top:6px; display:flex; gap:4px; justify-content:flex-end; }
.keycard-icon { width:20px; height:14px; border-radius:2px; border:1px solid rgba(255,255,255,0.3); }

#fps-counter { 
  position:absolute; bottom:24px; left:12px; font-size:11px; color:#555; z-index:60; 
}

/* Sandbox Toolbar */
#sandbox-toolbar {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:60; pointer-events:all;
  background: rgba(15,15,30,0.95); border:1px solid #333; border-radius:8px;
  padding:8px 12px; display:flex; flex-direction:column; gap:8px; align-items:center;
}
.sandbox-tools { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.stool {
  width:36px; height:36px; border:1px solid #333; background:#1a1a2e;
  border-radius:4px; cursor:pointer; font-size:16px; display:flex;
  align-items:center; justify-content:center; transition: all 0.15s;
}
.stool.active { border-color:#e94560; background:#2a1a2e; box-shadow: 0 0 8px rgba(233,69,96,0.3); }
.stool:hover { border-color:#888; }
.sandbox-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.sandbox-actions .menu-btn { padding:6px 12px; font-size:12px; min-width:auto; }

/* Game Over / Win */
.gameover-panel, .win-panel, .pause-panel { text-align:center; min-width:280px; }
.gameover-panel h2 { font-family:'Orbitron', sans-serif; color:#e94560; font-size:36px; margin-bottom:12px; }
.win-panel h2 { font-family:'Orbitron', sans-serif; color:#00ff88; font-size:36px; margin-bottom:12px; }
.pause-panel h2 { font-family:'Orbitron', sans-serif; color:#ffaa00; font-size:28px; margin-bottom:16px; }
.gameover-panel p, .win-panel p, .pause-panel p { margin-bottom:16px; color:#8899aa; }
.gameover-panel .menu-btn, .win-panel .menu-btn, .pause-panel .menu-btn { margin:6px auto; }

/* Mobile joystick */
#hud-bottom-mobile { position:absolute; bottom:40px; left:0; width:100%; display:flex; justify-content:space-between; padding:0 20px; pointer-events:all; }
#virtual-joystick { width:100px; height:100px; background:rgba(255,255,255,0.08); border-radius:50%; border:2px solid rgba(255,255,255,0.15); position:relative; }
.mobile-btn { 
  font-family:'Share Tech Mono', monospace; padding:12px 20px; background:rgba(30,30,50,0.8); 
  border:1px solid #444; color:#c8d6e5; border-radius:8px; font-size:14px; margin:4px; 
}

/* Scanline overlay */
.scanline-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
  pointer-events:none; z-index:40; opacity:0.3;
}
/* Vignette */
.vignette {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events:none; z-index:39;
}
/* Alarm edge pulse */
.alarm-edge {
  position:absolute; top:0; left:0; width:100%; height:100%;
  box-shadow: inset 0 0 80px rgba(233,69,96,0.4);
  pointer-events:none; z-index:41; animation: alarm-pulse 1s infinite;
}
@keyframes alarm-pulse { 0%,100%{ opacity:0.3; } 50%{ opacity:0.8; } }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#0a0a14; }
::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#555; }

@media(max-width:600px) {
  .settings-panel, .script-panel { width:95vw; padding:12px; }
  .menu-btn { font-size:14px; padding:10px 20px; min-width:170px; }
  .title-text { letter-spacing:2px; }
}