:root{
  --phos:#22ff66;
  --phos-dim:#0f7a33;
  --phos-faint:#0a3d1c;
  --amber:#ffb000;
  --bg:#020a02;
  --grid:rgba(34,255,102,0.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;}
body{
  font-family:'Share Tech Mono',monospace;
  color:var(--phos);
  display:flex;flex-direction:column;
  height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select:none;-webkit-user-select:none;
}

/* ---- screen flicker + scanlines overlay ---- */
.crt-overlay{
  pointer-events:none;position:fixed;inset:0;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0px,rgba(0,0,0,0.18) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:multiply;
  animation:flicker 6s infinite steps(60);
}
.crt-vignette{
  pointer-events:none;position:fixed;inset:0;z-index:49;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.65) 100%);
}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{opacity:1;}
  20%,22%{opacity:0.88;}
}
@media (prefers-reduced-motion:reduce){
  .crt-overlay{animation:none;}
}

/* ---- header ---- */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px 6px;font-family:'VT323',monospace;
  text-shadow:0 0 6px var(--phos);
  border-bottom:1px solid var(--phos-faint);
  flex:0 0 auto;
}
header .title{font-size:26px;letter-spacing:2px;line-height:1;}
header .sub{font-size:13px;color:var(--phos-dim);letter-spacing:1px;}
header .clock{font-size:22px;text-align:right;line-height:1.1;}
header .clock small{display:block;font-size:12px;color:var(--phos-dim);}

/* ---- radar stage ---- */
.stage{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;}
#scope{
  width:min(92vw,92vh,560px);height:min(92vw,92vh,560px);
  display:block;cursor:crosshair;
  filter:drop-shadow(0 0 14px rgba(34,255,102,0.35));
}

/* ---- footer / controls ---- */
footer{
  flex:0 0 auto;padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--phos-faint);
}
.readout{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--phos-dim);margin-bottom:8px;
  text-shadow:0 0 4px var(--phos-faint);
}
.readout b{color:var(--phos);font-weight:normal;}
.ctrl-row{display:flex;align-items:center;gap:12px;}
.ctrl-row label{font-family:'VT323',monospace;font-size:18px;white-space:nowrap;text-shadow:0 0 5px var(--phos);}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;
  background:var(--phos-faint);border-radius:2px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--phos);box-shadow:0 0 10px var(--phos);cursor:pointer;border:2px solid #020a02;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--phos);
  box-shadow:0 0 10px var(--phos);cursor:pointer;border:2px solid #020a02;
}
input[type=range]:focus-visible{outline:2px solid var(--phos);outline-offset:4px;}
.range-val{font-family:'VT323',monospace;font-size:20px;width:78px;text-align:right;text-shadow:0 0 6px var(--phos);}

