@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root {
  --glow:       #3dff8f;
  --glow-dim:   #1a8040;
  --glow-dark:  #0d4020;
  --glow-bright:#7bffb8;
  --border:     #1a6635;
  --bg:         #020b04;
  --display-bg: #010804;
  --freq-color: #b0ffd0;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-family:'Share Tech Mono', monospace;
}

/* ── CRT ── */
.scanlines {
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.28) 2px, rgba(0,0,0,0.28) 4px
  );
}
.crt-vignette {
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.88) 100%);
}

/* ── WRAPPER ── */
.codec-wrapper {
  display:flex; align-items:stretch;
  background: linear-gradient(180deg, #050f07 0%, #020b04 100%);
  border: 2px solid #0c2812;
  box-shadow:
    0 0 0 1px #000,
    0 0 40px rgba(61,255,143,0.14),
    inset 0 0 30px rgba(0,0,0,0.7);
  padding: 6px 4px;
  gap: 4px;
}

/* ── PORTRAIT ── */
.portrait-wrap {
  width: 160px;
  height: 210px;
  flex-shrink: 0;
  position: relative;
}

.portrait-frame {
  width:100%; height:100%;
  background:#000;
  border: 2px solid #0c2812;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.95),
    0 0 10px rgba(61,255,143,0.12),
    inset 0 0 0 1px rgba(61,255,143,0.06);
  overflow:hidden;
  position:relative;
}

/* Green corner glow like MGS */
.portrait-frame::before {
  content:'';
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(circle at 0% 0%,   rgba(61,255,143,0.18) 0%, transparent 45%),
    radial-gradient(circle at 100% 0%,  rgba(61,255,143,0.18) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%,  rgba(61,255,143,0.12) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%,rgba(61,255,143,0.12) 0%, transparent 45%);
}

.portrait-frame video {
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter: saturate(0) contrast(1.25) brightness(0.65)
          sepia(1) hue-rotate(82deg) saturate(2.8) brightness(0.78);
}

.portrait-scanlines {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px,
    rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px
  );
}

/* no-signal fills entire frame */
.no-signal {
  position:absolute; inset:0; z-index:5;
  background:#000;
  display:flex; align-items:center; justify-content:center;
}
.no-signal.hidden { display:none; }
.no-signal canvas {
  width:100%; height:100%;
  display:block;
}

/* ── CENTER PANEL ── */
.center-panel {
  width: 210px;
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  gap: 0;
  padding: 2px 6px;
}

/* PTT / MEMORY label rows */
.ptt-label-row,
.memory-label-row {
  display:flex; align-items:center; width:100%; gap:4px; padding:4px 0;
}
.label-line {
  flex:1; height:1px;
  background: var(--border);
  box-shadow: 0 0 4px rgba(61,255,143,0.25);
}
.label-text {
  font-size:10px; letter-spacing:5px;
  color: var(--glow);
  text-shadow: 0 0 8px var(--glow), 0 0 18px rgba(61,255,143,0.35);
  white-space:nowrap; padding:0 6px;
}

/* ── DISPLAY BOX ── */
.display-box {
  width:100%;
  background: var(--display-bg);
  border: 1px solid #0c2812;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.95),
    0 0 8px rgba(61,255,143,0.08),
    inset 0 0 0 1px rgba(61,255,143,0.04);
  padding: 5px 4px 4px;
  display:flex; flex-direction:column; gap:4px;
}

/* RAMP BARS AREA */
.ramp-area {
  width:100%;
  border-bottom: 1px solid #0c2812;
  padding-bottom: 3px;
}
#rampCanvas {
  display:block; width:100%;
  filter: drop-shadow(0 0 3px rgba(61,255,143,0.55));
}

/* FREQ ROW */
.freq-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:2px; padding:2px 0;
}

