/* PacketHaven Terminal Ops — static build
   Upload the entire folder contents to Hostinger subdomain root.
*/

:root{
  --ph-green: 0 255 128;
  --ph-bg: 6 10 8;
  --ph-dim: rgba(0,255,128,0.65);
  --ph-border: rgba(0,255,128,0.22);
  --ph-glow1: rgba(0,255,128,0.30);
  --ph-glow2: rgba(0,255,128,0.18);
  --ph-red: #ff5c5c;
  --ph-good: #9fffd0;
  --ph-panel: rgba(0, 12, 8, 0.78);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: rgb(var(--ph-bg));
  color: rgb(var(--ph-green));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow:hidden;
}

.glow{
  text-shadow: 0 0 6px var(--ph-glow1), 0 0 14px var(--ph-glow2);
}

.dim{ opacity: 0.65; }

.frame{
  position: relative;
  height: calc(100dvh - 32px);
  width: calc(100vw - 32px);
  margin: 16px;
  border-radius: 18px;
  border: 1px solid var(--ph-border);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation: flicker 3.5s infinite;
}

@keyframes flicker{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.975; }
}

/* CRT scanlines + sweep */
.crt::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 51%);
  background-size: 100% 3px;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:0.35;
}
.crt::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-30%;
  height:22%;
  background: linear-gradient(to bottom, rgba(0,255,128,0), rgba(0,255,128,0.10), rgba(0,255,128,0));
  filter: blur(2px);
  opacity:0.55;
  pointer-events:none;
  animation: scan 6s linear infinite;
}
@keyframes scan{
  0% { transform: translateY(-30%); }
  100% { transform: translateY(130%); }
}

.topbar{
  min-height: 64px;

  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-bottom: 1px solid rgba(0,255,128,0.18);
}

.brand .sub{ font-size: 12px; opacity:0.78; }
.brand .title{ font-size: 18px; font-weight:800; letter-spacing: 0.04em; }

.hud{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  text-align:right;
  font-size:12px;
  opacity:0.85;
}
.hudrow{ display:flex; gap:8px; align-items:baseline; }
.hudlabel{ opacity:0.7; }
.hudvalue{ opacity:0.95; }

.hudbtn{
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,128,0.25);
  background: rgba(0,0,0,0.25);
  color: rgba(0,255,128,0.95);
  cursor:pointer;
}
.hudbtn:hover{ border-color: rgba(0,255,128,0.45); }
.hudbtn:active{ transform: translateY(1px); }

.terminal{
  height: calc(100% - 58px - 52px); /* topbar + inputbar */
  overflow:auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
}

.line{
  white-space: pre-wrap;
  word-break: break-word;
  opacity:0.86;
  line-height: 1.35;
  margin: 2px 0;
}
.line.dim{ opacity:0.60; }
.line.banner{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.18em;
  opacity:0.92;
  margin-top: 2px;
}
.line.prompt{ opacity:0.90; }
.line.err{ color: var(--ph-red); opacity: 0.95; }
.line.good{ color: var(--ph-good); opacity: 0.95; font-weight: 700; }
.line.kv{ opacity:0.78; }
.line.kv b{ opacity:0.98; }

.inputbar{
  flex: 0 0 auto;
  min-height: 52px;

  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,255,128,0.18);
}
.prompt{ opacity:0.85; }
.input{
  flex:1;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(180,255,220,0.96);
  font: inherit;
}
.input::placeholder{ color: rgba(0,255,128,0.35); }

.suggestions{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 64px;
  font-size: 11px;
  opacity: 0.60;
  pointer-events:none;
}

.overlay{
  position:absolute;
  top: 76px;
  right: 16px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100% - 92px);
  background: var(--ph-panel);
  border: 1px solid rgba(0,255,128,0.22);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 20px 60px rgba(0,0,0,0.35);
}

.overlayHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid rgba(0,255,128,0.18);
}
.overlayTitle{ font-weight:900; letter-spacing:0.18em; font-size: 12px; opacity:0.95; }
.overlayClose{
  font-family: inherit;
  border: 1px solid rgba(0,255,128,0.22);
  background: rgba(0,0,0,0.2);
  color: rgba(0,255,128,0.95);
  border-radius: 10px;
  padding: 6px 10px;
  cursor:pointer;
}
.overlayClose:hover{ border-color: rgba(0,255,128,0.45); }

.overlayBody{
  padding: 12px 14px 14px 14px;
  overflow:auto;
  max-height: calc(100% - 48px);
}
.overlaySection{ margin-bottom: 14px; }
.overlayLabel{
  font-size: 11px;
  opacity: 0.65;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.overlayValue{
  font-size: 14px;
  opacity: 0.95;
  font-weight: 800;
}
.overlayText{
  font-size: 12px;
  opacity: 0.82;
  line-height: 1.45;
}
.overlayText .bullet{ display:block; margin: 4px 0; }

@media (max-width: 520px){
  .hudbtn{ padding: 7px 8px; }
  .brand .title{ font-size: 16px; }
}