:root{
  --hl-orange:#ff8c1a;
  --hl-orange-dim:#a85c10;
  --hl-black:#0a0908;
  --hl-panel:#12100dcc;
  --hl-green:#8fdc6a;
  --hl-red:#e8402b;
  --hl-border:#2c2620;
  font-family:'Rajdhani', sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:#000; color:var(--hl-orange);
  user-select:none;
}

#scene{position:fixed; inset:0; display:block; outline:none;}

/* ===================== HUD ===================== */
#hud{position:fixed; inset:0; pointer-events:none; z-index:10;}

.panel{
  position:absolute;
  background:var(--hl-panel);
  border:1px solid var(--hl-border);
  border-left:3px solid var(--hl-orange);
  padding:10px 14px;
  backdrop-filter:blur(1px);
  box-shadow:0 0 14px #00000090;
  pointer-events:auto;
}

.panel-tr{ top:14px; right:14px; display:flex; align-items:center; gap:9px;}
#ip-value{
  font-family:'Share Tech Mono', monospace; font-size:16px; letter-spacing:1px;
  color:var(--hl-green);
}
#ip-copy{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; flex:0 0 auto;
  background:transparent; border:1px solid var(--hl-orange-dim); color:var(--hl-orange);
  cursor:pointer; transition:.15s; border-radius:2px;
}
#ip-copy:hover{ background:var(--hl-orange); color:#000; }
#ip-copy.copied{ background:var(--hl-green); border-color:var(--hl-green); color:#000; }

.panel-keys{
  bottom:14px; left:14px;
  display:flex; flex-direction:column; gap:3px;
  font-size:11px; color:#8a7a5c; letter-spacing:.5px;
  border-left:3px solid var(--hl-orange-dim);
}

/* ===================== crosshair ===================== */
#crosshair{
  position:absolute; top:50%; left:50%; width:20px; height:20px;
  transform:translate(-50%,-50%);
}
#crosshair span{
  position:absolute; background:var(--hl-orange); opacity:.85;
  box-shadow:0 0 4px var(--hl-orange);
}
#crosshair span:nth-child(1){top:9px; left:0; width:6px; height:2px;}
#crosshair span:nth-child(2){top:9px; right:0; width:6px; height:2px;}
#crosshair span:nth-child(3){left:9px; top:0; width:2px; height:6px;}
#crosshair span:nth-child(4){left:9px; bottom:0; width:2px; height:6px;}

/* ===================== atmosphere ===================== */
#vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, #000000c0 100%);
  pointer-events:none;
}
#scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
}

/* ===================== loading ===================== */
#loading{
  position:fixed; inset:0; z-index:90; background:#000;
  display:flex; align-items:center; justify-content:center;
  color:var(--hl-orange); font-size:14px; letter-spacing:3px;
}
#loading.hidden{display:none;}
.loading-text{animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ===================== responsive ===================== */
@media (max-width:720px){
  .panel-keys{display:none;}
  .panel-tr{font-size:12px; padding:8px 10px;}
}