.arrow-btn {
  background:transparent;
  border:1px solid #0c2812;
  color: var(--glow);
  font-size:11px;
  width:20px; height:20px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.1s;
  text-shadow: 0 0 6px var(--glow);
  flex-shrink:0;
  user-select:none;
}
.arrow-btn:hover {
  background: rgba(61,255,143,0.1);
  border-color: var(--glow-dim);
}
.arrow-btn:active {
  background: rgba(61,255,143,0.2);
}

.freq-number {
  font-family:'VT323', monospace;
  font-size:36px;
  color: var(--freq-color);
  text-shadow:
    0 0 6px var(--glow-bright),
    0 0 14px rgba(123,255,184,0.5),
    0 0 28px rgba(61,255,143,0.3);
  line-height:1;
  letter-spacing:1px;
  flex:1; text-align:center;
}

/* ── MISC ── */
.codec-status {
  font-size:9px; letter-spacing:3px;
  color: var(--glow-dim);
  text-align:center; padding:5px 0 2px;
  text-shadow: 0 0 5px rgba(61,255,143,0.25);
}

.call-timer {
  font-family:'VT323', monospace;
  font-size:18px; color: var(--glow-dim);
  text-align:center; letter-spacing:2px;
  padding:0 0 3px;
}

.controls {
  display:flex; gap:5px; padding:3px 0 1px; justify-content:center;
}

.ctrl-btn {
  background:transparent;
  border:1px solid var(--border);
  color: var(--glow);
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:2px;
  padding:4px 9px; cursor:pointer; transition:all 0.1s;
  text-shadow: 0 0 4px var(--glow);
}
.ctrl-btn:hover:not(:disabled) {
  background: rgba(61,255,143,0.1);
  border-color: var(--glow-dim);
}
.ctrl-btn:disabled { opacity:0.25; cursor:not-allowed; }

.btn-end {
  color:#ff4040; border-color:rgba(255,64,64,0.35);
  text-shadow: 0 0 4px #ff4040;
}
.btn-end:hover:not(:disabled) {
  background: rgba(255,64,64,0.1) !important;
  border-color:#ff4040 !important;
}

/* ── MODAL ── */
.modal-bg {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,3,1,0.94);
  display:none; align-items:center; justify-content:center;
}
.modal-bg.open { display:flex; }

.modal-box {
  width:500px; max-width:95vw; max-height:90vh;
  overflow-y:auto;
  border:1px solid var(--border);
  background:#010802;
  padding:16px 20px;
  box-shadow:0 0 50px rgba(61,255,143,0.18);
}

.modal-title {
  text-align:center; font-size:11px; letter-spacing:4px;
  color:var(--glow); text-shadow:0 0 8px var(--glow);
  margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

.modal-section { margin-bottom:10px; }
.mslabel { font-size:9px; letter-spacing:2px; color:var(--glow-dim); margin-bottom:5px; }
.mslabel em { font-style:normal; opacity:0.55; }

.sdp-field {
  width:100%; height:65px; background:#000;
  border:1px solid #0a1e0d; color:var(--glow);
  font-family:'Share Tech Mono', monospace; font-size:8px;
  padding:5px; resize:none; outline:none; display:block; margin:4px 0;
}
.sdp-field:focus { border-color:var(--border); }

.mbtn {
  background:transparent; border:1px solid var(--border);
  color:var(--glow); font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:2px; padding:4px 12px;
  cursor:pointer; margin:2px 2px; transition:all 0.1s;
}
.mbtn:hover:not(:disabled) { background:rgba(61,255,143,0.1); }
.mbtn:disabled { opacity:0.3; cursor:not-allowed; }
.mbtn-close { color:#ff4040; border-color:rgba(255,64,64,0.4); }
.mbtn-close:hover { background:rgba(255,64,64,0.1) !important; }

.msep { font-size:9px; color:#0a1e0d; text-align:center; margin:8px 0; }

.modal-footer {
  text-align:center; padding-top:10px;
  border-top:1px solid #0a1e0d; margin-top:6px;
}

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:#000; }
::-webkit-scrollbar-thumb { background:var(--border); }