/* ---- altitude legend (palette stays green: dim -> bright -> pale) ---- */
.legend{
  display:flex;align-items:center;gap:8px;margin-top:8px;
  font-family:'VT323',monospace;font-size:14px;color:var(--phos-dim);
}
.legend-label{letter-spacing:1px;text-shadow:0 0 5px var(--phos);color:var(--phos);}
.legend-bar{
  flex:1;height:7px;border-radius:3px;border:1px solid var(--phos-faint);
  background:linear-gradient(90deg,#0f7a33 0%,#22ff66 55%,#c8ffd8 100%);
  box-shadow:0 0 8px rgba(34,255,102,0.25);
}
.legend-lo,.legend-hi{font-size:12px;}

.btns{display:flex;gap:8px;margin-top:8px;}
button{
  flex:1;font-family:'VT323',monospace;font-size:17px;letter-spacing:1px;
  background:transparent;color:var(--phos);border:1px solid var(--phos-dim);
  padding:8px;border-radius:3px;text-shadow:0 0 5px var(--phos);cursor:pointer;
  transition:background .15s,box-shadow .15s;
}
button:active{background:var(--phos-faint);box-shadow:0 0 12px var(--phos-faint) inset;}
button.on{background:var(--phos-faint);box-shadow:0 0 10px var(--phos-faint) inset;color:var(--phos);}
button:disabled{opacity:.35;}
button:focus-visible{outline:2px solid var(--phos);outline-offset:2px;}

/* ---- boot / status ---- */
.status{
  position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:60;font-family:'VT323',monospace;font-size:18px;color:var(--amber);
  text-shadow:0 0 8px var(--amber);text-align:center;pointer-events:none;
  background:rgba(2,10,2,.7);padding:4px 12px;border:1px solid rgba(255,176,0,.4);border-radius:3px;
  max-width:80vw;
}
.status.hide{display:none;}
.status.tap{pointer-events:auto;cursor:pointer;}

/* ---- contact detail card ---- */
.contact-card{
  position:fixed;z-index:65;left:50%;top:calc(64px + env(safe-area-inset-top));
  transform:translateX(-50%);
  width:min(86vw,320px);
  background:rgba(2,14,5,0.94);
  border:1px solid var(--phos-dim);
  box-shadow:0 0 18px rgba(34,255,102,0.25),0 0 40px rgba(0,0,0,0.6);
  border-radius:4px;padding:12px 14px 14px;
  backdrop-filter:blur(2px);
}
.contact-card.hide{display:none;}
.card-close{
  position:absolute;top:6px;right:6px;width:30px;height:30px;flex:none;
  font-size:16px;border:1px solid var(--phos-faint);color:var(--phos-dim);
  background:transparent;border-radius:3px;line-height:1;padding:0;
}
.card-call{
  font-family:'VT323',monospace;font-size:30px;letter-spacing:2px;line-height:1;
  text-shadow:0 0 8px var(--phos);margin-bottom:10px;padding-right:32px;
}
.card-sub{
  font-size:13px;color:var(--phos);margin:-6px 0 12px;letter-spacing:0.5px;
  text-shadow:0 0 5px var(--phos-faint);min-height:0;
}
.card-sub:empty{display:none;}

/* ---- route line: ORIGIN → DESTINATION ---- */
.card-route{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  padding:8px 10px;border:1px solid var(--phos-faint);border-radius:3px;
  background:rgba(34,255,102,0.05);font-size:13px;
}
.card-route.hide{display:none;}
.card-route .ap{display:flex;flex-direction:column;min-width:0;flex:1;}
.card-route .ap.dest{text-align:right;align-items:flex-end;}
.card-route .code{font-family:'VT323',monospace;font-size:24px;line-height:1;letter-spacing:1px;text-shadow:0 0 6px var(--phos);}
.card-route .city{font-size:11px;color:var(--phos-dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.card-route .arrow{color:var(--phos);font-size:18px;flex:none;text-shadow:0 0 6px var(--phos);}
.card-route .pending{color:var(--phos-dim);font-size:12px;letter-spacing:1px;width:100%;text-align:center;}
.card-grid{
  display:grid;grid-template-columns:auto 1fr;gap:5px 12px;
  font-size:13px;align-items:baseline;
}
.card-grid .k{color:var(--phos-dim);font-size:11px;letter-spacing:1px;text-shadow:0 0 4px var(--phos-faint);}
.card-grid .v{color:var(--phos);text-align:right;font-family:'Share Tech Mono',monospace;text-shadow:0 0 5px var(--phos-faint);}

/* ---- contacts list panel ---- */
.contact-list{
  position:fixed;z-index:70;inset:0;
  top:env(safe-area-inset-top);
  background:rgba(2,10,3,0.97);
  display:flex;flex-direction:column;
  backdrop-filter:blur(3px);
}
.contact-list.hide{display:none;}
.list-head{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--phos-dim);
  font-family:'VT323',monospace;font-size:24px;letter-spacing:2px;
  text-shadow:0 0 8px var(--phos);
}
.list-tools{display:flex;gap:8px;align-items:center;}
.list-sort{
  font-family:'VT323',monospace;font-size:15px;letter-spacing:1px;
  background:transparent;color:var(--phos);border:1px solid var(--phos-dim);
  padding:5px 9px;border-radius:3px;flex:none;width:auto;
}
.list-close{
  width:34px;height:34px;flex:none;font-size:17px;padding:0;line-height:1;
  background:transparent;color:var(--phos-dim);border:1px solid var(--phos-faint);border-radius:3px;
}
.list-body{flex:1 1 auto;overflow-y:auto;padding:8px 10px calc(14px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;}
.list-empty{color:var(--phos-dim);text-align:center;padding:40px 20px;font-size:15px;}

.lrow{
  border:1px solid var(--phos-faint);border-radius:4px;padding:9px 11px;margin-bottom:8px;
  cursor:pointer;transition:background .12s,box-shadow .12s;
}
.lrow:active{background:var(--phos-faint);box-shadow:0 0 12px var(--phos-faint) inset;}
.lrow.sel{border-color:var(--phos);box-shadow:0 0 10px rgba(34,255,102,0.3);}
.lrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.lrow-call{font-family:'VT323',monospace;font-size:23px;letter-spacing:1px;text-shadow:0 0 6px var(--phos);line-height:1;}
.lrow-type{font-size:11px;color:var(--phos-dim);letter-spacing:1px;}
.lrow-alt{font-family:'Share Tech Mono',monospace;font-size:15px;white-space:nowrap;}
.lrow-meta{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;
  font-size:12px;color:var(--phos-dim);
}
.lrow-meta span b{color:var(--phos);font-weight:normal;}
.lrow-bar{
  height:3px;border-radius:2px;margin-top:7px;
  background:linear-gradient(90deg,#0f7a33,#22ff66,#c8ffd8);
}
.lrow.emerg{border-color:var(--amber);box-shadow:0 0 10px rgba(255,176,0,0.3);}
.lrow.emerg .lrow-call{color:var(--amber);text-shadow:0 0 8px var(--amber);}
.badge{
  display:inline-block;font-size:10px;letter-spacing:1px;padding:1px 5px;border-radius:2px;
  border:1px solid var(--phos-dim);color:var(--phos);margin-left:6px;vertical-align:middle;
}
.badge.amber{border-color:var(--amber);color:var(--amber);}